@rotki/ui-library 2.12.1 → 2.13.0

package/dist/components/steppers/RuiFooterStepper.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiFooterStepper.vue2.js","sources":["../../../src/components/steppers/RuiFooterStepper.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport RuiProgress from '@/components/progress/RuiProgress.vue';\n\nexport interface Props {\n  pages: number;\n  modelValue?: number;\n  variant?: 'numeric' | 'bullet' | 'progress' | 'pill';\n  arrowButtons?: boolean;\n  hideButtons?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiFooterStepper',\n});\n\nconst props = withDefaults(defineProps<Props>(), {\n  modelValue: 1,\n  variant: 'numeric',\n  arrowButtons: false,\n  hideButtons: false,\n});\n\nconst emit = defineEmits<{\n  (event: 'update:modelValue', modelValue: number): void;\n}>();\n\nconst { modelValue, pages } = toRefs(props);\n\nfunction onChange(delta: number) {\n  emit('update:modelValue', get(modelValue) + delta);\n}\n\nfunction onPrev() {\n  const value = get(modelValue);\n  if (value)\n    onChange(-1);\n}\n\nfunction onNext() {\n  const value = get(modelValue);\n  if (value < get(pages))\n    onChange(1);\n}\n\nfunction onClick(index: number) {\n  onChange(index - get(modelValue));\n}\n</script>\n\n<template>\n  <div :class=\"[$style['footer-stepper'], $style[variant ?? '']]\">\n    <template v-if=\"variant === 'pill'\">\n      <div :class=\"$style.pills\">\n        <span\n          v-for=\"i in pages\"\n          :key=\"i\"\n          :class=\"[$style.pill, { [$style.active]: modelValue === i }]\"\n        />\n      </div>\n    </template>\n    <template v-else>\n      <RuiButton\n        v-if=\"!hideButtons\"\n        :class=\"{ [$style.arrow__button]: arrowButtons }\"\n        :disabled=\"modelValue <= 1\"\n        :icon=\"arrowButtons\"\n        :variant=\"arrowButtons ? 'outlined' : 'text'\"\n        color=\"primary\"\n        @click=\"onPrev()\"\n      >\n        <template\n          v-if=\"!arrowButtons\"\n          #prepend\n        >\n          <RuiIcon\n            :size=\"18\"\n            name=\"lu-chevron-left\"\n          />\n        </template>\n        <span v-if=\"!arrowButtons\">Back</span>\n        <RuiIcon\n          v-else\n          :size=\"24\"\n          name=\"lu-arrow-left\"\n        />\n      </RuiButton>\n      <span\n        v-if=\"variant === 'numeric'\"\n        :class=\"$style.numeric\"\n      >\n        {{ modelValue }}/{{ pages }}\n      </span>\n      <div\n        v-else-if=\"variant === 'bullet'\"\n        :class=\"$style.bullets\"\n      >\n        <span\n          v-for=\"i in pages\"\n          :key=\"i\"\n          :class=\"[$style.bullet, { [$style.active]: modelValue === i }]\"\n          @click=\"onClick(i)\"\n        />\n      </div>\n      <RuiProgress\n        v-else-if=\"variant === 'progress'\"\n        :class=\"$style.progress\"\n        color=\"primary\"\n        :value=\"(modelValue / pages) * 100\"\n      />\n      <RuiButton\n        v-if=\"!hideButtons\"\n        :class=\"{ [$style.arrow__button]: arrowButtons }\"\n        :disabled=\"modelValue >= pages\"\n        :icon=\"arrowButtons\"\n        :variant=\"arrowButtons ? 'outlined' : 'text'\"\n        color=\"primary\"\n        @click=\"onNext()\"\n      >\n        <span v-if=\"!arrowButtons\">Next</span>\n        <RuiIcon\n          v-else\n          :size=\"24\"\n          name=\"lu-arrow-right\"\n        />\n        <template\n          v-if=\"!arrowButtons\"\n          #append\n        >\n          <RuiIcon\n            :size=\"18\"\n            name=\"lu-chevron-right\"\n          />\n        </template>\n      </RuiButton>\n    </template>\n  </div>\n</template>\n\n<style lang=\"scss\" module>\n.footer-stepper {\n  @apply flex items-center justify-between gap-x-4 transition-all duration-150;\n\n  .numeric {\n    @apply text-rui-text;\n  }\n\n  .bullets,\n  .pills {\n    @apply flex;\n\n    .bullet,\n    .pill {\n      @apply rounded-full h-2 bg-black/[0.26] transition-colors;\n\n      &.active {\n        @apply bg-rui-primary;\n      }\n    }\n\n    .bullet {\n      @apply hover:bg-rui-grey-300 cursor-pointer;\n\n      &.active {\n        @apply hover:bg-rui-primary;\n      }\n    }\n\n    .pill {\n      @apply bg-rui-grey-200;\n    }\n  }\n\n  .bullets {\n    @apply gap-x-1;\n\n    .bullet {\n      @apply w-2;\n    }\n  }\n\n  .pills {\n    @apply w-full gap-x-3;\n\n    .pill {\n      @apply w-full;\n    }\n  }\n\n  .progress {\n    @apply max-w-[60%];\n  }\n\n  .arrow__button {\n    @apply bg-white disabled:bg-white/60 #{!important};\n  }\n}\n\n:global(.dark) {\n  .footer-stepper {\n    .bullets,\n    .pills {\n      .bullet,\n      .pill {\n        @apply bg-rui-grey-300;\n\n        &.active {\n          @apply bg-rui-primary;\n        }\n      }\n\n      .bullet {\n        @apply hover:bg-rui-grey-400;\n\n        &.active {\n          @apply hover:bg-rui-primary;\n        }\n      }\n    }\n\n    .bullets {\n      .bullet {\n        @apply bg-white/30;\n      }\n    }\n\n    .arrow__button {\n      @apply disabled:bg-[rgb(50,50,50)] #{!important};\n    }\n  }\n}\n</style>\n"],"names":["_createElementBlock","_normalizeClass","$style","_Fragment","_renderList","_unref","_createBlock","_openBlock","_createVNode","_toDisplayString"],"mappings":"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"}
+{"version":3,"file":"RuiFooterStepper.vue2.js","sources":["../../../src/components/steppers/RuiFooterStepper.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport RuiProgress from '@/components/progress/RuiProgress.vue';\n\nexport interface Props {\n  pages: number;\n  variant?: 'numeric' | 'bullet' | 'progress' | 'pill';\n  arrowButtons?: boolean;\n  hideButtons?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiFooterStepper',\n});\n\nconst modelValue = defineModel<number>({ default: 1 });\n\nconst {\n  pages,\n  variant = 'numeric',\n  arrowButtons = false,\n  hideButtons = false,\n} = defineProps<Props>();\n\nfunction onChange(delta: number): void {\n  set(modelValue, get(modelValue) + delta);\n}\n\nfunction onPrev(): void {\n  const value = get(modelValue);\n  if (value)\n    onChange(-1);\n}\n\nfunction onNext(): void {\n  const value = get(modelValue);\n  if (value < pages)\n    onChange(1);\n}\n\nfunction onClick(index: number): void {\n  onChange(index - get(modelValue));\n}\n</script>\n\n<template>\n  <div\n    role=\"navigation\"\n    aria-label=\"Step navigation\"\n    :class=\"[$style['footer-stepper'], $style[variant ?? '']]\"\n  >\n    <template v-if=\"variant === 'pill'\">\n      <div :class=\"$style.pills\">\n        <span\n          v-for=\"i in pages\"\n          :key=\"i\"\n          :aria-current=\"modelValue === i ? 'step' : undefined\"\n          :class=\"[$style.pill, { [$style.active]: modelValue === i }]\"\n        />\n      </div>\n    </template>\n    <template v-else>\n      <RuiButton\n        v-if=\"!hideButtons\"\n        aria-label=\"Previous\"\n        :class=\"{ [$style.arrow__button]: arrowButtons }\"\n        :disabled=\"modelValue <= 1\"\n        :icon=\"arrowButtons\"\n        :variant=\"arrowButtons ? 'outlined' : 'text'\"\n        color=\"primary\"\n        @click=\"onPrev()\"\n      >\n        <template\n          v-if=\"!arrowButtons\"\n          #prepend\n        >\n          <RuiIcon\n            :size=\"18\"\n            name=\"lu-chevron-left\"\n          />\n        </template>\n        <span v-if=\"!arrowButtons\">Back</span>\n        <RuiIcon\n          v-else\n          :size=\"24\"\n          name=\"lu-arrow-left\"\n        />\n      </RuiButton>\n      <span\n        v-if=\"variant === 'numeric'\"\n        :class=\"$style.numeric\"\n      >\n        {{ modelValue }}/{{ pages }}\n      </span>\n      <div\n        v-else-if=\"variant === 'bullet'\"\n        :class=\"$style.bullets\"\n      >\n        <span\n          v-for=\"i in pages\"\n          :key=\"i\"\n          :aria-current=\"modelValue === i ? 'step' : undefined\"\n          :class=\"[$style.bullet, { [$style.active]: modelValue === i }]\"\n          @click=\"onClick(i)\"\n        />\n      </div>\n      <RuiProgress\n        v-else-if=\"variant === 'progress'\"\n        :class=\"$style.progress\"\n        color=\"primary\"\n        :value=\"(modelValue / pages) * 100\"\n      />\n      <RuiButton\n        v-if=\"!hideButtons\"\n        aria-label=\"Next\"\n        :class=\"{ [$style.arrow__button]: arrowButtons }\"\n        :disabled=\"modelValue >= pages\"\n        :icon=\"arrowButtons\"\n        :variant=\"arrowButtons ? 'outlined' : 'text'\"\n        color=\"primary\"\n        @click=\"onNext()\"\n      >\n        <span v-if=\"!arrowButtons\">Next</span>\n        <RuiIcon\n          v-else\n          :size=\"24\"\n          name=\"lu-arrow-right\"\n        />\n        <template\n          v-if=\"!arrowButtons\"\n          #append\n        >\n          <RuiIcon\n            :size=\"18\"\n            name=\"lu-chevron-right\"\n          />\n        </template>\n      </RuiButton>\n    </template>\n  </div>\n</template>\n\n<style lang=\"scss\" module>\n.footer-stepper {\n  @apply flex items-center justify-between gap-x-4 transition-all duration-150;\n\n  .numeric {\n    @apply text-rui-text;\n  }\n\n  .bullets,\n  .pills {\n    @apply flex;\n\n    .bullet,\n    .pill {\n      @apply rounded-full h-2 bg-black/[0.26] transition-colors;\n\n      &.active {\n        @apply bg-rui-primary;\n      }\n    }\n\n    .bullet {\n      @apply hover:bg-rui-grey-300 cursor-pointer;\n\n      &.active {\n        @apply hover:bg-rui-primary;\n      }\n    }\n\n    .pill {\n      @apply bg-rui-grey-200;\n    }\n  }\n\n  .bullets {\n    @apply gap-x-1;\n\n    .bullet {\n      @apply w-2;\n    }\n  }\n\n  .pills {\n    @apply w-full gap-x-3;\n\n    .pill {\n      @apply w-full;\n    }\n  }\n\n  .progress {\n    @apply max-w-[60%];\n  }\n\n  .arrow__button {\n    @apply bg-white disabled:bg-white/60 #{!important};\n  }\n}\n\n:global(.dark) {\n  .footer-stepper {\n    .bullets,\n    .pills {\n      .bullet,\n      .pill {\n        @apply bg-rui-grey-300;\n\n        &.active {\n          @apply bg-rui-primary;\n        }\n      }\n\n      .bullet {\n        @apply hover:bg-rui-grey-400;\n\n        &.active {\n          @apply hover:bg-rui-primary;\n        }\n      }\n    }\n\n    .bullets {\n      .bullet {\n        @apply bg-white/30;\n      }\n    }\n\n    .arrow__button {\n      @apply disabled:bg-[rgb(50,50,50)] #{!important};\n    }\n  }\n}\n</style>\n"],"names":["_useModel","_createElementBlock","_normalizeClass","$style","_Fragment","_renderList","_createBlock","_openBlock","_createVNode","_toDisplayString"],"mappings":"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"}

package/dist/components/steppers/RuiStepper.vue.d.ts

@@ -9,22 +9,13 @@ export interface Props {
     orientation?: StepperOrientation;
     keepActiveVisible?: boolean;
 }
-declare var __VLS_1: {
-    state: StepperState | undefined;
-    index: number;
+type __VLS_Slots = {
+    icon?: (props: {
+        state: StepperState | undefined;
+        index: number;
+    }) => any;
 };
-type __VLS_Slots = {} & {
-    icon?: (props: typeof __VLS_1) => any;
-};
-declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
-    orientation: StepperOrientation;
-    step: number;
-    custom: boolean;
-    iconTop: boolean;
-    titleClass: string;
-    subtitleClass: string;
-    keepActiveVisible: 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/steppers/RuiStepper.vue2.js

@@ -1,39 +1,36 @@
-import { defineComponent, toRefs, computed, ref, watch, nextTick, createElementBlock, openBlock, normalizeClass, unref, Fragment, renderList, createCommentVNode, createElementVNode, renderSlot, mergeProps, createBlock, toDisplayString } from "vue";
+import { defineComponent, useTemplateRef, computed, watch, nextTick, openBlock, createElementBlock, normalizeClass, Fragment, renderList, unref, createCommentVNode, createElementVNode, renderSlot, mergeProps, createBlock, toDisplayString } from "vue";
 import RuiProgress from "../progress/RuiProgress.vue.js";
 import RuiStepperCustomIcon from "./RuiStepperCustomIcon.vue.js";
 import RuiStepperIcon from "./RuiStepperIcon.vue.js";
 import { StepperOrientation, StepperState } from "../../types/stepper.js";
 import { get } from "@vueuse/shared";
-import { isDefined } from "@vueuse/core";
-const _hoisted_1 = { class: "relative flex py-2" };
+const _hoisted_1 = ["aria-current"];
+const _hoisted_2 = { class: "relative flex py-2" };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{
     name: "RuiStepper"
   },
   __name: "RuiStepper",
   props: {
-    step: { default: void 0 },
+    step: {},
     steps: {},
     iconTop: { type: Boolean, default: false },
     custom: { type: Boolean, default: false },
     titleClass: { default: "" },
     subtitleClass: { default: "" },
-    orientation: { default: StepperOrientation.horizontal },
+    orientation: { default: () => StepperOrientation.horizontal },
     keepActiveVisible: { type: Boolean, default: true }
   },
   setup(__props) {
-    const props = __props;
-    const { custom, steps, step, orientation, keepActiveVisible } = toRefs(props);
+    const wrapperRef = useTemplateRef("wrapperRef");
     const renderedStep = computed(() => {
-      const currentStep = get(step);
-      const stepsVal = get(steps);
-      if (!isDefined(currentStep))
-        return stepsVal;
-      return stepsVal.map((text, index) => {
+      if (__props.step === void 0)
+        return __props.steps;
+      return __props.steps.map((text, index) => {
         let stepStatus = StepperState.inactive;
-        if (index + 1 === currentStep)
+        if (index + 1 === __props.step)
           stepStatus = StepperState.active;
-        if (index + 1 < currentStep)
+        if (index + 1 < __props.step)
           stepStatus = StepperState.done;
         return {
           ...text,
@@ -41,30 +38,34 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         };
       });
     });
-    const wrapperRef = ref();
-    watch(step, () => {
-      if (!get(keepActiveVisible) || get(orientation) !== StepperOrientation.horizontal) {
-        return;
-      }
-      nextTick(() => {
-        const elem = get(wrapperRef);
-        if (elem) {
-          const activeStep = elem.querySelector(".active-step");
-          activeStep?.scrollIntoView?.({
-            behavior: "smooth",
-            inline: "center"
-          });
+    watch(
+      () => __props.step,
+      () => {
+        if (!__props.keepActiveVisible || __props.orientation !== StepperOrientation.horizontal) {
+          return;
         }
-      });
-    });
+        nextTick(() => {
+          const elem = get(wrapperRef);
+          if (elem) {
+            const activeStep = elem.querySelector(".active-step");
+            activeStep?.scrollIntoView?.({
+              behavior: "smooth",
+              inline: "center"
+            });
+          }
+        });
+      }
+    );
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
         ref_key: "wrapperRef",
         ref: wrapperRef,
+        role: "list",
+        "aria-label": "Progress steps",
         class: normalizeClass([[
           _ctx.$style.stepper,
-          _ctx.$style[unref(orientation) ?? ""],
-          { [_ctx.$style["icon-top"]]: __props.iconTop, [_ctx.$style.custom]: unref(custom) }
+          _ctx.$style[__props.orientation ?? ""],
+          { [_ctx.$style["icon-top"]]: __props.iconTop, [_ctx.$style.custom]: __props.custom }
         ], "no-scrollbar overflow-auto"])
       }, [
         (openBlock(true), createElementBlock(Fragment, null, renderList(unref(renderedStep), ({ title, description, state, loading }, index) => {
@@ -74,6 +75,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               class: normalizeClass(_ctx.$style.divider)
             }, null, 2)) : createCommentVNode("", true),
             createElementVNode("div", {
+              role: "listitem",
+              "aria-current": state === unref(StepperState).active ? "step" : void 0,
               class: normalizeClass([
                 _ctx.$style.step,
                 _ctx.$style[state ?? unref(StepperState).inactive],
@@ -83,8 +86,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               ])
             }, [
               renderSlot(_ctx.$slots, "icon", mergeProps({ ref_for: true }, { state, index: index + 1 }), () => [
-                createElementVNode("div", _hoisted_1, [
-                  unref(custom) ? (openBlock(), createBlock(RuiStepperCustomIcon, {
+                createElementVNode("div", _hoisted_2, [
+                  __props.custom ? (openBlock(), createBlock(RuiStepperCustomIcon, {
                     key: 0,
                     index: index + 1,
                     state
@@ -110,14 +113,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               }, [
                 title ? (openBlock(), createElementBlock("span", {
                   key: 0,
-                  class: normalizeClass([[_ctx.$style.title, { [__props.titleClass]: unref(custom) }], "text-subtitle-2"])
+                  class: normalizeClass([[_ctx.$style.title, { [__props.titleClass]: __props.custom }], "text-subtitle-2"])
                 }, toDisplayString(title), 3)) : createCommentVNode("", true),
                 description ? (openBlock(), createElementBlock("span", {
                   key: 1,
-                  class: normalizeClass([[_ctx.$style.subtitle, { [__props.subtitleClass]: unref(custom) }], "text-caption"])
+                  class: normalizeClass([[_ctx.$style.subtitle, { [__props.subtitleClass]: __props.custom }], "text-caption"])
                 }, toDisplayString(description), 3)) : createCommentVNode("", true)
               ], 2)) : createCommentVNode("", true)
-            ], 2)
+            ], 10, _hoisted_1)
           ], 64);
         }), 128))
       ], 2);

package/dist/components/steppers/RuiStepper.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiStepper.vue2.js","sources":["../../../src/components/steppers/RuiStepper.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport RuiProgress from '@/components/progress/RuiProgress.vue';\nimport RuiStepperCustomIcon from '@/components/steppers/RuiStepperCustomIcon.vue';\nimport RuiStepperIcon from '@/components/steppers/RuiStepperIcon.vue';\nimport {\n  StepperOrientation,\n  StepperState,\n  type StepperStep,\n} from '@/types/stepper';\n\nexport interface Props {\n  step?: number;\n  steps: StepperStep[];\n  iconTop?: boolean;\n  custom?: boolean;\n  titleClass?: string;\n  subtitleClass?: string;\n  orientation?: StepperOrientation;\n  keepActiveVisible?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiStepper',\n});\n\nconst props = withDefaults(defineProps<Props>(), {\n  step: undefined,\n  iconTop: false,\n  custom: false,\n  titleClass: '',\n  subtitleClass: '',\n  orientation: StepperOrientation.horizontal,\n  keepActiveVisible: true,\n});\n\nconst { custom, steps, step, orientation, keepActiveVisible } = toRefs(props);\n\n// automatically set step state to stepper.\nconst renderedStep = computed(() => {\n  const currentStep = get(step);\n  const stepsVal = get(steps);\n\n  if (!isDefined(currentStep))\n    return stepsVal;\n\n  return stepsVal.map((text, index) => {\n    let stepStatus: StepperState = StepperState.inactive;\n\n    if (index + 1 === currentStep)\n      stepStatus = StepperState.active;\n\n    if (index + 1 < currentStep)\n      stepStatus = StepperState.done;\n\n    return {\n      ...text,\n      state: stepStatus,\n    };\n  });\n});\n\nconst wrapperRef = ref<HTMLDivElement>();\n\nwatch(step, () => {\n  if (\n    !get(keepActiveVisible)\n    || get(orientation) !== StepperOrientation.horizontal\n  ) {\n    return;\n  }\n\n  nextTick(() => {\n    const elem = get(wrapperRef);\n    if (elem) {\n      const activeStep = elem.querySelector('.active-step');\n      activeStep?.scrollIntoView?.({\n        behavior: 'smooth',\n        inline: 'center',\n      });\n    }\n  });\n});\n</script>\n\n<template>\n  <div\n    ref=\"wrapperRef\"\n    :class=\"[\n      $style.stepper,\n      $style[orientation ?? ''],\n      { [$style['icon-top']]: iconTop, [$style.custom]: custom },\n    ]\"\n    class=\"no-scrollbar overflow-auto\"\n  >\n    <template\n      v-for=\"({ title, description, state, loading }, index) in renderedStep\"\n      :key=\"index\"\n    >\n      <hr\n        v-if=\"index > 0\"\n        :class=\"$style.divider\"\n      />\n      <div\n        :class=\"[\n          $style.step,\n          $style[state ?? StepperState.inactive],\n          {\n            'active-step': state === StepperState.active,\n          },\n        ]\"\n      >\n        <slot\n          name=\"icon\"\n          v-bind=\"{ state, index: index + 1 }\"\n        >\n          <div class=\"relative flex py-2\">\n            <RuiStepperCustomIcon\n              v-if=\"custom\"\n              :index=\"index + 1\"\n              :state=\"state\"\n            />\n            <RuiStepperIcon\n              v-else\n              :index=\"index + 1\"\n              :state=\"state\"\n            />\n            <RuiProgress\n              v-if=\"loading\"\n              class=\"absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2\"\n              size=\"32\"\n              variant=\"indeterminate\"\n              circular\n              thickness=\"2\"\n              color=\"primary\"\n            />\n          </div>\n        </slot>\n        <div\n          v-if=\"title || description\"\n          :class=\"$style.label\"\n        >\n          <span\n            v-if=\"title\"\n            :class=\"[$style.title, { [titleClass]: custom }]\"\n            class=\"text-subtitle-2\"\n          >\n            {{ title }}\n          </span>\n          <span\n            v-if=\"description\"\n            :class=\"[$style.subtitle, { [subtitleClass]: custom }]\"\n            class=\"text-caption\"\n          >\n            {{ description }}\n          </span>\n        </div>\n      </div>\n    </template>\n  </div>\n</template>\n\n<style lang=\"scss\" module>\n$colors: 'error', 'warning', 'info', 'success';\n.stepper {\n  @apply flex;\n\n  &.horizontal {\n    @apply whitespace-nowrap lg:whitespace-normal;\n  }\n\n  &.vertical {\n    @apply flex-col inline-flex;\n\n    .step {\n      @apply px-0 py-6;\n    }\n\n    .divider {\n      @apply block min-h-[3rem] min-w-0 max-h-full h-full self-start -my-4 mx-3 border-l border-rui-grey-400;\n    }\n\n    &.custom {\n      .divider {\n        @apply mx-5;\n      }\n    }\n\n    &.icon-top {\n      .divider {\n        @apply self-center mx-auto;\n      }\n    }\n  }\n\n  .step {\n    @apply flex items-center px-6 relative;\n\n    .indicator {\n      @apply inline-flex items-center justify-center rounded-full h-6 w-6 min-w-[1.5rem];\n    }\n\n    .label {\n      @apply flex flex-col items-start text-left ml-2;\n    }\n\n    &.inactive {\n      @apply text-rui-text-disabled;\n\n      .title {\n        @apply text-rui-text-secondary;\n      }\n\n      .subtitle {\n        @apply text-rui-text;\n      }\n    }\n\n    &.active,\n    &.done {\n      @apply text-rui-text;\n\n      .subtitle {\n        @apply text-rui-text-secondary;\n      }\n    }\n\n    @each $color in $colors {\n      &.#{$color} {\n        @apply text-rui-#{$color};\n      }\n    }\n  }\n\n  &.icon-top {\n    .step {\n      @apply flex-col;\n\n      .label {\n        @apply ml-0 mt-4 items-center text-center;\n      }\n    }\n  }\n\n  .divider {\n    @apply block max-w-full min-w-[1rem] h-0 max-h-0 self-center -mx-4 my-0 border-t border-rui-grey-400;\n    flex: 1 1 0;\n  }\n\n  &.custom {\n    .step {\n      .divider {\n        @apply border-rui-primary-lighter;\n      }\n\n      &.inactive {\n        @apply text-rui-text;\n      }\n    }\n  }\n}\n</style>\n"],"names":["_createElementBlock","_normalizeClass","$style","_unref","_Fragment","_renderList","_createElementVNode","_renderSlot","_mergeProps","_createBlock"],"mappings":"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"}
+{"version":3,"file":"RuiStepper.vue2.js","sources":["../../../src/components/steppers/RuiStepper.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport RuiProgress from '@/components/progress/RuiProgress.vue';\nimport RuiStepperCustomIcon from '@/components/steppers/RuiStepperCustomIcon.vue';\nimport RuiStepperIcon from '@/components/steppers/RuiStepperIcon.vue';\nimport { StepperOrientation, StepperState, type StepperStep } from '@/types/stepper';\n\nexport interface Props {\n  step?: number;\n  steps: StepperStep[];\n  iconTop?: boolean;\n  custom?: boolean;\n  titleClass?: string;\n  subtitleClass?: string;\n  orientation?: StepperOrientation;\n  keepActiveVisible?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiStepper',\n});\n\nconst {\n  step,\n  steps,\n  iconTop = false,\n  custom = false,\n  titleClass = '',\n  subtitleClass = '',\n  orientation = StepperOrientation.horizontal,\n  keepActiveVisible = true,\n} = defineProps<Props>();\n\ndefineSlots<{\n  icon?: (props: { state: StepperState | undefined; index: number }) => any;\n}>();\n\nconst wrapperRef = useTemplateRef<HTMLDivElement>('wrapperRef');\n\n// automatically set step state to stepper.\nconst renderedStep = computed<StepperStep[]>(() => {\n  if (step === undefined)\n    return steps;\n\n  return steps.map((text, index) => {\n    let stepStatus: StepperState = StepperState.inactive;\n\n    if (index + 1 === step)\n      stepStatus = StepperState.active;\n\n    if (index + 1 < step)\n      stepStatus = StepperState.done;\n\n    return {\n      ...text,\n      state: stepStatus,\n    };\n  });\n});\n\nwatch(\n  () => step,\n  () => {\n    if (!keepActiveVisible || orientation !== StepperOrientation.horizontal) {\n      return;\n    }\n\n    nextTick(() => {\n      const elem = get(wrapperRef);\n      if (elem) {\n        const activeStep = elem.querySelector('.active-step');\n        activeStep?.scrollIntoView?.({\n          behavior: 'smooth',\n          inline: 'center',\n        });\n      }\n    });\n  },\n);\n</script>\n\n<template>\n  <div\n    ref=\"wrapperRef\"\n    role=\"list\"\n    aria-label=\"Progress steps\"\n    :class=\"[\n      $style.stepper,\n      $style[orientation ?? ''],\n      { [$style['icon-top']]: iconTop, [$style.custom]: custom },\n    ]\"\n    class=\"no-scrollbar overflow-auto\"\n  >\n    <template\n      v-for=\"({ title, description, state, loading }, index) in renderedStep\"\n      :key=\"index\"\n    >\n      <hr\n        v-if=\"index > 0\"\n        :class=\"$style.divider\"\n      />\n      <div\n        role=\"listitem\"\n        :aria-current=\"state === StepperState.active ? 'step' : undefined\"\n        :class=\"[\n          $style.step,\n          $style[state ?? StepperState.inactive],\n          {\n            'active-step': state === StepperState.active,\n          },\n        ]\"\n      >\n        <slot\n          name=\"icon\"\n          v-bind=\"{ state, index: index + 1 }\"\n        >\n          <div class=\"relative flex py-2\">\n            <RuiStepperCustomIcon\n              v-if=\"custom\"\n              :index=\"index + 1\"\n              :state=\"state\"\n            />\n            <RuiStepperIcon\n              v-else\n              :index=\"index + 1\"\n              :state=\"state\"\n            />\n            <RuiProgress\n              v-if=\"loading\"\n              class=\"absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2\"\n              size=\"32\"\n              variant=\"indeterminate\"\n              circular\n              thickness=\"2\"\n              color=\"primary\"\n            />\n          </div>\n        </slot>\n        <div\n          v-if=\"title || description\"\n          :class=\"$style.label\"\n        >\n          <span\n            v-if=\"title\"\n            :class=\"[$style.title, { [titleClass]: custom }]\"\n            class=\"text-subtitle-2\"\n          >\n            {{ title }}\n          </span>\n          <span\n            v-if=\"description\"\n            :class=\"[$style.subtitle, { [subtitleClass]: custom }]\"\n            class=\"text-caption\"\n          >\n            {{ description }}\n          </span>\n        </div>\n      </div>\n    </template>\n  </div>\n</template>\n\n<style lang=\"scss\" module>\n$colors: 'error', 'warning', 'info', 'success';\n.stepper {\n  @apply flex;\n\n  &.horizontal {\n    @apply whitespace-nowrap lg:whitespace-normal;\n  }\n\n  &.vertical {\n    @apply flex-col inline-flex;\n\n    .step {\n      @apply px-0 py-6;\n    }\n\n    .divider {\n      @apply block min-h-[3rem] min-w-0 max-h-full h-full self-start -my-4 mx-3 border-l border-rui-grey-400;\n    }\n\n    &.custom {\n      .divider {\n        @apply mx-5;\n      }\n    }\n\n    &.icon-top {\n      .divider {\n        @apply self-center mx-auto;\n      }\n    }\n  }\n\n  .step {\n    @apply flex items-center px-6 relative;\n\n    .indicator {\n      @apply inline-flex items-center justify-center rounded-full h-6 w-6 min-w-[1.5rem];\n    }\n\n    .label {\n      @apply flex flex-col items-start text-left ml-2;\n    }\n\n    &.inactive {\n      @apply text-rui-text-disabled;\n\n      .title {\n        @apply text-rui-text-secondary;\n      }\n\n      .subtitle {\n        @apply text-rui-text;\n      }\n    }\n\n    &.active,\n    &.done {\n      @apply text-rui-text;\n\n      .subtitle {\n        @apply text-rui-text-secondary;\n      }\n    }\n\n    @each $color in $colors {\n      &.#{$color} {\n        @apply text-rui-#{$color};\n      }\n    }\n  }\n\n  &.icon-top {\n    .step {\n      @apply flex-col;\n\n      .label {\n        @apply ml-0 mt-4 items-center text-center;\n      }\n    }\n  }\n\n  .divider {\n    @apply block max-w-full min-w-[1rem] h-0 max-h-0 self-center -mx-4 my-0 border-t border-rui-grey-400;\n    flex: 1 1 0;\n  }\n\n  &.custom {\n    .step {\n      .divider {\n        @apply border-rui-primary-lighter;\n      }\n\n      &.inactive {\n        @apply text-rui-text;\n      }\n    }\n  }\n}\n</style>\n"],"names":["_createElementBlock","_normalizeClass","$style","_Fragment","_renderList","_unref","_createElementVNode","_renderSlot","_mergeProps","_createBlock"],"mappings":"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"}

package/dist/components/steppers/RuiStepperCustomIcon.vue.d.ts

@@ -3,8 +3,6 @@ type __VLS_Props = {
     state?: StepperState;
     index: number;
 };
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    state: StepperState;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/components/steppers/RuiStepperCustomIcon.vue2.js

@@ -1,10 +1,10 @@
-import { defineComponent, createElementBlock, openBlock, normalizeClass, createBlock, unref, toDisplayString } from "vue";
+import { defineComponent, openBlock, createElementBlock, normalizeClass, unref, toDisplayString, createBlock } from "vue";
 import RuiIcon from "../icons/RuiIcon.vue.js";
 import { StepperState } from "../../types/stepper.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "RuiStepperCustomIcon",
   props: {
-    state: { default: StepperState.inactive },
+    state: { default: () => StepperState.inactive },
     index: {}
   },
   setup(__props) {

package/dist/components/steppers/RuiStepperCustomIcon.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiStepperCustomIcon.vue2.js","sources":["../../../src/components/steppers/RuiStepperCustomIcon.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { StepperState } from '@/types/stepper';\n\nwithDefaults(\n  defineProps<{\n    state?: StepperState;\n    index: number;\n  }>(),\n  {\n    state: StepperState.inactive,\n  },\n);\n</script>\n\n<template>\n  <span :class=\"[$style.indicator, $style[state]]\">\n    <span\n      v-if=\"state === StepperState.inactive\"\n      :class=\"$style.text\"\n    >\n      {{ index }}\n    </span>\n    <RuiIcon\n      v-else-if=\"state === StepperState.active\"\n      name=\"lu-checkbox-blank-circle-fill\"\n      :size=\"20\"\n    />\n    <RuiIcon\n      v-else-if=\"state === StepperState.done\"\n      :class=\"$style.text\"\n      :size=\"20\"\n      name=\"lu-check\"\n    />\n    <span\n      v-else\n      :class=\"$style.text\"\n    >\n      {{ index }}\n    </span>\n  </span>\n</template>\n\n<style lang=\"scss\" module>\n.indicator {\n  @apply inline-flex items-center justify-center rounded-full h-10 w-10 shrink-0 border text-white bg-rui-primary border-rui-primary;\n\n  &.inactive {\n    @apply text-xs bg-white;\n\n    .text {\n      @apply text-rui-primary;\n    }\n  }\n}\n\n:global(.dark) {\n  .indicator {\n    @apply bg-white text-rui-primary;\n\n    &.inactive {\n      @apply text-white border-white bg-rui-primary;\n\n      .text {\n        @apply text-white;\n      }\n    }\n  }\n}\n</style>\n"],"names":["_createElementBlock","$style","_unref","_normalizeClass","_createBlock"],"mappings":";;;;;;;;;;;0BAgBEA,mBAwBO,QAAA;AAAA,QAxBA,uBAAQC,KAAAA,OAAO,WAAWA,KAAAA,OAAO,QAAA,KAAK,CAAA,CAAA;AAAA,MAAA;QAEnC,QAAA,UAAUC,MAAA,YAAA,EAAa,yBAD/BF,mBAKO,QAAA;AAAA;UAHJ,OAAKG,eAAEF,KAAAA,OAAO,IAAI;AAAA,QAAA,mBAEhB,QAAA,KAAK,GAAA,CAAA,KAGG,QAAA,UAAUC,MAAA,YAAA,EAAa,uBADpCE,YAIE,SAAA;AAAA;UAFA,MAAK;AAAA,UACJ,MAAM;AAAA,QAAA,MAGI,QAAA,UAAUF,MAAA,YAAA,EAAa,qBADpCE,YAKE,SAAA;AAAA;UAHC,OAAKD,eAAEF,KAAAA,OAAO,IAAI;AAAA,UAClB,MAAM;AAAA,UACP,MAAK;AAAA,QAAA,wCAEPD,mBAKO,QAAA;AAAA;UAHJ,OAAKG,eAAEF,KAAAA,OAAO,IAAI;AAAA,QAAA,mBAEhB,QAAA,KAAK,GAAA,CAAA;AAAA,MAAA;;;;"}
+{"version":3,"file":"RuiStepperCustomIcon.vue2.js","sources":["../../../src/components/steppers/RuiStepperCustomIcon.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { StepperState } from '@/types/stepper';\n\nconst { state = StepperState.inactive } = defineProps<{\n  state?: StepperState;\n  index: number;\n}>();\n</script>\n\n<template>\n  <span :class=\"[$style.indicator, $style[state]]\">\n    <span\n      v-if=\"state === StepperState.inactive\"\n      :class=\"$style.text\"\n    >\n      {{ index }}\n    </span>\n    <RuiIcon\n      v-else-if=\"state === StepperState.active\"\n      name=\"lu-checkbox-blank-circle-fill\"\n      :size=\"20\"\n    />\n    <RuiIcon\n      v-else-if=\"state === StepperState.done\"\n      :class=\"$style.text\"\n      :size=\"20\"\n      name=\"lu-check\"\n    />\n    <span\n      v-else\n      :class=\"$style.text\"\n    >\n      {{ index }}\n    </span>\n  </span>\n</template>\n\n<style lang=\"scss\" module>\n.indicator {\n  @apply inline-flex items-center justify-center rounded-full h-10 w-10 shrink-0 border text-white bg-rui-primary border-rui-primary;\n\n  &.inactive {\n    @apply text-xs bg-white;\n\n    .text {\n      @apply text-rui-primary;\n    }\n  }\n}\n\n:global(.dark) {\n  .indicator {\n    @apply bg-white text-rui-primary;\n\n    &.inactive {\n      @apply text-white border-white bg-rui-primary;\n\n      .text {\n        @apply text-white;\n      }\n    }\n  }\n}\n</style>\n"],"names":["_createElementBlock","$style","_unref","_normalizeClass","_createBlock"],"mappings":";;;;;;;;;;;0BAWEA,mBAwBO,QAAA;AAAA,QAxBA,uBAAQC,KAAAA,OAAO,WAAWA,KAAAA,OAAO,QAAA,KAAK,CAAA,CAAA;AAAA,MAAA;QAEnC,QAAA,UAAUC,MAAA,YAAA,EAAa,yBAD/BF,mBAKO,QAAA;AAAA;UAHJ,OAAKG,eAAEF,KAAAA,OAAO,IAAI;AAAA,QAAA,mBAEhB,QAAA,KAAK,GAAA,CAAA,KAGG,QAAA,UAAUC,MAAA,YAAA,EAAa,uBADpCE,YAIE,SAAA;AAAA;UAFA,MAAK;AAAA,UACJ,MAAM;AAAA,QAAA,MAGI,QAAA,UAAUF,MAAA,YAAA,EAAa,qBADpCE,YAKE,SAAA;AAAA;UAHC,OAAKD,eAAEF,KAAAA,OAAO,IAAI;AAAA,UAClB,MAAM;AAAA,UACP,MAAK;AAAA,QAAA,wCAEPD,mBAKO,QAAA;AAAA;UAHJ,OAAKG,eAAEF,KAAAA,OAAO,IAAI;AAAA,QAAA,mBAEhB,QAAA,KAAK,GAAA,CAAA;AAAA,MAAA;;;;"}

package/dist/components/steppers/RuiStepperIcon.vue.d.ts

@@ -3,8 +3,6 @@ type __VLS_Props = {
     state?: StepperState;
     index: number;
 };
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    state: StepperState;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/components/steppers/RuiStepperIcon.vue2.js

@@ -1,10 +1,10 @@
-import { defineComponent, createElementBlock, openBlock, normalizeClass, createBlock, createCommentVNode, unref, toDisplayString } from "vue";
+import { defineComponent, openBlock, createElementBlock, normalizeClass, unref, toDisplayString, createBlock, createCommentVNode } from "vue";
 import RuiIcon from "../icons/RuiIcon.vue.js";
 import { StepperState } from "../../types/stepper.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "RuiStepperIcon",
   props: {
-    state: { default: StepperState.inactive },
+    state: { default: () => StepperState.inactive },
     index: {}
   },
   setup(__props) {

package/dist/components/steppers/RuiStepperIcon.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiStepperIcon.vue2.js","sources":["../../../src/components/steppers/RuiStepperIcon.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { StepperState } from '@/types/stepper';\n\nwithDefaults(defineProps<{\n  state?: StepperState;\n  index: number;\n}>(), {\n  state: StepperState.inactive,\n});\n</script>\n\n<template>\n  <span :class=\"[$style.indicator, $style[state]]\">\n    <span\n      v-if=\"state === StepperState.inactive || state === StepperState.active\"\n      :class=\"$style.text\"\n    >\n      {{ index }}\n    </span>\n    <RuiIcon\n      v-else-if=\"state === StepperState.done\"\n      :class=\"$style.text\"\n      :size=\"20\"\n      name=\"lu-check\"\n    />\n    <RuiIcon\n      v-else-if=\"state === StepperState.success\"\n      name=\"lu-circle-check\"\n    />\n    <RuiIcon\n      v-else-if=\"state === StepperState.error\"\n      name=\"lu-circle-alert\"\n    />\n    <RuiIcon\n      v-else-if=\"state === StepperState.warning\"\n      name=\"lu-triangle-alert\"\n    />\n    <RuiIcon\n      v-else-if=\"state === StepperState.info\"\n      name=\"lu-info\"\n    />\n  </span>\n</template>\n\n<style lang=\"scss\" module>\n.indicator {\n  @apply inline-flex items-center justify-center rounded-full h-6 w-6;\n\n  .text {\n    @apply text-rui-dark-text;\n  }\n\n  &.inactive {\n    @apply bg-current text-xs;\n  }\n\n  &.active,\n  &.done {\n    @apply bg-rui-primary rounded-full text-xs;\n  }\n}\n\n:global(.dark) {\n  .indicator {\n    &.inactive {\n      .text {\n        @apply text-rui-light-text-secondary;\n      }\n    }\n\n    &.active,\n    &.done {\n      .text {\n        @apply text-rui-light-text;\n      }\n    }\n  }\n}\n</style>\n"],"names":["_createElementBlock","$style","_unref","_normalizeClass","_createBlock"],"mappings":";;;;;;;;;;;0BAaEA,mBA6BO,QAAA;AAAA,QA7BA,uBAAQC,KAAAA,OAAO,WAAWA,KAAAA,OAAO,QAAA,KAAK,CAAA,CAAA;AAAA,MAAA;QAEnC,QAAA,UAAUC,oBAAa,YAAY,QAAA,UAAUA,MAAA,YAAA,EAAa,uBADlEF,mBAKO,QAAA;AAAA;UAHJ,OAAKG,eAAEF,KAAAA,OAAO,IAAI;AAAA,QAAA,mBAEhB,QAAA,KAAK,GAAA,CAAA,KAGG,QAAA,UAAUC,MAAA,YAAA,EAAa,qBADpCE,YAKE,SAAA;AAAA;UAHC,OAAKD,eAAEF,KAAAA,OAAO,IAAI;AAAA,UAClB,MAAM;AAAA,UACP,MAAK;AAAA,QAAA,0BAGM,QAAA,UAAUC,MAAA,YAAA,EAAa,wBADpCE,YAGE,SAAA;AAAA;UADA,MAAK;AAAA,QAAA,MAGM,QAAA,UAAUF,MAAA,YAAA,EAAa,sBADpCE,YAGE,SAAA;AAAA;UADA,MAAK;AAAA,QAAA,MAGM,QAAA,UAAUF,MAAA,YAAA,EAAa,wBADpCE,YAGE,SAAA;AAAA;UADA,MAAK;AAAA,QAAA,MAGM,QAAA,UAAUF,MAAA,YAAA,EAAa,qBADpCE,YAGE,SAAA;AAAA;UADA,MAAK;AAAA,QAAA;;;;;"}
+{"version":3,"file":"RuiStepperIcon.vue2.js","sources":["../../../src/components/steppers/RuiStepperIcon.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { StepperState } from '@/types/stepper';\n\nconst { state = StepperState.inactive, index } = defineProps<{\n  state?: StepperState;\n  index: number;\n}>();\n</script>\n\n<template>\n  <span :class=\"[$style.indicator, $style[state]]\">\n    <span\n      v-if=\"state === StepperState.inactive || state === StepperState.active\"\n      :class=\"$style.text\"\n    >\n      {{ index }}\n    </span>\n    <RuiIcon\n      v-else-if=\"state === StepperState.done\"\n      :class=\"$style.text\"\n      :size=\"20\"\n      name=\"lu-check\"\n    />\n    <RuiIcon\n      v-else-if=\"state === StepperState.success\"\n      name=\"lu-circle-check\"\n    />\n    <RuiIcon\n      v-else-if=\"state === StepperState.error\"\n      name=\"lu-circle-alert\"\n    />\n    <RuiIcon\n      v-else-if=\"state === StepperState.warning\"\n      name=\"lu-triangle-alert\"\n    />\n    <RuiIcon\n      v-else-if=\"state === StepperState.info\"\n      name=\"lu-info\"\n    />\n  </span>\n</template>\n\n<style lang=\"scss\" module>\n.indicator {\n  @apply inline-flex items-center justify-center rounded-full h-6 w-6;\n\n  .text {\n    @apply text-rui-dark-text;\n  }\n\n  &.inactive {\n    @apply bg-current text-xs;\n  }\n\n  &.active,\n  &.done {\n    @apply bg-rui-primary rounded-full text-xs;\n  }\n}\n\n:global(.dark) {\n  .indicator {\n    &.inactive {\n      .text {\n        @apply text-rui-light-text-secondary;\n      }\n    }\n\n    &.active,\n    &.done {\n      .text {\n        @apply text-rui-light-text;\n      }\n    }\n  }\n}\n</style>\n"],"names":["_createElementBlock","$style","_unref","_normalizeClass","_createBlock"],"mappings":";;;;;;;;;;;0BAWEA,mBA6BO,QAAA;AAAA,QA7BA,uBAAQC,KAAAA,OAAO,WAAWA,KAAAA,OAAO,QAAA,KAAK,CAAA,CAAA;AAAA,MAAA;QAEnC,QAAA,UAAUC,oBAAa,YAAY,QAAA,UAAUA,MAAA,YAAA,EAAa,uBADlEF,mBAKO,QAAA;AAAA;UAHJ,OAAKG,eAAEF,KAAAA,OAAO,IAAI;AAAA,QAAA,mBAEhB,QAAA,KAAK,GAAA,CAAA,KAGG,QAAA,UAAUC,MAAA,YAAA,EAAa,qBADpCE,YAKE,SAAA;AAAA;UAHC,OAAKD,eAAEF,KAAAA,OAAO,IAAI;AAAA,UAClB,MAAM;AAAA,UACP,MAAK;AAAA,QAAA,0BAGM,QAAA,UAAUC,MAAA,YAAA,EAAa,wBADpCE,YAGE,SAAA;AAAA;UADA,MAAK;AAAA,QAAA,MAGM,QAAA,UAAUF,MAAA,YAAA,EAAa,sBADpCE,YAGE,SAAA;AAAA;UADA,MAAK;AAAA,QAAA,MAGM,QAAA,UAAUF,MAAA,YAAA,EAAa,wBADpCE,YAGE,SAAA;AAAA;UADA,MAAK;AAAA,QAAA,MAGM,QAAA,UAAUF,MAAA,YAAA,EAAa,qBADpCE,YAGE,SAAA;AAAA;UADA,MAAK;AAAA,QAAA;;;;;"}

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

@@ -1,28 +1,16 @@
-import { type GroupData, type GroupKeys, type TableColumn, type TableRowKeyData, type TableSortData } from '../../components/tables/RuiTableHead.vue.js';
+import { type GroupData, type TableColumn, type TableRowKeyData, type TableSortData } from '../../components/tables/RuiTableHead.vue.js';
 import { type TablePaginationData } from '../../components/tables/RuiTablePagination.vue.js';
-export interface TableOptions<T> {
-    pagination?: TablePaginationData;
-    sort?: TableSortData<T>;
-}
-export interface GroupHeader<T> {
-    __header__: true;
-    identifier: string;
-    group: Partial<T>;
-}
-export type GroupedTableRow<T> = T | GroupHeader<T>;
+import { type GroupHeader } from '../../composables/tables/data-table/types.js';
+export type { GroupedTableRow, GroupHeader, TableOptions } from '../../composables/tables/data-table/types.js';
 export interface Props<T, K extends keyof T> {
     /**
      * list of items for each row
      */
-    rows: T[];
+    rows: readonly T[];
     /**
      * the attribute used to identify each row uniquely for selection, usually `id`
      */
     rowAttr: K;
-    /**
-     * model for selected rows, add a v-model to support row selection
-     */
-    modelValue?: T[K][];
     /**
      * model for internal searching
      */
@@ -32,38 +20,6 @@ export interface Props<T, K extends keyof T> {
      * will be used if the `pagination` model isn't specified
      */
     itemsPerPage?: number;
-    /**
-     * model for paginating data
-     * @example v-model:pagination="{ total: 10, limit: 5, page: 1 }"
-     */
-    pagination?: TablePaginationData;
-    /**
-     * modifiers for specifying externally paginated tables
-     * use this when api controls pagination
-     * @example v-model:pagination.external="{ total: 10, limit: 5, page: 1 }"
-     */
-    paginationModifiers?: {
-        external: boolean;
-    };
-    /**
-     * model for sort column/columns data
-     * single column sort
-     * @example v-model:sort="{ column: 'name', direction: 'asc' }"
-     * multi columns sort
-     * @example v-model:sort="[{ column: 'name', direction: 'asc' }]"
-     */
-    sort?: TableSortData<T>;
-    /**
-     * modifiers for specifying externally sorted tables
-     * use this when api controls sorting
-     * single column sort
-     * @example v-model:sort.external="{ column: 'name', direction: 'asc' }"
-     * multi columns sort
-     * @example v-model:sort.external="[{ column: 'name', direction: 'asc' }]"
-     */
-    sortModifiers?: {
-        external: boolean;
-    };
     /**
      * list of column definitions
      */
@@ -108,10 +64,6 @@ export interface Props<T, K extends keyof T> {
      */
     hideDefaultFooter?: boolean;
     rounded?: 'sm' | 'md' | 'lg';
-    /**
-     * model for expanded rows
-     */
-    expanded?: T[];
     /**
      * make expansion work like accordion
      */
@@ -126,31 +78,33 @@ export interface Props<T, K extends keyof T> {
      * When true, changing the items per page setting in one table will affect other tables.
      */
     globalItemsPerPage?: boolean;
-    /**
-     * model for grouping column/columns data
-     * single column grouping
-     * @example v-model:group="'name'"
-     * multi columns grouping
-     * @example v-model:group="['name', 'country']"
-     */
-    group?: TableRowKeyData<T>;
     groupExpandButtonPosition?: 'start' | 'end';
-    collapsed?: T[];
-    disabledRows?: T[];
+    disabledRows?: readonly T[];
     multiPageSelect?: boolean;
-    scroller?: HTMLElement | null;
     itemClass?: ((item: T) => string) | string;
 }
 declare const __VLS_export: <T extends object, IdType extends keyof T = keyof T>(__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<Props<T, IdType> & {
-        "onUpdate:model-value"?: ((value?: T[IdType][] | undefined) => any) | undefined;
-        "onUpdate:expanded"?: ((value: T[]) => any) | undefined;
-        "onUpdate:pagination"?: ((value: TablePaginationData) => any) | undefined;
-        "onUpdate:sort"?: ((value?: TableSortData<T>) => any) | undefined;
-        "onUpdate:options"?: ((value: TableOptions<T>) => any) | undefined;
-        "onUpdate:group"?: ((value?: GroupKeys<T>) => any) | undefined;
-        "onUpdate:collapsed"?: ((value?: T[] | undefined) => any) | undefined;
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<(Props<T, IdType> & {
+        modelValue?: T[IdType][];
+        expanded?: T[];
+        pagination?: TablePaginationData;
+        paginationModifiers?: Partial<Record<"external", true>>;
+        sort?: TableSortData<T>;
+        sortModifiers?: Partial<Record<"external", true>>;
+        group?: TableRowKeyData<T>;
+        collapsed?: T[];
+    }) & {
+        "onUpdate:modelValue"?: ((value: T[IdType][] | undefined) => any) | undefined;
+        "onUpdate:options"?: ((value: {
+            pagination?: TablePaginationData;
+            sort?: TableSortData<T>;
+        }) => any) | undefined;
         "onCopy:group"?: ((value: GroupData<T>) => any) | undefined;
+        "onUpdate:expanded"?: ((value: T[] | undefined) => any) | undefined;
+        "onUpdate:pagination"?: ((value: TablePaginationData | undefined) => any) | undefined;
+        "onUpdate:sort"?: ((value: TableSortData<T>) => any) | undefined;
+        "onUpdate:group"?: ((value: TableRowKeyData<T>) => any) | undefined;
+        "onUpdate:collapsed"?: ((value: T[] | undefined) => any) | undefined;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
@@ -187,16 +141,10 @@ declare const __VLS_export: <T extends object, IdType extends keyof T = keyof T>
         'empty-description': () => any;
         tfoot: () => any;
     }>;
-    emit: {
-        (e: "update:model-value", value?: T[IdType][]): void;
-        (e: "update:expanded", value: T[]): void;
-        (e: "update:pagination", value: TablePaginationData): void;
-        (e: "update:sort", value?: TableSortData<T>): void;
-        (e: "update:options", value: TableOptions<T>): void;
-        (e: "update:group", value?: GroupKeys<T>): void;
-        (e: "update:collapsed", value?: T[]): void;
-        (e: "copy:group", value: GroupData<T>): void;
-    };
+    emit: (((evt: "update:options", value: {
+        pagination?: TablePaginationData;
+        sort?: TableSortData<T>;
+    }) => void) & ((evt: "copy:group", value: GroupData<T>) => void)) & (((event: "update:modelValue", value: T[IdType][] | undefined) => void) & ((event: "update:expanded", value: T[] | undefined) => void) & ((event: "update:pagination", value: TablePaginationData | undefined) => void) & ((event: "update:sort", value: TableSortData<T>) => void) & ((event: "update:group", value: TableRowKeyData<T>) => void) & ((event: "update:collapsed", value: T[] | undefined) => void));
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };