@dolusoft/vue3-datatable 1.7.83 → 1.7.85

package/dist/vue3-datatable.cjs

@@ -2985,6 +2985,7 @@ const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
     const emit = __emit;
     const filterInputs = vue.ref({});
     const columnConditions = vue.ref({});
+    const watchedFields = vue.ref(/* @__PURE__ */ new Set());
     const columnsMap = vue.computed(() => {
       var _a;
       const map = /* @__PURE__ */ new Map();
@@ -2997,82 +2998,47 @@ const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
       }
       return map;
     });
+    const setupColumnWatches = () => {
+      var _a;
+      if (!((_a = props.all) == null ? void 0 : _a.columns)) return;
+      props.all.columns.forEach((col) => {
+        if (col.filter && col.field && !watchedFields.value.has(col.field)) {
+          if (filterInputs.value[col.field] === void 0) {
+            filterInputs.value[col.field] = col.value || "";
+          }
+          watchedFields.value.add(col.field);
+          watchDebounced(
+            () => filterInputs.value[col.field],
+            (newValue) => {
+              const column = columnsMap.value.get(col.field);
+              if (column) {
+                if (column.type === "string" || column.type === "String") {
+                  column.value = typeof newValue === "string" ? newValue.trim() : newValue;
+                } else {
+                  column.value = newValue;
+                }
+                emit("filterChange");
+              }
+            },
+            { debounce: 300 }
+          );
+        }
+      });
+    };
     vue.watch(
       () => {
         var _a;
         return (_a = props.all) == null ? void 0 : _a.columns;
       },
-      () => {
+      (newColumns) => {
+        if (newColumns && newColumns.length > 0) {
+          setupColumnWatches();
+        }
       },
       { immediate: true, deep: true }
     );
-    vue.watch(
-      filterInputs,
-      (newVal) => {
-        console.log("🟡 [FILTER-INPUTS-CHANGED]", JSON.parse(JSON.stringify(newVal)));
-      },
-      { deep: true }
-    );
     vue.onMounted(() => {
-      var _a, _b, _c, _d, _e, _f;
-      console.log("🔍 [COLUMN-HEADER] onMounted", {
-        hasColumns: !!((_a = props.all) == null ? void 0 : _a.columns),
-        columnsCount: (_c = (_b = props.all) == null ? void 0 : _b.columns) == null ? void 0 : _c.length,
-        columns: (_e = (_d = props.all) == null ? void 0 : _d.columns) == null ? void 0 : _e.map((c) => ({
-          field: c.field,
-          filter: c.filter,
-          value: c.value
-        }))
-      });
-      if ((_f = props.all) == null ? void 0 : _f.columns) {
-        props.all.columns.forEach((col) => {
-          if (col.filter && col.field) {
-            console.log("🔍 [WATCH-SETUP] Setting up watch for:", col.field);
-            filterInputs.value[col.field] = col.value || "";
-            watchDebounced(
-              () => filterInputs.value[col.field],
-              (newValue) => {
-                var _a2, _b2, _c2, _d2;
-                const column = columnsMap.value.get(col.field);
-                console.log("🔴 [DEBOUNCE-FIRED]", {
-                  field: col.field,
-                  newValue,
-                  columnFromMap: column,
-                  columnValueBefore: column == null ? void 0 : column.value,
-                  propsColumnValue: (_a2 = props.all.columns.find(
-                    (c) => c.field === col.field
-                  )) == null ? void 0 : _a2.value,
-                  isSameRef: column === props.all.columns.find((c) => c.field === col.field)
-                });
-                if (column) {
-                  if (column.type === "string" || column.type === "String") {
-                    column.value = typeof newValue === "string" ? newValue.trim() : newValue;
-                    console.log("🔍 [AFTER-SET]", {
-                      afterValue: column.value,
-                      propsValue: (_b2 = props.all.columns.find((c) => c.field === col.field)) == null ? void 0 : _b2.value
-                    });
-                  } else {
-                    column.value = newValue;
-                    console.log("🔍 [AFTER-SET]", {
-                      afterValue: column.value,
-                      propsValue: (_c2 = props.all.columns.find((c) => c.field === col.field)) == null ? void 0 : _c2.value
-                    });
-                  }
-                  emit("filterChange");
-                  console.log("🔴 [AFTER-MUTATION]", {
-                    columnValueAfter: (_d2 = columnsMap.value.get(col.field)) == null ? void 0 : _d2.value
-                  });
-                }
-              },
-              { debounce: 300 }
-            );
-          } else {
-            console.warn("⚠️ [WATCH-SKIP] Skipped:", col.field, {
-              filter: col.filter
-            });
-          }
-        });
-      }
+      setupColumnWatches();
     });
     const checkboxChange = () => {
       if (selectedAll.value) {
@@ -4090,10 +4056,6 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       }
     };
     const filterChange = () => {
-      console.log("🔍 [CUSTOM-TABLE] filterChange called", {
-        isServerMode: props.isServerMode,
-        currentPage: currentPage.value
-      });
       selectAll(false);
       if (props.isServerMode) {
         if (currentPage.value === 1) {
@@ -4167,10 +4129,6 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       }
     };
     const changeForServer = (changeType, isResetPage = false) => {
-      console.log(
-        "🔵 [CHANGE-FOR-SERVER] Props columns detail:",
-        props.columns.map((c) => ({ field: c.field, value: c.value, condition: c.condition }))
-      );
       if (props.isServerMode) {
         setDefaultCondition();
         const res = {
@@ -4183,10 +4141,6 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
           column_filters: props.columns,
           change_type: changeType
         };
-        console.log(
-          "🔵 [EMITTING-CHANGE] Final column_filters:",
-          res.column_filters.map((c) => ({ field: c.field, value: c.value, condition: c.condition }))
-        );
         emit("change", res);
       }
     };

package/dist/vue3-datatable.css

@@ -13,40 +13,40 @@
 }
 .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;
-}
+}

