feat: add form component templates, i18n strings, and Alpine.js utilities

1 files changed, 91 insertions, 0 deletions

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;
+    }
+  };
+}