vuetify 3.0.0-beta.9 → 3.0.1

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

@@ -0,0 +1,434 @@
+import * as vue from 'vue';
+import { JSXComponent, PropType, VNodeChild, ComponentInternalInstance, Ref, ComputedRef, InjectionKey, UnwrapRef } from 'vue';
+
+declare type IconValue = string | JSXComponent;
+declare const IconValue: PropType<IconValue>;
+
+declare type SlotsToProps<T extends Record<string, any>> = T extends Record<string, Slot> ? ({
+    $children?: (VNodeChild | (keyof T extends 'default' ? T['default'] : {}) | {
+        [K in keyof T]?: T[K];
+    });
+    'v-slots'?: {
+        [K in keyof T]?: T[K] | false;
+    };
+} & {
+    [K in keyof T as `v-slot:${K & string}`]?: T[K] | false;
+}) : T extends Record<string, any[]> ? SlotsToProps<MakeSlots<T>> : never;
+declare type Slot<T extends any[] = any[]> = (...args: T) => VNodeChild;
+declare type MakeSlots<T extends Record<string, any[]>> = {
+    [K in keyof T]?: Slot<T[K]>;
+};
+
+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;
+}
+interface GroupItemProvide {
+    id: number;
+    isSelected: Ref<boolean>;
+    toggle: () => void;
+    select: (value: boolean) => void;
+    selectedClass: Ref<(string | undefined)[] | false>;
+    value: Ref<unknown>;
+    disabled: Ref<boolean | undefined>;
+    group: GroupProvide;
+}
+
+interface SlideGroupSlot {
+    next: GroupProvide['next'];
+    prev: GroupProvide['prev'];
+    select: GroupProvide['select'];
+    isSelected: GroupProvide['isSelected'];
+}
+declare const VSlideGroup: {
+    new (...args: any[]): {
+        $: vue.ComponentInternalInstance;
+        $data: {};
+        $props: Partial<{
+            symbol: any;
+            direction: string;
+            disabled: boolean;
+            multiple: boolean;
+            tag: string;
+            modelValue: any;
+            selectedClass: string;
+            nextIcon: IconValue;
+            prevIcon: IconValue;
+            centerActive: boolean;
+        }> & Omit<Readonly<vue.ExtractPropTypes<Omit<{
+            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;
+            };
+        }, "$children" | "v-slots" | "v-slot:default" | "v-slot:prev" | "v-slot:next">>> & {
+            "onUpdate:modelValue"?: ((value: any) => any) | undefined;
+        } & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, "symbol" | "direction" | "disabled" | "multiple" | "tag" | "modelValue" | "selectedClass" | "nextIcon" | "prevIcon" | "centerActive">;
+        $attrs: {
+            [x: string]: unknown;
+        };
+        $refs: {
+            [x: string]: unknown;
+        };
+        $slots: Readonly<{
+            [name: string]: vue.Slot | undefined;
+        }>;
+        $root: vue.ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, vue.ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null;
+        $parent: vue.ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, vue.ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null;
+        $emit: (event: "update:modelValue", value: any) => void;
+        $el: any;
+        $options: vue.ComponentOptionsBase<Readonly<vue.ExtractPropTypes<Omit<{
+            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;
+            };
+        }, "$children" | "v-slots" | "v-slot:default" | "v-slot:prev" | "v-slot:next">>> & {
+            "onUpdate:modelValue"?: ((value: any) => any) | undefined;
+        }, {
+            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, Omit<{
+            'update:modelValue': (value: any) => boolean;
+        }, "$children" | "v-slots" | "v-slot:default" | "v-slot:prev" | "v-slot:next">, string, {
+            symbol: any;
+            direction: string;
+            disabled: boolean;
+            multiple: boolean;
+            tag: string;
+            modelValue: any;
+            selectedClass: string;
+            nextIcon: IconValue;
+            prevIcon: IconValue;
+            centerActive: boolean;
+        }> & {
+            beforeCreate?: ((() => void) | (() => void)[]) | undefined;
+            created?: ((() => void) | (() => void)[]) | undefined;
+            beforeMount?: ((() => void) | (() => void)[]) | undefined;
+            mounted?: ((() => void) | (() => void)[]) | undefined;
+            beforeUpdate?: ((() => void) | (() => void)[]) | undefined;
+            updated?: ((() => void) | (() => void)[]) | undefined;
+            activated?: ((() => void) | (() => void)[]) | undefined;
+            deactivated?: ((() => void) | (() => void)[]) | undefined;
+            beforeDestroy?: ((() => void) | (() => void)[]) | undefined;
+            beforeUnmount?: ((() => void) | (() => void)[]) | undefined;
+            destroyed?: ((() => void) | (() => void)[]) | undefined;
+            unmounted?: ((() => void) | (() => void)[]) | undefined;
+            renderTracked?: (((e: vue.DebuggerEvent) => void) | ((e: vue.DebuggerEvent) => void)[]) | undefined;
+            renderTriggered?: (((e: vue.DebuggerEvent) => void) | ((e: vue.DebuggerEvent) => void)[]) | undefined;
+            errorCaptured?: (((err: unknown, instance: vue.ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, vue.ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null, info: string) => boolean | void) | ((err: unknown, instance: vue.ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, vue.ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null, info: string) => boolean | void)[]) | undefined;
+        };
+        $forceUpdate: () => void;
+        $nextTick: typeof vue.nextTick;
+        $watch(source: string | Function, cb: Function, options?: vue.WatchOptions<boolean> | undefined): vue.WatchStopHandle;
+    } & Readonly<vue.ExtractPropTypes<Omit<{
+        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;
+        };
+    }, "$children" | "v-slots" | "v-slot:default" | "v-slot:prev" | "v-slot:next">>> & {
+        "onUpdate:modelValue"?: ((value: any) => any) | undefined;
+    } & vue.ShallowUnwrapRef<{
+        selected: vue.Ref<readonly number[]>;
+        scrollTo: (location: 'prev' | 'next') => void;
+        scrollOffset: vue.Ref<number>;
+        focus: (location?: 'next' | 'prev' | 'first' | 'last') => void;
+    }> & {} & vue.ComponentCustomProperties;
+    __isFragment?: undefined;
+    __isTeleport?: undefined;
+    __isSuspense?: undefined;
+} & vue.ComponentOptionsBase<Readonly<vue.ExtractPropTypes<Omit<{
+    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;
+    };
+}, "$children" | "v-slots" | "v-slot:default" | "v-slot:prev" | "v-slot:next">>> & {
+    "onUpdate:modelValue"?: ((value: any) => any) | undefined;
+}, {
+    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, Omit<{
+    'update:modelValue': (value: any) => boolean;
+}, "$children" | "v-slots" | "v-slot:default" | "v-slot:prev" | "v-slot:next">, string, {
+    symbol: any;
+    direction: string;
+    disabled: boolean;
+    multiple: boolean;
+    tag: string;
+    modelValue: any;
+    selectedClass: string;
+    nextIcon: IconValue;
+    prevIcon: IconValue;
+    centerActive: boolean;
+}> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & (new () => {
+    $props: SlotsToProps<{
+        default: [SlideGroupSlot];
+        prev: [SlideGroupSlot];
+        next: [SlideGroupSlot];
+    }>;
+});
+declare type VSlideGroup = InstanceType<typeof VSlideGroup>;
+
+declare const VSlideGroupItem: {
+    new (...args: any[]): {
+        $: vue.ComponentInternalInstance;
+        $data: {};
+        $props: Partial<{
+            disabled: boolean;
+        }> & Omit<Readonly<vue.ExtractPropTypes<Omit<{
+            value: null;
+            disabled: BooleanConstructor;
+            selectedClass: StringConstructor;
+        }, "$children" | "v-slots" | "v-slot:default">>> & {
+            "onGroup:selected"?: ((val: {
+                value: boolean;
+            }) => any) | undefined;
+        } & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, "disabled">;
+        $attrs: {
+            [x: string]: unknown;
+        };
+        $refs: {
+            [x: string]: unknown;
+        };
+        $slots: Readonly<{
+            [name: string]: vue.Slot | undefined;
+        }>;
+        $root: vue.ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, vue.ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null;
+        $parent: vue.ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, vue.ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null;
+        $emit: (event: "group:selected", val: {
+            value: boolean;
+        }) => void;
+        $el: any;
+        $options: vue.ComponentOptionsBase<Readonly<vue.ExtractPropTypes<Omit<{
+            value: null;
+            disabled: BooleanConstructor;
+            selectedClass: StringConstructor;
+        }, "$children" | "v-slots" | "v-slot:default">>> & {
+            "onGroup:selected"?: ((val: {
+                value: boolean;
+            }) => any) | undefined;
+        }, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+            [key: string]: any;
+        }>[] | undefined, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Omit<{
+            'group:selected': (val: {
+                value: boolean;
+            }) => boolean;
+        }, "$children" | "v-slots" | "v-slot:default">, string, {
+            disabled: boolean;
+        }> & {
+            beforeCreate?: ((() => void) | (() => void)[]) | undefined;
+            created?: ((() => void) | (() => void)[]) | undefined;
+            beforeMount?: ((() => void) | (() => void)[]) | undefined;
+            mounted?: ((() => void) | (() => void)[]) | undefined;
+            beforeUpdate?: ((() => void) | (() => void)[]) | undefined;
+            updated?: ((() => void) | (() => void)[]) | undefined;
+            activated?: ((() => void) | (() => void)[]) | undefined;
+            deactivated?: ((() => void) | (() => void)[]) | undefined;
+            beforeDestroy?: ((() => void) | (() => void)[]) | undefined;
+            beforeUnmount?: ((() => void) | (() => void)[]) | undefined;
+            destroyed?: ((() => void) | (() => void)[]) | undefined;
+            unmounted?: ((() => void) | (() => void)[]) | undefined;
+            renderTracked?: (((e: vue.DebuggerEvent) => void) | ((e: vue.DebuggerEvent) => void)[]) | undefined;
+            renderTriggered?: (((e: vue.DebuggerEvent) => void) | ((e: vue.DebuggerEvent) => void)[]) | undefined;
+            errorCaptured?: (((err: unknown, instance: vue.ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, vue.ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null, info: string) => boolean | void) | ((err: unknown, instance: vue.ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, vue.ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null, info: string) => boolean | void)[]) | undefined;
+        };
+        $forceUpdate: () => void;
+        $nextTick: typeof vue.nextTick;
+        $watch(source: string | Function, cb: Function, options?: vue.WatchOptions<boolean> | undefined): vue.WatchStopHandle;
+    } & Readonly<vue.ExtractPropTypes<Omit<{
+        value: null;
+        disabled: BooleanConstructor;
+        selectedClass: StringConstructor;
+    }, "$children" | "v-slots" | "v-slot:default">>> & {
+        "onGroup:selected"?: ((val: {
+            value: boolean;
+        }) => any) | undefined;
+    } & vue.ShallowUnwrapRef<() => vue.VNode<vue.RendererNode, vue.RendererElement, {
+        [key: string]: any;
+    }>[] | undefined> & {} & vue.ComponentCustomProperties;
+    __isFragment?: undefined;
+    __isTeleport?: undefined;
+    __isSuspense?: undefined;
+} & vue.ComponentOptionsBase<Readonly<vue.ExtractPropTypes<Omit<{
+    value: null;
+    disabled: BooleanConstructor;
+    selectedClass: StringConstructor;
+}, "$children" | "v-slots" | "v-slot:default">>> & {
+    "onGroup:selected"?: ((val: {
+        value: boolean;
+    }) => any) | undefined;
+}, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>[] | undefined, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Omit<{
+    'group:selected': (val: {
+        value: boolean;
+    }) => boolean;
+}, "$children" | "v-slots" | "v-slot:default">, string, {
+    disabled: boolean;
+}> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & (new () => {
+    $props: SlotsToProps<{
+        default: [
+            {
+                isSelected: UnwrapRef<GroupItemProvide['isSelected']>;
+                select: GroupItemProvide['select'];
+                toggle: GroupItemProvide['toggle'];
+                selectedClass: UnwrapRef<GroupItemProvide['selectedClass']>;
+            }
+        ];
+    }>;
+});
+declare type VSlideGroupItem = InstanceType<typeof VSlideGroupItem>;
+
+export { VSlideGroup, VSlideGroupItem };

