@merkaly/nuxt 0.9.4 → 0.10.1

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": ">=3.14.0"
   },
-  "version": "0.9.4",
+  "version": "0.10.1",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/runtime/components/app.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { useRoute } from "#app";
-import { useAuth, watchOnce, addRouteMiddleware, useNuxtApp } from "#imports";
+import { computed } from "vue";
+import { useAuth, useTenant, watchOnce, addRouteMiddleware, useNuxtApp } from "#imports";
 import AuthMiddleware from "../middleware/auth";
 import { useNavigation } from "../composables/useNavigation";
 import AuthError from "./auth/AuthError.vue";
@@ -8,8 +9,10 @@ import { useColorMode } from "@vueuse/core";
 import { Notivue, NotificationProgress, Notification, pastelTheme } from "notivue";
 const $route = useRoute();
 const { clear, error, isLoading, logout, retry } = useAuth();
+const { fromServer } = useTenant();
 const { hook } = useNuxtApp();
 useColorMode({ attribute: "data-bs-theme" });
+const blocking = computed(() => isLoading.value && !fromServer.value);
 watchOnce(isLoading, () => AuthMiddleware($route, $route));
 const { defer, regenerate } = useNavigation();
 addRouteMiddleware("navigation", (to) => defer(to), { global: true });
@@ -27,7 +30,7 @@ hook("page:finish", () => regenerate());
     </Notivue>
 
     <BApp>
-      <slot v-if="isLoading" name="loading" />
+      <slot v-if="blocking" name="loading" />
 
       <slot v-else-if="error" :clear="clear" :error="error" :logout="logout" :retry="retry" name="error">
         <AuthError :error="error" @logout="logout" @retry="retry" />

package/dist/runtime/components/input/InputDropzone.d.vue.ts

