vectis-ui 0.11.0 → 0.13.0

package/dist/components/VResizable/VResizable.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,225 @@
+import { isDev as e } from "../../utils/env.js";
+import { useMessages as t } from "../../i18n/state.js";
+import { useSlotNodes as n } from "../../composables/useSlotNodes.js";
+import { isRtl as r } from "../../utils/direction.js";
+import { clamp as i } from "../../utils/number.js";
+import { resizableKey as a } from "./context.js";
+import { defaultSizes as o, isCollapsedAt as s, resizeAt as c } from "./layout.js";
+import l from "./VResizablePanel.js";
+import { Fragment as u, cloneVNode as d, computed as f, createCommentVNode as p, createElementBlock as m, createVNode as ee, defineComponent as h, mergeModels as g, onMounted as te, openBlock as _, provide as ne, ref as v, renderList as re, shallowReactive as y, shallowRef as ie, useId as ae, useModel as oe, watchEffect as b } from "vue";
+//#region src/components/VResizable/VResizable.vue?vue&type=script&setup=true&lang.ts
+var x = [
+	"data-orientation",
+	"data-disabled",
+	"data-dragging"
+], se = [
+	"tabindex",
+	"aria-orientation",
+	"aria-label",
+	"aria-controls",
+	"aria-valuenow",
+	"aria-valuemin",
+	"aria-valuemax",
+	"aria-disabled",
+	"data-active",
+	"onKeydown",
+	"onPointerdown"
+], ce = {
+	key: 0,
+	class: "v-resizable-grip",
+	"aria-hidden": "true"
+}, S = /*@__PURE__*/ h({
+	__name: "VResizable",
+	props: /*@__PURE__*/ g({
+		orientation: { default: "horizontal" },
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		grip: {
+			type: Boolean,
+			default: !1
+		},
+		step: { default: 5 }
+	}, {
+		modelValue: {},
+		modelModifiers: {}
+	}),
+	emits: /*@__PURE__*/ g(["change"], ["update:modelValue"]),
+	setup(h, { emit: g }) {
+		let S = h, C = oe(h, "modelValue"), w = g, le = t(), T = ae(), E = v(null), D = f(() => S.orientation === "horizontal"), O = n(), k = f(() => O.value.filter((e) => e.type === l)), A = (e, t, n) => e.props?.[t] ?? e.props?.[n], j = (e, t) => e.props?.id ?? `${T}-panel-${t}`, M = f(() => o(k.value.map((e) => {
+			let t = A(e, "defaultSize", "default-size");
+			return t == null ? void 0 : Number(t);
+		}))), N = f(() => C.value?.length === k.value.length ? C.value : M.value), P = y(/* @__PURE__ */ new Map()), F = (e) => {
+			for (let t of P.values()) if (t.index === e) return t;
+		}, I = /* @__PURE__ */ new WeakMap(), L = v(0), R = y(/* @__PURE__ */ new Map()), z = (e) => `${S.orientation}:${e}`;
+		function B(e) {
+			if (e === void 0) return;
+			if (typeof e == "number") return e;
+			if (e.trim().endsWith("%")) return Number.parseFloat(e);
+			let t = R.get(z(e));
+			return t === void 0 || !L.value ? void 0 : t / L.value * 100;
+		}
+		let V = f(() => k.value.map((e, t) => {
+			let n = F(t), r = i(B(n?.minSize) ?? 0, 0, 100);
+			return {
+				min: r,
+				max: i(B(n?.maxSize) ?? 100, r, 100),
+				collapsible: !!n?.collapsible,
+				collapsedSize: i(B(n?.collapsedSize) ?? 0, 0, r)
+			};
+		}));
+		function H(e) {
+			let t = N.value.map((t, n) => (n === e?.index ? e.collapsed : F(n)?.collapsed) ? V.value[n].collapsedSize : void 0), n = t.reduce((e, t) => e + (t ?? 0), 0), r = N.value.reduce((e, n, r) => e + (t[r] === void 0 ? n : 0), 0);
+			return N.value.map((e, i) => t[i] ?? (r ? e / r * (100 - n) : 0));
+		}
+		let U = f(() => H());
+		function ue(e, t) {
+			let n = document.createElement("div");
+			n.style.position = "absolute", n.style.visibility = "hidden", n.style.setProperty(D.value ? "width" : "height", t), e.append(n);
+			let r = n.getBoundingClientRect();
+			return n.remove(), D.value ? r.width : r.height;
+		}
+		function W(e) {
+			let t = E.value, n = k.value.map((e, t) => F(t)?.el?.getBoundingClientRect()), r = n.map((e) => e ? D.value ? e.width : e.height : 0), i = r.reduce((e, t) => e + t, 0);
+			if (!t || !i || n.some((e) => !e)) return H(e);
+			for (let e of P.values()) for (let n of [
+				e.minSize,
+				e.maxSize,
+				e.collapsedSize
+			]) typeof n == "string" && !n.trim().endsWith("%") && R.set(z(n), ue(t, n));
+			L.value = i;
+			let a = H(e);
+			return r.every((e, t) => Math.abs(e - a[t] * i / 100) < 2) ? a : r.map((e) => e / i * 100);
+		}
+		te(W);
+		let G = (e, t) => e.length === t.length && e.every((e, n) => Math.abs(e - t[n]) < .01);
+		function K(e, t) {
+			G(e, N.value) || (C.value = e), e.forEach((e, n) => {
+				let r = F(n), i = V.value[n];
+				if (!r || !i.collapsible) return;
+				let a = s(e, i);
+				a && !s(t[n], i) && I.set(r, t[n]), r.setCollapsed(a);
+			});
+		}
+		function q(e, t) {
+			K(e, t), G(e, t) || w("change", e);
+		}
+		function de(e) {
+			let t = F(e), n = V.value[e];
+			return i((t && I.get(t)) ?? M.value[e], n.min, n.max);
+		}
+		function J(e, t, n) {
+			let r = V.value[e], i = (t ? r.collapsedSize : de(e)) - n[e];
+			return e < n.length - 1 ? c(n, e, i, V.value, 1) : c(n, e - 1, -i, V.value, 1);
+		}
+		function Y(e) {
+			let t = V.value[e], n = V.value[e + 1];
+			return !t?.collapsible && n?.collapsible ? e + 1 : e;
+		}
+		ne(a, {
+			get orientation() {
+				return S.orientation;
+			},
+			sizeAt: (e) => N.value[e] ?? 1,
+			register: (e, t) => P.set(e, t),
+			unregister: (e) => P.delete(e),
+			toggle(e, t) {
+				let n = W({
+					index: e,
+					collapsed: !t
+				}), r = V.value[e];
+				!r || s(n[e], r) === t || q(J(e, t, n), n);
+			}
+		});
+		function fe(e, t) {
+			if (S.disabled) return;
+			let n = W(), i = Y(e), a = V.value[i], o = i === e ? 1 : -1, l = D.value && r(E.value), u = D.value ? l ? "ArrowRight" : "ArrowLeft" : "ArrowUp", d = D.value ? l ? "ArrowLeft" : "ArrowRight" : "ArrowDown", f;
+			if (t.key === u) f = c(n, e, -S.step, V.value, 1);
+			else if (t.key === d) f = c(n, e, S.step, V.value, 1);
+			else if (t.key === "Home") f = c(n, e, ((a.collapsible ? a.collapsedSize : a.min) - n[i]) * o, V.value, 1);
+			else if (t.key === "End") f = c(n, e, (a.max - n[i]) * o, V.value, 1);
+			else if (t.key === "Enter" && a.collapsible) f = J(i, !s(n[i], a), n);
+			else return;
+			t.preventDefault(), q(f, n);
+		}
+		let X = ie(null), Z = (e) => D.value ? e.clientX : e.clientY;
+		function pe(e, t) {
+			if (S.disabled || t.button !== 0 || X.value) return;
+			let n = t.currentTarget, i = W();
+			if (L.value) {
+				t.preventDefault(), n.focus({ preventScroll: !0 });
+				try {
+					n.setPointerCapture(t.pointerId);
+				} catch {}
+				X.value = {
+					handle: e,
+					pointerId: t.pointerId,
+					origin: Z(t),
+					base: i,
+					sign: D.value && r(E.value) ? -1 : 1,
+					last: i
+				};
+			}
+		}
+		function me(e) {
+			let t = X.value;
+			if (!t || t.pointerId !== e.pointerId) return;
+			let n = (Z(e) - t.origin) / L.value * 100 * t.sign;
+			t.last = c(t.base, t.handle, n, V.value), K(t.last, t.base);
+		}
+		function Q(e) {
+			let t = X.value;
+			!t || t.pointerId !== e.pointerId || (X.value = null, G(t.last, t.base) || w("change", t.last));
+		}
+		let $ = f(() => k.value.slice(1).map((e, t) => {
+			let n = Y(t), r = k.value[n], i = V.value[n];
+			return {
+				controls: j(r, n),
+				label: A(r, "label", "label") ?? le.value.resizable.panel(n + 1),
+				now: Math.round(U.value[n] ?? 0),
+				min: Math.round(i.collapsible ? i.collapsedSize : i.min),
+				max: Math.round(i.max)
+			};
+		})), he = ({ node: e, index: t }) => d(e, {
+			index: t,
+			id: j(e, t)
+		});
+		return e && b(() => {
+			O.value.length !== k.value.length && console.warn("[VResizable] Only VResizablePanel children are rendered."), C.value && C.value.length !== k.value.length && console.warn(`[VResizable] The v-model holds ${C.value.length} sizes for ${k.value.length} panels; the default sizes are used.`);
+		}), (e, t) => (_(), m("div", {
+			ref_key: "rootEl",
+			ref: E,
+			class: "v-resizable",
+			"data-orientation": h.orientation,
+			"data-disabled": h.disabled ? "" : void 0,
+			"data-dragging": X.value ? "" : void 0
+		}, [(_(!0), m(u, null, re(k.value, (e, t) => (_(), m(u, { key: e.key ?? t }, [t > 0 ? (_(), m("div", {
+			key: 0,
+			class: "v-resizable-handle",
+			role: "separator",
+			tabindex: h.disabled ? void 0 : 0,
+			"aria-orientation": D.value ? "vertical" : void 0,
+			"aria-label": $.value[t - 1].label,
+			"aria-controls": $.value[t - 1].controls,
+			"aria-valuenow": $.value[t - 1].now,
+			"aria-valuemin": $.value[t - 1].min,
+			"aria-valuemax": $.value[t - 1].max,
+			"aria-disabled": h.disabled || void 0,
+			"data-active": X.value?.handle === t - 1 ? "" : void 0,
+			onKeydown: (e) => fe(t - 1, e),
+			onPointerdown: (e) => pe(t - 1, e),
+			onPointermove: me,
+			onPointerup: Q,
+			onPointercancel: Q,
+			onLostpointercapture: Q
+		}, [h.grip ? (_(), m("span", ce)) : p("", !0)], 40, se)) : p("", !0), ee(he, {
+			node: e,
+			index: t
+		}, null, 8, ["node", "index"])], 64))), 128))], 8, x));
+	}
+});
+//#endregion
+export { S as default };
+
+//# sourceMappingURL=VResizable.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VResizable.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/VResizable/VResizable.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * No native element resizes siblings, so each handle follows the APG window splitter: a focusable\n * `separator` carrying the size of its primary panel, moved with the arrow keys or dragged under\n * pointer capture. Sizes are percentages rendered as `flex-grow` weights, which needs no\n * measurement on the server.\n */\n\nimport {\n  cloneVNode,\n  computed,\n  onMounted,\n  provide,\n  ref,\n  shallowReactive,\n  shallowRef,\n  useId,\n  watchEffect,\n  type FunctionalComponent,\n  type VNode,\n} from 'vue'\n\nimport { useSlotNodes } from '../../composables/useSlotNodes'\nimport { useMessages } from '../../i18n/state'\nimport { isRtl } from '../../utils/direction'\nimport { isDev } from '../../utils/env'\nimport { clamp } from '../../utils/number'\nimport { resizableKey, type ResizablePanelEntry } from './context'\nimport { defaultSizes, isCollapsedAt, resizeAt, type PanelLimits } from './layout'\nimport VResizablePanel from './VResizablePanel.vue'\n\n/** Which way the panels are laid out: side by side, or stacked. */\nexport type ResizableOrientation = 'horizontal' | 'vertical'\n\n/** A panel limit: a number in percent of the group, or a CSS length such as `240px`. */\nexport type ResizableLength = number | string\n\ninterface ResizableProps {\n  /**\n   * `horizontal` puts the panels side by side, following the direction of the text; `vertical`\n   * stacks them, and the group then needs a height.\n   */\n  orientation?: ResizableOrientation\n  /** Fixes the sizes: the handles can neither be dragged nor focused. */\n  disabled?: boolean\n  /** Draws a grip in the middle of every handle, which makes it easier to find. */\n  grip?: boolean\n  /** How far an arrow key moves a handle, in percent of the group. */\n  step?: number\n}\n\nconst props = withDefaults(defineProps<ResizableProps>(), {\n  orientation: 'horizontal',\n  disabled: false,\n  grip: false,\n  step: 5,\n})\n\n/**\n * The size of each panel, in percent of the space they share, adding up to 100. Left unbound,\n * the panels start from their `defaultSize`.\n */\nconst model = defineModel<number[]>()\n\nconst emit = defineEmits<{\n  /**\n   * The sizes have settled: a handle was released, moved with a key, or a panel collapsed or\n   * reopened. Save them here rather than on every `update:modelValue` of a drag.\n   */\n  change: [sizes: number[]]\n}>()\n\ndefineSlots<{\n  /** The `<VResizablePanel>`s, two or more. A handle is placed between each pair. */\n  default(): unknown\n}>()\n\nconst m = useMessages()\nconst baseId = useId()\nconst rootEl = ref<HTMLElement | null>(null)\nconst horizontal = computed(() => props.orientation === 'horizontal')\n\n// @ssr\n/*\n * The panels are read from the slot's VNodes, never from a registry fed at mount, which would\n * render no handle on the server. Cloning gives each panel its position and the id its handle\n * points at (the VCarousel idiom).\n */\nconst nodes = useSlotNodes()\nconst panels = computed(() => nodes.value.filter((node) => node.type === VResizablePanel))\n\nconst nodeProp = (node: VNode, camel: string, kebab: string): unknown =>\n  node.props?.[camel] ?? node.props?.[kebab]\n\nconst panelId = (node: VNode, index: number) =>\n  (node.props?.id as string | undefined) ?? `${baseId}-panel-${index}`\n\nconst defaults = computed(() =>\n  defaultSizes(\n    panels.value.map((node) => {\n      const size = nodeProp(node, 'defaultSize', 'default-size')\n      return size === undefined || size === null ? undefined : Number(size)\n    }),\n  ),\n)\n\nconst sizes = computed(() =>\n  model.value?.length === panels.value.length ? model.value : defaults.value,\n)\n\nconst entries = shallowReactive(new Map<string, ResizablePanelEntry>())\nconst entryAt = (index: number) => {\n  for (const entry of entries.values()) if (entry.index === index) return entry\n  return undefined\n}\n\n/** Restored when a collapsed panel reopens: its size when it collapsed, by panel. */\nconst restoreSizes = new WeakMap<ResizablePanelEntry, number>()\n\n// @core\n/*\n * CSS lengths are converted at each interaction, against the space the panels share at that\n * moment. The pixels are cached so that the ARIA values can be derived reactively.\n */\nconst space = ref(0)\nconst pixels = shallowReactive(new Map<string, number>())\n\nconst lengthKey = (length: string) => `${props.orientation}:${length}`\n\nfunction percentOf(length: ResizableLength | undefined): number | undefined {\n  if (length === undefined) return undefined\n  if (typeof length === 'number') return length\n  if (length.trim().endsWith('%')) return Number.parseFloat(length)\n  const px = pixels.get(lengthKey(length))\n  return px === undefined || !space.value ? undefined : (px / space.value) * 100\n}\n\nconst limits = computed<PanelLimits[]>(() =>\n  panels.value.map((_, index) => {\n    const entry = entryAt(index)\n    const min = clamp(percentOf(entry?.minSize) ?? 0, 0, 100)\n    return {\n      min,\n      max: clamp(percentOf(entry?.maxSize) ?? 100, min, 100),\n      collapsible: !!entry?.collapsible,\n      collapsedSize: clamp(percentOf(entry?.collapsedSize) ?? 0, 0, min),\n    }\n  }),\n)\n\n/**\n * The sizes as laid out: a collapsed panel keeps its collapsed size, and the others share the\n * rest in proportion to their weights, as `flex-grow` distributes it. `before` gives one panel\n * back the collapsed state it had before its model changed.\n */\nfunction layoutOf(before?: { index: number; collapsed: boolean }) {\n  const fixed = sizes.value.map((_, i) =>\n    (i === before?.index ? before.collapsed : entryAt(i)?.collapsed)\n      ? limits.value[i]!.collapsedSize\n      : undefined,\n  )\n  const fixedTotal = fixed.reduce<number>((sum, size) => sum + (size ?? 0), 0)\n  const weights = sizes.value.reduce((sum, size, i) => sum + (fixed[i] === undefined ? size : 0), 0)\n  return sizes.value.map(\n    (size, i) => fixed[i] ?? (weights ? (size / weights) * (100 - fixedTotal) : 0),\n  )\n}\n\nconst layout = computed(() => layoutOf())\n\nfunction lengthInPixels(root: HTMLElement, length: string): number {\n  const probe = document.createElement('div')\n  probe.style.position = 'absolute'\n  probe.style.visibility = 'hidden'\n  probe.style.setProperty(horizontal.value ? 'width' : 'height', length)\n  root.append(probe)\n  const rect = probe.getBoundingClientRect()\n  probe.remove()\n  return horizontal.value ? rect.width : rect.height\n}\n\n/**\n * Measures the panels as they are drawn, which accounts for CSS limits that the weights alone do\n * not show, and refreshes the converted lengths. It falls back to the computed layout when\n * nothing can be measured.\n */\nfunction measure(before?: { index: number; collapsed: boolean }): number[] {\n  const root = rootEl.value\n  const rects = panels.value.map((_, i) => entryAt(i)?.el?.getBoundingClientRect())\n  const extents = rects.map((rect) => (rect ? (horizontal.value ? rect.width : rect.height) : 0))\n  const total = extents.reduce((sum, extent) => sum + extent, 0)\n  if (!root || !total || rects.some((rect) => !rect)) return layoutOf(before)\n  for (const entry of entries.values())\n    for (const length of [entry.minSize, entry.maxSize, entry.collapsedSize])\n      if (typeof length === 'string' && !length.trim().endsWith('%'))\n        pixels.set(lengthKey(length), lengthInPixels(root, length))\n  space.value = total\n  const laidOut = layoutOf(before)\n  // Within two pixels, the difference is the 1px lines shrunk off the panels: the computed sizes\n  // are kept, so the model does not fill with measurement noise. Beyond, CSS limits are at work.\n  const drawn = extents.every((extent, i) => Math.abs(extent - (laidOut[i]! * total) / 100) < 2)\n  return drawn ? laidOut : extents.map((extent) => (extent / total) * 100)\n}\n\nonMounted(measure)\n\nconst sameSizes = (a: readonly number[], b: readonly number[]) =>\n  a.length === b.length && a.every((size, i) => Math.abs(size - b[i]!) < 0.01)\n\n/** Writes new sizes and the collapsed state they imply, remembering what collapsing panels had. */\nfunction apply(next: number[], base: readonly number[]) {\n  if (!sameSizes(next, sizes.value)) model.value = next\n  next.forEach((size, i) => {\n    const entry = entryAt(i)\n    const lim = limits.value[i]!\n    if (!entry || !lim.collapsible) return\n    const now = isCollapsedAt(size, lim)\n    if (now && !isCollapsedAt(base[i]!, lim)) restoreSizes.set(entry, base[i]!)\n    entry.setCollapsed(now)\n  })\n}\n\nfunction commit(next: number[], base: readonly number[]) {\n  apply(next, base)\n  if (!sameSizes(next, base)) emit('change', next)\n}\n\n/**\n * The size a reopened panel returns to: the one it had when it collapsed, or its starting size,\n * within its limits.\n */\nfunction reopenSize(index: number) {\n  const entry = entryAt(index)\n  const lim = limits.value[index]!\n  const remembered = entry && restoreSizes.get(entry)\n  return clamp(remembered ?? defaults.value[index]!, lim.min, lim.max)\n}\n\n/** Collapses or reopens a panel through the handle after it, or before it for the last one. */\nfunction sizesWithCollapsed(index: number, collapse: boolean, base: readonly number[]) {\n  const lim = limits.value[index]!\n  const growth = (collapse ? lim.collapsedSize : reopenSize(index)) - base[index]!\n  return index < base.length - 1\n    ? resizeAt(base, index, growth, limits.value, 1)\n    : resizeAt(base, index - 1, -growth, limits.value, 1)\n}\n\n/**\n * The panel a handle reports on and collapses: the one before it, unless only the one after it\n * can collapse, as for a sidebar on the end side.\n */\nfunction primaryOf(handle: number) {\n  const before = limits.value[handle]\n  const after = limits.value[handle + 1]\n  return !before?.collapsible && after?.collapsible ? handle + 1 : handle\n}\n\nprovide(resizableKey, {\n  get orientation() {\n    return props.orientation\n  },\n  sizeAt: (index) => sizes.value[index] ?? 1,\n  register: (id, entry) => entries.set(id, entry),\n  unregister: (id) => entries.delete(id),\n  // Called from the panel's pre-flush watcher: the DOM still shows the panel as it was.\n  toggle(index, collapse) {\n    const base = measure({ index, collapsed: !collapse })\n    const lim = limits.value[index]\n    if (!lim || isCollapsedAt(base[index]!, lim) === collapse) return\n    commit(sizesWithCollapsed(index, collapse, base), base)\n  },\n})\n\n// @keyboard\n/*\n * The arrows that run along the group move its handles, following the direction of the text.\n * Home and End give the primary panel its smallest and largest size, and Enter collapses or\n * reopens it, as the APG window splitter describes.\n */\nfunction onKeydown(handle: number, event: KeyboardEvent) {\n  if (props.disabled) return\n  const base = measure()\n  const primary = primaryOf(handle)\n  const lim = limits.value[primary]!\n  // Positive when the primary panel grows, negative when it shrinks.\n  const primarySign = primary === handle ? 1 : -1\n  const rtl = horizontal.value && isRtl(rootEl.value)\n  const back = horizontal.value ? (rtl ? 'ArrowRight' : 'ArrowLeft') : 'ArrowUp'\n  const forth = horizontal.value ? (rtl ? 'ArrowLeft' : 'ArrowRight') : 'ArrowDown'\n  let next: number[]\n  if (event.key === back) next = resizeAt(base, handle, -props.step, limits.value, 1)\n  else if (event.key === forth) next = resizeAt(base, handle, props.step, limits.value, 1)\n  else if (event.key === 'Home') {\n    const lowest = lim.collapsible ? lim.collapsedSize : lim.min\n    next = resizeAt(base, handle, (lowest - base[primary]!) * primarySign, limits.value, 1)\n  } else if (event.key === 'End')\n    next = resizeAt(base, handle, (lim.max - base[primary]!) * primarySign, limits.value, 1)\n  else if (event.key === 'Enter' && lim.collapsible)\n    next = sizesWithCollapsed(primary, !isCollapsedAt(base[primary]!, lim), base)\n  else return\n  event.preventDefault()\n  commit(next, base)\n}\n\ninterface Drag {\n  handle: number\n  pointerId: number\n  origin: number\n  base: number[]\n  sign: number\n  last: number[]\n}\n\nconst drag = shallowRef<Drag | null>(null)\n\nconst coordinate = (event: PointerEvent) => (horizontal.value ? event.clientX : event.clientY)\n\nfunction onPointerdown(handle: number, event: PointerEvent) {\n  // A second pointer pressed during a drag is ignored, which leaves one finger in charge.\n  if (props.disabled || event.button !== 0 || drag.value) return\n  const el = event.currentTarget as HTMLElement\n  const base = measure()\n  if (!space.value) return\n  // Prevented so that no text gets selected; the focus a press would give is given back.\n  event.preventDefault()\n  el.focus({ preventScroll: true })\n  // @fallback\n  // Synthetic pointer events have no pointer to capture; the drag then follows the handle only.\n  try {\n    el.setPointerCapture(event.pointerId)\n  } catch {\n    /* Synthetic pointers cannot be captured. */\n  }\n  drag.value = {\n    handle,\n    pointerId: event.pointerId,\n    origin: coordinate(event),\n    base,\n    sign: horizontal.value && isRtl(rootEl.value) ? -1 : 1,\n    last: base,\n  }\n}\n\nfunction onPointermove(event: PointerEvent) {\n  const state = drag.value\n  if (!state || state.pointerId !== event.pointerId) return\n  const delta = ((coordinate(event) - state.origin) / space.value) * 100 * state.sign\n  state.last = resizeAt(state.base, state.handle, delta, limits.value)\n  apply(state.last, state.base)\n}\n\nfunction onPointerEnd(event: PointerEvent) {\n  const state = drag.value\n  if (!state || state.pointerId !== event.pointerId) return\n  drag.value = null\n  if (!sameSizes(state.last, state.base)) emit('change', state.last)\n}\n\nconst handles = computed(() =>\n  panels.value.slice(1).map((_, handle) => {\n    const primary = primaryOf(handle)\n    const node = panels.value[primary]!\n    const lim = limits.value[primary]!\n    return {\n      controls: panelId(node, primary),\n      label:\n        (nodeProp(node, 'label', 'label') as string | undefined) ??\n        m.value.resizable.panel(primary + 1),\n      now: Math.round(layout.value[primary] ?? 0),\n      min: Math.round(lim.collapsible ? lim.collapsedSize : lim.min),\n      max: Math.round(lim.max),\n    }\n  }),\n)\n\n/** Renders a captured panel VNode, which `<component :is>` cannot do. */\nconst PanelNode: FunctionalComponent<{ node: VNode; index: number }> = ({ node, index }) =>\n  cloneVNode(node, { index, id: panelId(node, index) })\n\n// @devwarn\nif (isDev) {\n  watchEffect(() => {\n    if (nodes.value.length !== panels.value.length)\n      console.warn('[VResizable] Only VResizablePanel children are rendered.')\n    if (model.value && model.value.length !== panels.value.length)\n      console.warn(\n        `[VResizable] The v-model holds ${model.value.length} sizes for ${panels.value.length} panels; the default sizes are used.`,\n      )\n  })\n}\n</script>\n\n<template>\n  <div\n    ref=\"rootEl\"\n    class=\"v-resizable\"\n    :data-orientation=\"orientation\"\n    :data-disabled=\"disabled ? '' : undefined\"\n    :data-dragging=\"drag ? '' : undefined\"\n  >\n    <template v-for=\"(node, index) in panels\" :key=\"node.key ?? index\">\n      <!--\n        A horizontal group is divided by vertical lines. `aria-orientation` is only written when\n        it differs from the separator's implicit horizontal, as on VSeparator.\n      -->\n      <div\n        v-if=\"index > 0\"\n        class=\"v-resizable-handle\"\n        role=\"separator\"\n        :tabindex=\"disabled ? undefined : 0\"\n        :aria-orientation=\"horizontal ? 'vertical' : undefined\"\n        :aria-label=\"handles[index - 1]!.label\"\n        :aria-controls=\"handles[index - 1]!.controls\"\n        :aria-valuenow=\"handles[index - 1]!.now\"\n        :aria-valuemin=\"handles[index - 1]!.min\"\n        :aria-valuemax=\"handles[index - 1]!.max\"\n        :aria-disabled=\"disabled || undefined\"\n        :data-active=\"drag?.handle === index - 1 ? '' : undefined\"\n        @keydown=\"onKeydown(index - 1, $event)\"\n        @pointerdown=\"onPointerdown(index - 1, $event)\"\n        @pointermove=\"onPointermove\"\n        @pointerup=\"onPointerEnd\"\n        @pointercancel=\"onPointerEnd\"\n        @lostpointercapture=\"onPointerEnd\"\n      >\n        <span v-if=\"grip\" class=\"v-resizable-grip\" aria-hidden=\"true\" />\n      </div>\n      <PanelNode :node=\"node\" :index=\"index\" />\n    </template>\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-resizable {\n    --resizable-hit: var(--vectis-control-size-resizable-hit);\n    display: flex;\n  }\n\n  .v-resizable[data-orientation='vertical'] {\n    flex-direction: column;\n  }\n\n  .v-resizable[data-dragging] {\n    user-select: none;\n  }\n\n  .v-resizable-handle {\n    position: relative;\n    z-index: 1;\n    flex: none;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border: 0 solid var(--vectis-color-border);\n    touch-action: none;\n    transition:\n      border-color var(--vectis-duration-fast) var(--vectis-ease-default),\n      box-shadow var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  /* The strip that catches the pointer, wider than the 1px line it is centred on. */\n  .v-resizable-handle::before {\n    content: '';\n    position: absolute;\n  }\n\n  /* The content box stays empty so the line is exactly 1px: the grip overflows it, centred. */\n  .v-resizable[data-orientation='horizontal'] > .v-resizable-handle {\n    inline-size: 0;\n    border-inline-start-width: 1px;\n    cursor: col-resize;\n  }\n\n  .v-resizable[data-orientation='horizontal'] > .v-resizable-handle::before {\n    inset-block: 0;\n    inset-inline: calc(var(--resizable-hit) / -2);\n  }\n\n  .v-resizable[data-orientation='vertical'] > .v-resizable-handle {\n    block-size: 0;\n    border-block-start-width: 1px;\n    cursor: row-resize;\n  }\n\n  .v-resizable[data-orientation='vertical'] > .v-resizable-handle::before {\n    inset-inline: 0;\n    inset-block: calc(var(--resizable-hit) / -2);\n  }\n\n  .v-resizable[data-dragging][data-orientation='horizontal'] {\n    cursor: col-resize;\n  }\n\n  .v-resizable[data-dragging][data-orientation='vertical'] {\n    cursor: row-resize;\n  }\n\n  .v-resizable-handle:is(:hover, [data-active]):not([aria-disabled]) {\n    border-color: var(--vectis-color-accent);\n    box-shadow: 0 0 0 1px var(--vectis-color-accent);\n  }\n\n  .v-resizable-handle:focus-visible {\n    outline: var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);\n    outline-offset: var(--vectis-focus-ring-offset);\n  }\n\n  .v-resizable-grip {\n    flex: none;\n    border: 1px solid transparent;\n    border-radius: var(--vectis-radius-pill);\n    background: var(--vectis-color-border-strong);\n    transition: background-color var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  .v-resizable[data-orientation='horizontal'] > .v-resizable-handle > .v-resizable-grip {\n    inline-size: var(--vectis-control-size-resizable-grip-thickness);\n    block-size: var(--vectis-control-size-resizable-grip-length);\n  }\n\n  .v-resizable[data-orientation='vertical'] > .v-resizable-handle > .v-resizable-grip {\n    inline-size: var(--vectis-control-size-resizable-grip-length);\n    block-size: var(--vectis-control-size-resizable-grip-thickness);\n  }\n\n  .v-resizable-handle:is(:hover, [data-active]):not([aria-disabled]) .v-resizable-grip {\n    background: var(--vectis-color-accent);\n  }\n\n  .v-resizable-handle[aria-disabled] {\n    cursor: default;\n  }\n\n  .v-resizable-handle[aria-disabled] .v-resizable-grip {\n    background: var(--vectis-color-border);\n  }\n\n  @media (forced-colors: active) {\n    .v-resizable-handle:is(:hover, [data-active]):not([aria-disabled]) {\n      border-color: Highlight;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-resizable-handle,\n    .v-resizable-grip {\n      transition: none;\n    }\n  }\n}\n</style>\n"],"mappings":"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"}

