@ironsource/shared-ui 2.0.0-rc.5 → 2.0.0-rc.6

package/components/dialog/v4/DialogV4.vue2.js

@@ -0,0 +1,119 @@
+ import "../../../DialogV4.vue_vue_type_style_index_0_scoped_c0c12287_lang.css"; import { defineComponent as g, openBlock as o, createBlock as d, Teleport as N, createVNode as E, Transition as A, withCtx as r, unref as e, createElementBlock as c, createElementVNode as f, mergeProps as n, renderSlot as B, createTextVNode as C, toDisplayString as k, createCommentVNode as l } from "vue";
+import { NOOP as I } from "@vue/shared";
+import p from "../../typography/v4/Typography.vue.js";
+import "../../button/v4/ButtonV4.vue.js";
+import w from "../../button/v4/IconButtonV4.vue.js";
+import { Reason as v } from "../common/Reason.js";
+import { dialogCommon as D } from "../common/Dialog.common.js";
+import { DialogTestIdModifiers as a } from "../../../testids/index.js";
+import { useTestIdAttrs as P } from "../../../utils/testIds.js";
+import { useMagicKeys as R, whenever as V } from "@vueuse/core";
+const $ = {
+  key: 0,
+  class: "container light-theme-v4"
+}, S = { class: "title" }, z = {
+  key: 1,
+  class: "footer"
+}, G = /* @__PURE__ */ g({
+  __name: "DialogV4",
+  props: {
+    modelValue: { type: Boolean },
+    content: { default: null },
+    title: { default: "" },
+    subtitle: { default: "" },
+    appendToBody: { type: Boolean, default: !0 },
+    size: { default: "small" },
+    showBackdrop: { type: Boolean, default: !0 },
+    closeDelay: { default: 0 },
+    openDelay: { default: 0 },
+    escapeToClose: { type: Boolean, default: !0 },
+    closeOnClickOutside: { type: Boolean, default: !0 },
+    beforeClose: { type: Function, default: null },
+    showCloseButton: { type: Boolean, default: !0 },
+    testId: { default: "" }
+  },
+  emits: ["update:modelValue", "open", "close"],
+  setup(t, { emit: b }) {
+    const m = t, { escape: h } = R(), s = P(m.testId, a), { visible: T, handleClose: y } = D(m, b);
+    return V(h, () => {
+      T.value && m.escapeToClose && y(v.Escape);
+    }), (i, u) => (o(), d(N, {
+      to: "body",
+      disabled: !t.appendToBody
+    }, [
+      E(A, null, {
+        default: r(() => [
+          e(T) ? (o(), c("div", $, [
+            f("div", n({
+              class: ["dialog", [`dialog--${t.size}`]]
+            }, e(s)[e(a).WRAPPER]), [
+              t.title || t.subtitle || t.showCloseButton ? (o(), c("header", n({
+                key: 0,
+                class: "header"
+              }, e(s)[e(a).HEADER]), [
+                f("div", S, [
+                  B(i.$slots, "header", {}, () => [
+                    t.title ? (o(), d(e(p), {
+                      key: 0,
+                      variant: "h3"
+                    }, {
+                      default: r(() => [
+                        C(k(t.title), 1)
+                      ]),
+                      _: 1
+                    })) : l("", !0),
+                    t.subtitle ? (o(), d(e(p), {
+                      key: 1,
+                      class: "subtitle",
+                      variant: "body1"
+                    }, {
+                      default: r(() => [
+                        C(k(t.subtitle), 1)
+                      ]),
+                      _: 1
+                    })) : l("", !0)
+                  ], !0)
+                ]),
+                t.showCloseButton ? (o(), d(e(w), n({
+                  key: 0,
+                  class: "close-button",
+                  "icon-name": "x"
+                }, e(s)[e(a).ACTION_CLOSE], {
+                  onClick: u[0] || (u[0] = (O) => e(y)(e(v).CloseButton))
+                }), null, 16)) : l("", !0)
+              ], 16)) : l("", !0),
+              f("div", n({ class: "content" }, e(s)[e(a).CONTENT]), [
+                B(i.$slots, "default", {}, () => [
+                  t.content ? (o(), d(e(p), {
+                    key: 0,
+                    variant: "body1"
+                  }, {
+                    default: r(() => [
+                      C(k(t.content), 1)
+                    ]),
+                    _: 1
+                  })) : l("", !0)
+                ], !0)
+              ], 16),
+              i.$slots.footer ? (o(), c("footer", z, [
+                f("div", n({ class: "action-buttons" }, e(s)[e(a).ACTION_BUTTONS_WRAPPER]), [
+                  B(i.$slots, "footer", {}, void 0, !0)
+                ], 16)
+              ])) : l("", !0)
+            ], 16),
+            t.showBackdrop ? (o(), c("div", n({
+              key: 0,
+              class: "dialog-backdrop"
+            }, e(s)[e(a).BACKDROP], {
+              onClick: u[1] || (u[1] = (O) => t.closeOnClickOutside ? e(y)(e(v).Backdrop) : e(I)())
+            }), null, 16)) : l("", !0)
+          ])) : l("", !0)
+        ]),
+        _: 3
+      })
+    ], 8, ["disabled"]));
+  }
+});
+export {
+  G as default
+};

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

