@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.
@@ -204,7 +204,12 @@
204
204
  [
205
205
  _c(
206
206
  "zd-breadcrumbs",
207
- _vm._b({}, "zd-breadcrumbs", _vm.instance.breadcrumb, false)
207
+ _vm._b(
208
+ { attrs: { dark: _vm.instance.dark, light: _vm.instance.light } },
209
+ "zd-breadcrumbs",
210
+ _vm.instance.breadcrumb,
211
+ false
212
+ )
208
213
  ),
209
214
  _vm._v(" "),
210
215
  _c(
@@ -266,7 +271,7 @@
266
271
  /* style */
267
272
  const __vue_inject_styles__$f = function (inject) {
268
273
  if (!inject) return
269
- 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 });
274
+ 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 });
270
275
 
271
276
  };
272
277
  /* scoped */
@@ -1156,6 +1161,10 @@
1156
1161
  constructor() {
1157
1162
  super(...arguments);
1158
1163
  this.instanceType = teknisaComponentsCommon.TekGrid;
1164
+ /**
1165
+ * Left distance for each column
1166
+ */
1167
+ this.fixedLeft = {};
1159
1168
  this.debouncedDatasourceGet = debounce__default["default"]((instance) => {
1160
1169
  if (instance.events.beforeApplyFilter) {
1161
1170
  instance.events.beforeApplyFilter({ component: instance });
@@ -1202,7 +1211,7 @@
1202
1211
  // do nothing
1203
1212
  }
1204
1213
  }
1205
- this.updateFixedColumns();
1214
+ setTimeout(this.updateFixedColumns);
1206
1215
  }
1207
1216
  getFilterActivatorEvents(on, column) {
1208
1217
  const events = {};
@@ -1220,16 +1229,18 @@
1220
1229
  return this.filterItemChange.bind(this, prop, column, index);
1221
1230
  }
1222
1231
  getFilterValueChange(column, index) {
1223
- return this.filterValueChange.bind(this, column, index);
1232
+ return debounce__default["default"](this.filterValueChange.bind(this, column, index), 1000);
1233
+ }
1234
+ isOperationArrayValues(operation) {
1235
+ return ['IN', 'NOT_IN', 'BETWEEN'].includes(operation);
1224
1236
  }
1225
1237
  getComponentType(index) {
1226
- this.operationList.split(';');
1227
1238
  const operationListArray = this.operationList.split(';');
1228
- return ['IN', 'NOT_IN', 'BETWEEN'].includes(operationListArray[index]) ? 'ZdTextInput' : '';
1239
+ return this.isOperationArrayValues(operationListArray[index]) ? 'ZdTextInput' : '';
1229
1240
  }
1230
1241
  getComponentHint(index) {
1231
1242
  const operationListArray = this.operationList.split(';');
1232
- return ['IN', 'NOT_IN', 'BETWEEN'].includes(operationListArray[index]) ? 'TEKGRID_MULTIPLE_VALUE_HINT' : '';
1243
+ return this.isOperationArrayValues(operationListArray[index]) ? 'TEKGRID_MULTIPLE_VALUE_HINT' : '';
1233
1244
  }
1234
1245
  filterItemChange(prop, column, index, { component, event, element }) {
1235
1246
  const { name } = component;
@@ -1250,6 +1261,15 @@
1250
1261
  if (datasource instanceof teknisaComponentsCommon.TekRestDatasource || datasource instanceof teknisaComponentsCommon.TekMemoryDatasource) {
1251
1262
  if (datasource.dynamicFilter[column.name] && datasource.dynamicFilter[column.name][index]) {
1252
1263
  this.lastFilter = JSON.stringify(datasource.dynamicFilter);
1264
+ const { value } = datasource.dynamicFilter[column.name][index];
1265
+ if (prop === 'operation') {
1266
+ if (this.isOperationArrayValues(component.value) && !Array.isArray(value)) {
1267
+ datasource.dynamicFilter[column.name][index].value = [value];
1268
+ }
1269
+ if (!this.isOperationArrayValues(component.value) && Array.isArray(value)) {
1270
+ [datasource.dynamicFilter[column.name][index].value] = value;
1271
+ }
1272
+ }
1253
1273
  datasource.dynamicFilter[column.name][index][prop] = component.value;
1254
1274
  if (this.lastFilter !== JSON.stringify(datasource.dynamicFilter)) {
1255
1275
  this.debouncedDatasourceGet(this.instance);
@@ -1258,8 +1278,31 @@
1258
1278
  }
1259
1279
  }
1260
1280
  }
1281
+ convertToDateFormat(column, value, revert) {
1282
+ const dateFormat = column.componentProps.dateFormat || core.Config.dateFormat;
1283
+ const displayFormat = column.componentProps.displayFormat || core.Config.displayFormat;
1284
+ if (revert) {
1285
+ if (core.dayjs(value, displayFormat).isValid() || !core.dayjs(value, dateFormat).isValid()) {
1286
+ return value;
1287
+ }
1288
+ return core.dayjs(value, dateFormat).format(displayFormat);
1289
+ }
1290
+ if (core.dayjs(value, dateFormat).isValid() || !core.dayjs(value, displayFormat).isValid()) {
1291
+ return value;
1292
+ }
1293
+ return core.dayjs(value, displayFormat).format(dateFormat);
1294
+ }
1295
+ checkDateValueFormat(column, value, revert = false) {
1296
+ if (['ZdDate', 'ZdDateRange'].includes(column.componentProps.component)) {
1297
+ if (Array.isArray(value)) {
1298
+ return value.map((item) => this.convertToDateFormat(column, item, revert));
1299
+ }
1300
+ return this.convertToDateFormat(column, value, revert);
1301
+ }
1302
+ return value;
1303
+ }
1261
1304
  filterValueChange(column, index, { component, event, element }) {
1262
- const { value } = component;
1305
+ let { value } = component;
1263
1306
  const { datasource } = this.instance;
1264
1307
  if (!(element === null || element === void 0 ? void 0 : element.offsetParent))
1265
1308
  return;
@@ -1283,6 +1326,10 @@
1283
1326
  const operationSelectName = name.replace('-filter-value-', '-filter-operation-');
1284
1327
  const operationSelect = core.Metadata.getInstance(operationSelectName);
1285
1328
  const operation = operationSelect.value;
1329
+ if (this.isOperationArrayValues(operation)) {
1330
+ value = value.split(';');
1331
+ }
1332
+ value = this.checkDateValueFormat(column, value);
1286
1333
  datasource.dynamicFilter[column.name].push({
1287
1334
  relation,
1288
1335
  operation,
@@ -1290,6 +1337,10 @@
1290
1337
  });
1291
1338
  }
1292
1339
  else {
1340
+ if (this.isOperationArrayValues(datasource.dynamicFilter[column.name][index].operation)) {
1341
+ value = value.split(';');
1342
+ }
1343
+ value = this.checkDateValueFormat(column, value);
1293
1344
  datasource.dynamicFilter[column.name][index].value = value;
1294
1345
  }
1295
1346
  }
@@ -1342,7 +1393,12 @@
1342
1393
  const dynamicFilter = datasource.dynamicFilter[column.name];
1343
1394
  if (dynamicFilter && dynamicFilter.length > 0) {
1344
1395
  dynamicFilter.forEach((item) => {
1345
- filterOptions.push(item);
1396
+ let { value } = item;
1397
+ if (this.isOperationArrayValues(item.operation) && Array.isArray(value)) {
1398
+ value = this.checkDateValueFormat(column, value, true);
1399
+ value = value.join(';');
1400
+ }
1401
+ filterOptions.push(Object.assign(Object.assign({}, item), { value }));
1346
1402
  });
1347
1403
  }
1348
1404
  filterOptions.push({
@@ -1418,18 +1474,11 @@
1418
1474
  const name = column.getAttribute('column-name');
1419
1475
  if (name && column.classList.contains('zd-table-fixed-column')) {
1420
1476
  column.style.left = `${left}px`;
1477
+ this.$set(this.fixedLeft, name, column.style.left);
1421
1478
  left += column.clientWidth;
1422
1479
  }
1423
1480
  });
1424
1481
  }
