@vuetify/nightly 3.0.0-alpha.3 → 3.0.0-beta.2

package/lib/components/VSlider/VSliderThumb.mjs

@@ -0,0 +1,165 @@
+import { vShow as _vShow, withDirectives as _withDirectives, resolveDirective as _resolveDirective, createVNode as _createVNode } from "vue";
+// Styles
+import "./VSliderThumb.css"; // Components
+
+import { VScaleTransition } from "../transitions/index.mjs";
+import { VSliderSymbol } from "./slider.mjs";
+import { useElevation } from "../../composables/elevation.mjs"; // Directives
+
+import Ripple from "../../directives/ripple/index.mjs"; // Composables
+
+import { useTextColor } from "../../composables/color.mjs"; // Utilities
+
+import { computed, inject } from 'vue';
+import { convertToUnit, defineComponent, keyValues } from "../../util/index.mjs";
+export const VSliderThumb = defineComponent({
+  name: 'VSliderThumb',
+  directives: {
+    Ripple
+  },
+  props: {
+    focused: Boolean,
+    max: {
+      type: Number,
+      required: true
+    },
+    min: {
+      type: Number,
+      required: true
+    },
+    modelValue: {
+      type: Number,
+      required: true
+    },
+    position: {
+      type: Number,
+      required: true
+    }
+  },
+  emits: {
+    'update:modelValue': v => true
+  },
+
+  setup(props, _ref) {
+    let {
+      slots,
+      emit
+    } = _ref;
+    const slider = inject(VSliderSymbol);
+    if (!slider) throw new Error('[Vuetify] v-slider-thumb must be used inside v-slider or v-range-slider');
+    const {
+      thumbColor,
+      step,
+      vertical,
+      disabled,
+      thumbSize,
+      thumbLabel,
+      direction,
+      readonly,
+      elevation,
+      isReversed,
+      horizontalDirection,
+      mousePressed,
+      decimals
+    } = slider;
+    const {
+      textColorClasses,
+      textColorStyles
+    } = useTextColor(thumbColor);
+    const {
+      pageup,
+      pagedown,
+      end,
+      home,
+      left,
+      right,
+      down,
+      up
+    } = keyValues;
+    const relevantKeys = [pageup, pagedown, end, home, left, right, down, up];
+    const multipliers = computed(() => {
+      if (step.value) return [1, 2, 3];else return [1, 5, 10];
+    });
+
+    function parseKeydown(e, value) {
+      if (!relevantKeys.includes(e.key)) return;
+      e.preventDefault();
+
+      const _step = step.value || 0.1;
+
+      const steps = (props.max - props.min) / _step;
+
+      if ([left, right, down, up].includes(e.key)) {
+        const increase = isReversed.value ? [left, up] : [right, up];
+        const direction = increase.includes(e.key) ? 1 : -1;
+        const multiplier = e.shiftKey ? 2 : e.ctrlKey ? 1 : 0;
+        value = value + direction * _step * multipliers.value[multiplier];
+      } else if (e.key === home) {
+        value = props.min;
+      } else if (e.key === end) {
+        value = props.max;
+      } else {
+        const direction = e.key === pagedown ? 1 : -1;
+        value = value - direction * _step * (steps > 100 ? steps / 10 : 10);
+      }
+
+      return Math.max(props.min, Math.min(props.max, value));
+    }
+
+    function onKeydown(e) {
+      const newValue = parseKeydown(e, props.modelValue);
+      newValue != null && emit('update:modelValue', newValue);
+    }
+
+    return () => {
+      var _slots$thumbLabel, _slots$thumbLabel2;
+
+      const positionPercentage = convertToUnit(vertical.value ? 100 - props.position : props.position, '%');
+      const inset = vertical.value ? 'block' : 'inline';
+      const {
+        elevationClasses
+      } = useElevation(computed(() => !disabled.value ? elevation.value : undefined));
+      return _createVNode("div", {
+        "class": ['v-slider-thumb', {
+          'v-slider-thumb--focused': props.focused,
+          'v-slider-thumb--pressed': props.focused && mousePressed.value
+        }],
+        "style": {
+          [`inset-${inset}-start`]: `calc(${positionPercentage} - var(--v-slider-thumb-size) / 2)`,
+          '--v-slider-thumb-size': convertToUnit(thumbSize.value),
+          direction: !vertical.value ? horizontalDirection.value : undefined
+        },
+        "role": "slider",
+        "tabindex": disabled.value ? -1 : 0,
+        "aria-valuemin": props.min,
+        "aria-valuemax": props.max,
+        "aria-valuenow": props.modelValue,
+        "aria-readonly": readonly.value,
+        "aria-orientation": direction.value,
+        "onKeydown": !readonly.value ? onKeydown : undefined
+      }, [_createVNode("div", {
+        "class": ['v-slider-thumb__surface', textColorClasses.value, elevationClasses.value],
+        "style": { ...textColorStyles.value
+        }
+      }, null), _withDirectives(_createVNode("div", {
+        "class": ['v-slider-thumb__ripple', textColorClasses.value],
+        "style": textColorStyles.value
+      }, null), [[_resolveDirective("ripple"), true, null, {
+        circle: true,
+        center: true
+      }]]), _createVNode(VScaleTransition, {
+        "origin": "bottom center"
+      }, {
+        default: () => [_withDirectives(_createVNode("div", {
+          "class": "v-slider-thumb__label-container"
+        }, [_createVNode("div", {
+          "class": ['v-slider-thumb__label']
+        }, [_createVNode("div", null, [(_slots$thumbLabel = (_slots$thumbLabel2 = slots['thumb-label']) == null ? void 0 : _slots$thumbLabel2.call(slots, {
+          modelValue: props.modelValue
+        })) != null ? _slots$thumbLabel : props.modelValue.toFixed(step.value ? decimals.value : 1)])])]), [[_vShow, thumbLabel.value && props.focused || thumbLabel.value === 'always']])]
+      })]);
+    };
+  }
+
+});
+//# sourceMappingURL=VSliderThumb.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/VSlider/VSliderThumb.tsx"],"names":["VScaleTransition","VSliderSymbol","useElevation","Ripple","useTextColor","computed","inject","convertToUnit","defineComponent","keyValues","VSliderThumb","name","directives","props","focused","Boolean","max","type","Number","required","min","modelValue","position","emits","v","setup","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","inset","elevationClasses","undefined","toFixed"],"mappings":"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","sourcesContent":["// Styles\nimport './VSliderThumb.sass'\n\n// Components\nimport { VScaleTransition } from '../transitions'\nimport { VSliderSymbol } from './slider'\nimport { useElevation } from '@/composables/elevation'\n\n// Directives\nimport Ripple from '@/directives/ripple'\n\n// Composables\nimport { useTextColor } from '@/composables/color'\n\n// Utilities\nimport { computed, inject } from 'vue'\nimport { convertToUnit, defineComponent, keyValues } from '@/util'\n\nexport const VSliderThumb = defineComponent({\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  },\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 = isReversed.value ? [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    return () => {\n      const positionPercentage = convertToUnit(vertical.value ? 100 - props.position : props.position, '%')\n      const inset = vertical.value ? 'block' : 'inline'\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            [`inset-${inset}-start`]: `calc(${positionPercentage} - var(--v-slider-thumb-size) / 2)`,\n            '--v-slider-thumb-size': convertToUnit(thumbSize.value),\n            direction: !vertical.value ? horizontalDirection.value : undefined,\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={[true, 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})\n\nexport type VSliderThumb = InstanceType<typeof VSliderThumb>\n"],"file":"VSliderThumb.mjs"}

package/lib/components/VSlider/VSliderThumb.sass

@@ -0,0 +1,147 @@
+// Imports
+@forward './variables'
+@use 'sass:map'
+@use 'sass:selector'
+@use 'sass:math'
+@use '../../styles/settings'
+@use '../../styles/tools'
+@use './variables' as *
+
+// Theme
+.v-slider-thumb
+  color: rgb(var(--v-theme-surface-variant))
+
+  .v-input--error:not(.v-input--disabled) &
+    color: inherit
+
+.v-slider-thumb__label
+  background: rgba(var(--v-theme-surface-variant), .7)
+  color: rgb(var(--v-theme-on-surface-variant))
+
+  &::before
+    color: rgba(var(--v-theme-surface-variant), .7)
+
+// Block
+.v-slider-thumb
+  outline: none
+  position: absolute
+  transition: $slider-transition
+
+.v-slider-thumb__surface
+  cursor: pointer
+  width: var(--v-slider-thumb-size)
+  height: var(--v-slider-thumb-size)
+  border-radius: $slider-thumb-border-radius
+  user-select: none
+  background-color: currentColor
+
+  &::before
+    transition: 0.3s settings.$standard-easing
+    content: ''
+    color: inherit
+    width: 100%
+    height: 100%
+    border-radius: $slider-thumb-border-radius
+    background: currentColor
+    position: absolute
+    pointer-events: none
+    opacity: 0
+
+  &::after
+    content: ''
+    width: $slider-thumb-touch-size
+    height: $slider-thumb-touch-size
+    position: absolute
+    top: 50%
+    left: 50%
+    transform: translate(-50%, -50%)
+
+.v-slider-thumb__label-container
+  position: absolute
+  transition: $slider-thumb-label-transition
+
+.v-slider-thumb__label
+  display: flex
+  align-items: center
+  justify-content: center
+  font-size: $slider-thumb-label-font-size
+  min-width: $slider-thumb-label-min-width
+  height: $slider-thumb-label-height
+  border-radius: $slider-thumb-label-border-radius
+  padding: $slider-thumb-label-padding
+  position: absolute
+  user-select: none
+  transition: $slider-thumb-label-transition
+
+  &::before
+    content: ''
+    width: 0
+    height: 0
+    position: absolute
+
+.v-slider-thumb__ripple
+  position: absolute
+  left: calc(var(--v-slider-thumb-size) / -2)
+  top: calc(var(--v-slider-thumb-size) / -2)
+  width: calc(var(--v-slider-thumb-size) * 2)
+  height: calc(var(--v-slider-thumb-size) * 2)
+  background: inherit
+
+// Horizontal
+.v-slider.v-input--horizontal
+  .v-slider-thumb
+    top: 50%
+    transform: translateY(-50%)
+
+  .v-slider-thumb__label-container
+    left: calc(var(--v-slider-thumb-size) / 2)
+    top: 0
+
+  .v-slider-thumb__label
+    bottom: $slider-thumb-label-offset
+
+    +tools.ltr()
+      transform: translateX(-50%)
+    +tools.rtl()
+      transform: translateX(50%)
+
+    &::before
+      border-left: $slider-thumb-label-wedge-size solid transparent
+      border-right: $slider-thumb-label-wedge-size solid transparent
+      border-top: $slider-thumb-label-wedge-size solid currentColor
+      bottom: -$slider-thumb-label-wedge-size
+
+// Vertical
+.v-slider.v-input--vertical
+  .v-slider-thumb__label-container
+    top: calc(var(--v-slider-thumb-size) / 2)
+    right: 0
+
+  .v-slider-thumb__label
+    top: math.div($slider-thumb-label-height, -2)
+    left: $slider-thumb-label-offset
+
+    &::before
+      border-right: $slider-thumb-label-wedge-size solid currentColor
+      border-top: $slider-thumb-label-wedge-size solid transparent
+      border-bottom: $slider-thumb-label-wedge-size solid transparent
+      left: -$slider-thumb-label-wedge-size
+
+// Modifiers
+.v-slider-thumb--focused, .v-slider-thumb:hover
+  .v-slider-thumb__surface::before
+    transform: scale(2)
+
+.v-slider-thumb--focused
+  .v-slider-thumb__surface::before
+      opacity: $slider-thumb-focus-opacity
+
+.v-slider-thumb--pressed
+  transition: none
+
+  .v-slider-thumb__surface::before
+    opacity: $slider-thumb-pressed-opacity
+
+.v-slider-thumb:hover:not(.v-slider-thumb--focused)
+  .v-slider-thumb__surface::before
+    opacity: $slider-thumb-hover-opacity

