@smilodon/core 1.3.0 → 1.3.1
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 +39 -9
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -97,13 +97,6 @@ See the [main documentation](https://github.com/navidrezadoost/smilodon#readme)
|
|
|
97
97
|
- **Sub-millisecond Search**: Fenwick tree indexing for O(log n) queries
|
|
98
98
|
- **60 FPS Scrolling**: Hardware-accelerated virtualization
|
|
99
99
|
|
|
100
|
-
### ✨ Custom Components (NEW in v1.2.0)
|
|
101
|
-
- **Framework Components**: Pass React, Vue, or Svelte components for option rendering
|
|
102
|
-
- **Component Pooling**: Automatic recycling of up to 100 component instances
|
|
103
|
-
- **Lifecycle Management**: Full mount/unmount/update lifecycle control
|
|
104
|
-
- **Mixed Mode**: Use custom components alongside lightweight options
|
|
105
|
-
- **See**: [Custom Option Components Guide](https://github.com/navidrezadoost/smilodon/blob/main/docs/CUSTOM-OPTION-COMPONENTS.md)
|
|
106
|
-
|
|
107
100
|
### 🎯 Production Ready
|
|
108
101
|
- **TypeScript First**: Complete type definitions included
|
|
109
102
|
- **Zero Dependencies**: 6.6 KB gzipped runtime
|
|
@@ -122,7 +115,7 @@ See the [main documentation](https://github.com/navidrezadoost/smilodon#readme)
|
|
|
122
115
|
|
|
123
116
|
```typescript
|
|
124
117
|
interface SmilodonSelectElement extends HTMLElement {
|
|
125
|
-
items: SelectItem[];
|
|
118
|
+
items: SelectItem[] | string[] | number[]; // Dataset (can be millions of items)
|
|
126
119
|
value: any; // Current selected value
|
|
127
120
|
placeholder?: string; // Placeholder text
|
|
128
121
|
searchable?: boolean; // Enable search (default: true)
|
|
@@ -137,10 +130,47 @@ interface SelectItem {
|
|
|
137
130
|
value: any; // Value (can be any type)
|
|
138
131
|
disabled?: boolean; // Disable this option
|
|
139
132
|
group?: string; // Optgroup name
|
|
140
|
-
optionComponent?: CustomOptionFactory; // (v1.2.0+) Custom component for this option
|
|
141
133
|
}
|
|
142
134
|
```
|
|
143
135
|
|
|
136
|
+
> **Flexible Input Formats:**
|
|
137
|
+
> - **Object arrays**: `[{ value: '1', label: 'Option 1' }, ...]`
|
|
138
|
+
> - **String arrays**: `['Apple', 'Banana', 'Cherry']` - automatically converted to `SelectItem` format
|
|
139
|
+
> - **Number arrays**: `[1, 2, 3, 5, 8]` - automatically converted to `SelectItem` format
|
|
140
|
+
|
|
141
|
+
### Examples with Different Input Types
|
|
142
|
+
|
|
143
|
+
#### Object Array (Traditional)
|
|
144
|
+
```javascript
|
|
145
|
+
select.items = [
|
|
146
|
+
{ value: 'apple', label: 'Apple' },
|
|
147
|
+
{ value: 'banana', label: 'Banana' },
|
|
148
|
+
{ value: 'cherry', label: 'Cherry' }
|
|
149
|
+
];
|
|
150
|
+
```
|
|
151
|
+
|
|
152
|
+
#### String Array (Auto-converted)
|
|
153
|
+
```javascript
|
|
154
|
+
select.items = ['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry'];
|
|
155
|
+
// Automatically becomes:
|
|
156
|
+
// [
|
|
157
|
+
// { value: 'Apple', label: 'Apple' },
|
|
158
|
+
// { value: 'Banana', label: 'Banana' },
|
|
159
|
+
// ...
|
|
160
|
+
// ]
|
|
161
|
+
```
|
|
162
|
+
|
|
163
|
+
#### Number Array (Auto-converted)
|
|
164
|
+
```javascript
|
|
165
|
+
select.items = [1, 2, 3, 5, 8, 13, 21, 34, 55, 89];
|
|
166
|
+
// Automatically becomes:
|
|
167
|
+
// [
|
|
168
|
+
// { value: 1, label: '1' },
|
|
169
|
+
// { value: 2, label: '2' },
|
|
170
|
+
// ...
|
|
171
|
+
// ]
|
|
172
|
+
```
|
|
173
|
+
|
|
144
174
|
### Events
|
|
145
175
|
|
|
146
176
|
```typescript
|
package/package.json
CHANGED