@ironsource/shared-ui 1.4.0-rc.10

package/components/table/TableHeaderSorter.vue.js

@@ -0,0 +1,29 @@
+import { defineComponent, openBlock, createElementBlock, createVNode, normalizeClass } from 'vue';
+import SortOrderIcon from './SortOrderIcon.vue.js';
+/* empty css                                                                   */import _export_sfc from '../../_virtual/plugin-vue_export-helper.vue.js';
+
+import "../../TableHeaderSorter.vue_vue_type_style_index_0_scoped_true_lang.css";
+const _hoisted_1 = { class: "table-head-sorter-container" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "TableHeaderSorter",
+  props: {
+    sortOrder: null
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createVNode(SortOrderIcon, {
+          name: "sort-order",
+          class: normalizeClass({ "table-head-sorter-selected": __props.sortOrder === "asc" })
+        }, null, 8, ["class"]),
+        createVNode(SortOrderIcon, {
+          name: "sort-order",
+          class: normalizeClass(["table-head-sorter-desc", { "table-head-sorter-selected": __props.sortOrder === "desc" }])
+        }, null, 8, ["class"])
+      ]);
+    };
+  }
+});
+var TableHeaderSorter = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-02476f76"]]);
+
+export { TableHeaderSorter as default };

package/components/table/codeTemplate.d.ts

@@ -0,0 +1,11 @@
+export declare const codeTemplate: (args: {
+    isLoading?: boolean;
+    columns?: string;
+    sections?: string;
+    floatingActions?: boolean;
+    isInfiniteScroll?: boolean;
+    showSearch?: boolean;
+    showTitle?: boolean;
+    showTooltip?: boolean;
+    rows: string;
+}) => any;

package/components/table/index.d.ts

