@ramathibodi/nuxt-commons 4.0.2 → 4.0.3

package/README.md

@@ -30,6 +30,41 @@ export default defineNuxtConfig({
 
 Supported Nuxt versions: `^3.16.0 || ^4.0.0`
 
+## Plugin Initialization (Required)
+
+After registering the module, apps **must** create a Nuxt plugin that provides `$appGraphql` and `$appAuthentication`. This wires up the module's internal bridge system so that `ModelTable`, `ModelSelect`, `useGraphQl()`, and other model-driven components can resolve GraphQL operations and access authentication state.
+
+```ts
+// app/plugins/graphql.ts (or any plugin name)
+// graphqlOperation, graphqlType, graphqlInputType, scalarType are
+// auto-imported from your generated composables/graphqlObject.ts.
+// useAuthentication is auto-imported from your app/composables/authentication.ts.
+
+export default defineNuxtPlugin(() => {
+  return {
+    provide: {
+      appAuthentication: () => useAuthentication(),
+      appGraphql: {
+        scalarType,
+        graphqlType,
+        graphqlInputType,
+        graphqlOperation,
+      },
+    },
+  }
+})
+```
+
+**`$appGraphql`** — Provides generated GraphQL operation metadata (scalar types, object types, input types, and operations) so `useGraphqlBridge()` and `useGraphqlModelOperation()` inside the module can resolve queries/mutations by name.
+
+**`$appAuthentication`** — Provides a factory function returning the app's authentication state (`token`, `hasPermission`, `login`, `logout`, etc.) so the module's `useAuthentication()` bridge can access auth context for API calls and permission checks.
+
+Prerequisites:
+1. Run your GraphQL codegen to generate `composables/graphqlObject.ts` and `types/graphql.ts`.
+2. Implement `useAuthentication()` in your app returning at minimum `{ token, hasPermission, login, logout }`.
+
+See [`playground/plugins/nuxtCommon.ts`](playground/plugins/nuxtCommon.ts) for a working example.
+
 ## What The Module Registers
 
 Configured in `src/module.ts`:

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": "^4.3.1"
   },
-  "version": "4.0.2",
+  "version": "4.0.3",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/runtime/components/BarcodeReader.vue

@@ -58,10 +58,11 @@ function scanImageFile(selectedFile) {
   const reader = new FileReader();
   reader.onload = async (event) => {
     try {
-      const result = await barcodeReader.decodeFromImageUrl(event.target?.result);
+      const imageReader = new BrowserMultiFormatReader();
+      const result = await imageReader.decodeFromImageUrl(event.target?.result);
       emit("decode", result.getText());
     } catch (e) {
-      void e;
+      emit("error", e);
     }
   };
   reader.readAsDataURL(scanImageSingleFile);

package/dist/runtime/components/form/ActionPad.d.vue.ts

@@ -74,8 +74,8 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     }>;
     formPad: import("vue").Ref<any, any>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    update: (...args: any[]) => void;
     create: (...args: any[]) => void;
+    update: (...args: any[]) => void;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<Props>, {
     saveCaption: string;
     cancelCaption: string;
@@ -83,8 +83,8 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     showTitle: boolean;
     skipValidation: boolean;
 }>>> & Readonly<{
-    onUpdate?: ((...args: any[]) => any) | undefined;
     onCreate?: ((...args: any[]) => any) | undefined;
+    onUpdate?: ((...args: any[]) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/form/ActionPad.vue.d.ts

@@ -74,8 +74,8 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     }>;
     formPad: import("vue").Ref<any, any>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    update: (...args: any[]) => void;
     create: (...args: any[]) => void;
+    update: (...args: any[]) => void;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<Props>, {
     saveCaption: string;
     cancelCaption: string;
@@ -83,8 +83,8 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     showTitle: boolean;
     skipValidation: boolean;
 }>>> & Readonly<{
-    onUpdate?: ((...args: any[]) => any) | undefined;
     onCreate?: ((...args: any[]) => any) | undefined;
+    onUpdate?: ((...args: any[]) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/form/DateTime.vue

@@ -120,16 +120,22 @@ watch(() => props.modelValue, () => {
   pauseEmit.value = true;
   if (!props.modelValue) {
     reset();
+    nextTick(() => {
+      pauseEmit.value = false;
+    });
   } else {
     const dateTime = Datetime().fromString(props.modelValue);
     if (dateTime.luxonDateTime.isValid) {
       datePart.value = dateTime.toFormat("yyyy-MM-dd");
       timePart.value = dateTime.toFormat("HH:mm:ss");
+      pauseEmit.value = false;
     } else {
       reset();
+      nextTick(() => {
+        pauseEmit.value = false;
+      });
     }
   }
-  pauseEmit.value = false;
 }, { immediate: true });
 </script>
 

package/dist/runtime/components/form/Dialog.d.vue.ts

@@ -45,13 +45,13 @@ type __VLS_Slots = {} & {
     action?: (props: typeof __VLS_69) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    update: (...args: any[]) => void;
     create: (...args: any[]) => void;
+    update: (...args: any[]) => void;
     "update:modelValue": (value: boolean) => void;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-    onUpdate?: ((...args: any[]) => any) | undefined;
     onCreate?: ((...args: any[]) => any) | undefined;
+    onUpdate?: ((...args: any[]) => any) | undefined;
 }>, {
     readonly: boolean;
     saveCaption: string;

package/dist/runtime/components/form/Dialog.vue.d.ts

@@ -45,13 +45,13 @@ type __VLS_Slots = {} & {
     action?: (props: typeof __VLS_69) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    update: (...args: any[]) => void;
     create: (...args: any[]) => void;
+    update: (...args: any[]) => void;
     "update:modelValue": (value: boolean) => void;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-    onUpdate?: ((...args: any[]) => any) | undefined;
     onCreate?: ((...args: any[]) => any) | undefined;
+    onUpdate?: ((...args: any[]) => any) | undefined;
 }>, {
     readonly: boolean;
     saveCaption: string;

package/dist/runtime/components/form/EditPad.d.vue.ts

@@ -73,8 +73,8 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     }>;
     formPad: import("vue").Ref<any, any>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    update: (...args: any[]) => void;
     create: (...args: any[]) => void;
+    update: (...args: any[]) => void;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<Props>, {
     saveCaption: string;
     cancelCaption: string;
@@ -82,8 +82,8 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     showTitle: boolean;
     skipValidation: boolean;
 }>>> & Readonly<{
-    onUpdate?: ((...args: any[]) => any) | undefined;
     onCreate?: ((...args: any[]) => any) | undefined;
+    onUpdate?: ((...args: any[]) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/form/EditPad.vue.d.ts

@@ -73,8 +73,8 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     }>;
     formPad: import("vue").Ref<any, any>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    update: (...args: any[]) => void;
     create: (...args: any[]) => void;
+    update: (...args: any[]) => void;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<Props>, {
     saveCaption: string;
     cancelCaption: string;
@@ -82,8 +82,8 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     showTitle: boolean;
     skipValidation: boolean;
 }>>> & Readonly<{
-    onUpdate?: ((...args: any[]) => any) | undefined;
     onCreate?: ((...args: any[]) => any) | undefined;
+    onUpdate?: ((...args: any[]) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/form/System.vue

@@ -13,7 +13,7 @@ watch(() => props.templateId, (newValue) => {
   }).catch((_error) => {
     currentTemplate.value = {};
   });
-});
+}, { immediate: true });
 </script>
 
 <template>

package/dist/runtime/components/label/Field.d.vue.ts

@@ -25,8 +25,8 @@ declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, i
     size: "large" | "medium";
     label: string;
     horizontal: boolean;
-    notFoundText: string;
     truncate: boolean;
+    notFoundText: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/label/Field.vue.d.ts

@@ -25,8 +25,8 @@ declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, i
     size: "large" | "medium";
     label: string;
     horizontal: boolean;
-    notFoundText: string;
     truncate: boolean;
+    notFoundText: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

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

@@ -11,7 +11,10 @@ interface Props extends /* @vue-ignore */ InstanceType<typeof VAutocomplete['$pr
  * Public props accepted by ModelAutocomplete.
  * Document each prop field with intent, defaults, and side effects for clear generated docs.
  */
-type __VLS_Props = Props & LookupProps & PersistSlimProps;
+interface ApiProp {
+    api?: boolean;
+}
+type __VLS_Props = Props & LookupProps & PersistSlimProps & ApiProp;
 type __VLS_ModelProps = {
     modelValue?: any;
 };
@@ -33,6 +36,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     activeValue: string;
     hideInactiveInList: boolean;
     preventSelectingInactive: boolean;
+    api: boolean;
 }>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: any) => any;
 } & {
@@ -50,6 +54,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     activeValue: string;
     hideInactiveInList: boolean;
     preventSelectingInactive: boolean;
+    api: boolean;
 }>>> & Readonly<{
     "onUpdate:modelValue"?: ((value: any) => any) | undefined;
     "onUpdate:selectedObject"?: ((object: any) => any) | undefined;

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

@@ -1,6 +1,7 @@
 <script setup>
 import { VAutocomplete } from "vuetify/components/VAutocomplete";
 import { useLookupList } from "../../composables/lookupList";
+import { useApiLookupList } from "../../composables/apiLookupList";
 import { useLocalStorageModel } from "../../composables/localStorageModel";
 const props = defineProps({
   serverSearch: { type: Boolean, required: false, default: false },
@@ -37,7 +38,8 @@ const props = defineProps({
   persistTtl: { type: Number, required: false },
   persistEncrypt: { type: Boolean, required: false },
   persistSecret: { type: String, required: false },
-  persistAlwaysHydrate: { type: Boolean, required: false }
+  persistAlwaysHydrate: { type: Boolean, required: false },
+  api: { type: Boolean, required: false, default: false }
 });
 const emit = defineEmits(["update:selectedObject"]);
 const selectedItems = defineModel({ type: null });
@@ -52,7 +54,7 @@ const {
   isErrorLoading,
   onUpdateModelValue
   // ✅ moved into composable
-} = useLookupList(props, emit, selectedItems);
+} = props.api ? useApiLookupList(props, emit, selectedItems) : useLookupList(props, emit, selectedItems);
 </script>
 
 <template>
@@ -77,12 +79,12 @@ const {
       <slot :name="name" v-bind="slotData || {}" />
     </template>
 
-    <template v-if="!$slots.item" #item="{ props: itemProps, item }">
-      <v-list-item v-bind="itemProps" :title="(props.showCode ? item.value + '-' : '') + item.title" />
+    <template v-if="!$slots.item" #item="{ props: itemProps }">
+      <v-list-item v-bind="itemProps" :title="(props.showCode ? itemProps.value + '-' : '') + itemProps.title" />
     </template>
 
-    <template v-if="!$slots.selection && props.showCode" #selection="{ item }">
-      {{ item.value + "-" + item.title }}
+    <template v-if="!$slots.selection && props.showCode" #selection="{ internalItem }">
+      {{ internalItem.value + "-" + internalItem.title }}
     </template>
 
     <template v-if="isErrorLoading" #append>

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

@@ -11,7 +11,10 @@ interface Props extends /* @vue-ignore */ InstanceType<typeof VAutocomplete['$pr
  * Public props accepted by ModelAutocomplete.
  * Document each prop field with intent, defaults, and side effects for clear generated docs.
  */
-type __VLS_Props = Props & LookupProps & PersistSlimProps;
+interface ApiProp {
+    api?: boolean;
+}
+type __VLS_Props = Props & LookupProps & PersistSlimProps & ApiProp;
 type __VLS_ModelProps = {
     modelValue?: any;
 };
@@ -33,6 +36,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     activeValue: string;
     hideInactiveInList: boolean;
     preventSelectingInactive: boolean;
+    api: boolean;
 }>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: any) => any;
 } & {
@@ -50,6 +54,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     activeValue: string;
     hideInactiveInList: boolean;
     preventSelectingInactive: boolean;
+    api: boolean;
 }>>> & Readonly<{
     "onUpdate:modelValue"?: ((value: any) => any) | undefined;
     "onUpdate:selectedObject"?: ((object: any) => any) | undefined;

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

@@ -11,7 +11,10 @@ interface Props extends /* @vue-ignore */ InstanceType<typeof VCombobox['$props'
  * Public props accepted by ModelCombobox.
  * Document each prop field with intent, defaults, and side effects for clear generated docs.
  */
-type __VLS_Props = Props & LookupProps & PersistSlimProps;
+interface ApiProp {
+    api?: boolean;
+}
+type __VLS_Props = Props & LookupProps & PersistSlimProps & ApiProp;
 type __VLS_ModelProps = {
     modelValue?: any;
 };
@@ -33,6 +36,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     activeValue: string;
     hideInactiveInList: boolean;
     preventSelectingInactive: boolean;
+    api: boolean;
 }>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: any) => any;
 } & {
@@ -50,6 +54,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     activeValue: string;
     hideInactiveInList: boolean;
     preventSelectingInactive: boolean;
+    api: boolean;
 }>>> & Readonly<{
     "onUpdate:modelValue"?: ((value: any) => any) | undefined;
     "onUpdate:selectedObject"?: ((object: any) => any) | undefined;

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

@@ -1,6 +1,7 @@
 <script setup>
 import { VCombobox } from "vuetify/components/VCombobox";
 import { useLookupList } from "../../composables/lookupList";
+import { useApiLookupList } from "../../composables/apiLookupList";
 import { useLocalStorageModel } from "../../composables/localStorageModel";
 const props = defineProps({
   serverSearch: { type: Boolean, required: false, default: false },
@@ -37,7 +38,8 @@ const props = defineProps({
   persistTtl: { type: Number, required: false },
   persistEncrypt: { type: Boolean, required: false },
   persistSecret: { type: String, required: false },
-  persistAlwaysHydrate: { type: Boolean, required: false }
+  persistAlwaysHydrate: { type: Boolean, required: false },
+  api: { type: Boolean, required: false, default: false }
 });
 const emit = defineEmits(["update:selectedObject"]);
 const selectedItems = defineModel({ type: null });
@@ -52,7 +54,7 @@ const {
   isErrorLoading,
   onUpdateModelValue
   // ✅ from composable
-} = useLookupList(props, emit, selectedItems);
+} = props.api ? useApiLookupList(props, emit, selectedItems) : useLookupList(props, emit, selectedItems);
 </script>
 
 <template>
@@ -78,12 +80,12 @@ const {
       <slot :name="name" v-bind="slotData || {}" />
     </template>
 
-    <template v-if="!$slots.item" #item="{ props: itemProps, item }">
-      <v-list-item v-bind="itemProps" :title="(props.showCode ? item.value + '-' : '') + item.title" />
+    <template v-if="!$slots.item" #item="{ props: itemProps }">
+      <v-list-item v-bind="itemProps" :title="(props.showCode ? itemProps.value + '-' : '') + itemProps.title" />
     </template>
 
-    <template v-if="!$slots.selection && props.showCode" #selection="{ item }">
-      {{ item.value + "-" + item.title }}
+    <template v-if="!$slots.selection && props.showCode" #selection="{ internalItem }">
+      {{ internalItem.value + "-" + internalItem.title }}
     </template>
 
     <template v-if="isErrorLoading" #append>

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

@@ -11,7 +11,10 @@ interface Props extends /* @vue-ignore */ InstanceType<typeof VCombobox['$props'
  * Public props accepted by ModelCombobox.
  * Document each prop field with intent, defaults, and side effects for clear generated docs.
  */
-type __VLS_Props = Props & LookupProps & PersistSlimProps;
+interface ApiProp {
+    api?: boolean;
+}
+type __VLS_Props = Props & LookupProps & PersistSlimProps & ApiProp;
 type __VLS_ModelProps = {
     modelValue?: any;
 };
@@ -33,6 +36,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     activeValue: string;
     hideInactiveInList: boolean;
     preventSelectingInactive: boolean;
+    api: boolean;
 }>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: any) => any;
 } & {
@@ -50,6 +54,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     activeValue: string;
     hideInactiveInList: boolean;
     preventSelectingInactive: boolean;
+    api: boolean;
 }>>> & Readonly<{
     "onUpdate:modelValue"?: ((value: any) => any) | undefined;
     "onUpdate:selectedObject"?: ((object: any) => any) | undefined;

package/dist/runtime/components/model/Pad.d.vue.ts

@@ -4,6 +4,7 @@ interface Props extends /* @vue-ignore */ InstanceType<typeof EditPad['$props']>
     title?: string;
     saveCaption?: string;
     cancelCaption?: string;
+    api?: boolean;
 }
 /**
  * Public props accepted by ModelPad.
@@ -30,19 +31,21 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     fields: () => string[];
     saveCaption: string;
     cancelCaption: string;
+    api: boolean;
 }>>, {
     operation: any;
     formPad: any;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    update: (...args: any[]) => void;
     create: (...args: any[]) => void;
+    update: (...args: any[]) => void;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<__VLS_Props>, {
     fields: () => string[];
     saveCaption: string;
     cancelCaption: string;
+    api: boolean;
 }>>> & Readonly<{
-    onUpdate?: ((...args: any[]) => any) | undefined;
     onCreate?: ((...args: any[]) => any) | undefined;
+    onUpdate?: ((...args: any[]) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

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

@@ -1,6 +1,7 @@
 <script setup>
 import { computed, useTemplateRef } from "vue";
 import { useGraphqlModelItem } from "../../composables/graphqlModelItem";
+import { useApiModelItem } from "../../composables/apiModelItem";
 import EditPad from "../form/EditPad.vue";
 import { useDialog } from "../../composables/dialog";
 defineOptions({
@@ -10,6 +11,7 @@ const props = defineProps({
   title: { type: String, required: false },
   saveCaption: { type: String, required: false, default: "\u0E1A\u0E31\u0E19\u0E17\u0E36\u0E01" },
   cancelCaption: { type: String, required: false, default: "\u0E22\u0E01\u0E40\u0E25\u0E34\u0E01" },
+  api: { type: Boolean, required: false, default: false },
   modelName: { type: String, required: true },
   modelKey: { type: String, required: false },
   modelBy: { type: Object, required: false },
@@ -28,7 +30,7 @@ const {
   updateItem,
   reload,
   isLoading
-} = useGraphqlModelItem(props);
+} = props.api ? useApiModelItem(props) : useGraphqlModelItem(props);
 const editPad = useTemplateRef("editPadRef");
 const canSave = computed(() => {
   return canCreate.value && editPad.value?.operation?.isCreating?.value || canUpdate.value;

package/dist/runtime/components/model/Pad.vue.d.ts

@@ -4,6 +4,7 @@ interface Props extends /* @vue-ignore */ InstanceType<typeof EditPad['$props']>
     title?: string;
     saveCaption?: string;
     cancelCaption?: string;
+    api?: boolean;
 }
 /**
  * Public props accepted by ModelPad.
@@ -30,19 +31,21 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     fields: () => string[];
     saveCaption: string;
     cancelCaption: string;
+    api: boolean;
 }>>, {
     operation: any;
     formPad: any;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    update: (...args: any[]) => void;
     create: (...args: any[]) => void;
+    update: (...args: any[]) => void;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<__VLS_Props>, {
     fields: () => string[];
     saveCaption: string;
     cancelCaption: string;
+    api: boolean;
 }>>> & Readonly<{
-    onUpdate?: ((...args: any[]) => any) | undefined;
     onCreate?: ((...args: any[]) => any) | undefined;
+    onUpdate?: ((...args: any[]) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

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

@@ -11,7 +11,10 @@ interface Props extends /* @vue-ignore */ InstanceType<typeof VSelect['$props']>
  * Public props accepted by ModelSelect.
  * Document each prop field with intent, defaults, and side effects for clear generated docs.
  */
-type __VLS_Props = Props & StaticLookupProps & PersistSlimProps;
+interface ApiProp {
+    api?: boolean;
+}
+type __VLS_Props = Props & StaticLookupProps & PersistSlimProps & ApiProp;
 type __VLS_ModelProps = {
     modelValue?: any;
 };
@@ -28,6 +31,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     activeValue: string;
     hideInactiveInList: boolean;
     preventSelectingInactive: boolean;
+    api: boolean;
 }>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: any) => any;
 } & {
@@ -40,6 +44,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     activeValue: string;
     hideInactiveInList: boolean;
     preventSelectingInactive: boolean;
+    api: boolean;
 }>>> & Readonly<{
     "onUpdate:modelValue"?: ((value: any) => any) | undefined;
     "onUpdate:selectedObject"?: ((object: any) => any) | undefined;

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

@@ -1,6 +1,7 @@
 <script setup>
 import { VSelect } from "vuetify/components/VSelect";
 import { useLookupList } from "../../composables/lookupList";
+import { useApiLookupList } from "../../composables/apiLookupList";
 import { useLocalStorageModel } from "../../composables/localStorageModel";
 const props = defineProps({
   fuzzy: { type: Boolean, required: false, default: false },
@@ -28,7 +29,8 @@ const props = defineProps({
   persistTtl: { type: Number, required: false },
   persistEncrypt: { type: Boolean, required: false },
   persistSecret: { type: String, required: false },
-  persistAlwaysHydrate: { type: Boolean, required: false }
+  persistAlwaysHydrate: { type: Boolean, required: false },
+  api: { type: Boolean, required: false, default: false }
 });
 const emit = defineEmits(["update:selectedObject"]);
 const selectedItems = defineModel({ type: null });
@@ -39,7 +41,7 @@ const {
   isLoading,
   isErrorLoading,
   onUpdateModelValue
-} = useLookupList(props, emit, selectedItems);
+} = props.api ? useApiLookupList(props, emit, selectedItems) : useLookupList(props, emit, selectedItems);
 </script>
 
 <template>
@@ -61,12 +63,12 @@ const {
       <slot :name="name" v-bind="slotData || {}" />
     </template>
 
-    <template v-if="!$slots.item" #item="{ props: itemProps, item }">
-      <v-list-item v-bind="itemProps" :title="(props.showCode ? item.value + '-' : '') + item.title" />
+    <template v-if="!$slots.item" #item="{ props: itemProps }">
+      <v-list-item v-bind="itemProps" :title="(props.showCode ? itemProps.value + '-' : '') + itemProps.title" />
     </template>
 
-    <template v-if="!$slots.selection && props.showCode" #selection="{ item }">
-      {{ item.value + "-" + item.title }}
+    <template v-if="!$slots.selection && props.showCode" #selection="{ internalItem }">
+      {{ internalItem.value + "-" + internalItem.title }}
     </template>
 
     <template v-if="isErrorLoading" #append>

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

@@ -11,7 +11,10 @@ interface Props extends /* @vue-ignore */ InstanceType<typeof VSelect['$props']>
  * Public props accepted by ModelSelect.
  * Document each prop field with intent, defaults, and side effects for clear generated docs.
  */
-type __VLS_Props = Props & StaticLookupProps & PersistSlimProps;
+interface ApiProp {
+    api?: boolean;
+}
+type __VLS_Props = Props & StaticLookupProps & PersistSlimProps & ApiProp;
 type __VLS_ModelProps = {
     modelValue?: any;
 };
@@ -28,6 +31,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     activeValue: string;
     hideInactiveInList: boolean;
     preventSelectingInactive: boolean;
+    api: boolean;
 }>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: any) => any;
 } & {
@@ -40,6 +44,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     activeValue: string;
     hideInactiveInList: boolean;
     preventSelectingInactive: boolean;
+    api: boolean;
 }>>> & Readonly<{
     "onUpdate:modelValue"?: ((value: any) => any) | undefined;
     "onUpdate:selectedObject"?: ((object: any) => any) | undefined;