@omnitend/dashboard-for-laravel 0.28.0 → 0.30.0

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

@@ -57,6 +57,7 @@
                         :striped="striped"
                         :hover="hover"
                         :responsive="responsive"
+                        :fixed="fixedLayout"
                         :tbody-tr-class="composeRowClass"
                         v-bind="{ ...tableModeBindings, ...tablePassthroughProps }"
                         @update:sort-by="handleSortChange"
@@ -65,6 +66,25 @@
                         @update:busy="handleBusyChange"
                         @row-clicked="handleRowClick"
                     >
+                        <!-- Per-column widths (#156) via a `<colgroup>`. bvn nests this
+                             slot's `<col>`s inside a `<colgroup>` it renders. Only
+                             emitted when a field declares a width AND the consumer hasn't
+                             supplied their own `table-colgroup` (forwarded generically) —
+                             so a table with no widths gets no colgroup and renders exactly
+                             as before. `<col>` widths are authoritative under
+                             `table-layout: fixed`, where the filter row (not the header)
+                             is the width-determining first row. -->
+                        <template
+                            v-if="fieldsHaveWidths && !$slots['table-colgroup']"
+                            #table-colgroup
+                        >
+                            <col
+                                v-for="field in fields"
+                                :key="`col-${field.key}`"
+                                :style="columnStyleFor(field)"
+                            />
+                        </template>
+
                         <!-- DXTable owns `thead-top` (its filter row lives there), so a
                              consumer's own thead-top content is COMPOSED above it rather
                              than being dropped: a grouped column-header banner or a pinned
@@ -177,6 +197,7 @@
                         :per-page-options="perPageOptions"
                         :show-pagination="showPagination"
                         :show-per-page-selector="shouldShowPerPageSelector"
+                        :show-count="showCount"
                         :singular-item-name="singularItemName"
                         :plural-item-name="pluralItemName"
                         :has-active-filters="hasActiveFilters"
@@ -288,6 +309,21 @@ export interface TableField {
     filter?: FilterType;
     filterOptions?: FilterOption[];
     filterPlaceholder?: string;
+
+    /**
+     * Fixed width for this column, applied via a `<colgroup>` `<col>`. A number
+     * is treated as pixels (`200` → `200px`); a string is used verbatim
+     * (`"20%"`, `"12rem"`). Pair with the table-level `fixedLayout` prop so the
+     * width is authoritative and the column stops resizing to fit its content —
+     * without `fixedLayout` a wider cell can still stretch the column (#156).
+     */
+    width?: string | number;
+
+    /**
+     * Minimum width for this column, applied via the same `<col>` as `width`.
+     * A number is pixels; a string is used verbatim.
+     */
+    minWidth?: string | number;
     [key: string]: any;
 }
 
@@ -390,13 +426,30 @@ export interface Props<TItem = any> {
     /** Show per-page selector */
     showPerPageSelector?: boolean;
 
+    /**
+     * Show the footer's item-count caption ("N items." / "X to Y out of Z
+     * items."). Defaults to `true`. Set `false` to suppress just the caption,
+     * independent of the pager — a page ported from a plain `<b-table>` that
+     * hides the pager with `:show-pagination="false"` would otherwise gain a
+     * caption it never had (#127).
+     */
+    showCount?: boolean;
+
     /** Per-page options for selector */
     perPageOptions?: number[];
 
     /** Current page (for provider mode) */
     currentPage?: number;
 
-    /** Items per page (for provider mode, v-model support) */
+    /**
+     * Items per page. With a `v-model:per-page` it is controlled state; a bare
+     * `:per-page="20"` is the INITIAL page size (see the initial-value vs
+     * controlled note above). When passed explicitly it takes PRECEDENCE over any
+     * per-page preference persisted in localStorage — `:per-page="20"` always
+     * starts at 20, never a size the user once picked on another table (#124).
+     * Omit it to let a stored preference (URL-keyed tables only) or the default
+     * apply.
+     */
     perPage?: number;
 
     /** Striped (banded) rows. Off by default — banding adds little on short
@@ -525,6 +578,16 @@ export interface Props<TItem = any> {
 
     /** Enable client-side filtering, sorting, and pagination on items array */
     clientSide?: boolean;
+
+    /**
+     * Apply `table-layout: fixed` to the underlying table. Off by default, so
+     * existing tables keep their content-sized columns. When on, column widths
+     * stop depending on cell content, so they no longer reshuffle when a filter
+     * narrows the rows — the table stays put as you filter (#156). Combine with
+     * per-field `width`/`minWidth` to control the proportions; columns with no
+     * declared width share the remaining space equally.
+     */
+    fixedLayout?: boolean;
 }
 
 const props = withDefaults(defineProps<Props<T>>(), {
@@ -542,6 +605,7 @@ const props = withDefaults(defineProps<Props<T>>(), {
     }),
     showPagination: true,
     showPerPageSelector: true,
+    showCount: true,
     perPageOptions: () => [10, 20, 50, 100],
     currentPage: 1,
     // perPage: 10,  // Don't set default - let internalPerPage handle it
@@ -556,6 +620,7 @@ const props = withDefaults(defineProps<Props<T>>(), {
     showCreateButton: true,
     footClone: false,
     showEmpty: true,
+    fixedLayout: false,
 });
 
 const emit = defineEmits<{
@@ -906,6 +971,35 @@ const hasFieldValue = (item: unknown, key: string): boolean => {
 const dottedCellFields = (slots: Record<string, unknown>): TableField[] =>
     props.fields.filter((field) => field.key.includes('.') && !slots[`cell(${field.key})`]);
 
+/*
+ * Per-column widths (#156). A field's `width`/`minWidth` is applied through a
+ * `<colgroup>` `<col>`, NOT the header `<th>`: with `table-layout: fixed` the
+ * column widths are taken from the FIRST row of cells, and DXTable's inline
+ * filter row (`thead-top`) is that first row — so a width on the header `<th>`
+ * would be ignored whenever filters are present. A `<col>` width is
+ * authoritative regardless of row order, in both fixed and auto layout.
+ */
+const sizeToCss = (value: string | number): string =>
+    typeof value === 'number' ? `${value}px` : value;
+
+const hasDeclaredWidth = (field: TableField): boolean =>
+    (field.width !== undefined && field.width !== null) ||
+    (field.minWidth !== undefined && field.minWidth !== null);
+
+const columnStyleFor = (field: TableField): Record<string, string> | undefined => {
+    const style: Record<string, string> = {};
+    if (field.width !== undefined && field.width !== null) style.width = sizeToCss(field.width);
+    if (field.minWidth !== undefined && field.minWidth !== null) {
+        style.minWidth = sizeToCss(field.minWidth);
+    }
+    return Object.keys(style).length > 0 ? style : undefined;
+};
+
+// Only inject a `<colgroup>` when a column actually declares a width — otherwise
+// the table renders exactly as before (no colgroup at all), preserving the
+// content-sized default byte-for-byte.
+const fieldsHaveWidths = computed(() => props.fields.some(hasDeclaredWidth));
+
 // Computed: Get effective filter options for a field
 // The key a column's filter is SENT under, which is not always the column's own
 // key: a display column can filter on a different server param via `filterKey`.
@@ -973,27 +1067,51 @@ const getFieldFilterOptions = (field: TableField): FilterOption[] => {
     return [];
 };
 
-// LocalStorage key for perPage preference
-const perPageStorageKey = computed(() => {
-    const url = props.inertiaUrl || props.apiUrl || 'table';
+// LocalStorage key for the per-page preference. Only tables identified by a URL
+// (inertiaUrl / apiUrl) persist their preference: a keyless client-side table
+// has no stable identity across reloads, and every such table would otherwise
+// share the literal `table` key and clobber each other's stored value (#124).
+// Returns null when there is nothing stable to key on — every read and write
+// guards on that, so a keyless table simply doesn't persist.
+const perPageStorageKey = computed<string | null>(() => {
+    const url = props.inertiaUrl || props.apiUrl;
+    if (!url) return null;
     return `dxtable-perpage-${url.replace(/\//g, '-')}`;
 });
 
+// Whether the consumer EXPLICITLY passed `perPage`. A defaulted/omitted prop is
+// indistinguishable via `props`, so this reads the raw vnode props — the same
+// technique as `hasListener` above (Vue keeps passed props on the vnode).
+const wasPerPagePassed = ((): boolean => {
+    const vnodeProps = instance?.vnode.props ?? {};
+    return 'perPage' in vnodeProps || 'per-page' in vnodeProps;
+})();
+
 // Load perPage from localStorage or use default
 const getInitialPerPage = (): number => {
+    // An explicitly-passed `perPage` wins over any stored preference (#124):
+    // `:per-page="20"` means "start at 20" (since #110) and must not be silently
+    // overridden by a size the user once picked on a different table.
+    if (wasPerPagePassed && props.perPage !== undefined) {
+        return props.perPage;
+    }
+
     if (typeof window === 'undefined') return props.perPage || 10;
 
-    try {
-        const saved = localStorage.getItem(perPageStorageKey.value);
-        if (saved !== null) {
-            const parsed = parseInt(saved, 10);
-            // Validate it's in the allowed options
-            if (props.perPageOptions.includes(parsed)) {
-                return parsed;
+    const storageKey = perPageStorageKey.value;
+    if (storageKey !== null) {
+        try {
+            const saved = localStorage.getItem(storageKey);
+            if (saved !== null) {
+                const parsed = parseInt(saved, 10);
+                // Validate it's in the allowed options
+                if (props.perPageOptions.includes(parsed)) {
+                    return parsed;
+                }
             }
+        } catch (error) {
+            console.error('Error loading perPage from localStorage:', error);
         }
-    } catch (error) {
-        console.error('Error loading perPage from localStorage:', error);
     }
 
     return props.perPage || 10;
@@ -1006,10 +1124,11 @@ const internalPerPage = ref<number>(getInitialPerPage());
 watch(() => props.pagination?.per_page, (newPerPage) => {
     if (newPerPage && newPerPage !== internalPerPage.value) {
         internalPerPage.value = newPerPage;
-        // Also update localStorage to stay in sync
-        if (typeof window !== 'undefined') {
+        // Also update localStorage to stay in sync (only for URL-keyed tables).
+        const storageKey = perPageStorageKey.value;
+        if (typeof window !== 'undefined' && storageKey !== null) {
             try {
-                localStorage.setItem(perPageStorageKey.value, newPerPage.toString());
+                localStorage.setItem(storageKey, newPerPage.toString());
             } catch (error) {
                 console.error('Error saving perPage from watcher:', error);
             }
@@ -1445,10 +1564,11 @@ const handlePerPageChange = (newPerPage: number | string | null | (number | stri
         internalPerPage.value = perPageNum;
     }
 
-    // Save to localStorage
-    if (typeof window !== 'undefined') {
+    // Save to localStorage (only for URL-keyed tables — see perPageStorageKey).
+    const storageKey = perPageStorageKey.value;
+    if (typeof window !== 'undefined' && storageKey !== null) {
         try {
-            localStorage.setItem(perPageStorageKey.value, perPageNum.toString());
+            localStorage.setItem(storageKey, perPageNum.toString());
         } catch (error) {
             console.error('Error saving perPage to localStorage:', error);
         }

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

@@ -37,6 +37,9 @@
              from one row into the next. The key gives each record a fresh
              field subtree; the data still lives in `form`, so nothing
              is lost by remounting. -->
+        <!-- Tabs stay bare here: the modal body already provides the panel
+             boundary, so DXForm's default card-panel-around-tabs (#159) would be
+             redundant nested chrome inside the modal. -->
         <DXForm
             v-if="form"
             :key="formInstanceKey"
@@ -44,6 +47,7 @@
             :form="form"
             :fields="fields"
             :tabs="tabs"
+            :card-tabs="false"
             :context="item ?? undefined"
             :show-submit="false"
             @update:active-tab="emit('update:activeTab', $event)"

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

@@ -45,8 +45,9 @@
             </div>
         </div>
 
-        <!-- Bottom row: Info text -->
-        <div class="small text-muted">
+        <!-- Bottom row: Info text (the item-count caption). Suppressed by
+             `showCount` independent of the pager (#127). -->
+        <div v-if="showCount" class="small text-muted">
             <div>
                 <template v-if="pagination.total > pagination.per_page">
                     {{ pagination.from }} to {{ pagination.to }} out of {{ pagination.total }} {{ pagination.total === 1 ? singularItemName : pluralItemName }}.
@@ -81,6 +82,8 @@ interface Props {
     showPagination: boolean;
     /** Whether to render the per-page selector. */
     showPerPageSelector: boolean;
+    /** Whether to render the item-count caption (the "X out of Z items" line). */
+    showCount: boolean;
     /** Singular item noun for the info line (e.g. "product"). */
     singularItemName: string;
     /** Plural item noun for the info line (e.g. "products"). */

package/resources/js/composables/useForm.ts

@@ -154,6 +154,17 @@ export function useForm<TData extends Record<string, any>>(
 ): UseFormReturn<TData> {
     const snapshot = deepClone(initialData);
 
+    // Concurrency guards (#133). `useForm` allows overlapping submissions (a
+    // consumer can fire two before the first resolves), so:
+    //  - `inFlightCount` tracks how many requests are active; `processing` only
+    //    flips false when the LAST one finishes (a per-request `finally` flipping
+    //    it unconditionally re-enabled the button while another was still running).
+    //  - `successTimer` is a single handle for the `recentlySuccessful` reset; a
+    //    new success clears any pending timer before scheduling its own, so an
+    //    earlier success's timer can't clear the flag a later success just set.
+    let inFlightCount = 0;
+    let successTimer: ReturnType<typeof setTimeout> | null = null;
+
     const state = reactive<FormState<TData>>({
         data: deepClone(snapshot) as TData,
         errors: {},
@@ -250,12 +261,22 @@ export function useForm<TData extends Record<string, any>>(
         url: string,
         options: FormSubmitOptions<TData, TResponse> = {},
     ): Promise<TResponse> => {
+        inFlightCount += 1;
         state.processing = true;
         if (!options.preserveErrors) clearErrors();
 
         const payloadRaw = (
             options.transform
-                ? options.transform(state.data as TData)
+                ? // Give `transform` a COPY of the form data (#150), so a transform
+                  // that MUTATES what it receives — `data.allergens = assemble();
+                  // return data` — shapes the outbound payload WITHOUT corrupting
+                  // form state. (This is why consumers reach for a transform instead
+                  // of mutating `form.data` in a validation guard.) A shallow copy:
+                  // returning a new object is still the tidiest style, and a
+                  // deeply-nested field should be replaced, not mutated in place.
+                  options.transform({
+                      ...(toRaw(state.data) as Record<string, any>),
+                  } as TData)
                 : (state.data as TData)
         ) as any;
 
@@ -305,7 +326,11 @@ export function useForm<TData extends Record<string, any>>(
                         });
 
             state.recentlySuccessful = true;
-            setTimeout(() => (state.recentlySuccessful = false), 1500);
+            if (successTimer !== null) clearTimeout(successTimer);
+            successTimer = setTimeout(() => {
+                state.recentlySuccessful = false;
+                successTimer = null;
+            }, 1500);
 
             options.onSuccess?.(data);
             if (options.resetOnSuccess) {
@@ -319,7 +344,9 @@ export function useForm<TData extends Record<string, any>>(
             options.onError?.(err as FormError);
             throw err;
         } finally {
-            state.processing = false;
+            inFlightCount -= 1;
+            // Only clear `processing` once no submission is still in flight.
+            if (inFlightCount === 0) state.processing = false;
             options.onFinish?.();
         }
     };

package/resources/js/index.ts

@@ -11,9 +11,9 @@ export { default as DXField } from "./components/extended/DXField.vue";
 export { default as DXFieldLabel } from "./components/extended/DXFieldLabel.vue";
 export { default as DXSwitch } from "./components/extended/DXSwitch.vue";
 export { default as DXStatCard } from "./components/extended/DXStatCard.vue";
-export { default as DXBarChart } from "./components/charts/DXBarChart.vue";
-export { default as DXLineChart } from "./components/charts/DXLineChart.vue";
-export { default as DXDoughnutChart } from "./components/charts/DXDoughnutChart.vue";
+// Chart components moved to the `@omnitend/dashboard-for-laravel/charts` entry
+// (#142) so chart.js / vue-chartjs stay genuinely optional peers — the main
+// entry no longer references them. See resources/js/charts.ts.
 export { default as DXRepeater } from "./components/extended/DXRepeater.vue";
 /**
  * @deprecated Use `DXForm`. `DXBasicForm` is a thin wrapper around `DXForm`
@@ -53,6 +53,7 @@ export { default as DDropdownDivider } from "./components/base/DDropdownDivider.
 export { default as DDropdownItem } from "./components/base/DDropdownItem.vue";
 export { default as DForm } from "./components/base/DForm.vue";
 export { default as DFormCheckbox } from "./components/base/DFormCheckbox.vue";
+export { default as DFormCheckboxGroup } from "./components/base/DFormCheckboxGroup.vue";
 export { default as DFormGroup } from "./components/base/DFormGroup.vue";
 export { default as DFormInput } from "./components/base/DFormInput.vue";
 export { default as DFormInvalidFeedback } from "./components/base/DFormInvalidFeedback.vue";

package/resources/js/types/index.ts

@@ -31,6 +31,7 @@ export type FieldType =
     | "select"
     | "autocomplete"
     | "checkbox"
+    | "checkbox-group"
     | "switch"
     | "radio"
     | "image"