@rotki/ui-library 2.12.1 → 2.13.0

package/dist/components/tables/RuiTablePagination.vue.d.ts

@@ -5,19 +5,19 @@ export interface TablePaginationData {
     limits?: number[];
 }
 export interface Props {
-    modelValue: TablePaginationData;
     dense?: boolean;
     disablePerPage?: boolean;
     loading?: boolean;
 }
-declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    "update:model-value": (value: TablePaginationData) => any;
-}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
-    "onUpdate:model-value"?: ((value: TablePaginationData) => any) | undefined;
-}>, {
-    dense: boolean;
-    loading: boolean;
-    disablePerPage: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+type __VLS_Props = Props;
+type __VLS_ModelProps = {
+    modelValue: TablePaginationData;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: TablePaginationData) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: TablePaginationData) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/components/tables/RuiTablePagination.vue2.js

@@ -1,28 +1,30 @@
-import { defineComponent, toRefs, computed, createElementBlock, openBlock, normalizeClass, createElementVNode, createVNode, unref, isRef, createBlock, createCommentVNode, toDisplayString, withCtx } from "vue";
+import { defineComponent, useModel, computed, openBlock, createElementBlock, normalizeClass, createElementVNode, createVNode, unref, isRef, createBlock, createCommentVNode, toDisplayString, withCtx, mergeModels } from "vue";
 import RuiButton from "../buttons/button/RuiButton.vue.js";
 import RuiMenuSelect from "../forms/select/RuiMenuSelect.vue.js";
 import RuiIcon from "../icons/RuiIcon.vue.js";
 import { useTable } from "../../composables/defaults/table.js";
-import { get } from "@vueuse/shared";
 import { formatInteger } from "../../utils/helpers.js";
