vuetify 3.4.6 → 3.4.8
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/json/attributes.json +3821 -3813
- package/dist/json/importMap.json +126 -126
- package/dist/json/tags.json +2 -0
- package/dist/json/web-types.json +7092 -7074
- package/dist/vuetify-labs.css +1747 -1744
- package/dist/vuetify-labs.d.ts +42 -30
- package/dist/vuetify-labs.esm.js +151 -113
- package/dist/vuetify-labs.esm.js.map +1 -1
- package/dist/vuetify-labs.js +151 -113
- package/dist/vuetify-labs.min.css +2 -2
- package/dist/vuetify.css +627 -624
- package/dist/vuetify.d.ts +82 -70
- package/dist/vuetify.esm.js +151 -113
- package/dist/vuetify.esm.js.map +1 -1
- package/dist/vuetify.js +151 -113
- package/dist/vuetify.js.map +1 -1
- package/dist/vuetify.min.css +2 -2
- package/dist/vuetify.min.js +150 -147
- package/dist/vuetify.min.js.map +1 -1
- package/lib/components/VAutocomplete/VAutocomplete.css +1 -1
- package/lib/components/VAutocomplete/VAutocomplete.mjs +6 -8
- package/lib/components/VAutocomplete/VAutocomplete.mjs.map +1 -1
- package/lib/components/VAutocomplete/VAutocomplete.sass +1 -1
- package/lib/components/VChip/VChip.mjs +1 -1
- package/lib/components/VChip/VChip.mjs.map +1 -1
- package/lib/components/VCombobox/VCombobox.css +1 -1
- package/lib/components/VCombobox/VCombobox.mjs +1 -1
- package/lib/components/VCombobox/VCombobox.mjs.map +1 -1
- package/lib/components/VCombobox/VCombobox.sass +1 -1
- package/lib/components/VDataTable/VDataTableFooter.mjs +1 -1
- package/lib/components/VDataTable/VDataTableFooter.mjs.map +1 -1
- package/lib/components/VDatePicker/VDatePickerMonth.mjs +11 -98
- package/lib/components/VDatePicker/VDatePickerMonth.mjs.map +1 -1
- package/lib/components/VDatePicker/index.d.mts +42 -30
- package/lib/components/VOtpInput/VOtpInput.css +3 -0
- package/lib/components/VOtpInput/VOtpInput.mjs +1 -0
- package/lib/components/VOtpInput/VOtpInput.mjs.map +1 -1
- package/lib/components/VOtpInput/VOtpInput.sass +3 -0
- package/lib/components/VOverlay/VOverlay.mjs +11 -6
- package/lib/components/VOverlay/VOverlay.mjs.map +1 -1
- package/lib/components/VSelect/VSelect.mjs +12 -2
- package/lib/components/VSelect/VSelect.mjs.map +1 -1
- package/lib/components/index.d.mts +42 -30
- package/lib/composables/calendar.mjs +113 -0
- package/lib/composables/calendar.mjs.map +1 -0
- package/lib/entry-bundler.mjs +1 -1
- package/lib/framework.mjs +1 -1
- package/lib/index.d.mts +40 -40
- package/lib/locale/cs.mjs +19 -19
- package/lib/locale/cs.mjs.map +1 -1
- package/package.json +4 -4
|
@@ -61,8 +61,8 @@ declare const VDatePicker: {
|
|
|
61
61
|
prevIcon: string;
|
|
62
62
|
modeIcon: string;
|
|
63
63
|
viewMode: "month" | "year" | "months";
|
|
64
|
-
hideWeekdays: boolean;
|
|
65
64
|
showAdjacentMonths: boolean;
|
|
65
|
+
hideWeekdays: boolean;
|
|
66
66
|
showWeek: boolean;
|
|
67
67
|
hideHeader: boolean;
|
|
68
68
|
} & {
|
|
@@ -88,6 +88,7 @@ declare const VDatePicker: {
|
|
|
88
88
|
rounded?: string | number | boolean | undefined;
|
|
89
89
|
bgColor?: string | undefined;
|
|
90
90
|
allowedDates?: Function | unknown[] | undefined;
|
|
91
|
+
displayValue?: unknown;
|
|
91
92
|
} & {
|
|
92
93
|
"onUpdate:month"?: ((date: any) => any) | undefined;
|
|
93
94
|
"onUpdate:year"?: ((date: any) => any) | undefined;
|
|
@@ -108,8 +109,8 @@ declare const VDatePicker: {
|
|
|
108
109
|
prevIcon: string;
|
|
109
110
|
modeIcon: string;
|
|
110
111
|
viewMode: "month" | "year" | "months";
|
|
111
|
-
hideWeekdays: boolean;
|
|
112
112
|
showAdjacentMonths: boolean;
|
|
113
|
+
hideWeekdays: boolean;
|
|
113
114
|
showWeek: boolean;
|
|
114
115
|
hideHeader: boolean;
|
|
115
116
|
} & {
|
|
@@ -135,6 +136,7 @@ declare const VDatePicker: {
|
|
|
135
136
|
rounded?: string | number | boolean | undefined;
|
|
136
137
|
bgColor?: string | undefined;
|
|
137
138
|
allowedDates?: Function | unknown[] | undefined;
|
|
139
|
+
displayValue?: unknown;
|
|
138
140
|
} & {
|
|
139
141
|
"onUpdate:month"?: ((date: any) => any) | undefined;
|
|
140
142
|
"onUpdate:year"?: ((date: any) => any) | undefined;
|
|
@@ -152,8 +154,8 @@ declare const VDatePicker: {
|
|
|
152
154
|
prevIcon: string;
|
|
153
155
|
modeIcon: string;
|
|
154
156
|
viewMode: "month" | "year" | "months";
|
|
155
|
-
hideWeekdays: boolean;
|
|
156
157
|
showAdjacentMonths: boolean;
|
|
158
|
+
hideWeekdays: boolean;
|
|
157
159
|
showWeek: boolean;
|
|
158
160
|
hideHeader: boolean;
|
|
159
161
|
}, true, {}, vue.SlotsType<Partial<{
|
|
@@ -190,8 +192,8 @@ declare const VDatePicker: {
|
|
|
190
192
|
prevIcon: string;
|
|
191
193
|
modeIcon: string;
|
|
192
194
|
viewMode: "month" | "year" | "months";
|
|
193
|
-
hideWeekdays: boolean;
|
|
194
195
|
showAdjacentMonths: boolean;
|
|
196
|
+
hideWeekdays: boolean;
|
|
195
197
|
showWeek: boolean;
|
|
196
198
|
hideHeader: boolean;
|
|
197
199
|
} & {
|
|
@@ -217,6 +219,7 @@ declare const VDatePicker: {
|
|
|
217
219
|
rounded?: string | number | boolean | undefined;
|
|
218
220
|
bgColor?: string | undefined;
|
|
219
221
|
allowedDates?: Function | unknown[] | undefined;
|
|
222
|
+
displayValue?: unknown;
|
|
220
223
|
} & {
|
|
221
224
|
"onUpdate:month"?: ((date: any) => any) | undefined;
|
|
222
225
|
"onUpdate:year"?: ((date: any) => any) | undefined;
|
|
@@ -234,8 +237,8 @@ declare const VDatePicker: {
|
|
|
234
237
|
prevIcon: string;
|
|
235
238
|
modeIcon: string;
|
|
236
239
|
viewMode: "month" | "year" | "months";
|
|
237
|
-
hideWeekdays: boolean;
|
|
238
240
|
showAdjacentMonths: boolean;
|
|
241
|
+
hideWeekdays: boolean;
|
|
239
242
|
showWeek: boolean;
|
|
240
243
|
hideHeader: boolean;
|
|
241
244
|
}>;
|
|
@@ -253,8 +256,8 @@ declare const VDatePicker: {
|
|
|
253
256
|
prevIcon: string;
|
|
254
257
|
modeIcon: string;
|
|
255
258
|
viewMode: "month" | "year" | "months";
|
|
256
|
-
hideWeekdays: boolean;
|
|
257
259
|
showAdjacentMonths: boolean;
|
|
260
|
+
hideWeekdays: boolean;
|
|
258
261
|
showWeek: boolean;
|
|
259
262
|
hideHeader: boolean;
|
|
260
263
|
} & {
|
|
@@ -280,6 +283,7 @@ declare const VDatePicker: {
|
|
|
280
283
|
rounded?: string | number | boolean | undefined;
|
|
281
284
|
bgColor?: string | undefined;
|
|
282
285
|
allowedDates?: Function | unknown[] | undefined;
|
|
286
|
+
displayValue?: unknown;
|
|
283
287
|
} & {
|
|
284
288
|
"onUpdate:month"?: ((date: any) => any) | undefined;
|
|
285
289
|
"onUpdate:year"?: ((date: any) => any) | undefined;
|
|
@@ -302,8 +306,8 @@ declare const VDatePicker: {
|
|
|
302
306
|
prevIcon: string;
|
|
303
307
|
modeIcon: string;
|
|
304
308
|
viewMode: "month" | "year" | "months";
|
|
305
|
-
hideWeekdays: boolean;
|
|
306
309
|
showAdjacentMonths: boolean;
|
|
310
|
+
hideWeekdays: boolean;
|
|
307
311
|
showWeek: boolean;
|
|
308
312
|
hideHeader: boolean;
|
|
309
313
|
}, {}, string, vue.SlotsType<Partial<{
|
|
@@ -374,12 +378,13 @@ declare const VDatePicker: {
|
|
|
374
378
|
min: vue.PropType<unknown>;
|
|
375
379
|
allowedDates: (FunctionConstructor | ArrayConstructor)[];
|
|
376
380
|
disabled: BooleanConstructor;
|
|
381
|
+
displayValue: vue.PropType<unknown>;
|
|
377
382
|
month: (StringConstructor | NumberConstructor)[];
|
|
383
|
+
showAdjacentMonths: BooleanConstructor;
|
|
384
|
+
year: (StringConstructor | NumberConstructor)[];
|
|
378
385
|
hideWeekdays: BooleanConstructor;
|
|
379
386
|
multiple: BooleanConstructor;
|
|
380
|
-
showAdjacentMonths: BooleanConstructor;
|
|
381
387
|
showWeek: BooleanConstructor;
|
|
382
|
-
year: (StringConstructor | NumberConstructor)[];
|
|
383
388
|
active: {
|
|
384
389
|
type: vue.PropType<string | string[]>;
|
|
385
390
|
default: undefined;
|
|
@@ -449,12 +454,13 @@ declare const VDatePicker: {
|
|
|
449
454
|
min: vue.PropType<unknown>;
|
|
450
455
|
allowedDates: (FunctionConstructor | ArrayConstructor)[];
|
|
451
456
|
disabled: BooleanConstructor;
|
|
457
|
+
displayValue: vue.PropType<unknown>;
|
|
452
458
|
month: (StringConstructor | NumberConstructor)[];
|
|
459
|
+
showAdjacentMonths: BooleanConstructor;
|
|
460
|
+
year: (StringConstructor | NumberConstructor)[];
|
|
453
461
|
hideWeekdays: BooleanConstructor;
|
|
454
462
|
multiple: BooleanConstructor;
|
|
455
|
-
showAdjacentMonths: BooleanConstructor;
|
|
456
463
|
showWeek: BooleanConstructor;
|
|
457
|
-
year: (StringConstructor | NumberConstructor)[];
|
|
458
464
|
active: {
|
|
459
465
|
type: vue.PropType<string | string[]>;
|
|
460
466
|
default: undefined;
|
|
@@ -840,8 +846,8 @@ declare const VDatePickerMonth: {
|
|
|
840
846
|
new (...args: any[]): vue.CreateComponentPublicInstance<{
|
|
841
847
|
disabled: boolean;
|
|
842
848
|
multiple: boolean;
|
|
843
|
-
hideWeekdays: boolean;
|
|
844
849
|
showAdjacentMonths: boolean;
|
|
850
|
+
hideWeekdays: boolean;
|
|
845
851
|
showWeek: boolean;
|
|
846
852
|
} & {
|
|
847
853
|
max?: unknown;
|
|
@@ -851,6 +857,7 @@ declare const VDatePickerMonth: {
|
|
|
851
857
|
year?: string | number | undefined;
|
|
852
858
|
modelValue?: unknown[] | undefined;
|
|
853
859
|
allowedDates?: Function | unknown[] | undefined;
|
|
860
|
+
displayValue?: unknown;
|
|
854
861
|
} & {
|
|
855
862
|
$children?: {} | vue.VNodeChild | {
|
|
856
863
|
day?: ((arg: {
|
|
@@ -889,8 +896,8 @@ declare const VDatePickerMonth: {
|
|
|
889
896
|
}, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & {
|
|
890
897
|
disabled: boolean;
|
|
891
898
|
multiple: boolean;
|
|
892
|
-
hideWeekdays: boolean;
|
|
893
899
|
showAdjacentMonths: boolean;
|
|
900
|
+
hideWeekdays: boolean;
|
|
894
901
|
showWeek: boolean;
|
|
895
902
|
} & {
|
|
896
903
|
max?: unknown;
|
|
@@ -900,6 +907,7 @@ declare const VDatePickerMonth: {
|
|
|
900
907
|
year?: string | number | undefined;
|
|
901
908
|
modelValue?: unknown[] | undefined;
|
|
902
909
|
allowedDates?: Function | unknown[] | undefined;
|
|
910
|
+
displayValue?: unknown;
|
|
903
911
|
} & {
|
|
904
912
|
$children?: {} | vue.VNodeChild | {
|
|
905
913
|
day?: ((arg: {
|
|
@@ -934,8 +942,8 @@ declare const VDatePickerMonth: {
|
|
|
934
942
|
}, {
|
|
935
943
|
disabled: boolean;
|
|
936
944
|
multiple: boolean;
|
|
937
|
-
hideWeekdays: boolean;
|
|
938
945
|
showAdjacentMonths: boolean;
|
|
946
|
+
hideWeekdays: boolean;
|
|
939
947
|
showWeek: boolean;
|
|
940
948
|
}, true, {}, vue.SlotsType<Partial<{
|
|
941
949
|
day: (arg: {
|
|
@@ -957,8 +965,8 @@ declare const VDatePickerMonth: {
|
|
|
957
965
|
}, {
|
|
958
966
|
disabled: boolean;
|
|
959
967
|
multiple: boolean;
|
|
960
|
-
hideWeekdays: boolean;
|
|
961
968
|
showAdjacentMonths: boolean;
|
|
969
|
+
hideWeekdays: boolean;
|
|
962
970
|
showWeek: boolean;
|
|
963
971
|
} & {
|
|
964
972
|
max?: unknown;
|
|
@@ -968,6 +976,7 @@ declare const VDatePickerMonth: {
|
|
|
968
976
|
year?: string | number | undefined;
|
|
969
977
|
modelValue?: unknown[] | undefined;
|
|
970
978
|
allowedDates?: Function | unknown[] | undefined;
|
|
979
|
+
displayValue?: unknown;
|
|
971
980
|
} & {
|
|
972
981
|
$children?: {} | vue.VNodeChild | {
|
|
973
982
|
day?: ((arg: {
|
|
@@ -1002,8 +1011,8 @@ declare const VDatePickerMonth: {
|
|
|
1002
1011
|
}, () => JSX.Element, {}, {}, {}, {
|
|
1003
1012
|
disabled: boolean;
|
|
1004
1013
|
multiple: boolean;
|
|
1005
|
-
hideWeekdays: boolean;
|
|
1006
1014
|
showAdjacentMonths: boolean;
|
|
1015
|
+
hideWeekdays: boolean;
|
|
1007
1016
|
showWeek: boolean;
|
|
1008
1017
|
}>;
|
|
1009
1018
|
__isFragment?: undefined;
|
|
@@ -1012,8 +1021,8 @@ declare const VDatePickerMonth: {
|
|
|
1012
1021
|
} & vue.ComponentOptionsBase<{
|
|
1013
1022
|
disabled: boolean;
|
|
1014
1023
|
multiple: boolean;
|
|
1015
|
-
hideWeekdays: boolean;
|
|
1016
1024
|
showAdjacentMonths: boolean;
|
|
1025
|
+
hideWeekdays: boolean;
|
|
1017
1026
|
showWeek: boolean;
|
|
1018
1027
|
} & {
|
|
1019
1028
|
max?: unknown;
|
|
@@ -1023,6 +1032,7 @@ declare const VDatePickerMonth: {
|
|
|
1023
1032
|
year?: string | number | undefined;
|
|
1024
1033
|
modelValue?: unknown[] | undefined;
|
|
1025
1034
|
allowedDates?: Function | unknown[] | undefined;
|
|
1035
|
+
displayValue?: unknown;
|
|
1026
1036
|
} & {
|
|
1027
1037
|
$children?: {} | vue.VNodeChild | {
|
|
1028
1038
|
day?: ((arg: {
|
|
@@ -1061,8 +1071,8 @@ declare const VDatePickerMonth: {
|
|
|
1061
1071
|
}, string, {
|
|
1062
1072
|
disabled: boolean;
|
|
1063
1073
|
multiple: boolean;
|
|
1064
|
-
hideWeekdays: boolean;
|
|
1065
1074
|
showAdjacentMonths: boolean;
|
|
1075
|
+
hideWeekdays: boolean;
|
|
1066
1076
|
showWeek: boolean;
|
|
1067
1077
|
}, {}, string, vue.SlotsType<Partial<{
|
|
1068
1078
|
day: (arg: {
|
|
@@ -1077,29 +1087,31 @@ declare const VDatePickerMonth: {
|
|
|
1077
1087
|
}>>> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & FilterPropsOptions<{
|
|
1078
1088
|
allowedDates: (FunctionConstructor | ArrayConstructor)[];
|
|
1079
1089
|
disabled: BooleanConstructor;
|
|
1080
|
-
|
|
1090
|
+
displayValue: vue.PropType<unknown>;
|
|
1091
|
+
modelValue: vue.PropType<unknown[] | undefined>;
|
|
1081
1092
|
month: (StringConstructor | NumberConstructor)[];
|
|
1093
|
+
max: vue.PropType<unknown>;
|
|
1094
|
+
min: vue.PropType<unknown>;
|
|
1095
|
+
showAdjacentMonths: BooleanConstructor;
|
|
1096
|
+
year: (StringConstructor | NumberConstructor)[];
|
|
1097
|
+
color: StringConstructor;
|
|
1082
1098
|
hideWeekdays: BooleanConstructor;
|
|
1083
|
-
max: PropType<unknown>;
|
|
1084
|
-
min: PropType<unknown>;
|
|
1085
|
-
modelValue: PropType<unknown[]>;
|
|
1086
1099
|
multiple: BooleanConstructor;
|
|
1087
|
-
showAdjacentMonths: BooleanConstructor;
|
|
1088
1100
|
showWeek: BooleanConstructor;
|
|
1089
|
-
year: (StringConstructor | NumberConstructor)[];
|
|
1090
1101
|
}, vue.ExtractPropTypes<{
|
|
1091
1102
|
allowedDates: (FunctionConstructor | ArrayConstructor)[];
|
|
1092
1103
|
disabled: BooleanConstructor;
|
|
1093
|
-
|
|
1104
|
+
displayValue: vue.PropType<unknown>;
|
|
1105
|
+
modelValue: vue.PropType<unknown[] | undefined>;
|
|
1094
1106
|
month: (StringConstructor | NumberConstructor)[];
|
|
1107
|
+
max: vue.PropType<unknown>;
|
|
1108
|
+
min: vue.PropType<unknown>;
|
|
1109
|
+
showAdjacentMonths: BooleanConstructor;
|
|
1110
|
+
year: (StringConstructor | NumberConstructor)[];
|
|
1111
|
+
color: StringConstructor;
|
|
1095
1112
|
hideWeekdays: BooleanConstructor;
|
|
1096
|
-
max: PropType<unknown>;
|
|
1097
|
-
min: PropType<unknown>;
|
|
1098
|
-
modelValue: PropType<unknown[]>;
|
|
1099
1113
|
multiple: BooleanConstructor;
|
|
1100
|
-
showAdjacentMonths: BooleanConstructor;
|
|
1101
1114
|
showWeek: BooleanConstructor;
|
|
1102
|
-
year: (StringConstructor | NumberConstructor)[];
|
|
1103
1115
|
}>>;
|
|
1104
1116
|
type VDatePickerMonth = InstanceType<typeof VDatePickerMonth>;
|
|
1105
1117
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"VOtpInput.mjs","names":["makeVFieldProps","VField","VOverlay","VProgressCircular","provideDefaults","makeDimensionProps","useDimension","makeFocusProps","useFocus","useLocale","useProxiedModel","computed","nextTick","ref","watch","filterInputAttrs","focusChild","genericComponent","only","propsFactory","useRender","makeVOtpInputProps","autofocus","Boolean","divider","String","focusAll","label","type","default","length","Number","modelValue","undefined","placeholder","variant","VOtpInput","name","props","emits","finish","val","setup","_ref","attrs","emit","slots","dimensionStyles","isFocused","focus","blur","model","split","join","t","fields","Array","value","fill","focusIndex","contentRef","inputRef","current","onInput","test","array","slice","target","onKeydown","e","index","includes","key","preventDefault","requestAnimationFrame","select","onPaste","stopPropagation","clipboardData","getData","reset","onFocus","onBlur","color","bgColor","baseColor","disabled","error","scoped","deep","rootAttrs","inputAttrs","_createVNode","_mergeProps","class","style","map","_","i","_Fragment","event","loading","loader","some","input"],"sources":["../../../src/components/VOtpInput/VOtpInput.tsx"],"sourcesContent":["// Styles\nimport './VOtpInput.sass'\n\n// Components\nimport { makeVFieldProps, VField } from '@/components/VField/VField'\nimport { VOverlay } from '@/components/VOverlay/VOverlay'\nimport { VProgressCircular } from '@/components/VProgressCircular/VProgressCircular'\n\n// Composables\nimport { provideDefaults } from '@/composables/defaults'\nimport { makeDimensionProps, useDimension } from '@/composables/dimensions'\nimport { makeFocusProps, useFocus } from '@/composables/focus'\nimport { useLocale } from '@/composables/locale'\nimport { useProxiedModel } from '@/composables/proxiedModel'\n\n// Utilities\nimport { computed, nextTick, ref, watch } from 'vue'\nimport { filterInputAttrs, focusChild, genericComponent, only, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\n\n// Types\nexport type VOtpInputSlots = {\n default: never\n loader: never\n}\n\nexport const makeVOtpInputProps = propsFactory({\n autofocus: Boolean,\n divider: String,\n focusAll: Boolean,\n label: {\n type: String,\n default: '$vuetify.input.otp',\n },\n length: {\n type: [Number, String],\n default: 6,\n },\n modelValue: {\n type: [Number, String],\n default: undefined,\n },\n placeholder: String,\n type: {\n type: String as PropType<'text' | 'password' | 'number'>,\n default: 'number',\n },\n\n ...makeDimensionProps(),\n ...makeFocusProps(),\n ...only(makeVFieldProps({\n variant: 'outlined' as const,\n }), [\n 'baseColor',\n 'bgColor',\n 'class',\n 'color',\n 'disabled',\n 'error',\n 'loading',\n 'rounded',\n 'style',\n 'theme',\n 'variant',\n ]),\n}, 'VOtpInput')\n\nexport const VOtpInput = genericComponent<VOtpInputSlots>()({\n name: 'VOtpInput',\n\n props: makeVOtpInputProps(),\n\n emits: {\n finish: (val: string) => true,\n 'update:focused': (val: boolean) => true,\n 'update:modelValue': (val: string) => true,\n },\n\n setup (props, { attrs, emit, slots }) {\n const { dimensionStyles } = useDimension(props)\n const { isFocused, focus, blur } = useFocus(props)\n const model = useProxiedModel(\n props,\n 'modelValue',\n '',\n val => String(val).split(''),\n val => val.join('')\n )\n const { t } = useLocale()\n\n const length = computed(() => Number(props.length))\n const fields = computed(() => Array(length.value).fill(0))\n const focusIndex = ref(-1)\n const contentRef = ref<HTMLElement>()\n const inputRef = ref<HTMLInputElement[]>([])\n const current = computed(() => inputRef.value[focusIndex.value])\n\n function onInput () {\n // The maxlength attribute doesn't work for the number type input, so the text type is used.\n // The following logic simulates the behavior of a number input.\n if (props.type === 'number' && /[^0-9]/g.test(current.value.value)) {\n current.value.value = ''\n return\n }\n const array = model.value.slice()\n const value = current.value.value\n\n array[focusIndex.value] = value\n\n let target: any = null\n\n if (focusIndex.value > model.value.length) {\n target = model.value.length + 1\n } else if (focusIndex.value + 1 !== length.value) {\n target = 'next'\n }\n\n model.value = array\n\n if (target) focusChild(contentRef.value!, target)\n }\n\n function onKeydown (e: KeyboardEvent) {\n const array = model.value.slice()\n const index = focusIndex.value\n let target: 'next' | 'prev' | 'first' | 'last' | number | null = null\n\n if (![\n 'ArrowLeft',\n 'ArrowRight',\n 'Backspace',\n 'Delete',\n ].includes(e.key)) return\n\n e.preventDefault()\n\n if (e.key === 'ArrowLeft') {\n target = 'prev'\n } else if (e.key === 'ArrowRight') {\n target = 'next'\n } else if (['Backspace', 'Delete'].includes(e.key)) {\n array[focusIndex.value] = ''\n\n model.value = array\n\n if (focusIndex.value > 0 && e.key === 'Backspace') {\n target = 'prev'\n } else {\n requestAnimationFrame(() => {\n inputRef.value[index]?.select()\n })\n }\n }\n\n requestAnimationFrame(() => {\n if (target != null) {\n focusChild(contentRef.value!, target)\n }\n })\n }\n\n function onPaste (index: number, e: ClipboardEvent) {\n e.preventDefault()\n e.stopPropagation()\n\n model.value = (e?.clipboardData?.getData('Text') ?? '').split('')\n\n inputRef.value?.[index].blur()\n }\n\n function reset () {\n model.value = []\n }\n\n function onFocus (e: FocusEvent, index: number) {\n focus()\n\n focusIndex.value = index\n }\n\n function onBlur () {\n blur()\n\n focusIndex.value = -1\n }\n\n provideDefaults({\n VField: {\n color: computed(() => props.color),\n bgColor: computed(() => props.color),\n baseColor: computed(() => props.baseColor),\n disabled: computed(() => props.disabled),\n error: computed(() => props.error),\n variant: computed(() => props.variant),\n },\n }, { scoped: true })\n\n watch(model, val => {\n if (val.length === length.value) emit('finish', val.join(''))\n }, { deep: true })\n\n watch(focusIndex, val => {\n if (val < 0) return\n\n nextTick(() => {\n inputRef.value[val]?.select()\n })\n })\n\n useRender(() => {\n const [rootAttrs, inputAttrs] = filterInputAttrs(attrs)\n\n return (\n <div\n class={[\n 'v-otp-input',\n {\n 'v-otp-input--divided': !!props.divider,\n },\n props.class,\n ]}\n style={[\n props.style,\n ]}\n { ...rootAttrs }\n >\n <div\n ref={ contentRef }\n class=\"v-otp-input__content\"\n style={[\n dimensionStyles.value,\n ]}\n >\n { fields.value.map((_, i) => (\n <>\n { props.divider && i !== 0 && (\n <span class=\"v-otp-input__divider\">{ props.divider }</span>\n )}\n\n <VField\n focused={ (isFocused.value && props.focusAll) || focusIndex.value === i }\n key={ i }\n >\n {{\n ...slots,\n default: () => {\n return (\n <input\n ref={ val => inputRef.value[i] = val as HTMLInputElement }\n aria-label={ t(props.label, i + 1) }\n autofocus={ i === 0 && props.autofocus }\n autocomplete=\"one-time-code\"\n class={[\n 'v-otp-input__field',\n ]}\n disabled={ props.disabled }\n inputmode={ props.type === 'number' ? 'numeric' : 'text' }\n min={ props.type === 'number' ? 0 : undefined }\n maxlength=\"1\"\n placeholder={ props.placeholder }\n type={ props.type === 'number' ? 'text' : props.type }\n value={ model.value[i] }\n onInput={ onInput }\n onFocus={ e => onFocus(e, i) }\n onBlur={ onBlur }\n onKeydown={ onKeydown }\n onPaste={ event => onPaste(i, event) }\n />\n )\n },\n }}\n </VField>\n </>\n ))}\n\n <input\n class=\"v-otp-input-input\"\n type=\"hidden\"\n { ...inputAttrs }\n value={ model.value.join('') }\n />\n\n <VOverlay\n contained\n content-class=\"v-otp-input__loader\"\n model-value={ !!props.loading }\n persistent\n >\n { slots.loader?.() ?? (\n <VProgressCircular\n color={ typeof props.loading === 'boolean' ? undefined : props.loading }\n indeterminate\n size=\"24\"\n width=\"2\"\n />\n )}\n </VOverlay>\n\n { slots.default?.() }\n </div>\n </div>\n )\n })\n\n return {\n blur: () => {\n inputRef.value?.some(input => input.blur())\n },\n focus: () => {\n inputRef.value?.[0].focus()\n },\n reset,\n isFocused,\n }\n },\n})\n\nexport type VOtpInput = InstanceType<typeof VOtpInput>\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"VOtpInput.mjs","names":["makeVFieldProps","VField","VOverlay","VProgressCircular","provideDefaults","makeDimensionProps","useDimension","makeFocusProps","useFocus","useLocale","useProxiedModel","computed","nextTick","ref","watch","filterInputAttrs","focusChild","genericComponent","only","propsFactory","useRender","makeVOtpInputProps","autofocus","Boolean","divider","String","focusAll","label","type","default","length","Number","modelValue","undefined","placeholder","variant","VOtpInput","name","props","emits","finish","val","setup","_ref","attrs","emit","slots","dimensionStyles","isFocused","focus","blur","model","split","join","t","fields","Array","value","fill","focusIndex","contentRef","inputRef","current","onInput","test","array","slice","target","onKeydown","e","index","includes","key","preventDefault","requestAnimationFrame","select","onPaste","stopPropagation","clipboardData","getData","reset","onFocus","onBlur","color","bgColor","baseColor","disabled","error","scoped","deep","rootAttrs","inputAttrs","_createVNode","_mergeProps","class","style","map","_","i","_Fragment","loader","event","loading","some","input"],"sources":["../../../src/components/VOtpInput/VOtpInput.tsx"],"sourcesContent":["// Styles\nimport './VOtpInput.sass'\n\n// Components\nimport { makeVFieldProps, VField } from '@/components/VField/VField'\nimport { VOverlay } from '@/components/VOverlay/VOverlay'\nimport { VProgressCircular } from '@/components/VProgressCircular/VProgressCircular'\n\n// Composables\nimport { provideDefaults } from '@/composables/defaults'\nimport { makeDimensionProps, useDimension } from '@/composables/dimensions'\nimport { makeFocusProps, useFocus } from '@/composables/focus'\nimport { useLocale } from '@/composables/locale'\nimport { useProxiedModel } from '@/composables/proxiedModel'\n\n// Utilities\nimport { computed, nextTick, ref, watch } from 'vue'\nimport { filterInputAttrs, focusChild, genericComponent, only, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\n\n// Types\nexport type VOtpInputSlots = {\n default: never\n loader: never\n}\n\nexport const makeVOtpInputProps = propsFactory({\n autofocus: Boolean,\n divider: String,\n focusAll: Boolean,\n label: {\n type: String,\n default: '$vuetify.input.otp',\n },\n length: {\n type: [Number, String],\n default: 6,\n },\n modelValue: {\n type: [Number, String],\n default: undefined,\n },\n placeholder: String,\n type: {\n type: String as PropType<'text' | 'password' | 'number'>,\n default: 'number',\n },\n\n ...makeDimensionProps(),\n ...makeFocusProps(),\n ...only(makeVFieldProps({\n variant: 'outlined' as const,\n }), [\n 'baseColor',\n 'bgColor',\n 'class',\n 'color',\n 'disabled',\n 'error',\n 'loading',\n 'rounded',\n 'style',\n 'theme',\n 'variant',\n ]),\n}, 'VOtpInput')\n\nexport const VOtpInput = genericComponent<VOtpInputSlots>()({\n name: 'VOtpInput',\n\n props: makeVOtpInputProps(),\n\n emits: {\n finish: (val: string) => true,\n 'update:focused': (val: boolean) => true,\n 'update:modelValue': (val: string) => true,\n },\n\n setup (props, { attrs, emit, slots }) {\n const { dimensionStyles } = useDimension(props)\n const { isFocused, focus, blur } = useFocus(props)\n const model = useProxiedModel(\n props,\n 'modelValue',\n '',\n val => String(val).split(''),\n val => val.join('')\n )\n const { t } = useLocale()\n\n const length = computed(() => Number(props.length))\n const fields = computed(() => Array(length.value).fill(0))\n const focusIndex = ref(-1)\n const contentRef = ref<HTMLElement>()\n const inputRef = ref<HTMLInputElement[]>([])\n const current = computed(() => inputRef.value[focusIndex.value])\n\n function onInput () {\n // The maxlength attribute doesn't work for the number type input, so the text type is used.\n // The following logic simulates the behavior of a number input.\n if (props.type === 'number' && /[^0-9]/g.test(current.value.value)) {\n current.value.value = ''\n return\n }\n const array = model.value.slice()\n const value = current.value.value\n\n array[focusIndex.value] = value\n\n let target: any = null\n\n if (focusIndex.value > model.value.length) {\n target = model.value.length + 1\n } else if (focusIndex.value + 1 !== length.value) {\n target = 'next'\n }\n\n model.value = array\n\n if (target) focusChild(contentRef.value!, target)\n }\n\n function onKeydown (e: KeyboardEvent) {\n const array = model.value.slice()\n const index = focusIndex.value\n let target: 'next' | 'prev' | 'first' | 'last' | number | null = null\n\n if (![\n 'ArrowLeft',\n 'ArrowRight',\n 'Backspace',\n 'Delete',\n ].includes(e.key)) return\n\n e.preventDefault()\n\n if (e.key === 'ArrowLeft') {\n target = 'prev'\n } else if (e.key === 'ArrowRight') {\n target = 'next'\n } else if (['Backspace', 'Delete'].includes(e.key)) {\n array[focusIndex.value] = ''\n\n model.value = array\n\n if (focusIndex.value > 0 && e.key === 'Backspace') {\n target = 'prev'\n } else {\n requestAnimationFrame(() => {\n inputRef.value[index]?.select()\n })\n }\n }\n\n requestAnimationFrame(() => {\n if (target != null) {\n focusChild(contentRef.value!, target)\n }\n })\n }\n\n function onPaste (index: number, e: ClipboardEvent) {\n e.preventDefault()\n e.stopPropagation()\n\n model.value = (e?.clipboardData?.getData('Text') ?? '').split('')\n\n inputRef.value?.[index].blur()\n }\n\n function reset () {\n model.value = []\n }\n\n function onFocus (e: FocusEvent, index: number) {\n focus()\n\n focusIndex.value = index\n }\n\n function onBlur () {\n blur()\n\n focusIndex.value = -1\n }\n\n provideDefaults({\n VField: {\n color: computed(() => props.color),\n bgColor: computed(() => props.color),\n baseColor: computed(() => props.baseColor),\n disabled: computed(() => props.disabled),\n error: computed(() => props.error),\n variant: computed(() => props.variant),\n },\n }, { scoped: true })\n\n watch(model, val => {\n if (val.length === length.value) emit('finish', val.join(''))\n }, { deep: true })\n\n watch(focusIndex, val => {\n if (val < 0) return\n\n nextTick(() => {\n inputRef.value[val]?.select()\n })\n })\n\n useRender(() => {\n const [rootAttrs, inputAttrs] = filterInputAttrs(attrs)\n\n return (\n <div\n class={[\n 'v-otp-input',\n {\n 'v-otp-input--divided': !!props.divider,\n },\n props.class,\n ]}\n style={[\n props.style,\n ]}\n { ...rootAttrs }\n >\n <div\n ref={ contentRef }\n class=\"v-otp-input__content\"\n style={[\n dimensionStyles.value,\n ]}\n >\n { fields.value.map((_, i) => (\n <>\n { props.divider && i !== 0 && (\n <span class=\"v-otp-input__divider\">{ props.divider }</span>\n )}\n\n <VField\n focused={ (isFocused.value && props.focusAll) || focusIndex.value === i }\n key={ i }\n >\n {{\n ...slots,\n loader: undefined,\n default: () => {\n return (\n <input\n ref={ val => inputRef.value[i] = val as HTMLInputElement }\n aria-label={ t(props.label, i + 1) }\n autofocus={ i === 0 && props.autofocus }\n autocomplete=\"one-time-code\"\n class={[\n 'v-otp-input__field',\n ]}\n disabled={ props.disabled }\n inputmode={ props.type === 'number' ? 'numeric' : 'text' }\n min={ props.type === 'number' ? 0 : undefined }\n maxlength=\"1\"\n placeholder={ props.placeholder }\n type={ props.type === 'number' ? 'text' : props.type }\n value={ model.value[i] }\n onInput={ onInput }\n onFocus={ e => onFocus(e, i) }\n onBlur={ onBlur }\n onKeydown={ onKeydown }\n onPaste={ event => onPaste(i, event) }\n />\n )\n },\n }}\n </VField>\n </>\n ))}\n\n <input\n class=\"v-otp-input-input\"\n type=\"hidden\"\n { ...inputAttrs }\n value={ model.value.join('') }\n />\n\n <VOverlay\n contained\n content-class=\"v-otp-input__loader\"\n model-value={ !!props.loading }\n persistent\n >\n { slots.loader?.() ?? (\n <VProgressCircular\n color={ typeof props.loading === 'boolean' ? undefined : props.loading }\n indeterminate\n size=\"24\"\n width=\"2\"\n />\n )}\n </VOverlay>\n\n { slots.default?.() }\n </div>\n </div>\n )\n })\n\n return {\n blur: () => {\n inputRef.value?.some(input => input.blur())\n },\n focus: () => {\n inputRef.value?.[0].focus()\n },\n reset,\n isFocused,\n }\n },\n})\n\nexport type VOtpInput = InstanceType<typeof VOtpInput>\n"],"mappings":"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"}
|
|
@@ -21,7 +21,7 @@ import { makeThemeProps, provideTheme } from "../../composables/theme.mjs";
|
|
|
21
21
|
import { useToggleScope } from "../../composables/toggleScope.mjs";
|
|
22
22
|
import { makeTransitionProps, MaybeTransition } from "../../composables/transition.mjs"; // Directives
|
|
23
23
|
import { ClickOutside } from "../../directives/click-outside/index.mjs"; // Utilities
|
|
24
|
-
import { computed, mergeProps, ref, Teleport, toRef, Transition, watch } from 'vue';
|
|
24
|
+
import { computed, mergeProps, onBeforeUnmount, ref, Teleport, toRef, Transition, watch } from 'vue';
|
|
25
25
|
import { animate, convertToUnit, genericComponent, getScrollParent, IN_BROWSER, propsFactory, standardEasing, useRender } from "../../util/index.mjs"; // Types
|
|
26
26
|
function Scrim(props) {
|
|
27
27
|
const {
|
|
@@ -110,7 +110,7 @@ export const VOverlay = genericComponent()({
|
|
|
110
110
|
} = useRtl();
|
|
111
111
|
const {
|
|
112
112
|
hasContent,
|
|
113
|
-
onAfterLeave
|
|
113
|
+
onAfterLeave: _onAfterLeave
|
|
114
114
|
} = useLazy(props, isActive);
|
|
115
115
|
const scrimColor = useBackgroundColor(computed(() => {
|
|
116
116
|
return typeof props.scrim === 'string' ? props.scrim : null;
|
|
@@ -177,6 +177,10 @@ export const VOverlay = genericComponent()({
|
|
|
177
177
|
}, {
|
|
178
178
|
immediate: true
|
|
179
179
|
});
|
|
180
|
+
onBeforeUnmount(() => {
|
|
181
|
+
if (!IN_BROWSER) return;
|
|
182
|
+
window.removeEventListener('keydown', onKeydown);
|
|
183
|
+
});
|
|
180
184
|
function onKeydown(e) {
|
|
181
185
|
if (e.key === 'Escape' && globalTop.value) {
|
|
182
186
|
if (!props.persistent) {
|
|
@@ -222,6 +226,10 @@ export const VOverlay = genericComponent()({
|
|
|
222
226
|
easing: standardEasing
|
|
223
227
|
});
|
|
224
228
|
}
|
|
229
|
+
function onAfterLeave() {
|
|
230
|
+
_onAfterLeave();
|
|
231
|
+
emit('afterLeave');
|
|
232
|
+
}
|
|
225
233
|
useRender(() => _createVNode(_Fragment, null, [slots.activator?.({
|
|
226
234
|
isActive: isActive.value,
|
|
227
235
|
props: mergeProps({
|
|
@@ -250,10 +258,7 @@ export const VOverlay = genericComponent()({
|
|
|
250
258
|
"persisted": true,
|
|
251
259
|
"transition": props.transition,
|
|
252
260
|
"target": target.value,
|
|
253
|
-
"onAfterLeave":
|
|
254
|
-
onAfterLeave();
|
|
255
|
-
emit('afterLeave');
|
|
256
|
-
}
|
|
261
|
+
"onAfterLeave": onAfterLeave
|
|
257
262
|
}, {
|
|
258
263
|
default: () => [_withDirectives(_createVNode("div", _mergeProps({
|
|
259
264
|
"ref": contentEl,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"VOverlay.mjs","names":["makeLocationStrategyProps","useLocationStrategies","makeScrollStrategyProps","useScrollStrategies","makeActivatorProps","useActivator","useBackgroundColor","makeComponentProps","makeDimensionProps","useDimension","useHydration","makeLazyProps","useLazy","useRtl","useProxiedModel","useBackButton","useRouter","useScopeId","useStack","useTeleport","makeThemeProps","provideTheme","useToggleScope","makeTransitionProps","MaybeTransition","ClickOutside","computed","mergeProps","ref","Teleport","toRef","Transition","watch","animate","convertToUnit","genericComponent","getScrollParent","IN_BROWSER","propsFactory","standardEasing","useRender","Scrim","props","modelValue","color","rest","_createVNode","default","_mergeProps","backgroundColorClasses","value","backgroundColorStyles","makeVOverlayProps","absolute","Boolean","attach","String","Object","closeOnBack","type","contained","contentClass","contentProps","disabled","noClickAnimation","persistent","scrim","zIndex","Number","VOverlay","name","directives","inheritAttrs","_disableGlobalStack","emits","e","afterLeave","setup","_ref","slots","attrs","emit","model","isActive","get","set","v","teleportTarget","themeClasses","rtlClasses","isRtl","hasContent","onAfterLeave","scrimColor","globalTop","localTop","stackStyles","activatorEl","activatorRef","target","targetEl","targetRef","activatorEvents","contentEvents","scrimEvents","isTop","dimensionStyles","isMounted","scopeId","root","contentEl","contentStyles","updateLocation","onClickOutside","animateClick","closeConditional","val","window","addEventListener","onKeydown","removeEventListener","immediate","key","contains","document","activeElement","focus","router","next","top","scrollParent","scrollingElement","scrollTop","transformOrigin","transform","duration","easing","_Fragment","activator","activatorProps","class","style","transition","_withDirectives","_vShow","_resolveDirective","handler","include"],"sources":["../../../src/components/VOverlay/VOverlay.tsx"],"sourcesContent":["// Styles\nimport './VOverlay.sass'\n\n// Composables\nimport { makeLocationStrategyProps, useLocationStrategies } from './locationStrategies'\nimport { makeScrollStrategyProps, useScrollStrategies } from './scrollStrategies'\nimport { makeActivatorProps, useActivator } from './useActivator'\nimport { useBackgroundColor } from '@/composables/color'\nimport { makeComponentProps } from '@/composables/component'\nimport { makeDimensionProps, useDimension } from '@/composables/dimensions'\nimport { useHydration } from '@/composables/hydration'\nimport { makeLazyProps, useLazy } from '@/composables/lazy'\nimport { useRtl } from '@/composables/locale'\nimport { useProxiedModel } from '@/composables/proxiedModel'\nimport { useBackButton, useRouter } from '@/composables/router'\nimport { useScopeId } from '@/composables/scopeId'\nimport { useStack } from '@/composables/stack'\nimport { useTeleport } from '@/composables/teleport'\nimport { makeThemeProps, provideTheme } from '@/composables/theme'\nimport { useToggleScope } from '@/composables/toggleScope'\nimport { makeTransitionProps, MaybeTransition } from '@/composables/transition'\n\n// Directives\nimport { ClickOutside } from '@/directives/click-outside'\n\n// Utilities\nimport {\n computed,\n mergeProps,\n ref,\n Teleport,\n toRef,\n Transition,\n watch,\n} from 'vue'\nimport {\n animate,\n convertToUnit,\n genericComponent,\n getScrollParent,\n IN_BROWSER,\n propsFactory,\n standardEasing,\n useRender,\n} from '@/util'\n\n// Types\nimport type { PropType, Ref } from 'vue'\nimport type { BackgroundColorData } from '@/composables/color'\n\ninterface ScrimProps {\n [key: string]: unknown\n modelValue: boolean\n color: BackgroundColorData\n}\nfunction Scrim (props: ScrimProps) {\n const { modelValue, color, ...rest } = props\n return (\n <Transition name=\"fade-transition\" appear>\n { props.modelValue && (\n <div\n class={[\n 'v-overlay__scrim',\n props.color.backgroundColorClasses.value,\n ]}\n style={ props.color.backgroundColorStyles.value }\n { ...rest }\n />\n )}\n </Transition>\n )\n}\n\nexport type OverlaySlots = {\n default: { isActive: Ref<boolean> }\n activator: { isActive: boolean, props: Record<string, any> }\n}\n\nexport const makeVOverlayProps = propsFactory({\n absolute: Boolean,\n attach: [Boolean, String, Object] as PropType<boolean | string | Element>,\n closeOnBack: {\n type: Boolean,\n default: true,\n },\n contained: Boolean,\n contentClass: null,\n contentProps: null,\n disabled: Boolean,\n noClickAnimation: Boolean,\n modelValue: Boolean,\n persistent: Boolean,\n scrim: {\n type: [Boolean, String],\n default: true,\n },\n zIndex: {\n type: [Number, String],\n default: 2000,\n },\n\n ...makeActivatorProps(),\n ...makeComponentProps(),\n ...makeDimensionProps(),\n ...makeLazyProps(),\n ...makeLocationStrategyProps(),\n ...makeScrollStrategyProps(),\n ...makeThemeProps(),\n ...makeTransitionProps(),\n}, 'VOverlay')\n\nexport const VOverlay = genericComponent<OverlaySlots>()({\n name: 'VOverlay',\n\n directives: { ClickOutside },\n\n inheritAttrs: false,\n\n props: {\n _disableGlobalStack: Boolean,\n\n ...makeVOverlayProps(),\n },\n\n emits: {\n 'click:outside': (e: MouseEvent) => true,\n 'update:modelValue': (value: boolean) => true,\n afterLeave: () => true,\n },\n\n setup (props, { slots, attrs, emit }) {\n const model = useProxiedModel(props, 'modelValue')\n const isActive = computed({\n get: () => model.value,\n set: v => {\n if (!(v && props.disabled)) model.value = v\n },\n })\n const { teleportTarget } = useTeleport(computed(() => props.attach || props.contained))\n const { themeClasses } = provideTheme(props)\n const { rtlClasses, isRtl } = useRtl()\n const { hasContent, onAfterLeave } = useLazy(props, isActive)\n const scrimColor = useBackgroundColor(computed(() => {\n return typeof props.scrim === 'string' ? props.scrim : null\n }))\n const { globalTop, localTop, stackStyles } = useStack(isActive, toRef(props, 'zIndex'), props._disableGlobalStack)\n const {\n activatorEl, activatorRef,\n target, targetEl, targetRef,\n activatorEvents,\n contentEvents,\n scrimEvents,\n } = useActivator(props, { isActive, isTop: localTop })\n const { dimensionStyles } = useDimension(props)\n const isMounted = useHydration()\n const { scopeId } = useScopeId()\n\n watch(() => props.disabled, v => {\n if (v) isActive.value = false\n })\n\n const root = ref<HTMLElement>()\n const contentEl = ref<HTMLElement>()\n const { contentStyles, updateLocation } = useLocationStrategies(props, {\n isRtl,\n contentEl,\n target,\n isActive,\n })\n useScrollStrategies(props, {\n root,\n contentEl,\n targetEl,\n isActive,\n updateLocation,\n })\n\n function onClickOutside (e: MouseEvent) {\n emit('click:outside', e)\n\n if (!props.persistent) isActive.value = false\n else animateClick()\n }\n\n function closeConditional () {\n return isActive.value && globalTop.value\n }\n\n IN_BROWSER && watch(isActive, val => {\n if (val) {\n window.addEventListener('keydown', onKeydown)\n } else {\n window.removeEventListener('keydown', onKeydown)\n }\n }, { immediate: true })\n\n function onKeydown (e: KeyboardEvent) {\n if (e.key === 'Escape' && globalTop.value) {\n if (!props.persistent) {\n isActive.value = false\n if (contentEl.value?.contains(document.activeElement)) {\n activatorEl.value?.focus()\n }\n } else animateClick()\n }\n }\n\n const router = useRouter()\n useToggleScope(() => props.closeOnBack, () => {\n useBackButton(router, next => {\n if (globalTop.value && isActive.value) {\n next(false)\n if (!props.persistent) isActive.value = false\n else animateClick()\n } else {\n next()\n }\n })\n })\n\n const top = ref<number>()\n watch(() => isActive.value && (props.absolute || props.contained) && teleportTarget.value == null, val => {\n if (val) {\n const scrollParent = getScrollParent(root.value)\n if (scrollParent && scrollParent !== document.scrollingElement) {\n top.value = scrollParent.scrollTop\n }\n }\n })\n\n // Add a quick \"bounce\" animation to the content\n function animateClick () {\n if (props.noClickAnimation) return\n\n contentEl.value && animate(contentEl.value, [\n { transformOrigin: 'center' },\n { transform: 'scale(1.03)' },\n { transformOrigin: 'center' },\n ], {\n duration: 150,\n easing: standardEasing,\n })\n }\n\n useRender(() => (\n <>\n { slots.activator?.({\n isActive: isActive.value,\n props: mergeProps({\n ref: activatorRef,\n targetRef,\n }, activatorEvents.value, props.activatorProps),\n })}\n\n { isMounted.value && hasContent.value && (\n <Teleport\n disabled={ !teleportTarget.value }\n to={ teleportTarget.value }\n >\n <div\n class={[\n 'v-overlay',\n {\n 'v-overlay--absolute': props.absolute || props.contained,\n 'v-overlay--active': isActive.value,\n 'v-overlay--contained': props.contained,\n },\n themeClasses.value,\n rtlClasses.value,\n props.class,\n ]}\n style={[\n stackStyles.value,\n { top: convertToUnit(top.value) },\n props.style,\n ]}\n ref={ root }\n { ...scopeId }\n { ...attrs }\n >\n <Scrim\n color={ scrimColor }\n modelValue={ isActive.value && !!props.scrim }\n { ...scrimEvents.value }\n />\n <MaybeTransition\n appear\n persisted\n transition={ props.transition }\n target={ target.value }\n onAfterLeave={ () => { onAfterLeave(); emit('afterLeave') } }\n >\n <div\n ref={ contentEl }\n v-show={ isActive.value }\n v-click-outside={{ handler: onClickOutside, closeConditional, include: () => [activatorEl.value] }}\n class={[\n 'v-overlay__content',\n props.contentClass,\n ]}\n style={[\n dimensionStyles.value,\n contentStyles.value,\n ]}\n { ...contentEvents.value }\n { ...props.contentProps }\n >\n { slots.default?.({ isActive }) }\n </div>\n </MaybeTransition>\n </div>\n </Teleport>\n )}\n </>\n ))\n\n return {\n activatorEl,\n target,\n animateClick,\n contentEl,\n globalTop,\n localTop,\n updateLocation,\n }\n },\n})\n\nexport type VOverlay = InstanceType<typeof VOverlay>\n"],"mappings":";AAAA;AACA;;AAEA;AAAA,SACSA,yBAAyB,EAAEC,qBAAqB;AAAA,SAChDC,uBAAuB,EAAEC,mBAAmB;AAAA,SAC5CC,kBAAkB,EAAEC,YAAY;AAAA,SAChCC,kBAAkB;AAAA,SAClBC,kBAAkB;AAAA,SAClBC,kBAAkB,EAAEC,YAAY;AAAA,SAChCC,YAAY;AAAA,SACZC,aAAa,EAAEC,OAAO;AAAA,SACtBC,MAAM;AAAA,SACNC,eAAe;AAAA,SACfC,aAAa,EAAEC,SAAS;AAAA,SACxBC,UAAU;AAAA,SACVC,QAAQ;AAAA,SACRC,WAAW;AAAA,SACXC,cAAc,EAAEC,YAAY;AAAA,SAC5BC,cAAc;AAAA,SACdC,mBAAmB,EAAEC,eAAe,4CAE7C;AAAA,SACSC,YAAY,oDAErB;AACA,SACEC,QAAQ,EACRC,UAAU,EACVC,GAAG,EACHC,QAAQ,EACRC,KAAK,EACLC,UAAU,EACVC,KAAK,QACA,KAAK;AAAA,SAEVC,OAAO,EACPC,aAAa,EACbC,gBAAgB,EAChBC,eAAe,EACfC,UAAU,EACVC,YAAY,EACZC,cAAc,EACdC,SAAS,gCAGX;AASA,SAASC,KAAKA,CAAEC,KAAiB,EAAE;EACjC,MAAM;IAAEC,UAAU;IAAEC,KAAK;IAAE,GAAGC;EAAK,CAAC,GAAGH,KAAK;EAC5C,OAAAI,YAAA,CAAAf,UAAA;IAAA;IAAA;EAAA;IAAAgB,OAAA,EAAAA,CAAA,MAEML,KAAK,CAACC,UAAU,IAAAG,YAAA,QAAAE,WAAA;MAAA,SAEP,CACL,kBAAkB,EAClBN,KAAK,CAACE,KAAK,CAACK,sBAAsB,CAACC,KAAK,CACzC;MAAA,SACOR,KAAK,CAACE,KAAK,CAACO,qBAAqB,CAACD;IAAK,GAC1CL,IAAI,QAEZ;EAAA;AAGP;AAOA,OAAO,MAAMO,iBAAiB,GAAGd,YAAY,CAAC;EAC5Ce,QAAQ,EAAEC,OAAO;EACjBC,MAAM,EAAE,CAACD,OAAO,EAAEE,MAAM,EAAEC,MAAM,CAAyC;EACzEC,WAAW,EAAE;IACXC,IAAI,EAAEL,OAAO;IACbP,OAAO,EAAE;EACX,CAAC;EACDa,SAAS,EAAEN,OAAO;EAClBO,YAAY,EAAE,IAAI;EAClBC,YAAY,EAAE,IAAI;EAClBC,QAAQ,EAAET,OAAO;EACjBU,gBAAgB,EAAEV,OAAO;EACzBX,UAAU,EAAEW,OAAO;EACnBW,UAAU,EAAEX,OAAO;EACnBY,KAAK,EAAE;IACLP,IAAI,EAAE,CAACL,OAAO,EAAEE,MAAM,CAAC;IACvBT,OAAO,EAAE;EACX,CAAC;EACDoB,MAAM,EAAE;IACNR,IAAI,EAAE,CAACS,MAAM,EAAEZ,MAAM,CAAC;IACtBT,OAAO,EAAE;EACX,CAAC;EAED,GAAG3C,kBAAkB,CAAC,CAAC;EACvB,GAAGG,kBAAkB,CAAC,CAAC;EACvB,GAAGC,kBAAkB,CAAC,CAAC;EACvB,GAAGG,aAAa,CAAC,CAAC;EAClB,GAAGX,yBAAyB,CAAC,CAAC;EAC9B,GAAGE,uBAAuB,CAAC,CAAC;EAC5B,GAAGkB,cAAc,CAAC,CAAC;EACnB,GAAGG,mBAAmB,CAAC;AACzB,CAAC,EAAE,UAAU,CAAC;AAEd,OAAO,MAAM8C,QAAQ,GAAGlC,gBAAgB,CAAe,CAAC,CAAC;EACvDmC,IAAI,EAAE,UAAU;EAEhBC,UAAU,EAAE;IAAE9C;EAAa,CAAC;EAE5B+C,YAAY,EAAE,KAAK;EAEnB9B,KAAK,EAAE;IACL+B,mBAAmB,EAAEnB,OAAO;IAE5B,GAAGF,iBAAiB,CAAC;EACvB,CAAC;EAEDsB,KAAK,EAAE;IACL,eAAe,EAAGC,CAAa,IAAK,IAAI;IACxC,mBAAmB,EAAGzB,KAAc,IAAK,IAAI;IAC7C0B,UAAU,EAAEA,CAAA,KAAM;EACpB,CAAC;EAEDC,KAAKA,CAAEnC,KAAK,EAAAoC,IAAA,EAA0B;IAAA,IAAxB;MAAEC,KAAK;MAAEC,KAAK;MAAEC;IAAK,CAAC,GAAAH,IAAA;IAClC,MAAMI,KAAK,GAAGpE,eAAe,CAAC4B,KAAK,EAAE,YAAY,CAAC;IAClD,MAAMyC,QAAQ,GAAGzD,QAAQ,CAAC;MACxB0D,GAAG,EAAEA,CAAA,KAAMF,KAAK,CAAChC,KAAK;MACtBmC,GAAG,EAAEC,CAAC,IAAI;QACR,IAAI,EAAEA,CAAC,IAAI5C,KAAK,CAACqB,QAAQ,CAAC,EAAEmB,KAAK,CAAChC,KAAK,GAAGoC,CAAC;MAC7C;IACF,CAAC,CAAC;IACF,MAAM;MAAEC;IAAe,CAAC,GAAGpE,WAAW,CAACO,QAAQ,CAAC,MAAMgB,KAAK,CAACa,MAAM,IAAIb,KAAK,CAACkB,SAAS,CAAC,CAAC;IACvF,MAAM;MAAE4B;IAAa,CAAC,GAAGnE,YAAY,CAACqB,KAAK,CAAC;IAC5C,MAAM;MAAE+C,UAAU;MAAEC;IAAM,CAAC,GAAG7E,MAAM,CAAC,CAAC;IACtC,MAAM;MAAE8E,UAAU;MAAEC;IAAa,CAAC,GAAGhF,OAAO,CAAC8B,KAAK,EAAEyC,QAAQ,CAAC;IAC7D,MAAMU,UAAU,GAAGvF,kBAAkB,CAACoB,QAAQ,CAAC,MAAM;MACnD,OAAO,OAAOgB,KAAK,CAACwB,KAAK,KAAK,QAAQ,GAAGxB,KAAK,CAACwB,KAAK,GAAG,IAAI;IAC7D,CAAC,CAAC,CAAC;IACH,MAAM;MAAE4B,SAAS;MAAEC,QAAQ;MAAEC;IAAY,CAAC,GAAG9E,QAAQ,CAACiE,QAAQ,EAAErD,KAAK,CAACY,KAAK,EAAE,QAAQ,CAAC,EAAEA,KAAK,CAAC+B,mBAAmB,CAAC;IAClH,MAAM;MACJwB,WAAW;MAAEC,YAAY;MACzBC,MAAM;MAAEC,QAAQ;MAAEC,SAAS;MAC3BC,eAAe;MACfC,aAAa;MACbC;IACF,CAAC,GAAGnG,YAAY,CAACqC,KAAK,EAAE;MAAEyC,QAAQ;MAAEsB,KAAK,EAAEV;IAAS,CAAC,CAAC;IACtD,MAAM;MAAEW;IAAgB,CAAC,GAAGjG,YAAY,CAACiC,KAAK,CAAC;IAC/C,MAAMiE,SAAS,GAAGjG,YAAY,CAAC,CAAC;IAChC,MAAM;MAAEkG;IAAQ,CAAC,GAAG3F,UAAU,CAAC,CAAC;IAEhCe,KAAK,CAAC,MAAMU,KAAK,CAACqB,QAAQ,EAAEuB,CAAC,IAAI;MAC/B,IAAIA,CAAC,EAAEH,QAAQ,CAACjC,KAAK,GAAG,KAAK;IAC/B,CAAC,CAAC;IAEF,MAAM2D,IAAI,GAAGjF,GAAG,CAAc,CAAC;IAC/B,MAAMkF,SAAS,GAAGlF,GAAG,CAAc,CAAC;IACpC,MAAM;MAAEmF,aAAa;MAAEC;IAAe,CAAC,GAAG/G,qBAAqB,CAACyC,KAAK,EAAE;MACrEgD,KAAK;MACLoB,SAAS;MACTX,MAAM;MACNhB;IACF,CAAC,CAAC;IACFhF,mBAAmB,CAACuC,KAAK,EAAE;MACzBmE,IAAI;MACJC,SAAS;MACTV,QAAQ;MACRjB,QAAQ;MACR6B;IACF,CAAC,CAAC;IAEF,SAASC,cAAcA,CAAEtC,CAAa,EAAE;MACtCM,IAAI,CAAC,eAAe,EAAEN,CAAC,CAAC;MAExB,IAAI,CAACjC,KAAK,CAACuB,UAAU,EAAEkB,QAAQ,CAACjC,KAAK,GAAG,KAAK,MACxCgE,YAAY,CAAC,CAAC;IACrB;IAEA,SAASC,gBAAgBA,CAAA,EAAI;MAC3B,OAAOhC,QAAQ,CAACjC,KAAK,IAAI4C,SAAS,CAAC5C,KAAK;IAC1C;IAEAb,UAAU,IAAIL,KAAK,CAACmD,QAAQ,EAAEiC,GAAG,IAAI;MACnC,IAAIA,GAAG,EAAE;QACPC,MAAM,CAACC,gBAAgB,CAAC,SAAS,EAAEC,SAAS,CAAC;MAC/C,CAAC,MAAM;QACLF,MAAM,CAACG,mBAAmB,CAAC,SAAS,EAAED,SAAS,CAAC;MAClD;IACF,CAAC,EAAE;MAAEE,SAAS,EAAE;IAAK,CAAC,CAAC;IAEvB,SAASF,SAASA,CAAE5C,CAAgB,EAAE;MACpC,IAAIA,CAAC,CAAC+C,GAAG,KAAK,QAAQ,IAAI5B,SAAS,CAAC5C,KAAK,EAAE;QACzC,IAAI,CAACR,KAAK,CAACuB,UAAU,EAAE;UACrBkB,QAAQ,CAACjC,KAAK,GAAG,KAAK;UACtB,IAAI4D,SAAS,CAAC5D,KAAK,EAAEyE,QAAQ,CAACC,QAAQ,CAACC,aAAa,CAAC,EAAE;YACrD5B,WAAW,CAAC/C,KAAK,EAAE4E,KAAK,CAAC,CAAC;UAC5B;QACF,CAAC,MAAMZ,YAAY,CAAC,CAAC;MACvB;IACF;IAEA,MAAMa,MAAM,GAAG/G,SAAS,CAAC,CAAC;IAC1BM,cAAc,CAAC,MAAMoB,KAAK,CAACgB,WAAW,EAAE,MAAM;MAC5C3C,aAAa,CAACgH,MAAM,EAAEC,IAAI,IAAI;QAC5B,IAAIlC,SAAS,CAAC5C,KAAK,IAAIiC,QAAQ,CAACjC,KAAK,EAAE;UACrC8E,IAAI,CAAC,KAAK,CAAC;UACX,IAAI,CAACtF,KAAK,CAACuB,UAAU,EAAEkB,QAAQ,CAACjC,KAAK,GAAG,KAAK,MACxCgE,YAAY,CAAC,CAAC;QACrB,CAAC,MAAM;UACLc,IAAI,CAAC,CAAC;QACR;MACF,CAAC,CAAC;IACJ,CAAC,CAAC;IAEF,MAAMC,GAAG,GAAGrG,GAAG,CAAS,CAAC;IACzBI,KAAK,CAAC,MAAMmD,QAAQ,CAACjC,KAAK,KAAKR,KAAK,CAACW,QAAQ,IAAIX,KAAK,CAACkB,SAAS,CAAC,IAAI2B,cAAc,CAACrC,KAAK,IAAI,IAAI,EAAEkE,GAAG,IAAI;MACxG,IAAIA,GAAG,EAAE;QACP,MAAMc,YAAY,GAAG9F,eAAe,CAACyE,IAAI,CAAC3D,KAAK,CAAC;QAChD,IAAIgF,YAAY,IAAIA,YAAY,KAAKN,QAAQ,CAACO,gBAAgB,EAAE;UAC9DF,GAAG,CAAC/E,KAAK,GAAGgF,YAAY,CAACE,SAAS;QACpC;MACF;IACF,CAAC,CAAC;;IAEF;IACA,SAASlB,YAAYA,CAAA,EAAI;MACvB,IAAIxE,KAAK,CAACsB,gBAAgB,EAAE;MAE5B8C,SAAS,CAAC5D,KAAK,IAAIjB,OAAO,CAAC6E,SAAS,CAAC5D,KAAK,EAAE,CAC1C;QAAEmF,eAAe,EAAE;MAAS,CAAC,EAC7B;QAAEC,SAAS,EAAE;MAAc,CAAC,EAC5B;QAAED,eAAe,EAAE;MAAS,CAAC,CAC9B,EAAE;QACDE,QAAQ,EAAE,GAAG;QACbC,MAAM,EAAEjG;MACV,CAAC,CAAC;IACJ;IAEAC,SAAS,CAAC,MAAAM,YAAA,CAAA2F,SAAA,SAEJ1D,KAAK,CAAC2D,SAAS,GAAG;MAClBvD,QAAQ,EAAEA,QAAQ,CAACjC,KAAK;MACxBR,KAAK,EAAEf,UAAU,CAAC;QAChBC,GAAG,EAAEsE,YAAY;QACjBG;MACF,CAAC,EAAEC,eAAe,CAACpD,KAAK,EAAER,KAAK,CAACiG,cAAc;IAChD,CAAC,CAAC,EAEAhC,SAAS,CAACzD,KAAK,IAAIyC,UAAU,CAACzC,KAAK,IAAAJ,YAAA,CAAAjB,QAAA;MAAA,YAEtB,CAAC0D,cAAc,CAACrC,KAAK;MAAA,MAC3BqC,cAAc,CAACrC;IAAK;MAAAH,OAAA,EAAAA,CAAA,MAAAD,YAAA,QAAAE,WAAA;QAAA,SAGhB,CACL,WAAW,EACX;UACE,qBAAqB,EAAEN,KAAK,CAACW,QAAQ,IAAIX,KAAK,CAACkB,SAAS;UACxD,mBAAmB,EAAEuB,QAAQ,CAACjC,KAAK;UACnC,sBAAsB,EAAER,KAAK,CAACkB;QAChC,CAAC,EACD4B,YAAY,CAACtC,KAAK,EAClBuC,UAAU,CAACvC,KAAK,EAChBR,KAAK,CAACkG,KAAK,CACZ;QAAA,SACM,CACL5C,WAAW,CAAC9C,KAAK,EACjB;UAAE+E,GAAG,EAAE/F,aAAa,CAAC+F,GAAG,CAAC/E,KAAK;QAAE,CAAC,EACjCR,KAAK,CAACmG,KAAK,CACZ;QAAA,OACKhC;MAAI,GACLD,OAAO,EACP5B,KAAK,IAAAlC,YAAA,CAAAL,KAAA,EAAAO,WAAA;QAAA,SAGA6C,UAAU;QAAA,cACLV,QAAQ,CAACjC,KAAK,IAAI,CAAC,CAACR,KAAK,CAACwB;MAAK,GACvCsC,WAAW,CAACtD,KAAK,UAAAJ,YAAA,CAAAtB,eAAA;QAAA;QAAA;QAAA,cAKTkB,KAAK,CAACoG,UAAU;QAAA,UACpB3C,MAAM,CAACjD,KAAK;QAAA,gBACN0C,CAAA,KAAM;UAAEA,YAAY,CAAC,CAAC;UAAEX,IAAI,CAAC,YAAY,CAAC;QAAC;MAAC;QAAAlC,OAAA,EAAAA,CAAA,MAAAgG,eAAA,CAAAjG,YAAA,QAAAE,WAAA;UAAA,OAGnD8D,SAAS;UAAA,SAGR,CACL,oBAAoB,EACpBpE,KAAK,CAACmB,YAAY,CACnB;UAAA,SACM,CACL6C,eAAe,CAACxD,KAAK,EACrB6D,aAAa,CAAC7D,KAAK;QACpB,GACIqD,aAAa,CAACrD,KAAK,EACnBR,KAAK,CAACoB,YAAY,IAErBiB,KAAK,CAAChC,OAAO,GAAG;UAAEoC;QAAS,CAAC,CAAC,MAAA6D,MAAA,EAbtB7D,QAAQ,CAACjC,KAAK,IAAA+F,iBAAA,mBACN;UAAEC,OAAO,EAAEjC,cAAc;UAAEE,gBAAgB;UAAEgC,OAAO,EAAEA,CAAA,KAAM,CAAClD,WAAW,CAAC/C,KAAK;QAAE,CAAC;MAAA;IAAA,EAiB3G,EAEJ,CAAC;IAEF,OAAO;MACL+C,WAAW;MACXE,MAAM;MACNe,YAAY;MACZJ,SAAS;MACThB,SAAS;MACTC,QAAQ;MACRiB;IACF,CAAC;EACH;AACF,CAAC,CAAC"}
|
|
1
|
+
{"version":3,"file":"VOverlay.mjs","names":["makeLocationStrategyProps","useLocationStrategies","makeScrollStrategyProps","useScrollStrategies","makeActivatorProps","useActivator","useBackgroundColor","makeComponentProps","makeDimensionProps","useDimension","useHydration","makeLazyProps","useLazy","useRtl","useProxiedModel","useBackButton","useRouter","useScopeId","useStack","useTeleport","makeThemeProps","provideTheme","useToggleScope","makeTransitionProps","MaybeTransition","ClickOutside","computed","mergeProps","onBeforeUnmount","ref","Teleport","toRef","Transition","watch","animate","convertToUnit","genericComponent","getScrollParent","IN_BROWSER","propsFactory","standardEasing","useRender","Scrim","props","modelValue","color","rest","_createVNode","default","_mergeProps","backgroundColorClasses","value","backgroundColorStyles","makeVOverlayProps","absolute","Boolean","attach","String","Object","closeOnBack","type","contained","contentClass","contentProps","disabled","noClickAnimation","persistent","scrim","zIndex","Number","VOverlay","name","directives","inheritAttrs","_disableGlobalStack","emits","e","afterLeave","setup","_ref","slots","attrs","emit","model","isActive","get","set","v","teleportTarget","themeClasses","rtlClasses","isRtl","hasContent","onAfterLeave","_onAfterLeave","scrimColor","globalTop","localTop","stackStyles","activatorEl","activatorRef","target","targetEl","targetRef","activatorEvents","contentEvents","scrimEvents","isTop","dimensionStyles","isMounted","scopeId","root","contentEl","contentStyles","updateLocation","onClickOutside","animateClick","closeConditional","val","window","addEventListener","onKeydown","removeEventListener","immediate","key","contains","document","activeElement","focus","router","next","top","scrollParent","scrollingElement","scrollTop","transformOrigin","transform","duration","easing","_Fragment","activator","activatorProps","class","style","transition","_withDirectives","_vShow","_resolveDirective","handler","include"],"sources":["../../../src/components/VOverlay/VOverlay.tsx"],"sourcesContent":["// Styles\nimport './VOverlay.sass'\n\n// Composables\nimport { makeLocationStrategyProps, useLocationStrategies } from './locationStrategies'\nimport { makeScrollStrategyProps, useScrollStrategies } from './scrollStrategies'\nimport { makeActivatorProps, useActivator } from './useActivator'\nimport { useBackgroundColor } from '@/composables/color'\nimport { makeComponentProps } from '@/composables/component'\nimport { makeDimensionProps, useDimension } from '@/composables/dimensions'\nimport { useHydration } from '@/composables/hydration'\nimport { makeLazyProps, useLazy } from '@/composables/lazy'\nimport { useRtl } from '@/composables/locale'\nimport { useProxiedModel } from '@/composables/proxiedModel'\nimport { useBackButton, useRouter } from '@/composables/router'\nimport { useScopeId } from '@/composables/scopeId'\nimport { useStack } from '@/composables/stack'\nimport { useTeleport } from '@/composables/teleport'\nimport { makeThemeProps, provideTheme } from '@/composables/theme'\nimport { useToggleScope } from '@/composables/toggleScope'\nimport { makeTransitionProps, MaybeTransition } from '@/composables/transition'\n\n// Directives\nimport { ClickOutside } from '@/directives/click-outside'\n\n// Utilities\nimport {\n computed,\n mergeProps,\n onBeforeUnmount,\n ref,\n Teleport,\n toRef,\n Transition,\n watch,\n} from 'vue'\nimport {\n animate,\n convertToUnit,\n genericComponent,\n getScrollParent,\n IN_BROWSER,\n propsFactory,\n standardEasing,\n useRender,\n} from '@/util'\n\n// Types\nimport type { PropType, Ref } from 'vue'\nimport type { BackgroundColorData } from '@/composables/color'\n\ninterface ScrimProps {\n [key: string]: unknown\n modelValue: boolean\n color: BackgroundColorData\n}\nfunction Scrim (props: ScrimProps) {\n const { modelValue, color, ...rest } = props\n return (\n <Transition name=\"fade-transition\" appear>\n { props.modelValue && (\n <div\n class={[\n 'v-overlay__scrim',\n props.color.backgroundColorClasses.value,\n ]}\n style={ props.color.backgroundColorStyles.value }\n { ...rest }\n />\n )}\n </Transition>\n )\n}\n\nexport type OverlaySlots = {\n default: { isActive: Ref<boolean> }\n activator: { isActive: boolean, props: Record<string, any> }\n}\n\nexport const makeVOverlayProps = propsFactory({\n absolute: Boolean,\n attach: [Boolean, String, Object] as PropType<boolean | string | Element>,\n closeOnBack: {\n type: Boolean,\n default: true,\n },\n contained: Boolean,\n contentClass: null,\n contentProps: null,\n disabled: Boolean,\n noClickAnimation: Boolean,\n modelValue: Boolean,\n persistent: Boolean,\n scrim: {\n type: [Boolean, String],\n default: true,\n },\n zIndex: {\n type: [Number, String],\n default: 2000,\n },\n\n ...makeActivatorProps(),\n ...makeComponentProps(),\n ...makeDimensionProps(),\n ...makeLazyProps(),\n ...makeLocationStrategyProps(),\n ...makeScrollStrategyProps(),\n ...makeThemeProps(),\n ...makeTransitionProps(),\n}, 'VOverlay')\n\nexport const VOverlay = genericComponent<OverlaySlots>()({\n name: 'VOverlay',\n\n directives: { ClickOutside },\n\n inheritAttrs: false,\n\n props: {\n _disableGlobalStack: Boolean,\n\n ...makeVOverlayProps(),\n },\n\n emits: {\n 'click:outside': (e: MouseEvent) => true,\n 'update:modelValue': (value: boolean) => true,\n afterLeave: () => true,\n },\n\n setup (props, { slots, attrs, emit }) {\n const model = useProxiedModel(props, 'modelValue')\n const isActive = computed({\n get: () => model.value,\n set: v => {\n if (!(v && props.disabled)) model.value = v\n },\n })\n const { teleportTarget } = useTeleport(computed(() => props.attach || props.contained))\n const { themeClasses } = provideTheme(props)\n const { rtlClasses, isRtl } = useRtl()\n const { hasContent, onAfterLeave: _onAfterLeave } = useLazy(props, isActive)\n const scrimColor = useBackgroundColor(computed(() => {\n return typeof props.scrim === 'string' ? props.scrim : null\n }))\n const { globalTop, localTop, stackStyles } = useStack(isActive, toRef(props, 'zIndex'), props._disableGlobalStack)\n const {\n activatorEl, activatorRef,\n target, targetEl, targetRef,\n activatorEvents,\n contentEvents,\n scrimEvents,\n } = useActivator(props, { isActive, isTop: localTop })\n const { dimensionStyles } = useDimension(props)\n const isMounted = useHydration()\n const { scopeId } = useScopeId()\n\n watch(() => props.disabled, v => {\n if (v) isActive.value = false\n })\n\n const root = ref<HTMLElement>()\n const contentEl = ref<HTMLElement>()\n const { contentStyles, updateLocation } = useLocationStrategies(props, {\n isRtl,\n contentEl,\n target,\n isActive,\n })\n useScrollStrategies(props, {\n root,\n contentEl,\n targetEl,\n isActive,\n updateLocation,\n })\n\n function onClickOutside (e: MouseEvent) {\n emit('click:outside', e)\n\n if (!props.persistent) isActive.value = false\n else animateClick()\n }\n\n function closeConditional () {\n return isActive.value && globalTop.value\n }\n\n IN_BROWSER && watch(isActive, val => {\n if (val) {\n window.addEventListener('keydown', onKeydown)\n } else {\n window.removeEventListener('keydown', onKeydown)\n }\n }, { immediate: true })\n\n onBeforeUnmount(() => {\n if (!IN_BROWSER) return\n\n window.removeEventListener('keydown', onKeydown)\n })\n\n function onKeydown (e: KeyboardEvent) {\n if (e.key === 'Escape' && globalTop.value) {\n if (!props.persistent) {\n isActive.value = false\n if (contentEl.value?.contains(document.activeElement)) {\n activatorEl.value?.focus()\n }\n } else animateClick()\n }\n }\n\n const router = useRouter()\n useToggleScope(() => props.closeOnBack, () => {\n useBackButton(router, next => {\n if (globalTop.value && isActive.value) {\n next(false)\n if (!props.persistent) isActive.value = false\n else animateClick()\n } else {\n next()\n }\n })\n })\n\n const top = ref<number>()\n watch(() => isActive.value && (props.absolute || props.contained) && teleportTarget.value == null, val => {\n if (val) {\n const scrollParent = getScrollParent(root.value)\n if (scrollParent && scrollParent !== document.scrollingElement) {\n top.value = scrollParent.scrollTop\n }\n }\n })\n\n // Add a quick \"bounce\" animation to the content\n function animateClick () {\n if (props.noClickAnimation) return\n\n contentEl.value && animate(contentEl.value, [\n { transformOrigin: 'center' },\n { transform: 'scale(1.03)' },\n { transformOrigin: 'center' },\n ], {\n duration: 150,\n easing: standardEasing,\n })\n }\n\n function onAfterLeave () {\n _onAfterLeave()\n emit('afterLeave')\n }\n\n useRender(() => (\n <>\n { slots.activator?.({\n isActive: isActive.value,\n props: mergeProps({\n ref: activatorRef,\n targetRef,\n }, activatorEvents.value, props.activatorProps),\n })}\n\n { isMounted.value && hasContent.value && (\n <Teleport\n disabled={ !teleportTarget.value }\n to={ teleportTarget.value }\n >\n <div\n class={[\n 'v-overlay',\n {\n 'v-overlay--absolute': props.absolute || props.contained,\n 'v-overlay--active': isActive.value,\n 'v-overlay--contained': props.contained,\n },\n themeClasses.value,\n rtlClasses.value,\n props.class,\n ]}\n style={[\n stackStyles.value,\n { top: convertToUnit(top.value) },\n props.style,\n ]}\n ref={ root }\n { ...scopeId }\n { ...attrs }\n >\n <Scrim\n color={ scrimColor }\n modelValue={ isActive.value && !!props.scrim }\n { ...scrimEvents.value }\n />\n <MaybeTransition\n appear\n persisted\n transition={ props.transition }\n target={ target.value }\n onAfterLeave={ onAfterLeave }\n >\n <div\n ref={ contentEl }\n v-show={ isActive.value }\n v-click-outside={{ handler: onClickOutside, closeConditional, include: () => [activatorEl.value] }}\n class={[\n 'v-overlay__content',\n props.contentClass,\n ]}\n style={[\n dimensionStyles.value,\n contentStyles.value,\n ]}\n { ...contentEvents.value }\n { ...props.contentProps }\n >\n { slots.default?.({ isActive }) }\n </div>\n </MaybeTransition>\n </div>\n </Teleport>\n )}\n </>\n ))\n\n return {\n activatorEl,\n target,\n animateClick,\n contentEl,\n globalTop,\n localTop,\n updateLocation,\n }\n },\n})\n\nexport type VOverlay = InstanceType<typeof VOverlay>\n"],"mappings":"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"}
|
|
@@ -59,7 +59,7 @@ export const makeVSelectProps = propsFactory({
|
|
|
59
59
|
...makeSelectProps(),
|
|
60
60
|
...omit(makeVTextFieldProps({
|
|
61
61
|
modelValue: null,
|
|
62
|
-
role: '
|
|
62
|
+
role: 'combobox'
|
|
63
63
|
}), ['validationValue', 'dirty', 'appendInnerIcon']),
|
|
64
64
|
...makeTransitionProps({
|
|
65
65
|
transition: {
|
|
@@ -118,6 +118,16 @@ export const VSelect = genericComponent()({
|
|
|
118
118
|
return items.value;
|
|
119
119
|
});
|
|
120
120
|
const menuDisabled = computed(() => props.hideNoData && !items.value.length || props.readonly || form?.isReadonly.value);
|
|
121
|
+
const computedMenuProps = computed(() => {
|
|
122
|
+
return {
|
|
123
|
+
...props.menuProps,
|
|
124
|
+
activatorProps: {
|
|
125
|
+
...(props.menuProps?.activatorProps || {}),
|
|
126
|
+
'aria-haspopup': 'listbox' // Set aria-haspopup to 'listbox'
|
|
127
|
+
}
|
|
128
|
+
};
|
|
129
|
+
});
|
|
130
|
+
|
|
121
131
|
const listRef = ref();
|
|
122
132
|
const {
|
|
123
133
|
onListScroll,
|
|
@@ -262,7 +272,7 @@ export const VSelect = genericComponent()({
|
|
|
262
272
|
"closeOnContentClick": false,
|
|
263
273
|
"transition": props.transition,
|
|
264
274
|
"onAfterLeave": onAfterLeave
|
|
265
|
-
},
|
|
275
|
+
}, computedMenuProps.value), {
|
|
266
276
|
default: () => [hasList && _createVNode(VList, {
|
|
267
277
|
"ref": listRef,
|
|
268
278
|
"selected": selectedValues.value,
|