@hostlink/nuxt-light 1.74.1 → 1.76.0

package/README.md

@@ -55,6 +55,114 @@ 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',
+          },
+        },
+      },
+    },
+  },
+  modules: [
+    '@hostlink/nuxt-light',
+  ],
+})
+```
+
+A client can also be configured with a URL string:
+
+```ts
+clients: {
+  auth: '/auth-api/',
+  business: '/business-api/',
+}
+```
+
+### 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 +227,4 @@ nuxt.config.ts
       ]
     }
   }
-```
+```

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "light",
   "configKey": "light",
-  "version": "1.74.1",
+  "version": "1.76.0",
   "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/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) {
@@ -195,6 +197,17 @@ const resolveColumnOptions = async (col) => {
   } catch {
   }
 };
+const autoWidthSelectStyle = (col) => {
+  if (!col.autoWidth) return {};
+  const options = localSearchOptions.value[col.name] ?? [];
+  const labelWidth = (option) => {
+    const label = String(option.label ?? option.value ?? "");
+    return Array.from(label).reduce((width2, character) => width2 + (character.charCodeAt(0) > 255 ? 2 : 1), 0);
+  };
+  const longestLabel = Math.max(0, ...options.map(labelWidth));
+  const width = Math.min(36, Math.max(12, longestLabel + 4));
+  return { width: `${width}ch`, minWidth: `${width}ch` };
+};
 onMounted(async () => {
   await Promise.all(
     (props.columns ?? []).map((col) => resolveColumnOptions(col))
@@ -331,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);
@@ -420,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,
@@ -700,7 +713,7 @@ const hasFilters = computed(() => {
                 <q-td v-if="selection != 'none'" auto-width />
                 <q-td v-if="hasRowExpand" auto-width />
                 <q-td v-if="hasActions" auto-width />
-                <q-td v-for="col in props.cols" :key="col.name" :style="col.style">
+                <q-td v-for="col in props.cols" :key="col.name" :auto-width="col.autoWidth ?? false" :style="col.style">
 
                     <template v-if="col.searchable">
 
@@ -724,7 +737,7 @@ const hasFilters = computed(() => {
                                 :options="localSearchOptions[col.name]" emit-value map-options
                                 :multiple="col.searchMultiple" use-input input-debounce="0" @filter="(val, update) => {
   searchSelectFilter(val, update, col.name);
-}" :style="col.searchStyle" :placeholder="col.searchPlaceholder" />
+}" :style="[autoWidthSelectStyle(col), col.searchStyle]" :placeholder="col.searchPlaceholder" />
                         </template>
 
                         <template v-if="col.searchType == 'date'">

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/plugin.js

@@ -12,10 +12,22 @@ 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()));
+  }
+  setApiClient(useLightClient());
   defineModel("Permission", {}).setDataPath("app.listPermission");
   defineModel("SystemValue", {}).setDataPath("app.listSystemValue");
   defineModel("Config", {}).setDataPath("app.listConfig");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hostlink/nuxt-light",
-  "version": "1.74.1",
+  "version": "1.76.0",
   "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.3.1",
     "@nuxt/module-builder": "^1.0.1",
     "@quasar/extras": "^2.0.2",
     "@quasar/quasar-ui-qmarkdown": "^3.0.1",