@merkaly/nuxt 0.2.5 → 0.3.1

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": ">=3.0.0"
   },
-  "version": "0.2.5",
+  "version": "0.3.1",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/runtime/components/app.vue

@@ -1,10 +1,15 @@
 <script setup>
 import { useRoute } from "#app";
-import { useAuth, watchOnce } from "#imports";
+import { useAuth, watchOnce, addRouteMiddleware, useNuxtApp } from "#imports";
 import AuthMiddleware from "../middleware/auth";
+import { useNavigation } from "../composables/useNavigation";
 const $route = useRoute();
 const { isLoading } = useAuth();
+const { hook } = useNuxtApp();
 watchOnce(isLoading, () => AuthMiddleware($route, $route));
+const { defer, regenerate } = useNavigation();
+addRouteMiddleware("navigation", (to) => defer(to), { global: true });
+hook("page:finish", () => regenerate());
 </script>
 
 <template>

package/dist/runtime/components/auth.vue

@@ -8,6 +8,7 @@ const code = params.get("code");
 const error = params.get("error");
 const invitation = params.get("invitation");
 const organization = params.get("organization");
+const redirect = params.get("redirect");
 function handleInvite() {
   return $auth0.loginWithRedirect({ authorizationParams: { organization, invitation } });
 }
@@ -32,7 +33,9 @@ callOnce(async () => {
   if (code) {
     return handleCode();
   }
-  return $auth0.loginWithRedirect();
+  return $auth0.loginWithRedirect({
+    appState: { target: redirect || "/" }
+  });
 });
 </script>
 

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

