@ironsource/shared-ui 2.1.3-rc.1 → 2.1.3-rc.10

package/components/shared/FieldLabel.vue2.js

@@ -1,13 +1,17 @@
- import "../../FieldLabel.vue_vue_type_style_index_0_scoped_526af548_lang.css"; import { defineComponent as c, openBlock as r, createElementBlock as u, mergeProps as o, unref as e, createVNode as n, withCtx as d, createTextVNode as s, toDisplayString as p, createBlock as i, createCommentVNode as m } from "vue";
-import T from "../icon/v3/Icon.vue.js";
-import b from "../tooltip/v4/TooltipV4.vue.js";
-import f from "../typography/v4/Typography.vue.js";
+ import "../../FieldLabel.vue_vue_type_style_index_0_scoped_5c2a70ad_lang.css"; import { defineComponent as p, openBlock as o, createElementBlock as m, Fragment as T, createElementVNode as b, mergeProps as d, unref as e, createVNode as r, withCtx as i, createTextVNode as n, toDisplayString as f, createBlock as u, createCommentVNode as s } from "vue";
+import h from "../icon/v3/Icon.vue.js";
+import y from "../tooltip/v4/TooltipV4.vue.js";
+import c from "../typography/v4/Typography.vue.js";
 import { FieldLabelTestIdModifiers as a } from "../../testids/index.js";
