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

package/components/shared/FieldLabel.vue2.js

@@ -1,10 +1,10 @@
- import "../../FieldLabel.vue_vue_type_style_index_0_scoped_90f19704_lang.css"; import { defineComponent as m, openBlock as d, createElementBlock as f, normalizeClass as c, unref as t, createVNode as i, withCtx as l, createTextVNode as o, toDisplayString as u, createBlock as s, createCommentVNode as n } from "vue";
+ 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 "../tooltip/Tooltip.vue2.js";
-import r from "../typography/v4/Typography.vue.js";
+import b from "../tooltip/v4/TooltipV4.vue.js";
+/* empty css                            */import f from "../typography/v4/Typography.vue.js";
 import { FieldLabelTestIdModifiers as a } from "../../testids/index.js";
-import b from "../tooltip/Tooltip.vue.js";
-const h = ["data-testid"], B = /* @__PURE__ */ m({
+import { useTestIdAttrs as x } from "../../utils/testIds.js";
+const C = /* @__PURE__ */ c({
   __name: "FieldLabel",
   props: {
     label: { default: "" },
@@ -14,52 +14,48 @@ const h = ["data-testid"], B = /* @__PURE__ */ m({
     hoverHelpTextPlacement: { default: "top" },
     testId: { default: "" }
   },
-  setup(e) {
-    return (x, y) => (d(), f("div", {
-      class: c(["field-label", { "field-label--disabled": e.disabled }]),
-      "data-testid": `${e.testId}-${t(a).CONTAINER}`
-    }, [
-      i(t(r), {
+  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",
-        "data-testid": `${e.testId}-${t(a).TEXT}`
-      }, {
-        default: l(() => [
-          o(u(e.label), 1)
+        variant: "inputLabel"
+      }, e(l)[e(a).TEXT]), {
+        default: d(() => [
+          s(p(t.label), 1)
         ]),
         _: 1
-      }, 8, ["data-testid"]),
-      e.mandatory ? (d(), s(t(r), {
+      }, 16),
+      t.mandatory ? (r(), i(e(f), o({
         key: 0,
         variant: "h3",
-        class: "mandatory",
-        "data-testid": `${e.testId}-${t(a).MANDATORY}`
-      }, {
-        default: l(() => [
-          o("*")
+        class: "mandatory"
+      }, e(l)[e(a).MANDATORY]), {
+        default: d(() => [
+          s("*")
         ]),
         _: 1
-      }, 8, ["data-testid"])) : n("", !0),
-      e.hoverHelpText ? (d(), s(t(b), {
+      }, 16)) : m("", !0),
+      t.hoverHelpText ? (r(), i(e(b), o({
         key: 1,
         triggers: ["hover"],
-        text: e.hoverHelpText,
-        placement: e.hoverHelpTextPlacement,
-        "data-testid": `${e.testId}-${t(a).TOOLTIP}`,
-        "test-id": e.testId
-      }, {
-        default: l(() => [
-          i(t(T), {
+        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
-      }, 8, ["text", "placement", "data-testid", "test-id"])) : n("", !0)
-    ], 10, h));
+      }, 16, ["text", "placement", "test-id"])) : m("", !0)
+    ], 16));
   }
 });
 export {
-  B as default
+  C as default
 };

package/components/snackbar/common/notify.d.ts

@@ -0,0 +1,3 @@
+import type { Notify } from './snackbar.types';
+declare const createNotify: (constructorComponent: any) => Notify;
+export default createNotify;

package/components/snackbar/common/notify.js

@@ -0,0 +1,82 @@
+import { isVNode as x, createVNode as N, render as v } from "vue";
+import { snackbarTypes as C } from "./snackbar.types.js";
+const p = {
+  "top-left": [],
+  "top-right": [],
+  "bottom-left": [],
+  "bottom-right": []
+}, g = 16;
+let A = 1;
+const E = 2e3, H = (h) => {
+  const i = function(e = {}, t = null) {
+    (typeof e == "string" || x(e)) && (e = { message: e });
+    const o = e.position || "top-right";
+    let n = e.zIndex || E, s = p[o].reduce(
+      (m, { vm: b }) => m + (b.el?.offsetHeight || 0) + g,
+      e.offset || 0
+    );
+    s += g;
+    const l = () => n++, d = `notification_${A++}`, u = e.onClose, f = {
+      ...e,
+      zIndex: l(),
+      offset: s,
+      id: d,
+      onClose: () => {
+        y(d, o, u);
+      }
+    }, c = document.body, a = document.createElement("div"), r = N(
+      h,
+      f,
+      x(f.message) ? {
+        default: () => f.message
+      } : null
+    );
+    return r.appContext = t ?? i._context, r.props.onDestroy = () => {
+      v(null, a);
+    }, v(r, a), p[o].push({ vm: r }), c.appendChild(a?.firstElementChild), {
+      // instead of calling the onClose function directly, setting this value so that we can have the full lifecycle
+      // for out component, so that all closing steps will not be skipped.
+      close: () => {
+        const m = r.component?.proxy;
+        m && (m.visible = !1);
+      }
+    };
+  };
+  function y(e, t, o) {
+    const n = p[t], s = n.findIndex(
+      ({ vm: c }) => c.component?.props.id === e
+    );
+    if (s === -1)
+      return;
+    const { vm: l } = n[s];
+    if (!l)
+      return;
+    o?.(l);
+    const d = l.el?.offsetHeight, u = t.split("-")[0];
+    n.splice(s, 1);
+    const f = n.length;
+    for (let c = s; c < f; c++) {
+      const { el: a, component: r } = n[c].vm;
+      r.props.offset = Number.parseInt(a.style[u], 10) - d - g;
+    }
+  }
+  C.forEach((e) => {
+    i[e] = (t = {}) => ((typeof t == "string" || x(t)) && (t = {
+      message: t
+    }), i({
+      ...t,
+      type: e
+    }));
+  });
+  function I() {
+    for (const e of Object.values(p))
+      e.forEach(({ vm: t }) => {
+        const o = t.component?.proxy;
+        o && (o.visible = !1);
+      });
+  }
+  return i.closeAll = I, i._context = null, i;
+};
+export {
+  H as default
+};

package/components/snackbar/common/snackbar.common.d.ts

@@ -0,0 +1,11 @@
+import type { CSSProperties } from 'vue';
+export declare const snackbarCommon: (props: any) => {
+    visible: import("vue").Ref<boolean>;
+    horizontalClass: import("vue").ComputedRef<"right" | "left">;
+    positionStyle: import("vue").ComputedRef<CSSProperties>;
+    clearTimer: () => void;
+    startTimer: () => void;
+    iconComponent: import("vue").ComputedRef<any>;
+    typeClass: import("vue").ComputedRef<any>;
+    close: () => void;
+};

package/components/snackbar/common/snackbar.common.js

@@ -0,0 +1,51 @@
+import { ref as v, computed as n, onMounted as p } from "vue";
+import { useEventListener as C, useTimeoutFn as h } from "@vueuse/core";
+import k from "../../icon/v3/icons/Close.vue.js";
+import x from "../../icon/v3/icons/Check.vue.js";
+const w = (t) => {
+  const r = {
+    success: x,
+    error: k
+  }, o = v(!1);
+  let c;
+  const a = n(() => {
+    const e = t.type;
+    return e && r[t.type] ? e : "";
+  }), l = n(() => r[t.type] || t.icon || ""), f = n(
+    () => t.position.endsWith("right") ? "right" : "left"
+  ), m = n(
+    () => t.position.startsWith("top") ? "top" : "bottom"
+  ), y = n(() => ({
+    [m.value]: `${t.offset}px`,
+    zIndex: t.zIndex
+  }));
+  function i() {
+    t.duration > 0 && ({ stop: c } = h(() => {
+      o.value && s();
+    }, t.duration));
+  }
+  function u() {
+    c?.();
+  }
+  function s() {
+    o.value = !1;
+  }
+  function d({ code: e }) {
+    e === "Delete" || e === "Backspace" ? u() : e === "Escape" ? o.value && s() : i();
+  }
+  return p(() => {
+    i(), o.value = !0;
+  }), C(document, "keydown", d), {
+    visible: o,
+    horizontalClass: f,
+    positionStyle: y,
+    clearTimer: u,
+    startTimer: i,
+    iconComponent: l,
+    typeClass: a,
+    close: s
+  };
+};
+export {
+  w as snackbarCommon
+};

package/components/snackbar/v3/Snackbar.vue.js

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

package/components/snackbar/v3/Snackbar.vue2.js

@@ -0,0 +1,129 @@
+ import "../../../Snackbar.vue_vue_type_style_index_0_scoped_cec4f8e5_lang.css"; import { defineComponent as w, openBlock as n, createBlock as s, Transition as x, withCtx as i, withDirectives as k, createElementVNode as a, normalizeClass as y, unref as e, normalizeStyle as v, createElementBlock as g, createVNode as r, resolveDynamicComponent as H, createCommentVNode as m, renderSlot as N, createTextVNode as V, toDisplayString as p, vShow as z, withModifiers as D } from "vue";
+import T from "../../icon/v3/Icon.vue.js";
+import I from "../../icon/v3/icons/Close.vue.js";
+import "../../button/v3/Button.vue.js";
+import $ from "../../button/v3/IconButton.vue.js";
+import "../../button/v3/ScrollButton.vue.js";
+import B from "../../typography/Text.vue.js";
+import { snackbarCommon as E } from "../common/snackbar.common.js";
+const U = ["id"], A = { class: "container" }, j = { class: "texts" }, q = ["innerHTML"], W = /* @__PURE__ */ w({
+  __name: "Snackbar",
+  props: {
+    customClass: null,
+    dangerouslyUseHTMLString: { type: Boolean },
+    duration: { default: 3e3 },
+    icon: null,
+    id: null,
+    message: null,
+    offset: null,
+    onClick: null,
+    onClose: null,
+    type: { default: null },
+    position: { default: "top-right" },
+    showClose: { type: Boolean, default: !0 },
+    title: { default: "" },
+    zIndex: { default: 0 }
+  },
+  emits: ["destroy"],
+  setup(t) {
+    const S = t, {
+      visible: b,
+      horizontalClass: h,
+      positionStyle: L,
+      clearTimer: d,
+      startTimer: u,
+      iconComponent: c,
+      typeClass: f,
+      close: M
+    } = E(S);
+    return (C, o) => (n(), s(x, {
+      name: "snackbar",
+      onBeforeLeave: t.onClose,
+      onAfterLeave: o[3] || (o[3] = (l) => C.$emit("destroy"))
+    }, {
+      default: i(() => [
+        k(a("div", {
+          id: t.id,
+          class: y(["snackbar", [t.customClass, e(h)]]),
+          style: v(e(L)),
+          role: "alert",
+          onMouseenter: o[0] || (o[0] = //@ts-ignore
+          (...l) => e(d) && e(d)(...l)),
+          onMouseleave: o[1] || (o[1] = //@ts-ignore
+          (...l) => e(u) && e(u)(...l)),
+          onClick: o[2] || (o[2] = //@ts-ignore
+          (...l) => t.onClick && t.onClick(...l))
+        }, [
+          e(c) ? (n(), g("div", {
+            key: 0,
+            class: y(["start-icon-container", [e(f)]])
+          }, [
+            r(e(T), {
+              "font-size": e(f) ? "sm" : "lg"
+            }, {
+              default: i(() => [
+                (n(), s(H(e(c))))
+              ]),
+              _: 1
+            }, 8, ["font-size"])
+          ], 2)) : m("", !0),
+          a("div", A, [
+            a("div", j, [
+              t.title ? (n(), s(B, {
+                key: 0,
+                size: "md",
+                strong: "",
+                class: "title"
+              })) : m("", !0),
+              k(a("div", {
+                class: "message",
+                style: v(t.title ? void 0 : { margin: 0 })
+              }, [
+                N(C.$slots, "default", {}, () => [
+                  t.dangerouslyUseHTMLString ? (n(), g("div", {
+                    key: 1,
+                    innerHTML: t.message
+                  }, null, 8, q)) : (n(), s(B, {
+                    key: 0,
+                    size: "sm"
+                  }, {
+                    default: i(() => [
+                      V(p(t.message), 1)
+                    ]),
+                    _: 1
+                  }))
+                ], !0)
+              ], 4), [
+                [z, t.message]
+              ])
+            ]),
+            t.showClose ? (n(), s(e($), {
+              key: 0,
+              theme: "third",
+              size: "sm",
+              class: "snackbar-close-button",
+              variant: "colorized",
+              onClick: D(e(M), ["stop"])
+            }, {
+              default: i(() => [
+                r(e(T), null, {
+                  default: i(() => [
+                    r(I)
+                  ]),
+                  _: 1
+                })
+              ]),
+              _: 1
+            }, 8, ["onClick"])) : m("", !0)
+          ])
+        ], 46, U), [
+          [z, e(b)]
+        ])
+      ]),
+      _: 3
+    }, 8, ["onBeforeLeave"]));
+  }
+});
+export {
+  W as default
+};

package/components/snackbar/v3/index.d.ts

@@ -0,0 +1,3 @@
+export declare const Snackbar: import("../common/snackbar.types").Notify;
+export default Snackbar;
+export * from '../common/snackbar.types';

package/components/snackbar/v3/index.js

@@ -0,0 +1,10 @@
+import r from "./Snackbar.vue.js";
+import a from "../common/notify.js";
+import { snackbarEmits as m, snackbarTypes as n } from "../common/snackbar.types.js";
+const c = a(r);
+export {
+  c as Snackbar,
+  c as default,
+  m as snackbarEmits,
+  n as snackbarTypes
+};