@@ -81,8 +81,8 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
 }>, {
     mode: PlaceTypes;
     disabled: boolean;
-    countries: string[];
     placeholder: string;
+    countries: string[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -81,8 +81,8 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
 }>, {
     mode: PlaceTypes;
     disabled: boolean;
-    countries: string[];
     placeholder: string;
+    countries: string[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -76,9 +76,9 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
 }>, {
     prefix: string;
     decimal: string;
-    placeholder: string;
     max: number;
     min: number;
+    placeholder: string;
     precision: number;
     suffix: string;
     thousands: string;

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

@@ -76,9 +76,9 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
 }>, {
     prefix: string;
     decimal: string;
-    placeholder: string;
     max: number;
     min: number;
+    placeholder: string;
     precision: number;
     suffix: string;
     thousands: string;

package/dist/runtime/components/table/TableDatagrid.d.vue.ts

@@ -0,0 +1,80 @@
+import type { DataGrid } from '../../composables/useDatagrid.js';
+declare const __VLS_export: <G>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<{
+        modelValue: DataGrid<G>;
+    } & import("vue").ExtractPublicPropTypes<{
+        emptyText: {
+            type: StringConstructor;
+            default: () => string;
+        };
+        hideFooter: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        hidePagination: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        hideSelect: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+    }> & {
+        "onUpdate:modelValue"?: ((value: DataGrid<G>) => any) | undefined;
+        onFetch?: ((reason: "sort" | "filter" | "search" | "paginate" | "refresh") => any) | undefined;
+        "onToggle:item"?: ((item: G, expanded: boolean) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        [x: `head[${string}]`]: ((props: {
+            column: import("../../composables/useDatagrid.js").ColumnDefinition<G>;
+            key: string;
+        }) => any) | undefined;
+    } & {
+        [x: `row[${string}]`]: ((props: {
+            column: import("../../composables/useDatagrid.js").ColumnDefinition<G>;
+            idx: number;
+            item: G;
+            key: string;
+        }) => any) | undefined;
+    } & {
+        search?: (props: {}) => any;
+    } & {
+        toolbar?: (props: {}) => any;
+    } & {
+        filters?: (props: {}) => any;
+    } & {
+        empty?: (props: {}) => any;
+    } & {
+        actions?: (props: {
+            index: number;
+            item: G;
+        }) => any;
+    } & {
+        details?: (props: {
+            index: number;
+            item: G;
+            toggleDetails: () => void;
+        }) => any;
+    } & {
+        tfoot?: (props: {}) => any;
+    } & {
+        footer?: (props: {}) => any;
+    };
+    emit: {
+        (e: "fetch", reason: "sort" | "filter" | "search" | "paginate" | "refresh"): void;
+        (e: "toggle:item", item: G, expanded: boolean): void;
+    } & ((evt: "update:modelValue", value: DataGrid<G>) => void);
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/runtime/components/table/TableDatagrid.vue

@@ -236,29 +236,31 @@ function toggleDetails(item) {
     <BCardFooter v-if="!props.hideFooter" class="p-4">
       <slot name="footer" />
 
-      <BRow v-if="!props.hidePagination" align-h="between" align-v="center">
-        <BCol cols="auto">
-          <select v-model="$datagrid.limit" class="form-select form-select-sm form-select-solid" disabled>
-            <BFormSelectOption :value="10">10</BFormSelectOption>
-          </select>
-        </BCol>
+      <template v-if="!props.hidePagination">
+        <BRow align-h="between" align-v="center" class="w-100">
+          <BCol cols="auto">
+            <select v-model="$datagrid.limit" class="form-select form-select-sm form-select-solid" disabled>
+              <BFormSelectOption :value="10">10</BFormSelectOption>
+            </select>
+          </BCol>
 
-        <BCol v-show="!$datagrid.loading" cols="auto">
-          <BPagination
-            v-model="$datagrid.page"
-            :disabled="$datagrid.loading"
-            :per-page="$datagrid.limit"
-            :total-rows="$datagrid.total"
-            class="mb-0"
-            no-goto-end-buttons
-            @update:model-value="emit('fetch', 'paginate')" />
-        </BCol>
+          <BCol v-show="!$datagrid.loading" cols="auto">
+            <BPagination
+              v-model="$datagrid.page"
+              :disabled="$datagrid.loading"
+              :per-page="$datagrid.limit"
+              :total-rows="$datagrid.total"
+              class="mb-0"
+              no-goto-end-buttons
+              @update:model-value="emit('fetch', 'paginate')" />
+          </BCol>
 
-        <BCol class="fs-7 text-muted" cols="auto">
-          <span v-if="$datagrid.loading">Loading...</span>
-          <FormatText v-else :template="paginationText.template" :values="paginationText.values" />
-        </BCol>
-      </BRow>
+          <BCol class="fs-7 text-muted" cols="auto">
+            <span v-if="$datagrid.loading">Loading...</span>
+            <FormatText v-else :template="paginationText.template" :values="paginationText.values" />
+          </BCol>
+        </BRow>
+      </template>
     </BCardFooter>
   </BCard>
 </template>

package/dist/runtime/components/table/TableDatagrid.vue.d.ts

@@ -0,0 +1,80 @@
+import type { DataGrid } from '../../composables/useDatagrid.js';
+declare const __VLS_export: <G>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<{
+        modelValue: DataGrid<G>;
+    } & import("vue").ExtractPublicPropTypes<{
+        emptyText: {
+            type: StringConstructor;
+            default: () => string;
+        };
+        hideFooter: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        hidePagination: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        hideSelect: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+    }> & {
+        "onUpdate:modelValue"?: ((value: DataGrid<G>) => any) | undefined;
+        onFetch?: ((reason: "sort" | "filter" | "search" | "paginate" | "refresh") => any) | undefined;
+        "onToggle:item"?: ((item: G, expanded: boolean) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        [x: `head[${string}]`]: ((props: {
+            column: import("../../composables/useDatagrid.js").ColumnDefinition<G>;
+            key: string;
+        }) => any) | undefined;
+    } & {
+        [x: `row[${string}]`]: ((props: {
+            column: import("../../composables/useDatagrid.js").ColumnDefinition<G>;
+            idx: number;
+            item: G;
+            key: string;
+        }) => any) | undefined;
+    } & {
+        search?: (props: {}) => any;
+    } & {
+        toolbar?: (props: {}) => any;
+    } & {
+        filters?: (props: {}) => any;
+    } & {
+        empty?: (props: {}) => any;
+    } & {
+        actions?: (props: {
+            index: number;
+            item: G;
+        }) => any;
+    } & {
+        details?: (props: {
+            index: number;
+            item: G;
+            toggleDetails: () => void;
+        }) => any;
+    } & {
+        tfoot?: (props: {}) => any;
+    } & {
+        footer?: (props: {}) => any;
+    };
+    emit: {
+        (e: "fetch", reason: "sort" | "filter" | "search" | "paginate" | "refresh"): void;
+        (e: "toggle:item", item: G, expanded: boolean): void;
+    } & ((evt: "update:modelValue", value: DataGrid<G>) => void);
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

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

@@ -1,4 +1,4 @@
-interface ColumnDefinition<C = unknown> {
+export interface ColumnDefinition<C = unknown> {
     class?: string;
     getter?: (row: C) => any;
     tdClass?: string;

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

@@ -1,18 +1,23 @@
-import type { RouteLocationNormalized } from 'vue-router';
-interface INavigationItem {
+interface NavigationItem {
     text: string | null;
     path: string;
+    loading?: boolean;
 }
-export declare function useNavigation(page?: INavigationItem): {
+type NavigationItemOrGetter = NavigationItem | (() => NavigationItem);
+export declare function useNavigation(page?: NavigationItemOrGetter): {
     current: import("vue").ComputedRef<{
         path: string;
         text: string | null;
+        loading: boolean;
     } | undefined>;
     items: import("vue").ComputedRef<{
         path: string;
         text: string | null;
+        loading: boolean;
     }[]>;
-    regenerate: (route: RouteLocationNormalized) => void;
-    setPage: (item: INavigationItem) => number | undefined;
+    defer: (route: {
+        path: string;
+    }) => void;
+    regenerate: () => void;
 };
 export {};

package/dist/runtime/composables/useNavigation.js

@@ -2,45 +2,50 @@ import { computed } from "vue";
 import { useState } from "#imports";
 export function useNavigation(page) {
   const list = useState("breadcrumbs", () => []);
+  const pendingRoute = useState("breadcrumbs:pending", () => null);
   function normalizePath(base, path) {
-    path = String(path);
-    if (!path.startsWith("/")) {
-      path = "/" + path;
-    }
-    if (base.endsWith("/")) {
-      base = base.slice(0, -1);
-    }
-    return base + path;
+    return `${base.replace(/\/$/, "")}/${path.replace(/^\//, "")}`;
   }
-  const items = computed(() => {
+  function resolve(item) {
+    return typeof item === "function" ? item() : item;
+  }
+  const resolved = computed(() => {
     let uri = "";
-    return list.value.map(({ text, path }) => {
+    return list.value.map((item) => {
+      const { text, path = "", loading } = resolve(item);
       uri = normalizePath(uri, path);
-      return { path: uri, text };
-    }).filter(({ text }) => text !== null);
+      return { path: uri, text, loading: !!loading };
+    });
+  });
+  const items = computed(() => {
+    return resolved.value.filter(({ text, loading }) => text != null && !loading);
   });
   const current = computed(() => {
-    const length = items.value.length;
-    return items.value.at(length - 1);
+    return resolved.value.at(-1);
   });
-  const setPage = (item) => {
-    const newItem = JSON.stringify(item);
-    const existingItems = list.value.map((item2) => JSON.stringify(item2));
-    if (existingItems.includes(newItem)) {
-      return;
-    }
-    return list.value.push(item);
-  };
-  if (page) {
-    setPage(page);
-  }
-  function regenerate(route) {
-    const itemIndex = items.value.findLastIndex((value) => route.path.startsWith(value.path));
+  function regenerate() {
+    if (!pendingRoute.value) return;
+    const route = pendingRoute.value;
+    pendingRoute.value = null;
+    const itemIndex = resolved.value.findLastIndex((value) => route.startsWith(value.path));
     if (itemIndex >= 0) {
       list.value = list.value.slice(0, itemIndex + 1);
       return;
     }
     list.value = [];
   }
-  return { current, items, regenerate, setPage };
+  if (page) {
+    regenerate();
+    const { path } = resolve(page);
+    const existingIndex = list.value.findIndex((i) => resolve(i).path === path);
+    if (existingIndex >= 0) {
+      list.value[existingIndex] = page;
+    } else {
+      list.value.push(page);
+    }
+  }
+  function defer(route) {
+    pendingRoute.value = route.path;
+  }
+  return { current, items, defer, regenerate };
 }

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

@@ -0,0 +1,16 @@
+type FieldConstraints = {
+    maxlength?: number;
+    minlength?: number;
+    required?: boolean;
+};
+type FieldAttrs = FieldConstraints & {
+    state?: boolean | null;
+};
+export declare function useValidator<T extends object>(instance: T): {
+    form: T;
+    attrs: import("vue").ComputedRef<{ [K in keyof T]?: FieldAttrs | undefined; }>;
+    valid: import("vue").ComputedRef<boolean>;
+    errors: Record<keyof T, string>;
+    validate: () => Promise<boolean>;
+};
+export {};

package/dist/runtime/composables/useValidator.js

@@ -0,0 +1,59 @@
+import { reactive, computed, ref } from "vue";
+import { validate as classValidate, getMetadataStorage } from "class-validator";
+const handlers = {
+  isLength(entry, [min, max]) {
+    if (min > 0) entry.minlength = min;
+    if (max != null) entry.maxlength = max;
+  },
+  isNotEmpty(entry) {
+    entry.required = true;
+  }
+};
+function extractConstraints(constructor) {
+  const metadata = getMetadataStorage().getTargetValidationMetadatas(constructor, "", false, false);
+  const constraints = {};
+  for (const meta of metadata) {
+    const prop = meta.propertyName;
+    if (!constraints[prop]) constraints[prop] = {};
+    const handler = handlers[meta.name];
+    if (handler) handler(constraints[prop], meta.constraints ?? []);
+  }
+  return constraints;
+}
+function applyErrors(result, errors, state) {
+  for (const key of Object.keys(errors)) {
+    errors[key] = "";
+    state[key] = true;
+  }
+  for (const error of result) {
+    const messages = error.constraints ? Object.values(error.constraints) : [];
+    errors[error.property] = messages[0] || "Invalid";
+    state[error.property] = false;
+  }
+}
+function mergeAttrs(constraints, state) {
+  const result = {};
+  const keys = /* @__PURE__ */ new Set([...Object.keys(constraints), ...Object.keys(state)]);
+  for (const key of keys) {
+    const prop = key;
+    result[prop] = { ...constraints[prop], state: state[key] ?? null };
+  }
+  return result;
+}
+export function useValidator(instance) {
+  const form = reactive(instance);
+  const constraints = extractConstraints(instance.constructor);
+  const errors = reactive({});
+  const state = reactive({});
+  const validated = ref(false);
+  const valid = computed(() => validated.value && !Object.values(errors).some((v) => v));
+  const attrs = computed(() => mergeAttrs(constraints, state));
+  async function validate() {
+    const plain = Object.assign(Object.create(Object.getPrototypeOf(instance)), form);
+    const result = await classValidate(plain);
+    applyErrors(result, errors, state);
+    validated.value = true;
+    return result.length === 0;
+  }
+  return { form, attrs, valid, errors, validate };
+}

package/dist/runtime/middleware/auth.js

@@ -16,5 +16,7 @@ export default defineNuxtRouteMiddleware((to) => {
   if (isAuthenticated.value) {
     return;
   }
-  return navigateTo(merkaly.auth0.callbackUrl);
+  const redirect = to.fullPath;
+  const callbackUrl = redirect === "/" ? merkaly.auth0.callbackUrl : `${merkaly.auth0.callbackUrl}?redirect=${encodeURIComponent(redirect)}`;
+  return navigateTo(callbackUrl);
 });

package/dist/runtime/plugins/auth0.client.js

@@ -51,6 +51,10 @@ export default defineNuxtPlugin(async ({ callHook, hook }) => {
       return $api("/identities", { method: "POST", prefix: "/", body });
     });
   };
-  Promise.allSettled([auth0.getUser(), auth0.getTokenSilently()]).then(() => hook("app:created", () => callHook("merkaly:auth", user.value))).catch(() => void 0).finally(() => isLoading.value = false);
+  const isAuthCallback = window.location.pathname === $config.merkaly.auth0.callbackUrl;
+  if (!isAuthCallback) {
+    await Promise.allSettled([auth0.getUser(), auth0.getTokenSilently()]).then(() => hook("app:created", () => callHook("merkaly:auth", user.value))).catch(() => void 0);
+  }
+  isLoading.value = false;
   return { provide: { auth0 } };
 });

package/dist/runtime/utils/withAdapter.js

@@ -6,6 +6,9 @@ export const withAdapter = (callback) => (args) => {
     const { params: initialParams = {}, ...hooks } = config;
     const mergedParams = defu(executionParams, { ...initialParams });
     const adapterResult = callback(mergedParams);
+    if (adapterResult.body && typeof adapterResult.body === "object" && !(adapterResult.body instanceof FormData)) {
+      adapterResult.body = { ...adapterResult.body };
+    }
     return defu(hooks, adapterResult);
   });
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@merkaly/nuxt",
-  "version": "0.2.5",
+  "version": "0.3.1",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/merkaly-io/nuxt.git"
@@ -27,6 +27,20 @@
   "files": [
     "dist"
   ],
+  "scripts": {
+    "build": "nuxt-module-build build",
+    "build:stub": "nuxt-module-build build --stub",
+    "dev": "pnpm dev:prepare && cd playground && pnpm storybook",
+    "dev:build": "nuxi build playground",
+    "dev:prepare": "pnpm build:stub && nuxi prepare playground",
+    "lint": "eslint .",
+    "prepack": "pnpm build",
+    "prepare": "nuxt-module-build prepare",
+    "release": "pnpm lint && pnpm test && pnpm build && changelogen --release && npm publish --access public && git push --follow-tags",
+    "test": "vitest run",
+    "test:types": "vue-tsc --noEmit && cd playground && vue-tsc --noEmit",
+    "test:watch": "vitest watch"
+  },
   "dependencies": {
     "@auth0/auth0-spa-js": "^2.14.0",
     "@bootstrap-vue-next/nuxt": "^0.43.0",
@@ -46,6 +60,7 @@
     "bootstrap": "^5.3.8",
     "bootstrap-vue-next": "^0.43.0",
     "change-case": "^5",
+    "class-validator": "^0.14.3",
     "eslint": "^9.39.1",
     "filesize": "^11.0.2",
     "nuxt": "^4.3.0",
@@ -72,17 +87,5 @@
   },
   "engines": {
     "node": ">=20.0.0"
-  },
-  "scripts": {
-    "build": "nuxt-module-build build",
-    "build:stub": "nuxt-module-build build --stub",
-    "dev": "pnpm dev:prepare && cd playground && pnpm storybook",
-    "dev:build": "nuxi build playground",
-    "dev:prepare": "pnpm build:stub && nuxi prepare playground",
-    "lint": "eslint .",
-    "release": "pnpm lint && pnpm test && pnpm build && changelogen --release && npm publish --access public && git push --follow-tags",
-    "test": "vitest run",
-    "test:types": "vue-tsc --noEmit && cd playground && vue-tsc --noEmit",
-    "test:watch": "vitest watch"
   }
-}
+}