@omnitend/dashboard-for-laravel 0.29.0 → 0.31.0

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

@@ -4,9 +4,12 @@
 
   An opinionated switch built on `DFormCheckbox` (`switch`): a bordered box sized
   like a `.form-control` with the label on the left and the toggle on the right,
-  colour-coding its state (a neutral box when off, a filled primary box when on).
-  Used standalone or, internally, by `DXField`'s `switch` field type so a form
-  switch and a lone switch share one look.
+  colour-coding its state. By default (`onVariant="success"`) it reads the house
+  green-on / red-off style — a neutral box + red toggle when off, a soft-green
+  box + green toggle when on. `onVariant="neutral"` (brand primary on / grey off)
+  is for semantically-mixed switches that shouldn't imply good/bad (#158). Used
+  standalone or, internally, by `DXField`'s `switch` field type so a form switch
+  and a lone switch share one look.
 
   Usage:
   ```vue
@@ -18,8 +21,16 @@
   `label` prop for simple text, or the default slot for richer label content.
 -->
 <template>
-  <div class="dx-switch" :class="{ 'dx-switch--on': isOn }">
-    <DFormCheckbox v-model="model" switch v-bind="$attrs">
+  <div class="dx-switch" :class="[`dx-switch--${onVariant}`, { 'dx-switch--on': isOn }]">
+    <!-- For the neutral variant, tag the inner `.form-switch` with
+         `switch-neutral` so the global theme restores grey-off / primary-on for
+         the toggle itself (the box styling below handles the wrapper). -->
+    <DFormCheckbox
+      v-model="model"
+      switch
+      :class="onVariant === 'neutral' ? 'switch-neutral' : undefined"
+      v-bind="$attrs"
+    >
       <!--
         @slot Label content shown beside the toggle. Falls back to the contextual
         text / `label` prop. Scoped with the current on-state so a caller can vary
@@ -44,10 +55,19 @@ interface Props {
   textWhenTrue?: string;
   /** Text shown when off — overrides `label` in the off state (e.g. "Product is not current"). */
   textWhenFalse?: string;
+  /**
+   * On-state colour. `"success"` (default) reads the house green-on / red-off
+   * style — an active/enabled/good switch ("Product is current", "Stock is
+   * tracked", "Visible"). `"neutral"` is for semantically-mixed switches
+   * ("contains alcohol", an allergen toggle, "hidden on web shop") that
+   * shouldn't imply good/bad — it uses the brand primary on / grey off (#158).
+   */
+  onVariant?: "success" | "neutral";
 }
 
 const props = withDefaults(defineProps<Props>(), {
   modelValue: false,
+  onVariant: "success",
 });
 
 const emit = defineEmits<{
@@ -128,26 +148,55 @@ defineOptions({
   cursor: pointer;
 }
 
-/* On-state: filled primary. Green is reserved for success semantics, so a
-   generic "on" toggle uses the brand action colour, matching the base switch,
-   checkboxes and radios. */
-.dx-switch--on :deep(.form-check) {
-  background-color: var(--bs-primary-bg-subtle);
-  border-color: var(--bs-primary);
+/* Filled box (#158): the WHOLE control carries the colour and the pill stays a
+   neutral grey affordance — the box IS the state, so it reads strongest at a
+   glance (the house style). `success` (default) is green ON / light-red OFF;
+   `neutral` keeps a brand primary panel for mixed-semantics switches. Pair with
+   `textWhenTrue`/`textWhenFalse` so the LABEL also names each state. */
+.dx-switch--success :deep(.form-check) {
+  background-color: var(--dx-switch-off-bg);
+  border-color: var(--dx-switch-off-line);
 }
 
-.dx-switch--on :deep(.form-check-label) {
-  color: var(--bs-primary-text-emphasis);
+.dx-switch--success :deep(.form-check-label) {
+  color: var(--dx-switch-off-ink);
+}
+
+.dx-switch--success.dx-switch--on :deep(.form-check) {
+  background-color: var(--dx-switch-on-bg);
+  border-color: var(--dx-switch-on-line);
+}
+
+.dx-switch--success.dx-switch--on :deep(.form-check-label) {
+  color: var(--dx-switch-on-ink);
   font-weight: 500;
 }
 
-.dx-switch--on :deep(.form-check-input:checked) {
-  background-color: var(--bs-primary);
-  border-color: var(--bs-primary);
+/* Neutral grey pill in BOTH states (white thumb, sliding) — overrides the global
+   green-on/red-off toggle colours within the box, so only the box carries the
+   state. Explicit `:checked`/`:focus` selectors so they out-specify the global
+   `.form-switch .form-check-input:checked` rule. */
+.dx-switch--success :deep(.form-check-input),
+.dx-switch--success :deep(.form-check-input:checked),
+.dx-switch--success :deep(.form-check-input:focus) {
+  background-color: var(--dx-switch-pill);
+  border-color: var(--dx-switch-pill);
+  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
 }
 
-.dx-switch--on :deep(.form-check-input:focus) {
+.dx-switch--success :deep(.form-check-input:focus) {
+  box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.12);
+}
+
+/* neutral variant (mixed-semantics): brand primary panel when on; the toggle is
+   handled by `.switch-neutral` on the inner form-switch (primary-on / grey-off). */
+.dx-switch--neutral.dx-switch--on :deep(.form-check) {
+  background-color: var(--bs-primary-bg-subtle);
   border-color: var(--bs-primary);
-  box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
+}
+
+.dx-switch--neutral.dx-switch--on :deep(.form-check-label) {
+  color: var(--bs-primary-text-emphasis);
+  font-weight: 500;
 }
 </style>

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,6 +261,7 @@ 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();
 
@@ -314,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) {
@@ -328,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/types/index.ts

@@ -196,6 +196,15 @@ export interface FieldDefinition {
      */
     textWhenFalse?: MaybeFn<string>;
 
+    /**
+     * For `switch` fields: the on-state colour. `"success"` (default) is the
+     * house green-on / red-off style for an active/enabled/good switch;
+     * `"neutral"` (brand primary on / grey off) is for semantically-mixed
+     * switches that shouldn't imply good/bad ("contains alcohol", an allergen
+     * toggle, "hidden on web shop"). See DXSwitch `onVariant` (#158).
+     */
+    switchVariant?: "success" | "neutral";
+
     /** CSS class for the form group */
     class?: string;