@dou-ui/dashboard 0.0.0-stage → 0.1.0-alpha.0

package/dist/grid/grid-layout.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,767 @@
+import { deriveLayout, findPlace, fitItem, layoutHeight, moveItem, moveItemBy, normalizeLayout, resizeItem, resizeItemBy } from "../layout/engine.js";
+import { format, useDashboardMessages } from "../locale.js";
+import grid_item_default, { gridItemKey } from "./grid-item.js";
+import { DEFAULT_BREAKPOINTS, DEFAULT_COLUMNS, gridTiers } from "./tiers.js";
+import { holdPointer, useElementSize } from "dou-ui";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, defineComponent, mergeModels, normalizeClass, normalizeStyle, onBeforeUnmount, openBlock, provide, ref, renderList, renderSlot, shallowRef, toDisplayString, unref, useId, useModel, useSlots, watch } from "vue";
+// src/grid/grid-layout.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["role", "aria-label"];
+var _hoisted_2 = {
+	key: 2,
+	class: "dou-grid-layout__live",
+	"aria-live": "assertive",
+	"aria-atomic": "true"
+};
+var DRAG_DISTANCE = 4;
+/** How long a finger rests on an item before it is picked up, in ms. */
+var HOLD_DELAY = 400;
+/** How far a finger may move while resting, in px; further is a scroll. */
+var HOLD_SLOP = 8;
+/** The band along the top and bottom of the scrolling area that scrolls it during a drag, in px. */
+var EDGE = 56;
+/** The fastest that band scrolls, in px per frame. */
+var EDGE_SPEED = 20;
+/** How long items keep their transition after a drop, in ms (a little over the motion token). */
+var SETTLE = 320;
+var NO_DRAG = "input, textarea, select, [contenteditable=\"\"], [contenteditable=\"true\"], [data-dou-nodrag]";
+var grid_layout_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "DouGridLayout",
+	__name: "grid-layout",
+	props: /*@__PURE__*/ mergeModels({
+		columns: { default: () => DEFAULT_COLUMNS },
+		breakpoints: { default: () => DEFAULT_BREAKPOINTS },
+		rowHeight: { default: 80 },
+		gap: { default: 16 },
+		compact: {
+			type: [String, Boolean],
+			default: "vertical"
+		},
+		editable: { type: Boolean },
+		handle: { type: Boolean },
+		resize: {
+			type: [Boolean, Array],
+			default: true
+		},
+		itemLabel: {},
+		label: {},
+		messages: {}
+	}, {
+		"modelValue": { default: () => [] },
+		"modelModifiers": {},
+		"layouts": { default: () => ({}) },
+		"layoutsModifiers": {}
+	}),
+	emits: /*@__PURE__*/ mergeModels([
+		"change",
+		"dragStart",
+		"dragEnd",
+		"drop",
+		"breakpointChange"
+	], ["update:modelValue", "update:layouts"]),
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const model = useModel(__props, "modelValue");
+		const layouts = useModel(__props, "layouts");
+		const messages = useDashboardMessages(() => props.messages);
+		const slots = useSlots();
+		const hintId = `${useId()}-hint`;
+		provide(gridItemKey, {
+			slots,
+			hintId,
+			resizeLabel: () => messages.value.resize
+		});
+		/** How far a mouse moves before a press becomes a move, in px. */
+		const root = ref();
+		const tiers = computed(() => gridTiers(props.columns, props.breakpoints));
+		const { width: gridWidth } = useElementSize(root);
+		const tier = computed(() => {
+			const list = tiers.value;
+			if (!gridWidth.value) return list[0];
+			return list.find((t) => gridWidth.value >= t.min) ?? list.at(-1);
+		});
+		/** The widest breakpoint: the one `v-model` holds. */
+		const isMain = computed(() => tier.value === tiers.value[0]);
+		const optionsOf = (t) => ({
+			columns: Math.max(1, Math.round(t.columns)),
+			compact: props.compact
+		});
+		const options = computed(() => optionsOf(tier.value));
+		const mainLayout = computed(() => normalizeLayout(model.value, optionsOf(tiers.value[0])));
+		const settledRaw = computed(() => {
+			if (isMain.value) return mainLayout.value;
+			const main = mainLayout.value;
+			const derived = deriveLayout(main, optionsOf(tiers.value[0]).columns, options.value);
+			const saved = layouts.value[tier.value.name];
+			if (!saved?.length) return derived;
+			const places = new Map(saved.map((place) => [place.id, place]));
+			return normalizeLayout(main.map((item, i) => {
+				const place = places.get(item.id);
+				return place ? {
+					...item,
+					x: place.x,
+					y: place.y,
+					w: place.w,
+					h: place.h
+				} : derived[i];
+			}), options.value);
+		});
+		/**
+		* The items drawn last time are reused where nothing about them changed, so
+		* a change to one item draws only that one again, even when the layout had
+		* to be worked out anew (e.g. from a document that wasn't compacted).
+		*/
+		let drawnById = /* @__PURE__ */ new Map();
+		const ITEM_KEYS = [
+			"x",
+			"y",
+			"w",
+			"h",
+			"minW",
+			"maxW",
+			"minH",
+			"maxH",
+			"locked"
+		];
+		const settled = computed(() => {
+			const next = /* @__PURE__ */ new Map();
+			const list = settledRaw.value.map((item) => {
+				const old = drawnById.get(item.id);
+				const keep = old && ITEM_KEYS.every((key) => old[key] === item[key]) ? old : item;
+				next.set(item.id, keep);
+				return keep;
+			});
+			drawnById = next;
+			return list;
+		});
+		watch(() => tier.value.name, (name, old) => old !== void 0 && emit("breakpointChange", name));
+		/** The layout while a move or resize is under way; shown instead of `settled`. */
+		const preview = shallowRef(null);
+		const layout = computed(() => preview.value ?? settled.value);
+		const gaps = computed(() => Array.isArray(props.gap) ? props.gap : [props.gap, props.gap]);
+		const handles = computed(() => {
+			const list = props.resize === false ? [] : props.resize === true ? [
+				"e",
+				"s",
+				"se"
+			] : props.resize;
+			return options.value.columns === 1 ? list.filter((edge) => edge !== "e") : list;
+		});
+		const session = shallowRef(null);
+		const settling = ref(false);
+		let settleTimer;
+		const isPointer = (s) => s?.source === "pointer";
+		/**
+		* Items as drawn: the one under the pointer keeps its old place, and
+		* follows the pointer from there; one being dropped in shows only as the
+		* place it would take.
+		*/
+		const drawn = computed(() => {
+			const s = session.value;
+			if (!isPointer(s)) return layout.value;
+			if (s.kind === "drop") return layout.value.filter((item) => item.id !== s.id);
+			return layout.value.map((item) => item.id === s.id ? s.item : item);
+		});
+		/** Where the item under the pointer would land. */
+		const ghost = computed(() => {
+			const s = session.value;
+			return isPointer(s) ? layout.value.find((item) => item.id === s.id) : void 0;
+		});
+		function stateOf(id) {
+			const s = session.value;
+			if (s?.id !== id) return "idle";
+			return s.kind === "resize" ? "resizing" : "dragging";
+		}
+		const rootStyle = computed(() => ({
+			"--dou-grid-columns": options.value.columns,
+			"--dou-grid-row": `${props.rowHeight}px`,
+			"--dou-grid-gap-x": `${gaps.value[0]}px`,
+			"--dou-grid-gap-y": `${gaps.value[1]}px`,
+			"--dou-grid-rows": layoutHeight(layout.value)
+		}));
+		const cellStyle = (item) => ({
+			"--dou-grid-x": item.x,
+			"--dou-grid-y": item.y,
+			"--dou-grid-w": item.w,
+			"--dou-grid-h": item.h
+		});
+		const labelOf = (item) => props.itemLabel?.(item) ?? item.id;
+		/** Where an item is, read out: its cell and size, or with one column its place in the list. */
+		function positionText(item, items) {
+			if (options.value.columns > 1) return format(messages.value.position, {
+				x: item.x + 1,
+				y: item.y + 1,
+				w: item.w,
+				h: item.h
+			});
+			let n = 1;
+			for (const other of items) if (other.y < item.y) n++;
+			return format(messages.value.order, {
+				n,
+				count: items.length
+			});
+		}
+		const live = ref("");
+		function say(text) {
+			live.value = "";
+			requestAnimationFrame(() => live.value = text);
+		}
+		const focusId = ref();
+		const firstId = computed(() => {
+			let first;
+			for (const item of settled.value) if (!first || item.y < first.y || item.y === first.y && item.x < first.x) first = item;
+			return first?.id;
+		});
+		const tabbableId = computed(() => focusId.value && settled.value.some((item) => item.id === focusId.value) ? focusId.value : firstId.value);
+		const tabindexOf = (item) => props.editable ? item.id === tabbableId.value ? 0 : -1 : void 0;
+		function itemElement(id) {
+			for (const child of root.value?.children ?? []) if (child instanceof HTMLElement && child.dataset.gridId === id) return child;
+		}
+		/** The item element an event happened on: a direct child of this grid, not of a grid inside an item. */
+		function ownItem(target) {
+			const el = target instanceof Element ? target.closest("[data-grid-id]") : null;
+			return el && el.parentElement === root.value ? el : null;
+		}
+		function onFocusIn(event) {
+			const el = ownItem(event.target);
+			if (el) focusId.value = el.dataset.gridId;
+		}
+		/** The nearest item in the direction of an arrow key. */
+		function neighbour(from, dx, dy) {
+			const cx = from.x + from.w / 2;
+			const cy = from.y + from.h / 2;
+			let best;
+			let bestScore = Infinity;
+			for (const item of settled.value) {
+				if (item === from) continue;
+				const ix = item.x + item.w / 2 - cx;
+				const iy = item.y + item.h / 2 - cy;
+				const along = dx ? ix * dx : iy * dy;
+				if (along <= 0) continue;
+				const score = along + Math.abs(dx ? iy : ix) * 2;
+				if (score < bestScore) [best, bestScore] = [item, score];
+			}
+			return best;
+		}
+		function commit(next, s, reason) {
+			if (!next || next.length === s.base.length && next.every((item, i) => item === s.base[i])) return false;
+			const breakpoint = tier.value.name;
+			const drop = s.drop;
+			let added;
+			if (isMain.value) {
+				const items = next.slice();
+				added = drop && items.find((other) => other.id === s.id);
+				model.value = items;
+				emit("change", {
+					items,
+					id: s.id,
+					reason,
+					breakpoint
+				});
+			} else {
+				if (drop) {
+					const main = mainLayout.value;
+					const wide = optionsOf(tiers.value[0]);
+					const fitted = fitItem({
+						...drop.item,
+						x: 0,
+						y: 0
+					}, wide.columns);
+					added = {
+						...fitted,
+						...findPlace(main, fitted, wide)
+					};
+					model.value = [...main, added];
+				}
+				layouts.value = {
+					...layouts.value,
+					[breakpoint]: next.map(({ id, x, y, w, h }) => ({
+						id,
+						x,
+						y,
+						w,
+						h
+					}))
+				};
+				emit("change", {
+					items: next.slice(),
+					id: s.id,
+					reason,
+					breakpoint
+				});
+			}
+			if (drop && added) emit("drop", {
+				item: added,
+				data: drop.data,
+				breakpoint
+			});
+			return true;
+		}
+		function settle() {
+			settling.value = true;
+			clearTimeout(settleTimer);
+			settleTimer = setTimeout(() => settling.value = false, SETTLE);
+		}
+		function finish(keep) {
+			const s = session.value;
+			if (!s) return;
+			const next = preview.value;
+			if (isPointer(s)) stopPointer(s);
+			session.value = null;
+			preview.value = null;
+			settle();
+			const reason = s.source === "keyboard" ? "keyboard" : s.kind;
+			const changed = keep && commit(next, s, reason);
+			emit("dragEnd", {
+				id: s.id,
+				kind: s.kind,
+				cancelled: !keep || s.kind === "drop" && !changed
+			});
+			if (s.source !== "keyboard" && (keep || s.kind === "drop") && !changed) return;
+			const items = (changed ? next : s.base) ?? s.base;
+			const item = items.find((other) => other.id === s.id) ?? s.item;
+			const label = labelOf(item);
+			say(changed || keep && s.source === "keyboard" ? format(messages.value.dropped, {
+				item: label,
+				position: positionText(item, items)
+			}) : format(messages.value.cancelled, { item: label }));
+		}
+		let press = null;
+		let pointer = {
+			x: 0,
+			y: 0
+		};
+		let frame = 0;
+		function onPointerDown(event) {
+			if (!props.editable || session.value || press || !event.isPrimary) return;
+			if (event.pointerType === "mouse" && event.button !== 0) return;
+			const target = event.target;
+			const el = ownItem(target);
+			const id = el?.dataset.gridId;
+			const item = id === void 0 ? void 0 : settled.value.find((other) => other.id === id);
+			if (!el || !id || !item || item.locked) return;
+			const handle = target.closest("[data-grid-resize]");
+			let kind = "move";
+			let edge = null;
+			if (handle && handle.parentElement === el) {
+				kind = "resize";
+				edge = handle.dataset.gridResize;
+			} else {
+				if (props.handle) {
+					const part = target.closest("[data-dou-grid-handle]");
+					if (!part || part.closest("[data-grid-id]") !== el) return;
+				}
+				if (target.closest(NO_DRAG)) return;
+			}
+			listen({
+				event,
+				el,
+				id,
+				kind,
+				edge,
+				hold: holdPointer(event, root.value)
+			});
+		}
+		/** Follows a press until it becomes a drag (or a scroll, or nothing). */
+		function listen(next) {
+			const { event } = next;
+			press = next;
+			pointer = {
+				x: event.clientX,
+				y: event.clientY
+			};
+			window.addEventListener("pointermove", onPointerMove);
+			window.addEventListener("pointerup", onPointerUp);
+			window.addEventListener("pointercancel", onPointerCancel);
+			if (next.kind === "resize") {
+				event.preventDefault();
+				begin();
+			} else if (event.pointerType !== "mouse") next.timer = setTimeout(begin, HOLD_DELAY);
+		}
+		function startDrop(event, item, data) {
+			if (!props.editable || session.value || press || !event.isPrimary || !root.value) return;
+			if (event.pointerType === "mouse" && event.button !== 0) return;
+			if (settled.value.some((other) => other.id === item.id)) return;
+			listen({
+				event,
+				el: root.value,
+				id: item.id,
+				kind: "drop",
+				edge: null,
+				hold: holdPointer(event, root.value),
+				drop: {
+					item,
+					data
+				}
+			});
+		}
+		function onPointerMove(event) {
+			if (!press || event.pointerId !== press.event.pointerId) return;
+			pointer = {
+				x: event.clientX,
+				y: event.clientY
+			};
+			if (!session.value) {
+				const distance = Math.hypot(pointer.x - press.event.clientX, pointer.y - press.event.clientY);
+				if (press.event.pointerType === "mouse") {
+					if (distance >= DRAG_DISTANCE) begin();
+				} else if (distance > HOLD_SLOP) dropPress();
+				return;
+			}
+			track();
+		}
+		function onPointerUp(event) {
+			if (!press || event.pointerId !== press.event.pointerId) return;
+			if (session.value) finish(true);
+			else dropPress();
+		}
+		function onPointerCancel(event) {
+			if (!press || event.pointerId !== press.event.pointerId) return;
+			if (session.value) finish(false);
+			else dropPress();
+		}
+		function onWindowKeydown(event) {
+			if (event.key !== "Escape" || !isPointer(session.value)) return;
+			event.preventDefault();
+			event.stopPropagation();
+			finish(false);
+		}
+		function onScroll() {
+			if (isPointer(session.value)) track();
+		}
+		function dropPress() {
+			if (!press) return;
+			clearTimeout(press.timer);
+			press.hold.release();
+			press = null;
+			window.removeEventListener("pointermove", onPointerMove);
+			window.removeEventListener("pointerup", onPointerUp);
+			window.removeEventListener("pointercancel", onPointerCancel);
+		}
+		function scrollParent(el) {
+			for (let node = el.parentElement; node && node !== document.body; node = node.parentElement) {
+				const { overflowY } = getComputedStyle(node);
+				if (/(auto|scroll|overlay)/.test(overflowY) && node.scrollHeight > node.clientHeight) return node;
+			}
+			return null;
+		}
+		const scrollOf = (scroller) => scroller ? {
+			left: scroller.scrollLeft,
+			top: scroller.scrollTop
+		} : {
+			left: window.scrollX,
+			top: window.scrollY
+		};
+		function begin() {
+			const p = press;
+			const el = root.value;
+			if (!p || !el || session.value) return;
+			clearTimeout(p.timer);
+			const item = p.drop ? fitItem({
+				...p.drop.item,
+				x: 0,
+				y: 0
+			}, options.value.columns) : settled.value.find((other) => other.id === p.id);
+			if (!item) return dropPress();
+			const rect = el.getBoundingClientRect();
+			const [gx, gy] = gaps.value;
+			const columns = options.value.columns;
+			const col = (rect.width - gx * (columns - 1)) / columns;
+			const scroller = scrollParent(el);
+			const scroll = scrollOf(scroller);
+			const box = scroller?.getBoundingClientRect();
+			session.value = {
+				id: p.id,
+				kind: p.kind,
+				source: "pointer",
+				edge: p.edge,
+				base: settled.value,
+				item,
+				el: p.el,
+				startX: p.drop ? rect.left : p.event.clientX,
+				startY: p.drop ? rect.top : p.event.clientY,
+				scroller,
+				scrollLeft: scroll.left,
+				scrollTop: scroll.top,
+				view: box ? {
+					top: box.top,
+					bottom: box.bottom
+				} : {
+					top: 0,
+					bottom: window.innerHeight
+				},
+				col,
+				colStep: col + gx,
+				rowStep: props.rowHeight + gy,
+				left: item.x * (col + gx),
+				top: item.y * (props.rowHeight + gy),
+				width: item.w * col + (item.w - 1) * gx,
+				height: item.h * props.rowHeight + (item.h - 1) * gy,
+				cell: "",
+				drop: p.drop
+			};
+			preview.value = settled.value;
+			p.hold.grab();
+			if (p.event.pointerType === "mouse") try {
+				el.setPointerCapture(p.event.pointerId);
+			} catch {}
+			window.addEventListener("keydown", onWindowKeydown, true);
+			window.addEventListener("scroll", onScroll, {
+				capture: true,
+				passive: true
+			});
+			emit("dragStart", {
+				id: p.id,
+				kind: p.kind
+			});
+			frame = requestAnimationFrame(autoscroll);
+			track();
+		}
+		function stopPointer(s) {
+			cancelAnimationFrame(frame);
+			for (const name of [
+				"dx",
+				"dy",
+				"dw",
+				"dh"
+			]) s.el.style.removeProperty(`--dou-grid-${name}`);
+			window.removeEventListener("keydown", onWindowKeydown, true);
+			window.removeEventListener("scroll", onScroll, true);
+			const touch = press?.event.pointerType !== "mouse";
+			dropPress();
+			window.addEventListener("click", swallow, {
+				capture: true,
+				once: true
+			});
+			setTimeout(() => window.removeEventListener("click", swallow, true), touch ? 400 : 0);
+		}
+		const clamp = (value, min, max) => Math.min(max, Math.max(min, value));
+		/** The length of `n` cells of `size` with `gap` between them. */
+		const span = (n, size, gap) => n * size + (n - 1) * gap;
+		function swallow(event) {
+			event.stopPropagation();
+			event.preventDefault();
+		}
+		/** Follows the pointer: moves the item with it, and works out the layout when it reaches another cell. */
+		function track() {
+			const s = session.value;
+			if (!isPointer(s)) return;
+			const scroll = scrollOf(s.scroller);
+			const dx = pointer.x - s.startX + scroll.left - s.scrollLeft;
+			const dy = pointer.y - s.startY + scroll.top - s.scrollTop;
+			const { columns } = options.value;
+			const [gx, gy] = gaps.value;
+			const item = s.item;
+			if (s.kind === "drop") {
+				const height = layoutHeight(s.base) * s.rowStep;
+				const over = dx > -s.colStep / 2 && dx < s.colStep * columns && dy > -s.rowStep / 2 && dy < height + s.rowStep * (item.h + 1);
+				const x = clamp(Math.round((dx - s.width / 2) / s.colStep), 0, columns - item.w);
+				const y = Math.max(0, Math.round((dy - s.height / 2) / s.rowStep));
+				const cell = over ? `${x},${y}` : "out";
+				if (cell === s.cell) return;
+				s.cell = cell;
+				preview.value = over ? moveItem([...s.base, {
+					...item,
+					x,
+					y
+				}], s.id, {
+					x,
+					y
+				}, options.value) : s.base;
+				return;
+			}
+			if (s.kind === "move") {
+				s.el.style.setProperty("--dou-grid-dx", `${dx}px`);
+				s.el.style.setProperty("--dou-grid-dy", `${dy}px`);
+				const x = clamp(Math.round((s.left + dx) / s.colStep), 0, columns - item.w);
+				const y = Math.max(0, Math.round((s.top + dy) / s.rowStep));
+				const cell = `${x},${y}`;
+				if (cell === s.cell) return;
+				s.cell = cell;
+				preview.value = moveItem(s.base, s.id, {
+					x,
+					y
+				}, options.value);
+				return;
+			}
+			const maxW = Math.min(columns - item.x, item.maxW ?? Infinity);
+			const minW = Math.min(maxW, Math.max(1, item.minW ?? 1));
+			const maxH = item.maxH ?? Infinity;
+			const minH = Math.min(maxH, Math.max(1, item.minH ?? 1));
+			const width = s.edge === "s" ? s.width : clamp(s.width + dx, span(minW, s.col, gx), span(maxW, s.col, gx));
+			const height = s.edge === "e" ? s.height : clamp(s.height + dy, span(minH, props.rowHeight, gy), span(maxH, props.rowHeight, gy));
+			s.el.style.setProperty("--dou-grid-dw", `${width - s.width}px`);
+			s.el.style.setProperty("--dou-grid-dh", `${height - s.height}px`);
+			const w = Math.round((width + gx) / s.colStep);
+			const h = Math.round((height + gy) / s.rowStep);
+			const cell = `${w}x${h}`;
+			if (cell === s.cell) return;
+			s.cell = cell;
+			preview.value = resizeItem(s.base, s.id, {
+				w,
+				h
+			}, options.value);
+		}
+		function autoscroll() {
+			const s = session.value;
+			if (!isPointer(s)) return;
+			frame = requestAnimationFrame(autoscroll);
+			const { top, bottom } = s.view;
+			let speed = 0;
+			if (pointer.y < top + EDGE) speed = -Math.min(1, (top + EDGE - pointer.y) / EDGE);
+			else if (pointer.y > bottom - EDGE) speed = Math.min(1, (pointer.y - bottom + EDGE) / EDGE);
+			if (!speed) return;
+			if (s.scroller) s.scroller.scrollTop += speed * EDGE_SPEED;
+			else window.scrollBy(0, speed * EDGE_SPEED);
+		}
+		const ARROWS = {
+			ArrowLeft: [-1, 0],
+			ArrowRight: [1, 0],
+			ArrowUp: [0, -1],
+			ArrowDown: [0, 1]
+		};
+		function onKeyDown(event) {
+			if (!props.editable || event.target !== ownItem(event.target)) return;
+			const id = event.target.dataset.gridId;
+			const s = session.value;
+			const arrow = ARROWS[event.key];
+			if (s?.source === "keyboard" && s.id === id) {
+				if (arrow && !event.altKey && !event.metaKey && !event.ctrlKey) {
+					const current = preview.value ?? s.base;
+					const next = event.shiftKey ? resizeItemBy(current, id, arrow[0], arrow[1], options.value) : moveItemBy(current, id, arrow[0], arrow[1], options.value);
+					preview.value = next;
+					const item = next.find((other) => other.id === id);
+					if (item) say(positionText(item, next));
+				} else if (event.key === "Enter" || event.key === " ") finish(true);
+				else if (event.key === "Escape") finish(false);
+				else if (event.key !== "Tab") return;
+				if (event.key !== "Tab") {
+					event.preventDefault();
+					event.stopPropagation();
+				}
+				return;
+			}
+			if (s) return;
+			const item = settled.value.find((other) => other.id === id);
+			if (!item) return;
+			if (event.key === "Enter" || event.key === " ") {
+				event.preventDefault();
+				if (item.locked) return say(format(messages.value.locked, { item: labelOf(item) }));
+				session.value = {
+					id,
+					kind: "move",
+					source: "keyboard",
+					base: settled.value,
+					item
+				};
+				preview.value = settled.value;
+				emit("dragStart", {
+					id,
+					kind: "move"
+				});
+				say(format(messages.value.grabbed, {
+					item: labelOf(item),
+					position: positionText(item, settled.value)
+				}));
+			} else if (arrow && !event.shiftKey && !event.altKey && !event.metaKey && !event.ctrlKey) {
+				const next = neighbour(item, arrow[0], arrow[1]);
+				if (!next) return;
+				event.preventDefault();
+				itemElement(next.id)?.focus();
+			}
+		}
+		/** Leaving a picked-up item puts it back. */
+		function onFocusOut(event) {
+			const s = session.value;
+			if (s?.source !== "keyboard") return;
+			const el = ownItem(event.target);
+			if (el?.dataset.gridId === s.id && !el.contains(event.relatedTarget)) finish(false);
+		}
+		watch(() => props.editable, (editable) => {
+			if (!editable) {
+				finish(false);
+				dropPress();
+			}
+		});
+		onBeforeUnmount(() => {
+			finish(false);
+			dropPress();
+			clearTimeout(settleTimer);
+		});
+		__expose({
+			startDrop,
+			get breakpoint() {
+				return tier.value.name;
+			},
+			focusItem(id) {
+				const el = itemElement(id);
+				if (!el) return;
+				if (props.editable) el.focus();
+				else el.querySelector("a[href], button:not([disabled]), input:not([disabled]), select, textarea, [tabindex]:not([tabindex=\"-1\"])")?.focus();
+			},
+			scrollToItem(id, scrollOptions) {
+				itemElement(id)?.scrollIntoView({
+					block: "nearest",
+					inline: "nearest",
+					...scrollOptions
+				});
+			}
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				ref_key: "root",
+				ref: root,
+				class: normalizeClass(["dou-grid-layout", {
+					"is-editable": __props.editable,
+					"has-handle": __props.handle,
+					"is-arranging": !!session.value || settling.value,
+					"is-pointer-dragging": session.value?.source === "pointer",
+					"is-resizing": session.value?.kind === "resize" && session.value.source === "pointer"
+				}]),
+				style: normalizeStyle(rootStyle.value),
+				role: __props.editable ? "group" : void 0,
+				"aria-label": __props.label ?? (__props.editable ? unref(messages).layout : void 0),
+				onPointerdown: onPointerDown,
+				onKeydown: onKeyDown,
+				onFocusin: onFocusIn,
+				onFocusout: onFocusOut
+			}, [
+				ghost.value ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					class: "dou-grid-layout__placeholder",
+					style: normalizeStyle(cellStyle(ghost.value)),
+					"aria-hidden": "true"
+				}, [renderSlot(_ctx.$slots, "placeholder", { item: ghost.value })], 4)) : createCommentVNode("", true),
+				(openBlock(true), createElementBlock(Fragment, null, renderList(drawn.value, (item) => {
+					return openBlock(), createBlock(unref(grid_item_default), {
+						key: item.id,
+						item,
+						state: stateOf(item.id),
+						editable: __props.editable,
+						tabindex: tabindexOf(item),
+						label: labelOf(item),
+						"role-description": unref(messages).item,
+						handles: handles.value
+					}, null, 8, [
+						"item",
+						"state",
+						"editable",
+						"tabindex",
+						"label",
+						"role-description",
+						"handles"
+					]);
+				}), 128)),
+				__props.editable ? (openBlock(), createElementBlock("span", {
+					key: 1,
+					id: hintId,
+					hidden: ""
+				}, toDisplayString(unref(messages).itemHint), 1)) : createCommentVNode("", true),
+				__props.editable ? (openBlock(), createElementBlock("div", _hoisted_2, toDisplayString(live.value), 1)) : createCommentVNode("", true)
+			], 46, _hoisted_1);
+		};
+	}
+});
+export { grid_layout_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=grid-layout.vue_vue_type_script_setup_true_lang.js.map