@omnitend/dashboard-for-laravel 0.23.0 → 0.24.0

package/dist/types/index.d.ts

@@ -85,6 +85,16 @@ export interface FieldDefinition {
     optionsLoader?: OptionsLoader;
     /** Re-run `optionsLoader` whenever the form model changes. */
     reloadOptionsOnChange?: boolean;
+    /**
+     * For `select` fields: render a **searchable** select — type to filter a
+     * long option list, while the model still holds `option.value` (an id).
+     *
+     * A plain `select` is fine for ten options and unusable for hundreds; the
+     * `autocomplete` type filters but models the *typed text*, so it can't back
+     * a foreign key (picking "Tesco" gives you `"Tesco"`, not `37`). This is the
+     * combination high-frequency data entry against a long list needs.
+     */
+    searchable?: boolean;
     /** Number of rows for textarea (default: 3) */
     rows?: number;
     /** Step for numeric/currency/percentage inputs */
@@ -254,6 +264,17 @@ export interface FieldDefinition {
      * `false` to render a bare password input.
      */
     revealable?: boolean;
+    /**
+     * Include this field's value in the submitted payload. Default `true`.
+     *
+     * Set `false` for a **presentational** field — a header, an alert, an
+     * explanatory block rendered via `span` — that exists to lay out the form,
+     * not to hold data. Without it, `DXTable`'s edit modal seeds its form from
+     * every `editFields` key, so those decorative fields are POSTed alongside
+     * the real ones (an empty string, an empty array) purely because they were
+     * declared.
+     */
+    submit?: boolean;
     /**
      * Conditionally show or hide this field. When omitted the field is
      * always visible. Boolean or a function of the form model; evaluated

package/docs/public/api-reference.json

@@ -1,8 +1,8 @@
 {
-  "generated": "2026-07-11T08:44:15.505Z",
+  "generated": "2026-07-11T10:04:02.971Z",
   "package": {
     "name": "@omnitend/dashboard-for-laravel",
-    "version": "0.22.0"
+    "version": "0.24.0"
   },
   "components": {
     "base": [

package/docs/public/docs-map.md

@@ -1,7 +1,7 @@
 # Documentation Map
 
 > Auto-generated hierarchical overview of all documentation
-> Last updated: 2026-07-11T08:44:15.559Z
+> Last updated: 2026-07-11T10:04:03.051Z
 
 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.23.0",
+  "version": "0.24.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/extended/DXField.vue

@@ -324,6 +324,30 @@
             v-bind="inputPropsWithGuards"
         />
 
+        <!-- Searchable select: type to filter a long option list, while the
+             model keeps the option's VALUE (an id), not the typed text. The
+             `autocomplete` type below models the text, so it can't back a
+             foreign key. -->
+        <template v-else-if="field.type === 'select' && field.searchable">
+            <DAutocomplete
+                v-if="searchableOptionsReady"
+                v-model="fieldValue"
+                :options="resolvedOptions"
+                :placeholder="field.placeholder"
+                :required="field.required"
+                :state="fieldState"
+                :disabled="isDisabled || isReadonly || isPlaintext"
+                open-on-focus
+                v-bind="controlPropsWithGuards"
+            />
+            <!-- BAutocomplete resolves the input's display text from the model
+                 AT MOUNT and doesn't re-derive it when `options` arrive later,
+                 so an async list would leave the raw id showing ("51" instead
+                 of "Waitrose") — and a long list is exactly the case that loads
+                 async. Hold the control until the options are in. -->
+            <DFormInput v-else placeholder="Loading…" disabled />
+        </template>
+
         <!-- Select (sync or async options) -->
         <DFormSelect
             v-else-if="field.type === 'select'"
@@ -535,6 +559,7 @@ import DXSwitch from "./DXSwitch.vue";
 import DFormInvalidFeedback from "../base/DFormInvalidFeedback.vue";
 import DFormText from "../base/DFormText.vue";
 import DInputGroup from "../base/DInputGroup.vue";
+import DAutocomplete from "../base/DAutocomplete.vue";
 import DButton from "../base/DButton.vue";
 import DXFieldLabel from "./DXFieldLabel.vue";
 import type { UseFormReturn } from "../../composables/useForm";
@@ -918,6 +943,12 @@ const isPlaintext = computed(() => resolveMaybe(props.field.plaintext) ?? false)
 
 const passwordRevealed = ref(false);
 
+// See the template: the searchable select can't render before its options
+// resolve, or it shows the raw id instead of the option's label.
+const searchableOptionsReady = computed(
+    () => !props.field.optionsLoader || loadedOptions.value !== null,
+);
+
 const isRevealablePassword = computed(
     () =>
         props.field.type === "password" &&