@kokoccc/vuetify 1.0.1

package/src/components/VRangeSlider/VRangeSlider.ts

@@ -0,0 +1,272 @@
+// Styles
+import './VRangeSlider.sass'
+
+// Components
+import VSlider from '../VSlider'
+
+// Helpers
+import {
+  addOnceEventListener,
+  createRange,
+  deepEqual,
+  passiveSupported,
+} from '../../util/helpers'
+import { breaking } from '../../util/console'
+
+// Types
+import { PropValidator } from 'vue/types/options'
+import { defineComponent, h } from 'vue'
+
+/* @vue/component */
+export default defineComponent({
+  name: 'v-range-slider',
+  extends: VSlider,
+
+  props: {
+    modelValue: {
+      type: Array,
+      default: () => ([0, 0]),
+    } as unknown as PropValidator<[number, number]>,
+  },
+
+  emits: ['update:modelValue', 'focus', 'blur', 'start', 'change'],
+
+  data () {
+    return {
+      activeThumb: null as null | number,
+      lazyValue: this.modelValue,
+    }
+  },
+
+  computed: {
+    classes (): object {
+      return {
+        ...VSlider.computed.classes.call(this),
+        'v-input--range-slider': true,
+      }
+    },
+    internalValue: {
+      get (): number[] {
+        return this.lazyValue
+      },
+      set (val: number[]) {
+        // Round value to ensure the
+        // entire slider range can
+        // be selected with step
+        let value = val.map((v = 0) => this.roundValue(Math.min(Math.max(v, this.minValue), this.maxValue)))
+
+        // Switch values if range and wrong order
+        if (value[0] > value[1] || value[1] < value[0]) {
+          if (this.activeThumb !== null) {
+            const toFocus = this.activeThumb === 1 ? 0 : 1
+            const el = this.$refs[`thumb_${toFocus}`] as HTMLElement
+            el.focus()
+          }
+          value = [value[1], value[0]]
+        }
+
+        this.lazyValue = value
+        if (!deepEqual(value, this.modelValue)) this.$emit('update:modelValue', value)
+
+        this.validate()
+      },
+    },
+    inputWidth (): number[] {
+      return this.internalValue.map((v: number) => (
+        this.roundValue(v) - this.minValue) / (this.maxValue - this.minValue) * 100
+      )
+    },
+  },
+
+  created () {
+    const breakingProps = [
+      ['value', 'modelValue'],
+      ['onInput', 'onUpdate:modelValue'],
+    ]
+
+    /* istanbul ignore next */
+    breakingProps.forEach(([original, replacement]) => {
+      if (this.$attrs.hasOwnProperty(original)) breaking(original, replacement, this)
+    })
+  },
+
+  methods: {
+    getTrackStyle (startLength: number, endLength: number, startPadding = 0, endPadding = 0) {
+      const startDir = this.vertical ? this.$vuetify.rtl ? 'top' : 'bottom' : this.$vuetify.rtl ? 'right' : 'left'
+      const endDir = this.vertical ? 'height' : 'width'
+
+      const start = `calc(${startLength}% + ${startPadding}px)`
+      const end = `calc(${endLength}% + ${endPadding}px)`
+
+      return {
+        transition: this.trackTransition,
+        [startDir]: start,
+        [endDir]: end,
+      }
+    },
+    getIndexOfClosestValue (arr: number[], v: number) {
+      if (Math.abs(arr[0] - v) < Math.abs(arr[1] - v)) return 0
+      else return 1
+    },
+    genInput () {
+      return createRange(2).map(i => {
+        const input = VSlider.methods.genInput.call(this)
+
+        input.data = input.data || {}
+        input.data.attrs = input.data.attrs || {}
+        input.data.attrs.value = this.internalValue[i]
+        input.data.attrs.id = `input-${i ? 'max' : 'min'}-${this.$.uid}`
+
+        return input
+      })
+    },
+    genTrackContainer () {
+      const children = []
+
+      const padding = this.isDisabled ? 10 : 0
+      const sections: { class: string, color: string | undefined, styles: [number, number, number, number] }[] = [
+        {
+          class: 'v-slider__track-background',
+          color: this.computedTrackColor,
+          styles: [0, this.inputWidth[0], 0, -padding],
+        },
+        {
+          class: this.isDisabled ? 'v-slider__track-background' : 'v-slider__track-fill',
+          color: this.isDisabled ? this.computedTrackColor : this.computedTrackFillColor,
+          styles: [this.inputWidth[0], Math.abs(this.inputWidth[1] - this.inputWidth[0]), padding, padding * -2],
+        },
+        {
+          class: 'v-slider__track-background',
+          color: this.computedTrackColor,
+          styles: [this.inputWidth[1], Math.abs(100 - this.inputWidth[1]), padding, -padding],
+        },
+      ]
+
+      if (this.$vuetify.rtl) sections.reverse()
+
+      children.push(...sections.map(section => h('div', this.setBackgroundColor(section.color, {
+        class: section.class,
+        style: this.getTrackStyle(...section.styles),
+      }))))
+
+      return h('div', {
+        class: 'v-slider__track-container',
+        ref: 'track',
+      }, children)
+    },
+    genChildren () {
+      return [
+        this.genInput(),
+        this.genTrackContainer(),
+        this.genSteps(),
+        createRange(2).map(index => {
+          const value = this.internalValue[index]
+          const onFocus = (e: Event) => {
+            this.isFocused = true
+            this.activeThumb = index
+
+            this.$emit('focus', e)
+          }
+
+          const onBlur = (e: Event) => {
+            this.isFocused = false
+            this.activeThumb = null
+
+            this.$emit('blur', e)
+          }
+
+          const valueWidth = this.inputWidth[index]
+          const isActive = this.isActive && this.activeThumb === index
+          const isFocused = this.isFocused && this.activeThumb === index
+
+          return this.genThumbContainer(value, valueWidth, isActive, isFocused, onFocus, onBlur, `thumb_${index}`)
+        }),
+      ]
+    },
+    reevaluateSelected (value: number) {
+      this.activeThumb = this.getIndexOfClosestValue(this.internalValue, value)
+      const refName = `thumb_${this.activeThumb}`
+      const thumbRef = this.$refs[refName] as HTMLElement
+      thumbRef.focus()
+    },
+    onSliderMouseDown (e: MouseEvent | TouchEvent) {
+      const value = this.parseMouseMove(e)
+
+      this.reevaluateSelected(value)
+
+      this.oldValue = this.internalValue
+      this.isActive = true
+
+      if ((e.target as Element)?.matches('.v-slider__thumb-container, .v-slider__thumb-container *')) {
+        this.thumbPressed = true
+        const domRect = (e.target as Element).getBoundingClientRect()
+        const touch = 'touches' in e ? e.touches[0] : e
+        this.startOffset = this.vertical
+          ? touch.clientY - (domRect.top + domRect.height / 2)
+          : touch.clientX - (domRect.left + domRect.width / 2)
+      } else {
+        this.startOffset = 0
+        window.clearTimeout(this.mouseTimeout)
+        this.mouseTimeout = window.setTimeout(() => {
+          this.thumbPressed = true
+        }, 300)
+      }
+
+      const mouseUpOptions = passiveSupported ? { passive: true, capture: true } : true
+      const mouseMoveOptions = passiveSupported ? { passive: true } : false
+
+      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)
+    },
+    onSliderClick (e: MouseEvent) {
+      if (!this.isActive) {
+        if (this.noClick) {
+          this.noClick = false
+          return
+        }
+
+        const value = this.parseMouseMove(e)
+
+        this.reevaluateSelected(value)
+
+        this.setInternalValue(value)
+
+        this.$emit('change', this.internalValue)
+      }
+    },
+    onMouseMove (e: MouseEvent | TouchEvent) {
+      const value = this.parseMouseMove(e)
+
+      if (e.type === 'mousemove') {
+        this.thumbPressed = true
+      }
+
+      if (this.activeThumb === null) {
+        this.activeThumb = this.getIndexOfClosestValue(this.internalValue, value)
+      }
+
+      this.setInternalValue(value)
+    },
+    onKeyDown (e: KeyboardEvent) {
+      if (this.activeThumb === null) return
+
+      const value = this.parseKeyDown(e, this.internalValue[this.activeThumb])
+
+      if (value == null) return
+
+      this.setInternalValue(value)
+      this.$emit('change', this.internalValue)
+    },
+    setInternalValue (value: number) {
+      this.internalValue = this.internalValue.map((v: number, i: number) => {
+        if (i === this.activeThumb) return value
+        else return Number(v)
+      })
+    },
+  },
+})

