@dimailn/vuetify 2.7.2-alpha0

package/lib/components/VChip/VChip.js

@@ -0,0 +1,165 @@
+import { h, vShow, withDirectives } from 'vue'; // Styles
+
+import "../../../src/components/VChip/VChip.sass";
+import mixins from '../../util/mixins'; // Components
+
+import { VExpandXTransition } from '../transitions';
+import VIcon from '../VIcon'; // Mixins
+
+import Colorable from '../../mixins/colorable';
+import { factory as GroupableFactory } from '../../mixins/groupable';
+import Themeable from '../../mixins/themeable';
+import { factory as ToggleableFactory } from '../../mixins/toggleable';
+import Routable from '../../mixins/routable';
+import Sizeable from '../../mixins/sizeable'; // Utilities
+
+import { breaking } from '../../util/console';
+import { getSlot } from '../../util/helpers';
+/* @vue/component */
+
+export default mixins(Colorable, Sizeable, Routable, Themeable, GroupableFactory('chipGroup'), ToggleableFactory('inputValue')).extend({
+  name: 'v-chip',
+  props: {
+    active: {
+      type: Boolean,
+      default: true
+    },
+    activeClass: {
+      type: String
+    },
+    close: Boolean,
+    closeIcon: {
+      type: String,
+      default: '$delete'
+    },
+    closeLabel: {
+      type: String,
+      default: '$vuetify.close'
+    },
+    disabled: Boolean,
+    draggable: Boolean,
+    filter: Boolean,
+    filterIcon: {
+      type: String,
+      default: '$complete'
+    },
+    label: Boolean,
+    link: Boolean,
+    outlined: Boolean,
+    pill: Boolean,
+    tag: {
+      type: String,
+      default: 'span'
+    },
+    textColor: String,
+    value: null
+  },
+  data: () => ({
+    proxyClass: 'v-chip--active'
+  }),
+  computed: {
+    $activeClass() {
+      if (this.activeClass) return this.activeClass;
+      if (!this.chipGroup) return '';
+      return this.chipGroup.activeClass;
+    },
+
+    classes() {
+      return {
+        'v-chip': true,
+        ...Routable.computed.classes.call(this),
+        'v-chip--clickable': this.isClickable,
+        'v-chip--disabled': this.disabled,
+        'v-chip--draggable': this.draggable,
+        'v-chip--label': this.label,
+        'v-chip--link': this.isLink,
+        'v-chip--no-color': !this.color,
+        'v-chip--outlined': this.outlined,
+        'v-chip--pill': this.pill,
+        'v-chip--removable': this.hasClose,
+        ...this.themeClasses,
+        ...this.sizeableClasses,
+        ...this.groupClasses
+      };
+    },
+
+    hasClose() {
+      return Boolean(this.close);
+    },
+
+    isClickable() {
+      return Boolean(Routable.computed.isClickable.call(this) || this.chipGroup);
+    }
+
+  },
+
+  created() {
+    const breakingProps = [['outline', 'outlined'], ['selected', 'input-value'], ['value', 'active'], ['@input', '@active.sync']];
+    /* istanbul ignore next */
+
+    breakingProps.forEach(([original, replacement]) => {
+      if (this.$attrs.hasOwnProperty(original)) breaking(original, replacement, this);
+    });
+  },
+
+  methods: {
+    click(e) {
+      this.$emit('click', e);
+      this.chipGroup && this.toggle();
+    },
+
+    genFilter() {
+      const children = [];
+
+      if (this.isActive) {
+        children.push(h(VIcon, {
+          class: 'v-chip__filter',
+          left: true
+        }, this.filterIcon));
+      }
+
+      return h(VExpandXTransition, children);
+    },
+
+    genClose() {
+      return h(VIcon, {
+        class: 'v-chip__close',
+        right: true,
+        size: 18,
+        'aria-label': this.$vuetify.lang.t(this.closeLabel),
+        onClick: e => {
+          e.stopPropagation();
+          e.preventDefault();
+          this.$emit('click:close');
+          this.$emit('update:active', false);
+        }
+      }, this.closeIcon);
+    },
+
+    genContent() {
+      return h('span', {
+        class: 'v-chip__content'
+      }, [this.filter && this.genFilter(), getSlot(this), this.hasClose && this.genClose()]);
+    }
+
+  },
+
+  render() {
+    const children = [this.genContent()];
+    let {
+      tag,
+      data,
+      directives
+    } = this.generateRouteLink();
+    data = { ...data,
+      draggable: this.draggable ? 'true' : undefined,
+      tabindex: this.chipGroup && !this.disabled ? 0 : data.tabindex
+    };
+    directives.push([vShow, this.active]);
+    data = this.setBackgroundColor(this.color, data);
+    const color = this.textColor || this.outlined && this.color;
+    return withDirectives(h(tag, this.setTextColor(color, data), children), directives);
+  }
+
+});
+//# sourceMappingURL=VChip.js.map

