slim-select 3.0.5 → 3.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/dist/index.d.ts +6 -1
- package/dist/react/index.d.ts +6 -1
- package/dist/react/index.js +183 -129
- package/dist/react/index.umd.js +4 -4
- package/dist/slimselect.cjs.js +1 -1
- package/dist/slimselect.cjs.js.map +1 -1
- package/dist/slimselect.css +1 -1
- package/dist/slimselect.css.map +1 -1
- package/dist/slimselect.es.js +115 -61
- package/dist/slimselect.es.js.map +1 -1
- package/dist/slimselect.iife.js +1 -1
- package/dist/slimselect.iife.js.map +1 -1
- package/dist/slimselect.js +1 -1
- package/dist/slimselect.js.map +1 -1
- package/dist/vue/index.d.ts +6 -1
- package/dist/vue/index.js +106 -52
- package/dist/vue/index.umd.js +1 -1
- package/index.html +1 -1
- package/package.json +1 -1
- package/src/slim-select/index.test.ts +3 -3
- package/src/slim-select/index.ts +23 -2
- package/src/slim-select/render.test.ts +14 -0
- package/src/slim-select/render.ts +5 -4
- package/src/slim-select/select.ts +151 -0
- package/src/slim-select/settings.test.ts +1 -1
- package/src/slim-select/settings.ts +1 -1
- package/src/slim-select/slimselect.scss +52 -15
- package/vite.config.docs.mts +3 -2
|
@@ -3,22 +3,24 @@
|
|
|
3
3
|
--ss-primary-color: #5897fb;
|
|
4
4
|
--ss-bg-color: #ffffff;
|
|
5
5
|
--ss-font-color: #4d4d4d;
|
|
6
|
-
--ss-
|
|
6
|
+
--ss-placeholder-color: #8d8d8d;
|
|
7
7
|
--ss-disabled-color: #dcdee2;
|
|
8
8
|
--ss-border-color: #dcdee2;
|
|
9
9
|
--ss-highlight-color: #fffb8c;
|
|
10
|
+
--ss-focus-color: var(--ss-primary-color);
|
|
10
11
|
--ss-success-color: #00b755;
|
|
11
12
|
--ss-error-color: #dc3545;
|
|
12
|
-
--ss-focus-color: #5897fb;
|
|
13
13
|
|
|
14
14
|
// Heights
|
|
15
|
-
--ss-main-height:
|
|
15
|
+
--ss-main-height: 40px;
|
|
16
16
|
--ss-content-height: 300px;
|
|
17
|
+
--ss-search-height: 40px;
|
|
18
|
+
--ss-option-height: auto;
|
|
17
19
|
|
|
18
20
|
// Spacing
|
|
19
|
-
--ss-spacing-l:
|
|
20
|
-
--ss-spacing-m:
|
|
21
|
-
--ss-spacing-s:
|
|
21
|
+
--ss-spacing-l: 9px;
|
|
22
|
+
--ss-spacing-m: 7px;
|
|
23
|
+
--ss-spacing-s: 5px;
|
|
22
24
|
|
|
23
25
|
// Misc
|
|
24
26
|
--ss-animation-timing: 0.2s;
|
|
@@ -117,7 +119,7 @@
|
|
|
117
119
|
padding: var(--ss-spacing-s) var(--ss-spacing-m) var(--ss-spacing-s) var(--ss-spacing-m);
|
|
118
120
|
margin: auto 0px auto 0px;
|
|
119
121
|
line-height: 1em;
|
|
120
|
-
color: var(--ss-
|
|
122
|
+
color: var(--ss-placeholder-color);
|
|
121
123
|
overflow: hidden;
|
|
122
124
|
text-overflow: ellipsis;
|
|
123
125
|
white-space: nowrap;
|
|
@@ -301,7 +303,7 @@
|
|
|
301
303
|
flex: 0 1 auto;
|
|
302
304
|
display: flex;
|
|
303
305
|
flex-direction: row;
|
|
304
|
-
|
|
306
|
+
border-bottom: 1px solid var(--ss-border-color);
|
|
305
307
|
|
|
306
308
|
input {
|
|
307
309
|
display: inline-flex;
|
|
@@ -310,22 +312,22 @@
|
|
|
310
312
|
flex: 1 1 auto;
|
|
311
313
|
width: 100%;
|
|
312
314
|
min-width: 0px;
|
|
315
|
+
height: var(--ss-search-height);
|
|
313
316
|
padding: var(--ss-spacing-m) var(--ss-spacing-l);
|
|
314
317
|
margin: 0;
|
|
315
|
-
border:
|
|
316
|
-
border-radius: var(--ss-border-radius);
|
|
318
|
+
border: none;
|
|
317
319
|
background-color: var(--ss-bg-color);
|
|
318
320
|
outline: 0;
|
|
319
321
|
text-align: left;
|
|
320
322
|
box-sizing: border-box;
|
|
321
323
|
|
|
322
324
|
&::placeholder {
|
|
323
|
-
color: var(--ss-
|
|
325
|
+
color: var(--ss-placeholder-color);
|
|
324
326
|
vertical-align: middle;
|
|
325
327
|
}
|
|
326
328
|
|
|
327
329
|
&:focus {
|
|
328
|
-
box-shadow:
|
|
330
|
+
box-shadow: none;
|
|
329
331
|
}
|
|
330
332
|
}
|
|
331
333
|
|
|
@@ -377,10 +379,34 @@
|
|
|
377
379
|
}
|
|
378
380
|
|
|
379
381
|
.ss-optgroup {
|
|
382
|
+
.ss-option {
|
|
383
|
+
transition:
|
|
384
|
+
max-height var(--ss-animation-timing) ease,
|
|
385
|
+
opacity var(--ss-animation-timing) ease,
|
|
386
|
+
padding-top var(--ss-animation-timing) ease,
|
|
387
|
+
padding-bottom var(--ss-animation-timing) ease,
|
|
388
|
+
margin-top var(--ss-animation-timing) ease,
|
|
389
|
+
margin-bottom var(--ss-animation-timing) ease;
|
|
390
|
+
}
|
|
391
|
+
|
|
392
|
+
&.ss-open {
|
|
393
|
+
.ss-option {
|
|
394
|
+
max-height: 100px;
|
|
395
|
+
opacity: 1;
|
|
396
|
+
overflow: visible;
|
|
397
|
+
}
|
|
398
|
+
}
|
|
399
|
+
|
|
380
400
|
// If optgroup has close, hide all options
|
|
381
401
|
&.ss-close {
|
|
382
402
|
.ss-option {
|
|
383
|
-
|
|
403
|
+
padding-top: 0 !important;
|
|
404
|
+
padding-bottom: 0 !important;
|
|
405
|
+
margin-top: 0 !important;
|
|
406
|
+
margin-bottom: 0 !important;
|
|
407
|
+
max-height: 0;
|
|
408
|
+
opacity: 0;
|
|
409
|
+
overflow: hidden;
|
|
384
410
|
}
|
|
385
411
|
}
|
|
386
412
|
|
|
@@ -490,16 +516,20 @@
|
|
|
490
516
|
}
|
|
491
517
|
|
|
492
518
|
.ss-option {
|
|
493
|
-
display:
|
|
519
|
+
display: flex;
|
|
520
|
+
align-items: center;
|
|
521
|
+
min-height: var(--ss-option-height);
|
|
494
522
|
padding: var(--ss-spacing-m) var(--ss-spacing-l) var(--ss-spacing-m) var(--ss-spacing-l);
|
|
495
523
|
white-space: normal;
|
|
496
524
|
color: var(--ss-font-color);
|
|
497
525
|
cursor: pointer;
|
|
498
526
|
user-select: none;
|
|
499
527
|
|
|
500
|
-
&:hover {
|
|
528
|
+
&:hover:not(.ss-disabled) {
|
|
501
529
|
color: var(--ss-bg-color);
|
|
502
530
|
background-color: var(--ss-primary-color);
|
|
531
|
+
border-left: 5px solid var(--ss-primary-color);
|
|
532
|
+
transition: border-left var(--ss-animation-timing) ease;
|
|
503
533
|
}
|
|
504
534
|
|
|
505
535
|
&.ss-highlighted,
|
|
@@ -523,5 +553,12 @@
|
|
|
523
553
|
background-color: var(--ss-highlight-color);
|
|
524
554
|
}
|
|
525
555
|
}
|
|
556
|
+
|
|
557
|
+
.ss-search {
|
|
558
|
+
display: flex;
|
|
559
|
+
flex-direction: row;
|
|
560
|
+
align-items: center;
|
|
561
|
+
padding: var(--ss-spacing-m) var(--ss-spacing-l) var(--ss-spacing-m) var(--ss-spacing-l);
|
|
562
|
+
}
|
|
526
563
|
}
|
|
527
564
|
}
|
package/vite.config.docs.mts
CHANGED
|
@@ -4,6 +4,7 @@ import path from 'path'
|
|
|
4
4
|
|
|
5
5
|
// https://vitejs.dev/config/
|
|
6
6
|
export default defineConfig({
|
|
7
|
+
base: '/',
|
|
7
8
|
resolve: {
|
|
8
9
|
alias: {
|
|
9
10
|
'@': path.resolve(__dirname, 'src')
|
|
@@ -15,12 +16,12 @@ export default defineConfig({
|
|
|
15
16
|
build: {
|
|
16
17
|
outDir: 'docs',
|
|
17
18
|
emptyOutDir: true,
|
|
18
|
-
chunkSizeWarningLimit: 12000,
|
|
19
19
|
rollupOptions: {
|
|
20
20
|
output: {
|
|
21
21
|
entryFileNames: `assets/[name].js`,
|
|
22
22
|
chunkFileNames: `assets/[name].js`,
|
|
23
|
-
assetFileNames: `assets/[name].[ext]
|
|
23
|
+
assetFileNames: `assets/[name].[ext]`,
|
|
24
|
+
manualChunks: () => 'index'
|
|
24
25
|
}
|
|
25
26
|
}
|
|
26
27
|
},
|