@omnitend/dashboard-for-laravel 0.8.0 → 0.9.0

package/dist/types/index.d.ts

@@ -10,8 +10,10 @@ import type { Component } from "vue";
  * - `image` / `file` — file input (`image` additionally shows a preview).
  * - `component` — escape hatch that renders `field.component`.
  * - `repeater` — nested, repeatable sub-form driven by `field.fields`.
+ * - `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" | "radio" | "image" | "file" | "component" | "repeater";
+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";
 /**
  * A value that may be supplied directly or computed from the live form
  * model. Predicates receive the current model so fields can react to
@@ -68,6 +70,14 @@ export interface FieldDefinition {
     max?: number | string;
     /** Symbol shown for `currency` fields (default: the locale's, "£"). */
     currencySymbol?: string;
+    /**
+     * For `percentage` fields: treat the underlying model value as a 0–1
+     * fraction while showing/editing it as a 0–100 percentage. The model keeps
+     * the fraction (e.g. `0.2`), the input shows `20`. Off by default (the value
+     * is taken as a whole percentage). Use for fields stored as ratios (VAT
+     * rates, discounts, …).
+     */
+    asFraction?: boolean;
     /** `accept` attribute for `image`/`file` inputs (e.g. "image/*"). */
     accept?: string;
     /** Help text displayed below the field (always visible). */
@@ -77,6 +87,23 @@ export interface FieldDefinition {
      * function of the model for dynamic hints.
      */
     hint?: MaybeFn<string>;
+    /**
+     * Longer help text revealed in a popover from a small info affordance
+     * on the field's label (on hover/focus). Complements `hint` (which is
+     * always-visible muted text below the control). May be a function of
+     * the model. For rich content, use the `#info` slot instead.
+     */
+    info?: MaybeFn<string>;
+    /**
+     * For `switch` fields: contextual label shown when the toggle is on.
+     * Falls back to `label` when omitted. May be a function of the model.
+     */
+    textWhenTrue?: MaybeFn<string>;
+    /**
+     * For `switch` fields: contextual label shown when the toggle is off.
+     * Falls back to `label` when omitted. May be a function of the model.
+     */
+    textWhenFalse?: MaybeFn<string>;
     /** CSS class for the form group */
     class?: string;
     /** Additional props to pass to the input component */

package/docs/public/api-reference.json

@@ -1,8 +1,8 @@
 {
-  "generated": "2026-07-04T04:12:03.097Z",
+  "generated": "2026-07-04T10:39:25.077Z",
   "package": {
     "name": "@omnitend/dashboard-for-laravel",
-    "version": "0.8.0"
+    "version": "0.9.0"
   },
   "components": {
     "base": [
@@ -1605,6 +1605,29 @@
         ],
         "methods": []
       },
+      {
+        "name": "DXFieldLabel",
+        "category": "extended",
+        "filePath": "resources/js/components/extended/DXFieldLabel.vue",
+        "description": "",
+        "props": [
+          {
+            "name": "label",
+            "type": "string",
+            "required": true,
+            "description": "Visible label text."
+          },
+          {
+            "name": "info",
+            "type": "string",
+            "required": false,
+            "description": "Optional help text revealed in a popover from an info affordance."
+          }
+        ],
+        "events": [],
+        "slots": [],
+        "methods": []
+      },
       {
         "name": "DXForm",
         "category": "extended",
@@ -2244,8 +2267,8 @@
     ]
   },
   "stats": {
-    "totalComponents": 65,
+    "totalComponents": 66,
     "baseComponents": 57,
-    "extendedComponents": 8
+    "extendedComponents": 9
   }
 }

package/docs/public/docs-map.md

@@ -1,7 +1,7 @@
 # Documentation Map
 
 > Auto-generated hierarchical overview of all documentation
-> Last updated: 2026-07-04T04:12:03.185Z
+> Last updated: 2026-07-04T10:39:25.137Z
 
 This file provides a complete map of all available documentation for AI agents and developers.
 

package/docs/public/llms.txt

