@duskmoon-dev/el-cascader 0.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +100 -0
- package/dist/cjs/index.js +1089 -0
- package/dist/cjs/index.js.map +10 -0
- package/dist/cjs/register.js +1084 -0
- package/dist/cjs/register.js.map +11 -0
- package/dist/esm/index.js +1057 -0
- package/dist/esm/index.js.map +10 -0
- package/dist/esm/register.js +1056 -0
- package/dist/esm/register.js.map +11 -0
- package/dist/tsconfig.tsbuildinfo +1 -0
- package/dist/types/el-dm-cascader.d.ts +239 -0
- package/dist/types/el-dm-cascader.d.ts.map +1 -0
- package/dist/types/index.d.ts +7 -0
- package/dist/types/index.d.ts.map +1 -0
- package/dist/types/register.d.ts +8 -0
- package/dist/types/register.d.ts.map +1 -0
- package/package.json +60 -0
- package/src/el-dm-cascader.ts +1366 -0
- package/src/index.ts +15 -0
- package/src/register.ts +10 -0
package/README.md
ADDED
|
@@ -0,0 +1,100 @@
|
|
|
1
|
+
# @duskmoon-dev/el-cascader
|
|
2
|
+
|
|
3
|
+
A multi-panel cascading selection component for hierarchical data.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @duskmoon-dev/el-cascader
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Usage
|
|
12
|
+
|
|
13
|
+
```javascript
|
|
14
|
+
// Auto-register the element
|
|
15
|
+
import '@duskmoon-dev/el-cascader/register';
|
|
16
|
+
|
|
17
|
+
// Or manually register
|
|
18
|
+
import { register } from '@duskmoon-dev/el-cascader';
|
|
19
|
+
register();
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
```html
|
|
23
|
+
<el-dm-cascader placeholder="Select location..."></el-dm-cascader>
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
## Features
|
|
27
|
+
|
|
28
|
+
- **Multi-Panel Layout**: Visual hierarchy with side-by-side panels
|
|
29
|
+
- **Click or Hover Expand**: Choose how panels expand
|
|
30
|
+
- **Multiple Selection**: Select multiple paths
|
|
31
|
+
- **Searchable**: Filter through all levels
|
|
32
|
+
- **Async Loading**: Load children on demand
|
|
33
|
+
- **Clearable**: Clear selection with a button
|
|
34
|
+
- **Keyboard Navigation**: Full keyboard support
|
|
35
|
+
|
|
36
|
+
## Setting Options
|
|
37
|
+
|
|
38
|
+
```javascript
|
|
39
|
+
const cascader = document.querySelector('el-dm-cascader');
|
|
40
|
+
|
|
41
|
+
cascader.setOptions([
|
|
42
|
+
{
|
|
43
|
+
value: 'usa',
|
|
44
|
+
label: 'United States',
|
|
45
|
+
children: [
|
|
46
|
+
{
|
|
47
|
+
value: 'california',
|
|
48
|
+
label: 'California',
|
|
49
|
+
children: [
|
|
50
|
+
{ value: 'sf', label: 'San Francisco' },
|
|
51
|
+
{ value: 'la', label: 'Los Angeles' }
|
|
52
|
+
]
|
|
53
|
+
}
|
|
54
|
+
]
|
|
55
|
+
}
|
|
56
|
+
]);
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
## Async Loading
|
|
60
|
+
|
|
61
|
+
```javascript
|
|
62
|
+
// Set initial options with leaf: false
|
|
63
|
+
cascader.setOptions([
|
|
64
|
+
{ value: 'category1', label: 'Category 1', leaf: false }
|
|
65
|
+
]);
|
|
66
|
+
|
|
67
|
+
// Set async loader
|
|
68
|
+
cascader.setLoadData(async (option) => {
|
|
69
|
+
const response = await fetch(`/api/children/${option.value}`);
|
|
70
|
+
return response.json();
|
|
71
|
+
});
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
## Properties
|
|
75
|
+
|
|
76
|
+
| Property | Type | Default | Description |
|
|
77
|
+
|----------|------|---------|-------------|
|
|
78
|
+
| `value` | `string` | `''` | Selected path (JSON array) |
|
|
79
|
+
| `placeholder` | `string` | `''` | Placeholder text |
|
|
80
|
+
| `disabled` | `boolean` | `false` | Disable the cascader |
|
|
81
|
+
| `multiple` | `boolean` | `false` | Enable multi-select |
|
|
82
|
+
| `searchable` | `boolean` | `false` | Enable search |
|
|
83
|
+
| `clearable` | `boolean` | `false` | Show clear button |
|
|
84
|
+
| `change-on-select` | `boolean` | `false` | Allow non-leaf selection |
|
|
85
|
+
| `expand-trigger` | `'click' \| 'hover'` | `'click'` | Panel expand trigger |
|
|
86
|
+
| `separator` | `string` | `' / '` | Display path separator |
|
|
87
|
+
| `show-all-levels` | `boolean` | `true` | Show full path or leaf only |
|
|
88
|
+
| `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Size variant |
|
|
89
|
+
|
|
90
|
+
## Events
|
|
91
|
+
|
|
92
|
+
| Event | Detail | Description |
|
|
93
|
+
|-------|--------|-------------|
|
|
94
|
+
| `change` | `{ value, selectedOptions, path }` | Selection changed |
|
|
95
|
+
| `expand` | `{ option, level }` | Panel expanded |
|
|
96
|
+
| `search` | `{ searchValue }` | Search text changed |
|
|
97
|
+
|
|
98
|
+
## License
|
|
99
|
+
|
|
100
|
+
MIT
|