@keenmate/web-multiselect 1.2.0 → 1.4.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 +90 -0
- package/dist/multiselect.js +968 -968
- package/dist/multiselect.umd.js +25 -25
- package/dist/style.css +1 -1
- package/package.json +1 -1
- package/src/scss/_badges-display.scss +19 -2
- package/src/scss/_base.scss +1 -1
- package/src/scss/_css-variables.scss +54 -3
- package/src/scss/_input-dropdown.scss +26 -0
- package/src/scss/_options.scss +147 -3
- package/src/scss/_rtl.scss +6 -4
- package/src/scss/_tooltips-popover.scss +21 -0
- package/src/scss/_variables.scss +103 -66
package/src/scss/_rtl.scss
CHANGED
|
@@ -74,16 +74,18 @@
|
|
|
74
74
|
flex-direction: row-reverse;
|
|
75
75
|
}
|
|
76
76
|
|
|
77
|
-
// Remove button on left side of badge
|
|
77
|
+
// Remove button on left side of badge (RTL)
|
|
78
78
|
.ms__badge-remove {
|
|
79
|
-
border-radius: var(--ms-badge-
|
|
79
|
+
border-radius: var(--ms-badge-border-radius, $ml-badge-border-radius) 0 0 var(--ms-badge-border-radius, $ml-badge-border-radius);
|
|
80
80
|
border-left: var(--ms-badge-remove-border, $ml-badge-remove-border);
|
|
81
81
|
border-right: none;
|
|
82
82
|
}
|
|
83
83
|
|
|
84
|
-
// Badge text rounded on right
|
|
84
|
+
// Badge text rounded on right (RTL)
|
|
85
85
|
.ms__badge-text {
|
|
86
|
-
border-radius: 0 var(--ms-badge-
|
|
86
|
+
border-radius: 0 var(--ms-badge-border-radius, $ml-badge-border-radius) var(--ms-badge-border-radius, $ml-badge-border-radius) 0;
|
|
87
|
+
border-right: var(--ms-badge-text-border, $ml-badge-text-border);
|
|
88
|
+
border-left: none;
|
|
87
89
|
}
|
|
88
90
|
|
|
89
91
|
// ==============================================================================
|
|
@@ -106,6 +106,27 @@
|
|
|
106
106
|
overflow-y: auto;
|
|
107
107
|
max-height: var(--ms-selected-popover-body-max-height, $ml-selected-popover-body-max-height);
|
|
108
108
|
|
|
109
|
+
// Scrollbar styling
|
|
110
|
+
scrollbar-width: thin; // Firefox
|
|
111
|
+
scrollbar-color: var(--ms-scrollbar-thumb-bg, $ml-scrollbar-thumb-bg) var(--ms-scrollbar-track-bg, $ml-scrollbar-track-bg);
|
|
112
|
+
|
|
113
|
+
&::-webkit-scrollbar {
|
|
114
|
+
width: var(--ms-scrollbar-width, $ml-scrollbar-width);
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
&::-webkit-scrollbar-track {
|
|
118
|
+
background: var(--ms-scrollbar-track-bg, $ml-scrollbar-track-bg);
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
&::-webkit-scrollbar-thumb {
|
|
122
|
+
background: var(--ms-scrollbar-thumb-bg, $ml-scrollbar-thumb-bg);
|
|
123
|
+
border-radius: var(--ms-scrollbar-thumb-border-radius, $ml-scrollbar-thumb-border-radius);
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
&::-webkit-scrollbar-thumb:hover {
|
|
127
|
+
background: var(--ms-scrollbar-thumb-bg-hover, $ml-scrollbar-thumb-bg-hover);
|
|
128
|
+
}
|
|
129
|
+
|
|
109
130
|
// Badges inside popover (non-virtual mode)
|
|
110
131
|
.ms__badge {
|
|
111
132
|
width: 100%;
|
package/src/scss/_variables.scss
CHANGED
|
@@ -12,21 +12,21 @@
|
|
|
12
12
|
// ==============================================================================
|
|
13
13
|
// Raw values that other variables reference
|
|
14
14
|
|
|
15
|
-
// Padding & Spacing
|
|
16
|
-
$padding-xs: 0.
|
|
17
|
-
$padding-sm: 0.
|
|
18
|
-
$padding-base:
|
|
19
|
-
$padding-lg:
|
|
20
|
-
|
|
21
|
-
// Border Radius
|
|
22
|
-
$border-radius-base: 0.
|
|
23
|
-
$border-radius-sm: 0.
|
|
15
|
+
// Padding & Spacing (using --ms-rem for scalability)
|
|
16
|
+
$padding-xs: calc(0.4 * var(--ms-rem)) !default; // 4px
|
|
17
|
+
$padding-sm: calc(0.8 * var(--ms-rem)) !default; // 8px
|
|
18
|
+
$padding-base: calc(1.2 * var(--ms-rem)) !default; // 12px
|
|
19
|
+
$padding-lg: calc(1.6 * var(--ms-rem)) !default; // 16px
|
|
20
|
+
|
|
21
|
+
// Border Radius (using --ms-rem for scalability)
|
|
22
|
+
$border-radius-base: calc(0.6 * var(--ms-rem)) !default; // 6px
|
|
23
|
+
$border-radius-sm: calc(0.4 * var(--ms-rem)) !default; // 4px
|
|
24
24
|
$border-radius-full: 50% !default;
|
|
25
25
|
|
|
26
|
-
// Font Sizes
|
|
27
|
-
$font-size-base:
|
|
28
|
-
$font-size-sm:
|
|
29
|
-
$font-size-lg:
|
|
26
|
+
// Font Sizes (using --ms-rem for scalability)
|
|
27
|
+
$font-size-base: calc(1.4 * var(--ms-rem)) !default; // 14px
|
|
28
|
+
$font-size-sm: calc(1.2 * var(--ms-rem)) !default; // 12px
|
|
29
|
+
$font-size-lg: calc(1.6 * var(--ms-rem)) !default; // 16px
|
|
30
30
|
|
|
31
31
|
// Border Width
|
|
32
32
|
$border-width-base: 1px !default;
|
|
@@ -34,10 +34,10 @@ $border-width-base: 1px !default;
|
|
|
34
34
|
// ==============================================================================
|
|
35
35
|
// 2. SPACING SCALE
|
|
36
36
|
// ==============================================================================
|
|
37
|
-
$ml-spacing-xs: $padding-xs !default; //
|
|
38
|
-
$ml-spacing-sm: $padding-sm !default; //
|
|
39
|
-
$ml-spacing-md: $padding-base !default; //
|
|
40
|
-
$ml-spacing-lg: $padding-lg !default; //
|
|
37
|
+
$ml-spacing-xs: $padding-xs !default; // 4px
|
|
38
|
+
$ml-spacing-sm: $padding-sm !default; // 8px
|
|
39
|
+
$ml-spacing-md: $padding-base !default; // 12px
|
|
40
|
+
$ml-spacing-lg: $padding-lg !default; // 16px
|
|
41
41
|
|
|
42
42
|
// ==============================================================================
|
|
43
43
|
// 3. COLOR PALETTE
|
|
@@ -63,14 +63,14 @@ $ml-color-tooltip-bg: #333 !default;
|
|
|
63
63
|
$ml-color-tooltip-text: #fff !default;
|
|
64
64
|
|
|
65
65
|
// ==============================================================================
|
|
66
|
-
// 4. TYPOGRAPHY SCALE
|
|
66
|
+
// 4. TYPOGRAPHY SCALE (using --ms-rem for scalability)
|
|
67
67
|
// ==============================================================================
|
|
68
|
-
$ml-font-size-2xs:
|
|
69
|
-
$ml-font-size-xs: $font-size-sm !default;
|
|
70
|
-
$ml-font-size-sm: $font-size-base !default;
|
|
71
|
-
$ml-font-size-base: $font-size-lg !default;
|
|
72
|
-
$ml-font-size-lg: 1.
|
|
73
|
-
$ml-font-size-xl:
|
|
68
|
+
$ml-font-size-2xs: calc(1 * var(--ms-rem)) !default; // 10px
|
|
69
|
+
$ml-font-size-xs: $font-size-sm !default; // 12px (via $font-size-sm)
|
|
70
|
+
$ml-font-size-sm: $font-size-base !default; // 14px (via $font-size-base)
|
|
71
|
+
$ml-font-size-base: $font-size-lg !default; // 16px (via $font-size-lg)
|
|
72
|
+
$ml-font-size-lg: calc(1.8 * var(--ms-rem)) !default; // 18px
|
|
73
|
+
$ml-font-size-xl: calc(2 * var(--ms-rem)) !default; // 20px
|
|
74
74
|
|
|
75
75
|
$ml-font-weight-medium: 500 !default;
|
|
76
76
|
$ml-font-weight-semibold: 600 !default;
|
|
@@ -108,21 +108,21 @@ $ml-z-index-dropdown: 9999 !default;
|
|
|
108
108
|
$ml-z-index-popover: 10000 !default;
|
|
109
109
|
|
|
110
110
|
// ==============================================================================
|
|
111
|
-
// 8. LAYOUT & DIMENSIONS
|
|
111
|
+
// 8. LAYOUT & DIMENSIONS (using --ms-rem for scalability)
|
|
112
112
|
// ==============================================================================
|
|
113
|
-
$ml-input-icon-spacing:
|
|
114
|
-
$ml-counter-offset:
|
|
115
|
-
$ml-option-icon-size:
|
|
116
|
-
$ml-count-clear-size:
|
|
117
|
-
$ml-badge-height:
|
|
118
|
-
$ml-badge-remove-width:
|
|
119
|
-
$ml-popover-close-size:
|
|
113
|
+
$ml-input-icon-spacing: calc(4 * var(--ms-rem)) !default; // 40px
|
|
114
|
+
$ml-counter-offset: calc(3.2 * var(--ms-rem)) !default; // 32px
|
|
115
|
+
$ml-option-icon-size: calc(2 * var(--ms-rem)) !default; // 20px
|
|
116
|
+
$ml-count-clear-size: calc(1.6 * var(--ms-rem)) !default; // 16px
|
|
117
|
+
$ml-badge-height: calc(2.7 * var(--ms-rem)) !default; // 27px
|
|
118
|
+
$ml-badge-remove-width: calc(2.7 * var(--ms-rem)) !default; // 27px
|
|
119
|
+
$ml-popover-close-size: calc(2.4 * var(--ms-rem)) !default; // 24px
|
|
120
120
|
|
|
121
|
-
$ml-options-max-height:
|
|
122
|
-
$ml-selected-popover-width:
|
|
123
|
-
$ml-selected-popover-max-height:
|
|
124
|
-
$ml-selected-popover-body-max-height:
|
|
125
|
-
$ml-tooltip-max-width:
|
|
121
|
+
$ml-options-max-height: calc(32 * var(--ms-rem)) !default; // 320px
|
|
122
|
+
$ml-selected-popover-width: calc(32 * var(--ms-rem)) !default; // 320px
|
|
123
|
+
$ml-selected-popover-max-height: calc(32 * var(--ms-rem)) !default; // 320px
|
|
124
|
+
$ml-selected-popover-body-max-height: calc(28.8 * var(--ms-rem)) !default; // 288px
|
|
125
|
+
$ml-tooltip-max-width: calc(32 * var(--ms-rem)) !default; // 320px
|
|
126
126
|
|
|
127
127
|
// ==============================================================================
|
|
128
128
|
// 9. OPACITY VALUES
|
|
@@ -173,46 +173,48 @@ $ml-input-focus-border-color: $ml-color-accent-base !default;
|
|
|
173
173
|
|
|
174
174
|
$ml-input-border-style: $ml-border-width-base solid $ml-input-border !default;
|
|
175
175
|
$ml-input-border-radius: $ml-border-radius !default;
|
|
176
|
+
$ml-input-border-hover: $ml-color-neutral-dark !default;
|
|
176
177
|
$ml-input-font-size: $ml-font-size-sm !default;
|
|
177
178
|
$ml-input-padding: $ml-input-padding-v $ml-input-padding-h !default;
|
|
178
179
|
$ml-input-padding-right: $ml-input-icon-spacing !default;
|
|
179
180
|
$ml-input-placeholder-color: $ml-color-neutral-dark !default;
|
|
180
181
|
$ml-input-bg-disabled: rgba($ml-color-neutral-dark, $ml-opacity-disabled-bg) !default;
|
|
181
182
|
|
|
182
|
-
// Input Size Variants
|
|
183
|
+
// Input Size Variants (using --ms-rem for scalability)
|
|
183
184
|
// ==============================================================================
|
|
184
|
-
//
|
|
185
|
-
//
|
|
186
|
-
$ms-input-size-xs-font: 12px !default;
|
|
187
|
-
$ms-input-size-xs-padding-v: 4px !default;
|
|
188
|
-
$ms-input-size-xs-padding-h: 8px !default;
|
|
189
|
-
$ms-input-size-xs-height: 24px !default;
|
|
185
|
+
// Heights: xs=31px, sm=33px, md=35px, lg=38px, xl=41px (Pure Admin standard)
|
|
186
|
+
// All values use calc() with --ms-rem for consistent scaling
|
|
190
187
|
|
|
191
|
-
$ms-input-size-
|
|
192
|
-
$ms-input-size-
|
|
193
|
-
$ms-input-size-
|
|
194
|
-
$ms-input-size-
|
|
188
|
+
$ms-input-size-xs-font: calc(1.2 * var(--ms-rem)) !default; // 12px
|
|
189
|
+
$ms-input-size-xs-padding-v: calc(0.4 * var(--ms-rem)) !default; // 4px
|
|
190
|
+
$ms-input-size-xs-padding-h: calc(0.8 * var(--ms-rem)) !default; // 8px
|
|
191
|
+
$ms-input-size-xs-height: calc(3.1 * var(--ms-rem)) !default; // 31px
|
|
195
192
|
|
|
196
|
-
$ms-input-size-
|
|
197
|
-
$ms-input-size-
|
|
198
|
-
$ms-input-size-
|
|
199
|
-
$ms-input-size-
|
|
193
|
+
$ms-input-size-sm-font: calc(1.3 * var(--ms-rem)) !default; // 13px
|
|
194
|
+
$ms-input-size-sm-padding-v: calc(0.5 * var(--ms-rem)) !default; // 5px
|
|
195
|
+
$ms-input-size-sm-padding-h: calc(0.8 * var(--ms-rem)) !default; // 8px
|
|
196
|
+
$ms-input-size-sm-height: calc(3.3 * var(--ms-rem)) !default; // 33px
|
|
200
197
|
|
|
201
|
-
$ms-input-size-
|
|
202
|
-
$ms-input-size-
|
|
203
|
-
$ms-input-size-
|
|
204
|
-
$ms-input-size-
|
|
198
|
+
$ms-input-size-md-font: calc(1.4 * var(--ms-rem)) !default; // 14px
|
|
199
|
+
$ms-input-size-md-padding-v: calc(0.8 * var(--ms-rem)) !default; // 8px
|
|
200
|
+
$ms-input-size-md-padding-h: calc(1.2 * var(--ms-rem)) !default; // 12px
|
|
201
|
+
$ms-input-size-md-height: calc(3.5 * var(--ms-rem)) !default; // 35px
|
|
205
202
|
|
|
206
|
-
$ms-input-size-
|
|
207
|
-
$ms-input-size-
|
|
208
|
-
$ms-input-size-
|
|
209
|
-
$ms-input-size-
|
|
203
|
+
$ms-input-size-lg-font: calc(1.6 * var(--ms-rem)) !default; // 16px
|
|
204
|
+
$ms-input-size-lg-padding-v: calc(1 * var(--ms-rem)) !default; // 10px
|
|
205
|
+
$ms-input-size-lg-padding-h: calc(1.4 * var(--ms-rem)) !default; // 14px
|
|
206
|
+
$ms-input-size-lg-height: calc(3.8 * var(--ms-rem)) !default; // 38px
|
|
207
|
+
|
|
208
|
+
$ms-input-size-xl-font: calc(1.8 * var(--ms-rem)) !default; // 18px
|
|
209
|
+
$ms-input-size-xl-padding-v: calc(1.2 * var(--ms-rem)) !default; // 12px
|
|
210
|
+
$ms-input-size-xl-padding-h: calc(1.6 * var(--ms-rem)) !default; // 16px
|
|
211
|
+
$ms-input-size-xl-height: calc(4.1 * var(--ms-rem)) !default; // 41px
|
|
210
212
|
|
|
211
213
|
// Text Colors
|
|
212
214
|
// ==============================================================================
|
|
213
215
|
$ml-text-primary: $ml-color-neutral-darkest !default;
|
|
214
216
|
$ml-text-secondary: $ml-color-neutral-dark !default;
|
|
215
|
-
$ml-text-
|
|
217
|
+
$ml-text-on-accent: $ml-color-white !default;
|
|
216
218
|
|
|
217
219
|
// Accent Colors
|
|
218
220
|
// ==============================================================================
|
|
@@ -232,9 +234,9 @@ $ml-toggle-right: $ml-input-padding-h !default;
|
|
|
232
234
|
|
|
233
235
|
// Count Badge (in input)
|
|
234
236
|
// ==============================================================================
|
|
235
|
-
$ml-counter-padding: 0.
|
|
237
|
+
$ml-counter-padding: calc(0.2 * var(--ms-rem)) calc(0.4 * var(--ms-rem)) !default; // 2px 4px
|
|
236
238
|
$ml-counter-bg: $ml-accent-color !default;
|
|
237
|
-
$ml-counter-color: $ml-text-
|
|
239
|
+
$ml-counter-color: $ml-text-on-accent !default;
|
|
238
240
|
$ml-counter-font-size: $ml-font-size-xs !default;
|
|
239
241
|
$ml-counter-font-weight: $ml-font-weight-semibold !default;
|
|
240
242
|
$ml-counter-border-radius: $ml-border-radius-sm !default;
|
|
@@ -315,6 +317,15 @@ $ml-option-outline-focused: $ml-focus-outline-width solid $ml-accent-color !defa
|
|
|
315
317
|
$ml-option-bg-matched: rgba($ml-accent-color, 0.08) !default;
|
|
316
318
|
$ml-option-border-matched: 3px solid rgba($ml-accent-color, 0.4) !default;
|
|
317
319
|
$ml-option-bg-selected: rgba($ml-accent-color, $ml-opacity-option-selected-bg) !default;
|
|
320
|
+
$ml-option-color-selected: inherit !default; // Text color when selected (use 'inherit' to keep default, or set explicit color like #ffffff)
|
|
321
|
+
|
|
322
|
+
// Option State Combinations
|
|
323
|
+
// ==============================================================================
|
|
324
|
+
$ml-option-bg-focused-hover: $ml-option-hover-bg !default;
|
|
325
|
+
$ml-option-bg-matched-hover: rgba($ml-accent-color, 0.12) !default;
|
|
326
|
+
$ml-option-bg-selected-focused: rgba($ml-accent-color, 0.15) !default;
|
|
327
|
+
$ml-option-bg-selected-matched: rgba($ml-accent-color, 0.15) !default;
|
|
328
|
+
$ml-option-bg-disabled-selected: rgba($ml-accent-color, $ml-opacity-option-selected-bg) !default;
|
|
318
329
|
|
|
319
330
|
// Option Content
|
|
320
331
|
// ==============================================================================
|
|
@@ -412,11 +423,14 @@ $ml-badge-border-radius: $ml-border-radius !default;
|
|
|
412
423
|
$ml-badge-text-padding: 0 $ml-spacing-sm !default;
|
|
413
424
|
$ml-badge-text-bg: $ml-badge-bg !default;
|
|
414
425
|
$ml-badge-text-color: $ml-accent-color !default;
|
|
426
|
+
$ml-badge-text-border: none !default;
|
|
427
|
+
$ml-badge-text-bg-hover: $ml-badge-bg-hover !default;
|
|
428
|
+
$ml-badge-text-color-hover: $ml-badge-text-color !default;
|
|
415
429
|
|
|
416
430
|
// Badge Remove Button
|
|
417
431
|
// ==============================================================================
|
|
418
432
|
$ml-badge-remove-bg: $ml-accent-color !default;
|
|
419
|
-
$ml-badge-remove-color: $ml-text-
|
|
433
|
+
$ml-badge-remove-color: $ml-text-on-accent !default;
|
|
420
434
|
$ml-badge-remove-border: none !default;
|
|
421
435
|
$ml-badge-remove-font-size: $ml-font-size-xs !default;
|
|
422
436
|
$ml-badge-remove-bg-hover: $ml-accent-color-hover !default;
|
|
@@ -482,14 +496,29 @@ $ml-selected-popover-body-padding: $ml-spacing-sm !default;
|
|
|
482
496
|
|
|
483
497
|
// Checkbox
|
|
484
498
|
// ==============================================================================
|
|
485
|
-
$ml-checkbox-offset: 0.
|
|
499
|
+
$ml-checkbox-offset: calc(0.2 * var(--ms-rem)) !default; // 2px
|
|
486
500
|
$ml-checkbox-margin-top: $ml-checkbox-offset !default;
|
|
487
501
|
$ml-checkbox-margin-right: 0 !default; // Horizontal spacing handled by flexbox gap
|
|
488
502
|
$ml-checkbox-margin-bottom: 0 !default;
|
|
489
503
|
$ml-checkbox-margin-left: 0 !default;
|
|
490
|
-
$ml-checkbox-size:
|
|
504
|
+
$ml-checkbox-size: calc(1.6 * var(--ms-rem)) !default; // 16px - Width and height of checkbox
|
|
491
505
|
$ml-checkbox-scale: 1 !default; // Scale multiplier for checkbox size
|
|
492
506
|
|
|
507
|
+
// Checkbox Styling (custom checkbox appearance)
|
|
508
|
+
$ml-checkbox-bg: #ffffff !default; // White background for better contrast
|
|
509
|
+
$ml-checkbox-border: 1px solid $ml-color-neutral-base !default; // Darker border (#d1d5db)
|
|
510
|
+
$ml-checkbox-border-radius: calc(0.3 * var(--ms-rem)) !default; // 3px
|
|
511
|
+
$ml-checkbox-checked-bg: $ml-accent-color !default;
|
|
512
|
+
$ml-checkbox-checked-border: 1px solid $ml-accent-color !default;
|
|
513
|
+
$ml-checkbox-checkmark-color: $ml-text-on-accent !default;
|
|
514
|
+
$ml-checkbox-hover-border-color: $ml-accent-color !default;
|
|
515
|
+
$ml-checkbox-disabled-bg: $ml-primary-bg-hover !default;
|
|
516
|
+
$ml-checkbox-disabled-border: 1px solid $ml-border-color !default;
|
|
517
|
+
|
|
518
|
+
// Checkbox State Combinations
|
|
519
|
+
$ml-checkbox-checked-bg-hover: $ml-accent-color-hover !default;
|
|
520
|
+
$ml-checkbox-checked-border-color-hover: $ml-accent-color-hover !default;
|
|
521
|
+
|
|
493
522
|
// Placeholder
|
|
494
523
|
// ==============================================================================
|
|
495
524
|
$ml-placeholder-opacity: $ml-opacity-placeholder !default;
|
|
@@ -498,3 +527,11 @@ $ml-placeholder-opacity: $ml-opacity-placeholder !default;
|
|
|
498
527
|
// ==============================================================================
|
|
499
528
|
$ml-disabled-opacity: $ml-opacity-disabled !default;
|
|
500
529
|
$ml-disabled-input-opacity: $ml-opacity-disabled-input !default;
|
|
530
|
+
|
|
531
|
+
// Scrollbar
|
|
532
|
+
// ==============================================================================
|
|
533
|
+
$ml-scrollbar-width: 8px !default;
|
|
534
|
+
$ml-scrollbar-track-bg: transparent !default;
|
|
535
|
+
$ml-scrollbar-thumb-bg: $ml-color-neutral-base !default; // #d1d5db
|
|
536
|
+
$ml-scrollbar-thumb-bg-hover: $ml-color-neutral-dark !default; // #6b7280
|
|
537
|
+
$ml-scrollbar-thumb-border-radius: 4px !default;
|