@zeedhi/vuetify 1.118.1 → 1.119.0

package/dist/zd-vuetify.esm.js

@@ -38664,14 +38664,15 @@ class IconRenderer {
 }
 IconRenderer.icons = {};
 
-function setFillHeight(element) {
+function setFillHeight(element, fillHeight = false) {
     const parent = element.parentElement;
     if (parent) {
         parent.style.display = 'flex';
         parent.style.flexFlow = 'column';
         Array.from(parent.children).forEach((child) => {
             if (child === element) {
-                child.style.flex = '1 1 auto';
+                const flexBasis = typeof fillHeight === 'string' ? fillHeight : '0';
+                child.style.flex = `1 1 ${flexBasis}`;
                 child.style.overflowY = 'auto';
             }
             else {
@@ -38679,7 +38680,17 @@ function setFillHeight(element) {
             }
         });
     }
-}
+}
+let FillHeightMixin = class FillHeightMixin extends Vue {
+    mounted() {
+        if (!this.instance.fillHeight)
+            return;
+        setFillHeight(this.$el, this.instance.fillHeight);
+    }
+};
+FillHeightMixin = __decorate([
+    Component
+], FillHeightMixin);
 
 /**
  * ApexChart component
@@ -38696,9 +38707,6 @@ let ZdApexChart = class ZdApexChart extends ZdComponentRender$1 {
         const updateFn = this.updateChart;
         this.instance.setViewUpdate(updateFn);
         this.instance.setViewGetIconHTML((icon) => IconRenderer.getIcon(icon, this.$root.$options.vuetify));
-        if (this.instance.fillHeight) {
-            setFillHeight(this.$el);
-        }
         this.defaultOptions = Object.assign({}, this.$refs.instance.chart.w.config);
         this.breakpoints = ((_b = (_a = this.instance.options) === null || _a === void 0 ? void 0 : _a.parentResponsive) === null || _b === void 0 ? void 0 : _b.sort((a, b) => a.breakpoint - b.breakpoint)) || [];
         this.apexChartContainer = this.$refs.chartContainer;
@@ -38801,7 +38809,9 @@ __decorate([
     __metadata("design:type", String)
 ], ZdApexChart.prototype, "loadColor", void 0);
 ZdApexChart = __decorate([
-    Component$1
+    Component$1({
+        mixins: [FillHeightMixin],
+    })
 ], ZdApexChart);
 var script$1p = ZdApexChart;
 
@@ -39625,11 +39635,6 @@ let ZdCard = class ZdCard extends ZdComponentRender$1 {
         super(...arguments);
         this.instanceType = Card;
     }
-    mounted() {
-        if (this.instance.fillHeight) {
-            setFillHeight(this.$el);
-        }
-    }
 };
 __decorate([
     PropWatch({ type: String, default: '' }),
@@ -39720,7 +39725,9 @@ __decorate([
     __metadata("design:type", String)
 ], ZdCard.prototype, "to", void 0);
 ZdCard = __decorate([
-    Component$1
+    Component$1({
+        mixins: [FillHeightMixin],
+    })
 ], ZdCard);
 var script$1l = ZdCard;
 
@@ -39866,9 +39873,6 @@ let ZdCarousel = class ZdCarousel extends ZdComponentRender$1 {
             }, 200);
         }
         Metadata.setEnabledConsole(true);
-        if (this.instance.fillHeight) {
-            setFillHeight(this.$el);
-        }
         if (this.carousel) {
             this.setViewUpdate();
             this.addResizeObserver();
@@ -40086,7 +40090,9 @@ __decorate([
     __metadata("design:returntype", void 0)
 ], ZdCarousel.prototype, "changeIsVisible", null);
 ZdCarousel = __decorate([
-    Component$1
+    Component$1({
+        mixins: [FillHeightMixin],
+    })
 ], ZdCarousel);
 var script$1k = ZdCarousel;
 
@@ -40409,7 +40415,7 @@ __vue_render__$1u._withStripped = true;
   /* style */
   const __vue_inject_styles__$1u = function (inject) {
     if (!inject) return
-    inject("data-v-302f5b51_0", { source: ".zd-carousel {\n  height: 100%;\n}\n.zd-carousel section.hooper {\n  outline: none;\n}\n.zd-carousel section.hooper * {\n  outline: none;\n}\n.zd-carousel section.hooper .hooper-list .hooper-slide {\n  align-self: center;\n}\n.zd-carousel section.hooper .hooper-list .hooper-slide > .row {\n  height: 100%;\n  align-items: center;\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination {\n  padding: 0;\n  width: 100%;\n  height: 50px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination .hooper-indicators {\n  margin: 0 auto;\n  display: block;\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination .hooper-indicators li {\n  display: inline-block;\n  margin: 0 var(--spacing-2);\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination .hooper-indicators li .hooper-indicator {\n  width: 18px;\n  height: 18px;\n  border-radius: 50%;\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination.show-background {\n  background: rgba(0, 0, 0, 0.3);\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination.theme--light .hooper-indicator {\n  opacity: 0.25;\n  background-color: black;\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination.theme--light .hooper-indicator.is-active {\n  opacity: 0.6;\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination.theme--light .hooper-indicator:hover:not(.is-active) {\n  opacity: 0.4;\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination.theme--dark {\n  color: white;\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination.theme--dark .hooper-indicator {\n  opacity: 0.5;\n  background-color: white;\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination.theme--dark .hooper-indicator.is-active {\n  opacity: 0.8;\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination.theme--dark .hooper-indicator:hover:not(.is-active) {\n  opacity: 0.6;\n}\n.zd-carousel section.hooper .hooper-list button.hooper-prev {\n  padding: 0;\n}\n.zd-carousel section.hooper .hooper-list button.hooper-next {\n  padding: 0;\n}\n.zd-carousel section.hooper .hooper-list .prev-button, .zd-carousel section.hooper .hooper-list .next-button {\n  transition: 0.1s;\n}\n.zd-carousel section.hooper .hooper-list ul.hooper-track, .zd-carousel section.hooper .hooper-list ol.hooper-indicators {\n  padding-left: 0;\n}\n.zd-carousel section.hooper .hooper-list .hooper-progress-inner {\n  background-color: var(--v-primary-base);\n}\n.zd-carousel.buttons-outside section.hooper {\n  width: calc(100% - 2 * var(--spacing-8));\n  margin-left: var(--spacing-8);\n}\n.zd-carousel.buttons-outside section.hooper .hooper-list .hooper-navigation button.hooper-prev {\n  left: calc(-1 * var(--spacing-8));\n}\n.zd-carousel.buttons-outside section.hooper .hooper-list .hooper-navigation button.hooper-next {\n  right: calc(-1 * var(--spacing-8));\n}", map: undefined, media: undefined });
+    inject("data-v-544481c8_0", { source: ".zd-carousel {\n  height: 100%;\n  width: 100%;\n}\n.zd-carousel section.hooper {\n  outline: none;\n}\n.zd-carousel section.hooper * {\n  outline: none;\n}\n.zd-carousel section.hooper .hooper-list .hooper-slide {\n  align-self: center;\n}\n.zd-carousel section.hooper .hooper-list .hooper-slide > .row {\n  height: 100%;\n  align-items: center;\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination {\n  padding: 0;\n  width: 100%;\n  height: 50px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination .hooper-indicators {\n  margin: 0 auto;\n  display: block;\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination .hooper-indicators li {\n  display: inline-block;\n  margin: 0 var(--spacing-2);\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination .hooper-indicators li .hooper-indicator {\n  width: 18px;\n  height: 18px;\n  border-radius: 50%;\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination.show-background {\n  background: rgba(0, 0, 0, 0.3);\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination.theme--light .hooper-indicator {\n  opacity: 0.25;\n  background-color: black;\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination.theme--light .hooper-indicator.is-active {\n  opacity: 0.6;\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination.theme--light .hooper-indicator:hover:not(.is-active) {\n  opacity: 0.4;\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination.theme--dark {\n  color: white;\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination.theme--dark .hooper-indicator {\n  opacity: 0.5;\n  background-color: white;\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination.theme--dark .hooper-indicator.is-active {\n  opacity: 0.8;\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination.theme--dark .hooper-indicator:hover:not(.is-active) {\n  opacity: 0.6;\n}\n.zd-carousel section.hooper .hooper-list button.hooper-prev {\n  padding: 0;\n}\n.zd-carousel section.hooper .hooper-list button.hooper-next {\n  padding: 0;\n}\n.zd-carousel section.hooper .hooper-list .prev-button, .zd-carousel section.hooper .hooper-list .next-button {\n  transition: 0.1s;\n}\n.zd-carousel section.hooper .hooper-list ul.hooper-track, .zd-carousel section.hooper .hooper-list ol.hooper-indicators {\n  padding-left: 0;\n}\n.zd-carousel section.hooper .hooper-list .hooper-progress-inner {\n  background-color: var(--v-primary-base);\n}\n.zd-carousel.buttons-outside section.hooper {\n  width: calc(100% - 2 * var(--spacing-8));\n  margin-left: var(--spacing-8);\n}\n.zd-carousel.buttons-outside section.hooper .hooper-list .hooper-navigation button.hooper-prev {\n  left: calc(-1 * var(--spacing-8));\n}\n.zd-carousel.buttons-outside section.hooper .hooper-list .hooper-navigation button.hooper-next {\n  right: calc(-1 * var(--spacing-8));\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
@@ -41190,11 +41196,6 @@ let ZdCodeEditor = class ZdCodeEditor extends ZdComponentRender$1 {
     created() {
         this.instance.setViewHighlight(this.highlight);
     }
-    mounted() {
-        if (this.instance.fillHeight) {
-            setFillHeight(this.$el);
-        }
-    }
     highlight(code, language) {
         return Prism$1.highlight(code, Prism$1.languages[this.language], language);
     }
@@ -41244,7 +41245,9 @@ __decorate([
     __metadata("design:type", Object)
 ], ZdCodeEditor.prototype, "staticCode", void 0);
 ZdCodeEditor = __decorate([
-    Component$1
+    Component$1({
+        mixins: [FillHeightMixin],
+    })
 ], ZdCodeEditor);
 var script$1g = ZdCodeEditor;
 
@@ -41434,11 +41437,6 @@ let ZdCol = class ZdCol extends ZdComponentRender$1 {
         super(...arguments);
         this.instanceType = Col;
     }
-    mounted() {
-        if (this.instance.fillHeight) {
-            setFillHeight(this.$el);
-        }
-    }
 };
 __decorate([
     PropWatch({ type: [String, Number], default: '12' }),
@@ -41481,7 +41479,9 @@ __decorate([
     __metadata("design:type", Object)
 ], ZdCol.prototype, "fillHeight", void 0);
 ZdCol = __decorate([
-    Component$1
+    Component$1({
+        mixins: [FillHeightMixin],
+    })
 ], ZdCol);
 var script$1f = ZdCol;
 
@@ -41900,11 +41900,6 @@ let ZdContainer = class ZdContainer extends ZdComponentRender$1 {
         super(...arguments);
         this.instanceType = Container;
     }
-    mounted() {
-        if (this.instance.fillHeight) {
-            setFillHeight(this.$el);
-        }
-    }
 };
 __decorate([
     PropWatch({ type: [Boolean, String], default: true }),
@@ -41943,7 +41938,9 @@ __decorate([
     __metadata("design:type", Object)
 ], ZdContainer.prototype, "maxWidth", void 0);
 ZdContainer = __decorate([
-    Component$1
+    Component$1({
+        mixins: [FillHeightMixin],
+    })
 ], ZdContainer);
 var script$1d = ZdContainer;
 
@@ -42680,9 +42677,6 @@ let ZdDashboard = class ZdDashboard extends ZdComponentRender$1 {
                 forceFallback: true,
             });
         }
-        if (this.instance.fillHeight) {
-            setFillHeight(this.$el);
-        }
     }
     setData(event) {
         const card = event.item.querySelector('.dashboard-div-card');
@@ -42836,7 +42830,9 @@ __decorate([
     __metadata("design:type", Object)
 ], ZdDashboard.prototype, "editHeader", void 0);
 ZdDashboard = __decorate([
-    Component$1
+    Component$1({
+        mixins: [FillHeightMixin],
+    })
 ], ZdDashboard);
 var script$1b = ZdDashboard;
 
@@ -43741,6 +43737,21 @@ let ZdDateRange = class ZdDateRange extends __vue_component__$1m {
         const picker = this.$refs.picker.$el;
         picker.removeEventListener('mousedown', this.onPickerMousedown);
     }
+    getAllowedDates(date) {
+        // parsedDate vem no formato 'MM-DD-YYYY' (mês-dia-ano) — index 1 é o DIA
+        const parsedDate = this.instance.parseISODateRangeValue([date])[0];
+        const allowed = this.instance.allowedDates;
+        let result = true;
+        if (typeof allowed === 'function') {
+            result = allowed(parsedDate);
+            return result;
+        }
+        if (!allowed)
+            return true;
+        const allowedArray = Array.isArray(allowed) ? allowed : [allowed];
+        result = allowedArray.includes(parsedDate);
+        return result;
+    }
     toMask(format) {
         return format.replace(/[A-Za-z]/gi, '#').split('').map((char) => (char === '#' ? /\d/ : char));
     }
@@ -43772,6 +43783,13 @@ let ZdDateRange = class ZdDateRange extends __vue_component__$1m {
         return (dateSize * 2) + splitter;
     }
 };
+__decorate([
+    PropWatch({
+        type: [Function, Array, String],
+        default: undefined,
+    }),
+    __metadata("design:type", Object)
+], ZdDateRange.prototype, "allowedDates", void 0);
 __decorate([
     PropWatch({ type: String, default: 'calendar' }),
     __metadata("design:type", String)
@@ -43981,7 +43999,11 @@ var __vue_render__$1h = function () {
                           },
                         ],
                         ref: "picker",
-                        attrs: { "no-title": !_vm.$isMobile(), range: "" },
+                        attrs: {
+                          "no-title": !_vm.$isMobile(),
+                          range: "",
+                          "allowed-dates": _vm.getAllowedDates,
+                        },
                         on: {
                           "hook:mounted": _vm.pickerMounted,
                           "hook:destroyed": _vm.pickerDestroyed,
@@ -44138,7 +44160,7 @@ __vue_render__$1h._withStripped = true;
   /* style */
   const __vue_inject_styles__$1h = function (inject) {
     if (!inject) return
-    inject("data-v-4cb24b3d_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 });
+    inject("data-v-68640a11_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 */
@@ -45531,9 +45553,6 @@ let ZdForm = class ZdForm extends ZdComponentRender$1 {
             this.instance.setViewValidate(this.form.validate);
             this.instance.setViewResetValidation(this.form.resetValidation);
         }
-        if (this.instance.fillHeight) {
-            setFillHeight(this.$el);
-        }
     }
     submit(event) {
         var _a;
@@ -45599,7 +45618,9 @@ __decorate([
     __metadata("design:type", Object)
 ], ZdForm.prototype, "value", void 0);
 ZdForm = __decorate([
-    Component$1
+    Component$1({
+        mixins: [FillHeightMixin],
+    })
 ], ZdForm);
 var script$14 = ZdForm;
 
@@ -45756,11 +45777,6 @@ let ZdFrame = class ZdFrame extends ZdComponentRender$1 {
         super(...arguments);
         this.instanceType = Frame;
     }
-    mounted() {
-        if (this.instance.fillHeight) {
-            setFillHeight(this.$el);
-        }
-    }
 };
 __decorate([
     PropWatch({ type: String, default: '' }),
@@ -45827,7 +45843,9 @@ __decorate([
     __metadata("design:type", Object)
 ], ZdFrame.prototype, "fillHeight", void 0);
 ZdFrame = __decorate([
-    Component$1
+    Component$1({
+        mixins: [FillHeightMixin],
+    })
 ], ZdFrame);
 var script$13 = ZdFrame;
 
@@ -46188,9 +46206,6 @@ let ZdGrid = class ZdGrid extends ZdIterable$1 {
         }
         this.setViewGetWidth();
         this.updateFixedColumns();
-        if (this.instance.fillHeight) {
-            setFillHeight(this.$el);
-        }
         this.registerTrObserver();
     }
     /**
@@ -46848,7 +46863,7 @@ __decorate([
 ], ZdGrid.prototype, "changeLoading", null);
 ZdGrid = __decorate([
     Component({
-        mixins: [NavigableTableMixin$1],
+        mixins: [NavigableTableMixin$1, FillHeightMixin],
     })
 ], ZdGrid);
 var ZdGrid$1 = ZdGrid;
@@ -51369,11 +51384,6 @@ let ZdImage = class ZdImage extends ZdComponentRender$1 {
         super(...arguments);
         this.instanceType = Image$1;
     }
-    mounted() {
-        if (this.instance.fillHeight) {
-            setFillHeight(this.$el);
-        }
-    }
     load(event) {
         this.instance.load(event, this.$el);
     }
@@ -51427,7 +51437,9 @@ __decorate([
     __metadata("design:type", Object)
 ], ZdImage.prototype, "fillHeight", void 0);
 ZdImage = __decorate([
-    Component$1
+    Component$1({
+        mixins: [FillHeightMixin],
+    })
 ], ZdImage);
 var script$L = ZdImage;
 
@@ -51738,11 +51750,6 @@ let ZdIterableComponentRender = class ZdIterableComponentRender extends ZdIterab
         super(...arguments);
         this.instanceType = IterableComponentRender;
     }
-    mounted() {
-        if (this.instance.fillHeight) {
-            setFillHeight(this.$el);
-        }
-    }
 };
 __decorate([
     Prop({
@@ -51839,7 +51846,9 @@ __decorate([
     __metadata("design:type", Object)
 ], ZdIterableComponentRender.prototype, "showLoading", void 0);
 ZdIterableComponentRender = __decorate([
-    Component$1
+    Component$1({
+        mixins: [FillHeightMixin],
+    })
 ], ZdIterableComponentRender);
 var script$J = ZdIterableComponentRender;
 
@@ -53441,11 +53450,6 @@ let ZdList = class ZdList extends ZdComponentRender$1 {
         super(...arguments);
         this.instanceType = List;
     }
-    mounted() {
-        if (this.instance.fillHeight) {
-            setFillHeight(this.$el);
-        }
-    }
     isLastItem(index) {
         return index + 1 === this.instance.items.length;
     }
@@ -53515,7 +53519,9 @@ __decorate([
     __metadata("design:type", Array)
 ], ZdList.prototype, "items", void 0);
 ZdList = __decorate([
-    Component$1
+    Component$1({
+        mixins: [FillHeightMixin],
+    })
 ], ZdList);
 var ZdList$1 = ZdList;
 
@@ -54663,11 +54669,6 @@ let ZdMasterDetail = class ZdMasterDetail extends ZdComponentRender$1 {
         super(...arguments);
         this.instanceType = MasterDetail;
     }
-    mounted() {
-        if (this.instance.fillHeight) {
-            setFillHeight(this.$el);
-        }
-    }
 };
 __decorate([
     Prop({ type: [Object, String], default: () => ({}) }),
@@ -54694,7 +54695,9 @@ __decorate([
     __metadata("design:type", Object)
 ], ZdMasterDetail.prototype, "fillHeight", void 0);
 ZdMasterDetail = __decorate([
-    Component$1
+    Component$1({
+        mixins: [FillHeightMixin],
+    })
 ], ZdMasterDetail);
 var script$x = ZdMasterDetail;
 
@@ -56960,11 +56963,6 @@ let ZdRow = class ZdRow extends ZdComponentRender$1 {
         super(...arguments);
         this.instanceType = Row$1;
     }
-    mounted() {
-        if (this.instance.fillHeight) {
-            setFillHeight(this.$el);
-        }
-    }
 };
 __decorate([
     PropWatch({ type: String }),
@@ -56999,7 +56997,9 @@ __decorate([
     __metadata("design:type", Object)
 ], ZdRow.prototype, "fillHeight", void 0);
 ZdRow = __decorate([
-    Component$1
+    Component$1({
+        mixins: [FillHeightMixin],
+    })
 ], ZdRow);
 var script$k = ZdRow;
 
@@ -57295,7 +57295,7 @@ __vue_render__$m._withStripped = true;
   /* style */
   const __vue_inject_styles__$m = function (inject) {
     if (!inject) return
-    inject("data-v-7cfb4ced_0", { source: ".zd-search {\n  width: 100%;\n}\n.zd-search.show-search-field.zd-input.v-input.zd-no-helper > .v-input__control > .v-text-field__details {\n  display: flex;\n}\n.zd-search.show-search-field .v-input__append-inner .v-input__icon--append .v-icon {\n  background-color: var(--v-primary-base) !important;\n  color: white !important;\n  border-radius: 3px !important;\n  height: var(--icon-size);\n  width: var(--icon-size);\n  margin-right: 8px !important;\n}\n.zd-search.show-search-field.zd-dense .v-input__append-inner .v-input__icon--append .v-icon {\n  margin-right: 2px !important;\n  height: var(--icon-size-small);\n  width: var(--icon-size-small);\n}\n.zd-search-buttons {\n  display: block;\n  width: 100%;\n  justify-content: left;\n}", map: undefined, media: undefined });
+    inject("data-v-0794902d_0", { source: ".zd-search {\n  width: 100%;\n}\n.zd-search.show-search-field.zd-input.v-input.zd-no-helper > .v-input__control > .v-text-field__details {\n  display: flex;\n}\n.zd-search.show-search-field .v-input__append-inner .v-input__icon--append .v-icon {\n  background-color: var(--v-primary-base) !important;\n  color: white !important;\n  border-radius: 3px !important;\n  height: var(--icon-size);\n  width: var(--icon-size);\n  margin-right: 8px !important;\n}\n.zd-search.show-search-field.zd-dense .v-input__append-inner .v-input__icon--append .v-icon {\n  margin-right: 2px !important;\n  height: var(--icon-size-small);\n  width: var(--icon-size-small);\n}\n.zd-search-buttons {\n  display: block;\n  width: 100%;\n  justify-content: left;\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
@@ -57334,11 +57334,6 @@ let ZdSelectableList = class ZdSelectableList extends ZdList$1 {
     change() {
         this.instance.change(undefined, this.$el);
     }
-    mounted() {
-        if (this.instance.fillHeight) {
-            setFillHeight(this.$el);
-        }
-    }
 };
 __decorate([
     PropWatch({ type: [String], default: '' }),
@@ -57389,7 +57384,9 @@ __decorate([
     __metadata("design:type", Object)
 ], ZdSelectableList.prototype, "fillHeight", void 0);
 ZdSelectableList = __decorate([
-    Component$1
+    Component$1({
+        mixins: [FillHeightMixin],
+    })
 ], ZdSelectableList);
 var script$i = ZdSelectableList;
 
@@ -57639,11 +57636,9 @@ let ZdSelectMultiple = class ZdSelectMultiple extends __vue_component__$K {
         return chips;
     }
     toggle() {
-        const { input, menu } = this.componentRef.$refs;
-        input.focus();
-        menu.isActive = !this.instance.readonly && !this.instance.disabled && !menu.isActive;
+        this.superMethods(__vue_component__$K).toggle.call(this);
+        const { menu } = this.componentRef.$refs;
         this.rows = menu.isActive ? this.maxRowsNumber : 1;
-        this.$nextTick(() => { this.componentRef.isFocused = true; });
     }
     /**
      * Removes first item if it's text is overflowing out of parent
@@ -60139,11 +60134,6 @@ let ZdTable = class ZdTable extends ZdIterable$1 {
         super(...arguments);
         this.instanceType = Table;
     }
-    mounted() {
-        if (this.instance.fillHeight) {
-            setFillHeight(this.$el);
-        }
-    }
 };
 __decorate([
     Prop({ type: Object, default: () => ({}) }),
@@ -60174,7 +60164,9 @@ __decorate([
     __metadata("design:type", Object)
 ], ZdTable.prototype, "fillHeight", void 0);
 ZdTable = __decorate([
-    Component$1
+    Component$1({
+        mixins: [FillHeightMixin],
+    })
 ], ZdTable);
 var script$b = ZdTable;
 
@@ -60363,9 +60355,6 @@ let ZdTabs = class ZdTabs extends ZdComponentRender$1 {
         this.instance.beforeChange(event, index, this.$el);
     }
     mounted() {
-        if (this.instance.fillHeight) {
-            setFillHeight(this.$el);
-        }
         I18n.registerChangeListener(() => {
             this.$nextTick(() => {
                 var _a;
@@ -60403,7 +60392,9 @@ __decorate([
     __metadata("design:type", Array)
 ], ZdTabs.prototype, "tabs", void 0);
 ZdTabs = __decorate([
-    Component$1
+    Component$1({
+        mixins: [FillHeightMixin],
+    })
 ], ZdTabs);
 var script$a = ZdTabs;
 
@@ -61117,7 +61108,6 @@ let ZdTextarea = class ZdTextarea extends ZdTextInput$1 {
     mounted() {
         this.setPlaceholder('textarea');
         if (this.instance.fillHeight) {
-            setFillHeight(this.$el);
             if (this.$el.parentElement && this.instance.cssClass.indexOf('zd-form-child') !== -1) {
                 setFillHeight(this.$el.parentElement);
             }
@@ -61187,7 +61177,9 @@ __decorate([
     __metadata("design:type", Object)
 ], ZdTextarea.prototype, "fillHeight", void 0);
 ZdTextarea = __decorate([
-    Component$1
+    Component$1({
+        mixins: [FillHeightMixin],
+    })
 ], ZdTextarea);
 var script$5 = ZdTextarea;
 
@@ -62204,11 +62196,8 @@ let ZdTree = class ZdTree extends ZdComponentRender$1 {
     mounted() {
         this.instance.setTree(this.$refs.tree);
         this.setAfterTitleMargin();
-        this.nodeChange();
-        this.$watch('$refs.tree.nodes', this.nodeChange, { deep: true });
-        if (this.instance.fillHeight) {
-            setFillHeight(this.$el);
-        }
+        this.nodeChange(); // This needs to be after the tree is set
+        this.$watch('$refs.tree.nodes', this.nodeChange, { deep: true }); // This needs to be after the tree is set
     }
     dataChange() {
         this.instance.createNodesFromDatasource();
@@ -62390,7 +62379,10 @@ __decorate([
 ], ZdTree.prototype, "dataChange", null);
 ZdTree = __decorate([
     Component$1({
-        components: { ZdTreeCheckbox: __vue_component__$4, ZdTreeAfterTitle: __vue_component__$3 },
+        mixins: [FillHeightMixin],
+        components: {
+            ZdTreeCheckbox: __vue_component__$4, ZdTreeAfterTitle: __vue_component__$3,
+        },
     })
 ], ZdTree);
 var script$1 = ZdTree;
@@ -64948,4 +64940,4 @@ const Zeedhi = {
 const packageContent = require('../package.json');
 VersionService.addPackageVersion(packageContent.name, packageContent.version);
 
-export { EditableMixin$1 as EditableMixin, IconRenderer, NavigableTableMixin$1 as NavigableTableMixin, PropWatch, ThemeColor, Themeable, Vuetify, script$1q as ZdAlert, script$1p as ZdApexChart, script$1o as ZdBadge, script$1n as ZdBreadcrumbs, ZdButton$1 as ZdButton, script$1m as ZdButtonGroup, script$1l as ZdCard, script$1k as ZdCarousel, script$1j as ZdCheckbox, script$1i as ZdCheckboxMultiple, script$1h as ZdChip, script$1g as ZdCodeEditor, script$1f as ZdCol, script$1e as ZdCollapseCard, ZdComponent$1 as ZdComponent, ZdComponentRender$1 as ZdComponentRender, script$1d as ZdContainer, script$1c as ZdCurrency, script$1b as ZdDashboard, script$1a as ZdDate, script$19 as ZdDateRange, script$18 as ZdDialog, script$17 as ZdDivider, ZdDropdown$1 as ZdDropdown, script$16 as ZdFileInput, script$15 as ZdFooter, script$14 as ZdForm, script$13 as ZdFrame, script$12 as ZdFramePage, ZdGrid$1 as ZdGrid, script$Y as ZdGridAction, ZdGridCell$1 as ZdGridCell, script$X as ZdGridCellContent, script$W as ZdGridCellEdit, script$P as ZdGridCheckbox, script$S as ZdGridColumnHeader, script$11 as ZdGridEditable, script$V as ZdGridEditableCell, script$U as ZdGridEditableCellContent, script$$ as ZdGridFooter, script$T as ZdGridHelper, script$Q as ZdGridRow, script$R as ZdGridSortIcon, script$Z as ZdGridTop, script$10 as ZdHeader, script$L as ZdImage, script$K as ZdIncrement, ZdInput$1 as ZdInput, ZdIterable$1 as ZdIterable, script$I as ZdIterableColumnsButton, script$J as ZdIterableComponentRender, script$_ as ZdIterableNoData, script$E as ZdIterablePageInfo, script$F as ZdIterablePageSize, script$H as ZdIterablePagination, ZdList$1 as ZdList, script$B as ZdListGroup, script$C as ZdListItem, __vue_component__$D as ZdLoading, script$z as ZdLogin, script$y as ZdLoginButton, script$x as ZdMasterDetail, script$w as ZdMenu, script$t as ZdMenuButton, script$u as ZdMenuGroup, script$v as ZdMenuLink, script$s as ZdMenuSeparator, script$r as ZdModal, script$q as ZdModalCloseButton, script$p as ZdMonth, ZdNumber$1 as ZdNumber, script$o as ZdPassword, script$n as ZdProgress, script$m as ZdRadio, script$l as ZdRangeSlider, script$k as ZdRow, script$j as ZdSearch, script$G as ZdSelect, script$h as ZdSelectMultiple, ZdSelectTree$1 as ZdSelectTree, script$g as ZdSelectTreeMultiple, script$i as ZdSelectableList, script$f as ZdSpeedDial, script$e as ZdSteppers, script$d as ZdSvgMap, script$c as ZdSwitch, script$b as ZdTable, script$a as ZdTabs, script$7 as ZdTag, script$6 as ZdText, ZdTextInput$1 as ZdTextInput, script$5 as ZdTextarea, script$4 as ZdTime, ZdToggleable$1 as ZdToggleable, ZdTooltip$1 as ZdTooltip, script$1 as ZdTree, ZdTreeGrid$1 as ZdTreeGrid, script$O as ZdTreeGridCellContent, script as ZdTreeGridEditable, components, Zeedhi as default, setFillHeight };
+export { EditableMixin$1 as EditableMixin, FillHeightMixin, IconRenderer, NavigableTableMixin$1 as NavigableTableMixin, PropWatch, ThemeColor, Themeable, Vuetify, script$1q as ZdAlert, script$1p as ZdApexChart, script$1o as ZdBadge, script$1n as ZdBreadcrumbs, ZdButton$1 as ZdButton, script$1m as ZdButtonGroup, script$1l as ZdCard, script$1k as ZdCarousel, script$1j as ZdCheckbox, script$1i as ZdCheckboxMultiple, script$1h as ZdChip, script$1g as ZdCodeEditor, script$1f as ZdCol, script$1e as ZdCollapseCard, ZdComponent$1 as ZdComponent, ZdComponentRender$1 as ZdComponentRender, script$1d as ZdContainer, script$1c as ZdCurrency, script$1b as ZdDashboard, script$1a as ZdDate, script$19 as ZdDateRange, script$18 as ZdDialog, script$17 as ZdDivider, ZdDropdown$1 as ZdDropdown, script$16 as ZdFileInput, script$15 as ZdFooter, script$14 as ZdForm, script$13 as ZdFrame, script$12 as ZdFramePage, ZdGrid$1 as ZdGrid, script$Y as ZdGridAction, ZdGridCell$1 as ZdGridCell, script$X as ZdGridCellContent, script$W as ZdGridCellEdit, script$P as ZdGridCheckbox, script$S as ZdGridColumnHeader, script$11 as ZdGridEditable, script$V as ZdGridEditableCell, script$U as ZdGridEditableCellContent, script$$ as ZdGridFooter, script$T as ZdGridHelper, script$Q as ZdGridRow, script$R as ZdGridSortIcon, script$Z as ZdGridTop, script$10 as ZdHeader, script$L as ZdImage, script$K as ZdIncrement, ZdInput$1 as ZdInput, ZdIterable$1 as ZdIterable, script$I as ZdIterableColumnsButton, script$J as ZdIterableComponentRender, script$_ as ZdIterableNoData, script$E as ZdIterablePageInfo, script$F as ZdIterablePageSize, script$H as ZdIterablePagination, ZdList$1 as ZdList, script$B as ZdListGroup, script$C as ZdListItem, __vue_component__$D as ZdLoading, script$z as ZdLogin, script$y as ZdLoginButton, script$x as ZdMasterDetail, script$w as ZdMenu, script$t as ZdMenuButton, script$u as ZdMenuGroup, script$v as ZdMenuLink, script$s as ZdMenuSeparator, script$r as ZdModal, script$q as ZdModalCloseButton, script$p as ZdMonth, ZdNumber$1 as ZdNumber, script$o as ZdPassword, script$n as ZdProgress, script$m as ZdRadio, script$l as ZdRangeSlider, script$k as ZdRow, script$j as ZdSearch, script$G as ZdSelect, script$h as ZdSelectMultiple, ZdSelectTree$1 as ZdSelectTree, script$g as ZdSelectTreeMultiple, script$i as ZdSelectableList, script$f as ZdSpeedDial, script$e as ZdSteppers, script$d as ZdSvgMap, script$c as ZdSwitch, script$b as ZdTable, script$a as ZdTabs, script$7 as ZdTag, script$6 as ZdText, ZdTextInput$1 as ZdTextInput, script$5 as ZdTextarea, script$4 as ZdTime, ZdToggleable$1 as ZdToggleable, ZdTooltip$1 as ZdTooltip, script$1 as ZdTree, ZdTreeGrid$1 as ZdTreeGrid, script$O as ZdTreeGridCellContent, script as ZdTreeGridEditable, components, Zeedhi as default, setFillHeight };

package/dist/zd-vuetify.umd.js

@@ -38663,14 +38663,15 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   }
   IconRenderer.icons = {};
 
-  function setFillHeight(element) {
+  function setFillHeight(element, fillHeight = false) {
       const parent = element.parentElement;
       if (parent) {
           parent.style.display = 'flex';
           parent.style.flexFlow = 'column';
           Array.from(parent.children).forEach((child) => {
               if (child === element) {
-                  child.style.flex = '1 1 auto';
+                  const flexBasis = typeof fillHeight === 'string' ? fillHeight : '0';
+                  child.style.flex = `1 1 ${flexBasis}`;
                   child.style.overflowY = 'auto';
               }
               else {
@@ -38678,7 +38679,17 @@ If you're seeing "$attrs is readonly", it's caused by this`);
               }
           });
       }
-  }
+  }
+  exports.FillHeightMixin = class FillHeightMixin extends Vue__default["default"] {
+      mounted() {
+          if (!this.instance.fillHeight)
+              return;
+          setFillHeight(this.$el, this.instance.fillHeight);
+      }
+  };
+  exports.FillHeightMixin = __decorate([
+      Component__default["default"]
+  ], exports.FillHeightMixin);
 
   /**
    * ApexChart component
@@ -38695,9 +38706,6 @@ If you're seeing "$attrs is readonly", it's caused by this`);
           const updateFn = this.updateChart;
           this.instance.setViewUpdate(updateFn);
           this.instance.setViewGetIconHTML((icon) => IconRenderer.getIcon(icon, this.$root.$options.vuetify));
-          if (this.instance.fillHeight) {
-              setFillHeight(this.$el);
-          }
           this.defaultOptions = Object.assign({}, this.$refs.instance.chart.w.config);
           this.breakpoints = ((_b = (_a = this.instance.options) === null || _a === void 0 ? void 0 : _a.parentResponsive) === null || _b === void 0 ? void 0 : _b.sort((a, b) => a.breakpoint - b.breakpoint)) || [];
           this.apexChartContainer = this.$refs.chartContainer;
@@ -38800,7 +38808,9 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       __metadata("design:type", String)
   ], ZdApexChart.prototype, "loadColor", void 0);
   ZdApexChart = __decorate([
-      vuePropertyDecorator.Component
+      vuePropertyDecorator.Component({
+          mixins: [exports.FillHeightMixin],
+      })
   ], ZdApexChart);
   var script$1p = ZdApexChart;
 
@@ -39624,11 +39634,6 @@ If you're seeing "$attrs is readonly", it's caused by this`);
           super(...arguments);
           this.instanceType = common.Card;
       }
-      mounted() {
-          if (this.instance.fillHeight) {
-              setFillHeight(this.$el);
-          }
-      }
   };
   __decorate([
       PropWatch({ type: String, default: '' }),
@@ -39719,7 +39724,9 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       __metadata("design:type", String)
   ], ZdCard.prototype, "to", void 0);
   ZdCard = __decorate([
-      vuePropertyDecorator.Component
+      vuePropertyDecorator.Component({
+          mixins: [exports.FillHeightMixin],
+      })
   ], ZdCard);
   var script$1l = ZdCard;
 
@@ -39865,9 +39872,6 @@ If you're seeing "$attrs is readonly", it's caused by this`);
               }, 200);
           }
           core.Metadata.setEnabledConsole(true);
-          if (this.instance.fillHeight) {
-              setFillHeight(this.$el);
-          }
           if (this.carousel) {
               this.setViewUpdate();
               this.addResizeObserver();
@@ -40085,7 +40089,9 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       __metadata("design:returntype", void 0)
   ], ZdCarousel.prototype, "changeIsVisible", null);
   ZdCarousel = __decorate([
-      vuePropertyDecorator.Component
+      vuePropertyDecorator.Component({
+          mixins: [exports.FillHeightMixin],
+      })
   ], ZdCarousel);
   var script$1k = ZdCarousel;
 
@@ -40408,7 +40414,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$1u = function (inject) {
       if (!inject) return
-      inject("data-v-302f5b51_0", { source: ".zd-carousel {\n  height: 100%;\n}\n.zd-carousel section.hooper {\n  outline: none;\n}\n.zd-carousel section.hooper * {\n  outline: none;\n}\n.zd-carousel section.hooper .hooper-list .hooper-slide {\n  align-self: center;\n}\n.zd-carousel section.hooper .hooper-list .hooper-slide > .row {\n  height: 100%;\n  align-items: center;\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination {\n  padding: 0;\n  width: 100%;\n  height: 50px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination .hooper-indicators {\n  margin: 0 auto;\n  display: block;\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination .hooper-indicators li {\n  display: inline-block;\n  margin: 0 var(--spacing-2);\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination .hooper-indicators li .hooper-indicator {\n  width: 18px;\n  height: 18px;\n  border-radius: 50%;\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination.show-background {\n  background: rgba(0, 0, 0, 0.3);\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination.theme--light .hooper-indicator {\n  opacity: 0.25;\n  background-color: black;\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination.theme--light .hooper-indicator.is-active {\n  opacity: 0.6;\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination.theme--light .hooper-indicator:hover:not(.is-active) {\n  opacity: 0.4;\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination.theme--dark {\n  color: white;\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination.theme--dark .hooper-indicator {\n  opacity: 0.5;\n  background-color: white;\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination.theme--dark .hooper-indicator.is-active {\n  opacity: 0.8;\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination.theme--dark .hooper-indicator:hover:not(.is-active) {\n  opacity: 0.6;\n}\n.zd-carousel section.hooper .hooper-list button.hooper-prev {\n  padding: 0;\n}\n.zd-carousel section.hooper .hooper-list button.hooper-next {\n  padding: 0;\n}\n.zd-carousel section.hooper .hooper-list .prev-button, .zd-carousel section.hooper .hooper-list .next-button {\n  transition: 0.1s;\n}\n.zd-carousel section.hooper .hooper-list ul.hooper-track, .zd-carousel section.hooper .hooper-list ol.hooper-indicators {\n  padding-left: 0;\n}\n.zd-carousel section.hooper .hooper-list .hooper-progress-inner {\n  background-color: var(--v-primary-base);\n}\n.zd-carousel.buttons-outside section.hooper {\n  width: calc(100% - 2 * var(--spacing-8));\n  margin-left: var(--spacing-8);\n}\n.zd-carousel.buttons-outside section.hooper .hooper-list .hooper-navigation button.hooper-prev {\n  left: calc(-1 * var(--spacing-8));\n}\n.zd-carousel.buttons-outside section.hooper .hooper-list .hooper-navigation button.hooper-next {\n  right: calc(-1 * var(--spacing-8));\n}", map: undefined, media: undefined });
+      inject("data-v-544481c8_0", { source: ".zd-carousel {\n  height: 100%;\n  width: 100%;\n}\n.zd-carousel section.hooper {\n  outline: none;\n}\n.zd-carousel section.hooper * {\n  outline: none;\n}\n.zd-carousel section.hooper .hooper-list .hooper-slide {\n  align-self: center;\n}\n.zd-carousel section.hooper .hooper-list .hooper-slide > .row {\n  height: 100%;\n  align-items: center;\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination {\n  padding: 0;\n  width: 100%;\n  height: 50px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination .hooper-indicators {\n  margin: 0 auto;\n  display: block;\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination .hooper-indicators li {\n  display: inline-block;\n  margin: 0 var(--spacing-2);\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination .hooper-indicators li .hooper-indicator {\n  width: 18px;\n  height: 18px;\n  border-radius: 50%;\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination.show-background {\n  background: rgba(0, 0, 0, 0.3);\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination.theme--light .hooper-indicator {\n  opacity: 0.25;\n  background-color: black;\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination.theme--light .hooper-indicator.is-active {\n  opacity: 0.6;\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination.theme--light .hooper-indicator:hover:not(.is-active) {\n  opacity: 0.4;\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination.theme--dark {\n  color: white;\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination.theme--dark .hooper-indicator {\n  opacity: 0.5;\n  background-color: white;\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination.theme--dark .hooper-indicator.is-active {\n  opacity: 0.8;\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination.theme--dark .hooper-indicator:hover:not(.is-active) {\n  opacity: 0.6;\n}\n.zd-carousel section.hooper .hooper-list button.hooper-prev {\n  padding: 0;\n}\n.zd-carousel section.hooper .hooper-list button.hooper-next {\n  padding: 0;\n}\n.zd-carousel section.hooper .hooper-list .prev-button, .zd-carousel section.hooper .hooper-list .next-button {\n  transition: 0.1s;\n}\n.zd-carousel section.hooper .hooper-list ul.hooper-track, .zd-carousel section.hooper .hooper-list ol.hooper-indicators {\n  padding-left: 0;\n}\n.zd-carousel section.hooper .hooper-list .hooper-progress-inner {\n  background-color: var(--v-primary-base);\n}\n.zd-carousel.buttons-outside section.hooper {\n  width: calc(100% - 2 * var(--spacing-8));\n  margin-left: var(--spacing-8);\n}\n.zd-carousel.buttons-outside section.hooper .hooper-list .hooper-navigation button.hooper-prev {\n  left: calc(-1 * var(--spacing-8));\n}\n.zd-carousel.buttons-outside section.hooper .hooper-list .hooper-navigation button.hooper-next {\n  right: calc(-1 * var(--spacing-8));\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -41189,11 +41195,6 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       created() {
           this.instance.setViewHighlight(this.highlight);
       }
-      mounted() {
-          if (this.instance.fillHeight) {
-              setFillHeight(this.$el);
-          }
-      }
       highlight(code, language) {
           return Prism__default["default"].highlight(code, Prism__default["default"].languages[this.language], language);
       }
@@ -41243,7 +41244,9 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       __metadata("design:type", Object)
   ], ZdCodeEditor.prototype, "staticCode", void 0);
   ZdCodeEditor = __decorate([
-      vuePropertyDecorator.Component
+      vuePropertyDecorator.Component({
+          mixins: [exports.FillHeightMixin],
+      })
   ], ZdCodeEditor);
   var script$1g = ZdCodeEditor;
 
@@ -41433,11 +41436,6 @@ If you're seeing "$attrs is readonly", it's caused by this`);
           super(...arguments);
           this.instanceType = common.Col;
       }
-      mounted() {
-          if (this.instance.fillHeight) {
-              setFillHeight(this.$el);
-          }
-      }
   };
   __decorate([
       PropWatch({ type: [String, Number], default: '12' }),
@@ -41480,7 +41478,9 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       __metadata("design:type", Object)
   ], ZdCol.prototype, "fillHeight", void 0);
   ZdCol = __decorate([
-      vuePropertyDecorator.Component
+      vuePropertyDecorator.Component({
+          mixins: [exports.FillHeightMixin],
+      })
   ], ZdCol);
   var script$1f = ZdCol;
 
@@ -41899,11 +41899,6 @@ If you're seeing "$attrs is readonly", it's caused by this`);
           super(...arguments);
           this.instanceType = common.Container;
       }
-      mounted() {
-          if (this.instance.fillHeight) {
-              setFillHeight(this.$el);
-          }
-      }
   };
   __decorate([
       PropWatch({ type: [Boolean, String], default: true }),
@@ -41942,7 +41937,9 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       __metadata("design:type", Object)
   ], ZdContainer.prototype, "maxWidth", void 0);
   ZdContainer = __decorate([
-      vuePropertyDecorator.Component
+      vuePropertyDecorator.Component({
+          mixins: [exports.FillHeightMixin],
+      })
   ], ZdContainer);
   var script$1d = ZdContainer;
 
@@ -42679,9 +42676,6 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                   forceFallback: true,
               });
           }
-          if (this.instance.fillHeight) {
-              setFillHeight(this.$el);
-          }
       }
       setData(event) {
           const card = event.item.querySelector('.dashboard-div-card');
@@ -42835,7 +42829,9 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       __metadata("design:type", Object)
   ], ZdDashboard.prototype, "editHeader", void 0);
   ZdDashboard = __decorate([
-      vuePropertyDecorator.Component
+      vuePropertyDecorator.Component({
+          mixins: [exports.FillHeightMixin],
+      })
   ], ZdDashboard);
   var script$1b = ZdDashboard;
 
@@ -43740,6 +43736,21 @@ If you're seeing "$attrs is readonly", it's caused by this`);
           const picker = this.$refs.picker.$el;
           picker.removeEventListener('mousedown', this.onPickerMousedown);
       }
+      getAllowedDates(date) {
+          // parsedDate vem no formato 'MM-DD-YYYY' (mês-dia-ano) — index 1 é o DIA
+          const parsedDate = this.instance.parseISODateRangeValue([date])[0];
+          const allowed = this.instance.allowedDates;
+          let result = true;
+          if (typeof allowed === 'function') {
+              result = allowed(parsedDate);
+              return result;
+          }
+          if (!allowed)
+              return true;
+          const allowedArray = Array.isArray(allowed) ? allowed : [allowed];
+          result = allowedArray.includes(parsedDate);
+          return result;
+      }
       toMask(format) {
           return format.replace(/[A-Za-z]/gi, '#').split('').map((char) => (char === '#' ? /\d/ : char));
       }
@@ -43771,6 +43782,13 @@ If you're seeing "$attrs is readonly", it's caused by this`);
           return (dateSize * 2) + splitter;
       }
   };
+  __decorate([
+      PropWatch({
+          type: [Function, Array, String],
+          default: undefined,
+      }),
+      __metadata("design:type", Object)
+  ], ZdDateRange.prototype, "allowedDates", void 0);
   __decorate([
       PropWatch({ type: String, default: 'calendar' }),
       __metadata("design:type", String)
@@ -43980,7 +43998,11 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                             },
                           ],
                           ref: "picker",
-                          attrs: { "no-title": !_vm.$isMobile(), range: "" },
+                          attrs: {
+                            "no-title": !_vm.$isMobile(),
+                            range: "",
+                            "allowed-dates": _vm.getAllowedDates,
+                          },
                           on: {
                             "hook:mounted": _vm.pickerMounted,
                             "hook:destroyed": _vm.pickerDestroyed,
@@ -44137,7 +44159,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$1h = function (inject) {
       if (!inject) return
-      inject("data-v-4cb24b3d_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 });
+      inject("data-v-68640a11_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 */
@@ -45530,9 +45552,6 @@ If you're seeing "$attrs is readonly", it's caused by this`);
               this.instance.setViewValidate(this.form.validate);
               this.instance.setViewResetValidation(this.form.resetValidation);
           }
-          if (this.instance.fillHeight) {
-              setFillHeight(this.$el);
-          }
       }
       submit(event) {
           var _a;
@@ -45598,7 +45617,9 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       __metadata("design:type", Object)
   ], ZdForm.prototype, "value", void 0);
   ZdForm = __decorate([
-      vuePropertyDecorator.Component
+      vuePropertyDecorator.Component({
+          mixins: [exports.FillHeightMixin],
+      })
   ], ZdForm);
   var script$14 = ZdForm;
 
@@ -45755,11 +45776,6 @@ If you're seeing "$attrs is readonly", it's caused by this`);
           super(...arguments);
           this.instanceType = common.Frame;
       }
-      mounted() {
-          if (this.instance.fillHeight) {
-              setFillHeight(this.$el);
-          }
-      }
   };
   __decorate([
       PropWatch({ type: String, default: '' }),
@@ -45826,7 +45842,9 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       __metadata("design:type", Object)
   ], ZdFrame.prototype, "fillHeight", void 0);
   ZdFrame = __decorate([
-      vuePropertyDecorator.Component
+      vuePropertyDecorator.Component({
+          mixins: [exports.FillHeightMixin],
+      })
   ], ZdFrame);
   var script$13 = ZdFrame;
 
@@ -46187,9 +46205,6 @@ If you're seeing "$attrs is readonly", it's caused by this`);
           }
           this.setViewGetWidth();
           this.updateFixedColumns();
-          if (this.instance.fillHeight) {
-              setFillHeight(this.$el);
-          }
           this.registerTrObserver();
       }
       /**
@@ -46847,7 +46862,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   ], ZdGrid.prototype, "changeLoading", null);
   ZdGrid = __decorate([
       Component__default["default"]({
-          mixins: [NavigableTableMixin$1],
+          mixins: [NavigableTableMixin$1, exports.FillHeightMixin],
       })
   ], ZdGrid);
   var ZdGrid$1 = ZdGrid;
@@ -51368,11 +51383,6 @@ If you're seeing "$attrs is readonly", it's caused by this`);
           super(...arguments);
           this.instanceType = common.Image;
       }
-      mounted() {
-          if (this.instance.fillHeight) {
-              setFillHeight(this.$el);
-          }
-      }
       load(event) {
           this.instance.load(event, this.$el);
       }
@@ -51426,7 +51436,9 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       __metadata("design:type", Object)
   ], ZdImage.prototype, "fillHeight", void 0);
   ZdImage = __decorate([
-      vuePropertyDecorator.Component
+      vuePropertyDecorator.Component({
+          mixins: [exports.FillHeightMixin],
+      })
   ], ZdImage);
   var script$L = ZdImage;
 
@@ -51737,11 +51749,6 @@ If you're seeing "$attrs is readonly", it's caused by this`);
           super(...arguments);
           this.instanceType = common.IterableComponentRender;
       }
-      mounted() {
-          if (this.instance.fillHeight) {
-              setFillHeight(this.$el);
-          }
-      }
   };
   __decorate([
       vuePropertyDecorator.Prop({
@@ -51838,7 +51845,9 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       __metadata("design:type", Object)
   ], ZdIterableComponentRender.prototype, "showLoading", void 0);
   ZdIterableComponentRender = __decorate([
-      vuePropertyDecorator.Component
+      vuePropertyDecorator.Component({
+          mixins: [exports.FillHeightMixin],
+      })
   ], ZdIterableComponentRender);
   var script$J = ZdIterableComponentRender;
 
@@ -53440,11 +53449,6 @@ If you're seeing "$attrs is readonly", it's caused by this`);
           super(...arguments);
           this.instanceType = common.List;
       }
-      mounted() {
-          if (this.instance.fillHeight) {
-              setFillHeight(this.$el);
-          }
-      }
       isLastItem(index) {
           return index + 1 === this.instance.items.length;
       }
@@ -53514,7 +53518,9 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       __metadata("design:type", Array)
   ], ZdList.prototype, "items", void 0);
   ZdList = __decorate([
-      vuePropertyDecorator.Component
+      vuePropertyDecorator.Component({
+          mixins: [exports.FillHeightMixin],
+      })
   ], ZdList);
   var ZdList$1 = ZdList;
 
@@ -54662,11 +54668,6 @@ If you're seeing "$attrs is readonly", it's caused by this`);
           super(...arguments);
           this.instanceType = common.MasterDetail;
       }
-      mounted() {
-          if (this.instance.fillHeight) {
-              setFillHeight(this.$el);
-          }
-      }
   };
   __decorate([
       vuePropertyDecorator.Prop({ type: [Object, String], default: () => ({}) }),
@@ -54693,7 +54694,9 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       __metadata("design:type", Object)
   ], ZdMasterDetail.prototype, "fillHeight", void 0);
   ZdMasterDetail = __decorate([
-      vuePropertyDecorator.Component
+      vuePropertyDecorator.Component({
+          mixins: [exports.FillHeightMixin],
+      })
   ], ZdMasterDetail);
   var script$x = ZdMasterDetail;
 
@@ -56959,11 +56962,6 @@ If you're seeing "$attrs is readonly", it's caused by this`);
           super(...arguments);
           this.instanceType = common.Row;
       }
-      mounted() {
-          if (this.instance.fillHeight) {
-              setFillHeight(this.$el);
-          }
-      }
   };
   __decorate([
       PropWatch({ type: String }),
@@ -56998,7 +56996,9 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       __metadata("design:type", Object)
   ], ZdRow.prototype, "fillHeight", void 0);
   ZdRow = __decorate([
-      vuePropertyDecorator.Component
+      vuePropertyDecorator.Component({
+          mixins: [exports.FillHeightMixin],
+      })
   ], ZdRow);
   var script$k = ZdRow;
 
