@omnitend/dashboard-for-laravel 0.42.1 → 0.43.0

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

@@ -40,104 +40,118 @@
         <!-- Tabs stay bare here: the modal body already provides the panel
              boundary, so DXForm's default card-panel-around-tabs (#159) would be
              redundant nested chrome inside the modal. -->
-        <DXForm
+        <!-- Not editable while the full record is loading (showUrl): the
+             response reseeds the form, so anything typed before it lands would
+             be silently replaced. `disabled` greys and blocks the native
+             controls (Bootstrap styles :disabled); `inert` also blocks focus,
+             clicks and keystrokes for custom slot controls that are not form
+             elements (a contenteditable, an editor widget). Save and Delete are
+             disabled for the same window in the footer. -->
+        <fieldset
             v-if="form"
-            :key="formInstanceKey"
-            :active-tab="activeTab"
-            :form="form"
-            :fields="fields"
-            :tabs="tabs"
-            :layout="layout"
-            :label-cols="labelCols"
-            :card="card"
-            :card-tabs="false"
-            :context="item ?? undefined"
-            :show-submit="false"
-            @update:active-tab="emit('update:activeTab', $event)"
-            @submit="emit('save')"
+            class="dx-edit-fieldset"
+            :disabled="loading"
+            :inert="loading"
+            :aria-busy="loading ? 'true' : undefined"
         >
-            <!-- Forward DXTable's edit-value(key) → DXForm value(key) -->
-            <template
-                v-for="key in editValueSlotKeys"
-                :key="`ev-${key}`"
-                #[`value(${key})`]="sp"
+            <DXForm
+                :key="formInstanceKey"
+                :active-tab="activeTab"
+                :form="form"
+                :fields="fields"
+                :tabs="tabs"
+                :layout="layout"
+                :label-cols="labelCols"
+                :card="card"
+                :card-tabs="false"
+                :context="item ?? undefined"
+                :show-submit="false"
+                @update:active-tab="emit('update:activeTab', $event)"
+                @submit="emit('save')"
             >
-                <!--
-                  @slot Custom input for field `<key>` in the edit/create modal, forwarded to DXForm. Name it `edit-value(<fieldKey>)`.
-                  @binding {object} item The row being edited (null in create mode).
-                  @binding {any} value The current field value.
-                  @binding {Function} update Call with a new value to update the field.
-                  @binding {object} field The field definition.
-                -->
-                <slot
-                    :name="`edit-value(${key})`"
-                    :item="item"
-                    :value="sp.value"
-                    :update="sp.update"
-                    :field="sp.field"
-                />
-            </template>
+                <!-- Forward DXTable's edit-value(key) → DXForm value(key) -->
+                <template
+                    v-for="key in editValueSlotKeys"
+                    :key="`ev-${key}`"
+                    #[`value(${key})`]="sp"
+                >
+                    <!--
+                      @slot Custom input for field `<key>` in the edit/create modal, forwarded to DXForm. Name it `edit-value(<fieldKey>)`.
+                      @binding {object} item The row being edited (null in create mode).
+                      @binding {any} value The current field value.
+                      @binding {Function} update Call with a new value to update the field.
+                      @binding {object} field The field definition.
+                    -->
+                    <slot
+                        :name="`edit-value(${key})`"
+                        :item="item"
+                        :value="sp.value"
+                        :update="sp.update"
+                        :field="sp.field"
+                    />
+                </template>
 
-            <!-- Forward edit-span(key) → span(key) -->
-            <template
-                v-for="key in editSpanSlotKeys"
-                :key="`es-${key}`"
-                #[`span(${key})`]="sp"
-            >
-                <!--
-                  @slot Full-width custom content for field `<key>` in the edit/create modal, forwarded to DXForm's span slot. Name it `edit-span(<fieldKey>)`.
-                  @binding {object} item The row being edited (null in create mode).
-                  @binding {any} value The current field value.
-                  @binding {Function} update Call with a new value to update the field.
-                  @binding {Function} close Call to close the edit modal.
-                -->
-                <slot
-                    :name="`edit-span(${key})`"
-                    :item="item"
-                    :value="sp.value"
-                    :update="sp.update"
-                    :close="close"
-                />
-            </template>
+                <!-- Forward edit-span(key) → span(key) -->
+                <template
+                    v-for="key in editSpanSlotKeys"
+                    :key="`es-${key}`"
+                    #[`span(${key})`]="sp"
+                >
+                    <!--
+                      @slot Full-width custom content for field `<key>` in the edit/create modal, forwarded to DXForm's span slot. Name it `edit-span(<fieldKey>)`.
+                      @binding {object} item The row being edited (null in create mode).
+                      @binding {any} value The current field value.
+                      @binding {Function} update Call with a new value to update the field.
+                      @binding {Function} close Call to close the edit modal.
+                    -->
+                    <slot
+                        :name="`edit-span(${key})`"
+                        :item="item"
+                        :value="sp.value"
+                        :update="sp.update"
+                        :close="close"
+                    />
+                </template>
 
