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

package/components/table/SortOrderIcon.vue.js

@@ -1,28 +0,0 @@
-import { openBlock, createElementBlock, pushScopeId, popScopeId, createElementVNode } from 'vue';
-/* empty css                                                               */import _export_sfc from '../../_virtual/plugin-vue_export-helper.vue.js';
-
-import "../../SortOrderIcon.vue_vue_type_style_index_0_scoped_true_lang.css";
-const _sfc_main = {};
-
-const _withScopeId = n => (pushScopeId("data-v-14ef12bc"),n=n(),popScopeId(),n);
-const _hoisted_1 = {
-  width: "8",
-  height: "4",
-  viewBox: "0 0 8 4",
-  fill: "none",
-  xmlns: "http://www.w3.org/2000/svg"
-};
-const _hoisted_2 = /*#__PURE__*/ _withScopeId(() => /*#__PURE__*/createElementVNode("path", {
-  d: "M7.94188 3.66979L4.21022 0.0771272C4.1034 -0.0257091 3.89773 -0.0257091 3.78978 0.0771272L0.0581151 3.66979C-0.0805157 3.80376 0.0444792 4 0.268334 4H7.73167C7.95552 4 8.08052 3.80376 7.94188 3.66979Z",
-  fill: "currentColor"
-}, null, -1));
-const _hoisted_3 = [
-  _hoisted_2
-];
-
-function _sfc_render(_ctx, _cache) {
-  return (openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_3))
-}
-var SortOrderIcon = /*#__PURE__*/_export_sfc(_sfc_main, [['render',_sfc_render],['__scopeId',"data-v-14ef12bc"]]);
-
-export { SortOrderIcon as default };

package/components/table/Table.vue.js