package/dist/vue3-datatable.js

@@ -1,4 +1,4 @@
-import { isRef, watch, onMounted, nextTick, getCurrentScope, onScopeDispose, unref, getCurrentInstance, computed, ref, useSlots, onBeforeUnmount, provide, openBlock, createBlock, resolveDynamicComponent, inject, createElementBlock, normalizeStyle, renderSlot, h, defineComponent, toRef, Fragment, withModifiers, createVNode, createElementVNode, normalizeClass, toDisplayString, createCommentVNode, withDirectives, renderList, vModelSelect, resolveComponent, createTextVNode, vModelText, vShow, withCtx, onUnmounted, vModelCheckbox } from "vue";
+import { isRef, onMounted, nextTick, getCurrentScope, onScopeDispose, unref, getCurrentInstance, watch, computed, ref, useSlots, onBeforeUnmount, provide, openBlock, createBlock, resolveDynamicComponent, inject, createElementBlock, normalizeStyle, renderSlot, h, defineComponent, toRef, Fragment, withModifiers, createVNode, createElementVNode, normalizeClass, toDisplayString, createCommentVNode, withDirectives, renderList, vModelSelect, resolveComponent, createTextVNode, vModelText, vShow, withCtx, onUnmounted, vModelCheckbox } from "vue";
 function tryOnScopeDispose(fn) {
   if (getCurrentScope()) {
     onScopeDispose(fn);
@@ -2984,6 +2984,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     const emit = __emit;
     const filterInputs = ref({});
     const columnConditions = ref({});
+    const watchedFields = ref(/* @__PURE__ */ new Set());
     const columnsMap = computed(() => {
       var _a;
       const map = /* @__PURE__ */ new Map();
@@ -2996,82 +2997,47 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       }
       return map;
     });
+    const setupColumnWatches = () => {
+      var _a;
+      if (!((_a = props.all) == null ? void 0 : _a.columns)) return;
+      props.all.columns.forEach((col) => {
+        if (col.filter && col.field && !watchedFields.value.has(col.field)) {
+          if (filterInputs.value[col.field] === void 0) {
+            filterInputs.value[col.field] = col.value || "";
+          }
+          watchedFields.value.add(col.field);
+          watchDebounced(
+            () => filterInputs.value[col.field],
+            (newValue) => {
+              const column = columnsMap.value.get(col.field);
+              if (column) {
+                if (column.type === "string" || column.type === "String") {
+                  column.value = typeof newValue === "string" ? newValue.trim() : newValue;
+                } else {
+                  column.value = newValue;
+                }
+                emit("filterChange");
+              }
+            },
+            { debounce: 300 }
+          );
+        }
+      });
+    };
     watch(
       () => {
         var _a;
         return (_a = props.all) == null ? void 0 : _a.columns;
       },
-      () => {
+      (newColumns) => {
+        if (newColumns && newColumns.length > 0) {
+          setupColumnWatches();
+        }
       },
       { immediate: true, deep: true }
     );
-    watch(
-      filterInputs,
-      (newVal) => {
-        console.log("🟡 [FILTER-INPUTS-CHANGED]", JSON.parse(JSON.stringify(newVal)));
-      },
-      { deep: true }
-    );
     onMounted(() => {
-      var _a, _b, _c, _d, _e, _f;
-      console.log("🔍 [COLUMN-HEADER] onMounted", {
-        hasColumns: !!((_a = props.all) == null ? void 0 : _a.columns),
-        columnsCount: (_c = (_b = props.all) == null ? void 0 : _b.columns) == null ? void 0 : _c.length,
-        columns: (_e = (_d = props.all) == null ? void 0 : _d.columns) == null ? void 0 : _e.map((c) => ({
-          field: c.field,
-          filter: c.filter,
-          value: c.value
-        }))
-      });
-      if ((_f = props.all) == null ? void 0 : _f.columns) {
-        props.all.columns.forEach((col) => {
-          if (col.filter && col.field) {
-            console.log("🔍 [WATCH-SETUP] Setting up watch for:", col.field);
-            filterInputs.value[col.field] = col.value || "";
-            watchDebounced(
-              () => filterInputs.value[col.field],
-              (newValue) => {
-                var _a2, _b2, _c2, _d2;
-                const column = columnsMap.value.get(col.field);
-                console.log("🔴 [DEBOUNCE-FIRED]", {
-                  field: col.field,
-                  newValue,
-                  columnFromMap: column,
-                  columnValueBefore: column == null ? void 0 : column.value,
-                  propsColumnValue: (_a2 = props.all.columns.find(
-                    (c) => c.field === col.field
-                  )) == null ? void 0 : _a2.value,
-                  isSameRef: column === props.all.columns.find((c) => c.field === col.field)
-                });
-                if (column) {
-                  if (column.type === "string" || column.type === "String") {
-                    column.value = typeof newValue === "string" ? newValue.trim() : newValue;
-                    console.log("🔍 [AFTER-SET]", {
-                      afterValue: column.value,
-                      propsValue: (_b2 = props.all.columns.find((c) => c.field === col.field)) == null ? void 0 : _b2.value
-                    });
-                  } else {
-                    column.value = newValue;
-                    console.log("🔍 [AFTER-SET]", {
-                      afterValue: column.value,
-                      propsValue: (_c2 = props.all.columns.find((c) => c.field === col.field)) == null ? void 0 : _c2.value
-                    });
-                  }
-                  emit("filterChange");
-                  console.log("🔴 [AFTER-MUTATION]", {
-                    columnValueAfter: (_d2 = columnsMap.value.get(col.field)) == null ? void 0 : _d2.value
-                  });
-                }
-              },
-              { debounce: 300 }
-            );
-          } else {
-            console.warn("⚠️ [WATCH-SKIP] Skipped:", col.field, {
-              filter: col.filter
-            });
-          }
-        });
-      }
+      setupColumnWatches();
     });
     const checkboxChange = () => {
       if (selectedAll.value) {
@@ -4089,10 +4055,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
     };
     const filterChange = () => {
-      console.log("🔍 [CUSTOM-TABLE] filterChange called", {
-        isServerMode: props.isServerMode,
-        currentPage: currentPage.value
-      });
       selectAll(false);
       if (props.isServerMode) {
         if (currentPage.value === 1) {
@@ -4166,10 +4128,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
     };
     const changeForServer = (changeType, isResetPage = false) => {
-      console.log(
-        "🔵 [CHANGE-FOR-SERVER] Props columns detail:",
-        props.columns.map((c) => ({ field: c.field, value: c.value, condition: c.condition }))
-      );
       if (props.isServerMode) {
         setDefaultCondition();
         const res = {
@@ -4182,10 +4140,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           column_filters: props.columns,
           change_type: changeType
         };
-        console.log(
-          "🔵 [EMITTING-CHANGE] Final column_filters:",
-          res.column_filters.map((c) => ({ field: c.field, value: c.value, condition: c.condition }))
-        );
         emit("change", res);
       }
     };

package/package.json

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