@@ -0,0 +1,345 @@
+import Dialog from './DialogV4.vue';
+declare const DialogTypes: () => ({
+    new (...args: any[]): {
+        $: import("vue").ComponentInternalInstance;
+        $data: {};
+        $props: Partial<{
+            title: string;
+            size: "small" | "medium" | "extraSmall";
+            testId: string;
+            content: string;
+            subtitle: string;
+            appendToBody: boolean;
+            closeDelay: number;
+            openDelay: number;
+            escapeToClose: boolean;
+            showBackdrop: boolean;
+            closeOnClickOutside: boolean;
+            beforeClose: (show: () => void) => void;
+            showCloseButton: boolean;
+        }> & Omit<Readonly<import("vue").ExtractPropTypes<{
+            title: {
+                type: import("vue").PropType<string>;
+                default: string;
+            };
+            size: {
+                type: import("vue").PropType<"small" | "medium" | "extraSmall">;
+                default: string;
+            };
+            testId: {
+                type: import("vue").PropType<string>;
+                default: string;
+            };
+            content: {
+                type: import("vue").PropType<string>;
+                default: any;
+            };
+            subtitle: {
+                type: import("vue").PropType<string>;
+                default: string;
+            };
+            modelValue: {
+                type: import("vue").PropType<boolean>;
+                required: true;
+            };
+            appendToBody: {
+                type: import("vue").PropType<boolean>;
+                default: boolean;
+            };
+            closeDelay: {
+                type: import("vue").PropType<number>;
+                default: number;
+            };
+            openDelay: {
+                type: import("vue").PropType<number>;
+                default: number;
+            };
+            escapeToClose: {
+                type: import("vue").PropType<boolean>;
+                default: boolean;
+            };
+            showBackdrop: {
+                type: import("vue").PropType<boolean>;
+                default: boolean;
+            };
+            closeOnClickOutside: {
+                type: import("vue").PropType<boolean>;
+                default: boolean;
+            };
+            beforeClose: {
+                type: import("vue").PropType<(show: () => void) => void>;
+                default: any;
+            };
+            showCloseButton: {
+                type: import("vue").PropType<boolean>;
+                default: boolean;
+            };
+        }>> & {
+            onClose?: (reason: import("../v3").Reason) => any;
+            "onUpdate:modelValue"?: (value: boolean) => any;
+            onOpen?: () => any;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "title" | "size" | "testId" | "content" | "subtitle" | "appendToBody" | "closeDelay" | "openDelay" | "escapeToClose" | "showBackdrop" | "closeOnClickOutside" | "beforeClose" | "showCloseButton">;
+        $attrs: {
+            [x: string]: unknown;
+        };
+        $refs: {
+            [x: string]: unknown;
+        };
+        $slots: Readonly<{
+            [name: string]: import("vue").Slot;
+        }>;
+        $root: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}>;
+        $parent: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}>;
+        $emit: ((event: "close", reason: import("../v3").Reason) => void) & ((event: "update:modelValue", value: boolean) => void) & ((event: "open") => void);
+        $el: any;
+        $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
+            title: {
+                type: import("vue").PropType<string>;
+                default: string;
+            };
+            size: {
+                type: import("vue").PropType<"small" | "medium" | "extraSmall">;
+                default: string;
+            };
+            testId: {
+                type: import("vue").PropType<string>;
+                default: string;
+            };
+            content: {
+                type: import("vue").PropType<string>;
+                default: any;
+            };
+            subtitle: {
+                type: import("vue").PropType<string>;
+                default: string;
+            };
+            modelValue: {
+                type: import("vue").PropType<boolean>;
+                required: true;
+            };
+            appendToBody: {
+                type: import("vue").PropType<boolean>;
+                default: boolean;
+            };
+            closeDelay: {
+                type: import("vue").PropType<number>;
+                default: number;
+            };
+            openDelay: {
+                type: import("vue").PropType<number>;
+                default: number;
+            };
+            escapeToClose: {
+                type: import("vue").PropType<boolean>;
+                default: boolean;
+            };
+            showBackdrop: {
+                type: import("vue").PropType<boolean>;
+                default: boolean;
+            };
+            closeOnClickOutside: {
+                type: import("vue").PropType<boolean>;
+                default: boolean;
+            };
+            beforeClose: {
+                type: import("vue").PropType<(show: () => void) => void>;
+                default: any;
+            };
+            showCloseButton: {
+                type: import("vue").PropType<boolean>;
+                default: boolean;
+            };
+        }>> & {
+            onClose?: (reason: import("../v3").Reason) => any;
+            "onUpdate:modelValue"?: (value: boolean) => any;
+            onOpen?: () => any;
+        }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+            "update:modelValue": (value: boolean) => void;
+            open: () => void;
+            close: (reason: import("../v3").Reason) => void;
+        }, string, {
+            title: string;
+            size: "small" | "medium" | "extraSmall";
+            testId: string;
+            content: string;
+            subtitle: string;
+            appendToBody: boolean;
+            closeDelay: number;
+            openDelay: number;
+            escapeToClose: boolean;
+            showBackdrop: boolean;
+            closeOnClickOutside: boolean;
+            beforeClose: (show: () => void) => void;
+            showCloseButton: boolean;
+        }, {}, string> & {
+            beforeCreate?: (() => void) | (() => void)[];
+            created?: (() => void) | (() => void)[];
+            beforeMount?: (() => void) | (() => void)[];
+            mounted?: (() => void) | (() => void)[];
+            beforeUpdate?: (() => void) | (() => void)[];
+            updated?: (() => void) | (() => void)[];
+            activated?: (() => void) | (() => void)[];
+            deactivated?: (() => void) | (() => void)[];
+            beforeDestroy?: (() => void) | (() => void)[];
+            beforeUnmount?: (() => void) | (() => void)[];
+            destroyed?: (() => void) | (() => void)[];
+            unmounted?: (() => void) | (() => void)[];
+            renderTracked?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
+            renderTriggered?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
+            errorCaptured?: ((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}>, info: string) => boolean | void) | ((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}>, info: string) => boolean | void)[];
+        };
+        $forceUpdate: () => void;
+        $nextTick: typeof import("vue").nextTick;
+        $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (args_0: R, args_1: R) => any : (...args: any) => any, options?: import("vue").WatchOptions<boolean>): import("vue").WatchStopHandle;
+    } & Readonly<import("vue").ExtractPropTypes<{
+        title: {
+            type: import("vue").PropType<string>;
+            default: string;
+        };
+        size: {
+            type: import("vue").PropType<"small" | "medium" | "extraSmall">;
+            default: string;
+        };
+        testId: {
+            type: import("vue").PropType<string>;
+            default: string;
+        };
+        content: {
+            type: import("vue").PropType<string>;
+            default: any;
+        };
+        subtitle: {
+            type: import("vue").PropType<string>;
+            default: string;
+        };
+        modelValue: {
+            type: import("vue").PropType<boolean>;
+            required: true;
+        };
+        appendToBody: {
+            type: import("vue").PropType<boolean>;
+            default: boolean;
+        };
+        closeDelay: {
+            type: import("vue").PropType<number>;
+            default: number;
+        };
+        openDelay: {
+            type: import("vue").PropType<number>;
+            default: number;
+        };
+        escapeToClose: {
+            type: import("vue").PropType<boolean>;
+            default: boolean;
+        };
+        showBackdrop: {
+            type: import("vue").PropType<boolean>;
+            default: boolean;
+        };
+        closeOnClickOutside: {
+            type: import("vue").PropType<boolean>;
+            default: boolean;
+        };
+        beforeClose: {
+            type: import("vue").PropType<(show: () => void) => void>;
+            default: any;
+        };
+        showCloseButton: {
+            type: import("vue").PropType<boolean>;
+            default: boolean;
+        };
+    }>> & {
+        onClose?: (reason: import("../v3").Reason) => any;
+        "onUpdate:modelValue"?: (value: boolean) => any;
+        onOpen?: () => any;
+    } & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties & {};
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
+    title: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    size: {
+        type: import("vue").PropType<"small" | "medium" | "extraSmall">;
+        default: string;
+    };
+    testId: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    content: {
+        type: import("vue").PropType<string>;
+        default: any;
+    };
+    subtitle: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    modelValue: {
+        type: import("vue").PropType<boolean>;
+        required: true;
+    };
+    appendToBody: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    closeDelay: {
+        type: import("vue").PropType<number>;
+        default: number;
+    };
+    openDelay: {
+        type: import("vue").PropType<number>;
+        default: number;
+    };
+    escapeToClose: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    showBackdrop: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    closeOnClickOutside: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    beforeClose: {
+        type: import("vue").PropType<(show: () => void) => void>;
+        default: any;
+    };
+    showCloseButton: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+}>> & {
+    onClose?: (reason: import("../v3").Reason) => any;
+    "onUpdate:modelValue"?: (value: boolean) => any;
+    onOpen?: () => any;
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean) => void;
+    open: () => void;
+    close: (reason: import("../v3").Reason) => void;
+}, string, {
+    title: string;
+    size: "small" | "medium" | "extraSmall";
+    testId: string;
+    content: string;
+    subtitle: string;
+    appendToBody: boolean;
+    closeDelay: number;
+    openDelay: number;
+    escapeToClose: boolean;
+    showBackdrop: boolean;
+    closeOnClickOutside: boolean;
+    beforeClose: (show: () => void) => void;
+    showCloseButton: boolean;
+}, {}, string> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
+    $slots: {
+        header?(_: {}): any;
+        default?(_: {}): any;
+        footer?(_: {}): any;
+    };
+}))[];
+export { Dialog, DialogTypes };

package/components/dialog/{index.js → v4/index.js}

@@ -1,4 +1,4 @@
-import o from "./Dialog.vue.js";
+import o from "./DialogV4.vue.js";
 const p = () => [o];
 export {
   o as Dialog,

package/components/dropdown/common/Dropdown.common.js

@@ -1,5 +1,5 @@
 import { useToggle as Oe } from "../../../composables/useToggle.js";
-import { ref as u, computed as r, watch as b, useSlots as Ae, nextTick as D, toRaw as x, provide as Pe, onMounted as Se } from "vue";
+import { ref as n, computed as r, watch as b, useSlots as Ae, nextTick as D, toRaw as x, provide as Pe, onMounted as Se } from "vue";
 import { isObjectInArray as z } from "../../../utils/array.js";
 import { objectsEqual as Te } from "../../../utils/object.js";
 import { useClamp as we, useVirtualList as xe, onClickOutside as J } from "@vueuse/core";
@@ -11,9 +11,9 @@ const Ve = (l, O, A) => {
   ((e) => {
     e[e.None = 0] = "None", e[e.Next = 1] = "Next", e[e.Previous = -1] = "Previous", e[e.NextPage = 10] = "NextPage", e[e.PrevPage = -10] = "PrevPage";
   })(E || (E = {}));
-  const a = u(
+  const a = n(
     l.selected
-  ), n = r({
+  ), u = r({
     get() {
       return a.value;
     },
@@ -27,7 +27,7 @@ const Ve = (l, O, A) => {
       a.value = l.selected;
     }
   );
-  const W = Ae(), P = u(null), d = u(null), C = u(null), I = u(null), V = u(null), S = u(null), Y = u(), p = u(null), H = u(null), L = u(null), Z = 8, F = r(() => S.value ? S.value.getBoundingClientRect().height + Z + l.distance : 0), c = u([]), T = u(-1), w = u(""), M = u([]), U = () => S.value?.focus(), [v, ee, le] = Oe({
+  const W = Ae(), P = n(null), d = n(null), C = n(null), I = n(null), V = n(null), S = n(null), Y = n(), p = n(null), H = n(null), L = n(null), Z = 8, F = r(() => S.value ? S.value.getBoundingClientRect().height + Z + l.distance : 0), c = n([]), T = n(-1), w = n(""), M = n([]), U = () => S.value?.focus(), [v, ee, le] = Oe({
     disabled: l.disabled,
     initialValue: l.defaultOpen
   });
@@ -46,14 +46,14 @@ const Ve = (l, O, A) => {
     set(e) {
       O("update:isOpen", e);
     }
-  }), ae = r(() => s.value.length - 1), o = we(0, 0, ae), ue = r(() => n.value ? l.displayValue(n.value) : ""), ne = (e) => {
+  }), ae = r(() => s.value.length - 1), o = we(0, 0, ae), ue = r(() => u.value ? l.displayValue(u.value) : ""), ne = (e) => {
     if (!e.value.length && !l.multiOptionsPlaceholderPrefix && !l.multiOptionsPlaceholderSuffix)
       return l.placeholder;
     const t = !l.multiOptionsPlaceholderPrefix && !l.multiOptionsPlaceholderSuffix ? `${e.value.length} selected` : `${l.multiOptionsPlaceholderPrefix ?? ""}${e.value.length ?? "0"}${l.multiOptionsPlaceholderSuffix ?? ""}`;
     return e.value.length == 1 && l.displayValue ? l.displayValue(e.value[0]) : t;
   }, ie = r(() => {
     if (!l.multi)
-      return n.value ? l.displayValue(n.value) : l.placeholder;
+      return u.value ? l.displayValue(u.value) : l.placeholder;
     if (Array.isArray(a.value))
       return ne(a);
   }), q = r(() => {
@@ -97,13 +97,13 @@ const Ve = (l, O, A) => {
   };
   b(v, (e) => {
     if (e) {
-      G.value && Array.isArray(n.value) && (M.value = x(n.value).slice());
+      G.value && Array.isArray(u.value) && (M.value = x(u.value).slice());
       return;
     }
     U();
   });
   const ce = () => {
-    ve(), n.value = a.value;
+    ve(), u.value = a.value;
   }, ve = () => {
     if (q.value) {
       a.value = [];
@@ -117,7 +117,7 @@ const Ve = (l, O, A) => {
       a.value = s.value;
     }
   }, de = () => {
-    a.value = [];
+    a.value = [], u.value = [];
   }, _ = (e, t) => {
     if (e = x(e), c.value[t]?.disabled)
       return;
@@ -125,7 +125,7 @@ const Ve = (l, O, A) => {
       l.keepOpen || f(!1), i.goToOption(
         0
         /* None */
-      ), n.value = e, N(""), U(), i.type === k.Search && d.value && (d.value.value = l.displayValue(e));
+      ), u.value = e, N(""), U(), i.type === k.Search && d.value && (d.value.value = l.displayValue(e));
       return;
     }
     if (!Array.isArray(a.value))
@@ -144,7 +144,7 @@ const Ve = (l, O, A) => {
   }, fe = (e) => c.value[e]?.disabled, i = {
     activeIndex: o,
     options: c,
-    selectedOption: n,
+    selectedOption: u,
     labelRef: V,
     activeOption: I,
     listRef: P,
@@ -161,7 +161,7 @@ const Ve = (l, O, A) => {
     placeholder: l.placeholder,
     select: _,
     clearSelection: () => {
-      N(""), n.value = i.mode === m.Single ? null : [], d.value && (d.value.value = "");
+      N(""), u.value = i.mode === m.Single ? null : [], d.value && (d.value.value = "");
     },
     search: N,
     goToOption: async (e) => {
@@ -217,9 +217,9 @@ const Ve = (l, O, A) => {
     })), i.goToOption(0);
   });
   const he = () => {
-    n.value = a.value, O("apply", n.value), f(!1), ge();
+    u.value = a.value, O("apply", u.value), f(!1), ge();
   }, j = () => {
-    G.value && Array.isArray(M.value) && (n.value = x(M.value).slice()), w.value = "", f(!1);
+    G.value && Array.isArray(M.value) && (u.value = x(M.value).slice()), w.value = "", f(!1);
   }, ye = (e) => {
     if (!l.disableKeyboardEvents)
       switch (e.key) {
@@ -298,7 +298,7 @@ const Ve = (l, O, A) => {
     onSelectAll: ce,
     virtualOptions: $,
     isSelected: Q,
-    selectedOption: n,
+    selectedOption: u,
     onSelect: _,
     activeIndex: o,
     onCancel: j,

package/components/dropdown/v3/Dropdown.vue.d.ts

@@ -175,7 +175,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     placement: Placement;
     disabled: boolean;
     container: string;
+    popperClass: string;
     selected: any;
+    distance: number;
     mandatory: boolean;
     modelValue: any;
     placeholder: string;
@@ -185,11 +187,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     isOnTop: boolean;
     multi: boolean;
     inlineSearch: boolean;
-    popperClass: string;
     noResultsText: string;
     defaultOpen: boolean;
     showButtonOnOpen: boolean;
-    distance: number;
     skidding: number;
     clearable: boolean;
     onSearch: (option: any, term: string) => boolean;