npm - @rotki/ui-library - Versions diffs - 2.27.0 → 3.0.0-beta.1 - Mend

@rotki/ui-library 2.27.0 → 3.0.0-beta.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (391) hide show

package/dist/components/progress/RuiProgress.vue_vue_type_script_setup_true_lang.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RuiProgress.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/progress/RuiProgress.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ContextColorsType } from '@/consts/colors';\nimport { ProgressVariant } from '@/components/progress/progress-props';\nimport { tv } from '@/utils/tv';\n\nexport interface Props {\n /*\n in percentage value, required when variant === determinate or buffer\n * Ranges from 0 to 100.\n /\n value?: number;\n /\n in percentage value, required when variant === buffer\n * Ranges from 0 to 100.\n /\n bufferValue?: number;\n variant?: ProgressVariant;\n color?: ContextColorsType \| 'inherit';\n circular?: boolean;\n showLabel?: boolean;\n /\n Sets the stroke thickness in pixels\n /\n thickness?: number \| string;\n /\n only used for circular progress\n /\n size?: number \| string;\n}\n\ndefineOptions({\n name: 'RuiProgress',\n});\n\nconst {\n value = 0,\n bufferValue = 0,\n variant = ProgressVariant.determinate,\n color = 'inherit',\n circular = false,\n showLabel = false,\n thickness = 4,\n size = 40,\n} = defineProps<Props>();\n\ndefineSlots<Record<string, never>>();\n\nconst CIRCLE_RADIUS = 20;\nconst CIRCLE_CIRCUMFERENCE = 2 Math.PI * CIRCLE_RADIUS; // ~125.66\n/** approximate width of `100%` in ems /\nconst LABEL_WIDTH_EM = 2.5;\n/* keeps the label off the stroke rather than merely inside it /\nconst LABEL_BREATHING_ROOM = 0.85;\n\nfunction clampPercent(val: number \| undefined): number {\n return Math.max(0, Math.min(val ?? 100, 100));\n}\n\nconst progressStyles = tv({\n slots: {\n wrapper: '',\n progressbar: 'w-full overflow-hidden relative',\n rail: 'w-full h-full',\n bar: 'transition-all duration-150 ease-in-out absolute left-0 top-0 h-full w-full',\n indeterminateBar: 'absolute left-0 top-0 h-full w-auto transition-transform duration-200 ease-linear origin-left animate-slide-rail',\n bufferDots: 'absolute h-0 w-[200%] -top-px -left-full border-dashed border-y-[0.2rem] animate-buffer-pulse',\n bufferRail: 'w-full h-full transition-transform duration-200 ease-linear origin-left',\n circularContainer: 'inline-block relative',\n svg: 'block',\n circle: 'stroke-current',\n circleTrack: 'stroke-current opacity-20',\n label: 'text-rui-text',\n },\n variants: {\n color: {\n primary: { circularContainer: 'text-rui-primary' },\n secondary: { circularContainer: 'text-rui-secondary' },\n error: { circularContainer: 'text-rui-error' },\n warning: { circularContainer: 'text-rui-warning' },\n info: { circularContainer: 'text-rui-info' },\n success: { circularContainer: 'text-rui-success' },\n inherit: { circularContainer: 'text-current' },\n },\n variant: {\n [ProgressVariant.determinate]: { svg: '-rotate-90' },\n [ProgressVariant.indeterminate]: {\n svg: 'animate-circular-spin',\n circle: 'animate-collapse-stroke [stroke-dasharray:80px,200px] [stroke-linecap:round]',\n },\n [ProgressVariant.buffer]: {},\n },\n circular: {\n true: { wrapper: 'inline-flex' },\n false: { wrapper: 'w-full' },\n },\n hasLabel: {\n true: { wrapper: 'inline-flex items-center relative' },\n },\n },\n compoundVariants: [\n // Linear label\n { circular: false, hasLabel: true, class: { label: 'block text-sm ml-4' } },\n // Circular label (overlays the circle, font size derived from `size`)\n { circular: true, hasLabel: true, class: { label: 'absolute inset-0 flex items-center justify-center leading-none tabular-nums whitespace-nowrap' } },\n ],\n compoundSlots: [\n // Rail background (track behind the bar)\n { slots: ['rail', 'bufferDots'], color: 'primary', class: 'bg-rui-primary/20 border-rui-primary/20' },\n { slots: ['rail', 'bufferDots'], color: 'secondary', class: 'bg-rui-secondary/20 border-rui-secondary/20' },\n { slots: ['rail', 'bufferDots'], color: 'error', class: 'bg-rui-error/20 border-rui-error/20' },\n { slots: ['rail', 'bufferDots'], color: 'warning', class: 'bg-rui-warning/20 border-rui-warning/20' },\n { slots: ['rail', 'bufferDots'], color: 'info', class: 'bg-rui-info/20 border-rui-info/20' },\n { slots: ['rail', 'bufferDots'], color: 'success', class: 'bg-rui-success/20 border-rui-success/20' },\n { slots: ['rail', 'bufferDots'], color: 'inherit', class: 'bg-current opacity-20 border-current' },\n\n // Bar fill (active progress)\n { slots: ['bar', 'indeterminateBar'], color: 'primary', class: 'bg-rui-primary' },\n { slots: ['bar', 'indeterminateBar'], color: 'secondary', class: 'bg-rui-secondary' },\n { slots: ['bar', 'indeterminateBar'], color: 'error', class: 'bg-rui-error' },\n { slots: ['bar', 'indeterminateBar'], color: 'warning', class: 'bg-rui-warning' },\n { slots: ['bar', 'indeterminateBar'], color: 'info', class: 'bg-rui-info' },\n { slots: ['bar', 'indeterminateBar'], color: 'success', class: 'bg-rui-success' },\n { slots: ['bar', 'indeterminateBar'], color: 'inherit', class: 'bg-current' },\n ],\n});\n\nconst hasLabel = computed<boolean>(() => showLabel && variant !== ProgressVariant.indeterminate);\n\nconst ui = computed<ReturnType<typeof progressStyles>>(() => progressStyles({\n color,\n variant,\n circular,\n hasLabel: get(hasLabel),\n}));\n\nconst currentValue = computed<number>(() => clampPercent(value));\n\nconst label = computed<string>(() => `${Math.floor(get(currentValue))}%`);\n\nconst progress = computed<number>(() => -100 + get(currentValue));\n\nconst barStyle = computed<Record<string, string>>(() => ({\n transform: `translateX(${get(progress)}%)`,\n}));\n\nconst bufferRailStyle = computed<Record<string, string>>(() => ({\n transform: `translateX(${-100 + clampPercent(bufferValue)}%)`,\n}));\n\nconst linearStyle = computed<Record<string, string>>(() => ({\n height: `${+thickness}px`,\n}));\n\nconst circularSize = computed<Record<string, string>>(() => ({\n width: `${+size}px`,\n height: `${+size}px`,\n}));\n\nconst circularGeometry = computed<{ scaledThickness: number; viewSize: number }>(() => {\n const scaledThickness = (+thickness 32) / +size;\n return { scaledThickness, viewSize: 40 + scaledThickness };\n});\n\n/*\n The circular label lives inside the ring, so it scales with both `size` and `thickness`.\n * `fit` solves for the widest label (`100%`) fitting the chord it spans, always computed\n * for that widest label so the text does not resize as the value climbs. It is capped by\n * a sublinear curve so large rings do not end up with an oversized number in the middle.\n /\nconst circularLabelStyle = computed<Record<string, string>>(() => {\n const innerRadius = Math.max((+size - 2 +thickness) / 2, 0);\n const fit = (LABEL_BREATHING_ROOM * 2 * innerRadius) / Math.sqrt(LABEL_WIDTH_EM ** 2 + 1);\n return { fontSize: `${Math.min(fit, +size * 0.15 + 6)}px` };\n});\n\nconst circularStrokeStyle = computed<Record<string, string>>(() => ({\n strokeDasharray: `${CIRCLE_CIRCUMFERENCE}`,\n strokeDashoffset: `${(get(progress) / 100) * -CIRCLE_CIRCUMFERENCE}`,\n transition: 'stroke-dashoffset 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',\n}));\n</script>\n\n<template>\n <div :class=\"ui.wrapper()\">\n <!-- Circular progress (not supported for buffer variant) -->\n <div\n v-if=\"circular && variant !== ProgressVariant.buffer\"\n :aria-valuenow=\"value\"\n :class=\"ui.circularContainer()\"\n :style=\"circularSize\"\n :data-variant=\"variant\"\n :data-color=\"color\"\n aria-valuemax=\"100\"\n aria-valuemin=\"0\"\n role=\"progressbar\"\n >\n <svg\n :class=\"ui.svg()\"\n :viewBox=\"`0 0 ${circularGeometry.viewSize} ${circularGeometry.viewSize}`\"\n >\n <!-- Track behind the arc, mirroring the linear rail. Indeterminate spins, so it gets no track. -->\n <circle\n v-if=\"variant === ProgressVariant.determinate\"\n cx=\"50%\"\n cy=\"50%\"\n fill=\"none\"\n :r=\"CIRCLE_RADIUS\"\n :class=\"ui.circleTrack()\"\n :stroke-width=\"circularGeometry.scaledThickness\"\n />\n <circle\n cx=\"50%\"\n cy=\"50%\"\n fill=\"none\"\n :r=\"CIRCLE_RADIUS\"\n :class=\"ui.circle()\"\n :style=\"variant === ProgressVariant.determinate ? circularStrokeStyle : undefined\"\n :stroke-width=\"circularGeometry.scaledThickness\"\n />\n </svg>\n <div\n v-if=\"hasLabel\"\n :class=\"ui.label()\"\n :style=\"circularLabelStyle\"\n aria-hidden=\"true\"\n >\n {{ label }}\n </div>\n </div>\n\n <!-- Linear progress (also used as fallback for circular + buffer) -->\n <div\n v-else\n :aria-valuenow=\"value\"\n :class=\"ui.progressbar()\"\n :style=\"linearStyle\"\n :data-variant=\"variant\"\n :data-color=\"color\"\n aria-valuemax=\"100\"\n aria-valuemin=\"0\"\n role=\"progressbar\"\n >\n <div\n v-if=\"variant === ProgressVariant.buffer\"\n :class=\"ui.bufferDots()\"\n />\n <div\n :class=\"variant === ProgressVariant.buffer ? [ui.rail(), ui.bufferRail()] : ui.rail()\"\n :style=\"variant === ProgressVariant.buffer ? bufferRailStyle : undefined\"\n />\n <div\n v-if=\"variant === ProgressVariant.indeterminate\"\n :class=\"ui.indeterminateBar()\"\n />\n <div\n v-else\n :class=\"ui.bar()\"\n :style=\"barStyle\"\n />\n </div>\n\n <!-- Linear label -->\n <div\n v-if=\"hasLabel && !circular\"\n :class=\"ui.label()\"\n >\n {{ label }}\n </div>\n </div>\n</template>\n"],"mappings":"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"}
1	+ {"version":3,"file":"RuiProgress.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/progress/RuiProgress.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ContextColorsType } from '@/consts/colors';\nimport { ProgressVariant } from '@/components/progress/progress-props';\nimport { tv } from '@/utils/tv';\n\nexport interface Props {\n /*\n in percentage value, required when variant === determinate or buffer\n * Ranges from 0 to 100.\n /\n value?: number;\n /\n in percentage value, required when variant === buffer\n * Ranges from 0 to 100.\n /\n bufferValue?: number;\n variant?: ProgressVariant;\n color?: ContextColorsType \| 'inherit';\n circular?: boolean;\n showLabel?: boolean;\n /\n Sets the stroke thickness in pixels\n /\n thickness?: number \| string;\n /\n only used for circular progress\n /\n size?: number \| string;\n /\n What is loading, as the progress bar's accessible name (\"Loading\" when not given)\n /\n ariaLabel?: string;\n}\n\ndefineOptions({\n name: 'RuiProgress',\n});\n\nconst {\n value = 0,\n bufferValue = 0,\n variant = ProgressVariant.determinate,\n color = 'inherit',\n circular = false,\n showLabel = false,\n thickness = 4,\n size = 40,\n ariaLabel = 'Loading',\n} = defineProps<Props>();\n\ndefineSlots<Record<string, never>>();\n\nconst CIRCLE_RADIUS = 20;\nconst CIRCLE_CIRCUMFERENCE = 2 Math.PI * CIRCLE_RADIUS; // ~125.66\n/** width of `100%` in ems, measured with tabular figures /\nconst LABEL_WIDTH_EM = 2.95;\n/* keeps the label off the stroke rather than merely inside it /\nconst LABEL_BREATHING_ROOM = 0.9;\n/* below this font size a label inside the ring is unreadable, so the ring drops it rather than change its footprint /\nconst MIN_INSIDE_LABEL_PX = 9;\n\nfunction clampPercent(val: number \| undefined): number {\n return Math.max(0, Math.min(val ?? 100, 100));\n}\n\nconst progressStyles = tv({\n slots: {\n wrapper: '',\n progressbar: 'w-full overflow-hidden relative rounded-full',\n rail: 'w-full h-full',\n bar: 'transition-all duration-150 ease-in-out absolute left-0 top-0 h-full w-full',\n indeterminateBar: 'absolute left-0 top-0 h-full w-auto transition-transform duration-200 ease-linear origin-left animate-slide-rail',\n bufferDots: 'absolute h-0 w-[200%] -top-px -left-full border-dashed border-y-[0.2rem] animate-buffer-pulse',\n bufferRail: 'w-full h-full transition-transform duration-200 ease-linear origin-left',\n circularContainer: 'inline-block relative',\n svg: 'block',\n circle: 'stroke-current',\n circleTrack: '',\n label: 'text-rui-text',\n },\n variants: {\n color: {\n primary: { circularContainer: 'text-rui-primary' },\n secondary: { circularContainer: 'text-rui-secondary' },\n error: { circularContainer: 'text-rui-error' },\n warning: { circularContainer: 'text-rui-warning' },\n info: { circularContainer: 'text-rui-info' },\n success: { circularContainer: 'text-rui-success' },\n inherit: { circularContainer: 'text-current' },\n },\n variant: {\n [ProgressVariant.determinate]: { svg: '-rotate-90' },\n [ProgressVariant.indeterminate]: {\n svg: 'animate-circular-spin',\n circle: 'animate-collapse-stroke [stroke-dasharray:80px,200px] [stroke-linecap:round]',\n },\n [ProgressVariant.buffer]: {},\n },\n circular: {\n true: { wrapper: 'inline-flex' },\n false: { wrapper: 'w-full' },\n },\n hasLabel: {\n true: { wrapper: 'inline-flex items-center relative' },\n },\n },\n compoundVariants: [\n // Linear label\n { circular: false, hasLabel: true, class: { label: 'block text-sm ml-4 text-rui-text-secondary tabular-nums' } },\n // Circular label (overlays the circle, font size derived from `size`)\n { circular: true, hasLabel: true, class: { label: 'absolute inset-0 flex items-center justify-center leading-none font-medium tabular-nums whitespace-nowrap' } },\n ],\n compoundSlots: [\n // Track behind the bar: one neutral for every named color, neutral-700 in dark like the footer stepper pills, which reads on a near-black page\n { slots: ['rail'], color: ['primary', 'secondary', 'error', 'warning', 'info', 'success'], class: 'bg-rui-neutral-200 dark:bg-rui-neutral-700' },\n { slots: ['bufferDots'], color: ['primary', 'secondary', 'error', 'warning', 'info', 'success'], class: 'border-rui-neutral-200 dark:border-rui-neutral-700' },\n { slots: ['circleTrack'], color: ['primary', 'secondary', 'error', 'warning', 'info', 'success'], class: 'stroke-rui-neutral-200 dark:stroke-rui-neutral-700' },\n // `inherit` keeps a tint of whatever color it is given\n { slots: ['rail', 'bufferDots'], color: 'inherit', class: 'bg-current opacity-20 border-current' },\n { slots: ['circleTrack'], color: 'inherit', class: 'stroke-current opacity-20' },\n\n // Bar fill (active progress)\n { slots: ['bar', 'indeterminateBar'], color: 'primary', class: 'bg-rui-primary' },\n { slots: ['bar', 'indeterminateBar'], color: 'secondary', class: 'bg-rui-secondary' },\n { slots: ['bar', 'indeterminateBar'], color: 'error', class: 'bg-rui-error' },\n { slots: ['bar', 'indeterminateBar'], color: 'warning', class: 'bg-rui-warning' },\n { slots: ['bar', 'indeterminateBar'], color: 'info', class: 'bg-rui-info' },\n { slots: ['bar', 'indeterminateBar'], color: 'success', class: 'bg-rui-success' },\n { slots: ['bar', 'indeterminateBar'], color: 'inherit', class: 'bg-current' },\n ],\n});\n\nconst hasLabel = computed<boolean>(() => showLabel && variant !== ProgressVariant.indeterminate);\n\n/\n The font size that fits the widest label (`100%`) inside the ring, solved against the chord\n * it spans. Always computed for that widest label so the text does not resize as the value climbs.\n /\nconst insideLabelFit = computed<number>(() => {\n const innerRadius = Math.max((+size - 2 +thickness) / 2, 0);\n return (LABEL_BREATHING_ROOM * 2 * innerRadius) / Math.sqrt(LABEL_WIDTH_EM 2 + 1);\n});\n\nconst labelFits = computed<boolean>(() => get(insideLabelFit) >= MIN_INSIDE_LABEL_PX);\n\nconst ui = computed<ReturnType<typeof progressStyles>>(() => progressStyles({\n color,\n variant,\n circular,\n hasLabel: get(hasLabel),\n}));\n\nconst currentValue = computed<number>(() => clampPercent(value));\n\n/ An indeterminate bar has no value to report, so it leaves `aria-valuenow` off. /\nconst ariaValueNow = computed<number \| undefined>(() =>\n variant === ProgressVariant.indeterminate ? undefined : get(currentValue));\n\nconst label = computed<string>(() => `${Math.floor(get(currentValue))}%`);\n\nconst progress = computed<number>(() => -100 + get(currentValue));\n\nconst barStyle = computed<Record<string, string>>(() => ({\n transform: `translateX(${get(progress)}%)`,\n}));\n\nconst bufferRailStyle = computed<Record<string, string>>(() => ({\n transform: `translateX(${-100 + clampPercent(bufferValue)}%)`,\n}));\n\nconst linearStyle = computed<Record<string, string>>(() => ({\n height: `${+thickness}px`,\n}));\n\nconst circularSize = computed<Record<string, string>>(() => ({\n width: `${+size}px`,\n height: `${+size}px`,\n}));\n\nconst circularGeometry = computed<{ scaledThickness: number; viewSize: number }>(() => {\n const scaledThickness = (+thickness 32) / +size;\n return { scaledThickness, viewSize: 40 + scaledThickness };\n});\n\n/*\n The label inside the ring scales with both `size` and `thickness`. The fit is capped by\n * a sublinear curve so large rings do not end up with an oversized number in the middle.\n /\nconst circularLabelStyle = computed<Record<string, string>>(() => ({\n fontSize: `${Math.min(get(insideLabelFit), +size 0.15 + 6)}px`,\n}));\n\nconst circularStrokeStyle = computed<Record<string, string>>(() => ({\n strokeDasharray: `${CIRCLE_CIRCUMFERENCE}`,\n strokeDashoffset: `${(get(progress) / 100) * -CIRCLE_CIRCUMFERENCE}`,\n // the library's own motion, not Material's standard curve\n transition: 'stroke-dashoffset 200ms ease-out',\n}));\n</script>\n\n<template>\n <div :class=\"ui.wrapper()\">\n <!-- Circular progress (not supported for buffer variant) -->\n <div\n v-if=\"circular && variant !== ProgressVariant.buffer\"\n :aria-valuenow=\"ariaValueNow\"\n :class=\"ui.circularContainer()\"\n :style=\"circularSize\"\n :data-variant=\"variant\"\n :data-color=\"color\"\n :aria-label=\"ariaLabel\"\n :title=\"hasLabel && !labelFits ? label : undefined\"\n aria-valuemax=\"100\"\n aria-valuemin=\"0\"\n role=\"progressbar\"\n >\n <svg\n :class=\"ui.svg()\"\n :viewBox=\"`0 0 ${circularGeometry.viewSize} ${circularGeometry.viewSize}`\"\n >\n <!-- Track behind the arc, mirroring the linear rail. Indeterminate spins, so it gets no track. -->\n <circle\n v-if=\"variant === ProgressVariant.determinate\"\n cx=\"50%\"\n cy=\"50%\"\n fill=\"none\"\n :r=\"CIRCLE_RADIUS\"\n :class=\"ui.circleTrack()\"\n :stroke-width=\"circularGeometry.scaledThickness\"\n />\n <circle\n cx=\"50%\"\n cy=\"50%\"\n fill=\"none\"\n :r=\"CIRCLE_RADIUS\"\n :class=\"ui.circle()\"\n :style=\"variant === ProgressVariant.determinate ? circularStrokeStyle : undefined\"\n :stroke-width=\"circularGeometry.scaledThickness\"\n />\n </svg>\n <div\n v-if=\"hasLabel && labelFits\"\n :class=\"ui.label()\"\n :style=\"circularLabelStyle\"\n aria-hidden=\"true\"\n >\n {{ label }}\n </div>\n </div>\n\n <!-- Linear progress (also used as fallback for circular + buffer) -->\n <div\n v-else\n :aria-valuenow=\"ariaValueNow\"\n :class=\"ui.progressbar()\"\n :style=\"linearStyle\"\n :data-variant=\"variant\"\n :data-color=\"color\"\n :aria-label=\"ariaLabel\"\n aria-valuemax=\"100\"\n aria-valuemin=\"0\"\n role=\"progressbar\"\n >\n <div\n v-if=\"variant === ProgressVariant.buffer\"\n :class=\"ui.bufferDots()\"\n />\n <div\n :class=\"variant === ProgressVariant.buffer ? [ui.rail(), ui.bufferRail()] : ui.rail()\"\n :style=\"variant === ProgressVariant.buffer ? bufferRailStyle : undefined\"\n data-id=\"progress-rail\"\n />\n <div\n v-if=\"variant === ProgressVariant.indeterminate\"\n :class=\"ui.indeterminateBar()\"\n />\n <div\n v-else\n :class=\"ui.bar()\"\n :style=\"barStyle\"\n />\n </div>\n\n <!-- Linear label -->\n <div\n v-if=\"hasLabel && !circular\"\n :class=\"ui.label()\"\n >\n {{ label }}\n </div>\n </div>\n</template>\n"],"mappings":"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"}

package/dist/components/steppers/RuiFooterStepper.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RuiFooterStepper.js","names":[],"sources":["../../../src/components/steppers/RuiFooterStepper.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport RuiProgress from '@/components/progress/RuiProgress.vue';\nimport { FooterStepperVariant } from '@/components/steppers/footer-stepper-variant';\nimport { tv } from '@/utils/tv';\n\nexport interface Props {\n pages: number;\n variant?: FooterStepperVariant;\n arrowButtons?: boolean;\n hideButtons?: boolean;\n}\n\ndefineOptions({\n name: 'RuiFooterStepper',\n});\n\nconst modelValue = defineModel<number>({ default: 1 });\n\nconst {\n pages,\n variant: variantProp = FooterStepperVariant.numeric,\n arrowButtons = false,\n hideButtons = false,\n} = defineProps<Props>();\n\nconst footerStepper = {\n ~~arrowButton:~~ ~~'!bg-white~~ ~~!disabled:bg-white/60~~ ~~dark:!disabled:bg-[rgb(50~~,~~50,50)]',\~~n bullet: tv({\n base: '~~rounded-full~~ h-2 w-2 bg-~~black/~~[~~0.26~~] dark:bg-~~white/30 transition~~-~~colors cursor~~-~~pointer~~ hover:bg-rui-~~grey~~-~~300~~ dark:hover:bg-rui-~~grey~~-~~400~~',\n variants: {\n active: {\n true: 'bg-rui-primary ~~dark~~:bg-rui-primary ~~hover~~:bg-rui-primary dark:hover:bg-rui-primary',\n },\n },\n }),\n pill: tv({\n base: 'rounded-full h-2 w-full bg-rui-~~grey~~-200 dark:bg-rui-~~grey~~-~~300~~ transition-colors',\n variants: {\n active: {\n true: 'bg-rui-primary dark:bg-rui-primary',\n },\n },\n }),\n};\n\nfunction onChange(delta: number): void {\n set(modelValue, get(modelValue) + delta);\n}\n\nfunction onPrev(): void {\n if (get(modelValue) > 1)\n onChange(-1);\n}\n\nfunction onNext(): void {\n if (get(modelValue) < pages)\n onChange(1);\n}\n\nfunction onClick(index: number): void {\n onChange(index - get(modelValue));\n}\n</script>\n\n<template>\n <div\n role=\"navigation\"\n aria-label=\"Step navigation\"\n class=\"flex items-center justify-between gap-x-4 transition-all duration-150\"\n :data-variant=\"variantProp\"\n >\n <template v-if=\"variantProp === FooterStepperVariant.pill\">\n <div\n data-id=\"pills\"\n class=\"flex w-full gap-x-3\"\n >\n <span\n v-for=\"i in pages\"\n :key=\"i\"\n :aria-current=\"modelValue === i ? 'step' : undefined\"\n :class=\"footerStepper.pill({ active: modelValue === i })\"\n />\n </div>\n </template>\n <template v-else>\n <RuiButton\n v-if=\"!hideButtons\"\n aria-label=\"Previous\"\n :~~class~~=\"~~arrowButtons~~ ? ~~footerStepper.arrowButton : undefined~~\"\n :~~disabled~~=\"~~modelValue <= 1~~\"\n :~~icon~~=\"arrowButtons\"\n :variant=\"arrowButtons ? 'outlined' : 'text'\"\n color=\"primary\"\n @click=\"onPrev()\"\n >\n <template\n v-if=\"!arrowButtons\"\n #prepend\n >\n <RuiIcon~~\n :size=\"18\"\n~~ name=\"lu-chevron-left\"\n />\n </template>\n <span v-if=\"!arrowButtons\">Back</span>\n <RuiIcon\n v-else\n ~~:size=\"24\"\n~~ name=\"lu-~~arrow~~-left\"\n />\n </RuiButton>\n <span\n v-if=\"variantProp === FooterStepperVariant.numeric\"\n data-id=\"numeric\"\n class=\"text-rui-text\"\n >\n {{ modelValue }}/{{ pages }}\n </span>\n <div\n v-else-if=\"variantProp === FooterStepperVariant.bullet\"\n data-id=\"bullets\"\n class=\"flex gap-x-1\"\n >\n <~~span~~\n v-for=\"i in pages\"\n :key=\"i\"\n :aria-current=\"modelValue === i ? 'step' : undefined\"\n :class=\"footerStepper.bullet({ active: modelValue === i })\"\n @click=\"onClick(i)\"\n />\n </div>\n <RuiProgress\n v-else-if=\"variantProp === FooterStepperVariant.progress\"\n class=\"max-w-[60%]\"\n color=\"primary\"\n :value=\"(modelValue / pages) * 100\"\n />\n <RuiButton\n v-if=\"!hideButtons\"\n aria-label=\"Next\"\n :~~class~~=\"~~arrowButtons~~ ? ~~footerStepper.arrowButton : undefined~~\"\n :~~disabled~~=\"~~modelValue >= pages~~\"\n :~~icon~~=\"arrowButtons\"\n :variant=\"arrowButtons ? 'outlined' : 'text'\"\n color=\"primary\"\n @click=\"onNext()\"\n >\n <span v-if=\"!arrowButtons\">Next</span>\n <RuiIcon\n v-else\n ~~:size=\"24\"\n~~ name=\"lu-~~arrow~~-right\"\n />\n <template\n v-if=\"!arrowButtons\"\n #append\n >\n <RuiIcon~~\n :size=\"18\"\n~~ name=\"lu-chevron-right\"\n />\n </template>\n </RuiButton>\n </template>\n </div>\n</template>\n"],"mappings":""}
1	+ {"version":3,"file":"RuiFooterStepper.js","names":[],"sources":["../../../src/components/steppers/RuiFooterStepper.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport RuiProgress from '@/components/progress/RuiProgress.vue';\nimport { FooterStepperVariant } from '@/components/steppers/footer-stepper-variant';\nimport { tv } from '@/utils/tv';\n\nexport interface Props {\n pages: number;\n variant?: FooterStepperVariant;\n arrowButtons?: boolean;\n hideButtons?: boolean;\n}\n\ndefineOptions({\n name: 'RuiFooterStepper',\n});\n\nconst modelValue = defineModel<number>({ default: 1 });\n\nconst {\n pages,\n variant: variantProp = FooterStepperVariant.numeric,\n arrowButtons = false,\n hideButtons = false,\n} = defineProps<Props>();\n\nconst footerStepper = {\n // the current bullet stretches into a short bar, so position reads without relying on color\n bullet: tv({\n base: [\n 'h-2 w-2 rounded-full bg-rui-neutral-300 transition-[width,background-color] duration-200 ease-out dark:bg-rui-neutral-600',\n 'hover:bg-rui-neutral-400 dark:hover:bg-rui-neutral-500 focus-visible:focus-ring outline-hidden',\n ].join(' '),\n variants: {\n active: {\n true: 'w-5 bg-rui-primary hover:bg-rui-primary dark:bg-rui-primary dark:hover:bg-rui-primary',\n },\n },\n }),\n pill: tv({\n base: 'rounded-full h-1.5 w-full bg-rui-neutral-200 dark:bg-rui-neutral-700 transition-colors',\n variants: {\n active: {\n true: 'bg-rui-primary dark:bg-rui-primary',\n },\n },\n }),\n};\n\nfunction onChange(delta: number): void {\n set(modelValue, get(modelValue) + delta);\n}\n\nfunction onPrev(): void {\n if (get(modelValue) > 1)\n onChange(-1);\n}\n\nfunction onNext(): void {\n if (get(modelValue) < pages)\n onChange(1);\n}\n\nfunction onClick(index: number): void {\n onChange(index - get(modelValue));\n}\n</script>\n\n<template>\n <div\n role=\"navigation\"\n aria-label=\"Step navigation\"\n class=\"flex items-center justify-between gap-x-4 transition-all duration-150\"\n :data-variant=\"variantProp\"\n >\n <template v-if=\"variantProp === FooterStepperVariant.pill\">\n <div\n data-id=\"pills\"\n class=\"flex w-full gap-x-3\"\n >\n <span\n v-for=\"i in pages\"\n :key=\"i\"\n :aria-current=\"modelValue === i ? 'step' : undefined\"\n :class=\"footerStepper.pill({ active: modelValue === i })\"\n />\n </div>\n </template>\n <template v-else>\n <RuiButton\n v-if=\"!hideButtons\"\n aria-label=\"Previous\"\n :disabled=\"modelValue <= 1\"\n :icon=\"arrowButtons\"\n :size=\"arrowButtons ? 'sm' : undefined\"\n :variant=\"arrowButtons ? 'outlined' : 'text'\"\n :color=\"arrowButtons ? undefined : 'primary'\"\n @click=\"onPrev()\"\n >\n <template\n v-if=\"!arrowButtons\"\n #prepend\n >\n <RuiIcon name=\"lu-chevron-left\" />\n </template>\n <span v-if=\"!arrowButtons\">Back</span>\n <RuiIcon\n v-else\n name=\"lu-chevron-left\"\n />\n </RuiButton>\n <span\n v-if=\"variantProp === FooterStepperVariant.numeric\"\n data-id=\"numeric\"\n class=\"text-sm tabular-nums text-rui-text-secondary\"\n >\n {{ modelValue }}/{{ pages }}\n </span>\n <div\n v-else-if=\"variantProp === FooterStepperVariant.bullet\"\n data-id=\"bullets\"\n class=\"flex items-center gap-x-1.5\"\n >\n <button\n v-for=\"i in pages\"\n :key=\"i\"\n type=\"button\"\n :aria-label=\"`Step ${i}`\"\n :aria-current=\"modelValue === i ? 'step' : undefined\"\n :class=\"footerStepper.bullet({ active: modelValue === i })\"\n @click=\"onClick(i)\"\n />\n </div>\n <RuiProgress\n v-else-if=\"variantProp === FooterStepperVariant.progress\"\n class=\"max-w-[60%]\"\n color=\"primary\"\n :value=\"(modelValue / pages) * 100\"\n />\n <RuiButton\n v-if=\"!hideButtons\"\n aria-label=\"Next\"\n :disabled=\"modelValue >= pages\"\n :icon=\"arrowButtons\"\n :size=\"arrowButtons ? 'sm' : undefined\"\n :variant=\"arrowButtons ? 'outlined' : 'text'\"\n :color=\"arrowButtons ? undefined : 'primary'\"\n @click=\"onNext()\"\n >\n <span v-if=\"!arrowButtons\">Next</span>\n <RuiIcon\n v-else\n name=\"lu-chevron-right\"\n />\n <template\n v-if=\"!arrowButtons\"\n #append\n >\n <RuiIcon name=\"lu-chevron-right\" />\n </template>\n </RuiButton>\n </template>\n </div>\n</template>\n"],"mappings":""}

package/dist/components/steppers/RuiFooterStepper.vue_vue_type_script_setup_true_lang.js CHANGED Viewed

@@ -17,14 +17,18 @@ var _hoisted_4 = { key: 0 };
 var _hoisted_5 = {
 	key: 1,
 	"data-id": "numeric",
-	class: "text-rui-text"
+	class: "text-sm tabular-nums text-rui-text-secondary"
 };
 var _hoisted_6 = {
 	key: 2,
 	"data-id": "bullets",
-	class: "flex gap-x-1"
+	class: "flex items-center gap-x-1.5"
 };
-var _hoisted_7 = ["aria-current", "onClick"];
+var _hoisted_7 = [
+	"aria-label",
+	"aria-current",
+	"onClick"
+];
 var _hoisted_8 = { key: 0 };
 var RuiFooterStepper_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "RuiFooterStepper",
@@ -48,13 +52,12 @@ var RuiFooterStepper_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 	setup(__props) {
 		const modelValue = useModel(__props, "modelValue");
 		const footerStepper = {
-			arrowButton: "!bg-white !disabled:bg-white/60 dark:!disabled:bg-[rgb(50,50,50)]",
 			bullet: tv({
-				base: "rounded-full h-2 w-2 bg-black/[0.26] dark:bg-white/30 transition-colors cursor-pointer hover:bg-rui-grey-300 dark:hover:bg-rui-grey-400",
-				variants: { active: { true: "bg-rui-primary dark:bg-rui-primary hover:bg-rui-primary dark:hover:bg-rui-primary" } }
+				base: ["h-2 w-2 rounded-full bg-rui-neutral-300 transition-[width,background-color] duration-200 ease-out dark:bg-rui-neutral-600", "hover:bg-rui-neutral-400 dark:hover:bg-rui-neutral-500 focus-visible:focus-ring outline-hidden"].join(" "),
+				variants: { active: { true: "w-5 bg-rui-primary hover:bg-rui-primary dark:bg-rui-primary dark:hover:bg-rui-primary" } }
 			}),
 			pill: tv({
-				base: "rounded-full h-2 w-full bg-rui-grey-200 dark:bg-rui-grey-300 transition-colors",
+				base: "rounded-full h-1.5 w-full bg-rui-neutral-200 dark:bg-rui-neutral-700 transition-colors",
 				variants: { active: { true: "bg-rui-primary dark:bg-rui-primary" } }
 			})
 		};
@@ -86,35 +89,34 @@ var RuiFooterStepper_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 				!__props.hideButtons ? (openBlock(), createBlock(RuiButton_default, {
 					key: 0,
 					"aria-label": "Previous",
-					class: normalizeClass(__props.arrowButtons ? footerStepper.arrowButton : void 0),
 					disabled: modelValue.value <= 1,
 					icon: __props.arrowButtons,
+					size: __props.arrowButtons ? "sm" : void 0,
 					variant: __props.arrowButtons ? "outlined" : "text",
-					color: "primary",
+					color: __props.arrowButtons ? void 0 : "primary",
 					onClick: _cache[0] || (_cache[0] = ($event) => onPrev())
 				}, createSlots({
 					default: withCtx(() => [!__props.arrowButtons ? (openBlock(), createElementBlock("span", _hoisted_4, "Back")) : (openBlock(), createBlock(RuiIcon_default, {
 						key: 1,
-						size: 24,
-						name: "lu-arrow-left"
+						name: "lu-chevron-left"
 					}))]),
 					_: 2
 				}, [!__props.arrowButtons ? {
 					name: "prepend",
-					fn: withCtx(() => [createVNode(RuiIcon_default, {
-						size: 18,
-						name: "lu-chevron-left"
-					})]),
+					fn: withCtx(() => [createVNode(RuiIcon_default, { name: "lu-chevron-left" })]),
 					key: "0"
 				} : void 0]), 1032, [
-					"class",
 					"disabled",
 					"icon",
-					"variant"
+					"size",
+					"variant",
+					"color"
 				])) : createCommentVNode("", true),
 				__props.variant === unref(FooterStepperVariant).numeric ? (openBlock(), createElementBlock("span", _hoisted_5, toDisplayString(modelValue.value) + "/" + toDisplayString(__props.pages), 1)) : __props.variant === unref(FooterStepperVariant).bullet ? (openBlock(), createElementBlock("div", _hoisted_6, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.pages, (i) => {
-					return openBlock(), createElementBlock("span", {
+					return openBlock(), createElementBlock("button", {
 						key: i,
+						type: "button",
+						"aria-label": `Step ${i}`,
 						"aria-current": modelValue.value === i ? "step" : void 0,
 						class: normalizeClass(footerStepper.bullet({ active: modelValue.value === i })),
 						onClick: ($event) => onClick(i)
@@ -128,31 +130,28 @@ var RuiFooterStepper_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 				!__props.hideButtons ? (openBlock(), createBlock(RuiButton_default, {
 					key: 4,
 					"aria-label": "Next",
-					class: normalizeClass(__props.arrowButtons ? footerStepper.arrowButton : void 0),
 					disabled: modelValue.value >= __props.pages,
 					icon: __props.arrowButtons,
+					size: __props.arrowButtons ? "sm" : void 0,
 					variant: __props.arrowButtons ? "outlined" : "text",
-					color: "primary",
+					color: __props.arrowButtons ? void 0 : "primary",
 					onClick: _cache[1] || (_cache[1] = ($event) => onNext())
 				}, createSlots({
 					default: withCtx(() => [!__props.arrowButtons ? (openBlock(), createElementBlock("span", _hoisted_8, "Next")) : (openBlock(), createBlock(RuiIcon_default, {
 						key: 1,
-						size: 24,
-						name: "lu-arrow-right"
+						name: "lu-chevron-right"
 					}))]),
 					_: 2
 				}, [!__props.arrowButtons ? {
 					name: "append",
-					fn: withCtx(() => [createVNode(RuiIcon_default, {
-						size: 18,
-						name: "lu-chevron-right"
-					})]),
+					fn: withCtx(() => [createVNode(RuiIcon_default, { name: "lu-chevron-right" })]),
 					key: "0"
 				} : void 0]), 1032, [
-					"class",
 					"disabled",
 					"icon",
-					"variant"
+					"size",
+					"variant",
+					"color"
 				])) : createCommentVNode("", true)
 			], 64))], 8, _hoisted_1);
 		};

package/dist/components/steppers/RuiFooterStepper.vue_vue_type_script_setup_true_lang.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RuiFooterStepper.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/steppers/RuiFooterStepper.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport RuiProgress from '@/components/progress/RuiProgress.vue';\nimport { FooterStepperVariant } from '@/components/steppers/footer-stepper-variant';\nimport { tv } from '@/utils/tv';\n\nexport interface Props {\n pages: number;\n variant?: FooterStepperVariant;\n arrowButtons?: boolean;\n hideButtons?: boolean;\n}\n\ndefineOptions({\n name: 'RuiFooterStepper',\n});\n\nconst modelValue = defineModel<number>({ default: 1 });\n\nconst {\n pages,\n variant: variantProp = FooterStepperVariant.numeric,\n arrowButtons = false,\n hideButtons = false,\n} = defineProps<Props>();\n\nconst footerStepper = {\n ~~arrowButton:~~ ~~'!bg-white~~ ~~!disabled:bg-white/60~~ ~~dark:!disabled:bg-[rgb(50~~,~~50,50)]',\~~n bullet: tv({\n base: '~~rounded-full~~ h-2 w-2 bg-~~black/~~[~~0.26~~] dark:bg-~~white/30 transition~~-~~colors cursor~~-~~pointer~~ hover:bg-rui-~~grey~~-~~300~~ dark:hover:bg-rui-~~grey~~-~~400~~',\n variants: {\n active: {\n true: 'bg-rui-primary ~~dark~~:bg-rui-primary ~~hover~~:bg-rui-primary dark:hover:bg-rui-primary',\n },\n },\n }),\n pill: tv({\n base: 'rounded-full h-2 w-full bg-rui-~~grey~~-200 dark:bg-rui-~~grey~~-~~300~~ transition-colors',\n variants: {\n active: {\n true: 'bg-rui-primary dark:bg-rui-primary',\n },\n },\n }),\n};\n\nfunction onChange(delta: number): void {\n set(modelValue, get(modelValue) + delta);\n}\n\nfunction onPrev(): void {\n if (get(modelValue) > 1)\n onChange(-1);\n}\n\nfunction onNext(): void {\n if (get(modelValue) < pages)\n onChange(1);\n}\n\nfunction onClick(index: number): void {\n onChange(index - get(modelValue));\n}\n</script>\n\n<template>\n <div\n role=\"navigation\"\n aria-label=\"Step navigation\"\n class=\"flex items-center justify-between gap-x-4 transition-all duration-150\"\n :data-variant=\"variantProp\"\n >\n <template v-if=\"variantProp === FooterStepperVariant.pill\">\n <div\n data-id=\"pills\"\n class=\"flex w-full gap-x-3\"\n >\n <span\n v-for=\"i in pages\"\n :key=\"i\"\n :aria-current=\"modelValue === i ? 'step' : undefined\"\n :class=\"footerStepper.pill({ active: modelValue === i })\"\n />\n </div>\n </template>\n <template v-else>\n <RuiButton\n v-if=\"!hideButtons\"\n aria-label=\"Previous\"\n :~~class~~=\"~~arrowButtons~~ ? ~~footerStepper.arrowButton : undefined~~\"\n :~~disabled~~=\"~~modelValue <= 1~~\"\n :~~icon~~=\"arrowButtons\"\n :variant=\"arrowButtons ? 'outlined' : 'text'\"\n color=\"primary\"\n @click=\"onPrev()\"\n >\n <template\n v-if=\"!arrowButtons\"\n #prepend\n >\n <RuiIcon~~\n :size=\"18\"\n~~ name=\"lu-chevron-left\"\n />\n </template>\n <span v-if=\"!arrowButtons\">Back</span>\n <RuiIcon\n v-else\n ~~:size=\"24\"\n~~ name=\"lu-~~arrow~~-left\"\n />\n </RuiButton>\n <span\n v-if=\"variantProp === FooterStepperVariant.numeric\"\n data-id=\"numeric\"\n class=\"text-rui-text\"\n >\n {{ modelValue }}/{{ pages }}\n </span>\n <div\n v-else-if=\"variantProp === FooterStepperVariant.bullet\"\n data-id=\"bullets\"\n class=\"flex gap-x-1\"\n >\n <~~span~~\n v-for=\"i in pages\"\n :key=\"i\"\n :aria-current=\"modelValue === i ? 'step' : undefined\"\n :class=\"footerStepper.bullet({ active: modelValue === i })\"\n @click=\"onClick(i)\"\n />\n </div>\n <RuiProgress\n v-else-if=\"variantProp === FooterStepperVariant.progress\"\n class=\"max-w-[60%]\"\n color=\"primary\"\n :value=\"(modelValue / pages) * 100\"\n />\n <RuiButton\n v-if=\"!hideButtons\"\n aria-label=\"Next\"\n :~~class~~=\"~~arrowButtons~~ ? ~~footerStepper.arrowButton : undefined~~\"\n :~~disabled~~=\"~~modelValue >= pages~~\"\n :~~icon~~=\"arrowButtons\"\n :variant=\"arrowButtons ? 'outlined' : 'text'\"\n color=\"primary\"\n @click=\"onNext()\"\n >\n <span v-if=\"!arrowButtons\">Next</span>\n <RuiIcon\n v-else\n ~~:size=\"24\"\n~~ name=\"lu-~~arrow~~-right\"\n />\n <template\n v-if=\"!arrowButtons\"\n #append\n >\n <RuiIcon~~\n :size=\"18\"\n~~ name=\"lu-chevron-right\"\n />\n </template>\n </RuiButton>\n </template>\n </div>\n</template>\n"],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~EAkBA,MAAM,aAAa,SAAmB,SAAA,YAAe;EASrD,MAAM,gBAAgB;~~GACpB~~,~~aAAa;GACb,~~QAAQ,GAAG;IACT,MAAM;~~IACN~~,UAAU,EACR,QAAQ,EACN,MAAM,~~oFACR~~,EACF;GACF,CAAC;GACD,MAAM,GAAG;IACP,MAAM;IACN,UAAU,EACR,QAAQ,EACN,MAAM,qCACR,EACF;GACF,CAAC;EACH;EAEA,SAAS,SAAS,OAAqB;GACrC,IAAI,YAAY,IAAI,UAAU,IAAI,KAAK;EACzC;EAEA,SAAS,SAAe;GACtB,IAAI,IAAI,UAAU,IAAI,GACpB,SAAS,EAAE;EACf;EAEA,SAAS,SAAe;GACtB,IAAI,IAAI,UAAU,IAAI,QAAA,OACpB,SAAS,CAAC;EACd;EAEA,SAAS,QAAQ,OAAqB;GACpC,SAAS,QAAQ,IAAI,UAAU,CAAC;EAClC;;GAIE,OAAA,UAAA,GAAA,~~mBAmGM~~,OAAA;~~IAlGJ~~,MAAK;IACL,cAAW;IACX,OAAM;IACL,gBAAc,QAAA;GAEC,GAAA,CAAA,QAAA,YAAgB,MAAA,oBAAA,CAAoB,CAAC,QACnD,UAAA,GAAA,mBAUM,OAVN,YAUM,EANJ,UAAA,IAAA,GAAA,mBAKE,UAAA,MAAA,WAJY,QAAA,QAAL,MAAC;IADV,OAAA,UAAA,GAAA,mBAKE,QAAA;KAHC,KAAK;KACL,gBAAc,WAAA,UAAe,IAAC,SAAY,KAAA;KAC1C,OAAK,eAAE,cAAc,KAAI,EAAA,QAAW,WAAA,UAAe,EAAC,CAAA,CAAA;;GAI3D,CAAA,GAAA,GAAA,EAAA,CAAA,MAAA,UAAA,GAAA,~~mBA+EW~~,UAAA,EAAA,KAAA,EAAA,GAAA;~~IA7EA~~,CAAA,QAAA,eADT,UAAA,GAAA,~~YAyBY~~,mBAAA;;~~KAvBV~~,cAAW;KACV,~~OAAK,eAAE,QAAA,eAAe,cAAc,cAAc,KAAA,CAAS;KAC3D,~~UAAU,WAAA,SAAU;KACpB,MAAM,QAAA;KACN,SAAS,QAAA,eAAY,aAAA;~~KACtB~~,~~OAAM~~;~~KACL~~,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,OAAM;;~~KAWd~~,SAAA,cAAsC,CAAzB,CAAA,QAAA,gBAAb,UAAA,GAAA,mBAAsC,QAAA,YAAX,MAAI,MAC/B,UAAA,GAAA,~~YAIE~~,iBAAA;;~~MAFC~~,~~MAAM;MACP,~~MAAK;;;~~IAZE~~,GAAA,CAAA,CAAA,QAAA,eAAA;KACN,MAAA;KAED,IAAA,~~cAGE~~,~~CAHF~~,~~YAGE~~,iBAAA~~;MAFC~~,~~MAAM;MACP~~,MAAK;;;;;;;;;~~IAWH~~,QAAA,YAAgB,MAAA,oBAAA,CAAoB,CAAC,WAD7C,UAAA,GAAA,mBAMO,QANP,YAMO,gBADF,WAAA,KAAU,IAAG,MAAC,gBAAG,QAAA,KAAK,GAAA,CAAA,KAGd,QAAA,YAAgB,MAAA,oBAAA,CAAoB,CAAC,UADlD,UAAA,GAAA,~~mBAYM~~,~~OAZN~~,~~YAYM~~,~~EAPJ~~,UAAA,IAAA,GAAA,~~mBAME~~,UAAA,MAAA,~~WALY~~,QAAA,QAAL,MAAC;KADV,OAAA,UAAA,GAAA,~~mBAME~~,~~QAAA~~;~~MAJC~~,KAAK;~~MACL~~,gBAAc,WAAA,UAAe,IAAC,SAAY,KAAA;MAC1C,OAAK,eAAE,cAAc,OAAM,EAAA,QAAW,WAAA,UAAe,EAAC,CAAA,CAAA;MACtD,UAAK,WAAE,QAAQ,CAAC;;IAIR,CAAA,GAAA,GAAA,EAAA,CAAA,KAAA,QAAA,YAAgB,MAAA,oBAAA,CAAoB,CAAC,YADlD,UAAA,GAAA,YAKE,qBAAA;;KAHA,OAAM;KACN,OAAM;KACL,OAAQ,WAAA,QAAa,QAAA,QAAK;;IAGpB,CAAA,QAAA,eADT,UAAA,GAAA,~~YAyBY~~,mBAAA;;~~KAvBV~~,cAAW;KACV,~~OAAK,eAAE,QAAA,eAAe,cAAc,cAAc,KAAA,CAAS;KAC3D,~~UAAU,WAAA,SAAc,QAAA;KACxB,MAAM,QAAA;KACN,SAAS,QAAA,eAAY,aAAA;~~KACtB~~,~~OAAM~~;~~KACL~~,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,OAAM;;KAEd,SAAA,cAAsC,CAAzB,CAAA,QAAA,gBAAb,UAAA,GAAA,mBAAsC,QAAA,YAAX,MAAI,MAC/B,UAAA,GAAA,~~YAIE~~,iBAAA;;~~MAFC~~,~~MAAM;MACP,~~MAAK;;;IAGE,GAAA,CAAA,CAAA,QAAA,eAAA;KACN,MAAA;KAED,IAAA,~~cAGE~~,~~CAHF~~,~~YAGE~~,iBAAA~~;MAFC~~,~~MAAM;MACP~~,MAAK"}
1	+ {"version":3,"file":"RuiFooterStepper.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/steppers/RuiFooterStepper.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport RuiProgress from '@/components/progress/RuiProgress.vue';\nimport { FooterStepperVariant } from '@/components/steppers/footer-stepper-variant';\nimport { tv } from '@/utils/tv';\n\nexport interface Props {\n pages: number;\n variant?: FooterStepperVariant;\n arrowButtons?: boolean;\n hideButtons?: boolean;\n}\n\ndefineOptions({\n name: 'RuiFooterStepper',\n});\n\nconst modelValue = defineModel<number>({ default: 1 });\n\nconst {\n pages,\n variant: variantProp = FooterStepperVariant.numeric,\n arrowButtons = false,\n hideButtons = false,\n} = defineProps<Props>();\n\nconst footerStepper = {\n // the current bullet stretches into a short bar, so position reads without relying on color\n bullet: tv({\n base: [\n 'h-2 w-2 rounded-full bg-rui-neutral-300 transition-[width,background-color] duration-200 ease-out dark:bg-rui-neutral-600',\n 'hover:bg-rui-neutral-400 dark:hover:bg-rui-neutral-500 focus-visible:focus-ring outline-hidden',\n ].join(' '),\n variants: {\n active: {\n true: 'w-5 bg-rui-primary hover:bg-rui-primary dark:bg-rui-primary dark:hover:bg-rui-primary',\n },\n },\n }),\n pill: tv({\n base: 'rounded-full h-1.5 w-full bg-rui-neutral-200 dark:bg-rui-neutral-700 transition-colors',\n variants: {\n active: {\n true: 'bg-rui-primary dark:bg-rui-primary',\n },\n },\n }),\n};\n\nfunction onChange(delta: number): void {\n set(modelValue, get(modelValue) + delta);\n}\n\nfunction onPrev(): void {\n if (get(modelValue) > 1)\n onChange(-1);\n}\n\nfunction onNext(): void {\n if (get(modelValue) < pages)\n onChange(1);\n}\n\nfunction onClick(index: number): void {\n onChange(index - get(modelValue));\n}\n</script>\n\n<template>\n <div\n role=\"navigation\"\n aria-label=\"Step navigation\"\n class=\"flex items-center justify-between gap-x-4 transition-all duration-150\"\n :data-variant=\"variantProp\"\n >\n <template v-if=\"variantProp === FooterStepperVariant.pill\">\n <div\n data-id=\"pills\"\n class=\"flex w-full gap-x-3\"\n >\n <span\n v-for=\"i in pages\"\n :key=\"i\"\n :aria-current=\"modelValue === i ? 'step' : undefined\"\n :class=\"footerStepper.pill({ active: modelValue === i })\"\n />\n </div>\n </template>\n <template v-else>\n <RuiButton\n v-if=\"!hideButtons\"\n aria-label=\"Previous\"\n :disabled=\"modelValue <= 1\"\n :icon=\"arrowButtons\"\n :size=\"arrowButtons ? 'sm' : undefined\"\n :variant=\"arrowButtons ? 'outlined' : 'text'\"\n :color=\"arrowButtons ? undefined : 'primary'\"\n @click=\"onPrev()\"\n >\n <template\n v-if=\"!arrowButtons\"\n #prepend\n >\n <RuiIcon name=\"lu-chevron-left\" />\n </template>\n <span v-if=\"!arrowButtons\">Back</span>\n <RuiIcon\n v-else\n name=\"lu-chevron-left\"\n />\n </RuiButton>\n <span\n v-if=\"variantProp === FooterStepperVariant.numeric\"\n data-id=\"numeric\"\n class=\"text-sm tabular-nums text-rui-text-secondary\"\n >\n {{ modelValue }}/{{ pages }}\n </span>\n <div\n v-else-if=\"variantProp === FooterStepperVariant.bullet\"\n data-id=\"bullets\"\n class=\"flex items-center gap-x-1.5\"\n >\n <button\n v-for=\"i in pages\"\n :key=\"i\"\n type=\"button\"\n :aria-label=\"`Step ${i}`\"\n :aria-current=\"modelValue === i ? 'step' : undefined\"\n :class=\"footerStepper.bullet({ active: modelValue === i })\"\n @click=\"onClick(i)\"\n />\n </div>\n <RuiProgress\n v-else-if=\"variantProp === FooterStepperVariant.progress\"\n class=\"max-w-[60%]\"\n color=\"primary\"\n :value=\"(modelValue / pages) * 100\"\n />\n <RuiButton\n v-if=\"!hideButtons\"\n aria-label=\"Next\"\n :disabled=\"modelValue >= pages\"\n :icon=\"arrowButtons\"\n :size=\"arrowButtons ? 'sm' : undefined\"\n :variant=\"arrowButtons ? 'outlined' : 'text'\"\n :color=\"arrowButtons ? undefined : 'primary'\"\n @click=\"onNext()\"\n >\n <span v-if=\"!arrowButtons\">Next</span>\n <RuiIcon\n v-else\n name=\"lu-chevron-right\"\n />\n <template\n v-if=\"!arrowButtons\"\n #append\n >\n <RuiIcon name=\"lu-chevron-right\" />\n </template>\n </RuiButton>\n </template>\n </div>\n</template>\n"],"mappings":"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"}

package/dist/components/steppers/RuiStepper.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RuiStepper.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/\n Resolves the stepper's classes for one step, which vary with the state that\n * step is in, which the shared `ui` above cannot carry because it resolves\n * once for the whole stepper.\n \n @param state - the state that step is in\n * @returns the stepper's classes with that state applied\n */\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":""}
1	+ {"version":3,"file":"RuiStepper.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 RuiStepperIcon from '@/components/steppers/RuiStepperIcon.vue';\nimport { useKeyboardScroll } from '@/composables/keyboard-scroll';\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 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 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');\nconst scrollTabindex = useKeyboardScroll(wrapperRef);\n\nconst stepper = tv({\n slots: {\n // takes focus only while it overflows (see useKeyboardScroll); the ring sits inside the clip\n root: 'flex no-scrollbar overflow-auto rounded-rui-control outline-hidden focus-visible:focus-ring focus-visible:-outline-offset-2',\n step: 'flex items-center px-6 relative',\n title: '',\n subtitle: '',\n label: 'flex flex-col items-start text-left ml-2',\n // the connector is decoration, so it takes the light divider rather than a control's edge\n divider: 'border-rui-divider',\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-4 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 // 4px in from the edge, so the scrolling root does not clip the active marker's halo\n step: 'px-1 py-6',\n divider: 'block min-h-12 min-w-0 max-h-full h-full self-start -my-4 mx-4 border-l',\n },\n },\n state: {\n // an upcoming step is not disabled, so its text keeps the 4.5:1 of the secondary tone\n [StepperState.inactive]: {\n step: 'text-rui-text-disabled',\n title: 'text-rui-text-secondary',\n subtitle: 'text-rui-text-secondary',\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 // the line runs through the 32px marker's center\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/*\n Resolves the stepper's classes for one step, which vary with the state that\n * step is in, which the shared `ui` above cannot carry because it resolves\n * once for the whole stepper.\n \n @param state - the state that step is in\n * @returns the stepper's classes with that state applied\n */\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 :tabindex=\"scrollTabindex\"\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 <!-- a list may hold only its items, so the connector is drawn but kept out of the accessibility tree -->\n <hr\n v-if=\"index > 0\"\n aria-hidden=\"true\"\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 <RuiStepperIcon\n :index=\"index + 1\"\n :state=\"state\"\n :size=\"custom ? 'lg' : 'md'\"\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=\"custom ? 40 : 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]\"\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]\"\n class=\"text-caption\"\n >\n {{ description }}\n </span>\n </div>\n </div>\n </template>\n </div>\n</template>\n"],"mappings":""}

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

