@duskmoon-dev/el-cascader 0.5.0 → 0.6.0

package/dist/types/el-dm-cascader.d.ts

@@ -3,8 +3,8 @@
  *
  * A multi-panel cascading selection component following Ant Design patterns.
  */
-import { BaseElement } from '@duskmoon-dev/el-core';
-import type { Size, ValidationState } from '@duskmoon-dev/el-core';
+import { BaseElement } from '@duskmoon-dev/el-base';
+import type { Size, ValidationState } from '@duskmoon-dev/el-base';
 /**
  * Cascader option structure
  */

package/dist/types/el-dm-cascader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"el-dm-cascader.d.ts","sourceRoot":"","sources":["../../src/el-dm-cascader.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"el-dm-cascader.d.ts","sourceRoot":"","sources":["../../src/el-dm-cascader.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@duskmoon-dev/el-cascader",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "DuskMoon Cascader custom element for multi-level cascading selection",
   "type": "module",
   "main": "./dist/cjs/index.js",
@@ -25,16 +25,17 @@
   "scripts": {
     "prebuild": "bun run clean",
     "build": "bun run build:esm && bun run build:cjs && bun run build:types",
-    "build:esm": "bun build ./src/index.ts ./src/register.ts --outdir ./dist/esm --format esm --sourcemap --external @duskmoon-dev/el-core",
-    "build:cjs": "bun build ./src/index.ts ./src/register.ts --outdir ./dist/cjs --format cjs --sourcemap --external @duskmoon-dev/el-core",
+    "build:esm": "bun build ./src/index.ts ./src/register.ts --outdir ./dist/esm --format esm --sourcemap --external @duskmoon-dev/el-base --external @duskmoon-dev/core",
+    "build:cjs": "bun build ./src/index.ts ./src/register.ts --outdir ./dist/cjs --format cjs --sourcemap --external @duskmoon-dev/el-base --external @duskmoon-dev/core",
     "build:types": "tsc --emitDeclarationOnly --outDir ./dist/types",
-    "dev": "bun build ./src/index.ts --outdir ./dist/esm --format esm --sourcemap --external @duskmoon-dev/el-core --watch",
+    "dev": "bun build ./src/index.ts --outdir ./dist/esm --format esm --sourcemap --external @duskmoon-dev/el-base --external @duskmoon-dev/core --watch",
     "clean": "rm -rf dist",
     "test": "bun test",
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@duskmoon-dev/el-core": "0.4.0"
+    "@duskmoon-dev/el-base": "0.5.1",
+    "@duskmoon-dev/core": "^1.10.1"
   },
   "devDependencies": {
     "typescript": "^5.8.3"

package/src/duskmoon-core.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Type declarations for @duskmoon-dev/core cascader component export
+ */
+
+declare module '@duskmoon-dev/core/components/cascader' {
+  export const css: string;
+}

package/src/el-dm-cascader.test.ts

@@ -0,0 +1,232 @@
+import { expect, test, describe, beforeEach, afterEach } from 'bun:test';
+import { ElDmCascader, register } from './index';
+import type { CascaderOption } from './index';
+
+register();
+
+const sampleOptions: CascaderOption[] = [
+  { value: 'fruits', label: 'Fruits', children: [
+    { value: 'apple', label: 'Apple' },
+    { value: 'banana', label: 'Banana' },
+  ]},
+  { value: 'vegs', label: 'Vegetables', children: [
+    { value: 'carrot', label: 'Carrot' },
+  ]},
+  { value: 'grains', label: 'Grains' },
+];
+
+function createCascader(props: Partial<ElDmCascader> = {}): ElDmCascader {
+  const el = document.createElement('el-dm-cascader') as ElDmCascader;
+  Object.assign(el, props);
+  return el;
+}
+
+describe('ElDmCascader', () => {
+  let container: HTMLDivElement;
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    container.remove();
+  });
+
+  // --- Registration ---
+  test('is defined', () => {
+    expect(customElements.get('el-dm-cascader')).toBe(ElDmCascader);
+  });
+
+  // --- Rendering ---
+  test('creates a shadow root', () => {
+    const el = createCascader();
+    container.appendChild(el);
+    expect(el.shadowRoot).toBeDefined();
+  });
+
+  test('has cascader trigger', () => {
+    const el = createCascader();
+    container.appendChild(el);
+    const trigger = el.shadowRoot?.querySelector('.cascader-trigger');
+    expect(trigger).toBeDefined();
+  });
+
+  test('shows placeholder text', () => {
+    const el = createCascader({ placeholder: 'Pick one' });
+    container.appendChild(el);
+    const placeholder = el.shadowRoot?.querySelector('.cascader-placeholder');
+    expect(placeholder?.textContent).toContain('Pick one');
+  });
+
+  test('shows default placeholder', () => {
+    const el = createCascader();
+    container.appendChild(el);
+    const placeholder = el.shadowRoot?.querySelector('.cascader-placeholder');
+    expect(placeholder?.textContent).toContain('Select...');
+  });
+
+  test('has dropdown element', () => {
+    const el = createCascader();
+    container.appendChild(el);
+    const dropdown = el.shadowRoot?.querySelector('.cascader-dropdown');
+    expect(dropdown).toBeDefined();
+  });
+
+  test('has panels container', () => {
+    const el = createCascader();
+    container.appendChild(el);
+    const panels = el.shadowRoot?.querySelector('.cascader-panels');
+    expect(panels).toBeDefined();
+  });
+
+  test('has chevron icon', () => {
+    const el = createCascader();
+    container.appendChild(el);
+    const chevron = el.shadowRoot?.querySelector('.cascader-chevron');
+    expect(chevron).toBeDefined();
+  });
+
+  // --- Properties ---
+  test('reflects value attribute', () => {
+    const el = createCascader({ value: '["fruits","apple"]' });
+    container.appendChild(el);
+    expect(el.getAttribute('value')).toBe('["fruits","apple"]');
+  });
+
+  test('reflects disabled attribute', () => {
+    const el = createCascader({ disabled: true });
+    container.appendChild(el);
+    expect(el.hasAttribute('disabled')).toBe(true);
+  });
+
+  test('reflects multiple attribute', () => {
+    const el = createCascader({ multiple: true });
+    container.appendChild(el);
+    expect(el.hasAttribute('multiple')).toBe(true);
+  });
+
+  test('reflects searchable attribute', () => {
+    const el = createCascader({ searchable: true });
+    container.appendChild(el);
+    expect(el.hasAttribute('searchable')).toBe(true);
+  });
+
+  test('reflects clearable attribute', () => {
+    const el = createCascader({ clearable: true });
+    container.appendChild(el);
+    expect(el.hasAttribute('clearable')).toBe(true);
+  });
+
+  test('reflects changeOnSelect attribute', () => {
+    const el = createCascader({ changeOnSelect: true });
+    container.appendChild(el);
+    expect(el.hasAttribute('change-on-select')).toBe(true);
+  });
+
+  test('defaults expandTrigger to click', () => {
+    const el = createCascader();
+    container.appendChild(el);
+    expect(el.expandTrigger).toBe('click');
+  });
+
+  test('defaults separator to " / "', () => {
+    const el = createCascader();
+    container.appendChild(el);
+    expect(el.separator).toBe(' / ');
+  });
+
+  test('defaults size to md', () => {
+    const el = createCascader();
+    container.appendChild(el);
+    expect(el.size).toBe('md');
+  });
+
+  test('reflects size attribute', () => {
+    const el = createCascader({ size: 'sm' } as Partial<ElDmCascader>);
+    container.appendChild(el);
+    expect(el.getAttribute('size')).toBe('sm');
+  });
+
+  // --- Public methods ---
+  test('has setOptions method', () => {
+    const el = createCascader();
+    container.appendChild(el);
+    expect(typeof el.setOptions).toBe('function');
+  });
+
+  test('has setLoadData method', () => {
+    const el = createCascader();
+    container.appendChild(el);
+    expect(typeof el.setLoadData).toBe('function');
+  });
+
+  test('setOptions renders options in first panel', () => {
+    const el = createCascader();
+    container.appendChild(el);
+    el.setOptions(sampleOptions);
+    const options = el.shadowRoot?.querySelectorAll('.cascader-option');
+    expect(options?.length).toBeGreaterThanOrEqual(3);
+  });
+
+  // --- Accessibility ---
+  test('has combobox role', () => {
+    const el = createCascader();
+    container.appendChild(el);
+    const combobox = el.shadowRoot?.querySelector('[role="combobox"]');
+    expect(combobox).toBeDefined();
+  });
+
+  test('has aria-expanded', () => {
+    const el = createCascader();
+    container.appendChild(el);
+    const trigger = el.shadowRoot?.querySelector('[aria-expanded]');
+    expect(trigger).toBeDefined();
+  });
+
+  // --- Disabled ---
+  test('trigger is disabled when component disabled', () => {
+    const el = createCascader({ disabled: true });
+    container.appendChild(el);
+    const trigger = el.shadowRoot?.querySelector('.cascader-trigger');
+    expect(trigger?.hasAttribute('disabled')).toBe(true);
+  });
+
+  // --- Size via host attribute (styled with :host([size="sm/lg"])) ---
+  test('host has size=sm attribute', () => {
+    const el = createCascader({ size: 'sm' } as Partial<ElDmCascader>);
+    container.appendChild(el);
+    expect(el.getAttribute('size')).toBe('sm');
+  });
+
+  test('host has size=lg attribute', () => {
+    const el = createCascader({ size: 'lg' } as Partial<ElDmCascader>);
+    container.appendChild(el);
+    expect(el.getAttribute('size')).toBe('lg');
+  });
+
+  // --- Validation ---
+  test('reflects validationState attribute', () => {
+    const el = createCascader({ validationState: 'invalid' } as Partial<ElDmCascader>);
+    container.appendChild(el);
+    expect(el.getAttribute('validation-state')).toBe('invalid');
+  });
+
+  // --- Options with children show expand indicator ---
+  test('options with children have expand indicator', () => {
+    const el = createCascader();
+    container.appendChild(el);
+    el.setOptions(sampleOptions);
+    const expandable = el.shadowRoot?.querySelectorAll('.cascader-option-arrow');
+    // fruits and vegs have children = 2 arrows
+    expect(expandable?.length).toBeGreaterThanOrEqual(2);
+  });
+
+  // --- Searchable ---
+  test('shows search input when searchable', () => {
+    const el = createCascader({ searchable: true });
+    container.appendChild(el);
+    const searchInput = el.shadowRoot?.querySelector('.cascader-search-input');
+    expect(searchInput).toBeDefined();
+  });
+});

