@vanduo-oss/framework 1.2.6 → 1.2.7

package/js/components/timepicker.js

@@ -0,0 +1,142 @@
+/**
+ * Vanduo Framework - Timepicker Component
+ * Dropdown time selection with 12h/24h format and configurable step intervals
+ */
+
+(function () {
+  'use strict';
+
+  const Timepicker = {
+    instances: new Map(),
+
+    init: function () {
+      const inputs = document.querySelectorAll('[data-vd-timepicker]');
+      inputs.forEach(el => {
+        if (this.instances.has(el)) return;
+        this.initInstance(el);
+      });
+    },
+
+    initInstance: function (input) {
+      const cleanup = [];
+      const is24h = input.getAttribute('data-vd-timepicker-format') === '24h';
+      const step = parseInt(input.getAttribute('data-vd-timepicker-step') || '30', 10);
+
+      // Create wrapper
+      let wrapper = input.closest('.vd-suggest-wrapper');
+      if (!wrapper) {
+        wrapper = document.createElement('div');
+        wrapper.style.position = 'relative';
+        wrapper.style.display = 'inline-block';
+        input.parentNode.insertBefore(wrapper, input);
+        wrapper.appendChild(input);
+      }
+
+      // Create popup
+      const popup = document.createElement('div');
+      popup.className = 'vd-timepicker-popup';
+      popup.setAttribute('role', 'listbox');
+      wrapper.appendChild(popup);
+
+      // Generate time slots
+      const times = [];
+      for (let h = 0; h < 24; h++) {
+        for (let m = 0; m < 60; m += step) {
+          const hh24 = String(h).padStart(2, '0');
+          const mm = String(m).padStart(2, '0');
+
+          if (is24h) {
+            times.push({ display: hh24 + ':' + mm, value: hh24 + ':' + mm });
+          } else {
+            const period = h < 12 ? 'AM' : 'PM';
+            const h12 = h === 0 ? 12 : (h > 12 ? h - 12 : h);
+            const display = h12 + ':' + mm + ' ' + period;
+            times.push({ display, value: hh24 + ':' + mm });
+          }
+        }
+      }
+
+      const render = () => {
+        popup.innerHTML = '';
+        times.forEach(t => {
+          const item = document.createElement('div');
+          item.className = 'vd-timepicker-item';
+          item.setAttribute('role', 'option');
+          item.textContent = t.display;
+
+          if (input.value === t.value || input.value === t.display) {
+            item.classList.add('is-selected');
+          }
+
+          item.addEventListener('click', () => {
+            input.value = t.display;
+            popup.querySelectorAll('.vd-timepicker-item').forEach(i => i.classList.remove('is-selected'));
+            item.classList.add('is-selected');
+            close();
+            input.dispatchEvent(new CustomEvent('timepicker:select', {
+              detail: { display: t.display, value: t.value },
+              bubbles: true
+            }));
+            input.dispatchEvent(new Event('change', { bubbles: true }));
+          });
+
+          popup.appendChild(item);
+        });
+      };
+
+      const open = () => {
+        render();
+        popup.classList.add('is-open');
+        input.setAttribute('aria-expanded', 'true');
+        // Scroll to selected
+        const selected = popup.querySelector('.is-selected');
+        if (selected) selected.scrollIntoView({ block: 'center' });
+      };
+
+      const close = () => {
+        popup.classList.remove('is-open');
+        input.setAttribute('aria-expanded', 'false');
+      };
+
+      const focusHandler = () => open();
+      const outsideHandler = (e) => {
+        if (!wrapper.contains(e.target)) close();
+      };
+      const escHandler = (e) => { if (e.key === 'Escape') close(); };
+
+      input.addEventListener('focus', focusHandler);
+      document.addEventListener('click', outsideHandler, true);
+      document.addEventListener('keydown', escHandler);
+      input.setAttribute('aria-haspopup', 'listbox');
+      input.setAttribute('aria-expanded', 'false');
+      input.setAttribute('autocomplete', 'off');
+      input.readOnly = true;
+
+      cleanup.push(
+        () => input.removeEventListener('focus', focusHandler),
+        () => document.removeEventListener('click', outsideHandler, true),
+        () => document.removeEventListener('keydown', escHandler)
+      );
+
+      this.instances.set(input, { cleanup, open, close });
+    },
+
+    destroy: function (el) {
+      const instance = this.instances.get(el);
+      if (!instance) return;
+      instance.cleanup.forEach(fn => fn());
+      this.instances.delete(el);
+    },
+
+    destroyAll: function () {
+      this.instances.forEach((_, el) => this.destroy(el));
+    }
+  };
+
+  if (typeof window.Vanduo !== 'undefined') {
+    window.Vanduo.register('timepicker', Timepicker);
+  }
+
+  window.VanduoTimepicker = Timepicker;
+
+})();

