@kokoccc/vuetify 1.0.2 → 1.0.3

package/es5/components/VChipGroup/VChipGroup.js

@@ -0,0 +1,57 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+require("../../../src/components/VChipGroup/VChipGroup.sass");
+
+var _VSlideGroup = require("../VSlideGroup/VSlideGroup");
+
+var _colorable = _interopRequireDefault(require("../../mixins/colorable"));
+
+var _mixins = _interopRequireDefault(require("../../util/mixins"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+/* @vue/component */
+var _default = (0, _mixins.default)(_VSlideGroup.BaseSlideGroup, _colorable.default).extend({
+  name: 'v-chip-group',
+  provide: function provide() {
+    return {
+      chipGroup: this
+    };
+  },
+  props: {
+    column: Boolean
+  },
+  computed: {
+    classes: function classes() {
+      return _objectSpread(_objectSpread({}, _VSlideGroup.BaseSlideGroup.computed.classes.call(this)), {}, {
+        'v-chip-group': true,
+        'v-chip-group--column': this.column
+      });
+    }
+  },
+  watch: {
+    column: function column(val) {
+      if (val) this.scrollOffset = 0;
+      this.$nextTick(this.onResize);
+    }
+  },
+  methods: {
+    genData: function genData() {
+      return this.setTextColor(this.color, _objectSpread({}, _VSlideGroup.BaseSlideGroup.methods.genData.call(this)));
+    }
+  }
+});
+
+exports.default = _default;
+//# sourceMappingURL=VChipGroup.js.map

package/es5/components/VChipGroup/VChipGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/VChipGroup/VChipGroup.ts"],"names":[],"mappings":";;;;;;;AACA;;AAGA;;AAGA;;AAGA;;;;;;;;;;AAEA;eACe,qBACb,2BADa,EAEb,kBAFa,EAGb,MAHa,CAGN;AACP,EAAA,IAAI,EAAE,cADC;AAGP,EAAA,OAHO,qBAGA;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,OADQ,qBACD;AACL,6CACK,4BAAe,QAAf,CAAwB,OAAxB,CAAgC,IAAhC,CAAqC,IAArC,CADL;AAEE,wBAAgB,IAFlB;AAGE,gCAAwB,KAAK;AAH/B;AAKD;AAPO,GAbH;AAuBP,EAAA,KAAK,EAAE;AACL,IAAA,MADK,kBACG,GADH,EACM;AACT,UAAI,GAAJ,EAAS,KAAK,YAAL,GAAoB,CAApB;AAET,WAAK,SAAL,CAAe,KAAK,QAApB;AACD;AALI,GAvBA;AA+BP,EAAA,OAAO,EAAE;AACP,IAAA,OADO,qBACA;AACL,aAAO,KAAK,YAAL,CAAkB,KAAK,KAAvB,oBACF,4BAAe,OAAf,CAAuB,OAAvB,CAA+B,IAA/B,CAAoC,IAApC,CADE,EAAP;AAGD;AALM;AA/BF,CAHM,C","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/es5/components/VChipGroup/index.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "VChipGroup", {
+  enumerable: true,
+  get: function get() {
+    return _VChipGroup.default;
+  }
+});
+exports.default = void 0;
+
+var _VChipGroup = _interopRequireDefault(require("./VChipGroup"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = _VChipGroup.default;
+exports.default = _default;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/VChipGroup/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;AAAA;;;;eAGe,mB","sourcesContent":["import VChipGroup from './VChipGroup'\n\nexport { VChipGroup }\nexport default VChipGroup\n"],"sourceRoot":"","file":"index.js"}

package/es5/components/VColorPicker/VColorPicker.js

@@ -0,0 +1,205 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _vue = require("vue");
+
+require("../../../src/components/VColorPicker/VColorPicker.sass");
+
+var _VSheet = _interopRequireDefault(require("../VSheet/VSheet"));
+
+var _VColorPickerPreview = _interopRequireDefault(require("./VColorPickerPreview"));
+
+var _VColorPickerCanvas = _interopRequireDefault(require("./VColorPickerCanvas"));
+
+var _VColorPickerEdit = _interopRequireWildcard(require("./VColorPickerEdit"));
+
+var _VColorPickerSwatches = _interopRequireDefault(require("./VColorPickerSwatches"));
+
+var _util = require("./util");
+
+var _helpers = require("../../util/helpers");
+
+var _console = require("../../util/console");
+
+var _elevatable = _interopRequireDefault(require("../../mixins/elevatable"));
+
+var _themeable = _interopRequireDefault(require("../../mixins/themeable"));
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+var _default = (0, _vue.defineComponent)({
+  name: 'v-color-picker',
+  mixins: [_elevatable.default, _themeable.default],
+  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: function validator(v) {
+        return Object.keys(_VColorPickerEdit.modes).includes(v);
+      }
+    },
+    showSwatches: Boolean,
+    swatches: Array,
+    swatchesMaxHeight: {
+      type: [Number, String],
+      default: 150
+    },
+    modelValue: {
+      type: [Object, String]
+    },
+    width: {
+      type: [Number, String],
+      default: 300
+    }
+  },
+  emits: ['update:modelValue', 'update:color', 'update:mode'],
+  data: function data() {
+    return {
+      internalValue: (0, _util.fromRGBA)({
+        r: 255,
+        g: 0,
+        b: 0,
+        a: 1
+      })
+    };
+  },
+  computed: {
+    hideAlpha: function hideAlpha() {
+      if (!this.modelValue) return false;
+      return !(0, _util.hasAlpha)(this.modelValue);
+    }
+  },
+  created: function created() {
+    var _this = this;
+
+    var breakingProps = [['value', 'modelValue'], ['onInput', 'onUpdate:modelValue']];
+    /* istanbul ignore next */
+
+    breakingProps.forEach(function (_ref) {
+      var _ref2 = _slicedToArray(_ref, 2),
+          original = _ref2[0],
+          replacement = _ref2[1];
+
+      if (_this.$attrs.hasOwnProperty(original)) (0, _console.breaking)(original, replacement, _this);
+    });
+  },
+  watch: {
+    modelValue: {
+      handler: function handler(color) {
+        this.updateColor((0, _util.parseColor)(color, this.internalValue));
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    updateColor: function updateColor(color) {
+      this.internalValue = color;
+      var value = (0, _util.extractColor)(this.internalValue, this.modelValue);
+
+      if (!(0, _helpers.deepEqual)(value, this.modelValue)) {
+        this.$emit('update:modelValue', value);
+        this.$emit('update:color', this.internalValue);
+      }
+    },
+    genCanvas: function genCanvas() {
+      return (0, _vue.h)(_VColorPickerCanvas.default, {
+        color: this.internalValue,
+        disabled: this.disabled,
+        dotSize: this.dotSize,
+        width: this.width,
+        height: this.canvasHeight,
+        'onUpdate:color': this.updateColor
+      });
+    },
+    genControls: function genControls() {
+      return (0, _vue.h)('div', {
+        class: 'v-color-picker__controls'
+      }, [!this.hideSliders && this.genPreview(), !this.hideInputs && this.genEdit()]);
+    },
+    genEdit: function genEdit() {
+      var _this2 = this;
+
+      return (0, _vue.h)(_VColorPickerEdit.default, {
+        color: this.internalValue,
+        disabled: this.disabled,
+        hideAlpha: this.hideAlpha,
+        hideModeSwitch: this.hideModeSwitch,
+        mode: this.mode,
+        'onUpdate:color': this.updateColor,
+        'onUpdate:mode': function onUpdateMode(v) {
+          return _this2.$emit('update:mode', v);
+        }
+      });
+    },
+    genPreview: function genPreview() {
+      return (0, _vue.h)(_VColorPickerPreview.default, {
+        color: this.internalValue,
+        disabled: this.disabled,
+        hideAlpha: this.hideAlpha,
+        'onUpdate:color': this.updateColor
+      });
+    },
+    genSwatches: function genSwatches() {
+      return (0, _vue.h)(_VColorPickerSwatches.default, {
+        disabled: this.disabled,
+        swatches: this.swatches,
+        color: this.internalValue,
+        maxHeight: this.swatchesMaxHeight,
+        'onUpdate:color': this.updateColor
+      });
+    }
+  },
+  render: function render() {
+    return (0, _vue.h)(_VSheet.default, {
+      class: ['v-color-picker', _objectSpread(_objectSpread({
+        'v-color-picker--flat': this.flat
+      }, this.themeClasses), this.elevationClasses)],
+      maxWidth: this.width
+    }, [!this.hideCanvas && this.genCanvas(), (!this.hideSliders || !this.hideInputs) && this.genControls(), this.showSwatches && this.genSwatches()]);
+  }
+});
+
+exports.default = _default;
+//# sourceMappingURL=VColorPicker.js.map

package/es5/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, defineComponent } from 'vue'\n\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 { deepEqual } from '../../util/helpers'\nimport { breaking } from '../../util/console'\n\n// Mixins\nimport Elevatable from '../../mixins/elevatable'\nimport Themeable from '../../mixins/themeable'\n\n// Types\nimport type { VNode, PropType } from 'vue'\n\nexport default defineComponent({\n  name: 'v-color-picker',\n\n  mixins: [Elevatable, Themeable],\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    modelValue: {\n      type: [Object, String],\n    },\n    width: {\n      type: [Number, String],\n      default: 300,\n    },\n  },\n\n  emits: ['update:modelValue', 'update:color', 'update:mode'],\n\n  data () {\n    return {\n      internalValue: fromRGBA({ r: 255, g: 0, b: 0, a: 1 }),\n    }\n  },\n\n  computed: {\n    hideAlpha (): boolean {\n      if (!this.modelValue) return false\n      return !hasAlpha(this.modelValue)\n    },\n  },\n\n  created () {\n    const breakingProps = [\n      ['value', 'modelValue'],\n      ['onInput', 'onUpdate:modelValue'],\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  watch: {\n    modelValue: {\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.modelValue)\n\n      if (!deepEqual(value, this.modelValue)) {\n        this.$emit('update:modelValue', value)\n        this.$emit('update:color', this.internalValue)\n      }\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\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\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: string) => this.$emit('update:mode', v),\n      })\n    },\n\n    genPreview (): VNode {\n      return h(VColorPickerPreview, {\n        color: this.internalValue,\n        disabled: this.disabled,\n        hideAlpha: this.hideAlpha,\n        'onUpdate:color': this.updateColor,\n      })\n    },\n\n    genSwatches (): VNode {\n      return h(VColorPickerSwatches, {\n        disabled: this.disabled,\n        swatches: this.swatches,\n        color: this.internalValue,\n        maxHeight: this.swatchesMaxHeight,\n        'onUpdate:color': this.updateColor,\n      })\n    },\n  },\n\n  render (): VNode {\n    return h(VSheet, {\n      class: ['v-color-picker', {\n        'v-color-picker--flat': this.flat,\n        ...this.themeClasses,\n        ...this.elevationClasses,\n      }],\n      maxWidth: this.width,\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/es5/components/VColorPicker/VColorPickerCanvas.js

@@ -0,0 +1,169 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _vue = require("vue");
+
+require("../../../src/components/VColorPicker/VColorPickerCanvas.sass");
+
+var _helpers = require("../../util/helpers");
+
+var _util = require("./util");
+
+// Styles
+// Helpers
+var _default2 = (0, _vue.defineComponent)({
+  name: 'v-color-picker-canvas',
+  props: {
+    color: {
+      type: Object,
+      default: function _default() {
+        return (0, _util.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
+    }
+  },
+  emits: ['update:color'],
+  data: function data() {
+    return {
+      boundingRect: {
+        width: 0,
+        height: 0,
+        left: 0,
+        top: 0
+      }
+    };
+  },
+  computed: {
+    dot: function dot() {
+      if (!this.color) return {
+        x: 0,
+        y: 0
+      };
+      return {
+        x: this.color.hsva.s * parseInt(String(this.width), 10),
+        y: (1 - this.color.hsva.v) * parseInt(String(this.height), 10)
+      };
+    }
+  },
+  watch: {
+    'color.hue': function colorHue() {
+      this.updateCanvas();
+    }
+  },
+  mounted: function mounted() {
+    this.updateCanvas();
+  },
+  methods: {
+    updateCanvas: function updateCanvas() {
+      if (!this.color) return;
+      var canvas = this.$refs.canvas;
+      if (!canvas) return;
+      var ctx = canvas.getContext('2d');
+      if (!ctx) return;
+      var saturationGradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
+      saturationGradient.addColorStop(0, 'hsla(0, 0%, 100%, 1)'); // white
+
+      saturationGradient.addColorStop(1, "hsla(".concat(this.color.hue, ", 100%, 50%, 1)"));
+      ctx.fillStyle = saturationGradient;
+      ctx.fillRect(0, 0, canvas.width, canvas.height);
+      var 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);
+    },
+    emitColor: function emitColor(x, y) {
+      var _this$boundingRect = this.boundingRect,
+          left = _this$boundingRect.left,
+          top = _this$boundingRect.top,
+          width = _this$boundingRect.width,
+          height = _this$boundingRect.height;
+      this.$emit('update:color', (0, _util.fromHSVA)({
+        h: this.color.hue,
+        s: (0, _helpers.clamp)(x - left, 0, width) / width,
+        v: 1 - (0, _helpers.clamp)(y - top, 0, height) / height,
+        a: this.color.alpha
+      }));
+    },
+    handleClick: function handleClick(e) {
+      if (this.disabled) return;
+      this.boundingRect = this.$el.getBoundingClientRect();
+      this.emitColor(e.clientX, e.clientY);
+    },
+    handleMouseMove: function handleMouseMove(e) {
+      if (this.disabled) return;
+      this.emitColor(e.clientX, e.clientY);
+    },
+    handleMouseUp: function handleMouseUp() {
+      window.removeEventListener('mousemove', this.handleMouseMove);
+      window.removeEventListener('mouseup', this.handleMouseUp);
+    },
+    handleMouseDown: function 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);
+    },
+    genCanvas: function genCanvas() {
+      return (0, _vue.h)('canvas', {
+        ref: 'canvas',
+        width: this.width,
+        height: this.height
+      });
+    },
+    genDot: function genDot() {
+      var radius = parseInt(String(this.dotSize), 10) / 2;
+      var x = (0, _helpers.convertToUnit)(this.dot.x - radius);
+      var y = (0, _helpers.convertToUnit)(this.dot.y - radius);
+      return (0, _vue.h)('div', {
+        class: ['v-color-picker__canvas-dot', {
+          'v-color-picker__canvas-dot--disabled': this.disabled
+        }],
+        style: {
+          width: (0, _helpers.convertToUnit)(this.dotSize),
+          height: (0, _helpers.convertToUnit)(this.dotSize),
+          transform: "translate(".concat(x, ", ").concat(y, ")")
+        }
+      });
+    }
+  },
+  render: function render() {
+    return (0, _vue.h)('div', {
+      class: 'v-color-picker__canvas',
+      style: {
+        width: (0, _helpers.convertToUnit)(this.width),
+        height: (0, _helpers.convertToUnit)(this.height)
+      },
+      onClick: this.handleClick,
+      onMousedown: this.handleMouseDown
+    }, [this.genCanvas(), this.genDot()]);
+  }
+});
+
+exports.default = _default2;
+//# sourceMappingURL=VColorPickerCanvas.js.map

package/es5/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, defineComponent } from 'vue'\n\n// Styles\nimport './VColorPickerCanvas.sass'\n\n// Helpers\nimport { clamp, convertToUnit } from '../../util/helpers'\nimport { fromHSVA, VColorPickerColor, fromRGBA } from './util'\n\n// Types\nimport type { 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  emits: ['update:color'],\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 () {\n      if (!this.color) return { x: 0, y: 0 }\n\n      return {\n        x: this.color.hsva.s * parseInt(String(this.width), 10),\n        y: (1 - this.color.hsva.v) * parseInt(String(this.height), 10),\n      }\n    },\n  },\n\n  watch: {\n    'color.hue' () {\n      this.updateCanvas()\n    },\n  },\n\n  mounted () {\n    this.updateCanvas()\n  },\n\n  methods: {\n    updateCanvas () {\n      if (!this.color) return\n\n      const canvas = this.$refs.canvas as HTMLCanvasElement\n      if (!canvas) return\n\n      const ctx = canvas.getContext('2d')\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\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\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\n    handleMouseMove (e: MouseEvent) {\n      if (this.disabled) return\n      this.emitColor(e.clientX, e.clientY)\n    },\n\n    handleMouseUp () {\n      window.removeEventListener('mousemove', this.handleMouseMove)\n      window.removeEventListener('mouseup', this.handleMouseUp)\n    },\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\n    genCanvas (): VNode {\n      return h('canvas', {\n        ref: 'canvas',\n        width: this.width,\n        height: this.height,\n      })\n    },\n\n    genDot (): VNode {\n      const radius = parseInt(String(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          '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      onClick: this.handleClick,\n      onMousedown: this.handleMouseDown,\n    }, [\n      this.genCanvas(),\n      this.genDot(),\n    ])\n  },\n})\n"],"sourceRoot":"","file":"VColorPickerCanvas.js"}