@zeedhi/vuetify 1.45.0 → 1.47.0

package/dist/zd-vuetify.umd.js

@@ -330,9 +330,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     }
 
     register(uid, location, size) {
-      this.application[location] = {
-        [uid]: size
-      };
+      this.application[location][uid] = size;
       this.update(location);
     }
 
@@ -657,13 +655,20 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     return Vue__default["default"].extend({
       name: name || c.replace(/__/g, '-'),
       functional: true,
+      props: {
+        tag: {
+          type: String,
+          default: el
+        }
+      },
 
       render(h, {
         data,
+        props,
         children
       }) {
         data.staticClass = `${c} ${data.staticClass || ''}`.trim();
-        return h(el, data, children);
+        return h(props.tag, data, children);
       }
 
     });
@@ -962,12 +967,12 @@ If you're seeing "$attrs is readonly", it's caused by this`);
    */
 
   function getSlotType(vm, name, split) {
-    if (vm.$slots[name] && vm.$scopedSlots[name] && vm.$scopedSlots[name].name) {
+    if (vm.$slots.hasOwnProperty(name) && vm.$scopedSlots.hasOwnProperty(name) && vm.$scopedSlots[name].name) {
       return split ? 'v-slot' : 'scoped';
     }
 
-    if (vm.$slots[name]) return 'normal';
-    if (vm.$scopedSlots[name]) return 'scoped';
+    if (vm.$slots.hasOwnProperty(name)) return 'normal';
+    if (vm.$scopedSlots.hasOwnProperty(name)) return 'scoped';
   }
   function debounce(fn, delay) {
     let timeoutId = 0;
@@ -993,9 +998,9 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     }, {});
   }
   function getSlot(vm, name = 'default', data, optional = false) {
-    if (vm.$scopedSlots[name]) {
+    if (vm.$scopedSlots.hasOwnProperty(name)) {
       return vm.$scopedSlots[name](data instanceof Function ? data() : data);
-    } else if (vm.$slots[name] && (!data || optional)) {
+    } else if (vm.$slots.hasOwnProperty(name) && (!data || optional)) {
       return vm.$slots[name];
     }
 
@@ -2215,7 +2220,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   }
   Vuetify.install = install;
   Vuetify.installed = false;
-  Vuetify.version = "2.5.14";
+  Vuetify.version = "2.6.4";
   Vuetify.config = {
     silent: false
   };
@@ -3477,10 +3482,6 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     el.style.webkitTransform = value;
   }
 
-  function opacity(el, value) {
-    el.style.opacity = value.toString();
-  }
-
   function isTouchEvent(e) {
     return e.constructor.name === 'TouchEvent';
   }
@@ -3564,13 +3565,11 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       animation.classList.add('v-ripple__animation--enter');
       animation.classList.add('v-ripple__animation--visible');
       transform(animation, `translate(${x}, ${y}) scale3d(${scale},${scale},${scale})`);
-      opacity(animation, 0);
       animation.dataset.activated = String(performance.now());
       setTimeout(() => {
         animation.classList.remove('v-ripple__animation--enter');
         animation.classList.add('v-ripple__animation--in');
         transform(animation, `translate(${centerX}, ${centerY}) scale3d(1,1,1)`);
-        opacity(animation, 0.25);
       }, 0);
     },
 
@@ -3585,7 +3584,6 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       setTimeout(() => {
         animation.classList.remove('v-ripple__animation--in');
         animation.classList.add('v-ripple__animation--out');
-        opacity(animation, 0);
         setTimeout(() => {
           const ripples = el.getElementsByClassName('v-ripple__animation');
 
@@ -4061,10 +4059,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   const Toggleable = factory$2();
 
   // Styles
-  const baseMixins$t = mixins(VToolbar, Scrollable, SSRBootable, Toggleable, applicationable('top', ['clippedLeft', 'clippedRight', 'computedHeight', 'invertedScroll', 'isExtended', 'isProminent', 'value']));
+  const baseMixins$u = mixins(VToolbar, Scrollable, SSRBootable, Toggleable, applicationable('top', ['clippedLeft', 'clippedRight', 'computedHeight', 'invertedScroll', 'isExtended', 'isProminent', 'value']));
   /* @vue/component */
 
-  var VAppBar = baseMixins$t.extend({
+  var VAppBar = baseMixins$u.extend({
     name: 'v-app-bar',
     directives: {
       Scroll
@@ -4846,10 +4844,6 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     },
 
     methods: {
-      click(e) {
-        this.$emit('click', e);
-      },
-
       generateRouteLink() {
         let exact = this.exact;
         let tag;
@@ -4865,7 +4859,9 @@ If you're seeing "$attrs is readonly", it's caused by this`);
             value: this.computedRipple
           }],
           [this.to ? 'nativeOn' : 'on']: { ...this.$listeners,
-            click: this.click
+            ...('click' in this ? {
+              click: this.click
+            } : undefined)
           },
           ref: 'link'
         };
@@ -4909,8 +4905,8 @@ If you're seeing "$attrs is readonly", it's caused by this`);
 
       onRouteChange() {
         if (!this.to || !this.$refs.link || !this.$route) return;
-        const activeClass = `${this.activeClass} ${this.proxyClass || ''}`.trim();
-        const exactActiveClass = `${this.exactActiveClass} ${this.proxyClass || ''}`.trim() || activeClass;
+        const activeClass = `${this.activeClass || ''} ${this.proxyClass || ''}`.trim();
+        const exactActiveClass = `${this.exactActiveClass || ''} ${this.proxyClass || ''}`.trim() || activeClass;
         const path = '_vnode.data.class.' + (this.exact ? exactActiveClass : activeClass);
         this.$nextTick(() => {
           /* istanbul ignore else */
@@ -4928,10 +4924,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   });
 
   // Styles
-  const baseMixins$s = mixins(VSheet, Routable, Positionable, Sizeable, factory$1('btnToggle'), factory$2('inputValue')
+  const baseMixins$t = mixins(VSheet, Routable, Positionable, Sizeable, factory$1('btnToggle'), factory$2('inputValue')
   /* @vue/component */
   );
-  var VBtn = baseMixins$s.extend().extend({
+  var VBtn = baseMixins$t.extend().extend({
     name: 'v-btn',
     props: {
       activeClass: {
@@ -5830,10 +5826,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   });
 
   // Mixins
-  const baseMixins$r = mixins(Delayable, Toggleable);
+  const baseMixins$s = mixins(Delayable, Toggleable);
   /* @vue/component */
 
-  var Activatable = baseMixins$r.extend({
+  var Activatable = baseMixins$s.extend({
     name: 'activatable',
     props: {
       activator: {
@@ -5844,6 +5840,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       },
       disabled: Boolean,
       internalActivator: Boolean,
+      openOnClick: {
+        type: Boolean,
+        default: true
+      },
       openOnHover: Boolean,
       openOnFocus: Boolean
     },
@@ -5896,7 +5896,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
 
       genActivatorAttributes() {
         return {
-          role: 'button',
+          role: this.openOnClick && !this.openOnHover ? 'button' : undefined,
           'aria-haspopup': true,
           'aria-expanded': String(this.isActive)
         };
@@ -5916,7 +5916,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
             this.getActivator(e);
             this.runDelay('close');
           };
-        } else {
+        } else if (this.openOnClick) {
           listeners.click = e => {
             const activator = this.getActivator(e);
             if (activator) activator.focus();
@@ -6320,10 +6320,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   });
 
   // Mixins
-  const baseMixins$q = mixins(Stackable, factory$3(['top', 'right', 'bottom', 'left', 'absolute']), Activatable, Detachable);
+  const baseMixins$r = mixins(Stackable, factory$3(['top', 'right', 'bottom', 'left', 'absolute']), Activatable, Detachable);
   /* @vue/component */
 
-  var Menuable = baseMixins$q.extend().extend({
+  var Menuable = baseMixins$r.extend().extend({
     name: 'menuable',
     props: {
       allowOverflow: Boolean,
@@ -6355,7 +6355,6 @@ If you're seeing "$attrs is readonly", it's caused by this`);
         default: 0
       },
       offsetOverflow: Boolean,
-      openOnClick: Boolean,
       positionX: {
         type: Number,
         default: null
@@ -6415,7 +6414,8 @@ If you're seeing "$attrs is readonly", it's caused by this`);
         const activatorLeft = (this.attach !== false ? a.offsetLeft : a.left) || 0;
         const minWidth = Math.max(a.width, c.width);
         let left = 0;
-        left += this.left ? activatorLeft - (minWidth - a.width) : activatorLeft;
+        left += activatorLeft;
+        if (this.left || this.$vuetify.rtl && !this.right) left -= minWidth - a.width;
 
         if (this.offsetX) {
           const maxWidth = isNaN(Number(this.maxWidth)) ? a.width : Math.min(a.width, Number(this.maxWidth));
@@ -6573,14 +6573,16 @@ If you're seeing "$attrs is readonly", it's caused by this`);
         const listeners = Activatable.options.methods.genActivatorListeners.call(this);
         const onClick = listeners.click;
 
-        listeners.click = e => {
-          if (this.openOnClick) {
-            onClick && onClick(e);
-          }
+        if (onClick) {
+          listeners.click = e => {
+            if (this.openOnClick) {
+              onClick && onClick(e);
+            }
 
-          this.absoluteX = e.clientX;
-          this.absoluteY = e.clientY;
-        };
+            this.absoluteX = e.clientX;
+            this.absoluteY = e.clientY;
+          };
+        }
 
         return listeners;
       },
@@ -6729,10 +6731,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   });
 
   // Styles
-  const baseMixins$p = mixins(Dependent, Delayable, Menuable, Returnable, Roundable, Toggleable, Themeable);
+  const baseMixins$q = mixins(Dependent, Delayable, Returnable, Roundable, Themeable, Menuable);
   /* @vue/component */
 