package/lib/components/VSlider/VSliderTrack.css

@@ -0,0 +1,150 @@
+.v-slider-track__background {
+  background-color: rgb(var(--v-theme-surface-variant));
+}
+
+.v-slider-track__fill {
+  background-color: rgb(var(--v-theme-surface-variant));
+}
+
+.v-slider-track__tick {
+  background-color: rgb(var(--v-theme-surface-variant));
+}
+.v-slider-track__tick--filled {
+  background-color: rgb(var(--v-theme-on-surface-variant));
+}
+
+.v-slider-track {
+  border-radius: 6px;
+}
+
+.v-slider-track__background, .v-slider-track__fill {
+  position: absolute;
+  transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
+  border-radius: inherit;
+}
+.v-slider--pressed .v-slider-track__background, .v-slider--pressed .v-slider-track__fill {
+  transition: none;
+}
+.v-input--error:not(.v-input--disabled) .v-slider-track__background, .v-input--error:not(.v-input--disabled) .v-slider-track__fill {
+  background-color: currentColor;
+}
+
+.v-slider-track__ticks {
+  height: 100%;
+  width: 100%;
+  position: relative;
+}
+
+.v-slider-track__tick {
+  position: absolute;
+  opacity: 0;
+  transition: 0.2s opacity cubic-bezier(0.4, 0, 0.2, 1);
+  border-radius: 2px;
+  width: var(--v-slider-tick-size);
+  height: var(--v-slider-tick-size);
+  transform: translate(calc(var(--v-slider-tick-size) / -2), calc(var(--v-slider-tick-size) / -2));
+}
+.v-slider-track__tick:first-child .v-slider-track__tick-label.v-locale--is-ltr, .v-locale--is-ltr .v-slider-track__tick:first-child .v-slider-track__tick-label {
+  transform: none;
+}
+.v-slider-track__tick:first-child .v-slider-track__tick-label.v-locale--is-rtl, .v-locale--is-rtl .v-slider-track__tick:first-child .v-slider-track__tick-label {
+  transform: translateX(100%);
+}
+.v-slider-track__tick:last-child .v-slider-track__tick-label.v-locale--is-ltr, .v-locale--is-ltr .v-slider-track__tick:last-child .v-slider-track__tick-label {
+  transform: translateX(-100%);
+}
+.v-slider-track__tick:last-child .v-slider-track__tick-label.v-locale--is-rtl, .v-locale--is-rtl .v-slider-track__tick:last-child .v-slider-track__tick-label {
+  transform: none;
+}
+
+.v-slider-track__tick-label {
+  position: absolute;
+  user-select: none;
+  white-space: nowrap;
+}
+
+.v-slider.v-input--horizontal .v-slider-track {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: calc(var(--v-slider-track-size) + 2px);
+  touch-action: pan-y;
+}
+.v-slider.v-input--horizontal .v-slider-track__background {
+  height: var(--v-slider-track-size);
+}
+.v-slider.v-input--horizontal .v-slider-track__fill {
+  height: inherit;
+}
+.v-slider.v-input--horizontal .v-slider-track__tick {
+  margin-top: calc(calc(var(--v-slider-track-size) + 2px) / 2);
+}
+.v-slider.v-input--horizontal .v-slider-track__tick.v-locale--is-rtl, .v-locale--is-rtl .v-slider.v-input--horizontal .v-slider-track__tick {
+  transform: translate(calc(var(--v-slider-tick-size) / 2), calc(var(--v-slider-tick-size) / -2));
+}
+.v-slider.v-input--horizontal .v-slider-track__tick:first-child {
+  margin-inline-start: calc(var(--v-slider-tick-size) + 1px);
+}
+.v-slider.v-input--horizontal .v-slider-track__tick:first-child .v-slider-track__tick-label.v-locale--is-ltr, .v-locale--is-ltr .v-slider.v-input--horizontal .v-slider-track__tick:first-child .v-slider-track__tick-label {
+  transform: translateX(0%);
+}
+.v-slider.v-input--horizontal .v-slider-track__tick:first-child .v-slider-track__tick-label.v-locale--is-rtl, .v-locale--is-rtl .v-slider.v-input--horizontal .v-slider-track__tick:first-child .v-slider-track__tick-label {
+  transform: translateX(0%);
+}
+.v-slider.v-input--horizontal .v-slider-track__tick:last-child {
+  margin-inline-start: calc(100% - var(--v-slider-tick-size) - 1px);
+}
+.v-slider.v-input--horizontal .v-slider-track__tick:last-child .v-slider-track__tick-label.v-locale--is-ltr, .v-locale--is-ltr .v-slider.v-input--horizontal .v-slider-track__tick:last-child .v-slider-track__tick-label {
+  transform: translateX(-100%);
+}
+.v-slider.v-input--horizontal .v-slider-track__tick:last-child .v-slider-track__tick-label.v-locale--is-rtl, .v-locale--is-rtl .v-slider.v-input--horizontal .v-slider-track__tick:last-child .v-slider-track__tick-label {
+  transform: translateX(100%);
+}
+.v-slider.v-input--horizontal .v-slider-track__tick .v-slider-track__tick-label {
+  margin-top: calc(var(--v-slider-track-size) / 2 + 8px);
+}
+.v-slider.v-input--horizontal .v-slider-track__tick .v-slider-track__tick-label.v-locale--is-ltr, .v-locale--is-ltr .v-slider.v-input--horizontal .v-slider-track__tick .v-slider-track__tick-label {
+  transform: translateX(-50%);
+}
+.v-slider.v-input--horizontal .v-slider-track__tick .v-slider-track__tick-label.v-locale--is-rtl, .v-locale--is-rtl .v-slider.v-input--horizontal .v-slider-track__tick .v-slider-track__tick-label {
+  transform: translateX(50%);
+}
+
+.v-slider.v-input--vertical .v-slider-track {
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  width: calc(var(--v-slider-track-size) + 2px);
+  touch-action: pan-x;
+}
+.v-slider.v-input--vertical .v-slider-track__background {
+  width: var(--v-slider-track-size);
+}
+.v-slider.v-input--vertical .v-slider-track__fill {
+  width: inherit;
+}
+.v-slider.v-input--vertical .v-slider-track__ticks {
+  height: 100%;
+}
+.v-slider.v-input--vertical .v-slider-track__tick {
+  margin-inline-start: calc(calc(var(--v-slider-track-size) + 2px) / 2);
+  transform: translate(calc(var(--v-slider-tick-size) / -2), calc(var(--v-slider-tick-size) / 2));
+}
+.v-slider.v-input--vertical .v-slider-track__tick.v-locale--is-rtl, .v-locale--is-rtl .v-slider.v-input--vertical .v-slider-track__tick {
+  transform: translate(calc(var(--v-slider-tick-size) / 2), calc(var(--v-slider-tick-size) / 2));
+}
+.v-slider.v-input--vertical .v-slider-track__tick:last-child {
+  bottom: calc(0% + var(--v-slider-tick-size) + 1px);
+}
+.v-slider.v-input--vertical .v-slider-track__tick .v-slider-track__tick-label {
+  margin-inline-start: calc(var(--v-slider-track-size) / 2 + 12px);
+  transform: translateY(-50%);
+}
+
+.v-slider-track__ticks--always-show .v-slider-track__tick, .v-slider--focused .v-slider-track__tick {
+  opacity: 1;
+}
+
+.v-slider-track__background--opacity {
+  opacity: 0.38;
+}

