@rotki/ui-library 2.14.1 → 2.16.0

package/dist/components/forms/select/menu-select-styles.d.ts

@@ -0,0 +1,319 @@
+import { type TextInputVariant } from '../../../components/forms/text-input-styles.js';
+export type MenuSelectVariant = TextInputVariant;
+export declare const menuSelectStyles: import("tailwind-variants").TVReturnType<{
+    filled: {
+        true: {};
+    };
+}, undefined, undefined, {
+    dense: {
+        true: {
+            activator: string;
+        };
+    };
+    disabled: {
+        true: {
+            activator: string;
+        };
+    };
+    readonly: {
+        true: {
+            activator: string;
+        };
+    };
+    filled: {
+        true: {
+            activator: string;
+        };
+    };
+    outlined: {
+        true: {
+            activator: string;
+            label: string;
+            fieldset: string;
+        };
+        false: {
+            activator: string;
+        };
+    };
+    float: {
+        true: {
+            label: string;
+        };
+    };
+    opened: {
+        true: {
+            icon: string;
+        };
+    };
+    active: {
+        true: {
+            highlighted: string;
+        };
+    };
+    hasError: {
+        true: {};
+    };
+    hasSuccess: {
+        true: {};
+    };
+}, {
+    fieldset: string;
+    legend: string;
+    wrapper: string;
+    activator: string;
+    label: string;
+    value: string;
+    clear: string;
+    menu: string;
+    highlighted: string;
+    progress: string;
+    icon: string;
+    iconWrapper: string;
+    required: string;
+}, import("tailwind-variants").TVReturnType<{
+    dense: {
+        true: {
+            activator: string;
+        };
+    };
+    disabled: {
+        true: {
+            activator: string;
+        };
+    };
+    readonly: {
+        true: {
+            activator: string;
+        };
+    };
+    filled: {
+        true: {
+            activator: string;
+        };
+    };
+    outlined: {
+        true: {
+            activator: string;
+            label: string;
+            fieldset: string;
+        };
+        false: {
+            activator: string;
+        };
+    };
+    float: {
+        true: {
+            label: string;
+        };
+    };
+    opened: {
+        true: {
+            icon: string;
+        };
+    };
+    active: {
+        true: {
+            highlighted: string;
+        };
+    };
+    hasError: {
+        true: {};
+    };
+    hasSuccess: {
+        true: {};
+    };
+}, {
+    fieldset: string;
+    legend: string;
+    wrapper: string;
+    activator: string;
+    label: string;
+    value: string;
+    clear: string;
+    menu: string;
+    highlighted: string;
+    progress: string;
+    icon: string;
+    iconWrapper: string;
+    required: string;
+}, undefined, {
+    focused: {
+        true: {
+            fieldset: string;
+        };
+    };
+    hovered: {
+        true: {
+            fieldset: string;
+        };
+    };
+    disabled: {
+        true: {
+            fieldset: string;
+            label: string;
+        };
+    };
+    active: {
+        true: {};
+    };
+    showLabel: {
+        true: {};
+    };
+    validation: {
+        error: {
+            fieldset: string;
+            label: string;
+        };
+        success: {
+            fieldset: string;
+            label: string;
+        };
+    };
+    color: {
+        primary: {};
+        secondary: {};
+        error: {};
+        warning: {};
+        info: {};
+        success: {};
+    };
+}, {
+    label: string;
+    fieldset: string;
+    legend: string;
+}, import("tailwind-variants").TVReturnType<{
+    focused: {
+        true: {
+            fieldset: string;
+        };
+    };
+    hovered: {
+        true: {
+            fieldset: string;
+        };
+    };
+    disabled: {
+        true: {
+            fieldset: string;
+            label: string;
+        };
+    };
+    active: {
+        true: {};
+    };
+    showLabel: {
+        true: {};
+    };
+    validation: {
+        error: {
+            fieldset: string;
+            label: string;
+        };
+        success: {
+            fieldset: string;
+            label: string;
+        };
+    };
+    color: {
+        primary: {};
+        secondary: {};
+        error: {};
+        warning: {};
+        info: {};
+        success: {};
+    };
+}, {
+    label: string;
+    fieldset: string;
+    legend: string;
+}, undefined, {
+    focused: {
+        true: {
+            fieldset: string;
+        };
+    };
+    hovered: {
+        true: {
+            fieldset: string;
+        };
+    };
+    disabled: {
+        true: {
+            fieldset: string;
+            label: string;
+        };
+    };
+    active: {
+        true: {};
+    };
+    showLabel: {
+        true: {};
+    };
+    validation: {
+        error: {
+            fieldset: string;
+            label: string;
+        };
+        success: {
+            fieldset: string;
+            label: string;
+        };
+    };
+    color: {
+        primary: {};
+        secondary: {};
+        error: {};
+        warning: {};
+        info: {};
+        success: {};
+    };
+}, {
+    label: string;
+    fieldset: string;
+    legend: string;
+}, import("tailwind-variants").TVReturnType<{
+    focused: {
+        true: {
+            fieldset: string;
+        };
+    };
+    hovered: {
+        true: {
+            fieldset: string;
+        };
+    };
+    disabled: {
+        true: {
+            fieldset: string;
+            label: string;
+        };
+    };
+    active: {
+        true: {};
+    };
+    showLabel: {
+        true: {};
+    };
+    validation: {
+        error: {
+            fieldset: string;
+            label: string;
+        };
+        success: {
+            fieldset: string;
+            label: string;
+        };
+    };
+    color: {
+        primary: {};
+        secondary: {};
+        error: {};
+        warning: {};
+        info: {};
+        success: {};
+    };
+}, {
+    label: string;
+    fieldset: string;
+    legend: string;
+}, undefined, unknown, unknown, undefined>>>>;

