@referralgps/selectra 1.0.5 → 1.0.7
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 +19 -0
- package/dist/selectra.css +1 -1
- package/dist/selectra.es.js +39 -9
- package/dist/selectra.es.js.map +1 -1
- package/dist/selectra.iife.js +2 -2
- package/dist/selectra.iife.js.map +1 -1
- package/dist/selectra.umd.js +2 -2
- package/dist/selectra.umd.js.map +1 -1
- package/package.json +1 -1
- package/src-alpine/README.md +19 -0
- package/src-alpine/index.d.ts +2 -0
- package/src-alpine/index.js +10 -4
- package/src-alpine/selectize.js +37 -3
- package/src-alpine/styles/selectra.css +41 -6
package/README.md
CHANGED
|
@@ -41,6 +41,7 @@ Selectra is a modern rewrite of [Selectize.js](https://github.com/selectize/sele
|
|
|
41
41
|
- **Accessible** — focus management, label association, keyboard-first
|
|
42
42
|
- **RTL Support** — auto-detected from CSS `direction`
|
|
43
43
|
- **Tailwind CSS** — fully styled with utilities, trivially customizable
|
|
44
|
+
- **Selected Count Mode** — show a count badge instead of tags in multi-select, with checkmarks on selected options
|
|
44
45
|
- **Lightweight** — ~25 KB gzipped JS, zero runtime dependencies beyond Alpine.js
|
|
45
46
|
|
|
46
47
|
---
|
|
@@ -105,6 +106,23 @@ Add `x-data="selectra({...})"` and `x-selectra` to any element. The template is
|
|
|
105
106
|
})" x-selectra></div>
|
|
106
107
|
```
|
|
107
108
|
|
|
109
|
+
#### Multi Select with Count Badge
|
|
110
|
+
|
|
111
|
+
Show the number of selected items as a badge instead of individual tags. Selected options display a ✓ checkmark in the dropdown and can be toggled on/off by clicking.
|
|
112
|
+
|
|
113
|
+
```html
|
|
114
|
+
<div x-data="selectra({
|
|
115
|
+
mode: 'multi',
|
|
116
|
+
showSelectedCount: true,
|
|
117
|
+
placeholder: 'Select countries...',
|
|
118
|
+
options: [
|
|
119
|
+
{ value: 'us', text: 'United States' },
|
|
120
|
+
{ value: 'ca', text: 'Canada' },
|
|
121
|
+
{ value: 'mx', text: 'Mexico' },
|
|
122
|
+
]
|
|
123
|
+
})" x-selectra></div>
|
|
124
|
+
```
|
|
125
|
+
|
|
108
126
|
#### Native `<select>` Enhancement
|
|
109
127
|
|
|
110
128
|
Enhance a standard `<select>` element — options are read automatically:
|
|
@@ -143,6 +161,7 @@ Enhance a standard `<select>` element — options are read automatically:
|
|
|
143
161
|
| `selectOnTab` | `boolean` | `true` | Tab selects active option |
|
|
144
162
|
| `closeAfterSelect` | `boolean` | `false` | Close dropdown after selection |
|
|
145
163
|
| `hideSelected` | `boolean \| null` | auto | Hide selected from dropdown |
|
|
164
|
+
| `showSelectedCount` | `boolean` | `false` | Show count badge instead of tags in multi-select |
|
|
146
165
|
| `delimiter` | `string` | `','` | Value separator |
|
|
147
166
|
| `splitOn` | `RegExp \| string` | `null` | Regex for splitting pasted values |
|
|
148
167
|
| `diacritics` | `boolean` | `true` | International character support |
|
package/dist/selectra.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.selectra-control{position:relative;width:100%;font-size:.875rem;line-height:1.25rem}.selectra-control.is-disabled{pointer-events:none;opacity:.5}.selectra-input{position:relative;display:flex;min-height:38px;width:100%;cursor:text;flex-wrap:wrap;align-items:center;gap:.25rem;border-radius:.5rem;border-width:1px;--tw-border-opacity: 1;border-color:rgb(209 213 219 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));padding:.375rem .75rem;--tw-text-opacity: 1;color:rgb(17 24 39 / var(--tw-text-opacity, 1));transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.selectra-input:hover{--tw-border-opacity: 1;border-color:rgb(156 163 175 / var(--tw-border-opacity, 1))}.selectra-input.is-focused{--tw-border-opacity: 1;border-color:rgb(59 130 246 / var(--tw-border-opacity, 1));outline:2px solid transparent;outline-offset:2px;--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);--tw-ring-color: rgb(59 130 246 / .2)}.selectra-input.is-invalid{--tw-border-opacity: 1;border-color:rgb(239 68 68 / var(--tw-border-opacity, 1));--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);--tw-ring-color: rgb(239 68 68 / .2)}.selectra-input.is-locked{cursor:default;--tw-bg-opacity: 1;background-color:rgb(249 250 251 / var(--tw-bg-opacity, 1))}.selectra-input.is-single{cursor:pointer;padding-right:2rem}.selectra-input.is-single.has-items .selectra-search{position:absolute;top:0;right:0;bottom:0;left:0;padding:.375rem .75rem}.selectra-search{margin:0;min-width:60px;flex:1 1 0%;border-style:none;background-color:transparent;padding:0;--tw-text-opacity: 1;color:rgb(17 24 39 / var(--tw-text-opacity, 1))}.selectra-search::-moz-placeholder{--tw-placeholder-opacity: 1;color:rgb(156 163 175 / var(--tw-placeholder-opacity, 1))}.selectra-search::placeholder{--tw-placeholder-opacity: 1;color:rgb(156 163 175 / var(--tw-placeholder-opacity, 1))}.selectra-search{outline:2px solid transparent;outline-offset:2px}.selectra-search:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.selectra-input.is-single .selectra-search{width:100%;min-width:0px}.selectra-item{display:inline-flex}.selectra-item{align-items:center;gap:.25rem;border-radius:.375rem;border-width:1px;--tw-border-opacity: 1;border-color:rgb(191 219 254 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(239 246 255 / var(--tw-bg-opacity, 1));padding:.125rem .5rem;font-size:.875rem;line-height:1.25rem;line-height:1.375;--tw-text-opacity: 1;color:rgb(29 78 216 / var(--tw-text-opacity, 1));animation:fade-in .15s ease-out}.selectra-item .selectra-item-remove{margin-right:-.125rem;margin-left:.125rem;display:inline-flex;height:1rem;width:1rem;cursor:pointer;align-items:center;justify-content:center;border-radius:9999px;--tw-text-opacity: 1;color:rgb(96 165 250 / var(--tw-text-opacity, 1));transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.1s}.selectra-item .selectra-item-remove:hover{--tw-bg-opacity: 1;background-color:rgb(219 234 254 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(37 99 235 / var(--tw-text-opacity, 1))}.selectra-single-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;--tw-text-opacity: 1;color:rgb(17 24 39 / var(--tw-text-opacity, 1))}.selectra-arrow{pointer-events:none;position:absolute;right:.625rem;top:50%;height:1rem;width:1rem;--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity, 1));transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s}.selectra-arrow.is-open{--tw-rotate: 180deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.selectra-dropdown{position:absolute;z-index:50;margin-top:.25rem;width:100%}.selectra-dropdown{overflow:hidden;border-radius:.5rem;border-width:1px;--tw-border-opacity: 1;border-color:rgb(229 231 235 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);animation:dropdown-in .15s ease-out}.selectra-dropdown.is-top{bottom:100%;top:auto;margin-bottom:.25rem;margin-top:0}.selectra-dropdown-content{max-height:15rem;overflow-y:auto;overscroll-behavior:contain;padding-top:.25rem;padding-bottom:.25rem}.selectra-option{cursor:pointer;padding:.5rem .75rem;line-height:1.375;--tw-text-opacity: 1;color:rgb(55 65 81 / var(--tw-text-opacity, 1));transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:75ms}.selectra-option:hover,.selectra-option.is-active{--tw-bg-opacity: 1;background-color:rgb(59 130 246 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.selectra-option.is-active .highlight{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.selectra-option.is-disabled{cursor:not-allowed;opacity:.5}.selectra-option.is-selected{--tw-bg-opacity: 1;background-color:rgb(239 246 255 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(29 78 216 / var(--tw-text-opacity, 1))}.selectra-option.is-selected.is-active{--tw-bg-opacity: 1;background-color:rgb(59 130 246 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.selectra-option-create{cursor:pointer;border-top-width:1px;--tw-border-opacity: 1;border-color:rgb(243 244 246 / var(--tw-border-opacity, 1));padding:.5rem .75rem;--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity, 1));transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:75ms}.selectra-option-create:hover,.selectra-option-create.is-active{--tw-bg-opacity: 1;background-color:rgb(59 130 246 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.selectra-no-results{padding:.75rem;text-align:center;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.selectra-loading{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.75rem;text-align:center;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.selectra-spinner{height:1rem;width:1rem}@keyframes spin{to{transform:rotate(360deg)}}.selectra-spinner{animation:spin 1s linear infinite;border-radius:9999px;border-width:2px;border-color:rgb(209 213 219 / var(--tw-border-opacity, 1));--tw-border-opacity: 1;border-top-color:rgb(59 130 246 / var(--tw-border-opacity, 1))}.selectra-optgroup-header{border-bottom-width:1px;--tw-border-opacity: 1;border-color:rgb(243 244 246 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(249 250 251 / var(--tw-bg-opacity, 1));padding:.375rem .75rem;font-size:.75rem;line-height:1rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}.selectra-input.is-single .selectra-clear-button{right:2rem}.selectra-max-badge{margin-left:.25rem;white-space:nowrap;font-size:.75rem;line-height:1rem;--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.highlight{font-weight:600;color:inherit}.mx-auto{margin-left:auto;margin-right:auto}.mb-1{margin-bottom:.25rem}.mb-12{margin-bottom:3rem}.mb-2{margin-bottom:.5rem}.mb-4{margin-bottom:1rem}.mt-16{margin-top:4rem}.mt-4{margin-top:1rem}.block{display:block}.inline-flex{display:inline-flex}.hidden{display:none}.min-h-screen{min-height:100vh}.max-w-4xl{max-width:56rem}.max-w-md{max-width:28rem}.-translate-y-1{--tw-translate-y: -.25rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-y-0{--tw-translate-y: 0px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.items-center{align-items:center}.rounded{border-radius:.25rem}.rounded-lg{border-radius:.5rem}.border{border-width:1px}.border-t{border-top-width:1px}.border-blue-200{--tw-border-opacity: 1;border-color:rgb(191 219 254 / var(--tw-border-opacity, 1))}.border-gray-200{--tw-border-opacity: 1;border-color:rgb(229 231 235 / var(--tw-border-opacity, 1))}.bg-blue-100{--tw-bg-opacity: 1;background-color:rgb(219 234 254 / var(--tw-bg-opacity, 1))}.bg-blue-50{--tw-bg-opacity: 1;background-color:rgb(239 246 255 / var(--tw-bg-opacity, 1))}.bg-gray-50{--tw-bg-opacity: 1;background-color:rgb(249 250 251 / var(--tw-bg-opacity, 1))}.p-4{padding:1rem}.px-1{padding-left:.25rem;padding-right:.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-12{padding-top:3rem;padding-bottom:3rem}.pt-8{padding-top:2rem}.text-center{text-align:center}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-semibold{font-weight:600}.text-blue-800{--tw-text-opacity: 1;color:rgb(30 64 175 / var(--tw-text-opacity, 1))}.text-gray-400{--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.text-gray-500{--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}.text-gray-800{--tw-text-opacity: 1;color:rgb(31 41 55 / var(--tw-text-opacity, 1))}.text-gray-900{--tw-text-opacity: 1;color:rgb(17 24 39 / var(--tw-text-opacity, 1))}.text-inherit{color:inherit}.opacity-0{opacity:0}.opacity-100{opacity:1}.blur{--tw-blur: blur(8px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-100{transition-duration:.1s}.duration-150{transition-duration:.15s}.ease-in{transition-timing-function:cubic-bezier(.4,0,1,1)}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}@keyframes fade-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes dropdown-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.selectra-dropdown-content::-webkit-scrollbar{width:6px}.selectra-dropdown-content::-webkit-scrollbar-track{background:transparent}.selectra-dropdown-content::-webkit-scrollbar-thumb{border-radius:9999px;--tw-bg-opacity: 1;background-color:rgb(229 231 235 / var(--tw-bg-opacity, 1))}.selectra-dropdown-content::-webkit-scrollbar-thumb:hover{--tw-bg-opacity: 1;background-color:rgb(209 213 219 / var(--tw-bg-opacity, 1))}
|
|
1
|
+
*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.selectra-control{position:relative;width:100%;font-size:.875rem;line-height:1.25rem}.selectra-control.is-disabled{pointer-events:none;opacity:.5}.selectra-input{position:relative;display:flex;min-height:38px;width:100%;cursor:text;flex-wrap:wrap;align-items:center;gap:.25rem;border-radius:.5rem;border-width:1px;--tw-border-opacity: 1;border-color:rgb(209 213 219 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));padding:.375rem .75rem;--tw-text-opacity: 1;color:rgb(17 24 39 / var(--tw-text-opacity, 1));transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.selectra-input:hover{--tw-border-opacity: 1;border-color:rgb(156 163 175 / var(--tw-border-opacity, 1))}.selectra-input.is-focused{--tw-border-opacity: 1;border-color:rgb(59 130 246 / var(--tw-border-opacity, 1));outline:2px solid transparent;outline-offset:2px;--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);--tw-ring-color: rgb(59 130 246 / .2)}.selectra-input.is-invalid{--tw-border-opacity: 1;border-color:rgb(239 68 68 / var(--tw-border-opacity, 1));--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);--tw-ring-color: rgb(239 68 68 / .2)}.selectra-input.is-locked{cursor:default;--tw-bg-opacity: 1;background-color:rgb(249 250 251 / var(--tw-bg-opacity, 1))}.selectra-input.is-single{cursor:pointer;padding-right:2rem}.selectra-input.is-single.has-items .selectra-search{position:absolute;top:0;right:0;bottom:0;left:0;padding:.375rem .75rem}.selectra-search{margin:0;min-width:60px;flex:1 1 0%;border-style:none;background-color:transparent;padding:0;--tw-text-opacity: 1;color:rgb(17 24 39 / var(--tw-text-opacity, 1))}.selectra-search::-moz-placeholder{--tw-placeholder-opacity: 1;color:rgb(156 163 175 / var(--tw-placeholder-opacity, 1))}.selectra-search::placeholder{--tw-placeholder-opacity: 1;color:rgb(156 163 175 / var(--tw-placeholder-opacity, 1))}.selectra-search{outline:2px solid transparent;outline-offset:2px}.selectra-search:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.selectra-input.is-single .selectra-search{width:100%;min-width:0px}.selectra-item{display:inline-flex}.selectra-item{align-items:center;gap:.25rem;border-radius:.375rem;border-width:1px;--tw-border-opacity: 1;border-color:rgb(191 219 254 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(239 246 255 / var(--tw-bg-opacity, 1));padding:.125rem .5rem;font-size:.875rem;line-height:1.25rem;line-height:1.375;--tw-text-opacity: 1;color:rgb(29 78 216 / var(--tw-text-opacity, 1));animation:fade-in .15s ease-out}.selectra-item .selectra-item-remove{margin-right:-.125rem;margin-left:.125rem;display:inline-flex;height:1rem;width:1rem;cursor:pointer;align-items:center;justify-content:center;border-radius:9999px;--tw-text-opacity: 1;color:rgb(96 165 250 / var(--tw-text-opacity, 1));transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.1s}.selectra-item .selectra-item-remove:hover{--tw-bg-opacity: 1;background-color:rgb(219 234 254 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(37 99 235 / var(--tw-text-opacity, 1))}.selectra-single-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;--tw-text-opacity: 1;color:rgb(17 24 39 / var(--tw-text-opacity, 1))}.selectra-arrow{pointer-events:none;position:absolute;right:.625rem;top:50%;height:1rem;width:1rem;--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity, 1));transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s}.selectra-arrow.is-open{--tw-rotate: 180deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.selectra-dropdown{position:absolute;z-index:50;margin-top:.25rem;width:100%}.selectra-dropdown{overflow:hidden;border-radius:.5rem;border-width:1px;--tw-border-opacity: 1;border-color:rgb(229 231 235 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);animation:dropdown-in .15s ease-out}.selectra-dropdown.is-top{bottom:100%;top:auto;margin-bottom:.25rem;margin-top:0}.selectra-dropdown-content{max-height:15rem;overflow-y:auto;overscroll-behavior:contain;padding-top:.25rem;padding-bottom:.25rem}.selectra-option:hover,.selectra-option.is-active{--tw-bg-opacity: 1;background-color:rgb(59 130 246 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.selectra-option.is-active .highlight{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.selectra-option.is-disabled{cursor:not-allowed;opacity:.5}.selectra-option.is-selected{--tw-bg-opacity: 1;background-color:rgb(239 246 255 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(29 78 216 / var(--tw-text-opacity, 1))}.selectra-option.is-selected.is-active{--tw-bg-opacity: 1;background-color:rgb(59 130 246 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.selectra-option-create{cursor:pointer;border-top-width:1px;--tw-border-opacity: 1;border-color:rgb(243 244 246 / var(--tw-border-opacity, 1));padding:.5rem .75rem;--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity, 1));transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:75ms}.selectra-option-create:hover,.selectra-option-create.is-active{--tw-bg-opacity: 1;background-color:rgb(59 130 246 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.selectra-no-results{padding:.75rem;text-align:center;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.selectra-loading{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.75rem;text-align:center;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.selectra-spinner{height:1rem;width:1rem}@keyframes spin{to{transform:rotate(360deg)}}.selectra-spinner{animation:spin 1s linear infinite;border-radius:9999px;border-width:2px;border-color:rgb(209 213 219 / var(--tw-border-opacity, 1));--tw-border-opacity: 1;border-top-color:rgb(59 130 246 / var(--tw-border-opacity, 1))}.selectra-optgroup-header{border-bottom-width:1px;--tw-border-opacity: 1;border-color:rgb(243 244 246 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(249 250 251 / var(--tw-bg-opacity, 1));padding:.375rem .75rem;font-size:.75rem;line-height:1rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}.selectra-input.is-single .selectra-clear-button{right:2rem}.selectra-max-badge{margin-left:.25rem;white-space:nowrap;font-size:.75rem;line-height:1rem;--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.selectra-selected-count{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;white-space:nowrap;border-radius:.375rem;--tw-bg-opacity: 1;background-color:rgb(243 244 246 / var(--tw-bg-opacity, 1));padding:.125rem .5rem;font-size:.75rem;line-height:1rem;font-weight:700;--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.selectra-input.has-items .selectra-selected-count{--tw-bg-opacity: 1;background-color:rgb(219 234 254 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(29 78 216 / var(--tw-text-opacity, 1))}.selectra-search-with-count{min-width:40px;flex:1 1 0%;font-weight:500;text-transform:capitalize;--tw-text-opacity: 1;color:rgb(17 24 39 / var(--tw-text-opacity, 1))}.selectra-search-with-count::-moz-placeholder{--tw-placeholder-opacity: 1;color:rgb(156 163 175 / var(--tw-placeholder-opacity, 1))}.selectra-search-with-count::placeholder{--tw-placeholder-opacity: 1;color:rgb(156 163 175 / var(--tw-placeholder-opacity, 1))}.selectra-input.has-items .selectra-search-with-count::-moz-placeholder{--tw-placeholder-opacity: 1;color:rgb(59 130 246 / var(--tw-placeholder-opacity, 1))}.selectra-input.has-items .selectra-search-with-count::placeholder{--tw-placeholder-opacity: 1;color:rgb(59 130 246 / var(--tw-placeholder-opacity, 1))}.selectra-option-tick{margin-right:.375rem;display:inline-flex;height:1rem;width:1rem;flex-shrink:0;align-items:center;justify-content:center;font-size:.875rem;line-height:1.25rem;font-weight:700;--tw-text-opacity: 1;color:rgb(37 99 235 / var(--tw-text-opacity, 1))}.selectra-option.is-active .selectra-option-tick{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.selectra-option{display:flex;cursor:pointer;align-items:center;padding:.5rem .75rem;line-height:1.375;--tw-text-opacity: 1;color:rgb(55 65 81 / var(--tw-text-opacity, 1));transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:75ms}.highlight{font-weight:600;color:inherit}.mx-auto{margin-left:auto;margin-right:auto}.mb-1{margin-bottom:.25rem}.mb-12{margin-bottom:3rem}.mb-2{margin-bottom:.5rem}.mb-4{margin-bottom:1rem}.mt-16{margin-top:4rem}.mt-4{margin-top:1rem}.block{display:block}.inline-flex{display:inline-flex}.hidden{display:none}.min-h-screen{min-height:100vh}.max-w-4xl{max-width:56rem}.max-w-md{max-width:28rem}.-translate-y-1{--tw-translate-y: -.25rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-y-0{--tw-translate-y: 0px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.items-center{align-items:center}.rounded{border-radius:.25rem}.rounded-lg{border-radius:.5rem}.border{border-width:1px}.border-t{border-top-width:1px}.border-blue-200{--tw-border-opacity: 1;border-color:rgb(191 219 254 / var(--tw-border-opacity, 1))}.border-gray-200{--tw-border-opacity: 1;border-color:rgb(229 231 235 / var(--tw-border-opacity, 1))}.bg-blue-100{--tw-bg-opacity: 1;background-color:rgb(219 234 254 / var(--tw-bg-opacity, 1))}.bg-blue-50{--tw-bg-opacity: 1;background-color:rgb(239 246 255 / var(--tw-bg-opacity, 1))}.bg-gray-50{--tw-bg-opacity: 1;background-color:rgb(249 250 251 / var(--tw-bg-opacity, 1))}.p-4{padding:1rem}.px-1{padding-left:.25rem;padding-right:.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-12{padding-top:3rem;padding-bottom:3rem}.pt-8{padding-top:2rem}.text-center{text-align:center}.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-normal{font-weight:400}.font-semibold{font-weight:600}.text-blue-800{--tw-text-opacity: 1;color:rgb(30 64 175 / var(--tw-text-opacity, 1))}.text-gray-400{--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.text-gray-500{--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}.text-gray-800{--tw-text-opacity: 1;color:rgb(31 41 55 / var(--tw-text-opacity, 1))}.text-gray-900{--tw-text-opacity: 1;color:rgb(17 24 39 / var(--tw-text-opacity, 1))}.text-inherit{color:inherit}.opacity-0{opacity:0}.opacity-100{opacity:1}.blur{--tw-blur: blur(8px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-100{transition-duration:.1s}.duration-150{transition-duration:.15s}.ease-in{transition-timing-function:cubic-bezier(.4,0,1,1)}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}@keyframes fade-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes dropdown-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.selectra-dropdown-content::-webkit-scrollbar{width:6px}.selectra-dropdown-content::-webkit-scrollbar-track{background:transparent}.selectra-dropdown-content::-webkit-scrollbar-thumb{border-radius:9999px;--tw-bg-opacity: 1;background-color:rgb(229 231 235 / var(--tw-bg-opacity, 1))}.selectra-dropdown-content::-webkit-scrollbar-thumb:hover{--tw-bg-opacity: 1;background-color:rgb(209 213 219 / var(--tw-bg-opacity, 1))}
|
package/dist/selectra.es.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/*! Selectra v1.0.
|
|
1
|
+
/*! Selectra v1.0.7 | Apache-2.0 License */
|
|
2
2
|
const DIACRITICS = {
|
|
3
3
|
a: "[aḀḁĂăÂâǍǎȺⱥȦȧẠạÄäÀàÁáĀāÃãÅåąĄÃąĄ]",
|
|
4
4
|
b: "[b␢βΒB฿𐌁ᛒ]",
|
|
@@ -335,6 +335,7 @@ const DEFAULTS = {
|
|
|
335
335
|
// 'single' | 'multi' — auto-detected
|
|
336
336
|
search: true,
|
|
337
337
|
showArrow: true,
|
|
338
|
+
showSelectedCount: false,
|
|
338
339
|
valueField: "value",
|
|
339
340
|
labelField: "text",
|
|
340
341
|
disabledField: "disabled",
|
|
@@ -450,6 +451,10 @@ function createSelectizeComponent(userConfig = {}) {
|
|
|
450
451
|
if (this.items.length > 0 && this.isSingle) return "";
|
|
451
452
|
return this._config.placeholder || "";
|
|
452
453
|
},
|
|
454
|
+
get selectedCountText() {
|
|
455
|
+
const count = this.items.length;
|
|
456
|
+
return count;
|
|
457
|
+
},
|
|
453
458
|
get currentValueText() {
|
|
454
459
|
if (!this.isSingle || !this.items.length) return "";
|
|
455
460
|
const opt = this.options[hashKey(this.items[0])];
|
|
@@ -462,14 +467,19 @@ function createSelectizeComponent(userConfig = {}) {
|
|
|
462
467
|
this._sourceEl = this.$el.querySelector('select, input[type="text"], input[type="hidden"]');
|
|
463
468
|
if (this._sourceEl && isSelectElement(this._sourceEl)) {
|
|
464
469
|
const parsed = readSelectOptions(this._sourceEl);
|
|
470
|
+
const placeholderOpt = parsed.options.find((o) => o.value === "");
|
|
471
|
+
if (placeholderOpt && !this._config.placeholder) {
|
|
472
|
+
this._config.placeholder = placeholderOpt.text;
|
|
473
|
+
}
|
|
474
|
+
const realSelected = parsed.selectedValues.filter((v) => v !== "");
|
|
465
475
|
const configOptions = this._config.options || [];
|
|
466
476
|
const allOptions = [...parsed.options, ...configOptions];
|
|
467
477
|
this._registerOptions(allOptions);
|
|
468
478
|
for (const og of parsed.optgroups) {
|
|
469
479
|
this.optgroups[og.value] = og;
|
|
470
480
|
}
|
|
471
|
-
if (
|
|
472
|
-
this.items = [...
|
|
481
|
+
if (realSelected.length) {
|
|
482
|
+
this.items = [...realSelected];
|
|
473
483
|
}
|
|
474
484
|
if (!userConfig.mode) {
|
|
475
485
|
this._config.mode = this._sourceEl.multiple ? "multi" : "single";
|
|
@@ -499,7 +509,10 @@ function createSelectizeComponent(userConfig = {}) {
|
|
|
499
509
|
this._config.maxItems = 1;
|
|
500
510
|
}
|
|
501
511
|
if (this._config.hideSelected === null) {
|
|
502
|
-
this._config.hideSelected = this._config.mode === "multi";
|
|
512
|
+
this._config.hideSelected = this._config.mode === "multi" && !this._config.showSelectedCount;
|
|
513
|
+
}
|
|
514
|
+
if (this._config.showSelectedCount) {
|
|
515
|
+
this._config.hideSelected = false;
|
|
503
516
|
}
|
|
504
517
|
this._sifter = new Sifter(this.options, { diacritics: this._config.diacritics });
|
|
505
518
|
this._initPlugins();
|
|
@@ -912,6 +925,17 @@ function createSelectizeComponent(userConfig = {}) {
|
|
|
912
925
|
if (!option) return;
|
|
913
926
|
if (option[this._config.disabledField]) return;
|
|
914
927
|
const value = option[this._config.valueField];
|
|
928
|
+
if (value === "") {
|
|
929
|
+
this.clear();
|
|
930
|
+
this.close();
|
|
931
|
+
this.isFocused = false;
|
|
932
|
+
if (this.$refs.searchInput) this.$refs.searchInput.blur();
|
|
933
|
+
return;
|
|
934
|
+
}
|
|
935
|
+
if (this._config.showSelectedCount && this.isMultiple && this.isSelected(option)) {
|
|
936
|
+
this.removeItem(value);
|
|
937
|
+
return;
|
|
938
|
+
}
|
|
915
939
|
this.addItem(value);
|
|
916
940
|
this.query = "";
|
|
917
941
|
if (this.isSingle) {
|
|
@@ -1334,11 +1358,15 @@ const SELECTRA_TEMPLATE = `
|
|
|
1334
1358
|
<div class="selectra-control" :class="{'is-disabled': isDisabled}">
|
|
1335
1359
|
<div @click="focus()" class="selectra-input"
|
|
1336
1360
|
:class="{'is-focused': isFocused, 'is-invalid': isInvalid, 'is-locked': isLocked, 'is-single': isSingle, 'has-items': items.length > 0}">
|
|
1361
|
+
<span x-show="_config.showSelectedCount && isMultiple"
|
|
1362
|
+
class="selectra-selected-count">
|
|
1363
|
+
<span x-text="selectedCountText"></span>
|
|
1364
|
+
</span>
|
|
1337
1365
|
<span x-show="isSingle && items.length && !isFocused"
|
|
1338
1366
|
x-text="currentValueText"
|
|
1339
1367
|
class="selectra-single-value"></span>
|
|
1340
1368
|
<template x-for="val in items" :key="val">
|
|
1341
|
-
<span x-show="isMultiple" class="selectra-item">
|
|
1369
|
+
<span x-show="isMultiple && !_config.showSelectedCount" class="selectra-item">
|
|
1342
1370
|
<span x-html="options[val] ? renderItem(options[val]) : val"></span>
|
|
1343
1371
|
<span @click.stop="removeItem(val)" class="selectra-item-remove">×</span>
|
|
1344
1372
|
</span>
|
|
@@ -1352,6 +1380,7 @@ const SELECTRA_TEMPLATE = `
|
|
|
1352
1380
|
@paste="onPaste($event)"
|
|
1353
1381
|
:placeholder="placeholderText"
|
|
1354
1382
|
x-show="(isSingle || !isFull) && (isMultiple || isFocused || !items.length)"
|
|
1383
|
+
:class="{'selectra-search-with-count': _config.showSelectedCount && isMultiple}"
|
|
1355
1384
|
class="selectra-search">
|
|
1356
1385
|
<span x-show="isFull && isMultiple" class="selectra-max-badge">Max reached</span>
|
|
1357
1386
|
<div x-show="isLoading && !isOpen" class="selectra-spinner"></div>
|
|
@@ -1376,9 +1405,10 @@ const SELECTRA_TEMPLATE = `
|
|
|
1376
1405
|
<div @click="selectOption(option)"
|
|
1377
1406
|
@mouseenter="activeIndex = group.offset + idx"
|
|
1378
1407
|
:data-active="activeIndex === group.offset + idx"
|
|
1379
|
-
:class="{'is-active': activeIndex === group.offset + idx}"
|
|
1380
|
-
class="selectra-option"
|
|
1381
|
-
|
|
1408
|
+
:class="{'is-active': activeIndex === group.offset + idx, 'is-selected': isSelected(option)}"
|
|
1409
|
+
class="selectra-option">
|
|
1410
|
+
<span x-show="_config.showSelectedCount && isMultiple && isSelected(option)" class="selectra-option-tick">✓</span>
|
|
1411
|
+
<span x-html="renderOption(option)"></span>
|
|
1382
1412
|
</div>
|
|
1383
1413
|
</template>
|
|
1384
1414
|
</div>
|
|
@@ -1418,7 +1448,7 @@ function SelectraPlugin(Alpine) {
|
|
|
1418
1448
|
}
|
|
1419
1449
|
});
|
|
1420
1450
|
}
|
|
1421
|
-
SelectraPlugin.version = "1.0.
|
|
1451
|
+
SelectraPlugin.version = "1.0.7";
|
|
1422
1452
|
SelectraPlugin.template = SELECTRA_TEMPLATE;
|
|
1423
1453
|
export {
|
|
1424
1454
|
DEFAULTS,
|