@dimailn/vuetify 2.7.2-alpha23 → 2.7.2-alpha25

package/dist/vuetify.js

@@ -1456,8 +1456,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _mixins_transitionable__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../mixins/transitionable */ "./src/mixins/transitionable/index.ts");
 /* harmony import */ var _mixins_positionable__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../../mixins/positionable */ "./src/mixins/positionable/index.ts");
 /* harmony import */ var _util_mergeData__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../../util/mergeData */ "./src/util/mergeData.ts");
-/* harmony import */ var _util_mixins__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../../util/mixins */ "./src/util/mixins.ts");
-/* harmony import */ var _util_helpers__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../../util/helpers */ "./src/util/helpers.ts");
+/* harmony import */ var _util_helpers__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../../util/helpers */ "./src/util/helpers.ts");
 var __assign = undefined && undefined.__assign || function () {
   __assign = Object.assign || function (t) {
     for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -1501,9 +1500,10 @@ var __rest = undefined && undefined.__rest || function (s, e) {
  // Utilities
 
 
-
-/* harmony default export */ __webpack_exports__["default"] = (Object(_util_mixins__WEBPACK_IMPORTED_MODULE_9__["default"])(_mixins_colorable__WEBPACK_IMPORTED_MODULE_3__["default"], Object(_mixins_positionable__WEBPACK_IMPORTED_MODULE_7__["factory"])(['left', 'bottom']), _mixins_themeable__WEBPACK_IMPORTED_MODULE_4__["default"], _mixins_toggleable__WEBPACK_IMPORTED_MODULE_5__["default"], _mixins_transitionable__WEBPACK_IMPORTED_MODULE_6__["default"]).extend({
+var Toggleable = Object(_mixins_toggleable__WEBPACK_IMPORTED_MODULE_5__["factory"])('modelValue', 'update:modelValue');
+/* harmony default export */ __webpack_exports__["default"] = (Object(vue__WEBPACK_IMPORTED_MODULE_0__["defineComponent"])({
   name: 'v-badge',
+  mixins: [_mixins_colorable__WEBPACK_IMPORTED_MODULE_3__["default"], Object(_mixins_positionable__WEBPACK_IMPORTED_MODULE_7__["factory"])(['left', 'bottom']), _mixins_themeable__WEBPACK_IMPORTED_MODULE_4__["default"], Toggleable, _mixins_transitionable__WEBPACK_IMPORTED_MODULE_6__["default"]],
   props: {
     avatar: Boolean,
     bordered: Boolean,
@@ -1529,7 +1529,7 @@ var __rest = undefined && undefined.__rest || function (s, e) {
       type: String,
       default: 'scale-rotate-transition'
     },
-    value: {
+    modelValue: {
       default: true
     }
   },
@@ -1594,7 +1594,7 @@ var __rest = undefined && undefined.__rest || function (s, e) {
   },
   methods: {
     calcPosition: function calcPosition(offset) {
-      return "calc(100% - " + Object(_util_helpers__WEBPACK_IMPORTED_MODULE_10__["convertToUnit"])(offset || this.offset) + ")";
+      return "calc(100% - " + Object(_util_helpers__WEBPACK_IMPORTED_MODULE_9__["convertToUnit"])(offset || this.offset) + ")";
     },
     genBadge: function genBadge() {
       var lang = this.$vuetify.lang;
@@ -1606,27 +1606,29 @@ var __rest = undefined && undefined.__rest || function (s, e) {
         '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 = Object(vue__WEBPACK_IMPORTED_MODULE_0__["h"])('span', data, [this.genBadgeContent()]);
+      var badge = Object(vue__WEBPACK_IMPORTED_MODULE_0__["withDirectives"])(Object(vue__WEBPACK_IMPORTED_MODULE_0__["h"])('span', data, [this.genBadgeContent()]), [[vue__WEBPACK_IMPORTED_MODULE_0__["vShow"], this.isActive]]);
       if (!this.transition) return badge;
       return Object(vue__WEBPACK_IMPORTED_MODULE_0__["h"])(vue__WEBPACK_IMPORTED_MODULE_0__["Transition"], {
         name: this.transition,
         origin: this.origin,
         mode: this.mode
-      }, [badge]);
+      }, {
+        default: function _default() {
+          return [badge];
+        }
+      });
     },
     genBadgeContent: function genBadgeContent() {
       // Dot prop shows no content
       if (this.dot) return undefined;
-      var slot = Object(_util_helpers__WEBPACK_IMPORTED_MODULE_10__["getSlot"])(this, 'badge');
+      var slot = Object(_util_helpers__WEBPACK_IMPORTED_MODULE_9__["getSlot"])(this, 'badge');
       if (slot) return slot;
       if (this.content) return String(this.content);
-      if (this.icon) return Object(vue__WEBPACK_IMPORTED_MODULE_0__["h"])(_VIcon_VIcon__WEBPACK_IMPORTED_MODULE_2__["default"], this.icon);
+      if (this.icon) return Object(vue__WEBPACK_IMPORTED_MODULE_0__["h"])(_VIcon_VIcon__WEBPACK_IMPORTED_MODULE_2__["default"], {
+        icon: this.icon
+      });
       return undefined;
     },
     genBadgeWrapper: function genBadgeWrapper() {
@@ -1637,7 +1639,7 @@ var __rest = undefined && undefined.__rest || function (s, e) {
   },
   render: function render() {
     var badge = [this.genBadgeWrapper()];
-    var children = [Object(_util_helpers__WEBPACK_IMPORTED_MODULE_10__["getSlot"])(this)];
+    var children = [Object(_util_helpers__WEBPACK_IMPORTED_MODULE_9__["getSlot"])(this)];
 
     var _a = this.$attrs,
         _x = _a["aria-atomic"],
@@ -2410,16 +2412,14 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _VProgressCircular__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../VProgressCircular */ "./src/components/VProgressCircular/index.ts");
 /* harmony import */ var _mixins_groupable__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../mixins/groupable */ "./src/mixins/groupable/index.ts");
 /* harmony import */ var _mixins_toggleable__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../mixins/toggleable */ "./src/mixins/toggleable/index.ts");
-/* harmony import */ var _mixins_elevatable__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../mixins/elevatable */ "./src/mixins/elevatable/index.ts");
-/* harmony import */ var _mixins_positionable__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../mixins/positionable */ "./src/mixins/positionable/index.ts");
-/* harmony import */ var _mixins_routable__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../../mixins/routable */ "./src/mixins/routable/index.ts");
-/* harmony import */ var _mixins_sizeable__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../../mixins/sizeable */ "./src/mixins/sizeable/index.ts");
-/* harmony import */ var _util_mixins__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../../util/mixins */ "./src/util/mixins.ts");
-/* harmony import */ var _util_console__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../../util/console */ "./src/util/console.ts");
-/* harmony import */ var _util_helpers__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ../../util/helpers */ "./src/util/helpers.ts");
-/* harmony import */ var _util_mergeData__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ../../util/mergeData */ "./src/util/mergeData.ts");
-/* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! vue */ "vue");
-/* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_13___default = /*#__PURE__*/__webpack_require__.n(vue__WEBPACK_IMPORTED_MODULE_13__);
+/* harmony import */ var _mixins_positionable__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../mixins/positionable */ "./src/mixins/positionable/index.ts");
+/* harmony import */ var _mixins_routable__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../mixins/routable */ "./src/mixins/routable/index.ts");
+/* harmony import */ var _mixins_sizeable__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../../mixins/sizeable */ "./src/mixins/sizeable/index.ts");
+/* harmony import */ var _util_mixins__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../../util/mixins */ "./src/util/mixins.ts");
+/* harmony import */ var _util_console__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../../util/console */ "./src/util/console.ts");
+/* harmony import */ var _util_helpers__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../../util/helpers */ "./src/util/helpers.ts");
+/* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! vue */ "vue");
+/* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_11___default = /*#__PURE__*/__webpack_require__.n(vue__WEBPACK_IMPORTED_MODULE_11__);
 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); }
 
 var __assign = undefined && undefined.__assign || function () {
@@ -2476,22 +2476,18 @@ var __read = undefined && undefined.__read || function (o, n) {
 
 
 
-
  // Utilities
 
 
 
-
  // Types
 
 
-
-var baseMixins = Object(_util_mixins__WEBPACK_IMPORTED_MODULE_9__["default"])(_VSheet__WEBPACK_IMPORTED_MODULE_1__["default"], _mixins_routable__WEBPACK_IMPORTED_MODULE_7__["default"], _mixins_positionable__WEBPACK_IMPORTED_MODULE_6__["default"], _mixins_sizeable__WEBPACK_IMPORTED_MODULE_8__["default"], Object(_mixins_groupable__WEBPACK_IMPORTED_MODULE_3__["factory"])('btnToggle'), Object(_mixins_toggleable__WEBPACK_IMPORTED_MODULE_4__["factory"])('inputValue')
+var baseMixins = Object(_util_mixins__WEBPACK_IMPORTED_MODULE_8__["default"])(_VSheet__WEBPACK_IMPORTED_MODULE_1__["default"], _mixins_routable__WEBPACK_IMPORTED_MODULE_6__["default"], _mixins_positionable__WEBPACK_IMPORTED_MODULE_5__["default"], _mixins_sizeable__WEBPACK_IMPORTED_MODULE_7__["default"], Object(_mixins_groupable__WEBPACK_IMPORTED_MODULE_3__["factory"])('btnToggle'), Object(_mixins_toggleable__WEBPACK_IMPORTED_MODULE_4__["factory"])('inputValue')
 /* @vue/component */
 );
 /* harmony default export */ __webpack_exports__["default"] = (baseMixins.extend({
   name: 'v-btn',
-  inheritAttrs: false,
   props: {
     activeClass: {
       type: String
@@ -2526,7 +2522,7 @@ var baseMixins = Object(_util_mixins__WEBPACK_IMPORTED_MODULE_9__["default"])(_V
     classes: function classes() {
       return __assign(__assign(__assign(__assign(__assign(__assign({
         'v-btn': true
-      }, _mixins_routable__WEBPACK_IMPORTED_MODULE_7__["default"].computed.classes.call(this)), {
+      }, _mixins_routable__WEBPACK_IMPORTED_MODULE_6__["default"].computed.classes.call(this)), {
         'v-btn--absolute': this.absolute,
         'v-btn--block': this.block,
         'v-btn--bottom': this.bottom,
@@ -2551,7 +2547,7 @@ var baseMixins = Object(_util_mixins__WEBPACK_IMPORTED_MODULE_9__["default"])(_V
     },
     computedElevation: function computedElevation() {
       if (this.disabled) return undefined;
-      return _mixins_elevatable__WEBPACK_IMPORTED_MODULE_5__["default"].computed.computedElevation.call(this);
+      return this.elevation;
     },
     computedRipple: function computedRipple() {
       var _a;
@@ -2585,7 +2581,7 @@ var baseMixins = Object(_util_mixins__WEBPACK_IMPORTED_MODULE_9__["default"])(_V
           original = _b[0],
           replacement = _b[1];
 
-      if (_this.$attrs.hasOwnProperty(original)) Object(_util_console__WEBPACK_IMPORTED_MODULE_10__["breaking"])(original, replacement, _this);
+      if (_this.$attrs.hasOwnProperty(original)) Object(_util_console__WEBPACK_IMPORTED_MODULE_9__["breaking"])(original, replacement, _this);
     });
   },
   methods: {
@@ -2597,14 +2593,14 @@ var baseMixins = Object(_util_mixins__WEBPACK_IMPORTED_MODULE_9__["default"])(_V
       this.btnToggle && this.toggle();
     },
     genContent: function genContent() {
-      return Object(vue__WEBPACK_IMPORTED_MODULE_13__["h"])('span', {
+      return Object(vue__WEBPACK_IMPORTED_MODULE_11__["h"])('span', {
         class: 'v-btn__content'
-      }, Object(_util_helpers__WEBPACK_IMPORTED_MODULE_11__["getSlot"])(this));
+      }, Object(_util_helpers__WEBPACK_IMPORTED_MODULE_10__["getSlot"])(this));
     },
     genLoader: function genLoader() {
-      return Object(vue__WEBPACK_IMPORTED_MODULE_13__["h"])('span', {
+      return Object(vue__WEBPACK_IMPORTED_MODULE_11__["h"])('span', {
         class: 'v-btn__loader'
-      }, Object(_util_helpers__WEBPACK_IMPORTED_MODULE_11__["getSlot"])(this, 'loader') || [Object(vue__WEBPACK_IMPORTED_MODULE_13__["h"])(_VProgressCircular__WEBPACK_IMPORTED_MODULE_2__["default"], {
+      }, Object(_util_helpers__WEBPACK_IMPORTED_MODULE_10__["getSlot"])(this, 'loader') || [Object(vue__WEBPACK_IMPORTED_MODULE_11__["h"])(_VProgressCircular__WEBPACK_IMPORTED_MODULE_2__["default"], {
         indeterminate: true,
         size: 23,
         width: 2
@@ -2619,20 +2615,25 @@ var baseMixins = Object(_util_mixins__WEBPACK_IMPORTED_MODULE_9__["default"])(_V
         linkData = _a.data,
         directives = _a.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 = __assign(__assign({}, 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 = __assign(__assign({}, data), linkData);
-    data = Object(_util_mergeData__WEBPACK_IMPORTED_MODULE_12__["default"])(data, {
-      class: this.$attrs.class
-    });
-    return Object(vue__WEBPACK_IMPORTED_MODULE_13__["withDirectives"])(Object(vue__WEBPACK_IMPORTED_MODULE_13__["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 = __assign(__assign({}, 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 Object(vue__WEBPACK_IMPORTED_MODULE_11__["withDirectives"])(Object(vue__WEBPACK_IMPORTED_MODULE_11__["h"])(tag, finalData, children), directives);
   }
 }));
 
@@ -7975,12 +7976,9 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _VColorPickerEdit__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./VColorPickerEdit */ "./src/components/VColorPicker/VColorPickerEdit.ts");
 /* harmony import */ var _VColorPickerSwatches__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./VColorPickerSwatches */ "./src/components/VColorPicker/VColorPickerSwatches.ts");
 /* harmony import */ var _util__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./util */ "./src/components/VColorPicker/util/index.ts");
-/* harmony import */ var _util_mixins__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../../util/mixins */ "./src/util/mixins.ts");
-/* harmony import */ var _util_helpers__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../../util/helpers */ "./src/util/helpers.ts");
-/* harmony import */ var _mixins_elevatable__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../../mixins/elevatable */ "./src/mixins/elevatable/index.ts");
-/* harmony import */ var _mixins_themeable__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ../../mixins/themeable */ "./src/mixins/themeable/index.ts");
-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; }
-
+/* harmony import */ var _util_helpers__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../../util/helpers */ "./src/util/helpers.ts");
+/* harmony import */ var _mixins_elevatable__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../../mixins/elevatable */ "./src/mixins/elevatable/index.ts");
+/* harmony import */ var _mixins_themeable__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../../mixins/themeable */ "./src/mixins/themeable/index.ts");
 var __assign = undefined && undefined.__assign || function () {
   __assign = Object.assign || function (t) {
     for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -8008,13 +8006,13 @@ var __assign = undefined && undefined.__assign || function () {
  // Helpers
 
 
-
  // Mixins
 
 
 
-/* harmony default export */ __webpack_exports__["default"] = (Object(_util_mixins__WEBPACK_IMPORTED_MODULE_8__["default"])(_mixins_elevatable__WEBPACK_IMPORTED_MODULE_10__["default"], _mixins_themeable__WEBPACK_IMPORTED_MODULE_11__["default"]).extend({
+/* harmony default export */ __webpack_exports__["default"] = (Object(vue__WEBPACK_IMPORTED_MODULE_0__["defineComponent"])({
   name: 'v-color-picker',
+  mixins: [_mixins_elevatable__WEBPACK_IMPORTED_MODULE_9__["default"], _mixins_themeable__WEBPACK_IMPORTED_MODULE_10__["default"]],
   props: {
     canvasHeight: {
       type: [String, Number],
@@ -8051,6 +8049,7 @@ var __assign = undefined && undefined.__assign || function () {
       default: 300
     }
   },
+  emits: ['update:modelValue', 'update:color', 'update:mode'],
   data: function data() {
     return {
       internalValue: Object(_util__WEBPACK_IMPORTED_MODULE_7__["fromRGBA"])({
@@ -8068,7 +8067,7 @@ var __assign = undefined && undefined.__assign || function () {
     }
   },
   watch: {
-    value: {
+    modelValue: {
       handler: function handler(color) {
         this.updateColor(Object(_util__WEBPACK_IMPORTED_MODULE_7__["parseColor"])(color, this.internalValue));
       },
@@ -8080,7 +8079,7 @@ var __assign = undefined && undefined.__assign || function () {
       this.internalValue = color;
       var value = Object(_util__WEBPACK_IMPORTED_MODULE_7__["extractColor"])(this.internalValue, this.modelValue);
 
-      if (!Object(_util_helpers__WEBPACK_IMPORTED_MODULE_9__["deepEqual"])(value, this.modelValue)) {
+      if (!Object(_util_helpers__WEBPACK_IMPORTED_MODULE_8__["deepEqual"])(value, this.modelValue)) {
         this.$emit('update:modelValue', value);
         this.$emit('update:color', this.internalValue);
       }
@@ -8117,42 +8116,29 @@ var __assign = undefined && undefined.__assign || function () {
     },
     genPreview: function genPreview() {
       return Object(vue__WEBPACK_IMPORTED_MODULE_0__["h"])(_VColorPickerPreview__WEBPACK_IMPORTED_MODULE_3__["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 Object(vue__WEBPACK_IMPORTED_MODULE_0__["h"])(_VColorPickerSwatches__WEBPACK_IMPORTED_MODULE_6__["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 Object(vue__WEBPACK_IMPORTED_MODULE_0__["h"])(_VSheet_VSheet__WEBPACK_IMPORTED_MODULE_2__["default"], (_h = {
-      class: 'v-color-picker'
-    }, _defineProperty(_h, "class", __assign(__assign({
-      'v-color-picker--flat': this.flat
-    }, this.themeClasses), this.elevationClasses)), _defineProperty(_h, "props", {
+    return Object(vue__WEBPACK_IMPORTED_MODULE_0__["h"])(_VSheet_VSheet__WEBPACK_IMPORTED_MODULE_2__["default"], {
+      class: ['v-color-picker', __assign(__assign({
+        '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()]);
   }
 }));
 
@@ -8184,15 +8170,11 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _VColorPickerCanvas_sass__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_VColorPickerCanvas_sass__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _util_helpers__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../util/helpers */ "./src/util/helpers.ts");
 /* harmony import */ var _util__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./util */ "./src/components/VColorPicker/util/index.ts");
-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
 
 
- // Types
-
 
 /* harmony default export */ __webpack_exports__["default"] = (Object(vue__WEBPACK_IMPORTED_MODULE_0__["defineComponent"])({
   name: 'v-color-picker-canvas',
@@ -8222,6 +8204,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
       default: 300
     }
   },
+  emits: ['update:color'],
   data: function data() {
     return {
       boundingRect: {
@@ -8239,34 +8222,24 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
         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 _a = this.boundingRect,
-          left = _a.left,
-          top = _a.top,
-          width = _a.width,
-          height = _a.height;
-      this.$emit('update:color', Object(_util__WEBPACK_IMPORTED_MODULE_3__["fromHSVA"])({
-        h: this.color.hue,
-        s: Object(_util_helpers__WEBPACK_IMPORTED_MODULE_2__["clamp"])(x - left, 0, width) / width,
-        v: 1 - Object(_util_helpers__WEBPACK_IMPORTED_MODULE_2__["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);
@@ -8283,19 +8256,24 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
       ctx.fillStyle = valueGradient;
       ctx.fillRect(0, 0, canvas.width, canvas.height);
     },
+    emitColor: function emitColor(x, y) {
+      var _a = this.boundingRect,
+          left = _a.left,
+          top = _a.top,
+          width = _a.width,
+          height = _a.height;
+      this.$emit('update:color', Object(_util__WEBPACK_IMPORTED_MODULE_3__["fromHSVA"])({
+        h: this.color.hue,
+        s: Object(_util_helpers__WEBPACK_IMPORTED_MODULE_2__["clamp"])(x - left, 0, width) / width,
+        v: 1 - Object(_util_helpers__WEBPACK_IMPORTED_MODULE_2__["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);
@@ -8304,30 +8282,35 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
       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 Object(vue__WEBPACK_IMPORTED_MODULE_0__["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 = Object(_util_helpers__WEBPACK_IMPORTED_MODULE_2__["convertToUnit"])(this.dot.x - radius);
       var y = Object(_util_helpers__WEBPACK_IMPORTED_MODULE_2__["convertToUnit"])(this.dot.y - radius);
-      return Object(vue__WEBPACK_IMPORTED_MODULE_0__["h"])('div', (_h = {
-        class: 'v-color-picker__canvas-dot'
-      }, _defineProperty(_h, "class", {
-        'v-color-picker__canvas-dot--disabled': this.disabled
-      }), _defineProperty(_h, "style", {
-        width: Object(_util_helpers__WEBPACK_IMPORTED_MODULE_2__["convertToUnit"])(this.dotSize),
-        height: Object(_util_helpers__WEBPACK_IMPORTED_MODULE_2__["convertToUnit"])(this.dotSize),
-        transform: "translate(" + x + ", " + y + ")"
-      }), _h));
+      return Object(vue__WEBPACK_IMPORTED_MODULE_0__["h"])('div', {
+        class: ['v-color-picker__canvas-dot', {
+          'v-color-picker__canvas-dot--disabled': this.disabled
+        }],
+        style: {
+          width: Object(_util_helpers__WEBPACK_IMPORTED_MODULE_2__["convertToUnit"])(this.dotSize),
+          height: Object(_util_helpers__WEBPACK_IMPORTED_MODULE_2__["convertToUnit"])(this.dotSize),
+          transform: "translate(" + x + ", " + y + ")"
+        }
+      });
     }
   },
   render: function render() {
@@ -8337,10 +8320,8 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
         width: Object(_util_helpers__WEBPACK_IMPORTED_MODULE_2__["convertToUnit"])(this.width),
         height: Object(_util_helpers__WEBPACK_IMPORTED_MODULE_2__["convertToUnit"])(this.height)
       },
-      on: {
-        click: this.handleClick,
-        mousedown: this.handleMouseDown
-      }
+      onClick: this.handleClick,
+      onMousedown: this.handleMouseDown
     }, [this.genCanvas(), this.genDot()]);
   }
 }));
@@ -8426,8 +8407,6 @@ var __read = undefined && undefined.__read || function (o, n) {
 
  // Helpers
 
- // Types
-
 
 
 var modes = {
@@ -8446,7 +8425,10 @@ var modes = {
 /* harmony default export */ __webpack_exports__["default"] = (Object(vue__WEBPACK_IMPORTED_MODULE_0__["defineComponent"])({
   name: 'v-color-picker-edit',
   props: {
-    color: Object,
+    color: {
+      type: Object,
+      required: true
+    },
     disabled: Boolean,
     hideAlpha: Boolean,
     hideModeSwitch: Boolean,
@@ -8458,15 +8440,15 @@ var modes = {
       }
     }
   },
+  emits: ['update:color', 'update:mode'],
   data: function data() {
     return {
-      modes: modes,
       internalMode: this.mode
     };
   },
   computed: {
     currentMode: function currentMode() {
-      return this.modes[this.internalMode];
+      return modes[this.internalMode];
     }
   },
   watch: {
@@ -8474,9 +8456,6 @@ var modes = {
       this.internalMode = _mode;
     }
   },
-  created: function created() {
-    this.internalMode = this.mode;
-  },
   methods: {
     getValue: function getValue(v, type) {
       if (type === 'float') return Math.round(v * 100) / 100;else if (type === 'int') return Math.round(v);else return 0;
@@ -8485,20 +8464,21 @@ var modes = {
       if (type === 'float') return parseFloat(v);else if (type === 'int') return parseInt(v, 10) || 0;else return 0;
     },
     changeMode: function changeMode() {
-      var modes = Object.keys(this.modes);
-      var index = modes.indexOf(this.internalMode);
-      var newMode = modes[(index + 1) % modes.length];
+      var modeKeys = Object.keys(modes);
+      var index = modeKeys.indexOf(this.internalMode);
+      var newMode = modeKeys[(index + 1) % modeKeys.length];
       this.internalMode = newMode;
       this.$emit('update:mode', newMode);
     },
-    genInput: function genInput(target, attrs, value, on) {
+    genInput: function genInput(target, attrs, value, onChange) {
       return Object(vue__WEBPACK_IMPORTED_MODULE_0__["h"])('div', {
         class: 'v-color-picker__input'
-      }, [Object(vue__WEBPACK_IMPORTED_MODULE_0__["h"])('input', __assign(__assign(__assign({
+      }, [Object(vue__WEBPACK_IMPORTED_MODULE_0__["h"])('input', __assign(__assign({
         key: target
       }, attrs), {
-        value: value
-      }), on)), Object(vue__WEBPACK_IMPORTED_MODULE_0__["h"])('span', target.toUpperCase())]);
+        value: value,
+        onChange: onChange
+      })), Object(vue__WEBPACK_IMPORTED_MODULE_0__["h"])('span', target.toUpperCase())]);
     },
     genInputs: function genInputs() {
       var _this = this;
@@ -8509,12 +8489,10 @@ var modes = {
         return this.genInput('hex', {
           maxlength: this.hideAlpha ? 7 : 9,
           disabled: this.disabled
-        }, value, {
-          change: function change(e) {
-            var el = e.target;
+        }, value, function (e) {
+          var el = e.target;
 
-            _this.$emit('update:color', _this.currentMode.from(Object(_util_colorUtils__WEBPACK_IMPORTED_MODULE_4__["parseHex"])(el.value)));
-          }
+          _this.$emit('update:color', _this.currentMode.from(Object(_util_colorUtils__WEBPACK_IMPORTED_MODULE_4__["parseHex"])(el.value)));
         });
       } else {
         var inputs = this.hideAlpha ? this.currentMode.inputs.slice(0, -1) : this.currentMode.inputs;
@@ -8531,16 +8509,14 @@ var modes = {
             max: max,
             step: type === 'float' ? '0.01' : type === 'int' ? '1' : undefined,
             disabled: _this.disabled
-          }, _this.getValue(value[target], type), {
-            input: function input(e) {
-              var _a;
+          }, _this.getValue(value[target], type), function (e) {
+            var _a;
 
-              var el = e.target;
+            var el = e.target;
 
-              var newVal = _this.parseValue(el.value || '0', type);
+            var newVal = _this.parseValue(el.value || '0', type);
 
-              _this.$emit('update:color', _this.currentMode.from(Object.assign({}, value, (_a = {}, _a[target] = newVal, _a)), _this.color.alpha));
-            }
+            _this.$emit('update:color', _this.currentMode.from(Object.assign({}, value, (_a = {}, _a[target] = newVal, _a)), _this.color.alpha));
           });
         });
       }
@@ -8551,7 +8527,11 @@ var modes = {
         icon: true,
         disabled: this.disabled,
         onClick: this.changeMode
-      }, [Object(vue__WEBPACK_IMPORTED_MODULE_0__["h"])(_VIcon__WEBPACK_IMPORTED_MODULE_3__["default"], '$unfold')]);
+      }, {
+        default: function _default() {
+          return [Object(vue__WEBPACK_IMPORTED_MODULE_0__["h"])(_VIcon__WEBPACK_IMPORTED_MODULE_3__["default"], {}, '$unfold')];
+        }
+      });
     }
   },
   render: function render() {
@@ -8612,77 +8592,86 @@ var __assign = undefined && undefined.__assign || function () {
 
  // Utilities
 
- // Types
-
 
 
 /* harmony default export */ __webpack_exports__["default"] = (Object(vue__WEBPACK_IMPORTED_MODULE_0__["defineComponent"])({
   name: 'v-color-picker-preview',
   props: {
-    color: Object,
+    color: {
+      type: Object,
+      required: true
+    },
     disabled: Boolean,
     hideAlpha: Boolean
   },
+  emits: ['update:color'],
   methods: {
     genAlpha: function genAlpha() {
       var _this = this;
 
+      var _a;
+
+      if (!this.color) return Object(vue__WEBPACK_IMPORTED_MODULE_0__["h"])('div');
       return this.genTrack({
         class: 'v-color-picker__alpha',
         thumbColor: 'grey lighten-2',
         hideDetails: true,
-        value: this.color.alpha,
+        modelValue: this.color.alpha,
         step: 0,
         min: 0,
         max: 1,
         style: {
-          backgroundImage: this.disabled ? undefined : "linear-gradient(to " + (this.$vuetify.rtl ? 'left' : 'right') + ", transparent, " + Object(_util_colorUtils__WEBPACK_IMPORTED_MODULE_3__["RGBtoCSS"])(this.color.rgba) + ")"
+          backgroundImage: this.disabled ? undefined : "linear-gradient(to " + (((_a = this.$vuetify) === null || _a === void 0 ? void 0 : _a.rtl) ? 'left' : 'right') + ", transparent, " + Object(_util_colorUtils__WEBPACK_IMPORTED_MODULE_3__["RGBtoCSS"])(this.color.rgba) + ")"
         },
-        onInput: function onInput(val) {
-          return _this.color.alpha !== val && _this.$emit('update:color', Object(_util__WEBPACK_IMPORTED_MODULE_4__["fromHSVA"])(__assign(__assign({}, _this.color.hsva), {
-            a: val
-          })));
+        'onUpdate:modelValue': function onUpdateModelValue(val) {
+          if (_this.color && _this.color.alpha !== val) {
+            _this.$emit('update:color', Object(_util__WEBPACK_IMPORTED_MODULE_4__["fromHSVA"])(__assign(__assign({}, _this.color.hsva), {
+              a: val
+            })));
+          }
         }
       });
     },
-    genSliders: function genSliders() {
-      return Object(vue__WEBPACK_IMPORTED_MODULE_0__["h"])('div', {
-        class: 'v-color-picker__sliders'
-      }, [this.genHue(), !this.hideAlpha && this.genAlpha()]);
-    },
-    genDot: function genDot() {
-      return Object(vue__WEBPACK_IMPORTED_MODULE_0__["h"])('div', {
-        class: 'v-color-picker__dot'
-      }, [Object(vue__WEBPACK_IMPORTED_MODULE_0__["h"])('div', {
-        style: {
-          background: Object(_util_colorUtils__WEBPACK_IMPORTED_MODULE_3__["RGBAtoCSS"])(this.color.rgba)
-        }
-      })]);
-    },
     genHue: function genHue() {
       var _this = this;
 
+      if (!this.color) return Object(vue__WEBPACK_IMPORTED_MODULE_0__["h"])('div');
       return this.genTrack({
         class: 'v-color-picker__hue',
         thumbColor: 'grey lighten-2',
         hideDetails: true,
-        value: this.color.hue,
+        modelValue: this.color.hue,
         step: 0,
         min: 0,
         max: 360,
-        onInput: function onInput(val) {
-          return _this.color.hue !== val && _this.$emit('update:color', Object(_util__WEBPACK_IMPORTED_MODULE_4__["fromHSVA"])(__assign(__assign({}, _this.color.hsva), {
-            h: val
-          })));
+        'onUpdate:modelValue': function onUpdateModelValue(val) {
+          if (_this.color && _this.color.hue !== val) {
+            _this.$emit('update:color', Object(_util__WEBPACK_IMPORTED_MODULE_4__["fromHSVA"])(__assign(__assign({}, _this.color.hsva), {
+              h: val
+            })));
+          }
         }
       });
     },
     genTrack: function genTrack(options) {
-      return Object(vue__WEBPACK_IMPORTED_MODULE_0__["h"])(_VSlider_VSlider__WEBPACK_IMPORTED_MODULE_2__["default"], __assign(__assign(__assign({
-        class: 'v-color-picker__track'
-      }, options), {
+      return Object(vue__WEBPACK_IMPORTED_MODULE_0__["h"])(_VSlider_VSlider__WEBPACK_IMPORTED_MODULE_2__["default"], __assign({
+        class: 'v-color-picker__track',
         disabled: this.disabled
-      }), options.props));
+      }, options));
+    },
+    genSliders: function genSliders() {
+      return Object(vue__WEBPACK_IMPORTED_MODULE_0__["h"])('div', {
+        class: 'v-color-picker__sliders'
+      }, [this.genHue(), !this.hideAlpha && this.genAlpha()]);
+    },
+    genDot: function genDot() {
+      return Object(vue__WEBPACK_IMPORTED_MODULE_0__["h"])('div', {
+        class: 'v-color-picker__dot'
+      }, [Object(vue__WEBPACK_IMPORTED_MODULE_0__["h"])('div', {
+        style: {
+          background: this.color ? Object(_util_colorUtils__WEBPACK_IMPORTED_MODULE_3__["RGBAtoCSS"])(this.color.rgba) : 'transparent'
+        }
+      })]);
     }
   },
   render: function render() {
@@ -8724,9 +8713,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _util_colors__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../util/colors */ "./src/util/colors.ts");
 /* harmony import */ var _util__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./util */ "./src/components/VColorPicker/util/index.ts");
 /* harmony import */ var _util_helpers__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../util/helpers */ "./src/util/helpers.ts");
-/* harmony import */ var _util_mixins__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../util/mixins */ "./src/util/mixins.ts");
+/* harmony import */ var _util_colorUtils__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../util/colorUtils */ "./src/util/colorUtils.ts");
 /* harmony import */ var _mixins_themeable__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../../mixins/themeable */ "./src/mixins/themeable/index.ts");
-/* harmony import */ var _util_colorUtils__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../../util/colorUtils */ "./src/util/colorUtils.ts");
  // Styles
 
  // Components
@@ -8736,7 +8724,7 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
-
+ // Mixins
 
 
 
@@ -8749,8 +8737,9 @@ function parseDefaultColors(colors) {
 
 var white = Object(_util__WEBPACK_IMPORTED_MODULE_4__["fromHex"])('#FFFFFF').rgba;
 var black = Object(_util__WEBPACK_IMPORTED_MODULE_4__["fromHex"])('#000000').rgba;
-/* harmony default export */ __webpack_exports__["default"] = (Object(_util_mixins__WEBPACK_IMPORTED_MODULE_6__["default"])(_mixins_themeable__WEBPACK_IMPORTED_MODULE_7__["default"]).extend({
+/* harmony default export */ __webpack_exports__["default"] = (Object(vue__WEBPACK_IMPORTED_MODULE_0__["defineComponent"])({
   name: 'v-color-picker-swatches',
+  mixins: [_mixins_themeable__WEBPACK_IMPORTED_MODULE_7__["default"]],
   props: {
     swatches: {
       type: Array,
@@ -8759,10 +8748,14 @@ var black = Object(_util__WEBPACK_IMPORTED_MODULE_4__["fromHex"])('#000000').rgb
       }
     },
     disabled: Boolean,
-    color: Object,
+    color: {
+      type: Object,
+      required: true
+    },
     maxWidth: [Number, String],
     maxHeight: [Number, String]
   },
+  emits: ['update:color'],
   methods: {
     genColor: function genColor(color) {
       var _this = this;
@@ -8773,15 +8766,14 @@ var black = Object(_util__WEBPACK_IMPORTED_MODULE_4__["fromHex"])('#000000').rgb
         }
       }, [Object(_util_helpers__WEBPACK_IMPORTED_MODULE_5__["deepEqual"])(this.color, Object(_util__WEBPACK_IMPORTED_MODULE_4__["parseColor"])(color, null)) && Object(vue__WEBPACK_IMPORTED_MODULE_0__["h"])(_VIcon__WEBPACK_IMPORTED_MODULE_2__["default"], {
         small: true,
-        dark: Object(_util_colorUtils__WEBPACK_IMPORTED_MODULE_8__["contrastRatio"])(this.color.rgba, white) > 2 && this.color.alpha > 0.5,
-        light: Object(_util_colorUtils__WEBPACK_IMPORTED_MODULE_8__["contrastRatio"])(this.color.rgba, black) > 2 && this.color.alpha > 0.5
+        dark: Object(_util_colorUtils__WEBPACK_IMPORTED_MODULE_6__["contrastRatio"])(this.color.rgba, white) > 2 && this.color.alpha > 0.5,
+        light: Object(_util_colorUtils__WEBPACK_IMPORTED_MODULE_6__["contrastRatio"])(this.color.rgba, black) > 2 && this.color.alpha > 0.5
       }, '$success')]);
       return Object(vue__WEBPACK_IMPORTED_MODULE_0__["h"])('div', {
         class: 'v-color-picker__color',
-        on: {
-          // TODO: Less hacky way of catching transparent
-          click: function click() {
-            return _this.disabled || _this.$emit('update:color', Object(_util__WEBPACK_IMPORTED_MODULE_4__["fromHex"])(color === 'transparent' ? '#00000000' : color));
+        onClick: function onClick() {
+          if (!_this.disabled) {
+            _this.$emit('update:color', Object(_util__WEBPACK_IMPORTED_MODULE_4__["fromHex"])(color === 'transparent' ? '#00000000' : color));
           }
         }
       }, [content]);
@@ -8799,7 +8791,7 @@ var black = Object(_util__WEBPACK_IMPORTED_MODULE_4__["fromHex"])('#000000').rgb
   },
   render: function render() {
     return Object(vue__WEBPACK_IMPORTED_MODULE_0__["h"])('div', {
-      class: 'v-color-picker__swatches',
+      class: ['v-color-picker__swatches', this.themeClasses],
       style: {
         maxWidth: Object(_util_helpers__WEBPACK_IMPORTED_MODULE_5__["convertToUnit"])(this.maxWidth),
         maxHeight: Object(_util_helpers__WEBPACK_IMPORTED_MODULE_5__["convertToUnit"])(this.maxHeight)
@@ -11336,10 +11328,9 @@ function searchTableItems(items, search, headersWithCustomFilters, headersWithou
       }));
     },
     genLoading: function genLoading() {
-      var th = Object(vue__WEBPACK_IMPORTED_MODULE_1__["h"])('th', {
-        class: 'column',
-        attrs: this.colspanAttrs
-      }, [this.genProgress()]);
+      var th = Object(vue__WEBPACK_IMPORTED_MODULE_1__["h"])('th', __assign({
+        class: 'column'
+      }, this.colspanAttrs), [this.genProgress()]);
       var tr = Object(vue__WEBPACK_IMPORTED_MODULE_1__["h"])('tr', {
         class: 'v-data-table__progress'
       }, [th]);
@@ -11377,9 +11368,7 @@ function searchTableItems(items, search, headersWithCustomFilters, headersWithou
     genEmptyWrapper: function genEmptyWrapper(content) {
       return Object(vue__WEBPACK_IMPORTED_MODULE_1__["h"])('tr', {
         class: 'v-data-table__empty-wrapper'
-      }, [Object(vue__WEBPACK_IMPORTED_MODULE_1__["h"])('td', {
-        attrs: this.colspanAttrs
-      }, content)]);
+      }, [Object(vue__WEBPACK_IMPORTED_MODULE_1__["h"])('td', __assign({}, this.colspanAttrs), content)]);
     },
     genItems: function genItems(items, props) {
       var empty = this.genEmpty(props.originalItemsLength, props.pagination.itemsLength);
@@ -11454,10 +11443,9 @@ function searchTableItems(items, search, headersWithCustomFilters, headersWithou
             click: removeFn
           }
         }, [Object(vue__WEBPACK_IMPORTED_MODULE_1__["h"])(_VIcon__WEBPACK_IMPORTED_MODULE_6__["default"], ['$close'])]);
-        var column = Object(vue__WEBPACK_IMPORTED_MODULE_1__["h"])('td', {
-          class: 'text-start',
-          attrs: this.colspanAttrs
-        }, [toggle, this.groupByText + ": " + group, remove]);
+        var column = Object(vue__WEBPACK_IMPORTED_MODULE_1__["h"])('td', __assign({
+          class: 'text-start'
+        }, this.colspanAttrs), [toggle, this.groupByText + ": " + group, remove]);
         children.unshift(Object(vue__WEBPACK_IMPORTED_MODULE_1__["h"])('template', {
           slot: 'column.header'
         }, [column]));
@@ -17772,6 +17760,19 @@ var __assign = undefined && undefined.__assign || function () {
   };
 
   return __assign.apply(this, arguments);
+};
+
+var __rest = undefined && undefined.__rest || function (s, e) {
+  var t = {};
+
+  for (var p in s) {
+    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  }
+
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
 }; // Styles
 
 
@@ -17858,6 +17859,10 @@ var baseMixins = Object(_util_mixins__WEBPACK_IMPORTED_MODULE_9__["default"])(_m
       set: function set(val) {
         this.lazyValue = val;
         this.$emit(this.$_modelEvent, val);
+
+        if ('$_emitChangeEvent' in this) {
+          this.$emit('change', val);
+        }
       }
     },
     isDirty: function isDirty() {
@@ -18045,11 +18050,21 @@ var baseMixins = Object(_util_mixins__WEBPACK_IMPORTED_MODULE_9__["default"])(_m
     }
   },
   render: function render() {
-    return Object(vue__WEBPACK_IMPORTED_MODULE_8__["h"])('div', this.setTextColor(this.validationState, {
-      class: __assign({
+    var _this = this;
+
+    var _a = this.$attrs,
+        additionalClasses = _a.class,
+        restAttrs = __rest(_a, ["class"]);
+
+    return Object(vue__WEBPACK_IMPORTED_MODULE_8__["h"])('div', this.setTextColor(this.validationState, __assign({
+      class: __assign(__assign({
         'v-input': true
-      }, this.classes)
-    }), this.genContent());
+      }, this.classes), Object(_util_helpers__WEBPACK_IMPORTED_MODULE_6__["normalizeClasses"])(additionalClasses))
+    }, restAttrs)), {
+      default: function _default() {
+        return _this.genContent();
+      }
+    });
   }
 }));
 
@@ -24851,7 +24866,7 @@ var __assign = undefined && undefined.__assign || function () {
       var scopedSlot = this.$slots.item({
         parent: parent,
         item: item,
-        attrs: __assign(__assign({}, tile.attrs), tile.props),
+        attrs: __assign(__assign(__assign({}, tile.attrs), tile.props), tile.on),
         on: tile.on
       });
       return this.needsTile(scopedSlot) ? Object(vue__WEBPACK_IMPORTED_MODULE_9__["h"])(_VList__WEBPACK_IMPORTED_MODULE_3__["VListItem"], tile, scopedSlot) : scopedSlot;
@@ -25993,7 +26008,7 @@ var __assign = undefined && undefined.__assign || function () {
       type: [Boolean, String],
       default: undefined,
       validator: function validator(v) {
-        return typeof v === 'boolean' || v === 'always';
+        return typeof v === 'boolean' || v === 'always' || v === undefined;
       }
     },
     thumbSize: {
@@ -26022,6 +26037,7 @@ var __assign = undefined && undefined.__assign || function () {
     modelValue: [Number, String],
     vertical: Boolean
   },
+  emits: ['update:modelValue', 'start', 'end', 'mouseup', 'change', 'focus', 'blur'],
   data: function data() {
     return {
       app: null,
@@ -26047,11 +26063,14 @@ var __assign = undefined && undefined.__assign || function () {
         return this.lazyValue;
       },
       set: function set(val) {
+        var originalVal = val;
         val = isNaN(val) ? this.minValue : val; // Round value to ensure the
         // entire slider range can
         // be selected with step
 
-        var value = this.roundValue(Math.min(Math.max(val, this.minValue), this.maxValue));
+        var value = this.roundValue(val); // Then clamp to min/max
+
+        value = Math.min(Math.max(value, this.minValue), this.maxValue);
         if (value === this.lazyValue) return;
         this.lazyValue = value;
         this.$emit('update:modelValue', value);
@@ -26067,7 +26086,8 @@ var __assign = undefined && undefined.__assign || function () {
       return parseFloat(this.max);
     },
     stepNumeric: function stepNumeric() {
-      return this.step > 0 ? parseFloat(this.step) : 0;
+      var step = parseFloat(this.step);
+      return step > 0 ? step : 0;
     },
     inputWidth: function inputWidth() {
       var inputWidth = (this.roundValue(this.internalValue) - this.minValue) / (this.maxValue - this.minValue) * 100;
@@ -26125,14 +26145,21 @@ var __assign = undefined && undefined.__assign || function () {
   watch: {
     min: function min(val) {
       var parsed = parseFloat(val);
-      parsed > this.internalValue && this.$emit('update:modelValue', parsed);
+
+      if (parsed > this.internalValue) {
+        this.$emit('update:modelValue', parsed);
+      }
     },
     max: function max(val) {
       var parsed = parseFloat(val);
-      parsed < this.internalValue && this.$emit('update:modelValue', parsed);
+
+      if (parsed < this.internalValue) {
+        this.$emit('update:modelValue', parsed);
+      }
     },
     modelValue: {
       handler: function handler(v) {
+        // Use the setter to ensure proper rounding and validation
         this.internalValue = v;
       },
       immediate: true
@@ -26151,7 +26178,7 @@ var __assign = undefined && undefined.__assign || function () {
       return children;
     },
     genSlider: function genSlider() {
-      return Object(vue__WEBPACK_IMPORTED_MODULE_8__["h"])('div', {
+      return Object(vue__WEBPACK_IMPORTED_MODULE_8__["withDirectives"])(Object(vue__WEBPACK_IMPORTED_MODULE_8__["h"])('div', {
         class: __assign({
           'v-slider': true,
           'v-slider--horizontal': !this.vertical,
@@ -26161,14 +26188,10 @@ var __assign = undefined && undefined.__assign || function () {
           'v-slider--disabled': this.isDisabled,
           'v-slider--readonly': this.isReadonly
         }, this.themeClasses),
-        directives: [{
-          name: 'click-outside',
-          value: this.onBlur
-        }],
         onClick: this.onSliderClick,
         onMousedown: this.onSliderMouseDown,
         onTouchstart: this.onSliderMouseDown
-      }, this.genChildren());
+      }, this.genChildren()), [[_directives_click_outside__WEBPACK_IMPORTED_MODULE_5__["default"], this.onBlur]]);
     },
     genChildren: function genChildren() {
       return [this.genInput(), this.genTrackContainer(), this.genSteps(), this.genThumbContainer(this.internalValue, this.inputWidth, this.isActive, this.isFocused, this.onFocus, this.onBlur)];
@@ -26274,12 +26297,8 @@ var __assign = undefined && undefined.__assign || function () {
       var transform = this.vertical ? "translateY(20%) translateY(" + (Number(this.thumbSize) / 3 - 1) + "px) translateX(55%) rotate(135deg)" : "translateY(-20%) translateY(-12px) translateX(-50%) rotate(45deg)";
       return Object(vue__WEBPACK_IMPORTED_MODULE_8__["h"])(_transitions__WEBPACK_IMPORTED_MODULE_2__["VScaleTransition"], {
         origin: 'bottom center'
-      }, [Object(vue__WEBPACK_IMPORTED_MODULE_8__["h"])('div', {
-        class: 'v-slider__thumb-label-container',
-        directives: [{
-          name: 'show',
-          value: this.isFocused || this.isActive || this.thumbLabel === 'always'
-        }]
+      }, [Object(vue__WEBPACK_IMPORTED_MODULE_8__["withDirectives"])(Object(vue__WEBPACK_IMPORTED_MODULE_8__["h"])('div', {
+        class: 'v-slider__thumb-label-container'
       }, [Object(vue__WEBPACK_IMPORTED_MODULE_8__["h"])('div', this.setBackgroundColor(this.computedThumbColor, {
         class: 'v-slider__thumb-label',
         style: {
@@ -26287,7 +26306,7 @@ var __assign = undefined && undefined.__assign || function () {
           width: size,
           transform: transform
         }
-      }), [Object(vue__WEBPACK_IMPORTED_MODULE_8__["h"])('div', content)])])]);
+      }), [Object(vue__WEBPACK_IMPORTED_MODULE_8__["h"])('div', content)])]), [[vue__WEBPACK_IMPORTED_MODULE_8__["vShow"], this.isFocused || this.isActive || this.thumbLabel === 'always']])]);
     },
     genThumb: function genThumb() {
       return Object(vue__WEBPACK_IMPORTED_MODULE_8__["h"])('div', this.setBackgroundColor(this.computedThumbColor, {
@@ -26382,6 +26401,7 @@ var __assign = undefined && undefined.__assign || function () {
       thumb.focus();
       this.onMouseMove(e);
       this.$emit('update:modelValue', this.internalValue);
+      this.$emit('change', this.internalValue);
     },
     onBlur: function onBlur(e) {
       this.isFocused = false;
@@ -31358,6 +31378,7 @@ __webpack_require__.r(__webpack_exports__);
  // Helpers
 
 
+ // Types
 
 
 /* @vue/component */
@@ -31464,7 +31485,7 @@ __webpack_require__.r(__webpack_exports__);
     var _this = this;
 
     this.$nextTick(function () {
-      _this.value && _this.callActivate();
+      _this.modelValue && _this.callActivate();
     });
   },
   mounted: function mounted() {
@@ -31528,16 +31549,12 @@ __webpack_require__.r(__webpack_exports__);
     genContent: function genContent() {
       var _a;
 
-      return Object(vue__WEBPACK_IMPORTED_MODULE_0__["h"])('div', this.setBackgroundColor(this.color, {
+      return Object(vue__WEBPACK_IMPORTED_MODULE_0__["withDirectives"])(Object(vue__WEBPACK_IMPORTED_MODULE_0__["h"])('div', this.setBackgroundColor(this.color, {
         class: ['v-tooltip__content', (_a = {}, _a[this.contentClass] = true, _a.menuable__content__active = this.isActive, _a['v-tooltip__content--fixed'] = this.activatorFixed, _a)],
         style: this.styles,
         attrs: this.getScopeIdAttrs(),
-        directives: [{
-          name: 'show',
-          value: this.isContentActive
-        }],
         ref: 'content'
-      }), this.getContentSlot());
+      }), this.getContentSlot()), [[vue__WEBPACK_IMPORTED_MODULE_0__["vShow"], this.isContentActive]]);
     }
   },
   render: function render() {
@@ -35239,7 +35256,7 @@ function () {
 
   Vuetify.install = _install__WEBPACK_IMPORTED_MODULE_0__["install"];
   Vuetify.installed = false;
-  Vuetify.version = "2.7.2-alpha22";
+  Vuetify.version = "2.7.2-alpha25";
   Vuetify.config = {
     silent: false
   };
@@ -39370,7 +39387,8 @@ var baseMixins = Object(_util_mixins__WEBPACK_IMPORTED_MODULE_2__["default"])(_d
     },
     genActivator: function genActivator() {
       var node = Object(_util_helpers__WEBPACK_IMPORTED_MODULE_3__["getSlot"])(this, 'activator', Object.assign(this.getValueProxy(), {
-        attrs: __assign(__assign({}, this.genActivatorListeners()), this.genActivatorAttributes())
+        attrs: __assign(__assign({}, this.genActivatorListeners()), this.genActivatorAttributes()),
+        on: this.genActivatorListeners()
       })) || [];
       node = Array.isArray(node) ? node : [node];
       this.activatorNode = node.flatMap(function (node) {
@@ -39666,8 +39684,6 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(vue__WEBPACK_IMPORTED_MODULE_1__);
 // Utilities
 
- // Types
-
 
 /**
  * Bootable
@@ -39708,7 +39724,7 @@ __webpack_require__.r(__webpack_exports__);
   },
   methods: {
     showLazyContent: function showLazyContent(content) {
-      return this.hasContent && content ? content() : [Object(vue__WEBPACK_IMPORTED_MODULE_1__["h"])()];
+      return this.hasContent && content ? content() : [Object(vue__WEBPACK_IMPORTED_MODULE_1__["h"])(vue__WEBPACK_IMPORTED_MODULE_1__["Comment"])];
     }
   }
 }));
@@ -41088,6 +41104,7 @@ __webpack_require__.r(__webpack_exports__);
 __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! vue */ "vue");
 /* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(vue__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _util_helpers__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../util/helpers */ "./src/util/helpers.ts");
 var __assign = undefined && undefined.__assign || function () {
   __assign = Object.assign || function (t) {
     for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -41106,9 +41123,9 @@ var __assign = undefined && undefined.__assign || function () {
 
 
 
+
 function mapEventName(str) {
-  var newStr = "on" + str;
-  return newStr.charAt(0).toUpperCase() + newStr.slice(1);
+  return "on" + Object(_util_helpers__WEBPACK_IMPORTED_MODULE_1__["upperFirst"])(str);
 }
 
 /* harmony default export */ __webpack_exports__["default"] = (Object(vue__WEBPACK_IMPORTED_MODULE_0__["defineComponent"])({
@@ -41124,8 +41141,11 @@ function mapEventName(str) {
       var listeners = Object.keys(this.$attrs).filter(function (key) {
         return key.endsWith(suffix);
       }).reduce(function (acc, key) {
-        acc[key] = {
-          event: key.slice(0, -suffix.length)
+        var eventName = suffix ? key.slice(0, -suffix.length) : key;
+        var cleanEventName = eventName.startsWith('on') ? eventName.slice(2).toLowerCase() : eventName.toLowerCase();
+        acc[cleanEventName] = {
+          event: cleanEventName,
+          originalKey: key
         };
         return acc;
       }, {});
@@ -41146,7 +41166,8 @@ function mapEventName(str) {
 
       var _loop_1 = function _loop_1(event) {
         var eventOptions = events[event];
-        if (!this_1.$attrs[mapEventName(event)]) return "continue"; // TODO somehow pull in modifiers
+        var attrName = eventOptions.originalKey || (event.includes(':') ? event : mapEventName(event));
+        if (!this_1.$attrs[attrName]) return "continue"; // TODO somehow pull in modifiers
 
         var prefix = eventOptions.passive ? '&' : (eventOptions.once ? '~' : '') + (eventOptions.capture ? '!' : '');
         var key = prefix + eventOptions.event;
@@ -42376,6 +42397,9 @@ function prevent(e) {
       lazyValue: this.modelValue
     };
   },
+  created: function created() {
+    this.$_emitChangeEvent = true;
+  },
   computed: {
     computedColor: function computedColor() {
       if (!this.isActive) return undefined;