@kokoccc/vuetify 1.0.1

package/src/components/VColorPicker/__tests__/__snapshots__/VColorPickerCanvas.spec.ts.snap

@@ -0,0 +1,82 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`VColorPickerCanvas.ts should emit event on click 1`] = `
+Object {
+  "alpha": 0,
+  "hex": "#E6CFCF",
+  "hexa": "#E6CFCF00",
+  "hsla": Object {
+    "a": 0,
+    "h": 0,
+    "l": 0.855,
+    "s": 0.31034482758620713,
+  },
+  "hsva": Object {
+    "a": 0,
+    "h": 0,
+    "s": 0.1,
+    "v": 0.9,
+  },
+  "hue": 0,
+  "rgba": Object {
+    "a": 0,
+    "b": 207,
+    "g": 207,
+    "r": 230,
+  },
+}
+`;
+
+exports[`VColorPickerCanvas.ts should emit event on mouse move 1`] = `
+Object {
+  "alpha": 0,
+  "hex": "#E6CFCF",
+  "hexa": "#E6CFCF00",
+  "hsla": Object {
+    "a": 0,
+    "h": 0,
+    "l": 0.855,
+    "s": 0.31034482758620713,
+  },
+  "hsva": Object {
+    "a": 0,
+    "h": 0,
+    "s": 0.1,
+    "v": 0.9,
+  },
+  "hue": 0,
+  "rgba": Object {
+    "a": 0,
+    "b": 207,
+    "g": 207,
+    "r": 230,
+  },
+}
+`;
+
+exports[`VColorPickerCanvas.ts should emit event on mouse move 2`] = `
+Object {
+  "alpha": 0,
+  "hex": "#000000",
+  "hexa": "#00000000",
+  "hsla": Object {
+    "a": 0,
+    "h": 0,
+    "l": 0,
+    "s": 0,
+  },
+  "hsva": Object {
+    "a": 0,
+    "h": 0,
+    "s": 1,
+    "v": 0,
+  },
+  "hue": 0,
+  "rgba": Object {
+    "a": 0,
+    "b": 0,
+    "g": 0,
+    "r": 0,
+  },
+}
+`;

package/src/components/VColorPicker/__tests__/__snapshots__/VColorPickerEdit.spec.ts.snap

