@omnitend/dashboard-for-laravel 0.13.1 → 0.15.0

package/docs/public/api-reference.json

@@ -1,8 +1,8 @@
 {
-  "generated": "2026-07-04T17:33:54.873Z",
+  "generated": "2026-07-05T08:20:04.640Z",
   "package": {
     "name": "@omnitend/dashboard-for-laravel",
-    "version": "0.13.1"
+    "version": "0.14.0"
   },
   "components": {
     "base": [
@@ -2475,6 +2475,13 @@
             "default": "\"12\"",
             "description": "Column size (Bootstrap grid)"
           },
+          {
+            "name": "card",
+            "type": "boolean",
+            "required": false,
+            "default": "true",
+            "description": "Wrap the table in a `DCard`. Defaults to `true`. Set `false` for a plain,\nborderless variant — the same header, filter row, table and pagination\nrendered directly on the page background (no card border/shadow), for\ndata-heavy admin index pages that read as busy inside a card."
+          },
           {
             "name": "editFields",
             "type": "Array",
@@ -2794,12 +2801,41 @@
           }
         ],
         "methods": []
+      },
+      {
+        "name": "DXTableShell",
+        "category": "extended",
+        "filePath": "resources/js/components/extended/DXTableShell.vue",
+        "description": "Internal chrome wrapper for `DXTable`. Renders its content either inside a `DCard` (the default) or as a plain, borderless block on the page background (`:card=\"false\"`). Extracted so `DXTable`'s ~460-line body and all its slots aren't duplicated across a card/plain `v-if`. Slots: - `#header` — the title / action row. In card mode it fills `DCard`'s header; in plain mode it renders above the table with a subtle bottom rule. - default — the table body (spinner/error/table/pagination).",
+        "props": [
+          {
+            "name": "card",
+            "type": "boolean",
+            "required": false,
+            "default": "true",
+            "description": "Wrap the content in a `DCard`. When false, render plain/borderless."
+          }
+        ],
+        "events": [],
+        "slots": [
+          {
+            "name": "header",
+            "description": "",
+            "bindings": []
+          },
+          {
+            "name": "default",
+            "description": "",
+            "bindings": []
+          }
+        ],
+        "methods": []
       }
     ]
   },
   "stats": {
-    "totalComponents": 70,
+    "totalComponents": 71,
     "baseComponents": 57,
-    "extendedComponents": 13
+    "extendedComponents": 14
   }
 }

package/docs/public/docs-map.md

@@ -1,7 +1,7 @@
 # Documentation Map
 
 > Auto-generated hierarchical overview of all documentation
-> Last updated: 2026-07-04T17:33:54.935Z
+> Last updated: 2026-07-05T08:20:04.705Z
 
 This file provides a complete map of all available documentation for AI agents and developers.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@omnitend/dashboard-for-laravel",
-  "version": "0.13.1",
+  "version": "0.15.0",
   "description": "Vue 3 dashboard components for Laravel with Bootstrap Vue Next",
   "type": "module",
   "main": "./dist/dashboard-for-laravel.umd.cjs",

package/resources/js/components/base/DAutocomplete.vue

