@zeedhi/vuetify 1.45.0 → 1.47.0

package/dist/zd-vuetify.esm.js

@@ -1,5 +1,5 @@
 import VueI18Next from '@panter/vue-i18next';
-import { Metadata, Mask, Config, I18n, Router, KeyMap, dayjs } from '@zeedhi/core';
+import { Metadata, Mask, Config, I18n, DateHelper, Router, KeyMap, dayjs } from '@zeedhi/core';
 import VueApexCharts from 'vue-apexcharts';
 import SlVueTree from 'sl-vue-tree';
 import 'sl-vue-tree/dist/sl-vue-tree-minimal.css';
@@ -331,9 +331,7 @@ class Application extends Service {
   }
 
   register(uid, location, size) {
-    this.application[location] = {
-      [uid]: size
-    };
+    this.application[location][uid] = size;
     this.update(location);
   }
 
@@ -658,13 +656,20 @@ function createSimpleFunctional(c, el = 'div', name) {
   return Vue.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);
     }
 
   });
@@ -963,12 +968,12 @@ function searchItems(items, search) {
  */
 
 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;
@@ -994,9 +999,9 @@ function getPrefixedScopedSlots(prefix, scopedSlots) {
   }, {});
 }
 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];
   }
 
@@ -2216,7 +2221,7 @@ class Vuetify {
 }
 Vuetify.install = install;
 Vuetify.installed = false;
-Vuetify.version = "2.5.14";
+Vuetify.version = "2.6.4";
 Vuetify.config = {
   silent: false
 };
@@ -3478,10 +3483,6 @@ function transform(el, value) {
   el.style.webkitTransform = value;
 }
 
-function opacity(el, value) {
-  el.style.opacity = value.toString();
-}
-
 function isTouchEvent(e) {
   return e.constructor.name === 'TouchEvent';
 }
@@ -3565,13 +3566,11 @@ const ripples = {
     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);
   },
 
