@duskmoon-dev/el-cascader

A multi-panel cascading selection component for hierarchical data.

Installation

npm install @duskmoon-dev/el-cascader

Usage

// Auto-register the element
import '@duskmoon-dev/el-cascader/register';

// Or manually register
import { register } from '@duskmoon-dev/el-cascader';
register();

<el-dm-cascader placeholder="Select location..."></el-dm-cascader>

Features

• Multi-Panel Layout: Visual hierarchy with side-by-side panels
• Click or Hover Expand: Choose how panels expand
• Multiple Selection: Select multiple paths
• Searchable: Filter through all levels
• Async Loading: Load children on demand
• Clearable: Clear selection with a button
• Keyboard Navigation: Full keyboard support

Setting Options

const cascader = document.querySelector('el-dm-cascader');

cascader.setOptions([
  {
    value: 'usa',
    label: 'United States',
    children: [
      {
        value: 'california',
        label: 'California',
        children: [
          { value: 'sf', label: 'San Francisco' },
          { value: 'la', label: 'Los Angeles' }
        ]
      }
    ]
  }
]);

Async Loading

// Set initial options with leaf: false
cascader.setOptions([
  { value: 'category1', label: 'Category 1', leaf: false }
]);

// Set async loader
cascader.setLoadData(async (option) => {
  const response = await fetch(`/api/children/${option.value}`);
  return response.json();
});

Properties

Events

License

MIT