@@ -0,0 +1,314 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`VColorPickerEdit.ts should change mode 1`] = `
+<div class="v-color-picker__edit">
+  <div class="v-color-picker__input">
+    <input type="number"
+           min="0"
+           max="255"
+           step="1"
+           value="0"
+    >
+    <span>
+      R
+    </span>
+  </div>
+  <div class="v-color-picker__input">
+    <input type="number"
+           min="0"
+           max="255"
+           step="1"
+           value="0"
+    >
+    <span>
+      G
+    </span>
+  </div>
+  <div class="v-color-picker__input">
+    <input type="number"
+           min="0"
+           max="255"
+           step="1"
+           value="0"
+    >
+    <span>
+      B
+    </span>
+  </div>
+  <div class="v-color-picker__input">
+    <input type="number"
+           min="0"
+           max="1"
+           step="0.01"
+           value="0"
+    >
+    <span>
+      A
+    </span>
+  </div>
+  <button class="v-btn v-btn--icon v-btn--round theme--light v-size--small"
+          type="button"
+  >
+    <span class="v-btn__content">
+      <i class="v-icon notranslate theme--light material-icons"
+         aria-hidden="true"
+      >
+      </i>
+    </span>
+  </button>
+</div>
+`;
+
+exports[`VColorPickerEdit.ts should change mode 2`] = `
+<div class="v-color-picker__edit">
+  <div class="v-color-picker__input">
+    <input type="number"
+           min="0"
+           max="360"
+           step="1"
+           value="0"
+    >
+    <span>
+      H
+    </span>
+  </div>
+  <div class="v-color-picker__input">
+    <input type="number"
+           min="0"
+           max="1"
+           step="0.01"
+           value="0"
+    >
+    <span>
+      S
+    </span>
+  </div>
+  <div class="v-color-picker__input">
+    <input type="number"
+           min="0"
+           max="1"
+           step="0.01"
+           value="0"
+    >
+    <span>
+      L
+    </span>
+  </div>
+  <div class="v-color-picker__input">
+    <input type="number"
+           min="0"
+           max="1"
+           step="0.01"
+           value="0"
+    >
+    <span>
+      A
+    </span>
+  </div>
+  <button class="v-btn v-btn--icon v-btn--round theme--light v-size--small"
+          type="button"
+  >
+    <span class="v-btn__content">
+      <i class="v-icon notranslate theme--light material-icons"
+         aria-hidden="true"
+      >
+      </i>
+    </span>
+  </button>
+</div>
+`;
+
+exports[`VColorPickerEdit.ts should change mode 3`] = `
+<div class="v-color-picker__edit">
+  <div class="v-color-picker__input">
+    <input maxlength="9"
+           value="#00000000"
+    >
+    <span>
+      HEX
+    </span>
+  </div>
+  <button class="v-btn v-btn--icon v-btn--round theme--light v-size--small"
+          type="button"
+  >
+    <span class="v-btn__content">
+      <i class="v-icon notranslate theme--light material-icons"
+         aria-hidden="true"
+      >
+      </i>
+    </span>
+  </button>
+</div>
+`;
+
+exports[`VColorPickerEdit.ts should change mode 4`] = `
+<div class="v-color-picker__edit">
+  <div class="v-color-picker__input">
+    <input type="number"
+           min="0"
+           max="360"
+           step="1"
+           value="0"
+    >
+    <span>
+      H
+    </span>
+  </div>
+  <div class="v-color-picker__input">
+    <input type="number"
+           min="0"
+           max="1"
+           step="0.01"
+           value="0"
+    >
+    <span>
+      S
+    </span>
+  </div>
+  <div class="v-color-picker__input">
+    <input type="number"
+           min="0"
+           max="1"
+           step="0.01"
+           value="0"
+    >
+    <span>
+      L
+    </span>
+  </div>
+  <div class="v-color-picker__input">
+    <input type="number"
+           min="0"
+           max="1"
+           step="0.01"
+           value="0"
+    >
+    <span>
+      A
+    </span>
+  </div>
+  <button class="v-btn v-btn--icon v-btn--round theme--light v-size--small"
+          type="button"
+  >
+    <span class="v-btn__content">
+      <i class="v-icon notranslate theme--light material-icons"
+         aria-hidden="true"
+      >
+      </i>
+    </span>
+  </button>
+</div>
+`;
+
+exports[`VColorPickerEdit.ts should hide mode switch button 1`] = `
+<div class="v-color-picker__edit">
+  <div class="v-color-picker__input">
+    <input type="number"
+           min="0"
+           max="255"
+           step="1"
+           value="0"
+    >
+    <span>
+      R
+    </span>
+  </div>
+  <div class="v-color-picker__input">
+    <input type="number"
+           min="0"
+           max="255"
+           step="1"
+           value="0"
+    >
+    <span>
+      G
+    </span>
+  </div>
+  <div class="v-color-picker__input">
+    <input type="number"
+           min="0"
+           max="255"
+           step="1"
+           value="0"
+    >
+    <span>
+      B
+    </span>
+  </div>
+  <div class="v-color-picker__input">
+    <input type="number"
+           min="0"
+           max="1"
+           step="0.01"
+           value="0"
+    >
+    <span>
+      A
+    </span>
+  </div>
+</div>
+`;
+
+exports[`VColorPickerEdit.ts should render with disabled 1`] = `
+<div class="v-color-picker__edit">
+  <div class="v-color-picker__input">
+    <input type="number"
+           min="0"
+           max="255"
+           step="1"
+           disabled
+           value="0"
+    >
+    <span>
+      R
+    </span>
+  </div>
+  <div class="v-color-picker__input">
+    <input type="number"
+           min="0"
+           max="255"
+           step="1"
+           disabled
+           value="0"
+    >
+    <span>
+      G
+    </span>
+  </div>
+  <div class="v-color-picker__input">
+    <input type="number"
+           min="0"
+           max="255"
+           step="1"
+           disabled
+           value="0"
+    >
+    <span>
+      B
+    </span>
+  </div>
+  <div class="v-color-picker__input">
+    <input type="number"
+           min="0"
+           max="1"
+           step="0.01"
+           disabled
+           value="0"
+    >
+    <span>
+      A
+    </span>
+  </div>
+  <button class="v-btn v-btn--disabled v-btn--icon v-btn--round theme--light v-size--small"
+          type="button"
+          disabled
+  >
+    <span class="v-btn__content">
+      <i class="v-icon notranslate theme--light material-icons"
+         aria-hidden="true"
+      >
+      </i>
+    </span>
+  </button>
+</div>
+`;

