vuetify 3.1.16 → 3.2.0

package/lib/components/VSlider/VSlider.mjs

@@ -8,7 +8,7 @@ import { VLabel } from "../VLabel/index.mjs";
 import { VSliderThumb } from "./VSliderThumb.mjs";
 import { VSliderTrack } from "./VSliderTrack.mjs"; // Composables
 import { makeFocusProps, useFocus } from "../../composables/focus.mjs";
-import { makeSliderProps, useSlider } from "./slider.mjs";
+import { makeSliderProps, useSlider, useSteps } from "./slider.mjs";
 import { useProxiedModel } from "../../composables/proxiedModel.mjs"; // Utilities
 import { computed, ref } from 'vue';
 import { genericComponent, useRender } from "../../util/index.mjs"; // Types
@@ -25,13 +25,21 @@ export const VSlider = genericComponent()({
   },
   emits: {
     'update:focused': value => true,
-    'update:modelValue': v => true
+    'update:modelValue': v => true,
+    start: value => true,
+    end: value => true
   },
   setup(props, _ref) {
     let {
-      slots
+      slots,
+      emit
     } = _ref;
     const thumbContainerRef = ref();
+    const steps = useSteps(props);
+    const model = useProxiedModel(props, 'modelValue', undefined, v => {
+      const value = typeof v === 'string' ? parseFloat(v) : v == null ? steps.min.value : v;
+      return steps.roundValue(value);
+    });
     const {
       min,
       max,
@@ -45,16 +53,26 @@ export const VSlider = genericComponent()({
       readonly
     } = useSlider({
       props,
-      // eslint-disable-next-line @typescript-eslint/no-use-before-define
-      handleSliderMouseUp: newValue => model.value = roundValue(newValue),
-      // eslint-disable-next-line @typescript-eslint/no-use-before-define
-      handleMouseMove: newValue => model.value = roundValue(newValue),
+      steps,
+      onSliderStart: () => {
+        emit('start', model.value);
+      },
+      onSliderEnd: _ref2 => {
+        let {
+          value
+        } = _ref2;
+        const roundedValue = roundValue(value);
+        model.value = roundedValue;
+        emit('end', roundedValue);
+      },
+      onSliderMove: _ref3 => {
+        let {
+          value
+        } = _ref3;
+        return model.value = roundValue(value);
+      },
       getActiveThumb: () => thumbContainerRef.value?.$el
     });
-    const model = useProxiedModel(props, 'modelValue', undefined, v => {
-      const value = typeof v === 'string' ? parseFloat(v) : v == null ? min.value : v;
-      return roundValue(value);
-    });
     const {
       isFocused,
       focus,
@@ -70,7 +88,8 @@ export const VSlider = genericComponent()({
           'v-slider--focused': isFocused.value,
           'v-slider--pressed': mousePressed.value,
           'v-slider--disabled': props.disabled
-        }]
+        }, props.class],
+        "style": props.style
       }, inputProps, {
         "focused": isFocused.value
       }), {
@@ -80,11 +99,11 @@ export const VSlider = genericComponent()({
           "class": "v-slider__label",
           "text": props.label
         }, null) : undefined, slots.prepend?.(slotProps)]) : undefined,
