@zeedhi/teknisa-components-vuetify 1.70.0 → 1.72.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1769,6 +1769,8 @@ var __vue_render__$b = function () {
1769
1769
  !column.fixed &&
1770
1770
  _vm.instance.dragColumns,
1771
1771
  "zd-table-fixed-column": column.fixed,
1772
+ "zd-table-fixed-column-action":
1773
+ column.actionFixed,
1772
1774
  },
1773
1775
  {
1774
1776
  "theme--dark":
@@ -1791,23 +1793,17 @@ var __vue_render__$b = function () {
1791
1793
  ? "active"
1792
1794
  : "",
1793
1795
  ],
1794
- style: [
1795
- {
1796
- "background-color":
1797
- _vm.instance.headerBackground,
1798
- },
1799
- column.width ||
1800
- column.maxWidth ||
1801
- column.minWidth
1802
- ? "width: " +
1803
- _vm.calcWidth(
1804
- column,
1805
- column.width ||
1806
- column.maxWidth ||
1807
- column.minWidth
1808
- )
1809
- : "width: unset",
1810
- ],
1796
+ style: {
1797
+ "background-color":
1798
+ _vm.instance.headerBackground,
1799
+ width: _vm.calcWidth(
1800
+ column,
1801
+ column.width ||
1802
+ column.maxWidth ||
1803
+ column.minWidth,
1804
+ true
1805
+ ),
1806
+ },
1811
1807
  attrs: {
1812
1808
  "column-name": column.name,
1813
1809
  index: index,
@@ -2510,7 +2506,13 @@ var __vue_render__$b = function () {
2510
2506
  _c(
2511
2507
  "span",
2512
2508
  {
2513
- staticClass: "zd-table-group-container",
2509
+ class: [
2510
+ {
2511
+ "zd-table-group-two-plus-container":
2512
+ item.groupHeaders.length,
2513
+ },
2514
+ "zd-table-group-container",
2515
+ ],
2514
2516
  style:
2515
2517
  "left: " +
2516
2518
  (_vm.instance.selectable ? 48 : 8) +
@@ -2685,6 +2687,12 @@ var __vue_render__$b = function () {
2685
2687
  cellsApplied: cellsApplied,
2686
2688
  cellClass: [
2687
2689
  {
2690
+ "zd-table-two-plus-groups":
2691
+ (_vm.instance
2692
+ .groupColumnNames
2693
+ .length >
2694
+ 1) &
2695
+ (index === 0),
2688
2696
  "zd-table-column-editable":
2689
2697
  column.editable,
2690
2698
  "zd-table-cell-editable":
@@ -2910,6 +2918,8 @@ var __vue_render__$b = function () {
2910
2918
  {
2911
2919
  "zd-table-fixed-column":
2912
2920
  column.fixed,
2921
+ "zd-table-fixed-column-action":
2922
+ column.actionFixed,
2913
2923
  },
2914
2924
  {
2915
2925
  "theme--dark":
@@ -3080,7 +3090,7 @@ __vue_render__$b._withStripped = true;
3080
3090
  /* style */
3081
3091
  const __vue_inject_styles__$b = function (inject) {
3082
3092
  if (!inject) return
3083
- inject("data-v-842b3508_0", { source: ".tek-grid .zd-table-cell-text-first {\n display: inline-flex;\n width: 100%;\n}\n.tek-grid .zd-grid-toolbar {\n height: 36px;\n}\n.tek-grid .zd-grid-toolbar .zd-grid-toolbar-slot {\n align-items: center;\n}\n.tek-grid .zd-grid-toolbar .toolbar-divider {\n margin: 10px;\n}\n.tek-grid .zd-grid-toolbar .toolbar-title {\n line-height: 22px;\n color: var(--v-primary-base);\n}\n.tek-grid table thead tr th.zd-table-cell.zd-table-fixed-column {\n position: sticky !important;\n left: 0;\n z-index: 5;\n}\n.tek-grid table thead tr th.zd-table-cell.zd-table-fixed-column.theme--light {\n background: #f7f7f7 !important;\n}\n.tek-grid table thead tr th.zd-table-cell.zd-table-fixed-column.theme--dark {\n background: #3c3c3c !important;\n}\n.tek-grid table thead tr th .tek-grid-column-filter-button {\n display: inline-block;\n}\n.tek-grid table thead tr th .tek-grid-column-filter-button .v-icon {\n cursor: pointer;\n font-size: 15px;\n width: 15px;\n padding: 0 3px;\n opacity: 0;\n color: #ccc;\n}\n.tek-grid table thead tr th .tek-grid-column-filter-button.has-filter-data .v-icon {\n opacity: 1;\n color: var(--v-primary-base);\n}\n.tek-grid table thead tr th:hover .tek-grid-column-filter-button .v-icon {\n opacity: 1;\n}\n.tek-grid table tbody tr.footer.theme--light {\n background: #f6f6f6;\n}\n.tek-grid table tbody tr.footer.theme--dark {\n background: #3b3b3b;\n}\n.tek-grid table tbody tr.footer td.zd-table-cell {\n font-weight: 700;\n}\n.tek-grid table tbody tr.summary {\n background: #eee;\n}\n.tek-grid table tbody tr.summary td.zd-table-cell {\n font-weight: 700;\n font-size: 15px;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header {\n font-weight: bold;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header .v-icon {\n font-size: 21px;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header .v-icon.closed {\n transform: rotate(-90deg);\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header .zd-table-group-container {\n position: sticky !important;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header .zd-table-group-container .zd-table-group-text {\n vertical-align: middle;\n}\n.tek-grid table tbody tr td.zd-table-cell .zd-table-cell-aling-total {\n display: flex !important;\n position: relative;\n justify-content: start;\n align-items: center;\n left: 1.5rem;\n top: -50%;\n}\n.tek-grid table tbody tr td.zd-table-cell .zd-table-cell-aling-total:first-of-type {\n display: inline-block !important;\n top: 0;\n left: 0;\n}\n.tek-grid table tbody tr td.zd-table-cell .zd-table-cell-text {\n display: inline-block;\n vertical-align: middle;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-fixed-column {\n position: sticky !important;\n left: 0;\n z-index: 3;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-fixed-column.theme--light {\n background: #f7f7f7 !important;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-fixed-column.theme--dark {\n background: #3c3c3c !important;\n}\n.tek-grid table tbody tr.current td.zd-table-cell.zd-table-fixed-column {\n color: var(--v-primary-base) !important;\n}\n.tek-grid table .tek-grid-header-group-identation {\n width: 22px;\n display: inline-block;\n vertical-align: middle;\n}\n.tek-grid table .tek-grid-header-group-identation.first-group {\n width: 20px;\n}\n.tek-grid table .tek-grid-body-group-identation {\n width: 8px;\n display: flex;\n position: relative;\n top: 10px;\n margin-left: 14px;\n height: 100%;\n border-left: solid 1px #ccc;\n}\n.tek-grid table .tek-grid-body-group-identation.first-group {\n width: 1rem;\n margin-left: 10px;\n}\n.tek-grid table .tek-grid-body-group-identation.group-footer {\n height: 60%;\n border-bottom: solid 1px #ccc;\n top: -25%;\n}\n.tek-grid table .tek-grid-body-group-identation.group-footer-no-line {\n border-left: none;\n}\n.tek-grid .zd-skeleton-table-cell .v-skeleton-loader__table-cell {\n height: auto;\n}\n.tekgrid-actions-dropdown > * {\n display: block;\n}\n.tek-grid-column-filter-menu {\n padding: 12px 12px 0 12px;\n max-height: 300px;\n}\n.tek-grid-column-filter-menu.theme--light {\n background: #fff;\n}\n.tek-grid-column-filter-menu.theme--dark {\n background: #1e1e1e;\n}\n.filter-helper-values-button {\n height: 24px !important;\n margin-left: 5px;\n margin-top: 0;\n}\n.filter-helper-values-button.with-label {\n margin-top: 20px;\n}\n.filter-helper-values-option {\n cursor: pointer;\n}\n.filter-helper-values-option:hover {\n background-color: rgba(0, 0, 0, 0.03);\n}", map: undefined, media: undefined });
3093
+ inject("data-v-76e10514_0", { source: ".tek-grid .zd-table-cell-text-first {\n display: inline-flex;\n width: 100%;\n}\n.tek-grid .zd-grid-toolbar {\n height: 36px;\n}\n.tek-grid .zd-grid-toolbar .zd-grid-toolbar-slot {\n align-items: center;\n}\n.tek-grid .zd-grid-toolbar .toolbar-divider {\n margin: 10px;\n}\n.tek-grid .zd-grid-toolbar .toolbar-title {\n line-height: 22px;\n color: var(--v-primary-base);\n}\n.tek-grid table thead tr th.zd-table-cell.zd-table-fixed-column {\n position: sticky !important;\n left: 0;\n z-index: 5;\n}\n.tek-grid table thead tr th.zd-table-cell.zd-table-fixed-column.theme--light {\n background: #f7f7f7 !important;\n}\n.tek-grid table thead tr th.zd-table-cell.zd-table-fixed-column.theme--dark {\n background: #3c3c3c !important;\n}\n.tek-grid table thead tr th .tek-grid-column-filter-button {\n display: inline-block;\n}\n.tek-grid table thead tr th .tek-grid-column-filter-button .v-icon {\n cursor: pointer;\n font-size: 15px;\n width: 15px;\n padding: 0 3px;\n opacity: 0;\n color: #ccc;\n}\n.tek-grid table thead tr th .tek-grid-column-filter-button.has-filter-data .v-icon {\n opacity: 1;\n color: var(--v-primary-base);\n}\n.tek-grid table thead tr th:hover .tek-grid-column-filter-button .v-icon {\n opacity: 1;\n}\n.tek-grid table tbody tr.footer.theme--light {\n background: #f6f6f6;\n}\n.tek-grid table tbody tr.footer.theme--dark {\n background: #3b3b3b;\n}\n.tek-grid table tbody tr.footer td.zd-table-cell {\n font-weight: 700;\n}\n.tek-grid table tbody tr.summary {\n background: #eee;\n}\n.tek-grid table tbody tr.summary td.zd-table-cell {\n font-weight: 700;\n font-size: 15px;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header {\n font-weight: bold;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header .zd-table-group-two-plus-container {\n display: flex;\n height: 100%;\n align-items: center;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header .zd-table-group-two-plus-container .tek-grid-body-group-identation {\n top: unset;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header .zd-table-group-two-plus-container .tek-grid-body-group-identation :not(.first-group) {\n margin-left: 10px;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header .zd-table-group-two-plus-container .tek-grid-body-group-identation.first-group {\n width: 14px;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header .zd-table-group-two-plus-container .tek-grid-body-group-identation:not(.first-group) {\n top: unset;\n margin-left: 10px;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header .v-icon {\n font-size: 21px;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header .v-icon.closed {\n transform: rotate(-90deg);\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header .zd-table-group-container {\n position: sticky !important;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header .zd-table-group-container .zd-table-group-text {\n vertical-align: middle;\n}\n.tek-grid table tbody tr td.zd-table-cell .zd-table-cell-aling-total {\n display: flex !important;\n position: relative;\n justify-content: start;\n align-items: center;\n left: 1.5rem;\n top: -50%;\n}\n.tek-grid table tbody tr td.zd-table-cell .zd-table-cell-aling-total:first-of-type {\n display: inline-block !important;\n top: 0;\n left: 0;\n}\n.tek-grid table tbody tr td.zd-table-cell .zd-table-cell-text {\n display: inline-block;\n vertical-align: middle;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-fixed-column {\n position: sticky !important;\n left: 0;\n z-index: 3;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-fixed-column.theme--light {\n background: #f7f7f7 !important;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-fixed-column.theme--dark {\n background: #3c3c3c !important;\n}\n.tek-grid table tbody tr.current td.zd-table-cell.zd-table-fixed-column {\n color: var(--v-primary-base) !important;\n}\n.tek-grid table .tek-grid-header-group-identation {\n width: 22px;\n display: inline-block;\n vertical-align: middle;\n}\n.tek-grid table .tek-grid-header-group-identation.first-group {\n width: 20px;\n}\n.tek-grid table .zd-table-two-plus-groups {\n display: flex !important;\n}\n.tek-grid table .zd-table-two-plus-groups .zd-table-cell-text {\n position: unset !important;\n}\n.tek-grid table .zd-table-two-plus-groups .tek-grid-body-group-identation {\n top: unset !important;\n}\n.tek-grid table .zd-table-two-plus-groups .tek-grid-body-group-identation:not(.first-group) {\n top: unset;\n margin-left: 10px;\n}\n.tek-grid table .tek-grid-body-group-identation {\n width: 8px;\n display: flex;\n position: relative;\n top: 10px;\n margin-left: 14px;\n height: 100%;\n border-left: solid 1px #ccc;\n}\n.tek-grid table .tek-grid-body-group-identation.first-group {\n width: 1rem;\n margin-left: 10px;\n}\n.tek-grid table .tek-grid-body-group-identation.group-footer {\n height: 60%;\n border-bottom: solid 1px #ccc;\n top: -25%;\n}\n.tek-grid table .tek-grid-body-group-identation.group-footer-no-line {\n border-left: none;\n}\n.tek-grid .zd-skeleton-table-cell .v-skeleton-loader__table-cell {\n height: auto;\n}\n.tekgrid-actions-dropdown > * {\n display: block;\n}\n.tek-grid-column-filter-menu {\n padding: 12px 12px 0 12px;\n max-height: 300px;\n}\n.tek-grid-column-filter-menu.theme--light {\n background: #fff;\n}\n.tek-grid-column-filter-menu.theme--dark {\n background: #1e1e1e;\n}\n.filter-helper-values-button {\n height: 24px !important;\n margin-left: 5px;\n margin-top: 0;\n}\n.filter-helper-values-button.with-label {\n margin-top: 20px;\n}\n.filter-helper-values-option {\n cursor: pointer;\n}\n.filter-helper-values-option:hover {\n background-color: rgba(0, 0, 0, 0.03);\n}", map: undefined, media: undefined });
3084
3094
 
3085
3095
  };
3086
3096
  /* scoped */
@@ -4044,7 +4054,7 @@ let TekGridColumnsButton = class TekGridColumnsButton extends ZdIterableColumnsB
4044
4054
  });
4045
4055
  const ignoredColumns = grid.columns.filter((column) => this.instance.ignoreColumns.indexOf(column.name) !== -1);
4046
4056
  grid.columns = newColumns.concat(ignoredColumns);
4047
- if (JSON.stringify(groupColumnNames) !== JSON.stringify(grid.groupColumnNames)) {
4057
+ if ((grid.updateGrouping) && JSON.stringify(groupColumnNames) !== JSON.stringify(grid.groupColumnNames)) {
4048
4058
  grid.updateGrouping();
4049
4059
  }
4050
4060
  grid.changeLayout();
@@ -5807,9 +5817,10 @@ let TekGrid = class TekGrid extends ZdTreeGridEditable {
5807
5817
  this.tableBody = null;
5808
5818
  }
5809
5819
  mounted() {
5810
- this.originalChangeLayout = this.instance.changeLayout;
5811
- this.instance.changeLayout = this.onChangeLayout;
5820
+ this.originalChangeTekGridLayout = this.instance.changeLayout;
5821
+ this.instance.changeLayout = this.onChangeTekGridLayout;
5812
5822
  this.updateFixedColumns();
5823
+ this.orderColumnVisibility();
5813
5824
  }
5814
5825
  minimumColumnWidth(column) {
5815
5826
  let minWidth = column && column.sortable ? 50 : 34;
@@ -5818,9 +5829,9 @@ let TekGrid = class TekGrid extends ZdTreeGridEditable {
5818
5829
  }
5819
5830
  return minWidth;
5820
5831
  }
5821
- onChangeLayout(event, element) {
5822
- if (this.originalChangeLayout) {
5823
- this.originalChangeLayout.call(this.instance, event, element);
5832
+ onChangeTekGridLayout(event, element) {
5833
+ if (this.originalChangeTekGridLayout) {
5834
+ this.originalChangeTekGridLayout.call(this.instance, event, element);
5824
5835
  }
5825
5836
  if (this.instance.showLayoutOptions) {
5826
5837
  try {
@@ -5893,11 +5904,26 @@ let TekGrid = class TekGrid extends ZdTreeGridEditable {
5893
5904
  datasource.dynamicFilter[column.name][index][prop] = component.value;
5894
5905
  if (this.lastFilter !== JSON.stringify(datasource.dynamicFilter)) {
5895
5906
  this.debouncedDatasourceGet(this.instance);
5896
- this.onChangeLayout(event, element);
5907
+ this.onChangeTekGridLayout(event, element);
5897
5908
  }
5898
5909
  }
5899
5910
  }
5900
5911
  }
5912
+ orderColumnVisibility() {
5913
+ const columnsInvisibles = this.instance.columns.filter((column) => column.isVisible === false);
5914
+ if (!columnsInvisibles) {
5915
+ return;
5916
+ }
5917
+ const columnsVisibles = this.instance.columns.filter((column) => column.isVisible === true);
5918
+ const newOrderColumns = [];
5919
+ if (columnsVisibles) {
5920
+ newOrderColumns.push(...columnsVisibles);
5921
+ }
5922
+ if (columnsInvisibles) {
5923
+ newOrderColumns.push(...columnsInvisibles);
5924
+ }
5925
+ this.instance.columns = newOrderColumns;
5926
+ }
5901
5927
  convertToDateFormat(column, value, revert) {
5902
5928
  const dateFormat = column.componentProps.dateFormat || Config.dateFormat;
5903
5929
  const displayFormat = column.componentProps.displayFormat || Config.displayFormat;
@@ -5977,7 +6003,7 @@ let TekGrid = class TekGrid extends ZdTreeGridEditable {
5977
6003
  }
5978
6004
  if (this.lastFilter !== JSON.stringify(datasource.dynamicFilter)) {
5979
6005
  this.debouncedDatasourceGet(this.instance);
5980
- this.onChangeLayout(event, element);
6006
+ this.onChangeTekGridLayout(event, element);
5981
6007
  this.clearHelperValues(column);
5982
6008
  }
5983
6009
  }
@@ -5991,7 +6017,7 @@ let TekGrid = class TekGrid extends ZdTreeGridEditable {
5991
6017
  }
5992
6018
  if (this.lastFilter !== JSON.stringify(this.instance.datasource.filter)) {
5993
6019
  this.debouncedDatasourceGet(this.instance);
5994
- this.onChangeLayout(event, element);
6020
+ this.onChangeTekGridLayout(event, element);
5995
6021
  this.clearHelperValues(column);
5996
6022
  }
5997
6023
  }
@@ -6345,6 +6371,8 @@ var __vue_render__$2 = function () {
6345
6371
  sortable: column.sortable,
6346
6372
  sortHandle: _vm.instance.dragColumns,
6347
6373
  "zd-table-fixed-column": column.fixed,
6374
+ "zd-table-fixed-column-action":
6375
+ column.actionFixed,
6348
6376
  },
6349
6377
  "text-" + column.align,
6350
6378
  _vm.instance.datasource.getOrderByColumn(
@@ -6356,23 +6384,17 @@ var __vue_render__$2 = function () {
6356
6384
  ? "active"
6357
6385
  : "",
6358
6386
  ],
6359
- style: [
6360
- {
6361
- "background-color":
6362
- _vm.instance.headerBackground,
6363
- },
6364
- column.width ||
6365
- column.maxWidth ||
6366
- column.minWidth
6367
- ? "width: " +
6368
- _vm.calcWidth(
6369
- column,
6370
- column.width ||
6371
- column.maxWidth ||
6372
- column.minWidth
6373
- )
6374
- : "width: unset",
6375
- ],
6387
+ style: {
6388
+ "background-color":
6389
+ _vm.instance.headerBackground,
6390
+ width: _vm.calcWidth(
6391
+ column,
6392
+ column.width ||
6393
+ column.maxWidth ||
6394
+ column.minWidth,
6395
+ true
6396
+ ),
6397
+ },
6376
6398
  attrs: {
6377
6399
  "column-name": column.name,
6378
6400
  index: index,
@@ -7187,6 +7209,9 @@ var __vue_render__$2 = function () {
7187
7209
  selectable:
7188
7210
  _vm.instance
7189
7211
  .selectable,
7212
+ fieldHasChild:
7213
+ _vm.instance
7214
+ .fieldHasChild,
7190
7215
  toggleExpand:
7191
7216
  _vm.toggleExpand,
7192
7217
  rowIndex: index,
@@ -7287,7 +7312,8 @@ var __vue_render__$2 = function () {
7287
7312
  ) {
7288
7313
  return _vm.instance.toggleExpand(
7289
7314
  item,
7290
- index
7315
+ index,
7316
+ $event
7291
7317
  )
7292
7318
  },
7293
7319
  },
@@ -7425,7 +7451,7 @@ __vue_render__$2._withStripped = true;
7425
7451
  /* style */
7426
7452
  const __vue_inject_styles__$2 = function (inject) {
7427
7453
  if (!inject) return
7428
- inject("data-v-3a64cd2e_0", { source: ".tek-grid .zd-table-cell-text-first {\n display: inline-flex;\n width: 100%;\n}\n.tek-grid .zd-grid-toolbar {\n height: 36px;\n}\n.tek-grid .zd-grid-toolbar .zd-grid-toolbar-slot {\n align-items: center;\n}\n.tek-grid .zd-grid-toolbar .toolbar-divider {\n margin: 10px;\n}\n.tek-grid .zd-grid-toolbar .toolbar-title {\n line-height: 22px;\n color: var(--v-primary-base);\n}\n.tek-grid table thead tr th.zd-table-cell.zd-table-fixed-column {\n position: sticky !important;\n left: 0;\n z-index: 5;\n}\n.tek-grid table thead tr th.zd-table-cell.zd-table-fixed-column.theme--light {\n background: #f7f7f7 !important;\n}\n.tek-grid table thead tr th.zd-table-cell.zd-table-fixed-column.theme--dark {\n background: #3c3c3c !important;\n}\n.tek-grid table thead tr th .tek-grid-column-filter-button {\n display: inline-block;\n}\n.tek-grid table thead tr th .tek-grid-column-filter-button .v-icon {\n cursor: pointer;\n font-size: 15px;\n width: 15px;\n padding: 0 3px;\n opacity: 0;\n color: #ccc;\n}\n.tek-grid table thead tr th .tek-grid-column-filter-button.has-filter-data .v-icon {\n opacity: 1;\n color: var(--v-primary-base);\n}\n.tek-grid table thead tr th:hover .tek-grid-column-filter-button .v-icon {\n opacity: 1;\n}\n.tek-grid table tbody tr.footer.theme--light {\n background: #f6f6f6;\n}\n.tek-grid table tbody tr.footer.theme--dark {\n background: #3b3b3b;\n}\n.tek-grid table tbody tr.footer td.zd-table-cell {\n font-weight: 700;\n}\n.tek-grid table tbody tr.summary {\n background: #eee;\n}\n.tek-grid table tbody tr.summary td.zd-table-cell {\n font-weight: 700;\n font-size: 15px;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header {\n font-weight: bold;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header .v-icon {\n font-size: 21px;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header .v-icon.closed {\n transform: rotate(-90deg);\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header .zd-table-group-container {\n position: sticky !important;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header .zd-table-group-container .zd-table-group-text {\n vertical-align: middle;\n}\n.tek-grid table tbody tr td.zd-table-cell .zd-table-cell-aling-total {\n display: flex !important;\n position: relative;\n justify-content: start;\n align-items: center;\n left: 1.5rem;\n top: -50%;\n}\n.tek-grid table tbody tr td.zd-table-cell .zd-table-cell-aling-total:first-of-type {\n display: inline-block !important;\n top: 0;\n left: 0;\n}\n.tek-grid table tbody tr td.zd-table-cell .zd-table-cell-text {\n display: inline-block;\n vertical-align: middle;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-fixed-column {\n position: sticky !important;\n left: 0;\n z-index: 3;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-fixed-column.theme--light {\n background: #f7f7f7 !important;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-fixed-column.theme--dark {\n background: #3c3c3c !important;\n}\n.tek-grid table tbody tr.current td.zd-table-cell.zd-table-fixed-column {\n color: var(--v-primary-base) !important;\n}\n.tek-grid table .tek-grid-header-group-identation {\n width: 22px;\n display: inline-block;\n vertical-align: middle;\n}\n.tek-grid table .tek-grid-header-group-identation.first-group {\n width: 20px;\n}\n.tek-grid table .tek-grid-body-group-identation {\n width: 8px;\n display: flex;\n position: relative;\n top: 10px;\n margin-left: 14px;\n height: 100%;\n border-left: solid 1px #ccc;\n}\n.tek-grid table .tek-grid-body-group-identation.first-group {\n width: 1rem;\n margin-left: 10px;\n}\n.tek-grid table .tek-grid-body-group-identation.group-footer {\n height: 60%;\n border-bottom: solid 1px #ccc;\n top: -25%;\n}\n.tek-grid table .tek-grid-body-group-identation.group-footer-no-line {\n border-left: none;\n}\n.tek-grid .zd-skeleton-table-cell .v-skeleton-loader__table-cell {\n height: auto;\n}\n.tekgrid-actions-dropdown > * {\n display: block;\n}\n.tek-grid-column-filter-menu {\n padding: 12px 12px 0 12px;\n max-height: 300px;\n}\n.tek-grid-column-filter-menu.theme--light {\n background: #fff;\n}\n.tek-grid-column-filter-menu.theme--dark {\n background: #1e1e1e;\n}\n.filter-helper-values-button {\n height: 24px !important;\n margin-left: 5px;\n margin-top: 0;\n}\n.filter-helper-values-button.with-label {\n margin-top: 20px;\n}\n.filter-helper-values-option {\n cursor: pointer;\n}\n.filter-helper-values-option:hover {\n background-color: rgba(0, 0, 0, 0.03);\n}", map: undefined, media: undefined });
7454
+ inject("data-v-3f53f711_0", { source: ".tek-grid .zd-table-cell-text-first {\n display: inline-flex;\n width: 100%;\n}\n.tek-grid .zd-grid-toolbar {\n height: 36px;\n}\n.tek-grid .zd-grid-toolbar .zd-grid-toolbar-slot {\n align-items: center;\n}\n.tek-grid .zd-grid-toolbar .toolbar-divider {\n margin: 10px;\n}\n.tek-grid .zd-grid-toolbar .toolbar-title {\n line-height: 22px;\n color: var(--v-primary-base);\n}\n.tek-grid table thead tr th.zd-table-cell.zd-table-fixed-column {\n position: sticky !important;\n left: 0;\n z-index: 5;\n}\n.tek-grid table thead tr th.zd-table-cell.zd-table-fixed-column.theme--light {\n background: #f7f7f7 !important;\n}\n.tek-grid table thead tr th.zd-table-cell.zd-table-fixed-column.theme--dark {\n background: #3c3c3c !important;\n}\n.tek-grid table thead tr th .tek-grid-column-filter-button {\n display: inline-block;\n}\n.tek-grid table thead tr th .tek-grid-column-filter-button .v-icon {\n cursor: pointer;\n font-size: 15px;\n width: 15px;\n padding: 0 3px;\n opacity: 0;\n color: #ccc;\n}\n.tek-grid table thead tr th .tek-grid-column-filter-button.has-filter-data .v-icon {\n opacity: 1;\n color: var(--v-primary-base);\n}\n.tek-grid table thead tr th:hover .tek-grid-column-filter-button .v-icon {\n opacity: 1;\n}\n.tek-grid table tbody tr.footer.theme--light {\n background: #f6f6f6;\n}\n.tek-grid table tbody tr.footer.theme--dark {\n background: #3b3b3b;\n}\n.tek-grid table tbody tr.footer td.zd-table-cell {\n font-weight: 700;\n}\n.tek-grid table tbody tr.summary {\n background: #eee;\n}\n.tek-grid table tbody tr.summary td.zd-table-cell {\n font-weight: 700;\n font-size: 15px;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header {\n font-weight: bold;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header .zd-table-group-two-plus-container {\n display: flex;\n height: 100%;\n align-items: center;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header .zd-table-group-two-plus-container .tek-grid-body-group-identation {\n top: unset;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header .zd-table-group-two-plus-container .tek-grid-body-group-identation :not(.first-group) {\n margin-left: 10px;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header .zd-table-group-two-plus-container .tek-grid-body-group-identation.first-group {\n width: 14px;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header .zd-table-group-two-plus-container .tek-grid-body-group-identation:not(.first-group) {\n top: unset;\n margin-left: 10px;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header .v-icon {\n font-size: 21px;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header .v-icon.closed {\n transform: rotate(-90deg);\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header .zd-table-group-container {\n position: sticky !important;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header .zd-table-group-container .zd-table-group-text {\n vertical-align: middle;\n}\n.tek-grid table tbody tr td.zd-table-cell .zd-table-cell-aling-total {\n display: flex !important;\n position: relative;\n justify-content: start;\n align-items: center;\n left: 1.5rem;\n top: -50%;\n}\n.tek-grid table tbody tr td.zd-table-cell .zd-table-cell-aling-total:first-of-type {\n display: inline-block !important;\n top: 0;\n left: 0;\n}\n.tek-grid table tbody tr td.zd-table-cell .zd-table-cell-text {\n display: inline-block;\n vertical-align: middle;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-fixed-column {\n position: sticky !important;\n left: 0;\n z-index: 3;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-fixed-column.theme--light {\n background: #f7f7f7 !important;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-fixed-column.theme--dark {\n background: #3c3c3c !important;\n}\n.tek-grid table tbody tr.current td.zd-table-cell.zd-table-fixed-column {\n color: var(--v-primary-base) !important;\n}\n.tek-grid table .tek-grid-header-group-identation {\n width: 22px;\n display: inline-block;\n vertical-align: middle;\n}\n.tek-grid table .tek-grid-header-group-identation.first-group {\n width: 20px;\n}\n.tek-grid table .zd-table-two-plus-groups {\n display: flex !important;\n}\n.tek-grid table .zd-table-two-plus-groups .zd-table-cell-text {\n position: unset !important;\n}\n.tek-grid table .zd-table-two-plus-groups .tek-grid-body-group-identation {\n top: unset !important;\n}\n.tek-grid table .zd-table-two-plus-groups .tek-grid-body-group-identation:not(.first-group) {\n top: unset;\n margin-left: 10px;\n}\n.tek-grid table .tek-grid-body-group-identation {\n width: 8px;\n display: flex;\n position: relative;\n top: 10px;\n margin-left: 14px;\n height: 100%;\n border-left: solid 1px #ccc;\n}\n.tek-grid table .tek-grid-body-group-identation.first-group {\n width: 1rem;\n margin-left: 10px;\n}\n.tek-grid table .tek-grid-body-group-identation.group-footer {\n height: 60%;\n border-bottom: solid 1px #ccc;\n top: -25%;\n}\n.tek-grid table .tek-grid-body-group-identation.group-footer-no-line {\n border-left: none;\n}\n.tek-grid .zd-skeleton-table-cell .v-skeleton-loader__table-cell {\n height: auto;\n}\n.tekgrid-actions-dropdown > * {\n display: block;\n}\n.tek-grid-column-filter-menu {\n padding: 12px 12px 0 12px;\n max-height: 300px;\n}\n.tek-grid-column-filter-menu.theme--light {\n background: #fff;\n}\n.tek-grid-column-filter-menu.theme--dark {\n background: #1e1e1e;\n}\n.filter-helper-values-button {\n height: 24px !important;\n margin-left: 5px;\n margin-top: 0;\n}\n.filter-helper-values-button.with-label {\n margin-top: 20px;\n}\n.filter-helper-values-option {\n cursor: pointer;\n}\n.filter-helper-values-option:hover {\n background-color: rgba(0, 0, 0, 0.03);\n}", map: undefined, media: undefined });
7429
7455
 
7430
7456
  };
7431
7457
  /* scoped */
@@ -1771,6 +1771,8 @@
1771
1771
  !column.fixed &&
1772
1772
  _vm.instance.dragColumns,
1773
1773
  "zd-table-fixed-column": column.fixed,
1774
+ "zd-table-fixed-column-action":
1775
+ column.actionFixed,
1774
1776
  },
1775
1777
  {
1776
1778
  "theme--dark":
@@ -1793,23 +1795,17 @@
1793
1795
  ? "active"
1794
1796
  : "",
1795
1797
  ],
1796
- style: [
1797
- {
1798
- "background-color":
1799
- _vm.instance.headerBackground,
1800
- },
1801
- column.width ||
1802
- column.maxWidth ||
1803
- column.minWidth
1804
- ? "width: " +
1805
- _vm.calcWidth(
1806
- column,
1807
- column.width ||
1808
- column.maxWidth ||
1809
- column.minWidth
1810
- )
1811
- : "width: unset",
1812
- ],
1798
+ style: {
1799
+ "background-color":
1800
+ _vm.instance.headerBackground,
1801
+ width: _vm.calcWidth(
1802
+ column,
1803
+ column.width ||
1804
+ column.maxWidth ||
1805
+ column.minWidth,
1806
+ true
1807
+ ),
1808
+ },
1813
1809
  attrs: {
1814
1810
  "column-name": column.name,
1815
1811
  index: index,
@@ -2512,7 +2508,13 @@
2512
2508
  _c(
2513
2509
  "span",
2514
2510
  {
2515
- staticClass: "zd-table-group-container",
2511
+ class: [
2512
+ {
2513
+ "zd-table-group-two-plus-container":
2514
+ item.groupHeaders.length,
2515
+ },
2516
+ "zd-table-group-container",
2517
+ ],
2516
2518
  style:
2517
2519
  "left: " +
2518
2520
  (_vm.instance.selectable ? 48 : 8) +
@@ -2687,6 +2689,12 @@
2687
2689
  cellsApplied: cellsApplied,
2688
2690
  cellClass: [
2689
2691
  {
2692
+ "zd-table-two-plus-groups":
2693
+ (_vm.instance
2694
+ .groupColumnNames
2695
+ .length >
2696
+ 1) &
2697
+ (index === 0),
2690
2698
  "zd-table-column-editable":
2691
2699
  column.editable,
2692
2700
  "zd-table-cell-editable":
@@ -2912,6 +2920,8 @@
2912
2920
  {
2913
2921
  "zd-table-fixed-column":
2914
2922
  column.fixed,
2923
+ "zd-table-fixed-column-action":
2924
+ column.actionFixed,
2915
2925
  },
2916
2926
  {
2917
2927
  "theme--dark":
@@ -3082,7 +3092,7 @@
3082
3092
  /* style */
3083
3093
  const __vue_inject_styles__$b = function (inject) {
3084
3094
  if (!inject) return
3085
- inject("data-v-842b3508_0", { source: ".tek-grid .zd-table-cell-text-first {\n display: inline-flex;\n width: 100%;\n}\n.tek-grid .zd-grid-toolbar {\n height: 36px;\n}\n.tek-grid .zd-grid-toolbar .zd-grid-toolbar-slot {\n align-items: center;\n}\n.tek-grid .zd-grid-toolbar .toolbar-divider {\n margin: 10px;\n}\n.tek-grid .zd-grid-toolbar .toolbar-title {\n line-height: 22px;\n color: var(--v-primary-base);\n}\n.tek-grid table thead tr th.zd-table-cell.zd-table-fixed-column {\n position: sticky !important;\n left: 0;\n z-index: 5;\n}\n.tek-grid table thead tr th.zd-table-cell.zd-table-fixed-column.theme--light {\n background: #f7f7f7 !important;\n}\n.tek-grid table thead tr th.zd-table-cell.zd-table-fixed-column.theme--dark {\n background: #3c3c3c !important;\n}\n.tek-grid table thead tr th .tek-grid-column-filter-button {\n display: inline-block;\n}\n.tek-grid table thead tr th .tek-grid-column-filter-button .v-icon {\n cursor: pointer;\n font-size: 15px;\n width: 15px;\n padding: 0 3px;\n opacity: 0;\n color: #ccc;\n}\n.tek-grid table thead tr th .tek-grid-column-filter-button.has-filter-data .v-icon {\n opacity: 1;\n color: var(--v-primary-base);\n}\n.tek-grid table thead tr th:hover .tek-grid-column-filter-button .v-icon {\n opacity: 1;\n}\n.tek-grid table tbody tr.footer.theme--light {\n background: #f6f6f6;\n}\n.tek-grid table tbody tr.footer.theme--dark {\n background: #3b3b3b;\n}\n.tek-grid table tbody tr.footer td.zd-table-cell {\n font-weight: 700;\n}\n.tek-grid table tbody tr.summary {\n background: #eee;\n}\n.tek-grid table tbody tr.summary td.zd-table-cell {\n font-weight: 700;\n font-size: 15px;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header {\n font-weight: bold;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header .v-icon {\n font-size: 21px;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header .v-icon.closed {\n transform: rotate(-90deg);\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header .zd-table-group-container {\n position: sticky !important;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header .zd-table-group-container .zd-table-group-text {\n vertical-align: middle;\n}\n.tek-grid table tbody tr td.zd-table-cell .zd-table-cell-aling-total {\n display: flex !important;\n position: relative;\n justify-content: start;\n align-items: center;\n left: 1.5rem;\n top: -50%;\n}\n.tek-grid table tbody tr td.zd-table-cell .zd-table-cell-aling-total:first-of-type {\n display: inline-block !important;\n top: 0;\n left: 0;\n}\n.tek-grid table tbody tr td.zd-table-cell .zd-table-cell-text {\n display: inline-block;\n vertical-align: middle;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-fixed-column {\n position: sticky !important;\n left: 0;\n z-index: 3;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-fixed-column.theme--light {\n background: #f7f7f7 !important;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-fixed-column.theme--dark {\n background: #3c3c3c !important;\n}\n.tek-grid table tbody tr.current td.zd-table-cell.zd-table-fixed-column {\n color: var(--v-primary-base) !important;\n}\n.tek-grid table .tek-grid-header-group-identation {\n width: 22px;\n display: inline-block;\n vertical-align: middle;\n}\n.tek-grid table .tek-grid-header-group-identation.first-group {\n width: 20px;\n}\n.tek-grid table .tek-grid-body-group-identation {\n width: 8px;\n display: flex;\n position: relative;\n top: 10px;\n margin-left: 14px;\n height: 100%;\n border-left: solid 1px #ccc;\n}\n.tek-grid table .tek-grid-body-group-identation.first-group {\n width: 1rem;\n margin-left: 10px;\n}\n.tek-grid table .tek-grid-body-group-identation.group-footer {\n height: 60%;\n border-bottom: solid 1px #ccc;\n top: -25%;\n}\n.tek-grid table .tek-grid-body-group-identation.group-footer-no-line {\n border-left: none;\n}\n.tek-grid .zd-skeleton-table-cell .v-skeleton-loader__table-cell {\n height: auto;\n}\n.tekgrid-actions-dropdown > * {\n display: block;\n}\n.tek-grid-column-filter-menu {\n padding: 12px 12px 0 12px;\n max-height: 300px;\n}\n.tek-grid-column-filter-menu.theme--light {\n background: #fff;\n}\n.tek-grid-column-filter-menu.theme--dark {\n background: #1e1e1e;\n}\n.filter-helper-values-button {\n height: 24px !important;\n margin-left: 5px;\n margin-top: 0;\n}\n.filter-helper-values-button.with-label {\n margin-top: 20px;\n}\n.filter-helper-values-option {\n cursor: pointer;\n}\n.filter-helper-values-option:hover {\n background-color: rgba(0, 0, 0, 0.03);\n}", map: undefined, media: undefined });
3095
+ inject("data-v-76e10514_0", { source: ".tek-grid .zd-table-cell-text-first {\n display: inline-flex;\n width: 100%;\n}\n.tek-grid .zd-grid-toolbar {\n height: 36px;\n}\n.tek-grid .zd-grid-toolbar .zd-grid-toolbar-slot {\n align-items: center;\n}\n.tek-grid .zd-grid-toolbar .toolbar-divider {\n margin: 10px;\n}\n.tek-grid .zd-grid-toolbar .toolbar-title {\n line-height: 22px;\n color: var(--v-primary-base);\n}\n.tek-grid table thead tr th.zd-table-cell.zd-table-fixed-column {\n position: sticky !important;\n left: 0;\n z-index: 5;\n}\n.tek-grid table thead tr th.zd-table-cell.zd-table-fixed-column.theme--light {\n background: #f7f7f7 !important;\n}\n.tek-grid table thead tr th.zd-table-cell.zd-table-fixed-column.theme--dark {\n background: #3c3c3c !important;\n}\n.tek-grid table thead tr th .tek-grid-column-filter-button {\n display: inline-block;\n}\n.tek-grid table thead tr th .tek-grid-column-filter-button .v-icon {\n cursor: pointer;\n font-size: 15px;\n width: 15px;\n padding: 0 3px;\n opacity: 0;\n color: #ccc;\n}\n.tek-grid table thead tr th .tek-grid-column-filter-button.has-filter-data .v-icon {\n opacity: 1;\n color: var(--v-primary-base);\n}\n.tek-grid table thead tr th:hover .tek-grid-column-filter-button .v-icon {\n opacity: 1;\n}\n.tek-grid table tbody tr.footer.theme--light {\n background: #f6f6f6;\n}\n.tek-grid table tbody tr.footer.theme--dark {\n background: #3b3b3b;\n}\n.tek-grid table tbody tr.footer td.zd-table-cell {\n font-weight: 700;\n}\n.tek-grid table tbody tr.summary {\n background: #eee;\n}\n.tek-grid table tbody tr.summary td.zd-table-cell {\n font-weight: 700;\n font-size: 15px;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header {\n font-weight: bold;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header .zd-table-group-two-plus-container {\n display: flex;\n height: 100%;\n align-items: center;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header .zd-table-group-two-plus-container .tek-grid-body-group-identation {\n top: unset;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header .zd-table-group-two-plus-container .tek-grid-body-group-identation :not(.first-group) {\n margin-left: 10px;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header .zd-table-group-two-plus-container .tek-grid-body-group-identation.first-group {\n width: 14px;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header .zd-table-group-two-plus-container .tek-grid-body-group-identation:not(.first-group) {\n top: unset;\n margin-left: 10px;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header .v-icon {\n font-size: 21px;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header .v-icon.closed {\n transform: rotate(-90deg);\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header .zd-table-group-container {\n position: sticky !important;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header .zd-table-group-container .zd-table-group-text {\n vertical-align: middle;\n}\n.tek-grid table tbody tr td.zd-table-cell .zd-table-cell-aling-total {\n display: flex !important;\n position: relative;\n justify-content: start;\n align-items: center;\n left: 1.5rem;\n top: -50%;\n}\n.tek-grid table tbody tr td.zd-table-cell .zd-table-cell-aling-total:first-of-type {\n display: inline-block !important;\n top: 0;\n left: 0;\n}\n.tek-grid table tbody tr td.zd-table-cell .zd-table-cell-text {\n display: inline-block;\n vertical-align: middle;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-fixed-column {\n position: sticky !important;\n left: 0;\n z-index: 3;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-fixed-column.theme--light {\n background: #f7f7f7 !important;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-fixed-column.theme--dark {\n background: #3c3c3c !important;\n}\n.tek-grid table tbody tr.current td.zd-table-cell.zd-table-fixed-column {\n color: var(--v-primary-base) !important;\n}\n.tek-grid table .tek-grid-header-group-identation {\n width: 22px;\n display: inline-block;\n vertical-align: middle;\n}\n.tek-grid table .tek-grid-header-group-identation.first-group {\n width: 20px;\n}\n.tek-grid table .zd-table-two-plus-groups {\n display: flex !important;\n}\n.tek-grid table .zd-table-two-plus-groups .zd-table-cell-text {\n position: unset !important;\n}\n.tek-grid table .zd-table-two-plus-groups .tek-grid-body-group-identation {\n top: unset !important;\n}\n.tek-grid table .zd-table-two-plus-groups .tek-grid-body-group-identation:not(.first-group) {\n top: unset;\n margin-left: 10px;\n}\n.tek-grid table .tek-grid-body-group-identation {\n width: 8px;\n display: flex;\n position: relative;\n top: 10px;\n margin-left: 14px;\n height: 100%;\n border-left: solid 1px #ccc;\n}\n.tek-grid table .tek-grid-body-group-identation.first-group {\n width: 1rem;\n margin-left: 10px;\n}\n.tek-grid table .tek-grid-body-group-identation.group-footer {\n height: 60%;\n border-bottom: solid 1px #ccc;\n top: -25%;\n}\n.tek-grid table .tek-grid-body-group-identation.group-footer-no-line {\n border-left: none;\n}\n.tek-grid .zd-skeleton-table-cell .v-skeleton-loader__table-cell {\n height: auto;\n}\n.tekgrid-actions-dropdown > * {\n display: block;\n}\n.tek-grid-column-filter-menu {\n padding: 12px 12px 0 12px;\n max-height: 300px;\n}\n.tek-grid-column-filter-menu.theme--light {\n background: #fff;\n}\n.tek-grid-column-filter-menu.theme--dark {\n background: #1e1e1e;\n}\n.filter-helper-values-button {\n height: 24px !important;\n margin-left: 5px;\n margin-top: 0;\n}\n.filter-helper-values-button.with-label {\n margin-top: 20px;\n}\n.filter-helper-values-option {\n cursor: pointer;\n}\n.filter-helper-values-option:hover {\n background-color: rgba(0, 0, 0, 0.03);\n}", map: undefined, media: undefined });
3086
3096
 
3087
3097
  };
3088
3098
  /* scoped */
@@ -4046,7 +4056,7 @@
4046
4056
  });
4047
4057
  const ignoredColumns = grid.columns.filter((column) => this.instance.ignoreColumns.indexOf(column.name) !== -1);
4048
4058
  grid.columns = newColumns.concat(ignoredColumns);
4049
- if (JSON.stringify(groupColumnNames) !== JSON.stringify(grid.groupColumnNames)) {
4059
+ if ((grid.updateGrouping) && JSON.stringify(groupColumnNames) !== JSON.stringify(grid.groupColumnNames)) {
4050
4060
  grid.updateGrouping();
4051
4061
  }
4052
4062
  grid.changeLayout();
@@ -5809,9 +5819,10 @@
5809
5819
  this.tableBody = null;
5810
5820
  }
5811
5821
  mounted() {
5812
- this.originalChangeLayout = this.instance.changeLayout;
5813
- this.instance.changeLayout = this.onChangeLayout;
5822
+ this.originalChangeTekGridLayout = this.instance.changeLayout;
5823
+ this.instance.changeLayout = this.onChangeTekGridLayout;
5814
5824
  this.updateFixedColumns();
5825
+ this.orderColumnVisibility();
5815
5826
  }
5816
5827
  minimumColumnWidth(column) {
5817
5828
  let minWidth = column && column.sortable ? 50 : 34;
@@ -5820,9 +5831,9 @@
5820
5831
  }
5821
5832
  return minWidth;
5822
5833
  }
5823
- onChangeLayout(event, element) {
5824
- if (this.originalChangeLayout) {
5825
- this.originalChangeLayout.call(this.instance, event, element);
5834
+ onChangeTekGridLayout(event, element) {
5835
+ if (this.originalChangeTekGridLayout) {
5836
+ this.originalChangeTekGridLayout.call(this.instance, event, element);
5826
5837
  }
5827
5838
  if (this.instance.showLayoutOptions) {
5828
5839
  try {
@@ -5895,11 +5906,26 @@
5895
5906
  datasource.dynamicFilter[column.name][index][prop] = component.value;
5896
5907
  if (this.lastFilter !== JSON.stringify(datasource.dynamicFilter)) {
5897
5908
  this.debouncedDatasourceGet(this.instance);
5898
- this.onChangeLayout(event, element);
5909
+ this.onChangeTekGridLayout(event, element);
5899
5910
  }
5900
5911
  }
5901
5912
  }
5902
5913
  }
5914
+ orderColumnVisibility() {
5915
+ const columnsInvisibles = this.instance.columns.filter((column) => column.isVisible === false);
5916
+ if (!columnsInvisibles) {
5917
+ return;
5918
+ }
5919
+ const columnsVisibles = this.instance.columns.filter((column) => column.isVisible === true);
5920
+ const newOrderColumns = [];
5921
+ if (columnsVisibles) {
5922
+ newOrderColumns.push(...columnsVisibles);
5923
+ }
5924
+ if (columnsInvisibles) {
5925
+ newOrderColumns.push(...columnsInvisibles);
5926
+ }
5927
+ this.instance.columns = newOrderColumns;
5928
+ }
5903
5929
  convertToDateFormat(column, value, revert) {
5904
5930
  const dateFormat = column.componentProps.dateFormat || core.Config.dateFormat;
5905
5931
  const displayFormat = column.componentProps.displayFormat || core.Config.displayFormat;
@@ -5979,7 +6005,7 @@
5979
6005
  }
5980
6006
  if (this.lastFilter !== JSON.stringify(datasource.dynamicFilter)) {
5981
6007
  this.debouncedDatasourceGet(this.instance);
5982
- this.onChangeLayout(event, element);
6008
+ this.onChangeTekGridLayout(event, element);
5983
6009
  this.clearHelperValues(column);
5984
6010
  }
5985
6011
  }
@@ -5993,7 +6019,7 @@
5993
6019
  }
5994
6020
  if (this.lastFilter !== JSON.stringify(this.instance.datasource.filter)) {
5995
6021
  this.debouncedDatasourceGet(this.instance);
5996
- this.onChangeLayout(event, element);
6022
+ this.onChangeTekGridLayout(event, element);
5997
6023
  this.clearHelperValues(column);
5998
6024
  }
5999
6025
  }
@@ -6347,6 +6373,8 @@
6347
6373
  sortable: column.sortable,
6348
6374
  sortHandle: _vm.instance.dragColumns,
6349
6375
  "zd-table-fixed-column": column.fixed,
6376
+ "zd-table-fixed-column-action":
6377
+ column.actionFixed,
6350
6378
  },
6351
6379
  "text-" + column.align,
6352
6380
  _vm.instance.datasource.getOrderByColumn(
@@ -6358,23 +6386,17 @@
6358
6386
  ? "active"
6359
6387
  : "",
6360
6388
  ],
6361
- style: [
6362
- {
6363
- "background-color":
6364
- _vm.instance.headerBackground,
6365
- },
6366
- column.width ||
6367
- column.maxWidth ||
6368
- column.minWidth
6369
- ? "width: " +
6370
- _vm.calcWidth(
6371
- column,
6372
- column.width ||
6373
- column.maxWidth ||
6374
- column.minWidth
6375
- )
6376
- : "width: unset",
6377
- ],
6389
+ style: {
6390
+ "background-color":
6391
+ _vm.instance.headerBackground,
6392
+ width: _vm.calcWidth(
6393
+ column,
6394
+ column.width ||
6395
+ column.maxWidth ||
6396
+ column.minWidth,
6397
+ true
6398
+ ),
6399
+ },
6378
6400
  attrs: {
6379
6401
  "column-name": column.name,
6380
6402
  index: index,
@@ -7189,6 +7211,9 @@
7189
7211
  selectable:
7190
7212
  _vm.instance
7191
7213
  .selectable,
7214
+ fieldHasChild:
7215
+ _vm.instance
7216
+ .fieldHasChild,
7192
7217
  toggleExpand:
7193
7218
  _vm.toggleExpand,
7194
7219
  rowIndex: index,
@@ -7289,7 +7314,8 @@
7289
7314
  ) {
7290
7315
  return _vm.instance.toggleExpand(
7291
7316
  item,
7292
- index
7317
+ index,
7318
+ $event
7293
7319
  )
7294
7320
  },
7295
7321
  },
@@ -7427,7 +7453,7 @@
7427
7453
  /* style */
7428
7454
  const __vue_inject_styles__$2 = function (inject) {
7429
7455
  if (!inject) return
7430
- inject("data-v-3a64cd2e_0", { source: ".tek-grid .zd-table-cell-text-first {\n display: inline-flex;\n width: 100%;\n}\n.tek-grid .zd-grid-toolbar {\n height: 36px;\n}\n.tek-grid .zd-grid-toolbar .zd-grid-toolbar-slot {\n align-items: center;\n}\n.tek-grid .zd-grid-toolbar .toolbar-divider {\n margin: 10px;\n}\n.tek-grid .zd-grid-toolbar .toolbar-title {\n line-height: 22px;\n color: var(--v-primary-base);\n}\n.tek-grid table thead tr th.zd-table-cell.zd-table-fixed-column {\n position: sticky !important;\n left: 0;\n z-index: 5;\n}\n.tek-grid table thead tr th.zd-table-cell.zd-table-fixed-column.theme--light {\n background: #f7f7f7 !important;\n}\n.tek-grid table thead tr th.zd-table-cell.zd-table-fixed-column.theme--dark {\n background: #3c3c3c !important;\n}\n.tek-grid table thead tr th .tek-grid-column-filter-button {\n display: inline-block;\n}\n.tek-grid table thead tr th .tek-grid-column-filter-button .v-icon {\n cursor: pointer;\n font-size: 15px;\n width: 15px;\n padding: 0 3px;\n opacity: 0;\n color: #ccc;\n}\n.tek-grid table thead tr th .tek-grid-column-filter-button.has-filter-data .v-icon {\n opacity: 1;\n color: var(--v-primary-base);\n}\n.tek-grid table thead tr th:hover .tek-grid-column-filter-button .v-icon {\n opacity: 1;\n}\n.tek-grid table tbody tr.footer.theme--light {\n background: #f6f6f6;\n}\n.tek-grid table tbody tr.footer.theme--dark {\n background: #3b3b3b;\n}\n.tek-grid table tbody tr.footer td.zd-table-cell {\n font-weight: 700;\n}\n.tek-grid table tbody tr.summary {\n background: #eee;\n}\n.tek-grid table tbody tr.summary td.zd-table-cell {\n font-weight: 700;\n font-size: 15px;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header {\n font-weight: bold;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header .v-icon {\n font-size: 21px;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header .v-icon.closed {\n transform: rotate(-90deg);\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header .zd-table-group-container {\n position: sticky !important;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header .zd-table-group-container .zd-table-group-text {\n vertical-align: middle;\n}\n.tek-grid table tbody tr td.zd-table-cell .zd-table-cell-aling-total {\n display: flex !important;\n position: relative;\n justify-content: start;\n align-items: center;\n left: 1.5rem;\n top: -50%;\n}\n.tek-grid table tbody tr td.zd-table-cell .zd-table-cell-aling-total:first-of-type {\n display: inline-block !important;\n top: 0;\n left: 0;\n}\n.tek-grid table tbody tr td.zd-table-cell .zd-table-cell-text {\n display: inline-block;\n vertical-align: middle;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-fixed-column {\n position: sticky !important;\n left: 0;\n z-index: 3;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-fixed-column.theme--light {\n background: #f7f7f7 !important;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-fixed-column.theme--dark {\n background: #3c3c3c !important;\n}\n.tek-grid table tbody tr.current td.zd-table-cell.zd-table-fixed-column {\n color: var(--v-primary-base) !important;\n}\n.tek-grid table .tek-grid-header-group-identation {\n width: 22px;\n display: inline-block;\n vertical-align: middle;\n}\n.tek-grid table .tek-grid-header-group-identation.first-group {\n width: 20px;\n}\n.tek-grid table .tek-grid-body-group-identation {\n width: 8px;\n display: flex;\n position: relative;\n top: 10px;\n margin-left: 14px;\n height: 100%;\n border-left: solid 1px #ccc;\n}\n.tek-grid table .tek-grid-body-group-identation.first-group {\n width: 1rem;\n margin-left: 10px;\n}\n.tek-grid table .tek-grid-body-group-identation.group-footer {\n height: 60%;\n border-bottom: solid 1px #ccc;\n top: -25%;\n}\n.tek-grid table .tek-grid-body-group-identation.group-footer-no-line {\n border-left: none;\n}\n.tek-grid .zd-skeleton-table-cell .v-skeleton-loader__table-cell {\n height: auto;\n}\n.tekgrid-actions-dropdown > * {\n display: block;\n}\n.tek-grid-column-filter-menu {\n padding: 12px 12px 0 12px;\n max-height: 300px;\n}\n.tek-grid-column-filter-menu.theme--light {\n background: #fff;\n}\n.tek-grid-column-filter-menu.theme--dark {\n background: #1e1e1e;\n}\n.filter-helper-values-button {\n height: 24px !important;\n margin-left: 5px;\n margin-top: 0;\n}\n.filter-helper-values-button.with-label {\n margin-top: 20px;\n}\n.filter-helper-values-option {\n cursor: pointer;\n}\n.filter-helper-values-option:hover {\n background-color: rgba(0, 0, 0, 0.03);\n}", map: undefined, media: undefined });
7456
+ inject("data-v-3f53f711_0", { source: ".tek-grid .zd-table-cell-text-first {\n display: inline-flex;\n width: 100%;\n}\n.tek-grid .zd-grid-toolbar {\n height: 36px;\n}\n.tek-grid .zd-grid-toolbar .zd-grid-toolbar-slot {\n align-items: center;\n}\n.tek-grid .zd-grid-toolbar .toolbar-divider {\n margin: 10px;\n}\n.tek-grid .zd-grid-toolbar .toolbar-title {\n line-height: 22px;\n color: var(--v-primary-base);\n}\n.tek-grid table thead tr th.zd-table-cell.zd-table-fixed-column {\n position: sticky !important;\n left: 0;\n z-index: 5;\n}\n.tek-grid table thead tr th.zd-table-cell.zd-table-fixed-column.theme--light {\n background: #f7f7f7 !important;\n}\n.tek-grid table thead tr th.zd-table-cell.zd-table-fixed-column.theme--dark {\n background: #3c3c3c !important;\n}\n.tek-grid table thead tr th .tek-grid-column-filter-button {\n display: inline-block;\n}\n.tek-grid table thead tr th .tek-grid-column-filter-button .v-icon {\n cursor: pointer;\n font-size: 15px;\n width: 15px;\n padding: 0 3px;\n opacity: 0;\n color: #ccc;\n}\n.tek-grid table thead tr th .tek-grid-column-filter-button.has-filter-data .v-icon {\n opacity: 1;\n color: var(--v-primary-base);\n}\n.tek-grid table thead tr th:hover .tek-grid-column-filter-button .v-icon {\n opacity: 1;\n}\n.tek-grid table tbody tr.footer.theme--light {\n background: #f6f6f6;\n}\n.tek-grid table tbody tr.footer.theme--dark {\n background: #3b3b3b;\n}\n.tek-grid table tbody tr.footer td.zd-table-cell {\n font-weight: 700;\n}\n.tek-grid table tbody tr.summary {\n background: #eee;\n}\n.tek-grid table tbody tr.summary td.zd-table-cell {\n font-weight: 700;\n font-size: 15px;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header {\n font-weight: bold;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header .zd-table-group-two-plus-container {\n display: flex;\n height: 100%;\n align-items: center;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header .zd-table-group-two-plus-container .tek-grid-body-group-identation {\n top: unset;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header .zd-table-group-two-plus-container .tek-grid-body-group-identation :not(.first-group) {\n margin-left: 10px;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header .zd-table-group-two-plus-container .tek-grid-body-group-identation.first-group {\n width: 14px;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header .zd-table-group-two-plus-container .tek-grid-body-group-identation:not(.first-group) {\n top: unset;\n margin-left: 10px;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header .v-icon {\n font-size: 21px;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header .v-icon.closed {\n transform: rotate(-90deg);\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header .zd-table-group-container {\n position: sticky !important;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-group-header .zd-table-group-container .zd-table-group-text {\n vertical-align: middle;\n}\n.tek-grid table tbody tr td.zd-table-cell .zd-table-cell-aling-total {\n display: flex !important;\n position: relative;\n justify-content: start;\n align-items: center;\n left: 1.5rem;\n top: -50%;\n}\n.tek-grid table tbody tr td.zd-table-cell .zd-table-cell-aling-total:first-of-type {\n display: inline-block !important;\n top: 0;\n left: 0;\n}\n.tek-grid table tbody tr td.zd-table-cell .zd-table-cell-text {\n display: inline-block;\n vertical-align: middle;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-fixed-column {\n position: sticky !important;\n left: 0;\n z-index: 3;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-fixed-column.theme--light {\n background: #f7f7f7 !important;\n}\n.tek-grid table tbody tr td.zd-table-cell.zd-table-fixed-column.theme--dark {\n background: #3c3c3c !important;\n}\n.tek-grid table tbody tr.current td.zd-table-cell.zd-table-fixed-column {\n color: var(--v-primary-base) !important;\n}\n.tek-grid table .tek-grid-header-group-identation {\n width: 22px;\n display: inline-block;\n vertical-align: middle;\n}\n.tek-grid table .tek-grid-header-group-identation.first-group {\n width: 20px;\n}\n.tek-grid table .zd-table-two-plus-groups {\n display: flex !important;\n}\n.tek-grid table .zd-table-two-plus-groups .zd-table-cell-text {\n position: unset !important;\n}\n.tek-grid table .zd-table-two-plus-groups .tek-grid-body-group-identation {\n top: unset !important;\n}\n.tek-grid table .zd-table-two-plus-groups .tek-grid-body-group-identation:not(.first-group) {\n top: unset;\n margin-left: 10px;\n}\n.tek-grid table .tek-grid-body-group-identation {\n width: 8px;\n display: flex;\n position: relative;\n top: 10px;\n margin-left: 14px;\n height: 100%;\n border-left: solid 1px #ccc;\n}\n.tek-grid table .tek-grid-body-group-identation.first-group {\n width: 1rem;\n margin-left: 10px;\n}\n.tek-grid table .tek-grid-body-group-identation.group-footer {\n height: 60%;\n border-bottom: solid 1px #ccc;\n top: -25%;\n}\n.tek-grid table .tek-grid-body-group-identation.group-footer-no-line {\n border-left: none;\n}\n.tek-grid .zd-skeleton-table-cell .v-skeleton-loader__table-cell {\n height: auto;\n}\n.tekgrid-actions-dropdown > * {\n display: block;\n}\n.tek-grid-column-filter-menu {\n padding: 12px 12px 0 12px;\n max-height: 300px;\n}\n.tek-grid-column-filter-menu.theme--light {\n background: #fff;\n}\n.tek-grid-column-filter-menu.theme--dark {\n background: #1e1e1e;\n}\n.filter-helper-values-button {\n height: 24px !important;\n margin-left: 5px;\n margin-top: 0;\n}\n.filter-helper-values-button.with-label {\n margin-top: 20px;\n}\n.filter-helper-values-option {\n cursor: pointer;\n}\n.filter-helper-values-option:hover {\n background-color: rgba(0, 0, 0, 0.03);\n}", map: undefined, media: undefined });
7431
7457
 
7432
7458
  };
7433
7459
  /* scoped */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zeedhi/teknisa-components-vuetify",
3
- "version": "1.70.0",
3
+ "version": "1.72.0",
4
4
  "description": "Teknisa Components based on Vuetify",
5
5
  "author": "Zeedhi <zeedhi@teknisa.com>",
6
6
  "license": "ISC",
@@ -41,5 +41,5 @@
41
41
  "vue": "^2.6.12",
42
42
  "vuetify": "^2.4.0"
43
43
  },
44
- "gitHead": "ebfdf3564dd8af0beea9d7cc763d95b89a4f2e0f"
44
+ "gitHead": "5a282a068ea8f28bd216a27b4538b36a58235128"
45
45
  }
@@ -27,13 +27,13 @@ export default class TekGrid extends ZdTreeGridEditable {
27
27
  toolbarSlot: IComponentRender[];
28
28
  instance: TekTreeGridClass;
29
29
  instanceType: typeof TekTreeGridClass;
30
- private originalChangeLayout?;
30
+ private originalChangeTekGridLayout?;
31
31
  calcScrollData: (() => void) | undefined;
32
32
  scrollData: any;
33
33
  renderedData: any;
34
34
  mounted(): void;
35
35
  minimumColumnWidth(column?: TekGridColumn): number;
36
- private onChangeLayout;
36
+ private onChangeTekGridLayout;
37
37
  getFilterActivatorEvents(on: any, column: TekGridColumn): any;
38
38
  private debouncedDatasourceGet;
39
39
  getFilterItemChange(prop: keyof IDynamicFilterItem, column: TekGridColumn, index: number): (__3: IEventParam<Select>) => void;
@@ -43,6 +43,7 @@ export default class TekGrid extends ZdTreeGridEditable {
43
43
  getComponentType(index: number): "" | "ZdTextInput";
44
44
  getComponentHint(index: number): "" | "TEKGRID_MULTIPLE_VALUE_HINT";
45
45
  filterItemChange(prop: keyof IDynamicFilterItem, column: TekGridColumn, index: number, { component, event, element }: IEventParam<Select>): void;
46
+ orderColumnVisibility(): void;
46
47
  private defaultOperation;
47
48
  private defaultRelation;
48
49
  private lastFilter;