@@ -1,4 +1,16 @@
-declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+export interface InputDropzoneRejection {
+    file: File;
+    reason: 'type' | 'size';
+}
+declare function openDialog(): void;
+declare var __VLS_1: {
+    dragging: boolean;
+    open: typeof openDialog;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     accept: {
         type: {
             (arrayLength: number): string[];
@@ -18,15 +30,31 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         };
         default: () => never[];
     };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    hint: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    maxSize: {
+        type: NumberConstructor;
+        default: number;
+    };
     multiple: {
         type: BooleanConstructor;
         default: boolean;
     };
-    modelValue: {
-        type: import("vue").PropType<unknown[]>;
+    title: {
+        type: StringConstructor;
+        default: undefined;
     };
-}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: unknown[]) => any;
+}>, {
+    open: typeof openDialog;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: (files: File[]) => any;
+    reject: (rejections: InputDropzoneRejection[]) => any;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     accept: {
         type: {
@@ -47,18 +75,42 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         };
         default: () => never[];
     };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    hint: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    maxSize: {
+        type: NumberConstructor;
+        default: number;
+    };
     multiple: {
         type: BooleanConstructor;
         default: boolean;
     };
-    modelValue: {
-        type: import("vue").PropType<unknown[]>;
+    title: {
+        type: StringConstructor;
+        default: undefined;
     };
 }>> & Readonly<{
-    "onUpdate:modelValue"?: ((value: unknown[]) => any) | undefined;
+    onSelect?: ((files: File[]) => any) | undefined;
+    onReject?: ((rejections: InputDropzoneRejection[]) => any) | undefined;
 }>, {
+    title: string;
+    disabled: boolean;
     accept: string[];
+    hint: string;
+    maxSize: number;
     multiple: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/input/InputDropzone.vue

@@ -1,80 +1,82 @@
 <script setup>
+import { useDropZone, useFileDialog } from "@vueuse/core";
 import { filesize } from "filesize";
+import { computed, useTemplateRef } from "vue";
+import { useI18n } from "vue-i18n";
 const props = defineProps({
   accept: { type: Array, default: () => [] },
-  multiple: { type: Boolean, default: false }
+  // MIME types, e.g. image/png; empty accepts anything
+  disabled: { type: Boolean, default: false },
+  hint: { type: String, default: void 0 },
+  maxSize: { type: Number, default: 0 },
+  // bytes; 0 means no limit
+  multiple: { type: Boolean, default: false },
+  title: { type: String, default: void 0 }
 });
-const dropZoneRef = ref();
-const fileInputRef = ref();
-const pictures = defineModel({ type: Array, default: () => [] });
-const { isOverDropZone } = useDropZone(dropZoneRef, {
-  dataTypes: props.accept,
+const emit = defineEmits(["reject", "select"]);
+const { t } = useI18n({ useScope: "local" });
+const dropZone = useTemplateRef("dropZone");
+const titleText = computed(() => props.title ?? t(props.multiple ? "titleMany" : "title"));
+const hintText = computed(() => props.hint ?? (props.maxSize ? t("hint", { size: filesize(props.maxSize) }) : ""));
+const { open, onChange } = useFileDialog({ accept: props.accept.join(","), multiple: props.multiple, reset: true });
+onChange((files) => pick(files ? [...files] : []));
+const { isOverDropZone } = useDropZone(dropZone, {
   multiple: props.multiple,
-  onDrop: handleFileChange,
-  preventDefaultForUnhandled: false
+  onDrop: (files) => pick(files ?? []),
+  preventDefaultForUnhandled: true
 });
-function removePicture(id) {
-  pictures.value = pictures.value.filter((picture) => picture._id !== id);
+function reasonOf(file) {
+  if (props.accept.length && !props.accept.includes(file.type)) return "type";
+  if (props.maxSize && file.size > props.maxSize) return "size";
 }
-function triggerInput() {
-  fileInputRef.value?.click();
+function pick(files) {
+  if (props.disabled || !files.length) return;
+  const checked = (props.multiple ? files : files.slice(0, 1)).map((file) => ({ file, reason: reasonOf(file) }));
+  const rejections = checked.filter((it) => Boolean(it.reason));
+  const accepted = checked.filter((it) => !it.reason).map((it) => it.file);
+  if (rejections.length) emit("reject", rejections);
+  if (accepted.length) emit("select", accepted);
 }
-function handleFileChange(files) {
-  if (!files.length) return;
-  const images = [...files].map((it) => ({
-    alt: it.name,
-    id: crypto.randomUUID(),
-    name: it.name,
-    size: it.size,
-    url: URL.createObjectURL(it)
-  }));
-  return pictures.value.push(...images);
+function openDialog() {
+  if (!props.disabled) open();
 }
+defineExpose({ open: openDialog });
 </script>
 
 <template>
-  <div ref="dropZoneRef" :class="{ 'dz-drag-hover': isOverDropZone }" class="dropzone dz-clickable text-start">
-    <input
-        ref="fileInputRef"
-        :accept="props.accept.join(',')"
-        :multiple="props.multiple"
-        class="d-none"
-        type="file"
-        @change="(e) => handleFileChange(e.target.files)"
-    >
+  <div
+      ref="dropZone"
+      :class="{ 'dz-drag-hover': isOverDropZone, 'opacity-50 pe-none': props.disabled }"
+      class="dropzone dz-clickable text-start"
+      @click="openDialog()">
+    <slot :dragging="isOverDropZone" :open="openDialog">
+      <div class="dz-message needsclick">
+        <i class="ki-duotone ki-file-up text-primary fs-3x">
+          <span class="path1" />
+          <span class="path2" />
+        </i>
 
-    <div class="dz-message needsclick" @click="triggerInput">
-      <i class="ki-duotone ki-file-up text-primary fs-3x">
-        <span class="path1" />
-        <span class="path2" />
-      </i>
+        <div class="ms-4">
+          <h3 class="fs-5 fw-bold text-gray-900 mb-1" v-text="titleText" />
 
-      <div class="ms-4">
-        <h3 class="fs-5 fw-bold text-gray-900 mb-1">Drop files here or click to upload.</h3>
-        <span class="fs-7 fw-semibold text-gray-400">Upload up to 10 files</span>
-      </div>
-    </div>
-
-    <template v-for="picture in pictures" :key="picture._id">
-      <div class="dz-preview border dz-image-preview">
-        <div class="dz-image">
-          <BImg :alt="picture.alt" :src="picture.url" class="w-100" />
-        </div>
-
-        <div class="dz-details">
-          <div class="dz-size">
-            <span v-text="filesize(picture.size)" />
-          </div>
-
-          <div class="dz-filename">
-            <span v-text="picture.name" />
-          </div>
+          <span v-if="hintText" class="fs-7 fw-semibold text-gray-500" v-text="hintText" />
         </div>
-
-        <span class="dz-remove" @click="removePicture(picture._id)">
-          <span>Remove file</span>
-        </span>
       </div>
-    </template>
+    </slot>
   </div>
 </template>
+
+<i18n lang="json">
+{
+  "en": {
+    "hint": "Up to {size}",
+    "title": "Drop a file here or click to choose",
+    "titleMany": "Drop files here or click to choose"
+  },
+  "pt": {
+    "hint": "Até {size}",
+    "title": "Solte um arquivo aqui ou clique para escolher",
+    "titleMany": "Solte os arquivos aqui ou clique para escolher"
+  }
+}
+</i18n>

package/dist/runtime/components/input/InputDropzone.vue.d.ts

@@ -1,4 +1,16 @@
-declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+export interface InputDropzoneRejection {
+    file: File;
+    reason: 'type' | 'size';
+}
+declare function openDialog(): void;
+declare var __VLS_1: {
+    dragging: boolean;
+    open: typeof openDialog;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     accept: {
         type: {
             (arrayLength: number): string[];
@@ -18,15 +30,31 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         };
         default: () => never[];
     };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    hint: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    maxSize: {
+        type: NumberConstructor;
+        default: number;
+    };
     multiple: {
         type: BooleanConstructor;
         default: boolean;
     };
-    modelValue: {
-        type: import("vue").PropType<unknown[]>;
+    title: {
+        type: StringConstructor;
+        default: undefined;
     };
-}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: unknown[]) => any;
+}>, {
+    open: typeof openDialog;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: (files: File[]) => any;
+    reject: (rejections: InputDropzoneRejection[]) => any;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     accept: {
         type: {
@@ -47,18 +75,42 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         };
         default: () => never[];
     };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    hint: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    maxSize: {
+        type: NumberConstructor;
+        default: number;
+    };
     multiple: {
         type: BooleanConstructor;
         default: boolean;
     };
-    modelValue: {
-        type: import("vue").PropType<unknown[]>;
+    title: {
+        type: StringConstructor;
+        default: undefined;
     };
 }>> & Readonly<{
-    "onUpdate:modelValue"?: ((value: unknown[]) => any) | undefined;
+    onSelect?: ((files: File[]) => any) | undefined;
+    onReject?: ((rejections: InputDropzoneRejection[]) => any) | undefined;
 }>, {
+    title: string;
+    disabled: boolean;
     accept: string[];
+    hint: string;
+    maxSize: number;
     multiple: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/composables/useApi.js

@@ -1,5 +1,5 @@
-import { reactive, ref } from "vue";
-import { useNuxtApp } from "#imports";
+import { getCurrentInstance, onServerPrefetch, reactive, ref } from "vue";
+import { useNuxtApp, useState } from "#imports";
 function useApi(callback) {
   const { $api } = useNuxtApp();
   const controller = new AbortController();
@@ -11,13 +11,17 @@ function useApi(callback) {
     return options;
   };
   const initialOptions = getOptions(params);
+  const nuxtApp = useNuxtApp();
+  const ssr = import.meta.server || nuxtApp.payload.serverRendered === true;
+  const key = `merkaly:api:${initialOptions.method}:${initialOptions.uri}:${JSON.stringify(initialOptions.query ?? {})}`;
   const loading = ref(false);
-  const data = ref(initialOptions.default?.());
-  const meta = ref({});
+  const data = ssr ? useState(`${key}:data`, () => initialOptions.default?.()) : ref(initialOptions.default?.());
+  const meta = ssr ? useState(`${key}:meta`, () => ({})) : ref({});
+  const prefetched = ssr ? useState(`${key}:prefetched`, () => false) : ref(false);
   const error = ref();
   const execute = async (args = {}) => {
-    Object.keys(args).forEach((key) => {
-      params[key] = args[key];
+    Object.keys(args).forEach((key2) => {
+      params[key2] = args[key2];
     });
     const currentOptions = getOptions(params);
     await $api(currentOptions.uri, {
@@ -32,7 +36,11 @@ function useApi(callback) {
     });
   };
   if (initialOptions.immediate) {
-    void execute();
+    if (import.meta.server && getCurrentInstance()) {
+      onServerPrefetch(() => execute().then(() => void (prefetched.value = true)));
+    } else if (!(nuxtApp.isHydrating && prefetched.value)) {
+      void execute();
+    }
   }
   return {
     abort: () => controller.abort(),

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

@@ -1,5 +1,8 @@
 export declare const useTenant: () => {
+    fromServer: import("vue").Ref<boolean, boolean>;
     isReady: import("vue").ComputedRef<boolean>;
-    setTenant: (value: string) => string;
+    setTenant: (value: string, options?: {
+        server?: boolean;
+    }) => void;
     tenant: import("vue").Ref<string, string>;
 };

package/dist/runtime/composables/useTenant.js

@@ -2,9 +2,14 @@ import { computed } from "vue";
 import { useState } from "#imports";
 export const useTenant = () => {
   const tenant = useState("tenant:id", () => "");
+  const fromServer = useState("tenant:server", () => false);
   const isReady = computed(() => Boolean(tenant.value));
-  const setTenant = (value) => tenant.value = value;
+  const setTenant = (value, options = {}) => {
+    tenant.value = value;
+    if (options.server) fromServer.value = true;
+  };
   return {
+    fromServer,
     isReady,
     setTenant,
     tenant

package/dist/runtime/plugins/api.global.js

@@ -1,66 +1,78 @@
-import { defineNuxtPlugin, useRuntimeConfig } from "#app";
+import { defineNuxtPlugin, useRequestURL, useRuntimeConfig } from "#app";
 import { useAuth, useTenant } from "#imports";
 const GLOBAL_API_HEADER = "x-merkaly-global";
-export default defineNuxtPlugin(({ provide }) => provide("api", async (url, options = {}) => {
-  const { token } = useAuth();
-  const { tenant } = useTenant();
-  const { public: { merkaly } } = useRuntimeConfig();
-  const requiresTenant = options.requiresTenant ?? merkaly.auth0.requiresTenant;
-  if (!tenant.value && !options.global && requiresTenant) {
-    throw new Error(
-      `[api] Tenant context is required but not set for: ${url}
+function serverBaseURL(api, global) {
+  const prefix = global ? "" : (api.prefix ?? "").replace(/^\/+|\/+$/g, "");
+  return prefix ? `${api.url.replace(/\/+$/, "")}/${prefix}` : api.url;
+}
+export default defineNuxtPlugin(({ provide }) => {
+  const requestHost = import.meta.server ? useRequestURL().host : void 0;
+  if (import.meta.server && import.meta.dev && new URL(useRuntimeConfig().public.merkaly.api.url).hostname.endsWith(".test")) {
+    process.env.NODE_TLS_REJECT_UNAUTHORIZED = "0";
+  }
+  provide("api", async (url, options = {}) => {
+    const { token } = useAuth();
+    const { tenant } = useTenant();
+    const { public: { merkaly } } = useRuntimeConfig();
+    const requiresTenant = options.requiresTenant ?? merkaly.auth0.requiresTenant;
+    if (!tenant.value && !options.global && requiresTenant) {
+      throw new Error(
+        `[api] Tenant context is required but not set for: ${url}
 This surface has requiresTenant: true. Possible causes:
   1. The request fired before the auth boot sequence completed (race condition).
   2. setTenant() was never called in this surface's auth plugin.
   3. The adapter should use { global: true } to bypass tenant enforcement.`
-    );
-  }
-  await $fetch(url, {
-    baseURL: "/api",
-    body: options?.body,
-    headers: {
-      authorization: token.value ? `Bearer ${token.value}` : "",
-      identity: tenant.value,
-      [GLOBAL_API_HEADER]: options.global ? "true" : "",
-      ...options?.headers
-    },
-    method: options?.method,
-    onRequest: async () => {
-      if (options.data) options.data.value = options.default?.();
-      if (options.meta) options.meta.value = {};
-      if (options.error) options.error.value = void 0;
-      if (options.loading) options.loading.value = true;
-      const result = await Promise.resolve(options?.onBeforeSend?.({ body: options.body, headers: options.headers, query: options.query })).then((res) => res).catch(() => false);
-      if (result === false) {
-        options.controller?.abort?.("Request aborted by onBeforeSend");
-      }
-    },
-    onRequestError: async ({ error, response, request }) => {
-      await options.onFatal?.(error);
-      if (options.error) options.error.value = error;
-      await options?.onComplete?.({ response, request });
-      if (options.loading) options.loading.value = false;
-    },
-    onResponse: async ({ response, request }) => {
-      const { status, _data, headers } = response;
-      const { data, meta } = _data || {};
-      await options?.onResponse?.({ response, request });
-      if (status >= 400) return;
-      await options?.onSuccess?.({ data, meta, headers, params: options.params });
-      if (options.data) options.data.value = data;
-      if (options.meta) options.meta.value = meta;
-      await options?.onComplete?.({ response, request });
-      if (options.loading) options.loading.value = false;
-    },
-    onResponseError: async ({ response, request }) => {
-      const { _data } = response;
-      await options.onError?.(_data, { response, request });
-      if (options.error) options.error.value = _data;
-      await options?.onComplete?.({ response, request });
-      if (options.loading) options.loading.value = false;
-    },
-    query: options?.query,
-    retry: false,
-    signal: options.controller?.signal
-  }).catch((reason) => reason);
-}));
+      );
+    }
+    await $fetch(url, {
+      baseURL: import.meta.server ? serverBaseURL(merkaly.api, options.global) : "/api",
+      body: options?.body,
+      headers: {
+        authorization: token.value ? `Bearer ${token.value}` : "",
+        identity: tenant.value,
+        [GLOBAL_API_HEADER]: options.global ? "true" : "",
+        ...requestHost ? { "x-merkaly-host": requestHost } : {},
+        // tenant host, as the proxy sends it
+        ...options?.headers
+      },
+      method: options?.method,
+      onRequest: async () => {
+        if (options.data) options.data.value = options.default?.();
+        if (options.meta) options.meta.value = {};
+        if (options.error) options.error.value = void 0;
+        if (options.loading) options.loading.value = true;
+        const result = await Promise.resolve(options?.onBeforeSend?.({ body: options.body, headers: options.headers, query: options.query })).then((res) => res).catch(() => false);
+        if (result === false) {
+          options.controller?.abort?.("Request aborted by onBeforeSend");
+        }
+      },
+      onRequestError: async ({ error, response, request }) => {
+        await options.onFatal?.(error);
+        if (options.error) options.error.value = error;
+        await options?.onComplete?.({ response, request });
+        if (options.loading) options.loading.value = false;
+      },
+      onResponse: async ({ response, request }) => {
+        const { status, _data, headers } = response;
+        const { data, meta } = _data || {};
+        await options?.onResponse?.({ response, request });
+        if (status >= 400) return;
+        await options?.onSuccess?.({ data, meta, headers, params: options.params });
+        if (options.data) options.data.value = data;
+        if (options.meta) options.meta.value = meta;
+        await options?.onComplete?.({ response, request });
+        if (options.loading) options.loading.value = false;
+      },
+      onResponseError: async ({ response, request }) => {
+        const { _data } = response;
+        await options.onError?.(_data, { response, request });
+        if (options.error) options.error.value = _data;
+        await options?.onComplete?.({ response, request });
+        if (options.loading) options.loading.value = false;
+      },
+      query: options?.query,
+      retry: false,
+      signal: options.controller?.signal
+    }).catch((reason) => reason);
+  });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@merkaly/nuxt",
-  "version": "0.9.4",
+  "version": "0.10.1",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/merkaly-io/nuxt.git"
@@ -28,7 +28,7 @@
     "dist"
   ],
   "dependencies": {
-    "@auth0/auth0-spa-js": "^2.29.0",
+    "@auth0/auth0-spa-js": "^2.30.0",
     "@bootstrap-vue-next/nuxt": "^1.0.0",
     "@nuxt/devtools": "^4.0.0",
     "@nuxt/eslint": "1.17.0",
@@ -38,7 +38,7 @@
     "@nuxt/kit": "^4.6.0",
     "@nuxtjs/i18n": "^10.6.0",
     "@nuxtjs/plausible": "^4.0.0",
-    "@sentry/nuxt": "^11.9.0",
+    "@sentry/nuxt": "^11.10.0",
     "@types/node": "latest",
     "@types/vue-select": "^3.16.8",
     "@vueuse/components": "^15.0.0",
@@ -50,13 +50,13 @@
     "change-case": "^5.4.4",
     "class-transformer": "^0.5.1",
     "class-validator": "^0.15.1",
-    "eslint": "^10.13.0",
+    "eslint": "^10.14.0",
     "filesize": "^11.0.17",
     "gsap": "^3.15.0",
     "notivue": "^2.4.5",
     "nuxt": "^4.6.3",
     "reflect-metadata": "^0.2.2",
-    "sass": "^1.106.1",
+    "sass": "^1.107.1",
     "typescript": "~5.9.3",
     "v-money3": "^3.26.1",
     "vite-svg-loader": "^5.1.1",