@omnitend/dashboard-for-laravel 0.44.0 → 0.45.0

package/docs/public/api-reference.json

@@ -1,8 +1,8 @@
 {
-  "generated": "2026-10-09T16:42:41.495Z",
+  "generated": "2026-10-11T09:08:08.777Z",
   "package": {
     "name": "@omnitend/dashboard-for-laravel",
-    "version": "0.44.0"
+    "version": "0.45.0"
   },
   "components": {
     "base": [
@@ -2932,8 +2932,8 @@
             "name": "delay",
             "type": "number",
             "required": false,
-            "default": "300",
-            "description": ""
+            "default": "600",
+            "description": "Milliseconds to wait before showing anything. Most loads finish\n sooner, and one that has already taken this long is likely to take\n longer, so a quick load never flashes a loader."
           }
         ],
         "events": [],

package/docs/public/docs-map.md

@@ -1,7 +1,7 @@
 # Documentation Map
 
 > Auto-generated hierarchical overview of all documentation
-> Last updated: 2026-10-09T16:42:41.546Z
+> Last updated: 2026-10-11T09:08:08.837Z
 
 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.44.0",
+  "version": "0.45.0",
   "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

@@ -1992,3 +1992,123 @@ $dx-chart-edge-dark: $body-bg-dark;
 thead tr:has(.dx-table-filter-cell) > td {
   padding: 0.5rem;
 }
+
+// ————————————————— DXLoading (the soft loader)
+//
+// Modelled on Omni Tend's legacy loader: a small grey spinner beside the
+// text on one line, the text in the display face with a slow light sweep
+// across it, fading in after DXLoading's delay. Quieter than a navy spinner,
+// but the text keeps AA contrast (#6c757d, 4.69:1 on white; the legacy
+// gray-300 was 1.5:1). The sweep passes through a lighter grey, so a moment
+// of the text sits below AA while it moves. Global, not scoped: DXTable and
+// consumers render it, and its spinner is a bvn component.
+//
+// The `role="status"` box renders at once with its contents hidden, and
+// `.dx-loading--shown` reveals them after the delay. Two reasons: a live
+// region that is already in the page announces content added to it (one
+// inserted together with its text can go unannounced), and the space the
+// loader will take is held from the start, so nothing jumps when it appears.
+@mixin dx-loading-light-vars {
+  --dx-loading-color: #{$gray-600};
+  --dx-loading-sweep-color: #{$gray-500};
+  --dx-loading-spinner-color: #{$gray-500};
+}
+
+// `[data-bs-theme="light"]` too, so a light section inside a dark page gets
+// the light set back (as the chart tokens do).
+:root,
+[data-bs-theme="light"] {
+  @include dx-loading-light-vars;
+  // Slower than Bootstrap's 0.75 s a turn: a calmer spin to match the soft
+  // look (1.1 s chosen against 1.5 s and 2 s side by side).
+  --dx-loading-spinner-speed: 1.1s;
+}
+
+[data-bs-theme="dark"] {
+  --dx-loading-color: #{$gray-500};
+  --dx-loading-sweep-color: #{$gray-600};
+  --dx-loading-spinner-color: #{$gray-600};
+}
+
+.dx-loading {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 1rem;
+  color: var(--dx-loading-color);
+
+  // Hidden, not removed: `visibility` keeps the box's size and keeps the
+  // contents out of the accessibility tree until they are revealed.
+  > * {
+    visibility: hidden;
+  }
+
+  // Set on the spinner itself: Bootstrap declares its speed on
+  // `.spinner-border`, so a value inherited from `.dx-loading` would lose.
+  .spinner-border {
+    flex: none;
+    color: var(--dx-loading-spinner-color);
+    --bs-spinner-animation-speed: var(--dx-loading-spinner-speed);
+  }
+}
+
+.dx-loading--shown {
+  animation: dx-loading-fade-in 0.4s ease-out both;
+
+  > * {
+    visibility: visible;
+  }
+}
+
+.dx-loading__text {
+  margin: 0;
+  font-family: var(--dx-font-family-display);
+  font-weight: 500;
+  font-size: $h2-font-size;
+  line-height: $headings-line-height;
+  background-image: linear-gradient(
+    to right,
+    var(--dx-loading-color) 20%,
+    var(--dx-loading-color) 40%,
+    var(--dx-loading-sweep-color) 60%,
+    var(--dx-loading-sweep-color) 80%,
+    var(--dx-loading-color) 99%
+  );
+  background-size: 200% auto;
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  animation: dx-loading-sweep 3s linear infinite;
+}
+
+@keyframes dx-loading-fade-in {
+  from {
+    opacity: 0;
+  }
+}
+
+@keyframes dx-loading-sweep {
+  to {
+    background-position: 200% center;
+  }
+}
+
+// For people who asked for less motion: no sweep and no fade (the text is
+// plain grey and appears at once), and the spinner slows to double its turn,
+// as Bootstrap's own reduced-motion rule does for its spinners. That rule
+// cannot reach this one, because the speed above out-ranks it.
+@media (prefers-reduced-motion: reduce) {
+  .dx-loading--shown,
+  .dx-loading__text {
+    animation: none;
+  }
+
+  .dx-loading__text {
+    background-image: none;
+    -webkit-text-fill-color: currentColor;
+  }
+
+  .dx-loading .spinner-border {
+    --bs-spinner-animation-speed: calc(2 * var(--dx-loading-spinner-speed));
+  }
+}

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

@@ -405,7 +405,14 @@ import DXNumericField from "./DXNumericField.vue";
 import DXChoiceField from "./DXChoiceField.vue";
 import { useAsyncOptions } from "../../composables/useAsyncOptions";
 import type { UseFormReturn } from "../../composables/useForm";
-import type { FieldDefinition, FieldOption, FieldType, LabelCols } from "../../types";
+import type {
+    FieldDefinition,
+    FieldOption,
+    FieldType,
+    LabelCols,
+    MaybeFn,
+} from "../../types";
+import { humaniseErrorKey } from "../../utils/formErrorTargets";
 import { getByPath, setByPath } from "../../utils/objectPath";
 
 // Async to break the DXField <-> DXRepeater circular import.
@@ -619,6 +626,21 @@ function resolveMaybe<TValue>(
     return value;
 }
 
+/** Resolve display TEXT (label, hint, info, switch text) the way
+ *  resolveMaybe does, but a function that throws (a repeater row missing a
+ *  property it reads) gives `undefined` instead of breaking the render (#204).
+ *  Behaviour options (disabled, readonly, plaintext) stay unguarded: no
+ *  fallback for those is safe to guess. */
+function resolveText(
+    value: MaybeFn<string> | undefined,
+): string | undefined {
+    try {
+        return resolveMaybe(value);
+    } catch {
+        return undefined;
+    }
+}
+
 const fieldValue = computed({
     get: () =>
         usePathSemantics.value
@@ -691,13 +713,19 @@ function setValue(value: any): void {
 
 const fieldState = computed(() => props.form.getState(errorKey.value));
 
-const resolvedLabel = computed(
-    () => resolveMaybe(props.field.label) ?? props.field.key,
-);
+// A label function that throws falls back to the humanised key, as the
+// repeater's headers and the error summary do; a missing label still shows
+// the raw key, as it always has.
+const resolvedLabel = computed(() => {
+    if (typeof props.field.label !== "function") {
+        return props.field.label ?? props.field.key;
+    }
+    return resolveText(props.field.label) ?? humaniseErrorKey(props.field.key);
+});
 
-const resolvedHint = computed(() => resolveMaybe(props.field.hint));
+const resolvedHint = computed(() => resolveText(props.field.hint));
 
-const resolvedInfo = computed(() => resolveMaybe(props.field.info));
+const resolvedInfo = computed(() => resolveText(props.field.info));
 
 // ————————————————— switch-list (#160)
 
@@ -763,8 +791,8 @@ const switchModel = computed({
  */
 const switchText = computed(() => {
     const contextual = switchIsOn.value
-        ? resolveMaybe(props.field.textWhenTrue)
-        : resolveMaybe(props.field.textWhenFalse);
+        ? resolveText(props.field.textWhenTrue)
+        : resolveText(props.field.textWhenFalse);
     return contextual ?? resolvedLabel.value;
 });
 

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

@@ -1,12 +1,16 @@
 <template>
+  <!-- The status box is there from the start, holding the loader's space
+       with its contents hidden (theme.scss); the delay only reveals them.
+       Content added to a live region already in the page is announced,
+       where a region inserted with its text can be missed. -->
   <div
-    v-if="isVisible"
-    class="dx-loading text-center text-muted py-5"
+    class="dx-loading py-5"
+    :class="{ 'dx-loading--shown': isVisible }"
     role="status"
     aria-live="polite"
   >
-    <DSpinner variant="primary" aria-hidden="true" />
-    <div class="mt-2">{{ text }}</div>
+    <DSpinner small aria-hidden="true" />
+    <p class="dx-loading__text">{{ text }}</p>
   </div>
 </template>
 
@@ -14,14 +18,20 @@
 import { onBeforeUnmount, onMounted, ref } from "vue";
 import DSpinner from "../base/DSpinner.vue";
 
+// Styles (one line, grey, a slow sweep across the text, a fade-in, contents
+// hidden until `.dx-loading--shown`) are global in theme.scss under
+// `.dx-loading`, with `--dx-loading-*` tokens.
 const props = withDefaults(
   defineProps<{
     text?: string;
+    /** Milliseconds to wait before showing anything. Most loads finish
+     *  sooner, and one that has already taken this long is likely to take
+     *  longer, so a quick load never flashes a loader. */
     delay?: number;
   }>(),
   {
     text: "Loading…",
-    delay: 300,
+    delay: 600,
   },
 );
 
@@ -29,14 +39,11 @@ const isVisible = ref(false);
 let showTimer: ReturnType<typeof setTimeout> | undefined;
 
 onMounted(() => {
-  if (props.delay <= 0) {
-    isVisible.value = true;
-    return;
-  }
-
+  // Always a timer, even for no delay: the empty status box must reach the
+  // page a task before its contents, or the announcement can be missed.
   showTimer = setTimeout(() => {
     isVisible.value = true;
-  }, props.delay);
+  }, Math.max(props.delay, 0));
 });
 
 onBeforeUnmount(() => {

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

@@ -35,10 +35,7 @@
                         {{ error || apiError }}
                     </div>
 
-                    <div v-if="effectiveBusy && !isProviderMode" class="text-center py-5">
-                        <DSpinner variant="primary" />
-                        <p class="mt-2">{{ loadingText }}</p>
-                    </div>
+                    <DXLoading v-if="effectiveBusy && !isProviderMode" :text="loadingText" />
 
                     <!-- One table for all three data modes. The modes differ only
                          in a few bound props, supplied by `tableModeBindings`, so
@@ -326,7 +323,7 @@ import DContainer from "../base/DContainer.vue";
 import DRow from "../base/DRow.vue";
 import DCol from "../base/DCol.vue";
 import DXTableShell from "./DXTableShell.vue";
-import DSpinner from "../base/DSpinner.vue";
+import DXLoading from "./DXLoading.vue";
 import DTable from "../base/DTable.vue";
 import DFormInput from "../base/DFormInput.vue";
 import DFormSelect from "../base/DFormSelect.vue";