@zeedhi/vuetify 1.70.0 → 1.72.0

package/dist/zd-vuetify.umd.js

@@ -37857,7 +37857,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       vuePropertyDecorator.Component,
       __metadata("design:paramtypes", [])
   ], ZdAlert);
-  var script$1l = ZdAlert;
+  var script$1j = ZdAlert;
 
   function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier /* server only */, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
       if (typeof shadowMode !== 'boolean') {
@@ -37988,7 +37988,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   }
 
   /* script */
-  const __vue_script__$1t = script$1l;
+  const __vue_script__$1t = script$1j;
 
   /* template */
   var __vue_render__$1t = function () {
@@ -38223,10 +38223,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   ZdApexChart = __decorate([
       vuePropertyDecorator.Component
   ], ZdApexChart);
-  var script$1k = ZdApexChart;
+  var script$1i = ZdApexChart;
 
   /* script */
-  const __vue_script__$1s = script$1k;
+  const __vue_script__$1s = script$1i;
 
   /* template */
   var __vue_render__$1s = function () {
@@ -38346,10 +38346,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   ZdBadge = __decorate([
       vuePropertyDecorator.Component
   ], ZdBadge);
-  var script$1j = ZdBadge;
+  var script$1h = ZdBadge;
 
   /* script */
-  const __vue_script__$1r = script$1j;
+  const __vue_script__$1r = script$1h;
 
   /* template */
   var __vue_render__$1r = function () {
@@ -38472,10 +38472,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   ZdBreadcrumbs = __decorate([
       vuePropertyDecorator.Component
   ], ZdBreadcrumbs);
-  var script$1i = ZdBreadcrumbs;
+  var script$1g = ZdBreadcrumbs;
 
   /* script */
-  const __vue_script__$1q = script$1i;
+  const __vue_script__$1q = script$1g;
 
   /* template */
   var __vue_render__$1q = function () {
@@ -38889,10 +38889,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   ZdButtonGroup = __decorate([
       vuePropertyDecorator.Component
   ], ZdButtonGroup);
-  var script$1h = ZdButtonGroup;
+  var script$1f = ZdButtonGroup;
 
   /* script */
-  const __vue_script__$1o = script$1h;
+  const __vue_script__$1o = script$1f;
 
   /* template */
   var __vue_render__$1o = function () {
@@ -39099,10 +39099,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   ZdCard = __decorate([
       vuePropertyDecorator.Component
   ], ZdCard);
-  var script$1g = ZdCard;
+  var script$1e = ZdCard;
 
   /* script */
-  const __vue_script__$1n = script$1g;
+  const __vue_script__$1n = script$1e;
 
   /* template */
   var __vue_render__$1n = function () {
@@ -39452,10 +39452,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   ZdCarousel = __decorate([
       vuePropertyDecorator.Component
   ], ZdCarousel);
-  var script$1f = ZdCarousel;
+  var script$1d = ZdCarousel;
 
   /* script */
-  const __vue_script__$1m = script$1f;
+  const __vue_script__$1m = script$1d;
 
   /* template */
   var __vue_render__$1m = function () {
@@ -39961,10 +39961,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   ZdCheckbox = __decorate([
       vuePropertyDecorator.Component
   ], ZdCheckbox);
-  var script$1e = ZdCheckbox;
+  var script$1c = ZdCheckbox;
 
   /* script */
-  const __vue_script__$1l = script$1e;
+  const __vue_script__$1l = script$1c;
 
   /* template */
   var __vue_render__$1l = function () {
@@ -40132,10 +40132,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   ZdCheckboxMultiple = __decorate([
       vuePropertyDecorator.Component
   ], ZdCheckboxMultiple);
-  var script$1d = ZdCheckboxMultiple;
+  var script$1b = ZdCheckboxMultiple;
 
   /* script */
-  const __vue_script__$1k = script$1d;
+  const __vue_script__$1k = script$1b;
 
   /* template */
   var __vue_render__$1k = function () {
@@ -40337,10 +40337,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   ZdChip = __decorate([
       vuePropertyDecorator.Component
   ], ZdChip);
-  var script$1c = ZdChip;
+  var script$1a = ZdChip;
 
   /* script */
-  const __vue_script__$1j = script$1c;
+  const __vue_script__$1j = script$1a;
 
   /* template */
   var __vue_render__$1j = function () {
@@ -40545,10 +40545,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   ZdCodeEditor = __decorate([
       vuePropertyDecorator.Component
   ], ZdCodeEditor);
-  var script$1b = ZdCodeEditor;
+  var script$19 = ZdCodeEditor;
 
   /* script */
-  const __vue_script__$1i = script$1b;
+  const __vue_script__$1i = script$19;
 
   /* template */
   var __vue_render__$1i = function () {
@@ -40758,10 +40758,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   ZdCol = __decorate([
       vuePropertyDecorator.Component
   ], ZdCol);
-  var script$1a = ZdCol;
+  var script$18 = ZdCol;
 
   /* script */
-  const __vue_script__$1h = script$1a;
+  const __vue_script__$1h = script$18;
 
   /* template */
   var __vue_render__$1h = function () {
@@ -40933,10 +40933,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   ZdCollapseCard = __decorate([
       vuePropertyDecorator.Component
   ], ZdCollapseCard);
-  var script$19 = ZdCollapseCard;
+  var script$17 = ZdCollapseCard;
 
   /* script */
-  const __vue_script__$1g = script$19;
+  const __vue_script__$1g = script$17;
 
   /* template */
   var __vue_render__$1g = function () {
@@ -41194,10 +41194,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   ZdContainer = __decorate([
       vuePropertyDecorator.Component
   ], ZdContainer);
-  var script$18 = ZdContainer;
+  var script$16 = ZdContainer;
 
   /* script */
-  const __vue_script__$1f = script$18;
+  const __vue_script__$1f = script$16;
 
   /* template */
   var __vue_render__$1f = function () {
@@ -41758,10 +41758,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   ZdCurrency = __decorate([
       vuePropertyDecorator.Component
   ], ZdCurrency);
-  var script$17 = ZdCurrency;
+  var script$15 = ZdCurrency;
 
   /* script */
-  const __vue_script__$1c = script$17;
+  const __vue_script__$1c = script$15;
 
   /* template */
   var __vue_render__$1c = function () {
@@ -41967,10 +41967,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   ZdDashboard = __decorate([
       vuePropertyDecorator.Component
   ], ZdDashboard);
-  var script$16 = ZdDashboard;
+  var script$14 = ZdDashboard;
 
   /* script */
-  const __vue_script__$1b = script$16;
+  const __vue_script__$1b = script$14;
 
   /* template */
   var __vue_render__$1b = function () {
@@ -42438,10 +42438,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   ZdDate = __decorate([
       vuePropertyDecorator.Component
   ], ZdDate);
-  var script$15 = ZdDate;
+  var script$13 = ZdDate;
 
   /* script */
-  const __vue_script__$1a = script$15;
+  const __vue_script__$1a = script$13;
 
   /* template */
   var __vue_render__$1a = function () {
@@ -42857,10 +42857,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   ZdDateRange = __decorate([
       vuePropertyDecorator.Component
   ], ZdDateRange);
-  var script$14 = ZdDateRange;
+  var script$12 = ZdDateRange;
 
   /* script */
-  const __vue_script__$19 = script$14;
+  const __vue_script__$19 = script$12;
 
   /* template */
   var __vue_render__$19 = function () {
@@ -43078,10 +43078,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       vuePropertyDecorator.Component,
       __metadata("design:paramtypes", [])
   ], ZdDialog);
-  var script$13 = ZdDialog;
+  var script$11 = ZdDialog;
 
   /* script */
-  const __vue_script__$18 = script$13;
+  const __vue_script__$18 = script$11;
 
   /* template */
   var __vue_render__$18 = function () {
@@ -43234,10 +43234,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   ZdDivider = __decorate([
       vuePropertyDecorator.Component
   ], ZdDivider);
-  var script$12 = ZdDivider;
+  var script$10 = ZdDivider;
 
   /* script */
-  const __vue_script__$17 = script$12;
+  const __vue_script__$17 = script$10;
 
   /* template */
   var __vue_render__$17 = function () {
@@ -43393,10 +43393,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   ZdDropdown = __decorate([
       vuePropertyDecorator.Component
   ], ZdDropdown);
-  var script$11 = ZdDropdown;
+  var ZdDropdown$1 = ZdDropdown;
 
   /* script */
-  const __vue_script__$16 = script$11;
+  const __vue_script__$16 = ZdDropdown$1;
 
   /* template */
   var __vue_render__$16 = function () {
@@ -43678,10 +43678,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   ZdFileInput = __decorate([
       vuePropertyDecorator.Component
   ], ZdFileInput);
-  var script$10 = ZdFileInput;
+  var script$$ = ZdFileInput;
 
   /* script */
-  const __vue_script__$15 = script$10;
+  const __vue_script__$15 = script$$;
 
   /* template */
   var __vue_render__$15 = function () {
@@ -44069,10 +44069,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   ZdFooter = __decorate([
       vuePropertyDecorator.Component
   ], ZdFooter);
-  var script$$ = ZdFooter;
+  var script$_ = ZdFooter;
 
   /* script */
-  const __vue_script__$14 = script$$;
+  const __vue_script__$14 = script$_;
 
   /* template */
   var __vue_render__$14 = function () {
@@ -44393,10 +44393,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   ZdForm = __decorate([
       vuePropertyDecorator.Component
   ], ZdForm);
-  var script$_ = ZdForm;
+  var script$Z = ZdForm;
 
   /* script */
-  const __vue_script__$13 = script$_;
+  const __vue_script__$13 = script$Z;
 
   /* template */
   var __vue_render__$13 = function () {
@@ -44598,10 +44598,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   ZdFrame = __decorate([
       vuePropertyDecorator.Component
   ], ZdFrame);
-  var script$Z = ZdFrame;
+  var script$Y = ZdFrame;
 
   /* script */
-  const __vue_script__$12 = script$Z;
+  const __vue_script__$12 = script$Y;
 
   /* template */
   var __vue_render__$12 = function () {
@@ -44699,10 +44699,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   ZdFramePage = __decorate([
       vuePropertyDecorator.Component
   ], ZdFramePage);
-  var script$Y = ZdFramePage;
+  var script$X = ZdFramePage;
 
   /* script */
-  const __vue_script__$11 = script$Y;
+  const __vue_script__$11 = script$X;
 
   /* template */
   var __vue_render__$11 = function () {
@@ -44848,6 +44848,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
           super(...arguments);
           this.instanceType = common.Grid;
           this.allselectedState = false;
+          /**
+           * Left distance for each column
+           */
+          this.fixedRight = {};
           this.resizeX = 0;
           this.resizeWidth = 0;
           this.resizeTableWidth = 0;
@@ -44860,6 +44864,8 @@ If you're seeing "$attrs is readonly", it's caused by this`);
               grid.scrollData.start = start;
               this.updateScrollData(data);
           }), 5);
+          this.tableHeader = null;
+          this.tableBody = null;
       }
       update(value) {
           if (value) {
@@ -44916,6 +44922,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
               this.initDragColumns();
           }
           this.setViewGetWidth();
+          this.updateFixedColumnsAction();
       }
       setHeight() {
           const { gridTopSlot, grid, gridFooter } = this.$refs;
@@ -44988,7 +44995,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       }
       calcWidth(column, width) {
           if ((width === null || width === void 0 ? void 0 : width.length) === 0 || width === undefined) {
-              return '100%';
+              return 'unset';
           }
           const min = Math.max(this.minimumColumnWidth(column), this.parseWidth(column.minWidth) || 0);
           const max = this.parseWidth(column.maxWidth);
@@ -44996,7 +45003,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
           return `${Math.max(min, Math.min(Math.trunc(pxWidth), max || Infinity))}px`;
       }
       setSpanWidth(column) {
-          return column.width;
+          return this.calcWidth(column, column.width);
       }
       sortColumns(event) {
           const { originalEvent } = event;
@@ -45262,11 +45269,39 @@ If you're seeing "$attrs is readonly", it's caused by this`);
           }
       }
       getWidthStyle(column) {
-          return {
-              width: this.calcWidth(column, column.width) || 'unset',
-              'min-width': this.calcWidth(column, column.minWidth) || 'unset',
-              'max-width': this.calcWidth(column, column.maxWidth) || 'unset',
-          };
+          let widthData = {};
+          if (column.width) {
+              widthData = Object.assign({ width: this.calcWidth(column, column.width) }, widthData);
+          }
+          if (column.minWidth) {
+              widthData = Object.assign({ 'min-width': this.calcWidth(column, column.minWidth) }, widthData);
+          }
+          if (column.maxWidth) {
+              widthData = Object.assign({ 'max-width': this.calcWidth(column, column.maxWidth) }, widthData);
+          }
+          return widthData;
+      }
+      updateFixedColumnsAction() {
+          if (this.instance.columns.filter((column) => column.actionFixed).length === 0)
+              return;
+          if (!this.tableHeader) {
+              this.tableHeader = this.$el.querySelector('table thead tr');
+              this.tableBody = this.$el.querySelector('table tbody');
+              if (!this.tableHeader || !this.tableBody)
+                  return;
+          }
+          const headerColumns = Array.from(this.tableHeader.querySelectorAll('th'));
+          let right = 0;
+          headerColumns.reverse().forEach((column) => {
+              const name = column.getAttribute('column-name');
+              const columnsWithClassFixed = column.classList.contains('zd-table-fixed-column-action');
+              if (name && columnsWithClassFixed) {
+                  column.style.right = `${right}px`;
+                  this.$set(this.fixedRight, name, column.style.right);
+                  const minActionWidth = column.clientWidth <= 16 ? 40 : column.clientWidth;
+                  right += minActionWidth;
+              }
+          });
       }
   };
   __decorate([
@@ -45624,12 +45659,29 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                                     "th",
                                     {
                                       key: column.name,
+                                      ref: "column-" + column.name,
+                                      refInFor: true,
                                       class: [
                                         "zd-table-cell",
                                         {
                                           sortable: column.sortable,
                                           sortHandle: _vm.instance.dragColumns,
                                         },
+                                        {
+                                          "zd-table-fixed-column-action":
+                                            column.actionFixed,
+                                        },
+                                        {
+                                          "theme--dark":
+                                            (_vm.$vuetify.theme.dark &&
+                                              !_vm.instance.light) ||
+                                            _vm.instance.dark,
+                                        },
+                                        {
+                                          "theme--light":
+                                            !_vm.$vuetify.theme.dark ||
+                                            _vm.instance.light,
+                                        },
                                         "text-" + column.align,
                                         _vm.instance.datasource.getOrderByColumn(
                                           column.name
@@ -45643,15 +45695,17 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                                       style: {
                                         "background-color":
                                           _vm.instance.headerBackground,
-                                        width:
-                                          _vm.calcWidth(
-                                            column,
-                                            column.width ||
-                                              column.maxWidth ||
-                                              column.minWidth
-                                          ) || "unset",
+                                        width: _vm.calcWidth(
+                                          column,
+                                          column.width ||
+                                            column.maxWidth ||
+                                            column.minWidth
+                                        ),
+                                      },
+                                      attrs: {
+                                        "column-name": column.name,
+                                        index: index,
                                       },
-                                      attrs: { index: index },
                                     },
                                     [
                                       _c(
@@ -45659,14 +45713,13 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                                         {
                                           staticClass: "zd-table-header-cell",
                                           style: {
-                                            width:
-                                              _vm.calcWidth(
-                                                column,
-                                                column.width ||
-                                                  column.maxWidth ||
-                                                  column.minWidth,
-                                                true
-                                              ) || "unset",
+                                            width: _vm.calcWidth(
+                                              column,
+                                              column.width ||
+                                                column.maxWidth ||
+                                                column.minWidth,
+                                              true
+                                            ),
                                             color:
                                               _vm.instance.headerCellTextColor,
                                           },
@@ -46067,6 +46120,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                                                 row: item,
                                                 rowStyle: rowStyle,
                                                 cellsApplied: cellsApplied,
+                                                hasUsingCellText: true,
                                               },
                                               on: {
                                                 mouseenter: function ($event) {
@@ -46094,6 +46148,30 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                                               column: column,
                                               rowStyle: rowStyle,
                                               cellsApplied: cellsApplied,
+                                              cellClass: [
+                                                {
+                                                  "zd-table-fixed-column-action":
+                                                    column.actionFixed,
+                                                },
+                                                {
+                                                  "theme--dark":
+                                                    (_vm.$vuetify.theme.dark &&
+                                                      !_vm.instance.light) ||
+                                                    _vm.instance.dark,
+                                                },
+                                                {
+                                                  "theme--light":
+                                                    !_vm.$vuetify.theme.dark ||
+                                                    _vm.instance.light,
+                                                },
+                                              ],
+                                              cellStyle: [
+                                                {
+                                                  right: column.actionFixed
+                                                    ? _vm.fixedRight[column.name]
+                                                    : "unset",
+                                                },
+                                              ],
                                             },
                                             on: {
                                               click: function ($event) {
@@ -46221,7 +46299,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-61e754dc_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 .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-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: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-5211bc09_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 });
 
     };
     /* scoped */
@@ -46408,11 +46486,19 @@ If you're seeing "$attrs is readonly", it's caused by this`);
           return (row[column.name] === trueDefined && !!trueIcon) || !!falseIcon;
       }
       getWidthStyle(column) {
-          return {
-              width: this.calcWidth(column, column.maxWidth || column.minWidth) || 'unset',
-              'min-width': this.calcWidth(column, column.minWidth) || 'unset',
-              'max-width': this.calcWidth(column, column.maxWidth) || 'unset',
+          let widthData = {
+              width: '100%',
           };
+          if (column.width) {
+              widthData = Object.assign({ width: this.calcWidth(column, column.width) }, widthData);
+          }
+          if (column.minWidth) {
+              widthData = Object.assign({ 'min-width': this.calcWidth(column, column.minWidth) }, widthData);
+          }
+          if (column.maxWidth) {
+              widthData = Object.assign({ 'max-width': this.calcWidth(column, column.maxWidth) }, widthData);
+          }
+          return widthData;
       }
   };
   __decorate([
@@ -46426,10 +46512,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   ZdGridEditable = __decorate([
       Component__default["default"]
   ], ZdGridEditable);
-  var script$X = ZdGridEditable;
+  var script$W = ZdGridEditable;
 
   /* script */
-  const __vue_script__$$ = script$X;
+  const __vue_script__$$ = script$W;
 
   /* template */
   var __vue_render__$$ = function () {
@@ -46574,6 +46660,8 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                                     "th",
                                     {
                                       key: column.name,
+                                      ref: "column-" + column.name,
+                                      refInFor: true,
                                       class: [
                                         "zd-table-cell",
                                         "column-th-" +
@@ -46586,6 +46674,21 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                                             !_vm.instance.editing,
                                           sortHandle: _vm.instance.dragColumns,
                                         },
+                                        {
+                                          "zd-table-fixed-column-action":
+                                            column.actionFixed,
+                                        },
+                                        {
+                                          "theme--dark":
+                                            (_vm.$vuetify.theme.dark &&
+                                              !_vm.instance.light) ||
+                                            _vm.instance.dark,
+                                        },
+                                        {
+                                          "theme--light":
+                                            !_vm.$vuetify.theme.dark ||
+                                            _vm.instance.light,
+                                        },
                                         "text-" + column.align,
                                         _vm.instance.datasource.getOrderByColumn(
                                           column.name
@@ -46599,15 +46702,17 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                                       style: {
                                         "background-color":
                                           _vm.instance.headerBackground,
-                                        width:
-                                          _vm.calcWidth(
-                                            column,
-                                            column.width ||
-                                              column.maxWidth ||
-                                              column.minWidth
-                                          ) || "unset",
+                                        width: _vm.calcWidth(
+                                          column,
+                                          column.width ||
+                                            column.maxWidth ||
+                                            column.minWidth
+                                        ),
+                                      },
+                                      attrs: {
+                                        "column-name": column.name,
+                                        index: index,
                                       },
-                                      attrs: { index: index },
                                     },
                                     [
                                       _c(
@@ -46615,13 +46720,12 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                                         {
                                           staticClass: "zd-table-header-cell",
                                           style: {
-                                            width:
-                                              _vm.calcWidth(
-                                                column,
-                                                column.width ||
-                                                  column.maxWidth ||
-                                                  column.minWidth
-                                              ) || "unset",
+                                            width: _vm.calcWidth(
+                                              column,
+                                              column.width ||
+                                                column.maxWidth ||
+                                                column.minWidth
+                                            ),
                                           },
                                         },
                                         [
@@ -47107,6 +47211,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                                                       _vm.getWidthStyle,
                                                     column: column,
                                                     row: item,
+                                                    hasUsingCellText: true,
                                                     rowStyle: rowStyle,
                                                     cellsApplied: cellsApplied,
                                                   },
@@ -47140,6 +47245,30 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                                               column: column,
                                               rowStyle: rowStyle,
                                               cellsApplied: cellsApplied,
+                                              cellClass: [
+                                                {
+                                                  "zd-table-fixed-column-action":
+                                                    column.actionFixed,
+                                                },
+                                                {
+                                                  "theme--dark":
+                                                    (_vm.$vuetify.theme.dark &&
+                                                      !_vm.instance.light) ||
+                                                    _vm.instance.dark,
+                                                },
+                                                {
+                                                  "theme--light":
+                                                    !_vm.$vuetify.theme.dark ||
+                                                    _vm.instance.light,
+                                                },
+                                              ],
+                                              cellStyle: [
+                                                {
+                                                  right: column.actionFixed
+                                                    ? _vm.fixedRight[column.name]
+                                                    : "unset",
+                                                },
+                                              ],
                                             },
                                             on: {
                                               click: function ($event) {
@@ -47267,8 +47396,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-50de17ee_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 .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-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: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-50de17ee_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-d7620cd2_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-d7620cd2_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 */
@@ -47400,10 +47529,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   ZdHeader = __decorate([
       vuePropertyDecorator.Component
   ], ZdHeader);
-  var script$W = ZdHeader;
+  var script$V = ZdHeader;
 
   /* script */
-  const __vue_script__$_ = script$W;
+  const __vue_script__$_ = script$V;
 
   /* template */
   var __vue_render__$_ = function () {
@@ -47698,10 +47827,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   ZdGridFooter = __decorate([
       Component__default["default"]
   ], ZdGridFooter);
-  var script$V = ZdGridFooter;
+  var script$U = ZdGridFooter;
 
   /* script */
-  const __vue_script__$Z = script$V;
+  const __vue_script__$Z = script$U;
 
   /* template */
   var __vue_render__$Z = function () {
@@ -47812,10 +47941,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   ZdIterableNoData = __decorate([
       Component__default["default"]
   ], ZdIterableNoData);
-  var script$U = ZdIterableNoData;
+  var script$T = ZdIterableNoData;
 
   /* script */
-  const __vue_script__$Y = script$U;
+  const __vue_script__$Y = script$T;
 
   /* template */
   var __vue_render__$Y = function () {
@@ -47956,10 +48085,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   ZdGridTop = __decorate([
       Component__default["default"]
   ], ZdGridTop);
-  var script$T = ZdGridTop;
+  var script$S = ZdGridTop;
 
   /* script */
-  const __vue_script__$X = script$T;
+  const __vue_script__$X = script$S;
 
   /* template */
   var __vue_render__$X = function () {
@@ -48063,10 +48192,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   ZdGridAction = __decorate([
       vuePropertyDecorator.Component
   ], ZdGridAction);
-  var script$S = ZdGridAction;
+  var script$R = ZdGridAction;
 
   /* script */
-  const __vue_script__$W = script$S;
+  const __vue_script__$W = script$R;
 
   /* template */
   var __vue_render__$W = function () {
@@ -48158,10 +48287,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   ZdGridCell = __decorate([
       vuePropertyDecorator.Component
   ], ZdGridCell);
-  var script$R = ZdGridCell;
+  var script$Q = ZdGridCell;
 
   /* script */
-  const __vue_script__$V = script$R;
+  const __vue_script__$V = script$Q;
 
   /* template */
   var __vue_render__$V = function () {
@@ -48259,13 +48388,17 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       vuePropertyDecorator.Prop({ type: Function, required: true }),
       __metadata("design:type", Function)
   ], ZdGridCellContent.prototype, "getWidthStyle", void 0);
+  __decorate([
+      vuePropertyDecorator.Prop({ type: Boolean, default: true }),
+      __metadata("design:type", Boolean)
+  ], ZdGridCellContent.prototype, "hasUsingCellText", void 0);
   ZdGridCellContent = __decorate([
       vuePropertyDecorator.Component
   ], ZdGridCellContent);
-  var script$Q = ZdGridCellContent;
+  var script$P = ZdGridCellContent;
 
   /* script */
-  const __vue_script__$U = script$Q;
+  const __vue_script__$U = script$P;
 
   /* template */
   var __vue_render__$U = function () {
@@ -48276,7 +48409,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       "span",
       {
         class: [
-          "zd-table-cell-text",
+          { "zd-table-cell-text": _vm.hasUsingCellText },
           {
             "overflow-hidden": _vm.column.overflow === "hidden",
             "overflow-wrap": _vm.column.overflow === "wrap",
@@ -48302,7 +48435,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$U = function (inject) {
       if (!inject) return
-      inject("data-v-3279ce6e_0", { source: "\n\n\n\n\n\n\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-5c3a02cf_0", { source: "\n\n\n\n\n\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 */
@@ -48373,10 +48506,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   ZdGridCellEdit = __decorate([
       vuePropertyDecorator.Component
   ], ZdGridCellEdit);
-  var script$P = ZdGridCellEdit;
+  var script$O = ZdGridCellEdit;
 
   /* script */
-  const __vue_script__$T = script$P;
+  const __vue_script__$T = script$O;
 
   /* template */
   var __vue_render__$T = function () {
@@ -48464,6 +48597,31 @@ If you're seeing "$attrs is readonly", it's caused by this`);
           }
           return text;
       }
+      hasShowChevron(row) {
+          if (!this.fieldHasChild)
+              return true;
+          const rowHasChild = row[this.fieldHasChild];
+          let isVisibleChevron = true;
+          switch (rowHasChild) {
+              case '0':
+              case false:
+              case 0:
+                  isVisibleChevron = false;
+                  break;
+              case '1':
+              case true:
+              case 1:
+                  isVisibleChevron = true;
+                  break;
+              default:
+                  isVisibleChevron = true;
+                  break;
+          }
+          return isVisibleChevron;
+      }
+      hasShowChevronInTreeGrid(headerIndex, selectable) {
+          return headerIndex === 0 || (headerIndex === 1 && selectable);
+      }
   };
   __decorate([
       vuePropertyDecorator.Prop({ type: Number, required: true }),
@@ -48489,13 +48647,21 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       vuePropertyDecorator.Prop({ type: String, required: true }),
       __metadata("design:type", String)
   ], ZdTreeGridCellContent.prototype, "expandClass", void 0);
+  __decorate([
+      vuePropertyDecorator.Prop({ type: String, required: true }),
+      __metadata("design:type", String)
+  ], ZdTreeGridCellContent.prototype, "fieldHasChild", void 0);
+  __decorate([
+      vuePropertyDecorator.Prop({ type: Boolean, default: false }),
+      __metadata("design:type", Boolean)
+  ], ZdTreeGridCellContent.prototype, "hasUsingCellText", void 0);
   ZdTreeGridCellContent = __decorate([
       Component__default["default"]
   ], ZdTreeGridCellContent);
-  var script$O = ZdTreeGridCellContent;
+  var script$N = ZdTreeGridCellContent;
 
   /* script */
-  const __vue_script__$S = script$O;
+  const __vue_script__$S = script$N;
 
   /* template */
   var __vue_render__$S = function () {
@@ -48510,65 +48676,81 @@ If you're seeing "$attrs is readonly", it's caused by this`);
           column: _vm.column,
           row: _vm.row,
           rowStyle: _vm.rowStyle,
+          hasUsingCellText: false,
           cellsApplied: _vm.cellsApplied,
-          cssClass: [
-            {
-              "zd-table-cell-text-first":
-                _vm.headerIndex === 0 ||
-                (_vm.headerIndex === 1 && _vm.selectable),
-            },
-          ].concat(_vm.cssClass),
+          cssClass: [].concat(_vm.cssClass),
         },
         on: { mouseenter: _vm.mouseenter, mouseleave: _vm.mouseleave },
       },
       [
-        _c(
-          "div",
-          {
-            directives: [
+        _c("div", { staticClass: "zd-grid-cell-wrapper" }, [
+          _c(
+            "div",
+            {
+              directives: [
+                {
+                  name: "show",
+                  rawName: "v-show",
+                  value: _vm.headerIndex === 0,
+                  expression: "headerIndex === 0",
+                },
+              ],
+              class: [_vm.expandClass, "level" + _vm.row.tree__level],
+            },
+            [
+              (_vm.row.tree__children || []).length > 0
+                ? _c(
+                    "v-icon",
+                    {
+                      directives: [
+                        {
+                          name: "show",
+                          rawName: "v-show",
+                          value: _vm.hasShowChevron(_vm.row),
+                          expression: "hasShowChevron(row)",
+                        },
+                      ],
+                      class: { opened: _vm.row.tree__opened },
+                      attrs: { tabindex: "-1" },
+                      on: {
+                        click: function ($event) {
+                          return _vm.toggleExpand(_vm.row, _vm.rowIndex, $event)
+                        },
+                      },
+                    },
+                    [
+                      _vm._v(
+                        "\n      " +
+                          _vm._s(_vm.$getIcon("chevronRight")) +
+                          "\n    "
+                      ),
+                    ]
+                  )
+                : _vm._e(),
+            ],
+            1
+          ),
+          _vm._v(" "),
+          _c("div", {
+            key: _vm.row.tree__searched ? "a" : "b",
+            class: [
               {
-                name: "show",
-                rawName: "v-show",
-                value: _vm.headerIndex === 0,
-                expression: "headerIndex === 0",
+                "zd-table-cell-text-first": _vm.hasShowChevronInTreeGrid(
+                  _vm.headerIndex,
+                  _vm.selectable
+                ),
               },
+              "zd-table-cell-text",
             ],
-            class: [_vm.expandClass, "level" + _vm.row.tree__level],
-          },
-          [
-            (_vm.row.tree__children || []).length > 0
-              ? _c(
-                  "v-icon",
-                  {
-                    class: { opened: _vm.row.tree__opened },
-                    attrs: { tabindex: "-1" },
-                    on: {
-                      click: function ($event) {
-                        return _vm.toggleExpand(_vm.row, _vm.rowIndex)
-                      },
-                    },
-                  },
-                  [
-                    _vm._v(
-                      "\n      " + _vm._s(_vm.$getIcon("chevronRight")) + "\n    "
-                    ),
-                  ]
+            domProps: {
+              innerHTML: _vm._s(
+                _vm.formatSearchResult(
+                  _vm.column.formatterByRow(_vm.row, _vm.cellProps)
                 )
-              : _vm._e(),
-          ],
-          1
-        ),
-        _vm._v(" "),
-        _c("span", {
-          key: _vm.row.tree__searched ? "a" : "b",
-          domProps: {
-            innerHTML: _vm._s(
-              _vm.formatSearchResult(
-                _vm.column.formatterByRow(_vm.row, _vm.cellProps)
-              )
-            ),
-          },
-        }),
+              ),
+            },
+          }),
+        ]),
       ]
     )
   };
@@ -48578,7 +48760,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$S = function (inject) {
       if (!inject) return
-      inject("data-v-700df4ee_0", { source: "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\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-3a69d8ed_0", { source: "\n.zd-grid-cell-wrapper {\n  display: flex;\n  gap: .75rem;\n}\n", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -48658,10 +48840,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   ZdIcon = __decorate([
       vuePropertyDecorator.Component
   ], ZdIcon);
-  var script$N = ZdIcon;
+  var script$M = ZdIcon;
 
   /* script */
-  const __vue_script__$R = script$N;
+  const __vue_script__$R = script$M;
 
   /* template */
   var __vue_render__$R = function () {
@@ -48789,10 +48971,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   ZdImage = __decorate([
       vuePropertyDecorator.Component
   ], ZdImage);
-  var script$M = ZdImage;
+  var script$L = ZdImage;
 
   /* script */
-  const __vue_script__$Q = script$M;
+  const __vue_script__$Q = script$L;
 
   /* template */
   var __vue_render__$Q = function () {
@@ -48955,10 +49137,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   ZdIncrement = __decorate([
       vuePropertyDecorator.Component
   ], ZdIncrement);
-  var script$L = ZdIncrement;
+  var script$K = ZdIncrement;
 
   /* script */
-  const __vue_script__$P = script$L;
+  const __vue_script__$P = script$K;
 
   /* template */
   var __vue_render__$P = function () {
@@ -49175,10 +49357,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   ZdIterableComponentRender = __decorate([
       vuePropertyDecorator.Component
   ], ZdIterableComponentRender);
-  var script$K = ZdIterableComponentRender;
+  var script$J = ZdIterableComponentRender;
 
   /* script */
-  const __vue_script__$N = script$K;
+  const __vue_script__$N = script$J;
 
   /* template */
   var __vue_render__$N = function () {
@@ -49463,10 +49645,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   ZdIterableColumnsButton = __decorate([
       vuePropertyDecorator.Component
   ], ZdIterableColumnsButton);
-  var script$J = ZdIterableColumnsButton;
+  var script$I = ZdIterableColumnsButton;
 
   /* script */
-  const __vue_script__$M = script$J;
+  const __vue_script__$M = script$I;
 
   /* template */
   var __vue_render__$M = function () {
@@ -49706,10 +49888,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   ZdIterablePagination = __decorate([
       vuePropertyDecorator.Component
   ], ZdIterablePagination);
-  var script$I = ZdIterablePagination;
+  var script$H = ZdIterablePagination;
 
   /* script */
-  const __vue_script__$L = script$I;
+  const __vue_script__$L = script$H;
 
   /* template */
   var __vue_render__$L = function () {
@@ -49983,10 +50165,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   ZdSelect = __decorate([
       Component__default["default"]
   ], ZdSelect);
-  var script$H = ZdSelect;
+  var script$G = ZdSelect;
 
   /* script */
-  const __vue_script__$K = script$H;
+  const __vue_script__$K = script$G;
 
   /* template */
   var __vue_render__$K = function () {
@@ -50366,10 +50548,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   ZdIterablePageSize = __decorate([
       vuePropertyDecorator.Component
   ], ZdIterablePageSize);
-  var script$G = ZdIterablePageSize;
+  var script$F = ZdIterablePageSize;
 
   /* script */
-  const __vue_script__$J = script$G;
+  const __vue_script__$J = script$F;
 
   /* template */
   var __vue_render__$J = function () {
@@ -50432,10 +50614,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   ZdIterablePageInfo = __decorate([
       vuePropertyDecorator.Component
   ], ZdIterablePageInfo);
-  var script$F = ZdIterablePageInfo;
+  var script$E = ZdIterablePageInfo;
 
   /* script */
-  const __vue_script__$I = script$F;
+  const __vue_script__$I = script$E;
 
   /* template */
   var __vue_render__$I = function () {
@@ -50679,10 +50861,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   ZdListItem$1 = __decorate([
       vuePropertyDecorator.Component
   ], ZdListItem$1);
-  var script$E = ZdListItem$1;
+  var script$D = ZdListItem$1;
 
   /* script */
-  const __vue_script__$G = script$E;
+  const __vue_script__$G = script$D;
 
   /* template */
   var __vue_render__$G = function () {
@@ -50795,10 +50977,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   ZdListItem = __decorate([
       vuePropertyDecorator.Component({ components: { ZdListItemContent: __vue_component__$G } })
   ], ZdListItem);
-  var script$D = ZdListItem;
+  var script$C = ZdListItem;
 
   /* script */
-  const __vue_script__$F = script$D;
+  const __vue_script__$F = script$C;
 
   /* template */
   var __vue_render__$F = function () {
@@ -50967,10 +51149,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   ZdListGroup = __decorate([
       vuePropertyDecorator.Component
   ], ZdListGroup);
-  var script$C = ZdListGroup;
+  var script$B = ZdListGroup;
 
   /* script */
-  const __vue_script__$E = script$C;
+  const __vue_script__$E = script$B;
 
   /* template */
   var __vue_render__$E = function () {
@@ -51210,10 +51392,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       vuePropertyDecorator.Component,
       __metadata("design:paramtypes", [])
   ], ZdLoading);
-  var script$B = ZdLoading;
+  var script$A = ZdLoading;
 
   /* script */
-  const __vue_script__$D = script$B;
+  const __vue_script__$D = script$A;
 
   /* template */
   var __vue_render__$D = function () {
@@ -51365,10 +51547,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   ZdLogin = __decorate([
       vuePropertyDecorator.Component
   ], ZdLogin);
-  var script$A = ZdLogin;
+  var script$z = ZdLogin;
 
   /* script */
-  const __vue_script__$C = script$A;
+  const __vue_script__$C = script$z;
 
   /* template */
   var __vue_render__$C = function () {
@@ -51597,10 +51779,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   ZdLoginButton = __decorate([
       vuePropertyDecorator.Component
   ], ZdLoginButton);
-  var script$z = ZdLoginButton;
+  var script$y = ZdLoginButton;
 
   /* script */
-  const __vue_script__$B = script$z;
+  const __vue_script__$B = script$y;
 
   /* template */
   var __vue_render__$B = function () {
@@ -51664,10 +51846,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   ZdMasterDetail = __decorate([
       vuePropertyDecorator.Component
   ], ZdMasterDetail);
-  var script$y = ZdMasterDetail;
+  var script$x = ZdMasterDetail;
 
   /* script */
-  const __vue_script__$A = script$y;
+  const __vue_script__$A = script$x;
 
   /* template */
   var __vue_render__$A = function () {
@@ -51982,10 +52164,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   ZdMenu = __decorate([
       vuePropertyDecorator.Component
   ], ZdMenu);
-  var script$x = ZdMenu;
+  var script$w = ZdMenu;
 
   /* script */
-  const __vue_script__$z = script$x;
+  const __vue_script__$z = script$w;
 
   /* template */
   var __vue_render__$z = function () {
@@ -52247,10 +52429,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   ZdMenuLink = __decorate([
       vuePropertyDecorator.Component
   ], ZdMenuLink);
-  var script$w = ZdMenuLink;
+  var script$v = ZdMenuLink;
 
   /* script */
-  const __vue_script__$y = script$w;
+  const __vue_script__$y = script$v;
 
   /* template */
   var __vue_render__$y = function () {
@@ -52395,10 +52577,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   ZdMenuGroup = __decorate([
       vuePropertyDecorator.Component
   ], ZdMenuGroup);
-  var script$v = ZdMenuGroup;
+  var script$u = ZdMenuGroup;
 
   /* script */
-  const __vue_script__$x = script$v;
+  const __vue_script__$x = script$u;
 
   /* template */
   var __vue_render__$x = function () {
@@ -52561,10 +52743,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   ZdMenuButton = __decorate([
       vuePropertyDecorator.Component
   ], ZdMenuButton);
-  var script$u = ZdMenuButton;
+  var script$t = ZdMenuButton;
 
   /* script */
-  const __vue_script__$w = script$u;
+  const __vue_script__$w = script$t;
 
   /* template */
   var __vue_render__$w = function () {
@@ -52624,10 +52806,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   ZdMenuSeparator = __decorate([
       vuePropertyDecorator.Component
   ], ZdMenuSeparator);
-  var script$t = ZdMenuSeparator;
+  var script$s = ZdMenuSeparator;
 
   /* script */
-  const __vue_script__$v = script$t;
+  const __vue_script__$v = script$s;
 
   /* template */
   var __vue_render__$v = function () {
@@ -52726,8 +52908,12 @@ If you're seeing "$attrs is readonly", it's caused by this`);
           this.dragHandle.removeEventListener('mousedown', this.dragStart.bind(this, modal));
       }
       dragStart(modal, event) {
+          var _a;
           if (!modal)
               return;
+          if (event && event.target
+              && ((_a = event.target.parentElement) === null || _a === void 0 ? void 0 : _a.className.indexOf(`zd-modal-card-${this.instance.name}`)) === -1)
+              return;
           this.modalDragged = modal;
           this.x = event.clientX;
           this.y = event.clientY;
@@ -52781,10 +52967,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   ZdModal = __decorate([
       vuePropertyDecorator.Component
   ], ZdModal);
-  var script$s = ZdModal;
+  var script$r = ZdModal;
 
   /* script */
-  const __vue_script__$u = script$s;
+  const __vue_script__$u = script$r;
 
   /* template */
   var __vue_render__$u = function () {
@@ -52821,7 +53007,11 @@ If you're seeing "$attrs is readonly", it's caused by this`);
               {
                 ref: modal.name,
                 refInFor: true,
-                class: ["zd-modal-card", modal.cssClass],
+                class: [
+                  "zd-modal-card",
+                  "zd-modal-card-" + _vm.instance.name,
+                  modal.cssClass,
+                ],
                 style: modal.cssStyle,
                 on: {
                   "hook:mounted": function ($event) {
@@ -52892,7 +53082,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$u = function (inject) {
       if (!inject) return
-      inject("data-v-0c31e873_0", { source: ".zd-modal-title {\n  padding-bottom: 0px;\n}\n.zd-modal-container {\n  padding: 0;\n}\n.zd-modal-flex {\n  width: 100%;\n}\n.zd-modal-draggable {\n  position: relative;\n}\n.zd-modal-draggable-handle {\n  cursor: grab;\n  cursor: -moz-grab;\n  cursor: -webkit-grab;\n}\n.zd-modal-draggable-handle:active {\n  cursor: grabbing;\n  cursor: -moz-grabbing;\n  cursor: -webkit-grabbing;\n}\n.zd-modal-content > .zd-modal-card > .zd-modal-title {\n  padding: var(--zd-default-padding);\n  padding-bottom: 0px;\n  font-size: var(--zd-font-title-size);\n  font-weight: var(--zd-font-title-weight);\n  color: var(--zd-font-color);\n}\n.zd-modal-content > .zd-modal-card > .zd-modal-card-text {\n  padding: var(--zd-default-padding);\n}", map: undefined, media: undefined });
+      inject("data-v-4ef79094_0", { source: ".zd-modal-title {\n  padding-bottom: 0px;\n}\n.zd-modal-container {\n  padding: 0;\n  cursor: default;\n}\n.zd-modal-flex {\n  width: 100%;\n}\n.zd-modal-draggable {\n  position: relative;\n}\n.zd-modal-draggable-handle {\n  cursor: grab;\n  cursor: -moz-grab;\n  cursor: -webkit-grab;\n}\n.zd-modal-draggable-handle:active {\n  cursor: grabbing;\n  cursor: -moz-grabbing;\n  cursor: -webkit-grabbing;\n}\n.zd-modal-content > .zd-modal-card > .zd-modal-title {\n  padding: var(--zd-default-padding);\n  padding-bottom: 0px;\n  font-size: var(--zd-font-title-size);\n  font-weight: var(--zd-font-title-weight);\n  color: var(--zd-font-color);\n}\n.zd-modal-content > .zd-modal-card > .zd-modal-card-text {\n  padding: var(--zd-default-padding);\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -52948,10 +53138,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   ZdModalCloseButton = __decorate([
       vuePropertyDecorator.Component
   ], ZdModalCloseButton);
-  var script$r = ZdModalCloseButton;
+  var script$q = ZdModalCloseButton;
 
   /* script */
-  const __vue_script__$t = script$r;
+  const __vue_script__$t = script$q;
 
   /* template */
   var __vue_render__$t = function () {
@@ -53023,10 +53213,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   ZdMonth = __decorate([
       vuePropertyDecorator.Component
   ], ZdMonth);
-  var script$q = ZdMonth;
+  var script$p = ZdMonth;
 
   /* script */
-  const __vue_script__$s = script$q;
+  const __vue_script__$s = script$p;
 
   /* template */
   var __vue_render__$s = function () {
@@ -53085,10 +53275,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   ZdPassword = __decorate([
       vuePropertyDecorator.Component
   ], ZdPassword);
-  var script$p = ZdPassword;
+  var script$o = ZdPassword;
 
   /* script */
-  const __vue_script__$r = script$p;
+  const __vue_script__$r = script$o;
 
   /* template */
   var __vue_render__$r = function () {
@@ -53175,10 +53365,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   ZdProgress = __decorate([
       vuePropertyDecorator.Component
   ], ZdProgress);
-  var script$o = ZdProgress;
+  var script$n = ZdProgress;
 
   /* script */
-  const __vue_script__$q = script$o;
+  const __vue_script__$q = script$n;
 
   /* template */
   var __vue_render__$q = function () {
@@ -53317,10 +53507,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   ZdRadio = __decorate([
       vuePropertyDecorator.Component
   ], ZdRadio);
-  var script$n = ZdRadio;
+  var script$m = ZdRadio;
 
   /* script */
-  const __vue_script__$p = script$n;
+  const __vue_script__$p = script$m;
 
   /* template */
   var __vue_render__$p = function () {
@@ -53567,10 +53757,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   ZdRangeSlider = __decorate([
       vuePropertyDecorator.Component
   ], ZdRangeSlider);
-  var script$m = ZdRangeSlider;
+  var script$l = ZdRangeSlider;
 
   /* script */
-  const __vue_script__$o = script$m;
+  const __vue_script__$o = script$l;
 
   /* template */
   var __vue_render__$o = function () {
@@ -53783,10 +53973,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   ZdRow = __decorate([
       vuePropertyDecorator.Component
   ], ZdRow);
-  var script$l = ZdRow;
+  var script$k = ZdRow;
 
   /* script */
-  const __vue_script__$n = script$l;
+  const __vue_script__$n = script$k;
 
   /* template */
   var __vue_render__$n = function () {
@@ -53908,10 +54098,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   ZdSearch = __decorate([
       vuePropertyDecorator.Component
   ], ZdSearch);
-  var script$k = ZdSearch;
+  var script$j = ZdSearch;
 
   /* script */
-  const __vue_script__$m = script$k;
+  const __vue_script__$m = script$j;
 
   /* template */
   var __vue_render__$m = function () {
@@ -54000,10 +54190,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   ZdSelectableList = __decorate([
       vuePropertyDecorator.Component
   ], ZdSelectableList);
-  var script$j = ZdSelectableList;
+  var script$i = ZdSelectableList;
 
   /* script */
-  const __vue_script__$l = script$j;
+  const __vue_script__$l = script$i;
 
   /* template */
   var __vue_render__$l = function () {
@@ -54390,10 +54580,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   ZdSelectMultiple = __decorate([
       Component__default["default"]
   ], ZdSelectMultiple);
-  var script$i = ZdSelectMultiple;
+  var script$h = ZdSelectMultiple;
 
   /* script */
-  const __vue_script__$k = script$i;
+  const __vue_script__$k = script$h;
 
   /* template */
   var __vue_render__$k = function () {
@@ -55296,10 +55486,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   ZdSelectTreeMultiple = __decorate([
       vuePropertyDecorator.Component
   ], ZdSelectTreeMultiple);
-  var script$h = ZdSelectTreeMultiple;
+  var script$g = ZdSelectTreeMultiple;
 
   /* script */
-  const __vue_script__$i = script$h;
+  const __vue_script__$i = script$g;
 
   /* template */
   var __vue_render__$i = function () {
@@ -55676,10 +55866,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   ZdSpeedDial = __decorate([
       vuePropertyDecorator.Component
   ], ZdSpeedDial);
-  var script$g = ZdSpeedDial;
+  var script$f = ZdSpeedDial;
 
   /* script */
-  const __vue_script__$h = script$g;
+  const __vue_script__$h = script$f;
 
   /* template */
   var __vue_render__$h = function () {
@@ -55844,10 +56034,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   ZdSteppers = __decorate([
       vuePropertyDecorator.Component
   ], ZdSteppers);
-  var script$f = ZdSteppers;
+  var script$e = ZdSteppers;
 
   /* script */
-  const __vue_script__$g = script$f;
+  const __vue_script__$g = script$e;
 
   /* template */
   var __vue_render__$g = function () {
@@ -56096,10 +56286,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   ZdSvgMap = __decorate([
       vuePropertyDecorator.Component
   ], ZdSvgMap);
-  var script$e = ZdSvgMap;
+  var script$d = ZdSvgMap;
 
   /* script */
-  const __vue_script__$f = script$e;
+  const __vue_script__$f = script$d;
 
   /* template */
   var __vue_render__$f = function () {
@@ -56204,10 +56394,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   ZdSwitch = __decorate([
       vuePropertyDecorator.Component
   ], ZdSwitch);
-  var script$d = ZdSwitch;
+  var script$c = ZdSwitch;
 
   /* script */
-  const __vue_script__$e = script$d;
+  const __vue_script__$e = script$c;
 
   /* template */
   var __vue_render__$e = function () {
@@ -56355,10 +56545,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   ZdTable = __decorate([
       vuePropertyDecorator.Component
   ], ZdTable);
-  var script$c = ZdTable;
+  var script$b = ZdTable;
 
   /* script */
-  const __vue_script__$d = script$c;
+  const __vue_script__$d = script$b;
 
   /* template */
   var __vue_render__$d = function () {
@@ -56537,10 +56727,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   ZdTabs = __decorate([
       vuePropertyDecorator.Component
   ], ZdTabs);
-  var script$b = ZdTabs;
+  var script$a = ZdTabs;
 
   /* script */
-  const __vue_script__$c = script$b;
+  const __vue_script__$c = script$a;
 
   /* template */
   var __vue_render__$c = function () {
@@ -56751,10 +56941,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   ZdTab = __decorate([
       vuePropertyDecorator.Component
   ], ZdTab);
-  var script$a = ZdTab;
+  var script$9 = ZdTab;
 
   /* script */
-  const __vue_script__$b = script$a;
+  const __vue_script__$b = script$9;
 
   /* template */
   var __vue_render__$b = function () {
@@ -56852,10 +57042,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   ZdTabItem = __decorate([
       vuePropertyDecorator.Component
   ], ZdTabItem);
-  var script$9 = ZdTabItem;
+  var script$8 = ZdTabItem;
 
   /* script */
-  const __vue_script__$a = script$9;
+  const __vue_script__$a = script$8;
 
   /* template */
   var __vue_render__$a = function () {
@@ -56967,10 +57157,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   ZdTag = __decorate([
       vuePropertyDecorator.Component
   ], ZdTag);
-  var script$8 = ZdTag;
+  var script$7 = ZdTag;
 
   /* script */
-  const __vue_script__$9 = script$8;
+  const __vue_script__$9 = script$7;
 
   /* template */
   var __vue_render__$9 = function () {
@@ -57093,10 +57283,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
           components: { ZdRender: vue.ZdRender },
       })
   ], ZdText);
-  var script$7 = ZdText;
+  var script$6 = ZdText;
 
   /* script */
-  const __vue_script__$8 = script$7;
+  const __vue_script__$8 = script$6;
 
   /* template */
   var __vue_render__$8 = function () {
@@ -57285,10 +57475,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   ZdTextarea = __decorate([
       vuePropertyDecorator.Component
   ], ZdTextarea);
-  var script$6 = ZdTextarea;
+  var script$5 = ZdTextarea;
 
   /* script */
-  const __vue_script__$7 = script$6;
+  const __vue_script__$7 = script$5;
 
   /* template */
   var __vue_render__$7 = function () {
@@ -57637,10 +57827,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   ZdTime = __decorate([
       vuePropertyDecorator.Component
   ], ZdTime);
-  var script$5 = ZdTime;
+  var script$4 = ZdTime;
 
   /* script */
-  const __vue_script__$6 = script$5;
+  const __vue_script__$6 = script$4;
 
   /* template */
   var __vue_render__$6 = function () {
@@ -57885,10 +58075,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   ZdTooltip = __decorate([
       vuePropertyDecorator.Component
   ], ZdTooltip);
-  var script$4 = ZdTooltip;
+  var ZdTooltip$1 = ZdTooltip;
 
   /* script */
-  const __vue_script__$5 = script$4;
+  const __vue_script__$5 = ZdTooltip$1;
 
   /* template */
   var __vue_render__$5 = function () {
@@ -58742,10 +58932,29 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       }
       mounted() {
           this.instance.viewUpdateScrollData = this.calcScrollData;
+          this.originalChangeLayout = this.instance.changeLayout;
+          this.instance.changeLayout = this.onChangeLayout;
+          this.orderColumnVisibility();
       }
-      toggleExpand(row, rowIndex) {
+      toggleExpand(row, rowIndex, event) {
+          event === null || event === void 0 ? void 0 : event.stopPropagation();
           return this.instance.toggleExpand(row, rowIndex);
       }
+      orderColumnVisibility() {
+          const columnsInvisibles = this.instance.columns.filter((column) => column.isVisible === false);
+          if (!columnsInvisibles) {
+              return;
+          }
+          const columnsVisibles = this.instance.columns.filter((column) => column.isVisible === true);
+          const newOrderColumns = [];
+          if (columnsVisibles) {
+              newOrderColumns.push(...columnsVisibles);
+          }
+          if (columnsInvisibles) {
+              newOrderColumns.push(...columnsInvisibles);
+          }
+          this.instance.columns = newOrderColumns;
+      }
       checkSome(row) {
           if (this.instance.flat)
               return false;
@@ -58776,16 +58985,26 @@ If you're seeing "$attrs is readonly", it's caused by this`);
           this.selectRowClick(row, isSelected, event);
       }
       getVisibleData() {
-          const data = this.instance.treeDataStructure.searchHasNoData ? [] : this.instance.treeDataStructure.treeData;
+          const data = this.instance.treeDataStructure.searchHasNoData
+              ? []
+              : this.instance.treeDataStructure.treeData;
           this.scrollData.visibleData = data.filter((row) => this.instance.treeDataStructure.isOpened(row));
           return this.scrollData.visibleData;
       }
       getData() {
           if (!this.instance.virtualScroll || !this.scrollData.initialized) {
-              return this.instance.treeDataStructure.searchHasNoData ? [] : this.instance.treeDataStructure.treeData;
+              return this.instance.treeDataStructure.searchHasNoData
+                  ? []
+                  : this.instance.treeDataStructure.treeData;
           }
           return this.renderedData;
       }
+      onChangeLayout(event, element) {
+          if (this.originalChangeLayout) {
+              this.originalChangeLayout.call(this.instance, event, element);
+          }
+          this.orderColumnVisibility();
+      }
   };
   __decorate([
       PropWatch({ type: String, default: '' }),
@@ -58807,6 +59026,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       PropWatch({ type: [String, Boolean], default: false }),
       __metadata("design:type", Boolean)
   ], ZdTreeGrid.prototype, "detach", void 0);
+  __decorate([
+      PropWatch({ type: String, default: '' }),
+      __metadata("design:type", String)
+  ], ZdTreeGrid.prototype, "fieldHasChild", void 0);
   __decorate([
       vuePropertyDecorator.Prop({
           type: Array,
@@ -58966,12 +59189,29 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                                     "th",
                                     {
                                       key: column.name,
+                                      ref: "column-" + column.name,
+                                      refInFor: true,
                                       class: [
                                         "zd-table-cell",
                                         {
                                           sortable: column.sortable,
                                           sortHandle: _vm.instance.dragColumns,
                                         },
+                                        {
+                                          "zd-table-fixed-column-action":
+                                            column.actionFixed,
+                                        },
+                                        {
+                                          "theme--dark":
+                                            (_vm.$vuetify.theme.dark &&
+                                              !_vm.instance.light) ||
+                                            _vm.instance.dark,
+                                        },
+                                        {
+                                          "theme--light":
+                                            !_vm.$vuetify.theme.dark ||
+                                            _vm.instance.light,
+                                        },
                                         "text-" + column.align,
                                         _vm.instance.datasource.getOrderByColumn(
                                           column.name
@@ -58985,15 +59225,18 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                                       style: {
                                         "background-color":
                                           _vm.instance.headerBackground,
-                                        width:
-                                          _vm.calcWidth(
-                                            column,
-                                            column.width ||
-                                              column.maxWidth ||
-                                              column.minWidth
-                                          ) || "unset",
+                                        width: _vm.calcWidth(
+                                          column,
+                                          column.width ||
+                                            column.maxWidth ||
+                                            column.minWidth,
+                                          true
+                                        ),
+                                      },
+                                      attrs: {
+                                        "column-name": column.name,
+                                        index: index,
                                       },
-                                      attrs: { index: index },
                                     },
                                     [
                                       _c(
@@ -59001,14 +59244,13 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                                         {
                                           staticClass: "zd-table-header-cell",
                                           style: {
-                                            width:
-                                              _vm.calcWidth(
-                                                column,
-                                                column.width ||
-                                                  column.maxWidth ||
-                                                  column.minWidth,
-                                                true
-                                              ) || "unset",
+                                            width: _vm.calcWidth(
+                                              column,
+                                              column.width ||
+                                                column.maxWidth ||
+                                                column.minWidth,
+                                              true
+                                            ),
                                             color:
                                               _vm.instance.headerCellTextColor,
                                           },
@@ -59431,6 +59673,8 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                                                 headerIndex: headerIndex,
                                                 selectable:
                                                   _vm.instance.selectable,
+                                                fieldHasChild:
+                                                  _vm.instance.fieldHasChild,
                                                 toggleExpand: _vm.toggleExpand,
                                                 rowIndex: index,
                                                 search:
@@ -59468,6 +59712,28 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                                                     (headerIndex === 1 &&
                                                       _vm.instance.selectable),
                                                 },
+                                                {
+                                                  "zd-table-fixed-column-action":
+                                                    column.actionFixed,
+                                                },
+                                                {
+                                                  "theme--dark":
+                                                    (_vm.$vuetify.theme.dark &&
+                                                      !_vm.instance.light) ||
+                                                    _vm.instance.dark,
+                                                },
+                                                {
+                                                  "theme--light":
+                                                    !_vm.$vuetify.theme.dark ||
+                                                    _vm.instance.light,
+                                                },
+                                              ],
+                                              cellStyle: [
+                                                {
+                                                  right: column.actionFixed
+                                                    ? _vm.fixedRight[column.name]
+                                                    : "unset",
+                                                },
                                               ],
                                             },
                                             on: {
@@ -59515,7 +59781,8 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                                                           ) {
                                                             return _vm.instance.toggleExpand(
                                                               item,
-                                                              index
+                                                              index,
+                                                              _vm.event
                                                             )
                                                           },
                                                         },
@@ -59652,8 +59919,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-13c4699c_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 .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-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: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-13c4699c_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-8b38a9f2_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-8b38a9f2_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 */
@@ -59840,11 +60107,19 @@ If you're seeing "$attrs is readonly", it's caused by this`);
           return (row[column.name] === trueDefined && !!trueIcon) || !!falseIcon;
       }
       getWidthStyle(column) {
-          return {
-              width: this.calcWidth(column, column.maxWidth || column.minWidth) || 'unset',
-              'min-width': this.calcWidth(column, column.minWidth) || 'unset',
-              'max-width': this.calcWidth(column, column.maxWidth) || 'unset',
+          let widthData = {
+              'min-width': '100%',
           };
+          if (column.width) {
+              widthData = Object.assign({ width: this.calcWidth(column, column.width) }, widthData);
+          }
+          if (column.minWidth) {
+              widthData = Object.assign({ 'min-width': this.calcWidth(column, column.minWidth) }, widthData);
+          }
+          if (column.maxWidth) {
+              widthData = Object.assign({ 'max-width': this.calcWidth(column, column.maxWidth) }, widthData);
+          }
+          return widthData;
       }
   };
   __decorate([
@@ -59855,6 +60130,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       PropWatch({ type: [String, Function] }),
       __metadata("design:type", Object)
   ], ZdTreeGridEditable.prototype, "canEditRow", void 0);
+  __decorate([
+      PropWatch({ type: Boolean, default: false }),
+      __metadata("design:type", Boolean)
+  ], ZdTreeGridEditable.prototype, "hasUsingCellText", void 0);
   ZdTreeGridEditable = __decorate([
       Component__default["default"]
   ], ZdTreeGridEditable);
@@ -60022,13 +60301,13 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                                       style: {
                                         "background-color":
                                           _vm.instance.headerBackground,
-                                        width:
-                                          _vm.calcWidth(
-                                            column,
-                                            column.width ||
-                                              column.maxWidth ||
-                                              column.minWidth
-                                          ) || "unset",
+                                        width: _vm.calcWidth(
+                                          column,
+                                          column.width ||
+                                            column.maxWidth ||
+                                            column.minWidth,
+                                          true
+                                        ),
                                       },
                                       attrs: { index: index },
                                     },
@@ -60038,14 +60317,13 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                                         {
                                           staticClass: "zd-table-header-cell",
                                           style: {
-                                            width:
-                                              _vm.calcWidth(
-                                                column,
-                                                column.width ||
-                                                  column.maxWidth ||
-                                                  column.minWidth,
-                                                true
-                                              ) || "unset",
+                                            width: _vm.calcWidth(
+                                              column,
+                                              column.width ||
+                                                column.maxWidth ||
+                                                column.minWidth,
+                                              true
+                                            ),
                                             color:
                                               _vm.instance.headerCellTextColor,
                                           },
@@ -60568,9 +60846,13 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                                                           selectable:
                                                             _vm.instance
                                                               .selectable,
+                                                          fieldHasChild:
+                                                            _vm.instance
+                                                              .fieldHasChild,
                                                           toggleExpand:
                                                             _vm.toggleExpand,
                                                           rowIndex: index,
+                                                          hasUsingCellText: false,
                                                           search:
                                                             _vm.instance
                                                               .datasource.search,
@@ -60617,6 +60899,28 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                                                     (headerIndex === 1 &&
                                                       _vm.instance.selectable),
                                                 },
+                                                {
+                                                  "zd-table-fixed-column-action":
+                                                    column.actionFixed,
+                                                },
+                                                {
+                                                  "theme--dark":
+                                                    (_vm.$vuetify.theme.dark &&
+                                                      !_vm.instance.light) ||
+                                                    _vm.instance.dark,
+                                                },
+                                                {
+                                                  "theme--light":
+                                                    !_vm.$vuetify.theme.dark ||
+                                                    _vm.instance.light,
+                                                },
+                                              ],
+                                              cellStyle: [
+                                                {
+                                                  right: column.actionFixed
+                                                    ? _vm.fixedRight[column.name]
+                                                    : "unset",
+                                                },
                                               ],
                                             },
                                             on: {
@@ -60801,8 +61105,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-88c6a274_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 .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-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: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-88c6a274_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: 20px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level2 {\n  width: 40px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level3 {\n  width: 60px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level4 {\n  width: 80px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level5 {\n  width: 100px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level6 {\n  width: 120px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level7 {\n  width: 140px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level8 {\n  width: 160px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level9 {\n  width: 180px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level10 {\n  width: 200px;\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-0447beb6_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-0447beb6_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 */
@@ -61008,6 +61312,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       return observer;
   };
 
+  const isActivatableInstance = (vm) => {
+      const components = [ZdDropdown$1, ZdTooltip$1, ZdVMenu$1, ZdVTooltip$1];
+      return components.some((component) => (vm instanceof component));
+  };
   /**
    * This function was copied from https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/mixins/activatable/index.ts
    * the only change was to consider ZdDropdown and ZdTooltip as activatable components
@@ -61038,7 +61346,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
           // don't have a click event to use as a last resort
           const vm = comp.activatorNode[0].componentInstance;
           const isActivatable = vm && ((vm.$options.mixins
-              && vm.$options.mixins.some((m) => m.options && ['activatable', 'menuable'].includes(m.options.name))) || ['ZdDropdown', 'ZdTooltip', 'ZdVMenu', 'ZdVTooltip'].includes(vm.$options.name));
+              && vm.$options.mixins.some((m) => m.options && ['activatable', 'menuable'].includes(m.options.name))) || isActivatableInstance(vm));
           if (isActivatable) {
               // Activator is actually another activatible component, use its activator (#8846)
               activator = vm.getActivator();
@@ -61293,96 +61601,96 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   exports.PropWatch = PropWatch;
   exports.ThemeColor = ThemeColor;
   exports.Vuetify = Vuetify;
-  exports.ZdAlert = script$1l;
-  exports.ZdApexChart = script$1k;
-  exports.ZdBadge = script$1j;
-  exports.ZdBreadcrumbs = script$1i;
+  exports.ZdAlert = script$1j;
+  exports.ZdApexChart = script$1i;
+  exports.ZdBadge = script$1h;
+  exports.ZdBreadcrumbs = script$1g;
   exports.ZdButton = ZdButton$1;
-  exports.ZdButtonGroup = script$1h;
-  exports.ZdCard = script$1g;
-  exports.ZdCarousel = script$1f;
-  exports.ZdCheckbox = script$1e;
-  exports.ZdCheckboxMultiple = script$1d;
-  exports.ZdChip = script$1c;
-  exports.ZdCodeEditor = script$1b;
-  exports.ZdCol = script$1a;
-  exports.ZdCollapseCard = script$19;
+  exports.ZdButtonGroup = script$1f;
+  exports.ZdCard = script$1e;
+  exports.ZdCarousel = script$1d;
+  exports.ZdCheckbox = script$1c;
+  exports.ZdCheckboxMultiple = script$1b;
+  exports.ZdChip = script$1a;
+  exports.ZdCodeEditor = script$19;
+  exports.ZdCol = script$18;
+  exports.ZdCollapseCard = script$17;
   exports.ZdComponent = ZdComponent$1;
   exports.ZdComponentRender = ZdComponentRender$1;
-  exports.ZdContainer = script$18;
-  exports.ZdCurrency = script$17;
-  exports.ZdDashboard = script$16;
-  exports.ZdDate = script$15;
-  exports.ZdDateRange = script$14;
-  exports.ZdDialog = script$13;
-  exports.ZdDivider = script$12;
-  exports.ZdDropdown = script$11;
-  exports.ZdFileInput = script$10;
-  exports.ZdFooter = script$$;
-  exports.ZdForm = script$_;
-  exports.ZdFrame = script$Z;
-  exports.ZdFramePage = script$Y;
+  exports.ZdContainer = script$16;
+  exports.ZdCurrency = script$15;
+  exports.ZdDashboard = script$14;
+  exports.ZdDate = script$13;
+  exports.ZdDateRange = script$12;
+  exports.ZdDialog = script$11;
+  exports.ZdDivider = script$10;
+  exports.ZdDropdown = ZdDropdown$1;
+  exports.ZdFileInput = script$$;
+  exports.ZdFooter = script$_;
+  exports.ZdForm = script$Z;
+  exports.ZdFrame = script$Y;
+  exports.ZdFramePage = script$X;
   exports.ZdGrid = ZdGrid$1;
-  exports.ZdGridAction = script$S;
-  exports.ZdGridCell = script$R;
-  exports.ZdGridCellContent = script$Q;
-  exports.ZdGridCellEdit = script$P;
-  exports.ZdGridEditable = script$X;
-  exports.ZdGridFooter = script$V;
-  exports.ZdGridTop = script$T;
-  exports.ZdHeader = script$W;
-  exports.ZdImage = script$M;
-  exports.ZdIncrement = script$L;
+  exports.ZdGridAction = script$R;
+  exports.ZdGridCell = script$Q;
+  exports.ZdGridCellContent = script$P;
+  exports.ZdGridCellEdit = script$O;
+  exports.ZdGridEditable = script$W;
+  exports.ZdGridFooter = script$U;
+  exports.ZdGridTop = script$S;
+  exports.ZdHeader = script$V;
+  exports.ZdImage = script$L;
+  exports.ZdIncrement = script$K;
   exports.ZdInput = ZdInput$1;
   exports.ZdIterable = ZdIterable$1;
-  exports.ZdIterableColumnsButton = script$J;
-  exports.ZdIterableComponentRender = script$K;
-  exports.ZdIterableNoData = script$U;
-  exports.ZdIterablePageInfo = script$F;
-  exports.ZdIterablePageSize = script$G;
-  exports.ZdIterablePagination = script$I;
+  exports.ZdIterableColumnsButton = script$I;
+  exports.ZdIterableComponentRender = script$J;
+  exports.ZdIterableNoData = script$T;
+  exports.ZdIterablePageInfo = script$E;
+  exports.ZdIterablePageSize = script$F;
+  exports.ZdIterablePagination = script$H;
   exports.ZdList = ZdList$1;
-  exports.ZdListGroup = script$C;
-  exports.ZdListItem = script$D;
+  exports.ZdListGroup = script$B;
+  exports.ZdListItem = script$C;
   exports.ZdLoading = __vue_component__$D;
-  exports.ZdLogin = script$A;
-  exports.ZdLoginButton = script$z;
-  exports.ZdMasterDetail = script$y;
-  exports.ZdMenu = script$x;
-  exports.ZdMenuButton = script$u;
-  exports.ZdMenuGroup = script$v;
-  exports.ZdMenuLink = script$w;
-  exports.ZdMenuSeparator = script$t;
-  exports.ZdModal = script$s;
-  exports.ZdModalCloseButton = script$r;
-  exports.ZdMonth = script$q;
+  exports.ZdLogin = script$z;
+  exports.ZdLoginButton = script$y;
+  exports.ZdMasterDetail = script$x;
+  exports.ZdMenu = script$w;
+  exports.ZdMenuButton = script$t;
+  exports.ZdMenuGroup = script$u;
+  exports.ZdMenuLink = script$v;
+  exports.ZdMenuSeparator = script$s;
+  exports.ZdModal = script$r;
+  exports.ZdModalCloseButton = script$q;
+  exports.ZdMonth = script$p;
   exports.ZdNumber = ZdNumber$1;
-  exports.ZdPassword = script$p;
-  exports.ZdProgress = script$o;
-  exports.ZdRadio = script$n;
-  exports.ZdRangeSlider = script$m;
-  exports.ZdRow = script$l;
-  exports.ZdSearch = script$k;
-  exports.ZdSelect = script$H;
+  exports.ZdPassword = script$o;
+  exports.ZdProgress = script$n;
+  exports.ZdRadio = script$m;
+  exports.ZdRangeSlider = script$l;
+  exports.ZdRow = script$k;
+  exports.ZdSearch = script$j;
+  exports.ZdSelect = script$G;
   exports.ZdSelectTree = ZdSelectTree$1;
-  exports.ZdSelectTreeMultiple = script$h;
-  exports.ZdSelectableList = script$j;
-  exports.ZdSpeedDial = script$g;
-  exports.ZdSteppers = script$f;
-  exports.ZdSvgMap = script$e;
-  exports.ZdSwitch = script$d;
-  exports.ZdTable = script$c;
-  exports.ZdTabs = script$b;
-  exports.ZdTag = script$8;
-  exports.ZdText = script$7;
+  exports.ZdSelectTreeMultiple = script$g;
+  exports.ZdSelectableList = script$i;
+  exports.ZdSpeedDial = script$f;
+  exports.ZdSteppers = script$e;
+  exports.ZdSvgMap = script$d;
+  exports.ZdSwitch = script$c;
+  exports.ZdTable = script$b;
+  exports.ZdTabs = script$a;
+  exports.ZdTag = script$7;
+  exports.ZdText = script$6;
   exports.ZdTextInput = ZdTextInput$1;
-  exports.ZdTextarea = script$6;
-  exports.ZdTime = script$5;
+  exports.ZdTextarea = script$5;
+  exports.ZdTime = script$4;
   exports.ZdToggleable = ZdToggleable$1;
-  exports.ZdTooltip = script$4;
+  exports.ZdTooltip = ZdTooltip$1;
   exports.ZdTree = script$1;
   exports.ZdTreeGrid = ZdTreeGrid$1;
-  exports.ZdTreeGridCellContent = script$O;
+  exports.ZdTreeGridCellContent = script$N;
   exports.ZdTreeGridEditable = script;
   exports.components = components;
   exports["default"] = Zeedhi;