@omnitend/dashboard-for-laravel 0.44.0 → 0.46.0

package/resources/css/theme.scss

@@ -53,8 +53,9 @@ $color-contrast-light: #fff; // Light text color (for dark backgrounds)
 // Two bundled typefaces (SIL OFL 1.1; woff2 + licence in resources/fonts/):
 // MAVEN PRO for body text, and POPPINS as the DISPLAY face, published as
 // `--dx-font-family-display`. The theme applies the display face to h1–h4 and
-// nothing else; consumers use the token for things like product names. Both
-// are declared with `@font-face` below, so they render on every machine, not
+// nothing else; consumers use the token for things like product names. A
+// third, IBM PLEX SANS, supplies DIGITS ONLY for tabular figures (#215; see
+// "Tabular figures" below). All are declared with `@font-face` below, so they render on every machine, not
 // only where the font happens to be installed (the theme used to name Poppins
 // and ship no face for it, so most visitors got the generic sans-serif).
 $font-family-sans-serif: "Maven Pro", system-ui, -apple-system, "Segoe UI", Roboto,
@@ -62,6 +63,12 @@ $font-family-sans-serif: "Maven Pro", system-ui, -apple-system, "Segoe UI", Robo
 $dx-font-family-display: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto,
   "Helvetica Neue", Arial, sans-serif;
 $headings-font-family: var(--dx-font-family-display);
+// The face(s) tabular figures are set in, published as
+// `--dx-font-family-figures`. Only the figures face goes here: the theme
+// appends the surrounding face as the fallback (the body face, or the display
+// face in h1–h4), which is where `£`, `,`, `.` and letters come from. See
+// "Tabular figures" below.
+$dx-font-family-figures: "DX Figures" !default;
 $font-size-base: 1rem; // 16px — the default tier. Legacy omnitend rendered body
 // and table text at 16px; the earlier 0.875rem (14px) shrank every ported page's
 // text ~12% while rem-fixed chrome stayed put, so controls read oversized and
@@ -128,7 +135,11 @@ $input-padding-y-lg: $btn-padding-y-lg;
 $input-border-radius: $border-radius;
 $input-border-color: #d1d5db; // Gray-300
 $input-focus-border-color: $primary;
-$input-focus-box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
+// The focus halo is the brand navy, faint, outside the navy focus border. (It
+// was a leftover indigo from before the navy brand.) Selects take the same
+// ring; Bootstrap gives them their own 0.25rem one at 25%.
+$input-focus-box-shadow: 0 0 0 3px rgba($primary, 0.1);
+$form-select-focus-box-shadow: $input-focus-box-shadow;
 
 // Check/radio inputs default their border to `$border-color` (Gray-200), not
 // `$input-border-color` — so a bare checkbox looks faint beside the (darker,
@@ -441,6 +452,29 @@ $utilities-border-subtle: map.merge(
   ("pending-subtle": var(--bs-pending-border-subtle))
 );
 
+// An invalid control's focus ring is the crimson form-error colour, like its
+// border. Bootstrap builds it from `--bs-danger-rgb`, which is the magenta
+// badge hue here. Its geometry and opacity stay Bootstrap's. The
+// `.invalid-tooltip` background likewise (Bootstrap's is `var(--bs-danger)`):
+// white on #c8102e is 5.9:1. A solid Sass colour, not
+// `--bs-form-invalid-color`, which is a light pink in dark mode where the
+// white text would fail. (The `.form-range` thumb's red is bootstrap-vue-next's
+// own and is left alone.) The map only exists once Bootstrap's variables are
+// read, hence here.
+$form-validation-states: map.merge(
+  $form-validation-states,
+  (
+    "invalid": map.merge(
+      map.get($form-validation-states, "invalid"),
+      (
+        "focus-box-shadow": 0 0 $input-btn-focus-blur $input-focus-width
+          rgba($dx-form-error, $input-btn-focus-color-opacity),
+        "tooltip-bg-color": $dx-form-error,
+      )
+    ),
+  )
+);
+
 @import "bootstrap/scss/bootstrap";
 
 // ----------------------------------------------------------------------------
@@ -506,8 +540,42 @@ $dx-bundled-fonts: (
   }
 }
 
