@omnitend/dashboard-for-laravel 0.41.2 → 0.42.1

package/resources/js/components/extended/DXSaveButton.vue

@@ -0,0 +1,82 @@
+<!--
+  DXSaveButton — a save button that confirms the save in place.
+
+  Three states, driven by two booleans the consumer owns:
+
+  - idle (`saving` and `saved` both false) — the normal Save button.
+  - saving (`saving`) — DButton's busy state: disabled at once, spinner after
+    the anti-flash delay, `savingText` if given.
+  - saved (`saved` and not `saving`) — "✓ Saved" (tick icon) and genuinely
+    `disabled`, until the consumer clears `saved` (typically on the next edit
+    to the form). The colour does not change: the button keeps its own
+    variant (navy primary by default) at full strength, neither the neutral
+    grey of a disabled button nor a faded one. Only the label and the
+    disabled state say it is saved.
+
+  `saving` wins over `saved`, so re-saving from the saved state shows busy.
+  The label change is announced: the button itself is a polite live region,
+  and while it is `aria-busy` (saving) announcements wait until it settles,
+  so a screen reader hears "Saved" once the save lands.
+
+  Every other attribute (type, block, size, class, listeners…) passes through
+  to DButton. DXForm uses this for its submit button.
+-->
+<template>
+    <DButton
+        v-bind="$attrs"
+        :variant="variant"
+        :icon="isShowingSaved ? 'check-lg' : icon"
+        :loading="saving"
+        :loading-text="savingText"
+        :disabled="disabled || isShowingSaved"
+        :class="{ 'dx-save-button--saved': isShowingSaved }"
+        aria-live="polite"
+    >
+        <template v-if="isShowingSaved">{{ savedText }}</template>
+        <slot v-else>Save</slot>
+    </DButton>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import type { ButtonVariant } from "bootstrap-vue-next";
+import DButton from "../base/DButton.vue";
+
+defineOptions({ inheritAttrs: false });
+
+interface Props {
+    /** A save is in flight: busy/spinner state (DButton's `loading`). */
+    saving?: boolean;
+
+    /**
+     * The form's current contents have been saved: show `savedText` with a
+     * tick and disable the button. Clear it when the form changes.
+     */
+    saved?: boolean;
+
+    /** Label for the saved state. @default 'Saved' */
+    savedText?: string;
+
+    /** Label shown beside the spinner while saving (DButton's `loadingText`). */
+    savingText?: string;
+
+    /** Variant in every state; the saved state keeps it. @default 'primary' */
+    variant?: ButtonVariant | null;
+
+    /** Leading icon when not saved. The saved state shows `check-lg`. */
+    icon?: string;
+
+    /** Disable the button regardless of state. */
+    disabled?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    saving: false,
+    saved: false,
+    savedText: "Saved",
+    variant: "primary",
+    disabled: false,
+});
+
+const isShowingSaved = computed(() => props.saved && !props.saving);
+</script>

package/resources/js/components/extended/DXTable.vue

@@ -100,7 +100,7 @@
                                 <DFormInput
                                     v-if="field.filter === 'text'"
                                     :model-value="effectiveFilters[filterKeyFor(field)] || ''"
-                                    :placeholder="field.filterPlaceholder || `Search ${field.label || field.key}...`"
+                                    :placeholder="field.filterPlaceholder || `${field.label || field.key}…`"
                                     size="sm"
                                     @update:model-value="handleFilterChange(filterKeyFor(field), $event as string)"
                                 />
@@ -149,7 +149,7 @@
                                 <DFormInput
                                     v-else-if="field.filter === 'number'"
                                     :model-value="effectiveFilters[filterKeyFor(field)] || ''"
-                                    :placeholder="field.filterPlaceholder || `Filter ${field.label || field.key}...`"
+                                    :placeholder="field.filterPlaceholder || `${field.label || field.key}…`"
                                     type="number"
                                     size="sm"
                                     @update:model-value="handleFilterChange(filterKeyFor(field), $event as string)"