1425
- getFixedLeft(column) {
1426
- if (!column.fixed)
1427
- return 'unset';
1428
- const headerElement = this.$refs[`column-${column.name}`];
1429
- if (!headerElement)
1430
- return 'unset';
1431
- return headerElement[0].style.left;
1432
- }
1433
1482
  isGroupSelected(item) {
1434
1483
  return item.children.every((child) => {
1435
1484
  const { uniqueKey } = this.instance.datasource;
@@ -1480,6 +1529,22 @@
1480
1529
  this.instance.selectedRows = this.instance.datasource.data;
1481
1530
  }
1482
1531
  }
1532
+ get headers() {
1533
+ this.$nextTick(() => {
1534
+ if (this.$el)
1535
+ this.updateFixedColumns();
1536
+ });
1537
+ return this.instance.columns;
1538
+ }
1539
+ getColumnsDOMOrder() {
1540
+ return this.orderHeaders(this.instance.columns);
1541
+ }
1542
+ resizeMouseMoveHandler(event) {
1543
+ this.superMethods(vuetify.ZdGrid).resizeMouseMoveHandler.call(this, event);
1544
+ if (this.resizeColumn.fixed) {
1545
+ this.$nextTick(this.updateFixedColumns);
1546
+ }
1547
+ }
1483
1548
  };
