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

package/components/table-cells/Editable.vue.js

@@ -1,89 +1,7 @@
-import { defineComponent, ref, provide, openBlock, createElementBlock, createElementVNode, renderSlot, createVNode, withCtx, createTextVNode, toDisplayString } from 'vue';
-import Text from '../typography/Text.vue.js';
-import { EditableContext } from './EditableContext.vue.js';
-import { onClickOutside } from '@vueuse/core';
-import { useTableContext } from '../table/TableContext.vue.js';
-/* empty css                                                          */import _export_sfc from '../../_virtual/plugin-vue_export-helper.vue.js';
-
-import "../../Editable.vue_vue_type_style_index_0_scoped_true_lang.css";
-const _hoisted_1 = { class: "editable-container" };
-const _hoisted_2 = {
-  key: 1,
-  class: "editable-content"
+import o from "./Editable.vue2.js";
+/* empty css               */import e from "../../_virtual/_plugin-vue_export-helper.js";
+// import "../../Editable.vue_vue_type_style_index_0_scoped_3b865286_lang.css"; //*');
+const p = /* @__PURE__ */ e(o, [["__scopeId", "data-v-3b865286"]]);
+export {
+  p as default
 };
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  __name: "Editable",
-  props: {
-    cell: { default: "" },
-    isEditing: { type: Boolean, default: false },
-    validateFunction: { type: Function, default: () => false },
-    isLoading: { type: Boolean, default: false },
-    rowIndex: null,
-    cellIndex: null
-  },
-  setup(__props) {
-    const props = __props;
-    const isEditing = ref(false);
-    const value = ref(props.cell);
-    const target = ref(null);
-    const api = useTableContext("Editable");
-    const errorRef = ref(null);
-    provide(EditableContext, {
-      focusable: true,
-      value,
-      error: errorRef,
-      confirmable: true,
-      onChange(val) {
-        value.value = val;
-        errorRef.value = props.validateFunction?.(value.value);
-      },
-      onClose: () => {
-        const error = props.validateFunction?.(value.value);
-        errorRef.value = error;
-        if (error) {
-          return;
-        }
-        api.onClose({
-          rowIndex: props.rowIndex,
-          cellIndex: props.cellIndex,
-          value: value.value
-        });
-        isEditing.value = false;
-      }
-    });
-    const onEdit = () => {
-      if (isEditing.value) {
-        return;
-      }
-      isEditing.value = !isEditing.value;
-    };
-    onClickOutside(target, () => {
-      isEditing.value = false;
-      api.onClose();
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        ref_key: "target",
-        ref: target,
-        class: "container",
-        onClick: onEdit
-      }, [
-        createElementVNode("div", _hoisted_1, [
-          isEditing.value ? renderSlot(_ctx.$slots, "input", { key: 0 }, void 0, true) : (openBlock(), createElementBlock("div", _hoisted_2, [
-            renderSlot(_ctx.$slots, "content", {}, () => [
-              createVNode(Text, { size: "sm" }, {
-                default: withCtx(() => [
-                  createTextVNode(toDisplayString(__props.cell), 1)
-                ]),
-                _: 1
-              })
-            ], true)
-          ]))
-        ])
-      ], 512);
-    };
-  }
-});
-var Editable = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-73de8e4d"]]);
-
-export { Editable as default };

package/components/table-cells/Editable.vue2.js

