@ironsource/shared-ui 2.1.11-rc.2 → 2.1.11-rc.21

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

@@ -0,0 +1,159 @@
+ import "../../../ConditionalDropdown.vue_vue_type_style_index_0_scoped_93545ce0_lang.css"; import { defineComponent as B, computed as f, ref as s, watch as b, openBlock as k, createBlock as E, unref as u, withCtx as m, createVNode as h, mergeProps as A, createElementVNode as F, isRef as U, createElementBlock as $, createTextVNode as z, toDisplayString as M, createCommentVNode as P } from "vue";
+import w from "./DropdownV4.vue.js";
+import "./DefaultDropdownTrigger.vue.js";
+import "./IconButtonDropdownTrigger.vue.js";
+import I from "./ChipDropdownTrigger.vue.js";
+import "./AppDropdownTrigger.vue.js";
+import "./ButtonDropdownTrigger.vue.js";
+import "./ButtonFilterDropdownTrigger.vue.js";
+import "./TreeDropdown.vue.js";
+import "./OptionV4.vue.js";
+import "./ConditionalDropdown.vue.js";
+import L from "../../search/v4/SearchV4.vue.js";
+import Q from "../../typography/v4/Typography.vue.js";
+import { useDebounceFn as R } from "@vueuse/core";
+const j = { class: "conditional-container" }, q = {
+  key: 0,
+  class: "custom-list-area"
+}, se = /* @__PURE__ */ B({
+  __name: "ConditionalDropdown",
+  props: {
+    selectedCondition: null,
+    appliedSelections: null,
+    conditionalOptions: null,
+    label: { default: "" },
+    testId: { default: "" },
+    comparingKey: { default: "id" },
+    fetchFnCallback: null,
+    optionNameKey: { default: "name" },
+    minCharsToStart: { default: 3 },
+    isOpen: { type: Boolean, default: !1 }
+  },
+  emits: ["update:selectedCondition", "update:appliedSelections", "clear"],
+  setup(c, { emit: y }) {
+    const t = c, g = f({
+      get: () => t.appliedSelections,
+      set: (o) => {
+        y("update:appliedSelections", o);
+      }
+    }), a = f({
+      get: () => t.selectedCondition || t.conditionalOptions[0],
+      set: (o) => {
+        y("update:selectedCondition", o);
+      }
+    }), d = s(!0), e = s([]), p = s([]), C = s(!0), r = s(!1), l = s(""), N = s(""), v = s(t.label), D = f(() => (!l.value || l.value?.length < t.minCharsToStart) && !e.value.length ? `Enter at least ${t.minCharsToStart} keywords to begin` : "No results found"), T = f(() => {
+      const o = d.value ? 2.5 : 4;
+      return e.value.length ? null : o;
+    }), K = R(async (o) => {
+      try {
+        r.value = !0;
+        const i = await t.fetchFnCallback(o);
+        r.value = !1, e.value = i, O();
+      } catch (i) {
+        console.error("Error fetching data:", i);
+      }
+    }, 400), S = (o) => {
+      o.length >= t.minCharsToStart ? K(o) : e.value = [];
+    }, O = () => {
+      l.value && e.value.length && !r.value && !a.value.multi ? e.value[0].conditionalOptions ? e.value[0] = {
+        name: l.value,
+        conditionalOptions: !0,
+        conditionalName: a.value.label,
+        [t.comparingKey]: l.value
+      } : e.value = [
+        {
+          name: l.value,
+          conditionalOptions: !0,
+          conditionalName: a.value.label,
+          [t.comparingKey]: l.value
+        },
+        ...e.value
+      ] : e.value.length && e.value[0].conditionalOptions && e.value.shift();
+    };
+    b(l, () => {
+      S(l.value);
+    }), b(a, () => {
+      O();
+    });
+    const V = () => {
+      N.value = l.value, v.value = `${t.label} ${a.value.label.toLowerCase()}`, g.value = d.value ? [...p.value] : { ...p.value }, C.value = d.value;
+    };
+    b(a, () => {
+      a.value.multi ? (r.value = !0, p.value = [], setTimeout(() => {
+        r.value = !1, d.value = !0;
+      }, 100)) : setTimeout(() => {
+        d.value = !1;
+      }, 100);
+    });
+    const x = () => {
+      p.value = [], g.value = [], a.value = null, v.value = t.label, l.value = "", y("clear");
+    };
+    return (o, i) => (k(), E(u(w), {
+      selected: p.value,
+      "onUpdate:selected": i[2] || (i[2] = (n) => p.value = n),
+      "predefined-trigger": "chip",
+      "display-value": (n) => n?.[c.optionNameKey],
+      multi: d.value,
+      options: e.value,
+      placeholder: v.value,
+      "search-placeholder": "Search",
+      "option-name-key": c.optionNameKey,
+      "with-conditions": "",
+      "inline-search": "",
+      "custom-number-of-displayed-options": u(T),
+      "options-list-width": "330px",
+      loading: r.value,
+      "comparing-key": c.comparingKey,
+      "is-open": c.isOpen,
+      onOnsearch: S,
+      onApply: V
+    }, {
+      "dropdown-trigger": m(({ defaultTriggerProps: n }) => [
+        h(u(I), A(n, {
+          label: v.value,
+          "selected-option": u(g),
+          multi: C.value,
+          onClear: x
+        }), null, 16, ["label", "selected-option", "multi"])
+      ]),
+      "dropdown-conditions": m(() => [
+        F("div", j, [
+          h(u(w), {
+            selected: u(a),
+            "onUpdate:selected": i[0] || (i[0] = (n) => U(a) ? a.value = n : null),
+            options: c.conditionalOptions,
+            "option-name-key": "label",
+            "display-value": (n) => n?.label,
+            container: ".conditional-container",
+            size: "small"
+          }, null, 8, ["selected", "options", "display-value"])
+        ])
+      ]),
+      "inline-search": m(() => [
+        h(u(L), {
+          modelValue: l.value,
+          "onUpdate:modelValue": i[1] || (i[1] = (n) => l.value = n),
+          class: "inline-search",
+          placeholder: "Search",
+          variant: "transparent",
+          size: "md",
+          "auto-focus": ""
+        }, null, 8, ["modelValue"])
+      ]),
+      "custom-list-area": m(() => [
+        !e.value.length && !r.value ? (k(), $("div", q, [
+          h(Q, { variant: "body1" }, {
+            default: m(() => [
+              z(M(u(D)), 1)
+            ]),
+            _: 1
+          })
+        ])) : P("", !0)
+      ]),
+      _: 1
+    }, 8, ["selected", "display-value", "multi", "options", "placeholder", "option-name-key", "custom-number-of-displayed-options", "loading", "comparing-key", "is-open"]));
+  }
+});
+export {
+  se as default
+};

