vectis-ui 0.11.0 → 0.13.0

package/dist/components/VContextMenu/VContextMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VContextMenu.js","names":[],"sources":["../../../src/components/VContextMenu/VContextMenu.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @keyboard @a11y @core\n/**\n * The native `contextmenu` event covers the right click, the long press on Android and the\n * Menu key. JavaScript places a zero-size anchor at the pointer so CSS anchoring can position\n * the panel and flip it near the viewport edges, and adds Shift+F10 where the platform lacks it.\n */\n\nimport { computed, provide, ref, shallowRef, useId } from 'vue'\n\nimport VMenuPanel from '../VMenu/VMenuPanel.vue'\nimport { menuAnchor, menuKey } from '../VMenu/context'\nimport type { MenuSize } from '../VMenu/context'\nimport { usePopoverModel } from '../../composables/usePopover'\nimport { isRtl } from '../../utils/direction'\nimport { clamp } from '../../utils/number'\n\ninterface ContextMenuProps {\n  /** The element wrapping the zone. Any element able to hold the default slot's content. */\n  as?: string\n  /** How tall the rows are: 32, 40 or 48 pixels. Submenus inherit it. */\n  size?: MenuSize\n  /** Takes 4px off the height of every row, submenus included. */\n  compact?: boolean\n  /**\n   * A width for the panel: a number is read as pixels, a string as any CSS length or\n   * keyword. Submenus keep the default width.\n   */\n  width?: number | string\n  /** Leaves the zone to the browser's own context menu. */\n  disabled?: boolean\n}\n\n// The attributes belong on the zone, the one element of the three this component renders that\n// the consumer sees.\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<ContextMenuProps>(), {\n  as: 'div',\n  size: 'sm',\n  compact: false,\n  width: undefined,\n  disabled: false,\n})\n\n/**\n * Whether the menu is showing. The browser's own dismissal (a click outside, Escape,\n * choosing a command) writes back to it. Opened from the model, the menu appears under\n * the focused element of the zone, or under the zone itself.\n */\nconst open = defineModel<boolean>('open', { default: false })\n\ndefineSlots<{\n  /** The zone the menu belongs to. */\n  default(): unknown\n  /**\n   * The contents of the menu: VMenuItem, VMenuGroup and VMenuSeparator. `target` is the\n   * element the menu was opened on, so one menu can serve every item of a list.\n   */\n  menu(props: { target: Element | null }): unknown\n}>()\n\nconst zoneEl = ref<HTMLElement | null>(null)\nconst anchorEl = ref<HTMLElement | null>(null)\nconst panelRef = ref<InstanceType<typeof VMenuPanel> | null>(null)\nconst menuId = useId()\nconst anchor = menuAnchor(menuId)\n\n/** The element the menu was opened on, handed to the `menu` slot. */\nconst target = shallowRef<Element | null>(null)\n\n/** Where the focus goes back when the menu closes. */\nlet returnFocus: HTMLElement | null = null\nlet fromKeyboard = false\n\nprovide(menuKey, { closeAll: () => panelRef.value?.close() })\n\n/** Moves the invisible anchor the panel is positioned against. */\nfunction placeAnchor(x: number, y: number) {\n  const el = anchorEl.value\n  if (!el) return\n  el.style.left = `${x}px`\n  el.style.top = `${y}px`\n}\n\n/**\n * Puts the anchor under an element's start edge, kept inside the viewport so a zone taller\n * than the screen still opens a visible menu.\n */\nfunction placeUnder(el: Element) {\n  const rect = el.getBoundingClientRect()\n  const x = isRtl(el) ? rect.right : rect.left\n  placeAnchor(clamp(x, 0, window.innerWidth), clamp(rect.bottom, 0, window.innerHeight))\n}\n\nfunction openMenu(on: Element | null, keyboard: boolean) {\n  const panel = panelRef.value\n  if (!panel) return\n  target.value = on\n  fromKeyboard = keyboard\n  // Reopening at another spot must not take the focus inside the old panel as the place to\n  // return to.\n  const active = document.activeElement\n  if (!panel.el?.contains(active)) {\n    returnFocus = active instanceof HTMLElement && active !== document.body ? active : null\n  }\n  if (panel.shown) panel.close()\n  panel.show()\n}\n\n/** The element of the zone holding the focus, or the zone itself. */\nfunction focusedInZone(): Element | null {\n  const active = document.activeElement\n  return active && zoneEl.value?.contains(active) ? active : zoneEl.value\n}\n\n// @keyboard\n// Keyboard openings carry no pointer position: the spec gives them an empty pointer type. Where\n// `contextmenu` is still a plain MouseEvent, no button is pressed or released for them; a\n// Control-click on macOS holds the primary button down.\nfunction isKeyboardEvent(event: MouseEvent): boolean {\n  if ('pointerType' in event) return (event as PointerEvent).pointerType === ''\n  return event.button !== 2 && event.buttons === 0\n}\n\nfunction onContextmenu(event: MouseEvent) {\n  // A nested context menu, or the consumer's own handler, already answered this event.\n  if (props.disabled || event.defaultPrevented) return\n  const keyboard = isKeyboardEvent(event)\n  // Shift is the way through to the browser's own menu, as Firefox already does by itself.\n  if (event.shiftKey && !keyboard) return\n  event.preventDefault()\n  // Shift+F10 also fires a native `contextmenu` on some platforms, after the keydown below\n  // has already opened the menu.\n  if (keyboard && panelRef.value?.shown) return\n  const on = event.target instanceof Element ? event.target : zoneEl.value\n  if (keyboard) {\n    if (on) placeUnder(on)\n    openMenu(on, true)\n    return\n  }\n  placeAnchor(event.clientX, event.clientY)\n  // @core\n  // macOS and Linux fire the event on the press, not the release. An auto popover opened while\n  // the button is still down is dismissed by that release, so the opening waits until the\n  // release has been dispatched.\n  const pointer = (event as Partial<PointerEvent>).pointerType\n  if (event.buttons !== 0 && pointer !== 'touch') {\n    const release = () => {\n      window.removeEventListener('pointerup', release, true)\n      window.removeEventListener('pointercancel', release, true)\n      setTimeout(() => openMenu(on, false))\n    }\n    window.addEventListener('pointerup', release, true)\n    window.addEventListener('pointercancel', release, true)\n    return\n  }\n  openMenu(on, false)\n}\n\n// @keyboard\n// Windows and Linux turn Shift+F10 into a `contextmenu` event by themselves; macOS does not.\nfunction onKeydown(event: KeyboardEvent) {\n  if (props.disabled || event.defaultPrevented) return\n  if (event.key !== 'F10' || !event.shiftKey || event.altKey || event.ctrlKey || event.metaKey)\n    return\n  event.preventDefault()\n  const on = focusedInZone()\n  if (on) placeUnder(on)\n  openMenu(on, true)\n}\n\n// @a11y\n// The keyboard lands on the first command, the pointer on the panel itself, as in VMenu. On\n// closing, the focus returns where it was unless it has deliberately moved elsewhere.\nfunction onToggle(value: boolean) {\n  open.value = value\n  if (value) {\n    if (fromKeyboard) panelRef.value?.focusFirst()\n    else panelRef.value?.focusPanel()\n    return\n  }\n  const active = document.activeElement\n  if (!active || active === document.body || panelRef.value?.el?.contains(active)) {\n    if (returnFocus?.isConnected) returnFocus.focus()\n  }\n}\n\n/** Opening from the model or from code without an event. */\nfunction showFromCode() {\n  const on = focusedInZone()\n  if (on) placeUnder(on)\n  openMenu(on, false)\n}\n\nusePopoverModel(\n  open,\n  () => panelRef.value?.shown ?? false,\n  showFromCode,\n  () => panelRef.value?.close(),\n)\n\ndefineExpose({\n  /**\n   * Opens the menu. Given a mouse event, it opens at the pointer on the event's target;\n   * otherwise under the focused element of the zone.\n   */\n  show(event?: MouseEvent) {\n    if (!event) return showFromCode()\n    placeAnchor(event.clientX, event.clientY)\n    openMenu(event.target instanceof Element ? event.target : zoneEl.value, false)\n  },\n  /** Closes the menu, submenus included. */\n  close: () => panelRef.value?.close(),\n  /** The panel element. */\n  el: computed(() => panelRef.value?.el ?? null),\n})\n</script>\n\n<template>\n  <component\n    :is=\"as\"\n    ref=\"zoneEl\"\n    v-bind=\"$attrs\"\n    class=\"v-context-menu\"\n    @contextmenu=\"onContextmenu\"\n    @keydown=\"onKeydown\"\n  >\n    <slot />\n  </component>\n  <span\n    ref=\"anchorEl\"\n    class=\"v-context-menu-anchor\"\n    aria-hidden=\"true\"\n    :style=\"{ 'anchor-name': anchor }\"\n  />\n  <!-- The browser's menu is kept off the panel: a context menu opened on top of this one\n       would hide it, and a keyboard opening that already moved the focus inside must not be\n       answered by the browser too -->\n  <VMenuPanel\n    :id=\"menuId\"\n    ref=\"panelRef\"\n    class=\"v-context-menu-panel\"\n    placement=\"bottom-start\"\n    :anchor=\"anchor\"\n    :size=\"size\"\n    :compact=\"compact\"\n    :width=\"width\"\n    @toggle=\"onToggle\"\n    @contextmenu.prevent\n  >\n    <slot name=\"menu\" :target=\"target\" />\n  </VMenuPanel>\n</template>\n\n<style>\n@layer vectis.components {\n  /* A point, not a box: the panel's corner sits on it. */\n  .v-context-menu-anchor {\n    /* Physical, like the pointer coordinates written into it. */\n    position: fixed;\n    top: 0;\n    left: 0;\n    inline-size: 0;\n    block-size: 0;\n    pointer-events: none;\n  }\n\n  /*\n   * Native context menus open against the pointer, with no gap. The gutter on the opposite side\n   * stays, so a flipped panel keeps its distance from the viewport edge.\n   */\n  .v-context-menu-panel.v-floating {\n    margin-block-start: 0;\n    /* A pointer can sit in a corner of the viewport, where both directions must flip at once. */\n    position-try-fallbacks:\n      flip-block,\n      flip-inline,\n      flip-block flip-inline;\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/VContextMenu/VContextMenu.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,148 @@
+import { usePopoverModel as e } from "../../composables/usePopover.js";
+import { isRtl as t } from "../../utils/direction.js";
+import { clamp as n } from "../../utils/number.js";
+import { menuAnchor as r, menuKey as i } from "../VMenu/context.js";
+import a from "../VMenu/VMenuPanel.js";
+import { Fragment as o, computed as s, createBlock as c, createElementBlock as l, createElementVNode as u, createVNode as d, defineComponent as f, mergeModels as p, mergeProps as m, normalizeStyle as h, openBlock as g, provide as _, ref as v, renderSlot as y, resolveDynamicComponent as b, shallowRef as x, unref as S, useId as C, useModel as w, withCtx as T, withModifiers as E } from "vue";
+//#region src/components/VContextMenu/VContextMenu.vue?vue&type=script&setup=true&lang.ts
+var D = /*@__PURE__*/ f({
+	inheritAttrs: !1,
+	__name: "VContextMenu",
+	props: /*@__PURE__*/ p({
+		as: { default: "div" },
+		size: { default: "sm" },
+		compact: {
+			type: Boolean,
+			default: !1
+		},
+		width: { default: void 0 },
+		disabled: {
+			type: Boolean,
+			default: !1
+		}
+	}, {
+		open: {
+			type: Boolean,
+			default: !1
+		},
+		openModifiers: {}
+	}),
+	emits: ["update:open"],
+	setup(f, { expose: p }) {
+		let D = f, O = w(f, "open"), k = v(null), A = v(null), j = v(null), M = C(), N = r(M), P = x(null), F = null, I = !1;
+		_(i, { closeAll: () => j.value?.close() });
+		function L(e, t) {
+			let n = A.value;
+			n && (n.style.left = `${e}px`, n.style.top = `${t}px`);
+		}
+		function R(e) {
+			let r = e.getBoundingClientRect();
+			L(n(t(e) ? r.right : r.left, 0, window.innerWidth), n(r.bottom, 0, window.innerHeight));
+		}
+		function z(e, t) {
+			let n = j.value;
+			if (!n) return;
+			P.value = e, I = t;
+			let r = document.activeElement;
+			n.el?.contains(r) || (F = r instanceof HTMLElement && r !== document.body ? r : null), n.shown && n.close(), n.show();
+		}
+		function B() {
+			let e = document.activeElement;
+			return e && k.value?.contains(e) ? e : k.value;
+		}
+		function V(e) {
+			return "pointerType" in e ? e.pointerType === "" : e.button !== 2 && e.buttons === 0;
+		}
+		function H(e) {
+			if (D.disabled || e.defaultPrevented) return;
+			let t = V(e);
+			if (e.shiftKey && !t || (e.preventDefault(), t && j.value?.shown)) return;
+			let n = e.target instanceof Element ? e.target : k.value;
+			if (t) {
+				n && R(n), z(n, !0);
+				return;
+			}
+			L(e.clientX, e.clientY);
+			let r = e.pointerType;
+			if (e.buttons !== 0 && r !== "touch") {
+				let e = () => {
+					window.removeEventListener("pointerup", e, !0), window.removeEventListener("pointercancel", e, !0), setTimeout(() => z(n, !1));
+				};
+				window.addEventListener("pointerup", e, !0), window.addEventListener("pointercancel", e, !0);
+				return;
+			}
+			z(n, !1);
+		}
+		function U(e) {
+			if (D.disabled || e.defaultPrevented || e.key !== "F10" || !e.shiftKey || e.altKey || e.ctrlKey || e.metaKey) return;
+			e.preventDefault();
+			let t = B();
+			t && R(t), z(t, !0);
+		}
+		function W(e) {
+			if (O.value = e, e) {
+				I ? j.value?.focusFirst() : j.value?.focusPanel();
+				return;
+			}
+			let t = document.activeElement;
+			(!t || t === document.body || j.value?.el?.contains(t)) && F?.isConnected && F.focus();
+		}
+		function G() {
+			let e = B();
+			e && R(e), z(e, !1);
+		}
+		return e(O, () => j.value?.shown ?? !1, G, () => j.value?.close()), p({
+			show(e) {
+				if (!e) return G();
+				L(e.clientX, e.clientY), z(e.target instanceof Element ? e.target : k.value, !1);
+			},
+			close: () => j.value?.close(),
+			el: s(() => j.value?.el ?? null)
+		}), (e, t) => (g(), l(o, null, [
+			(g(), c(b(f.as), m({
+				ref_key: "zoneEl",
+				ref: k
+			}, e.$attrs, {
+				class: "v-context-menu",
+				onContextmenu: H,
+				onKeydown: U
+			}), {
+				default: T(() => [y(e.$slots, "default")]),
+				_: 3
+			}, 16)),
+			u("span", {
+				ref_key: "anchorEl",
+				ref: A,
+				class: "v-context-menu-anchor",
+				"aria-hidden": "true",
+				style: h({ "anchor-name": S(N) })
+			}, null, 4),
+			d(a, {
+				id: S(M),
+				ref_key: "panelRef",
+				ref: j,
+				class: "v-context-menu-panel",
+				placement: "bottom-start",
+				anchor: S(N),
+				size: f.size,
+				compact: f.compact,
+				width: f.width,
+				onToggle: W,
+				onContextmenu: t[0] ||= E(() => {}, ["prevent"])
+			}, {
+				default: T(() => [y(e.$slots, "menu", { target: P.value })]),
+				_: 3
+			}, 8, [
+				"id",
+				"anchor",
+				"size",
+				"compact",
+				"width"
+			])
+		], 64));
+	}
+});
+//#endregion
+export { D as default };
+
+//# sourceMappingURL=VContextMenu.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/VContextMenu/VContextMenu.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VContextMenu.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../../src/components/VContextMenu/VContextMenu.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @keyboard @a11y @core\n/**\n * The native `contextmenu` event covers the right click, the long press on Android and the\n * Menu key. JavaScript places a zero-size anchor at the pointer so CSS anchoring can position\n * the panel and flip it near the viewport edges, and adds Shift+F10 where the platform lacks it.\n */\n\nimport { computed, provide, ref, shallowRef, useId } from 'vue'\n\nimport VMenuPanel from '../VMenu/VMenuPanel.vue'\nimport { menuAnchor, menuKey } from '../VMenu/context'\nimport type { MenuSize } from '../VMenu/context'\nimport { usePopoverModel } from '../../composables/usePopover'\nimport { isRtl } from '../../utils/direction'\nimport { clamp } from '../../utils/number'\n\ninterface ContextMenuProps {\n  /** The element wrapping the zone. Any element able to hold the default slot's content. */\n  as?: string\n  /** How tall the rows are: 32, 40 or 48 pixels. Submenus inherit it. */\n  size?: MenuSize\n  /** Takes 4px off the height of every row, submenus included. */\n  compact?: boolean\n  /**\n   * A width for the panel: a number is read as pixels, a string as any CSS length or\n   * keyword. Submenus keep the default width.\n   */\n  width?: number | string\n  /** Leaves the zone to the browser's own context menu. */\n  disabled?: boolean\n}\n\n// The attributes belong on the zone, the one element of the three this component renders that\n// the consumer sees.\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<ContextMenuProps>(), {\n  as: 'div',\n  size: 'sm',\n  compact: false,\n  width: undefined,\n  disabled: false,\n})\n\n/**\n * Whether the menu is showing. The browser's own dismissal (a click outside, Escape,\n * choosing a command) writes back to it. Opened from the model, the menu appears under\n * the focused element of the zone, or under the zone itself.\n */\nconst open = defineModel<boolean>('open', { default: false })\n\ndefineSlots<{\n  /** The zone the menu belongs to. */\n  default(): unknown\n  /**\n   * The contents of the menu: VMenuItem, VMenuGroup and VMenuSeparator. `target` is the\n   * element the menu was opened on, so one menu can serve every item of a list.\n   */\n  menu(props: { target: Element | null }): unknown\n}>()\n\nconst zoneEl = ref<HTMLElement | null>(null)\nconst anchorEl = ref<HTMLElement | null>(null)\nconst panelRef = ref<InstanceType<typeof VMenuPanel> | null>(null)\nconst menuId = useId()\nconst anchor = menuAnchor(menuId)\n\n/** The element the menu was opened on, handed to the `menu` slot. */\nconst target = shallowRef<Element | null>(null)\n\n/** Where the focus goes back when the menu closes. */\nlet returnFocus: HTMLElement | null = null\nlet fromKeyboard = false\n\nprovide(menuKey, { closeAll: () => panelRef.value?.close() })\n\n/** Moves the invisible anchor the panel is positioned against. */\nfunction placeAnchor(x: number, y: number) {\n  const el = anchorEl.value\n  if (!el) return\n  el.style.left = `${x}px`\n  el.style.top = `${y}px`\n}\n\n/**\n * Puts the anchor under an element's start edge, kept inside the viewport so a zone taller\n * than the screen still opens a visible menu.\n */\nfunction placeUnder(el: Element) {\n  const rect = el.getBoundingClientRect()\n  const x = isRtl(el) ? rect.right : rect.left\n  placeAnchor(clamp(x, 0, window.innerWidth), clamp(rect.bottom, 0, window.innerHeight))\n}\n\nfunction openMenu(on: Element | null, keyboard: boolean) {\n  const panel = panelRef.value\n  if (!panel) return\n  target.value = on\n  fromKeyboard = keyboard\n  // Reopening at another spot must not take the focus inside the old panel as the place to\n  // return to.\n  const active = document.activeElement\n  if (!panel.el?.contains(active)) {\n    returnFocus = active instanceof HTMLElement && active !== document.body ? active : null\n  }\n  if (panel.shown) panel.close()\n  panel.show()\n}\n\n/** The element of the zone holding the focus, or the zone itself. */\nfunction focusedInZone(): Element | null {\n  const active = document.activeElement\n  return active && zoneEl.value?.contains(active) ? active : zoneEl.value\n}\n\n// @keyboard\n// Keyboard openings carry no pointer position: the spec gives them an empty pointer type. Where\n// `contextmenu` is still a plain MouseEvent, no button is pressed or released for them; a\n// Control-click on macOS holds the primary button down.\nfunction isKeyboardEvent(event: MouseEvent): boolean {\n  if ('pointerType' in event) return (event as PointerEvent).pointerType === ''\n  return event.button !== 2 && event.buttons === 0\n}\n\nfunction onContextmenu(event: MouseEvent) {\n  // A nested context menu, or the consumer's own handler, already answered this event.\n  if (props.disabled || event.defaultPrevented) return\n  const keyboard = isKeyboardEvent(event)\n  // Shift is the way through to the browser's own menu, as Firefox already does by itself.\n  if (event.shiftKey && !keyboard) return\n  event.preventDefault()\n  // Shift+F10 also fires a native `contextmenu` on some platforms, after the keydown below\n  // has already opened the menu.\n  if (keyboard && panelRef.value?.shown) return\n  const on = event.target instanceof Element ? event.target : zoneEl.value\n  if (keyboard) {\n    if (on) placeUnder(on)\n    openMenu(on, true)\n    return\n  }\n  placeAnchor(event.clientX, event.clientY)\n  // @core\n  // macOS and Linux fire the event on the press, not the release. An auto popover opened while\n  // the button is still down is dismissed by that release, so the opening waits until the\n  // release has been dispatched.\n  const pointer = (event as Partial<PointerEvent>).pointerType\n  if (event.buttons !== 0 && pointer !== 'touch') {\n    const release = () => {\n      window.removeEventListener('pointerup', release, true)\n      window.removeEventListener('pointercancel', release, true)\n      setTimeout(() => openMenu(on, false))\n    }\n    window.addEventListener('pointerup', release, true)\n    window.addEventListener('pointercancel', release, true)\n    return\n  }\n  openMenu(on, false)\n}\n\n// @keyboard\n// Windows and Linux turn Shift+F10 into a `contextmenu` event by themselves; macOS does not.\nfunction onKeydown(event: KeyboardEvent) {\n  if (props.disabled || event.defaultPrevented) return\n  if (event.key !== 'F10' || !event.shiftKey || event.altKey || event.ctrlKey || event.metaKey)\n    return\n  event.preventDefault()\n  const on = focusedInZone()\n  if (on) placeUnder(on)\n  openMenu(on, true)\n}\n\n// @a11y\n// The keyboard lands on the first command, the pointer on the panel itself, as in VMenu. On\n// closing, the focus returns where it was unless it has deliberately moved elsewhere.\nfunction onToggle(value: boolean) {\n  open.value = value\n  if (value) {\n    if (fromKeyboard) panelRef.value?.focusFirst()\n    else panelRef.value?.focusPanel()\n    return\n  }\n  const active = document.activeElement\n  if (!active || active === document.body || panelRef.value?.el?.contains(active)) {\n    if (returnFocus?.isConnected) returnFocus.focus()\n  }\n}\n\n/** Opening from the model or from code without an event. */\nfunction showFromCode() {\n  const on = focusedInZone()\n  if (on) placeUnder(on)\n  openMenu(on, false)\n}\n\nusePopoverModel(\n  open,\n  () => panelRef.value?.shown ?? false,\n  showFromCode,\n  () => panelRef.value?.close(),\n)\n\ndefineExpose({\n  /**\n   * Opens the menu. Given a mouse event, it opens at the pointer on the event's target;\n   * otherwise under the focused element of the zone.\n   */\n  show(event?: MouseEvent) {\n    if (!event) return showFromCode()\n    placeAnchor(event.clientX, event.clientY)\n    openMenu(event.target instanceof Element ? event.target : zoneEl.value, false)\n  },\n  /** Closes the menu, submenus included. */\n  close: () => panelRef.value?.close(),\n  /** The panel element. */\n  el: computed(() => panelRef.value?.el ?? null),\n})\n</script>\n\n<template>\n  <component\n    :is=\"as\"\n    ref=\"zoneEl\"\n    v-bind=\"$attrs\"\n    class=\"v-context-menu\"\n    @contextmenu=\"onContextmenu\"\n    @keydown=\"onKeydown\"\n  >\n    <slot />\n  </component>\n  <span\n    ref=\"anchorEl\"\n    class=\"v-context-menu-anchor\"\n    aria-hidden=\"true\"\n    :style=\"{ 'anchor-name': anchor }\"\n  />\n  <!-- The browser's menu is kept off the panel: a context menu opened on top of this one\n       would hide it, and a keyboard opening that already moved the focus inside must not be\n       answered by the browser too -->\n  <VMenuPanel\n    :id=\"menuId\"\n    ref=\"panelRef\"\n    class=\"v-context-menu-panel\"\n    placement=\"bottom-start\"\n    :anchor=\"anchor\"\n    :size=\"size\"\n    :compact=\"compact\"\n    :width=\"width\"\n    @toggle=\"onToggle\"\n    @contextmenu.prevent\n  >\n    <slot name=\"menu\" :target=\"target\" />\n  </VMenuPanel>\n</template>\n\n<style>\n@layer vectis.components {\n  /* A point, not a box: the panel's corner sits on it. */\n  .v-context-menu-anchor {\n    /* Physical, like the pointer coordinates written into it. */\n    position: fixed;\n    top: 0;\n    left: 0;\n    inline-size: 0;\n    block-size: 0;\n    pointer-events: none;\n  }\n\n  /*\n   * Native context menus open against the pointer, with no gap. The gutter on the opposite side\n   * stays, so a flipped panel keeps its distance from the viewport edge.\n   */\n  .v-context-menu-panel.v-floating {\n    margin-block-start: 0;\n    /* A pointer can sit in a corner of the viewport, where both directions must flip at once. */\n    position-try-fallbacks:\n      flip-block,\n      flip-inline,\n      flip-block flip-inline;\n  }\n}\n</style>\n"],"mappings":"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"}