package/src/el-dm-cascader.ts

@@ -4,8 +4,9 @@
  * A multi-panel cascading selection component following Ant Design patterns.
  */
 
-import { BaseElement, css } from '@duskmoon-dev/el-core';
-import type { Size, ValidationState } from '@duskmoon-dev/el-core';
+import { BaseElement, css } from '@duskmoon-dev/el-base';
+import type { Size, ValidationState } from '@duskmoon-dev/el-base';
+import { css as cascaderCSS } from '@duskmoon-dev/core/components/cascader';
 
 // Icons with explicit dimensions for proper rendering
 const chevronDownIcon = `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>`;
@@ -59,67 +60,41 @@ interface SearchResult {
   pathValues: string[];
 }
 
-// Styles
+// Strip @layer wrapper from core CSS for Shadow DOM usage
+const coreStyles = cascaderCSS.replace(/@layer\s+components\s*\{/, '').replace(/\}\s*$/, '');
+
+// Styles: core CSS + element-specific overrides
 const styles = css`
   :host {
     display: inline-block;
     width: 100%;
   }
 
+  ${coreStyles}
+
+  /* Override: block display for full-width behavior */
   .cascader {
-    position: relative;
-    width: 100%;
+    display: block;
   }
 
-  /* Trigger Button */
+  /* Override: trigger sizing & gap */
   .cascader-trigger {
-    display: flex;
-    align-items: center;
     gap: 0.5rem;
-    width: 100%;
     min-height: 2.75rem;
     padding: 0.5rem 0.75rem;
-    font-size: var(--font-size-md, 1rem);
-    line-height: 1.5;
-    color: var(--color-on-surface);
-    background-color: var(--color-surface);
-    border: 1px solid var(--color-outline);
-    border-radius: var(--radius-md, 0.5rem);
-    cursor: pointer;
-    transition: border-color 150ms ease, box-shadow 150ms ease;
-  }
-
-  .cascader-trigger:hover:not(:disabled) {
-    border-color: var(--color-on-surface-variant);
-  }
-
-  .cascader-trigger:focus {
-    outline: none;
-    border-color: var(--color-primary);
-    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-primary) 15%, transparent);
-  }
-
-  .cascader-trigger:disabled {
-    cursor: not-allowed;
-    opacity: 0.5;
-    background-color: var(--color-surface-container);
   }
 
-  /* Value Display */
+  /* Override: value display as block text */
   .cascader-value {
-    flex: 1;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+    display: block;
     text-align: left;
   }
 
   .cascader-placeholder {
-    color: var(--color-on-surface-variant);
     opacity: 0.7;
   }
 
-  /* Tags Container (for multiple mode) */
+  /* Tags (not in core) */
   .cascader-tags {
     display: flex;
     flex-wrap: wrap;
@@ -179,81 +154,20 @@ const styles = css`
     color: var(--color-on-surface-variant);
   }
 
