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

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

@@ -1,114 +1,78 @@
-import { type TextInputVariant } from '../text-input-styles.js';
-export type MenuSelectVariant = TextInputVariant;
-export declare const menuSelectStyles: import("tailwind-variants").TVReturnType<{
-    filled: {
-        true: {};
-    };
-}, undefined, undefined, {
+export declare const menuSelectStyles: import("tailwind-variants").TVReturnType<{} | {
     dense: {
-        true: {
-            activator: string;
-        };
+        true: import("tailwind-variants").ClassValue | {};
     };
     disabled: {
-        true: {
-            activator: string;
-        };
+        true: import("tailwind-variants").ClassValue | {};
     };
     readonly: {
+        true: import("tailwind-variants").ClassValue | {};
+    };
+    hovered: {
+        true: import("tailwind-variants").ClassValue | {};
+    };
+    opened: {
+        true: import("tailwind-variants").ClassValue | {};
+    };
+    hasError: {
+        true: import("tailwind-variants").ClassValue | {};
+    };
+    hasSuccess: {
+        true: import("tailwind-variants").ClassValue | {};
+    };
+    active: {
+        true: import("tailwind-variants").ClassValue | {};
+    };
+}, undefined, undefined, {
+    dense: {
         true: {
             activator: string;
         };
     };
-    filled: {
+    disabled: {
         true: {
             activator: string;
+            icon: string;
+            fieldset: string;
         };
     };
-    outlined: {
+    readonly: {
         true: {
             activator: string;
-            label: string;
             fieldset: string;
-        };
-        false: {
-            activator: string;
+            iconWrapper: string;
         };
     };
-    float: {
+    hovered: {
         true: {
-            label: string;
+            fieldset: string;
         };
     };
     opened: {
         true: {
             icon: string;
-        };
-    };
-    active: {
-        true: {
-            highlighted: string;
-        };
-    };
-    hasError: {
-        true: {};
-    };
-    hasSuccess: {
-        true: {};
-    };
-    hovered: {
-        true: {};
-    };
-    showLabel: {
-        true: {};
-    };
-} & {
-    focused: {
-        true: {
             fieldset: string;
         };
     };
-    hovered: {
+    hasError: {
         true: {
             fieldset: string;
         };
     };
-    disabled: {
+    hasSuccess: {
         true: {
             fieldset: string;
-            label: string;
         };
     };
     active: {
-        true: {};
-    };
-    showLabel: {
-        true: {};
-    };
-    validation: {
-        error: {
-            fieldset: string;
-            label: string;
-        };
-        success: {
-            fieldset: string;
-            label: string;
+        true: {
+            highlighted: string;
         };
     };
-    color: {
-        primary: {};
-        secondary: {};
-        error: {};
-        warning: {};
-        info: {};
-        success: {};
-    };
 }, {
-    fieldset: string;
-    legend: string;
     wrapper: string;
     activator: string;
-    label: string;
+    fieldset: string;
     value: string;
     clear: string;
     menu: string;
@@ -116,11 +80,6 @@ export declare const menuSelectStyles: import("tailwind-variants").TVReturnType<
     progress: string;
     icon: string;
     iconWrapper: string;
-    required: string;
-} & {
-    label: string;
-    fieldset: string;
-    legend: string;
 }, import("tailwind-variants").TVReturnType<{
     dense: {
         true: {
@@ -130,36 +89,36 @@ export declare const menuSelectStyles: import("tailwind-variants").TVReturnType<
     disabled: {
         true: {
             activator: string;
+            icon: string;
+            fieldset: string;
         };
     };
     readonly: {
         true: {
             activator: string;
+            fieldset: string;
+            iconWrapper: string;
         };
     };
-    filled: {
+    hovered: {
         true: {
-            activator: string;
+            fieldset: string;
         };
     };
-    outlined: {
+    opened: {
         true: {
-            activator: string;
-            label: string;
+            icon: string;
             fieldset: string;
         };
-        false: {
-            activator: string;
-        };
     };
-    float: {
+    hasError: {
         true: {
-            label: string;
+            fieldset: string;
         };
     };
-    opened: {
+    hasSuccess: {
         true: {
-            icon: string;
+            fieldset: string;
         };
     };
     active: {
@@ -167,24 +126,10 @@ export declare const menuSelectStyles: import("tailwind-variants").TVReturnType<
             highlighted: string;
         };
     };
-    hasError: {
-        true: {};
-    };
-    hasSuccess: {
-        true: {};
-    };
-    hovered: {
-        true: {};
-    };
-    showLabel: {
-        true: {};
-    };
 }, {
-    fieldset: string;
-    legend: string;
     wrapper: string;
     activator: string;
-    label: string;
+    fieldset: string;
     value: string;
     clear: string;
     menu: string;
@@ -192,185 +137,118 @@ export declare const menuSelectStyles: import("tailwind-variants").TVReturnType<
     progress: string;
     icon: string;
     iconWrapper: string;
-    required: string;
 }, undefined, {
-    focused: {
+    dense: {
         true: {
-            fieldset: string;
+            activator: string;
         };
     };
-    hovered: {
+    disabled: {
         true: {
+            activator: string;
+            icon: string;
             fieldset: string;
         };
     };
-    disabled: {
+    readonly: {
         true: {
+            activator: string;
             fieldset: string;
-            label: string;
+            iconWrapper: string;
         };
     };
-    active: {
-        true: {};
-    };
-    showLabel: {
-        true: {};
-    };
-    validation: {
-        error: {
-            fieldset: string;
-            label: string;
-        };
-        success: {
+    hovered: {
+        true: {
             fieldset: string;
-            label: string;
         };
     };
-    color: {
-        primary: {};
-        secondary: {};
-        error: {};
-        warning: {};
-        info: {};
-        success: {};
-    };
-}, {
-    label: string;
-    fieldset: string;
-    legend: string;
-}, import("tailwind-variants").TVReturnType<{
-    focused: {
+    opened: {
         true: {
+            icon: string;
             fieldset: string;
         };
     };
-    hovered: {
+    hasError: {
         true: {
             fieldset: string;
         };
     };
-    disabled: {
+    hasSuccess: {
         true: {
             fieldset: string;
-            label: string;
         };
     };
     active: {
-        true: {};
-    };
-    showLabel: {
-        true: {};
-    };
-    validation: {
-        error: {
-            fieldset: string;
-            label: string;
-        };
-        success: {
-            fieldset: string;
-            label: string;
+        true: {
+            highlighted: string;
         };
     };
-    color: {
-        primary: {};
-        secondary: {};
-        error: {};
-        warning: {};
-        info: {};
-        success: {};
-    };
 }, {
-    label: string;
+    wrapper: string;
+    activator: string;
     fieldset: string;
-    legend: string;
-}, undefined, {
-    focused: {
+    value: string;
+    clear: string;
+    menu: string;
+    highlighted: string;
+    progress: string;
+    icon: string;
+    iconWrapper: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    dense: {
         true: {
-            fieldset: string;
+            activator: string;
         };
     };
-    hovered: {
+    disabled: {
         true: {
+            activator: string;
+            icon: string;
             fieldset: string;
         };
     };
-    disabled: {
+    readonly: {
         true: {
+            activator: string;
             fieldset: string;
-            label: string;
+            iconWrapper: string;
         };
     };
-    active: {
-        true: {};
-    };
-    showLabel: {
-        true: {};
-    };
-    validation: {
-        error: {
-            fieldset: string;
-            label: string;
-        };
-        success: {
+    hovered: {
+        true: {
             fieldset: string;
-            label: string;
         };
     };
-    color: {
-        primary: {};
-        secondary: {};
-        error: {};
-        warning: {};
-        info: {};
-        success: {};
-    };
-}, {
-    label: string;
-    fieldset: string;
-    legend: string;
-}, import("tailwind-variants").TVReturnTypeLike<{
-    focused: {
+    opened: {
         true: {
+            icon: string;
             fieldset: string;
         };
     };
-    hovered: {
+    hasError: {
         true: {
             fieldset: string;
         };
     };
-    disabled: {
+    hasSuccess: {
         true: {
             fieldset: string;
-            label: string;
         };
     };
     active: {
-        true: {};
-    };
-    showLabel: {
-        true: {};
-    };
-    validation: {
-        error: {
-            fieldset: string;
-            label: string;
-        };
-        success: {
-            fieldset: string;
-            label: string;
+        true: {
+            highlighted: string;
         };
     };
-    color: {
-        primary: {};
-        secondary: {};
-        error: {};
-        warning: {};
-        info: {};
-        success: {};
-    };
 }, {
-    label: string;
+    wrapper: string;
+    activator: string;
     fieldset: string;
-    legend: string;
-}>>>>;
+    value: string;
+    clear: string;
+    menu: string;
+    highlighted: string;
+    progress: string;
+    icon: string;
+    iconWrapper: string;
+}>>>;

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

@@ -1,10 +1,7 @@
 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: {} } }
-});
+var menuSelectStyles = tv({ extend: activatorStyles });
 //#endregion
 export { menuSelectStyles };
 

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

@@ -1 +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,CAAC,EAAE,EACrB;AACF,CAAC"}
+{"version":3,"file":"menu-select-styles.js","names":[],"sources":["../../../../src/components/forms/select/menu-select-styles.ts"],"sourcesContent":["import { activatorStyles } from '@/components/forms/text-input-styles';\nimport { tv } from '@/utils/tv';\n\nexport const menuSelectStyles = tv({\n  extend: activatorStyles,\n});\n"],"mappings":";;;AAGA,IAAa,mBAAmB,GAAG,EACjC,QAAQ,gBACV,CAAC"}

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

@@ -1 +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 RuiSliderTicks from '@/components/forms/slider/RuiSliderTicks.vue';\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                <RuiSliderTicks\n                  v-if=\"showTicks && !disabled\"\n                  :count=\"totalTicks\"\n                  :container-class=\"trackUi.ticks()\"\n                  :container-style=\"ticksStyle\"\n                  :tick-class=\"trackUi.tick()\"\n                  :tick-style=\"tickStyle\"\n                  :hide-track=\"hideTrack\"\n                  :highlight-class=\"highlightClass\"\n                  :tick-class-override=\"tickClassOverride\"\n                  :is-highlighted=\"isHighlightedTick\"\n                />\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":""}
+{"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 RuiFieldLabel from '@/components/forms/field-label/RuiFieldLabel.vue';\nimport RuiSliderTicks from '@/components/forms/slider/RuiSliderTicks.vue';\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  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  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 generatedId = useId();\nconst attrs = useAttrs();\n\nconst { hasError } = useFormTextDetail(\n  () => errorMessages,\n  () => successMessages,\n);\n\n// the label above points at the range input, keeping a consumer's own id\nconst inputId = computed<string>(() => {\n  const id = attrs.id;\n  return typeof id === 'string' && id ? id : generatedId;\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  color,\n  bigTick: get(bigTick),\n  hasLabel: !!label,\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['--rui-slider-shift'] = 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));\n\nfunction isHighlightedTick(index: number): boolean {\n  return index <= get(currentTick);\n}\n</script>\n\n<template>\n  <div\n    v-bind=\"getRootAttrs($attrs)\"\n    :class=\"ui.root()\"\n  >\n    <!-- above the rail like any field's label, neutral in every state; the messages below carry the validation -->\n    <RuiFieldLabel\n      v-if=\"label\"\n      :text=\"label\"\n      :for=\"inputId\"\n      :required=\"required\"\n      :disabled=\"disabled\"\n      :class=\"ui.label()\"\n    />\n    <div\n      :class=\"ui.wrapper()\"\n      :data-error=\"hasError ? '' : undefined\"\n      data-id=\"slider-wrapper\"\n    >\n      <div\n        ref=\"outer\"\n        :class=\"ui.outer()\"\n      >\n        <div\n          :class=\"ui.inner()\"\n          :style=\"innerStyle\"\n        >\n          <input\n            :id=\"inputId\"\n            v-model.number=\"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, ['class', 'id'])\"\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) })\">\n                <div\n                  v-if=\"!hideTrack\"\n                  :class=\"trackUi.track()\"\n                  :style=\"{ width: trackWidth }\"\n                  data-id=\"slider-track\"\n                />\n                <RuiSliderTicks\n                  v-if=\"showTicks && !disabled\"\n                  :count=\"totalTicks\"\n                  :container-class=\"trackUi.ticks()\"\n                  :container-style=\"ticksStyle\"\n                  :tick-class=\"trackUi.tick()\"\n                  :tick-style=\"tickStyle\"\n                  :hide-track=\"hideTrack\"\n                  :highlight-class=\"highlightClass\"\n                  :tick-class-override=\"tickClassOverride\"\n                  :is-highlighted=\"isHighlightedTick\"\n                />\n              </div>\n              <div\n                :class=\"trackUi.thumb()\"\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    </div>\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

@@ -22,10 +22,6 @@ export interface Props {
     successMessages?: string | string[];
     hideDetails?: boolean;
     classNames?: RuiSliderClassNames;
-    /** @deprecated Use `classNames.slider` instead */
-    sliderClass?: string;
-    /** @deprecated Use `classNames.tick` instead */
-    tickClass?: string;
     required?: boolean;
 }
 type __VLS_Props = Props;