@vuetify/nightly 3.0.0-alpha.8 → 3.0.0-beta.0

package/lib/components/VSlider/VSlider.mjs

@@ -1,549 +1,124 @@
-// @ts-nocheck
-
-/* eslint-disable */
-import "./VSlider.sass"; // Components
-
-import VInput from "../VInput/index.mjs";
-import { VScaleTransition } from "../transitions/index.mjs"; // Mixins
-
-import mixins from "../../util/mixins.mjs";
-import Loadable from "../../mixins/loadable/index.mjs"; // Directives
-
-import ClickOutside from "../../directives/click-outside/index.mjs"; // Helpers
-
-import { addOnceEventListener, deepEqual, keyCodes, createRange, convertToUnit, passiveSupported } from "../../util/helpers.mjs";
-import { consoleWarn } from "../../util/console.mjs"; // Types
-
-export default mixins(VInput, Loadable
-/* @vue/component */
-).extend({
-  name: 'v-slider',
-  directives: {
-    ClickOutside
-  },
-  mixins: [Loadable],
-  props: {
-    disabled: Boolean,
-    inverseLabel: Boolean,
-    max: {
-      type: [Number, String],
-      default: 100
-    },
-    min: {
+import { mergeProps as _mergeProps, createVNode as _createVNode } from "vue";
+// Styles
+import "./VSlider.css"; // Components
+
+import { VInput } from "../VInput/index.mjs";
+import { VSliderThumb } from "./VSliderThumb.mjs";
+import { VSliderTrack } from "./VSliderTrack.mjs"; // Composables
+
+import { makeFocusProps, useFocus } from "../../composables/focus.mjs";
+import { makeSliderProps, useSlider } from "./slider.mjs";
+import { useProxiedModel } from "../../composables/proxiedModel.mjs"; // Helpers
+
+import { defineComponent } from "../../util/index.mjs"; // Types
+
+import { computed, ref } from 'vue';
+import { filterInputProps, makeVInputProps } from "../VInput/VInput.mjs";
+export const VSlider = defineComponent({
+  name: 'VSlider',
+  props: { ...makeFocusProps(),
+    ...makeSliderProps(),
+    ...makeVInputProps(),
+    modelValue: {
       type: [Number, String],
       default: 0
-    },
-    step: {
-      type: [Number, String],
-      default: 1
-    },
-    thumbColor: String,
-    thumbLabel: {
-      type: [Boolean, String],
-      default: undefined,
-      validator: v => typeof v === 'boolean' || v === 'always'
-    },
-    thumbSize: {
-      type: [Number, String],
-      default: 32
-    },
-    tickLabels: {
-      type: Array,
-      default: () => []
-    },
-    ticks: {
-      type: [Boolean, String],
-      default: false,
-      validator: v => typeof v === 'boolean' || v === 'always'
-    },
-    tickSize: {
-      type: [Number, String],
-      default: 2
-    },
-    trackColor: String,
-    trackFillColor: String,
-    value: [Number, String],
-    vertical: Boolean
-  },
-  data: () => ({
-    app: null,
-    oldValue: null,
-    thumbPressed: false,
-    mouseTimeout: -1,
-    isFocused: false,
-    isActive: false,
-    noClick: false // Prevent click event if dragging took place, hack for #7915
-
-  }),
-  computed: {
-    classes() {
-      return { ...VInput.options.computed.classes.call(this),
-        'v-input__slider': true,
-        'v-input__slider--vertical': this.vertical,
-        'v-input__slider--inverse-label': this.inverseLabel
-      };
-    },
-
-    internalValue: {
-      get() {
-        return this.lazyValue;
-      },
-
-      set(val) {
-        val = isNaN(val) ? this.minValue : val; // Round value to ensure the
-        // entire slider range can
-        // be selected with step
-
-        const value = this.roundValue(Math.min(Math.max(val, this.minValue), this.maxValue));
-        if (value === this.lazyValue) return;
-        this.lazyValue = value;
-        this.$emit('input', value);
-      }
-
-    },
-
-    trackTransition() {
-      return this.thumbPressed ? this.showTicks || this.stepNumeric ? '0.1s cubic-bezier(0.25, 0.8, 0.5, 1)' : 'none' : '';
-    },
-
-    minValue() {
-      return parseFloat(this.min);
-    },
-
-    maxValue() {
-      return parseFloat(this.max);
-    },
-
-    stepNumeric() {
-      return this.step > 0 ? parseFloat(this.step) : 0;
-    },
-
-    inputWidth() {
-      return (this.roundValue(this.internalValue) - this.minValue) / (this.maxValue - this.minValue) * 100;
-    },
-
-    trackFillStyles() {
-      const startDir = this.vertical ? 'bottom' : 'left';
-      const endDir = this.vertical ? 'top' : 'right';
-      const valueDir = this.vertical ? 'height' : 'width';
-      const start = this.$vuetify.rtl ? 'auto' : '0';
-      const end = this.$vuetify.rtl ? '0' : 'auto';
-      const value = this.isDisabled ? `calc(${this.inputWidth}% - 10px)` : `${this.inputWidth}%`;
-      return {
-        transition: this.trackTransition,
-        [startDir]: start,
-        [endDir]: end,
-        [valueDir]: value
-      };
-    },
-
-    trackStyles() {
-      const startDir = this.vertical ? this.$vuetify.rtl ? 'bottom' : 'top' : this.$vuetify.rtl ? 'left' : 'right';
-      const endDir = this.vertical ? 'height' : 'width';
-      const start = '0px';
-      const end = this.isDisabled ? `calc(${100 - this.inputWidth}% - 10px)` : `calc(${100 - this.inputWidth}%)`;
-      return {
-        transition: this.trackTransition,
-        [startDir]: start,
-        [endDir]: end
-      };
-    },
-
-    showTicks() {
-      return this.tickLabels.length > 0 || !!(!this.isDisabled && this.stepNumeric && this.ticks);
-    },
-
-    numTicks() {
-      return Math.ceil((this.maxValue - this.minValue) / this.stepNumeric);
-    },
-
-    showThumbLabel() {
-      return !this.isDisabled && !!(this.thumbLabel || this.$scopedSlots['thumb-label']);
-    },
-
-    computedTrackColor() {
-      if (this.isDisabled) return undefined;
-      if (this.trackColor) return this.trackColor;
-      if (this.isDark) return this.validationState;
-      return this.validationState || 'primary lighten-3';
-    },
-
-    computedTrackFillColor() {
-      if (this.isDisabled) return undefined;
-      if (this.trackFillColor) return this.trackFillColor;
-      return this.validationState || this.computedColor;
-    },
-
-    computedThumbColor() {
-      if (this.thumbColor) return this.thumbColor;
-      return this.validationState || this.computedColor;
     }
-
   },
-  watch: {
-    min(val) {
-      const parsed = parseFloat(val);
-      parsed > this.internalValue && this.$emit('input', parsed);
-    },
-
-    max(val) {
-      const parsed = parseFloat(val);
-      parsed < this.internalValue && this.$emit('input', parsed);
-    },
-
-    value: {
-      handler(v) {
-        this.internalValue = v;
-      }
-
-    }
-  },
-
-  // If done in as immediate in
-  // value watcher, causes issues
-  // with vue-test-utils
-  beforeMount() {
-    this.internalValue = this.value;
-  },
-
-  mounted() {
-    // Without a v-app, iOS does not work with body selectors
-    this.app = document.querySelector('[data-app]') || consoleWarn('Missing v-app or a non-body wrapping element with the [data-app] attribute', this);
+  emits: {
+    'update:focused': value => true,
+    'update:modelValue': v => true
   },
 
-  methods: {
-    genDefaultSlot() {
-      const children = [this.genLabel()];
-      const slider = this.genSlider();
-      this.inverseLabel ? children.unshift(slider) : children.push(slider);
-      children.push(this.genProgress());
-      return children;
-    },
-
-    genSlider() {
-      return this.$createElement('div', {
-        class: {
-          'v-slider': true,
-          'v-slider--horizontal': !this.vertical,
-          'v-slider--vertical': this.vertical,
-          'v-slider--focused': this.isFocused,
-          'v-slider--active': this.isActive,
-          'v-slider--disabled': this.isDisabled,
-          'v-slider--readonly': this.isReadonly,
-          ...this.themeClasses
-        },
-        directives: [{
-          name: 'click-outside',
-          value: this.onBlur
-        }],
-        on: {
-          click: this.onSliderClick,
-          mousedown: this.onSliderMouseDown,
-          touchstart: this.onSliderMouseDown
-        }
-      }, this.genChildren());
-    },
-
-    genChildren() {
-      return [this.genInput(), this.genTrackContainer(), this.genSteps(), this.genThumbContainer(this.internalValue, this.inputWidth, this.isActive, this.isFocused, this.onFocus, this.onBlur)];
-    },
-
-    genInput() {
-      return this.$createElement('input', {
-        attrs: {
-          value: this.internalValue,
-          id: this.computedId,
-          disabled: true,
-          readonly: true,
-          tabindex: -1,
-          ...this.$attrs
-        } // on: this.genListeners(), // TODO: do we need to attach the listeners to input?
-
-      });
-    },
-
-    genTrackContainer() {
-      const children = [this.$createElement('div', this.setBackgroundColor(this.computedTrackColor, {
-        staticClass: 'v-slider__track-background',
-        style: this.trackStyles
-      })), this.$createElement('div', this.setBackgroundColor(this.computedTrackFillColor, {
-        staticClass: 'v-slider__track-fill',
-        style: this.trackFillStyles
-      }))];
-      return this.$createElement('div', {
-        staticClass: 'v-slider__track-container',
-        ref: 'track'
-      }, children);
-    },
-
-    genSteps() {
-      if (!this.step || !this.showTicks) return null;
-      const tickSize = parseFloat(this.tickSize);
-      const range = createRange(this.numTicks + 1);
-      const direction = this.vertical ? 'bottom' : this.$vuetify.rtl ? 'right' : 'left';
-      const offsetDirection = this.vertical ? this.$vuetify.rtl ? 'left' : 'right' : 'top';
-      if (this.vertical) range.reverse();
-      const ticks = range.map(index => {
-        const children = [];
-
-        if (this.tickLabels[index]) {
-          children.push(this.$createElement('div', {
-            staticClass: 'v-slider__tick-label'
-          }, this.tickLabels[index]));
-        }
-
-        const width = index * (100 / this.numTicks);
-        const filled = this.$vuetify.rtl ? 100 - this.inputWidth < width : width < this.inputWidth;
-        return this.$createElement('span', {
-          key: index,
-          staticClass: 'v-slider__tick',
-          class: {
-            'v-slider__tick--filled': filled
-          },
-          style: {
-            width: `${tickSize}px`,
-            height: `${tickSize}px`,
-            [direction]: `calc(${width}% - ${tickSize / 2}px)`,
-            [offsetDirection]: `calc(50% - ${tickSize / 2}px)`
-          }
-        }, children);
-      });
-      return this.$createElement('div', {
-        staticClass: 'v-slider__ticks-container',
-        class: {
-          'v-slider__ticks-container--always-show': this.ticks === 'always' || this.tickLabels.length > 0
-        }
-      }, ticks);
-    },
-
-    genThumbContainer(value, valueWidth, isActive, isFocused, onFocus, onBlur, ref = 'thumb') {
-      const children = [this.genThumb()];
-      const thumbLabelContent = this.genThumbLabelContent(value);
-      this.showThumbLabel && children.push(this.genThumbLabel(thumbLabelContent));
-      return this.$createElement('div', this.setTextColor(this.computedThumbColor, {
-        ref,
-        key: ref,
-        staticClass: 'v-slider__thumb-container',
-        class: {
-          'v-slider__thumb-container--active': isActive,
-          'v-slider__thumb-container--focused': isFocused,
-          'v-slider__thumb-container--show-label': this.showThumbLabel
-        },
-        style: this.getThumbContainerStyles(valueWidth),
-        attrs: {
-          role: 'slider',
-          tabindex: this.isDisabled ? -1 : this.$attrs.tabindex ? this.$attrs.tabindex : 0,
-          'aria-label': this.label,
-          'aria-valuemin': this.min,
-          'aria-valuemax': this.max,
-          'aria-valuenow': this.internalValue,
-          'aria-readonly': String(this.isReadonly),
-          'aria-orientation': this.vertical ? 'vertical' : 'horizontal',
-          ...this.$attrs
-        },
-        on: {
-          focus: onFocus,
-          blur: onBlur,
-          keydown: this.onKeyDown
-        }
-      }), children);
-    },
-
-    genThumbLabelContent(value) {
-      return this.$scopedSlots['thumb-label'] ? this.$scopedSlots['thumb-label']({
-        value
-      }) : [this.$createElement('span', [String(value)])];
-    },
-
-    genThumbLabel(content) {
-      const size = convertToUnit(this.thumbSize);
-      const transform = this.vertical ? `translateY(20%) translateY(${Number(this.thumbSize) / 3 - 1}px) translateX(55%) rotate(135deg)` : `translateY(-20%) translateY(-12px) translateX(-50%) rotate(45deg)`;
-      return this.$createElement(VScaleTransition, {
-        props: {
-          origin: 'bottom center'
-        }
-      }, [this.$createElement('div', {
-        staticClass: 'v-slider__thumb-label-container',
-        directives: [{
-          name: 'show',
-          value: this.isFocused || this.isActive || this.thumbLabel === 'always'
+  setup(props, _ref) {
+    let {
+      attrs,
+      slots
+    } = _ref;
+    const thumbContainerRef = ref();
+    const {
+      min,
+      max,
+      mousePressed,
+      roundValue,
+      onSliderMousedown,
+      onSliderTouchstart,
+      trackContainerRef,
+      position,
+      hasLabels,
+      readonly
+    } = useSlider({
+      props,
+      // eslint-disable-next-line @typescript-eslint/no-use-before-define
+      handleSliderMouseUp: newValue => model.value = roundValue(newValue),
+      // eslint-disable-next-line @typescript-eslint/no-use-before-define
+      handleMouseMove: newValue => model.value = roundValue(newValue),
+      getActiveThumb: () => {
+        var _thumbContainerRef$va;
+
+        return (_thumbContainerRef$va = thumbContainerRef.value) == null ? void 0 : _thumbContainerRef$va.$el;
+      }
+    });
+    const model = useProxiedModel(props, 'modelValue', undefined, v => {
+      const value = typeof v === 'string' ? parseFloat(v) : v == null ? min.value : v;
+      return roundValue(value);
+    });
+    const {
+      isFocused,
+      focus,
+      blur
+    } = useFocus(props);
+    const trackStop = computed(() => position(model.value));
+    return () => {
+      const [inputProps, _] = filterInputProps(props);
+      return _createVNode(VInput, _mergeProps({
+        "class": ['v-slider', {
+          'v-slider--has-labels': !!slots['tick-label'] || hasLabels.value,
+          'v-slider--focused': isFocused.value,
+          'v-slider--pressed': mousePressed.value,
+          'v-slider--disabled': props.disabled
         }]
-      }, [this.$createElement('div', this.setBackgroundColor(this.computedThumbColor, {
-        staticClass: 'v-slider__thumb-label',
-        style: {
-          height: size,
-          width: size,
-          transform
+      }, inputProps, {
+        "focused": isFocused.value
+      }), { ...slots,
+        default: _ref2 => {
+          let {
+            id
+          } = _ref2;
+          return _createVNode("div", {
+            "class": "v-slider__container",
+            "onMousedown": !readonly.value ? onSliderMousedown : undefined,
+            "onTouchstartPassive": !readonly.value ? onSliderTouchstart : undefined
+          }, [_createVNode("input", {
+            "id": id.value,
+            "name": props.name || id.value,
+            "disabled": props.disabled,
+            "readonly": props.readonly,
+            "tabindex": "-1",
+            "value": model.value
+          }, null), _createVNode(VSliderTrack, {
+            "ref": trackContainerRef,
+            "start": 0,
+            "stop": trackStop.value
+          }, {
+            'tick-label': slots['tick-label']
+          }), _createVNode(VSliderThumb, {
+            "ref": thumbContainerRef,
+            "focused": isFocused.value,
+            "min": min.value,
+            "max": max.value,
+            "modelValue": model.value,
+            "onUpdate:modelValue": v => model.value = v,
+            "position": trackStop.value,
+            "elevation": props.elevation,
+            "onFocus": focus,
+            "onBlur": blur
+          }, {
+            'thumb-label': slots['thumb-label']
+          })]);
         }
-      }), [this.$createElement('div', content)])])]);
-    },
-
-    genThumb() {
-      return this.$createElement('div', this.setBackgroundColor(this.computedThumbColor, {
-        staticClass: 'v-slider__thumb'
-      }));
-    },
-
-    getThumbContainerStyles(width) {
-      const direction = this.vertical ? 'top' : 'left';
-      let value = this.$vuetify.rtl ? 100 - width : width;
-      value = this.vertical ? 100 - value : value;
-      return {
-        transition: this.trackTransition,
-        [direction]: `${value}%`
-      };
-    },
-
-    onSliderMouseDown(e) {
-      var _e$target;
-
-      e.preventDefault();
-      this.oldValue = this.internalValue;
-      this.isActive = true;
-      const mouseUpOptions = passiveSupported ? {
-        passive: true,
-        capture: true
-      } : true;
-      const mouseMoveOptions = passiveSupported ? {
-        passive: true
-      } : false;
-
-      if ((_e$target = e.target) != null && _e$target.matches('.v-slider__thumb-container, .v-slider__thumb-container *')) {
-        this.thumbPressed = true;
-      } else {
-        window.clearTimeout(this.mouseTimeout);
-        this.mouseTimeout = window.setTimeout(() => {
-          this.thumbPressed = true;
-        }, 300);
-      }
-
-      const isTouchEvent = ('touches' in e);
-      this.onMouseMove(e);
-      this.app.addEventListener(isTouchEvent ? 'touchmove' : 'mousemove', this.onMouseMove, mouseMoveOptions);
-      addOnceEventListener(this.app, isTouchEvent ? 'touchend' : 'mouseup', this.onSliderMouseUp, mouseUpOptions);
-      this.$emit('start', this.internalValue);
-    },
-
-    onSliderMouseUp(e) {
-      e.stopPropagation();
-      window.clearTimeout(this.mouseTimeout);
-      this.thumbPressed = false;
-      const mouseMoveOptions = passiveSupported ? {
-        passive: true
-      } : false;
-      this.app.removeEventListener('touchmove', this.onMouseMove, mouseMoveOptions);
-      this.app.removeEventListener('mousemove', this.onMouseMove, mouseMoveOptions);
-      this.$emit('mouseup', e);
-      this.$emit('end', this.internalValue);
-
-      if (!deepEqual(this.oldValue, this.internalValue)) {
-        this.$emit('change', this.internalValue);
-        this.noClick = true;
-      }
-
-      this.isActive = false;
-    },
-
-    onMouseMove(e) {
-      if (e.type === 'mousemove') {
-        this.thumbPressed = true;
-      }
-
-      this.internalValue = this.parseMouseMove(e);
-    },
-
-    onKeyDown(e) {
-      if (!this.isInteractive) return;
-      const value = this.parseKeyDown(e, this.internalValue);
-      if (value == null || value < this.minValue || value > this.maxValue) return;
-      this.internalValue = value;
-      this.$emit('change', value);
-    },
-
-    onSliderClick(e) {
-      if (this.noClick) {
-        this.noClick = false;
-        return;
-      }
-
-      const thumb = this.$refs.thumb;
-      thumb.focus();
-      this.onMouseMove(e);
-      this.$emit('change', this.internalValue);
-    },
-
-    onBlur(e) {
-      this.isFocused = false;
-      this.$emit('blur', e);
-    },
-
-    onFocus(e) {
-      this.isFocused = true;
-      this.$emit('focus', e);
-    },
-
-    parseMouseMove(e) {
-      const start = this.vertical ? 'top' : 'left';
-      const length = this.vertical ? 'height' : 'width';
-      const click = this.vertical ? 'clientY' : 'clientX';
-      const {
-        [start]: trackStart,
-        [length]: trackLength
-      } = this.$refs.track.getBoundingClientRect();
-      const clickOffset = 'touches' in e ? e.touches[0][click] : e[click]; // Can we get rid of any here?
-      // It is possible for left to be NaN, force to number
-
-      let clickPos = Math.min(Math.max((clickOffset - trackStart) / trackLength, 0), 1) || 0;
-      if (this.vertical) clickPos = 1 - clickPos;
-      if (this.$vuetify.rtl) clickPos = 1 - clickPos;
-      return parseFloat(this.min) + clickPos * (this.maxValue - this.minValue);
-    },
-
-    parseKeyDown(e, value) {
-      if (!this.isInteractive) return;
-      const {
-        pageup,
-        pagedown,
-        end,
-        home,
-        left,
-        right,
-        down,
-        up
-      } = keyCodes;
-      if (![pageup, pagedown, end, home, left, right, down, up].includes(e.keyCode)) return;
-      e.preventDefault();
-      const step = this.stepNumeric || 1;
-      const steps = (this.maxValue - this.minValue) / step;
-
-      if ([left, right, down, up].includes(e.keyCode)) {
-        const increase = this.$vuetify.rtl ? [left, up] : [right, up];
-        const direction = increase.includes(e.keyCode) ? 1 : -1;
-        const multiplier = e.shiftKey ? 3 : e.ctrlKey ? 2 : 1;
-        value = value + direction * step * multiplier;
-      } else if (e.keyCode === home) {
-        value = this.minValue;
-      } else if (e.keyCode === end) {
-        value = this.maxValue;
-      } else {
-        const direction = e.keyCode === pagedown ? 1 : -1;
-        value = value - direction * step * (steps > 100 ? steps / 10 : 10);
-      }
-
-      return value;
-    },
-
-    roundValue(value) {
-      if (!this.stepNumeric) return value; // Format input value using the same number
-      // of decimals places as in the step prop
-
-      const trimmedStep = this.step.toString().trim();
-      const decimals = trimmedStep.indexOf('.') > -1 ? trimmedStep.length - trimmedStep.indexOf('.') - 1 : 0;
-      const offset = this.minValue % this.stepNumeric;
-      const newValue = Math.round((value - offset) / this.stepNumeric) * this.stepNumeric + offset;
-      return parseFloat(Math.min(newValue, this.maxValue).toFixed(decimals));
-    }
-
+      });
+    };
   }
+
 });
 //# sourceMappingURL=VSlider.mjs.map