@ironsource/shared-ui 1.4.0-rc.10

package/components/search/Search.vue.js

@@ -0,0 +1,91 @@
+import { defineComponent, ref, computed, openBlock, createElementBlock, normalizeClass, unref, createBlock, createCommentVNode, createElementVNode } from 'vue';
+import Icon from '../icon/Icon.vue.js';
+/* empty css                                                        */import _export_sfc from '../../_virtual/plugin-vue_export-helper.vue.js';
+
+import "../../Search.vue_vue_type_style_index_0_scoped_true_lang.css";
+const _hoisted_1 = ["value", "placeholder", "disabled"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "Search",
+  props: {
+    modelValue: null,
+    placeholder: null,
+    variant: { default: "default" },
+    size: { default: "sm" },
+    disabled: { type: Boolean, default: false }
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { expose, emit }) {
+    const props = __props;
+    const inputRef = ref();
+    const updateValue = (e) => {
+      emit("update:modelValue", e.target.value);
+    };
+    const clearValue = () => {
+      emit("update:modelValue", "");
+      focusOnInput();
+    };
+    const onRightIconClick = () => {
+      if (showClear.value) {
+        clearValue();
+      } else {
+        focusOnInput();
+      }
+    };
+    const focusOnInput = () => inputRef.value.focus();
+    const showClear = computed(() => {
+      return props.modelValue !== "";
+    });
+    const inline = computed(() => {
+      return props.variant === "inline-table";
+    });
+    const transparent = computed(() => {
+      return props.variant === "transparent";
+    });
+    const showRightIcon = computed(() => {
+      if (inline.value || transparent.value) {
+        showClear.value;
+      }
+      return showClear.value;
+    });
+    const showLeftIcon = computed(() => {
+      return transparent.value || inline.value;
+    });
+    const rightIcon = computed(() => {
+      return showClear.value ? "cancel" : "search";
+    });
+    expose({
+      inputRef
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(["search-container", `${__props.size}`])
+      }, [
+        unref(showLeftIcon) ? (openBlock(), createBlock(unref(Icon), {
+          key: 0,
+          class: "search-left-icon",
+          name: "search-bold",
+          "font-size": "sm"
+        })) : createCommentVNode("", true),
+        createElementVNode("input", {
+          ref_key: "inputRef",
+          ref: inputRef,
+          class: normalizeClass({ [__props.variant]: true, activated: __props.modelValue !== "" }),
+          value: __props.modelValue,
+          placeholder: __props.placeholder,
+          disabled: __props.disabled,
+          onInput: updateValue
+        }, null, 42, _hoisted_1),
+        unref(showRightIcon) ? (openBlock(), createBlock(unref(Icon), {
+          key: 1,
+          class: normalizeClass(["search-right-icon", { "search-right-icon-clear": unref(showClear) }]),
+          name: unref(rightIcon),
+          "font-size": "sm",
+          onClick: onRightIconClick
+        }, null, 8, ["class", "name"])) : createCommentVNode("", true)
+      ], 2);
+    };
+  }
+});
+var Search = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-925b418c"]]);
+
+export { Search as default };

package/components/search/index.d.ts

@@ -0,0 +1,61 @@
+declare const SearchTypes: () => import("vue").DefineComponent<{
+    size: {
+        type: import("vue").PropType<"md" | "sm">;
+    } & {
+        default: string;
+    };
+    variant: {
+        type: import("vue").PropType<"default" | "inline-table" | "transparent">;
+    } & {
+        default: string;
+    };
+    disabled: {
+        type: import("vue").PropType<boolean>;
+    } & {
+        default: boolean;
+    };
+    modelValue: {
+        type: import("vue").PropType<string>;
+        required: true;
+    };
+    placeholder: {
+        type: import("vue").PropType<string>;
+        required: true;
+    };
+}, {
+    inputRef: import("vue").Ref<HTMLInputElement>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => void;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    size: {
+        type: import("vue").PropType<"md" | "sm">;
+    } & {
+        default: string;
+    };
+    variant: {
+        type: import("vue").PropType<"default" | "inline-table" | "transparent">;
+    } & {
+        default: string;
+    };
+    disabled: {
+        type: import("vue").PropType<boolean>;
+    } & {
+        default: boolean;
+    };
+    modelValue: {
+        type: import("vue").PropType<string>;
+        required: true;
+    };
+    placeholder: {
+        type: import("vue").PropType<string>;
+        required: true;
+    };
+}>> & {
+    "onUpdate:modelValue"?: (value: string) => any;
+}, {
+    size: "md" | "sm";
+    variant: "default" | "inline-table" | "transparent";
+    disabled: boolean;
+}>[];
+export { default as Search } from './Search.vue';
+export { SearchTypes };

package/components/search/index.vue.js

@@ -0,0 +1,6 @@
+import Search from './Search.vue.js';
+export { default as Search } from './Search.vue.js';
+
+const SearchTypes = () => [Search];
+
+export { SearchTypes };

package/components/skeleton/Skeleton.vue.d.ts

@@ -0,0 +1,17 @@
+declare const _default: import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<{
+    round?: boolean;
+    fill?: boolean;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    round?: boolean;
+    fill?: boolean;
+}>>>, {}>;
+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;
+    };
+};

package/components/skeleton/Skeleton.vue.js

@@ -0,0 +1,23 @@
+import { defineComponent, openBlock, createElementBlock, normalizeClass, renderSlot } from 'vue';
+/* empty css                                                          */import _export_sfc from '../../_virtual/plugin-vue_export-helper.vue.js';
+
+import "../../Skeleton.vue_vue_type_style_index_0_scoped_true_lang.css";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "Skeleton",
+  props: {
+    round: { type: Boolean },
+    fill: { type: Boolean }
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass({ round: __props.round, fill: __props.fill })
+      }, [
+        renderSlot(_ctx.$slots, "default", {}, void 0, true)
+      ], 2);
+    };
+  }
+});
+var Skeleton = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-533b1b95"]]);
+
+export { Skeleton as default };

package/components/skeleton/index.d.ts

@@ -0,0 +1,17 @@
+declare const SkeletonTypes: () => import("vue").DefineComponent<{
+    round: {
+        type: import("vue").PropType<boolean>;
+    };
+    fill: {
+        type: import("vue").PropType<boolean>;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    round: {
+        type: import("vue").PropType<boolean>;
+    };
+    fill: {
+        type: import("vue").PropType<boolean>;
+    };
+}>>, {}>[];
+export { default as Skeleton } from './Skeleton.vue';
+export { SkeletonTypes };

package/components/skeleton/index.vue.js

@@ -0,0 +1,6 @@
+import Skeleton from './Skeleton.vue.js';
+export { default as Skeleton } from './Skeleton.vue.js';
+
+const SkeletonTypes = () => [Skeleton];
+
+export { SkeletonTypes };

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

@@ -0,0 +1,70 @@
+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;
+}>>> & {
+    onDestroy?: (...args: any[]) => any;
+}, {
+    title: string;
+    type: 'success' | 'error' | 'info';
+    position: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
+    zIndex: number;
+    duration: number;
+    showClose: boolean;
+}>;
+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 ? P[K] & {
+        default: D[K];
+    } : P[K];
+};

package/components/snackbar/Snackbar.vue.js

@@ -0,0 +1,181 @@
+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 };

package/components/snackbar/index.d.ts

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

package/components/snackbar/index.vue.js

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

package/components/snackbar/notify.d.ts

