@omnitend/dashboard-for-laravel 0.15.0 → 0.16.1

package/dist/types/index.d.ts

@@ -13,7 +13,7 @@ import type { Component } from "vue";
  * - `switch` — a toggle checkbox with contextual on/off text and an
  *   on-state (filled) style; see `textWhenTrue` / `textWhenFalse`.
  */
-export type FieldType = "text" | "email" | "password" | "number" | "url" | "tel" | "date" | "datetime-local" | "datetime" | "time" | "currency" | "percentage" | "textarea" | "select" | "checkbox" | "switch" | "radio" | "image" | "file" | "component" | "repeater";
+export type FieldType = "text" | "email" | "password" | "number" | "url" | "tel" | "date" | "datetime-local" | "datetime" | "time" | "currency" | "percentage" | "textarea" | "select" | "autocomplete" | "checkbox" | "switch" | "radio" | "image" | "file" | "component" | "repeater";
 /**
  * A value that may be supplied directly or computed from the live form
  * model. Predicates receive the current model so fields can react to
@@ -52,11 +52,16 @@ export interface FieldDefinition {
     placeholder?: string;
     /** Whether field is required (optional) */
     required?: boolean;
-    /** Options for select or radio fields */
+    /**
+     * Options for `select`, `radio` and `autocomplete` fields. For
+     * `autocomplete` these are the datalist suggestions; the field still
+     * accepts free text not present in the list.
+     */
     options?: FieldOption[];
     /**
-     * Asynchronously load options for select/radio fields. Takes
-     * precedence over `options` once resolved.
+     * Asynchronously load options for `select`, `radio` and `autocomplete`
+     * fields (e.g. fetch a suggestion list). Takes precedence over `options`
+     * once resolved.
      */
     optionsLoader?: OptionsLoader;
     /** Re-run `optionsLoader` whenever the form model changes. */

package/docs/public/api-reference.json

