@dolusoft/vue3-datatable 1.8.31 → 1.8.35

package/dist/vue3-datatable.cjs

@@ -2891,6 +2891,28 @@ function _sfc_render(_ctx, _cache) {
   return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$2, _hoisted_3$2);
 }
 const iconFilter = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render]]);
+const tooltipDirective = {
+  mounted(el, binding) {
+    const text = binding.value || "";
+    if (!text) return;
+    el.setAttribute("data-tooltip", text);
+    el.classList.add("has-tooltip");
+  },
+  updated(el, binding) {
+    const text = binding.value || "";
+    if (text) {
+      el.setAttribute("data-tooltip", text);
+      el.classList.add("has-tooltip");
+    } else {
+      el.removeAttribute("data-tooltip");
+      el.classList.remove("has-tooltip");
+    }
+  },
+  unmounted(el) {
+    el.removeAttribute("data-tooltip");
+    el.classList.remove("has-tooltip");
+  }
+};
 const _hoisted_1$1 = { key: "hdrrow" };
 const _hoisted_2$1 = { class: "bh-checkbox" };
 const _hoisted_3$1 = {
@@ -3043,7 +3065,8 @@ const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
     "columnFilterLang",
     "hasFilterDatetimeSlot",
     "showClearAllButton",
-    "hasAnyActiveFilter"
+    "hasAnyActiveFilter",
+    "filterUpdateTrigger"
   ],
   emits: [
     "selectAll",
@@ -3193,6 +3216,23 @@ const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
       },
       { deep: true, immediate: true }
     );
+    vue.watch(
+      () => props.filterUpdateTrigger,
+      () => {
+        var _a;
+        if (!((_a = props.all) == null ? void 0 : _a.columns)) return;
+        props.all.columns.forEach((col) => {
+          if (col.field) {
+            const colValue = col.value ?? "";
+            const hasValue = colValue !== "" && colValue !== null && colValue !== void 0;
+            filterInputs.value[col.field] = colValue;
+            if (hasValue && col.condition) {
+              columnConditions.value[col.field] = col.condition;
+            }
+          }
+        });
+      }
+    );
     vue.onMounted(() => {
       setupColumnWatches();
     });
