snice 2.1.5 → 2.2.1

package/components/switch/snice-switch.ts

@@ -1,229 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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

@@ -1,23 +0,0 @@
-// 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

@@ -1,100 +0,0 @@
-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
-    };
-  }
-}