From a4c5d4fa64f4e5491b1ef3195a00801ea4f21b44 Mon Sep 17 00:00:00 2001 From: "Danilo M." Date: Thu, 16 Apr 2026 16:54:19 +0200 Subject: feat: add form component templates, i18n strings, and Alpine.js utilities --- .../danix-xyz-hacker/assets/js/form-components.js | 91 +++++++++ .../layouts/partials/form-components.html | 219 +++++++++++++++++++++ .../layouts/partials/toast-container.html | 13 ++ 3 files changed, 323 insertions(+) create mode 100644 themes/danix-xyz-hacker/assets/js/form-components.js create mode 100644 themes/danix-xyz-hacker/layouts/partials/form-components.html create mode 100644 themes/danix-xyz-hacker/layouts/partials/toast-container.html (limited to 'themes/danix-xyz-hacker') diff --git a/themes/danix-xyz-hacker/assets/js/form-components.js b/themes/danix-xyz-hacker/assets/js/form-components.js new file mode 100644 index 0000000..35a5f27 --- /dev/null +++ b/themes/danix-xyz-hacker/assets/js/form-components.js @@ -0,0 +1,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; + } + }; +} diff --git a/themes/danix-xyz-hacker/layouts/partials/form-components.html b/themes/danix-xyz-hacker/layouts/partials/form-components.html new file mode 100644 index 0000000..9a69d43 --- /dev/null +++ b/themes/danix-xyz-hacker/layouts/partials/form-components.html @@ -0,0 +1,219 @@ +{{ define "form-components" }} + + + +
+

Form Components

+ + +
+ + +
+ + +
+ + +
{{ i18n "form_invalid_email" }}
+
+ + +
+ + +
{{ i18n "form_password_help" | default "Must be at least 8 characters" }}
+
+ + +
+ + +
+ + + +
+ + +
+ + + +
+ + +
+ + + +
+ +
+ + +
+

{{ i18n "form_select_interests" | default "Select your interests" }}

+ + +
+ + + +
+

{{ i18n "form_select_preference" | default "Select a preference" }}

+ + +
+ + + +
+
+ + +
+
+ + +
+
+ + + +
+
+ + +
+ +
+ + + +
+

Modal Examples

+ + + +
+ + + +
+

Notifications

+ + + + +
+ +
+ + + +
+
+
+
+

{{ i18n "form_alert_title" | default "Alert" }}

+
+
+
+

{{ i18n "form_alert_message" | default "This is an alert modal. Click OK to dismiss." }}

+
+
+ +
+
+
+ + + +
+
+
+
+

{{ i18n "form_confirm_title" | default "Confirm Action" }}

+
+
+
+

{{ i18n "form_confirm_message" | default "Are you sure you want to continue?" }}

+
+
+ + +
+
+
+ + + +
+
+
+
+

{{ i18n "form_content_title" | default "Modal with Content" }}

+
+
+
+

{{ i18n "form_content_message" | default "This modal contains detailed content. You can add forms, lists, or any HTML here." }}

+
+
+ + +
+
+
+
+ + +
+
+
+ +{{ end }} diff --git a/themes/danix-xyz-hacker/layouts/partials/toast-container.html b/themes/danix-xyz-hacker/layouts/partials/toast-container.html new file mode 100644 index 0000000..1c5fbf2 --- /dev/null +++ b/themes/danix-xyz-hacker/layouts/partials/toast-container.html @@ -0,0 +1,13 @@ +{{ define "toast-container" }} + + +
+ +
+ +{{ end }} -- cgit v1.2.3