1484
1549
  __decorate([
1485
1550
  vuePropertyDecorator.Prop({ type: [String], default: '' }),
@@ -1592,7 +1657,7 @@
1592
1657
  "hide-default-header": "",
1593
1658
  "hide-default-footer": "",
1594
1659
  name: _vm.instance.name,
1595
- headers: _vm.instance.columns,
1660
+ headers: _vm.headers,
1596
1661
  height: _vm.instance.height,
1597
1662
  items: _vm.getData(),
1598
1663
  search: _vm.instance.datasource.search,
@@ -1600,6 +1665,8 @@
1600
1665
  dense: _vm.instance.dense,
1601
1666
  loading: _vm.instance.datasource.loading,
1602
1667
  "item-key": _vm.instance.datasource.uniqueKey,
1668
+ dark: _vm.instance.dark,
1669
+ light: _vm.instance.light,
1603
1670
  "disable-sort": "",
1604
1671
  "disable-filtering": "",
1605
1672
  tabindex: "0",
@@ -1652,8 +1719,22 @@
1652
1719
  ? _c(
1653
1720
  "th",
1654
1721
  {
1655
- staticClass:
1656
- "zd-table-cell selectable zd-table-fixed-column",
1722
+ class: [
1723
+ "zd-table-cell",
1724
+ "selectable",
1725
+ "zd-table-fixed-column",
1726
+ {
1727
+ "theme--dark":
1728
+ (_vm.$vuetify.theme.dark &&
1729
+ !_vm.instance.light) ||
1730
+ _vm.instance.dark,
1731
+ },
1732
+ {
1733
+ "theme--light":
1734
+ !_vm.$vuetify.theme.dark ||
1735
+ _vm.instance.light,
1736
+ },
1737
+ ],
1657
1738
  style:
1658
1739
  "background-color: " +
1659
1740
  _vm.instance.headerBackground,
@@ -1715,9 +1796,22 @@
1715
1796
  sortable:
1716
1797
  column.sortable &&
1717
1798
  !_vm.instance.editing,
1718
- sortHandle: _vm.instance.dragColumns,
1799
+ sortHandle:
1800
+ !column.fixed &&
1801
+ _vm.instance.dragColumns,
1719
1802
  "zd-table-fixed-column": column.fixed,
1720
1803
  },
1804
+ {
1805
+ "theme--dark":
1806
+ (_vm.$vuetify.theme.dark &&
1807
+ !_vm.instance.light) ||
1808
+ _vm.instance.dark,
1809
+ },
1810
+ {
1811
+ "theme--light":
1812
+ !_vm.$vuetify.theme.dark ||
1813
+ _vm.instance.light,
1814
+ },
1721
1815
  "text-" + column.align,
1722
1816
  _vm.instance.datasource.getOrderByColumn(
1723
1817
  column.name
@@ -2236,6 +2330,11 @@
2236
2330
  column,
2237
2331
  filterIndex
2238
2332
  ),
2333
+ change:
2334
+ _vm.getFilterValueChange(
2335
+ column,
2336
+ filterIndex
2337
+ ),
2239
2338
  },
2240
2339
  }
2241
2340
  ),