+// DX Figures: IBM Plex Sans's DIGITS, for tabular figures (#215). Maven Pro
+// and Poppins have no `tnum` feature, so `tabular-nums` did nothing in them;
+// Plex Sans's figures are tabular by default. `unicode-range` limits each face
+// to U+0030–0039, so only the digits come from Plex and everything else in a
+// tabular run falls through to the next family in the stack. `size-adjust`
+// matches Plex's figure height (0.710em) to Maven Pro's (0.673em), so a digit
+// sits beside Maven Pro text at the same size. 400 for body text and inputs,
+// 500 for table headers and `.fw-medium`, 600 for `.fw-semibold` (without it
+// font matching takes the 700 face for a 600 request), 700 for DXStatCard's
+// value and `.fw-bold`. The files are IBM's own Latin1 split woff2s, byte-identical to
+// the upstream package (resources/fonts/ibm-plex-sans/SOURCE.txt): "Plex" is a
+// Reserved Font Name, so they must never be subset or re-encoded. Extracted to
+// `dist/assets/` like the faces above, and fetched only where a tabular digit
+// renders.
+$dx-figures-fonts: (
+  (400, "ibm-plex-sans/IBMPlexSans-Regular-Latin1"),
+  (500, "ibm-plex-sans/IBMPlexSans-Medium-Latin1"),
+  (600, "ibm-plex-sans/IBMPlexSans-SemiBold-Latin1"),
+  (700, "ibm-plex-sans/IBMPlexSans-Bold-Latin1"),
+);
+
+@each $weight, $file in $dx-figures-fonts {
+  @font-face {
+    font-family: "DX Figures";
+    font-style: normal;
+    font-weight: $weight;
+    font-display: swap;
+    src: url("../fonts/#{$file}.woff2") format("woff2");
+    unicode-range: U+0030-0039;
+    size-adjust: 94.8%;
+  }
+}
+
 :root {
   --dx-font-family-display: #{$dx-font-family-display};
+  --dx-font-family-figures: #{$dx-font-family-figures};
 }
 
 // Bootstrap gives `$headings-font-family` to h1–h6; the display face is for
@@ -733,6 +801,147 @@ $dx-display-only-row: '.dx-form--horizontal .row:has(> .col-form-label):not(:has
   flex-wrap: nowrap;
 }
 
