@ironsource/shared-ui 2.0.0-rc.2 → 2.0.0-rc.3

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

@@ -1,18 +1,16 @@
 import { VNode } from 'vue';
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     customClass: string;
     dangerouslyUseHTMLString: boolean;
     duration?: number;
     icon: string;
     id: string;
-    message: string | VNode<import("vue").RendererNode, import("vue").RendererElement, {
-        [key: string]: any;
-    }>;
+    message: string | VNode;
     offset: number;
     onClick: () => void;
     onClose: () => void;
-    type?: "error" | "info" | "success";
-    position?: "bottom-right" | "bottom-left" | "top-right" | "top-left";
+    type?: 'success' | 'error' | 'info';
+    position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
     showClose?: boolean;
     title?: string;
     zIndex?: number;
@@ -23,22 +21,18 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     showClose: boolean;
     title: string;
     position: string;
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    destroy: (...args: any[]) => void;
-}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+}>, {}, 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<import("vue").RendererNode, import("vue").RendererElement, {
-        [key: string]: any;
-    }>;
+    message: string | VNode;
     offset: number;
     onClick: () => void;
     onClose: () => void;
-    type?: "error" | "info" | "success";
-    position?: "bottom-right" | "bottom-left" | "top-right" | "top-left";
+    type?: 'success' | 'error' | 'info';
+    position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
     showClose?: boolean;
     title?: string;
     zIndex?: number;
@@ -52,14 +46,12 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
 }>>> & {
     onDestroy?: (...args: any[]) => any;
 }, {
-    type: "error" | "info" | "success";
+    type: 'success' | 'error' | 'info';
     title: string;
-    position: "bottom-right" | "bottom-left" | "top-right" | "top-left";
+    position: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
     zIndex: number;
     duration: number;
     showClose: boolean;
-}>, {
-    default?(_: {}): any;
 }>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
@@ -72,15 +64,7 @@ type __VLS_TypePropsToRuntimeProps<T> = {
     };
 };
 type __VLS_WithDefaults<P, D> = {
-    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? P[K] & {
         default: D[K];
-    }> : P[K];
-};
-type __VLS_Prettify<T> = {
-    [K in keyof T]: T[K];
-} & {};
-type __VLS_WithTemplateSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
+    } : P[K];
 };

package/components/snackbar/Snackbar.vue.js

@@ -0,0 +1,182 @@
+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/v3/Icon.vue.js';
+import Close from '../icon/v3/icons/Close.vue.js';
+import Check from '../icon/v3/icons/Check.vue.js';
+/* empty css                                                                     */import _export_sfc from '../../_virtual/plugin-vue_export-helper.vue.js';
+import Text from '../typography/Text.vue.js';
+/* empty css                                                                   */import IconButton from '../button/v3/IconButton.vue.js';
+/* empty css                                                                               */import 'floating-vue';
+/* empty css                                                      *//* empty css                                                                         *//* empty css                                                          */
+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(unref(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-0efe5a7a"]]);
+
+export { SnackbarConstructor as default };

package/components/snackbar/index.vue.js

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

package/components/snackbar/notify.vue.js

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

package/components/snackbar/snackbar.types.vue.js

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

package/components/switch/v3/Switch.vue.d.ts

@@ -1,17 +1,15 @@
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     options: string[];
     modelValue: string;
-    size?: "sm" | "lg";
+    size?: 'sm' | 'lg';
     testId?: string;
 }>, {
     size: string;
     testId: string;
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (...args: any[]) => void;
-}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     options: string[];
     modelValue: string;
-    size?: "sm" | "lg";
+    size?: 'sm' | 'lg';
     testId?: string;
 }>, {
     size: string;
@@ -19,13 +17,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
 }>>> & {
     "onUpdate:modelValue"?: (...args: any[]) => any;
 }, {
-    size: "sm" | "lg";
+    size: 'sm' | 'lg';
     testId: string;
-}>, {
-    default?(_: {
-        option: string;
-        selected: boolean;
-    }): any;
 }>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