package/components/dropdown/v4/DropdownV4.vue.d.ts

@@ -35,7 +35,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     onSearch?: (option: any, term: string) => boolean;
     noResultsText?: string;
     searchAutoFocus?: boolean;
-    onClear?: () => void;
+    onClearSearch?: () => void;
     displayValue: (option: unknown) => string;
     optionNameKey?: string;
     optionIconKey?: string;
@@ -43,6 +43,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     optionIconType?: "fill" | "bold" | "regular" | "branded" | "ad-unit" | "ab-test" | "ad-networks" | "ad-networks/flat" | "content-rate";
     optionEndIconKey?: string;
     optionEndIconType?: "fill" | "bold" | "regular" | "branded" | "ad-unit" | "ab-test" | "ad-networks" | "ad-networks/flat" | "content-rate";
+    optionsEndTextIconKey?: string;
     optionFlagKey?: string;
     valueToCopy?: string;
     disabledOptionKey?: string;
@@ -57,6 +58,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     statusType?: "default" | "disabled" | "success" | "warning" | "error" | "archive";
     disableVirtualScroll?: boolean;
     overrideOptionCountCalculation?: (option: unknown) => number;
+    withConditions?: boolean;
 }>, {
     multi: boolean;
     inlineSearchPlaceholder: string;
@@ -76,7 +78,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     placeholder: string;
     size: string;
     onSearch: any;
-    onClear: () => true;
+    onClearSearch: () => true;
     theme: string;
     container: string;
     flip: boolean;
@@ -99,6 +101,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     optionIconType: any;
     optionEndIconKey: string;
     optionEndIconType: any;
+    optionsEndTextIconKey: any;
     optionFlagKey: any;
     valueToCopy: any;
     disabledOptionKey: string;
@@ -112,6 +115,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     statusType: any;
     disableVirtualScroll: boolean;
     overrideOptionCountCalculation: any;
+    withConditions: boolean;
 }>, {
     selectItem: (option: any, index?: number) => void;
     scrollTo: (index: number) => void;
@@ -161,7 +165,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     onSearch?: (option: any, term: string) => boolean;
     noResultsText?: string;
     searchAutoFocus?: boolean;
-    onClear?: () => void;
+    onClearSearch?: () => void;
     displayValue: (option: unknown) => string;
     optionNameKey?: string;
     optionIconKey?: string;
@@ -169,6 +173,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     optionIconType?: "fill" | "bold" | "regular" | "branded" | "ad-unit" | "ab-test" | "ad-networks" | "ad-networks/flat" | "content-rate";
     optionEndIconKey?: string;
     optionEndIconType?: "fill" | "bold" | "regular" | "branded" | "ad-unit" | "ab-test" | "ad-networks" | "ad-networks/flat" | "content-rate";
+    optionsEndTextIconKey?: string;
     optionFlagKey?: string;
     valueToCopy?: string;
     disabledOptionKey?: string;
@@ -183,6 +188,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     statusType?: "default" | "disabled" | "success" | "warning" | "error" | "archive";
     disableVirtualScroll?: boolean;
     overrideOptionCountCalculation?: (option: unknown) => number;
+    withConditions?: boolean;
 }>, {
     multi: boolean;
     inlineSearchPlaceholder: string;
@@ -202,7 +208,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     placeholder: string;
     size: string;
     onSearch: any;
-    onClear: () => true;
+    onClearSearch: () => true;
     theme: string;
     container: string;
     flip: boolean;
@@ -225,6 +231,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     optionIconType: any;
     optionEndIconKey: string;
     optionEndIconType: any;
+    optionsEndTextIconKey: any;
     optionFlagKey: any;
     valueToCopy: any;
     disabledOptionKey: string;
@@ -238,6 +245,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     statusType: any;
     disableVirtualScroll: boolean;
     overrideOptionCountCalculation: any;
+    withConditions: boolean;
 }>>> & {
     onCopyToClipboard?: () => any;
     onClear?: () => any;
@@ -262,7 +270,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     skidding: number;
     modelValue: any;
     selected: any;
-    onClear: () => void;
+    valueToCopy: string;
     placeholder: string;
     multi: boolean;
     showSelectAll: boolean;
@@ -283,14 +291,15 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     onSearch: (option: any, term: string) => boolean;
     noResultsText: string;
     searchAutoFocus: boolean;
+    onClearSearch: () => void;
     optionNameKey: string;
     optionIconKey: string;
     optionImageKey: string;
     optionIconType: "fill" | "bold" | "regular" | "branded" | "ad-unit" | "ab-test" | "ad-networks" | "ad-networks/flat" | "content-rate";
     optionEndIconKey: string;
     optionEndIconType: "fill" | "bold" | "regular" | "branded" | "ad-unit" | "ab-test" | "ad-networks" | "ad-networks/flat" | "content-rate";
+    optionsEndTextIconKey: string;
     optionFlagKey: string;
-    valueToCopy: string;
     disabledOptionKey: string;
     optionTwoLinesVariant: "horizontal" | "vertical";
     optionTwoLinesKey: string;
@@ -302,6 +311,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     statusType: "default" | "disabled" | "success" | "warning" | "error" | "archive";
     disableVirtualScroll: boolean;
     overrideOptionCountCalculation: (option: unknown) => number;
+    withConditions: boolean;
 }>, {
     label?(_: {}): any;
     "dropdown-trigger"?(_: {
@@ -329,6 +339,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
             optionIconType: "fill" | "bold" | "regular" | "branded" | "ad-unit" | "ab-test" | "ad-networks" | "ad-networks/flat" | "content-rate";
             optionAndIconKey: string;
             optionEndIconType: "fill" | "bold" | "regular" | "branded" | "ad-unit" | "ab-test" | "ad-networks" | "ad-networks/flat" | "content-rate";
+            optionsEndTextIconKey: string;
             optionFlagKey: string;
             feedbackVariant: "success" | "warning" | "error";
             valueToCopy: string;
@@ -340,10 +351,13 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
             onClick: () => void;
         };
     }): any;
