@dolusoft/vue3-datatable 1.8.47 → 1.8.48

package/dist/vue3-datatable.cjs

@@ -2469,7 +2469,7 @@ const _export_sfc = (sfc, props) => {
   }
   return target;
 };
-const ButtonExpand = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["__scopeId", "data-v-4d01a2fa"]]);
+const ButtonExpand = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["__scopeId", "data-v-da3bc8d5"]]);
 const __default__$4 = {
   name: "ButtonRightPanel"
 };
@@ -2495,7 +2495,7 @@ const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const ButtonRightPanel = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["__scopeId", "data-v-d739c6bf"]]);
+const ButtonRightPanel = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["__scopeId", "data-v-b373d5f7"]]);
 const sides = ["top", "right", "bottom", "left"];
 const alignments = ["start", "end"];
 const placements = /* @__PURE__ */ sides.reduce((acc, side) => acc.concat(side, side + "-" + alignments[0], side + "-" + alignments[1]), []);
@@ -7021,16 +7021,13 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       filterChange();
       emit("clearAllFilters");
     };
-    let extracolumnlength = 0;
-    if (props.hasCheckbox) {
-      extracolumnlength++;
-    }
-    if (props.hasSubtable) {
-      extracolumnlength++;
-    }
-    if (props.hasRightPanel) {
-      extracolumnlength++;
-    }
+    const extracolumnlength = vue.computed(() => {
+      let count = 0;
+      if (props.hasCheckbox) count++;
+      if (props.hasSubtable) count++;
+      if (props.hasRightPanel) count++;
+      return count;
+    });
     const topmenusize = vue.ref(props.topmenusize);
     const topmenuel = vue.ref(null);
     const { height: topmenuheight } = useElementSize(
@@ -7320,7 +7317,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                                         onClick: vue.withModifiers(($event) => rowClick(item, i2), ["prevent"])
                                       }, [
                                         vue.createElementVNode("td", {
-                                          colspan: props.columns.length + vue.unref(extracolumnlength)
+                                          colspan: props.columns.length + extracolumnlength.value
                                         }, [
                                           vue.renderSlot(_ctx.$slots, "tsub", {
                                             rowData: item,
@@ -7337,7 +7334,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                                       class: "!bh-bg-white bh-h-11 !bh-border-transparent"
                                     }, [
                                       vue.createElementVNode("td", {
-                                        colspan: props.columns.length + vue.unref(extracolumnlength),
+                                        colspan: props.columns.length + extracolumnlength.value,
                                         class: "!bh-p-0 !bh-border-transparent"
                                       }, _hoisted_19, 8, _hoisted_17)
                                     ]);
@@ -7347,9 +7344,9 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                                       key: item[uniqueKey.value] ? item[uniqueKey.value] : i2,
                                       class: "sticky-table-footer"
                                     }, [
-                                      vue.unref(extracolumnlength) > 0 ? (vue.openBlock(), vue.createElementBlock("td", {
+                                      extracolumnlength.value > 0 ? (vue.openBlock(), vue.createElementBlock("td", {
                                         key: 0,
-                                        colspan: vue.unref(extracolumnlength)
+                                        colspan: extracolumnlength.value
                                       }, null, 8, _hoisted_20)) : vue.createCommentVNode("", true),
                                       (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(props.columns, (col, j) => {
                                         return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
@@ -7616,7 +7613,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                                   onClick: vue.withModifiers(($event) => rowClick(item, i2), ["prevent"])
                                 }, [
                                   vue.createElementVNode("td", {
-                                    colspan: props.columns.length + vue.unref(extracolumnlength)
+                                    colspan: props.columns.length + extracolumnlength.value
                                   }, [
                                     vue.createElementVNode("div", {
                                       class: "subtable-container",
@@ -7644,7 +7641,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                                 class: "!bh-bg-white bh-h-11 !bh-border-transparent"
                               }, [
                                 vue.createElementVNode("td", {
-                                  colspan: props.columns.length + vue.unref(extracolumnlength),
+                                  colspan: props.columns.length + extracolumnlength.value,
                                   class: "!bh-p-0 !bh-border-transparent"
                                 }, _hoisted_30, 8, _hoisted_28)
                               ]);
@@ -7654,9 +7651,9 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                                 key: item[uniqueKey.value] ? item[uniqueKey.value] : i2,
                                 class: "sticky-table-footer"
                               }, [
-                                vue.unref(extracolumnlength) > 0 ? (vue.openBlock(), vue.createElementBlock("td", {
+                                extracolumnlength.value > 0 ? (vue.openBlock(), vue.createElementBlock("td", {
                                   key: 0,
-                                  colspan: vue.unref(extracolumnlength)
+                                  colspan: extracolumnlength.value
                                 }, null, 8, _hoisted_31)) : vue.createCommentVNode("", true),
                                 (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(props.columns, (col, j) => {
                                   return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [

package/dist/vue3-datatable.css

@@ -1,91 +1,91 @@
 
-.expandbtn[data-v-4d01a2fa] {
+.expandbtn[data-v-da3bc8d5] {
     cursor: pointer;
-}
+}
 
-.rightpanelbtn[data-v-d739c6bf] {
-    cursor: pointer;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 24px;
+.rightpanelbtn[data-v-b373d5f7] {
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
     height: 24px;
-}
+}
 .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}
 
-.left-menu-container {
-  position: relative;
+.left-menu-container {
+  position: relative;
   flex-shrink: 0 !important;
 }
-.menu-resize-controls {
-  position: absolute;
-  right: 0;
-  top: 50%;
-  transform: translateY(-50%);
-  z-index: 10;
-  background: #f0f0f0;
-  border-radius: 3px 0 0 3px;
+.menu-resize-controls {
+  position: absolute;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 10;
+  background: #f0f0f0;
+  border-radius: 3px 0 0 3px;
   box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
 }
-.menu-resize-controls button {
-  width: 16px;
-  height: 40px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border: none;
-  background: transparent;
-  cursor: pointer;
-  -webkit-user-select: none;
-     -moz-user-select: none;
+.menu-resize-controls button {
+  width: 16px;
+  height: 40px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  -webkit-user-select: none;
+     -moz-user-select: none;
           user-select: none;
 }
-.bh-datatable thead {
+.bh-datatable thead {
   z-index: 15 !important;
 }
-.bh-datatable tbody tr {
-  position: relative;
+.bh-datatable tbody tr {
+  position: relative;
   z-index: 1;
 }
-.bh-datatable tbody tr:has(td[colspan]) {
+.bh-datatable tbody tr:has(td[colspan]) {
   z-index: 0;
-}
+}
 /* Clear All Filters Button */
-.bh-clear-all-button {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 28px;
-  height: 28px;
-  padding: 0;
-  border: 1px solid #e0e6ed;
-  border-radius: 4px;
-  background: #e0e6ed;
-  color: rgba(0, 0, 0, 0.4);
-  cursor: not-allowed;
+.bh-clear-all-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: 1px solid #e0e6ed;
+  border-radius: 4px;
+  background: #e0e6ed;
+  color: rgba(0, 0, 0, 0.4);
+  cursor: not-allowed;
   transition: all 0.2s ease;
 }
-.bh-clear-all-button:disabled {
+.bh-clear-all-button:disabled {
   opacity: 0.5;
 }
-.bh-clear-all-button--active {
-  background: rgba(var(--primary-rgb, 59, 130, 246), 0.1);
-  border-color: var(--primary, #3b82f6);
-  color: var(--primary, #3b82f6);
+.bh-clear-all-button--active {
+  background: rgba(var(--primary-rgb, 59, 130, 246), 0.1);
+  border-color: var(--primary, #3b82f6);
+  color: var(--primary, #3b82f6);
   cursor: pointer;
 }
-.bh-clear-all-button--active:hover {
+.bh-clear-all-button--active:hover {
   background: rgba(var(--primary-rgb, 59, 130, 246), 0.2);
-}
-
+}
+
 /* Dark mode */
-.dark .bh-clear-all-button {
-  background: #374151;
-  border-color: #4b5563;
+.dark .bh-clear-all-button {
+  background: #374151;
+  border-color: #4b5563;
   color: rgba(255, 255, 255, 0.4);
 }
-.dark .bh-clear-all-button--active {
-  background: rgba(var(--primary-rgb, 59, 130, 246), 0.2);
-  border-color: var(--primary, #3b82f6);
+.dark .bh-clear-all-button--active {
+  background: rgba(var(--primary-rgb, 59, 130, 246), 0.2);
+  border-color: var(--primary, #3b82f6);
   color: var(--primary, #3b82f6);
-}
+}

package/dist/vue3-datatable.js

@@ -2468,7 +2468,7 @@ const _export_sfc = (sfc, props) => {
   }
   return target;
 };
-const ButtonExpand = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["__scopeId", "data-v-4d01a2fa"]]);
+const ButtonExpand = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["__scopeId", "data-v-da3bc8d5"]]);
 const __default__$4 = {
   name: "ButtonRightPanel"
 };
@@ -2494,7 +2494,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const ButtonRightPanel = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["__scopeId", "data-v-d739c6bf"]]);
+const ButtonRightPanel = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["__scopeId", "data-v-b373d5f7"]]);
 const sides = ["top", "right", "bottom", "left"];
 const alignments = ["start", "end"];
 const placements = /* @__PURE__ */ sides.reduce((acc, side) => acc.concat(side, side + "-" + alignments[0], side + "-" + alignments[1]), []);
@@ -7020,16 +7020,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       filterChange();
       emit("clearAllFilters");
     };
-    let extracolumnlength = 0;
-    if (props.hasCheckbox) {
-      extracolumnlength++;
-    }
-    if (props.hasSubtable) {
-      extracolumnlength++;
-    }
-    if (props.hasRightPanel) {
-      extracolumnlength++;
-    }
+    const extracolumnlength = computed(() => {
+      let count = 0;
+      if (props.hasCheckbox) count++;
+      if (props.hasSubtable) count++;
+      if (props.hasRightPanel) count++;
+      return count;
+    });
     const topmenusize = ref(props.topmenusize);
     const topmenuel = ref(null);
     const { height: topmenuheight } = useElementSize(
@@ -7319,7 +7316,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                                         onClick: withModifiers(($event) => rowClick(item, i2), ["prevent"])
                                       }, [
                                         createElementVNode("td", {
-                                          colspan: props.columns.length + unref(extracolumnlength)
+                                          colspan: props.columns.length + extracolumnlength.value
                                         }, [
                                           renderSlot(_ctx.$slots, "tsub", {
                                             rowData: item,
@@ -7336,7 +7333,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                                       class: "!bh-bg-white bh-h-11 !bh-border-transparent"
                                     }, [
                                       createElementVNode("td", {
-                                        colspan: props.columns.length + unref(extracolumnlength),
+                                        colspan: props.columns.length + extracolumnlength.value,
                                         class: "!bh-p-0 !bh-border-transparent"
                                       }, _hoisted_19, 8, _hoisted_17)
                                     ]);
@@ -7346,9 +7343,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                                       key: item[uniqueKey.value] ? item[uniqueKey.value] : i2,
                                       class: "sticky-table-footer"
                                     }, [
-                                      unref(extracolumnlength) > 0 ? (openBlock(), createElementBlock("td", {
+                                      extracolumnlength.value > 0 ? (openBlock(), createElementBlock("td", {
                                         key: 0,
-                                        colspan: unref(extracolumnlength)
+                                        colspan: extracolumnlength.value
                                       }, null, 8, _hoisted_20)) : createCommentVNode("", true),
                                       (openBlock(true), createElementBlock(Fragment, null, renderList(props.columns, (col, j) => {
                                         return openBlock(), createElementBlock(Fragment, null, [
@@ -7615,7 +7612,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                                   onClick: withModifiers(($event) => rowClick(item, i2), ["prevent"])
                                 }, [
                                   createElementVNode("td", {
-                                    colspan: props.columns.length + unref(extracolumnlength)
+                                    colspan: props.columns.length + extracolumnlength.value
                                   }, [
                                     createElementVNode("div", {
                                       class: "subtable-container",
@@ -7643,7 +7640,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                                 class: "!bh-bg-white bh-h-11 !bh-border-transparent"
                               }, [
                                 createElementVNode("td", {
-                                  colspan: props.columns.length + unref(extracolumnlength),
+                                  colspan: props.columns.length + extracolumnlength.value,
                                   class: "!bh-p-0 !bh-border-transparent"
                                 }, _hoisted_30, 8, _hoisted_28)
                               ]);
@@ -7653,9 +7650,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                                 key: item[uniqueKey.value] ? item[uniqueKey.value] : i2,
                                 class: "sticky-table-footer"
                               }, [
-                                unref(extracolumnlength) > 0 ? (openBlock(), createElementBlock("td", {
+                                extracolumnlength.value > 0 ? (openBlock(), createElementBlock("td", {
                                   key: 0,
-                                  colspan: unref(extracolumnlength)
+                                  colspan: extracolumnlength.value
                                 }, null, 8, _hoisted_31)) : createCommentVNode("", true),
                                 (openBlock(true), createElementBlock(Fragment, null, renderList(props.columns, (col, j) => {
                                   return openBlock(), createElementBlock(Fragment, null, [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dolusoft/vue3-datatable",
-  "version": "1.8.47",
+  "version": "1.8.48",
   "description": "Vue3 Datatable - fully customizable & easy to use datatable library",
   "private": false,
   "type": "module",