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

package/components/autocomplete/index.d.ts

@@ -11,6 +11,7 @@ declare const AutocompleteTypes: () => ({
             testId: string;
             hoverHelpText: string;
             hoverHelpTextPlacement: "auto" | "left" | "right" | "bottom" | "top" | "auto-start" | "auto-end" | "top-start" | "top-end" | "right-start" | "right-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end";
+            maxLength: number;
             modelValue: string | number;
             placeholder: string;
             labelDirection: "top" | "inside";
@@ -58,6 +59,10 @@ declare const AutocompleteTypes: () => ({
                 type: import("vue").PropType<"auto" | "left" | "right" | "bottom" | "top" | "auto-start" | "auto-end" | "top-start" | "top-end" | "right-start" | "right-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end">;
                 default: string;
             };
+            maxLength: {
+                type: import("vue").PropType<number>;
+                default: any;
+            };
             modelValue: {
                 type: import("vue").PropType<string | number>;
                 default: string;
@@ -108,7 +113,7 @@ declare const AutocompleteTypes: () => ({
             };
         }>> & {
             "onUpdate:modelValue"?: (value: string | number) => any;
-        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "label" | "disabled" | "size" | "mandatory" | "testId" | "hoverHelpText" | "hoverHelpTextPlacement" | "modelValue" | "placeholder" | "labelDirection" | "inlineError" | "inlineErrorText" | "feedbackText" | "feedbackVariant" | "showFeedbackTextIcon" | "onSearch" | "optionNameKey" | "optionsListWidth">;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "label" | "disabled" | "size" | "mandatory" | "testId" | "hoverHelpText" | "hoverHelpTextPlacement" | "maxLength" | "modelValue" | "placeholder" | "labelDirection" | "inlineError" | "inlineErrorText" | "feedbackText" | "feedbackVariant" | "showFeedbackTextIcon" | "onSearch" | "optionNameKey" | "optionsListWidth">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -158,6 +163,10 @@ declare const AutocompleteTypes: () => ({
                 type: import("vue").PropType<"auto" | "left" | "right" | "bottom" | "top" | "auto-start" | "auto-end" | "top-start" | "top-end" | "right-start" | "right-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end">;
                 default: string;
             };
+            maxLength: {
+                type: import("vue").PropType<number>;
+                default: any;
+            };
             modelValue: {
                 type: import("vue").PropType<string | number>;
                 default: string;
@@ -218,6 +227,7 @@ declare const AutocompleteTypes: () => ({
             testId: string;
             hoverHelpText: string;
             hoverHelpTextPlacement: "auto" | "left" | "right" | "bottom" | "top" | "auto-start" | "auto-end" | "top-start" | "top-end" | "right-start" | "right-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end";
+            maxLength: number;
             modelValue: string | number;
             placeholder: string;
             labelDirection: "top" | "inside";
@@ -285,6 +295,10 @@ declare const AutocompleteTypes: () => ({
             type: import("vue").PropType<"auto" | "left" | "right" | "bottom" | "top" | "auto-start" | "auto-end" | "top-start" | "top-end" | "right-start" | "right-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end">;
             default: string;
         };
+        maxLength: {
+            type: import("vue").PropType<number>;
+            default: any;
+        };
         modelValue: {
             type: import("vue").PropType<string | number>;
             default: string;
@@ -375,6 +389,10 @@ declare const AutocompleteTypes: () => ({
         type: import("vue").PropType<"auto" | "left" | "right" | "bottom" | "top" | "auto-start" | "auto-end" | "top-start" | "top-end" | "right-start" | "right-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end">;
         default: string;
     };
+    maxLength: {
+        type: import("vue").PropType<number>;
+        default: any;
+    };
     modelValue: {
         type: import("vue").PropType<string | number>;
         default: string;
@@ -435,6 +453,7 @@ declare const AutocompleteTypes: () => ({
     testId: string;
     hoverHelpText: string;
     hoverHelpTextPlacement: "auto" | "left" | "right" | "bottom" | "top" | "auto-start" | "auto-end" | "top-start" | "top-end" | "right-start" | "right-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end";
+    maxLength: number;
     modelValue: string | number;
     placeholder: string;
     labelDirection: "top" | "inside";

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

@@ -1,7 +1,7 @@
 import o from "./DialogV4.vue2.js";
 /* empty css               */import _ from "../../../_virtual/_plugin-vue_export-helper.js";
-// import "../../../DialogV4.vue_vue_type_style_index_0_scoped_c3004ba3_lang.css"; //*');
-const a = /* @__PURE__ */ _(o, [["__scopeId", "data-v-c3004ba3"]]);
+// import "../../../DialogV4.vue_vue_type_style_index_0_scoped_09c488cf_lang.css"; //*');
+const t = /* @__PURE__ */ _(o, [["__scopeId", "data-v-09c488cf"]]);
 export {
-  a as default
+  t as default
 };

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

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

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

@@ -1,12 +1,12 @@
 import { useToggle as me } from "../../../composables/useToggle.js";
-import { ref as n, computed as r, watch as m, useSlots as Pe, toRaw as A, nextTick as D, provide as Te, onMounted as we } from "vue";
+import { ref as n, computed as r, watch as P, useSlots as Pe, toRaw as A, nextTick as D, provide as Te, onMounted as we } from "vue";
 import { isObjectInArray as W } from "../../../utils/array.js";
 import { objectsEqual as xe } from "../../../utils/object.js";
 import { useClamp as Ie, useVirtualList as De, onClickOutside as Y } from "@vueuse/core";
-import { Mode as O, Type as _, DropdownContext as Ne } from "./DropdownContext.js";
+import { Mode as m, Type as _, DropdownContext as Ne } from "./DropdownContext.js";
 import { pxToRem as Re } from "../../../utils/style.js";
 import { useEditableContext as Ee } from "../../table-cells/common/EditableContext.js";
-const Ue = (l, P, b) => {
+const Ue = (l, O, b) => {
   const Z = (e, t) => l.multi ? W(e, t) : A(e) === t;
   let k;
   ((e) => {
@@ -19,20 +19,20 @@ const Ue = (l, P, b) => {
       return N?.value?.value ?? a.value;
     },
     set(e) {
-      N.onChange?.(e), N.onClose?.(), P("update:selected", e);
+      N.onChange?.(e), N.onClose?.(), O("update:selected", e);
     }
   });
-  m(
+  P(
     () => l.selected,
     () => {
       a.value = l.selected, v.value = l.selected;
     }
   );
-  const p = Pe(), T = n(null), g = n(null), V = n(null), R = n(null), H = n(null), w = n(null), F = n(), B = n(null), L = n(null), U = n(null), ee = 8, le = r(() => w.value ? w.value.getBoundingClientRect().height + ee + l.distance : 0), c = n([]), x = n(-1), I = n(""), v = n([]), q = () => w.value?.focus(), [d, te, ae] = me({
+  const p = Pe(), T = n(null), g = n(null), V = n(null), R = n(null), H = n(null), w = n(null), F = n(), B = n(null), L = n(null), U = n(null), ee = 8, le = r(() => w.value ? w.value.getBoundingClientRect().height + ee + l.distance : 0), c = n([]), x = n(-1), I = n(""), v = n(l.selected || []), q = () => w.value?.focus(), [d, te, ae] = me({
     disabled: l.disabled,
     initialValue: l.defaultOpen
   });
-  m(
+  P(
     () => l.disabled,
     (e) => {
       e !== void 0 && ae(e);
@@ -45,7 +45,7 @@ const Ue = (l, P, b) => {
       return l.isOpen;
     },
     set(e) {
-      P("update:isOpen", e);
+      O("update:isOpen", e);
     }
   }), ne = r(() => s.value.length - 1), o = Ie(0, 0, ne), K = r(() => u.value ? l.displayValue(u.value) : ""), ie = (e) => {
     if (!e.value.length && !l.multiOptionsPlaceholderPrefix && !l.multiOptionsPlaceholderSuffix)
@@ -74,7 +74,7 @@ const Ue = (l, P, b) => {
   }), s = r(() => {
     const e = Array.isArray(v.value) && l.multi && b.VERSION === 4 ? se.value : l.options;
     return l.onSearch ? e.filter((t) => l.onSearch(t, I.value)) : e;
-  }), ce = r(() => c.value[0]?.hasSubtitle), X = r(() => i.mode === O.Multi), j = r(
+  }), ce = r(() => c.value[0]?.hasSubtitle), X = r(() => i.mode === m.Multi), j = r(
     () => ce.value ? b.MULTILINE_LIST_HEIGHT : b.LIST_HEIGHT
   ), {
     list: z,
@@ -85,14 +85,14 @@ const Ue = (l, P, b) => {
     itemHeight: j.value,
     overscan: 2
   });
-  m(
+  P(
     () => l.isOpen,
     (e) => {
       G(e);
     }
-  ), m([x], async () => {
+  ), P([x], async () => {
     await D();
-  }), m(
+  }), P(
     [d, o, x],
     async ([e], [t]) => {
       d.value && (await D(), x.value !== -1 && e !== t && setTimeout(() => {
@@ -104,10 +104,10 @@ const Ue = (l, P, b) => {
   );
   const h = (e, t = !1) => {
     l.disabled || (G(e), D(() => {
-      d.value && P("opened"), d.value || P("closed"), T.value && t && T.value.focus();
+      d.value && O("opened"), d.value || O("closed"), T.value && t && T.value.focus();
     }));
   };
-  m(d, (e) => {
+  P(d, (e) => {
     if (e) {
       X.value && Array.isArray(u.value) && (v.value = A(u.value).slice());
       return;
@@ -124,16 +124,16 @@ const Ue = (l, P, b) => {
         a.value = [];
         return;
       }
-      a.value = s.value;
+      a.value = s.value, O("selectAll");
     }
   }, fe = () => {
     de(), b.VERSION !== 4 && (u.value = a.value);
   }, ge = (e = !0) => {
-    a.value = [], e && (u.value = [], v.value = []);
+    a.value = [], e && (u.value = [], v.value = [], O("clear"));
   }, C = (e, t) => {
     if (e = A(e), c.value[t]?.disabled)
       return;
-    if (x.value = t, i.mode !== O.Multi) {
+    if (x.value = t, i.mode !== m.Multi) {
       l.keepOpen || h(!1), i.goToOption(
         0
         /* None */
@@ -162,7 +162,7 @@ const Ue = (l, P, b) => {
     listRef: T,
     clearable: l.clearable,
     type: p.input ? _.Search : _.Dropdown,
-    mode: l.multi ? O.Multi : O.Single,
+    mode: l.multi ? m.Multi : m.Single,
     query: I,
     selectedValue: K,
     toggle: h,
@@ -173,7 +173,7 @@ const Ue = (l, P, b) => {
     placeholder: l.placeholder,
     select: C,
     clearSelection: () => {
-      E(""), u.value = i.mode === O.Single ? null : [], v.value = i.mode === O.Single ? null : [], g.value && (g.value.value = "");
+      E(""), u.value = i.mode === m.Single ? null : [], v.value = i.mode === m.Single ? null : [], g.value && (g.value.value = "");
     },
     search: E,
     goToOption: async (e) => {
@@ -229,7 +229,7 @@ const Ue = (l, P, b) => {
     })), i.goToOption(0);
   });
   const Se = () => {
-    u.value = a.value, Array.isArray(u.value) && (v.value = A(u.value).slice()), P("apply", u.value), h(!1), ye();
+    u.value = a.value, Array.isArray(u.value) && (v.value = A(u.value).slice()), O("apply", u.value), h(!1), ye();
   }, Q = () => {
     X.value && Array.isArray(v.value) && (u.value = A(v.value).slice()), I.value = "", h(!1);
   }, be = (e) => {
@@ -281,7 +281,7 @@ const Ue = (l, P, b) => {
             h(!0);
             return;
           }
-          C(s.value[o.value], o.value), i.mode === O.Single && !l.keepOpen && h(!1), e.preventDefault();
+          C(s.value[o.value], o.value), i.mode === m.Single && !l.keepOpen && h(!1), e.preventDefault();
           break;
         }
       }

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

@@ -84,6 +84,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     closed: () => void;
     opened: () => void;
     apply: (value: unknown) => void;
+    selectAll: () => void;
+    clear: () => void;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     modelValue?: unknown;
     placeholder?: string;
@@ -161,7 +163,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     darkTheme: boolean;
     valueToCopy: string;
 }>>> & {
+    onClear?: () => any;
     onApply?: (value: unknown) => any;
+    onSelectAll?: () => any;
     "onUpdate:selected"?: (value: unknown) => any;
     "onUpdate:isOpen"?: (value: unknown) => any;
     onOpened?: () => any;

package/components/dropdown/v3/Dropdown.vue.js

@@ -1,8 +1,8 @@
 import o from "./Dropdown.vue2.js";
-/* empty css               *//* empty css               */import e from "../../../_virtual/_plugin-vue_export-helper.js";
-// import "../../../Dropdown.vue_vue_type_style_index_0_scoped_d4f8e790_lang.css"; //*');
+/* empty css               *//* empty css               */import _ from "../../../_virtual/_plugin-vue_export-helper.js";
+// import "../../../Dropdown.vue_vue_type_style_index_0_scoped_aaa8c4bb_lang.css"; //*');
 // import "../../../Dropdown.vue_vue_type_style_index_1_lang.css";  //');
-const r = /* @__PURE__ */ e(o, [["__scopeId", "data-v-d4f8e790"]]);
+const a = /* @__PURE__ */ _(o, [["__scopeId", "data-v-aaa8c4bb"]]);
 export {
-  r as default
+  a as default
 };