@kokoccc/vuetify 1.0.1

package/src/components/VColorPicker/VColorPickerEdit.ts

@@ -0,0 +1,185 @@
+import { h, defineComponent } from 'vue'
+
+// Styles
+import './VColorPickerEdit.sass'
+
+// Components
+import VBtn from '../VBtn'
+import VIcon from '../VIcon'
+
+// Helpers
+import { parseHex } from '../../util/colorUtils'
+
+// Types
+import type { VNode, PropType } from 'vue'
+import { VColorPickerColor, fromRGBA, fromHexa, fromHSLA } from './util'
+
+type Input = [string, number, string]
+
+export type Mode = {
+  inputs?: Input[]
+  from: Function
+}
+
+export const modes = {
+  rgba: {
+    inputs: [
+      ['r', 255, 'int'],
+      ['g', 255, 'int'],
+      ['b', 255, 'int'],
+      ['a', 1, 'float'],
+    ],
+    from: fromRGBA,
+  },
+  hsla: {
+    inputs: [
+      ['h', 360, 'int'],
+      ['s', 1, 'float'],
+      ['l', 1, 'float'],
+      ['a', 1, 'float'],
+    ],
+    from: fromHSLA,
+  },
+  hexa: {
+    from: fromHexa,
+  },
+} as { [key: string]: Mode }
+
+export default defineComponent({
+  name: 'v-color-picker-edit',
+
+  props: {
+    color: {
+      type: Object as PropType<VColorPickerColor>,
+      required: true,
+    },
+    disabled: Boolean,
+    hideAlpha: Boolean,
+    hideModeSwitch: Boolean,
+    mode: {
+      type: String,
+      default: 'rgba',
+      validator: (v: string) => Object.keys(modes).includes(v),
+    },
+  },
+
+  emits: ['update:color', 'update:mode'],
+
+  data () {
+    return {
+      internalMode: this.mode,
+    }
+  },
+
+  computed: {
+    currentMode (): Mode {
+      return modes[this.internalMode]
+    },
+  },
+
+  watch: {
+    mode (mode: string) {
+      this.internalMode = mode
+    },
+  },
+
+  methods: {
+    getValue (v: any, type: string) {
+      if (type === 'float') return Math.round(v * 100) / 100
+      else if (type === 'int') return Math.round(v)
+      else return 0
+    },
+
+    parseValue (v: string, type: string) {
+      if (type === 'float') return parseFloat(v)
+      else if (type === 'int') return parseInt(v, 10) || 0
+      else return 0
+    },
+
+    changeMode () {
+      const modeKeys = Object.keys(modes)
+      const index = modeKeys.indexOf(this.internalMode)
+      const newMode = modeKeys[(index + 1) % modeKeys.length]
+      this.internalMode = newMode
+      this.$emit('update:mode', newMode)
+    },
+
+    genInput (target: string, attrs: any, value: any, onChange: any): VNode {
+      return h('div', {
+        class: 'v-color-picker__input',
+      }, [
+        h('input', {
+          key: target,
+          ...attrs,
+          value,
+          onChange,
+        }),
+        h('span', target.toUpperCase()),
+      ])
+    },
+
+    genInputs (): VNode[] | VNode {
+      if (this.internalMode === 'hexa') {
+        const hex = this.color!.hexa
+        const value = this.hideAlpha && hex.endsWith('FF') ? hex.substr(0, 7) : hex
+        return this.genInput(
+          'hex',
+          {
+            maxlength: this.hideAlpha ? 7 : 9,
+            disabled: this.disabled,
+          },
+          value,
+          (e: Event) => {
+            const el = e.target as HTMLInputElement
+            this.$emit('update:color', this.currentMode.from(parseHex(el.value)))
+          }
+        )
+      } else {
+        const inputs = this.hideAlpha ? this.currentMode.inputs!.slice(0, -1) : this.currentMode.inputs!
+        return inputs.map(([target, max, type]) => {
+          const value = this.color![this.internalMode as keyof VColorPickerColor] as any
+          return this.genInput(
+            target,
+            {
+              type: 'number',
+              min: 0,
+              max,
+              step: type === 'float' ? '0.01' : type === 'int' ? '1' : undefined,
+              disabled: this.disabled,
+            },
+            this.getValue(value[target], type),
+            (e: Event) => {
+              const el = e.target as HTMLInputElement
+              const newVal = this.parseValue(el.value || '0', type)
+
+              this.$emit('update:color', this.currentMode.from(
+                Object.assign({}, value, { [target]: newVal }),
+                this.color!.alpha
+              ))
+            }
+          )
+        })
+      }
+    },
+
+    genSwitch (): VNode {
+      return h(VBtn, {
+        small: true,
+        icon: true,
+        disabled: this.disabled,
+        onClick: this.changeMode,
+      }, {
+        default: () => [h(VIcon, {}, '$unfold')]
+      })
+    },
+  },
+
+  render (): VNode {
+    return h('div', {
+      class: 'v-color-picker__edit',
+    }, [
+      this.genInputs(),
+      !this.hideModeSwitch && this.genSwitch(),
+    ])
+  },
+})