-  /* Icons */
-  .cascader-arrow {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 20px;
-    height: 20px;
-    flex-shrink: 0;
-    color: var(--color-on-surface-variant);
-    transition: transform 150ms ease;
-  }
-
-  .cascader-arrow svg {
-    width: 16px;
-    height: 16px;
-    display: block;
-  }
-
-  .cascader.open .cascader-arrow {
-    transform: rotate(180deg);
-  }
-
-  .cascader-clear {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 20px;
-    height: 20px;
-    padding: 0;
-    color: var(--color-on-surface-variant);
-    background-color: transparent;
-    border-radius: 50%;
-    cursor: pointer;
-    flex-shrink: 0;
-    transition: background-color 150ms ease;
-  }
-
+  /* Override: arrow/clear SVG sizing */
+  .cascader-arrow svg,
   .cascader-clear svg {
-    width: 14px;
-    height: 14px;
     display: block;
   }
 
-  .cascader-clear:hover {
-    background-color: var(--color-surface-container-high);
-  }
-
-  /* Dropdown - uses Popover API (top-layer requires position: fixed) */
+  /* Override: dropdown uses Popover API (top-layer requires position: fixed) */
   .cascader-dropdown {
     position: fixed;
-    margin: 0;
-    padding: 0;
-    border: 1px solid var(--color-outline-variant);
-    border-radius: var(--radius-md, 0.5rem);
-    background-color: var(--color-surface);
-    box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1));
-    overflow: hidden;
-    display: none;
     flex-direction: column;
     z-index: 1000;
   }
 
