@rotki/ui-library 2.14.1 → 2.16.0

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

@@ -0,0 +1,232 @@
+import { StepperOrientation, StepperState } from "../../types/stepper.js";
+import { tv } from "../../utils/tv.js";
+import RuiProgress_default from "../progress/RuiProgress.js";
+import RuiStepperCustomIcon_default from "./RuiStepperCustomIcon.js";
+import RuiStepperIcon_default from "./RuiStepperIcon.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, mergeProps, nextTick, normalizeClass, openBlock, renderList, renderSlot, toDisplayString, unref, useTemplateRef, watch } from "vue";
+import { get } from "@vueuse/shared";
+//#region src/components/steppers/RuiStepper.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = [
+	"data-orientation",
+	"data-icon-top",
+	"data-custom"
+];
+var _hoisted_2 = [
+	"aria-current",
+	"data-state",
+	"data-active"
+];
+var _hoisted_3 = { class: "relative flex py-2" };
+var RuiStepper_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "RuiStepper",
+	__name: "RuiStepper",
+	props: {
+		step: {},
+		steps: {},
+		iconTop: {
+			type: Boolean,
+			default: false
+		},
+		custom: {
+			type: Boolean,
+			default: false
+		},
+		classNames: {},
+		titleClass: { default: "" },
+		subtitleClass: { default: "" },
+		orientation: { default: () => StepperOrientation.horizontal },
+		keepActiveVisible: {
+			type: Boolean,
+			default: true
+		}
+	},
+	setup(__props) {
+		const wrapperRef = useTemplateRef("wrapperRef");
+		const stepper = tv({
+			slots: {
+				root: "flex no-scrollbar overflow-auto",
+				step: "flex items-center px-6 relative",
+				title: "",
+				subtitle: "",
+				label: "flex flex-col items-start text-left ml-2",
+				divider: "border-rui-grey-400"
+			},
+			variants: {
+				orientation: {
+					[StepperOrientation.horizontal]: {
+						root: "whitespace-nowrap lg:whitespace-normal",
+						step: "",
+						divider: "block max-w-full min-w-[1rem] h-0 max-h-0 self-center -mx-4 my-0 border-t [flex:1_1_0]"
+					},
+					[StepperOrientation.vertical]: {
+						root: "flex-col inline-flex",
+						step: "px-0 py-6",
+						divider: "block min-h-[3rem] min-w-0 max-h-full h-full self-start -my-4 mx-3 border-l"
+					}
+				},
+				state: {
+					[StepperState.inactive]: {
+						step: "text-rui-text-disabled",
+						title: "text-rui-text-secondary",
+						subtitle: "text-rui-text"
+					},
+					[StepperState.active]: {
+						step: "text-rui-text",
+						title: "",
+						subtitle: "text-rui-text-secondary"
+					},
+					[StepperState.done]: {
+						step: "text-rui-text",
+						title: "",
+						subtitle: "text-rui-text-secondary"
+					},
+					[StepperState.error]: {
+						step: "text-rui-error",
+						title: "",
+						subtitle: ""
+					},
+					[StepperState.warning]: {
+						step: "text-rui-warning",
+						title: "",
+						subtitle: ""
+					},
+					[StepperState.info]: {
+						step: "text-rui-info",
+						title: "",
+						subtitle: ""
+					},
+					[StepperState.success]: {
+						step: "text-rui-success",
+						title: "",
+						subtitle: ""
+					}
+				},
+				iconTop: { true: {
+					step: "flex-col",
+					label: "ml-0 mt-4 items-center text-center"
+				} },
+				custom: {
+					true: {},
+					false: {}
+				}
+			},
+			compoundVariants: [
+				{
+					custom: true,
+					state: StepperState.inactive,
+					class: { step: "text-rui-text" }
+				},
+				{
+					orientation: StepperOrientation.vertical,
+					custom: true,
+					class: { divider: "mx-5" }
+				},
+				{
+					orientation: StepperOrientation.vertical,
+					iconTop: true,
+					class: { divider: "self-center mx-auto" }
+				}
+			],
+			defaultVariants: {
+				state: StepperState.inactive,
+				orientation: StepperOrientation.horizontal,
+				custom: false
+			}
+		});
+		const ui = computed(() => stepper({
+			orientation: __props.orientation,
+			custom: __props.custom,
+			iconTop: __props.iconTop
+		}));
+		function stepUi(state) {
+			return stepper({
+				orientation: __props.orientation,
+				custom: __props.custom,
+				iconTop: __props.iconTop,
+				state
+			});
+		}
+		const renderedStep = computed(() => {
+			if (__props.step === void 0) return __props.steps;
+			return __props.steps.map((item, index) => {
+				let stepStatus = StepperState.inactive;
+				if (index + 1 === __props.step) stepStatus = StepperState.active;
+				if (index + 1 < __props.step) stepStatus = StepperState.done;
+				return {
+					...item,
+					state: stepStatus
+				};
+			});
+		});
+		function resolveState(state) {
+			return state ?? StepperState.inactive;
+		}
+		watch(() => __props.step, () => {
+			if (!__props.keepActiveVisible || __props.orientation !== StepperOrientation.horizontal) return;
+			nextTick(() => {
+				const elem = get(wrapperRef);
+				if (!elem) return;
+				elem.querySelector("[data-active]")?.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(unref(ui).root()),
+				"data-orientation": __props.orientation,
+				"data-icon-top": __props.iconTop || void 0,
+				"data-custom": __props.custom || void 0
+			}, [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(renderedStep), ({ title, description, state, loading }, index) => {
+				return openBlock(), createElementBlock(Fragment, { key: index }, [index > 0 ? (openBlock(), createElementBlock("hr", {
+					key: 0,
+					class: normalizeClass(unref(ui).divider())
+				}, null, 2)) : createCommentVNode("", true), createElementVNode("div", {
+					role: "listitem",
+					"aria-current": state === unref(StepperState).active ? "step" : void 0,
+					"data-state": resolveState(state),
+					"data-active": state === unref(StepperState).active || void 0,
+					class: normalizeClass(stepUi(resolveState(state)).step())
+				}, [renderSlot(_ctx.$slots, "icon", mergeProps({ ref_for: true }, {
+					state,
+					index: index + 1
+				}), () => [createElementVNode("div", _hoisted_3, [__props.custom ? (openBlock(), createBlock(RuiStepperCustomIcon_default, {
+					key: 0,
+					index: index + 1,
+					state
+				}, null, 8, ["index", "state"])) : (openBlock(), createBlock(RuiStepperIcon_default, {
+					key: 1,
+					index: index + 1,
+					state
+				}, null, 8, ["index", "state"])), loading ? (openBlock(), createBlock(RuiProgress_default, {
+					key: 2,
+					class: "absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2",
+					size: "32",
+					variant: "indeterminate",
+					circular: "",
+					thickness: "2",
+					color: "primary"
+				})) : createCommentVNode("", true)])]), title || description ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					class: normalizeClass(unref(ui).label()),
+					"data-id": "stepper-label"
+				}, [title ? (openBlock(), createElementBlock("span", {
+					key: 0,
+					class: normalizeClass([[stepUi(resolveState(state)).title(), __props.custom && (__props.classNames?.title ?? __props.titleClass)], "text-subtitle-2"])
+				}, toDisplayString(title), 3)) : createCommentVNode("", true), description ? (openBlock(), createElementBlock("span", {
+					key: 1,
+					class: normalizeClass([[stepUi(resolveState(state)).subtitle(), __props.custom && (__props.classNames?.subtitle ?? __props.subtitleClass)], "text-caption"])
+				}, toDisplayString(description), 3)) : createCommentVNode("", true)], 2)) : createCommentVNode("", true)], 10, _hoisted_2)], 64);
+			}), 128))], 10, _hoisted_1);
+		};
+	}
+});
+//#endregion
+export { RuiStepper_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=RuiStepper.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RuiStepper.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/steppers/RuiStepper.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { VueClassValue } from '@/types/class-value';\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';\nimport { tv } from '@/utils/tv';\n\nexport interface RuiStepperClassNames {\n  root?: VueClassValue;\n  title?: VueClassValue;\n  subtitle?: VueClassValue;\n}\n\nexport interface Props {\n  step?: number;\n  steps: StepperStep[];\n  iconTop?: boolean;\n  custom?: boolean;\n  classNames?: RuiStepperClassNames;\n  /** @deprecated Use `classNames.title` instead */\n  titleClass?: string;\n  /** @deprecated Use `classNames.subtitle` instead */\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  classNames,\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\nconst stepper = tv({\n  slots: {\n    root: 'flex no-scrollbar overflow-auto',\n    step: 'flex items-center px-6 relative',\n    title: '',\n    subtitle: '',\n    label: 'flex flex-col items-start text-left ml-2',\n    divider: 'border-rui-grey-400',\n  },\n  variants: {\n    orientation: {\n      [StepperOrientation.horizontal]: {\n        root: 'whitespace-nowrap lg:whitespace-normal',\n        step: '',\n        divider: 'block max-w-full min-w-[1rem] h-0 max-h-0 self-center -mx-4 my-0 border-t [flex:1_1_0]',\n      },\n      [StepperOrientation.vertical]: {\n        root: 'flex-col inline-flex',\n        step: 'px-0 py-6',\n        divider: 'block min-h-[3rem] min-w-0 max-h-full h-full self-start -my-4 mx-3 border-l',\n      },\n    },\n    state: {\n      [StepperState.inactive]: {\n        step: 'text-rui-text-disabled',\n        title: 'text-rui-text-secondary',\n        subtitle: 'text-rui-text',\n      },\n      [StepperState.active]: {\n        step: 'text-rui-text',\n        title: '',\n        subtitle: 'text-rui-text-secondary',\n      },\n      [StepperState.done]: {\n        step: 'text-rui-text',\n        title: '',\n        subtitle: 'text-rui-text-secondary',\n      },\n      [StepperState.error]: {\n        step: 'text-rui-error',\n        title: '',\n        subtitle: '',\n      },\n      [StepperState.warning]: {\n        step: 'text-rui-warning',\n        title: '',\n        subtitle: '',\n      },\n      [StepperState.info]: {\n        step: 'text-rui-info',\n        title: '',\n        subtitle: '',\n      },\n      [StepperState.success]: {\n        step: 'text-rui-success',\n        title: '',\n        subtitle: '',\n      },\n    },\n    iconTop: {\n      true: {\n        step: 'flex-col',\n        label: 'ml-0 mt-4 items-center text-center',\n      },\n    },\n    custom: {\n      true: {},\n      false: {},\n    },\n  },\n  compoundVariants: [\n    { custom: true, state: StepperState.inactive, class: { step: 'text-rui-text' } },\n    { orientation: StepperOrientation.vertical, custom: true, class: { divider: 'mx-5' } },\n    { orientation: StepperOrientation.vertical, iconTop: true, class: { divider: 'self-center mx-auto' } },\n  ],\n  defaultVariants: {\n    state: StepperState.inactive,\n    orientation: StepperOrientation.horizontal,\n    custom: false,\n  },\n});\n\n// Shared UI for layout props (no per-item state)\nconst ui = computed<ReturnType<typeof stepper>>(() => stepper({ orientation, custom, iconTop }));\n\n// Per-item UI that includes the step's state\nfunction stepUi(state: StepperState): ReturnType<typeof stepper> {\n  return stepper({ orientation, custom, iconTop, state });\n}\n\n// automatically set step state to stepper.\nconst renderedStep = computed<StepperStep[]>(() => {\n  if (step === undefined)\n    return steps;\n\n  return steps.map((item, 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      ...item,\n      state: stepStatus,\n    };\n  });\n});\n\nfunction resolveState(state: StepperState | undefined): StepperState {\n  return state ?? StepperState.inactive;\n}\n\nwatch(() => step, () => {\n  if (!keepActiveVisible || orientation !== StepperOrientation.horizontal) {\n    return;\n  }\n\n  nextTick(() => {\n    const elem = get(wrapperRef);\n    if (!elem) {\n      return;\n    }\n    const activeStep = elem.querySelector('[data-active]');\n    activeStep?.scrollIntoView?.({\n      behavior: 'smooth',\n      inline: 'center',\n    });\n  });\n});\n</script>\n\n<template>\n  <div\n    ref=\"wrapperRef\"\n    role=\"list\"\n    aria-label=\"Progress steps\"\n    :class=\"ui.root()\"\n    :data-orientation=\"orientation\"\n    :data-icon-top=\"iconTop || undefined\"\n    :data-custom=\"custom || undefined\"\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=\"ui.divider()\"\n      />\n      <div\n        role=\"listitem\"\n        :aria-current=\"state === StepperState.active ? 'step' : undefined\"\n        :data-state=\"resolveState(state)\"\n        :data-active=\"state === StepperState.active || undefined\"\n        :class=\"stepUi(resolveState(state)).step()\"\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=\"ui.label()\"\n          data-id=\"stepper-label\"\n        >\n          <span\n            v-if=\"title\"\n            :class=\"[stepUi(resolveState(state)).title(), custom && (classNames?.title ?? titleClass)]\"\n            class=\"text-subtitle-2\"\n          >\n            {{ title }}\n          </span>\n          <span\n            v-if=\"description\"\n            :class=\"[stepUi(resolveState(state)).subtitle(), custom && (classNames?.subtitle ?? subtitleClass)]\"\n            class=\"text-caption\"\n          >\n            {{ description }}\n          </span>\n        </div>\n      </div>\n    </template>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgDA,MAAM,aAAa,eAA+B,aAAa;EAE/D,MAAM,UAAU,GAAG;GACjB,OAAO;IACL,MAAM;IACN,MAAM;IACN,OAAO;IACP,UAAU;IACV,OAAO;IACP,SAAS;IACV;GACD,UAAU;IACR,aAAa;MACV,mBAAmB,aAAa;MAC/B,MAAM;MACN,MAAM;MACN,SAAS;MACV;MACA,mBAAmB,WAAW;MAC7B,MAAM;MACN,MAAM;MACN,SAAS;;KAEZ;IACD,OAAO;MACJ,aAAa,WAAW;MACvB,MAAM;MACN,OAAO;MACP,UAAU;MACX;MACA,aAAa,SAAS;MACrB,MAAM;MACN,OAAO;MACP,UAAU;MACX;MACA,aAAa,OAAO;MACnB,MAAM;MACN,OAAO;MACP,UAAU;MACX;MACA,aAAa,QAAQ;MACpB,MAAM;MACN,OAAO;MACP,UAAU;MACX;MACA,aAAa,UAAU;MACtB,MAAM;MACN,OAAO;MACP,UAAU;MACX;MACA,aAAa,OAAO;MACnB,MAAM;MACN,OAAO;MACP,UAAU;MACX;MACA,aAAa,UAAU;MACtB,MAAM;MACN,OAAO;MACP,UAAU;;KAEb;IACD,SAAS,EACP,MAAM;KACJ,MAAM;KACN,OAAO;KACR,EACF;IACD,QAAQ;KACN,MAAM,EAAE;KACR,OAAO,EAAA;;IAEV;GACD,kBAAkB;IAChB;KAAE,QAAQ;KAAM,OAAO,aAAa;KAAU,OAAO,EAAE,MAAM,iBAAA;KAAmB;IAChF;KAAE,aAAa,mBAAmB;KAAU,QAAQ;KAAM,OAAO,EAAE,SAAS,QAAA;KAAU;IACtF;KAAE,aAAa,mBAAmB;KAAU,SAAS;KAAM,OAAO,EAAE,SAAS,uBAAA;;IAC9E;GACD,iBAAiB;IACf,OAAO,aAAa;IACpB,aAAa,mBAAmB;IAChC,QAAQ;;GAEX,CAAC;EAGF,MAAM,KAAK,eAA2C,QAAQ;GAAE,aAAU,QAAA;GAAG,QAAK,QAAA;GAAG,SAAM,QAAA;GAAG,CAAC,CAAC;EAGhG,SAAS,OAAO,OAAiD;AAC/D,UAAO,QAAQ;IAAE,aAAU,QAAA;IAAG,QAAK,QAAA;IAAG,SAAM,QAAA;IAAG;IAAO,CAAC;;EAIzD,MAAM,eAAe,eAA8B;AACjD,OAAI,QAAA,SAAS,KAAA,EACX,QAAO,QAAA;AAET,UAAO,QAAA,MAAM,KAAK,MAAM,UAAU;IAChC,IAAI,aAA2B,aAAa;AAE5C,QAAI,QAAQ,MAAM,QAAA,KAChB,cAAa,aAAa;AAE5B,QAAI,QAAQ,IAAI,QAAA,KACd,cAAa,aAAa;AAE5B,WAAO;KACL,GAAG;KACH,OAAO;KACR;KACD;IACF;EAEF,SAAS,aAAa,OAA+C;AACnE,UAAO,SAAS,aAAa;;AAG/B,cAAY,QAAA,YAAY;AACtB,OAAI,CAAC,QAAA,qBAAqB,QAAA,gBAAgB,mBAAmB,WAC3D;AAGF,kBAAe;IACb,MAAM,OAAO,IAAI,WAAW;AAC5B,QAAI,CAAC,KACH;AAEiB,SAAK,cAAc,gBAAgB,EAC1C,iBAAiB;KAC3B,UAAU;KACV,QAAQ;KACT,CAAC;KACF;IACF;;uBAIA,mBAwEM,OAAA;aAvEA;IAAJ,KAAI;IACJ,MAAK;IACL,cAAW;IACV,OAAK,eAAE,MAAA,GAAE,CAAC,MAAI,CAAA;IACd,oBAAkB,QAAA;IAClB,iBAAe,QAAA,WAAW,KAAA;IAC1B,eAAa,QAAA,UAAU,KAAA;yBAExB,mBA8DW,UAAA,MAAA,WA7DiD,MAAA,aAAY,GAAA,EAA5D,OAAO,aAAa,OAAO,WAAW,UAAK;4DAC/C,OAAK,EAAA,CAGH,QAAK,KAAA,WAAA,EADb,mBAGE,MAAA;;KADC,OAAK,eAAE,MAAA,GAAE,CAAC,SAAO,CAAA;iDAEpB,mBAqDM,OAAA;KApDJ,MAAK;KACJ,gBAAc,UAAU,MAAA,aAAY,CAAC,SAAM,SAAY,KAAA;KACvD,cAAY,aAAa,MAAK;KAC9B,eAAa,UAAU,MAAA,aAAY,CAAC,UAAU,KAAA;KAC9C,OAAK,eAAE,OAAO,aAAa,MAAK,CAAA,CAAG,MAAI,CAAA;QAExC,WAyBO,KAAA,QAAA,QAzBP,WAyBO,EAAA,SAAA,MAAA,EAAA;KAvBK;KAAK,OAAS,QAAK;KAAA,CAAA,QAuBxB,CArBL,mBAoBM,OApBN,YAoBM,CAlBI,QAAA,UAAA,WAAA,EADR,YAIE,8BAAA;;KAFC,OAAO,QAAK;KACL;qDAEV,YAIE,wBAAA;;KAFC,OAAO,QAAK;KACL;sCAGF,WAAA,WAAA,EADR,YAQE,qBAAA;;KANA,OAAM;KACN,MAAK;KACL,SAAQ;KACR,UAAA;KACA,WAAU;KACV,OAAM;4CAKJ,SAAS,eAAA,WAAA,EADjB,mBAmBM,OAAA;;KAjBH,OAAK,eAAE,MAAA,GAAE,CAAC,OAAK,CAAA;KAChB,WAAQ;QAGA,SAAA,WAAA,EADR,mBAMO,QAAA;;KAJJ,OAAK,eAAA,CAAA,CAAG,OAAO,aAAa,MAAK,CAAA,CAAG,OAAK,EAAI,QAAA,WAAW,QAAA,YAAY,SAAS,QAAA,YAAU,EAClF,kBAAiB,CAAA;uBAEpB,MAAK,EAAA,EAAA,IAAA,mBAAA,IAAA,KAAA,EAGF,eAAA,WAAA,EADR,mBAMO,QAAA;;KAJJ,OAAK,eAAA,CAAA,CAAG,OAAO,aAAa,MAAK,CAAA,CAAG,UAAQ,EAAI,QAAA,WAAW,QAAA,YAAY,YAAY,QAAA,eAAa,EAC3F,eAAc,CAAA;uBAEjB,YAAW,EAAA,EAAA,IAAA,mBAAA,IAAA,KAAA,CAAA,EAAA,EAAA,IAAA,mBAAA,IAAA,KAAA,CAAA,EAAA,IAAA,WAAA,CAAA,EAAA,GAAA"}

package/dist/components/steppers/RuiStepperCustomIcon.js

@@ -0,0 +1,7 @@
+import RuiStepperCustomIcon_vue_vue_type_script_setup_true_lang_default from "./RuiStepperCustomIcon.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/steppers/RuiStepperCustomIcon.vue
+var RuiStepperCustomIcon_default = RuiStepperCustomIcon_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { RuiStepperCustomIcon_default as default };
+
+//# sourceMappingURL=RuiStepperCustomIcon.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RuiStepperCustomIcon.js","names":[],"sources":["../../../src/components/steppers/RuiStepperCustomIcon.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { StepperState } from '@/types/stepper';\nimport { tv } from '@/utils/tv';\n\ntype IndicatorState = typeof StepperState.inactive | typeof StepperState.active;\n\nconst { state = StepperState.inactive } = defineProps<{\n  state?: StepperState;\n  index: number;\n}>();\n\nconst stepperCustomIcon = tv({\n  base: 'inline-flex items-center justify-center rounded-full h-10 w-10 shrink-0 border border-rui-primary',\n  variants: {\n    state: {\n      [StepperState.inactive]: 'text-xs bg-white dark:bg-rui-primary dark:text-white dark:border-white',\n      [StepperState.active]: 'text-white bg-rui-primary dark:bg-white dark:text-rui-primary',\n    },\n  },\n  defaultVariants: { state: StepperState.active },\n});\n\nconst indicatorState = computed<IndicatorState>(() => state === StepperState.inactive ? StepperState.inactive : StepperState.active);\n</script>\n\n<template>\n  <span :class=\"stepperCustomIcon({ state: indicatorState })\">\n    <span\n      v-if=\"state === StepperState.inactive\"\n      class=\"text-rui-primary dark:text-white\"\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      :size=\"20\"\n      name=\"lu-check\"\n    />\n    <span v-else>\n      {{ index }}\n    </span>\n  </span>\n</template>\n"],"mappings":""}

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

@@ -0,0 +1,43 @@
+import { StepperState } from "../../types/stepper.js";
+import { tv } from "../../utils/tv.js";
+import RuiIcon_default from "../icons/RuiIcon.js";
+import { computed, createBlock, createElementBlock, defineComponent, normalizeClass, openBlock, toDisplayString, unref } from "vue";
+//#region src/components/steppers/RuiStepperCustomIcon.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = {
+	key: 0,
+	class: "text-rui-primary dark:text-white"
+};
+var _hoisted_2 = { key: 3 };
+var RuiStepperCustomIcon_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "RuiStepperCustomIcon",
+	props: {
+		state: { default: () => StepperState.inactive },
+		index: {}
+	},
+	setup(__props) {
+		const stepperCustomIcon = tv({
+			base: "inline-flex items-center justify-center rounded-full h-10 w-10 shrink-0 border border-rui-primary",
+			variants: { state: {
+				[StepperState.inactive]: "text-xs bg-white dark:bg-rui-primary dark:text-white dark:border-white",
+				[StepperState.active]: "text-white bg-rui-primary dark:bg-white dark:text-rui-primary"
+			} },
+			defaultVariants: { state: StepperState.active }
+		});
+		const indicatorState = computed(() => __props.state === StepperState.inactive ? StepperState.inactive : StepperState.active);
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("span", { class: normalizeClass(unref(stepperCustomIcon)({ state: unref(indicatorState) })) }, [__props.state === unref(StepperState).inactive ? (openBlock(), createElementBlock("span", _hoisted_1, toDisplayString(__props.index), 1)) : __props.state === unref(StepperState).active ? (openBlock(), createBlock(RuiIcon_default, {
+				key: 1,
+				name: "lu-checkbox-blank-circle-fill",
+				size: 20
+			})) : __props.state === unref(StepperState).done ? (openBlock(), createBlock(RuiIcon_default, {
+				key: 2,
+				size: 20,
+				name: "lu-check"
+			})) : (openBlock(), createElementBlock("span", _hoisted_2, toDisplayString(__props.index), 1))], 2);
+		};
+	}
+});
+//#endregion
+export { RuiStepperCustomIcon_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=RuiStepperCustomIcon.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RuiStepperCustomIcon.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/steppers/RuiStepperCustomIcon.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { StepperState } from '@/types/stepper';\nimport { tv } from '@/utils/tv';\n\ntype IndicatorState = typeof StepperState.inactive | typeof StepperState.active;\n\nconst { state = StepperState.inactive } = defineProps<{\n  state?: StepperState;\n  index: number;\n}>();\n\nconst stepperCustomIcon = tv({\n  base: 'inline-flex items-center justify-center rounded-full h-10 w-10 shrink-0 border border-rui-primary',\n  variants: {\n    state: {\n      [StepperState.inactive]: 'text-xs bg-white dark:bg-rui-primary dark:text-white dark:border-white',\n      [StepperState.active]: 'text-white bg-rui-primary dark:bg-white dark:text-rui-primary',\n    },\n  },\n  defaultVariants: { state: StepperState.active },\n});\n\nconst indicatorState = computed<IndicatorState>(() => state === StepperState.inactive ? StepperState.inactive : StepperState.active);\n</script>\n\n<template>\n  <span :class=\"stepperCustomIcon({ state: indicatorState })\">\n    <span\n      v-if=\"state === StepperState.inactive\"\n      class=\"text-rui-primary dark:text-white\"\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      :size=\"20\"\n      name=\"lu-check\"\n    />\n    <span v-else>\n      {{ index }}\n    </span>\n  </span>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;EAYA,MAAM,oBAAoB,GAAG;GAC3B,MAAM;GACN,UAAU,EACR,OAAO;KACJ,aAAa,WAAW;KACxB,aAAa,SAAS;IACxB,EACF;GACD,iBAAiB,EAAE,OAAO,aAAa,QAAA;GACxC,CAAC;EAEF,MAAM,iBAAiB,eAA+B,QAAA,UAAU,aAAa,WAAW,aAAa,WAAW,aAAa,OAAO;;uBAIlI,mBAoBO,QAAA,EApBA,OAAK,eAAE,MAAA,kBAAiB,CAAA,EAAA,OAAU,MAAA,eAAc,EAAA,CAAA,CAAA,EAAA,EAAA,CAE7C,QAAA,UAAU,MAAA,aAAY,CAAC,YAAA,WAAA,EAD/B,mBAKO,QALP,YAKO,gBADF,QAAA,MAAK,EAAA,EAAA,IAGG,QAAA,UAAU,MAAA,aAAY,CAAC,UAAA,WAAA,EADpC,YAIE,iBAAA;;IAFA,MAAK;IACJ,MAAM;SAGI,QAAA,UAAU,MAAA,aAAY,CAAC,QAAA,WAAA,EADpC,YAIE,iBAAA;;IAFC,MAAM;IACP,MAAK;uBAEP,mBAEO,QAAA,YAAA,gBADF,QAAA,MAAK,EAAA,EAAA,EAAA,EAAA,EAAA"}

