1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
|
// Form component utilities and Alpine.js data
export function formComponentsData() {
return {
// Modal states
showAlertModal: false,
showConfirmModal: false,
showContentModal: false,
// Toast notification state
toasts: [],
// Handle confirm modal action
handleConfirm() {
this.showConfirmModal = false;
this.showToast('success', 'Action confirmed!');
},
// Show toast notification
showToast(type = 'success', message = null) {
const messages = {
success: 'Operation completed successfully!',
error: 'An error occurred. Please try again.',
info: 'Here is some information.',
warning: 'Please be careful with this action.'
};
const toastMessage = message || messages[type] || messages.success;
const toastId = Date.now();
// Add toast to list
this.toasts.push({
id: toastId,
type: type,
message: toastMessage
});
// Auto-remove after 5 seconds
setTimeout(() => {
this.toasts = this.toasts.filter(t => t.id !== toastId);
}, 5000);
},
// Remove toast manually
removeToast(id) {
this.toasts = this.toasts.filter(t => t.id !== id);
},
// Form validation utilities
validateEmail(email) {
const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
return regex.test(email);
},
validatePassword(password) {
return password.length >= 8;
},
// Auto-expand textarea
autoExpandTextarea(event) {
const textarea = event.target;
textarea.style.height = 'auto';
textarea.style.height = (textarea.scrollHeight) + 'px';
}
};
}
// Toast container component for Alpine.js
export function renderToastContainer(Alpine) {
if (!Alpine) return;
// This can be used in templates via Alpine
window.formUtils = {
formatCharCount(current, max) {
if (max) {
return `${current}/${max}`;
}
return current;
},
isCharCountWarning(current, max) {
if (!max) return false;
return current > (max * 0.8);
},
isCharCountError(current, max) {
if (!max) return false;
return current >= max;
}
};
}
|