-import { useTestIdAttrs as x } from "../../utils/testIds.js";
-const H = /* @__PURE__ */ c({
+import { useTestIdAttrs as v } from "../../utils/testIds.js";
+const x = {
+  key: 0,
+  class: "description"
+}, L = /* @__PURE__ */ p({
   __name: "FieldLabel",
   props: {
     label: { default: "" },
+    description: { default: "" },
     mandatory: { type: Boolean, default: !1 },
     disabled: { type: Boolean, default: !1 },
     hoverHelpText: { default: "" },
@@ -15,47 +19,60 @@ const H = /* @__PURE__ */ c({
     testId: { default: "" }
   },
   setup(t) {
-    const l = x(t.testId, a);
-    return (y, v) => (r(), u("div", o({
-      class: ["field-label", { "field-label--disabled": t.disabled }]
-    }, e(l)[e(a).CONTAINER]), [
-      n(e(f), o({
-        class: "label",
-        variant: "inputLabel"
-      }, e(l)[e(a).TEXT]), {
-        default: d(() => [
-          s(p(t.label), 1)
-        ]),
-        _: 1
-      }, 16),
-      t.mandatory ? (r(), i(e(f), o({
-        key: 0,
-        variant: "h3",
-        class: "mandatory"
-      }, e(l)[e(a).MANDATORY]), {
-        default: d(() => [
-          s("*")
-        ]),
-        _: 1
-      }, 16)) : m("", !0),
-      t.hoverHelpText ? (r(), i(e(b), o({
-        key: 1,
-        triggers: ["hover"],
-        text: t.hoverHelpText,
-        placement: t.hoverHelpTextPlacement
-      }, e(l)[e(a).TOOLTIP], { "test-id": t.testId }), {
-        default: d(() => [
-          n(e(T), {
-            class: "info-icon",
-            name: "question",
-            "font-size": "sm"
-          })
-        ]),
-        _: 1
-      }, 16, ["text", "placement", "test-id"])) : m("", !0)
-    ], 16));
+    const l = v(t.testId, a);
+    return (N, g) => (o(), m(T, null, [
+      b("div", d({
+        class: ["field-label", {
+          "field-label--disabled": t.disabled,
+          "field-label--with-description": !!t.description
+        }]
+      }, e(l)[e(a).CONTAINER]), [
+        r(e(c), d({
+          class: "label",
+          variant: "inputLabel"
+        }, e(l)[e(a).TEXT]), {
+          default: i(() => [
+            n(f(t.label), 1)
+          ]),
+          _: 1
+        }, 16),
+        t.mandatory ? (o(), u(e(c), d({
+          key: 0,
+          variant: "h3",
+          class: "mandatory"
+        }, e(l)[e(a).MANDATORY]), {
+          default: i(() => [
+            n("*")
+          ]),
+          _: 1
+        }, 16)) : s("", !0),
+        t.hoverHelpText ? (o(), u(e(y), d({
+          key: 1,
+          triggers: ["hover"],
+          text: t.hoverHelpText,
+          placement: t.hoverHelpTextPlacement
+        }, e(l)[e(a).TOOLTIP], { "test-id": t.testId }), {
+          default: i(() => [
+            r(e(h), {
+              class: "info-icon",
+              name: "question",
+              "font-size": "sm"
+            })
+          ]),
+          _: 1
+        }, 16, ["text", "placement", "test-id"])) : s("", !0)
+      ], 16),
+      t.description ? (o(), m("div", x, [
+        r(e(c), { variant: "body2" }, {
+          default: i(() => [
+            n(f(t.description), 1)
+          ]),
+          _: 1
+        })
+      ])) : s("", !0)
+    ], 64));
   }
 });
 export {
-  H as default
+  L as default
 };

package/components/shared/FieldMaxLength.vue.d.ts

@@ -0,0 +1,34 @@
+declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    currentLength: number;
+    maxLength?: number;
+}>, {
+    currentLength: number;
+    maxLength: number;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    currentLength: number;
+    maxLength?: number;
+}>, {
+    currentLength: number;
+    maxLength: number;
+}>>>, {
+    currentLength: number;
+    maxLength: number;
+}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/components/shared/FieldMaxLength.vue.js

@@ -0,0 +1,7 @@
+import e from "./FieldMaxLength.vue2.js";
+/* empty css                     */import o from "../../_virtual/_plugin-vue_export-helper.js";
+// import "../../FieldMaxLength.vue_vue_type_style_index_0_scoped_f3c4001a_lang.css"; //*');
+const a = /* @__PURE__ */ o(e, [["__scopeId", "data-v-f3c4001a"]]);
+export {
+  a as default
+};

package/components/shared/FieldMaxLength.vue2.js

@@ -0,0 +1,24 @@
+ import "../../FieldMaxLength.vue_vue_type_style_index_0_scoped_f3c4001a_lang.css"; import { defineComponent as n, openBlock as o, createElementBlock as c, createVNode as r, unref as d, withCtx as p, createTextVNode as t, toDisplayString as a, pushScopeId as i, popScopeId as s, createElementVNode as h } from "vue";
+import l from "../typography/v4/Typography.vue.js";
+const m = (e) => (i("data-v-f3c4001a"), e = e(), s(), e), _ = { class: "max-length" }, u = /* @__PURE__ */ m(() => /* @__PURE__ */ h("span", { class: "max-length__divider" }, "/", -1)), v = /* @__PURE__ */ n({
+  __name: "FieldMaxLength",
+  props: {
+    currentLength: { default: 0 },
+    maxLength: { default: 100 }
+  },
+  setup(e) {
+    return (f, g) => (o(), c("div", _, [
+      r(d(l), { variant: "caption" }, {
+        default: p(() => [
+          t(a(e.currentLength) + " ", 1),
+          u,
+          t(" " + a(e.maxLength), 1)
+        ]),
+        _: 1
+      })
+    ]));
+  }
+});
+export {
+  v as default
+};

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

@@ -1,3 +1,4 @@
+import Skeleton from './SkeletonV4.vue';
 declare const SkeletonTypes: () => ({
     new (...args: any[]): {
         $: import("vue").ComponentInternalInstance;
@@ -90,5 +91,4 @@ declare const SkeletonTypes: () => ({
         default?(_: {}): any;
     };
 }))[];
-export { default as Skeleton } from './SkeletonV4.vue';
-export { SkeletonTypes };
+export { SkeletonTypes, Skeleton };

package/components/snackbar/v4/SnackbarV4.vue.d.ts

@@ -16,10 +16,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     title?: string;
     zIndex?: number;
     actionButtons: (Partial<{
+        variant: "text" | "contained" | "outlined";
         disabled: boolean;
         size: "small" | "medium" | "large" | "extraLarge";
         color: "default" | "primary" | "danger" | "info" | "success" | "warning";
-        variant: "text" | "contained" | "outlined";
         content: string;
         loading: boolean;
         testId: string;
@@ -28,6 +28,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
         startIconType: "fill" | "bold" | "regular" | "branded" | "ad-unit" | "ab-test";
         endIconType: "fill" | "bold" | "regular" | "branded" | "ad-unit" | "ab-test";
     }> & Omit<Readonly<import("vue").ExtractPropTypes<{
+        variant: {
+            type: import("vue").PropType<"text" | "contained" | "outlined">;
+            default: string;
+        };
         disabled: {
             type: import("vue").PropType<boolean>;
             default: boolean;
@@ -40,10 +44,6 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
             type: import("vue").PropType<"default" | "primary" | "danger" | "info" | "success" | "warning">;
             default: string;
         };
-        variant: {
-            type: import("vue").PropType<"text" | "contained" | "outlined">;
-            default: string;
-        };
         content: {
             type: import("vue").PropType<string>;
             default: string;
@@ -72,7 +72,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
             type: import("vue").PropType<"fill" | "bold" | "regular" | "branded" | "ad-unit" | "ab-test">;
             default: string;
         };
-    }>> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "disabled" | "size" | "color" | "variant" | "content" | "loading" | "testId" | "startIconName" | "endIconName" | "startIconType" | "endIconType">)[];
+    }>> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "variant" | "disabled" | "size" | "color" | "content" | "loading" | "testId" | "startIconName" | "endIconName" | "startIconType" | "endIconType">)[];
     testId: string;
 }>, {
     type: string;
@@ -101,10 +101,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     title?: string;
     zIndex?: number;
     actionButtons: (Partial<{
+        variant: "text" | "contained" | "outlined";
         disabled: boolean;
         size: "small" | "medium" | "large" | "extraLarge";
         color: "default" | "primary" | "danger" | "info" | "success" | "warning";
-        variant: "text" | "contained" | "outlined";
         content: string;
         loading: boolean;
         testId: string;
@@ -113,6 +113,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
         startIconType: "fill" | "bold" | "regular" | "branded" | "ad-unit" | "ab-test";
         endIconType: "fill" | "bold" | "regular" | "branded" | "ad-unit" | "ab-test";
     }> & Omit<Readonly<import("vue").ExtractPropTypes<{
+        variant: {
+            type: import("vue").PropType<"text" | "contained" | "outlined">;
+            default: string;
+        };
         disabled: {
             type: import("vue").PropType<boolean>;
             default: boolean;
@@ -125,10 +129,6 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
             type: import("vue").PropType<"default" | "primary" | "danger" | "info" | "success" | "warning">;
             default: string;
         };
-        variant: {
-            type: import("vue").PropType<"text" | "contained" | "outlined">;
-            default: string;
-        };
         content: {
             type: import("vue").PropType<string>;
             default: string;
@@ -157,7 +157,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
             type: import("vue").PropType<"fill" | "bold" | "regular" | "branded" | "ad-unit" | "ab-test">;
             default: string;
         };
-    }>> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "disabled" | "size" | "color" | "variant" | "content" | "loading" | "testId" | "startIconName" | "endIconName" | "startIconType" | "endIconType">)[];
+    }>> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "variant" | "disabled" | "size" | "color" | "content" | "loading" | "testId" | "startIconName" | "endIconName" | "startIconType" | "endIconType">)[];
     testId: string;
 }>, {
     type: string;

package/components/table/common/Table.common.d.ts

@@ -32,4 +32,5 @@ export declare const tableCommon: (props: any, emit: any) => {
     isRowExpanded: (rowIndex: number) => boolean;
     cssRowHeight: import("vue").ComputedRef<string>;
     cssExpandGridCol: import("vue").ComputedRef<string>;
+    activeMenuRow: import("vue").Ref<number>;
 };

package/components/table/common/Table.common.js

@@ -1,114 +1,118 @@
-import { useSlots as z, ref as a, provide as G, computed as s, onMounted as K, nextTick as N } from "vue";
-import { useVirtualList as V, useInfiniteScroll as j } from "@vueuse/core";
-import { TableContext as q } from "./TableContext.js";
-const F = 46, J = 46, Z = (o, u) => {
-  const v = z(), c = a([]);
-  G(q, {
-    onClose({ rowIndex: t, cellIndex: e, value: n } = {}) {
-      n && (c.value = [...c.value, t], u("saveRow", {
+import { useSlots as G, ref as c, provide as K, computed as l, onMounted as N, nextTick as V } from "vue";
+import { useVirtualList as j, useInfiniteScroll as q } from "@vueuse/core";
+import { TableContext as F } from "./TableContext.js";
+const J = 46, Q = 46, p = (e, a) => {
+  const m = G(), u = c([]);
+  K(F, {
+    onClose({ rowIndex: t, cellIndex: o, value: n } = {}) {
+      n && (u.value = [...u.value, t], a("saveRow", {
         rowIndex: t,
-        cellIndex: e,
+        cellIndex: o,
         value: n,
         confirm: () => {
-          c.value = c.value.filter(
+          u.value = u.value.filter(
             (i) => i !== t
           );
         }
       }));
+    },
+    setActiveMenuRow(t) {
+      C.value = t;
     }
   });
-  const x = s(() => !!o.selection), T = s(() => {
-    const t = (x.value ? `${J}px ` : "") + (g.value ? `${F}px ` : "");
-    return o.columns.reduce((e, n) => {
+  const x = l(() => !!e.selection), T = l(() => {
+    const t = (x.value ? `${Q}px ` : "") + (g.value ? `${J}px ` : "");
+    return e.columns.reduce((o, n) => {
       const i = n.width ? `${n.width}px` : `${n.colSpan || 1}fr`;
-      return `${e} ${i}`;
+      return `${o} ${i}`;
     }, t);
-  }), g = s(() => !!v.expanded), R = a(null), y = s(() => Array(o.loadingRowCount).fill(
-    Array(o.columns.length).fill("")
-  )), H = s(() => o.isLoading ? [...o.rows, ...y.value] : o.rows), { list: C, containerProps: l, wrapperProps: $ } = V(H, {
-    itemHeight: g.value ? (t) => w[t] ?? o.rowHeight : o.rowHeight
-  }), b = a(null), h = a(0), k = s(() => !!v.search), B = (t) => {
-    l.onScroll(), h.value = t.target.scrollLeft + t.target.getBoundingClientRect().width, u("onScroll", t.target.scrollTop);
+  }), g = l(() => !!m.expanded), y = c(null), C = c(null), H = l(() => Array(e.loadingRowCount).fill(
+    Array(e.columns.length).fill("")
+  )), $ = l(() => e.isLoading ? [...e.rows, ...H.value] : e.rows), { list: R, containerProps: s, wrapperProps: b } = j($, {
+    itemHeight: g.value ? (t) => w[t] ?? e.rowHeight : e.rowHeight
+  }), k = c(null), h = c(0), B = l(() => !!m.search), I = (t) => {
+    s.onScroll(), h.value = t.target.scrollLeft + t.target.getBoundingClientRect().width, a("onScroll", t.target.scrollTop);
   };
-  K(() => {
-    h.value = l.ref.value?.getBoundingClientRect().width, o.defaultScrollPosition && setTimeout(() => {
-      l.ref.value?.scrollTo({
-        top: o.defaultScrollPosition,
+  N(() => {
+    h.value = s.ref.value?.getBoundingClientRect().width, e.defaultScrollPosition && setTimeout(() => {
+      s.ref.value?.scrollTo({
+        top: e.defaultScrollPosition,
         behavior: "smooth"
       });
     }, 300);
   });
-  const I = s(() => {
-    const [t] = C.value;
+  const O = l(() => {
+    const [t] = R.value;
     return t && t.index > 0;
-  }), O = s(() => l.style), P = s(() => o.columns.reduce((t, e) => (e.isSticky && (t[e.id] = A(e)), t), {}));
-  j(
-    l.ref,
+  }), P = l(() => s.style), A = l(() => e.columns.reduce((t, o) => (o.isSticky && (t[o.id] = M(o)), t), {}));
+  q(
+    s.ref,
     () => {
-      o.isInfiniteScroll && u("loadMore");
+      e.isInfiniteScroll && a("loadMore");
     },
-    { distance: o.infiniteScrollThreshold }
+    { distance: e.infiniteScrollThreshold }
   );
   function E() {
-    l.ref.value?.scrollTo({
+    s.ref.value?.scrollTo({
       top: 0,
       behavior: "smooth"
     });
   }
   function L(t) {
-    if (!o.sort)
+    if (!e.sort)
       return;
-    const e = o.sort.sortBy === t.id;
+    const o = e.sort.sortBy === t.id;
     if (!(t.isSortable || t.isSortable === void 0))
       return;
-    let i = o.sort.sortOrder, f = o.sort.sortBy;
-    e ? i = o.sort.sortOrder === "asc" ? "desc" : "asc" : f = t.id, u("update:sort", { sortBy: f, sortOrder: i });
+    let i = e.sort.sortOrder, f = e.sort.sortBy;
+    o ? i = e.sort.sortOrder === "asc" ? "desc" : "asc" : f = t.id, a("update:sort", { sortBy: f, sortOrder: i });
   }
-  function A(t) {
-    const { isSticky: e, width: n } = t;
-    if (!e || !n)
+  function M(t) {
+    const { isSticky: o, width: n } = t;
+    if (!o || !n)
       return null;
-    const i = o.columns.findIndex((r) => r.id === t.id), f = o.columns.reduce((r, S, m) => m < i ? r + S.width : r, 0), X = o.columns.reduce((r, S, m) => m > i ? r + S.width : r, 0);
+    const i = e.columns.findIndex((r) => r.id === t.id), f = e.columns.reduce((r, v, S) => S < i ? r + v.width : r, 0), z = e.columns.reduce((r, v, S) => S > i ? r + v.width : r, 0);
     return {
-      ...t.isStickyRight ? { right: `${X}px` } : { left: `${f}px` },
+      ...t.isStickyRight ? { right: `${z}px` } : { left: `${f}px` },
       zIndex: 1
     };
   }
-  const d = a([]), w = {}, _ = (t) => d.value.includes(t), D = async (t, e) => {
+  const d = c([]), w = {}, _ = (t) => d.value.includes(t), D = async (t, o) => {
     const n = d.value.indexOf(t);
     if (n === -1) {
       d.value.push(t);
-      const i = e.target.closest("tr");
-      await N(), i && (w[t] = i.offsetHeight);
+      const i = o.target.closest("tr");
+      await V(), i && (w[t] = i.offsetHeight);
     } else
       d.value.splice(n, 1), delete w[t];
-  }, M = s(() => `${o.rowHeight}px`), W = s(
-    () => `1 / span ${o.columns.length + 1}`
+  }, W = l(() => `${e.rowHeight}px`), X = l(
+    () => `1 / span ${e.columns.length + 1}`
   );
   return {
-    list: C,
-    containerProps: l,
-    wrapperProps: $,
-    activeRow: R,
+    list: R,
+    containerProps: s,
+    wrapperProps: b,
+    activeRow: y,
     gridColumnTemplate: T,
-    floatingActionRef: b,
+    floatingActionRef: k,
     scrollToTop: E,
     toggleSortOrder: L,
-    columnsStickyPositions: P,
-    hasSearchSlot: k,
-    showBackToTopButton: I,
-    containerStyle: O,
-    onScroll: B,
-    savingRows: c,
+    columnsStickyPositions: A,
+    hasSearchSlot: B,
+    showBackToTopButton: O,
+    containerStyle: P,
+    onScroll: I,
+    savingRows: u,
     floatingActionPosition: h,
     hasExpandSlot: g,
     hasCheckboxes: x,
     toggleExpandRow: D,
     isRowExpanded: _,
-    cssRowHeight: M,
-    cssExpandGridCol: W
+    cssRowHeight: W,
+    cssExpandGridCol: X,
+    activeMenuRow: C
   };
 };
 export {
-  Z as tableCommon
+  p as tableCommon
 };

package/components/table/common/TableContext.d.ts

@@ -6,6 +6,7 @@ export interface TableContextProps {
         value?: unknown;
         error?: string | boolean;
     }): void;
+    setActiveMenuRow?(rowIndex: number | null): void;
 }
 export declare const TableContext: InjectionKey<TableContextProps>;
 export declare function useTableContext(component: string): TableContextProps;

package/components/table/v4/DataGrid.vue.js

@@ -1,7 +1,7 @@
 import o from "./DataGrid.vue2.js";
-/* empty css               */import _ from "../../../_virtual/_plugin-vue_export-helper.js";
-// import "../../../DataGrid.vue_vue_type_style_index_0_scoped_d5635f1b_lang.css"; //*');
-const a = /* @__PURE__ */ _(o, [["__scopeId", "data-v-d5635f1b"]]);
+/* empty css               */import e from "../../../_virtual/_plugin-vue_export-helper.js";
+// import "../../../DataGrid.vue_vue_type_style_index_0_scoped_4baf9e57_lang.css"; //*');
+const s = /* @__PURE__ */ e(o, [["__scopeId", "data-v-4baf9e57"]]);
 export {
-  a as default
+  s as default
 };