-  .cascader-dropdown:popover-open {
-    display: flex;
-  }
-
-  /* Search */
-  .cascader-search {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    padding: 0.5rem;
-    border-bottom: 1px solid var(--color-outline-variant);
-  }
-
+  /* Search icon (not in core) */
   .cascader-search-icon {
     display: inline-flex;
     align-items: center;
@@ -270,86 +184,16 @@ const styles = css`
     display: block;
   }
 
-  .cascader-search-input {
-    flex: 1;
-    padding: 0.375rem 0.5rem;
-    font-size: var(--font-size-sm, 0.875rem);
-    color: var(--color-on-surface);
-    background-color: var(--color-surface-container);
-    border: none;
-    border-radius: var(--radius-sm, 0.25rem);
-    outline: none;
-  }
-
-  .cascader-search-input:focus {
-    background-color: var(--color-surface-container-high);
-  }
-
-  .cascader-search-input::placeholder {
-    color: var(--color-on-surface-variant);
-    opacity: 0.7;
-  }
-
-  /* Panels Container */
+  /* Override: panel max-height */
   .cascader-panels {
-    display: flex;
     max-height: 18rem;
   }
 
-  /* Panel */
   .cascader-panel {
-    display: flex;
-    flex-direction: column;
-    min-width: 10rem;
-    max-width: 14rem;
     max-height: 18rem;
-    overflow-y: auto;
-    border-right: 1px solid var(--color-outline-variant);
-  }
-
-  .cascader-panel:last-child {
-    border-right: none;
-  }
-
-  .cascader-panel-options {
-    padding: 0.25rem;
-  }
-
-  /* Option */
-  .cascader-option {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    width: 100%;
-    padding: 0.5rem 0.75rem;
-    font-size: var(--font-size-sm, 0.875rem);
-    color: var(--color-on-surface);
-    background-color: transparent;
-    border: none;
-    border-radius: var(--radius-sm, 0.25rem);
-    cursor: pointer;
-    text-align: left;
-    transition: background-color 150ms ease;
-  }
-
-  .cascader-option:hover:not(.disabled) {
-    background-color: var(--color-surface-container);
-  }
-
-  .cascader-option.active {
-    background-color: var(--color-surface-container-high);
-  }
-
-  .cascader-option.selected {
-    background-color: var(--color-primary-container, #e8def8);
-    color: var(--color-on-primary-container, #1d1b20);
-  }
-
-  .cascader-option.disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
   }
 
+  /* Checkbox (not in core) */
   .cascader-option-checkbox {
     display: flex;
     align-items: center;
@@ -362,27 +206,13 @@ const styles = css`
     flex-shrink: 0;
   }
 