package/dist/components/VDataTable/VDataTable.css

@@ -1,2 +1,2 @@
 @layer vectis.reset, vectis.tokens, vectis.components, vectis.utilities;
-@layer vectis.components{.v-data-table{--data-table-pad-block:var(--vectis-space-3);--data-table-pad-inline:var(--vectis-space-3);--data-table-head-pad-block:var(--vectis-space-2);--data-table-frame-pad:0px;font-family:var(--vectis-text-family);flex-direction:column;block-size:100%;display:flex;container-type:inline-size}.v-data-table[data-compact]{--data-table-pad-block:var(--vectis-space-2);--data-table-pad-inline:var(--vectis-space-2);--data-table-head-pad-block:var(--vectis-space-1)}.v-data-table[data-variant=outlined]{--data-table-frame-pad:var(--data-table-pad-inline);background:var(--vectis-color-surface-raised);border:1px solid var(--vectis-color-border);border-radius:var(--vectis-radius-surface);overflow:clip}.v-data-table-scroller{flex:auto;min-block-size:0;overflow:auto}.v-data-table-toolbar{justify-content:space-between;align-items:center;gap:var(--vectis-space-3);padding-block-start:var(--data-table-frame-pad);padding-block-end:var(--vectis-space-3);padding-inline:var(--data-table-frame-pad);flex-wrap:wrap;flex:none;display:flex}.v-data-table-title{--typography-color:var(--vectis-color-text)}.v-data-table-toolbar .v-input{inline-size:var(--vectis-control-size-table-search);max-inline-size:100%}.v-data-table-table{border-collapse:collapse;width:100%;font-size:var(--vectis-text-body-md-size);color:var(--vectis-color-text)}.v-data-table-caption{padding-block-end:var(--vectis-space-3);padding-inline:var(--data-table-frame-pad);text-align:start;font-size:var(--vectis-text-body-md-size);color:var(--vectis-color-text-muted)}.v-data-table-table th{padding:var(--data-table-head-pad-block) var(--data-table-pad-inline);text-align:start;font-size:var(--vectis-text-body-md-size);font-weight:var(--vectis-font-weight-semibold);color:var(--vectis-color-text-muted);background-color:var(--vectis-color-surface-muted);border-block-end:1px solid var(--vectis-color-border)}.v-data-table-table td{padding:var(--data-table-pad-block) var(--data-table-pad-inline);border-block-end:1px solid var(--vectis-color-border)}.v-data-table-table tbody tr:last-child td{border-block-end:none}.v-data-table-table [data-align=end]{text-align:end}.v-data-table-table [data-align=center]{text-align:center}.v-data-table-stack-label{display:none}.v-data-table-table .v-data-table-select{inline-size:0}.v-data-table[data-striped] tbody tr:nth-child(2n){background-color:var(--vectis-color-surface-sunken)}.v-data-table[data-selectable] tbody tr[data-selected]{background-color:var(--vectis-color-accent-surface)}@media (forced-colors:active){.v-data-table[data-selectable] tbody tr[data-selected]{outline:var(--vectis-focus-ring-width) solid Highlight;outline-offset:calc(-1 * var(--vectis-focus-ring-width))}}.v-data-table[data-sticky-header] th{z-index:1;position:sticky;inset-block-start:0}.v-data-table-sort{--vectis-icon-size:var(--vectis-icon-size-md);--vectis-icon-opsz:20;align-items:center;gap:var(--vectis-space-1);color:inherit;font:inherit;cursor:pointer;border-radius:min(var(--vectis-radius-interactive), .5lh);background:0 0;border:none;padding:0;display:inline-flex}.v-data-table-sort:hover{color:var(--vectis-color-text)}.v-data-table-sort:focus-visible{outline:var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);outline-offset:var(--vectis-focus-ring-offset)}.v-data-table-sort-icon{opacity:.35}.v-data-table-sort[data-direction] .v-data-table-sort-icon{opacity:1}.v-data-table-state{padding:var(--vectis-space-6);text-align:center;color:var(--vectis-color-text-muted)}.v-data-table-state-loading{align-items:center;gap:var(--vectis-space-2);display:inline-flex}.v-data-table-footer{justify-content:flex-end;align-items:center;gap:var(--vectis-space-4);padding-block-start:var(--vectis-space-3);padding-block-end:var(--data-table-frame-pad);padding-inline:var(--data-table-frame-pad);flex-wrap:wrap;flex:none;display:flex}.v-data-table-footer-end{justify-content:flex-end;align-items:center;gap:var(--vectis-space-4);flex-wrap:wrap;margin-inline-start:auto;display:flex}.v-data-table-selection,.v-data-table-range,.v-data-table-per-page-label{font-size:var(--vectis-text-body-md-size);color:var(--vectis-color-text-muted)}.v-data-table-per-page{align-items:center;gap:var(--vectis-space-2);display:flex}@container (width<=640px){.v-data-table[data-responsive=stack] .v-data-table-head{clip-path:inset(50%);width:1px;height:1px;margin:-1px;position:absolute;overflow:hidden}.v-data-table[data-responsive=stack] .v-data-table-head :is(.v-data-table-sort,.v-checkbox){visibility:hidden}.v-data-table[data-responsive=stack] .v-data-table-stack-label{display:inline}.v-data-table[data-responsive=stack] tbody tr{padding-block:var(--vectis-space-2);border-block-end:1px solid var(--vectis-color-border);display:block}.v-data-table[data-responsive=stack] tbody tr:last-child{border-block-end:none}.v-data-table[data-responsive=stack] td{justify-content:space-between;align-items:baseline;gap:var(--vectis-space-4);padding:var(--vectis-space-1) var(--vectis-space-2);text-align:end;border:none;display:flex}.v-data-table[data-responsive=stack] td:before{content:attr(data-label);font-size:var(--vectis-text-overline-size);font-weight:var(--vectis-text-overline-weight);letter-spacing:var(--vectis-text-overline-tracking);color:var(--vectis-color-text-muted)}.v-data-table[data-responsive=stack] td.v-data-table-select{justify-content:flex-start}.v-data-table[data-responsive=stack] td.v-data-table-select:before{content:none}.v-data-table-search{flex:100%}}}
+@layer vectis.components{.v-data-table{--data-table-pad-block:var(--vectis-space-3);--data-table-pad-inline:var(--vectis-space-3);--data-table-head-pad-block:var(--vectis-space-2);--data-table-frame-pad:0px;font-family:var(--vectis-text-family);flex-direction:column;block-size:100%;display:flex}.v-data-table[data-compact]{--data-table-pad-block:var(--vectis-space-2);--data-table-pad-inline:var(--vectis-space-2);--data-table-head-pad-block:var(--vectis-space-1)}.v-data-table-frame{flex-direction:column;flex:auto;min-block-size:0;display:flex}.v-data-table:is([data-variant=outline],[data-variant=elevated],[data-variant=filled])>.v-data-table-frame{--data-table-frame-pad:var(--data-table-pad-inline);border-radius:var(--vectis-radius-surface);border:1px solid #0000;overflow:clip}.v-data-table[data-variant=outline]>.v-data-table-frame{background:var(--vectis-color-surface);border-color:var(--vectis-color-border)}.v-data-table[data-variant=elevated]>.v-data-table-frame{background:var(--vectis-color-surface-raised);box-shadow:var(--vectis-shadow-sm);border:none}.v-data-table[data-variant=filled]{--data-table-head-bg:color-mix(in oklab, var(--vectis-color-surface-muted), var(--vectis-color-text) 4%)}.v-data-table[data-variant=filled]>.v-data-table-frame{background:var(--vectis-color-surface-muted)}.v-data-table-scroller{flex:auto;min-block-size:0;position:relative;overflow:auto}.v-data-table[data-variant=flat]>.v-data-table-frame>.v-data-table-scroller{border-radius:var(--vectis-radius-surface)}.v-data-table-header,.v-data-table-toolbar{align-items:center;gap:var(--vectis-space-3);flex-wrap:wrap;flex:none;padding-block-end:var(--vectis-space-3);display:flex}.v-data-table-titles{flex-direction:column;min-inline-size:0;display:flex}.v-data-table-title{--typography-color:var(--vectis-color-text)}.v-data-table-header>.v-data-table-search{inline-size:var(--vectis-control-size-table-search);max-inline-size:100%;margin-inline-start:auto}.v-data-table-table{border-collapse:collapse;width:100%;font-size:var(--vectis-text-body-md-size);color:var(--vectis-color-text)}.v-data-table-table th{padding:var(--data-table-head-pad-block) var(--data-table-pad-inline);text-align:start;font-size:var(--vectis-text-body-md-size);font-weight:var(--vectis-font-weight-semibold);color:var(--vectis-color-text-muted);background-color:var(--data-table-head-bg,var(--vectis-color-surface-muted));border-block-end:1px solid var(--vectis-color-border)}.v-data-table-table td{padding:var(--data-table-pad-block) var(--data-table-pad-inline);border-block-end:1px solid var(--vectis-color-border)}.v-data-table-table tbody tr:last-child td{border-block-end:none}.v-data-table-table [data-align=end]{text-align:end}.v-data-table-table [data-align=center]{text-align:center}.v-data-table-table .v-data-table-select{inline-size:0}.v-data-table[data-striped] tbody tr[data-stripe]{background-color:var(--vectis-color-surface-sunken)}.v-data-table[data-selectable] tbody tr[data-selected]{background-color:var(--vectis-color-accent-surface)}@media (forced-colors:active){.v-data-table[data-selectable] tbody tr[data-selected]{outline:var(--vectis-focus-ring-width) solid Highlight;outline-offset:calc(-1 * var(--vectis-focus-ring-width))}}.v-data-table[data-sticky-header] th{z-index:1;position:sticky;inset-block-start:0}.v-data-table-sort{--vectis-icon-size:var(--vectis-icon-size-md);--vectis-icon-opsz:20;align-items:center;gap:var(--vectis-space-1);color:inherit;font:inherit;cursor:pointer;border-radius:min(var(--vectis-radius-interactive), .5lh);background:0 0;border:none;padding:0;display:inline-flex}.v-data-table-sort:hover{color:var(--vectis-color-text)}.v-data-table-sort:focus-visible{outline:var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);outline-offset:var(--vectis-focus-ring-offset)}.v-data-table-sort-icon{opacity:.35}.v-data-table-sort[data-direction] .v-data-table-sort-icon{opacity:1}.v-data-table[data-virtual] .v-data-table-scroller{overflow-anchor:none}.v-data-table-table .v-data-table-spacer td{border:none;padding:0}.v-data-table-table .v-data-table-more td{block-size:var(--vectis-control-height-md);padding:var(--vectis-space-2);text-align:center;color:var(--vectis-color-text-muted);border:none}.v-data-table-state{padding:var(--vectis-space-6);text-align:center;color:var(--vectis-color-text-muted)}.v-data-table-state>.v-empty-state[data-size]{padding:0}.v-data-table-state-loading{align-items:center;gap:var(--vectis-space-2);display:inline-flex}.v-data-table-footer{justify-content:flex-end;align-items:center;gap:var(--vectis-space-4);padding-block-start:var(--vectis-space-3);padding-block-end:var(--data-table-frame-pad);padding-inline:var(--data-table-frame-pad);flex-wrap:wrap;flex:none;display:flex}.v-data-table-footer-end{justify-content:flex-end;align-items:center;gap:var(--vectis-space-4);flex-wrap:wrap;margin-inline-start:auto;display:flex}.v-data-table-selection,.v-data-table-range,.v-data-table-per-page-label{font-size:var(--vectis-text-body-md-size);color:var(--vectis-color-text-muted)}.v-data-table-per-page{align-items:center;gap:var(--vectis-space-2);display:flex}}

package/dist/components/VDataTable/VDataTable.d.ts

@@ -68,10 +68,8 @@ export interface DataTableRange {
     /** How many rows there are in all. */
     total: number;
 }
-/** How much decoration the table carries. */
-export type DataTableVariant = 'flat' | 'outlined';
-/** What a narrow container does to the rows. */
-export type DataTableResponsive = 'scroll' | 'stack';
+/** How the rows are set off from the page: nothing, a border, a shadow, or a muted fill. */
+export type DataTableVariant = 'flat' | 'outline' | 'elevated' | 'filled';
 export interface DataTableProps<Row extends Record<string, unknown>> {
     /** The columns to show, in order. */
     columns: DataTableColumn[];
@@ -80,20 +78,12 @@ export interface DataTableProps<Row extends Record<string, unknown>> {
     /** Which field identifies a row. */
     rowKey?: string;
     /**
-     * A sentence describing what the table holds. It is announced before the table itself,
-     * and is what tells a screen reader user whether it is worth exploring.
-     */
-    caption?: string;
-    /**
-     * How the table is framed: nothing at all, or a card with a raised background, a border
-     * and rounded corners.
+     * How the rows and the footer are framed: nothing at all (`flat`, the default), or a card
+     * with rounded corners set off by a border on the page surface (`outline`), a shadow over a
+     * raised surface (`elevated`), or a muted fill (`filled`). The header and the toolbar stay
+     * outside the frame.
      */
     variant?: DataTableVariant;
-    /**
-     * What happens when the component is too narrow: the table scrolls sideways, or each
-     * row becomes a card with its column headings repeated inside it.
-     */
-    responsive?: DataTableResponsive;
     /** Shows that the rows are being loaded. */
     loading?: boolean;
     /**
@@ -101,11 +91,22 @@ export interface DataTableProps<Row extends Record<string, unknown>> {
      * system dictionary.
      */
     loadingText?: string;
-    /** What is said when there is no row to show. It falls back to the design system dictionary. */
+    /**
+     * The title of the empty state shown when there is no row to show. It falls back to the design
+     * system dictionary, which words a table with no data and a search with no match differently.
+     */
     emptyText?: string;
-    /** A title above the table, on the left of its toolbar. */
+    /**
+     * A title above the table, which also names it for assistive technology. It is ignored when
+     * the `#header` slot replaces the title and subtitle.
+     */
     title?: string;
-    /** Adds a search field to the toolbar. */
+    /**
+     * A line under the title saying what the table holds. It also describes the table for
+     * assistive technology.
+     */
+    subtitle?: string;
+    /** Adds a search field to the header. */
     searchable?: boolean;
     /** What that field says while empty. It falls back to the design system dictionary. */
     searchPlaceholder?: string;
@@ -130,7 +131,7 @@ export interface DataTableProps<Row extends Record<string, unknown>> {
     /** Tightens the cells by one step, and everything the table renders with them. */
     compact?: boolean;
     /**
-     * The height of the whole component, toolbar and pagination included: a number is read as
+     * The height of the whole component, header, toolbar and pagination included: a number is read as
      * pixels, anything else as a CSS length. Left out, the table takes its parent's height
      * whenever the parent has one.
      */
@@ -181,6 +182,17 @@ export interface DataTableProps<Row extends Record<string, unknown>> {
      * the server can answer it.
      */
     serverSide?: boolean;
+    /**
+     * Renders only the rows near the visible part of the table, for tables of thousands of rows.
+     * It needs a bounded height, like `stickyHeader`. Rows are measured as they render, so they
+     * may vary in height, and each one is announced with its place in the whole table.
+     */
+    virtual?: boolean;
+    /**
+     * Says that more rows are to come, which makes the table ask for them through `load-more` as
+     * the end of its rows comes into view. While `loading`, the rows already there stay on show.
+     */
+    hasMore?: boolean;
 }
 declare const __VLS_export: <Row extends Record<string, unknown>>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: import('vue').PublicProps & __VLS_PrettifyLocal<(DataTableProps<Row> & {
@@ -203,6 +215,7 @@ declare const __VLS_export: <Row extends Record<string, unknown>>(__VLS_props: N
         search?: string;
     }) & {
         "onUpdate:selected"?: ((value: DataTableRowId[]) => any) | undefined;
+        "onLoad-more"?: (() => any) | undefined;
         "onUpdate:params"?: ((params: DataTableParams) => any) | undefined;
         "onUpdate:sort"?: ((value: DataTableSort | null) => any) | undefined;
         "onUpdate:page"?: ((value: number) => any) | undefined;
@@ -219,8 +232,13 @@ declare const __VLS_export: <Row extends Record<string, unknown>>(__VLS_props: N
     slots: {
         [name: `cell-${string}`]: (scope: DataTableCellSlotProps<Row>) => unknown;
         [name: `head-${string}`]: (scope: DataTableHeadSlotProps) => unknown;
-        /** The left side of the toolbar, replacing the `title` prop. */
-        title?(): unknown;
+        /**
+         * Replaces the title and subtitle with content of your own; the search field stays beside it.
+         * Name the table with `aria-label` or `aria-labelledby` then.
+         */
+        header?(): unknown;
+        /** A row between the header and the table, for actions and filters. */
+        toolbar?(): unknown;
         /** What the table shows while its rows are loading, replacing the spinner and its text. */
         loading?(): unknown;
         /**
@@ -229,7 +247,7 @@ declare const __VLS_export: <Row extends Record<string, unknown>>(__VLS_props: N
          */
         empty?(scope: DataTableEmptySlotProps): unknown;
     };
-    emit: ((evt: "update:params", params: DataTableParams) => void) & (((event: "update:selected", value: DataTableRowId[]) => void) & ((event: "update:sort", value: DataTableSort | null) => void) & ((event: "update:page", value: number) => void) & ((event: "update:perPage", value: number | undefined) => void) & ((event: "update:search", value: string) => void));
+    emit: (((evt: "load-more") => void) & ((evt: "update:params", params: DataTableParams) => void)) & (((event: "update:selected", value: DataTableRowId[]) => void) & ((event: "update:sort", value: DataTableSort | null) => void) & ((event: "update:page", value: number) => void) & ((event: "update:perPage", value: number | undefined) => void) & ((event: "update:search", value: string) => void));
 }>) => import('vue').VNode & {
     __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };