@omnitend/dashboard-for-laravel 0.19.2 → 0.22.0

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

@@ -6,7 +6,7 @@
 <template>
     <span class="dx-field-label">
         <span class="dx-field-label__text">{{ label }}</span>
-        <template v-if="info">
+        <template v-if="info || $slots.popover || popoverRender">
             <button
                 :id="infoId"
                 type="button"
@@ -22,15 +22,24 @@
                 focus
                 placement="top"
             >
-                {{ info }}
+                <!--
+                  @slot Rich popover body. Overrides the plain `info` text — use
+                  it for lists, bold, paragraphs. Falls back to `{{ info }}`.
+                -->
+                <slot name="popover">
+                    <!-- DXField forwards its `info-popover` slot here via inject. -->
+                    <component v-if="popoverRender" :is="popoverRender" />
+                    <template v-else>{{ info }}</template>
+                </slot>
             </DPopover>
         </template>
     </span>
 </template>
 
 <script setup lang="ts">
-import { useId } from "vue";
+import { computed, inject, useId } from "vue";
 import DPopover from "../base/DPopover.vue";
+import { dxFieldInfoPopoverKey } from "./dxFieldContext";
 
 interface Props {
     /** Visible label text. */
@@ -42,6 +51,12 @@ interface Props {
 
 defineProps<Props>();
 
+// A rich popover body forwarded by a DXField ancestor (its `info-popover`
+// slot), if any. The explicit `popover` slot still takes precedence for
+// standalone use. Null when there's no DXField ancestor / no such slot.
+const injectedPopover = inject(dxFieldInfoPopoverKey, null);
+const popoverRender = computed(() => injectedPopover?.value ?? null);
+
 // Stable, SSR-safe id so the popover can target the trigger button.
 const infoId = `dx-field-info-${useId()}`;
 </script>

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

@@ -65,52 +65,22 @@
                         -->
                         <slot :name="`tab-before(${tab.key})`" :tab="tab" :model="model" />
 
-                        <template v-for="field in visibleFieldsFor(tab)" :key="field.key">
-                            <!--
-                              @slot Fully replaces a field's rendering (including its label), keyed by field key: `field(<key>)`. Unlike `value(<key>)`, bypasses DXField entirely — like `tab-content`, this also supersedes `field-before(<key>)`/`field-after(<key>)` for the same key.
-                              @binding {FieldDefinition} field The field definition being replaced.
-                              @binding {object} model Live form data merged with `context`, for predicates.
-                            -->
-                            <slot
-                                v-if="$slots[`field(${field.key})`]"
-                                :name="`field(${field.key})`"
-                                :field="field"
-                                :model="model"
-                            />
-                            <template v-else>
-                                <!--
-                                  @slot Content inserted directly above a field, keyed by field key: `field-before(<key>)`. Not rendered when `field(<key>)` replaces the same field.
-                                  @binding {FieldDefinition} field The field about to be rendered.
-                                  @binding {object} model Live form data merged with `context`, for predicates.
-                                -->
-                                <slot :name="`field-before(${field.key})`" :field="field" :model="model" />
-
-                                <DXField
-                                    :field="field"
-                                    :form="resolvedForm"
-                                    :model="model"
-                                    :layout="field.layout ?? layout"
-                                    :label-cols="field.labelCols ?? labelCols"
-                                    :hide-label="field.hideLabel"
-                                >
-                                    <template
-                                        v-for="(slotName, target) in fieldSlotMap(field.key)"
-                                        :key="target"
-                                        #[target]="slotProps"
-                                    >
-                                        <!-- @slot Per-field overrides forwarded to DXField, keyed by field key: `value(<key>)`, `span(<key>)`, `info(<key>)`, `hint(<key>)`, `repeater-row(<key>)`. -->
-                                        <slot :name="slotName" v-bind="slotProps" />
-                                    </template>
-                                </DXField>
-
-                                <!--
-                                  @slot Content inserted directly below a field, keyed by field key: `field-after(<key>)`. Not rendered when `field(<key>)` replaces the same field.
-                                  @binding {FieldDefinition} field The field that was just rendered.
-                                  @binding {object} model Live form data merged with `context`, for predicates.
-                                -->
-                                <slot :name="`field-after(${field.key})`" :field="field" :model="model" />
+                        <DXFormField
+                            v-for="field in visibleFieldsFor(tab)"
+                            :key="field.key"
+                            :field="field"
+                            :form="resolvedForm"
+                            :model="model"
+                            :layout="layout"
+                            :label-cols="labelCols"
+                        >
+                            <!-- Forward every DXForm slot so the field can render
+                                 its keyed field(<key>)/field-before/field-after/
+                                 value/span/info/hint/repeater-row slots. -->
+                            <template v-for="(_, name) in $slots" :key="name" #[name]="slotProps">
+                                <slot :name="name" v-bind="slotProps" />
                             </template>
-                        </template>
+                        </DXFormField>
 
                         <!--
                           @slot Content inserted below a tab's fields, keyed by tab (slot name `tab-after(<tabKey>)`).
@@ -129,52 +99,22 @@
              instead, above). -->
         <template v-if="!hasTabs">
             <component :is="card ? DCard : 'div'">
-                <template v-for="field in visibleFlatFields" :key="field.key">
-                    <!--
-                      @slot Fully replaces a field's rendering (including its label), keyed by field key: `field(<key>)`. Unlike `value(<key>)`, bypasses DXField entirely — like `tab-content`, this also supersedes `field-before(<key>)`/`field-after(<key>)` for the same key.
-                      @binding {FieldDefinition} field The field definition being replaced.
-                      @binding {object} model Live form data merged with `context`, for predicates.
-                    -->
-                    <slot
-                        v-if="$slots[`field(${field.key})`]"
-                        :name="`field(${field.key})`"
-                        :field="field"
-                        :model="model"
-                    />
-                    <template v-else>
-                        <!--
-                          @slot Content inserted directly above a field, keyed by field key: `field-before(<key>)`. Not rendered when `field(<key>)` replaces the same field.
-                          @binding {FieldDefinition} field The field about to be rendered.
-                          @binding {object} model Live form data merged with `context`, for predicates.
-                        -->
-                        <slot :name="`field-before(${field.key})`" :field="field" :model="model" />
-
-                        <DXField
-                            :field="field"
-                            :form="resolvedForm"
-                            :model="model"
-                            :layout="field.layout ?? layout"
-                            :label-cols="field.labelCols ?? labelCols"
-                            :hide-label="field.hideLabel"
-                        >
-                            <template
-                                v-for="(slotName, target) in fieldSlotMap(field.key)"
-                                :key="target"
-                                #[target]="slotProps"
-                            >
-                                <!-- @slot Per-field overrides forwarded to DXField, keyed by field key: `value(<key>)`, `span(<key>)`, `info(<key>)`, `hint(<key>)`, `repeater-row(<key>)`. -->
-                                <slot :name="slotName" v-bind="slotProps" />
-                            </template>
-                        </DXField>
-
-                        <!--
-                          @slot Content inserted directly below a field, keyed by field key: `field-after(<key>)`. Not rendered when `field(<key>)` replaces the same field.
-                          @binding {FieldDefinition} field The field that was just rendered.
-                          @binding {object} model Live form data merged with `context`, for predicates.
-                        -->
-                        <slot :name="`field-after(${field.key})`" :field="field" :model="model" />
+                <DXFormField
+                    v-for="field in visibleFlatFields"
+                    :key="field.key"
+                    :field="field"
+                    :form="resolvedForm"
+                    :model="model"
+                    :layout="layout"
+                    :label-cols="labelCols"
+                >
+                    <!-- Forward every DXForm slot so the field can render its
+                         keyed field(<key>)/field-before/field-after/value/span/
+                         info/hint/repeater-row slots. -->
+                    <template v-for="(_, name) in $slots" :key="name" #[name]="slotProps">
+                        <slot :name="name" v-bind="slotProps" />
                     </template>
-                </template>
+                </DXFormField>
 
                 <!-- Submit button -->
                 <DButton
@@ -233,7 +173,7 @@ import DButton from "../base/DButton.vue";
 import DCard from "../base/DCard.vue";
 import DTabs from "../base/DTabs.vue";
 import DTab from "../base/DTab.vue";
-import DXField from "./DXField.vue";
+import DXFormField from "./DXFormField.vue";
 import type { UseFormReturn } from "../../composables/useForm";
 import type { DefineFormReturn } from "../../composables/defineForm";
 import type { FieldDefinition, FormTab, LabelCols, MaybeFn } from "../../types";
@@ -408,24 +348,6 @@ const visibleFlatFields = computed<FieldDefinition[]>(() =>
     resolvedFields.value.filter(isFieldVisible),
 );
 
-// ————————————————— per-field slot forwarding
-
-/** Map a DXField slot name to the parent's keyed slot, when present. */
-function fieldSlotMap(key: string): Record<string, string> {
-    const map: Record<string, string> = {};
-    const candidates: Array<[string, string]> = [
-        ["value", `value(${key})`],
-        ["span", `span(${key})`],
-        ["info", `info(${key})`],
-        ["hint", `hint(${key})`],
-        ["repeater-row", `repeater-row(${key})`],
-    ];
-    for (const [target, source] of candidates) {
-        if (slots[source]) map[target] = source;
-    }
-    return map;
-}
-
 // ————————————————— auto-switch to the first error tab
 
 /** Keys that currently carry at least one validation error. */

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

@@ -0,0 +1,98 @@
+<!--
+  @component
+  DXFormField — internal per-field renderer for DXForm.
+
+  Owns the single per-field render block that DXForm's tabbed and flat layouts
+  both need: the `field(<key>)` full-replacement slot, the
+  `field-before(<key>)`/`field-after(<key>)` wrapper slots, and the `<DXField>`
+  element with its `value`/`span`/`info`/`hint`/`repeater-row` slot forwarding.
+
+  Extracted so those per-field props/slots are wired in ONE place — before this,
+  DXForm carried two near-identical copies (tabbed + flat) and a new per-field
+  prop had to be added to both, which was easy to miss (see #78/#83). DXForm
+  forwards all of its slots into each instance; this component only reads the
+  ones matching its field's key.
+
+  Internal: not exported from the package index — consumers use DXForm.
+-->
+<template>
+  <!-- Full replacement slot bypasses DXField entirely (mirrors tab-content):
+       also supersedes field-before/field-after for the same key. -->
+  <slot
+    v-if="$slots[`field(${field.key})`]"
+    :name="`field(${field.key})`"
+    :field="field"
+    :model="model"
+  />
+  <template v-else>
+    <!-- Content inserted directly above the field. -->
+    <slot :name="`field-before(${field.key})`" :field="field" :model="model" />
+
+    <DXField
+      :field="field"
+      :form="form"
+      :model="model"
+      :layout="field.layout ?? layout"
+      :label-cols="field.labelCols ?? labelCols"
+      :hide-label="field.hideLabel"
+    >
+      <template
+        v-for="(slotName, target) in fieldSlotMap()"
+        :key="target"
+        #[target]="slotProps"
+      >
+        <!-- Per-field overrides forwarded to DXField: value/span/info/hint/repeater-row. -->
+        <slot :name="slotName" v-bind="slotProps" />
+      </template>
+    </DXField>
+
+    <!-- Content inserted directly below the field. -->
+    <slot :name="`field-after(${field.key})`" :field="field" :model="model" />
+  </template>
+</template>
+
+<script setup lang="ts">
+import { useSlots } from "vue";
+import DXField from "./DXField.vue";
+import type { UseFormReturn } from "../../composables/useForm";
+import type { FieldDefinition, LabelCols } from "../../types";
+
+interface Props {
+  /** The field to render. */
+  field: FieldDefinition;
+  /** The resolved form instance (state, errors, submit helpers). */
+  form: UseFormReturn<any>;
+  /** Live form data merged with context, for slot bindings/predicates. */
+  model: Record<string, any>;
+  /** Form-level layout; overridden per-field by `field.layout`. */
+  layout?: "vertical" | "horizontal";
+  /** Form-level label column width; overridden per-field by `field.labelCols`. */
+  labelCols?: LabelCols;
+}
+
+const props = defineProps<Props>();
+const slots = useSlots();
+
+/**
+ * Map a DXField slot name to this field's keyed parent slot, when present.
+ * A plain function (re-read each render) rather than a computed, so a slot the
+ * consumer adds after mount is still picked up — matching DXForm's original
+ * per-render behaviour before this component was extracted.
+ */
+function fieldSlotMap(): Record<string, string> {
+  const key = props.field.key;
+  const map: Record<string, string> = {};
+  const candidates: Array<[string, string]> = [
+    ["value", `value(${key})`],
+    ["span", `span(${key})`],
+    ["info", `info(${key})`],
+    ["info-popover", `info-popover(${key})`],
+    ["hint", `hint(${key})`],
+    ["repeater-row", `repeater-row(${key})`],
+  ];
+  for (const [target, source] of candidates) {
+    if (slots[source]) map[target] = source;
+  }
+  return map;
+}
+</script>

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

@@ -0,0 +1,153 @@
+<!--
+  @component
+  DXSwitch — a "filled box" toggle switch.
+
+  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.
+
+  Usage:
+  ```vue
+  <DXSwitch v-model="isCurrent" label="Product is current" />
+  ```
+
+  For a form field, prefer a `DXField`/`DXForm` `type: 'switch'`; reach for
+  `DXSwitch` directly when you want the styled toggle outside a form. Pass a
+  `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">
+      <!--
+        @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
+        rich content by state; DXField passes a richer label element here.
+        @binding {boolean} on Whether the switch is currently on.
+      -->
+      <slot :on="isOn"><span>{{ displayText }}</span></slot>
+    </DFormCheckbox>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import DFormCheckbox from "../base/DFormCheckbox.vue";
+
+interface Props {
+  /** Whether the switch is on. */
+  modelValue?: boolean;
+  /** Static text beside the toggle; the fallback when no contextual text applies. */
+  label?: string;
+  /** Text shown when on — overrides `label` in the on state (e.g. "Product is current"). */
+  textWhenTrue?: string;
+  /** Text shown when off — overrides `label` in the off state (e.g. "Product is not current"). */
+  textWhenFalse?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: false,
+});
+
+const emit = defineEmits<{
+  "update:modelValue": [value: boolean];
+}>();
+
+const isOn = computed(() => props.modelValue);
+
+// A switch (unlike a checkbox) can say what each state *means*: prefer the
+// state-specific text, falling back to the static `label`. Ignored when the
+// default slot supplies its own content.
+const displayText = computed(() => {
+  const contextual = isOn.value ? props.textWhenTrue : props.textWhenFalse;
+  return contextual ?? props.label ?? "";
+});
+
+// Proxy the v-model so the underlying bvn checkbox's update re-emits as this
+// component's `update:modelValue`. Expects a real boolean — callers that hold a
+// truthy non-boolean (e.g. a Laravel-serialised `1`) should normalise first;
+// DXField does this before binding.
+const model = computed({
+  get: () => props.modelValue,
+  set: (value: boolean) => emit("update:modelValue", value),
+});
+
+defineOptions({
+  inheritAttrs: false,
+});
+</script>
+
+<style scoped>
+/* A compact "filled box" toggle, sized to its content — it doesn't stretch to
+   fill the form row — but matching standard input height so it lines up with
+   sibling text/select fields. Colour-codes its state: a neutral box when off, a
+   filled primary box 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. `justify-content: space-between` on a full-width box used to leave a wide
+   unclickable gap between the label and the toggle (only the tiny toggle itself
+   was a real click target); shrinking the box to fit its content removes that
+   dead zone entirely. Uses block-level `flex` (not `inline-flex`) so the box
+   stays shrink-to-fit yet still takes its own line: an inline-level box let a
+   following `<small class="form-text">` hint flow inline beside it instead of
+   dropping below the control like every other field type (#79).
+
+   Scoped `:deep()` anchored on the plain `.dx-switch` root, so the scope-id
+   reliably reaches the bvn-rendered `.form-check` (see the scoped-deep-styles
+   guard test and CLAUDE.md). */
+.dx-switch :deep(.form-check) {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  width: fit-content;
+  max-width: 100%; /* wrap/ellipsize rather than overflow a narrow field */
+  min-height: var(--dx-input-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 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);
+}
+
+.dx-switch--on :deep(.form-check-label) {
+  color: var(--bs-primary-text-emphasis);
+  font-weight: 500;
+}
+
+.dx-switch--on :deep(.form-check-input:checked) {
+  background-color: var(--bs-primary);
+  border-color: var(--bs-primary);
+}
+
+.dx-switch--on :deep(.form-check-input:focus) {
+  border-color: var(--bs-primary);
+  box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
+}
+</style>

package/resources/js/components/extended/dxFieldContext.ts

@@ -0,0 +1,14 @@
+import type { ComputedRef, InjectionKey } from "vue";
+
+/**
+ * Lets `DXField` forward its `info-popover` slot to the `DXFieldLabel` it
+ * renders — at any of its several label sites — without repeating the forward
+ * at each one. The provided value is a render function for the popover body, or
+ * `null` when the field has no `info-popover` slot.
+ *
+ * Optional: a `DXFieldLabel` used standalone (no `DXField` ancestor) injects the
+ * default `null` and falls back to its own `popover` slot / `info` text.
+ */
+export const dxFieldInfoPopoverKey: InjectionKey<
+    ComputedRef<(() => unknown) | null>
+> = Symbol("dxFieldInfoPopover");

package/resources/js/composables/useForm.ts

@@ -293,9 +293,16 @@ export function useForm<TData extends Record<string, any>>(
                         sendPayload as Record<string, unknown>,
                         { signal: options?.signal },
                     )
-                    : await api[sendMethod]<TResponse>(url, sendPayload, {
-                        signal: options?.signal,
-                    });
+                    : sendMethod === "delete"
+                        // A record is deleted by its URL — don't submit the form
+                        // fields as a request body. Passing the payload here would
+                        // send the whole model on every delete.
+                        ? await api.delete<TResponse>(url, undefined, {
+                            signal: options?.signal,
+                        })
+                        : await api[sendMethod]<TResponse>(url, sendPayload, {
+                            signal: options?.signal,
+                        });
 
             state.recentlySuccessful = true;
             setTimeout(() => (state.recentlySuccessful = false), 1500);

package/resources/js/index.ts

@@ -9,6 +9,7 @@ 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 DXSwitch } from "./components/extended/DXSwitch.vue";
 export { default as DXStatCard } from "./components/extended/DXStatCard.vue";
 export { default as DXBarChart } from "./components/charts/DXBarChart.vue";
 export { default as DXLineChart } from "./components/charts/DXLineChart.vue";
@@ -138,4 +139,6 @@ export type {
     NavigationItem,
     NavigationGroup,
     Navigation,
+    NavbarSearchAlign,
+    NavbarActionsOnMobile,
 } from "./types/navigation";

package/resources/js/types/index.ts

@@ -165,7 +165,10 @@ export interface FieldDefinition {
      * 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.
+     * the model. Plain text only — for a rich popover body (lists, bold,
+     * paragraphs) use the `#info-popover(<key>)` slot. Note the separate
+     * `#info(<key>)` slot renders an always-visible block below the control,
+     * not popover content.
      */
     info?: MaybeFn<string>;
 

package/resources/js/types/navigation.ts

@@ -30,3 +30,18 @@ export interface NavigationGroup {
 }
 
 export type Navigation = NavigationGroup[];
+
+/**
+ * Horizontal alignment of the navbar search slot content within its region:
+ * `"start"` = flush left (after the title from `md` up), `"center"` = centred.
+ * Shared by DXDashboard (which forwards it) and DXDashboardNavbar.
+ */
+export type NavbarSearchAlign = "start" | "center";
+
+/**
+ * What the navbar actions slot does below the `md` breakpoint: `"wrap"` moves
+ * it to its own full-width row (the bar grows), `"hide"` removes it entirely
+ * (for apps that relocate page actions into the page on phones).
+ * Shared by DXDashboard (which forwards it) and DXDashboardNavbar.
+ */
+export type NavbarActionsOnMobile = "wrap" | "hide";

package/resources/js/utils/api.ts

@@ -173,9 +173,26 @@ class ApiClient {
 
     async delete<T = unknown>(
         url: string,
-        options: Omit<RequestOptions, "method"> = {},
+        data: any = undefined,
+        options: Omit<RequestOptions, "method" | "body"> = {},
     ) {
-        return this.request<T>(url, { ...options, method: "DELETE" });
+        // Consistent (url, data, options) signature with post/put/patch so the
+        // third argument is always the request options (e.g. `{ signal }`) — it
+        // used to be the second, so `useForm.submit`'s uniform call spread the
+        // form payload into the fetch config and dropped the abort signal.
+        // DELETE bodies are legal but unusual: only send one when data is given
+        // (a record is deleted by its URL — `useForm.delete()` sends none).
+        const body =
+            data === undefined || data === null
+                ? undefined
+                : data instanceof FormData
+                  ? data
+                  : JSON.stringify(data);
+        return this.request<T>(url, {
+            ...options,
+            method: "DELETE",
+            ...(body !== undefined ? { body } : {}),
+        });
     }
 }