angular-perfect-select 2.0.0 → 2.1.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 +46 -1
- package/dist/README.md +46 -1
- package/dist/fesm2022/angular-perfect-select.mjs +137 -7
- package/dist/fesm2022/angular-perfect-select.mjs.map +1 -1
- package/dist/index.d.ts +34 -2
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -21,7 +21,11 @@ A modern, feature-rich, and fully accessible select component for Angular applic
|
|
|
21
21
|
|
|
22
22
|
### Advanced Features
|
|
23
23
|
|
|
24
|
-
#### v2.
|
|
24
|
+
#### v2.1.0 Features 🆕
|
|
25
|
+
- **Drag & Drop Reordering** - Reorder selected tags in multi-select mode with intuitive drag handles
|
|
26
|
+
- **Option Pinning** - Pin frequently used options to the top with persistence support
|
|
27
|
+
|
|
28
|
+
#### v2.0.0 Features
|
|
25
29
|
- **Virtual Scrolling** - Handle 10,000+ options without performance degradation using Angular CDK
|
|
26
30
|
- **Custom Option Templates** - Full control over option rendering with ng-template support
|
|
27
31
|
- **Validation States** - Visual error, warning, success, and info states with custom messages
|
|
@@ -126,6 +130,47 @@ export class AppModule { }
|
|
|
126
130
|
|
|
127
131
|
## Usage Examples
|
|
128
132
|
|
|
133
|
+
### Drag & Drop Reordering (v2.1.0)
|
|
134
|
+
|
|
135
|
+
Reorder selected tags in multi-select mode with drag-and-drop:
|
|
136
|
+
|
|
137
|
+
```typescript
|
|
138
|
+
<angular-perfect-select
|
|
139
|
+
[options]="options"
|
|
140
|
+
[isMulti]="true"
|
|
141
|
+
[enableDragDrop]="true"
|
|
142
|
+
[dragDropPlaceholder]="'Drop here'"
|
|
143
|
+
[dragDropAnimation]="200"
|
|
144
|
+
(reorder)="handleReorder($event)"
|
|
145
|
+
/>
|
|
146
|
+
|
|
147
|
+
// In your component
|
|
148
|
+
handleReorder(event: SelectReorderEvent) {
|
|
149
|
+
console.log('Reordered from', event.previousIndex, 'to', event.currentIndex);
|
|
150
|
+
console.log('New order:', event.values);
|
|
151
|
+
}
|
|
152
|
+
```
|
|
153
|
+
|
|
154
|
+
### Option Pinning (v2.1.0)
|
|
155
|
+
|
|
156
|
+
Pin frequently used options to the top of the dropdown:
|
|
157
|
+
|
|
158
|
+
```typescript
|
|
159
|
+
<angular-perfect-select
|
|
160
|
+
[options]="options"
|
|
161
|
+
[enablePinning]="true"
|
|
162
|
+
[maxPinnedOptions]="3"
|
|
163
|
+
[persistPinnedOptions]="true"
|
|
164
|
+
[pinnedOptionsLabel]="'Favorites'"
|
|
165
|
+
(pin)="handlePin($event)"
|
|
166
|
+
/>
|
|
167
|
+
|
|
168
|
+
// In your component
|
|
169
|
+
handlePin(event: SelectPinEvent) {
|
|
170
|
+
console.log('Option', event.option.label, event.pinned ? 'pinned' : 'unpinned');
|
|
171
|
+
}
|
|
172
|
+
```
|
|
173
|
+
|
|
129
174
|
### Max Selection Limit (v1.1.0)
|
|
130
175
|
|
|
131
176
|
Limit the number of selections in multi-select mode:
|
package/dist/README.md
CHANGED
|
@@ -21,7 +21,11 @@ A modern, feature-rich, and fully accessible select component for Angular applic
|
|
|
21
21
|
|
|
22
22
|
### Advanced Features
|
|
23
23
|
|
|
24
|
-
#### v2.
|
|
24
|
+
#### v2.1.0 Features 🆕
|
|
25
|
+
- **Drag & Drop Reordering** - Reorder selected tags in multi-select mode with intuitive drag handles
|
|
26
|
+
- **Option Pinning** - Pin frequently used options to the top with persistence support
|
|
27
|
+
|
|
28
|
+
#### v2.0.0 Features
|
|
25
29
|
- **Virtual Scrolling** - Handle 10,000+ options without performance degradation using Angular CDK
|
|
26
30
|
- **Custom Option Templates** - Full control over option rendering with ng-template support
|
|
27
31
|
- **Validation States** - Visual error, warning, success, and info states with custom messages
|
|
@@ -126,6 +130,47 @@ export class AppModule { }
|
|
|
126
130
|
|
|
127
131
|
## Usage Examples
|
|
128
132
|
|
|
133
|
+
### Drag & Drop Reordering (v2.1.0)
|
|
134
|
+
|
|
135
|
+
Reorder selected tags in multi-select mode with drag-and-drop:
|
|
136
|
+
|
|
137
|
+
```typescript
|
|
138
|
+
<angular-perfect-select
|
|
139
|
+
[options]="options"
|
|
140
|
+
[isMulti]="true"
|
|
141
|
+
[enableDragDrop]="true"
|
|
142
|
+
[dragDropPlaceholder]="'Drop here'"
|
|
143
|
+
[dragDropAnimation]="200"
|
|
144
|
+
(reorder)="handleReorder($event)"
|
|
145
|
+
/>
|
|
146
|
+
|
|
147
|
+
// In your component
|
|
148
|
+
handleReorder(event: SelectReorderEvent) {
|
|
149
|
+
console.log('Reordered from', event.previousIndex, 'to', event.currentIndex);
|
|
150
|
+
console.log('New order:', event.values);
|
|
151
|
+
}
|
|
152
|
+
```
|
|
153
|
+
|
|
154
|
+
### Option Pinning (v2.1.0)
|
|
155
|
+
|
|
156
|
+
Pin frequently used options to the top of the dropdown:
|
|
157
|
+
|
|
158
|
+
```typescript
|
|
159
|
+
<angular-perfect-select
|
|
160
|
+
[options]="options"
|
|
161
|
+
[enablePinning]="true"
|
|
162
|
+
[maxPinnedOptions]="3"
|
|
163
|
+
[persistPinnedOptions]="true"
|
|
164
|
+
[pinnedOptionsLabel]="'Favorites'"
|
|
165
|
+
(pin)="handlePin($event)"
|
|
166
|
+
/>
|
|
167
|
+
|
|
168
|
+
// In your component
|
|
169
|
+
handlePin(event: SelectPinEvent) {
|
|
170
|
+
console.log('Option', event.option.label, event.pinned ? 'pinned' : 'unpinned');
|
|
171
|
+
}
|
|
172
|
+
```
|
|
173
|
+
|
|
129
174
|
### Max Selection Limit (v1.1.0)
|
|
130
175
|
|
|
131
176
|
Limit the number of selections in multi-select mode:
|