@@ -2,7 +2,7 @@
 
 > Vue 3 dashboard components for Laravel with Bootstrap Vue Next
 >
-> A dual-package library (NPM + Composer) providing 65 Vue 3 components for building Laravel dashboards with Bootstrap Vue Next.
+> A dual-package library (NPM + Composer) providing 66 Vue 3 components for building Laravel dashboards with Bootstrap Vue Next.
 
 ## Installation
 
@@ -81,7 +81,7 @@ Lightweight type-safe wrappers around Bootstrap Vue Next components providing AP
 - [DToaster](/components/base/dtoaster): Bootstrap Vue Next Toaster wrapper
 - [DTooltip](/components/base/dtooltip): Bootstrap Vue Next Tooltip wrapper
 
-## Extended Components (8 components)
+## Extended Components (9 components)
 
 Custom dashboard components with advanced functionality beyond Bootstrap Vue Next.
 
@@ -90,6 +90,7 @@ Custom dashboard components with advanced functionality beyond Bootstrap Vue Nex
 - [DXDashboardNavbar](/components/extended/dxdashboardnavbar): Top navbar with user dropdown
 - [DXDashboardSidebar](/components/extended/dxdashboardsidebar): Collapsible sidebar with navigation
 - [DXField](/components/extended/dxfield): Single-field renderer for any field type with value/span/info/hint slots
+- [DXFieldLabel](/components/extended/dxfieldlabel): Extended dashboard component
 - [DXForm](/components/extended/dxform): Form renderer driven by field definitions, with optional tabs, conditional fields, per-field slots, async options, nested repeaters, and auto error-tab switching
 - [DXRepeater](/components/extended/dxrepeater): Repeatable nested sub-form (field array) primitive
 - [DXTable](/components/extended/dxtable): Data table with pagination, filtering, and sorting

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@omnitend/dashboard-for-laravel",
-  "version": "0.8.0",
+  "version": "0.9.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

@@ -26,14 +26,47 @@
             :disabled="isDisabled || isReadonly"
             v-bind="field.inputProps"
         >
-            {{ resolvedLabel }}
+            <DXFieldLabel :label="resolvedLabel" :info="resolvedInfo" />
         </DFormCheckbox>
 
         <DFormInvalidFeedback v-if="form.hasError(errorKey)" force-show>
             {{ form.getError(errorKey) }}
         </DFormInvalidFeedback>
         <slot name="info" :field="field" :model="model" />
-        <DFormText v-if="resolvedHint" class="text-muted">
+        <DFormText v-if="resolvedHint || $slots.hint" class="text-muted">
+            <slot name="hint" :field="field" :model="model">{{ resolvedHint }}</slot>
+        </DFormText>
+        <DFormText v-if="field.help">{{ field.help }}</DFormText>
+    </div>
+
+    <!-- Switch: toggle with contextual on/off text and an on-state style -->
+    <div
+        v-else-if="field.type === 'switch'"
+        :class="[field.class || 'mb-3', 'dx-switch', { 'dx-switch--on': switchIsOn }]"
+    >
+        <slot
+            v-if="$slots.value"
+            name="value"
+            :field="field"
+            :model="model"
+            :value="fieldValue"
+            :update="setValue"
+        />
+        <DFormCheckbox
+            v-else
+            v-model="switchModel"
+            switch
+            :disabled="isDisabled || isReadonly"
+            v-bind="field.inputProps"
+        >
+            <DXFieldLabel :label="switchText" :info="resolvedInfo" />
+        </DFormCheckbox>
+
+        <DFormInvalidFeedback v-if="form.hasError(errorKey)" force-show>
+            {{ form.getError(errorKey) }}
+        </DFormInvalidFeedback>
+        <slot name="info" :field="field" :model="model" />
+        <DFormText v-if="resolvedHint || $slots.hint" class="text-muted">
             <slot name="hint" :field="field" :model="model">{{ resolvedHint }}</slot>
         </DFormText>
         <DFormText v-if="field.help">{{ field.help }}</DFormText>