@@ -2355,8 +2454,22 @@
2355
2454
  ? _c(
2356
2455
  "td",
2357
2456
  {
2358
- staticClass:
2359
- "zd-table-cell selectable zd-table-fixed-column",
2457
+ class: [
2458
+ "zd-table-cell",
2459
+ "selectable",
2460
+ "zd-table-fixed-column",
2461
+ {
2462
+ "theme--dark":
2463
+ (_vm.$vuetify.theme.dark &&
2464
+ !_vm.instance.light) ||
2465
+ _vm.instance.dark,
2466
+ },
2467
+ {
2468
+ "theme--light":
2469
+ !_vm.$vuetify.theme.dark ||
2470
+ _vm.instance.light,
2471
+ },
2472
+ ],
2360
2473
  },
2361
2474
  [
2362
2475
  _c("v-checkbox", {
@@ -2391,8 +2504,23 @@
2391
2504
  _c(
2392
2505
  "td",
2393
2506
  {
2394
- staticClass:
2395
- "zd-table-cell text-left zd-table-group-header zd-table-fixed-column",
2507
+ class: [
2508
+ "zd-table-cell",
2509
+ "text-left",
2510
+ "zd-table-group-header",
2511
+ "zd-table-fixed-column",
2512
+ {
2513
+ "theme--dark":
2514
+ (_vm.$vuetify.theme.dark &&
2515
+ !_vm.instance.light) ||
2516
+ _vm.instance.dark,
2517
+ },
2518
+ {
2519
+ "theme--light":
2520
+ !_vm.$vuetify.theme.dark ||
2521
+ _vm.instance.light,
2522
+ },
2523
+ ],
2396
2524
  style:
2397
2525
  "left: " +
2398
2526
  (_vm.instance.selectable ? 40 : 0) +
@@ -2469,6 +2597,12 @@
2469
2597
  current: _vm.isCurrentRow(item),
2470
2598
  footer: item.groupFooter,
2471
2599
  summary: item.groupSummary,
2600
+ "theme--dark":
2601
+ (_vm.$vuetify.theme.dark &&
2602
+ !_vm.instance.light) ||
2603
+ _vm.instance.dark,
2604
+ "theme--light":
2605
+ !_vm.$vuetify.theme.dark || _vm.instance.light,
2472
2606
  },
2473
2607
  on: {
2474
2608
  click: function ($event) {
@@ -2481,8 +2615,22 @@
2481
2615
  ? _c(
2482
2616
  "td",
2483
2617
  {
2484
- staticClass:
2485
- "zd-table-cell selectable zd-table-fixed-column",
2618
+ class: [
2619
+ "zd-table-cell",
2620
+ "selectable",
2621
+ "zd-table-fixed-column",
2622
+ {
2623
+ "theme--dark":
2624
+ (_vm.$vuetify.theme.dark &&
2625
+ !_vm.instance.light) ||
2626
+ _vm.instance.dark,
2627
+ },
2628
+ {
2629
+ "theme--light":
2630
+ !_vm.$vuetify.theme.dark ||
2631
+ _vm.instance.light,
2632
+ },
2633
+ ],
2486
2634
  },
2487
2635
  [
2488
2636
  _c("v-checkbox", {
@@ -2563,6 +2711,19 @@
2563
2711
  "zd-table-fixed-column":
2564
2712
  column.fixed,
2565
2713
  },
2714
+ {
2715
+ "theme--dark":
2716
+ (_vm.$vuetify.theme
2717
+ .dark &&
2718
+ !_vm.instance.light) ||
2719
+ _vm.instance.dark,
2720
+ },
2721
+ {
2722
+ "theme--light":
2723
+ !_vm.$vuetify.theme
2724
+ .dark ||
2725
+ _vm.instance.light,
2726
+ },
2566
2727
  ],
2567
2728
  style: [
2568
2729
  Object.assign(
@@ -2576,9 +2737,11 @@
2576
2737
  cellProps
2577
2738
  ).cssStyle,
2578
2739
  {
2579
- left: _vm.getFixedLeft(
2580
- column
2581
- ),
2740
+ left: column.fixed
2741
+ ? _vm.fixedLeft[
2742
+ column.name
2743
+ ]
2744
+ : "unset",
2582
2745
  },
2583
2746
  ],
2584
2747
  on: {
@@ -3054,7 +3217,7 @@
3054
3217
  /* style */
3055
3218
  const __vue_inject_styles__$8 = function (inject) {
3056
3219
  if (!inject) return
3057
- 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 });
3220
+ 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 });
3058
3221
 
3059
3222
  };
3060
3223
  /* scoped */
@@ -4317,7 +4480,7 @@
4317
4480
  /* style */
4318
4481
  const __vue_inject_styles__$7 = function (inject) {
4319
4482
  if (!inject) return
4320
- 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 });
4483
+ 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 });
4321
4484
 
4322
4485
  };
4323
4486
  /* scoped */
@@ -4462,26 +4625,26 @@
4462
4625
  Object.keys(filter).forEach((columnName) => {
4463
4626
  const filterOptions = filter[columnName];
4464
4627
  const column = columns[columns.findIndex((col) => col.name === columnName)];
4465
- const { filterDynamicValue } = column;
4628
+ const { filterHelperValue } = column;
4466
4629
  filterOptions.forEach((item) => {
4467
- let dynamicValue = '';
4468
- if (!Array.isArray(filterDynamicValue)) {
4469
- dynamicValue = filterDynamicValue;
4630
+ if (['IN', 'NOT_IN', 'BETWEEN'].includes(item.operation) && !Array.isArray(item.value)) {
4631
+ item.value = item.value.split(';');
4632
+ }
4633
+ let helperValue = '';
4634
+ if (!Array.isArray(filterHelperValue)) {
4635
+ helperValue = filterHelperValue;
4470
4636
  }
4471
4637
  else {
4472
- Object.keys(filterDynamicValue).forEach((key) => {
4473
- const value = filterDynamicValue[key] || '';
4638
+ Object.keys(filterHelperValue).forEach((key) => {
4639
+ const value = filterHelperValue[key] || '';
4474
4640
  if (`${item.relation || 'AND'}-${item.operation || 'CONTAINS'}` === key) {
4475
- dynamicValue = value;
4641
+ helperValue = value;
4476
4642
  }
4477
4643
  });
4478
4644
  }
4479
- if (dynamicValue) {
4645
+ if (helperValue) {
4480
4646
  const columnObj = this.instance.grid.getColumn(column.name);
4481
- item.value = teknisaComponentsCommon.TekFilterHelper.getValue(dynamicValue, columnObj);
4482
- if (Array.isArray(item.value)) {
4483
- item.value = item.value.join(';');
4484
- }
4647
+ item.value = teknisaComponentsCommon.TekFilterHelper.getValue(helperValue, columnObj);
4485
4648
  }
4486
4649
  });
4487
4650
  });
@@ -4723,7 +4886,10 @@
4723
4886
  _vm._b(
4724
4887
  {
4725
4888
  attrs: {
4726
- name: "tek-grid-layout-item-update_" + item,
4889
+ name:
4890
+ "tek-grid-layout-item-update_" +
4891
+ _vm.instance.name +
4892
+ item,
4727
4893
  },
4728
4894
  },
4729
4895
  "zd-button",
@@ -4747,7 +4913,10 @@
4747
4913
  _vm._b(
4748
4914
  {
4749
4915
  attrs: {
4750
- name: "tek-grid-layout-item-delete_" + item,
4916
+ name:
4917
+ "tek-grid-layout-item-delete_" +
4918
+ _vm.instance.name +
4919
+ item,
4751
4920
  },
4752
4921
  },
4753
4922
  "zd-button",
@@ -4784,7 +4953,7 @@
4784
4953
  /* style */
4785
4954
  const __vue_inject_styles__$6 = function (inject) {
4786
4955
  if (!inject) return
4787
- 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 });
4956
+ 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 });
4788
4957
 
4789
4958
  };
4790
4959
  /* scoped */
@@ -5502,6 +5671,12 @@
5502
5671
  class: [
5503
5672
  "tek-product-card",
5504
5673
  { "tek-product-card--link": _vm.instance.events.click },
5674
+ {
5675
+ "theme--dark":
5676
+ (_vm.$vuetify.theme.dark && !_vm.instance.light) ||
5677
+ _vm.instance.dark,
5678
+ },
5679
+ { "theme--light": !_vm.$vuetify.theme.dark || _vm.instance.light },
5505
5680
  _vm.instance.cssClass,
5506
5681
  ],
5507
5682
  style: { width: _vm.instance.width },
@@ -5517,6 +5692,8 @@
5517
5692
  {
5518
5693
  attrs: {
5519
5694
  name: _vm.instance.name,
5695
+ dark: _vm.instance.dark,
5696
+ light: _vm.instance.light,
5520
5697
  elevation: 2,
5521
5698
  to: _vm.instance.to,
5522
5699
  },
@@ -5617,7 +5794,7 @@
5617
5794
  /* style */
5618
5795
  const __vue_inject_styles__$1 = function (inject) {
5619
5796
  if (!inject) return
5620
- 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 });
5797
+ 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 });
5621
5798
 
5622
5799
  };
5623
5800
  /* scoped */
@@ -5716,16 +5893,18 @@
5716
5893
  return this.filterItemChange.bind(this, prop, column, index);
5717
5894
  }
