@ironsource/shared-ui 2.1.10 → 2.1.11-rc.1

package/components/dropdown/v4/TreeDropdown.vue2.js

@@ -1,5 +1,5 @@
- import "../../../TreeDropdown.vue_vue_type_style_index_0_scoped_a51b6929_lang.css"; import { defineComponent as j, provide as F, ref as s, onMounted as R, watch as v, openBlock as m, createBlock as U, unref as a, withCtx as K, createVNode as k, normalizeProps as G, guardReactiveProps as H, createSlots as J, renderSlot as Q, withModifiers as q, createElementBlock as N, withDirectives as W, createElementVNode as X, Fragment as Y, renderList as Z, vShow as _, createCommentVNode as ee } from "vue";
-import ne from "./DropdownV4.vue.js";
+ import "../../../TreeDropdown.vue_vue_type_style_index_0_scoped_6ac5f602_lang.css"; import { defineComponent as F, provide as R, ref as c, onMounted as G, watch as m, computed as H, openBlock as v, createBlock as U, unref as d, withCtx as g, createVNode as k, normalizeProps as J, guardReactiveProps as Q, createSlots as W, renderSlot as X, withModifiers as N, createElementBlock as q, withDirectives as Y, createElementVNode as Z, Fragment as _, renderList as ee, vShow as ne, createCommentVNode as oe } from "vue";
+import te from "./DropdownV4.vue.js";
 import le from "./DefaultDropdownTrigger.vue.js";
 import "./IconButtonDropdownTrigger.vue.js";
 import "./ChipDropdownTrigger.vue.js";
@@ -7,13 +7,13 @@ import "./AppDropdownTrigger.vue.js";
 import "./ButtonDropdownTrigger.vue.js";
 import "./ButtonFilterDropdownTrigger.vue.js";
 import "./TreeDropdown.vue.js";
