@merkaly/nuxt 0.12.3 → 0.12.5

package/README.md

@@ -35,6 +35,20 @@ On boot the module restores an existing session (user and token) and then runs t
 | store | optional | required | `merkaly:tenant` resolves the store from the host (public); a signed-in buyer is restored too; protected pages (account, checkout) ask for login. |
 | www | optional | not used | No hooks; anonymous or signed-in. |
 
+### Login entry points (`MKAuth`)
+
+The callback page renders `MKAuth`, which reads its query string:
+
+| Query | Behavior |
+|---|---|
+| `?code=...` (Auth0 callback) | Completes the login, navigates to the `appState.target` set when it started (or `/`) and emits `success` with that `appState`. |
+| `?error=...&error_description=...` | Emits `error` and shows a 400 error page. |
+| `?invitation=<ticket>&organization=<org_id>` | Accepts an organization invitation (Auth0 Organizations). |
+| `?organization=<org_id>[&redirect=/path]` | Logs in straight into that organization (a silent login when the Auth0 session exists) and lands on `redirect`, e.g. `https://admin.merkaly.io/auth?organization=org_123&redirect=/onboarding` right after creating a store in www. |
+| `?redirect=/path` | Plain login, lands on `redirect` (the auth middleware sends protected pages here). |
+
+To open the Auth0 signup screen instead of the login one, use `useAuth().signup({ redirectTo })`: it calls `loginWithRedirect` with `screen_hint: 'signup'` and `appState: { target: redirectTo }`, so after the callback the app lands on `redirectTo` (default `/`).
+
 ### Session lifetime
 
 The SPA keeps the session with **refresh tokens**: the client uses `useRefreshTokens` with `localStorage` cache and logs in with `audience` and `scope: openid profile email offline_access`. Before each API call the module asks Auth0 for the current access token, which is cached and renewed with the refresh token once it expires (2 hours for `https://api.merkaly.io`). When the refresh token is gone or expired, protected surfaces (`requiresAuth: true`) go back to login instead of calling the API without a token. Account linking (`linkWithConnection(connection)`) uses a separate Auth0 client, the `auth.merkaly.io` SPA client in Auth0, with an in-memory cache, created only on the first call (no extra `checkSession` on page load). It opens a login popup for that connection and sends the popup's raw ID token to `POST /auth/identities` as `{ idToken }`; the api verifies the token (signature, issuer, audience = the account linking client, expiry) and links the identity from its `sub` into the logged-in user. Requires an api with that contract (older clients that sent `{ provider, userId }` get `400`).
@@ -113,6 +127,39 @@ The path is `/phog` because ad blockers drop requests to paths such as
 `/posthog`, `/analytics`, `/tracking` or `/telemetry`; a first-party, neutral
 path keeps events flowing.
 
+## Notifications and modals
+
+`useNotify()` is the standard for feedback and confirmations in every app:
+
+| Need | Use |
+|---|---|
+| Short feedback | `$notify.toast({ title, variant })` |
+| Confirm an action (text and two buttons) | `$notify.confirm({ title, message, confirmText, cancelText, variant, onConfirm })` |
+| Modal with its own content (form, list) | a component with `<BModal>`, opened with `useModal().create({ component: markRaw(component), ...props }).show()` |
+
+```ts
+const $notify = useNotify();
+
+$notify.confirm({
+  cancelText: $t('actions.back'),
+  confirmText: $t('order.cancel.submit'),
+  message: $t('order.cancel.confirm'),
+  onConfirm: () => cancel({ id }).then(() => !error.value), // false keeps it open (the error is shown by the app)
+  title: $t('order.cancel.modalTitle', { number }),
+  variant: 'danger',
+});
+```
+
+- `onConfirm` returning a promise keeps the modal open with both buttons disabled until it settles; it
+  closes afterwards unless the promise resolves `false`. Adapters' `execute` resolves on api errors too,
+  so check `error` before returning.
+- Each call creates its own modal and destroys it when hidden.
+- No inline "click again to confirm" and no `<BModal v-model>` in a page: open modals through `create`.
+- A component opened by `create` is mounted outside the page tree: pass data as props and answer
+  through emits (`onSaved`), never `inject`. Do not use `modelValue` for data: the orchestrator shows the modal through it
+  (use a named model such as `v-model:page`). Destroy it on `onHidden` when created from a click.
+- Props already set in the app `bootstrap.config.ts` are defaults: do not repeat them.
+
 ## Money formatting
 
 Money in Merkaly is stored as **integer cents**. `MKFormatMoney`, `MKInputMoney`,

