@ironsource/shared-ui 1.4.2-rc.6 → 1.4.2-test.1

package/components/snackbar/Snackbar.vue.d.ts

@@ -1,70 +1,137 @@
 import { VNode } from 'vue';
-declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    customClass: string;
-    dangerouslyUseHTMLString: boolean;
-    duration?: number;
-    icon: string;
-    id: string;
-    message: string | VNode;
-    offset: number;
-    onClick: () => void;
-    onClose: () => void;
-    type?: 'success' | 'error' | 'info';
-    position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
-    showClose?: boolean;
-    title?: string;
-    zIndex?: number;
-}>, {
-    type: any;
-    zIndex: number;
-    duration: number;
-    showClose: boolean;
-    title: string;
-    position: string;
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "destroy"[], "destroy", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    customClass: string;
-    dangerouslyUseHTMLString: boolean;
-    duration?: number;
-    icon: string;
-    id: string;
-    message: string | VNode;
-    offset: number;
-    onClick: () => void;
-    onClose: () => void;
-    type?: 'success' | 'error' | 'info';
-    position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
-    showClose?: boolean;
-    title?: string;
-    zIndex?: number;
-}>, {
-    type: any;
-    zIndex: number;
-    duration: number;
-    showClose: boolean;
-    title: string;
-    position: string;
-}>>> & {
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
+    type: {
+        type: import("vue").PropType<"error" | "info" | "success">;
+        default: any;
+    };
+    title: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    onClick: {
+        type: import("vue").PropType<() => void>;
+        required: true;
+    };
+    id: {
+        type: import("vue").PropType<string>;
+        required: true;
+    };
+    offset: {
+        type: import("vue").PropType<number>;
+        required: true;
+    };
+    icon: {
+        type: import("vue").PropType<string>;
+        required: true;
+    };
+    position: {
+        type: import("vue").PropType<"bottom-right" | "bottom-left" | "top-right" | "top-left">;
+        default: string;
+    };
+    zIndex: {
+        type: import("vue").PropType<number>;
+        default: number;
+    };
+    onClose: {
+        type: import("vue").PropType<() => void>;
+        required: true;
+    };
+    customClass: {
+        type: import("vue").PropType<string>;
+        required: true;
+    };
+    dangerouslyUseHTMLString: {
+        type: import("vue").PropType<boolean>;
+        required: true;
+    };
+    duration: {
+        type: import("vue").PropType<number>;
+        default: number;
+    };
+    message: {
+        type: import("vue").PropType<string | VNode<import("vue").RendererNode, import("vue").RendererElement, {
+            [key: string]: any;
+        }>>;
+        required: true;
+    };
+    showClose: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "destroy"[], "destroy", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    type: {
+        type: import("vue").PropType<"error" | "info" | "success">;
+        default: any;
+    };
+    title: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    onClick: {
+        type: import("vue").PropType<() => void>;
+        required: true;
+    };
+    id: {
+        type: import("vue").PropType<string>;
+        required: true;
+    };
+    offset: {
+        type: import("vue").PropType<number>;
+        required: true;
+    };
+    icon: {
+        type: import("vue").PropType<string>;
+        required: true;
+    };
+    position: {
+        type: import("vue").PropType<"bottom-right" | "bottom-left" | "top-right" | "top-left">;
+        default: string;
+    };
+    zIndex: {
+        type: import("vue").PropType<number>;
+        default: number;
+    };
+    onClose: {
+        type: import("vue").PropType<() => void>;
+        required: true;
+    };
+    customClass: {
+        type: import("vue").PropType<string>;
+        required: true;
+    };
+    dangerouslyUseHTMLString: {
+        type: import("vue").PropType<boolean>;
+        required: true;
+    };
+    duration: {
+        type: import("vue").PropType<number>;
+        default: number;
+    };
+    message: {
+        type: import("vue").PropType<string | VNode<import("vue").RendererNode, import("vue").RendererElement, {
+            [key: string]: any;
+        }>>;
+        required: true;
+    };
+    showClose: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+}>> & {
     onDestroy?: (...args: any[]) => any;
 }, {
+    type: "error" | "info" | "success";
     title: string;
-    type: 'success' | 'error' | 'info';
-    position: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
+    position: "bottom-right" | "bottom-left" | "top-right" | "top-left";
     zIndex: number;
     duration: number;
     showClose: boolean;
+}>, {
+    default?(_: {}): any;
 }>;
 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_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
     };
 };
-type __VLS_WithDefaults<P, D> = {
-    [K in keyof Pick<P, keyof P>]: K extends keyof D ? P[K] & {
-        default: D[K];
-    } : P[K];
-};

package/components/snackbar/Snackbar.vue.js

