@winchsa/ui 0.1.52 → 0.1.54

package/dist/components/forms/ImageCardInput.vue

@@ -73,6 +73,21 @@ const initCropper = () => {
     });
   }
 };
+const closeCropper = () => {
+  if (cropperInstance.value) {
+    cropperInstance.value.destroy();
+    cropperInstance.value = null;
+  }
+  if (cropImageSrc.value) {
+    URL.revokeObjectURL(cropImageSrc.value);
+    cropImageSrc.value = null;
+  }
+  selectedFile.value = null;
+  if (fileInputRef.value) {
+    fileInputRef.value.value = "";
+  }
+  cropperDialog.value = false;
+};
 const cropImage = () => {
   if (!cropperInstance.value) {
     return;
@@ -81,15 +96,17 @@ const cropImage = () => {
     width: 200,
     height: 200
   });
+  const fileType = selectedFile.value?.type;
+  const fileName = selectedFile.value?.name ?? "image.jpg";
   canvas.toBlob((blob) => {
-    if (blob && selectedFile.value) {
-      const croppedFile = new File([blob], selectedFile.value.name, { type: selectedFile.value.type });
+    if (blob) {
+      const croppedFile = new File([blob], fileName, { type: fileType });
       generateImageUrl(croppedFile);
       model.value = croppedFile;
       emit("update");
-      cropperDialog.value = false;
+      closeCropper();
     }
-  }, selectedFile.value?.type);
+  }, fileType);
 };
 const deleteUserImage = () => {
   imageSrc.value = avatar;
@@ -179,7 +196,7 @@ const hasImage = computed(() => {
     width="500"
     :has-icon="false"
     @save="cropImage"
-    @cancel="cropperDialog = false"
+    @cancel="closeCropper"
   >
     <img
       v-if="cropImageSrc"

package/dist/components/table/DataTable.d.vue.ts

@@ -62,9 +62,9 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
 }>, {
     modelValue: string[];
     returnObject: boolean;
-    url: string;
     headers: Header[];
     formFilters: FormFilter[];
+    url: string;
     queryParams: Record<string, string>;
     enableButtons: boolean;
     enableButtonsFilter: boolean;

package/dist/components/table/DataTable.vue.d.ts

@@ -62,9 +62,9 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
 }>, {
     modelValue: string[];
     returnObject: boolean;
-    url: string;
     headers: Header[];
     formFilters: FormFilter[];
+    url: string;
     queryParams: Record<string, string>;
     enableButtons: boolean;
     enableButtonsFilter: boolean;

package/dist/components/table/FilterGenerator.vue

@@ -57,9 +57,7 @@ const value = computed({
     emit("update:modelValue", value2 || "");
   }
 });
-watch(() => props.forms, (value2) => {
-  formsFilters.value = value2 || [];
-});
+const initializedDefaults = /* @__PURE__ */ new Set();
 watch(
   () => props.forms,
   (filter) => {
@@ -68,7 +66,12 @@ watch(
       return;
     }
     filter.forEach((item) => {
-      if (item?.value) {
+      if (item?.value === void 0 || item?.value === null || initializedDefaults.has(item.name)) {
+        return;
+      }
+      initializedDefaults.add(item.name);
+      const currentValue = value.value?.[item.name];
+      if (currentValue === void 0 || currentValue === null || currentValue === "") {
         value.value[item.name] = item.value;
       }
     });

package/dist/composables/useTableFilters.js

@@ -9,6 +9,75 @@ var _vueRouter = require("vue-router");
 var _router = require("@vueuse/router");
 var _vue = require("vue");
 const multipleFilterTypes = ["autocomplete", "autocompleteGroups", "select", "bankSelect", "range"];
+function parseQueryToFilterValues(query, formFilters) {
+  const result = {};
+  formFilters.forEach(filter => {
+    const filterType = filter.type ?? "text";
+    if (filter.keys && filter.keys.length > 0) {
+      const values = [];
+      let hasAnyValue = false;
+      filter.keys.forEach(keyName => {
+        const v = query[keyName];
+        if (v !== void 0 && v !== null) {
+          hasAnyValue = true;
+          values.push(Array.isArray(v) ? v[0] : v);
+        } else {
+          values.push("");
+        }
+      });
+      if (hasAnyValue) {
+        result[filter.name] = values;
+      }
+      return;
+    }
+    const queryValue = query[filter.name];
+    if (queryValue === void 0 || queryValue === null) {
+      return;
+    }
+    if (filterType === "datepickerRange") {
+      result[filter.name] = Array.isArray(queryValue) ? queryValue : [queryValue];
+      return;
+    }
+    if (multipleFilterTypes.includes(filterType) && filter.multiple) {
+      result[filter.name] = Array.isArray(queryValue) ? [...queryValue] : [queryValue];
+      return;
+    }
+    result[filter.name] = Array.isArray(queryValue) ? queryValue[0] : queryValue;
+  });
+  return result;
+}
+function urlParamsMatchQuery(urlParams, query, formFilters) {
+  const relevantKeys = /* @__PURE__ */new Set();
+  formFilters.forEach(filter => {
+    relevantKeys.add(filter.name);
+    if (filter.keys) {
+      filter.keys.forEach(k => relevantKeys.add(k));
+    }
+  });
+  for (const key of relevantKeys) {
+    const a = urlParams[key];
+    const b = query[key];
+    const aEmpty = a == null || Array.isArray(a) && a.length === 0 || a === "";
+    const bEmpty = b == null || Array.isArray(b) && b.length === 0 || b === "";
+    if (aEmpty && bEmpty) {
+      continue;
+    }
+    if (aEmpty || bEmpty) {
+      return false;
+    }
+    const aArr = Array.isArray(a) ? a : [a];
+    const bArr = Array.isArray(b) ? b : [b];
+    if (aArr.length !== bArr.length) {
+      return false;
+    }
+    for (let i = 0; i < aArr.length; i++) {
+      if (String(aArr[i]) !== String(bArr[i])) {
+        return false;
+      }
+    }
+  }
+  return true;
+}
 function useTableFilters({
   formFilters,
   syncFiltersWithUrl
@@ -120,13 +189,17 @@ function useTableFilters({
     return parsedFilters;
   }
   const urlQueryParams = (0, _vue.computed)(() => convertFiltersToUrlParams(filters.value, formFilters.value));
-  (0, _vue.watch)(() => route.query, query => {
+  (0, _vue.watch)([() => route.query, formFilters], () => {
     if (isUpdatingFromFilters) {
       isUpdatingFromFilters = false;
       return;
     }
+    const currentAsUrlParams = convertFiltersToUrlParams(filters.value, formFilters.value);
+    if (urlParamsMatchQuery(currentAsUrlParams, route.query, formFilters.value)) {
+      return;
+    }
     isUpdatingFromUrl = true;
-    filters.value = query;
+    filters.value = parseQueryToFilterValues(route.query, formFilters.value);
   }, {
     immediate: true,
     deep: true

package/dist/composables/useTableFilters.mjs

@@ -2,6 +2,75 @@ import { useRoute, useRouter } from "vue-router";
 import { useRouteQuery } from "@vueuse/router";
 import { computed, ref, watch } from "vue";
 const multipleFilterTypes = ["autocomplete", "autocompleteGroups", "select", "bankSelect", "range"];
+function parseQueryToFilterValues(query, formFilters) {
+  const result = {};
+  formFilters.forEach((filter) => {
+    const filterType = filter.type ?? "text";
+    if (filter.keys && filter.keys.length > 0) {
+      const values = [];
+      let hasAnyValue = false;
+      filter.keys.forEach((keyName) => {
+        const v = query[keyName];
+        if (v !== void 0 && v !== null) {
+          hasAnyValue = true;
+          values.push(Array.isArray(v) ? v[0] : v);
+        } else {
+          values.push("");
+        }
+      });
+      if (hasAnyValue) {
+        result[filter.name] = values;
+      }
+      return;
+    }
+    const queryValue = query[filter.name];
+    if (queryValue === void 0 || queryValue === null) {
+      return;
+    }
+    if (filterType === "datepickerRange") {
+      result[filter.name] = Array.isArray(queryValue) ? queryValue : [queryValue];
+      return;
+    }
+    if (multipleFilterTypes.includes(filterType) && filter.multiple) {
+      result[filter.name] = Array.isArray(queryValue) ? [...queryValue] : [queryValue];
+      return;
+    }
+    result[filter.name] = Array.isArray(queryValue) ? queryValue[0] : queryValue;
+  });
+  return result;
+}
+function urlParamsMatchQuery(urlParams, query, formFilters) {
+  const relevantKeys = /* @__PURE__ */ new Set();
+  formFilters.forEach((filter) => {
+    relevantKeys.add(filter.name);
+    if (filter.keys) {
+      filter.keys.forEach((k) => relevantKeys.add(k));
+    }
+  });
+  for (const key of relevantKeys) {
+    const a = urlParams[key];
+    const b = query[key];
+    const aEmpty = a == null || Array.isArray(a) && a.length === 0 || a === "";
+    const bEmpty = b == null || Array.isArray(b) && b.length === 0 || b === "";
+    if (aEmpty && bEmpty) {
+      continue;
+    }
+    if (aEmpty || bEmpty) {
+      return false;
+    }
+    const aArr = Array.isArray(a) ? a : [a];
+    const bArr = Array.isArray(b) ? b : [b];
+    if (aArr.length !== bArr.length) {
+      return false;
+    }
+    for (let i = 0; i < aArr.length; i++) {
+      if (String(aArr[i]) !== String(bArr[i])) {
+        return false;
+      }
+    }
+  }
+  return true;
+}
 export function useTableFilters({ formFilters, syncFiltersWithUrl }) {
   const route = useRoute();
   const router = useRouter();
@@ -111,14 +180,18 @@ export function useTableFilters({ formFilters, syncFiltersWithUrl }) {
   }
   const urlQueryParams = computed(() => convertFiltersToUrlParams(filters.value, formFilters.value));
   watch(
-    () => route.query,
-    (query) => {
+    [() => route.query, formFilters],
+    () => {
       if (isUpdatingFromFilters) {
         isUpdatingFromFilters = false;
         return;
       }
+      const currentAsUrlParams = convertFiltersToUrlParams(filters.value, formFilters.value);
+      if (urlParamsMatchQuery(currentAsUrlParams, route.query, formFilters.value)) {
+        return;
+      }
       isUpdatingFromUrl = true;
-      filters.value = query;
+      filters.value = parseQueryToFilterValues(route.query, formFilters.value);
     },
     { immediate: true, deep: true }
   );

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@winchsa/ui",
-    "version": "0.1.52",
+    "version": "0.1.54",
     "type": "module",
     "private": false,
     "publishConfig": {