package/lib/components/VChip/VChip.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/VChip/VChip.ts"],"names":[],"mappings":"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","sourcesContent":["import {h, vShow, withDirectives} from 'vue'\n// Styles\nimport './VChip.sass'\n\n// Types\nimport { VNode } from 'vue'\nimport mixins from '../../util/mixins'\n\n// Components\nimport { VExpandXTransition } from '../transitions'\nimport VIcon from '../VIcon'\n\n// Mixins\nimport Colorable from '../../mixins/colorable'\nimport { factory as GroupableFactory } from '../../mixins/groupable'\nimport Themeable from '../../mixins/themeable'\nimport { factory as ToggleableFactory } from '../../mixins/toggleable'\nimport Routable from '../../mixins/routable'\nimport Sizeable from '../../mixins/sizeable'\n\n// Utilities\nimport { breaking } from '../../util/console'\nimport { getSlot } from '../../util/helpers'\n\n// Types\nimport { PropValidator, PropType } from 'vue/types/options'\n\n/* @vue/component */\nexport default mixins(\n  Colorable,\n  Sizeable,\n  Routable,\n  Themeable,\n  GroupableFactory('chipGroup'),\n  ToggleableFactory('inputValue')\n).extend({\n  name: 'v-chip',\n\n  props: {\n    active: {\n      type: Boolean,\n      default: true,\n    },\n    activeClass: {\n      type: String,\n    } as any as PropValidator<string>,\n    close: Boolean,\n    closeIcon: {\n      type: String,\n      default: '$delete',\n    },\n    closeLabel: {\n      type: String,\n      default: '$vuetify.close',\n    },\n    disabled: Boolean,\n    draggable: Boolean,\n    filter: Boolean,\n    filterIcon: {\n      type: String,\n      default: '$complete',\n    },\n    label: Boolean,\n    link: Boolean,\n    outlined: Boolean,\n    pill: Boolean,\n    tag: {\n      type: String,\n      default: 'span',\n    },\n    textColor: String,\n    value: null as any as PropType<any>,\n  },\n\n  data: () => ({\n    proxyClass: 'v-chip--active',\n  }),\n\n  computed: {\n    $activeClass() {\n      if(this.activeClass)\n        return this.activeClass\n      if (!this.chipGroup) return ''\n\n      return this.chipGroup.activeClass\n    },\n    classes (): object {\n      return {\n        'v-chip': true,\n        ...Routable.computed.classes.call(this),\n        'v-chip--clickable': this.isClickable,\n        'v-chip--disabled': this.disabled,\n        'v-chip--draggable': this.draggable,\n        'v-chip--label': this.label,\n        'v-chip--link': this.isLink,\n        'v-chip--no-color': !this.color,\n        'v-chip--outlined': this.outlined,\n        'v-chip--pill': this.pill,\n        'v-chip--removable': this.hasClose,\n        ...this.themeClasses,\n        ...this.sizeableClasses,\n        ...this.groupClasses,\n      }\n    },\n    hasClose (): boolean {\n      return Boolean(this.close)\n    },\n    isClickable (): boolean {\n      return Boolean(\n        Routable.computed.isClickable.call(this) ||\n        this.chipGroup\n      )\n    },\n  },\n\n  created () {\n    const breakingProps = [\n      ['outline', 'outlined'],\n      ['selected', 'input-value'],\n      ['value', 'active'],\n      ['@input', '@active.sync'],\n    ]\n\n    /* istanbul ignore next */\n    breakingProps.forEach(([original, replacement]) => {\n      if (this.$attrs.hasOwnProperty(original)) breaking(original, replacement, this)\n    })\n  },\n\n  methods: {\n    click (e: MouseEvent): void {\n      this.$emit('click', e)\n\n      this.chipGroup && this.toggle()\n    },\n    genFilter (): VNode {\n      const children = []\n\n      if (this.isActive) {\n        children.push(\n          h(VIcon, {\n            class: 'v-chip__filter',\n            left: true,\n          }, this.filterIcon)\n        )\n      }\n\n      return h(VExpandXTransition, children)\n    },\n    genClose (): VNode {\n      return h(VIcon, {\n        class: 'v-chip__close',\n        right: true,\n        size: 18,\n        'aria-label': this.$vuetify.lang.t(this.closeLabel),\n        onClick: (e: Event) => {\n          e.stopPropagation()\n          e.preventDefault()\n\n          this.$emit('click:close')\n          this.$emit('update:active', false)\n        }\n      }, this.closeIcon)\n    },\n    genContent (): VNode {\n      return h('span', {\n        class: 'v-chip__content',\n      }, [\n        this.filter && this.genFilter(),\n        getSlot(this),\n        this.hasClose && this.genClose(),\n      ])\n    },\n  },\n\n  render (): VNode {\n    const children = [this.genContent()]\n    let { tag, data, directives } = this.generateRouteLink()\n\n    data = {\n      ...data,\n      draggable: this.draggable ? 'true' : undefined,\n      tabindex: this.chipGroup && !this.disabled ? 0 : data.tabindex,\n    }\n\n    directives!.push([\n      vShow,\n      this.active,\n    ])\n\n    data = this.setBackgroundColor(this.color, data)\n\n    const color = this.textColor || (this.outlined && this.color)\n\n    return withDirectives(\n      h(tag, this.setTextColor(color, data), children),\n      directives\n    )\n  },\n})\n"],"sourceRoot":"","file":"VChip.js"}