-            <!-- Forward tab-content / tab-before / tab-after slots -->
-            <template
-                v-for="key in tabContentSlotKeys"
-                :key="`tc-${key}`"
-                #[`tab-content(${key})`]="sp"
-            >
-                <!--
-                  @slot Replaces the auto-rendered fields of edit-modal tab `<key>` with custom content. Name it `tab-content(<tabKey>)`.
-                  @binding {object} item The row being edited (null in create mode).
-                  @binding {object} tab The tab definition.
-                -->
-                <slot :name="`tab-content(${key})`" :item="item" :tab="sp.tab" />
-            </template>
-            <template
-                v-for="key in tabBeforeSlotKeys"
-                :key="`tb-${key}`"
-                #[`tab-before(${key})`]="sp"
-            >
-                <!--
-                  @slot Custom content rendered before the fields of edit-modal tab `<key>`. Name it `tab-before(<tabKey>)`.
-                  @binding {object} item The row being edited (null in create mode).
-                  @binding {object} tab The tab definition.
-                -->
-                <slot :name="`tab-before(${key})`" :item="item" :tab="sp.tab" />
-            </template>
-            <template
-                v-for="key in tabAfterSlotKeys"
-                :key="`taf-${key}`"
-                #[`tab-after(${key})`]="sp"
-            >
-                <!--
-                  @slot Custom content rendered after the fields of edit-modal tab `<key>`. Name it `tab-after(<tabKey>)`.
-                  @binding {object} item The row being edited (null in create mode).
-                  @binding {object} tab The tab definition.
-                -->
-                <slot :name="`tab-after(${key})`" :item="item" :tab="sp.tab" />
-            </template>
-        </DXForm>
+                <!-- Forward tab-content / tab-before / tab-after slots -->
+                <template
+                    v-for="key in tabContentSlotKeys"
+                    :key="`tc-${key}`"
+                    #[`tab-content(${key})`]="sp"
+                >
+                    <!--
+                      @slot Replaces the auto-rendered fields of edit-modal tab `<key>` with custom content. Name it `tab-content(<tabKey>)`.
+                      @binding {object} item The row being edited (null in create mode).
+                      @binding {object} tab The tab definition.
+                    -->
+                    <slot :name="`tab-content(${key})`" :item="item" :tab="sp.tab" />
+                </template>
+                <template
+                    v-for="key in tabBeforeSlotKeys"
+                    :key="`tb-${key}`"
+                    #[`tab-before(${key})`]="sp"
+                >
+                    <!--
+                      @slot Custom content rendered before the fields of edit-modal tab `<key>`. Name it `tab-before(<tabKey>)`.
+                      @binding {object} item The row being edited (null in create mode).
+                      @binding {object} tab The tab definition.
+                    -->
+                    <slot :name="`tab-before(${key})`" :item="item" :tab="sp.tab" />
+                </template>
+                <template
+                    v-for="key in tabAfterSlotKeys"
+                    :key="`taf-${key}`"
+                    #[`tab-after(${key})`]="sp"
+                >
+                    <!--
+                      @slot Custom content rendered after the fields of edit-modal tab `<key>`. Name it `tab-after(<tabKey>)`.
+                      @binding {object} item The row being edited (null in create mode).
+                      @binding {object} tab The tab definition.
+                    -->
+                    <slot :name="`tab-after(${key})`" :item="item" :tab="sp.tab" />
+                </template>
+            </DXForm>
+        </fieldset>
 
         <template #footer>
             <div class="d-flex justify-content-between w-100">

package/resources/js/composables/useContainerWidth.ts

