snice 1.14.3 → 2.1.0

package/components/switch/snice-switch.ts

@@ -0,0 +1,229 @@
+import { element, property, query, on, watch, dispatch, ready } from 'snice';
+import css from './snice-switch.css?inline';
+import type { SwitchSize, SniceSwitchElement } from './snice-switch.types';
+
+@element('snice-switch')
+export class SniceSwitch extends HTMLElement implements SniceSwitchElement {
+  @property({ type: Boolean, reflect: true })
+  checked = false;
+
+  @property({ type: Boolean, reflect: true })
+  disabled = false;
+
+  @property({ type: Boolean, reflect: true })
+  required = false;
+
+  @property({ type: Boolean, reflect: true })
+  invalid = false;
+
+  @property({ reflect: true })
+  size: SwitchSize = 'medium';
+
+  @property({ reflect: true })
+  name = '';
+
+  @property({ reflect: true })
+  value = 'on';
+
+  @property({ reflect: true })
+  label = '';
+
+  @property({ reflect: true, attribute: 'label-on' })
+  labelOn = '';
+
+  @property({ reflect: true, attribute: 'label-off' })
+  labelOff = '';
+
+  @query('.switch-input')
+  input?: HTMLInputElement;
+
+  @query('.switch-track')
+  track?: HTMLElement;
+
+  @query('.switch-label')
+  labelElement?: HTMLElement;
+
+  @query('.switch-wrapper')
+  wrapper?: HTMLElement;
+
+  @query('.switch-state-label--on')
+  onLabel?: HTMLElement;
+
+  @query('.switch-state-label--off')
+  offLabel?: HTMLElement;
+
+  html() {
+    return /*html*/`
+      <label class="switch-wrapper ${this.disabled ? 'switch-wrapper--disabled' : ''}">
+        <input
+          type="checkbox"
+          class="switch-input"
+          ${this.checked ? 'checked' : ''}
+          ${this.disabled ? 'disabled' : ''}
+          ${this.required ? 'required' : ''}
+          ${this.name ? `name="${this.name}"` : ''}
+          ${this.value ? `value="${this.value}"` : ''}
+          aria-invalid="${this.invalid}"
+          aria-checked="${this.checked}"
+          role="switch"
+          part="input"
+        />
+        
+        <span class="switch-track 
+          switch-track--${this.size}
+          ${this.invalid ? 'switch-track--invalid' : ''}"
+          part="track">
+          <span class="switch-thumb" part="thumb"></span>
+          ${this.labelOn || this.labelOff ? /*html*/`
+            <span class="switch-state-label switch-state-label--on">${this.labelOn}</span>
+            <span class="switch-state-label switch-state-label--off">${this.labelOff}</span>
+          ` : ''}
+        </span>
+        
+        ${this.label ? /*html*/`
+          <span class="switch-label switch-label--${this.size} ${this.required ? 'switch-label--required' : ''}" part="label">
+            ${this.label}
+          </span>
+        ` : ''}
+      </label>
+    `;
+  }
+
+  css() {
+    return css;
+  }
+
+  @ready()
+  init() {
+    // Set initial states
+    if (this.input) {
+      this.input.checked = this.checked;
+      
+      // Set form value
+      if (this.name) {
+        this.input.name = this.name;
+      }
+      if (this.value) {
+        this.input.value = this.value;
+      }
+    }
+    
+    // Update state labels if provided
+    this.updateStateLabels();
+  }
+
+  @on('change', '.switch-input')
+  handleChange(e: Event) {
+    const target = e.target as HTMLInputElement;
+    this.checked = target.checked;
+    this.dispatchChangeEvent();
+  }
+
+  @on('click', '.switch-input')
+  handleClick(e: Event) {
+    // Allow click to propagate for label association
+    e.stopPropagation();
+  }
+
+  @watch('checked')
+  handleCheckedChange() {
+    if (this.input) {
+      this.input.checked = this.checked;
+      this.input.setAttribute('aria-checked', String(this.checked));
+    }
+  }
+
+  @watch('disabled')
+  handleDisabledChange() {
+    if (this.input) {
+      this.input.disabled = this.disabled;
+    }
+    if (this.wrapper) {
+      this.wrapper.classList.toggle('switch-wrapper--disabled', this.disabled);
+    }
+  }
+
+  @watch('invalid')
+  handleInvalidChange() {
+    if (this.input) {
+      this.input.setAttribute('aria-invalid', String(this.invalid));
+    }
+    if (this.track) {
+      this.track.classList.toggle('switch-track--invalid', this.invalid);
+    }
+  }
+
+  @watch('required')
+  handleRequiredChange() {
+    if (this.input) {
+      this.input.required = this.required;
+    }
+    if (this.labelElement) {
+      this.labelElement.classList.toggle('switch-label--required', this.required);
+    }
+  }
+
+  @watch('label')
+  handleLabelChange() {
+    if (this.labelElement) {
+      this.labelElement.textContent = this.label;
+      this.labelElement.style.display = this.label ? '' : 'none';
+    }
+  }
+
+  @watch('labelOn', 'labelOff')
+  handleStateLabelChange() {
+    this.updateStateLabels();
+  }
+
+  @watch('name')
+  handleNameChange() {
+    if (this.input) {
+      this.input.name = this.name;
+    }
+  }
+
+  @watch('value')
+  handleValueChange() {
+    if (this.input) {
+      this.input.value = this.value;
+    }
+  }
+
+  private updateStateLabels() {
+    if (this.onLabel) {
+      this.onLabel.textContent = this.labelOn;
+      this.onLabel.style.display = this.labelOn ? '' : 'none';
+    }
+    if (this.offLabel) {
+      this.offLabel.textContent = this.labelOff;
+      this.offLabel.style.display = this.labelOff ? '' : 'none';
+    }
+  }
+
+  @dispatch('@snice/switch-change', { bubbles: true, composed: true })
+  private dispatchChangeEvent() {
+    return {
+      checked: this.checked,
+      switch: this
+    };
+  }
+
+  // Public API
+  focus() {
+    this.input?.focus();
+  }
+
+  blur() {
+    this.input?.blur();
+  }
+
+  click() {
+    this.input?.click();
+  }
+
+  toggle() {
+    this.checked = !this.checked;
+    this.dispatchChangeEvent();
+  }
+}

