@ramathibodi/nuxt-commons 0.1.56 → 0.1.58

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

@@ -0,0 +1,70 @@
+<script lang="ts" setup>
+import { VCombobox } from 'vuetify/components/VCombobox'
+import { defineModel, withDefaults } from 'vue'
+import { useLookupList, type LookupProps } from '../../composables/lookupList'
+
+interface Props extends /* @vue-ignore */ InstanceType<typeof VCombobox['$props']> {}
+
+const props = withDefaults(defineProps<Props & LookupProps>(), {
+  fuzzy: false,
+  showCode: false,
+  cache: false,
+  serverSearch: false,
+  searchSearchSort: false,
+  serverSearchText: 'Type to search…',
+  serverSearchLoadingText: 'Searching…',
+  serverSearchDebounce: 500,
+})
+
+const emit = defineEmits<{
+  (e: 'update:selectedObject', object: any | any[]): void
+}>()
+
+const selectedItems = defineModel<any>()
+
+const {
+  searchData,
+  computedItems,
+  computedFilterKeys,
+  computedPlaceholder,
+  computedNoDataText,
+  isLoading,
+  isErrorLoading,
+} = useLookupList(props, emit, selectedItems)
+</script>
+
+<template>
+  <v-combobox
+      v-model="selectedItems"
+      v-model:search="searchData"
+      v-bind="$attrs"
+      :items="computedItems"
+      :filter-keys="computedFilterKeys"
+      :no-filter="props.fuzzy || props.serverSearch"
+      :item-title="props.itemTitle"
+      :item-value="props.itemValue"
+      :loading="isLoading"
+      :placeholder="computedPlaceholder"
+      :no-data-text="computedNoDataText"
+      :multiple="props.multiple"
+      :return-object="false"
+  >
+    <!-- passthrough slots -->
+    <!-- @ts-ignore -->
+    <template v-for="(_, name, index) in ($slots as {})" :key="index" #[name]="slotData">
+      <slot :name="name" v-bind="((slotData || {}) as object)" />
+    </template>
+
+    <template v-if="!$slots.item" #item="{ props: itemProps, item }">
+      <v-list-item v-bind="itemProps" :title="(props.showCode ? item.value + '-' : '') + item.title" />
+    </template>
+
+    <template v-if="!$slots.selection && props.showCode" #selection="{ item }">
+      {{ item.value + '-' + item.title }}
+    </template>
+
+    <template v-if="isErrorLoading" #append>
+      <v-icon color="error">mdi mdi-alert</v-icon>
+    </template>
+  </v-combobox>
+</template>

package/dist/runtime/composables/document/template.d.ts