@@ -38,15 +31,7 @@ type __VLS_TypePropsToRuntimeProps<T> = {
     };
 };
 type __VLS_WithDefaults<P, D> = {
-    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? P[K] & {
         default: D[K];
-    }> : P[K];
-};
-type __VLS_Prettify<T> = {
-    [K in keyof T]: T[K];
-} & {};
-type __VLS_WithTemplateSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
+    } : P[K];
 };

package/components/switch/v3/Switch.vue.js

@@ -0,0 +1,87 @@
+import { defineComponent, ref, computed, onMounted, openBlock, createElementBlock, normalizeClass, unref, createElementVNode, normalizeStyle, Fragment, renderList, renderSlot, createVNode, withCtx, createTextVNode, toDisplayString } from 'vue';
+import { useVModel } from '@vueuse/core';
+import Text from '../../typography/Text.vue.js';
+import { SwitchTestIdModifiers } from '../../../testids/index.vue.js';
+/* empty css                                                        */import _export_sfc from '../../../_virtual/plugin-vue_export-helper.vue.js';
+
+import "../../../Switch.vue_vue_type_style_index_0_scoped_true_lang.css";
+const _hoisted_1 = ["data-testid"];
+const _hoisted_2 = ["aria-label", "data-testid", "onClick"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "Switch",
+  props: {
+    options: null,
+    modelValue: null,
+    size: { default: "lg" },
+    testId: { default: "" }
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { emit }) {
+    const props = __props;
+    const box = ref(null);
+    const data = useVModel(props, "modelValue", emit);
+    const optionsRefs = ref([]);
+    const skipUnwrap = { optionsRefs };
+    const selected = ref();
+    const selectedPosition = computed(() => {
+      return {
+        left: optionsRefs.value[selected.value]?.offsetLeft,
+        width: optionsRefs.value[selected.value]?.offsetWidth
+      };
+    });
+    onMounted(() => {
+      selected.value = props.options.findIndex(
+        (option) => option === props.modelValue
+      );
+    });
+    const onClick = (option, index) => {
+      selected.value = index;
+      data.value = option;
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(["switch", { "switch--lg": __props.size === "lg", "switch--sm": __props.size === "sm" }]),
+        "data-testid": `${__props.testId}-${unref(SwitchTestIdModifiers).WRAPPER}`
+      }, [
+        createElementVNode("span", {
+          ref_key: "box",
+          ref: box,
+          class: normalizeClass(["box", { "box--lg": __props.size === "lg", "box--sm": __props.size === "sm" }]),
+          style: normalizeStyle({
+            transform: `translateX(${unref(selectedPosition)?.left}px)`,
+            width: unref(selectedPosition)?.width + "px"
+          })
+        }, null, 6),
+        (openBlock(true), createElementBlock(Fragment, null, renderList(__props.options, (option, index) => {
+          return openBlock(), createElementBlock("button", {
+            ref_for: true,
+            ref: skipUnwrap.optionsRefs,
+            key: index,
+            "aria-label": option,
+            class: normalizeClass([{ "option--selected": selected.value === index }, "option"]),
+            "data-testid": `${__props.testId}-${unref(SwitchTestIdModifiers).BUTTON}`,
+            onClick: ($event) => onClick(option, index)
+          }, [
+            renderSlot(_ctx.$slots, "default", {
+              option,
+              selected: selected.value === index
+            }, () => [
+              createVNode(Text, {
+                size: "caption",
+                "data-testid": `${__props.testId}-${unref(SwitchTestIdModifiers).TEXT}`
+              }, {
+                default: withCtx(() => [
+                  createTextVNode(toDisplayString(option), 1)
+                ]),
+                _: 2
+              }, 1032, ["data-testid"])
+            ], true)
+          ], 10, _hoisted_2);
+        }), 128))
+      ], 10, _hoisted_1);
+    };
+  }
+});
+var Switch = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-0266f48c"]]);
+
+export { Switch as default };