@@ -0,0 +1,159 @@
+declare const TableTypes: () => (import("vue").InjectionKey<import("./TableContext").TableContextProps> | import("vue").DefineComponent<{
+    sort: {
+        type: import("vue").PropType<import("./Table.types").Sort>;
+        required: true;
+    };
+    title: {
+        type: import("vue").PropType<string>;
+        required: true;
+    };
+    columns: {
+        type: import("vue").PropType<import("./Table.types").Column[]>;
+        required: true;
+    };
+    isLoading: {
+        type: import("vue").PropType<boolean>;
+    } & {
+        default: boolean;
+    };
+    isSticky: {
+        type: import("vue").PropType<boolean>;
+    } & {
+        default: boolean;
+    };
+    sections: {
+        type: import("vue").PropType<import("./Table.types").Section[]>;
+    } & {
+        default: any;
+    };
+    emptyStateTitle: {
+        type: import("vue").PropType<string>;
+    } & {
+        default: string;
+    };
+    emptyStateSubtitle: {
+        type: import("vue").PropType<string>;
+    } & {
+        default: string;
+    };
+    isInfiniteScroll: {
+        type: import("vue").PropType<boolean>;
+    } & {
+        default: boolean;
+    };
+    infiniteScrollThreshold: {
+        type: import("vue").PropType<number>;
+    } & {
+        default: number;
+    };
+    rowHeight: {
+        type: import("vue").PropType<number | ((index: number) => number)>;
+    } & {
+        default: number;
+    };
+    loadingRowCount: {
+        type: import("vue").PropType<number>;
+    } & {
+        default: number;
+    };
+    rows: {
+        type: import("vue").PropType<unknown[][]>;
+        required: true;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:sort": (newSort: import("./Table.types").Sort) => void;
+} & {
+    saveRow: (payload_0: {
+        value: unknown;
+        confirm: () => void;
+        rowIndex: number;
+        cellIndex: number;
+    }) => void;
+} & {
+    loadMore: () => void;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    sort: {
+        type: import("vue").PropType<import("./Table.types").Sort>;
+        required: true;
+    };
+    title: {
+        type: import("vue").PropType<string>;
+        required: true;
+    };
+    columns: {
+        type: import("vue").PropType<import("./Table.types").Column[]>;
+        required: true;
+    };
+    isLoading: {
+        type: import("vue").PropType<boolean>;
+    } & {
+        default: boolean;
+    };
+    isSticky: {
+        type: import("vue").PropType<boolean>;
+    } & {
+        default: boolean;
+    };
+    sections: {
+        type: import("vue").PropType<import("./Table.types").Section[]>;
+    } & {
+        default: any;
+    };
+    emptyStateTitle: {
+        type: import("vue").PropType<string>;
+    } & {
+        default: string;
+    };
+    emptyStateSubtitle: {
+        type: import("vue").PropType<string>;
+    } & {
+        default: string;
+    };
+    isInfiniteScroll: {
+        type: import("vue").PropType<boolean>;
+    } & {
+        default: boolean;
+    };
+    infiniteScrollThreshold: {
+        type: import("vue").PropType<number>;
+    } & {
+        default: number;
+    };
+    rowHeight: {
+        type: import("vue").PropType<number | ((index: number) => number)>;
+    } & {
+        default: number;
+    };
+    loadingRowCount: {
+        type: import("vue").PropType<number>;
+    } & {
+        default: number;
+    };
+    rows: {
+        type: import("vue").PropType<unknown[][]>;
+        required: true;
+    };
+}>> & {
+    "onUpdate:sort"?: (newSort: import("./Table.types").Sort) => any;
+    onSaveRow?: (args_0: {
+        value: unknown;
+        confirm: () => void;
+        rowIndex: number;
+        cellIndex: number;
+    }) => any;
+    onLoadMore?: () => any;
+}, {
+    isLoading: boolean;
+    isSticky: boolean;
+    sections: import("./Table.types").Section[];
+    emptyStateTitle: string;
+    emptyStateSubtitle: string;
+    isInfiniteScroll: boolean;
+    infiniteScrollThreshold: number;
+    rowHeight: number | ((index: number) => number);
+    loadingRowCount: number;
+}>)[];
+export { default as Table } from './Table.vue';
+export { TableContext } from './TableContext';
+export type { Column, Sort } from './Table.types';
+export { TableTypes };

package/components/table/index.vue.js

@@ -0,0 +1,8 @@
+import Table from './Table.vue.js';
+export { default as Table } from './Table.vue.js';
+import { TableContext } from './TableContext.vue.js';
+export { TableContext } from './TableContext.vue.js';
+
+const TableTypes = () => [Table, TableContext];
+
+export { TableTypes };

package/components/table-cells/Editable.vue.d.ts

@@ -0,0 +1,45 @@
+declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    cell?: string;
+    isEditing?: boolean;
+    validateFunction?: (value: unknown) => string | boolean;
+    isLoading?: boolean;
+    rowIndex: number;
+    cellIndex: number;
+}>, {
+    cell: string;
+    isLoading: boolean;
+    isEditing: boolean;
+    validateFunction: () => false;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    cell?: string;
+    isEditing?: boolean;
+    validateFunction?: (value: unknown) => string | boolean;
+    isLoading?: boolean;
+    rowIndex: number;
+    cellIndex: number;
+}>, {
+    cell: string;
+    isLoading: boolean;
+    isEditing: boolean;
+    validateFunction: () => false;
+}>>>, {
+    cell: string;
+    isLoading: boolean;
+    isEditing: boolean;
+    validateFunction: (value: unknown) => string | 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/table-cells/Editable.vue.js

@@ -0,0 +1,89 @@
+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"
+};
+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-20f632f8"]]);
+
+export { Editable as default };

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

@@ -0,0 +1,11 @@
+import { InjectionKey, Ref } from 'vue';
+export interface EditableContextProps {
+    onChange?(value: unknown): void;
+    onClose?(): void;
+    focusable?: boolean;
+    error?: Ref<string>;
+    value?: Ref<unknown>;
+    confirmable?: boolean;
+}
+export declare const EditableContext: InjectionKey<EditableContextProps>;
+export declare function useEditableContext(): EditableContextProps;

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