package/src/components/VColorPicker/_variables.scss

@@ -0,0 +1,25 @@
+@import '../../styles/styles.sass';
+
+$color-picker-border-radius: $border-radius-root !default;
+$color-picker-checkerboard: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAGElEQVQYlWNgYGCQwoKxgqGgcJA5h3yFAAs8BRWVSwooAAAAAElFTkSuQmCC) repeat !default;
+$color-picker-swatch-color-width: 45px !default;
+$color-picker-swatch-color-height: 18px !default;
+$color-picker-swatch-color-margin: 2px 4px !default;
+$color-picker-swatch-color-border-radius: 2px !default;
+$color-picker-swatch-margin-bottom: 10px !default;
+$color-picker-swatches-border-radius: 8px !default; // typo
+$color-picker-swatches-padding: $color-picker-swatches-border-radius !default;
+$color-picker-canvas-dot-size: 15px !default;
+$color-picker-canvas-dot-box-shadow: 0px 0px 0px 1.5px rgba(255, 255, 255, 1), inset 0px 0px 1px 1.5px rgba(0, 0, 0, 0.3) !default;
+$color-picker-canvas-dot-disabled-box-shadow: 0px 0px 0px 1.5px rgba(255, 255, 255, 0.7), inset 0px 0px 1px 1.5px rgba(0, 0, 0, 0.3) !default;
+$color-picker-controls-padding: 16px !default;
+$color-picker-edit-margin-top: 24px !default;
+$color-picker-input-height: 28px !default;
+$color-picker-input-font-size: 0.75rem !default;
+$color-picker-input-margin: 8px !default;
+$color-picker-input-margin-bottom: 8px !default;
+$color-picker-slider-height: 10px !default;
+$color-picker-slider-border-radius: $color-picker-slider-height / 2 !default;
+$color-picker-preview-dot-size: 30px !default;
+$color-picker-preview-dot-margin: 24px !default;
+$color-picker-hue-margin-bottom: 24px !default;

package/src/components/VColorPicker/index.ts

@@ -0,0 +1,6 @@
+import VColorPicker from './VColorPicker'
+import VColorPickerSwatches from './VColorPickerSwatches'
+import VColorPickerCanvas from './VColorPickerCanvas'
+
+export { VColorPicker, VColorPickerSwatches, VColorPickerCanvas }
+export default VColorPicker

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