+// DFormFile: bvn's BFormFile draws its own control (`.b-form-file-control`, a
+// div around a Browse button and the file-name text), not a `.form-control`,
+// so none of the theme's input variables reach it. Give it the input's border
+// colour, padding (so its height) and focus ring, and the theme's crimson invalid
+// state (bvn hardcodes Bootstrap's red icon, and the navy focus border took
+// over an invalid control). The state rings come from Bootstrap's own
+// `$form-validation-states`, so they stay identical to `.form-control`'s. Global:
+// the control is inside a bvn root (see CLAUDE.md, scope-id trap).
+.b-form-file-control {
+  border-color: var(--d-input-border-color);
+
+  .b-form-file-text,
+  .b-form-file-button {
+    padding: $input-padding-y $input-padding-x;
+  }
+
+  &.form-control-sm .b-form-file-text,
+  &.form-control-sm .b-form-file-button {
+    padding: $input-padding-y-sm $input-padding-x-sm;
+  }
+
+  &.form-control-lg .b-form-file-text,
+  &.form-control-lg .b-form-file-button {
+    padding: $input-padding-y-lg $input-padding-x-lg;
+  }
+
+  .b-form-file-button {
+    border-right-color: var(--d-input-border-color);
+  }
+
+  &:focus-within:not([aria-disabled="true"]) {
+    border-color: $input-focus-border-color;
+    box-shadow: $input-focus-box-shadow;
+  }
+
+  &.is-invalid {
+    border-color: var(--bs-form-invalid-border-color);
+    background-image: escape-svg($form-feedback-icon-invalid);
+
+    &:focus-within:not([aria-disabled="true"]) {
+      border-color: var(--bs-form-invalid-border-color);
+      box-shadow: map-get(map-get($form-validation-states, "invalid"), "focus-box-shadow");
+    }
+  }
+
+  &.is-valid {
+    border-color: var(--bs-form-valid-border-color);
+    background-image: escape-svg($form-feedback-icon-valid);
+
+    &:focus-within:not([aria-disabled="true"]) {
+      border-color: var(--bs-form-valid-border-color);
+      box-shadow: map-get(map-get($form-validation-states, "valid"), "focus-box-shadow");
+    }
+  }
+}
+
+// A disabled fieldset (any disabled DFormGroup: it always renders one) disables
+// the button and the native input but not bvn's `disabled` prop, so give the
+// control the same look as `disabled` (bvn's `[aria-disabled=true]` rule).
+fieldset:disabled .b-form-file-control {
+  background-color: var(--bs-secondary-bg);
+  opacity: 0.65;
+  cursor: not-allowed;
+
+  .b-form-file-text,
+  .b-form-file-button {
+    pointer-events: none;
+  }
+}
+
+// The state class sits on `.b-form-file-control` (or the plain input), deep
+// inside `.b-form-file-root`, where Bootstrap's `.is-invalid ~ .invalid-feedback`
+// cannot see it; a sibling DFormInvalidFeedback/DFormValidFeedback stayed hidden.
+// `:has()` covers the custom control and `plain` without touching attrs.
+.b-form-file-root:has(> .b-form-file-wrapper > .b-form-file-control.is-invalid, > input.is-invalid) {
+  ~ .invalid-feedback,
+  ~ .invalid-tooltip {
+    display: block;
+  }
+}
+
+.b-form-file-root:has(> .b-form-file-wrapper > .b-form-file-control.is-valid, > input.is-valid) {
+  ~ .valid-feedback,
+  ~ .valid-tooltip {
+    display: block;
+  }
+}
+
+// In a DInputGroup Bootstrap squares the corners of the radius-less root, not
+// the control inside it, so the control kept a rounded edge against the addon.
+.input-group > .b-form-file-root {
+  position: relative;
+
+  &:focus-within {
+    z-index: 5;
+  }
+
+  &:not(:first-child) {
+    .b-form-file-control,
+    .b-form-file-button {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+  }
+}
+
+.input-group:not(.has-validation) > .b-form-file-root:not(:last-child),
+.input-group.has-validation > .b-form-file-root:nth-last-child(n + 3) {
+  .b-form-file-control {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+}
+
+// Drag state. bvn colours the overlay text, its dashed border and the control's
+// border with `--bs-primary` (the brand navy), which is about 1.07:1 on the
+// dark-mode overlay, so the accent is a token that becomes the emphasis colour
+// in dark mode. The overlay's white is hardcoded in bvn; follow the page
+// background.
+:root,
+[data-bs-theme="light"] {
+  --dx-form-file-drag-color: var(--bs-primary);
+}
+
+[data-bs-theme="dark"] {
+  --dx-form-file-drag-color: var(--bs-emphasis-color);
+}
+
+.b-form-file-dragging .b-form-file-control {
+  border-color: var(--dx-form-file-drag-color);
+}
+
+.b-form-file-drag-overlay {
+  background-color: rgba(var(--bs-body-bg-rgb), 0.95);
+  border-color: var(--dx-form-file-drag-color);
+}
+
+.b-form-file-drag-text {
+  color: var(--dx-form-file-drag-color);
+}
+
 // DXNumberStepper: `[ − ][ 12 ][ + ]`. The buttons are DButton icon-only
 // squares, sized by the input group. The number is centred between them, and
 // the browser's spin arrows are hidden (they duplicate the buttons and push the
@@ -1388,6 +1597,53 @@ aside.dashboard-sidebar--light {
 // wrapper's DIRECT child table is affected, so a table nested in a cell keeps
 // its own layout.
 
+// ----------------------------------------------------------------------------
+// Tabular figures (#215)
+// ----------------------------------------------------------------------------
+//
+// Every digit on the same advance, so amounts in a column (or a total that
+// updates in place) line up and do not jitter. Global, so consumer markup and
+// slot content can use it; DXTable's `tabular: true` field option adds it to
+// a column's cells, and DXStatCard's value and DXCurrencyInput's amount use
+// tabular figures by default.
+//
+// Maven Pro and Poppins have no `tnum` feature, so the digits come from the
+// `--dx-font-family-figures` token (DX Figures, IBM Plex Sans digits, above),
+// with the surrounding face as the fallback for everything else. `tabular-nums`
+// stays, so a consumer who points the token at a face with a `tnum` feature
+// (Inter, IBM Plex Mono) still gets tabular figures from it. Setting the token
+// to `initial` turns the face off: the declaration becomes invalid and the
+// element inherits its parent's family.
+//
+// Heading trap: h1–h4 are in the display face, and `.dx-tabular` outranks
+// `h1`, so in or on a heading the fallback must be the display face too, or
+// the heading's letters would turn into Maven Pro. The second rule does that.
+// Elsewhere the fallback is the body face: CSS cannot say "the inherited
+// face" inside a font list, so a `.dx-tabular` inside some other display-face
+// element (the sidebar) gets body-face letters. The same trap in or on
+// `code`, `kbd`, `samp` and `pre`: their fallback is the monospace face, so a
+// code sample keeps monospace letters (the third rule, which comes last so
+// code inside a heading stays monospace). Both context rules use `:where()`
+// so each has exactly `.dx-tabular`'s specificity and wins by source order.
+// Pinned by tabular-figures.test.ts and theme-fonts.test.ts.
+$dx-headings-1-4: "h1, h2, h3, h4, .h1, .h2, .h3, .h4";
+$dx-monospace-elements: "code, kbd, samp, pre";
+
+.dx-tabular {
+  font-family: var(--dx-font-family-figures), var(--bs-body-font-family);
+  font-variant-numeric: tabular-nums;
+}
+
+:where(#{$dx-headings-1-4}).dx-tabular,
+:where(#{$dx-headings-1-4}) .dx-tabular {
+  font-family: var(--dx-font-family-figures), var(--dx-font-family-display);
+}
+
+:where(#{$dx-monospace-elements}).dx-tabular,
+:where(#{$dx-monospace-elements}) .dx-tabular {
+  font-family: var(--dx-font-family-figures), var(--bs-font-monospace);
+}
+
 // ----------------------------------------------------------------------------
 // DXCurrencyInput — keep the amount usable in a narrow container
 // ----------------------------------------------------------------------------
@@ -1396,10 +1652,14 @@ aside.dashboard-sidebar--light {
 // ("10L Bag in Box") crushed the amount to ~32px. The amount keeps room for a
 // price, the group still does not wrap (a wrapped affix would land on its own line
 // with broken corners: the theme already makes every `.input-group` nowrap),
-// and the affix text wraps onto two lines instead.
+// and the affix text wraps onto two lines instead. The amount uses tabular
+// figures (#215), like every money value the library renders (the figures
+// face plus `tabular-nums`, as `.dx-tabular` above).
 .dx-currency-input {
   > .form-control {
     min-width: 5.5rem;
+    font-family: var(--dx-font-family-figures), var(--bs-body-font-family);
+    font-variant-numeric: tabular-nums;
   }
 
   > .input-group-text {
@@ -1992,3 +2252,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/fonts/ibm-plex-sans/OFL.txt

@@ -0,0 +1,93 @@
+Copyright © 2017 IBM Corp. with Reserved Font Name "Plex"
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+
+This license is copied below, and is also available with a FAQ at: http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

package/resources/fonts/ibm-plex-sans/SOURCE.txt

@@ -0,0 +1,18 @@
+IBM Plex Sans, digits only, for the theme's "DX Figures" face (#215).
+
+These are IBM's official Latin1 split woff2 files, copied unmodified from the
+npm package @ibm/plex-sans 1.1.0 (fonts/split/woff2/), the upstream of
+https://github.com/IBM/plex. The theme limits them to U+0030-0039 with
+unicode-range; the files themselves are whole.
+
+"Plex" is a Reserved Font Name under the SIL Open Font License (OFL.txt,
+the package's LICENSE.txt, unmodified). A modified copy could not keep the
+name, so these files must never be subset, re-encoded or otherwise changed.
+To update them, replace them with newer upstream files and record the new
+version and checksums here and in tests/bundle/theme-fonts.test.ts.
+
+sha256:
+b5ad7bd39f996144915f0ad9849a90183b27d8c28ad97ed98af5b1bebc51f6b1  IBMPlexSans-Regular-Latin1.woff2
+b5610af04d0d4b5a14a621d96d974b993e945a065db1a8861918f69ef9321934  IBMPlexSans-Medium-Latin1.woff2
+fff0ab3a88b0b4aa0b693e4f0201359a15183b08e3fa5696d1918d8f0ade8ad5  IBMPlexSans-SemiBold-Latin1.woff2
+914f1400f363e636b6f9cc7965aa807ff01e93586e1437617525cba0a62aa78d  IBMPlexSans-Bold-Latin1.woff2

package/resources/js/components/base/DFormFile.vue

@@ -0,0 +1,103 @@
+/**
+ * @component
+ * Type-safe wrapper around Bootstrap Vue Next BFormFile component.
+ * File picker with a browse button, file-name display and drag-and-drop
+ * zone. `v-model` is a `File` (single), `File[]` (`multiple`/`directory`)
+ * or `null`; setting it to `null` (or `[]`) also clears the native input.
+ * A disabled control (the prop, or a disabled fieldset) ignores dropped
+ * files. Slots: `label`, `placeholder`, `file-name` (`{ files, names }`)
+ * and `drop-placeholder`. Exposes BFormFile's `focus`, `blur` and `reset`.
+ */
+<script setup lang="ts">
+import { onBeforeUnmount, onMounted, ref, watch } from "vue";
+import { BFormFile } from "bootstrap-vue-next";
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const bFormFileRef = ref<InstanceType<typeof BFormFile> | null>(null);
+
+const rootElement = (): HTMLElement | null => {
+  const element = bFormFileRef.value?.$el as unknown;
+  return element instanceof HTMLElement ? element : null;
+};
+
+const nativeInput = (): HTMLInputElement | null =>
+  rootElement()?.querySelector<HTMLInputElement>('input[type="file"]') ?? null;
+
+// bvn's drop handler checks only `noDrop`, so a disabled control still took
+// a dropped file. The native input is :disabled both for the `disabled` prop
+// and inside a disabled fieldset (which the attrs cannot see), so capture
+// the drag events on BFormFile's root (useDropZone listens on the drop zone
+// inside it) and stop them while the input is :disabled. dragleave too, or
+// useDropZone's enter/leave counter drifts and the overlay sticks once the
+// control is enabled again. Divergence from bvn: DIVERGENCES.md.
+const blockedDragEvents = ["dragenter", "dragover", "dragleave", "drop"] as const;
+let listeningRoot: HTMLElement | null = null;
+
+const stopDragWhileDisabled = (event: Event) => {
+  if (nativeInput()?.matches(":disabled")) {
+    event.stopPropagation();
+    // Without this the browser opens a dropped file in the tab.
+    event.preventDefault();
+  }
+};
+
+onMounted(() => {
+  listeningRoot = rootElement();
+  blockedDragEvents.forEach((type) =>
+    listeningRoot?.addEventListener(type, stopDragWhileDisabled, { capture: true })
+  );
+});
+
+onBeforeUnmount(() => {
+  blockedDragEvents.forEach((type) =>
+    listeningRoot?.removeEventListener(type, stopDragWhileDisabled, { capture: true })
+  );
+  listeningRoot = null;
+});
+
+// bvn clears its own file list when the model becomes null or [], but in the
+// custom control it leaves the hidden native input holding the files (and
+// `plain` keeps them on []), so a plain form submit (FormData) still posted
+// them. Clear the native input directly: bvn's reset() would also set the
+// model to null, echoing an extra update:modelValue to the parent.
+// Read from BFormFile's own props: they are reactive and normalised
+// (`modelValue` whether the parent wrote `v-model` or `:model-value`).
+// Divergence from bvn: DIVERGENCES.md.
+const isCleared = (value: unknown) =>
+  value === null || value === undefined || (Array.isArray(value) && value.length === 0);
+
+watch(
+  () => bFormFileRef.value?.$props.modelValue,
+  (modelValue, previousModelValue) => {
+    if (isCleared(modelValue) && !isCleared(previousModelValue)) {
+      const input = nativeInput();
+      if (input) {
+        input.value = "";
+      }
+    }
+  }
+);
+
+// A template ref on the wrapper would otherwise stop at the wrapper, so
+// `reset()` (the only way to clear the native input's selection) is passed on.
+defineExpose({
+  focus: () => bFormFileRef.value?.focus(),
+  blur: () => bFormFileRef.value?.blur(),
+  reset: () => bFormFileRef.value?.reset(),
+  get element() {
+    return bFormFileRef.value?.element ?? null;
+  },
+});
+</script>
+
+<template>
+  <BFormFile ref="bFormFileRef" v-bind="$attrs">
+    <!-- Dynamically pass through all named slots with their props -->
+    <template v-for="(_, name) in $slots" :key="name" #[name]="slotProps">
+      <slot :name="name" v-bind="slotProps" />
+    </template>
+  </BFormFile>
+</template>