package/dist/components/steppers/RuiStepperIcon.js

@@ -0,0 +1,7 @@
+import RuiStepperIcon_vue_vue_type_script_setup_true_lang_default from "./RuiStepperIcon.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/steppers/RuiStepperIcon.vue
+var RuiStepperIcon_default = RuiStepperIcon_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { RuiStepperIcon_default as default };
+
+//# sourceMappingURL=RuiStepperIcon.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RuiStepperIcon.js","names":[],"sources":["../../../src/components/steppers/RuiStepperIcon.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { RuiIcons } from '@/icons';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { StepperState } from '@/types/stepper';\nimport { tv } from '@/utils/tv';\n\ninterface StateIconProps {\n  name: RuiIcons;\n  class?: string;\n  size?: number;\n}\n\nconst { state = StepperState.inactive, index } = defineProps<{\n  state?: StepperState;\n  index: number;\n}>();\n\nconst stateIconMap: Partial<Record<StepperState, StateIconProps>> = {\n  [StepperState.done]: { name: 'lu-check', class: 'text-rui-dark-text dark:text-rui-light-text', size: 20 },\n  [StepperState.success]: { name: 'lu-circle-check' },\n  [StepperState.error]: { name: 'lu-circle-alert' },\n  [StepperState.warning]: { name: 'lu-triangle-alert' },\n  [StepperState.info]: { name: 'lu-info' },\n};\n\nconst stepperIcon = tv({\n  slots: {\n    indicator: 'inline-flex items-center justify-center rounded-full h-6 w-6',\n    label: 'text-rui-dark-text',\n  },\n  variants: {\n    state: {\n      [StepperState.inactive]: {\n        indicator: 'bg-current text-xs',\n        label: 'dark:text-rui-light-text-secondary',\n      },\n      [StepperState.active]: {\n        indicator: 'bg-rui-primary text-xs',\n        label: 'dark:text-rui-light-text',\n      },\n      [StepperState.done]: {\n        indicator: 'bg-rui-primary text-xs',\n        label: 'dark:text-rui-light-text',\n      },\n      [StepperState.error]: {},\n      [StepperState.warning]: {},\n      [StepperState.info]: {},\n      [StepperState.success]: {},\n    },\n  },\n  defaultVariants: { state: StepperState.inactive },\n});\n\nconst ui = computed<ReturnType<typeof stepperIcon>>(() => stepperIcon({ state }));\n\nconst showLabel = computed<boolean>(() => state === StepperState.inactive || state === StepperState.active);\n\nconst iconProps = computed<StateIconProps | undefined>(() => stateIconMap[state]);\n</script>\n\n<template>\n  <span :class=\"ui.indicator()\">\n    <span\n      v-if=\"showLabel\"\n      :class=\"ui.label()\"\n    >\n      {{ index }}\n    </span>\n    <RuiIcon\n      v-else-if=\"iconProps\"\n      :name=\"iconProps.name\"\n      :class=\"iconProps.class\"\n      :size=\"iconProps.size\"\n    />\n  </span>\n</template>\n"],"mappings":""}

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