@@ -21,3 +21,38 @@ defineOptions({
     </template>
   </BAutocomplete>
 </template>
+
+<style scoped>
+/*
+  BAutocomplete renders `.input-group > .b-autocomplete-input-wrapper +
+  .b-autocomplete-trigger`. The input wrapper takes the full width, so under
+  Bootstrap's default `flex-wrap: wrap` the trigger chevron wraps onto its own
+  line below the input. Keep the group on a single row and let the input wrapper
+  flex, so the trigger sits inline as an append. (#53)
+*/
+:deep(.input-group) {
+  flex-wrap: nowrap;
+}
+
+:deep(.b-autocomplete-input-wrapper) {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+/*
+  The trigger renders as a heavy `btn btn-secondary` (dark), which reads as a
+  detached dark block. Soften it to a subtle bordered chevron that matches the
+  input and reads as a combobox affordance. Uses theme variables (no hardcoded
+  colours) and a more specific selector than `.btn-secondary` (no `!important`).
+*/
+:deep(.b-autocomplete-trigger) {
+  background-color: var(--bs-body-bg);
+  border-color: var(--bs-border-color);
+  color: var(--bs-secondary-color);
+}
+
+:deep(.b-autocomplete-trigger:hover) {
+  background-color: var(--bs-tertiary-bg);
+  color: var(--bs-body-color);
+}
+</style>

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

@@ -590,15 +590,51 @@ onBeforeUnmount(() => {
     border-radius: var(--bs-border-radius);
 }
 
-/* Switch field: contextual styling that responds to the on/off state.
-   Off is muted; on turns the control and label a filled success green. */
+/* Switch field: a full-width "filled box" toggle, the same height as a select
+   or text input, that colour-codes its state — a neutral box when off, a filled
+   success green when on. The label sits on the left and the toggle on the right.
+   Renders the underlying `.form-check` (from the switch checkbox) as the box. */
+.dx-switch :deep(.form-check) {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.75rem;
+    width: 100%;
+    min-height: calc(1.5em + 0.75rem + 2px); /* match .form-control height */
+    margin: 0;
+    /* Override Bootstrap `.form-switch`'s 2.5em left padding for the floated input. */
+    padding: 0.375rem 0.75rem;
+    border: 1px solid var(--bs-border-color);
+    border-radius: var(--bs-border-radius);
+    background-color: var(--bs-body-bg);
+    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
+}
+
+/* Label on the left, toggle on the right (DOM order is input then label). */
 .dx-switch :deep(.form-check-label) {
+    order: 1;
+    margin: 0;
     color: var(--bs-secondary-color);
+    cursor: pointer;
     transition: color 0.15s ease-in-out;
 }
 
+.dx-switch :deep(.form-check-input) {
+    order: 2;
+    flex-shrink: 0;
+    /* Override `.form-switch`'s negative left margin now that we're flex-laid-out. */
+    margin: 0;
+    cursor: pointer;
+}
+
+/* On-state: filled success green. */
+.dx-switch--on :deep(.form-check) {
+    background-color: var(--bs-success-bg-subtle);
+    border-color: var(--bs-success);
+}
+
 .dx-switch--on :deep(.form-check-label) {
-    color: var(--bs-success);
+    color: var(--bs-success-text-emphasis);
     font-weight: 500;
 }
 

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

@@ -9,7 +9,7 @@
     <DContainer :fluid="fluid" :class="containerClass">
         <DRow class="justify-content-center">
             <DCol :md="columnSize">
-                <DCard>
+                <DXTableShell :card="card">
                     <template v-if="title || createUrl || $slots.header" #header>
                         <!-- @slot Card header content; overrides the default title heading and the "New {item}" button. -->
                         <slot name="header">
@@ -69,13 +69,15 @@
                                         @update:model-value="handleFilterChange(field.key, $event as string)"
                                     />
 
-                                    <!-- Select Filter -->
-                                    <DFormSelect
+                                    <!-- Select Filter: typeahead — browse the full list on focus, or type to narrow; clear (✕) resets to "no filter" -->
+                                    <DAutocomplete
                                         v-else-if="field.filter === 'select'"
                                         :model-value="effectiveFilters[field.key] || ''"
-                                        :options="[{ value: '', text: 'All' }, ...getFieldFilterOptions(field)]"
+                                        :options="getFieldFilterOptions(field)"
+                                        :placeholder="field.filterPlaceholder || `All ${field.label || field.key}`"
                                         size="sm"
-                                        @update:model-value="handleFilterChange(field.key, $event as string)"
+                                        open-on-focus
+                                        @update:model-value="handleFilterChange(field.key, ($event ?? '') as string)"
                                     />
 
                                     <!-- Number Filter -->
@@ -165,13 +167,15 @@
                                         @update:model-value="handleFilterChange(field.key, $event as string)"
                                     />
 
-                                    <!-- Select Filter -->
-                                    <DFormSelect
+                                    <!-- Select Filter: typeahead — browse the full list on focus, or type to narrow; clear (✕) resets to "no filter" -->
+                                    <DAutocomplete
                                         v-else-if="field.filter === 'select'"
                                         :model-value="effectiveFilters[field.key] || ''"
-                                        :options="[{ value: '', text: 'All' }, ...getFieldFilterOptions(field)]"
+                                        :options="getFieldFilterOptions(field)"
+                                        :placeholder="field.filterPlaceholder || `All ${field.label || field.key}`"
                                         size="sm"
-                                        @update:model-value="handleFilterChange(field.key, $event as string)"
+                                        open-on-focus
+                                        @update:model-value="handleFilterChange(field.key, ($event ?? '') as string)"
                                     />
 
                                     <!-- Number Filter -->
@@ -262,13 +266,15 @@
                                         @update:model-value="handleFilterChange(field.key, $event as string)"
                                     />
 
-                                    <!-- Select Filter -->
-                                    <DFormSelect
+                                    <!-- Select Filter: typeahead — browse the full list on focus, or type to narrow; clear (✕) resets to "no filter" -->
+                                    <DAutocomplete
                                         v-else-if="field.filter === 'select'"
                                         :model-value="effectiveFilters[field.key] || ''"
-                                        :options="[{ value: '', text: 'All' }, ...getFieldFilterOptions(field)]"
+                                        :options="getFieldFilterOptions(field)"
+                                        :placeholder="field.filterPlaceholder || `All ${field.label || field.key}`"
                                         size="sm"
-                                        @update:model-value="handleFilterChange(field.key, $event as string)"
+                                        open-on-focus
+                                        @update:model-value="handleFilterChange(field.key, ($event ?? '') as string)"
                                     />
 
                                     <!-- Number Filter -->
@@ -473,7 +479,7 @@
                             </div>
                         </div>
                     </div>
-                </DCard>
+                </DXTableShell>
             </DCol>
         </DRow>
 
@@ -628,15 +634,17 @@ import { router } from "@inertiajs/vue3";
 import axios from "axios";
 import pluralize from "pluralize";
 import { useToast } from "../../composables/useToast";
+import { useForm } from "../../composables/useForm";
 import DContainer from "../base/DContainer.vue";
 import DRow from "../base/DRow.vue";
 import DCol from "../base/DCol.vue";
-import DCard from "../base/DCard.vue";
+import DXTableShell from "./DXTableShell.vue";
 import DSpinner from "../base/DSpinner.vue";
 import DTable from "../base/DTable.vue";
 import DPagination from "../base/DPagination.vue";
 import DFormInput from "../base/DFormInput.vue";
 import DFormSelect from "../base/DFormSelect.vue";
+import DAutocomplete from "../base/DAutocomplete.vue";
 import DModal from "../base/DModal.vue";
 import DButton from "../base/DButton.vue";
 import DXForm from "./DXForm.vue";
@@ -785,6 +793,14 @@ export interface Props<TItem = any> {
     /** Column size (Bootstrap grid) */
     columnSize?: string | number;
 
+    /**
+     * Wrap the table in a `DCard`. Defaults to `true`. Set `false` for a plain,
+     * borderless variant — the same header, filter row, table and pagination
+     * rendered directly on the page background (no card border/shadow), for
+     * data-heavy admin index pages that read as busy inside a card.
+     */
+    card?: boolean;
+
     // Edit Modal Props
     /** Form field definitions for edit modal (if provided, enables edit on row click) */
     editFields?: any[]; // FieldDefinition[] - using any to avoid circular import
@@ -855,6 +871,7 @@ const props = withDefaults(defineProps<Props<T>>(), {
     fluid: false,
     containerClass: "py-5",
     columnSize: "12",
+    card: true,
     editModalSize: "lg",
 });
 
@@ -1501,12 +1518,6 @@ const editLoading = ref(false);
 // the form after the user has since opened a different row.
 let editFetchToken = 0;
 
-// Monotonic token for opening the modal itself. The first edit dynamically
-// imports useForm; if the user clicks row A then row B before that import
-// resolves, A's callback must not seed/open/fetch over B. Each open captures
-// the current token and bails if it's since been superseded.
-let modalOpenToken = 0;
-
 // Toast (may not be available in test environment)
 let createToast: ((obj: any) => any) | undefined;
 try {
@@ -1587,40 +1598,27 @@ const handleRowClick = (item: T, index: number, event: MouseEvent) => {
         // Reset to first tab
         activeTabIndex.value = 0;
 
-        // Capture this open so a slow first-time useForm import can't seed the
-        // form after the user has since opened a different row (or create).
-        const openToken = ++modalOpenToken;
-
-        // Initialize form with item data
+        // Initialize form with item data. `useForm` is statically imported, so
+        // seeding is synchronous — no interleaving between successive row opens.
         if (!editForm.value) {
-            // Dynamically import useForm to avoid circular dependency
-            import('../../composables/useForm').then(({ useForm }) => {
-                if (openToken !== modalOpenToken) return; // superseded
-                const formData: Record<string, any> = {};
-                props.editFields!.forEach(field => {
-                    formData[field.key] = (item as any)[field.key] ?? field.default ?? '';
-                });
-                editForm.value = useForm(formData);
-
-                // Open modal
-                showEditModal.value = true;
-
-                // Optionally replace the row-seeded data with the full record.
-                if (props.showUrl) void fetchFullRecordForEdit(item);
+            const formData: Record<string, any> = {};
+            props.editFields!.forEach(field => {
+                formData[field.key] = (item as any)[field.key] ?? field.default ?? '';
             });
+            editForm.value = useForm(formData);
         } else {
             // Update existing form
             props.editFields.forEach(field => {
                 editForm.value.data[field.key] = (item as any)[field.key] ?? field.default ?? '';
             });
             editForm.value.clearErrors();
+        }
 
-            // Open modal
-            showEditModal.value = true;
+        // Open modal
+        showEditModal.value = true;
 
-            // Optionally replace the row-seeded data with the full record.
-            if (props.showUrl) void fetchFullRecordForEdit(item);
-        }
+        // Optionally replace the row-seeded data with the full record.
+        if (props.showUrl) void fetchFullRecordForEdit(item);
     }
 };
 
@@ -1673,34 +1671,25 @@ const handleCreateNew = () => {
     selectedItem.value = null;
     activeTabIndex.value = 0;
 
-    // Supersede any in-flight row-open (and its pending fetch) so a slow
-    // useForm import from an earlier edit can't seed over this create.
-    const openToken = ++modalOpenToken;
+    // Supersede any in-flight row-open fetch so a slow showUrl fetch from an
+    // earlier edit can't seed over this create.
     editFetchToken++;
     editLoading.value = false;
 
-    const initForm = (useForm: any) => {
+    if (!editForm.value) {
         const formData: Record<string, any> = {};
         props.editFields!.forEach(field => {
             formData[field.key] = field.default ?? '';
         });
         editForm.value = useForm(formData);
-        showEditModal.value = true;
-    };
-
-    if (!editForm.value) {
-        import('../../composables/useForm').then(({ useForm }) => {
-            if (openToken !== modalOpenToken) return; // superseded
-            initForm(useForm);
-        });
     } else {
         // Reset existing form to defaults
         props.editFields!.forEach(field => {
             editForm.value.data[field.key] = field.default ?? '';
         });
         editForm.value.clearErrors();
-        showEditModal.value = true;
     }
+    showEditModal.value = true;
 };
 
 // Handle save from edit modal

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

@@ -0,0 +1,54 @@
+<!--
+  @component
+  Internal chrome wrapper for `DXTable`. Renders its content either inside a
+  `DCard` (the default) or as a plain, borderless block on the page background
+  (`:card="false"`). Extracted so `DXTable`'s ~460-line body and all its slots
+  aren't duplicated across a card/plain `v-if`.
+
+  Slots:
+  - `#header` — the title / action row. In card mode it fills `DCard`'s header;
+    in plain mode it renders above the table with a subtle bottom rule.
+  - default — the table body (spinner/error/table/pagination).
+-->
+<template>
+  <DCard v-if="card">
+    <template v-if="$slots.header" #header>
+      <slot name="header" />
+    </template>
+    <slot />
+  </DCard>
+
+  <div v-else class="dx-table-plain">
+    <div v-if="$slots.header" class="dx-table-plain__header">
+      <slot name="header" />
+    </div>
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import DCard from '../base/DCard.vue';
+
+interface Props {
+  /** Wrap the content in a `DCard`. When false, render plain/borderless. */
+  card?: boolean;
+}
+
+withDefaults(defineProps<Props>(), {
+  card: true,
+});
+</script>
+
+<style scoped>
+/*
+  Plain variant: no card border/shadow/background — the table sits directly on
+  the page. The header row gets a subtle bottom rule so it still reads as a
+  distinct band above the table (mirrors the card header's separation without
+  the full card chrome).
+*/
+.dx-table-plain__header {
+  padding-bottom: 0.75rem;
+  margin-bottom: 0.75rem;
+  border-bottom: 1px solid var(--bs-border-color);
+}
+</style>