@hostlink/nuxt-light 1.75.0 → 1.77.2

package/README.md

@@ -55,6 +55,135 @@ export default defineNuxtConfig({
 
 That's it! You can now use nuxt-light in your Nuxt app ✨
 
+## API clients
+
+`nuxt-light` supports multiple Light API endpoints. The client named `auth` is
+always the default: when a component or composable does not specify a client,
+the request is sent to `auth`.
+
+Configure named clients in `nuxt.config.ts`:
+
+```ts
+export default defineNuxtConfig({
+  runtimeConfig: {
+    public: {
+      light: {
+        clients: {
+          auth: {
+            baseURL: 'https://auth.example.com/graphql',
+          },
+          business: {
+            baseURL: 'https://business.example.com/graphql',
+            audience: 'business-api',
+          },
+          infra: {
+            baseURL: 'https://infra.example.com/graphql',
+            audience: 'infra-api',
+          },
+        },
+      },
+    },
+  },
+  modules: [
+    '@hostlink/nuxt-light',
+  ],
+})
+```
+
+A client can also be configured with a URL string:
+
+```ts
+clients: {
+  auth: '/auth-api/',
+  business: '/business-api/',
+}
+```
+
+Clients with an `audience` obtain a short-lived audience token lazily from the
+default `auth` client. The token is cached by that client, refreshed shortly
+before expiry, and sent as a Bearer token automatically:
+
+```http
+Authorization: Bearer <audience-access-token>
+```
+
+Components and composables do not need to fetch or attach tokens themselves.
+For example, the first request made by this table automatically requests a
+`business-api` token from Auth:
+
+```vue
+<L-Table client="business" model-name="Order" />
+```
+
+### Backwards-compatible single endpoint
+
+The existing `public.apiBase` setting is still supported. When no named
+`auth` client is configured, `apiBase` is registered as the `auth` client:
+
+```ts
+export default defineNuxtConfig({
+  runtimeConfig: {
+    public: {
+      apiBase: '/api/',
+    },
+  },
+})
+```
+
+If neither setting is provided, the default Auth API URL is `/api/`.
+
+### Selecting a client
+
+Use `useLightClient()` without an argument to get the Auth API client:
+
+```ts
+const auth = useLightClient()
+const business = useLightClient('business')
+
+await auth.auth.login(username, password)
+await business.query({
+  app: {
+    orders: {
+      order_id: true,
+    },
+  },
+})
+```
+
+The standard composables also default to `auth`:
+
+```ts
+await q(query)                         // auth
+await q(query, 'business')             // business
+
+model('User')                          // auth
+model('Order', 'business')             // business
+
+collect('User', fields)                // auth
+collect('Order', fields, 'business')   // business
+
+await m('updateUser', args, fields)                    // auth
+await m('updateOrder', args, fields, 'business')       // business
+```
+
+`<L-Table>` uses `auth` unless its `client` prop is provided:
+
+```vue
+<template>
+  <!-- Uses the default auth client -->
+  <L-Table model-name="User" />
+
+  <!-- Uses the business client -->
+  <L-Table
+    client="business"
+    model-name="Order"
+  />
+</template>
+```
+
+An unknown client name throws an explicit configuration error instead of
+silently sending the request to another endpoint.
+
 ## Development
 
 ```bash
@@ -119,4 +248,4 @@ nuxt.config.ts
       ]
     }
   }
-```
+```

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "light",
   "configKey": "light",
-  "version": "1.75.0",
+  "version": "1.77.2",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/module.mjs

@@ -220,7 +220,6 @@ const module$1 = defineNuxtModule({
     });
     addImports({ name: "isGranted", from: "@hostlink/light" });
     addImports({ name: "getGrantedRights", from: "@hostlink/light" });
-    addImports({ name: "query", as: "q", from: "@hostlink/light" });
     addImports({ name: "mutation", from: "@hostlink/light" });
     addImports({ name: "query", from: "@hostlink/light" });
     await addComponentsDir({

package/dist/runtime/components/L/AppMain.vue

@@ -5,7 +5,7 @@ import { useQuasar, setCssVar, getCssVar } from "quasar";
 import { useI18n } from "vue-i18n";
 import { ref, computed, reactive, provide, watch, toRaw, onMounted } from "vue";
 import { useRuntimeConfig } from "nuxt/app";
-import { logout } from "@hostlink/light";
+import useLightClient from "../../composables/useLightClient";
 import { filterMenuItems } from "../../utils/filterMenuItems";
 const emits = defineEmits(["logout"]);
 defineProps({
@@ -249,7 +249,7 @@ if (route.fullPath == "/" && my.default_page) {
   router.push(my.default_page);
 }
 const onLogout = async () => {
-  await logout();
+  await useLightClient().auth.logout();
   emits("logout");
 };
 </script>

package/dist/runtime/components/L/Login.vue

@@ -2,7 +2,7 @@
 import { ref, reactive, onMounted, resolveComponent } from "vue";
 import { useQuasar } from "quasar";
 import { useHead } from "#imports";
-import { getApiClient, changeExpiredPassword, login } from "@hostlink/light";
+import { getApiClient } from "@hostlink/light";
 const api = getApiClient();
 import { useI18n } from "vue-i18n";
 const { t } = useI18n();
@@ -42,7 +42,7 @@ const passwordExpiredProcess = (username, password) => {
     persistent: true
   }).onOk(async (newPassword) => {
     try {
-      await changeExpiredPassword(username, password, newPassword);
+      await api.auth.changeExpiredPassword(username, password, newPassword);
       $q.notify({
         message: t("Your password has been changed successfully, please login again"),
         color: "positive",
@@ -81,7 +81,7 @@ const submit = async () => {
   if (await form1.value.validate()) {
     try {
       loading.value = true;
-      await login(data.username, data.password, data.code);
+      await api.auth.login(data.username, data.password, data.code);
       emits("login");
     } catch (e) {
       data.code = "";

package/dist/runtime/components/L/Table.d.vue.ts

@@ -27,6 +27,7 @@ export type LTableColumn = QTableColumn & {
     autoWidth?: boolean;
 };
 export type LTableProps = QTableProps & {
+    client?: string;
     columns?: Array<LTableColumn>;
     actions?: Array<'view' | 'edit' | 'delete' | 'update'>;
     sortBy?: string;
@@ -127,6 +128,7 @@ declare const __VLS_base: import("vue").DefineComponent<LTableProps, {
     rowsPerPageLabel: string;
     rowsPerPageOptions: readonly any[];
     selection: "none" | "single" | "multiple";
+    client: string;
     searchable: boolean;
     canExpandRow: (row: any) => boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/L/Table.vue

@@ -5,8 +5,9 @@ import { ref, computed, onMounted, useSlots, watch, useAttrs } from "vue";
 import useLight from "../../composables/useLight";
 import { useLightTableDefaults } from "../../composables/useLightProps";
 import model from "../../composables/model";
+import useLightClient from "../../composables/useLightClient";
 import { toQuery } from "@hostlink/light";
-import { list, navigateTo } from "#imports";
+import { navigateTo } from "#imports";
 import { useI18n } from "vue-i18n";
 import { useStorage, useSessionStorage } from "@vueuse/core";
 import { useRoute } from "#imports";
@@ -98,6 +99,7 @@ const props = defineProps({
   "onUpdate:selected": { type: Function, required: false },
   "onUpdate:expanded": { type: Function, required: false },
   onVirtualScroll: { type: Function, required: false },
+  client: { type: String, required: false, default: "auth" },
   actions: { type: Array, required: false, default: () => [] },
   sortBy: { type: String, required: false },
   modelName: { type: null, required: false },
@@ -138,7 +140,7 @@ if (!saveFilters.value) {
 defineOptions({ inheritAttrs: false });
 const light = useLight();
 const vAttrs = useAttrs();
-const L_KEYS = ["actions", "sortBy", "modelName", "searchable", "onRequestData", "addComponent", "addComponentProps", "name", "searchStyle", "canExpandRow"];
+const L_KEYS = ["client", "actions", "sortBy", "modelName", "searchable", "onRequestData", "addComponent", "addComponentProps", "name", "searchStyle", "canExpandRow"];
 const base = useLightTableDefaults(props, vAttrs, L_KEYS);
 const pagination = ref(props.pagination);
 if (props.rowsPerPageOptions[0] == 0) {
@@ -342,7 +344,7 @@ const onLocalRequest = async (p) => {
       }
       loading.value = true;
       try {
-        let l = list(model2, localFields);
+        let l = useLightClient(props.client).list(model2, localFields);
         l = l.filters(localFilters);
         if (sort) {
           l = l.sort(sort);
@@ -431,7 +433,7 @@ const ss = computed(() => Object.keys(slots));
 const onDelete = async (id) => {
   if (modelName.value == null) return;
   try {
-    await model(modelName.value).delete(id);
+    await model(modelName.value, props.client).delete(id);
   } catch (e) {
     $q.notify({
       message: e.message,

package/dist/runtime/components/L/Table.vue.d.ts

@@ -27,6 +27,7 @@ export type LTableColumn = QTableColumn & {
     autoWidth?: boolean;
 };
 export type LTableProps = QTableProps & {
+    client?: string;
     columns?: Array<LTableColumn>;
     actions?: Array<'view' | 'edit' | 'delete' | 'update'>;
     sortBy?: string;
@@ -127,6 +128,7 @@ declare const __VLS_base: import("vue").DefineComponent<LTableProps, {
     rowsPerPageLabel: string;
     rowsPerPageOptions: readonly any[];
     selection: "none" | "single" | "multiple";
+    client: string;
     searchable: boolean;
     canExpandRow: (row: any) => boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -1,2 +1,2 @@
-declare const _default: (name: string, fields: Object) => any;
+declare const _default: (name: string, fields: Object, client?: string) => any;
 export default _default;

package/dist/runtime/composables/collect.js

@@ -1,5 +1,4 @@
-import { getApiClient } from "@hostlink/light";
-export default (name, fields) => {
-  const client = getApiClient();
-  return client.collect(name, fields);
+import useLightClient from "./useLightClient.js";
+export default (name, fields, client = "auth") => {
+  return useLightClient(client).collect(name, fields);
 };

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

@@ -1,3 +1,3 @@
 export default function (operation: string, args?: {
     [key: string]: any;
-}, fields?: any): Promise<any>;
+}, fields?: any, client?: string): Promise<any>;

package/dist/runtime/composables/m.js

@@ -1,4 +1,4 @@
-import { mutation } from "@hostlink/light";
+import useLightClient from "./useLightClient.js";
 const removeUndefinedValues = (obj) => {
   for (const key in obj) {
     if (obj[key] instanceof File) {
@@ -13,7 +13,7 @@ const removeUndefinedValues = (obj) => {
   }
   return obj;
 };
-export default function(operation, args, fields = []) {
+export default function(operation, args, fields = [], client = "auth") {
   if (args) {
     args = removeUndefinedValues(args);
   }
@@ -29,7 +29,7 @@ export default function(operation, args, fields = []) {
   if (Object.keys(q[operation]).length === 0) {
     q[operation] = true;
   }
-  return mutation(q).then((res) => {
+  return useLightClient(client).mutation(q).then((res) => {
     return res[operation];
   });
 }

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

@@ -1,5 +1,5 @@
 import type { LTableColumn } from "../components/L/Table.vue.js";
-declare const _default: (name: string) => Omit<{
+declare const _default: (name: string, client?: string) => Omit<{
     field: (f: string) => import("@hostlink/light").Field | null;
     $fields: Record<string, import("@hostlink/light").Field>;
     setDataPath(path: string): string;

package/dist/runtime/composables/model.js

@@ -1,7 +1,7 @@
-import { getModel } from "@hostlink/light";
+import useLightClient from "./useLightClient.js";
 import defu from "defu";
-export default (name) => {
-  const m = getModel(name);
+export default (name, client = "auth") => {
+  const m = useLightClient(client).model(name);
   return defu(m, {
     columns(fields) {
       let columns = [];

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

@@ -0,0 +1,2 @@
+import type { GraphQLQuery } from '@hostlink/light';
+export default function q(query: GraphQLQuery, client?: string): Promise<any>;

package/dist/runtime/composables/q.js

@@ -0,0 +1,4 @@
+import useLightClient from "./useLightClient.js";
+export default function q(query, client = "auth") {
+  return useLightClient(client).query(query);
+}

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

@@ -0,0 +1,4 @@
+import type { LightClient } from '@hostlink/light';
+export declare function registerLightClient(name: string, client: LightClient): void;
+export declare function clearLightClients(): void;
+export default function useLightClient(name?: string): LightClient;

package/dist/runtime/composables/useLightClient.js

@@ -0,0 +1,12 @@
+const clients = /* @__PURE__ */ new Map();
+export function registerLightClient(name, client) {
+  clients.set(name, client);
+}
+export function clearLightClients() {
+  clients.clear();
+}
+export default function useLightClient(name = "auth") {
+  const client = clients.get(name);
+  if (!client) throw new Error(`Light client "${name}" is not configured`);
+  return client;
+}

package/dist/runtime/formkit/Form.vue

@@ -2,6 +2,7 @@
 import { useRouter, useRoute } from "vue-router";
 import { useQuasar } from "quasar";
 import { computed, model } from "#imports";
+import { getFormClient } from "../utils/formClient";
 const route = useRoute();
 const router = useRouter();
 const $q = useQuasar();
@@ -24,6 +25,7 @@ if (props.context.attrs.onSubmitted) {
 }
 const modelName = props.context.modelName || (typeof route.name === "string" ? route.name.split("-")[0] : void 0);
 const id = props.context.modelId || route.params[typeof route.name === "string" ? route.name.split("-")[1] : "id"];
+const client = getFormClient(props.context);
 if (!props.context.onSubmit) {
   props.context.node.props.onSubmit = async function() {
     const removeUndefined = (obj) => {
@@ -51,7 +53,7 @@ if (!props.context.onSubmit) {
     const v = removeUndefined(props.context.value);
     try {
       if (id) {
-        if (await model(modelName).update(Number(id), v)) {
+        if (await model(modelName, client).update(Number(id), v)) {
           $q.notify({
             message: "Updated successfully",
             color: "positive",
@@ -62,7 +64,7 @@ if (!props.context.onSubmit) {
           }
         }
       } else {
-        if (await model(modelName).add(v)) {
+        if (await model(modelName, client).add(v)) {
           $q.notify({
             message: "Added successfully",
             color: "positive",

package/dist/runtime/formkit/index.js

@@ -117,7 +117,8 @@ export const createLightPlugin = () => {
             "layout",
             "bordered",
             "modelName",
-            "modelId"
+            "modelId",
+            "client"
           ],
           features: [forms, disablesChildren]
         });

package/dist/runtime/plugin.js

@@ -12,10 +12,27 @@ import { createLightPlugin } from "./formkit/index.js";
 import { plugin, defaultConfig } from "@formkit/vue";
 import getApiBase from "./composables/getApiBase.js";
 import useLight from "./composables/useLight.js";
+import useLightClient, { clearLightClients, registerLightClient } from "./composables/useLightClient.js";
 import { zhTW } from "@formkit/i18n";
 export default defineNuxtPlugin((nuxtApp) => {
-  const client = createClient(getApiBase());
-  setApiClient(client);
+  const runtimeConfig = useRuntimeConfig();
+  const lightConfig = runtimeConfig.public.light;
+  const configuredClients = lightConfig?.clients ?? {};
+  clearLightClients();
+  for (const [name, config] of Object.entries(configuredClients)) {
+    const baseURL = typeof config === "string" ? config : config.baseURL;
+    if (!baseURL) throw new Error(`Light client "${name}" requires a baseURL`);
+    registerLightClient(name, createClient(baseURL));
+  }
+  if (!configuredClients.auth) {
+    registerLightClient("auth", createClient(getApiBase()));
+  }
+  const authClient = useLightClient();
+  setApiClient(authClient);
+  for (const [name, config] of Object.entries(configuredClients)) {
+    if (name === "auth" || typeof config === "string" || !config.audience) continue;
+    useLightClient(name).useAudience(authClient, config.audience);
+  }
   defineModel("Permission", {}).setDataPath("app.listPermission");
   defineModel("SystemValue", {}).setDataPath("app.listSystemValue");
   defineModel("Config", {}).setDataPath("app.listConfig");

package/dist/runtime/utils/formClient.d.ts

@@ -0,0 +1,4 @@
+export interface FormClientContext {
+    client?: string;
+}
+export declare function getFormClient(context: FormClientContext): string;

package/dist/runtime/utils/formClient.js

@@ -0,0 +1,3 @@
+export function getFormClient(context) {
+  return context.client || "auth";
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hostlink/nuxt-light",
-  "version": "1.75.0",
+  "version": "1.77.2",
   "description": "HostLink Nuxt Light Framework",
   "repository": {
     "type": "git",
@@ -38,7 +38,7 @@
     "@formkit/inputs": "^2.1.2",
     "@formkit/validation": "^2.1.2",
     "@formkit/vue": "^2.1.2",
-    "@hostlink/light": "^3.2.7",
+    "@hostlink/light": "^3.4.0",
     "@nuxt/module-builder": "^1.0.1",
     "@quasar/extras": "^2.0.2",
     "@quasar/quasar-ui-qmarkdown": "^3.0.1",