@dolusoft/vue3-datatable 1.8.40 → 1.8.43

package/dist/vue3-datatable.cjs

@@ -2379,7 +2379,7 @@ const Icon = vue.defineComponent({
 const __default__$5 = {
   name: "buttonExpand"
 };
-const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
   ...__default__$5,
   props: {
     item: { default: [] },
@@ -2469,11 +2469,11 @@ const _export_sfc = (sfc, props) => {
   }
   return target;
 };
-const ButtonExpand = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["__scopeId", "data-v-4d01a2fa"]]);
+const ButtonExpand = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["__scopeId", "data-v-4d01a2fa"]]);
 const __default__$4 = {
   name: "ButtonRightPanel"
 };
-const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
   ...__default__$4,
   props: {
     item: { default: [] }
@@ -2495,7 +2495,7 @@ const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const ButtonRightPanel = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["__scopeId", "data-v-d739c6bf"]]);
+const ButtonRightPanel = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["__scopeId", "data-v-d739c6bf"]]);
 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]), []);
@@ -4864,11 +4864,11 @@ vue.defineComponent({
   }
 });
 const Vt = Ce;
-const _hoisted_1$6 = { class: "bh-text-[13px] bh-font-normal bh-rounded bh-overflow-hidden" };
+const _hoisted_1$7 = { class: "bh-text-[13px] bh-font-normal bh-rounded bh-overflow-hidden" };
 const __default__$3 = {
   name: "columnFilter"
 };
-const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
   ...__default__$3,
   props: ["column", "columnFilterLang"],
   emits: ["close", "filterChange"],