@@ -3586,7 +3585,6 @@ const ripples = {
     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');
 
@@ -4062,10 +4060,10 @@ function factory$2(prop = 'value', event = 'input') {
 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
@@ -4847,10 +4845,6 @@ var Routable = Vue.extend({
   },
 
   methods: {
-    click(e) {
-      this.$emit('click', e);
-    },
-
     generateRouteLink() {
       let exact = this.exact;
       let tag;
@@ -4866,7 +4860,9 @@ var Routable = Vue.extend({
           value: this.computedRipple
         }],
         [this.to ? 'nativeOn' : 'on']: { ...this.$listeners,
-          click: this.click
+          ...('click' in this ? {
+            click: this.click
+          } : undefined)
         },
         ref: 'link'
       };
@@ -4910,8 +4906,8 @@ var Routable = Vue.extend({
 
     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 */
@@ -4929,10 +4925,10 @@ var Routable = Vue.extend({
 });
 
 // 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: {
@@ -5831,10 +5827,10 @@ var Delayable = Vue.extend().extend({
 });
 
 // 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: {
@@ -5845,6 +5841,10 @@ var Activatable = baseMixins$r.extend({
     },
     disabled: Boolean,
     internalActivator: Boolean,
+    openOnClick: {
+      type: Boolean,
+      default: true
+    },
     openOnHover: Boolean,
     openOnFocus: Boolean
   },
@@ -5897,7 +5897,7 @@ var Activatable = baseMixins$r.extend({
 
     genActivatorAttributes() {
       return {
-        role: 'button',
+        role: this.openOnClick && !this.openOnHover ? 'button' : undefined,
         'aria-haspopup': true,
         'aria-expanded': String(this.isActive)
       };
@@ -5917,7 +5917,7 @@ var Activatable = baseMixins$r.extend({
           this.getActivator(e);
           this.runDelay('close');
         };
-      } else {
+      } else if (this.openOnClick) {
         listeners.click = e => {
           const activator = this.getActivator(e);
           if (activator) activator.focus();
@@ -6321,10 +6321,10 @@ var Detachable = mixins(Bootable).extend({
 });
 
 // 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,
@@ -6356,7 +6356,6 @@ var Menuable = baseMixins$q.extend().extend({
       default: 0
     },
     offsetOverflow: Boolean,
-    openOnClick: Boolean,
     positionX: {
       type: Number,
       default: null
@@ -6416,7 +6415,8 @@ var Menuable = baseMixins$q.extend().extend({
       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));
@@ -6574,14 +6574,16 @@ var Menuable = baseMixins$q.extend().extend({
       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;
     },
@@ -6730,10 +6732,10 @@ var Returnable = Vue.extend({
 });
 
 // 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,
@@ -6766,10 +6768,6 @@ var VMenu = baseMixins$p.extend({
     },
     offsetX: Boolean,
     offsetY: Boolean,
-    openOnClick: {
-      type: Boolean,
-      default: true
-    },
     openOnHover: Boolean,
     origin: {
       type: String,
@@ -7083,7 +7081,9 @@ var VMenu = baseMixins$p.extend({
     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();
@@ -7412,10 +7412,10 @@ var VList = VSheet.extend().extend({
 });
 
 // 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
@@ -7576,8 +7576,8 @@ var VListItemIcon = Vue.extend({
 });
 
 // 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
@@ -7734,6 +7734,16 @@ var VListGroup = baseMixins$n.extend().extend({
 
 });
 
+var Comparable = Vue.extend({
+  name: 'comparable',
+  props: {
+    valueComparator: {
+      type: Function,
+      default: deepEqual
+    }
+  }
+});
+
 function factory(prop = 'value', event = 'change') {
   return Vue.extend({
     name: 'proxyable',
@@ -7780,7 +7790,7 @@ function factory(prop = 'value', event = 'change') {
 const Proxyable = factory();
 
 // Styles
-const BaseItemGroup = mixins(Proxyable, Themeable).extend({
+const BaseItemGroup = mixins(Comparable, Proxyable, Themeable).extend({
   name: 'base-item-group',
   props: {
     activeClass: {
@@ -7839,13 +7849,13 @@ const BaseItemGroup = mixins(Proxyable, Themeable).extend({
 
     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;
@@ -7871,7 +7881,7 @@ const BaseItemGroup = mixins(Proxyable, Themeable).extend({
     },
 
     getValue(item, i) {
-      return item.value == null || item.value === '' ? i : item.value;
+      return item.value === undefined ? i : item.value;
     },
 
     onClick(item) {
@@ -8458,10 +8468,10 @@ var VMessages = mixins(Colorable, Themeable).extend({
 });
 
 // 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,
@@ -8710,10 +8720,10 @@ var Validatable = baseMixins$m.extend({
 });
 
 // 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: {
@@ -8725,6 +8735,7 @@ var VInput = baseMixins$l.extend().extend({
     dense: Boolean,
     height: [Number, String],
     hideDetails: [Boolean, String],
+    hideSpinButtons: Boolean,
     hint: String,
     id: String,
     label: String,
@@ -8754,6 +8765,7 @@ var VInput = baseMixins$l.extend().extend({
         '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
       };
     },
@@ -9061,10 +9073,10 @@ function intersectable(options) {
   });
 }
 
-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
@@ -9339,13 +9351,13 @@ var Loadable = Vue.extend().extend({
 });
 
 // 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,
@@ -9850,16 +9862,6 @@ var VTextField = baseMixins$j.extend().extend({
   }
 });
 
-var Comparable = Vue.extend({
-  name: 'comparable',
-  props: {
-    valueComparator: {
-      type: Function,
-      default: deepEqual
-    }
-  }
-});
-
 /* @vue/component */
 
 var Filterable = Vue.extend({
@@ -9881,10 +9883,10 @@ const defaultMenuProps$1 = {
   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
@@ -10081,6 +10083,14 @@ var VSelect = baseMixins$i.extend().extend({
     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) {
@@ -10140,7 +10150,12 @@ var VSelect = baseMixins$i.extend().extend({
       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);
@@ -10600,13 +10615,7 @@ var VSelect = baseMixins$i.extend().extend({
         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) {
@@ -10969,6 +10978,7 @@ var VAutocomplete = VSelect.extend({
       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;
     },
@@ -11388,7 +11398,7 @@ mixins(VSheet, Mobile, Toggleable).extend({
   },
 
   render(h) {
-    return h(VExpandTransition, [h('div', this.setBackgroundColor(this.color, {
+    const data = {
       staticClass: 'v-banner',
       attrs: this.attrs$,
       class: this.classes,
@@ -11397,7 +11407,8 @@ mixins(VSheet, Mobile, Toggleable).extend({
         name: 'show',
         value: this.isActive
       }]
-    }), [this.genWrapper()])]);
+    };
+    return h(VExpandTransition, [h('div', this.outlined ? data : this.setBackgroundColor(this.color, data), [this.genWrapper()])]);
   }
 
 });
@@ -11484,6 +11495,9 @@ mixins(applicationable('bottom', ['height', 'inputValue']), Colorable, Measurabl
     }
 
   },
+  watch: {
+    canScroll: 'onScroll'
+  },
 
   created() {
     /* istanbul ignore next */
@@ -11494,8 +11508,13 @@ mixins(applicationable('bottom', ['height', 'inputValue']), Colorable, Measurabl
 
   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() {
@@ -11809,10 +11828,10 @@ var Overlayable = Vue.extend().extend({
 });
 
 // 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
@@ -11822,10 +11841,7 @@ var VDialog = baseMixins$h.extend({
     disabled: Boolean,
     fullscreen: Boolean,
     light: Boolean,
-    maxWidth: {
-      type: [String, Number],
-      default: 'none'
-    },
+    maxWidth: [String, Number],
     noClickAnimation: Boolean,
     origin: {
       type: String,
@@ -11841,10 +11857,7 @@ var VDialog = baseMixins$h.extend({
       type: [String, Boolean],
       default: 'dialog-transition'
     },
-    width: {
-      type: [String, Number],
-      default: 'auto'
-    }
+    width: [String, Number]
   },
 
   data() {
@@ -11852,7 +11865,6 @@ var VDialog = baseMixins$h.extend({
       activatedBy: null,
       animate: false,
       animateTimeout: -1,
-      isActive: !!this.value,
       stackMinZIndex: 200,
       previousActiveElement: null
     };
@@ -12033,8 +12045,9 @@ var VDialog = baseMixins$h.extend({
       }, [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: {
@@ -12081,8 +12094,8 @@ var VDialog = baseMixins$h.extend({
 
       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)
         };
       }
 
@@ -12096,9 +12109,6 @@ var VDialog = baseMixins$h.extend({
       staticClass: 'v-dialog__container',
       class: {
         'v-dialog__container--attached': this.attach === '' || this.attach === true || this.attach === 'attach'
-      },
-      attrs: {
-        role: 'dialog'
       }
     }, [this.genActivator(), this.genContent()]);
   }
@@ -12111,10 +12121,7 @@ var VBottomSheet = VDialog.extend({
   name: 'v-bottom-sheet',
   props: {
     inset: Boolean,
-    maxWidth: {
-      type: [String, Number],
-      default: 'auto'
-    },
+    maxWidth: [String, Number],
     transition: {
       type: String,
       default: 'bottom-sheet-transition'
@@ -12355,11 +12362,16 @@ var Mouse = Vue.extend({
 
 
             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,
@@ -12369,7 +12381,7 @@ var Mouse = Vue.extend({
               }
             }
 
-            this.$emit(event, getEvent(e));
+            this.$emit(event, getEvent(e), e);
           }
 
           return eventOptions.result;
@@ -14049,9 +14061,12 @@ var CalendarWithEvents = CalendarBase.extend({
           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`,
@@ -14304,7 +14319,12 @@ var VCalendarWeekly = CalendarBase.extend({
         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,
@@ -14340,7 +14360,10 @@ var VCalendarWeekly = CalendarBase.extend({
             prevent: true,
             result: false
           }
-        }, _e => day)
+        }, nativeEvent => ({
+          nativeEvent,
+          ...day
+        }))
       }, hasMonth ? this.monthFormatter(day, this.shortMonths) + ' ' + this.dayFormatter(day, false) : this.dayFormatter(day, false));
     },
 
@@ -14613,8 +14636,11 @@ var VCalendarDaily = CalendarWithIntervals.extend({
         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)]);
     },
@@ -14659,8 +14685,11 @@ var VCalendarDaily = CalendarWithIntervals.extend({
             prevent: true,
             result: false
           }
-        }, _e => {
-          return day;
+        }, nativeEvent => {
+          return {
+            nativeEvent,
+            ...day
+          };
         })
       }, this.dayFormatter(day, false));
     },
@@ -14703,8 +14732,11 @@ var VCalendarDaily = CalendarWithIntervals.extend({
         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)]);
     },
@@ -14739,8 +14771,11 @@ var VCalendarDaily = CalendarWithIntervals.extend({
         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());
@@ -14936,7 +14971,7 @@ var VCalendarCategory = VCalendarDaily.extend({
 // Styles
 /* @vue/component */
 
-CalendarWithEvents.extend({
+var VCalendar = CalendarWithEvents.extend({
   name: 'v-calendar',
   props: { ...props.calendar,
     ...props.weeks,
@@ -15307,13 +15342,13 @@ CalendarWithEvents.extend({
         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);
           }
         }
       },
@@ -15862,8 +15897,8 @@ VWindow.extend({
 });
 
 // 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
@@ -16000,10 +16035,10 @@ var VWindowItem = baseMixins$g.extend().extend().extend({
 
 // 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: {
@@ -16339,6 +16374,13 @@ var VCheckbox = Selectable.extend({
 });
 
 // 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;
@@ -16482,7 +16524,10 @@ const BaseSlideGroup = mixins(BaseItemGroup, Mobile).extend({
     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)`;
     }
 
   },
@@ -16723,10 +16768,9 @@ const BaseSlideGroup = mixins(BaseItemGroup, Mobile).extend({
       }, this.$vuetify.rtl, this.scrollOffset);
     },
 
-    setWidths
-    /* istanbul ignore next */
-    () {
+    setWidths() {
       window.requestAnimationFrame(() => {
+        if (this._isDestroyed) return;
         const {
           content,
           wrapper
@@ -18640,7 +18684,7 @@ VAutocomplete.extend({
     },
 
     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() {
@@ -18743,12 +18787,10 @@ var VData = Vue.extend({
       default: () => ({})
     },
     sortBy: {
-      type: [String, Array],
-      default: () => []
+      type: [String, Array]
     },
     sortDesc: {
-      type: [Boolean, Array],
-      default: () => []
+      type: [Boolean, Array]
     },
     customSort: {
       type: Function,
@@ -19912,7 +19954,7 @@ var VDataTableHeaderDesktop = mixins(header).extend({
         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]));
 
@@ -20020,6 +20062,13 @@ var VDataTableHeader = Vue.extend({
 });
 
 // Types
+
+function needsTd(slot) {
+  var _slot$;
+
+  return slot.length !== 1 || !['td', 'th'].includes((_slot$ = slot[0]) == null ? void 0 : _slot$.tag);
+}
+
 var Row = Vue.extend({
   name: 'row',
   functional: true,
@@ -20040,29 +20089,29 @@ var Row = Vue.extend({
       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);
   }
@@ -20183,8 +20232,8 @@ var MobileRow = Vue.extend({
       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({
@@ -20947,8 +20996,8 @@ mixins(Returnable, Themeable).extend({
 
 });
 
-const baseMixins$e = mixins(VSimpleTable);
-baseMixins$e.extend().extend({
+const baseMixins$f = mixins(VSimpleTable);
+baseMixins$f.extend().extend({
   name: 'v-virtual-table',
   props: {
     chunkSize: {
@@ -21485,7 +21534,7 @@ var DatePickerTable = mixins(Colorable, Localable, Themeable
   },
 
   methods: {
-    genButtonClasses(isAllowed, isFloating, isSelected, isCurrent) {
+    genButtonClasses(isAllowed, isFloating, isSelected, isCurrent, isFirst, isLast) {
       return {
         'v-size--default': !isFloating,
         'v-date-picker-table__current': isCurrent,
@@ -21495,6 +21544,8 @@ var DatePickerTable = mixins(Colorable, Localable, Themeable
         '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
       };
     },
@@ -21514,9 +21565,17 @@ var DatePickerTable = mixins(Colorable, Localable, Themeable
       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'
         },
@@ -22715,10 +22774,10 @@ var VExpansionPanel = mixins(factory$1('expansionPanels', 'v-expansion-panel', '
 
 });
 
-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
@@ -22764,8 +22823,8 @@ var VExpansionPanelContent = baseMixins$d.extend().extend({
 });
 
 // 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
@@ -23925,10 +23984,10 @@ mixins(Measurable, Toggleable).extend({
 });
 
 // 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,
@@ -24205,6 +24264,8 @@ var VNavigationDrawer = baseMixins$b.extend({
 
     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')
@@ -24219,12 +24280,6 @@ var VNavigationDrawer = baseMixins$b.extend({
         on.click = () => this.$emit('update:mini-variant', false);
       }
 
-      if (this.expandOnHover) {
-        on.mouseenter = () => this.isMouseover = true;
-
-        on.mouseleave = () => this.isMouseover = false;
-      }
-
       return on;
     },
 
@@ -24287,12 +24342,12 @@ var VNavigationDrawer = baseMixins$b.extend({
      */
     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);
     }
 
   },
@@ -24310,6 +24365,338 @@ var VNavigationDrawer = baseMixins$b.extend({
 
 });
 
+// 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 */
 
@@ -24515,13 +24902,14 @@ var VPagination = mixins(Colorable, intersectable({
 
   },
 
-  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);
@@ -24773,7 +25161,7 @@ baseMixins$a.extend().extend({
 });
 
 // Styles
-const baseMixins$9 = mixins(Comparable, BaseItemGroup, VInput);
+const baseMixins$9 = mixins(BaseItemGroup, VInput);
 /* @vue/component */
 
 var VRadioGroup = baseMixins$9.extend({
@@ -25699,9 +26087,7 @@ var VSnackbar = mixins(VSheet, Colorable, Toggleable, factory$3(['absolute', 'bo
     },
 
     styles() {
-      // Styles are not needed when
-      // using the absolute prop.
-      if (this.absolute) return {};
+      if (this.absolute || !this.app) return {};
       const {
         bar,
         bottom,
@@ -25710,13 +26096,11 @@ var VSnackbar = mixins(VSheet, Colorable, Toggleable, factory$3(['absolute', 'bo
         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)
       };
     }
@@ -26592,6 +26976,12 @@ var VStepperStep = baseMixins$6.extend().extend({
       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);
@@ -26601,6 +26991,9 @@ var VStepperStep = baseMixins$6.extend().extend({
 
   render(h) {
     return h('div', {
+      attrs: {
+        tabindex: this.editable ? 0 : -1
+      },
       staticClass: 'v-stepper__step',
       class: this.classes,
       directives: [{
@@ -26608,7 +27001,8 @@ var VStepperStep = baseMixins$6.extend().extend({
         value: this.editable
       }],
       on: {
-        click: this.click
+        click: this.click,
+        keydown: this.keyboardClick
       }
     }, [this.genStep(), this.genLabel()]);
   }
@@ -27340,7 +27734,8 @@ var VTab = baseMixins$3.extend().extend().extend({
     },
 
     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);
@@ -27372,7 +27767,7 @@ var VTab = baseMixins$3.extend().extend().extend({
 
     toggle() {
       // VItemGroup treats a change event as a click
-      if (!this.isActive) {
+      if (!this.isActive || !this.tabsBar.mandatory && !this.to) {
         this.$emit('change');
       }
     }
@@ -27387,7 +27782,7 @@ var VTab = baseMixins$3.extend().extend().extend({
     data.attrs = { ...data.attrs,
       'aria-selected': String(this.isActive),
       role: 'tab',
-      tabindex: 0
+      tabindex: this.disabled ? -1 : 0
     };
     data.on = { ...data.on,
       keydown: e => {
@@ -27519,7 +27914,7 @@ var VTextarea = baseMixins$2.extend({
 });
 
 // Styles
-mixins(Themeable
+var VTimeline = mixins(Themeable
 /* @vue/component */
 ).extend({
   name: 'v-timeline',
@@ -27560,7 +27955,7 @@ mixins(Themeable
 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: {
@@ -28328,11 +28723,11 @@ var VTimePicker = mixins(Picker, PickerButton
 
 // 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: {
@@ -28348,6 +28743,10 @@ var VTooltip = mixins(Colorable, Delayable, Dependent, Menuable, Toggleable).ext
       type: Boolean,
       default: true
     },
+    openOnFocus: {
+      type: Boolean,
+      default: true
+    },
     tag: {
       type: String,
       default: 'span'
@@ -28427,7 +28826,6 @@ var VTooltip = mixins(Colorable, Delayable, Dependent, Menuable, Toggleable).ext
         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
       };
@@ -28463,15 +28861,17 @@ var VTooltip = mixins(Colorable, Delayable, Dependent, Menuable, Toggleable).ext
     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) {
@@ -28541,6 +28941,7 @@ const VTreeviewNodeProps = {
     type: String,
     default: 'primary'
   },
+  disablePerNode: Boolean,
   expandIcon: {
     type: String,
     default: '$subgroup'
@@ -28621,7 +29022,7 @@ const VTreeviewNode = baseMixins.extend().extend({
   }),
   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() {
@@ -28805,6 +29206,7 @@ const VTreeviewNode = baseMixins.extend().extend({
           selectable: this.selectable,
           selectedColor: this.selectedColor,
           color: this.color,
+          disablePerNode: this.disablePerNode,
           expandIcon: this.expandIcon,
           indeterminateIcon: this.indeterminateIcon,
           offIcon: this.offIcon,
@@ -28907,6 +29309,7 @@ mixins(provide('treeview'), Themeable
       default: () => []
     },
     dense: Boolean,
+    disabled: Boolean,
     filter: Function,
     hoverable: Boolean,
     items: {
@@ -29257,7 +29660,7 @@ mixins(provide('treeview'), Themeable
       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
@@ -29989,7 +30392,12 @@ var __vue_render__$1m = function () {
           },
         ],
         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,
@@ -29998,6 +30406,13 @@ var __vue_render__$1m = function () {
           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(" "),
@@ -30028,7 +30443,7 @@ __vue_render__$1m._withStripped = true;
   /* 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 */
@@ -31530,8 +31945,10 @@ let ZdInput = class ZdInput extends ZdComponentRender$1 {
     }
     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);
@@ -33919,7 +34336,6 @@ let ZdDate = class ZdDate extends __vue_component__$18 {
     }
     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') {
@@ -33976,6 +34392,18 @@ let ZdDate = class ZdDate extends __vue_component__$18 {
     get getDateMask() {
         return this.instance.updateMask();
     }
+    helperValuesOptionClick({ component }) {
+        const helper = component.name.split('_helpervalue_')[1];
+        const value = 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 DateHelper.getLabel(name);
+    }
 };
 __decorate([
     PropWatch({
@@ -34056,6 +34484,14 @@ __decorate([
     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([
     Component
 ], ZdDate);
@@ -34070,104 +34506,154 @@ var __vue_render__$14 = function () {
   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
   )
@@ -34178,7 +34664,7 @@ __vue_render__$14._withStripped = true;
   /* 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 */
@@ -34325,6 +34811,18 @@ let ZdDateRange = class ZdDateRange extends __vue_component__$18 {
     get getDateMask() {
         return this.instance.updateMask();
     }
+    helperValuesOptionClick({ component }) {
+        const helper = component.name.split('_helpervalue_')[1];
+        const value = 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 DateHelper.getLabel(name);
+    }
 };
 __decorate([
     PropWatch({ type: String, default: 'calendar' }),
@@ -34402,6 +34900,14 @@ __decorate([
     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([
     Component
 ], ZdDateRange);
@@ -34416,102 +34922,153 @@ var __vue_render__$13 = function () {
   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
   )
@@ -34522,7 +35079,7 @@ __vue_render__$13._withStripped = true;
   /* 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 */
@@ -40221,7 +40778,7 @@ let ZdSelect = class ZdSelect extends __vue_component__$18 {
                 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)
@@ -40289,7 +40846,7 @@ let ZdSelect = class ZdSelect extends __vue_component__$18 {
         if (!this.componentRef || !this.componentRef.updateMenuDimensions)
             return;
         // Update menu position
-        this.componentRef.updateMenuDimensions();
+        this.$nextTick(this.componentRef.updateMenuDimensions);
     }
 };
 __decorate([
@@ -40610,14 +41167,6 @@ var __vue_render__$K = function () {
                     _c(
                       "div",
                       {
-                        directives: [
-                          {
-                            name: "show",
-                            rawName: "v-show",
-                            value: _vm.instance.showLoadMore(),
-                            expression: "instance.showLoadMore()",
-                          },
-                        ],
                         staticClass: "zd-select-append-item",
                         on: {
                           mousedown: function ($event) {
@@ -40665,7 +41214,7 @@ __vue_render__$K._withStripped = true;
   /* 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 */
@@ -42158,10 +42707,7 @@ let ZdMenu = class ZdMenu extends ZdComponentRender$1 {
         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;
@@ -42414,11 +42960,13 @@ var __vue_render__$z = function () {
                 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,
@@ -42521,7 +43069,7 @@ __vue_render__$z._withStripped = true;
   /* 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 */
@@ -44462,56 +45010,63 @@ let ZdSelectMultiple = class ZdSelectMultiple extends __vue_component__$K {
     constructor() {
         super(...arguments);
         this.instanceType = 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;
@@ -44520,9 +45075,16 @@ let ZdSelectMultiple = class ZdSelectMultiple extends __vue_component__$K {
                 }
                 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;
@@ -44552,7 +45114,7 @@ let ZdSelectMultiple = class ZdSelectMultiple extends __vue_component__$K {
         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; });
     }
     /**
@@ -44572,20 +45134,18 @@ let ZdSelectMultiple = class ZdSelectMultiple extends __vue_component__$K {
     }
     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;
@@ -44594,19 +45154,36 @@ let ZdSelectMultiple = class ZdSelectMultiple extends __vue_component__$K {
     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(() => {
@@ -44657,6 +45234,16 @@ __decorate([
     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([
+    Watch('instance.value'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], ZdSelectMultiple.prototype, "onValueChange", null);
 ZdSelectMultiple = __decorate([
     Component$2
 ], ZdSelectMultiple);
@@ -44698,7 +45285,6 @@ var __vue_render__$k = function () {
           ),
         "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,
       },
@@ -44710,7 +45296,6 @@ var __vue_render__$k = function () {
       id: _vm.instance.name,
       "return-object": "",
       "validate-on-blur": "",
-      "no-filter": "",
       multiple: "",
       name: _vm.instance.name,
       loading: _vm.instance.datasource.loading,
@@ -44747,6 +45332,7 @@ var __vue_render__$k = function () {
         fixed: true,
         "max-width": _vm.parentWidth,
         closeOnContentClick: false,
+        maxHeight: _vm.instance.menuMaxHeight,
       },
       "search-input": _vm.instance.search,
       "append-icon": _vm.$getIcon(_vm.instance.appendIcon),
@@ -44926,7 +45512,9 @@ var __vue_render__$k = function () {
           key: "selection",
           fn: function (props) {
             return [
-              !_vm.oneLineMode || props.index <= _vm.lastDisplayedChip
+              _vm.expandedMode ||
+              !_vm.hasHiddenRows ||
+              props.index <= _vm.lastDisplayedChip
                 ? _c(
                     "v-chip",
                     {
@@ -44950,7 +45538,9 @@ var __vue_render__$k = function () {
                   )
                 : _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)),
                   ])
@@ -45018,14 +45608,6 @@ var __vue_render__$k = function () {
                     _c(
                       "div",
                       {
-                        directives: [
-                          {
-                            name: "show",
-                            rawName: "v-show",
-                            value: _vm.instance.showLoadMore(),
-                            expression: "instance.showLoadMore()",
-                          },
-                        ],
                         staticClass: "zd-select-append-item",
                         on: {
                           mousedown: function ($event) {
@@ -45073,7 +45655,7 @@ __vue_render__$k._withStripped = true;
   /* 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 */
@@ -46768,8 +47350,10 @@ var __vue_render__$c = function () {
                       {
                         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,
@@ -46801,11 +47385,11 @@ __vue_render__$c._withStripped = true;
   /* 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 */
@@ -48022,26 +48606,30 @@ __vue_render__$5._withStripped = true;
 let ZdTreeCheckbox = class ZdTreeCheckbox extends Vue {
     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);
         });
@@ -48055,6 +48643,10 @@ __decorate([
     Prop({ type: [Object], default: () => [] }),
     __metadata("design:type", Object)
 ], ZdTreeCheckbox.prototype, "node", void 0);
+__decorate([
+    Prop({ type: [String], default: 'checked' }),
+    __metadata("design:type", String)
+], ZdTreeCheckbox.prototype, "checkedField", void 0);
 __decorate([
     Watch('childrenCheck'),
     __metadata("design:type", Function),
@@ -48082,7 +48674,7 @@ var __vue_render__$4 = function () {
       "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: {
@@ -48091,11 +48683,11 @@ var __vue_render__$4 = function () {
       },
     },
     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]",
     },
   })
 };
@@ -48105,7 +48697,7 @@ __vue_render__$4._withStripped = true;
   /* 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 */
@@ -48227,26 +48819,8 @@ let ZdTree = class ZdTree extends ZdComponentRender$1 {
     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();
@@ -48376,6 +48950,10 @@ __decorate([
     Prop({ type: String, default: '' }),
     __metadata("design:type", String)
 ], ZdTree.prototype, "dataField", void 0);
+__decorate([
+    Prop({ type: String, default: 'checked' }),
+    __metadata("design:type", String)
+], ZdTree.prototype, "checkedField", void 0);
 __decorate([
     Prop({ type: [Boolean, String], default: false }),
     __metadata("design:type", Boolean)
@@ -48390,12 +48968,6 @@ __decorate([
     __metadata("design:paramtypes", []),
     __metadata("design:returntype", void 0)
 ], ZdTree.prototype, "dataChange", null);
-__decorate([
-    Watch('instance.nodes', { deep: true }),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", []),
-    __metadata("design:returntype", void 0)
-], ZdTree.prototype, "nodeChange", null);
 ZdTree = __decorate([
     Component({
         components: { ZdTreeCheckbox: __vue_component__$4, ZdTreeAfterTitle: __vue_component__$3 },
@@ -48485,7 +49057,10 @@ var __vue_render__$2 = function () {
                 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)
@@ -48687,7 +49262,7 @@ __vue_render__$2._withStripped = true;
   /* 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 */
@@ -50950,6 +51525,7 @@ const Zeedhi = {
                 VBreadcrumbs,
                 VBtn,
                 VBtnToggle,
+                VCalendar,
                 VCard,
                 VCardActions,
                 VCardText,
@@ -50985,6 +51561,7 @@ const Zeedhi = {
                 VMenu,
                 VNavigationDrawer,
                 VOverlay,
+                VOtpInput,
                 VPagination,
                 VProgressCircular,
                 VProgressLinear,
@@ -51014,8 +51591,12 @@ const Zeedhi = {
                 VTabsItems,
                 VTextarea,
                 VTextField,
+                VTimeline,
+                VTimelineItem,
                 VTimePicker,
                 VTooltip,
+                VToolbar,
+                VToolbarItems,
                 VSimpleCheckbox,
             },
         });