+import { get, set } from "@vueuse/shared";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "RuiTablePagination",
-  props: {
-    modelValue: {},
+  props: /* @__PURE__ */ mergeModels({
     dense: { type: Boolean, default: false },
     disablePerPage: { type: Boolean, default: false },
     loading: { type: Boolean, default: false }
-  },
-  emits: ["update:model-value"],
-  setup(__props, { emit: __emit }) {
-    const props = __props;
-    const emit = __emit;
-    const { modelValue } = toRefs(props);
+  }, {
+    "modelValue": { required: true },
+    "modelModifiers": {}
+  }),
+  emits: ["update:modelValue"],
+  setup(__props) {
+    const modelValue = useModel(__props, "modelValue");
     const tableDefaults = useTable();
-    const limits = computed(() => (get(modelValue).limits ?? get(tableDefaults.limits)).map((limit) => ({ limit })));
+    const limits = computed(
+      () => (get(modelValue).limits ?? get(tableDefaults.limits)).map((limit) => ({ limit }))
+    );
     const currentLimit = computed({
       get: () => get(modelValue).limit,
-      set: (limit) => emit("update:model-value", {
+      set: (limit) => set(modelValue, {
         ...get(modelValue),
         limit: Number(limit),
         page: 1
@@ -36,8 +38,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     });
     const ranges = computed(() => {
       const segments = [];
-      for (let page = 1; page <= get(pages); page++)
-        segments.push({ page, text: pageRangeText(page) });
+      for (let page = 1; page <= get(pages); page++) segments.push({ page, text: pageRangeText(page) });
       return segments;
     });
     const indicatorText = computed(() => {
@@ -46,7 +47,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     });
     const currentRange = computed({
       get: () => get(modelValue).page,
-      set: (page) => emit("update:model-value", {
+      set: (page) => set(modelValue, {
         ...get(modelValue),
         page
       })
@@ -54,7 +55,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const hasPrev = computed(() => get(modelValue).page > 1);
     const hasNext = computed(() => get(pages) > get(modelValue).page);
     function goToPage(page) {
-      emit("update:model-value", {
+      set(modelValue, {
         ...get(modelValue),
         page
       });
@@ -108,7 +109,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             "key-attr": "limit",
             "text-attr": "limit",
             "hide-details": "",
-            dense: ""
+            dense: "",
+            "data-cy": "table-pagination-limit"
           }, null, 8, ["modelValue", "options", "disabled"])
         ], 2),
         createElementVNode("div", {
@@ -128,20 +130,23 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             "key-attr": "page",
             "text-attr": "text",
             "hide-details": "",
-            dense: ""
+            dense: "",
+            "data-cy": "table-pagination-ranges"
           }, null, 8, ["modelValue", "options", "disabled"])) : createCommentVNode("", true),
           createElementVNode("span", {
             class: normalizeClass(_ctx.$style.indicator)
           }, toDisplayString(unref(indicatorText)), 3)
         ], 2),
         createElementVNode("div", {
-          class: normalizeClass(_ctx.$style.navigation)
+          class: normalizeClass(_ctx.$style.navigation),
+          "data-cy": "table-pagination-navigation"
         }, [
           createVNode(RuiButton, {
             size: __props.dense ? "sm" : void 0,
             disabled: !unref(hasPrev) || __props.loading,
             variant: "text",
             icon: "",
+            "data-cy": "table-pagination-first",
             onClick: _cache[2] || (_cache[2] = ($event) => onFirst())
           }, {
             default: withCtx(() => [
@@ -154,6 +159,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             disabled: !unref(hasPrev) || __props.loading,
             variant: "text",
             icon: "",
+            "data-cy": "table-pagination-prev",
             onClick: _cache[3] || (_cache[3] = ($event) => onPrev())
           }, {
             default: withCtx(() => [
@@ -166,6 +172,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             disabled: !unref(hasNext) || __props.loading,
             variant: "text",
             icon: "",
+            "data-cy": "table-pagination-next",
             onClick: _cache[4] || (_cache[4] = ($event) => onNext())
           }, {
             default: withCtx(() => [
@@ -178,6 +185,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             disabled: !unref(hasNext) || __props.loading,
             variant: "text",
             icon: "",
+            "data-cy": "table-pagination-last",
             onClick: _cache[5] || (_cache[5] = ($event) => onLast())
           }, {
             default: withCtx(() => [

package/dist/components/tables/RuiTablePagination.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiTablePagination.vue2.js","sources":["../../../src/components/tables/RuiTablePagination.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport RuiMenuSelect from '@/components/forms/select/RuiMenuSelect.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\n\nexport interface TablePaginationData {\n  page: number;\n  total: number;\n  limit: number;\n  limits?: number[];\n}\n\nexport interface Props {\n  modelValue: TablePaginationData;\n  dense?: boolean;\n  disablePerPage?: boolean;\n  loading?: boolean;\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  dense: false,\n  loading: false,\n  disablePerPage: false,\n});\n\nconst emit = defineEmits<{\n  (e: 'update:model-value', value: TablePaginationData): void;\n}>();\n\nconst { modelValue } = toRefs(props);\n\nconst tableDefaults = useTable();\n\nconst limits = computed(() => (get(modelValue).limits ?? get(tableDefaults.limits)).map(limit => ({ limit })));\n\nconst currentLimit = computed({\n  get: () => get(modelValue).limit,\n  set: limit =>\n    emit('update:model-value', {\n      ...get(modelValue),\n      limit: Number(limit),\n      page: 1,\n    }),\n});\n\nconst pages = computed(() => {\n  const { limit, total } = get(modelValue);\n  if (!total)\n    return 0;\n\n  return Math.ceil(total / limit);\n});\n\nconst ranges = computed(() => {\n  const segments = [];\n\n  for (let page = 1; page <= get(pages); page++)\n    segments.push({ page, text: pageRangeText(page) });\n\n  return segments;\n});\n\nconst indicatorText = computed(() => {\n  const { total } = get(modelValue);\n  return `${!total ? '0 ' : ''}of ${formatInteger(total)}`;\n});\n\nconst currentRange = computed({\n  get: () => get(modelValue).page,\n  set: page =>\n    emit('update:model-value', {\n      ...get(modelValue),\n      page,\n    }),\n});\n\nconst hasPrev = computed(() => get(modelValue).page > 1);\nconst hasNext = computed(() => get(pages) > get(modelValue).page);\n\nfunction goToPage(page: number) {\n  emit('update:model-value', {\n    ...get(modelValue),\n    page,\n  });\n}\n\nfunction pageRangeText(page: number) {\n  const { limit, total } = get(modelValue);\n  return `${formatInteger((page - 1) * limit + 1)} - ${formatInteger(\n    Math.min(page * limit, total),\n  )}`;\n}\n\nfunction onNavigate(delta: number) {\n  goToPage(get(modelValue).page + delta);\n}\n\nfunction onPrev() {\n  if (!get(hasPrev))\n    return;\n\n  onNavigate(-1);\n}\n\nfunction onNext() {\n  if (!get(hasNext))\n    return;\n\n  onNavigate(1);\n}\n\nfunction onFirst() {\n  if (!get(hasPrev))\n    return;\n\n  goToPage(1);\n}\n\nfunction onLast() {\n  if (!get(hasNext))\n    return;\n\n  goToPage(get(pages));\n}\n</script>\n\n<template>\n  <div :class=\"[$style.wrapper, { [$style['wrapper-dense'] ?? '']: dense }]\">\n    <div :class=\"$style.limit\">\n      <span :class=\"$style.limit__text\">Rows per page:</span>\n      <RuiMenuSelect\n        v-model=\"currentLimit\"\n        :options=\"limits\"\n        :disabled=\"loading || disablePerPage\"\n        label-class=\"!text-xs !min-h-8\"\n        name=\"limit\"\n        key-attr=\"limit\"\n        text-attr=\"limit\"\n        hide-details\n        dense\n      />\n    </div>\n    <div :class=\"$style.ranges\">\n      <span :class=\"$style.ranges__text\">Items #</span>\n      <RuiMenuSelect\n        v-if=\"ranges.length > 0\"\n        v-model=\"currentRange\"\n        :options=\"ranges\"\n        :disabled=\"loading\"\n        label-class=\"!text-xs !min-h-8\"\n        name=\"ranges\"\n        key-attr=\"page\"\n        text-attr=\"text\"\n        hide-details\n        dense\n      />\n      <span :class=\"$style.indicator\">\n        {{ indicatorText }}\n      </span>\n    </div>\n    <div :class=\"$style.navigation\">\n      <RuiButton\n        :size=\"dense ? 'sm' : undefined\"\n        :disabled=\"!hasPrev || loading\"\n        variant=\"text\"\n        icon\n        @click=\"onFirst()\"\n      >\n        <RuiIcon name=\"lu-chevrons-left\" />\n      </RuiButton>\n      <RuiButton\n        :size=\"dense ? 'sm' : undefined\"\n        :disabled=\"!hasPrev || loading\"\n        variant=\"text\"\n        icon\n        @click=\"onPrev()\"\n      >\n        <RuiIcon name=\"lu-chevron-left\" />\n      </RuiButton>\n      <RuiButton\n        :size=\"dense ? 'sm' : undefined\"\n        :disabled=\"!hasNext || loading\"\n        variant=\"text\"\n        icon\n        @click=\"onNext()\"\n      >\n        <RuiIcon name=\"lu-chevron-right\" />\n      </RuiButton>\n      <RuiButton\n        :size=\"dense ? 'sm' : undefined\"\n        :disabled=\"!hasNext || loading\"\n        variant=\"text\"\n        icon\n        @click=\"onLast()\"\n      >\n        <RuiIcon name=\"lu-chevrons-right\" />\n      </RuiButton>\n    </div>\n  </div>\n</template>\n\n<style module lang=\"scss\">\n.wrapper {\n  @apply relative flex flex-wrap items-center justify-end gap-x-4 gap-y-0;\n\n  .limit {\n    @apply flex items-center space-x-2 text-caption;\n\n    &__text {\n      @apply text-rui-text-secondary whitespace-nowrap py-3;\n    }\n  }\n\n  .ranges {\n    @apply flex items-center space-x-2 text-caption pr-2;\n\n    &__text {\n      @apply text-rui-text-secondary whitespace-nowrap py-3;\n    }\n  }\n\n  .indicator {\n    @apply text-rui-text text-caption whitespace-nowrap;\n  }\n\n  .navigation {\n    @apply flex items-center;\n  }\n\n  &-dense {\n    @apply gap-x-2;\n  }\n}\n</style>\n"],"names":["_createElementBlock","$style","_createElementVNode","_normalizeClass","_createVNode","_unref","_createBlock"],"mappings":"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"}
+{"version":3,"file":"RuiTablePagination.vue2.js","sources":["../../../src/components/tables/RuiTablePagination.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport RuiMenuSelect from '@/components/forms/select/RuiMenuSelect.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { useTable } from '@/composables/defaults/table';\nimport { formatInteger } from '@/utils/helpers';\n\nexport interface TablePaginationData {\n  page: number;\n  total: number;\n  limit: number;\n  limits?: number[];\n}\n\nexport interface Props {\n  dense?: boolean;\n  disablePerPage?: boolean;\n  loading?: boolean;\n}\n\nconst modelValue = defineModel<TablePaginationData>({ required: true });\n\nconst { dense = false, loading = false, disablePerPage = false } = defineProps<Props>();\n\nconst tableDefaults = useTable();\n\nconst limits = computed<{ limit: number }[]>(() =>\n  (get(modelValue).limits ?? get(tableDefaults.limits)).map(limit => ({ limit })),\n);\n\nconst currentLimit = computed<number>({\n  get: () => get(modelValue).limit,\n  set: limit =>\n    set(modelValue, {\n      ...get(modelValue),\n      limit: Number(limit),\n      page: 1,\n    }),\n});\n\nconst pages = computed<number>(() => {\n  const { limit, total } = get(modelValue);\n  if (!total)\n    return 0;\n\n  return Math.ceil(total / limit);\n});\n\nconst ranges = computed<{ page: number; text: string }[]>(() => {\n  const segments = [];\n\n  for (let page = 1; page <= get(pages); page++) segments.push({ page, text: pageRangeText(page) });\n\n  return segments;\n});\n\nconst indicatorText = computed<string>(() => {\n  const { total } = get(modelValue);\n  return `${!total ? '0 ' : ''}of ${formatInteger(total)}`;\n});\n\nconst currentRange = computed<number>({\n  get: () => get(modelValue).page,\n  set: page =>\n    set(modelValue, {\n      ...get(modelValue),\n      page,\n    }),\n});\n\nconst hasPrev = computed<boolean>(() => get(modelValue).page > 1);\nconst hasNext = computed<boolean>(() => get(pages) > get(modelValue).page);\n\nfunction goToPage(page: number): void {\n  set(modelValue, {\n    ...get(modelValue),\n    page,\n  });\n}\n\nfunction pageRangeText(page: number): string {\n  const { limit, total } = get(modelValue);\n  return `${formatInteger((page - 1) * limit + 1)} - ${formatInteger(\n    Math.min(page * limit, total),\n  )}`;\n}\n\nfunction onNavigate(delta: number): void {\n  goToPage(get(modelValue).page + delta);\n}\n\nfunction onPrev(): void {\n  if (!get(hasPrev))\n    return;\n\n  onNavigate(-1);\n}\n\nfunction onNext(): void {\n  if (!get(hasNext))\n    return;\n\n  onNavigate(1);\n}\n\nfunction onFirst(): void {\n  if (!get(hasPrev))\n    return;\n\n  goToPage(1);\n}\n\nfunction onLast(): void {\n  if (!get(hasNext))\n    return;\n\n  goToPage(get(pages));\n}\n</script>\n\n<template>\n  <div :class=\"[$style.wrapper, { [$style['wrapper-dense'] ?? '']: dense }]\">\n    <div :class=\"$style.limit\">\n      <span :class=\"$style.limit__text\">Rows per page:</span>\n      <RuiMenuSelect\n        v-model=\"currentLimit\"\n        :options=\"limits\"\n        :disabled=\"loading || disablePerPage\"\n        label-class=\"!text-xs !min-h-8\"\n        name=\"limit\"\n        key-attr=\"limit\"\n        text-attr=\"limit\"\n        hide-details\n        dense\n        data-cy=\"table-pagination-limit\"\n      />\n    </div>\n    <div :class=\"$style.ranges\">\n      <span :class=\"$style.ranges__text\">Items #</span>\n      <RuiMenuSelect\n        v-if=\"ranges.length > 0\"\n        v-model=\"currentRange\"\n        :options=\"ranges\"\n        :disabled=\"loading\"\n        label-class=\"!text-xs !min-h-8\"\n        name=\"ranges\"\n        key-attr=\"page\"\n        text-attr=\"text\"\n        hide-details\n        dense\n        data-cy=\"table-pagination-ranges\"\n      />\n      <span :class=\"$style.indicator\">\n        {{ indicatorText }}\n      </span>\n    </div>\n    <div\n      :class=\"$style.navigation\"\n      data-cy=\"table-pagination-navigation\"\n    >\n      <RuiButton\n        :size=\"dense ? 'sm' : undefined\"\n        :disabled=\"!hasPrev || loading\"\n        variant=\"text\"\n        icon\n        data-cy=\"table-pagination-first\"\n        @click=\"onFirst()\"\n      >\n        <RuiIcon name=\"lu-chevrons-left\" />\n      </RuiButton>\n      <RuiButton\n        :size=\"dense ? 'sm' : undefined\"\n        :disabled=\"!hasPrev || loading\"\n        variant=\"text\"\n        icon\n        data-cy=\"table-pagination-prev\"\n        @click=\"onPrev()\"\n      >\n        <RuiIcon name=\"lu-chevron-left\" />\n      </RuiButton>\n      <RuiButton\n        :size=\"dense ? 'sm' : undefined\"\n        :disabled=\"!hasNext || loading\"\n        variant=\"text\"\n        icon\n        data-cy=\"table-pagination-next\"\n        @click=\"onNext()\"\n      >\n        <RuiIcon name=\"lu-chevron-right\" />\n      </RuiButton>\n      <RuiButton\n        :size=\"dense ? 'sm' : undefined\"\n        :disabled=\"!hasNext || loading\"\n        variant=\"text\"\n        icon\n        data-cy=\"table-pagination-last\"\n        @click=\"onLast()\"\n      >\n        <RuiIcon name=\"lu-chevrons-right\" />\n      </RuiButton>\n    </div>\n  </div>\n</template>\n\n<style module lang=\"scss\">\n.wrapper {\n  @apply relative flex flex-wrap items-center justify-end gap-x-4 gap-y-0;\n\n  .limit {\n    @apply flex items-center space-x-2 text-caption;\n\n    &__text {\n      @apply text-rui-text-secondary whitespace-nowrap py-3;\n    }\n  }\n\n  .ranges {\n    @apply flex items-center space-x-2 text-caption pr-2;\n\n    &__text {\n      @apply text-rui-text-secondary whitespace-nowrap py-3;\n    }\n  }\n\n  .indicator {\n    @apply text-rui-text text-caption whitespace-nowrap;\n  }\n\n  .navigation {\n    @apply flex items-center;\n  }\n\n  &-dense {\n    @apply gap-x-2;\n  }\n}\n</style>\n"],"names":["_useModel","_createElementBlock","$style","_createElementVNode","_normalizeClass","_createVNode","_unref","_createBlock"],"mappings":"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"}

package/dist/components/tabs/tab/RuiTab.vue.d.ts

@@ -1,5 +1,5 @@
-import type { RouteLocationRaw } from 'vue-router';
 import type { ContextColorsType } from '../../../consts/colors.js';
+import { type RouteLocationRaw } from 'vue-router';
 export interface Props {
     color?: ContextColorsType;
     disabled?: boolean;
@@ -21,26 +21,11 @@ type __VLS_Slots = {
     prepend?: (props?: object) => any;
     append?: (props?: object) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     click: (value: string | number) => any;
 }, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
     onClick?: ((value: string | number) => any) | undefined;
-}>, {
-    value: number | string;
-    color: ContextColorsType;
-    link: boolean;
-    disabled: boolean;
-    active: boolean;
-    vertical: boolean;
-    align: "start" | "center" | "end";
-    target: string;
-    to: RouteLocationRaw;
-    exact: boolean;
-    grow: boolean;
-    activeClass: string;
-    exactPath: boolean;
-    indicatorPosition: "start" | "end";
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/components/tabs/tab/RuiTab.vue2.js

@@ -1,7 +1,6 @@
-import { defineComponent, useSlots, toRefs, useCssModule, computed, resolveComponent, createBlock, unref, openBlock, mergeProps, createSlots, renderList, withCtx, renderSlot, normalizeProps, guardReactiveProps, createVNode } from "vue";
+import { defineComponent, useSlots, useCssModule, computed, openBlock, createBlock, mergeProps, unref, createSlots, withCtx, renderSlot, createVNode, useId } from "vue";
+import { RouterLink } from "vue-router";
 import RuiButton from "../../buttons/button/RuiButton.vue.js";
-import { generateId } from "../../../utils/generate-id.js";
-import { get } from "@vueuse/shared";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{
     name: "RuiTab",
@@ -9,10 +8,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   },
   __name: "RuiTab",
   props: {
-    color: { default: void 0 },
+    color: {},
     disabled: { type: Boolean, default: false },
     grow: { type: Boolean, default: false },
-    value: { default: generateId() },
+    value: { default: () => useId() },
     active: { type: Boolean, default: false },
     activeClass: { default: "" },
     link: { type: Boolean, default: false },
@@ -26,65 +25,86 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   },
   emits: ["click"],
   setup(__props, { emit: __emit }) {
-    const props = __props;
     const emit = __emit;
     const slots = useSlots();
-    const { target, grow, active, activeClass, disabled, vertical, align, value, indicatorPosition } = toRefs(props);
     const css = useCssModule();
-    const isSelf = computed(() => get(target) === "_self");
+    const isSelf = computed(() => __props.target === "_self");
     const tabClass = computed(() => [
       css.tab,
-      css[`tab--${get(align)}`],
-      css[`tab-indicator--${get(indicatorPosition)}`],
+      css[`tab--${__props.align}`],
+      css[`tab-indicator--${__props.indicatorPosition}`],
       {
-        [css["tab--grow"] ?? ""]: get(grow),
-        [`${css["tab--active"]} active-tab ${get(activeClass)}`]: get(active),
-        [css["tab--disabled"] ?? ""]: get(disabled),
-        [css["tab--vertical"] ?? ""]: get(vertical)
+        [css["tab--grow"] ?? ""]: __props.grow,
+        [`${css["tab--active"]} active-tab ${__props.activeClass}`]: __props.active,
+        [css["tab--disabled"] ?? ""]: __props.disabled,
+        [css["tab--vertical"] ?? ""]: __props.vertical
       }
     ]);
     function click() {
-      emit("click", get(value));
+      emit("click", __props.value);
     }
     return (_ctx, _cache) => {
-      const _component_RouterLink = resolveComponent("RouterLink");
-      return unref(disabled) ? (openBlock(), createBlock(RuiButton, mergeProps({
+      return __props.disabled ? (openBlock(), createBlock(RuiButton, mergeProps({
         key: 0,
         variant: "text",
         disabled: "",
         class: unref(tabClass),
         "hide-focus-indicator": "",
         tabindex: "-1",
-        role: "tab"
-      }, _ctx.$attrs), createSlots({ _: 2 }, [
-        renderList(slots, (_, name) => {
-          return {
-            name,
-            fn: withCtx((slotData) => [
-              renderSlot(_ctx.$slots, name, normalizeProps(guardReactiveProps(slotData)))
-            ])
-          };
-        })
-      ]), 1040, ["class"])) : !__props.link ? (openBlock(), createBlock(RuiButton, mergeProps({
+        role: "tab",
+        "aria-selected": __props.active
+      }, _ctx.$attrs), createSlots({
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default")
+        ]),
+        _: 2
+      }, [
+        slots.prepend ? {
+          name: "prepend",
+          fn: withCtx(() => [
+            renderSlot(_ctx.$slots, "prepend")
+          ]),
+          key: "0"
+        } : void 0,
+        slots.append ? {
+          name: "append",
+          fn: withCtx(() => [
+            renderSlot(_ctx.$slots, "append")
+          ]),
+          key: "1"
+        } : void 0
+      ]), 1040, ["class", "aria-selected"])) : !__props.link ? (openBlock(), createBlock(RuiButton, mergeProps({
         key: 1,
         class: unref(tabClass),
-        color: unref(active) ? __props.color : void 0,
-        role: "tab"
+        color: __props.active ? __props.color : void 0,
+        role: "tab",
+        "aria-selected": __props.active
       }, _ctx.$attrs, {
         tabindex: "-1",
         "hide-focus-indicator": "",
         variant: "text",
         onClick: _cache[0] || (_cache[0] = ($event) => click())
-      }), createSlots({ _: 2 }, [
-        renderList(slots, (_, name) => {
-          return {
-            name,
-            fn: withCtx((slotData) => [
-              renderSlot(_ctx.$slots, name, normalizeProps(guardReactiveProps(slotData)))
-            ])
-          };
-        })
-      ]), 1040, ["class", "color"])) : (openBlock(), createBlock(_component_RouterLink, {
+      }), createSlots({
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default")
+        ]),
+        _: 2
+      }, [
+        slots.prepend ? {
+          name: "prepend",
+          fn: withCtx(() => [
+            renderSlot(_ctx.$slots, "prepend")
+          ]),
+          key: "0"
+        } : void 0,
+        slots.append ? {
+          name: "append",
+          fn: withCtx(() => [
+            renderSlot(_ctx.$slots, "append")
+          ]),
+          key: "1"
+        } : void 0
+      ]), 1040, ["class", "color", "aria-selected"])) : (openBlock(), createBlock(unref(RouterLink), {
         key: 2,
         to: __props.to,
         exact: __props.exact,
@@ -99,10 +119,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 [`${unref(css)["tab--active"]} active-tab-link`]: __props.exact ? isExactActive : isActive
               }
             ],
-            color: unref(active) || (__props.exact ? isExactActive : isActive) ? __props.color : void 0,
+            color: __props.active || (__props.exact ? isExactActive : isActive) ? __props.color : void 0,
             href: unref(isSelf) ? void 0 : href,
-            target: unref(target),
+            target: __props.target,
             role: "tab",
+            "aria-selected": __props.active || (__props.exact ? isExactActive : isActive),
             "no-outline": "",
             tag: "a",
             "hide-focus-indicator": "",
@@ -113,16 +134,27 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               click();
               unref(isSelf) ? navigate($event) : void 0;
             }
-          }), createSlots({ _: 2 }, [
-            renderList(slots, (_, name) => {
-              return {
-                name,
-                fn: withCtx((slotData) => [
-                  renderSlot(_ctx.$slots, name, normalizeProps(guardReactiveProps(slotData)))
-                ])
-              };
-            })
-          ]), 1040, ["class", "color", "href", "target", "onClick"])
+          }), createSlots({
+            default: withCtx(() => [
+              renderSlot(_ctx.$slots, "default")
+            ]),
+            _: 2
+          }, [
+            slots.prepend ? {
+              name: "prepend",
+              fn: withCtx(() => [
+                renderSlot(_ctx.$slots, "prepend")
+              ]),
+              key: "0"
+            } : void 0,
+            slots.append ? {
+              name: "append",
+              fn: withCtx(() => [
+                renderSlot(_ctx.$slots, "append")
+              ]),
+              key: "1"
+            } : void 0
+          ]), 1040, ["class", "color", "href", "target", "aria-selected", "onClick"])
         ]),
         _: 3
       }, 8, ["to", "exact", "exact-path"]));

package/dist/components/tabs/tab/RuiTab.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiTab.vue2.js","sources":["../../../../src/components/tabs/tab/RuiTab.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { RouteLocationRaw } from 'vue-router';\nimport type { ContextColorsType } from '@/consts/colors';\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\n\nexport interface Props {\n  color?: ContextColorsType;\n  disabled?: boolean;\n  grow?: boolean;\n  value?: number | string;\n  active?: boolean;\n  activeClass?: string;\n  link?: boolean;\n  target?: string;\n  to?: RouteLocationRaw;\n  exact?: boolean;\n  exactPath?: boolean;\n  vertical?: boolean;\n  align?: 'start' | 'center' | 'end';\n  indicatorPosition?: 'start' | 'end';\n}\n\ndefineOptions({\n  name: 'RuiTab',\n  inheritAttrs: false,\n});\n\nconst props = withDefaults(defineProps<Props>(), {\n  color: undefined,\n  disabled: false,\n  grow: false,\n  value: generateId(),\n  active: false,\n  activeClass: '',\n  link: false,\n  to: '',\n  target: '_self',\n  exact: false,\n  exactPath: false,\n  vertical: false,\n  align: 'center',\n  indicatorPosition: 'end',\n});\n\nconst emit = defineEmits<{\n  (e: 'click', value: string | number): void;\n}>();\n\nconst slots = defineSlots<{\n  default?: (props?: object) => any;\n  prepend?: (props?: object) => any;\n  append?: (props?: object) => any;\n}>();\n\nconst { target, grow, active, activeClass, disabled, vertical, align, value, indicatorPosition }\n  = toRefs(props);\n\nconst css = useCssModule();\n\nconst isSelf = computed(() => get(target) === '_self');\n\nconst tabClass = computed(() => [\n  css.tab,\n  css[`tab--${get(align)}`],\n  css[`tab-indicator--${get(indicatorPosition)}`],\n  {\n    [css['tab--grow'] ?? '']: get(grow),\n    [`${css['tab--active']} active-tab ${get(activeClass)}`]: get(active),\n    [css['tab--disabled'] ?? '']: get(disabled),\n    [css['tab--vertical'] ?? '']: get(vertical),\n  },\n]);\n\nfunction click() {\n  emit('click', get(value));\n}\n</script>\n\n<template>\n  <RuiButton\n    v-if=\"disabled\"\n    variant=\"text\"\n    disabled\n    :class=\"tabClass\"\n    hide-focus-indicator\n    tabindex=\"-1\"\n    role=\"tab\"\n    v-bind=\"$attrs\"\n  >\n    <template\n      v-for=\"(_, name) in slots\"\n      #[name]=\"slotData\"\n    >\n      <slot\n        :name=\"name\"\n        v-bind=\"slotData\"\n      />\n    </template>\n  </RuiButton>\n  <RuiButton\n    v-else-if=\"!link\"\n    :class=\"tabClass\"\n    :color=\"active ? color : undefined\"\n    role=\"tab\"\n    v-bind=\"$attrs\"\n    tabindex=\"-1\"\n    hide-focus-indicator\n    variant=\"text\"\n    @click=\"click()\"\n  >\n    <template\n      v-for=\"(_, name) in slots\"\n      #[name]=\"slotData\"\n    >\n      <slot\n        :name=\"name\"\n        v-bind=\"slotData\"\n      />\n    </template>\n  </RuiButton>\n  <RouterLink\n    v-else\n    #default=\"{ href, navigate, isActive, isExactActive }\"\n    :to=\"to\"\n    :exact=\"exact\"\n    :exact-path=\"exactPath\"\n    custom\n  >\n    <RuiButton\n      :class=\"[\n        ...tabClass,\n        {\n          [`${css['tab--active']} active-tab-link`]: exact\n            ? isExactActive\n            : isActive,\n        },\n      ]\"\n      :color=\"active || (exact ? isExactActive : isActive) ? color : undefined\"\n      :href=\"isSelf ? undefined : href\"\n      :target=\"target\"\n      role=\"tab\"\n      no-outline\n      tag=\"a\"\n      hide-focus-indicator\n      tabindex=\"-1\"\n      v-bind=\"$attrs\"\n      variant=\"text\"\n      @click=\"\n        click();\n        isSelf ? navigate($event) : undefined;\n      \"\n    >\n      <template\n        v-for=\"(_, name) in slots\"\n        #[name]=\"slotData\"\n      >\n        <slot\n          :name=\"name\"\n          v-bind=\"slotData\"\n        />\n      </template>\n    </RuiButton>\n  </RouterLink>\n</template>\n\n<style lang=\"scss\" module>\n.tab {\n  @apply h-full min-w-[90px] max-w-[360px] flex items-center rounded-none cursor-pointer relative whitespace-nowrap shrink-0;\n  @apply px-4 #{!important};\n\n  &--vertical {\n    @apply h-[2.625rem] w-full max-w-none;\n  }\n\n  &--grow {\n    @apply grow max-w-none;\n  }\n\n  &--active {\n    &:after {\n      content: '';\n      @apply absolute h-0 w-full bottom-0 left-0 border-b-2 border-current;\n    }\n\n    &.tab-indicator--start {\n      &:after {\n        @apply top-0 bottom-auto;\n      }\n    }\n\n    &.tab--vertical {\n      &:after {\n        @apply h-full w-0 right-0 left-auto border-b-0 border-r-2;\n      }\n\n      &.tab-indicator--start {\n        &:after {\n          @apply left-0 right-auto;\n        }\n      }\n    }\n  }\n\n  &--disabled {\n    @apply cursor-not-allowed;\n  }\n\n  &--start {\n    @apply justify-start text-left rtl:justify-end rtl:text-right;\n  }\n\n  &--center {\n    @apply justify-center text-center;\n  }\n\n  &--end {\n    @apply justify-end text-right rtl:justify-start rtl:text-left;\n  }\n}\n</style>\n"],"names":["_useSlots","_unref","_openBlock","_createBlock","_mergeProps","$attrs","_createSlots","_withCtx","_renderSlot","_normalizeProps","_guardReactiveProps","_createVNode"],"mappings":"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"}
+{"version":3,"file":"RuiTab.vue2.js","sources":["../../../../src/components/tabs/tab/RuiTab.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ContextColorsType } from '@/consts/colors';\nimport { type RouteLocationRaw, RouterLink } from 'vue-router';\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\n\nexport interface Props {\n  color?: ContextColorsType;\n  disabled?: boolean;\n  grow?: boolean;\n  value?: number | string;\n  active?: boolean;\n  activeClass?: string;\n  link?: boolean;\n  target?: string;\n  to?: RouteLocationRaw;\n  exact?: boolean;\n  exactPath?: boolean;\n  vertical?: boolean;\n  align?: 'start' | 'center' | 'end';\n  indicatorPosition?: 'start' | 'end';\n}\n\ndefineOptions({\n  name: 'RuiTab',\n  inheritAttrs: false,\n});\n\nconst {\n  color,\n  disabled = false,\n  grow = false,\n  value = useId(),\n  active = false,\n  activeClass = '',\n  link = false,\n  to = '',\n  target = '_self',\n  exact = false,\n  exactPath = false,\n  vertical = false,\n  align = 'center',\n  indicatorPosition = 'end',\n} = defineProps<Props>();\n\nconst emit = defineEmits<{\n  click: [value: string | number];\n}>();\n\nconst slots = defineSlots<{\n  default?: (props?: object) => any;\n  prepend?: (props?: object) => any;\n  append?: (props?: object) => any;\n}>();\n\nconst css = useCssModule();\n\nconst isSelf = computed<boolean>(() => target === '_self');\n\nconst tabClass = computed<(string | undefined | Record<string, string | boolean>)[]>(() => [\n  css.tab,\n  css[`tab--${align}`],\n  css[`tab-indicator--${indicatorPosition}`],\n  {\n    [css['tab--grow'] ?? '']: grow,\n    [`${css['tab--active']} active-tab ${activeClass}`]: active,\n    [css['tab--disabled'] ?? '']: disabled,\n    [css['tab--vertical'] ?? '']: vertical,\n  },\n]);\n\nfunction click(): void {\n  emit('click', value);\n}\n</script>\n\n<template>\n  <RuiButton\n    v-if=\"disabled\"\n    variant=\"text\"\n    disabled\n    :class=\"tabClass\"\n    hide-focus-indicator\n    tabindex=\"-1\"\n    role=\"tab\"\n    :aria-selected=\"active\"\n    v-bind=\"$attrs\"\n  >\n    <template\n      v-if=\"slots.prepend\"\n      #prepend\n    >\n      <slot name=\"prepend\" />\n    </template>\n    <slot />\n    <template\n      v-if=\"slots.append\"\n      #append\n    >\n      <slot name=\"append\" />\n    </template>\n  </RuiButton>\n  <RuiButton\n    v-else-if=\"!link\"\n    :class=\"tabClass\"\n    :color=\"active ? color : undefined\"\n    role=\"tab\"\n    :aria-selected=\"active\"\n    v-bind=\"$attrs\"\n    tabindex=\"-1\"\n    hide-focus-indicator\n    variant=\"text\"\n    @click=\"click()\"\n  >\n    <template\n      v-if=\"slots.prepend\"\n      #prepend\n    >\n      <slot name=\"prepend\" />\n    </template>\n    <slot />\n    <template\n      v-if=\"slots.append\"\n      #append\n    >\n      <slot name=\"append\" />\n    </template>\n  </RuiButton>\n  <RouterLink\n    v-else\n    #default=\"{ href, navigate, isActive, isExactActive }\"\n    :to=\"to\"\n    :exact=\"exact\"\n    :exact-path=\"exactPath\"\n    custom\n  >\n    <RuiButton\n      :class=\"[\n        ...tabClass,\n        {\n          [`${css['tab--active']} active-tab-link`]: exact ? isExactActive : isActive,\n        },\n      ]\"\n      :color=\"active || (exact ? isExactActive : isActive) ? color : undefined\"\n      :href=\"isSelf ? undefined : href\"\n      :target=\"target\"\n      role=\"tab\"\n      :aria-selected=\"active || (exact ? isExactActive : isActive)\"\n      no-outline\n      tag=\"a\"\n      hide-focus-indicator\n      tabindex=\"-1\"\n      v-bind=\"$attrs\"\n      variant=\"text\"\n      @click=\"\n        click();\n        isSelf ? navigate($event) : undefined;\n      \"\n    >\n      <template\n        v-if=\"slots.prepend\"\n        #prepend\n      >\n        <slot name=\"prepend\" />\n      </template>\n      <slot />\n      <template\n        v-if=\"slots.append\"\n        #append\n      >\n        <slot name=\"append\" />\n      </template>\n    </RuiButton>\n  </RouterLink>\n</template>\n\n<style lang=\"scss\" module>\n.tab {\n  @apply h-full min-w-[90px] max-w-[360px] flex items-center rounded-none cursor-pointer relative whitespace-nowrap shrink-0;\n  @apply px-4 #{!important};\n\n  &--vertical {\n    @apply h-[2.625rem] w-full max-w-none;\n  }\n\n  &--grow {\n    @apply grow max-w-none;\n  }\n\n  &--active {\n    &:after {\n      content: '';\n      @apply absolute h-0 w-full bottom-0 left-0 border-b-2 border-current;\n    }\n\n    &.tab-indicator--start {\n      &:after {\n        @apply top-0 bottom-auto;\n      }\n    }\n\n    &.tab--vertical {\n      &:after {\n        @apply h-full w-0 right-0 left-auto border-b-0 border-r-2;\n      }\n\n      &.tab-indicator--start {\n        &:after {\n          @apply left-0 right-auto;\n        }\n      }\n    }\n  }\n\n  &--disabled {\n    @apply cursor-not-allowed;\n  }\n\n  &--start {\n    @apply justify-start text-left rtl:justify-end rtl:text-right;\n  }\n\n  &--center {\n    @apply justify-center text-center;\n  }\n\n  &--end {\n    @apply justify-end text-right rtl:justify-start rtl:text-left;\n  }\n}\n</style>\n"],"names":["_useSlots","_openBlock","_createBlock","_mergeProps","_unref","$attrs","_createSlots","_renderSlot","_withCtx","_createVNode"],"mappings":"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"}

package/dist/components/tabs/tab-item/RuiTabItem.vue.d.ts

@@ -4,18 +4,10 @@ export interface Props {
     eager?: boolean;
     reverse?: boolean;
 }
-declare var __VLS_7: {}, __VLS_9: {};
-type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_7) => any;
-} & {
-    default?: (props: typeof __VLS_9) => any;
+type __VLS_Slots = {
+    default?: () => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
-    value: number | string;
-    reverse: boolean;
-    active: boolean;
-    eager: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/components/tabs/tab-item/RuiTabItem.vue2.js

@@ -1,4 +1,4 @@
-import { defineComponent, createElementBlock, openBlock, normalizeClass, createVNode, createCommentVNode, Transition, withCtx, renderSlot } from "vue";
+import { defineComponent, openBlock, createElementBlock, normalizeClass, createVNode, Transition, withCtx, renderSlot, createCommentVNode } from "vue";
 const _hoisted_1 = {
   key: 0,
   class: "w-full"
@@ -14,13 +14,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "RuiTabItem",
   props: {
     active: { type: Boolean, default: false },
-    value: { default: void 0 },
+    value: {},
     eager: { type: Boolean, default: false },
     reverse: { type: Boolean, default: false }
   },
   setup(__props) {
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
+        role: "tabpanel",
         class: normalizeClass([_ctx.$style.tab, { "active-tab-item": __props.active }])
       }, [
         createVNode(Transition, {

package/dist/components/tabs/tab-item/RuiTabItem.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiTabItem.vue2.js","sources":["../../../../src/components/tabs/tab-item/RuiTabItem.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nexport interface Props {\n  active?: boolean;\n  value?: number | string;\n  eager?: boolean;\n  reverse?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiTabItem',\n});\n\nwithDefaults(defineProps<Props>(), {\n  value: undefined,\n  eager: false,\n  active: false,\n  reverse: false,\n});\n</script>\n\n<template>\n  <div :class=\"[$style.tab, { 'active-tab-item': active }]\">\n    <Transition\n      :enter-from-class=\"`opacity-0 ${reverse ? '-translate-x-8' : 'translate-x-8'}`\"\n      :leave-to-class=\"`opacity-0 !h-0 overflow-hidden ${\n        reverse ? 'translate-x-8' : '-translate-x-8'\n      }`\"\n      enter-active-class=\"w-full transform duration-300 transition\"\n      enter-to-class=\"opacity-100 translate-x-0\"\n      leave-active-class=\"w-full transform duration-300 transition !h-0 overflow-hidden\"\n      leave-from-class=\"opacity-100 translate-x-0 !h-0 overflow-hidden\"\n    >\n      <div\n        v-if=\"active\"\n        class=\"w-full\"\n      >\n        <slot />\n      </div>\n    </Transition>\n    <div\n      v-if=\"eager && !active\"\n      class=\"hidden\"\n    >\n      <slot />\n    </div>\n  </div>\n</template>\n\n<style lang=\"scss\" module>\n.tab {\n  @apply w-full;\n}\n</style>\n"],"names":["_createElementBlock","_normalizeClass","$style","_createVNode","_Transition","_openBlock","_renderSlot"],"mappings":";;;;;;;;;;;;;;;;;;;;;;0BAqBEA,mBAwBM,OAAA;AAAA,QAxBA,OAAKC,eAAA,CAAGC,KAAAA,OAAO,0BAA0B,QAAA,QAAM,CAAA;AAAA,MAAA;QACnDC,YAgBaC,YAAA;AAAA,UAfV,iCAA+B,QAAA,UAAO,mBAAA,eAAA;AAAA,UACtC,kBAAc,kCAA6C,QAAA,UAAO,kBAAA;UAGnE,sBAAmB;AAAA,UACnB,kBAAe;AAAA,UACf,sBAAmB;AAAA,UACnB,oBAAiB;AAAA,QAAA;2BAEjB,MAKM;AAAA,YAJE,QAAA,UADRC,UAAA,GAAAL,mBAKM,OALN,YAKM;AAAA,cADJM,WAAQ,KAAA,QAAA,SAAA;AAAA,YAAA;;;;QAIJ,QAAA,UAAU,QAAA,UADlBD,aAAAL,mBAKM,OALN,YAKM;AAAA,UADJM,WAAQ,KAAA,QAAA,SAAA;AAAA,QAAA;;;;;"}
+{"version":3,"file":"RuiTabItem.vue2.js","sources":["../../../../src/components/tabs/tab-item/RuiTabItem.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nexport interface Props {\n  active?: boolean;\n  value?: number | string;\n  eager?: boolean;\n  reverse?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiTabItem',\n});\n\nconst { active = false, eager = false, reverse = false } = defineProps<Props>();\n\ndefineSlots<{\n  default?: () => any;\n}>();\n</script>\n\n<template>\n  <div\n    role=\"tabpanel\"\n    :class=\"[$style.tab, { 'active-tab-item': active }]\"\n  >\n    <Transition\n      :enter-from-class=\"`opacity-0 ${reverse ? '-translate-x-8' : 'translate-x-8'}`\"\n      :leave-to-class=\"`opacity-0 !h-0 overflow-hidden ${\n        reverse ? 'translate-x-8' : '-translate-x-8'\n      }`\"\n      enter-active-class=\"w-full transform duration-300 transition\"\n      enter-to-class=\"opacity-100 translate-x-0\"\n      leave-active-class=\"w-full transform duration-300 transition !h-0 overflow-hidden\"\n      leave-from-class=\"opacity-100 translate-x-0 !h-0 overflow-hidden\"\n    >\n      <div\n        v-if=\"active\"\n        class=\"w-full\"\n      >\n        <slot />\n      </div>\n    </Transition>\n    <div\n      v-if=\"eager && !active\"\n      class=\"hidden\"\n    >\n      <slot />\n    </div>\n  </div>\n</template>\n\n<style lang=\"scss\" module>\n.tab {\n  @apply w-full;\n}\n</style>\n"],"names":["_createElementBlock","_normalizeClass","$style","_createVNode","_Transition","_openBlock","_renderSlot"],"mappings":";;;;;;;;;;;;;;;;;;;;;;0BAoBEA,mBA2BM,OAAA;AAAA,QA1BJ,MAAK;AAAA,QACJ,OAAKC,eAAA,CAAGC,KAAAA,OAAO,0BAA0B,QAAA,QAAM,CAAA;AAAA,MAAA;QAEhDC,YAgBaC,YAAA;AAAA,UAfV,iCAA+B,QAAA,UAAO,mBAAA,eAAA;AAAA,UACtC,kBAAc,kCAA6C,QAAA,UAAO,kBAAA;UAGnE,sBAAmB;AAAA,UACnB,kBAAe;AAAA,UACf,sBAAmB;AAAA,UACnB,oBAAiB;AAAA,QAAA;2BAEjB,MAKM;AAAA,YAJE,QAAA,UADRC,UAAA,GAAAL,mBAKM,OALN,YAKM;AAAA,cADJM,WAAQ,KAAA,QAAA,SAAA;AAAA,YAAA;;;;QAIJ,QAAA,UAAU,QAAA,UADlBD,aAAAL,mBAKM,OALN,YAKM;AAAA,UADJM,WAAQ,KAAA,QAAA,SAAA;AAAA,QAAA;;;;;"}

package/dist/components/tabs/tab-items/RuiTabItems.vue.d.ts

@@ -1,9 +1,6 @@
-export interface Props<T> {
-    modelValue?: T;
-}
 declare const __VLS_export: <T extends string | number>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: import("vue").PublicProps & __VLS_PrettifyLocal<{
-        modelValue?: Props<T>["modelValue"];
+        modelValue?: T;
     } & {
         "onUpdate:modelValue"?: ((value: T | undefined) => any) | undefined;
     }> & (typeof globalThis extends {
@@ -12,7 +9,7 @@ declare const __VLS_export: <T extends string | number>(__VLS_props: NonNullable
     expose: (exposed: {}) => void;
     attrs: any;
     slots: {};
-    emit: (evt: "update:modelValue", value: T | undefined) => void;
+    emit: (event: "update:modelValue", value: T | undefined) => void;
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };