@rotki/ui-library 2.12.2 → 2.13.0

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

@@ -1,10 +1,9 @@
-import { defineComponent, toRefs, computed, ref, watch, nextTick, openBlock, createElementBlock, 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 = ["aria-current"];
 const _hoisted_2 = { class: "relative flex py-2" };
 const _sfc_main = /* @__PURE__ */ defineComponent({
@@ -13,28 +12,25 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   },
   __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,
@@ -42,22 +38,24 @@ 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",
@@ -66,8 +64,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         "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) => {
@@ -89,7 +87,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             }, [
               renderSlot(_ctx.$slots, "icon", mergeProps({ ref_for: true }, { state, index: index + 1 }), () => [
                 createElementVNode("div", _hoisted_2, [
-                  unref(custom) ? (openBlock(), createBlock(RuiStepperCustomIcon, {
+                  __props.custom ? (openBlock(), createBlock(RuiStepperCustomIcon, {
                     key: 0,
                     index: index + 1,
                     state
@@ -115,11 +113,11 @@ 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)
             ], 10, _hoisted_1)

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    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","_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

@@ -4,7 +4,7 @@ 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

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