package/lib/components/VSlider/VSliderTrack.mjs

@@ -0,0 +1,121 @@
+import { createVNode as _createVNode } from "vue";
+// Styles
+import "./VSliderTrack.css"; // Components
+
+import { VSliderSymbol } from "./slider.mjs"; // Composables
+
+import { useBackgroundColor } from "../../composables/color.mjs";
+import { useRounded } from "../../composables/rounded.mjs"; // Utilities
+
+import { computed, inject } from 'vue';
+import { convertToUnit, defineComponent } from "../../util/index.mjs";
+export const VSliderTrack = defineComponent({
+  name: 'VSliderTrack',
+  props: {
+    start: {
+      type: Number,
+      required: true
+    },
+    stop: {
+      type: Number,
+      required: true
+    }
+  },
+  emits: {},
+
+  setup(props, _ref) {
+    let {
+      slots
+    } = _ref;
+    const slider = inject(VSliderSymbol);
+    if (!slider) throw new Error('[Vuetify] v-slider-track must be inside v-slider or v-range-slider');
+    const {
+      trackColor,
+      trackFillColor,
+      vertical,
+      tickSize,
+      showTicks,
+      trackSize,
+      color,
+      rounded,
+      parsedTicks,
+      horizontalDirection
+    } = slider;
+    const {
+      roundedClasses
+    } = useRounded(rounded);
+    const {
+      backgroundColorClasses: trackFillColorClasses,
+      backgroundColorStyles: trackFillColorStyles
+    } = useBackgroundColor(trackFillColor);
+    const {
+      backgroundColorClasses: trackColorClasses,
+      backgroundColorStyles: trackColorStyles
+    } = useBackgroundColor(trackColor);
+    const startDir = computed(() => `inset-${vertical.value ? 'block-end' : 'inline-start'}`);
+    const endDir = computed(() => vertical.value ? 'height' : 'width');
+    const backgroundStyles = computed(() => {
+      return {
+        [startDir.value]: '0%',
+        [endDir.value]: '100%'
+      };
+    });
+    const trackFillWidth = computed(() => props.stop - props.start);
+    const trackFillStyles = computed(() => {
+      return {
+        [startDir.value]: convertToUnit(props.start, '%'),
+        [endDir.value]: convertToUnit(trackFillWidth.value, '%')
+      };
+    });
+    const computedTicks = computed(() => {
+      const ticks = vertical.value ? parsedTicks.value.slice().reverse() : parsedTicks.value;
+      return ticks.map((tick, index) => {
+        var _slots$tickLabel, _slots$tickLabel2;
+
+        const directionProperty = vertical.value ? 'bottom' : 'margin-inline-start';
+        return _createVNode("div", {
+          "key": tick.value,
+          "class": ['v-slider-track__tick', {
+            'v-slider-track__tick--filled': tick.position >= props.start && tick.position <= props.stop
+          }],
+          "style": {
+            [directionProperty]: tick.position > 0 && tick.position < 100 && convertToUnit(tick.position, '%')
+          }
+        }, [(tick.label || slots['tick-label']) && _createVNode("div", {
+          "class": "v-slider-track__tick-label"
+        }, [(_slots$tickLabel = (_slots$tickLabel2 = slots['tick-label']) == null ? void 0 : _slots$tickLabel2.call(slots, {
+          tick,
+          index
+        })) != null ? _slots$tickLabel : tick.label])]);
+      });
+    });
+    return () => {
+      return _createVNode("div", {
+        "class": ['v-slider-track', roundedClasses.value],
+        "style": {
+          '--v-slider-track-size': convertToUnit(trackSize.value),
+          '--v-slider-tick-size': convertToUnit(tickSize.value),
+          direction: !vertical.value ? horizontalDirection.value : undefined
+        }
+      }, [_createVNode("div", {
+        "class": ['v-slider-track__background', trackColorClasses.value, {
+          'v-slider-track__background--opacity': !!color.value || !trackFillColor.value
+        }],
+        "style": { ...backgroundStyles.value,
+          ...trackColorStyles.value
+        }
+      }, null), _createVNode("div", {
+        "class": ['v-slider-track__fill', trackFillColorClasses.value],
+        "style": { ...trackFillStyles.value,
+          ...trackFillColorStyles.value
+        }
+      }, null), showTicks.value && _createVNode("div", {
+        "class": ['v-slider-track__ticks', {
+          'v-slider-track__ticks--always-show': showTicks.value === 'always'
+        }]
+      }, [computedTicks.value])]);
+    };
+  }
+
+});
+//# sourceMappingURL=VSliderTrack.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/VSlider/VSliderTrack.tsx"],"names":["VSliderSymbol","useBackgroundColor","useRounded","computed","inject","convertToUnit","defineComponent","VSliderTrack","name","props","start","type","Number","required","stop","emits","setup","slots","slider","Error","trackColor","trackFillColor","vertical","tickSize","showTicks","trackSize","color","rounded","parsedTicks","horizontalDirection","roundedClasses","backgroundColorClasses","trackFillColorClasses","backgroundColorStyles","trackFillColorStyles","trackColorClasses","trackColorStyles","startDir","value","endDir","backgroundStyles","trackFillWidth","trackFillStyles","computedTicks","ticks","slice","reverse","map","tick","index","directionProperty","position","label","direction","undefined"],"mappings":"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","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, defineComponent } from '@/util'\n\nexport const VSliderTrack = defineComponent({\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      trackColor,\n      trackFillColor,\n      vertical,\n      tickSize,\n      showTicks,\n      trackSize,\n      color,\n      rounded,\n      parsedTicks,\n      horizontalDirection,\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      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        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              },\n            ]}\n            style={{\n              [directionProperty]: (tick.position > 0 && tick.position < 100) && convertToUnit(tick.position, '%'),\n            }}\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    return () => {\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})\n\nexport type VSliderTrack = InstanceType<typeof VSliderTrack>\n"],"file":"VSliderTrack.mjs"}