@@ -577,7 +577,10 @@ export interface Props<TItem = any> {
     /** Error message */
     error?: string | null;
 
-    /** Pagination data (Inertia mode) */
+    /**
+     * Pagination data (Inertia mode). Omit it on a plain `items` table and the
+     * footer counts the rows given as one page.
+     */
     pagination?: PaginationData;
 
     /** Show pagination controls */
@@ -685,7 +688,8 @@ export interface Props<TItem = any> {
     /**
      * Label column width for the edit modal's horizontal layout, forwarded to
      * `DXForm`'s `labelCols` (a single width or a per-breakpoint object). Only
-     * meaningful when `editLayout` is "horizontal".
+     * meaningful when `editLayout` is "horizontal". Omitted: DXForm's default
+     * 45% label column.
      */
     editLabelCols?: LabelCols;
 
@@ -989,8 +993,11 @@ if (
     console.warn('[DXTable] clientSide mode ignores provider, apiUrl and inertiaUrl props. Data is processed locally from items.');
 }
 
-// Computed for effective busy state (provider mode uses 'busy', inertia uses 'loading')
-const effectiveBusy = computed(() => isProviderMode.value ? props.busy : props.loading);
+// Effective busy state. Provider mode: `busy` (two-way with BTable's own
+// loading). Items and client-side modes: `busy`, the documented prop, or the
+// deprecated `loading`; these modes used to read only `loading`, so a page
+// passing `:busy` showed the empty text while its rows were still loading.
+const effectiveBusy = computed(() => isProviderMode.value ? props.busy : props.busy || props.loading);
 
 /*
  * `perPage`, `sortBy` and `filters` are dual-purpose: with a `v-model` they are
@@ -2023,9 +2030,10 @@ const handleApiPageChange = (page: number) => {
  *   `currentPage` and `perPage`; `busy` is the raw prop (two-way with BTable's
  *   provider loading via `@update:busy`).
  * - client-side: rows are pre-sliced by `clientSidePaginatedItems`, and local
- *   sorting is off (we sort in `clientSideSortedItems`).
+ *   sorting is off (we sort in `clientSideSortedItems`); `busy` is
+ *   `effectiveBusy`.
  * - inertia: server-paginated `items`, local sorting off, `busy` is
- *   `effectiveBusy` (the `loading` prop in this mode).
+ *   `effectiveBusy` (`busy` or the deprecated `loading` in this mode).
  *
  * A key absent from the returned object is simply not bound, which is what the
  * original blocks did (e.g. non-provider modes never set `provider`/`currentPage`,
@@ -2041,7 +2049,7 @@ const tableModeBindings = computed<Record<string, unknown>>(() => {
         };
     }
     if (isClientSideMode.value) {
-        return { items: clientSidePaginatedItems.value, noLocalSorting: true };
+        return { items: clientSidePaginatedItems.value, noLocalSorting: true, busy: effectiveBusy.value };
     }
     // inertia
     return { items: resolvedItems.value, noLocalSorting: true, busy: effectiveBusy.value };
@@ -2050,13 +2058,32 @@ const tableModeBindings = computed<Record<string, unknown>>(() => {
 /*
  * The pagination metadata the single footer renders, by mode (#123). Null means
  * no footer: only provider mode has that case (a custom provider with no
- * `pagination` prop). Client-side always has a computed object; inertia's
- * `pagination` prop carries a default object, so both always render a footer —
- * matching the three original per-mode `v-if`s exactly.
+ * `pagination` prop). Client-side and inertia always render a footer.
+ *
+ * Inertia mode is also what a plain `:items` table with no `pagination` lands
+ * in. Its footer read the `withDefaults` placeholder (`total: 0`), so two
+ * rendered rows sat above "0 items.". With no `pagination` passed, the rows
+ * given ARE the whole set: describe them as one page.
  */
+const unpaginatedItemsPagination = computed<PaginationData>(() => {
+    const itemCount = resolvedItems.value?.length ?? 0;
+    return {
+        current_page: 1,
+        // One page holding every row, so the pager (shown only when
+        // total > per_page) never appears. Floor of 1 keeps the page
+        // maths away from a zero divisor.
+        per_page: Math.max(itemCount, 1),
+        total: itemCount,
+        from: itemCount > 0 ? 1 : 0,
+        to: itemCount,
+    };
+});
+
 const activePagination = computed<PaginationData | null>(() => {
     if (isClientSideMode.value) return clientSidePagination.value;
-    if (isInertiaMode.value) return props.pagination;
+    if (isInertiaMode.value) {
+        return paginationWasProvided ? props.pagination : unpaginatedItemsPagination.value;
+    }
     if (isProviderMode.value) return providerPagination.value;
     return null;
 });
@@ -2347,7 +2374,9 @@ const tableSlotSignature = (slots: Record<string, unknown>): string => {
 // three data modes from one place.
 const tablePassthroughProps = computed(() => ({
     footClone: props.footClone,
-    showEmpty: props.showEmpty,
+    // No empty text while rows are loading: "No … found" during a load reads as
+    // "there is no data". Provider mode is unchanged by this.
+    showEmpty: props.showEmpty && (isProviderMode.value || effectiveBusy.value === false),
     emptyText:
         props.emptyText ??
         (hasActiveFilters.value
@@ -2457,7 +2486,7 @@ defineExpose({
 }
 
 /* Muted header titles (#157): in a data table the CONTENT is what matters —
-   near-black bold headers compete with it. Grey (still bold) keeps the
+   near-black bold headers compete with it. Grey (weight 500) keeps the
    structure without the shout. Consumers re-louden via the token. */
 :deep(thead th) {
     color: var(--dx-table-header-color, var(--bs-secondary-color));

package/resources/js/composables/useForm.ts

@@ -31,6 +31,13 @@ export interface FormState<TData extends Record<string, any>> {
     message: string;
     touched: Record<string, boolean>;
     recentlySuccessful: boolean;
+    /**
+     * Whether the most recent submission succeeded. Unlike
+     * `recentlySuccessful` (which clears itself after 1.5s) this stays true
+     * until the next submission starts, and is false after a failure — the
+     * Inertia `wasSuccessful` semantics. DXForm's saved state reads it.
+     */
+    wasSuccessful: boolean;
     shouldShowMessage: boolean;
 }
 
@@ -172,6 +179,7 @@ export function useForm<TData extends Record<string, any>>(
         message: "",
         touched: {},
         recentlySuccessful: false,
+        wasSuccessful: false,
         shouldShowMessage: false,
     });
 
@@ -263,6 +271,7 @@ export function useForm<TData extends Record<string, any>>(
     ): Promise<TResponse> => {
         inFlightCount += 1;
         state.processing = true;
+        state.wasSuccessful = false;
         if (!options.preserveErrors) clearErrors();
 
         const payloadRaw = (
@@ -326,6 +335,7 @@ export function useForm<TData extends Record<string, any>>(
                         });
 
             state.recentlySuccessful = true;
+            state.wasSuccessful = true;
             if (successTimer !== null) clearTimeout(successTimer);
             successTimer = setTimeout(() => {
                 state.recentlySuccessful = false;
@@ -338,6 +348,7 @@ export function useForm<TData extends Record<string, any>>(
             }
             return data;
         } catch (err) {
+            state.wasSuccessful = false;
             const { errors, message } = errorsFromLaravel(err);
             setErrors(errors);
             setMessage(message);

package/resources/js/composables/useToast.ts

@@ -13,7 +13,7 @@ import type {
 // class, driving Bootstrap's own `--bs-toast-*` variables cleanly. An
 // unrecognised variant (e.g. "primary", "dark", or none) falls through to
 // BVN's default `.text-bg-*` styling unchanged.
-const THEMED_TOAST_VARIANTS = new Set(["success", "danger", "warning", "info"]);
+const THEMED_TOAST_VARIANTS = new Set(["success", "danger", "warning", "info", "pending"]);
 
 function themeToastParam(param: Record<string, unknown>): Record<string, unknown> {
     const variant = param.variant as string | null | undefined;

package/resources/js/index.ts

@@ -10,9 +10,11 @@ export { default as DXForm } from "./components/extended/DXForm.vue";
 export { default as DXField } from "./components/extended/DXField.vue";
 export { default as DXFieldLabel } from "./components/extended/DXFieldLabel.vue";
 export { default as DXModalActions } from "./components/extended/DXModalActions.vue";
+export { default as DXSaveButton } from "./components/extended/DXSaveButton.vue";
 export { default as DXLoading } from "./components/extended/DXLoading.vue";
 export { default as DXSwitch } from "./components/extended/DXSwitch.vue";
 export { default as DXCurrencyInput } from "./components/extended/DXCurrencyInput.vue";
+export { default as DXNumberStepper } from "./components/extended/DXNumberStepper.vue";
 export { default as DXStatCard } from "./components/extended/DXStatCard.vue";
 // Chart components moved to the `@omnitend/dashboard-for-laravel/charts` entry
 // (#142) so chart.js / vue-chartjs stay genuinely optional peers — the main

package/resources/js/types/index.ts

@@ -73,8 +73,9 @@ export type OptionsLoader = (model: any) => Promise<FieldOption[]>;
  * Deliberately excludes `boolean` (which BFormGroup's own `labelCols` prop
  * accepts): Vue's type-based `defineProps` auto-defaults an omitted prop to
  * `false` (not `undefined`) whenever its declared type includes `boolean`,
- * which would silently break the `field.labelCols ?? formLabelCols ?? 3`
- * fallback chain used to resolve this value.
+ * which would silently break the `field.labelCols ?? formLabelCols` fallback
+ * chain used to resolve this value (`undefined` at the end of it means the
+ * default 45% label column, `--dx-form-label-width`).
  */
 export type LabelCols =
     | number
@@ -241,7 +242,8 @@ export interface FieldDefinition {
 
     /**
      * Per-field override of DXForm's `labelCols` prop, for horizontal
-     * layout. Falls back to the form-level `labelCols` when omitted.
+     * layout. Falls back to the form-level `labelCols` when omitted, and to
+     * the default 45% label column (`--dx-form-label-width`) when neither is set.
      */
     labelCols?: LabelCols;
 
@@ -636,3 +638,19 @@ export interface FormTab {
     /** Lazily mount tab content until first activated */
     lazy?: boolean;
 }
+
+/**
+ * The theme's extra colour variant, `pending`: waiting, and the next move is
+ * not yours ("awaiting payment", "sent to printer, not yet confirmed").
+ * theme.scss paints it everywhere a stock variant is painted (badge, soft and
+ * outline button, alert, text, subtle utilities, table row, list-group item,
+ * toast). Registering it on bootstrap-vue-next's `BaseColorVariant` adds it to
+ * every variant union derived from that interface (`ColorVariant`,
+ * `ButtonVariant` incl. `outline-pending`, the `-subtle` and `-emphasis`
+ * forms), so `<DBadge variant="pending">` type-checks.
+ */
+declare module "bootstrap-vue-next" {
+    interface BaseColorVariant {
+        pending: unknown;
+    }
+}