@@ -1,368 +0,0 @@
-import { defineComponent, useCssVars, unref, ref, provide, computed, useSlots, onMounted, openBlock, createElementBlock, createElementVNode, normalizeStyle, normalizeClass, renderSlot, createVNode, withCtx, createTextVNode, toDisplayString, createCommentVNode, Fragment, renderList, createBlock, mergeProps, withDirectives, vShow } from 'vue';
-import { TableTestIdModifiers } 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';
-/* empty css                                                            *//* empty css                                                                   *//* empty css                                                                           *//* empty css                                                                       */import ScrollButton from '../button/v3/ScrollButton.vue.js';
-import Skeleton from '../skeleton/Skeleton.vue.js';
-import EmptyState from '../emptyState/EmptyState.vue.js';
-import TableHeaderSorter from './TableHeaderSorter.vue.js';
-import { useVirtualList, useInfiniteScroll } from '@vueuse/core';
-import { TableContext } from './TableContext.vue.js';
-/* empty css                                                       *//* empty css                                           */
-import "../../Table.vue_vue_type_style_index_0_scoped_true_lang.css";
-const _hoisted_1 = ["data-testid"];
-const _hoisted_2 = ["data-testid"];
-const _hoisted_3 = ["data-testid"];
-const _hoisted_4 = ["data-testid"];
-const _hoisted_5 = ["data-testid"];
-const _hoisted_6 = ["data-testid"];
-const _hoisted_7 = ["data-testid"];
-const _hoisted_8 = ["onClick"];
-const _hoisted_9 = { class: "table-head-container" };
-const _hoisted_10 = ["data-testid"];
-const _hoisted_11 = ["onMouseenter"];
-const _hoisted_12 = { key: 1 };
-const _hoisted_13 = { key: 1 };
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  __name: "Table",
-  props: {
-    title: null,
-    columns: null,
-    rows: null,
-    sections: { default: null },
-    sort: null,
-    isSticky: { type: Boolean, default: true },
-    isStickyHeader: { type: Boolean, default: false },
-    isLoading: { type: Boolean, default: false },
-    emptyStateTitle: { default: "No results found" },
-    emptyStateSubtitle: { default: "Try again with different filters" },
-    isInfiniteScroll: { type: Boolean, default: false },
-    infiniteScrollThreshold: { default: 100 },
-    rowHeight: { type: [Number, Function], default: 48 },
-    loadingRowCount: { default: 3 },
-    defaultScrollPosition: { default: null },
-    testId: { default: "" }
-  },
-  emits: ["update:sort", "onScroll", "saveRow", "loadMore"],
-  setup(__props, { emit }) {
-    const props = __props;
-    useCssVars((_ctx) => ({
-      "64720abd": unref(gridColumnTemplate)
-    }));
-    const savingRows = ref([]);
-    provide(TableContext, {
-      onClose({ rowIndex, cellIndex, value } = {}) {
-        if (value) {
-          savingRows.value = [...savingRows.value, rowIndex];
-          emit("saveRow", {
-            rowIndex,
-            cellIndex,
-            value,
-            confirm: () => {
-              savingRows.value = savingRows.value.filter((row) => row !== rowIndex);
-            }
-          });
-        }
-      }
-    });
-    const gridColumnTemplate = computed(() => {
-      return props.columns.reduce((acc, column) => {
-        if (column === props.columns[props.columns.length - 1] && column.width) {
-          return `${acc} minmax(${column.width}px, 1fr)`;
-        }
-        const columnTemplate = column.width ? `${column.width}px` : `${column.colSpan || 1}fr`;
-        return `${acc} ${columnTemplate}`;
-      }, "");
-    });
-    const activeRow = ref(null);
-    const loadingRows = computed(() => {
-      return Array(props.loadingRowCount).fill(
-        Array(props.columns.length).fill("")
-      );
-    });
-    const rows = computed(() => {
-      return props.isLoading ? [...props.rows, ...loadingRows.value] : props.rows;
-    });
-    const { list, containerProps, wrapperProps } = useVirtualList(rows, {
-      itemHeight: props.rowHeight
-    });
-    const floatingActionRef = ref(null);
-    const floatingActionPosition = ref(0);
-    const slots = useSlots();
-    const hasSearchSlot = computed(() => !!slots.search);
-    const onScroll = (event) => {
-      containerProps.onScroll();
-      floatingActionPosition.value = event.target.scrollLeft + event.target.getBoundingClientRect().width;
-      emit("onScroll", event.target.scrollTop);
-    };
-    onMounted(() => {
-      floatingActionPosition.value = containerProps.ref.value?.getBoundingClientRect().width;
-      if (props.defaultScrollPosition) {
-        setTimeout(() => {
-          containerProps.ref.value.scrollTo({
-            top: props.defaultScrollPosition,
-            behavior: "smooth"
-          });
-        }, 300);
-      }
-    });
-    const showBackToTopButton = computed(() => {
-      const [firstListItem] = list.value;
-      return firstListItem && firstListItem.index > 0;
-    });
-    const containerStyle = computed(() => containerProps.style);
-    const columnsStickyPositions = computed(() => {
-      return props.columns.reduce((acc, column) => {
-        if (column.isSticky) {
-          acc[column.id] = getColumnStickyPosition(column);
-        }
-        return acc;
-      }, {});
-    });
-    useInfiniteScroll(
-      containerProps.ref,
-      () => {
-        if (!props.isInfiniteScroll)
-          return;
-        emit("loadMore");
-      },
-      { distance: props.infiniteScrollThreshold }
-    );
-    function scrollToTop() {
-      containerProps.ref.value.scrollTo({
-        top: 0,
-        behavior: "smooth"
-      });
-    }
-    function toggleSortOrder(column) {
-      const toggledColumn = props.sort.sortBy === column.id;
-      const isColumnSortable = column.isSortable || column.isSortable === void 0;
-      if (!isColumnSortable)
-        return;
-      let sortOrder = props.sort.sortOrder;
-      let sortBy = props.sort.sortBy;
-      if (toggledColumn) {
-        sortOrder = props.sort.sortOrder === "asc" ? "desc" : "asc";
-      } else {
-        sortBy = column.id;
-      }
-      emit("update:sort", { sortBy, sortOrder });
-    }
-    function getColumnStickyPosition(column) {
-      const { isSticky, width } = column;
-      if (!isSticky || !width)
-        return null;
-      const columnIndex = props.columns.findIndex((c) => c.id === column.id);
-      const left = props.columns.reduce((acc, col, index) => {
-        if (index < columnIndex)
-          return acc + col.width;
-        return acc;
-      }, 0);
-      return {
-        left: `${left}px`,
-        zIndex: 1
-      };
-    }
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        class: "table-container",
-        "data-testid": `${__props.testId}-${unref(TableTestIdModifiers).CONTAINER}`,
-        onMouseleave: _cache[0] || (_cache[0] = ($event) => activeRow.value = null)
-      }, [
-        createElementVNode("table", {
-          ref: unref(containerProps).ref,
-          style: normalizeStyle(unref(containerStyle)),
-          "data-testid": `${__props.testId}-${unref(TableTestIdModifiers).TABLE}`,
-          onScrollPassive: onScroll
-        }, [
-          __props.title || _ctx.$slots["search"] ? (openBlock(), createElementBlock("div", {
-            key: 0,
-            class: normalizeClass(["table-header", { isStickyHeader: __props.isStickyHeader }]),
-            "data-testid": `${__props.testId}-${unref(TableTestIdModifiers).HEADER}`
-          }, [
-            createElementVNode("div", {
-              class: normalizeClass(["table-title", unref(hasSearchSlot) ? "border-search" : ""]),
-              "data-testid": `${__props.testId}-${unref(TableTestIdModifiers).TITLE}`
-            }, [
-              renderSlot(_ctx.$slots, "title", {}, () => [
-                createVNode(unref(Text), {
-                  size: "md",
-                  strong: ""
-                }, {
-                  default: withCtx(() => [
-                    createTextVNode(toDisplayString(__props.title), 1)
-                  ]),
-                  _: 1
-                })
-              ], true)
-            ], 10, _hoisted_4),
-            createElementVNode("div", {
-              class: "table-header-right",
-              "data-testid": `${__props.testId}-${unref(TableTestIdModifiers).HEADER_RIGHT}`
-            }, [
-              renderSlot(_ctx.$slots, "search", {}, void 0, true)
-            ], 8, _hoisted_5),
-            createElementVNode("div", {
-              class: "table-header-actions",
-              "data-testid": `${__props.testId}-${unref(TableTestIdModifiers).ACTIONS}`
-            }, [
-              renderSlot(_ctx.$slots, "table-header-actions", {}, void 0, true)
-            ], 8, _hoisted_6)
-          ], 10, _hoisted_3)) : createCommentVNode("", true),
-          createElementVNode("thead", {
-            class: normalizeClass({ sticky: __props.isSticky, isStickyHeader: __props.isStickyHeader })
-          }, [
-            createElementVNode("div", {
-              class: "sections",
-              "data-testid": `${__props.testId}-${unref(TableTestIdModifiers).SECTIONS}`
-            }, [
-              (openBlock(true), createElementBlock(Fragment, null, renderList(__props.sections, (section) => {
-                return openBlock(), createElementBlock("div", {
-                  key: section.id,
-                  class: normalizeClass(["section-container", { sticky: section.isSticky }])
-                }, [
-                  renderSlot(_ctx.$slots, `section-${section.id}`, {}, () => [
-                    createElementVNode("div", {
-                      style: normalizeStyle({ width: section.width + "px" }),
-                      class: normalizeClass({ section: true })
-                    }, [
-                      createVNode(unref(Text), { size: "xs" }, {
-                        default: withCtx(() => [
-                          createTextVNode(toDisplayString(section.title), 1)
-                        ]),
-                        _: 2
-                      }, 1024)
-                    ], 4)
-                  ], true)
-                ], 2);
-              }), 128))
-            ], 8, _hoisted_7),
-            createElementVNode("tr", null, [
-              (openBlock(true), createElementBlock(Fragment, null, renderList(__props.columns, (column) => {
-                return openBlock(), createElementBlock("th", {
-                  key: column.id,
-                  class: normalizeClass({
-                    sticky: column.isSticky,
-                    bordered: column.isBordered,
-                    isTextRight: column.isTextRight,
-                    isSortable: column.isSortable
-                  }),
-                  style: normalizeStyle(column.isSticky ? unref(columnsStickyPositions)[column.id] : null),
-                  onClick: ($event) => toggleSortOrder(column)
-                }, [
-                  createElementVNode("div", _hoisted_9, [
-                    renderSlot(_ctx.$slots, `header-${column.id}`, { column }, () => [
-                      createVNode(unref(Text), {
-                        size: "sm",
-                        strong: "",
-                        "is-truncated": false
-                      }, {
-                        default: withCtx(() => [
-                          createTextVNode(toDisplayString(column.title), 1)
-                        ]),
-                        _: 2
-                      }, 1024)
-                    ], true),
-                    column.id === __props.sort.sortBy ? (openBlock(), createBlock(TableHeaderSorter, {
-                      key: 0,
-                      class: "table-head-sorter",
-                      "sort-order": __props.sort.sortOrder
-                    }, null, 8, ["sort-order"])) : createCommentVNode("", true)
-                  ])
-                ], 14, _hoisted_8);
-              }), 128))
-            ])
-          ], 2),
-          createElementVNode("tbody", null, [
-            unref(list).length > 0 ? (openBlock(), createElementBlock("div", mergeProps({
-              key: 0,
-              class: "table-body-wrapper",
-              "data-testid": `${__props.testId}-${unref(TableTestIdModifiers).BODY_WRAPPER}`
-            }, unref(wrapperProps)), [
-              (openBlock(true), createElementBlock(Fragment, null, renderList(unref(list), (row) => {
-                return openBlock(), createElementBlock("tr", {
-                  key: row.index,
-                  class: normalizeClass(["table-row", {
-                    loading: __props.isLoading || __props.isLoading && !row.data || savingRows.value.includes(row.index),
-                    active: activeRow.value === row.index
-                  }]),
-                  onMouseenter: ($event) => activeRow.value = row.index
-                }, [
-                  withDirectives(createElementVNode("div", {
-                    ref_for: true,
-                    ref_key: "floatingActionRef",
-                    ref: floatingActionRef,
-                    style: normalizeStyle({ left: floatingActionPosition.value + "px" }),
-                    class: "floating-actions"
-                  }, [
-                    renderSlot(_ctx.$slots, "floating-actions", { row }, void 0, true)
-                  ], 4), [
-                    [
-                      vShow,
-                      _ctx.$slots["floating-actions"] && activeRow.value === row.index && !__props.isLoading
-                    ]
-                  ]),
-                  (openBlock(true), createElementBlock(Fragment, null, renderList(row.data, (cell, cellIndex) => {
-                    return openBlock(), createElementBlock("td", {
-                      key: cellIndex,
-                      class: normalizeClass({
-                        sticky: __props.columns[cellIndex].isSticky,
-                        bordered: __props.columns[cellIndex].isBordered,
-                        isTextRight: __props.columns[cellIndex].isTextRight
-                      }),
-                      style: normalizeStyle(
-                        __props.columns[cellIndex].isSticky ? unref(columnsStickyPositions)[__props.columns[cellIndex].id] : null
-                      )
-                    }, [
-                      !__props.isLoading || __props.isLoading && !!cell ? (openBlock(), createElementBlock("div", {
-                        key: 0,
-                        class: normalizeClass({
-                          last: cellIndex === row.data.length - 1,
-                          "table-cell": true,
-                          floating: _ctx.$slots["floating-actions"]
-                        })
-                      }, [
-                        renderSlot(_ctx.$slots, `cell-${__props.columns[cellIndex].id}`, {
-                          cell,
-                          isLoading: savingRows.value.includes(row.index),
-                          cellIndex,
-                          row,
-                          rowIndex: row.index
-                        }, () => [
-                          createVNode(unref(Text), { size: "sm" }, {
-                            default: withCtx(() => [
-                              createTextVNode(toDisplayString(cell), 1)
-                            ]),
-                            _: 2
-                          }, 1024)
-                        ], true)
-                      ], 2)) : renderSlot(_ctx.$slots, "loader", { key: 1 }, () => [
-                        createVNode(unref(Skeleton), { round: "" })
-                      ], true)
-                    ], 6);
-                  }), 128))
-                ], 42, _hoisted_11);
-              }), 128))
-            ], 16, _hoisted_10)) : (openBlock(), createElementBlock("div", _hoisted_12, [
-              renderSlot(_ctx.$slots, "empty-state", {}, () => [
-                createVNode(unref(EmptyState), {
-                  title: __props.emptyStateTitle,
-                  subtitle: __props.emptyStateSubtitle,
-                  "test-id": `${__props.testId}-${unref(TableTestIdModifiers).EMPTY_STATE}`
-                }, null, 8, ["title", "subtitle", "test-id"])
-              ], true)
-            ]))
-          ]),
-          unref(list).length > 0 ? (openBlock(), createElementBlock("tfoot", _hoisted_13)) : createCommentVNode("", true)
-        ], 44, _hoisted_2),
-        createVNode(unref(ScrollButton), {
-          show: unref(showBackToTopButton),
-          onScrolled: scrollToTop
-        }, null, 8, ["show"])
-      ], 40, _hoisted_1);
-    };
-  }
-});
-var Table = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-37cabae5"]]);
-
-export { Table as default };

package/components/table/TableHeaderSorter.vue.js

@@ -1,29 +0,0 @@
-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-cells/Editable.vue.js

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

package/components/tabs/Tabs.vue.js

@@ -1,129 +0,0 @@
-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/Icon.vue.js';
-/* empty css                                                      */
-import "../../Tabs.vue_vue_type_style_index_0_scoped_true_lang.css";
-const _withScopeId = (n) => (pushScopeId("data-v-c22c2836"), 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"
-};
-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) => ({
-      "99d50838": unref(selectedTabPosition),
-      "1eedbceb": unref(selectedTabWidth),
-      "c715bc60": unref(selectedTabCenter),
-      "e8e3bca4": 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-c22c2836"]]);
-
-export { Tabs as default };