@@ -0,0 +1,66 @@
+ import "../../Editable.vue_vue_type_style_index_0_scoped_3b865286_lang.css"; import { defineComponent as v, ref as n, provide as p, openBlock as u, createElementBlock as c, createElementVNode as m, renderSlot as d, createVNode as x, withCtx as C, createTextVNode as b, toDisplayString as E } from "vue";
+import _ from "../typography/Text.vue.js";
+import { EditableContext as g } from "./EditableContext.js";
+import { onClickOutside as k } from "@vueuse/core";
+import { useTableContext as y } from "../table/TableContext.js";
+const I = { class: "editable-container" }, h = {
+  key: 1,
+  class: "editable-content"
+}, S = /* @__PURE__ */ v({
+  __name: "Editable",
+  props: {
+    cell: { default: "" },
+    isEditing: { type: Boolean, default: !1 },
+    validateFunction: { type: Function, default: () => !1 },
+    isLoading: { type: Boolean, default: !1 },
+    rowIndex: null,
+    cellIndex: null
+  },
+  setup(r) {
+    const l = r, t = n(!1), o = n(l.cell), i = n(null), s = y("Editable"), a = n(null);
+    p(g, {
+      focusable: !0,
+      value: o,
+      error: a,
+      confirmable: !0,
+      onChange(e) {
+        o.value = e, a.value = l.validateFunction?.(o.value);
+      },
+      onClose: () => {
+        const e = l.validateFunction?.(o.value);
+        a.value = e, !e && (s.onClose({
+          rowIndex: l.rowIndex,
+          cellIndex: l.cellIndex,
+          value: o.value
+        }), t.value = !1);
+      }
+    });
+    const f = () => {
+      t.value || (t.value = !t.value);
+    };
+    return k(i, () => {
+      t.value = !1, s.onClose();
+    }), (e, w) => (u(), c("div", {
+      ref_key: "target",
+      ref: i,
+      class: "container",
+      onClick: f
+    }, [
+      m("div", I, [
+        t.value ? d(e.$slots, "input", { key: 0 }, void 0, !0) : (u(), c("div", h, [
+          d(e.$slots, "content", {}, () => [
+            x(_, { size: "sm" }, {
+              default: C(() => [
+                b(E(r.cell), 1)
+              ]),
+              _: 1
+            })
+          ], !0)
+        ]))
+      ])
+    ], 512));
+  }
+});
+export {
+  S as default
+};

package/components/table-cells/EditableContext.js

@@ -0,0 +1,11 @@
+import { inject as t } from "vue";
+const e = Symbol(
+  "EditableContext"
+);
+function n() {
+  return t(e, {});
+}
+export {
+  e as EditableContext,
+  n as useEditableContext
+};

package/components/table-cells/index.d.ts

@@ -1,53 +1,147 @@
-declare const EditableTypes: () => (import("vue").InjectionKey<import("./EditableContext").EditableContextProps> | import("vue").DefineComponent<{
+declare const EditableTypes: () => (import("vue").InjectionKey<import("./EditableContext").EditableContextProps> | ({
+    new (...args: any[]): {
+        $: import("vue").ComponentInternalInstance;
+        $data: {};
+        $props: Partial<{
+            cell: string;
+            isEditing: boolean;
+            validateFunction: (value: unknown) => string | boolean;
+            isLoading: boolean;
+        }> & Omit<Readonly<import("vue").ExtractPropTypes<{
+            cell: {
+                type: import("vue").PropType<string>;
+                default: string;
+            };
+            isEditing: {
+                type: import("vue").PropType<boolean>;
+                default: boolean;
+            };
+            validateFunction: {
+                type: import("vue").PropType<(value: unknown) => string | boolean>;
+                default: () => false;
+            };
+            isLoading: {
+                type: import("vue").PropType<boolean>;
+                default: boolean;
+            };
+            rowIndex: {
+                type: import("vue").PropType<number>;
+                required: true;
+            };
+            cellIndex: {
+                type: import("vue").PropType<number>;
+                required: true;
+            };
+        }>> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "cell" | "isEditing" | "validateFunction" | "isLoading">;
+        $attrs: {
+            [x: string]: unknown;
+        };
+        $refs: {
+            [x: string]: unknown;
+        };
+        $slots: Readonly<{
+            [name: string]: import("vue").Slot;
+        }>;
+        $root: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}>;
+        $parent: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}>;
+        $emit: (event: string, ...args: any[]) => void;
+        $el: any;
+        $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
+            cell: {
+                type: import("vue").PropType<string>;
+                default: string;
+            };
+            isEditing: {
+                type: import("vue").PropType<boolean>;
+                default: boolean;
+            };
+            validateFunction: {
+                type: import("vue").PropType<(value: unknown) => string | boolean>;
+                default: () => false;
+            };
+            isLoading: {
+                type: import("vue").PropType<boolean>;
+                default: boolean;
+            };
+            rowIndex: {
+                type: import("vue").PropType<number>;
+                required: true;
+            };
+            cellIndex: {
+                type: import("vue").PropType<number>;
+                required: true;
+            };
+        }>>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
+            cell: string;
+            isEditing: boolean;
+            validateFunction: (value: unknown) => string | boolean;
+            isLoading: boolean;
+        }, {}, string> & {
+            beforeCreate?: (() => void) | (() => void)[];
+            created?: (() => void) | (() => void)[];
+            beforeMount?: (() => void) | (() => void)[];
+            mounted?: (() => void) | (() => void)[];
+            beforeUpdate?: (() => void) | (() => void)[];
+            updated?: (() => void) | (() => void)[];
+            activated?: (() => void) | (() => void)[];
+            deactivated?: (() => void) | (() => void)[];
+            beforeDestroy?: (() => void) | (() => void)[];
+            beforeUnmount?: (() => void) | (() => void)[];
+            destroyed?: (() => void) | (() => void)[];
+            unmounted?: (() => void) | (() => void)[];
+            renderTracked?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
+            renderTriggered?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
+            errorCaptured?: ((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}>, info: string) => boolean | void) | ((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}>, info: string) => boolean | void)[];
+        };
+        $forceUpdate: () => void;
+        $nextTick: typeof import("vue").nextTick;
+        $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (args_0: R, args_1: R) => any : (...args: any) => any, options?: import("vue").WatchOptions<boolean>): import("vue").WatchStopHandle;
+    } & Readonly<import("vue").ExtractPropTypes<{
+        cell: {
+            type: import("vue").PropType<string>;
+            default: string;
+        };
+        isEditing: {
+            type: import("vue").PropType<boolean>;
+            default: boolean;
+        };
+        validateFunction: {
+            type: import("vue").PropType<(value: unknown) => string | boolean>;
+            default: () => false;
+        };
+        isLoading: {
+            type: import("vue").PropType<boolean>;
+            default: boolean;
+        };
+        rowIndex: {
+            type: import("vue").PropType<number>;
+            required: true;
+        };
+        cellIndex: {
+            type: import("vue").PropType<number>;
+            required: true;
+        };
+    }>> & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties & {};
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
     cell: {
         type: import("vue").PropType<string>;
-    } & {
         default: string;
     };