5718
5895
  getFilterValueChange(column, index) {
5719
- return this.filterValueChange.bind(this, column, index);
5896
+ return debounce__default["default"](this.filterValueChange.bind(this, column, index), 1000);
5897
+ }
5898
+ isOperationArrayValues(operation) {
5899
+ return ['IN', 'NOT_IN', 'BETWEEN'].includes(operation);
5720
5900
  }
5721
5901
  getComponentType(index) {
5722
- this.operationList.split(';');
5723
5902
  const operationListArray = this.operationList.split(';');
5724
- return ['IN', 'NOT_IN', 'BETWEEN'].includes(operationListArray[index]) ? 'ZdTextInput' : '';
5903
+ return this.isOperationArrayValues(operationListArray[index]) ? 'ZdTextInput' : '';
5725
5904
  }
5726
5905
  getComponentHint(index) {
5727
5906
  const operationListArray = this.operationList.split(';');
5728
- return ['IN', 'NOT_IN', 'BETWEEN'].includes(operationListArray[index]) ? 'TEKGRID_MULTIPLE_VALUE_HINT' : '';
5907
+ return this.isOperationArrayValues(operationListArray[index]) ? 'TEKGRID_MULTIPLE_VALUE_HINT' : '';
5729
5908
  }
5730
5909
  filterItemChange(prop, column, index, { component, event, element }) {
5731
5910
  const { name } = component;
@@ -5746,6 +5925,15 @@
5746
5925
  if (datasource instanceof teknisaComponentsCommon.TekRestDatasource || datasource instanceof teknisaComponentsCommon.TekMemoryDatasource) {
5747
5926
  if (datasource.dynamicFilter[column.name] && datasource.dynamicFilter[column.name][index]) {
5748
5927
  this.lastFilter = JSON.stringify(datasource.dynamicFilter);
5928
+ const { value } = datasource.dynamicFilter[column.name][index];
5929
+ if (prop === 'operation') {
5930
+ if (this.isOperationArrayValues(component.value) && !Array.isArray(value)) {
5931
+ datasource.dynamicFilter[column.name][index].value = [value];
5932
+ }
5933
+ if (!this.isOperationArrayValues(component.value) && Array.isArray(value)) {
5934
+ [datasource.dynamicFilter[column.name][index].value] = value;
5935
+ }
5936
+ }
5749
5937
  datasource.dynamicFilter[column.name][index][prop] = component.value;
5750
5938
  if (this.lastFilter !== JSON.stringify(datasource.dynamicFilter)) {
5751
5939
  this.debouncedDatasourceGet(this.instance);
@@ -5754,8 +5942,31 @@
5754
5942
  }
5755
5943
  }
5756
5944
  }
5945
+ convertToDateFormat(column, value, revert) {
5946
+ const dateFormat = column.componentProps.dateFormat || core.Config.dateFormat;
5947
+ const displayFormat = column.componentProps.displayFormat || core.Config.displayFormat;
5948
+ if (revert) {
5949
+ if (core.dayjs(value, displayFormat).isValid() || !core.dayjs(value, dateFormat).isValid()) {
5950
+ return value;
5951
+ }
5952
+ return core.dayjs(value, dateFormat).format(displayFormat);
5953
+ }
5954
+ if (core.dayjs(value, dateFormat).isValid() || !core.dayjs(value, displayFormat).isValid()) {
5955
+ return value;
5956
+ }
5957
+ return core.dayjs(value, displayFormat).format(dateFormat);
5958
+ }
5959
+ checkDateValueFormat(column, value, revert = false) {
5960
+ if (['ZdDate', 'ZdDateRange'].includes(column.componentProps.component)) {
5961
+ if (Array.isArray(value)) {
5962
+ return value.map((item) => this.convertToDateFormat(column, item, revert));
5963
+ }
5964
+ return this.convertToDateFormat(column, value, revert);
5965
+ }
5966
+ return value;
5967
+ }
5757
5968
  filterValueChange(column, index, { component, event, element }) {
5758
- const { value } = component;
5969
+ let { value } = component;
5759
5970
  const { datasource } = this.instance;
5760
5971
  if (!(element === null || element === void 0 ? void 0 : element.offsetParent))
5761
5972
  return;
@@ -5779,6 +5990,10 @@
5779
5990
  const operationSelectName = name.replace('-filter-value-', '-filter-operation-');
5780
5991
  const operationSelect = core.Metadata.getInstance(operationSelectName);
5781
5992
  const operation = operationSelect.value;
5993
+ if (this.isOperationArrayValues(operation)) {
5994
+ value = value.split(';');
5995
+ }
5996
+ value = this.checkDateValueFormat(column, value);
5782
5997
  datasource.dynamicFilter[column.name].push({
5783
5998
  relation,
5784
5999
  operation,
@@ -5786,6 +6001,10 @@
5786
6001
  });
5787
6002
  }
5788
6003
  else {
6004
+ if (this.isOperationArrayValues(datasource.dynamicFilter[column.name][index].operation)) {
6005
+ value = value.split(';');
6006
+ }
6007
+ value = this.checkDateValueFormat(column, value);
5789
6008
  datasource.dynamicFilter[column.name][index].value = value;
5790
6009
  }
5791
6010
  }