@@ -4893,7 +4893,7 @@ const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
         ref: menuRef,
         class: "bh-filter-menu bh-absolute bh-z-[1] bh-bg-white dark:bh-bg-gray-800 bh-shadow-md bh-rounded-md bh-top-full bh-right-0 bh-w-32 bh-mt-1 bh-border bh-border-solid bh-border-gray-200 dark:bh-border-gray-600"
       }, [
-        vue.createElementVNode("div", _hoisted_1$6, [
+        vue.createElementVNode("div", _hoisted_1$7, [
           vue.createElementVNode("button", {
             type: "button",
             class: vue.normalizeClass({ active: props.column.condition === "" }),
@@ -5056,10 +5056,10 @@ const FILTER_CONDITIONS = {
     { value: "NotEqual", label: "Not Equal", icon: "≠" }
   ]
 };
-const _hoisted_1$5 = { class: "bh-p-2" };
-const _hoisted_2$5 = { class: "bh-mb-2" };
-const _hoisted_3$5 = /* @__PURE__ */ vue.createElementVNode("label", { class: "bh-text-xs bh-font-medium bh-text-gray-600 dark:bh-text-gray-400 bh-block bh-mb-1" }, " Filter Condition ", -1);
-const _hoisted_4$2 = ["value"];
+const _hoisted_1$6 = { class: "bh-p-2" };
+const _hoisted_2$6 = { class: "bh-mb-2" };
+const _hoisted_3$6 = /* @__PURE__ */ vue.createElementVNode("label", { class: "bh-text-xs bh-font-medium bh-text-gray-600 dark:bh-text-gray-400 bh-block bh-mb-1" }, " Filter Condition ", -1);
+const _hoisted_4$3 = ["value"];
 const _hoisted_5$2 = {
   key: 0,
   class: "bh-border-t bh-border-gray-200 dark:bh-border-gray-600 bh-pt-2 bh-mt-2"
@@ -5069,7 +5069,7 @@ const _hoisted_7$2 = { class: "bh-flex bh-flex-col bh-gap-1" };
 const __default__$2 = {
   name: "columnFilterNew"
 };
-const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
   ...__default__$2,
   props: [
     "column",
@@ -5134,9 +5134,9 @@ const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
         ref: dropdownRef,
         class: "bh-filter-dropdown-content bh-min-w-[220px]"
       }, [
-        vue.createElementVNode("div", _hoisted_1$5, [
-          vue.createElementVNode("div", _hoisted_2$5, [
-            _hoisted_3$5,
+        vue.createElementVNode("div", _hoisted_1$6, [
+          vue.createElementVNode("div", _hoisted_2$6, [
+            _hoisted_3$6,
             vue.withDirectives(vue.createElementVNode("select", {
               ref_key: "selectRef",
               ref: selectRef,
@@ -5150,7 +5150,7 @@ const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
                 return vue.openBlock(), vue.createElementBlock("option", {
                   key: cond.value,
                   value: cond.value
-                }, vue.toDisplayString(cond.icon ? cond.icon + " " : "") + vue.toDisplayString(getTranslatedLabel(cond)), 9, _hoisted_4$2);
+                }, vue.toDisplayString(cond.icon ? cond.icon + " " : "") + vue.toDisplayString(getTranslatedLabel(cond)), 9, _hoisted_4$3);
               }), 128))
             ], 544), [
               [vue.vModelSelect, selectedCondition.value]
@@ -5189,13 +5189,13 @@ const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _sfc_main$4 = {};
-const _hoisted_1$4 = {
+const _sfc_main$5 = {};
+const _hoisted_1$5 = {
   version: "1.1",
   viewBox: "0 0 17 12",
   xmlns: "http://www.w3.org/2000/svg"
 };
-const _hoisted_2$4 = /* @__PURE__ */ vue.createElementVNode("g", {
+const _hoisted_2$5 = /* @__PURE__ */ vue.createElementVNode("g", {
   fill: "none",
   "fill-rule": "evenodd"
 }, [
@@ -5207,15 +5207,15 @@ const _hoisted_2$4 = /* @__PURE__ */ vue.createElementVNode("g", {
     /* @__PURE__ */ vue.createElementVNode("path", { d: "m25.576 11.414c0.56558 0.55188 0.56558 1.4439 0 1.9961l-9.404 9.176c-0.28213 0.27529-0.65247 0.41385-1.0228 0.41385-0.37034 0-0.74068-0.13855-1.0228-0.41385l-4.7019-4.588c-0.56584-0.55188-0.56584-1.4442 0-1.9961 0.56558-0.55214 1.4798-0.55214 2.0456 0l3.679 3.5899 8.3812-8.1779c0.56558-0.55214 1.4798-0.55214 2.0456 0z" })
   ])
 ], -1);
-const _hoisted_3$4 = [
-  _hoisted_2$4
+const _hoisted_3$5 = [
+  _hoisted_2$5
 ];
 function _sfc_render$2(_ctx, _cache) {
-  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$4, _hoisted_3$4);
+  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$5, _hoisted_3$5);
 }
-const iconCheck = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["render", _sfc_render$2]]);
-const _sfc_main$3 = {};
-const _hoisted_1$3 = {
+const iconCheck = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["render", _sfc_render$2]]);
+const _sfc_main$4 = {};
+const _hoisted_1$4 = {
   viewBox: "0 0 24 24",
   width: "24",
   height: "24",
@@ -5226,21 +5226,21 @@ const _hoisted_1$3 = {
   "stroke-linejoin": "round",
   class: "css-i6dzq1"
 };
-const _hoisted_2$3 = /* @__PURE__ */ vue.createElementVNode("line", {
+const _hoisted_2$4 = /* @__PURE__ */ vue.createElementVNode("line", {
   x1: "5",
   y1: "12",
   x2: "19",
   y2: "12"
 }, null, -1);
-const _hoisted_3$3 = [
-  _hoisted_2$3
+const _hoisted_3$4 = [
+  _hoisted_2$4
 ];
 function _sfc_render$1(_ctx, _cache) {
-  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$3, _hoisted_3$3);
+  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$4, _hoisted_3$4);
 }
-const iconDash = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["render", _sfc_render$1]]);
-const _sfc_main$2 = {};
-const _hoisted_1$2 = {
+const iconDash = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["render", _sfc_render$1]]);
+const _sfc_main$3 = {};
+const _hoisted_1$3 = {
   viewBox: "0 0 24 24",
   width: "24",
   height: "24",
@@ -5251,21 +5251,21 @@ const _hoisted_1$2 = {
   "stroke-linejoin": "round",
   class: "css-i6dzq1"
 };
-const _hoisted_2$2 = /* @__PURE__ */ vue.createElementVNode("polygon", { points: "22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3" }, null, -1);
-const _hoisted_3$2 = [
-  _hoisted_2$2
+const _hoisted_2$3 = /* @__PURE__ */ vue.createElementVNode("polygon", { points: "22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3" }, null, -1);
+const _hoisted_3$3 = [
+  _hoisted_2$3
 ];
 function _sfc_render(_ctx, _cache) {
-  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$2, _hoisted_3$2);
+  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$3, _hoisted_3$3);
 }
-const iconFilter = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render]]);
-const _hoisted_1$1 = { key: "hdrrow" };
-const _hoisted_2$1 = { class: "bh-checkbox" };
-const _hoisted_3$1 = {
+const iconFilter = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["render", _sfc_render]]);
+const _hoisted_1$2 = { key: "hdrrow" };
+const _hoisted_2$2 = { class: "bh-checkbox" };
+const _hoisted_3$2 = {
   key: 0,
   class: "bh-filter bh-flex bh-justify-center"
 };
-const _hoisted_4$1 = ["disabled"];
+const _hoisted_4$2 = ["disabled"];
 const _hoisted_5$1 = /* @__PURE__ */ vue.createElementVNode("svg", {
   width: "14",
   height: "14",
@@ -5398,7 +5398,7 @@ const _hoisted_36$1 = ["onClick"];
 const __default__$1 = {
   name: "columnHeader"
 };
-const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
   ...__default__$1,
   props: [
     "all",
@@ -5463,6 +5463,7 @@ const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
           vue.watch(
             () => filterInputs.value[col.field],
             (newValue) => {
+              var _a2;
               const column = columnsMap.value.get(col.field);
               if (!column) return;
               const isEmpty = newValue === "" || newValue === null || newValue === void 0;
@@ -5493,7 +5494,8 @@ const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
               if (isEmpty) {
                 processChange();
               } else {
-                debounceTimers.set(col.field, setTimeout(processChange, 100));
+                const debounceTime = ((_a2 = props.all) == null ? void 0 : _a2.filterDebounce) ?? 100;
+                debounceTimers.set(col.field, setTimeout(processChange, debounceTime));
               }
             }
           );
@@ -5671,7 +5673,7 @@ const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
     });
     return (_ctx, _cache) => {
       const _component_VDropdown = vue.resolveComponent("VDropdown");
-      return vue.openBlock(), vue.createElementBlock("tr", _hoisted_1$1, [
+      return vue.openBlock(), vue.createElementBlock("tr", _hoisted_1$2, [
         props.all.hasCheckbox ? (vue.openBlock(), vue.createElementBlock("th", {
           key: "chkall",
           style: vue.normalizeStyle({
@@ -5684,7 +5686,7 @@ const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
             "bh-left-0": props.all.stickyFirstColumn
           })
         }, [
-          vue.createElementVNode("div", _hoisted_2$1, [
+          vue.createElementVNode("div", _hoisted_2$2, [
             vue.createElementVNode("input", {
               ref_key: "selectedAll",
               ref: selectedAll,
@@ -5699,7 +5701,7 @@ const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
               vue.createVNode(iconDash, { class: "intermediate" })
             ])
           ]),
-          props.all.columnFilter && !props.isFooter && clearButtonLocation.value === "checkbox" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$1, [
+          props.all.columnFilter && !props.isFooter && clearButtonLocation.value === "checkbox" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$2, [
             vue.createVNode(vue.unref(Vt), {
               placement: "top",
               distance: 6
@@ -5716,7 +5718,7 @@ const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
                   }]),
                   disabled: !hasAnyActiveFilterLocal.value,
                   onClick: vue.withModifiers(handleClearAllFilters, ["stop"])
-                }, _hoisted_6$1, 10, _hoisted_4$1)) : vue.createCommentVNode("", true)
+                }, _hoisted_6$1, 10, _hoisted_4$2)) : vue.createCommentVNode("", true)
               ]),
               _: 1
             })
@@ -5972,7 +5974,7 @@ const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
                       }])
                     }, null, 8, ["class"])
                   ], 10, _hoisted_35$1)) : vue.createCommentVNode("", true),
