@ironsource/shared-ui 1.4.2-test.17 → 1.4.2-test.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/IncludeExclude.vue_vue_type_style_index_0_scoped_true_lang.css +1 -1
- package/IncludeExcludeDragDrop.vue_vue_type_style_index_0_scoped_true_lang.css +1 -0
- package/components/includeExclude/IncludeExclude.vue.js +1 -7
- package/components/includeExclude/IncludeExcludeAppHeader.vue.js +6 -4
- package/components/includeExclude/IncludeExcludeChipFilter.vue.js +6 -4
- package/components/includeExclude/IncludeExcludeDragDrop.vue.d.ts +122 -0
- package/components/includeExclude/IncludeExcludeDragDrop.vue.js +619 -0
- package/components/includeExclude/index.d.ts +2 -1
- package/components/includeExclude/index.vue.js +3 -0
- package/index.vue.js +2 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
.label[data-v-
|
|
1
|
+
.label[data-v-b0315b64]{color:#41454d}[data-v-b0315b64]::-webkit-scrollbar{width:.625rem;opacity:.7;background-color:transparent}[data-v-b0315b64]::-webkit-scrollbar-thumb{border:3px solid transparent;background-clip:padding-box;border-radius:.625rem;background-color:#d2d5d8!important}[data-v-b0315b64]::-webkit-scrollbar-track{border-radius:.625rem;background-color:transparent}.loader-wrapper[data-v-b0315b64]{display:flex;width:100%;gap:.5rem;padding-left:.5rem;padding-right:.75rem}.include-exclude-wrapper[data-v-b0315b64]{width:100%}.include-exclude-content[data-v-b0315b64]{width:37.5rem}.include-exclude-list-wrapper[data-v-b0315b64]{border-right:1px #DDDFE1 solid;height:13.75rem}.include-exclude-list[data-v-b0315b64],.include-exclude-selected-list[data-v-b0315b64]{overflow-y:auto;overflow-x:none;padding:.5rem .25rem 0 .5rem;max-height:13.75rem;height:13.75rem}.include-exclude-list.include-exclude-list-draggable[data-v-b0315b64],.include-exclude-selected-list.include-exclude-list-draggable[data-v-b0315b64]{padding:.75rem .5rem .5rem;height:18.5rem;max-height:18.5rem}.include-exclude-list.include-exclude-list-draggable li[data-v-b0315b64]:last-child,.include-exclude-selected-list.include-exclude-list-draggable li[data-v-b0315b64]:last-child{padding-bottom:.5rem}.no-result-text[data-v-b0315b64]{color:#8e959d;height:100%}.include-exclude-list-wrapper[data-v-b0315b64],.include-exclude-selected-wrapper[data-v-b0315b64]{width:50%;height:100%;display:flex;flex-direction:column;justify-content:flex-start}.include-exclude-list-item-skeleton[data-v-b0315b64]{display:flex;gap:.5rem;margin-bottom:1rem}.include-exclude-list-item-skeleton[data-v-b0315b64]:first-child{margin-top:.5rem}li[data-v-b0315b64]:last-child{padding-bottom:.25rem}.drag-item[data-v-b0315b64]:last-child{padding-bottom:.25rem}.include-exclude-header-left-section[data-v-b0315b64]{border-right:1px solid #DDDFE1;color:#53575b;padding:1.5rem;height:100%;display:flex;align-items:center}.include-exclude-header-right-section[data-v-b0315b64]{flex-grow:1;padding:0 .375rem}.include-exclude-footer[data-v-b0315b64]{height:3rem;display:flex}.include-exclude-container[data-v-b0315b64]{display:flex;align-items:center;justify-content:center;height:100%}.include-exclude-container-wrapper[data-v-b0315b64]{border-top:1px #DDDFE1 solid;border-bottom:1px #DDDFE1 solid}.include-exclude-selected-header-left-selected[data-v-b0315b64]{color:#565c62}.include-exclude-header[data-v-b0315b64]{display:flex;align-items:center;justify-content:space-between;height:3.5rem}.include-exclude-list-header-loading[data-v-b0315b64]{gap:.5rem;padding:0 .25rem 0 .5rem}.include-exclude-list-selected-header-loading[data-v-b0315b64]{padding:0 .25rem 0 .5rem}.include-exclude-list-header-loaded[data-v-b0315b64]{padding:0 1rem}.include-exclude-list-header[data-v-b0315b64],.include-exclude-selected-header[data-v-b0315b64]{height:2.5rem;display:flex;justify-content:space-between;align-items:center;height:2.5625rem;border-bottom:1px #DDDFE1 solid}.include-exclude-header-right-section-search-input[data-v-b0315b64]{width:100%;height:100%}.include-exclude-selected-header-right[data-v-b0315b64]{height:100%;display:flex}.include-exclude-selected-header-left[data-v-b0315b64]{height:100%;display:flex;align-items:center}.dot-skeleton[data-v-b0315b64]{width:1rem;height:1rem}ol[data-v-b0315b64],ul[data-v-b0315b64],menu[data-v-b0315b64]{list-style:none;margin:0;padding:0}.include-exclude-footer-buttons[data-v-b0315b64]{display:flex;align-items:center;justify-content:center;margin-left:auto;gap:.25rem;padding-right:1rem}.switch-enter-from[data-v-b0315b64],.switch-leave-to[data-v-b0315b64]{transition:all .25s ease;opacity:0}.option-collapse[data-v-b0315b64]{padding:.5rem .25rem .5rem .5rem;height:40px;display:flex;align-items:center;justify-content:space-between;cursor:pointer}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.label[data-v-060b4732]{color:#41454d}[data-v-060b4732]::-webkit-scrollbar{width:.625rem;opacity:.7;background-color:transparent}[data-v-060b4732]::-webkit-scrollbar-thumb{border:3px solid transparent;background-clip:padding-box;border-radius:.625rem;background-color:#d2d5d8!important}[data-v-060b4732]::-webkit-scrollbar-track{border-radius:.625rem;background-color:transparent}.loader-wrapper[data-v-060b4732]{display:flex;width:100%;gap:.5rem;padding-left:.5rem;padding-right:.75rem}.include-exclude-wrapper[data-v-060b4732]{width:100%}.include-exclude-content[data-v-060b4732]{width:37.5rem}.include-exclude-list-wrapper[data-v-060b4732]{border-right:1px #DDDFE1 solid;height:13.75rem}.include-exclude-list[data-v-060b4732],.include-exclude-selected-list[data-v-060b4732]{overflow-y:auto;overflow-x:none;padding:.5rem .25rem 0 .5rem;max-height:13.75rem;height:13.75rem}.include-exclude-list.include-exclude-list-draggable[data-v-060b4732],.include-exclude-selected-list.include-exclude-list-draggable[data-v-060b4732]{padding:.75rem .5rem .5rem;height:18.5rem;max-height:18.5rem}.include-exclude-list.include-exclude-list-draggable li[data-v-060b4732]:last-child,.include-exclude-selected-list.include-exclude-list-draggable li[data-v-060b4732]:last-child{padding-bottom:.5rem}.no-result-text[data-v-060b4732]{color:#8e959d;height:100%}.include-exclude-list-wrapper[data-v-060b4732],.include-exclude-selected-wrapper[data-v-060b4732]{width:50%;height:100%;display:flex;flex-direction:column;justify-content:flex-start}.include-exclude-list-item-skeleton[data-v-060b4732]{display:flex;gap:.5rem;margin-bottom:1rem}.include-exclude-list-item-skeleton[data-v-060b4732]:first-child{margin-top:.5rem}li[data-v-060b4732]:last-child{padding-bottom:.25rem}.drag-item[data-v-060b4732]:last-child{padding-bottom:.25rem}.include-exclude-header-left-section[data-v-060b4732]{border-right:1px solid #DDDFE1;color:#53575b;padding:1.5rem;height:100%;display:flex;align-items:center}.include-exclude-header-right-section[data-v-060b4732]{flex-grow:1;padding:0 .375rem}.include-exclude-footer[data-v-060b4732]{height:3rem;display:flex}.include-exclude-container[data-v-060b4732]{display:flex;align-items:center;justify-content:center;height:100%}.include-exclude-container-wrapper[data-v-060b4732]{border-top:1px #DDDFE1 solid;border-bottom:1px #DDDFE1 solid}.include-exclude-selected-header-left-selected[data-v-060b4732]{color:#565c62}.include-exclude-header[data-v-060b4732]{display:flex;align-items:center;justify-content:space-between;height:3.5rem}.include-exclude-list-header-loading[data-v-060b4732]{gap:.5rem;padding:0 .25rem 0 .5rem}.include-exclude-list-selected-header-loading[data-v-060b4732]{padding:0 .25rem 0 .5rem}.include-exclude-list-header-loaded[data-v-060b4732]{padding:0 1rem}.include-exclude-list-header[data-v-060b4732],.include-exclude-selected-header[data-v-060b4732]{height:2.5rem;display:flex;justify-content:space-between;align-items:center;height:2.5625rem;border-bottom:1px #DDDFE1 solid}.include-exclude-header-right-section-search-input[data-v-060b4732]{width:100%;height:100%}.include-exclude-selected-header-right[data-v-060b4732]{height:100%;display:flex}.include-exclude-selected-header-left[data-v-060b4732]{height:100%;display:flex;align-items:center}.dot-skeleton[data-v-060b4732]{width:1rem;height:1rem}ol[data-v-060b4732],ul[data-v-060b4732],menu[data-v-060b4732]{list-style:none;margin:0;padding:0}.include-exclude-footer-buttons[data-v-060b4732]{display:flex;align-items:center;justify-content:center;margin-left:auto;gap:.25rem;padding-right:1rem}.switch-enter-from[data-v-060b4732],.switch-leave-to[data-v-060b4732]{transition:all .25s ease;opacity:0}.option-collapse[data-v-060b4732]{padding:.5rem .25rem .5rem .5rem;height:40px;display:flex;align-items:center;justify-content:space-between;cursor:pointer}
|
|
@@ -115,12 +115,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
115
115
|
selectedOptionRef.value = props.modelValue;
|
|
116
116
|
}
|
|
117
117
|
);
|
|
118
|
-
watch(
|
|
119
|
-
() => selectedOptionRef.value,
|
|
120
|
-
() => {
|
|
121
|
-
emit("update:modelValue", selectedOptionRef.value);
|
|
122
|
-
}
|
|
123
|
-
);
|
|
124
118
|
const selectedOptionFiltered = computed(() => {
|
|
125
119
|
return selectedOptionRef.value.filter(
|
|
126
120
|
(x) => props.onSearch(x, query.value)
|
|
@@ -614,6 +608,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
614
608
|
};
|
|
615
609
|
}
|
|
616
610
|
});
|
|
617
|
-
var IncludeExclude = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-
|
|
611
|
+
var IncludeExclude = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-b0315b64"]]);
|
|
618
612
|
|
|
619
613
|
export { IncludeExclude as default };
|
|
@@ -3,10 +3,12 @@ import Icon from '../icon/Icon.vue.js';
|
|
|
3
3
|
import AppIcon from '../appIcon/AppIcon.vue.js';
|
|
4
4
|
import { useSearch } from '../../composables/useSearch.vue.js';
|
|
5
5
|
import IncludeExclude from './IncludeExclude.vue.js';
|
|
6
|
-
import
|
|
7
|
-
/* empty css */import _export_sfc from '../../_virtual/plugin-vue_export-helper.vue.js';
|
|
8
|
-
/* empty css *//* empty css */import '
|
|
9
|
-
|
|
6
|
+
import 'floating-vue';
|
|
7
|
+
/* empty css *//* empty css */import _export_sfc from '../../_virtual/plugin-vue_export-helper.vue.js';
|
|
8
|
+
/* empty css *//* empty css *//* empty css *//* empty css *//* empty css *//* empty css *//* empty css *//* empty css *//* empty css *//* empty css *//* empty css *//* empty css */import '@vueuse/core';
|
|
9
|
+
import 'vuedraggable';
|
|
10
|
+
/* empty css */import IncludeExcludeOption from './IncludeExcludeOption.vue.js';
|
|
11
|
+
/* empty css */import IncludeExcludeAppTrigger from './IncludeExcludeAppTrigger.vue.js';
|
|
10
12
|
/* empty css *//* empty css *//* empty css */
|
|
11
13
|
import "../../IncludeExcludeAppHeader.vue_vue_type_style_index_0_scoped_true_lang.css";
|
|
12
14
|
const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
@@ -3,10 +3,12 @@ import Icon from '../icon/Icon.vue.js';
|
|
|
3
3
|
import Chip from '../chip/Chip.vue.js';
|
|
4
4
|
import { useSearch } from '../../composables/useSearch.vue.js';
|
|
5
5
|
import IncludeExclude from './IncludeExclude.vue.js';
|
|
6
|
-
import
|
|
7
|
-
/* empty css */import _export_sfc from '../../_virtual/plugin-vue_export-helper.vue.js';
|
|
8
|
-
/* empty css *//* empty css */import '
|
|
9
|
-
|
|
6
|
+
import 'floating-vue';
|
|
7
|
+
/* empty css *//* empty css */import _export_sfc from '../../_virtual/plugin-vue_export-helper.vue.js';
|
|
8
|
+
/* empty css *//* empty css *//* empty css *//* empty css *//* empty css *//* empty css *//* empty css *//* empty css *//* empty css *//* empty css *//* empty css *//* empty css */import '@vueuse/core';
|
|
9
|
+
import 'vuedraggable';
|
|
10
|
+
/* empty css */import IncludeExcludeOption from './IncludeExcludeOption.vue.js';
|
|
11
|
+
/* empty css *//* empty css *//* empty css *//* empty css *//* empty css */
|
|
10
12
|
import "../../IncludeExcludeChipFilter.vue_vue_type_style_index_0_scoped_true_lang.css";
|
|
11
13
|
const _hoisted_1 = ["src"];
|
|
12
14
|
const _hoisted_2 = ["src"];
|
|
@@ -0,0 +1,122 @@
|
|
|
1
|
+
import { Placement } from 'floating-vue';
|
|
2
|
+
declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
|
|
3
|
+
titleText?: string;
|
|
4
|
+
loading?: boolean;
|
|
5
|
+
disabled?: boolean;
|
|
6
|
+
modelValue: unknown | unknown[] | Record<string, unknown>;
|
|
7
|
+
clearable?: boolean;
|
|
8
|
+
placement?: Placement;
|
|
9
|
+
options: unknown[];
|
|
10
|
+
autoFocus?: boolean;
|
|
11
|
+
onSearch?: (option: any, term: string) => boolean;
|
|
12
|
+
searchPlaceholder?: string;
|
|
13
|
+
isOnTop?: boolean;
|
|
14
|
+
alwayesOpen?: boolean;
|
|
15
|
+
defaultOpen?: boolean;
|
|
16
|
+
showClearAll?: boolean;
|
|
17
|
+
distance?: number;
|
|
18
|
+
distanceOffset?: number;
|
|
19
|
+
skiddingOffset?: number;
|
|
20
|
+
hasSubtitle?: boolean;
|
|
21
|
+
keyField: string;
|
|
22
|
+
isDraggable?: boolean;
|
|
23
|
+
draggableArgs?: object;
|
|
24
|
+
}>, {
|
|
25
|
+
titleText: string;
|
|
26
|
+
loading: boolean;
|
|
27
|
+
disabled: boolean;
|
|
28
|
+
autoFocus: boolean;
|
|
29
|
+
onSearch: () => true;
|
|
30
|
+
searchPlaceholder: string;
|
|
31
|
+
placement: string;
|
|
32
|
+
isOnTop: boolean;
|
|
33
|
+
defaultOpen: boolean;
|
|
34
|
+
showClearAll: boolean;
|
|
35
|
+
alwayesOpen: boolean;
|
|
36
|
+
distance: number;
|
|
37
|
+
distanceOffset: number;
|
|
38
|
+
skiddingOffset: number;
|
|
39
|
+
hasSubtitle: boolean;
|
|
40
|
+
isDraggable: boolean;
|
|
41
|
+
draggableArgs: any;
|
|
42
|
+
}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
43
|
+
"update:modelValue": (value: unknown) => void;
|
|
44
|
+
} & {
|
|
45
|
+
changeDragDrop: (value: unknown) => void;
|
|
46
|
+
}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
|
|
47
|
+
titleText?: string;
|
|
48
|
+
loading?: boolean;
|
|
49
|
+
disabled?: boolean;
|
|
50
|
+
modelValue: unknown | unknown[] | Record<string, unknown>;
|
|
51
|
+
clearable?: boolean;
|
|
52
|
+
placement?: Placement;
|
|
53
|
+
options: unknown[];
|
|
54
|
+
autoFocus?: boolean;
|
|
55
|
+
onSearch?: (option: any, term: string) => boolean;
|
|
56
|
+
searchPlaceholder?: string;
|
|
57
|
+
isOnTop?: boolean;
|
|
58
|
+
alwayesOpen?: boolean;
|
|
59
|
+
defaultOpen?: boolean;
|
|
60
|
+
showClearAll?: boolean;
|
|
61
|
+
distance?: number;
|
|
62
|
+
distanceOffset?: number;
|
|
63
|
+
skiddingOffset?: number;
|
|
64
|
+
hasSubtitle?: boolean;
|
|
65
|
+
keyField: string;
|
|
66
|
+
isDraggable?: boolean;
|
|
67
|
+
draggableArgs?: object;
|
|
68
|
+
}>, {
|
|
69
|
+
titleText: string;
|
|
70
|
+
loading: boolean;
|
|
71
|
+
disabled: boolean;
|
|
72
|
+
autoFocus: boolean;
|
|
73
|
+
onSearch: () => true;
|
|
74
|
+
searchPlaceholder: string;
|
|
75
|
+
placement: string;
|
|
76
|
+
isOnTop: boolean;
|
|
77
|
+
defaultOpen: boolean;
|
|
78
|
+
showClearAll: boolean;
|
|
79
|
+
alwayesOpen: boolean;
|
|
80
|
+
distance: number;
|
|
81
|
+
distanceOffset: number;
|
|
82
|
+
skiddingOffset: number;
|
|
83
|
+
hasSubtitle: boolean;
|
|
84
|
+
isDraggable: boolean;
|
|
85
|
+
draggableArgs: any;
|
|
86
|
+
}>>> & {
|
|
87
|
+
"onUpdate:modelValue"?: (value: unknown) => any;
|
|
88
|
+
onChangeDragDrop?: (value: unknown) => any;
|
|
89
|
+
}, {
|
|
90
|
+
loading: boolean;
|
|
91
|
+
placement: Placement;
|
|
92
|
+
disabled: boolean;
|
|
93
|
+
searchPlaceholder: string;
|
|
94
|
+
isOnTop: boolean;
|
|
95
|
+
distance: number;
|
|
96
|
+
autoFocus: boolean;
|
|
97
|
+
defaultOpen: boolean;
|
|
98
|
+
onSearch: (option: any, term: string) => boolean;
|
|
99
|
+
hasSubtitle: boolean;
|
|
100
|
+
titleText: string;
|
|
101
|
+
showClearAll: boolean;
|
|
102
|
+
alwayesOpen: boolean;
|
|
103
|
+
distanceOffset: number;
|
|
104
|
+
skiddingOffset: number;
|
|
105
|
+
isDraggable: boolean;
|
|
106
|
+
draggableArgs: object;
|
|
107
|
+
}>;
|
|
108
|
+
export default _default;
|
|
109
|
+
type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
|
|
110
|
+
type __VLS_TypePropsToRuntimeProps<T> = {
|
|
111
|
+
[K in keyof T]-?: {} extends Pick<T, K> ? {
|
|
112
|
+
type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
|
|
113
|
+
} : {
|
|
114
|
+
type: import('vue').PropType<T[K]>;
|
|
115
|
+
required: true;
|
|
116
|
+
};
|
|
117
|
+
};
|
|
118
|
+
type __VLS_WithDefaults<P, D> = {
|
|
119
|
+
[K in keyof Pick<P, keyof P>]: K extends keyof D ? P[K] & {
|
|
120
|
+
default: D[K];
|
|
121
|
+
} : P[K];
|
|
122
|
+
};
|
|
@@ -0,0 +1,619 @@
|
|
|
1
|
+
import { defineComponent, computed, ref, watch, provide, openBlock, createBlock, unref, withCtx, createElementVNode, renderSlot, normalizeClass, createTextVNode, toDisplayString, createCommentVNode, createVNode, Transition, createElementBlock, mergeProps, Fragment, renderList, toRaw, isRef, nextTick } from 'vue';
|
|
2
|
+
import _sfc_main$1 from '../popover/Popover.vue.js';
|
|
3
|
+
import Button from '../button/Button.vue.js';
|
|
4
|
+
/* empty css */import _export_sfc from '../../_virtual/plugin-vue_export-helper.vue.js';
|
|
5
|
+
/* empty css */import Text from '../typography/Text.vue.js';
|
|
6
|
+
/* empty css *//* empty css *//* empty css */import 'floating-vue';
|
|
7
|
+
/* empty css *//* empty css */import Search from '../search/Search.vue.js';
|
|
8
|
+
import Checkbox from '../checkbox/Checkbox.vue.js';
|
|
9
|
+
import Skeleton from '../skeleton/Skeleton.vue.js';
|
|
10
|
+
import EmptyState from '../emptyState/EmptyState.vue.js';
|
|
11
|
+
import { useToggle } from '../../composables/useToggle.vue.js';
|
|
12
|
+
import { IncludeExcludeContext } from './IncludeExcludeContext.vue.js';
|
|
13
|
+
import { onClickOutside, useClamp, useVirtualList } from '@vueuse/core';
|
|
14
|
+
import draggable from 'vuedraggable';
|
|
15
|
+
/* empty css */
|
|
16
|
+
import "../../IncludeExcludeDragDrop.vue_vue_type_style_index_0_scoped_true_lang.css";
|
|
17
|
+
const _hoisted_1 = { class: "include-exclude-header" };
|
|
18
|
+
const _hoisted_2 = { class: "include-exclude-header-left-section" };
|
|
19
|
+
const _hoisted_3 = { class: "include-exclude-header-right-section" };
|
|
20
|
+
const _hoisted_4 = { class: "include-exclude-container-wrapper" };
|
|
21
|
+
const _hoisted_5 = {
|
|
22
|
+
key: 0,
|
|
23
|
+
class: "include-exclude-container"
|
|
24
|
+
};
|
|
25
|
+
const _hoisted_6 = {
|
|
26
|
+
key: 1,
|
|
27
|
+
class: "include-exclude-container"
|
|
28
|
+
};
|
|
29
|
+
const _hoisted_7 = { class: "include-exclude-list-wrapper" };
|
|
30
|
+
const _hoisted_8 = {
|
|
31
|
+
key: 1,
|
|
32
|
+
class: "loader-wrapper"
|
|
33
|
+
};
|
|
34
|
+
const _hoisted_9 = ["aria-selected", "aria-disabled", "onClick"];
|
|
35
|
+
const _hoisted_10 = ["onClick"];
|
|
36
|
+
const _hoisted_11 = { key: 1 };
|
|
37
|
+
const _hoisted_12 = { class: "loader-wrapper" };
|
|
38
|
+
const _hoisted_13 = { class: "include-exclude-selected-wrapper" };
|
|
39
|
+
const _hoisted_14 = {
|
|
40
|
+
key: 0,
|
|
41
|
+
class: "loader-wrapper"
|
|
42
|
+
};
|
|
43
|
+
const _hoisted_15 = { class: "include-exclude-selected-header-left" };
|
|
44
|
+
const _hoisted_16 = { class: "include-exclude-selected-header-right" };
|
|
45
|
+
const _hoisted_17 = { class: "drag-item" };
|
|
46
|
+
const _hoisted_18 = { key: 2 };
|
|
47
|
+
const _hoisted_19 = { class: "loader-wrapper" };
|
|
48
|
+
const _hoisted_20 = { class: "include-exclude-footer" };
|
|
49
|
+
const _hoisted_21 = { class: "include-exclude-footer-buttons" };
|
|
50
|
+
const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
51
|
+
__name: "IncludeExcludeDragDrop",
|
|
52
|
+
props: {
|
|
53
|
+
titleText: { default: "" },
|
|
54
|
+
loading: { type: Boolean, default: false },
|
|
55
|
+
disabled: { type: Boolean, default: false },
|
|
56
|
+
modelValue: null,
|
|
57
|
+
clearable: { type: Boolean },
|
|
58
|
+
placement: { default: "bottom-start" },
|
|
59
|
+
options: null,
|
|
60
|
+
autoFocus: { type: Boolean, default: true },
|
|
61
|
+
onSearch: { type: Function, default: () => true },
|
|
62
|
+
searchPlaceholder: { default: "Search" },
|
|
63
|
+
isOnTop: { type: Boolean, default: false },
|
|
64
|
+
alwayesOpen: { type: Boolean, default: false },
|
|
65
|
+
defaultOpen: { type: Boolean, default: false },
|
|
66
|
+
showClearAll: { type: Boolean, default: true },
|
|
67
|
+
distance: { default: 0 },
|
|
68
|
+
distanceOffset: { default: 0 },
|
|
69
|
+
skiddingOffset: { default: 0 },
|
|
70
|
+
hasSubtitle: { type: Boolean, default: false },
|
|
71
|
+
keyField: null,
|
|
72
|
+
isDraggable: { type: Boolean, default: false },
|
|
73
|
+
draggableArgs: { default: null }
|
|
74
|
+
},
|
|
75
|
+
emits: ["update:modelValue", "changeDragDrop"],
|
|
76
|
+
setup(__props, { emit }) {
|
|
77
|
+
const props = __props;
|
|
78
|
+
const scrollPrerenderedItems = 50;
|
|
79
|
+
const skeletonItems = 3;
|
|
80
|
+
const boxDistanceBottom = 6;
|
|
81
|
+
const OPTION_HEIGHT = 32;
|
|
82
|
+
const OPTION_WITH_SUBTITLE_HEIGHT = 48;
|
|
83
|
+
const popoverDistance = computed(() => {
|
|
84
|
+
const notTopDistance = props.placement?.includes("bottom") ? boxDistanceBottom : 0;
|
|
85
|
+
return props.isOnTop ? -buttonRef.value?.getBoundingClientRect().height : notTopDistance;
|
|
86
|
+
});
|
|
87
|
+
const listRef = ref(null);
|
|
88
|
+
const query = ref("");
|
|
89
|
+
const shouldResetAfterCancel = ref(false);
|
|
90
|
+
const buttonRef = ref(null);
|
|
91
|
+
const apply = ref(null);
|
|
92
|
+
const cancel = ref(null);
|
|
93
|
+
const inputRef = ref(null);
|
|
94
|
+
const searchRef = ref(null);
|
|
95
|
+
const activeOption = ref(null);
|
|
96
|
+
const selectedOptionRef = ref(props.modelValue);
|
|
97
|
+
const sleep = (delay) => new Promise((resolve) => setTimeout(resolve, delay));
|
|
98
|
+
const selectedOption = computed({
|
|
99
|
+
get() {
|
|
100
|
+
return selectedOptionRef.value;
|
|
101
|
+
},
|
|
102
|
+
set(value) {
|
|
103
|
+
emit("update:modelValue", value);
|
|
104
|
+
}
|
|
105
|
+
});
|
|
106
|
+
const onCancel = () => {
|
|
107
|
+
if (selectedOption.value?.length !== props.options?.length) {
|
|
108
|
+
shouldResetAfterCancel.value = true;
|
|
109
|
+
}
|
|
110
|
+
toggleMenu(false);
|
|
111
|
+
};
|
|
112
|
+
watch(
|
|
113
|
+
() => props.modelValue,
|
|
114
|
+
() => {
|
|
115
|
+
selectedOptionRef.value = props.modelValue;
|
|
116
|
+
}
|
|
117
|
+
);
|
|
118
|
+
watch(
|
|
119
|
+
() => selectedOptionRef.value,
|
|
120
|
+
() => {
|
|
121
|
+
emit("update:modelValue", selectedOptionRef.value);
|
|
122
|
+
}
|
|
123
|
+
);
|
|
124
|
+
const selectedOptionFiltered = computed(() => {
|
|
125
|
+
return selectedOptionRef.value.filter(
|
|
126
|
+
(x) => props.onSearch(x, query.value)
|
|
127
|
+
);
|
|
128
|
+
});
|
|
129
|
+
const filteredOptionsWithoutGroup = computed(() => {
|
|
130
|
+
return filteredOptions.value.filter(
|
|
131
|
+
(option) => !option?.groupOption
|
|
132
|
+
);
|
|
133
|
+
});
|
|
134
|
+
const onApply = () => {
|
|
135
|
+
if (selectedOption.value?.length !== props.options?.length) {
|
|
136
|
+
selectedOption.value = selectedOptionRef.value;
|
|
137
|
+
}
|
|
138
|
+
toggleMenu(false);
|
|
139
|
+
};
|
|
140
|
+
const triggerAction = () => {
|
|
141
|
+
toggleMenu();
|
|
142
|
+
};
|
|
143
|
+
const clearSelections = () => {
|
|
144
|
+
selectedOptionRef.value = [];
|
|
145
|
+
};
|
|
146
|
+
const optionHeight = computed(() => {
|
|
147
|
+
return () => props.hasSubtitle ? OPTION_WITH_SUBTITLE_HEIGHT : OPTION_HEIGHT;
|
|
148
|
+
});
|
|
149
|
+
const isIn = computed(
|
|
150
|
+
() => (arr1, arr2) => arr1.every(
|
|
151
|
+
(val) => arr2.some((val2) => val2[props.keyField] === val[props.keyField])
|
|
152
|
+
)
|
|
153
|
+
);
|
|
154
|
+
const isAllFilteredSelected = computed(() => {
|
|
155
|
+
if (!open.value) {
|
|
156
|
+
return false;
|
|
157
|
+
}
|
|
158
|
+
const selected = selectedOptionRef.value;
|
|
159
|
+
const filtered = filteredOptionsWithoutGroup.value || filteredOptions.value;
|
|
160
|
+
if (selected === filtered) {
|
|
161
|
+
return true;
|
|
162
|
+
}
|
|
163
|
+
if (selected?.length !== filtered?.length) {
|
|
164
|
+
return false;
|
|
165
|
+
}
|
|
166
|
+
return isIn.value(selected, filtered) && isIn.value(filtered, selected);
|
|
167
|
+
});
|
|
168
|
+
const popoverWrapperRef = ref(null);
|
|
169
|
+
const [open, toggle] = useToggle({
|
|
170
|
+
disabled: props.disabled,
|
|
171
|
+
initialValue: props.defaultOpen
|
|
172
|
+
});
|
|
173
|
+
const afterClose = (delay = 300) => {
|
|
174
|
+
const isAllOptionsSelected = selectedOption.value?.length === props.options?.length;
|
|
175
|
+
nextTick(async () => {
|
|
176
|
+
if (isAllOptionsSelected) {
|
|
177
|
+
selectedOption.value = [];
|
|
178
|
+
}
|
|
179
|
+
await sleep(delay);
|
|
180
|
+
api.resetInput();
|
|
181
|
+
});
|
|
182
|
+
};
|
|
183
|
+
watch(
|
|
184
|
+
() => [open.value, searchRef?.value?.inputRef],
|
|
185
|
+
([isOpen, searchInput]) => {
|
|
186
|
+
if (isOpen && searchInput) {
|
|
187
|
+
afterOpen();
|
|
188
|
+
}
|
|
189
|
+
}
|
|
190
|
+
);
|
|
191
|
+
const focusOnSearch = () => {
|
|
192
|
+
if (!props.autoFocus) {
|
|
193
|
+
return;
|
|
194
|
+
}
|
|
195
|
+
searchRef.value?.inputRef.focus();
|
|
196
|
+
};
|
|
197
|
+
const afterOpen = async (delay = 300) => {
|
|
198
|
+
await sleep(delay);
|
|
199
|
+
focusOnSearch();
|
|
200
|
+
};
|
|
201
|
+
const toggleMenu = (value) => {
|
|
202
|
+
if (props.disabled) {
|
|
203
|
+
return;
|
|
204
|
+
}
|
|
205
|
+
if (!value) {
|
|
206
|
+
afterClose();
|
|
207
|
+
}
|
|
208
|
+
toggle(value);
|
|
209
|
+
expandCollapseIds.value = [];
|
|
210
|
+
};
|
|
211
|
+
onClickOutside(popoverWrapperRef, () => {
|
|
212
|
+
if (open.value) {
|
|
213
|
+
onCancel();
|
|
214
|
+
}
|
|
215
|
+
});
|
|
216
|
+
const optionsIds = ref([]);
|
|
217
|
+
const maxClamped = computed(() => {
|
|
218
|
+
return filteredOptions.value?.length - 1;
|
|
219
|
+
});
|
|
220
|
+
const queryChanged = (value) => {
|
|
221
|
+
query.value = value;
|
|
222
|
+
};
|
|
223
|
+
const activeIndex = useClamp(0, 0, maxClamped);
|
|
224
|
+
const onSelect = (option) => {
|
|
225
|
+
if (option?.groupOption) {
|
|
226
|
+
return;
|
|
227
|
+
}
|
|
228
|
+
inputRef.value?.focus();
|
|
229
|
+
const rawSelectedOption = selectedOptionRef.value;
|
|
230
|
+
if (rawSelectedOption.includes(option)) {
|
|
231
|
+
selectedOptionRef.value = rawSelectedOption.filter(
|
|
232
|
+
(item) => item !== option
|
|
233
|
+
);
|
|
234
|
+
} else {
|
|
235
|
+
selectedOptionRef.value = [.../* @__PURE__ */ new Set([...rawSelectedOption, option])];
|
|
236
|
+
}
|
|
237
|
+
};
|
|
238
|
+
const removeSelection = (option) => {
|
|
239
|
+
onSelect(option);
|
|
240
|
+
};
|
|
241
|
+
const api = {
|
|
242
|
+
toggle: toggleMenu,
|
|
243
|
+
disabled: props.disabled,
|
|
244
|
+
options: optionsIds,
|
|
245
|
+
clearable: props.clearable,
|
|
246
|
+
resetInput: () => {
|
|
247
|
+
queryChanged("");
|
|
248
|
+
if (inputRef.value) {
|
|
249
|
+
inputRef.value.value = "";
|
|
250
|
+
}
|
|
251
|
+
if (shouldResetAfterCancel.value) {
|
|
252
|
+
selectedOptionRef.value = props.modelValue;
|
|
253
|
+
shouldResetAfterCancel.value = false;
|
|
254
|
+
}
|
|
255
|
+
},
|
|
256
|
+
search: queryChanged,
|
|
257
|
+
select: onSelect,
|
|
258
|
+
activeIndex,
|
|
259
|
+
selectedOption,
|
|
260
|
+
activeOption,
|
|
261
|
+
listRef,
|
|
262
|
+
query,
|
|
263
|
+
open,
|
|
264
|
+
removeSelection
|
|
265
|
+
};
|
|
266
|
+
const toggleSelectAll = () => {
|
|
267
|
+
selectedOptionRef.value = selectedOptionRef.value?.length !== filteredOptionsWithoutGroup.value?.length ? filteredOptionsWithoutGroup.value : [];
|
|
268
|
+
};
|
|
269
|
+
provide(IncludeExcludeContext, api);
|
|
270
|
+
const filteredOptions = computed(() => {
|
|
271
|
+
if (!query.value?.length) {
|
|
272
|
+
return props.options;
|
|
273
|
+
}
|
|
274
|
+
return props.options?.filter((option) => props.onSearch(option, query.value));
|
|
275
|
+
});
|
|
276
|
+
const {
|
|
277
|
+
list: virtualOptions,
|
|
278
|
+
containerProps,
|
|
279
|
+
wrapperProps
|
|
280
|
+
} = useVirtualList(filteredOptions, {
|
|
281
|
+
itemHeight: optionHeight.value,
|
|
282
|
+
overscan: scrollPrerenderedItems
|
|
283
|
+
});
|
|
284
|
+
const {
|
|
285
|
+
list: virtualOptionsSelected,
|
|
286
|
+
containerProps: containerPropsSelected,
|
|
287
|
+
wrapperProps: wrapperPropsSelected
|
|
288
|
+
} = useVirtualList(selectedOptionFiltered, {
|
|
289
|
+
itemHeight: optionHeight.value,
|
|
290
|
+
overscan: scrollPrerenderedItems
|
|
291
|
+
});
|
|
292
|
+
const onButtonKeydown = (event) => {
|
|
293
|
+
if (["Enter", " ", "Space"].includes(event.key)) {
|
|
294
|
+
toggleMenu();
|
|
295
|
+
return;
|
|
296
|
+
}
|
|
297
|
+
if (event.key === "ArrowUp") {
|
|
298
|
+
toggleMenu(false);
|
|
299
|
+
return;
|
|
300
|
+
}
|
|
301
|
+
if (event.key === "ArrowDown") {
|
|
302
|
+
toggleMenu(true);
|
|
303
|
+
event.preventDefault();
|
|
304
|
+
}
|
|
305
|
+
};
|
|
306
|
+
const expandCollapseIds = ref([]);
|
|
307
|
+
const isCollapsed = (option) => {
|
|
308
|
+
return expandCollapseIds.value.includes(option?.[props.keyField]);
|
|
309
|
+
};
|
|
310
|
+
const toggleCollapse = (option) => {
|
|
311
|
+
if (option.groupOption) {
|
|
312
|
+
option.groupOption.isCollapse = !option?.groupOption.isCollapse;
|
|
313
|
+
}
|
|
314
|
+
expandCollapseIds.value = virtualOptions.value.filter((item) => item?.data?.groupOption?.isCollapse).flatMap((item) => item?.data?.groupOption?.childOptionsIds || []);
|
|
315
|
+
};
|
|
316
|
+
const onChangeDragDrop = () => {
|
|
317
|
+
emit("changeDragDrop", virtualOptionsSelected.value);
|
|
318
|
+
};
|
|
319
|
+
return (_ctx, _cache) => {
|
|
320
|
+
return openBlock(), createBlock(unref(_sfc_main$1), {
|
|
321
|
+
distance: unref(popoverDistance) + __props.distanceOffset,
|
|
322
|
+
skidding: __props.skiddingOffset,
|
|
323
|
+
trigger: "managed",
|
|
324
|
+
open: unref(open) || __props.alwayesOpen,
|
|
325
|
+
placement: __props.placement
|
|
326
|
+
}, {
|
|
327
|
+
trigger: withCtx(() => [
|
|
328
|
+
createElementVNode("div", {
|
|
329
|
+
ref_key: "buttonRef",
|
|
330
|
+
ref: buttonRef,
|
|
331
|
+
class: "include-exclude-trigger",
|
|
332
|
+
tabindex: "0",
|
|
333
|
+
onClick: triggerAction,
|
|
334
|
+
onKeydown: onButtonKeydown
|
|
335
|
+
}, [
|
|
336
|
+
renderSlot(_ctx.$slots, "trigger", {}, () => [
|
|
337
|
+
createElementVNode("button", {
|
|
338
|
+
ref_key: "buttonRef",
|
|
339
|
+
ref: buttonRef
|
|
340
|
+
}, "Default trigger", 512)
|
|
341
|
+
], true)
|
|
342
|
+
], 544)
|
|
343
|
+
]),
|
|
344
|
+
content: withCtx(() => [
|
|
345
|
+
createElementVNode("div", {
|
|
346
|
+
ref_key: "popoverWrapperRef",
|
|
347
|
+
ref: popoverWrapperRef,
|
|
348
|
+
class: normalizeClass(["include-exclude-content", {
|
|
349
|
+
"include-exclude-content-draggable": __props.isDraggable
|
|
350
|
+
}])
|
|
351
|
+
}, [
|
|
352
|
+
createElementVNode("div", _hoisted_1, [
|
|
353
|
+
createElementVNode("div", _hoisted_2, [
|
|
354
|
+
renderSlot(_ctx.$slots, "header-left-section", {}, () => [
|
|
355
|
+
__props.titleText ? (openBlock(), createBlock(unref(Text), {
|
|
356
|
+
key: 0,
|
|
357
|
+
class: "include-exclude-header-left-section-title",
|
|
358
|
+
size: "md",
|
|
359
|
+
strong: ""
|
|
360
|
+
}, {
|
|
361
|
+
default: withCtx(() => [
|
|
362
|
+
createTextVNode(toDisplayString(__props.titleText), 1)
|
|
363
|
+
]),
|
|
364
|
+
_: 1
|
|
365
|
+
})) : createCommentVNode("", true)
|
|
366
|
+
], true)
|
|
367
|
+
]),
|
|
368
|
+
createElementVNode("div", _hoisted_3, [
|
|
369
|
+
renderSlot(_ctx.$slots, "header-right-section", {}, () => [
|
|
370
|
+
createVNode(unref(Search), {
|
|
371
|
+
ref_key: "searchRef",
|
|
372
|
+
ref: searchRef,
|
|
373
|
+
modelValue: query.value,
|
|
374
|
+
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => query.value = $event),
|
|
375
|
+
class: "include-exclude-header-right-section-search-input",
|
|
376
|
+
variant: "transparent",
|
|
377
|
+
placeholder: __props.searchPlaceholder,
|
|
378
|
+
disabled: __props.loading
|
|
379
|
+
}, null, 8, ["modelValue", "placeholder", "disabled"])
|
|
380
|
+
], true)
|
|
381
|
+
])
|
|
382
|
+
]),
|
|
383
|
+
createElementVNode("div", _hoisted_4, [
|
|
384
|
+
createVNode(Transition, {
|
|
385
|
+
name: "switch",
|
|
386
|
+
mode: "out-in"
|
|
387
|
+
}, {
|
|
388
|
+
default: withCtx(() => [
|
|
389
|
+
!unref(filteredOptions)?.length && !__props.loading ? (openBlock(), createElementBlock("div", _hoisted_5, [
|
|
390
|
+
renderSlot(_ctx.$slots, "no-result", {}, () => [
|
|
391
|
+
createVNode(unref(EmptyState), {
|
|
392
|
+
size: "lg",
|
|
393
|
+
title: "No results found",
|
|
394
|
+
subtitle: "Try diffrent keyword",
|
|
395
|
+
"icon-width": 72,
|
|
396
|
+
"icon-height": 72
|
|
397
|
+
})
|
|
398
|
+
], true)
|
|
399
|
+
])) : (openBlock(), createElementBlock("div", _hoisted_6, [
|
|
400
|
+
createElementVNode("div", _hoisted_7, [
|
|
401
|
+
createElementVNode("div", {
|
|
402
|
+
class: normalizeClass(["include-exclude-list-header", {
|
|
403
|
+
"include-exclude-list-header-loading": __props.loading,
|
|
404
|
+
"include-exclude-list-header-loaded": !__props.loading
|
|
405
|
+
}])
|
|
406
|
+
}, [
|
|
407
|
+
!__props.loading ? (openBlock(), createBlock(unref(Checkbox), {
|
|
408
|
+
key: 0,
|
|
409
|
+
size: "sm",
|
|
410
|
+
"is-checked": unref(isAllFilteredSelected),
|
|
411
|
+
"is-indeterminate": unref(selectedOption)?.length > 0 && !unref(isAllFilteredSelected),
|
|
412
|
+
disabled: !unref(filteredOptions)?.length,
|
|
413
|
+
label: "Select all",
|
|
414
|
+
onClick: toggleSelectAll
|
|
415
|
+
}, null, 8, ["is-checked", "is-indeterminate", "disabled"])) : createCommentVNode("", true),
|
|
416
|
+
__props.loading ? (openBlock(), createElementBlock("div", _hoisted_8, [
|
|
417
|
+
createVNode(unref(Skeleton), {
|
|
418
|
+
class: "dot-skeleton",
|
|
419
|
+
round: ""
|
|
420
|
+
}),
|
|
421
|
+
createVNode(unref(Skeleton), { round: "" })
|
|
422
|
+
])) : createCommentVNode("", true)
|
|
423
|
+
], 2),
|
|
424
|
+
createElementVNode("div", mergeProps({ class: "include-exclude-list" }, unref(containerProps), {
|
|
425
|
+
class: {
|
|
426
|
+
"include-exclude-list-draggable": __props.isDraggable
|
|
427
|
+
}
|
|
428
|
+
}), [
|
|
429
|
+
!__props.loading ? (openBlock(), createElementBlock("ul", mergeProps({ key: 0 }, unref(wrapperProps), {
|
|
430
|
+
ref_key: "listRef",
|
|
431
|
+
ref: listRef,
|
|
432
|
+
tabindex: "1"
|
|
433
|
+
}), [
|
|
434
|
+
(openBlock(true), createElementBlock(Fragment, null, renderList(unref(virtualOptions), ({ data, index }) => {
|
|
435
|
+
return openBlock(), createElementBlock("li", {
|
|
436
|
+
key: index,
|
|
437
|
+
"aria-selected": toRaw(unref(selectedOption)) === data,
|
|
438
|
+
"aria-disabled": !!__props.disabled,
|
|
439
|
+
onClick: () => onSelect(data)
|
|
440
|
+
}, [
|
|
441
|
+
data.groupOption ? (openBlock(), createElementBlock("div", {
|
|
442
|
+
key: 0,
|
|
443
|
+
class: "option-collapse",
|
|
444
|
+
onClick: ($event) => toggleCollapse(data)
|
|
445
|
+
}, [
|
|
446
|
+
renderSlot(_ctx.$slots, "option-group", { option: data }, void 0, true)
|
|
447
|
+
], 8, _hoisted_10)) : createCommentVNode("", true),
|
|
448
|
+
!data.groupOption && !isCollapsed(data) ? renderSlot(_ctx.$slots, "option", {
|
|
449
|
+
key: 1,
|
|
450
|
+
showCheckbox: true,
|
|
451
|
+
option: data,
|
|
452
|
+
selected: toRaw(unref(selectedOption)) === data,
|
|
453
|
+
active: toRaw(unref(activeIndex)) === index
|
|
454
|
+
}, void 0, true) : createCommentVNode("", true)
|
|
455
|
+
], 8, _hoisted_9);
|
|
456
|
+
}), 128))
|
|
457
|
+
], 16)) : createCommentVNode("", true),
|
|
458
|
+
__props.loading ? (openBlock(), createElementBlock("ul", _hoisted_11, [
|
|
459
|
+
(openBlock(), createElementBlock(Fragment, null, renderList(skeletonItems, (n) => {
|
|
460
|
+
return createElementVNode("li", {
|
|
461
|
+
key: n,
|
|
462
|
+
class: "include-exclude-list-item-skeleton"
|
|
463
|
+
}, [
|
|
464
|
+
createElementVNode("div", _hoisted_12, [
|
|
465
|
+
createVNode(unref(Skeleton), {
|
|
466
|
+
class: "dot-skeleton",
|
|
467
|
+
round: ""
|
|
468
|
+
}),
|
|
469
|
+
createVNode(unref(Skeleton), { round: "" })
|
|
470
|
+
])
|
|
471
|
+
]);
|
|
472
|
+
}), 64))
|
|
473
|
+
])) : createCommentVNode("", true)
|
|
474
|
+
], 16)
|
|
475
|
+
]),
|
|
476
|
+
createElementVNode("div", _hoisted_13, [
|
|
477
|
+
createElementVNode("div", {
|
|
478
|
+
class: normalizeClass(["include-exclude-selected-header", {
|
|
479
|
+
"include-exclude-list-selected-header-loading": __props.loading,
|
|
480
|
+
"include-exclude-list-header-loaded": !__props.loading
|
|
481
|
+
}])
|
|
482
|
+
}, [
|
|
483
|
+
__props.loading ? (openBlock(), createElementBlock("div", _hoisted_14, [
|
|
484
|
+
createVNode(unref(Skeleton), { round: "" })
|
|
485
|
+
])) : createCommentVNode("", true),
|
|
486
|
+
createElementVNode("div", _hoisted_15, [
|
|
487
|
+
!__props.loading ? (openBlock(), createBlock(unref(Text), {
|
|
488
|
+
key: 0,
|
|
489
|
+
class: "include-exclude-selected-header-left-selected",
|
|
490
|
+
size: "sm"
|
|
491
|
+
}, {
|
|
492
|
+
default: withCtx(() => [
|
|
493
|
+
createTextVNode(toDisplayString(unref(selectedOption)?.length) + " Selected", 1)
|
|
494
|
+
]),
|
|
495
|
+
_: 1
|
|
496
|
+
})) : createCommentVNode("", true)
|
|
497
|
+
]),
|
|
498
|
+
createElementVNode("div", _hoisted_16, [
|
|
499
|
+
renderSlot(_ctx.$slots, "selected-header-right", {}, () => [
|
|
500
|
+
unref(selectedOption)?.length && !__props.loading && __props.showClearAll ? (openBlock(), createBlock(unref(Button), {
|
|
501
|
+
key: 0,
|
|
502
|
+
variant: "link",
|
|
503
|
+
theme: "third",
|
|
504
|
+
size: "md",
|
|
505
|
+
strong: false,
|
|
506
|
+
onClick: clearSelections
|
|
507
|
+
}, {
|
|
508
|
+
default: withCtx(() => [
|
|
509
|
+
createTextVNode("Clear all")
|
|
510
|
+
]),
|
|
511
|
+
_: 1
|
|
512
|
+
})) : createCommentVNode("", true)
|
|
513
|
+
], true)
|
|
514
|
+
])
|
|
515
|
+
], 2),
|
|
516
|
+
createElementVNode("div", mergeProps({
|
|
517
|
+
class: ["include-exclude-selected-list", {
|
|
518
|
+
"include-exclude-list-draggable": __props.isDraggable
|
|
519
|
+
}]
|
|
520
|
+
}, unref(containerPropsSelected)), [
|
|
521
|
+
unref(selectedOption)?.length && !__props.loading && !__props.isDraggable ? (openBlock(), createElementBlock("ul", mergeProps({ key: 0 }, unref(wrapperPropsSelected), {
|
|
522
|
+
ref: "SelectedlistRef",
|
|
523
|
+
tabindex: "2"
|
|
524
|
+
}), [
|
|
525
|
+
(openBlock(true), createElementBlock(Fragment, null, renderList(unref(virtualOptionsSelected), ({ data, index }) => {
|
|
526
|
+
return openBlock(), createElementBlock("li", { key: index }, [
|
|
527
|
+
renderSlot(_ctx.$slots, "selected_option", {
|
|
528
|
+
option: data,
|
|
529
|
+
selected: toRaw(unref(selectedOption)) === data,
|
|
530
|
+
active: toRaw(unref(activeIndex)) === index
|
|
531
|
+
}, void 0, true)
|
|
532
|
+
]);
|
|
533
|
+
}), 128))
|
|
534
|
+
], 16)) : createCommentVNode("", true),
|
|
535
|
+
unref(selectedOption)?.length && !__props.loading && __props.isDraggable ? (openBlock(), createElementBlock("ul", mergeProps({ key: 1 }, unref(wrapperPropsSelected), {
|
|
536
|
+
ref: "SelectedlistRef",
|
|
537
|
+
tabindex: "2"
|
|
538
|
+
}), [
|
|
539
|
+
createVNode(unref(draggable), mergeProps({
|
|
540
|
+
modelValue: unref(virtualOptionsSelected),
|
|
541
|
+
"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => isRef(virtualOptionsSelected) ? virtualOptionsSelected.value = $event : null)
|
|
542
|
+
}, __props.draggableArgs, { onChange: onChangeDragDrop }), {
|
|
543
|
+
item: withCtx(({ element }) => [
|
|
544
|
+
createElementVNode("div", _hoisted_17, [
|
|
545
|
+
renderSlot(_ctx.$slots, "selected_option_draggable", {
|
|
546
|
+
option: element.data,
|
|
547
|
+
selected: toRaw(unref(selectedOption)) === element.data,
|
|
548
|
+
active: toRaw(unref(activeIndex)) === element.data.draggableItemKey
|
|
549
|
+
}, void 0, true)
|
|
550
|
+
])
|
|
551
|
+
]),
|
|
552
|
+
_: 3
|
|
553
|
+
}, 16, ["modelValue"])
|
|
554
|
+
], 16)) : createCommentVNode("", true),
|
|
555
|
+
__props.loading ? (openBlock(), createElementBlock("ul", _hoisted_18, [
|
|
556
|
+
(openBlock(), createElementBlock(Fragment, null, renderList(skeletonItems, (n) => {
|
|
557
|
+
return createElementVNode("li", {
|
|
558
|
+
key: n,
|
|
559
|
+
class: "include-exclude-list-item-skeleton"
|
|
560
|
+
}, [
|
|
561
|
+
createElementVNode("div", _hoisted_19, [
|
|
562
|
+
createVNode(unref(Skeleton), { round: "" })
|
|
563
|
+
])
|
|
564
|
+
]);
|
|
565
|
+
}), 64))
|
|
566
|
+
])) : createCommentVNode("", true)
|
|
567
|
+
], 16)
|
|
568
|
+
])
|
|
569
|
+
]))
|
|
570
|
+
]),
|
|
571
|
+
_: 3
|
|
572
|
+
})
|
|
573
|
+
]),
|
|
574
|
+
renderSlot(_ctx.$slots, "footer", {
|
|
575
|
+
handleApply: onApply,
|
|
576
|
+
handleCancel: onCancel
|
|
577
|
+
}, () => [
|
|
578
|
+
createElementVNode("div", _hoisted_20, [
|
|
579
|
+
createElementVNode("div", _hoisted_21, [
|
|
580
|
+
createVNode(unref(Button), {
|
|
581
|
+
ref_key: "cancel",
|
|
582
|
+
ref: cancel,
|
|
583
|
+
size: "sm",
|
|
584
|
+
variant: "border",
|
|
585
|
+
theme: "third",
|
|
586
|
+
text: "Cancel",
|
|
587
|
+
onClick: onCancel
|
|
588
|
+
}, {
|
|
589
|
+
default: withCtx(() => [
|
|
590
|
+
createTextVNode("Cancel")
|
|
591
|
+
]),
|
|
592
|
+
_: 1
|
|
593
|
+
}, 512),
|
|
594
|
+
createVNode(unref(Button), {
|
|
595
|
+
ref_key: "apply",
|
|
596
|
+
ref: apply,
|
|
597
|
+
size: "sm",
|
|
598
|
+
theme: "primary",
|
|
599
|
+
text: "Apply",
|
|
600
|
+
onClick: onApply
|
|
601
|
+
}, {
|
|
602
|
+
default: withCtx(() => [
|
|
603
|
+
createTextVNode("Apply")
|
|
604
|
+
]),
|
|
605
|
+
_: 1
|
|
606
|
+
}, 512)
|
|
607
|
+
])
|
|
608
|
+
])
|
|
609
|
+
], true)
|
|
610
|
+
], 2)
|
|
611
|
+
]),
|
|
612
|
+
_: 3
|
|
613
|
+
}, 8, ["distance", "skidding", "open", "placement"]);
|
|
614
|
+
};
|
|
615
|
+
}
|
|
616
|
+
});
|
|
617
|
+
var IncludeExcludeDragDrop = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-060b4732"]]);
|
|
618
|
+
|
|
619
|
+
export { IncludeExcludeDragDrop as default };
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import IncludeExclude from './IncludeExclude.vue';
|
|
2
|
+
import IncludeExcludeDragDrop from './IncludeExcludeDragDrop.vue';
|
|
2
3
|
import IncludeExcludeOption from './IncludeExcludeOption.vue';
|
|
3
4
|
import IncludeExcludeOptionDraggable from './IncludeExcludeOptionDraggable.vue';
|
|
4
5
|
import IncludeExcludeAppTrigger from './IncludeExcludeAppTrigger.vue';
|
|
@@ -704,4 +705,4 @@ declare const IncludeExcludeTypes: () => (import("vue").DefineComponent<{
|
|
|
704
705
|
showImage: boolean;
|
|
705
706
|
triggerTextFunc: (option: unknown) => string;
|
|
706
707
|
}>)[];
|
|
707
|
-
export { IncludeExclude, IncludeExcludeOption, IncludeExcludeOptionDraggable, IncludeExcludeAppTrigger, IncludeExcludeAppHeader, IncludeExcludeChipFilter, IncludeExcludeTypes, };
|
|
708
|
+
export { IncludeExclude, IncludeExcludeDragDrop, IncludeExcludeOption, IncludeExcludeOptionDraggable, IncludeExcludeAppTrigger, IncludeExcludeAppHeader, IncludeExcludeChipFilter, IncludeExcludeTypes, };
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
import IncludeExclude from './IncludeExclude.vue.js';
|
|
2
2
|
export { default as IncludeExclude } from './IncludeExclude.vue.js';
|
|
3
|
+
import IncludeExcludeDragDrop from './IncludeExcludeDragDrop.vue.js';
|
|
4
|
+
export { default as IncludeExcludeDragDrop } from './IncludeExcludeDragDrop.vue.js';
|
|
3
5
|
import IncludeExcludeOption from './IncludeExcludeOption.vue.js';
|
|
4
6
|
export { default as IncludeExcludeOption } from './IncludeExcludeOption.vue.js';
|
|
5
7
|
import IncludeExcludeOptionDraggable from './IncludeExcludeOptionDraggable.vue.js';
|
|
@@ -13,6 +15,7 @@ export { default as IncludeExcludeChipFilter } from './IncludeExcludeChipFilter.
|
|
|
13
15
|
|
|
14
16
|
const IncludeExcludeTypes = () => [
|
|
15
17
|
IncludeExclude,
|
|
18
|
+
IncludeExcludeDragDrop,
|
|
16
19
|
IncludeExcludeOption,
|
|
17
20
|
IncludeExcludeOptionDraggable,
|
|
18
21
|
IncludeExcludeAppTrigger,
|
package/index.vue.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import './
|
|
1
|
+
import './Option.vue_vue_type_style_index_0_scoped_true_lang.css';
|
|
2
2
|
export { AppTriggerTypes } from './components/appTrigger/index.vue.js';
|
|
3
3
|
export { AutocompleteDropdownTypes } from './components/autocompleteDropdown/index.vue.js';
|
|
4
4
|
export { MenuItemTypes } from './components/menuItem/index.vue.js';
|
|
@@ -49,6 +49,7 @@ export { default as RadioGroup } from './components/radioButton/RadioGroup.vue.j
|
|
|
49
49
|
export { snackbarEmits, snackbarTypes } from './components/snackbar/snackbar.types.vue.js';
|
|
50
50
|
export { default as FloatingToolbar } from './components/floatingToolbar/FloatingToolbar.vue.js';
|
|
51
51
|
export { default as IncludeExclude } from './components/includeExclude/IncludeExclude.vue.js';
|
|
52
|
+
export { default as IncludeExcludeDragDrop } from './components/includeExclude/IncludeExcludeDragDrop.vue.js';
|
|
52
53
|
export { default as IncludeExcludeOption } from './components/includeExclude/IncludeExcludeOption.vue.js';
|
|
53
54
|
export { default as IncludeExcludeOptionDraggable } from './components/includeExclude/IncludeExcludeOptionDraggable.vue.js';
|
|
54
55
|
export { default as IncludeExcludeAppTrigger } from './components/includeExclude/IncludeExcludeAppTrigger.vue.js';
|