@vc-shell/framework 1.1.18 → 1.1.19
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/CHANGELOG.md +9 -0
- package/dist/framework.js +1 -1
- package/dist/{index-C8U4bk1-.js → index-BFhNVNTZ.js} +1 -1
- package/dist/{index-BWvofd8L.js → index-BJ39J43e.js} +1 -1
- package/dist/{index-B-_pypoR.js → index-BRQ9wWZR.js} +1 -1
- package/dist/{index-C8jsLNj0.js → index-BoGxKFnu.js} +1 -1
- package/dist/{index-BX4mc81I.js → index-BvsQBH3w.js} +1 -1
- package/dist/{index--i2CrsJJ.js → index-BwOwXBut.js} +1 -1
- package/dist/{index-DC8hKkuO.js → index-CEEN9FWP.js} +1 -1
- package/dist/{index-DTFCTb6P.js → index-CFKt4CD5.js} +1 -1
- package/dist/{index-wl6u-5rt.js → index-CH1B6sJF.js} +1 -1
- package/dist/{index-sdqR8ULO.js → index-CgZYncHs.js} +1 -1
- package/dist/{index-DdjamMzX.js → index-CjOyhVA4.js} +27971 -27954
- package/dist/{index-wsEOQiHr.js → index-DkYs6XSR.js} +1 -1
- package/dist/{index-CyGdldvT.js → index-T_R-gZqQ.js} +1 -1
- package/dist/{index-x3QIr8mC.js → index-hV9___CR.js} +1 -1
- package/dist/{index-cZv5B-OC.js → index-nqbjSJZb.js} +1 -1
- package/dist/{index-CP3k1nfq.js → index-uTKF7rlc.js} +1 -1
- package/dist/{index-B4Q9DkTB.js → index-zEitvdcx.js} +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/dist/ui/components/molecules/vc-input-dropdown/vc-input-dropdown.vue.d.ts +2 -2
- package/dist/ui/components/molecules/vc-input-dropdown/vc-input-dropdown.vue.d.ts.map +1 -1
- package/dist/ui/components/molecules/vc-select/vc-select.vue.d.ts.map +1 -1
- package/package.json +4 -4
- package/ui/components/molecules/vc-input-dropdown/vc-input-dropdown.vue +2 -2
- package/ui/components/molecules/vc-select/vc-select.vue +186 -68
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"vc-input-dropdown.vue.d.ts","sourceRoot":"","sources":["../../../../../ui/components/molecules/vc-input-dropdown/vc-input-dropdown.vue"],"names":[],"mappings":"AA6RA,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAExD,MAAM,WAAW,KAAK;IACpB;;OAEG;IACH,UAAU,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,SAAS,CAAC;IACtD;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,MAAM,
|
|
1
|
+
{"version":3,"file":"vc-input-dropdown.vue.d.ts","sourceRoot":"","sources":["../../../../../ui/components/molecules/vc-input-dropdown/vc-input-dropdown.vue"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"vc-select.vue.d.ts","sourceRoot":"","sources":["../../../../../ui/components/molecules/vc-select/vc-select.vue"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"vc-select.vue.d.ts","sourceRoot":"","sources":["../../../../../ui/components/molecules/vc-select/vc-select.vue"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vc-shell/framework",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.19",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "./dist/framework.js",
|
|
6
6
|
"types": "./dist/index.d.ts",
|
|
@@ -70,9 +70,9 @@
|
|
|
70
70
|
"devDependencies": {
|
|
71
71
|
"@fullhuman/postcss-purgecss": "^7.0.2",
|
|
72
72
|
"@types/dompurify": "^3.0.5",
|
|
73
|
-
"@vc-shell/api-client-generator": "^1.1.
|
|
74
|
-
"@vc-shell/config-generator": "^1.1.
|
|
75
|
-
"@vc-shell/ts-config": "^1.1.
|
|
73
|
+
"@vc-shell/api-client-generator": "^1.1.19",
|
|
74
|
+
"@vc-shell/config-generator": "^1.1.19",
|
|
75
|
+
"@vc-shell/ts-config": "^1.1.19",
|
|
76
76
|
"@vitejs/plugin-vue": "^5.2.3",
|
|
77
77
|
"@vue/test-utils": "^2.4.5",
|
|
78
78
|
"cypress-signalr-mock": "^1.5.0",
|
|
@@ -171,9 +171,9 @@ export interface Props {
|
|
|
171
171
|
*/
|
|
172
172
|
required?: boolean;
|
|
173
173
|
/**
|
|
174
|
-
*
|
|
174
|
+
* Default selected option from dropdown
|
|
175
175
|
*/
|
|
176
|
-
option
|
|
176
|
+
option: unknown;
|
|
177
177
|
/**
|
|
178
178
|
* Available options that the user can select from.
|
|
179
179
|
* Default value: []
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div
|
|
3
|
+
ref="selectRootRef"
|
|
3
4
|
class="vc-select"
|
|
4
5
|
:class="{
|
|
5
6
|
'vc-select_opened': isOpened,
|
|
@@ -98,7 +99,7 @@
|
|
|
98
99
|
v-bind="item"
|
|
99
100
|
>
|
|
100
101
|
<div class="vc-select__multiple-item">
|
|
101
|
-
<template v-if="loading">
|
|
102
|
+
<template v-if="loading || defaultOptionLoading">
|
|
102
103
|
<span class="vc-select__loading">{{
|
|
103
104
|
t("COMPONENTS.MOLECULES.VC_SELECT.LOADING")
|
|
104
105
|
}}</span>
|
|
@@ -117,7 +118,7 @@
|
|
|
117
118
|
</slot>
|
|
118
119
|
</template>
|
|
119
120
|
<template v-else-if="!multiple">
|
|
120
|
-
<template v-if="loading">
|
|
121
|
+
<template v-if="loading || defaultOptionLoading">
|
|
121
122
|
<span class="vc-select__loading">{{
|
|
122
123
|
t("COMPONENTS.MOLECULES.VC_SELECT.LOADING")
|
|
123
124
|
}}</span>
|
|
@@ -128,7 +129,7 @@
|
|
|
128
129
|
v-bind="item"
|
|
129
130
|
>
|
|
130
131
|
{{
|
|
131
|
-
loading
|
|
132
|
+
loading || defaultOptionLoading
|
|
132
133
|
? t("COMPONENTS.MOLECULES.VC_SELECT.LOADING")
|
|
133
134
|
: getEmittingOptionValue(item.opt)
|
|
134
135
|
}}
|
|
@@ -167,7 +168,7 @@
|
|
|
167
168
|
</div>
|
|
168
169
|
<!-- Loading-->
|
|
169
170
|
<div
|
|
170
|
-
v-if="loading || listLoading"
|
|
171
|
+
v-if="loading || listLoading || defaultOptionLoading"
|
|
171
172
|
class="vc-select__loading-icon"
|
|
172
173
|
>
|
|
173
174
|
<VcIcon
|
|
@@ -250,6 +251,8 @@
|
|
|
250
251
|
class="vc-select__search-input"
|
|
251
252
|
tabindex="0"
|
|
252
253
|
@input="onInput"
|
|
254
|
+
@keydown.space.stop
|
|
255
|
+
@keydown.enter.stop
|
|
253
256
|
/>
|
|
254
257
|
|
|
255
258
|
<VcContainer
|
|
@@ -320,7 +323,7 @@
|
|
|
320
323
|
|
|
321
324
|
<!-- eslint-disable @typescript-eslint/no-explicit-any -->
|
|
322
325
|
<script lang="ts" setup generic="T, P extends { results?: T[]; totalCount?: number }">
|
|
323
|
-
import { ref, computed, watch, nextTick, Ref, toRefs } from "vue";
|
|
326
|
+
import { ref, computed, watch, nextTick, Ref, toRefs, onMounted, onUnmounted } from "vue";
|
|
324
327
|
import { vOnClickOutside } from "@vueuse/components";
|
|
325
328
|
import * as _ from "lodash-es";
|
|
326
329
|
import { useIntersectionObserver } from "@vueuse/core";
|
|
@@ -577,6 +580,9 @@ const { t } = useI18n({ useScope: "global" });
|
|
|
577
580
|
|
|
578
581
|
const { modelValue, options } = toRefs(props);
|
|
579
582
|
|
|
583
|
+
const selectRootRef = ref<HTMLDivElement | null>(null);
|
|
584
|
+
const isSelectVisible = ref(false);
|
|
585
|
+
|
|
580
586
|
const isOpened = ref(false);
|
|
581
587
|
|
|
582
588
|
const searchRef = ref();
|
|
@@ -585,6 +591,7 @@ const dropdownRef = ref();
|
|
|
585
591
|
const root = ref();
|
|
586
592
|
const el = ref();
|
|
587
593
|
const listLoading = ref(false);
|
|
594
|
+
const defaultOptionLoading = ref(false);
|
|
588
595
|
const isFocused = ref(false);
|
|
589
596
|
|
|
590
597
|
const filterString = ref();
|
|
@@ -601,6 +608,33 @@ let emitValueFn;
|
|
|
601
608
|
let emitTimer: NodeJS.Timeout;
|
|
602
609
|
let innerValueCache: Option[];
|
|
603
610
|
|
|
611
|
+
let rootVisibilityObserver: IntersectionObserver | null = null;
|
|
612
|
+
|
|
613
|
+
onMounted(() => {
|
|
614
|
+
if (selectRootRef.value) {
|
|
615
|
+
rootVisibilityObserver = new IntersectionObserver(
|
|
616
|
+
([entry]) => {
|
|
617
|
+
if (entry.isIntersecting) {
|
|
618
|
+
isSelectVisible.value = true;
|
|
619
|
+
} else {
|
|
620
|
+
isSelectVisible.value = false;
|
|
621
|
+
}
|
|
622
|
+
},
|
|
623
|
+
{ threshold: 0.1 },
|
|
624
|
+
);
|
|
625
|
+
rootVisibilityObserver.observe(selectRootRef.value);
|
|
626
|
+
}
|
|
627
|
+
});
|
|
628
|
+
|
|
629
|
+
onUnmounted(() => {
|
|
630
|
+
if (rootVisibilityObserver && selectRootRef.value) {
|
|
631
|
+
rootVisibilityObserver.unobserve(selectRootRef.value);
|
|
632
|
+
}
|
|
633
|
+
if (rootVisibilityObserver) {
|
|
634
|
+
rootVisibilityObserver.disconnect();
|
|
635
|
+
}
|
|
636
|
+
});
|
|
637
|
+
|
|
604
638
|
useIntersectionObserver(
|
|
605
639
|
el,
|
|
606
640
|
([{ isIntersecting }]) => {
|
|
@@ -625,89 +659,150 @@ const popper = useFloating(dropdownToggleRef, dropdownRef, {
|
|
|
625
659
|
}) as FloatingInstanceType;
|
|
626
660
|
|
|
627
661
|
watch(
|
|
628
|
-
modelValue,
|
|
629
|
-
async (
|
|
630
|
-
|
|
631
|
-
|
|
632
|
-
|
|
633
|
-
|
|
634
|
-
|
|
635
|
-
|
|
636
|
-
|
|
637
|
-
|
|
638
|
-
}
|
|
639
|
-
});
|
|
662
|
+
[() => props.modelValue, isSelectVisible],
|
|
663
|
+
async ([currentModelVal, selectIsVisible]) => {
|
|
664
|
+
let modelAsArrayValueIds: (string | number | Record<string, any> | null)[] = [];
|
|
665
|
+
if (Array.isArray(currentModelVal)) {
|
|
666
|
+
modelAsArrayValueIds = props.emitValue
|
|
667
|
+
? currentModelVal
|
|
668
|
+
: currentModelVal.map((v) => getOptionValue.value(v as Option));
|
|
669
|
+
} else if (currentModelVal != null) {
|
|
670
|
+
modelAsArrayValueIds = [props.emitValue ? currentModelVal : getOptionValue.value(currentModelVal as Option)];
|
|
671
|
+
}
|
|
640
672
|
|
|
641
|
-
|
|
642
|
-
|
|
643
|
-
|
|
644
|
-
|
|
645
|
-
|
|
646
|
-
|
|
647
|
-
|
|
648
|
-
|
|
649
|
-
|
|
650
|
-
|
|
651
|
-
|
|
652
|
-
|
|
653
|
-
|
|
654
|
-
|
|
655
|
-
|
|
656
|
-
|
|
657
|
-
|
|
658
|
-
|
|
659
|
-
|
|
660
|
-
|
|
661
|
-
|
|
662
|
-
|
|
673
|
+
const currentDefaultValueIds = defaultValue.value.map((opt) => getOptionValue.value(opt));
|
|
674
|
+
|
|
675
|
+
const sortedCurrentDefaultIds = [...currentDefaultValueIds].sort((a, b) => String(a).localeCompare(String(b)));
|
|
676
|
+
const sortedModelValueIds = [...modelAsArrayValueIds].sort((a, b) => String(a).localeCompare(String(b)));
|
|
677
|
+
|
|
678
|
+
const isDefaultValueResolved =
|
|
679
|
+
_.isEqual(sortedCurrentDefaultIds, sortedModelValueIds) &&
|
|
680
|
+
(modelAsArrayValueIds.length > 0 || defaultValue.value.length === 0);
|
|
681
|
+
|
|
682
|
+
if (!selectIsVisible) {
|
|
683
|
+
if (modelAsArrayValueIds.length === 0 && defaultValue.value.length > 0) {
|
|
684
|
+
defaultValue.value = [];
|
|
685
|
+
}
|
|
686
|
+
return;
|
|
687
|
+
}
|
|
688
|
+
|
|
689
|
+
if (modelAsArrayValueIds.length === 0) {
|
|
690
|
+
if (defaultValue.value.length > 0) {
|
|
691
|
+
defaultValue.value = [];
|
|
692
|
+
}
|
|
693
|
+
return;
|
|
694
|
+
}
|
|
695
|
+
|
|
696
|
+
if (!isDefaultValueResolved) {
|
|
697
|
+
if (props.options && typeof props.options === "function") {
|
|
698
|
+
try {
|
|
699
|
+
defaultOptionLoading.value = true;
|
|
700
|
+
const idsToFetch = modelAsArrayValueIds.filter((id) => id != null) as string[];
|
|
701
|
+
|
|
702
|
+
if (
|
|
703
|
+
idsToFetch.length === 0 &&
|
|
704
|
+
!(
|
|
705
|
+
modelAsArrayValueIds.length === 1 &&
|
|
706
|
+
modelAsArrayValueIds[0] == null &&
|
|
707
|
+
props.mapOptions &&
|
|
708
|
+
!props.multiple
|
|
709
|
+
)
|
|
710
|
+
) {
|
|
711
|
+
defaultValue.value = [];
|
|
712
|
+
defaultOptionLoading.value = false;
|
|
713
|
+
return;
|
|
663
714
|
}
|
|
664
|
-
|
|
665
|
-
|
|
666
|
-
|
|
667
|
-
)
|
|
715
|
+
|
|
716
|
+
const data = await props.options(undefined, undefined, idsToFetch);
|
|
717
|
+
|
|
718
|
+
if (typeof data === "object" && !Array.isArray(data) && "results" in data && data.results) {
|
|
719
|
+
const results = data.results as Option[];
|
|
720
|
+
defaultValue.value = results.filter((rOpt) =>
|
|
721
|
+
modelAsArrayValueIds.some((mId) => _.isEqual(getOptionValue.value(rOpt), mId)),
|
|
722
|
+
);
|
|
723
|
+
} else {
|
|
724
|
+
defaultValue.value = [];
|
|
725
|
+
}
|
|
726
|
+
} catch (e) {
|
|
727
|
+
console.error("Error loading default options:", e);
|
|
728
|
+
defaultValue.value = [];
|
|
729
|
+
} finally {
|
|
730
|
+
defaultOptionLoading.value = false;
|
|
668
731
|
}
|
|
732
|
+
} else if (props.options && Array.isArray(props.options)) {
|
|
733
|
+
defaultValue.value = (props.options as Option[]).filter((opt) =>
|
|
734
|
+
modelAsArrayValueIds.some((mId) => _.isEqual(getOptionValue.value(opt), mId)),
|
|
735
|
+
);
|
|
669
736
|
}
|
|
670
737
|
}
|
|
671
738
|
},
|
|
672
|
-
{ immediate: true },
|
|
739
|
+
{ immediate: true, deep: true },
|
|
673
740
|
);
|
|
674
741
|
|
|
675
742
|
watch(
|
|
676
|
-
isOpened,
|
|
677
|
-
async (
|
|
678
|
-
if (
|
|
679
|
-
|
|
680
|
-
|
|
681
|
-
|
|
682
|
-
|
|
683
|
-
|
|
684
|
-
|
|
685
|
-
|
|
686
|
-
|
|
743
|
+
[isOpened, isSelectVisible],
|
|
744
|
+
async ([newIsOpened, newIsSelectVisible]) => {
|
|
745
|
+
if (newIsOpened && newIsSelectVisible) {
|
|
746
|
+
const needsLoad =
|
|
747
|
+
optionsList.value.length === 0 ||
|
|
748
|
+
(props.options && typeof props.options === "function" && filterString.value && !listLoading.value);
|
|
749
|
+
|
|
750
|
+
if (needsLoad) {
|
|
751
|
+
if (props.options && typeof props.options === "function") {
|
|
752
|
+
await loadOptionsForOpenDropdown();
|
|
753
|
+
} else if (props.options && Array.isArray(props.options)) {
|
|
754
|
+
optionsList.value = [...props.options] as Option[];
|
|
755
|
+
optionsTemp.value = optionsList.value;
|
|
756
|
+
totalItems.value = optionsList.value.length;
|
|
687
757
|
}
|
|
688
758
|
}
|
|
689
759
|
|
|
690
|
-
|
|
691
|
-
|
|
692
|
-
|
|
693
|
-
|
|
760
|
+
nextTick(() => {
|
|
761
|
+
popper.update();
|
|
762
|
+
if (dropdownRef.value) {
|
|
763
|
+
keyboardNavigation.initKeyboardNavigation(dropdownRef.value);
|
|
764
|
+
if (props.searchable && searchRef.value) {
|
|
765
|
+
searchRef.value.focus();
|
|
766
|
+
} else {
|
|
767
|
+
const firstFocusable = dropdownRef.value.querySelector(
|
|
768
|
+
'.vc-select__option[tabindex="0"], .vc-select__search-input[tabindex="0"]',
|
|
769
|
+
) as HTMLElement | null;
|
|
770
|
+
|
|
771
|
+
if (firstFocusable) {
|
|
772
|
+
firstFocusable.focus();
|
|
773
|
+
} else {
|
|
774
|
+
keyboardNavigation.focusFirstElement();
|
|
775
|
+
}
|
|
776
|
+
}
|
|
777
|
+
}
|
|
778
|
+
});
|
|
779
|
+
} else if (!newIsOpened) {
|
|
780
|
+
keyboardNavigation.cleanupKeyboardNavigation();
|
|
694
781
|
}
|
|
695
782
|
},
|
|
696
|
-
{ immediate:
|
|
783
|
+
{ immediate: false },
|
|
697
784
|
);
|
|
698
785
|
|
|
699
786
|
watch(
|
|
700
|
-
options,
|
|
701
|
-
async (
|
|
702
|
-
|
|
703
|
-
|
|
704
|
-
|
|
787
|
+
() => props.options,
|
|
788
|
+
async (newOptionsSource) => {
|
|
789
|
+
optionsList.value = [];
|
|
790
|
+
optionsTemp.value = [];
|
|
791
|
+
totalItems.value = 0;
|
|
792
|
+
|
|
793
|
+
if (isSelectVisible.value) {
|
|
794
|
+
if (Array.isArray(newOptionsSource)) {
|
|
795
|
+
optionsList.value = [...newOptionsSource] as Option[];
|
|
796
|
+
optionsTemp.value = optionsList.value;
|
|
797
|
+
totalItems.value = optionsList.value.length;
|
|
705
798
|
}
|
|
706
799
|
|
|
707
|
-
|
|
800
|
+
if (isOpened.value && typeof newOptionsSource === "function") {
|
|
801
|
+
await loadOptionsForOpenDropdown();
|
|
802
|
+
}
|
|
708
803
|
}
|
|
709
804
|
},
|
|
710
|
-
{
|
|
805
|
+
{ deep: false },
|
|
711
806
|
);
|
|
712
807
|
|
|
713
808
|
watch(
|
|
@@ -719,6 +814,28 @@ watch(
|
|
|
719
814
|
},
|
|
720
815
|
);
|
|
721
816
|
|
|
817
|
+
async function loadOptionsForOpenDropdown() {
|
|
818
|
+
if (props.options && typeof props.options === "function" && !listLoading.value) {
|
|
819
|
+
try {
|
|
820
|
+
listLoading.value = true;
|
|
821
|
+
const data = await props.options(filterString.value, optionsList.value.length);
|
|
822
|
+
if (filterString.value || optionsList.value.length === 0) {
|
|
823
|
+
optionsList.value = (data.results as Option[]) || [];
|
|
824
|
+
} else {
|
|
825
|
+
optionsList.value = _.unionBy<Option>(optionsList.value, (data.results as Option[]) || [], "id");
|
|
826
|
+
}
|
|
827
|
+
totalItems.value = data.totalCount || 0;
|
|
828
|
+
optionsTemp.value = optionsList.value;
|
|
829
|
+
} catch (e) {
|
|
830
|
+
console.error("Error in loadOptionsForOpenDropdown:", e);
|
|
831
|
+
optionsList.value = [];
|
|
832
|
+
totalItems.value = 0;
|
|
833
|
+
} finally {
|
|
834
|
+
listLoading.value = false;
|
|
835
|
+
}
|
|
836
|
+
}
|
|
837
|
+
}
|
|
838
|
+
|
|
722
839
|
async function onLoadMore() {
|
|
723
840
|
if (props.options && typeof props.options === "function") {
|
|
724
841
|
try {
|
|
@@ -864,6 +981,7 @@ function closeDropdown() {
|
|
|
864
981
|
onDropdownClose();
|
|
865
982
|
isOpened.value = false;
|
|
866
983
|
isFocused.value = false;
|
|
984
|
+
keyboardNavigation.cleanupKeyboardNavigation();
|
|
867
985
|
emit("close");
|
|
868
986
|
}
|
|
869
987
|
|
|
@@ -1043,7 +1161,7 @@ const keyboardNavigation = useKeyboardNavigation({
|
|
|
1043
1161
|
}
|
|
1044
1162
|
},
|
|
1045
1163
|
onEscape: () => {
|
|
1046
|
-
|
|
1164
|
+
closeDropdown();
|
|
1047
1165
|
},
|
|
1048
1166
|
});
|
|
1049
1167
|
</script>
|