-                  !props.all.useNewColumnFilter ? vue.withDirectives((vue.openBlock(), vue.createBlock(_sfc_main$6, {
+                  !props.all.useNewColumnFilter ? vue.withDirectives((vue.openBlock(), vue.createBlock(_sfc_main$7, {
                     key: 3,
                     column: col,
                     type: col.type,
@@ -5992,7 +5994,7 @@ const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
                     onApplyHide: _cache[8] || (_cache[8] = ($event) => emit("toggleFilterMenu", null))
                   }, {
                     popper: vue.withCtx(() => [
-                      vue.createVNode(_sfc_main$5, {
+                      vue.createVNode(_sfc_main$6, {
                         column: col,
                         columnFilterLang: props.columnFilterLang,
                         currentSortColumn: props.currentSortColumn,
@@ -6034,6 +6036,111 @@ const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
+const _hoisted_1$1 = ["innerHTML"];
+const _hoisted_2$1 = { class: "bh-tooltip-content" };
+const _hoisted_3$1 = ["innerHTML"];
+const _hoisted_4$1 = ["innerHTML"];
+const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
+  __name: "truncated-cell",
+  props: {
+    value: {},
+    truncate: { type: Boolean },
+    maxWidth: {},
+    truncateLines: {},
+    showTooltip: { type: Boolean },
+    html: { type: Boolean }
+  },
+  setup(__props) {
+    const props = __props;
+    const cellRef = vue.ref(null);
+    const isOverflowing = vue.ref(false);
+    const checkOverflow = () => {
+      if (cellRef.value && props.truncate) {
+        const el = cellRef.value;
+        if (props.truncateLines === 1) {
+          isOverflowing.value = el.scrollWidth > el.clientWidth;
+        } else {
+          isOverflowing.value = el.scrollHeight > el.clientHeight;
+        }
+      } else {
+        isOverflowing.value = false;
+      }
+    };
+    vue.onMounted(checkOverflow);
+    vue.onUpdated(checkOverflow);
+    const tooltipContent = vue.computed(() => {
+      return String(props.value ?? "");
+    });
+    const shouldShowTooltip = vue.computed(() => {
+      return props.truncate && props.showTooltip && isOverflowing.value;
+    });
+    const cellStyle = vue.computed(() => {
+      if (!props.truncate) return {};
+      const style = {};
+      if (props.maxWidth) {
+        style.maxWidth = props.maxWidth;
+      }
+      if (props.truncateLines > 1) {
+        style["-webkit-line-clamp"] = props.truncateLines;
+      }
+      return style;
+    });
+    return (_ctx, _cache) => {
+      return shouldShowTooltip.value ? (vue.openBlock(), vue.createBlock(vue.unref(Vt), {
+        key: 0,
+        placement: "top",
+        distance: 6,
+        delay: { show: 300, hide: 100 }
+      }, {
+        popper: vue.withCtx(() => [
+          vue.createElementVNode("div", _hoisted_2$1, [
+            _ctx.html ? (vue.openBlock(), vue.createElementBlock("span", {
+              key: 0,
+              innerHTML: tooltipContent.value
+            }, null, 8, _hoisted_3$1)) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
+              vue.createTextVNode(vue.toDisplayString(tooltipContent.value), 1)
+            ], 64))
+          ])
+        ]),
+        default: vue.withCtx(() => [
+          vue.createElementVNode("div", {
+            ref_key: "cellRef",
+            ref: cellRef,
+            class: vue.normalizeClass(["bh-truncate-cell", {
+              "bh-truncate-single": _ctx.truncateLines === 1,
+              "bh-truncate-multi": _ctx.truncateLines > 1
+            }]),
+            style: vue.normalizeStyle(cellStyle.value)
+          }, [
+            _ctx.html ? (vue.openBlock(), vue.createElementBlock("span", {
+              key: 0,
+              innerHTML: _ctx.value
+            }, null, 8, _hoisted_1$1)) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
+              vue.createTextVNode(vue.toDisplayString(_ctx.value), 1)
+            ], 64))
+          ], 6)
+        ]),
+        _: 1
+      })) : (vue.openBlock(), vue.createElementBlock("div", {
+        key: 1,
+        ref_key: "cellRef",
+        ref: cellRef,
+        class: vue.normalizeClass(["bh-truncate-cell", {
+          "bh-truncate-single": _ctx.truncate && _ctx.truncateLines === 1,
+          "bh-truncate-multi": _ctx.truncate && _ctx.truncateLines > 1
+        }]),
+        style: vue.normalizeStyle(cellStyle.value)
+      }, [
+        _ctx.html ? (vue.openBlock(), vue.createElementBlock("span", {
+          key: 0,
+          innerHTML: _ctx.value
+        }, null, 8, _hoisted_4$1)) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
+          vue.createTextVNode(vue.toDisplayString(_ctx.value), 1)
+        ], 64))
+      ], 6));
+    };
+  }
+});
 const _hoisted_1 = { class: "bh-datatable bh-antialiased bh-relative bh-text-black bh-text-sm bh-font-normal" };
 const _hoisted_2 = { class: "bh-flex bh-h-full" };
 const _hoisted_3 = /* @__PURE__ */ vue.createElementVNode("span", null, "##Left Menu Slot##", -1);
@@ -6062,102 +6169,100 @@ const _hoisted_11 = ["onClick"];
 const _hoisted_12 = { class: "bh-checkbox" };
 const _hoisted_13 = ["value"];
 const _hoisted_14 = ["onContextmenu"];
-const _hoisted_15 = ["innerHTML"];
-const _hoisted_16 = ["onClick"];
+const _hoisted_15 = ["onClick"];
+const _hoisted_16 = ["colspan"];
 const _hoisted_17 = ["colspan"];
-const _hoisted_18 = ["colspan"];
-const _hoisted_19 = /* @__PURE__ */ vue.createElementVNode("div", { class: "bh-skeleton-box bh-h-8" }, null, -1);
-const _hoisted_20 = [
-  _hoisted_19
+const _hoisted_18 = /* @__PURE__ */ vue.createElementVNode("div", { class: "bh-skeleton-box bh-h-8" }, null, -1);
+const _hoisted_19 = [
+  _hoisted_18
 ];
-const _hoisted_21 = ["colspan"];
-const _hoisted_22 = /* @__PURE__ */ vue.createElementVNode("span", null, "##Table Header Area Slot##", -1);
-const _hoisted_23 = ["onClick"];
-const _hoisted_24 = { class: "bh-checkbox" };
-const _hoisted_25 = ["value"];
-const _hoisted_26 = ["onContextmenu"];
-const _hoisted_27 = ["innerHTML"];
-const _hoisted_28 = ["onClick"];
-const _hoisted_29 = ["colspan"];
-const _hoisted_30 = ["colspan"];
-const _hoisted_31 = /* @__PURE__ */ vue.createElementVNode("div", { class: "bh-skeleton-box bh-h-8" }, null, -1);
-const _hoisted_32 = [
-  _hoisted_31
+const _hoisted_20 = ["colspan"];
+const _hoisted_21 = /* @__PURE__ */ vue.createElementVNode("span", null, "##Table Header Area Slot##", -1);
+const _hoisted_22 = ["onClick"];
+const _hoisted_23 = { class: "bh-checkbox" };
+const _hoisted_24 = ["value"];
+const _hoisted_25 = ["onContextmenu"];
+const _hoisted_26 = ["onClick"];
+const _hoisted_27 = ["colspan"];
+const _hoisted_28 = ["colspan"];
+const _hoisted_29 = /* @__PURE__ */ vue.createElementVNode("div", { class: "bh-skeleton-box bh-h-8" }, null, -1);
+const _hoisted_30 = [
+  _hoisted_29
 ];
-const _hoisted_33 = ["colspan"];
-const _hoisted_34 = { class: "bh-flex bh-items-center bh-flex-wrap bh-flex-col sm:bh-flex-row bh-gap-4" };
-const _hoisted_35 = { class: "bh-pagination-info bh-flex bh-items-center" };
-const _hoisted_36 = { class: "bh-mr-2" };
-const _hoisted_37 = ["value"];
-const _hoisted_38 = { class: "bh-pagination-number sm:bh-ml-auto bh-inline-flex bh-items-center bh-space-x-1" };
-const _hoisted_39 = ["innerHTML"];
-const _hoisted_40 = {
+const _hoisted_31 = ["colspan"];
+const _hoisted_32 = { class: "bh-flex bh-items-center bh-flex-wrap bh-flex-col sm:bh-flex-row bh-gap-4" };
+const _hoisted_33 = { class: "bh-pagination-info bh-flex bh-items-center" };
+const _hoisted_34 = { class: "bh-mr-2" };
+const _hoisted_35 = ["value"];
+const _hoisted_36 = { class: "bh-pagination-number sm:bh-ml-auto bh-inline-flex bh-items-center bh-space-x-1" };
+const _hoisted_37 = ["innerHTML"];
+const _hoisted_38 = {
   key: 1,
   "aria-hidden": "true",
   width: "14",
   height: "14",
   viewBox: "0 0 16 16"
 };
-const _hoisted_41 = /* @__PURE__ */ vue.createElementVNode("g", {
+const _hoisted_39 = /* @__PURE__ */ vue.createElementVNode("g", {
   fill: "currentColor",
   "fill-rule": "evenodd"
 }, [
   /* @__PURE__ */ vue.createElementVNode("path", { d: "M8.354 1.646a.5.5 0 0 1 0 .708L2.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z" }),
   /* @__PURE__ */ vue.createElementVNode("path", { d: "M12.354 1.646a.5.5 0 0 1 0 .708L6.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z" })
 ], -1);
-const _hoisted_42 = [
-  _hoisted_41
+const _hoisted_40 = [
+  _hoisted_39
 ];
-const _hoisted_43 = ["innerHTML"];
-const _hoisted_44 = {
+const _hoisted_41 = ["innerHTML"];
+const _hoisted_42 = {
   key: 1,
   "aria-hidden": "true",
   width: "14",
   height: "14",
   viewBox: "0 0 16 16"
 };
-const _hoisted_45 = /* @__PURE__ */ vue.createElementVNode("path", {
+const _hoisted_43 = /* @__PURE__ */ vue.createElementVNode("path", {
   fill: "currentColor",
   "fill-rule": "evenodd",
   d: "M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"
 }, null, -1);
-const _hoisted_46 = [
-  _hoisted_45
+const _hoisted_44 = [
+  _hoisted_43
 ];
-const _hoisted_47 = ["onClick"];
-const _hoisted_48 = ["innerHTML"];
-const _hoisted_49 = {
+const _hoisted_45 = ["onClick"];
+const _hoisted_46 = ["innerHTML"];
+const _hoisted_47 = {
   key: 1,
   "aria-hidden": "true",
   width: "14",
   height: "14",
   viewBox: "0 0 16 16"
 };
-const _hoisted_50 = /* @__PURE__ */ vue.createElementVNode("path", {
+const _hoisted_48 = /* @__PURE__ */ vue.createElementVNode("path", {
   fill: "currentColor",
   "fill-rule": "evenodd",
   d: "M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8L4.646 2.354a.5.5 0 0 1 0-.708z"
 }, null, -1);
-const _hoisted_51 = [
-  _hoisted_50
+const _hoisted_49 = [
+  _hoisted_48
 ];
-const _hoisted_52 = ["innerHTML"];
-const _hoisted_53 = {
+const _hoisted_50 = ["innerHTML"];
+const _hoisted_51 = {
   key: 1,
   "aria-hidden": "true",
   width: "14",
   height: "14",
   viewBox: "0 0 16 16"
 };
-const _hoisted_54 = /* @__PURE__ */ vue.createElementVNode("g", {
+const _hoisted_52 = /* @__PURE__ */ vue.createElementVNode("g", {
   fill: "currentColor",
   "fill-rule": "evenodd"
 }, [
   /* @__PURE__ */ vue.createElementVNode("path", { d: "M3.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L9.293 8L3.646 2.354a.5.5 0 0 1 0-.708z" }),
   /* @__PURE__ */ vue.createElementVNode("path", { d: "M7.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L13.293 8L7.646 2.354a.5.5 0 0 1 0-.708z" })
 ], -1);
-const _hoisted_55 = [
-  _hoisted_54
+const _hoisted_53 = [
+  _hoisted_52
 ];
 const __default__ = {
   name: "Vue3Datatable"
@@ -6194,6 +6299,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     sortDirection: { default: "asc" },
     columnFilter: { type: Boolean, default: false },
     columnFilterLang: { default: null },
+    filterDebounce: { default: 100 },
     useNewColumnFilter: { type: Boolean, default: false },
     showFloatingFilterLabel: { type: Boolean, default: false },
     pagination: { type: Boolean, default: true },
@@ -6231,7 +6337,10 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     footerOffset: { default: 0 },
     tableRightOffset: { default: 0 },
     tableLeftOffset: { default: 5 },
-    initialLeftMenuState: { type: Boolean, default: void 0 }
+    initialLeftMenuState: { type: Boolean, default: void 0 },
+    truncate: { type: Boolean, default: true },
+    defaultMaxWidth: { default: "400px" },
+    truncateLines: { default: 1 }
   },
   emits: [
     "change",
@@ -6264,6 +6373,10 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       item.search = item.search !== void 0 ? item.search : true;
       item.sort = item.sort !== void 0 ? item.sort : true;
       item.html = item.html !== void 0 ? item.html : false;
+      item.truncate = item.truncate !== void 0 ? item.truncate : props.truncate;
+      item.maxWidth = item.maxWidth !== void 0 ? item.maxWidth : props.defaultMaxWidth;
+      item.truncateLines = item.truncateLines !== void 0 ? item.truncateLines : props.truncateLines;
+      item.showTooltip = item.showTooltip !== void 0 ? item.showTooltip : true;
       if (item.value !== void 0 && item.value !== null && item.value !== "") {
         item.condition = item.condition || "Equal";
       } else {
@@ -7122,7 +7235,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                                     "bh-sticky bh-top-0 bh-z-10": props.stickyHeader
                                   })
                                 }, [
-                                  vue.createVNode(_sfc_main$1, {
+                                  vue.createVNode(_sfc_main$2, {
                                     ref_key: "columnHeaderRef",
                                     ref: columnHeaderRef,
                                     all: props,
@@ -7231,18 +7344,30 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                                                 props.hasCheckbox && j === 0 && props.stickyFirstColumn ? "bh-left-[52px]" : "",
                                                 col.cellClass ? col.cellClass : ""
                                               ]),
+                                              style: vue.normalizeStyle({ maxWidth: col.truncate !== false ? col.maxWidth : void 0 }),
                                               onContextmenu: ($event) => handleCellContextMenu($event, item, col, cellValue(item, col.field), i2, j)
                                             }, [
                                               vue.unref(slots)[col.field] ? vue.renderSlot(_ctx.$slots, col.field, {
                                                 key: 0,
                                                 value: item
-                                              }) : col.cellRenderer ? (vue.openBlock(), vue.createElementBlock("div", {
+                                              }) : col.cellRenderer ? (vue.openBlock(), vue.createBlock(_sfc_main$1, {
                                                 key: 1,
-                                                innerHTML: col.cellRenderer(item)
-                                              }, null, 8, _hoisted_15)) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 2 }, [
-                                                vue.createTextVNode(vue.toDisplayString(cellValue(item, col.field)), 1)
-                                              ], 64))
-                                            ], 42, _hoisted_14)) : vue.createCommentVNode("", true)
+                                                value: col.cellRenderer(item),
+                                                truncate: col.truncate !== false,
+                                                "max-width": col.maxWidth,
+                                                "truncate-lines": col.truncateLines || 1,
+                                                "show-tooltip": col.showTooltip !== false,
+                                                html: true
+                                              }, null, 8, ["value", "truncate", "max-width", "truncate-lines", "show-tooltip"])) : (vue.openBlock(), vue.createBlock(_sfc_main$1, {
+                                                key: 2,
+                                                value: cellValue(item, col.field),
+                                                truncate: col.truncate !== false,
+                                                "max-width": col.maxWidth,
+                                                "truncate-lines": col.truncateLines || 1,
+                                                "show-tooltip": col.showTooltip !== false,
+                                                html: col.html
+                                              }, null, 8, ["value", "truncate", "max-width", "truncate-lines", "show-tooltip", "html"]))
+                                            ], 46, _hoisted_14)) : vue.createCommentVNode("", true)
                                           ], 64);
                                         }), 256))
                                       ], 10, _hoisted_11)) : vue.createCommentVNode("", true),
@@ -7262,8 +7387,8 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                                             rowIndex: i2,
                                             filterItems: filterItems.value
                                           })
-                                        ], 8, _hoisted_17)
-                                      ], 10, _hoisted_16)) : vue.createCommentVNode("", true)
+                                        ], 8, _hoisted_16)
+                                      ], 10, _hoisted_15)) : vue.createCommentVNode("", true)
                                     ], 64);
                                   }), 128)),
                                   !filterRowCount.value && currentLoader.value && _ctx.skeletonloader ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 0 }, vue.renderList(props.pageSize, (i2) => {
@@ -7274,7 +7399,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                                       vue.createElementVNode("td", {
                                         colspan: props.columns.length + vue.unref(extracolumnlength),
                                         class: "!bh-p-0 !bh-border-transparent"
-                                      }, _hoisted_20, 8, _hoisted_18)
+                                      }, _hoisted_19, 8, _hoisted_17)
                                     ]);
                                   }), 128)) : vue.createCommentVNode("", true),
                                   filterRowCount.value ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 1 }, vue.renderList(props.footerRows, (item, i2) => {
@@ -7285,7 +7410,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                                       vue.unref(extracolumnlength) > 0 ? (vue.openBlock(), vue.createElementBlock("td", {
                                         key: 0,
                                         colspan: vue.unref(extracolumnlength)
-                                      }, null, 8, _hoisted_21)) : vue.createCommentVNode("", true),
+                                      }, 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, [
                                           !col.hide && !col.dataOnly ? (vue.openBlock(), vue.createElementBlock("td", {
@@ -7295,12 +7420,19 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                                               j === 0 && props.stickyFirstColumn ? "bh-sticky bh-left-0 bh-bg-blue-light" : "",
                                               props.hasCheckbox && j === 0 && props.stickyFirstColumn ? "bh-left-[52px]" : "",
                                               col.cellClass ? col.cellClass : ""
-                                            ])
+                                            ]),
+                                            style: vue.normalizeStyle({ maxWidth: col.truncate !== false ? col.maxWidth : void 0 })
                                           }, [
-                                            item.cells.find((x2) => x2.field == col.field) ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
-                                              vue.createTextVNode(vue.toDisplayString(item.cells.find((x2) => x2.field == col.field).text), 1)
-                                            ], 64)) : vue.createCommentVNode("", true)
-                                          ], 2)) : vue.createCommentVNode("", true)
+                                            item.cells.find((x2) => x2.field == col.field) ? (vue.openBlock(), vue.createBlock(_sfc_main$1, {
+                                              key: 0,
+                                              value: item.cells.find((x2) => x2.field == col.field).text,
+                                              truncate: col.truncate !== false,
+                                              "max-width": col.maxWidth,
+                                              "truncate-lines": col.truncateLines || 1,
+                                              "show-tooltip": col.showTooltip !== false,
+                                              html: false
+                                            }, null, 8, ["value", "truncate", "max-width", "truncate-lines", "show-tooltip"])) : vue.createCommentVNode("", true)
+                                          ], 6)) : vue.createCommentVNode("", true)
                                         ], 64);
                                       }), 256))
                                     ]);