@@ -57294,7 +57294,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$m = function (inject) {
       if (!inject) return
-      inject("data-v-7cfb4ced_0", { source: ".zd-search {\n  width: 100%;\n}\n.zd-search.show-search-field.zd-input.v-input.zd-no-helper > .v-input__control > .v-text-field__details {\n  display: flex;\n}\n.zd-search.show-search-field .v-input__append-inner .v-input__icon--append .v-icon {\n  background-color: var(--v-primary-base) !important;\n  color: white !important;\n  border-radius: 3px !important;\n  height: var(--icon-size);\n  width: var(--icon-size);\n  margin-right: 8px !important;\n}\n.zd-search.show-search-field.zd-dense .v-input__append-inner .v-input__icon--append .v-icon {\n  margin-right: 2px !important;\n  height: var(--icon-size-small);\n  width: var(--icon-size-small);\n}\n.zd-search-buttons {\n  display: block;\n  width: 100%;\n  justify-content: left;\n}", map: undefined, media: undefined });
+      inject("data-v-0794902d_0", { source: ".zd-search {\n  width: 100%;\n}\n.zd-search.show-search-field.zd-input.v-input.zd-no-helper > .v-input__control > .v-text-field__details {\n  display: flex;\n}\n.zd-search.show-search-field .v-input__append-inner .v-input__icon--append .v-icon {\n  background-color: var(--v-primary-base) !important;\n  color: white !important;\n  border-radius: 3px !important;\n  height: var(--icon-size);\n  width: var(--icon-size);\n  margin-right: 8px !important;\n}\n.zd-search.show-search-field.zd-dense .v-input__append-inner .v-input__icon--append .v-icon {\n  margin-right: 2px !important;\n  height: var(--icon-size-small);\n  width: var(--icon-size-small);\n}\n.zd-search-buttons {\n  display: block;\n  width: 100%;\n  justify-content: left;\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -57333,11 +57333,6 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       change() {
           this.instance.change(undefined, this.$el);
       }
-      mounted() {
-          if (this.instance.fillHeight) {
-              setFillHeight(this.$el);
-          }
-      }
   };
   __decorate([
       PropWatch({ type: [String], default: '' }),
@@ -57388,7 +57383,9 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       __metadata("design:type", Object)
   ], ZdSelectableList.prototype, "fillHeight", void 0);
   ZdSelectableList = __decorate([
-      vuePropertyDecorator.Component
+      vuePropertyDecorator.Component({
+          mixins: [exports.FillHeightMixin],
+      })
   ], ZdSelectableList);
   var script$i = ZdSelectableList;
 
@@ -57638,11 +57635,9 @@ If you're seeing "$attrs is readonly", it's caused by this`);
           return chips;
       }
       toggle() {
-          const { input, menu } = this.componentRef.$refs;
-          input.focus();
-          menu.isActive = !this.instance.readonly && !this.instance.disabled && !menu.isActive;
+          this.superMethods(__vue_component__$K).toggle.call(this);
+          const { menu } = this.componentRef.$refs;
           this.rows = menu.isActive ? this.maxRowsNumber : 1;
-          this.$nextTick(() => { this.componentRef.isFocused = true; });
       }
       /**
        * Removes first item if it's text is overflowing out of parent
@@ -60138,11 +60133,6 @@ If you're seeing "$attrs is readonly", it's caused by this`);
           super(...arguments);
           this.instanceType = common.Table;
       }
