@duskmoon-dev/el-select

A unified select component with single, multi-select, and tree-select modes.

Installation

npm install @duskmoon-dev/el-select

Usage

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

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

<el-dm-select placeholder="Select a fruit..."></el-dm-select>

Features

• Single Select: Basic dropdown selection
• Multi-Select: Tag-based multiple selection
• Tree Select: Hierarchical data selection with expand/collapse
• Searchable: Filter options by typing
• Clearable: Clear selection with a button
• Cascade Mode: Auto-select children when parent selected
• Keyboard Navigation: Full keyboard support

Setting Options

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

// Flat options
select.setOptions([
  { value: 'apple', label: 'Apple' },
  { value: 'banana', label: 'Banana' }
]);

// Grouped options
select.setOptions([
  { value: 'js', label: 'JavaScript', group: 'Frontend' },
  { value: 'py', label: 'Python', group: 'Backend' }
]);

// Tree options
select.setTreeOptions([
  {
    value: 'frontend',
    label: 'Frontend',
    children: [
      { value: 'react', label: 'React' },
      { value: 'vue', label: 'Vue' }
    ]
  }
]);

Properties

Events

License

MIT