@zeedhi/teknisa-components-vuetify 1.39.0 → 1.40.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.
@@ -2,7 +2,7 @@ import { Modal, ModalService, Icons } from '@zeedhi/common';
2
2
  import { Prop, Component, Watch } from 'vue-property-decorator';
3
3
  import { BreadcrumbHeader, CardTitle, CrudButton, CrudAddButton, CrudCancelButton, CrudDeleteButton, CrudForm, CrudSaveButton, TekGrid as TekGrid$2, TekRestDatasource, TekMemoryDatasource, TekGridColumn, TekGridColumnsButton as TekGridColumnsButton$1, TekGridLayoutOptions as TekGridLayoutOptions$1, TekFilterHelper, Image, IterableCarousel, IterableComponentRender, Notifications, ProductCard, TekTreeGrid } from '@zeedhi/teknisa-components-common';
4
4
  import { ZdComponent, ZdComponentRender, components as components$1, ZdForm, ZdGrid, ZdIterableColumnsButton, ZdIterable } from '@zeedhi/vuetify';
5
- import { Metadata, Singleton, normalize, I18n, Loader } from '@zeedhi/core';
5
+ import { Metadata, Config, dayjs, Singleton, normalize, I18n, Loader } from '@zeedhi/core';
6
6
  import debounce from 'lodash.debounce';
7
7
  import Sortable from 'sortablejs';
8
8
  import cloneDeep from 'lodash.clonedeep';
