@vanduo-oss/framework 1.2.6 → 1.2.8

package/js/components/validate.js

@@ -0,0 +1,185 @@
+/**
+ * Vanduo Framework - Validate (Form Validation) Component
+ * Declarative validation via data attributes with real-time and on-submit modes
+ */
+
+(function () {
+  'use strict';
+
+  const Validate = {
+    instances: new Map(),
+
+    rules: {
+      required: (value) => value.trim().length > 0,
+      email: (value) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value),
+      url: (value) => { try { new URL(value); return true; } catch (_e) { return false; } },
+      number: (value) => !isNaN(parseFloat(value)) && isFinite(value),
+      min: (value, param) => value.length >= parseInt(param, 10),
+      max: (value, param) => value.length <= parseInt(param, 10),
+      minVal: (value, param) => parseFloat(value) >= parseFloat(param),
+      maxVal: (value, param) => parseFloat(value) <= parseFloat(param),
+      pattern: (value, param) => { try { return new RegExp(param).test(value); } catch (_e) { return false; } },
+      match: (value, param) => {
+        const other = document.querySelector('[name="' + param + '"]');
+        return other ? value === other.value : false;
+      }
+    },
+
+    messages: {
+      required: 'This field is required',
+      email: 'Please enter a valid email address',
+      url: 'Please enter a valid URL',
+      number: 'Please enter a valid number',
+      min: 'Minimum {0} characters required',
+      max: 'Maximum {0} characters allowed',
+      minVal: 'Value must be at least {0}',
+      maxVal: 'Value must be at most {0}',
+      pattern: 'Invalid format',
+      match: 'Fields do not match'
+    },
+
+    init: function () {
+      const forms = document.querySelectorAll('[data-vd-validate], .vd-validate');
+      forms.forEach(form => {
+        if (this.instances.has(form)) return;
+        this.initInstance(form);
+      });
+    },
+
+    initInstance: function (form) {
+      const cleanup = [];
+      const mode = form.getAttribute('data-vd-validate-mode') || 'blur'; // blur | input | submit
+      const fields = form.querySelectorAll('[data-vd-rules]');
+
+      const validateField = (field) => {
+        const rulesStr = field.getAttribute('data-vd-rules') || '';
+        const rules = rulesStr.split('|').map(r => r.trim()).filter(Boolean);
+        const value = field.value;
+        const errors = [];
+
+        for (const rule of rules) {
+          const [name, ...params] = rule.split(':');
+          const param = params.join(':');
+          const validator = this.rules[name];
+
+          if (validator && !validator(value, param)) {
+            const customMsg = field.getAttribute('data-vd-msg-' + name);
+            let msg = customMsg || this.messages[name] || 'Invalid';
+            if (param) msg = msg.replace('{0}', param);
+            errors.push(msg);
+            break; // one error at a time
+          }
+        }
+
+        this.setFieldState(field, errors);
+        return errors.length === 0;
+      };
+
+      const validateAll = () => {
+        let valid = true;
+        fields.forEach(field => {
+          if (!validateField(field)) valid = false;
+        });
+        return valid;
+      };
+
+      // Per-field listeners
+      fields.forEach(field => {
+        if (mode === 'input' || mode === 'blur') {
+          const eventType = mode === 'input' ? 'input' : 'blur';
+          const handler = () => validateField(field);
+          field.addEventListener(eventType, handler);
+          cleanup.push(() => field.removeEventListener(eventType, handler));
+
+          if (mode === 'blur') {
+            const inputClear = () => {
+              if (field.classList.contains('is-invalid') || field.classList.contains('is-valid')) {
+                validateField(field);
+              }
+            };
+            field.addEventListener('input', inputClear);
+            cleanup.push(() => field.removeEventListener('input', inputClear));
+          }
+        }
+      });
+
+      // Form submit
+      const submitHandler = (e) => {
+        const valid = validateAll();
+        if (!valid) {
+          e.preventDefault();
+          e.stopPropagation();
+          // Focus first invalid field
+          const firstInvalid = form.querySelector('.is-invalid');
+          if (firstInvalid) firstInvalid.focus();
+        }
+        form.dispatchEvent(new CustomEvent('validate:submit', {
+          detail: { valid },
+          bubbles: true
+        }));
+      };
+
+      form.addEventListener('submit', submitHandler);
+      cleanup.push(() => form.removeEventListener('submit', submitHandler));
+
+      this.instances.set(form, { cleanup, validateAll, validateField });
+    },
+
+    setFieldState: function (field, errors) {
+      const wrapper = field.closest('.vd-form-group') || field.parentElement;
+      let errorEl = wrapper.querySelector('.vd-validate-error');
+
+      field.classList.remove('is-valid', 'is-invalid');
+
+      if (errors.length > 0) {
+        field.classList.add('is-invalid');
+        field.setAttribute('aria-invalid', 'true');
+        if (!errorEl) {
+          errorEl = document.createElement('div');
+          errorEl.className = 'vd-validate-error';
+          errorEl.id = 'vd-err-' + Math.random().toString(36).slice(2, 9);
+          errorEl.setAttribute('role', 'alert');
+          wrapper.appendChild(errorEl);
+        }
+        errorEl.textContent = errors[0];
+        errorEl.style.display = '';
+        field.setAttribute('aria-describedby', errorEl.id);
+      } else if (field.value.trim()) {
+        field.classList.add('is-valid');
+        field.removeAttribute('aria-invalid');
+        if (errorEl) errorEl.style.display = 'none';
+      } else {
+        field.removeAttribute('aria-invalid');
+        if (errorEl) errorEl.style.display = 'none';
+      }
+    },
+
+    validateForm: function (form) {
+      const instance = this.instances.get(form);
+      return instance ? instance.validateAll() : false;
+    },
+
+    addRule: function (name, validator, message) {
+      this.rules[name] = validator;
+      if (message) this.messages[name] = message;
+    },
+
+    destroy: function (form) {
+      const instance = this.instances.get(form);
+      if (!instance) return;
+      instance.cleanup.forEach(fn => fn());
+      this.instances.delete(form);
+    },
+
+    destroyAll: function () {
+      this.instances.forEach((_, form) => this.destroy(form));
+    }
+  };
+
+  if (typeof window.Vanduo !== 'undefined') {
+    window.Vanduo.register('validate', Validate);
+  }
+
+  window.VanduoValidate = Validate;
+
+})();

