@nuralyui/form 0.1.0

package/mixins/form-field-validation.mixin.js

@@ -0,0 +1,300 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { property, state } from 'lit/decorators.js';
+/**
+ * Mixin that provides standardized form field validation capabilities
+ * This should be used by input components that need to participate in forms
+ *
+ * @example
+ * ```typescript
+ * export class InputComponent extends FormFieldValidationMixin(NuralyUIBaseMixin(LitElement)) {
+ *   // Component-specific validation logic
+ *   protected validateValue(value: string): boolean {
+ *     return value.length >= this.minLength;
+ *   }
+ * }
+ * ```
+ */
+export const FormFieldValidationMixin = (superClass) => {
+    class FormFieldValidationMixinClass extends superClass {
+        constructor() {
+            super(...arguments);
+            /** Current validation message */
+            this.validationMessage = '';
+            /** Validation state */
+            this._isValid = true;
+            /** Whether field has been touched by user */
+            this._isTouched = false;
+            /** Whether field value has changed from initial */
+            this._isDirty = false;
+            /**
+             * Handle focus event
+             */
+            this.handleFocus = () => {
+                this._isTouched = true;
+            };
+            /**
+             * Handle blur event
+             */
+            this.handleBlur = () => {
+                this.validateOnBlur();
+            };
+            /**
+             * Handle input event
+             */
+            this.handleInput = () => {
+                this.updateDirtyState();
+                this.validateOnInput();
+            };
+            /**
+             * Handle change event
+             */
+            this.handleChange = () => {
+                this.updateDirtyState();
+                this.validateOnChange();
+            };
+        }
+        connectedCallback() {
+            super.connectedCallback();
+            this._initialValue = this.value;
+            this.addValidationListeners();
+        }
+        disconnectedCallback() {
+            super.disconnectedCallback();
+            this.removeValidationListeners();
+        }
+        /**
+         * Add validation event listeners
+         */
+        addValidationListeners() {
+            this.addEventListener('focus', this.handleFocus);
+            this.addEventListener('blur', this.handleBlur);
+            this.addEventListener('input', this.handleInput);
+            this.addEventListener('change', this.handleChange);
+        }
+        /**
+         * Remove validation event listeners
+         */
+        removeValidationListeners() {
+            this.removeEventListener('focus', this.handleFocus);
+            this.removeEventListener('blur', this.handleBlur);
+            this.removeEventListener('input', this.handleInput);
+            this.removeEventListener('change', this.handleChange);
+        }
+        /**
+         * Update dirty state
+         */
+        updateDirtyState() {
+            this._isDirty = this.value !== this._initialValue;
+        }
+        /**
+         * Validate on blur (can be overridden)
+         */
+        validateOnBlur() {
+            // Only validate if the validation trigger is set to blur
+            const trigger = this.validationTrigger;
+            if (trigger === 'blur') {
+                this.validate();
+            }
+        }
+        /**
+         * Validate on input (can be overridden)
+         */
+        validateOnInput() {
+            // Override in component if needed
+        }
+        /**
+         * Validate on change (can be overridden)
+         */
+        validateOnChange() {
+            // Only validate if the validation trigger is set to change
+            const trigger = this.validationTrigger;
+            if (trigger === 'change') {
+                this.validate();
+            }
+        }
+        /**
+         * Main validation method - validates the field
+         */
+        validate() {
+            const isValid = this.performValidation();
+            this.setValidationState(isValid);
+            return isValid;
+        }
+        /**
+         * Perform the actual validation logic
+         * Override this method in components for specific validation
+         */
+        performValidation() {
+            // Required field validation
+            if (this.required && this.isEmpty()) {
+                this.validationMessage = 'This field is required';
+                return false;
+            }
+            // Component-specific validation
+            if (!this.isEmpty() && !this.validateValue(this.value)) {
+                return false;
+            }
+            this.validationMessage = '';
+            return true;
+        }
+        /**
+         * Component-specific value validation
+         * Override this method in components
+         */
+        validateValue(_value) {
+            return true; // Default: always valid
+        }
+        /**
+         * Check if value is empty
+         */
+        isEmpty() {
+            const value = this.value;
+            return value === null ||
+                value === undefined ||
+                value === '' ||
+                (Array.isArray(value) && value.length === 0);
+        }
+        /**
+         * Set validation state and dispatch events
+         */
+        setValidationState(isValid) {
+            const wasValid = this._isValid;
+            this._isValid = isValid;
+            // Dispatch validation event if state changed
+            if (wasValid !== isValid) {
+                this.dispatchValidationEvent(isValid);
+            }
+            // Update UI
+            this.requestUpdate();
+        }
+        /**
+         * HTML5 constraint validation API
+         */
+        checkValidity() {
+            return this.validate();
+        }
+        /**
+         * HTML5 constraint validation API with UI feedback
+         */
+        reportValidity() {
+            const isValid = this.validate();
+            if (!isValid) {
+                // Show validation UI (can be overridden)
+                this.showValidationUI();
+                // Dispatch invalid event
+                this.dispatchEvent(new CustomEvent('invalid', {
+                    detail: { message: this.validationMessage },
+                    bubbles: true,
+                    composed: true
+                }));
+            }
+            return isValid;
+        }
+        /**
+         * Set custom validation message
+         */
+        setCustomValidity(message) {
+            this.validationMessage = message;
+            this._isValid = !message;
+            this.requestUpdate();
+        }
+        /**
+         * Reset field to initial state
+         */
+        reset() {
+            this.value = this._initialValue;
+            this._isValid = true;
+            this._isTouched = false;
+            this._isDirty = false;
+            this.validationMessage = '';
+            this.requestUpdate();
+        }
+        /**
+         * Show validation UI (override in components)
+         */
+        showValidationUI() {
+            // Default implementation - can be overridden
+            console.warn('Validation failed:', this.validationMessage);
+        }
+        /**
+         * Dispatch validation event
+         */
+        dispatchValidationEvent(isValid) {
+            const detail = {
+                isValid,
+                value: this.value,
+                message: this.validationMessage || '',
+                errors: isValid ? [] : [this.validationMessage || ''],
+                field: this.name,
+                timestamp: Date.now()
+            };
+            this.dispatchEvent(new CustomEvent('nr-validation', {
+                detail,
+                bubbles: true,
+                composed: true
+            }));
+        }
+        /**
+         * Get validation state
+         */
+        get isValid() {
+            return this._isValid;
+        }
+        /**
+         * Get touched state
+         */
+        get isTouched() {
+            return this._isTouched;
+        }
+        /**
+         * Get dirty state
+         */
+        get isDirty() {
+            return this._isDirty;
+        }
+        /**
+         * Get validation classes for styling
+         */
+        getValidationClasses() {
+            return {
+                'valid': this._isValid,
+                'invalid': !this._isValid,
+                'touched': this._isTouched,
+                'untouched': !this._isTouched,
+                'dirty': this._isDirty,
+                'pristine': !this._isDirty,
+                'required': this.required || false
+            };
+        }
+    }
+    __decorate([
+        property({ type: String })
+    ], FormFieldValidationMixinClass.prototype, "name", void 0);
+    __decorate([
+        property({ type: Boolean })
+    ], FormFieldValidationMixinClass.prototype, "required", void 0);
+    __decorate([
+        state()
+    ], FormFieldValidationMixinClass.prototype, "validationMessage", void 0);
+    __decorate([
+        state()
+    ], FormFieldValidationMixinClass.prototype, "_isValid", void 0);
+    __decorate([
+        state()
+    ], FormFieldValidationMixinClass.prototype, "_isTouched", void 0);
+    __decorate([
+        state()
+    ], FormFieldValidationMixinClass.prototype, "_isDirty", void 0);
+    return FormFieldValidationMixinClass;
+};
+//# sourceMappingURL=form-field-validation.mixin.js.map