@@ -0,0 +1,72 @@
+import { StepperState } from "../../types/stepper.js";
+import { tv } from "../../utils/tv.js";
+import RuiIcon_default from "../icons/RuiIcon.js";
+import { computed, createBlock, createCommentVNode, createElementBlock, defineComponent, normalizeClass, openBlock, toDisplayString, unref } from "vue";
+//#region src/components/steppers/RuiStepperIcon.vue?vue&type=script&setup=true&lang.ts
+var RuiStepperIcon_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "RuiStepperIcon",
+	props: {
+		state: { default: () => StepperState.inactive },
+		index: {}
+	},
+	setup(__props) {
+		const stateIconMap = {
+			[StepperState.done]: {
+				name: "lu-check",
+				class: "text-rui-dark-text dark:text-rui-light-text",
+				size: 20
+			},
+			[StepperState.success]: { name: "lu-circle-check" },
+			[StepperState.error]: { name: "lu-circle-alert" },
+			[StepperState.warning]: { name: "lu-triangle-alert" },
+			[StepperState.info]: { name: "lu-info" }
+		};
+		const stepperIcon = tv({
+			slots: {
+				indicator: "inline-flex items-center justify-center rounded-full h-6 w-6",
+				label: "text-rui-dark-text"
+			},
+			variants: { state: {
+				[StepperState.inactive]: {
+					indicator: "bg-current text-xs",
+					label: "dark:text-rui-light-text-secondary"
+				},
+				[StepperState.active]: {
+					indicator: "bg-rui-primary text-xs",
+					label: "dark:text-rui-light-text"
+				},
+				[StepperState.done]: {
+					indicator: "bg-rui-primary text-xs",
+					label: "dark:text-rui-light-text"
+				},
+				[StepperState.error]: {},
+				[StepperState.warning]: {},
+				[StepperState.info]: {},
+				[StepperState.success]: {}
+			} },
+			defaultVariants: { state: StepperState.inactive }
+		});
+		const ui = computed(() => stepperIcon({ state: __props.state }));
+		const showLabel = computed(() => __props.state === StepperState.inactive || __props.state === StepperState.active);
+		const iconProps = computed(() => stateIconMap[__props.state]);
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("span", { class: normalizeClass(unref(ui).indicator()) }, [unref(showLabel) ? (openBlock(), createElementBlock("span", {
+				key: 0,
+				class: normalizeClass(unref(ui).label())
+			}, toDisplayString(__props.index), 3)) : unref(iconProps) ? (openBlock(), createBlock(RuiIcon_default, {
+				key: 1,
+				name: unref(iconProps).name,
+				class: normalizeClass(unref(iconProps).class),
+				size: unref(iconProps).size
+			}, null, 8, [
+				"name",
+				"class",
+				"size"
+			])) : createCommentVNode("", true)], 2);
+		};
+	}
+});
+//#endregion
+export { RuiStepperIcon_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=RuiStepperIcon.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RuiStepperIcon.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/steppers/RuiStepperIcon.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { RuiIcons } from '@/icons';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { StepperState } from '@/types/stepper';\nimport { tv } from '@/utils/tv';\n\ninterface StateIconProps {\n  name: RuiIcons;\n  class?: string;\n  size?: number;\n}\n\nconst { state = StepperState.inactive, index } = defineProps<{\n  state?: StepperState;\n  index: number;\n}>();\n\nconst stateIconMap: Partial<Record<StepperState, StateIconProps>> = {\n  [StepperState.done]: { name: 'lu-check', class: 'text-rui-dark-text dark:text-rui-light-text', size: 20 },\n  [StepperState.success]: { name: 'lu-circle-check' },\n  [StepperState.error]: { name: 'lu-circle-alert' },\n  [StepperState.warning]: { name: 'lu-triangle-alert' },\n  [StepperState.info]: { name: 'lu-info' },\n};\n\nconst stepperIcon = tv({\n  slots: {\n    indicator: 'inline-flex items-center justify-center rounded-full h-6 w-6',\n    label: 'text-rui-dark-text',\n  },\n  variants: {\n    state: {\n      [StepperState.inactive]: {\n        indicator: 'bg-current text-xs',\n        label: 'dark:text-rui-light-text-secondary',\n      },\n      [StepperState.active]: {\n        indicator: 'bg-rui-primary text-xs',\n        label: 'dark:text-rui-light-text',\n      },\n      [StepperState.done]: {\n        indicator: 'bg-rui-primary text-xs',\n        label: 'dark:text-rui-light-text',\n      },\n      [StepperState.error]: {},\n      [StepperState.warning]: {},\n      [StepperState.info]: {},\n      [StepperState.success]: {},\n    },\n  },\n  defaultVariants: { state: StepperState.inactive },\n});\n\nconst ui = computed<ReturnType<typeof stepperIcon>>(() => stepperIcon({ state }));\n\nconst showLabel = computed<boolean>(() => state === StepperState.inactive || state === StepperState.active);\n\nconst iconProps = computed<StateIconProps | undefined>(() => stateIconMap[state]);\n</script>\n\n<template>\n  <span :class=\"ui.indicator()\">\n    <span\n      v-if=\"showLabel\"\n      :class=\"ui.label()\"\n    >\n      {{ index }}\n    </span>\n    <RuiIcon\n      v-else-if=\"iconProps\"\n      :name=\"iconProps.name\"\n      :class=\"iconProps.class\"\n      :size=\"iconProps.size\"\n    />\n  </span>\n</template>\n"],"mappings":";;;;;;;;;;;;EAiBA,MAAM,eAA8D;IACjE,aAAa,OAAO;IAAE,MAAM;IAAY,OAAO;IAA+C,MAAM;IAAI;IACxG,aAAa,UAAU,EAAE,MAAM,mBAAmB;IAClD,aAAa,QAAQ,EAAE,MAAM,mBAAmB;IAChD,aAAa,UAAU,EAAE,MAAM,qBAAqB;IACpD,aAAa,OAAO,EAAE,MAAM,WAAA;GAC9B;EAED,MAAM,cAAc,GAAG;GACrB,OAAO;IACL,WAAW;IACX,OAAO;IACR;GACD,UAAU,EACR,OAAO;KACJ,aAAa,WAAW;KACvB,WAAW;KACX,OAAO;KACR;KACA,aAAa,SAAS;KACrB,WAAW;KACX,OAAO;KACR;KACA,aAAa,OAAO;KACnB,WAAW;KACX,OAAO;KACR;KACA,aAAa,QAAQ,EAAE;KACvB,aAAa,UAAU,EAAE;KACzB,aAAa,OAAO,EAAE;KACtB,aAAa,UAAU,EAAA;IACzB,EACF;GACD,iBAAiB,EAAE,OAAO,aAAa,UAAA;GACxC,CAAC;EAEF,MAAM,KAAK,eAA+C,YAAY,EAAE,OAAI,QAAA,OAAG,CAAC,CAAC;EAEjF,MAAM,YAAY,eAAwB,QAAA,UAAU,aAAa,YAAY,QAAA,UAAU,aAAa,OAAO;EAE3G,MAAM,YAAY,eAA2C,aAAa,QAAA,OAAO;;uBAI/E,mBAaO,QAAA,EAbA,OAAK,eAAE,MAAA,GAAE,CAAC,WAAS,CAAA,EAAA,EAAA,CAEhB,MAAA,UAAS,IAAA,WAAA,EADjB,mBAKO,QAAA;;IAHJ,OAAK,eAAE,MAAA,GAAE,CAAC,OAAK,CAAA;sBAEb,QAAA,MAAK,EAAA,EAAA,IAGG,MAAA,UAAS,IAAA,WAAA,EADtB,YAKE,iBAAA;;IAHC,MAAM,MAAA,UAAS,CAAC;IAChB,OAAK,eAAE,MAAA,UAAS,CAAC,MAAK;IACtB,MAAM,MAAA,UAAS,CAAC"}

