@zeedhi/vuetify 1.73.0 → 1.74.0

package/dist/zd-vuetify.umd.js

@@ -37787,6 +37787,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       vuePropertyDecorator.Prop({ type: String, required: true }),
       __metadata("design:type", String)
   ], ZdComponent.prototype, "name", void 0);
+  __decorate([
+      PropWatch({ type: [Boolean, String], default: false }),
+      __metadata("design:type", Object)
+  ], ZdComponent.prototype, "allowDuplicate", void 0);
   __decorate([
       PropWatch({ type: [Boolean, String], default: false }),
       __metadata("design:type", Object)
@@ -38158,6 +38162,23 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   }
   IconRenderer.icons = {};
 
+  function setFillHeight(element) {
+      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';
+                  child.style.overflowY = 'auto';
+              }
+              else {
+                  child.style.flex = '0 0 auto';
+              }
+          });
+      }
+  }
+
   /**
    * ApexChart component
    */
@@ -38171,6 +38192,9 @@ If you're seeing "$attrs is readonly", it's caused by this`);
           const updateFn = (options) => this.$refs.instance.chart.updateOptions(options, false, true, true, true);
           this.instance.setViewUpdate(updateFn);
           this.instance.setViewGetIconHTML((icon) => IconRenderer.getIcon(icon, this.$root.$options.vuetify));
+          if (this.instance.fillHeight) {
+              setFillHeight(this.$el);
+          }
       }
       setApexChartTheme() {
           let theme = '';
@@ -38193,9 +38217,21 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       __metadata("design:type", String)
   ], ZdApexChart.prototype, "chartType", void 0);
   __decorate([
-      PropWatch({ type: [Number, String], default: 'auto' }),
+      PropWatch({ type: [Number, String], default: '100%' }),
       __metadata("design:type", Object)
   ], ZdApexChart.prototype, "height", void 0);
+  __decorate([
+      PropWatch({ type: [Number, String], default: 'auto' }),
+      __metadata("design:type", Object)
+  ], ZdApexChart.prototype, "minHeight", void 0);
+  __decorate([
+      PropWatch({ type: [Number, String], default: 'none' }),
+      __metadata("design:type", Object)
+  ], ZdApexChart.prototype, "maxHeight", void 0);
+  __decorate([
+      PropWatch({ type: [Boolean, String], default: false }),
+      __metadata("design:type", Object)
+  ], ZdApexChart.prototype, "fillHeight", void 0);
   __decorate([
       vuePropertyDecorator.Prop({ type: [Object, String], default: () => ({}) }),
       __metadata("design:type", Object)
@@ -38208,6 +38244,14 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       PropWatch({ type: [Number, String], default: '100%' }),
       __metadata("design:type", Object)
   ], ZdApexChart.prototype, "width", void 0);
+  __decorate([
+      PropWatch({ type: [Number, String], default: 'auto' }),
+      __metadata("design:type", Object)
+  ], ZdApexChart.prototype, "minWidth", void 0);
+  __decorate([
+      PropWatch({ type: [Number, String], default: 'none' }),
+      __metadata("design:type", Object)
+  ], ZdApexChart.prototype, "maxWidth", void 0);
   __decorate([
       PropWatch({ type: [Boolean, String], default: false }),
       __metadata("design:type", Boolean)
@@ -38235,7 +38279,18 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     var _c = _vm._self._c || _h;
     return _c(
       "div",
-      { staticClass: "apexcharts-container", attrs: { id: _vm.instance.name } },
+      {
+        staticClass: "apexcharts-container",
+        style: {
+          height: _vm.$formatSize(_vm.instance.height),
+          minHeight: _vm.$formatSize(_vm.instance.minHeight),
+          maxHeight: _vm.$formatSize(_vm.instance.maxHeight),
+          width: _vm.$formatSize(_vm.instance.width),
+          minWidth: _vm.$formatSize(_vm.instance.minWidth),
+          maxWidth: _vm.$formatSize(_vm.instance.maxWidth),
+        },
+        attrs: { id: _vm.instance.name },
+      },
       [
         _c("apexchart", {
           directives: [
@@ -38258,9 +38313,9 @@ If you're seeing "$attrs is readonly", it's caused by this`);
             type: _vm.instance.chartType,
             options: _vm.instance.options,
             series: _vm.instance.series,
-            height: _vm.instance.height,
+            height: "100%",
             name: _vm.instance.name,
-            width: _vm.instance.width,
+            width: "100%",
             dark: _vm.instance.dark,
             light: _vm.instance.light,
           },
@@ -38298,7 +38353,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$1s = function (inject) {
       if (!inject) return
-      inject("data-v-0df63fea_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-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 });
+      inject("data-v-36e180b3_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-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  position: relative;\n  overflow: hidden;\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -39011,6 +39066,11 @@ 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: '' }),
@@ -39036,10 +39096,6 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       PropWatch({ type: [Boolean, String], default: false }),
       __metadata("design:type", Boolean)
   ], ZdCard.prototype, "flat", void 0);
-  __decorate([
-      PropWatch({ type: [Number, String] }),
-      __metadata("design:type", Object)
-  ], ZdCard.prototype, "height", void 0);
   __decorate([
       PropWatch({ type: [Boolean, String], default: false }),
       __metadata("design:type", Boolean)
@@ -39059,19 +39115,31 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   __decorate([
       PropWatch({ type: [Number, String] }),
       __metadata("design:type", Object)
-  ], ZdCard.prototype, "maxHeight", void 0);
+  ], ZdCard.prototype, "height", void 0);
   __decorate([
-      PropWatch({ type: [Number, String] }),
+      PropWatch({ type: [Number, String], default: 'auto' }),
       __metadata("design:type", Object)
-  ], ZdCard.prototype, "maxWidth", void 0);
+  ], ZdCard.prototype, "minHeight", void 0);
   __decorate([
-      PropWatch({ type: [Number, String] }),
+      PropWatch({ type: [Number, String], default: 'none' }),
       __metadata("design:type", Object)
-  ], ZdCard.prototype, "minHeight", void 0);
+  ], ZdCard.prototype, "maxHeight", void 0);
   __decorate([
       PropWatch({ type: [Number, String] }),
       __metadata("design:type", Object)
+  ], ZdCard.prototype, "width", void 0);
+  __decorate([
+      PropWatch({ type: [Number, String], default: 'auto' }),
+      __metadata("design:type", Object)
   ], ZdCard.prototype, "minWidth", void 0);
+  __decorate([
+      PropWatch({ type: [Number, String], default: 'none' }),
+      __metadata("design:type", Object)
+  ], ZdCard.prototype, "maxWidth", void 0);
+  __decorate([
+      PropWatch({ type: [Boolean, String], default: false }),
+      __metadata("design:type", Object)
+  ], ZdCard.prototype, "fillHeight", void 0);
   __decorate([
       PropWatch({ type: [Boolean, String], default: false }),
       __metadata("design:type", Boolean)
@@ -39092,10 +39160,6 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       PropWatch({ type: String, default: '' }),
       __metadata("design:type", String)
   ], ZdCard.prototype, "to", void 0);
-  __decorate([
-      PropWatch({ type: [Number, String] }),
-      __metadata("design:type", Object)
-  ], ZdCard.prototype, "width", void 0);
   ZdCard = __decorate([
       vuePropertyDecorator.Component
   ], ZdCard);
@@ -39243,6 +39307,9 @@ If you're seeing "$attrs is readonly", it's caused by this`);
               }, 200);
           }
           core.Metadata.setEnabledConsole(true);
+          if (this.instance.fillHeight) {
+              setFillHeight(this.$el);
+          }
       }
       get paginationMode() {
           return this.instance.fractionPagination ? 'fraction' : undefined;
@@ -39334,9 +39401,13 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       __metadata("design:type", Object)
   ], ZdCarousel.prototype, "maxHeight", void 0);
   __decorate([
-      PropWatch({ type: [Number, String], default: 'none' }),
+      PropWatch({ type: [Number, String], default: 'auto' }),
       __metadata("design:type", Object)
   ], ZdCarousel.prototype, "minHeight", void 0);
+  __decorate([
+      PropWatch({ type: [Boolean, String], default: false }),
+      __metadata("design:type", Object)
+  ], ZdCarousel.prototype, "fillHeight", void 0);
   __decorate([
       PropWatch({ type: [Boolean, String], default: true }),
       __metadata("design:type", Boolean)
@@ -39481,7 +39552,15 @@ If you're seeing "$attrs is readonly", it's caused by this`);
               _vm.instance.buttonsOutside && _vm.instance.showArrows,
           },
         ],
-        style: _vm.instance.cssStyle,
+        style: Object.assign(
+          {},
+          {
+            height: _vm.$formatSize(_vm.instance.height),
+            maxHeight: _vm.$formatSize(_vm.instance.maxHeight),
+            minHeight: _vm.$formatSize(_vm.instance.minHeight),
+          },
+          _vm.$styleObject(_vm.instance.cssStyle)
+        ),
         attrs: { id: _vm.instance.name },
         on: {
           click: function ($event) {
@@ -39504,9 +39583,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                         key: _vm.hooperKey,
                         ref: "carousel",
                         style: {
-                          height: _vm.$formatSize(_vm.instance.height),
-                          maxHeight: _vm.$formatSize(_vm.instance.maxHeight),
-                          minHeight: _vm.$formatSize(_vm.instance.minHeight),
+                          height: "100%",
                         },
                         attrs: {
                           autoPlay: _vm.instance.autoPlay,
@@ -39768,7 +39845,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$1m = function (inject) {
       if (!inject) return
-      inject("data-v-5d9a0ba9_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-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-6fdfda82_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 });
 
     };
     /* scoped */
@@ -40514,6 +40591,11 @@ 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);
       }
@@ -40523,13 +40605,33 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       __metadata("design:type", String)
   ], ZdCodeEditor.prototype, "copyIcon", void 0);
   __decorate([
-      PropWatch({ type: [String, Number], default: 'none' }),
-      __metadata("design:type", String)
+      PropWatch({ type: [Number, String], default: 'auto' }),
+      __metadata("design:type", Object)
+  ], ZdCodeEditor.prototype, "height", void 0);
+  __decorate([
+      PropWatch({ type: [Number, String], default: 'auto' }),
+      __metadata("design:type", Object)
+  ], ZdCodeEditor.prototype, "minHeight", void 0);
+  __decorate([
+      PropWatch({ type: [Number, String], default: 'none' }),
+      __metadata("design:type", Object)
   ], ZdCodeEditor.prototype, "maxHeight", void 0);
   __decorate([
-      PropWatch({ type: [String, Number], default: 'auto' }),
-      __metadata("design:type", String)
-  ], ZdCodeEditor.prototype, "height", void 0);
+      PropWatch({ type: [Number, String], default: 'auto' }),
+      __metadata("design:type", Object)
+  ], ZdCodeEditor.prototype, "width", void 0);
+  __decorate([
+      PropWatch({ type: [Number, String], default: 'auto' }),
+      __metadata("design:type", Object)
+  ], ZdCodeEditor.prototype, "minWidth", void 0);
+  __decorate([
+      PropWatch({ type: [Number, String], default: 'none' }),
+      __metadata("design:type", Object)
+  ], ZdCodeEditor.prototype, "maxWidth", void 0);
+  __decorate([
+      PropWatch({ type: [Boolean, String], default: false }),
+      __metadata("design:type", Object)
+  ], ZdCodeEditor.prototype, "fillHeight", void 0);
   __decorate([
       PropWatch({ type: String, default: 'ts' }),
       __metadata("design:type", String)
@@ -40572,7 +40674,18 @@ If you're seeing "$attrs is readonly", it's caused by this`);
           { "theme--dark": _vm.$isDark(this) },
           { "theme--light": _vm.$isLight(this) },
         ],
-        style: _vm.instance.cssStyle,
+        style: Object.assign(
+          {},
+          {
+            height: _vm.$formatSize(_vm.instance.height),
+            width: _vm.$formatSize(_vm.instance.width),
+            maxHeight: _vm.$formatSize(_vm.instance.maxHeight),
+            minHeight: _vm.$formatSize(_vm.instance.minHeight),
+            maxWidth: _vm.$formatSize(_vm.instance.maxWidth),
+            minWidth: _vm.$formatSize(_vm.instance.minWidth),
+          },
+          _vm.$styleObject(_vm.instance.cssStyle)
+        ),
         attrs: { id: _vm.instance.name },
         on: {
           click: function ($event) {
@@ -40591,10 +40704,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
           "div",
           {
             staticClass: "zd-code-editor-container",
-            style: {
-              maxHeight: _vm.$formatSize(_vm.instance.maxHeight),
-              height: _vm.$formatSize(_vm.instance.height),
-            },
+            class: { "line-numbers": _vm.instance.showLineNumbers },
           },
           [
             _vm.instance.showLineNumbers
@@ -40694,7 +40804,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$1i = function (inject) {
       if (!inject) return
-      inject("data-v-2a2ade79_0", { source: ".zd-code-editor {\n  position: relative;\n}\n.zd-code-editor-clipboard-button {\n  position: absolute;\n  top: 10px;\n  right: 10px;\n  background-color: var(--v-grey-lighten5);\n  opacity: 0;\n  transition: 0.3s all ease-in;\n}\n.zd-code-editor-clipboard-button .v-icon {\n  color: var(--v-grey-base);\n  font-size: 18px;\n}\n.zd-code-editor:hover .zd-code-editor-clipboard-button {\n  opacity: 1;\n}\n.zd-code-editor-container {\n  position: relative;\n  background-color: var(--v-grey-lighten5);\n  min-height: 45px;\n  display: flex;\n  border: solid var(--regular) var(--v-grey-lighten5);\n  overflow: auto;\n}\n.zd-code-editor-container:focus-within {\n  border: solid var(--regular) var(--v-primary-base);\n}\n.zd-code-editor-container .zd-code-editor-line-numbers {\n  min-height: 45px;\n  width: 30px;\n  overflow: hidden;\n  flex-shrink: 0;\n  margin-top: 0;\n  font-size: 0.9em;\n  padding: 10px 3px;\n  font-family: Consolas, Monaco, \"Andale Mono\", \"Ubuntu Mono\", monospace;\n  background: var(--v-grey-lighten4);\n  color: var(--zd-font-color);\n  position: sticky;\n  top: 0;\n  left: 0;\n  display: grid;\n  gap: 0.25rem;\n}\n.zd-code-editor-container .zd-code-editor-line-numbers .zd-code-editor-line-number {\n  text-align: right;\n  white-space: nowrap;\n}\n.zd-code-editor-container pre {\n  padding: 10px;\n  margin: 0;\n  background: transparent;\n  -moz-tab-size: 4;\n  -ms-flex-positive: 2;\n  -o-tab-size: 4;\n  -webkit-box-flex: 2;\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  flex-grow: 2;\n  outline: none;\n  tab-size: 4;\n  font-weight: 500;\n  font-size: 0.9em;\n  font-family: Consolas, Monaco, \"Andale Mono\", \"Ubuntu Mono\", monospace;\n  overflow: hidden;\n  color: var(--zd-font-color);\n}\n.zd-code-editor.theme--dark .zd-code-editor-clipboard-button {\n  background-color: #383838;\n}\n.zd-code-editor.theme--dark .zd-code-editor-clipboard-button .v-icon {\n  color: var(--v-grey-lighten4);\n  font-size: 18px;\n}\n.zd-code-editor.theme--dark .zd-code-editor-container {\n  border: solid var(--regular) var(--v-grey-darken3);\n  background: #383838;\n}\n.zd-code-editor.theme--dark .zd-code-editor-container .zd-code-editor-line-numbers {\n  background: var(--v-grey-darken3);\n  color: var(--v-grey-lighten4);\n}\n.zd-code-editor.theme--dark .zd-code-editor-container pre {\n  text-shadow: 0 1px #2c2c2c;\n}\n.zd-code-editor.theme--dark .zd-code-editor-container pre span.token.property, .zd-code-editor.theme--dark .zd-code-editor-container pre span.token.tag, .zd-code-editor.theme--dark .zd-code-editor-container pre span.token.boolean, .zd-code-editor.theme--dark .zd-code-editor-container pre span.token.number, .zd-code-editor.theme--dark .zd-code-editor-container pre span.token.constant, .zd-code-editor.theme--dark .zd-code-editor-container pre span.token.symbol, .zd-code-editor.theme--dark .zd-code-editor-container pre span.token.deleted {\n  color: #ff6fd3;\n}\n.zd-code-editor.theme--dark .zd-code-editor-container pre span.token.atrule, .zd-code-editor.theme--dark .zd-code-editor-container pre span.token.attr-value, .zd-code-editor.theme--dark .zd-code-editor-container pre span.token.keyword {\n  color: #00acf6;\n}\n.zd-code-editor.theme--dark .zd-code-editor-container pre span.token.function, .zd-code-editor.theme--dark .zd-code-editor-container pre span.token.class-name {\n  color: #ff7692;\n}\n.zd-code-editor.theme--dark .zd-code-editor-container pre span.token.selector, .zd-code-editor.theme--dark .zd-code-editor-container pre span.token.attr-name, .zd-code-editor.theme--dark .zd-code-editor-container pre span.token.string, .zd-code-editor.theme--dark .zd-code-editor-container pre span.token.char, .zd-code-editor.theme--dark .zd-code-editor-container pre span.token.builtin, .zd-code-editor.theme--dark .zd-code-editor-container pre span.token.inserted {\n  color: #77b300;\n}\n.zd-code-editor.theme--dark .zd-code-editor-container pre span.token.operator {\n  background: none;\n}", map: undefined, media: undefined });
+      inject("data-v-dfba4c06_0", { source: ".zd-code-editor {\n  position: relative;\n  display: flex;\n  overflow: auto;\n}\n.zd-code-editor-clipboard-button {\n  position: absolute;\n  top: 10px;\n  right: 10px;\n  background-color: var(--v-grey-lighten5);\n  opacity: 0;\n  transition: 0.3s all ease-in;\n}\n.zd-code-editor-clipboard-button .v-icon {\n  color: var(--v-grey-base);\n  font-size: 18px;\n}\n.zd-code-editor:hover .zd-code-editor-clipboard-button {\n  opacity: 1;\n}\n.zd-code-editor-container {\n  position: relative;\n  background-color: var(--v-grey-lighten5);\n  min-height: 45px;\n  display: flex;\n  border: solid var(--regular) var(--v-grey-lighten5);\n  overflow: auto;\n  width: 100%;\n}\n.zd-code-editor-container.line-numbers {\n  background: linear-gradient(to right, var(--v-grey-lighten4), var(--v-grey-lighten4) 40px, var(--v-grey-lighten5) 40px, var(--v-grey-lighten5));\n}\n.zd-code-editor-container:focus-within {\n  border: solid var(--regular) var(--v-primary-base);\n}\n.zd-code-editor-container .zd-code-editor-line-numbers {\n  min-height: 45px;\n  width: 40px;\n  flex-shrink: 0;\n  margin-top: 0;\n  font-size: 0.9em;\n  padding: 10px 3px;\n  font-family: Consolas, Monaco, \"Andale Mono\", \"Ubuntu Mono\", monospace;\n  background: var(--v-grey-lighten4);\n  color: var(--zd-font-color);\n  position: sticky;\n  left: 0;\n  display: flex;\n  flex-direction: column;\n  height: fit-content;\n}\n.zd-code-editor-container .zd-code-editor-line-numbers .zd-code-editor-line-number {\n  text-align: right;\n  white-space: nowrap;\n}\n.zd-code-editor-container pre {\n  padding: 10px;\n  margin: 0;\n  background: transparent;\n  -moz-tab-size: 4;\n  -ms-flex-positive: 2;\n  -o-tab-size: 4;\n  -webkit-box-flex: 2;\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  flex-grow: 2;\n  outline: none;\n  tab-size: 4;\n  font-weight: 500;\n  font-size: 0.9em;\n  font-family: Consolas, Monaco, \"Andale Mono\", \"Ubuntu Mono\", monospace;\n  overflow: hidden;\n  color: var(--zd-font-color);\n}\n.zd-code-editor.theme--dark .zd-code-editor-clipboard-button {\n  background-color: #383838;\n}\n.zd-code-editor.theme--dark .zd-code-editor-clipboard-button .v-icon {\n  color: var(--v-grey-lighten4);\n  font-size: 18px;\n}\n.zd-code-editor.theme--dark .zd-code-editor-container {\n  border: solid var(--regular) var(--v-grey-darken3);\n  background: #383838;\n}\n.zd-code-editor.theme--dark .zd-code-editor-container .zd-code-editor-line-numbers {\n  background: var(--v-grey-darken3);\n  color: var(--v-grey-lighten4);\n}\n.zd-code-editor.theme--dark .zd-code-editor-container pre {\n  text-shadow: 0 1px #2c2c2c;\n}\n.zd-code-editor.theme--dark .zd-code-editor-container pre span.token.property, .zd-code-editor.theme--dark .zd-code-editor-container pre span.token.tag, .zd-code-editor.theme--dark .zd-code-editor-container pre span.token.boolean, .zd-code-editor.theme--dark .zd-code-editor-container pre span.token.number, .zd-code-editor.theme--dark .zd-code-editor-container pre span.token.constant, .zd-code-editor.theme--dark .zd-code-editor-container pre span.token.symbol, .zd-code-editor.theme--dark .zd-code-editor-container pre span.token.deleted {\n  color: #ff6fd3;\n}\n.zd-code-editor.theme--dark .zd-code-editor-container pre span.token.atrule, .zd-code-editor.theme--dark .zd-code-editor-container pre span.token.attr-value, .zd-code-editor.theme--dark .zd-code-editor-container pre span.token.keyword {\n  color: #00acf6;\n}\n.zd-code-editor.theme--dark .zd-code-editor-container pre span.token.function, .zd-code-editor.theme--dark .zd-code-editor-container pre span.token.class-name {\n  color: #ff7692;\n}\n.zd-code-editor.theme--dark .zd-code-editor-container pre span.token.selector, .zd-code-editor.theme--dark .zd-code-editor-container pre span.token.attr-name, .zd-code-editor.theme--dark .zd-code-editor-container pre span.token.string, .zd-code-editor.theme--dark .zd-code-editor-container pre span.token.char, .zd-code-editor.theme--dark .zd-code-editor-container pre span.token.builtin, .zd-code-editor.theme--dark .zd-code-editor-container pre span.token.inserted {\n  color: #77b300;\n}\n.zd-code-editor.theme--dark .zd-code-editor-container pre span.token.operator {\n  background: none;\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -41166,6 +41276,11 @@ 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 }),
@@ -41183,14 +41298,26 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       PropWatch({ type: [Number, String], default: 'auto' }),
       __metadata("design:type", Object)
   ], ZdContainer.prototype, "height", void 0);
+  __decorate([
+      PropWatch({ type: [Number, String], default: 'auto' }),
+      __metadata("design:type", Object)
+  ], ZdContainer.prototype, "minHeight", void 0);
   __decorate([
       PropWatch({ type: [Number, String], default: 'none' }),
       __metadata("design:type", Object)
   ], ZdContainer.prototype, "maxHeight", void 0);
+  __decorate([
+      PropWatch({ type: [Number, String], default: '100%' }),
+      __metadata("design:type", Object)
+  ], ZdContainer.prototype, "width", void 0);
+  __decorate([
+      PropWatch({ type: [Number, String], default: 'auto' }),
+      __metadata("design:type", Object)
+  ], ZdContainer.prototype, "minWidth", void 0);
   __decorate([
       PropWatch({ type: [Number, String], default: 'none' }),
       __metadata("design:type", Object)
-  ], ZdContainer.prototype, "minHeight", void 0);
+  ], ZdContainer.prototype, "maxWidth", void 0);
   ZdContainer = __decorate([
       vuePropertyDecorator.Component
   ], ZdContainer);
@@ -41215,17 +41342,16 @@ If you're seeing "$attrs is readonly", it's caused by this`);
             expression: "instance.isVisible",
           },
         ],
