@winchsa/ui 0.1.53 → 0.1.57

package/dist/components/forms/AutocompleteInput.d.vue.ts

@@ -17,6 +17,7 @@ type __VLS_Props = {
     error?: boolean;
     modelValue?: unknown;
     itemLabel?: string;
+    descriptionKey?: string;
     groupValues?: string;
     groupLabel?: string;
     trackBy?: string;
@@ -83,6 +84,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
     clearable: boolean;
     hideSelected: boolean;
     querySearchParam: string;
+    descriptionKey: string;
     trackBy: string;
     deselectLabel: string;
     selectLabel: string;

package/dist/components/forms/AutocompleteInput.vue

@@ -26,6 +26,7 @@ const props = defineProps({
   error: { type: Boolean, required: false },
   modelValue: { type: null, required: false },
   itemLabel: { type: String, required: false },
+  descriptionKey: { type: String, required: false, default: "description" },
   groupValues: { type: String, required: false },
   groupLabel: { type: String, required: false },
   trackBy: { type: String, required: false, default: "id" },
@@ -305,7 +306,7 @@ defineExpose({
                   <p class="ma-0 app-font-size-13">
                     {{ option.name }}
                   </p>
-                  <span v-if="option?.description" class="text-gray-600 app-font-size-13">({{ option?.description }})</span>
+                  <span v-if="option?.[descriptionKey]" class="text-gray-600 app-font-size-13">{{ option?.[descriptionKey] }}</span>
                 </div>
               </template>
 
@@ -422,7 +423,7 @@ defineExpose({
                   <p class="ma-0 app-font-size-13">
                     {{ option.name }}
                   </p>
-                  <span v-if="option?.description" class="text-gray-600 app-font-size-13">({{ option?.description }})</span>
+                  <span v-if="option?.[descriptionKey]" class="text-gray-600 app-font-size-13">({{ option?.[descriptionKey] }})</span>
                 </div>
               </template>
 

package/dist/components/forms/AutocompleteInput.vue.d.ts

@@ -17,6 +17,7 @@ type __VLS_Props = {
     error?: boolean;
     modelValue?: unknown;
     itemLabel?: string;
+    descriptionKey?: string;
     groupValues?: string;
     groupLabel?: string;
     trackBy?: string;
@@ -83,6 +84,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
     clearable: boolean;
     hideSelected: boolean;
     querySearchParam: string;
+    descriptionKey: string;
     trackBy: string;
     deselectLabel: string;
     selectLabel: string;

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/EditableDataTableRow.vue

@@ -178,6 +178,7 @@ const placeholder = (header) => {
     :group-label="header.groupLabel || 'name'"
     :group-values="header.groupValues || 'children'"
     :item-label="header.itemLabel || 'name'"
+    :description-key="header.descriptionKey || 'description'"
     :track-by="header.trackBy || 'id'"
     :multiple="header.multiple"
     :disabled="isDisabled"

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;
       }
     });
@@ -157,6 +160,7 @@ watch(
           :url="form.urlSearch"
           :label="form.label"
           :item-label="form.itemLabel || 'name'"
+          :description-key="form.descriptionKey || 'description'"
           :track-by="form.trackBy || 'id'"
           :track-by-value="form.trackByValue"
           :params="form.params"

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/dist/types.d.ts

@@ -71,6 +71,7 @@ export type FormFilter = {
 	hasLang?: boolean
 	options?: OptionItem[]
 	itemLabel?: string
+	descriptionKey?: string
 	urlSearch?: string
 	multiple?: boolean
 	trackBy?: string
@@ -142,6 +143,7 @@ export type EditableDataTableItem = {
 	searchInternally?: boolean
 	trackBy?: string
 	itemLabel?: string
+	descriptionKey?: string
 	multiple?: boolean
 	groupLabel?: string
 	groupValues?: string

package/package.json

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