package/js/components/transfer.js

@@ -0,0 +1,206 @@
+/**
+ * Vanduo Framework - Transfer (Dual-list) Component
+ * Source-to-target list transfer with search, select-all, and move actions
+ */
+
+(function () {
+  'use strict';
+
+  const Transfer = {
+    instances: new Map(),
+
+    init: function () {
+      const transfers = document.querySelectorAll('[data-vd-transfer]');
+      transfers.forEach(el => {
+        if (this.instances.has(el)) return;
+        this.initInstance(el);
+      });
+    },
+
+    initInstance: function (el) {
+      const cleanup = [];
+      el.classList.add('vd-transfer');
+
+      let sourceData, targetData;
+      try {
+        const raw = JSON.parse(el.getAttribute('data-vd-transfer') || '[]');
+        sourceData = raw.map((item, i) => ({
+          id: item.id || 'item-' + i,
+          label: item.label || item.text || String(item),
+          selected: false
+        }));
+      } catch (_e) {
+        sourceData = [];
+      }
+      targetData = [];
+
+      const sourceSelected = new Set();
+      const targetSelected = new Set();
+
+      const render = () => {
+        el.innerHTML = '';
+
+        // Source panel
+        const sourcePanel = createPanel('Source', sourceData, sourceSelected, 'source');
+        // Actions
+        const actions = document.createElement('div');
+        actions.className = 'vd-transfer-actions';
+
+        const moveRightBtn = document.createElement('button');
+        moveRightBtn.type = 'button';
+        moveRightBtn.className = 'vd-transfer-btn';
+        moveRightBtn.innerHTML = '›';
+        moveRightBtn.setAttribute('aria-label', 'Move to target');
+        moveRightBtn.disabled = sourceSelected.size === 0;
+        moveRightBtn.addEventListener('click', () => moveRight());
+
+        const moveLeftBtn = document.createElement('button');
+        moveLeftBtn.type = 'button';
+        moveLeftBtn.className = 'vd-transfer-btn';
+        moveLeftBtn.innerHTML = '‹';
+        moveLeftBtn.setAttribute('aria-label', 'Move to source');
+        moveLeftBtn.disabled = targetSelected.size === 0;
+        moveLeftBtn.addEventListener('click', () => moveLeft());
+
+        actions.appendChild(moveRightBtn);
+        actions.appendChild(moveLeftBtn);
+
+        // Target panel
+        const targetPanel = createPanel('Target', targetData, targetSelected, 'target');
+
+        el.appendChild(sourcePanel);
+        el.appendChild(actions);
+        el.appendChild(targetPanel);
+      };
+
+      const createPanel = (title, data, selected, _side) => {
+        const panel = document.createElement('div');
+        panel.className = 'vd-transfer-panel';
+
+        const header = document.createElement('div');
+        header.className = 'vd-transfer-header';
+        const titleSpan = document.createElement('span');
+        titleSpan.textContent = title;
+        const count = document.createElement('span');
+        count.className = 'vd-transfer-count';
+        count.textContent = selected.size + '/' + data.length;
+        header.appendChild(titleSpan);
+        header.appendChild(count);
+        panel.appendChild(header);
+
+        // Search
+        const searchDiv = document.createElement('div');
+        searchDiv.className = 'vd-transfer-search';
+        const searchInput = document.createElement('input');
+        searchInput.type = 'text';
+        searchInput.placeholder = 'Search...';
+        searchInput.setAttribute('aria-label', 'Search ' + title.toLowerCase());
+        searchDiv.appendChild(searchInput);
+        panel.appendChild(searchDiv);
+
+        // List
+        const list = document.createElement('ul');
+        list.className = 'vd-transfer-list';
+        list.setAttribute('role', 'listbox');
+
+        const renderList = (filter) => {
+          list.innerHTML = '';
+          const filtered = filter ? data.filter(d => {
+            const label = (d.label || d.text || String(d)).toLowerCase();
+            return label.includes(filter.toLowerCase());
+          }) : data;
+          filtered.forEach(item => {
+            const li = document.createElement('li');
+            li.className = 'vd-transfer-item';
+            li.setAttribute('role', 'option');
+            if (selected.has(item.id)) li.classList.add('is-selected');
+
+            const checkbox = document.createElement('input');
+            checkbox.type = 'checkbox';
+            checkbox.checked = selected.has(item.id);
+            checkbox.setAttribute('aria-label', item.label);
+
+            const label = document.createElement('span');
+            label.textContent = item.label;
+
+            li.addEventListener('click', () => {
+              if (selected.has(item.id)) selected.delete(item.id);
+              else selected.add(item.id);
+              render();
+            });
+
+            li.appendChild(checkbox);
+            li.appendChild(label);
+            list.appendChild(li);
+          });
+        };
+
+        searchInput.addEventListener('input', () => renderList(searchInput.value));
+        renderList('');
+
+        panel.appendChild(list);
+        return panel;
+      };
+
+      const moveRight = () => {
+        const toMove = sourceData.filter(d => sourceSelected.has(d.id));
+        sourceData = sourceData.filter(d => !sourceSelected.has(d.id));
+        targetData = targetData.concat(toMove);
+        sourceSelected.clear();
+        render();
+        fireChange();
+      };
+
+      const moveLeft = () => {
+        const toMove = targetData.filter(d => targetSelected.has(d.id));
+        targetData = targetData.filter(d => !targetSelected.has(d.id));
+        sourceData = sourceData.concat(toMove);
+        targetSelected.clear();
+        render();
+        fireChange();
+      };
+
+      const fireChange = () => {
+        el.dispatchEvent(new CustomEvent('transfer:change', {
+          detail: {
+            source: sourceData.map(d => d.id),
+            target: targetData.map(d => d.id)
+          },
+          bubbles: true
+        }));
+      };
+
+      render();
+
+      this.instances.set(el, {
+        cleanup,
+        getTarget: () => targetData.map(d => d.id),
+        getSource: () => sourceData.map(d => d.id)
+      });
+    },
+
+    getSelected: function (el) {
+      const inst = this.instances.get(el);
+      return inst ? inst.getTarget() : [];
+    },
+
+    destroy: function (el) {
+      const inst = this.instances.get(el);
+      if (!inst) return;
+      inst.cleanup.forEach(fn => fn());
+      el.innerHTML = '';
+      this.instances.delete(el);
+    },
+
+    destroyAll: function () {
+      this.instances.forEach((_, el) => this.destroy(el));
+    }
+  };
+
+  if (typeof window.Vanduo !== 'undefined') {
+    window.Vanduo.register('transfer', Transfer);
+  }
+
+  window.VanduoTransfer = Transfer;
+
+})();