@@ -0,0 +1,81 @@
+import { parseColor, extractColor, VColorPickerColor } from '../'
+
+const red = {
+  alpha: 1,
+  hex: '#FF0000',
+  hexa: '#FF0000FF',
+  hsla: { h: 0, s: 1, l: 0.5, a: 1 },
+  hsva: { h: 0, s: 1, v: 1, a: 1 },
+  hue: 0,
+  rgba: { r: 255, g: 0, b: 0, a: 1 },
+}
+
+describe('VColorPicker Utils', () => {
+  describe('Parse color', () => {
+    it('should return default color if nothing is passed', () => {
+      expect(parseColor(undefined)).toEqual(red)
+      expect(parseColor(null)).toEqual(red)
+    })
+
+    it('should parse hex string', () => {
+      expect(parseColor('#FF00FF').hexa).toEqual('#FF00FFFF')
+      expect(parseColor('FF00FF05').hexa).toEqual('#FF00FF05')
+    })
+
+    it('should try to parse color if invalid hex string passed', () => {
+      expect(parseColor('#00gi').hex).toEqual('#0000FF')
+      expect(parseColor('#00gi').hexa).toEqual('#0000FFFF')
+    })
+
+    it('should parse rgb object', () => {
+      const rgb = { r: 128, g: 128, b: 0 }
+      expect(parseColor(rgb).rgba).toEqual({ ...rgb, a: 1 })
+
+      const rgba = { r: 128, g: 0, b: 255, a: 0.2 }
+      expect(parseColor(rgba).rgba).toEqual(rgba)
+    })
+
+    it('should parse hsl object', () => {
+      const hsl = { h: 220, s: 0.5, l: 1 }
+      expect(parseColor(hsl).hsla).toEqual({ ...hsl, a: 1 })
+
+      const hsla = { h: 220, s: 0.5, l: 1, a: 0.4 }
+      expect(parseColor(hsla).hsla).toEqual(hsla)
+    })
+
+    it('should parse hsv object', () => {
+      const hsv = { h: 220, s: 0.5, v: 1 }
+      expect(parseColor(hsv).hsva).toEqual({ ...hsv, a: 1 })
+
+      const hsva = { h: 220, s: 0.5, v: 1, a: 0.4 }
+      expect(parseColor(hsva).hsva).toEqual(hsva)
+    })
+
+    it('should return default color if object is unknown', () => {
+      const foo = { x: 0, y: 10, z: 100 }
+      expect(parseColor(foo)).toEqual(red)
+    })
+  })
+
+  describe('Extract color', () => {
+    const cases = [
+      [red, null, red],
+      [red, '#FF0000', red.hex],
+      [red, '#FF0000FF', red.hexa],
+      [red, { r: 255, g: 0, b: 0 }, { r: 255, g: 0, b: 0 }],
+      [red, { r: 255, g: 0, b: 0, a: 0 }, red.rgba],
+      [red, { h: 0, s: 1, l: 0.5 }, { h: 0, s: 1, l: 0.5 }],
+      [red, { h: 0, s: 1, l: 0.5, a: 1 }, red.hsla],
+      [red, { h: 0, s: 1, v: 1 }, { h: 0, s: 1, v: 1 }],
+      [red, { h: 0, s: 1, v: 1, a: 0.5 }, { h: 0, s: 1, v: 1, a: 1 }],
+      [red, undefined, red],
+      [red, 0, red],
+      [red, true, red],
+    ]
+
+    it.each(cases)('When given %p and %p, extractColor util should return %p',
+      (color: VColorPickerColor, input: any, result: any) => {
+        expect(extractColor(color, input)).toEqual(result)
+      })
+  })
+})

package/src/components/VColorPicker/util/index.ts