@@ -3279,16 +3319,17 @@ const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
             ])
           ]),
           props.all.columnFilter && !props.isFooter && clearButtonLocation.value === "checkbox" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$1, [
-            props.showClearAllButton ? (vue.openBlock(), vue.createElementBlock("button", {
+            props.showClearAllButton ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", {
               key: 0,
               type: "button",
               class: vue.normalizeClass(["bh-clear-all-button", {
                 "bh-clear-all-button--active": hasAnyActiveFilterLocal.value
               }]),
               disabled: !hasAnyActiveFilterLocal.value,
-              onClick: vue.withModifiers(handleClearAllFilters, ["stop"]),
-              title: "Clear all filters"
-            }, _hoisted_6$1, 10, _hoisted_4$1)) : vue.createCommentVNode("", true)
+              onClick: vue.withModifiers(handleClearAllFilters, ["stop"])
+            }, _hoisted_6$1, 10, _hoisted_4$1)), [
+              [vue.unref(tooltipDirective), "Clear all filters"]
+            ]) : vue.createCommentVNode("", true)
           ])) : vue.createCommentVNode("", true)
         ], 6)) : vue.createCommentVNode("", true),
         props.all.hasRightPanel ? (vue.openBlock(), vue.createElementBlock("th", {
@@ -3304,16 +3345,17 @@ const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
           })
         }, [
           props.all.columnFilter && !props.isFooter && clearButtonLocation.value === "rightpanel" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_7$1, [
-            props.showClearAllButton ? (vue.openBlock(), vue.createElementBlock("button", {
+            props.showClearAllButton ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", {
               key: 0,
               type: "button",
               class: vue.normalizeClass(["bh-clear-all-button", {
                 "bh-clear-all-button--active": hasAnyActiveFilterLocal.value
               }]),
               disabled: !hasAnyActiveFilterLocal.value,
-              onClick: vue.withModifiers(handleClearAllFilters, ["stop"]),
-              title: "Clear all filters"
-            }, _hoisted_10$1, 10, _hoisted_8$1)) : vue.createCommentVNode("", true)
+              onClick: vue.withModifiers(handleClearAllFilters, ["stop"])
+            }, _hoisted_10$1, 10, _hoisted_8$1)), [
+              [vue.unref(tooltipDirective), "Clear all filters"]
+            ]) : vue.createCommentVNode("", true)
           ])) : vue.createCommentVNode("", true)
         ], 6)) : vue.createCommentVNode("", true),
         props.all.hasSubtable ? (vue.openBlock(), vue.createElementBlock("th", {
@@ -3329,16 +3371,17 @@ const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
             expandall: props.all.expandall
           }, null, 8, ["expandedrows", "expandall"])) : vue.createCommentVNode("", true),
           props.all.columnFilter && !props.isFooter && clearButtonLocation.value === "subtable" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_11$1, [
-            props.showClearAllButton ? (vue.openBlock(), vue.createElementBlock("button", {
+            props.showClearAllButton ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", {
               key: 0,
               type: "button",
               class: vue.normalizeClass(["bh-clear-all-button", {
                 "bh-clear-all-button--active": hasAnyActiveFilterLocal.value
               }]),
               disabled: !hasAnyActiveFilterLocal.value,
-              onClick: vue.withModifiers(handleClearAllFilters, ["stop"]),
-              title: "Clear all filters"
-            }, _hoisted_14$1, 10, _hoisted_12$1)) : vue.createCommentVNode("", true)
+              onClick: vue.withModifiers(handleClearAllFilters, ["stop"])
+            }, _hoisted_14$1, 10, _hoisted_12$1)), [
+              [vue.unref(tooltipDirective), "Clear all filters"]
+            ]) : vue.createCommentVNode("", true)
           ])) : vue.createCommentVNode("", true)
         ], 4)) : vue.createCommentVNode("", true),
         (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(props.all.columns, (col, j) => {
@@ -3826,6 +3869,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     const currentSearch = vue.ref(props.search);
     JSON.parse(JSON.stringify(props.columns));
     const isOpenFilter = vue.ref(null);
+    const filterUpdateTrigger = vue.ref(0);
     const timer = vue.ref(null);
     let clickCount = vue.ref(0);
     const delay = vue.ref(230);
@@ -4151,6 +4195,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
         if (column) {
           column.value = value;
           column.condition = condition || "Equal";
+          filterUpdateTrigger.value++;
           updateHasAnyActiveFilter();
           if (triggerFilter) {
             filterChange();
@@ -4660,6 +4705,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                                     hasFilterDatetimeSlot: hasFilterDatetimeSlot.value,
                                     showClearAllButton: props.showClearAllButton,
                                     hasAnyActiveFilter: hasAnyActiveFilter.value,
+                                    filterUpdateTrigger: filterUpdateTrigger.value,
                                     onSelectAll: selectAll,
                                     onSortChange: sortChange,
                                     onFilterChange: filterChange,
@@ -4674,7 +4720,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                                       ]),
                                       key: "0"
                                     } : void 0
-                                  ]), 1032, ["expandedrows", "currentSortColumn", "currentSortDirection", "isOpenFilter", "checkAll", "columnFilterLang", "hasFilterDatetimeSlot", "showClearAllButton", "hasAnyActiveFilter"])
+                                  ]), 1032, ["expandedrows", "currentSortColumn", "currentSortDirection", "isOpenFilter", "checkAll", "columnFilterLang", "hasFilterDatetimeSlot", "showClearAllButton", "hasAnyActiveFilter", "filterUpdateTrigger"])
                                 ], 2),
                                 vue.createElementVNode("tbody", null, [
                                   (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(filterItems.value, (item, i) => {
@@ -4933,6 +4979,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                               hasFilterDatetimeSlot: hasFilterDatetimeSlot.value,
                               showClearAllButton: props.showClearAllButton,
                               hasAnyActiveFilter: hasAnyActiveFilter.value,
+                              filterUpdateTrigger: filterUpdateTrigger.value,
                               onSelectAll: selectAll,
                               onSortChange: sortChange,
                               onFilterChange: filterChange,
@@ -4947,7 +4994,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                                 ]),
                                 key: "0"
                               } : void 0
-                            ]), 1032, ["expandedrows", "currentSortColumn", "currentSortDirection", "isOpenFilter", "checkAll", "columnFilterLang", "hasFilterDatetimeSlot", "showClearAllButton", "hasAnyActiveFilter"])
+                            ]), 1032, ["expandedrows", "currentSortColumn", "currentSortDirection", "isOpenFilter", "checkAll", "columnFilterLang", "hasFilterDatetimeSlot", "showClearAllButton", "hasAnyActiveFilter", "filterUpdateTrigger"])
                           ], 2),
                           vue.createElementVNode("tbody", null, [
                             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(filterItems.value, (item, i) => {

package/dist/vue3-datatable.css

@@ -89,3 +89,45 @@
   border-color: var(--primary, #3b82f6);
   color: var(--primary, #3b82f6);
 }
+
+/* Tooltip styles */
+.has-tooltip {
+  position: relative;
+}
+.has-tooltip::before,
+.has-tooltip::after {
+  visibility: hidden;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.2s ease, visibility 0.2s ease;
+  z-index: 9999;
+}
+.has-tooltip::before {
+  content: attr(data-tooltip);
+  position: absolute;
+  bottom: calc(100% + 6px);
+  left: 50%;
+  transform: translateX(-50%);
+  padding: 4px 8px;
+  background: #1f2937;
+  color: #fff;
+  font-size: 12px;
+  font-weight: 500;
+  white-space: nowrap;
+  border-radius: 4px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+}
+.has-tooltip::after {
+  content: '';
+  position: absolute;
+  bottom: calc(100% + 2px);
+  left: 50%;
+  transform: translateX(-50%);
+  border: 4px solid transparent;
+  border-top-color: #1f2937;
+}
+.has-tooltip:hover::before,
+.has-tooltip:hover::after {
+  visibility: visible;
+  opacity: 1;
+}

package/dist/vue3-datatable.js

@@ -2890,6 +2890,28 @@ function _sfc_render(_ctx, _cache) {
   return openBlock(), createElementBlock("svg", _hoisted_1$2, _hoisted_3$2);
 }
 const iconFilter = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render]]);
+const tooltipDirective = {
+  mounted(el, binding) {
+    const text = binding.value || "";
+    if (!text) return;
+    el.setAttribute("data-tooltip", text);
+    el.classList.add("has-tooltip");
+  },
+  updated(el, binding) {
+    const text = binding.value || "";
+    if (text) {
+      el.setAttribute("data-tooltip", text);
+      el.classList.add("has-tooltip");
+    } else {
+      el.removeAttribute("data-tooltip");
+      el.classList.remove("has-tooltip");
+    }
+  },
+  unmounted(el) {
+    el.removeAttribute("data-tooltip");
+    el.classList.remove("has-tooltip");
+  }
+};
 const _hoisted_1$1 = { key: "hdrrow" };
 const _hoisted_2$1 = { class: "bh-checkbox" };
 const _hoisted_3$1 = {
@@ -3042,7 +3064,8 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     "columnFilterLang",
     "hasFilterDatetimeSlot",
     "showClearAllButton",
-    "hasAnyActiveFilter"
+    "hasAnyActiveFilter",
+    "filterUpdateTrigger"
   ],
   emits: [
     "selectAll",
@@ -3192,6 +3215,23 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       },
       { deep: true, immediate: true }
     );
+    watch(
+      () => props.filterUpdateTrigger,
+      () => {
+        var _a;
+        if (!((_a = props.all) == null ? void 0 : _a.columns)) return;
+        props.all.columns.forEach((col) => {
+          if (col.field) {
+            const colValue = col.value ?? "";
+            const hasValue = colValue !== "" && colValue !== null && colValue !== void 0;
+            filterInputs.value[col.field] = colValue;
+            if (hasValue && col.condition) {
+              columnConditions.value[col.field] = col.condition;
+            }
+          }
+        });
+      }
+    );
     onMounted(() => {
       setupColumnWatches();
     });
@@ -3278,16 +3318,17 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
             ])
           ]),
           props.all.columnFilter && !props.isFooter && clearButtonLocation.value === "checkbox" ? (openBlock(), createElementBlock("div", _hoisted_3$1, [
-            props.showClearAllButton ? (openBlock(), createElementBlock("button", {
+            props.showClearAllButton ? withDirectives((openBlock(), createElementBlock("button", {
               key: 0,
               type: "button",
               class: normalizeClass(["bh-clear-all-button", {
                 "bh-clear-all-button--active": hasAnyActiveFilterLocal.value
               }]),
               disabled: !hasAnyActiveFilterLocal.value,
-              onClick: withModifiers(handleClearAllFilters, ["stop"]),
-              title: "Clear all filters"
-            }, _hoisted_6$1, 10, _hoisted_4$1)) : createCommentVNode("", true)
+              onClick: withModifiers(handleClearAllFilters, ["stop"])
+            }, _hoisted_6$1, 10, _hoisted_4$1)), [
+              [unref(tooltipDirective), "Clear all filters"]
+            ]) : createCommentVNode("", true)
           ])) : createCommentVNode("", true)
         ], 6)) : createCommentVNode("", true),
         props.all.hasRightPanel ? (openBlock(), createElementBlock("th", {
@@ -3303,16 +3344,17 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
           })
         }, [
           props.all.columnFilter && !props.isFooter && clearButtonLocation.value === "rightpanel" ? (openBlock(), createElementBlock("div", _hoisted_7$1, [
-            props.showClearAllButton ? (openBlock(), createElementBlock("button", {
+            props.showClearAllButton ? withDirectives((openBlock(), createElementBlock("button", {
               key: 0,
               type: "button",
               class: normalizeClass(["bh-clear-all-button", {
                 "bh-clear-all-button--active": hasAnyActiveFilterLocal.value
               }]),
               disabled: !hasAnyActiveFilterLocal.value,
-              onClick: withModifiers(handleClearAllFilters, ["stop"]),
-              title: "Clear all filters"
-            }, _hoisted_10$1, 10, _hoisted_8$1)) : createCommentVNode("", true)
+              onClick: withModifiers(handleClearAllFilters, ["stop"])
+            }, _hoisted_10$1, 10, _hoisted_8$1)), [
+              [unref(tooltipDirective), "Clear all filters"]
+            ]) : createCommentVNode("", true)
           ])) : createCommentVNode("", true)
         ], 6)) : createCommentVNode("", true),
         props.all.hasSubtable ? (openBlock(), createElementBlock("th", {
@@ -3328,16 +3370,17 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
             expandall: props.all.expandall
           }, null, 8, ["expandedrows", "expandall"])) : createCommentVNode("", true),
           props.all.columnFilter && !props.isFooter && clearButtonLocation.value === "subtable" ? (openBlock(), createElementBlock("div", _hoisted_11$1, [
-            props.showClearAllButton ? (openBlock(), createElementBlock("button", {
+            props.showClearAllButton ? withDirectives((openBlock(), createElementBlock("button", {
               key: 0,
               type: "button",
               class: normalizeClass(["bh-clear-all-button", {
                 "bh-clear-all-button--active": hasAnyActiveFilterLocal.value
               }]),
               disabled: !hasAnyActiveFilterLocal.value,
-              onClick: withModifiers(handleClearAllFilters, ["stop"]),
-              title: "Clear all filters"
-            }, _hoisted_14$1, 10, _hoisted_12$1)) : createCommentVNode("", true)
+              onClick: withModifiers(handleClearAllFilters, ["stop"])
+            }, _hoisted_14$1, 10, _hoisted_12$1)), [
+              [unref(tooltipDirective), "Clear all filters"]
+            ]) : createCommentVNode("", true)
           ])) : createCommentVNode("", true)
         ], 4)) : createCommentVNode("", true),
         (openBlock(true), createElementBlock(Fragment, null, renderList(props.all.columns, (col, j) => {
@@ -3825,6 +3868,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const currentSearch = ref(props.search);
     JSON.parse(JSON.stringify(props.columns));
     const isOpenFilter = ref(null);
+    const filterUpdateTrigger = ref(0);
     const timer = ref(null);
     let clickCount = ref(0);
     const delay = ref(230);
@@ -4150,6 +4194,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         if (column) {
           column.value = value;
           column.condition = condition || "Equal";
+          filterUpdateTrigger.value++;
           updateHasAnyActiveFilter();
           if (triggerFilter) {
             filterChange();
@@ -4659,6 +4704,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                                     hasFilterDatetimeSlot: hasFilterDatetimeSlot.value,
                                     showClearAllButton: props.showClearAllButton,
                                     hasAnyActiveFilter: hasAnyActiveFilter.value,
+                                    filterUpdateTrigger: filterUpdateTrigger.value,
                                     onSelectAll: selectAll,
                                     onSortChange: sortChange,
                                     onFilterChange: filterChange,
@@ -4673,7 +4719,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                                       ]),
                                       key: "0"
                                     } : void 0
-                                  ]), 1032, ["expandedrows", "currentSortColumn", "currentSortDirection", "isOpenFilter", "checkAll", "columnFilterLang", "hasFilterDatetimeSlot", "showClearAllButton", "hasAnyActiveFilter"])
+                                  ]), 1032, ["expandedrows", "currentSortColumn", "currentSortDirection", "isOpenFilter", "checkAll", "columnFilterLang", "hasFilterDatetimeSlot", "showClearAllButton", "hasAnyActiveFilter", "filterUpdateTrigger"])
                                 ], 2),
                                 createElementVNode("tbody", null, [
                                   (openBlock(true), createElementBlock(Fragment, null, renderList(filterItems.value, (item, i) => {
@@ -4932,6 +4978,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                               hasFilterDatetimeSlot: hasFilterDatetimeSlot.value,
                               showClearAllButton: props.showClearAllButton,
                               hasAnyActiveFilter: hasAnyActiveFilter.value,
+                              filterUpdateTrigger: filterUpdateTrigger.value,
                               onSelectAll: selectAll,
                               onSortChange: sortChange,
                               onFilterChange: filterChange,
@@ -4946,7 +4993,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                                 ]),
                                 key: "0"
                               } : void 0
-                            ]), 1032, ["expandedrows", "currentSortColumn", "currentSortDirection", "isOpenFilter", "checkAll", "columnFilterLang", "hasFilterDatetimeSlot", "showClearAllButton", "hasAnyActiveFilter"])
+                            ]), 1032, ["expandedrows", "currentSortColumn", "currentSortDirection", "isOpenFilter", "checkAll", "columnFilterLang", "hasFilterDatetimeSlot", "showClearAllButton", "hasAnyActiveFilter", "filterUpdateTrigger"])
                           ], 2),
                           createElementVNode("tbody", null, [
                             (openBlock(true), createElementBlock(Fragment, null, renderList(filterItems.value, (item, i) => {

package/package.json

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