@@ -201,7 +201,12 @@ var __vue_render__$f = function () {
201
201
  [
202
202
  _c(
203
203
  "zd-breadcrumbs",
204
- _vm._b({}, "zd-breadcrumbs", _vm.instance.breadcrumb, false)
204
+ _vm._b(
205
+ { attrs: { dark: _vm.instance.dark, light: _vm.instance.light } },
206
+ "zd-breadcrumbs",
207
+ _vm.instance.breadcrumb,
208
+ false
209
+ )
205
210
  ),
206
211
  _vm._v(" "),
207
212
  _c(
@@ -263,7 +268,7 @@ __vue_render__$f._withStripped = true;
263
268
  /* style */
264
269
  const __vue_inject_styles__$f = function (inject) {
265
270
  if (!inject) return
266
- inject("data-v-cb6f4dac_0", { source: ".tek-breadcrumb-header .tek-breadcrumb-header-title-col {\n display: flex;\n padding-top: 5px;\n padding-left: 0;\n}\n.tek-breadcrumb-header .tek-breadcrumb-header-title-col .tek-breadcrumb-header-slot-right {\n margin-left: auto;\n}\n.tek-breadcrumb-header .zd-breadcrumbs {\n padding: 0;\n font-size: var(--zd-font-body2-size);\n}\n.tek-breadcrumb-header .zd-breadcrumbs .v-breadcrumbs__item--disabled {\n color: #667080;\n}\n.tek-breadcrumb-header .zd-text {\n color: #667080;\n}\n.tek-breadcrumb-header .zd-text.tek-breadcrumb-header-title {\n font-size: 32px;\n font-weight: bold;\n line-height: 35px;\n margin-bottom: 10px;\n}\n.tek-breadcrumb-header .zd-text > p {\n margin: 0;\n}", map: undefined, media: undefined });
271
+ inject("data-v-53da1132_0", { source: ".tek-breadcrumb-header .tek-breadcrumb-header-title-col {\n display: flex;\n padding-top: 5px;\n padding-left: 0;\n}\n.tek-breadcrumb-header .tek-breadcrumb-header-title-col .tek-breadcrumb-header-slot-right {\n margin-left: auto;\n}\n.tek-breadcrumb-header .zd-breadcrumbs {\n padding: 0;\n font-size: var(--zd-font-body2-size);\n}\n.tek-breadcrumb-header .zd-breadcrumbs .v-breadcrumbs__item--disabled {\n color: #667080;\n}\n.tek-breadcrumb-header .zd-text {\n color: #667080;\n}\n.tek-breadcrumb-header .zd-text.tek-breadcrumb-header-title {\n font-size: 32px;\n font-weight: bold;\n line-height: 35px;\n margin-bottom: 10px;\n}\n.tek-breadcrumb-header .zd-text > p {\n margin: 0;\n}", map: undefined, media: undefined });
267
272
 
268
273
  };
269
274
  /* scoped */
@@ -1153,6 +1158,10 @@ let TekGrid$1 = class TekGrid extends ZdGridEditable {
1153
1158
  constructor() {
1154
1159
  super(...arguments);
1155
1160
  this.instanceType = TekGrid$2;
1161
+ /**
1162
+ * Left distance for each column
1163
+ */
1164
+ this.fixedLeft = {};
1156
1165
  this.debouncedDatasourceGet = debounce((instance) => {
1157
1166
  if (instance.events.beforeApplyFilter) {
1158
1167
  instance.events.beforeApplyFilter({ component: instance });
@@ -1199,7 +1208,7 @@ let TekGrid$1 = class TekGrid extends ZdGridEditable {
1199
1208
  // do nothing
1200
1209
  }
1201
1210
  }
1202
- this.updateFixedColumns();
1211
+ setTimeout(this.updateFixedColumns);
1203
1212
  }
1204
1213
  getFilterActivatorEvents(on, column) {
1205
1214
  const events = {};
@@ -1217,16 +1226,18 @@ let TekGrid$1 = class TekGrid extends ZdGridEditable {
1217
1226
  return this.filterItemChange.bind(this, prop, column, index);
1218
1227
  }
1219
1228
  getFilterValueChange(column, index) {
1220
- return this.filterValueChange.bind(this, column, index);
1229
+ return debounce(this.filterValueChange.bind(this, column, index), 1000);
1230
+ }
1231
+ isOperationArrayValues(operation) {
1232
+ return ['IN', 'NOT_IN', 'BETWEEN'].includes(operation);
1221
1233
  }
1222
1234
  getComponentType(index) {
1223
- this.operationList.split(';');
1224
1235
  const operationListArray = this.operationList.split(';');
1225
- return ['IN', 'NOT_IN', 'BETWEEN'].includes(operationListArray[index]) ? 'ZdTextInput' : '';
1236
+ return this.isOperationArrayValues(operationListArray[index]) ? 'ZdTextInput' : '';
1226
1237
  }
1227
1238
  getComponentHint(index) {
1228
1239
  const operationListArray = this.operationList.split(';');
1229
- return ['IN', 'NOT_IN', 'BETWEEN'].includes(operationListArray[index]) ? 'TEKGRID_MULTIPLE_VALUE_HINT' : '';
1240
+ return this.isOperationArrayValues(operationListArray[index]) ? 'TEKGRID_MULTIPLE_VALUE_HINT' : '';
1230
1241
  }
1231
1242
  filterItemChange(prop, column, index, { component, event, element }) {
1232
1243
  const { name } = component;
@@ -1247,6 +1258,15 @@ let TekGrid$1 = class TekGrid extends ZdGridEditable {
1247
1258
  if (datasource instanceof TekRestDatasource || datasource instanceof TekMemoryDatasource) {
1248
1259
  if (datasource.dynamicFilter[column.name] && datasource.dynamicFilter[column.name][index]) {
1249
1260
  this.lastFilter = JSON.stringify(datasource.dynamicFilter);
1261
+ const { value } = datasource.dynamicFilter[column.name][index];
1262
+ if (prop === 'operation') {
1263
+ if (this.isOperationArrayValues(component.value) && !Array.isArray(value)) {
1264
+ datasource.dynamicFilter[column.name][index].value = [value];
1265
+ }
1266
+ if (!this.isOperationArrayValues(component.value) && Array.isArray(value)) {
1267
+ [datasource.dynamicFilter[column.name][index].value] = value;
1268
+ }
1269
+ }
1250
1270
  datasource.dynamicFilter[column.name][index][prop] = component.value;
1251
1271
  if (this.lastFilter !== JSON.stringify(datasource.dynamicFilter)) {
1252
1272
  this.debouncedDatasourceGet(this.instance);
@@ -1255,8 +1275,31 @@ let TekGrid$1 = class TekGrid extends ZdGridEditable {
1255
1275
  }
1256
1276
  }
1257
1277
  }
1278
+ convertToDateFormat(column, value, revert) {
1279
+ const dateFormat = column.componentProps.dateFormat || Config.dateFormat;
1280
+ const displayFormat = column.componentProps.displayFormat || Config.displayFormat;
1281
+ if (revert) {
1282
+ if (dayjs(value, displayFormat).isValid() || !dayjs(value, dateFormat).isValid()) {
1283
+ return value;
1284
+ }
1285
+ return dayjs(value, dateFormat).format(displayFormat);
1286
+ }
1287
+ if (dayjs(value, dateFormat).isValid() || !dayjs(value, displayFormat).isValid()) {
1288
+ return value;
1289
+ }
1290
+ return dayjs(value, displayFormat).format(dateFormat);
1291
+ }
1292
+ checkDateValueFormat(column, value, revert = false) {
1293
+ if (['ZdDate', 'ZdDateRange'].includes(column.componentProps.component)) {
1294
+ if (Array.isArray(value)) {
1295
+ return value.map((item) => this.convertToDateFormat(column, item, revert));
1296
+ }
1297
+ return this.convertToDateFormat(column, value, revert);
1298
+ }
1299
+ return value;
1300
+ }
1258
1301
  filterValueChange(column, index, { component, event, element }) {
1259
- const { value } = component;
1302
+ let { value } = component;
1260
1303
  const { datasource } = this.instance;
1261
1304
  if (!(element === null || element === void 0 ? void 0 : element.offsetParent))
1262
1305
  return;
@@ -1280,6 +1323,10 @@ let TekGrid$1 = class TekGrid extends ZdGridEditable {
1280
1323
  const operationSelectName = name.replace('-filter-value-', '-filter-operation-');
1281
1324
  const operationSelect = Metadata.getInstance(operationSelectName);
1282
1325
  const operation = operationSelect.value;
1326
+ if (this.isOperationArrayValues(operation)) {
1327
+ value = value.split(';');
1328
+ }
1329
+ value = this.checkDateValueFormat(column, value);
1283
1330
  datasource.dynamicFilter[column.name].push({
1284
1331
  relation,
1285
1332
  operation,
@@ -1287,6 +1334,10 @@ let TekGrid$1 = class TekGrid extends ZdGridEditable {
1287
1334
  });
1288
1335
  }
1289
1336
  else {
1337
+ if (this.isOperationArrayValues(datasource.dynamicFilter[column.name][index].operation)) {
1338
+ value = value.split(';');
1339
+ }
1340
+ value = this.checkDateValueFormat(column, value);
1290
1341
  datasource.dynamicFilter[column.name][index].value = value;
1291
1342
  }
1292
1343
  }
@@ -1339,7 +1390,12 @@ let TekGrid$1 = class TekGrid extends ZdGridEditable {
1339
1390
  const dynamicFilter = datasource.dynamicFilter[column.name];
1340
1391
  if (dynamicFilter && dynamicFilter.length > 0) {
1341
1392
  dynamicFilter.forEach((item) => {
1342
- filterOptions.push(item);
1393
+ let { value } = item;
1394
+ if (this.isOperationArrayValues(item.operation) && Array.isArray(value)) {
1395
+ value = this.checkDateValueFormat(column, value, true);
1396
+ value = value.join(';');
1397
+ }
1398
+ filterOptions.push(Object.assign(Object.assign({}, item), { value }));
1343
1399
  });
1344
1400
  }
1345
1401
  filterOptions.push({
@@ -1415,18 +1471,11 @@ let TekGrid$1 = class TekGrid extends ZdGridEditable {
1415
1471
  const name = column.getAttribute('column-name');
1416
1472
  if (name && column.classList.contains('zd-table-fixed-column')) {
1417
1473
  column.style.left = `${left}px`;
1474
+ this.$set(this.fixedLeft, name, column.style.left);
1418
1475
  left += column.clientWidth;
1419
1476
  }
1420
1477
  });
1421
1478
  }
1422
- getFixedLeft(column) {
1423
- if (!column.fixed)
1424
- return 'unset';
1425
- const headerElement = this.$refs[`column-${column.name}`];
1426
- if (!headerElement)
1427
- return 'unset';
1428
- return headerElement[0].style.left;
1429
- }
1430
1479
  isGroupSelected(item) {
1431
1480
  return item.children.every((child) => {
1432
1481
  const { uniqueKey } = this.instance.datasource;
@@ -1477,6 +1526,22 @@ let TekGrid$1 = class TekGrid extends ZdGridEditable {
1477
1526
  this.instance.selectedRows = this.instance.datasource.data;
1478
1527
  }
1479
1528
  }
1529
+ get headers() {
1530
+ this.$nextTick(() => {
1531
+ if (this.$el)
1532
+ this.updateFixedColumns();
1533
+ });
1534
+ return this.instance.columns;
1535
+ }
1536
+ getColumnsDOMOrder() {
1537
+ return this.orderHeaders(this.instance.columns);
1538
+ }
1539
+ resizeMouseMoveHandler(event) {
1540
+ this.superMethods(ZdGrid).resizeMouseMoveHandler.call(this, event);
1541
+ if (this.resizeColumn.fixed) {
1542
+ this.$nextTick(this.updateFixedColumns);
1543
+ }
1544
+ }
1480
1545
  };
1481
1546
  __decorate([
1482
1547
  Prop({ type: [String], default: '' }),
@@ -1589,7 +1654,7 @@ var __vue_render__$8 = function () {
1589
1654
  "hide-default-header": "",
1590
1655
  "hide-default-footer": "",
1591
1656
  name: _vm.instance.name,
1592
- headers: _vm.instance.columns,
1657
+ headers: _vm.headers,
1593
1658
  height: _vm.instance.height,
1594
1659
  items: _vm.getData(),
1595
1660
  search: _vm.instance.datasource.search,
@@ -1597,6 +1662,8 @@ var __vue_render__$8 = function () {
1597
1662
  dense: _vm.instance.dense,
1598
1663
  loading: _vm.instance.datasource.loading,
1599
1664
  "item-key": _vm.instance.datasource.uniqueKey,
1665
+ dark: _vm.instance.dark,
1666
+ light: _vm.instance.light,
1600
1667
  "disable-sort": "",
1601
1668
  "disable-filtering": "",
1602
1669
  tabindex: "0",
@@ -1649,8 +1716,22 @@ var __vue_render__$8 = function () {
1649
1716
  ? _c(
1650
1717
  "th",
1651
1718
  {
1652
- staticClass:
1653
- "zd-table-cell selectable zd-table-fixed-column",
1719
+ class: [
1720
+ "zd-table-cell",
1721
+ "selectable",
1722
+ "zd-table-fixed-column",
1723
+ {
1724
+ "theme--dark":
1725
+ (_vm.$vuetify.theme.dark &&
1726
+ !_vm.instance.light) ||
1727
+ _vm.instance.dark,
1728
+ },
1729
+ {
1730
+ "theme--light":
1731
+ !_vm.$vuetify.theme.dark ||
1732
+ _vm.instance.light,
1733
+ },
1734
+ ],
1654
1735
  style:
1655
1736
  "background-color: " +
1656
1737
  _vm.instance.headerBackground,
@@ -1712,9 +1793,22 @@ var __vue_render__$8 = function () {
1712
1793
  sortable:
1713
1794
  column.sortable &&
1714
1795
  !_vm.instance.editing,
1715
- sortHandle: _vm.instance.dragColumns,
1796
+ sortHandle:
1797
+ !column.fixed &&
1798
+ _vm.instance.dragColumns,
1716
1799
  "zd-table-fixed-column": column.fixed,
1717
1800
  },
1801
+ {
1802
+ "theme--dark":
1803
+ (_vm.$vuetify.theme.dark &&
1804
+ !_vm.instance.light) ||
1805
+ _vm.instance.dark,
1806
+ },
1807
+ {
1808
+ "theme--light":
1809
+ !_vm.$vuetify.theme.dark ||
1810
+ _vm.instance.light,
1811
+ },
1718
1812
  "text-" + column.align,
1719
1813
  _vm.instance.datasource.getOrderByColumn(
1720
1814
  column.name
@@ -2233,6 +2327,11 @@ var __vue_render__$8 = function () {
2233
2327
  column,
2234
2328
  filterIndex
2235
2329
  ),
2330
+ change:
2331
+ _vm.getFilterValueChange(
2332
+ column,
2333
+ filterIndex
2334
+ ),
2236
2335
  },
2237
2336
  }
2238
2337
  ),
@@ -2352,8 +2451,22 @@ var __vue_render__$8 = function () {
2352
2451
  ? _c(
2353
2452
  "td",
2354
2453
  {
2355
- staticClass:
2356
- "zd-table-cell selectable zd-table-fixed-column",
2454
+ class: [
2455
+ "zd-table-cell",
2456
+ "selectable",
2457
+ "zd-table-fixed-column",
2458
+ {
2459
+ "theme--dark":
2460
+ (_vm.$vuetify.theme.dark &&
2461
+ !_vm.instance.light) ||
2462
+ _vm.instance.dark,
2463
+ },
2464
+ {
2465
+ "theme--light":
2466
+ !_vm.$vuetify.theme.dark ||
2467
+ _vm.instance.light,
2468
+ },
2469
+ ],
2357
2470
  },
2358
2471
  [
2359
2472
  _c("v-checkbox", {
@@ -2388,8 +2501,23 @@ var __vue_render__$8 = function () {
2388
2501
  _c(
2389
2502
  "td",
2390
2503
  {
2391
- staticClass:
2392
- "zd-table-cell text-left zd-table-group-header zd-table-fixed-column",
2504
+ class: [
2505
+ "zd-table-cell",
2506
+ "text-left",
2507
+ "zd-table-group-header",
2508
+ "zd-table-fixed-column",
2509
+ {
2510
+ "theme--dark":
2511
+ (_vm.$vuetify.theme.dark &&
2512
+ !_vm.instance.light) ||
2513
+ _vm.instance.dark,
2514
+ },
2515
+ {
2516
+ "theme--light":
2517
+ !_vm.$vuetify.theme.dark ||
2518
+ _vm.instance.light,
2519
+ },
2520
+ ],
2393
2521
  style:
2394
2522
  "left: " +
2395
2523
  (_vm.instance.selectable ? 40 : 0) +
@@ -2466,6 +2594,12 @@ var __vue_render__$8 = function () {
2466
2594
  current: _vm.isCurrentRow(item),
2467
2595
  footer: item.groupFooter,
2468
2596
  summary: item.groupSummary,
2597
+ "theme--dark":
2598
+ (_vm.$vuetify.theme.dark &&
2599
+ !_vm.instance.light) ||
2600
+ _vm.instance.dark,
2601
+ "theme--light":
2602
+ !_vm.$vuetify.theme.dark || _vm.instance.light,
2469
2603
  },
2470
2604
  on: {
2471
2605
  click: function ($event) {
@@ -2478,8 +2612,22 @@ var __vue_render__$8 = function () {
2478
2612
  ? _c(
2479
2613
  "td",
2480
2614
  {
2481
- staticClass:
2482
- "zd-table-cell selectable zd-table-fixed-column",
2615
+ class: [
2616
+ "zd-table-cell",
2617
+ "selectable",
2618
+ "zd-table-fixed-column",
2619
+ {
2620
+ "theme--dark":
2621
+ (_vm.$vuetify.theme.dark &&
2622
+ !_vm.instance.light) ||
2623
+ _vm.instance.dark,
2624
+ },
2625
+ {
2626
+ "theme--light":
2627
+ !_vm.$vuetify.theme.dark ||
2628
+ _vm.instance.light,
2629
+ },
2630
+ ],
2483
2631
  },
2484
2632
  [
2485
2633
  _c("v-checkbox", {
@@ -2560,6 +2708,19 @@ var __vue_render__$8 = function () {
2560
2708
  "zd-table-fixed-column":
2561
2709
  column.fixed,
2562
2710
  },
2711
+ {
2712
+ "theme--dark":
2713
+ (_vm.$vuetify.theme
2714
+ .dark &&
2715
+ !_vm.instance.light) ||
2716
+ _vm.instance.dark,
2717
+ },
2718
+ {
2719
+ "theme--light":
2720
+ !_vm.$vuetify.theme
2721
+ .dark ||
2722
+ _vm.instance.light,
2723
+ },
2563
2724
  ],
2564
2725
  style: [
2565
2726
  Object.assign(
@@ -2573,9 +2734,11 @@ var __vue_render__$8 = function () {
2573
2734
  cellProps
2574
2735
  ).cssStyle,
2575
2736
  {
2576
- left: _vm.getFixedLeft(
2577
- column
2578
- ),
2737
+ left: column.fixed
2738
+ ? _vm.fixedLeft[
2739
+ column.name
2740
+ ]
2741
+ : "unset",
2579
2742
  },
2580
2743
  ],
2581
2744
  on: {
@@ -3051,7 +3214,7 @@ __vue_render__$8._withStripped = true;
3051
3214
  /* style */
3052
3215
  const __vue_inject_styles__$8 = function (inject) {
3053
3216
  if (!inject) return
3054
- inject("data-v-7c368a9c_0", { source: ".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}\n.tek-grid table thead tr th {\n padding-right: 15px !important;\n}\n.tek-grid table thead tr th.zd-table-fixed-column {\n position: sticky !important;\n left: 0;\n z-index: 4;\n background: #f7f7f7 !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 {\n background: #f6f6f6;\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-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 background: #f7f7f7 !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: inline-block;\n vertical-align: middle;\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: 10px;\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 position: relative;\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 background: white;\n padding: 12px 12px 0 12px;\n max-height: 300px;\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 });
3217
+ inject("data-v-566cdbe4_0", { source: ".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}\n.tek-grid table thead tr th {\n padding-right: 15px !important;\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-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: inline-block;\n vertical-align: middle;\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: 10px;\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 position: relative;\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 });
3055
3218
 
3056
3219
  };
3057
3220
  /* scoped */
@@ -4314,7 +4477,7 @@ __vue_render__$7._withStripped = true;
4314
4477
  /* style */
4315
4478
  const __vue_inject_styles__$7 = function (inject) {
4316
4479
  if (!inject) return
4317
- inject("data-v-6c9f5d6a_0", { source: ".tek-grid-columns-button-options {\n max-height: 250px;\n display: flex;\n flex-direction: column;\n}\n.tek-grid-columns-button-options .tek-grid-columns-button-table-wrapper {\n flex: 1;\n overflow-y: auto;\n}\n.tek-grid-columns-button-options .tek-grid-columns-button-table-wrapper .tek-grid-columns-button-table {\n padding: 0 var(--spacing-2) var(--spacing-2) var(--spacing-2);\n background-color: white;\n font-size: 13px;\n border-spacing: 0;\n width: 100%;\n}\n.tek-grid-columns-button-options .tek-grid-columns-button-table-wrapper .tek-grid-columns-button-table thead tr th {\n padding: var(--spacing-2) var(--spacing-2) var(--spacing-1) var(--spacing-2);\n white-space: nowrap;\n text-align: left;\n background: white;\n position: sticky;\n top: 0;\n z-index: 10;\n}\n.tek-grid-columns-button-options .tek-grid-columns-button-table-wrapper .tek-grid-columns-button-table tbody tr td {\n padding: var(--spacing-1) var(--spacing-2);\n white-space: nowrap;\n}\n.tek-grid-columns-button-options .tek-grid-columns-button-table-wrapper .tek-grid-columns-button-table tbody tr td.tek-grid-columns-button-column-name {\n cursor: -webkit-grab;\n}\n.tek-grid-columns-button-options .tek-grid-columns-button-table-wrapper .tek-grid-columns-button-table tbody tr td.tek-grid-columns-button-column-name > span {\n padding-right: 4px;\n}\n.tek-grid-columns-button-options .tek-grid-columns-button-table-wrapper .tek-grid-columns-button-table tbody tr td.tek-grid-columns-button-column-aggregation {\n max-width: 150px;\n}\n.tek-grid-columns-button-options .tek-grid-columns-button-table-footer {\n display: flex;\n background: white;\n}\n.tek-grid-columns-button-options .tek-grid-columns-button-table-footer .zd-button {\n flex: 1;\n}\n.tek-grid-columns-button-sortable-drag {\n background: white;\n}\n.tek-grid-column-option-box {\n margin: var(--spacing-1);\n background: #ccc;\n padding: 2px var(--spacing-1);\n cursor: pointer;\n}\n.tek-grid-column-option-box > * {\n display: inline-block;\n}\n.tek-grid-column-option-box > .zd-icon {\n font-size: 0.9rem;\n margin-left: var(--spacing-2);\n}\n.tek-grid-column-option-box.tek-grid-column-option-grouped-true {\n cursor: default;\n background: #fafafa;\n}\n.tek-grid-column-option-box.tek-grid-column-option-grouped-true > .zd-icon {\n display: none;\n}\n.tek-grid-column-option-box.tek-grid-column-option-selected-true {\n background: var(--v-primary-base);\n color: white;\n}\n.tek-grid-column-option-box.tek-grid-column-option-selected-true > .zd-icon {\n color: white;\n}\n.tek-grid-column-option-container-col {\n position: relative;\n}\n.tek-grid-column-option-container-col .tek-grid-column-option-container {\n background: #eee;\n padding: var(--spacing-1);\n max-height: 100px;\n min-height: 42px;\n align-content: center;\n position: relative;\n}\n.tek-grid-column-option-container-col .tek-grid-column-option-container .tek-iterable-footer {\n display: none !important;\n}\n.tek-grid-column-option-container-col .tek-grid-column-option-container .zd-text.no-data {\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n text-align: center;\n font-size: 0.7rem;\n}\n.tek-grid-column-option-container-col .tek-grid-column-option-label {\n font-weight: var(--zd-font-body2-weight);\n}\n.tek-grid-column-option-container-col .tek-grid-column-option-select-all {\n position: absolute;\n top: 0.5rem;\n right: var(--spacing-1);\n color: var(--v-primary-base);\n cursor: pointer;\n font-size: 0.8rem;\n}\n.tek-grid-column-option-container-col .tek-grid-column-option-drop-here {\n position: absolute;\n z-index: 100;\n left: 50%;\n transform: translateX(-50%);\n top: 35px;\n}\n.tek-grid-column-option-detail-name {\n color: var(--v-primary-base);\n font-weight: var(--zd-font-body2-weight);\n font-size: 1.1rem;\n margin-top: var(--spacing-6);\n}", map: undefined, media: undefined });
4480
+ inject("data-v-6e194912_0", { source: ".tek-grid-columns-button-options {\n max-height: 250px;\n display: flex;\n flex-direction: column;\n background-color: #fff;\n}\n.tek-grid-columns-button-options.theme--dark {\n background-color: #1e1e1e;\n}\n.tek-grid-columns-button-options .tek-grid-columns-button-table-wrapper {\n flex: 1;\n overflow-y: auto;\n}\n.tek-grid-columns-button-options .tek-grid-columns-button-table-wrapper .tek-grid-columns-button-table {\n padding: 0 var(--spacing-2) var(--spacing-2) var(--spacing-2);\n font-size: 13px;\n border-spacing: 0;\n width: 100%;\n}\n.tek-grid-columns-button-options .tek-grid-columns-button-table-wrapper .tek-grid-columns-button-table thead tr th {\n padding: var(--spacing-2) var(--spacing-2) var(--spacing-1) var(--spacing-2);\n white-space: nowrap;\n text-align: left;\n position: sticky;\n top: 0;\n z-index: 10;\n}\n.tek-grid-columns-button-options .tek-grid-columns-button-table-wrapper .tek-grid-columns-button-table tbody tr td {\n padding: var(--spacing-1) var(--spacing-2);\n white-space: nowrap;\n}\n.tek-grid-columns-button-options .tek-grid-columns-button-table-wrapper .tek-grid-columns-button-table tbody tr td.tek-grid-columns-button-column-name {\n cursor: -webkit-grab;\n}\n.tek-grid-columns-button-options .tek-grid-columns-button-table-wrapper .tek-grid-columns-button-table tbody tr td.tek-grid-columns-button-column-name > span {\n padding-right: 4px;\n}\n.tek-grid-columns-button-options .tek-grid-columns-button-table-wrapper .tek-grid-columns-button-table tbody tr td.tek-grid-columns-button-column-aggregation {\n max-width: 150px;\n}\n.tek-grid-columns-button-options .tek-grid-columns-button-table-footer {\n display: flex;\n}\n.tek-grid-columns-button-options .tek-grid-columns-button-table-footer .zd-button {\n flex: 1;\n}\n.tek-grid-columns-button-sortable-drag {\n background: white;\n}\n.tek-grid-column-option-box {\n margin: var(--spacing-1);\n background: #ccc;\n padding: 2px var(--spacing-1);\n cursor: pointer;\n}\n.tek-grid-column-option-box > * {\n display: inline-block;\n}\n.tek-grid-column-option-box > .zd-icon {\n font-size: 0.9rem;\n margin-left: var(--spacing-2);\n}\n.tek-grid-column-option-box.tek-grid-column-option-grouped-true {\n cursor: default;\n background: #fafafa;\n}\n.tek-grid-column-option-box.tek-grid-column-option-grouped-true > .zd-icon {\n display: none;\n}\n.tek-grid-column-option-box.tek-grid-column-option-selected-true {\n background: var(--v-primary-base);\n color: white;\n}\n.tek-grid-column-option-box.tek-grid-column-option-selected-true > .zd-icon {\n color: white;\n}\n.tek-grid-column-option-container-col {\n position: relative;\n}\n.tek-grid-column-option-container-col .tek-grid-column-option-container {\n background: #eee;\n padding: var(--spacing-1);\n max-height: 100px;\n min-height: 42px;\n align-content: center;\n position: relative;\n}\n.tek-grid-column-option-container-col .tek-grid-column-option-container .tek-iterable-footer {\n display: none !important;\n}\n.tek-grid-column-option-container-col .tek-grid-column-option-container .zd-text.no-data {\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n text-align: center;\n font-size: 0.7rem;\n}\n.tek-grid-column-option-container-col .tek-grid-column-option-label {\n font-weight: var(--zd-font-body2-weight);\n}\n.tek-grid-column-option-container-col .tek-grid-column-option-select-all {\n position: absolute;\n top: 0.5rem;\n right: var(--spacing-1);\n color: var(--v-primary-base);\n cursor: pointer;\n font-size: 0.8rem;\n}\n.tek-grid-column-option-container-col .tek-grid-column-option-drop-here {\n position: absolute;\n z-index: 100;\n left: 50%;\n transform: translateX(-50%);\n top: 35px;\n}\n.tek-grid-column-option-detail-name {\n color: var(--v-primary-base);\n font-weight: var(--zd-font-body2-weight);\n font-size: 1.1rem;\n margin-top: var(--spacing-6);\n}", map: undefined, media: undefined });
4318
4481
 
4319
4482
  };
4320
4483
  /* scoped */
@@ -4459,26 +4622,26 @@ let TekGridLayoutOptions = class TekGridLayoutOptions extends ZdComponentRender
4459
4622
  Object.keys(filter).forEach((columnName) => {
4460
4623
  const filterOptions = filter[columnName];
4461
4624
  const column = columns[columns.findIndex((col) => col.name === columnName)];
4462
- const { filterDynamicValue } = column;
4625
+ const { filterHelperValue } = column;
4463
4626
  filterOptions.forEach((item) => {
4464
- let dynamicValue = '';
4465
- if (!Array.isArray(filterDynamicValue)) {
4466
- dynamicValue = filterDynamicValue;
4627
+ if (['IN', 'NOT_IN', 'BETWEEN'].includes(item.operation) && !Array.isArray(item.value)) {
4628
+ item.value = item.value.split(';');
4629
+ }
4630
+ let helperValue = '';
4631
+ if (!Array.isArray(filterHelperValue)) {
4632
+ helperValue = filterHelperValue;
4467
4633
  }
4468
4634
  else {
4469
- Object.keys(filterDynamicValue).forEach((key) => {
4470
- const value = filterDynamicValue[key] || '';
4635
+ Object.keys(filterHelperValue).forEach((key) => {
4636
+ const value = filterHelperValue[key] || '';
4471
4637
  if (`${item.relation || 'AND'}-${item.operation || 'CONTAINS'}` === key) {
4472
- dynamicValue = value;
4638
+ helperValue = value;
4473
4639
  }
4474
4640
  });
4475
4641
  }
4476
- if (dynamicValue) {
4642
+ if (helperValue) {
4477
4643
  const columnObj = this.instance.grid.getColumn(column.name);
4478
- item.value = TekFilterHelper.getValue(dynamicValue, columnObj);
4479
- if (Array.isArray(item.value)) {
4480
- item.value = item.value.join(';');
4481
- }
4644
+ item.value = TekFilterHelper.getValue(helperValue, columnObj);
4482
4645
  }
4483
4646
  });
4484
4647
  });
@@ -4720,7 +4883,10 @@ var __vue_render__$6 = function () {
4720
4883
  _vm._b(
4721
4884
  {
4722
4885
  attrs: {
4723
- name: "tek-grid-layout-item-update_" + item,
4886
+ name:
4887
+ "tek-grid-layout-item-update_" +
4888
+ _vm.instance.name +
4889
+ item,
4724
4890
  },
4725
4891
  },
4726
4892
  "zd-button",
@@ -4744,7 +4910,10 @@ var __vue_render__$6 = function () {
4744
4910
  _vm._b(
4745
4911
  {
4746
4912
  attrs: {
4747
- name: "tek-grid-layout-item-delete_" + item,
4913
+ name:
4914
+ "tek-grid-layout-item-delete_" +
4915
+ _vm.instance.name +
4916
+ item,
4748
4917
  },
4749
4918
  },
4750
4919
  "zd-button",
@@ -4781,7 +4950,7 @@ __vue_render__$6._withStripped = true;
4781
4950
  /* style */
4782
4951
  const __vue_inject_styles__$6 = function (inject) {
4783
4952
  if (!inject) return
4784
- inject("data-v-29ce02fa_0", { source: ".tek-grid-layout-options-badge .v-badge__badge {\n font-size: var(--zd-font-caption-size);\n font-weight: var(--zd-font-caption-weight);\n line-height: 14px;\n pointer-events: none;\n background-color: var(--zd-badge-background-color) !important;\n}\n.tek-grid-layout-options-badge .v-badge__badge span {\n color: var(--zd-badge-text-color) !important;\n}\n.tek-grid-layout-item {\n font-size: 13px;\n cursor: pointer;\n min-height: 30px;\n}\n.tek-grid-layout-item.selected {\n font-weight: 700;\n}\n.tek-grid-layout-item:hover {\n background: #eee;\n}\n.tek-grid-layout-item:hover .tek-grid-layout-item-buttons {\n display: inherit;\n}\n.tek-grid-layout-item .tek-grid-layout-item-buttons {\n display: none;\n position: absolute;\n right: 5px;\n}\n.tek-grid-layout-item .tek-grid-layout-item-buttons .v-icon {\n font-size: 12px;\n}", map: undefined, media: undefined });
4953
+ inject("data-v-273eb432_0", { source: ".tek-grid-layout-options-badge .v-badge__badge {\n font-size: var(--zd-font-caption-size);\n font-weight: var(--zd-font-caption-weight);\n line-height: 14px;\n pointer-events: none;\n background-color: var(--zd-badge-background-color) !important;\n}\n.tek-grid-layout-options-badge .v-badge__badge span {\n color: var(--zd-badge-text-color) !important;\n}\n.tek-grid-layout-item {\n font-size: 13px;\n cursor: pointer;\n min-height: 30px;\n}\n.tek-grid-layout-item.selected {\n font-weight: 700;\n}\n.tek-grid-layout-item:hover.theme--light {\n background: #eee;\n}\n.tek-grid-layout-item:hover .tek-grid-layout-item-buttons {\n display: inherit;\n}\n.tek-grid-layout-item .tek-grid-layout-item-buttons {\n display: none;\n position: absolute;\n right: 5px;\n}\n.tek-grid-layout-item .tek-grid-layout-item-buttons .v-icon {\n font-size: 12px;\n}", map: undefined, media: undefined });
4785
4954
 
4786
4955
  };
4787
4956
  /* scoped */
@@ -5499,6 +5668,12 @@ var __vue_render__$1 = function () {
5499
5668
  class: [
5500
5669
  "tek-product-card",
5501
5670
  { "tek-product-card--link": _vm.instance.events.click },
5671
+ {
5672
+ "theme--dark":
5673
+ (_vm.$vuetify.theme.dark && !_vm.instance.light) ||
5674
+ _vm.instance.dark,
5675
+ },
5676
+ { "theme--light": !_vm.$vuetify.theme.dark || _vm.instance.light },
5502
5677
  _vm.instance.cssClass,
5503
5678
  ],
5504
5679
  style: { width: _vm.instance.width },
@@ -5514,6 +5689,8 @@ var __vue_render__$1 = function () {
5514
5689
  {
5515
5690
  attrs: {
5516
5691
  name: _vm.instance.name,
5692
+ dark: _vm.instance.dark,
5693
+ light: _vm.instance.light,
5517
5694
  elevation: 2,
5518
5695
  to: _vm.instance.to,
5519
5696
  },
@@ -5614,7 +5791,7 @@ __vue_render__$1._withStripped = true;
5614
5791
  /* style */
5615
5792
  const __vue_inject_styles__$1 = function (inject) {
5616
5793
  if (!inject) return
5617
- inject("data-v-541eabd6_0", { source: ".tek-product-card * {\n text-decoration: none;\n}\n.tek-product-card .v-card {\n padding: 0%;\n}\n.tek-product-card .v-card .tek-image-content {\n text-align: center;\n}\n.tek-product-card .v-card .tek-product-card-image-container {\n position: relative;\n}\n.tek-product-card .v-card .tek-product-card-info {\n display: flex;\n flex-direction: column;\n padding: 5px 10px 10px 10px;\n color: var(--zd-font-color);\n}\n.tek-product-card .v-card .tek-product-card-info .tek-product-card-title {\n white-space: nowrap;\n width: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n font-size: 16px;\n line-height: 19px;\n}\n.tek-product-card .v-card .tek-product-card-info .tek-product-card-supplier {\n font-size: var(--zd-font-body2-size);\n line-height: 14px;\n color: #c4c4c4;\n}\n.tek-product-card .v-card .tek-product-card-info .tek-product-card-footer {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding-top: 10px;\n}\n.tek-product-card .v-card .tek-product-card-info .tek-product-card-footer .tek-product-card-brand {\n font-size: var(--zd-font-body2-size);\n line-height: 14px;\n}\n.tek-product-card .v-card .tek-product-card-info .tek-product-card-footer .tek-product-card-price {\n font-weight: var(--zd-font-body4-weight);\n font-size: var(--zd-font-body4-size);\n line-height: 16px;\n}\n.tek-product-card--link .v-card {\n cursor: pointer;\n}", map: undefined, media: undefined });
5794
+ inject("data-v-6e1fe58c_0", { source: ".tek-product-card * {\n text-decoration: none;\n}\n.tek-product-card .v-card {\n padding: 0%;\n}\n.tek-product-card .v-card .tek-image-content {\n text-align: center;\n}\n.tek-product-card .v-card .tek-product-card-image-container {\n position: relative;\n}\n.tek-product-card .v-card .tek-product-card-info {\n display: flex;\n flex-direction: column;\n padding: 5px 10px 10px 10px;\n color: var(--zd-font-color);\n}\n.tek-product-card .v-card .tek-product-card-info .tek-product-card-title {\n white-space: nowrap;\n width: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n font-size: 16px;\n line-height: 19px;\n}\n.tek-product-card .v-card .tek-product-card-info .tek-product-card-supplier {\n font-size: var(--zd-font-body2-size);\n line-height: 14px;\n color: #c4c4c4;\n}\n.tek-product-card .v-card .tek-product-card-info .tek-product-card-footer {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding-top: 10px;\n}\n.tek-product-card .v-card .tek-product-card-info .tek-product-card-footer .tek-product-card-brand {\n font-size: var(--zd-font-body2-size);\n line-height: 14px;\n}\n.tek-product-card .v-card .tek-product-card-info .tek-product-card-footer .tek-product-card-price {\n font-weight: var(--zd-font-body4-weight);\n font-size: var(--zd-font-body4-size);\n line-height: 16px;\n}\n.tek-product-card--link .v-card {\n cursor: pointer;\n}", map: undefined, media: undefined });
5618
5795
 
5619
5796
  };
5620
5797
  /* scoped */
@@ -5713,16 +5890,18 @@ let TekGrid = class TekGrid extends ZdTreeGridEditable {
5713
5890
  return this.filterItemChange.bind(this, prop, column, index);
5714
5891
  }
5715
5892
  getFilterValueChange(column, index) {
5716
- return this.filterValueChange.bind(this, column, index);
5893
+ return debounce(this.filterValueChange.bind(this, column, index), 1000);
5894
+ }
5895
+ isOperationArrayValues(operation) {
5896
+ return ['IN', 'NOT_IN', 'BETWEEN'].includes(operation);
5717
5897
  }
5718
5898
  getComponentType(index) {
5719
- this.operationList.split(';');
5720
5899
  const operationListArray = this.operationList.split(';');
5721
- return ['IN', 'NOT_IN', 'BETWEEN'].includes(operationListArray[index]) ? 'ZdTextInput' : '';
5900
+ return this.isOperationArrayValues(operationListArray[index]) ? 'ZdTextInput' : '';
5722
5901
  }
5723
5902
  getComponentHint(index) {
5724
5903
  const operationListArray = this.operationList.split(';');
5725
- return ['IN', 'NOT_IN', 'BETWEEN'].includes(operationListArray[index]) ? 'TEKGRID_MULTIPLE_VALUE_HINT' : '';
5904
+ return this.isOperationArrayValues(operationListArray[index]) ? 'TEKGRID_MULTIPLE_VALUE_HINT' : '';
5726
5905
  }
5727
5906
  filterItemChange(prop, column, index, { component, event, element }) {
5728
5907
  const { name } = component;
@@ -5743,6 +5922,15 @@ let TekGrid = class TekGrid extends ZdTreeGridEditable {
5743
5922
  if (datasource instanceof TekRestDatasource || datasource instanceof TekMemoryDatasource) {
5744
5923
  if (datasource.dynamicFilter[column.name] && datasource.dynamicFilter[column.name][index]) {
5745
5924
  this.lastFilter = JSON.stringify(datasource.dynamicFilter);
5925
+ const { value } = datasource.dynamicFilter[column.name][index];
5926
+ if (prop === 'operation') {
5927
+ if (this.isOperationArrayValues(component.value) && !Array.isArray(value)) {
5928
+ datasource.dynamicFilter[column.name][index].value = [value];
5929
+ }
5930
+ if (!this.isOperationArrayValues(component.value) && Array.isArray(value)) {
5931
+ [datasource.dynamicFilter[column.name][index].value] = value;
5932
+ }
5933
+ }
5746
5934
  datasource.dynamicFilter[column.name][index][prop] = component.value;
5747
5935
  if (this.lastFilter !== JSON.stringify(datasource.dynamicFilter)) {
5748
5936
  this.debouncedDatasourceGet(this.instance);
@@ -5751,8 +5939,31 @@ let TekGrid = class TekGrid extends ZdTreeGridEditable {
5751
5939
  }
5752
5940
  }
5753
5941
  }
5942
+ convertToDateFormat(column, value, revert) {
5943
+ const dateFormat = column.componentProps.dateFormat || Config.dateFormat;
5944
+ const displayFormat = column.componentProps.displayFormat || Config.displayFormat;
5945
+ if (revert) {
5946
+ if (dayjs(value, displayFormat).isValid() || !dayjs(value, dateFormat).isValid()) {
5947
+ return value;
5948
+ }
5949
+ return dayjs(value, dateFormat).format(displayFormat);
5950
+ }
5951
+ if (dayjs(value, dateFormat).isValid() || !dayjs(value, displayFormat).isValid()) {
5952
+ return value;
5953
+ }
5954
+ return dayjs(value, displayFormat).format(dateFormat);
5955
+ }
5956
+ checkDateValueFormat(column, value, revert = false) {
5957
+ if (['ZdDate', 'ZdDateRange'].includes(column.componentProps.component)) {
5958
+ if (Array.isArray(value)) {
5959
+ return value.map((item) => this.convertToDateFormat(column, item, revert));
5960
+ }
5961
+ return this.convertToDateFormat(column, value, revert);
5962
+ }
5963
+ return value;
5964
+ }
5754
5965
  filterValueChange(column, index, { component, event, element }) {
5755
- const { value } = component;
5966
+ let { value } = component;
5756
5967
  const { datasource } = this.instance;
5757
5968
  if (!(element === null || element === void 0 ? void 0 : element.offsetParent))
5758
5969
  return;
@@ -5776,6 +5987,10 @@ let TekGrid = class TekGrid extends ZdTreeGridEditable {
5776
5987
  const operationSelectName = name.replace('-filter-value-', '-filter-operation-');
5777
5988
  const operationSelect = Metadata.getInstance(operationSelectName);
5778
5989
  const operation = operationSelect.value;
5990
+ if (this.isOperationArrayValues(operation)) {
5991
+ value = value.split(';');
5992
+ }
5993
+ value = this.checkDateValueFormat(column, value);
5779
5994
  datasource.dynamicFilter[column.name].push({
5780
5995
  relation,
5781
5996
  operation,
@@ -5783,6 +5998,10 @@ let TekGrid = class TekGrid extends ZdTreeGridEditable {
5783
5998
  });
5784
5999
  }
5785
6000
  else {
6001
+ if (this.isOperationArrayValues(datasource.dynamicFilter[column.name][index].operation)) {
6002
+ value = value.split(';');
6003
+ }
6004
+ value = this.checkDateValueFormat(column, value);
5786
6005
  datasource.dynamicFilter[column.name][index].value = value;
5787
6006
  }
5788
6007
  }
@@ -5835,7 +6054,12 @@ let TekGrid = class TekGrid extends ZdTreeGridEditable {
5835
6054
  const dynamicFilter = datasource.dynamicFilter[column.name];
5836
6055
  if (dynamicFilter && dynamicFilter.length > 0) {
5837
6056
  dynamicFilter.forEach((item) => {
5838
- filterOptions.push(item);
6057
+ let { value } = item;
6058
+ if (this.isOperationArrayValues(item.operation) && Array.isArray(value)) {
6059
+ value = this.checkDateValueFormat(column, value, true);
6060
+ value = value.join(';');
6061
+ }
6062
+ filterOptions.push(Object.assign(Object.assign({}, item), { value }));
5839
6063
  });
5840
6064
  }
5841
6065
  filterOptions.push({
@@ -6020,6 +6244,8 @@ var __vue_render__ = function () {
6020
6244
  dense: _vm.instance.dense,
6021
6245
  loading: _vm.instance.datasource.loading,
6022
6246
  "item-key": _vm.instance.datasource.uniqueKey,
6247
+ dark: _vm.instance.dark,
6248
+ light: _vm.instance.light,
6023
6249
  "disable-sort": "",
6024
6250
  "disable-filtering": "",
6025
6251
  tabindex: "0",
@@ -6590,6 +6816,11 @@ var __vue_render__ = function () {
6590
6816
  column,
6591
6817
  filterIndex
6592
6818
  ),
6819
+ change:
6820
+ _vm.getFilterValueChange(
6821
+ column,
6822
+ filterIndex
6823
+ ),
6593
6824
  },
6594
6825
  }
6595
6826
  ),
@@ -7286,7 +7517,7 @@ __vue_render__._withStripped = true;
7286
7517
  /* style */
7287
7518
  const __vue_inject_styles__ = function (inject) {
7288
7519
  if (!inject) return
7289
- inject("data-v-29a40362_0", { source: ".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}\n.tek-grid table thead tr th {\n padding-right: 15px !important;\n}\n.tek-grid table thead tr th.zd-table-fixed-column {\n position: sticky !important;\n left: 0;\n z-index: 4;\n background: #f7f7f7 !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 {\n background: #f6f6f6;\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-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 background: #f7f7f7 !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: inline-block;\n vertical-align: middle;\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: 10px;\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 position: relative;\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 background: white;\n padding: 12px 12px 0 12px;\n max-height: 300px;\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 });
7520
+ inject("data-v-3b2c019e_0", { source: ".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}\n.tek-grid table thead tr th {\n padding-right: 15px !important;\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-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: inline-block;\n vertical-align: middle;\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: 10px;\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 position: relative;\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 });
7290
7521
 
7291
7522
  };
7292
7523
  /* scoped */