package/components/switch/snice-switch.types.ts

@@ -0,0 +1,23 @@
+export type SwitchSize = 'small' | 'medium' | 'large';
+
+export interface SniceSwitchElement extends HTMLElement {
+  checked: boolean;
+  disabled: boolean;
+  required: boolean;
+  invalid: boolean;
+  size: SwitchSize;
+  name: string;
+  value: string;
+  label: string;
+  labelOn: string;
+  labelOff: string;
+  focus(): void;
+  blur(): void;
+  click(): void;
+  toggle(): void;
+}
+
+export interface SwitchChangeDetail {
+  checked: boolean;
+  switch: SniceSwitchElement;
+}

package/components/symbols.ts

@@ -0,0 +1,23 @@
+// Global symbols for all Snice components
+// Ensures components work correctly even if bundled multiple times
+
+function getComponentSymbol(namespace: string, name: string): symbol {
+  if (!(globalThis as any).sniceComponents) {
+    (globalThis as any).sniceComponents = {
+      symbols: new Map<string, symbol>()
+    };
+  }
+  
+  const key = `${namespace}/${name}`;
+  const symbols = (globalThis as any).sniceComponents.symbols;
+  
+  if (!symbols.has(key)) {
+    symbols.set(key, Symbol(key));
+  }
+  return symbols.get(key)!;
+}
+
+// Export helper for component-specific symbols
+export function getSymbol(namespace: string, name: string): symbol {
+  return getComponentSymbol(namespace, name);
+}

package/components/table/demo-table-controller.ts