@@ -7312,7 +7444,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                                     "bh-sticky bh-bottom-0": props.stickyHeader
                                   })
                                 }, [
-                                  vue.createVNode(_sfc_main$1, {
+                                  vue.createVNode(_sfc_main$2, {
                                     all: props,
                                     currentSortColumn: currentSortColumn.value,
                                     currentSortDirection: currentSortDirection.value,
@@ -7379,7 +7511,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                         style: vue.normalizeStyle({ height: _ctx.headerAreaHeight, "margin-bottom": "10px" })
                       }, [
                         vue.renderSlot(_ctx.$slots, "tableHeaderArea", {}, () => [
-                          _hoisted_22
+                          _hoisted_21
                         ])
                       ], 4)) : vue.createCommentVNode("", true),
                       vue.renderSlot(_ctx.$slots, "tableactionheader"),
@@ -7398,7 +7530,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                               "bh-sticky bh-top-0 bh-z-10": props.stickyHeader
                             })
                           }, [
-                            vue.createVNode(_sfc_main$1, {
+                            vue.createVNode(_sfc_main$2, {
                               all: props,
                               expandedrows: expandedrows.value,
                               currentSortColumn: currentSortColumn.value,
@@ -7449,14 +7581,14 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                                       "bh-sticky bh-left-0 bh-bg-blue-light": props.stickyFirstColumn
                                     })
                                   }, [
-                                    vue.createElementVNode("div", _hoisted_24, [
+                                    vue.createElementVNode("div", _hoisted_23, [
                                       vue.withDirectives(vue.createElementVNode("input", {
                                         "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => selected.value = $event),
                                         type: "checkbox",
                                         value: getRowKey(i2),
                                         onClick: _cache[4] || (_cache[4] = vue.withModifiers(() => {
                                         }, ["stop"]))
-                                      }, null, 8, _hoisted_25), [
+                                      }, null, 8, _hoisted_24), [
                                         [vue.vModelCheckbox, selected.value]
                                       ]),
                                       vue.createElementVNode("div", null, [
@@ -7505,21 +7637,33 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                                           props.hasCheckbox && j === 0 && props.stickyFirstColumn ? "bh-left-[52px]" : "",
                                           col.cellClass ? col.cellClass : ""
                                         ]),
+                                        style: vue.normalizeStyle({ maxWidth: col.truncate !== false ? col.maxWidth : void 0 }),
                                         onContextmenu: ($event) => handleCellContextMenu($event, item, col, cellValue(item, col.field), i2, j)
                                       }, [
                                         vue.unref(slots)[col.field] ? vue.renderSlot(_ctx.$slots, col.field, {
                                           key: 0,
                                           value: item
-                                        }) : col.cellRenderer ? (vue.openBlock(), vue.createElementBlock("div", {
+                                        }) : col.cellRenderer ? (vue.openBlock(), vue.createBlock(_sfc_main$1, {
                                           key: 1,
-                                          innerHTML: col.cellRenderer(item)
-                                        }, null, 8, _hoisted_27)) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 2 }, [
-                                          vue.createTextVNode(vue.toDisplayString(cellValue(item, col.field)), 1)
-                                        ], 64))
-                                      ], 42, _hoisted_26)) : vue.createCommentVNode("", true)
+                                          value: col.cellRenderer(item),
+                                          truncate: col.truncate !== false,
+                                          "max-width": col.maxWidth,
+                                          "truncate-lines": col.truncateLines || 1,
+                                          "show-tooltip": col.showTooltip !== false,
+                                          html: true
+                                        }, null, 8, ["value", "truncate", "max-width", "truncate-lines", "show-tooltip"])) : (vue.openBlock(), vue.createBlock(_sfc_main$1, {
+                                          key: 2,
+                                          value: cellValue(item, col.field),
+                                          truncate: col.truncate !== false,
+                                          "max-width": col.maxWidth,
+                                          "truncate-lines": col.truncateLines || 1,
+                                          "show-tooltip": col.showTooltip !== false,
+                                          html: col.html
+                                        }, null, 8, ["value", "truncate", "max-width", "truncate-lines", "show-tooltip", "html"]))
+                                      ], 46, _hoisted_25)) : vue.createCommentVNode("", true)
                                     ], 64);
                                   }), 256))
