vectis-ui 0.12.0 → 0.13.0

package/dist/composables/useListbox.js

@@ -0,0 +1,227 @@
+import { clamp as e } from "../utils/number.js";
+import { useVirtualList as t } from "./useVirtualList.js";
+import { computed as n, reactive as r, ref as i, watch as a, watchEffect as o } from "vue";
+//#region src/composables/useListbox.ts
+var s = (e) => "options" in e, c = (e) => "separator" in e;
+function l(e, t) {
+	return t ? Array.isArray(e) ? e : [] : !Array.isArray(e) && e !== "" ? [e] : [];
+}
+var u = {
+	sm: 32,
+	md: 40,
+	lg: 48
+};
+function d(l) {
+	let d = n(() => l.items().flatMap((e) => c(e) ? [] : s(e) ? e.options : [e])), f = n(() => l.filter?.(d.value) ?? d.value), p = n(() => new Set(l.selected())), m = r(/* @__PURE__ */ new Map());
+	o(() => {
+		let e = p.value;
+		for (let t of d.value) e.has(t.value) && m.set(t.value, t);
+		for (let t of m.keys()) e.has(t) || m.delete(t);
+	});
+	let h = n(() => {
+		let e = /* @__PURE__ */ new Map();
+		for (let t of d.value) e.has(t.value) || e.set(t.value, t);
+		return e;
+	});
+	function g(e) {
+		return h.value.get(e) ?? m.get(e);
+	}
+	let _ = (e) => g(e)?.label ?? String(e), v = (e) => void m.set(e.value, e), y = i(-1), b = n(() => new Map(d.value.map((e, t) => [e, t]))), x = (e) => {
+		let t = f.value[e];
+		return `${l.id}-option-${t ? b.value.get(t) : e}`;
+	}, S = () => f.value.findIndex((e) => !e.disabled);
+	function C() {
+		y.value = S();
+	}
+	function w() {
+		let e = f.value, t = e.length - 1;
+		for (; t >= 0 && e[t]?.disabled;) t--;
+		y.value = t;
+	}
+	function T() {
+		let e = f.value.findIndex((e) => !e.disabled && p.value.has(e.value));
+		y.value = e >= 0 ? e : S();
+	}
+	function E(e) {
+		let t = f.value;
+		if (t.length === 0) return;
+		let n = y.value < 0 && e < 0 ? 0 : y.value;
+		for (let r = 0; r < t.length && (n = (n + e + t.length) % t.length, t[n]?.disabled); r++);
+		y.value = n;
+	}
+	function D(t) {
+		let n = f.value, r = e(y.value + t, 0, n.length - 1), i = Math.sign(t);
+		for (let e of [i, -i]) for (let t = r; t >= 0 && t < n.length; t += e) if (!n[t]?.disabled) {
+			y.value = t;
+			return;
+		}
+	}
+	function O(e) {
+		e.option.disabled || (y.value = e.index);
+	}
+	a(f, (e) => {
+		l.open() && (y.value < 0 || y.value >= e.length) && C();
+	});
+	let k = n(() => {
+		let e = new Set(f.value), t = 0, n = (n, r) => e.has(n) ? {
+			kind: "option",
+			key: `option:${r}`,
+			option: n,
+			index: t++
+		} : null, r = [], i = null;
+		for (let [e, t] of l.items().entries()) {
+			if (c(t)) {
+				r.length > 0 && (i = `sep:${e}`);
+				continue;
+			}
+			let a;
+			if (s(t)) {
+				let r = t.options.map((t, r) => n(t, `${e}.${r}`)).filter((e) => e !== null);
+				a = r.length > 0 ? {
+					kind: "group",
+					key: `group:${e}`,
+					id: `${l.id}-group-${e}`,
+					label: t.label,
+					options: r
+				} : null;
+			} else a = n(t, String(e));
+			a && (i !== null && (r.push({
+				kind: "separator",
+				key: i
+			}), i = null), r.push(a));
+		}
+		return r;
+	}), A = n(() => {
+		let e = [], t = /* @__PURE__ */ new Map(), n = [], r = k.value.filter((e) => e.kind === "option").length, i = 0;
+		for (let a of k.value) if (a.kind === "separator") e.push(a);
+		else if (a.kind === "option") n[a.index] = e.length, e.push({
+			...a,
+			set: r,
+			position: ++i
+		});
+		else {
+			t.set(a.key, a.label), e.push({
+				kind: "heading",
+				key: `heading:${a.key}`,
+				id: a.id,
+				label: a.label,
+				group: a.key
+			});
+			for (let [t, r] of a.options.entries()) n[r.index] = e.length, e.push({
+				...r,
+				group: a.key,
+				set: a.options.length,
+				position: t + 1
+			});
+		}
+		return {
+			rows: e,
+			labels: t,
+			rowOfOption: n
+		};
+	}), j = t({
+		scrollEl: n(() => l.virtual() ? l.panelEl() : null),
+		count: () => A.value.rows.length,
+		key: (e) => A.value.rows[e]?.key,
+		itemSize: () => u[l.size()] - (l.compact() ? 4 : 0),
+		overscan: () => 5,
+		initialCount: () => 10,
+		pinned: () => {
+			let e = A.value.rowOfOption[y.value];
+			return e === void 0 ? [] : [e];
+		}
+	});
+	function M(e, t) {
+		let n = e.index === y.value, r = p.value.has(e.option.value), i = l.virtual() ? {
+			"aria-setsize": l.hasMore?.() ? -1 : e.set,
+			"aria-posinset": e.position
+		} : {};
+		return {
+			...e,
+			at: t,
+			row: {
+				id: x(e.index),
+				icon: e.option.icon,
+				active: n,
+				selected: r,
+				disabled: e.option.disabled,
+				...i
+			},
+			slot: {
+				option: e.option,
+				index: e.index,
+				active: n,
+				selected: r
+			}
+		};
+	}
+	let N = n(() => {
+		let { rows: e, labels: t } = A.value, n = l.virtual() ? j.segments.value : e.map((e, t) => ({
+			type: "row",
+			index: t
+		})), r = (t) => {
+			let n = t?.type === "row" ? e[t.index] : void 0;
+			return n && n.kind !== "separator" ? n.group : void 0;
+		}, i = [], a;
+		for (let [o, s] of n.entries()) {
+			let c, l;
+			if (s.type === "spacer") {
+				c = {
+					kind: "spacer",
+					key: s.key,
+					size: s.size
+				};
+				let e = r(n[o - 1]);
+				l = e === r(n[o + 1]) ? e : void 0;
+			} else {
+				let t = e[s.index];
+				c = t.kind === "option" ? M(t, s.index) : {
+					...t,
+					at: s.index
+				}, l = r(s);
+			}
+			if (l === void 0) {
+				a = void 0, i.push(c);
+				continue;
+			}
+			a?.key !== l && (a = {
+				kind: "group",
+				key: l,
+				label: t.get(l),
+				children: []
+			}, i.push(a)), c.kind === "heading" && (a.labelId = c.id), a.children.push(c);
+		}
+		return i;
+	});
+	return a(y, (e) => {
+		if (!(e < 0)) {
+			if (l.virtual()) {
+				let t = A.value.rowOfOption[e];
+				t !== void 0 && j.scrollToIndex(t);
+				return;
+			}
+			document.getElementById(x(e))?.scrollIntoView?.({ block: "nearest" });
+		}
+	}, { flush: "post" }), {
+		allOptions: d,
+		visible: f,
+		selectedSet: p,
+		optionOf: g,
+		labelOf: _,
+		remember: v,
+		activeIndex: y,
+		optionId: x,
+		highlightFirst: C,
+		highlightLast: w,
+		highlightSelected: T,
+		move: E,
+		page: D,
+		hover: O,
+		blocks: N,
+		measureRow: j.measure
+	};
+}
+//#endregion
+export { l as selectionOf, d as useListbox };
+
+//# sourceMappingURL=useListbox.js.map

