@dolusoft/vue3-datatable 1.8.1 → 1.8.3

package/dist/vue3-datatable.cjs

@@ -2501,7 +2501,7 @@ 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$8, [["__scopeId", "data-v-da3bc8d5"]]);
 const __default__$4 = {
   name: "ButtonRightPanel"
 };
@@ -2527,7 +2527,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$7, [["__scopeId", "data-v-b373d5f7"]]);
 const _hoisted_1$6 = { class: "bh-text-[13px] bh-font-normal bh-rounded bh-overflow-hidden" };
 const __default__$3 = {
   name: "columnFilter"
@@ -3001,8 +3001,13 @@ const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
     const setupColumnWatches = () => {
       var _a;
       if (!((_a = props.all) == null ? void 0 : _a.columns)) return;
+      console.log("🔵 [SETUP-WATCHES] Starting setup for", props.all.columns.length, "columns");
       props.all.columns.forEach((col) => {
         if (col.filter && col.field && !watchedFields.value.has(col.field)) {
+          console.log("🔵 [WATCH-INIT]", col.field, {
+            initialValue: col.value,
+            initialCondition: col.condition
+          });
           if (filterInputs.value[col.field] === void 0) {
             filterInputs.value[col.field] = col.value || "";
           }
@@ -3010,13 +3015,30 @@ const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
           watchDebounced(
             () => filterInputs.value[col.field],
             (newValue) => {
+              var _a2;
               const column = columnsMap.value.get(col.field);
+              console.log("🔴 [DEBOUNCE-FIRED]", {
+                field: col.field,
+                newValue,
+                columnConditionBefore: column == null ? void 0 : column.condition,
+                columnValueBefore: column == null ? void 0 : column.value
+              });
               if (column) {
                 if (column.type === "string" || column.type === "String") {
                   column.value = typeof newValue === "string" ? newValue.trim() : newValue;
                 } else {
                   column.value = newValue;
                 }
+                if (!column.condition && column.value) {
+                  const type = ((_a2 = column.type) == null ? void 0 : _a2.toLowerCase()) || "string";
+                  column.condition = type === "string" ? "Contains" : "Equal";
+                  console.log("🟡 [DEFAULT-CONDITION-SET]", col.field, column.condition);
+                }
+                console.log("🟢 [AFTER-MUTATION]", {
+                  field: col.field,
+                  valueAfter: column.value,
+                  conditionAfter: column.condition
+                });
                 emit("filterChange");
               }
             },
@@ -3075,10 +3097,16 @@ const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
       return condition;
     };
     const handleConditionChange = (field, condition) => {
+      console.log("🟠 [CONDITION-CHANGE]", { field, condition });
       const column = columnsMap.value.get(field);
       if (column) {
         column.condition = condition;
         columnConditions.value[field] = condition;
+        console.log("🟠 [CONDITION-UPDATED]", {
+          field,
+          newCondition: column.condition,
+          columnValue: column.value
+        });
         emit("filterChange");
       }
     };
@@ -4130,6 +4158,10 @@ 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 = {
@@ -4142,6 +4174,10 @@ 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

@@ -1,16 +1,16 @@
 
-.expandbtn[data-v-4d01a2fa] {
+.expandbtn[data-v-da3bc8d5] {
     cursor: pointer;
-}
+}
 
-.rightpanelbtn[data-v-d739c6bf] {
-    cursor: pointer;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 24px;
+.rightpanelbtn[data-v-b373d5f7] {
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
     height: 24px;
-}
+}
 .splitpanes{display:flex;width:100%;height:100%}.splitpanes--vertical{flex-direction:row}.splitpanes--horizontal{flex-direction:column}.splitpanes--dragging .splitpanes__pane{-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:none}.splitpanes__pane{width:100%;height:100%;overflow:hidden}.splitpanes--vertical .splitpanes__pane{transition:width .2s ease-out}.splitpanes--horizontal .splitpanes__pane{transition:height .2s ease-out}.splitpanes--dragging .splitpanes__pane{transition:none}.splitpanes__splitter{touch-action:none}.splitpanes--vertical>.splitpanes__splitter{min-width:1px;cursor:col-resize}.splitpanes--horizontal>.splitpanes__splitter{min-height:1px;cursor:row-resize}.splitpanes.default-theme .splitpanes__pane{background-color:#f2f2f2}.splitpanes.default-theme .splitpanes__splitter{background-color:#fff;box-sizing:border-box;position:relative;flex-shrink:0}.splitpanes.default-theme .splitpanes__splitter:before,.splitpanes.default-theme .splitpanes__splitter:after{content:"";position:absolute;top:50%;left:50%;background-color:#00000026;transition:background-color .3s}.splitpanes.default-theme .splitpanes__splitter:hover:before,.splitpanes.default-theme .splitpanes__splitter:hover:after{background-color:#00000040}.splitpanes.default-theme .splitpanes__splitter:first-child{cursor:auto}.default-theme.splitpanes .splitpanes .splitpanes__splitter{z-index:1}.default-theme.splitpanes--vertical>.splitpanes__splitter,.default-theme .splitpanes--vertical>.splitpanes__splitter{width:7px;border-left:1px solid #eee;margin-left:-1px}.default-theme.splitpanes--vertical>.splitpanes__splitter:before,.default-theme.splitpanes--vertical>.splitpanes__splitter:after,.default-theme .splitpanes--vertical>.splitpanes__splitter:before,.default-theme .splitpanes--vertical>.splitpanes__splitter:after{transform:translateY(-50%);width:1px;height:30px}.default-theme.splitpanes--vertical>.splitpanes__splitter:before,.default-theme .splitpanes--vertical>.splitpanes__splitter:before{margin-left:-2px}.default-theme.splitpanes--vertical>.splitpanes__splitter:after,.default-theme .splitpanes--vertical>.splitpanes__splitter:after{margin-left:1px}.default-theme.splitpanes--horizontal>.splitpanes__splitter,.default-theme .splitpanes--horizontal>.splitpanes__splitter{height:7px;border-top:1px solid #eee;margin-top:-1px}.default-theme.splitpanes--horizontal>.splitpanes__splitter:before,.default-theme.splitpanes--horizontal>.splitpanes__splitter:after,.default-theme .splitpanes--horizontal>.splitpanes__splitter:before,.default-theme .splitpanes--horizontal>.splitpanes__splitter:after{transform:translate(-50%);width:30px;height:1px}.default-theme.splitpanes--horizontal>.splitpanes__splitter:before,.default-theme .splitpanes--horizontal>.splitpanes__splitter:before{margin-top:-2px}.default-theme.splitpanes--horizontal>.splitpanes__splitter:after,.default-theme .splitpanes--horizontal>.splitpanes__splitter:after{margin-top:1px}
 
 .left-menu-container {

package/dist/vue3-datatable.js

@@ -2500,7 +2500,7 @@ 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$8, [["__scopeId", "data-v-da3bc8d5"]]);
 const __default__$4 = {
   name: "ButtonRightPanel"
 };
@@ -2526,7 +2526,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const ButtonRightPanel = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["__scopeId", "data-v-d739c6bf"]]);
+const ButtonRightPanel = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["__scopeId", "data-v-b373d5f7"]]);
 const _hoisted_1$6 = { class: "bh-text-[13px] bh-font-normal bh-rounded bh-overflow-hidden" };
 const __default__$3 = {
   name: "columnFilter"
@@ -3000,8 +3000,13 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     const setupColumnWatches = () => {
       var _a;
       if (!((_a = props.all) == null ? void 0 : _a.columns)) return;
+      console.log("🔵 [SETUP-WATCHES] Starting setup for", props.all.columns.length, "columns");
       props.all.columns.forEach((col) => {
         if (col.filter && col.field && !watchedFields.value.has(col.field)) {
+          console.log("🔵 [WATCH-INIT]", col.field, {
+            initialValue: col.value,
+            initialCondition: col.condition
+          });
           if (filterInputs.value[col.field] === void 0) {
             filterInputs.value[col.field] = col.value || "";
           }
@@ -3009,13 +3014,30 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
           watchDebounced(
             () => filterInputs.value[col.field],
             (newValue) => {
+              var _a2;
               const column = columnsMap.value.get(col.field);
+              console.log("🔴 [DEBOUNCE-FIRED]", {
+                field: col.field,
+                newValue,
+                columnConditionBefore: column == null ? void 0 : column.condition,
+                columnValueBefore: column == null ? void 0 : column.value
+              });
               if (column) {
                 if (column.type === "string" || column.type === "String") {
                   column.value = typeof newValue === "string" ? newValue.trim() : newValue;
                 } else {
                   column.value = newValue;
                 }
+                if (!column.condition && column.value) {
+                  const type = ((_a2 = column.type) == null ? void 0 : _a2.toLowerCase()) || "string";
+                  column.condition = type === "string" ? "Contains" : "Equal";
+                  console.log("🟡 [DEFAULT-CONDITION-SET]", col.field, column.condition);
+                }
+                console.log("🟢 [AFTER-MUTATION]", {
+                  field: col.field,
+                  valueAfter: column.value,
+                  conditionAfter: column.condition
+                });
                 emit("filterChange");
               }
             },
@@ -3074,10 +3096,16 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       return condition;
     };
     const handleConditionChange = (field, condition) => {
+      console.log("🟠 [CONDITION-CHANGE]", { field, condition });
       const column = columnsMap.value.get(field);
       if (column) {
         column.condition = condition;
         columnConditions.value[field] = condition;
+        console.log("🟠 [CONDITION-UPDATED]", {
+          field,
+          newCondition: column.condition,
+          columnValue: column.value
+        });
         emit("filterChange");
       }
     };
@@ -4129,6 +4157,10 @@ 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 = {
@@ -4141,6 +4173,10 @@ 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.8.1",
+  "version": "1.8.3",
   "description": "Vue3 Datatable - fully customizable & easy to use datatable library",
   "private": false,
   "type": "module",