@@ -0,0 +1,14 @@
+import type { VNode } from 'vue';
+import type { Notify, SnackbarOptions } from './snackbar.types';
+/**
+ * This function gets called when user click `x` button or press `esc` or the time reached its limitation.
+ * Emitted by transition@before-leave event so that we can fetch the current notification.offsetHeight, if this was called
+ * by @after-leave the DOM element will be removed from the page thus we can no longer fetch the offsetHeight.
+ * @param {String} id notification id to be closed
+ * @param {Position} position the positioning strategy
+ * @param {Function} userOnClose the callback called when close passed by user
+ */
+export declare function close(id: string, position: SnackbarOptions['position'], userOnClose?: (vm: VNode) => void): void;
+export declare function closeAll(): void;
+declare const _default: Notify;
+export default _default;

package/components/snackbar/notify.vue.js

@@ -0,0 +1,106 @@
+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": []
+};
+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
+  );
+  verticalOffset += SNACKBAR_GAP_SIZE;
+  const nextZIndex = () => zIndex++;
+  const id = `notification_${seed++}`;
+  const userOnClose = options.onClose;
+  const props = {
+    ...options,
+    zIndex: nextZIndex(),
+    offset: verticalOffset,
+    id,
+    onClose: () => {
+      close(id, position, userOnClose);
+    }
+  };
+  const appendTo = document.body;
+  const container = document.createElement("div");
+  const vm = createVNode(
+    SnackbarConstructor,
+    props,
+    isVNode(props.message) ? {
+      default: () => props.message
+    } : null
+  );
+  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 proxy = vm.component?.proxy;
+      if (proxy)
+        proxy.visible = false;
+    }
+  };
+};
+function close(id, position, userOnClose) {
+  const orientedNotifications = notifications[position];
+  const activeNotificationIndex = orientedNotifications.findIndex(
+    ({ vm: vm2 }) => vm2.component?.props.id === id
+  );
+  if (activeNotificationIndex === -1)
+    return;
+  const { vm } = orientedNotifications[activeNotificationIndex];
+  if (!vm)
+    return;
+  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;
+  }
+}
+snackbarTypes.forEach((type) => {
+  notify[type] = (options = {}) => {
+    if (typeof options === "string" || isVNode(options)) {
+      options = {
+        message: options
+      };
+    }
+    return notify({
+      ...options,
+      type
+    });
+  };
+});
+function closeAll() {
+  for (const orientedNotifications of Object.values(notifications)) {
+    orientedNotifications.forEach(({ vm }) => {
+      const proxy = vm.component?.proxy;
+      if (proxy)
+        proxy.visible = false;
+    });
+  }
+}
+notify.closeAll = closeAll;
+notify._context = null;
+
+export { close, closeAll, notify as default };

package/components/snackbar/snackbar.types.d.ts

@@ -0,0 +1,43 @@
+import { VNode } from 'vue';
+export declare const snackbarEmits: {
+    destroy: () => boolean;
+};
+export declare const snackbarTypes: readonly ["success", "info", "error"];
+export type SnackbarEmits = typeof snackbarEmits;
+export interface SnackbarProps {
+    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;
+}
+export type SnackbarOptions = Omit<SnackbarProps, 'id'> & {
+    appendTo?: HTMLElement | string;
+};
+export type SnackbarOptionsTyped = Omit<SnackbarOptions, 'type'>;
+export interface SnackbarHandle {
+    close: () => void;
+}
+export type SnackbarParams = Partial<SnackbarOptions> | string | VNode;
+export type SnackbarParamsTyped = Partial<SnackbarOptionsTyped> | string | VNode;
+export type NotifyFn = ((options?: SnackbarParams) => SnackbarHandle) & {
+    closeAll: () => void;
+};
+export type NotifyTypedFn = (options?: SnackbarParamsTyped) => SnackbarHandle;
+export interface Notify extends NotifyFn {
+    success: NotifyTypedFn;
+    error: NotifyTypedFn;
+}
+export interface SnackbarQueueItem {
+    vm: VNode;
+}
+export type SnackbarQueue = SnackbarQueueItem[];

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

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