@dolusoft/vue3-datatable 1.8.47 → 1.8.50

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 (4) hide show
  1. package/dist/vue3-datatable.cjs +19 -26
  2. package/dist/vue3-datatable.css +62 -62
  3. package/dist/vue3-datatable.js +19 -26
  4. package/package.json +1 -1
package/dist/vue3-datatable.cjs CHANGED
@@ -2469,7 +2469,7 @@ const _export_sfc = (sfc, props) => {
2469
2469
  }
2470
2470
  return target;
2471
2471
  };
2472
- const ButtonExpand = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["__scopeId", "data-v-4d01a2fa"]]);
2472
+ const ButtonExpand = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["__scopeId", "data-v-da3bc8d5"]]);
2473
2473
  const __default__$4 = {
2474
2474
  name: "ButtonRightPanel"
2475
2475
  };
@@ -2495,7 +2495,7 @@ const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
2495
2495
  };
2496
2496
  }
2497
2497
  });
2498
- const ButtonRightPanel = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["__scopeId", "data-v-d739c6bf"]]);
2498
+ const ButtonRightPanel = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["__scopeId", "data-v-b373d5f7"]]);
2499
2499
  const sides = ["top", "right", "bottom", "left"];
2500
2500
  const alignments = ["start", "end"];
2501
2501
  const placements = /* @__PURE__ */ sides.reduce((acc, side) => acc.concat(side, side + "-" + alignments[0], side + "-" + alignments[1]), []);
@@ -5479,10 +5479,8 @@ const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
5479
5479
  } else {
5480
5480
  column.value = isEmpty ? "" : newValue;
5481
5481
  }
5482
- if (isEmpty) {
5483
- column.condition = "";
5484
- columnConditions.value[col.field] = "";
5485
- } else if (!columnConditions.value[col.field]) {
5482
+ if (isEmpty) ;
5483
+ else if (!columnConditions.value[col.field]) {
5486
5484
  column.condition = "Equal";
5487
5485
  columnConditions.value[col.field] = "Equal";
5488
5486
  } else {
@@ -5587,8 +5585,6 @@ const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
5587
5585
  if (currentCondition !== colState.condition) {
5588
5586
  columnConditions.value[colState.field] = colState.condition;
5589
5587
  }
5590
- } else if (!hasValue) {
5591
- columnConditions.value[colState.field] = "";
5592
5588
  }
5593
5589
  }
5594
5590
  });
@@ -7021,16 +7017,13 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
7021
7017
  filterChange();
7022
7018
  emit("clearAllFilters");
7023
7019
  };
7024
- let extracolumnlength = 0;
7025
- if (props.hasCheckbox) {
7026
- extracolumnlength++;
7027
- }
7028
- if (props.hasSubtable) {
7029
- extracolumnlength++;
7030
- }
7031
- if (props.hasRightPanel) {
7032
- extracolumnlength++;
7033
- }
7020
+ const extracolumnlength = vue.computed(() => {
7021
+ let count = 0;
7022
+ if (props.hasCheckbox) count++;
7023
+ if (props.hasSubtable) count++;
7024
+ if (props.hasRightPanel) count++;
7025
+ return count;
7026
+ });
7034
7027
  const topmenusize = vue.ref(props.topmenusize);
7035
7028
  const topmenuel = vue.ref(null);