-        class: [
-          "zd-container",
-          _vm.instance.cssClass,
-          { "fill-height": _vm.instance.fillHeight },
-        ],
+        class: ["zd-container", _vm.instance.cssClass],
         style: Object.assign(
           {},
           {
             height: _vm.$formatSize(_vm.instance.height),
             minHeight: _vm.$formatSize(_vm.instance.minHeight),
             maxHeight: _vm.$formatSize(_vm.instance.maxHeight),
+            width: _vm.$formatSize(_vm.instance.width),
+            minWidth: _vm.$formatSize(_vm.instance.minWidth),
+            maxWidth: _vm.$formatSize(_vm.instance.maxWidth),
             overflow: _vm.instance.scrollView ? "hidden auto" : "none",
           },
           _vm.$styleObject(_vm.instance.cssStyle)
@@ -41268,11 +41394,11 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$1f = function (inject) {
       if (!inject) return
-      inject("data-v-a056e4b6_0", { source: ".zd-container[data-v-a056e4b6] {\n  padding: var(--zd-default-padding);\n}", map: undefined, media: undefined });
+      inject("data-v-77ffafc6_0", { source: ".zd-container[data-v-77ffafc6] {\n  padding: var(--zd-default-padding);\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
-    const __vue_scope_id__$1f = "data-v-a056e4b6";
+    const __vue_scope_id__$1f = "data-v-77ffafc6";
     /* module identifier */
     const __vue_module_identifier__$1f = undefined;
     /* functional template */
@@ -41837,6 +41963,9 @@ 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');
@@ -41949,9 +42078,33 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       __metadata("design:type", Object)
   ], ZdDashboard.prototype, "removePadding", void 0);
   __decorate([
-      PropWatch({ type: [Number, String], default: '' }),
+      PropWatch({ type: [Number, String], default: 'auto' }),
       __metadata("design:type", Object)
   ], ZdDashboard.prototype, "height", void 0);
+  __decorate([
+      PropWatch({ type: [Number, String], default: 'auto' }),
+      __metadata("design:type", Object)
+  ], ZdDashboard.prototype, "minHeight", void 0);
+  __decorate([
+      PropWatch({ type: [Number, String], default: 'none' }),
+      __metadata("design:type", Object)
+  ], ZdDashboard.prototype, "maxHeight", void 0);
+  __decorate([
+      PropWatch({ type: [Number, String], default: '100%' }),
+      __metadata("design:type", Object)
+  ], ZdDashboard.prototype, "width", void 0);
+  __decorate([
+      PropWatch({ type: [Number, String], default: 'auto' }),
+      __metadata("design:type", Object)
+  ], ZdDashboard.prototype, "minWidth", void 0);
+  __decorate([
+      PropWatch({ type: [Number, String], default: 'none' }),
+      __metadata("design:type", Object)
+  ], ZdDashboard.prototype, "maxWidth", void 0);
+  __decorate([
+      PropWatch({ type: [Boolean, String], default: false }),
+      __metadata("design:type", Object)
+  ], ZdDashboard.prototype, "fillHeight", void 0);
   __decorate([
       PropWatch({ type: [Number, String], default: '' }),
       __metadata("design:type", Object)
@@ -42000,7 +42153,14 @@ If you're seeing "$attrs is readonly", it's caused by this`);
           name: "container-dashboard" + _vm.instance.name,
           cssStyle: Object.assign(
             {},
-            { height: _vm.$formatSize(_vm.instance.height) },
+            {
+              height: _vm.$formatSize(_vm.instance.height),
+              width: _vm.$formatSize(_vm.instance.width),
+              maxHeight: _vm.$formatSize(_vm.instance.maxHeight),
+              minHeight: _vm.$formatSize(_vm.instance.minHeight),
+              maxWidth: _vm.$formatSize(_vm.instance.maxWidth),
+              minWidth: _vm.$formatSize(_vm.instance.minWidth),
+            },
             _vm.$styleObject(_vm.instance.cssStyle)
           ),
         },
@@ -42008,13 +42168,29 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       [
         [
           _c(
-            "zd-header",
-            _vm._b(
-              { attrs: { isVisible: _vm.instance.editingMode } },
-              "zd-header",
-              _vm.instance.editHeader,
-              false
-            )
+            "span",
+            {
+              directives: [
+                {
+                  name: "show",
+                  rawName: "v-show",
+                  value: _vm.instance.showEditHeader,
+                  expression: "instance.showEditHeader",
+                },
+              ],
+            },
+            [
+              _c(
+                "zd-header",
+                _vm._b(
+                  { attrs: { isVisible: _vm.instance.editingMode } },
+                  "zd-header",
+                  _vm.instance.editHeader,
+                  false
+                )
+              ),
+            ],
+            1
           ),
         ],
         _vm._v(" "),
@@ -42180,7 +42356,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$1b = function (inject) {
       if (!inject) return
-      inject("data-v-6b1f34e2_0", { source: ".zd-dashboard {\n  display: flex;\n  flex-direction: column;\n  cursor: auto;\n}\n.zd-dashboard .zd-header {\n  margin-bottom: 10px;\n}\n.zd-dashboard .zd-footer {\n  bottom: 0;\n  right: 10px;\n  position: absolute;\n  padding: 3px;\n}\n.zd-dashboard .zd-footer.theme--dark {\n  background: #1e1e1e;\n}\n.zd-dashboard .zd-footer.theme--light {\n  background: #fff;\n}\n.zd-dashboard .zd-icon {\n  bottom: 0;\n  right: 0;\n  position: absolute;\n  cursor: nw-resize;\n}\n.zd-dashboard .zd-dashboard-body {\n  justify-content: flex-start;\n  align-content: flex-start;\n  display: flex;\n  flex-wrap: wrap;\n  overflow: auto;\n  height: 100%;\n  min-height: 0;\n}\n.zd-dashboard .zd-dashboard-body .zd-dashboard-card-col {\n  min-height: 70px;\n}\n.zd-dashboard .zd-dashboard-body .zd-dashboard-card-col .zd-dashboard-card-div {\n  height: 100%;\n  position: relative;\n}\n.zd-dashboard .zd-dashboard-body .zd-dashboard-card-col .zd-dashboard-card-div > .zd-card {\n  height: 100%;\n}\n.ghost-drag {\n  border: 2px dashed #772583;\n  opacity: 0.5;\n  margin: 0;\n}", map: undefined, media: undefined });
+      inject("data-v-11f7d9bd_0", { source: ".zd-dashboard {\n  display: flex;\n  flex-direction: column;\n  cursor: auto;\n  padding: 0px !important;\n}\n.zd-dashboard .zd-header {\n  margin-bottom: 10px;\n}\n.zd-dashboard .zd-footer {\n  bottom: 0;\n  right: 10px;\n  position: absolute;\n  padding: 3px;\n}\n.zd-dashboard .zd-footer.theme--dark {\n  background: #1e1e1e;\n}\n.zd-dashboard .zd-footer.theme--light {\n  background: #fff;\n}\n.zd-dashboard .zd-icon {\n  bottom: 0;\n  right: 0;\n  position: absolute;\n  cursor: nw-resize;\n}\n.zd-dashboard .zd-dashboard-body {\n  justify-content: flex-start;\n  align-content: flex-start;\n  display: flex;\n  flex-wrap: wrap;\n  overflow: auto;\n  height: 100%;\n  min-height: 0;\n}\n.zd-dashboard .zd-dashboard-body .zd-dashboard-card-col {\n  min-height: 70px;\n}\n.zd-dashboard .zd-dashboard-body .zd-dashboard-card-col .zd-dashboard-card-div {\n  height: 100%;\n  position: relative;\n}\n.zd-dashboard .zd-dashboard-body .zd-dashboard-card-col .zd-dashboard-card-div > .zd-card {\n  height: 100%;\n}\n.ghost-drag {\n  border: 2px dashed #772583;\n  opacity: 0.5;\n  margin: 0;\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -44310,46 +44486,17 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       constructor() {
           super(...arguments);
           this.instanceType = common.Form;
-          /**
-           * Height of the form rows, excluding the fillHeight row
-           */
-          this.inputHeight = 0;
           this.form = {};
       }
       mounted() {
           this.form = this.$refs.form;
-          this.row = this.$refs.row;
           if (this.form) {
               this.instance.setViewValidate(this.form.validate);
               this.instance.setViewResetValidation(this.form.resetValidation);
           }
-          this.updateFillHeight();
-          window.addEventListener('resize', this.onResize);
-      }
-      destroyed() {
-          window.removeEventListener('resize', this.onResize);
-      }
-      onResize() {
-          this.updateFillHeight();
-      }
-      updateFillHeight() {
-          if (!this.hasFillHeight)
-              return;
-          this.inputHeight = 0;
-          let lastTop = 0;
-          Array.from(this.row.children).forEach((child) => {
-              const { top } = child.getBoundingClientRect();
-              if (top <= lastTop)
-                  return;
-              lastTop = top;
-              if (child.classList.contains('zd-input-fill-height')) {
-                  this.inputHeight -= child.clientHeight;
-              }
-              this.inputHeight += child.clientHeight;
-          });
-      }
-      get hasFillHeight() {
-          return this.instance.childrenProps.some((child) => child.fillHeight);
+          if (this.instance.fillHeight) {
+              setFillHeight(this.$el);
+          }
       }
       submit(event) {
           var _a;
@@ -44383,9 +44530,33 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       __metadata("design:type", String)
   ], ZdForm.prototype, "justify", void 0);
   __decorate([
-      PropWatch({ type: [Number, String] }),
+      PropWatch({ type: [Number, String], default: 'auto' }),
       __metadata("design:type", Object)
   ], ZdForm.prototype, "height", void 0);
+  __decorate([
+      PropWatch({ type: [Number, String], default: 'auto' }),
+      __metadata("design:type", Object)
+  ], ZdForm.prototype, "minHeight", void 0);
+  __decorate([
+      PropWatch({ type: [Number, String], default: 'none' }),
+      __metadata("design:type", Object)
+  ], ZdForm.prototype, "maxHeight", void 0);
+  __decorate([
+      PropWatch({ type: [Number, String], default: '100%' }),
+      __metadata("design:type", Object)
+  ], ZdForm.prototype, "width", void 0);
+  __decorate([
+      PropWatch({ type: [Number, String], default: 'auto' }),
+      __metadata("design:type", Object)
+  ], ZdForm.prototype, "minWidth", void 0);
+  __decorate([
+      PropWatch({ type: [Number, String], default: 'none' }),
+      __metadata("design:type", Object)
+  ], ZdForm.prototype, "maxWidth", void 0);
+  __decorate([
+      PropWatch({ type: [Boolean, String], default: false }),
+      __metadata("design:type", Object)
+  ], ZdForm.prototype, "fillHeight", void 0);
   __decorate([
       vuePropertyDecorator.Prop({ type: Object, default: () => ({}) }),
       __metadata("design:type", Object)
@@ -44418,7 +44589,14 @@ If you're seeing "$attrs is readonly", it's caused by this`);
         class: ["zd-form", "zd-form-fill-height", _vm.instance.cssClass],
         style: Object.assign(
           {},
-          { height: _vm.$formatSize(_vm.instance.height) },
+          {
+            height: _vm.$formatSize(_vm.instance.height),
+            width: _vm.$formatSize(_vm.instance.width),
+            maxHeight: _vm.$formatSize(_vm.instance.maxHeight),
+            minHeight: _vm.$formatSize(_vm.instance.minHeight),
+            maxWidth: _vm.$formatSize(_vm.instance.maxWidth),
+            minWidth: _vm.$formatSize(_vm.instance.minWidth),
+          },
           _vm.$styleObject(_vm.instance.cssStyle)
         ),
         attrs: { id: _vm.instance.name, name: _vm.instance.name },
@@ -44430,74 +44608,69 @@ If you're seeing "$attrs is readonly", it's caused by this`);
         },
       },
       [
-        _c(
-          "v-row",
-          {
-            ref: "row",
-            attrs: {
-              dense: "",
-              justify: _vm.instance.justify,
-              align: _vm.instance.align,
-            },
-          },
-          _vm._l(_vm.instance.childrenProps, function (child) {
-            return _c(
-              "v-col",
-              _vm._b(
-                {
-                  directives: [
+        _vm.instance.childrenProps.length
+          ? _c(
+              "v-row",
+              {
+                ref: "row",
+                attrs: {
+                  dense: "",
+                  justify: _vm.instance.justify,
+                  align: _vm.instance.align,
+                },
+              },
+              _vm._l(_vm.instance.childrenProps, function (child) {
+                return _c(
+                  "v-col",
+                  _vm._b(
                     {
-                      name: "show",
-                      rawName: "v-show",
-                      value: _vm.isChildVisible(child),
-                      expression: "isChildVisible(child)",
+                      directives: [
+                        {
+                          name: "show",
+                          rawName: "v-show",
+                          value: _vm.isChildVisible(child),
+                          expression: "isChildVisible(child)",
+                        },
+                      ],
+                      key: child.name,
+                      style: {
+                        height: _vm.$formatSize(child.height || "auto"),
+                        minHeight: _vm.$formatSize(child.minHeight || "auto"),
+                        maxHeight: _vm.$formatSize(child.maxHeight || "none"),
+                      },
+                      attrs: { name: child.name },
                     },
-                  ],
-                  key: child.name,
-                  class: [
-                    {
-                      "zd-input-fill-height": !!child.fillHeight,
-                    },
-                  ],
-                  style: {
-                    height: child.fillHeight
-                      ? "calc(100% - " + _vm.$formatSize(_vm.inputHeight) + ")"
-                      : "auto",
-                    minHeight:
-                      child.fillHeight && child.fillHeight !== true
-                        ? _vm.$formatSize(child.fillHeight)
-                        : "auto",
-                  },
-                  attrs: { name: child.name },
-                },
-                "v-col",
-                _vm.instance.childrenGrid[child.name],
-                false
-              ),
-              [
-                _c(
-                  child.component,
-                  _vm._b(
-                    {
-                      tag: "component",
-                      attrs: { parent: _vm.instance },
-                      on: {
-                        "update:value": function ($event) {
-                          _vm.instance.value[child.name] = $event;
-                        },
-                      },
-                    },
-                    "component",
-                    child,
+                    "v-col",
+                    _vm.instance.childrenGrid[child.name],
                     false
-                  )
-                ),
-              ],
+                  ),
+                  [
+                    _c(
+                      child.component,
+                      _vm._b(
+                        {
+                          tag: "component",
+                          attrs: { parent: _vm.instance },
+                          on: {
+                            "update:value": function ($event) {
+                              _vm.instance.value[child.name] = $event;
+                            },
+                          },
+                        },
+                        "component",
+                        Object.assign({}, child, {
+                          cssClass: (child.cssClass || "") + " zd-form-child",
+                        }),
+                        false
+                      )
+                    ),
+                  ],
+                  1
+                )
+              }),
               1
             )
-          }),
-          1
-        ),
+          : _vm._e(),
         _vm._v(" "),
         _vm._t("default"),
       ],
@@ -44510,7 +44683,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$13 = function (inject) {
       if (!inject) return
-      inject("data-v-3b667e56_0", { source: ".zd-form {\n  overflow-x: hidden;\n  padding-bottom: 4px;\n}\n.zd-form > .row {\n  height: 100%;\n  align-content: flex-start;\n}", map: undefined, media: undefined });
+      inject("data-v-28a85c8a_0", { source: ".zd-form {\n  overflow-x: hidden;\n  padding-bottom: 4px;\n}\n.zd-form > .row {\n  height: 100%;\n  align-content: flex-start;\n  margin: 0 -12px;\n}\n.zd-form > .row.row--dense {\n  margin: 0 -4px;\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -44546,6 +44719,11 @@ 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: '' }),
@@ -44584,17 +44762,33 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       __metadata("design:type", Number)
   ], ZdFrame.prototype, "cacheDuration", void 0);
   __decorate([
-      PropWatch({ type: [String, Number], default: 'auto' }),
+      PropWatch({ type: [Number, String], default: 'auto' }),
       __metadata("design:type", Object)
   ], ZdFrame.prototype, "height", void 0);
   __decorate([
-      PropWatch({ type: [String, Number], default: 'none' }),
+      PropWatch({ type: [Number, String], default: 'auto' }),
+      __metadata("design:type", Object)
+  ], ZdFrame.prototype, "minHeight", void 0);
+  __decorate([
+      PropWatch({ type: [Number, String], default: 'none' }),
       __metadata("design:type", Object)
   ], ZdFrame.prototype, "maxHeight", void 0);
   __decorate([
-      PropWatch({ type: [String, Number], default: 'none' }),
+      PropWatch({ type: [Number, String], default: '100%' }),
       __metadata("design:type", Object)
-  ], ZdFrame.prototype, "minHeight", void 0);
+  ], ZdFrame.prototype, "width", void 0);
+  __decorate([
+      PropWatch({ type: [Number, String], default: 'auto' }),
+      __metadata("design:type", Object)
+  ], ZdFrame.prototype, "minWidth", void 0);
+  __decorate([
+      PropWatch({ type: [Number, String], default: 'none' }),
+      __metadata("design:type", Object)
+  ], ZdFrame.prototype, "maxWidth", void 0);
+  __decorate([
+      PropWatch({ type: [Boolean, String], default: false }),
+      __metadata("design:type", Object)
+  ], ZdFrame.prototype, "fillHeight", void 0);
   ZdFrame = __decorate([
       vuePropertyDecorator.Component
   ], ZdFrame);
@@ -44624,8 +44818,11 @@ If you're seeing "$attrs is readonly", it's caused by this`);
           {},
           {
             height: _vm.$formatSize(_vm.instance.height),
-            minHeight: _vm.$formatSize(_vm.instance.minHeight),
+            width: _vm.$formatSize(_vm.instance.width),
             maxHeight: _vm.$formatSize(_vm.instance.maxHeight),
+            minHeight: _vm.$formatSize(_vm.instance.minHeight),
+            maxWidth: _vm.$formatSize(_vm.instance.maxWidth),
+            minWidth: _vm.$formatSize(_vm.instance.minWidth),
           },
           _vm.$styleObject(_vm.instance.cssStyle)
         ),
@@ -44655,7 +44852,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$12 = function (inject) {
       if (!inject) return
-      inject("data-v-2c5980a4_0", { source: ".zd-frame {\n  height: inherit;\n  width: inherit;\n}\n.zd-frame .v-progress-circular {\n  left: 50%;\n  transform: translateX(-50%);\n}", map: undefined, media: undefined });
+      inject("data-v-1b1fa5e4_0", { source: ".zd-frame {\n  height: inherit;\n  width: inherit;\n}\n.zd-frame .v-progress-circular {\n  margin: var(--spacing-4) auto;\n  left: 50%;\n  transform: translateX(-50%);\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -44913,58 +45110,13 @@ If you're seeing "$attrs is readonly", it's caused by this`);
           }, 0);
       }
       mounted() {
-          this.setHeight();
           if (this.instance.dragColumns) {
               this.initDragColumns();
           }
           this.setViewGetWidth();
           this.updateFixedColumnsAction();
-      }
-      setHeight() {
-          const { gridTopSlot, grid, gridFooter } = this.$refs;
-          const header = gridTopSlot === null || gridTopSlot === void 0 ? void 0 : gridTopSlot.$el;
-          const footer = gridFooter === null || gridFooter === void 0 ? void 0 : gridFooter.$el;
-          if (!grid)
-              return;
-          const padding = this.getParentsPadding(grid.$el);
-          const headerHeight = this.getElementFullHeight(header);
-          const footerHeight = this.getElementFullHeight(footer);
           if (this.instance.fillHeight) {
-              this.instance.height = `${window.innerHeight - padding}px`;
-          }
-          if (this.instance.height) {
-              if (typeof this.instance.height === 'string'
-                  && this.instance.height.slice(-1) === '%') {
-                  const totalHeight = window.innerHeight - (headerHeight + footerHeight + padding);
-                  this.instance.height = (parseFloat(this.instance.height) / 100) * totalHeight;
-              }
-              else {
-                  this.instance.height = parseFloat(this.instance.height)
-                      - (headerHeight + footerHeight);
-              }
-          }
-          if (this.instance.maxHeight) {
-              const gridWrapper = grid.$el
-                  .getElementsByClassName('v-data-table__wrapper');
-              if (gridWrapper.length) {
-                  if (typeof this.instance.maxHeight === 'string'
-                      && this.instance.maxHeight.slice(-1) === '%') {
-                      const totalHeight = window.innerHeight - (headerHeight + footerHeight + padding);
-                      const maxHeight = `${(parseFloat(this.instance.maxHeight) / 100) * totalHeight}px`;
-                      gridWrapper[0].style.maxHeight = maxHeight;
-                  }
-                  else {
-                      const maxHeight = `${parseFloat(this.instance.maxHeight)
-                        - (headerHeight + footerHeight)}px`;
-                      gridWrapper[0].style.maxHeight = maxHeight;
-                  }
-              }
-          }
-          if (this.instance.gridHeight) {
-              grid.$el.style.height = this.$formatSize(this.instance.gridHeight);
-          }
-          if (this.instance.gridMaxHeight) {
-              grid.$el.style.maxHeight = this.$formatSize(this.instance.gridMaxHeight);
+              setFillHeight(this.$el);
           }
       }
       setViewGetWidth() {
@@ -45319,13 +45471,6 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       }),
       __metadata("design:type", Array)
   ], ZdGrid.prototype, "errorSlot", void 0);