package/dist/components/VResizable/VResizablePanel.css

@@ -0,0 +1,2 @@
+@layer vectis.reset, vectis.tokens, vectis.components, vectis.utilities;
+@layer vectis.components{.v-resizable-panel{box-sizing:border-box;flex:var(--resizable-panel-size) var(--resizable-panel-size) calc(var(--resizable-panel-size) * 1%);overflow:auto}.v-resizable[data-orientation=horizontal]>.v-resizable-panel{min-inline-size:var(--resizable-panel-min);max-inline-size:var(--resizable-panel-max)}.v-resizable[data-orientation=vertical]>.v-resizable-panel{min-block-size:var(--resizable-panel-min);max-block-size:var(--resizable-panel-max)}.v-resizable[data-orientation]>.v-resizable-panel[data-collapsed]{flex:0 0 var(--resizable-panel-collapsed);min-block-size:0;max-block-size:none;min-inline-size:0;max-inline-size:none}.v-resizable-panel[data-hidden]{display:none}}

package/dist/components/VResizable/VResizablePanel.d.ts

@@ -0,0 +1,60 @@
+import { ResizableLength } from './VResizable.js';
+interface ResizablePanelProps {
+    /** Which panel this is among its siblings, set by VResizable. Do not set it yourself. */
+    index?: number;
+    /**
+     * The starting size in percent, used when the group's v-model gives none. Panels without one
+     * share what is left equally.
+     */
+    defaultSize?: number;
+    /** The smallest size: a number in percent, or a CSS length such as `200px` or `12rem`. */
+    minSize?: ResizableLength;
+    /** The largest size: a number in percent, or a CSS length. */
+    maxSize?: ResizableLength;
+    /**
+     * Lets the panel collapse: dragged past the middle of its minimum, or with Enter on its
+     * handle.
+     */
+    collapsible?: boolean;
+    /**
+     * The size of the collapsed panel, in percent or as a CSS length such as the width of an icon
+     * rail. At 0, the default, its content is hidden.
+     */
+    collapsedSize?: ResizableLength;
+    /**
+     * What the panel is called. It names the handle that resizes it; the dictionary's "Panel 2"
+     * otherwise.
+     */
+    label?: string;
+}
+type __VLS_Props = ResizablePanelProps;
+type __VLS_Slots = {
+    /** The panel's content. */
+    default(): unknown;
+};
+type __VLS_ModelProps = {
+    /** Whether the panel is collapsed. It only takes effect on a `collapsible` panel. */
+    'collapsed'?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:collapsed": (value: boolean) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:collapsed"?: ((value: boolean) => any) | undefined;
+}>, {
+    label: string;
+    index: number;
+    defaultSize: number;
+    minSize: ResizableLength;
+    maxSize: ResizableLength;
+    collapsible: boolean;
+    collapsedSize: ResizableLength;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/VResizable/VResizablePanel.js

@@ -0,0 +1,9 @@
+import './VResizablePanel.css';
+import e from "./VResizablePanel.vue_vue_type_script_setup_true_lang.js";
+/* empty css                                                */
+//#region src/components/VResizable/VResizablePanel.vue
+var t = e;
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=VResizablePanel.js.map

package/dist/components/VResizable/VResizablePanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VResizablePanel.js","names":[],"sources":["../../../src/components/VResizable/VResizablePanel.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * The group hands each panel its share of the space as a `flex-grow` weight. The panel writes its\n * own limits in CSS as well, so a length limit holds before any script runs and while the window\n * is resized.\n */\n\nimport { computed, inject, onBeforeUnmount, ref, useAttrs, useId, watch } from 'vue'\n\nimport { isDev } from '../../utils/env'\nimport { resizableKey } from './context'\nimport type { ResizableLength } from './VResizable.vue'\n\ninterface ResizablePanelProps {\n  /** Which panel this is among its siblings, set by VResizable. Do not set it yourself. */\n  index?: number\n  /**\n   * The starting size in percent, used when the group's v-model gives none. Panels without one\n   * share what is left equally.\n   */\n  defaultSize?: number\n  /** The smallest size: a number in percent, or a CSS length such as `200px` or `12rem`. */\n  minSize?: ResizableLength\n  /** The largest size: a number in percent, or a CSS length. */\n  maxSize?: ResizableLength\n  /**\n   * Lets the panel collapse: dragged past the middle of its minimum, or with Enter on its\n   * handle.\n   */\n  collapsible?: boolean\n  /**\n   * The size of the collapsed panel, in percent or as a CSS length such as the width of an icon\n   * rail. At 0, the default, its content is hidden.\n   */\n  collapsedSize?: ResizableLength\n  /**\n   * What the panel is called. It names the handle that resizes it; the dictionary's \"Panel 2\"\n   * otherwise.\n   */\n  label?: string\n}\n\nconst props = withDefaults(defineProps<ResizablePanelProps>(), {\n  index: 0,\n  defaultSize: undefined,\n  minSize: 0,\n  maxSize: undefined,\n  collapsible: false,\n  collapsedSize: 0,\n  label: undefined,\n})\n\n/** Whether the panel is collapsed. It only takes effect on a `collapsible` panel. */\nconst collapsed = defineModel<boolean>('collapsed', { default: false })\n\ndefineSlots<{\n  /** The panel's content. */\n  default(): unknown\n}>()\n\nconst group = inject(resizableKey, null)\nconst attrs = useAttrs()\nconst id = useId()\nconst el = ref<HTMLElement | null>(null)\n\nconst isCollapsed = computed(() => props.collapsible && collapsed.value)\n\nconst cssLength = (length: ResizableLength) => (typeof length === 'number' ? `${length}%` : length)\n\n/** A collapsed size of zero leaves nothing to read, so the content is hidden, focus included. */\nconst hidesContent = computed(\n  () => isCollapsed.value && Number.parseFloat(String(props.collapsedSize)) === 0,\n)\n\n// @core\n/*\n * The value the group last wrote, so the watcher below tells the group's own writes from the\n * consumer's. Only the consumer's ask the group to make room.\n */\nlet fromGroup: boolean | undefined\n\ngroup?.register(id, {\n  get index() {\n    return props.index\n  },\n  get el() {\n    return el.value\n  },\n  get minSize() {\n    return props.minSize\n  },\n  get maxSize() {\n    return props.maxSize\n  },\n  get collapsible() {\n    return props.collapsible\n  },\n  get collapsedSize() {\n    return props.collapsedSize\n  },\n  get collapsed() {\n    return isCollapsed.value\n  },\n  setCollapsed(value) {\n    if (collapsed.value === value) return\n    fromGroup = value\n    collapsed.value = value\n  },\n})\nonBeforeUnmount(() => group?.unregister(id))\n\nwatch(collapsed, (value) => {\n  const own = value === fromGroup\n  fromGroup = undefined\n  if (!own && props.collapsible) group?.toggle(props.index, value)\n})\n\n// @devwarn\nif (isDev) {\n  if (!group) console.warn('[VResizablePanel] Place it directly inside a VResizable.')\n  watch(\n    () => collapsed.value && !props.collapsible,\n    (wrong) => {\n      if (wrong) console.warn('[VResizablePanel] `collapsed` has no effect without `collapsible`.')\n    },\n    { immediate: true },\n  )\n}\n\n// Every variable is set, even to its default, so that a nested group's panel never inherits\n// the limits of the panel it sits in.\nconst style = computed(() => ({\n  '--resizable-panel-size': String(group?.sizeAt(props.index) ?? 1),\n  '--resizable-panel-min': cssLength(props.minSize),\n  '--resizable-panel-max': props.maxSize === undefined ? 'none' : cssLength(props.maxSize),\n  '--resizable-panel-collapsed': cssLength(props.collapsedSize),\n}))\n</script>\n\n<template>\n  <div\n    :id=\"(attrs.id as string | undefined) ?? id\"\n    ref=\"el\"\n    class=\"v-resizable-panel\"\n    :data-collapsed=\"isCollapsed ? '' : undefined\"\n    :data-hidden=\"hidesContent ? '' : undefined\"\n    :style=\"style\"\n  >\n    <slot />\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  /*\n   * The basis is the size itself, padding and border included, so a padded panel still takes its\n   * exact share. Growing by the same weight spreads any space left over, such as that of a\n   * collapsed sibling, in proportion; the 1px handles are shrunk off the same way.\n   */\n  .v-resizable-panel {\n    box-sizing: border-box;\n    flex: var(--resizable-panel-size) var(--resizable-panel-size)\n      calc(var(--resizable-panel-size) * 1%);\n    overflow: auto;\n  }\n\n  .v-resizable[data-orientation='horizontal'] > .v-resizable-panel {\n    min-inline-size: var(--resizable-panel-min);\n    max-inline-size: var(--resizable-panel-max);\n  }\n\n  .v-resizable[data-orientation='vertical'] > .v-resizable-panel {\n    min-block-size: var(--resizable-panel-min);\n    max-block-size: var(--resizable-panel-max);\n  }\n\n  .v-resizable[data-orientation] > .v-resizable-panel[data-collapsed] {\n    flex: 0 0 var(--resizable-panel-collapsed);\n    min-inline-size: 0;\n    max-inline-size: none;\n    min-block-size: 0;\n    max-block-size: none;\n  }\n\n  /* Removed from the layout as well, or its padding would keep the panel open. */\n  .v-resizable-panel[data-hidden] {\n    display: none;\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/VResizable/VResizablePanel.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,83 @@
+import { isDev as e } from "../../utils/env.js";
+import { resizableKey as t } from "./context.js";
+import { computed as n, createElementBlock as r, defineComponent as i, inject as a, mergeModels as o, normalizeStyle as s, onBeforeUnmount as c, openBlock as l, ref as u, renderSlot as d, unref as f, useAttrs as p, useId as m, useModel as h, watch as g } from "vue";
+//#region src/components/VResizable/VResizablePanel.vue?vue&type=script&setup=true&lang.ts
+var _ = [
+	"id",
+	"data-collapsed",
+	"data-hidden"
+], v = /*@__PURE__*/ i({
+	__name: "VResizablePanel",
+	props: /*@__PURE__*/ o({
+		index: { default: 0 },
+		defaultSize: { default: void 0 },
+		minSize: { default: 0 },
+		maxSize: { default: void 0 },
+		collapsible: {
+			type: Boolean,
+			default: !1
+		},
+		collapsedSize: { default: 0 },
+		label: { default: void 0 }
+	}, {
+		collapsed: {
+			type: Boolean,
+			default: !1
+		},
+		collapsedModifiers: {}
+	}),
+	emits: ["update:collapsed"],
+	setup(i) {
+		let o = i, v = h(i, "collapsed"), y = a(t, null), b = p(), x = m(), S = u(null), C = n(() => o.collapsible && v.value), w = (e) => typeof e == "number" ? `${e}%` : e, T = n(() => C.value && Number.parseFloat(String(o.collapsedSize)) === 0), E;
+		y?.register(x, {
+			get index() {
+				return o.index;
+			},
+			get el() {
+				return S.value;
+			},
+			get minSize() {
+				return o.minSize;
+			},
+			get maxSize() {
+				return o.maxSize;
+			},
+			get collapsible() {
+				return o.collapsible;
+			},
+			get collapsedSize() {
+				return o.collapsedSize;
+			},
+			get collapsed() {
+				return C.value;
+			},
+			setCollapsed(e) {
+				v.value !== e && (E = e, v.value = e);
+			}
+		}), c(() => y?.unregister(x)), g(v, (e) => {
+			let t = e === E;
+			E = void 0, !t && o.collapsible && y?.toggle(o.index, e);
+		}), e && (y || console.warn("[VResizablePanel] Place it directly inside a VResizable."), g(() => v.value && !o.collapsible, (e) => {
+			e && console.warn("[VResizablePanel] `collapsed` has no effect without `collapsible`.");
+		}, { immediate: !0 }));
+		let D = n(() => ({
+			"--resizable-panel-size": String(y?.sizeAt(o.index) ?? 1),
+			"--resizable-panel-min": w(o.minSize),
+			"--resizable-panel-max": o.maxSize === void 0 ? "none" : w(o.maxSize),
+			"--resizable-panel-collapsed": w(o.collapsedSize)
+		}));
+		return (e, t) => (l(), r("div", {
+			id: f(b).id ?? f(x),
+			ref_key: "el",
+			ref: S,
+			class: "v-resizable-panel",
+			"data-collapsed": C.value ? "" : void 0,
+			"data-hidden": T.value ? "" : void 0,
+			style: s(D.value)
+		}, [d(e.$slots, "default")], 12, _));
+	}
+});
+//#endregion
+export { v as default };
+
+//# sourceMappingURL=VResizablePanel.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/VResizable/VResizablePanel.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VResizablePanel.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/VResizable/VResizablePanel.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * The group hands each panel its share of the space as a `flex-grow` weight. The panel writes its\n * own limits in CSS as well, so a length limit holds before any script runs and while the window\n * is resized.\n */\n\nimport { computed, inject, onBeforeUnmount, ref, useAttrs, useId, watch } from 'vue'\n\nimport { isDev } from '../../utils/env'\nimport { resizableKey } from './context'\nimport type { ResizableLength } from './VResizable.vue'\n\ninterface ResizablePanelProps {\n  /** Which panel this is among its siblings, set by VResizable. Do not set it yourself. */\n  index?: number\n  /**\n   * The starting size in percent, used when the group's v-model gives none. Panels without one\n   * share what is left equally.\n   */\n  defaultSize?: number\n  /** The smallest size: a number in percent, or a CSS length such as `200px` or `12rem`. */\n  minSize?: ResizableLength\n  /** The largest size: a number in percent, or a CSS length. */\n  maxSize?: ResizableLength\n  /**\n   * Lets the panel collapse: dragged past the middle of its minimum, or with Enter on its\n   * handle.\n   */\n  collapsible?: boolean\n  /**\n   * The size of the collapsed panel, in percent or as a CSS length such as the width of an icon\n   * rail. At 0, the default, its content is hidden.\n   */\n  collapsedSize?: ResizableLength\n  /**\n   * What the panel is called. It names the handle that resizes it; the dictionary's \"Panel 2\"\n   * otherwise.\n   */\n  label?: string\n}\n\nconst props = withDefaults(defineProps<ResizablePanelProps>(), {\n  index: 0,\n  defaultSize: undefined,\n  minSize: 0,\n  maxSize: undefined,\n  collapsible: false,\n  collapsedSize: 0,\n  label: undefined,\n})\n\n/** Whether the panel is collapsed. It only takes effect on a `collapsible` panel. */\nconst collapsed = defineModel<boolean>('collapsed', { default: false })\n\ndefineSlots<{\n  /** The panel's content. */\n  default(): unknown\n}>()\n\nconst group = inject(resizableKey, null)\nconst attrs = useAttrs()\nconst id = useId()\nconst el = ref<HTMLElement | null>(null)\n\nconst isCollapsed = computed(() => props.collapsible && collapsed.value)\n\nconst cssLength = (length: ResizableLength) => (typeof length === 'number' ? `${length}%` : length)\n\n/** A collapsed size of zero leaves nothing to read, so the content is hidden, focus included. */\nconst hidesContent = computed(\n  () => isCollapsed.value && Number.parseFloat(String(props.collapsedSize)) === 0,\n)\n\n// @core\n/*\n * The value the group last wrote, so the watcher below tells the group's own writes from the\n * consumer's. Only the consumer's ask the group to make room.\n */\nlet fromGroup: boolean | undefined\n\ngroup?.register(id, {\n  get index() {\n    return props.index\n  },\n  get el() {\n    return el.value\n  },\n  get minSize() {\n    return props.minSize\n  },\n  get maxSize() {\n    return props.maxSize\n  },\n  get collapsible() {\n    return props.collapsible\n  },\n  get collapsedSize() {\n    return props.collapsedSize\n  },\n  get collapsed() {\n    return isCollapsed.value\n  },\n  setCollapsed(value) {\n    if (collapsed.value === value) return\n    fromGroup = value\n    collapsed.value = value\n  },\n})\nonBeforeUnmount(() => group?.unregister(id))\n\nwatch(collapsed, (value) => {\n  const own = value === fromGroup\n  fromGroup = undefined\n  if (!own && props.collapsible) group?.toggle(props.index, value)\n})\n\n// @devwarn\nif (isDev) {\n  if (!group) console.warn('[VResizablePanel] Place it directly inside a VResizable.')\n  watch(\n    () => collapsed.value && !props.collapsible,\n    (wrong) => {\n      if (wrong) console.warn('[VResizablePanel] `collapsed` has no effect without `collapsible`.')\n    },\n    { immediate: true },\n  )\n}\n\n// Every variable is set, even to its default, so that a nested group's panel never inherits\n// the limits of the panel it sits in.\nconst style = computed(() => ({\n  '--resizable-panel-size': String(group?.sizeAt(props.index) ?? 1),\n  '--resizable-panel-min': cssLength(props.minSize),\n  '--resizable-panel-max': props.maxSize === undefined ? 'none' : cssLength(props.maxSize),\n  '--resizable-panel-collapsed': cssLength(props.collapsedSize),\n}))\n</script>\n\n<template>\n  <div\n    :id=\"(attrs.id as string | undefined) ?? id\"\n    ref=\"el\"\n    class=\"v-resizable-panel\"\n    :data-collapsed=\"isCollapsed ? '' : undefined\"\n    :data-hidden=\"hidesContent ? '' : undefined\"\n    :style=\"style\"\n  >\n    <slot />\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  /*\n   * The basis is the size itself, padding and border included, so a padded panel still takes its\n   * exact share. Growing by the same weight spreads any space left over, such as that of a\n   * collapsed sibling, in proportion; the 1px handles are shrunk off the same way.\n   */\n  .v-resizable-panel {\n    box-sizing: border-box;\n    flex: var(--resizable-panel-size) var(--resizable-panel-size)\n      calc(var(--resizable-panel-size) * 1%);\n    overflow: auto;\n  }\n\n  .v-resizable[data-orientation='horizontal'] > .v-resizable-panel {\n    min-inline-size: var(--resizable-panel-min);\n    max-inline-size: var(--resizable-panel-max);\n  }\n\n  .v-resizable[data-orientation='vertical'] > .v-resizable-panel {\n    min-block-size: var(--resizable-panel-min);\n    max-block-size: var(--resizable-panel-max);\n  }\n\n  .v-resizable[data-orientation] > .v-resizable-panel[data-collapsed] {\n    flex: 0 0 var(--resizable-panel-collapsed);\n    min-inline-size: 0;\n    max-inline-size: none;\n    min-block-size: 0;\n    max-block-size: none;\n  }\n\n  /* Removed from the layout as well, or its padding would keep the panel open. */\n  .v-resizable-panel[data-hidden] {\n    display: none;\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA0CA,IAAM,IAAQ,GAWR,IAAY,EAAoB,GAAC,WAA+B,GAOhE,IAAQ,EAAO,GAAc,IAAI,GACjC,IAAQ,EAAS,GACjB,IAAK,EAAM,GACX,IAAK,EAAwB,IAAI,GAEjC,IAAc,QAAe,EAAM,eAAe,EAAU,KAAK,GAEjE,KAAa,MAA6B,OAAO,KAAW,WAAW,GAAG,EAAO,KAAK,GAGtF,IAAe,QACb,EAAY,SAAS,OAAO,WAAW,OAAO,EAAM,aAAa,CAAC,MAAM,CAChF,GAOI;EAuCJ,AArCA,GAAO,SAAS,GAAI;GAClB,IAAI,QAAQ;IACV,OAAO,EAAM;GACf;GACA,IAAI,KAAK;IACP,OAAO,EAAG;GACZ;GACA,IAAI,UAAU;IACZ,OAAO,EAAM;GACf;GACA,IAAI,UAAU;IACZ,OAAO,EAAM;GACf;GACA,IAAI,cAAc;IAChB,OAAO,EAAM;GACf;GACA,IAAI,gBAAgB;IAClB,OAAO,EAAM;GACf;GACA,IAAI,YAAY;IACd,OAAO,EAAY;GACrB;GACA,aAAa,GAAO;IACd,EAAU,UAAU,MACxB,IAAY,GACZ,EAAU,QAAQ;GACpB;EACF,CAAC,GACD,QAAsB,GAAO,WAAW,CAAE,CAAC,GAE3C,EAAM,IAAY,MAAU;GAC1B,IAAM,IAAM,MAAU;GAEtB,AADA,IAAY,KAAA,GACR,CAAC,KAAO,EAAM,eAAa,GAAO,OAAO,EAAM,OAAO,CAAK;EACjE,CAAC,GAGG,MACG,KAAO,QAAQ,KAAK,0DAA0D,GACnF,QACQ,EAAU,SAAS,CAAC,EAAM,cAC/B,MAAU;GACT,AAAI,KAAO,QAAQ,KAAK,oEAAoE;EAC9F,GACA,EAAE,WAAW,GAAK,CACpB;EAKF,IAAM,IAAQ,SAAgB;GAC5B,0BAA0B,OAAO,GAAO,OAAO,EAAM,KAAK,KAAK,CAAC;GAChE,yBAAyB,EAAU,EAAM,OAAO;GAChD,yBAAyB,EAAM,YAAY,KAAA,IAAY,SAAS,EAAU,EAAM,OAAO;GACvF,+BAA+B,EAAU,EAAM,aAAa;EAC9D,EAAE;yBAIA,EASM,OAAA;GARH,IAAK,EAAA,CAAA,CAAK,CAAC,MAA6B,EAAA,CAAA;YACrC;GAAJ,KAAI;GACJ,OAAM;GACL,kBAAgB,EAAA,QAAW,KAAQ,KAAA;GACnC,eAAa,EAAA,QAAY,KAAQ,KAAA;GACjC,OAAK,EAAE,EAAA,KAAK;MAEb,EAAQ,EAAA,QAAA,SAAA,CAAA,GAAA,IAAA,CAAA"}

package/dist/components/VResizable/context.d.ts

@@ -0,0 +1,24 @@
+import { InjectionKey } from 'vue';
+import { ResizableOrientation, ResizableLength } from './VResizable.js';
+export interface ResizablePanelEntry {
+    /** Which panel this is among its siblings. */
+    readonly index: number;
+    readonly el: HTMLElement | null;
+    readonly minSize: ResizableLength;
+    readonly maxSize: ResizableLength | undefined;
+    readonly collapsible: boolean;
+    readonly collapsedSize: ResizableLength;
+    readonly collapsed: boolean;
+    /** Writes the panel's collapsed model on behalf of the group. */
+    setCollapsed: (value: boolean) => void;
+}
+export interface ResizableContext {
+    readonly orientation: ResizableOrientation;
+    /** The size of a panel in percent, used as its `flex-grow` weight. */
+    sizeAt: (index: number) => number;
+    register: (id: string, entry: ResizablePanelEntry) => void;
+    unregister: (id: string) => void;
+    /** Collapses or reopens a panel whose collapsed model was changed from outside the group. */
+    toggle: (index: number, collapsed: boolean) => void;
+}
+export declare const resizableKey: InjectionKey<ResizableContext>;

package/dist/components/VResizable/context.js

@@ -0,0 +1,6 @@
+//#region src/components/VResizable/context.ts
+var e = Symbol("v-resizable");
+//#endregion
+export { e as resizableKey };
+
+//# sourceMappingURL=context.js.map

package/dist/components/VResizable/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","names":[],"sources":["../../../src/components/VResizable/context.ts"],"sourcesContent":["/**\n * Panels register what the group needs when it measures and moves them: their element, their\n * limits and their collapsed model. Positions come from the group, which clones each panel's\n * VNode with its `index` while rendering.\n */\n\nimport type { InjectionKey } from 'vue'\n\nimport type { ResizableOrientation, ResizableLength } from './VResizable.vue'\n\nexport interface ResizablePanelEntry {\n  /** Which panel this is among its siblings. */\n  readonly index: number\n  readonly el: HTMLElement | null\n  readonly minSize: ResizableLength\n  readonly maxSize: ResizableLength | undefined\n  readonly collapsible: boolean\n  readonly collapsedSize: ResizableLength\n  readonly collapsed: boolean\n  /** Writes the panel's collapsed model on behalf of the group. */\n  setCollapsed: (value: boolean) => void\n}\n\nexport interface ResizableContext {\n  readonly orientation: ResizableOrientation\n  /** The size of a panel in percent, used as its `flex-grow` weight. */\n  sizeAt: (index: number) => number\n  register: (id: string, entry: ResizablePanelEntry) => void\n  unregister: (id: string) => void\n  /** Collapses or reopens a panel whose collapsed model was changed from outside the group. */\n  toggle: (index: number, collapsed: boolean) => void\n}\n\nexport const resizableKey: InjectionKey<ResizableContext> = Symbol('v-resizable')\n"],"mappings":";AAiCA,IAAa,IAA+C,OAAO,aAAa"}

package/dist/components/VResizable/layout.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Panel sizes are percentages of the space the panels share, summing to 100. These functions are
+ * pure: the component measures the DOM and converts CSS lengths before calling them.
+ */
+/** The limits of one panel, already converted to percentages. */
+export interface PanelLimits {
+    min: number;
+    max: number;
+    collapsible: boolean;
+    collapsedSize: number;
+}
+export declare const isCollapsedAt: (size: number, limits: PanelLimits) => boolean;
+/**
+ * The starting sizes: each panel's `defaultSize` where given, the rest shared equally. Sizes that
+ * do not add up to 100 are scaled to.
+ */
+export declare function defaultSizes(defaults: (number | undefined)[]): number[];
+/**
+ * Moves handle `handle`, which sits between panels `handle` and `handle + 1`, so that the panel
+ * before it grows by `delta` (or shrinks, when negative). The space is taken from the panels on
+ * the other side, nearest first, each down to its minimum; and given to the panels on this side,
+ * nearest first, each up to its maximum.
+ *
+ * `snap` places the collapse point of the two neighbours between their collapsed size and their
+ * minimum: 0.5 for a pointer, which must travel half that distance, 1 for the keyboard, which
+ * collapses or reopens on the first press.
+ */
+export declare function resizeAt(base: readonly number[], handle: number, delta: number, limits: readonly PanelLimits[], snap?: number): number[];

package/dist/components/VResizable/layout.js

@@ -0,0 +1,41 @@
+//#region src/components/VResizable/layout.ts
+var e = .01, t = (t, n) => n.collapsible && t <= n.collapsedSize + e, n = (e) => Math.round(e * 1e3) / 1e3;
+function r(e) {
+	let t = e.reduce((e, t) => e + (t ?? 0), 0), r = e.filter((e) => e === void 0).length, i = r ? Math.max(0, 100 - t) / r : 0, a = e.map((e) => e ?? i), o = a.reduce((e, t) => e + t, 0);
+	return o ? a.map((e) => n(e / o * 100)) : e.map(() => n(100 / (e.length || 1)));
+}
+function i(r, i, a, o, s = .5) {
+	if (Math.abs(a) < e) return [...r];
+	let c = a > 0, l = c ? i : i + 1, u = c ? -1 : 1, d = c ? i + 1 : i, f = c ? 1 : -1, p = (e) => e >= 0 && e < r.length, m = Math.abs(a), h = o[l], g = t(r[l], h), _ = Math.max(0, h.min - h.collapsedSize);
+	if (g) {
+		if (m < _ * (1 - s) - e) return [...r];
+		m = Math.max(m, _);
+	}
+	let v = 0;
+	for (let e = l; p(e); e += u) e !== l && t(r[e], o[e]) || (v += Math.max(0, o[e].max - r[e]));
+	m = Math.min(m, v);
+	let y = [...r], b = 0;
+	for (let n = d; p(n) && m - b > e; n += f) {
+		let i = o[n], a = r[n];
+		if (t(a, i)) continue;
+		let c = a - (m - b);
+		if (c < i.min) {
+			let t = i.collapsedSize + (i.min - i.collapsedSize) * s;
+			c = i.collapsible && n === d && c < t - e && b + a - i.collapsedSize <= v + e ? i.collapsedSize : i.min;
+		}
+		c = Math.min(c, a), b += a - c, y[n] = c;
+	}
+	if (g && b < _ - e) return [...r];
+	let x = b;
+	for (let n = l; p(n) && x > e; n += u) {
+		let e = o[n];
+		if (n !== l && t(r[n], e)) continue;
+		let i = y[n], a = Math.min(e.max, i + x);
+		x -= a - i, y[n] = a;
+	}
+	return x > e ? [...r] : y.map(n);
+}
+//#endregion
+export { r as defaultSizes, t as isCollapsedAt, i as resizeAt };
+
+//# sourceMappingURL=layout.js.map

package/dist/components/VResizable/layout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout.js","names":[],"sources":["../../../src/components/VResizable/layout.ts"],"sourcesContent":["// @core\n/**\n * Panel sizes are percentages of the space the panels share, summing to 100. These functions are\n * pure: the component measures the DOM and converts CSS lengths before calling them.\n */\n\n/** The limits of one panel, already converted to percentages. */\nexport interface PanelLimits {\n  min: number\n  max: number\n  collapsible: boolean\n  collapsedSize: number\n}\n\n/** Below this difference two sizes are equal, which absorbs the rounding of written sizes. */\nconst EPSILON = 0.01\n\nexport const isCollapsedAt = (size: number, limits: PanelLimits) =>\n  limits.collapsible && size <= limits.collapsedSize + EPSILON\n\n/** Rounds a written size so the model does not carry floating-point noise. */\nconst roundSize = (size: number) => Math.round(size * 1000) / 1000\n\n/**\n * The starting sizes: each panel's `defaultSize` where given, the rest shared equally. Sizes that\n * do not add up to 100 are scaled to.\n */\nexport function defaultSizes(defaults: (number | undefined)[]): number[] {\n  const given = defaults.reduce<number>((sum, size) => sum + (size ?? 0), 0)\n  const free = defaults.filter((size) => size === undefined).length\n  const share = free ? Math.max(0, 100 - given) / free : 0\n  const sizes = defaults.map((size) => size ?? share)\n  const total = sizes.reduce((sum, size) => sum + size, 0)\n  if (!total) return defaults.map(() => roundSize(100 / (defaults.length || 1)))\n  return sizes.map((size) => roundSize((size / total) * 100))\n}\n\n/**\n * Moves handle `handle`, which sits between panels `handle` and `handle + 1`, so that the panel\n * before it grows by `delta` (or shrinks, when negative). The space is taken from the panels on\n * the other side, nearest first, each down to its minimum; and given to the panels on this side,\n * nearest first, each up to its maximum.\n *\n * `snap` places the collapse point of the two neighbours between their collapsed size and their\n * minimum: 0.5 for a pointer, which must travel half that distance, 1 for the keyboard, which\n * collapses or reopens on the first press.\n */\nexport function resizeAt(\n  base: readonly number[],\n  handle: number,\n  delta: number,\n  limits: readonly PanelLimits[],\n  snap = 0.5,\n): number[] {\n  if (Math.abs(delta) < EPSILON) return [...base]\n  const growing = delta > 0\n  const growFirst = growing ? handle : handle + 1\n  const growStep = growing ? -1 : 1\n  const shrinkFirst = growing ? handle + 1 : handle\n  const shrinkStep = growing ? 1 : -1\n  const inRange = (i: number) => i >= 0 && i < base.length\n\n  let want = Math.abs(delta)\n\n  // A collapsed neighbour stays shut until the pull passes its collapse point, then opens at\n  // its minimum at once: a panel narrower than its minimum is a state no rule allows.\n  const opener = limits[growFirst]!\n  const opening = isCollapsedAt(base[growFirst]!, opener)\n  const openGap = Math.max(0, opener.min - opener.collapsedSize)\n  if (opening) {\n    if (want < openGap * (1 - snap) - EPSILON) return [...base]\n    want = Math.max(want, openGap)\n  }\n\n  // A collapsed panel further away is not reopened by a drag that only passes by.\n  let room = 0\n  for (let i = growFirst; inRange(i); i += growStep) {\n    if (i !== growFirst && isCollapsedAt(base[i]!, limits[i]!)) continue\n    room += Math.max(0, limits[i]!.max - base[i]!)\n  }\n  want = Math.min(want, room)\n\n  const next = [...base]\n  let taken = 0\n  for (let i = shrinkFirst; inRange(i) && want - taken > EPSILON; i += shrinkStep) {\n    const lim = limits[i]!\n    const size = base[i]!\n    if (isCollapsedAt(size, lim)) continue\n    let target = size - (want - taken)\n    if (target < lim.min) {\n      const collapsePoint = lim.collapsedSize + (lim.min - lim.collapsedSize) * snap\n      const canCollapse =\n        lim.collapsible &&\n        i === shrinkFirst &&\n        target < collapsePoint - EPSILON &&\n        taken + size - lim.collapsedSize <= room + EPSILON\n      target = canCollapse ? lim.collapsedSize : lim.min\n    }\n    target = Math.min(target, size)\n    taken += size - target\n    next[i] = target\n  }\n\n  if (opening && taken < openGap - EPSILON) return [...base]\n\n  let left = taken\n  for (let i = growFirst; inRange(i) && left > EPSILON; i += growStep) {\n    const lim = limits[i]!\n    if (i !== growFirst && isCollapsedAt(base[i]!, lim)) continue\n    const size = next[i]!\n    const target = Math.min(lim.max, size + left)\n    left -= target - size\n    next[i] = target\n  }\n  if (left > EPSILON) return [...base]\n\n  return next.map(roundSize)\n}\n"],"mappings":";AAeA,IAAM,IAAU,KAEH,KAAiB,GAAc,MAC1C,EAAO,eAAe,KAAQ,EAAO,gBAAgB,GAGjD,KAAa,MAAiB,KAAK,MAAM,IAAO,GAAI,IAAI;AAM9D,SAAgB,EAAa,GAA4C;CACvE,IAAM,IAAQ,EAAS,QAAgB,GAAK,MAAS,KAAO,KAAQ,IAAI,CAAC,GACnE,IAAO,EAAS,QAAQ,MAAS,MAAS,KAAA,CAAS,CAAC,CAAC,QACrD,IAAQ,IAAO,KAAK,IAAI,GAAG,MAAM,CAAK,IAAI,IAAO,GACjD,IAAQ,EAAS,KAAK,MAAS,KAAQ,CAAK,GAC5C,IAAQ,EAAM,QAAQ,GAAK,MAAS,IAAM,GAAM,CAAC;CAEvD,OADK,IACE,EAAM,KAAK,MAAS,EAAW,IAAO,IAAS,GAAG,CAAC,IADvC,EAAS,UAAU,EAAU,OAAO,EAAS,UAAU,EAAE,CAAC;AAE/E;AAYA,SAAgB,EACd,GACA,GACA,GACA,GACA,IAAO,IACG;CACV,IAAI,KAAK,IAAI,CAAK,IAAI,GAAS,OAAO,CAAC,GAAG,CAAI;CAC9C,IAAM,IAAU,IAAQ,GAClB,IAAY,IAAU,IAAS,IAAS,GACxC,IAAW,IAAU,KAAK,GAC1B,IAAc,IAAU,IAAS,IAAI,GACrC,IAAa,IAAU,IAAI,IAC3B,KAAW,MAAc,KAAK,KAAK,IAAI,EAAK,QAE9C,IAAO,KAAK,IAAI,CAAK,GAInB,IAAS,EAAO,IAChB,IAAU,EAAc,EAAK,IAAa,CAAM,GAChD,IAAU,KAAK,IAAI,GAAG,EAAO,MAAM,EAAO,aAAa;CAC7D,IAAI,GAAS;EACX,IAAI,IAAO,KAAW,IAAI,KAAQ,GAAS,OAAO,CAAC,GAAG,CAAI;EAC1D,IAAO,KAAK,IAAI,GAAM,CAAO;CAC/B;CAGA,IAAI,IAAO;CACX,KAAK,IAAI,IAAI,GAAW,EAAQ,CAAC,GAAG,KAAK,GACnC,MAAM,KAAa,EAAc,EAAK,IAAK,EAAO,EAAG,MACzD,KAAQ,KAAK,IAAI,GAAG,EAAO,EAAE,CAAE,MAAM,EAAK,EAAG;CAE/C,IAAO,KAAK,IAAI,GAAM,CAAI;CAE1B,IAAM,IAAO,CAAC,GAAG,CAAI,GACjB,IAAQ;CACZ,KAAK,IAAI,IAAI,GAAa,EAAQ,CAAC,KAAK,IAAO,IAAQ,GAAS,KAAK,GAAY;EAC/E,IAAM,IAAM,EAAO,IACb,IAAO,EAAK;EAClB,IAAI,EAAc,GAAM,CAAG,GAAG;EAC9B,IAAI,IAAS,KAAQ,IAAO;EAC5B,IAAI,IAAS,EAAI,KAAK;GACpB,IAAM,IAAgB,EAAI,iBAAiB,EAAI,MAAM,EAAI,iBAAiB;GAM1E,IAJE,EAAI,eACJ,MAAM,KACN,IAAS,IAAgB,KACzB,IAAQ,IAAO,EAAI,iBAAiB,IAAO,IACtB,EAAI,gBAAgB,EAAI;EACjD;EAGA,AAFA,IAAS,KAAK,IAAI,GAAQ,CAAI,GAC9B,KAAS,IAAO,GAChB,EAAK,KAAK;CACZ;CAEA,IAAI,KAAW,IAAQ,IAAU,GAAS,OAAO,CAAC,GAAG,CAAI;CAEzD,IAAI,IAAO;CACX,KAAK,IAAI,IAAI,GAAW,EAAQ,CAAC,KAAK,IAAO,GAAS,KAAK,GAAU;EACnE,IAAM,IAAM,EAAO;EACnB,IAAI,MAAM,KAAa,EAAc,EAAK,IAAK,CAAG,GAAG;EACrD,IAAM,IAAO,EAAK,IACZ,IAAS,KAAK,IAAI,EAAI,KAAK,IAAO,CAAI;EAE5C,AADA,KAAQ,IAAS,GACjB,EAAK,KAAK;CACZ;CAGA,OAFI,IAAO,IAAgB,CAAC,GAAG,CAAI,IAE5B,EAAK,IAAI,CAAS;AAC3B"}

package/dist/components/VSelect/VSelect.css

@@ -0,0 +1,2 @@
+@layer vectis.reset, vectis.tokens, vectis.components, vectis.utilities;
+@layer vectis.components{.v-select{anchor-scope:--select-anchor;width:100%;font-family:var(--vectis-text-family)}.v-select-control{display:block}.v-select-control .v-input-field{anchor-name:--select-anchor}.v-select-panel{max-block-size:var(--vectis-control-size-select-list-max-block)}.v-select-trigger{text-align:start;cursor:pointer;align-items:center;display:flex}.v-select[data-multiple] .v-select-trigger{flex:1 1 0}.v-select-value,.v-select-placeholder{text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}.v-select-placeholder{color:var(--vectis-color-text-subtle)}.v-select-spinner{color:var(--vectis-color-text-muted)}.v-select:has(.v-listbox-text){min-inline-size:0}}