-  .cascader-option.selected .cascader-option-checkbox {
+  .cascader-option-selected .cascader-option-checkbox {
     background-color: var(--color-primary);
     border-color: var(--color-primary);
     color: var(--color-on-primary, white);
   }
 
-  .cascader-option-label {
-    flex: 1;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  .cascader-option-arrow {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: var(--color-on-surface-variant);
-    flex-shrink: 0;
-  }
-
+  /* Loading spinner (not in core) */
   .cascader-option-loading {
     display: flex;
     align-items: center;
@@ -399,7 +229,7 @@ const styles = css`
     to { transform: rotate(360deg); }
   }
 
-  /* Search Results */
+  /* Search results (not in core) */
   .cascader-search-results {
     padding: 0.25rem;
     max-height: 18rem;
@@ -443,15 +273,7 @@ const styles = css`
     margin: 0 0.25rem;
   }
 
-  /* Empty State */
-  .cascader-empty {
-    padding: 1.5rem;
-    text-align: center;
-    color: var(--color-on-surface-variant);
-    font-size: var(--font-size-sm, 0.875rem);
-  }
-
-  /* Size Variants */
+  /* Size variants via :host (override core's container-class approach) */
   :host([size="sm"]) .cascader-trigger {
     min-height: 2.25rem;
     padding: 0.375rem 0.5rem;
@@ -466,7 +288,7 @@ const styles = css`
     border-radius: var(--radius-lg, 0.625rem);
   }
 
-  /* Validation States */
+  /* Validation states via :host (override core's container-class approach) */
   :host([validation-state="invalid"]) .cascader-trigger {
     border-color: var(--color-error);
   }
@@ -480,7 +302,7 @@ const styles = css`
     border-color: var(--color-success);
   }
 
-  /* Disabled State */
+  /* Disabled state via :host */
   :host([disabled]) {
     pointer-events: none;
   }
@@ -1047,7 +869,7 @@ export class ElDmCascader extends BaseElement {
   // Rendering
   protected render(): string {
     return `
-      <div class="cascader ${this._isOpen ? 'open' : ''}">
+      <div class="cascader ${this._isOpen ? 'cascader-open' : ''}">
         ${this._renderTrigger()}
         ${this._renderDropdown()}
       </div>
@@ -1157,9 +979,9 @@ export class ElDmCascader extends BaseElement {
 
         const classes = [
           'cascader-option',
-          isActive ? 'active' : '',
-          isSelected ? 'selected' : '',
-          option.disabled ? 'disabled' : '',
+          isActive ? 'cascader-option-active' : '',
+          isSelected ? 'cascader-option-selected' : '',
+          option.disabled ? 'cascader-option-disabled' : '',
         ].filter(Boolean).join(' ');
 
         return `
@@ -1182,7 +1004,7 @@ export class ElDmCascader extends BaseElement {
 
     return `
       <div class="cascader-panel">
-        <div class="cascader-panel-options">${optionsHtml}</div>
+        <div class="cascader-options">${optionsHtml}</div>
       </div>
     `;
   }