-  __decorate([
-      PropWatch({
-          type: [Boolean, String],
-          default: false,
-      }),
-      __metadata("design:type", Object)
-  ], ZdGrid.prototype, "fillHeight", void 0);
   __decorate([
       vuePropertyDecorator.Prop({
           type: Array,
@@ -45369,33 +45514,33 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       __metadata("design:type", String)
   ], ZdGrid.prototype, "headerCellTextColor", void 0);
   __decorate([
-      PropWatch({
-          type: [Number, String],
-          default: undefined,
-      }),
+      PropWatch({ type: [Number, String], default: 'auto' }),
       __metadata("design:type", Object)
   ], ZdGrid.prototype, "height", void 0);
   __decorate([
-      PropWatch({
-          type: [Number, String],
-          default: undefined,
-      }),
+      PropWatch({ type: [Number, String], default: 'auto' }),
+      __metadata("design:type", Object)
+  ], ZdGrid.prototype, "minHeight", void 0);
+  __decorate([
+      PropWatch({ type: [Number, String], default: 'none' }),
       __metadata("design:type", Object)
   ], ZdGrid.prototype, "maxHeight", void 0);
   __decorate([
-      PropWatch({
-          type: [Number, String],
-          default: undefined,
-      }),
+      PropWatch({ type: [Number, String], default: '100%' }),
       __metadata("design:type", Object)
-  ], ZdGrid.prototype, "gridHeight", void 0);
+  ], ZdGrid.prototype, "width", void 0);
   __decorate([
-      PropWatch({
-          type: [Number, String],
-          default: undefined,
-      }),
+      PropWatch({ type: [Number, String], default: 'auto' }),
+      __metadata("design:type", Object)
+  ], ZdGrid.prototype, "minWidth", void 0);
+  __decorate([
+      PropWatch({ type: [Number, String], default: 'none' }),
+      __metadata("design:type", Object)
+  ], ZdGrid.prototype, "maxWidth", void 0);
+  __decorate([
+      PropWatch({ type: [Boolean, String], default: false }),
       __metadata("design:type", Object)
-  ], ZdGrid.prototype, "gridMaxHeight", void 0);
+  ], ZdGrid.prototype, "fillHeight", void 0);
   __decorate([
       vuePropertyDecorator.Prop({
           type: [String, Function],
@@ -45536,14 +45681,18 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       class: [
         "zd-grid",
         _vm.instance.cssClass,
-        { "zd-grid-flex": _vm.instance.gridHeight || _vm.instance.gridMaxHeight },
         { "zd-grid-loading": _vm.instance.datasource.loading },
       ],
       style: [
         _vm.cssColorVars,
-        _vm.instance.gridHeight
-          ? { height: _vm.$formatSize(_vm.instance.gridHeight) }
-          : {},
+        {
+          height: _vm.$formatSize(_vm.instance.height),
+          width: _vm.$formatSize(_vm.instance.width),
+          maxHeight: _vm.$formatSize(_vm.instance.maxHeight),
+          minHeight: _vm.$formatSize(_vm.instance.minHeight),
+          maxWidth: _vm.$formatSize(_vm.instance.maxWidth),
+          minWidth: _vm.$formatSize(_vm.instance.minWidth),
+        },
         _vm.$styleObject(_vm.instance.cssStyle),
       ],
       attrs: {
@@ -45556,7 +45705,6 @@ If you're seeing "$attrs is readonly", it's caused by this`);
         "hide-default-footer": "",
         name: _vm.instance.name,
         headers: _vm.instance.columns,
-        height: _vm.instance.height,
         items: _vm.getData(),
         search: _vm.instance.datasource.search,
         dense: _vm.instance.dense,
@@ -46323,7 +46471,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$10 = function (inject) {
       if (!inject) return
-      inject("data-v-a61a1640_0", { source: ".zd-grid {\n  outline: none;\n}\n.zd-grid-flex {\n  display: flex;\n  flex-direction: column;\n}\n.zd-grid-flex .v-data-table__wrapper {\n  flex: 1;\n}\n.zd-grid.theme--light:active table th.zd-table-cell, .zd-grid.theme--light:focus table th.zd-table-cell, .zd-grid.theme--light:focus-within table th.zd-table-cell {\n  color: var(--v-primary-base) !important;\n}\n.zd-grid-toolbar {\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: var(--spacing-4);\n  align-items: center;\n}\n.zd-grid-toolbar-slot {\n  width: 100%;\n  display: flex;\n  align-items: center;\n}\n.zd-grid-search {\n  max-width: 200px;\n}\n.zd-grid table .zd-table-cell {\n  transition: height 0.1s ease;\n}\n.zd-grid table .zd-table-cell.selectable {\n  width: 40px !important;\n  padding-right: var(--spacing-2) !important;\n  max-width: 40px !important;\n  padding-bottom: 0 !important;\n}\n.zd-grid table .zd-table-cell.selectable > div.zd-grid-header-checkbox {\n  margin-top: -2px;\n}\n.zd-grid table .zd-grid-header-checkbox, .zd-grid table .zd-grid-row-checkbox {\n  margin-top: 0;\n  padding-top: 0;\n}\n.zd-grid table .zd-grid-header-checkbox .v-icon, .zd-grid table .zd-grid-row-checkbox .v-icon {\n  font-size: var(--icon-size-small);\n}\n.zd-grid table .zd-grid-header-checkbox .v-input--selection-controls__ripple::before, .zd-grid table .zd-grid-row-checkbox .v-input--selection-controls__ripple::before {\n  display: none;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell {\n  font-size: var(--zd-font-body2-size);\n  font-weight: var(--zd-font-body2-weight);\n  white-space: nowrap;\n  height: 40px;\n  padding: 0 var(--spacing-4) var(--spacing-2) var(--spacing-4);\n  z-index: 4;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-header-cell {\n  width: 100%;\n  display: flex;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.text-left .zd-table-header-cell {\n  justify-content: flex-start;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.text-right .zd-table-header-cell {\n  justify-content: flex-end;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.text-center .zd-table-header-cell {\n  justify-content: center;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort {\n  opacity: 0;\n  position: relative;\n  display: inline-block;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort .zd-table-cell-sort-icon {\n  position: relative;\n  transition: none;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort .zd-table-cell-sort-order {\n  position: absolute;\n  font-size: 9px;\n  right: 2px;\n  color: var(--zd-font-color);\n  width: 12px;\n  text-align: center;\n  border-radius: 50%;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort .zd-table-cell-sort-order.left {\n  right: auto;\n  left: 2px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name {\n  opacity: 0.7;\n  white-space: pre;\n  display: inline-block;\n  vertical-align: bottom;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  overflow-wrap: break-word;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-hidden {\n  text-overflow: unset;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-wrap {\n  white-space: pre-wrap;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp {\n  white-space: normal;\n  -webkit-box-orient: vertical;\n  display: -webkit-box;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-2 {\n  -webkit-line-clamp: 2;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-3 {\n  -webkit-line-clamp: 3;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-4 {\n  -webkit-line-clamp: 4;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-5 {\n  -webkit-line-clamp: 5;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.sortable {\n  cursor: pointer;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.asc .zd-table-cell-sort .zd-table-cell-sort-icon {\n  top: -8px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.asc .zd-table-cell-sort .zd-table-cell-sort-order {\n  top: 6px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.desc .zd-table-cell-sort .zd-table-cell-sort-icon {\n  top: 3px;\n  transform: rotate(180deg);\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.desc .zd-table-cell-sort .zd-table-cell-sort-order {\n  top: -1px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell:hover .zd-table-cell-name, .zd-grid table .zd-grid-table-header th.zd-table-cell.active .zd-table-cell-name {\n  opacity: 1;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell:hover .zd-table-cell-sort, .zd-grid table .zd-grid-table-header th.zd-table-cell.active .zd-table-cell-sort {\n  opacity: 1;\n}\n.zd-grid table thead tr th.zd-table-cell.zd-table-fixed-column-action {\n  position: sticky !important;\n  right: 0;\n  z-index: 5;\n}\n.zd-grid table thead tr th.zd-table-cell.zd-table-fixed-column-action.theme--light {\n  background: #f7f7f7 !important;\n}\n.zd-grid table thead tr th.zd-table-cell.zd-table-fixed-column-action.theme--dark {\n  background: #3c3c3c !important;\n}\n.zd-grid table thead tr th .zd-grid-resize-handle {\n  height: 100%;\n  width: 10px;\n  display: block;\n  position: absolute;\n  top: 0;\n  right: 0;\n  cursor: ew-resize;\n  font-size: 15px;\n  color: #ccc;\n  display: none;\n}\n.zd-grid table thead tr th:hover .zd-grid-resize-handle {\n  display: block;\n}\n.zd-grid table tbody tr td.zd-table-cell {\n  font-size: var(--zd-font-body1-size);\n  font-weight: var(--zd-font-body1-weight);\n  padding: 0 var(--spacing-4);\n  height: 48px;\n}\n.zd-grid table tbody tr td.zd-table-cell.selectable {\n  overflow: hidden;\n}\n.zd-grid table tbody tr td.zd-table-cell.selectable .zd-grid-row-checkbox {\n  opacity: 0.7;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text {\n  display: block;\n  overflow: hidden;\n  white-space: pre;\n  text-overflow: ellipsis;\n  overflow-wrap: break-word;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-hidden {\n  text-overflow: unset;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-wrap {\n  white-space: pre-wrap;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp {\n  white-space: normal;\n  -webkit-box-orient: vertical;\n  display: -webkit-box;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-2 {\n  -webkit-line-clamp: 2;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-3 {\n  -webkit-line-clamp: 3;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-4 {\n  -webkit-line-clamp: 4;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-5 {\n  -webkit-line-clamp: 5;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-fixed-column-action {\n  position: sticky !important;\n  right: 0;\n  z-index: 3;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-fixed-column-action.theme--light {\n  background: #f7f7f7 !important;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-fixed-column-action.theme--dark {\n  background: #3c3c3c !important;\n}\n.zd-grid table tbody tr:hover td.zd-table-cell.selectable .zd-grid-row-checkbox, .zd-grid table tbody tr.active td.zd-table-cell.selectable .zd-grid-row-checkbox {\n  opacity: 1;\n}\n.zd-grid table tbody tr.current {\n  background: var(--current-row-color);\n}\n.zd-grid table tbody tr.current:hover {\n  background: var(--current-row-hover-color) !important;\n}\n.zd-grid.v-data-table--dense table thead tr th.zd-table-cell {\n  padding: 0 var(--spacing-2) var(--spacing-1) var(--spacing-2);\n  height: 24px;\n}\n.zd-grid.v-data-table--dense table tbody tr td.zd-table-cell {\n  padding: 0 var(--spacing-2);\n  height: 29px;\n}\n.zd-grid.theme--light.v-data-table {\n  background-color: transparent;\n}\n.zd-grid.theme--light table thead th.zd-table-cell {\n  color: var(--zd-font-color) !important;\n}\n.zd-grid.theme--light table thead th.zd-table-cell.selectable .zd-grid-header-checkbox.v-input--indeterminate .v-icon,\n.zd-grid.theme--light table thead th.zd-table-cell.selectable .zd-grid-header-checkbox.v-input--is-label-active .v-icon {\n  color: var(--v-primary-base);\n}\n.zd-grid.theme--light table tbody td.zd-table-cell {\n  color: var(--zd-font-color);\n}\n.zd-grid.theme--light table tbody tr:not(:last-child) td:not(.v-data-table__mobile-row) {\n  border-bottom: solid var(--regular) var(--v-grey-lighten5);\n}\n.zd-grid.theme--light.v-data-table--fixed-header table thead th.zd-table-cell {\n  box-shadow: inset 0 -1px 0 var(--v-grey-lighten3);\n}\n.zd-grid-footer {\n  margin: 24px 0 0 0;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 1rem;\n}\n.zd-grid-div-footer {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n@media screen and (max-width: 425px) {\n.zd-grid-footer {\n    flex-direction: column;\n    justify-content: center;\n}\n.zd-grid-div-footer {\n    width: 100%;\n}\n.zd-grid .zd-iterable-pagination {\n    justify-content: space-evenly;\n}\n}\n.zd-grid .zd-skeleton-table-cell .v-skeleton-loader__table-cell {\n  height: auto;\n}\n.zd-grid .zd-grid-cell-tooltip {\n  z-index: 10000;\n  position: fixed;\n  color: white;\n  background-color: var(--v-grey-lighten1);\n  border-radius: var(--border);\n  padding: var(--spacing-1) var(--spacing-2);\n  opacity: 0.9;\n  display: none;\n  font-size: 14px;\n  line-height: 22px;\n  text-transform: none;\n  width: auto;\n  pointer-events: none;\n  white-space: pre;\n}\n.zd-grid .zd-grid-cell-tooltip.zd-grid-cell-tooltip-show {\n  display: block;\n  white-space: normal;\n}\n.zd-grid-loading {\n  pointer-events: none;\n}\n.v-data-table__progress {\n  position: sticky;\n  top: 24px;\n}\n.v-data-table--mobile > .v-data-table__wrapper tbody {\n  display: contents;\n  flex-direction: column;\n}", map: undefined, media: undefined });
+      inject("data-v-2c72ade1_0", { source: ".zd-grid {\n  outline: none;\n  display: flex;\n  flex-direction: column;\n}\n.zd-grid.theme--light:active table th.zd-table-cell, .zd-grid.theme--light:focus table th.zd-table-cell, .zd-grid.theme--light:focus-within table th.zd-table-cell {\n  color: var(--v-primary-base) !important;\n}\n.zd-grid-toolbar {\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: var(--spacing-4);\n  align-items: center;\n  flex: 0 0 auto;\n}\n.zd-grid-toolbar-slot {\n  width: 100%;\n  display: flex;\n  align-items: center;\n}\n.zd-grid .v-data-table__wrapper {\n  flex: 1 1 auto;\n}\n.zd-grid-search {\n  max-width: 200px;\n}\n.zd-grid table .zd-table-cell {\n  transition: height 0.1s ease;\n}\n.zd-grid table .zd-table-cell.selectable {\n  width: 40px !important;\n  padding-right: var(--spacing-2) !important;\n  max-width: 40px !important;\n  padding-bottom: 0 !important;\n}\n.zd-grid table .zd-table-cell.selectable > div.zd-grid-header-checkbox {\n  margin-top: -2px;\n}\n.zd-grid table .zd-grid-header-checkbox, .zd-grid table .zd-grid-row-checkbox {\n  margin-top: 0;\n  padding-top: 0;\n}\n.zd-grid table .zd-grid-header-checkbox .v-icon, .zd-grid table .zd-grid-row-checkbox .v-icon {\n  font-size: var(--icon-size-small);\n}\n.zd-grid table .zd-grid-header-checkbox .v-input--selection-controls__ripple::before, .zd-grid table .zd-grid-row-checkbox .v-input--selection-controls__ripple::before {\n  display: none;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell {\n  font-size: var(--zd-font-body2-size);\n  font-weight: var(--zd-font-body2-weight);\n  white-space: nowrap;\n  height: 40px;\n  padding: 0 var(--spacing-4) var(--spacing-2) var(--spacing-4);\n  z-index: 4;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-header-cell {\n  width: 100%;\n  display: flex;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.text-left .zd-table-header-cell {\n  justify-content: flex-start;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.text-right .zd-table-header-cell {\n  justify-content: flex-end;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.text-center .zd-table-header-cell {\n  justify-content: center;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort {\n  opacity: 0;\n  position: relative;\n  display: inline-block;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort .zd-table-cell-sort-icon {\n  position: relative;\n  transition: none;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort .zd-table-cell-sort-order {\n  position: absolute;\n  font-size: 9px;\n  right: 2px;\n  color: var(--zd-font-color);\n  width: 12px;\n  text-align: center;\n  border-radius: 50%;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort .zd-table-cell-sort-order.left {\n  right: auto;\n  left: 2px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name {\n  opacity: 0.7;\n  white-space: pre;\n  display: inline-block;\n  vertical-align: bottom;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  overflow-wrap: break-word;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-hidden {\n  text-overflow: unset;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-wrap {\n  white-space: pre-wrap;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp {\n  white-space: normal;\n  -webkit-box-orient: vertical;\n  display: -webkit-box;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-2 {\n  -webkit-line-clamp: 2;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-3 {\n  -webkit-line-clamp: 3;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-4 {\n  -webkit-line-clamp: 4;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-5 {\n  -webkit-line-clamp: 5;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.sortable {\n  cursor: pointer;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.asc .zd-table-cell-sort .zd-table-cell-sort-icon {\n  top: -8px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.asc .zd-table-cell-sort .zd-table-cell-sort-order {\n  top: 6px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.desc .zd-table-cell-sort .zd-table-cell-sort-icon {\n  top: 3px;\n  transform: rotate(180deg);\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.desc .zd-table-cell-sort .zd-table-cell-sort-order {\n  top: -1px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell:hover .zd-table-cell-name, .zd-grid table .zd-grid-table-header th.zd-table-cell.active .zd-table-cell-name {\n  opacity: 1;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell:hover .zd-table-cell-sort, .zd-grid table .zd-grid-table-header th.zd-table-cell.active .zd-table-cell-sort {\n  opacity: 1;\n}\n.zd-grid table thead tr th.zd-table-cell.zd-table-fixed-column-action {\n  position: sticky !important;\n  right: 0;\n  z-index: 5;\n}\n.zd-grid table thead tr th.zd-table-cell.zd-table-fixed-column-action.theme--light {\n  background: #f7f7f7 !important;\n}\n.zd-grid table thead tr th.zd-table-cell.zd-table-fixed-column-action.theme--dark {\n  background: #3c3c3c !important;\n}\n.zd-grid table thead tr th .zd-grid-resize-handle {\n  height: 100%;\n  width: 10px;\n  display: block;\n  position: absolute;\n  top: 0;\n  right: 0;\n  cursor: ew-resize;\n  font-size: 15px;\n  color: #ccc;\n  display: none;\n}\n.zd-grid table thead tr th:hover .zd-grid-resize-handle {\n  display: block;\n}\n.zd-grid table tbody tr td.zd-table-cell {\n  font-size: var(--zd-font-body1-size);\n  font-weight: var(--zd-font-body1-weight);\n  padding: 0 var(--spacing-4);\n  height: 48px;\n}\n.zd-grid table tbody tr td.zd-table-cell.selectable {\n  overflow: hidden;\n}\n.zd-grid table tbody tr td.zd-table-cell.selectable .zd-grid-row-checkbox {\n  opacity: 0.7;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text {\n  display: block;\n  overflow: hidden;\n  white-space: pre;\n  text-overflow: ellipsis;\n  overflow-wrap: break-word;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-hidden {\n  text-overflow: unset;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-wrap {\n  white-space: pre-wrap;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp {\n  white-space: normal;\n  -webkit-box-orient: vertical;\n  display: -webkit-box;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-2 {\n  -webkit-line-clamp: 2;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-3 {\n  -webkit-line-clamp: 3;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-4 {\n  -webkit-line-clamp: 4;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-5 {\n  -webkit-line-clamp: 5;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-fixed-column-action {\n  position: sticky !important;\n  right: 0;\n  z-index: 3;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-fixed-column-action.theme--light {\n  background: #f7f7f7 !important;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-fixed-column-action.theme--dark {\n  background: #3c3c3c !important;\n}\n.zd-grid table tbody tr:hover td.zd-table-cell.selectable .zd-grid-row-checkbox, .zd-grid table tbody tr.active td.zd-table-cell.selectable .zd-grid-row-checkbox {\n  opacity: 1;\n}\n.zd-grid table tbody tr.current {\n  background: var(--current-row-color);\n}\n.zd-grid table tbody tr.current:hover {\n  background: var(--current-row-hover-color) !important;\n}\n.zd-grid.v-data-table--dense table thead tr th.zd-table-cell {\n  padding: 0 var(--spacing-2) var(--spacing-1) var(--spacing-2);\n  height: 24px;\n}\n.zd-grid.v-data-table--dense table tbody tr td.zd-table-cell {\n  padding: 0 var(--spacing-2);\n  height: 29px;\n}\n.zd-grid.theme--light.v-data-table {\n  background-color: transparent;\n}\n.zd-grid.theme--light table thead th.zd-table-cell {\n  color: var(--zd-font-color) !important;\n}\n.zd-grid.theme--light table thead th.zd-table-cell.selectable .zd-grid-header-checkbox.v-input--indeterminate .v-icon,\n.zd-grid.theme--light table thead th.zd-table-cell.selectable .zd-grid-header-checkbox.v-input--is-label-active .v-icon {\n  color: var(--v-primary-base);\n}\n.zd-grid.theme--light table tbody td.zd-table-cell {\n  color: var(--zd-font-color);\n}\n.zd-grid.theme--light table tbody tr:not(:last-child) td:not(.v-data-table__mobile-row) {\n  border-bottom: solid var(--regular) var(--v-grey-lighten5);\n}\n.zd-grid.theme--light.v-data-table--fixed-header table thead th.zd-table-cell {\n  box-shadow: inset 0 -1px 0 var(--v-grey-lighten3);\n}\n.zd-grid-footer {\n  margin: var(--spacing-4) 0 0 0;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 1rem;\n  flex: 0 0 auto;\n}\n.zd-grid-div-footer {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n@media screen and (max-width: 425px) {\n.zd-grid-footer {\n    flex-direction: column;\n    justify-content: center;\n}\n.zd-grid-div-footer {\n    width: 100%;\n}\n.zd-grid .zd-iterable-pagination {\n    justify-content: space-evenly;\n}\n}\n.zd-grid .zd-skeleton-table-cell .v-skeleton-loader__table-cell {\n  height: auto;\n}\n.zd-grid .zd-grid-cell-tooltip {\n  z-index: 10000;\n  position: fixed;\n  color: white;\n  background-color: var(--v-grey-lighten1);\n  border-radius: var(--border);\n  padding: var(--spacing-1) var(--spacing-2);\n  opacity: 0.9;\n  display: none;\n  font-size: 14px;\n  line-height: 22px;\n  text-transform: none;\n  width: auto;\n  pointer-events: none;\n  white-space: pre;\n}\n.zd-grid .zd-grid-cell-tooltip.zd-grid-cell-tooltip-show {\n  display: block;\n  white-space: normal;\n}\n.zd-grid-loading {\n  pointer-events: none;\n}\n.v-data-table__progress {\n  position: sticky;\n  top: 24px;\n}\n.v-data-table--mobile > .v-data-table__wrapper tbody {\n  display: contents;\n  flex-direction: column;\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -46559,14 +46707,18 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       class: [
         "zd-grid",
         _vm.instance.cssClass,
-        { "zd-grid-flex": _vm.instance.gridHeight || _vm.instance.gridMaxHeight },
         { "zd-grid-loading": _vm.instance.datasource.loading },
       ],
       style: [
         _vm.cssColorVars,
-        _vm.instance.gridHeight
-          ? { height: _vm.$formatSize(_vm.instance.gridHeight) }
-          : {},
+        {
+          height: _vm.$formatSize(_vm.instance.height),
+          width: _vm.$formatSize(_vm.instance.width),
+          maxHeight: _vm.$formatSize(_vm.instance.maxHeight),
+          minHeight: _vm.$formatSize(_vm.instance.minHeight),
+          maxWidth: _vm.$formatSize(_vm.instance.maxWidth),
+          minWidth: _vm.$formatSize(_vm.instance.minWidth),
+        },
         _vm.$styleObject(_vm.instance.cssStyle),
       ],
       attrs: {
@@ -47197,6 +47349,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                                                           _vm.getWidthStyle,
                                                         column: column,
                                                         row: item,
+                                                        rowKey: _vm.rowKey(item),
                                                         rowStyle: rowStyle,
                                                         cellsApplied:
                                                           cellsApplied,
@@ -47443,8 +47596,8 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$$ = function (inject) {
       if (!inject) return
-      inject("data-v-262354c4_0", { source: ".zd-grid {\n  outline: none;\n}\n.zd-grid-flex {\n  display: flex;\n  flex-direction: column;\n}\n.zd-grid-flex .v-data-table__wrapper {\n  flex: 1;\n}\n.zd-grid.theme--light:active table th.zd-table-cell, .zd-grid.theme--light:focus table th.zd-table-cell, .zd-grid.theme--light:focus-within table th.zd-table-cell {\n  color: var(--v-primary-base) !important;\n}\n.zd-grid-toolbar {\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: var(--spacing-4);\n  align-items: center;\n}\n.zd-grid-toolbar-slot {\n  width: 100%;\n  display: flex;\n  align-items: center;\n}\n.zd-grid-search {\n  max-width: 200px;\n}\n.zd-grid table .zd-table-cell {\n  transition: height 0.1s ease;\n}\n.zd-grid table .zd-table-cell.selectable {\n  width: 40px !important;\n  padding-right: var(--spacing-2) !important;\n  max-width: 40px !important;\n  padding-bottom: 0 !important;\n}\n.zd-grid table .zd-table-cell.selectable > div.zd-grid-header-checkbox {\n  margin-top: -2px;\n}\n.zd-grid table .zd-grid-header-checkbox, .zd-grid table .zd-grid-row-checkbox {\n  margin-top: 0;\n  padding-top: 0;\n}\n.zd-grid table .zd-grid-header-checkbox .v-icon, .zd-grid table .zd-grid-row-checkbox .v-icon {\n  font-size: var(--icon-size-small);\n}\n.zd-grid table .zd-grid-header-checkbox .v-input--selection-controls__ripple::before, .zd-grid table .zd-grid-row-checkbox .v-input--selection-controls__ripple::before {\n  display: none;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell {\n  font-size: var(--zd-font-body2-size);\n  font-weight: var(--zd-font-body2-weight);\n  white-space: nowrap;\n  height: 40px;\n  padding: 0 var(--spacing-4) var(--spacing-2) var(--spacing-4);\n  z-index: 4;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-header-cell {\n  width: 100%;\n  display: flex;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.text-left .zd-table-header-cell {\n  justify-content: flex-start;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.text-right .zd-table-header-cell {\n  justify-content: flex-end;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.text-center .zd-table-header-cell {\n  justify-content: center;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort {\n  opacity: 0;\n  position: relative;\n  display: inline-block;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort .zd-table-cell-sort-icon {\n  position: relative;\n  transition: none;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort .zd-table-cell-sort-order {\n  position: absolute;\n  font-size: 9px;\n  right: 2px;\n  color: var(--zd-font-color);\n  width: 12px;\n  text-align: center;\n  border-radius: 50%;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort .zd-table-cell-sort-order.left {\n  right: auto;\n  left: 2px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name {\n  opacity: 0.7;\n  white-space: pre;\n  display: inline-block;\n  vertical-align: bottom;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  overflow-wrap: break-word;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-hidden {\n  text-overflow: unset;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-wrap {\n  white-space: pre-wrap;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp {\n  white-space: normal;\n  -webkit-box-orient: vertical;\n  display: -webkit-box;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-2 {\n  -webkit-line-clamp: 2;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-3 {\n  -webkit-line-clamp: 3;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-4 {\n  -webkit-line-clamp: 4;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-5 {\n  -webkit-line-clamp: 5;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.sortable {\n  cursor: pointer;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.asc .zd-table-cell-sort .zd-table-cell-sort-icon {\n  top: -8px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.asc .zd-table-cell-sort .zd-table-cell-sort-order {\n  top: 6px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.desc .zd-table-cell-sort .zd-table-cell-sort-icon {\n  top: 3px;\n  transform: rotate(180deg);\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.desc .zd-table-cell-sort .zd-table-cell-sort-order {\n  top: -1px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell:hover .zd-table-cell-name, .zd-grid table .zd-grid-table-header th.zd-table-cell.active .zd-table-cell-name {\n  opacity: 1;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell:hover .zd-table-cell-sort, .zd-grid table .zd-grid-table-header th.zd-table-cell.active .zd-table-cell-sort {\n  opacity: 1;\n}\n.zd-grid table thead tr th.zd-table-cell.zd-table-fixed-column-action {\n  position: sticky !important;\n  right: 0;\n  z-index: 5;\n}\n.zd-grid table thead tr th.zd-table-cell.zd-table-fixed-column-action.theme--light {\n  background: #f7f7f7 !important;\n}\n.zd-grid table thead tr th.zd-table-cell.zd-table-fixed-column-action.theme--dark {\n  background: #3c3c3c !important;\n}\n.zd-grid table thead tr th .zd-grid-resize-handle {\n  height: 100%;\n  width: 10px;\n  display: block;\n  position: absolute;\n  top: 0;\n  right: 0;\n  cursor: ew-resize;\n  font-size: 15px;\n  color: #ccc;\n  display: none;\n}\n.zd-grid table thead tr th:hover .zd-grid-resize-handle {\n  display: block;\n}\n.zd-grid table tbody tr td.zd-table-cell {\n  font-size: var(--zd-font-body1-size);\n  font-weight: var(--zd-font-body1-weight);\n  padding: 0 var(--spacing-4);\n  height: 48px;\n}\n.zd-grid table tbody tr td.zd-table-cell.selectable {\n  overflow: hidden;\n}\n.zd-grid table tbody tr td.zd-table-cell.selectable .zd-grid-row-checkbox {\n  opacity: 0.7;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text {\n  display: block;\n  overflow: hidden;\n  white-space: pre;\n  text-overflow: ellipsis;\n  overflow-wrap: break-word;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-hidden {\n  text-overflow: unset;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-wrap {\n  white-space: pre-wrap;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp {\n  white-space: normal;\n  -webkit-box-orient: vertical;\n  display: -webkit-box;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-2 {\n  -webkit-line-clamp: 2;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-3 {\n  -webkit-line-clamp: 3;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-4 {\n  -webkit-line-clamp: 4;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-5 {\n  -webkit-line-clamp: 5;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-fixed-column-action {\n  position: sticky !important;\n  right: 0;\n  z-index: 3;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-fixed-column-action.theme--light {\n  background: #f7f7f7 !important;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-fixed-column-action.theme--dark {\n  background: #3c3c3c !important;\n}\n.zd-grid table tbody tr:hover td.zd-table-cell.selectable .zd-grid-row-checkbox, .zd-grid table tbody tr.active td.zd-table-cell.selectable .zd-grid-row-checkbox {\n  opacity: 1;\n}\n.zd-grid table tbody tr.current {\n  background: var(--current-row-color);\n}\n.zd-grid table tbody tr.current:hover {\n  background: var(--current-row-hover-color) !important;\n}\n.zd-grid.v-data-table--dense table thead tr th.zd-table-cell {\n  padding: 0 var(--spacing-2) var(--spacing-1) var(--spacing-2);\n  height: 24px;\n}\n.zd-grid.v-data-table--dense table tbody tr td.zd-table-cell {\n  padding: 0 var(--spacing-2);\n  height: 29px;\n}\n.zd-grid.theme--light.v-data-table {\n  background-color: transparent;\n}\n.zd-grid.theme--light table thead th.zd-table-cell {\n  color: var(--zd-font-color) !important;\n}\n.zd-grid.theme--light table thead th.zd-table-cell.selectable .zd-grid-header-checkbox.v-input--indeterminate .v-icon,\n.zd-grid.theme--light table thead th.zd-table-cell.selectable .zd-grid-header-checkbox.v-input--is-label-active .v-icon {\n  color: var(--v-primary-base);\n}\n.zd-grid.theme--light table tbody td.zd-table-cell {\n  color: var(--zd-font-color);\n}\n.zd-grid.theme--light table tbody tr:not(:last-child) td:not(.v-data-table__mobile-row) {\n  border-bottom: solid var(--regular) var(--v-grey-lighten5);\n}\n.zd-grid.theme--light.v-data-table--fixed-header table thead th.zd-table-cell {\n  box-shadow: inset 0 -1px 0 var(--v-grey-lighten3);\n}\n.zd-grid-footer {\n  margin: 24px 0 0 0;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 1rem;\n}\n.zd-grid-div-footer {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n@media screen and (max-width: 425px) {\n.zd-grid-footer {\n    flex-direction: column;\n    justify-content: center;\n}\n.zd-grid-div-footer {\n    width: 100%;\n}\n.zd-grid .zd-iterable-pagination {\n    justify-content: space-evenly;\n}\n}\n.zd-grid .zd-skeleton-table-cell .v-skeleton-loader__table-cell {\n  height: auto;\n}\n.zd-grid .zd-grid-cell-tooltip {\n  z-index: 10000;\n  position: fixed;\n  color: white;\n  background-color: var(--v-grey-lighten1);\n  border-radius: var(--border);\n  padding: var(--spacing-1) var(--spacing-2);\n  opacity: 0.9;\n  display: none;\n  font-size: 14px;\n  line-height: 22px;\n  text-transform: none;\n  width: auto;\n  pointer-events: none;\n  white-space: pre;\n}\n.zd-grid .zd-grid-cell-tooltip.zd-grid-cell-tooltip-show {\n  display: block;\n  white-space: normal;\n}\n.zd-grid-loading {\n  pointer-events: none;\n}\n.v-data-table__progress {\n  position: sticky;\n  top: 24px;\n}\n.v-data-table--mobile > .v-data-table__wrapper tbody {\n  display: contents;\n  flex-direction: column;\n}", map: undefined, media: undefined })
-  ,inject("data-v-262354c4_1", { source: ".zd-grid table tbody tr td.zd-table-cell.zd-table-column-editable.text-right .zd-table-cell-inline-edit, .zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable.text-right .zd-table-cell-inline-edit {\n  justify-content: flex-end;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-column-editable.text-center .zd-table-cell-inline-edit, .zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable.text-center .zd-table-cell-inline-edit {\n  justify-content: center;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-inline-edit, .zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-inline-edit {\n  display: flex;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-inline-edit .zd-table-cell-edit-icon .v-icon, .zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-inline-edit .zd-table-cell-edit-icon .v-icon {\n  display: flex;\n  font-size: 18px;\n  margin-right: var(--spacing-1);\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-text, .zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text {\n  padding: 0 8px;\n  position: relative;\n  display: block;\n  height: 20px;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-text:before, .zd-grid table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-text:after, .zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text:before, .zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text:after {\n  content: \"\";\n  position: absolute;\n  width: 1px;\n  height: var(--spacing-1);\n  bottom: 0px;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-text:before, .zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text:before {\n  left: 0;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-text:after, .zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text:after {\n  right: 0px;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable {\n  cursor: pointer;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text {\n  border-bottom: solid var(--regular) var(--v-grey-lighten4);\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text:before, .zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text:after {\n  border-left: solid var(--regular) var(--v-grey-lighten4);\n}\n.zd-grid.v-data-table--dense table tbody .zd-input.zd-text-input .v-input__slot {\n  height: 22px;\n}\n.zd-grid.v-data-table--dense table tbody .zd-input.zd-text-input .v-input__slot input, .zd-grid.v-data-table--dense table tbody .zd-input.zd-text-input .v-input__slot .v-select__selections {\n  height: 22px;\n  max-height: 22px;\n}", map: undefined, media: undefined });
+      inject("data-v-09891360_0", { source: ".zd-grid {\n  outline: none;\n  display: flex;\n  flex-direction: column;\n}\n.zd-grid.theme--light:active table th.zd-table-cell, .zd-grid.theme--light:focus table th.zd-table-cell, .zd-grid.theme--light:focus-within table th.zd-table-cell {\n  color: var(--v-primary-base) !important;\n}\n.zd-grid-toolbar {\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: var(--spacing-4);\n  align-items: center;\n  flex: 0 0 auto;\n}\n.zd-grid-toolbar-slot {\n  width: 100%;\n  display: flex;\n  align-items: center;\n}\n.zd-grid .v-data-table__wrapper {\n  flex: 1 1 auto;\n}\n.zd-grid-search {\n  max-width: 200px;\n}\n.zd-grid table .zd-table-cell {\n  transition: height 0.1s ease;\n}\n.zd-grid table .zd-table-cell.selectable {\n  width: 40px !important;\n  padding-right: var(--spacing-2) !important;\n  max-width: 40px !important;\n  padding-bottom: 0 !important;\n}\n.zd-grid table .zd-table-cell.selectable > div.zd-grid-header-checkbox {\n  margin-top: -2px;\n}\n.zd-grid table .zd-grid-header-checkbox, .zd-grid table .zd-grid-row-checkbox {\n  margin-top: 0;\n  padding-top: 0;\n}\n.zd-grid table .zd-grid-header-checkbox .v-icon, .zd-grid table .zd-grid-row-checkbox .v-icon {\n  font-size: var(--icon-size-small);\n}\n.zd-grid table .zd-grid-header-checkbox .v-input--selection-controls__ripple::before, .zd-grid table .zd-grid-row-checkbox .v-input--selection-controls__ripple::before {\n  display: none;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell {\n  font-size: var(--zd-font-body2-size);\n  font-weight: var(--zd-font-body2-weight);\n  white-space: nowrap;\n  height: 40px;\n  padding: 0 var(--spacing-4) var(--spacing-2) var(--spacing-4);\n  z-index: 4;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-header-cell {\n  width: 100%;\n  display: flex;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.text-left .zd-table-header-cell {\n  justify-content: flex-start;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.text-right .zd-table-header-cell {\n  justify-content: flex-end;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.text-center .zd-table-header-cell {\n  justify-content: center;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort {\n  opacity: 0;\n  position: relative;\n  display: inline-block;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort .zd-table-cell-sort-icon {\n  position: relative;\n  transition: none;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort .zd-table-cell-sort-order {\n  position: absolute;\n  font-size: 9px;\n  right: 2px;\n  color: var(--zd-font-color);\n  width: 12px;\n  text-align: center;\n  border-radius: 50%;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort .zd-table-cell-sort-order.left {\n  right: auto;\n  left: 2px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name {\n  opacity: 0.7;\n  white-space: pre;\n  display: inline-block;\n  vertical-align: bottom;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  overflow-wrap: break-word;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-hidden {\n  text-overflow: unset;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-wrap {\n  white-space: pre-wrap;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp {\n  white-space: normal;\n  -webkit-box-orient: vertical;\n  display: -webkit-box;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-2 {\n  -webkit-line-clamp: 2;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-3 {\n  -webkit-line-clamp: 3;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-4 {\n  -webkit-line-clamp: 4;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-5 {\n  -webkit-line-clamp: 5;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.sortable {\n  cursor: pointer;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.asc .zd-table-cell-sort .zd-table-cell-sort-icon {\n  top: -8px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.asc .zd-table-cell-sort .zd-table-cell-sort-order {\n  top: 6px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.desc .zd-table-cell-sort .zd-table-cell-sort-icon {\n  top: 3px;\n  transform: rotate(180deg);\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.desc .zd-table-cell-sort .zd-table-cell-sort-order {\n  top: -1px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell:hover .zd-table-cell-name, .zd-grid table .zd-grid-table-header th.zd-table-cell.active .zd-table-cell-name {\n  opacity: 1;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell:hover .zd-table-cell-sort, .zd-grid table .zd-grid-table-header th.zd-table-cell.active .zd-table-cell-sort {\n  opacity: 1;\n}\n.zd-grid table thead tr th.zd-table-cell.zd-table-fixed-column-action {\n  position: sticky !important;\n  right: 0;\n  z-index: 5;\n}\n.zd-grid table thead tr th.zd-table-cell.zd-table-fixed-column-action.theme--light {\n  background: #f7f7f7 !important;\n}\n.zd-grid table thead tr th.zd-table-cell.zd-table-fixed-column-action.theme--dark {\n  background: #3c3c3c !important;\n}\n.zd-grid table thead tr th .zd-grid-resize-handle {\n  height: 100%;\n  width: 10px;\n  display: block;\n  position: absolute;\n  top: 0;\n  right: 0;\n  cursor: ew-resize;\n  font-size: 15px;\n  color: #ccc;\n  display: none;\n}\n.zd-grid table thead tr th:hover .zd-grid-resize-handle {\n  display: block;\n}\n.zd-grid table tbody tr td.zd-table-cell {\n  font-size: var(--zd-font-body1-size);\n  font-weight: var(--zd-font-body1-weight);\n  padding: 0 var(--spacing-4);\n  height: 48px;\n}\n.zd-grid table tbody tr td.zd-table-cell.selectable {\n  overflow: hidden;\n}\n.zd-grid table tbody tr td.zd-table-cell.selectable .zd-grid-row-checkbox {\n  opacity: 0.7;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text {\n  display: block;\n  overflow: hidden;\n  white-space: pre;\n  text-overflow: ellipsis;\n  overflow-wrap: break-word;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-hidden {\n  text-overflow: unset;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-wrap {\n  white-space: pre-wrap;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp {\n  white-space: normal;\n  -webkit-box-orient: vertical;\n  display: -webkit-box;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-2 {\n  -webkit-line-clamp: 2;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-3 {\n  -webkit-line-clamp: 3;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-4 {\n  -webkit-line-clamp: 4;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-5 {\n  -webkit-line-clamp: 5;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-fixed-column-action {\n  position: sticky !important;\n  right: 0;\n  z-index: 3;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-fixed-column-action.theme--light {\n  background: #f7f7f7 !important;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-fixed-column-action.theme--dark {\n  background: #3c3c3c !important;\n}\n.zd-grid table tbody tr:hover td.zd-table-cell.selectable .zd-grid-row-checkbox, .zd-grid table tbody tr.active td.zd-table-cell.selectable .zd-grid-row-checkbox {\n  opacity: 1;\n}\n.zd-grid table tbody tr.current {\n  background: var(--current-row-color);\n}\n.zd-grid table tbody tr.current:hover {\n  background: var(--current-row-hover-color) !important;\n}\n.zd-grid.v-data-table--dense table thead tr th.zd-table-cell {\n  padding: 0 var(--spacing-2) var(--spacing-1) var(--spacing-2);\n  height: 24px;\n}\n.zd-grid.v-data-table--dense table tbody tr td.zd-table-cell {\n  padding: 0 var(--spacing-2);\n  height: 29px;\n}\n.zd-grid.theme--light.v-data-table {\n  background-color: transparent;\n}\n.zd-grid.theme--light table thead th.zd-table-cell {\n  color: var(--zd-font-color) !important;\n}\n.zd-grid.theme--light table thead th.zd-table-cell.selectable .zd-grid-header-checkbox.v-input--indeterminate .v-icon,\n.zd-grid.theme--light table thead th.zd-table-cell.selectable .zd-grid-header-checkbox.v-input--is-label-active .v-icon {\n  color: var(--v-primary-base);\n}\n.zd-grid.theme--light table tbody td.zd-table-cell {\n  color: var(--zd-font-color);\n}\n.zd-grid.theme--light table tbody tr:not(:last-child) td:not(.v-data-table__mobile-row) {\n  border-bottom: solid var(--regular) var(--v-grey-lighten5);\n}\n.zd-grid.theme--light.v-data-table--fixed-header table thead th.zd-table-cell {\n  box-shadow: inset 0 -1px 0 var(--v-grey-lighten3);\n}\n.zd-grid-footer {\n  margin: var(--spacing-4) 0 0 0;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 1rem;\n  flex: 0 0 auto;\n}\n.zd-grid-div-footer {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n@media screen and (max-width: 425px) {\n.zd-grid-footer {\n    flex-direction: column;\n    justify-content: center;\n}\n.zd-grid-div-footer {\n    width: 100%;\n}\n.zd-grid .zd-iterable-pagination {\n    justify-content: space-evenly;\n}\n}\n.zd-grid .zd-skeleton-table-cell .v-skeleton-loader__table-cell {\n  height: auto;\n}\n.zd-grid .zd-grid-cell-tooltip {\n  z-index: 10000;\n  position: fixed;\n  color: white;\n  background-color: var(--v-grey-lighten1);\n  border-radius: var(--border);\n  padding: var(--spacing-1) var(--spacing-2);\n  opacity: 0.9;\n  display: none;\n  font-size: 14px;\n  line-height: 22px;\n  text-transform: none;\n  width: auto;\n  pointer-events: none;\n  white-space: pre;\n}\n.zd-grid .zd-grid-cell-tooltip.zd-grid-cell-tooltip-show {\n  display: block;\n  white-space: normal;\n}\n.zd-grid-loading {\n  pointer-events: none;\n}\n.v-data-table__progress {\n  position: sticky;\n  top: 24px;\n}\n.v-data-table--mobile > .v-data-table__wrapper tbody {\n  display: contents;\n  flex-direction: column;\n}", map: undefined, media: undefined })
+  ,inject("data-v-09891360_1", { source: ".zd-grid table tbody tr td.zd-table-cell.zd-table-column-editable.text-right .zd-table-cell-inline-edit, .zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable.text-right .zd-table-cell-inline-edit {\n  justify-content: flex-end;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-column-editable.text-center .zd-table-cell-inline-edit, .zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable.text-center .zd-table-cell-inline-edit {\n  justify-content: center;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-inline-edit, .zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-inline-edit {\n  display: flex;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-inline-edit .zd-table-cell-edit-icon .v-icon, .zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-inline-edit .zd-table-cell-edit-icon .v-icon {\n  display: flex;\n  font-size: 18px;\n  margin-right: var(--spacing-1);\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-text, .zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text {\n  padding: 0 8px;\n  position: relative;\n  display: block;\n  height: 20px;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-text:before, .zd-grid table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-text:after, .zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text:before, .zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text:after {\n  content: \"\";\n  position: absolute;\n  width: 1px;\n  height: var(--spacing-1);\n  bottom: 0px;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-text:before, .zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text:before {\n  left: 0;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-text:after, .zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text:after {\n  right: 0px;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable {\n  cursor: pointer;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text {\n  border-bottom: solid var(--regular) var(--v-grey-lighten4);\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text:before, .zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text:after {\n  border-left: solid var(--regular) var(--v-grey-lighten4);\n}\n.zd-grid.v-data-table--dense table tbody .zd-input.zd-text-input .v-input__slot {\n  height: 22px;\n}\n.zd-grid.v-data-table--dense table tbody .zd-input.zd-text-input .v-input__slot input, .zd-grid.v-data-table--dense table tbody .zd-input.zd-text-input .v-input__slot .v-select__selections {\n  height: 22px;\n  max-height: 22px;\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -48542,6 +48695,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       vuePropertyDecorator.Prop({ type: Object, required: true }),
       __metadata("design:type", Object)
   ], ZdGridCellEdit.prototype, "row", void 0);
+  __decorate([
+      vuePropertyDecorator.Prop({ type: [String, Number], required: true }),
+      __metadata("design:type", Object)
+  ], ZdGridCellEdit.prototype, "rowKey", void 0);
   __decorate([
       vuePropertyDecorator.Prop({ type: Function, required: true }),
       __metadata("design:type", Function)
@@ -48590,7 +48747,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
         _c(
           _vm.column.componentProps.component,
           _vm._b(
-            { tag: "component" },
+            { key: _vm.column.name + "-" + _vm.rowKey, tag: "component" },
             "component",
             _vm.getEditableComponent(_vm.column, _vm.row, _vm.cellProps),
             false
@@ -48606,7 +48763,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$T = function (inject) {
       if (!inject) return
-      inject("data-v-2a27d7cc_0", { source: "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n", map: undefined, media: undefined });
+      inject("data-v-41954a8d_0", { source: "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -48986,6 +49143,11 @@ 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);
+          }
+      }
   };
   __decorate([
       PropWatch({ type: String, default: '' }),
@@ -48999,10 +49161,6 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       PropWatch({ type: String, default: '' }),
       __metadata("design:type", String)
   ], ZdImage.prototype, "errorImageText", void 0);
-  __decorate([
-      PropWatch({ type: String, default: '' }),
-      __metadata("design:type", String)
-  ], ZdImage.prototype, "height", void 0);
   __decorate([
       PropWatch({ type: String, default: '' }),
       __metadata("design:type", String)
@@ -49012,9 +49170,33 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       __metadata("design:type", String)
   ], ZdImage.prototype, "src", void 0);
   __decorate([
-      PropWatch({ type: String, default: '' }),
-      __metadata("design:type", String)
+      PropWatch({ type: [Number, String], default: 'auto' }),
+      __metadata("design:type", Object)
+  ], ZdImage.prototype, "height", void 0);
+  __decorate([
+      PropWatch({ type: [Number, String], default: 'auto' }),
+      __metadata("design:type", Object)
+  ], ZdImage.prototype, "minHeight", void 0);
+  __decorate([
+      PropWatch({ type: [Number, String], default: 'none' }),
+      __metadata("design:type", Object)
+  ], ZdImage.prototype, "maxHeight", void 0);
+  __decorate([
+      PropWatch({ type: [Number, String], default: 'auto' }),
+      __metadata("design:type", Object)
   ], ZdImage.prototype, "width", void 0);
+  __decorate([
+      PropWatch({ type: [Number, String], default: 'auto' }),
+      __metadata("design:type", Object)
+  ], ZdImage.prototype, "minWidth", void 0);
+  __decorate([
+      PropWatch({ type: [Number, String], default: 'none' }),
+      __metadata("design:type", Object)
+  ], ZdImage.prototype, "maxWidth", void 0);
+  __decorate([
+      PropWatch({ type: [Boolean, String], default: false }),
+      __metadata("design:type", Object)
+  ], ZdImage.prototype, "fillHeight", void 0);
   ZdImage = __decorate([
       vuePropertyDecorator.Component
   ], ZdImage);
@@ -49040,7 +49222,18 @@ If you're seeing "$attrs is readonly", it's caused by this`);
           },
         ],
         class: ["zd-image", _vm.instance.cssClass],
-        style: _vm.instance.cssStyle,
+        style: Object.assign(
+          {},
+          {
+            height: _vm.$formatSize(_vm.instance.height),
+            width: _vm.$formatSize(_vm.instance.width),
+            maxHeight: _vm.$formatSize(_vm.instance.maxHeight),
+            minHeight: _vm.$formatSize(_vm.instance.minHeight),
+            maxWidth: _vm.$formatSize(_vm.instance.maxWidth),
+            minWidth: _vm.$formatSize(_vm.instance.minWidth),
+          },
+          _vm.$styleObject(_vm.instance.cssStyle)
+        ),
         attrs: { id: _vm.instance.name, name: _vm.instance.name },
       },
       [
@@ -49060,7 +49253,6 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                 {
                   src: _vm.instance.errorImagePath,
                   alt: _vm.instance.alt,
-                  style: _vm.instance.getStyle(),
                 },
                 false
               )
@@ -49094,6 +49286,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                     },
                   ],
                   staticClass: "zd-image-valid",