@@ -0,0 +1,100 @@
+import { controller, respond, IController } from 'snice';
+
+console.log('Loading demo table controller...');
+
+@controller('demo-table-controller')
+export class DemoTableController implements IController {
+  element: HTMLElement | null = null;
+
+  async attach(element: HTMLElement) {
+    this.element = element;
+    console.log('Demo table controller attached');
+  }
+
+  async detach(_element: HTMLElement) {
+    console.log('Demo table controller detached');
+  }
+
+  private sampleData = [
+    { id: 1, name: 'John Doe', email: 'john.doe@example.com', role: 'Developer', salary: 75000, joinDate: '2023-01-15', active: true },
+    { id: 2, name: 'Jane Smith', email: 'jane.smith@example.com', role: 'Designer', salary: 68000, joinDate: '2023-03-20', active: true },
+    { id: 3, name: 'Bob Johnson', email: 'bob.johnson@example.com', role: 'Manager', salary: 95000, joinDate: '2022-11-10', active: false },
+    { id: 4, name: 'Alice Brown', email: 'alice.brown@example.com', role: 'Developer', salary: 72000, joinDate: '2023-06-05', active: true },
+    { id: 5, name: 'Charlie Wilson', email: 'charlie.wilson@example.com', role: 'QA Engineer', salary: 65000, joinDate: '2023-02-28', active: true },
+    { id: 6, name: 'David Lee', email: 'david.lee@example.com', role: 'Developer', salary: 78000, joinDate: '2023-04-12', active: true },
+    { id: 7, name: 'Emily Davis', email: 'emily.davis@example.com', role: 'Designer', salary: 70000, joinDate: '2023-05-18', active: false },
+    { id: 8, name: 'Frank Miller', email: 'frank.miller@example.com', role: 'Manager', salary: 98000, joinDate: '2022-08-22', active: true }
+  ];
+
+  @respond('@snice/table/config')
+  async getTableConfig() {
+    // Return table configuration
+    return {
+      columns: [
+        { key: 'id', label: 'ID', type: 'number', align: 'right' },
+        { key: 'name', label: 'Full Name', type: 'text' },
+        { key: 'email', label: 'Email', type: 'text' },
+        { key: 'role', label: 'Role', type: 'text', align: 'center' },
+        { key: 'salary', label: 'Salary', type: 'currency', prefix: '$', thousandsSeparator: true, decimals: 0 },
+        { key: 'joinDate', label: 'Join Date', type: 'date', dateFormat: 'short' },
+        { key: 'active', label: 'Status', type: 'boolean', useSymbols: true, trueSymbol: '✅', falseSymbol: '❌' }
+      ],
+      selectorOptions: [
+        { value: 'Developer', label: 'Developer' },
+        { value: 'Designer', label: 'Designer' },
+        { value: 'Manager', label: 'Manager' },
+        { value: 'QA Engineer', label: 'QA Engineer' }
+      ]
+    };
+  }
+
+  @respond('@snice/table/data')
+  async getTableData(params: any) {
+    // Add fake delay to see loading skeleton
+    await new Promise(resolve => setTimeout(resolve, 1500));
+    
+    let filteredData = [...this.sampleData];
+    
+    // Apply search filter
+    if (params.search) {
+      const searchLower = params.search.toLowerCase();
+      filteredData = filteredData.filter(row => 
+        Object.values(row).some(val => 
+          String(val).toLowerCase().includes(searchLower)
+        )
+      );
+    }
+    
+    // Apply selector filter
+    if (params.selector) {
+      const selectedRoles = params.selector.split(',');
+      filteredData = filteredData.filter(row => 
+        selectedRoles.includes(row.role)
+      );
+    }
+    
+    // Apply sorting
+    if (params.sort && params.sort.length > 0) {
+      filteredData.sort((a: any, b: any) => {
+        for (const sortItem of params.sort) {
+          const aVal = a[sortItem.column];
+          const bVal = b[sortItem.column];
+          
+          let comparison = 0;
+          if (aVal < bVal) comparison = -1;
+          else if (aVal > bVal) comparison = 1;
+          
+          if (comparison !== 0) {
+            return sortItem.direction === 'desc' ? -comparison : comparison;
+          }
+        }
+        return 0;
+      });
+    }
+    
+    return {
+      data: filteredData,
+      total: filteredData.length
+    };
+  }
+}