@vc-shell/framework 1.1.18 → 1.1.20
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 +18 -0
- package/dist/framework.js +1 -1
- package/dist/{index-CP3k1nfq.js → index-BKR--p8M.js} +1 -1
- package/dist/{index-B4Q9DkTB.js → index-Bba2zxSI.js} +1 -1
- package/dist/{index-sdqR8ULO.js → index-BcJRkiSZ.js} +1 -1
- package/dist/{index-wsEOQiHr.js → index-BkRumJFq.js} +1 -1
- package/dist/{index-cZv5B-OC.js → index-BulmqdPU.js} +1 -1
- package/dist/{index-BX4mc81I.js → index-CBnxRNLn.js} +1 -1
- package/dist/{index--i2CrsJJ.js → index-CEZLRfPx.js} +1 -1
- package/dist/{index-DC8hKkuO.js → index-CF1DpgKB.js} +1 -1
- package/dist/{index-B-_pypoR.js → index-CG0nR714.js} +1 -1
- package/dist/{index-wl6u-5rt.js → index-D0lfscLK.js} +1 -1
- package/dist/{index-CyGdldvT.js → index-DAIB_vyb.js} +1 -1
- package/dist/{index-DdjamMzX.js → index-DM05bSo6.js} +28613 -28585
- package/dist/{index-C8jsLNj0.js → index-DMRhVrSq.js} +1 -1
- package/dist/{index-DTFCTb6P.js → index-DV7CsykG.js} +1 -1
- package/dist/{index-x3QIr8mC.js → index-D_QyrtwL.js} +1 -1
- package/dist/{index-C8U4bk1-.js → index-KqjQS0mN.js} +1 -1
- package/dist/{index-BWvofd8L.js → index-jIonXHwa.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 +227 -88
|
@@ -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":"AA85CA,OAAO,EAQL,SAAS,EACV,MAAM,kBAAkB,CAAC;AAK1B,MAAM,MAAM,UAAU,CAAC,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE,CAAC,KAAK,MAAM,CAAC,GAAG,MAAM,GAAG,SAAS,CAAC;AACzE,MAAM,MAAM,UAAU,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC;yBACnB,CAAC,EAAE,CAAC,SAAS;IAAE,OAAO,CAAC,EAAE,CAAC,EAAE,CAAC;IAAC,UAAU,CAAC,EAAE,MAAM,CAAA;CAAE,EACnE,aAAa,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,EAC9D,YAAY,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC,EAC3G,eAAe,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,EACjE;WAg6CO,mBAAmB,CAAC;;;oLAr5CqB,CAAC;;QAuF9C;;WAEG;eACI,MAAM;QACb;;WAEG;qBAEU,GAAG;QAChB;;;WAGG;qBACU,OAAO;QACpB;;WAEG;gBACK,OAAO;QACf;;WAEG;uBACY,MAAM;QACrB;;WAEG;gBACK,MAAM;QACd;;WAEG;eACI,MAAM;QACb;;WAEG;iBACM,MAAM;QACf;;WAEG;iBACM,MAAM;QACf;;WAEG;kBACO,OAAO;QACjB;;;WAGG;oBACS,OAAO;QACnB;;WAEG;mBACQ,OAAO;QAClB;;WAEG;mBACQ,OAAO;QAClB;;;WAGG;kBACO,CAAC,CAAC,OAAO,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,EAAE,GAAG,CAAC,EAAE,MAAM,EAAE,KAAK,OAAO,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE;QACjF;;;;;WAKG;sBACW,UAAU,yGAzJqB,CAAC,iCAyJd;QAChC;;;;;WAKG;sBACW,UAAU,yGAhKqB,CAAC,iCAgKd;QAChC;;WAEG;oBACS,OAAO;QACnB;;;WAGG;mBACQ,MAAM,GAAG,MAAM;QAC1B;;WAEG;sBACW,MAAM;QACpB;;WAEG;kBACO,MAAM;QAChB;;WAEG;mBACQ,OAAO;QAClB;;WAEG;qBACU,OAAO;wBACJ,OAAO;0BACL,MAAM;eACjB,SAAS,GAAG,OAAO;kBAChB,OAAO;oBACL,SAAS;QAutCwC,OAAO,IAAsB,CAAC,4BAA2B;oBACzG,OAAO,KAAK,EAAE,gBAAgB,CAAC,EAAE,CAAC,GAAG,IAAI;WAClD,GAAG;;QAn5CT;;WAEG;iBACM,CAAC,KAAK,EAAE;YAAE,aAAa,EAAE,MAAM,IAAI,CAAA;SAAE,KAAK,GAAG;QACtD;;WAEG;yBACc,CAAC,KAAK,EAAE,GAAG,KAAK,GAAG;QACpC;;WAEG;wBACa,CAAC,KAAK,EAAE,GAAG,KAAK,GAAG;QACnC;;WAEG;iBACM,CAAC,KAAK,EAAE,GAAG,KAAK,GAAG;QAC5B;;WAEG;gBACK,CAAC,KAAK,EAAE,GAAG,KAAK,GAAG;QAC3B;;;WAGG;qBACU,CAAC,KAAK,EAAE,GAAG,KAAK,GAAG;QAChC;;WAEG;eACI,CAAC,KAAK,EAAE,GAAG,KAAK,GAAG;QAC1B;;WAEG;cACG,CAAC,KAAK,EAAE,GAAG,KAAK,GAAG;QACzB;;;WAGG;yBACc,CAAC,KAAK,EAAE;YACvB;;eAEG;YACH,KAAK,EAAE,MAAM,CAAC;YACd;;eAEG;YACH,GAAG,0GAjD0C,CAAC,iCAiDlC;YACZ;;eAEG;YACH,QAAQ,EAAE,OAAO,CAAC;YAClB;;;eAGG;YACH,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;SACxC,KAAK,GAAG;QACT;;WAEG;gBACK,CAAC,KAAK,EAAE;YACd;;eAEG;YACH,KAAK,EAAE,MAAM,CAAC;YACd;;eAEG;YACH,GAAG,0GAvE0C,CAAC,iCAuElC;YACZ;;eAEG;YACH,QAAQ,EAAE,OAAO,CAAC;YAClB;;;eAGG;YACH,YAAY,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAC;SAClC,KAAK,GAAG;sBACK,CAAC,KAAK,EAAE,GAAG,KAAK,GAAG;;0PAlFc,CAAC;EA25C9C,KACQ,OAAO,KAAK,EAAE,KAAK,GAAG;IAAE,KAAK,CAAC,EAAE,OAAO,CAAC,OAAO,WAAW,CAAC,CAAA;CAAE;AA36CzE,wBA26C4E;AAC5E,KAAK,mBAAmB,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vc-shell/framework",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.20",
|
|
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.20",
|
|
74
|
+
"@vc-shell/config-generator": "^1.1.20",
|
|
75
|
+
"@vc-shell/ts-config": "^1.1.20",
|
|
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
|
|
@@ -238,7 +239,13 @@
|
|
|
238
239
|
<div
|
|
239
240
|
v-if="isOpened"
|
|
240
241
|
ref="dropdownRef"
|
|
241
|
-
v-on-click-outside="[
|
|
242
|
+
v-on-click-outside="[
|
|
243
|
+
() => {
|
|
244
|
+
isOpened = false;
|
|
245
|
+
emit('close');
|
|
246
|
+
},
|
|
247
|
+
{ ignore: [dropdownToggleRef] },
|
|
248
|
+
]"
|
|
242
249
|
data-test-id="dropdown"
|
|
243
250
|
class="vc-select__dropdown"
|
|
244
251
|
role="menu"
|
|
@@ -250,6 +257,8 @@
|
|
|
250
257
|
class="vc-select__search-input"
|
|
251
258
|
tabindex="0"
|
|
252
259
|
@input="onInput"
|
|
260
|
+
@keydown.space.stop
|
|
261
|
+
@keydown.enter.stop
|
|
253
262
|
/>
|
|
254
263
|
|
|
255
264
|
<VcContainer
|
|
@@ -320,7 +329,7 @@
|
|
|
320
329
|
|
|
321
330
|
<!-- eslint-disable @typescript-eslint/no-explicit-any -->
|
|
322
331
|
<script lang="ts" setup generic="T, P extends { results?: T[]; totalCount?: number }">
|
|
323
|
-
import { ref, computed, watch, nextTick, Ref, toRefs } from "vue";
|
|
332
|
+
import { ref, computed, watch, nextTick, Ref, toRefs, onMounted, onUnmounted } from "vue";
|
|
324
333
|
import { vOnClickOutside } from "@vueuse/components";
|
|
325
334
|
import * as _ from "lodash-es";
|
|
326
335
|
import { useIntersectionObserver } from "@vueuse/core";
|
|
@@ -577,6 +586,9 @@ const { t } = useI18n({ useScope: "global" });
|
|
|
577
586
|
|
|
578
587
|
const { modelValue, options } = toRefs(props);
|
|
579
588
|
|
|
589
|
+
const selectRootRef = ref<HTMLDivElement | null>(null);
|
|
590
|
+
const isSelectVisible = ref(false);
|
|
591
|
+
|
|
580
592
|
const isOpened = ref(false);
|
|
581
593
|
|
|
582
594
|
const searchRef = ref();
|
|
@@ -585,6 +597,7 @@ const dropdownRef = ref();
|
|
|
585
597
|
const root = ref();
|
|
586
598
|
const el = ref();
|
|
587
599
|
const listLoading = ref(false);
|
|
600
|
+
const defaultOptionLoading = ref(false);
|
|
588
601
|
const isFocused = ref(false);
|
|
589
602
|
|
|
590
603
|
const filterString = ref();
|
|
@@ -601,6 +614,37 @@ let emitValueFn;
|
|
|
601
614
|
let emitTimer: NodeJS.Timeout;
|
|
602
615
|
let innerValueCache: Option[];
|
|
603
616
|
|
|
617
|
+
let rootVisibilityObserver: IntersectionObserver | null = null;
|
|
618
|
+
|
|
619
|
+
const getOptionValue = computed(() => getPropValueFn(props.optionValue, "id"));
|
|
620
|
+
|
|
621
|
+
const getOptionLabel = computed(() => getPropValueFn(props.optionLabel, "title"));
|
|
622
|
+
|
|
623
|
+
onMounted(() => {
|
|
624
|
+
if (selectRootRef.value) {
|
|
625
|
+
rootVisibilityObserver = new IntersectionObserver(
|
|
626
|
+
([entry]) => {
|
|
627
|
+
if (entry.isIntersecting) {
|
|
628
|
+
isSelectVisible.value = true;
|
|
629
|
+
} else {
|
|
630
|
+
isSelectVisible.value = false;
|
|
631
|
+
}
|
|
632
|
+
},
|
|
633
|
+
{ threshold: 0.1 },
|
|
634
|
+
);
|
|
635
|
+
rootVisibilityObserver.observe(selectRootRef.value);
|
|
636
|
+
}
|
|
637
|
+
});
|
|
638
|
+
|
|
639
|
+
onUnmounted(() => {
|
|
640
|
+
if (rootVisibilityObserver && selectRootRef.value) {
|
|
641
|
+
rootVisibilityObserver.unobserve(selectRootRef.value);
|
|
642
|
+
}
|
|
643
|
+
if (rootVisibilityObserver) {
|
|
644
|
+
rootVisibilityObserver.disconnect();
|
|
645
|
+
}
|
|
646
|
+
});
|
|
647
|
+
|
|
604
648
|
useIntersectionObserver(
|
|
605
649
|
el,
|
|
606
650
|
([{ isIntersecting }]) => {
|
|
@@ -625,89 +669,151 @@ const popper = useFloating(dropdownToggleRef, dropdownRef, {
|
|
|
625
669
|
}) as FloatingInstanceType;
|
|
626
670
|
|
|
627
671
|
watch(
|
|
628
|
-
modelValue,
|
|
629
|
-
async (
|
|
630
|
-
|
|
631
|
-
|
|
632
|
-
|
|
633
|
-
|
|
634
|
-
|
|
635
|
-
|
|
636
|
-
|
|
637
|
-
|
|
638
|
-
}
|
|
639
|
-
});
|
|
672
|
+
[() => props.modelValue, isSelectVisible],
|
|
673
|
+
async ([currentModelVal, selectIsVisible]) => {
|
|
674
|
+
let modelAsArrayValueIds: (string | number | Record<string, any> | null)[] = [];
|
|
675
|
+
if (Array.isArray(currentModelVal)) {
|
|
676
|
+
modelAsArrayValueIds = props.emitValue
|
|
677
|
+
? currentModelVal
|
|
678
|
+
: currentModelVal.map((v) => getOptionValue.value(v as Option));
|
|
679
|
+
} else if (currentModelVal != null) {
|
|
680
|
+
modelAsArrayValueIds = [props.emitValue ? currentModelVal : getOptionValue.value(currentModelVal as Option)];
|
|
681
|
+
}
|
|
640
682
|
|
|
641
|
-
|
|
642
|
-
|
|
643
|
-
|
|
644
|
-
|
|
645
|
-
|
|
646
|
-
|
|
647
|
-
|
|
648
|
-
|
|
649
|
-
|
|
650
|
-
|
|
651
|
-
|
|
652
|
-
|
|
653
|
-
|
|
654
|
-
|
|
655
|
-
|
|
656
|
-
|
|
657
|
-
|
|
658
|
-
|
|
659
|
-
|
|
660
|
-
|
|
661
|
-
|
|
662
|
-
|
|
683
|
+
const currentDefaultValueIds = defaultValue.value.map((opt) => getOptionValue.value(opt));
|
|
684
|
+
|
|
685
|
+
const sortedCurrentDefaultIds = [...currentDefaultValueIds].sort((a, b) => String(a).localeCompare(String(b)));
|
|
686
|
+
const sortedModelValueIds = [...modelAsArrayValueIds].sort((a, b) => String(a).localeCompare(String(b)));
|
|
687
|
+
|
|
688
|
+
const isDefaultValueResolved =
|
|
689
|
+
_.isEqual(sortedCurrentDefaultIds, sortedModelValueIds) &&
|
|
690
|
+
(modelAsArrayValueIds.length > 0 || defaultValue.value.length === 0);
|
|
691
|
+
|
|
692
|
+
if (!selectIsVisible) {
|
|
693
|
+
if (modelAsArrayValueIds.length === 0 && defaultValue.value.length > 0) {
|
|
694
|
+
defaultValue.value = [];
|
|
695
|
+
}
|
|
696
|
+
return;
|
|
697
|
+
}
|
|
698
|
+
|
|
699
|
+
if (modelAsArrayValueIds.length === 0) {
|
|
700
|
+
if (defaultValue.value.length > 0) {
|
|
701
|
+
defaultValue.value = [];
|
|
702
|
+
}
|
|
703
|
+
return;
|
|
704
|
+
}
|
|
705
|
+
|
|
706
|
+
if (!isDefaultValueResolved) {
|
|
707
|
+
if (props.options && typeof props.options === "function") {
|
|
708
|
+
try {
|
|
709
|
+
defaultOptionLoading.value = true;
|
|
710
|
+
const idsToFetch = modelAsArrayValueIds.filter((id) => id != null) as string[];
|
|
711
|
+
|
|
712
|
+
if (
|
|
713
|
+
idsToFetch.length === 0 &&
|
|
714
|
+
!(
|
|
715
|
+
modelAsArrayValueIds.length === 1 &&
|
|
716
|
+
modelAsArrayValueIds[0] == null &&
|
|
717
|
+
props.mapOptions &&
|
|
718
|
+
!props.multiple
|
|
719
|
+
)
|
|
720
|
+
) {
|
|
721
|
+
defaultValue.value = [];
|
|
722
|
+
defaultOptionLoading.value = false;
|
|
723
|
+
return;
|
|
663
724
|
}
|
|
664
|
-
|
|
665
|
-
|
|
666
|
-
|
|
667
|
-
)
|
|
725
|
+
|
|
726
|
+
const data = await props.options(undefined, undefined, idsToFetch);
|
|
727
|
+
|
|
728
|
+
if (typeof data === "object" && !Array.isArray(data) && "results" in data && data.results) {
|
|
729
|
+
const results = data.results as Option[];
|
|
730
|
+
defaultValue.value = results.filter((rOpt) =>
|
|
731
|
+
modelAsArrayValueIds.some((mId) => _.isEqual(getOptionValue.value(rOpt), mId)),
|
|
732
|
+
);
|
|
733
|
+
} else {
|
|
734
|
+
defaultValue.value = [];
|
|
735
|
+
}
|
|
736
|
+
} catch (e) {
|
|
737
|
+
console.error("Error loading default options:", e);
|
|
738
|
+
defaultValue.value = [];
|
|
739
|
+
} finally {
|
|
740
|
+
defaultOptionLoading.value = false;
|
|
668
741
|
}
|
|
742
|
+
} else if (props.options && Array.isArray(props.options)) {
|
|
743
|
+
defaultValue.value = (props.options as Option[]).filter((opt) =>
|
|
744
|
+
modelAsArrayValueIds.some((mId) => _.isEqual(getOptionValue.value(opt), mId)),
|
|
745
|
+
);
|
|
669
746
|
}
|
|
670
747
|
}
|
|
671
748
|
},
|
|
672
|
-
{ immediate: true },
|
|
749
|
+
{ immediate: true, deep: true },
|
|
673
750
|
);
|
|
674
751
|
|
|
675
752
|
watch(
|
|
676
|
-
isOpened,
|
|
677
|
-
async (
|
|
678
|
-
if (
|
|
679
|
-
|
|
680
|
-
|
|
681
|
-
|
|
682
|
-
|
|
683
|
-
|
|
684
|
-
|
|
685
|
-
|
|
686
|
-
|
|
753
|
+
[isOpened, isSelectVisible],
|
|
754
|
+
async ([newIsOpened, newIsSelectVisible]) => {
|
|
755
|
+
if (newIsOpened && newIsSelectVisible) {
|
|
756
|
+
const needsLoad =
|
|
757
|
+
optionsList.value.length === 0 ||
|
|
758
|
+
(props.options && typeof props.options === "function" && filterString.value && !listLoading.value);
|
|
759
|
+
|
|
760
|
+
if (needsLoad) {
|
|
761
|
+
if (props.options && typeof props.options === "function") {
|
|
762
|
+
await loadOptionsForOpenDropdown();
|
|
763
|
+
} else if (props.options && Array.isArray(props.options)) {
|
|
764
|
+
optionsList.value = [...props.options] as Option[];
|
|
765
|
+
optionsTemp.value = optionsList.value;
|
|
766
|
+
totalItems.value = optionsList.value.length;
|
|
687
767
|
}
|
|
688
768
|
}
|
|
689
769
|
|
|
690
|
-
|
|
691
|
-
|
|
692
|
-
|
|
693
|
-
|
|
770
|
+
nextTick(() => {
|
|
771
|
+
popper.update();
|
|
772
|
+
if (dropdownRef.value) {
|
|
773
|
+
keyboardNavigation.initKeyboardNavigation(dropdownRef.value);
|
|
774
|
+
if (props.searchable && searchRef.value) {
|
|
775
|
+
searchRef.value.focus();
|
|
776
|
+
} else {
|
|
777
|
+
const firstFocusable = dropdownRef.value.querySelector(
|
|
778
|
+
'.vc-select__option[tabindex="0"], .vc-select__search-input[tabindex="0"]',
|
|
779
|
+
) as HTMLElement | null;
|
|
780
|
+
|
|
781
|
+
if (firstFocusable) {
|
|
782
|
+
firstFocusable.focus();
|
|
783
|
+
} else {
|
|
784
|
+
keyboardNavigation.focusFirstElement();
|
|
785
|
+
}
|
|
786
|
+
}
|
|
787
|
+
}
|
|
788
|
+
});
|
|
789
|
+
} else if (!newIsOpened) {
|
|
790
|
+
keyboardNavigation.cleanupKeyboardNavigation();
|
|
791
|
+
await onDropdownClose();
|
|
694
792
|
}
|
|
695
793
|
},
|
|
696
|
-
{ immediate:
|
|
794
|
+
{ immediate: false },
|
|
697
795
|
);
|
|
698
796
|
|
|
699
797
|
watch(
|
|
700
|
-
options,
|
|
701
|
-
async (
|
|
702
|
-
|
|
703
|
-
|
|
704
|
-
|
|
798
|
+
() => props.options,
|
|
799
|
+
async (newOptionsSource) => {
|
|
800
|
+
optionsList.value = [];
|
|
801
|
+
optionsTemp.value = [];
|
|
802
|
+
totalItems.value = 0;
|
|
803
|
+
|
|
804
|
+
if (isSelectVisible.value) {
|
|
805
|
+
if (Array.isArray(newOptionsSource)) {
|
|
806
|
+
optionsList.value = [...newOptionsSource] as Option[];
|
|
807
|
+
optionsTemp.value = optionsList.value;
|
|
808
|
+
totalItems.value = optionsList.value.length;
|
|
705
809
|
}
|
|
706
810
|
|
|
707
|
-
|
|
811
|
+
if (isOpened.value && typeof newOptionsSource === "function") {
|
|
812
|
+
await loadOptionsForOpenDropdown();
|
|
813
|
+
}
|
|
708
814
|
}
|
|
709
815
|
},
|
|
710
|
-
{
|
|
816
|
+
{ deep: false },
|
|
711
817
|
);
|
|
712
818
|
|
|
713
819
|
watch(
|
|
@@ -719,6 +825,28 @@ watch(
|
|
|
719
825
|
},
|
|
720
826
|
);
|
|
721
827
|
|
|
828
|
+
async function loadOptionsForOpenDropdown() {
|
|
829
|
+
if (props.options && typeof props.options === "function" && !listLoading.value) {
|
|
830
|
+
try {
|
|
831
|
+
listLoading.value = true;
|
|
832
|
+
const data = await props.options(filterString.value, optionsList.value.length);
|
|
833
|
+
if (filterString.value || optionsList.value.length === 0) {
|
|
834
|
+
optionsList.value = (data.results as Option[]) || [];
|
|
835
|
+
} else {
|
|
836
|
+
optionsList.value = _.unionBy<Option>(optionsList.value, (data.results as Option[]) || [], "id");
|
|
837
|
+
}
|
|
838
|
+
totalItems.value = data.totalCount || 0;
|
|
839
|
+
optionsTemp.value = optionsList.value;
|
|
840
|
+
} catch (e) {
|
|
841
|
+
console.error("Error in loadOptionsForOpenDropdown:", e);
|
|
842
|
+
optionsList.value = [];
|
|
843
|
+
totalItems.value = 0;
|
|
844
|
+
} finally {
|
|
845
|
+
listLoading.value = false;
|
|
846
|
+
}
|
|
847
|
+
}
|
|
848
|
+
}
|
|
849
|
+
|
|
722
850
|
async function onLoadMore() {
|
|
723
851
|
if (props.options && typeof props.options === "function") {
|
|
724
852
|
try {
|
|
@@ -738,10 +866,6 @@ const hasNextPage = computed(() => {
|
|
|
738
866
|
return optionsList.value.length < totalItems.value;
|
|
739
867
|
});
|
|
740
868
|
|
|
741
|
-
const getOptionValue = computed(() => getPropValueFn(props.optionValue, "id"));
|
|
742
|
-
|
|
743
|
-
const getOptionLabel = computed(() => getPropValueFn(props.optionLabel, "title"));
|
|
744
|
-
|
|
745
869
|
const innerValue = computed((): Option[] => {
|
|
746
870
|
const mapNull = props.mapOptions === true && props.multiple !== true;
|
|
747
871
|
|
|
@@ -860,24 +984,37 @@ function isOptionSelected(opt: Option) {
|
|
|
860
984
|
return innerOptionsValue.value.find((v) => _.isEqual(v, val)) !== void 0;
|
|
861
985
|
}
|
|
862
986
|
|
|
863
|
-
function closeDropdown() {
|
|
864
|
-
onDropdownClose();
|
|
865
|
-
isOpened.value = false;
|
|
866
|
-
isFocused.value = false;
|
|
867
|
-
emit("close");
|
|
868
|
-
}
|
|
869
|
-
|
|
870
987
|
const onDropdownClose = async () => {
|
|
871
|
-
|
|
872
|
-
|
|
873
|
-
|
|
874
|
-
|
|
875
|
-
} else {
|
|
876
|
-
optionsList.value = props.options as Option[];
|
|
988
|
+
filterString.value = undefined;
|
|
989
|
+
|
|
990
|
+
if (searchRef.value) {
|
|
991
|
+
searchRef.value.value = "";
|
|
877
992
|
}
|
|
878
|
-
optionsTemp.value = optionsList.value;
|
|
879
993
|
|
|
880
|
-
|
|
994
|
+
if (isSelectVisible.value) {
|
|
995
|
+
if (props.options && typeof props.options === "function") {
|
|
996
|
+
try {
|
|
997
|
+
listLoading.value = true;
|
|
998
|
+
const data = await props.options(undefined, 0);
|
|
999
|
+
optionsList.value = (data.results as Option[]) || [];
|
|
1000
|
+
totalItems.value = data.totalCount || 0;
|
|
1001
|
+
} catch (e) {
|
|
1002
|
+
console.error("Error resetting optionsList on dropdown close:", e);
|
|
1003
|
+
optionsList.value = [];
|
|
1004
|
+
totalItems.value = 0;
|
|
1005
|
+
} finally {
|
|
1006
|
+
listLoading.value = false;
|
|
1007
|
+
}
|
|
1008
|
+
} else if (props.options && Array.isArray(props.options)) {
|
|
1009
|
+
optionsList.value = [...props.options] as Option[];
|
|
1010
|
+
totalItems.value = optionsList.value.length;
|
|
1011
|
+
}
|
|
1012
|
+
} else if (props.options && typeof props.options === "function") {
|
|
1013
|
+
optionsList.value = [];
|
|
1014
|
+
totalItems.value = 0;
|
|
1015
|
+
}
|
|
1016
|
+
|
|
1017
|
+
optionsTemp.value = optionsList.value;
|
|
881
1018
|
};
|
|
882
1019
|
|
|
883
1020
|
function toggleDropdown() {
|
|
@@ -956,7 +1093,8 @@ function toggleOption(opt: Option) {
|
|
|
956
1093
|
emit("update:modelValue", props.emitValue === true ? optValue : opt);
|
|
957
1094
|
}
|
|
958
1095
|
|
|
959
|
-
|
|
1096
|
+
isOpened.value = false;
|
|
1097
|
+
emit("close");
|
|
960
1098
|
return;
|
|
961
1099
|
}
|
|
962
1100
|
|
|
@@ -1044,6 +1182,7 @@ const keyboardNavigation = useKeyboardNavigation({
|
|
|
1044
1182
|
},
|
|
1045
1183
|
onEscape: () => {
|
|
1046
1184
|
isOpened.value = false;
|
|
1185
|
+
emit("close");
|
|
1047
1186
|
},
|
|
1048
1187
|
});
|
|
1049
1188
|
</script>
|