+                  style: { objectFit: _vm.instance.objectFit },
                   on: {
                     click: function ($event) {
                       return _vm.click($event)
@@ -49116,7 +49309,6 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                 {
                   src: _vm.instance.src,
                   alt: _vm.instance.alt,
-                  style: _vm.instance.getStyle(),
                 },
                 false
               )
@@ -49132,7 +49324,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$Q = function (inject) {
       if (!inject) return
-      inject("data-v-6f1e1cb8_0", { source: ".zd-image {\n  position: relative;\n}\n.zd-image img.zd-image-not-found {\n  background-color: #f8f8f8;\n  object-fit: scale-down !important;\n  padding: 10px;\n}\n.zd-image .zd-image-error-text {\n  position: absolute;\n  bottom: var(--spacing-5);\n  width: 100%;\n  text-align: center;\n  font-style: normal;\n  font-size: 16px;\n  line-height: var(--zd-font-title-size);\n  color: var(--zd-font-color);\n}", map: undefined, media: undefined });
+      inject("data-v-0b89e040_0", { source: ".zd-image {\n  position: relative;\n  display: inline-block;\n  overflow: hidden;\n}\n.zd-image img {\n  height: 100%;\n  width: 100%;\n}\n.zd-image img.zd-image-not-found {\n  background-color: #f8f8f8;\n  object-fit: scale-down !important;\n  padding: 10px;\n}\n.zd-image .zd-image-error-text {\n  position: absolute;\n  bottom: var(--spacing-5);\n  width: 100%;\n  text-align: center;\n  font-style: normal;\n  font-size: 16px;\n  line-height: var(--zd-font-title-size);\n  color: var(--zd-font-color);\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -49317,6 +49509,11 @@ 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({
@@ -49381,26 +49578,33 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       __metadata("design:type", Array)
   ], ZdIterableComponentRender.prototype, "noResultSlot", void 0);
   __decorate([
-      PropWatch({
-          type: [Number, String],
-          default: 'auto',
-      }),
+      PropWatch({ type: [Number, String], default: 'auto' }),
       __metadata("design:type", Object)
   ], ZdIterableComponentRender.prototype, "height", void 0);
   __decorate([
-      PropWatch({
-          type: [Number, String],
-          default: 'none',
-      }),
+      PropWatch({ type: [Number, String], default: 'auto' }),
+      __metadata("design:type", Object)
+  ], ZdIterableComponentRender.prototype, "minHeight", void 0);
+  __decorate([
+      PropWatch({ type: [Number, String], default: 'none' }),
       __metadata("design:type", Object)
   ], ZdIterableComponentRender.prototype, "maxHeight", void 0);
   __decorate([
-      PropWatch({
-          type: [Number, String],
-          default: 'none',
-      }),
+      PropWatch({ type: [Number, String], default: '100%' }),
       __metadata("design:type", Object)
-  ], ZdIterableComponentRender.prototype, "minHeight", void 0);
+  ], ZdIterableComponentRender.prototype, "width", void 0);
+  __decorate([
+      PropWatch({ type: [Number, String], default: 'auto' }),
+      __metadata("design:type", Object)
+  ], ZdIterableComponentRender.prototype, "minWidth", void 0);
+  __decorate([
+      PropWatch({ type: [Number, String], default: 'none' }),
+      __metadata("design:type", Object)
+  ], ZdIterableComponentRender.prototype, "maxWidth", void 0);
+  __decorate([
+      PropWatch({ type: [Boolean, String], default: false }),
+      __metadata("design:type", Object)
+  ], ZdIterableComponentRender.prototype, "fillHeight", void 0);
   ZdIterableComponentRender = __decorate([
       vuePropertyDecorator.Component
   ], ZdIterableComponentRender);
@@ -49423,8 +49627,11 @@ If you're seeing "$attrs is readonly", it's caused by this`);
               {},
               {
                 height: _vm.$formatSize(_vm.instance.height),
-                minHeight: _vm.$formatSize(_vm.instance.minHeight),
+                width: _vm.$formatSize(_vm.instance.width),
                 maxHeight: _vm.$formatSize(_vm.instance.maxHeight),
+                minHeight: _vm.$formatSize(_vm.instance.minHeight),
+                maxWidth: _vm.$formatSize(_vm.instance.maxWidth),
+                minWidth: _vm.$formatSize(_vm.instance.minWidth),
               },
               _vm.$styleObject(_vm.instance.cssStyle)
             ),
@@ -49623,11 +49830,11 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$N = function (inject) {
       if (!inject) return
-      inject("data-v-4445014a_0", { source: ".zd-iterable-component-render[data-v-4445014a] {\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n}\n.zd-iterable-component-render .error--text[data-v-4445014a],\n.zd-iterable-component-render .no--data[data-v-4445014a] {\n  text-align: center;\n  width: 100%;\n  font-size: 14px;\n}\n.zd-iterable-component-render .no--data[data-v-4445014a] {\n  color: rgba(0, 0, 0, 0.38);\n}\n.zd-iterable-component-render .zd-iterable-toolbar[data-v-4445014a] {\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: 16px;\n  align-items: center;\n  width: 100%;\n}\n.zd-iterable-component-render .zd-iterable-content[data-v-4445014a] {\n  overflow: auto;\n}\n.zd-iterable-component-render .zd-iterable-footer[data-v-4445014a] {\n  padding: 5px 0;\n  display: flex;\n  width: 100%;\n}", map: undefined, media: undefined });
+      inject("data-v-543a2c06_0", { source: ".zd-iterable-component-render[data-v-543a2c06] {\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n}\n.zd-iterable-component-render .error--text[data-v-543a2c06],\n.zd-iterable-component-render .no--data[data-v-543a2c06] {\n  text-align: center;\n  width: 100%;\n  font-size: 14px;\n}\n.zd-iterable-component-render .no--data[data-v-543a2c06] {\n  color: rgba(0, 0, 0, 0.38);\n}\n.zd-iterable-component-render .zd-iterable-toolbar[data-v-543a2c06] {\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: 16px;\n  align-items: center;\n  width: 100%;\n}\n.zd-iterable-component-render .zd-iterable-content[data-v-543a2c06] {\n  overflow: auto;\n}\n.zd-iterable-component-render .zd-iterable-footer[data-v-543a2c06] {\n  padding: 5px 0;\n  display: flex;\n  width: 100%;\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
-    const __vue_scope_id__$N = "data-v-4445014a";
+    const __vue_scope_id__$N = "data-v-543a2c06";
     /* module identifier */
     const __vue_module_identifier__$N = undefined;
     /* functional template */
@@ -50731,6 +50938,11 @@ 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;
       }
@@ -50771,14 +50983,30 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       PropWatch({ type: [Number, String], default: 'auto' }),
       __metadata("design:type", Object)
   ], ZdList.prototype, "height", void 0);
+  __decorate([
+      PropWatch({ type: [Number, String], default: 'auto' }),
+      __metadata("design:type", Object)
+  ], ZdList.prototype, "minHeight", void 0);
   __decorate([
       PropWatch({ type: [Number, String], default: 'none' }),
       __metadata("design:type", Object)
   ], ZdList.prototype, "maxHeight", void 0);
+  __decorate([
+      PropWatch({ type: [Number, String], default: '100%' }),
+      __metadata("design:type", Object)
+  ], ZdList.prototype, "width", void 0);
+  __decorate([
+      PropWatch({ type: [Number, String], default: 'auto' }),
+      __metadata("design:type", Object)
+  ], ZdList.prototype, "minWidth", void 0);
   __decorate([
       PropWatch({ type: [Number, String], default: 'none' }),
       __metadata("design:type", Object)
-  ], ZdList.prototype, "minHeight", void 0);
+  ], ZdList.prototype, "maxWidth", void 0);
+  __decorate([
+      PropWatch({ type: [Boolean, String], default: false }),
+      __metadata("design:type", Object)
+  ], ZdList.prototype, "fillHeight", void 0);
   __decorate([
       vuePropertyDecorator.Prop({ type: Array, default: () => ([]) }),
       __metadata("design:type", Array)
@@ -50824,6 +51052,9 @@ If you're seeing "$attrs is readonly", it's caused by this`);
           height: _vm.instance.height,
           minHeight: _vm.instance.minHeight,
           maxHeight: _vm.instance.maxHeight,
+          width: _vm.instance.width,
+          minWidth: _vm.instance.minWidth,
+          maxWidth: _vm.instance.maxWidth,
         },
       },
       [
@@ -50864,7 +51095,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$H = function (inject) {
       if (!inject) return
-      inject("data-v-3b2f260e_0", { source: ".zd-list.v-list--dense .zd-list-group.v-list-item--three-line {\n  min-height: 76px;\n}\n.zd-list .v-list-item .v-list-item__icon {\n  flex-direction: column;\n  justify-content: center;\n  align-self: center;\n  height: auto;\n}\n.zd-list .v-list-item .v-list-item__icon.v-list-group__header__prepend-icon {\n  margin: 4px 16px 4px 0;\n}\n.zd-list .v-list-item .v-list-item__icon.v-list-group__header__append-icon {\n  margin: 4px 0 4px 16px;\n}\n.zd-list .zd-list-item-title {\n  font-size: var(--zd-font-body4-size);\n  font-weight: var(--zd-font-body4-weight);\n}\n.zd-list .zd-list-item-subtitle {\n  font-size: var(--zd-font-body3-size);\n  font-weight: var(--zd-font-body3-weight);\n}", map: undefined, media: undefined });
+      inject("data-v-46f30238_0", { source: ".zd-list {\n  overflow: auto;\n}\n.zd-list.v-list--dense .zd-list-group.v-list-item--three-line {\n  min-height: 76px;\n}\n.zd-list .v-list-item .v-list-item__icon {\n  flex-direction: column;\n  justify-content: center;\n  align-self: center;\n  height: auto;\n}\n.zd-list .v-list-item .v-list-item__icon.v-list-group__header__prepend-icon {\n  margin: 4px 16px 4px 0;\n}\n.zd-list .v-list-item .v-list-item__icon.v-list-group__header__append-icon {\n  margin: 4px 0 4px 16px;\n}\n.zd-list .zd-list-item-title {\n  font-size: var(--zd-font-body4-size);\n  font-weight: var(--zd-font-body4-weight);\n}\n.zd-list .zd-list-item-subtitle {\n  font-size: var(--zd-font-body3-size);\n  font-weight: var(--zd-font-body3-weight);\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -54004,6 +54235,11 @@ 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 }),
@@ -54021,6 +54257,22 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       PropWatch({ type: [Boolean, String], default: false }),
       __metadata("design:type", Boolean)
   ], ZdRow.prototype, "noGutters", void 0);
+  __decorate([
+      PropWatch({ type: [Number, String], default: 'auto' }),
+      __metadata("design:type", Object)
+  ], ZdRow.prototype, "height", void 0);
+  __decorate([
+      PropWatch({ type: [Number, String], default: 'auto' }),
+      __metadata("design:type", Object)
+  ], ZdRow.prototype, "minHeight", void 0);
+  __decorate([
+      PropWatch({ type: [Number, String], default: 'none' }),
+      __metadata("design:type", Object)
+  ], ZdRow.prototype, "maxHeight", void 0);
+  __decorate([
+      PropWatch({ type: [Boolean, String], default: false }),
+      __metadata("design:type", Object)
+  ], ZdRow.prototype, "fillHeight", void 0);
   ZdRow = __decorate([
       vuePropertyDecorator.Component
   ], ZdRow);
@@ -54045,8 +54297,16 @@ If you're seeing "$attrs is readonly", it's caused by this`);
             expression: "instance.isVisible",
           },
         ],
-        class: _vm.instance.cssClass,
-        style: _vm.instance.cssStyle,
+        class: ["zd-row", _vm.instance.cssClass],
+        style: Object.assign(
+          {},
+          {
+            height: _vm.$formatSize(_vm.instance.height),
+            maxHeight: _vm.$formatSize(_vm.instance.maxHeight),
+            minHeight: _vm.$formatSize(_vm.instance.minHeight),
+          },
+          _vm.$styleObject(_vm.instance.cssStyle)
+        ),
         attrs: {
           id: _vm.instance.name,
           name: _vm.instance.name,
@@ -54082,15 +54342,17 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   __vue_render__$n._withStripped = true;
 
     /* style */
-    const __vue_inject_styles__$n = undefined;
+    const __vue_inject_styles__$n = function (inject) {
+      if (!inject) return
+      inject("data-v-e2373b1c_0", { source: ".zd-row.row {\n  margin: 0 -12px;\n}\n.zd-row.row.row--dense {\n  margin: 0 -4px;\n}", map: undefined, media: undefined });
+
+    };
     /* scoped */
     const __vue_scope_id__$n = undefined;
     /* module identifier */
     const __vue_module_identifier__$n = undefined;
     /* functional template */
     const __vue_is_functional_template__$n = false;
-    /* style inject */
-    
     /* style inject SSR */
     
     /* style inject shadow dom */
@@ -54105,7 +54367,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       __vue_is_functional_template__$n,
       __vue_module_identifier__$n,
       false,
-      undefined,
+      createInjector,
       undefined,
       undefined
     );
@@ -54217,8 +54479,13 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       change() {
           this.instance.change(undefined, this.$el);
       }
-  };
-  __decorate([
+      mounted() {
+          if (this.instance.fillHeight) {
+              setFillHeight(this.$el);
+          }
+      }
+  };
+  __decorate([
       PropWatch({ type: [String], default: '' }),
       __metadata("design:type", String)
   ], ZdSelectableList.prototype, "activeClass", void 0);
@@ -54238,6 +54505,34 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       PropWatch({ type: [Number, String], default: undefined }),
       __metadata("design:type", Object)
   ], ZdSelectableList.prototype, "value", void 0);
+  __decorate([
+      PropWatch({ type: [Number, String], default: 'auto' }),
+      __metadata("design:type", Object)
+  ], ZdSelectableList.prototype, "height", void 0);
+  __decorate([
+      PropWatch({ type: [Number, String], default: 'auto' }),
+      __metadata("design:type", Object)
+  ], ZdSelectableList.prototype, "minHeight", void 0);
+  __decorate([
+      PropWatch({ type: [Number, String], default: 'none' }),
+      __metadata("design:type", Object)
+  ], ZdSelectableList.prototype, "maxHeight", void 0);
+  __decorate([
+      PropWatch({ type: [Number, String], default: '100%' }),
+      __metadata("design:type", Object)
+  ], ZdSelectableList.prototype, "width", void 0);
+  __decorate([
+      PropWatch({ type: [Number, String], default: 'auto' }),
+      __metadata("design:type", Object)
+  ], ZdSelectableList.prototype, "minWidth", void 0);
+  __decorate([
+      PropWatch({ type: [Number, String], default: 'none' }),
+      __metadata("design:type", Object)
+  ], ZdSelectableList.prototype, "maxWidth", void 0);
+  __decorate([
+      PropWatch({ type: [Boolean, String], default: false }),
+      __metadata("design:type", Object)
+  ], ZdSelectableList.prototype, "fillHeight", void 0);
   ZdSelectableList = __decorate([
       vuePropertyDecorator.Component
   ], ZdSelectableList);
@@ -54263,7 +54558,18 @@ If you're seeing "$attrs is readonly", it's caused by this`);
           },
         ],
         class: ["zd-selectable-list", _vm.instance.cssClass],
