@dimailn/vuetify 2.7.2-alpha23 → 2.7.2-alpha25

package/es5/components/VBadge/VBadge.js

@@ -15,7 +15,7 @@ var _colorable = _interopRequireDefault(require("../../mixins/colorable"));
 
 var _themeable = _interopRequireDefault(require("../../mixins/themeable"));
 
-var _toggleable = _interopRequireDefault(require("../../mixins/toggleable"));
+var _toggleable = require("../../mixins/toggleable");
 
 var _transitionable = _interopRequireDefault(require("../../mixins/transitionable"));
 
@@ -23,8 +23,6 @@ var _positionable = require("../../mixins/positionable");
 
 var _mergeData = _interopRequireDefault(require("../../util/mergeData"));
 
-var _mixins = _interopRequireDefault(require("../../util/mixins"));
-
 var _helpers = require("../../util/helpers");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -39,8 +37,11 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 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; }
 
-var _default = (0, _mixins.default)(_colorable.default, (0, _positionable.factory)(['left', 'bottom']), _themeable.default, _toggleable.default, _transitionable.default).extend({
+var Toggleable = (0, _toggleable.factory)('modelValue', 'update:modelValue');
+
+var _default2 = (0, _vue.defineComponent)({
   name: 'v-badge',
+  mixins: [_colorable.default, (0, _positionable.factory)(['left', 'bottom']), _themeable.default, Toggleable, _transitionable.default],
   props: {
     avatar: Boolean,
     bordered: Boolean,
@@ -66,7 +67,7 @@ var _default = (0, _mixins.default)(_colorable.default, (0, _positionable.factor
       type: String,
       default: 'scale-rotate-transition'
     },
-    value: {
+    modelValue: {
       default: true
     }
   },
@@ -143,19 +144,19 @@ var _default = (0, _mixins.default)(_colorable.default, (0, _positionable.factor
         'aria-label': label,
         'aria-live': this.$attrs['aria-live'] || 'polite',
         title: this.$attrs.title,
-        role: this.$attrs.role || 'status',
-        directives: [{
-          name: 'show',
-          value: this.isActive
-        }]
+        role: this.$attrs.role || 'status'
       });
-      var badge = (0, _vue.h)('span', data, [this.genBadgeContent()]);
+      var badge = (0, _vue.withDirectives)((0, _vue.h)('span', data, [this.genBadgeContent()]), [[_vue.vShow, this.isActive]]);
       if (!this.transition) return badge;
       return (0, _vue.h)(_vue.Transition, {
         name: this.transition,
         origin: this.origin,
         mode: this.mode
-      }, [badge]);
+      }, {
+        default: function _default() {
+          return [badge];
+        }
+      });
     },
     genBadgeContent: function genBadgeContent() {
       // Dot prop shows no content
@@ -163,7 +164,9 @@ var _default = (0, _mixins.default)(_colorable.default, (0, _positionable.factor
       var slot = (0, _helpers.getSlot)(this, 'badge');
       if (slot) return slot;
       if (this.content) return String(this.content);
-      if (this.icon) return (0, _vue.h)(_VIcon.default, this.icon);
+      if (this.icon) return (0, _vue.h)(_VIcon.default, {
+        icon: this.icon
+      });
       return undefined;
     },
     genBadgeWrapper: function genBadgeWrapper() {
@@ -191,5 +194,5 @@ var _default = (0, _mixins.default)(_colorable.default, (0, _positionable.factor
   }
 });
 
-exports.default = _default;
+exports.default = _default2;
 //# sourceMappingURL=VBadge.js.map

package/es5/components/VBadge/VBadge.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VBadge/VBadge.ts"],"names":[],"mappings":"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","sourcesContent":["import {Transition, h} from 'vue'\n// Styles\nimport './VBadge.sass'\n\n// Components\nimport VIcon from '../VIcon/VIcon'\n\n// Mixins\nimport Colorable from '../../mixins/colorable'\nimport Themeable from '../../mixins/themeable'\nimport Toggleable from '../../mixins/toggleable'\nimport Transitionable from '../../mixins/transitionable'\nimport { factory as PositionableFactory } from '../../mixins/positionable'\nimport mergeData from '../../util/mergeData'\n// Utilities\nimport mixins from '../../util/mixins'\nimport {\n  convertToUnit,\n  getSlot,\n} from '../../util/helpers'\n\n// Types\nimport { VNode } from 'vue'\n\nexport default mixins(\n  Colorable,\n  PositionableFactory(['left', 'bottom']),\n  Themeable,\n  Toggleable,\n  Transitionable,\n/* @vue/component */\n).extend({\n  name: 'v-badge',\n\n  props: {\n    avatar: Boolean,\n    bordered: Boolean,\n    color: {\n      type: String,\n      default: 'primary',\n    },\n    content: { required: false },\n    dot: Boolean,\n    label: {\n      type: String,\n      default: '$vuetify.badge',\n    },\n    icon: String,\n    inline: Boolean,\n    offsetX: [Number, String],\n    offsetY: [Number, String],\n    overlap: Boolean,\n    tile: Boolean,\n    transition: {\n      type: String,\n      default: 'scale-rotate-transition',\n    },\n    value: { default: true },\n  },\n\n  computed: {\n    classes (): object {\n      return {\n        'v-badge--avatar': this.avatar,\n        'v-badge--bordered': this.bordered,\n        'v-badge--bottom': this.bottom,\n        'v-badge--dot': this.dot,\n        'v-badge--icon': this.icon != null,\n        'v-badge--inline': this.inline,\n        'v-badge--left': this.left,\n        'v-badge--overlap': this.overlap,\n        'v-badge--tile': this.tile,\n        ...this.themeClasses,\n      }\n    },\n    computedBottom (): string {\n      return this.bottom ? 'auto' : this.computedYOffset\n    },\n    computedLeft (): string {\n      if (this.isRtl) {\n        return this.left ? this.computedXOffset : 'auto'\n      }\n\n      return this.left ? 'auto' : this.computedXOffset\n    },\n    computedRight (): string {\n      if (this.isRtl) {\n        return this.left ? 'auto' : this.computedXOffset\n      }\n\n      return !this.left ? 'auto' : this.computedXOffset\n    },\n    computedTop (): string {\n      return this.bottom ? this.computedYOffset : 'auto'\n    },\n    computedXOffset (): string {\n      return this.calcPosition(this.offsetX)\n    },\n    computedYOffset (): string {\n      return this.calcPosition(this.offsetY)\n    },\n    isRtl (): boolean {\n      return this.$vuetify.rtl\n    },\n    // Default fallback if offsetX\n    // or offsetY are undefined.\n    offset (): number {\n      if (this.overlap) return this.dot ? 8 : 12\n      return this.dot ? 2 : 4\n    },\n    styles (): object {\n      if (this.inline) return {}\n\n      return {\n        bottom: this.computedBottom,\n        left: this.computedLeft,\n        right: this.computedRight,\n        top: this.computedTop,\n      }\n    },\n  },\n\n  methods: {\n    calcPosition (offset: string | number): string {\n      return `calc(100% - ${convertToUnit(offset || this.offset)})`\n    },\n    genBadge () {\n      const lang = this.$vuetify.lang\n      const label = this.$attrs['aria-label'] || lang.t(this.label)\n\n      const data = this.setBackgroundColor(this.color, {\n        class: 'v-badge__badge',\n        style: this.styles,\n        'aria-atomic': this.$attrs['aria-atomic'] || 'true',\n        'aria-label': label,\n        'aria-live': this.$attrs['aria-live'] || 'polite',\n        title: this.$attrs.title,\n        role: this.$attrs.role || 'status',\n        directives: [{\n          name: 'show',\n          value: this.isActive,\n        }],\n      })\n\n      const badge = h('span', data, [this.genBadgeContent()])\n\n      if (!this.transition) return badge\n\n      return h(Transition, {\n        name: this.transition,\n        origin: this.origin,\n        mode: this.mode,\n      }, [badge])\n    },\n    genBadgeContent () {\n      // Dot prop shows no content\n      if (this.dot) return undefined\n\n      const slot = getSlot(this, 'badge')\n\n      if (slot) return slot\n      if (this.content) return String(this.content)\n      if (this.icon) return h(VIcon, this.icon)\n\n      return undefined\n    },\n    genBadgeWrapper () {\n      return h('span', {\n        class: 'v-badge__wrapper',\n      }, [this.genBadge()])\n    },\n  },\n\n  render (): VNode {\n    const badge = [this.genBadgeWrapper()]\n    const children = [getSlot(this)]\n    const {\n      'aria-atomic': _x,\n      'aria-label': _y,\n      'aria-live': _z,\n      role,\n      title,\n      ...attrs\n    } = this.$attrs\n\n    if (this.inline && this.left) children.unshift(badge)\n    else children.push(badge)\n\n    return h('span', mergeData({\n      class: ['v-badge', this.classes]\n    }, attrs)\n    , children)\n  },\n})\n"],"sourceRoot":"","file":"VBadge.js"}
+{"version":3,"sources":["../../../src/components/VBadge/VBadge.ts"],"names":[],"mappings":"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","sourcesContent":["import { Transition, h, defineComponent, VNode, withDirectives, vShow } from 'vue'\n// Styles\nimport './VBadge.sass'\n\n// Components\nimport VIcon from '../VIcon/VIcon'\n\n// Mixins\nimport Colorable from '../../mixins/colorable'\nimport Themeable from '../../mixins/themeable'\nimport { factory as ToggleableFactory } from '../../mixins/toggleable'\nimport Transitionable from '../../mixins/transitionable'\nimport { factory as PositionableFactory } from '../../mixins/positionable'\nimport mergeData from '../../util/mergeData'\n// Utilities\nimport {\n  convertToUnit,\n  getSlot,\n} from '../../util/helpers'\n\nconst Toggleable = ToggleableFactory('modelValue', 'update:modelValue')\n\nexport default defineComponent({\n  name: 'v-badge',\n\n  mixins: [\n    Colorable,\n    PositionableFactory(['left', 'bottom']),\n    Themeable,\n    Toggleable,\n    Transitionable,\n  ],\n\n  props: {\n    avatar: Boolean,\n    bordered: Boolean,\n    color: {\n      type: String,\n      default: 'primary',\n    },\n    content: { required: false },\n    dot: Boolean,\n    label: {\n      type: String,\n      default: '$vuetify.badge',\n    },\n    icon: String,\n    inline: Boolean,\n    offsetX: [Number, String],\n    offsetY: [Number, String],\n    overlap: Boolean,\n    tile: Boolean,\n    transition: {\n      type: String,\n      default: 'scale-rotate-transition',\n    },\n    modelValue: { default: true },\n  },\n\n  computed: {\n    classes (): object {\n      return {\n        'v-badge--avatar': this.avatar,\n        'v-badge--bordered': this.bordered,\n        'v-badge--bottom': this.bottom,\n        'v-badge--dot': this.dot,\n        'v-badge--icon': this.icon != null,\n        'v-badge--inline': this.inline,\n        'v-badge--left': this.left,\n        'v-badge--overlap': this.overlap,\n        'v-badge--tile': this.tile,\n        ...this.themeClasses,\n      }\n    },\n    computedBottom (): string {\n      return this.bottom ? 'auto' : this.computedYOffset\n    },\n    computedLeft (): string {\n      if (this.isRtl) {\n        return this.left ? this.computedXOffset : 'auto'\n      }\n\n      return this.left ? 'auto' : this.computedXOffset\n    },\n    computedRight (): string {\n      if (this.isRtl) {\n        return this.left ? 'auto' : this.computedXOffset\n      }\n\n      return !this.left ? 'auto' : this.computedXOffset\n    },\n    computedTop (): string {\n      return this.bottom ? this.computedYOffset : 'auto'\n    },\n    computedXOffset (): string {\n      return this.calcPosition(this.offsetX)\n    },\n    computedYOffset (): string {\n      return this.calcPosition(this.offsetY)\n    },\n    isRtl (): boolean {\n      return this.$vuetify.rtl\n    },\n    // Default fallback if offsetX\n    // or offsetY are undefined.\n    offset (): number {\n      if (this.overlap) return this.dot ? 8 : 12\n      return this.dot ? 2 : 4\n    },\n    styles (): object {\n      if (this.inline) return {}\n\n      return {\n        bottom: this.computedBottom,\n        left: this.computedLeft,\n        right: this.computedRight,\n        top: this.computedTop,\n      }\n    },\n  },\n\n  methods: {\n    calcPosition (offset: string | number): string {\n      return `calc(100% - ${convertToUnit(offset || this.offset)})`\n    },\n    genBadge () {\n      const lang = this.$vuetify.lang\n      const label = this.$attrs['aria-label'] || lang.t(this.label)\n\n      const data = this.setBackgroundColor(this.color, {\n        class: 'v-badge__badge',\n        style: this.styles,\n        'aria-atomic': this.$attrs['aria-atomic'] || 'true',\n        'aria-label': label,\n        'aria-live': this.$attrs['aria-live'] || 'polite',\n        title: this.$attrs.title,\n        role: this.$attrs.role || 'status',\n      })\n\n      const badge = withDirectives(\n        h('span', data, [this.genBadgeContent()]),\n        [[vShow, this.isActive]]\n      )\n\n      if (!this.transition) return badge\n\n      return h(Transition, {\n        name: this.transition,\n        origin: this.origin,\n        mode: this.mode,\n      }, {\n        default: () => [badge],\n      })\n    },\n    genBadgeContent () {\n      // Dot prop shows no content\n      if (this.dot) return undefined\n\n      const slot = getSlot(this, 'badge')\n\n      if (slot) return slot\n      if (this.content) return String(this.content)\n      if (this.icon) return h(VIcon, { icon: this.icon })\n\n      return undefined\n    },\n    genBadgeWrapper () {\n      return h('span', {\n        class: 'v-badge__wrapper',\n      }, [this.genBadge()])\n    },\n  },\n\n  render (): VNode {\n    const badge = [this.genBadgeWrapper()]\n    const children = [getSlot(this)]\n    const {\n      'aria-atomic': _x,\n      'aria-label': _y,\n      'aria-live': _z,\n      role,\n      title,\n      ...attrs\n    } = this.$attrs\n\n    if (this.inline && this.left) children.unshift(badge)\n    else children.push(badge)\n\n    return h('span', mergeData({\n      class: ['v-badge', this.classes],\n    }, attrs), children)\n  },\n})\n"],"sourceRoot":"","file":"VBadge.js"}

package/es5/components/VBtn/VBtn.js

@@ -15,8 +15,6 @@ var _groupable = require("../../mixins/groupable");
 
 var _toggleable = require("../../mixins/toggleable");
 
-var _elevatable = _interopRequireDefault(require("../../mixins/elevatable"));
-
 var _positionable = _interopRequireDefault(require("../../mixins/positionable"));
 
 var _routable = _interopRequireDefault(require("../../mixins/routable"));
@@ -29,8 +27,6 @@ var _console = require("../../util/console");
 
 var _helpers = require("../../util/helpers");
 
-var _mergeData = _interopRequireDefault(require("../../util/mergeData"));
-
 var _vue = require("vue");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -61,7 +57,6 @@ var baseMixins = (0, _mixins.default)(_VSheet.default, _routable.default, _posit
 
 var _default = baseMixins.extend({
   name: 'v-btn',
-  inheritAttrs: false,
   props: {
     activeClass: {
       type: String
@@ -121,7 +116,7 @@ var _default = baseMixins.extend({
     },
     computedElevation: function computedElevation() {
       if (this.disabled) return undefined;
-      return _elevatable.default.computed.computedElevation.call(this);
+      return this.elevation;
     },
     computedRipple: function computedRipple() {
       var _a;
@@ -189,20 +184,25 @@ var _default = baseMixins.extend({
         linkData = _this$generateRouteLi.data,
         directives = _this$generateRouteLi.directives;
 
-    var setColor = this.hasBg ? this.setBackgroundColor : this.setTextColor;
-    var data = {};
+    var setColor = this.hasBg ? this.setBackgroundColor : this.setTextColor; // Merge component classes with routable classes
+
+    var mergedClasses = _objectSpread(_objectSpread({}, this.classes), linkData.class);
 
     if (tag === 'button') {
-      data.type = this.type;
-      data.disabled = this.disabled;
+      linkData.type = this.type;
+      linkData.disabled = this.disabled;
     }
 
-    data.value = ['string', 'number'].includes(_typeof(this.value)) ? this.value : JSON.stringify(this.value);
-    data = _objectSpread(_objectSpread({}, data), linkData);
-    data = (0, _mergeData.default)(data, {
-      class: this.$attrs.class
-    });
-    return (0, _vue.withDirectives)((0, _vue.h)(tag, this.disabled ? data : setColor(this.color, data), children), directives);
+    linkData.value = ['string', 'number'].includes(_typeof(this.value)) ? this.value : JSON.stringify(this.value);
+
+    var data = _objectSpread(_objectSpread({}, linkData), {}, {
+      class: mergedClasses,
+      style: this.styles
+    }); // Apply color styling but preserve Vue's automatic attribute inheritance
+
+
+    var finalData = this.disabled ? data : setColor(this.color, data);
+    return (0, _vue.withDirectives)((0, _vue.h)(tag, finalData, children), directives);
   }
 });
 

package/es5/components/VBtn/VBtn.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VBtn/VBtn.ts"],"names":[],"mappings":";;;;;;;AACA;;AAGA;;AAGA;;AAGA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAGA;;AACA;;AACA;;AACA;;AAGA;;;;;;;;;;;;;;;;;;;;;;;;AAKA,IAAM,UAAU,GAAG,qBACjB,eADiB,EAEjB,iBAFiB,EAGjB,qBAHiB,EAIjB,iBAJiB,EAKjB,wBAAiB,WAAjB,CALiB,EAMjB,yBAAkB,YAAlB;AACA;AAPiB,CAAnB;;eAae,UAAU,CAAC,MAAX,CAAkB;AAC/B,EAAA,IAAI,EAAE,OADyB;AAE/B,EAAA,YAAY,EAAE,KAFiB;AAG/B,EAAA,KAAK,EAAE;AACL,IAAA,WAAW,EAAE;AACX,MAAA,IAAI,EAAE;AADK,KADR;AAIL,IAAA,KAAK,EAAE,OAJF;AAKL,IAAA,SAAS,EAAE,OALN;AAML,IAAA,GAAG,EAAE,OANA;AAOL,IAAA,IAAI,EAAE,OAPD;AAQL,IAAA,OAAO,EAAE,OARJ;AASL,IAAA,QAAQ,EAAE,OATL;AAUL,IAAA,KAAK,EAAE,OAVF;AAWL,IAAA,kBAAkB,EAAE,OAXf;AAYL,IAAA,OAAO,EAAE,OAZJ;AAaL,IAAA,GAAG,EAAE;AACH,MAAA,IAAI,EAAE,MADH;AAEH,MAAA,OAAO,EAAE;AAFN,KAbA;AAiBL,IAAA,IAAI,EAAE,OAjBD;AAkBL,IAAA,IAAI,EAAE,OAlBD;AAmBL,IAAA,IAAI,EAAE;AACJ,MAAA,IAAI,EAAE,MADF;AAEJ,MAAA,OAAO,EAAE;AAFL,KAnBD;AAuBL,IAAA,KAAK,EAAE;AAvBF,GAHwB;AA6B/B,EAAA,IAAI,EAAE;AAAA,WAAO;AACX,MAAA,UAAU,EAAE;AADD,KAAP;AAAA,GA7ByB;AAiC/B,EAAA,QAAQ,EAAE;AACR,IAAA,OADQ,qBACD;AACL;AACE,iBAAS;AADX,SAEK,kBAAS,QAAT,CAAkB,OAAlB,CAA0B,IAA1B,CAA+B,IAA/B,CAFL;AAGE,2BAAmB,KAAK,QAH1B;AAIE,wBAAgB,KAAK,KAJvB;AAKE,yBAAiB,KAAK,MALxB;AAME,2BAAmB,KAAK,QAN1B;AAOE,8BAAsB,KAAK,UAP7B;AAQE,sBAAc,KAAK,GARrB;AASE,wBAAgB,KAAK,KATvB;AAUE,yBAAiB,KAAK,KAVxB;AAWE,uBAAe,KAAK,IAXtB;AAYE,uBAAe,KAAK,IAZtB;AAaE,0BAAkB,KAAK,OAbzB;AAcE,2BAAmB,KAAK,QAd1B;AAeE,wBAAgB,KAAK,KAfvB;AAgBE,wBAAgB,KAAK,KAhBvB;AAiBE,wBAAgB,KAAK,OAjBvB;AAkBE,0BAAkB,KAAK,OAlBzB;AAmBE,yBAAiB,KAAK,EAnBxB;AAoBE,uBAAe,KAAK,IApBtB;AAqBE,uBAAe,KAAK,IArBtB;AAsBE,sBAAc,KAAK;AAtBrB,SAuBK,KAAK,YAvBV,GAwBK,KAAK,YAxBV,GAyBK,KAAK,gBAzBV,GA0BK,KAAK,eA1BV;AA4BD,KA9BO;AA+BR,IAAA,iBA/BQ,+BA+BS;AACf,UAAI,KAAK,QAAT,EAAmB,OAAO,SAAP;AAEnB,aAAO,oBAAW,QAAX,CAAoB,iBAApB,CAAsC,IAAtC,CAA2C,IAA3C,CAAP;AACD,KAnCO;AAoCR,IAAA,cApCQ,4BAoCM;;;AACZ,UAAM,aAAa,GAAG,KAAK,IAAL,IAAa,KAAK,GAAlB,GAAwB;AAAE,QAAA,MAAM,EAAE;AAAV,OAAxB,GAA2C,IAAjE;AACA,UAAI,KAAK,QAAT,EAAmB,OAAO,KAAP,CAAnB,KACK,OAAO,CAAA,EAAA,GAAA,KAAK,MAAL,MAAW,IAAX,IAAW,EAAA,KAAA,KAAA,CAAX,GAAW,EAAX,GAAe,aAAtB;AACN,KAxCO;AAyCR,IAAA,KAzCQ,mBAyCH;AACH,aAAO,CAAC,KAAK,IAAN,IAAc,CAAC,KAAK,KAApB,IAA6B,CAAC,KAAK,QAAnC,IAA+C,CAAC,KAAK,IAA5D;AACD,KA3CO;AA4CR,IAAA,UA5CQ,wBA4CE;AACR,aAAO,OAAO,CACZ,CAAC,KAAK,IAAN,IACA,CAAC,KAAK,IADN,IAEA,CAAC,KAAK,QAFN,IAGA,CAAC,KAAK,SAHN,IAIA,CAAC,KAAK,QAJN,IAKA,CAAC,KAAK,KALN,KAMC,KAAK,SAAL,IAAkB,IAAlB,IAA0B,MAAM,CAAC,KAAK,SAAN,CAAN,GAAyB,CANpD,CADY,CAAd;AASD,KAtDO;AAuDR,IAAA,OAvDQ,qBAuDD;AACL,aAAO,OAAO,CACZ,KAAK,IAAL,IACA,KAAK,GAFO,CAAd;AAID,KA5DO;AA6DR,IAAA,MA7DQ,oBA6DF;AACJ,+BACK,KAAK,gBADV;AAGD;AAjEO,GAjCqB;AAqG/B,EAAA,OArG+B,qBAqGxB;AAAA;;AACL,QAAM,aAAa,GAAG,CACpB,CAAC,MAAD,EAAS,MAAT,CADoB,EAEpB,CAAC,SAAD,EAAY,UAAZ,CAFoB,EAGpB,CAAC,OAAD,EAAU,SAAV,CAHoB,CAAtB;AAMA;;AACA,IAAA,aAAa,CAAC,OAAd,CAAsB,gBAA4B;AAAA;AAAA,UAA1B,QAA0B;AAAA,UAAhB,WAAgB;;AAChD,UAAI,KAAI,CAAC,MAAL,CAAY,cAAZ,CAA2B,QAA3B,CAAJ,EAA0C,uBAAS,QAAT,EAAmB,WAAnB,EAAgC,KAAhC;AAC3C,KAFD;AAGD,GAhH8B;AAkH/B,EAAA,OAAO,EAAE;AACP,IAAA,KADO,iBACA,CADA,EACa;AAClB;AACA,OAAC,KAAK,kBAAN,IAA4B,CAAC,KAAK,GAAlC,IAAyC,CAAC,CAAC,MAA3C,IAAqD,KAAK,GAAL,CAAS,IAAT,EAArD;AACA,WAAK,KAAL,CAAW,OAAX,EAAoB,CAApB;AACA,WAAK,WAAL,CAAiB,OAAjB,EAA0B,CAA1B;AAGA,WAAK,SAAL,IAAkB,KAAK,MAAL,EAAlB;AACD,KATM;AAUP,IAAA,UAVO,wBAUG;AACR,aAAO,YAAE,MAAF,EAAU;AACf,QAAA,KAAK,EAAE;AADQ,OAAV,EAEJ,sBAAQ,IAAR,CAFI,CAAP;AAGD,KAdM;AAeP,IAAA,SAfO,uBAeE;AACP,aAAO,YAAE,MAAF,EAAU;AACf,QAAA,KAAK,EAAE;AADQ,OAAV,EAEJ,sBAAQ,IAAR,EAAc,QAAd,KAA2B,CAAC,YAAE,0BAAF,EAAqB;AAClD,QAAA,aAAa,EAAE,IADmC;AAElD,QAAA,IAAI,EAAE,EAF4C;AAGlD,QAAA,KAAK,EAAE;AAH2C,OAArB,CAAD,CAFvB,CAAP;AAOD;AAvBM,GAlHsB;AA4I/B,EAAA,MA5I+B,oBA4IzB;AACJ,QAAM,QAAQ,GAAG,CACf,KAAK,UAAL,EADe,EAEf,KAAK,OAAL,IAAgB,KAAK,SAAL,EAFD,CAAjB;;AADI,gCAKwC,KAAK,iBAAL,EALxC;AAAA,QAKI,GALJ,yBAKI,GALJ;AAAA,QAKe,QALf,yBAKS,IALT;AAAA,QAKyB,UALzB,yBAKyB,UALzB;;AAMJ,QAAM,QAAQ,GAAG,KAAK,KAAL,GACb,KAAK,kBADQ,GAEb,KAAK,YAFT;AAIA,QAAI,IAAI,GAAG,EAAX;;AAEA,QAAI,GAAG,KAAK,QAAZ,EAAsB;AACpB,MAAA,IAAI,CAAC,IAAL,GAAY,KAAK,IAAjB;AACA,MAAA,IAAI,CAAC,QAAL,GAAgB,KAAK,QAArB;AACD;;AACD,IAAA,IAAI,CAAC,KAAL,GAAa,CAAC,QAAD,EAAW,QAAX,EAAqB,QAArB,SAAqC,KAAK,KAA1C,KACT,KAAK,KADI,GAET,IAAI,CAAC,SAAL,CAAe,KAAK,KAApB,CAFJ;AAIA,IAAA,IAAI,mCACC,IADD,GAEC,QAFD,CAAJ;AAKA,IAAA,IAAI,GAAG,wBAAU,IAAV,EAAgB;AAAE,MAAA,KAAK,EAAE,KAAK,MAAL,CAAY;AAArB,KAAhB,CAAP;AAEA,WAAO,yBACL,YAAE,GAAF,EAAO,KAAK,QAAL,GAAgB,IAAhB,GAAuB,QAAQ,CAAC,KAAK,KAAN,EAAa,IAAb,CAAtC,EAA0D,QAA1D,CADK,EAEL,UAFK,CAAP;AAID;AA3K8B,CAAlB,C","sourcesContent":["// Styles\nimport './VBtn.sass'\n\n// Extensions\nimport VSheet from '../VSheet'\n\n// Components\nimport VProgressCircular from '../VProgressCircular'\n\n// Mixins\nimport { factory as GroupableFactory } from '../../mixins/groupable'\nimport { factory as ToggleableFactory } from '../../mixins/toggleable'\nimport Elevatable from '../../mixins/elevatable'\nimport Positionable from '../../mixins/positionable'\nimport Routable from '../../mixins/routable'\nimport Sizeable from '../../mixins/sizeable'\n\n// Utilities\nimport mixins, { ExtractVue } from '../../util/mixins'\nimport { breaking } from '../../util/console'\nimport { getSlot } from '../../util/helpers'\nimport mergeData from '../../util/mergeData'\n\n// Types\nimport { VNode, withDirectives } from 'vue'\nimport { PropValidator, PropType } from 'vue/types/options'\nimport { RippleOptions } from '../../directives/ripple'\nimport {h} from 'vue'\n\nconst baseMixins = mixins(\n  VSheet,\n  Routable,\n  Positionable,\n  Sizeable,\n  GroupableFactory('btnToggle'),\n  ToggleableFactory('inputValue')\n  /* @vue/component */\n)\ninterface options extends ExtractVue<typeof baseMixins> {\n  $el: HTMLElement\n}\n\nexport default baseMixins.extend({\n  name: 'v-btn',\n  inheritAttrs: false,\n  props: {\n    activeClass: {\n      type: String,\n    } as any as PropValidator<string>,\n    block: Boolean,\n    depressed: Boolean,\n    fab: Boolean,\n    icon: Boolean,\n    loading: Boolean,\n    outlined: Boolean,\n    plain: Boolean,\n    retainFocusOnClick: Boolean,\n    rounded: Boolean,\n    tag: {\n      type: String,\n      default: 'button',\n    },\n    text: Boolean,\n    tile: Boolean,\n    type: {\n      type: String,\n      default: 'button',\n    },\n    value: null as any as PropType<any>,\n  },\n\n  data: () => ({\n    proxyClass: 'v-btn--active',\n  }),\n\n  computed: {\n    classes (): any {\n      return {\n        'v-btn': true,\n        ...Routable.computed.classes.call(this),\n        'v-btn--absolute': this.absolute,\n        'v-btn--block': this.block,\n        'v-btn--bottom': this.bottom,\n        'v-btn--disabled': this.disabled,\n        'v-btn--is-elevated': this.isElevated,\n        'v-btn--fab': this.fab,\n        'v-btn--fixed': this.fixed,\n        'v-btn--has-bg': this.hasBg,\n        'v-btn--icon': this.icon,\n        'v-btn--left': this.left,\n        'v-btn--loading': this.loading,\n        'v-btn--outlined': this.outlined,\n        'v-btn--plain': this.plain,\n        'v-btn--right': this.right,\n        'v-btn--round': this.isRound,\n        'v-btn--rounded': this.rounded,\n        'v-btn--router': this.to,\n        'v-btn--text': this.text,\n        'v-btn--tile': this.tile,\n        'v-btn--top': this.top,\n        ...this.themeClasses,\n        ...this.groupClasses,\n        ...this.elevationClasses,\n        ...this.sizeableClasses,\n      }\n    },\n    computedElevation (): string | number | undefined {\n      if (this.disabled) return undefined\n\n      return Elevatable.computed.computedElevation.call(this)\n    },\n    computedRipple (): RippleOptions | boolean {\n      const defaultRipple = this.icon || this.fab ? { circle: true } : true\n      if (this.disabled) return false\n      else return this.ripple ?? defaultRipple\n    },\n    hasBg (): boolean {\n      return !this.text && !this.plain && !this.outlined && !this.icon\n    },\n    isElevated (): boolean {\n      return Boolean(\n        !this.icon &&\n        !this.text &&\n        !this.outlined &&\n        !this.depressed &&\n        !this.disabled &&\n        !this.plain &&\n        (this.elevation == null || Number(this.elevation) > 0)\n      )\n    },\n    isRound (): boolean {\n      return Boolean(\n        this.icon ||\n        this.fab\n      )\n    },\n    styles (): object {\n      return {\n        ...this.measurableStyles,\n      }\n    },\n  },\n\n  created () {\n    const breakingProps = [\n      ['flat', 'text'],\n      ['outline', 'outlined'],\n      ['round', 'rounded'],\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      // TODO: Remove this in v3\n      !this.retainFocusOnClick && !this.fab && e.detail && this.$el.blur()\n      this.$emit('click', e)\n      this.$emitLegacy('click', e)\n\n\n      this.btnToggle && this.toggle()\n    },\n    genContent (): VNode {\n      return h('span', {\n        class: 'v-btn__content',\n      }, getSlot(this))\n    },\n    genLoader (): VNode {\n      return h('span', {\n        class: 'v-btn__loader',\n      }, getSlot(this, 'loader') || [h(VProgressCircular, {\n        indeterminate: true,\n        size: 23,\n        width: 2\n      })])\n    },\n  },\n\n  render (): VNode {\n    const children = [\n      this.genContent(),\n      this.loading && this.genLoader(),\n    ]\n    const { tag, data: linkData, directives } = this.generateRouteLink()\n    const setColor = this.hasBg\n      ? this.setBackgroundColor\n      : this.setTextColor\n\n    let data = {}\n\n    if (tag === 'button') {\n      data.type = this.type\n      data.disabled = this.disabled\n    }\n    data.value = ['string', 'number'].includes(typeof this.value)\n      ? this.value\n      : JSON.stringify(this.value)\n\n    data = {\n      ...data,\n      ...linkData\n    }\n\n    data = mergeData(data, { class: this.$attrs.class })\n\n    return withDirectives(\n      h(tag, this.disabled ? data : setColor(this.color, data), children),\n      directives\n    )\n  },\n})\n"],"sourceRoot":"","file":"VBtn.js"}
+{"version":3,"sources":["../../../src/components/VBtn/VBtn.ts"],"names":[],"mappings":"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","sourcesContent":["// Styles\nimport './VBtn.sass'\n\n// Extensions\nimport VSheet from '../VSheet'\n\n// Components\nimport VProgressCircular from '../VProgressCircular'\n\n// Mixins\nimport { factory as GroupableFactory } from '../../mixins/groupable'\nimport { factory as ToggleableFactory } from '../../mixins/toggleable'\nimport Elevatable from '../../mixins/elevatable'\nimport Positionable from '../../mixins/positionable'\nimport Routable from '../../mixins/routable'\nimport Sizeable from '../../mixins/sizeable'\n\n// Utilities\nimport mixins, { ExtractVue } from '../../util/mixins'\nimport { breaking } from '../../util/console'\nimport { getSlot } from '../../util/helpers'\n\n// Types\nimport { VNode, withDirectives, h } from 'vue'\nimport { PropValidator, PropType } from 'vue/types/options'\nimport { RippleOptions } from '../../directives/ripple'\n\nconst baseMixins = mixins(\n  VSheet,\n  Routable,\n  Positionable,\n  Sizeable,\n  GroupableFactory('btnToggle'),\n  ToggleableFactory('inputValue')\n  /* @vue/component */\n)\ninterface options extends ExtractVue<typeof baseMixins> {\n  $el: HTMLElement\n}\n\nexport default baseMixins.extend({\n  name: 'v-btn',\n  props: {\n    activeClass: {\n      type: String,\n    } as any as PropValidator<string>,\n    block: Boolean,\n    depressed: Boolean,\n    fab: Boolean,\n    icon: Boolean,\n    loading: Boolean,\n    outlined: Boolean,\n    plain: Boolean,\n    retainFocusOnClick: Boolean,\n    rounded: Boolean,\n    tag: {\n      type: String,\n      default: 'button',\n    },\n    text: Boolean,\n    tile: Boolean,\n    type: {\n      type: String,\n      default: 'button',\n    },\n    value: null as any as PropType<any>,\n  },\n\n  data: () => ({\n    proxyClass: 'v-btn--active',\n  }),\n\n  computed: {\n    classes (): any {\n      return {\n        'v-btn': true,\n        ...Routable.computed.classes.call(this),\n        'v-btn--absolute': this.absolute,\n        'v-btn--block': this.block,\n        'v-btn--bottom': this.bottom,\n        'v-btn--disabled': this.disabled,\n        'v-btn--is-elevated': this.isElevated,\n        'v-btn--fab': this.fab,\n        'v-btn--fixed': this.fixed,\n        'v-btn--has-bg': this.hasBg,\n        'v-btn--icon': this.icon,\n        'v-btn--left': this.left,\n        'v-btn--loading': this.loading,\n        'v-btn--outlined': this.outlined,\n        'v-btn--plain': this.plain,\n        'v-btn--right': this.right,\n        'v-btn--round': this.isRound,\n        'v-btn--rounded': this.rounded,\n        'v-btn--router': this.to,\n        'v-btn--text': this.text,\n        'v-btn--tile': this.tile,\n        'v-btn--top': this.top,\n        ...this.themeClasses,\n        ...this.groupClasses,\n        ...this.elevationClasses,\n        ...this.sizeableClasses,\n      }\n    },\n    computedElevation (): string | number | undefined {\n      if (this.disabled) return undefined\n\n      return this.elevation\n    },\n    computedRipple (): RippleOptions | boolean {\n      const defaultRipple = this.icon || this.fab ? { circle: true } : true\n      if (this.disabled) return false\n      else return this.ripple ?? defaultRipple\n    },\n    hasBg (): boolean {\n      return !this.text && !this.plain && !this.outlined && !this.icon\n    },\n    isElevated (): boolean {\n      return Boolean(\n        !this.icon &&\n        !this.text &&\n        !this.outlined &&\n        !this.depressed &&\n        !this.disabled &&\n        !this.plain &&\n        (this.elevation == null || Number(this.elevation) > 0)\n      )\n    },\n    isRound (): boolean {\n      return Boolean(\n        this.icon ||\n        this.fab\n      )\n    },\n    styles (): object {\n      return {\n        ...this.measurableStyles,\n      }\n    },\n  },\n\n  created () {\n    const breakingProps = [\n      ['flat', 'text'],\n      ['outline', 'outlined'],\n      ['round', 'rounded'],\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      // TODO: Remove this in v3\n      !this.retainFocusOnClick && !this.fab && e.detail && this.$el.blur()\n      this.$emit('click', e)\n      this.$emitLegacy('click', e)\n\n      this.btnToggle && this.toggle()\n    },\n    genContent (): VNode {\n      return h('span', {\n        class: 'v-btn__content',\n      }, getSlot(this))\n    },\n    genLoader (): VNode {\n      return h('span', {\n        class: 'v-btn__loader',\n      }, getSlot(this, 'loader') || [h(VProgressCircular, {\n        indeterminate: true,\n        size: 23,\n        width: 2,\n      })])\n    },\n  },\n\n  render (): VNode {\n    const children = [\n      this.genContent(),\n      this.loading && this.genLoader(),\n    ]\n    const { tag, data: linkData, directives } = this.generateRouteLink()\n    const setColor = this.hasBg\n      ? this.setBackgroundColor\n      : this.setTextColor\n\n    // Merge component classes with routable classes\n    const mergedClasses = {\n      ...this.classes,\n      ...linkData.class,\n    }\n\n    if (tag === 'button') {\n      linkData.type = this.type\n      linkData.disabled = this.disabled\n    }\n    linkData.value = ['string', 'number'].includes(typeof this.value)\n      ? this.value\n      : JSON.stringify(this.value)\n\n    const data = {\n      ...linkData,\n      class: mergedClasses,\n      style: this.styles,\n    }\n\n    // Apply color styling but preserve Vue's automatic attribute inheritance\n    const finalData = this.disabled ? data : setColor(this.color, data)\n\n    return withDirectives(\n      h(tag, finalData, children),\n      directives\n    )\n  },\n})\n"],"sourceRoot":"","file":"VBtn.js"}

package/es5/components/VColorPicker/VColorPicker.js

@@ -23,8 +23,6 @@ var _VColorPickerSwatches = _interopRequireDefault(require("./VColorPickerSwatch
 
 var _util = require("./util");
 
-var _mixins = _interopRequireDefault(require("../../util/mixins"));
-
 var _helpers = require("../../util/helpers");
 
 var _elevatable = _interopRequireDefault(require("../../mixins/elevatable"));
@@ -43,8 +41,9 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 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; }
 
-var _default = (0, _mixins.default)(_elevatable.default, _themeable.default).extend({
+var _default = (0, _vue.defineComponent)({
   name: 'v-color-picker',
+  mixins: [_elevatable.default, _themeable.default],
   props: {
     canvasHeight: {
       type: [String, Number],
@@ -81,6 +80,7 @@ var _default = (0, _mixins.default)(_elevatable.default, _themeable.default).ext
       default: 300
     }
   },
+  emits: ['update:modelValue', 'update:color', 'update:mode'],
   data: function data() {
     return {
       internalValue: (0, _util.fromRGBA)({
@@ -98,7 +98,7 @@ var _default = (0, _mixins.default)(_elevatable.default, _themeable.default).ext
     }
   },
   watch: {
-    value: {
+    modelValue: {
       handler: function handler(color) {
         this.updateColor((0, _util.parseColor)(color, this.internalValue));
       },
@@ -147,42 +147,29 @@ var _default = (0, _mixins.default)(_elevatable.default, _themeable.default).ext
     },
     genPreview: function genPreview() {
       return (0, _vue.h)(_VColorPickerPreview.default, {
-        props: {
-          color: this.internalValue,
-          disabled: this.disabled,
-          hideAlpha: this.hideAlpha
-        },
-        on: {
-          'update:color': this.updateColor
-        }
+        color: this.internalValue,
+        disabled: this.disabled,
+        hideAlpha: this.hideAlpha,
+        'onUpdate:color': this.updateColor
       });
     },
     genSwatches: function genSwatches() {
       return (0, _vue.h)(_VColorPickerSwatches.default, {
-        props: {
-          dark: this.dark,
-          light: this.light,
-          disabled: this.disabled,
-          swatches: this.swatches,
-          color: this.internalValue,
-          maxHeight: this.swatchesMaxHeight
-        },
-        on: {
-          'update:color': this.updateColor
-        }
+        disabled: this.disabled,
+        swatches: this.swatches,
+        color: this.internalValue,
+        maxHeight: this.swatchesMaxHeight,
+        'onUpdate:color': this.updateColor
       });
     }
   },
   render: function render() {
-    var _h;
-
-    return (0, _vue.h)(_VSheet.default, (_h = {
-      class: 'v-color-picker'
-    }, _defineProperty(_h, "class", _objectSpread(_objectSpread({
-      'v-color-picker--flat': this.flat
-    }, this.themeClasses), this.elevationClasses)), _defineProperty(_h, "props", {
+    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
-    }), _h), [!this.hideCanvas && this.genCanvas(), (!this.hideSliders || !this.hideInputs) && this.genControls(), this.showSwatches && this.genSwatches()]);
+    }, [!this.hideCanvas && this.genCanvas(), (!this.hideSliders || !this.hideInputs) && this.genControls(), this.showSwatches && this.genSwatches()]);
   }
 });
 

package/es5/components/VColorPicker/VColorPicker.js.map

@@ -1 +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    modelValue: {\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.modelValue) return false\n\n      return !hasAlpha(this.modelValue)\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.modelValue)\n\n      if (!deepEqual(value, this.modelValue)) {\n        this.$emit('update:modelValue', 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"}
+{"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'\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  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

@@ -13,8 +13,8 @@ var _helpers = require("../../util/helpers");
 
 var _util = require("./util");
 
-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; }
-
+// Styles
+// Helpers
 var _default2 = (0, _vue.defineComponent)({
   name: 'v-color-picker-canvas',
   props: {
@@ -43,6 +43,7 @@ var _default2 = (0, _vue.defineComponent)({
       default: 300
     }
   },
+  emits: ['update:color'],
   data: function data() {
     return {
       boundingRect: {
@@ -60,34 +61,24 @@ var _default2 = (0, _vue.defineComponent)({
         y: 0
       };
       return {
-        x: this.color.hsva.s * parseInt(this.width, 10),
-        y: (1 - this.color.hsva.v) * parseInt(this.height, 10)
+        x: this.color.hsva.s * parseInt(String(this.width), 10),
+        y: (1 - this.color.hsva.v) * parseInt(String(this.height), 10)
       };
     }
   },
   watch: {
-    'color.hue': 'updateCanvas'
+    'color.hue': function colorHue() {
+      this.updateCanvas();
+    }
   },
   mounted: function mounted() {
     this.updateCanvas();
   },
   methods: {
-    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
-      }));
-    },
     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);
@@ -104,19 +95,24 @@ var _default2 = (0, _vue.defineComponent)({
       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);
     },
-    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);
-    },
     handleMouseMove: function handleMouseMove(e) {
       if (this.disabled) return;
       this.emitColor(e.clientX, e.clientY);
@@ -125,30 +121,35 @@ var _default2 = (0, _vue.defineComponent)({
       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',
-        attrs: {
-          width: this.width,
-          height: this.height
-        }
+        width: this.width,
+        height: this.height
       });
     },
     genDot: function genDot() {
-      var _h;
-
-      var radius = parseInt(this.dotSize, 10) / 2;
+      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', (_h = {
-        class: 'v-color-picker__canvas-dot'
-      }, _defineProperty(_h, "class", {
-        'v-color-picker__canvas-dot--disabled': this.disabled
-      }), _defineProperty(_h, "style", {
-        width: (0, _helpers.convertToUnit)(this.dotSize),
-        height: (0, _helpers.convertToUnit)(this.dotSize),
-        transform: "translate(".concat(x, ", ").concat(y, ")")
-      }), _h));
+      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() {
@@ -158,10 +159,8 @@ var _default2 = (0, _vue.defineComponent)({
         width: (0, _helpers.convertToUnit)(this.width),
         height: (0, _helpers.convertToUnit)(this.height)
       },
-      on: {
-        click: this.handleClick,
-        mousedown: this.handleMouseDown
-      }
+      onClick: this.handleClick,
+      onMousedown: this.handleMouseDown
     }, [this.genCanvas(), this.genDot()]);
   }
 });

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

@@ -1 +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"}
+{"version":3,"sources":["../../../src/components/VColorPicker/VColorPickerCanvas.ts"],"names":[],"mappings":";;;;;;;AAAA;;AAGA;;AAGA;;AACA;;AALA;AAGA;gBAOe,0BAAgB;AAC7B,EAAA,IAAI,EAAE,uBADuB;AAG7B,EAAA,KAAK,EAAE;AACL,IAAA,KAAK,EAAE;AACL,MAAA,IAAI,EAAE,MADD;AAEL,MAAA,OAAO,EAAE;AAAA,eAAM,oBAAS;AAAE,UAAA,CAAC,EAAE,GAAL;AAAU,UAAA,CAAC,EAAE,CAAb;AAAgB,UAAA,CAAC,EAAE,CAAnB;AAAsB,UAAA,CAAC,EAAE;AAAzB,SAAT,CAAN;AAAA;AAFJ,KADF;AAKL,IAAA,QAAQ,EAAE,OALL;AAML,IAAA,OAAO,EAAE;AACP,MAAA,IAAI,EAAE,CAAC,MAAD,EAAS,MAAT,CADC;AAEP,MAAA,OAAO,EAAE;AAFF,KANJ;AAUL,IAAA,MAAM,EAAE;AACN,MAAA,IAAI,EAAE,CAAC,MAAD,EAAS,MAAT,CADA;AAEN,MAAA,OAAO,EAAE;AAFH,KAVH;AAcL,IAAA,KAAK,EAAE;AACL,MAAA,IAAI,EAAE,CAAC,MAAD,EAAS,MAAT,CADD;AAEL,MAAA,OAAO,EAAE;AAFJ;AAdF,GAHsB;AAuB7B,EAAA,KAAK,EAAE,CAAC,cAAD,CAvBsB;AAyB7B,EAAA,IAzB6B,kBAyBzB;AACF,WAAO;AACL,MAAA,YAAY,EAAE;AACZ,QAAA,KAAK,EAAE,CADK;AAEZ,QAAA,MAAM,EAAE,CAFI;AAGZ,QAAA,IAAI,EAAE,CAHM;AAIZ,QAAA,GAAG,EAAE;AAJO;AADT,KAAP;AAQD,GAlC4B;AAoC7B,EAAA,QAAQ,EAAE;AACR,IAAA,GADQ,iBACL;AACD,UAAI,CAAC,KAAK,KAAV,EAAiB,OAAO;AAAE,QAAA,CAAC,EAAE,CAAL;AAAQ,QAAA,CAAC,EAAE;AAAX,OAAP;AAEjB,aAAO;AACL,QAAA,CAAC,EAAE,KAAK,KAAL,CAAW,IAAX,CAAgB,CAAhB,GAAoB,QAAQ,CAAC,MAAM,CAAC,KAAK,KAAN,CAAP,EAAqB,EAArB,CAD1B;AAEL,QAAA,CAAC,EAAE,CAAC,IAAI,KAAK,KAAL,CAAW,IAAX,CAAgB,CAArB,IAA0B,QAAQ,CAAC,MAAM,CAAC,KAAK,MAAN,CAAP,EAAsB,EAAtB;AAFhC,OAAP;AAID;AARO,GApCmB;AA+C7B,EAAA,KAAK,EAAE;AACL,eADK,sBACM;AACT,WAAK,YAAL;AACD;AAHI,GA/CsB;AAqD7B,EAAA,OArD6B,qBAqDtB;AACL,SAAK,YAAL;AACD,GAvD4B;AAyD7B,EAAA,OAAO,EAAE;AACP,IAAA,YADO,0BACK;AACV,UAAI,CAAC,KAAK,KAAV,EAAiB;AAEjB,UAAM,MAAM,GAAG,KAAK,KAAL,CAAW,MAA1B;AACA,UAAI,CAAC,MAAL,EAAa;AAEb,UAAM,GAAG,GAAG,MAAM,CAAC,UAAP,CAAkB,IAAlB,CAAZ;AACA,UAAI,CAAC,GAAL,EAAU;AAEV,UAAM,kBAAkB,GAAG,GAAG,CAAC,oBAAJ,CAAyB,CAAzB,EAA4B,CAA5B,EAA+B,MAAM,CAAC,KAAtC,EAA6C,CAA7C,CAA3B;AACA,MAAA,kBAAkB,CAAC,YAAnB,CAAgC,CAAhC,EAAmC,sBAAnC,EAVU,CAUiD;;AAC3D,MAAA,kBAAkB,CAAC,YAAnB,CAAgC,CAAhC,iBAA2C,KAAK,KAAL,CAAW,GAAtD;AACA,MAAA,GAAG,CAAC,SAAJ,GAAgB,kBAAhB;AACA,MAAA,GAAG,CAAC,QAAJ,CAAa,CAAb,EAAgB,CAAhB,EAAmB,MAAM,CAAC,KAA1B,EAAiC,MAAM,CAAC,MAAxC;AAEA,UAAM,aAAa,GAAG,GAAG,CAAC,oBAAJ,CAAyB,CAAzB,EAA4B,CAA5B,EAA+B,CAA/B,EAAkC,MAAM,CAAC,MAAzC,CAAtB;AACA,MAAA,aAAa,CAAC,YAAd,CAA2B,CAA3B,EAA8B,sBAA9B,EAhBU,CAgB4C;;AACtD,MAAA,aAAa,CAAC,YAAd,CAA2B,CAA3B,EAA8B,oBAA9B,EAjBU,CAiB0C;;AACpD,MAAA,GAAG,CAAC,SAAJ,GAAgB,aAAhB;AACA,MAAA,GAAG,CAAC,QAAJ,CAAa,CAAb,EAAgB,CAAhB,EAAmB,MAAM,CAAC,KAA1B,EAAiC,MAAM,CAAC,MAAxC;AACD,KArBM;AAuBP,IAAA,SAvBO,qBAuBI,CAvBJ,EAuBe,CAvBf,EAuBwB;AAAA,+BACQ,KAAK,YADb;AAAA,UACrB,IADqB,sBACrB,IADqB;AAAA,UACf,GADe,sBACf,GADe;AAAA,UACV,KADU,sBACV,KADU;AAAA,UACH,MADG,sBACH,MADG;AAG7B,WAAK,KAAL,CAAW,cAAX,EAA2B,oBAAS;AAClC,QAAA,CAAC,EAAE,KAAK,KAAL,CAAY,GADmB;AAElC,QAAA,CAAC,EAAE,oBAAM,CAAC,GAAG,IAAV,EAAgB,CAAhB,EAAmB,KAAnB,IAA4B,KAFG;AAGlC,QAAA,CAAC,EAAE,IAAI,oBAAM,CAAC,GAAG,GAAV,EAAe,CAAf,EAAkB,MAAlB,IAA4B,MAHD;AAIlC,QAAA,CAAC,EAAE,KAAK,KAAL,CAAY;AAJmB,OAAT,CAA3B;AAMD,KAhCM;AAkCP,IAAA,WAlCO,uBAkCM,CAlCN,EAkCmB;AACxB,UAAI,KAAK,QAAT,EAAmB;AAEnB,WAAK,YAAL,GAAoB,KAAK,GAAL,CAAS,qBAAT,EAApB;AACA,WAAK,SAAL,CAAe,CAAC,CAAC,OAAjB,EAA0B,CAAC,CAAC,OAA5B;AACD,KAvCM;AAyCP,IAAA,eAzCO,2BAyCU,CAzCV,EAyCuB;AAC5B,UAAI,KAAK,QAAT,EAAmB;AACnB,WAAK,SAAL,CAAe,CAAC,CAAC,OAAjB,EAA0B,CAAC,CAAC,OAA5B;AACD,KA5CM;AA8CP,IAAA,aA9CO,2BA8CM;AACX,MAAA,MAAM,CAAC,mBAAP,CAA2B,WAA3B,EAAwC,KAAK,eAA7C;AACA,MAAA,MAAM,CAAC,mBAAP,CAA2B,SAA3B,EAAsC,KAAK,aAA3C;AACD,KAjDM;AAmDP,IAAA,eAnDO,2BAmDU,CAnDV,EAmDuB;AAC5B;AACA,MAAA,CAAC,CAAC,cAAF;AAEA,UAAI,KAAK,QAAT,EAAmB;AAEnB,WAAK,YAAL,GAAoB,KAAK,GAAL,CAAS,qBAAT,EAApB;AAEA,MAAA,MAAM,CAAC,gBAAP,CAAwB,WAAxB,EAAqC,KAAK,eAA1C;AACA,MAAA,MAAM,CAAC,gBAAP,CAAwB,SAAxB,EAAmC,KAAK,aAAxC;AACD,KA7DM;AA+DP,IAAA,SA/DO,uBA+DE;AACP,aAAO,YAAE,QAAF,EAAY;AACjB,QAAA,GAAG,EAAE,QADY;AAEjB,QAAA,KAAK,EAAE,KAAK,KAFK;AAGjB,QAAA,MAAM,EAAE,KAAK;AAHI,OAAZ,CAAP;AAKD,KArEM;AAuEP,IAAA,MAvEO,oBAuED;AACJ,UAAM,MAAM,GAAG,QAAQ,CAAC,MAAM,CAAC,KAAK,OAAN,CAAP,EAAuB,EAAvB,CAAR,GAAqC,CAApD;AACA,UAAM,CAAC,GAAG,4BAAc,KAAK,GAAL,CAAS,CAAT,GAAa,MAA3B,CAAV;AACA,UAAM,CAAC,GAAG,4BAAc,KAAK,GAAL,CAAS,CAAT,GAAa,MAA3B,CAAV;AAEA,aAAO,YAAE,KAAF,EAAS;AACd,QAAA,KAAK,EAAE,CAAC,4BAAD,EAA+B;AACpC,kDAAwC,KAAK;AADT,SAA/B,CADO;AAId,QAAA,KAAK,EAAE;AACL,UAAA,KAAK,EAAE,4BAAc,KAAK,OAAnB,CADF;AAEL,UAAA,MAAM,EAAE,4BAAc,KAAK,OAAnB,CAFH;AAGL,UAAA,SAAS,sBAAe,CAAf,eAAqB,CAArB;AAHJ;AAJO,OAAT,CAAP;AAUD;AAtFM,GAzDoB;AAkJ7B,EAAA,MAlJ6B,oBAkJvB;AACJ,WAAO,YAAE,KAAF,EAAS;AACd,MAAA,KAAK,EAAE,wBADO;AAEd,MAAA,KAAK,EAAE;AACL,QAAA,KAAK,EAAE,4BAAc,KAAK,KAAnB,CADF;AAEL,QAAA,MAAM,EAAE,4BAAc,KAAK,MAAnB;AAFH,OAFO;AAMd,MAAA,OAAO,EAAE,KAAK,WANA;AAOd,MAAA,WAAW,EAAE,KAAK;AAPJ,KAAT,EAQJ,CACD,KAAK,SAAL,EADC,EAED,KAAK,MAAL,EAFC,CARI,CAAP;AAYD;AA/J4B,CAAhB,C","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"}