@@ -1,8 +1,8 @@
 {
-  "generated": "2026-07-05T08:20:04.640Z",
+  "generated": "2026-07-05T08:43:52.804Z",
   "package": {
     "name": "@omnitend/dashboard-for-laravel",
-    "version": "0.14.0"
+    "version": "0.15.0"
   },
   "components": {
     "base": [
@@ -1682,7 +1682,7 @@
         "name": "DXField",
         "category": "extended",
         "filePath": "resources/js/components/extended/DXField.vue",
-        "description": "Renders a single `FieldDefinition` of any type (text, select, checkbox, switch, repeater, currency, percentage, file/image, component, etc.) with its label, validation error, hint and help. Used by `DXForm` and `DXTable`'s edit modal; exposes `value`, `span`, `info`, `hint` and `repeater-row` slots for per-field customisation.",
+        "description": "Renders a single `FieldDefinition` of any type (text, select, autocomplete, checkbox, switch, repeater, currency, percentage, file/image, component, etc.) with its label, validation error, hint and help. Used by `DXForm` and `DXTable`'s edit modal; exposes `value`, `span`, `info`, `hint` and `repeater-row` slots for per-field customisation.",
         "props": [
           {
             "name": "field",

package/docs/public/docs-map.md

@@ -1,7 +1,7 @@
 # Documentation Map
 
 > Auto-generated hierarchical overview of all documentation
-> Last updated: 2026-07-05T08:20:04.705Z
+> Last updated: 2026-07-05T08:43:52.857Z
 
 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.15.0",
+  "version": "0.16.1",
   "description": "Vue 3 dashboard components for Laravel with Bootstrap Vue Next",
   "type": "module",
   "main": "./dist/dashboard-for-laravel.umd.cjs",

package/resources/css/theme.scss

@@ -258,6 +258,24 @@ $dashboard-navbar-height: 64px;
   }
 }
 
+// ----------------------------------------------------------------------------
+// Autocomplete
+// ----------------------------------------------------------------------------
+// BAutocomplete's dropdown popup (`.b-autocomplete-content`) only sets a
+// max-height, so it inherits the (often narrow) anchor/trigger width and clips
+// long option labels — a real problem for a DXTable `select` filter in a narrow
+// column. Let it grow to fit the longest option while staying at least the
+// trigger width, capped so a pathological label can't make it enormous.
+//
+// This lives in the global theme (not DAutocomplete's scoped styles) on
+// purpose: the popup can be teleported out of the component (BAutocomplete's
+// `teleportTo` prop), which escapes scoped `:deep()` entirely — a global rule
+// applies whether or not it's teleported.
+.b-autocomplete-content {
+  min-width: max-content; // grow to the longest option (floors at the trigger width)
+  max-width: min(90vw, 32rem); // but don't run away
+}
+
 // ----------------------------------------------------------------------------
 // Custom Utilities
 // ----------------------------------------------------------------------------

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

@@ -14,12 +14,22 @@ defineOptions({
 </script>
 
 <template>
-  <BAutocomplete v-bind="$attrs">
-    <!-- Dynamically pass through all named slots with their props -->
-    <template v-for="(_, name) in $slots" :key="name" #[name]="slotProps">
-      <slot :name="name" v-bind="slotProps" />
-    </template>
-  </BAutocomplete>
+  <!--
+    Wrap BAutocomplete in a real element so our scoped styles have a concrete
+    host to attach the scope-id to. Styling BAutocomplete's internal DOM via
+    `:deep()` on a wrapper whose ONLY root is the `<BAutocomplete>` *component*
+    doesn't work: the scope-id isn't reliably forwarded onto BVN's rendered
+    root, so `[data-v-x] .input-group` matches nothing in a consumer build
+    (#53). A plain element root makes it deterministic.
+  -->
+  <div class="d-autocomplete">
+    <BAutocomplete v-bind="$attrs">
+      <!-- Dynamically pass through all named slots with their props -->
+      <template v-for="(_, name) in $slots" :key="name" #[name]="slotProps">
+        <slot :name="name" v-bind="slotProps" />
+      </template>
+    </BAutocomplete>
+  </div>
 </template>
 
 <style scoped>
@@ -30,11 +40,11 @@ defineOptions({
   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) {
+.d-autocomplete :deep(.input-group) {
   flex-wrap: nowrap;
 }
 
-:deep(.b-autocomplete-input-wrapper) {
+.d-autocomplete :deep(.b-autocomplete-input-wrapper) {
   flex: 1 1 auto;
   min-width: 0;
 }
@@ -42,17 +52,20 @@ defineOptions({
 /*
   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`).
+  input and reads as a combobox affordance. Driving Bootstrap's own `--bs-btn-*`
+  variables (rather than raw properties) keeps hover/active/focus states
+  coherent and avoids fighting the `.btn-secondary` state selectors.
 */
-: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);
+.d-autocomplete :deep(.b-autocomplete-trigger) {
+  --bs-btn-bg: var(--bs-body-bg);
+  --bs-btn-border-color: var(--bs-border-color);
+  --bs-btn-color: var(--bs-secondary-color);
+  --bs-btn-hover-bg: var(--bs-tertiary-bg);
+  --bs-btn-hover-border-color: var(--bs-border-color);
+  --bs-btn-hover-color: var(--bs-body-color);
+  --bs-btn-active-bg: var(--bs-secondary-bg);
+  --bs-btn-active-border-color: var(--bs-border-color);
+  --bs-btn-active-color: var(--bs-body-color);
+  flex: 0 0 auto;
 }
 </style>

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

@@ -1,6 +1,6 @@
 <!--
   @component
-  Renders a single `FieldDefinition` of any type (text, select, checkbox, switch, repeater, currency, percentage, file/image, component, etc.) with its label, validation error, hint and help. Used by `DXForm` and `DXTable`'s edit modal; exposes `value`, `span`, `info`, `hint` and `repeater-row` slots for per-field customisation.
+  Renders a single `FieldDefinition` of any type (text, select, autocomplete, checkbox, switch, repeater, currency, percentage, file/image, component, etc.) with its label, validation error, hint and help. Used by `DXForm` and `DXTable`'s edit modal; exposes `value`, `span`, `info`, `hint` and `repeater-row` slots for per-field customisation.
 -->
 <template>
     <!-- Full-width span field: delegate entirely to the #span slot -->
@@ -265,6 +265,33 @@
             </template>
         </DInputGroup>
 
+        <!-- Autocomplete: a free-text input with a datalist of suggestions
+             (sync or async options). Unlike select, a value not in the list can
+             still be typed and submitted; the consumer validates. -->
+        <template v-else-if="field.type === 'autocomplete'">
+            <DFormInput
+                v-model="fieldValue"
+                type="text"
+                :list="datalistId"
+                :required="field.required"
+                :placeholder="field.placeholder"
+                :state="fieldState"
+                :disabled="isDisabled"
+                :readonly="isReadonly"
+                autocomplete="off"
+                v-bind="field.inputProps"
+            />
+            <datalist :id="datalistId">
+                <option
+                    v-for="opt in resolvedOptions"
+                    :key="String(opt.value)"
+                    :value="String(opt.value)"
+                >
+                    {{ opt.text }}
+                </option>
+            </datalist>
+        </template>
+
         <!-- Text-based inputs (text/email/password/number/url/tel/date/time/datetime) -->
         <DFormInput
             v-else
@@ -316,6 +343,7 @@ import {
     onBeforeUnmount,
     onMounted,
     ref,
+    useId,
     watch,
 } from "vue";
 import DFormGroup from "../base/DFormGroup.vue";
@@ -512,6 +540,10 @@ const inputType = computed<string>(() => {
     return type;
 });
 
+// Unique, SSR-safe id linking an `autocomplete` field's input to its
+// `<datalist>` of suggestions (via the input's `list` attribute).
+const datalistId = useId();
+
 // ————————————————— async options
 
 const loadedOptions = ref<FieldOption[] | null>(null);

package/resources/js/types/index.ts

@@ -29,6 +29,7 @@ export type FieldType =
     | "percentage"
     | "textarea"
     | "select"
+    | "autocomplete"
     | "checkbox"
     | "switch"
     | "radio"
@@ -83,12 +84,17 @@ export interface FieldDefinition {
     /** Whether field is required (optional) */
     required?: boolean;
 
-    /** Options for select or radio fields */
+    /**
+     * Options for `select`, `radio` and `autocomplete` fields. For
+     * `autocomplete` these are the datalist suggestions; the field still
+     * accepts free text not present in the list.
+     */
     options?: FieldOption[];
 
     /**
-     * Asynchronously load options for select/radio fields. Takes
-     * precedence over `options` once resolved.
+     * Asynchronously load options for `select`, `radio` and `autocomplete`
+     * fields (e.g. fetch a suggestion list). Takes precedence over `options`
+     * once resolved.
      */
     optionsLoader?: OptionsLoader;