package/dist/components/forms/select/menu-select-styles.js

@@ -0,0 +1,11 @@
+import { tv } from "../../../utils/tv.js";
+import { activatorStyles } from "../text-input-styles.js";
+//#region src/components/forms/select/menu-select-styles.ts
+var menuSelectStyles = tv({
+	extend: activatorStyles,
+	variants: { filled: { true: {} } }
+});
+//#endregion
+export { menuSelectStyles };
+
+//# sourceMappingURL=menu-select-styles.js.map

package/dist/components/forms/select/menu-select-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-select-styles.js","names":[],"sources":["../../../../src/components/forms/select/menu-select-styles.ts"],"sourcesContent":["import { activatorStyles, type TextInputVariant } from '@/components/forms/text-input-styles';\nimport { tv } from '@/utils/tv';\n\nexport type MenuSelectVariant = TextInputVariant;\n\nexport const menuSelectStyles = tv({\n  extend: activatorStyles,\n  variants: {\n    // Re-declare for type inference — actual styles are in activatorStyles\n    filled: { true: {} },\n  },\n});\n"],"mappings":";;;AAKA,IAAa,mBAAmB,GAAG;CACjC,QAAQ;CACR,UAAU,EAER,QAAQ,EAAE,MAAM,EAAE,EAAE,EACrB;CACF,CAAC"}

package/dist/components/forms/slider/RuiSlider.js

@@ -0,0 +1,7 @@
+import RuiSlider_vue_vue_type_script_setup_true_lang_default from "./RuiSlider.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/forms/slider/RuiSlider.vue
+var RuiSlider_default = RuiSlider_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { RuiSlider_default as default };
+
+//# sourceMappingURL=RuiSlider.js.map

package/dist/components/forms/slider/RuiSlider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RuiSlider.js","names":[],"sources":["../../../../src/components/forms/slider/RuiSlider.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { ContextColorsType } from '@/consts/colors';\nimport type { VueClassValue } from '@/types/class-value';\nimport { HIGHLIGHT_COLOR_MAP, HIGHLIGHT_DEFAULT, SliderInteraction, sliderStyles } from '@/components/forms/slider/slider-styles';\nimport RuiFormTextDetail from '@/components/helpers/RuiFormTextDetail.vue';\nimport { useFormTextDetail } from '@/utils/form-text-detail';\nimport { getNonRootAttrs, getRootAttrs } from '@/utils/helpers';\nimport { cn } from '@/utils/tv';\n\nexport interface RuiSliderClassNames {\n  root?: VueClassValue;\n  slider?: VueClassValue;\n  tick?: VueClassValue;\n}\n\nexport interface Props {\n  min?: number;\n  max?: number;\n  step?: number;\n  disabled?: boolean;\n  showThumbLabel?: boolean;\n  showTicks?: boolean;\n  hideTrack?: boolean;\n  tickSize?: number;\n  vertical?: boolean;\n  color?: ContextColorsType;\n  label?: string;\n  hint?: string;\n  errorMessages?: string | string[];\n  successMessages?: string | string[];\n  hideDetails?: boolean;\n  classNames?: RuiSliderClassNames;\n  /** @deprecated Use `classNames.slider` instead */\n  sliderClass?: string;\n  /** @deprecated Use `classNames.tick` instead */\n  tickClass?: string;\n  required?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiSlider',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<number>({ default: 0 });\n\nconst {\n  min = 0,\n  max = 100,\n  step = 1,\n  disabled = false,\n  showThumbLabel = false,\n  showTicks = false,\n  hideTrack = false,\n  vertical = false,\n  tickSize = 2,\n  color = 'primary',\n  label = '',\n  hint = '',\n  errorMessages = [],\n  successMessages = [],\n  hideDetails = false,\n  classNames,\n  sliderClass = '',\n  tickClass = '',\n  required = false,\n} = defineProps<Props>();\n\nconst BIG_TICK_THRESHOLD = 4;\n\nconst isHovered = ref<boolean>(false);\nconst isFocused = ref<boolean>(false);\nconst isActive = ref<boolean>(false);\n\nconst outer = useTemplateRef<HTMLDivElement>('outer');\n\nconst { hasError, validation } = useFormTextDetail(\n  () => errorMessages,\n  () => successMessages,\n);\n\nconst { width, height } = useElementBounding(outer);\n\nconst bigTick = computed<boolean>(() => tickSize > BIG_TICK_THRESHOLD);\n\nuseEventListener(document, 'mouseup', () => set(isActive, false));\n\nconst interaction = computed<SliderInteraction>(() => {\n  if (disabled)\n    return SliderInteraction.idle;\n  if (get(isActive))\n    return SliderInteraction.active;\n  if (get(isFocused))\n    return SliderInteraction.focus;\n  if (get(isHovered))\n    return SliderInteraction.hover;\n  return SliderInteraction.idle;\n});\n\n// Layout ui: stable props only (not interaction), used for wrapper/label/outer/inner/input\nconst ui = computed<ReturnType<typeof sliderStyles>>(() => sliderStyles({\n  disabled,\n  vertical,\n  validation: get(validation),\n  color,\n  bigTick: get(bigTick),\n}));\n\n// Track ui: includes interaction state, used for slider/thumb/ticks (changes on hover/focus/active)\nconst trackUi = computed<ReturnType<typeof sliderStyles>>(() => sliderStyles({\n  disabled,\n  vertical,\n  interaction: get(interaction),\n  color,\n  bigTick: get(bigTick),\n}));\n\nconst totalTicks = computed<number>(() => (max - min) / step);\n\nconst currentTick = computed<number>(() => Math.round((get(modelValue) - min) / step));\n\nconst trackWidth = computed<string>(() => {\n  const percentage = Math.min(100, Math.max(0, Math.round((get(currentTick) / get(totalTicks)) * 100)));\n  return `${percentage}%`;\n});\n\nconst innerStyle = computed<Record<string, string>>(() => {\n  const w = `${get(width)}px`;\n  const h = `${get(height)}px`;\n  const style: Record<string, string> = { width: vertical ? h : w, height: vertical ? w : h };\n  if (vertical) {\n    style['transform-origin'] = '0 0';\n    style['--tw-translate-y'] = h;\n  }\n  return style;\n});\n\nconst tickSizePx = computed<string>(() => `${tickSize}px`);\n\nconst ticksStyle = computed<Record<string, string>>(() => {\n  const size = get(tickSizePx);\n  return { margin: `0 calc(${size} / -2)`, width: `calc(100% + ${size})` };\n});\n\nconst tickStyle = computed<Record<string, string>>(() => {\n  const size = get(tickSizePx);\n  return { width: size, height: size };\n});\n\nconst highlightClass = computed<string>(() => get(bigTick) ? HIGHLIGHT_COLOR_MAP[color] : HIGHLIGHT_DEFAULT);\n\nconst tickClassOverride = computed<string | undefined>(() => cn(classNames?.tick) ?? (tickClass || undefined));\n\nfunction isHighlightedTick(index: number): boolean {\n  return index <= get(currentTick);\n}\n</script>\n\n<template>\n  <div v-bind=\"getRootAttrs($attrs)\">\n    <label\n      :class=\"ui.wrapper()\"\n      :data-error=\"hasError ? '' : undefined\"\n    >\n      <div\n        v-if=\"label\"\n        :class=\"ui.label()\"\n      >\n        {{ label }}\n        <span\n          v-if=\"required\"\n          class=\"text-rui-error\"\n        >\n          ﹡\n        </span>\n      </div>\n      <div\n        ref=\"outer\"\n        :class=\"ui.outer()\"\n      >\n        <div\n          :class=\"ui.inner()\"\n          :style=\"innerStyle\"\n        >\n          <input\n            v-model=\"modelValue\"\n            :class=\"ui.input()\"\n            type=\"range\"\n            :max=\"max\"\n            :min=\"min\"\n            :step=\"step\"\n            :disabled=\"disabled\"\n            :aria-invalid=\"hasError\"\n            :aria-label=\"label || undefined\"\n            :aria-valuetext=\"String(modelValue)\"\n            v-bind=\"getNonRootAttrs($attrs)\"\n            @mouseenter=\"isHovered = true\"\n            @mouseleave=\"isHovered = false\"\n            @focus=\"isFocused = true\"\n            @blur=\"isFocused = false\"\n            @mousedown=\"isActive = true\"\n            @mouseup=\"isActive = false\"\n          />\n          <div :class=\"trackUi.slider()\">\n            <div :class=\"trackUi.sliderInner()\">\n              <div :class=\"trackUi.container({ class: cn(classNames?.slider) ?? sliderClass })\">\n                <div\n                  v-if=\"!hideTrack\"\n                  :class=\"trackUi.track()\"\n                  :style=\"{ width: trackWidth }\"\n                  data-id=\"slider-track\"\n                />\n                <div\n                  v-if=\"showTicks && !disabled\"\n                  :class=\"trackUi.ticks()\"\n                  :style=\"ticksStyle\"\n                  data-id=\"slider-ticks\"\n                >\n                  <span\n                    v-for=\"i in totalTicks + 1\"\n                    :key=\"i\"\n                    :class=\"[\n                      trackUi.tick(),\n                      hideTrack\n                        ? tickClassOverride\n                        : [\n                          isHighlightedTick(i - 1) && highlightClass,\n                          !isHighlightedTick(i - 1) && tickClassOverride,\n                        ],\n                    ]\"\n                    :style=\"tickStyle\"\n                  />\n                </div>\n              </div>\n              <div\n                :class=\"[trackUi.thumb(), trackUi.thumbRipple()]\"\n                :style=\"{ left: trackWidth }\"\n                data-id=\"slider-thumb\"\n              />\n              <div\n                v-if=\"showThumbLabel && !disabled\"\n                :class=\"trackUi.thumbLabel()\"\n                :style=\"{ left: trackWidth }\"\n                data-id=\"slider-thumb-label\"\n              >\n                {{ modelValue }}\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </label>\n    <RuiFormTextDetail\n      v-if=\"!hideDetails\"\n      class=\"pt-1\"\n      :error-messages=\"errorMessages\"\n      :success-messages=\"successMessages\"\n      :hint=\"hint\"\n    />\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/forms/slider/RuiSlider.vue.d.ts

@@ -1,4 +1,10 @@
 import type { ContextColorsType } from '../../../consts/colors.js';
+import type { VueClassValue } from '../../../types/class-value';
+export interface RuiSliderClassNames {
+    root?: VueClassValue;
+    slider?: VueClassValue;
+    tick?: VueClassValue;
+}
 export interface Props {
     min?: number;
     max?: number;
@@ -15,7 +21,10 @@ export interface Props {
     errorMessages?: string | string[];
     successMessages?: string | string[];
     hideDetails?: boolean;
+    classNames?: RuiSliderClassNames;
+    /** @deprecated Use `classNames.slider` instead */
     sliderClass?: string;
+    /** @deprecated Use `classNames.tick` instead */
     tickClass?: string;
     required?: boolean;
 }

package/dist/components/forms/slider/RuiSlider.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,222 @@
+import { cn } from "../../../utils/tv.js";
+import { useFormTextDetail } from "../../../utils/form-text-detail.js";
+import RuiFormTextDetail_default from "../../helpers/RuiFormTextDetail.js";
+import { getNonRootAttrs, getRootAttrs } from "../../../utils/helpers.js";
+import { HIGHLIGHT_COLOR_MAP, HIGHLIGHT_DEFAULT, SliderInteraction, sliderStyles } from "./slider-styles.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, defineComponent, guardReactiveProps, mergeModels, mergeProps, normalizeClass, normalizeProps, normalizeStyle, openBlock, ref, renderList, toDisplayString, unref, useModel, useTemplateRef, vModelText, withDirectives } from "vue";
+import { useElementBounding, useEventListener } from "@vueuse/core";
+import { get as get$1, set as set$1 } from "@vueuse/shared";
+//#region src/components/forms/slider/RuiSlider.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["data-error"];
+var _hoisted_2 = {
+	key: 0,
+	class: "text-rui-error"
+};
+var _hoisted_3 = [
+	"max",
+	"min",
+	"step",
+	"disabled",
+	"aria-invalid",
+	"aria-label",
+	"aria-valuetext"
+];
+var BIG_TICK_THRESHOLD = 4;
+var RuiSlider_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "RuiSlider",
+	inheritAttrs: false,
+	__name: "RuiSlider",
+	props: /* @__PURE__ */ mergeModels({
+		min: { default: 0 },
+		max: { default: 100 },
+		step: { default: 1 },
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		showThumbLabel: {
+			type: Boolean,
+			default: false
+		},
+		showTicks: {
+			type: Boolean,
+			default: false
+		},
+		hideTrack: {
+			type: Boolean,
+			default: false
+		},
+		tickSize: { default: 2 },
+		vertical: {
+			type: Boolean,
+			default: false
+		},
+		color: { default: "primary" },
+		label: { default: "" },
+		hint: { default: "" },
+		errorMessages: { default: () => [] },
+		successMessages: { default: () => [] },
+		hideDetails: {
+			type: Boolean,
+			default: false
+		},
+		classNames: {},
+		sliderClass: { default: "" },
+		tickClass: { default: "" },
+		required: {
+			type: Boolean,
+			default: false
+		}
+	}, {
+		"modelValue": { default: 0 },
+		"modelModifiers": {}
+	}),
+	emits: ["update:modelValue"],
+	setup(__props) {
+		const modelValue = useModel(__props, "modelValue");
+		const isHovered = ref(false);
+		const isFocused = ref(false);
+		const isActive = ref(false);
+		const outer = useTemplateRef("outer");
+		const { hasError, validation } = useFormTextDetail(() => __props.errorMessages, () => __props.successMessages);
+		const { width, height } = useElementBounding(outer);
+		const bigTick = computed(() => __props.tickSize > BIG_TICK_THRESHOLD);
+		useEventListener(document, "mouseup", () => set$1(isActive, false));
+		const interaction = computed(() => {
+			if (__props.disabled) return SliderInteraction.idle;
+			if (get$1(isActive)) return SliderInteraction.active;
+			if (get$1(isFocused)) return SliderInteraction.focus;
+			if (get$1(isHovered)) return SliderInteraction.hover;
+			return SliderInteraction.idle;
+		});
+		const ui = computed(() => sliderStyles({
+			disabled: __props.disabled,
+			vertical: __props.vertical,
+			validation: get$1(validation),
+			color: __props.color,
+			bigTick: get$1(bigTick)
+		}));
+		const trackUi = computed(() => sliderStyles({
+			disabled: __props.disabled,
+			vertical: __props.vertical,
+			interaction: get$1(interaction),
+			color: __props.color,
+			bigTick: get$1(bigTick)
+		}));
+		const totalTicks = computed(() => (__props.max - __props.min) / __props.step);
+		const currentTick = computed(() => Math.round((get$1(modelValue) - __props.min) / __props.step));
+		const trackWidth = computed(() => {
+			return `${Math.min(100, Math.max(0, Math.round(get$1(currentTick) / get$1(totalTicks) * 100)))}%`;
+		});
+		const innerStyle = computed(() => {
+			const w = `${get$1(width)}px`;
+			const h = `${get$1(height)}px`;
+			const style = {
+				width: __props.vertical ? h : w,
+				height: __props.vertical ? w : h
+			};
+			if (__props.vertical) {
+				style["transform-origin"] = "0 0";
+				style["--tw-translate-y"] = h;
+			}
+			return style;
+		});
+		const tickSizePx = computed(() => `${__props.tickSize}px`);
+		const ticksStyle = computed(() => {
+			const size = get$1(tickSizePx);
+			return {
+				margin: `0 calc(${size} / -2)`,
+				width: `calc(100% + ${size})`
+			};
+		});
+		const tickStyle = computed(() => {
+			const size = get$1(tickSizePx);
+			return {
+				width: size,
+				height: size
+			};
+		});
+		const highlightClass = computed(() => get$1(bigTick) ? HIGHLIGHT_COLOR_MAP[__props.color] : HIGHLIGHT_DEFAULT);
+		const tickClassOverride = computed(() => cn(__props.classNames?.tick) ?? (__props.tickClass || void 0));
+		function isHighlightedTick(index) {
+			return index <= get$1(currentTick);
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", normalizeProps(guardReactiveProps(unref(getRootAttrs)(_ctx.$attrs))), [createElementVNode("label", {
+				class: normalizeClass(unref(ui).wrapper()),
+				"data-error": unref(hasError) ? "" : void 0
+			}, [__props.label ? (openBlock(), createElementBlock("div", {
+				key: 0,
+				class: normalizeClass(unref(ui).label())
+			}, [createTextVNode(toDisplayString(__props.label) + " ", 1), __props.required ? (openBlock(), createElementBlock("span", _hoisted_2, " ﹡ ")) : createCommentVNode("", true)], 2)) : createCommentVNode("", true), createElementVNode("div", {
+				ref_key: "outer",
+				ref: outer,
+				class: normalizeClass(unref(ui).outer())
+			}, [createElementVNode("div", {
+				class: normalizeClass(unref(ui).inner()),
+				style: normalizeStyle(unref(innerStyle))
+			}, [withDirectives(createElementVNode("input", mergeProps({
+				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => modelValue.value = $event),
+				class: unref(ui).input(),
+				type: "range",
+				max: __props.max,
+				min: __props.min,
+				step: __props.step,
+				disabled: __props.disabled,
+				"aria-invalid": unref(hasError),
+				"aria-label": __props.label || void 0,
+				"aria-valuetext": String(modelValue.value)
+			}, unref(getNonRootAttrs)(_ctx.$attrs), {
+				onMouseenter: _cache[1] || (_cache[1] = ($event) => isHovered.value = true),
+				onMouseleave: _cache[2] || (_cache[2] = ($event) => isHovered.value = false),
+				onFocus: _cache[3] || (_cache[3] = ($event) => isFocused.value = true),
+				onBlur: _cache[4] || (_cache[4] = ($event) => isFocused.value = false),
+				onMousedown: _cache[5] || (_cache[5] = ($event) => isActive.value = true),
+				onMouseup: _cache[6] || (_cache[6] = ($event) => isActive.value = false)
+			}), null, 16, _hoisted_3), [[vModelText, modelValue.value]]), createElementVNode("div", { class: normalizeClass(unref(trackUi).slider()) }, [createElementVNode("div", { class: normalizeClass(unref(trackUi).sliderInner()) }, [
+				createElementVNode("div", { class: normalizeClass(unref(trackUi).container({ class: unref(cn)(__props.classNames?.slider) ?? __props.sliderClass })) }, [!__props.hideTrack ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					class: normalizeClass(unref(trackUi).track()),
+					style: normalizeStyle({ width: unref(trackWidth) }),
+					"data-id": "slider-track"
+				}, null, 6)) : createCommentVNode("", true), __props.showTicks && !__props.disabled ? (openBlock(), createElementBlock("div", {
+					key: 1,
+					class: normalizeClass(unref(trackUi).ticks()),
+					style: normalizeStyle(unref(ticksStyle)),
+					"data-id": "slider-ticks"
+				}, [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(totalTicks) + 1, (i) => {
+					return openBlock(), createElementBlock("span", {
+						key: i,
+						class: normalizeClass([unref(trackUi).tick(), __props.hideTrack ? unref(tickClassOverride) : [isHighlightedTick(i - 1) && unref(highlightClass), !isHighlightedTick(i - 1) && unref(tickClassOverride)]]),
+						style: normalizeStyle(unref(tickStyle))
+					}, null, 6);
+				}), 128))], 6)) : createCommentVNode("", true)], 2),
+				createElementVNode("div", {
+					class: normalizeClass([unref(trackUi).thumb(), unref(trackUi).thumbRipple()]),
+					style: normalizeStyle({ left: unref(trackWidth) }),
+					"data-id": "slider-thumb"
+				}, null, 6),
+				__props.showThumbLabel && !__props.disabled ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					class: normalizeClass(unref(trackUi).thumbLabel()),
+					style: normalizeStyle({ left: unref(trackWidth) }),
+					"data-id": "slider-thumb-label"
+				}, toDisplayString(modelValue.value), 7)) : createCommentVNode("", true)
+			], 2)], 2)], 6)], 2)], 10, _hoisted_1), !__props.hideDetails ? (openBlock(), createBlock(RuiFormTextDetail_default, {
+				key: 0,
+				class: "pt-1",
+				"error-messages": __props.errorMessages,
+				"success-messages": __props.successMessages,
+				hint: __props.hint
+			}, null, 8, [
+				"error-messages",
+				"success-messages",
+				"hint"
+			])) : createCommentVNode("", true)], 16);
+		};
+	}
+});
+//#endregion
+export { RuiSlider_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=RuiSlider.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/forms/slider/RuiSlider.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RuiSlider.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../../../src/components/forms/slider/RuiSlider.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { ContextColorsType } from '@/consts/colors';\nimport type { VueClassValue } from '@/types/class-value';\nimport { HIGHLIGHT_COLOR_MAP, HIGHLIGHT_DEFAULT, SliderInteraction, sliderStyles } from '@/components/forms/slider/slider-styles';\nimport RuiFormTextDetail from '@/components/helpers/RuiFormTextDetail.vue';\nimport { useFormTextDetail } from '@/utils/form-text-detail';\nimport { getNonRootAttrs, getRootAttrs } from '@/utils/helpers';\nimport { cn } from '@/utils/tv';\n\nexport interface RuiSliderClassNames {\n  root?: VueClassValue;\n  slider?: VueClassValue;\n  tick?: VueClassValue;\n}\n\nexport interface Props {\n  min?: number;\n  max?: number;\n  step?: number;\n  disabled?: boolean;\n  showThumbLabel?: boolean;\n  showTicks?: boolean;\n  hideTrack?: boolean;\n  tickSize?: number;\n  vertical?: boolean;\n  color?: ContextColorsType;\n  label?: string;\n  hint?: string;\n  errorMessages?: string | string[];\n  successMessages?: string | string[];\n  hideDetails?: boolean;\n  classNames?: RuiSliderClassNames;\n  /** @deprecated Use `classNames.slider` instead */\n  sliderClass?: string;\n  /** @deprecated Use `classNames.tick` instead */\n  tickClass?: string;\n  required?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiSlider',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<number>({ default: 0 });\n\nconst {\n  min = 0,\n  max = 100,\n  step = 1,\n  disabled = false,\n  showThumbLabel = false,\n  showTicks = false,\n  hideTrack = false,\n  vertical = false,\n  tickSize = 2,\n  color = 'primary',\n  label = '',\n  hint = '',\n  errorMessages = [],\n  successMessages = [],\n  hideDetails = false,\n  classNames,\n  sliderClass = '',\n  tickClass = '',\n  required = false,\n} = defineProps<Props>();\n\nconst BIG_TICK_THRESHOLD = 4;\n\nconst isHovered = ref<boolean>(false);\nconst isFocused = ref<boolean>(false);\nconst isActive = ref<boolean>(false);\n\nconst outer = useTemplateRef<HTMLDivElement>('outer');\n\nconst { hasError, validation } = useFormTextDetail(\n  () => errorMessages,\n  () => successMessages,\n);\n\nconst { width, height } = useElementBounding(outer);\n\nconst bigTick = computed<boolean>(() => tickSize > BIG_TICK_THRESHOLD);\n\nuseEventListener(document, 'mouseup', () => set(isActive, false));\n\nconst interaction = computed<SliderInteraction>(() => {\n  if (disabled)\n    return SliderInteraction.idle;\n  if (get(isActive))\n    return SliderInteraction.active;\n  if (get(isFocused))\n    return SliderInteraction.focus;\n  if (get(isHovered))\n    return SliderInteraction.hover;\n  return SliderInteraction.idle;\n});\n\n// Layout ui: stable props only (not interaction), used for wrapper/label/outer/inner/input\nconst ui = computed<ReturnType<typeof sliderStyles>>(() => sliderStyles({\n  disabled,\n  vertical,\n  validation: get(validation),\n  color,\n  bigTick: get(bigTick),\n}));\n\n// Track ui: includes interaction state, used for slider/thumb/ticks (changes on hover/focus/active)\nconst trackUi = computed<ReturnType<typeof sliderStyles>>(() => sliderStyles({\n  disabled,\n  vertical,\n  interaction: get(interaction),\n  color,\n  bigTick: get(bigTick),\n}));\n\nconst totalTicks = computed<number>(() => (max - min) / step);\n\nconst currentTick = computed<number>(() => Math.round((get(modelValue) - min) / step));\n\nconst trackWidth = computed<string>(() => {\n  const percentage = Math.min(100, Math.max(0, Math.round((get(currentTick) / get(totalTicks)) * 100)));\n  return `${percentage}%`;\n});\n\nconst innerStyle = computed<Record<string, string>>(() => {\n  const w = `${get(width)}px`;\n  const h = `${get(height)}px`;\n  const style: Record<string, string> = { width: vertical ? h : w, height: vertical ? w : h };\n  if (vertical) {\n    style['transform-origin'] = '0 0';\n    style['--tw-translate-y'] = h;\n  }\n  return style;\n});\n\nconst tickSizePx = computed<string>(() => `${tickSize}px`);\n\nconst ticksStyle = computed<Record<string, string>>(() => {\n  const size = get(tickSizePx);\n  return { margin: `0 calc(${size} / -2)`, width: `calc(100% + ${size})` };\n});\n\nconst tickStyle = computed<Record<string, string>>(() => {\n  const size = get(tickSizePx);\n  return { width: size, height: size };\n});\n\nconst highlightClass = computed<string>(() => get(bigTick) ? HIGHLIGHT_COLOR_MAP[color] : HIGHLIGHT_DEFAULT);\n\nconst tickClassOverride = computed<string | undefined>(() => cn(classNames?.tick) ?? (tickClass || undefined));\n\nfunction isHighlightedTick(index: number): boolean {\n  return index <= get(currentTick);\n}\n</script>\n\n<template>\n  <div v-bind=\"getRootAttrs($attrs)\">\n    <label\n      :class=\"ui.wrapper()\"\n      :data-error=\"hasError ? '' : undefined\"\n    >\n      <div\n        v-if=\"label\"\n        :class=\"ui.label()\"\n      >\n        {{ label }}\n        <span\n          v-if=\"required\"\n          class=\"text-rui-error\"\n        >\n          ﹡\n        </span>\n      </div>\n      <div\n        ref=\"outer\"\n        :class=\"ui.outer()\"\n      >\n        <div\n          :class=\"ui.inner()\"\n          :style=\"innerStyle\"\n        >\n          <input\n            v-model=\"modelValue\"\n            :class=\"ui.input()\"\n            type=\"range\"\n            :max=\"max\"\n            :min=\"min\"\n            :step=\"step\"\n            :disabled=\"disabled\"\n            :aria-invalid=\"hasError\"\n            :aria-label=\"label || undefined\"\n            :aria-valuetext=\"String(modelValue)\"\n            v-bind=\"getNonRootAttrs($attrs)\"\n            @mouseenter=\"isHovered = true\"\n            @mouseleave=\"isHovered = false\"\n            @focus=\"isFocused = true\"\n            @blur=\"isFocused = false\"\n            @mousedown=\"isActive = true\"\n            @mouseup=\"isActive = false\"\n          />\n          <div :class=\"trackUi.slider()\">\n            <div :class=\"trackUi.sliderInner()\">\n              <div :class=\"trackUi.container({ class: cn(classNames?.slider) ?? sliderClass })\">\n                <div\n                  v-if=\"!hideTrack\"\n                  :class=\"trackUi.track()\"\n                  :style=\"{ width: trackWidth }\"\n                  data-id=\"slider-track\"\n                />\n                <div\n                  v-if=\"showTicks && !disabled\"\n                  :class=\"trackUi.ticks()\"\n                  :style=\"ticksStyle\"\n                  data-id=\"slider-ticks\"\n                >\n                  <span\n                    v-for=\"i in totalTicks + 1\"\n                    :key=\"i\"\n                    :class=\"[\n                      trackUi.tick(),\n                      hideTrack\n                        ? tickClassOverride\n                        : [\n                          isHighlightedTick(i - 1) && highlightClass,\n                          !isHighlightedTick(i - 1) && tickClassOverride,\n                        ],\n                    ]\"\n                    :style=\"tickStyle\"\n                  />\n                </div>\n              </div>\n              <div\n                :class=\"[trackUi.thumb(), trackUi.thumbRipple()]\"\n                :style=\"{ left: trackWidth }\"\n                data-id=\"slider-thumb\"\n              />\n              <div\n                v-if=\"showThumbLabel && !disabled\"\n                :class=\"trackUi.thumbLabel()\"\n                :style=\"{ left: trackWidth }\"\n                data-id=\"slider-thumb-label\"\n              >\n                {{ modelValue }}\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </label>\n    <RuiFormTextDetail\n      v-if=\"!hideDetails\"\n      class=\"pt-1\"\n      :error-messages=\"errorMessages\"\n      :success-messages=\"successMessages\"\n      :hint=\"hint\"\n    />\n  </div>\n</template>\n"],"mappings":"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"}