package/lib/components/VSlideGroup/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":["VSlideGroup","VSlideGroupItem"],"sources":["../../../src/components/VSlideGroup/index.ts"],"sourcesContent":["export { VSlideGroup } from './VSlideGroup'\nexport { VSlideGroupItem } from './VSlideGroupItem'\n"],"mappings":"SAASA,W;SACAC,e"}
+{"version":3,"file":"index.mjs","names":["VSlideGroup","VSlideGroupItem"],"sources":["../../../src/components/VSlideGroup/index.ts"],"sourcesContent":["export { VSlideGroup } from './VSlideGroup'\nexport { VSlideGroupItem } from './VSlideGroupItem'\n"],"mappings":"SAASA,WAAW;AAAA,SACXC,eAAe"}

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,20 +1,21 @@
-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 "./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";
 export const VSlider = defineComponent({
   name: 'VSlider',
-  props: { ...makeFocusProps(),
+  props: {
+    ...makeFocusProps(),
     ...makeSliderProps(),
     ...makeVInputProps(),
     modelValue: {
@@ -26,7 +27,6 @@ export const VSlider = defineComponent({
     'update:focused': value => true,
     'update:modelValue': v => true
   },
-
   setup(props, _ref) {
     let {
       slots
@@ -51,7 +51,6 @@ export const VSlider = defineComponent({
       handleMouseMove: newValue => model.value = roundValue(newValue),
       getActiveThumb: () => {
         var _thumbContainerRef$va;
-
         return (_thumbContainerRef$va = thumbContainerRef.value) == null ? void 0 : _thumbContainerRef$va.$el;
       }
     });
@@ -67,6 +66,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,
@@ -76,7 +76,15 @@ export const VSlider = defineComponent({
         }]
       }, inputProps, {
         "focused": isFocused.value
-      }), { ...slots,
+      }), {
+        ...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
@@ -117,6 +125,5 @@ export const VSlider = defineComponent({
     });
     return {};
   }
-
 });
 //# sourceMappingURL=VSlider.mjs.map

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":"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"}

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/VSliderThumb.css

@@ -1,4 +1,5 @@
 .v-slider-thumb {
+  touch-action: none;
   color: rgb(var(--v-theme-surface-variant));
 }
 .v-input--error:not(.v-input--disabled) .v-slider-thumb {
@@ -122,11 +123,8 @@
   left: -6px;
 }
 
-.v-slider-thumb--focused .v-slider-thumb__surface::before, .v-slider-thumb:hover .v-slider-thumb__surface::before {
-  transform: scale(2);
-}
-
 .v-slider-thumb--focused .v-slider-thumb__surface::before {
+  transform: scale(2);
   opacity: var(--v-focus-opacity);
 }
 
@@ -137,6 +135,12 @@
   opacity: var(--v-pressed-opacity);
 }
 
-.v-slider-thumb:hover:not(.v-slider-thumb--focused) .v-slider-thumb__surface::before {
-  opacity: var(--v-hover-opacity);
+@media (hover: hover) {
+  .v-slider-thumb:hover .v-slider-thumb__surface::before {
+    transform: scale(2);
+  }
+
+  .v-slider-thumb:hover:not(.v-slider-thumb--focused) .v-slider-thumb__surface::before {
+    opacity: var(--v-hover-opacity);
+  }
 }