-        style: _vm.instance.cssStyle,
+        style: Object.assign(
+          {},
+          {
+            height: _vm.$formatSize(_vm.instance.height),
+            width: _vm.$formatSize(_vm.instance.width),
+            maxHeight: _vm.$formatSize(_vm.instance.maxHeight),
+            minHeight: _vm.$formatSize(_vm.instance.minHeight),
+            maxWidth: _vm.$formatSize(_vm.instance.maxWidth),
+            minWidth: _vm.$formatSize(_vm.instance.minWidth),
+          },
+          _vm.$styleObject(_vm.instance.cssStyle)
+        ),
         attrs: {
           activeClass: _vm.instance.activeClass,
           dark: _vm.instance.dark,
@@ -54296,9 +54602,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
               elevation: _vm.instance.elevation,
               expand: _vm.instance.expand,
               tile: _vm.instance.tile,
-              height: _vm.instance.height,
-              minHeight: _vm.instance.minHeight,
-              maxHeight: _vm.instance.maxHeight,
+              height: "100%",
             },
           },
           [
@@ -54342,7 +54646,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$l = function (inject) {
       if (!inject) return
-      inject("data-v-463a5f31_0", { source: ".zd-list.v-list--dense .zd-list-group.v-list-item--three-line {\n  min-height: 76px;\n}\n.zd-list .v-list-item .v-list-item__icon {\n  flex-direction: column;\n  justify-content: center;\n  align-self: center;\n  height: auto;\n}\n.zd-list .v-list-item .v-list-item__icon.v-list-group__header__prepend-icon {\n  margin: 4px 16px 4px 0;\n}\n.zd-list .v-list-item .v-list-item__icon.v-list-group__header__append-icon {\n  margin: 4px 0 4px 16px;\n}\n.zd-list .zd-list-item-title {\n  font-size: var(--zd-font-body4-size);\n  font-weight: var(--zd-font-body4-weight);\n}\n.zd-list .zd-list-item-subtitle {\n  font-size: var(--zd-font-body3-size);\n  font-weight: var(--zd-font-body3-weight);\n}", map: undefined, media: undefined });
+      inject("data-v-9dbfb210_0", { source: ".zd-list {\n  overflow: auto;\n}\n.zd-list.v-list--dense .zd-list-group.v-list-item--three-line {\n  min-height: 76px;\n}\n.zd-list .v-list-item .v-list-item__icon {\n  flex-direction: column;\n  justify-content: center;\n  align-self: center;\n  height: auto;\n}\n.zd-list .v-list-item .v-list-item__icon.v-list-group__header__prepend-icon {\n  margin: 4px 16px 4px 0;\n}\n.zd-list .v-list-item .v-list-item__icon.v-list-group__header__append-icon {\n  margin: 4px 0 4px 16px;\n}\n.zd-list .zd-list-item-title {\n  font-size: var(--zd-font-body4-size);\n  font-weight: var(--zd-font-body4-weight);\n}\n.zd-list .zd-list-item-subtitle {\n  font-size: var(--zd-font-body3-size);\n  font-weight: var(--zd-font-body3-weight);\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -55460,7 +55764,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$j = function (inject) {
       if (!inject) return
-      inject("data-v-073f22d6_0", { source: ".zd-select-tree-loading {\n  margin-top: -1px;\n  width: calc(100% - 2px);\n  margin-left: 1px;\n}\n.zd-select-tree {\n  color: var(--zd-font-color);\n  font-size: var(--zd-font-body1-size);\n  font-family: var(--font-family);\n  margin-top: var(--spacing-1);\n}\n.zd-select-tree.theme--dark .vue-treeselect__control {\n  background-color: #1e1e1e;\n}\n.zd-select-tree.theme--dark .vue-treeselect__multi-value-item {\n  background: #555;\n}\n.zd-select-tree.theme--dark .vue-treeselect__multi-value-item, .zd-select-tree.theme--dark .vue-treeselect__multi-value-item .vue-treeselect__value-remove {\n  color: #fff;\n}\n.zd-select-tree .vue-treeselect__control {\n  border-radius: var(--border);\n  height: 34px;\n}\n.zd-select-tree .vue-treeselect__control .vue-treeselect__single-value {\n  line-height: 32px;\n}\n.zd-select-tree .vue-treeselect__control-arrow-container svg {\n  transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1), visibility 0s;\n}\n.zd-select-tree .zd-select-tree-label {\n  font-weight: var(--zd-font-body1-weight);\n  pointer-events: none;\n  line-height: 1rem;\n  position: relative;\n  top: -1px;\n}\n.zd-select-tree .zd-select-tree-label p {\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n.zd-select-tree.zd-select-tree-disabled {\n  opacity: 0.5;\n}\n.zd-select-tree .vue-treeselect__single-value, .zd-select-tree input {\n  font-size: var(--zd-font-body1-size);\n  font-weight: var(--zd-font-body1-weight);\n  color: var(--zd-font-color);\n  cursor: text;\n}\n.zd-select-tree.zd-select-tree-error .zd-select-tree-label {\n  color: var(--v-error-base) !important;\n  animation: v-shake 0.6s cubic-bezier(0.25, 0.8, 0.5, 1);\n}\n.zd-select-tree.zd-select-tree-error .zd-select-tree-details {\n  color: var(--v-error-base) !important;\n}\n.zd-select-tree.zd-select-tree-error .vue-treeselect__control {\n  border-color: var(--v-error-base) !important;\n}\n.zd-select-tree.zd-select-tree-error .vue-treeselect__control-arrow-container svg, .zd-select-tree.zd-select-tree-error .vue-treeselect__x-container svg {\n  color: var(--v-error-base);\n}\n.zd-select-tree.zd-select-tree-error .zd-select-tree-prepend-outer-icon, .zd-select-tree.zd-select-tree-error .zd-select-tree-append-outer-icon {\n  color: var(--v-error-base);\n}\n.zd-select-tree .vue-treeselect--focused .vue-treeselect__control-arrow-container svg, .zd-select-tree .vue-treeselect--focused .vue-treeselect__x-container svg {\n  color: var(--v-primary-base);\n}\n.zd-select-tree .zd-select-tree-details {\n  min-height: 13px;\n  font-size: 11px;\n  display: flex;\n  flex: 1 0 auto;\n  max-width: 100%;\n  overflow: hidden;\n  color: rgba(0, 0, 0, 0.6);\n  line-height: 1;\n  position: relative;\n  top: 1px;\n}\n.zd-select-tree.zd-dense .zd-select-tree-details {\n  min-height: 11px;\n}\n.zd-select-tree.zd-dense .vue-treeselect__control {\n  height: 24px;\n}\n.zd-select-tree.zd-dense .vue-treeselect__control .vue-treeselect__single-value {\n  line-height: 22px;\n}\n.zd-select-tree.zd-dense .zd-select-tree-prepend-outer-icon, .zd-select-tree.zd-dense .zd-select-tree-append-outer-icon {\n  margin-top: 20px;\n}\n.zd-select-tree.zd-dense.zd-no-label .zd-select-tree-prepend-outer-icon, .zd-select-tree.zd-dense.zd-no-label .zd-select-tree-append-outer-icon {\n  margin-top: 4px;\n}\n.zd-select-tree.zd-no-helper .zd-select-tree-details {\n  display: none;\n}\n.zd-select-tree.zd-no-border .vue-treeselect__control {\n  border: none !important;\n}\n.zd-select-tree .zd-select-tree-container {\n  display: flex;\n  position: relative;\n}\n.zd-select-tree .zd-select-tree-prepend-outer-icon, .zd-select-tree .zd-select-tree-append-outer-icon {\n  font-size: var(--icon-size-small);\n  margin-top: 25px;\n  height: 16px;\n}\n.zd-select-tree .zd-select-tree-prepend-outer-icon {\n  margin-right: 8px;\n}\n.zd-select-tree.zd-no-label .zd-select-tree-prepend-outer-icon, .zd-select-tree.zd-no-label .zd-select-tree-append-outer-icon {\n  margin-top: 10px;\n}\n.zd-select-tree .zd-select-tree-append-outer-icon {\n  margin-left: 8px;\n}\n.vue-treeselect--searchable .vue-treeselect__multi-value-item-container {\n  margin-top: 3px;\n}\n.vue-treeselect--multi :not(.vue-treeselect--searchable) .vue-treeselect__multi-value-item-container {\n  margin: 3px 0;\n}\n.vue-treeselect__label {\n  padding-left: 10px;\n}\n.vue-treeselect__menu-container .vue-treeselect__icon-warning {\n  display: none;\n}\n.vue-treeselect__menu-container .vue-treeselect__option--disabled {\n  opacity: 0.5;\n}\n.vue-treeselect__menu .vue-treeselect__list > * {\n  color: var(--zd-font-color) !important;\n  font-size: var(--zd-font-body1-size) !important;\n  font-family: var(--font-family) !important;\n}\n.vue-treeselect__menu-container.has-search .vue-treeselect__option {\n  display: flex !important;\n}\n.vue-treeselect__menu-container.has-search .vue-treeselect__option-arrow-container {\n  display: flex !important;\n}\n.vue-treeselect__menu-container .vue-treeselect__option::before {\n  bottom: 0;\n  content: \"\";\n  left: 0;\n  opacity: 0;\n  pointer-events: none;\n  position: absolute;\n  right: 0;\n  top: 0;\n  box-sizing: inherit;\n  height: inherit;\n}\n.vue-treeselect__menu-container .vue-treeselect__list-item > div.vue-treeselect__option--selected::before {\n  background: var(--v-primary-base);\n}\n.vue-treeselect__menu-container .vue-treeselect__label {\n  font-size: var(--zd-font-body1-size);\n  font-weight: var(--zd-font-body1-weight);\n  font-family: var(--font-family);\n  color: var(--zd-font-color);\n}\n.vue-treeselect__menu-container .vue-treeselect__option--selected .vue-treeselect__label-container .vue-treeselect__label, .vue-treeselect__menu-container .vue-treeselect__option--selected .vue-treeselect__option-arrow {\n  color: var(--v-primary-base);\n}\n.vue-treeselect__menu-container .vue-treeselect__option:not(.vue-treeselect__option--hide) {\n  position: relative;\n  display: flex;\n}\n.vue-treeselect__menu-container .vue-treeselect__option-arrow-container:not(.vue-treeselect__option--hide) {\n  align-items: center;\n  display: flex;\n}\n.vue-treeselect__menu-container.theme--light .vue-treeselect__option::before {\n  background-color: #000;\n}\n.vue-treeselect__menu-container.theme--light .vue-treeselect__option:hover::before {\n  opacity: 0.04;\n}\n.vue-treeselect__menu-container.theme--light .vue-treeselect__list-item > div.vue-treeselect__option--selected::before {\n  opacity: 0.1;\n}\n.vue-treeselect__menu-container.theme--dark > div {\n  background-color: #1e1e1e;\n  color: #fff;\n}\n.vue-treeselect__menu-container.theme--dark .vue-treeselect__label {\n  color: #fff;\n}\n.vue-treeselect__menu-container.theme--dark .vue-treeselect__option--highlight {\n  background-color: transparent;\n}\n.vue-treeselect__menu-container.theme--dark .vue-treeselect__option::before {\n  background-color: #fff;\n}\n.vue-treeselect__menu-container.theme--dark .vue-treeselect__option:hover::before {\n  opacity: 0.08;\n}\n.vue-treeselect__menu-container.theme--dark .vue-treeselect__list-item > div.vue-treeselect__option--selected::before {\n  opacity: 0.2;\n}\n.vue-treeselect__menu-container.theme--dark .vue-treeselect__checkbox:not(.vue-treeselect__checkbox--checked):not(.vue-treeselect__checkbox--indeterminate) {\n  background-color: transparent;\n  border-color: #fff;\n}\n.vue-treeselect__menu-container.theme--dark .vue-treeselect__option--selected .vue-treeselect__count {\n  opacity: 0.8;\n}\n.vue-treeselect__menu-container.theme--dark .vue-treeselect__menu {\n  border-color: #1e1e1e;\n}", map: undefined, media: undefined });
+      inject("data-v-073f22d6_0", { source: ".zd-select-tree-loading {\n  margin-top: -1px;\n  width: calc(100% - 2px);\n  margin-left: 1px;\n}\n.zd-select-tree {\n  color: var(--zd-font-color);\n  font-size: var(--zd-font-body1-size);\n  font-family: var(--font-family);\n  margin-top: var(--spacing-1);\n  padding-bottom: 2px;\n}\n.zd-select-tree.theme--dark .vue-treeselect__control {\n  background-color: #1e1e1e;\n}\n.zd-select-tree.theme--dark .vue-treeselect__multi-value-item {\n  background: #555;\n}\n.zd-select-tree.theme--dark .vue-treeselect__multi-value-item, .zd-select-tree.theme--dark .vue-treeselect__multi-value-item .vue-treeselect__value-remove {\n  color: #fff;\n}\n.zd-select-tree .vue-treeselect__control {\n  border-radius: var(--border);\n  height: 34px;\n}\n.zd-select-tree .vue-treeselect__control .vue-treeselect__single-value {\n  line-height: 32px;\n}\n.zd-select-tree .vue-treeselect__control-arrow-container svg {\n  transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1), visibility 0s;\n}\n.zd-select-tree .zd-select-tree-label {\n  font-weight: var(--zd-font-body1-weight);\n  pointer-events: none;\n  line-height: 1rem;\n  position: relative;\n  top: -1px;\n}\n.zd-select-tree .zd-select-tree-label p {\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n.zd-select-tree.zd-select-tree-disabled {\n  opacity: 0.5;\n}\n.zd-select-tree .vue-treeselect__single-value, .zd-select-tree input {\n  font-size: var(--zd-font-body1-size);\n  font-weight: var(--zd-font-body1-weight);\n  color: var(--zd-font-color);\n  cursor: text;\n}\n.zd-select-tree.zd-select-tree-error .zd-select-tree-label {\n  color: var(--v-error-base) !important;\n  animation: v-shake 0.6s cubic-bezier(0.25, 0.8, 0.5, 1);\n}\n.zd-select-tree.zd-select-tree-error .zd-select-tree-details {\n  color: var(--v-error-base) !important;\n}\n.zd-select-tree.zd-select-tree-error .vue-treeselect__control {\n  border-color: var(--v-error-base) !important;\n}\n.zd-select-tree.zd-select-tree-error .vue-treeselect__control-arrow-container svg, .zd-select-tree.zd-select-tree-error .vue-treeselect__x-container svg {\n  color: var(--v-error-base);\n}\n.zd-select-tree.zd-select-tree-error .zd-select-tree-prepend-outer-icon, .zd-select-tree.zd-select-tree-error .zd-select-tree-append-outer-icon {\n  color: var(--v-error-base);\n}\n.zd-select-tree .vue-treeselect--focused .vue-treeselect__control-arrow-container svg, .zd-select-tree .vue-treeselect--focused .vue-treeselect__x-container svg {\n  color: var(--v-primary-base);\n}\n.zd-select-tree .zd-select-tree-details {\n  min-height: 13px;\n  font-size: 11px;\n  display: flex;\n  flex: 1 0 auto;\n  max-width: 100%;\n  overflow: hidden;\n  color: rgba(0, 0, 0, 0.6);\n  line-height: 1;\n  position: relative;\n  top: 1px;\n}\n.zd-select-tree.zd-dense .zd-select-tree-details {\n  min-height: 11px;\n}\n.zd-select-tree.zd-dense .vue-treeselect__control {\n  height: 24px;\n}\n.zd-select-tree.zd-dense .vue-treeselect__control .vue-treeselect__single-value {\n  line-height: 22px;\n}\n.zd-select-tree.zd-dense .zd-select-tree-prepend-outer-icon, .zd-select-tree.zd-dense .zd-select-tree-append-outer-icon {\n  margin-top: 20px;\n}\n.zd-select-tree.zd-dense.zd-no-label .zd-select-tree-prepend-outer-icon, .zd-select-tree.zd-dense.zd-no-label .zd-select-tree-append-outer-icon {\n  margin-top: 4px;\n}\n.zd-select-tree.zd-no-helper .zd-select-tree-details {\n  display: none;\n}\n.zd-select-tree.zd-no-border .vue-treeselect__control {\n  border: none !important;\n}\n.zd-select-tree .zd-select-tree-container {\n  display: flex;\n  position: relative;\n}\n.zd-select-tree .zd-select-tree-prepend-outer-icon, .zd-select-tree .zd-select-tree-append-outer-icon {\n  font-size: var(--icon-size-small);\n  margin-top: 25px;\n  height: 16px;\n}\n.zd-select-tree .zd-select-tree-prepend-outer-icon {\n  margin-right: 8px;\n}\n.zd-select-tree.zd-no-label .zd-select-tree-prepend-outer-icon, .zd-select-tree.zd-no-label .zd-select-tree-append-outer-icon {\n  margin-top: 10px;\n}\n.zd-select-tree .zd-select-tree-append-outer-icon {\n  margin-left: 8px;\n}\n.vue-treeselect--searchable .vue-treeselect__multi-value-item-container {\n  margin-top: 3px;\n}\n.vue-treeselect--multi :not(.vue-treeselect--searchable) .vue-treeselect__multi-value-item-container {\n  margin: 3px 0;\n}\n.vue-treeselect__label {\n  padding-left: 10px;\n}\n.vue-treeselect__menu-container .vue-treeselect__icon-warning {\n  display: none;\n}\n.vue-treeselect__menu-container .vue-treeselect__option--disabled {\n  opacity: 0.5;\n}\n.vue-treeselect__menu .vue-treeselect__list > * {\n  color: var(--zd-font-color) !important;\n  font-size: var(--zd-font-body1-size) !important;\n  font-family: var(--font-family) !important;\n}\n.vue-treeselect__menu-container.has-search .vue-treeselect__option {\n  display: flex !important;\n}\n.vue-treeselect__menu-container.has-search .vue-treeselect__option-arrow-container {\n  display: flex !important;\n}\n.vue-treeselect__menu-container .vue-treeselect__option::before {\n  bottom: 0;\n  content: \"\";\n  left: 0;\n  opacity: 0;\n  pointer-events: none;\n  position: absolute;\n  right: 0;\n  top: 0;\n  box-sizing: inherit;\n  height: inherit;\n}\n.vue-treeselect__menu-container .vue-treeselect__list-item > div.vue-treeselect__option--selected::before {\n  background: var(--v-primary-base);\n}\n.vue-treeselect__menu-container .vue-treeselect__label {\n  font-size: var(--zd-font-body1-size);\n  font-weight: var(--zd-font-body1-weight);\n  font-family: var(--font-family);\n  color: var(--zd-font-color);\n}\n.vue-treeselect__menu-container .vue-treeselect__option--selected .vue-treeselect__label-container .vue-treeselect__label, .vue-treeselect__menu-container .vue-treeselect__option--selected .vue-treeselect__option-arrow {\n  color: var(--v-primary-base);\n}\n.vue-treeselect__menu-container .vue-treeselect__option:not(.vue-treeselect__option--hide) {\n  position: relative;\n  display: flex;\n}\n.vue-treeselect__menu-container .vue-treeselect__option-arrow-container:not(.vue-treeselect__option--hide) {\n  align-items: center;\n  display: flex;\n}\n.vue-treeselect__menu-container.theme--light .vue-treeselect__option::before {\n  background-color: #000;\n}\n.vue-treeselect__menu-container.theme--light .vue-treeselect__option:hover::before {\n  opacity: 0.04;\n}\n.vue-treeselect__menu-container.theme--light .vue-treeselect__list-item > div.vue-treeselect__option--selected::before {\n  opacity: 0.1;\n}\n.vue-treeselect__menu-container.theme--dark > div {\n  background-color: #1e1e1e;\n  color: #fff;\n}\n.vue-treeselect__menu-container.theme--dark .vue-treeselect__label {\n  color: #fff;\n}\n.vue-treeselect__menu-container.theme--dark .vue-treeselect__option--highlight {\n  background-color: transparent;\n}\n.vue-treeselect__menu-container.theme--dark .vue-treeselect__option::before {\n  background-color: #fff;\n}\n.vue-treeselect__menu-container.theme--dark .vue-treeselect__option:hover::before {\n  opacity: 0.08;\n}\n.vue-treeselect__menu-container.theme--dark .vue-treeselect__list-item > div.vue-treeselect__option--selected::before {\n  opacity: 0.2;\n}\n.vue-treeselect__menu-container.theme--dark .vue-treeselect__checkbox:not(.vue-treeselect__checkbox--checked):not(.vue-treeselect__checkbox--indeterminate) {\n  background-color: transparent;\n  border-color: #fff;\n}\n.vue-treeselect__menu-container.theme--dark .vue-treeselect__option--selected .vue-treeselect__count {\n  opacity: 0.8;\n}\n.vue-treeselect__menu-container.theme--dark .vue-treeselect__menu {\n  border-color: #1e1e1e;\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -55840,7 +56144,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$i = function (inject) {
       if (!inject) return
-      inject("data-v-55d57032_0", { source: ".zd-select-tree-loading {\n  margin-top: -1px;\n  width: calc(100% - 2px);\n  margin-left: 1px;\n}\n.zd-select-tree {\n  color: var(--zd-font-color);\n  font-size: var(--zd-font-body1-size);\n  font-family: var(--font-family);\n  margin-top: var(--spacing-1);\n}\n.zd-select-tree.theme--dark .vue-treeselect__control {\n  background-color: #1e1e1e;\n}\n.zd-select-tree.theme--dark .vue-treeselect__multi-value-item {\n  background: #555;\n}\n.zd-select-tree.theme--dark .vue-treeselect__multi-value-item, .zd-select-tree.theme--dark .vue-treeselect__multi-value-item .vue-treeselect__value-remove {\n  color: #fff;\n}\n.zd-select-tree .vue-treeselect__control {\n  border-radius: var(--border);\n  height: 34px;\n}\n.zd-select-tree .vue-treeselect__control .vue-treeselect__single-value {\n  line-height: 32px;\n}\n.zd-select-tree .vue-treeselect__control-arrow-container svg {\n  transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1), visibility 0s;\n}\n.zd-select-tree .zd-select-tree-label {\n  font-weight: var(--zd-font-body1-weight);\n  pointer-events: none;\n  line-height: 1rem;\n  position: relative;\n  top: -1px;\n}\n.zd-select-tree .zd-select-tree-label p {\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n.zd-select-tree.zd-select-tree-disabled {\n  opacity: 0.5;\n}\n.zd-select-tree .vue-treeselect__single-value, .zd-select-tree input {\n  font-size: var(--zd-font-body1-size);\n  font-weight: var(--zd-font-body1-weight);\n  color: var(--zd-font-color);\n  cursor: text;\n}\n.zd-select-tree.zd-select-tree-error .zd-select-tree-label {\n  color: var(--v-error-base) !important;\n  animation: v-shake 0.6s cubic-bezier(0.25, 0.8, 0.5, 1);\n}\n.zd-select-tree.zd-select-tree-error .zd-select-tree-details {\n  color: var(--v-error-base) !important;\n}\n.zd-select-tree.zd-select-tree-error .vue-treeselect__control {\n  border-color: var(--v-error-base) !important;\n}\n.zd-select-tree.zd-select-tree-error .vue-treeselect__control-arrow-container svg, .zd-select-tree.zd-select-tree-error .vue-treeselect__x-container svg {\n  color: var(--v-error-base);\n}\n.zd-select-tree.zd-select-tree-error .zd-select-tree-prepend-outer-icon, .zd-select-tree.zd-select-tree-error .zd-select-tree-append-outer-icon {\n  color: var(--v-error-base);\n}\n.zd-select-tree .vue-treeselect--focused .vue-treeselect__control-arrow-container svg, .zd-select-tree .vue-treeselect--focused .vue-treeselect__x-container svg {\n  color: var(--v-primary-base);\n}\n.zd-select-tree .zd-select-tree-details {\n  min-height: 13px;\n  font-size: 11px;\n  display: flex;\n  flex: 1 0 auto;\n  max-width: 100%;\n  overflow: hidden;\n  color: rgba(0, 0, 0, 0.6);\n  line-height: 1;\n  position: relative;\n  top: 1px;\n}\n.zd-select-tree.zd-dense .zd-select-tree-details {\n  min-height: 11px;\n}\n.zd-select-tree.zd-dense .vue-treeselect__control {\n  height: 24px;\n}\n.zd-select-tree.zd-dense .vue-treeselect__control .vue-treeselect__single-value {\n  line-height: 22px;\n}\n.zd-select-tree.zd-dense .zd-select-tree-prepend-outer-icon, .zd-select-tree.zd-dense .zd-select-tree-append-outer-icon {\n  margin-top: 20px;\n}\n.zd-select-tree.zd-dense.zd-no-label .zd-select-tree-prepend-outer-icon, .zd-select-tree.zd-dense.zd-no-label .zd-select-tree-append-outer-icon {\n  margin-top: 4px;\n}\n.zd-select-tree.zd-no-helper .zd-select-tree-details {\n  display: none;\n}\n.zd-select-tree.zd-no-border .vue-treeselect__control {\n  border: none !important;\n}\n.zd-select-tree .zd-select-tree-container {\n  display: flex;\n  position: relative;\n}\n.zd-select-tree .zd-select-tree-prepend-outer-icon, .zd-select-tree .zd-select-tree-append-outer-icon {\n  font-size: var(--icon-size-small);\n  margin-top: 25px;\n  height: 16px;\n}\n.zd-select-tree .zd-select-tree-prepend-outer-icon {\n  margin-right: 8px;\n}\n.zd-select-tree.zd-no-label .zd-select-tree-prepend-outer-icon, .zd-select-tree.zd-no-label .zd-select-tree-append-outer-icon {\n  margin-top: 10px;\n}\n.zd-select-tree .zd-select-tree-append-outer-icon {\n  margin-left: 8px;\n}\n.vue-treeselect--searchable .vue-treeselect__multi-value-item-container {\n  margin-top: 3px;\n}\n.vue-treeselect--multi :not(.vue-treeselect--searchable) .vue-treeselect__multi-value-item-container {\n  margin: 3px 0;\n}\n.vue-treeselect__label {\n  padding-left: 10px;\n}\n.vue-treeselect__menu-container .vue-treeselect__icon-warning {\n  display: none;\n}\n.vue-treeselect__menu-container .vue-treeselect__option--disabled {\n  opacity: 0.5;\n}\n.vue-treeselect__menu .vue-treeselect__list > * {\n  color: var(--zd-font-color) !important;\n  font-size: var(--zd-font-body1-size) !important;\n  font-family: var(--font-family) !important;\n}\n.vue-treeselect__menu-container.has-search .vue-treeselect__option {\n  display: flex !important;\n}\n.vue-treeselect__menu-container.has-search .vue-treeselect__option-arrow-container {\n  display: flex !important;\n}\n.vue-treeselect__menu-container .vue-treeselect__option::before {\n  bottom: 0;\n  content: \"\";\n  left: 0;\n  opacity: 0;\n  pointer-events: none;\n  position: absolute;\n  right: 0;\n  top: 0;\n  box-sizing: inherit;\n  height: inherit;\n}\n.vue-treeselect__menu-container .vue-treeselect__list-item > div.vue-treeselect__option--selected::before {\n  background: var(--v-primary-base);\n}\n.vue-treeselect__menu-container .vue-treeselect__label {\n  font-size: var(--zd-font-body1-size);\n  font-weight: var(--zd-font-body1-weight);\n  font-family: var(--font-family);\n  color: var(--zd-font-color);\n}\n.vue-treeselect__menu-container .vue-treeselect__option--selected .vue-treeselect__label-container .vue-treeselect__label, .vue-treeselect__menu-container .vue-treeselect__option--selected .vue-treeselect__option-arrow {\n  color: var(--v-primary-base);\n}\n.vue-treeselect__menu-container .vue-treeselect__option:not(.vue-treeselect__option--hide) {\n  position: relative;\n  display: flex;\n}\n.vue-treeselect__menu-container .vue-treeselect__option-arrow-container:not(.vue-treeselect__option--hide) {\n  align-items: center;\n  display: flex;\n}\n.vue-treeselect__menu-container.theme--light .vue-treeselect__option::before {\n  background-color: #000;\n}\n.vue-treeselect__menu-container.theme--light .vue-treeselect__option:hover::before {\n  opacity: 0.04;\n}\n.vue-treeselect__menu-container.theme--light .vue-treeselect__list-item > div.vue-treeselect__option--selected::before {\n  opacity: 0.1;\n}\n.vue-treeselect__menu-container.theme--dark > div {\n  background-color: #1e1e1e;\n  color: #fff;\n}\n.vue-treeselect__menu-container.theme--dark .vue-treeselect__label {\n  color: #fff;\n}\n.vue-treeselect__menu-container.theme--dark .vue-treeselect__option--highlight {\n  background-color: transparent;\n}\n.vue-treeselect__menu-container.theme--dark .vue-treeselect__option::before {\n  background-color: #fff;\n}\n.vue-treeselect__menu-container.theme--dark .vue-treeselect__option:hover::before {\n  opacity: 0.08;\n}\n.vue-treeselect__menu-container.theme--dark .vue-treeselect__list-item > div.vue-treeselect__option--selected::before {\n  opacity: 0.2;\n}\n.vue-treeselect__menu-container.theme--dark .vue-treeselect__checkbox:not(.vue-treeselect__checkbox--checked):not(.vue-treeselect__checkbox--indeterminate) {\n  background-color: transparent;\n  border-color: #fff;\n}\n.vue-treeselect__menu-container.theme--dark .vue-treeselect__option--selected .vue-treeselect__count {\n  opacity: 0.8;\n}\n.vue-treeselect__menu-container.theme--dark .vue-treeselect__menu {\n  border-color: #1e1e1e;\n}", map: undefined, media: undefined })
+      inject("data-v-55d57032_0", { source: ".zd-select-tree-loading {\n  margin-top: -1px;\n  width: calc(100% - 2px);\n  margin-left: 1px;\n}\n.zd-select-tree {\n  color: var(--zd-font-color);\n  font-size: var(--zd-font-body1-size);\n  font-family: var(--font-family);\n  margin-top: var(--spacing-1);\n  padding-bottom: 2px;\n}\n.zd-select-tree.theme--dark .vue-treeselect__control {\n  background-color: #1e1e1e;\n}\n.zd-select-tree.theme--dark .vue-treeselect__multi-value-item {\n  background: #555;\n}\n.zd-select-tree.theme--dark .vue-treeselect__multi-value-item, .zd-select-tree.theme--dark .vue-treeselect__multi-value-item .vue-treeselect__value-remove {\n  color: #fff;\n}\n.zd-select-tree .vue-treeselect__control {\n  border-radius: var(--border);\n  height: 34px;\n}\n.zd-select-tree .vue-treeselect__control .vue-treeselect__single-value {\n  line-height: 32px;\n}\n.zd-select-tree .vue-treeselect__control-arrow-container svg {\n  transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1), visibility 0s;\n}\n.zd-select-tree .zd-select-tree-label {\n  font-weight: var(--zd-font-body1-weight);\n  pointer-events: none;\n  line-height: 1rem;\n  position: relative;\n  top: -1px;\n}\n.zd-select-tree .zd-select-tree-label p {\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n.zd-select-tree.zd-select-tree-disabled {\n  opacity: 0.5;\n}\n.zd-select-tree .vue-treeselect__single-value, .zd-select-tree input {\n  font-size: var(--zd-font-body1-size);\n  font-weight: var(--zd-font-body1-weight);\n  color: var(--zd-font-color);\n  cursor: text;\n}\n.zd-select-tree.zd-select-tree-error .zd-select-tree-label {\n  color: var(--v-error-base) !important;\n  animation: v-shake 0.6s cubic-bezier(0.25, 0.8, 0.5, 1);\n}\n.zd-select-tree.zd-select-tree-error .zd-select-tree-details {\n  color: var(--v-error-base) !important;\n}\n.zd-select-tree.zd-select-tree-error .vue-treeselect__control {\n  border-color: var(--v-error-base) !important;\n}\n.zd-select-tree.zd-select-tree-error .vue-treeselect__control-arrow-container svg, .zd-select-tree.zd-select-tree-error .vue-treeselect__x-container svg {\n  color: var(--v-error-base);\n}\n.zd-select-tree.zd-select-tree-error .zd-select-tree-prepend-outer-icon, .zd-select-tree.zd-select-tree-error .zd-select-tree-append-outer-icon {\n  color: var(--v-error-base);\n}\n.zd-select-tree .vue-treeselect--focused .vue-treeselect__control-arrow-container svg, .zd-select-tree .vue-treeselect--focused .vue-treeselect__x-container svg {\n  color: var(--v-primary-base);\n}\n.zd-select-tree .zd-select-tree-details {\n  min-height: 13px;\n  font-size: 11px;\n  display: flex;\n  flex: 1 0 auto;\n  max-width: 100%;\n  overflow: hidden;\n  color: rgba(0, 0, 0, 0.6);\n  line-height: 1;\n  position: relative;\n  top: 1px;\n}\n.zd-select-tree.zd-dense .zd-select-tree-details {\n  min-height: 11px;\n}\n.zd-select-tree.zd-dense .vue-treeselect__control {\n  height: 24px;\n}\n.zd-select-tree.zd-dense .vue-treeselect__control .vue-treeselect__single-value {\n  line-height: 22px;\n}\n.zd-select-tree.zd-dense .zd-select-tree-prepend-outer-icon, .zd-select-tree.zd-dense .zd-select-tree-append-outer-icon {\n  margin-top: 20px;\n}\n.zd-select-tree.zd-dense.zd-no-label .zd-select-tree-prepend-outer-icon, .zd-select-tree.zd-dense.zd-no-label .zd-select-tree-append-outer-icon {\n  margin-top: 4px;\n}\n.zd-select-tree.zd-no-helper .zd-select-tree-details {\n  display: none;\n}\n.zd-select-tree.zd-no-border .vue-treeselect__control {\n  border: none !important;\n}\n.zd-select-tree .zd-select-tree-container {\n  display: flex;\n  position: relative;\n}\n.zd-select-tree .zd-select-tree-prepend-outer-icon, .zd-select-tree .zd-select-tree-append-outer-icon {\n  font-size: var(--icon-size-small);\n  margin-top: 25px;\n  height: 16px;\n}\n.zd-select-tree .zd-select-tree-prepend-outer-icon {\n  margin-right: 8px;\n}\n.zd-select-tree.zd-no-label .zd-select-tree-prepend-outer-icon, .zd-select-tree.zd-no-label .zd-select-tree-append-outer-icon {\n  margin-top: 10px;\n}\n.zd-select-tree .zd-select-tree-append-outer-icon {\n  margin-left: 8px;\n}\n.vue-treeselect--searchable .vue-treeselect__multi-value-item-container {\n  margin-top: 3px;\n}\n.vue-treeselect--multi :not(.vue-treeselect--searchable) .vue-treeselect__multi-value-item-container {\n  margin: 3px 0;\n}\n.vue-treeselect__label {\n  padding-left: 10px;\n}\n.vue-treeselect__menu-container .vue-treeselect__icon-warning {\n  display: none;\n}\n.vue-treeselect__menu-container .vue-treeselect__option--disabled {\n  opacity: 0.5;\n}\n.vue-treeselect__menu .vue-treeselect__list > * {\n  color: var(--zd-font-color) !important;\n  font-size: var(--zd-font-body1-size) !important;\n  font-family: var(--font-family) !important;\n}\n.vue-treeselect__menu-container.has-search .vue-treeselect__option {\n  display: flex !important;\n}\n.vue-treeselect__menu-container.has-search .vue-treeselect__option-arrow-container {\n  display: flex !important;\n}\n.vue-treeselect__menu-container .vue-treeselect__option::before {\n  bottom: 0;\n  content: \"\";\n  left: 0;\n  opacity: 0;\n  pointer-events: none;\n  position: absolute;\n  right: 0;\n  top: 0;\n  box-sizing: inherit;\n  height: inherit;\n}\n.vue-treeselect__menu-container .vue-treeselect__list-item > div.vue-treeselect__option--selected::before {\n  background: var(--v-primary-base);\n}\n.vue-treeselect__menu-container .vue-treeselect__label {\n  font-size: var(--zd-font-body1-size);\n  font-weight: var(--zd-font-body1-weight);\n  font-family: var(--font-family);\n  color: var(--zd-font-color);\n}\n.vue-treeselect__menu-container .vue-treeselect__option--selected .vue-treeselect__label-container .vue-treeselect__label, .vue-treeselect__menu-container .vue-treeselect__option--selected .vue-treeselect__option-arrow {\n  color: var(--v-primary-base);\n}\n.vue-treeselect__menu-container .vue-treeselect__option:not(.vue-treeselect__option--hide) {\n  position: relative;\n  display: flex;\n}\n.vue-treeselect__menu-container .vue-treeselect__option-arrow-container:not(.vue-treeselect__option--hide) {\n  align-items: center;\n  display: flex;\n}\n.vue-treeselect__menu-container.theme--light .vue-treeselect__option::before {\n  background-color: #000;\n}\n.vue-treeselect__menu-container.theme--light .vue-treeselect__option:hover::before {\n  opacity: 0.04;\n}\n.vue-treeselect__menu-container.theme--light .vue-treeselect__list-item > div.vue-treeselect__option--selected::before {\n  opacity: 0.1;\n}\n.vue-treeselect__menu-container.theme--dark > div {\n  background-color: #1e1e1e;\n  color: #fff;\n}\n.vue-treeselect__menu-container.theme--dark .vue-treeselect__label {\n  color: #fff;\n}\n.vue-treeselect__menu-container.theme--dark .vue-treeselect__option--highlight {\n  background-color: transparent;\n}\n.vue-treeselect__menu-container.theme--dark .vue-treeselect__option::before {\n  background-color: #fff;\n}\n.vue-treeselect__menu-container.theme--dark .vue-treeselect__option:hover::before {\n  opacity: 0.08;\n}\n.vue-treeselect__menu-container.theme--dark .vue-treeselect__list-item > div.vue-treeselect__option--selected::before {\n  opacity: 0.2;\n}\n.vue-treeselect__menu-container.theme--dark .vue-treeselect__checkbox:not(.vue-treeselect__checkbox--checked):not(.vue-treeselect__checkbox--indeterminate) {\n  background-color: transparent;\n  border-color: #fff;\n}\n.vue-treeselect__menu-container.theme--dark .vue-treeselect__option--selected .vue-treeselect__count {\n  opacity: 0.8;\n}\n.vue-treeselect__menu-container.theme--dark .vue-treeselect__menu {\n  border-color: #1e1e1e;\n}", map: undefined, media: undefined })
   ,inject("data-v-55d57032_1", { source: ".zd-select-tree-multiple .vue-treeselect--multi :not(.vue-treeselect--searchable) .vue-treeselect__multi-value-item-container {\n  margin: 1px 0;\n  line-height: 16px;\n}\n.zd-select-tree-multiple .vue-treeselect--multi .vue-treeselect__input {\n  padding-top: 0;\n  padding-bottom: 0;\n  line-height: 15px;\n}\n.vue-treeselect__menu-container .select-all {\n  height: 40px;\n  min-height: 40px;\n  padding-left: 26px;\n}\n.vue-treeselect__menu-container .select-all .v-icon.mdi-checkbox-marked {\n  color: var(--v-primary-base);\n}\n.vue-treeselect__menu-container .select-all .v-list-item__content {\n  height: 40px;\n}\n.vue-treeselect__menu-container .select-all .v-list-item__action {\n  margin: 0;\n}\n.vue-treeselect__menu-container .select-all .v-list-item__title {\n  height: auto;\n  padding-left: 4px;\n}\n.vue-treeselect--searchable .vue-treeselect__multi-value-item-container {\n  margin-top: 3px;\n}\n.vue-treeselect--multi :not(.vue-treeselect--searchable) .vue-treeselect__multi-value-item-container {\n  margin: 3px 0;\n}\n.vue-treeselect__limit-tip {\n  padding-top: 0;\n}\n.vue-treeselect__limit-tip-text {\n  padding: 0;\n  margin: 0;\n}", map: undefined, media: undefined });
 
     };
@@ -56580,6 +56884,11 @@ 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: () => ({}) }),
@@ -56593,6 +56902,22 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       PropWatch({ type: [Boolean, String], default: true }),
       __metadata("design:type", Boolean)
   ], ZdTable.prototype, "showTableHead", void 0);
+  __decorate([
+      PropWatch({ type: [Number, String], default: 'auto' }),
+      __metadata("design:type", Object)
+  ], ZdTable.prototype, "height", void 0);
+  __decorate([
+      PropWatch({ type: [Number, String], default: 'auto' }),
+      __metadata("design:type", Object)
+  ], ZdTable.prototype, "minHeight", void 0);
+  __decorate([
+      PropWatch({ type: [Number, String], default: 'none' }),
+      __metadata("design:type", Object)
+  ], ZdTable.prototype, "maxHeight", void 0);
+  __decorate([
+      PropWatch({ type: [Boolean, String], default: false }),
+      __metadata("design:type", Object)
+  ], ZdTable.prototype, "fillHeight", void 0);
   ZdTable = __decorate([
       vuePropertyDecorator.Component
   ], ZdTable);
@@ -56607,106 +56932,126 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     var _h = _vm.$createElement;
     var _c = _vm._self._c || _h;
     return _c(
-      "table",
+      "div",
       {
-        directives: [
-          {
-            name: "show",
-            rawName: "v-show",
-            value: _vm.instance.isVisible,
-            expression: "instance.isVisible",
-          },
-        ],
-        class: [
-          _vm.instance.cssClass,
-          "zd-table",
-          {
-            "zd-table-fill-width": _vm.instance.fillWidth,
-          },
-        ],
-        style: _vm.instance.cssStyle,
-        attrs: {
-          id: _vm.instance.name,
-          dark: _vm.instance.dark,
-          light: _vm.instance.light,
+        staticClass: "zd-table-container",
+        style: {
+          height: _vm.$formatSize(_vm.instance.height),
+          maxHeight: _vm.$formatSize(_vm.instance.maxHeight),
+          minHeight: _vm.$formatSize(_vm.instance.minHeight),
         },
       },
       [
-        _vm.instance.caption.isVisible
-          ? _c(
-              "caption",
+        _c(
+          "table",
+          {
+            directives: [
               {
-                class: ["zd-table-caption", "text-" + _vm.instance.caption.align],
+                name: "show",
+                rawName: "v-show",
+                value: _vm.instance.isVisible,
+                expression: "instance.isVisible",
               },
-              [
-                _vm._v(
-                  "\n    " + _vm._s(_vm.$t(_vm.instance.caption.label)) + "\n  "
-                ),
-              ]
-            )
-          : _vm._e(),
-        _vm._v(" "),
-        _vm.instance.showTableHead
-          ? _c("thead", [
-              _c(
-                "tr",
-                [
-                  _vm._l(_vm.instance.columns, function (column, index) {
-                    return [
-                      column.isVisible
-                        ? _c(
-                            "th",
-                            { key: index, class: ["text-" + column.align] },
-                            [
-                              _vm._v(
-                                "\n          " +
-                                  _vm._s(_vm.$t(column.label)) +
-                                  "\n        "
-                              ),
-                            ]
-                          )
-                        : _vm._e(),
-                    ]
-                  }),
-                ],
-                2
-              ),
-            ])
-          : _vm._e(),
-        _vm._v(" "),
-        _c(
-          "tbody",
-          _vm._l(_vm.instance.datasource.data, function (row) {
-            return _c(
-              "tr",
-              { key: row[_vm.instance.datasource.uniqueKey] },
-              [
-                _vm._l(_vm.instance.columns, function (column, index) {
-                  return [
-                    column.isVisible
-                      ? _c("td", {
-                          key: index,
-                          class: ["text-" + column.align],
-                          style:
-                            "min-width: " +
-                            column.minWidth +
-                            "; max-width: " +
-                            column.maxWidth +
-                            ";",
-                          domProps: {
-                            innerHTML: _vm._s(
-                              _vm.$sanitize(column.formatter(row[column.name]))
-                            ),
-                          },
-                        })
-                      : _vm._e(),
+            ],
+            class: [
+              _vm.instance.cssClass,
+              "zd-table",
+              {
+                "zd-table-fill-width": _vm.instance.fillWidth,
+              },
+            ],
+            style: _vm.instance.cssStyle,
+            attrs: {
+              id: _vm.instance.name,
+              dark: _vm.instance.dark,
+              light: _vm.instance.light,
+            },
+          },
+          [
+            _vm.instance.caption.isVisible
+              ? _c(
+                  "caption",
+                  {
+                    class: [
+                      "zd-table-caption",
+                      "text-" + _vm.instance.caption.align,
+                    ],
+                  },
+                  [
+                    _vm._v(
+                      "\n      " +
+                        _vm._s(_vm.$t(_vm.instance.caption.label)) +
+                        "\n    "
+                    ),
                   ]
-                }),
-              ],
-              2
-            )
-          }),
-          0
+                )
+              : _vm._e(),
+            _vm._v(" "),
+            _vm.instance.showTableHead
+              ? _c("thead", [
+                  _c(
+                    "tr",
+                    [
+                      _vm._l(_vm.instance.columns, function (column, index) {
+                        return [
+                          column.isVisible
+                            ? _c(
+                                "th",
+                                { key: index, class: ["text-" + column.align] },
+                                [
+                                  _vm._v(
+                                    "\n            " +
+                                      _vm._s(_vm.$t(column.label)) +
+                                      "\n          "
+                                  ),
+                                ]
+                              )
+                            : _vm._e(),
+                        ]
+                      }),
+                    ],
+                    2
+                  ),
+                ])
+              : _vm._e(),
+            _vm._v(" "),
+            _c(
+              "tbody",
+              _vm._l(_vm.instance.datasource.data, function (row) {
+                return _c(
+                  "tr",
+                  { key: row[_vm.instance.datasource.uniqueKey] },
+                  [
+                    _vm._l(_vm.instance.columns, function (column, index) {
+                      return [
+                        column.isVisible
+                          ? _c("td", {
+                              key: index,
+                              class: ["text-" + column.align],
+                              style:
+                                "min-width: " +
+                                column.minWidth +
+                                "; max-width: " +
+                                column.maxWidth +
+                                ";",
+                              domProps: {
+                                innerHTML: _vm._s(
+                                  _vm.$sanitize(
+                                    column.formatter(row[column.name])
+                                  )
+                                ),
+                              },
+                            })
+                          : _vm._e(),
+                      ]
+                    }),
+                  ],
+                  2
+                )
+              }),
+              0
+            ),
+          ]
         ),
       ]
     )
@@ -56717,7 +57062,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$d = function (inject) {
       if (!inject) return
-      inject("data-v-08f22f82_0", { source: ".zd-table-fill-width {\n  width: 100%;\n}\n.zd-table-caption {\n  border: var(--regular) solid #dedede;\n  border-bottom: 0;\n  padding: 12px;\n}\ntable.zd-table, .zd-table tr, .zd-table td {\n  border-collapse: collapse;\n}\ntable.zd-table, .zd-table tr, .zd-table td, .zd-table th {\n  border: var(--regular) solid #dedede;\n  padding: 12px;\n  vertical-align: top;\n}", map: undefined, media: undefined });
+      inject("data-v-2eb5aab8_0", { source: ".zd-table-container {\n  overflow: auto;\n}\n.zd-table-fill-width {\n  width: 100%;\n}\n.zd-table-caption {\n  border: var(--regular) solid #dedede;\n  border-bottom: 0;\n  padding: 12px;\n}\ntable.zd-table, .zd-table tr, .zd-table td {\n  border-collapse: collapse;\n}\ntable.zd-table, .zd-table tr, .zd-table td, .zd-table th {\n  border: var(--regular) solid #dedede;\n  padding: 12px;\n  vertical-align: top;\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -56762,15 +57107,32 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       clickTab(event, index) {
           this.instance.beforeChange(event, index, this.$el);
       }
+      mounted() {
+          if (this.instance.fillHeight) {
+              setFillHeight(this.$el);
+          }
+      }
   };
   __decorate([
       PropWatch({ type: [Number, String], default: 0 }),
       __metadata("design:type", Number)
   ], ZdTabs.prototype, "activeTab", void 0);
   __decorate([
-      PropWatch({ type: [Number, String] }),
+      PropWatch({ type: [Number, String], default: 'auto' }),
       __metadata("design:type", Object)
   ], ZdTabs.prototype, "height", void 0);
+  __decorate([
+      PropWatch({ type: [Number, String], default: 'auto' }),
+      __metadata("design:type", Object)
+  ], ZdTabs.prototype, "minHeight", void 0);
+  __decorate([
+      PropWatch({ type: [Number, String], default: 'none' }),
+      __metadata("design:type", Object)
+  ], ZdTabs.prototype, "maxHeight", void 0);
+  __decorate([
+      PropWatch({ type: [Boolean, String], default: false }),
+      __metadata("design:type", Object)
+  ], ZdTabs.prototype, "fillHeight", void 0);
   __decorate([
       vuePropertyDecorator.Prop({ type: Array, default: () => [] }),
       __metadata("design:type", Array)
@@ -56802,7 +57164,11 @@ If you're seeing "$attrs is readonly", it's caused by this`);
         class: ["zd-tabs", _vm.instance.cssClass],
         style: Object.assign(
           {},
-          { height: _vm.$formatSize(_vm.instance.height) },
+          {
+            height: _vm.$formatSize(_vm.instance.height),
+            maxHeight: _vm.$formatSize(_vm.instance.maxHeight),
+            minHeight: _vm.$formatSize(_vm.instance.minHeight),
+          },
           _vm.$styleObject(_vm.instance.cssStyle)
         ),
         attrs: { id: _vm.instance.name, name: _vm.instance.name },
@@ -56906,7 +57272,6 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                     {
                       index: index,
                       children: tab.children,
-                      flex: tab.flex,
                       name: _vm.instance.name + "-tab-item-" + index,
                       lazyLoad: tab.lazyLoad,
                     },
@@ -56930,11 +57295,11 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$c = function (inject) {
       if (!inject) return
-      inject("data-v-0700f23a_0", { source: ".zd-tabs[data-v-0700f23a] {\n  display: flex;\n  flex-direction: column;\n}\n.zd-tabs[data-v-0700f23a]  .v-tabs-bar,\n.zd-tabs[data-v-0700f23a]  .v-tabs-items {\n  background-color: transparent;\n}\n.zd-tabs[data-v-0700f23a]  .v-tabs-bar {\n  height: auto;\n}\n.zd-tabs[data-v-0700f23a]  .v-tabs-bar .v-tabs-slider-wrapper {\n  bottom: -1px;\n}\n.zd-tabs[data-v-0700f23a]  .v-tabs-bar__content {\n  border-bottom: solid 1px var(--v-grey-lighten4);\n}\n.zd-tabs[data-v-0700f23a]  .v-tabs {\n  margin-bottom: var(--spacing-4);\n}\n.zd-tabs[data-v-0700f23a]  .v-tabs .v-slide-group__next,\n.zd-tabs[data-v-0700f23a]  .v-tabs .v-slide-group__prev {\n  flex-basis: 30px;\n  min-width: 30px;\n}\n.zd-tabs[data-v-0700f23a]  .v-tabs .v-slide-group__next .v-icon,\n.zd-tabs[data-v-0700f23a]  .v-tabs .v-slide-group__prev .v-icon {\n  font-size: 18px;\n}\n.zd-tabs[data-v-0700f23a]  .v-tabs {\n  flex-grow: 0;\n}\n.zd-tabs[data-v-0700f23a]  .v-tabs-items {\n  flex-grow: 1;\n}\n.zd-tabs[data-v-0700f23a]  .v-tabs-items .v-window__container {\n  height: 100% !important;\n}", map: undefined, media: undefined });
+      inject("data-v-96a6dab6_0", { source: ".zd-tabs[data-v-96a6dab6] {\n  display: flex;\n  flex-direction: column;\n}\n.zd-tabs[data-v-96a6dab6]  .v-tabs-bar,\n.zd-tabs[data-v-96a6dab6]  .v-tabs-items {\n  background-color: transparent;\n}\n.zd-tabs[data-v-96a6dab6]  .v-tabs-bar {\n  height: auto;\n}\n.zd-tabs[data-v-96a6dab6]  .v-tabs-bar .v-tabs-slider-wrapper {\n  bottom: -1px;\n}\n.zd-tabs[data-v-96a6dab6]  .v-tabs-bar__content {\n  border-bottom: solid 1px var(--v-grey-lighten4);\n}\n.zd-tabs[data-v-96a6dab6]  .v-tabs {\n  margin-bottom: var(--spacing-4);\n}\n.zd-tabs[data-v-96a6dab6]  .v-tabs .v-slide-group__next,\n.zd-tabs[data-v-96a6dab6]  .v-tabs .v-slide-group__prev {\n  flex-basis: 30px;\n  min-width: 30px;\n}\n.zd-tabs[data-v-96a6dab6]  .v-tabs .v-slide-group__next .v-icon,\n.zd-tabs[data-v-96a6dab6]  .v-tabs .v-slide-group__prev .v-icon {\n  font-size: 18px;\n}\n.zd-tabs[data-v-96a6dab6]  .v-tabs {\n  flex-grow: 0;\n}\n.zd-tabs[data-v-96a6dab6]  .v-tabs-items {\n  flex-grow: 1;\n  overflow-y: auto;\n}\n.zd-tabs[data-v-96a6dab6]  .v-tabs-items .v-window__container {\n  height: 100% !important;\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
-    const __vue_scope_id__$c = "data-v-0700f23a";
+    const __vue_scope_id__$c = "data-v-96a6dab6";
     /* module identifier */
     const __vue_module_identifier__$c = undefined;
     /* functional template */
@@ -56981,10 +57346,6 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       PropWatch({ type: String }),
       __metadata("design:type", String)
   ], ZdTab.prototype, "tabTitle", void 0);
-  __decorate([
-      PropWatch({ type: Boolean }),
-      __metadata("design:type", Boolean)
-  ], ZdTab.prototype, "flex", void 0);
   __decorate([
       PropWatch({ type: String }),
       __metadata("design:type", String)
@@ -57082,10 +57443,6 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       PropWatch({ type: Number }),
       __metadata("design:type", Number)
   ], ZdTabItem.prototype, "index", void 0);
-  __decorate([
-      PropWatch({ type: Boolean }),
-      __metadata("design:type", Boolean)
-  ], ZdTabItem.prototype, "flex", void 0);
   __decorate([
       PropWatch({ type: Boolean }),
       __metadata("design:type", Boolean)
@@ -57127,12 +57484,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       [
         _c(
           "v-container",
-          {
-            class: {
-              "zd-tabs-tab-item-container-flex": _vm.flex,
-            },
-            attrs: { fluid: "" },
-          },
+          { attrs: { fluid: "" } },
           [
             _vm._l(_vm.children, function (child, index) {
               return _c(
@@ -57160,11 +57512,11 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$a = function (inject) {
       if (!inject) return
-      inject("data-v-f6ae0120_0", { source: ".zd-tabs-tab-item[data-v-f6ae0120] {\n  transition: none;\n}\n.zd-tabs-tab-item > .container[data-v-f6ae0120] {\n  padding: 0;\n}\n.zd-tabs .zd-tabs-tab-item[data-v-f6ae0120] {\n  height: 100%;\n}\n.zd-tabs .zd-tabs-tab-item .zd-tabs-tab-item-container-flex[data-v-f6ae0120] {\n  display: flex;\n  flex-direction: column;\n}\n.zd-tabs .zd-tabs-tab-item .container[data-v-f6ae0120] {\n  height: 100%;\n}", map: undefined, media: undefined });
+      inject("data-v-a94346d8_0", { source: ".zd-tabs-tab-item[data-v-a94346d8] {\n  transition: none;\n}\n.zd-tabs-tab-item > .container[data-v-a94346d8] {\n  padding: 0;\n}\n.zd-tabs .zd-tabs-tab-item[data-v-a94346d8] {\n  height: 100%;\n}\n.zd-tabs .zd-tabs-tab-item .container[data-v-a94346d8] {\n  height: 100%;\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
-    const __vue_scope_id__$a = "data-v-f6ae0120";
+    const __vue_scope_id__$a = "data-v-a94346d8";
     /* module identifier */
     const __vue_module_identifier__$a = undefined;
     /* functional template */
@@ -57454,16 +57806,17 @@ 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);
+              }
+          }
       }
       blur(event) {
           this.instance.blur(event, this.$el);
           this.setPlaceholder('textarea');
       }
-      get cssVars() {
-          return {
-              '--zd-textarea-height': this.instance.height,
-          };
-      }
   };
   __decorate([
       PropWatch({ type: [Boolean, String], default: false }),
@@ -57572,12 +57925,27 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                   !!_vm.instance.prependIcon && !_vm.instance.prefix,
                 "v-textarea--no-resize": !_vm.instance.resize,
                 "zd-input-required": _vm.instance.validations.required,
-                "fill-height": _vm.instance.fillHeight,
               },
               "zd-text-align-" +
                 (_vm.instance.reverse ? "right" : _vm.instance.align),
             ],
-            style: Object.assign({}, _vm.instance.cssStyle, _vm.cssVars),
+            style: Object.assign({}, _vm.instance.cssStyle, {
+              height:
+                _vm.instance.fillHeight ||
+                _vm.instance.cssClass.indexOf("zd-form-child") !== -1
+                  ? undefined
+                  : _vm.$formatSize(_vm.instance.height),
+              minHeight:
+                _vm.instance.fillminHeight ||
+                _vm.instance.cssClass.indexOf("zd-form-child") !== -1
+                  ? undefined
+                  : _vm.$formatSize(_vm.instance.minHeight),
+              maxHeight:
+                _vm.instance.fillmaxHeight ||
+                _vm.instance.cssClass.indexOf("zd-form-child") !== -1
+                  ? undefined
+                  : _vm.$formatSize(_vm.instance.maxHeight),
+            }),
             attrs: {
               id: _vm.instance.name,
               name: _vm.instance.name,
@@ -57671,7 +58039,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$7 = function (inject) {
       if (!inject) return
-      inject("data-v-14e085b8_0", { source: ".v-input.zd-textarea > .v-input__control > .v-input__slot {\n  height: auto;\n}\n.v-input.zd-textarea.fill-height {\n  height: 100% !important;\n}\n.v-input.zd-textarea.fill-height .v-input__control, .v-input.zd-textarea.fill-height .v-input__slot, .v-input.zd-textarea.fill-height .v-text-field__slot {\n  height: 100% !important;\n}\n.v-input.zd-textarea:not(.fill-height) {\n  height: var(--zd-textarea-height) !important;\n}\n.v-input.zd-textarea:not(.fill-height) .v-input__control, .v-input.zd-textarea:not(.fill-height) .v-input__slot, .v-input.zd-textarea:not(.fill-height) .v-text-field__slot {\n  height: var(--zd-textarea-height) !important;\n}\n.v-input.zd-textarea textarea {\n  margin: var(--spacing-2);\n  line-height: unset;\n}\n.v-input.zd-textarea.zd-text-align-left > .v-input__control > .v-input__slot input {\n  text-align: left;\n}\n.v-input.zd-textarea.zd-text-align-center > .v-input__control > .v-input__slot input {\n  text-align: center;\n}\n.v-input.zd-textarea.zd-text-align-right > .v-input__control > .v-input__slot input {\n  text-align: right;\n}\n.v-input.zd-textarea .v-input__append-inner, .v-input.zd-textarea .v-input__prepend-inner {\n  align-self: flex-start;\n  margin-top: var(--spacing-2);\n}\n.v-input.zd-textarea .v-input__append-inner .v-input__icon, .v-input.zd-textarea .v-input__prepend-inner .v-input__icon {\n  height: var(--icon-size-small);\n  width: var(--icon-size-small);\n  min-width: var(--icon-size-small);\n}\n.v-input.zd-textarea .v-input__append-inner .v-input__icon .v-icon, .v-input.zd-textarea .v-input__prepend-inner .v-input__icon .v-icon {\n  font-size: var(--icon-size-small);\n}\n.v-input.zd-textarea.zd-no-border:not(.error--text) .v-input__append-inner,\n.v-input.zd-textarea.zd-no-border:not(.error--text) .v-input__prepend-inner {\n  margin-top: 0;\n}\n.v-input.zd-textarea.zd-no-border:not(.error--text) > .v-input__control > .v-input__slot textarea {\n  margin-top: 0;\n  margin-bottom: 0;\n}", map: undefined, media: undefined });
+      inject("data-v-486fa668_0", { source: ".v-input.zd-textarea {\n  height: 100%;\n}\n.v-input.zd-textarea > .v-input__control {\n  height: 100%;\n}\n.v-input.zd-textarea > .v-input__control > .v-input__slot {\n  height: auto;\n  flex: 1 1 auto;\n}\n.v-input.zd-textarea > .v-input__control > .v-text-field__details {\n  flex: 0 0 auto;\n}\n.v-input.zd-textarea textarea {\n  margin: var(--spacing-2);\n  line-height: unset;\n}\n.v-input.zd-textarea.zd-text-align-left > .v-input__control > .v-input__slot input {\n  text-align: left;\n}\n.v-input.zd-textarea.zd-text-align-center > .v-input__control > .v-input__slot input {\n  text-align: center;\n}\n.v-input.zd-textarea.zd-text-align-right > .v-input__control > .v-input__slot input {\n  text-align: right;\n}\n.v-input.zd-textarea .v-input__append-inner, .v-input.zd-textarea .v-input__prepend-inner {\n  align-self: flex-start;\n  margin-top: var(--spacing-2);\n}\n.v-input.zd-textarea .v-input__append-inner .v-input__icon, .v-input.zd-textarea .v-input__prepend-inner .v-input__icon {\n  height: var(--icon-size-small);\n  width: var(--icon-size-small);\n  min-width: var(--icon-size-small);\n}\n.v-input.zd-textarea .v-input__append-inner .v-input__icon .v-icon, .v-input.zd-textarea .v-input__prepend-inner .v-input__icon .v-icon {\n  font-size: var(--icon-size-small);\n}\n.v-input.zd-textarea.zd-no-border:not(.error--text) .v-input__append-inner,\n.v-input.zd-textarea.zd-no-border:not(.error--text) .v-input__prepend-inner {\n  margin-top: 0;\n}\n.v-input.zd-textarea.zd-no-border:not(.error--text) > .v-input__control > .v-input__slot textarea {\n  margin-top: 0;\n  margin-bottom: 0;\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -58461,6 +58829,9 @@ If you're seeing "$attrs is readonly", it's caused by this`);
           this.setAfterTitleMargin();
           this.nodeChange();
           this.$watch('$refs.tree.nodes', this.nodeChange, { deep: true });
+          if (this.instance.fillHeight) {
+              setFillHeight(this.$el);
+          }
       }
       dataChange() {
           this.instance.createNodesFromDatasource();
@@ -58599,13 +58970,33 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       __metadata("design:type", Boolean)
   ], ZdTree.prototype, "checkbox", void 0);
   __decorate([
-      vuePropertyDecorator.Prop({ type: [Number, String], default: '' }),
+      PropWatch({ type: [Number, String], default: 'auto' }),
+      __metadata("design:type", Object)
+  ], ZdTree.prototype, "height", void 0);
+  __decorate([
+      PropWatch({ type: [Number, String], default: 'auto' }),
+      __metadata("design:type", Object)
+  ], ZdTree.prototype, "minHeight", void 0);
+  __decorate([
+      PropWatch({ type: [Number, String], default: 'none' }),
       __metadata("design:type", Object)
   ], ZdTree.prototype, "maxHeight", void 0);
   __decorate([
-      vuePropertyDecorator.Prop({ type: [Number, String], default: '' }),
+      PropWatch({ type: [Number, String], default: '100%' }),
+      __metadata("design:type", Object)
+  ], ZdTree.prototype, "width", void 0);
+  __decorate([
+      PropWatch({ type: [Number, String], default: 'auto' }),
       __metadata("design:type", Object)
-  ], ZdTree.prototype, "height", void 0);
+  ], ZdTree.prototype, "minWidth", void 0);
+  __decorate([
+      PropWatch({ type: [Number, String], default: 'none' }),
+      __metadata("design:type", Object)
+  ], ZdTree.prototype, "maxWidth", void 0);
+  __decorate([
+      PropWatch({ type: [Boolean, String], default: false }),
+      __metadata("design:type", Object)
+  ], ZdTree.prototype, "fillHeight", void 0);
   __decorate([
       vuePropertyDecorator.Prop({ type: [String, Number, Boolean], default: false }),
       __metadata("design:type", Object)
@@ -58651,19 +59042,18 @@ If you're seeing "$attrs is readonly", it's caused by this`);
           "zd-tree",
           { "theme--dark": _vm.$isDark(this) },
           { "theme--light": _vm.$isLight(this) },
-          { "zd-tree-flex": _vm.instance.height || _vm.instance.maxHeight },
         ],
         style: [_vm.cssColorVars].concat(
           _vm.$styleObject(_vm.instance.cssStyle),
           [
-            _vm.instance.height
-              ? { height: _vm.$formatSize(_vm.instance.height) }
-              : {},
-          ],
-          [
-            _vm.instance.maxHeight
-              ? { height: _vm.$formatSize(_vm.instance.maxHeight) }
-              : {},
+            {
+              height: _vm.$formatSize(_vm.instance.height),
+              width: _vm.$formatSize(_vm.instance.width),
+              maxHeight: _vm.$formatSize(_vm.instance.maxHeight),
+              minHeight: _vm.$formatSize(_vm.instance.minHeight),
+              maxWidth: _vm.$formatSize(_vm.instance.maxWidth),
+              minWidth: _vm.$formatSize(_vm.instance.minWidth),
+            },
           ]
         ),
         attrs: { id: _vm.instance.name },
@@ -58945,7 +59335,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$2 = function (inject) {
       if (!inject) return
-      inject("data-v-61d810b1_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-toolbar {\n  display: flex;\n}\n.zd-tree-flex {\n  display: flex;\n  flex-direction: column;\n}\n.zd-tree-container {\n  overflow: auto;\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: 0px 1px 0px 1px;\n  padding-bottom: 1.4px;\n}\n.zd-tree .sl-vue-tree-nodes-list .sl-vue-tree-gap {\n  width: 32px;\n}\n.zd-tree .sl-vue-tree-nodes-list .item-title.has-children {\n  font-weight: 700;\n}\n.zd-tree .sl-vue-tree-node-item.sl-vue-tree-node-is-leaf .sl-vue-tree-title .align {\n  padding-left: 26px;\n}\n.zd-tree .sl-vue-tree-node-item.sl-vue-tree-node-is-leaf .sl-vue-tree-title .align.is-clickable {\n  cursor: pointer;\n}\n.zd-tree .sl-vue-tree-node-item.sl-vue-tree-node-is-leaf .sl-vue-tree-title .align.v-icon {\n  padding-left: 4px;\n}\n.zd-tree .sl-vue-tree-node-item .zd-tree-checkbox {\n  padding: 0px 3px 3px 0px;\n}", map: undefined, media: undefined });
+      inject("data-v-669fad04_0", { source: ".zd-tree {\n  color: var(--zd-font-color);\n  font-size: var(--zd-font-body1-size);\n  font-weight: normal;\n  overflow: auto;\n}\n.zd-tree-toolbar {\n  display: flex;\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: 0px 1px 0px 1px;\n  padding-bottom: 1.4px;\n}\n.zd-tree .sl-vue-tree-nodes-list .sl-vue-tree-gap {\n  width: 32px;\n}\n.zd-tree .sl-vue-tree-nodes-list .item-title.has-children {\n  font-weight: 700;\n}\n.zd-tree .sl-vue-tree-node-item.sl-vue-tree-node-is-leaf .sl-vue-tree-title .align {\n  padding-left: 26px;\n}\n.zd-tree .sl-vue-tree-node-item.sl-vue-tree-node-is-leaf .sl-vue-tree-title .align.is-clickable {\n  cursor: pointer;\n}\n.zd-tree .sl-vue-tree-node-item.sl-vue-tree-node-is-leaf .sl-vue-tree-title .align.v-icon {\n  padding-left: 4px;\n}\n.zd-tree .sl-vue-tree-node-item .zd-tree-checkbox {\n  padding: 0px 3px 3px 0px;\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -59115,16 +59505,20 @@ If you're seeing "$attrs is readonly", it's caused by this`);
         "zd-grid",
         "zd-tree-grid",
         _vm.instance.cssClass,
-        { "zd-grid-flex": _vm.instance.gridHeight || _vm.instance.gridMaxHeight },
         { "theme--dark": _vm.$isDark(this) },
         { "theme--light": _vm.$isLight(this) },
         { "zd-grid-loading": _vm.instance.datasource.loading },
       ],
       style: [
         _vm.cssColorVars,
-        _vm.instance.gridHeight
-          ? { height: _vm.$formatSize(_vm.instance.gridHeight) }
-          : {},
+        {
+          height: _vm.$formatSize(_vm.instance.height),
+          width: _vm.$formatSize(_vm.instance.width),
+          maxHeight: _vm.$formatSize(_vm.instance.maxHeight),
+          minHeight: _vm.$formatSize(_vm.instance.minHeight),
+          maxWidth: _vm.$formatSize(_vm.instance.maxWidth),
+          minWidth: _vm.$formatSize(_vm.instance.minWidth),
+        },
         _vm.$styleObject(_vm.instance.cssStyle),
       ],
       attrs: {
@@ -60001,8 +60395,8 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$1 = function (inject) {
       if (!inject) return
-      inject("data-v-10fca9ca_0", { source: ".zd-grid {\n  outline: none;\n}\n.zd-grid-flex {\n  display: flex;\n  flex-direction: column;\n}\n.zd-grid-flex .v-data-table__wrapper {\n  flex: 1;\n}\n.zd-grid.theme--light:active table th.zd-table-cell, .zd-grid.theme--light:focus table th.zd-table-cell, .zd-grid.theme--light:focus-within table th.zd-table-cell {\n  color: var(--v-primary-base) !important;\n}\n.zd-grid-toolbar {\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: var(--spacing-4);\n  align-items: center;\n}\n.zd-grid-toolbar-slot {\n  width: 100%;\n  display: flex;\n  align-items: center;\n}\n.zd-grid-search {\n  max-width: 200px;\n}\n.zd-grid table .zd-table-cell {\n  transition: height 0.1s ease;\n}\n.zd-grid table .zd-table-cell.selectable {\n  width: 40px !important;\n  padding-right: var(--spacing-2) !important;\n  max-width: 40px !important;\n  padding-bottom: 0 !important;\n}\n.zd-grid table .zd-table-cell.selectable > div.zd-grid-header-checkbox {\n  margin-top: -2px;\n}\n.zd-grid table .zd-grid-header-checkbox, .zd-grid table .zd-grid-row-checkbox {\n  margin-top: 0;\n  padding-top: 0;\n}\n.zd-grid table .zd-grid-header-checkbox .v-icon, .zd-grid table .zd-grid-row-checkbox .v-icon {\n  font-size: var(--icon-size-small);\n}\n.zd-grid table .zd-grid-header-checkbox .v-input--selection-controls__ripple::before, .zd-grid table .zd-grid-row-checkbox .v-input--selection-controls__ripple::before {\n  display: none;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell {\n  font-size: var(--zd-font-body2-size);\n  font-weight: var(--zd-font-body2-weight);\n  white-space: nowrap;\n  height: 40px;\n  padding: 0 var(--spacing-4) var(--spacing-2) var(--spacing-4);\n  z-index: 4;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-header-cell {\n  width: 100%;\n  display: flex;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.text-left .zd-table-header-cell {\n  justify-content: flex-start;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.text-right .zd-table-header-cell {\n  justify-content: flex-end;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.text-center .zd-table-header-cell {\n  justify-content: center;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort {\n  opacity: 0;\n  position: relative;\n  display: inline-block;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort .zd-table-cell-sort-icon {\n  position: relative;\n  transition: none;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort .zd-table-cell-sort-order {\n  position: absolute;\n  font-size: 9px;\n  right: 2px;\n  color: var(--zd-font-color);\n  width: 12px;\n  text-align: center;\n  border-radius: 50%;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort .zd-table-cell-sort-order.left {\n  right: auto;\n  left: 2px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name {\n  opacity: 0.7;\n  white-space: pre;\n  display: inline-block;\n  vertical-align: bottom;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  overflow-wrap: break-word;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-hidden {\n  text-overflow: unset;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-wrap {\n  white-space: pre-wrap;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp {\n  white-space: normal;\n  -webkit-box-orient: vertical;\n  display: -webkit-box;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-2 {\n  -webkit-line-clamp: 2;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-3 {\n  -webkit-line-clamp: 3;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-4 {\n  -webkit-line-clamp: 4;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-5 {\n  -webkit-line-clamp: 5;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.sortable {\n  cursor: pointer;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.asc .zd-table-cell-sort .zd-table-cell-sort-icon {\n  top: -8px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.asc .zd-table-cell-sort .zd-table-cell-sort-order {\n  top: 6px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.desc .zd-table-cell-sort .zd-table-cell-sort-icon {\n  top: 3px;\n  transform: rotate(180deg);\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.desc .zd-table-cell-sort .zd-table-cell-sort-order {\n  top: -1px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell:hover .zd-table-cell-name, .zd-grid table .zd-grid-table-header th.zd-table-cell.active .zd-table-cell-name {\n  opacity: 1;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell:hover .zd-table-cell-sort, .zd-grid table .zd-grid-table-header th.zd-table-cell.active .zd-table-cell-sort {\n  opacity: 1;\n}\n.zd-grid table thead tr th.zd-table-cell.zd-table-fixed-column-action {\n  position: sticky !important;\n  right: 0;\n  z-index: 5;\n}\n.zd-grid table thead tr th.zd-table-cell.zd-table-fixed-column-action.theme--light {\n  background: #f7f7f7 !important;\n}\n.zd-grid table thead tr th.zd-table-cell.zd-table-fixed-column-action.theme--dark {\n  background: #3c3c3c !important;\n}\n.zd-grid table thead tr th .zd-grid-resize-handle {\n  height: 100%;\n  width: 10px;\n  display: block;\n  position: absolute;\n  top: 0;\n  right: 0;\n  cursor: ew-resize;\n  font-size: 15px;\n  color: #ccc;\n  display: none;\n}\n.zd-grid table thead tr th:hover .zd-grid-resize-handle {\n  display: block;\n}\n.zd-grid table tbody tr td.zd-table-cell {\n  font-size: var(--zd-font-body1-size);\n  font-weight: var(--zd-font-body1-weight);\n  padding: 0 var(--spacing-4);\n  height: 48px;\n}\n.zd-grid table tbody tr td.zd-table-cell.selectable {\n  overflow: hidden;\n}\n.zd-grid table tbody tr td.zd-table-cell.selectable .zd-grid-row-checkbox {\n  opacity: 0.7;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text {\n  display: block;\n  overflow: hidden;\n  white-space: pre;\n  text-overflow: ellipsis;\n  overflow-wrap: break-word;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-hidden {\n  text-overflow: unset;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-wrap {\n  white-space: pre-wrap;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp {\n  white-space: normal;\n  -webkit-box-orient: vertical;\n  display: -webkit-box;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-2 {\n  -webkit-line-clamp: 2;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-3 {\n  -webkit-line-clamp: 3;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-4 {\n  -webkit-line-clamp: 4;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-5 {\n  -webkit-line-clamp: 5;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-fixed-column-action {\n  position: sticky !important;\n  right: 0;\n  z-index: 3;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-fixed-column-action.theme--light {\n  background: #f7f7f7 !important;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-fixed-column-action.theme--dark {\n  background: #3c3c3c !important;\n}\n.zd-grid table tbody tr:hover td.zd-table-cell.selectable .zd-grid-row-checkbox, .zd-grid table tbody tr.active td.zd-table-cell.selectable .zd-grid-row-checkbox {\n  opacity: 1;\n}\n.zd-grid table tbody tr.current {\n  background: var(--current-row-color);\n}\n.zd-grid table tbody tr.current:hover {\n  background: var(--current-row-hover-color) !important;\n}\n.zd-grid.v-data-table--dense table thead tr th.zd-table-cell {\n  padding: 0 var(--spacing-2) var(--spacing-1) var(--spacing-2);\n  height: 24px;\n}\n.zd-grid.v-data-table--dense table tbody tr td.zd-table-cell {\n  padding: 0 var(--spacing-2);\n  height: 29px;\n}\n.zd-grid.theme--light.v-data-table {\n  background-color: transparent;\n}\n.zd-grid.theme--light table thead th.zd-table-cell {\n  color: var(--zd-font-color) !important;\n}\n.zd-grid.theme--light table thead th.zd-table-cell.selectable .zd-grid-header-checkbox.v-input--indeterminate .v-icon,\n.zd-grid.theme--light table thead th.zd-table-cell.selectable .zd-grid-header-checkbox.v-input--is-label-active .v-icon {\n  color: var(--v-primary-base);\n}\n.zd-grid.theme--light table tbody td.zd-table-cell {\n  color: var(--zd-font-color);\n}\n.zd-grid.theme--light table tbody tr:not(:last-child) td:not(.v-data-table__mobile-row) {\n  border-bottom: solid var(--regular) var(--v-grey-lighten5);\n}\n.zd-grid.theme--light.v-data-table--fixed-header table thead th.zd-table-cell {\n  box-shadow: inset 0 -1px 0 var(--v-grey-lighten3);\n}\n.zd-grid-footer {\n  margin: 24px 0 0 0;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 1rem;\n}\n.zd-grid-div-footer {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n@media screen and (max-width: 425px) {\n.zd-grid-footer {\n    flex-direction: column;\n    justify-content: center;\n}\n.zd-grid-div-footer {\n    width: 100%;\n}\n.zd-grid .zd-iterable-pagination {\n    justify-content: space-evenly;\n}\n}\n.zd-grid .zd-skeleton-table-cell .v-skeleton-loader__table-cell {\n  height: auto;\n}\n.zd-grid .zd-grid-cell-tooltip {\n  z-index: 10000;\n  position: fixed;\n  color: white;\n  background-color: var(--v-grey-lighten1);\n  border-radius: var(--border);\n  padding: var(--spacing-1) var(--spacing-2);\n  opacity: 0.9;\n  display: none;\n  font-size: 14px;\n  line-height: 22px;\n  text-transform: none;\n  width: auto;\n  pointer-events: none;\n  white-space: pre;\n}\n.zd-grid .zd-grid-cell-tooltip.zd-grid-cell-tooltip-show {\n  display: block;\n  white-space: normal;\n}\n.zd-grid-loading {\n  pointer-events: none;\n}\n.v-data-table__progress {\n  position: sticky;\n  top: 24px;\n}\n.v-data-table--mobile > .v-data-table__wrapper tbody {\n  display: contents;\n  flex-direction: column;\n}", map: undefined, media: undefined })
-  ,inject("data-v-10fca9ca_1", { source: ".zd-tree-grid .zd-table-cell-text-first {\n  display: inline-flex;\n  width: 100%;\n}\n.zd-tree-grid.theme--light tbody td.zd-table-cell {\n  color: var(--zd-font-color);\n}\n.zd-tree-grid.theme--dark tbody td.zd-table-cell {\n  color: #fff;\n}\n.zd-tree-grid tbody td.zd-table-cell.first {\n  padding-left: 5px !important;\n}\n.zd-tree-grid tbody td.zd-table-cell .zd-table-cell-text .search-result {\n  background: var(--v-grey-lighten4);\n}\n.zd-tree-grid .zd-tree-grid-expand {\n  text-align: end;\n  vertical-align: baseline;\n  height: 10px;\n  display: inline-block;\n}\n.zd-tree-grid .zd-tree-grid-expand-action {\n  height: 100%;\n  display: inline-grid;\n  justify-content: end;\n}\n.zd-tree-grid .zd-tree-grid-expand .v-icon {\n  transition: transform 0.3s ease;\n  -webkit-transition: transform 0.3s ease;\n  font-size: 20px;\n}\n.zd-tree-grid .zd-tree-grid-expand .v-icon::after {\n  content: none;\n}\n.zd-tree-grid .zd-tree-grid-expand .v-icon.opened {\n  transform: rotate(90deg);\n  -webkit-transform: rotate(90deg);\n}\n.zd-tree-grid .zd-tree-grid-expand.level1 {\n  width: 20px;\n}\n.zd-tree-grid .zd-tree-grid-expand.level2 {\n  width: 40px;\n}\n.zd-tree-grid .zd-tree-grid-expand.level3 {\n  width: 60px;\n}\n.zd-tree-grid .zd-tree-grid-expand.level4 {\n  width: 80px;\n}\n.zd-tree-grid .zd-tree-grid-expand.level5 {\n  width: 100px;\n}\n.zd-tree-grid .zd-tree-grid-expand.level6 {\n  width: 120px;\n}\n.zd-tree-grid .zd-tree-grid-expand.level7 {\n  width: 140px;\n}\n.zd-tree-grid .zd-tree-grid-expand.level8 {\n  width: 160px;\n}\n.zd-tree-grid .zd-tree-grid-expand.level9 {\n  width: 180px;\n}\n.zd-tree-grid .zd-tree-grid-expand.level10 {\n  width: 200px;\n}", map: undefined, media: undefined });
+      inject("data-v-194f9d22_0", { source: ".zd-grid {\n  outline: none;\n  display: flex;\n  flex-direction: column;\n}\n.zd-grid.theme--light:active table th.zd-table-cell, .zd-grid.theme--light:focus table th.zd-table-cell, .zd-grid.theme--light:focus-within table th.zd-table-cell {\n  color: var(--v-primary-base) !important;\n}\n.zd-grid-toolbar {\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: var(--spacing-4);\n  align-items: center;\n  flex: 0 0 auto;\n}\n.zd-grid-toolbar-slot {\n  width: 100%;\n  display: flex;\n  align-items: center;\n}\n.zd-grid .v-data-table__wrapper {\n  flex: 1 1 auto;\n}\n.zd-grid-search {\n  max-width: 200px;\n}\n.zd-grid table .zd-table-cell {\n  transition: height 0.1s ease;\n}\n.zd-grid table .zd-table-cell.selectable {\n  width: 40px !important;\n  padding-right: var(--spacing-2) !important;\n  max-width: 40px !important;\n  padding-bottom: 0 !important;\n}\n.zd-grid table .zd-table-cell.selectable > div.zd-grid-header-checkbox {\n  margin-top: -2px;\n}\n.zd-grid table .zd-grid-header-checkbox, .zd-grid table .zd-grid-row-checkbox {\n  margin-top: 0;\n  padding-top: 0;\n}\n.zd-grid table .zd-grid-header-checkbox .v-icon, .zd-grid table .zd-grid-row-checkbox .v-icon {\n  font-size: var(--icon-size-small);\n}\n.zd-grid table .zd-grid-header-checkbox .v-input--selection-controls__ripple::before, .zd-grid table .zd-grid-row-checkbox .v-input--selection-controls__ripple::before {\n  display: none;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell {\n  font-size: var(--zd-font-body2-size);\n  font-weight: var(--zd-font-body2-weight);\n  white-space: nowrap;\n  height: 40px;\n  padding: 0 var(--spacing-4) var(--spacing-2) var(--spacing-4);\n  z-index: 4;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-header-cell {\n  width: 100%;\n  display: flex;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.text-left .zd-table-header-cell {\n  justify-content: flex-start;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.text-right .zd-table-header-cell {\n  justify-content: flex-end;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.text-center .zd-table-header-cell {\n  justify-content: center;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort {\n  opacity: 0;\n  position: relative;\n  display: inline-block;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort .zd-table-cell-sort-icon {\n  position: relative;\n  transition: none;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort .zd-table-cell-sort-order {\n  position: absolute;\n  font-size: 9px;\n  right: 2px;\n  color: var(--zd-font-color);\n  width: 12px;\n  text-align: center;\n  border-radius: 50%;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort .zd-table-cell-sort-order.left {\n  right: auto;\n  left: 2px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name {\n  opacity: 0.7;\n  white-space: pre;\n  display: inline-block;\n  vertical-align: bottom;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  overflow-wrap: break-word;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-hidden {\n  text-overflow: unset;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-wrap {\n  white-space: pre-wrap;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp {\n  white-space: normal;\n  -webkit-box-orient: vertical;\n  display: -webkit-box;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-2 {\n  -webkit-line-clamp: 2;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-3 {\n  -webkit-line-clamp: 3;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-4 {\n  -webkit-line-clamp: 4;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-5 {\n  -webkit-line-clamp: 5;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.sortable {\n  cursor: pointer;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.asc .zd-table-cell-sort .zd-table-cell-sort-icon {\n  top: -8px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.asc .zd-table-cell-sort .zd-table-cell-sort-order {\n  top: 6px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.desc .zd-table-cell-sort .zd-table-cell-sort-icon {\n  top: 3px;\n  transform: rotate(180deg);\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.desc .zd-table-cell-sort .zd-table-cell-sort-order {\n  top: -1px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell:hover .zd-table-cell-name, .zd-grid table .zd-grid-table-header th.zd-table-cell.active .zd-table-cell-name {\n  opacity: 1;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell:hover .zd-table-cell-sort, .zd-grid table .zd-grid-table-header th.zd-table-cell.active .zd-table-cell-sort {\n  opacity: 1;\n}\n.zd-grid table thead tr th.zd-table-cell.zd-table-fixed-column-action {\n  position: sticky !important;\n  right: 0;\n  z-index: 5;\n}\n.zd-grid table thead tr th.zd-table-cell.zd-table-fixed-column-action.theme--light {\n  background: #f7f7f7 !important;\n}\n.zd-grid table thead tr th.zd-table-cell.zd-table-fixed-column-action.theme--dark {\n  background: #3c3c3c !important;\n}\n.zd-grid table thead tr th .zd-grid-resize-handle {\n  height: 100%;\n  width: 10px;\n  display: block;\n  position: absolute;\n  top: 0;\n  right: 0;\n  cursor: ew-resize;\n  font-size: 15px;\n  color: #ccc;\n  display: none;\n}\n.zd-grid table thead tr th:hover .zd-grid-resize-handle {\n  display: block;\n}\n.zd-grid table tbody tr td.zd-table-cell {\n  font-size: var(--zd-font-body1-size);\n  font-weight: var(--zd-font-body1-weight);\n  padding: 0 var(--spacing-4);\n  height: 48px;\n}\n.zd-grid table tbody tr td.zd-table-cell.selectable {\n  overflow: hidden;\n}\n.zd-grid table tbody tr td.zd-table-cell.selectable .zd-grid-row-checkbox {\n  opacity: 0.7;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text {\n  display: block;\n  overflow: hidden;\n  white-space: pre;\n  text-overflow: ellipsis;\n  overflow-wrap: break-word;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-hidden {\n  text-overflow: unset;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-wrap {\n  white-space: pre-wrap;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp {\n  white-space: normal;\n  -webkit-box-orient: vertical;\n  display: -webkit-box;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-2 {\n  -webkit-line-clamp: 2;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-3 {\n  -webkit-line-clamp: 3;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-4 {\n  -webkit-line-clamp: 4;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-5 {\n  -webkit-line-clamp: 5;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-fixed-column-action {\n  position: sticky !important;\n  right: 0;\n  z-index: 3;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-fixed-column-action.theme--light {\n  background: #f7f7f7 !important;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-fixed-column-action.theme--dark {\n  background: #3c3c3c !important;\n}\n.zd-grid table tbody tr:hover td.zd-table-cell.selectable .zd-grid-row-checkbox, .zd-grid table tbody tr.active td.zd-table-cell.selectable .zd-grid-row-checkbox {\n  opacity: 1;\n}\n.zd-grid table tbody tr.current {\n  background: var(--current-row-color);\n}\n.zd-grid table tbody tr.current:hover {\n  background: var(--current-row-hover-color) !important;\n}\n.zd-grid.v-data-table--dense table thead tr th.zd-table-cell {\n  padding: 0 var(--spacing-2) var(--spacing-1) var(--spacing-2);\n  height: 24px;\n}\n.zd-grid.v-data-table--dense table tbody tr td.zd-table-cell {\n  padding: 0 var(--spacing-2);\n  height: 29px;\n}\n.zd-grid.theme--light.v-data-table {\n  background-color: transparent;\n}\n.zd-grid.theme--light table thead th.zd-table-cell {\n  color: var(--zd-font-color) !important;\n}\n.zd-grid.theme--light table thead th.zd-table-cell.selectable .zd-grid-header-checkbox.v-input--indeterminate .v-icon,\n.zd-grid.theme--light table thead th.zd-table-cell.selectable .zd-grid-header-checkbox.v-input--is-label-active .v-icon {\n  color: var(--v-primary-base);\n}\n.zd-grid.theme--light table tbody td.zd-table-cell {\n  color: var(--zd-font-color);\n}\n.zd-grid.theme--light table tbody tr:not(:last-child) td:not(.v-data-table__mobile-row) {\n  border-bottom: solid var(--regular) var(--v-grey-lighten5);\n}\n.zd-grid.theme--light.v-data-table--fixed-header table thead th.zd-table-cell {\n  box-shadow: inset 0 -1px 0 var(--v-grey-lighten3);\n}\n.zd-grid-footer {\n  margin: var(--spacing-4) 0 0 0;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 1rem;\n  flex: 0 0 auto;\n}\n.zd-grid-div-footer {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n@media screen and (max-width: 425px) {\n.zd-grid-footer {\n    flex-direction: column;\n    justify-content: center;\n}\n.zd-grid-div-footer {\n    width: 100%;\n}\n.zd-grid .zd-iterable-pagination {\n    justify-content: space-evenly;\n}\n}\n.zd-grid .zd-skeleton-table-cell .v-skeleton-loader__table-cell {\n  height: auto;\n}\n.zd-grid .zd-grid-cell-tooltip {\n  z-index: 10000;\n  position: fixed;\n  color: white;\n  background-color: var(--v-grey-lighten1);\n  border-radius: var(--border);\n  padding: var(--spacing-1) var(--spacing-2);\n  opacity: 0.9;\n  display: none;\n  font-size: 14px;\n  line-height: 22px;\n  text-transform: none;\n  width: auto;\n  pointer-events: none;\n  white-space: pre;\n}\n.zd-grid .zd-grid-cell-tooltip.zd-grid-cell-tooltip-show {\n  display: block;\n  white-space: normal;\n}\n.zd-grid-loading {\n  pointer-events: none;\n}\n.v-data-table__progress {\n  position: sticky;\n  top: 24px;\n}\n.v-data-table--mobile > .v-data-table__wrapper tbody {\n  display: contents;\n  flex-direction: column;\n}", map: undefined, media: undefined })
+  ,inject("data-v-194f9d22_1", { source: ".zd-tree-grid .zd-table-cell-text-first {\n  display: inline-flex;\n  width: 100%;\n}\n.zd-tree-grid.theme--light tbody td.zd-table-cell {\n  color: var(--zd-font-color);\n}\n.zd-tree-grid.theme--dark tbody td.zd-table-cell {\n  color: #fff;\n}\n.zd-tree-grid tbody td.zd-table-cell.first {\n  padding-left: 5px !important;\n}\n.zd-tree-grid tbody td.zd-table-cell .zd-table-cell-text .search-result {\n  background: var(--v-grey-lighten4);\n}\n.zd-tree-grid .zd-tree-grid-expand {\n  text-align: end;\n  vertical-align: baseline;\n  height: 10px;\n  display: inline-block;\n}\n.zd-tree-grid .zd-tree-grid-expand-action {\n  height: 100%;\n  display: inline-grid;\n  justify-content: end;\n}\n.zd-tree-grid .zd-tree-grid-expand .v-icon {\n  transition: transform 0.3s ease;\n  -webkit-transition: transform 0.3s ease;\n  font-size: 20px;\n}\n.zd-tree-grid .zd-tree-grid-expand .v-icon::after {\n  content: none;\n}\n.zd-tree-grid .zd-tree-grid-expand .v-icon.opened {\n  transform: rotate(90deg);\n  -webkit-transform: rotate(90deg);\n}\n.zd-tree-grid .zd-tree-grid-expand.level1 {\n  width: 20px;\n}\n.zd-tree-grid .zd-tree-grid-expand.level2 {\n  width: 40px;\n}\n.zd-tree-grid .zd-tree-grid-expand.level3 {\n  width: 60px;\n}\n.zd-tree-grid .zd-tree-grid-expand.level4 {\n  width: 80px;\n}\n.zd-tree-grid .zd-tree-grid-expand.level5 {\n  width: 100px;\n}\n.zd-tree-grid .zd-tree-grid-expand.level6 {\n  width: 120px;\n}\n.zd-tree-grid .zd-tree-grid-expand.level7 {\n  width: 140px;\n}\n.zd-tree-grid .zd-tree-grid-expand.level8 {\n  width: 160px;\n}\n.zd-tree-grid .zd-tree-grid-expand.level9 {\n  width: 180px;\n}\n.zd-tree-grid .zd-tree-grid-expand.level10 {\n  width: 200px;\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -60244,10 +60638,20 @@ If you're seeing "$attrs is readonly", it's caused by this`);
         "zd-tree-grid",
         "zd-tree-grid-editable",
         _vm.instance.cssClass,
-        { "zd-grid-flex": _vm.instance.gridHeight || _vm.instance.gridMaxHeight },
         { "zd-grid-loading": _vm.instance.datasource.loading },
       ],
-      style: [_vm.cssColorVars, _vm.$styleObject(_vm.instance.cssStyle)],
+      style: [
+        _vm.cssColorVars,
+        {
+          height: _vm.$formatSize(_vm.instance.height),
+          width: _vm.$formatSize(_vm.instance.width),
+          maxHeight: _vm.$formatSize(_vm.instance.maxHeight),
+          minHeight: _vm.$formatSize(_vm.instance.minHeight),
+          maxWidth: _vm.$formatSize(_vm.instance.maxWidth),
+          minWidth: _vm.$formatSize(_vm.instance.minWidth),
+        },
+        _vm.$styleObject(_vm.instance.cssStyle),
+      ],
       attrs: {
         id: _vm.instance.name,
         "fixed-header": "",
@@ -60877,6 +61281,8 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                                                             column: column,
                                                             row: item,
                                                             rowStyle: rowStyle,
+                                                            rowKey:
+                                                              _vm.rowKey(item),
                                                             cellsApplied:
                                                               cellsApplied,
                                                             isEdited:
@@ -61212,8 +61618,8 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__ = function (inject) {
       if (!inject) return
-      inject("data-v-f4dc69e2_0", { source: ".zd-grid {\n  outline: none;\n}\n.zd-grid-flex {\n  display: flex;\n  flex-direction: column;\n}\n.zd-grid-flex .v-data-table__wrapper {\n  flex: 1;\n}\n.zd-grid.theme--light:active table th.zd-table-cell, .zd-grid.theme--light:focus table th.zd-table-cell, .zd-grid.theme--light:focus-within table th.zd-table-cell {\n  color: var(--v-primary-base) !important;\n}\n.zd-grid-toolbar {\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: var(--spacing-4);\n  align-items: center;\n}\n.zd-grid-toolbar-slot {\n  width: 100%;\n  display: flex;\n  align-items: center;\n}\n.zd-grid-search {\n  max-width: 200px;\n}\n.zd-grid table .zd-table-cell {\n  transition: height 0.1s ease;\n}\n.zd-grid table .zd-table-cell.selectable {\n  width: 40px !important;\n  padding-right: var(--spacing-2) !important;\n  max-width: 40px !important;\n  padding-bottom: 0 !important;\n}\n.zd-grid table .zd-table-cell.selectable > div.zd-grid-header-checkbox {\n  margin-top: -2px;\n}\n.zd-grid table .zd-grid-header-checkbox, .zd-grid table .zd-grid-row-checkbox {\n  margin-top: 0;\n  padding-top: 0;\n}\n.zd-grid table .zd-grid-header-checkbox .v-icon, .zd-grid table .zd-grid-row-checkbox .v-icon {\n  font-size: var(--icon-size-small);\n}\n.zd-grid table .zd-grid-header-checkbox .v-input--selection-controls__ripple::before, .zd-grid table .zd-grid-row-checkbox .v-input--selection-controls__ripple::before {\n  display: none;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell {\n  font-size: var(--zd-font-body2-size);\n  font-weight: var(--zd-font-body2-weight);\n  white-space: nowrap;\n  height: 40px;\n  padding: 0 var(--spacing-4) var(--spacing-2) var(--spacing-4);\n  z-index: 4;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-header-cell {\n  width: 100%;\n  display: flex;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.text-left .zd-table-header-cell {\n  justify-content: flex-start;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.text-right .zd-table-header-cell {\n  justify-content: flex-end;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.text-center .zd-table-header-cell {\n  justify-content: center;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort {\n  opacity: 0;\n  position: relative;\n  display: inline-block;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort .zd-table-cell-sort-icon {\n  position: relative;\n  transition: none;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort .zd-table-cell-sort-order {\n  position: absolute;\n  font-size: 9px;\n  right: 2px;\n  color: var(--zd-font-color);\n  width: 12px;\n  text-align: center;\n  border-radius: 50%;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort .zd-table-cell-sort-order.left {\n  right: auto;\n  left: 2px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name {\n  opacity: 0.7;\n  white-space: pre;\n  display: inline-block;\n  vertical-align: bottom;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  overflow-wrap: break-word;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-hidden {\n  text-overflow: unset;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-wrap {\n  white-space: pre-wrap;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp {\n  white-space: normal;\n  -webkit-box-orient: vertical;\n  display: -webkit-box;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-2 {\n  -webkit-line-clamp: 2;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-3 {\n  -webkit-line-clamp: 3;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-4 {\n  -webkit-line-clamp: 4;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-5 {\n  -webkit-line-clamp: 5;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.sortable {\n  cursor: pointer;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.asc .zd-table-cell-sort .zd-table-cell-sort-icon {\n  top: -8px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.asc .zd-table-cell-sort .zd-table-cell-sort-order {\n  top: 6px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.desc .zd-table-cell-sort .zd-table-cell-sort-icon {\n  top: 3px;\n  transform: rotate(180deg);\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.desc .zd-table-cell-sort .zd-table-cell-sort-order {\n  top: -1px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell:hover .zd-table-cell-name, .zd-grid table .zd-grid-table-header th.zd-table-cell.active .zd-table-cell-name {\n  opacity: 1;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell:hover .zd-table-cell-sort, .zd-grid table .zd-grid-table-header th.zd-table-cell.active .zd-table-cell-sort {\n  opacity: 1;\n}\n.zd-grid table thead tr th.zd-table-cell.zd-table-fixed-column-action {\n  position: sticky !important;\n  right: 0;\n  z-index: 5;\n}\n.zd-grid table thead tr th.zd-table-cell.zd-table-fixed-column-action.theme--light {\n  background: #f7f7f7 !important;\n}\n.zd-grid table thead tr th.zd-table-cell.zd-table-fixed-column-action.theme--dark {\n  background: #3c3c3c !important;\n}\n.zd-grid table thead tr th .zd-grid-resize-handle {\n  height: 100%;\n  width: 10px;\n  display: block;\n  position: absolute;\n  top: 0;\n  right: 0;\n  cursor: ew-resize;\n  font-size: 15px;\n  color: #ccc;\n  display: none;\n}\n.zd-grid table thead tr th:hover .zd-grid-resize-handle {\n  display: block;\n}\n.zd-grid table tbody tr td.zd-table-cell {\n  font-size: var(--zd-font-body1-size);\n  font-weight: var(--zd-font-body1-weight);\n  padding: 0 var(--spacing-4);\n  height: 48px;\n}\n.zd-grid table tbody tr td.zd-table-cell.selectable {\n  overflow: hidden;\n}\n.zd-grid table tbody tr td.zd-table-cell.selectable .zd-grid-row-checkbox {\n  opacity: 0.7;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text {\n  display: block;\n  overflow: hidden;\n  white-space: pre;\n  text-overflow: ellipsis;\n  overflow-wrap: break-word;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-hidden {\n  text-overflow: unset;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-wrap {\n  white-space: pre-wrap;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp {\n  white-space: normal;\n  -webkit-box-orient: vertical;\n  display: -webkit-box;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-2 {\n  -webkit-line-clamp: 2;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-3 {\n  -webkit-line-clamp: 3;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-4 {\n  -webkit-line-clamp: 4;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-5 {\n  -webkit-line-clamp: 5;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-fixed-column-action {\n  position: sticky !important;\n  right: 0;\n  z-index: 3;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-fixed-column-action.theme--light {\n  background: #f7f7f7 !important;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-fixed-column-action.theme--dark {\n  background: #3c3c3c !important;\n}\n.zd-grid table tbody tr:hover td.zd-table-cell.selectable .zd-grid-row-checkbox, .zd-grid table tbody tr.active td.zd-table-cell.selectable .zd-grid-row-checkbox {\n  opacity: 1;\n}\n.zd-grid table tbody tr.current {\n  background: var(--current-row-color);\n}\n.zd-grid table tbody tr.current:hover {\n  background: var(--current-row-hover-color) !important;\n}\n.zd-grid.v-data-table--dense table thead tr th.zd-table-cell {\n  padding: 0 var(--spacing-2) var(--spacing-1) var(--spacing-2);\n  height: 24px;\n}\n.zd-grid.v-data-table--dense table tbody tr td.zd-table-cell {\n  padding: 0 var(--spacing-2);\n  height: 29px;\n}\n.zd-grid.theme--light.v-data-table {\n  background-color: transparent;\n}\n.zd-grid.theme--light table thead th.zd-table-cell {\n  color: var(--zd-font-color) !important;\n}\n.zd-grid.theme--light table thead th.zd-table-cell.selectable .zd-grid-header-checkbox.v-input--indeterminate .v-icon,\n.zd-grid.theme--light table thead th.zd-table-cell.selectable .zd-grid-header-checkbox.v-input--is-label-active .v-icon {\n  color: var(--v-primary-base);\n}\n.zd-grid.theme--light table tbody td.zd-table-cell {\n  color: var(--zd-font-color);\n}\n.zd-grid.theme--light table tbody tr:not(:last-child) td:not(.v-data-table__mobile-row) {\n  border-bottom: solid var(--regular) var(--v-grey-lighten5);\n}\n.zd-grid.theme--light.v-data-table--fixed-header table thead th.zd-table-cell {\n  box-shadow: inset 0 -1px 0 var(--v-grey-lighten3);\n}\n.zd-grid-footer {\n  margin: 24px 0 0 0;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 1rem;\n}\n.zd-grid-div-footer {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n@media screen and (max-width: 425px) {\n.zd-grid-footer {\n    flex-direction: column;\n    justify-content: center;\n}\n.zd-grid-div-footer {\n    width: 100%;\n}\n.zd-grid .zd-iterable-pagination {\n    justify-content: space-evenly;\n}\n}\n.zd-grid .zd-skeleton-table-cell .v-skeleton-loader__table-cell {\n  height: auto;\n}\n.zd-grid .zd-grid-cell-tooltip {\n  z-index: 10000;\n  position: fixed;\n  color: white;\n  background-color: var(--v-grey-lighten1);\n  border-radius: var(--border);\n  padding: var(--spacing-1) var(--spacing-2);\n  opacity: 0.9;\n  display: none;\n  font-size: 14px;\n  line-height: 22px;\n  text-transform: none;\n  width: auto;\n  pointer-events: none;\n  white-space: pre;\n}\n.zd-grid .zd-grid-cell-tooltip.zd-grid-cell-tooltip-show {\n  display: block;\n  white-space: normal;\n}\n.zd-grid-loading {\n  pointer-events: none;\n}\n.v-data-table__progress {\n  position: sticky;\n  top: 24px;\n}\n.v-data-table--mobile > .v-data-table__wrapper tbody {\n  display: contents;\n  flex-direction: column;\n}", map: undefined, media: undefined })
-  ,inject("data-v-f4dc69e2_1", { source: ".zd-tree-grid-editable table tbody tr td.zd-table-cell .zd-table-cell-text-first {\n  display: inline-flex;\n  width: 100%;\n}\n.zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-column-editable.text-right .zd-table-cell-inline-edit, .zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable.text-right .zd-table-cell-inline-edit {\n  justify-content: flex-end;\n}\n.zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-column-editable.text-center .zd-table-cell-inline-edit, .zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable.text-center .zd-table-cell-inline-edit {\n  justify-content: center;\n}\n.zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-inline-edit, .zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-inline-edit {\n  display: flex;\n}\n.zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-inline-edit .zd-table-cell-edit-icon .v-icon, .zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-inline-edit .zd-table-cell-edit-icon .v-icon {\n  display: flex;\n  font-size: 18px;\n  margin-right: var(--spacing-1);\n}\n.zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-column-editable .zd-tree-grid-editable-cell-wrapper, .zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-tree-grid-editable-cell-wrapper {\n  display: flex;\n}\n.zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-text, .zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text {\n  width: 100%;\n  padding: 0 0.5rem;\n  position: relative;\n  display: block;\n  height: 1.25rem;\n}\n.zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-text:before, .zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-text:after, .zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text:before, .zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text:after {\n  content: \"\";\n  position: absolute;\n  width: 1px;\n  height: var(--spacing-1);\n  bottom: 0;\n}\n.zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-text:before, .zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text:before {\n  left: 0;\n}\n.zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-text:after, .zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text:after {\n  right: 0;\n}\n.zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable {\n  cursor: pointer;\n}\n.zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text {\n  border-bottom: solid var(--regular) var(--v-grey-lighten4);\n}\n.zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text:before, .zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text:after {\n  border-left: solid var(--regular) var(--v-grey-lighten4);\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand {\n  display: inline-block;\n  text-align: end;\n  vertical-align: baseline;\n  height: 10px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand .v-icon {\n  transition: transform 0.3s ease;\n  -webkit-transition: transform 0.3s ease;\n  font-size: 20px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand .v-icon::after {\n  content: none;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand .v-icon.opened {\n  transform: rotate(90deg);\n  -webkit-transform: rotate(90deg);\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level1 {\n  width: 23px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level2 {\n  width: 46px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level3 {\n  width: 69px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level4 {\n  width: 92px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level5 {\n  width: 115px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level6 {\n  width: 138px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level7 {\n  width: 161px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level8 {\n  width: 184px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level9 {\n  width: 207px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level10 {\n  width: 230px;\n}\n.zd-tree-grid-editable.v-data-table--dense table tbody .zd-input.zd-text-input .v-input__slot {\n  height: 22px;\n}\n.zd-tree-grid-editable.v-data-table--dense table tbody .zd-input.zd-text-input .v-input__slot input, .zd-tree-grid-editable.v-data-table--dense table tbody .zd-input.zd-text-input .v-input__slot .v-select__selections {\n  height: 22px;\n  max-height: 22px;\n}", map: undefined, media: undefined });
+      inject("data-v-114bb09f_0", { source: ".zd-grid {\n  outline: none;\n  display: flex;\n  flex-direction: column;\n}\n.zd-grid.theme--light:active table th.zd-table-cell, .zd-grid.theme--light:focus table th.zd-table-cell, .zd-grid.theme--light:focus-within table th.zd-table-cell {\n  color: var(--v-primary-base) !important;\n}\n.zd-grid-toolbar {\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: var(--spacing-4);\n  align-items: center;\n  flex: 0 0 auto;\n}\n.zd-grid-toolbar-slot {\n  width: 100%;\n  display: flex;\n  align-items: center;\n}\n.zd-grid .v-data-table__wrapper {\n  flex: 1 1 auto;\n}\n.zd-grid-search {\n  max-width: 200px;\n}\n.zd-grid table .zd-table-cell {\n  transition: height 0.1s ease;\n}\n.zd-grid table .zd-table-cell.selectable {\n  width: 40px !important;\n  padding-right: var(--spacing-2) !important;\n  max-width: 40px !important;\n  padding-bottom: 0 !important;\n}\n.zd-grid table .zd-table-cell.selectable > div.zd-grid-header-checkbox {\n  margin-top: -2px;\n}\n.zd-grid table .zd-grid-header-checkbox, .zd-grid table .zd-grid-row-checkbox {\n  margin-top: 0;\n  padding-top: 0;\n}\n.zd-grid table .zd-grid-header-checkbox .v-icon, .zd-grid table .zd-grid-row-checkbox .v-icon {\n  font-size: var(--icon-size-small);\n}\n.zd-grid table .zd-grid-header-checkbox .v-input--selection-controls__ripple::before, .zd-grid table .zd-grid-row-checkbox .v-input--selection-controls__ripple::before {\n  display: none;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell {\n  font-size: var(--zd-font-body2-size);\n  font-weight: var(--zd-font-body2-weight);\n  white-space: nowrap;\n  height: 40px;\n  padding: 0 var(--spacing-4) var(--spacing-2) var(--spacing-4);\n  z-index: 4;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-header-cell {\n  width: 100%;\n  display: flex;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.text-left .zd-table-header-cell {\n  justify-content: flex-start;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.text-right .zd-table-header-cell {\n  justify-content: flex-end;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.text-center .zd-table-header-cell {\n  justify-content: center;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort {\n  opacity: 0;\n  position: relative;\n  display: inline-block;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort .zd-table-cell-sort-icon {\n  position: relative;\n  transition: none;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort .zd-table-cell-sort-order {\n  position: absolute;\n  font-size: 9px;\n  right: 2px;\n  color: var(--zd-font-color);\n  width: 12px;\n  text-align: center;\n  border-radius: 50%;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort .zd-table-cell-sort-order.left {\n  right: auto;\n  left: 2px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name {\n  opacity: 0.7;\n  white-space: pre;\n  display: inline-block;\n  vertical-align: bottom;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  overflow-wrap: break-word;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-hidden {\n  text-overflow: unset;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-wrap {\n  white-space: pre-wrap;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp {\n  white-space: normal;\n  -webkit-box-orient: vertical;\n  display: -webkit-box;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-2 {\n  -webkit-line-clamp: 2;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-3 {\n  -webkit-line-clamp: 3;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-4 {\n  -webkit-line-clamp: 4;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-5 {\n  -webkit-line-clamp: 5;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.sortable {\n  cursor: pointer;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.asc .zd-table-cell-sort .zd-table-cell-sort-icon {\n  top: -8px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.asc .zd-table-cell-sort .zd-table-cell-sort-order {\n  top: 6px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.desc .zd-table-cell-sort .zd-table-cell-sort-icon {\n  top: 3px;\n  transform: rotate(180deg);\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.desc .zd-table-cell-sort .zd-table-cell-sort-order {\n  top: -1px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell:hover .zd-table-cell-name, .zd-grid table .zd-grid-table-header th.zd-table-cell.active .zd-table-cell-name {\n  opacity: 1;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell:hover .zd-table-cell-sort, .zd-grid table .zd-grid-table-header th.zd-table-cell.active .zd-table-cell-sort {\n  opacity: 1;\n}\n.zd-grid table thead tr th.zd-table-cell.zd-table-fixed-column-action {\n  position: sticky !important;\n  right: 0;\n  z-index: 5;\n}\n.zd-grid table thead tr th.zd-table-cell.zd-table-fixed-column-action.theme--light {\n  background: #f7f7f7 !important;\n}\n.zd-grid table thead tr th.zd-table-cell.zd-table-fixed-column-action.theme--dark {\n  background: #3c3c3c !important;\n}\n.zd-grid table thead tr th .zd-grid-resize-handle {\n  height: 100%;\n  width: 10px;\n  display: block;\n  position: absolute;\n  top: 0;\n  right: 0;\n  cursor: ew-resize;\n  font-size: 15px;\n  color: #ccc;\n  display: none;\n}\n.zd-grid table thead tr th:hover .zd-grid-resize-handle {\n  display: block;\n}\n.zd-grid table tbody tr td.zd-table-cell {\n  font-size: var(--zd-font-body1-size);\n  font-weight: var(--zd-font-body1-weight);\n  padding: 0 var(--spacing-4);\n  height: 48px;\n}\n.zd-grid table tbody tr td.zd-table-cell.selectable {\n  overflow: hidden;\n}\n.zd-grid table tbody tr td.zd-table-cell.selectable .zd-grid-row-checkbox {\n  opacity: 0.7;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text {\n  display: block;\n  overflow: hidden;\n  white-space: pre;\n  text-overflow: ellipsis;\n  overflow-wrap: break-word;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-hidden {\n  text-overflow: unset;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-wrap {\n  white-space: pre-wrap;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp {\n  white-space: normal;\n  -webkit-box-orient: vertical;\n  display: -webkit-box;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-2 {\n  -webkit-line-clamp: 2;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-3 {\n  -webkit-line-clamp: 3;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-4 {\n  -webkit-line-clamp: 4;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-5 {\n  -webkit-line-clamp: 5;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-fixed-column-action {\n  position: sticky !important;\n  right: 0;\n  z-index: 3;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-fixed-column-action.theme--light {\n  background: #f7f7f7 !important;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-fixed-column-action.theme--dark {\n  background: #3c3c3c !important;\n}\n.zd-grid table tbody tr:hover td.zd-table-cell.selectable .zd-grid-row-checkbox, .zd-grid table tbody tr.active td.zd-table-cell.selectable .zd-grid-row-checkbox {\n  opacity: 1;\n}\n.zd-grid table tbody tr.current {\n  background: var(--current-row-color);\n}\n.zd-grid table tbody tr.current:hover {\n  background: var(--current-row-hover-color) !important;\n}\n.zd-grid.v-data-table--dense table thead tr th.zd-table-cell {\n  padding: 0 var(--spacing-2) var(--spacing-1) var(--spacing-2);\n  height: 24px;\n}\n.zd-grid.v-data-table--dense table tbody tr td.zd-table-cell {\n  padding: 0 var(--spacing-2);\n  height: 29px;\n}\n.zd-grid.theme--light.v-data-table {\n  background-color: transparent;\n}\n.zd-grid.theme--light table thead th.zd-table-cell {\n  color: var(--zd-font-color) !important;\n}\n.zd-grid.theme--light table thead th.zd-table-cell.selectable .zd-grid-header-checkbox.v-input--indeterminate .v-icon,\n.zd-grid.theme--light table thead th.zd-table-cell.selectable .zd-grid-header-checkbox.v-input--is-label-active .v-icon {\n  color: var(--v-primary-base);\n}\n.zd-grid.theme--light table tbody td.zd-table-cell {\n  color: var(--zd-font-color);\n}\n.zd-grid.theme--light table tbody tr:not(:last-child) td:not(.v-data-table__mobile-row) {\n  border-bottom: solid var(--regular) var(--v-grey-lighten5);\n}\n.zd-grid.theme--light.v-data-table--fixed-header table thead th.zd-table-cell {\n  box-shadow: inset 0 -1px 0 var(--v-grey-lighten3);\n}\n.zd-grid-footer {\n  margin: var(--spacing-4) 0 0 0;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 1rem;\n  flex: 0 0 auto;\n}\n.zd-grid-div-footer {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n@media screen and (max-width: 425px) {\n.zd-grid-footer {\n    flex-direction: column;\n    justify-content: center;\n}\n.zd-grid-div-footer {\n    width: 100%;\n}\n.zd-grid .zd-iterable-pagination {\n    justify-content: space-evenly;\n}\n}\n.zd-grid .zd-skeleton-table-cell .v-skeleton-loader__table-cell {\n  height: auto;\n}\n.zd-grid .zd-grid-cell-tooltip {\n  z-index: 10000;\n  position: fixed;\n  color: white;\n  background-color: var(--v-grey-lighten1);\n  border-radius: var(--border);\n  padding: var(--spacing-1) var(--spacing-2);\n  opacity: 0.9;\n  display: none;\n  font-size: 14px;\n  line-height: 22px;\n  text-transform: none;\n  width: auto;\n  pointer-events: none;\n  white-space: pre;\n}\n.zd-grid .zd-grid-cell-tooltip.zd-grid-cell-tooltip-show {\n  display: block;\n  white-space: normal;\n}\n.zd-grid-loading {\n  pointer-events: none;\n}\n.v-data-table__progress {\n  position: sticky;\n  top: 24px;\n}\n.v-data-table--mobile > .v-data-table__wrapper tbody {\n  display: contents;\n  flex-direction: column;\n}", map: undefined, media: undefined })
+  ,inject("data-v-114bb09f_1", { source: ".zd-tree-grid-editable table tbody tr td.zd-table-cell .zd-table-cell-text-first {\n  display: inline-flex;\n  width: 100%;\n}\n.zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-column-editable.text-right .zd-table-cell-inline-edit, .zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable.text-right .zd-table-cell-inline-edit {\n  justify-content: flex-end;\n}\n.zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-column-editable.text-center .zd-table-cell-inline-edit, .zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable.text-center .zd-table-cell-inline-edit {\n  justify-content: center;\n}\n.zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-inline-edit, .zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-inline-edit {\n  display: flex;\n}\n.zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-inline-edit .zd-table-cell-edit-icon .v-icon, .zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-inline-edit .zd-table-cell-edit-icon .v-icon {\n  display: flex;\n  font-size: 18px;\n  margin-right: var(--spacing-1);\n}\n.zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-column-editable .zd-tree-grid-editable-cell-wrapper, .zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-tree-grid-editable-cell-wrapper {\n  display: flex;\n}\n.zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-text, .zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text {\n  width: 100%;\n  padding: 0 0.5rem;\n  position: relative;\n  display: block;\n  height: 1.25rem;\n}\n.zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-text:before, .zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-text:after, .zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text:before, .zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text:after {\n  content: \"\";\n  position: absolute;\n  width: 1px;\n  height: var(--spacing-1);\n  bottom: 0;\n}\n.zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-text:before, .zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text:before {\n  left: 0;\n}\n.zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-text:after, .zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text:after {\n  right: 0;\n}\n.zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable {\n  cursor: pointer;\n}\n.zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text {\n  border-bottom: solid var(--regular) var(--v-grey-lighten4);\n}\n.zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text:before, .zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text:after {\n  border-left: solid var(--regular) var(--v-grey-lighten4);\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand {\n  display: inline-block;\n  text-align: end;\n  vertical-align: baseline;\n  height: 10px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand .v-icon {\n  transition: transform 0.3s ease;\n  -webkit-transition: transform 0.3s ease;\n  font-size: 20px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand .v-icon::after {\n  content: none;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand .v-icon.opened {\n  transform: rotate(90deg);\n  -webkit-transform: rotate(90deg);\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level1 {\n  width: 23px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level2 {\n  width: 46px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level3 {\n  width: 69px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level4 {\n  width: 92px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level5 {\n  width: 115px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level6 {\n  width: 138px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level7 {\n  width: 161px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level8 {\n  width: 184px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level9 {\n  width: 207px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level10 {\n  width: 230px;\n}\n.zd-tree-grid-editable.v-data-table--dense table tbody .zd-input.zd-text-input .v-input__slot {\n  height: 22px;\n}\n.zd-tree-grid-editable.v-data-table--dense table tbody .zd-input.zd-text-input .v-input__slot input, .zd-tree-grid-editable.v-data-table--dense table tbody .zd-input.zd-text-input .v-input__slot .v-select__selections {\n  height: 22px;\n  max-height: 22px;\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -61801,6 +62207,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   exports.ZdTreeGridEditable = script;
   exports.components = components;
   exports["default"] = Zeedhi;
+  exports.setFillHeight = setFillHeight;
 
   Object.defineProperty(exports, '__esModule', { value: true });