package/js/components/waypoint.js

@@ -0,0 +1,120 @@
+/**
+ * Vanduo Framework - Waypoint (Scrollspy) Component
+ * Highlights navigation links based on scroll position using IntersectionObserver
+ */
+
+(function () {
+  'use strict';
+
+  const Waypoint = {
+    instances: new Map(),
+
+    init: function () {
+      const navs = document.querySelectorAll('[data-vd-waypoint-nav], [data-vd-scrollspy-nav]');
+      navs.forEach(nav => {
+        if (this.instances.has(nav)) return;
+        this.initInstance(nav);
+      });
+    },
+
+    initInstance: function (nav) {
+      const links = Array.from(nav.querySelectorAll('a[href^="#"]'));
+      if (links.length === 0) return;
+
+      const cleanup = [];
+      const offset = parseInt(nav.getAttribute('data-vd-waypoint-offset') || '80', 10);
+      const sections = [];
+
+      links.forEach(link => {
+        const id = link.getAttribute('href').slice(1);
+        const section = document.getElementById(id);
+        if (section) {
+          section.setAttribute('data-vd-waypoint-section', '');
+          sections.push({ id, link, section });
+        }
+      });
+
+      if (sections.length === 0) return;
+
+      const activeSections = new Set();
+
+      const setActive = (id) => {
+        links.forEach(l => l.classList.remove('is-active'));
+        const target = links.find(l => l.getAttribute('href') === '#' + id);
+        if (target) {
+          target.classList.add('is-active');
+          nav.dispatchEvent(new CustomEvent('waypoint:change', {
+            detail: { activeId: id, link: target }
+          }));
+        }
+      };
+
+      const rootMargin = '-' + offset + 'px 0px -40% 0px';
+
+      const observer = new IntersectionObserver((entries) => {
+        entries.forEach(entry => {
+          if (entry.isIntersecting) {
+            activeSections.add(entry.target.id);
+          } else {
+            activeSections.delete(entry.target.id);
+          }
+        });
+
+        // Pick the topmost visible section
+        for (let i = 0; i < sections.length; i++) {
+          if (activeSections.has(sections[i].id)) {
+            setActive(sections[i].id);
+            return;
+          }
+        }
+      }, {
+        rootMargin: rootMargin,
+        threshold: 0
+      });
+
+      sections.forEach(s => observer.observe(s.section));
+
+      // Smooth scroll on click
+      links.forEach(link => {
+        const clickHandler = (e) => {
+          e.preventDefault();
+          const id = link.getAttribute('href').slice(1);
+          const section = document.getElementById(id);
+          if (section) {
+            section.scrollIntoView({ behavior: 'smooth' });
+            setActive(id);
+          }
+        };
+        link.addEventListener('click', clickHandler);
+        cleanup.push(() => link.removeEventListener('click', clickHandler));
+      });
+
+      cleanup.push(() => observer.disconnect());
+
+      this.instances.set(nav, { observer, cleanup, sections, setActive });
+    },
+
+    refresh: function (nav) {
+      this.destroy(nav);
+      this.initInstance(nav);
+    },
+
+    destroy: function (nav) {
+      const instance = this.instances.get(nav);
+      if (!instance) return;
+      instance.cleanup.forEach(fn => fn());
+      this.instances.delete(nav);
+    },
+
+    destroyAll: function () {
+      this.instances.forEach((_, nav) => this.destroy(nav));
+    }
+  };
+
+  if (typeof window.Vanduo !== 'undefined') {
+    window.Vanduo.register('waypoint', Waypoint);
+  }
+
+  window.VanduoWaypoint = Waypoint;
+
+})();

package/js/index.js

@@ -47,6 +47,22 @@ import './components/doc-search.js';
 import './components/draggable.js';
 import './components/lazy-load.js';
 
+// Phase 10 (v1.2.7) components
+import './components/flow.js';
+import './components/bubble.js';
+import './components/waypoint.js';
+import './components/ripple.js';
+import './components/affix.js';
+import './components/suggest.js';
+import './components/validate.js';
+import './components/datepicker.js';
+import './components/timepicker.js';
+import './components/stepper.js';
+import './components/rating.js';
+import './components/transfer.js';
+import './components/tree.js';
+import './components/spotlight.js';
+
 // Re-export for ESM / CJS consumers
 const Vanduo = window.Vanduo;
 export { Vanduo };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vanduo-oss/framework",
-  "version": "1.2.6",
+  "version": "1.2.8",
   "description": "Zero-dependency CSS/JS framework built on Fibonacci/Golden Ratio design system with Open Color integration",
   "keywords": [
     "css",
@@ -41,10 +41,10 @@
   "devDependencies": {
     "@eslint/js": "^10.0.1",
     "@playwright/test": "^1.58.2",
-    "esbuild": "^0.27.3",
-    "eslint": "^10.0.2",
+    "esbuild": "^0.27.4",
+    "eslint": "^10.0.3",
     "husky": "^9.1.7",
-    "lightningcss": "^1.31.1",
+    "lightningcss": "^1.32.0",
     "stylelint": "^17.4.0",
     "stylelint-config-standard": "^40.0.0"
   },