package/dist/components/steppers/footer-stepper-variant.d.ts

@@ -0,0 +1,7 @@
+export declare const FooterStepperVariant: {
+    readonly numeric: "numeric";
+    readonly bullet: "bullet";
+    readonly progress: "progress";
+    readonly pill: "pill";
+};
+export type FooterStepperVariant = (typeof FooterStepperVariant)[keyof typeof FooterStepperVariant];

package/dist/components/steppers/footer-stepper-variant.js

@@ -0,0 +1,11 @@
+//#region src/components/steppers/footer-stepper-variant.ts
+var FooterStepperVariant = {
+	numeric: "numeric",
+	bullet: "bullet",
+	progress: "progress",
+	pill: "pill"
+};
+//#endregion
+export { FooterStepperVariant };
+
+//# sourceMappingURL=footer-stepper-variant.js.map

package/dist/components/steppers/footer-stepper-variant.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"footer-stepper-variant.js","names":[],"sources":["../../../src/components/steppers/footer-stepper-variant.ts"],"sourcesContent":["export const FooterStepperVariant = {\n  numeric: 'numeric',\n  bullet: 'bullet',\n  progress: 'progress',\n  pill: 'pill',\n} as const;\n\nexport type FooterStepperVariant = (typeof FooterStepperVariant)[keyof typeof FooterStepperVariant];\n"],"mappings":";AAAA,IAAa,uBAAuB;CAClC,SAAS;CACT,QAAQ;CACR,UAAU;CACV,MAAM;CACP"}

