@ironsource/shared-ui 2.1.7-test.1 → 2.1.7-test.10

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

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

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

@@ -225,6 +225,20 @@ export declare const dropDownStoryArgs: {
             category: string;
         };
     };
+    optionTwoLinesVariant: {
+        options: string[];
+        table: {
+            category: string;
+        };
+    };
+    optionTwoLinesKey: {
+        control: {
+            type: string;
+        };
+        table: {
+            category: string;
+        };
+    };
     valueToCopy: {
         control: {
             type: string;