@omnitend/dashboard-for-laravel 0.45.0 → 0.46.0

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

@@ -113,17 +113,29 @@
   </div>
 </template>
 
-<script setup lang="ts">
-import { ref, computed, useSlots, useId, watch, onMounted, onBeforeUnmount, onActivated, onDeactivated } from 'vue';
+<script setup lang="ts" generic="TNavigation extends Navigation = Navigation">
+import { ref, computed, useId, useTemplateRef, watch, onMounted, onBeforeUnmount, onActivated, onDeactivated } from 'vue';
 import DXDashboardSidebar from './DXDashboardSidebar.vue';
 import DXDashboardNavbar from './DXDashboardNavbar.vue';
 import DContainer from '../base/DContainer.vue';
 import DRow from '../base/DRow.vue';
 import DCol from '../base/DCol.vue';
 import { acquirePageScrollLock, releasePageScrollLock } from '../../utils/pageScrollLock';
-import type { Navigation, NavbarActionsOnMobile, NavbarSearchAlign, SidebarVariant } from '../../types/navigation';
-
-const slots = useSlots();
+import type {
+  DashboardSlots,
+  Navigation,
+  NavigationItemOf,
+  NavbarActionsOnMobile,
+  NavbarSearchAlign,
+  SidebarVariant,
+} from '../../types/navigation';
+
+// Typed slots, derived from the children's slot types (see `DashboardSlots`).
+// `TNavigation` is inferred from the `navigation` prop, so
+// `#sidebar-link="{ item }"` has the app's own item keys (see
+// `NavigationItemOf`). Types only: the forwarding below stays dynamic, so it
+// never lists names.
+const slots = defineSlots<DashboardSlots<NavigationItemOf<TNavigation>>>();
 
 // Slot-binding precedence: the forwarded slots bind the child's own slot props
 // FIRST and `toggleSidebar`/`sidebarHidden` after, so ours win a name clash.
@@ -131,9 +143,12 @@ const slots = useSlots();
 // forwarded slot, and a child that later grew a same-named prop must not be
 // able to silently take the guarantee away. No child uses those names today.
 
-interface Props {
+// Declared inline, not as a local `interface Props`: a generic component's
+// emitted declaration names its props type, and a local interface there fails
+// the declaration build (TS4082).
+const props = withDefaults(defineProps<{
   /** Navigation structure for sidebar */
-  navigation: Navigation;
+  navigation: TNavigation;
 
   /** Current URL path for active state */
   currentUrl: string;
@@ -209,9 +224,7 @@ interface Props {
    * If not provided, uses global HTML class approach (for SSR compatibility)
    */
   dashboardId?: string;
-}
-
-const props = withDefaults(defineProps<Props>(), {
+}>(), {
   title: 'Dashboard',
   pageTitle: '',
   user: null,
@@ -228,13 +241,15 @@ const props = withDefaults(defineProps<Props>(), {
 
 const collapsed = ref(false);
 
-// Compute sidebar slots (strip 'sidebar-' prefix)
+// Compute sidebar slots (strip 'sidebar-' prefix). The values are typed as
+// declared slot names so the template's `<slot :name>` type-checks; at runtime
+// any `sidebar-*`/`navbar-*` slot the consumer passes is forwarded.
 const sidebarSlots = computed(() => {
-  const result: Record<string, string> = {};
+  const result: Record<string, keyof DashboardSlots> = {};
   Object.keys(slots).forEach(name => {
     if (name.startsWith('sidebar-')) {
       const strippedName = name.substring(8); // Remove 'sidebar-' prefix
-      result[strippedName] = name;
+      result[strippedName] = name as keyof DashboardSlots;
     }
   });
   return result;
@@ -242,11 +257,11 @@ const sidebarSlots = computed(() => {
 
 // Compute navbar slots (strip 'navbar-' prefix)
 const navbarSlots = computed(() => {
-  const result: Record<string, string> = {};
+  const result: Record<string, keyof DashboardSlots> = {};
   Object.keys(slots).forEach(name => {
     if (name.startsWith('navbar-')) {
       const strippedName = name.substring(7); // Remove 'navbar-' prefix
-      result[strippedName] = name;
+      result[strippedName] = name as keyof DashboardSlots;
     }
   });
   return result;
@@ -352,7 +367,9 @@ const phoneMenuOpen = computed(
 
 const sidebarId = `${useId()}-sidebar`;
 const layoutRef = ref<HTMLElement | null>(null);
-const sidebarComponent = ref<InstanceType<typeof DXDashboardSidebar> | null>(null);
+// A ref to the generic sidebar carries only what it exposes; its root element
+// is the exposed `el`.
+const sidebarInstance = useTemplateRef('sidebarComponent');
 
 const setHidden = (isHidden: boolean): void => {
   hidden.value = isHidden;
@@ -388,8 +405,7 @@ const onSidebarNavigate = (): void => {
   closePhoneMenu();
 };
 
-const sidebarElement = (): HTMLElement | null =>
-  (sidebarComponent.value?.$el as HTMLElement | undefined) ?? null;
+const sidebarElement = (): HTMLElement | null => sidebarInstance.value?.el ?? null;
 
 const onKeydown = (event: KeyboardEvent): void => {
   if (event.key !== 'Escape') return;
@@ -489,6 +505,13 @@ defineExpose({
 
   /** Whether the sidebar is currently hidden. */
   sidebarHidden: computed(() => hidden.value),
+
+  /**
+   * The dashboard's root element (the `.dashboard-layout` `<div>`; `null`
+   * before mount). A template ref to this generic component carries only its
+   * exposed members, so read the DOM node here rather than through `$el`.
+   */
+  el: layoutRef,
 });
 </script>
 

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

@@ -122,7 +122,15 @@ import DContainer from "../base/DContainer.vue";
 import DButton from "../base/DButton.vue";
 import DDropdown from "../base/DDropdown.vue";
 import DXUserAvatar from "./DXUserAvatar.vue";
-import type { NavbarActionsOnMobile, NavbarSearchAlign } from "../../types/navigation";
+import type {
+  DashboardNavbarSlots,
+  NavbarActionsOnMobile,
+  NavbarSearchAlign,
+} from "../../types/navigation";
+
+// Typed slots: consumers get autocomplete and slot-prop types, and DXDashboard
+// derives its `navbar-*` slot types from this interface.
+defineSlots<DashboardNavbarSlots>();
 
 const props = withDefaults(
   defineProps<{

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

@@ -165,13 +165,26 @@
   </aside>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" generic="TNavigation extends Navigation = Navigation">
 import { computed, ref, onMounted, watch, nextTick, useId } from 'vue';
-import type { Navigation, NavigationGroup, SidebarVariant } from '../../types/navigation';
+import type {
+  DashboardSidebarSlots,
+  Navigation,
+  NavigationGroup,
+  NavigationItemOf,
+  SidebarVariant,
+} from '../../types/navigation';
+
+// Typed slots: consumers get autocomplete and slot-prop types, and DXDashboard
+// derives its `sidebar-*` slot types from this interface. `TNavigation` is
+// inferred from the `navigation` prop, so an app whose items carry extra keys
+// gets them on the `link` slot's `item` (see `NavigationItemOf`). Types only:
+// nothing at runtime depends on it.
+defineSlots<DashboardSidebarSlots<NavigationItemOf<TNavigation>>>();
 
 const props = withDefaults(defineProps<{
   /** Grouped navigation to render: an array of groups, each with a label and items. */
-  navigation: Navigation;
+  navigation: TNavigation;
   /** The current route URL, used to highlight the matching nav item and open its group. */
   currentUrl: string;
   /** Collapse the rail to an icons-only strip, hiding labels and the brand title. */
@@ -469,6 +482,15 @@ watch(() => props.currentUrl, () => {
 watch(activeGroupIndex, () => {
   openActiveGroup();
 });
+
+defineExpose({
+  /**
+   * The sidebar's root `<aside>` element (`null` before mount). A template ref
+   * to this generic component carries only its exposed members, so read the
+   * DOM node here rather than through `$el`.
+   */
+  el: sidebarRef,
+});
 </script>
 
 <style scoped>

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

@@ -17,15 +17,28 @@
       </div>
     </div>
 
-    <div class="dx-stat-card__value">
-      <!--
-        @slot Override the rendered value.
-        @binding {string} formatted The value formatted per `format`.
-        @binding {string | number} value The raw value prop.
-      -->
-      <slot name="value" :formatted="formattedValue" :value="value">
-        {{ formattedValue }}
-      </slot>
+    <!-- The value's box (#213): a numeric value is fitted to this box's
+         width (utils/statCardFit.ts), so two cards to a phone row shrink a
+         long number instead of wrapping it, while a short one stays full
+         size. It is also a size container, for the CSS baseline used
+         before the fit runs. It wraps the value alone, not the card, so
+         inline-size containment never removes the title's or footer's
+         contribution to the width of a content-sized card. -->
+    <div ref="valueBox" class="dx-stat-card__value-box">
+      <div
+        ref="valueElement"
+        class="dx-stat-card__value"
+        :class="{ 'dx-stat-card__value--numeric': isNumericValue }"
+      >
+        <!--
+          @slot Override the rendered value.
+          @binding {string} formatted The value formatted per `format`.
+          @binding {string | number} value The raw value prop.
+        -->
+        <slot name="value" :formatted="formattedValue" :value="value">
+          {{ formattedValue }}
+        </slot>
+      </div>
     </div>
 
     <div v-if="hasDelta || deltaLabel || $slots.trend" class="dx-stat-card__foot">
@@ -49,9 +62,10 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from "vue";
+import { computed, onActivated, onBeforeUnmount, onMounted, ref } from "vue";
 import DCard from "../base/DCard.vue";
 import DBadge from "../base/DBadge.vue";
+import { queueFit, registerTarget, unregisterTarget, type FitTarget } from "../../utils/statCardFit";
 
 type StatFormat = "number" | "currency" | "percent";
 type DeltaDirection = "up" | "down" | "neutral";
@@ -114,6 +128,81 @@ const formattedValue = computed<string>(() => {
   return formatNumber(raw, props.format);
 });
 
+// A number, or a string with no letters ("£1,234.56", "42%"): it must never
+// break between digits. Any other string (a URL, a status word) keeps the
+// card's last-resort break so it cannot run out of the card.
+const isNumericValue = computed<boolean>(
+  () => typeof props.value === "number" || !/\p{L}/u.test(props.value),
+);
+
+const valueBox = ref<HTMLElement | null>(null);
+const valueElement = ref<HTMLElement | null>(null);
+let fitTarget: FitTarget | null = null;
+let resizeObserver: ResizeObserver | null = null;
+let mutationObserver: MutationObserver | null = null;
+
+// Browser-only, and onMounted never runs during server rendering, so the
+// server's markup carries the CSS baseline size.
+onMounted(() => {
+  if (!valueBox.value || !valueElement.value) return;
+  const target: FitTarget = {
+    box: valueBox.value,
+    value: valueElement.value,
+    isNumeric: () => isNumericValue.value,
+    fittedBoxWidth: -1,
+  };
+  fitTarget = target;
+  registerTarget(target);
+  // A microtask: after every card in this render has mounted (one batch),
+  // and before the browser paints.
+  queueFit(target, "microtask");
+
+  if (typeof ResizeObserver !== "undefined") {
+    resizeObserver = new ResizeObserver((entries) => {
+      // Text is never fitted; a change to or from text is a mutation.
+      if (!target.isNumeric()) return;
+      const width = entries[entries.length - 1]!.contentRect.width;
+      // A fit changes the box's height; only a new width needs a new fit.
+      if (Math.abs(width - target.fittedBoxWidth) < 0.01) return;
+      queueFit(target, "frame");
+    });
+    resizeObserver.observe(target.box);
+  }
+
+  // Whatever renders in the value changing (the formatted value, the
+  // numeric class, `value` slot content at any depth) refits. The fit's own
+  // writes (`style` on the value element) are ignored.
+  if (typeof MutationObserver !== "undefined") {
+    mutationObserver = new MutationObserver((records) => {
+      const changed = records.some(
+        (record) => !(record.target === target.value && record.attributeName === "style"),
+      );
+      if (changed) queueFit(target, "microtask");
+    });
+    mutationObserver.observe(target.value, {
+      childList: true,
+      subtree: true,
+      characterData: true,
+      attributes: true,
+    });
+  }
+});
+
+// Back from a deactivated <KeepAlive>: the value or the layout may have
+// changed while it was detached, when no fit could measure it.
+onActivated(() => {
+  if (fitTarget) queueFit(fitTarget, "microtask");
+});
+
+onBeforeUnmount(() => {
+  resizeObserver?.disconnect();
+  mutationObserver?.disconnect();
+  resizeObserver = null;
+  mutationObserver = null;
+  if (fitTarget) unregisterTarget(fitTarget);
+  fitTarget = null;
+});
+
 const hasDelta = computed(
   () => typeof props.delta === "number" && Number.isFinite(props.delta),
 );
@@ -176,13 +265,67 @@ const formattedDelta = computed<string>(() => {
   flex-shrink: 0;
 }
 
+/*
+ * Inline-size containment means the box's content no longer gives it a
+ * width, so a card sized to its content (a non-growing flex item, an
+ * inline-block, a `col-auto`) would take only its title's width and crush
+ * the value. The intrinsic fallback, 8rem (128px), holds a 7-figure amount
+ * at the 1.125rem floor: "£1,234,567.89" is 6.64em, 119.6px at 18px.
+ */
+.dx-stat-card__value-box {
+  container-type: inline-size;
+  contain-intrinsic-inline-size: 8rem;
+}
+
+/*
+ * The size is the fit's (`--dx-stat-card-fit-size`, set by the script on a
+ * numeric value: 1.75rem unless that overflows the box, then just small
+ * enough, down to 1.125rem). Before the fit has run (server markup, first
+ * paint of hydrated markup, no script) a numeric value uses the baseline
+ * below and any other value 1.75rem; text wraps, so it is never shrunk.
+ * Tabular figures (#215) keep each digit on the same advance: the digits
+ * come from the theme's figures face (`--dx-font-family-figures`, as
+ * `.dx-tabular`), the rest of the value from the body face.
+ */
 .dx-stat-card__value {
-  font-size: 1.75rem;
+  font-size: var(--dx-stat-card-fit-size, 1.75rem);
+  font-family: var(--dx-font-family-figures), var(--bs-body-font-family);
+  font-variant-numeric: tabular-nums;
   font-weight: 700;
   line-height: 1.1;
   color: var(--bs-emphasis-color, var(--bs-body-color));
 }
 
+/*
+ * A numeric value (a number, or a string with no letters) never breaks:
+ * `normal` undoes the card's `word-wrap: break-word`, which split a number
+ * mid-figure when it overflowed. Any other string keeps that last-resort
+ * break, so a long URL wraps inside the card instead of running out of it.
+ */
+.dx-stat-card__value--numeric {
+  overflow-wrap: normal;
+}
+
+/*
+ * The numeric baseline before the fit runs, which never overflows for up
+ * to 7 figures: 1.75rem from a 175px box up, then a line down to the
+ * 1.125rem floor at 8rem (128px). (A plain `16cqi` also reaches 1.75rem at
+ * 175px but cannot hold a 6.64em value under 175px.) The slope is 10px over
+ * 47px, written 0.2128 so it reaches 28px at 175px, never just under. It
+ * sits in `@supports` because the `var()` makes the declaration valid at
+ * parse time: without container units the cqi fallback would be invalid at
+ * computed time and the value would fall to the inherited body size, where
+ * this way such a browser keeps the flat 1.75rem above.
+ */
+@supports (width: 1cqi) {
+  .dx-stat-card__value--numeric {
+    font-size: var(
+      --dx-stat-card-fit-size,
+      clamp(1.125rem, 1.125rem + (100cqi - 8rem) * 0.2128, 1.75rem)
+    );
+  }
+}
+
 .dx-stat-card__foot {
   display: flex;
   align-items: center;

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

@@ -47,7 +47,7 @@
                         v-else-if="isProviderMode || isClientSideMode || isInertiaMode"
                         ref="tableRef"
                         :key="activeMode + ':' + tableSlotSignature($slots)"
-                        :fields="fields"
+                        :fields="renderedFields"
                         :sort-by="effectiveSortBy"
                         :multisort="false"
                         :no-sortable-icon="true"
@@ -245,8 +245,10 @@
                          PaginationData; `handleActivePageChange` routes the page
                          event to the right per-mode handler. Previously three
                          byte-identical copies, one per mode. -->
+                    <!-- Not while the loader shows: the count would read "0 items"
+                         before the rows have arrived. -->
                     <DXTablePagination
-                        v-if="activePagination"
+                        v-if="activePagination && !(effectiveBusy && !isProviderMode)"
                         :pagination="activePagination"
                         :per-page="effectivePerPage"
                         :per-page-options="perPageOptions"
@@ -340,7 +342,8 @@ import DXTableEditorModal from "./DXTableEditorModal.vue";
 export type FilterType = 'text' | 'select' | 'select-native' | 'number' | 'date' | false;
 
 export interface FilterOption {
-    value: string;
+    /** Numbers and booleans are accepted and compared as their string form. */
+    value: string | number | boolean | null;
     text: string;
 }
 
@@ -449,6 +452,15 @@ export interface TableField {
      * A number is pixels; a string is used verbatim.
      */
     minWidth?: string | number;
+
+    /**
+     * Render this column's figures tabular (every digit the same width), so
+     * amounts line up down the column: adds the global `.dx-tabular` class to
+     * the column's body cells and its header cell. Composes with the field's
+     * own `tdClass`/`thClass` (string, array, object or `tdClass` function)
+     * rather than replacing them. Default `false`.
+     */
+    tabular?: boolean;
     [key: string]: any;
 }
 
@@ -1379,6 +1391,35 @@ const columnStyleFor = (field: TableField): Record<string, string> | undefined =
 // content-sized default byte-for-byte.
 const fieldsHaveWidths = computed(() => props.fields.some(hasDeclaredWidth));
 
+/*
+ * Tabular columns (#215). A `tabular: true` field gets `.dx-tabular` added
+ * to its `tdClass` and `thClass`, appended to the consumer's own value
+ * (wrapped in an array, or called through when `tdClass` is a function) so
+ * their classes survive. Fields without the flag pass through as the same
+ * objects, so a table using no tabular column renders exactly as before.
+ */
+const TABULAR_CLASS = 'dx-tabular';
+
+const withTabularClass = (consumerClass: unknown): unknown[] =>
+    consumerClass === undefined || consumerClass === null
+        ? [TABULAR_CLASS]
+        : [consumerClass, TABULAR_CLASS];
+
+const renderedFields = computed<TableField[]>(() =>
+    props.fields.map((field) => {
+        if (field.tabular !== true) return field;
+        const consumerTdClass = field.tdClass;
+        return {
+            ...field,
+            tdClass:
+                typeof consumerTdClass === 'function'
+                    ? (...args: unknown[]) => withTabularClass(consumerTdClass(...args))
+                    : withTabularClass(consumerTdClass),
+            thClass: withTabularClass(field.thClass),
+        };
+    }),
+);
+
 // Computed: Get effective filter options for a field
 // The key a column's filter is SENT under, which is not always the column's own
 // key: a display column can filter on a different server param via `filterKey`.
@@ -1579,9 +1620,21 @@ const getFieldFilterOptions = (field: TableField): FilterOption[] => {
         options.push({ value: filterNullValueFor(field), text: field.filterNullText });
     }
 
-    // If field has static filterOptions, use those
+    // If field has static filterOptions, use those. Their values are
+    // stringified: options built from records carry numbers (ids) and booleans
+    // (flags), but the filter map, the URL and the row match all speak strings,
+    // and DAutocomplete matches its model to an option by strict equality — so a
+    // raw `1` never re-selected the stored `'1'`, and picking it put a number in
+    // the map that the active-filter check could not `.trim()`.
     if (field.filterOptions && field.filterOptions.length > 0) {
-        return [...options, ...field.filterOptions];
+        return [
+            ...options,
+            ...field.filterOptions.map((option) =>
+                option.value === null || option.value === undefined
+                    ? option
+                    : { ...option, value: String(option.value) },
+            ),
+        ];
     }
 
     // Otherwise, check for server-provided values (keyed by the filter key)

package/resources/js/index.ts

@@ -62,9 +62,11 @@ export { default as DDropdownItem } from "./components/base/DDropdownItem.vue";
 export { default as DForm } from "./components/base/DForm.vue";
 export { default as DFormCheckbox } from "./components/base/DFormCheckbox.vue";
 export { default as DFormCheckboxGroup } from "./components/base/DFormCheckboxGroup.vue";
+export { default as DFormFile } from "./components/base/DFormFile.vue";
 export { default as DFormGroup } from "./components/base/DFormGroup.vue";
 export { default as DFormInput } from "./components/base/DFormInput.vue";
 export { default as DFormInvalidFeedback } from "./components/base/DFormInvalidFeedback.vue";
+export { default as DFormValidFeedback } from "./components/base/DFormValidFeedback.vue";
 export { default as DFormOtp } from "./components/base/DFormOtp.vue";
 export { default as DFormRadio } from "./components/base/DFormRadio.vue";
 export { default as DFormRadioGroup } from "./components/base/DFormRadioGroup.vue";
@@ -216,7 +218,14 @@ export type {
     NavigationItem,
     NavigationGroup,
     Navigation,
+    NavigationItemOf,
     NavbarSearchAlign,
     NavbarActionsOnMobile,
     SidebarVariant,
+    DashboardUser,
+    DashboardNavbarSlots,
+    DashboardSidebarSlots,
+    DashboardSlotExtras,
+    DashboardSlots,
+    PrefixedDashboardSlots,
 } from "./types/navigation";