@antelopejs/dms 0.9.7 → 0.10.0

package/frontend-vue/layers/dms-ui/app/build/composables/containers/closingLayers.ts

@@ -0,0 +1,186 @@
+import { onBeforeUnmount, onMounted, ref, type Ref } from "vue";
+
+// Any reka layer still open: a dialog, a drawer, a modal menu.
+const OPEN_LAYER_SELECTOR = '[data-dismissable-layer][data-state="open"]';
+
+// What blocks the page while it is mounted: a layer and a backdrop.
+const LAYER_SELECTOR = "[data-dismissable-layer]";
+const BLOCKING_SELECTOR = `${LAYER_SELECTOR}, [data-slot="overlay"]`;
+
+// A drawer, a modal or a slideover still open: what a closing one covered.
+const OPEN_DIALOG_SELECTOR = [
+  '[role="dialog"][data-dismissable-layer][data-state="open"]',
+  '[role="alertdialog"][data-dismissable-layer][data-state="open"]',
+].join(", ");
+
+// A popover's content is a dialog layer too, but anchored to its trigger: it
+// covers nothing.
+const POPOVER_SELECTOR = "[data-reka-popper-content-wrapper]";
+
+/**
+ * Whether a drawer, a modal or a slideover is open on the page, whoever
+ * rendered it: the same dialogs the closing-layers watch tracks.
+ * @internal
+ */
+export function hasOpenDialog(root: Document): boolean {
+  return [...root.querySelectorAll(OPEN_DIALOG_SELECTOR)].some(
+    (dialog) => !dialog.closest(POPOVER_SELECTOR),
+  );
+}
+
+/**
+ * {@link hasOpenDialog}, kept up to date while the calling component is
+ * mounted: for what must step aside while a dialog covers the page (a
+ * floating prompt). False on the server and until mounted.
+ * @internal
+ */
+export function useOpenDialog(): Readonly<Ref<boolean>> {
+  const isOpen = ref(false);
+  let observer: MutationObserver | null = null;
+  const update = () => {
+    isOpen.value = hasOpenDialog(document);
+  };
+  onMounted(() => {
+    // A dialog mounts open: its insertion counts, not only its state.
+    observer = new MutationObserver(update);
+    observer.observe(document.body, {
+      subtree: true,
+      childList: true,
+      attributeFilter: ["data-state"],
+    });
+    update();
+  });
+  onBeforeUnmount(() => {
+    observer?.disconnect();
+    observer = null;
+  });
+  return isOpen;
+}
+
+// Reka's FocusScope, as it unmounts: cancelling it keeps the focus in place.
+const UNMOUNT_AUTOFOCUS_EVENT = "focusScope.autoFocusOnUnmount";
+
+/**
+ * Set on the dialog a closing one uncovered, until that one has unmounted:
+ * the dialog's theme gives it its pointer events back (`UNCOVERED_PANEL_CLASS`).
+ * @internal
+ */
+export const UNCOVERED_ATTRIBUTE = "data-dms-uncovered";
+
+function isClosing(mutation: MutationRecord): boolean {
+  const target = mutation.target as Element;
+  return (
+    target.getAttribute("data-state") === "closed" &&
+    target.matches(BLOCKING_SELECTOR)
+  );
+}
+
+/**
+ * Lets the page be used as soon as any dialog, drawer, slideover or modal
+ * menu starts closing, whoever rendered it, while it still animates out.
+ *
+ * - Reka sets the body's `pointer-events: none` from the content's
+ *   dismissable layer and from the backdrop's scroll lock, and clears it only
+ *   once they have animated out and unmounted (about 140 to 230ms): a click
+ *   on the page in the meantime was lost. From reka 2.11 the lock is an owner
+ *   of the body's pointer events, which the content letting go of them does
+ *   not clear. The body is released after the closing render, once reka has
+ *   let go of it, unless another layer is still open and blocks the page.
+ * - A dialog closing over one that stays open (a confirm over a drawer)
+ *   leaves the page blocked, but not the dialog below: reka disables every
+ *   layer under the highest one that blocks the page, and the closing one
+ *   stays the highest until it unmounts, so a click on the drawer was lost.
+ *   The topmost dialog still open is marked uncovered until the closing one
+ *   has unmounted or another one opens above it.
+ * - A click that opens another drawer or modal in the meantime keeps it
+ *   open: the closing one gave the focus back to its trigger as it unmounted,
+ *   outside the new one, which closed at once. Its focus stays put when a
+ *   layer opened since it started closing; one closing over a layer that
+ *   stays open (a confirm over a drawer) still gives it back. Reka's event
+ *   does not bubble, so it is caught on its way down.
+ *
+ * Returns the function that stops watching.
+ * @internal
+ */
+export function watchClosingLayers(root: Document): () => void {
+  // Each closing layer and the layers that were open when it started.
+  const openBeforeClosing = new WeakMap<Element, Set<Element>>();
+  const openLayers = () => [...root.querySelectorAll(OPEN_LAYER_SELECTOR)];
+  const uncovering = watchUncovered(root);
+
+  const observer = new MutationObserver((mutations) => {
+    const closing = mutations
+      .filter(isClosing)
+      .map(({ target }) => target as Element);
+    if (closing.length === 0) return;
+    const open = openLayers();
+    for (const target of closing) {
+      openBeforeClosing.set(target, new Set(open));
+    }
+    uncovering.start(
+      closing.filter((target) => target.matches(LAYER_SELECTOR)),
+    );
+    if (open.length > 0) return;
+    if (root.body.style.pointerEvents === "none") {
+      root.body.style.pointerEvents = "";
+    }
+  });
+  observer.observe(root.body, {
+    subtree: true,
+    attributeFilter: ["data-state"],
+  });
+
+  const onUnmountAutoFocus = (event: Event): void => {
+    const before = openBeforeClosing.get(event.target as Element);
+    if (!before) return;
+    if (openLayers().some((layer) => !before.has(layer))) {
+      event.preventDefault();
+    }
+  };
+  root.addEventListener(UNMOUNT_AUTOFOCUS_EVENT, onUnmountAutoFocus, true);
+
+  return () => {
+    observer.disconnect();
+    uncovering.stop();
+    root.removeEventListener(UNMOUNT_AUTOFOCUS_EVENT, onUnmountAutoFocus, true);
+  };
+}
+
+interface Uncovering {
+  /** Marks the topmost dialog still open while `closing` animates out. */
+  start(closing: Element[]): void;
+  stop(): void;
+}
+
+function watchUncovered(root: Document): Uncovering {
+  let uncovered: Element | null = null;
+  let closingLayers: Element[] = [];
+  const topmostOpen = () =>
+    [...root.querySelectorAll(OPEN_DIALOG_SELECTOR)].at(-1) ?? null;
+
+  function stop(): void {
+    watcher.disconnect();
+    uncovered?.removeAttribute(UNCOVERED_ATTRIBUTE);
+    uncovered = null;
+    closingLayers = [];
+  }
+
+  // Only while a dialog closes over another: a short-lived watch of the DOM,
+  // until the closing one is gone or another one opened above.
+  const watcher = new MutationObserver(() => {
+    const isStillCovering = closingLayers.some((layer) => layer.isConnected);
+    if (!isStillCovering || topmostOpen() !== uncovered) stop();
+  });
+
+  function start(closing: Element[]): void {
+    stop();
+    const top = closing.length > 0 ? topmostOpen() : null;
+    if (!top) return;
+    uncovered = top;
+    closingLayers = closing;
+    top.setAttribute(UNCOVERED_ATTRIBUTE, "");
+    watcher.observe(root.body, { childList: true, subtree: true });
+  }
+
+  return { start, stop };
+}

