@ironsource/shared-ui 2.1.12-rc.24 → 2.1.12-rc.25
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/ChipDropdownTrigger.vue_vue_type_style_index_0_scoped_38354f10_lang.css +1 -0
- package/ConditionalDropdown.vue_vue_type_style_index_0_scoped_cce87267_lang.css +1 -0
- package/DataGrid.vue_vue_type_style_index_0_scoped_5b72e35a_lang.css +1 -0
- package/DropdownV4.vue_vue_type_style_index_0_scoped_92ead583_lang.css +1 -0
- package/components/dropdown/v4/ChipDropdownTrigger.vue.d.ts +5 -0
- package/components/dropdown/v4/ChipDropdownTrigger.vue.js +3 -3
- package/components/dropdown/v4/ChipDropdownTrigger.vue2.js +64 -54
- package/components/dropdown/v4/ConditionalDropdown.vue.d.ts +5 -0
- package/components/dropdown/v4/ConditionalDropdown.vue.js +3 -3
- package/components/dropdown/v4/ConditionalDropdown.vue2.js +94 -91
- package/components/dropdown/v4/DropdownV4.vue.d.ts +5 -0
- package/components/dropdown/v4/DropdownV4.vue.js +3 -3
- package/components/dropdown/v4/DropdownV4.vue2.js +51 -49
- package/components/dropdown/v4/index.d.ts +38 -1
- package/components/table/v4/DataGrid.vue.js +4 -4
- package/components/table/v4/DataGrid.vue2.js +5 -5
- package/index.d.ts +76 -2
- package/index.js +1 -1
- package/package.json +1 -1
- package/ChipDropdownTrigger.vue_vue_type_style_index_0_scoped_e43ac1c9_lang.css +0 -1
- package/ConditionalDropdown.vue_vue_type_style_index_0_scoped_8d5521da_lang.css +0 -1
- package/DataGrid.vue_vue_type_style_index_0_scoped_086c5b0d_lang.css +0 -1
- package/DropdownV4.vue_vue_type_style_index_0_scoped_86b82f0c_lang.css +0 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.chip-trigger[data-v-38354f10]{border:1px solid var(--default-outlined-border);padding:.3125rem .3125rem .3125rem .4375rem;border-radius:100px;cursor:pointer;user-select:none;display:inline-flex;max-width:250px}.chip-trigger[data-v-38354f10]:hover{border-color:var(--action-active);background:var(--action-selected)}.chip-trigger.active[data-v-38354f10]{border:none;background:var(--primary-light);padding:.375rem .375rem .375rem .5rem}.chip-trigger.active .chip-trigger--content[data-v-38354f10]{color:var(--primary-contrast-text)}.chip-trigger.active[data-v-38354f10]:hover{border:.0625rem solid var(--primary-main-50-p);padding:.3125rem .3125rem .3125rem .4375rem}.chip-trigger.open[data-v-38354f10]{border:.125rem solid var(--action-active);padding:.25rem .25rem .25rem .375rem;background:var(--action-selected)}.chip-trigger.open.active[data-v-38354f10]{border:.125rem solid var(--primary-main-50-p);background:var(--primary-light);padding:.25rem .25rem .25rem .375rem}.chip-trigger.disabled[data-v-38354f10]{cursor:auto}.chip-trigger--content[data-v-38354f10]{color:var(--text-primary);display:flex;width:100%}.chip-trigger--content .x-circle-wrapper[data-v-38354f10]{margin-left:4px;color:var(--primary-dark)}.chip-trigger--content .x-circle-wrapper[data-v-38354f10]:hover{color:var(--primary-darker)}.chip-trigger--text[data-v-38354f10]{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:left;width:100%}.chip-trigger--suffix[data-v-38354f10]{white-space:nowrap}.chip-trigger--icon[data-v-38354f10]{margin-left:4px;color:var(--action-active)}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.custom-list-area[data-v-cce87267]{color:var(--text-secondary);width:100%;text-align:center;box-sizing:border-box;padding:63px 10px}.inline-search[data-v-cce87267]{width:100%}.contain-accept[data-v-cce87267]{padding:6px 8px;margin-bottom:4px;cursor:pointer}.contain-accept[data-v-cce87267]:hover{background-color:var(--action-hover);border-radius:.5rem}.contain-accept--query[data-v-cce87267]{margin-left:4px;display:inline-flex;color:var(--primary-main)}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.sticky[data-v-5b72e35a]{position:sticky}.table-container[data-v-5b72e35a]{width:100%;position:relative;display:flex;flex-direction:column}.table-header[data-v-5b72e35a]{display:flex;align-items:center;height:calc(var(--spacing-800) - 1px);border-bottom:1px solid var(--common-divider);background-color:var(--background-paper-elevation-0);position:sticky;left:0;padding:var(--spacing-300)}.table-header .table-title[data-v-5b72e35a]{display:flex;flex:1;align-items:center;justify-content:flex-start;height:100%;color:var(--text-primary)}.table-header .table-header-right[data-v-5b72e35a]{display:flex;align-items:center;height:100%}.table-header .search-wrapper[data-v-5b72e35a]{width:13.75rem}.table-header.isStickyHeader[data-v-5b72e35a]{z-index:calc(var(--6eb1b581) + 3);top:0}.table-head-container[data-v-5b72e35a]{display:flex;align-items:center;white-space:nowrap;color:var(--text-primary)}.table-footer[data-v-5b72e35a]{color:var(--text-primary);background-color:var(--background-paper-elevation-0);padding:0 var(--spacing-300);display:flex;align-items:center;min-height:var(--spacing-600);border:1px solid var(--common-divider);border-radius:var(--border-radius-md);border-top-right-radius:0;border-top-left-radius:0}.table-body-wrapper[data-v-5b72e35a]{display:inline-table}.table-header-pre-search-content[data-v-5b72e35a]{margin-right:var(--spacing-100);display:flex;align-items:center}.table-header-actions[data-v-5b72e35a]{margin-left:var(--spacing-100);display:flex;align-items:center}.table-row[data-v-5b72e35a]{position:relative}.table-row.loading[data-v-5b72e35a]{opacity:.7}.table-row:not(.expanded):last-child>td[data-v-5b72e35a]{border-bottom:none}.table-row.expanded:last-child>.expanded-row[data-v-5b72e35a]{border-bottom:none}.expanded-row[data-v-5b72e35a]{grid-column:var(--4420f996);border-bottom:1px solid var(--common-divider);background-color:var(--background-default)}table[data-v-5b72e35a]{position:relative;display:block;overflow:auto;background:var(--background-paper-elevation-0);border:1px solid var(--common-divider);color:var(--text-primary);text-align:left;table-layout:fixed;width:100%;max-height:100%;border-radius:var(--border-radius-md);border-collapse:collapse;border-spacing:0}table.hasFooter[data-v-5b72e35a]{border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom:none}table td[data-v-5b72e35a],table th[data-v-5b72e35a]{line-height:normal;padding:0 var(--spacing-200)}table td[data-v-5b72e35a]:first-of-type,table th[data-v-5b72e35a]:first-of-type{padding-left:var(--spacing-300)}table td[data-v-5b72e35a]:last-of-type,table th[data-v-5b72e35a]:last-of-type{padding-right:var(--spacing-300)}table td.expand-toggle-cell[data-v-5b72e35a],table th.expand-toggle-cell[data-v-5b72e35a]{padding-left:var(--spacing-150);padding-right:var(--spacing-75)}table>thead[data-v-5b72e35a]{border-bottom:none;z-index:calc(var(--6eb1b581) + 1);display:inline-table;min-width:100%}table>thead>tr[data-v-5b72e35a]{color:var(--text-primary);border-bottom:1px solid var(--common-divider);height:var(--spacing-500);display:grid;grid-template-columns:var(--3030c624)}table>thead>tr>th[data-v-5b72e35a]{background:var(--background-paper-elevation-0);width:100%;display:flex;align-items:center;cursor:default}table>thead>tr>th.isSortable[data-v-5b72e35a]{cursor:pointer}table>thead>tr>td[data-v-5b72e35a]{display:flex;align-items:center}table>thead>tr>th.bordered[data-v-5b72e35a],table>thead>tr>td.bordered[data-v-5b72e35a]{border-right:1px solid var(--common-divider)}table>thead>tr>th.bordered.isStickyRight[data-v-5b72e35a],table>thead>tr>td.bordered.isStickyRight[data-v-5b72e35a]{border-right:none;border-left:1px solid var(--common-divider)}table>thead>tr>th.isTextRight[data-v-5b72e35a],table>thead>tr>td.isTextRight[data-v-5b72e35a]{justify-content:flex-end}table>thead.sticky[data-v-5b72e35a]{position:sticky;top:0;background:var(--background-default)}table>thead.isStickyHeader[data-v-5b72e35a]{z-index:calc(var(--6eb1b581) + 2);top:calc(var(--spacing-800) - 1px)}table .totals-row[data-v-5b72e35a]{height:40px}table .totals-row[data-v-5b72e35a]:hover{background:var(--background-paper-elevation-1)}table>tbody[data-v-5b72e35a]{display:block}table>tbody>*>tr[data-v-5b72e35a]{background-color:var(--background-default);height:auto;display:grid;align-items:center;grid-template-columns:var(--3030c624)}table>tbody>*>tr:nth-of-type(2n)>td[data-v-5b72e35a]{background-color:var(--background-default)}table>tbody>*>tr:hover:not(.loading)>td[data-v-5b72e35a],table>tbody>*>tr.activeMenu>td[data-v-5b72e35a]{background-color:var(--background-paper-elevation-1)}table>tbody td[data-v-5b72e35a]{background-color:var(--background-default);border:none;min-width:0;display:flex;height:auto;width:100%;place-items:center;border-bottom:1px solid var(--common-divider);justify-content:start}table>tbody td.bordered[data-v-5b72e35a]{border-right:1px solid var(--common-divider)}table>tbody td.bordered.isStickyRight[data-v-5b72e35a]{border-right:none;border-left:1px solid var(--common-divider)}table>tbody td.isTextRight[data-v-5b72e35a]{justify-content:flex-end;text-align:right}.underlined[data-v-5b72e35a]{border-bottom:.0625rem dashed var(--common-divider)}.underlined[data-v-5b72e35a]:hover{cursor:help}.section-container[data-v-5b72e35a]{left:0}.sections[data-v-5b72e35a]{display:flex}.section[data-v-5b72e35a]{padding:0 1.5rem;background:var(--background-default);left:0;height:32px;display:flex;align-items:flex-end;border-right:1px solid var(--common-divider)}.table-cell[data-v-5b72e35a]{width:100%}.empty-state[data-v-5b72e35a]{min-height:250px}.floating-row[data-v-5b72e35a]{display:flex;inset:0;pointer-events:none;position:absolute;z-index:calc(var(--6eb1b581) + 1)}.floating-row *[data-v-5b72e35a-s]{pointer-events:auto}.bg[data-v-5b72e35a]{background:var(--background-default)}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.v-enter-active[data-v-92ead583],.v-leave-active[data-v-92ead583]{transition:opacity .25s ease}ol[data-v-92ead583],ul[data-v-92ead583],menu[data-v-92ead583]{list-style:none;margin:0;padding:0}.dropdown.full-width[data-v-92ead583],.dropdown.full-width .button__container[data-v-92ead583]{width:100%}.dropdown-list-wrapper[data-v-92ead583]{display:flex;flex-direction:column;padding:.5rem .5rem .25rem}.dropdown-list-wrapper--multi[data-v-92ead583]{padding:.5rem}.list-container--multi[data-v-92ead583]{margin-bottom:0}.inline-search .inline-search-wrapper[data-v-92ead583]{display:flex;gap:4px;padding-bottom:.25rem}.inline-search .inline-search-wrapper .search-container[data-v-92ead583]{width:100%}.inline-search .list-container[data-v-92ead583]{padding-top:0}.no-result-container[data-v-92ead583]{height:100%;display:flex;align-items:center;padding:.375rem .5rem;color:var(--text-disabled)}.no-result[data-v-92ead583]{color:var(--text-disabled);padding-left:.5rem}.list[data-v-92ead583]{outline:none;display:flex;flex-direction:column;width:100%;min-height:2rem}.list--multi[data-v-92ead583]{margin-bottom:.5rem;border-bottom-left-radius:0;border-bottom-right-radius:0}.list--with-conditions[data-v-92ead583]{min-height:0;margin-bottom:0}.image-slot[data-v-92ead583]{margin-right:.5rem}.actions-wrapper[data-v-92ead583]{display:flex;width:100%;padding:.5rem .5rem .5rem .125rem;padding-bottom:0;border-top:1px solid var(--common-divider);justify-content:space-between;margin-top:.25rem}.apply-button[data-v-92ead583]{margin-left:.5rem}
|
|
@@ -12,6 +12,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
|
|
|
12
12
|
multi: boolean;
|
|
13
13
|
cancelAllSelectedDisplay?: boolean;
|
|
14
14
|
displayValueInQuotes?: boolean;
|
|
15
|
+
shownValuesCount?: number;
|
|
15
16
|
}>, {
|
|
16
17
|
label: string;
|
|
17
18
|
open: boolean;
|
|
@@ -22,6 +23,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
|
|
|
22
23
|
allSelected: boolean;
|
|
23
24
|
cancelAllSelectedDisplay: boolean;
|
|
24
25
|
displayValueInQuotes: boolean;
|
|
26
|
+
shownValuesCount: number;
|
|
25
27
|
}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
26
28
|
clear: () => void;
|
|
27
29
|
}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
|
|
@@ -38,6 +40,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
|
|
|
38
40
|
multi: boolean;
|
|
39
41
|
cancelAllSelectedDisplay?: boolean;
|
|
40
42
|
displayValueInQuotes?: boolean;
|
|
43
|
+
shownValuesCount?: number;
|
|
41
44
|
}>, {
|
|
42
45
|
label: string;
|
|
43
46
|
open: boolean;
|
|
@@ -48,6 +51,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
|
|
|
48
51
|
allSelected: boolean;
|
|
49
52
|
cancelAllSelectedDisplay: boolean;
|
|
50
53
|
displayValueInQuotes: boolean;
|
|
54
|
+
shownValuesCount: number;
|
|
51
55
|
}>>> & {
|
|
52
56
|
onClear?: () => any;
|
|
53
57
|
}, {
|
|
@@ -60,6 +64,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
|
|
|
60
64
|
displayedValue: any;
|
|
61
65
|
cancelAllSelectedDisplay: boolean;
|
|
62
66
|
displayValueInQuotes: boolean;
|
|
67
|
+
shownValuesCount: number;
|
|
63
68
|
}>;
|
|
64
69
|
export default _default;
|
|
65
70
|
type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import o from "./ChipDropdownTrigger.vue2.js";
|
|
2
2
|
/* empty css */import e from "../../../_virtual/_plugin-vue_export-helper.js";
|
|
3
|
-
// import "../../../ChipDropdownTrigger.
|
|
4
|
-
const
|
|
3
|
+
// import "../../../ChipDropdownTrigger.vue_vue_type_style_index_0_scoped_38354f10_lang.css"; //*');
|
|
4
|
+
const s = /* @__PURE__ */ e(o, [["__scopeId", "data-v-38354f10"]]);
|
|
5
5
|
export {
|
|
6
|
-
|
|
6
|
+
s as default
|
|
7
7
|
};
|
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
import "../../../ChipDropdownTrigger.
|
|
2
|
-
import
|
|
1
|
+
import "../../../ChipDropdownTrigger.vue_vue_type_style_index_0_scoped_38354f10_lang.css"; import { defineComponent as k, ref as m, computed as y, watch as S, openBlock as $, createBlock as D, unref as t, withCtx as h, createElementVNode as p, mergeProps as d, createVNode as u, createTextVNode as O, toDisplayString as C, withDirectives as b, vShow as x, withModifiers as E } from "vue";
|
|
2
|
+
import v from "../../icon/v4/IconV4.vue.js";
|
|
3
3
|
import "../../icon/v4/IconFlag.vue.js";
|
|
4
|
-
import
|
|
4
|
+
import _ from "../../typography/v4/Typography.vue.js";
|
|
5
5
|
import { DropdownTestIdModifiers as i } from "../../../testids/index.js";
|
|
6
|
-
import { useTestIdAttrs as
|
|
7
|
-
import { isElementTruncated as
|
|
8
|
-
import { promiseTimeout as
|
|
9
|
-
import
|
|
10
|
-
const
|
|
6
|
+
import { useTestIdAttrs as U } from "../../../utils/testIds.js";
|
|
7
|
+
import { isElementTruncated as F } from "../../../utils/text.js";
|
|
8
|
+
import { promiseTimeout as L } from "@vueuse/core";
|
|
9
|
+
import R from "../../tooltip/v4/TooltipV4.vue.js";
|
|
10
|
+
const z = { class: "chip-trigger--icon" }, M = ["onClick"], W = /* @__PURE__ */ k({
|
|
11
11
|
__name: "ChipDropdownTrigger",
|
|
12
12
|
props: {
|
|
13
13
|
label: { default: "Status" },
|
|
@@ -22,87 +22,97 @@ const R = { class: "chip-trigger--icon" }, z = ["onClick"], K = /* @__PURE__ */
|
|
|
22
22
|
displayValue: null,
|
|
23
23
|
multi: { type: Boolean },
|
|
24
24
|
cancelAllSelectedDisplay: { type: Boolean, default: !1 },
|
|
25
|
-
displayValueInQuotes: { type: Boolean, default: !1 }
|
|
25
|
+
displayValueInQuotes: { type: Boolean, default: !1 },
|
|
26
|
+
shownValuesCount: { default: 1 }
|
|
26
27
|
},
|
|
27
28
|
emits: ["clear"],
|
|
28
|
-
setup(
|
|
29
|
-
const e =
|
|
30
|
-
|
|
31
|
-
}, o =
|
|
29
|
+
setup(f, { emit: w }) {
|
|
30
|
+
const e = f, A = () => {
|
|
31
|
+
w("clear");
|
|
32
|
+
}, o = m(null), r = m(!0), T = m(!1), g = (l) => {
|
|
32
33
|
let a = l;
|
|
33
|
-
Array.isArray(l) && (l.length > 1 ? a = `${l
|
|
34
|
-
let
|
|
35
|
-
return e.displayValueInQuotes && (
|
|
36
|
-
},
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
34
|
+
Array.isArray(l) && (l.length > 1 ? a = `${l.filter((I) => typeof I == "string").join(", ")}` : a = l[0] ? `${l[0]}` : ""), r.value = !!a;
|
|
35
|
+
let c = a;
|
|
36
|
+
return e.displayValueInQuotes && (c = `"${a}"`), a ? `${e.label}: ${c}` : e.label;
|
|
37
|
+
}, V = (l) => {
|
|
38
|
+
if (Array.isArray(l) && l.length > 1) {
|
|
39
|
+
const a = l[l.length - 1];
|
|
40
|
+
if (typeof a == "number" && a > 0)
|
|
41
|
+
return `, +${a}`;
|
|
42
|
+
}
|
|
43
|
+
return "";
|
|
44
|
+
}, B = y(
|
|
40
45
|
() => e.feedbackVariant ? `state-${e.feedbackVariant}` : ""
|
|
41
|
-
),
|
|
46
|
+
), n = U(e.testId, i), s = y(() => {
|
|
42
47
|
if (!e.multi)
|
|
43
48
|
return e.selectedOption ? e.displayValue(e.selectedOption) : "";
|
|
44
|
-
if (Array.isArray(e.selectedOption))
|
|
45
|
-
return
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
+
if (!Array.isArray(e.selectedOption))
|
|
50
|
+
return;
|
|
51
|
+
if (!e.selectedOption.length)
|
|
52
|
+
return [];
|
|
53
|
+
if (e.allSelected && !e.cancelAllSelectedDisplay)
|
|
54
|
+
return ["All"];
|
|
55
|
+
if (e.selectedOption.length === 1 && e.displayValue)
|
|
56
|
+
return [e.displayValue(e.selectedOption[0])];
|
|
57
|
+
const l = e.selectedOption.slice(0, e.shownValuesCount).map((c) => e.displayValue(c)), a = e.selectedOption.length - l.length;
|
|
58
|
+
return [...l, a];
|
|
49
59
|
});
|
|
50
|
-
|
|
51
|
-
await
|
|
60
|
+
S([() => e.selectedOption, o], async () => {
|
|
61
|
+
await L(100), T.value = o.value && F(o.value);
|
|
52
62
|
});
|
|
53
|
-
const
|
|
54
|
-
|
|
63
|
+
const N = y(() => T.value ? `${g(s.value)}${V(
|
|
64
|
+
s.value
|
|
55
65
|
)}` : "");
|
|
56
|
-
return (l, a) => (
|
|
57
|
-
text: t(
|
|
66
|
+
return (l, a) => ($(), D(t(R), {
|
|
67
|
+
text: t(N),
|
|
58
68
|
class: "tooltip-option",
|
|
59
69
|
placement: "top"
|
|
60
70
|
}, {
|
|
61
|
-
default:
|
|
62
|
-
|
|
63
|
-
class: ["chip-trigger", [t(
|
|
64
|
-
}, t(
|
|
65
|
-
|
|
71
|
+
default: h(() => [
|
|
72
|
+
p("div", d({
|
|
73
|
+
class: ["chip-trigger", [t(B), { active: r.value, disabled: f.disabled, open: f.open }]]
|
|
74
|
+
}, t(n)[t(i).BUTTON]), [
|
|
75
|
+
p("div", {
|
|
66
76
|
ref_key: "textContainerRef",
|
|
67
77
|
ref: o,
|
|
68
78
|
class: "chip-trigger--content"
|
|
69
79
|
}, [
|
|
70
|
-
|
|
80
|
+
u(t(_), d({
|
|
71
81
|
class: "chip-trigger--text",
|
|
72
82
|
variant: "chipLabel"
|
|
73
|
-
}, t(
|
|
74
|
-
default:
|
|
75
|
-
|
|
83
|
+
}, t(n)[t(i).BUTTON_CONTENT]), {
|
|
84
|
+
default: h(() => [
|
|
85
|
+
O(C(g(t(s))), 1)
|
|
76
86
|
]),
|
|
77
87
|
_: 1
|
|
78
88
|
}, 16),
|
|
79
|
-
|
|
89
|
+
u(t(_), d({
|
|
80
90
|
class: "chip-trigger--suffix",
|
|
81
91
|
variant: "chipLabel"
|
|
82
|
-
}, t(
|
|
83
|
-
default:
|
|
84
|
-
|
|
92
|
+
}, t(n)[t(i).BUTTON_CONTENT_SUFFIX]), {
|
|
93
|
+
default: h(() => [
|
|
94
|
+
O(C(V(t(s))), 1)
|
|
85
95
|
]),
|
|
86
96
|
_: 1
|
|
87
97
|
}, 16),
|
|
88
|
-
|
|
89
|
-
|
|
98
|
+
b(p("div", z, [
|
|
99
|
+
u(t(v), {
|
|
90
100
|
name: "caret-down",
|
|
91
101
|
size: "16px"
|
|
92
102
|
})
|
|
93
103
|
], 512), [
|
|
94
|
-
[
|
|
104
|
+
[x, !r.value]
|
|
95
105
|
]),
|
|
96
|
-
|
|
97
|
-
onClick:
|
|
106
|
+
b(p("div", d({ class: "x-circle-wrapper" }, t(n)[t(i).BUTTON_CLEAR], {
|
|
107
|
+
onClick: E(A, ["stop"])
|
|
98
108
|
}), [
|
|
99
|
-
|
|
109
|
+
u(t(v), {
|
|
100
110
|
name: "x-circle",
|
|
101
111
|
size: "16px",
|
|
102
112
|
type: "fill"
|
|
103
113
|
})
|
|
104
|
-
], 16,
|
|
105
|
-
[
|
|
114
|
+
], 16, M), [
|
|
115
|
+
[x, r.value]
|
|
106
116
|
])
|
|
107
117
|
], 512)
|
|
108
118
|
], 16)
|
|
@@ -112,5 +122,5 @@ const R = { class: "chip-trigger--icon" }, z = ["onClick"], K = /* @__PURE__ */
|
|
|
112
122
|
}
|
|
113
123
|
});
|
|
114
124
|
export {
|
|
115
|
-
|
|
125
|
+
W as default
|
|
116
126
|
};
|
|
@@ -26,6 +26,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
|
|
|
26
26
|
optionImageKey?: string;
|
|
27
27
|
optionIconType?: IconTypes;
|
|
28
28
|
loadingOverride?: boolean;
|
|
29
|
+
triggerShownValuesCount?: number;
|
|
29
30
|
}>, {
|
|
30
31
|
label: string;
|
|
31
32
|
testId: string;
|
|
@@ -44,6 +45,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
|
|
|
44
45
|
optionImageKey: string;
|
|
45
46
|
optionIconType: any;
|
|
46
47
|
loadingOverride: boolean;
|
|
48
|
+
triggerShownValuesCount: number;
|
|
47
49
|
}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
48
50
|
"update:selectedCondition": (value: SelectedCondition) => void;
|
|
49
51
|
"update:appliedSelections": (value: unknown) => void;
|
|
@@ -71,6 +73,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
|
|
|
71
73
|
optionImageKey?: string;
|
|
72
74
|
optionIconType?: IconTypes;
|
|
73
75
|
loadingOverride?: boolean;
|
|
76
|
+
triggerShownValuesCount?: number;
|
|
74
77
|
}>, {
|
|
75
78
|
label: string;
|
|
76
79
|
testId: string;
|
|
@@ -89,6 +92,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
|
|
|
89
92
|
optionImageKey: string;
|
|
90
93
|
optionIconType: any;
|
|
91
94
|
loadingOverride: boolean;
|
|
95
|
+
triggerShownValuesCount: number;
|
|
92
96
|
}>>> & {
|
|
93
97
|
onClear?: () => any;
|
|
94
98
|
onClosed?: () => any;
|
|
@@ -99,6 +103,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
|
|
|
99
103
|
testId: string;
|
|
100
104
|
isOpen: boolean;
|
|
101
105
|
infiniteLoading: boolean;
|
|
106
|
+
triggerShownValuesCount: number;
|
|
102
107
|
optionNameKey: string;
|
|
103
108
|
optionIconKey: string;
|
|
104
109
|
optionImageKey: string;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import o from "./ConditionalDropdown.vue2.js";
|
|
2
|
-
/* empty css */import
|
|
3
|
-
// import "../../../ConditionalDropdown.
|
|
4
|
-
const p = /* @__PURE__ */
|
|
2
|
+
/* empty css */import e from "../../../_virtual/_plugin-vue_export-helper.js";
|
|
3
|
+
// import "../../../ConditionalDropdown.vue_vue_type_style_index_0_scoped_cce87267_lang.css"; //*');
|
|
4
|
+
const p = /* @__PURE__ */ e(o, [["__scopeId", "data-v-cce87267"]]);
|
|
5
5
|
export {
|
|
6
6
|
p as default
|
|
7
7
|
};
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import "../../../ConditionalDropdown.
|
|
1
|
+
import "../../../ConditionalDropdown.vue_vue_type_style_index_0_scoped_cce87267_lang.css"; import { defineComponent as W, computed as w, ref as s, watch as O, onMounted as q, openBlock as D, createBlock as G, unref as c, withCtx as f, createVNode as y, mergeProps as H, createElementVNode as J, isRef as X, normalizeProps as Y, guardReactiveProps as Z, createElementBlock as _, createTextVNode as ee, toDisplayString as le, createCommentVNode as oe } from "vue";
|
|
2
2
|
import F from "./DropdownV4.vue.js";
|
|
3
3
|
import "./DefaultDropdownTrigger.vue.js";
|
|
4
4
|
import "./IconButtonDropdownTrigger.vue.js";
|
|
5
|
-
import
|
|
5
|
+
import te from "./ChipDropdownTrigger.vue.js";
|
|
6
6
|
import "./AppDropdownTrigger.vue.js";
|
|
7
7
|
import "./ButtonDropdownTrigger.vue.js";
|
|
8
|
-
import
|
|
8
|
+
import ae from "./ButtonFilterDropdownTrigger.vue.js";
|
|
9
9
|
import "./TreeDropdown.vue.js";
|
|
10
10
|
import "./OptionV4.vue.js";
|
|
11
11
|
import "./ConditionalDropdown.vue.js";
|
|
@@ -15,7 +15,7 @@ import { useDebounceFn as ue } from "@vueuse/core";
|
|
|
15
15
|
const re = { class: "conditional-container" }, se = {
|
|
16
16
|
key: 0,
|
|
17
17
|
class: "custom-list-area"
|
|
18
|
-
},
|
|
18
|
+
}, ke = /* @__PURE__ */ W({
|
|
19
19
|
__name: "ConditionalDropdown",
|
|
20
20
|
props: {
|
|
21
21
|
selectedCondition: null,
|
|
@@ -38,16 +38,17 @@ const re = { class: "conditional-container" }, se = {
|
|
|
38
38
|
optionIconKey: { default: "" },
|
|
39
39
|
optionImageKey: { default: "" },
|
|
40
40
|
optionIconType: { default: null },
|
|
41
|
-
loadingOverride: { type: Boolean, default: !1 }
|
|
41
|
+
loadingOverride: { type: Boolean, default: !1 },
|
|
42
|
+
triggerShownValuesCount: { default: 1 }
|
|
42
43
|
},
|
|
43
44
|
emits: ["update:selectedCondition", "update:appliedSelections", "clear", "closed"],
|
|
44
|
-
setup(
|
|
45
|
-
const e =
|
|
45
|
+
setup(n, { emit: h }) {
|
|
46
|
+
const e = n, S = w({
|
|
46
47
|
get: () => e.appliedSelections,
|
|
47
48
|
set: (l) => {
|
|
48
49
|
h("update:appliedSelections", l);
|
|
49
50
|
}
|
|
50
|
-
}),
|
|
51
|
+
}), u = w({
|
|
51
52
|
get: () => e.selectedCondition || e.conditionalOptions[0],
|
|
52
53
|
set: (l) => {
|
|
53
54
|
h("update:selectedCondition", l);
|
|
@@ -55,37 +56,37 @@ const re = { class: "conditional-container" }, se = {
|
|
|
55
56
|
}), L = () => {
|
|
56
57
|
const { appliedSelections: l } = e;
|
|
57
58
|
return l ? Array.isArray(l) ? l : [l] : [];
|
|
58
|
-
},
|
|
59
|
-
const l = p.value ? 4 : 4.5, o =
|
|
59
|
+
}, k = s(null), p = s(!0), a = s([]), i = s(L()), T = s(!0), d = s(!1), C = s(!1), r = s(e.searchQuery), B = s(""), m = s(e.label), K = s([]), U = w(() => (!r.value || r.value?.length < e.minCharsToStart) && !a.value.length ? `Enter at least ${e.minCharsToStart} characters to begin` : "No results found"), I = w(() => {
|
|
60
|
+
const l = p.value ? 4 : 4.5, o = a.value.length > 4 ? a.value.length : l;
|
|
60
61
|
if (e.groupedOptions) {
|
|
61
|
-
let
|
|
62
|
-
return
|
|
63
|
-
|
|
64
|
-
}),
|
|
62
|
+
let t = 0;
|
|
63
|
+
return a.value.forEach((g) => {
|
|
64
|
+
g.options && (t = t + g.options.length);
|
|
65
|
+
}), t > 4 ? t : l;
|
|
65
66
|
}
|
|
66
67
|
return o > l ? o : l;
|
|
67
68
|
}), M = (l, o) => {
|
|
68
|
-
if (e.infiniteLoading &&
|
|
69
|
-
const
|
|
69
|
+
if (e.infiniteLoading && u.value.multi && Array.isArray(i.value) && i.value.length && l && o.length) {
|
|
70
|
+
const t = [], g = i.value.filter(
|
|
70
71
|
(v) => v[e.optionNameKey].includes(l)
|
|
71
72
|
);
|
|
72
73
|
return o.forEach((v) => {
|
|
73
|
-
|
|
74
|
+
g.find(
|
|
74
75
|
(j) => j[e.comparingKey] === v[e.comparingKey]
|
|
75
|
-
) &&
|
|
76
|
-
}),
|
|
77
|
-
(v) => !
|
|
76
|
+
) && t.push(v[e.comparingKey]);
|
|
77
|
+
}), g.filter(
|
|
78
|
+
(v) => !t.includes(v[e.comparingKey])
|
|
78
79
|
);
|
|
79
80
|
}
|
|
80
81
|
return [];
|
|
81
|
-
},
|
|
82
|
+
}, A = async (l) => {
|
|
82
83
|
try {
|
|
83
84
|
d.value = !0;
|
|
84
|
-
const o = await e.fetchFnCallback(l),
|
|
85
|
+
const o = await e.fetchFnCallback(l), t = M(
|
|
85
86
|
l,
|
|
86
87
|
o
|
|
87
88
|
);
|
|
88
|
-
|
|
89
|
+
a.value = [...t, ...o], d.value = !1;
|
|
89
90
|
} catch (o) {
|
|
90
91
|
d.value = !1, console.error("Error fetching data:", o);
|
|
91
92
|
}
|
|
@@ -94,142 +95,144 @@ const re = { class: "conditional-container" }, se = {
|
|
|
94
95
|
try {
|
|
95
96
|
C.value = !0;
|
|
96
97
|
const l = await e.loadMoreFn();
|
|
97
|
-
C.value = !1, Array.isArray(l) && (
|
|
98
|
+
C.value = !1, Array.isArray(l) && (a.value = [...a.value, ...l]);
|
|
98
99
|
} catch (l) {
|
|
99
100
|
C.value = !1, console.error("Error fetching data:", l);
|
|
100
101
|
}
|
|
101
102
|
}, x = ue(
|
|
102
|
-
|
|
103
|
+
A,
|
|
103
104
|
e.fetchDataDebounceTime
|
|
104
105
|
), b = (l) => {
|
|
105
|
-
l.length >= e.minCharsToStart ? (x(l),
|
|
106
|
+
l.length >= e.minCharsToStart ? (x(l), k.value?.scrollTo(0)) : e.infiniteLoading && u.value.multi ? a.value = K.value || [] : a.value = [];
|
|
106
107
|
}, P = () => {
|
|
107
|
-
|
|
108
|
-
[e.optionNameKey]:
|
|
108
|
+
r.value && a.value.length && !d.value && !u.value.multi ? a.value[0].conditionalOptions ? a.value[0] = {
|
|
109
|
+
[e.optionNameKey]: r.value,
|
|
109
110
|
conditionalOptions: !0,
|
|
110
|
-
conditionalName:
|
|
111
|
-
[e.comparingKey]:
|
|
112
|
-
} :
|
|
111
|
+
conditionalName: u.value.label,
|
|
112
|
+
[e.comparingKey]: r.value
|
|
113
|
+
} : a.value = [
|
|
113
114
|
{
|
|
114
|
-
[e.optionNameKey]:
|
|
115
|
+
[e.optionNameKey]: r.value,
|
|
115
116
|
conditionalOptions: !0,
|
|
116
|
-
conditionalName:
|
|
117
|
-
[e.comparingKey]:
|
|
117
|
+
conditionalName: u.value.label,
|
|
118
|
+
[e.comparingKey]: r.value
|
|
118
119
|
},
|
|
119
|
-
...
|
|
120
|
-
] :
|
|
120
|
+
...a.value
|
|
121
|
+
] : a.value.length && a.value[0].conditionalOptions && a.value.shift();
|
|
121
122
|
}, N = () => {
|
|
122
|
-
p.value &&
|
|
123
|
+
p.value && i.value.length === 0 ? m.value = e.label : m.value = `${e.label} ${u.value.label.toLowerCase()}`;
|
|
123
124
|
};
|
|
124
|
-
|
|
125
|
-
b(
|
|
126
|
-
}),
|
|
125
|
+
O(r, () => {
|
|
126
|
+
b(r.value);
|
|
127
|
+
}), O([u, a], () => {
|
|
127
128
|
P();
|
|
128
|
-
}),
|
|
129
|
+
}), O(
|
|
129
130
|
() => e.loadingOverride,
|
|
130
131
|
(l, o) => {
|
|
131
|
-
!l && o && !e.infiniteLoading &&
|
|
132
|
+
!l && o && !e.infiniteLoading && A(e.searchQuery);
|
|
132
133
|
}
|
|
133
134
|
);
|
|
134
135
|
const Q = () => {
|
|
135
|
-
p.value &&
|
|
136
|
+
p.value && i.value.length === 0 ? (u.value = null, S.value = [], u.value = null) : (B.value = r.value, S.value = p.value ? [...i.value] : { ...i.value }, T.value = p.value), N();
|
|
136
137
|
};
|
|
137
|
-
|
|
138
|
-
|
|
138
|
+
O(u, (l, o) => {
|
|
139
|
+
u.value.multi ? (d.value = !0, !o.multi && l.multi && (Array.isArray(e.appliedSelections) ? i.value = e.appliedSelections : i.value = [e.appliedSelections]), setTimeout(() => {
|
|
139
140
|
d.value = !1, p.value = !0;
|
|
140
141
|
}, 100)) : (!o.multi && !l.multi && (d.value = !0), setTimeout(() => {
|
|
141
142
|
!o.multi && !l.multi && (d.value = !1), p.value = !1;
|
|
142
143
|
}, 100));
|
|
143
144
|
});
|
|
144
|
-
const
|
|
145
|
-
|
|
146
|
-
},
|
|
147
|
-
|
|
148
|
-
},
|
|
149
|
-
l &&
|
|
145
|
+
const V = (l) => {
|
|
146
|
+
K.value = l;
|
|
147
|
+
}, R = () => {
|
|
148
|
+
i.value = [], S.value = [], u.value = null, m.value = e.label, r.value = "", h("clear");
|
|
149
|
+
}, z = (l) => {
|
|
150
|
+
l && u.value.multi && e.infiniteLoading && i.value && (a.value = i.value, r.value && b(r.value));
|
|
150
151
|
};
|
|
151
152
|
q(() => {
|
|
152
|
-
(e.searchQuery || !e.infiniteLoading || e.minCharsToStart === 0) && b(e.searchQuery), e.appliedSelections && Array.isArray(e.appliedSelections) && (
|
|
153
|
+
(e.searchQuery || !e.infiniteLoading || e.minCharsToStart === 0) && b(e.searchQuery), e.appliedSelections && Array.isArray(e.appliedSelections) && (a.value = e.appliedSelections, i.value = e.appliedSelections, K.value = e.appliedSelections), N();
|
|
153
154
|
});
|
|
154
155
|
const $ = () => {
|
|
155
156
|
h("closed");
|
|
156
157
|
};
|
|
157
158
|
return (l, o) => (D(), G(c(F), {
|
|
158
159
|
ref_key: "dropdownRef",
|
|
159
|
-
ref:
|
|
160
|
-
selected:
|
|
161
|
-
"onUpdate:selected": o[2] || (o[2] = (
|
|
160
|
+
ref: k,
|
|
161
|
+
selected: i.value,
|
|
162
|
+
"onUpdate:selected": o[2] || (o[2] = (t) => i.value = t),
|
|
162
163
|
"predefined-trigger": "chip",
|
|
163
|
-
"display-value": (
|
|
164
|
+
"display-value": (t) => t?.[n.optionNameKey],
|
|
164
165
|
multi: p.value,
|
|
165
|
-
options:
|
|
166
|
+
options: a.value,
|
|
166
167
|
placeholder: m.value,
|
|
167
168
|
"search-placeholder": "Search",
|
|
168
|
-
"option-name-key":
|
|
169
|
+
"option-name-key": n.optionNameKey,
|
|
169
170
|
"with-conditions": "",
|
|
170
171
|
"inline-search": "",
|
|
171
172
|
"custom-number-of-displayed-options": c(I),
|
|
172
173
|
"options-list-width": "330px",
|
|
173
|
-
loading: d.value ||
|
|
174
|
+
loading: d.value || n.loadingOverride,
|
|
174
175
|
"load-more-loading": C.value,
|
|
175
|
-
"comparing-key":
|
|
176
|
-
"is-open":
|
|
177
|
-
"infinite-loading":
|
|
178
|
-
"show-select-all": !
|
|
179
|
-
"grouped-options":
|
|
180
|
-
"option-flag-key":
|
|
181
|
-
"option-image-key":
|
|
182
|
-
"option-icon-key":
|
|
183
|
-
"option-icon-type":
|
|
184
|
-
"
|
|
176
|
+
"comparing-key": n.comparingKey,
|
|
177
|
+
"is-open": n.isOpen,
|
|
178
|
+
"infinite-loading": n.infiniteLoading,
|
|
179
|
+
"show-select-all": !n.infiniteLoading && !r.value,
|
|
180
|
+
"grouped-options": n.groupedOptions,
|
|
181
|
+
"option-flag-key": n.optionFlagKey,
|
|
182
|
+
"option-image-key": n.optionImageKey,
|
|
183
|
+
"option-icon-key": n.optionIconKey,
|
|
184
|
+
"option-icon-type": n.optionIconType,
|
|
185
|
+
"trigger-shown-values-count": n.triggerShownValuesCount,
|
|
186
|
+
"onUpdate:isOpen": z,
|
|
185
187
|
onOnsearch: b,
|
|
186
188
|
onApply: Q,
|
|
187
189
|
onLoadMore: E,
|
|
188
|
-
onUnsavedSelectionUpdate:
|
|
190
|
+
onUnsavedSelectionUpdate: V,
|
|
189
191
|
onClosed: $
|
|
190
192
|
}, {
|
|
191
|
-
"dropdown-trigger": f(({ defaultTriggerProps:
|
|
192
|
-
|
|
193
|
+
"dropdown-trigger": f(({ defaultTriggerProps: t }) => [
|
|
194
|
+
y(c(te), H(t, {
|
|
193
195
|
label: m.value,
|
|
194
196
|
"selected-option": c(S),
|
|
195
|
-
multi:
|
|
197
|
+
multi: T.value,
|
|
196
198
|
"cancel-all-selected-display": "",
|
|
197
|
-
"display-value-in-quotes": !Array.isArray(
|
|
198
|
-
|
|
199
|
-
|
|
199
|
+
"display-value-in-quotes": !Array.isArray(i.value) && i.value.conditionalOptions,
|
|
200
|
+
"shown-values-count": n.triggerShownValuesCount,
|
|
201
|
+
onClear: R
|
|
202
|
+
}), null, 16, ["label", "selected-option", "multi", "display-value-in-quotes", "shown-values-count"])
|
|
200
203
|
]),
|
|
201
204
|
"dropdown-conditions": f(() => [
|
|
202
205
|
J("div", re, [
|
|
203
|
-
|
|
204
|
-
selected: c(
|
|
205
|
-
"onUpdate:selected": o[0] || (o[0] = (
|
|
206
|
-
options:
|
|
206
|
+
y(c(F), {
|
|
207
|
+
selected: c(u),
|
|
208
|
+
"onUpdate:selected": o[0] || (o[0] = (t) => X(u) ? u.value = t : null),
|
|
209
|
+
options: n.conditionalOptions,
|
|
207
210
|
"option-name-key": "label",
|
|
208
|
-
"display-value": (
|
|
211
|
+
"display-value": (t) => t?.label,
|
|
209
212
|
container: ".conditional-container",
|
|
210
213
|
size: "small"
|
|
211
214
|
}, {
|
|
212
|
-
"dropdown-trigger": f(({ buttonTriggerProps:
|
|
213
|
-
|
|
215
|
+
"dropdown-trigger": f(({ buttonTriggerProps: t }) => [
|
|
216
|
+
y(c(ae), Y(Z(t)), null, 16)
|
|
214
217
|
]),
|
|
215
218
|
_: 1
|
|
216
219
|
}, 8, ["selected", "options", "display-value"])
|
|
217
220
|
])
|
|
218
221
|
]),
|
|
219
222
|
"inline-search": f(() => [
|
|
220
|
-
|
|
221
|
-
modelValue:
|
|
222
|
-
"onUpdate:modelValue": o[1] || (o[1] = (
|
|
223
|
+
y(c(ne), {
|
|
224
|
+
modelValue: r.value,
|
|
225
|
+
"onUpdate:modelValue": o[1] || (o[1] = (t) => r.value = t),
|
|
223
226
|
class: "inline-search",
|
|
224
227
|
placeholder: "Search",
|
|
225
228
|
variant: "transparent",
|
|
226
229
|
size: "md",
|
|
227
|
-
"auto-focus":
|
|
230
|
+
"auto-focus": n.autoFocusSearch
|
|
228
231
|
}, null, 8, ["modelValue", "auto-focus"])
|
|
229
232
|
]),
|
|
230
233
|
"custom-list-area": f(() => [
|
|
231
|
-
!
|
|
232
|
-
|
|
234
|
+
!a.value.length && !d.value ? (D(), _("div", se, [
|
|
235
|
+
y(ie, { variant: "body1" }, {
|
|
233
236
|
default: f(() => [
|
|
234
237
|
ee(le(c(U)), 1)
|
|
235
238
|
]),
|
|
@@ -238,9 +241,9 @@ const re = { class: "conditional-container" }, se = {
|
|
|
238
241
|
])) : oe("", !0)
|
|
239
242
|
]),
|
|
240
243
|
_: 1
|
|
241
|
-
}, 8, ["selected", "display-value", "multi", "options", "placeholder", "option-name-key", "custom-number-of-displayed-options", "loading", "load-more-loading", "comparing-key", "is-open", "infinite-loading", "show-select-all", "grouped-options", "option-flag-key", "option-image-key", "option-icon-key", "option-icon-type"]));
|
|
244
|
+
}, 8, ["selected", "display-value", "multi", "options", "placeholder", "option-name-key", "custom-number-of-displayed-options", "loading", "load-more-loading", "comparing-key", "is-open", "infinite-loading", "show-select-all", "grouped-options", "option-flag-key", "option-image-key", "option-icon-key", "option-icon-type", "trigger-shown-values-count"]));
|
|
242
245
|
}
|
|
243
246
|
});
|
|
244
247
|
export {
|
|
245
|
-
|
|
248
|
+
ke as default
|
|
246
249
|
};
|