package/dist/composables/useListbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useListbox.js","names":[],"sources":["../../src/composables/useListbox.ts"],"sourcesContent":["// @keyboard @a11y\n/**\n * Model a listbox whose DOM focus stays on its field, for VCombobox and VSelect: the field names\n * the highlighted option through aria-activedescendant and moves it by hand, and the panel renders\n * `blocks`. Groups and separators exist for the eye alone; the keyboard counts through the flat\n * list of options and therefore never stops on one.\n */\nimport { computed, reactive, ref, watch, watchEffect, type ComputedRef, type Ref } from 'vue'\n\nimport type { IconSource } from '../components/VIcon/types'\nimport type {\n  ItemValue,\n  ListboxGroup,\n  ListboxItem,\n  ListboxOption,\n  ListboxOptionSlotProps,\n  ListboxSeparator,\n} from '../types'\nimport { clamp } from '../utils/number'\nimport { useVirtualList, type VirtualList, type VirtualSegment } from './useVirtualList'\n\nconst isListboxGroup = (item: ListboxItem): item is ListboxGroup => 'options' in item\nconst isListboxSeparator = (item: ListboxItem): item is ListboxSeparator => 'separator' in item\n\n/**\n * The chosen values as a list, whatever the model holds. An empty string is what an emptied\n * single field says, and it is not a value. A NUMBER is a value even at zero; hence the test on\n * the empty string alone rather than on falsiness, which would drop the option keyed `0`.\n */\nexport function selectionOf(value: ItemValue | ItemValue[], multiple: boolean): ItemValue[] {\n  if (multiple) return Array.isArray(value) ? value : []\n  return !Array.isArray(value) && value !== '' ? [value] : []\n}\n\ntype ListboxSize = 'sm' | 'md' | 'lg'\n\nexport interface ListboxOptions {\n  /** What the list offers, as the consumer gave it. */\n  items: () => ListboxItem[]\n  /**\n   * Narrows the flattened options, read inside a computed so it may follow reactive state. Left\n   * out, every option stays.\n   */\n  filter?: (options: ListboxOption[]) => ListboxOption[]\n  /** The chosen values. */\n  selected: () => ItemValue[]\n  /** Whether the panel is showing; the highlight is kept on a valid option only while it is. */\n  open: () => boolean\n  /** The panel's id, and the prefix of every option's and heading's id. */\n  id: string\n  /** The scrolling panel, which the virtual mode windows. */\n  panelEl: () => HTMLElement | null\n  /** Renders only the rows near the visible part of the panel. */\n  virtual: () => boolean\n  /** More pages are coming, so the last block's size is unknown. */\n  hasMore?: () => boolean\n  size: () => ListboxSize\n  compact: () => boolean\n}\n\n/** An option the panel renders, with its index in the visible options. */\nexport interface ListboxRenderedOption {\n  kind: 'option'\n  key: string\n  option: ListboxOption\n  index: number\n}\n\ntype RenderedNode =\n  | ListboxRenderedOption\n  | { kind: 'group'; key: string; id: string; label: string; options: ListboxRenderedOption[] }\n  | { kind: 'separator'; key: string }\n\n/**\n * The panel as one flat sequence of rows, the unit the virtual mode windows: a block's name is a\n * row of its own, above its options. Each row knows its block, so the rows rendered can be\n * gathered back into their groups. `set` and `position` are the option's place in its block, or\n * among the options outside any block.\n */\ntype FlatOption = ListboxRenderedOption & { group?: string; set: number; position: number }\ntype FlatRow =\n  | FlatOption\n  | { kind: 'heading'; key: string; id: string; label: string; group: string }\n  | { kind: 'separator'; key: string }\n\n/**\n * A rendered option with its state worked out, once per row: `row` is what the option element\n * takes, `slot` what the `#option` slot receives, and both read the same two answers. `at` is\n * the row's place in the flat sequence, which the virtual mode measures it under.\n */\nexport type ListboxOptionRow = FlatOption & {\n  at: number\n  row: {\n    id: string\n    icon?: IconSource\n    active: boolean\n    selected: boolean\n    disabled?: boolean\n    'aria-setsize'?: number\n    'aria-posinset'?: number\n  }\n  slot: ListboxOptionSlotProps\n}\n\nexport type ListboxRow =\n  | ListboxOptionRow\n  | { kind: 'heading'; key: string; id: string; label: string; at: number }\n  | { kind: 'separator'; key: string; at: number }\n  | { kind: 'spacer'; key: string; size: number }\n\n/** What the panel renders: rows, and blocks of rows gathered under their name. */\nexport type ListboxBlock =\n  | ListboxRow\n  | { kind: 'group'; key: string; label: string; labelId?: string; children: ListboxRow[] }\n\n// Only a starting guess for the virtual mode, every row being measured once rendered: the\n// height of an option at each size, 4px less when compact, as the control heights go.\nconst OPTION_HEIGHT: Record<ListboxSize, number> = { sm: 32, md: 40, lg: 48 }\n\nexport interface Listbox {\n  /** Every option, the blocks unwrapped and the separators dropped, in the order given. */\n  allOptions: ComputedRef<ListboxOption[]>\n  /** The options left by the filter: what the keyboard counts through. */\n  visible: ComputedRef<ListboxOption[]>\n  /** The selection as a set, so that asking \"is this one chosen?\" costs nothing. */\n  selectedSet: ComputedRef<Set<ItemValue>>\n  /** The option holding a value, found among the options or in the memory of chosen ones. */\n  optionOf: (value: ItemValue) => ListboxOption | undefined\n  /** The label of a value, or the value itself spelled out when no option holds it. */\n  labelOf: (value: ItemValue) => string\n  /** Keeps an option just chosen in memory, before the parent passes the value back down. */\n  remember: (option: ListboxOption) => void\n  /** The index of the highlighted option among `visible`, or -1. */\n  activeIndex: Ref<number>\n  /** The id of the option at an index of `visible`. */\n  optionId: (index: number) => string\n  /** Highlights the first option that can be chosen, or nothing. */\n  highlightFirst: () => void\n  /** Highlights the last option that can be chosen, or nothing. */\n  highlightLast: () => void\n  /** Highlights the first chosen option, or the first that can be chosen. */\n  highlightSelected: () => void\n  /** Moves the highlight by `delta` options, wrapping around and skipping disabled ones. */\n  move: (delta: number) => void\n  /**\n   * Moves the highlight by `delta` options without wrapping, the step of Page Up and Page Down:\n   * it stops at the first or last option that can be chosen.\n   */\n  page: (delta: number) => void\n  /** Highlights the option under the pointer. */\n  hover: (row: ListboxRenderedOption) => void\n  /** What the panel renders. */\n  blocks: ComputedRef<ListboxBlock[]>\n  /** Measures a rendered row, in the virtual mode. */\n  measureRow: VirtualList['measure']\n}\n\nexport function useListbox(options: ListboxOptions): Listbox {\n  // The ONE reading of the items the rest of the module does: the filtering, the memory of what\n  // was chosen, the labels and the paging all ignore the hierarchy entirely.\n  const allOptions = computed<ListboxOption[]>(() =>\n    options.items().flatMap((item) => {\n      if (isListboxSeparator(item)) return []\n      return isListboxGroup(item) ? item.options : [item]\n    }),\n  )\n\n  const visible = computed(() => options.filter?.(allOptions.value) ?? allOptions.value)\n\n  const selectedSet = computed(() => new Set(options.selected()))\n\n  // With a source that answers over the network, the options only ever hold the latest results,\n  // and something already chosen is usually absent from them; without this, a chip would show a\n  // raw identifier instead of a name. It is kept up to date by an effect rather than by watching\n  // the options, because the effect tracks the ITERATION and therefore also notices a page\n  // appended in place.\n  const optionCache = reactive(new Map<ItemValue, ListboxOption>())\n  watchEffect(() => {\n    const wanted = selectedSet.value\n    for (const option of allOptions.value) {\n      if (wanted.has(option.value)) optionCache.set(option.value, option)\n    }\n    // Without this the memory would grow with every value chosen during the session rather than\n    // with the current selection.\n    for (const value of optionCache.keys()) if (!wanted.has(value)) optionCache.delete(value)\n  })\n\n  // A lookup built once per list rather than searched each time: an option is looked up several\n  // times per chip and per render, so a linear search would cost chips times options on every\n  // keystroke.\n  const optionsByValue = computed(() => {\n    const map = new Map<ItemValue, ListboxOption>()\n    for (const option of allOptions.value) if (!map.has(option.value)) map.set(option.value, option)\n    return map\n  })\n\n  /*\n   * An option coming from the memory is a reactive PROXY, since making the map reactive converts\n   * the objects inside it. Compare options by their value and never by identity, or the two forms\n   * of the same option will not match.\n   */\n  function optionOf(value: ItemValue) {\n    return optionsByValue.value.get(value) ?? optionCache.get(value)\n  }\n\n  const labelOf = (value: ItemValue) => optionOf(value)?.label ?? String(value)\n\n  const remember = (option: ListboxOption) => void optionCache.set(option.value, option)\n\n  const activeIndex = ref(-1)\n\n  // @a11y\n  // An option's id follows the OPTION, from its place among all the options, and never its place\n  // in the filtered list: a screen reader announces the current option when\n  // `aria-activedescendant` changes, and a positional id would keep the same value while the\n  // filter slides another option under the highlight, which then goes unannounced.\n  const sourceIndex = computed(() => new Map(allOptions.value.map((option, i) => [option, i])))\n  const optionId = (index: number) => {\n    const option = visible.value[index]\n    return `${options.id}-option-${option ? sourceIndex.value.get(option) : index}`\n  }\n\n  const firstEnabled = () => visible.value.findIndex((o) => !o.disabled)\n\n  function highlightFirst() {\n    activeIndex.value = firstEnabled()\n  }\n\n  function highlightLast() {\n    const list = visible.value\n    let i = list.length - 1\n    while (i >= 0 && list[i]?.disabled) i--\n    activeIndex.value = i\n  }\n\n  function highlightSelected() {\n    const chosen = visible.value.findIndex((o) => !o.disabled && selectedSet.value.has(o.value))\n    activeIndex.value = chosen >= 0 ? chosen : firstEnabled()\n  }\n\n  // @keyboard\n  function move(delta: number) {\n    const list = visible.value\n    if (list.length === 0) return\n    // From \"nothing highlighted\" the first step lands on an END of the list: starting at -1,\n    // a step back would stop on the second-to-last option.\n    let i = activeIndex.value < 0 && delta < 0 ? 0 : activeIndex.value\n    for (let step = 0; step < list.length; step++) {\n      i = (i + delta + list.length) % list.length\n      if (!list[i]?.disabled) break\n    }\n    activeIndex.value = i\n  }\n\n  // @keyboard\n  function page(delta: number) {\n    const list = visible.value\n    const target = clamp(activeIndex.value + delta, 0, list.length - 1)\n    const step = Math.sign(delta)\n    // Past a disabled option in the direction of travel, then back if the end was disabled too.\n    for (const dir of [step, -step]) {\n      for (let i = target; i >= 0 && i < list.length; i += dir) {\n        if (!list[i]?.disabled) {\n          activeIndex.value = i\n          return\n        }\n      }\n    }\n  }\n\n  function hover(row: ListboxRenderedOption) {\n    if (!row.option.disabled) activeIndex.value = row.index\n  }\n\n  // While the panel is open there must always be a valid option highlighted. It is moved back to\n  // the first one whenever the highlighted one has fallen out of the list or there was none at\n  // all; without that second case, a search that passed through \"no result\" would leave nothing\n  // highlighted, and Enter would not choose the single result that came back.\n  watch(visible, (list) => {\n    if (!options.open()) return\n    if (activeIndex.value < 0 || activeIndex.value >= list.length) highlightFirst()\n  })\n\n  // Nothing here is keyed by VALUE. Two options may share one (a consumer's duplicate, or `1`\n  // beside `'1'`, which a template literal spells the same), and a value-keyed index hands both\n  // the same position, so both light up as active and Vue patches two rows under one key.\n  const rendered = computed<RenderedNode[]>(() => {\n    const kept = new Set(visible.value)\n    let next = 0\n\n    const entryOf = (option: ListboxOption, key: string): ListboxRenderedOption | null => {\n      if (!kept.has(option)) return null\n      return { kind: 'option', key: `option:${key}`, option, index: next++ }\n    }\n\n    const nodes: RenderedNode[] = []\n    // A separator is held back and only drawn once something has come before it and something\n    // comes after it. That single rule covers all three ways the filtering can strand one: at\n    // the top of the list, at the bottom, and two in a row.\n    let pendingSeparator: string | null = null\n\n    for (const [i, item] of options.items().entries()) {\n      if (isListboxSeparator(item)) {\n        if (nodes.length > 0) pendingSeparator = `sep:${i}`\n        continue\n      }\n\n      let node: RenderedNode | null\n      if (isListboxGroup(item)) {\n        const entries = item.options\n          .map((option, j) => entryOf(option, `${i}.${j}`))\n          .filter((entry): entry is ListboxRenderedOption => entry !== null)\n        // A block none of whose options survived is dropped entirely, its name included:\n        // a heading over nothing is worse than no heading.\n        node =\n          entries.length > 0\n            ? {\n                kind: 'group',\n                key: `group:${i}`,\n                id: `${options.id}-group-${i}`,\n                label: item.label,\n                options: entries,\n              }\n            : null\n      } else {\n        node = entryOf(item, String(i))\n      }\n      if (!node) continue\n\n      if (pendingSeparator !== null) {\n        nodes.push({ kind: 'separator', key: pendingSeparator })\n        pendingSeparator = null\n      }\n      nodes.push(node)\n    }\n\n    return nodes\n  })\n\n  const flat = computed(() => {\n    const rows: FlatRow[] = []\n    const labels = new Map<string, string>()\n    // Indexed by the option's place in `visible`: where the keyboard's highlight sits in the rows.\n    const rowOfOption: number[] = []\n    const loose = rendered.value.filter((node) => node.kind === 'option').length\n    let looseSeen = 0\n    for (const node of rendered.value) {\n      if (node.kind === 'separator') rows.push(node)\n      else if (node.kind === 'option') {\n        rowOfOption[node.index] = rows.length\n        rows.push({ ...node, set: loose, position: ++looseSeen })\n      } else {\n        labels.set(node.key, node.label)\n        rows.push({\n          kind: 'heading',\n          key: `heading:${node.key}`,\n          id: node.id,\n          label: node.label,\n          group: node.key,\n        })\n        for (const [j, option] of node.options.entries()) {\n          rowOfOption[option.index] = rows.length\n          rows.push({ ...option, group: node.key, set: node.options.length, position: j + 1 })\n        }\n      }\n    }\n    return { rows, labels, rowOfOption }\n  })\n\n  // @a11y\n  // The highlighted row stays rendered wherever the panel is scrolled: `aria-activedescendant`\n  // must name an element that exists.\n  const virtualList = useVirtualList({\n    scrollEl: computed(() => (options.virtual() ? options.panelEl() : null)),\n    count: () => flat.value.rows.length,\n    key: (index) => flat.value.rows[index]?.key,\n    itemSize: () => OPTION_HEIGHT[options.size()] - (options.compact() ? 4 : 0),\n    overscan: () => 5,\n    initialCount: () => 10,\n    pinned: () => {\n      const row = flat.value.rowOfOption[activeIndex.value]\n      return row === undefined ? [] : [row]\n    },\n  })\n\n  function withState(entry: FlatOption, at: number): ListboxOptionRow {\n    const active = entry.index === activeIndex.value\n    const selected = selectedSet.value.has(entry.option.value)\n    // @a11y\n    // Only some options exist in the virtual mode, so each one says where it stands; the last\n    // block may still grow while pages are coming.\n    const placed = options.virtual()\n      ? { 'aria-setsize': options.hasMore?.() ? -1 : entry.set, 'aria-posinset': entry.position }\n      : {}\n    return {\n      ...entry,\n      at,\n      row: {\n        id: optionId(entry.index),\n        icon: entry.option.icon,\n        active,\n        selected,\n        disabled: entry.option.disabled,\n        ...placed,\n      },\n      slot: { option: entry.option, index: entry.index, active, selected },\n    }\n  }\n\n  // The rows of the window and the space standing for the others, gathered back into their\n  // blocks. Kept apart from `flat` on purpose: the highlight moves on every arrow key, and only\n  // this pass over the rendered rows follows it; the filtering and the grouping stay where they\n  // are.\n  const blocks = computed<ListboxBlock[]>(() => {\n    const { rows, labels } = flat.value\n    const segments: VirtualSegment[] = options.virtual()\n      ? virtualList.segments.value\n      : rows.map((_, index) => ({ type: 'row', index }))\n    const groupAt = (segment: VirtualSegment | undefined) => {\n      const row = segment?.type === 'row' ? rows[segment.index] : undefined\n      return row && row.kind !== 'separator' ? row.group : undefined\n    }\n\n    const out: ListboxBlock[] = []\n    let open: Extract<ListboxBlock, { kind: 'group' }> | undefined\n    for (const [k, segment] of segments.entries()) {\n      let block: ListboxRow\n      let group: string | undefined\n      if (segment.type === 'spacer') {\n        block = { kind: 'spacer', key: segment.key, size: segment.size }\n        // Between two rows of one block, the space stands for rows of that block.\n        const before = groupAt(segments[k - 1])\n        group = before === groupAt(segments[k + 1]) ? before : undefined\n      } else {\n        const row = rows[segment.index]!\n        block =\n          row.kind === 'option' ? withState(row, segment.index) : { ...row, at: segment.index }\n        group = groupAt(segment)\n      }\n      if (group === undefined) {\n        open = undefined\n        out.push(block)\n        continue\n      }\n      if (open?.key !== group) {\n        open = { kind: 'group', key: group, label: labels.get(group)!, children: [] }\n        out.push(open)\n      }\n      if (block.kind === 'heading') open.labelId = block.id\n      open.children.push(block)\n    }\n    return out\n  })\n\n  // @a11y\n  // Since the focus never leaves the field, the browser has no reason to scroll the highlighted\n  // option into view. It is brought into view by hand instead, and asked for the SMALLEST\n  // movement that reveals it, so an option already visible does not make the panel jump.\n  watch(\n    activeIndex,\n    (index) => {\n      if (index < 0) return\n      if (options.virtual()) {\n        const row = flat.value.rowOfOption[index]\n        if (row !== undefined) void virtualList.scrollToIndex(row)\n        return\n      }\n      // Called optionally: the unit-test environment implements no scrolling at all.\n      document.getElementById(optionId(index))?.scrollIntoView?.({ block: 'nearest' })\n    },\n    { flush: 'post' },\n  )\n\n  return {\n    allOptions,\n    visible,\n    selectedSet,\n    optionOf,\n    labelOf,\n    remember,\n    activeIndex,\n    optionId,\n    highlightFirst,\n    highlightLast,\n    highlightSelected,\n    move,\n    page,\n    hover,\n    blocks,\n    measureRow: virtualList.measure,\n  }\n}\n"],"mappings":";;;;AAqBA,IAAM,KAAkB,MAA4C,aAAa,GAC3E,KAAsB,MAAgD,eAAe;AAO3F,SAAgB,EAAY,GAAgC,GAAgC;CAE1F,OADI,IAAiB,MAAM,QAAQ,CAAK,IAAI,IAAQ,CAAC,IAC9C,CAAC,MAAM,QAAQ,CAAK,KAAK,MAAU,KAAK,CAAC,CAAK,IAAI,CAAC;AAC5D;AAqFA,IAAM,IAA6C;CAAE,IAAI;CAAI,IAAI;CAAI,IAAI;AAAG;AAwC5E,SAAgB,EAAW,GAAkC;CAG3D,IAAM,IAAa,QACjB,EAAQ,MAAM,CAAC,CAAC,SAAS,MACnB,EAAmB,CAAI,IAAU,CAAC,IAC/B,EAAe,CAAI,IAAI,EAAK,UAAU,CAAC,CAAI,CACnD,CACH,GAEM,IAAU,QAAe,EAAQ,SAAS,EAAW,KAAK,KAAK,EAAW,KAAK,GAE/E,IAAc,QAAe,IAAI,IAAI,EAAQ,SAAS,CAAC,CAAC,GAOxD,IAAc,kBAAS,IAAI,IAA8B,CAAC;CAChE,QAAkB;EAChB,IAAM,IAAS,EAAY;EAC3B,KAAK,IAAM,KAAU,EAAW,OAC9B,AAAI,EAAO,IAAI,EAAO,KAAK,KAAG,EAAY,IAAI,EAAO,OAAO,CAAM;EAIpE,KAAK,IAAM,KAAS,EAAY,KAAK,GAAG,AAAK,EAAO,IAAI,CAAK,KAAG,EAAY,OAAO,CAAK;CAC1F,CAAC;CAKD,IAAM,IAAiB,QAAe;EACpC,IAAM,oBAAM,IAAI,IAA8B;EAC9C,KAAK,IAAM,KAAU,EAAW,OAAO,AAAK,EAAI,IAAI,EAAO,KAAK,KAAG,EAAI,IAAI,EAAO,OAAO,CAAM;EAC/F,OAAO;CACT,CAAC;CAOD,SAAS,EAAS,GAAkB;EAClC,OAAO,EAAe,MAAM,IAAI,CAAK,KAAK,EAAY,IAAI,CAAK;CACjE;CAEA,IAAM,KAAW,MAAqB,EAAS,CAAK,CAAC,EAAE,SAAS,OAAO,CAAK,GAEtE,KAAY,MAA0B,KAAK,EAAY,IAAI,EAAO,OAAO,CAAM,GAE/E,IAAc,EAAI,EAAE,GAOpB,IAAc,QAAe,IAAI,IAAI,EAAW,MAAM,KAAK,GAAQ,MAAM,CAAC,GAAQ,CAAC,CAAC,CAAC,CAAC,GACtF,KAAY,MAAkB;EAClC,IAAM,IAAS,EAAQ,MAAM;EAC7B,OAAO,GAAG,EAAQ,GAAG,UAAU,IAAS,EAAY,MAAM,IAAI,CAAM,IAAI;CAC1E,GAEM,UAAqB,EAAQ,MAAM,WAAW,MAAM,CAAC,EAAE,QAAQ;CAErE,SAAS,IAAiB;EACxB,EAAY,QAAQ,EAAa;CACnC;CAEA,SAAS,IAAgB;EACvB,IAAM,IAAO,EAAQ,OACjB,IAAI,EAAK,SAAS;EACtB,OAAO,KAAK,KAAK,EAAK,EAAE,EAAE,WAAU;EACpC,EAAY,QAAQ;CACtB;CAEA,SAAS,IAAoB;EAC3B,IAAM,IAAS,EAAQ,MAAM,WAAW,MAAM,CAAC,EAAE,YAAY,EAAY,MAAM,IAAI,EAAE,KAAK,CAAC;EAC3F,EAAY,QAAQ,KAAU,IAAI,IAAS,EAAa;CAC1D;CAGA,SAAS,EAAK,GAAe;EAC3B,IAAM,IAAO,EAAQ;EACrB,IAAI,EAAK,WAAW,GAAG;EAGvB,IAAI,IAAI,EAAY,QAAQ,KAAK,IAAQ,IAAI,IAAI,EAAY;EAC7D,KAAK,IAAI,IAAO,GAAG,IAAO,EAAK,WAC7B,KAAK,IAAI,IAAQ,EAAK,UAAU,EAAK,QAChC,EAAK,EAAE,EAAE,WAFuB;EAIvC,EAAY,QAAQ;CACtB;CAGA,SAAS,EAAK,GAAe;EAC3B,IAAM,IAAO,EAAQ,OACf,IAAS,EAAM,EAAY,QAAQ,GAAO,GAAG,EAAK,SAAS,CAAC,GAC5D,IAAO,KAAK,KAAK,CAAK;EAE5B,KAAK,IAAM,KAAO,CAAC,GAAM,CAAC,CAAI,GAC5B,KAAK,IAAI,IAAI,GAAQ,KAAK,KAAK,IAAI,EAAK,QAAQ,KAAK,GACnD,IAAI,CAAC,EAAK,EAAE,EAAE,UAAU;GACtB,EAAY,QAAQ;GACpB;EACF;CAGN;CAEA,SAAS,EAAM,GAA4B;EACzC,AAAK,EAAI,OAAO,aAAU,EAAY,QAAQ,EAAI;CACpD;CAMA,EAAM,IAAU,MAAS;EAClB,EAAQ,KAAK,MACd,EAAY,QAAQ,KAAK,EAAY,SAAS,EAAK,WAAQ,EAAe;CAChF,CAAC;CAKD,IAAM,IAAW,QAA+B;EAC9C,IAAM,IAAO,IAAI,IAAI,EAAQ,KAAK,GAC9B,IAAO,GAEL,KAAW,GAAuB,MACjC,EAAK,IAAI,CAAM,IACb;GAAE,MAAM;GAAU,KAAK,UAAU;GAAO;GAAQ,OAAO;EAAO,IADvC,MAI1B,IAAwB,CAAC,GAI3B,IAAkC;EAEtC,KAAK,IAAM,CAAC,GAAG,MAAS,EAAQ,MAAM,CAAC,CAAC,QAAQ,GAAG;GACjD,IAAI,EAAmB,CAAI,GAAG;IAC5B,AAAI,EAAM,SAAS,MAAG,IAAmB,OAAO;IAChD;GACF;GAEA,IAAI;GACJ,IAAI,EAAe,CAAI,GAAG;IACxB,IAAM,IAAU,EAAK,QAClB,KAAK,GAAQ,MAAM,EAAQ,GAAQ,GAAG,EAAE,GAAG,GAAG,CAAC,CAAC,CAChD,QAAQ,MAA0C,MAAU,IAAI;IAGnE,IACE,EAAQ,SAAS,IACb;KACE,MAAM;KACN,KAAK,SAAS;KACd,IAAI,GAAG,EAAQ,GAAG,SAAS;KAC3B,OAAO,EAAK;KACZ,SAAS;IACX,IACA;GACR,OACE,IAAO,EAAQ,GAAM,OAAO,CAAC,CAAC;GAE3B,MAED,MAAqB,SACvB,EAAM,KAAK;IAAE,MAAM;IAAa,KAAK;GAAiB,CAAC,GACvD,IAAmB,OAErB,EAAM,KAAK,CAAI;EACjB;EAEA,OAAO;CACT,CAAC,GAEK,IAAO,QAAe;EAC1B,IAAM,IAAkB,CAAC,GACnB,oBAAS,IAAI,IAAoB,GAEjC,IAAwB,CAAC,GACzB,IAAQ,EAAS,MAAM,QAAQ,MAAS,EAAK,SAAS,QAAQ,CAAC,CAAC,QAClE,IAAY;EAChB,KAAK,IAAM,KAAQ,EAAS,OAC1B,IAAI,EAAK,SAAS,aAAa,EAAK,KAAK,CAAI;OACxC,IAAI,EAAK,SAAS,UAErB,AADA,EAAY,EAAK,SAAS,EAAK,QAC/B,EAAK,KAAK;GAAE,GAAG;GAAM,KAAK;GAAO,UAAU,EAAE;EAAU,CAAC;OACnD;GAEL,AADA,EAAO,IAAI,EAAK,KAAK,EAAK,KAAK,GAC/B,EAAK,KAAK;IACR,MAAM;IACN,KAAK,WAAW,EAAK;IACrB,IAAI,EAAK;IACT,OAAO,EAAK;IACZ,OAAO,EAAK;GACd,CAAC;GACD,KAAK,IAAM,CAAC,GAAG,MAAW,EAAK,QAAQ,QAAQ,GAE7C,AADA,EAAY,EAAO,SAAS,EAAK,QACjC,EAAK,KAAK;IAAE,GAAG;IAAQ,OAAO,EAAK;IAAK,KAAK,EAAK,QAAQ;IAAQ,UAAU,IAAI;GAAE,CAAC;EAEvF;EAEF,OAAO;GAAE;GAAM;GAAQ;EAAY;CACrC,CAAC,GAKK,IAAc,EAAe;EACjC,UAAU,QAAgB,EAAQ,QAAQ,IAAI,EAAQ,QAAQ,IAAI,IAAK;EACvE,aAAa,EAAK,MAAM,KAAK;EAC7B,MAAM,MAAU,EAAK,MAAM,KAAK,EAAM,EAAE;EACxC,gBAAgB,EAAc,EAAQ,KAAK,MAAM,EAAQ,QAAQ,IAAI,IAAI;EACzE,gBAAgB;EAChB,oBAAoB;EACpB,cAAc;GACZ,IAAM,IAAM,EAAK,MAAM,YAAY,EAAY;GAC/C,OAAO,MAAQ,KAAA,IAAY,CAAC,IAAI,CAAC,CAAG;EACtC;CACF,CAAC;CAED,SAAS,EAAU,GAAmB,GAA8B;EAClE,IAAM,IAAS,EAAM,UAAU,EAAY,OACrC,IAAW,EAAY,MAAM,IAAI,EAAM,OAAO,KAAK,GAInD,IAAS,EAAQ,QAAQ,IAC3B;GAAE,gBAAgB,EAAQ,UAAU,IAAI,KAAK,EAAM;GAAK,iBAAiB,EAAM;EAAS,IACxF,CAAC;EACL,OAAO;GACL,GAAG;GACH;GACA,KAAK;IACH,IAAI,EAAS,EAAM,KAAK;IACxB,MAAM,EAAM,OAAO;IACnB;IACA;IACA,UAAU,EAAM,OAAO;IACvB,GAAG;GACL;GACA,MAAM;IAAE,QAAQ,EAAM;IAAQ,OAAO,EAAM;IAAO;IAAQ;GAAS;EACrE;CACF;CAMA,IAAM,IAAS,QAA+B;EAC5C,IAAM,EAAE,SAAM,cAAW,EAAK,OACxB,IAA6B,EAAQ,QAAQ,IAC/C,EAAY,SAAS,QACrB,EAAK,KAAK,GAAG,OAAW;GAAE,MAAM;GAAO;EAAM,EAAE,GAC7C,KAAW,MAAwC;GACvD,IAAM,IAAM,GAAS,SAAS,QAAQ,EAAK,EAAQ,SAAS,KAAA;GAC5D,OAAO,KAAO,EAAI,SAAS,cAAc,EAAI,QAAQ,KAAA;EACvD,GAEM,IAAsB,CAAC,GACzB;EACJ,KAAK,IAAM,CAAC,GAAG,MAAY,EAAS,QAAQ,GAAG;GAC7C,IAAI,GACA;GACJ,IAAI,EAAQ,SAAS,UAAU;IAC7B,IAAQ;KAAE,MAAM;KAAU,KAAK,EAAQ;KAAK,MAAM,EAAQ;IAAK;IAE/D,IAAM,IAAS,EAAQ,EAAS,IAAI,EAAE;IACtC,IAAQ,MAAW,EAAQ,EAAS,IAAI,EAAE,IAAI,IAAS,KAAA;GACzD,OAAO;IACL,IAAM,IAAM,EAAK,EAAQ;IAGzB,AAFA,IACE,EAAI,SAAS,WAAW,EAAU,GAAK,EAAQ,KAAK,IAAI;KAAE,GAAG;KAAK,IAAI,EAAQ;IAAM,GACtF,IAAQ,EAAQ,CAAO;GACzB;GACA,IAAI,MAAU,KAAA,GAAW;IAEvB,AADA,IAAO,KAAA,GACP,EAAI,KAAK,CAAK;IACd;GACF;GAMA,AALI,GAAM,QAAQ,MAChB,IAAO;IAAE,MAAM;IAAS,KAAK;IAAO,OAAO,EAAO,IAAI,CAAK;IAAI,UAAU,CAAC;GAAE,GAC5E,EAAI,KAAK,CAAI,IAEX,EAAM,SAAS,cAAW,EAAK,UAAU,EAAM,KACnD,EAAK,SAAS,KAAK,CAAK;EAC1B;EACA,OAAO;CACT,CAAC;CAqBD,OAfA,EACE,IACC,MAAU;EACL,UAAQ,IACZ;OAAI,EAAQ,QAAQ,GAAG;IACrB,IAAM,IAAM,EAAK,MAAM,YAAY;IACnC,AAAI,MAAQ,KAAA,KAAW,EAAiB,cAAc,CAAG;IACzD;GACF;GAEA,SAAS,eAAe,EAAS,CAAK,CAAC,CAAC,EAAE,iBAAiB,EAAE,OAAO,UAAU,CAAC;EAF/E;CAGF,GACA,EAAE,OAAO,OAAO,CAClB,GAEO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YAAY,EAAY;CAC1B;AACF"}