-    isLoading: {
-        type: import("vue").PropType<boolean>;
-    } & {
-        default: boolean;
-    };
     isEditing: {
         type: import("vue").PropType<boolean>;
-    } & {
         default: boolean;
     };
     validateFunction: {
         type: import("vue").PropType<(value: unknown) => string | boolean>;
-    } & {
         default: () => false;
     };
-    rowIndex: {
-        type: import("vue").PropType<number>;
-        required: true;
-    };
-    cellIndex: {
-        type: import("vue").PropType<number>;
-        required: true;
-    };
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    cell: {
-        type: import("vue").PropType<string>;
-    } & {
-        default: string;
-    };
     isLoading: {
         type: import("vue").PropType<boolean>;
-    } & {
         default: boolean;
     };
-    isEditing: {
-        type: import("vue").PropType<boolean>;
-    } & {
-        default: boolean;
-    };
-    validateFunction: {
-        type: import("vue").PropType<(value: unknown) => string | boolean>;
-    } & {
-        default: () => false;
-    };
     rowIndex: {
         type: import("vue").PropType<number>;
         required: true;
@@ -56,12 +150,17 @@ declare const EditableTypes: () => (import("vue").InjectionKey<import("./Editabl
         type: import("vue").PropType<number>;
         required: true;
     };
-}>>, {
+}>>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
     cell: string;
-    isLoading: boolean;
     isEditing: boolean;
     validateFunction: (value: unknown) => string | boolean;
-}>)[];
+    isLoading: boolean;
+}, {}, string> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
+    $slots: {
+        input?(_: {}): any;
+        content?(_: {}): any;
+    };
+})))[];
 export { default as Editable } from './Editable.vue';
 export { EditableContext, useEditableContext } from './EditableContext';
 export { EditableTypes };

package/components/table-cells/index.js

@@ -0,0 +1,10 @@
+import t from "./Editable.vue.js";
+import { EditableContext as e } from "./EditableContext.js";
+import { useEditableContext as a } from "./EditableContext.js";
+const i = () => [t, e];
+export {
+  t as Editable,
+  e as EditableContext,
+  i as EditableTypes,
+  a as useEditableContext
+};

