@sondor-technology/sondor-components 1.0.0 → 1.0.1-develop.11

package/src/components/router/router.ts

@@ -1,47 +1,134 @@
-class AppRouter {
-  constructor() {
-    window.addEventListener('popstate', () => this._notify());
-    
-    document.addEventListener('click', (e) => {
-      // 1. Ignore modified clicks (Ctrl+Click, etc)
-      if (e.defaultPrevented || e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) {
-        return;
-      }
-
-      // 2. Safely traverse the path
-      const path = e.composedPath();
-      const link = path.find((el: any) => 
-        el && typeof el.hasAttribute === 'function' && el.hasAttribute('href')
-      ) as HTMLElement | undefined;
-
-      if (!link) return;
-
-      const href = link.getAttribute('href');
-      const target = link.getAttribute('target');
-
-      // 3. Ignore external links
-      if (!href || href.startsWith('http') || href.startsWith('mailto:') || target === '_blank') {
-        return;
-      }
-
-      // 4. Intercept internal links
-      if (href.startsWith('/')) {
-        e.preventDefault(); 
-        window.history.pushState(null, '', href);
-        this._notify();
-      }
-    });
-
-    // Broadcast initial route on load
-    // Use setTimeout to ensure all Lit components have registered first
-    setTimeout(() => this._notify(), 0);
-  }
-
-  private _notify() {
-    window.dispatchEvent(new CustomEvent('route-changed', { 
-      detail: window.location.pathname 
-    }));
-  }
-}
-
+export interface RouteDefinition {
+  component: string;
+  [key: string]: unknown; // Allows consuming apps to attach custom metadata (e.g., titles, auth roles)
+}
+
+export type RouteConfig = Record<string, RouteDefinition>;
+
+export interface RouteMatch {
+  path: string;
+  component: string;
+  params: Record<string, string>;
+  definition: RouteDefinition;
+}
+
+function getRouteWeight(pattern: string): number {
+  const segments = pattern.split('/').filter(Boolean);
+  return segments.reduce((weight, seg) => {
+    return weight + (seg.startsWith(':') ? 1 : 10);
+  }, 0);
+}
+
+export class AppRouter {
+  private _routes: RouteConfig = {};
+  private _initialized = false;
+
+  constructor(routes?: RouteConfig) {
+    if (routes) {
+      this.setRoutes(routes);
+    }
+
+    window.addEventListener('popstate', () => this._notify());
+    
+    document.addEventListener('click', (e) => {
+      if (e.defaultPrevented || e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) {
+        return;
+      }
+
+      const path = e.composedPath();
+      const link = path.find((el: any) => 
+        el && typeof el.hasAttribute === 'function' && el.hasAttribute('href')
+      ) as HTMLElement | undefined;
+
+      if (!link) return;
+
+      const href = link.getAttribute('href');
+      const target = link.getAttribute('target');
+
+      if (!href || href.startsWith('http') || href.startsWith('mailto:') || target === '_blank') {
+        return;
+      }
+
+      if (href.startsWith('/')) {
+        e.preventDefault(); 
+        this.navigate(href);
+      }
+    });
+  }
+
+  /**
+   * Register or update the route configuration for this application.
+   */
+  public setRoutes(routes: RouteConfig) {
+    this._routes = routes;
+
+    // Trigger initial route resolution once routes are registered
+    if (!this._initialized) {
+      this._initialized = true;
+      setTimeout(() => this._notify(), 0);
+    } else {
+      this._notify();
+    }
+  }
+
+  /**
+   * Programmatically navigate to an internal path.
+   */
+  public navigate(path: string) {
+    window.history.pushState(null, '', path);
+    this._notify();
+  }
+
+  /**
+   * Matches a URL path against the registered routes.
+   */
+  public matchRoute(currentPath: string): RouteMatch | null {
+    const sortedRoutes = Object.entries(this._routes).sort(
+      ([patternA], [patternB]) => getRouteWeight(patternB) - getRouteWeight(patternA)
+    );
+
+    for (const [pattern, routeDef] of sortedRoutes) {
+      const paramNames: string[] = [];
+      const regexPath = pattern.replace(/:([a-zA-Z0-9_]+)/g, (_, paramName) => {
+        paramNames.push(paramName);
+        return '([^/]+)';
+      });
+
+      const regex = new RegExp(`^${regexPath}$`);
+      const match = currentPath.match(regex);
+
+      if (match) {
+        const params: Record<string, string> = {};
+        paramNames.forEach((name, index) => {
+          params[name] = decodeURIComponent(match[index + 1]);
+        });
+
+        return {
+          path: currentPath,
+          component: routeDef.component,
+          params,
+          definition: routeDef
+        };
+      }
+    }
+
+    return null;
+  }
+
+  private _notify() {
+    const currentPath = window.location.pathname;
+    const match = this.matchRoute(currentPath);
+
+    window.dispatchEvent(new CustomEvent('route-changed', { 
+      detail: {
+        path: currentPath,
+        component: match ? match.component : 'not-found-page',
+        params: match ? match.params : {},
+        definition: match ? match.definition : null
+      }
+    }));
+  }
+}
+
+// Export a singleton instance for standard app-wide use
 export const router = new AppRouter();