package/dist/composables/useModalDialog.d.ts

@@ -0,0 +1,28 @@
+import { Ref } from 'vue';
+/**
+ * The bridge between a `v-model:open` and a native modal `<dialog>`, shared by VDialog and
+ * VDrawer. Native showModal supplies top-layer placement and modal focus; this bridges the model
+ * to the imperative open and close, and provides guarded dismissal where closedBy is absent.
+ *
+ * The element is rendered only while it is needed. With `exitTransition`, it outlives its
+ * closing until the transitions it runs on the way out have finished.
+ */
+export declare function useModalDialog(open: Ref<boolean>, options: {
+    persistentBackdrop: () => boolean;
+    persistentEscape: () => boolean;
+    exitTransition?: boolean;
+}): {
+    dialogEl: Ref<HTMLDialogElement | null, HTMLDialogElement | null>;
+    rendered: import('vue').ComputedRef<boolean>;
+    rootAttrs: import('vue').ComputedRef<{
+        closedby: string;
+        class?: import('vue').ClassValue;
+        style?: import('vue').StyleValue;
+    }>;
+    show: () => Promise<void>;
+    close: () => void;
+    onClose: (event: Event) => void;
+    onCancel: (event: Event) => void;
+    onPointerdown: (event: PointerEvent) => void;
+    onBackdropClick: (event: MouseEvent) => void;
+};