@@ -0,0 +1,10 @@
+import { inject } from 'vue';
+
+const EditableContext = Symbol(
+  "EditableContext"
+);
+function useEditableContext() {
+  return inject(EditableContext, {});
+}
+
+export { EditableContext, useEditableContext };

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

@@ -0,0 +1,67 @@
+declare const EditableTypes: () => (import("vue").InjectionKey<import("./EditableContext").EditableContextProps> | import("vue").DefineComponent<{
+    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;
+    };
+    cellIndex: {
+        type: import("vue").PropType<number>;
+        required: true;
+    };
+}>>, {
+    cell: string;
+    isLoading: boolean;
+    isEditing: boolean;
+    validateFunction: (value: unknown) => string | boolean;
+}>)[];
+export { default as Editable } from './Editable.vue';
+export { EditableContext, useEditableContext } from './EditableContext';
+export { EditableTypes };

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

@@ -0,0 +1,8 @@
+import Editable from './Editable.vue.js';
+export { default as Editable } from './Editable.vue.js';
+import { EditableContext } from './EditableContext.vue.js';
+export { EditableContext, useEditableContext } from './EditableContext.vue.js';
+
+const EditableTypes = () => [Editable, EditableContext];
+
+export { EditableTypes };

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

@@ -0,0 +1,57 @@
+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';
+}>, {
+    tabsList: () => any[];
+    variant: string;
+    size: string;
+}>, {}, 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: () => any[];
+    variant: string;
+    size: string;
+}>>> & {
+    "onUpdate:selectedTab"?: (tabId: string | number) => any;
+}, {
+    size: 'sm' | 'md' | 'lg' | 'xl';
+    variant: 'fix' | 'fill';
+    tabsList: {
+        id: number | string;
+        name: string;
+        iconName: string;
+        disabled?: 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/tabs/Tabs.vue.js

@@ -0,0 +1,124 @@
+import { defineComponent, useCssVars, unref, ref, computed, openBlock, createElementBlock, normalizeClass, Fragment, renderList, renderSlot, createBlock, createCommentVNode, withCtx, createTextVNode, toDisplayString, pushScopeId, popScopeId, createElementVNode } from 'vue';
+/* empty css                                                                     */import _export_sfc from '../../_virtual/plugin-vue_export-helper.vue.js';
+import Text from '../typography/Text.vue.js';
+import Icon from '../icon/Icon.vue.js';
+/* empty css                                                      */
+import "../../Tabs.vue_vue_type_style_index_0_scoped_true_lang.css";
+const _withScopeId = (n) => (pushScopeId("data-v-43f1459d"), n = n(), popScopeId(), n);
+const _hoisted_1 = ["onClick", "onMouseover"];
+const _hoisted_2 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode("div", { class: "tabs-border-line" }, null, -1));
+const _hoisted_3 = {
+  key: 0,
+  class: "tabs-border-line-hover"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "Tabs",
+  props: {
+    tabsList: { default: () => [] },
+    selectedTab: null,
+    variant: { default: "fill" },
+    size: { default: "sm" }
+  },
+  emits: ["update:selectedTab"],
+  setup(__props, { emit }) {
+    const props = __props;
+    useCssVars((_ctx) => ({
+      "87ea7e12": unref(selectedTabPosition),
+      "fb546e90": unref(selectedTabWidth),
+      "b3e2e0ba": unref(selectedTabCenter),
+      "2213a50a": 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]])
+      }, [
+        (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
+            }]),
+            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_1);
+        }), 128)),
+        _hoisted_2,
+        unref(isHovered) ? (openBlock(), createElementBlock("div", _hoisted_3)) : createCommentVNode("", true)
+      ], 2);
+    };
+  }
+});
+var Tabs = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-43f1459d"]]);
+
+export { Tabs as default };