-      mounted() {
-          if (this.instance.fillHeight) {
-              setFillHeight(this.$el);
-          }
-      }
   };
   __decorate([
       vuePropertyDecorator.Prop({ type: Object, default: () => ({}) }),
@@ -60173,7 +60163,9 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       __metadata("design:type", Object)
   ], ZdTable.prototype, "fillHeight", void 0);
   ZdTable = __decorate([
-      vuePropertyDecorator.Component
+      vuePropertyDecorator.Component({
+          mixins: [exports.FillHeightMixin],
+      })
   ], ZdTable);
   var script$b = ZdTable;
 
@@ -60362,9 +60354,6 @@ If you're seeing "$attrs is readonly", it's caused by this`);
           this.instance.beforeChange(event, index, this.$el);
       }
       mounted() {
-          if (this.instance.fillHeight) {
-              setFillHeight(this.$el);
-          }
           core.I18n.registerChangeListener(() => {
               this.$nextTick(() => {
                   var _a;
@@ -60402,7 +60391,9 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       __metadata("design:type", Array)
   ], ZdTabs.prototype, "tabs", void 0);
   ZdTabs = __decorate([
-      vuePropertyDecorator.Component
+      vuePropertyDecorator.Component({
+          mixins: [exports.FillHeightMixin],
+      })
   ], ZdTabs);
   var script$a = ZdTabs;
 
@@ -61116,7 +61107,6 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       mounted() {
           this.setPlaceholder('textarea');
           if (this.instance.fillHeight) {
-              setFillHeight(this.$el);
               if (this.$el.parentElement && this.instance.cssClass.indexOf('zd-form-child') !== -1) {
                   setFillHeight(this.$el.parentElement);
               }
@@ -61186,7 +61176,9 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       __metadata("design:type", Object)
   ], ZdTextarea.prototype, "fillHeight", void 0);
   ZdTextarea = __decorate([
-      vuePropertyDecorator.Component
+      vuePropertyDecorator.Component({
+          mixins: [exports.FillHeightMixin],
+      })
   ], ZdTextarea);
   var script$5 = ZdTextarea;
 
@@ -62203,11 +62195,8 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       mounted() {
           this.instance.setTree(this.$refs.tree);
           this.setAfterTitleMargin();
-          this.nodeChange();
-          this.$watch('$refs.tree.nodes', this.nodeChange, { deep: true });
-          if (this.instance.fillHeight) {
-              setFillHeight(this.$el);
-          }
+          this.nodeChange(); // This needs to be after the tree is set
+          this.$watch('$refs.tree.nodes', this.nodeChange, { deep: true }); // This needs to be after the tree is set
       }
       dataChange() {
           this.instance.createNodesFromDatasource();
@@ -62389,7 +62378,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   ], ZdTree.prototype, "dataChange", null);
   ZdTree = __decorate([
       vuePropertyDecorator.Component({
-          components: { ZdTreeCheckbox: __vue_component__$4, ZdTreeAfterTitle: __vue_component__$3 },
+          mixins: [exports.FillHeightMixin],
+          components: {
+              ZdTreeCheckbox: __vue_component__$4, ZdTreeAfterTitle: __vue_component__$3,
+          },
       })
   ], ZdTree);
   var script$1 = ZdTree;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zeedhi/vuetify",
-  "version": "1.118.1",
+  "version": "1.119.0",
   "description": "Zeedhi Components based on Vuetify",
   "author": "Zeedhi <zeedhi@teknisa.com>",
   "license": "ISC",
@@ -51,5 +51,5 @@
     "@types/prismjs": "1.26.*",
     "@types/sortablejs": "1.15.*"
   },
-  "gitHead": "0b05578ba4b80c67564392135c9057a81b35245b"
+  "gitHead": "f1a601972c2afeea9d808f244917f521264fdf61"
 }

package/types/components/zd-card/ZdCard.d.ts

@@ -28,5 +28,4 @@ export default class ZdCard extends ZdComponentRender {
     to: string;
     instance: Card;
     instanceType: typeof Card;
-    mounted(): void;
 }

package/types/components/zd-code-editor/ZdCodeEditor.d.ts

@@ -18,6 +18,5 @@ export default class ZdCodeEditor extends ZdComponentRender {
     instance: CodeEditor;
     instanceType: typeof CodeEditor;
     created(): void;
-    mounted(): void;
     highlight(code: string, language: string): string;
 }

package/types/components/zd-col/ZdCol.d.ts

@@ -16,5 +16,4 @@ export default class ZdCol extends ZdComponentRender {
     fillHeight?: boolean | string;
     instance: Col;
     instanceType: typeof Col;
-    mounted(): void;
 }

package/types/components/zd-container/ZdContainer.d.ts

@@ -15,5 +15,4 @@ export default class ZdContainer extends ZdComponentRender {
     maxWidth?: number | string;
     instance: Container;
     instanceType: typeof Container;
-    mounted(): void;
 }

package/types/components/zd-date/ZdDateRange.d.ts

@@ -2,6 +2,7 @@ import { DateRange, Text } from '@zeedhi/common';
 import { IEventParam } from '@zeedhi/core';
 import ZdTextInput from '../zd-text-input/ZdTextInput.vue';
 export default class ZdDateRange extends ZdTextInput {
+    allowedDates: ((date: string) => boolean) | string[] | string;
     appendIcon: string;
     appendOuterIcon: string;
     autocomplete: boolean | string;
@@ -36,6 +37,7 @@ export default class ZdDateRange extends ZdTextInput {
     private onPickerMousedown;
     pickerMounted(): void;
     pickerDestroyed(): void;
+    getAllowedDates(date: string): boolean;
     private toMask;
     get getDateMask(): "" | (string | RegExp)[];
     private keyAllowed;

package/types/components/zd-frame/ZdFrame.d.ts

@@ -22,5 +22,4 @@ export default class ZdFrame extends ZdComponentRender {
     fillHeight?: boolean | string;
     instance: Frame;
     instanceType: typeof Frame;
-    mounted(): void;
 }

package/types/components/zd-image/ZdImage.d.ts

@@ -18,6 +18,5 @@ export default class ZdImage extends ZdComponentRender {
     fillHeight?: boolean | string;
     instance: Image;
     instanceType: typeof Image;
-    mounted(): void;
     load(event?: Event): void;
 }

package/types/components/zd-iterable-component-render/ZdIterableComponentRender.d.ts

@@ -21,5 +21,4 @@ export default class ZdIterableComponentRender extends ZdIterable {
     showLoading?: boolean | string;
     instance: IterableComponentRender;
     instanceType: typeof IterableComponentRender;
-    mounted(): void;
 }

package/types/components/zd-list/ZdList.d.ts

@@ -22,6 +22,5 @@ export default class ZdList extends ZdComponentRender {
     items: IListItem[];
     instance: List;
     instanceType: typeof List;
-    mounted(): void;
     isLastItem(index: any): boolean;
 }

package/types/components/zd-master-detail/ZdMasterDetail.d.ts

@@ -13,5 +13,4 @@ export default class ZdMasterDetail extends ZdComponentRender {
     fillHeight?: boolean | string;
     instance: MasterDetail;
     instanceType: typeof MasterDetail;
-    mounted(): void;
 }

package/types/components/zd-row/ZdRow.d.ts

@@ -14,5 +14,4 @@ export default class ZdRow extends ZdComponentRender {
     fillHeight?: boolean | string;
     instance: Row;
     instanceType: typeof Row;
-    mounted(): void;
 }

package/types/components/zd-selectable-list/ZdSelectableList.d.ts

@@ -19,5 +19,4 @@ export default class ZdSelectableList extends ZdList {
     instance: SelectableList;
     instanceType: typeof SelectableList;
     change(): void;
-    mounted(): void;
 }

package/types/components/zd-table/ZdTable.d.ts

@@ -13,5 +13,4 @@ export default class ZdTable extends ZdIterable {
     fillHeight?: boolean | string;
     instance: Table;
     instanceType: typeof Table;
-    mounted(): void;
 }

package/types/utils/fillHeight.d.ts

@@ -1 +1,9 @@
-export declare function setFillHeight(element: HTMLElement): void;
+import Vue from 'vue';
+import { ComponentRender } from '@zeedhi/common';
+export declare function setFillHeight(element: HTMLElement, fillHeight?: boolean | string): void;
+export declare class FillHeightMixin extends Vue {
+    instance: ComponentRender & {
+        fillHeight?: boolean | string;
+    };
+    mounted(): void;
+}