package/dist/composables/useModalDialog.js

@@ -0,0 +1,60 @@
+import { computed as e, nextTick as t, onBeforeUnmount as n, ref as r, useAttrs as i, watch as a } from "vue";
+//#region src/composables/useModalDialog.ts
+function o(o, s) {
+	let c = i(), l = r(null), u = r(!1), d = e(() => o.value || u.value), f = e(() => s.persistentBackdrop() ? s.persistentEscape() ? "none" : "closerequest" : "any"), p = e(() => ({
+		...c,
+		closedby: f.value
+	}));
+	function m() {
+		return o.value = !0, t();
+	}
+	function h() {
+		l.value?.close();
+	}
+	a(o, (e) => {
+		e ? l.value && !l.value.open && l.value.showModal() : l.value?.close();
+	}), a(l, (e) => e?.showModal(), { flush: "post" });
+	let g = 0;
+	async function _(e) {
+		let t = ++g;
+		u.value = !0, await Promise.allSettled(e.getAnimations().map((e) => e.finished)), t === g && !o.value && (u.value = !1);
+	}
+	function v(e) {
+		let t = l.value;
+		!t || e.target !== t || (o.value = !1, s.exitTransition && _(t));
+	}
+	n(() => {
+		o.value &&= !1;
+	});
+	let y = () => !("closedBy" in HTMLDialogElement.prototype);
+	function b(e) {
+		y() && f.value === "none" && e.preventDefault();
+	}
+	function x(e) {
+		let t = l.value?.getBoundingClientRect();
+		return t ? e.clientX < t.left || e.clientX > t.right || e.clientY < t.top || e.clientY > t.bottom : !1;
+	}
+	let S = !1;
+	function C(e) {
+		S = y() && e.target === l.value && x(e);
+	}
+	function w(e) {
+		let t = S && e.target === l.value && x(e);
+		S = !1, t && y() && f.value === "any" && h();
+	}
+	return {
+		dialogEl: l,
+		rendered: d,
+		rootAttrs: p,
+		show: m,
+		close: h,
+		onClose: v,
+		onCancel: b,
+		onPointerdown: C,
+		onBackdropClick: w
+	};
+}
+//#endregion
+export { o as useModalDialog };
+
+//# sourceMappingURL=useModalDialog.js.map

