@omnitend/dashboard-for-laravel 0.19.2 → 0.21.0

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

@@ -1,6 +1,6 @@
 <!--
   @component
-  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.
+  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`, `info-popover`, `hint` and `repeater-row` slots for per-field customisation.
 -->
 <template>
     <!-- Full-width span field: delegate entirely to the #span slot -->
@@ -128,7 +128,7 @@
          duplicated popover trigger. -->
     <DFormGroup
         v-else-if="field.type === 'switch' && isHorizontal"
-        :class="[field.class || 'mb-3', 'dx-switch', { 'dx-switch--on': switchIsOn }]"
+        :class="field.class || 'mb-3'"
         v-bind="horizontalAttrs"
     >
         <!-- The row label (left column) names the control. The switch's own
@@ -156,10 +156,9 @@
             :value="fieldValue"
             :update="setValue"
         />
-        <DFormCheckbox
+        <DXSwitch
             v-else
             v-model="switchModel"
-            switch
             :disabled="isDisabled || isReadonly"
             v-bind="field.inputProps"
         >
@@ -167,7 +166,7 @@
                 :label="switchText"
                 :class="switchHasContextualText ? undefined : 'visually-hidden'"
             />
-        </DFormCheckbox>
+        </DXSwitch>
 
         <DFormInvalidFeedback v-if="form.hasError(errorKey)" force-show>
             {{ form.getError(errorKey) }}
@@ -179,10 +178,10 @@
         <DFormText v-if="field.help">{{ field.help }}</DFormText>
     </DFormGroup>
 
-    <!-- Switch (vertical, default): toggle with contextual on/off text and an on-state style -->
+    <!-- Switch (vertical, default): toggle with contextual on/off text (DXSwitch owns the filled-box on-state style) -->
     <div
         v-else-if="field.type === 'switch'"
-        :class="[field.class || 'mb-3', 'dx-switch', { 'dx-switch--on': switchIsOn }]"
+        :class="field.class || 'mb-3'"
     >
         <!--
           @slot Replaces the built-in control with a custom value editor.
@@ -199,15 +198,14 @@
             :value="fieldValue"
             :update="setValue"
         />
-        <DFormCheckbox
+        <DXSwitch
             v-else
             v-model="switchModel"
-            switch
             :disabled="isDisabled || isReadonly"
             v-bind="field.inputProps"
         >
             <DXFieldLabel :label="switchText" :info="resolvedInfo" />
-        </DFormCheckbox>
+        </DXSwitch>
 
         <DFormInvalidFeedback v-if="form.hasError(errorKey)" force-show>
             {{ form.getError(errorKey) }}
@@ -442,7 +440,7 @@
         <!-- Text-based inputs (text/email/password/number/url/tel/date/time/datetime) -->
         <DFormInput
             v-else
-            v-model="fieldValue"
+            v-model="textFieldModel"
             :type="inputType"
             :required="field.required"
             :placeholder="field.placeholder"
@@ -490,16 +488,20 @@ import {
     defineAsyncComponent,
     onBeforeUnmount,
     onMounted,
+    provide,
     ref,
     useId,
+    useSlots,
     watch,
 } from "vue";
+import { dxFieldInfoPopoverKey } from "./dxFieldContext";
 import DFormGroup from "../base/DFormGroup.vue";
 import DFormInput from "../base/DFormInput.vue";
 import DFormTextarea from "../base/DFormTextarea.vue";
 import DFormSelect from "../base/DFormSelect.vue";
 import DFormRadioGroup from "../base/DFormRadioGroup.vue";
 import DFormCheckbox from "../base/DFormCheckbox.vue";
+import DXSwitch from "./DXSwitch.vue";
 import DFormInvalidFeedback from "../base/DFormInvalidFeedback.vue";
 import DFormText from "../base/DFormText.vue";
 import DInputGroup from "../base/DInputGroup.vue";
@@ -559,6 +561,24 @@ const props = defineProps<Props>();
 
 const effectiveModel = computed(() => props.model ?? props.form.data);
 
+// Forward the `info-popover` slot to whichever DXFieldLabel this field renders,
+// once — so the label sites stay plain `<DXFieldLabel :label :info />` and can't
+// drift out of sync (each rendering its own copy of the forward). DXFieldLabel
+// injects this; standalone use ignores it.
+const slots = useSlots();
+provide(
+    dxFieldInfoPopoverKey,
+    computed(() =>
+        slots["info-popover"]
+            ? () =>
+                  slots["info-popover"]!({
+                      field: props.field,
+                      model: props.model,
+                  })
+            : null,
+    ),
+);
+
 // ————————————————— horizontal layout (#66)
 
 // A `span` field always bypasses the label/content column split — it's
@@ -662,6 +682,41 @@ const fieldValue = computed({
     set: (value: any) => setValue(value),
 });
 
+// Native <input type=date/datetime-local/time> only accept a strict format
+// (YYYY-MM-DD, YYYY-MM-DDTHH:MM, HH:MM) and render EMPTY for anything else —
+// including Laravel's ISO-8601 (`…Z`) and `Y-m-d H:i:s` serialisations, so a
+// field seeded with `created_at` shows a blank placeholder. Reshape the
+// *displayed* value to the input's format for those types; the setter writes
+// the input's native value straight back. This is a pure string reshape, not a
+// timezone conversion — the stored wall-clock is shown as-is, so a UTC `…Z`
+// value displays its UTC time (convert before seeding if you need local).
+const DATE_FAMILY_TYPES = new Set<FieldType>(["date", "datetime", "time"]);
+
+function normaliseDateForInput(value: unknown, type: FieldType): string {
+    if (value === null || value === undefined || value === "") return "";
+    const iso = String(value).replace(" ", "T"); // `Y-m-d H:i:s` → ISO-ish
+    if (type === "date") {
+        return iso.match(/^(\d{4}-\d{2}-\d{2})/)?.[1] ?? "";
+    }
+    if (type === "time") {
+        // Anchor to the start or the time part of an ISO value, so a malformed
+        // string can't yield a stray HH:MM from the middle.
+        return iso.match(/(?:^|T)(\d{2}:\d{2})/)?.[1] ?? "";
+    }
+    // datetime → datetime-local
+    return iso.match(/^(\d{4}-\d{2}-\d{2}T\d{2}:\d{2})/)?.[1] ?? "";
+}
+
+// Model for the text-based input branch. Reshapes date-family values for the
+// native picker; every other type passes straight through.
+const textFieldModel = computed({
+    get: () =>
+        DATE_FAMILY_TYPES.has(props.field.type)
+            ? normaliseDateForInput(fieldValue.value, props.field.type)
+            : fieldValue.value,
+    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
@@ -913,70 +968,4 @@ onBeforeUnmount(() => {
     border-radius: var(--bs-border-radius);
 }
 
-/* Switch field: a compact "filled box" toggle, sized to its content — like the
-   plain `checkbox` field type, 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 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.
-   `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). */
-.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 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-text-emphasis);
-    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

@@ -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>