@@ -41,7 +74,10 @@
 
     <!-- Repeater: nested, repeatable sub-form -->
     <div v-else-if="field.type === 'repeater'" :class="field.class || 'mb-3'">
-        <DFormGroup :label="resolvedLabel">
+        <DFormGroup>
+            <template #label>
+                <DXFieldLabel :label="resolvedLabel" :info="resolvedInfo" />
+            </template>
             <DXRepeater
                 :form="form"
                 :field="field"
@@ -55,14 +91,19 @@
             </DXRepeater>
         </DFormGroup>
         <slot name="info" :field="field" :model="model" />
-        <DFormText v-if="resolvedHint" class="text-muted">
+        <DFormText v-if="resolvedHint || $slots.hint" class="text-muted">
             <slot name="hint" :field="field" :model="model">{{ resolvedHint }}</slot>
         </DFormText>
         <DFormText v-if="field.help">{{ field.help }}</DFormText>
     </div>
 
     <!-- Standard labelled field -->
-    <DFormGroup v-else :label="resolvedLabel" :class="field.class || 'mb-3'">
+    <DFormGroup v-else :class="field.class || 'mb-3'">
+        <!-- Label with optional info popover -->
+        <template #label>
+            <DXFieldLabel :label="resolvedLabel" :info="resolvedInfo" />
+        </template>
+
         <!-- Custom value slot overrides the built-in control -->
         <slot
             v-if="$slots.value"
@@ -144,7 +185,7 @@
                 <span class="input-group-text">{{ field.currencySymbol || "£" }}</span>
             </template>
             <DFormInput
-                v-model="fieldValue"
+                v-model="numericInputValue"
                 type="number"
                 :required="field.required"
                 :placeholder="field.placeholder"
@@ -213,6 +254,7 @@ import DFormCheckbox from "../base/DFormCheckbox.vue";
 import DFormInvalidFeedback from "../base/DFormInvalidFeedback.vue";
 import DFormText from "../base/DFormText.vue";
 import DInputGroup from "../base/DInputGroup.vue";
+import DXFieldLabel from "./DXFieldLabel.vue";
 import type { UseFormReturn } from "../../composables/useForm";
 import type { FieldDefinition, FieldOption, FieldType } from "../../types";
 import { getByPath, setByPath } from "../../utils/objectPath";
@@ -273,6 +315,41 @@ const fieldValue = computed({
     set: (value: any) => setValue(value),
 });
 