@@ -1,181 +1,6 @@
-import { defineComponent, ref, computed, onMounted, openBlock, createBlock, Transition, withCtx, withDirectives, createElementVNode, normalizeClass, unref, normalizeStyle, createElementBlock, createVNode, resolveDynamicComponent, createCommentVNode, toDisplayString, renderSlot, createTextVNode, vShow, withModifiers } from 'vue';
-import { useEventListener, useTimeoutFn } from '@vueuse/core';
-import Icon from '../icon/Icon.vue.js';
-import Close from '../icon/icons/Close.vue.js';
-import Check from '../icon/icons/Check.vue.js';
-import IconButton from '../button/IconButton.vue.js';
-import Text from '../typography/Text.vue.js';
-/* empty css                                                          */import _export_sfc from '../../_virtual/plugin-vue_export-helper.vue.js';
-
-import "../../Snackbar.vue_vue_type_style_index_0_scoped_true_lang.css";
-const _hoisted_1 = ["id"];
-const _hoisted_2 = { class: "container" };
-const _hoisted_3 = { class: "texts" };
-const _hoisted_4 = ["innerHTML"];
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  __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: true },
-    title: { default: "" },
-    zIndex: { default: 0 }
-  },
-  emits: ["destroy"],
-  setup(__props) {
-    const props = __props;
-    const TypeComponentsMap = {
-      success: Check,
-      error: Close
-    };
-    const visible = ref(false);
-    let timer = void 0;
-    const typeClass = computed(() => {
-      const type = props.type;
-      return type && TypeComponentsMap[props.type] ? type : "";
-    });
-    const iconComponent = computed(() => {
-      return TypeComponentsMap[props.type] || props.icon || "";
-    });
-    const horizontalClass = computed(
-      () => props.position.endsWith("right") ? "right" : "left"
-    );
-    const verticalProperty = computed(
-      () => props.position.startsWith("top") ? "top" : "bottom"
-    );
-    const positionStyle = computed(() => {
-      return {
-        [verticalProperty.value]: `${props.offset}px`,
-        zIndex: props.zIndex
-      };
-    });
-    function startTimer() {
-      if (props.duration > 0) {
-        ({ stop: timer } = useTimeoutFn(() => {
-          if (visible.value)
-            close();
-        }, props.duration));
-      }
-    }
-    function clearTimer() {
-      timer?.();
-    }
-    function close() {
-      visible.value = false;
-    }
-    function onKeydown({ code }) {
-      if (code === "Delete" || code === "Backspace") {
-        clearTimer();
-      } else if (code === "Escape") {
-        if (visible.value) {
-          close();
-        }
-      } else {
-        startTimer();
-      }
-    }
-    onMounted(() => {
-      startTimer();
-      visible.value = true;
-    });
-    useEventListener(document, "keydown", onKeydown);
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(Transition, {
-        name: "snackbar",
-        onBeforeLeave: __props.onClose,
-        onAfterLeave: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("destroy"))
-      }, {
-        default: withCtx(() => [
-          withDirectives(createElementVNode("div", {
-            id: __props.id,
-            class: normalizeClass(["snackbar", [__props.customClass, unref(horizontalClass)]]),
-            style: normalizeStyle(unref(positionStyle)),
-            role: "alert",
-            onMouseenter: clearTimer,
-            onMouseleave: startTimer,
-            onClick: _cache[0] || (_cache[0] = (...args) => __props.onClick && __props.onClick(...args))
-          }, [
-            unref(iconComponent) ? (openBlock(), createElementBlock("div", {
-              key: 0,
-              class: normalizeClass(["start-icon-container", [unref(typeClass)]])
-            }, [
-              createVNode(unref(Icon), {
-                "font-size": unref(typeClass) ? "sm" : "lg"
-              }, {
-                default: withCtx(() => [
-                  (openBlock(), createBlock(resolveDynamicComponent(unref(iconComponent))))
-                ]),
-                _: 1
-              }, 8, ["font-size"])
-            ], 2)) : createCommentVNode("", true),
-            createElementVNode("div", _hoisted_2, [
-              createElementVNode("div", _hoisted_3, [
-                __props.title ? (openBlock(), createBlock(Text, {
-                  key: 0,
-                  size: "md",
-                  strong: "",
-                  class: "title",
-                  textContent: toDisplayString(__props.title)
-                }, null, 8, ["textContent"])) : createCommentVNode("", true),
-                withDirectives(createElementVNode("div", {
-                  class: "message",
-                  style: normalizeStyle(!!__props.title ? void 0 : { margin: 0 })
-                }, [
-                  renderSlot(_ctx.$slots, "default", {}, () => [
-                    !__props.dangerouslyUseHTMLString ? (openBlock(), createBlock(Text, {
-                      key: 0,
-                      size: "sm"
-                    }, {
-                      default: withCtx(() => [
-                        createTextVNode(toDisplayString(__props.message), 1)
-                      ]),
-                      _: 1
-                    })) : (openBlock(), createElementBlock("div", {
-                      key: 1,
-                      innerHTML: __props.message
-                    }, null, 8, _hoisted_4))
-                  ], true)
-                ], 4), [
-                  [vShow, __props.message]
-                ])
-              ]),
-              __props.showClose ? (openBlock(), createBlock(IconButton, {
-                key: 0,
-                theme: "third",
-                size: "sm",
-                class: "snackbar-close-button",
-                variant: "colorized",
-                onClick: withModifiers(close, ["stop"])
-              }, {
-                default: withCtx(() => [
-                  createVNode(unref(Icon), null, {
-                    default: withCtx(() => [
-                      createVNode(Close)
-                    ]),
-                    _: 1
-                  })
-                ]),
-                _: 1
-              }, 8, ["onClick"])) : createCommentVNode("", true)
-            ])
-          ], 46, _hoisted_1), [
-            [vShow, visible.value]
-          ])
-        ]),
-        _: 3
-      }, 8, ["onBeforeLeave"]);
-    };
-  }
-});
-var SnackbarConstructor = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-764ab56b"]]);
-
-export { SnackbarConstructor as default };
+import o from "./Snackbar.vue2.js";
+/* empty css               */import r from "../../_virtual/_plugin-vue_export-helper.js";
+const d = /* @__PURE__ */ r(o, [["__scopeId", "data-v-e5d8edd0"]]);
+export {
+  d as default
+};