package/dist/module.json

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

package/dist/runtime/components/auth.d.vue.ts

@@ -1,9 +1,13 @@
 declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     error: (reason: string) => any;
-    success: () => any;
+    success: (appState?: {
+        target?: string;
+    } | undefined) => any;
 }, string, import("vue").PublicProps, Readonly<{}> & Readonly<{
     onError?: ((reason: string) => any) | undefined;
-    onSuccess?: (() => any) | undefined;
+    onSuccess?: ((appState?: {
+        target?: string;
+    } | undefined) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/auth.vue

@@ -12,6 +12,9 @@ const redirect = params.get("redirect");
 function handleInvite() {
   return $auth0.loginWithRedirect({ authorizationParams: { organization, invitation } });
 }
+function handleOrganization() {
+  return $auth0.loginWithRedirect({ appState: { target: redirect || "/" }, authorizationParams: { organization } });
+}
 function handleError() {
   const errorDescription = params.get("error_description") ?? "Auth error";
   emit("error", errorDescription);
@@ -21,12 +24,13 @@ function handleError() {
   });
 }
 function handleCode() {
-  return void $auth0.handleRedirectCallback().then(() => emit("success"));
+  return void $auth0.handleRedirectCallback().then((result) => emit("success", result?.appState));
 }
 callOnce(async () => {
   if (error) return handleError();
   if (code) return handleCode();
   if (invitation && organization) return handleInvite();
+  if (organization) return handleOrganization();
   return $auth0.loginWithRedirect({ appState: { target: redirect || "/" } });
 });
 </script>

package/dist/runtime/components/auth.vue.d.ts

@@ -1,9 +1,13 @@
 declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     error: (reason: string) => any;
-    success: () => any;
+    success: (appState?: {
+        target?: string;
+    } | undefined) => any;
 }, string, import("vue").PublicProps, Readonly<{}> & Readonly<{
     onError?: ((reason: string) => any) | undefined;
-    onSuccess?: (() => any) | undefined;
+    onSuccess?: ((appState?: {
+        target?: string;
+    } | undefined) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -106,8 +106,8 @@ function getRowAttrs(item, idx) {
 </script>
 
 <template>
-  <BCard no-body>
-    <BCardHeader v-if="!props.hideHeader" class="align-items-center position-relative">
+  <BCard class="card-flush" no-body>
+    <BCardHeader v-if="!props.hideHeader" class="align-items-center position-relative py-5 gap-2 gap-md-5">
       <BCardTitle>
         <div v-if="hasBulkSlot && !props.hideSelect && selectionState.selectedCount" class="w-35px">
           <DropdownIcon icon="caret-down" toggle-class="p-2">
@@ -181,99 +181,100 @@ function getRowAttrs(item, idx) {
         style="bottom: -6px; z-index: 10" />
     </BCardHeader>
 
-    <BTableSimple
-      :class="{ 'h-100': !visibleItems.length || $datagrid.loading }"
-      class="mb-0 overflow-auto"
-      hover
-      responsive="lg"
-      small
-      table-class="align-middle table-row-dashed h-100">
-      <BThead class="sticky-top z-index-1 align-middle">
-        <BTr class="text-start text-body-secondary fw-bold text-uppercase">
-          <BTh v-if="hasDetailsSlot" class="w-25px" style="padding: unset !important;" />
+    <BCardBody class="pt-0">
+      <BTableSimple
+        :class="{ 'h-100': !visibleItems.length || $datagrid.loading }"
+        class="mb-0 overflow-auto"
+        responsive="lg"
+        table-class="align-middle table-row-dashed fs-6 gy-5 h-100">
+        <BThead class="sticky-top z-index-1 align-middle">
+          <BTr class="text-start text-gray-500 fw-bold fs-7 text-uppercase gs-0">
+            <BTh v-if="hasDetailsSlot" class="w-25px" style="padding: unset !important;" />
 
-          <BTh v-if="!props.hideSelect" class="w-40px px-0">
-            <BFormCheckbox
-              :disabled="$datagrid.loading"
-              :indeterminate="selectionState.checkboxAllAttrs.indeterminate"
-              :model-value="selectionState.allChecked"
-              class="form-check-sm form-check-custom cell-checkbox"
-              @update:model-value="toggleCheckAll()" />
-          </BTh>
-
-          <template v-for="[key, column] in visibleColumns" :key="key">
-            <BTh :class="[column.class, column.thClass, 'text-nowrap']">
-              <slot :name="`head[${key}]`" v-bind="{ column, key }">
-                <span v-text="column.title ?? sentenceCase(key)" />
-              </slot>
-            </BTh>
-          </template>
-
-          <BTh v-if="hasActionsSlot" class="text-end px-3" />
-        </BTr>
-      </BThead>
-
-      <BTbody v-if="!visibleItems.length">
-        <BTd :colspan="tableColspan">
-          <slot name="empty">
-            <div class="text-center text-muted" v-text="props.emptyText ?? t('empty')" />
-          </slot>
-        </BTd>
-      </BTbody>
-
-      <BTbody v-else class="fw-semibold text-nowrap">
-        <template v-for="(item, idx) in visibleItems" :key="getRowKey(item, idx)">
-          <BTr v-bind="getRowAttrs(item, idx)">
-            <BTd v-if="hasDetailsSlot" class="w-25px" style="padding: unset !important;">
-              <BButton
-                class="w-25px h-100 rounded-0 p-0 border-end border-dashed"
-                size="sm"
-                variant="none"
-                @click="toggleDetails(item)">
-                <FormatIcon :name="item._showDetails ? 'chevron-down' : 'chevron-right'" class="p-0" size="sm"
-                            variant="primary" />
-              </BButton>
-            </BTd>
-
-            <BTd v-if="!props.hideSelect" class="w-40px px-0">
+            <BTh v-if="!props.hideSelect" class="w-40px px-0">
               <BFormCheckbox
-                v-model="item._checked"
                 :disabled="$datagrid.loading"
-                class="form-check-sm form-check-custom cell-checkbox" />
-            </BTd>
+                :indeterminate="selectionState.checkboxAllAttrs.indeterminate"
+                :model-value="selectionState.allChecked"
+                class="form-check-sm form-check-custom cell-checkbox"
+                @update:model-value="toggleCheckAll()" />
+            </BTh>
 
             <template v-for="[key, column] in visibleColumns" :key="key">
-              <BTd :class="[column.class, column.tdClass]">
-                <slot :name="`row[${key}]`" v-bind="{ column, idx, item, key }">
-                  <span v-text="column.getter?.(item) ?? getItemValue(item, key)" />
+              <BTh :class="[column.class, column.thClass, 'text-nowrap']">
+                <slot :name="`head[${key}]`" v-bind="{ column, key }">
+                  <span v-text="column.title ?? sentenceCase(key)" />
                 </slot>
-              </BTd>
+              </BTh>
             </template>
 
-            <BTd v-if="hasActionsSlot" class="text-end px-3">
-              <DropdownIcon :text="t('actions')" icon="caret-down" toggle-class="py-1 px-3" variant="light-dark">
-                <slot :index="idx" :item="item" name="actions" />
-              </DropdownIcon>
-            </BTd>
+            <BTh v-if="hasActionsSlot" class="text-end px-3" />
           </BTr>
+        </BThead>
 
-          <BTr v-if="hasDetailsSlot && item._showDetails">
-            <BTd :colspan="tableColspan" class="p-0">
-              <slot
-                :index="idx"
-                :item="item"
-                :toggle-details="() => toggleDetails(item)"
-                name="details" />
-            </BTd>
-          </BTr>
-        </template>
-      </BTbody>
+        <BTbody v-if="!visibleItems.length">
+          <BTd :colspan="tableColspan">
+            <slot name="empty">
+              <div class="text-center text-muted" v-text="props.emptyText ?? t('empty')" />
+            </slot>
+          </BTd>
+        </BTbody>
+
+        <BTbody v-else class="fw-semibold text-gray-600 text-nowrap">
+          <template v-for="(item, idx) in visibleItems" :key="getRowKey(item, idx)">
+            <BTr v-bind="getRowAttrs(item, idx)">
+              <BTd v-if="hasDetailsSlot" class="w-25px" style="padding: unset !important;">
+                <BButton
+                  class="w-25px h-100 rounded-0 p-0 border-end border-dashed"
+                  size="sm"
+                  variant="none"
+                  @click="toggleDetails(item)">
+                  <FormatIcon
+  :name="item._showDetails ? 'chevron-down' : 'chevron-right'" class="p-0" size="sm"
+                              variant="primary" />
+                </BButton>
+              </BTd>
+
+              <BTd v-if="!props.hideSelect" class="w-40px px-0">
+                <BFormCheckbox
+                  v-model="item._checked"
+                  :disabled="$datagrid.loading"
+                  class="form-check-sm form-check-custom cell-checkbox" />
+              </BTd>
+
+              <template v-for="[key, column] in visibleColumns" :key="key">
+                <BTd :class="[column.class, column.tdClass]">
+                  <slot :name="`row[${key}]`" v-bind="{ column, idx, item, key }">
+                    <span v-text="column.getter?.(item) ?? getItemValue(item, key)" />
+                  </slot>
+                </BTd>
+              </template>
+
+              <BTd v-if="hasActionsSlot" class="text-end px-3">
+                <DropdownIcon :text="t('actions')" icon="caret-down" toggle-class="py-1 px-3" variant="light-dark">
+                  <slot :index="idx" :item="item" name="actions" />
+                </DropdownIcon>
+              </BTd>
+            </BTr>
+
+            <BTr v-if="hasDetailsSlot && item._showDetails">
+              <BTd :colspan="tableColspan" class="p-0">
+                <slot
+                  :index="idx"
+                  :item="item"
+                  :toggle-details="() => toggleDetails(item)"
+                  name="details" />
+              </BTd>
+            </BTr>
+          </template>
+        </BTbody>
 
-      <BTfoot>
-        <slot name="tfoot" />
-      </BTfoot>
+        <BTfoot>
+          <slot name="tfoot" />
+        </BTfoot>
 
-    </BTableSimple>
+      </BTableSimple>
+    </BCardBody>
 
     <BCardFooter v-if="!props.hideFooter">
       <slot name="footer" />
@@ -317,24 +318,6 @@ function getRowAttrs(item, idx) {
 .cell-checkbox input {
   cursor: pointer;
 }
-
-table thead {
-  font-size: 0.8rem;
-  background: var(--bs-body-bg);
-}
-table thead:before {
-  content: "";
-  position: absolute;
-  inset: 0;
-  z-index: -1;
-  background: rgb(var(--bs-primary-rgb), 0.05);
-}
-table thead tr th:is(:first-child, :last-child) {
-  padding: 0 0.75rem !important;
-}
-table tbody tr td:is(:first-child, :last-child) {
-  padding: 0 0.75rem !important;
-}
 </style>
 
 <i18n lang="json">

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

@@ -20,6 +20,9 @@ export declare const useAuth: () => {
     isLoading: import("vue").Ref<boolean, boolean>;
     logout: () => any;
     retry: () => Promise<void>;
+    signup: ({ redirectTo }?: {
+        redirectTo?: string;
+    }) => any;
     token: import("vue").Ref<string | null, string | null>;
     user: import("vue").Ref<User | undefined, User | undefined>;
 };

package/dist/runtime/composables/useAuth.js

@@ -9,6 +9,10 @@ export const useAuth = () => {
   const isAuthenticated = computed(() => Boolean(user.value?.sub));
   const clear = () => error.value = void 0;
   const logout = () => nuxtApp.$auth0.logout();
+  const signup = ({ redirectTo = "/" } = {}) => nuxtApp.$auth0.loginWithRedirect({
+    appState: { target: redirectTo },
+    authorizationParams: { screen_hint: "signup" }
+  });
   const retry = async () => {
     isLoading.value = true;
     clear();
@@ -31,6 +35,7 @@ export const useAuth = () => {
     isLoading,
     logout,
     retry,
+    signup,
     token,
     user
   };

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

@@ -6,7 +6,7 @@ export interface NotifyOptions {
 export interface NotifyConfirmOptions extends NotifyOptions {
     cancelText?: string;
     confirmText?: string;
-    onConfirm?: () => void;
+    onConfirm?: () => Promise<unknown> | unknown;
 }
 export interface NotifyAlertOptions extends NotifyOptions {
     okText?: string;

package/dist/runtime/composables/useNotify.js

@@ -1,4 +1,5 @@
 import { push } from "notivue";
+import { computed, ref } from "vue";
 import { useModal } from "bootstrap-vue-next";
 export function useNotify() {
   const $modal = useModal();
@@ -25,15 +26,27 @@ export function useNotify() {
     instance.show();
   }
   function confirm(options) {
-    const instance = $modal.create({
+    const busy = ref(false);
+    const instance = $modal.create(computed(() => ({
       body: options.message,
+      busy: busy.value,
+      // disables both buttons
       cancelTitle: options.cancelText || "Cancel",
       cancelVariant: "secondary",
+      noCloseOnEsc: busy.value,
       okTitle: options.confirmText || "OK",
       okVariant: options.variant || "primary",
-      onOk: options.onConfirm,
+      onHidden: () => void instance.destroy(),
+      // one modal per call: never pile up hidden ones
+      onOk: (event) => {
+        const result = options.onConfirm?.();
+        if (!(result instanceof Promise)) return;
+        event.preventDefault();
+        busy.value = true;
+        result.then((value) => value !== false && instance.hide("ok")).finally(() => void (busy.value = false));
+      },
       title: options.title || "Confirm"
-    });
+    })));
     instance.show();
   }
   return { toast, alert, confirm };

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

@@ -53,10 +53,12 @@ export default defineNuxtPlugin(async ({ callHook, hook }) => {
     return initTenantContext();
   };
   hook("merkaly:auth:retry", () => resolveIdentity().then(startSession));
-  auth0.handleRedirectCallback = () => self0.handleRedirectCallback().then(async ({ appState }) => {
+  auth0.handleRedirectCallback = () => self0.handleRedirectCallback().then(async (result) => {
+    const { appState } = result;
     await resolveIdentity();
     await startSession();
     void navigateTo(appState?.target || "/");
+    return result;
   }, (reason) => fail({ message: reason.error_description || reason.message, stage: "callback" }));
   auth0.loginWithRedirect = (options = {}) => self0.loginWithRedirect(defu(options, {
     authorizationParams: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@merkaly/nuxt",
-  "version": "0.12.3",
+  "version": "0.12.5",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/merkaly-io/nuxt.git"
@@ -30,7 +30,7 @@
   "dependencies": {
     "@auth0/auth0-spa-js": "^2.30.0",
     "@bootstrap-vue-next/nuxt": "^1.0.0",
-    "@nuxt/devtools": "^4.0.0",
+    "@nuxt/devtools": "^4.1.0",
     "@nuxt/eslint": "1.17.0",
     "@nuxt/eslint-config": "^1.17.0",
     "@nuxt/fonts": "1.2.0",
@@ -40,7 +40,7 @@
     "@nuxtjs/plausible": "^4.0.0",
     "@nuxtjs/robots": "^7.0.2",
     "@nuxtjs/sitemap": "^9.1.0",
-    "@sentry/nuxt": "^11.10.0",
+    "@sentry/nuxt": "^11.11.0",
     "@types/node": "latest",
     "@types/vue-select": "^3.16.8",
     "@vueuse/components": "^15.0.0",
@@ -57,9 +57,9 @@
     "gsap": "^3.15.0",
     "notivue": "^2.4.5",
     "nuxt": "^4.6.3",
-    "posthog-js": "^1.446.0",
+    "posthog-js": "^1.447.1",
     "reflect-metadata": "^0.2.2",
-    "sass": "^1.107.1",
+    "sass": "^1.108.0",
     "typescript": "~5.9.3",
     "v-money3": "^3.26.1",
     "vite-svg-loader": "^5.1.1",