sprintify-ui 0.8.45 → 0.8.47
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/sprintify-ui.es.js +25599 -26278
- package/dist/tailwindcss/input.js +2 -2
- package/dist/types/components/BaseAutocomplete.vue.d.ts +11 -0
- package/dist/types/components/BaseAutocompleteFetch.vue.d.ts +18 -2
- package/dist/types/components/BaseBelongsTo.vue.d.ts +18 -2
- package/dist/types/index.d.ts +2 -2
- package/package.json +4 -1
- package/src/components/BaseAutocomplete.vue +37 -7
- package/src/components/BaseAutocompleteDrawer.vue +40 -30
- package/src/components/BaseDropdownAutocomplete.stories.js +10 -4
- package/src/components/BaseDropdownAutocomplete.vue +2 -2
- package/src/components/BaseMediaListItem.vue +3 -2
- package/src/lang/en.json +3 -3
- package/src/lang/fr.json +3 -3
|
@@ -9,12 +9,12 @@ export default function ({ addComponents, theme }) {
|
|
|
9
9
|
'.input-focus': {
|
|
10
10
|
'border-color': `rgba(${(blueColor)}, 0.6)`,
|
|
11
11
|
'zIndex': 1,
|
|
12
|
-
'boxShadow': `rgba(${(blueColor)}, 0.2) 0px 0px 0px 4px
|
|
12
|
+
'boxShadow': `rgba(${(blueColor)}, 0.2) 0px 0px 0px 4px;`,
|
|
13
13
|
},
|
|
14
14
|
'.input-focus-error': {
|
|
15
15
|
'border-color': `rgba(${(redColor)}, 0.6)`,
|
|
16
16
|
'zIndex': 1,
|
|
17
|
-
'boxShadow': `rgba(${(redColor)}, 0.2) 0px 0px 0px 4px
|
|
17
|
+
'boxShadow': `rgba(${(redColor)}, 0.2) 0px 0px 0px 4px;`,
|
|
18
18
|
},
|
|
19
19
|
'.input-rounded': {
|
|
20
20
|
'border-radius': theme('borderRadius.md'),
|
|
@@ -635,6 +635,7 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
|
|
|
635
635
|
default: boolean;
|
|
636
636
|
type: BooleanConstructor;
|
|
637
637
|
};
|
|
638
|
+
/** Inline dropdown. This is useful for BaseDropdownAutocomplete */
|
|
638
639
|
inline: {
|
|
639
640
|
default: boolean;
|
|
640
641
|
type: BooleanConstructor;
|
|
@@ -676,6 +677,10 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
|
|
|
676
677
|
default: undefined;
|
|
677
678
|
type: PropType<string | string[]>;
|
|
678
679
|
};
|
|
680
|
+
twSelect: {
|
|
681
|
+
default: undefined;
|
|
682
|
+
type: PropType<string | string[]>;
|
|
683
|
+
};
|
|
679
684
|
}>, {
|
|
680
685
|
focus: typeof focus;
|
|
681
686
|
blur: typeof blur;
|
|
@@ -743,6 +748,7 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
|
|
|
743
748
|
default: boolean;
|
|
744
749
|
type: BooleanConstructor;
|
|
745
750
|
};
|
|
751
|
+
/** Inline dropdown. This is useful for BaseDropdownAutocomplete */
|
|
746
752
|
inline: {
|
|
747
753
|
default: boolean;
|
|
748
754
|
type: BooleanConstructor;
|
|
@@ -784,6 +790,10 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
|
|
|
784
790
|
default: undefined;
|
|
785
791
|
type: PropType<string | string[]>;
|
|
786
792
|
};
|
|
793
|
+
twSelect: {
|
|
794
|
+
default: undefined;
|
|
795
|
+
type: PropType<string | string[]>;
|
|
796
|
+
};
|
|
787
797
|
}>> & Readonly<{
|
|
788
798
|
onClose?: ((...args: any[]) => any) | undefined;
|
|
789
799
|
onSelect?: ((...args: any[]) => any) | undefined;
|
|
@@ -813,6 +823,7 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
|
|
|
813
823
|
showRemoveButton: boolean;
|
|
814
824
|
emptyOptionLabel: string;
|
|
815
825
|
twInput: string | string[];
|
|
826
|
+
twSelect: string | string[];
|
|
816
827
|
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
817
828
|
declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
|
|
818
829
|
export default _default;
|
|
@@ -55,6 +55,7 @@ declare function __VLS_template(): {
|
|
|
55
55
|
showRemoveButton: boolean;
|
|
56
56
|
emptyOptionLabel: string;
|
|
57
57
|
twInput: string | string[];
|
|
58
|
+
twSelect: string | string[];
|
|
58
59
|
}> & Omit<{
|
|
59
60
|
readonly options: RawOption[];
|
|
60
61
|
readonly disabled: boolean;
|
|
@@ -79,6 +80,7 @@ declare function __VLS_template(): {
|
|
|
79
80
|
readonly modelValue?: RawOption | null | undefined;
|
|
80
81
|
readonly placeholder?: string | undefined;
|
|
81
82
|
readonly twInput?: string | string[] | undefined;
|
|
83
|
+
readonly twSelect?: string | string[] | undefined;
|
|
82
84
|
readonly onClose?: ((...args: any[]) => any) | undefined;
|
|
83
85
|
readonly onSelect?: ((...args: any[]) => any) | undefined;
|
|
84
86
|
readonly onClear?: ((...args: any[]) => any) | undefined;
|
|
@@ -179,6 +181,10 @@ declare function __VLS_template(): {
|
|
|
179
181
|
default: undefined;
|
|
180
182
|
type: PropType<string | string[]>;
|
|
181
183
|
};
|
|
184
|
+
twSelect: {
|
|
185
|
+
default: undefined;
|
|
186
|
+
type: PropType<string | string[]>;
|
|
187
|
+
};
|
|
182
188
|
}>> & Readonly<{
|
|
183
189
|
onClose?: ((...args: any[]) => any) | undefined;
|
|
184
190
|
onSelect?: ((...args: any[]) => any) | undefined;
|
|
@@ -187,7 +193,7 @@ declare function __VLS_template(): {
|
|
|
187
193
|
onScrollBottom?: ((...args: any[]) => any) | undefined;
|
|
188
194
|
onTyping?: ((...args: any[]) => any) | undefined;
|
|
189
195
|
onOpen?: ((...args: any[]) => any) | undefined;
|
|
190
|
-
}>, "filter" | "select" | "required" | "size" | "name" | "disabled" | "inline" | "modelValue" | "placeholder" | "hasError" | "visibleFocus" | "loading" | "loadingBottom" | "dropdownShow" | "showModelValue" | "focusOnMount" | "showEmptyOption" | "showRemoveButton" | "emptyOptionLabel" | "twInput">;
|
|
196
|
+
}>, "filter" | "select" | "required" | "size" | "name" | "disabled" | "inline" | "modelValue" | "placeholder" | "hasError" | "visibleFocus" | "loading" | "loadingBottom" | "dropdownShow" | "showModelValue" | "focusOnMount" | "showEmptyOption" | "showRemoveButton" | "emptyOptionLabel" | "twInput" | "twSelect">;
|
|
191
197
|
$attrs: {
|
|
192
198
|
[x: string]: unknown;
|
|
193
199
|
};
|
|
@@ -295,6 +301,10 @@ declare function __VLS_template(): {
|
|
|
295
301
|
default: undefined;
|
|
296
302
|
type: PropType<string | string[]>;
|
|
297
303
|
};
|
|
304
|
+
twSelect: {
|
|
305
|
+
default: undefined;
|
|
306
|
+
type: PropType<string | string[]>;
|
|
307
|
+
};
|
|
298
308
|
}>> & Readonly<{
|
|
299
309
|
onClose?: ((...args: any[]) => any) | undefined;
|
|
300
310
|
onSelect?: ((...args: any[]) => any) | undefined;
|
|
@@ -338,6 +348,7 @@ declare function __VLS_template(): {
|
|
|
338
348
|
showRemoveButton: boolean;
|
|
339
349
|
emptyOptionLabel: string;
|
|
340
350
|
twInput: string | string[];
|
|
351
|
+
twSelect: string | string[];
|
|
341
352
|
}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & {
|
|
342
353
|
beforeCreate?: (() => void) | (() => void)[];
|
|
343
354
|
created?: (() => void) | (() => void)[];
|
|
@@ -379,6 +390,7 @@ declare function __VLS_template(): {
|
|
|
379
390
|
showRemoveButton: boolean;
|
|
380
391
|
emptyOptionLabel: string;
|
|
381
392
|
twInput: string | string[];
|
|
393
|
+
twSelect: string | string[];
|
|
382
394
|
}> & Omit<Readonly<import("vue").ExtractPropTypes<{
|
|
383
395
|
modelValue: {
|
|
384
396
|
default: undefined;
|
|
@@ -472,6 +484,10 @@ declare function __VLS_template(): {
|
|
|
472
484
|
default: undefined;
|
|
473
485
|
type: PropType<string | string[]>;
|
|
474
486
|
};
|
|
487
|
+
twSelect: {
|
|
488
|
+
default: undefined;
|
|
489
|
+
type: PropType<string | string[]>;
|
|
490
|
+
};
|
|
475
491
|
}>> & Readonly<{
|
|
476
492
|
onClose?: ((...args: any[]) => any) | undefined;
|
|
477
493
|
onSelect?: ((...args: any[]) => any) | undefined;
|
|
@@ -480,7 +496,7 @@ declare function __VLS_template(): {
|
|
|
480
496
|
onScrollBottom?: ((...args: any[]) => any) | undefined;
|
|
481
497
|
onTyping?: ((...args: any[]) => any) | undefined;
|
|
482
498
|
onOpen?: ((...args: any[]) => any) | undefined;
|
|
483
|
-
}>, "blur" | "close" | "focus" | "open" | "setKeywords" | ("filter" | "select" | "required" | "size" | "name" | "disabled" | "inline" | "modelValue" | "placeholder" | "hasError" | "visibleFocus" | "loading" | "loadingBottom" | "dropdownShow" | "showModelValue" | "focusOnMount" | "showEmptyOption" | "showRemoveButton" | "emptyOptionLabel" | "twInput")> & import("vue").ShallowUnwrapRef<{
|
|
499
|
+
}>, "blur" | "close" | "focus" | "open" | "setKeywords" | ("filter" | "select" | "required" | "size" | "name" | "disabled" | "inline" | "modelValue" | "placeholder" | "hasError" | "visibleFocus" | "loading" | "loadingBottom" | "dropdownShow" | "showModelValue" | "focusOnMount" | "showEmptyOption" | "showRemoveButton" | "emptyOptionLabel" | "twInput" | "twSelect")> & import("vue").ShallowUnwrapRef<{
|
|
484
500
|
focus: () => void;
|
|
485
501
|
blur: () => void;
|
|
486
502
|
close: () => void;
|
|
@@ -54,6 +54,7 @@ declare function __VLS_template(): {
|
|
|
54
54
|
showRemoveButton: boolean;
|
|
55
55
|
emptyOptionLabel: string;
|
|
56
56
|
twInput: string | string[];
|
|
57
|
+
twSelect: string | string[];
|
|
57
58
|
}> & Omit<{
|
|
58
59
|
readonly options: RawOption[];
|
|
59
60
|
readonly disabled: boolean;
|
|
@@ -78,6 +79,7 @@ declare function __VLS_template(): {
|
|
|
78
79
|
readonly modelValue?: RawOption | null | undefined;
|
|
79
80
|
readonly placeholder?: string | undefined;
|
|
80
81
|
readonly twInput?: string | string[] | undefined;
|
|
82
|
+
readonly twSelect?: string | string[] | undefined;
|
|
81
83
|
readonly onClose?: ((...args: any[]) => any) | undefined;
|
|
82
84
|
readonly onSelect?: ((...args: any[]) => any) | undefined;
|
|
83
85
|
readonly onClear?: ((...args: any[]) => any) | undefined;
|
|
@@ -178,6 +180,10 @@ declare function __VLS_template(): {
|
|
|
178
180
|
default: undefined;
|
|
179
181
|
type: PropType<string | string[]>;
|
|
180
182
|
};
|
|
183
|
+
twSelect: {
|
|
184
|
+
default: undefined;
|
|
185
|
+
type: PropType<string | string[]>;
|
|
186
|
+
};
|
|
181
187
|
}>> & Readonly<{
|
|
182
188
|
onClose?: ((...args: any[]) => any) | undefined;
|
|
183
189
|
onSelect?: ((...args: any[]) => any) | undefined;
|
|
@@ -186,7 +192,7 @@ declare function __VLS_template(): {
|
|
|
186
192
|
onScrollBottom?: ((...args: any[]) => any) | undefined;
|
|
187
193
|
onTyping?: ((...args: any[]) => any) | undefined;
|
|
188
194
|
onOpen?: ((...args: any[]) => any) | undefined;
|
|
189
|
-
}>, "filter" | "select" | "required" | "size" | "name" | "disabled" | "inline" | "modelValue" | "placeholder" | "hasError" | "visibleFocus" | "loading" | "loadingBottom" | "dropdownShow" | "showModelValue" | "focusOnMount" | "showEmptyOption" | "showRemoveButton" | "emptyOptionLabel" | "twInput">;
|
|
195
|
+
}>, "filter" | "select" | "required" | "size" | "name" | "disabled" | "inline" | "modelValue" | "placeholder" | "hasError" | "visibleFocus" | "loading" | "loadingBottom" | "dropdownShow" | "showModelValue" | "focusOnMount" | "showEmptyOption" | "showRemoveButton" | "emptyOptionLabel" | "twInput" | "twSelect">;
|
|
190
196
|
$attrs: {
|
|
191
197
|
[x: string]: unknown;
|
|
192
198
|
};
|
|
@@ -294,6 +300,10 @@ declare function __VLS_template(): {
|
|
|
294
300
|
default: undefined;
|
|
295
301
|
type: PropType<string | string[]>;
|
|
296
302
|
};
|
|
303
|
+
twSelect: {
|
|
304
|
+
default: undefined;
|
|
305
|
+
type: PropType<string | string[]>;
|
|
306
|
+
};
|
|
297
307
|
}>> & Readonly<{
|
|
298
308
|
onClose?: ((...args: any[]) => any) | undefined;
|
|
299
309
|
onSelect?: ((...args: any[]) => any) | undefined;
|
|
@@ -337,6 +347,7 @@ declare function __VLS_template(): {
|
|
|
337
347
|
showRemoveButton: boolean;
|
|
338
348
|
emptyOptionLabel: string;
|
|
339
349
|
twInput: string | string[];
|
|
350
|
+
twSelect: string | string[];
|
|
340
351
|
}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & {
|
|
341
352
|
beforeCreate?: (() => void) | (() => void)[];
|
|
342
353
|
created?: (() => void) | (() => void)[];
|
|
@@ -378,6 +389,7 @@ declare function __VLS_template(): {
|
|
|
378
389
|
showRemoveButton: boolean;
|
|
379
390
|
emptyOptionLabel: string;
|
|
380
391
|
twInput: string | string[];
|
|
392
|
+
twSelect: string | string[];
|
|
381
393
|
}> & Omit<Readonly<import("vue").ExtractPropTypes<{
|
|
382
394
|
modelValue: {
|
|
383
395
|
default: undefined;
|
|
@@ -471,6 +483,10 @@ declare function __VLS_template(): {
|
|
|
471
483
|
default: undefined;
|
|
472
484
|
type: PropType<string | string[]>;
|
|
473
485
|
};
|
|
486
|
+
twSelect: {
|
|
487
|
+
default: undefined;
|
|
488
|
+
type: PropType<string | string[]>;
|
|
489
|
+
};
|
|
474
490
|
}>> & Readonly<{
|
|
475
491
|
onClose?: ((...args: any[]) => any) | undefined;
|
|
476
492
|
onSelect?: ((...args: any[]) => any) | undefined;
|
|
@@ -479,7 +495,7 @@ declare function __VLS_template(): {
|
|
|
479
495
|
onScrollBottom?: ((...args: any[]) => any) | undefined;
|
|
480
496
|
onTyping?: ((...args: any[]) => any) | undefined;
|
|
481
497
|
onOpen?: ((...args: any[]) => any) | undefined;
|
|
482
|
-
}>, "blur" | "close" | "focus" | "open" | "setKeywords" | ("filter" | "select" | "required" | "size" | "name" | "disabled" | "inline" | "modelValue" | "placeholder" | "hasError" | "visibleFocus" | "loading" | "loadingBottom" | "dropdownShow" | "showModelValue" | "focusOnMount" | "showEmptyOption" | "showRemoveButton" | "emptyOptionLabel" | "twInput")> & import("vue").ShallowUnwrapRef<{
|
|
498
|
+
}>, "blur" | "close" | "focus" | "open" | "setKeywords" | ("filter" | "select" | "required" | "size" | "name" | "disabled" | "inline" | "modelValue" | "placeholder" | "hasError" | "visibleFocus" | "loading" | "loadingBottom" | "dropdownShow" | "showModelValue" | "focusOnMount" | "showEmptyOption" | "showRemoveButton" | "emptyOptionLabel" | "twInput" | "twSelect")> & import("vue").ShallowUnwrapRef<{
|
|
483
499
|
focus: () => void;
|
|
484
500
|
blur: () => void;
|
|
485
501
|
close: () => void;
|
package/dist/types/index.d.ts
CHANGED
|
@@ -15,7 +15,6 @@ declare const messages: {
|
|
|
15
15
|
month: string;
|
|
16
16
|
save: string;
|
|
17
17
|
sui: {
|
|
18
|
-
notes: string;
|
|
19
18
|
address: string;
|
|
20
19
|
address_1_placeholder: string;
|
|
21
20
|
address_2_description: string;
|
|
@@ -58,6 +57,7 @@ declare const messages: {
|
|
|
58
57
|
next: string;
|
|
59
58
|
next_month: string;
|
|
60
59
|
none: string;
|
|
60
|
+
notes: string;
|
|
61
61
|
nothing_found: string;
|
|
62
62
|
notifications_empty: string;
|
|
63
63
|
now: string;
|
|
@@ -114,7 +114,6 @@ declare const messages: {
|
|
|
114
114
|
month: string;
|
|
115
115
|
save: string;
|
|
116
116
|
sui: {
|
|
117
|
-
notes: string;
|
|
118
117
|
address: string;
|
|
119
118
|
address_1_placeholder: string;
|
|
120
119
|
address_2_description: string;
|
|
@@ -157,6 +156,7 @@ declare const messages: {
|
|
|
157
156
|
next: string;
|
|
158
157
|
next_month: string;
|
|
159
158
|
none: string;
|
|
159
|
+
notes: string;
|
|
160
160
|
nothing_found: string;
|
|
161
161
|
notifications_empty: string;
|
|
162
162
|
now: string;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "sprintify-ui",
|
|
3
|
-
"version": "0.8.
|
|
3
|
+
"version": "0.8.47",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"scripts": {
|
|
6
6
|
"build": "rimraf dist && vue-tsc && vite build",
|
|
@@ -119,6 +119,9 @@
|
|
|
119
119
|
"src",
|
|
120
120
|
"dist"
|
|
121
121
|
],
|
|
122
|
+
"overrides": {
|
|
123
|
+
"quill": "^2.0.2"
|
|
124
|
+
},
|
|
122
125
|
"types": "./dist/types/index.d.ts",
|
|
123
126
|
"module": "./dist/sprintify-ui.es.js",
|
|
124
127
|
"exports": {
|
|
@@ -3,13 +3,15 @@
|
|
|
3
3
|
<div class="relative z-[1]">
|
|
4
4
|
<div
|
|
5
5
|
class="flex"
|
|
6
|
-
:class="[
|
|
6
|
+
:class="[
|
|
7
|
+
select ? '-space-x-px' : '',
|
|
8
|
+
]"
|
|
7
9
|
>
|
|
8
10
|
<BaseSelect
|
|
9
11
|
v-if="select"
|
|
10
12
|
v-model="selection"
|
|
11
13
|
:disabled="disabled"
|
|
12
|
-
class="
|
|
14
|
+
:class="selectClasses"
|
|
13
15
|
:size="sizeInternal"
|
|
14
16
|
:has-error="hasErrorInternal"
|
|
15
17
|
required
|
|
@@ -62,12 +64,12 @@
|
|
|
62
64
|
|
|
63
65
|
<div class="relative">
|
|
64
66
|
<div
|
|
65
|
-
v-show="
|
|
66
|
-
class="w-full overflow-hidden"
|
|
67
|
+
v-show="dropdownOpened"
|
|
68
|
+
class="w-full min-h-[110px] overflow-hidden bg-white border-b border-x border-slate-300 input-rounded rounded-t-none"
|
|
67
69
|
:class="[
|
|
68
70
|
inline
|
|
69
71
|
? 'relative'
|
|
70
|
-
: 'absolute
|
|
72
|
+
: ['absolute shadow-2xl z-menu'],
|
|
71
73
|
]"
|
|
72
74
|
>
|
|
73
75
|
<BaseAutocompleteDrawer
|
|
@@ -77,7 +79,7 @@
|
|
|
77
79
|
:size="size"
|
|
78
80
|
:loading="loading"
|
|
79
81
|
:loading-bottom="loadingBottom"
|
|
80
|
-
|
|
82
|
+
tw-drawer="p-1"
|
|
81
83
|
:keywords="keywords"
|
|
82
84
|
@select="onSelect"
|
|
83
85
|
@scroll-bottom="emit('scrollBottom')"
|
|
@@ -174,6 +176,7 @@ const props = defineProps({
|
|
|
174
176
|
default: false,
|
|
175
177
|
type: Boolean,
|
|
176
178
|
},
|
|
179
|
+
/** Inline dropdown. This is useful for BaseDropdownAutocomplete */
|
|
177
180
|
inline: {
|
|
178
181
|
default: false,
|
|
179
182
|
type: Boolean,
|
|
@@ -217,6 +220,10 @@ const props = defineProps({
|
|
|
217
220
|
default: undefined,
|
|
218
221
|
type: [String, Array] as PropType<string | string[]>,
|
|
219
222
|
},
|
|
223
|
+
twSelect: {
|
|
224
|
+
default: undefined,
|
|
225
|
+
type: [String, Array] as PropType<string | string[]>,
|
|
226
|
+
},
|
|
220
227
|
});
|
|
221
228
|
|
|
222
229
|
const emit = defineEmits([
|
|
@@ -262,12 +269,15 @@ onBeforeUnmount(() => {
|
|
|
262
269
|
const drawer = ref<InstanceType<typeof BaseAutocompleteDrawer> | null>(null);
|
|
263
270
|
|
|
264
271
|
let timerId = 0;
|
|
272
|
+
|
|
265
273
|
const keywords = ref('');
|
|
266
274
|
const autocomplete = ref<HTMLElement | null>(null);
|
|
267
275
|
const inputElement = ref<HTMLInputElement | null>(null);
|
|
268
276
|
const shouldFilter = ref(false);
|
|
269
277
|
const opened = ref(false);
|
|
270
278
|
|
|
279
|
+
const dropdownOpened = computed(() => opened.value || props.dropdownShow == 'always');
|
|
280
|
+
|
|
271
281
|
const normalizedOptions = hasOptions.normalizedOptions;
|
|
272
282
|
const normalizedModelValue =
|
|
273
283
|
hasOptions.normalizedModelValue as ComputedRef<NormalizedOption | null>;
|
|
@@ -523,11 +533,14 @@ const inputClasses = computed(() => {
|
|
|
523
533
|
const base = 'w-full';
|
|
524
534
|
const paddingRight = showRemoveButtonInternal.value ? 'pr-5' : '';
|
|
525
535
|
const withSelect = props.select ? 'rounded-l-none' : '';
|
|
536
|
+
// Remove focus style when open to avoid overlapping with dropdown
|
|
537
|
+
const open = dropdownOpened.value ? 'rounded-b-none relative focus-within:ring-0' : '';
|
|
526
538
|
|
|
527
539
|
const internalClasses = [
|
|
528
540
|
base,
|
|
529
541
|
withSelect,
|
|
530
542
|
paddingRight,
|
|
543
|
+
open,
|
|
531
544
|
];
|
|
532
545
|
|
|
533
546
|
if (!props.twInput) {
|
|
@@ -535,7 +548,24 @@ const inputClasses = computed(() => {
|
|
|
535
548
|
}
|
|
536
549
|
|
|
537
550
|
return twMerge(internalClasses, props.twInput);
|
|
538
|
-
})
|
|
551
|
+
});
|
|
552
|
+
|
|
553
|
+
const selectClasses = computed(() => {
|
|
554
|
+
const base = 'relative rounded-r-none min-w-0';
|
|
555
|
+
// Remove focus style when open to avoid overlapping with dropdown
|
|
556
|
+
const open = dropdownOpened.value ? 'rounded-b-none focus:ring-0' : '';
|
|
557
|
+
|
|
558
|
+
const internalClasses = [
|
|
559
|
+
base,
|
|
560
|
+
open,
|
|
561
|
+
];
|
|
562
|
+
|
|
563
|
+
if (!props.twSelect) {
|
|
564
|
+
return internalClasses;
|
|
565
|
+
}
|
|
566
|
+
|
|
567
|
+
return twMerge(internalClasses, props.twSelect);
|
|
568
|
+
});
|
|
539
569
|
|
|
540
570
|
const showRemoveButtonInternal = computed(() => {
|
|
541
571
|
return normalizedModelValue.value && !props.disabled && props.showModelValue && props.showRemoveButton;
|
|
@@ -33,7 +33,7 @@
|
|
|
33
33
|
type="button"
|
|
34
34
|
tabindex="-1"
|
|
35
35
|
@click="onSelect(option)"
|
|
36
|
-
@
|
|
36
|
+
@mouseover="onOptionMouseEnter(index)"
|
|
37
37
|
@mousemove="onOptionMouseMove(index)"
|
|
38
38
|
>
|
|
39
39
|
<slot
|
|
@@ -194,6 +194,34 @@ function isSelected(option: NormalizedOption): boolean {
|
|
|
194
194
|
return false;
|
|
195
195
|
}
|
|
196
196
|
|
|
197
|
+
const firstSelected = computed<NormalizedOption | null | undefined>(() => {
|
|
198
|
+
if (isObject(props.selected) && !isArray(props.selected)) {
|
|
199
|
+
return props.selected;
|
|
200
|
+
}
|
|
201
|
+
|
|
202
|
+
if (isArray(props.selected) && props.selected.length > 0) {
|
|
203
|
+
return props.selected[0];
|
|
204
|
+
}
|
|
205
|
+
|
|
206
|
+
return null;
|
|
207
|
+
});
|
|
208
|
+
|
|
209
|
+
const selectedIndex = computed<number | null>(() => {
|
|
210
|
+
if (!firstSelected.value) {
|
|
211
|
+
return null;
|
|
212
|
+
}
|
|
213
|
+
|
|
214
|
+
const index = props.options.findIndex(
|
|
215
|
+
(option) => option.value === firstSelected.value?.value
|
|
216
|
+
);
|
|
217
|
+
|
|
218
|
+
if (index === -1) {
|
|
219
|
+
return null;
|
|
220
|
+
}
|
|
221
|
+
|
|
222
|
+
return index;
|
|
223
|
+
});
|
|
224
|
+
|
|
197
225
|
// Arrow actions
|
|
198
226
|
|
|
199
227
|
function onKeydown(event: KeyboardEvent) {
|
|
@@ -271,9 +299,7 @@ function scrollToFocus() {
|
|
|
271
299
|
watch(
|
|
272
300
|
() => props.options,
|
|
273
301
|
() => {
|
|
274
|
-
|
|
275
|
-
Math.max(0, Math.min(focusIndex.value, props.options.length - 1))
|
|
276
|
-
);
|
|
302
|
+
checkFocusIndex();
|
|
277
303
|
},
|
|
278
304
|
{ immediate: true }
|
|
279
305
|
);
|
|
@@ -283,24 +309,7 @@ watch(
|
|
|
283
309
|
watch(
|
|
284
310
|
() => props.selected,
|
|
285
311
|
() => {
|
|
286
|
-
|
|
287
|
-
if (isObject(props.selected) && !isArray(props.selected)) {
|
|
288
|
-
const selected = props.selected as NormalizedOption;
|
|
289
|
-
const index = props.options.findIndex(
|
|
290
|
-
(option) => option.value === selected.value
|
|
291
|
-
);
|
|
292
|
-
if (index >= 0) {
|
|
293
|
-
updateFocusIndex(index);
|
|
294
|
-
}
|
|
295
|
-
}
|
|
296
|
-
// Multiple selection
|
|
297
|
-
else if (isArray(props.selected)) {
|
|
298
|
-
if (!(focusIndex.value in props.options)) {
|
|
299
|
-
updateFocusIndex(props.options.length - 1);
|
|
300
|
-
}
|
|
301
|
-
} else {
|
|
302
|
-
updateFocusIndex(0);
|
|
303
|
-
}
|
|
312
|
+
checkFocusIndex();
|
|
304
313
|
},
|
|
305
314
|
{ immediate: true }
|
|
306
315
|
);
|
|
@@ -310,19 +319,20 @@ watch(
|
|
|
310
319
|
watch(
|
|
311
320
|
() => props.keywords,
|
|
312
321
|
() => {
|
|
313
|
-
|
|
314
|
-
drawer.value.scrollTop = 0;
|
|
315
|
-
}
|
|
316
|
-
// Reset the focusIndex
|
|
317
|
-
updateFocusIndex(0);
|
|
322
|
+
checkFocusIndex();
|
|
318
323
|
}
|
|
319
324
|
);
|
|
320
325
|
|
|
321
|
-
function
|
|
322
|
-
|
|
323
|
-
|
|
326
|
+
function checkFocusIndex() {
|
|
327
|
+
|
|
328
|
+
if (selectedIndex.value !== null && selectedIndex.value < props.options.length) {
|
|
329
|
+
focusIndex.value = selectedIndex.value;
|
|
324
330
|
scrollToFocus();
|
|
331
|
+
return;
|
|
325
332
|
}
|
|
333
|
+
|
|
334
|
+
focusIndex.value = 0;
|
|
335
|
+
scrollToFocus();
|
|
326
336
|
}
|
|
327
337
|
|
|
328
338
|
const onOptionMouseEnter = (index: number) => {
|
|
@@ -13,16 +13,22 @@ export default {
|
|
|
13
13
|
},
|
|
14
14
|
},
|
|
15
15
|
args: {
|
|
16
|
+
required: true,
|
|
16
17
|
placement: "bottom-start",
|
|
17
|
-
padding: 8,
|
|
18
|
-
emptyOptionLabel: "Nothing",
|
|
19
18
|
},
|
|
20
19
|
};
|
|
21
20
|
|
|
22
21
|
const template = `<template #button="{ newValue }">
|
|
23
22
|
<div class="btn btn-sm">
|
|
24
23
|
<div v-if="newValue" class="flex items-center gap-2 text-sm">
|
|
25
|
-
<div
|
|
24
|
+
<div
|
|
25
|
+
class="h-2 w-2 rounded-full"
|
|
26
|
+
:class="{
|
|
27
|
+
'bg-red-500': newValue?.type === 'sith',
|
|
28
|
+
'bg-green-500': newValue?.type === 'jedi',
|
|
29
|
+
'bg-slate-300': newValue?.type === undefined,
|
|
30
|
+
}"
|
|
31
|
+
></div>
|
|
26
32
|
<span>
|
|
27
33
|
{{ newValue.label }}
|
|
28
34
|
</span>
|
|
@@ -33,7 +39,7 @@ const template = `<template #button="{ newValue }">
|
|
|
33
39
|
</div>
|
|
34
40
|
</template>
|
|
35
41
|
<template #option="{ option }">
|
|
36
|
-
<div class="flex items-center gap-2 text-sm px-2">
|
|
42
|
+
<div class="flex items-center gap-2 text-sm py-1 px-2">
|
|
37
43
|
<div
|
|
38
44
|
class="h-2 w-2 rounded-full"
|
|
39
45
|
:class="{
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
</template>
|
|
14
14
|
<template #dropdown="{ close }">
|
|
15
15
|
<div
|
|
16
|
-
class="inline-block w-[320px]
|
|
16
|
+
class="inline-block w-[320px] input-rounded bg-white shadow-2xl"
|
|
17
17
|
>
|
|
18
18
|
<component
|
|
19
19
|
:is="componentName"
|
|
@@ -46,7 +46,7 @@
|
|
|
46
46
|
<div class="shrink-0">
|
|
47
47
|
<BaseIcon
|
|
48
48
|
v-if="(optionProps.selected ?? false) || (optionProps.option[valueKey] == null && newValue == null)"
|
|
49
|
-
icon="mdi:check
|
|
49
|
+
icon="mdi:check"
|
|
50
50
|
class="h-4 w-4 text-slate-500"
|
|
51
51
|
/>
|
|
52
52
|
</div>
|
package/src/lang/en.json
CHANGED
|
@@ -7,7 +7,6 @@
|
|
|
7
7
|
"month": "Month",
|
|
8
8
|
"save": "Save",
|
|
9
9
|
"sui": {
|
|
10
|
-
"notes": "Notes",
|
|
11
10
|
"address": "Address",
|
|
12
11
|
"address_1_placeholder": "Postal address",
|
|
13
12
|
"address_2_description": "Apartment, suite, unit, building",
|
|
@@ -15,7 +14,7 @@
|
|
|
15
14
|
"apply": "Apply",
|
|
16
15
|
"apply_filters": "Apply filters",
|
|
17
16
|
"authentication_code": "Authentication code",
|
|
18
|
-
"autocomplete_placeholder": "
|
|
17
|
+
"autocomplete_placeholder": "Search...",
|
|
19
18
|
"bulk_actions": "Bulk actions",
|
|
20
19
|
"cancel": "Cancel",
|
|
21
20
|
"city": "City",
|
|
@@ -50,6 +49,7 @@
|
|
|
50
49
|
"next": "Next",
|
|
51
50
|
"next_month": "Next month",
|
|
52
51
|
"none": "None",
|
|
52
|
+
"notes": "Notes",
|
|
53
53
|
"nothing_found": "Nothing found",
|
|
54
54
|
"notifications_empty": "You have no new notifications",
|
|
55
55
|
"now": "Now",
|
|
@@ -96,4 +96,4 @@
|
|
|
96
96
|
"today": "Today",
|
|
97
97
|
"week": "Week",
|
|
98
98
|
"year": "Year"
|
|
99
|
-
}
|
|
99
|
+
}
|
package/src/lang/fr.json
CHANGED
|
@@ -7,7 +7,6 @@
|
|
|
7
7
|
"month": "Mois",
|
|
8
8
|
"save": "Sauvegarder",
|
|
9
9
|
"sui": {
|
|
10
|
-
"notes": "Notes",
|
|
11
10
|
"address": "Adresse",
|
|
12
11
|
"address_1_placeholder": "Adresse postale",
|
|
13
12
|
"address_2_description": "Appartement, suite, unité, immeuble",
|
|
@@ -15,7 +14,7 @@
|
|
|
15
14
|
"apply": "Appliquer",
|
|
16
15
|
"apply_filters": "Appliquer les filtres",
|
|
17
16
|
"authentication_code": "Code d'authentification",
|
|
18
|
-
"autocomplete_placeholder": "
|
|
17
|
+
"autocomplete_placeholder": "Rechercher...",
|
|
19
18
|
"bulk_actions": "Actions en lot",
|
|
20
19
|
"cancel": "Annuler",
|
|
21
20
|
"city": "Ville",
|
|
@@ -50,6 +49,7 @@
|
|
|
50
49
|
"next": "Suivant",
|
|
51
50
|
"next_month": "Mois prochain",
|
|
52
51
|
"none": "Aucun",
|
|
52
|
+
"notes": "Notes",
|
|
53
53
|
"nothing_found": "Rien n'a été trouvé",
|
|
54
54
|
"notifications_empty": "Vous n'avez aucune nouvelle notification",
|
|
55
55
|
"now": "Maintenant",
|
|
@@ -96,4 +96,4 @@
|
|
|
96
96
|
"today": "Aujourd\\'hui",
|
|
97
97
|
"week": "Semaine",
|
|
98
98
|
"year": "Année"
|
|
99
|
-
}
|
|
99
|
+
}
|