@zeedhi/teknisa-components-vuetify 1.15.0 → 1.35.1

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.
Files changed (7) hide show
  1. package/dist/tek-components-vuetify.esm.js +1586 -642
  2. package/dist/tek-components-vuetify.umd.js +1588 -644
  3. package/package.json +2 -2
  4. package/types/components/tek-grid/TekGrid.d.ts +3 -4
  5. package/types/components/tek-grid/TekGridColumnsButton.d.ts +2 -0
  6. package/types/components/tek-grid/TekGridColumnsOptionsController.d.ts +60 -0
  7. package/types/components/tek-grid/TekGridColumnsOptionsModal.d.ts +9 -0
package/dist/tek-components-vuetify.umd.js CHANGED
@@ -1,13 +1,13 @@
1
1
  (function (global, factory) {
2
2
  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@zeedhi/common'), require('vue-property-decorator'), require('@zeedhi/teknisa-components-common'), require('@zeedhi/vuetify'), require('@zeedhi/core'), require('lodash.debounce'), require('sortablejs')) :
3
3
  typeof define === 'function' && define.amd ? define(['exports', '@zeedhi/common', 'vue-property-decorator', '@zeedhi/teknisa-components-common', '@zeedhi/vuetify', '@zeedhi/core', 'lodash.debounce', 'sortablejs'], factory) :
4
- (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global['@zeedhi/teknisa-components-vuetify'] = {}, global.common, global['vue-property-decorator'], global['@zeedhi/teknisa-components-common'], global.vuetify, global.core, global.lodash.debounce, global.sortablejs));
5
- }(this, (function (exports, common, vuePropertyDecorator, teknisaComponentsCommon, vuetify, core, debounce, sortable) { 'use strict';
4
+ (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["@zeedhi/teknisa-components-vuetify"] = {}, global.common, global["vue-property-decorator"], global["@zeedhi/teknisa-components-common"], global.vuetify, global.core, global.lodash.debounce, global.sortablejs));
5
+ })(this, (function (exports, common, vuePropertyDecorator, teknisaComponentsCommon, vuetify, core, debounce, Sortable) { 'use strict';
6
6
 
7
7
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
8
8
 
9
9
  var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
10
- var sortable__default = /*#__PURE__*/_interopDefaultLegacy(sortable);
10
+ var Sortable__default = /*#__PURE__*/_interopDefaultLegacy(Sortable);
11
11
 
12
12
  /*! *****************************************************************************
13
13
  Copyright (c) Microsoft Corporation.
@@ -265,7 +265,7 @@
265
265
  /* style */
266
266
  const __vue_inject_styles__$e = function (inject) {
267
267
  if (!inject) return
268
- 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}\n\n/*# sourceMappingURL=TekBreadcrumbHeader.vue.map */", map: {"version":3,"sources":["/Users/zedmartins/workfolder/zeedhi/teknisa-components/packages/vuetify/src/components/tek-breadcrumb-header/TekBreadcrumbHeader.vue","TekBreadcrumbHeader.vue"],"names":[],"mappings":"AAiCA;EACA,aAAA;EACA,gBAAA;EACA,eAAA;AChCA;ADkCA;EACA,iBAAA;AChCA;ADmCA;EACA,UAAA;EACA,oCAAA;ACjCA;ADmCA;EACA,cAAA;ACjCA;ADoCA;EACA,cAAA;AClCA;ADoCA;EACA,eAAA;EACA,iBAAA;EACA,iBAAA;EACA,mBAAA;AClCA;ADqCA;EACA,SAAA;ACnCA;;AAEA,kDAAkD","file":"TekBreadcrumbHeader.vue","sourcesContent":["<template>\n <div class=\"tek-breadcrumb-header\">\n <zd-breadcrumbs\n v-bind=\"instance.breadcrumb\"\n />\n <v-col class=\"tek-breadcrumb-header-title-col\" cols=\"12\">\n <zd-text\n class=\"tek-breadcrumb-header-title\"\n v-bind=\"{\n name: `${instance.name}-title`,\n text: $t(instance.title),\n }\"\n />\n <span class=\"tek-breadcrumb-header-slot-right\" >\n <span v-if=\"instance.rightSlot.length\">\n <component\n v-for=\"(child, index) in instance.rightSlot\"\n v-bind=\"child\"\n :is=\"child.component\"\n :key=\"index\"\n >\n </component>\n </span>\n <slot name=\"rightSlot\"></slot>\n </span>\n </v-col>\n </div>\n</template>\n\n<script lang=\"ts\" src=\"./TekBreadcrumbHeader.ts\"></script>\n\n<style lang=\"scss\">\n.tek-breadcrumb-header {\n .tek-breadcrumb-header-title-col {\n display: flex;\n padding-top: 5px;\n padding-left: 0;\n\n .tek-breadcrumb-header-slot-right {\n margin-left: auto;\n }\n }\n .zd-breadcrumbs {\n padding: 0;\n font-size: var(--zd-font-body2-size);\n\n .v-breadcrumbs__item--disabled {\n color: #667080;\n }\n }\n .zd-text {\n color: #667080;\n\n &.tek-breadcrumb-header-title {\n font-size: 32px;\n font-weight: bold;\n line-height: 35px;\n margin-bottom: 10px;\n }\n\n > p {\n margin: 0;\n }\n }\n}\n</style>",".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}\n\n/*# sourceMappingURL=TekBreadcrumbHeader.vue.map */"]}, media: undefined });
268
+ 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 });
269
269
 
270
270
  };
271
271
  /* scoped */
@@ -438,7 +438,7 @@
438
438
  /* style */
439
439
  const __vue_inject_styles__$d = function (inject) {
440
440
  if (!inject) return
441
- inject("data-v-520a641c_0", { source: ".tek-card-title-row {\n display: flex;\n align-items: center;\n}\n.tek-card-title-row .tek-card-title-text {\n color: var(--v-primary-base);\n font-weight: bold;\n font-size: 20px;\n}\n.tek-card-title-row .tek-card-subtitle-text {\n padding-left: 10px;\n color: var(--zd-font-color);\n font-size: 13px;\n}\n.tek-card-title-row .tek-card-title-text,\n.tek-card-title-row .tek-card-subtitle-text {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n vertical-align: baseline;\n}\n.tek-card-title-row .v-icon {\n color: var(--v-primary-base);\n padding-right: calc(var(--zd-default-padding) / 2);\n}\n.tek-card-title .v-divider {\n margin-bottom: 16px;\n}\n.tek-card-title .tek-card-title-router {\n text-decoration: none;\n}\n.tek-card-title .tek-card-title-no-router {\n text-decoration: none;\n cursor: default;\n}\n\n/*# sourceMappingURL=TekCardTitle.vue.map */", map: {"version":3,"sources":["/Users/zedmartins/workfolder/zeedhi/teknisa-components/packages/vuetify/src/components/tek-card-title/TekCardTitle.vue","TekCardTitle.vue"],"names":[],"mappings":"AAgDA;EACA,aAAA;EACA,mBAAA;AC/CA;ADiDA;EACA,4BAAA;EACA,iBAAA;EACA,eAAA;AC/CA;ADkDA;EACA,kBAAA;EACA,2BAAA;EACA,eAAA;AChDA;ADmDA;;EAEA,mBAAA;EACA,gBAAA;EACA,uBAAA;EACA,wBAAA;ACjDA;ADoDA;EACA,4BAAA;EACA,kDAAA;AClDA;ADsDA;EACA,mBAAA;ACpDA;ADuDA;EACA,qBAAA;ACrDA;ADwDA;EACA,qBAAA;EACA,eAAA;ACtDA;;AAEA,2CAA2C","file":"TekCardTitle.vue","sourcesContent":["<template>\n <div :class=\"['tek-card-title', instance.cssClass]\">\n <div\n class=\"tek-card-content zd-display-flex zd-justify-space-between zd-align-center\"\n >\n <span class=\"tek-card-title-content\">\n <router-link\n :class=\"[\n {\n 'tek-card-title-router': instance.to !== '',\n 'tek-card-title-no-router': instance.to === '',\n },\n ]\"\n :to=\"instance.to\"\n >\n <span class=\"tek-card-title-row\">\n <v-icon v-if=\"instance.iconName\">{{\n $getIcon(instance.iconName)\n }}</v-icon>\n <span v-if=\"instance.title\" class=\"tek-card-title-text\">{{\n $t(instance.title)\n }}</span>\n <span v-if=\"instance.subtitle\" class=\"tek-card-subtitle-text\">{{\n $t(instance.subtitle)\n }}</span>\n </span>\n </router-link>\n </span>\n <span class=\"tek-card-title-slot-right\">\n <span v-if=\"instance.rightSlot.length\">\n <component\n v-for=\"(child, index) in instance.rightSlot\"\n v-bind=\"child\"\n :is=\"child.component\"\n :key=\"index\"\n ></component>\n </span>\n <slot name=\"rightSlot\"></slot>\n </span>\n </div>\n <v-divider v-if=\"instance.showDivider\" />\n </div>\n</template>\n\n<script lang=\"ts\" src=\"./TekCardTitle.ts\"></script>\n\n<style lang=\"scss\">\n.tek-card-title {\n &-row {\n display: flex;\n align-items: center;\n\n .tek-card-title-text {\n color: var(--v-primary-base);\n font-weight: bold;\n font-size: 20px;\n }\n\n .tek-card-subtitle-text {\n padding-left: 10px;\n color: var(--zd-font-color);\n font-size: 13px;\n }\n\n .tek-card-title-text,\n .tek-card-subtitle-text {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n vertical-align: baseline;\n }\n\n .v-icon {\n color: var(--v-primary-base);\n padding-right: calc(var(--zd-default-padding) / 2);\n }\n }\n\n .v-divider {\n margin-bottom: 16px;\n }\n\n .tek-card-title-router {\n text-decoration: none;\n }\n\n .tek-card-title-no-router {\n text-decoration: none;\n cursor: default;\n }\n}\n</style>",".tek-card-title-row {\n display: flex;\n align-items: center;\n}\n.tek-card-title-row .tek-card-title-text {\n color: var(--v-primary-base);\n font-weight: bold;\n font-size: 20px;\n}\n.tek-card-title-row .tek-card-subtitle-text {\n padding-left: 10px;\n color: var(--zd-font-color);\n font-size: 13px;\n}\n.tek-card-title-row .tek-card-title-text,\n.tek-card-title-row .tek-card-subtitle-text {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n vertical-align: baseline;\n}\n.tek-card-title-row .v-icon {\n color: var(--v-primary-base);\n padding-right: calc(var(--zd-default-padding) / 2);\n}\n.tek-card-title .v-divider {\n margin-bottom: 16px;\n}\n.tek-card-title .tek-card-title-router {\n text-decoration: none;\n}\n.tek-card-title .tek-card-title-no-router {\n text-decoration: none;\n cursor: default;\n}\n\n/*# sourceMappingURL=TekCardTitle.vue.map */"]}, media: undefined });
441
+ inject("data-v-520a641c_0", { source: ".tek-card-title-row {\n display: flex;\n align-items: center;\n}\n.tek-card-title-row .tek-card-title-text {\n color: var(--v-primary-base);\n font-weight: bold;\n font-size: 20px;\n}\n.tek-card-title-row .tek-card-subtitle-text {\n padding-left: 10px;\n color: var(--zd-font-color);\n font-size: 13px;\n}\n.tek-card-title-row .tek-card-title-text,\n.tek-card-title-row .tek-card-subtitle-text {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n vertical-align: baseline;\n}\n.tek-card-title-row .v-icon {\n color: var(--v-primary-base);\n padding-right: calc(var(--zd-default-padding) / 2);\n}\n.tek-card-title .v-divider {\n margin-bottom: 16px;\n}\n.tek-card-title .tek-card-title-router {\n text-decoration: none;\n}\n.tek-card-title .tek-card-title-no-router {\n text-decoration: none;\n cursor: default;\n}", map: undefined, media: undefined });
442
442
 
443
443
  };
444
444
  /* scoped */
@@ -607,17 +607,15 @@
607
607
  __vue_render__$c._withStripped = true;
608
608
 
609
609
  /* style */
610
- const __vue_inject_styles__$c = function (inject) {
611
- if (!inject) return
612
- inject("data-v-2348feb6_0", { source: "\n\n/*# sourceMappingURL=TekCrudAddButton.vue.map */", map: {"version":3,"sources":["TekCrudAddButton.vue"],"names":[],"mappings":";;AAEA,+CAA+C","file":"TekCrudAddButton.vue"}, media: undefined });
613
-
614
- };
610
+ const __vue_inject_styles__$c = undefined;
615
611
  /* scoped */
616
612
  const __vue_scope_id__$c = undefined;
617
613
  /* module identifier */
618
614
  const __vue_module_identifier__$c = undefined;
619
615
  /* functional template */
620
616
  const __vue_is_functional_template__$c = false;
617
+ /* style inject */
618
+
621
619
  /* style inject SSR */
622
620
 
623
621
  /* style inject shadow dom */
@@ -632,7 +630,7 @@
632
630
  __vue_is_functional_template__$c,
633
631
  __vue_module_identifier__$c,
634
632
  false,
635
- createInjector,
633
+ undefined,
636
634
  undefined,
637
635
  undefined
638
636
  );
@@ -736,17 +734,15 @@
736
734
  __vue_render__$b._withStripped = true;
737
735
 
738
736
  /* style */
739
- const __vue_inject_styles__$b = function (inject) {
740
- if (!inject) return
741
- inject("data-v-9a0382a2_0", { source: "\n\n/*# sourceMappingURL=TekCrudCancelButton.vue.map */", map: {"version":3,"sources":["TekCrudCancelButton.vue"],"names":[],"mappings":";;AAEA,kDAAkD","file":"TekCrudCancelButton.vue"}, media: undefined });
742
-
743
- };
737
+ const __vue_inject_styles__$b = undefined;
744
738
  /* scoped */
745
739
  const __vue_scope_id__$b = undefined;
746
740
  /* module identifier */
747
741
  const __vue_module_identifier__$b = undefined;
748
742
  /* functional template */
749
743
  const __vue_is_functional_template__$b = false;
744
+ /* style inject */
745
+
750
746
  /* style inject SSR */
751
747
 
752
748
  /* style inject shadow dom */
@@ -761,7 +757,7 @@
761
757
  __vue_is_functional_template__$b,
762
758
  __vue_module_identifier__$b,
763
759
  false,
764
- createInjector,
760
+ undefined,
765
761
  undefined,
766
762
  undefined
767
763
  );
@@ -873,17 +869,15 @@
873
869
  __vue_render__$a._withStripped = true;
874
870
 
875
871
  /* style */
876
- const __vue_inject_styles__$a = function (inject) {
877
- if (!inject) return
878
- inject("data-v-4e8555cd_0", { source: "\n\n/*# sourceMappingURL=TekCrudDeleteButton.vue.map */", map: {"version":3,"sources":["TekCrudDeleteButton.vue"],"names":[],"mappings":";;AAEA,kDAAkD","file":"TekCrudDeleteButton.vue"}, media: undefined });
879
-
880
- };
872
+ const __vue_inject_styles__$a = undefined;
881
873
  /* scoped */
882
874
  const __vue_scope_id__$a = undefined;
883
875
  /* module identifier */
884
876
  const __vue_module_identifier__$a = undefined;
885
877
  /* functional template */
886
878
  const __vue_is_functional_template__$a = false;
879
+ /* style inject */
880
+
887
881
  /* style inject SSR */
888
882
 
889
883
  /* style inject shadow dom */
@@ -898,7 +892,7 @@
898
892
  __vue_is_functional_template__$a,
899
893
  __vue_module_identifier__$a,
900
894
  false,
901
- createInjector,
895
+ undefined,
902
896
  undefined,
903
897
  undefined
904
898
  );
@@ -1001,7 +995,7 @@
1001
995
  /* style */
1002
996
  const __vue_inject_styles__$9 = function (inject) {
1003
997
  if (!inject) return
1004
- inject("data-v-aa2c2e04_0", { source: ".tek-crud-form {\n outline: none;\n}\n\n/*# sourceMappingURL=TekCrudForm.vue.map */", map: {"version":3,"sources":["/Users/zedmartins/workfolder/zeedhi/teknisa-components/packages/vuetify/src/components/crud/TekCrudForm.vue","TekCrudForm.vue"],"names":[],"mappings":"AA0BA;EACA,aAAA;ACzBA;;AAEA,0CAA0C","file":"TekCrudForm.vue","sourcesContent":["<template>\n <v-form ref=\"form\"\n v-show=\"instance.isVisible\"\n :class=\"['tek-crud-form', instance.cssClass]\"\n :name=\"instance.name\"\n @submit.prevent=\"submit($event)\"\n tabindex=\"0\"\n >\n <v-row dense :justify=\"instance.justify\" :align=\"instance.align\">\n <v-col\n v-for=\"child in instance.childrenProps\" :key=\"child.name\"\n v-bind=\"instance.childrenGrid[child.name]\">\n <component\n :is=\"child.component\" v-bind=\"child\"\n :parent=\"instance\"\n @update:value=\"instance.updateChild(child, $event)\">\n </component>\n </v-col>\n </v-row>\n <slot></slot>\n </v-form>\n</template>\n\n<script lang=\"ts\" src=\"./TekCrudForm.ts\"></script>\n\n<style lang=\"scss\">\n.tek-crud-form {\n outline: none;\n}\n</style>",".tek-crud-form {\n outline: none;\n}\n\n/*# sourceMappingURL=TekCrudForm.vue.map */"]}, media: undefined });
998
+ inject("data-v-aa2c2e04_0", { source: ".tek-crud-form {\n outline: none;\n}", map: undefined, media: undefined });
1005
999
 
1006
1000
  };
1007
1001
  /* scoped */
@@ -1124,17 +1118,15 @@
1124
1118
  __vue_render__$8._withStripped = true;
1125
1119
 
1126
1120
  /* style */
1127
- const __vue_inject_styles__$8 = function (inject) {
1128
- if (!inject) return
1129
- inject("data-v-6dc04329_0", { source: "\n\n/*# sourceMappingURL=TekCrudSaveButton.vue.map */", map: {"version":3,"sources":["TekCrudSaveButton.vue"],"names":[],"mappings":";;AAEA,gDAAgD","file":"TekCrudSaveButton.vue"}, media: undefined });
1130
-
1131
- };
1121
+ const __vue_inject_styles__$8 = undefined;
1132
1122
  /* scoped */
1133
1123
  const __vue_scope_id__$8 = undefined;
1134
1124
  /* module identifier */
1135
1125
  const __vue_module_identifier__$8 = undefined;
1136
1126
  /* functional template */
1137
1127
  const __vue_is_functional_template__$8 = false;
1128
+ /* style inject */
1129
+
1138
1130
  /* style inject SSR */
1139
1131
 
1140
1132
  /* style inject shadow dom */
@@ -1149,7 +1141,7 @@
1149
1141
  __vue_is_functional_template__$8,
1150
1142
  __vue_module_identifier__$8,
1151
1143
  false,
1152
- createInjector,
1144
+ undefined,
1153
1145
  undefined,
1154
1146
  undefined
1155
1147
  );
