@merkaly/nuxt 0.12.3 → 0.12.4

package/README.md

@@ -113,6 +113,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.4",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@merkaly/nuxt",
-  "version": "0.12.3",
+  "version": "0.12.4",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/merkaly-io/nuxt.git"