@ramathibodi/nuxt-commons 0.1.72 → 0.1.73

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": "^3.0.0"
   },
-  "version": "0.1.72",
+  "version": "0.1.73",
   "builder": {
     "@nuxt/module-builder": "0.8.4",
     "unbuild": "2.0.0"

package/dist/runtime/components/master/Autocomplete.vue

@@ -13,6 +13,11 @@ const props = withDefaults(defineProps<Props & MasterLikeProps>(), {
   waitForFilter: false,
   meilisearch: false,
   cache: false,
+
+  statusField: 'statusCode',
+  activeValue: 'active',
+  hideInactiveInList: true,
+  preventSelectingInactive: true,
 })
 
 const {
@@ -43,6 +48,11 @@ const {
       model-selected-item="masterItemByGroupKeyAndItemCodeIn"
       :model-selected-item-by="computedModelSelectedItemBy"
       model-selected-item-key="itemCodes"
+
+      :status-field="props.statusField"
+      :active-value="props.activeValue"
+      :hide-inactive-in-list="props.hideInactiveInList"
+      :prevent-selecting-inactive="props.preventSelectingInactive"
   >
     <!-- pass-through slots -->
     <!-- @ts-ignore -->

package/dist/runtime/components/master/Combobox.vue

@@ -13,6 +13,11 @@ const props = withDefaults(defineProps<Props & MasterLikeProps>(), {
   waitForFilter: false,
   meilisearch: false,
   cache: false,
+
+  statusField: 'statusCode',
+  activeValue: 'active',
+  hideInactiveInList: true,
+  preventSelectingInactive: true,
 })
 
 const {
@@ -43,6 +48,11 @@ const {
       model-selected-item="masterItemByGroupKeyAndItemCodeIn"
       :model-selected-item-by="computedModelSelectedItemBy"
       model-selected-item-key="itemCodes"
+
+      :status-field="props.statusField"
+      :active-value="props.activeValue"
+      :hide-inactive-in-list="props.hideInactiveInList"
+      :prevent-selecting-inactive="props.preventSelectingInactive"
   >
     <!-- pass-through slots -->
     <!-- @ts-ignore -->
@@ -70,4 +80,4 @@ const {
 
 <style>
 .meilisearch-item em{font-weight:700}
-</style>
+</style>

package/dist/runtime/components/master/Select.vue

@@ -12,6 +12,11 @@ const props = withDefaults(defineProps<Props & StaticMasterLikeProps>(), {
   noDataText: 'ไม่พบข้อมูล',
   waitForFilter: false,
   cache: false,
+
+  statusField: 'statusCode',
+  activeValue: 'active',
+  hideInactiveInList: true,
+  preventSelectingInactive: true,
 })
 
 const {
@@ -36,6 +41,10 @@ const {
       :no-data-text="computedNoDataText"
       :show-code="props.showCode"
       :cache="props.cache"
+      :status-field="props.statusField"
+      :active-value="props.activeValue"
+      :hide-inactive-in-list="props.hideInactiveInList"
+      :prevent-selecting-inactive="props.preventSelectingInactive"
   >
     <!-- pass-through slots -->
     <!-- @ts-ignore -->
@@ -51,4 +60,4 @@ const {
       {{ formatItemTitle(item) }}
     </template>
   </model-combobox>
-</template>
+</template>

package/dist/runtime/components/model/Autocomplete.vue

@@ -10,11 +10,17 @@ const props = withDefaults(defineProps<Props & LookupProps & PersistSlimProps>()
   fuzzy: false,
   showCode: false,
   cache: false,
+
   serverSearch: false,
   searchSearchSort: false,
   serverSearchText: 'Type to search…',
   serverSearchLoadingText: 'Searching…',
   serverSearchDebounce: 500,
+
+  statusField: 'statusCode',
+  activeValue: 'active',
+  hideInactiveInList: false,
+  preventSelectingInactive: false,
 })
 
 const emit = defineEmits<{
@@ -22,8 +28,7 @@ const emit = defineEmits<{
 }>()
 
 const selectedItems = defineModel<any>()
-
-useLocalStorageModel(selectedItems,props)
+useLocalStorageModel(selectedItems, props)
 
 const {
   searchData,
@@ -33,12 +38,14 @@ const {
   computedNoDataText,
   isLoading,
   isErrorLoading,
-} = useLookupList(props, emit, selectedItems)
+  onUpdateModelValue, // ✅ moved into composable
+} = useLookupList(props as any, emit, selectedItems)
 </script>
 
 <template>
   <v-autocomplete
-      v-model="selectedItems"
+      :model-value="selectedItems"
+      @update:model-value="onUpdateModelValue"
       v-model:search="searchData"
       v-bind="$attrs"
       :items="computedItems"

package/dist/runtime/components/model/Combobox.vue

@@ -15,6 +15,11 @@ const props = withDefaults(defineProps<Props & LookupProps & PersistSlimProps>()
   serverSearchText: 'Type to search…',
   serverSearchLoadingText: 'Searching…',
   serverSearchDebounce: 500,
+
+  statusField: 'statusCode',
+  activeValue: 'active',
+  hideInactiveInList: false,
+  preventSelectingInactive: false,
 })
 
 const emit = defineEmits<{
@@ -22,8 +27,7 @@ const emit = defineEmits<{
 }>()
 
 const selectedItems = defineModel<any>()
-
-useLocalStorageModel(selectedItems,props)
+useLocalStorageModel(selectedItems, props)
 
 const {
   searchData,
@@ -33,12 +37,14 @@ const {
   computedNoDataText,
   isLoading,
   isErrorLoading,
-} = useLookupList(props, emit, selectedItems)
+  onUpdateModelValue, // ✅ from composable
+} = useLookupList(props as any, emit, selectedItems)
 </script>
 
 <template>
   <v-combobox
-      v-model="selectedItems"
+      :model-value="selectedItems"
+      @update:model-value="onUpdateModelValue"
       v-model:search="searchData"
       v-bind="$attrs"
       :items="computedItems"

package/dist/runtime/components/model/Select.vue

@@ -10,6 +10,11 @@ const props = withDefaults(defineProps<Props & StaticLookupProps & PersistSlimPr
   fuzzy: false,
   showCode: false,
   cache: false,
+
+  statusField: 'statusCode',
+  activeValue: 'active',
+  hideInactiveInList: false,
+  preventSelectingInactive: false,
 })
 
 const emit = defineEmits<{
@@ -17,8 +22,7 @@ const emit = defineEmits<{
 }>()
 
 const selectedItems = defineModel<any>()
-
-useLocalStorageModel(selectedItems,props)
+useLocalStorageModel(selectedItems, props)
 
 const {
   computedItems,
@@ -27,12 +31,16 @@ const {
   computedNoDataText,
   isLoading,
   isErrorLoading,
-} = useLookupList(props, emit, selectedItems)
+  searchData,
+  onUpdateModelValue, // ✅ from composable
+} = useLookupList(props as any, emit, selectedItems)
 </script>
 
 <template>
   <v-combobox
-      v-model="selectedItems"
+      :model-value="selectedItems"
+      @update:model-value="onUpdateModelValue"
+      v-model:search="searchData"
       v-bind="$attrs"
       :items="computedItems"
       :filter-keys="computedFilterKeys"

package/dist/runtime/composables/lookupList.d.ts

@@ -13,6 +13,10 @@ export interface StaticLookupProps {
     noDataText?: string;
     placeholder?: string;
     multiple?: boolean;
+    statusField?: string;
+    activeValue?: any;
+    hideInactiveInList?: boolean;
+    preventSelectingInactive?: boolean;
 }
 export interface LookupProps extends StaticLookupProps {
     serverSearch?: boolean;
@@ -28,9 +32,9 @@ export interface LookupProps extends StaticLookupProps {
 export interface LookupEmits {
     (e: 'update:selectedObject', payload: any | any[]): void;
 }
-export declare function useLookupList(props: LookupProps, emit: LookupEmits, selectedItems: Ref<any>): {
-    modelItems: Ref<any[], any[]>;
-    items: Ref<any[], any[]>;
+export declare function useLookupList<T extends Record<string, any>>(props: LookupProps, emit: LookupEmits, selectedItems: Ref<any>): {
+    modelItems: import("vue").ShallowRef<T[], T[]>;
+    items: import("vue").ShallowRef<T[], T[]>;
     searchData: Ref<string, string>;
     isLoading: Ref<boolean, boolean>;
     isErrorLoading: Ref<boolean, boolean>;
@@ -38,9 +42,12 @@ export declare function useLookupList(props: LookupProps, emit: LookupEmits, sel
     computedFilterKeys: import("vue").ComputedRef<string | string[]>;
     computedPlaceholder: import("vue").ComputedRef<string | undefined>;
     computedNoDataText: import("vue").ComputedRef<string | undefined>;
-    computedItems: import("vue").ComputedRef<any[]>;
-    selectedItemsObject: Ref<any[], any[]>;
+    computedItems: import("vue").ComputedRef<T[]>;
+    selectedItemsObject: import("vue").ShallowRef<T[], T[]>;
     syncSelectedFromModelValue: () => Promise<void>;
+    isSelectableValue: (value: any) => boolean;
+    setModelValueGuarded: (val: any) => void;
+    onUpdateModelValue: (val: any) => void;
     loadItems: () => Promise<void>;
     applyFuzzy: () => void;
 };

package/dist/runtime/composables/lookupList.js

@@ -1,17 +1,24 @@
-import { computed, ref, watch } from "vue";
+import { computed, ref, shallowRef, watch } from "vue";
 import { watchDebounced } from "@vueuse/core";
 import { union, isEmpty, isArray, sortBy, castArray } from "lodash-es";
 import { useFuzzy } from "./utils/fuzzy.js";
 import { useGraphQlOperation } from "./graphqlOperation.js";
 export function useLookupList(props, emit, selectedItems) {
-  const modelItems = ref([]);
-  const items = ref([]);
+  const modelItems = shallowRef([]);
+  const items = shallowRef([]);
+  const selectedItemsObject = shallowRef([]);
   const searchData = ref("");
   const isLoading = ref(false);
   const isErrorLoading = ref(false);
+  const statusField = computed(() => props.statusField ?? "statusCode");
+  const activeValue = computed(() => props.activeValue ?? "active");
+  const hideInactiveInList = computed(() => props.hideInactiveInList ?? false);
   const queryFields = computed(() => {
     let fieldsArray = [props.itemTitle, props.itemValue];
     if (props.fields) fieldsArray = union(fieldsArray, props.fields);
+    if (hideInactiveInList.value && statusField.value) {
+      fieldsArray = union(fieldsArray, [statusField.value]);
+    }
     return fieldsArray;
   });
   const computedFilterKeys = computed(() => {
@@ -59,7 +66,7 @@ export function useLookupList(props, emit, selectedItems) {
         modelItems.value = [];
         items.value = [];
       }
-    } catch (e) {
+    } catch {
       if (id !== requestId) return;
       isErrorLoading.value = true;
       modelItems.value = [];
@@ -84,7 +91,13 @@ export function useLookupList(props, emit, selectedItems) {
     }
     items.value = output;
   }
-  const selectedItemsObject = ref([]);
+  const itemMap = computed(() => {
+    const m = /* @__PURE__ */ new Map();
+    for (const it of modelItems.value) {
+      m.set(it?.[props.itemValue], it);
+    }
+    return m;
+  });
   async function syncSelectedFromModelValue() {
     const modelValueData = selectedItems.value;
     const values = castArray(modelValueData).filter(
@@ -95,24 +108,24 @@ export function useLookupList(props, emit, selectedItems) {
       selectedItemsObject.value = [];
       return;
     }
-    let alreadyInObject = selectedItemsObject.value?.filter((item) => values.includes(item?.[props.itemValue])) || [];
-    const haveSet = /* @__PURE__ */ new Set([...alreadyInObject.map((item) => item?.[props.itemValue])]);
-    const missingValues = values.filter((value) => !haveSet.has(value));
+    const alreadyInObject = selectedItemsObject.value?.filter((it) => values.includes(it?.[props.itemValue])) || [];
+    const haveSet = new Set(alreadyInObject.map((it) => it?.[props.itemValue]));
+    const missingValues = values.filter((v) => !haveSet.has(v));
     const stillMissing = [];
-    for (const value of missingValues) {
-      const localHit = modelItems.value.find((item) => item?.[props.itemValue] === value);
+    for (const v of missingValues) {
+      const localHit = itemMap.value.get(v);
       if (localHit) {
         alreadyInObject.push(localHit);
-        haveSet.add(value);
+        haveSet.add(v);
       } else {
-        stillMissing.push(value);
+        stillMissing.push(v);
       }
     }
     if (stillMissing.length && props.modelSelectedItem) {
       try {
         const key = props.modelSelectedItemKey || "id";
         const variables = { ...props.modelSelectedItemBy || {} };
-        variables[key] = values;
+        variables[key] = stillMissing;
         const result = await useGraphQlOperation(
           "Query",
           props.modelSelectedItem,
@@ -120,13 +133,19 @@ export function useLookupList(props, emit, selectedItems) {
           variables,
           props.cache
         );
-        selectedItemsObject.value = castArray(result);
+        const resolved = castArray(result);
+        for (const obj of resolved) {
+          const v = obj?.[props.itemValue];
+          if (!haveSet.has(v)) {
+            alreadyInObject.push(obj);
+            haveSet.add(v);
+          }
+        }
       } catch {
       }
-    } else {
-      selectedItemsObject.value = alreadyInObject;
     }
-    emit("update:selectedObject", props.multiple ? selectedItemsObject.value : selectedItemsObject.value[0]);
+    selectedItemsObject.value = alreadyInObject;
+    emit("update:selectedObject", props.multiple ? alreadyInObject : alreadyInObject[0]);
   }
   watchDebounced(
     () => [
@@ -159,18 +178,44 @@ export function useLookupList(props, emit, selectedItems) {
     () => {
       syncSelectedFromModelValue();
     },
-    { immediate: true, deep: true }
+    { immediate: true }
   );
   const computedItems = computed(() => {
     const sortByField = !props.sortBy || typeof props.sortBy === "string" ? [props.sortBy || (props.showCode ? props.itemValue : props.itemTitle)] : props.sortBy;
-    const baseItems = (props.fuzzy || props.serverSearch && !props.searchSearchSort) && !isEmpty(searchData.value) ? items.value : sortBy(items.value, sortByField);
+    const baseSource = (props.fuzzy || props.serverSearch && !props.searchSearchSort) && !isEmpty(searchData.value) ? items.value : sortBy(items.value, sortByField);
+    let baseItems = [...baseSource];
+    if (hideInactiveInList.value) {
+      baseItems = baseItems.filter((it) => it?.[statusField.value] === activeValue.value);
+    }
     for (const selectedItem of selectedItemsObject.value || []) {
-      if (!baseItems.find((existingItem) => existingItem[props.itemValue] === selectedItem[props.itemValue])) {
+      const v = selectedItem?.[props.itemValue];
+      if (!baseItems.find((x) => x?.[props.itemValue] === v)) {
         baseItems.push(selectedItem);
       }
     }
     return baseItems;
   });
+  function isSelectableValue(value) {
+    if (!hideInactiveInList.value) return true;
+    const local = itemMap.value.get(value);
+    const obj = local ?? selectedItemsObject.value.find((it) => it?.[props.itemValue] === value) ?? modelItems.value.find((it) => it?.[props.itemValue] === value);
+    if (!obj) return true;
+    return obj?.[statusField.value] === activeValue.value;
+  }
+  function setModelValueGuarded(val) {
+    if (!(props.preventSelectingInactive ?? false)) {
+      selectedItems.value = val;
+      return;
+    }
+    if (!props.multiple) {
+      if (val != null && !isSelectableValue(val)) return;
+      selectedItems.value = val;
+      return;
+    }
+    const arr = Array.isArray(val) ? val : [];
+    selectedItems.value = arr.filter((v) => isSelectableValue(v));
+  }
+  const onUpdateModelValue = (val) => setModelValueGuarded(val);
   return {
     // state
     modelItems,
@@ -187,7 +232,12 @@ export function useLookupList(props, emit, selectedItems) {
     // selection
     selectedItemsObject,
     syncSelectedFromModelValue,
-    // actions (exposed for testing if needed)
+    // selection policy helper
+    isSelectableValue,
+    // guarded setter for v-model updates
+    setModelValueGuarded,
+    onUpdateModelValue,
+    // actions
     loadItems,
     applyFuzzy
   };

package/dist/runtime/composables/lookupListMaster.d.ts

@@ -12,6 +12,10 @@ export interface StaticMasterLikeProps {
     waitForFilter?: boolean;
     waitForFilterText?: string;
     cache?: boolean | number;
+    statusField?: string;
+    activeValue?: any;
+    hideInactiveInList?: boolean;
+    preventSelectingInactive?: boolean;
 }
 export interface MasterLikeProps extends StaticMasterLikeProps {
     meilisearch?: boolean;

package/dist/runtime/composables/lookupListMaster.js

@@ -16,13 +16,20 @@ export function useLookupListMaster(props) {
     return modelBy;
   });
   const computedModelSelectedItemBy = computed(() => ({ groupKey: props.groupKey }));
+  const itemTitleField = computed(() => props.lang === "TH" ? "itemValue" : "itemValueAlternative");
   const computedFields = computed(() => {
     const extra = [];
     if (props.filterText) extra.push("filterText");
     if (props.meilisearch) extra.push("_formatted");
-    return union(["itemCode", "itemValue", "itemValueAlternative"], extra, props.fields || []);
+    const statusField = props.statusField ?? "statusCode";
+    const includeStatus = (props.hideInactiveInList ?? true) && statusField;
+    return union(
+      ["itemCode", "itemValue", "itemValueAlternative"],
+      includeStatus ? [statusField] : [],
+      extra,
+      props.fields || []
+    );
   });
-  const itemTitleField = computed(() => props.lang === "TH" ? "itemValue" : "itemValueAlternative");
   const formatItemTitle = (item) => {
     if (props.meilisearch) {
       const raw = item.raw?._formatted ?? {};
@@ -47,7 +54,6 @@ export function useLookupListMaster(props) {
     return [props.sortBy ?? "itemValue"];
   });
   return {
-    // for <model-*> props
     computedModelName,
     computedModelBy,
     computedModelSelectedItemBy,
@@ -55,7 +61,6 @@ export function useLookupListMaster(props) {
     itemTitleField,
     computedNoDataText,
     computedSortBy,
-    // helpers
     formatItemTitle
   };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ramathibodi/nuxt-commons",
-  "version": "0.1.72",
+  "version": "0.1.73",
   "description": "Ramathibodi Nuxt modules for common components",
   "repository": {
     "type": "git",