@@ -1163,8 +1155,7 @@
1163
1155
  constructor() {
1164
1156
  super(...arguments);
1165
1157
  this.instanceType = teknisaComponentsCommon.TekGrid;
1166
- this.minimumColumnWidth = 70;
1167
- this.debouncedDatasourceGet = debounce__default['default']((instance) => {
1158
+ this.debouncedDatasourceGet = debounce__default["default"]((instance) => {
1168
1159
  if (instance.events.beforeApplyFilter) {
1169
1160
  instance.events.beforeApplyFilter({ component: instance });
1170
1161
  }
@@ -1175,14 +1166,18 @@
1175
1166
  this.defaultRelation = '';
1176
1167
  this.lastFilter = '';
1177
1168
  }
1178
- created() {
1179
- this.minimumColumnWidth = 70;
1180
- }
1181
1169
  mounted() {
1182
1170
  this.originalChangeLayout = this.instance.changeLayout;
1183
1171
  this.instance.changeLayout = this.onChangeLayout;
1184
1172
  this.instance.viewUpdateScrollData = this.calcScrollData;
1185
1173
  }
1174
+ minimumColumnWidth(column) {
1175
+ let minWidth = this.superMethods(vuetify.ZdGrid).minimumColumnWidth.call(this, column);
1176
+ if (this.instance.columnFilterButton && column && column.filterable) {
1177
+ minWidth += 15;
1178
+ }
1179
+ return minWidth;
1180
+ }
1186
1181
  onChangeLayout(event, element) {
1187
1182
  if (this.originalChangeLayout) {
1188
1183
  this.originalChangeLayout.call(this.instance, event, element);
@@ -1192,27 +1187,6 @@
1192
1187
  layoutOptions.layoutEdited = true;
1193
1188
  }
1194
1189
  }
1195
- calcWidth(width) {
1196
- if (width.indexOf('%') !== -1 && this.$el) {
1197
- const percent = Number(width.replace('%', '')) / 100;
1198
- const tableWidth = this.$el.clientWidth;
1199
- return `${Math.max(this.minimumColumnWidth, Math.trunc(Number(tableWidth) * percent))}px`;
1200
- }
1201
- return width;
1202
- }
1203
- calcColumnLabelWidth(column) {
1204
- if (column.maxWidth || column.minWidth) {
1205
- let width = parseInt(this.calcWidth(column.maxWidth) || this.calcWidth(column.minWidth), 10) - 16;
1206
- if (column.sortable) {
1207
- width -= 16;
1208
- }
1209
- if (column.filterable) {
1210
- width -= 16;
1211
- }
1212
- return `${width}px`;
1213
- }
1214
- return 'unset';
1215
- }
1216
1190
  getFilterActivatorEvents(on) {
1217
1191
  const events = {};
1218
1192
  Object.keys(on).forEach((eventName) => {
@@ -1362,6 +1336,14 @@
1362
1336
  }
1363
1337
  return this.renderedData;
1364
1338
  }
1339
+ rowClick(row, event) {
1340
+ if (row.group || row.groupFooter || row.groupSummary) {
1341
+ this.instance.groupRowClick(row, event, this.$el);
1342
+ }
1343
+ else {
1344
+ this.instance.rowClick(row, event, this.$el);
1345
+ }
1346
+ }
1365
1347
  };
1366
1348
  __decorate([
1367
1349
  vuePropertyDecorator.Prop({ type: [String], default: '' }),
@@ -1379,6 +1361,10 @@
1379
1361
  vuePropertyDecorator.Prop({ type: [Boolean, String], default: false }),
1380
1362
  __metadata("design:type", Object)
1381
1363
  ], TekGrid.prototype, "columnsButton", void 0);
1364
+ __decorate([
1365
+ vuePropertyDecorator.Prop({ type: [Array, String], default: () => [] }),
1366
+ __metadata("design:type", Object)
1367
+ ], TekGrid.prototype, "columnsButtonIgnore", void 0);
1382
1368
  __decorate([
1383
1369
  vuePropertyDecorator.Prop({ type: [Boolean, String], default: false }),
1384
1370
  __metadata("design:type", Object)
@@ -1457,7 +1443,12 @@
1457
1443
  }
1458
1444
  ],
1459
1445
  ref: "grid",
1460
- class: ["zd-grid", "tek-grid", _vm.instance.cssClass],
1446
+ class: [
1447
+ "zd-grid",
1448
+ "tek-grid",
1449
+ _vm.instance.cssClass,
1450
+ { "zd-grid-flex": _vm.instance.gridHeight || _vm.instance.gridMaxHeight }
1451
+ ],
1461
1452
  style: [_vm.cssColorVars, _vm.instance.cssStyle],
1462
1453
  attrs: {
1463
1454
  "fixed-header": "",
@@ -1488,19 +1479,25 @@
1488
1479
  key: "top",
1489
1480
  fn: function() {
1490
1481
  return [
1491
- _c(
1492
- "zd-grid-top",
1493
- {
1494
- ref: "gridTopSlot",
1495
- attrs: {
1496
- name: _vm.instance.name + "_top",
1497
- toolbarSlot: _vm.instance.toolbarSlot,
1498
- instance: _vm.instance
1499
- }
1500
- },
1501
- [_vm._t("toolbarSlot")],
1502
- 2
1503
- )
1482
+ !_vm.$slots.toolbarSlot
1483
+ ? [
1484
+ _c("zd-grid-top", {
1485
+ ref: "gridTopSlot",
1486
+ attrs: {
1487
+ name: _vm.instance.name + "_top",
1488
+ toolbarSlot: _vm.instance.toolbarSlot,
1489
+ instance: _vm.instance
1490
+ }
1491
+ })
1492
+ ]
1493
+ : _vm._e(),
1494
+ _vm._v(" "),
1495
+ _vm._t("toolbarSlot"),
1496
+ _vm._v(" "),
1497
+ _c("span", {
1498
+ ref: "gridTooltip",
1499
+ staticClass: "zd-grid-cell-tooltip"
1500
+ })
1504
1501
  ]
1505
1502
  },
1506
1503
  proxy: true
@@ -1593,366 +1590,459 @@
1593
1590
  style: {
1594
1591
  "background-color":
1595
1592
  _vm.instance.headerBackground,
1596
- "min-width":
1597
- _vm.calcWidth(column.minWidth) ||
1598
- "unset",
1599
- "max-width":
1600
- _vm.calcWidth(column.maxWidth) ||
1601
- "unset"
1593
+ width:
1594
+ _vm.calcWidth(
1595
+ column,
1596
+ column.maxWidth || column.minWidth
1597
+ ) || "unset"
1602
1598
  },
1603
1599
  attrs: { index: index }
1604
1600
  },
1605
1601
  [
1606
- column.type !== "action"
1607
- ? [
1608
- index === 0 &&
1609
- _vm.instance.groupColumnNames.length >
1610
- 0
1611
- ? _vm._l(
1612
- _vm.instance.groupColumnNames,
1613
- function(name, groupIndex) {
1614
- return _c("span", {
1615
- key: name,
1616
- class: [
1617
- "tek-grid-header-group-identation",
1618
- {
1619
- "first-group":
1620
- groupIndex === 0
1602
+ _c(
1603
+ "span",
1604
+ {
1605
+ staticClass: "zd-table-header-cell",
1606
+ style: {
1607
+ width: _vm.calcHeaderCellWidth(column)
1608
+ }
1609
+ },
1610
+ [
1611
+ column.type !== "action"
1612
+ ? [
1613
+ index === 0 &&
1614
+ _vm.instance.groupColumnNames
1615
+ .length > 0
1616
+ ? _vm._l(
1617
+ _vm.instance
1618
+ .groupColumnNames,
1619
+ function(name, groupIndex) {
1620
+ return _c("span", {
1621
+ key: name,
1622
+ class: [
1623
+ "tek-grid-header-group-identation",
1624
+ {
1625
+ "first-group":
1626
+ groupIndex === 0
1627
+ }
1628
+ ]
1629
+ })
1630
+ }
1631
+ )
1632
+ : _vm._e(),
1633
+ _vm._v(" "),
1634
+ column.sortable &&
1635
+ column.align === "right" &&
1636
+ !_vm.instance.editing
1637
+ ? _c(
1638
+ "span",
1639
+ {
1640
+ staticClass:
1641
+ "zd-table-cell-sort zd-mr-1",
1642
+ on: {
1643
+ click: function(
1644
+ $event
1645
+ ) {
1646
+ return _vm.instance.changeColumnOrder(
1647
+ column
1648
+ )
1649
+ }
1621
1650
  }
1622
- ]
1623
- })
1624
- }
1625
- )
1626
- : _vm._e(),
1627
- _vm._v(" "),
1628
- column.sortable &&
1629
- column.align === "right" &&
1630
- !_vm.instance.editing
1631
- ? _c(
1651
+ },
1652
+ [
1653
+ column.sortable &&
1654
+ column.align ===
1655
+ "right" &&
1656
+ !_vm.instance.editing
1657
+ ? _c(
1658
+ "v-icon",
1659
+ {
1660
+ staticClass:
1661
+ "zd-table-cell-sort-icon",
1662
+ attrs: {
1663
+ small: ""
1664
+ }
1665
+ },
1666
+ [
1667
+ _vm._v(
1668
+ "\n " +
1669
+ _vm._s(
1670
+ _vm.$getIcon(
1671
+ "chevronUp"
1672
+ )
1673
+ ) +
1674
+ "\n "
1675
+ )
1676
+ ]
1677
+ )
1678
+ : _vm._e(),
1679
+ _vm._v(" "),
1680
+ _vm.instance.datasource.findOrderIndex(
1681
+ column.name
1682
+ ) >= 0
1683
+ ? _c(
1684
+ "span",
1685
+ {
1686
+ staticClass:
1687
+ "zd-table-cell-sort-order left"
1688
+ },
1689
+ [
1690
+ _vm._v(
1691
+ "\n " +
1692
+ _vm._s(
1693
+ _vm.instance.datasource.findOrderIndex(
1694
+ column.name
1695
+ ) + 1
1696
+ ) +
1697
+ "\n "
1698
+ )
1699
+ ]
1700
+ )
1701
+ : _vm._e()
1702
+ ],
1703
+ 1
1704
+ )
1705
+ : _vm._e(),
1706
+ _vm._v(" "),
1707
+ _c(
1632
1708
  "span",
1633
1709
  {
1634
- staticClass:
1635
- "zd-table-cell-sort",
1710
+ class: [
1711
+ "zd-table-cell-name",
1712
+ {
1713
+ "overflow-hidden":
1714
+ column.overflow ===
1715
+ "hidden",
1716
+ "overflow-wrap":
1717
+ column.overflow ===
1718
+ "wrap"
1719
+ },
1720
+ !isNaN(column.overflow)
1721
+ ? "overflow-clamp overflow-clamp-" +
1722
+ column.overflow
1723
+ : ""
1724
+ ],
1636
1725
  on: {
1637
1726
  click: function($event) {
1638
1727
  return _vm.instance.changeColumnOrder(
1639
1728
  column
1640
1729
  )
1730
+ },
1731
+ mouseenter: function(
1732
+ $event
1733
+ ) {
1734
+ return _vm.checkOverflow(
1735
+ $event
1736
+ )
1737
+ },
1738
+ mouseleave: function(
1739
+ $event
1740
+ ) {
1741
+ return _vm.removeTooltip()
1641
1742
  }
1642
1743
  }
1643
1744
  },
1644
1745
  [
1645
- column.sortable &&
1646
- column.align === "right" &&
1647
- !_vm.instance.editing
1648
- ? _c(
1649
- "v-icon",
1650
- {
1651
- staticClass:
1652
- "zd-table-cell-sort-icon",
1653
- attrs: { small: "" }
1654
- },
1655
- [
1656
- _vm._v(
1657
- _vm._s(
1658
- _vm.$getIcon(
1659
- "chevronUp"
1660
- )
1661
- )
1662
- )
1663
- ]
1664
- )
1665
- : _vm._e(),
1666
- _vm._v(" "),
1667
- _vm.instance.datasource.findOrderIndex(
1668
- column.name
1669
- ) >= 0
1746
+ _vm._v(
1747
+ "\n " +
1748
+ _vm._s(
1749
+ _vm.$t(column.label)
1750
+ ) +
1751
+ "\n "
1752
+ ),
1753
+ column.aggregation
1670
1754
  ? _c(
1671
1755
  "span",
1672
1756
  {
1673
1757
  staticClass:
1674
- "zd-table-cell-sort-order left"
1758
+ "tek-grid-column-aggregation"
1675
1759
  },
1676
1760
  [
1677
1761
  _vm._v(
1678
- _vm._s(
1679
- _vm.instance.datasource.findOrderIndex(
1680
- column.name
1681
- ) + 1
1682
- )
1762
+ "(" +
1763
+ _vm._s(
1764
+ _vm.$t(
1765
+ "TEKGRID_AGGREGATION_" +
1766
+ column.aggregation
1767
+ )
1768
+ ) +
1769
+ ")"
1683
1770
  )
1684
1771
  ]
1685
1772
  )
1686
1773
  : _vm._e()
1687
- ],
1688
- 1
1689
- )
1690
- : _vm._e(),
1691
- _vm._v(" "),
1692
- _c(
1693
- "span",
1694
- {
1695
- class: [
1696
- "zd-table-cell-name",
1697
- {
1698
- "overflow-hidden":
1699
- column.overflow ===
1700
- "hidden",
1701
- "overflow-wrap":
1702
- column.overflow === "wrap"
1703
- },
1704
- !isNaN(column.overflow)
1705
- ? "overflow-clamp overflow-clamp-" +
1706
- column.overflow
1707
- : ""
1708
- ],
1709
- style: {
1710
- "max-width": _vm.calcColumnLabelWidth(
1711
- column
1712
- )
1713
- },
1714
- on: {
1715
- click: function($event) {
1716
- return _vm.instance.changeColumnOrder(
1717
- column
1718
- )
1719
- }
1720
- }
1721
- },
1722
- [
1723
- _vm._v(
1724
- "\n " +
1725
- _vm._s(_vm.$t(column.label)) +
1726
- "\n "
1774
+ ]
1727
1775
  ),
1728
- column.aggregation
1776
+ _vm._v(" "),
1777
+ column.sortable &&
1778
+ column.align !== "right" &&
1779
+ !_vm.instance.editing
1729
1780
  ? _c(
1730
1781
  "span",
1731
1782
  {
1732
1783
  staticClass:
1733
- "tek-grid-column-aggregation"
1784
+ "zd-table-cell-sort zd-ml-1",
1785
+ on: {
1786
+ click: function(
1787
+ $event
1788
+ ) {
1789
+ return _vm.instance.changeColumnOrder(
1790
+ column
1791
+ )
1792
+ }
1793
+ }
1734
1794
  },
1735
1795
  [
1736
- _vm._v(
1737
- "(" +
1738
- _vm._s(
1739
- _vm.$t(
1740
- "TEKGRID_AGGREGATION_" +
1741
- column.aggregation
1742
- )
1743
- ) +
1744
- ")"
1745
- )
1746
- ]
1796
+ column.sortable &&
1797
+ column.align !==
1798
+ "right" &&
1799
+ !_vm.instance.editing
1800
+ ? _c(
1801
+ "v-icon",
1802
+ {
1803
+ staticClass:
1804
+ "zd-table-cell-sort-icon",
1805
+ attrs: {
1806
+ small: ""
1807
+ }
1808
+ },
1809
+ [
1810
+ _vm._v(
1811
+ "\n " +
1812
+ _vm._s(
1813
+ _vm.$getIcon(
1814
+ "chevronUp"
1815
+ )
1816
+ ) +
1817
+ "\n "
1818
+ )
1819
+ ]
1820
+ )
1821
+ : _vm._e(),
1822
+ _vm._v(" "),
1823
+ _vm.instance.datasource.findOrderIndex(
1824
+ column.name
1825
+ ) >= 0
1826
+ ? _c(
1827
+ "span",
1828
+ {
1829
+ staticClass:
1830
+ "zd-table-cell-sort-order"
1831
+ },
1832
+ [
1833
+ _vm._v(
1834
+ "\n " +
1835
+ _vm._s(
1836
+ _vm.instance.datasource.findOrderIndex(
1837
+ column.name
1838
+ ) + 1
1839
+ ) +
1840
+ "\n "
1841
+ )
1842
+ ]
1843
+ )
1844
+ : _vm._e()
1845
+ ],
1846
+ 1
1747
1847
  )
1748
1848
  : _vm._e()
1749
1849
  ]
1750
- ),
1751
- _vm._v(" "),
1752
- column.sortable &&
1753
- column.align !== "right" &&
1754
- !_vm.instance.editing
1755
- ? _c(
1850
+ : [
1851
+ _c(
1756
1852
  "span",
1757
1853
  {
1758
1854
  staticClass:
1759
- "zd-table-cell-sort",
1760
- on: {
1761
- click: function($event) {
1762
- return _vm.instance.changeColumnOrder(
1763
- column
1764
- )
1765
- }
1766
- }
1855
+ "zd-table-cell-name"
1767
1856
  },
1768
1857
  [
1769
- column.sortable &&
1770
- column.align !== "right" &&
1771
- !_vm.instance.editing
1772
- ? _c(
1773
- "v-icon",
1774
- {
1775
- staticClass:
1776
- "zd-table-cell-sort-icon",
1777
- attrs: { small: "" }
1778
- },
1779
- [
1780
- _vm._v(
1781
- _vm._s(
1782
- _vm.$getIcon(
1783
- "chevronUp"
1784
- )
1785
- )
1786
- )
1787
- ]
1788
- )
1789
- : _vm._e(),
1790
- _vm._v(" "),
1791
- _vm.instance.datasource.findOrderIndex(
1792
- column.name
1793
- ) >= 0
1794
- ? _c(
1795
- "span",
1796
- {
1797
- staticClass:
1798
- "zd-table-cell-sort-order"
1799
- },
1800
- [
1801
- _vm._v(
1802
- _vm._s(
1803
- _vm.instance.datasource.findOrderIndex(
1804
- column.name
1805
- ) + 1
1806
- )
1807
- )
1808
- ]
1809
- )
1810
- : _vm._e()
1811
- ],
1812
- 1
1813
- )
1814
- : _vm._e()
1815
- ]
1816
- : [
1817
- _c(
1818
- "span",
1819
- {
1820
- staticClass: "zd-table-cell-name"
1821
- },
1822
- [
1823
- _vm._v(
1824
- _vm._s(_vm.$t(column.label))
1858
+ _vm._v(
1859
+ _vm._s(_vm.$t(column.label))
1860
+ )
1861
+ ]
1825
1862
  )
1826
- ]
1827
- )
1828
- ],
1829
- _vm._v(" "),
1830
- _vm.instance.columnFilterButton &&
1831
- column.filterable
1832
- ? _c(
1833
- "span",
1834
- {
1835
- class: [
1836
- "tek-grid-column-filter-button",
1837
- {
1838
- "has-filter-data": _vm.instance.columnHasFilterData(
1839
- column
1840
- )
1841
- }
1842
- ]
1843
- },
1844
- [
1845
- _c(
1846
- "v-menu",
1863
+ ],
1864
+ _vm._v(" "),
1865
+ _vm.instance.columnFilterButton &&
1866
+ column.filterable
1867
+ ? _c(
1868
+ "span",
1847
1869
  {
1848
- attrs: {
1849
- "offset-overflow": "",
1850
- "offset-y": "",
1851
- "min-width": 200,
1852
- transition:
1853
- "scale-transition",
1854
- "content-class":
1855
- "tek-grid-column-filter-menu",
1856
- "close-on-content-click": false
1857
- },
1858
- scopedSlots: _vm._u(
1859
- [
1860
- {
1861
- key: "activator",
1862
- fn: function(ref) {
1863
- var on = ref.on;
1864
- return [
1865
- _c(
1866
- "v-icon",
1867
- _vm._g(
1868
- {},
1869
- Object.assign(
1870
- {},
1871
- _vm.getFilterActivatorEvents(
1872
- on
1873
- )
1874
- )
1875
- ),
1876
- [
1877
- _vm._v(
1878
- _vm._s(
1879
- _vm.$getIcon(
1880
- "filter"
1881
- )
1882
- )
1883
- )
1884
- ]
1885
- )
1886
- ]
1887
- }
1888
- }
1889
- ],
1890
- null,
1891
- true
1892
- )
1870
+ class: [
1871
+ "tek-grid-column-filter-button",
1872
+ {
1873
+ "has-filter-data": _vm.instance.columnHasFilterData(
1874
+ column
1875
+ )
1876
+ }
1877
+ ]
1893
1878
  },
1894
1879
  [
1895
- _vm._v(" "),
1896
- _vm._l(
1897
- _vm.getColumnFilterOptions(
1898
- column
1899
- ),
1900
- function(item, filterIndex) {
1901
- return _c(
1902
- "span",
1903
- { key: filterIndex },
1880
+ _c(
1881
+ "v-menu",
1882
+ {
1883
+ attrs: {
1884
+ "offset-overflow": "",
1885
+ "offset-y": "",
1886
+ "min-width": 200,
1887
+ transition:
1888
+ "scale-transition",
1889
+ "content-class":
1890
+ "tek-grid-column-filter-menu",
1891
+ "close-on-content-click": false
1892
+ },
1893
+ scopedSlots: _vm._u(
1904
1894
  [
1905
- filterIndex > 0
1906
- ? _c(
1907
- "zd-radio",
1908
- _vm._b(
1909
- {
1910
- attrs: {
1911
- name:
1912
- _vm
1913
- .instance
1914
- .name +
1915
- "-" +
1916
- column.name +
1917
- "-filter-relation-" +
1918
- filterIndex
1919
- }
1920
- },
1921
- "zd-radio",
1922
- {
1923
- showLabel: false,
1924
- showHelper: false,
1925
- vertical: false,
1926
- cssClass:
1927
- "zd-mb-2",
1928
- datasource:
1929
- _vm.instance
1930
- .filterRelationsDatasource,
1931
- dataValue:
1932
- "value",
1933
- dataLabel:
1934
- "text",
1935
- value:
1936
- item.relation,
1937
- events: {
1938
- change: _vm.getFilterItemChange(
1939
- "relation",
1940
- column,
1941
- filterIndex
1895
+ {
1896
+ key: "activator",
1897
+ fn: function(ref) {
1898
+ var on = ref.on;
1899
+ return [
1900
+ _c(
1901
+ "v-icon",
1902
+ _vm._g(
1903
+ {},
1904
+ Object.assign(
1905
+ {},
1906
+ _vm.getFilterActivatorEvents(
1907
+ on
1942
1908
  )
1943
- }
1944
- },
1945
- false
1909
+ )
1910
+ ),
1911
+ [
1912
+ _vm._v(
1913
+ _vm._s(
1914
+ _vm.$getIcon(
1915
+ "filter"
1916
+ )
1917
+ )
1918
+ )
1919
+ ]
1946
1920
  )
1947
- )
1948
- : _vm._e(),
1949
- _vm._v(" "),
1950
- item.operation !==
1951
- undefined
1952
- ? _c(
1953
- "zd-select",
1921
+ ]
1922
+ }
1923
+ }
1924
+ ],
1925
+ null,
1926
+ true
1927
+ )
1928
+ },
1929
+ [
1930
+ _vm._v(" "),
1931
+ _vm._l(
1932
+ _vm.getColumnFilterOptions(
1933
+ column
1934
+ ),
1935
+ function(
1936
+ item,
1937
+ filterIndex
1938
+ ) {
1939
+ return _c(
1940
+ "span",
1941
+ { key: filterIndex },
1942
+ [
1943
+ filterIndex > 0
1944
+ ? _c(
1945
+ "zd-radio",
1946
+ _vm._b(
1947
+ {
1948
+ attrs: {
1949
+ name:
1950
+ _vm
1951
+ .instance
1952
+ .name +
1953
+ "-" +
1954
+ column.name +
1955
+ "-filter-relation-" +
1956
+ filterIndex
1957
+ }
1958
+ },
1959
+ "zd-radio",
1960
+ {
1961
+ showLabel: false,
1962
+ showHelper: false,
1963
+ vertical: false,
1964
+ cssClass:
1965
+ "zd-mb-2",
1966
+ datasource:
1967
+ _vm
1968
+ .instance
1969
+ .filterRelationsDatasource,
1970
+ dataValue:
1971
+ "value",
1972
+ dataLabel:
1973
+ "text",
1974
+ value:
1975
+ item.relation,
1976
+ events: {
1977
+ change: _vm.getFilterItemChange(
1978
+ "relation",
1979
+ column,
1980
+ filterIndex
1981
+ )
1982
+ }
1983
+ },
1984
+ false
1985
+ )
1986
+ )
1987
+ : _vm._e(),
1988
+ _vm._v(" "),
1989
+ item.operation !==
1990
+ undefined
1991
+ ? _c(
1992
+ "zd-select",
1993
+ _vm._b(
1994
+ {
1995
+ attrs: {
1996
+ name:
1997
+ _vm
1998
+ .instance
1999
+ .name +
2000
+ "-" +
2001
+ column.name +
2002
+ "-filter-operation-" +
2003
+ filterIndex
2004
+ }
2005
+ },
2006
+ "zd-select",
2007
+ {
2008
+ autocomplete: false,
2009
+ showLabel: false,
2010
+ showHelper: false,
2011
+ clearable: false,
2012
+ cssClass:
2013
+ "zd-mb-2",
2014
+ datasource:
2015
+ _vm
2016
+ .instance
2017
+ .filterOperationsDatasource,
2018
+ dataValue:
2019
+ "value",
2020
+ dataText:
2021
+ "text",
2022
+ value:
2023
+ item.operation,
2024
+ events: {
2025
+ change: _vm.getFilterItemChange(
2026
+ "operation",
2027
+ column,
2028
+ filterIndex
2029
+ )
2030
+ }
2031
+ },
2032
+ false
2033
+ )
2034
+ )
2035
+ : _vm._e(),
2036
+ _vm._v(" "),
2037
+ _c(
2038
+ _vm.componentType ||
2039
+ column
2040
+ .componentProps
2041
+ .component,
1954
2042
  _vm._b(
1955
2043
  {
2044
+ tag:
2045
+ "component",
1956
2046
  attrs: {
1957
2047
  name:
1958
2048
  _vm
@@ -1960,116 +2050,70 @@
1960
2050
  .name +
1961
2051
  "-" +
1962
2052
  column.name +
1963
- "-filter-operation-" +
2053
+ "-filter-value-" +
1964
2054
  filterIndex
1965
2055
  }
1966
2056
  },
1967
- "zd-select",
1968
- {
1969
- autocomplete: false,
1970
- showLabel: false,
1971
- showHelper: false,
1972
- clearable: false,
1973
- cssClass:
1974
- "zd-mb-2",
1975
- datasource:
1976
- _vm.instance
1977
- .filterOperationsDatasource,
1978
- dataValue:
1979
- "value",
1980
- dataText:
1981
- "text",
1982
- value:
1983
- item.operation,
1984
- events: {
1985
- change: _vm.getFilterItemChange(
1986
- "operation",
1987
- column,
1988
- filterIndex
1989
- )
2057
+ "component",
2058
+ Object.assign(
2059
+ {},
2060
+ column.componentProps,
2061
+ {
2062
+ showLabel: false,
2063
+ showHelper: true,
2064
+ autofill: false,
2065
+ cssClass:
2066
+ "zd-mb-2",
2067
+ value:
2068
+ item.value,
2069
+ persistentHint: true,
2070
+ events: {
2071
+ input: _vm.getFilterValueChange(
2072
+ column,
2073
+ filterIndex
2074
+ )
2075
+ }
1990
2076
  }
1991
- },
2077
+ ),
1992
2078
  false
1993
2079
  )
1994
2080
  )
1995
- : _vm._e(),
1996
- _vm._v(" "),
1997
- _c(
1998
- _vm.componentType ||
1999
- column
2000
- .componentProps
2001
- .component,
2002
- _vm._b(
2003
- {
2004
- tag: "component",
2005
- attrs: {
2006
- name:
2007
- _vm.instance
2008
- .name +
2009
- "-" +
2010
- column.name +
2011
- "-filter-value-" +
2012
- filterIndex
2013
- }
2014
- },
2015
- "component",
2016
- Object.assign(
2017
- {},
2018
- column.componentProps,
2019
- {
2020
- showLabel: false,
2021
- showHelper: true,
2022
- autofill: false,
2023
- cssClass:
2024
- "zd-mb-2",
2025
- value:
2026
- item.value,
2027
- persistentHint: true,
2028
- events: {
2029
- input: _vm.getFilterValueChange(
2030
- column,
2031
- filterIndex
2032
- )
2033
- }
2034
- }
2035
- ),
2036
- false
2037
- )
2081
+ ],
2082
+ 1
2038
2083
  )
2039
- ],
2040
- 1
2084
+ }
2041
2085
  )
2042
- }
2086
+ ],
2087
+ 2
2043
2088
  )
2044
2089
  ],
2045
- 2
2090
+ 1
2046
2091
  )
2047
- ],
2048
- 1
2049
- )
2050
- : _vm._e(),
2051
- _vm._v(" "),
2052
- _vm.instance.resizeColumns
2053
- ? _c(
2054
- "span",
2055
- {
2056
- staticClass:
2057
- "zd-grid-resize-handle",
2058
- on: {
2059
- mousedown: function($event) {
2060
- return _vm.resizeMouseDownHandler(
2061
- column,
2062
- $event
2063
- )
2092
+ : _vm._e(),
2093
+ _vm._v(" "),
2094
+ _vm.instance.resizeColumns
2095
+ ? _c(
2096
+ "span",
2097
+ {
2098
+ staticClass:
2099
+ "zd-grid-resize-handle",
2100
+ on: {
2101
+ mousedown: function($event) {
2102
+ return _vm.resizeMouseDownHandler(
2103
+ column,
2104
+ $event
2105
+ )
2106
+ },
2107
+ click: _vm.resizeClickHandler
2108
+ }
2064
2109
  },
2065
- click: _vm.resizeClickHandler
2066
- }
2067
- },
2068
- [_vm._v("‖")]
2069
- )
2070
- : _vm._e()
2071
- ],
2072
- 2
2110
+ [_vm._v("‖")]
2111
+ )
2112
+ : _vm._e()
2113
+ ],
2114
+ 2
2115
+ )
2116
+ ]
2073
2117
  )
2074
2118
  : _vm._e()
2075
2119
  ]
@@ -2284,11 +2328,18 @@
2284
2328
  ).editable
2285
2329
  }
2286
2330
  ],
2287
- style: Object.assign(
2288
- {},
2289
- column,
2290
- cellProps
2291
- ).style,
2331
+ style: [
2332
+ Object.assign(
2333
+ {},
2334
+ column,
2335
+ cellProps
2336
+ ).style,
2337
+ Object.assign(
2338
+ {},
2339
+ column,
2340
+ cellProps
2341
+ ).cssStyle
2342
+ ],
2292
2343
  on: {
2293
2344
  click: function($event) {
2294
2345
  return _vm.cellClick(
@@ -2365,15 +2416,18 @@
2365
2416
  style: {
2366
2417
  width:
2367
2418
  _vm.calcWidth(
2419
+ column,
2368
2420
  column.maxWidth ||
2369
2421
  column.minWidth
2370
2422
  ) || "unset",
2371
2423
  "min-width":
2372
2424
  _vm.calcWidth(
2425
+ column,
2373
2426
  column.minWidth
2374
2427
  ) || "unset",
2375
2428
  "max-width":
2376
2429
  _vm.calcWidth(
2430
+ column,
2377
2431
  column.maxWidth
2378
2432
  ) || "unset"
2379
2433
  }
@@ -2516,17 +2570,34 @@
2516
2570
  style: {
2517
2571
  width:
2518
2572
  _vm.calcWidth(
2573
+ column,
2519
2574
  column.maxWidth ||
2520
2575
  column.minWidth
2521
2576
  ) || "unset",
2522
2577
  "min-width":
2523
2578
  _vm.calcWidth(
2579
+ column,
2524
2580
  column.minWidth
2525
2581
  ) || "unset",
2526
2582
  "max-width":
2527
2583
  _vm.calcWidth(
2584
+ column,
2528
2585
  column.maxWidth
2529
2586
  ) || "unset"
2587
+ },
2588
+ on: {
2589
+ mouseenter: function(
2590
+ $event
2591
+ ) {
2592
+ return _vm.checkOverflow(
2593
+ $event
2594
+ )
2595
+ },
2596
+ mouseleave: function(
2597
+ $event
2598
+ ) {
2599
+ return _vm.removeTooltip()
2600
+ }
2530
2601
  }
2531
2602
  },
2532
2603
  [
@@ -2555,7 +2626,24 @@
2555
2626
  key: column.name,
2556
2627
  class: [
2557
2628
  "zd-table-cell",
2558
- "text-" + column.align
2629
+ "text-" + column.align,
2630
+ Object.assign(
2631
+ {},
2632
+ column,
2633
+ cellProps
2634
+ ).cssClass
2635
+ ],
2636
+ style: [
2637
+ Object.assign(
2638
+ {},
2639
+ column,
2640
+ cellProps
2641
+ ).style,
2642
+ Object.assign(
2643
+ {},
2644
+ column,
2645
+ cellProps
2646
+ ).cssStyle
2559
2647
  ],
2560
2648
  on: {
2561
2649
  click: function($event) {
@@ -2629,7 +2717,7 @@
2629
2717
  key: "no-data",
2630
2718
  fn: function() {
2631
2719
  return [
2632
- _c("zd-grid-no-data", {
2720
+ _c("zd-iterable-no-data", {
2633
2721
  ref: "gridNoData",
2634
2722
  attrs: {
2635
2723
  name: _vm.instance.name + "_no_data",
@@ -2675,19 +2763,20 @@
2675
2763
  key: "footer",
2676
2764
  fn: function() {
2677
2765
  return [
2678
- _c(
2679
- "zd-grid-footer",
2680
- {
2681
- ref: "gridFooter",
2682
- attrs: {
2683
- name: _vm.instance.name + "_footer",
2684
- instance: _vm.instance,
2685
- footerSlot: _vm.instance.footerSlot
2686
- }
2687
- },
2688
- [_vm._t("footerSlot")],
2689
- 2
2690
- )
2766
+ !_vm.$slots.footerSlot
2767
+ ? [
2768
+ _c("zd-grid-footer", {
2769
+ ref: "gridFooter",
2770
+ attrs: {
2771
+ name: _vm.instance.name + "_footer",
2772
+ instance: _vm.instance,
2773
+ footerSlot: _vm.instance.footerSlot
2774
+ }
2775
+ })
2776
+ ]
2777
+ : _vm._e(),
2778
+ _vm._v(" "),
2779
+ _vm._t("footerSlot")
2691
2780
  ]
2692
2781
  },
2693
2782
  proxy: true
@@ -2712,7 +2801,7 @@
2712
2801
  /* style */
2713
2802
  const __vue_inject_styles__$7 = function (inject) {
2714
2803
  if (!inject) return
2715
- inject("data-v-948bc68a_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 .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-cell-text {\n display: inline-block;\n vertical-align: middle;\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\n/*# sourceMappingURL=TekGrid.vue.map */", map: {"version":3,"sources":["/Users/zedmartins/workfolder/zeedhi/teknisa-components/packages/vuetify/src/components/tek-grid/TekGrid.vue","TekGrid.vue"],"names":[],"mappings":"AAqbA;EACA,YAAA;ACpbA;ADsbA;EACA,mBAAA;ACpbA;ADubA;EACA,YAAA;ACrbA;ADwbA;EACA,iBAAA;ACtbA;AD6bA;EACA,8BAAA;AC3bA;AD6bA;EACA,qBAAA;AC3bA;AD6bA;EACA,eAAA;EACA,eAAA;EACA,WAAA;EACA,cAAA;EACA,UAAA;EACA,WAAA;AC3bA;AD+bA;EACA,UAAA;EACA,4BAAA;AC7bA;ADqcA;EACA,UAAA;ACncA;AD4cA;EACA,mBAAA;AC1cA;AD4cA;EACA,gBAAA;AC1cA;AD8cA;EACA,gBAAA;AC5cA;AD8cA;EACA,gBAAA;EACA,eAAA;AC5cA;ADkdA;EACA,iBAAA;AChdA;ADkdA;EACA,eAAA;AChdA;ADkdA;EACA,yBAAA;AChdA;ADqdA;EACA,qBAAA;EACA,sBAAA;ACndA;AD0dA;EACA,WAAA;EACA,qBAAA;EACA,sBAAA;ACxdA;AD0dA;EACA,WAAA;ACxdA;AD4dA;EACA,UAAA;EACA,qBAAA;EACA,sBAAA;EACA,iBAAA;EACA,YAAA;EACA,2BAAA;AC1dA;AD4dA;EACA,WAAA;EACA,iBAAA;AC1dA;AD6dA;EACA,WAAA;EACA,6BAAA;EACA,kBAAA;EACA,SAAA;AC3dA;AD8dA;EACA,iBAAA;AC5dA;ADkeA;EACA,YAAA;ACheA;ADseA;EACA,cAAA;ACneA;ADueA;EACA,iBAAA;EACA,yBAAA;EACA,iBAAA;ACpeA;;AAEA,sCAAsC","file":"TekGrid.vue","sourcesContent":["<template>\n <v-data-table\n v-show=\"instance.isVisible\"\n ref=\"grid\"\n v-model=\"instance.selectedRows\"\n fixed-header\n disable-pagination\n hide-default-header\n hide-default-footer\n :class=\"['zd-grid', 'tek-grid', instance.cssClass]\"\n :name=\"instance.name\"\n :headers=\"instance.columns\"\n :height=\"instance.height\"\n :items=\"getData()\"\n :search=\"instance.datasource.search\"\n :show-select=\"instance.selectable\"\n :dense=\"instance.dense\"\n :loading=\"instance.datasource.loading\"\n :item-key=\"instance.datasource.uniqueKey\"\n :style=\"[cssColorVars, instance.cssStyle]\"\n disable-sort\n disable-filtering\n tabindex=\"0\"\n @current-items=\"changeData($event)\"\n >\n <template v-slot:top>\n <zd-grid-top\n :name=\"instance.name+'_top'\"\n :toolbarSlot=\"instance.toolbarSlot\"\n :instance=\"instance\"\n ref=\"gridTopSlot\">\n <slot name=\"toolbarSlot\"></slot>\n </zd-grid-top>\n </template>\n\n <template v-if=\"instance.showHeader\" v-slot:header=\"{ props, on }\">\n <thead class=\"zd-grid-table-header\">\n <tr>\n <th class=\"zd-table-cell selectable\" v-if=\"instance.selectable\" :style=\"'background-color: '+instance.headerBackground\">\n <v-checkbox\n hide-details\n color=\"primary\"\n :disabled=\"instance.editing\"\n :on-icon=\"$getIcon('checkboxOn')\"\n :off-icon=\"$getIcon('checkboxOff')\"\n :indeterminate-icon=\"$getIcon('checkboxIndeterminate')\"\n class=\"zd-grid-header-checkbox\"\n :input-value=\"props.everyItem\"\n :indeterminate=\"!props.everyItem && props.someItems\"\n @click.stop=\"on['toggle-select-all'](!props.everyItem); selectAllClick(!props.everyItem, $event);\"\n ></v-checkbox>\n </th>\n <template v-for=\"(column, index) in props.headers\">\n <th\n v-if=\"column.isVisible && instance.groupColumnNames.indexOf(column.name) === -1 && getColWidth(column)\"\n :key=\"column.name\"\n :index=\"index\"\n :class=\"[\n 'zd-table-cell',\n 'column-th-'+ column.name + '-' + instance.name,\n {\n sortable: column.sortable && !instance.editing,\n sortHandle: instance.dragColumns,\n },\n 'text-' + column.align,\n instance.datasource.getOrderByColumn(column.name),\n instance.datasource.getOrderByColumn(column.name) !== null ? 'active' : ''\n ]\"\n :style=\"{\n 'background-color': instance.headerBackground,\n 'min-width': calcWidth(column.minWidth) || 'unset',\n 'max-width': calcWidth(column.maxWidth) || 'unset'\n }\"\n >\n <template v-if=\"column.type !== 'action'\">\n <template v-if=\"index === 0 && instance.groupColumnNames.length > 0\">\n <span\n v-for=\"(name, groupIndex) in instance.groupColumnNames\"\n :key=\"name\"\n :class=\"[\n 'tek-grid-header-group-identation',\n {\n 'first-group': groupIndex === 0,\n }\n ]\"\n ></span>\n </template>\n <span\n class=\"zd-table-cell-sort\"\n v-if=\"column.sortable && column.align === 'right' && !instance.editing\"\n @click=\"instance.changeColumnOrder(column)\"\n >\n <v-icon class=\"zd-table-cell-sort-icon\" small v-if=\"column.sortable && column.align === 'right' && !instance.editing\">{{ $getIcon('chevronUp') }}</v-icon>\n <span class=\"zd-table-cell-sort-order left\" v-if=\"instance.datasource.findOrderIndex(column.name) >= 0\">{{ instance.datasource.findOrderIndex(column.name) + 1}}</span>\n </span>\n <span\n :class=\"[\n 'zd-table-cell-name',\n {\n 'overflow-hidden': column.overflow === 'hidden',\n 'overflow-wrap': column.overflow === 'wrap'\n },\n (!isNaN(column.overflow) ? 'overflow-clamp overflow-clamp-'+column.overflow : '')\n ]\"\n :style=\"{\n 'max-width': calcColumnLabelWidth(column)\n }\"\n @click=\"instance.changeColumnOrder(column)\"\n >\n {{ $t(column.label) }}\n <span\n v-if=\"column.aggregation\"\n class=\"tek-grid-column-aggregation\"\n >({{ $t('TEKGRID_AGGREGATION_'+column.aggregation) }})</span>\n </span>\n <span\n class=\"zd-table-cell-sort\"\n v-if=\"column.sortable && column.align !== 'right' && !instance.editing\"\n @click=\"instance.changeColumnOrder(column)\"\n >\n <v-icon class=\"zd-table-cell-sort-icon\" small v-if=\"column.sortable && column.align !== 'right' && !instance.editing\">{{ $getIcon('chevronUp') }}</v-icon>\n <span class=\"zd-table-cell-sort-order\" v-if=\"instance.datasource.findOrderIndex(column.name) >= 0\">{{ instance.datasource.findOrderIndex(column.name) + 1}}</span>\n </span>\n </template>\n <template v-else>\n <span class=\"zd-table-cell-name\">{{ $t(column.label) }}</span>\n </template>\n <span\n v-if=\"instance.columnFilterButton && column.filterable\"\n :class=\"[\n 'tek-grid-column-filter-button',\n {\n 'has-filter-data': instance.columnHasFilterData(column)\n }\n ]\"\n >\n <v-menu\n offset-overflow\n offset-y\n :min-width=\"200\"\n transition=\"scale-transition\"\n content-class=\"tek-grid-column-filter-menu\"\n :close-on-content-click=\"false\"\n >\n <template v-slot:activator=\"{ on }\">\n <v-icon v-on=\"{ ...getFilterActivatorEvents(on) }\">{{ $getIcon('filter') }}</v-icon>\n </template>\n <span\n v-for=\"(item, filterIndex) in getColumnFilterOptions(column)\"\n :key=\"filterIndex\"\n >\n <zd-radio\n :name=\"`${instance.name}-${column.name}-filter-relation-${filterIndex}`\"\n v-if=\"filterIndex > 0\"\n v-bind=\"{\n showLabel: false,\n showHelper: false,\n vertical: false,\n cssClass: 'zd-mb-2',\n datasource: instance.filterRelationsDatasource,\n dataValue: 'value',\n dataLabel: 'text',\n value: item.relation,\n events: {\n change: getFilterItemChange('relation', column, filterIndex),\n },\n }\"\n />\n <zd-select\n :name=\"`${instance.name}-${column.name}-filter-operation-${filterIndex}`\"\n v-if=\"item.operation !== undefined\"\n v-bind=\"{\n autocomplete: false,\n showLabel: false,\n showHelper: false,\n clearable: false,\n cssClass: 'zd-mb-2',\n datasource: instance.filterOperationsDatasource,\n dataValue: 'value',\n dataText: 'text',\n value: item.operation,\n events: {\n change: getFilterItemChange('operation', column, filterIndex),\n },\n }\"\n />\n <component\n :name=\"`${instance.name}-${column.name}-filter-value-${filterIndex}`\"\n :is=\"componentType || column.componentProps.component\"\n v-bind=\"{\n ...column.componentProps,\n showLabel: false,\n showHelper: true,\n autofill: false,\n cssClass: 'zd-mb-2',\n value: item.value,\n persistentHint: true,\n events: {\n input: getFilterValueChange(column, filterIndex)\n },\n }\"\n />\n </span>\n </v-menu>\n </span>\n <span\n v-if=\"instance.resizeColumns\"\n class=\"zd-grid-resize-handle\"\n @mousedown=\"resizeMouseDownHandler(column, $event)\"\n @click=\"resizeClickHandler\"\n >‖</span>\n </th>\n </template>\n </tr>\n </thead>\n </template>\n\n <template\n v-if=\"instance.virtualScroll && scrollData.start > 0\"\n v-slot:body.prepend=\"{ headers }\"\n >\n <tr>\n <td\n :colspan=\"headers.length\"\n :style=\"'padding-top:'+scrollData.startHeight+'px'\"\n >\n </td>\n </tr>\n </template>\n\n <template\n v-if=\"instance.virtualScroll && scrollData.start + scrollData.perPage < (scrollData.visibleData || []).length\"\n v-slot:body.append=\"{ headers }\"\n >\n <tr>\n <td\n :colspan=\"headers.length\"\n :style=\"'padding-top:'+scrollData.endHeight+'px'\"\n >\n </td>\n </tr>\n </template> \n\n <template v-if=\"instance.datasource.data.length\" v-slot:item=\"{ item, select, isSelected, headers }\">\n <tr \n v-if=\"item.group && instance.isItemVisible(item)\"\n :class=\"{\n current: isCurrentRow(item),\n }\"\n @click=\"rowClick(item, $event)\"\n >\n <td\n colspan=\"999\"\n class=\"zd-table-cell text-left zd-table-group-header\"\n >\n <template>\n <span\n v-for=\"(groupHeader, groupIndex) in item.groupHeaders\"\n :key=\"groupHeader.groupColumnName\"\n :class=\"[\n 'tek-grid-body-group-identation',\n {\n 'first-group': groupIndex === 0,\n },\n ]\"\n ></span>\n </template>\n <v-icon\n :class=\"{ closed: !item.groupOpened }\"\n @click=\"instance.openGroup(item)\"\n :key=\"item.groupIndex + '_' + item.groupValue\"\n >{{ $getIcon('expand') }}</v-icon>\n <span>{{ item.groupLabel + ': ' + item.groupValue }}</span>\n </td>\n </tr>\n <tr\n v-else-if=\"instance.isItemVisible(item)\"\n :class=\"{\n active: isSelected,\n current: isCurrentRow(item),\n footer: item.groupFooter,\n summary: item.groupSummary,\n }\"\n @click=\"rowClick(item, $event)\"\n >\n <td class=\"zd-table-cell selectable\" v-if=\"instance.selectable\">\n <v-checkbox\n hide-details\n color=\"primary\"\n class=\"zd-grid-row-checkbox\"\n :disabled=\"instance.editing\"\n :on-icon=\"$getIcon('checkboxOn')\"\n :off-icon=\"$getIcon('checkboxOff')\"\n :true-value=\"true\"\n :false-value=\"false\"\n :input-value=\"isSelected\"\n @click.stop=\"select(!isSelected); selectRowClick(item, !isSelected, $event);\"\n ></v-checkbox>\n </td>\n <template v-for=\"(header, index) in headers\">\n <template v-for=\"{ column, cellProps } in [{ column: header, cellProps: item.groupFooter ? {} : (instance.cellsApplied[rowKey(item)] || {})[header.name] }]\">\n <template v-if=\"column.isVisible && instance.groupColumnNames.indexOf(column.name) === -1 && column.type !== 'action'\">\n <td\n :key=\"column.name\"\n :class=\"[\n 'zd-table-cell',\n 'text-' + column.align,\n {...column, ...cellProps}.cssClass,\n {\n 'zd-table-column-editable': column.editable,\n 'zd-table-cell-editable': {...column, ...cellProps}.editable,\n }\n ]\"\n :style=\"{...column, ...cellProps}.style\"\n @click=\"cellClick(item, column, $event)\"\n >\n <template v-if=\"index === 0 && instance.groupColumnNames.length > 0\">\n <span\n v-for=\"(name, groupIndex) in instance.groupColumnNames\"\n :key=\"name\"\n :class=\"[\n 'tek-grid-body-group-identation',\n {\n 'first-group': groupIndex === 0,\n 'group-footer': item.groupFooter && groupIndex === item.groupIndex,\n 'group-footer-no-line': (item.groupFooter && groupIndex > item.groupIndex) || item.groupSummary,\n }\n ]\"\n ></span>\n </template>\n <v-skeleton-loader class=\"zd-skeleton-table-cell\" v-if=\"column.loading\" loading type=\"table-cell\"/>\n <span\n v-show=\"!column.loading\"\n v-if=\"{...column, ...cellProps}.editable && instance.editing && !item.groupFooter\"\n class=\"zd-table-cell-inline-edit\"\n :style=\"{\n 'width': calcWidth(column.maxWidth || column.minWidth) || 'unset',\n 'min-width': calcWidth(column.minWidth) || 'unset',\n 'max-width': calcWidth(column.maxWidth) || 'unset'\n }\"\n >\n <span class=\"zd-table-cell-edit-icon\" v-if=\"instance.isEdited(column, item)\">\n <v-icon v-if=\"instance.isValid(column, item)\" color=\"primary\">{{ $getIcon('pencil') }}</v-icon>\n <v-icon v-else color=\"error\">{{ $getIcon('warning') }}</v-icon>\n </span>\n <component\n :is=\"column.componentProps.component\"\n :key=\"column.name + rowKey(item)\"\n v-bind=\"getEditableComponent(column, item, cellProps)\" />\n </span>\n <span v-else-if=\"hasToggleIcon(column, item)\">\n <v-icon>{{ $getIcon(column.formatterByRow(item, cellProps)) }}</v-icon>\n </span>\n <span v-else\n v-show=\"!column.loading\"\n :class=\"[\n 'zd-table-cell-text',\n {\n 'zd-table-cell-text-editable': {...column, ...cellProps}.editable && !item.groupFooter,\n 'overflow-hidden': column.overflow === 'hidden',\n 'overflow-wrap': column.overflow === 'wrap'\n },\n (!isNaN(column.overflow) ? 'overflow-clamp overflow-clamp-'+column.overflow : '')\n ]\"\n :style=\"{\n 'width': calcWidth(column.maxWidth || column.minWidth) || 'unset',\n 'min-width': calcWidth(column.minWidth) || 'unset',\n 'max-width': calcWidth(column.maxWidth) || 'unset'\n }\"\n >\n {{ column.formatterByRow(item, cellProps) }}\n </span>\n </td>\n </template>\n <template v-else-if=\"column.isVisible && column.type === 'action'\">\n <td\n :key=\"column.name\"\n :class=\"['zd-table-cell', 'text-' + column.align]\"\n @click=\"cellClick(item, column, $event)\"\n >\n <template v-if=\"index === 0 && instance.groupColumnNames.length > 0\">\n <span\n v-for=\"name in instance.groupColumnNames\"\n :key=\"name\"\n class=\"tek-grid-body-group-identation\"\n ></span>\n </template>\n <component\n v-for=\"child in column.childrenProps\"\n :key=\"child.name + rowKey(item)\"\n :is=\"child.component\"\n v-bind=\"instance.getActionComponent(child, column, item)\"\n ></component>\n </td>\n </template>\n </template>\n </template>\n </tr>\n </template>\n\n <template v-slot:no-data>\n <zd-grid-no-data\n :name=\"instance.name+'_no_data'\"\n :instance=\"instance\"\n :noDataSlot=\"instance.noDataSlot\"\n :noResultSlot=\"instance.noResultSlot\"\n :errorSlot=\"instance.errorSlot\"\n ref=\"gridNoData\"\n >\n <template v-slot:errorSlot>\n <slot name=\"errorSlot\"></slot>\n </template>\n <template v-slot:noResultSlot>\n <slot name=\"noResultSlot\"></slot>\n </template>\n <template v-slot:noDataSlot>\n <slot name=\"noDataSlot\"></slot>\n </template>\n </zd-grid-no-data>\n </template>\n\n <template v-if=\"instance.showFooter\" v-slot:footer>\n <zd-grid-footer\n :name=\"instance.name+'_footer'\"\n :instance=\"instance\"\n :footerSlot=\"instance.footerSlot\"\n ref=\"gridFooter\">\n <slot name=\"footerSlot\"></slot>\n </zd-grid-footer>\n </template>\n </v-data-table>\n</template>\n\n<script lang=\"ts\" src=\"./TekGrid.ts\"></script>\n\n<style lang=\"scss\">\n.tek-grid {\n .zd-grid-toolbar {\n height: 36px;\n\n .zd-grid-toolbar-slot {\n align-items: center;\n }\n\n .toolbar-divider {\n margin: 10px;\n }\n\n .toolbar-title {\n line-height: 22px;\n }\n }\n\n table {\n thead {\n tr {\n th {\n padding-right: 15px !important;\n\n .tek-grid-column-filter-button {\n display: inline-block;\n\n .v-icon {\n cursor: pointer;\n font-size: 15px;\n width: 15px;\n padding: 0 3px;\n opacity: 0;\n color: #ccc;\n }\n\n &.has-filter-data {\n .v-icon {\n opacity: 1;\n color: var(--v-primary-base);\n }\n }\n }\n }\n\n th:hover {\n .tek-grid-column-filter-button {\n .v-icon {\n opacity: 1;\n }\n }\n }\n }\n }\n\n tbody {\n tr {\n &.footer {\n background: #f6f6f6;\n\n td.zd-table-cell {\n font-weight: 700;\n }\n }\n\n &.summary {\n background: #eee;\n\n td.zd-table-cell {\n font-weight: 700;\n font-size: 15px;\n }\n }\n\n td {\n &.zd-table-cell {\n &.zd-table-group-header {\n font-weight: bold;\n\n .v-icon {\n font-size: 21px;\n\n &.closed {\n transform: rotate(-90deg);\n }\n }\n }\n\n .zd-table-cell-text {\n display: inline-block;\n vertical-align: middle;\n }\n }\n }\n }\n }\n\n .tek-grid-header-group-identation {\n width: 22px;\n display: inline-block;\n vertical-align: middle;\n\n &.first-group {\n width: 20px;\n }\n }\n\n .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 &.first-group {\n width: 10px;\n margin-left: 10px;\n }\n\n &.group-footer {\n height: 60%;\n border-bottom: solid 1px #ccc;\n position: relative;\n top: -25%;\n }\n\n &.group-footer-no-line {\n border-left: none;\n }\n }\n }\n\n .zd-skeleton-table-cell {\n .v-skeleton-loader__table-cell {\n height: auto;\n }\n }\n}\n\n.tekgrid-actions-dropdown {\n > * {\n display: block;\n }\n}\n\n.tek-grid-column-filter-menu {\n background: white;\n padding: 12px 12px 0 12px;\n max-height: 300px;\n}\n</style>",".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 .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-cell-text {\n display: inline-block;\n vertical-align: middle;\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\n.tekgrid-actions-dropdown > * {\n display: block;\n}\n\n.tek-grid-column-filter-menu {\n background: white;\n padding: 12px 12px 0 12px;\n max-height: 300px;\n}\n\n/*# sourceMappingURL=TekGrid.vue.map */"]}, media: undefined });
2804
+ inject("data-v-044b178a_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 .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-cell-text {\n display: inline-block;\n vertical-align: middle;\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}", map: undefined, media: undefined });
2716
2805
 
2717
2806
  };
2718
2807
  /* scoped */
@@ -2740,6 +2829,763 @@
2740
2829
  undefined
2741
2830
  );
2742
2831
 
2832
+ class TekGridColumnsOptionsController {
2833
+ constructor(modal) {
2834
+ this.columnData = {};
2835
+ this.visibleColumns = [];
2836
+ this.groupedColumns = [];
2837
+ this.otherColumns = [];
2838
+ this.aggregationData = [];
2839
+ this.selectedColumnNames = [];
2840
+ this.searchValue = '';
2841
+ this.updatingSelect = false;
2842
+ this.modal = modal;
2843
+ }
2844
+ updateArrays() {
2845
+ this.visibleColumns = [];
2846
+ this.groupedColumns = [];
2847
+ this.otherColumns = [];
2848
+ Object.keys(this.columnData).forEach((name) => {
2849
+ const column = this.columnData[name];
2850
+ if (this.instanceValue && this.instanceValue.ignoreColumns.indexOf(column.name) === -1) {
2851
+ if (column.grouped) {
2852
+ this.groupedColumns.push(column);
2853
+ }
2854
+ else if (column.isVisible) {
2855
+ this.visibleColumns.push(column);
2856
+ }
2857
+ else {
2858
+ this.otherColumns.push(column);
2859
+ }
2860
+ }
2861
+ });
2862
+ }
2863
+ set instance(instance) {
2864
+ this.instanceValue = instance;
2865
+ this.iterableComponent = instance.iterableComponent;
2866
+ this.aggregationData = instance.getAggregationSelectData();
2867
+ this.columnData = {};
2868
+ this.iterableComponent.columns.forEach((column) => {
2869
+ this.columnData[column.name] = {
2870
+ name: column.name,
2871
+ label: column.label,
2872
+ isVisible: column.isVisible,
2873
+ align: column.align,
2874
+ grouped: column.grouped || false,
2875
+ groupOpened: column.groupOpened || false,
2876
+ aggregation: column.aggregation,
2877
+ aggregationText: this.getAggregationText(column.aggregation),
2878
+ selected: false,
2879
+ };
2880
+ });
2881
+ this.updateArrays();
2882
+ this.selectedColumnNames = [];
2883
+ }
2884
+ getAggregationText(aggregation) {
2885
+ let result = '';
2886
+ if (aggregation) {
2887
+ const idx = this.aggregationData.findIndex((item) => item.value === aggregation);
2888
+ if (idx !== -1) {
2889
+ result = ` (${this.aggregationData[idx].text})`;
2890
+ }
2891
+ }
2892
+ return result;
2893
+ }
2894
+ columnInSearch(column) {
2895
+ return (!this.searchValue || core.normalize(column.label).indexOf(core.normalize(this.searchValue)) !== -1);
2896
+ }
2897
+ get visibleColumnData() {
2898
+ return this.visibleColumns.filter(this.columnInSearch.bind(this));
2899
+ }
2900
+ set visibleColumnData(_data) {
2901
+ // do nothing
2902
+ }
2903
+ get groupedColumnData() {
2904
+ return this.groupedColumns.filter(this.columnInSearch.bind(this));
2905
+ }
2906
+ set groupedColumnData(_data) {
2907
+ // do nothing
2908
+ }
2909
+ get otherColumnData() {
2910
+ return this.otherColumns.filter(this.columnInSearch.bind(this));
2911
+ }
2912
+ set otherColumnData(_data) {
2913
+ // do nothing
2914
+ }
2915
+ get hasSelectedColumn() {
2916
+ return this.selectedColumnNames.length > 0;
2917
+ }
2918
+ get hasNoSelectedColumn() {
2919
+ return !this.hasSelectedColumn;
2920
+ }
2921
+ get detailColumnName() {
2922
+ const columnNames = this.selectedColumnNames.length
2923
+ ? this.selectedColumnNames.join(', ')
2924
+ : core.I18n.translate('TEKGRID_SELECT_COLUMN');
2925
+ return `${core.I18n.translate('TEKGRID_DETAILS_FOR')} ${columnNames}`;
2926
+ }
2927
+ get hasNoVisibleColumns() {
2928
+ return this.visibleColumns.length === 0;
2929
+ }
2930
+ get hasNoGroupedColumns() {
2931
+ return this.groupedColumns.length === 0;
2932
+ }
2933
+ get hasNoOtherColumns() {
2934
+ return this.otherColumns.length === 0;
2935
+ }
2936
+ get hasNoSingleSelection() {
2937
+ return this.selectedColumnNames.length !== 1;
2938
+ }
2939
+ get selectedColumnLabel() {
2940
+ return this.selectedColumnNames.length === 1 ? this.columnData[this.selectedColumnNames[0]].label : '';
2941
+ }
2942
+ set selectedColumnLabel(value) {
2943
+ if (this.selectedColumnNames.length === 1) {
2944
+ this.columnData[this.selectedColumnNames[0]].label = value;
2945
+ }
2946
+ }
2947
+ getSameValue(propName) {
2948
+ const isEqual = this.selectedColumnNames.length > 0
2949
+ && this.selectedColumnNames
2950
+ .every((name) => this.columnData[name][propName] === this.columnData[this.selectedColumnNames[0]][propName]);
2951
+ return isEqual ? this.columnData[this.selectedColumnNames[0]][propName] : undefined;
2952
+ }
2953
+ setSameValue(propName, value) {
2954
+ this.selectedColumnNames.forEach((name) => {
2955
+ this.columnData[name][propName] = value;
2956
+ });
2957
+ }
2958
+ get groupInSelection() {
2959
+ return this.hasNoSelectedColumn || this.selectedColumnNames.some((name) => this.columnData[name].grouped);
2960
+ }
2961
+ get notGroupInSelection() {
2962
+ return this.hasNoSelectedColumn || this.selectedColumnNames.some((name) => !this.columnData[name].grouped);
2963
+ }
2964
+ get selectedColumnGroupOpened() {
2965
+ return this.getSameValue('groupOpened');
2966
+ }
2967
+ set selectedColumnGroupOpened(value) {
2968
+ this.setSameValue('groupOpened', value);
2969
+ }
2970
+ selectMounted({ component }) {
2971
+ this.updatingSelect = true;
2972
+ if (component.name === 'tekGridColumnsOptionsColumnAlignment') {
2973
+ component.value = this.selectedColumnsAlignment;
2974
+ }
2975
+ else if (component.name === 'tekGridColumnsOptionsColumnAggregation') {
2976
+ component.value = this.selectedColumnsAggregation;
2977
+ }
2978
+ // prevent changing column value from here
2979
+ setTimeout(() => { this.updatingSelect = false; }, 0);
2980
+ }
2981
+ selectChange({ component }) {
2982
+ if (this.updatingSelect)
2983
+ return;
2984
+ if (component.name === 'tekGridColumnsOptionsColumnAlignment') {
2985
+ this.setSameValue('align', component.value);
2986
+ }
2987
+ else {
2988
+ this.setSameValue('aggregation', component.value);
2989
+ this.setSameValue('aggregationText', this.getAggregationText(component.value));
2990
+ }
2991
+ }
2992
+ updateSelects() {
2993
+ this.selectedColumnsAlignment = this.updateSelect('align');
2994
+ this.selectedColumnsAggregation = this.updateSelect('aggregation');
2995
+ }
2996
+ updateSelect(propName) {
2997
+ this.updatingSelect = true;
2998
+ const propValue = this.getSameValue(propName);
2999
+ const selectNames = {
3000
+ align: 'tekGridColumnsOptionsColumnAlignment',
3001
+ aggregation: 'tekGridColumnsOptionsColumnAggregation',
3002
+ };
3003
+ const instances = core.Metadata.getInstances(selectNames[propName]);
3004
+ if (instances[0]) {
3005
+ instances[0].value = propValue;
3006
+ }
3007
+ // prevent changing column value from here
3008
+ setTimeout(() => { this.updatingSelect = false; }, 0);
3009
+ return propValue;
3010
+ }
3011
+ columnRemoveClick(column) {
3012
+ column.isVisible = false;
3013
+ this.selectedColumnNames.splice(this.selectedColumnNames.indexOf(column.name), 1);
3014
+ this.otherColumns.push(column);
3015
+ }
3016
+ columnVisibleRemoveClick({ element }) {
3017
+ const columnName = element === null || element === void 0 ? void 0 : element.getAttribute('columnname');
3018
+ if (columnName) {
3019
+ const column = this.columnData[columnName];
3020
+ this.columnRemoveClick(column);
3021
+ this.visibleColumns.splice(this.visibleColumns.indexOf(column), 1);
3022
+ }
3023
+ }
3024
+ columnGroupedRemoveClick({ element }) {
3025
+ const columnName = element === null || element === void 0 ? void 0 : element.getAttribute('columnname');
3026
+ if (columnName) {
3027
+ const column = this.columnData[columnName];
3028
+ this.columnRemoveClick(column);
3029
+ this.groupedColumns.splice(this.groupedColumns.indexOf(column), 1);
3030
+ }
3031
+ }
3032
+ isMacPlatform() {
3033
+ return /Mac/.test(navigator.platform);
3034
+ }
3035
+ isMobilePlatform() {
3036
+ return /iPhone|iPad|Android/.test(navigator.platform);
3037
+ }
3038
+ columnClick({ element, event }) {
3039
+ const columnName = element.getAttribute('columnname');
3040
+ if (columnName) {
3041
+ const mouseEvent = event;
3042
+ const multiple = (this.isMacPlatform() && mouseEvent.metaKey) || mouseEvent.ctrlKey || this.isMobilePlatform();
3043
+ if (!multiple) {
3044
+ Object.keys(this.columnData).forEach((name) => {
3045
+ const column = this.columnData[name];
3046
+ column.selected = (column.name === columnName);
3047
+ });
3048
+ }
3049
+ else {
3050
+ this.columnData[columnName].selected = !this.columnData[columnName].selected;
3051
+ }
3052
+ const orderedColumns = this.visibleColumns.concat(this.groupedColumns).concat(this.otherColumns);
3053
+ this.selectedColumnNames = orderedColumns.filter((column) => column.selected).map((column) => column.name);
3054
+ this.updateSelects();
3055
+ }
3056
+ }
3057
+ removeFromSourceList(columnName) {
3058
+ const column = this.columnData[columnName];
3059
+ const visibleIdx = this.visibleColumns.indexOf(column);
3060
+ if (visibleIdx !== -1) {
3061
+ this.visibleColumns.splice(visibleIdx, 1);
3062
+ }
3063
+ else {
3064
+ const groupedIdx = this.groupedColumns.indexOf(column);
3065
+ if (groupedIdx !== -1) {
3066
+ this.groupedColumns.splice(groupedIdx, 1);
3067
+ }
3068
+ else {
3069
+ const otherIdx = this.otherColumns.indexOf(column);
3070
+ if (otherIdx !== -1) {
3071
+ this.otherColumns.splice(otherIdx, 1);
3072
+ }
3073
+ }
3074
+ }
3075
+ }
3076
+ onDragEnd(event) {
3077
+ const columnName = event.item.getAttribute('columnname');
3078
+ if (this.selectedColumnNames.indexOf(columnName) === -1) {
3079
+ this.selectedColumnNames = [columnName];
3080
+ this.updateSelects();
3081
+ setTimeout(() => {
3082
+ Object.keys(this.columnData).forEach((name) => {
3083
+ const column = this.columnData[name];
3084
+ column.selected = (column.name === columnName);
3085
+ });
3086
+ });
3087
+ }
3088
+ this.selectedColumnNames.forEach((name, index) => {
3089
+ const newIndex = event.newIndex + index;
3090
+ if (name) {
3091
+ this.removeFromSourceList(name);
3092
+ const column = this.columnData[name];
3093
+ if (event.to.id === 'tekGridColumnsOptionsVisibleColumns') {
3094
+ column.isVisible = true;
3095
+ column.grouped = false;
3096
+ column.groupOpened = false;
3097
+ this.visibleColumns.splice(newIndex, 0, column);
3098
+ }
3099
+ else if (event.to.id === 'tekGridColumnsOptionsOtherColumns') {
3100
+ column.isVisible = false;
3101
+ column.grouped = false;
3102
+ column.groupOpened = false;
3103
+ this.otherColumns.splice(newIndex, 0, column);
3104
+ }
3105
+ else if (event.to.id === 'tekGridColumnsOptionsGroupedColumns') {
3106
+ column.isVisible = true;
3107
+ column.grouped = true;
3108
+ column.aggregation = undefined;
3109
+ column.aggregationText = '';
3110
+ this.groupedColumns.splice(newIndex, 0, column);
3111
+ }
3112
+ }
3113
+ });
3114
+ }
3115
+ columnContainerMounted({ element }) {
3116
+ if (element) {
3117
+ Sortable__default["default"].create(element, {
3118
+ handle: '.tek-grid-column-option-box',
3119
+ group: 'column-container',
3120
+ filter: '.no-data, .tek-grid-column-option-grouped-true',
3121
+ onEnd: this.onDragEnd.bind(this),
3122
+ });
3123
+ }
3124
+ }
3125
+ selectAll({ component }) {
3126
+ let list;
3127
+ if (component.name === 'tekGridColumnsOptionsVisibleSelectAll') {
3128
+ list = this.visibleColumns;
3129
+ }
3130
+ else if (component.name === 'tekGridColumnsOptionsOtherSelectAll') {
3131
+ list = this.otherColumns;
3132
+ }
3133
+ else {
3134
+ list = this.groupedColumns;
3135
+ }
3136
+ this.selectedColumnNames = list.map((column) => column.name);
3137
+ Object.keys(this.columnData).forEach((columnName) => {
3138
+ const column = this.columnData[columnName];
3139
+ column.selected = this.selectedColumnNames.indexOf(column.name) !== -1;
3140
+ });
3141
+ }
3142
+ cancelChanges() {
3143
+ this.modal.hide();
3144
+ }
3145
+ applyChanges({ event, element }) {
3146
+ const ignoredColumns = this.iterableComponent.columns
3147
+ .filter((column) => this.instanceValue && this.instanceValue.ignoreColumns.indexOf(column.name) !== -1);
3148
+ const orderedColumns = this.groupedColumns.concat(this.visibleColumns).concat(this.otherColumns).concat(ignoredColumns);
3149
+ if (this.iterableComponent) {
3150
+ this.iterableComponent.columns = orderedColumns.map((orderColumn) => {
3151
+ const columnIdx = this.iterableComponent.columns.findIndex((column) => column.name === orderColumn.name);
3152
+ const iterableColumn = this.iterableComponent.columns[columnIdx];
3153
+ iterableColumn.isVisible = orderColumn.isVisible;
3154
+ iterableColumn.grouped = orderColumn.grouped;
3155
+ iterableColumn.groupOpened = orderColumn.groupOpened;
3156
+ iterableColumn.label = orderColumn.label;
3157
+ iterableColumn.align = orderColumn.align;
3158
+ iterableColumn.aggregation = orderColumn.aggregation;
3159
+ return iterableColumn;
3160
+ });
3161
+ const { datasource } = this.iterableComponent;
3162
+ const order = datasource.order.filter((item) => {
3163
+ const columnName = item.split('.')[0];
3164
+ return this.groupedColumns.findIndex((column) => column.name === columnName) === -1;
3165
+ });
3166
+ datasource.order = this.groupedColumns.map((column) => `${column.name}.asc`).concat(order);
3167
+ this.iterableComponent.changeLayout(event, element);
3168
+ }
3169
+ this.modal.hide();
3170
+ }
3171
+ }
3172
+
3173
+ class TekGridColumnsOptionsModal {
3174
+ static show(instance) {
3175
+ if (!TekGridColumnsOptionsModal.modal) {
3176
+ TekGridColumnsOptionsModal.modal = common.ModalService.create(TekGridColumnsOptionsModal.modalDef);
3177
+ TekGridColumnsOptionsModal.controller = new TekGridColumnsOptionsController(TekGridColumnsOptionsModal.modal);
3178
+ core.Loader.addController(TekGridColumnsOptionsModal.controllerName, TekGridColumnsOptionsModal.controller);
3179
+ }
3180
+ TekGridColumnsOptionsModal.controller.instance = instance;
3181
+ TekGridColumnsOptionsModal.modal.show();
3182
+ }
3183
+ static hide() {
3184
+ if (TekGridColumnsOptionsModal.modal) {
3185
+ TekGridColumnsOptionsModal.modal.hide();
3186
+ }
3187
+ }
3188
+ }
3189
+ TekGridColumnsOptionsModal.controllerName = `TekGridColumnsOptionsController_${new Date().getTime()}`;
3190
+ TekGridColumnsOptionsModal.modalDef = {
3191
+ name: 'tekGridColumnsOptionsModal',
3192
+ title: '',
3193
+ persistent: true,
3194
+ children: [
3195
+ {
3196
+ name: 'tekGridColumnsOptionsCloseButtonHeader',
3197
+ component: 'ZdHeader',
3198
+ color: 'transparent',
3199
+ padless: true,
3200
+ elevation: 0,
3201
+ cssClass: 'zd-ml-n1 zd-mb-4',
3202
+ leftSlot: [
3203
+ {
3204
+ name: 'tekGridColumnsOptionsTitleText',
3205
+ component: 'ZdText',
3206
+ text: 'TEKGRID_COLUMNS_OPTIONS',
3207
+ cssClass: 'zd-theme-font-title',
3208
+ },
3209
+ ],
3210
+ rightSlot: [
3211
+ {
3212
+ name: 'tekGridColumnsOptionsCloseModalButton',
3213
+ component: 'ZdModalCloseButton',
3214
+ small: true,
3215
+ modalName: 'tekGridColumnsOptionsModal',
3216
+ },
3217
+ ],
3218
+ },
3219
+ {
3220
+ name: 'tekGridColumnsOptionsSearchRow',
3221
+ component: 'ZdRow',
3222
+ children: [
3223
+ {
3224
+ name: 'tekGridColumnsOptionsSearchCol',
3225
+ component: 'ZdCol',
3226
+ cols: 12,
3227
+ children: [
3228
+ {
3229
+ name: 'tekGridColumnsOptionsSearchInput',
3230
+ component: 'ZdTextInput',
3231
+ showLabel: false,
3232
+ showHelper: false,
3233
+ placeholder: 'SEARCH',
3234
+ appendIcon: 'magnify',
3235
+ value: `{{${TekGridColumnsOptionsModal.controllerName}.searchValue}}`,
3236
+ },
3237
+ ],
3238
+ },
3239
+ ],
3240
+ },
3241
+ {
3242
+ name: 'tekGridColumnsOptionsVisibleRow',
3243
+ component: 'ZdRow',
3244
+ children: [
3245
+ {
3246
+ name: 'tekGridColumnsOptionsVisibleCol',
3247
+ component: 'ZdCol',
3248
+ cols: 12,
3249
+ cssClass: 'tek-grid-column-option-container-col',
3250
+ children: [
3251
+ {
3252
+ name: 'tekGridColumnsOptionsVisibleLabel',
3253
+ component: 'ZdText',
3254
+ text: 'TEKGRID_VISIBLE_COLUMNS',
3255
+ cssClass: 'tek-grid-column-option-label',
3256
+ },
3257
+ {
3258
+ name: 'tekGridColumnsOptionsVisibleSelectAll',
3259
+ component: 'ZdText',
3260
+ text: 'TEKGRID_SELECT_ALL',
3261
+ cssClass: 'tek-grid-column-option-select-all',
3262
+ events: {
3263
+ click: `{{${TekGridColumnsOptionsModal.controllerName}.selectAll}}`,
3264
+ },
3265
+ },
3266
+ {
3267
+ name: 'tekGridColumnsOptionsVisibleDropHere',
3268
+ component: 'ZdText',
3269
+ text: 'TEKGRID_DROP_COLUMNS',
3270
+ cssClass: 'tek-grid-column-option-drop-here',
3271
+ isVisible: `{{${TekGridColumnsOptionsModal.controllerName}.hasNoVisibleColumns}}`,
3272
+ },
3273
+ {
3274
+ name: 'tekGridColumnsOptionsVisibleColumns',
3275
+ component: 'TekIterableComponentRender',
3276
+ id: 'tekGridColumnsOptionsVisibleColumns',
3277
+ cssClass: 'tek-grid-column-option-container',
3278
+ datasource: {
3279
+ uniqueKey: 'name',
3280
+ data: `{{${TekGridColumnsOptionsModal.controllerName}.visibleColumnData}}`,
3281
+ },
3282
+ noDataSlot: [],
3283
+ events: {
3284
+ onMounted: `{{${TekGridColumnsOptionsModal.controllerName}.columnContainerMounted}}`,
3285
+ },
3286
+ componentMetadata: {
3287
+ name: 'tekGridColumnsOptionsVisibleColumn_<<row.name>>',
3288
+ component: 'ZdTag',
3289
+ columnName: '<<row.name>>',
3290
+ cssClass: 'tek-grid-column-option-box zd-elevation-1 '
3291
+ + 'tek-grid-column-option-selected-<<row.selected>>',
3292
+ tag: 'div',
3293
+ children: [
3294
+ {
3295
+ name: 'tekGridColumnsOptionsVisibleColumnText_<<row.name>>',
3296
+ columnName: '<<row.name>>',
3297
+ component: 'ZdText',
3298
+ text: '<<row.label>><<row.aggregationText>>',
3299
+ },
3300
+ {
3301
+ name: 'tekGridColumnsOptionsVisibleColumnRemove_<<row.name>>',
3302
+ columnName: '<<row.name>>',
3303
+ component: 'ZdIcon',
3304
+ iconName: 'close',
3305
+ events: {
3306
+ click: `{{${TekGridColumnsOptionsModal.controllerName}.columnVisibleRemoveClick}}`,
3307
+ },
3308
+ },
3309
+ ],
3310
+ events: {
3311
+ click: `{{${TekGridColumnsOptionsModal.controllerName}.columnClick}}`,
3312
+ },
3313
+ },
3314
+ },
3315
+ ],
3316
+ },
3317
+ ],
3318
+ },
3319
+ {
3320
+ name: 'tekGridColumnsOptionsGroupedRow',
3321
+ component: 'ZdRow',
3322
+ children: [
3323
+ {
3324
+ name: 'tekGridColumnsOptionsGroupedCol',
3325
+ component: 'ZdCol',
3326
+ cssClass: 'tek-grid-column-option-container-col',
3327
+ cols: 12,
3328
+ children: [
3329
+ {
3330
+ name: 'tekGridColumnsOptionsGroupedLabel',
3331
+ component: 'ZdText',
3332
+ text: 'TEKGRID_GROUPED_COLUMNS',
3333
+ cssClass: 'tek-grid-column-option-label',
3334
+ },
3335
+ {
3336
+ name: 'tekGridColumnsOptionsGroupedSelectAll',
3337
+ component: 'ZdText',
3338
+ text: 'TEKGRID_SELECT_ALL',
3339
+ cssClass: 'tek-grid-column-option-select-all',
3340
+ events: {
3341
+ click: `{{${TekGridColumnsOptionsModal.controllerName}.selectAll}}`,
3342
+ },
3343
+ },
3344
+ {
3345
+ name: 'tekGridColumnsOptionsGroupedDropHere',
3346
+ component: 'ZdText',
3347
+ text: 'TEKGRID_DROP_COLUMNS',
3348
+ cssClass: 'tek-grid-column-option-drop-here',
3349
+ isVisible: `{{${TekGridColumnsOptionsModal.controllerName}.hasNoGroupedColumns}}`,
3350
+ },
3351
+ {
3352
+ name: 'tekGridColumnsOptionsGroupedColumns',
3353
+ component: 'TekIterableComponentRender',
3354
+ id: 'tekGridColumnsOptionsGroupedColumns',
3355
+ cssClass: 'tek-grid-column-option-container',
3356
+ datasource: {
3357
+ uniqueKey: 'name',
3358
+ data: `{{${TekGridColumnsOptionsModal.controllerName}.groupedColumnData}}`,
3359
+ },
3360
+ noDataSlot: [],
3361
+ events: {
3362
+ onMounted: `{{${TekGridColumnsOptionsModal.controllerName}.columnContainerMounted}}`,
3363
+ },
3364
+ componentMetadata: {
3365
+ name: 'tekGridColumnsOptionsGroupedColumn_<<row.name>>',
3366
+ component: 'ZdTag',
3367
+ columnName: '<<row.name>>',
3368
+ cssClass: 'tek-grid-column-option-box zd-elevation-1 '
3369
+ + 'tek-grid-column-option-selected-<<row.selected>>',
3370
+ tag: 'div',
3371
+ children: [
3372
+ {
3373
+ name: 'tekGridColumnsOptionsGroupedColumnText_<<row.name>>',
3374
+ columnName: '<<row.name>>',
3375
+ component: 'ZdText',
3376
+ text: '<<row.label>><<row.aggregationText>>',
3377
+ },
3378
+ {
3379
+ name: 'tekGridColumnsOptionsGroupedColumnRemove_<<row.name>>',
3380
+ columnName: '<<row.name>>',
3381
+ component: 'ZdIcon',
3382
+ iconName: 'close',
3383
+ events: {
3384
+ click: `{{${TekGridColumnsOptionsModal.controllerName}.columnGroupedRemoveClick}}`,
3385
+ },
3386
+ },
3387
+ ],
3388
+ events: {
3389
+ click: `{{${TekGridColumnsOptionsModal.controllerName}.columnClick}}`,
3390
+ },
3391
+ },
3392
+ },
3393
+ ],
3394
+ },
3395
+ ],
3396
+ },
3397
+ {
3398
+ name: 'tekGridColumnsOptionsOtherRow',
3399
+ component: 'ZdRow',
3400
+ children: [
3401
+ {
3402
+ name: 'tekGridColumnsOptionsOtherCol',
3403
+ component: 'ZdCol',
3404
+ cssClass: 'tek-grid-column-option-container-col',
3405
+ cols: 12,
3406
+ children: [
3407
+ {
3408
+ name: 'tekGridColumnsOptionsOtherLabel',
3409
+ component: 'ZdText',
3410
+ text: 'TEKGRID_OTHER_COLUMNS',
3411
+ cssClass: 'tek-grid-column-option-label',
3412
+ },
3413
+ {
3414
+ name: 'tekGridColumnsOptionsOtherSelectAll',
3415
+ component: 'ZdText',
3416
+ text: 'TEKGRID_SELECT_ALL',
3417
+ cssClass: 'tek-grid-column-option-select-all',
3418
+ events: {
3419
+ click: `{{${TekGridColumnsOptionsModal.controllerName}.selectAll}}`,
3420
+ },
3421
+ },
3422
+ {
3423
+ name: 'tekGridColumnsOptionsOtherDropHere',
3424
+ component: 'ZdText',
3425
+ text: 'TEKGRID_DROP_COLUMNS',
3426
+ cssClass: 'tek-grid-column-option-drop-here',
3427
+ isVisible: `{{${TekGridColumnsOptionsModal.controllerName}.hasNoOtherColumns}}`,
3428
+ },
3429
+ {
3430
+ name: 'tekGridColumnsOptionsOtherColumns',
3431
+ component: 'TekIterableComponentRender',
3432
+ id: 'tekGridColumnsOptionsOtherColumns',
3433
+ cssClass: 'tek-grid-column-option-container',
3434
+ datasource: {
3435
+ uniqueKey: 'name',
3436
+ data: `{{${TekGridColumnsOptionsModal.controllerName}.otherColumnData}}`,
3437
+ },
3438
+ noDataSlot: [],
3439
+ events: {
3440
+ onMounted: `{{${TekGridColumnsOptionsModal.controllerName}.columnContainerMounted}}`,
3441
+ },
3442
+ componentMetadata: {
3443
+ name: 'tekGridColumnsOptionsOtherColumn_<<row.name>>',
3444
+ component: 'ZdText',
3445
+ columnName: '<<row.name>>',
3446
+ text: '<<row.label>><<row.aggregationText>>',
3447
+ cssClass: 'tek-grid-column-option-box zd-elevation-1 '
3448
+ + 'tek-grid-column-option-selected-<<row.selected>>',
3449
+ events: {
3450
+ click: `{{${TekGridColumnsOptionsModal.controllerName}.columnClick}}`,
3451
+ },
3452
+ },
3453
+ },
3454
+ ],
3455
+ },
3456
+ ],
3457
+ },
3458
+ {
3459
+ name: 'tekGridColumnsOptionsDetailColumnName',
3460
+ component: 'ZdText',
3461
+ cssClass: 'tek-grid-column-option-detail-name',
3462
+ text: `{{${TekGridColumnsOptionsModal.controllerName}.detailColumnName}}`,
3463
+ grid: {
3464
+ xs: 12,
3465
+ },
3466
+ },
3467
+ {
3468
+ name: 'tekGridColumnsOptionsDetailRow',
3469
+ component: 'ZdRow',
3470
+ children: [
3471
+ {
3472
+ name: 'tekGridColumnsOptionsDetailCol',
3473
+ component: 'ZdCol',
3474
+ cols: 12,
3475
+ children: [
3476
+ {
3477
+ name: 'tekGridColumnsOptionsDetailForm',
3478
+ component: 'ZdForm',
3479
+ cssClass: 'tek-grid-column-option-detail-form',
3480
+ children: [
3481
+ {
3482
+ name: 'tekGridColumnsOptionsColumnLabel',
3483
+ component: 'ZdTextInput',
3484
+ label: 'TEKGRID_COLUMN_LABEL',
3485
+ showHelper: false,
3486
+ clearable: false,
3487
+ disabled: `{{${TekGridColumnsOptionsModal.controllerName}.hasNoSingleSelection}}`,
3488
+ value: `{{${TekGridColumnsOptionsModal.controllerName}.selectedColumnLabel}}`,
3489
+ grid: {
3490
+ xs: 12,
3491
+ md: 6,
3492
+ },
3493
+ },
3494
+ {
3495
+ name: 'tekGridColumnsOptionsColumnAlignment',
3496
+ component: 'ZdSelect',
3497
+ autocomplete: false,
3498
+ label: 'TEKGRID_COLUMN_ALIGNMENT',
3499
+ disabled: `{{${TekGridColumnsOptionsModal.controllerName}.hasNoSelectedColumn}}`,
3500
+ showHelper: false,
3501
+ clearable: false,
3502
+ grid: {
3503
+ xs: 6,
3504
+ md: 2,
3505
+ },
3506
+ dataText: 'text',
3507
+ dataValue: 'value',
3508
+ datasource: {
3509
+ data: [
3510
+ { text: 'TEKGRID_LEFT', value: 'left' },
3511
+ { text: 'TEKGRID_CENTER', value: 'center' },
3512
+ { text: 'TEKGRID_RIGHT', value: 'right' },
3513
+ ],
3514
+ translate: 'text',
3515
+ },
3516
+ events: {
3517
+ change: `{{${TekGridColumnsOptionsModal.controllerName}.selectChange}}`,
3518
+ onMounted: `{{${TekGridColumnsOptionsModal.controllerName}.selectMounted}}`,
3519
+ },
3520
+ },
3521
+ {
3522
+ name: 'tekGridColumnsOptionsColumnAggregation',
3523
+ component: 'ZdSelect',
3524
+ autocomplete: false,
3525
+ label: 'TEKGRID_COLUMN_AGGREGATION',
3526
+ showHelper: false,
3527
+ disabled: `{{${TekGridColumnsOptionsModal.controllerName}.groupInSelection}}`,
3528
+ dataText: 'text',
3529
+ dataValue: 'value',
3530
+ grid: {
3531
+ xs: 6,
3532
+ md: 2,
3533
+ },
3534
+ datasource: {
3535
+ data: `{{${TekGridColumnsOptionsModal.controllerName}.aggregationData}}`,
3536
+ },
3537
+ events: {
3538
+ change: `{{${TekGridColumnsOptionsModal.controllerName}.selectChange}}`,
3539
+ onMounted: `{{${TekGridColumnsOptionsModal.controllerName}.selectMounted}}`,
3540
+ },
3541
+ },
3542
+ {
3543
+ name: 'tekGridColumnsOptionsColumnGroupOpened',
3544
+ component: 'ZdCheckbox',
3545
+ cssClass: 'zd-form-input-align',
3546
+ disabled: `{{${TekGridColumnsOptionsModal.controllerName}.notGroupInSelection}}`,
3547
+ label: 'TEKGRID_COLUMN_GROUP_OPENED',
3548
+ value: `{{${TekGridColumnsOptionsModal.controllerName}.selectedColumnGroupOpened}}`,
3549
+ grid: {
3550
+ xs: 6,
3551
+ md: 2,
3552
+ },
3553
+ },
3554
+ ],
3555
+ },
3556
+ ],
3557
+ },
3558
+ ],
3559
+ },
3560
+ {
3561
+ name: 'tekGridColumnsOptionsDetailFooter',
3562
+ component: 'ZdFooter',
3563
+ padless: true,
3564
+ color: 'transparent',
3565
+ cssClass: 'zd-mt-6',
3566
+ rightSlot: [
3567
+ {
3568
+ name: 'tekGridColumnsOptionsDetailCancel',
3569
+ component: 'ZdButton',
3570
+ outline: true,
3571
+ label: 'TEKGRID_CANCEL',
3572
+ events: {
3573
+ click: `{{${TekGridColumnsOptionsModal.controllerName}.cancelChanges}}`,
3574
+ },
3575
+ },
3576
+ {
3577
+ name: 'tekGridColumnsOptionsDetailApply',
3578
+ component: 'ZdButton',
3579
+ label: 'TEKGRID_APPLY',
3580
+ events: {
3581
+ click: `{{${TekGridColumnsOptionsModal.controllerName}.applyChanges}}`,
3582
+ },
3583
+ },
3584
+ ],
3585
+ },
3586
+ ],
3587
+ };
3588
+
2743
3589
  /**
2744
3590
  * TekGrid Columns Button component
2745
3591
  */
@@ -2756,7 +3602,7 @@
2756
3602
  this.$nextTick(() => {
2757
3603
  const columnsTableBody = document.querySelector(`#${this.instance.name}_columns_table tbody`);
2758
3604
  if (columnsTableBody) {
2759
- sortable__default['default'].create(columnsTableBody, {
3605
+ Sortable__default["default"].create(columnsTableBody, {
2760
3606
  handle: '.sortHandle',
2761
3607
  dragClass: 'tek-grid-columns-button-sortable-drag',
2762
3608
  onEnd: this.sortEnd,
@@ -2776,12 +3622,19 @@
2776
3622
  }
2777
3623
  return column;
2778
3624
  });
2779
- grid.columns = newColumns;
3625
+ const ignoredColumns = grid.columns.filter((column) => this.instance.ignoreColumns.indexOf(column.name) !== -1);
3626
+ grid.columns = newColumns.concat(ignoredColumns);
2780
3627
  if (JSON.stringify(groupColumnNames) !== JSON.stringify(grid.groupColumnNames)) {
2781
3628
  grid.updateGroupedData();
2782
3629
  }
2783
3630
  grid.changeLayout();
2784
3631
  }
3632
+ moreOptions() {
3633
+ TekGridColumnsOptionsModal.show(this.instance);
3634
+ }
3635
+ close() {
3636
+ this.menuIsOpened = false;
3637
+ }
2785
3638
  };
2786
3639
  __decorate([
2787
3640
  vuePropertyDecorator.Watch('menuIsOpened'),
@@ -2868,141 +3721,180 @@
2868
3721
  },
2869
3722
  [
2870
3723
  _vm._v(" "),
2871
- _c(
2872
- "table",
2873
- {
2874
- staticClass: "tek-grid-columns-button-table",
2875
- attrs: { id: _vm.instance.name + "_columns_table" }
2876
- },
2877
- [
2878
- _c("thead", [
2879
- _c("tr", [
2880
- _c("th"),
2881
- _vm._v(" "),
2882
- _c("th", [_vm._v(_vm._s(_vm.$t("TEKGRID_COLUMN_VISIBLE")))]),
2883
- _vm._v(" "),
2884
- _c("th", [_vm._v(_vm._s(_vm.$t("TEKGRID_COLUMN_GROUPED")))]),
2885
- _vm._v(" "),
2886
- _c("th", [_vm._v(_vm._s(_vm.$t("TEKGRID_COLUMN_AGGREGATION")))])
2887
- ])
2888
- ]),
2889
- _vm._v(" "),
2890
- _c(
2891
- "tbody",
2892
- _vm._l(_vm.instance.iterableComponent.columns, function(column) {
2893
- return _c(
2894
- "tr",
2895
- { key: column.name, attrs: { name: column.name } },
2896
- [
2897
- _c(
2898
- "td",
2899
- {
2900
- staticClass:
2901
- "tek-grid-columns-button-column-name sortHandle"
2902
- },
2903
- [
2904
- _c("span", [_vm._v("⦙⦙")]),
2905
- _vm._v(_vm._s(column.label) + "\n ")
2906
- ]
2907
- ),
2908
- _vm._v(" "),
2909
- _c(
2910
- "td",
2911
- [
2912
- _c("zd-checkbox", {
2913
- attrs: {
2914
- name:
2915
- _vm.instance.name +
2916
- "_column_visible_" +
2917
- column.name,
2918
- value: column.isVisible,
2919
- disabled: column.grouped,
2920
- events: {
2921
- change: _vm.instance.controller.showHideColumn.bind(
2922
- _vm.instance.controller,
2923
- column
2924
- )
2925
- }
2926
- }
2927
- })
2928
- ],
2929
- 1
2930
- ),
2931
- _vm._v(" "),
2932
- _c(
2933
- "td",
2934
- [
2935
- column.type !== "action"
2936
- ? _c("zd-checkbox", {
2937
- attrs: {
2938
- name:
2939
- _vm.instance.name +
2940
- "_column_grouped_" +
2941
- column.name,
2942
- value: column.grouped,
2943
- events: {
2944
- change: _vm.instance.controller.changeGroupedColumn.bind(
2945
- _vm.instance.controller,
2946
- column
2947
- )
2948
- }
3724
+ _c("div", { staticClass: "tek-grid-columns-button-table-wrapper" }, [
3725
+ _c(
3726
+ "table",
3727
+ {
3728
+ staticClass: "tek-grid-columns-button-table",
3729
+ attrs: { id: _vm.instance.name + "_columns_table" }
3730
+ },
3731
+ [
3732
+ _c("thead", [
3733
+ _c("tr", [
3734
+ _c("th"),
3735
+ _vm._v(" "),
3736
+ _c("th", [_vm._v(_vm._s(_vm.$t("TEKGRID_COLUMN_VISIBLE")))]),
3737
+ _vm._v(" "),
3738
+ _c("th", [_vm._v(_vm._s(_vm.$t("TEKGRID_COLUMN_GROUPED")))]),
3739
+ _vm._v(" "),
3740
+ _c("th", [_vm._v(_vm._s(_vm.$t("TEKGRID_COLUMN_AGGREGATION")))])
3741
+ ])
3742
+ ]),
3743
+ _vm._v(" "),
3744
+ _c(
3745
+ "tbody",
3746
+ _vm._l(_vm.instance.filteredColumns(), function(column) {
3747
+ return _c(
3748
+ "tr",
3749
+ { key: column.name, attrs: { name: column.name } },
3750
+ [
3751
+ _c(
3752
+ "td",
3753
+ {
3754
+ staticClass:
3755
+ "tek-grid-columns-button-column-name sortHandle"
3756
+ },
3757
+ [
3758
+ _c("span", [_vm._v("⦙⦙")]),
3759
+ _vm._v(_vm._s(column.label) + "\n ")
3760
+ ]
3761
+ ),
3762
+ _vm._v(" "),
3763
+ _c(
3764
+ "td",
3765
+ [
3766
+ _c("zd-checkbox", {
3767
+ attrs: {
3768
+ name:
3769
+ _vm.instance.name +
3770
+ "_column_visible_" +
3771
+ column.name,
3772
+ value: column.isVisible,
3773
+ disabled: column.grouped,
3774
+ events: {
3775
+ change: _vm.instance.controller.showHideColumn.bind(
3776
+ _vm.instance.controller,
3777
+ column
3778
+ )
2949
3779
  }
2950
- })
2951
- : _vm._e()
2952
- ],
2953
- 1
2954
- ),
2955
- _vm._v(" "),
2956
- _c(
2957
- "td",
2958
- {
2959
- staticClass: "tek-grid-columns-button-column-aggregation"
2960
- },
2961
- [
2962
- column.type !== "action"
2963
- ? _c(
2964
- "zd-select",
2965
- _vm._b(
2966
- {
2967
- attrs: {
2968
- name:
2969
- _vm.instance.name +
2970
- "_column_aggregation_" +
2971
- column.name
2972
- }
2973
- },
2974
- "zd-select",
2975
- {
2976
- value: column.aggregation,
2977
- disabled: column.grouped,
3780
+ }
3781
+ })
3782
+ ],
3783
+ 1
3784
+ ),
3785
+ _vm._v(" "),
3786
+ _c(
3787
+ "td",
3788
+ [
3789
+ column.type !== "action"
3790
+ ? _c("zd-checkbox", {
3791
+ attrs: {
3792
+ name:
3793
+ _vm.instance.name +
3794
+ "_column_grouped_" +
3795
+ column.name,
3796
+ value: column.grouped,
2978
3797
  events: {
2979
- change: _vm.instance.controller.changeAggregationColumn.bind(
3798
+ change: _vm.instance.controller.changeGroupedColumn.bind(
2980
3799
  _vm.instance.controller,
2981
3800
  column
2982
3801
  )
2983
- },
2984
- dataText: "text",
2985
- dataValue: "value",
2986
- autocomplete: false,
2987
- showHelper: false,
2988
- showLabel: false,
2989
- datasource: {
2990
- data: _vm.instance.getAggregationSelectData()
2991
3802
  }
2992
- },
2993
- false
3803
+ }
3804
+ })
3805
+ : _vm._e()
3806
+ ],
3807
+ 1
3808
+ ),
3809
+ _vm._v(" "),
3810
+ _c(
3811
+ "td",
3812
+ {
3813
+ staticClass:
3814
+ "tek-grid-columns-button-column-aggregation"
3815
+ },
3816
+ [
3817
+ column.type !== "action"
3818
+ ? _c(
3819
+ "zd-select",
3820
+ _vm._b(
3821
+ {
3822
+ attrs: {
3823
+ name:
3824
+ _vm.instance.name +
3825
+ "_column_aggregation_" +
3826
+ column.name
3827
+ }
3828
+ },
3829
+ "zd-select",
3830
+ {
3831
+ value: column.aggregation,
3832
+ disabled: column.grouped,
3833
+ events: {
3834
+ change: _vm.instance.controller.changeAggregationColumn.bind(
3835
+ _vm.instance.controller,
3836
+ column
3837
+ )
3838
+ },
3839
+ dataText: "text",
3840
+ dataValue: "value",
3841
+ autocomplete: false,
3842
+ showHelper: false,
3843
+ showLabel: false,
3844
+ datasource: {
3845
+ data: _vm.instance.getAggregationSelectData()
3846
+ }
3847
+ },
3848
+ false
3849
+ )
2994
3850
  )
2995
- )
2996
- : _vm._e()
2997
- ],
2998
- 1
2999
- )
3000
- ]
3001
- )
3002
- }),
3003
- 0
3004
- )
3005
- ]
3851
+ : _vm._e()
3852
+ ],
3853
+ 1
3854
+ )
3855
+ ]
3856
+ )
3857
+ }),
3858
+ 0
3859
+ )
3860
+ ]
3861
+ )
3862
+ ]),
3863
+ _vm._v(" "),
3864
+ _c(
3865
+ "div",
3866
+ { staticClass: "tek-grid-columns-button-table-footer" },
3867
+ [
3868
+ _c("zd-button", {
3869
+ attrs: {
3870
+ name: _vm.instance.name + "_columns_table_footer_button",
3871
+ label: "TEKGRID_MORE_OPTIONS",
3872
+ small: "",
3873
+ outline: "",
3874
+ cssClass: "zd-ma-2 zd-mr-1"
3875
+ },
3876
+ on: {
3877
+ click: function($event) {
3878
+ return _vm.moreOptions()
3879
+ }
3880
+ }
3881
+ }),
3882
+ _vm._v(" "),
3883
+ _c("zd-button", {
3884
+ attrs: {
3885
+ name: _vm.instance.name + "_columns_table_footer_close",
3886
+ label: "TEKGRID_CLOSE",
3887
+ small: "",
3888
+ cssClass: "zd-ma-2 zd-ml-1"
3889
+ },
3890
+ on: {
3891
+ click: function($event) {
3892
+ return _vm.close()
3893
+ }
3894
+ }
3895
+ })
3896
+ ],
3897
+ 1
3006
3898
  )
3007
3899
  ]
3008
3900
  )
@@ -3013,7 +3905,7 @@
3013
3905
  /* style */
3014
3906
  const __vue_inject_styles__$6 = function (inject) {
3015
3907
  if (!inject) return
3016
- inject("data-v-11d7088a_0", { source: ".tek-grid-columns-button-table {\n padding: var(--spacing-2);\n background-color: white;\n font-size: 13px;\n}\n.tek-grid-columns-button-table thead tr th {\n padding: var(--spacing-1) var(--spacing-2);\n white-space: nowrap;\n text-align: left;\n}\n.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-table tbody tr td.tek-grid-columns-button-column-name {\n cursor: -webkit-grab;\n}\n.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-table tbody tr td.tek-grid-columns-button-column-aggregation {\n max-width: 150px;\n}\n.tek-grid-columns-button-options {\n max-height: 250px;\n}\n.tek-grid-columns-button-sortable-drag {\n background: white;\n}\n\n/*# sourceMappingURL=TekGridColumnsButton.vue.map */", map: {"version":3,"sources":["/Users/zedmartins/workfolder/zeedhi/teknisa-components/packages/vuetify/src/components/tek-grid/TekGridColumnsButton.vue","TekGridColumnsButton.vue"],"names":[],"mappings":"AAyFA;EACA,yBAAA;EACA,uBAAA;EACA,eAAA;ACxFA;AD4FA;EACA,0CAAA;EACA,mBAAA;EACA,gBAAA;AC1FA;ADiGA;EACA,0CAAA;EACA,mBAAA;AC/FA;ADiGA;EACA,oBAAA;AC/FA;ADiGA;EACA,kBAAA;AC/FA;ADmGA;EACA,gBAAA;ACjGA;ADwGA;EACA,iBAAA;ACrGA;ADwGA;EACA,iBAAA;ACrGA;;AAEA,mDAAmD","file":"TekGridColumnsButton.vue","sourcesContent":["<template>\n <v-menu \n v-show=\"instance.isVisible\"\n v-model=\"menuIsOpened\"\n :class=\"['zd-iterable-columns-button', 'tek-grid-columns-button', instance.cssClass]\"\n :style=\"instance.cssStyle\"\n :closeOnContentClick=\"false\"\n offset-y\n content-class=\"zd-iterable-columns-button-options tek-grid-columns-button-options\"\n >\n <template v-slot:activator=\"{ on }\"> \n <span v-on=\"{ ...$attrs['dropdown-activator'] }\">\n <zd-button\n :name=\"instance.name\"\n :instance-object=\"instance\"\n v-bind=\"{\n events: getEvents(on)\n }\"\n />\n </span>\n </template>\n <table class=\"tek-grid-columns-button-table\" :id=\"instance.name + '_columns_table'\">\n <thead>\n <tr>\n <th><!--Name--></th>\n <th>{{ $t('TEKGRID_COLUMN_VISIBLE') }}</th>\n <th>{{ $t('TEKGRID_COLUMN_GROUPED') }}</th>\n <th>{{ $t('TEKGRID_COLUMN_AGGREGATION') }}</th>\n </tr>\n </thead>\n <tbody>\n <tr\n v-for=\"column in instance.iterableComponent.columns\"\n :key=\"column.name\"\n :name=\"column.name\"\n >\n <td class=\"tek-grid-columns-button-column-name sortHandle\">\n <span>⦙⦙</span>{{ column.label }}\n </td>\n <td>\n <zd-checkbox\n :name=\"instance.name + '_column_visible_' + column.name\"\n :value=\"column.isVisible\"\n :disabled=\"column.grouped\"\n :events=\"{\n change: instance.controller.showHideColumn.bind(instance.controller, column)\n }\"\n />\n </td>\n <td>\n <zd-checkbox\n v-if=\"column.type !== 'action'\"\n :name=\"instance.name + '_column_grouped_' + column.name\"\n :value=\"column.grouped\"\n :events=\"{\n change: instance.controller.changeGroupedColumn.bind(instance.controller, column)\n }\"\n />\n </td>\n <td class=\"tek-grid-columns-button-column-aggregation\">\n <zd-select\n v-if=\"column.type !== 'action'\"\n :name=\"instance.name + '_column_aggregation_' + column.name\"\n v-bind=\"{\n value: column.aggregation,\n disabled: column.grouped,\n events: {\n change: instance.controller.changeAggregationColumn.bind(instance.controller, column)\n },\n dataText: 'text',\n dataValue: 'value',\n autocomplete: false,\n showHelper: false,\n showLabel: false,\n datasource: {\n data: instance.getAggregationSelectData(),\n },\n }\"\n />\n </td>\n </tr>\n </tbody>\n </table>\n </v-menu>\n</template>\n\n<script lang=\"ts\" src=\"./TekGridColumnsButton.ts\"></script>\n\n<style lang=\"scss\">\n.tek-grid-columns-button-table {\n padding: var(--spacing-2);\n background-color: white;\n font-size: 13px;\n\n thead {\n tr {\n th {\n padding: var(--spacing-1) var(--spacing-2);\n white-space: nowrap;\n text-align: left;\n }\n }\n }\n\n tbody {\n tr {\n td {\n padding: var(--spacing-1) var(--spacing-2);\n white-space: nowrap;\n\n &.tek-grid-columns-button-column-name {\n cursor: -webkit-grab;\n\n > span {\n padding-right: 4px;\n }\n }\n\n &.tek-grid-columns-button-column-aggregation {\n max-width: 150px;\n }\n }\n }\n }\n}\n\n.tek-grid-columns-button-options {\n max-height: 250px;\n}\n\n.tek-grid-columns-button-sortable-drag {\n background: white;\n}\n</style>",".tek-grid-columns-button-table {\n padding: var(--spacing-2);\n background-color: white;\n font-size: 13px;\n}\n.tek-grid-columns-button-table thead tr th {\n padding: var(--spacing-1) var(--spacing-2);\n white-space: nowrap;\n text-align: left;\n}\n.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-table tbody tr td.tek-grid-columns-button-column-name {\n cursor: -webkit-grab;\n}\n.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-table tbody tr td.tek-grid-columns-button-column-aggregation {\n max-width: 150px;\n}\n\n.tek-grid-columns-button-options {\n max-height: 250px;\n}\n\n.tek-grid-columns-button-sortable-drag {\n background: white;\n}\n\n/*# sourceMappingURL=TekGridColumnsButton.vue.map */"]}, media: undefined });
3908
+ inject("data-v-0b148da7_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}\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 });
3017
3909
 
3018
3910
  };
3019
3911
  /* scoped */
@@ -3071,10 +3963,14 @@
3071
3963
  });
3072
3964
  if (layout) {
3073
3965
  tableElement.style.width = layout.gridWidth;
3966
+ grid.datasource.order = layout.order !== undefined ? layout.order : grid.datasource.order;
3074
3967
  grid.columns = layout.columns.map((column) => {
3075
3968
  const col = gridColumns[column.name];
3969
+ col.label = column.label !== undefined ? column.label : col.label;
3970
+ col.align = column.align !== undefined ? column.align : col.align;
3076
3971
  col.isVisible = column.isVisible !== undefined ? column.isVisible : col.isVisible;
3077
3972
  col.grouped = !!column.grouped;
3973
+ col.groupOpened = !!column.groupOpened;
3078
3974
  col.aggregation = column.aggregation;
3079
3975
  col.minWidth = column.minWidth || '';
3080
3976
  col.maxWidth = column.maxWidth || '';
@@ -3091,10 +3987,14 @@
3091
3987
  });
3092
3988
  }
3093
3989
  else {
3990
+ grid.datasource.order = [...this.instance.originalDatasourceOrder];
3094
3991
  grid.columns = this.instance.originalColumnProps.map((column) => {
3095
3992
  const col = gridColumns[column.name];
3096
3993
  col.isVisible = column.isVisible;
3994
+ col.label = column.label;
3995
+ col.align = column.align;
3097
3996
  col.grouped = column.grouped;
3997
+ col.groupOpened = column.groupOpened;
3098
3998
  col.aggregation = column.aggregation;
3099
3999
  col.minWidth = column.minWidth || '';
3100
4000
  col.maxWidth = column.maxWidth || '';
@@ -3115,16 +4015,20 @@
3115
4015
  return {
3116
4016
  name: layoutName,
3117
4017
  gridWidth,
4018
+ order: grid.datasource.order,
3118
4019
  columns: grid.columns.map((column, index) => {
3119
4020
  const columnElement = tableElement === null || tableElement === void 0 ? void 0 : tableElement.querySelector(`tr th:not(.selectable)[index="${index}"]`);
3120
4021
  return {
3121
4022
  name: column.name,
4023
+ label: column.label,
4024
+ align: column.align,
3122
4025
  width: columnElement ? window.getComputedStyle(columnElement).width : 'unset',
3123
4026
  minWidth: column.minWidth,
3124
4027
  maxWidth: column.maxWidth,
3125
4028
  filter: '',
3126
4029
  isVisible: column.isVisible,
3127
4030
  grouped: column.grouped,
4031
+ groupOpened: column.groupOpened,
3128
4032
  aggregation: column.aggregation,
3129
4033
  };
3130
4034
  }),
@@ -3394,7 +4298,7 @@
3394
4298
  /* style */
3395
4299
  const __vue_inject_styles__$5 = function (inject) {
3396
4300
  if (!inject) return
3397
- 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}\n\n/*# sourceMappingURL=TekGridLayoutOptions.vue.map */", map: {"version":3,"sources":["/Users/zedmartins/workfolder/zeedhi/teknisa-components/packages/vuetify/src/components/tek-grid/TekGridLayoutOptions.vue","TekGridLayoutOptions.vue"],"names":[],"mappings":"AA6GA;EACA,sCAAA;EACA,0CAAA;EACA,iBAAA;EACA,oBAAA;EACA,6DAAA;AC5GA;AD8GA;EACA,4CAAA;AC5GA;ADkHA;EACA,eAAA;EACA,eAAA;EACA,gBAAA;AC/GA;ADiHA;EACA,gBAAA;AC/GA;ADkHA;EACA,gBAAA;AChHA;ADkHA;EACA,gBAAA;AChHA;ADoHA;EACA,aAAA;EACA,kBAAA;EACA,UAAA;AClHA;ADoHA;EACA,eAAA;AClHA;;AAEA,mDAAmD","file":"TekGridLayoutOptions.vue","sourcesContent":["<template>\n <v-menu\n v-show=\"instance.isVisible\"\n :name=\"instance.name\" \n :class=\"['tek-grid-layout-options', instance.cssClass]\"\n :style=\"instance.cssStyle\"\n offset-y\n ref=\"layoutMenu\"\n :closeOnContentClick=\"false\"\n >\n <template v-slot:activator=\"{ on: onMenu }\"> \n <v-tooltip bottom>\n <template v-slot:activator=\"{ on: onTooltip }\">\n <span v-on=\"{ ...onMenu, ...onTooltip }\">\n <v-badge\n overlap\n class=\"tek-grid-layout-options-badge\"\n dot\n :offsetX=\"12\"\n :offsetY=\"12\"\n :value=\"instance.layoutEdited\"\n >\n <zd-button\n :name=\"instance.name + '_button'\"\n icon-name=\"layout\"\n icon\n ></zd-button>\n </v-badge>\n </span>\n </template>\n <span>{{ $t('LAYOUT') + (instance.currentLayoutName || $t('DEFAULT_LAYOUT')) }}</span>\n </v-tooltip>\n </template>\n <v-list>\n <v-list-item>\n <zd-text-input\n :name=\"instance.name+'_new_layout'\"\n ref=\"inputNewLayout\"\n v-bind=\"{\n showHelper: false,\n showLabel: false,\n placeholder: 'NEW_LAYOUT',\n appendOuterIcon: 'confirmLayout',\n autofocus: true,\n autofill: false,\n keyMap: {\n enter: {\n event: confirmLayoutClick,\n input: true,\n active: true,\n },\n },\n events: {\n appendOuterIconClick: confirmLayoutClick,\n },\n }\"\n />\n </v-list-item>\n <v-list-item\n :class=\"['tek-grid-layout-item', {\n selected: instance.currentLayoutName === ''\n }]\"\n @click=\"instance.applyLayout('')\"\n >\n {{ $t('DEFAULT_LAYOUT') }}\n </v-list-item>\n <v-list-item\n v-for=\"item in instance.layoutNames\"\n :key=\"item\"\n :class=\"['tek-grid-layout-item', {\n selected: item === instance.currentLayoutName\n }]\"\n @click=\"instance.applyLayout(item)\"\n >\n {{ item }}\n <span class=\"tek-grid-layout-item-buttons\">\n <zd-button\n :name=\"'tek-grid-layout-item-update_' + item\"\n v-bind=\"{\n small: true,\n icon: true,\n iconName: 'updateLayout',\n events: {\n click: ({ event }) => { updateLayout(event, item) },\n },\n }\"\n />\n <zd-button\n :name=\"'tek-grid-layout-item-delete_' + item\"\n v-bind=\"{\n small: true,\n icon: true,\n iconName: 'delete',\n events: {\n click: ({ event }) => { deleteLayout(event, item) },\n },\n }\"\n />\n </span>\n </v-list-item>\n </v-list>\n </v-menu>\n</template>\n\n<script lang=\"ts\" src=\"./TekGridLayoutOptions.ts\"></script>\n\n<style lang=\"scss\">\n.tek-grid-layout-options {\n &-badge {\n .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 span {\n color: var(--zd-badge-text-color) !important;\n }\n }\n }\n}\n\n.tek-grid-layout-item {\n font-size: 13px;\n cursor: pointer;\n min-height: 30px;\n\n &.selected {\n font-weight: 700;\n }\n\n &:hover {\n background: #eee;\n\n .tek-grid-layout-item-buttons {\n display: inherit;\n }\n }\n\n .tek-grid-layout-item-buttons {\n display: none;\n position: absolute;\n right: 5px;\n\n .v-icon {\n font-size: 12px;\n }\n }\n}\n</style>",".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\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}\n\n/*# sourceMappingURL=TekGridLayoutOptions.vue.map */"]}, media: undefined });
4301
+ 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 });
3398
4302
 
3399
4303
  };
3400
4304
  /* scoped */
@@ -3521,22 +4425,62 @@
3521
4425
  var _c = _vm._self._c || _h;
3522
4426
  return _c(
3523
4427
  "div",
3524
- { staticClass: "tek-iterable-carousel" },
4428
+ {
4429
+ directives: [
4430
+ {
4431
+ name: "show",
4432
+ rawName: "v-show",
4433
+ value: _vm.instance.isVisible,
4434
+ expression: "instance.isVisible"
4435
+ }
4436
+ ],
4437
+ class: ["tek-iterable-carousel", _vm.instance.cssClass],
4438
+ style: _vm.instance.cssStyle,
4439
+ attrs: { name: _vm.instance.name }
4440
+ },
3525
4441
  [
3526
4442
  _vm.instance.iterable.datasource.loading
3527
4443
  ? _c("v-progress-circular", {
3528
4444
  staticClass: "zd-frame",
3529
4445
  attrs: { indeterminate: "", size: "64", color: "primary" }
3530
4446
  })
3531
- : _vm.instance.iterable.datasource.error
3532
- ? _c("span", { staticClass: "error--text" }, [
3533
- _vm._v(_vm._s(_vm.$t(_vm.instance.iterable.datasource.error)))
3534
- ])
3535
- : !_vm.instance.iterable.datasource.data.length
3536
- ? _c("span", { staticClass: "no--data" }, [
3537
- _vm._v(_vm._s(_vm.$t("NO_DATA")))
3538
- ])
3539
- : _vm._e(),
4447
+ : _c("zd-iterable-no-data", {
4448
+ ref: "iterableNoData",
4449
+ attrs: {
4450
+ name: _vm.instance.name + "_no_data",
4451
+ instance: _vm.instance.iterable,
4452
+ noDataSlot: _vm.instance.iterable.noDataSlot,
4453
+ noResultSlot: _vm.instance.iterable.noResultSlot,
4454
+ errorSlot: _vm.instance.iterable.errorSlot
4455
+ },
4456
+ scopedSlots: _vm._u(
4457
+ [
4458
+ {
4459
+ key: "errorSlot",
4460
+ fn: function() {
4461
+ return [_vm._t("errorSlot")]
4462
+ },
4463
+ proxy: true
4464
+ },
4465
+ {
4466
+ key: "noResultSlot",
4467
+ fn: function() {
4468
+ return [_vm._t("noResultSlot")]
4469
+ },
4470
+ proxy: true
4471
+ },
4472
+ {
4473
+ key: "noDataSlot",
4474
+ fn: function() {
4475
+ return [_vm._t("noDataSlot")]
4476
+ },
4477
+ proxy: true
4478
+ }
4479
+ ],
4480
+ null,
4481
+ true
4482
+ )
4483
+ }),
3540
4484
  _vm._v(" "),
3541
4485
  _c("zd-carousel", {
3542
4486
  attrs: {
@@ -3825,7 +4769,7 @@
3825
4769
  /* style */
3826
4770
  const __vue_inject_styles__$2 = function (inject) {
3827
4771
  if (!inject) return
3828
- inject("data-v-02c0169b_0", { source: ".tek-iterable-component-render[data-v-02c0169b] {\n width: 100%;\n display: flex;\n flex-wrap: wrap;\n -webkit-box-flex: 1;\n flex: 1 1 auto;\n}\n.tek-iterable-component-render .error--text[data-v-02c0169b],\n.tek-iterable-component-render .no--data[data-v-02c0169b] {\n text-align: center;\n width: 100%;\n font-size: 14px;\n}\n.tek-iterable-component-render .no--data[data-v-02c0169b] {\n color: rgba(0, 0, 0, 0.38);\n}\n.tek-iterable-component-render .tek-iterable-toolbar[data-v-02c0169b] {\n display: flex;\n justify-content: space-between;\n margin-bottom: 16px;\n align-items: center;\n width: 100%;\n}\n.tek-iterable-component-render .tek-iterable-footer[data-v-02c0169b] {\n padding: 5px 0;\n display: flex;\n width: 100%;\n}\n\n/*# sourceMappingURL=TekIterableComponentRender.vue.map */", map: {"version":3,"sources":["/Users/zedmartins/workfolder/zeedhi/teknisa-components/packages/vuetify/src/components/tek-iterable-component-render/TekIterableComponentRender.vue","TekIterableComponentRender.vue"],"names":[],"mappings":"AAkGA;EACA,WAAA;EACA,aAAA;EACA,eAAA;EACA,mBAAA;EACA,cAAA;ACjGA;ADmGA;;EAEA,kBAAA;EACA,WAAA;EACA,eAAA;ACjGA;ADoGA;EACA,0BAAA;AClGA;ADqGA;EACA,aAAA;EACA,8BAAA;EACA,mBAAA;EACA,mBAAA;EACA,WAAA;ACnGA;ADsGA;EACA,cAAA;EACA,aAAA;EACA,WAAA;ACpGA;;AAEA,yDAAyD","file":"TekIterableComponentRender.vue","sourcesContent":["<template>\n <div v-if=\"instance.isVisible\" :class=\"['tek-iterable-component-render', instance.cssClass]\">\n <div class=\"tek-iterable-toolbar\" v-if=\"instance.toolbarSlot.length || !!$slots.toolbarSlot\">\n <div class=\"tek-iterable-toolbar-slot\">\n <component\n v-for=\"(child, index) in instance.toolbarSlot\"\n :key=\"index\"\n :is=\"child.component\"\n :parent=\"instance\"\n v-bind=\"child\"\n ></component>\n <slot name=\"toolbarSlot\"></slot>\n </div>\n </div>\n\n <v-progress-circular\n v-if=\"instance.datasource.loading\"\n indeterminate\n class=\"zd-frame\"\n size=\"64\"\n color=\"primary\"\n ></v-progress-circular>\n\n <template v-else-if=\"instance.datasource.error\">\n <component\n v-for=\"(child, index) in instance.errorSlot\"\n :key=\"index\"\n :is=\"child.component\"\n :parent=\"instance\"\n v-bind=\"child\"\n ></component>\n <slot name=\"errorSlot\"></slot>\n <span\n v-if=\"instance.errorSlot.length === 0\"\n class=\"error--text\"\n >{{ $t(instance.datasource.error) }}</span>\n </template>\n\n <component\n v-else-if=\"instance.datasource.data.length\"\n v-for=\"(row) in instance.datasource.data\"\n :key=\"JSON.stringify(row)\"\n :is=\"instance.componentMetadata.component\"\n v-bind=\"instance.getComponentMetadata(row)\"\n />\n\n <template\n v-else-if=\"!instance.datasource.currentRow[instance.datasource.uniqueKey]\"\n class=\"no--data\">\n <template\n v-if=\"instance.datasource.search\">\n <component\n v-for=\"(child, index) in instance.noResultSlot\"\n :key=\"index\"\n :is=\"child.component\"\n :parent=\"instance\"\n v-bind=\"child\"\n ></component>\n <slot name=\"noResultSlot\"></slot>\n </template>\n <template\n v-else>\n <component\n v-for=\"(child, index) in instance.noDataSlot\"\n :key=\"index\"\n :is=\"child.component\"\n :parent=\"instance\"\n v-bind=\"child\"\n ></component>\n <slot name=\"noDataSlot\"></slot>\n </template>\n </template>\n\n <component\n v-else\n :key=\"JSON.stringify(instance.datasource.currentRow)\"\n :is=\"instance.componentMetadata.component\"\n v-bind=\"instance.getComponentMetadata(instance.datasource.currentRow)\"\n />\n\n <div class=\"tek-iterable-footer\">\n <template v-if=\"instance.footerSlot || !!$slots.footerSlot\">\n <component\n v-for=\"(child, index) in instance.footerSlot\"\n :key=\"index\"\n :is=\"child.component\"\n :parent=\"instance\"\n v-bind=\"child\"\n ></component>\n <slot name=\"footerSlot\"></slot>\n </template>\n </div>\n </div>\n</template>\n\n<script lang=\"ts\" src=\"./TekIterableComponentRender.ts\"></script>\n\n<style lang=\"scss\" scoped>\n.tek-iterable-component-render {\n width: 100%;\n display: flex;\n flex-wrap: wrap;\n -webkit-box-flex: 1;\n flex: 1 1 auto;\n\n .error--text,\n .no--data {\n text-align: center;\n width: 100%;\n font-size: 14px;\n }\n\n .no--data {\n color: rgba(0, 0, 0, 0.38);\n }\n\n .tek-iterable-toolbar {\n display: flex;\n justify-content: space-between;\n margin-bottom: 16px;\n align-items: center;\n width: 100%;\n }\n\n .tek-iterable-footer {\n padding: 5px 0;\n display: flex;\n width: 100%;\n }\n}\n</style>",".tek-iterable-component-render {\n width: 100%;\n display: flex;\n flex-wrap: wrap;\n -webkit-box-flex: 1;\n flex: 1 1 auto;\n}\n.tek-iterable-component-render .error--text,\n.tek-iterable-component-render .no--data {\n text-align: center;\n width: 100%;\n font-size: 14px;\n}\n.tek-iterable-component-render .no--data {\n color: rgba(0, 0, 0, 0.38);\n}\n.tek-iterable-component-render .tek-iterable-toolbar {\n display: flex;\n justify-content: space-between;\n margin-bottom: 16px;\n align-items: center;\n width: 100%;\n}\n.tek-iterable-component-render .tek-iterable-footer {\n padding: 5px 0;\n display: flex;\n width: 100%;\n}\n\n/*# sourceMappingURL=TekIterableComponentRender.vue.map */"]}, media: undefined });
4772
+ inject("data-v-02c0169b_0", { source: ".tek-iterable-component-render[data-v-02c0169b] {\n width: 100%;\n display: flex;\n flex-wrap: wrap;\n -webkit-box-flex: 1;\n flex: 1 1 auto;\n}\n.tek-iterable-component-render .error--text[data-v-02c0169b],\n.tek-iterable-component-render .no--data[data-v-02c0169b] {\n text-align: center;\n width: 100%;\n font-size: 14px;\n}\n.tek-iterable-component-render .no--data[data-v-02c0169b] {\n color: rgba(0, 0, 0, 0.38);\n}\n.tek-iterable-component-render .tek-iterable-toolbar[data-v-02c0169b] {\n display: flex;\n justify-content: space-between;\n margin-bottom: 16px;\n align-items: center;\n width: 100%;\n}\n.tek-iterable-component-render .tek-iterable-footer[data-v-02c0169b] {\n padding: 5px 0;\n display: flex;\n width: 100%;\n}", map: undefined, media: undefined });
3829
4773
 
3830
4774
  };
3831
4775
  /* scoped */
@@ -3964,7 +4908,7 @@
3964
4908
  /* style */
3965
4909
  const __vue_inject_styles__$1 = function (inject) {
3966
4910
  if (!inject) return
3967
- inject("data-v-552c53cd_0", { source: ".tek-notifications .tek-card-title .mark-read-text {\n font-size: var(--zd-font-body1-size);\n font-weight: var(--zd-font-body1-weight);\n display: inline-block;\n}\n.tek-notifications .tek-card-title .mark-read-text p {\n margin-bottom: 0px;\n}\n.tek-notifications .tek-card-title hr.v-divider {\n margin-bottom: 0px;\n}\n.tek-notifications ul.tek-notifications-list {\n list-style: none;\n padding: 0;\n}\n.tek-notifications ul.tek-notifications-list li {\n border-bottom: solid 1px rgba(0, 0, 0, 0.12);\n color: #667080;\n font-size: var(--zd-font-body1-size);\n font-weight: var(--zd-font-body1-weight);\n line-height: 14px;\n padding: 10px 20px 10px 0;\n position: relative;\n}\n.tek-notifications ul.tek-notifications-list li .tek-notification-subject {\n font-weight: 700;\n}\n.tek-notifications ul.tek-notifications-list li .tek-notification-read-mark {\n width: 10px;\n height: 10px;\n background-color: var(--v-primary-base);\n border-radius: 50%;\n position: absolute;\n right: 2px;\n top: 12px;\n}\n.tek-notifications ul.tek-notifications-list li:last-child {\n border-bottom: none;\n}\n.tek-notifications .tek-notification-show-all {\n text-decoration: none;\n text-align: center;\n padding-top: 10px;\n font-weight: 700;\n display: block;\n border-top: solid 1px rgba(0, 0, 0, 0.12);\n}\n\n/*# sourceMappingURL=TekNotifications.vue.map */", map: {"version":3,"sources":["/Users/zedmartins/workfolder/zeedhi/teknisa-components/packages/vuetify/src/components/tek-notifications/TekNotifications.vue","TekNotifications.vue"],"names":[],"mappings":"AAyBA;EACA,oCAAA;EACA,wCAAA;EACA,qBAAA;ACxBA;ADyBA;EACA,kBAAA;ACvBA;AD2BA;EACA,kBAAA;ACzBA;AD6BA;EACA,gBAAA;EACA,UAAA;AC3BA;AD6BA;EACA,4CAAA;EACA,cAAA;EACA,oCAAA;EACA,wCAAA;EACA,iBAAA;EACA,yBAAA;EACA,kBAAA;AC3BA;AD6BA;EACA,gBAAA;AC3BA;AD8BA;EACA,WAAA;EACA,YAAA;EACA,uCAAA;EACA,kBAAA;EACA,kBAAA;EACA,UAAA;EACA,SAAA;AC5BA;AD+BA;EACA,mBAAA;AC7BA;ADkCA;EACA,qBAAA;EACA,kBAAA;EACA,iBAAA;EACA,gBAAA;EACA,cAAA;EACA,yCAAA;AChCA;;AAEA,+CAA+C","file":"TekNotifications.vue","sourcesContent":["<template>\n <div class=\"tek-notifications\">\n <tek-card-title v-bind=\"instance.cardTitle\" />\n <span v-if=\"instance.datasource.error\" class=\"error--text\">{{ $t(instance.datasource.error) }}</span>\n <span v-else-if=\"!instance.datasource.data.length\">{{$t('NO_NOTIFICATIONS')}}</span>\n <ul v-else class=\"tek-notifications-list\">\n <li v-for=\"notification in instance.datasource.data\"\n :key=\"notification.id\"\n @click=\"notificationClick($event, notification)\">\n <span class=\"tek-notification-subject\">{{ notification.subject }}</span>\n <span class=\"tek-notification-body\"> - {{ notification.body }}</span>\n <span v-if=\"!notification.read\" class=\"tek-notification-read-mark\"></span>\n </li>\n </ul>\n <router-link v-if=\"instance.allNotificationsPath\" class=\"tek-notification-show-all\" :to=\"instance.allNotificationsPath\">\n <div @click=\"showAll($event)\">{{ $t('SEE_ALL_NOTIFICATIONS') }}</div>\n </router-link>\n </div>\n</template>\n\n<script lang=\"ts\" src=\"./TekNotifications.ts\"></script>\n\n<style lang=\"scss\">\n.tek-notifications {\n .tek-card-title {\n .mark-read-text {\n font-size: var(--zd-font-body1-size);\n font-weight: var(--zd-font-body1-weight);\n display: inline-block;\n p {\n margin-bottom: 0px;\n }\n }\n\n hr.v-divider {\n margin-bottom: 0px;\n }\n }\n\n ul.tek-notifications-list {\n list-style: none;\n padding: 0;\n\n li {\n border-bottom: solid 1px rgba(0,0,0,.12);\n color: #667080;\n font-size: var(--zd-font-body1-size);\n font-weight: var(--zd-font-body1-weight);\n line-height: 14px;\n padding: 10px 20px 10px 0;\n position: relative;\n\n .tek-notification-subject {\n font-weight: 700;\n }\n\n .tek-notification-read-mark {\n width: 10px;\n height: 10px;\n background-color: var(--v-primary-base);\n border-radius: 50%;\n position: absolute;\n right: 2px;\n top: 12px;\n }\n\n &:last-child {\n border-bottom: none;\n }\n }\n }\n\n .tek-notification-show-all {\n text-decoration: none;\n text-align: center;\n padding-top: 10px;\n font-weight: 700;\n display: block;\n border-top: solid 1px rgba(0,0,0,.12);\n }\n}\n</style>",".tek-notifications .tek-card-title .mark-read-text {\n font-size: var(--zd-font-body1-size);\n font-weight: var(--zd-font-body1-weight);\n display: inline-block;\n}\n.tek-notifications .tek-card-title .mark-read-text p {\n margin-bottom: 0px;\n}\n.tek-notifications .tek-card-title hr.v-divider {\n margin-bottom: 0px;\n}\n.tek-notifications ul.tek-notifications-list {\n list-style: none;\n padding: 0;\n}\n.tek-notifications ul.tek-notifications-list li {\n border-bottom: solid 1px rgba(0, 0, 0, 0.12);\n color: #667080;\n font-size: var(--zd-font-body1-size);\n font-weight: var(--zd-font-body1-weight);\n line-height: 14px;\n padding: 10px 20px 10px 0;\n position: relative;\n}\n.tek-notifications ul.tek-notifications-list li .tek-notification-subject {\n font-weight: 700;\n}\n.tek-notifications ul.tek-notifications-list li .tek-notification-read-mark {\n width: 10px;\n height: 10px;\n background-color: var(--v-primary-base);\n border-radius: 50%;\n position: absolute;\n right: 2px;\n top: 12px;\n}\n.tek-notifications ul.tek-notifications-list li:last-child {\n border-bottom: none;\n}\n.tek-notifications .tek-notification-show-all {\n text-decoration: none;\n text-align: center;\n padding-top: 10px;\n font-weight: 700;\n display: block;\n border-top: solid 1px rgba(0, 0, 0, 0.12);\n}\n\n/*# sourceMappingURL=TekNotifications.vue.map */"]}, media: undefined });
4911
+ inject("data-v-552c53cd_0", { source: ".tek-notifications .tek-card-title .mark-read-text {\n font-size: var(--zd-font-body1-size);\n font-weight: var(--zd-font-body1-weight);\n display: inline-block;\n}\n.tek-notifications .tek-card-title .mark-read-text p {\n margin-bottom: 0px;\n}\n.tek-notifications .tek-card-title hr.v-divider {\n margin-bottom: 0px;\n}\n.tek-notifications ul.tek-notifications-list {\n list-style: none;\n padding: 0;\n}\n.tek-notifications ul.tek-notifications-list li {\n border-bottom: solid 1px rgba(0, 0, 0, 0.12);\n color: #667080;\n font-size: var(--zd-font-body1-size);\n font-weight: var(--zd-font-body1-weight);\n line-height: 14px;\n padding: 10px 20px 10px 0;\n position: relative;\n}\n.tek-notifications ul.tek-notifications-list li .tek-notification-subject {\n font-weight: 700;\n}\n.tek-notifications ul.tek-notifications-list li .tek-notification-read-mark {\n width: 10px;\n height: 10px;\n background-color: var(--v-primary-base);\n border-radius: 50%;\n position: absolute;\n right: 2px;\n top: 12px;\n}\n.tek-notifications ul.tek-notifications-list li:last-child {\n border-bottom: none;\n}\n.tek-notifications .tek-notification-show-all {\n text-decoration: none;\n text-align: center;\n padding-top: 10px;\n font-weight: 700;\n display: block;\n border-top: solid 1px rgba(0, 0, 0, 0.12);\n}", map: undefined, media: undefined });
3968
4912
 
3969
4913
  };
3970
4914
  /* scoped */
@@ -4183,7 +5127,7 @@
4183
5127
  /* style */
4184
5128
  const __vue_inject_styles__ = function (inject) {
4185
5129
  if (!inject) return
4186
- 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}\n\n/*# sourceMappingURL=TekProductCard.vue.map */", map: {"version":3,"sources":["/Users/zedmartins/workfolder/zeedhi/teknisa-components/packages/vuetify/src/components/tek-product-card/TekProductCard.vue","TekProductCard.vue"],"names":[],"mappings":"AA4CA;EACA,qBAAA;AC3CA;AD8CA;EACA,WAAA;AC5CA;AD6CA;EACA,kBAAA;AC3CA;AD6CA;EACA,kBAAA;AC3CA;AD6CA;EACA,aAAA;EACA,sBAAA;EACA,2BAAA;EACA,2BAAA;AC3CA;AD6CA;EACA,mBAAA;EACA,WAAA;EACA,gBAAA;EACA,uBAAA;EACA,eAAA;EACA,iBAAA;AC3CA;AD6CA;EACA,oCAAA;EACA,iBAAA;EACA,cAAA;AC3CA;AD6CA;EACA,aAAA;EACA,8BAAA;EACA,mBAAA;EACA,iBAAA;AC3CA;AD6CA;EACA,oCAAA;EACA,iBAAA;AC3CA;AD6CA;EACA,wCAAA;EACA,oCAAA;EACA,iBAAA;AC3CA;ADkDA;EACA,eAAA;AChDA;;AAEA,6CAA6C","file":"TekProductCard.vue","sourcesContent":["<template >\n <div\n v-if=\"instance.isVisible\"\n :class=\"[\n 'tek-product-card',\n { 'tek-product-card--link': instance.events.click },\n instance.cssClass\n ]\"\n :style=\"{ width: instance.width }\"\n @click=\"click($event)\"\n >\n <zd-card :name=\"instance.name\" :elevation=\"2\" :to=\"instance.to\">\n <div class=\"tek-product-card-image-container\">\n <zd-image\n :name=\"instance.name+'_image'\"\n :src=\"instance.src\"\n :errorImagePath=\"instance.errorImagePath\"\n :errorImageText=\"$t(instance.errorImageText)\"\n width=\"100%\"\n object-fit=\"contain\"\n height= \"210px\"\n />\n </div>\n <div class=\"tek-product-card-info\">\n <v-tooltip :disabled=\"disableTooltip\" top>\n <template v-slot:activator=\"{ on }\">\n <div v-on=\"on\" ref=\"productDiv\" class=\"tek-product-card-title\">{{ instance.productName }}</div>\n </template>\n <span>{{ instance.productName }}</span>\n </v-tooltip>\n <div v-if=\"instance.productSupplier\" class=\"tek-product-card-supplier\">{{ instance.productSupplier }}</div>\n <div class=\"tek-product-card-footer\">\n <div v-if=\"instance.productPrice\" class=\"tek-product-card-price\">{{ instance.productPriceFormat }}</div>\n <div v-if=\"instance.productBrand\" class=\"tek-product-card-brand\">{{ instance.productBrand }}</div>\n </div>\n </div>\n </zd-card>\n </div>\n</template>\n\n<script lang=\"ts\" src=\"./TekProductCard.ts\"></script>\n\n<style lang=\"scss\">\n.tek-product-card {\n * {\n text-decoration: none;\n }\n\n .v-card {\n padding: 0%;\n .tek-image-content {\n text-align: center;\n }\n .tek-product-card-image-container {\n position: relative;\n }\n .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-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-supplier {\n font-size: var(--zd-font-body2-size);\n line-height: 14px;\n color: #c4c4c4;\n }\n .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-brand {\n font-size: var(--zd-font-body2-size);\n line-height: 14px;\n }\n .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 }\n }\n }\n\n &--link {\n .v-card {\n cursor: pointer;\n }\n }\n}\n</style>",".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}\n\n/*# sourceMappingURL=TekProductCard.vue.map */"]}, media: undefined });
5130
+ 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 });
4187
5131
 
4188
5132
  };
4189
5133
  /* scoped */
@@ -4260,8 +5204,8 @@
4260
5204
  exports.TekImage = script$4;
4261
5205
  exports.TekIterableComponentRender = script$2;
4262
5206
  exports.TekProductCard = script;
4263
- exports['default'] = TeknisaComponents;
5207
+ exports["default"] = TeknisaComponents;
4264
5208
 
4265
5209
  Object.defineProperty(exports, '__esModule', { value: true });
4266
5210
 
4267
- })));
5211
+ }));