-                                ], 10, _hoisted_23)) : vue.createCommentVNode("", true),
+                                ], 10, _hoisted_22)) : vue.createCommentVNode("", true),
                                 isRowExpanded(item, i2) && props.hasSubtable ? (vue.openBlock(), vue.createElementBlock("tr", {
                                   key: 1,
                                   class: vue.normalizeClass([
@@ -7547,8 +7691,8 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                                         filterItems: filterItems.value
                                       })
                                     ], 4)
-                                  ], 8, _hoisted_29)
-                                ], 10, _hoisted_28)) : vue.createCommentVNode("", true)
+                                  ], 8, _hoisted_27)
+                                ], 10, _hoisted_26)) : vue.createCommentVNode("", true)
                               ], 64);
                             }), 128)),
                             !filterRowCount.value && currentLoader.value && _ctx.skeletonloader ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 0 }, vue.renderList(props.pageSize, (i2) => {
@@ -7559,7 +7703,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                                 vue.createElementVNode("td", {
                                   colspan: props.columns.length + vue.unref(extracolumnlength),
                                   class: "!bh-p-0 !bh-border-transparent"
-                                }, _hoisted_32, 8, _hoisted_30)
+                                }, _hoisted_30, 8, _hoisted_28)
                               ]);
                             }), 128)) : vue.createCommentVNode("", true),
                             filterRowCount.value ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 1 }, vue.renderList(props.footerRows, (item, i2) => {
@@ -7570,7 +7714,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                                 vue.unref(extracolumnlength) > 0 ? (vue.openBlock(), vue.createElementBlock("td", {
                                   key: 0,
                                   colspan: vue.unref(extracolumnlength)
-                                }, null, 8, _hoisted_33)) : vue.createCommentVNode("", true),
+                                }, 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, [
                                     !col.hide && !col.dataOnly ? (vue.openBlock(), vue.createElementBlock("td", {
@@ -7580,12 +7724,19 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                                         j === 0 && props.stickyFirstColumn ? "bh-sticky bh-left-0 bh-bg-blue-light" : "",
                                         props.hasCheckbox && j === 0 && props.stickyFirstColumn ? "bh-left-[52px]" : "",
                                         col.cellClass ? col.cellClass : ""
-                                      ])
+                                      ]),
+                                      style: vue.normalizeStyle({ maxWidth: col.truncate !== false ? col.maxWidth : void 0 })
                                     }, [
-                                      item.cells.find((x2) => x2.field == col.field) ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
-                                        vue.createTextVNode(vue.toDisplayString(item.cells.find((x2) => x2.field == col.field).text), 1)
-                                      ], 64)) : vue.createCommentVNode("", true)
-                                    ], 2)) : vue.createCommentVNode("", true)
+                                      item.cells.find((x2) => x2.field == col.field) ? (vue.openBlock(), vue.createBlock(_sfc_main$1, {
+                                        key: 0,
+                                        value: item.cells.find((x2) => x2.field == col.field).text,
+                                        truncate: col.truncate !== false,
+                                        "max-width": col.maxWidth,
+                                        "truncate-lines": col.truncateLines || 1,
+                                        "show-tooltip": col.showTooltip !== false,
+                                        html: false
+                                      }, null, 8, ["value", "truncate", "max-width", "truncate-lines", "show-tooltip"])) : vue.createCommentVNode("", true)
+                                    ], 6)) : vue.createCommentVNode("", true)
                                   ], 64);
                                 }), 256))
                               ]);