package/mixins/form-field-validation.mixin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-field-validation.mixin.js","sourceRoot":"","sources":["../../../../src/components/form/mixins/form-field-validation.mixin.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\n/**\n * @deprecated This mixin is deprecated and no longer used.\n * \n * Form field validation is now handled by individual component validation controllers:\n * - Input validation: InputValidationController\n * - Form coordination: FormValidationController (listens to validation events)\n * \n * This approach eliminates duplication and provides better separation of concerns.\n * Components handle their own validation, and forms coordinate/listen to validation events.\n */\n\nimport { LitElement } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { FormFieldValidation, ValidationEventDetail } from '../interfaces/validation.interface.js';\n\ntype Constructor<T = {}> = new (...args: any[]) => T;\n\n/**\n * Mixin that provides standardized form field validation capabilities\n * This should be used by input components that need to participate in forms\n * \n * @example\n * ```typescript\n * export class InputComponent extends FormFieldValidationMixin(NuralyUIBaseMixin(LitElement)) {\n *   // Component-specific validation logic\n *   protected validateValue(value: string): boolean {\n *     return value.length >= this.minLength;\n *   }\n * }\n * ```\n */\nexport const FormFieldValidationMixin = <T extends Constructor<LitElement>>(superClass: T) => {\n  class FormFieldValidationMixinClass extends superClass implements FormFieldValidation {\n    \n    /** Field name for form submission */\n    @property({ type: String })\n    name?: string;\n    \n    /** Required field indicator */\n    @property({ type: Boolean })\n    required?: boolean;\n    \n    /** Current validation message */\n    @state()\n    validationMessage?: string = '';\n    \n    /** Validation state */\n    @state()\n    private _isValid: boolean = true;\n    \n    /** Whether field has been touched by user */\n    @state()\n    private _isTouched: boolean = false;\n    \n    /** Whether field value has changed from initial */\n    @state()\n    private _isDirty: boolean = false;\n    \n    /** Initial value for dirty state tracking */\n    private _initialValue: any;\n    \n    /** Field value - must be implemented by component */\n    declare value: any;\n    \n    override connectedCallback(): void {\n      super.connectedCallback();\n      this._initialValue = this.value;\n      this.addValidationListeners();\n    }\n    \n    override disconnectedCallback(): void {\n      super.disconnectedCallback();\n      this.removeValidationListeners();\n    }\n    \n    /**\n     * Add validation event listeners\n     */\n    private addValidationListeners(): void {\n      this.addEventListener('focus', this.handleFocus);\n      this.addEventListener('blur', this.handleBlur);\n      this.addEventListener('input', this.handleInput);\n      this.addEventListener('change', this.handleChange);\n    }\n    \n    /**\n     * Remove validation event listeners\n     */\n    private removeValidationListeners(): void {\n      this.removeEventListener('focus', this.handleFocus);\n      this.removeEventListener('blur', this.handleBlur);\n      this.removeEventListener('input', this.handleInput);\n      this.removeEventListener('change', this.handleChange);\n    }\n    \n    /**\n     * Handle focus event\n     */\n    private handleFocus = (): void => {\n      this._isTouched = true;\n    };\n    \n    /**\n     * Handle blur event\n     */\n    private handleBlur = (): void => {\n      this.validateOnBlur();\n    };\n    \n    /**\n     * Handle input event\n     */\n    private handleInput = (): void => {\n      this.updateDirtyState();\n      this.validateOnInput();\n    };\n    \n    /**\n     * Handle change event\n     */\n    private handleChange = (): void => {\n      this.updateDirtyState();\n      this.validateOnChange();\n    };\n    \n    /**\n     * Update dirty state\n     */\n    private updateDirtyState(): void {\n      this._isDirty = this.value !== this._initialValue;\n    }\n    \n    /**\n     * Validate on blur (can be overridden)\n     */\n    protected validateOnBlur(): void {\n      // Only validate if the validation trigger is set to blur\n      const trigger = (this as any).validationTrigger;\n      if (trigger === 'blur') {\n        this.validate();\n      }\n    }\n    \n    /**\n     * Validate on input (can be overridden)\n     */\n    protected validateOnInput(): void {\n      // Override in component if needed\n    }\n    \n    /**\n     * Validate on change (can be overridden)\n     */\n    protected validateOnChange(): void {\n      // Only validate if the validation trigger is set to change\n      const trigger = (this as any).validationTrigger;\n      if (trigger === 'change') {\n        this.validate();\n      }\n    }\n    \n    /**\n     * Main validation method - validates the field\n     */\n    validate(): boolean {\n      const isValid = this.performValidation();\n      this.setValidationState(isValid);\n      return isValid;\n    }\n    \n    /**\n     * Perform the actual validation logic\n     * Override this method in components for specific validation\n     */\n    protected performValidation(): boolean {\n      // Required field validation\n      if (this.required && this.isEmpty()) {\n        this.validationMessage = 'This field is required';\n        return false;\n      }\n      \n      // Component-specific validation\n      if (!this.isEmpty() && !this.validateValue(this.value)) {\n        return false;\n      }\n      \n      this.validationMessage = '';\n      return true;\n    }\n    \n    /**\n     * Component-specific value validation\n     * Override this method in components\n     */\n    protected validateValue(_value: any): boolean {\n      return true; // Default: always valid\n    }\n    \n    /**\n     * Check if value is empty\n     */\n    protected isEmpty(): boolean {\n      const value = this.value;\n      return value === null || \n             value === undefined || \n             value === '' || \n             (Array.isArray(value) && value.length === 0);\n    }\n    \n    /**\n     * Set validation state and dispatch events\n     */\n    private setValidationState(isValid: boolean): void {\n      const wasValid = this._isValid;\n      this._isValid = isValid;\n      \n      // Dispatch validation event if state changed\n      if (wasValid !== isValid) {\n        this.dispatchValidationEvent(isValid);\n      }\n      \n      // Update UI\n      this.requestUpdate();\n    }\n    \n    /**\n     * HTML5 constraint validation API\n     */\n    checkValidity(): boolean {\n      return this.validate();\n    }\n    \n    /**\n     * HTML5 constraint validation API with UI feedback\n     */\n    reportValidity(): boolean {\n      const isValid = this.validate();\n      \n      if (!isValid) {\n        // Show validation UI (can be overridden)\n        this.showValidationUI();\n        \n        // Dispatch invalid event\n        this.dispatchEvent(new CustomEvent('invalid', {\n          detail: { message: this.validationMessage },\n          bubbles: true,\n          composed: true\n        }));\n      }\n      \n      return isValid;\n    }\n    \n    /**\n     * Set custom validation message\n     */\n    setCustomValidity(message: string): void {\n      this.validationMessage = message;\n      this._isValid = !message;\n      this.requestUpdate();\n    }\n    \n    /**\n     * Reset field to initial state\n     */\n    reset(): void {\n      (this as any).value = this._initialValue;\n      this._isValid = true;\n      this._isTouched = false;\n      this._isDirty = false;\n      this.validationMessage = '';\n      this.requestUpdate();\n    }\n    \n    /**\n     * Show validation UI (override in components)\n     */\n    protected showValidationUI(): void {\n      // Default implementation - can be overridden\n      console.warn('Validation failed:', this.validationMessage);\n    }\n    \n    /**\n     * Dispatch validation event\n     */\n    private dispatchValidationEvent(isValid: boolean): void {\n      const detail: ValidationEventDetail = {\n        isValid,\n        value: this.value,\n        message: this.validationMessage || '',\n        errors: isValid ? [] : [this.validationMessage || ''],\n        field: this.name,\n        timestamp: Date.now()\n      };\n      \n      this.dispatchEvent(new CustomEvent('nr-validation', {\n        detail,\n        bubbles: true,\n        composed: true\n      }));\n    }\n    \n    /**\n     * Get validation state\n     */\n    get isValid(): boolean {\n      return this._isValid;\n    }\n    \n    /**\n     * Get touched state\n     */\n    get isTouched(): boolean {\n      return this._isTouched;\n    }\n    \n    /**\n     * Get dirty state\n     */\n    get isDirty(): boolean {\n      return this._isDirty;\n    }\n    \n    /**\n     * Get validation classes for styling\n     */\n    protected getValidationClasses(): Record<string, boolean> {\n      return {\n        'valid': this._isValid,\n        'invalid': !this._isValid,\n        'touched': this._isTouched,\n        'untouched': !this._isTouched,\n        'dirty': this._isDirty,\n        'pristine': !this._isDirty,\n        'required': this.required || false\n      };\n    }\n  }\n  \n  return FormFieldValidationMixinClass as Constructor<FormFieldValidation> & T;\n};\n"]}

package/package.json

@@ -0,0 +1,63 @@
+{
+    "name": "@nuralyui/form",
+    "version": "0.1.0",
+    "description": "NuralyUI Form - A comprehensive form component with validation coordination, submission handling, and state management",
+    "type": "module",
+    "main": "./index.js",
+    "module": "./index.js",
+    "types": "./index.d.ts",
+    "exports": {
+        ".": {
+            "types": "./index.d.ts",
+            "default": "./index.js"
+        },
+        "./form.component.js": {
+            "types": "./form.component.d.ts",
+            "default": "./form.component.js"
+        }
+    },
+    "files": [
+        "*.js",
+        "*.d.ts",
+        "controllers/",
+        "interfaces/",
+        "mixins/",
+        "utils/",
+        "demo/",
+        "test/"
+    ],
+    "scripts": {
+        "build": "tsc",
+        "test": "wtr \"**/*.test.js\" --node-resolve",
+        "test:watch": "wtr \"**/*.test.js\" --node-resolve --watch",
+        "demo": "wds --open demo/ --node-resolve"
+    },
+    "keywords": [
+        "form",
+        "validation",
+        "form-control",
+        "web-components",
+        "lit",
+        "nuraly",
+        "ui-components",
+        "form-submission",
+        "form-state"
+    ],
+    "author": "Nuraly Team <team@nuraly.io>",
+    "license": "MIT",
+    "dependencies": {
+        "lit": "^3.0.0"
+    },
+    "peerDependencies": {
+        "@nuraly/shared": "^1.0.0"
+    },
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/Nuralyio/NuralyUI.git",
+        "directory": "src/components/form"
+    },
+    "bugs": {
+        "url": "https://github.com/Nuralyio/NuralyUI/issues"
+    },
+    "homepage": "https://nuralyui.com/components/form"
+}