package/dist/composables/useModalDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useModalDialog.js","names":[],"sources":["../../src/composables/useModalDialog.ts"],"sourcesContent":["import { computed, nextTick, onBeforeUnmount, ref, useAttrs, watch } from 'vue'\nimport type { Ref } from 'vue'\n\n// @core\n/**\n * The bridge between a `v-model:open` and a native modal `<dialog>`, shared by VDialog and\n * VDrawer. Native showModal supplies top-layer placement and modal focus; this bridges the model\n * to the imperative open and close, and provides guarded dismissal where closedBy is absent.\n *\n * The element is rendered only while it is needed. With `exitTransition`, it outlives its\n * closing until the transitions it runs on the way out have finished.\n */\nexport function useModalDialog(\n  open: Ref<boolean>,\n  options: {\n    persistentBackdrop: () => boolean\n    persistentEscape: () => boolean\n    exitTransition?: boolean\n  },\n) {\n  const attrs = useAttrs()\n  const dialogEl = ref<HTMLDialogElement | null>(null)\n\n  /** Whether the `<dialog>` is in the page: while open, and through its exit if it has one. */\n  const leaving = ref(false)\n  const rendered = computed(() => open.value || leaving.value)\n\n  /**\n   * Which dismissals the browser itself accepts, declared as an attribute rather than handled in\n   * code: everything, Escape alone, or nothing. One combination cannot be expressed that way; a\n   * click outside allowed while Escape is not; and it falls back to allowing both.\n   */\n  const closedby = computed(() =>\n    options.persistentBackdrop() ? (options.persistentEscape() ? 'none' : 'closerequest') : 'any',\n  )\n\n  // @fallback\n  // The `closedby` attribute is newer than the type definitions shipped with TypeScript, so\n  // writing it directly in the template would be reported as an unknown attribute. Passing it\n  // inside a bound object goes through the same path as any forwarded attribute, which is not\n  // checked element by element.\n  const rootAttrs = computed(() => ({ ...attrs, closedby: closedby.value }))\n\n  function show(): Promise<void> {\n    open.value = true\n    return nextTick()\n  }\n\n  function close() {\n    // Closing the element is enough: the browser then fires its own close event, which puts the\n    // model back in step below.\n    dialogEl.value?.close()\n  }\n\n  // Close before v-if removes the element so the browser restores the invoker's focus.\n  watch(open, (value) => {\n    if (!value) dialogEl.value?.close()\n    // Reopened during its exit, the same element is shown again and its transitions reverse.\n    else if (dialogEl.value && !dialogEl.value.open) dialogEl.value.showModal()\n  })\n\n  // @ssr\n  // Template refs become available after mounting, including when hydrating an open dialog.\n  watch(dialogEl, (dialog) => dialog?.showModal(), { flush: 'post' })\n\n  /*\n   * Each closing is counted, so that the end of an exit interrupted by a reopening, then\n   * followed by a second closing, does not remove the element in the middle of the second exit.\n   */\n  let closings = 0\n  async function leave(dialog: HTMLDialogElement) {\n    const closing = ++closings\n    leaving.value = true\n    // Reading the animations flushes the style change the closing made, so the exit\n    // transitions have already started. A reversed or cancelled one rejects: either way it is\n    // over.\n    await Promise.allSettled(dialog.getAnimations().map((animation) => animation.finished))\n    if (closing === closings && !open.value) leaving.value = false\n  }\n\n  // Ignore close events from replaced elements: the queued event from a quick close-and-reopen\n  // must not close the new dialog.\n  function onClose(event: Event) {\n    const dialog = dialogEl.value\n    if (!dialog || event.target !== dialog) return\n    open.value = false\n    if (options.exitTransition) void leave(dialog)\n  }\n\n  // @core\n  // An open dialog removed with its parent (a `v-if`, a route change) runs no close steps,\n  // so no close event would come: the model is handed back closed here, or it stayed `true`\n  // and the dialog reopened by itself the next time its parent was shown.\n  onBeforeUnmount(() => {\n    if (open.value) open.value = false\n  })\n\n  // @fallback\n  /*\n   * `closedby` is what applies `persistentBackdrop` and `persistentEscape`, and Safari does not\n   * implement it: there Escape always closes and the backdrop never does. The two halves are\n   * rebuilt below, and only where the attribute is unknown, so a browser that has it is never\n   * second-guessed.\n   */\n  const closedbyUnsupported = () => !('closedBy' in HTMLDialogElement.prototype)\n\n  function onCancel(event: Event) {\n    if (closedbyUnsupported() && closedby.value === 'none') event.preventDefault()\n  }\n\n  /**\n   * Whether a point lies outside the dialog's box, which is where the backdrop is: a click on\n   * the `::backdrop` is dispatched to the dialog element itself.\n   */\n  function outsideBox(event: MouseEvent) {\n    const box = dialogEl.value?.getBoundingClientRect()\n    if (!box) return false\n    return (\n      event.clientX < box.left ||\n      event.clientX > box.right ||\n      event.clientY < box.top ||\n      event.clientY > box.bottom\n    )\n  }\n\n  // A press that STARTED inside and ended on the backdrop (a text selection dragged past the\n  // edge) is not a click on the backdrop, so the press is remembered, not only the release.\n  let pressedOnBackdrop = false\n  function onPointerdown(event: PointerEvent) {\n    pressedOnBackdrop =\n      closedbyUnsupported() && event.target === dialogEl.value && outsideBox(event)\n  }\n  function onBackdropClick(event: MouseEvent) {\n    const onBackdrop = pressedOnBackdrop && event.target === dialogEl.value && outsideBox(event)\n    pressedOnBackdrop = false\n    if (onBackdrop && closedbyUnsupported() && closedby.value === 'any') close()\n  }\n\n  return {\n    dialogEl,\n    rendered,\n    rootAttrs,\n    show,\n    close,\n    onClose,\n    onCancel,\n    onPointerdown,\n    onBackdropClick,\n  }\n}\n"],"mappings":";;AAYA,SAAgB,EACd,GACA,GAKA;CACA,IAAM,IAAQ,EAAS,GACjB,IAAW,EAA8B,IAAI,GAG7C,IAAU,EAAI,EAAK,GACnB,IAAW,QAAe,EAAK,SAAS,EAAQ,KAAK,GAOrD,IAAW,QACf,EAAQ,mBAAmB,IAAK,EAAQ,iBAAiB,IAAI,SAAS,iBAAkB,KAC1F,GAOM,IAAY,SAAgB;EAAE,GAAG;EAAO,UAAU,EAAS;CAAM,EAAE;CAEzE,SAAS,IAAsB;EAE7B,OADA,EAAK,QAAQ,IACN,EAAS;CAClB;CAEA,SAAS,IAAQ;EAGf,EAAS,OAAO,MAAM;CACxB;CAWA,AARA,EAAM,IAAO,MAAU;EACrB,AAAK,IAEI,EAAS,SAAS,CAAC,EAAS,MAAM,QAAM,EAAS,MAAM,UAAU,IAF9D,EAAS,OAAO,MAAM;CAGpC,CAAC,GAID,EAAM,IAAW,MAAW,GAAQ,UAAU,GAAG,EAAE,OAAO,OAAO,CAAC;CAMlE,IAAI,IAAW;CACf,eAAe,EAAM,GAA2B;EAC9C,IAAM,IAAU,EAAE;EAMlB,AALA,EAAQ,QAAQ,IAIhB,MAAM,QAAQ,WAAW,EAAO,cAAc,CAAC,CAAC,KAAK,MAAc,EAAU,QAAQ,CAAC,GAClF,MAAY,KAAY,CAAC,EAAK,UAAO,EAAQ,QAAQ;CAC3D;CAIA,SAAS,EAAQ,GAAc;EAC7B,IAAM,IAAS,EAAS;EACpB,CAAC,KAAU,EAAM,WAAW,MAChC,EAAK,QAAQ,IACT,EAAQ,kBAAgB,EAAW,CAAM;CAC/C;CAMA,QAAsB;EACpB,AAAgB,EAAK,UAAQ;CAC/B,CAAC;CASD,IAAM,UAA4B,EAAE,cAAc,kBAAkB;CAEpE,SAAS,EAAS,GAAc;EAC9B,AAAI,EAAoB,KAAK,EAAS,UAAU,UAAQ,EAAM,eAAe;CAC/E;CAMA,SAAS,EAAW,GAAmB;EACrC,IAAM,IAAM,EAAS,OAAO,sBAAsB;EAElD,OADK,IAEH,EAAM,UAAU,EAAI,QACpB,EAAM,UAAU,EAAI,SACpB,EAAM,UAAU,EAAI,OACpB,EAAM,UAAU,EAAI,SALL;CAOnB;CAIA,IAAI,IAAoB;CACxB,SAAS,EAAc,GAAqB;EAC1C,IACE,EAAoB,KAAK,EAAM,WAAW,EAAS,SAAS,EAAW,CAAK;CAChF;CACA,SAAS,EAAgB,GAAmB;EAC1C,IAAM,IAAa,KAAqB,EAAM,WAAW,EAAS,SAAS,EAAW,CAAK;EAE3F,AADA,IAAoB,IAChB,KAAc,EAAoB,KAAK,EAAS,UAAU,SAAO,EAAM;CAC7E;CAEA,OAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;AACF"}