@@ -5838,7 +6057,12 @@
5838
6057
  const dynamicFilter = datasource.dynamicFilter[column.name];
5839
6058
  if (dynamicFilter && dynamicFilter.length > 0) {
5840
6059
  dynamicFilter.forEach((item) => {
5841
- filterOptions.push(item);
6060
+ let { value } = item;
6061
+ if (this.isOperationArrayValues(item.operation) && Array.isArray(value)) {
6062
+ value = this.checkDateValueFormat(column, value, true);
6063
+ value = value.join(';');
6064
+ }
6065
+ filterOptions.push(Object.assign(Object.assign({}, item), { value }));
5842
6066
  });
5843
6067
  }
5844
6068
  filterOptions.push({
@@ -6023,6 +6247,8 @@
6023
6247
  dense: _vm.instance.dense,
6024
6248
  loading: _vm.instance.datasource.loading,
6025
6249
  "item-key": _vm.instance.datasource.uniqueKey,
6250
+ dark: _vm.instance.dark,
6251
+ light: _vm.instance.light,
6026
6252
  "disable-sort": "",
6027
6253
  "disable-filtering": "",
6028
6254
  tabindex: "0",
@@ -6593,6 +6819,11 @@
6593
6819
  column,
6594
6820
  filterIndex
6595
6821
  ),
6822
+ change:
6823
+ _vm.getFilterValueChange(
6824
+ column,
6825
+ filterIndex
6826
+ ),
6596
6827
  },
6597
6828
  }
6598
6829
  ),
@@ -7289,7 +7520,7 @@
7289
7520
  /* style */
7290
7521
  const __vue_inject_styles__ = function (inject) {
7291
7522
  if (!inject) return
7292
- 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 });
7523
+ 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 });
7293
7524
 
7294
7525
  };
7295
7526
  /* scoped */