+    "dropdown-conditions"?(_: {}): any;
     "inline-search"?(_: {}): any;
     "input-list"?(_: {
         open: true;
     }): any;
+    "custom-list-area"?(_: {}): any;
+    "select-all"?(_: {}): any;
     "group-option"?(_: {}): any;
     default?(_: {
         option: unknown;

package/components/dropdown/v4/DropdownV4.vue.js

@@ -1,8 +1,8 @@
 import o from "./DropdownV4.vue2.js";
-/* empty css                 *//* empty css                 */import _ from "../../../_virtual/_plugin-vue_export-helper.js";
-// import "../../../DropdownV4.vue_vue_type_style_index_0_scoped_991a7aad_lang.css"; //*');
+/* empty css                 *//* empty css                 */import e from "../../../_virtual/_plugin-vue_export-helper.js";
+// import "../../../DropdownV4.vue_vue_type_style_index_0_scoped_b1bde483_lang.css"; //*');
 // import "../../../DropdownV4.vue_vue_type_style_index_1_lang.css";  //');
-const a = /* @__PURE__ */ _(o, [["__scopeId", "data-v-991a7aad"]]);
+const r = /* @__PURE__ */ e(o, [["__scopeId", "data-v-b1bde483"]]);
 export {
-  a as default
+  r as default
 };