package/dist/components/tables/RuiDataTable.js

@@ -0,0 +1,7 @@
+import RuiDataTable_vue_vue_type_script_setup_true_lang_default from "./RuiDataTable.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/tables/RuiDataTable.vue
+var RuiDataTable_default = RuiDataTable_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { RuiDataTable_default as default };
+
+//# sourceMappingURL=RuiDataTable.js.map

package/dist/components/tables/RuiDataTable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RuiDataTable.js","names":[],"sources":["../../../src/components/tables/RuiDataTable.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"T extends object, IdType extends keyof T = keyof T\">\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport RuiCheckbox from '@/components/forms/checkbox/RuiCheckbox.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport RuiTooltip from '@/components/overlays/tooltip/RuiTooltip.vue';\nimport RuiProgress from '@/components/progress/RuiProgress.vue';\nimport { dataTableStyles, getAlignClass } from '@/components/tables/data-table-styles';\nimport RuiExpandButton from '@/components/tables/RuiExpandButton.vue';\nimport RuiTableEmptyState from '@/components/tables/RuiTableEmptyState.vue';\nimport RuiTableHead, {\n  type GroupData,\n  type TableColumn,\n  type TableRowKeyData,\n  type TableSortData,\n} from '@/components/tables/RuiTableHead.vue';\nimport RuiTablePagination, {\n  type TablePaginationData,\n} from '@/components/tables/RuiTablePagination.vue';\nimport { useTable } from '@/composables/defaults/table';\nimport { useStickyTableHeader } from '@/composables/sticky-header';\nimport { useTableColumns } from '@/composables/tables/data-table/columns';\nimport { useTableExpansion } from '@/composables/tables/data-table/expansion';\nimport { useTableGrouping } from '@/composables/tables/data-table/grouping';\nimport { useTablePagination } from '@/composables/tables/data-table/pagination';\nimport { useTableSelection } from '@/composables/tables/data-table/selection';\nimport { useTableSort } from '@/composables/tables/data-table/sort';\nimport { type GroupHeader, isRow } from '@/composables/tables/data-table/types';\n\nexport type { GroupedTableRow, GroupHeader, TableOptions } from '@/composables/tables/data-table/types';\n\nexport interface Props<T, K extends keyof T> {\n  /**\n   * list of items for each row\n   */\n  rows: readonly T[];\n  /**\n   * the attribute used to identify each row uniquely for selection, usually `id`\n   */\n  rowAttr: K;\n  /**\n   * model for internal searching\n   */\n  search?: string;\n  /**\n   * model for items per page\n   * will be used if the `pagination` model isn't specified\n   */\n  itemsPerPage?: number;\n  /**\n   * list of column definitions\n   */\n  cols?: TableColumn<T>[];\n  /**\n   * attribute to use from column definitions to display column titles\n   */\n  columnAttr?: keyof TableColumn<T>;\n  /**\n   * flag to show a more or less spacious table\n   */\n  dense?: boolean;\n  /**\n   * flag to outline the flag with a border\n   */\n  outlined?: boolean;\n  /**\n   * should add zebra-striping to the table row\n   */\n  striped?: boolean;\n  /**\n   * flag to show loading state of the table\n   * triggers indefinite progress at the bottom of the table header\n   */\n  loading?: boolean;\n  disablePerPage?: boolean;\n  /**\n   * Maximum number of pages before the jump-to-page dropdown is replaced with\n   * a numeric input. Defaults to `500`. Forwarded to `RuiTablePagination`.\n   */\n  rangesThreshold?: number;\n  /**\n   * data to display for empty state\n   * text and icon\n   * @example :empty=\"{ icon: 'transactions-line', label: 'No transactions found' }\"\n   */\n  empty?: {\n    label?: string;\n    description?: string;\n  };\n  /**\n   * should hide the header navigation\n   */\n  hideDefaultHeader?: boolean;\n  /**\n   * should hide the footer navigation\n   */\n  hideDefaultFooter?: boolean;\n\n  rounded?: 'sm' | 'md' | 'lg';\n  /**\n   * make expansion work like accordion\n   */\n  singleExpand?: boolean;\n  /**\n   * make table head stick to top on scroll\n   */\n  stickyHeader?: boolean;\n  stickyOffset?: number;\n  /**\n   * Affects how the items per page work across the app.\n   * When true, changing the items per page setting in one table will affect other tables.\n   */\n  globalItemsPerPage?: boolean;\n  groupExpandButtonPosition?: 'start' | 'end';\n  disabledRows?: readonly T[];\n  multiPageSelect?: boolean;\n  itemClass?: ((item: T) => string) | string;\n}\n\ndefineOptions({\n  name: 'RuiDataTable',\n});\n\nconst selectedData = defineModel<T[IdType][]>();\n\nconst expanded = defineModel<T[]>('expanded');\n\nconst [pagination, paginationModifiers] = defineModel<TablePaginationData, 'external'>('pagination');\n\nconst [sort, sortModifiers] = defineModel<TableSortData<T>, 'external'>('sort');\n\nconst group = defineModel<TableRowKeyData<T>>('group');\n\nconst collapsed = defineModel<T[]>('collapsed');\n\nconst {\n  rows,\n  rowAttr,\n  search = '',\n  itemsPerPage = 10,\n  cols,\n  columnAttr = 'label',\n  dense = false,\n  outlined = false,\n  striped = false,\n  loading = false,\n  disablePerPage = false,\n  rangesThreshold = 500,\n  empty = { label: 'No item found' },\n  hideDefaultHeader = false,\n  hideDefaultFooter = false,\n  rounded = 'md',\n  singleExpand = false,\n  stickyHeader = false,\n  stickyOffset,\n  globalItemsPerPage = undefined,\n  groupExpandButtonPosition = 'start',\n  disabledRows,\n  multiPageSelect = false,\n  itemClass = '',\n} = defineProps<Props<T, IdType>>();\n\nconst emit = defineEmits<{\n  'update:options': [value: { pagination?: TablePaginationData; sort?: TableSortData<T> }];\n  'copy:group': [value: GroupData<T>];\n}>();\n\nconst slots = defineSlots<Partial<\n  Record<`header.${string}`, (props: { column: TableColumn<T> }) => any> &\n  Record<`item.${string}`, (props: { column: TableColumn<T>; row: T; index: number }) => any> & {\n    'body.prepend': (props: { colspan: number }) => any;\n    'body.append': (props: { colspan: number }) => any;\n    'group.header': (props: {\n      colspan: number;\n      header: GroupHeader<T>;\n      isOpen: boolean;\n      toggle: () => void;\n    }) => any;\n    'group.header.content': (props: { header: GroupHeader<T>; groupKey: string }) => any;\n    'expanded-item': (props: { row: T; index: number }) => any;\n    'no-data': () => any;\n    'empty-description': () => any;\n    'tfoot': () => any;\n  }\n>>();\n\nconst tableDefaults = useTable();\n\nconst stickyHeaderOffset = computed<number | undefined>(() =>\n  stickyOffset !== undefined ? stickyOffset : get(tableDefaults.stickyOffset),\n);\n\nconst table = useTemplateRef<HTMLTableElement>('table');\nconst tableScroller = useTemplateRef<HTMLElement>('tableScroller');\n\nconst { stick } = useStickyTableHeader(\n  () => stickyHeader,\n  stickyHeaderOffset,\n  { table, tableScroller },\n);\n\nconst hasExpandedItemSlot = computed<boolean>(() => !!slots['expanded-item']);\n\nconst { expandable, isExpanded, onToggleExpand } = useTableExpansion<T, IdType>(\n  { rowAttr, singleExpand },\n  { expanded, hasExpandedItemSlot },\n);\n\nfunction emitUpdateOptions(opts: { sort?: TableSortData<T>; pagination?: TablePaginationData }): void {\n  emit('update:options', opts);\n}\n\nconst {\n  sortData,\n  sortedMap,\n  sorted,\n  onSort: applySort,\n} = useTableSort<T>(\n  { rows: () => rows, search: () => search, sortModifiersExternal: sortModifiers.external },\n  {\n    sort,\n    pagination,\n    emitUpdateOptions,\n  },\n);\n\nconst {\n  groupKeys,\n  groupKey,\n  grouped,\n  isExpandedGroup,\n  isHiddenRow,\n  onToggleExpandGroup,\n  onUngroup,\n  onCopyGroup,\n} = useTableGrouping<T, IdType>(\n  { rowAttr },\n  {\n    group,\n    collapsed,\n    sorted,\n    emitCopyGroup: (value: GroupData<T>) => emit('copy:group', value),\n  },\n);\n\nconst {\n  paginationData,\n  filtered,\n  setInternalTotal,\n  resetPagination,\n} = useTablePagination<T>(\n  {\n    itemsPerPage,\n    paginationModifiersExternal: paginationModifiers.external,\n    globalItemsPerPage,\n  },\n  {\n    pagination,\n    grouped,\n    isHiddenRow,\n    sort,\n    emitUpdateOptions,\n    tableDefaults,\n  },\n);\n\nconst noData = computed<boolean>(() => get(filtered).length === 0);\n\nconst { columns, colspan, headerSlots, cellValue } = useTableColumns<T, IdType>({\n  cols: () => cols,\n  columnAttr,\n  rows: () => rows,\n  expandable,\n  groupKeys,\n  selectedData,\n  slots,\n});\n\nconst {\n  isAllSelected,\n  indeterminate,\n  isSelected,\n  isDisabledRow,\n  onToggleAll,\n  onSelect,\n  onCheckboxClick,\n  deselectRemovedRows,\n  resetCheckboxShiftState,\n} = useTableSelection<T, IdType>(\n  { rowAttr, multiPageSelect, disabledRows: () => disabledRows },\n  { selectedData, filtered },\n);\n\n// Sort triggers selection reset — handled here to avoid circular dependency between sort and selection\nfunction onSort(payload: Parameters<typeof applySort>[0]): void {\n  applySort(payload);\n  if (!multiPageSelect)\n    onToggleAll(false);\n  resetCheckboxShiftState();\n}\n\nfunction onPaginate(): void {\n  set(expanded, []);\n  if (!multiPageSelect)\n    onToggleAll(false);\n  resetCheckboxShiftState();\n}\n\n// Reset pagination page to 1 on search query change\nwatch(() => search, () => {\n  resetPagination();\n  onToggleAll(false);\n  resetCheckboxShiftState();\n});\n\nwatch(sorted, (items) => {\n  if (!multiPageSelect)\n    deselectRemovedRows();\n  setInternalTotal(items);\n});\n\nonMounted(() => {\n  setInternalTotal(get(sorted));\n});\n\nconst ui = computed<ReturnType<typeof dataTableStyles>>(() => dataTableStyles({\n  outlined,\n  rounded,\n  dense,\n  striped,\n}));\n</script>\n\n<template>\n  <div\n    :class=\"ui.wrapper()\"\n    data-id=\"table-wrapper\"\n  >\n    <RuiTablePagination\n      v-if=\"paginationData && !hideDefaultHeader\"\n      v-model=\"paginationData\"\n      :dense=\"dense\"\n      :loading=\"loading\"\n      :disable-per-page=\"disablePerPage\"\n      :ranges-threshold=\"rangesThreshold\"\n      data-id=\"table-pagination\"\n      @update:model-value=\"onPaginate()\"\n    />\n    <div\n      ref=\"tableScroller\"\n      :class=\"ui.scroller()\"\n      data-id=\"table-scroller\"\n    >\n      <table\n        ref=\"table\"\n        :class=\"ui.table()\"\n        :aria-busy=\"loading\"\n      >\n        <RuiTableHead\n          :loading=\"loading\"\n          :indeterminate=\"indeterminate\"\n          :capitalize-headers=\"!cols\"\n          :colspan=\"colspan\"\n          :column-attr=\"columnAttr\"\n          :columns=\"columns\"\n          :dense=\"dense\"\n          :disable-check-all=\"!filtered?.length\"\n          :is-all-selected=\"isAllSelected\"\n          :no-data=\"noData\"\n          :selectable=\"!!selectedData\"\n          :sort-data=\"sortData\"\n          :sorted-map=\"sortedMap\"\n          :stick=\"stick\"\n          :sticky-header=\"stickyHeader\"\n          @sort=\"onSort($event)\"\n          @select:all=\"onToggleAll($event)\"\n        >\n          <template\n            v-for=\"headerSlot in headerSlots\"\n            #[headerSlot]=\"slotData\"\n          >\n            <slot\n              :name=\"headerSlot\"\n              v-bind=\"slotData\"\n            />\n          </template>\n        </RuiTableHead>\n        <RuiTableHead\n          v-if=\"stickyHeader\"\n          :loading=\"loading\"\n          :capitalize-headers=\"!cols\"\n          :colspan=\"colspan\"\n          :column-attr=\"columnAttr\"\n          :columns=\"columns\"\n          :dense=\"dense\"\n          :no-data=\"noData\"\n          :selectable=\"!!selectedData\"\n          :sort-data=\"sortData\"\n          :sorted-map=\"sortedMap\"\n          data-id=\"head-clone\"\n          class=\"opacity-0 invisible\"\n        >\n          <template\n            v-for=\"headerSlot in headerSlots\"\n            #[headerSlot]=\"slotData\"\n          >\n            <slot\n              :name=\"headerSlot\"\n              v-bind=\"slotData\"\n            />\n          </template>\n        </RuiTableHead>\n        <tbody :class=\"ui.tbody()\">\n          <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n          <slot\n            v-if=\"slots['body.prepend']\"\n            :colspan=\"colspan\"\n            name=\"body.prepend\"\n          />\n          <template v-for=\"(row, index) in filtered\">\n            <tr\n              v-if=\"!isRow(row)\"\n              :key=\"`row-${index}`\"\n              :class=\"[ui.tr({ rowVariant: 'group' })]\"\n              data-id=\"row-group\"\n            >\n              <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n              <slot\n                name=\"group.header\"\n                :colspan=\"colspan\"\n                :header=\"row\"\n                :is-open=\"isExpandedGroup(row.group)\"\n                :toggle=\"() => onToggleExpandGroup(row.group, row.identifier)\"\n              >\n                <td\n                  :class=\"[ui.td()]\"\n                  class=\"!p-2\"\n                  :colspan=\"colspan\"\n                >\n                  <div class=\"flex items-center gap-2\">\n                    <RuiExpandButton\n                      v-if=\"groupExpandButtonPosition === 'start'\"\n                      :expanded=\"isExpandedGroup(row.group)\"\n                      @click=\"onToggleExpandGroup(row.group, row.identifier)\"\n                    />\n                    <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n                    <slot\n                      :group-key=\"groupKey\"\n                      name=\"group.header.content\"\n                      :header=\"row\"\n                    >\n                      <span>{{ groupKey }}: {{ row.identifier }}</span>\n                      <RuiButton\n                        size=\"sm\"\n                        variant=\"text\"\n                        icon\n                        data-id=\"group-copy-button\"\n                        @click=\"onCopyGroup({ key: groupKey, value: row.group })\"\n                      >\n                        <RuiIcon\n                          name=\"lu-copy\"\n                          size=\"16\"\n                        />\n                      </RuiButton>\n                    </slot>\n                    <RuiTooltip\n                      :options=\"{ placement: 'top' }\"\n                      class=\"ml-auto mr-2\"\n                    >\n                      <template #activator>\n                        <RuiButton\n                          size=\"sm\"\n                          variant=\"text\"\n                          icon\n                          data-id=\"group-ungroup-button\"\n                          @click=\"onUngroup()\"\n                        >\n                          <RuiIcon\n                            name=\"lu-trash-2\"\n                            size=\"14\"\n                          />\n                        </RuiButton>\n                      </template>\n                      Ungroup\n                    </RuiTooltip>\n                    <RuiExpandButton\n                      v-if=\"groupExpandButtonPosition === 'end'\"\n                      :expanded=\"isExpandedGroup(row.group)\"\n                      @click=\"onToggleExpandGroup(row.group, row.identifier)\"\n                    />\n                  </div>\n                </td>\n              </slot>\n            </tr>\n            <template v-else>\n              <tr\n                :key=\"`row-${index}`\"\n                :class=\"[\n                  ui.tr({ rowVariant: isSelected(row[rowAttr]) ? 'selected' : undefined }),\n                  typeof itemClass === 'string' ? itemClass : itemClass(row),\n                ]\"\n                :aria-selected=\"selectedData ? isSelected(row[rowAttr]) : undefined\"\n                data-id=\"row\"\n              >\n                <td\n                  v-if=\"selectedData\"\n                  :class=\"ui.checkbox()\"\n                  colspan=\"1\"\n                  rowspan=\"1\"\n                >\n                  <RuiCheckbox\n                    :data-id=\"`table-toggle-check-${index}`\"\n                    :model-value=\"isSelected(row[rowAttr])\"\n                    :disabled=\"isDisabledRow(row[rowAttr])\"\n                    :size=\"dense ? 'sm' : undefined\"\n                    color=\"primary\"\n                    class=\"select-none\"\n                    hide-details\n                    @update:model-value=\"onSelect($event, row[rowAttr], true)\"\n                    @click=\"onCheckboxClick($event, row[rowAttr], index)\"\n                  />\n                </td>\n\n                <td\n                  v-for=\"(column, subIndex) in columns\"\n                  :key=\"subIndex\"\n                  :class=\"[\n                    ui.td({ class: getAlignClass(column.align) }),\n                    column.cellClass,\n                  ]\"\n                  :colspan=\"column.colspan ?? 1\"\n                  :rowspan=\"column.rowspan ?? 1\"\n                >\n                  <slot\n                    v-if=\"column.key === 'expand'\"\n                    :name=\"`item.${column.key.toString()}`\"\n                    :column=\"column\"\n                    :row=\"row\"\n                    :index=\"index\"\n                  >\n                    <RuiExpandButton\n                      v-if=\"!slots['item.expand']\"\n                      :expanded=\"isExpanded(row[rowAttr])\"\n                      @click=\"onToggleExpand(row)\"\n                    />\n                  </slot>\n                  <slot\n                    v-else\n                    :column=\"column\"\n                    :index=\"index\"\n                    :name=\"`item.${column.key.toString()}`\"\n                    :row=\"row\"\n                  >\n                    {{ cellValue(row, column.key) }}\n                  </slot>\n                </td>\n              </tr>\n\n              <tr\n                v-if=\"expandable && isExpanded(row[rowAttr])\"\n                :key=\"`row-expand-${index}`\"\n                :class=\"ui.tr({ rowVariant: 'expandable' })\"\n                data-id=\"row-expanded\"\n              >\n                <td\n                  :colspan=\"colspan\"\n                  :class=\"[ui.td()]\"\n                >\n                  <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n                  <slot\n                    name=\"expanded-item\"\n                    :row=\"row\"\n                    :index=\"index\"\n                  />\n                </td>\n              </tr>\n            </template>\n          </template>\n          <tr v-if=\"loading && noData\">\n            <td\n              :class=\"ui.tbodyLoader()\"\n              :colspan=\"colspan\"\n              data-id=\"tbody-loader\"\n            >\n              <div :class=\"ui.tbodyLoaderContent()\">\n                <RuiProgress\n                  color=\"primary\"\n                  variant=\"indeterminate\"\n                  circular\n                />\n              </div>\n            </td>\n          </tr>\n          <tr\n            v-if=\"noData && empty && !loading\"\n            :class=\"ui.tr({ rowVariant: 'empty' })\"\n            data-id=\"row-empty\"\n          >\n            <Transition\n              appear\n              enter-active-class=\"transition ease-out duration-200 delay-200\"\n              enter-from-class=\"opacity-0 translate-y-1\"\n              enter-to-class=\"opacity-100 translate-y-0\"\n              leave-active-class=\"transition ease-in duration-150\"\n              leave-from-class=\"opacity-100 translate-y-0\"\n              leave-to-class=\"opacity-0 translate-y-1\"\n            >\n              <td\n                :class=\"ui.td()\"\n                :colspan=\"colspan\"\n              >\n                <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n                <slot name=\"no-data\">\n                  <RuiTableEmptyState\n                    :label=\"empty.label\"\n                    :description=\"empty.description\"\n                  >\n                    <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n                    <template\n                      v-if=\"slots['empty-description']\"\n                      #description\n                    >\n                      <slot name=\"empty-description\" />\n                    </template>\n                  </RuiTableEmptyState>\n                </slot>\n              </td>\n            </Transition>\n          </tr>\n          <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n          <slot\n            v-if=\"slots['body.append']\"\n            :colspan=\"colspan\"\n            name=\"body.append\"\n          />\n        </tbody>\n        <tfoot>\n          <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n          <slot name=\"tfoot\" />\n        </tfoot>\n      </table>\n    </div>\n    <RuiTablePagination\n      v-if=\"paginationData && !hideDefaultFooter\"\n      v-model=\"paginationData\"\n      :dense=\"dense\"\n      :loading=\"loading\"\n      :disable-per-page=\"disablePerPage\"\n      :ranges-threshold=\"rangesThreshold\"\n      data-id=\"table-pagination\"\n      @update:model-value=\"onPaginate()\"\n    />\n  </div>\n</template>\n"],"mappings":""}

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

@@ -1,5 +1,5 @@
-import { type GroupData, type TableColumn, type TableRowKeyData, type TableSortData } from '../../components/tables/RuiTableHead.vue.js';
-import { type TablePaginationData } from '../../components/tables/RuiTablePagination.vue.js';
+import { type GroupData, type TableColumn, type TableRowKeyData, type TableSortData } from '../../components/tables/RuiTableHead.vue';
+import { type TablePaginationData } from '../../components/tables/RuiTablePagination.vue';
 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> {
@@ -46,6 +46,11 @@ export interface Props<T, K extends keyof T> {
      */
     loading?: boolean;
     disablePerPage?: boolean;
+    /**
+     * Maximum number of pages before the jump-to-page dropdown is replaced with
+     * a numeric input. Defaults to `500`. Forwarded to `RuiTablePagination`.
+     */
+    rangesThreshold?: number;
     /**
      * data to display for empty state
      * text and icon