package/lib/components/VChip/index.js

@@ -0,0 +1,4 @@
+import VChip from './VChip';
+export { VChip };
+export default VChip;
+//# sourceMappingURL=index.js.map

package/lib/components/VChip/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/VChip/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAP,MAAkB,SAAlB;AAEA,SAAS,KAAT;AACA,eAAe,KAAf","sourcesContent":["import VChip from './VChip'\n\nexport { VChip }\nexport default VChip\n"],"sourceRoot":"","file":"index.js"}

package/lib/components/VChipGroup/VChipGroup.js

@@ -0,0 +1,47 @@
+// Styles
+import "../../../src/components/VChipGroup/VChipGroup.sass"; // Extensions
+
+import { BaseSlideGroup } from '../VSlideGroup/VSlideGroup'; // Mixins
+
+import Colorable from '../../mixins/colorable'; // Utilities
+
+import mixins from '../../util/mixins';
+/* @vue/component */
+
+export default mixins(BaseSlideGroup, Colorable).extend({
+  name: 'v-chip-group',
+
+  provide() {
+    return {
+      chipGroup: this
+    };
+  },
+
+  props: {
+    column: Boolean
+  },
+  computed: {
+    classes() {
+      return { ...BaseSlideGroup.computed.classes.call(this),
+        'v-chip-group': true,
+        'v-chip-group--column': this.column
+      };
+    }
+
+  },
+  watch: {
+    column(val) {
+      if (val) this.scrollOffset = 0;
+      this.$nextTick(this.onResize);
+    }
+
+  },
+  methods: {
+    genData() {
+      return this.setTextColor(this.color, { ...BaseSlideGroup.methods.genData.call(this)
+      });
+    }
+
+  }
+});
+//# sourceMappingURL=VChipGroup.js.map