@@ -11,6 +11,8 @@ export interface DocumentTemplateItem {
     conditionalDisplay?: string;
     computedValue?: string;
     retrievedValue?: string;
+    customClass?: string;
+    customStyle?: string;
 }
 export interface ChoiceItem {
     label: string;
@@ -18,7 +20,8 @@ export interface ChoiceItem {
 }
 export declare const validationRulesRegex: RegExp;
 export declare function useDocumentTemplate(items: string | object, parentTemplates?: string | string[]): string;
+export declare function templateItemToString(inputItem: DocumentTemplateItem, parentTemplates: string | string[], dataVariable?: string): string;
 export declare function optionStringToChoiceObject(option: string | object): ChoiceItem[];
 export declare function escapeObjectForInlineBinding(obj: object): string;
 export declare function buildValidationRules(validationString: string): string;
-export declare function processDefaultTemplate(item: DocumentTemplateItem, insideTemplate?: string, optionString?: string, validationRules?: string): string;
+export declare function processDefaultTemplate(item: DocumentTemplateItem, insideTemplate?: string, optionString?: string, validationRules?: string, dataVariable?: string): string;

package/dist/runtime/composables/document/template.js

@@ -1,6 +1,7 @@
-import { processTemplateFormTable, processTemplateFormTableData } from "./templateFormTable.js";
+import { processTemplateFormTable } from "./templateFormTable.js";
+import { processTemplateFormTableData } from "./templateFormTableData.js";
 import { processTemplateFormHidden } from "./templateFormHidden.js";
-import { some, includes } from "lodash-es";
+import { some, includes, cloneDeep } from "lodash-es";
 export const validationRulesRegex = /^(require(?:\([^)]*\))?|requireIf\([^)]*\)|requireTrue(?:\([^)]*\))?|requireTrueIf\([^)]*\)|numeric(?:\([^)]*\))?|range\([^)]*\)|integer(?:\([^)]*\))?|unique\([^)]*\)|length(?:\([^)]*\))?|lengthGreater\([^)]*\)|lengthLess\([^)]*\)|telephone(?:\([^)]*\))?|email(?:\([^)]*\))?|regex\([^)]*\)|idcard(?:\([^)]*\))?|DateFuture(?:\([^)]*\))?|DatetimeFuture(?:\([^)]*\))?|DateHappen(?:\([^)]*\))?|DatetimeHappen(?:\([^)]*\))?|DateAfter\([^)]*\)|DateBefore\([^)]*\)|DateEqual\([^)]*\))(,(require(?:\([^)]*\))?|requireIf\([^)]*\)|requireTrue(?:\([^)]*\))?|requireTrueIf\([^)]*\)|numeric(?:\([^)]*\))?|range\([^)]*\)|integer(?:\([^)]*\))?|unique\([^)]*\)|length(?:\([^)]*\))?|lengthGreater\([^)]*\)|lengthLess\([^)]*\)|telephone(?:\([^)]*\))?|email(?:\([^)]*\))?|regex\([^)]*\)|idcard(?:\([^)]*\))?|DateFuture(?:\([^)]*\))?|DatetimeFuture(?:\([^)]*\))?|DateHappen(?:\([^)]*\))?|DatetimeHappen(?:\([^)]*\))?|DateAfter\([^)]*\)|DateBefore\([^)]*\)|DateEqual\([^)]*\)))*$/;
 export function useDocumentTemplate(items, parentTemplates) {
   if (!items) return "";
@@ -14,10 +15,12 @@ export function useDocumentTemplate(items, parentTemplates) {
   if (!Array.isArray(items) || !items.every((item) => typeof item === "object" && item !== null)) {
     return "";
   }
-  const templateString = items.map((item) => templateItemToString(item, parentTemplates || [])).join("");
+  const templateString = items.map((item) => columnWrapTemplateItemString(item, parentTemplates || [])).join("");
   return !parentTemplates || parentTemplates.length == 0 ? `<v-container fluid><v-row dense>${templateString}</v-row></v-container>` : `<v-row dense>${templateString}</v-row>`;
 }
-function templateItemToString(item, parentTemplates) {
+export function templateItemToString(inputItem, parentTemplates, dataVariable = "data") {
+  let item = cloneDeep(inputItem);
+  item.inputAttributes = item.inputAttributes?.trim() || "";
   let optionString = "";
   if (item.inputOptions) {
     if (item.inputType === "MasterAutocomplete") {
@@ -52,22 +55,22 @@ function templateItemToString(item, parentTemplates) {
       templateString = item.inputCustomCode || "";
       break;
     case "VRadio":
-      templateString = `${item.inputLabel ? `<p class="opacity-60">${item.inputLabel}</p>` : ""} <v-radio-group ${item.inputAttributes?.trim()} v-model="data.${item.variableName || ""}"${validationRules ? " " + validationRules.trim() : ""}>${optionString ? " " + optionString.trim() : ""}</v-radio-group>`;
+      templateString = `${item.inputLabel ? `<p class="opacity-60">${item.inputLabel}</p>` : ""} <v-radio-group ${item.inputAttributes?.trim()} v-model="${dataVariable}.${item.variableName || ""}"${validationRules ? " " + validationRules.trim() : ""}>${optionString ? " " + optionString.trim() : ""}</v-radio-group>`;
       break;
     case "VRadioInline":
-      templateString = `<v-radio-group ${item.inputAttributes?.trim()} v-model="data.${item.variableName || ""}" inline ${validationRules ? " " + validationRules.trim() : ""}>${item.inputLabel ? `<template #prepend><span class="opacity-60">${item.inputLabel}</span></template>` : ""}${optionString ? " " + optionString.trim() : ""}</v-radio-group>`;
+      templateString = `<v-radio-group ${item.inputAttributes?.trim()} v-model="${dataVariable}.${item.variableName || ""}" inline ${validationRules ? " " + validationRules.trim() : ""}>${item.inputLabel ? `<template #prepend><span class="opacity-60">${item.inputLabel}</span></template>` : ""}${optionString ? " " + optionString.trim() : ""}</v-radio-group>`;
       break;
     case "Separator":
-      templateString = "</v-row><v-row dense>";
+      templateString = `</v-row><v-row dense${item.customClass ? ` class="${item.customClass}"` : ""}${item.customStyle ? ` class="${item.customStyle}"` : ""}>`;
       break;
     case "Header":
       templateString = `<div class="${optionString || "text-h4 font-weight-medium"}">${item.inputLabel || item.variableName || ""}</div>`;
       break;
     case "FormTable":
-      templateString = processTemplateFormTable(item, parentTemplates);
+      templateString = processTemplateFormTable(item, parentTemplates, dataVariable);
       break;
     case "FormTableData":
-      templateString = processTemplateFormTableData(item, parentTemplates);
+      templateString = processTemplateFormTableData(item, parentTemplates, dataVariable);
       break;
     case "FormHidden":
       templateString = processTemplateFormHidden(item, parentTemplates);
@@ -77,15 +80,19 @@ function templateItemToString(item, parentTemplates) {
       templateString = `<document-form :model-value="data" templateCode="${item.inputOptions || ""}" parent-templates="${parentTemplatesString}"></document-form>`;
       break;
     default:
-      templateString = processDefaultTemplate(item, void 0, optionString);
+      templateString = processDefaultTemplate(item, void 0, optionString, void 0, dataVariable);
   }
-  if (!["Separator"].includes(item.inputType)) templateString = `<v-col${item.width ? ` cols="${item.width}"` : ""}${item.columnAttributes ? " " + item.columnAttributes : ""}>${templateString}</v-col>`;
-  if (["Header", "DocumentForm"].includes(item.inputType)) templateString = `</v-row><v-row dense>${templateString}</v-row><v-row dense>`;
   if (item.computedValue && item.variableName) {
-    templateString = `${templateString || ""}<FormHidden v-model="data.${item.variableName}" :item-value="data" :hook="()=>${item.computedValue}"/>`.trim();
+    templateString = `${templateString || ""}<FormHidden v-model="${dataVariable}.${item.variableName}" :item-value="data" :hook="()=>${item.computedValue}"/>`.trim();
   }
   return templateString || "";
 }
+function columnWrapTemplateItemString(item, parentTemplates, dataVariable = "data") {
+  let templateString = templateItemToString(item, parentTemplates, dataVariable);
+  if (!["Separator", "FormHidden"].includes(item.inputType)) templateString = `<v-col${item.width ? ` cols="${item.width}"` : ""}${item.columnAttributes ? " " + item.columnAttributes : ""}${item.customClass ? ` class="${item.customClass}"` : ""}${item.customStyle ? ` class="${item.customStyle}"` : ""}>${templateString}</v-col>`;
+  if (["Header", "DocumentForm"].includes(item.inputType)) templateString = `</v-row><v-row dense${item.customClass ? ` class="${item.customClass}"` : ""}${item.customStyle ? ` class="${item.customStyle}"` : ""}>${templateString}</v-row><v-row dense>`;
+  return templateString || "";
+}
 export function optionStringToChoiceObject(option) {
   if (typeof option === "string") {
     if (!/^[^'",]+(,[^'",]+)*$/.test(option.trim())) return [];
@@ -137,9 +144,9 @@ export function buildValidationRules(validationString) {
   });
   return `:rules="[${formatted.join(",")}]"`;
 }
-export function processDefaultTemplate(item, insideTemplate, optionString, validationRules) {
+export function processDefaultTemplate(item, insideTemplate, optionString, validationRules, dataVariable = "data") {
   if (!validationRules) validationRules = item.validationRules ? buildValidationRules(item.validationRules) || "" : "";
   const hasVariant = some([item.inputAttributes], (str) => includes(str, "variant"));
   const defaultAttributes = `${!hasVariant ? `variant="underlined"` : ""} :active=isReadonly`;
-  return `<${item.inputType} ${defaultAttributes} v-model="data.${item.variableName || ""}" label="${item.inputLabel || item.variableName || ""}"${item.inputAttributes ? " " + item.inputAttributes : ""}${optionString ? " " + optionString.trim() : ""}${validationRules ? " " + validationRules.trim() : ""}>${insideTemplate || ""}</${item.inputType}>`;
+  return `<${item.inputType} ${defaultAttributes} v-model="${dataVariable}.${item.variableName || ""}" label="${item.inputLabel || item.variableName || ""}"${item.inputAttributes ? " " + item.inputAttributes : ""}${optionString ? " " + optionString.trim() : ""}${validationRules ? " " + validationRules.trim() : ""}>${insideTemplate || ""}</${item.inputType}>`;
 }

package/dist/runtime/composables/document/templateFormHidden.d.ts

@@ -1,2 +1,2 @@
 import { type DocumentTemplateItem } from './template.js';
-export declare function processTemplateFormHidden(item: DocumentTemplateItem, parentTemplates: string | string[]): string;
+export declare function processTemplateFormHidden(item: DocumentTemplateItem, parentTemplates: string | string[], dataVariable?: string): string;

package/dist/runtime/composables/document/templateFormHidden.js

@@ -1,10 +1,13 @@
-export function processTemplateFormHidden(item, parentTemplates) {
+export function processTemplateFormHidden(item, parentTemplates, dataVariable = "data") {
   let formHiddenOptions = Object.assign({ itemValue: "", hook: "" }, item.inputOptions);
   if (formHiddenOptions.hook.trim()) {
     formHiddenOptions.hook = formHiddenOptions.hook.replace(/\n/g, ";").trim();
     if (!/^return\s/.test(formHiddenOptions.hook)) {
       formHiddenOptions.hook = `return ${formHiddenOptions.hook}`;
     }
+    formHiddenOptions.hook = ` :hook="(data,modelValue) => {${formHiddenOptions.hook}}"`;
+  } else {
+    formHiddenOptions.hook = "";
   }
-  return `<form-hidden v-model="data.${item.variableName || ""}" :item-value="${formHiddenOptions.itemValue || "data"}" :hook="(data,modelValue) => {${formHiddenOptions.hook}}"></form-hidden>`;
+  return `<form-hidden v-model="${dataVariable}.${item.variableName || ""}" :item-value="${formHiddenOptions.itemValue || "data"}"${formHiddenOptions.hook}></form-hidden>`;
 }

package/dist/runtime/composables/document/templateFormTable.d.ts

@@ -1,3 +1,4 @@
 import { type DocumentTemplateItem } from './template.js';
-export declare function processTemplateFormTable(item: DocumentTemplateItem, parentTemplates: string | string[]): string;
-export declare function processTemplateFormTableData(item: DocumentTemplateItem, parentTemplates: string | string[]): string;
+export declare function autoActionHeader(tableHeader: Record<string, any>[]): Record<string, any>[];
+export declare function templateToHeader(template: string | object | undefined): Record<string, any>[];
+export declare function processTemplateFormTable(item: DocumentTemplateItem, parentTemplates: string | string[], dataVariable: string): string;

package/dist/runtime/composables/document/templateFormTable.js

@@ -3,48 +3,44 @@ import {
   processDefaultTemplate,
   useDocumentTemplate
 } from "./template.js";
-export function processTemplateFormTable(item, parentTemplates) {
-  let tableOptions = Object.assign({ title: item.inputLabel || "", formTemplate: "" }, item.inputOptions);
-  let tableHeader = tableOptions.headers || [];
-  if (!tableHeader.some((h) => h.key === "action")) tableHeader.push({ title: "Action", key: "action", width: "100px" });
-  return processDefaultTemplate(item, `<template #form="{data,rules}">${useDocumentTemplate(tableOptions.formTemplate)}</template>`, `title="${tableOptions.title}" :headers='${escapeObjectForInlineBinding(tableHeader)}'`);
+import { cloneDeep, isString, isArray } from "lodash-es";
+export function autoActionHeader(tableHeader) {
+  let autoTableHeader = cloneDeep(tableHeader);
+  if (!autoTableHeader.some((h) => h.key === "action")) autoTableHeader.push({ title: "Action", key: "action", width: "100px" });
+  return autoTableHeader;
+}
+export function templateToHeader(template) {
+  if (isString(template)) {
+    try {
+      template = JSON.parse(template);
+    } catch (e) {
+    }
+  }
+  if (!isArray(template)) return [];
+  return template.map((item) => {
+    return {
+      title: item.inputLabel || item.label || item.title || item.variableName || item.key,
+      key: item.variableName || item.key,
+      width: item.width && item.width > 12 ? guessWidth(item.width) : void 0
+    };
+  });
 }
-export function processTemplateFormTableData(item, parentTemplates) {
+function guessWidth(width) {
+  if (width == 0) return void 0;
+  if (width >= 1 && width < 12) return (width * 100 / 12).toFixed(2) + "%";
+  if (width > 12 && width < 100) return width + "%";
+  else return width + "px";
+}
+export function processTemplateFormTable(item, parentTemplates, dataVariable) {
   let tableOptions = Object.assign({ title: item.inputLabel || "", formTemplate: "" }, item.inputOptions);
   let tableHeader = tableOptions.headers || [];
-  let tableItems = tableOptions.items || [];
-  let tableTemplate = "";
-  if (item.conditionalDisplay) {
-    item.inputAttributes = `${item.inputAttributes?.trim() || ""} v-if="${item.conditionalDisplay}"`.trim();
-  }
-  for (const header of tableHeader) {
-    const inputAttributes = header.conditionalDisplay ? `v-if="${header.conditionalDisplay}"`.trim() : "";
-    if (header.template) {
-      tableTemplate += `<template #item.${header.key}="{item}">
-                                <form-pad ${inputAttributes} template='${header.template}' v-model="item.${header.key}">
-                                </form-pad>
-                              </template>`;
-    }
-    if (header.headerTemplate) {
-      tableTemplate += `<template #header.${header.key}> 
-                                <form-pad ${inputAttributes} template='${header.headerTemplate}' 
-                                @update:model-value='(value) =>{
-                                                                    for (const t of data.${item.variableName}) {
-                                                                        t.${header.key} = {...value}
-                                                                        }
-                                                                   }'>
-                                </form-pad>
-                              </template>`;
+  if (!tableHeader.some((h) => h.key === "action")) tableHeader.push({ title: "Action", key: "action", width: "100px" });
+  let tableItemTemplate = "";
+  tableHeader.forEach((h) => {
+    if (h.template) {
+      tableItemTemplate += `\r
+<template #item.${h.key}="props">${h.template}</template>`;
     }
-  }
-  item.inputType = "FormTableData";
-  return processDefaultTemplate(item, tableTemplate, `title="${tableOptions.title}" 
-                :headers='${escapeObjectForInlineBinding(tableHeader)}' 
-                :items='${escapeObjectForInlineBinding(tableItems)}'
-                :insertable="false"
-                :importable="false"
-                :exportable="false"
-                :searchable="false"
-                hide-default-footer
-                `);
+  });
+  return processDefaultTemplate(item, `<template #form="{data,rules}">${useDocumentTemplate(tableOptions.formTemplate)}</template>${tableItemTemplate}`, `title="${tableOptions.title}" :headers='${escapeObjectForInlineBinding(tableHeader)}'`, void 0, dataVariable);
 }

package/dist/runtime/composables/document/templateFormTableData.d.ts

@@ -0,0 +1,2 @@
+import { type DocumentTemplateItem } from './template.js';
+export declare function processTemplateFormTableData(item: DocumentTemplateItem, parentTemplates: string | string[], dataVariable: string): string;

package/dist/runtime/composables/document/templateFormTableData.js

@@ -0,0 +1,21 @@
+import {
+  escapeObjectForInlineBinding,
+  processDefaultTemplate
+} from "./template.js";
+import { templateToHeader } from "./templateFormTable.js";
+export function processTemplateFormTableData(item, parentTemplates, dataVariable) {
+  let tableOptions = Object.assign({ title: item.inputLabel || "", dataTemplate: {}, itemTemplate: {} }, item.inputOptions);
+  let tableHeader = tableOptions.headers || [];
+  if (tableHeader.length === 0) {
+    tableHeader = templateToHeader(tableOptions.itemTemplate);
+  }
+  let tableItemTemplate = "";
+  tableHeader.forEach((h) => {
+    if (h.template) {
+      tableItemTemplate += `\r
+<template #item.${h.key}="props">${h.template}</template>`;
+    }
+  });
+  let disableApplyToAll = tableOptions.disableApplyToAll && tableOptions.disableApplyToAll == "partial" ? escapeObjectForInlineBinding(tableOptions.disableApplyToAllPartial?.split(",").map((h) => h.trim()) || []) : !!(tableOptions.disableApplyToAll && tableOptions.disableApplyToAll == "true");
+  return processDefaultTemplate(item, void 0, `title="${tableOptions.title}" :headers='${escapeObjectForInlineBinding(tableHeader)}' :itemsInitial='${escapeObjectForInlineBinding(tableOptions.items || [])}' :dataTemplate='${escapeObjectForInlineBinding(tableOptions.dataTemplate)}' :disableApplyToAll='${disableApplyToAll}'`, void 0, dataVariable);
+}

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

@@ -13,12 +13,12 @@ export declare function useGraphqlModel<T extends GraphqlModelProps>(props: T):
     search: import("vue").Ref<string | undefined, string | undefined>;
     setSearch: (keyword: string) => void;
     currentOptions: import("vue").Ref<any, any>;
-    operationCreate: import("vue").ComputedRef<import("../types/graphqlOperation").graphqlOperationObject<any, any>>;
-    operationUpdate: import("vue").ComputedRef<import("../types/graphqlOperation").graphqlOperationObject<any, any>>;
-    operationDelete: import("vue").ComputedRef<import("../types/graphqlOperation").graphqlOperationObject<any, any>>;
-    operationRead: import("vue").ComputedRef<import("../types/graphqlOperation").graphqlOperationObject<any, any>>;
-    operationReadPageable: import("vue").ComputedRef<import("../types/graphqlOperation").graphqlOperationObject<any, any>>;
-    operationSearch: import("vue").ComputedRef<import("../types/graphqlOperation").graphqlOperationObject<any, any>>;
+    operationCreate: import("vue").ComputedRef<import("~/.nuxt/types/graphqlOperation").graphqlOperationObject<any, any>>;
+    operationUpdate: import("vue").ComputedRef<import("~/.nuxt/types/graphqlOperation").graphqlOperationObject<any, any>>;
+    operationDelete: import("vue").ComputedRef<import("~/.nuxt/types/graphqlOperation").graphqlOperationObject<any, any>>;
+    operationRead: import("vue").ComputedRef<import("~/.nuxt/types/graphqlOperation").graphqlOperationObject<any, any>>;
+    operationReadPageable: import("vue").ComputedRef<import("~/.nuxt/types/graphqlOperation").graphqlOperationObject<any, any>>;
+    operationSearch: import("vue").ComputedRef<import("~/.nuxt/types/graphqlOperation").graphqlOperationObject<any, any>>;
     fields: import("vue").ComputedRef<(string | object)[]>;
     canServerPageable: import("vue").ComputedRef<boolean>;
     canServerSearch: import("vue").ComputedRef<boolean>;

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

@@ -4,10 +4,10 @@ export type GraphqlModelItemProps = Omit<GraphqlModelConfigProps, 'operationSear
 export declare function useGraphqlModelItem<T extends GraphqlModelItemProps>(props: T): {
     modelBy: import("vue").Ref<object | undefined, object | undefined>;
     item: import("vue").Ref<Record<string, any> | undefined, Record<string, any> | undefined>;
-    operationCreate: import("vue").ComputedRef<import("../types/graphqlOperation").graphqlOperationObject<any, any>>;
-    operationUpdate: import("vue").ComputedRef<import("../types/graphqlOperation").graphqlOperationObject<any, any>>;
-    operationDelete: import("vue").ComputedRef<import("../types/graphqlOperation").graphqlOperationObject<any, any>>;
-    operationRead: import("vue").ComputedRef<import("../types/graphqlOperation").graphqlOperationObject<any, any>>;
+    operationCreate: import("vue").ComputedRef<import("~/.nuxt/types/graphqlOperation").graphqlOperationObject<any, any>>;
+    operationUpdate: import("vue").ComputedRef<import("~/.nuxt/types/graphqlOperation").graphqlOperationObject<any, any>>;
+    operationDelete: import("vue").ComputedRef<import("~/.nuxt/types/graphqlOperation").graphqlOperationObject<any, any>>;
+    operationRead: import("vue").ComputedRef<import("~/.nuxt/types/graphqlOperation").graphqlOperationObject<any, any>>;
     fields: import("vue").ComputedRef<(string | object)[]>;
     canCreate: import("vue").ComputedRef<boolean>;
     canUpdate: import("vue").ComputedRef<boolean>;

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

@@ -12,10 +12,10 @@ export interface GraphqlModelConfigProps {
     fields?: Array<string | object>;
 }
 export declare function useGraphqlModelOperation<T extends GraphqlModelConfigProps>(props: T): {
-    operationCreate: import("vue").ComputedRef<graphqlOperationObject<any, any>>;
-    operationUpdate: import("vue").ComputedRef<graphqlOperationObject<any, any>>;
-    operationDelete: import("vue").ComputedRef<graphqlOperationObject<any, any>>;
-    operationRead: import("vue").ComputedRef<graphqlOperationObject<any, any>>;
-    operationReadPageable: import("vue").ComputedRef<graphqlOperationObject<any, any>>;
-    operationSearch: import("vue").ComputedRef<graphqlOperationObject<any, any>>;
+    operationCreate: import("vue").ComputedRef<import("~/.nuxt/types/graphqlOperation").graphqlOperationObject<any, any>>;
+    operationUpdate: import("vue").ComputedRef<import("~/.nuxt/types/graphqlOperation").graphqlOperationObject<any, any>>;
+    operationDelete: import("vue").ComputedRef<import("~/.nuxt/types/graphqlOperation").graphqlOperationObject<any, any>>;
+    operationRead: import("vue").ComputedRef<import("~/.nuxt/types/graphqlOperation").graphqlOperationObject<any, any>>;
+    operationReadPageable: import("vue").ComputedRef<import("~/.nuxt/types/graphqlOperation").graphqlOperationObject<any, any>>;
+    operationSearch: import("vue").ComputedRef<import("~/.nuxt/types/graphqlOperation").graphqlOperationObject<any, any>>;
 };

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

@@ -0,0 +1,44 @@
+import { type Ref } from 'vue';
+export interface LookupProps {
+    fuzzy?: boolean;
+    sortBy?: string | string[];
+    showCode?: boolean;
+    modelName: string;
+    modelBy?: Record<string, any>;
+    itemTitle: string;
+    itemValue: string;
+    fields?: Array<string | object>;
+    cache?: boolean | number;
+    serverSearch?: boolean;
+    serverSearchKey?: string;
+    searchSearchSort?: boolean;
+    serverSearchDebounce?: number;
+    serverSearchText?: string;
+    serverSearchLoadingText?: string;
+    filterKeys?: string | string[];
+    noDataText?: string;
+    placeholder?: string;
+    multiple?: boolean;
+    modelSelectedItem?: string;
+    modelSelectedItemBy?: Record<string, any>;
+    modelSelectedItemKey?: string;
+}
+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[]>;
+    searchData: Ref<string, string>;
+    isLoading: Ref<boolean, boolean>;
+    isErrorLoading: Ref<boolean, boolean>;
+    queryFields: import("vue").ComputedRef<any[]>;
+    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[]>;
+    syncSelectedFromModelValue: () => Promise<void>;
+    loadItems: () => Promise<void>;
+    applyFuzzy: () => void;
+};

package/dist/runtime/composables/lookupList.js

@@ -0,0 +1,194 @@
+import { computed, ref, 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 searchData = ref("");
+  const isLoading = ref(false);
+  const isErrorLoading = ref(false);
+  const queryFields = computed(() => {
+    let fieldsArray = [props.itemTitle, props.itemValue];
+    if (props.fields) fieldsArray = union(fieldsArray, props.fields);
+    return fieldsArray;
+  });
+  const computedFilterKeys = computed(() => {
+    if (props.filterKeys) return props.filterKeys;
+    return ["title", "raw." + props.itemValue];
+  });
+  const computedPlaceholder = computed(() => {
+    if (!props.serverSearch) return props.placeholder;
+    return isLoading.value ? props.serverSearchLoadingText : props.serverSearchText;
+  });
+  const computedNoDataText = computed(() => {
+    if (!props.serverSearch) return props.noDataText;
+    if (isLoading.value) return props.serverSearchLoadingText;
+    if (!searchData.value) return props.serverSearchText;
+    return props.noDataText;
+  });
+  let requestId = 0;
+  async function loadItems() {
+    if (!props.modelName) {
+      modelItems.value = [];
+      items.value = [];
+      return;
+    }
+    const id = ++requestId;
+    isLoading.value = true;
+    const variables = { ...props.modelBy || {} };
+    if (props.serverSearch && props.serverSearchKey) {
+      variables[props.serverSearchKey] = searchData.value;
+    }
+    try {
+      const result = await useGraphQlOperation(
+        "Query",
+        props.modelName,
+        queryFields.value,
+        variables,
+        props.cache
+      );
+      if (id !== requestId) return;
+      if (isArray(result)) {
+        modelItems.value = result;
+        items.value = result;
+        isErrorLoading.value = false;
+      } else {
+        isErrorLoading.value = true;
+        modelItems.value = [];
+        items.value = [];
+      }
+    } catch (e) {
+      if (id !== requestId) return;
+      isErrorLoading.value = true;
+      modelItems.value = [];
+      items.value = [];
+    } finally {
+      if (id === requestId) isLoading.value = false;
+    }
+  }
+  function applyFuzzy() {
+    if (!props.fuzzy) return;
+    if (isEmpty(searchData.value)) {
+      items.value = modelItems.value;
+      return;
+    }
+    const results = useFuzzy(searchData.value, modelItems.value, queryFields.value);
+    const output = [];
+    if (results.value?.length) {
+      for (let index = 0; index < results.value.length; index++) {
+        const result = results.value[index];
+        if (result?.item) output.push(result.item);
+      }
+    }
+    items.value = output;
+  }
+  const selectedItemsObject = ref([]);
+  async function syncSelectedFromModelValue() {
+    const modelValueData = selectedItems.value;
+    const values = castArray(modelValueData).filter(
+      (value) => value !== void 0 && value !== null && value !== ""
+    );
+    if (!values.length) {
+      emit("update:selectedObject", props.multiple ? [] : void 0);
+      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 stillMissing = [];
+    for (const value of missingValues) {
+      const localHit = modelItems.value.find((item) => item?.[props.itemValue] === value);
+      if (localHit) {
+        alreadyInObject.push(localHit);
+        haveSet.add(value);
+      } else {
+        stillMissing.push(value);
+      }
+    }
+    if (stillMissing.length && props.modelSelectedItem) {
+      try {
+        const key = props.modelSelectedItemKey || "id";
+        const variables = { ...props.modelSelectedItemBy || {} };
+        variables[key] = values;
+        const result = await useGraphQlOperation(
+          "Query",
+          props.modelSelectedItem,
+          queryFields.value,
+          variables,
+          props.cache
+        );
+        selectedItemsObject.value = castArray(result);
+      } catch {
+      }
+    } else {
+      selectedItemsObject.value = alreadyInObject;
+    }
+    emit("update:selectedObject", props.multiple ? selectedItemsObject.value : selectedItemsObject.value[0]);
+  }
+  watch(
+    () => [
+      props.modelName,
+      props.serverSearch,
+      props.serverSearchKey,
+      props.cache,
+      props.modelBy,
+      queryFields.value
+    ],
+    () => loadItems(),
+    { immediate: true, deep: true }
+  );
+  watchDebounced(
+    searchData,
+    () => {
+      if (props.serverSearch) loadItems();
+      else applyFuzzy();
+    },
+    { debounce: props.serverSearch ? props.serverSearchDebounce ?? 500 : 300, maxWait: 1500 }
+  );
+  watch(
+    () => modelItems.value,
+    () => {
+      if (!props.serverSearch) applyFuzzy();
+    }
+  );
+  watch(
+    () => selectedItems.value,
+    () => {
+      syncSelectedFromModelValue();
+    },
+    { immediate: true, deep: 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);
+    for (const selectedItem of selectedItemsObject.value || []) {
+      if (!baseItems.find((existingItem) => existingItem[props.itemValue] === selectedItem[props.itemValue])) {
+        baseItems.push(selectedItem);
+      }
+    }
+    return baseItems;
+  });
+  return {
+    // state
+    modelItems,
+    items,
+    searchData,
+    isLoading,
+    isErrorLoading,
+    // derived
+    queryFields,
+    computedFilterKeys,
+    computedPlaceholder,
+    computedNoDataText,
+    computedItems,
+    // selection
+    selectedItemsObject,
+    syncSelectedFromModelValue,
+    // actions (exposed for testing if needed)
+    loadItems,
+    applyFuzzy
+  };
+}