@dolusoft/vue3-datatable 1.8.32 → 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 = {
@@ -3297,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", {
@@ -3322,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", {
@@ -3347,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) => {

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 = {
@@ -3296,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", {
@@ -3321,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", {
@@ -3346,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) => {

package/package.json

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