package/frontend-vue/layers/dms-ui/app/build/composables/containers/context.ts

@@ -14,3 +14,17 @@ export interface DmsContainerContext {
 /** Provided by DynamicDrawer and DynamicModal to their body. */
 export const DMS_CONTAINER_KEY: InjectionKey<DmsContainerContext> =
   Symbol("dms:container");
+
+/**
+ * Marks the options of a drawer the DMS opens itself (a row action's, a
+ * relation's, a table form's): it keeps the app's provides only, as before
+ * `useDrawer()` handed a module's drawer its caller's. A table or a form
+ * around the trigger must not reach the drawer's own form.
+ * @internal
+ */
+export const DMS_OWN_DRAWER = Symbol("dms:own-drawer");
+
+/** Options of a drawer the DMS opens itself (see {@link DMS_OWN_DRAWER}). @internal */
+export function dmsOwnDrawer<T extends object>(options: T): T {
+  return Object.assign(options, { [DMS_OWN_DRAWER]: true });
+}

package/frontend-vue/layers/dms-ui/app/build/composables/containers/drawerSize.ts

@@ -0,0 +1,229 @@
+import { ref, type Component, type Ref } from "vue";
+import type { DrawerDirection } from "../../../composables/containers/types";
+import type { ModalSize } from "../../../types/modal";
+import type { ResizeBounds, ResizeStorage } from "./useResizableSize";
+
+/** @internal */
+export const DRAWER_SIZE_COOKIE = "dms-drawer-sizes";
+const DRAWER_SIZE_COOKIE_MAX_AGE = 60 * 60 * 24 * 365;
+// A cookie travels with every request: the oldest sizes give way past this.
+const MAX_STORED_SIZES = 40;
+
+/** Width of a `left` / `right` drawer without `size`, from `lg`. @internal */
+export const DEFAULT_SIDE_DRAWER_WIDTH = 600;
+/** @internal */
+export const MIN_SIDE_DRAWER_WIDTH = 360;
+/** @internal */
+export const MIN_EDGE_DRAWER_HEIGHT = 240;
+// Share of the window a resized drawer may take, and the room it leaves (the
+// drawer's own `max-w-[calc(100%-2rem)]`).
+const MAX_DRAWER_SHARE = 0.9;
+const DRAWER_WINDOW_MARGIN = 32;
+
+/**
+ * A modal's width at each size (see `DynamicModal`): the width a sized side
+ * drawer opens at. `full` takes the whole window.
+ *
+ * @internal
+ */
+export const DRAWER_SIZE_WIDTHS: Record<Exclude<ModalSize, "full">, number> = {
+  sm: 384,
+  md: 448,
+  lg: 512,
+  xl: 576,
+  "2xl": 672,
+  "3xl": 768,
+  "4xl": 896,
+  "5xl": 1024,
+};
+
+/**
+ * The sizes the user gave drawers on this device, per drawer key: widths of
+ * `left` / `right` drawers, heights of `top` / `bottom` ones.
+ *
+ * @internal
+ */
+export interface DrawerSizePreferences {
+  widths: Record<string, number>;
+  heights: Record<string, number>;
+}
+
+type DrawerSizeAxis = keyof DrawerSizePreferences;
+
+/** @internal */
+export interface Viewport {
+  width: number;
+  height: number;
+}
+
+const SIDE_DIRECTIONS: ReadonlySet<DrawerDirection> = new Set([
+  "left",
+  "right",
+]);
+
+/** @internal */
+export function isSideDrawer(direction: DrawerDirection): boolean {
+  return SIDE_DIRECTIONS.has(direction);
+}
+
+function emptyPreferences(): DrawerSizePreferences {
+  return { widths: {}, heights: {} };
+}
+
+function readSizes(value: unknown): Record<string, number> {
+  if (typeof value !== "object" || value === null) return {};
+  return Object.fromEntries(
+    Object.entries(value).filter(
+      ([, size]) => typeof size === "number" && Number.isFinite(size),
+    ),
+  ) as Record<string, number>;
+}
+
+/**
+ * Reads the cookie back defensively: an older or hand-edited value must not
+ * break a drawer.
+ *
+ * @internal
+ */
+export function readDrawerSizePreferences(
+  value: unknown,
+): DrawerSizePreferences {
+  if (typeof value !== "object" || value === null) return emptyPreferences();
+  const record = value as Record<string, unknown>;
+  return {
+    widths: readSizes(record.widths),
+    heights: readSizes(record.heights),
+  };
+}
+
+/** @internal */
+export function useDrawerSizePreferences(): Ref<DrawerSizePreferences> {
+  return useDmsCookie<DrawerSizePreferences>(DRAWER_SIZE_COOKIE, {
+    default: emptyPreferences,
+    maxAge: DRAWER_SIZE_COOKIE_MAX_AGE,
+  });
+}
+
+// The key written last moves to the end, so the oldest ones are dropped
+// first.
+function withSize(
+  sizes: Record<string, number>,
+  key: string,
+  size: number | undefined,
+): Record<string, number> {
+  const { [key]: _previous, ...others } = sizes;
+  const kept = Object.entries(others).slice(
+    -(MAX_STORED_SIZES - (size === undefined ? 0 : 1)),
+  );
+  return Object.fromEntries(size === undefined ? kept : [...kept, [key, size]]);
+}
+
+/**
+ * Where a drawer keeps the size the user gives it: under `key`, on the axis
+ * its direction resizes. A drawer without a key is resizable, but forgets.
+ *
+ * @internal
+ */
+export function drawerSizeStorage(
+  preferences: Ref<DrawerSizePreferences>,
+  key: string | undefined,
+  direction: DrawerDirection,
+): ResizeStorage {
+  const axis: DrawerSizeAxis = isSideDrawer(direction) ? "widths" : "heights";
+  const unsaved = ref<number | undefined>();
+  if (!key) {
+    return {
+      read: () => unsaved.value,
+      write: (size) => {
+        unsaved.value = size;
+      },
+    };
+  }
+  return {
+    read: () => readDrawerSizePreferences(preferences.value)[axis][key],
+    write: (size) => {
+      const current = readDrawerSizePreferences(preferences.value);
+      preferences.value = {
+        ...current,
+        [axis]: withSize(current[axis], key, size),
+      };
+    },
+  };
+}
+
+const COMPONENT_SIZE_KEY_PREFIX = "component:";
+// The name `defineAsyncComponent` gives every wrapper: it names no drawer.
+const ASYNC_WRAPPER_NAME = "AsyncComponentWrapper";
+
+interface NamedComponent {
+  name?: string;
+  /** The file name a `<script setup>` component is compiled with. */
+  __name?: string;
+}
+
+/**
+ * The key a drawer opened without `sizeKey` or `containerId` keeps its size
+ * under: its component's name, the same at every opening. Undefined for an
+ * anonymous component, which forgets.
+ *
+ * @internal
+ */
+export function componentSizeKey(component: Component): string | undefined {
+  const { name, __name } = component as NamedComponent;
+  const componentName = [name, __name].find(
+    (candidate) => candidate && candidate !== ASYNC_WRAPPER_NAME,
+  );
+  return componentName
+    ? `${COMPONENT_SIZE_KEY_PREFIX}${componentName}`
+    : undefined;
+}
+
+function sideDrawerWidthBounds(
+  viewport: Viewport,
+  size?: ModalSize,
+): ResizeBounds {
+  if (size === "full") {
+    return {
+      defaultSize: viewport.width,
+      minSize: Math.min(MIN_SIDE_DRAWER_WIDTH, viewport.width),
+      maxSize: viewport.width,
+    };
+  }
+  const maxSize = Math.max(
+    0,
+    Math.min(
+      viewport.width * MAX_DRAWER_SHARE,
+      viewport.width - DRAWER_WINDOW_MARGIN,
+    ),
+  );
+  const minSize = Math.min(MIN_SIDE_DRAWER_WIDTH, maxSize);
+  const preferred = size ? DRAWER_SIZE_WIDTHS[size] : DEFAULT_SIDE_DRAWER_WIDTH;
+  return {
+    defaultSize: Math.min(maxSize, Math.max(minSize, preferred)),
+    minSize,
+    maxSize,
+  };
+}
+
+// A top or bottom drawer keeps its natural height until the user resizes it.
+function edgeDrawerHeightBounds(viewport: Viewport): ResizeBounds {
+  const maxSize = Math.round(viewport.height * MAX_DRAWER_SHARE);
+  return { minSize: Math.min(MIN_EDGE_DRAWER_HEIGHT, maxSize), maxSize };
+}
+
+/**
+ * The sizes a drawer may take in this window: a side drawer's width (600px
+ * by default, or a modal's width at its `size`), an edge drawer's height
+ * (its natural one by default). Both stop at 90% of the window.
+ *
+ * @internal
+ */
+export function resolveDrawerSizeBounds(
+  direction: DrawerDirection,
+  viewport: Viewport,
+  size?: ModalSize,
+): ResizeBounds {
+  return isSideDrawer(direction)
+    ? sideDrawerWidthBounds(viewport, size)
+    : edgeDrawerHeightBounds(viewport);
+}

package/frontend-vue/layers/dms-ui/app/build/composables/containers/useResizableSize.ts

@@ -0,0 +1,175 @@
+import { computed, ref, toValue, type MaybeRefOrGetter, type Ref } from "vue";
+
+/** @internal */
+export const RESIZE_KEYBOARD_STEP_PX = 16;
+
+/**
+ * The edge of the window a resizable sheet is attached to: its handle sits on
+ * the opposite, inner edge. `left` / `right` sheets resize their width,
+ * `top` / `bottom` ones their height.
+ *
+ * @internal
+ */
+export type ResizeSide = "left" | "right" | "top" | "bottom";
+
+/**
+ * The sizes a sheet may take, in px. Without `defaultSize` the sheet keeps
+ * its natural size until the user resizes it, and a reset goes back to it.
+ *
+ * @internal
+ */
+export interface ResizeBounds {
+  defaultSize?: number;
+  minSize: number;
+  maxSize: number;
+}
+
+/**
+ * Where the size the user gives a sheet is kept: `write(undefined)` forgets
+ * it.
+ *
+ * @internal
+ */
+export interface ResizeStorage {
+  read: () => number | undefined;
+  write: (size: number | undefined) => void;
+}
+
+/** @internal */
+export interface ResizableSizeOptions {
+  side: ResizeSide;
+  bounds: MaybeRefOrGetter<ResizeBounds>;
+  storage: ResizeStorage;
+  /**
+   * The size while the handle is dragged (`null` at rest), for a caller that
+   * shares it with the rest of the page (the dashboard frame follows a side
+   * panel's handle). A local ref otherwise.
+   */
+  liveSize?: Ref<number | null>;
+}
+
+/** @internal */
+export interface ResizableSize {
+  /** The size in px, `undefined` while the sheet keeps its natural size. */
+  size: Readonly<Ref<number | undefined>>;
+  bounds: Readonly<Ref<ResizeBounds>>;
+  isDragging: Readonly<Ref<boolean>>;
+  startDrag: (event: PointerEvent, renderedSize: number) => void;
+  drag: (event: PointerEvent) => void;
+  endDrag: () => void;
+  /** Arrow keys, Home and End; `renderedSize` stands for a natural size. */
+  resizeFromKey: (event: KeyboardEvent, renderedSize?: number) => void;
+  reset: () => void;
+}
+
+type SizeStep = (size: number, bounds: ResizeBounds) => number;
+
+const grow: SizeStep = (size) => size + RESIZE_KEYBOARD_STEP_PX;
+const shrink: SizeStep = (size) => size - RESIZE_KEYBOARD_STEP_PX;
+
+// The arrow pointing away from the sheet's edge grows it.
+const KEYBOARD_STEPS: Record<ResizeSide, Record<string, SizeStep>> = {
+  right: { ArrowLeft: grow, ArrowRight: shrink },
+  left: { ArrowRight: grow, ArrowLeft: shrink },
+  bottom: { ArrowUp: grow, ArrowDown: shrink },
+  top: { ArrowDown: grow, ArrowUp: shrink },
+};
+
+const BOUND_KEYS: Record<string, SizeStep> = {
+  Home: (_, bounds) => bounds.minSize,
+  End: (_, bounds) => bounds.maxSize,
+};
+
+interface PointerAxis {
+  coordinate: (event: PointerEvent) => number;
+  /** +1 when moving the pointer along the axis grows the sheet. */
+  direction: 1 | -1;
+}
+
+const POINTER_AXES: Record<ResizeSide, PointerAxis> = {
+  right: { coordinate: (event) => event.clientX, direction: -1 },
+  left: { coordinate: (event) => event.clientX, direction: 1 },
+  bottom: { coordinate: (event) => event.clientY, direction: -1 },
+  top: { coordinate: (event) => event.clientY, direction: 1 },
+};
+
+interface DragStart {
+  position: number;
+  size: number;
+}
+
+/** @internal */
+export function clampSize(size: number, bounds: ResizeBounds): number {
+  return Math.round(Math.min(bounds.maxSize, Math.max(bounds.minSize, size)));
+}
+
+/**
+ * The size of a sheet docked on one edge of the window (a side panel, a
+ * drawer) and the handlers of the resize handle on its inner edge: dragging,
+ * the arrow / Home / End keys, and a reset. The size is written to `storage`
+ * once a change settles; while the handle is dragged, `liveSize` holds it.
+ *
+ * @internal
+ */
+export function useResizableSize(options: ResizableSizeOptions): ResizableSize {
+  const { storage } = options;
+  const axis = POINTER_AXES[options.side];
+  const keySteps = { ...KEYBOARD_STEPS[options.side], ...BOUND_KEYS };
+  const liveSize = options.liveSize ?? ref<number | null>(null);
+  const bounds = computed(() => toValue(options.bounds));
+  const size = computed(() => {
+    if (liveSize.value !== null) return liveSize.value;
+    const stored = storage.read() ?? bounds.value.defaultSize;
+    return stored === undefined ? undefined : clampSize(stored, bounds.value);
+  });
+  let dragStart: DragStart | null = null;
+
+  function commit(next: number): void {
+    storage.write(clampSize(next, bounds.value));
+  }
+
+  function startDrag(event: PointerEvent, renderedSize: number): void {
+    event.preventDefault();
+    dragStart = { position: axis.coordinate(event), size: renderedSize };
+    liveSize.value = clampSize(renderedSize, bounds.value);
+  }
+
+  function drag(event: PointerEvent): void {
+    if (dragStart === null) return;
+    const moved = axis.coordinate(event) - dragStart.position;
+    const next = dragStart.size + moved * axis.direction;
+    liveSize.value = clampSize(next, bounds.value);
+  }
+
+  function endDrag(): void {
+    if (dragStart === null) return;
+    dragStart = null;
+    if (size.value !== undefined) commit(size.value);
+    liveSize.value = null;
+  }
+
+  function resizeFromKey(event: KeyboardEvent, renderedSize?: number): void {
+    const step = keySteps[event.key];
+    const current = size.value ?? renderedSize;
+    if (!step || current === undefined) return;
+    event.preventDefault();
+    commit(step(current, bounds.value));
+  }
+
+  function reset(): void {
+    const { defaultSize } = bounds.value;
+    if (defaultSize === undefined) storage.write(undefined);
+    else commit(defaultSize);
+  }
+
+  return {
+    size,
+    bounds,
+    isDragging: computed(() => liveSize.value !== null),
+    startDrag,
+    drag,
+    endDrag,
+    resizeFromKey,
+    reset,
+  };
+}