@omnitend/dashboard-for-laravel 0.35.0 → 0.36.0

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

@@ -15,17 +15,32 @@
   once it lives in a child component — the scope-id doesn't cross the boundary.
   Anchoring the rules on this component's own `.dx-table-pagination` root (a
   plain element it owns) gives the scope-id a deterministic host.
+
+  In a row too narrow for the full windowed pager, the number strip collapses to
+  a "current / last" status with Previous/Next either side (#162). The decision
+  is CONTAINER-driven, not viewport-driven — see `compactThreshold`.
 -->
 <template>
     <div class="dx-table-pagination mt-3">
-        <!-- Top row: Pagination and Per-page selector -->
-        <div class="dx-pager-row d-flex justify-content-between align-items-center gap-2 mb-2">
+        <!-- Top row: Pagination and Per-page selector.
+             `containerRef` measures THIS row (the space the pager actually
+             competes for with the per-page selector) rather than the window —
+             a table narrowed by a sidebar or a modal is cramped even on a wide
+             viewport, which no media query can see. See `useContainerWidth`. -->
+        <div
+            ref="containerRef"
+            class="dx-pager-row d-flex justify-content-between align-items-center gap-2 mb-2"
+        >
             <!-- Windowed pager (#155): «Previous / leading / … / window / … /
                  trailing / Next». Client-computed from current + last page, so it
-                 works in every DXTable mode. Only shown when >1 page. -->
+                 works in every DXTable mode. Only shown when >1 page.
+                 In a row too narrow to lay the whole thing out, the number
+                 window collapses to a "current / last" status (#162) — see
+                 `isCompact`. -->
             <nav
                 v-if="showPagination && pagination.total > pagination.per_page"
                 class="dx-pager d-flex flex-wrap align-items-center gap-1"
+                :class="{ 'dx-pager--compact': isCompact }"
                 aria-label="Pagination"
             >
                 <DButton
@@ -35,7 +50,28 @@
                     @click="goToPage(currentPage - 1)"
                 >&laquo; Previous</DButton>
 
-                <template v-for="(item, index) in pageItems" :key="item.type === 'page' ? `p${item.page}` : `e${index}`">
+                <!-- Compact: one status in place of the whole number window.
+                     With no page buttons there is no `aria-current` to carry
+                     "you are here", so the position becomes a live `status`
+                     region — it is announced when paging changes it, which the
+                     numbered pager achieved through focus moving to the newly
+                     active button. The terse "11 / 45" is for the eye only
+                     (a screen reader would say "eleven slash forty-five"); the
+                     announced text is the visually-hidden long form. -->
+                <span
+                    v-if="isCompact"
+                    class="dx-pager-status small"
+                    role="status"
+                    aria-live="polite"
+                >
+                    <span class="visually-hidden">Page {{ currentPage }} of {{ lastPage }}</span>
+                    <span aria-hidden="true">{{ currentPage }} / {{ lastPage }}</span>
+                </span>
+
+                <template
+                    v-for="(item, index) in visiblePageItems"
+                    :key="item.type === 'page' ? `p${item.page}` : `e${index}`"
+                >
                     <DButton
                         v-if="item.type === 'page'"
                         size="sm"
@@ -94,6 +130,7 @@
 import { computed } from "vue";
 import DButton from "../base/DButton.vue";
 import DFormSelect from "../base/DFormSelect.vue";
+import { useContainerWidth } from "../../composables/useContainerWidth";
 import type { PaginationData } from "./DXTable.vue";
 
 interface Props {
@@ -115,9 +152,31 @@ interface Props {
     pluralItemName: string;
     /** Whether a column filter is active — gates the "Filtered from N" note. */
     hasActiveFilters: boolean;
+
+    /**
+     * Upper bound (px) on the pager ROW width at which the number window may
+     * collapse to the compact "current / last" status (#162). At or above it
+     * the full windowed pager always renders, whatever the page count.
+     *
+     * Default **576** — Bootstrap's `sm` breakpoint, i.e. the width the rest of
+     * the design system already treats as phone-sized. Its job is to GUARANTEE
+     * that a desktop-width table is never quietly downgraded: a 45-page window
+     * that doesn't quite fit at 800px should wrap (today's behaviour), not lose
+     * its numbers.
+     *
+     * Below it, compact engages only when the full pager genuinely would not
+     * fit on one line (see `fullPagerWidth`) — so a three-page pager still
+     * shows `1 2 3` on a phone, where "2 / 3" would be strictly worse.
+     *
+     * Measured on the ROW, not the viewport, so a table squeezed by a sidebar
+     * or inside a modal collapses even though the window is wide.
+     */
+    compactThreshold?: number;
 }
 
-const props = defineProps<Props>();
+const props = withDefaults(defineProps<Props>(), {
+    compactThreshold: 576,
+});
 
 const emit = defineEmits<{
     /** The user picked a page. Payload is the new 1-based page number. */
@@ -182,6 +241,71 @@ const pageItems = computed<PageItem[]>(() => {
   return items;
 });
 
+// Compact pager (#162). Container-driven, not viewport-driven — see the
+// `compactThreshold` prop.
+//
+// Approximate intrinsic widths of the pager's parts, in rem, mirroring this
+// component's own CSS and button labels: a page key is `min-width: 2.5rem`, the
+// row is `gap-1` (0.25rem), the ellipsis is a glyph plus 0.15rem side padding,
+// and "« Previous" + "Next »" together come to about 10rem at `.btn-sm`.
+// Deliberately an ESTIMATE, not a measurement: being wrong by a few px only
+// shifts the collapse by one page key, which is cosmetic — whereas measuring
+// the rendered strip would mean measuring the very thing this decision
+// removes, i.e. a feedback loop.
+const PAGE_KEY_REM = 2.5;
+const ITEM_GAP_REM = 0.25;
+const ELLIPSIS_REM = 1;
+const PREV_NEXT_REM = 10;
+
+/** px per rem, so a consumer scaling the root font size is tracked. */
+function rootFontSizePx(): number {
+  // Only ever reached in a browser (see `isCompact`), but stay SSR-safe.
+  if (typeof document === "undefined") return 16;
+  const size = Number.parseFloat(
+    getComputedStyle(document.documentElement).fontSize,
+  );
+  return Number.isFinite(size) && size > 0 ? size : 16;
+}
+
+/** Width the row needs to lay the full windowed pager out on ONE line. */
+const fullPagerWidth = computed(() => {
+  const remPx = rootFontSizePx();
+  let widthRem = PREV_NEXT_REM;
+  for (const item of pageItems.value) {
+    widthRem +=
+      (item.type === "page" ? PAGE_KEY_REM : ELLIPSIS_REM) + ITEM_GAP_REM;
+  }
+  return widthRem * remPx;
+});
+
+const { containerRef, hasMeasured, isBelow } = useContainerWidth({
+  // Compact means "narrower than the breakpoint AND too narrow for the full
+  // pager", which is exactly `width < min(threshold, needed)` — expressing it
+  // as one threshold rather than two conditions keeps the hysteresis below
+  // applied to the WHOLE decision instead of just half of it. A getter, so
+  // both a reactive `compactThreshold` and a changing page count re-evaluate
+  // instead of latching the mount-time value.
+  threshold: () => Math.min(props.compactThreshold, fullPagerWidth.value),
+  // The compact row is SHORTER than the wrapped full pager, so an ancestor with
+  // `overflow:auto` can lose its vertical scrollbar when we collapse, widening
+  // this row by ~15-17px, back over the threshold, and it flips forever. A band
+  // wider than any scrollbar makes the crossing one-way.
+  hysteresis: 24,
+});
+
+/**
+ * Gated on `hasMeasured` so an UNMEASURED render (the first frame, and every
+ * SSR render, where there is no `ResizeObserver`) is byte-identical to the
+ * pre-#162 full pager. `initialWidth` defaults to 0, i.e. "assume narrowest",
+ * which would otherwise make every desktop render start compact and flip.
+ */
+const isCompact = computed(() => hasMeasured.value && isBelow.value);
+
+/** Empty in compact mode — the status replaces the whole number window. */
+const visiblePageItems = computed<PageItem[]>(() =>
+  isCompact.value ? [] : pageItems.value,
+);
+
 const canPrev = computed(() => currentPage.value > 1);
 const canNext = computed(() => currentPage.value < lastPage.value);
 
@@ -223,6 +347,23 @@ const goToPage = (page: number) => {
     min-width: auto;
 }
 
+/* Compact pager status (#162): "11 / 45" standing in for the number window.
+   A plain element this component owns, so it needs no `:deep()`. It is not a
+   button — deliberately, since there is nothing to click — so it is styled to
+   read as a label rather than a disabled key. */
+.dx-pager--compact .dx-pager-status {
+    padding: 0 0.35rem;
+    color: var(--bs-secondary-color);
+    white-space: nowrap;
+    user-select: none;
+}
+
+/* Nothing can wrap in compact mode — the row is three items wide by design, and
+   a wrap here would defeat the whole point of collapsing it. */
+.dx-pager--compact {
+    flex-wrap: nowrap;
+}
+
 .dx-pager-ellipsis {
     display: inline-flex;
     align-items: flex-end;

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

@@ -17,16 +17,16 @@
   block, table, pagination — become direct children of `.card`, which is already
   a `flex-direction: column` container, so they still stack in order:
 
-      .card (overflow: hidden)
+      .card
       ├─ .card-header          (padded by Bootstrap's card-cap padding)
-      ├─ .table-responsive     ← FLUSH
+      ├─ .table-responsive     ← FLUSH, rounded when it is at a card corner
       │   └─ table
       └─ .dx-table-pagination  (pads itself — see DXTablePagination.vue)
 
   Bootstrap 5 has no `.card > .table` rounding rules (that was BS4), so the
-  clipping is done with `overflow: hidden` on the card: the flush table's square
-  top corners then follow the card's radius whether or not a header is present.
-  bvn's popups position `fixed` by default, so they are not clipped by it.
+  flush table's square corners have to be rounded here. The rounding is applied
+  to the TABLE REGION, never to the card: clipping the whole card would cut off
+  any non-teleported positioned content a consumer puts in a slot (#166).
 -->
 <template>
   <DCard v-if="card" no-body class="dx-table-card">
@@ -82,21 +82,56 @@ withDefaults(defineProps<Props>(), {
 */
 
 /*
-  Clip the card to its radius so the flush table's square corners follow the
-  border. Kept in this global block with the rest of the card-mode layout: a
+  Round the flush table region so its square corners follow the card border.
+
+  This used to be `overflow: hidden` on the WHOLE card, which clipped every
+  non-teleported positioned descendant — including a consumer's own
+  `position: absolute` popover in a `#header` or `cell(<key>)` slot (#166).
+  The clip now sits on the table region itself, and only on the corners the
+  region actually occupies: `.card-header` and `.dx-table-pagination` round the
+  corners themselves when they are present, so the radius is applied via
+  `:first-child` / `:last-child` rather than unconditionally. Vue renders a
+  false `v-if` as a comment node, which `:first-child` ignores, so the error
+  alert and spinner branches don't disturb the match.
+
+  These rules stay in this global block with the rest of the card-mode layout: a
   scoped rule WOULD reach DCard's root (the renderer walks the component-root
   chain), but that forwarding is the exact thing CLAUDE.md records as unreliable
   across build pipelines, and a silently-unclipped card is invisible in review.
   The lower specificity also leaves consumers free to override it.
+*/
+.dx-table-card > .table-responsive:first-child,
+.dx-table-card > .table:first-child {
+  border-top-left-radius: var(--bs-card-inner-border-radius);
+  border-top-right-radius: var(--bs-card-inner-border-radius);
+}
+
+.dx-table-card > .table-responsive:last-child,
+.dx-table-card > .table:last-child {
+  border-bottom-left-radius: var(--bs-card-inner-border-radius);
+  border-bottom-right-radius: var(--bs-card-inner-border-radius);
+}
+
+/*
+  `.table-responsive` needs NO `overflow` of its own: Bootstrap already gives it
+  `overflow-x: auto`, which computes `overflow-y` to `auto` as well, so it is
+  already a clipping context and the radius above rounds that clip. Measured in
+  a real browser (see DXTable-CardFlush.test.ts): without the radius a hit-test
+  3px inside the card's corner lands on a `<th>`; with it, on the card.
+  Do NOT add `overflow: hidden` here — it would kill the horizontal scrolling
+  that makes a wide table usable, and the flush look would survive to hide it.
 
-  KNOWN LIMITATION (#166): this clips the WHOLE card, so a consumer's own
-  non-teleported `position: absolute` overlay in a slot is cut off at the card
-  edge. dfl's own components are fine — DDropdown teleports to <body>, the
-  filter menus are `fixed` — so the residual case is a hand-rolled popover.
-  The fix is to move the radius clipping onto the flush table region, which
-  `.table-responsive`'s `overflow-x: auto` complicates; see the issue.
+  A bare `<table>` (`:responsive="false"`) is a different story: it is not a
+  clipping context, and `border-radius` on it leaves the collapsed-border cell
+  backgrounds square (measured — the corner still hit-tests to a `<th>`). That
+  one needs an explicit clip, scoped to the flush table so it is the table
+  region and not the card that clips. Note this restores the pre-0.35 behaviour
+  where a `:responsive="false"` table too wide for its card overflows visibly
+  rather than being silently cut off — that mode opts out of a scroll container
+  by definition.
 */
-.dx-table-card {
+.dx-table-card > .table:first-child,
+.dx-table-card > .table:last-child {
   overflow: hidden;
 }