package/src/components/select/select.ts

@@ -1,162 +1,162 @@
-import { LitElement, html, css } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { resetStyles } from '../../styles/reset';
-
-@customElement('st-select')
-export class StSelect extends LitElement {
-  @property({ type: String, reflect: true }) size: 'sm' | 'md' | 'lg' = 'md';
-  @property({ type: String, reflect: true }) variant: 'outline' | 'filled' = 'outline';
-  @property({ type: String, reflect: true }) color: 'default' | 'primary' | 'error' = 'default';
-  
-  // Internal state to handle the chevron animation when the slotted select is focused
-  @property({ type: Boolean, reflect: true }) focused = false;
-
-  constructor() {
-    super();
-    // Track focus states to animate the chevron
-    this.addEventListener('focusin', () => this.focused = true);
-    this.addEventListener('focusout', () => this.focused = false);
-  }
-
-  static styles = [
-    resetStyles,
-    css`
-      :host {
-        display: inline-block;
-        width: 100%;
-        position: relative;
-      }
-
-      .select-wrapper {
-        position: relative;
-        display: flex;
-        align-items: center;
-        width: 100%;
-      }
-
-      /* 
-        Target the native select provided by the user in the Light DOM.
-        This completely bypasses the browser rendering bug.
-      */
-      ::slotted(select) {
-        appearance: none;
-        -webkit-appearance: none;
-        width: 100%;
-        font-family: inherit;
-        background-color: transparent;
-        border-radius: var(--st-radius-md, 0.5rem);
-        color: var(--st-color-text);
-        cursor: pointer;
-        outline: none;
-        transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
-      }
-
-      ::slotted(select:disabled) {
-        opacity: 0.6;
-        cursor: not-allowed;
-      }
-
-      /* ==========================================================
-         Sizes
-         ========================================================== */
-      :host([size="sm"]) ::slotted(select) {
-        padding: 0.25rem 2rem 0.25rem 0.75rem;
-        font-size: 0.875rem;
-        height: 2rem;
-      }
-      :host([size="md"]) ::slotted(select) {
-        padding: 0.5rem 2.5rem 0.5rem 1rem;
-        font-size: 1rem;
-        height: 2.5rem;
-      }
-      :host([size="lg"]) ::slotted(select) {
-        padding: 0.75rem 3rem 0.75rem 1.25rem;
-        font-size: 1.125rem;
-        height: 3rem;
-      }
-
-      /* Multiple select formatting (No fixed height, no right padding for chevron) */
-      ::slotted(select[multiple]) {
-        height: auto !important;
-        padding-right: 1rem !important;
-      }
-
-      /* ==========================================================
-         Variants & Colors
-         ========================================================== */
-      :host([variant="outline"]) ::slotted(select) {
-        border: 1px solid var(--st-color-border);
-      }
-      :host([variant="outline"][color="default"]) ::slotted(select:focus-visible) {
-        border-color: var(--st-color-primary);
-        box-shadow: 0 0 0 2px rgba(var(--st-color-primary-rgb, 99, 102, 241), 0.2);
-      }
-
-      :host([variant="filled"]) ::slotted(select) {
-        border: 1px solid transparent;
-        background-color: var(--st-color-surface-hover, rgba(0, 0, 0, 0.05));
-      }
-      :host([variant="filled"]) ::slotted(select:not(:disabled):hover) {
-        background-color: var(--st-color-surface-active, rgba(0, 0, 0, 0.1));
-      }
-      :host([variant="filled"][color="default"]) ::slotted(select:focus-visible) {
-        border-color: var(--st-color-primary);
-        background-color: transparent;
-      }
-
-      /* Error Color State */
-      :host([color="error"]) ::slotted(select) {
-        border-color: var(--st-color-error, #ef4444);
-      }
-      :host([color="error"]) ::slotted(select:focus-visible) {
-        box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2);
-      }
-
-      /* Primary Color State */
-      :host([color="primary"]) ::slotted(select) {
-        border-color: var(--st-color-primary);
-      }
-
-      /* ==========================================================
-         Chevron Icon
-         ========================================================== */
-      .chevron {
-        position: absolute;
-        right: 0.75rem;
-        width: 1.25rem;
-        height: 1.25rem;
-        pointer-events: none;
-        color: var(--st-color-text-muted);
-        transition: transform 0.2s ease, color 0.2s ease;
-      }
-
-      /* Animate chevron when the wrapper detects focus */
-      :host([focused]) .chevron {
-        transform: rotate(180deg);
-        color: var(--st-color-primary);
-      }
-
-      /* Hide chevron if the user slots a native multiple select */
-      ::slotted(select[multiple]) ~ .chevron {
-        display: none;
-      }
-    `
-  ];
-
-  render() {
-    return html`
-      <div class="select-wrapper">
-        <slot></slot>
-        <svg class="chevron" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-          <polyline points="6 9 12 15 18 9"></polyline>
-        </svg>
-      </div>
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'st-select': StSelect;
-  }
+import { LitElement, html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { resetStyles } from '../../styles/reset.js';
+
+@customElement('st-select')
+export class StSelect extends LitElement {
+  @property({ type: String, reflect: true }) size: 'sm' | 'md' | 'lg' = 'md';
+  @property({ type: String, reflect: true }) variant: 'outline' | 'filled' = 'outline';
+  @property({ type: String, reflect: true }) color: 'default' | 'primary' | 'error' = 'default';
+  
+  // Internal state to handle the chevron animation when the slotted select is focused
+  @property({ type: Boolean, reflect: true }) focused = false;
+
+  constructor() {
+    super();
+    // Track focus states to animate the chevron
+    this.addEventListener('focusin', () => this.focused = true);
+    this.addEventListener('focusout', () => this.focused = false);
+  }
+
+  static styles = [
+    resetStyles,
+    css`
+      :host {
+        display: inline-block;
+        width: 100%;
+        position: relative;
+      }
+
+      .select-wrapper {
+        position: relative;
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+
+      /* 
+        Target the native select provided by the user in the Light DOM.
+        This completely bypasses the browser rendering bug.
+      */
+      ::slotted(select) {
+        appearance: none;
+        -webkit-appearance: none;
+        width: 100%;
+        font-family: inherit;
+        background-color: transparent;
+        border-radius: var(--st-radius-md, 0.5rem);
+        color: var(--st-color-text);
+        cursor: pointer;
+        outline: none;
+        transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
+      }
+
+      ::slotted(select:disabled) {
+        opacity: 0.6;
+        cursor: not-allowed;
+      }
+
+      /* ==========================================================
+         Sizes
+         ========================================================== */
+      :host([size="sm"]) ::slotted(select) {
+        padding: 0.25rem 2rem 0.25rem 0.75rem;
+        font-size: 0.875rem;
+        height: 2rem;
+      }
+      :host([size="md"]) ::slotted(select) {
+        padding: 0.5rem 2.5rem 0.5rem 1rem;
+        font-size: 1rem;
+        height: 2.5rem;
+      }
+      :host([size="lg"]) ::slotted(select) {
+        padding: 0.75rem 3rem 0.75rem 1.25rem;
+        font-size: 1.125rem;
+        height: 3rem;
+      }
+
+      /* Multiple select formatting (No fixed height, no right padding for chevron) */
+      ::slotted(select[multiple]) {
+        height: auto !important;
+        padding-right: 1rem !important;
+      }
+
+      /* ==========================================================
+         Variants & Colors
+         ========================================================== */
+      :host([variant="outline"]) ::slotted(select) {
+        border: 1px solid var(--st-color-border);
+      }
+      :host([variant="outline"][color="default"]) ::slotted(select:focus-visible) {
+        border-color: var(--st-color-primary);
+        box-shadow: 0 0 0 2px rgba(var(--st-color-primary-rgb, 99, 102, 241), 0.2);
+      }
+
+      :host([variant="filled"]) ::slotted(select) {
+        border: 1px solid transparent;
+        background-color: var(--st-color-surface-hover, rgba(0, 0, 0, 0.05));
+      }
+      :host([variant="filled"]) ::slotted(select:not(:disabled):hover) {
+        background-color: var(--st-color-surface-active, rgba(0, 0, 0, 0.1));
+      }
+      :host([variant="filled"][color="default"]) ::slotted(select:focus-visible) {
+        border-color: var(--st-color-primary);
+        background-color: transparent;
+      }
+
+      /* Error Color State */
+      :host([color="error"]) ::slotted(select) {
+        border-color: var(--st-color-error, #ef4444);
+      }
+      :host([color="error"]) ::slotted(select:focus-visible) {
+        box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2);
+      }
+
+      /* Primary Color State */
+      :host([color="primary"]) ::slotted(select) {
+        border-color: var(--st-color-primary);
+      }
+
+      /* ==========================================================
+         Chevron Icon
+         ========================================================== */
+      .chevron {
+        position: absolute;
+        right: 0.75rem;
+        width: 1.25rem;
+        height: 1.25rem;
+        pointer-events: none;
+        color: var(--st-color-text-muted);
+        transition: transform 0.2s ease, color 0.2s ease;
+      }
+
+      /* Animate chevron when the wrapper detects focus */
+      :host([focused]) .chevron {
+        transform: rotate(180deg);
+        color: var(--st-color-primary);
+      }
+
+      /* Hide chevron if the user slots a native multiple select */
+      ::slotted(select[multiple]) ~ .chevron {
+        display: none;
+      }
+    `
+  ];
+
+  render() {
+    return html`
+      <div class="select-wrapper">
+        <slot></slot>
+        <svg class="chevron" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <polyline points="6 9 12 15 18 9"></polyline>
+        </svg>
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'st-select': StSelect;
+  }
 }