+// For `percentage` fields with `asFraction`, the model holds a 0–1 fraction but
+// the input shows/edits a 0–100 percentage. Scale on read/write, rounding away
+// binary-float artefacts (0.2 * 100 = 20.000000000000004). Currency and plain
+// percentage fields pass straight through.
+const isFractionPercentage = computed(
+    () => props.field.type === "percentage" && props.field.asFraction === true,
+);
+
+const numericInputValue = computed({
+    get: () => {
+        const value = fieldValue.value;
+        if (!isFractionPercentage.value) return value;
+        if (value === null || value === undefined || value === "") return value;
+        const num = Number(value);
+        if (!Number.isFinite(num)) return value;
+        return Math.round(num * 100 * 1e6) / 1e6;
+    },
+    set: (value: any) => {
+        if (!isFractionPercentage.value) {
+            setValue(value);
+            return;
+        }
+        if (value === null || value === undefined || value === "") {
+            setValue(value);
+            return;
+        }
+        const num = Number(value);
+        if (!Number.isFinite(num)) {
+            setValue(value);
+            return;
+        }
+        setValue(Math.round((num / 100) * 1e9) / 1e9);
+    },
+});
+
 const NUMERIC_TYPES: ReadonlySet<FieldType> = new Set([
     "number",
     "currency",
@@ -307,6 +384,46 @@ const resolvedLabel = computed(
 
 const resolvedHint = computed(() => resolveMaybe(props.field.hint));
 
+const resolvedInfo = computed(() => resolveMaybe(props.field.info));
+
+// ————————————————— switch (toggle) field
+
+// Whether a `switch` field is currently on. Coerces the model value to a
+// boolean, but treats the common "falsey" string encodings a backend might send
+// for a boolean ("0", "false", "") as off — plain `Boolean("0")` is `true`,
+// which would wrongly render such a value on.
+const switchIsOn = computed(() => {
+    const value = fieldValue.value;
+    if (typeof value === "string") {
+        const normalised = value.trim().toLowerCase();
+        return normalised !== "" && normalised !== "0" && normalised !== "false";
+    }
+    return Boolean(value);
+});
+
+// Bind the toggle to a normalised boolean. The underlying bvn checkbox only
+// treats a literal `true` as checked, so a truthy non-boolean model (e.g.
+// Laravel serialising a boolean column as `1`, or a `"1"` string) would render
+// the toggle in the *off* position while `switchIsOn` styled it *on* — the
+// control contradicting itself. Reading a real boolean keeps the checkbox
+// position, the on-state style, and the contextual text in agreement; writing
+// stores a clean boolean.
+const switchModel = computed({
+    get: () => switchIsOn.value,
+    set: (value: boolean) => setValue(value),
+});
+
+/**
+ * Contextual label for a `switch` field: `textWhenTrue`/`textWhenFalse`
+ * for the current state, falling back to the field's label.
+ */
+const switchText = computed(() => {
+    const contextual = switchIsOn.value
+        ? resolveMaybe(props.field.textWhenTrue)
+        : resolveMaybe(props.field.textWhenFalse);
+    return contextual ?? resolvedLabel.value;
+});
+
 const isDisabled = computed(() => {
     if (props.field.disabledWhen) {
         return props.field.disabledWhen(effectiveModel.value);
@@ -399,4 +516,26 @@ onBeforeUnmount(() => {
     border: 1px solid var(--bs-border-color);
     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. */
+.dx-switch :deep(.form-check-label) {
+    color: var(--bs-secondary-color);
+    transition: color 0.15s ease-in-out;
+}
+
+.dx-switch--on :deep(.form-check-label) {
+    color: var(--bs-success);
+    font-weight: 500;
+}
+
+.dx-switch--on :deep(.form-check-input:checked) {
+    background-color: var(--bs-success);
+    border-color: var(--bs-success);
+}
+
+.dx-switch--on :deep(.form-check-input:focus) {
+    border-color: var(--bs-success);
+    box-shadow: 0 0 0 0.25rem rgba(var(--bs-success-rgb), 0.25);
+}
 </style>

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

@@ -0,0 +1,72 @@
+<template>
+    <span class="dx-field-label">
+        <span class="dx-field-label__text">{{ label }}</span>
+        <template v-if="info">
+            <button
+                :id="infoId"
+                type="button"
+                class="dx-field-label__info"
+                :aria-label="`More information: ${label}`"
+                @click.stop.prevent
+            >
+                <i-lucide-info aria-hidden="true" />
+            </button>
+            <DPopover
+                :target="infoId"
+                hover
+                focus
+                placement="top"
+            >
+                {{ info }}
+            </DPopover>
+        </template>
+    </span>
+</template>
+
+<script setup lang="ts">
+import { useId } from "vue";
+import DPopover from "../base/DPopover.vue";
+
+interface Props {
+    /** Visible label text. */
+    label: string;
+
+    /** Optional help text revealed in a popover from an info affordance. */
+    info?: string;
+}
+
+defineProps<Props>();
+
+// Stable, SSR-safe id so the popover can target the trigger button.
+const infoId = `dx-field-info-${useId()}`;
+</script>
+
+<style scoped>
+.dx-field-label {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.35rem;
+}
+
+.dx-field-label__info {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    border: 0;
+    background: none;
+    line-height: 1;
+    color: var(--bs-secondary-color);
+    cursor: help;
+}
+
+.dx-field-label__info:hover,
+.dx-field-label__info:focus-visible {
+    color: var(--bs-primary);
+}
+
+.dx-field-label__info svg {
+    width: 0.9em;
+    height: 0.9em;
+}
+</style>

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

@@ -29,7 +29,7 @@
             <DTab
                 v-for="(tab, index) in visibleTabs"
                 :key="tab.key"
-                :title="tab.label || tab.key"
+                :title="resolveTabLabel(tab)"
                 :lazy="tab.lazy"
                 :active="index === 0"
             >
@@ -207,6 +207,13 @@ function resolvePredicate(
     return typeof when === "function" ? when(model.value) : when;
 }
 
+/** Resolve a tab's (possibly function-valued) label against the live model. */
+function resolveTabLabel(tab: FormTab): string {
+    const label =
+        typeof tab.label === "function" ? tab.label(model.value) : tab.label;
+    return label || tab.key;
+}
+
 function isFieldVisible(field: FieldDefinition): boolean {
     const whenOk = resolvePredicate(field.when, true);
     const showOk = field.show ? field.show() : true;

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

@@ -124,6 +124,7 @@ const rowKey = (index: number): string | number => {
 function defaultForType(type: FieldType): any {
     switch (type) {
         case "checkbox":
+        case "switch":
             return false;
         case "number":
         case "currency":

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

@@ -529,7 +529,7 @@
                             :disabled="editForm?.processing"
                             @click="handleDelete"
                         >
-                            {{ editForm?.processing ? 'Deleting...' : 'Delete' }}
+                            {{ pendingAction === 'delete' ? 'Deleting...' : 'Delete' }}
                         </DButton>
                     </div>
                     <div class="d-flex gap-2">
@@ -542,10 +542,10 @@
                             @click="handleEditSave"
                         >
                             <template v-if="isCreateMode">
-                                {{ editForm?.processing ? 'Creating...' : 'Create' }}
+                                {{ pendingAction === 'save' ? 'Creating...' : 'Create' }}
                             </template>
                             <template v-else>
-                                {{ editForm?.processing ? 'Saving...' : 'Save Changes' }}
+                                {{ pendingAction === 'save' ? 'Saving...' : 'Save Changes' }}
                             </template>
                         </DButton>
                     </div>
@@ -621,8 +621,12 @@ export interface EditTab {
     /** Unique key for this tab */
     key: string;
 
-    /** Display label (optional, auto-derived from key if omitted) */
-    label?: string;
+    /**
+     * Display label (optional, auto-derived from key if omitted). May be a
+     * function of the model (the edited row merged with the live form data),
+     * e.g. `label: (item) => \`Products (${item.products_count ?? 0})\``.
+     */
+    label?: string | ((item: any) => string);
 
     /** Field keys to display in this tab (from editFields) */
     fieldKeys: string[];
@@ -1380,6 +1384,11 @@ const editForm = ref<any>(null);
 const activeTabIndex = ref(0);
 const isCreateMode = ref(false);
 
+// Which modal action is in flight, so the Save and Delete buttons show their
+// own loading label independently. `editForm.processing` is shared by every
+// request the form makes, so it can't tell Save from Delete on its own.
+const pendingAction = ref<'save' | 'delete' | null>(null);
+
 // Toast (may not be available in test environment)
 let createToast: ((obj: any) => any) | undefined;
 try {
@@ -1521,6 +1530,15 @@ const handleCreateNew = () => {
 const handleEditSave = async () => {
     if (!editForm.value) return;
 
+    pendingAction.value = 'save';
+    try {
+        await performSave();
+    } finally {
+        pendingAction.value = null;
+    }
+};
+
+const performSave = async () => {
     // Create mode: POST to createUrl
     if (isCreateMode.value && props.createUrl) {
         try {
@@ -1648,6 +1666,7 @@ const handleDelete = async () => {
 
     if (!confirmed) return;
 
+    pendingAction.value = 'delete';
     try {
         const itemId = (selectedItem.value as any).id;
         const url = props.deleteUrl.replace(':id', itemId);
@@ -1687,6 +1706,8 @@ const handleDelete = async () => {
         });
     } catch (error) {
         emit('deleteError', selectedItem.value as T, error);
+    } finally {
+        pendingAction.value = null;
     }
 };
 

package/resources/js/composables/defineForm.ts

@@ -30,6 +30,7 @@ export interface DefineFormReturn<TData extends Record<string, any>> {
 function getDefaultValueForType(type: FieldType): any {
     switch (type) {
         case "checkbox":
+        case "switch":
             return false;
         case "number":
         case "currency":

package/resources/js/index.ts

@@ -8,6 +8,7 @@ export * from 'bootstrap-vue-next';
 export { default as DXDashboard } from "./components/extended/DXDashboard.vue";
 export { default as DXForm } from "./components/extended/DXForm.vue";
 export { default as DXField } from "./components/extended/DXField.vue";
+export { default as DXFieldLabel } from "./components/extended/DXFieldLabel.vue";
 export { default as DXRepeater } from "./components/extended/DXRepeater.vue";
 /**
  * @deprecated Use `DXForm`. `DXBasicForm` is a thin wrapper around `DXForm`

package/resources/js/types/index.ts

@@ -11,6 +11,8 @@ import type { Component } from "vue";
  * - `image` / `file` — file input (`image` additionally shows a preview).
  * - `component` — escape hatch that renders `field.component`.
  * - `repeater` — nested, repeatable sub-form driven by `field.fields`.
+ * - `switch` — a toggle checkbox with contextual on/off text and an
+ *   on-state (filled) style; see `textWhenTrue` / `textWhenFalse`.
  */
 export type FieldType =
     | "text"
@@ -28,6 +30,7 @@ export type FieldType =
     | "textarea"
     | "select"
     | "checkbox"
+    | "switch"
     | "radio"
     | "image"
     | "file"
@@ -105,6 +108,15 @@ export interface FieldDefinition {
     /** Symbol shown for `currency` fields (default: the locale's, "£"). */
     currencySymbol?: string;
 
+    /**
+     * For `percentage` fields: treat the underlying model value as a 0–1
+     * fraction while showing/editing it as a 0–100 percentage. The model keeps
+     * the fraction (e.g. `0.2`), the input shows `20`. Off by default (the value
+     * is taken as a whole percentage). Use for fields stored as ratios (VAT
+     * rates, discounts, …).
+     */
+    asFraction?: boolean;
+
     /** `accept` attribute for `image`/`file` inputs (e.g. "image/*"). */
     accept?: string;
 
@@ -117,6 +129,26 @@ export interface FieldDefinition {
      */
     hint?: MaybeFn<string>;
 
+    /**
+     * Longer help text revealed in a popover from a small info affordance
+     * on the field's label (on hover/focus). Complements `hint` (which is
+     * always-visible muted text below the control). May be a function of
+     * the model. For rich content, use the `#info` slot instead.
+     */
+    info?: MaybeFn<string>;
+
+    /**
+     * For `switch` fields: contextual label shown when the toggle is on.
+     * Falls back to `label` when omitted. May be a function of the model.
+     */
+    textWhenTrue?: MaybeFn<string>;
+
+    /**
+     * For `switch` fields: contextual label shown when the toggle is off.
+     * Falls back to `label` when omitted. May be a function of the model.
+     */
+    textWhenFalse?: MaybeFn<string>;
+
     /** CSS class for the form group */
     class?: string;
 
@@ -191,8 +223,13 @@ export interface FormTab {
     /** Unique key for this tab */
     key: string;
 
-    /** Display label (optional, defaults to the key) */
-    label?: string;
+    /**
+     * Display label (optional, defaults to the key). May be a function of the
+     * form model — the live form data merged with any `context` (e.g. the row
+     * DXTable is editing) — so a tab title can reflect the record, such as
+     * `label: (model) => \`Products (${model.products_count ?? 0})\``.
+     */
+    label?: MaybeFn<string>;
 
     /** Field keys (from the form's fields) to render in this tab */
     fieldKeys: string[];