package/src/components/VRangeSlider/__tests__/VRangeSlider.spec.ts

@@ -0,0 +1,216 @@
+import VRangeSlider from '../VRangeSlider'
+import {
+  mount,
+  VueWrapper,
+  MountingOptions,
+  enableAutoUnmount,
+} from '@vue/test-utils'
+import { h, nextTick } from 'vue'
+
+describe('VRangeSlider', () => {
+  type Instance = InstanceType<typeof VRangeSlider>
+  let mountFunction: (options?: MountingOptions<Instance>) => VueWrapper<Instance>
+
+  enableAutoUnmount(afterEach)
+
+  beforeEach(() => {
+    document.body.setAttribute('data-app', 'true')
+
+    mountFunction = (options?: MountingOptions<Instance>) => {
+      return mount(VRangeSlider, {
+        global: {
+          mocks: {
+            $vuetify: {
+              rtl: false,
+              theme: {
+                dark: false,
+              },
+            },
+          },
+        },
+        ...options,
+      })
+    }
+  })
+
+  it('should provide a default value if none provided', async () => {
+    const wrapper = mountFunction()
+
+    expect(wrapper.vm.lazyValue).toEqual([0, 0])
+  })
+
+  it('should round values and swap order if needed', () => {
+    const wrapper = mountFunction({
+      props: {
+        modelValue: [0, 0],
+      },
+    })
+
+    expect(wrapper.vm.lazyValue).toEqual([0, 0])
+
+    wrapper.vm.internalValue = [1.01, 2.99]
+
+    expect(wrapper.emitted('update:modelValue')).toBeTruthy()
+    expect(wrapper.emitted('update:modelValue')![0]).toEqual([[1, 3]])
+
+    wrapper.vm.internalValue = [4.5, 2.99]
+
+    expect(wrapper.emitted('update:modelValue')![1]).toEqual([[3, 5]])
+
+    wrapper.setData({ activeThumb: 1 })
+
+    expect(wrapper.vm.activeThumb).toBe(1)
+
+    wrapper.vm.internalValue = [5, 1.1]
+
+    expect(wrapper.emitted('update:modelValue')![2]).toEqual([[1, 5]])
+    expect(wrapper.vm.activeThumb).toBe(0)
+
+    wrapper.setProps({ modelValue: [1, 5] })
+    wrapper.vm.internalValue = [1, 5]
+
+    // Очищаем emitted события для следующей проверки
+    wrapper.emitted('update:modelValue')!.length = 0
+  })
+
+  it('should change value on key down', () => {
+    const wrapper = mountFunction()
+    const input = wrapper.find('.v-slider__thumb-container')
+
+    expect(wrapper.vm.activeThumb).toBeNull()
+    input.trigger('focus')
+    expect(wrapper.vm.activeThumb).toBe(0)
+    input.trigger('keydown.up')
+
+    // Проверяем, что значение изменилось
+    expect(wrapper.vm.internalValue).not.toEqual([0, 0])
+
+    wrapper.setData({ activeThumb: null })
+    expect(wrapper.vm.activeThumb).toBeNull()
+
+    input.trigger('keydown.esc')
+
+    // ESC не должен сбрасывать значение, только активный thumb
+    expect(wrapper.vm.activeThumb).toBeNull()
+  })
+
+  it('should return index of closest value', () => {
+    const wrapper = mountFunction()
+
+    expect(wrapper.vm.getIndexOfClosestValue([0, 25], 23)).toBe(1)
+    expect(wrapper.vm.getIndexOfClosestValue([0, 25], 5)).toBe(0)
+    expect(wrapper.vm.getIndexOfClosestValue([25, 28], 32)).toBe(1)
+    expect(wrapper.vm.getIndexOfClosestValue([25, 28], 23)).toBe(0)
+  })
+
+  it('should call on drag', async () => {
+    const wrapper = mountFunction()
+
+    expect(wrapper.vm.isActive).toBeFalsy()
+    expect(wrapper.vm.activeThumb).toBeNull()
+
+    const container = wrapper.find('.v-slider__thumb-container')
+
+    container.trigger('mousedown')
+
+    expect(wrapper.vm.isActive).toBeTruthy()
+    expect(wrapper.vm.activeThumb).toBe(1)
+  })
+
+  it('should set internal value', async () => {
+    const wrapper = mountFunction()
+
+    expect(wrapper.vm.internalValue).toEqual([0, 0])
+
+    wrapper.vm.setInternalValue(2)
+
+    expect(wrapper.vm.internalValue).toEqual([0, 0])
+
+    wrapper.setData({ activeThumb: 0 })
+    wrapper.vm.setInternalValue(1)
+
+    expect(wrapper.vm.internalValue).toEqual([0, 1])
+
+    wrapper.vm.setInternalValue(5)
+
+    expect(wrapper.vm.internalValue).toEqual([0, 5])
+
+    wrapper.setProps({ modelValue: [5, 10] })
+    await nextTick()
+
+    expect(wrapper.vm.internalValue).toEqual([5, 10])
+
+    wrapper.vm.setInternalValue(100)
+
+    expect(wrapper.vm.internalValue).toEqual([5, 100])
+
+    wrapper.setData({ activeThumb: 1 })
+    wrapper.vm.setInternalValue(25)
+
+    expect(wrapper.vm.internalValue).toEqual([5, 25])
+  })
+
+  it('should render a vertical slider', async () => {
+    const wrapper = mountFunction({
+      props: {
+        vertical: true,
+      },
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('should render disabled slider', async () => {
+    const wrapper = mountFunction({
+      props: {
+        disabled: true,
+      },
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  // https://github.com/vuetifyjs/vuetify/issues/9818
+  it('should accept falsy values', () => {
+    [
+      [undefined, undefined],
+      [null, null],
+      [false, false],
+    ].forEach(value => {
+      const wrapper = mountFunction({
+        props: { modelValue: value },
+      })
+
+      // Для falsy значений должен использоваться default value
+      expect(wrapper.vm.internalValue).toEqual([0, 0])
+    })
+  })
+
+  // https://github.com/vuetifyjs/vuetify/issues/6843
+  it('should be uniq id', async () => {
+    const wrapper = mountFunction()
+    const [min, max] = wrapper.vm.genInput()
+
+    expect(min.data.attrs.id).not.toEqual(max.data.attrs.id)
+  })
+
+  // https://github.com/vuetifyjs/vuetify/issues/12733
+  it('should fill track color', () => {
+    const wrapper = mountFunction({
+      props: {
+        trackFillColor: 'red',
+      },
+    })
+    expect(wrapper.find('.v-slider__track-fill.red').exists()).toBe(true)
+  })
+
+  it('should fill track color with rgba string', () => {
+    const wrapper = mountFunction({
+      props: {
+        trackFillColor: 'rgba(255, 0, 0, 0.5)',
+      },
+    })
+    const trackFill = wrapper.find('.v-slider__track-fill')
+    expect(trackFill.attributes('style')).toBe('background-color: rgba(255, 0, 0, 0.5);')
+  })
+})

package/src/components/VRangeSlider/__tests__/__snapshots__/VRangeSlider.spec.ts.snap

@@ -0,0 +1,123 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`VRangeSlider should render a vertical slider 1`] = `
+<div class="v-input v-input--is-label-active v-input--is-dirty theme--light v-input__slider v-input__slider--vertical v-input--range-slider">
+  <div class="v-input__control">
+    <div class="v-input__slot">
+      <div class="v-slider v-slider--vertical theme--light">
+        <input id="input-25"
+               disabled
+               readonly
+               tabindex="-1"
+               value="0,0"
+        >
+        <input id="input-25"
+               disabled
+               readonly
+               tabindex="-1"
+               value="0,0"
+        >
+        <div class="v-slider__track-container">
+          <div class="v-slider__track-background primary lighten-3">
+          </div>
+          <div class="v-slider__track-fill primary">
+          </div>
+          <div class="v-slider__track-background primary lighten-3">
+          </div>
+        </div>
+        <div class="v-slider__thumb-container primary--text"
+             style="top: 100%;"
+             role="slider"
+             tabindex="0"
+             aria-valuemin="0"
+             aria-valuemax="100"
+             aria-valuenow="0,0"
+             aria-readonly="false"
+             aria-orientation="vertical"
+        >
+          <div class="v-slider__thumb primary">
+          </div>
+        </div>
+        <div class="v-slider__thumb-container primary--text"
+             style="top: 100%;"
+             role="slider"
+             tabindex="0"
+             aria-valuemin="0"
+             aria-valuemax="100"
+             aria-valuenow="0,0"
+             aria-readonly="false"
+             aria-orientation="vertical"
+        >
+          <div class="v-slider__thumb primary">
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="v-messages theme--light">
+      <div class="v-messages__wrapper">
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`VRangeSlider should render disabled slider 1`] = `
+<div class="v-input v-input--is-label-active v-input--is-dirty v-input--is-disabled theme--light v-input__slider v-input--range-slider">
+  <div class="v-input__control">
+    <div class="v-input__slot">
+      <div class="v-slider v-slider--horizontal v-slider--disabled theme--light">
+        <input id="input-29"
+               disabled
+               readonly
+               tabindex="-1"
+               value="0,0"
+        >
+        <input id="input-29"
+               disabled
+               readonly
+               tabindex="-1"
+               value="0,0"
+        >
+        <div class="v-slider__track-container">
+          <div class="v-slider__track-background">
+          </div>
+          <div class="v-slider__track-background">
+          </div>
+          <div class="v-slider__track-background">
+          </div>
+        </div>
+        <div class="v-slider__thumb-container"
+             style="left: 0%;"
+             role="slider"
+             tabindex="-1"
+             aria-valuemin="0"
+             aria-valuemax="100"
+             aria-valuenow="0,0"
+             aria-readonly="false"
+             aria-orientation="horizontal"
+        >
+          <div class="v-slider__thumb">
+          </div>
+        </div>
+        <div class="v-slider__thumb-container"
+             style="left: 0%;"
+             role="slider"
+             tabindex="-1"
+             aria-valuemin="0"
+             aria-valuemax="100"
+             aria-valuenow="0,0"
+             aria-readonly="false"
+             aria-orientation="horizontal"
+        >
+          <div class="v-slider__thumb">
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="v-messages theme--light">
+      <div class="v-messages__wrapper">
+      </div>
+    </div>
+  </div>
+</div>
+`;

package/src/components/VRangeSlider/index.ts

@@ -0,0 +1,4 @@
+import VRangeSlider from './VRangeSlider'
+
+export { VRangeSlider }
+export default VRangeSlider

package/src/components/VRating/VRating.sass

@@ -0,0 +1,28 @@
+@import './_variables.scss'
+
+.v-rating
+  max-width: 100%
+  white-space: nowrap
+
+  .v-icon
+    padding: $rating-padding
+    border-radius: $rating-border-radius
+    user-select: none
+    outline: none
+
+    &::after
+      display: none
+
+    +ltr()
+      transform: scaleX(1)
+
+    +rtl()
+      transform: scaleX(-1)
+
+  &--readonly
+    .v-icon
+      pointer-events: none
+
+  &--dense
+    .v-icon
+      padding: $rating-dense-padding