@vuetify/nightly 3.0.0-beta.10 → 3.0.0-beta.13

package/lib/components/VSlideGroup/index.d.ts

@@ -0,0 +1,151 @@
+import * as vue from 'vue';
+import { JSXComponent, PropType, ComponentInternalInstance, Ref, ComputedRef, InjectionKey } from 'vue';
+
+declare type IconValue = string | JSXComponent;
+declare const IconValue: PropType<IconValue>;
+
+interface GroupItem {
+    id: number;
+    value: Ref<unknown>;
+    disabled: Ref<boolean | undefined>;
+}
+interface GroupProvide {
+    register: (item: GroupItem, cmp: ComponentInternalInstance) => void;
+    unregister: (id: number) => void;
+    select: (id: number, value: boolean) => void;
+    selected: Ref<Readonly<number[]>>;
+    isSelected: (id: number) => boolean;
+    prev: () => void;
+    next: () => void;
+    selectedClass: Ref<string | undefined>;
+    items: ComputedRef<{
+        id: number;
+        value: unknown;
+        disabled: boolean | undefined;
+    }[]>;
+    disabled: Ref<boolean | undefined>;
+    getItemIndex: (value: unknown) => number;
+}
+
+declare const VSlideGroup: vue.DefineComponent<{
+    modelValue: {
+        type: null;
+        default: undefined;
+    };
+    multiple: BooleanConstructor;
+    mandatory: vue.PropType<boolean | "force">;
+    max: NumberConstructor;
+    selectedClass: {
+        type: vue.PropType<string>;
+        default: string;
+    };
+    disabled: BooleanConstructor;
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+    centerActive: BooleanConstructor;
+    direction: {
+        type: StringConstructor;
+        default: string;
+    };
+    symbol: {
+        type: null;
+        default: InjectionKey<GroupProvide>;
+    };
+    nextIcon: {
+        type: vue.PropType<IconValue>;
+        default: string;
+    };
+    prevIcon: {
+        type: vue.PropType<IconValue>;
+        default: string;
+    };
+    showArrows: {
+        type: (StringConstructor | BooleanConstructor)[];
+        validator: (v: any) => boolean;
+    };
+}, {
+    selected: vue.Ref<readonly number[]>;
+    scrollTo: (location: 'prev' | 'next') => void;
+    scrollOffset: vue.Ref<number>;
+    focus: (location?: 'next' | 'prev' | 'first' | 'last') => void;
+}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
+    'update:modelValue': (value: any) => true;
+}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
+    modelValue: {
+        type: null;
+        default: undefined;
+    };
+    multiple: BooleanConstructor;
+    mandatory: vue.PropType<boolean | "force">;
+    max: NumberConstructor;
+    selectedClass: {
+        type: vue.PropType<string>;
+        default: string;
+    };
+    disabled: BooleanConstructor;
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+    centerActive: BooleanConstructor;
+    direction: {
+        type: StringConstructor;
+        default: string;
+    };
+    symbol: {
+        type: null;
+        default: InjectionKey<GroupProvide>;
+    };
+    nextIcon: {
+        type: vue.PropType<IconValue>;
+        default: string;
+    };
+    prevIcon: {
+        type: vue.PropType<IconValue>;
+        default: string;
+    };
+    showArrows: {
+        type: (StringConstructor | BooleanConstructor)[];
+        validator: (v: any) => boolean;
+    };
+}>> & {
+    "onUpdate:modelValue"?: ((value: any) => any) | undefined;
+}, {
+    symbol: any;
+    direction: string;
+    disabled: boolean;
+    multiple: boolean;
+    tag: string;
+    modelValue: any;
+    selectedClass: string;
+    nextIcon: IconValue;
+    prevIcon: IconValue;
+    centerActive: boolean;
+}>;
+declare type VSlideGroup = InstanceType<typeof VSlideGroup>;
+
+declare const VSlideGroupItem: vue.DefineComponent<{
+    value: null;
+    disabled: BooleanConstructor;
+    selectedClass: StringConstructor;
+}, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>[] | undefined, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
+    'group:selected': (val: {
+        value: boolean;
+    }) => true;
+}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
+    value: null;
+    disabled: BooleanConstructor;
+    selectedClass: StringConstructor;
+}>> & {
+    "onGroup:selected"?: ((val: {
+        value: boolean;
+    }) => any) | undefined;
+}, {
+    disabled: boolean;
+}>;
+
+export { VSlideGroup, VSlideGroupItem };