@@ -0,0 +1,168 @@
+// Utilities
+import {
+  HSVA,
+  HSVAtoRGBA,
+  HSVAtoHex,
+  RGBA,
+  Hex,
+  RGBAtoHSVA,
+  HexToHSVA,
+  HSLA,
+  HSVAtoHSLA,
+  RGBAtoHex,
+  HSLAtoHSVA,
+  parseHex,
+  Hexa,
+} from '../../../util/colorUtils'
+
+export interface VColorPickerColor {
+  alpha: number
+  hex: Hex
+  hexa: Hexa
+  hsla: HSLA
+  hsva: HSVA
+  hue: number
+  rgba: RGBA
+}
+
+export function fromHSVA (hsva: HSVA): VColorPickerColor {
+  hsva = { ...hsva }
+  const hexa = HSVAtoHex(hsva)
+  const hsla = HSVAtoHSLA(hsva)
+  const rgba = HSVAtoRGBA(hsva)
+  return {
+    alpha: hsva.a,
+    hex: hexa.substr(0, 7),
+    hexa,
+    hsla,
+    hsva,
+    hue: hsva.h,
+    rgba,
+  }
+}
+
+export function fromHSLA (hsla: HSLA): VColorPickerColor {
+  const hsva = HSLAtoHSVA(hsla)
+  const hexa = HSVAtoHex(hsva)
+  const rgba = HSVAtoRGBA(hsva)
+  return {
+    alpha: hsva.a,
+    hex: hexa.substr(0, 7),
+    hexa,
+    hsla,
+    hsva,
+    hue: hsva.h,
+    rgba,
+  }
+}
+
+export function fromRGBA (rgba: RGBA): VColorPickerColor {
+  const hsva = RGBAtoHSVA(rgba)
+  const hexa = RGBAtoHex(rgba)
+  const hsla = HSVAtoHSLA(hsva)
+  return {
+    alpha: hsva.a,
+    hex: hexa.substr(0, 7),
+    hexa,
+    hsla,
+    hsva,
+    hue: hsva.h,
+    rgba,
+  }
+}
+
+export function fromHexa (hexa: Hexa): VColorPickerColor {
+  const hsva = HexToHSVA(hexa)
+  const hsla = HSVAtoHSLA(hsva)
+  const rgba = HSVAtoRGBA(hsva)
+  return {
+    alpha: hsva.a,
+    hex: hexa.substr(0, 7),
+    hexa,
+    hsla,
+    hsva,
+    hue: hsva.h,
+    rgba,
+  }
+}
+
+export function fromHex (hex: Hex): VColorPickerColor {
+  return fromHexa(parseHex(hex))
+}
+
+function has (obj: object, key: string[]) {
+  return key.every(k => obj.hasOwnProperty(k))
+}
+
+export function parseColor (color: any, oldColor: VColorPickerColor | null) {
+  if (!color) return fromRGBA({ r: 255, g: 0, b: 0, a: 1 })
+
+  if (typeof color === 'string') {
+    if (color === 'transparent') return fromHexa('#00000000')
+
+    const hex = parseHex(color)
+
+    if (oldColor && hex === oldColor.hexa) return oldColor
+    else return fromHexa(hex)
+  }
+
+  if (typeof color === 'object') {
+    if (color.hasOwnProperty('alpha')) return color
+
+    const a = color.hasOwnProperty('a') ? parseFloat(color.a) : 1
+
+    if (has(color, ['r', 'g', 'b'])) {
+      if (oldColor && color === oldColor.rgba) return oldColor
+      else return fromRGBA({ ...color, a })
+    } else if (has(color, ['h', 's', 'l'])) {
+      if (oldColor && color === oldColor.hsla) return oldColor
+      else return fromHSLA({ ...color, a })
+    } else if (has(color, ['h', 's', 'v'])) {
+      if (oldColor && color === oldColor.hsva) return oldColor
+      else return fromHSVA({ ...color, a })
+    }
+  }
+
+  return fromRGBA({ r: 255, g: 0, b: 0, a: 1 })
+}
+
+function stripAlpha (color: any, stripAlpha: boolean) {
+  if (stripAlpha) {
+    const { a, ...rest } = color
+
+    return rest
+  }
+
+  return color
+}
+
+export function extractColor (color: VColorPickerColor, input: any) {
+  if (input == null) return color
+
+  if (typeof input === 'string') {
+    return input.length === 7 ? color.hex : color.hexa
+  }
+
+  if (typeof input === 'object') {
+    const shouldStrip = typeof input.a === 'number' && input.a === 0 ? !!input.a : !input.a
+    if (has(input, ['r', 'g', 'b'])) return stripAlpha(color.rgba, shouldStrip)
+    else if (has(input, ['h', 's', 'l'])) return stripAlpha(color.hsla, shouldStrip)
+    else if (has(input, ['h', 's', 'v'])) return stripAlpha(color.hsva, shouldStrip)
+  }
+
+  return color
+}
+
+export function hasAlpha (color: any) {
+  if (!color) return false
+
+  if (typeof color === 'string') {
+    return color.length > 7
+  }
+
+  if (typeof color === 'object') {
+    return has(color, ['a']) || has(color, ['alpha'])
+  }
+
+  return false
+}