@omnitend/dashboard-for-laravel 0.41.1 → 0.42.0

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)"
@@ -174,7 +174,10 @@
                         <template v-for="field in fields" :key="`head-${field.key}`" #[`head(${field.key})`]="{ label }">
                             <div class="d-flex align-items-center justify-content-between gap-2">
                                 <div class="flex-grow-1">
-                                    <div class="fw-semibold">{{ headerLabel(field, label) }}</div>
+                                    <div class="fw-semibold">
+                                        <DXFieldLabel v-if="field.info" :label="headerLabel(field, label)" :info="field.info" />
+                                        <template v-else>{{ headerLabel(field, label) }}</template>
+                                    </div>
                                     <small v-if="field.hint" class="text-muted d-block" style="font-weight: normal;">{{ field.hint }}</small>
                                 </div>
 
@@ -326,6 +329,7 @@ import DTable from "../base/DTable.vue";
 import DFormInput from "../base/DFormInput.vue";
 import DFormSelect from "../base/DFormSelect.vue";
 import DAutocomplete from "../base/DAutocomplete.vue";
+import DXFieldLabel from "./DXFieldLabel.vue";
 import DButton from "../base/DButton.vue";
 import DXTablePagination from "./DXTablePagination.vue";
 import DXTableEditorModal from "./DXTableEditorModal.vue";
@@ -404,6 +408,8 @@ export interface TableField {
     filterAllText?: string;
     sortable?: boolean;
     hint?: string;
+    /** Help revealed from a focusable info icon beside the column label. */
+    info?: string;
     /**
      * The inline filter control for this column, or `false`/omit for none. See
      * `FilterType`. `'select'` (typeahead) and `'select-native'` (plain
@@ -571,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 */
@@ -679,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;
 
@@ -983,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
@@ -1767,6 +1780,7 @@ watch(clientSideLastPage, (lastPage) => {
 // Client-side paginated items (final output)
 const clientSidePaginatedItems = computed<T[]>(() => {
     if (!isClientSideMode.value) return [];
+    if (!props.showPagination) return clientSideSortedItems.value;
 
     const perPage = effectivePerPage.value;
     const start = (clientSidePage.value - 1) * perPage;
@@ -1783,19 +1797,19 @@ const clientSidePagination = computed<PaginationData>(() => {
     const lastPage = clientSideLastPage.value;
 
     // Same clamped page the slice uses — see `clientSidePage` (#118).
-    const validPage = clientSidePage.value;
+    const validPage = props.showPagination ? clientSidePage.value : 1;
 
-    const from = total > 0 ? (validPage - 1) * perPage + 1 : 0;
-    const to = Math.min(validPage * perPage, total);
+    const from = total > 0 ? (props.showPagination ? (validPage - 1) * perPage + 1 : 1) : 0;
+    const to = props.showPagination ? Math.min(validPage * perPage, total) : total;
 
     return {
         current_page: validPage,
-        per_page: perPage,
+        per_page: props.showPagination ? perPage : Math.max(1, total),
         total,
         total_unfiltered: totalUnfiltered !== total ? totalUnfiltered : undefined,
         from,
         to,
-        last_page: lastPage,
+        last_page: props.showPagination ? lastPage : 1,
     };
 });
 
@@ -1822,7 +1836,7 @@ const handleClientSidePageChange = (page: number) => {
 // Computed: determine if per-page selector should be shown
 // Hide it when total items is less than the smallest page size option
 const shouldShowPerPageSelector = computed(() => {
-    if (!props.showPerPageSelector) return false;
+    if (!props.showPagination || !props.showPerPageSelector) return false;
 
     const smallestOption = Math.min(...props.perPageOptions);
     const total = isClientSideMode.value
@@ -2016,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`,
@@ -2034,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 };
@@ -2043,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;
 });
@@ -2340,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
@@ -2450,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/components/extended/DXTablePagination.vue

@@ -1,6 +1,6 @@
 <!--
   @component
-  Internal pagination + per-page footer for `DXTable`. Renders the pager, the
+  Pagination + per-page footer shared by `DXTable` and standalone tables. Renders the pager, the
   per-page selector, and the "X to Y out of Z items" info line (with the
   "Filtered from N" note when a column filter is active).
 

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

@@ -9,8 +9,12 @@ export { default as DXDashboard } from "./components/extended/DXDashboard.vue";
 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
@@ -23,6 +27,7 @@ export { default as DXRepeater } from "./components/extended/DXRepeater.vue";
  */
 export { default as DXBasicForm } from "./components/extended/DXBasicForm.vue";
 export { default as DXTable } from "./components/extended/DXTable.vue";
+export { default as DXTablePagination } from "./components/extended/DXTablePagination.vue";
 export { default as DXDashboardSidebar } from "./components/extended/DXDashboardSidebar.vue";
 export { default as DXDashboardNavbar } from "./components/extended/DXDashboardNavbar.vue";
 export { default as DXUserAvatar } from "./components/extended/DXUserAvatar.vue";

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;
+    }
+}