package/components/tabs/Tabs.vue.d.ts

@@ -1,13 +1,14 @@
-declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    tabsList: {
-        id: number | string;
-        name: string;
-        iconName: string;
-        disabled?: boolean;
-    }[];
-    selectedTab: number | string;
-    variant?: 'fix' | 'fill';
-    size?: 'sm' | 'md' | 'lg' | 'xl';
+type Tab = {
+    id: number | string;
+    name: string;
+    iconName: string;
+    disabled?: boolean;
+};
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    tabsList: Tab[];
+    selectedTab: string | number;
+    variant?: "fill" | "fix";
+    size?: "sm" | "md" | "lg" | "xl";
     testId?: string;
 }>, {
     tabsList: () => any[];
@@ -17,15 +18,10 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:selectedTab": (tabId: string | number) => void;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    tabsList: {
-        id: number | string;
-        name: string;
-        iconName: string;
-        disabled?: boolean;
-    }[];
-    selectedTab: number | string;
-    variant?: 'fix' | 'fill';
-    size?: 'sm' | 'md' | 'lg' | 'xl';
+    tabsList: Tab[];
+    selectedTab: string | number;
+    variant?: "fill" | "fix";
+    size?: "sm" | "md" | "lg" | "xl";
     testId?: string;
 }>, {
     tabsList: () => any[];
@@ -35,15 +31,14 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
 }>>> & {
     "onUpdate:selectedTab"?: (tabId: string | number) => any;
 }, {
-    size: 'sm' | 'md' | 'lg' | 'xl';
+    size: "sm" | "md" | "lg" | "xl";
     testId: string;
-    variant: 'fix' | 'fill';
-    tabsList: {
-        id: number | string;
-        name: string;
-        iconName: string;
-        disabled?: boolean;
-    }[];
+    variant: "fill" | "fix";
+    tabsList: Tab[];
+}>, {
+    default?(_: {
+        tab: Tab;
+    }): any;
 }>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