package/js/components/tree.js

@@ -0,0 +1,191 @@
+/**
+ * Vanduo Framework - Tree View Component
+ * Hierarchical collapsible tree with checkbox selection and keyboard navigation
+ */
+
+(function () {
+  'use strict';
+
+  const Tree = {
+    instances: new Map(),
+
+    init: function () {
+      const trees = document.querySelectorAll('[data-vd-tree]');
+      trees.forEach(el => {
+        if (this.instances.has(el)) return;
+        this.initInstance(el);
+      });
+    },
+
+    initInstance: function (el) {
+      const cleanup = [];
+      const cascade = el.getAttribute('data-vd-tree-cascade') !== 'false';
+
+      let data;
+      try { data = JSON.parse(el.getAttribute('data-vd-tree') || '[]'); } catch (_e) { data = []; }
+
+      el.classList.add('vd-tree');
+      el.setAttribute('role', 'tree');
+
+      const render = (items, parent) => {
+        parent.innerHTML = '';
+        items.forEach(item => {
+          const node = document.createElement('li');
+          node.className = 'vd-tree-node';
+          node.setAttribute('role', 'treeitem');
+          node.setAttribute('aria-expanded', item.open ? 'true' : 'false');
+          if (item.open) node.classList.add('is-open');
+
+          const content = document.createElement('div');
+          content.className = 'vd-tree-node-content';
+
+          // Toggle
+          if (item.children && item.children.length > 0) {
+            const toggle = document.createElement('button');
+            toggle.type = 'button';
+            toggle.className = 'vd-tree-toggle';
+            toggle.setAttribute('aria-label', 'Toggle');
+            toggle.addEventListener('click', (e) => {
+              e.stopPropagation();
+              item.open = !item.open;
+              node.classList.toggle('is-open');
+              node.setAttribute('aria-expanded', item.open ? 'true' : 'false');
+            });
+            content.appendChild(toggle);
+          } else {
+            const ph = document.createElement('span');
+            ph.className = 'vd-tree-toggle-placeholder';
+            content.appendChild(ph);
+          }
+
+          // Checkbox
+          if (el.hasAttribute('data-vd-tree-checkbox')) {
+            const cb = document.createElement('input');
+            cb.type = 'checkbox';
+            cb.className = 'vd-tree-checkbox';
+            cb.checked = !!item.checked;
+            cb.setAttribute('aria-label', item.label);
+            cb.addEventListener('change', (e) => {
+              e.stopPropagation();
+              item.checked = cb.checked;
+              if (cascade && item.children) {
+                setChildChecked(item.children, cb.checked);
+                render(data, el);
+              }
+              el.dispatchEvent(new CustomEvent('tree:check', {
+                detail: { id: item.id, checked: cb.checked, label: item.label },
+                bubbles: true
+              }));
+            });
+            content.appendChild(cb);
+          }
+
+          // Icon
+          if (item.icon) {
+            const icon = document.createElement('span');
+            icon.className = 'vd-tree-icon ' + item.icon;
+            content.appendChild(icon);
+          }
+
+          // Label
+          const label = document.createElement('span');
+          label.className = 'vd-tree-label';
+          label.textContent = item.label || '';
+          content.appendChild(label);
+
+          node.appendChild(content);
+
+          // Children
+          if (item.children && item.children.length > 0) {
+            const childList = document.createElement('ul');
+            childList.className = 'vd-tree-children';
+            childList.setAttribute('role', 'group');
+            render(item.children, childList);
+            node.appendChild(childList);
+          }
+
+          parent.appendChild(node);
+        });
+      };
+
+      const setChildChecked = (items, checked) => {
+        items.forEach(item => {
+          item.checked = checked;
+          if (item.children) setChildChecked(item.children, checked);
+        });
+      };
+
+      // Keyboard
+      const keyHandler = (e) => {
+        const focused = document.activeElement;
+        if (!el.contains(focused)) return;
+
+        const nodes = Array.from(el.querySelectorAll('.vd-tree-node-content'));
+        const idx = nodes.indexOf(focused.closest('.vd-tree-node-content'));
+        if (idx === -1) return;
+
+        switch (e.key) {
+          case 'ArrowDown':
+            e.preventDefault();
+            if (idx < nodes.length - 1) {
+              const next = nodes[idx + 1].querySelector('.vd-tree-toggle, .vd-tree-label');
+              if (next) next.focus();
+            }
+            break;
+          case 'ArrowUp':
+            e.preventDefault();
+            if (idx > 0) {
+              const prev = nodes[idx - 1].querySelector('.vd-tree-toggle, .vd-tree-label');
+              if (prev) prev.focus();
+            }
+            break;
+        }
+      };
+
+      el.addEventListener('keydown', keyHandler);
+      cleanup.push(() => el.removeEventListener('keydown', keyHandler));
+
+      render(data, el);
+
+      this.instances.set(el, {
+        cleanup,
+        getData: () => data,
+        getChecked: () => {
+          const checked = [];
+          const collect = (items) => {
+            items.forEach(i => {
+              if (i.checked) checked.push(i.id || i.label);
+              if (i.children) collect(i.children);
+            });
+          };
+          collect(data);
+          return checked;
+        }
+      });
+    },
+
+    getChecked: function (el) {
+      const inst = this.instances.get(el);
+      return inst ? inst.getChecked() : [];
+    },
+
+    destroy: function (el) {
+      const inst = this.instances.get(el);
+      if (!inst) return;
+      inst.cleanup.forEach(fn => fn());
+      el.innerHTML = '';
+      this.instances.delete(el);
+    },
+
+    destroyAll: function () {
+      this.instances.forEach((_, el) => this.destroy(el));
+    }
+  };
+
+  if (typeof window.Vanduo !== 'undefined') {
+    window.Vanduo.register('tree', Tree);
+  }
+
+  window.VanduoTree = Tree;
+
+})();