-  var VMenu = baseMixins$p.extend({
+  var VMenu = baseMixins$q.extend({
     name: 'v-menu',
     directives: {
       ClickOutside,
@@ -6765,10 +6767,6 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       },
       offsetX: Boolean,
       offsetY: Boolean,
-      openOnClick: {
-        type: Boolean,
-        default: true
-      },
       openOnHover: Boolean,
       origin: {
         type: String,
@@ -7082,7 +7080,9 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       mouseLeaveHandler(e) {
         // Prevent accidental re-activation
         this.runDelay('close', () => {
-          if (this.$refs.content.contains(e.relatedTarget)) return;
+          var _this$$refs$content;
+
+          if ((_this$$refs$content = this.$refs.content) != null && _this$$refs$content.contains(e.relatedTarget)) return;
           requestAnimationFrame(() => {
             this.isActive = false;
             this.callDeactivate();
@@ -7411,10 +7411,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   });
 
   // Styles
-  const baseMixins$o = mixins(Colorable, Routable, Themeable, factory$1('listItemGroup'), factory$2('inputValue'));
+  const baseMixins$p = mixins(Colorable, Routable, Themeable, factory$1('listItemGroup'), factory$2('inputValue'));
   /* @vue/component */
 
-  var VListItem = baseMixins$o.extend().extend({
+  var VListItem = baseMixins$p.extend().extend({
     name: 'v-list-item',
     directives: {
       Ripple
@@ -7575,8 +7575,8 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   });
 
   // Styles
-  const baseMixins$n = mixins(BindsAttrs, Bootable, Colorable, inject('list'), Toggleable);
-  var VListGroup = baseMixins$n.extend().extend({
+  const baseMixins$o = mixins(BindsAttrs, Bootable, Colorable, inject('list'), Toggleable);
+  var VListGroup = baseMixins$o.extend().extend({
     name: 'v-list-group',
     directives: {
       ripple: Ripple
@@ -7733,6 +7733,16 @@ If you're seeing "$attrs is readonly", it's caused by this`);
 
   });
 
+  var Comparable = Vue__default["default"].extend({
+    name: 'comparable',
+    props: {
+      valueComparator: {
+        type: Function,
+        default: deepEqual
+      }
+    }
+  });
+
   function factory(prop = 'value', event = 'change') {
     return Vue__default["default"].extend({
       name: 'proxyable',
@@ -7779,7 +7789,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   const Proxyable = factory();
 
   // Styles
-  const BaseItemGroup = mixins(Proxyable, Themeable).extend({
+  const BaseItemGroup = mixins(Comparable, Proxyable, Themeable).extend({
     name: 'base-item-group',
     props: {
       activeClass: {
@@ -7838,13 +7848,13 @@ If you're seeing "$attrs is readonly", it's caused by this`);
 
       toggleMethod() {
         if (!this.multiple) {
-          return v => this.internalValue === v;
+          return v => this.valueComparator(this.internalValue, v);
         }
 
         const internalValue = this.internalValue;
 
         if (Array.isArray(internalValue)) {
-          return v => internalValue.includes(v);
+          return v => internalValue.some(intern => this.valueComparator(intern, v));
         }
 
         return () => false;
@@ -7870,7 +7880,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       },
 
       getValue(item, i) {
-        return item.value == null || item.value === '' ? i : item.value;
+        return item.value === undefined ? i : item.value;
       },
 
       onClick(item) {
@@ -8457,10 +8467,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   });
 
   // Mixins
-  const baseMixins$m = mixins(Colorable, inject('form'), Themeable);
+  const baseMixins$n = mixins(Colorable, inject('form'), Themeable);
   /* @vue/component */
 
-  var Validatable = baseMixins$m.extend({
+  var Validatable = baseMixins$n.extend({
     name: 'validatable',
     props: {
       disabled: Boolean,
@@ -8709,10 +8719,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   });
 
   // Styles
-  const baseMixins$l = mixins(BindsAttrs, Validatable);
+  const baseMixins$m = mixins(BindsAttrs, Validatable);
   /* @vue/component */
 
-  var VInput = baseMixins$l.extend().extend({
+  var VInput = baseMixins$m.extend().extend({
     name: 'v-input',
     inheritAttrs: false,
     props: {
@@ -8724,6 +8734,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       dense: Boolean,
       height: [Number, String],
       hideDetails: [Boolean, String],
+      hideSpinButtons: Boolean,
       hint: String,
       id: String,
       label: String,
@@ -8753,6 +8764,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
           'v-input--is-loading': this.loading !== false && this.loading != null,
           'v-input--is-readonly': this.isReadonly,
           'v-input--dense': this.dense,
+          'v-input--hide-spin-buttons': this.hideSpinButtons,
           ...this.themeClasses
         };
       },
@@ -9060,10 +9072,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     });
   }
 
-  const baseMixins$k = mixins(Colorable, factory$3(['absolute', 'fixed', 'top', 'bottom']), Proxyable, Themeable);
+  const baseMixins$l = mixins(Colorable, factory$3(['absolute', 'fixed', 'top', 'bottom']), Proxyable, Themeable);
   /* @vue/component */
 
-  var VProgressLinear = baseMixins$k.extend({
+  var VProgressLinear = baseMixins$l.extend({
     name: 'v-progress-linear',
     directives: {
       intersect: Intersect
@@ -9338,13 +9350,13 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   });
 
   // Styles
-  const baseMixins$j = mixins(VInput, intersectable({
+  const baseMixins$k = mixins(VInput, intersectable({
     onVisible: ['onResize', 'tryAutofocus']
   }), Loadable);
   const dirtyTypes = ['color', 'file', 'time', 'date', 'datetime-local', 'week', 'month'];
   /* @vue/component */
 
-  var VTextField = baseMixins$j.extend().extend({
+  var VTextField = baseMixins$k.extend().extend({
     name: 'v-text-field',
     directives: {
       resize: Resize,
@@ -9849,16 +9861,6 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     }
   });
 
-  var Comparable = Vue__default["default"].extend({
-    name: 'comparable',
-    props: {
-      valueComparator: {
-        type: Function,
-        default: deepEqual
-      }
-    }
-  });
-
   /* @vue/component */
 
   var Filterable = Vue__default["default"].extend({
@@ -9880,10 +9882,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     maxHeight: 304
   }; // Types
 
-  const baseMixins$i = mixins(VTextField, Comparable, Dependent, Filterable);
+  const baseMixins$j = mixins(VTextField, Comparable, Dependent, Filterable);
   /* @vue/component */
 
-  var VSelect = baseMixins$i.extend().extend({
+  var VSelect = baseMixins$j.extend().extend({
     name: 'v-select',
     directives: {
       ClickOutside
@@ -10080,6 +10082,14 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       internalValue(val) {
         this.initialValue = val;
         this.setSelectedItems();
+
+        if (this.multiple) {
+          this.$nextTick(() => {
+            var _this$$refs$menu;
+
+            (_this$$refs$menu = this.$refs.menu) == null ? void 0 : _this$$refs$menu.updateDimensions();
+          });
+        }
       },
 
       isMenuActive(val) {
@@ -10139,7 +10149,12 @@ If you're seeing "$attrs is readonly", it's caused by this`);
         const uniqueValues = new Map();
 
         for (let index = 0; index < arr.length; ++index) {
-          const item = arr[index]; // Do not deduplicate headers or dividers (#12517)
+          const item = arr[index]; // Do not return null values if existant (#14421)
+
+          if (item == null) {
+            continue;
+          } // Do not deduplicate headers or dividers (#12517)
+
 
           if (item.header || item.divider) {
             uniqueValues.set(item, item);
@@ -10599,13 +10614,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
           i !== -1 ? internalValue.splice(i, 1) : internalValue.push(item);
           this.setValue(internalValue.map(i => {
             return this.returnObject ? i : this.getValue(i);
-          })); // When selecting multiple
-          // adjust menu after each
-          // selection
-
-          this.$nextTick(() => {
-            this.$refs.menu && this.$refs.menu.updateDimensions();
-          }); // There is no item to re-highlight
+          })); // There is no item to re-highlight
           // when selections are hidden
 
           if (this.hideSelected) {
@@ -10968,6 +10977,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
         const value = target.value; // If typing and menu is not currently active
 
         if (target.value) this.activateMenu();
+        if (!this.multiple && value === '') this.deleteCurrentItem();
         this.internalSearch = value;
         this.badInput = target.validity && target.validity.badInput;
       },
@@ -11387,7 +11397,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     },
 
     render(h) {
-      return h(VExpandTransition, [h('div', this.setBackgroundColor(this.color, {
+      const data = {
         staticClass: 'v-banner',
         attrs: this.attrs$,
         class: this.classes,
@@ -11396,7 +11406,8 @@ If you're seeing "$attrs is readonly", it's caused by this`);
           name: 'show',
           value: this.isActive
         }]
-      }), [this.genWrapper()])]);
+      };
+      return h(VExpandTransition, [h('div', this.outlined ? data : this.setBackgroundColor(this.color, data), [this.genWrapper()])]);
     }
 
   });
@@ -11483,6 +11494,9 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       }
 
     },
+    watch: {
+      canScroll: 'onScroll'
+    },
 
     created() {
       /* istanbul ignore next */
@@ -11493,8 +11507,13 @@ If you're seeing "$attrs is readonly", it's caused by this`);
 
     methods: {
       thresholdMet() {
-        this.isActive = !this.isScrollingUp;
-        this.$emit('update:input-value', this.isActive);
+        if (this.hideOnScroll) {
+          this.isActive = !this.isScrollingUp || this.currentScroll > this.computedScrollThreshold;
+          this.$emit('update:input-value', this.isActive);
+        }
+
+        if (this.currentThreshold < this.computedScrollThreshold) return;
+        this.savedScroll = this.currentScroll;
       },
 
       updateApplication() {
@@ -11808,10 +11827,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   });
 
   // Styles
-  const baseMixins$h = mixins(Activatable, Dependent, Detachable, Overlayable, Returnable, Stackable, Toggleable);
+  const baseMixins$i = mixins(Dependent, Detachable, Overlayable, Returnable, Stackable, Activatable);
   /* @vue/component */
 
-  var VDialog = baseMixins$h.extend({
+  var VDialog = baseMixins$i.extend({
     name: 'v-dialog',
     directives: {
       ClickOutside
@@ -11821,10 +11840,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       disabled: Boolean,
       fullscreen: Boolean,
       light: Boolean,
-      maxWidth: {
-        type: [String, Number],
-        default: 'none'
-      },
+      maxWidth: [String, Number],
       noClickAnimation: Boolean,
       origin: {
         type: String,
@@ -11840,10 +11856,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
         type: [String, Boolean],
         default: 'dialog-transition'
       },
-      width: {
-        type: [String, Number],
-        default: 'auto'
-      }
+      width: [String, Number]
     },
 
     data() {
@@ -11851,7 +11864,6 @@ If you're seeing "$attrs is readonly", it's caused by this`);
         activatedBy: null,
         animate: false,
         animateTimeout: -1,
-        isActive: !!this.value,
         stackMinZIndex: 200,
         previousActiveElement: null
       };
@@ -12032,8 +12044,9 @@ If you're seeing "$attrs is readonly", it's caused by this`);
         }, [this.$createElement('div', {
           class: this.contentClasses,
           attrs: {
-            role: 'document',
+            role: 'dialog',
             tabindex: this.isActive ? 0 : undefined,
+            'aria-modal': this.hideOverlay ? undefined : 'true',
             ...this.getScopeIdAttrs()
           },
           on: {
@@ -12080,8 +12093,8 @@ If you're seeing "$attrs is readonly", it's caused by this`);
 
         if (!this.fullscreen) {
           data.style = { ...data.style,
-            maxWidth: this.maxWidth === 'none' ? undefined : convertToUnit(this.maxWidth),
-            width: this.width === 'auto' ? undefined : convertToUnit(this.width)
+            maxWidth: convertToUnit(this.maxWidth),
+            width: convertToUnit(this.width)
           };
         }
 
@@ -12095,9 +12108,6 @@ If you're seeing "$attrs is readonly", it's caused by this`);
         staticClass: 'v-dialog__container',
         class: {
           'v-dialog__container--attached': this.attach === '' || this.attach === true || this.attach === 'attach'
-        },
-        attrs: {
-          role: 'dialog'
         }
       }, [this.genActivator(), this.genContent()]);
     }
@@ -12110,10 +12120,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     name: 'v-bottom-sheet',
     props: {
       inset: Boolean,
-      maxWidth: {
-        type: [String, Number],
-        default: 'auto'
-      },
+      maxWidth: [String, Number],
       transition: {
         type: String,
         default: 'bottom-sheet-transition'
@@ -12354,11 +12361,16 @@ If you're seeing "$attrs is readonly", it's caused by this`);
 
 
               if (e && 'touches' in e) {
-                var _e$target, _e$target2;
+                var _e$currentTarget, _e$target;
+
+                const classSeparator = ' ';
+                const eventTargetClasses = (_e$currentTarget = e.currentTarget) == null ? void 0 : _e$currentTarget.className.split(classSeparator);
+                const currentTargets = document.elementsFromPoint(e.changedTouches[0].clientX, e.changedTouches[0].clientY); // Get "the same kind" current hovering target by checking
+                // If element has the same class of initial touch start element (which has touch event listener registered)
 
-                const currentTarget = document.elementFromPoint(e.changedTouches[0].clientX, e.changedTouches[0].clientY);
+                const currentTarget = currentTargets.find(t => t.className.split(classSeparator).some(c => eventTargetClasses.includes(c)));
 
-                if (currentTarget && !((_e$target = e.target) != null && _e$target.isSameNode(currentTarget)) && ((_e$target2 = e.target) == null ? void 0 : _e$target2.className) === currentTarget.className) {
+                if (currentTarget && !((_e$target = e.target) != null && _e$target.isSameNode(currentTarget))) {
                   currentTarget.dispatchEvent(new TouchEvent(e.type, {
                     changedTouches: e.changedTouches,
                     targetTouches: e.targetTouches,
@@ -12368,7 +12380,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                 }
               }
 
-              this.$emit(event, getEvent(e));
+              this.$emit(event, getEvent(e), e);
             }
 
             return eventOptions.result;
@@ -14048,9 +14060,12 @@ If you're seeing "$attrs is readonly", it's caused by this`);
             name: 'ripple',
             value: (_this$eventRipple2 = this.eventRipple) != null ? _this$eventRipple2 : true
           }],
-          on: {
-            click: () => this.$emit('click:more', day)
-          },
+          on: this.getDefaultMouseEventHandlers(':more', nativeEvent => {
+            return {
+              nativeEvent,
+              ...day
+            };
+          }),
           style: {
             display: 'none',
             height: `${eventHeight}px`,
@@ -14303,7 +14318,12 @@ If you're seeing "$attrs is readonly", it's caused by this`);
           key: day.date,
           staticClass: 'v-calendar-weekly__day',
           class: this.getRelativeClasses(day, outside),
-          on: this.getDefaultMouseEventHandlers(':day', _e => day)
+          on: this.getDefaultMouseEventHandlers(':day', nativeEvent => {
+            return {
+              nativeEvent,
+              ...day
+            };
+          })
         }, [this.genDayLabel(day), ...(getSlot(this, 'day', () => ({
           outside,
           index,
@@ -14339,7 +14359,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
               prevent: true,
               result: false
             }
-          }, _e => day)
+          }, nativeEvent => ({
+            nativeEvent,
+            ...day
+          }))
         }, hasMonth ? this.monthFormatter(day, this.shortMonths) + ' ' + this.dayFormatter(day, false) : this.dayFormatter(day, false));
       },
 
@@ -14612,8 +14635,11 @@ If you're seeing "$attrs is readonly", it's caused by this`);
           key: day.date,
           staticClass: 'v-calendar-daily_head-day',
           class: this.getRelativeClasses(day),
-          on: this.getDefaultMouseEventHandlers(':day', _e => {
-            return this.getSlotScope(day);
+          on: this.getDefaultMouseEventHandlers(':day', nativeEvent => {
+            return {
+              nativeEvent,
+              ...this.getSlotScope(day)
+            };
           })
         }, [this.genHeadWeekday(day), this.genHeadDayLabel(day), ...this.genDayHeader(day, index)]);
       },
@@ -14658,8 +14684,11 @@ If you're seeing "$attrs is readonly", it's caused by this`);
               prevent: true,
               result: false
             }
-          }, _e => {
-            return day;
+          }, nativeEvent => {
+            return {
+              nativeEvent,
+              ...day
+            };
           })
         }, this.dayFormatter(day, false));
       },
@@ -14702,8 +14731,11 @@ If you're seeing "$attrs is readonly", it's caused by this`);
           key: day.date,
           staticClass: 'v-calendar-daily__day',
           class: this.getRelativeClasses(day),
-          on: this.getDefaultMouseEventHandlers(':time', e => {
-            return this.getSlotScope(this.getTimestampAtEvent(e, day));
+          on: this.getDefaultMouseEventHandlers(':time', nativeEvent => {
+            return {
+              nativeEvent,
+              ...this.getSlotScope(this.getTimestampAtEvent(nativeEvent, day))
+            };
           })
         }, [...this.genDayIntervals(index), ...this.genDayBody(day)]);
       },
@@ -14738,8 +14770,11 @@ If you're seeing "$attrs is readonly", it's caused by this`);
           style: {
             width
           },
-          on: this.getDefaultMouseEventHandlers(':interval', e => {
-            return this.getTimestampAtEvent(e, this.parsedStart);
+          on: this.getDefaultMouseEventHandlers(':interval', nativeEvent => {
+            return {
+              nativeEvent,
+              ...this.getTimestampAtEvent(nativeEvent, this.parsedStart)
+            };
           })
         };
         return this.$createElement('div', data, this.genIntervalLabels());
@@ -14935,7 +14970,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   // Styles
   /* @vue/component */
 
-  CalendarWithEvents.extend({
+  var VCalendar = CalendarWithEvents.extend({
     name: 'v-calendar',
     props: { ...props.calendar,
       ...props.weeks,
@@ -15306,13 +15341,13 @@ If you're seeing "$attrs is readonly", it's caused by this`);
           value: this.updateEventVisibility
         }],
         on: { ...this.$listeners,
-          'click:date': day => {
+          'click:date': (day, e) => {
             if (this.$listeners.input) {
               this.$emit('input', day.date);
             }
 
             if (this.$listeners['click:date']) {
-              this.$emit('click:date', day);
+              this.$emit('click:date', day, e);
             }
           }
         },
@@ -15861,8 +15896,8 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   });
 
   // Mixins
-  const baseMixins$g = mixins(Bootable, factory$1('windowGroup', 'v-window-item', 'v-window'));
-  var VWindowItem = baseMixins$g.extend().extend().extend({
+  const baseMixins$h = mixins(Bootable, factory$1('windowGroup', 'v-window-item', 'v-window'));
+  var VWindowItem = baseMixins$h.extend().extend().extend({
     name: 'v-window-item',
     directives: {
       Touch
@@ -15999,10 +16034,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
 
   // Extensions
 
-  const baseMixins$f = mixins(VWindowItem, Routable);
+  const baseMixins$g = mixins(VWindowItem, Routable);
   /* @vue/component */
 
-  baseMixins$f.extend().extend({
+  baseMixins$g.extend().extend({
     name: 'v-carousel-item',
     inject: {
       parentTheme: {
@@ -16338,6 +16373,13 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   });
 
   // Styles
+
+  function bias(val) {
+    const c = 0.501;
+    const x = Math.abs(val);
+    return Math.sign(val) * (x / ((1 / c - 2) * (1 - x) + 1));
+  }
+
   function calculateUpdatedOffset(selectedElement, widths, rtl, currentScrollOffset) {
     const clientWidth = selectedElement.clientWidth;
     const offsetLeft = rtl ? widths.content - selectedElement.offsetLeft - clientWidth : selectedElement.offsetLeft;
@@ -16481,7 +16523,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       isOverflowing: 'setWidths',
 
       scrollOffset(val) {
-        this.$refs.content.style.transform = `translateX(${-val}px)`;
+        if (this.$vuetify.rtl) val = -val;
+        let scroll = val <= 0 ? bias(-val) : val > this.widths.content - this.widths.wrapper ? -(this.widths.content - this.widths.wrapper) + bias(this.widths.content - this.widths.wrapper - val) : -val;
+        if (this.$vuetify.rtl) scroll = -scroll;
+        this.$refs.content.style.transform = `translateX(${scroll}px)`;
       }
 
     },
@@ -16722,10 +16767,9 @@ If you're seeing "$attrs is readonly", it's caused by this`);
         }, this.$vuetify.rtl, this.scrollOffset);
       },
 
-      setWidths
-      /* istanbul ignore next */
-      () {
+      setWidths() {
         window.requestAnimationFrame(() => {
+          if (this._isDestroyed) return;
           const {
             content,
             wrapper
@@ -18639,7 +18683,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       },
 
       setValue(value) {
-        VSelect.options.methods.setValue.call(this, value != null ? value : this.internalSearch);
+        VSelect.options.methods.setValue.call(this, value === undefined ? this.internalSearch : value);
       },
 
       updateEditing() {
@@ -18742,12 +18786,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
         default: () => ({})
       },
       sortBy: {
-        type: [String, Array],
-        default: () => []
+        type: [String, Array]
       },
       sortDesc: {
-        type: [Boolean, Array],
-        default: () => []
+        type: [Boolean, Array]
       },
       customSort: {
         type: Function,
@@ -19911,7 +19953,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
           return this.$createElement('th', data, [this.genSelectAll()]);
         }
 
-        children.push(this.$scopedSlots[header.value] ? this.$scopedSlots[header.value]({
+        children.push(this.$scopedSlots.hasOwnProperty(header.value) ? this.$scopedSlots[header.value]({
           header
         }) : this.$createElement('span', [header.text]));
 
@@ -20019,6 +20061,13 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   });
 
   // Types
+
+  function needsTd(slot) {
+    var _slot$;
+
+    return slot.length !== 1 || !['td', 'th'].includes((_slot$ = slot[0]) == null ? void 0 : _slot$.tag);
+  }
+
   var Row = Vue__default["default"].extend({
     name: 'row',
     functional: true,
@@ -20039,29 +20088,29 @@ If you're seeing "$attrs is readonly", it's caused by this`);
         const children = [];
         const value = getObjectValueByPath(props.item, header.value);
         const slotName = header.value;
-        const scopedSlot = data.scopedSlots && data.scopedSlots[slotName];
-        const regularSlot = computedSlots[slotName];
+        const scopedSlot = data.scopedSlots && data.scopedSlots.hasOwnProperty(slotName) && data.scopedSlots[slotName];
+        const regularSlot = computedSlots.hasOwnProperty(slotName) && computedSlots[slotName];
 
         if (scopedSlot) {
-          children.push(scopedSlot({
+          children.push(...wrapInArray(scopedSlot({
             item: props.item,
             isMobile: false,
             header,
             index: props.index,
             value
-          }));
+          })));
         } else if (regularSlot) {
-          children.push(regularSlot);
+          children.push(...wrapInArray(regularSlot));
         } else {
           children.push(value == null ? value : String(value));
         }
 
         const textAlign = `text-${header.align || 'start'}`;
-        return h('td', {
+        return needsTd(children) ? h('td', {
           class: [textAlign, header.cellClass, {
             'v-data-table__divider': header.divider
           }]
-        }, children);
+        }, children) : children;
       });
       return h('tr', data, columns);
     }
@@ -20182,8 +20231,8 @@ If you're seeing "$attrs is readonly", it's caused by this`);
         const children = [];
         const value = getObjectValueByPath(props.item, header.value);
         const slotName = header.value;
-        const scopedSlot = data.scopedSlots && data.scopedSlots[slotName];
-        const regularSlot = computedSlots[slotName];
+        const scopedSlot = data.scopedSlots && data.scopedSlots.hasOwnProperty(slotName) && data.scopedSlots[slotName];
+        const regularSlot = computedSlots.hasOwnProperty(slotName) && computedSlots[slotName];
 
         if (scopedSlot) {
           children.push(scopedSlot({
@@ -20946,8 +20995,8 @@ If you're seeing "$attrs is readonly", it's caused by this`);
 
   });
 
-  const baseMixins$e = mixins(VSimpleTable);
-  baseMixins$e.extend().extend({
+  const baseMixins$f = mixins(VSimpleTable);
+  baseMixins$f.extend().extend({
     name: 'v-virtual-table',
     props: {
       chunkSize: {
@@ -21484,7 +21533,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     },
 
     methods: {
-      genButtonClasses(isAllowed, isFloating, isSelected, isCurrent) {
+      genButtonClasses(isAllowed, isFloating, isSelected, isCurrent, isFirst, isLast) {
         return {
           'v-size--default': !isFloating,
           'v-date-picker-table__current': isCurrent,
@@ -21494,6 +21543,8 @@ If you're seeing "$attrs is readonly", it's caused by this`);
           'v-btn--rounded': isFloating,
           'v-btn--disabled': !isAllowed || this.disabled,
           'v-btn--outlined': isCurrent && !isSelected,
+          'v-date-picker--first-in-range': isFirst,
+          'v-date-picker--last-in-range': isLast,
           ...this.themeClasses
         };
       },
@@ -21513,9 +21564,17 @@ If you're seeing "$attrs is readonly", it's caused by this`);
         const isCurrent = value === this.current;
         const setColor = isSelected ? this.setBackgroundColor : this.setTextColor;
         const color = (isSelected || isCurrent) && (this.color || 'accent');
+        let isFirst = false;
+        let isLast = false;
+
+        if (this.range && !!this.value && Array.isArray(this.value)) {
+          isFirst = value === this.value[0];
+          isLast = value === this.value[this.value.length - 1];
+        }
+
         return this.$createElement('button', setColor(color, {
           staticClass: 'v-btn',
-          class: this.genButtonClasses(isAllowed && !isOtherMonth, isFloating, isSelected, isCurrent),
+          class: this.genButtonClasses(isAllowed && !isOtherMonth, isFloating, isSelected, isCurrent, isFirst, isLast),
           attrs: {
             type: 'button'
           },
@@ -22714,10 +22773,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
 
   });
 
-  const baseMixins$d = mixins(Bootable, Colorable, inject('expansionPanel', 'v-expansion-panel-content', 'v-expansion-panel'));
+  const baseMixins$e = mixins(Bootable, Colorable, inject('expansionPanel', 'v-expansion-panel-content', 'v-expansion-panel'));
   /* @vue/component */
 
-  var VExpansionPanelContent = baseMixins$d.extend().extend({
+  var VExpansionPanelContent = baseMixins$e.extend().extend({
     name: 'v-expansion-panel-content',
     data: () => ({
       isActive: false
@@ -22763,8 +22822,8 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   });
 
   // Components
-  const baseMixins$c = mixins(Colorable, inject('expansionPanel', 'v-expansion-panel-header', 'v-expansion-panel'));
-  var VExpansionPanelHeader = baseMixins$c.extend().extend({
+  const baseMixins$d = mixins(Colorable, inject('expansionPanel', 'v-expansion-panel-header', 'v-expansion-panel'));
+  var VExpansionPanelHeader = baseMixins$d.extend().extend({
     name: 'v-expansion-panel-header',
     directives: {
       ripple: Ripple
@@ -23924,10 +23983,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   });
 
   // Styles
-  const baseMixins$b = mixins(applicationable('left', ['isActive', 'isMobile', 'miniVariant', 'expandOnHover', 'permanent', 'right', 'temporary', 'width']), Colorable, Dependent, Mobile, Overlayable, SSRBootable, Themeable);
+  const baseMixins$c = mixins(applicationable('left', ['isActive', 'isMobile', 'miniVariant', 'expandOnHover', 'permanent', 'right', 'temporary', 'width']), Colorable, Dependent, Mobile, Overlayable, SSRBootable, Themeable);
   /* @vue/component */
 
-  var VNavigationDrawer = baseMixins$b.extend({
+  var VNavigationDrawer = baseMixins$c.extend({
     name: 'v-navigation-drawer',
     directives: {
       ClickOutside,
@@ -24204,6 +24263,8 @@ If you're seeing "$attrs is readonly", it's caused by this`);
 
       genListeners() {
         const on = {
+          mouseenter: () => this.isMouseover = true,
+          mouseleave: () => this.isMouseover = false,
           transitionend: e => {
             if (e.target !== e.currentTarget) return;
             this.$emit('transitionend', e); // IE11 does not support new Event('resize')
@@ -24218,12 +24279,6 @@ If you're seeing "$attrs is readonly", it's caused by this`);
           on.click = () => this.$emit('update:mini-variant', false);
         }
 
-        if (this.expandOnHover) {
-          on.mouseenter = () => this.isMouseover = true;
-
-          on.mouseleave = () => this.isMouseover = false;
-        }
-
         return on;
       },
 
@@ -24286,12 +24341,12 @@ If you're seeing "$attrs is readonly", it's caused by this`);
        */
       updateApplication() {
         if (!this.isActive || this.isMobile || this.temporary || !this.$el) return 0;
-        const width = Number(this.computedWidth);
+        const width = Number(this.miniVariant ? this.miniVariantWidth : this.width);
         return isNaN(width) ? this.$el.clientWidth : width;
       },
 
       updateMiniVariant(val) {
-        if (this.miniVariant !== val) this.$emit('update:mini-variant', val);
+        if (this.expandOnHover && this.miniVariant !== val) this.$emit('update:mini-variant', val);
       }
 
     },
@@ -24309,6 +24364,338 @@ If you're seeing "$attrs is readonly", it's caused by this`);
 
   });
 
+  // Styles
+  const baseMixins$b = mixins(VInput);
+  /* @vue/component */
+
+  var VOtpInput = baseMixins$b.extend().extend({
+    name: 'v-otp-input',
+    directives: {
+      ripple: Ripple
+    },
+    inheritAttrs: false,
+    props: {
+      length: {
+        type: [Number, String],
+        default: 6
+      },
+      type: {
+        type: String,
+        default: 'text'
+      },
+      plain: Boolean
+    },
+    data: () => ({
+      badInput: false,
+      initialValue: null,
+      isBooted: false,
+      otp: []
+    }),
+    computed: {
+      outlined() {
+        return !this.plain;
+      },
+
+      classes() {
+        return { ...VInput.options.computed.classes.call(this),
+          ...VTextField.options.computed.classes.call(this),
+          'v-otp-input--plain': this.plain
+        };
+      },
+
+      isDirty() {
+        return VInput.options.computed.isDirty.call(this) || this.badInput;
+      }
+
+    },
+    watch: {
+      isFocused: 'updateValue',
+
+      value(val) {
+        this.lazyValue = val;
+        this.otp = (val == null ? void 0 : val.split('')) || [];
+      }
+
+    },
+
+    created() {
+      var _this$internalValue;
+
+      /* istanbul ignore next */
+      if (this.$attrs.hasOwnProperty('browser-autocomplete')) {
+        breaking('browser-autocomplete', 'autocomplete', this);
+      }
+
+      this.otp = ((_this$internalValue = this.internalValue) == null ? void 0 : _this$internalValue.split('')) || [];
+    },
+
+    mounted() {
+      requestAnimationFrame(() => this.isBooted = true);
+    },
+
+    methods: {
+      /** @public */
+      focus(e, otpIdx) {
+        this.onFocus(e, otpIdx || 0);
+      },
+
+      genInputSlot(otpIdx) {
+        return this.$createElement('div', this.setBackgroundColor(this.backgroundColor, {
+          staticClass: 'v-input__slot',
+          style: {
+            height: convertToUnit(this.height)
+          },
+          on: {
+            click: () => this.onClick(otpIdx),
+            mousedown: e => this.onMouseDown(e, otpIdx),
+            mouseup: e => this.onMouseUp(e, otpIdx)
+          }
+        }), [this.genDefaultSlot(otpIdx)]);
+      },
+
+      genControl(otpIdx) {
+        return this.$createElement('div', {
+          staticClass: 'v-input__control'
+        }, [this.genInputSlot(otpIdx)]);
+      },
+
+      genDefaultSlot(otpIdx) {
+        return [this.genFieldset(), this.genTextFieldSlot(otpIdx)];
+      },
+
+      genContent() {
+        return Array.from({
+          length: +this.length
+        }, (_, i) => {
+          return this.$createElement('div', this.setTextColor(this.validationState, {
+            staticClass: 'v-input',
+            class: this.classes
+          }), [this.genControl(i)]);
+        });
+      },
+
+      genFieldset() {
+        return this.$createElement('fieldset', {
+          attrs: {
+            'aria-hidden': true
+          }
+        }, [this.genLegend()]);
+      },
+
+      genLegend() {
+        const span = this.$createElement('span', {
+          domProps: {
+            innerHTML: '&#8203;'
+          }
+        });
+        return this.$createElement('legend', {
+          style: {
+            width: '0px'
+          }
+        }, [span]);
+      },
+
+      genInput(otpIdx) {
+        const listeners = Object.assign({}, this.listeners$);
+        delete listeners.change; // Change should not be bound externally
+
+        return this.$createElement('input', {
+          style: {},
+          domProps: {
+            value: this.otp[otpIdx],
+            min: this.type === 'number' ? 0 : null
+          },
+          attrs: { ...this.attrs$,
+            disabled: this.isDisabled,
+            readonly: this.isReadonly,
+            type: this.type,
+            id: `${this.computedId}--${otpIdx}`,
+            class: `otp-field-box--${otpIdx}`,
+            maxlength: 1
+          },
+          on: Object.assign(listeners, {
+            blur: this.onBlur,
+            input: e => this.onInput(e, otpIdx),
+            focus: e => this.onFocus(e, otpIdx),
+            paste: e => this.onPaste(e, otpIdx),
+            keydown: this.onKeyDown,
+            keyup: e => this.onKeyUp(e, otpIdx)
+          }),
+          ref: 'input',
+          refInFor: true
+        });
+      },
+
+      genTextFieldSlot(otpIdx) {
+        return this.$createElement('div', {
+          staticClass: 'v-text-field__slot'
+        }, [this.genInput(otpIdx)]);
+      },
+
+      onBlur(e) {
+        this.isFocused = false;
+        e && this.$nextTick(() => this.$emit('blur', e));
+      },
+
+      onClick(otpIdx) {
+        if (this.isFocused || this.isDisabled || !this.$refs.input[otpIdx]) return;
+        this.onFocus(undefined, otpIdx);
+      },
+
+      onFocus(e, otpIdx) {
+        e == null ? void 0 : e.preventDefault();
+        e == null ? void 0 : e.stopPropagation();
+        const elements = this.$refs.input;
+        const ref = this.$refs.input && elements[otpIdx || 0];
+        if (!ref) return;
+
+        if (document.activeElement !== ref) {
+          ref.focus();
+          return ref.select();
+        }
+
+        if (!this.isFocused) {
+          this.isFocused = true;
+          ref.select();
+          e && this.$emit('focus', e);
+        }
+      },
+
+      onInput(e, otpIdx) {
+        const target = e.target;
+        const value = target.value;
+        this.applyValue(otpIdx, target.value, () => {
+          this.internalValue = this.otp.join('');
+        });
+        this.badInput = target.validity && target.validity.badInput;
+        const nextIndex = otpIdx + 1;
+
+        if (value) {
+          if (nextIndex < +this.length) {
+            this.changeFocus(nextIndex);
+          } else {
+            this.clearFocus(otpIdx);
+            this.onCompleted();
+          }
+        }
+      },
+
+      clearFocus(index) {
+        const input = this.$refs.input[index];
+        input.blur();
+      },
+
+      onKeyDown(e) {
+        if (e.keyCode === keyCodes.enter) {
+          this.$emit('change', this.internalValue);
+        }
+
+        this.$emit('keydown', e);
+      },
+
+      onMouseDown(e, otpIdx) {
+        // Prevent input from being blurred
+        if (e.target !== this.$refs.input[otpIdx]) {
+          e.preventDefault();
+          e.stopPropagation();
+        }
+
+        VInput.options.methods.onMouseDown.call(this, e);
+      },
+
+      onMouseUp(e, otpIdx) {
+        if (this.hasMouseDown) this.focus(e, otpIdx);
+        VInput.options.methods.onMouseUp.call(this, e);
+      },
+
+      onPaste(event, index) {
+        var _event$clipboardData;
+
+        const maxCursor = +this.length - 1;
+        const inputVal = event == null ? void 0 : (_event$clipboardData = event.clipboardData) == null ? void 0 : _event$clipboardData.getData('Text');
+        const inputDataArray = (inputVal == null ? void 0 : inputVal.split('')) || [];
+        event.preventDefault();
+        const newOtp = [...this.otp];
+
+        for (let i = 0; i < inputDataArray.length; i++) {
+          const appIdx = index + i;
+          if (appIdx > maxCursor) break;
+          newOtp[appIdx] = inputDataArray[i].toString();
+        }
+
+        this.otp = newOtp;
+        this.internalValue = this.otp.join('');
+        const targetFocus = Math.min(index + inputDataArray.length, maxCursor);
+        this.changeFocus(targetFocus);
+
+        if (newOtp.length === +this.length) {
+          this.onCompleted();
+          this.clearFocus(targetFocus);
+        }
+      },
+
+      applyValue(index, inputVal, next) {
+        const newOtp = [...this.otp];
+        newOtp[index] = inputVal;
+        this.otp = newOtp;
+        next();
+      },
+
+      changeFocus(index) {
+        this.onFocus(undefined, index || 0);
+      },
+
+      updateValue(val) {
+        // Sets validationState from validatable
+        this.hasColor = val;
+
+        if (val) {
+          this.initialValue = this.lazyValue;
+        } else if (this.initialValue !== this.lazyValue) {
+          this.$emit('change', this.lazyValue);
+        }
+      },
+
+      onKeyUp(event, index) {
+        event.preventDefault();
+        const eventKey = event.key;
+
+        if (['Tab', 'Shift', 'Meta', 'Control', 'Alt'].includes(eventKey)) {
+          return;
+        }
+
+        if (['Delete'].includes(eventKey)) {
+          return;
+        }
+
+        if (eventKey === 'ArrowLeft' || eventKey === 'Backspace' && !this.otp[index]) {
+          return index > 0 && this.changeFocus(index - 1);
+        }
+
+        if (eventKey === 'ArrowRight') {
+          return index + 1 < +this.length && this.changeFocus(index + 1);
+        }
+      },
+
+      onCompleted() {
+        const rsp = this.otp.join('');
+
+        if (rsp.length === +this.length) {
+          this.$emit('finish', rsp);
+        }
+      }
+
+    },
+
+    render(h) {
+      return h('div', {
+        staticClass: 'v-otp-input',
+        class: this.themeClasses
+      }, this.genContent());
+    }
+
+  });
+
   // Styles
   /* @vue/component */
 
@@ -24514,13 +24901,14 @@ If you're seeing "$attrs is readonly", it's caused by this`);
 
     },
 
-    mounted() {
+    beforeMount() {
       this.init();
     },
 
     methods: {
       init() {
         this.selected = null;
+        this.onResize();
         this.$nextTick(this.onResize); // TODO: Change this (f75dee3a, cbdf7caa)
 
         setTimeout(() => this.selected = this.value, 100);
@@ -24772,7 +25160,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   });
 
   // Styles
-  const baseMixins$9 = mixins(Comparable, BaseItemGroup, VInput);
+  const baseMixins$9 = mixins(BaseItemGroup, VInput);
   /* @vue/component */
 
   var VRadioGroup = baseMixins$9.extend({
@@ -25698,9 +26086,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       },
 
       styles() {
-        // Styles are not needed when
-        // using the absolute prop.
-        if (this.absolute) return {};
+        if (this.absolute || !this.app) return {};
         const {
           bar,
           bottom,
@@ -25709,13 +26095,11 @@ If you're seeing "$attrs is readonly", it's caused by this`);
           left,
           right,
           top
-        } = this.$vuetify.application; // Should always move for y-axis
-        // applicationable components.
-
+        } = this.$vuetify.application;
         return {
           paddingBottom: convertToUnit(bottom + footer + insetFooter),
-          paddingLeft: !this.app ? undefined : convertToUnit(left),
-          paddingRight: !this.app ? undefined : convertToUnit(right),
+          paddingLeft: convertToUnit(left),
+          paddingRight: convertToUnit(right),
           paddingTop: convertToUnit(bar + top)
         };
       }
@@ -26591,6 +26975,12 @@ If you're seeing "$attrs is readonly", it's caused by this`);
         return children;
       },
 
+      keyboardClick(e) {
+        if (e.keyCode === keyCodes.space) {
+          this.click(e);
+        }
+      },
+
       toggle(step) {
         this.isActive = step.toString() === this.step.toString();
         this.isInactive = Number(step) < Number(this.step);
@@ -26600,6 +26990,9 @@ If you're seeing "$attrs is readonly", it's caused by this`);
 
     render(h) {
       return h('div', {
+        attrs: {
+          tabindex: this.editable ? 0 : -1
+        },
         staticClass: 'v-stepper__step',
         class: this.classes,
         directives: [{
@@ -26607,7 +27000,8 @@ If you're seeing "$attrs is readonly", it's caused by this`);
           value: this.editable
         }],
         on: {
-          click: this.click
+          click: this.click,
+          keydown: this.keyboardClick
         }
       }, [this.genStep(), this.genLabel()]);
     }
@@ -27339,7 +27733,8 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       },
 
       value() {
-        let to = this.to || this.href || '';
+        let to = this.to || this.href;
+        if (to == null) return to;
 
         if (this.$router && this.to === Object(this.to)) {
           const resolve = this.$router.resolve(this.to, this.$route, this.append);
@@ -27371,7 +27766,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
 
       toggle() {
         // VItemGroup treats a change event as a click
-        if (!this.isActive) {
+        if (!this.isActive || !this.tabsBar.mandatory && !this.to) {
           this.$emit('change');
         }
       }
@@ -27386,7 +27781,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       data.attrs = { ...data.attrs,
         'aria-selected': String(this.isActive),
         role: 'tab',
-        tabindex: 0
+        tabindex: this.disabled ? -1 : 0
       };
       data.on = { ...data.on,
         keydown: e => {
@@ -27518,7 +27913,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   });
 
   // Styles
-  mixins(Themeable
+  var VTimeline = mixins(Themeable
   /* @vue/component */
   ).extend({
     name: 'v-timeline',
@@ -27559,7 +27954,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   const baseMixins$1 = mixins(Colorable, Themeable
   /* @vue/component */
   );
-  baseMixins$1.extend().extend({
+  var VTimelineItem = baseMixins$1.extend().extend({
     name: 'v-timeline-item',
     inject: ['timeline'],
     props: {
@@ -28327,11 +28722,11 @@ If you're seeing "$attrs is readonly", it's caused by this`);
 
   // Components
   createSimpleFunctional('v-toolbar__title');
-  createSimpleFunctional('v-toolbar__items');
+  const VToolbarItems = createSimpleFunctional('v-toolbar__items');
 
   /* @vue/component */
 
-  var VTooltip = mixins(Colorable, Delayable, Dependent, Menuable, Toggleable).extend({
+  var VTooltip = mixins(Colorable, Delayable, Dependent, Menuable).extend({
     name: 'v-tooltip',
     props: {
       closeDelay: {
@@ -28347,6 +28742,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
         type: Boolean,
         default: true
       },
+      openOnFocus: {
+        type: Boolean,
+        default: true
+      },
       tag: {
         type: String,
         default: 'span'
@@ -28426,7 +28825,6 @@ If you're seeing "$attrs is readonly", it's caused by this`);
           left: this.calculatedLeft,
           maxWidth: convertToUnit(this.maxWidth),
           minWidth: convertToUnit(this.minWidth),
-          opacity: this.isActive ? 0.9 : 0,
           top: this.calculatedTop,
           zIndex: this.zIndex || this.activeZIndex
         };
@@ -28462,15 +28860,17 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       genActivatorListeners() {
         const listeners = Activatable.options.methods.genActivatorListeners.call(this);
 
-        listeners.focus = e => {
-          this.getActivator(e);
-          this.runDelay('open');
-        };
+        if (this.openOnFocus) {
+          listeners.focus = e => {
+            this.getActivator(e);
+            this.runDelay('open');
+          };
 
-        listeners.blur = e => {
-          this.getActivator(e);
-          this.runDelay('close');
-        };
+          listeners.blur = e => {
+            this.getActivator(e);
+            this.runDelay('close');
+          };
+        }
 
         listeners.keydown = e => {
           if (e.keyCode === keyCodes.esc) {
@@ -28540,6 +28940,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       type: String,
       default: 'primary'
     },
+    disablePerNode: Boolean,
     expandIcon: {
       type: String,
       default: '$subgroup'
@@ -28620,7 +29021,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     }),
     computed: {
       disabled() {
-        return getObjectValueByPath(this.item, this.itemDisabled) || this.parentIsDisabled && this.selectionType === 'leaf';
+        return getObjectValueByPath(this.item, this.itemDisabled) || !this.disablePerNode && this.parentIsDisabled && this.selectionType === 'leaf';
       },
 
       key() {
@@ -28804,6 +29205,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
             selectable: this.selectable,
             selectedColor: this.selectedColor,
             color: this.color,
+            disablePerNode: this.disablePerNode,
             expandIcon: this.expandIcon,
             indeterminateIcon: this.indeterminateIcon,
             offIcon: this.offIcon,
@@ -28906,6 +29308,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
         default: () => []
       },
       dense: Boolean,
+      disabled: Boolean,
       filter: Function,
       hoverable: Boolean,
       items: {
@@ -29256,7 +29659,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
         return !this.isExcluded(getObjectValueByPath(item, this.itemKey));
       }).map(item => {
         const genChild = VTreeviewNode.options.methods.genChild.bind(this);
-        return genChild(item, getObjectValueByPath(item, this.itemDisabled));
+        return genChild(item, this.disabled || getObjectValueByPath(item, this.itemDisabled));
       })
       /* istanbul ignore next */
       : this.$slots.default; // TODO: remove type annotation with TS 3.2
@@ -29988,7 +30391,12 @@ If you're seeing "$attrs is readonly", it's caused by this`);
             },
           ],
           ref: "instance",
-          class: ["zd-apex-chart", _vm.instance.cssClass],
+          class: [
+            "zd-apex-chart",
+            _vm.instance.cssClass,
+            { "theme--dark": _vm.$isDark(this) },
+            { "theme--light": _vm.$isLight(this) },
+          ],
           style: _vm.instance.cssStyle,
           attrs: {
             type: _vm.instance.chartType,
@@ -29997,6 +30405,13 @@ If you're seeing "$attrs is readonly", it's caused by this`);
             height: _vm.instance.height,
             name: _vm.instance.name,
             width: _vm.instance.width,
+            dark: _vm.instance.dark,
+            light: _vm.instance.light,
+          },
+          on: {
+            updated: function ($event) {
+              return _vm.setApexChartTheme()
+            },
           },
         }),
         _vm._v(" "),
@@ -30027,7 +30442,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$1m = function (inject) {
       if (!inject) return
-      inject("data-v-7fa8aa32_0", { source: ".zd-apex-chart .apexcharts-toolbar {\n  z-index: 0;\n}\n.zd-apex-chart .apexcharts-toolbar > div {\n  transform: scale(0.8) !important;\n}\n.zd-apex-chart .apexcharts-tooltip {\n  z-index: 1;\n}\n.apexcharts-overlay {\n  z-index: 0 !important;\n}\n.apexcharts-container {\n  height: 100%;\n}", map: undefined, media: undefined });
+      inject("data-v-02c50976_0", { source: ".zd-apex-chart .apexcharts-toolbar {\n  z-index: 0;\n}\n.zd-apex-chart .apexcharts-toolbar > div {\n  transform: scale(0.8) !important;\n}\n.zd-apex-chart.theme--light .apexcharts-toolbar > div > .v-icon {\n  color: #3b3b3b !important;\n}\n.zd-apex-chart.theme--light .apexcharts-tooltip {\n  background: #fdfdfd !important;\n  border: 1px solid #fdfdfd !important;\n  color: #3b3b3b !important;\n  z-index: 1;\n}\n.zd-apex-chart.theme--light .apexcharts-tooltip .apexcharts-tooltip-title {\n  background: #eee !important;\n  color: #3b3b3b !important;\n  border-bottom: none !important;\n}\n.zd-apex-chart.theme--light .apexcharts-text {\n  fill: #3b3b3b !important;\n}\n.zd-apex-chart.theme--light .apexcharts-title-text {\n  fill: #3b3b3b !important;\n}\n.zd-apex-chart.theme--light .apexcharts-xaxistooltip {\n  background: #eee !important;\n  border: 1px solid #d4d4d4 !important;\n}\n.zd-apex-chart.theme--light .apexcharts-xaxistooltip .apexcharts-xaxistooltip-text {\n  color: #3b3b3b !important;\n}\n.zd-apex-chart.theme--light .apexcharts-xaxistooltip-bottom::before {\n  border-bottom-color: #d4d4d4 !important;\n}\n.zd-apex-chart.theme--light .apexcharts-xaxistooltip-bottom::after {\n  border-bottom-color: #d4d4d4 !important;\n}\n.zd-apex-chart.theme--dark .apexcharts-toolbar > div > .v-icon {\n  color: #b8b8b8 !important;\n}\n.zd-apex-chart.theme--dark .apexcharts-tooltip {\n  background: #1e1e1e !important;\n  border: 1px solid #1e1e1e !important;\n  color: #b8b8b8 !important;\n  z-index: 1;\n}\n.zd-apex-chart.theme--dark .apexcharts-tooltip .apexcharts-tooltip-title {\n  background: #101010 !important;\n  color: #b8b8b8 !important;\n  border-bottom: none !important;\n}\n.zd-apex-chart.theme--dark .apexcharts-text {\n  fill: #b8b8b8 !important;\n}\n.zd-apex-chart.theme--dark .apexcharts-title-text {\n  fill: #b8b8b8 !important;\n}\n.zd-apex-chart.theme--dark .apexcharts-xaxistooltip {\n  background: #101010 !important;\n  border: 1px solid #252525 !important;\n}\n.zd-apex-chart.theme--dark .apexcharts-xaxistooltip .apexcharts-xaxistooltip-text {\n  color: #b8b8b8 !important;\n}\n.zd-apex-chart.theme--dark .apexcharts-xaxistooltip-bottom::before {\n  border-bottom-color: #252525 !important;\n}\n.zd-apex-chart.theme--dark .apexcharts-xaxistooltip-bottom::after {\n  border-bottom-color: #252525 !important;\n}\n.apexcharts-overlay {\n  z-index: 0 !important;\n}\n.apexcharts-container {\n  height: 100%;\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -31529,8 +31944,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       }
       mounted() {
           this.inputRef = this.$refs.instance;
-          this.instance.setViewValidate(this.inputRef.validate);
-          this.instance.setViewResetValidation(this.inputRef.resetValidation);
+          if (this.inputRef) {
+              this.instance.setViewValidate(this.inputRef.validate);
+              this.instance.setViewResetValidation(this.inputRef.resetValidation);
+          }
       }
       input(value) {
           this.$emit('update:value', value);
@@ -33918,7 +34335,6 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       }
       onSelectDate(date, event) {
           this.instance.selectDate(date, event, this.$el);
-          this.instance.change(event, this.$refs.instance.$el);
       }
       getAllowedDates(date) {
           if (typeof this.instance.allowedDates === 'function') {
@@ -33975,6 +34391,18 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       get getDateMask() {
           return this.instance.updateMask();
       }
+      helperValuesOptionClick({ component }) {
+          const helper = component.name.split('_helpervalue_')[1];
+          const value = core.DateHelper.getValue(helper, this.instance.dateFormat);
+          this.instance.value = value;
+          this.instance.helperValue = helper;
+          this.instance.change(undefined, this.$el);
+          this.instance.helperValue = helper; // o change remove o valor, por isso precisa adicionar novamente
+          this.instance.updateHelperHint();
+      }
+      getLabel(name) {
+          return core.DateHelper.getLabel(name);
+      }
   };
   __decorate([
       PropWatch({
@@ -34055,6 +34483,14 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       PropWatch({ type: String }),
       __metadata("design:type", Object)
   ], ZdDate.prototype, "inputFormat", void 0);
+  __decorate([
+      PropWatch({ type: [String, Array], default: () => [] }),
+      __metadata("design:type", Object)
+  ], ZdDate.prototype, "helperOptions", void 0);
+  __decorate([
+      PropWatch({ type: String, default: '' }),
+      __metadata("design:type", String)
+  ], ZdDate.prototype, "helperValue", void 0);
   ZdDate = __decorate([
       vuePropertyDecorator.Component
   ], ZdDate);
@@ -34069,104 +34505,154 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     var _h = _vm.$createElement;
     var _c = _vm._self._c || _h;
     return _c(
-      "v-menu",
+      "zd-tag",
       {
-        directives: [
-          {
-            name: "show",
-            rawName: "v-show",
-            value: _vm.instance.isVisible,
-            expression: "instance.isVisible",
-          },
-        ],
-        staticClass: "zd-date-menu-activator",
         attrs: {
-          id: _vm.instance.name,
-          "offset-overflow": "",
-          "offset-y": "",
-          "min-width": _vm.instance.width,
-          transition: "scale-transition",
-          disabled: _vm.instance.disabled || _vm.instance.readonly,
-          "close-on-content-click": false,
-        },
-        scopedSlots: _vm._u([
-          {
-            key: "activator",
-            fn: function (ref) {
-              var on = ref.on;
-              return [
-                _c("zd-text-input", {
-                  ref: "instance",
-                  attrs: {
-                    name: _vm.instance.name + "_text-input",
-                    mask: _vm.getDateMask,
-                    "instance-object": _vm.instance,
-                    events: _vm.getEvents(on),
-                    autofill: false,
-                  },
-                }),
-              ]
-            },
-          },
-        ]),
-        model: {
-          value: _vm.instance.showDatePicker,
-          callback: function ($$v) {
-            _vm.$set(_vm.instance, "showDatePicker", $$v);
-          },
-          expression: "instance.showDatePicker",
+          name: _vm.instance.name + "_helperspan",
+          tag: "span",
+          cssClass: "zd-display-flex",
+          grid: _vm.instance.grid,
         },
       },
       [
-        _vm._v(" "),
         _c(
-          "v-date-picker",
-          _vm._b(
-            {
-              directives: [
-                {
-                  name: "show",
-                  rawName: "v-show",
-                  value: _vm.instance.isVisible,
-                  expression: "instance.isVisible",
-                },
-              ],
-              ref: "picker",
-              attrs: { "no-title": "" },
-              on: {
-                "hook:mounted": _vm.pickerMounted,
-                "hook:destroyed": _vm.pickerDestroyed,
-                "click:date": _vm.onSelectDate,
-                change: function ($event) {
-                  return _vm.onChangeDatePicker()
-                },
+          "v-menu",
+          {
+            directives: [
+              {
+                name: "show",
+                rawName: "v-show",
+                value: _vm.instance.isVisible,
+                expression: "instance.isVisible",
               },
-              model: {
-                value: _vm.instance.isoValue,
-                callback: function ($$v) {
-                  _vm.$set(_vm.instance, "isoValue", $$v);
+            ],
+            staticClass: "zd-date-menu-activator",
+            attrs: {
+              id: _vm.instance.name,
+              "offset-overflow": "",
+              "offset-y": "",
+              "min-width": _vm.instance.width,
+              transition: "scale-transition",
+              disabled: _vm.instance.disabled || _vm.instance.readonly,
+              "close-on-content-click": false,
+            },
+            scopedSlots: _vm._u([
+              {
+                key: "activator",
+                fn: function (ref) {
+                  var on = ref.on;
+                  return [
+                    _c("zd-text-input", {
+                      ref: "instance",
+                      attrs: {
+                        name: _vm.instance.name + "_text-input",
+                        mask: _vm.getDateMask,
+                        "instance-object": _vm.instance,
+                        events: _vm.getEvents(on),
+                        autofill: false,
+                      },
+                    }),
+                  ]
                 },
-                expression: "instance.isoValue",
               },
+            ]),
+            model: {
+              value: _vm.instance.showDatePicker,
+              callback: function ($$v) {
+                _vm.$set(_vm.instance, "showDatePicker", $$v);
+              },
+              expression: "instance.showDatePicker",
             },
-            "v-date-picker",
-            {
-              allowedDates: _vm.getAllowedDates,
-              color: _vm.instance.color,
-              dark: _vm.instance.dark,
-              firstDayOfWeek: _vm.instance.firstDayOfWeek,
-              fullWidth: _vm.instance.fullWidth,
-              light: _vm.instance.light,
-              locale: _vm.instance.locale,
-              scrollable: _vm.instance.scrollable,
-              showDatePicker: _vm.instance.showDatePicker,
-              showWeek: _vm.instance.showWeek,
-              type: _vm.instance.pickerType,
-              width: _vm.instance.width,
-            },
-            false
-          )
+          },
+          [
+            _vm._v(" "),
+            _c(
+              "v-date-picker",
+              _vm._b(
+                {
+                  directives: [
+                    {
+                      name: "show",
+                      rawName: "v-show",
+                      value: _vm.instance.isVisible,
+                      expression: "instance.isVisible",
+                    },
+                  ],
+                  ref: "picker",
+                  attrs: { "no-title": "" },
+                  on: {
+                    "hook:mounted": _vm.pickerMounted,
+                    "hook:destroyed": _vm.pickerDestroyed,
+                    "click:date": _vm.onSelectDate,
+                    change: function ($event) {
+                      return _vm.onChangeDatePicker()
+                    },
+                  },
+                  model: {
+                    value: _vm.instance.isoValue,
+                    callback: function ($$v) {
+                      _vm.$set(_vm.instance, "isoValue", $$v);
+                    },
+                    expression: "instance.isoValue",
+                  },
+                },
+                "v-date-picker",
+                {
+                  allowedDates: _vm.getAllowedDates,
+                  color: _vm.instance.color,
+                  dark: _vm.instance.dark,
+                  firstDayOfWeek: _vm.instance.firstDayOfWeek,
+                  fullWidth: _vm.instance.fullWidth,
+                  light: _vm.instance.light,
+                  locale: _vm.instance.locale,
+                  scrollable: _vm.instance.scrollable,
+                  showDatePicker: _vm.instance.showDatePicker,
+                  showWeek: _vm.instance.showWeek,
+                  type: _vm.instance.pickerType,
+                  width: _vm.instance.width,
+                },
+                false
+              )
+            ),
+          ],
+          1
         ),
+        _vm._v(" "),
+        _vm.instance.helperOptions && _vm.instance.helperOptions.length
+          ? _c(
+              "zd-dropdown",
+              {
+                attrs: {
+                  name: _vm.instance.name + "_helperdropdown",
+                  "offset-y": "",
+                  activator: {
+                    name: _vm.instance.name + "_helperbutton",
+                    component: "ZdButton",
+                    iconName: "magnify",
+                    icon: true,
+                    small: true,
+                    cssClass:
+                      "date-helper-values-button " +
+                      (_vm.instance.showLabel !== false ? "with-label" : ""),
+                  },
+                },
+              },
+              _vm._l(_vm.instance.helperOptions, function (value) {
+                return _c("zd-text", {
+                  key: value,
+                  attrs: {
+                    name: _vm.instance.name + "_helpervalue_" + value,
+                    cssClass: "date-helper-values-option zd-dropdown-component",
+                    text: _vm.getLabel(value),
+                    events: {
+                      click: _vm.helperValuesOptionClick,
+                    },
+                  },
+                })
+              }),
+              1
+            )
+          : _vm._e(),
       ],
       1
     )
@@ -34177,7 +34663,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$14 = function (inject) {
       if (!inject) return
-      inject("data-v-0b715682_0", { source: "div.v-picker--date .v-picker__body {\n  background: transparent;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header {\n  padding: var(--spacing-2) var(--spacing-4) var(--spacing-1) var(--spacing-4);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header .v-date-picker-header__value:not(.v-date-picker-header__value--disabled) > div {\n  color: var(--zd-primary-base) !important;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header .v-date-picker-header__value:not(.v-date-picker-header__value--disabled) > div button:not(:hover):not(:focus) {\n  color: var(--zd-font-default-color);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header button.v-btn {\n  color: var(--zd-font-default-color);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header .v-btn--icon {\n  height: var(--icon-size);\n  width: var(--icon-size);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header .v-date-picker-header__value button {\n  padding: 0;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table {\n  margin-bottom: 12px;\n  padding: 0 var(--spacing-4);\n  height: 200px;\n  margin-bottom: var(--spacing-4);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table .v-btn.v-btn--active {\n  color: var(--v-secondary-lighten4);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--date .v-btn {\n  width: 24px;\n  height: 24px;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--month {\n  padding-top: var(--spacing-4);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--month .v-btn {\n  padding: 4px 0 7px 0;\n  height: 24px;\n  width: 56px;\n  min-width: 56px;\n  border-radius: var(--border);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--month td {\n  height: 24px;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--month tr:not(:last-child) td {\n  padding-bottom: 24px;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table table thead th {\n  color: var(--zd-font-disabled-color);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table table tbody button.v-btn {\n  color: var(--zd-font-default-color);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table table tbody button.v-btn.accent--text {\n  color: var(--zd-primary-base) !important;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table table tbody button.v-btn.accent {\n  background: var(--zd-primary-base) !important;\n  color: white !important;\n}\ndiv.v-picker--date .v-picker__body ul.v-date-picker-years li {\n  color: var(--zd-font-default-color);\n}\ndiv.v-picker--date .v-picker__body ul.v-date-picker-years li.primary--text {\n  color: var(--zd-primary-base) !important;\n}\n.zd-date-menu-activator .v-menu__activator.v-menu__activator--disabled {\n  cursor: default;\n}", map: undefined, media: undefined });
+      inject("data-v-5275ad42_0", { source: "div.v-picker--date .v-picker__body {\n  background: transparent;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header {\n  padding: var(--spacing-2) var(--spacing-4) var(--spacing-1) var(--spacing-4);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header .v-date-picker-header__value:not(.v-date-picker-header__value--disabled) > div {\n  color: var(--zd-primary-base) !important;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header .v-date-picker-header__value:not(.v-date-picker-header__value--disabled) > div button:not(:hover):not(:focus) {\n  color: var(--zd-font-default-color);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header button.v-btn {\n  color: var(--zd-font-default-color);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header .v-btn--icon {\n  height: var(--icon-size);\n  width: var(--icon-size);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header .v-date-picker-header__value button {\n  padding: 0;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table {\n  margin-bottom: 12px;\n  padding: 0 var(--spacing-4);\n  height: 200px;\n  margin-bottom: var(--spacing-4);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table .v-btn.v-btn--active {\n  color: var(--v-secondary-lighten4);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--date .v-btn {\n  width: 24px;\n  height: 24px;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--month {\n  padding-top: var(--spacing-4);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--month .v-btn {\n  padding: 4px 0 7px 0;\n  height: 24px;\n  width: 56px;\n  min-width: 56px;\n  border-radius: var(--border);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--month td {\n  height: 24px;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--month tr:not(:last-child) td {\n  padding-bottom: 24px;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table table thead th {\n  color: var(--zd-font-disabled-color);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table table tbody button.v-btn {\n  color: var(--zd-font-default-color);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table table tbody button.v-btn.accent--text {\n  color: var(--zd-primary-base) !important;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table table tbody button.v-btn.accent {\n  background: var(--zd-primary-base) !important;\n  color: white !important;\n}\ndiv.v-picker--date .v-picker__body ul.v-date-picker-years li {\n  color: var(--zd-font-default-color);\n}\ndiv.v-picker--date .v-picker__body ul.v-date-picker-years li.primary--text {\n  color: var(--zd-primary-base) !important;\n}\n.zd-date-menu-activator .v-menu__activator.v-menu__activator--disabled {\n  cursor: default;\n}\n.date-helper-values-button {\n  height: 24px !important;\n  margin-left: 5px;\n  margin-top: 0;\n}\n.date-helper-values-button.with-label {\n  margin-top: 20px;\n}\n.date-helper-values-option {\n  cursor: pointer;\n}\n.date-helper-values-option:hover {\n  background-color: rgba(0, 0, 0, 0.03);\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -34324,6 +34810,18 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       get getDateMask() {
           return this.instance.updateMask();
       }
+      helperValuesOptionClick({ component }) {
+          const helper = component.name.split('_helpervalue_')[1];
+          const value = core.DateHelper.getValue(helper, this.instance.dateFormat);
+          this.instance.value = value;
+          this.instance.helperValue = helper;
+          this.instance.change(undefined, this.$el);
+          this.instance.helperValue = helper; // o change remove o valor, por isso precisa adicionar novamente
+          this.instance.updateHelperHint();
+      }
+      getLabel(name) {
+          return core.DateHelper.getLabel(name);
+      }
   };
   __decorate([
       PropWatch({ type: String, default: 'calendar' }),
@@ -34401,6 +34899,14 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       PropWatch({ type: String }),
       __metadata("design:type", Object)
   ], ZdDateRange.prototype, "inputFormat", void 0);
+  __decorate([
+      PropWatch({ type: [String, Array], default: () => [] }),
+      __metadata("design:type", Object)
+  ], ZdDateRange.prototype, "helperOptions", void 0);
+  __decorate([
+      PropWatch({ type: String, default: '' }),
+      __metadata("design:type", String)
+  ], ZdDateRange.prototype, "helperValue", void 0);
   ZdDateRange = __decorate([
       vuePropertyDecorator.Component
   ], ZdDateRange);
@@ -34415,102 +34921,153 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     var _h = _vm.$createElement;
     var _c = _vm._self._c || _h;
     return _c(
-      "v-menu",
+      "zd-tag",
       {
-        directives: [
-          {
-            name: "show",
-            rawName: "v-show",
-            value: _vm.instance.isVisible,
-            expression: "instance.isVisible",
-          },
-        ],
-        staticClass: "zd-date-menu-activator",
         attrs: {
-          id: _vm.instance.name,
-          "offset-overflow": "",
-          "offset-y": "",
-          "min-width": _vm.instance.width,
-          transition: "scale-transition",
-          disabled: _vm.instance.disabled || _vm.instance.readonly,
-          "close-on-content-click": false,
-        },
-        scopedSlots: _vm._u([
-          {
-            key: "activator",
-            fn: function (ref) {
-              var on = ref.on;
-              return [
-                _c("zd-text-input", {
-                  ref: "instance",
-                  attrs: {
-                    name: _vm.instance.name + "_text-input",
-                    mask: _vm.getDateMask,
-                    "instance-object": _vm.instance,
-                    events: _vm.getEvents(on),
-                    autofill: false,
-                  },
-                }),
-              ]
-            },
-          },
-        ]),
-        model: {
-          value: _vm.instance.showDatePicker,
-          callback: function ($$v) {
-            _vm.$set(_vm.instance, "showDatePicker", $$v);
-          },
-          expression: "instance.showDatePicker",
+          name: _vm.instance.name + "_helperspan",
+          tag: "span",
+          cssClass: "zd-display-flex",
+          grid: _vm.instance.grid,
         },
       },
       [
-        _vm._v(" "),
         _c(
-          "v-date-picker",
-          _vm._b(
-            {
-              directives: [
-                {
-                  name: "show",
-                  rawName: "v-show",
-                  value: _vm.instance.isVisible,
-                  expression: "instance.isVisible",
-                },
-              ],
-              ref: "picker",
-              attrs: { "no-title": "", range: "" },
-              on: {
-                "hook:mounted": _vm.pickerMounted,
-                "hook:destroyed": _vm.pickerDestroyed,
-                change: function ($event) {
-                  return _vm.onChangeDatePicker()
-                },
+          "v-menu",
+          {
+            directives: [
+              {
+                name: "show",
+                rawName: "v-show",
+                value: _vm.instance.isVisible,
+                expression: "instance.isVisible",
               },
-              model: {
-                value: _vm.instance.isoRangeValue,
-                callback: function ($$v) {
-                  _vm.$set(_vm.instance, "isoRangeValue", $$v);
+            ],
+            staticClass: "zd-date-menu-activator",
+            attrs: {
+              id: _vm.instance.name,
+              "offset-overflow": "",
+              "offset-y": "",
+              "min-width": _vm.instance.width,
+              transition: "scale-transition",
+              disabled: _vm.instance.disabled || _vm.instance.readonly,
+              "close-on-content-click": false,
+            },
+            scopedSlots: _vm._u([
+              {
+                key: "activator",
+                fn: function (ref) {
+                  var on = ref.on;
+                  return [
+                    _c("zd-text-input", {
+                      ref: "instance",
+                      attrs: {
+                        name: _vm.instance.name + "_text-input",
+                        mask: _vm.getDateMask,
+                        "instance-object": _vm.instance,
+                        events: _vm.getEvents(on),
+                        autofill: false,
+                      },
+                    }),
+                  ]
                 },
-                expression: "instance.isoRangeValue",
               },
+            ]),
+            model: {
+              value: _vm.instance.showDatePicker,
+              callback: function ($$v) {
+                _vm.$set(_vm.instance, "showDatePicker", $$v);
+              },
+              expression: "instance.showDatePicker",
             },
-            "v-date-picker",
-            {
-              color: _vm.instance.color,
-              dark: _vm.instance.dark,
-              firstDayOfWeek: _vm.instance.firstDayOfWeek,
-              fullWidth: _vm.instance.fullWidth,
-              light: _vm.instance.light,
-              locale: _vm.instance.locale,
-              scrollable: _vm.instance.scrollable,
-              showDatePicker: _vm.instance.showDatePicker,
-              showWeek: _vm.instance.showWeek,
-              type: _vm.instance.pickerType,
-              width: _vm.instance.width,
-            },
-            false
-          )
+          },
+          [
+            _vm._v(" "),
+            _c(
+              "v-date-picker",
+              _vm._b(
+                {
+                  directives: [
+                    {
+                      name: "show",
+                      rawName: "v-show",
+                      value: _vm.instance.isVisible,
+                      expression: "instance.isVisible",
+                    },
+                  ],
+                  ref: "picker",
+                  attrs: { "no-title": "", range: "" },
+                  on: {
+                    "hook:mounted": _vm.pickerMounted,
+                    "hook:destroyed": _vm.pickerDestroyed,
+                    change: function ($event) {
+                      return _vm.onChangeDatePicker()
+                    },
+                  },
+                  model: {
+                    value: _vm.instance.isoRangeValue,
+                    callback: function ($$v) {
+                      _vm.$set(_vm.instance, "isoRangeValue", $$v);
+                    },
+                    expression: "instance.isoRangeValue",
+                  },
+                },
+                "v-date-picker",
+                {
+                  color: _vm.instance.color,
+                  dark: _vm.instance.dark,
+                  firstDayOfWeek: _vm.instance.firstDayOfWeek,
+                  fullWidth: _vm.instance.fullWidth,
+                  light: _vm.instance.light,
+                  locale: _vm.instance.locale,
+                  scrollable: _vm.instance.scrollable,
+                  showDatePicker: _vm.instance.showDatePicker,
+                  showWeek: _vm.instance.showWeek,
+                  type: _vm.instance.pickerType,
+                  width: _vm.instance.width,
+                },
+                false
+              )
+            ),
+          ],
+          1
         ),
+        _vm._v(" "),
+        _vm.instance.helperOptions && _vm.instance.helperOptions.length
+          ? _c(
+              "zd-dropdown",
+              {
+                attrs: {
+                  name: _vm.instance.name + "_helperdropdown",
+                  "offset-y": "",
+                  activator: {
+                    name: _vm.instance.name + "_helperbutton",
+                    component: "ZdButton",
+                    iconName: "magnify",
+                    icon: true,
+                    small: true,
+                    cssClass:
+                      "date-range-helper-values-button " +
+                      (_vm.instance.showLabel !== false ? "with-label" : ""),
+                  },
+                },
+              },
+              _vm._l(_vm.instance.helperOptions, function (value) {
+                return _c("zd-text", {
+                  key: value,
+                  attrs: {
+                    name: _vm.instance.name + "_helpervalue_" + value,
+                    cssClass:
+                      "date-range-helper-values-option zd-dropdown-component",
+                    text: _vm.getLabel(value),
+                    events: {
+                      click: _vm.helperValuesOptionClick,
+                    },
+                  },
+                })
+              }),
+              1
+            )
+          : _vm._e(),
       ],
       1
     )
@@ -34521,7 +35078,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$13 = function (inject) {
       if (!inject) return
-      inject("data-v-cff9acb0_0", { source: "div.v-picker--date .v-picker__body {\n  background: transparent;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header {\n  padding: var(--spacing-2) var(--spacing-4) var(--spacing-1) var(--spacing-4);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header .v-date-picker-header__value:not(.v-date-picker-header__value--disabled) > div {\n  color: var(--zd-primary-base) !important;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header .v-date-picker-header__value:not(.v-date-picker-header__value--disabled) > div button:not(:hover):not(:focus) {\n  color: var(--zd-font-default-color);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header button.v-btn {\n  color: var(--zd-font-default-color);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header .v-btn--icon {\n  height: var(--icon-size);\n  width: var(--icon-size);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header .v-date-picker-header__value button {\n  padding: 0;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table {\n  margin-bottom: 12px;\n  padding: 0 var(--spacing-4);\n  height: 200px;\n  margin-bottom: var(--spacing-4);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table .v-btn.v-btn--active {\n  color: var(--v-secondary-lighten4);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--date .v-btn {\n  width: 24px;\n  height: 24px;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--month {\n  padding-top: var(--spacing-4);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--month .v-btn {\n  padding: 4px 0 7px 0;\n  height: 24px;\n  width: 56px;\n  min-width: 56px;\n  border-radius: var(--border);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--month td {\n  height: 24px;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--month tr:not(:last-child) td {\n  padding-bottom: 24px;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table table thead th {\n  color: var(--zd-font-disabled-color);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table table tbody button.v-btn {\n  color: var(--zd-font-default-color);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table table tbody button.v-btn.accent--text {\n  color: var(--zd-primary-base) !important;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table table tbody button.v-btn.accent {\n  background: var(--zd-primary-base) !important;\n  color: white !important;\n}\ndiv.v-picker--date .v-picker__body ul.v-date-picker-years li {\n  color: var(--zd-font-default-color);\n}\ndiv.v-picker--date .v-picker__body ul.v-date-picker-years li.primary--text {\n  color: var(--zd-primary-base) !important;\n}\n.zd-date-menu-activator .v-menu__activator.v-menu__activator--disabled {\n  cursor: default;\n}", map: undefined, media: undefined });
+      inject("data-v-1ca32689_0", { source: "div.v-picker--date .v-picker__body {\n  background: transparent;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header {\n  padding: var(--spacing-2) var(--spacing-4) var(--spacing-1) var(--spacing-4);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header .v-date-picker-header__value:not(.v-date-picker-header__value--disabled) > div {\n  color: var(--zd-primary-base) !important;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header .v-date-picker-header__value:not(.v-date-picker-header__value--disabled) > div button:not(:hover):not(:focus) {\n  color: var(--zd-font-default-color);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header button.v-btn {\n  color: var(--zd-font-default-color);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header .v-btn--icon {\n  height: var(--icon-size);\n  width: var(--icon-size);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header .v-date-picker-header__value button {\n  padding: 0;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table {\n  margin-bottom: 12px;\n  padding: 0 var(--spacing-4);\n  height: 200px;\n  margin-bottom: var(--spacing-4);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table .v-btn.v-btn--active {\n  color: var(--v-secondary-lighten4);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--date .v-btn {\n  width: 24px;\n  height: 24px;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--month {\n  padding-top: var(--spacing-4);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--month .v-btn {\n  padding: 4px 0 7px 0;\n  height: 24px;\n  width: 56px;\n  min-width: 56px;\n  border-radius: var(--border);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--month td {\n  height: 24px;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--month tr:not(:last-child) td {\n  padding-bottom: 24px;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table table thead th {\n  color: var(--zd-font-disabled-color);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table table tbody button.v-btn {\n  color: var(--zd-font-default-color);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table table tbody button.v-btn.accent--text {\n  color: var(--zd-primary-base) !important;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table table tbody button.v-btn.accent {\n  background: var(--zd-primary-base) !important;\n  color: white !important;\n}\ndiv.v-picker--date .v-picker__body ul.v-date-picker-years li {\n  color: var(--zd-font-default-color);\n}\ndiv.v-picker--date .v-picker__body ul.v-date-picker-years li.primary--text {\n  color: var(--zd-primary-base) !important;\n}\n.zd-date-menu-activator .v-menu__activator.v-menu__activator--disabled {\n  cursor: default;\n}\n.date-range-helper-values-button {\n  height: 24px !important;\n  margin-left: 5px;\n  margin-top: 0;\n}\n.date-range-helper-values-button.with-label {\n  margin-top: 20px;\n}\n.date-range-helper-values-option {\n  cursor: pointer;\n}\n.date-range-helper-values-option:hover {\n  background-color: rgba(0, 0, 0, 0.03);\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -40220,7 +40777,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                   this.originalOnScroll(event);
               if (this.instance.datasource.loadAll)
                   return;
-              if (this.instance.datasource.data.length === this.instance.datasource.total)
+              if (!this.instance.showLoadMore())
                   return;
               const elem = event.target;
               if (!elem)
@@ -40288,7 +40845,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
           if (!this.componentRef || !this.componentRef.updateMenuDimensions)
               return;
           // Update menu position
-          this.componentRef.updateMenuDimensions();
+          this.$nextTick(this.componentRef.updateMenuDimensions);
       }
   };
   __decorate([
@@ -40609,14 +41166,6 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                       _c(
                         "div",
                         {
-                          directives: [
-                            {
-                              name: "show",
-                              rawName: "v-show",
-                              value: _vm.instance.showLoadMore(),
-                              expression: "instance.showLoadMore()",
-                            },
-                          ],
                           staticClass: "zd-select-append-item",
                           on: {
                             mousedown: function ($event) {
@@ -40664,7 +41213,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$K = function (inject) {
       if (!inject) return
-      inject("data-v-52fccbb0_0", { source: ".zd-select .v-input__control .v-input__slot .v-select__slot {\n  position: static;\n}\n.zd-select .v-input__control .v-input__slot .v-select__slot .v-input__prepend-outer {\n  margin-right: var(--spacing-1);\n}\n.zd-select .v-input__control .v-input__slot .v-select__slot .v-input__append-outer {\n  margin-left: var(--spacing-1);\n}\n.zd-select .v-input__control .v-input__slot .v-select__slot .v-input__prepend-outer, .zd-select .v-input__control .v-input__slot .v-select__slot .v-input__append-outer {\n  margin-top: 5px;\n}\n.zd-select .v-input__control .v-input__slot .v-select__slot .v-input__append-inner, .zd-select .v-input__control .v-input__slot .v-select__slot .v-input__prepend-inner {\n  padding-left: 0;\n  padding-right: 0;\n}\n.zd-select.zd-select-align-left > .v-input__control > .v-input__slot input {\n  text-align: left;\n}\n.zd-select.zd-select-align-center > .v-input__control > .v-input__slot input {\n  text-align: center;\n}\n.zd-select.zd-select-align-right > .v-input__control > .v-input__slot input {\n  text-align: right;\n}\n.zd-select .v-select__selections {\n  padding: 0;\n  width: 172px;\n  overflow: hidden;\n  white-space: nowrap;\n  flex-wrap: nowrap;\n  text-overflow: ellipsis;\n}\n.zd-select .v-select__selections .v-select__selection {\n  font-size: var(--zd-font-body1-size);\n  font-weight: var(--zd-font-body1-weight);\n  color: var(--zd-font-color);\n  margin: 0;\n  max-width: none;\n}\n.zd-select .v-select__selections .v-select__selection--disabled {\n  opacity: 0.5;\n}\n.zd-select.zd-dense .v-input__append-inner, .zd-select.zd-dense .v-input__prepend-inner {\n  margin-top: 0;\n}\n.zd-select-append-item .v-list-item__content {\n  font-size: var(--zd-font-body2-size);\n  font-weight: var(--zd-font-body2-size);\n  color: var(--v-primary-base);\n}\n.v-menu__content.zd-select-menu {\n  box-shadow: var(--shadow-2);\n}\n.v-menu__content.zd-select-menu .v-select-list {\n  padding: 0;\n}\n.v-menu__content.zd-select-menu .v-select-list .v-list-item {\n  height: auto;\n  min-height: 40px;\n  padding: 0 var(--spacing-4);\n}\n.v-menu__content.zd-select-menu .v-select-list .v-list-item__content {\n  padding: var(--spacing-2) 0;\n}\n.v-menu__content.zd-select-menu .v-select-list .v-list-item:not(.theme--dark) {\n  color: var(--zd-font-color);\n}\n.v-menu__content.zd-select-menu .v-select-list .v-list-item__title {\n  font-size: var(--zd-font-body1-size);\n  font-weight: var(--zd-font-body1-weight);\n  height: auto;\n  line-height: unset;\n  white-space: unset;\n  overflow: auto;\n  text-overflow: unset;\n}\n.v-menu__content.zd-select-menu .v-select-list .v-list-item.v-list-item--disabled .v-list-item__title {\n  opacity: 0.5;\n}\n.v-menu__content.zd-select-menu .v-select-list .v-list-item.v-list-item--disabled.primary--text .v-list-item__title {\n  color: inherit;\n}\n.v-menu__content.zd-select-menu.zd-dense .v-list-item {\n  height: auto;\n  min-height: 24px;\n  padding: 0 var(--spacing-4);\n}\n.v-menu__content.zd-select-menu.zd-select-align-left .v-list-item__content .v-list-item__title {\n  text-align: left;\n}\n.v-menu__content.zd-select-menu.zd-select-align-center .v-list-item__content .v-list-item__title {\n  text-align: center;\n}\n.v-menu__content.zd-select-menu.zd-select-align-right .v-list-item__content .v-list-item__title {\n  text-align: right;\n}", map: undefined, media: undefined });
+      inject("data-v-b1b2a69a_0", { source: ".zd-select .v-input__control .v-input__slot .v-select__slot {\n  position: static;\n}\n.zd-select .v-input__control .v-input__slot .v-select__slot .v-input__prepend-outer {\n  margin-right: var(--spacing-1);\n}\n.zd-select .v-input__control .v-input__slot .v-select__slot .v-input__append-outer {\n  margin-left: var(--spacing-1);\n}\n.zd-select .v-input__control .v-input__slot .v-select__slot .v-input__prepend-outer, .zd-select .v-input__control .v-input__slot .v-select__slot .v-input__append-outer {\n  margin-top: 5px;\n}\n.zd-select .v-input__control .v-input__slot .v-select__slot .v-input__append-inner, .zd-select .v-input__control .v-input__slot .v-select__slot .v-input__prepend-inner {\n  padding-left: 0;\n  padding-right: 0;\n}\n.zd-select.zd-select-align-left > .v-input__control > .v-input__slot input {\n  text-align: left;\n}\n.zd-select.zd-select-align-center > .v-input__control > .v-input__slot input {\n  text-align: center;\n}\n.zd-select.zd-select-align-right > .v-input__control > .v-input__slot input {\n  text-align: right;\n}\n.zd-select .v-select__selections {\n  padding: 0;\n  width: 172px;\n  overflow: hidden;\n  white-space: nowrap;\n  flex-wrap: nowrap;\n  text-overflow: ellipsis;\n}\n.zd-select .v-select__selections .v-select__selection {\n  font-size: var(--zd-font-body1-size);\n  font-weight: var(--zd-font-body1-weight);\n  color: var(--zd-font-color);\n  margin: 0;\n  max-width: none;\n}\n.zd-select .v-select__selections .v-select__selection--disabled {\n  opacity: 0.5;\n}\n.zd-select.zd-dense .v-input__append-inner, .zd-select.zd-dense .v-input__prepend-inner {\n  margin-top: 0;\n}\n.zd-select-append-item .v-list-item__content {\n  font-size: var(--zd-font-body2-size);\n  font-weight: var(--zd-font-body2-size);\n  color: var(--v-primary-base);\n}\n.v-menu__content.zd-select-menu {\n  box-shadow: var(--shadow-2);\n}\n.v-menu__content.zd-select-menu .v-select-list {\n  padding: 0;\n}\n.v-menu__content.zd-select-menu .v-select-list .v-list-item {\n  height: auto;\n  min-height: 40px;\n  padding: 0 var(--spacing-4);\n}\n.v-menu__content.zd-select-menu .v-select-list .v-list-item__content {\n  padding: var(--spacing-2) 0;\n}\n.v-menu__content.zd-select-menu .v-select-list .v-list-item:not(.theme--dark) {\n  color: var(--zd-font-color);\n}\n.v-menu__content.zd-select-menu .v-select-list .v-list-item__title {\n  font-size: var(--zd-font-body1-size);\n  font-weight: var(--zd-font-body1-weight);\n  height: auto;\n  line-height: unset;\n  white-space: unset;\n  overflow: auto;\n  text-overflow: unset;\n}\n.v-menu__content.zd-select-menu .v-select-list .v-list-item.v-list-item--disabled .v-list-item__title {\n  opacity: 0.5;\n}\n.v-menu__content.zd-select-menu .v-select-list .v-list-item.v-list-item--disabled.primary--text .v-list-item__title {\n  color: inherit;\n}\n.v-menu__content.zd-select-menu.zd-dense .v-list-item {\n  height: auto;\n  min-height: 24px;\n  padding: 0 var(--spacing-4);\n}\n.v-menu__content.zd-select-menu.zd-select-align-left .v-list-item__content .v-list-item__title {\n  text-align: left;\n}\n.v-menu__content.zd-select-menu.zd-select-align-center .v-list-item__content .v-list-item__title {\n  text-align: center;\n}\n.v-menu__content.zd-select-menu.zd-select-align-right .v-list-item__content .v-list-item__title {\n  text-align: right;\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -42157,10 +42706,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
           core.KeyMap.unbind(this.navigationKeyMapping, this);
       }
       showSlotOnHover() {
-          if (this.instance.miniState && this.$children.length >= 2 && this.$children[1].$el.matches(':hover')) {
-              return this.instance.miniState;
-          }
-          return !this.instance.miniState;
+          return (this.instance.miniState && this.instance.mouseOver) || (!this.instance.miniState || this.instance.mini);
       }
       doSearch({ component }) {
           this.instance.search = component.value;
@@ -42413,11 +42959,13 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                   floating: _vm.instance.floating,
                   "mini-variant-width": _vm.instance.miniWidth,
                   "mini-variant":
-                    (_vm.instance.mini ||
-                      (_vm.instance.miniState &&
-                        _vm.$refs.ZdMenu &&
-                        !_vm.$refs.ZdMenu.isMobile)) &&
-                    !_vm.instance.mouseOver,
+                    (!_vm.instance.opened && _vm.instance.mini) ||
+                    (_vm.instance.miniState &&
+                      !_vm.instance.mouseOver &&
+                      _vm.instance.miniState &&
+                      _vm.$refs.ZdMenu &&
+                      !_vm.$refs.ZdMenu.isMobile) ||
+                    (_vm.instance.miniState && _vm.instance.mini),
                   "mobile-breakpoint": _vm.instance.mobileBreakpoint,
                   temporary: _vm.instance.temporary,
                   width: _vm.instance.width,
@@ -42520,7 +43068,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$z = function (inject) {
       if (!inject) return
-      inject("data-v-368f7c97_0", { source: ".zd-menu .v-list .v-list-item .v-list-item__title {\n  font-weight: var(--zd-font-body1-weight);\n  font-size: var(--zd-font-body1-size);\n  color: var(--zd-font-color);\n  text-align: left;\n}\n.zd-menu .v-list .v-list-item .v-list-item__icon .v-icon {\n  color: var(--zd-font-color);\n}\n.zd-menu .v-list .v-list-item.selected .v-list-item__title {\n  font-weight: var(--zd-font-body2-weight);\n  color: var(--v-primary-base);\n}\n.zd-menu .v-list .v-list-item.selected .v-list-item__icon .v-icon {\n  color: var(--v-primary-base);\n}\n.zd-menu .v-list .v-list-item.v-list-item--active:not(.focus-visible):not(:focus):not([data-focus-visible-added]):not(:hover):before {\n  opacity: 0;\n}\n.zd-menu .v-list .v-list-group.selected > .v-list-group__header .v-list-item__title {\n  font-weight: var(--zd-font-body2-weight);\n  color: var(--v-primary-base);\n}\n.zd-menu .v-list .v-list-group.selected > .v-list-group__header .v-list-item__icon .v-icon {\n  color: var(--v-primary-base);\n}\n.zd-menu .v-list .zd-menu-top-slot {\n  margin-bottom: 10px;\n  display: block;\n}\n.zd-menu.v-navigation-drawer--mini-variant .v-list-item {\n  justify-content: inherit;\n}\n.zd-menu.v-navigation-drawer--is-mobile div > .zd-menu-top-slot {\n  display: block !important;\n}\n.zd-menu.theme--dark .v-list .v-list-item .v-list-item__title {\n  color: var(--v--grey-lighten5);\n}\n.zd-menu.theme--dark .v-list .v-list-item .v-list-item__icon .v-icon {\n  color: var(--v--grey-lighten5);\n}", map: undefined, media: undefined });
+      inject("data-v-13b6f89c_0", { source: ".zd-menu .v-list .v-list-item .v-list-item__title {\n  font-weight: var(--zd-font-body1-weight);\n  font-size: var(--zd-font-body1-size);\n  color: var(--zd-font-color);\n  text-align: left;\n}\n.zd-menu .v-list .v-list-item .v-list-item__icon .v-icon {\n  color: var(--zd-font-color);\n}\n.zd-menu .v-list .v-list-item.selected .v-list-item__title {\n  font-weight: var(--zd-font-body2-weight);\n  color: var(--v-primary-base);\n}\n.zd-menu .v-list .v-list-item.selected .v-list-item__icon .v-icon {\n  color: var(--v-primary-base);\n}\n.zd-menu .v-list .v-list-item.v-list-item--active:not(.focus-visible):not(:focus):not([data-focus-visible-added]):not(:hover):before {\n  opacity: 0;\n}\n.zd-menu .v-list .v-list-group.selected > .v-list-group__header .v-list-item__title {\n  font-weight: var(--zd-font-body2-weight);\n  color: var(--v-primary-base);\n}\n.zd-menu .v-list .v-list-group.selected > .v-list-group__header .v-list-item__icon .v-icon {\n  color: var(--v-primary-base);\n}\n.zd-menu .v-list .zd-menu-top-slot {\n  margin-bottom: 10px;\n  display: block;\n}\n.zd-menu.v-navigation-drawer--mini-variant .v-list-item {\n  justify-content: inherit;\n}\n.zd-menu.v-navigation-drawer--is-mobile div > .zd-menu-top-slot {\n  display: block !important;\n}\n.zd-menu.theme--dark .v-list .v-list-item .v-list-item__title {\n  color: var(--v--grey-lighten5);\n}\n.zd-menu.theme--dark .v-list .v-list-item .v-list-item__icon .v-icon {\n  color: var(--v--grey-lighten5);\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -44461,56 +45009,63 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       constructor() {
           super(...arguments);
           this.instanceType = common.SelectMultiple;
-          this.oneLineMode = true;
+          this.expandedMode = false;
+          this.rows = 1;
           this.lastDisplayedChip = 0;
           this.allSelected = false;
+          this.hasHiddenRows = false;
+      }
+      get maxRowsNumber() {
+          return Number(this.instance.maxRows || Infinity);
       }
       mounted() {
           this.componentRef = this.$refs.instance;
           this.element = this.componentRef.$el;
-          this.initialHeight = this.element.offsetHeight;
           this.listener = () => this.handleResize();
           window.addEventListener('resize', this.listener);
-          if (this.value) {
-              this.unwatchValue = this.$watch('instance.value', this.onValueChange);
-          }
+          this.initialHeight = this.element.offsetHeight;
+      }
+      onValueChange() {
+          if (this.componentRef.isFocused)
+              return;
+          this.refreshDisplay();
       }
       beforeDestroy() {
           window.removeEventListener('resize', this.listener);
       }
-      onValueChange() {
-          const prevMode = this.oneLineMode;
-          this.oneLineMode = false;
-          this.$nextTick(() => {
-              this.calcDisplay(true);
-              this.oneLineMode = prevMode;
+      initChipConfig() {
+          this.refreshDisplay(() => {
+              this.$nextTick(() => {
+                  this.initialHeight = this.element.offsetHeight;
+              });
               if (this.componentRef.isFocused) {
                   this.updateMenu();
               }
           });
-          this.unwatchValue();
       }
       calcDisplay(force = false) {
           var _a;
           const chips = this.getChips();
-          if (chips.length > 0) {
-              if (this.element.offsetHeight > this.initialHeight || force) {
-                  this.lastDisplayedChip = this.getLastChipIndex(chips);
-              }
-              else {
-                  this.lastDisplayedChip = ((_a = this.instance.value) === null || _a === void 0 ? void 0 : _a.length) || 0;
-              }
+          if (chips.length === 0)
+              return;
+          if (this.element.offsetHeight > this.initialHeight || force) {
+              this.lastDisplayedChip = this.getLastChipIndex(chips);
+              return;
           }
+          this.lastDisplayedChip = ((_a = this.instance.value) === null || _a === void 0 ? void 0 : _a.length) || 0;
       }
       getLastChipIndex(chips) {
           let lastIndex = -1;
           let filledWidth = 0;
           const firstChip = chips[0];
-          const baseTop = firstChip.offsetTop;
+          let baseTop = firstChip.offsetTop;
           const marginX = this.getMarginX(firstChip);
+          if (!firstChip.parentElement)
+              return 0;
           let inputWidth = firstChip.parentElement.offsetWidth;
           inputWidth -= this.getPaddingX(firstChip.parentElement);
-          const hasSecondRow = chips.some((chip, index) => {
+          let rowCount = 1;
+          this.hasHiddenRows = chips.some((chip, index) => {
               if (chip.offsetTop === baseTop) {
                   const chipWidth = chip.offsetWidth + marginX;
                   filledWidth += chipWidth;
@@ -44519,9 +45074,16 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                   }
                   return false;
               }
+              rowCount += 1;
+              if (rowCount <= this.rows) {
+                  baseTop = chip.offsetTop;
+                  filledWidth = chip.offsetWidth + marginX;
+                  lastIndex = index;
+                  return false;
+              }
               return true;
           });
-          if (!hasSecondRow) {
+          if (!this.hasHiddenRows) {
               lastIndex = this.instance.value.length - 1;
           }
           return lastIndex;
@@ -44551,7 +45113,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
           const { input, menu } = this.componentRef.$refs;
           input.focus();
           menu.isActive = !this.instance.readonly && !this.instance.disabled && !menu.isActive;
-          this.oneLineMode = !menu.isActive;
+          this.rows = menu.isActive ? this.maxRowsNumber : 1;
           this.$nextTick(() => { this.componentRef.isFocused = true; });
       }
       /**
@@ -44571,20 +45133,18 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       }
       selectClick(event) {
           const { menu } = this.componentRef.$refs;
-          if (!menu.isActive)
-              this.oneLineMode = false;
+          if (!menu.isActive) {
+              this.rows = this.maxRowsNumber;
+              if (this.instance.maxRows) {
+                  this.$nextTick(() => {
+                      this.calcDisplay(true);
+                  });
+              }
+          }
           this.instance.click(event, this.$el);
       }
       handleResize() {
-          if (this.oneLineMode) {
-              this.oneLineMode = false;
-              this.$nextTick(() => {
-                  if (!this.checkOverflow()) {
-                      this.calcDisplay(true);
-                  }
-                  this.oneLineMode = true;
-              });
-          }
+          this.refreshDisplay();
       }
       get moreItemsText() {
           this.instance.moreChip = this.instance.value.length - this.lastDisplayedChip - 1;
@@ -44593,19 +45153,36 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       selectChange(value, event) {
           this.instance.selectChange(value.map((item) => item.originalRow), event, this.$el);
           this.changeSelectAllItemsValue();
+          const { menu } = this.componentRef.$refs;
+          if (menu.isActive && this.instance.maxRows) {
+              this.refreshDisplay();
+          }
       }
       selectBlur(event) {
-          if (!this.oneLineMode) {
-              this.oneLineMode = true;
+          if (this.rows !== 1) {
+              this.rows = 1;
               this.calcDisplay();
               this.$nextTick(() => this.checkOverflow());
           }
           this.superMethods(__vue_component__$K).selectBlur.call(this, event);
       }
       selectFocus(event) {
-          this.oneLineMode = false;
+          this.rows = this.maxRowsNumber;
+          this.refreshDisplay();
           this.superMethods(__vue_component__$K).selectFocus.call(this, event);
       }
+      refreshDisplay(cb) {
+          const prevMode = this.expandedMode;
+          this.expandedMode = true;
+          this.$nextTick(() => {
+              this.expandedMode = prevMode;
+              if (!this.checkOverflow()) {
+                  this.calcDisplay(true);
+              }
+              if (cb)
+                  cb();
+          });
+      }
       onSelectAll(event) {
           this.allSelected = !this.allSelected;
           this.$nextTick(() => {
@@ -44656,6 +45233,16 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       PropWatch({ type: [Boolean, String], default: false }),
       __metadata("design:type", Boolean)
   ], ZdSelectMultiple.prototype, "showSelectAll", void 0);
+  __decorate([
+      PropWatch({ type: [String, Number], default: undefined }),
+      __metadata("design:type", Object)
+  ], ZdSelectMultiple.prototype, "maxRows", void 0);
+  __decorate([
+      vuePropertyDecorator.Watch('instance.value'),
+      __metadata("design:type", Function),
+      __metadata("design:paramtypes", []),
+      __metadata("design:returntype", void 0)
+  ], ZdSelectMultiple.prototype, "onValueChange", null);
   ZdSelectMultiple = __decorate([
       Component__default["default"]
   ], ZdSelectMultiple);
@@ -44697,7 +45284,6 @@ If you're seeing "$attrs is readonly", it's caused by this`);
             ),
           "zd-no-border": !_vm.instance.showBorder,
           "zd-dense": _vm.instance.dense,
-          "zd-select-multiple--one-line": _vm.oneLineMode,
           "zd-select-multiple-autocomplete": _vm.instance.autocomplete,
           "zd-input-required": _vm.instance.validations.required,
         },
@@ -44709,7 +45295,6 @@ If you're seeing "$attrs is readonly", it's caused by this`);
         id: _vm.instance.name,
         "return-object": "",
         "validate-on-blur": "",
-        "no-filter": "",
         multiple: "",
         name: _vm.instance.name,
         loading: _vm.instance.datasource.loading,
@@ -44746,6 +45331,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
           fixed: true,
           "max-width": _vm.parentWidth,
           closeOnContentClick: false,
+          maxHeight: _vm.instance.menuMaxHeight,
         },
         "search-input": _vm.instance.search,
         "append-icon": _vm.$getIcon(_vm.instance.appendIcon),
@@ -44925,7 +45511,9 @@ If you're seeing "$attrs is readonly", it's caused by this`);
             key: "selection",
             fn: function (props) {
               return [
-                !_vm.oneLineMode || props.index <= _vm.lastDisplayedChip
+                _vm.expandedMode ||
+                !_vm.hasHiddenRows ||
+                props.index <= _vm.lastDisplayedChip
                   ? _c(
                       "v-chip",
                       {
@@ -44949,7 +45537,9 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                     )
                   : _vm._e(),
                 _vm._v(" "),
-                _vm.oneLineMode && props.index === _vm.lastDisplayedChip + 1
+                !_vm.expandedMode &&
+                _vm.hasHiddenRows &&
+                props.index === _vm.lastDisplayedChip + 1
                   ? _c("span", { staticClass: "more-items grey--text caption" }, [
                       _vm._v(_vm._s(_vm.moreItemsText)),
                     ])
@@ -45017,14 +45607,6 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                       _c(
                         "div",
                         {
-                          directives: [
-                            {
-                              name: "show",
-                              rawName: "v-show",
-                              value: _vm.instance.showLoadMore(),
-                              expression: "instance.showLoadMore()",
-                            },
-                          ],
                           staticClass: "zd-select-append-item",
                           on: {
                             mousedown: function ($event) {
@@ -45072,7 +45654,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$k = function (inject) {
       if (!inject) return
-      inject("data-v-dfbdd716_0", { source: ".zd-select-multiple--one-line .v-select__slot .v-select__selections {\n  flex-wrap: nowrap;\n}\n.zd-select-multiple:not(.zd-select-multiple--one-line) .v-select__slot .v-select__selections {\n  flex-wrap: wrap;\n  padding-bottom: 0 !important;\n}\n.zd-select-multiple:not(.zd-select-multiple--one-line) .v-select__slot .v-select__selections .v-chip {\n  margin-bottom: 0.2rem;\n  margin-top: 0.2rem;\n}\n.zd-select-multiple:not(.zd-select-multiple--one-line) .v-select__slot .v-select__selections input {\n  position: relative;\n  top: -2px;\n}\n.zd-select-multiple .v-input > .v-input__control > .v-input__slot > .v-select__slot input {\n  padding: 0;\n}\n.zd-select-multiple-autocomplete.v-input > .v-input__control > .v-input__slot > .v-select__slot input {\n  padding: 0 var(--spacing-1);\n}\n.zd-select-multiple .v-select__slot .v-select__selections {\n  padding: 0px 7px 0px 7px;\n}\n.zd-select-multiple .v-select__slot .v-select__selections .v-chip {\n  margin: 0 var(--spacing-1) 0 0;\n}\n.zd-select-multiple .v-select__slot .v-select__selections .v-chip.v-size--x-small {\n  height: 15px;\n}\n.zd-select-multiple .v-select__slot .v-select__selections .v-chip.v-size--x-small .chip-text {\n  font-size: 12px;\n}\n.zd-select-multiple .v-select__slot .v-select__selections .v-chip--removable.v-size--x-small .v-chip__content .v-chip__close {\n  font-size: 14px !important;\n  margin-left: var(--spacing-2);\n  margin-right: -6px;\n}\n.zd-select-multiple .v-select__slot .v-select__selections .more-items {\n  line-height: 15px;\n}\n.zd-select-multiple .v-input__slot {\n  min-height: 24px;\n}\n.zd-select-multiple.zd-dense .v-input__slot {\n  min-height: 24px;\n}\n.zd-select-multiple.zd-dense .v-select__slot .v-select__selections {\n  padding: 0 var(--spacing-1);\n}\n.zd-select-multiple.zd-dense .v-select__slot .v-select__selections .v-chip {\n  margin-bottom: 0.2rem;\n  margin-top: 0.2rem;\n}\n.zd-select-multiple.v-input--is-focused .v-select__slot .v-select__selections .v-chip .v-chip__content .chip-text {\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n.v-menu__content.zd-select-menu .v-select-list div.v-list-item__action {\n  margin: 0 var(--zd-default-padding) 0 0;\n}\n.v-menu__content.zd-select-menu .v-select-list > .v-list-item .v-input--selection-controls__ripple {\n  margin: 0;\n}\n.v-menu__content.zd-select-menu .v-select-list .v-list-item--disabled .v-simple-checkbox .v-icon {\n  opacity: 0.5;\n}", map: undefined, media: undefined });
+      inject("data-v-9f031bd2_0", { source: ".zd-select-multiple .v-select__slot .v-select__selections {\n  flex-wrap: wrap;\n  padding-bottom: 0 !important;\n}\n.zd-select-multiple .v-select__slot .v-select__selections .v-chip {\n  margin-bottom: 0.2rem;\n  margin-top: 0.2rem;\n}\n.zd-select-multiple .v-select__slot .v-select__selections input {\n  position: relative;\n  top: -2px;\n}\n.zd-select-multiple-autocomplete.v-input:not(.v-input--is-focused) > .v-input__control > .v-input__slot > .v-select__slot input {\n  padding: 0;\n}\n.zd-select-multiple .v-input > .v-input__control > .v-input__slot > .v-select__slot input {\n  padding: 0;\n}\n.zd-select-multiple-autocomplete.v-input > .v-input__control > .v-input__slot > .v-select__slot input {\n  padding: 0 var(--spacing-1);\n}\n.zd-select-multiple .v-select__slot .v-select__selections {\n  padding: 0px 7px 0px 7px;\n}\n.zd-select-multiple .v-select__slot .v-select__selections .v-chip {\n  margin: 0 var(--spacing-1) 0 0;\n}\n.zd-select-multiple .v-select__slot .v-select__selections .v-chip.v-size--x-small {\n  height: 15px;\n}\n.zd-select-multiple .v-select__slot .v-select__selections .v-chip.v-size--x-small .chip-text {\n  font-size: 12px;\n}\n.zd-select-multiple .v-select__slot .v-select__selections .v-chip--removable.v-size--x-small .v-chip__content .v-chip__close {\n  font-size: 14px !important;\n  margin-left: var(--spacing-2);\n  margin-right: -6px;\n}\n.zd-select-multiple .v-select__slot .v-select__selections .more-items {\n  line-height: 15px;\n}\n.zd-select-multiple .v-input__slot {\n  min-height: 24px;\n}\n.zd-select-multiple.zd-dense .v-input__slot {\n  min-height: 24px;\n}\n.zd-select-multiple.zd-dense .v-select__slot .v-select__selections {\n  padding: 0 var(--spacing-1);\n}\n.zd-select-multiple.zd-dense .v-select__slot .v-select__selections .v-chip {\n  margin-bottom: 0.2rem;\n  margin-top: 0.2rem;\n}\n.zd-select-multiple.v-input--is-focused .v-select__slot .v-select__selections .v-chip .v-chip__content .chip-text {\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n.v-menu__content.zd-select-menu .v-select-list div.v-list-item__action {\n  margin: 0 var(--zd-default-padding) 0 0;\n}\n.v-menu__content.zd-select-menu .v-select-list > .v-list-item .v-input--selection-controls__ripple {\n  margin: 0;\n}\n.v-menu__content.zd-select-menu .v-select-list .v-list-item--disabled .v-simple-checkbox .v-icon {\n  opacity: 0.5;\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -46767,8 +47349,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                         {
                           name: "show",
                           rawName: "v-show",
-                          value: tab.isVisible,
-                          expression: "tab.isVisible",
+                          value:
+                            tab.isVisible && index === _vm.instance.activeTab,
+                          expression:
+                            "tab.isVisible && index === instance.activeTab",
                         },
                       ],
                       key: index,
@@ -46800,11 +47384,11 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$c = function (inject) {
       if (!inject) return
-      inject("data-v-0214eb88_0", { source: ".zd-tabs[data-v-0214eb88] {\n  display: flex;\n  flex-direction: column;\n}\n.zd-tabs[data-v-0214eb88]  .v-tabs-bar,\n.zd-tabs[data-v-0214eb88]  .v-tabs-items {\n  background-color: transparent;\n}\n.zd-tabs[data-v-0214eb88]  .v-tabs-bar {\n  height: auto;\n}\n.zd-tabs[data-v-0214eb88]  .v-tabs-bar .v-tabs-slider-wrapper {\n  bottom: -1px;\n}\n.zd-tabs[data-v-0214eb88]  .v-tabs-bar__content {\n  border-bottom: solid 1px var(--v-grey-lighten4);\n}\n.zd-tabs[data-v-0214eb88]  .v-tabs {\n  margin-bottom: var(--spacing-4);\n}\n.zd-tabs[data-v-0214eb88]  .v-tabs .v-slide-group__next,\n.zd-tabs[data-v-0214eb88]  .v-tabs .v-slide-group__prev {\n  flex-basis: 30px;\n  min-width: 30px;\n}\n.zd-tabs[data-v-0214eb88]  .v-tabs .v-slide-group__next .v-icon,\n.zd-tabs[data-v-0214eb88]  .v-tabs .v-slide-group__prev .v-icon {\n  font-size: 18px;\n}\n.zd-tabs[data-v-0214eb88]  .v-tabs {\n  flex-grow: 0;\n}\n.zd-tabs[data-v-0214eb88]  .v-tabs-items {\n  flex-grow: 1;\n}\n.zd-tabs[data-v-0214eb88]  .v-tabs-items .v-window__container {\n  height: 100% !important;\n}", map: undefined, media: undefined });
+      inject("data-v-62da8a0f_0", { source: ".zd-tabs[data-v-62da8a0f] {\n  display: flex;\n  flex-direction: column;\n}\n.zd-tabs[data-v-62da8a0f]  .v-tabs-bar,\n.zd-tabs[data-v-62da8a0f]  .v-tabs-items {\n  background-color: transparent;\n}\n.zd-tabs[data-v-62da8a0f]  .v-tabs-bar {\n  height: auto;\n}\n.zd-tabs[data-v-62da8a0f]  .v-tabs-bar .v-tabs-slider-wrapper {\n  bottom: -1px;\n}\n.zd-tabs[data-v-62da8a0f]  .v-tabs-bar__content {\n  border-bottom: solid 1px var(--v-grey-lighten4);\n}\n.zd-tabs[data-v-62da8a0f]  .v-tabs {\n  margin-bottom: var(--spacing-4);\n}\n.zd-tabs[data-v-62da8a0f]  .v-tabs .v-slide-group__next,\n.zd-tabs[data-v-62da8a0f]  .v-tabs .v-slide-group__prev {\n  flex-basis: 30px;\n  min-width: 30px;\n}\n.zd-tabs[data-v-62da8a0f]  .v-tabs .v-slide-group__next .v-icon,\n.zd-tabs[data-v-62da8a0f]  .v-tabs .v-slide-group__prev .v-icon {\n  font-size: 18px;\n}\n.zd-tabs[data-v-62da8a0f]  .v-tabs {\n  flex-grow: 0;\n}\n.zd-tabs[data-v-62da8a0f]  .v-tabs-items {\n  flex-grow: 1;\n}\n.zd-tabs[data-v-62da8a0f]  .v-tabs-items .v-window__container {\n  height: 100% !important;\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
-    const __vue_scope_id__$c = "data-v-0214eb88";
+    const __vue_scope_id__$c = "data-v-62da8a0f";
     /* module identifier */
     const __vue_module_identifier__$c = undefined;
     /* functional template */
@@ -48021,26 +48605,30 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   let ZdTreeCheckbox = class ZdTreeCheckbox extends Vue__default["default"] {
       get childrenCheck() {
           var _a;
-          return (_a = this.node.children) === null || _a === void 0 ? void 0 : _a.every((child) => child.isChecked);
+          return (_a = this.node.children) === null || _a === void 0 ? void 0 : _a.every((child) => child.data && child.data[this.checkedField]);
       }
       check() {
-          this.node.isChecked = this.childrenCheck;
+          if (!this.node.data)
+              return;
+          this.node.data[this.checkedField] = this.childrenCheck;
       }
       get isIndeterminate() {
           var _a, _b;
           let count = 0;
           (_a = this.node.children) === null || _a === void 0 ? void 0 : _a.forEach((child) => {
-              if (child.isChecked)
+              if (child.data && child.data[this.checkedField])
                   count += 1;
           });
           return (count > 0) && (count < (((_b = this.node.children) === null || _b === void 0 ? void 0 : _b.length) || 0));
       }
       checkboxToggle(node) {
-          this.toggleChildren([node], !!node.isChecked);
+          this.toggleChildren([node], !!(node.data && node.data[this.checkedField]));
       }
       toggleChildren(nodes, value) {
           nodes.forEach((node) => {
-              node.isChecked = value;
+              if (!node.data)
+                  return;
+              node.data[this.checkedField] = value;
               if (node.children && node.children.length > 0)
                   this.toggleChildren(node.children, value);
           });
@@ -48054,6 +48642,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       vuePropertyDecorator.Prop({ type: [Object], default: () => [] }),
       __metadata("design:type", Object)
   ], ZdTreeCheckbox.prototype, "node", void 0);
+  __decorate([
+      vuePropertyDecorator.Prop({ type: [String], default: 'checked' }),
+      __metadata("design:type", String)
+  ], ZdTreeCheckbox.prototype, "checkedField", void 0);
   __decorate([
       vuePropertyDecorator.Watch('childrenCheck'),
       __metadata("design:type", Function),
@@ -48081,7 +48673,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
         "on-icon": _vm.$getIcon("checkboxOn"),
         "off-icon": _vm.$getIcon("checkboxOff"),
         "indeterminate-icon": _vm.$getIcon("checkboxIndeterminate"),
-        "input-value": _vm.node.isChecked,
+        "input-value": _vm.node.data[_vm.checkedField],
         indeterminate: _vm.isIndeterminate,
       },
       on: {
@@ -48090,11 +48682,11 @@ If you're seeing "$attrs is readonly", it's caused by this`);
         },
       },
       model: {
-        value: _vm.node.isChecked,
+        value: _vm.node.data[_vm.checkedField],
         callback: function ($$v) {
-          _vm.$set(_vm.node, "isChecked", $$v);
+          _vm.$set(_vm.node.data, _vm.checkedField, $$v);
         },
-        expression: "node.isChecked",
+        expression: "node.data[checkedField]",
       },
     })
   };
@@ -48104,7 +48696,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$4 = function (inject) {
       if (!inject) return
-      inject("data-v-6000ad85_0", { source: ".zd-tree-checkbox {\n  display: inline-block;\n  top: 50%;\n  transform: translate(0, -50%);\n}\n.zd-tree-checkbox > .v-input--selection-controls__input {\n  margin-right: 0;\n}", map: undefined, media: undefined });
+      inject("data-v-130a7c09_0", { source: ".zd-tree-checkbox {\n  display: inline-block;\n  top: 50%;\n  transform: translate(0, -50%);\n}\n.zd-tree-checkbox > .v-input--selection-controls__input {\n  margin-right: 0;\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -48226,26 +48818,8 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       mounted() {
           this.instance.setTree(this.$refs.tree);
           this.setAfterTitleMargin();
-          document.addEventListener('click', this.unselect);
-      }
-      destroy() {
-          document.removeEventListener('click', this.unselect);
-      }
-      unselect(event) {
-          var _a;
-          const tree = (_a = this.$refs.tree) === null || _a === void 0 ? void 0 : _a.$el;
-          if (!tree)
-              return;
-          if (tree.contains(event.target))
-              return;
-          this.instance.selectedNodes.forEach((node) => {
-              if (!node.path)
-                  return;
-              const instanceNode = this.instance.getNode(node.path);
-              if (!instanceNode)
-                  return;
-              instanceNode.isSelected = false;
-          });
+          this.nodeChange();
+          this.$watch('$refs.tree.nodes', this.nodeChange, { deep: true });
       }
       dataChange() {
           this.instance.createNodesFromDatasource();
@@ -48375,6 +48949,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       vuePropertyDecorator.Prop({ type: String, default: '' }),
       __metadata("design:type", String)
   ], ZdTree.prototype, "dataField", void 0);
+  __decorate([
+      vuePropertyDecorator.Prop({ type: String, default: 'checked' }),
+      __metadata("design:type", String)
+  ], ZdTree.prototype, "checkedField", void 0);
   __decorate([
       vuePropertyDecorator.Prop({ type: [Boolean, String], default: false }),
       __metadata("design:type", Boolean)
@@ -48389,12 +48967,6 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       __metadata("design:paramtypes", []),
       __metadata("design:returntype", void 0)
   ], ZdTree.prototype, "dataChange", null);
-  __decorate([
-      vuePropertyDecorator.Watch('instance.nodes', { deep: true }),
-      __metadata("design:type", Function),
-      __metadata("design:paramtypes", []),
-      __metadata("design:returntype", void 0)
-  ], ZdTree.prototype, "nodeChange", null);
   ZdTree = __decorate([
       vuePropertyDecorator.Component({
           components: { ZdTreeCheckbox: __vue_component__$4, ZdTreeAfterTitle: __vue_component__$3 },
@@ -48484,7 +49056,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                   return [
                     _vm.instance.checkbox
                       ? _c("zd-tree-checkbox", {
-                          attrs: { node: _vm.instanceNode(node) },
+                          attrs: {
+                            node: _vm.instanceNode(node),
+                            checkedField: _vm.instance.checkedField,
+                          },
                           on: {
                             click: function ($event) {
                               return _vm.nodeCheck(node, $event)
@@ -48686,7 +49261,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$2 = function (inject) {
       if (!inject) return
-      inject("data-v-71da43d2_0", { source: ".zd-tree {\n  color: var(--zd-font-color);\n  font-size: var(--zd-font-body1-size);\n  font-weight: normal;\n}\n.zd-tree.theme--light .sl-vue-tree-title {\n  color: var(--zd-font-color);\n}\n.zd-tree.theme--light .sl-vue-tree-nodes-list .sl-vue-tree-node .sl-vue-tree-node-item:hover {\n  background: #eee;\n}\n.zd-tree.theme--dark .sl-vue-tree-title {\n  color: #fff;\n}\n.zd-tree.theme--dark .sl-vue-tree-nodes-list .sl-vue-tree-node .sl-vue-tree-node-item:hover {\n  background: #616161;\n}\n.zd-tree .sl-vue-tree-title {\n  display: flex;\n}\n.zd-tree .sl-vue-tree-nodes-list .sl-vue-tree-node {\n  padding-top: 3px;\n}\n.zd-tree .sl-vue-tree-nodes-list .sl-vue-tree-node .sl-vue-tree-node-item {\n  height: 30px;\n  line-height: 30px;\n}\n.zd-tree .sl-vue-tree-nodes-list .sl-vue-tree-node.sl-vue-tree-selected > .sl-vue-tree-node-item {\n  background-color: var(--current-row-color);\n  color: var(--zd-font-color);\n}\n.zd-tree .sl-vue-tree-nodes-list .sl-vue-tree-node.sl-vue-tree-selected > .sl-vue-tree-node-item:hover {\n  background: var(--current-row-hover-color) !important;\n}\n.zd-tree .sl-vue-tree-nodes-list .sl-vue-tree-node.sl-vue-tree-selected > .sl-vue-tree-node-item .sl-vue-tree-toggle .v-icon {\n  color: var(--zd-font-color);\n}\n.zd-tree .sl-vue-tree-nodes-list .sl-vue-tree-node .sl-vue-tree-toggle span .v-icon {\n  margin-right: -6px;\n}\n.zd-tree .sl-vue-tree-nodes-list .sl-vue-tree-gap {\n  width: 32px;\n}\n.zd-tree .item-title {\n  padding-left: 6px;\n}\n.zd-tree .item-title.has-children {\n  font-weight: 700;\n}\n.zd-tree .item-title.is-clickable {\n  cursor: pointer;\n}", map: undefined, media: undefined });
+      inject("data-v-58bd8c74_0", { source: ".zd-tree {\n  color: var(--zd-font-color);\n  font-size: var(--zd-font-body1-size);\n  font-weight: normal;\n}\n.zd-tree.theme--light .sl-vue-tree-title {\n  color: var(--zd-font-color);\n}\n.zd-tree.theme--light .sl-vue-tree-nodes-list .sl-vue-tree-node .sl-vue-tree-node-item:hover {\n  background: #eee;\n}\n.zd-tree.theme--dark .sl-vue-tree-title {\n  color: #fff;\n}\n.zd-tree.theme--dark .sl-vue-tree-nodes-list .sl-vue-tree-node .sl-vue-tree-node-item:hover {\n  background: #616161;\n}\n.zd-tree .sl-vue-tree-title {\n  display: flex;\n}\n.zd-tree .sl-vue-tree-nodes-list .sl-vue-tree-node {\n  padding-top: 3px;\n}\n.zd-tree .sl-vue-tree-nodes-list .sl-vue-tree-node .sl-vue-tree-node-item {\n  height: 30px;\n  line-height: 30px;\n}\n.zd-tree .sl-vue-tree-nodes-list .sl-vue-tree-node.sl-vue-tree-selected > .sl-vue-tree-node-item {\n  background-color: var(--current-row-color);\n  color: var(--zd-font-color);\n}\n.zd-tree .sl-vue-tree-nodes-list .sl-vue-tree-node.sl-vue-tree-selected > .sl-vue-tree-node-item:hover {\n  background: var(--current-row-hover-color) !important;\n}\n.zd-tree .sl-vue-tree-nodes-list .sl-vue-tree-node.sl-vue-tree-selected > .sl-vue-tree-node-item .sl-vue-tree-toggle .v-icon {\n  color: var(--zd-font-color);\n}\n.zd-tree .sl-vue-tree-nodes-list .sl-vue-tree-node .sl-vue-tree-toggle span .v-icon {\n  margin-right: -6px;\n}\n.zd-tree .sl-vue-tree-nodes-list .sl-vue-tree-gap {\n  width: 32px;\n}\n.zd-tree .item-title {\n  padding-left: 6px;\n}\n.zd-tree .item-title.has-children {\n  font-weight: 700;\n}\n.zd-tree .item-title.is-clickable {\n  cursor: pointer;\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -50949,6 +51524,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                   VBreadcrumbs,
                   VBtn,
                   VBtnToggle,
+                  VCalendar,
                   VCard,
                   VCardActions,
                   VCardText,
@@ -50984,6 +51560,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                   VMenu,
                   VNavigationDrawer,
                   VOverlay,
+                  VOtpInput,
                   VPagination,
                   VProgressCircular,
                   VProgressLinear,
@@ -51013,8 +51590,12 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                   VTabsItems,
                   VTextarea,
                   VTextField,
+                  VTimeline,
+                  VTimelineItem,
                   VTimePicker,
                   VTooltip,
+                  VToolbar,
+                  VToolbarItems,
                   VSimpleCheckbox,
               },
           });