7036
7029
  const { height: topmenuheight } = useElementSize(
@@ -7320,7 +7313,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
7320
7313
  onClick: vue.withModifiers(($event) => rowClick(item, i2), ["prevent"])
7321
7314
  }, [
7322
7315
  vue.createElementVNode("td", {
7323
- colspan: props.columns.length + vue.unref(extracolumnlength)
7316
+ colspan: props.columns.length + extracolumnlength.value
7324
7317
  }, [
7325
7318
  vue.renderSlot(_ctx.$slots, "tsub", {
7326
7319
  rowData: item,
@@ -7337,7 +7330,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
7337
7330
  class: "!bh-bg-white bh-h-11 !bh-border-transparent"
7338
7331
  }, [
7339
7332
  vue.createElementVNode("td", {
7340
- colspan: props.columns.length + vue.unref(extracolumnlength),
7333
+ colspan: props.columns.length + extracolumnlength.value,
7341
7334
  class: "!bh-p-0 !bh-border-transparent"
7342
7335
  }, _hoisted_19, 8, _hoisted_17)
7343
7336
  ]);
@@ -7347,9 +7340,9 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
7347
7340
  key: item[uniqueKey.value] ? item[uniqueKey.value] : i2,
7348
7341
  class: "sticky-table-footer"
7349
7342
  }, [
7350
- vue.unref(extracolumnlength) > 0 ? (vue.openBlock(), vue.createElementBlock("td", {
7343
+ extracolumnlength.value > 0 ? (vue.openBlock(), vue.createElementBlock("td", {
7351
7344
  key: 0,
7352
- colspan: vue.unref(extracolumnlength)
7345
+ colspan: extracolumnlength.value
7353
7346
  }, null, 8, _hoisted_20)) : vue.createCommentVNode("", true),
7354
7347
  (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(props.columns, (col, j) => {
7355
7348
  return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
@@ -7616,7 +7609,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
7616
7609
  onClick: vue.withModifiers(($event) => rowClick(item, i2), ["prevent"])
7617
7610
  }, [
7618
7611
  vue.createElementVNode("td", {
7619
- colspan: props.columns.length + vue.unref(extracolumnlength)
7612
+ colspan: props.columns.length + extracolumnlength.value
7620
7613
  }, [
7621
7614
  vue.createElementVNode("div", {
7622
7615
  class: "subtable-container",
@@ -7644,7 +7637,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
7644
7637
  class: "!bh-bg-white bh-h-11 !bh-border-transparent"
7645
7638
  }, [
7646
7639
  vue.createElementVNode("td", {
7647
- colspan: props.columns.length + vue.unref(extracolumnlength),
7640
+ colspan: props.columns.length + extracolumnlength.value,
7648
7641
  class: "!bh-p-0 !bh-border-transparent"
7649
7642
  }, _hoisted_30, 8, _hoisted_28)
7650
7643
  ]);
@@ -7654,9 +7647,9 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
7654
7647
  key: item[uniqueKey.value] ? item[uniqueKey.value] : i2,
7655
7648
  class: "sticky-table-footer"
7656
7649
  }, [
7657
- vue.unref(extracolumnlength) > 0 ? (vue.openBlock(), vue.createElementBlock("td", {
7650
+ extracolumnlength.value > 0 ? (vue.openBlock(), vue.createElementBlock("td", {
7658
7651
  key: 0,
7659
- colspan: vue.unref(extracolumnlength)
7652
+ colspan: extracolumnlength.value
7660
7653
  }, null, 8, _hoisted_31)) : vue.createCommentVNode("", true),
7661
7654
  (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(props.columns, (col, j) => {
7662
7655
  return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
package/dist/vue3-datatable.css CHANGED
@@ -1,91 +1,91 @@
1
1
 
2
- .expandbtn[data-v-4d01a2fa] {
2
+ .expandbtn[data-v-da3bc8d5] {
3
3
  cursor: pointer;
4
- }
4
+ }
5
5
 
6
- .rightpanelbtn[data-v-d739c6bf] {
7
- cursor: pointer;
8
- display: inline-flex;
9
- align-items: center;
10
- justify-content: center;
11
- width: 24px;
6
+ .rightpanelbtn[data-v-b373d5f7] {
7
+ cursor: pointer;
8
+ display: inline-flex;
9
+ align-items: center;
10
+ justify-content: center;
11
+ width: 24px;
12
12
  height: 24px;
13
- }
13
+ }
14
14
  .splitpanes{display:flex;width:100%;height:100%}.splitpanes--vertical{flex-direction:row}.splitpanes--horizontal{flex-direction:column}.splitpanes--dragging .splitpanes__pane{-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:none}.splitpanes__pane{width:100%;height:100%;overflow:hidden}.splitpanes--vertical .splitpanes__pane{transition:width .2s ease-out}.splitpanes--horizontal .splitpanes__pane{transition:height .2s ease-out}.splitpanes--dragging .splitpanes__pane{transition:none}.splitpanes__splitter{touch-action:none}.splitpanes--vertical>.splitpanes__splitter{min-width:1px;cursor:col-resize}.splitpanes--horizontal>.splitpanes__splitter{min-height:1px;cursor:row-resize}.splitpanes.default-theme .splitpanes__pane{background-color:#f2f2f2}.splitpanes.default-theme .splitpanes__splitter{background-color:#fff;box-sizing:border-box;position:relative;flex-shrink:0}.splitpanes.default-theme .splitpanes__splitter:before,.splitpanes.default-theme .splitpanes__splitter:after{content:"";position:absolute;top:50%;left:50%;background-color:#00000026;transition:background-color .3s}.splitpanes.default-theme .splitpanes__splitter:hover:before,.splitpanes.default-theme .splitpanes__splitter:hover:after{background-color:#00000040}.splitpanes.default-theme .splitpanes__splitter:first-child{cursor:auto}.default-theme.splitpanes .splitpanes .splitpanes__splitter{z-index:1}.default-theme.splitpanes--vertical>.splitpanes__splitter,.default-theme .splitpanes--vertical>.splitpanes__splitter{width:7px;border-left:1px solid #eee;margin-left:-1px}.default-theme.splitpanes--vertical>.splitpanes__splitter:before,.default-theme.splitpanes--vertical>.splitpanes__splitter:after,.default-theme .splitpanes--vertical>.splitpanes__splitter:before,.default-theme .splitpanes--vertical>.splitpanes__splitter:after{transform:translateY(-50%);width:1px;height:30px}.default-theme.splitpanes--vertical>.splitpanes__splitter:before,.default-theme .splitpanes--vertical>.splitpanes__splitter:before{margin-left:-2px}.default-theme.splitpanes--vertical>.splitpanes__splitter:after,.default-theme .splitpanes--vertical>.splitpanes__splitter:after{margin-left:1px}.default-theme.splitpanes--horizontal>.splitpanes__splitter,.default-theme .splitpanes--horizontal>.splitpanes__splitter{height:7px;border-top:1px solid #eee;margin-top:-1px}.default-theme.splitpanes--horizontal>.splitpanes__splitter:before,.default-theme.splitpanes--horizontal>.splitpanes__splitter:after,.default-theme .splitpanes--horizontal>.splitpanes__splitter:before,.default-theme .splitpanes--horizontal>.splitpanes__splitter:after{transform:translate(-50%);width:30px;height:1px}.default-theme.splitpanes--horizontal>.splitpanes__splitter:before,.default-theme .splitpanes--horizontal>.splitpanes__splitter:before{margin-top:-2px}.default-theme.splitpanes--horizontal>.splitpanes__splitter:after,.default-theme .splitpanes--horizontal>.splitpanes__splitter:after{margin-top:1px}
15
15
 
16
- .left-menu-container {
17
- position: relative;
16
+ .left-menu-container {
17
+ position: relative;
18
18
  flex-shrink: 0 !important;
19
19
  }
20
- .menu-resize-controls {
21
- position: absolute;
22
- right: 0;
23
- top: 50%;
24
- transform: translateY(-50%);
25
- z-index: 10;
26
- background: #f0f0f0;
27
- border-radius: 3px 0 0 3px;
20
+ .menu-resize-controls {
21
+ position: absolute;
22
+ right: 0;
23
+ top: 50%;
24
+ transform: translateY(-50%);
25
+ z-index: 10;
26
+ background: #f0f0f0;
27
+ border-radius: 3px 0 0 3px;
28
28
  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
29
29
  }
30
- .menu-resize-controls button {
31
- width: 16px;
32
- height: 40px;
33
- display: flex;
34
- justify-content: center;
35
- align-items: center;
36
- border: none;
37
- background: transparent;
38
- cursor: pointer;
39
- -webkit-user-select: none;
40
- -moz-user-select: none;
30
+ .menu-resize-controls button {
31
+ width: 16px;
32
+ height: 40px;
33
+ display: flex;
34
+ justify-content: center;
35
+ align-items: center;
36
+ border: none;
37
+ background: transparent;
38
+ cursor: pointer;
39
+ -webkit-user-select: none;
40
+ -moz-user-select: none;
41
41
  user-select: none;
42
42
  }
43
- .bh-datatable thead {
43
+ .bh-datatable thead {
44
44
  z-index: 15 !important;
45
45
  }
46
- .bh-datatable tbody tr {
47
- position: relative;
46
+ .bh-datatable tbody tr {
47
+ position: relative;
48
48
  z-index: 1;
49
49
  }
50
- .bh-datatable tbody tr:has(td[colspan]) {
50
+ .bh-datatable tbody tr:has(td[colspan]) {
51
51
  z-index: 0;
52
- }
52
+ }
53
53
  /* Clear All Filters Button */
54
- .bh-clear-all-button {
55
- display: flex;
56
- align-items: center;
57
- justify-content: center;
58
- width: 28px;
59
- height: 28px;
60
- padding: 0;
61
- border: 1px solid #e0e6ed;
62
- border-radius: 4px;
63
- background: #e0e6ed;
64
- color: rgba(0, 0, 0, 0.4);
65
- cursor: not-allowed;
54
+ .bh-clear-all-button {
55
+ display: flex;
56
+ align-items: center;
57
+ justify-content: center;
58
+ width: 28px;
59
+ height: 28px;
60
+ padding: 0;
61
+ border: 1px solid #e0e6ed;
62
+ border-radius: 4px;
63
+ background: #e0e6ed;
64
+ color: rgba(0, 0, 0, 0.4);
65
+ cursor: not-allowed;
66
66
  transition: all 0.2s ease;
67
67
  }
68
- .bh-clear-all-button:disabled {
68
+ .bh-clear-all-button:disabled {
69
69
  opacity: 0.5;
70
70
  }
71
- .bh-clear-all-button--active {
72
- background: rgba(var(--primary-rgb, 59, 130, 246), 0.1);
73
- border-color: var(--primary, #3b82f6);
74
- color: var(--primary, #3b82f6);
71
+ .bh-clear-all-button--active {
72
+ background: rgba(var(--primary-rgb, 59, 130, 246), 0.1);
73
+ border-color: var(--primary, #3b82f6);
74
+ color: var(--primary, #3b82f6);
75
75
  cursor: pointer;
76
76
  }
77
- .bh-clear-all-button--active:hover {
77
+ .bh-clear-all-button--active:hover {
78
78
  background: rgba(var(--primary-rgb, 59, 130, 246), 0.2);
79
- }
80
-
79
+ }
80
+
81
81
  /* Dark mode */
82
- .dark .bh-clear-all-button {
83
- background: #374151;
84
- border-color: #4b5563;
82
+ .dark .bh-clear-all-button {
83
+ background: #374151;
84
+ border-color: #4b5563;
85
85
  color: rgba(255, 255, 255, 0.4);
86
86
  }
87
- .dark .bh-clear-all-button--active {
88
- background: rgba(var(--primary-rgb, 59, 130, 246), 0.2);
89
- border-color: var(--primary, #3b82f6);
87
+ .dark .bh-clear-all-button--active {
88
+ background: rgba(var(--primary-rgb, 59, 130, 246), 0.2);
89
+ border-color: var(--primary, #3b82f6);
90
90
  color: var(--primary, #3b82f6);
91
- }
91
+ }
package/dist/vue3-datatable.js CHANGED
@@ -2468,7 +2468,7 @@ const _export_sfc = (sfc, props) => {
2468
2468
  }
2469
2469
  return target;
2470
2470
  };
2471
- const ButtonExpand = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["__scopeId", "data-v-4d01a2fa"]]);
2471
+ const ButtonExpand = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["__scopeId", "data-v-da3bc8d5"]]);
2472
2472
  const __default__$4 = {
2473
2473
  name: "ButtonRightPanel"
2474
2474
  };
@@ -2494,7 +2494,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
2494
2494
  };
2495
2495
  }
2496
2496
  });
2497
- const ButtonRightPanel = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["__scopeId", "data-v-d739c6bf"]]);
2497
+ const ButtonRightPanel = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["__scopeId", "data-v-b373d5f7"]]);
2498
2498
  const sides = ["top", "right", "bottom", "left"];
2499
2499
  const alignments = ["start", "end"];
2500
2500
  const placements = /* @__PURE__ */ sides.reduce((acc, side) => acc.concat(side, side + "-" + alignments[0], side + "-" + alignments[1]), []);
@@ -5478,10 +5478,8 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
5478
5478
  } else {
5479
5479
  column.value = isEmpty ? "" : newValue;
5480
5480
  }
5481
- if (isEmpty) {
5482
- column.condition = "";
5483
- columnConditions.value[col.field] = "";
5484
- } else if (!columnConditions.value[col.field]) {
5481
+ if (isEmpty) ;
5482
+ else if (!columnConditions.value[col.field]) {
5485
5483
  column.condition = "Equal";
5486
5484
  columnConditions.value[col.field] = "Equal";
5487
5485
  } else {
@@ -5586,8 +5584,6 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
5586
5584
  if (currentCondition !== colState.condition) {
5587
5585
  columnConditions.value[colState.field] = colState.condition;
5588
5586
  }
5589
- } else if (!hasValue) {
5590
- columnConditions.value[colState.field] = "";
5591
5587
  }
5592
5588
  }
5593
5589
  });
@@ -7020,16 +7016,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
7020
7016
  filterChange();
7021
7017
  emit("clearAllFilters");
7022
7018
  };
7023
- let extracolumnlength = 0;
7024
- if (props.hasCheckbox) {
7025
- extracolumnlength++;
7026
- }
7027
- if (props.hasSubtable) {
7028
- extracolumnlength++;
7029
- }
7030
- if (props.hasRightPanel) {
7031
- extracolumnlength++;
7032
- }
7019
+ const extracolumnlength = computed(() => {
7020
+ let count = 0;
7021
+ if (props.hasCheckbox) count++;
7022
+ if (props.hasSubtable) count++;
7023
+ if (props.hasRightPanel) count++;
7024
+ return count;
7025
+ });
7033
7026
  const topmenusize = ref(props.topmenusize);
7034
7027
  const topmenuel = ref(null);
7035
7028
  const { height: topmenuheight } = useElementSize(
@@ -7319,7 +7312,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
7319
7312
  onClick: withModifiers(($event) => rowClick(item, i2), ["prevent"])
7320
7313
  }, [
7321
7314
  createElementVNode("td", {
7322
- colspan: props.columns.length + unref(extracolumnlength)
7315
+ colspan: props.columns.length + extracolumnlength.value
7323
7316
  }, [
7324
7317
  renderSlot(_ctx.$slots, "tsub", {
7325
7318
  rowData: item,
@@ -7336,7 +7329,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
7336
7329
  class: "!bh-bg-white bh-h-11 !bh-border-transparent"
7337
7330
  }, [
7338
7331
  createElementVNode("td", {
7339
- colspan: props.columns.length + unref(extracolumnlength),
7332
+ colspan: props.columns.length + extracolumnlength.value,
7340
7333
  class: "!bh-p-0 !bh-border-transparent"
7341
7334
  }, _hoisted_19, 8, _hoisted_17)
7342
7335
  ]);
@@ -7346,9 +7339,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
7346
7339
  key: item[uniqueKey.value] ? item[uniqueKey.value] : i2,
7347
7340
  class: "sticky-table-footer"
7348
7341
  }, [
7349
- unref(extracolumnlength) > 0 ? (openBlock(), createElementBlock("td", {
7342
+ extracolumnlength.value > 0 ? (openBlock(), createElementBlock("td", {
7350
7343
  key: 0,
7351
- colspan: unref(extracolumnlength)
7344
+ colspan: extracolumnlength.value
7352
7345
  }, null, 8, _hoisted_20)) : createCommentVNode("", true),
7353
7346
  (openBlock(true), createElementBlock(Fragment, null, renderList(props.columns, (col, j) => {
7354
7347
  return openBlock(), createElementBlock(Fragment, null, [
@@ -7615,7 +7608,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
7615
7608
  onClick: withModifiers(($event) => rowClick(item, i2), ["prevent"])
7616
7609
  }, [
7617
7610
  createElementVNode("td", {
7618
- colspan: props.columns.length + unref(extracolumnlength)
7611
+ colspan: props.columns.length + extracolumnlength.value
7619
7612
  }, [
7620
7613
  createElementVNode("div", {
7621
7614
  class: "subtable-container",
@@ -7643,7 +7636,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
7643
7636
  class: "!bh-bg-white bh-h-11 !bh-border-transparent"
7644
7637
  }, [
7645
7638
  createElementVNode("td", {
7646
- colspan: props.columns.length + unref(extracolumnlength),
7639
+ colspan: props.columns.length + extracolumnlength.value,
7647
7640
  class: "!bh-p-0 !bh-border-transparent"
7648
7641
  }, _hoisted_30, 8, _hoisted_28)
7649
7642
  ]);
@@ -7653,9 +7646,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
7653
7646
  key: item[uniqueKey.value] ? item[uniqueKey.value] : i2,
7654
7647
  class: "sticky-table-footer"
7655
7648
  }, [
7656
- unref(extracolumnlength) > 0 ? (openBlock(), createElementBlock("td", {
7649
+ extracolumnlength.value > 0 ? (openBlock(), createElementBlock("td", {
7657
7650
  key: 0,
7658
- colspan: unref(extracolumnlength)
7651
+ colspan: extracolumnlength.value
7659
7652
  }, null, 8, _hoisted_31)) : createCommentVNode("", true),
7660
7653
  (openBlock(true), createElementBlock(Fragment, null, renderList(props.columns, (col, j) => {
7661
7654
  return openBlock(), createElementBlock(Fragment, null, [
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dolusoft/vue3-datatable",
3
- "version": "1.8.47",
3
+ "version": "1.8.50",
4
4
  "description": "Vue3 Datatable - fully customizable & easy to use datatable library",
5
5
  "private": false,
6
6
  "type": "module",