package/lib/components/VChipGroup/VChipGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/VChipGroup/VChipGroup.ts"],"names":[],"mappings":"AAAA;AACA,OAAO,oDAAP,C,CAEA;;AACA,SAAS,cAAT,QAA+B,4BAA/B,C,CAEA;;AACA,OAAO,SAAP,MAAsB,wBAAtB,C,CAEA;;AACA,OAAO,MAAP,MAAmB,mBAAnB;AAEA;;AACA,eAAe,MAAM,CACnB,cADmB,EAEnB,SAFmB,CAAN,CAGb,MAHa,CAGN;AACP,EAAA,IAAI,EAAE,cADC;;AAGP,EAAA,OAAO,GAAA;AACL,WAAO;AACL,MAAA,SAAS,EAAE;AADN,KAAP;AAGD,GAPM;;AASP,EAAA,KAAK,EAAE;AACL,IAAA,MAAM,EAAE;AADH,GATA;AAaP,EAAA,QAAQ,EAAE;AACR,IAAA,OAAO,GAAA;AACL,aAAO,EACL,GAAG,cAAc,CAAC,QAAf,CAAwB,OAAxB,CAAgC,IAAhC,CAAqC,IAArC,CADE;AAEL,wBAAgB,IAFX;AAGL,gCAAwB,KAAK;AAHxB,OAAP;AAKD;;AAPO,GAbH;AAuBP,EAAA,KAAK,EAAE;AACL,IAAA,MAAM,CAAE,GAAF,EAAK;AACT,UAAI,GAAJ,EAAS,KAAK,YAAL,GAAoB,CAApB;AAET,WAAK,SAAL,CAAe,KAAK,QAApB;AACD;;AALI,GAvBA;AA+BP,EAAA,OAAO,EAAE;AACP,IAAA,OAAO,GAAA;AACL,aAAO,KAAK,YAAL,CAAkB,KAAK,KAAvB,EAA8B,EACnC,GAAG,cAAc,CAAC,OAAf,CAAuB,OAAvB,CAA+B,IAA/B,CAAoC,IAApC;AADgC,OAA9B,CAAP;AAGD;;AALM;AA/BF,CAHM,CAAf","sourcesContent":["// Styles\nimport './VChipGroup.sass'\n\n// Extensions\nimport { BaseSlideGroup } from '../VSlideGroup/VSlideGroup'\n\n// Mixins\nimport Colorable from '../../mixins/colorable'\n\n// Utilities\nimport mixins from '../../util/mixins'\n\n/* @vue/component */\nexport default mixins(\n  BaseSlideGroup,\n  Colorable\n).extend({\n  name: 'v-chip-group',\n\n  provide () {\n    return {\n      chipGroup: this,\n    }\n  },\n\n  props: {\n    column: Boolean,\n  },\n\n  computed: {\n    classes () {\n      return {\n        ...BaseSlideGroup.computed.classes.call(this),\n        'v-chip-group': true,\n        'v-chip-group--column': this.column,\n      }\n    },\n  },\n\n  watch: {\n    column (val) {\n      if (val) this.scrollOffset = 0\n\n      this.$nextTick(this.onResize)\n    },\n  },\n\n  methods: {\n    genData () {\n      return this.setTextColor(this.color, {\n        ...BaseSlideGroup.methods.genData.call(this),\n      })\n    },\n  },\n})\n"],"sourceRoot":"","file":"VChipGroup.js"}

package/lib/components/VChipGroup/index.js

@@ -0,0 +1,4 @@
+import VChipGroup from './VChipGroup';
+export { VChipGroup };
+export default VChipGroup;
+//# sourceMappingURL=index.js.map

package/lib/components/VChipGroup/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/VChipGroup/index.ts"],"names":[],"mappings":"AAAA,OAAO,UAAP,MAAuB,cAAvB;AAEA,SAAS,UAAT;AACA,eAAe,UAAf","sourcesContent":["import VChipGroup from './VChipGroup'\n\nexport { VChipGroup }\nexport default VChipGroup\n"],"sourceRoot":"","file":"index.js"}

package/lib/components/VColorPicker/VColorPicker.js