package/dist/composables/useRootAttrs.d.ts

@@ -5,9 +5,8 @@ import { ComputedRef, StyleValue } from 'vue';
  */
 type ClassBinding = false | null | undefined | string | Record<string, unknown> | ClassBinding[];
 /**
- * The attribute split of the wrapper-root pattern, for components whose root is only a
- * container: VInput, VTextarea, VTabs, VCombobox, VDataTable, VDateInput, VTimeInput, VSlider,
- * and the three choice controls, whose root holds the <label> and its hint.
+ * The attribute split of the wrapper-root pattern: `class` and `style` stay on a root that is
+ * only a container, and every other attribute goes to the functional element.
  */
 export declare function useRootAttrs(): {
     attrs: Record<string, unknown>;

package/dist/composables/useRootAttrs.js.map

@@ -1 +1 @@
-{"version":3,"file":"useRootAttrs.js","names":[],"sources":["../../src/composables/useRootAttrs.ts"],"sourcesContent":["import { computed, useAttrs, type ComputedRef, type StyleValue } from 'vue'\n\n/**\n * Redeclared locally: `@vue/runtime-dom` exports this as `ClassValue` and the `vue` package\n * does not re-export it. Typed `unknown` instead, a template refuses to bind it.\n */\ntype ClassBinding = false | null | undefined | string | Record<string, unknown> | ClassBinding[]\n\n// @a11y\n/**\n * The attribute split of the wrapper-root pattern, for components whose root is only a\n * container: VInput, VTextarea, VTabs, VCombobox, VDataTable, VDateInput, VTimeInput, VSlider,\n * and the three choice controls, whose root holds the <label> and its hint.\n */\nexport function useRootAttrs(): {\n  attrs: Record<string, unknown>\n  rootClass: ComputedRef<ClassBinding>\n  rootStyle: ComputedRef<StyleValue>\n  forwardedAttrs: ComputedRef<Record<string, unknown>>\n} {\n  const attrs = useAttrs()\n  // Read the styling keys even when absent: enumerating an empty attrs object tracks no reads.\n  const split = computed(() => {\n    const { class: rootClass, style: rootStyle, ...forwardedAttrs } = attrs\n    return { rootClass, rootStyle, forwardedAttrs }\n  })\n\n  return {\n    attrs,\n    rootClass: computed(() => split.value.rootClass as ClassBinding),\n    rootStyle: computed(() => split.value.rootStyle as StyleValue),\n    forwardedAttrs: computed(() => split.value.forwardedAttrs),\n  }\n}\n"],"mappings":";;AAcA,SAAgB,IAKd;CACA,IAAM,IAAQ,EAAS,GAEjB,IAAQ,QAAe;EAC3B,IAAM,EAAE,OAAO,GAAW,OAAO,GAAW,GAAG,MAAmB;EAClE,OAAO;GAAE;GAAW;GAAW;EAAe;CAChD,CAAC;CAED,OAAO;EACL;EACA,WAAW,QAAe,EAAM,MAAM,SAAyB;EAC/D,WAAW,QAAe,EAAM,MAAM,SAAuB;EAC7D,gBAAgB,QAAe,EAAM,MAAM,cAAc;CAC3D;AACF"}
+{"version":3,"file":"useRootAttrs.js","names":[],"sources":["../../src/composables/useRootAttrs.ts"],"sourcesContent":["import { computed, useAttrs, type ComputedRef, type StyleValue } from 'vue'\n\n/**\n * Redeclared locally: `@vue/runtime-dom` exports this as `ClassValue` and the `vue` package\n * does not re-export it. Typed `unknown` instead, a template refuses to bind it.\n */\ntype ClassBinding = false | null | undefined | string | Record<string, unknown> | ClassBinding[]\n\n// @a11y\n/**\n * The attribute split of the wrapper-root pattern: `class` and `style` stay on a root that is\n * only a container, and every other attribute goes to the functional element.\n */\nexport function useRootAttrs(): {\n  attrs: Record<string, unknown>\n  rootClass: ComputedRef<ClassBinding>\n  rootStyle: ComputedRef<StyleValue>\n  forwardedAttrs: ComputedRef<Record<string, unknown>>\n} {\n  const attrs = useAttrs()\n  // Read the styling keys even when absent: enumerating an empty attrs object tracks no reads.\n  const split = computed(() => {\n    const { class: rootClass, style: rootStyle, ...forwardedAttrs } = attrs\n    return { rootClass, rootStyle, forwardedAttrs }\n  })\n\n  return {\n    attrs,\n    rootClass: computed(() => split.value.rootClass as ClassBinding),\n    rootStyle: computed(() => split.value.rootStyle as StyleValue),\n    forwardedAttrs: computed(() => split.value.forwardedAttrs),\n  }\n}\n"],"mappings":";;AAaA,SAAgB,IAKd;CACA,IAAM,IAAQ,EAAS,GAEjB,IAAQ,QAAe;EAC3B,IAAM,EAAE,OAAO,GAAW,OAAO,GAAW,GAAG,MAAmB;EAClE,OAAO;GAAE;GAAW;GAAW;EAAe;CAChD,CAAC;CAED,OAAO;EACL;EACA,WAAW,QAAe,EAAM,MAAM,SAAyB;EAC/D,WAAW,QAAe,EAAM,MAAM,SAAuB;EAC7D,gBAAgB,QAAe,EAAM,MAAM,cAAc;CAC3D;AACF"}

package/dist/composables/useVirtualList.d.ts

@@ -0,0 +1,46 @@
+import { ComponentPublicInstance, ComputedRef, Ref } from 'vue';
+export interface VirtualListOptions {
+    /** The element that scrolls. Null disables the windowing: every row up to `initialCount`. */
+    scrollEl: Readonly<Ref<HTMLElement | null>>;
+    /** How many rows there are. */
+    count: () => number;
+    /** A stable identity for a row, under which its measured size is remembered. */
+    key: (index: number) => unknown;
+    /** The height assumed for a row not measured yet, in pixels. */
+    itemSize: () => number;
+    /** How many rows to render beyond each edge of the viewport. */
+    overscan: () => number;
+    /** How many rows to render before the container is measured: on the server and at hydration. */
+    initialCount: () => number;
+    /** Rows kept rendered wherever the scroll is: the active option, the row holding the focus. */
+    pinned?: () => readonly number[];
+    /**
+     * The element the rows sit in, when content comes before it inside the scroll container: a
+     * table's caption and heading. Its distance from the top of the scrolled content replaces the
+     * container's top padding.
+     */
+    listEl?: Readonly<Ref<HTMLElement | null>>;
+    /**
+     * The height a sticky element covers at the top of the viewport, a table's frozen heading:
+     * an alignment keeps rows out from under it. The container's top padding otherwise.
+     */
+    insetStart?: () => number;
+}
+/** A row to render, or a block of empty space standing for the rows left out. */
+export type VirtualSegment = {
+    type: 'row';
+    index: number;
+} | {
+    type: 'spacer';
+    key: string;
+    size: number;
+};
+export interface VirtualList {
+    /** What to render, in order. */
+    segments: ComputedRef<VirtualSegment[]>;
+    /** The template ref of a rendered row: `:ref="(el) => measure(el, index)"`. */
+    measure: (target: Element | ComponentPublicInstance | null, index: number) => void;
+    /** Scrolls the container until the row is in view, rendering it first if it is not. */
+    scrollToIndex: (index: number, align?: ScrollLogicalPosition) => Promise<void>;
+}
+export declare function useVirtualList(options: VirtualListOptions): VirtualList;

package/dist/composables/useVirtualList.js

@@ -0,0 +1,145 @@
+import { computed as e, nextTick as t, onBeforeUnmount as n, ref as r, watch as i } from "vue";
+//#region src/composables/useVirtualList.ts
+function a(a) {
+	let o = /* @__PURE__ */ new Map(), s = r(0), c = r(0), l = r(0), u = r(0), d = r(0), f = r(!1), p = e(() => {
+		s.value;
+		let e = a.count(), t = a.itemSize() + d.value, n = new Float64Array(e + 1);
+		for (let r = 0; r < e; r++) {
+			let e = o.size > 0 ? o.get(a.key(r)) : void 0;
+			n[r + 1] = n[r] + (e ?? t);
+		}
+		return n;
+	});
+	function m(e) {
+		let t = p.value, n = 0, r = t.length - 2;
+		for (; n < r;) {
+			let i = n + r + 1 >> 1;
+			t[i] <= e ? n = i : r = i - 1;
+		}
+		return Math.max(0, n);
+	}
+	let h = e(() => f.value ? Math.max(0, m(c.value - u.value) - a.overscan()) : 0), g = e(() => {
+		let e = a.count();
+		if (!f.value) return Math.min(e, a.initialCount());
+		let t = m(c.value - u.value + l.value);
+		return Math.min(e, t + 1 + a.overscan());
+	}), _ = e(() => {
+		let e = a.count(), t = p.value, n = h.value, r = g.value, i = [...new Set(a.pinned?.() ?? [])].filter((t) => t >= 0 && t < e && (t < n || t >= r)).sort((e, t) => e - t), o = i.filter((e) => e < n);
+		for (let e = n; e < r; e++) o.push(e);
+		o.push(...i.filter((e) => e >= r));
+		let s = [], c = 0;
+		for (let e of o) e > c && s.push(v(c, t[e] - t[c])), s.push({
+			type: "row",
+			index: e
+		}), c = e + 1;
+		return c < e && s.push(v(c, t[e] - t[c])), s;
+	});
+	function v(e, t) {
+		return {
+			type: "spacer",
+			key: `spacer:${e}`,
+			size: Math.max(0, t - d.value)
+		};
+	}
+	let y = /* @__PURE__ */ new Set(), b = /* @__PURE__ */ new WeakMap(), x;
+	function S(e, t) {
+		let n = e && "$el" in e ? e.$el : e;
+		n instanceof HTMLElement && (b.set(n, t), !y.has(n) && (y.add(n), x?.observe(n)));
+	}
+	function C(e, t) {
+		let n = b.get(e);
+		if (n === void 0 || n >= a.count()) return 0;
+		let r = a.key(n), i = t + d.value, s = o.get(r) ?? a.itemSize() + d.value;
+		return Math.abs(i - s) < .5 ? 0 : (o.set(r, i), i - s);
+	}
+	function w(e) {
+		let t = getComputedStyle(e), n = a.listEl?.value;
+		l.value = e.clientHeight, u.value = n ? T(e, n) : parseFloat(t.paddingTop) || 0, d.value = parseFloat(t.rowGap) || 0;
+	}
+	function T(e, t) {
+		return (t.getBoundingClientRect().top - e.getBoundingClientRect().top) / P(e) - e.clientTop + e.scrollTop;
+	}
+	let E = 0, D = !1, O = !1;
+	function k() {
+		E ||= requestAnimationFrame(j);
+	}
+	function A() {
+		E && cancelAnimationFrame(E), E = 0, D = O = !1;
+	}
+	function j() {
+		E = 0;
+		let e = a.scrollEl.value;
+		e && (D && w(e), c.value = e.scrollTop), O && s.value++, D = O = !1;
+	}
+	function M(e) {
+		let t = a.scrollEl.value;
+		if (!t || t.getClientRects().length === 0) return;
+		let n = p.value, r = t.scrollTop - u.value, i = 0;
+		for (let o of e) {
+			if (o.target === t || o.target === a.listEl?.value) {
+				D = !0;
+				continue;
+			}
+			if (!o.target.isConnected) continue;
+			let e = b.get(o.target), s = C(o.target, o.borderBoxSize[0]?.blockSize ?? 0);
+			s !== 0 && (O = !0, e !== void 0 && n[e] < r && (i += s));
+		}
+		i !== 0 && (t.scrollTop += i), (D || O || i !== 0) && k();
+	}
+	function N(e) {
+		let t = P(e), n = !1;
+		for (let e of y) e.isConnected && C(e, e.getBoundingClientRect().height / t) !== 0 && (n = !0);
+		n && s.value++;
+	}
+	function P(e) {
+		let t = e.offsetHeight;
+		return t > 0 && e.getBoundingClientRect().height / t || 1;
+	}
+	function F(e) {
+		for (let t of y) if (t.isConnected && b.get(t) === e) return t;
+	}
+	let I = (e) => {
+		c.value = e.currentTarget.scrollTop;
+	};
+	i(a.scrollEl, (e, t, n) => {
+		if (f.value = !!e, e) {
+			if (w(e), c.value = e.scrollTop, e.addEventListener("scroll", I, { passive: !0 }), typeof ResizeObserver < "u") {
+				x = new ResizeObserver(M), x.observe(e), a.listEl?.value && x.observe(a.listEl.value);
+				for (let e of y) x.observe(e);
+			}
+			n(() => {
+				e.removeEventListener("scroll", I), x?.disconnect(), x = void 0, A();
+			});
+		}
+	}, {
+		flush: "post",
+		immediate: !0
+	}), i(_, () => {
+		for (let e of y) e.isConnected || (x?.unobserve(e), y.delete(e));
+	}, { flush: "post" }), n(() => {
+		y.clear(), A();
+	});
+	async function L(e, n = "nearest") {
+		let r = a.scrollEl.value;
+		if (!r || e < 0 || e >= a.count()) return;
+		if (!F(e)) {
+			let i = p.value[e], a = p.value[e + 1] - r.clientHeight, o = i;
+			n === "end" ? o = a : n === "center" ? o = (i + a) / 2 : n === "nearest" && i >= r.scrollTop - u.value && (o = a), r.scrollTop = u.value + o, c.value = r.scrollTop, await t();
+		}
+		let i = F(e);
+		i && (N(r), R(r, i, n));
+	}
+	function R(e, t, n) {
+		let r = getComputedStyle(e), i = a.insetStart?.() ?? (parseFloat(r.paddingTop) || 0), o = parseFloat(r.paddingBottom) || 0, s = T(e, t), l = t.getBoundingClientRect().height / P(e), u = s + l, d = e.clientHeight, f = e.scrollTop;
+		n === "start" ? f = s - i : n === "end" ? f = u - d + o : n === "center" ? f = s + l / 2 - d / 2 : s - i < e.scrollTop ? f = s - i : u + o > e.scrollTop + d && (f = u - d + o), e.scrollTop = f, c.value = e.scrollTop;
+	}
+	return {
+		segments: _,
+		measure: S,
+		scrollToIndex: L
+	};
+}
+//#endregion
+export { a as useVirtualList };
+
+//# sourceMappingURL=useVirtualList.js.map