package/lib/components/VSlider/VSlider.css

@@ -10,6 +10,7 @@
 
 .v-slider__container {
   position: relative;
+  min-height: inherit;
   width: 100%;
   height: 100%;
   display: flex;
@@ -26,8 +27,8 @@
 
 .v-slider.v-input--horizontal {
   align-items: center;
-  margin-left: 8px;
-  margin-right: 8px;
+  margin-inline-start: 8px;
+  margin-inline-end: 8px;
 }
 .v-slider.v-input--horizontal .v-input__control {
   min-height: 32px;
@@ -50,4 +51,8 @@
 
 .v-slider--has-labels .v-input__control {
   margin-bottom: 4px;
+}
+
+.v-slider__label {
+  margin-inline-end: 12px;
 }

package/lib/components/VSlider/VSlider.mjs

@@ -1,14 +1,15 @@
-import { mergeProps as _mergeProps, createVNode as _createVNode } from "vue";
+import { mergeProps as _mergeProps, createVNode as _createVNode, Fragment as _Fragment } from "vue";
 // Styles
 import "./VSlider.css"; // Components
 
+import { filterInputProps, makeVInputProps, VInput } from "../VInput/VInput.mjs";
+import { VLabel } from "../VLabel/index.mjs";
 import { VSliderThumb } from "./VSliderThumb.mjs";
-import { VSliderTrack } from "./VSliderTrack.mjs";
-import { filterInputProps, makeVInputProps, VInput } from "../VInput/VInput.mjs"; // Composables
+import { VSliderTrack } from "./VSliderTrack.mjs"; // Composables
 
 import { makeFocusProps, useFocus } from "../../composables/focus.mjs";
 import { makeSliderProps, useSlider } from "./slider.mjs";
-import { useProxiedModel } from "../../composables/proxiedModel.mjs"; // Util
+import { useProxiedModel } from "../../composables/proxiedModel.mjs"; // Utilities
 
 import { computed, ref } from 'vue';
 import { defineComponent, useRender } from "../../util/index.mjs";
@@ -67,6 +68,7 @@ export const VSlider = defineComponent({
     const trackStop = computed(() => position(model.value));
     useRender(() => {
       const [inputProps, _] = filterInputProps(props);
+      const hasPrepend = !!(props.label || slots.label || slots.prepend);
       return _createVNode(VInput, _mergeProps({
         "class": ['v-slider', {
           'v-slider--has-labels': !!slots['tick-label'] || hasLabels.value,
@@ -77,6 +79,14 @@ export const VSlider = defineComponent({
       }, inputProps, {
         "focused": isFocused.value
       }), { ...slots,
+        prepend: hasPrepend ? slotProps => {
+          var _slots$label, _slots$prepend;
+
+          return _createVNode(_Fragment, null, [((_slots$label = slots.label) == null ? void 0 : _slots$label.call(slots, slotProps)) ?? props.label ? _createVNode(VLabel, {
+            "class": "v-slider__label",
+            "text": props.label
+          }, null) : undefined, (_slots$prepend = slots.prepend) == null ? void 0 : _slots$prepend.call(slots, slotProps)]);
+        } : undefined,
         default: _ref2 => {
           let {
             id

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

@@ -1 +1 @@
-{"version":3,"file":"VSlider.mjs","names":["VSliderThumb","VSliderTrack","filterInputProps","makeVInputProps","VInput","makeFocusProps","useFocus","makeSliderProps","useSlider","useProxiedModel","computed","ref","defineComponent","useRender","VSlider","name","props","modelValue","type","Number","String","default","emits","value","v","setup","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","_","disabled","id","elevation"],"sources":["../../../src/components/VSlider/VSlider.tsx"],"sourcesContent":["// Styles\nimport './VSlider.sass'\n\n// Components\nimport { VSliderThumb } from './VSliderThumb'\nimport { VSliderTrack } from './VSliderTrack'\nimport { filterInputProps, makeVInputProps, VInput } from '@/components/VInput/VInput'\n\n// Composables\nimport { makeFocusProps, useFocus } from '@/composables/focus'\nimport { makeSliderProps, useSlider } from './slider'\nimport { useProxiedModel } from '@/composables/proxiedModel'\n\n// Util\nimport { computed, ref } from 'vue'\nimport { defineComponent, useRender } from '@/util'\n\nexport const VSlider = defineComponent({\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, _] = filterInputProps(props)\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            default: ({ id }) => (\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                  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":["filterInputProps","makeVInputProps","VInput","VLabel","VSliderThumb","VSliderTrack","makeFocusProps","useFocus","makeSliderProps","useSlider","useProxiedModel","computed","ref","defineComponent","useRender","VSlider","name","props","modelValue","type","Number","String","default","emits","value","v","setup","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","_","hasPrepend","label","prepend","disabled","slotProps","id","elevation"],"sources":["../../../src/components/VSlider/VSlider.tsx"],"sourcesContent":["// Styles\nimport './VSlider.sass'\n\n// Components\nimport { filterInputProps, 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 { defineComponent, useRender } from '@/util'\n\nexport const VSlider = defineComponent({\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, _] = filterInputProps(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                      class=\"v-slider__label\"\n                      text={ props.label }\n                    />\n                  ) : undefined\n                }\n\n                { slots.prepend?.(slotProps) }\n              </>\n            ) : undefined,\n            default: ({ id }) => (\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                  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,uB,CAEA;;SACSA,gB,EAAkBC,e,EAAiBC,M;SACnCC,M;SACAC,Y;SACAC,Y,8BAET;;SACSC,c,EAAgBC,Q;SAChBC,e,EAAiBC,S;SACjBC,e,8CAET;;AACA,SAASC,QAAT,EAAmBC,GAAnB,QAA8B,KAA9B;SACSC,e,EAAiBC,S;AAE1B,OAAO,MAAMC,OAAO,GAAGF,eAAe,CAAC;EACrCG,IAAI,EAAE,SAD+B;EAGrCC,KAAK,EAAE,EACL,GAAGX,cAAc,EADZ;IAEL,GAAGE,eAAe,EAFb;IAGL,GAAGP,eAAe,EAHb;IAKLiB,UAAU,EAAE;MACVC,IAAI,EAAE,CAACC,MAAD,EAASC,MAAT,CADI;MAEVC,OAAO,EAAE;IAFC;EALP,CAH8B;EAcrCC,KAAK,EAAE;IACL,kBAAmBC,KAAD,IAAoB,IADjC;IAEL,qBAAsBC,CAAD,IAAe;EAF/B,CAd8B;;EAmBrCC,KAAK,CAAET,KAAF,QAAoB;IAAA,IAAX;MAAEU;IAAF,CAAW;IACvB,MAAMC,iBAAiB,GAAGhB,GAAG,EAA7B;IAEA,MAAM;MACJiB,GADI;MAEJC,GAFI;MAGJC,YAHI;MAIJC,UAJI;MAKJC,iBALI;MAMJC,kBANI;MAOJC,iBAPI;MAQJC,QARI;MASJC,SATI;MAUJC;IAVI,IAWF7B,SAAS,CAAC;MACZQ,KADY;MAEZ;MACAsB,mBAAmB,EAAEC,QAAQ,IAAIC,KAAK,CAACjB,KAAN,GAAcQ,UAAU,CAACQ,QAAD,CAH7C;MAIZ;MACAE,eAAe,EAAEF,QAAQ,IAAIC,KAAK,CAACjB,KAAN,GAAcQ,UAAU,CAACQ,QAAD,CALzC;MAMZG,cAAc,EAAE;QAAA;;QAAA,gCAAMf,iBAAiB,CAACJ,KAAxB,qBAAM,sBAAyBoB,GAA/B;MAAA;IANJ,CAAD,CAXb;IAoBA,MAAMH,KAAK,GAAG/B,eAAe,CAC3BO,KAD2B,EAE3B,YAF2B,EAG3B4B,SAH2B,EAI3BpB,CAAC,IAAI;MACH,MAAMD,KAAK,GAAG,OAAOC,CAAP,KAAa,QAAb,GAAwBqB,UAAU,CAACrB,CAAD,CAAlC,GAAwCA,CAAC,IAAI,IAAL,GAAYI,GAAG,CAACL,KAAhB,GAAwBC,CAA9E;MAEA,OAAOO,UAAU,CAACR,KAAD,CAAjB;IACD,CAR0B,CAA7B;IAWA,MAAM;MAAEuB,SAAF;MAAaC,KAAb;MAAoBC;IAApB,IAA6B1C,QAAQ,CAACU,KAAD,CAA3C;IACA,MAAMiC,SAAS,GAAGvC,QAAQ,CAAC,MAAMyB,QAAQ,CAACK,KAAK,CAACjB,KAAP,CAAf,CAA1B;IAEAV,SAAS,CAAC,MAAM;MACd,MAAM,CAACqC,UAAD,EAAaC,CAAb,IAAkBpD,gBAAgB,CAACiB,KAAD,CAAxC;MACA,MAAMoC,UAAU,GAAG,CAAC,EAAEpC,KAAK,CAACqC,KAAN,IAAe3B,KAAK,CAAC2B,KAArB,IAA8B3B,KAAK,CAAC4B,OAAtC,CAApB;MAEA;QAAA,SAEW,CACL,UADK,EAEL;UACE,wBAAwB,CAAC,CAAC5B,KAAK,CAAC,YAAD,CAAP,IAAyBU,SAAS,CAACb,KAD7D;UAEE,qBAAqBuB,SAAS,CAACvB,KAFjC;UAGE,qBAAqBO,YAAY,CAACP,KAHpC;UAIE,sBAAsBP,KAAK,CAACuC;QAJ9B,CAFK;MAFX,GAWSL,UAXT;QAAA,WAYcJ,SAAS,CAACvB;MAZxB,MAeM,GAAGG,KAfT;QAgBM4B,OAAO,EAAEF,UAAU,GAAGI,SAAS;UAAA;;UAAA,sCAEzB,iBAAA9B,KAAK,CAAC2B,KAAN,uCAAA3B,KAAK,EAAS8B,SAAT,CAAL,KAA4BxC,KAAK,CAACqC,KAAlC;YAAA,SAGU,iBAHV;YAAA,QAIWrC,KAAK,CAACqC;UAJjB,WAMIT,SARqB,oBAWzBlB,KAAK,CAAC4B,OAXmB,qBAWzB,oBAAA5B,KAAK,EAAW8B,SAAX,CAXoB;QAAA,CAAZ,GAafZ,SA7BV;QA8BMvB,OAAO,EAAE;UAAA,IAAC;YAAEoC;UAAF,CAAD;UAAA;YAAA,SAEC,qBAFD;YAAA,eAGS,CAACpB,QAAQ,CAACd,KAAV,GAAkBS,iBAAlB,GAAsCY,SAH/C;YAAA,uBAIiB,CAACP,QAAQ,CAACd,KAAV,GAAkBU,kBAAlB,GAAuCW;UAJxD;YAAA,MAOEa,EAAE,CAAClC,KAPL;YAAA,QAQIP,KAAK,CAACD,IAAN,IAAc0C,EAAE,CAAClC,KARrB;YAAA,YASQP,KAAK,CAACuC,QATd;YAAA,YAUQvC,KAAK,CAACqB,QAVd;YAAA,YAWM,IAXN;YAAA,SAYKG,KAAK,CAACjB;UAZX;YAAA,OAgBGW,iBAhBH;YAAA,SAiBK,CAjBL;YAAA,QAkBIe,SAAS,CAAC1B;UAlBd;YAoBA,cAAcG,KAAK,CAAC,YAAD;UApBnB;YAAA,OAwBGC,iBAxBH;YAAA,WAyBOmB,SAAS,CAACvB,KAzBjB;YAAA,OA0BGK,GAAG,CAACL,KA1BP;YAAA,OA2BGM,GAAG,CAACN,KA3BP;YAAA,cA4BUiB,KAAK,CAACjB,KA5BhB;YAAA,uBA6BmBC,CAAC,IAAKgB,KAAK,CAACjB,KAAN,GAAcC,CA7BvC;YAAA,YA8BQyB,SAAS,CAAC1B,KA9BlB;YAAA,aA+BSP,KAAK,CAAC0C,SA/Bf;YAAA,WAgCOX,KAhCP;YAAA,UAiCMC;UAjCN;YAmCA,eAAetB,KAAK,CAAC,aAAD;UAnCpB;QAAA;MA9Bf;IAwED,CA5EQ,CAAT;IA8EA,OAAO,EAAP;EACD;;AAvIoC,CAAD,CAA/B"}

package/lib/components/VSlider/VSlider.sass

@@ -19,6 +19,7 @@
 // Elements
 .v-slider__container
   position: relative
+  min-height: inherit
   width: 100%
   height: 100%
   display: flex
@@ -35,8 +36,8 @@
 // Modifiers
 .v-slider.v-input--horizontal
   align-items: center
-  margin-left: $slider-horizontal-left
-  margin-right: $slider-horizontal-right
+  margin-inline-start: $slider-horizontal-start
+  margin-inline-end: $slider-horizontal-end
 
   .v-input__control
     min-height: $slider-horizontal-min-height
@@ -56,3 +57,6 @@
 
 .v-slider--has-labels .v-input__control
   margin-bottom: $slider-tick-label-margin-top * .5
+
+.v-slider__label
+  margin-inline-end: $slider-label-margin-end

package/lib/components/VSlider/VSliderTrack.css

@@ -44,16 +44,16 @@
   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 {
+.v-slider-track__tick--first .v-slider-track__tick-label.v-locale--is-ltr, .v-locale--is-ltr .v-slider-track__tick--first .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 {
+.v-slider-track__tick--first .v-slider-track__tick-label.v-locale--is-rtl, .v-locale--is-rtl .v-slider-track__tick--first .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 {
+.v-slider-track__tick--last .v-slider-track__tick-label.v-locale--is-ltr, .v-locale--is-ltr .v-slider-track__tick--last .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 {
+.v-slider-track__tick--last .v-slider-track__tick-label.v-locale--is-rtl, .v-locale--is-rtl .v-slider-track__tick--last .v-slider-track__tick-label {
   transform: none;
 }
 
@@ -82,33 +82,33 @@
 .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 {
+.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--horizontal .v-slider-track__tick--first {
   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 {
+.v-slider.v-input--horizontal .v-slider-track__tick--first .v-slider-track__tick-label.v-locale--is-ltr, .v-locale--is-ltr .v-slider.v-input--horizontal .v-slider-track__tick--first .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 {
+.v-slider.v-input--horizontal .v-slider-track__tick--first .v-slider-track__tick-label.v-locale--is-rtl, .v-locale--is-rtl .v-slider.v-input--horizontal .v-slider-track__tick--first .v-slider-track__tick-label {
   transform: translateX(0%);
 }
-.v-slider.v-input--horizontal .v-slider-track__tick:last-child {
+.v-slider.v-input--horizontal .v-slider-track__tick--last {
   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 {
+.v-slider.v-input--horizontal .v-slider-track__tick--last .v-slider-track__tick-label.v-locale--is-ltr, .v-locale--is-ltr .v-slider.v-input--horizontal .v-slider-track__tick--last .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 {
+.v-slider.v-input--horizontal .v-slider-track__tick--last .v-slider-track__tick-label.v-locale--is-rtl, .v-locale--is-rtl .v-slider.v-input--horizontal .v-slider-track__tick--last .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%;
@@ -133,7 +133,7 @@
 .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 {
+.v-slider.v-input--vertical .v-slider-track__tick--last {
   bottom: calc(0% + var(--v-slider-tick-size) + 1px);
 }
 .v-slider.v-input--vertical .v-slider-track__tick .v-slider-track__tick-label {

package/lib/components/VSlider/VSliderTrack.mjs

@@ -39,7 +39,9 @@ export const VSliderTrack = defineComponent({
       trackColor,
       trackFillColor,
       trackSize,
-      vertical
+      vertical,
+      min,
+      max
     } = slider;
     const {
       roundedClasses
@@ -73,11 +75,13 @@ export const VSliderTrack = defineComponent({
         var _slots$tickLabel;
 
         const directionProperty = vertical.value ? 'bottom' : 'margin-inline-start';
-        const directionValue = tick.position > 0 && tick.position < 100 ? convertToUnit(tick.position, '%') : undefined;
+        const directionValue = tick.value !== min.value && tick.value !== max.value ? convertToUnit(tick.position, '%') : undefined;
         return _createVNode("div", {
           "key": tick.value,
           "class": ['v-slider-track__tick', {
-            'v-slider-track__tick--filled': tick.position >= props.start && tick.position <= props.stop
+            'v-slider-track__tick--filled': tick.position >= props.start && tick.position <= props.stop,
+            'v-slider-track__tick--first': tick.value === min.value,
+            'v-slider-track__tick--last': tick.value === max.value
           }],
           "style": {
             [directionProperty]: directionValue

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

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

package/lib/components/VSlider/VSliderTrack.sass

@@ -47,14 +47,14 @@
   height: var(--v-slider-tick-size)
   transform: translate(calc(var(--v-slider-tick-size) / -2), calc(var(--v-slider-tick-size) / -2))
 
-  &:first-child .v-slider-track__tick-label
+  &--first .v-slider-track__tick-label
     @include tools.ltr()
       transform: none
 
     @include tools.rtl()
       transform: translateX(100%)
 
-  &:last-child .v-slider-track__tick-label
+  &--last .v-slider-track__tick-label
     @include tools.ltr()
       transform: translateX(-100%)
 
@@ -87,7 +87,16 @@
     @include tools.rtl()
       transform: translate(calc(var(--v-slider-tick-size) / 2), calc(var(--v-slider-tick-size) / -2))
 
-    &:first-child
+    .v-slider-track__tick-label
+      margin-top: calc(var(--v-slider-track-size) / 2 + #{$slider-tick-label-margin-top})
+
+      @include tools.ltr()
+        transform: translateX(-50%)
+
+      @include tools.rtl()
+        transform: translateX(50%)
+
+    &--first
       margin-inline-start: calc(var(--v-slider-tick-size) + 1px)
 
       .v-slider-track__tick-label
@@ -97,7 +106,7 @@
         @include tools.rtl()
           transform: translateX(0%)
 
-    &:last-child
+    &--last
       margin-inline-start: calc(100% - var(--v-slider-tick-size) - 1px)
 
       .v-slider-track__tick-label
@@ -107,15 +116,6 @@
         @include tools.rtl()
           transform: translateX(100%)
 
-    .v-slider-track__tick-label
-      margin-top: calc(var(--v-slider-track-size) / 2 + #{$slider-tick-label-margin-top})
-
-      @include tools.ltr()
-        transform: translateX(-50%)
-
-      @include tools.rtl()
-        transform: translateX(50%)
-
 // Vertical
 .v-slider.v-input--vertical
   .v-slider-track
@@ -141,7 +141,7 @@
     @include tools.rtl()
       transform: translate(calc(var(--v-slider-tick-size) / 2), calc(var(--v-slider-tick-size) / 2))
 
-    &:last-child
+    &--last
       bottom: calc(0% + var(--v-slider-tick-size) + 1px)
 
     .v-slider-track__tick-label

package/lib/components/VSlider/_variables.scss

@@ -1,9 +1,9 @@
 @use '../../styles/settings';
 @use '../../styles/tools';
 
-$slider-horizontal-left: 8px !default;
+$slider-horizontal-start: 8px !default;
 $slider-horizontal-min-height: 32px !default;
-$slider-horizontal-right: 8px !default;
+$slider-horizontal-end: 8px !default;
 $slider-label-margin-end: 12px !default;
 $slider-label-margin-start: 12px !default;
 $slider-state-track-background-opacity: 0.4 !default;