@@ -56,7 +51,15 @@ type __VLS_TypePropsToRuntimeProps<T> = {
     };
 };
 type __VLS_WithDefaults<P, D> = {
-    [K in keyof Pick<P, keyof P>]: K extends keyof D ? P[K] & {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
         default: D[K];
-    } : P[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
 };

package/components/tabs/Tabs.vue.js

@@ -1,129 +1,7 @@
-import { defineComponent, useCssVars, unref, ref, computed, openBlock, createElementBlock, normalizeClass, Fragment, renderList, renderSlot, createBlock, createCommentVNode, withCtx, createTextVNode, toDisplayString, pushScopeId, popScopeId, createElementVNode } from 'vue';
-import { TabsTestIdModifiers } from '../../testids/index.vue.js';
-/* empty css                                                                     */import _export_sfc from '../../_virtual/plugin-vue_export-helper.vue.js';
-import Text from '../typography/Text.vue.js';
-import Icon from '../icon/v3/Icon.vue.js';
-/* empty css                                                      */
-import "../../Tabs.vue_vue_type_style_index_0_scoped_true_lang.css";
-const _withScopeId = (n) => (pushScopeId("data-v-11ec8566"), n = n(), popScopeId(), n);
-const _hoisted_1 = ["data-testid"];
-const _hoisted_2 = ["data-testid", "onClick", "onMouseover"];
-const _hoisted_3 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode("div", { class: "tabs-border-line" }, null, -1));
-const _hoisted_4 = {
-  key: 0,
-  class: "tabs-border-line-hover"
+import o from "./Tabs.vue2.js";
+/* empty css           */import e from "../../_virtual/_plugin-vue_export-helper.js";
+// import "../../Tabs.vue_vue_type_style_index_0_scoped_e92a7c21_lang.css"; //*');
+const a = /* @__PURE__ */ e(o, [["__scopeId", "data-v-e92a7c21"]]);
+export {
+  a as default
 };
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  __name: "Tabs",
-  props: {
-    tabsList: { default: () => [] },
-    selectedTab: null,
-    variant: { default: "fill" },
-    size: { default: "sm" },
-    testId: { default: "" }
-  },
-  emits: ["update:selectedTab"],
-  setup(__props, { emit }) {
-    const props = __props;
-    useCssVars((_ctx) => ({
-      "24698272": unref(selectedTabPosition),
-      "88d81dc6": unref(selectedTabWidth),
-      "d6d51844": unref(selectedTabCenter),
-      "283455e0": unref(hoveredTabCenter)
-    }));
-    const tabsNewList = ref([]);
-    const hoveredTab = ref(null);
-    const fixUnderlineLength = 12;
-    const skipUnwrap = { tabsNewList };
-    const isHovered = computed(
-      () => hoveredTab.value && hoveredTab.value !== props.selectedTab
-    );
-    const selectedTabPosition = computed(() => {
-      const selectedIndex = getSelectedTabIndex();
-      return tabsNewList.value[selectedIndex]?.offsetLeft + "px";
-    });
-    const getSelectedTabIndex = () => {
-      return props.tabsList.findIndex((tab) => tab.id === props.selectedTab);
-    };
-    const selectedTabWidth = computed(() => {
-      const selectedIndex = getSelectedTabIndex();
-      return tabsNewList.value[selectedIndex]?.clientWidth + "px";
-    });
-    const computeTabCenter = (hoveredIndex) => {
-      const left = tabsNewList.value[hoveredIndex]?.offsetLeft;
-      const width = tabsNewList.value[hoveredIndex]?.clientWidth;
-      const computedBorderWidth = parseFloat(left) + parseFloat(width) / 2 - fixUnderlineLength;
-      return computedBorderWidth.toString() + "px";
-    };
-    const selectedTabCenter = computed(() => {
-      const selectedIndex = getSelectedTabIndex();
-      return computeTabCenter(selectedIndex);
-    });
-    const getHoveredTabIndex = () => {
-      return props.tabsList.findIndex((tab) => tab.id === hoveredTab.value);
-    };
-    const hoveredTabCenter = computed(() => {
-      const hoveredIndex = getHoveredTabIndex();
-      return computeTabCenter(hoveredIndex);
-    });
-    const selectTab = (tab) => {
-      emit("update:selectedTab", tab.id);
-    };
-    const setHover = (tab) => {
-      if (tab === null)
-        return;
-      hoveredTab.value = tab["id"];
-    };
-    const clearHover = () => {
-      hoveredTab.value = null;
-    };
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("ul", {
-        class: normalizeClass(["tabs-wrap", [__props.size, __props.variant]]),
-        "data-testid": `${__props.testId}-${unref(TabsTestIdModifiers).WRAPPER}`
-      }, [
-        (openBlock(true), createElementBlock(Fragment, null, renderList(__props.tabsList, (tab) => {
-          return openBlock(), createElementBlock("li", {
-            ref_for: true,
-            ref: skipUnwrap.tabsNewList,
-            key: tab.id,
-            class: normalizeClass(["tab-item", {
-              "disabled-tab": tab.disabled,
-              "selected-tab": tab.id === __props.selectedTab
-            }]),
-            "data-testid": `${__props.testId}-${unref(TabsTestIdModifiers).TAB}-${tab.id}`,
-            onClick: ($event) => selectTab(tab),
-            onMouseover: ($event) => setHover(tab),
-            onMouseleave: clearHover
-          }, [
-            renderSlot(_ctx.$slots, "default", { tab }, () => [
-              tab.iconName ? (openBlock(), createBlock(unref(Icon), {
-                key: 0,
-                name: tab.iconName,
-                class: normalizeClass(["tab-icon", {
-                  size: __props.size,
-                  "lone-icon": !tab.name
-                }])
-              }, null, 8, ["name", "class"])) : createCommentVNode("", true),
-              tab.name ? (openBlock(), createBlock(unref(Text), {
-                key: 1,
-                size: "sm",
-                strong: ""
-              }, {
-                default: withCtx(() => [
-                  createTextVNode(toDisplayString(tab.name), 1)
-                ]),
-                _: 2
-              }, 1024)) : createCommentVNode("", true)
-            ], true)
-          ], 42, _hoisted_2);
-        }), 128)),
-        _hoisted_3,
-        unref(isHovered) ? (openBlock(), createElementBlock("div", _hoisted_4)) : createCommentVNode("", true)
-      ], 10, _hoisted_1);
-    };
-  }
-});
-var Tabs = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-11ec8566"]]);
-
-export { Tabs as default };