package/components/snackbar/Snackbar.vue2.js

@@ -0,0 +1,149 @@
+import { defineComponent as N, ref as V, computed as i, onMounted as $, openBlock as s, createBlock as a, Transition as U, withCtx as r, withDirectives as z, createElementVNode as c, normalizeClass as T, unref as n, normalizeStyle as x, createElementBlock as B, createVNode as f, resolveDynamicComponent as W, createCommentVNode as y, toDisplayString as M, renderSlot as A, createTextVNode as F, vShow as w, withModifiers as K } from "vue";
+import { useEventListener as P, useTimeoutFn as j } from "@vueuse/core";
+import L from "../icon/Icon.vue.js";
+import S from "../icon/icons/Close.vue.js";
+import q from "../icon/icons/Check.vue.js";
+import G from "../button/IconButton.vue.js";
+import b from "../typography/Text.vue.js";
+const J = ["id"], O = { class: "container" }, Q = { class: "texts" }, R = ["innerHTML"], ne = /* @__PURE__ */ N({
+  __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(e) {
+    const t = e, v = {
+      success: q,
+      error: S
+    }, l = V(!1);
+    let C;
+    const k = i(() => {
+      const o = t.type;
+      return o && v[t.type] ? o : "";
+    }), p = i(() => v[t.type] || t.icon || ""), I = i(
+      () => t.position.endsWith("right") ? "right" : "left"
+    ), D = i(
+      () => t.position.startsWith("top") ? "top" : "bottom"
+    ), E = i(() => ({
+      [D.value]: `${t.offset}px`,
+      zIndex: t.zIndex
+    }));
+    function d() {
+      t.duration > 0 && ({ stop: C } = j(() => {
+        l.value && m();
+      }, t.duration));
+    }
+    function g() {
+      C?.();
+    }
+    function m() {
+      l.value = !1;
+    }
+    function H({ code: o }) {
+      o === "Delete" || o === "Backspace" ? g() : o === "Escape" ? l.value && m() : d();
+    }
+    return $(() => {
+      d(), l.value = !0;
+    }), P(document, "keydown", H), (o, u) => (s(), a(U, {
+      name: "snackbar",
+      onBeforeLeave: e.onClose,
+      onAfterLeave: u[1] || (u[1] = (h) => o.$emit("destroy"))
+    }, {
+      default: r(() => [
+        z(c("div", {
+          id: e.id,
+          class: T(["snackbar", [e.customClass, n(I)]]),
+          style: x(n(E)),
+          role: "alert",
+          onMouseenter: g,
+          onMouseleave: d,
+          onClick: u[0] || (u[0] = //@ts-ignore
+          (...h) => e.onClick && e.onClick(...h))
+        }, [
+          n(p) ? (s(), B("div", {
+            key: 0,
+            class: T(["start-icon-container", [n(k)]])
+          }, [
+            f(n(L), {
+              "font-size": n(k) ? "sm" : "lg"
+            }, {
+              default: r(() => [
+                (s(), a(W(n(p))))
+              ]),
+              _: 1
+            }, 8, ["font-size"])
+          ], 2)) : y("", !0),
+          c("div", O, [
+            c("div", Q, [
+              e.title ? (s(), a(b, {
+                key: 0,
+                size: "md",
+                strong: "",
+                class: "title",
+                textContent: M(e.title)
+              }, null, 8, ["textContent"])) : y("", !0),
+              z(c("div", {
+                class: "message",
+                style: x(e.title ? void 0 : { margin: 0 })
+              }, [
+                A(o.$slots, "default", {}, () => [
+                  e.dangerouslyUseHTMLString ? (s(), B("div", {
+                    key: 1,
+                    innerHTML: e.message
+                  }, null, 8, R)) : (s(), a(b, {
+                    key: 0,
+                    size: "sm"
+                  }, {
+                    default: r(() => [
+                      F(M(e.message), 1)
+                    ]),
+                    _: 1
+                  }))
+                ], !0)
+              ], 4), [
+                [w, e.message]
+              ])
+            ]),
+            e.showClose ? (s(), a(G, {
+              key: 0,
+              theme: "third",
+              size: "sm",
+              class: "snackbar-close-button",
+              variant: "colorized",
+              onClick: K(m, ["stop"])
+            }, {
+              default: r(() => [
+                f(n(L), null, {
+                  default: r(() => [
+                    f(S)
+                  ]),
+                  _: 1
+                })
+              ]),
+              _: 1
+            }, 8, ["onClick"])) : y("", !0)
+          ])
+        ], 46, J), [
+          [w, l.value]
+        ])
+      ]),
+      _: 3
+    }, 8, ["onBeforeLeave"]));
+  }
+});
+export {
+  ne as default
+};

package/components/snackbar/index.js

@@ -0,0 +1,6 @@
+import o from "./notify.js";
+const a = o;
+export {
+  a as Snackbar,
+  a as default
+};

package/components/snackbar/notify.js

@@ -0,0 +1,84 @@
+import { isVNode as x, createVNode as y, render as v } from "vue";
+import b from "./Snackbar.vue.js";
+import { snackbarTypes as I } from "./snackbar.types.js";
+const p = {
+  "top-left": [],
+  "top-right": [],
+  "bottom-left": [],
+  "bottom-right": []
+}, g = 16;
+let C = 1;
+const N = 2e3, a = function(e = {}, t = null) {
+  (typeof e == "string" || x(e)) && (e = { message: e });
+  const o = e.position || "top-right";
+  let n = e.zIndex || N, s = p[o].reduce(
+    (m, { vm: h }) => m + (h.el?.offsetHeight || 0) + g,
+    e.offset || 0
+  );
+  s += g;
+  const i = () => n++, d = `notification_${C++}`, u = e.onClose, l = {
+    ...e,
+    zIndex: i(),
+    offset: s,
+    id: d,
+    onClose: () => {
+      A(d, o, u);
+    }
+  }, c = document.body, f = document.createElement("div"), r = y(
+    b,
+    l,
+    x(l.message) ? {
+      default: () => l.message
+    } : null
+  );
+  return r.appContext = t ?? a._context, r.props.onDestroy = () => {
+    v(null, f);
+  }, v(r, f), p[o].push({ vm: r }), c.appendChild(f?.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 A(e, t, o) {
+  const n = p[t], s = n.findIndex(
+    ({ vm: c }) => c.component?.props.id === e
+  );
+  if (s === -1)
+    return;
+  const { vm: i } = n[s];
+  if (!i)
+    return;
+  o?.(i);
+  const d = i.el?.offsetHeight, u = t.split("-")[0];
+  n.splice(s, 1);
+  const l = n.length;
+  for (let c = s; c < l; c++) {
+    const { el: f, component: r } = n[c].vm;
+    r.props.offset = Number.parseInt(f.style[u], 10) - d - g;
+  }
+}
+I.forEach((e) => {
+  a[e] = (t = {}) => ((typeof t == "string" || x(t)) && (t = {
+    message: t
+  }), a({
+    ...t,
+    type: e
+  }));
+});
+function E() {
+  for (const e of Object.values(p))
+    e.forEach(({ vm: t }) => {
+      const o = t.component?.proxy;
+      o && (o.visible = !1);
+    });
+}
+a.closeAll = E;
+a._context = null;
+export {
+  A as close,
+  E as closeAll,
+  a as default
+};

package/components/snackbar/snackbar.types.js

@@ -0,0 +1,7 @@
+const s = {
+  destroy: () => !0
+}, r = ["success", "info", "error"];
+export {
+  s as snackbarEmits,
+  r as snackbarTypes
+};