@@ -7595,7 +7746,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                             key: 0,
                             class: vue.normalizeClass({ "bh-sticky bh-bottom-0": props.stickyHeader })
                           }, [
-                            vue.createVNode(_sfc_main$1, {
+                            vue.createVNode(_sfc_main$2, {
                               all: props,
                               currentSortColumn: currentSortColumn.value,
                               currentSortDirection: currentSortDirection.value,
@@ -7658,7 +7809,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
             "sticky-footer": props.stickyFooter
           }])
         }, [
-          vue.createElementVNode("div", _hoisted_34, [
+          vue.createElementVNode("div", _hoisted_32, [
             _ctx.enablefooterpagination ? vue.renderSlot(_ctx.$slots, "footerpageinfo", {
               key: 0,
               paginationInfo: _ctx.paginationInfo,
@@ -7671,8 +7822,8 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
               stringFormat,
               setPageSize
             }, () => [
-              vue.createElementVNode("div", _hoisted_35, [
-                vue.createElementVNode("span", _hoisted_36, vue.toDisplayString(stringFormat(
+              vue.createElementVNode("div", _hoisted_33, [
+                vue.createElementVNode("span", _hoisted_34, vue.toDisplayString(stringFormat(
                   props.paginationInfo,
                   filterRowCount.value ? offset2.value : 0,
                   limit.value,
@@ -7687,7 +7838,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                     return vue.openBlock(), vue.createElementBlock("option", {
                       value: option,
                       key: option
-                    }, vue.toDisplayString(option), 9, _hoisted_37);
+                    }, vue.toDisplayString(option), 9, _hoisted_35);
                   }), 128))
                 ], 512)), [
                   [vue.vModelSelect, currentPageSize.value]
@@ -7703,7 +7854,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
               nextPage,
               previousPage
             }, () => [
-              vue.createElementVNode("div", _hoisted_38, [
+              vue.createElementVNode("div", _hoisted_36, [
                 props.showFirstPage ? (vue.openBlock(), vue.createElementBlock("button", {
                   key: 0,
                   type: "button",
@@ -7713,7 +7864,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                   props.firstArrow ? (vue.openBlock(), vue.createElementBlock("span", {
                     key: 0,
                     innerHTML: props.firstArrow
-                  }, null, 8, _hoisted_39)) : (vue.openBlock(), vue.createElementBlock("svg", _hoisted_40, _hoisted_42))
+                  }, null, 8, _hoisted_37)) : (vue.openBlock(), vue.createElementBlock("svg", _hoisted_38, _hoisted_40))
                 ], 2)) : vue.createCommentVNode("", true),
                 vue.createElementVNode("button", {
                   type: "button",
@@ -7723,7 +7874,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                   props.previousArrow ? (vue.openBlock(), vue.createElementBlock("span", {
                     key: 0,
                     innerHTML: props.previousArrow
-                  }, null, 8, _hoisted_43)) : (vue.openBlock(), vue.createElementBlock("svg", _hoisted_44, _hoisted_46))
+                  }, null, 8, _hoisted_41)) : (vue.openBlock(), vue.createElementBlock("svg", _hoisted_42, _hoisted_44))
                 ], 2),
                 props.showNumbers ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 1 }, vue.renderList(paging.value, (page) => {
                   return vue.openBlock(), vue.createElementBlock("button", {
@@ -7734,7 +7885,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                       "bh-active": page === currentPage.value
                     }]),
                     onClick: ($event) => movePage(page)
-                  }, vue.toDisplayString(page), 11, _hoisted_47);
+                  }, vue.toDisplayString(page), 11, _hoisted_45);
                 }), 128)) : vue.createCommentVNode("", true),
                 vue.createElementVNode("button", {
                   type: "button",
@@ -7744,7 +7895,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                   props.nextArrow ? (vue.openBlock(), vue.createElementBlock("span", {
                     key: 0,
                     innerHTML: props.nextArrow
-                  }, null, 8, _hoisted_48)) : (vue.openBlock(), vue.createElementBlock("svg", _hoisted_49, _hoisted_51))
+                  }, null, 8, _hoisted_46)) : (vue.openBlock(), vue.createElementBlock("svg", _hoisted_47, _hoisted_49))
                 ], 2),
                 props.showLastPage ? (vue.openBlock(), vue.createElementBlock("button", {
                   key: 2,
@@ -7755,7 +7906,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                   props.lastArrow ? (vue.openBlock(), vue.createElementBlock("span", {
                     key: 0,
                     innerHTML: props.lastArrow
-                  }, null, 8, _hoisted_52)) : (vue.openBlock(), vue.createElementBlock("svg", _hoisted_53, _hoisted_55))
+                  }, null, 8, _hoisted_50)) : (vue.openBlock(), vue.createElementBlock("svg", _hoisted_51, _hoisted_53))
                 ], 2)) : vue.createCommentVNode("", true)
               ])
             ]) : vue.createCommentVNode("", true)