@@ -270,10 +270,17 @@ export function useContainerWidth(
     // express without mutating during evaluation. With `hysteresis: 0` it is
     // exactly `width < threshold`. The watcher is `sync` so `isBelow` is never
     // observed one tick behind `width`.
+    //
+    // The band only applies to a state that came from a MEASUREMENT. Before
+    // the first one, `isBelow` is the `initialWidth` guess (true by default),
+    // and holding that guess through the band would leave a container that
+    // measures just above the threshold (say 590 against 576 + 24) on the
+    // narrow layout until it next grows: it never crossed anything.
     const initialThreshold = resolveThreshold();
     const isBelow = ref<boolean>(
         initialThreshold === undefined ? false : startWidth < initialThreshold,
     );
+    let isBelowCameFromMeasurement = false;
     watch(
         [width, () => resolveThreshold()],
         ([currentWidth, currentThreshold]) => {
@@ -281,9 +288,11 @@ export function useContainerWidth(
                 isBelow.value = false;
                 return;
             }
-            isBelow.value = isBelow.value
-                ? currentWidth < currentThreshold + hysteresis
-                : currentWidth < currentThreshold;
+            isBelow.value =
+                isBelow.value && isBelowCameFromMeasurement
+                    ? currentWidth < currentThreshold + hysteresis
+                    : currentWidth < currentThreshold;
+            if (hasMeasured.value) isBelowCameFromMeasurement = true;
         },
         { flush: "sync" },
     );

package/resources/js/index.ts

@@ -20,6 +20,7 @@ export { default as DXStatCard } from "./components/extended/DXStatCard.vue";
 // (#142) so chart.js / vue-chartjs stay genuinely optional peers — the main
 // entry no longer references them. See resources/js/charts.ts.
 export { default as DXRepeater } from "./components/extended/DXRepeater.vue";
+export { default as DXStackingTable } from "./components/extended/DXStackingTable.vue";
 /**
  * @deprecated Use `DXForm`. `DXBasicForm` is a thin wrapper around `DXForm`
  * (a flat form is just `DXForm` without a `tabs` prop) that logs a one-time
@@ -202,4 +203,5 @@ export type {
     Navigation,
     NavbarSearchAlign,
     NavbarActionsOnMobile,
+    SidebarVariant,
 } from "./types/navigation";

package/resources/js/types/navigation.ts

@@ -38,6 +38,15 @@ export type Navigation = NavigationGroup[];
  */
 export type NavbarSearchAlign = "start" | "center";
 
+/**
+ * Colour scheme of the dashboard sidebar: `"light"` (the default: a white pane,
+ * tinted group headers, a green active item, Poppins) or `"dark"` (the navy
+ * rail dfl shipped before). Every colour comes from a `--dx-sidebar-*` custom
+ * property, so either can be rebranded in CSS. Shared by DXDashboard (which
+ * forwards it as `sidebarVariant`) and DXDashboardSidebar (`variant`).
+ */
+export type SidebarVariant = "light" | "dark";
+
 /**
  * What the navbar actions slot does below the `md` breakpoint: `"wrap"` moves
  * it to its own full-width row (the bar grows), `"hide"` removes it entirely

package/resources/js/utils/pageScrollLock.ts

@@ -0,0 +1,27 @@
+/**
+ * The class on <html> that stops the page scrolling behind DXDashboard's open
+ * phone menu (styled in theme.scss, below `sm` only).
+ */
+export const PAGE_SCROLL_LOCK_CLASS = 'dx-dashboard-menu-open';
+
+// Every owner currently holding the lock. Several dashboards can share a page,
+// so one releasing (closing, unmounting, a <KeepAlive> deactivation) must not
+// unlock the page while another's menu is still open.
+const lockOwners = new Set<object>();
+
+const syncRootClass = (): void => {
+  if (typeof document === 'undefined') return;
+  document.documentElement.classList.toggle(PAGE_SCROLL_LOCK_CLASS, lockOwners.size > 0);
+};
+
+/** Hold the page scroll lock for `owner`. Idempotent. */
+export const acquirePageScrollLock = (owner: object): void => {
+  lockOwners.add(owner);
+  syncRootClass();
+};
+
+/** Release `owner`'s hold; the page unlocks once no owner holds it. Idempotent. */
+export const releasePageScrollLock = (owner: object): void => {
+  if (!lockOwners.delete(owner)) return;
+  syncRootClass();
+};