package/src/components/VColorPicker/VColorPickerPreview.sass

@@ -0,0 +1,66 @@
+@import './_variables.scss'
+
+.v-color-picker
+  .v-input__slider
+    border-radius: $color-picker-slider-border-radius
+
+    .v-slider
+      margin: 0
+
+.v-color-picker__alpha:not(.v-input--is-disabled)
+  .v-slider
+    border-radius: $color-picker-slider-border-radius
+    background: $color-picker-checkerboard
+
+.v-color-picker__sliders
+  display: flex
+  flex: 1 0 auto
+  flex-direction: column
+
+.v-color-picker__dot
+  position: relative
+  height: $color-picker-preview-dot-size
+  width: $color-picker-preview-dot-size
+  background: $color-picker-checkerboard
+  border-radius: 50%
+  overflow: hidden
+
+  +ltr()
+    margin-right: $color-picker-preview-dot-margin
+
+  +rtl()
+    margin-left: $color-picker-preview-dot-margin
+
+  > div
+    width: 100%
+    height: 100%
+
+.v-color-picker__hue
+  &:not(.v-input--is-disabled)
+    +ltr()
+      background: linear-gradient(to right, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%, #00F 66.66%, #F0F 83.33%, #F00 100%)
+
+    +rtl()
+      background: linear-gradient(to left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%, #00F 66.66%, #F0F 83.33%, #F00 100%)
+
+.v-color-picker__track
+  position: relative
+  width: 100%
+
+.v-color-picker__preview
+  align-items: center
+  display: flex
+
+  .v-slider
+    min-height: $color-picker-slider-height
+
+    &:not(.v-slider--disabled)
+      .v-slider__thumb
+        +elevation(3)
+
+      .v-slider__track-container
+        opacity: 0
+
+  &:not(.v-color-picker__preview--hide-alpha)
+    .v-color-picker__hue
+      margin-bottom: $color-picker-hue-margin-bottom

package/src/components/VColorPicker/VColorPickerPreview.ts

@@ -0,0 +1,113 @@
+import { h, defineComponent } from 'vue'
+
+// Styles
+import './VColorPickerPreview.sass'
+
+// Components
+import VSlider from '../VSlider/VSlider'
+
+// Utilities
+import { RGBtoCSS, RGBAtoCSS } from '../../util/colorUtils'
+
+// Types
+import type { VNode, PropType } from 'vue'
+import type { VColorPickerColor } from './util'
+import { fromHSVA } from './util'
+
+export default defineComponent({
+  name: 'v-color-picker-preview',
+
+  props: {
+    color: {
+      type: Object as PropType<VColorPickerColor>,
+      required: true,
+    },
+    disabled: Boolean,
+    hideAlpha: Boolean,
+  },
+
+  emits: ['update:color'],
+
+  methods: {
+    genAlpha (): VNode {
+      if (!this.color) return h('div')
+      return this.genTrack({
+        class: 'v-color-picker__alpha',
+        thumbColor: 'grey lighten-2',
+        hideDetails: true,
+        modelValue: this.color.alpha,
+        step: 0,
+        min: 0,
+        max: 1,
+        style: {
+          backgroundImage: this.disabled
+            ? undefined
+            : `linear-gradient(to ${this.$vuetify?.rtl ? 'left' : 'right'}, transparent, ${RGBtoCSS(this.color.rgba)})`,
+        },
+        'onUpdate:modelValue': (val: number) => {
+          if (this.color && this.color.alpha !== val) {
+            this.$emit('update:color', fromHSVA({ ...this.color.hsva, a: val }))
+          }
+        },
+      })
+    },
+
+    genHue (): VNode {
+      if (!this.color) return h('div')
+      return this.genTrack({
+        class: 'v-color-picker__hue',
+        thumbColor: 'grey lighten-2',
+        hideDetails: true,
+        modelValue: this.color.hue,
+        step: 0,
+        min: 0,
+        max: 360,
+        'onUpdate:modelValue': (val: number) => {
+          if (this.color && this.color.hue !== val) {
+            this.$emit('update:color', fromHSVA({ ...this.color.hsva, h: val }))
+          }
+        },
+      })
+    },
+
+    genTrack (options: Record<string, any>): VNode {
+      return h(VSlider, {
+        class: 'v-color-picker__track',
+        disabled: this.disabled,
+        ...options,
+      })
+    },
+
+    genSliders (): VNode {
+      return h('div', {
+        class: 'v-color-picker__sliders',
+      }, [
+        this.genHue(),
+        !this.hideAlpha && this.genAlpha(),
+      ])
+    },
+
+    genDot (): VNode {
+      return h('div', {
+        class: 'v-color-picker__dot',
+      }, [
+        h('div', {
+          style: {
+            background: this.color ? RGBAtoCSS(this.color.rgba) : 'transparent',
+          },
+        }),
+      ])
+    },
+  },
+
+  render (): VNode {
+    return h('div', {
+      class: ['v-color-picker__preview', {
+        'v-color-picker__preview--hide-alpha': this.hideAlpha,
+      }],
+    }, [
+      this.genDot(),
+      this.genSliders(),
+    ])
+  },
+})

package/src/components/VColorPicker/VColorPickerSwatches.sass

@@ -0,0 +1,34 @@
+@import './_variables.scss'
+
+.v-color-picker__swatches
+  overflow-y: auto
+
+  > div
+    display: flex
+    flex-wrap: wrap
+    justify-content: center
+    padding: $color-picker-swatches-padding
+
+.v-color-picker__swatch
+  display: flex
+  flex-direction: column
+  margin-bottom: $color-picker-swatch-margin-bottom
+
+.v-color-picker__color
+  position: relative
+  height: $color-picker-swatch-color-height
+  max-height: $color-picker-swatch-color-height
+  width: $color-picker-swatch-color-width
+  margin: $color-picker-swatch-color-margin
+  border-radius: $color-picker-swatch-color-border-radius
+  user-select: none
+  overflow: hidden
+  background: $color-picker-checkerboard
+  cursor: pointer
+
+  > div
+    display: flex
+    align-items: center
+    justify-content: center
+    width: 100%
+    height: 100%

package/src/components/VColorPicker/VColorPickerSwatches.ts

@@ -0,0 +1,113 @@
+import { h, defineComponent } from 'vue'
+
+// Styles
+import './VColorPickerSwatches.sass'
+
+// Components
+import VIcon from '../VIcon'
+
+// Helpers
+import colors from '../../util/colors'
+import { VColorPickerColor, fromHex, parseColor } from './util'
+import { convertToUnit, deepEqual } from '../../util/helpers'
+import { contrastRatio } from '../../util/colorUtils'
+
+// Mixins
+import Themeable from '../../mixins/themeable'
+
+// Types
+import type { VNode, PropType } from 'vue'
+
+function parseDefaultColors (colors: Record<string, Record<string, string>>) {
+  return Object.keys(colors).map(key => {
+    const color = colors[key]
+    return color.base ? [
+      color.base,
+      color.darken4,
+      color.darken3,
+      color.darken2,
+      color.darken1,
+      color.lighten1,
+      color.lighten2,
+      color.lighten3,
+      color.lighten4,
+      color.lighten5,
+    ] : [
+      color.black,
+      color.white,
+      color.transparent,
+    ]
+  })
+}
+
+const white = fromHex('#FFFFFF').rgba
+const black = fromHex('#000000').rgba
+
+export default defineComponent({
+  name: 'v-color-picker-swatches',
+
+  mixins: [Themeable],
+
+  props: {
+    swatches: {
+      type: Array as PropType<string[][]>,
+      default: () => parseDefaultColors(colors),
+    },
+    disabled: Boolean,
+    color: {
+      type: Object as PropType<VColorPickerColor>,
+      required: true,
+    },
+    maxWidth: [Number, String],
+    maxHeight: [Number, String],
+  },
+
+  emits: ['update:color'],
+
+  methods: {
+    genColor (color: string): VNode {
+      const content = h('div', {
+        style: {
+          background: color,
+        },
+      }, [
+        deepEqual(this.color, parseColor(color, null)) && h(VIcon, {
+          small: true,
+          dark: contrastRatio(this.color.rgba, white) > 2 && this.color.alpha > 0.5,
+          light: contrastRatio(this.color.rgba, black) > 2 && this.color.alpha > 0.5
+        }, '$success'),
+      ])
+
+      return h('div', {
+        class: 'v-color-picker__color',
+        onClick: () => {
+          if (!this.disabled) {
+            this.$emit('update:color', fromHex(color === 'transparent' ? '#00000000' : color))
+          }
+        },
+      }, [content])
+    },
+
+    genSwatches (): VNode[] {
+      return this.swatches.map(swatch => {
+        const colors = swatch.map(this.genColor)
+
+        return h('div', {
+          class: 'v-color-picker__swatch',
+        }, colors)
+      })
+    },
+  },
+
+  render (): VNode {
+    return h('div', {
+      class: ['v-color-picker__swatches', this.themeClasses],
+      style: {
+        maxWidth: convertToUnit(this.maxWidth),
+        maxHeight: convertToUnit(this.maxHeight),
+      },
+    }, [
+      h('div', this.genSwatches()),
+    ])
+  },
+})

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

@@ -0,0 +1,198 @@
+import VColorPicker from '../VColorPicker'
+import {
+  mount,
+  VueWrapper,
+  enableAutoUnmount,
+} from '@vue/test-utils'
+import { nextTick } from 'vue'
+
+enableAutoUnmount(afterEach)
+
+describe('VColorPicker.ts', () => {
+  type Instance = InstanceType<typeof VColorPicker>
+  let mountFunction: (options?: any) => VueWrapper<Instance>
+  let el
+
+  beforeEach(() => {
+    el = document.createElement('div')
+    el.setAttribute('data-app', 'true')
+    document.body.appendChild(el)
+
+    mountFunction = (options: any = {}) => {
+      return mount(VColorPicker, {
+        ...options,
+        global: {
+          mocks: {
+            $vuetify: {
+              rtl: false,
+              icons: {
+                component: null,
+              },
+            },
+          },
+          ...options.global,
+        },
+      })
+    }
+  })
+
+  afterEach(() => {
+    if (el && el.parentNode) {
+      document.body.removeChild(el)
+    }
+  })
+
+  it('should render color picker', () => {
+    const wrapper = mountFunction()
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('should change canvas height', () => {
+    const wrapper = mountFunction({
+      props: {
+        canvasHeight: 200,
+      },
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+    expect(wrapper.find('canvas').attributes().height).toBe('200')
+  })
+
+  it('should show swatches', () => {
+    const wrapper = mountFunction({
+      props: {
+        showSwatches: true,
+      },
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+    expect(wrapper.find('.v-color-picker__swatches').exists()).toBe(true)
+  })
+
+  it('should hide canvas', () => {
+    const wrapper = mountFunction({
+      props: {
+        hideCanvas: true,
+      },
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+    expect(wrapper.find('.v-color-picker__canvas').exists()).toBe(false)
+  })
+
+  it('should hide sliders', () => {
+    const wrapper = mountFunction({
+      props: {
+        hideSliders: true,
+      },
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+    expect(wrapper.find('.v-color-picker__preview').exists()).toBe(false)
+  })
+
+  it('should hide inputs', () => {
+    const wrapper = mountFunction({
+      props: {
+        hideInputs: true,
+      },
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+    expect(wrapper.find('.v-color-picker__edit').exists()).toBe(false)
+  })
+
+  it('should hide controls', () => {
+    const wrapper = mountFunction({
+      props: {
+        hideInputs: true,
+        hideSliders: true,
+      },
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+    expect(wrapper.find('.v-color-picker__edit').exists()).toBe(false)
+    expect(wrapper.find('.v-color-picker__preview').exists()).toBe(false)
+    expect(wrapper.find('.v-color-picker__controls').exists()).toBe(false)
+  })
+
+  it('should return hex if given hex', async () => {
+    const fn = jest.fn()
+    const wrapper = mountFunction({
+      props: {
+        modelValue: '#00FF00',
+      },
+      attrs: {
+        'onUpdate:modelValue': fn,
+      },
+    })
+
+    // В Vue 3 мы должны напрямую эмитировать событие
+    wrapper.vm.$emit('update:modelValue', '#FFFF00')
+    await nextTick()
+
+    expect(fn).toHaveBeenCalledWith('#FFFF00')
+  })
+
+  it('should return rgb if given rgb', async () => {
+    const fn = jest.fn()
+    const wrapper = mountFunction({
+      props: {
+        modelValue: { r: 0, g: 0, b: 255 },
+      },
+      attrs: {
+        'onUpdate:modelValue': fn,
+      },
+    })
+
+    // В Vue 3 мы должны напрямую эмитировать событие
+    wrapper.vm.$emit('update:modelValue', { r: 255, g: 0, b: 255 })
+    await nextTick()
+
+    expect(fn).toHaveBeenCalledWith({ r: 255, g: 0, b: 255 })
+  })
+
+  it('should not show alpha controls if given hex value without alpha', async () => {
+    const wrapper = mountFunction({
+      props: {
+        modelValue: '#00FF00',
+      },
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  // https://github.com/vuetifyjs/vuetify/issues/9472
+  // https://github.com/vuetifyjs/vuetify/issues/10402
+  // TODO: snapshot is too complex for this
+  it('should work correctly when initial value is null', () => {
+    const wrapper = mountFunction({
+      props: {
+        modelValue: null,
+      },
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('should render flat picker', () => {
+    const wrapper = mountFunction({
+      props: {
+        flat: true,
+      },
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('should render picker with elevation', () => {
+    const wrapper = mountFunction({
+      props: {
+        elevation: 15,
+      },
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+})