-import z from "./OptionV4.vue.js";
-import { useChildOptions as oe } from "../composables/useChildOptions.js";
-import te from "../../search/v4/SearchV4.vue.js";
-const ie = {
+import x from "./OptionV4.vue.js";
+import { useChildOptions as ie } from "../composables/useChildOptions.js";
+import de from "../../search/v4/SearchV4.vue.js";
+const ae = {
   key: 0,
   class: "child-options"
-}, Ke = /* @__PURE__ */ j({
+}, Ce = /* @__PURE__ */ F({
   __name: "TreeDropdown",
   props: {
     options: null,
@@ -34,187 +34,195 @@ const ie = {
     valueToCopy: { default: null },
     disabledOptionKey: { default: "disabled" },
     optionChildrenKey: null,
-    optionUniqueIdKey: null
+    optionUniqueIdKey: null,
+    preExpandedOptions: null
   },
   emits: ["update:selected", "update:isOpen"],
-  setup(o, { emit: I }) {
-    const l = o;
-    F("isTreeDropdown", !0);
-    const f = s([]), h = s([]), w = s({}), O = s(!1), i = s([...l.selected]), u = s(""), S = () => {
-      l.options.forEach((n) => {
-        n[l.optionChildrenKey] && n[l.optionChildrenKey].length && (w.value[n[l.optionUniqueIdKey]] = [
-          ...n[l.optionChildrenKey]
+  setup(t, { emit: I }) {
+    const o = t;
+    R("isTreeDropdown", !0);
+    const h = c([]), f = c([]), O = c({}), w = c(!1), i = c([...o.selected]), u = c(""), b = () => {
+      o.options.forEach((n) => {
+        n[o.optionChildrenKey] && n[o.optionChildrenKey].length && (O.value[n[o.optionUniqueIdKey]] = [
+          ...n[o.optionChildrenKey]
         ]);
-      }), f.value = [...l.options], h.value = [...l.options];
-    };
-    R(() => {
-      O.value || (S(), O.value = !0);
-    }), v(
-      () => l.options,
-      () => {
-        S();
-      }
-    ), v(
-      () => l.selected,
-      () => {
-        i.value = [...l.selected];
-      }
-    );
-    const { hasChildren: p, getChildren: y, allChildrenSelected: g, someChildrenSelected: V } = oe(i, l.optionChildrenKey), b = (n) => {
+      }), h.value = [...o.options], f.value = [...o.options];
+    }, { hasChildren: p, getChildren: y, allChildrenSelected: K, someChildrenSelected: z } = ie(i, o.optionChildrenKey), E = (n) => {
       if (p(n)) {
-        g(n) ? i.value = i.value.filter(
-          (t) => !y(n).includes(t)
+        K(n) ? i.value = i.value.filter(
+          (l) => !y(n).includes(l)
         ) : i.value = [
-          ...i.value.filter((t) => !y(n).includes(t)),
+          ...i.value.filter((l) => !y(n).includes(l)),
           ...y(n)
         ];
         return;
       }
       i.value.includes(n) ? i.value = i.value.filter(
-        (t) => t !== n
+        (l) => l !== n
       ) : i.value = [...i.value, n];
-    }, E = (n) => i.value.includes(n), D = (n) => 1 + (p(n) ? y(n).length : 0), B = () => {
+    }, S = (n) => i.value.includes(n), V = (n) => 1 + (p(n) ? y(n).length : 0), D = () => {
       I("update:selected", i.value);
-    }, M = () => {
+    }, B = () => {
       i.value = [];
-    }, P = () => {
+    }, L = () => {
       const n = /* @__PURE__ */ new Set([]);
-      h.value.forEach((e) => {
-        if (l.selected?.includes(e))
+      f.value.forEach((e) => {
+        if (o.selected?.includes(e))
           n.add(e);
-        else if (e[l.optionChildrenKey] && e[l.optionChildrenKey].length) {
-          for (const r of e[l.optionChildrenKey])
-            if (l.selected?.includes(r)) {
+        else if (e[o.optionChildrenKey] && e[o.optionChildrenKey].length) {
+          for (const s of e[o.optionChildrenKey])
+            if (o.selected?.includes(s)) {
               n.add(e);
               break;
             }
         }
       });
-      const t = Array.from(n);
-      return h.value.forEach((e) => {
-        !l.selected.includes(e) && !n.has(e) && t.push(e);
-      }), t;
+      const l = Array.from(n);
+      return f.value.forEach((e) => {
+        !o.selected.includes(e) && !n.has(e) && l.push(e);
+      }), l;
     };
-    v(
-      () => l.isOpen,
+    G(() => {
+      w.value || (b(), w.value = !0, o.preExpandedOptions && o.preExpandedOptions.forEach((n) => {
+        a.value[n] = 1;
+      }));
+    }), m(
+      () => o.options,
       () => {
-        l.isOpen ? f.value = P() : (i.value = [...l.selected], u.value = "");
+        b();
+      }
+    ), m(
+      () => o.selected,
+      () => {
+        i.value = [...o.selected];
+      }
+    ), m(
+      () => o.isOpen,
+      () => {
+        o.isOpen ? h.value = L() : (i.value = [...o.selected], u.value = "");
       }
     );
-    const d = s({}), x = (n) => {
-      d.value[n[l.optionUniqueIdKey]] ? delete d.value[n[l.optionUniqueIdKey]] : d.value[n[l.optionUniqueIdKey]] = 1;
+    const a = c({}), M = (n) => {
+      a.value[n[o.optionUniqueIdKey]] ? delete a.value[n[o.optionUniqueIdKey]] : a.value[n[o.optionUniqueIdKey]] = 1;
     };
-    function A(n, t) {
-      const e = n.toLowerCase(), r = [];
-      return t.value.forEach((c) => {
-        const C = c[l.optionNameKey].toLowerCase().includes(e), T = w.value[c[l.optionUniqueIdKey]]?.filter(
-          ($) => $[l.optionNameKey].toLowerCase().includes(e)
+    function P(n, l) {
+      const e = n.toLowerCase(), s = [];
+      return l.value.forEach((r) => {
+        const C = r[o.optionNameKey].toLowerCase().includes(e), T = O.value[r[o.optionUniqueIdKey]]?.filter(
+          (j) => j[o.optionNameKey].toLowerCase().includes(e)
         ) || [];
-        (C || T.length > 0) && (c[l.optionChildrenKey] = T, r.push(c));
-      }), r;
+        (C || T.length > 0) && (r[o.optionChildrenKey] = T, s.push(r));
+      }), s;
     }
-    const L = (n) => {
-      const t = A(n, h);
-      n && (Object.keys(d.value).forEach((e) => {
-        delete d.value[e];
-      }), t.forEach((e) => {
-        Array.isArray(e[l.optionChildrenKey]) && e[l.optionChildrenKey].length && (d.value[e[l.optionUniqueIdKey]] = 1);
-      })), f.value = t;
-    };
-    return v(
+    const A = (n) => {
+      const l = P(n, f);
+      n && (Object.keys(a.value).forEach((e) => {
+        delete a.value[e];
+      }), l.forEach((e) => {
+        Array.isArray(e[o.optionChildrenKey]) && e[o.optionChildrenKey].length && (a.value[e[o.optionUniqueIdKey]] = 1);
+      })), h.value = l;
+    }, $ = H(() => {
+      const n = o.options.length, l = o.options.reduce(
+        (e, s) => (a.value[s[o.optionUniqueIdKey]] && (e = e + s[o.optionChildrenKey].length), e),
+        0
+      );
+      return n + l;
+    });
+    return m(
       () => u.value,
       () => {
-        L(u.value);
+        A(u.value);
       }
-    ), (n, t) => (m(), U(a(ne), {
+    ), (n, l) => (v(), U(d(te), {
       multi: "",
       class: "tree-dropdown",
       "show-select-all": !1,
-      "is-open": o.isOpen,
-      options: f.value,
-      selected: o.selected,
-      "display-value": o.displayValue,
-      placeholder: o.placeholder,
+      "is-open": t.isOpen,
+      options: h.value,
+      selected: t.selected,
+      "display-value": t.displayValue,
+      placeholder: t.placeholder,
       "inline-search": "",
-      "inline-search-placeholder": o.inlineSearchPlaceholder,
-      "option-name-key": o.optionNameKey,
-      size: o.size,
-      "test-id": o.testId,
-      disabled: o.disabled,
+      "inline-search-placeholder": t.inlineSearchPlaceholder,
+      "option-name-key": t.optionNameKey,
+      size: t.size,
+      "test-id": t.testId,
+      disabled: t.disabled,
       "disable-virtual-scroll": "",
-      "override-option-count-calculation": D,
+      "override-option-count-calculation": V,
       "trigger-show-all-selected-text": !1,
       "predefined-trigger": "default",
-      "onUpdate:isOpen": t[1] || (t[1] = (e) => I("update:isOpen", e)),
-      onApply: B,
-      onClear: M
+      "custom-number-of-displayed-options": d($),
+      "onUpdate:isOpen": l[1] || (l[1] = (e) => I("update:isOpen", e)),
+      onApply: D,
+      onClear: B
     }, {
-      "dropdown-trigger": K(({ defaultTriggerProps: e }) => [
-        k(a(le), G(H(e)), J({ _: 2 }, [
+      "dropdown-trigger": g(({ defaultTriggerProps: e }) => [
+        k(d(le), J(Q(e)), W({ _: 2 }, [
           n.$slots["trigger-end-icon"] ? {
             name: "end-icon",
-            fn: K(() => [
-              Q(n.$slots, "trigger-end-icon", {}, void 0, !0)
+            fn: g(() => [
+              X(n.$slots, "trigger-end-icon", {}, void 0, !0)
             ]),
             key: "0"
           } : void 0
         ]), 1040)
       ]),
-      "inline-search": K(() => [
-        k(a(te), {
+      "inline-search": g(() => [
+        k(d(de), {
           modelValue: u.value,
-          "onUpdate:modelValue": t[0] || (t[0] = (e) => u.value = e),
-          placeholder: o.inlineSearchPlaceholder,
+          "onUpdate:modelValue": l[0] || (l[0] = (e) => u.value = e),
+          placeholder: t.inlineSearchPlaceholder,
           variant: "transparent",
           size: "md",
           "auto-focus": "",
-          "test-id": o.testId
+          "test-id": t.testId
         }, null, 8, ["modelValue", "placeholder", "test-id"])
       ]),
-      default: K(({ option: e, index: r }) => [
-        k(a(z), {
+      default: g(({ option: e, index: s }) => [
+        k(d(x), {
           option: e,
-          "selected-prop": a(p)(e) ? a(g)(e) : E(e),
-          "is-indeterminate": !a(g)(e) && a(V)(e),
-          disabled: e[o.disabledOptionKey],
-          "name-key": o.optionNameKey,
-          "image-key": o.optionImageKey,
-          "icon-key": o.optionIconKey,
-          "icon-type": o.optionIconType,
-          "end-icon-key": o.optionEndIconKey,
-          "end-icon-type": o.optionEndIconType,
-          "tree-main-option": a(p)(e),
-          "tree-main-option-expanded": d.value[e[o.optionUniqueIdKey]],
+          "selected-prop": d(p)(e) ? d(K)(e) : S(e),
+          "is-indeterminate": !d(K)(e) && d(z)(e),
+          disabled: e[t.disabledOptionKey],
+          "name-key": t.optionNameKey,
+          "image-key": t.optionImageKey,
+          "icon-key": t.optionIconKey,
+          "icon-type": t.optionIconType,
+          "end-icon-key": t.optionEndIconKey,
+          "end-icon-type": t.optionEndIconType,
+          "tree-main-option": d(p)(e),
+          "tree-main-option-expanded": a.value[e[t.optionUniqueIdKey]],
           "stop-option-click-event-propagation": "",
-          onClick: q(() => b(e), ["stop"]),
-          onToggleTreeCollapse: x
+          onClick: N(() => E(e), ["stop"]),
+          onToggleTreeCollapse: M
         }, null, 8, ["option", "selected-prop", "is-indeterminate", "disabled", "name-key", "image-key", "icon-key", "icon-type", "end-icon-key", "end-icon-type", "tree-main-option", "tree-main-option-expanded", "onClick"]),
-        a(p)(e) ? (m(), N("div", ie, [
-          W(X("div", null, [
-            (m(!0), N(Y, null, Z(a(y)(e), (c, C) => (m(), U(a(z), {
-              key: `${r}-${C}`,
-              option: c,
-              "selected-prop": E(c),
-              disabled: c[o.disabledOptionKey],
-              "name-key": o.optionNameKey,
-              "image-key": o.optionImageKey,
-              "icon-key": o.optionIconKey,
-              "icon-type": o.optionIconType,
-              "end-icon-key": o.optionEndIconKey,
-              "end-icon-type": o.optionEndIconType,
-              "tree-child-shown": d.value[e[o.optionUniqueIdKey]],
+        d(p)(e) ? (v(), q("div", ae, [
+          Y(Z("div", null, [
+            (v(!0), q(_, null, ee(d(y)(e), (r, C) => (v(), U(d(x), {
+              key: `${s}-${C}`,
+              option: r,
+              "selected-prop": S(r),
+              disabled: r[t.disabledOptionKey],
+              "name-key": t.optionNameKey,
+              "image-key": t.optionImageKey,
+              "icon-key": t.optionIconKey,
+              "icon-type": t.optionIconType,
+              "end-icon-key": t.optionEndIconKey,
+              "end-icon-type": t.optionEndIconType,
+              "tree-child-shown": a.value[e[t.optionUniqueIdKey]],
               "stop-option-click-event-propagation": "",
-              onClick: q(() => b(c), ["stop"])
+              onClick: N(() => E(r), ["stop"])
             }, null, 8, ["option", "selected-prop", "disabled", "name-key", "image-key", "icon-key", "icon-type", "end-icon-key", "end-icon-type", "tree-child-shown", "onClick"]))), 128))
           ], 512), [
-            [_, d.value[e[o.optionUniqueIdKey]]]
+            [ne, a.value[e[t.optionUniqueIdKey]]]
           ])
-        ])) : ee("", !0)
+        ])) : oe("", !0)
       ]),
       _: 3
-    }, 8, ["is-open", "options", "selected", "display-value", "placeholder", "inline-search-placeholder", "option-name-key", "size", "test-id", "disabled"]));
+    }, 8, ["is-open", "options", "selected", "display-value", "placeholder", "inline-search-placeholder", "option-name-key", "size", "test-id", "disabled", "custom-number-of-displayed-options"]));
   }
 });
 export {
-  Ke as default
+  Ce as default
 };

package/components/dropdown/v4/index.d.ts

@@ -1704,6 +1704,7 @@ declare const DropdownTypes: () => (({
             optionTwoLinesKey: string;
             groupedOptions: boolean;
             comparingKey: string;
+            customNumberOfDisplayedOptions: number;
             fullWidth: boolean;
             optionsListWidth: string;
             statusType: "default" | "disabled" | "success" | "warning" | "error" | "archive";
@@ -1912,6 +1913,10 @@ declare const DropdownTypes: () => (({
                 type: import("vue").PropType<string>;
                 default: any;
             };
+            customNumberOfDisplayedOptions: {
+                type: import("vue").PropType<number>;
+                default: any;
+            };
             fullWidth: {
                 type: import("vue").PropType<boolean>;
                 default: boolean;
@@ -1942,7 +1947,7 @@ declare const DropdownTypes: () => (({
             onOnsearch?: (value: string) => any;
             onOpened?: () => any;
             onClosed?: () => any;
-        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "theme" | "testId" | "placement" | "disabled" | "distance" | "container" | "popperClass" | "size" | "flip" | "mandatory" | "skidding" | "modelValue" | "selected" | "onClear" | "placeholder" | "multi" | "showSelectAll" | "defaultOpen" | "keepOpen" | "autoSize" | "disableKeyboardEvents" | "isOnTop" | "triggerLabel" | "triggerHelperText" | "triggerFeedbackText" | "triggerFeedbackVariant" | "triggerFeedbackShowIcon" | "triggerShowAllSelectedText" | "predefinedTrigger" | "inlineSearch" | "inlineSearchPlaceholder" | "onSearch" | "noResultsText" | "searchAutoFocus" | "optionNameKey" | "optionIconKey" | "optionImageKey" | "optionIconType" | "optionEndIconKey" | "optionEndIconType" | "optionFlagKey" | "valueToCopy" | "disabledOptionKey" | "optionTwoLinesVariant" | "optionTwoLinesKey" | "groupedOptions" | "comparingKey" | "fullWidth" | "optionsListWidth" | "statusType" | "disableVirtualScroll" | "overrideOptionCountCalculation">;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "theme" | "testId" | "placement" | "disabled" | "distance" | "container" | "popperClass" | "size" | "flip" | "mandatory" | "skidding" | "modelValue" | "selected" | "onClear" | "placeholder" | "multi" | "showSelectAll" | "defaultOpen" | "keepOpen" | "autoSize" | "disableKeyboardEvents" | "isOnTop" | "triggerLabel" | "triggerHelperText" | "triggerFeedbackText" | "triggerFeedbackVariant" | "triggerFeedbackShowIcon" | "triggerShowAllSelectedText" | "predefinedTrigger" | "inlineSearch" | "inlineSearchPlaceholder" | "onSearch" | "noResultsText" | "searchAutoFocus" | "optionNameKey" | "optionIconKey" | "optionImageKey" | "optionIconType" | "optionEndIconKey" | "optionEndIconType" | "optionFlagKey" | "valueToCopy" | "disabledOptionKey" | "optionTwoLinesVariant" | "optionTwoLinesKey" | "groupedOptions" | "comparingKey" | "customNumberOfDisplayedOptions" | "fullWidth" | "optionsListWidth" | "statusType" | "disableVirtualScroll" | "overrideOptionCountCalculation">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -2159,6 +2164,10 @@ declare const DropdownTypes: () => (({
                 type: import("vue").PropType<string>;
                 default: any;
             };
+            customNumberOfDisplayedOptions: {
+                type: import("vue").PropType<number>;
+                default: any;
+            };
             fullWidth: {
                 type: import("vue").PropType<boolean>;
                 default: boolean;
@@ -2250,6 +2259,7 @@ declare const DropdownTypes: () => (({
             optionTwoLinesKey: string;
             groupedOptions: boolean;
             comparingKey: string;
+            customNumberOfDisplayedOptions: number;
             fullWidth: boolean;
             optionsListWidth: string;
             statusType: "default" | "disabled" | "success" | "warning" | "error" | "archive";
@@ -2478,6 +2488,10 @@ declare const DropdownTypes: () => (({
             type: import("vue").PropType<string>;
             default: any;
         };
+        customNumberOfDisplayedOptions: {
+            type: import("vue").PropType<number>;
+            default: any;
+        };
         fullWidth: {
             type: import("vue").PropType<boolean>;
             default: boolean;
@@ -2718,6 +2732,10 @@ declare const DropdownTypes: () => (({
         type: import("vue").PropType<string>;
         default: any;
     };
+    customNumberOfDisplayedOptions: {
+        type: import("vue").PropType<number>;
+        default: any;
+    };
     fullWidth: {
         type: import("vue").PropType<boolean>;
         default: boolean;
@@ -2809,6 +2827,7 @@ declare const DropdownTypes: () => (({
     optionTwoLinesKey: string;
     groupedOptions: boolean;
     comparingKey: string;
+    customNumberOfDisplayedOptions: number;
     fullWidth: boolean;
     optionsListWidth: string;
     statusType: "default" | "disabled" | "success" | "warning" | "error" | "archive";
@@ -3036,7 +3055,11 @@ declare const DropdownTypes: () => (({
                 required: true;
             };
             optionUniqueIdKey: {
-                type: import("vue").PropType<string>;
+                type: import("vue").PropType<string | number>;
+                required: true;
+            };
+            preExpandedOptions: {
+                type: import("vue").PropType<string[] | number[]>;
                 required: true;
             };
         }>> & {
@@ -3129,7 +3152,11 @@ declare const DropdownTypes: () => (({
                 required: true;
             };
             optionUniqueIdKey: {
-                type: import("vue").PropType<string>;
+                type: import("vue").PropType<string | number>;
+                required: true;
+            };
+            preExpandedOptions: {
+                type: import("vue").PropType<string[] | number[]>;
                 required: true;
             };
         }>> & {
@@ -3246,7 +3273,11 @@ declare const DropdownTypes: () => (({
             required: true;
         };
         optionUniqueIdKey: {
-            type: import("vue").PropType<string>;
+            type: import("vue").PropType<string | number>;
+            required: true;
+        };
+        preExpandedOptions: {
+            type: import("vue").PropType<string[] | number[]>;
             required: true;
         };
     }>> & {
@@ -3329,7 +3360,11 @@ declare const DropdownTypes: () => (({
         required: true;
     };
     optionUniqueIdKey: {
-        type: import("vue").PropType<string>;
+        type: import("vue").PropType<string | number>;
+        required: true;
+    };
+    preExpandedOptions: {
+        type: import("vue").PropType<string[] | number[]>;
         required: true;
     };
 }>> & {