@rotki/ui-library 2.12.2 → 2.13.1

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

@@ -1,28 +1,30 @@
-import { defineComponent, toRefs, computed, openBlock, createElementBlock, 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 { formatInteger } from "../../utils/helpers.js";
-import { get } from "@vueuse/shared";
+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
       });

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';\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  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        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":["_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;
-    link: boolean;
-    active: boolean;
-    vertical: boolean;
-    color: ContextColorsType;
-    disabled: 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, unref, openBlock, createBlock, 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,29 +25,26 @@ 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: "",
@@ -56,37 +52,59 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         "hide-focus-indicator": "",
         tabindex: "-1",
         role: "tab",
-        "aria-selected": unref(active)
-      }, _ctx.$attrs), createSlots({ _: 2 }, [
-        renderList(slots, (_, name) => {
-          return {
-            name,
-            fn: withCtx((slotData) => [
-              renderSlot(_ctx.$slots, name, normalizeProps(guardReactiveProps(slotData)))
-            ])
-          };
-        })
+        "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,
+        color: __props.active ? __props.color : void 0,
         role: "tab",
-        "aria-selected": unref(active)
+        "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", "aria-selected"])) : (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,
@@ -101,11 +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": unref(active) || (__props.exact ? isExactActive : isActive),
+            "aria-selected": __props.active || (__props.exact ? isExactActive : isActive),
             "no-outline": "",
             tag: "a",
             "hide-focus-indicator": "",
@@ -116,15 +134,26 @@ 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)))
-                ])
-              };
-            })
+          }), 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

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';\nimport { generateId } from '@/utils/generate-id';\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    :aria-selected=\"active\"\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    :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-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      :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-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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4BA,UAAM,QAAQ;AAiBd,UAAM,OAAO;AAIb,UAAM,QAAQA,SAAA;AAMd,UAAM,EAAE,QAAQ,MAAM,QAAQ,aAAa,UAAU,UAAU,OAAO,OAAO,sBACzE,OAAO,KAAK;AAEhB,UAAM,MAAM,aAAA;AAEZ,UAAM,SAAS,SAAS,MAAM,IAAI,MAAM,MAAM,OAAO;AAErD,UAAM,WAAW,SAAS,MAAM;AAAA,MAC9B,IAAI;AAAA,MACJ,IAAI,QAAQ,IAAI,KAAK,CAAC,EAAE;AAAA,MACxB,IAAI,kBAAkB,IAAI,iBAAiB,CAAC,EAAE;AAAA,MAC9C;AAAA,QACE,CAAC,IAAI,WAAW,KAAK,EAAE,GAAG,IAAI,IAAI;AAAA,QAClC,CAAC,GAAG,IAAI,aAAa,CAAC,eAAe,IAAI,WAAW,CAAC,EAAE,GAAG,IAAI,MAAM;AAAA,QACpE,CAAC,IAAI,eAAe,KAAK,EAAE,GAAG,IAAI,QAAQ;AAAA,QAC1C,CAAC,IAAI,eAAe,KAAK,EAAE,GAAG,IAAI,QAAQ;AAAA,MAAA;AAAA,IAC5C,CACD;AAED,aAAS,QAAQ;AACf,WAAK,SAAS,IAAI,KAAK,CAAC;AAAA,IAC1B;;;aAKUC,MAAA,QAAA,KADRC,aAAAC,YAoBY,WApBZC,WAoBY;AAAA;QAlBV,SAAQ;AAAA,QACR,UAAA;AAAA,QACC,OAAOH,MAAA,QAAA;AAAA,QACR,wBAAA;AAAA,QACA,UAAS;AAAA,QACT,MAAK;AAAA,QACJ,iBAAeA,MAAA,MAAA;AAAA,MAAA,GACRI,KAAAA,MAAM,GAAAC,YAAA,EAAA,GAAA,KAAA;AAAA,mBAGQ,OAAK,CAAjB,GAAG,SAAI;;;YAGf,IAAAC,QAAA,CAFS,aAAQ;AAAA,cAEjBC,WAGE,KAAA,QAFO,MAAIC,eAAAC,mBACH,QAAQ,CAAA,CAAA;AAAA,YAAA;;;gDAKR,QAAA,QADdR,UAAA,GAAAC,YAqBY,WArBZC,WAqBY;AAAA;QAnBT,OAAOH,MAAA,QAAA;AAAA,QACP,OAAOA,MAAA,MAAA,IAAS,QAAA,QAAQ;AAAA,QACzB,MAAK;AAAA,QACJ,iBAAeA,MAAA,MAAA;AAAA,MAAA,GACRI,KAAAA,QAAM;AAAA,QACd,UAAS;AAAA,QACT,wBAAA;AAAA,QACA,SAAQ;AAAA,QACP,+CAAO,MAAA;AAAA,MAAK;mBAGS,OAAK,CAAjB,GAAG,SAAI;;;YAGf,IAAAE,QAAA,CAFS,aAAQ;AAAA,cAEjBC,WAGE,KAAA,QAFO,MAAIC,eAAAC,mBACH,QAAQ,CAAA,CAAA;AAAA,YAAA;;;sEAItBP,YA2Ca,uBAAA;AAAA;QAxCV,IAAI,QAAA;AAAA,QACJ,OAAO,QAAA;AAAA,QACP,cAAY,QAAA;AAAA,QACb,QAAA;AAAA,MAAA;QAJC,SAAOI,QAMR,CAkCY,EAxCA,MAAM,UAAU,UAAU,oBAAa;AAAA,UAMnDI,YAkCY,WAlCZP,WAkCY;AAAA,YAjCT,OAAK;AAAA,iBAAeH,MAAA,QAAA;AAAA;gBAAkC,CAAA,GAAAA,MAAA,GAAA,qCAAuC,QAAA,QAAoB,gBAA4B;AAAA,cAAA;AAAA;YAQ7I,OAAOA,MAAA,MAAA,MAAW,QAAA,QAAQ,gBAAgB,YAAY,QAAA,QAAQ;AAAA,YAC9D,MAAMA,MAAA,MAAA,IAAS,SAAY;AAAA,YAC3B,QAAQA,MAAA,MAAA;AAAA,YACT,MAAK;AAAA,YACJ,iBAAeA,MAAA,MAAA,MAAW,gBAAQ,gBAAgB;AAAA,YACnD,cAAA;AAAA,YACA,KAAI;AAAA,YACJ,wBAAA;AAAA,YACA,UAAS;AAAA,UAAA,GACDI,KAAAA,QAAM;AAAA,YACd,SAAQ;AAAA,YACP,SAAK,CAAA,WAAA;AAAW,oBAAA;AAAiBJ,oBAAA,MAAA,IAAS,SAAS,MAAM,IAAI;AAAA;;uBAMxC,OAAK,CAAjB,GAAG,SAAI;;;gBAGf,IAAAM,QAAA,CAFS,aAAQ;AAAA,kBAEjBC,WAGE,KAAA,QAFO,MAAIC,eAAAC,mBACH,QAAQ,CAAA,CAAA;AAAA,gBAAA;;;;;;;;;;"}
+{"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<{}>, {
-    reverse: boolean;
-    value: number | string;
-    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

@@ -14,7 +14,7 @@ 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 }
   },

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\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":";;;;;;;;;;;;;;;;;;;;;;0BAqBEA,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;;;;;"}
+{"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 {

package/dist/components/tabs/tab-items/RuiTabItems.vue2.js

@@ -1,6 +1,6 @@
-import { defineComponent, useCssVars, unref, useModel, useSlots, ref, watch, nextTick, computed, openBlock, createElementBlock, mergeProps, createElementVNode, Fragment, renderList, createBlock, resolveDynamicComponent, isVNode } from "vue";
-import { set, get } from "@vueuse/shared";
+import { defineComponent, useCssVars, unref, useModel, useSlots, ref, useTemplateRef, computed, Fragment, isVNode, watch, nextTick, openBlock, createElementBlock, mergeProps, createElementVNode, renderList, createBlock, resolveDynamicComponent } from "vue";
 import { useElementSize } from "@vueuse/core";
+import { get, set } from "@vueuse/shared";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{
     name: "RuiTabItems",
@@ -14,25 +14,16 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   emits: ["update:modelValue"],
   setup(__props) {
     useCssVars((_ctx) => ({
-      "v1ef23b00": unref(innerHeight)
+      "e2f311d6": unref(innerHeight)
     }));
     const modelValue = useModel(__props, "modelValue");
     const slots = useSlots();
     const reverse = ref(false);
     const currIndex = ref(-1);
     const activeIndex = ref(-1);
-    watch(currIndex, (index) => {
-      nextTick(() => {
-        set(activeIndex, index);
-      });
-    });
-    function getChildrenTabs(children2) {
-      return children2.flatMap((item) => {
-        if (item.type === Fragment && Array.isArray(item.children) && item.children.length > 0)
-          return getChildrenTabs(item.children.filter(isVNode));
-        return [item];
-      }).flat();
-    }
+    const wrapper = useTemplateRef("wrapper");
+    const inner = useTemplateRef("inner");
+    const { height: innerHeight } = useElementSize(inner);
     const children = computed(() => {
       const slotContent = slots.default?.() ?? [];
       const tabs = getChildrenTabs(slotContent);
@@ -59,9 +50,18 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         set(currIndex, -1);
       return children2;
     });
-    const wrapper = ref();
-    const inner = ref();
-    const { height: innerHeight } = useElementSize(inner);
+    function getChildrenTabs(children2) {
+      return children2.flatMap((item) => {
+        if (item.type === Fragment && Array.isArray(item.children) && item.children.length > 0)
+          return getChildrenTabs(item.children.filter(isVNode));
+        return [item];
+      }).flat();
+    }
+    watch(currIndex, (index) => {
+      nextTick(() => {
+        set(activeIndex, index);
+      });
+    });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", mergeProps({
         ref_key: "wrapper",

package/dist/components/tabs/tab-items/RuiTabItems.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiTabItems.vue2.js","sources":["../../../../src/components/tabs/tab-items/RuiTabItems.vue"],"sourcesContent":["<script lang=\"ts\" setup generic='T extends string | number'>\nimport { Fragment, isVNode } from 'vue';\n\nexport interface Props<T> {\n  modelValue?: T;\n}\n\ndefineOptions({\n  name: 'RuiTabItems',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<Props<T>['modelValue']>();\n\nconst slots = useSlots();\nconst reverse = ref<boolean>(false);\nconst currIndex = ref<number>(-1);\nconst activeIndex = ref<number>(-1);\n\nwatch(currIndex, (index) => {\n  nextTick(() => {\n    set(activeIndex, index);\n  });\n});\n\n// When using dynamic content with v-for the slot content can contain fragment,\n// Go through the fragment and always return RuiTabItem only\nfunction getChildrenTabs(children: VNode[]): VNode[] {\n  return children.flatMap((item) => {\n    if (item.type === Fragment && Array.isArray(item.children) && item.children.length > 0)\n      return getChildrenTabs(item.children.filter(isVNode));\n\n    return [item];\n  }).flat();\n}\n\nconst children = computed(() => {\n  const slotContent = slots.default?.() ?? [];\n\n  const tabs = getChildrenTabs(slotContent);\n\n  let anyActive = false;\n  const children = tabs.map((tab, index) => {\n    const value = tab.props?.value ?? index;\n    const active = get(modelValue) === value;\n    if (active) {\n      anyActive = true;\n      if (index !== get(currIndex)) {\n        set(reverse, index < get(currIndex));\n        set(currIndex, index);\n      }\n    }\n\n    return {\n      ...tab,\n      props: {\n        value,\n        ...tab.props,\n      },\n    };\n  });\n\n  if (!anyActive)\n    set(currIndex, -1);\n\n  return children;\n});\n\nconst wrapper = ref<HTMLDivElement>();\nconst inner = ref<HTMLDivElement>();\n\nconst { height: innerHeight } = useElementSize(inner);\n</script>\n\n<template>\n  <div\n    ref=\"wrapper\"\n    :class=\"$style.tabs\"\n    v-bind=\"$attrs\"\n  >\n    <div ref=\"inner\">\n      <Component\n        :is=\"child\"\n        v-for=\"(child, i) in children\"\n        :key=\"i\"\n        :reverse=\"reverse\"\n        :active=\"i === activeIndex\"\n      />\n    </div>\n  </div>\n</template>\n\n<style lang=\"scss\" module>\n.tabs {\n  @apply grow transition-all overflow-hidden;\n  height: calc(v-bind(innerHeight) * 1px);\n}\n</style>\n"],"names":["_useModel","children","_openBlock","_createElementBlock","_mergeProps","$style","$attrs","_createElementVNode","_Fragment","_renderList","_unref","_createBlock","_resolveDynamicComponent"],"mappings":";;;;;;;;;;;;;;;;;;AAYA,UAAM,aAAaA,8BAAoC;AAEvD,UAAM,QAAQ,SAAA;AACd,UAAM,UAAU,IAAa,KAAK;AAClC,UAAM,YAAY,IAAY,EAAE;AAChC,UAAM,cAAc,IAAY,EAAE;AAElC,UAAM,WAAW,CAAC,UAAU;AAC1B,eAAS,MAAM;AACb,YAAI,aAAa,KAAK;AAAA,MACxB,CAAC;AAAA,IACH,CAAC;AAID,aAAS,gBAAgBC,WAA4B;AACnD,aAAOA,UAAS,QAAQ,CAAC,SAAS;AAChC,YAAI,KAAK,SAAS,YAAY,MAAM,QAAQ,KAAK,QAAQ,KAAK,KAAK,SAAS,SAAS;AACnF,iBAAO,gBAAgB,KAAK,SAAS,OAAO,OAAO,CAAC;AAEtD,eAAO,CAAC,IAAI;AAAA,MACd,CAAC,EAAE,KAAA;AAAA,IACL;AAEA,UAAM,WAAW,SAAS,MAAM;AAC9B,YAAM,cAAc,MAAM,UAAA,KAAe,CAAA;AAEzC,YAAM,OAAO,gBAAgB,WAAW;AAExC,UAAI,YAAY;AAChB,YAAMA,YAAW,KAAK,IAAI,CAAC,KAAK,UAAU;AACxC,cAAM,QAAQ,IAAI,OAAO,SAAS;AAClC,cAAM,SAAS,IAAI,UAAU,MAAM;AACnC,YAAI,QAAQ;AACV,sBAAY;AACZ,cAAI,UAAU,IAAI,SAAS,GAAG;AAC5B,gBAAI,SAAS,QAAQ,IAAI,SAAS,CAAC;AACnC,gBAAI,WAAW,KAAK;AAAA,UACtB;AAAA,QACF;AAEA,eAAO;AAAA,UACL,GAAG;AAAA,UACH,OAAO;AAAA,YACL;AAAA,YACA,GAAG,IAAI;AAAA,UAAA;AAAA,QACT;AAAA,MAEJ,CAAC;AAED,UAAI,CAAC;AACH,YAAI,WAAW,EAAE;AAEnB,aAAOA;AAAAA,IACT,CAAC;AAED,UAAM,UAAU,IAAA;AAChB,UAAM,QAAQ,IAAA;AAEd,UAAM,EAAE,QAAQ,gBAAgB,eAAe,KAAK;;AAIlD,aAAAC,UAAA,GAAAC,mBAcM,OAdNC,WAcM;AAAA,iBAbA;AAAA,QAAJ,KAAI;AAAA,QACH,OAAOC,KAAAA,OAAO;AAAA,MAAA,GACPC,KAAAA,MAAM,GAAA;AAAA,QAEdC,mBAQM,OAAA;AAAA,mBARG;AAAA,UAAJ,KAAI;AAAA,QAAA;WACPL,UAAA,IAAA,GAAAC,mBAMEK,UAAA,MAAAC,WAJqBC,MAAA,QAAA,GAAQ,CAArB,OAAO,MAAC;AAFlB,mBAAAR,UAAA,GAAAS,YAMEC,wBALK,KAAK,GAAA;AAAA,cAET,KAAK;AAAA,cACL,SAASF,MAAA,OAAA;AAAA,cACT,QAAQ,MAAMA,MAAA,WAAA;AAAA,YAAA;;;;;;;"}
+{"version":3,"file":"RuiTabItems.vue2.js","sources":["../../../../src/components/tabs/tab-items/RuiTabItems.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"T extends string | number\">\nimport { Fragment, isVNode } from 'vue';\n\ndefineOptions({\n  name: 'RuiTabItems',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<T>();\n\nconst slots = useSlots();\n\nconst reverse = ref<boolean>(false);\nconst currIndex = ref<number>(-1);\nconst activeIndex = ref<number>(-1);\nconst wrapper = useTemplateRef<HTMLDivElement>('wrapper');\nconst inner = useTemplateRef<HTMLDivElement>('inner');\n\nconst { height: innerHeight } = useElementSize(inner);\n\nconst children = computed<VNode[]>(() => {\n  const slotContent = slots.default?.() ?? [];\n\n  const tabs = getChildrenTabs(slotContent);\n\n  let anyActive = false;\n  const children = tabs.map((tab, index) => {\n    const value = tab.props?.value ?? index;\n    const active = get(modelValue) === value;\n    if (active) {\n      anyActive = true;\n      if (index !== get(currIndex)) {\n        set(reverse, index < get(currIndex));\n        set(currIndex, index);\n      }\n    }\n\n    return {\n      ...tab,\n      props: {\n        value,\n        ...tab.props,\n      },\n    };\n  });\n\n  if (!anyActive)\n    set(currIndex, -1);\n\n  return children;\n});\n\n// When using dynamic content with v-for the slot content can contain fragment,\n// Go through the fragment and always return RuiTabItem only\nfunction getChildrenTabs(children: VNode[]): VNode[] {\n  return children\n    .flatMap((item) => {\n      if (item.type === Fragment && Array.isArray(item.children) && item.children.length > 0)\n        return getChildrenTabs(item.children.filter(isVNode));\n\n      return [item];\n    })\n    .flat();\n}\n\nwatch(currIndex, (index) => {\n  nextTick(() => {\n    set(activeIndex, index);\n  });\n});\n</script>\n\n<template>\n  <div\n    ref=\"wrapper\"\n    :class=\"$style.tabs\"\n    v-bind=\"$attrs\"\n  >\n    <div ref=\"inner\">\n      <Component\n        :is=\"child\"\n        v-for=\"(child, i) in children\"\n        :key=\"i\"\n        :reverse=\"reverse\"\n        :active=\"i === activeIndex\"\n      />\n    </div>\n  </div>\n</template>\n\n<style lang=\"scss\" module>\n.tabs {\n  @apply grow transition-all overflow-hidden;\n  height: calc(v-bind(innerHeight) * 1px);\n}\n</style>\n"],"names":["_useModel","children","_openBlock","_createElementBlock","_mergeProps","$style","$attrs","_createElementVNode","_Fragment","_renderList","_unref","_createBlock","_resolveDynamicComponent"],"mappings":";;;;;;;;;;;;;;;;;;AAQA,UAAM,aAAaA,SAAc,SAAA,YAAC;AAElC,UAAM,QAAQ,SAAA;AAEd,UAAM,UAAU,IAAa,KAAK;AAClC,UAAM,YAAY,IAAY,EAAE;AAChC,UAAM,cAAc,IAAY,EAAE;AAClC,UAAM,UAAU,eAA+B,SAAS;AACxD,UAAM,QAAQ,eAA+B,OAAO;AAEpD,UAAM,EAAE,QAAQ,gBAAgB,eAAe,KAAK;AAEpD,UAAM,WAAW,SAAkB,MAAM;AACvC,YAAM,cAAc,MAAM,UAAA,KAAe,CAAA;AAEzC,YAAM,OAAO,gBAAgB,WAAW;AAExC,UAAI,YAAY;AAChB,YAAMC,YAAW,KAAK,IAAI,CAAC,KAAK,UAAU;AACxC,cAAM,QAAQ,IAAI,OAAO,SAAS;AAClC,cAAM,SAAS,IAAI,UAAU,MAAM;AACnC,YAAI,QAAQ;AACV,sBAAY;AACZ,cAAI,UAAU,IAAI,SAAS,GAAG;AAC5B,gBAAI,SAAS,QAAQ,IAAI,SAAS,CAAC;AACnC,gBAAI,WAAW,KAAK;AAAA,UACtB;AAAA,QACF;AAEA,eAAO;AAAA,UACL,GAAG;AAAA,UACH,OAAO;AAAA,YACL;AAAA,YACA,GAAG,IAAI;AAAA,UAAA;AAAA,QACT;AAAA,MAEJ,CAAC;AAED,UAAI,CAAC;AACH,YAAI,WAAW,EAAE;AAEnB,aAAOA;AAAAA,IACT,CAAC;AAID,aAAS,gBAAgBA,WAA4B;AACnD,aAAOA,UACJ,QAAQ,CAAC,SAAS;AACjB,YAAI,KAAK,SAAS,YAAY,MAAM,QAAQ,KAAK,QAAQ,KAAK,KAAK,SAAS,SAAS;AACnF,iBAAO,gBAAgB,KAAK,SAAS,OAAO,OAAO,CAAC;AAEtD,eAAO,CAAC,IAAI;AAAA,MACd,CAAC,EACA,KAAA;AAAA,IACL;AAEA,UAAM,WAAW,CAAC,UAAU;AAC1B,eAAS,MAAM;AACb,YAAI,aAAa,KAAK;AAAA,MACxB,CAAC;AAAA,IACH,CAAC;;AAIC,aAAAC,UAAA,GAAAC,mBAcM,OAdNC,WAcM;AAAA,iBAbA;AAAA,QAAJ,KAAI;AAAA,QACH,OAAOC,KAAAA,OAAO;AAAA,MAAA,GACPC,KAAAA,MAAM,GAAA;AAAA,QAEdC,mBAQM,OAAA;AAAA,mBARG;AAAA,UAAJ,KAAI;AAAA,QAAA;WACPL,UAAA,IAAA,GAAAC,mBAMEK,UAAA,MAAAC,WAJqBC,MAAA,QAAA,GAAQ,CAArB,OAAO,MAAC;AAFlB,mBAAAR,UAAA,GAAAS,YAMEC,wBALK,KAAK,GAAA;AAAA,cAET,KAAK;AAAA,cACL,SAASF,MAAA,OAAA;AAAA,cACT,QAAQ,MAAMA,MAAA,WAAA;AAAA,YAAA;;;;;;;"}

package/dist/components/tabs/tabs/RuiTabs.vue.d.ts

@@ -4,22 +4,18 @@ export interface Props {
     vertical?: boolean;
     disabled?: boolean;
     grow?: boolean;
-    modelValue?: number | string;
     align?: 'start' | 'center' | 'end';
     indicatorPosition?: 'start' | 'end';
 }
-declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    "update:modelValue": (modelValue: string | number) => any;
-}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
-    "onUpdate:modelValue"?: ((modelValue: string | number) => any) | undefined;
-}>, {
-    vertical: boolean;
-    color: ContextColorsType;
-    disabled: boolean;
-    modelValue: number | string;
-    align: "start" | "center" | "end";
-    grow: boolean;
-    indicatorPosition: "start" | "end";
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+type __VLS_Props = Props;
+type __VLS_ModelProps = {
+    modelValue?: number | string;
+};
+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: string | number | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | number | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;