@@ -0,0 +1,163 @@
+import { h } from 'vue'; // Styles
+
+import "../../../src/components/VColorPicker/VColorPicker.sass"; // Components
+
+import VSheet from '../VSheet/VSheet';
+import VColorPickerPreview from './VColorPickerPreview';
+import VColorPickerCanvas from './VColorPickerCanvas';
+import VColorPickerEdit, { modes } from './VColorPickerEdit';
+import VColorPickerSwatches from './VColorPickerSwatches'; // Helpers
+
+import { parseColor, fromRGBA, extractColor, hasAlpha } from './util';
+import mixins from '../../util/mixins';
+import { deepEqual } from '../../util/helpers'; // Mixins
+
+import Elevatable from '../../mixins/elevatable';
+import Themeable from '../../mixins/themeable';
+export default mixins(Elevatable, Themeable).extend({
+  name: 'v-color-picker',
+  props: {
+    canvasHeight: {
+      type: [String, Number],
+      default: 150
+    },
+    disabled: Boolean,
+    dotSize: {
+      type: [Number, String],
+      default: 10
+    },
+    flat: Boolean,
+    hideCanvas: Boolean,
+    hideSliders: Boolean,
+    hideInputs: Boolean,
+    hideModeSwitch: Boolean,
+    mode: {
+      type: String,
+      default: 'rgba',
+      validator: v => Object.keys(modes).includes(v)
+    },
+    showSwatches: Boolean,
+    swatches: Array,
+    swatchesMaxHeight: {
+      type: [Number, String],
+      default: 150
+    },
+    value: {
+      type: [Object, String]
+    },
+    width: {
+      type: [Number, String],
+      default: 300
+    }
+  },
+  data: () => ({
+    internalValue: fromRGBA({
+      r: 255,
+      g: 0,
+      b: 0,
+      a: 1
+    })
+  }),
+  computed: {
+    hideAlpha() {
+      if (!this.value) return false;
+      return !hasAlpha(this.value);
+    }
+
+  },
+  watch: {
+    value: {
+      handler(color) {
+        this.updateColor(parseColor(color, this.internalValue));
+      },
+
+      immediate: true
+    }
+  },
+  methods: {
+    updateColor(color) {
+      this.internalValue = color;
+      const value = extractColor(this.internalValue, this.value);
+
+      if (!deepEqual(value, this.value)) {
+        this.$emit('input', value);
+        this.$emit('update:color', this.internalValue);
+      }
+    },
+
+    genCanvas() {
+      return h(VColorPickerCanvas, {
+        color: this.internalValue,
+        disabled: this.disabled,
+        dotSize: this.dotSize,
+        width: this.width,
+        height: this.canvasHeight,
+        'onUpdate:color': this.updateColor
+      });
+    },
+
+    genControls() {
+      return h('div', {
+        class: 'v-color-picker__controls'
+      }, [!this.hideSliders && this.genPreview(), !this.hideInputs && this.genEdit()]);
+    },
+
+    genEdit() {
+      return h(VColorPickerEdit, {
+        color: this.internalValue,
+        disabled: this.disabled,
+        hideAlpha: this.hideAlpha,
+        hideModeSwitch: this.hideModeSwitch,
+        mode: this.mode,
+        'onUpdate:color': this.updateColor,
+        'onUpdate:mode': v => this.$emit('update:mode', v)
+      });
+    },
+
+    genPreview() {
+      return h(VColorPickerPreview, {
+        props: {
+          color: this.internalValue,
+          disabled: this.disabled,
+          hideAlpha: this.hideAlpha
+        },
+        on: {
+          'update:color': this.updateColor
+        }
+      });
+    },
+
+    genSwatches() {
+      return h(VColorPickerSwatches, {
+        props: {
+          dark: this.dark,
+          light: this.light,
+          disabled: this.disabled,
+          swatches: this.swatches,
+          color: this.internalValue,
+          maxHeight: this.swatchesMaxHeight
+        },
+        on: {
+          'update:color': this.updateColor
+        }
+      });
+    }
+
+  },
+
+  render() {
+    return h(VSheet, {
+      class: 'v-color-picker',
+      class: {
+        'v-color-picker--flat': this.flat,
+        ...this.themeClasses,
+        ...this.elevationClasses
+      },
+      props: {
+        maxWidth: this.width
+      }
+    }, [!this.hideCanvas && this.genCanvas(), (!this.hideSliders || !this.hideInputs) && this.genControls(), this.showSwatches && this.genSwatches()]);
+  }
+
+});
+//# sourceMappingURL=VColorPicker.js.map

package/lib/components/VColorPicker/VColorPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/VColorPicker/VColorPicker.ts"],"names":[],"mappings":"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","sourcesContent":["import {h} from 'vue'\n// Styles\nimport './VColorPicker.sass'\n\n// Components\nimport VSheet from '../VSheet/VSheet'\nimport VColorPickerPreview from './VColorPickerPreview'\nimport VColorPickerCanvas from './VColorPickerCanvas'\nimport VColorPickerEdit, { Mode, modes } from './VColorPickerEdit'\nimport VColorPickerSwatches from './VColorPickerSwatches'\n\n// Helpers\nimport { VColorPickerColor, parseColor, fromRGBA, extractColor, hasAlpha } from './util'\nimport mixins from '../../util/mixins'\nimport { deepEqual } from '../../util/helpers'\n\n// Mixins\nimport Elevatable from '../../mixins/elevatable'\nimport Themeable from '../../mixins/themeable'\n\n// Types\nimport { VNode, PropType } from 'vue'\n\nexport default mixins(Elevatable, Themeable).extend({\n  name: 'v-color-picker',\n\n  props: {\n    canvasHeight: {\n      type: [String, Number],\n      default: 150,\n    },\n    disabled: Boolean,\n    dotSize: {\n      type: [Number, String],\n      default: 10,\n    },\n    flat: Boolean,\n    hideCanvas: Boolean,\n    hideSliders: Boolean,\n    hideInputs: Boolean,\n    hideModeSwitch: Boolean,\n    mode: {\n      type: String,\n      default: 'rgba',\n      validator: (v: string) => Object.keys(modes).includes(v),\n    },\n    showSwatches: Boolean,\n    swatches: Array as PropType<string[][]>,\n    swatchesMaxHeight: {\n      type: [Number, String],\n      default: 150,\n    },\n    value: {\n      type: [Object, String],\n    },\n    width: {\n      type: [Number, String],\n      default: 300,\n    },\n  },\n\n  data: () => ({\n    internalValue: fromRGBA({ r: 255, g: 0, b: 0, a: 1 }),\n  }),\n\n  computed: {\n    hideAlpha (): boolean {\n      if (!this.value) return false\n\n      return !hasAlpha(this.value)\n    },\n  },\n\n  watch: {\n    value: {\n      handler (color: any) {\n        this.updateColor(parseColor(color, this.internalValue))\n      },\n      immediate: true,\n    },\n  },\n\n  methods: {\n    updateColor (color: VColorPickerColor) {\n      this.internalValue = color\n      const value = extractColor(this.internalValue, this.value)\n\n      if (!deepEqual(value, this.value)) {\n        this.$emit('input', value)\n        this.$emit('update:color', this.internalValue)\n      }\n    },\n    genCanvas (): VNode {\n      return h(VColorPickerCanvas, {\n        color: this.internalValue,\n        disabled: this.disabled,\n        dotSize: this.dotSize,\n        width: this.width,\n        height: this.canvasHeight,\n        'onUpdate:color': this.updateColor\n      })\n    },\n    genControls (): VNode {\n      return h('div', {\n        class: 'v-color-picker__controls',\n      }, [\n        !this.hideSliders && this.genPreview(),\n        !this.hideInputs && this.genEdit(),\n      ])\n    },\n    genEdit (): VNode {\n      return h(VColorPickerEdit, {\n        color: this.internalValue,\n        disabled: this.disabled,\n        hideAlpha: this.hideAlpha,\n        hideModeSwitch: this.hideModeSwitch,\n        mode: this.mode,\n        'onUpdate:color': this.updateColor,\n        'onUpdate:mode': (v: Mode) => this.$emit('update:mode', v),\n      })\n    },\n    genPreview (): VNode {\n      return h(VColorPickerPreview, {\n        props: {\n          color: this.internalValue,\n          disabled: this.disabled,\n          hideAlpha: this.hideAlpha,\n        },\n        on: {\n          'update:color': this.updateColor,\n        },\n      })\n    },\n    genSwatches (): VNode {\n      return h(VColorPickerSwatches, {\n        props: {\n          dark: this.dark,\n          light: this.light,\n          disabled: this.disabled,\n          swatches: this.swatches,\n          color: this.internalValue,\n          maxHeight: this.swatchesMaxHeight,\n        },\n        on: {\n          'update:color': this.updateColor,\n        },\n      })\n    },\n  },\n\n  render (): VNode {\n    return h(VSheet, {\n      class: 'v-color-picker',\n      class: {\n        'v-color-picker--flat': this.flat,\n        ...this.themeClasses,\n        ...this.elevationClasses,\n      },\n      props: {\n        maxWidth: this.width,\n      },\n    }, [\n      !this.hideCanvas && this.genCanvas(),\n      (!this.hideSliders || !this.hideInputs) && this.genControls(),\n      this.showSwatches && this.genSwatches(),\n    ])\n  },\n})\n"],"sourceRoot":"","file":"VColorPicker.js"}

package/lib/components/VColorPicker/VColorPickerCanvas.js

@@ -0,0 +1,173 @@
+import { h } from 'vue'; // Styles
+
+import "../../../src/components/VColorPicker/VColorPickerCanvas.sass"; // Helpers
+
+import { clamp, convertToUnit } from '../../util/helpers';
+import { fromHSVA, fromRGBA } from './util'; // Types
+
+import { defineComponent } from 'vue';
+export default defineComponent({
+  name: 'v-color-picker-canvas',
+  props: {
+    color: {
+      type: Object,
+      default: () => fromRGBA({
+        r: 255,
+        g: 0,
+        b: 0,
+        a: 1
+      })
+    },
+    disabled: Boolean,
+    dotSize: {
+      type: [Number, String],
+      default: 10
+    },
+    height: {
+      type: [Number, String],
+      default: 150
+    },
+    width: {
+      type: [Number, String],
+      default: 300
+    }
+  },
+
+  data() {
+    return {
+      boundingRect: {
+        width: 0,
+        height: 0,
+        left: 0,
+        top: 0
+      }
+    };
+  },
+
+  computed: {
+    dot() {
+      if (!this.color) return {
+        x: 0,
+        y: 0
+      };
+      return {
+        x: this.color.hsva.s * parseInt(this.width, 10),
+        y: (1 - this.color.hsva.v) * parseInt(this.height, 10)
+      };
+    }
+
+  },
+  watch: {
+    'color.hue': 'updateCanvas'
+  },
+
+  mounted() {
+    this.updateCanvas();
+  },
+
+  methods: {
+    emitColor(x, y) {
+      const {
+        left,
+        top,
+        width,
+        height
+      } = this.boundingRect;
+      this.$emit('update:color', fromHSVA({
+        h: this.color.hue,
+        s: clamp(x - left, 0, width) / width,
+        v: 1 - clamp(y - top, 0, height) / height,
+        a: this.color.alpha
+      }));
+    },
+
+    updateCanvas() {
+      if (!this.color) return;
+      const canvas = this.$refs.canvas;
+      const ctx = canvas.getContext('2d');
+      if (!ctx) return;
+      const saturationGradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
+      saturationGradient.addColorStop(0, 'hsla(0, 0%, 100%, 1)'); // white
+
+      saturationGradient.addColorStop(1, `hsla(${this.color.hue}, 100%, 50%, 1)`);
+      ctx.fillStyle = saturationGradient;
+      ctx.fillRect(0, 0, canvas.width, canvas.height);
+      const valueGradient = ctx.createLinearGradient(0, 0, 0, canvas.height);
+      valueGradient.addColorStop(0, 'hsla(0, 0%, 100%, 0)'); // transparent
+
+      valueGradient.addColorStop(1, 'hsla(0, 0%, 0%, 1)'); // black
+
+      ctx.fillStyle = valueGradient;
+      ctx.fillRect(0, 0, canvas.width, canvas.height);
+    },
+
+    handleClick(e) {
+      if (this.disabled) return;
+      this.boundingRect = this.$el.getBoundingClientRect();
+      this.emitColor(e.clientX, e.clientY);
+    },
+
+    handleMouseDown(e) {
+      // To prevent selection while moving cursor
+      e.preventDefault();
+      if (this.disabled) return;
+      this.boundingRect = this.$el.getBoundingClientRect();
+      window.addEventListener('mousemove', this.handleMouseMove);
+      window.addEventListener('mouseup', this.handleMouseUp);
+    },
+
+    handleMouseMove(e) {
+      if (this.disabled) return;
+      this.emitColor(e.clientX, e.clientY);
+    },
+
+    handleMouseUp() {
+      window.removeEventListener('mousemove', this.handleMouseMove);
+      window.removeEventListener('mouseup', this.handleMouseUp);
+    },
+
+    genCanvas() {
+      return h('canvas', {
+        ref: 'canvas',
+        attrs: {
+          width: this.width,
+          height: this.height
+        }
+      });
+    },
+
+    genDot() {
+      const radius = parseInt(this.dotSize, 10) / 2;
+      const x = convertToUnit(this.dot.x - radius);
+      const y = convertToUnit(this.dot.y - radius);
+      return h('div', {
+        class: 'v-color-picker__canvas-dot',
+        class: {
+          'v-color-picker__canvas-dot--disabled': this.disabled
+        },
+        style: {
+          width: convertToUnit(this.dotSize),
+          height: convertToUnit(this.dotSize),
+          transform: `translate(${x}, ${y})`
+        }
+      });
+    }
+
+  },
+
+  render() {
+    return h('div', {
+      class: 'v-color-picker__canvas',
+      style: {
+        width: convertToUnit(this.width),
+        height: convertToUnit(this.height)
+      },
+      on: {
+        click: this.handleClick,
+        mousedown: this.handleMouseDown
+      }
+    }, [this.genCanvas(), this.genDot()]);
+  }
+
+});
+//# sourceMappingURL=VColorPickerCanvas.js.map

package/lib/components/VColorPicker/VColorPickerCanvas.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/VColorPicker/VColorPickerCanvas.ts"],"names":[],"mappings":"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","sourcesContent":["import {h} from 'vue'\n// Styles\nimport './VColorPickerCanvas.sass'\n\n// Helpers\nimport { clamp, convertToUnit } from '../../util/helpers'\nimport { fromHSVA, VColorPickerColor, fromRGBA } from './util'\n\n// Types\nimport { defineComponent, VNode, PropType } from 'vue'\n\nexport default defineComponent({\n  name: 'v-color-picker-canvas',\n\n  props: {\n    color: {\n      type: Object as PropType<VColorPickerColor>,\n      default: () => fromRGBA({ r: 255, g: 0, b: 0, a: 1 }),\n    },\n    disabled: Boolean,\n    dotSize: {\n      type: [Number, String],\n      default: 10,\n    },\n    height: {\n      type: [Number, String],\n      default: 150,\n    },\n    width: {\n      type: [Number, String],\n      default: 300,\n    },\n  },\n\n  data () {\n    return {\n      boundingRect: {\n        width: 0,\n        height: 0,\n        left: 0,\n        top: 0,\n      } as ClientRect,\n    }\n  },\n\n  computed: {\n    dot (): { x: number, y: number} {\n      if (!this.color) return { x: 0, y: 0 }\n\n      return {\n        x: this.color.hsva.s * parseInt(this.width, 10),\n        y: (1 - this.color.hsva.v) * parseInt(this.height, 10),\n      }\n    },\n  },\n\n  watch: {\n    'color.hue': 'updateCanvas',\n  },\n\n  mounted () {\n    this.updateCanvas()\n  },\n\n  methods: {\n    emitColor (x: number, y: number) {\n      const { left, top, width, height } = this.boundingRect\n\n      this.$emit('update:color', fromHSVA({\n        h: this.color.hue,\n        s: clamp(x - left, 0, width) / width,\n        v: 1 - clamp(y - top, 0, height) / height,\n        a: this.color.alpha,\n      }))\n    },\n    updateCanvas () {\n      if (!this.color) return\n\n      const canvas = this.$refs.canvas as HTMLCanvasElement\n      const ctx = canvas.getContext('2d')\n\n      if (!ctx) return\n\n      const saturationGradient = ctx.createLinearGradient(0, 0, canvas.width, 0)\n      saturationGradient.addColorStop(0, 'hsla(0, 0%, 100%, 1)') // white\n      saturationGradient.addColorStop(1, `hsla(${this.color.hue}, 100%, 50%, 1)`)\n      ctx.fillStyle = saturationGradient\n      ctx.fillRect(0, 0, canvas.width, canvas.height)\n\n      const valueGradient = ctx.createLinearGradient(0, 0, 0, canvas.height)\n      valueGradient.addColorStop(0, 'hsla(0, 0%, 100%, 0)') // transparent\n      valueGradient.addColorStop(1, 'hsla(0, 0%, 0%, 1)') // black\n      ctx.fillStyle = valueGradient\n      ctx.fillRect(0, 0, canvas.width, canvas.height)\n    },\n    handleClick (e: MouseEvent) {\n      if (this.disabled) return\n\n      this.boundingRect = this.$el.getBoundingClientRect()\n      this.emitColor(e.clientX, e.clientY)\n    },\n    handleMouseDown (e: MouseEvent) {\n      // To prevent selection while moving cursor\n      e.preventDefault()\n\n      if (this.disabled) return\n\n      this.boundingRect = this.$el.getBoundingClientRect()\n\n      window.addEventListener('mousemove', this.handleMouseMove)\n      window.addEventListener('mouseup', this.handleMouseUp)\n    },\n    handleMouseMove (e: MouseEvent) {\n      if (this.disabled) return\n\n      this.emitColor(e.clientX, e.clientY)\n    },\n    handleMouseUp () {\n      window.removeEventListener('mousemove', this.handleMouseMove)\n      window.removeEventListener('mouseup', this.handleMouseUp)\n    },\n    genCanvas (): VNode {\n      return h('canvas', {\n        ref: 'canvas',\n        attrs: {\n          width: this.width,\n          height: this.height,\n        },\n      })\n    },\n    genDot (): VNode {\n      const radius = parseInt(this.dotSize, 10) / 2\n      const x = convertToUnit(this.dot.x - radius)\n      const y = convertToUnit(this.dot.y - radius)\n\n      return h('div', {\n        class: 'v-color-picker__canvas-dot',\n        class: {\n          'v-color-picker__canvas-dot--disabled': this.disabled,\n        },\n        style: {\n          width: convertToUnit(this.dotSize),\n          height: convertToUnit(this.dotSize),\n          transform: `translate(${x}, ${y})`,\n        },\n      })\n    },\n  },\n\n  render (): VNode {\n    return h('div', {\n      class: 'v-color-picker__canvas',\n      style: {\n        width: convertToUnit(this.width),\n        height: convertToUnit(this.height),\n      },\n      on: {\n        click: this.handleClick,\n        mousedown: this.handleMouseDown,\n      },\n    }, [\n      this.genCanvas(),\n      this.genDot(),\n    ])\n  },\n})\n"],"sourceRoot":"","file":"VColorPickerCanvas.js"}