-        default: _ref2 => {
+        default: _ref4 => {
           let {
             id,
             messagesId
-          } = _ref2;
+          } = _ref4;
           return _createVNode("div", {
             "class": "v-slider__container",
             "onMousedown": !readonly.value ? onSliderMousedown : undefined,

package/lib/components/VSlider/VSlider.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VSlider.mjs","names":["makeVInputProps","VInput","VLabel","VSliderThumb","VSliderTrack","makeFocusProps","useFocus","makeSliderProps","useSlider","useProxiedModel","computed","ref","genericComponent","useRender","VSlider","name","props","modelValue","type","Number","String","default","emits","value","v","setup","_ref","slots","thumbContainerRef","min","max","mousePressed","roundValue","onSliderMousedown","onSliderTouchstart","trackContainerRef","position","hasLabels","readonly","handleSliderMouseUp","newValue","model","handleMouseMove","getActiveThumb","$el","undefined","parseFloat","isFocused","focus","blur","trackStop","inputProps","_","filterProps","hasPrepend","label","prepend","_createVNode","_mergeProps","disabled","slotProps","_Fragment","id","_ref2","messagesId","elevation"],"sources":["../../../src/components/VSlider/VSlider.tsx"],"sourcesContent":["// Styles\nimport './VSlider.sass'\n\n// Components\nimport { makeVInputProps, VInput } from '@/components/VInput/VInput'\nimport { VLabel } from '@/components/VLabel'\nimport { VSliderThumb } from './VSliderThumb'\nimport { VSliderTrack } from './VSliderTrack'\n\n// Composables\nimport { makeFocusProps, useFocus } from '@/composables/focus'\nimport { makeSliderProps, useSlider } from './slider'\nimport { useProxiedModel } from '@/composables/proxiedModel'\n\n// Utilities\nimport { computed, ref } from 'vue'\nimport { genericComponent, useRender } from '@/util'\n\n// Types\nimport type { MakeSlots } from '@/util'\nimport type { VInputSlots } from '@/components/VInput/VInput'\n\nexport type VSliderSlots = VInputSlots & MakeSlots<{\n  'tick-label': []\n  'thumb-label': []\n}>\n\nexport const VSlider = genericComponent<VSliderSlots>()({\n  name: 'VSlider',\n\n  props: {\n    ...makeFocusProps(),\n    ...makeSliderProps(),\n    ...makeVInputProps(),\n\n    modelValue: {\n      type: [Number, String],\n      default: 0,\n    },\n  },\n\n  emits: {\n    'update:focused': (value: boolean) => true,\n    'update:modelValue': (v: number) => true,\n  },\n\n  setup (props, { slots }) {\n    const thumbContainerRef = ref()\n\n    const {\n      min,\n      max,\n      mousePressed,\n      roundValue,\n      onSliderMousedown,\n      onSliderTouchstart,\n      trackContainerRef,\n      position,\n      hasLabels,\n      readonly,\n    } = useSlider({\n      props,\n      // eslint-disable-next-line @typescript-eslint/no-use-before-define\n      handleSliderMouseUp: newValue => model.value = roundValue(newValue),\n      // eslint-disable-next-line @typescript-eslint/no-use-before-define\n      handleMouseMove: newValue => model.value = roundValue(newValue),\n      getActiveThumb: () => thumbContainerRef.value?.$el,\n    })\n\n    const model = useProxiedModel(\n      props,\n      'modelValue',\n      undefined,\n      v => {\n        const value = typeof v === 'string' ? parseFloat(v) : v == null ? min.value : v\n\n        return roundValue(value)\n      },\n    )\n\n    const { isFocused, focus, blur } = useFocus(props)\n    const trackStop = computed(() => position(model.value))\n\n    useRender(() => {\n      const [inputProps, _] = VInput.filterProps(props)\n      const hasPrepend = !!(props.label || slots.label || slots.prepend)\n\n      return (\n        <VInput\n          class={[\n            'v-slider',\n            {\n              'v-slider--has-labels': !!slots['tick-label'] || hasLabels.value,\n              'v-slider--focused': isFocused.value,\n              'v-slider--pressed': mousePressed.value,\n              'v-slider--disabled': props.disabled,\n            },\n          ]}\n          { ...inputProps }\n          focused={ isFocused.value }\n        >\n          {{\n            ...slots,\n            prepend: hasPrepend ? slotProps => (\n              <>\n                { slots.label?.(slotProps) ?? props.label\n                  ? (\n                    <VLabel\n                      id={ slotProps.id.value }\n                      class=\"v-slider__label\"\n                      text={ props.label }\n                    />\n                  ) : undefined\n                }\n\n                { slots.prepend?.(slotProps) }\n              </>\n            ) : undefined,\n            default: ({ id, messagesId }) => (\n              <div\n                class=\"v-slider__container\"\n                onMousedown={ !readonly.value ? onSliderMousedown : undefined }\n                onTouchstartPassive={ !readonly.value ? onSliderTouchstart : undefined }\n              >\n                <input\n                  id={ id.value }\n                  name={ props.name || id.value }\n                  disabled={ props.disabled }\n                  readonly={ props.readonly }\n                  tabindex=\"-1\"\n                  value={ model.value }\n                />\n\n                <VSliderTrack\n                  ref={ trackContainerRef }\n                  start={ 0 }\n                  stop={ trackStop.value }\n                >\n                  {{ 'tick-label': slots['tick-label'] }}\n                </VSliderTrack>\n\n                <VSliderThumb\n                  ref={ thumbContainerRef }\n                  aria-describedby={ messagesId.value }\n                  focused={ isFocused.value }\n                  min={ min.value }\n                  max={ max.value }\n                  modelValue={ model.value }\n                  onUpdate:modelValue={ v => (model.value = v) }\n                  position={ trackStop.value }\n                  elevation={ props.elevation }\n                  onFocus={ focus }\n                  onBlur={ blur }\n                >\n                  {{ 'thumb-label': slots['thumb-label'] }}\n                </VSliderThumb>\n              </div>\n            ),\n          }}\n        </VInput>\n      )\n    })\n\n    return {}\n  },\n})\n\nexport type VSlider = InstanceType<typeof VSlider>\n"],"mappings":"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"}
+{"version":3,"file":"VSlider.mjs","names":["makeVInputProps","VInput","VLabel","VSliderThumb","VSliderTrack","makeFocusProps","useFocus","makeSliderProps","useSlider","useSteps","useProxiedModel","computed","ref","genericComponent","useRender","VSlider","name","props","modelValue","type","Number","String","default","emits","value","v","start","end","setup","_ref","slots","emit","thumbContainerRef","steps","model","undefined","parseFloat","min","roundValue","max","mousePressed","onSliderMousedown","onSliderTouchstart","trackContainerRef","position","hasLabels","readonly","onSliderStart","onSliderEnd","_ref2","roundedValue","onSliderMove","_ref3","getActiveThumb","$el","isFocused","focus","blur","trackStop","inputProps","_","filterProps","hasPrepend","label","prepend","_createVNode","_mergeProps","disabled","class","style","slotProps","_Fragment","id","_ref4","messagesId","elevation"],"sources":["../../../src/components/VSlider/VSlider.tsx"],"sourcesContent":["// Styles\nimport './VSlider.sass'\n\n// Components\nimport { makeVInputProps, VInput } from '@/components/VInput/VInput'\nimport { VLabel } from '@/components/VLabel'\nimport { VSliderThumb } from './VSliderThumb'\nimport { VSliderTrack } from './VSliderTrack'\n\n// Composables\nimport { makeFocusProps, useFocus } from '@/composables/focus'\nimport { makeSliderProps, useSlider, useSteps } from './slider'\nimport { useProxiedModel } from '@/composables/proxiedModel'\n\n// Utilities\nimport { computed, ref } from 'vue'\nimport { genericComponent, useRender } from '@/util'\n\n// Types\nimport type { VInputSlots } from '@/components/VInput/VInput'\n\nexport type VSliderSlots = VInputSlots & {\n  'tick-label': []\n  'thumb-label': []\n}\n\nexport const VSlider = genericComponent<VSliderSlots>()({\n  name: 'VSlider',\n\n  props: {\n    ...makeFocusProps(),\n    ...makeSliderProps(),\n    ...makeVInputProps(),\n\n    modelValue: {\n      type: [Number, String],\n      default: 0,\n    },\n  },\n\n  emits: {\n    'update:focused': (value: boolean) => true,\n    'update:modelValue': (v: number) => true,\n    start: (value: number) => true,\n    end: (value: number) => true,\n  },\n\n  setup (props, { slots, emit }) {\n    const thumbContainerRef = ref()\n\n    const steps = useSteps(props)\n\n    const model = useProxiedModel(\n      props,\n      'modelValue',\n      undefined,\n      v => {\n        const value = typeof v === 'string' ? parseFloat(v) : v == null ? steps.min.value : v\n\n        return steps.roundValue(value)\n      },\n    )\n\n    const {\n      min,\n      max,\n      mousePressed,\n      roundValue,\n      onSliderMousedown,\n      onSliderTouchstart,\n      trackContainerRef,\n      position,\n      hasLabels,\n      readonly,\n    } = useSlider({\n      props,\n      steps,\n      onSliderStart: () => {\n        emit('start', model.value)\n      },\n      onSliderEnd: ({ value }) => {\n        const roundedValue = roundValue(value)\n        model.value = roundedValue\n        emit('end', roundedValue)\n      },\n      onSliderMove: ({ value }) => model.value = roundValue(value),\n      getActiveThumb: () => thumbContainerRef.value?.$el,\n    })\n\n    const { isFocused, focus, blur } = useFocus(props)\n    const trackStop = computed(() => position(model.value))\n\n    useRender(() => {\n      const [inputProps, _] = VInput.filterProps(props)\n      const hasPrepend = !!(props.label || slots.label || slots.prepend)\n\n      return (\n        <VInput\n          class={[\n            'v-slider',\n            {\n              'v-slider--has-labels': !!slots['tick-label'] || hasLabels.value,\n              'v-slider--focused': isFocused.value,\n              'v-slider--pressed': mousePressed.value,\n              'v-slider--disabled': props.disabled,\n            },\n            props.class,\n          ]}\n          style={ props.style }\n          { ...inputProps }\n          focused={ isFocused.value }\n        >\n          {{\n            ...slots,\n            prepend: hasPrepend ? slotProps => (\n              <>\n                { slots.label?.(slotProps) ?? props.label\n                  ? (\n                    <VLabel\n                      id={ slotProps.id.value }\n                      class=\"v-slider__label\"\n                      text={ props.label }\n                    />\n                  ) : undefined\n                }\n\n                { slots.prepend?.(slotProps) }\n              </>\n            ) : undefined,\n            default: ({ id, messagesId }) => (\n              <div\n                class=\"v-slider__container\"\n                onMousedown={ !readonly.value ? onSliderMousedown : undefined }\n                onTouchstartPassive={ !readonly.value ? onSliderTouchstart : undefined }\n              >\n                <input\n                  id={ id.value }\n                  name={ props.name || id.value }\n                  disabled={ props.disabled }\n                  readonly={ props.readonly }\n                  tabindex=\"-1\"\n                  value={ model.value }\n                />\n\n                <VSliderTrack\n                  ref={ trackContainerRef }\n                  start={ 0 }\n                  stop={ trackStop.value }\n                >\n                  {{ 'tick-label': slots['tick-label'] }}\n                </VSliderTrack>\n\n                <VSliderThumb\n                  ref={ thumbContainerRef }\n                  aria-describedby={ messagesId.value }\n                  focused={ isFocused.value }\n                  min={ min.value }\n                  max={ max.value }\n                  modelValue={ model.value }\n                  onUpdate:modelValue={ v => (model.value = v) }\n                  position={ trackStop.value }\n                  elevation={ props.elevation }\n                  onFocus={ focus }\n                  onBlur={ blur }\n                >\n                  {{ 'thumb-label': slots['thumb-label'] }}\n                </VSliderThumb>\n              </div>\n            ),\n          }}\n        </VInput>\n      )\n    })\n\n    return {}\n  },\n})\n\nexport type VSlider = InstanceType<typeof VSlider>\n"],"mappings":";AAAA;AACA;;AAEA;AAAA,SACSA,eAAe,EAAEC,MAAM;AAAA,SACvBC,MAAM;AAAA,SACNC,YAAY;AAAA,SACZC,YAAY,8BAErB;AAAA,SACSC,cAAc,EAAEC,QAAQ;AAAA,SACxBC,eAAe,EAAEC,SAAS,EAAEC,QAAQ;AAAA,SACpCC,eAAe,8CAExB;AACA,SAASC,QAAQ,EAAEC,GAAG,QAAQ,KAAK;AAAA,SAC1BC,gBAAgB,EAAEC,SAAS,gCAEpC;AAQA,OAAO,MAAMC,OAAO,GAAGF,gBAAgB,EAAgB,CAAC;EACtDG,IAAI,EAAE,SAAS;EAEfC,KAAK,EAAE;IACL,GAAGZ,cAAc,EAAE;IACnB,GAAGE,eAAe,EAAE;IACpB,GAAGP,eAAe,EAAE;IAEpBkB,UAAU,EAAE;MACVC,IAAI,EAAE,CAACC,MAAM,EAAEC,MAAM,CAAC;MACtBC,OAAO,EAAE;IACX;EACF,CAAC;EAEDC,KAAK,EAAE;IACL,gBAAgB,EAAGC,KAAc,IAAK,IAAI;IAC1C,mBAAmB,EAAGC,CAAS,IAAK,IAAI;IACxCC,KAAK,EAAGF,KAAa,IAAK,IAAI;IAC9BG,GAAG,EAAGH,KAAa,IAAK;EAC1B,CAAC;EAEDI,KAAKA,CAAEX,KAAK,EAAAY,IAAA,EAAmB;IAAA,IAAjB;MAAEC,KAAK;MAAEC;IAAK,CAAC,GAAAF,IAAA;IAC3B,MAAMG,iBAAiB,GAAGpB,GAAG,EAAE;IAE/B,MAAMqB,KAAK,GAAGxB,QAAQ,CAACQ,KAAK,CAAC;IAE7B,MAAMiB,KAAK,GAAGxB,eAAe,CAC3BO,KAAK,EACL,YAAY,EACZkB,SAAS,EACTV,CAAC,IAAI;MACH,MAAMD,KAAK,GAAG,OAAOC,CAAC,KAAK,QAAQ,GAAGW,UAAU,CAACX,CAAC,CAAC,GAAGA,CAAC,IAAI,IAAI,GAAGQ,KAAK,CAACI,GAAG,CAACb,KAAK,GAAGC,CAAC;MAErF,OAAOQ,KAAK,CAACK,UAAU,CAACd,KAAK,CAAC;IAChC,CAAC,CACF;IAED,MAAM;MACJa,GAAG;MACHE,GAAG;MACHC,YAAY;MACZF,UAAU;MACVG,iBAAiB;MACjBC,kBAAkB;MAClBC,iBAAiB;MACjBC,QAAQ;MACRC,SAAS;MACTC;IACF,CAAC,GAAGtC,SAAS,CAAC;MACZS,KAAK;MACLgB,KAAK;MACLc,aAAa,EAAEA,CAAA,KAAM;QACnBhB,IAAI,CAAC,OAAO,EAAEG,KAAK,CAACV,KAAK,CAAC;MAC5B,CAAC;MACDwB,WAAW,EAAEC,KAAA,IAAe;QAAA,IAAd;UAAEzB;QAAM,CAAC,GAAAyB,KAAA;QACrB,MAAMC,YAAY,GAAGZ,UAAU,CAACd,KAAK,CAAC;QACtCU,KAAK,CAACV,KAAK,GAAG0B,YAAY;QAC1BnB,IAAI,CAAC,KAAK,EAAEmB,YAAY,CAAC;MAC3B,CAAC;MACDC,YAAY,EAAEC,KAAA;QAAA,IAAC;UAAE5B;QAAM,CAAC,GAAA4B,KAAA;QAAA,OAAKlB,KAAK,CAACV,KAAK,GAAGc,UAAU,CAACd,KAAK,CAAC;MAAA;MAC5D6B,cAAc,EAAEA,CAAA,KAAMrB,iBAAiB,CAACR,KAAK,EAAE8B;IACjD,CAAC,CAAC;IAEF,MAAM;MAAEC,SAAS;MAAEC,KAAK;MAAEC;IAAK,CAAC,GAAGnD,QAAQ,CAACW,KAAK,CAAC;IAClD,MAAMyC,SAAS,GAAG/C,QAAQ,CAAC,MAAMiC,QAAQ,CAACV,KAAK,CAACV,KAAK,CAAC,CAAC;IAEvDV,SAAS,CAAC,MAAM;MACd,MAAM,CAAC6C,UAAU,EAAEC,CAAC,CAAC,GAAG3D,MAAM,CAAC4D,WAAW,CAAC5C,KAAK,CAAC;MACjD,MAAM6C,UAAU,GAAG,CAAC,EAAE7C,KAAK,CAAC8C,KAAK,IAAIjC,KAAK,CAACiC,KAAK,IAAIjC,KAAK,CAACkC,OAAO,CAAC;MAElE,OAAAC,YAAA,CAAAhE,MAAA,EAAAiE,WAAA;QAAA,SAEW,CACL,UAAU,EACV;UACE,sBAAsB,EAAE,CAAC,CAACpC,KAAK,CAAC,YAAY,CAAC,IAAIe,SAAS,CAACrB,KAAK;UAChE,mBAAmB,EAAE+B,SAAS,CAAC/B,KAAK;UACpC,mBAAmB,EAAEgB,YAAY,CAAChB,KAAK;UACvC,oBAAoB,EAAEP,KAAK,CAACkD;QAC9B,CAAC,EACDlD,KAAK,CAACmD,KAAK,CACZ;QAAA,SACOnD,KAAK,CAACoD;MAAK,GACdV,UAAU;QAAA,WACLJ,SAAS,CAAC/B;MAAK;QAGvB,GAAGM,KAAK;QACRkC,OAAO,EAAEF,UAAU,GAAGQ,SAAS,IAAAL,YAAA,CAAAM,SAAA,SAEzBzC,KAAK,CAACiC,KAAK,GAAGO,SAAS,CAAC,IAAIrD,KAAK,CAAC8C,KAAK,GAAAE,YAAA,CAAA/D,MAAA;UAAA,MAG9BoE,SAAS,CAACE,EAAE,CAAChD,KAAK;UAAA,SACjB,iBAAiB;UAAA,QAChBP,KAAK,CAAC8C;QAAK,WAElB5B,SAAS,EAGbL,KAAK,CAACkC,OAAO,GAAGM,SAAS,CAAC,EAE/B,GAAGnC,SAAS;QACbb,OAAO,EAAEmD,KAAA;UAAA,IAAC;YAAED,EAAE;YAAEE;UAAW,CAAC,GAAAD,KAAA;UAAA,OAAAR,YAAA;YAAA,SAElB,qBAAqB;YAAA,eACb,CAACnB,QAAQ,CAACtB,KAAK,GAAGiB,iBAAiB,GAAGN,SAAS;YAAA,uBACvC,CAACW,QAAQ,CAACtB,KAAK,GAAGkB,kBAAkB,GAAGP;UAAS,IAAA8B,YAAA;YAAA,MAG/DO,EAAE,CAAChD,KAAK;YAAA,QACNP,KAAK,CAACD,IAAI,IAAIwD,EAAE,CAAChD,KAAK;YAAA,YAClBP,KAAK,CAACkD,QAAQ;YAAA,YACdlD,KAAK,CAAC6B,QAAQ;YAAA,YAChB,IAAI;YAAA,SACLZ,KAAK,CAACV;UAAK,UAAAyC,YAAA,CAAA7D,YAAA;YAAA,OAIbuC,iBAAiB;YAAA,SACf,CAAC;YAAA,QACFe,SAAS,CAAClC;UAAK;YAEnB,YAAY,EAAEM,KAAK,CAAC,YAAY;UAAC,IAAAmC,YAAA,CAAA9D,YAAA;YAAA,OAI9B6B,iBAAiB;YAAA,oBACJ0C,UAAU,CAAClD,KAAK;YAAA,WACzB+B,SAAS,CAAC/B,KAAK;YAAA,OACnBa,GAAG,CAACb,KAAK;YAAA,OACTe,GAAG,CAACf,KAAK;YAAA,cACFU,KAAK,CAACV,KAAK;YAAA,uBACFC,CAAC,IAAKS,KAAK,CAACV,KAAK,GAAGC,CAAE;YAAA,YACjCiC,SAAS,CAAClC,KAAK;YAAA,aACdP,KAAK,CAAC0D,SAAS;YAAA,WACjBnB,KAAK;YAAA,UACNC;UAAI;YAEV,aAAa,EAAE3B,KAAK,CAAC,aAAa;UAAC;QAAA;MAG3C;IAIT,CAAC,CAAC;IAEF,OAAO,CAAC,CAAC;EACX;AACF,CAAC,CAAC"}

package/lib/components/VSlider/VSliderThumb.mjs

@@ -6,6 +6,7 @@ import "./VSliderThumb.css";
 import { VScaleTransition } from "../transitions/index.mjs";
 import { VSliderSymbol } from "./slider.mjs"; // Directives
 import Ripple from "../../directives/ripple/index.mjs"; // Composables
+import { makeComponentProps } from "../../composables/component.mjs";
 import { useElevation } from "../../composables/elevation.mjs";
 import { useTextColor } from "../../composables/color.mjs"; // Utilities
 import { computed, inject } from 'vue';
@@ -36,7 +37,8 @@ export const VSliderThumb = genericComponent()({
     ripple: {
       type: Boolean,
       default: true
-    }
+    },
+    ...makeComponentProps()
   },
   emits: {
     'update:modelValue': v => true
@@ -114,11 +116,11 @@ export const VSliderThumb = genericComponent()({
         "class": ['v-slider-thumb', {
           'v-slider-thumb--focused': props.focused,
           'v-slider-thumb--pressed': props.focused && mousePressed.value
-        }],
-        "style": {
+        }, props.class],
+        "style": [{
           '--v-slider-thumb-position': positionPercentage,
           '--v-slider-thumb-size': convertToUnit(thumbSize.value)
-        },
+        }, props.style],
         "role": "slider",
         "tabindex": disabled.value ? -1 : 0,
         "aria-valuemin": props.min,

package/lib/components/VSlider/VSliderThumb.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VSliderThumb.mjs","names":["VScaleTransition","VSliderSymbol","Ripple","useElevation","useTextColor","computed","inject","convertToUnit","genericComponent","keyValues","useRender","VSliderThumb","name","directives","props","focused","Boolean","max","type","Number","required","min","modelValue","position","ripple","default","emits","v","setup","_ref","slots","emit","slider","Error","thumbColor","step","vertical","disabled","thumbSize","thumbLabel","direction","readonly","elevation","isReversed","horizontalDirection","mousePressed","decimals","textColorClasses","textColorStyles","pageup","pagedown","end","home","left","right","down","up","relevantKeys","multipliers","value","parseKeydown","e","includes","key","preventDefault","_step","steps","increase","multiplier","shiftKey","ctrlKey","Math","onKeydown","newValue","positionPercentage","elevationClasses","undefined","_createVNode","_withDirectives","_resolveDirective","circle","center","toFixed","_vShow"],"sources":["../../../src/components/VSlider/VSliderThumb.tsx"],"sourcesContent":["// Styles\nimport './VSliderThumb.sass'\n\n// Components\nimport { VScaleTransition } from '../transitions'\nimport { VSliderSymbol } from './slider'\n\n// Directives\nimport Ripple from '@/directives/ripple'\n\n// Composables\nimport { useElevation } from '@/composables/elevation'\nimport { useTextColor } from '@/composables/color'\n\n// Utilities\nimport { computed, inject } from 'vue'\nimport { convertToUnit, genericComponent, keyValues, useRender } from '@/util'\n\nexport type VSliderThumbSlots = {\n  'thumb-label': []\n}\n\nexport const VSliderThumb = genericComponent<VSliderThumbSlots>()({\n  name: 'VSliderThumb',\n\n  directives: { Ripple },\n\n  props: {\n    focused: Boolean,\n    max: {\n      type: Number,\n      required: true,\n    },\n    min: {\n      type: Number,\n      required: true,\n    },\n    modelValue: {\n      type: Number,\n      required: true,\n    },\n    position: {\n      type: Number,\n      required: true,\n    },\n    ripple: {\n      type: Boolean,\n      default: true,\n    },\n  },\n\n  emits: {\n    'update:modelValue': (v: number) => true,\n  },\n\n  setup (props, { slots, emit }) {\n    const slider = inject(VSliderSymbol)\n\n    if (!slider) throw new Error('[Vuetify] v-slider-thumb must be used inside v-slider or v-range-slider')\n\n    const {\n      thumbColor,\n      step,\n      vertical,\n      disabled,\n      thumbSize,\n      thumbLabel,\n      direction,\n      readonly,\n      elevation,\n      isReversed,\n      horizontalDirection,\n      mousePressed,\n      decimals,\n    } = slider\n\n    const { textColorClasses, textColorStyles } = useTextColor(thumbColor)\n\n    const { pageup, pagedown, end, home, left, right, down, up } = keyValues\n    const relevantKeys = [pageup, pagedown, end, home, left, right, down, up]\n\n    const multipliers = computed(() => {\n      if (step.value) return [1, 2, 3]\n      else return [1, 5, 10]\n    })\n\n    function parseKeydown (e: KeyboardEvent, value: number) {\n      if (!relevantKeys.includes(e.key)) return\n\n      e.preventDefault()\n\n      const _step = step.value || 0.1\n      const steps = (props.max - props.min) / _step\n      if ([left, right, down, up].includes(e.key)) {\n        const increase = horizontalDirection.value === 'rtl' ? [left, up] : [right, up]\n        const direction = increase.includes(e.key) ? 1 : -1\n        const multiplier = e.shiftKey ? 2 : (e.ctrlKey ? 1 : 0)\n\n        value = value + (direction * _step * multipliers.value[multiplier])\n      } else if (e.key === home) {\n        value = props.min\n      } else if (e.key === end) {\n        value = props.max\n      } else {\n        const direction = e.key === pagedown ? 1 : -1\n        value = value - (direction * _step * (steps > 100 ? steps / 10 : 10))\n      }\n\n      return Math.max(props.min, Math.min(props.max, value))\n    }\n\n    function onKeydown (e: KeyboardEvent) {\n      const newValue = parseKeydown(e, props.modelValue)\n\n      newValue != null && emit('update:modelValue', newValue)\n    }\n\n    useRender(() => {\n      const positionPercentage = convertToUnit((vertical.value || isReversed.value) ? 100 - props.position : props.position, '%')\n      const { elevationClasses } = useElevation(computed(() => !disabled.value ? elevation.value : undefined))\n\n      return (\n        <div\n          class={[\n            'v-slider-thumb',\n            {\n              'v-slider-thumb--focused': props.focused,\n              'v-slider-thumb--pressed': props.focused && mousePressed.value,\n            },\n          ]}\n          style={{\n            '--v-slider-thumb-position': positionPercentage,\n            '--v-slider-thumb-size': convertToUnit(thumbSize.value),\n          }}\n          role=\"slider\"\n          tabindex={ disabled.value ? -1 : 0 }\n          aria-valuemin={ props.min }\n          aria-valuemax={ props.max }\n          aria-valuenow={ props.modelValue }\n          aria-readonly={ readonly.value }\n          aria-orientation={ direction.value }\n          onKeydown={ !readonly.value ? onKeydown : undefined }\n        >\n          <div\n            class={[\n              'v-slider-thumb__surface',\n              textColorClasses.value,\n              elevationClasses.value,\n            ]}\n            style={{\n              ...textColorStyles.value,\n            }}\n          />\n          <div\n            class={[\n              'v-slider-thumb__ripple',\n              textColorClasses.value,\n            ]}\n            style={ textColorStyles.value }\n            v-ripple={[props.ripple, null, ['circle', 'center']]}\n          />\n          <VScaleTransition origin=\"bottom center\">\n            <div\n              class=\"v-slider-thumb__label-container\"\n              v-show={ (thumbLabel.value && props.focused) || thumbLabel.value === 'always' }\n            >\n              <div\n                class={[\n                  'v-slider-thumb__label',\n                ]}\n              >\n                <div>\n                  { slots['thumb-label']?.({ modelValue: props.modelValue }) ?? props.modelValue.toFixed(step.value ? decimals.value : 1) }\n                </div>\n              </div>\n            </div>\n          </VScaleTransition>\n        </div>\n      )\n    })\n\n    return {}\n  },\n})\n\nexport type VSliderThumb = InstanceType<typeof VSliderThumb>\n"],"mappings":"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"}
+{"version":3,"file":"VSliderThumb.mjs","names":["VScaleTransition","VSliderSymbol","Ripple","makeComponentProps","useElevation","useTextColor","computed","inject","convertToUnit","genericComponent","keyValues","useRender","VSliderThumb","name","directives","props","focused","Boolean","max","type","Number","required","min","modelValue","position","ripple","default","emits","v","setup","_ref","slots","emit","slider","Error","thumbColor","step","vertical","disabled","thumbSize","thumbLabel","direction","readonly","elevation","isReversed","horizontalDirection","mousePressed","decimals","textColorClasses","textColorStyles","pageup","pagedown","end","home","left","right","down","up","relevantKeys","multipliers","value","parseKeydown","e","includes","key","preventDefault","_step","steps","increase","multiplier","shiftKey","ctrlKey","Math","onKeydown","newValue","positionPercentage","elevationClasses","undefined","_createVNode","class","style","_withDirectives","_resolveDirective","circle","center","toFixed","_vShow"],"sources":["../../../src/components/VSlider/VSliderThumb.tsx"],"sourcesContent":["// Styles\nimport './VSliderThumb.sass'\n\n// Components\nimport { VScaleTransition } from '../transitions'\nimport { VSliderSymbol } from './slider'\n\n// Directives\nimport Ripple from '@/directives/ripple'\n\n// Composables\nimport { makeComponentProps } from '@/composables/component'\nimport { useElevation } from '@/composables/elevation'\nimport { useTextColor } from '@/composables/color'\n\n// Utilities\nimport { computed, inject } from 'vue'\nimport { convertToUnit, genericComponent, keyValues, useRender } from '@/util'\n\nexport type VSliderThumbSlots = {\n  'thumb-label': []\n}\n\nexport const VSliderThumb = genericComponent<VSliderThumbSlots>()({\n  name: 'VSliderThumb',\n\n  directives: { Ripple },\n\n  props: {\n    focused: Boolean,\n    max: {\n      type: Number,\n      required: true,\n    },\n    min: {\n      type: Number,\n      required: true,\n    },\n    modelValue: {\n      type: Number,\n      required: true,\n    },\n    position: {\n      type: Number,\n      required: true,\n    },\n    ripple: {\n      type: Boolean,\n      default: true,\n    },\n\n    ...makeComponentProps(),\n  },\n\n  emits: {\n    'update:modelValue': (v: number) => true,\n  },\n\n  setup (props, { slots, emit }) {\n    const slider = inject(VSliderSymbol)\n\n    if (!slider) throw new Error('[Vuetify] v-slider-thumb must be used inside v-slider or v-range-slider')\n\n    const {\n      thumbColor,\n      step,\n      vertical,\n      disabled,\n      thumbSize,\n      thumbLabel,\n      direction,\n      readonly,\n      elevation,\n      isReversed,\n      horizontalDirection,\n      mousePressed,\n      decimals,\n    } = slider\n\n    const { textColorClasses, textColorStyles } = useTextColor(thumbColor)\n\n    const { pageup, pagedown, end, home, left, right, down, up } = keyValues\n    const relevantKeys = [pageup, pagedown, end, home, left, right, down, up]\n\n    const multipliers = computed(() => {\n      if (step.value) return [1, 2, 3]\n      else return [1, 5, 10]\n    })\n\n    function parseKeydown (e: KeyboardEvent, value: number) {\n      if (!relevantKeys.includes(e.key)) return\n\n      e.preventDefault()\n\n      const _step = step.value || 0.1\n      const steps = (props.max - props.min) / _step\n      if ([left, right, down, up].includes(e.key)) {\n        const increase = horizontalDirection.value === 'rtl' ? [left, up] : [right, up]\n        const direction = increase.includes(e.key) ? 1 : -1\n        const multiplier = e.shiftKey ? 2 : (e.ctrlKey ? 1 : 0)\n\n        value = value + (direction * _step * multipliers.value[multiplier])\n      } else if (e.key === home) {\n        value = props.min\n      } else if (e.key === end) {\n        value = props.max\n      } else {\n        const direction = e.key === pagedown ? 1 : -1\n        value = value - (direction * _step * (steps > 100 ? steps / 10 : 10))\n      }\n\n      return Math.max(props.min, Math.min(props.max, value))\n    }\n\n    function onKeydown (e: KeyboardEvent) {\n      const newValue = parseKeydown(e, props.modelValue)\n\n      newValue != null && emit('update:modelValue', newValue)\n    }\n\n    useRender(() => {\n      const positionPercentage = convertToUnit((vertical.value || isReversed.value) ? 100 - props.position : props.position, '%')\n      const { elevationClasses } = useElevation(computed(() => !disabled.value ? elevation.value : undefined))\n\n      return (\n        <div\n          class={[\n            'v-slider-thumb',\n            {\n              'v-slider-thumb--focused': props.focused,\n              'v-slider-thumb--pressed': props.focused && mousePressed.value,\n            },\n            props.class,\n          ]}\n          style={[\n            {\n              '--v-slider-thumb-position': positionPercentage,\n              '--v-slider-thumb-size': convertToUnit(thumbSize.value),\n            },\n            props.style,\n          ]}\n          role=\"slider\"\n          tabindex={ disabled.value ? -1 : 0 }\n          aria-valuemin={ props.min }\n          aria-valuemax={ props.max }\n          aria-valuenow={ props.modelValue }\n          aria-readonly={ readonly.value }\n          aria-orientation={ direction.value }\n          onKeydown={ !readonly.value ? onKeydown : undefined }\n        >\n          <div\n            class={[\n              'v-slider-thumb__surface',\n              textColorClasses.value,\n              elevationClasses.value,\n            ]}\n            style={{\n              ...textColorStyles.value,\n            }}\n          />\n          <div\n            class={[\n              'v-slider-thumb__ripple',\n              textColorClasses.value,\n            ]}\n            style={ textColorStyles.value }\n            v-ripple={[props.ripple, null, ['circle', 'center']]}\n          />\n          <VScaleTransition origin=\"bottom center\">\n            <div\n              class=\"v-slider-thumb__label-container\"\n              v-show={ (thumbLabel.value && props.focused) || thumbLabel.value === 'always' }\n            >\n              <div\n                class={[\n                  'v-slider-thumb__label',\n                ]}\n              >\n                <div>\n                  { slots['thumb-label']?.({ modelValue: props.modelValue }) ?? props.modelValue.toFixed(step.value ? decimals.value : 1) }\n                </div>\n              </div>\n            </div>\n          </VScaleTransition>\n        </div>\n      )\n    })\n\n    return {}\n  },\n})\n\nexport type VSliderThumb = InstanceType<typeof VSliderThumb>\n"],"mappings":"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"}

package/lib/components/VSlider/VSliderTrack.mjs

@@ -4,6 +4,7 @@ import "./VSliderTrack.css";
 
 // Components
 import { VSliderSymbol } from "./slider.mjs"; // Composables
+import { makeComponentProps } from "../../composables/component.mjs";
 import { useBackgroundColor } from "../../composables/color.mjs";
 import { useRounded } from "../../composables/rounded.mjs"; // Utilities
 import { computed, inject } from 'vue';
@@ -18,7 +19,8 @@ export const VSliderTrack = genericComponent()({
     stop: {
       type: Number,
       required: true
-    }
+    },
+    ...makeComponentProps()
   },
   emits: {},
   setup(props, _ref) {
@@ -93,12 +95,12 @@ export const VSliderTrack = genericComponent()({
     });
     useRender(() => {
       return _createVNode("div", {
-        "class": ['v-slider-track', roundedClasses.value],
-        "style": {
+        "class": ['v-slider-track', roundedClasses.value, props.class],
+        "style": [{
           '--v-slider-track-size': convertToUnit(trackSize.value),
           '--v-slider-tick-size': convertToUnit(tickSize.value),
           direction: !vertical.value ? horizontalDirection.value : undefined
-        }
+        }, props.style]
       }, [_createVNode("div", {
         "class": ['v-slider-track__background', trackColorClasses.value, {
           'v-slider-track__background--opacity': !!color.value || !trackFillColor.value

package/lib/components/VSlider/VSliderTrack.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VSliderTrack.mjs","names":["VSliderSymbol","useBackgroundColor","useRounded","computed","inject","convertToUnit","genericComponent","useRender","VSliderTrack","name","props","start","type","Number","required","stop","emits","setup","_ref","slots","slider","Error","color","horizontalDirection","parsedTicks","rounded","showTicks","tickSize","trackColor","trackFillColor","trackSize","vertical","min","max","roundedClasses","backgroundColorClasses","trackFillColorClasses","backgroundColorStyles","trackFillColorStyles","trackColorClasses","trackColorStyles","startDir","value","endDir","backgroundStyles","trackFillWidth","trackFillStyles","computedTicks","ticks","slice","reverse","map","tick","index","directionProperty","directionValue","position","undefined","_createVNode","label","direction"],"sources":["../../../src/components/VSlider/VSliderTrack.tsx"],"sourcesContent":["// Styles\nimport './VSliderTrack.sass'\n\n// Components\nimport { VSliderSymbol } from './slider'\n\n// Composables\nimport { useBackgroundColor } from '@/composables/color'\nimport { useRounded } from '@/composables/rounded'\n\n// Utilities\nimport { computed, inject } from 'vue'\nimport { convertToUnit, genericComponent, useRender } from '@/util'\n\nexport type VSliderTrackSlots = {\n  'tick-label': []\n}\n\nexport const VSliderTrack = genericComponent<VSliderTrackSlots>()({\n  name: 'VSliderTrack',\n\n  props: {\n    start: {\n      type: Number,\n      required: true,\n    },\n    stop: {\n      type: Number,\n      required: true,\n    },\n  },\n\n  emits: {},\n\n  setup (props, { slots }) {\n    const slider = inject(VSliderSymbol)\n\n    if (!slider) throw new Error('[Vuetify] v-slider-track must be inside v-slider or v-range-slider')\n\n    const {\n      color,\n      horizontalDirection,\n      parsedTicks,\n      rounded,\n      showTicks,\n      tickSize,\n      trackColor,\n      trackFillColor,\n      trackSize,\n      vertical,\n      min,\n      max,\n    } = slider\n\n    const { roundedClasses } = useRounded(rounded)\n\n    const {\n      backgroundColorClasses: trackFillColorClasses,\n      backgroundColorStyles: trackFillColorStyles,\n    } = useBackgroundColor(trackFillColor)\n\n    const {\n      backgroundColorClasses: trackColorClasses,\n      backgroundColorStyles: trackColorStyles,\n    } = useBackgroundColor(trackColor)\n\n    const startDir = computed(() => `inset-${vertical.value ? 'block-end' : 'inline-start'}`)\n    const endDir = computed(() => vertical.value ? 'height' : 'width')\n\n    const backgroundStyles = computed(() => {\n      return {\n        [startDir.value]: '0%',\n        [endDir.value]: '100%',\n      }\n    })\n\n    const trackFillWidth = computed(() => props.stop - props.start)\n\n    const trackFillStyles = computed(() => {\n      return {\n        [startDir.value]: convertToUnit(props.start, '%'),\n        [endDir.value]: convertToUnit(trackFillWidth.value, '%'),\n      }\n    })\n\n    const computedTicks = computed(() => {\n      if (!showTicks.value) return []\n\n      const ticks = vertical.value ? parsedTicks.value.slice().reverse() : parsedTicks.value\n\n      return ticks.map((tick, index) => {\n        const directionProperty = vertical.value ? 'bottom' : 'margin-inline-start'\n        const directionValue = tick.value !== min.value && tick.value !== max.value ? convertToUnit(tick.position, '%') : undefined\n\n        return (\n          <div\n            key={ tick.value }\n            class={[\n              'v-slider-track__tick',\n              {\n                'v-slider-track__tick--filled': tick.position >= props.start && tick.position <= props.stop,\n                'v-slider-track__tick--first': tick.value === min.value,\n                'v-slider-track__tick--last': tick.value === max.value,\n              },\n            ]}\n            style={{ [directionProperty]: directionValue }}\n          >\n            {\n              (tick.label || slots['tick-label']) && (\n                <div class=\"v-slider-track__tick-label\">\n                  { slots['tick-label']?.({ tick, index }) ?? tick.label }\n                </div>\n              )\n            }\n          </div>\n        )\n      })\n    })\n\n    useRender(() => {\n      return (\n        <div\n          class={[\n            'v-slider-track',\n            roundedClasses.value,\n          ]}\n          style={{\n            '--v-slider-track-size': convertToUnit(trackSize.value),\n            '--v-slider-tick-size': convertToUnit(tickSize.value),\n            direction: !vertical.value ? horizontalDirection.value : undefined,\n          }}\n        >\n          <div\n            class={[\n              'v-slider-track__background',\n              trackColorClasses.value,\n              {\n                'v-slider-track__background--opacity': !!color.value || !trackFillColor.value,\n              },\n            ]}\n            style={{\n              ...backgroundStyles.value,\n              ...trackColorStyles.value,\n            }}\n          />\n          <div\n            class={[\n              'v-slider-track__fill',\n              trackFillColorClasses.value,\n            ]}\n            style={{\n              ...trackFillStyles.value,\n              ...trackFillColorStyles.value,\n            }}\n          />\n\n          { showTicks.value && (\n            <div\n              class={[\n                'v-slider-track__ticks',\n                {\n                  'v-slider-track__ticks--always-show': showTicks.value === 'always',\n                },\n              ]}\n            >\n              { computedTicks.value }\n            </div>\n          )}\n        </div>\n      )\n    })\n\n    return {}\n  },\n})\n\nexport type VSliderTrack = InstanceType<typeof VSliderTrack>\n"],"mappings":"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"}
+{"version":3,"file":"VSliderTrack.mjs","names":["VSliderSymbol","makeComponentProps","useBackgroundColor","useRounded","computed","inject","convertToUnit","genericComponent","useRender","VSliderTrack","name","props","start","type","Number","required","stop","emits","setup","_ref","slots","slider","Error","color","horizontalDirection","parsedTicks","rounded","showTicks","tickSize","trackColor","trackFillColor","trackSize","vertical","min","max","roundedClasses","backgroundColorClasses","trackFillColorClasses","backgroundColorStyles","trackFillColorStyles","trackColorClasses","trackColorStyles","startDir","value","endDir","backgroundStyles","trackFillWidth","trackFillStyles","computedTicks","ticks","slice","reverse","map","tick","index","directionProperty","directionValue","position","undefined","_createVNode","label","class","direction","style"],"sources":["../../../src/components/VSlider/VSliderTrack.tsx"],"sourcesContent":["// Styles\nimport './VSliderTrack.sass'\n\n// Components\nimport { VSliderSymbol } from './slider'\n\n// Composables\nimport { makeComponentProps } from '@/composables/component'\nimport { useBackgroundColor } from '@/composables/color'\nimport { useRounded } from '@/composables/rounded'\n\n// Utilities\nimport { computed, inject } from 'vue'\nimport { convertToUnit, genericComponent, useRender } from '@/util'\n\nexport type VSliderTrackSlots = {\n  'tick-label': []\n}\n\nexport const VSliderTrack = genericComponent<VSliderTrackSlots>()({\n  name: 'VSliderTrack',\n\n  props: {\n    start: {\n      type: Number,\n      required: true,\n    },\n    stop: {\n      type: Number,\n      required: true,\n    },\n\n    ...makeComponentProps(),\n  },\n\n  emits: {},\n\n  setup (props, { slots }) {\n    const slider = inject(VSliderSymbol)\n\n    if (!slider) throw new Error('[Vuetify] v-slider-track must be inside v-slider or v-range-slider')\n\n    const {\n      color,\n      horizontalDirection,\n      parsedTicks,\n      rounded,\n      showTicks,\n      tickSize,\n      trackColor,\n      trackFillColor,\n      trackSize,\n      vertical,\n      min,\n      max,\n    } = slider\n\n    const { roundedClasses } = useRounded(rounded)\n\n    const {\n      backgroundColorClasses: trackFillColorClasses,\n      backgroundColorStyles: trackFillColorStyles,\n    } = useBackgroundColor(trackFillColor)\n\n    const {\n      backgroundColorClasses: trackColorClasses,\n      backgroundColorStyles: trackColorStyles,\n    } = useBackgroundColor(trackColor)\n\n    const startDir = computed(() => `inset-${vertical.value ? 'block-end' : 'inline-start'}`)\n    const endDir = computed(() => vertical.value ? 'height' : 'width')\n\n    const backgroundStyles = computed(() => {\n      return {\n        [startDir.value]: '0%',\n        [endDir.value]: '100%',\n      }\n    })\n\n    const trackFillWidth = computed(() => props.stop - props.start)\n\n    const trackFillStyles = computed(() => {\n      return {\n        [startDir.value]: convertToUnit(props.start, '%'),\n        [endDir.value]: convertToUnit(trackFillWidth.value, '%'),\n      }\n    })\n\n    const computedTicks = computed(() => {\n      if (!showTicks.value) return []\n\n      const ticks = vertical.value ? parsedTicks.value.slice().reverse() : parsedTicks.value\n\n      return ticks.map((tick, index) => {\n        const directionProperty = vertical.value ? 'bottom' : 'margin-inline-start'\n        const directionValue = tick.value !== min.value && tick.value !== max.value ? convertToUnit(tick.position, '%') : undefined\n\n        return (\n          <div\n            key={ tick.value }\n            class={[\n              'v-slider-track__tick',\n              {\n                'v-slider-track__tick--filled': tick.position >= props.start && tick.position <= props.stop,\n                'v-slider-track__tick--first': tick.value === min.value,\n                'v-slider-track__tick--last': tick.value === max.value,\n              },\n            ]}\n            style={{ [directionProperty]: directionValue }}\n          >\n            {\n              (tick.label || slots['tick-label']) && (\n                <div class=\"v-slider-track__tick-label\">\n                  { slots['tick-label']?.({ tick, index }) ?? tick.label }\n                </div>\n              )\n            }\n          </div>\n        )\n      })\n    })\n\n    useRender(() => {\n      return (\n        <div\n          class={[\n            'v-slider-track',\n            roundedClasses.value,\n            props.class,\n          ]}\n          style={[\n            {\n              '--v-slider-track-size': convertToUnit(trackSize.value),\n              '--v-slider-tick-size': convertToUnit(tickSize.value),\n              direction: !vertical.value ? horizontalDirection.value : undefined,\n            },\n            props.style,\n          ]}\n        >\n          <div\n            class={[\n              'v-slider-track__background',\n              trackColorClasses.value,\n              {\n                'v-slider-track__background--opacity': !!color.value || !trackFillColor.value,\n              },\n            ]}\n            style={{\n              ...backgroundStyles.value,\n              ...trackColorStyles.value,\n            }}\n          />\n          <div\n            class={[\n              'v-slider-track__fill',\n              trackFillColorClasses.value,\n            ]}\n            style={{\n              ...trackFillStyles.value,\n              ...trackFillColorStyles.value,\n            }}\n          />\n\n          { showTicks.value && (\n            <div\n              class={[\n                'v-slider-track__ticks',\n                {\n                  'v-slider-track__ticks--always-show': showTicks.value === 'always',\n                },\n              ]}\n            >\n              { computedTicks.value }\n            </div>\n          )}\n        </div>\n      )\n    })\n\n    return {}\n  },\n})\n\nexport type VSliderTrack = InstanceType<typeof VSliderTrack>\n"],"mappings":";AAAA;AACA;;AAEA;AAAA,SACSA,aAAa,wBAEtB;AAAA,SACSC,kBAAkB;AAAA,SAClBC,kBAAkB;AAAA,SAClBC,UAAU,yCAEnB;AACA,SAASC,QAAQ,EAAEC,MAAM,QAAQ,KAAK;AAAA,SAC7BC,aAAa,EAAEC,gBAAgB,EAAEC,SAAS;AAMnD,OAAO,MAAMC,YAAY,GAAGF,gBAAgB,EAAqB,CAAC;EAChEG,IAAI,EAAE,cAAc;EAEpBC,KAAK,EAAE;IACLC,KAAK,EAAE;MACLC,IAAI,EAAEC,MAAM;MACZC,QAAQ,EAAE;IACZ,CAAC;IACDC,IAAI,EAAE;MACJH,IAAI,EAAEC,MAAM;MACZC,QAAQ,EAAE;IACZ,CAAC;IAED,GAAGd,kBAAkB;EACvB,CAAC;EAEDgB,KAAK,EAAE,CAAC,CAAC;EAETC,KAAKA,CAAEP,KAAK,EAAAQ,IAAA,EAAa;IAAA,IAAX;MAAEC;IAAM,CAAC,GAAAD,IAAA;IACrB,MAAME,MAAM,GAAGhB,MAAM,CAACL,aAAa,CAAC;IAEpC,IAAI,CAACqB,MAAM,EAAE,MAAM,IAAIC,KAAK,CAAC,oEAAoE,CAAC;IAElG,MAAM;MACJC,KAAK;MACLC,mBAAmB;MACnBC,WAAW;MACXC,OAAO;MACPC,SAAS;MACTC,QAAQ;MACRC,UAAU;MACVC,cAAc;MACdC,SAAS;MACTC,QAAQ;MACRC,GAAG;MACHC;IACF,CAAC,GAAGb,MAAM;IAEV,MAAM;MAAEc;IAAe,CAAC,GAAGhC,UAAU,CAACuB,OAAO,CAAC;IAE9C,MAAM;MACJU,sBAAsB,EAAEC,qBAAqB;MAC7CC,qBAAqB,EAAEC;IACzB,CAAC,GAAGrC,kBAAkB,CAAC4B,cAAc,CAAC;IAEtC,MAAM;MACJM,sBAAsB,EAAEI,iBAAiB;MACzCF,qBAAqB,EAAEG;IACzB,CAAC,GAAGvC,kBAAkB,CAAC2B,UAAU,CAAC;IAElC,MAAMa,QAAQ,GAAGtC,QAAQ,CAAC,MAAO,SAAQ4B,QAAQ,CAACW,KAAK,GAAG,WAAW,GAAG,cAAe,EAAC,CAAC;IACzF,MAAMC,MAAM,GAAGxC,QAAQ,CAAC,MAAM4B,QAAQ,CAACW,KAAK,GAAG,QAAQ,GAAG,OAAO,CAAC;IAElE,MAAME,gBAAgB,GAAGzC,QAAQ,CAAC,MAAM;MACtC,OAAO;QACL,CAACsC,QAAQ,CAACC,KAAK,GAAG,IAAI;QACtB,CAACC,MAAM,CAACD,KAAK,GAAG;MAClB,CAAC;IACH,CAAC,CAAC;IAEF,MAAMG,cAAc,GAAG1C,QAAQ,CAAC,MAAMO,KAAK,CAACK,IAAI,GAAGL,KAAK,CAACC,KAAK,CAAC;IAE/D,MAAMmC,eAAe,GAAG3C,QAAQ,CAAC,MAAM;MACrC,OAAO;QACL,CAACsC,QAAQ,CAACC,KAAK,GAAGrC,aAAa,CAACK,KAAK,CAACC,KAAK,EAAE,GAAG,CAAC;QACjD,CAACgC,MAAM,CAACD,KAAK,GAAGrC,aAAa,CAACwC,cAAc,CAACH,KAAK,EAAE,GAAG;MACzD,CAAC;IACH,CAAC,CAAC;IAEF,MAAMK,aAAa,GAAG5C,QAAQ,CAAC,MAAM;MACnC,IAAI,CAACuB,SAAS,CAACgB,KAAK,EAAE,OAAO,EAAE;MAE/B,MAAMM,KAAK,GAAGjB,QAAQ,CAACW,KAAK,GAAGlB,WAAW,CAACkB,KAAK,CAACO,KAAK,EAAE,CAACC,OAAO,EAAE,GAAG1B,WAAW,CAACkB,KAAK;MAEtF,OAAOM,KAAK,CAACG,GAAG,CAAC,CAACC,IAAI,EAAEC,KAAK,KAAK;QAChC,MAAMC,iBAAiB,GAAGvB,QAAQ,CAACW,KAAK,GAAG,QAAQ,GAAG,qBAAqB;QAC3E,MAAMa,cAAc,GAAGH,IAAI,CAACV,KAAK,KAAKV,GAAG,CAACU,KAAK,IAAIU,IAAI,CAACV,KAAK,KAAKT,GAAG,CAACS,KAAK,GAAGrC,aAAa,CAAC+C,IAAI,CAACI,QAAQ,EAAE,GAAG,CAAC,GAAGC,SAAS;QAE3H,OAAAC,YAAA;UAAA,OAEUN,IAAI,CAACV,KAAK;UAAA,SACT,CACL,sBAAsB,EACtB;YACE,8BAA8B,EAAEU,IAAI,CAACI,QAAQ,IAAI9C,KAAK,CAACC,KAAK,IAAIyC,IAAI,CAACI,QAAQ,IAAI9C,KAAK,CAACK,IAAI;YAC3F,6BAA6B,EAAEqC,IAAI,CAACV,KAAK,KAAKV,GAAG,CAACU,KAAK;YACvD,4BAA4B,EAAEU,IAAI,CAACV,KAAK,KAAKT,GAAG,CAACS;UACnD,CAAC,CACF;UAAA,SACM;YAAE,CAACY,iBAAiB,GAAGC;UAAe;QAAC,IAG5C,CAACH,IAAI,CAACO,KAAK,IAAIxC,KAAK,CAAC,YAAY,CAAC,KAAAuC,YAAA;UAAA,SACrB;QAA4B,IACnCvC,KAAK,CAAC,YAAY,CAAC,GAAG;UAAEiC,IAAI;UAAEC;QAAM,CAAC,CAAC,IAAID,IAAI,CAACO,KAAK,EAEzD;MAIT,CAAC,CAAC;IACJ,CAAC,CAAC;IAEFpD,SAAS,CAAC,MAAM;MACd,OAAAmD,YAAA;QAAA,SAEW,CACL,gBAAgB,EAChBxB,cAAc,CAACQ,KAAK,EACpBhC,KAAK,CAACkD,KAAK,CACZ;QAAA,SACM,CACL;UACE,uBAAuB,EAAEvD,aAAa,CAACyB,SAAS,CAACY,KAAK,CAAC;UACvD,sBAAsB,EAAErC,aAAa,CAACsB,QAAQ,CAACe,KAAK,CAAC;UACrDmB,SAAS,EAAE,CAAC9B,QAAQ,CAACW,KAAK,GAAGnB,mBAAmB,CAACmB,KAAK,GAAGe;QAC3D,CAAC,EACD/C,KAAK,CAACoD,KAAK;MACZ,IAAAJ,YAAA;QAAA,SAGQ,CACL,4BAA4B,EAC5BnB,iBAAiB,CAACG,KAAK,EACvB;UACE,qCAAqC,EAAE,CAAC,CAACpB,KAAK,CAACoB,KAAK,IAAI,CAACb,cAAc,CAACa;QAC1E,CAAC,CACF;QAAA,SACM;UACL,GAAGE,gBAAgB,CAACF,KAAK;UACzB,GAAGF,gBAAgB,CAACE;QACtB;MAAC,UAAAgB,YAAA;QAAA,SAGM,CACL,sBAAsB,EACtBtB,qBAAqB,CAACM,KAAK,CAC5B;QAAA,SACM;UACL,GAAGI,eAAe,CAACJ,KAAK;UACxB,GAAGJ,oBAAoB,CAACI;QAC1B;MAAC,UAGDhB,SAAS,CAACgB,KAAK,IAAAgB,YAAA;QAAA,SAEN,CACL,uBAAuB,EACvB;UACE,oCAAoC,EAAEhC,SAAS,CAACgB,KAAK,KAAK;QAC5D,CAAC;MACF,IAECK,aAAa,CAACL,KAAK,EAExB;IAGP,CAAC,CAAC;IAEF,OAAO,CAAC,CAAC;EACX;AACF,CAAC,CAAC"}