@@ -11,10 +11,6 @@ export interface Props {
     iconTop?: boolean;
     custom?: boolean;
     classNames?: RuiStepperClassNames;
-    /** @deprecated Use `classNames.title` instead */
-    titleClass?: string;
-    /** @deprecated Use `classNames.subtitle` instead */
-    subtitleClass?: string;
     orientation?: StepperOrientation;
     keepActiveVisible?: boolean;
 }

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

@@ -1,12 +1,13 @@
 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 { useKeyboardScroll } from "../../composables/keyboard-scroll.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 { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, 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 = [
+	"tabindex",
 	"data-orientation",
 	"data-icon-top",
 	"data-custom"
@@ -32,8 +33,6 @@ var RuiStepper_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 			default: false
 		},
 		classNames: {},
-		titleClass: { default: "" },
-		subtitleClass: { default: "" },
 		orientation: { default: () => StepperOrientation.horizontal },
 		keepActiveVisible: {
 			type: Boolean,
@@ -42,33 +41,34 @@ var RuiStepper_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 	},
 	setup(__props) {
 		const wrapperRef = useTemplateRef("wrapperRef");
+		const scrollTabindex = useKeyboardScroll(wrapperRef);
 		const stepper = tv({
 			slots: {
-				root: "flex no-scrollbar overflow-auto",
+				root: "flex no-scrollbar overflow-auto rounded-rui-control outline-hidden focus-visible:focus-ring focus-visible:-outline-offset-2",
 				step: "flex items-center px-6 relative",
 				title: "",
 				subtitle: "",
 				label: "flex flex-col items-start text-left ml-2",
-				divider: "border-rui-grey-400"
+				divider: "border-rui-divider"
 			},
 			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]"
+						divider: "block max-w-full min-w-4 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"
+						step: "px-1 py-6",
+						divider: "block min-h-12 min-w-0 max-h-full h-full self-start -my-4 mx-4 border-l"
 					}
 				},
 				state: {
 					[StepperState.inactive]: {
 						step: "text-rui-text-disabled",
 						title: "text-rui-text-secondary",
-						subtitle: "text-rui-text"
+						subtitle: "text-rui-text-secondary"
 					},
 					[StepperState.active]: {
 						step: "text-rui-text",
@@ -184,6 +184,7 @@ var RuiStepper_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 			return openBlock(), createElementBlock("div", {
 				ref_key: "wrapperRef",
 				ref: wrapperRef,
+				tabindex: unref(scrollTabindex),
 				role: "list",
 				"aria-label": "Progress steps",
 				class: normalizeClass(unref(ui).root()),
@@ -193,6 +194,7 @@ var RuiStepper_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 			}, [(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,
+					"aria-hidden": "true",
 					class: normalizeClass(unref(ui).divider())
 				}, null, 2)) : createCommentVNode("", true), createElementVNode("div", {
 					role: "listitem",
@@ -203,32 +205,32 @@ var RuiStepper_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 				}, [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,
+				}), () => [createElementVNode("div", _hoisted_3, [createVNode(RuiStepperIcon_default, {
 					index: index + 1,
-					state
-				}, null, 8, ["index", "state"])), loading ? (openBlock(), createBlock(RuiProgress_default, {
-					key: 2,
+					state,
+					size: __props.custom ? "lg" : "md"
+				}, null, 8, [
+					"index",
+					"state",
+					"size"
+				]), loading ? (openBlock(), createBlock(RuiProgress_default, {
+					key: 0,
 					class: "absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2",
-					size: "32",
+					size: __props.custom ? 40 : 32,
 					variant: "indeterminate",
 					circular: "",
 					thickness: "2",
 					color: "primary"
-				})) : createCommentVNode("", true)])]), title || description ? (openBlock(), createElementBlock("div", {
+				}, null, 8, ["size"])) : 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"])
+					class: normalizeClass([[stepUi(resolveState(state)).title(), __props.custom && __props.classNames?.title], "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"])
+					class: normalizeClass([[stepUi(resolveState(state)).subtitle(), __props.custom && __props.classNames?.subtitle], "text-caption"])
 				}, toDisplayString(description), 3)) : createCommentVNode("", true)], 2)) : createCommentVNode("", true)], 10, _hoisted_2)], 64);
 			}), 128))], 10, _hoisted_1);
 		};

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

	@@ -1 +1 @@
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/\n Resolves the stepper's classes for one step, which vary with the state that\n * step is in, which the shared `ui` above cannot carry because it resolves\n * once for the whole stepper.\n \n @param state - the state that step is in\n * @returns the stepper's classes with that state applied\n */\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":"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"}
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 RuiStepperIcon from '@/components/steppers/RuiStepperIcon.vue';\nimport { useKeyboardScroll } from '@/composables/keyboard-scroll';\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 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 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');\nconst scrollTabindex = useKeyboardScroll(wrapperRef);\n\nconst stepper = tv({\n slots: {\n // takes focus only while it overflows (see useKeyboardScroll); the ring sits inside the clip\n root: 'flex no-scrollbar overflow-auto rounded-rui-control outline-hidden focus-visible:focus-ring focus-visible:-outline-offset-2',\n step: 'flex items-center px-6 relative',\n title: '',\n subtitle: '',\n label: 'flex flex-col items-start text-left ml-2',\n // the connector is decoration, so it takes the light divider rather than a control's edge\n divider: 'border-rui-divider',\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-4 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 // 4px in from the edge, so the scrolling root does not clip the active marker's halo\n step: 'px-1 py-6',\n divider: 'block min-h-12 min-w-0 max-h-full h-full self-start -my-4 mx-4 border-l',\n },\n },\n state: {\n // an upcoming step is not disabled, so its text keeps the 4.5:1 of the secondary tone\n [StepperState.inactive]: {\n step: 'text-rui-text-disabled',\n title: 'text-rui-text-secondary',\n subtitle: 'text-rui-text-secondary',\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 // the line runs through the 32px marker's center\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/*\n Resolves the stepper's classes for one step, which vary with the state that\n * step is in, which the shared `ui` above cannot carry because it resolves\n * once for the whole stepper.\n \n @param state - the state that step is in\n * @returns the stepper's classes with that state applied\n */\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 :tabindex=\"scrollTabindex\"\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 <!-- a list may hold only its items, so the connector is drawn but kept out of the accessibility tree -->\n <hr\n v-if=\"index > 0\"\n aria-hidden=\"true\"\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 <RuiStepperIcon\n :index=\"index + 1\"\n :state=\"state\"\n :size=\"custom ? 'lg' : 'md'\"\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=\"custom ? 40 : 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]\"\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]\"\n class=\"text-caption\"\n >\n {{ description }}\n </span>\n </div>\n </div>\n </template>\n </div>\n</template>\n"],"mappings":"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"}

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

	@@ -1 +1 @@
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":""}
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\nconst { state = StepperState.inactive, index, size = 'md' } = defineProps<{\n state?: StepperState;\n index: number;\n /** md is 24px, the default stepper; lg is 32px, the `custom` one /\n size?: 'md' \| 'lg';\n}>();\n\nconst statusIcons: Partial<Record<StepperState, RuiIcons>> = {\n [StepperState.success]: 'lu-circle-check',\n [StepperState.error]: 'lu-circle-alert',\n [StepperState.warning]: 'lu-triangle-alert',\n [StepperState.info]: 'lu-info',\n};\n\n/\n The step marker: an outlined number ahead, a filled number with a soft halo\n * for the current step, and a tinted, primary-outlined check behind. A status state shows its\n * icon at full size in the step's own color.\n */\nconst stepperIcon = tv({\n base: 'inline-flex shrink-0 items-center justify-center rounded-full font-semibold tabular-nums transition-colors',\n variants: {\n size: {\n md: 'size-6 text-xs [--rui-icon-size:0.875rem]',\n lg: 'size-8 text-sm [--rui-icon-size:1rem]',\n },\n state: {\n [StepperState.inactive]: 'border border-rui-outline bg-rui-surface text-rui-text-secondary',\n // the 10% tint vanishes on a dark page, so dark raises the halo and the done well\n [StepperState.active]: 'bg-rui-primary-fill text-rui-primary-foreground ring-4 ring-rui-primary-soft dark:ring-rui-primary/30',\n // a primary outline over the tint, so done sits between the filled current step and a neutral upcoming one\n [StepperState.done]: 'border border-rui-primary bg-rui-primary-soft text-rui-primary dark:border-rui-primary-lighter dark:bg-rui-primary/20 dark:text-rui-primary-lighter',\n [StepperState.error]: '',\n [StepperState.warning]: '',\n [StepperState.info]: '',\n [StepperState.success]: '',\n },\n status: {\n true: '![--rui-icon-size:100%]',\n false: '',\n },\n },\n defaultVariants: { size: 'md', state: StepperState.inactive, status: false },\n});\n\nconst statusIcon = computed<RuiIcons \| undefined>(() => statusIcons[state]);\n</script>\n\n<template>\n <span :class=\"stepperIcon({ size, state, status: !!statusIcon })\">\n <RuiIcon\n v-if=\"state === StepperState.done\"\n name=\"lu-check\"\n />\n <RuiIcon\n v-else-if=\"statusIcon\"\n :name=\"statusIcon\"\n />\n <span v-else>{{ index }}</span>\n </span>\n</template>\n"],"mappings":""}

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

@@ -2,6 +2,8 @@ import { StepperState } from '../../types/stepper.js';
 type __VLS_Props = {
     state?: StepperState;
     index: number;
+    /** md is 24px, the default stepper; lg is 32px, the `custom` one */
+    size?: 'md' | 'lg';
 };
 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;