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

package/dist/scheduler/scheduler.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,1359 @@
+import gantt_menu_default from "../components/gantt-menu.js";
+import time_grid_default from "../components/time-grid.js";
+import { MINUTES_PER_DAY, parseTime } from "../core/time.js";
+import time_header_default from "../components/time-header.js";
+import { resolveCalendar } from "../core/calendar.js";
+import { spanOf, writeSpan } from "../core/model.js";
+import { snapStep } from "../core/scale.js";
+import { format, useGanttMessages } from "../locale.js";
+import { dateLabel, datesLabel, durationLabel, endLabel, markerRoom, spokenDuration } from "../labels.js";
+import { GanttTransaction, emptyDocument } from "../core/transaction.js";
+import { GanttHistory } from "../core/history.js";
+import { readDocument } from "../core/document.js";
+import { useTimeAxis } from "../time-axis.js";
+import { groupByResource, loadSegments } from "./layout.js";
+import { holdPointer, matchesHotkey, useElementSize, useLocale } from "dou-ui";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeModels, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, openBlock, ref, renderList, renderSlot, resolveDynamicComponent, shallowRef, toDisplayString, toRaw, unref, useId, useModel, useTemplateRef, watch, withCtx } from "vue";
+import { ChevronDownIcon, ChevronRightIcon, TrashIcon } from "@dou-ui/icons";
+// src/scheduler/scheduler.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["aria-label", "aria-describedby"];
+var _hoisted_2 = ["id"];
+var _hoisted_3 = {
+	class: "dou-gantt__sr-only",
+	"aria-live": "polite"
+};
+var _hoisted_4 = ["aria-label"];
+var _hoisted_5 = { class: "dou-gantt__table-head" };
+var _hoisted_6 = { class: "dou-gantt__th is-title" };
+var _hoisted_7 = [
+	"data-row",
+	"aria-label",
+	"onPointerenter"
+];
+var _hoisted_8 = { class: "dou-gantt__td is-title" };
+var _hoisted_9 = [
+	"aria-label",
+	"aria-expanded",
+	"onClick"
+];
+var _hoisted_10 = { class: "dou-gantt__cell-text" };
+var _hoisted_11 = {
+	key: 0,
+	class: "dou-gantt__indent",
+	style: { "width": "16px" }
+};
+var _hoisted_12 = ["title"];
+var _hoisted_13 = ["title"];
+var _hoisted_14 = {
+	key: 0,
+	class: "dou-gantt__marker-text"
+};
+var _hoisted_15 = {
+	key: 0,
+	class: "dou-gantt__row-titles"
+};
+var _hoisted_16 = [
+	"data-task",
+	"aria-label",
+	"onPointerdown",
+	"onClick",
+	"onDblclick",
+	"onContextmenu"
+];
+var _hoisted_17 = {
+	key: 0,
+	class: "dou-gantt__bar-label"
+};
+var _hoisted_18 = ["onPointerdown"];
+var _hoisted_19 = ["onPointerdown"];
+var _hoisted_20 = [
+	"aria-label",
+	"aria-valuenow",
+	"aria-valuemax"
+];
+var HEADER = 56;
+/** The distance from one lane to the next, in px. */
+var LANE = 28;
+/** Without the list, room above a resource's lanes for its name, in px. */
+var CAPTION = 18;
+var OVERSCAN = 240;
+/** Below this width the list steps aside and the timeline takes the whole width. */
+var NARROW = 520;
+var TABLE_MIN = 120;
+var LONG_PRESS = 300;
+var EDGE = 32;
+/** What the current drag would do. */
+var scheduler_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "DouScheduler",
+	__name: "scheduler",
+	props: /*@__PURE__*/ mergeModels({
+		resources: {},
+		calendar: {},
+		range: {},
+		today: {
+			type: Boolean,
+			default: true
+		},
+		weekStart: {},
+		markers: {},
+		table: {
+			type: Boolean,
+			default: true
+		},
+		tableWidth: { default: 200 },
+		rowHeight: { default: 36 },
+		load: {
+			type: Boolean,
+			default: true
+		},
+		readonly: { type: Boolean },
+		canMove: {},
+		menu: {
+			type: Boolean,
+			default: true
+		},
+		contextMenu: {},
+		ariaLabel: {},
+		messages: {}
+	}, {
+		"modelValue": { default: emptyDocument },
+		"modelModifiers": {},
+		"selection": { default: () => [] },
+		"selectionModifiers": {},
+		"scale": {},
+		"scaleModifiers": {}
+	}),
+	emits: /*@__PURE__*/ mergeModels([
+		"transaction",
+		"taskClick",
+		"taskDblclick",
+		"taskContextmenu",
+		"create"
+	], [
+		"update:modelValue",
+		"update:selection",
+		"update:scale"
+	]),
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const model = useModel(__props, "modelValue");
+		/** The `v-model`, with a wrongly shaped one read as well as it can be. */
+		const source = computed(() => readDocument(model.value, false));
+		const tasks = computed(() => source.value.tasks);
+		const selection = useModel(__props, "selection");
+		const scale = useModel(__props, "scale");
+		const emit = __emit;
+		const messages = useGanttMessages(() => props.messages);
+		const sm = computed(() => messages.value.scheduler);
+		const { locale } = useLocale();
+		const weekStart = computed(() => props.weekStart ?? locale.value.region.weekStart);
+		const calendar = computed(() => resolveCalendar(props.calendar));
+		const editable = computed(() => !props.readonly);
+		/** Height of the two-row time header, in px. */
+		const root = useTemplateRef("root");
+		const chart = useTemplateRef("chart");
+		const tableBody = useTemplateRef("tableBody");
+		const { width: rootWidth } = useElementSize(root);
+		const { width: viewWidth, height: viewHeight } = useElementSize(chart);
+		const narrow = computed(() => rootWidth.value > 0 && rootWidth.value < NARROW);
+		const showTable = computed(() => props.table && !narrow.value);
+		const caption = computed(() => showTable.value ? 0 : CAPTION);
+		const tableSize = ref(props.tableWidth);
+		watch(() => props.tableWidth, (width) => tableSize.value = width);
+		const history = new GanttHistory();
+		const canUndo = ref(false);
+		const canRedo = ref(false);
+		let latest = null;
+		const docOf = () => latest ?? toRaw(source.value);
+		function commit(tr) {
+			if (!latest) nextTick(() => latest = null);
+			latest = tr.doc;
+			model.value = tr.doc;
+			const ids = new Set(tr.doc.tasks.map((task) => task.id));
+			const kept = selection.value.filter((id) => ids.has(id));
+			if (kept.length !== selection.value.length) selection.value = kept;
+			emit("transaction", tr);
+		}
+		/** Applies changes as one transaction, one undo step. */
+		function transact(fn, meta) {
+			const tr = new GanttTransaction(docOf());
+			if (meta) tr.setMeta(meta);
+			fn(tr);
+			if (!tr.changed) return tr;
+			const before = selection.value;
+			commit(tr);
+			history.record(tr, before, selection.value);
+			canUndo.value = history.canUndo;
+			canRedo.value = history.canRedo;
+			const added = tr.steps.flatMap((step) => step.type === "addTask" ? [step.task.title] : []);
+			if (added.length) announce(format(messages.value.taskAdded, { title: added.join(messages.value.listSeparator) }));
+			return tr;
+		}
+		function travel(direction) {
+			const result = history[direction](docOf());
+			if (!result) return null;
+			result.tr.setMeta({
+				origin: direction,
+				history: false
+			});
+			commit(result.tr);
+			selection.value = result.selection;
+			canUndo.value = history.canUndo;
+			canRedo.value = history.canRedo;
+			return result.tr;
+		}
+		const undo = () => !!travel("undo");
+		const redo = () => !!travel("redo");
+		/** Undoes or redoes, and reads out the task it changed. */
+		function announceTravel(direction) {
+			const tr = travel(direction);
+			if (!tr) return;
+			const m = messages.value;
+			const step = tr.steps[direction === "undo" ? tr.steps.length - 1 : 0];
+			const id = step.type === "addTask" ? step.task.id : "id" in step ? step.id : "";
+			nextTick(() => {
+				const found = itemById.value.get(id);
+				const change = found ? describe(found.item, found.row) : format(m.taskRemoved, { title: tr.before.tasks.find((task) => task.id === id)?.title ?? "" });
+				announce(format(m[direction === "undo" ? "undone" : "redone"], { change }));
+			});
+		}
+		const collapsed = ref(/* @__PURE__ */ new Set());
+		const drag = shallowRef(null);
+		const taskList = computed(() => toRaw(tasks.value));
+		/** The tasks as shown: while dragging, as they would be after the drop. */
+		const shown = computed(() => {
+			if (!drag.value?.started) return taskList.value;
+			const plans = planned.value;
+			if (!plans?.length) return taskList.value;
+			const patches = new Map(plans.map((plan) => [plan.id, plan.patch]));
+			return taskList.value.map((task) => {
+				const patch = patches.get(task.id);
+				return patch ? {
+					...task,
+					...patch
+				} : task;
+			});
+		});
+		const placed = computed(() => groupByResource(shown.value, props.resources));
+		/**
+		* While dragging, rows keep the lanes they had: a row that shrank would
+		* pull the rows below up under the pointer.
+		*/
+		const keptLanes = shallowRef(null);
+		const rows = computed(() => {
+			const out = [];
+			let top = 0;
+			const push = (row) => {
+				out.push({
+					...row,
+					top
+				});
+				top += row.height;
+			};
+			const resourceRow = (resource) => {
+				const entry = placed.value.get(resource?.id ?? "");
+				const lanes = Math.max(entry?.lanes ?? 0, keptLanes.value?.get(resource?.id ?? "") ?? 0);
+				const load = loadSegments((entry?.items ?? []).map((item) => item.span));
+				const capacity = Math.max(1, resource?.capacity ?? 1);
+				return {
+					kind: "resource",
+					key: resource?.id ?? "",
+					resource,
+					title: resource?.title ?? sm.value.unassigned,
+					items: entry?.items ?? [],
+					lanes,
+					load,
+					capacity,
+					overloaded: !!resource && load.some((segment) => segment.count > capacity),
+					height: props.rowHeight + Math.max(0, lanes - 1) * LANE + caption.value
+				};
+			};
+			const done = /* @__PURE__ */ new Set();
+			for (const resource of props.resources) {
+				if (!resource.group) {
+					push(resourceRow(resource));
+					continue;
+				}
+				if (done.has(resource.group)) continue;
+				done.add(resource.group);
+				const key = `group:${resource.group}`;
+				push({
+					kind: "group",
+					key,
+					title: resource.group,
+					height: props.rowHeight
+				});
+				if (collapsed.value.has(key)) continue;
+				for (const member of props.resources) if (member.group === resource.group) push(resourceRow(member));
+			}
+			if (placed.value.has("")) push(resourceRow(null));
+			return out;
+		});
+		const rowByKey = computed(() => new Map(rows.value.map((row) => [row.key, row])));
+		const totalHeight = computed(() => {
+			const last = rows.value.at(-1);
+			return last ? last.top + last.height : 0;
+		});
+		/** Where each task is drawn. */
+		const itemById = computed(() => {
+			const out = /* @__PURE__ */ new Map();
+			for (const row of rows.value) if (row.kind === "resource") for (const item of row.items) out.set(item.task.id, {
+				item,
+				row
+			});
+			return out;
+		});
+		function toggle(row) {
+			const next = new Set(collapsed.value);
+			if (next.has(row.key)) next.delete(row.key);
+			else next.add(row.key);
+			collapsed.value = next;
+		}
+		const content = computed(() => {
+			let start = Infinity;
+			let end = -Infinity;
+			for (const entry of placed.value.values()) for (const { span } of entry.items) {
+				start = Math.min(start, span.start);
+				end = Math.max(end, span.end);
+			}
+			return start > end ? null : {
+				start,
+				end
+			};
+		});
+		const axis = useTimeAxis({
+			chart,
+			tableBody,
+			viewWidth,
+			scale,
+			range: () => props.range,
+			today: () => props.today,
+			weekStart,
+			calendar,
+			messages,
+			content,
+			fitWidth: () => showTable.value ? viewWidth.value : rootWidth.value
+		});
+		const { level, ppm, now, extent, origin, totalWidth, xOf, contentX, scrollTop, scrollLeft, scrollbar, topCells, bottomCells, shaded, todayX, timeWindow } = axis;
+		watch([viewHeight, viewWidth], axis.measureScrollbar, { flush: "post" });
+		watch([rootWidth, viewWidth], axis.fitWhenSized);
+		const markers = computed(() => {
+			const inRange = (props.markers ?? []).flatMap((marker, index) => {
+				const at = parseTime(marker.date)?.at;
+				if (at == null || at < extent.value.start || at > extent.value.end) return [];
+				return [{
+					key: `${index}:${marker.date}`,
+					x: xOf(at),
+					marker
+				}];
+			});
+			const room = markerRoom(inRange.map((item) => item.marker.label ? item.x : -Infinity));
+			return inRange.map((item, i) => ({
+				...item,
+				room: room[i]
+			}));
+		});
+		const bodyHeight = computed(() => Math.max(0, viewHeight.value - HEADER));
+		/** The rows in view, with some room above and below. */
+		const visibleRows = computed(() => {
+			const list = rows.value;
+			const from = scrollTop.value - OVERSCAN;
+			const to = scrollTop.value + bodyHeight.value + OVERSCAN;
+			let lo = 0;
+			let hi = list.length;
+			while (lo < hi) {
+				const mid = lo + hi >> 1;
+				if (list[mid].top + list[mid].height <= from) lo = mid + 1;
+				else hi = mid;
+			}
+			const out = [];
+			for (let i = lo; i < list.length && list[i].top < to; i++) out.push(list[i]);
+			return out;
+		});
+		const resourceRows = computed(() => visibleRows.value.filter((row) => row.kind === "resource"));
+		/** Where a lane's bar row sits, in body px. */
+		const laneTop = (row, lane) => row.top + caption.value + lane * LANE;
+		const describeRow = (row) => {
+			const text = format(sm.value.row, {
+				title: row.title,
+				count: row.items.length
+			});
+			return row.overloaded ? format(sm.value.overloaded, { row: text }) : text;
+		};
+		function describe(item, row) {
+			const m = messages.value;
+			const { task, span } = item;
+			const text = task.type === "milestone" || span.end <= span.start ? format(m.milestone, {
+				title: task.title,
+				start: dateLabel(span.start - (span.dateOnly ? MINUTES_PER_DAY / 2 : 0), span.dateOnly, m)
+			}) : format(sm.value.task, {
+				title: task.title,
+				dates: datesLabel(span, m),
+				duration: spokenDuration(span, calendar.value, m)
+			});
+			return format(sm.value.item, {
+				task: text,
+				resource: row.title
+			});
+		}
+		const selected = computed(() => new Set(selection.value));
+		let canvas;
+		/** Width of a bar title in px; estimated where text can't be measured. */
+		function textWidth(text) {
+			if (canvas === void 0 && root.value) try {
+				canvas = document.createElement("canvas").getContext("2d");
+				if (canvas) {
+					const style = getComputedStyle(root.value);
+					canvas.font = `${style.getPropertyValue("--dou-font-size-sm").trim() || "13px"} ${style.fontFamily}`;
+				}
+			} catch {
+				canvas = null;
+			}
+			return canvas ? canvas.measureText(text).width : text.length * 13;
+		}
+		const bars = computed(() => {
+			const { start, end } = timeWindow.value;
+			const out = [];
+			for (const row of resourceRows.value) for (const item of row.items) {
+				const { span } = item;
+				if (span.end < start || span.start > end) continue;
+				const milestone = item.task.type === "milestone";
+				const width = Math.max(milestone ? 0 : 2, (span.end - span.start) * ppm.value);
+				out.push({
+					item,
+					row,
+					left: xOf(span.start),
+					width,
+					top: laneTop(row, item.lane),
+					milestone,
+					outside: milestone || textWidth(item.task.title) + 20 > width,
+					aria: describe(item, row)
+				});
+			}
+			return out;
+		});
+		/** How busy each row in view is, as stretches under it. */
+		const loads = computed(() => {
+			if (!props.load) return [];
+			const { start, end } = timeWindow.value;
+			return resourceRows.value.flatMap((row) => row.resource ? row.load.filter((segment) => segment.end > start && segment.start < end).map((segment) => ({
+				key: `${row.key}:${segment.start}`,
+				top: row.top + row.height - 6,
+				left: xOf(segment.start),
+				width: Math.max(1, (segment.end - segment.start) * ppm.value),
+				level: Math.min(1, segment.count / row.capacity),
+				over: segment.count > row.capacity
+			})) : []);
+		});
+		/** Without the list, rows show their title at the left edge of the timeline. */
+		const rowTitles = computed(() => showTable.value ? [] : visibleRows.value);
+		const tableMax = computed(() => Math.max(TABLE_MIN, Math.round((rootWidth.value || 1e3) * .5)));
+		const hovered = ref(null);
+		function onDividerDown(event) {
+			if (event.button !== 0) return;
+			event.preventDefault();
+			const x0 = event.clientX;
+			const width0 = tableSize.value;
+			const move = (e) => tableSize.value = Math.min(tableMax.value, Math.max(TABLE_MIN, width0 + e.clientX - x0));
+			const up = () => {
+				window.removeEventListener("pointermove", move);
+				window.removeEventListener("pointerup", up);
+				window.removeEventListener("pointercancel", up);
+			};
+			window.addEventListener("pointermove", move);
+			window.addEventListener("pointerup", up);
+			window.addEventListener("pointercancel", up);
+		}
+		function onDividerKey(event) {
+			const step = event.shiftKey ? 40 : 10;
+			if (event.key !== "ArrowLeft" && event.key !== "ArrowRight") return;
+			event.preventDefault();
+			const next = tableSize.value + (event.key === "ArrowLeft" ? -step : step);
+			tableSize.value = Math.min(tableMax.value, Math.max(TABLE_MIN, next));
+		}
+		const active = ref(null);
+		function select(task, event) {
+			const id = task.id;
+			if (event.shiftKey || event.metaKey || event.ctrlKey) selection.value = selected.value.has(id) ? selection.value.filter((item) => item !== id) : [...selection.value, id];
+			else if (selection.value.length !== 1 || selection.value[0] !== id) selection.value = [id];
+		}
+		function onTaskClick(task, event) {
+			if (dragged) return;
+			active.value = task.id;
+			select(task, event);
+			emit("taskClick", task, event);
+		}
+		const THRESHOLD = {
+			mouse: 3,
+			touch: 6
+		};
+		let dragged = false;
+		let pressTimer;
+		let frame = 0;
+		let hold = null;
+		const snap = (at, step) => Math.round(at / step) * step;
+		const edgeSpeed = (gap) => gap < EDGE ? Math.ceil((EDGE - gap) / EDGE * 16) : 0;
+		/** The step a drag snaps to: whole days when any task is date-only. */
+		function stepFor(spans) {
+			const unit = snapStep(axis.dayWidth.value);
+			for (const span of spans) if (span.dateOnly) return Math.max(unit, MINUTES_PER_DAY);
+			return unit;
+		}
+		/** The body y of a pointer. */
+		const contentY = (clientY) => clientY - chart.value.getBoundingClientRect().top - HEADER + chart.value.scrollTop;
+		/** The resource row at a body y, if any. */
+		function resourceRowAt(y) {
+			const list = rows.value;
+			let lo = 0;
+			let hi = list.length - 1;
+			while (lo <= hi) {
+				const mid = lo + hi >> 1;
+				const row = list[mid];
+				if (y < row.top) hi = mid - 1;
+				else if (y >= row.top + row.height) lo = mid + 1;
+				else return row.kind === "resource" ? row : null;
+			}
+			return null;
+		}
+		const taskById = (id) => docOf().tasks.find((task) => task.id === id);
+		const planned = computed(() => {
+			const d = drag.value;
+			if (!d?.started || d.mode === "draw") return null;
+			const delta = (d.x - d.x0) / ppm.value;
+			const out = [];
+			const first = d.spans.get(d.id);
+			const unit = stepFor([...d.spans.values()].map((entry) => entry.span));
+			for (const [id, entry] of d.spans) {
+				const task = taskById(id);
+				if (!task) continue;
+				const { span } = entry;
+				let start = span.start;
+				let end = span.end;
+				if (d.mode === "move") {
+					const shift = snap(first.span.start + delta, unit) - first.span.start;
+					start += shift;
+					end += shift;
+				} else if (d.mode === "start") start = Math.min(snap(span.start + delta, unit), span.end - unit);
+				else end = Math.max(snap(span.end + delta, unit), span.start + unit);
+				const row = d.mode === "move" && entry.row === d.from ? d.to : entry.row;
+				const patch = writeSpan(task, start, end);
+				if (row !== entry.row) patch.resource = row || void 0;
+				out.push({
+					id,
+					span: {
+						start,
+						end,
+						dateOnly: span.dateOnly
+					},
+					row,
+					patch
+				});
+			}
+			return out;
+		});
+		/**
+		* Why `canMove` refuses changes, or `null` when it allows them all. Each
+		* patch is checked with the resource it ends up with.
+		*/
+		function checkMove(patches) {
+			const rule = props.canMove;
+			if (!rule) return null;
+			const doc = docOf();
+			for (const { id, patch } of patches) {
+				const task = taskById(id);
+				if (!task) continue;
+				const next = {
+					...task,
+					...patch
+				};
+				if (!next.start) continue;
+				const known = next.resource && props.resources.some((item) => item.id === next.resource);
+				const answer = rule({
+					task,
+					start: next.start,
+					end: next.end,
+					resource: known ? next.resource : void 0
+				}, doc);
+				if (answer === true) continue;
+				return typeof answer === "string" && answer ? answer : messages.value.moveRefused;
+			}
+			return null;
+		}
+		/** Why the current drag would be refused. */
+		const dragRefusal = computed(() => {
+			const plans = planned.value;
+			return plans?.length ? checkMove(plans) : null;
+		});
+		/** The range being drawn on an empty part of a row. */
+		const drawn = computed(() => {
+			const d = drag.value;
+			if (!d?.started || d.mode !== "draw") return null;
+			const unit = snapStep(axis.dayWidth.value);
+			const a = origin.value + Math.min(d.x0, d.x) / ppm.value;
+			const b = origin.value + Math.max(d.x0, d.x) / ppm.value;
+			const start = Math.floor(a / unit) * unit;
+			const end = Math.max(start + unit, Math.ceil(b / unit) * unit);
+			return {
+				row: d.from,
+				start,
+				end,
+				dateOnly: unit >= MINUTES_PER_DAY
+			};
+		});
+		/** A dashed outline over the range being drawn. */
+		const drawnBox = computed(() => {
+			const range = drawn.value;
+			const row = range && rowByKey.value.get(range.row);
+			if (!range || row?.kind !== "resource") return null;
+			return {
+				left: xOf(range.start),
+				width: (range.end - range.start) * ppm.value,
+				top: laneTop(row, 0)
+			};
+		});
+		/** The new dates beside the pointer while dragging. */
+		const dragTip = computed(() => {
+			const d = drag.value;
+			if (!d?.started) return null;
+			const m = messages.value;
+			const found = d.mode === "draw" ? void 0 : itemById.value.get(d.id);
+			const span = found?.item.span ?? (drawn.value && { ...drawn.value });
+			const row = found?.row ?? rowByKey.value.get(d.from);
+			if (!span || row?.kind !== "resource") return null;
+			const refusal = d.mode === "draw" ? null : dragRefusal.value;
+			return {
+				text: refusal ? refusal : span.end > span.start ? format(m.rangeTip, {
+					start: dateLabel(span.start, span.dateOnly, m),
+					end: endLabel(span, m),
+					duration: durationLabel(span, calendar.value, m)
+				}) : dateLabel(span.start - (span.dateOnly ? MINUTES_PER_DAY / 2 : 0), span.dateOnly, m),
+				refused: !!refusal,
+				left: Math.max(scrollLeft.value + 8, xOf(span.start)),
+				top: laneTop(row, found?.item.lane ?? 0)
+			};
+		});
+		function startDrag(event, mode, id, from) {
+			const touch = event.pointerType === "touch";
+			const spans = /* @__PURE__ */ new Map();
+			if (mode !== "draw") {
+				const ids = mode === "move" && selected.value.has(id) ? selection.value : [id];
+				for (const each of ids) {
+					const found = itemById.value.get(each);
+					if (found && !found.item.task.locked) spans.set(each, {
+						span: found.item.span,
+						row: found.row.key,
+						lane: found.item.lane
+					});
+				}
+				if (!spans.has(id)) return;
+			}
+			hold?.release();
+			hold = holdPointer(event, root.value);
+			const x = contentX(event.clientX);
+			const y = contentY(event.clientY);
+			const d = {
+				mode,
+				id,
+				pointerId: event.pointerId,
+				touch,
+				x0: x,
+				x,
+				y0: y,
+				y,
+				clientX: event.clientX,
+				clientY: event.clientY,
+				started: false,
+				spans,
+				from: from.key,
+				to: from.key
+			};
+			drag.value = d;
+			window.addEventListener("pointermove", onDragMove);
+			window.addEventListener("pointerup", onDragEnd);
+			window.addEventListener("pointercancel", stopDrag);
+			window.addEventListener("keydown", onDragKey, true);
+			if (touch) pressTimer = setTimeout(() => {
+				if (drag.value !== d) return;
+				begin(d);
+				navigator.vibrate?.(8);
+			}, LONG_PRESS);
+		}
+		function begin(d) {
+			d.started = true;
+			keptLanes.value = new Map(rows.value.flatMap((row) => row.kind === "resource" ? [[row.key, row.lanes]] : []));
+			hold?.grab();
+			window.getSelection()?.removeAllRanges();
+			frame = requestAnimationFrame(autoScroll);
+			drag.value = { ...d };
+		}
+		function update(d, x, y) {
+			const next = {
+				...d,
+				x,
+				y
+			};
+			if (d.mode === "move") next.to = resourceRowAt(y)?.key ?? d.to;
+			drag.value = next;
+		}
+		function onDragMove(event) {
+			const d = drag.value;
+			if (!d || event.pointerId !== d.pointerId) return;
+			d.clientX = event.clientX;
+			d.clientY = event.clientY;
+			const x = contentX(event.clientX);
+			const y = contentY(event.clientY);
+			if (!d.started) {
+				const moved = Math.hypot(x - d.x0, y - d.y0);
+				if (d.touch) {
+					if (moved > THRESHOLD.touch) stopDrag();
+					return;
+				}
+				if (moved < THRESHOLD.mouse) return;
+				begin(d);
+			}
+			update(drag.value, x, y);
+		}
+		function autoScroll() {
+			const d = drag.value;
+			const el = chart.value;
+			if (!d?.started || !el) return;
+			const rect = el.getBoundingClientRect();
+			let dx = -edgeSpeed(d.clientX - rect.left) || edgeSpeed(rect.right - d.clientX);
+			if (Math.sign(dx) !== Math.sign(d.x - d.x0)) dx = 0;
+			let dy = -edgeSpeed(d.clientY - rect.top - HEADER) || edgeSpeed(rect.bottom - d.clientY);
+			if (d.mode !== "move" || Math.sign(dy) !== Math.sign(d.y - d.y0)) dy = 0;
+			if (dx || dy) {
+				el.scrollLeft += dx;
+				el.scrollTop += dy;
+				update(d, contentX(d.clientX), contentY(d.clientY));
+			}
+			frame = requestAnimationFrame(autoScroll);
+		}
+		function onDragEnd(event) {
+			const d = drag.value;
+			if (!d || event.pointerId !== d.pointerId) return;
+			if (d.touch && d.started && d.mode === "move" && Math.abs(d.x - d.x0) < THRESHOLD.touch) {
+				const found = itemById.value.get(d.id);
+				stopDrag();
+				if (found && menuAllowed(found.item.task, event.clientX, event.clientY)) showMenu(taskTarget(found.item.task, found.row), event.clientX, event.clientY);
+				return;
+			}
+			if (d.started) {
+				dragged = true;
+				setTimeout(() => dragged = false);
+				if (d.mode === "draw") finishDraw();
+				else finishMove(d);
+			} else if (d.mode === "draw" && !d.touch) selection.value = [];
+			stopDrag();
+		}
+		function finishMove(d) {
+			const plans = planned.value;
+			if (!plans?.length) return;
+			if (dragRefusal.value) return void announce(dragRefusal.value);
+			transact((tr) => {
+				for (const plan of plans) tr.updateTask(plan.id, plan.patch);
+			});
+			const pressed = plans.find((plan) => plan.id === d.id);
+			const row = pressed && rowByKey.value.get(pressed.row);
+			if (pressed && pressed.row !== d.from && row) announce(format(sm.value.moved, {
+				title: taskById(d.id)?.title ?? "",
+				resource: row.title
+			}));
+		}
+		function finishDraw() {
+			const range = drawn.value;
+			if (!range) return;
+			const span = writeSpan({
+				id: "",
+				title: ""
+			}, range.start, range.end);
+			const out = {
+				resource: range.row || void 0,
+				start: span.start,
+				end: span.end ?? span.start
+			};
+			emit("create", out);
+		}
+		function onDragKey(event) {
+			if (event.key !== "Escape") return;
+			event.preventDefault();
+			event.stopPropagation();
+			stopDrag();
+		}
+		function stopDrag() {
+			clearTimeout(pressTimer);
+			cancelAnimationFrame(frame);
+			hold?.release();
+			hold = null;
+			drag.value = null;
+			keptLanes.value = null;
+			window.removeEventListener("pointermove", onDragMove);
+			window.removeEventListener("pointerup", onDragEnd);
+			window.removeEventListener("pointercancel", stopDrag);
+			window.removeEventListener("keydown", onDragKey, true);
+		}
+		function onBarDown(event, bar) {
+			if (event.button !== 0 || !editable.value) return;
+			event.stopPropagation();
+			const handle = event.currentTarget.dataset.handle;
+			const mode = handle === "start" || handle === "end" ? handle : "move";
+			if (bar.item.task.locked) return;
+			startDrag(event, mode, bar.item.task.id, bar.row);
+		}
+		function onBodyDown(event) {
+			if (event.button !== 0 || !editable.value) return;
+			const row = resourceRowAt(contentY(event.clientY));
+			if (row) startDrag(event, "draw", "", row);
+			else if (event.pointerType !== "touch") selection.value = [];
+		}
+		const onTouchMove = (event) => void axis.pinchMove(event);
+		const onTouchEnd = (event) => axis.pinchEnd(event);
+		function onTouchStart(event) {
+			if (axis.pinchStart(event)) stopDrag();
+		}
+		onMounted(() => {
+			const el = root.value;
+			el.addEventListener("touchstart", onTouchStart, { passive: true });
+			el.addEventListener("touchmove", onTouchMove, { passive: false });
+			el.addEventListener("touchend", onTouchEnd);
+			el.addEventListener("touchcancel", onTouchEnd);
+		});
+		onBeforeUnmount(() => {
+			const el = root.value;
+			el?.removeEventListener("touchstart", onTouchStart);
+			el?.removeEventListener("touchmove", onTouchMove);
+			el?.removeEventListener("touchend", onTouchEnd);
+			el?.removeEventListener("touchcancel", onTouchEnd);
+			stopDrag();
+		});
+		const menu = useTemplateRef("menu");
+		const menuItems = shallowRef([]);
+		const menuOpen = ref(false);
+		/** The moment under a point on screen, or the task's start when it is off the timeline. */
+		function timeAt(x, fallback) {
+			const rect = chart.value.getBoundingClientRect();
+			if (x < rect.left || x > rect.right) return fallback;
+			return Math.round(origin.value + contentX(x) / ppm.value);
+		}
+		const taskTarget = (task, row) => ({
+			kind: "task",
+			task,
+			resource: row.resource,
+			time: 0
+		});
+		/** Your items, then the built-in one, a separator between them. */
+		function itemsFor(target) {
+			const items = [...props.contextMenu?.(target) ?? []];
+			if (props.menu && editable.value && target.kind === "task") {
+				const ids = selected.value.has(target.task.id) ? selection.value : [target.task.id];
+				const m = messages.value.menu;
+				items.push({
+					key: "remove",
+					label: ids.length > 1 ? format(m.removeTasks, { count: ids.length }) : m.removeTask,
+					icon: TrashIcon,
+					shortcut: "delete",
+					tone: "danger",
+					divided: items.length > 0,
+					run: () => removeTasks(ids)
+				});
+			}
+			return items;
+		}
+		/** Opens the menu at a point on screen; `false` when it has nothing to show. */
+		function showMenu(on, x, y) {
+			const start = on.kind === "task" ? itemById.value.get(on.task.id)?.item.span.start ?? 0 : 0;
+			const target = {
+				...on,
+				time: timeAt(x, start)
+			};
+			const items = itemsFor(target);
+			if (!items.length) return false;
+			if (target.kind === "task") {
+				active.value = target.task.id;
+				if (!selected.value.has(target.task.id)) selection.value = [target.task.id];
+			}
+			menuItems.value = items;
+			menu.value?.open(x, y);
+			return true;
+		}
+		/** When a finger last went down: its long press opens the menu itself, not the browser's. */
+		let touchedAt = 0;
+		const onRootPointerdown = (event) => {
+			if (event.pointerType === "touch") touchedAt = Date.now();
+		};
+		/**
+		* A menu opened by a resting finger or by the menu key has no browser event:
+		* it gets a stand-in, so `taskContextmenu` comes first in every case and
+		* `preventDefault()` keeps the menu closed.
+		*/
+		function menuAllowed(item, x, y) {
+			const event = new MouseEvent("contextmenu", {
+				cancelable: true,
+				clientX: x,
+				clientY: y
+			});
+			emit("taskContextmenu", item, event);
+			return !event.defaultPrevented;
+		}
+		function onTaskContextmenu(bar, event) {
+			if (Date.now() - touchedAt < 1e3) return event.preventDefault();
+			emit("taskContextmenu", bar.item.task, event);
+			if (event.defaultPrevented) return;
+			if (showMenu(taskTarget(bar.item.task, bar.row), event.clientX, event.clientY)) event.preventDefault();
+		}
+		function onBodyContextmenu(event) {
+			const target = event.target;
+			if (event.defaultPrevented || target.closest(".dou-gantt__bar-row")) return;
+			if (Date.now() - touchedAt < 1e3) return event.preventDefault();
+			const row = resourceRowAt(contentY(event.clientY));
+			if (!row) return;
+			if (showMenu({
+				kind: "row",
+				resource: row.resource,
+				time: 0
+			}, event.clientX, event.clientY)) event.preventDefault();
+		}
+		/** The menu key, or Shift+F10, opens the menu of the task the keyboard is on, at its bar. */
+		function openKeyMenu() {
+			const found = active.value ? itemById.value.get(active.value) : void 0;
+			if (!found) return false;
+			const rect = (root.value?.querySelector(`.dou-gantt__bar[data-task="${CSS.escape(found.item.task.id)}"]`))?.getBoundingClientRect();
+			if (!rect) return false;
+			if (!menuAllowed(found.item.task, rect.left + 8, rect.bottom + 4)) return true;
+			return showMenu(taskTarget(found.item.task, found.row), rect.left + 8, rect.bottom + 4);
+		}
+		const keysHint = useId();
+		const live = ref("");
+		function announce(text) {
+			live.value = "";
+			nextTick(() => live.value = text);
+		}
+		/** The tasks in reading order: row by row, by start. */
+		const ordered = computed(() => {
+			const out = [];
+			const list = rows.value.filter((row) => row.kind === "resource");
+			list.forEach((row, index) => {
+				const items = [...row.items].sort((a, b) => a.span.start - b.span.start || a.lane - b.lane);
+				for (const item of items) out.push({
+					item,
+					row,
+					index
+				});
+			});
+			return {
+				out,
+				rows: list
+			};
+		});
+		function focusTask(id) {
+			active.value = id;
+			scrollToTask(id);
+			nextTick(() => {
+				(root.value?.querySelector(`.dou-gantt__bar[data-task="${CSS.escape(id)}"]`) ?? root.value)?.focus({ preventScroll: true });
+			});
+		}
+		function scrollToTask(id) {
+			const found = itemById.value.get(id);
+			const el = chart.value;
+			if (!found || !el) return;
+			const top = laneTop(found.row, found.item.lane);
+			if (top < el.scrollTop) el.scrollTop = top;
+			else if (top + props.rowHeight > el.scrollTop + bodyHeight.value) el.scrollTop = top + props.rowHeight - bodyHeight.value;
+			const left = xOf(found.item.span.start);
+			const right = xOf(found.item.span.end);
+			if (left < scrollLeft.value || right > scrollLeft.value + viewWidth.value) axis.scrollToTime(found.item.span.start);
+		}
+		/** Arrow keys: the next task along, or the one nearest in time in the row above or below. */
+		function stepFocus(key) {
+			const { out, rows: list } = ordered.value;
+			if (!out.length) return;
+			const at = out.findIndex((entry) => entry.item.task.id === active.value);
+			if (at === -1) return void focusTask(out[0].item.task.id);
+			const current = out[at];
+			if (key === "ArrowLeft" || key === "ArrowRight") {
+				const next = out[at + (key === "ArrowLeft" ? -1 : 1)];
+				if (next && next.row === current.row) focusTask(next.item.task.id);
+				return;
+			}
+			const direction = key === "ArrowUp" ? -1 : 1;
+			for (let i = current.index + direction; i >= 0 && i < list.length; i += direction) {
+				const candidates = out.filter((entry) => entry.index === i);
+				if (!candidates.length) continue;
+				const time = current.item.span.start;
+				let best = candidates[0];
+				for (const entry of candidates) if (Math.abs(entry.item.span.start - time) < Math.abs(best.item.span.start - time)) best = entry;
+				focusTask(best.item.task.id);
+				return;
+			}
+		}
+		/** Alt and the arrow keys: earlier or later, or to the resource above or below. */
+		function keyMove(key) {
+			const found = active.value ? itemById.value.get(active.value) : void 0;
+			if (!found || found.item.task.locked) return;
+			const { item, row } = found;
+			const task = item.task;
+			if (key === "ArrowLeft" || key === "ArrowRight") {
+				const unit = stepFor([item.span]);
+				const shift = key === "ArrowLeft" ? -unit : unit;
+				const patch = writeSpan(task, item.span.start + shift, item.span.end + shift);
+				const refusal = checkMove([{
+					id: task.id,
+					patch
+				}]);
+				if (refusal) return void announce(refusal);
+				transact((tr) => tr.updateTask(task.id, patch), { group: `key-move:${task.id}` });
+				const span = spanOf(taskById(task.id));
+				if (span) announce(describe({
+					...item,
+					span
+				}, row));
+				return;
+			}
+			const list = ordered.value.rows;
+			const target = list[list.indexOf(row) + (key === "ArrowUp" ? -1 : 1)];
+			if (!target) return;
+			const refusal = checkMove([{
+				id: task.id,
+				patch: { resource: target.resource?.id }
+			}]);
+			if (refusal) return void announce(refusal);
+			transact((tr) => tr.updateTask(task.id, { resource: target.resource?.id }));
+			announce(format(sm.value.moved, {
+				title: task.title,
+				resource: target.title
+			}));
+			focusTask(task.id);
+		}
+		function removeSelected() {
+			const ids = selection.value.length ? selection.value : active.value ? [active.value] : [];
+			if (ids.length) removeTasks(ids);
+		}
+		function removeTasks(ids) {
+			const titles = ids.map((id) => taskById(id)?.title).filter(Boolean);
+			transact((tr) => {
+				for (const id of ids) tr.removeTask(id);
+			});
+			active.value = null;
+			const m = messages.value;
+			announce(format(m.tasksRemoved, { titles: titles.join(m.listSeparator) }));
+		}
+		function onKeydown(event) {
+			if (drag.value) return;
+			const key = event.key;
+			if (matchesHotkey(event, "mod+z")) {
+				event.preventDefault();
+				if (editable.value) announceTravel("undo");
+				return;
+			}
+			if (matchesHotkey(event, "mod+shift+z") || matchesHotkey(event, "mod+y")) {
+				event.preventDefault();
+				if (editable.value) announceTravel("redo");
+				return;
+			}
+			if (key.startsWith("Arrow")) {
+				event.preventDefault();
+				if (event.altKey) {
+					if (editable.value) keyMove(key);
+				} else stepFocus(key);
+				return;
+			}
+			if (key === "ContextMenu" || matchesHotkey(event, "shift+f10")) {
+				if (openKeyMenu()) event.preventDefault();
+				return;
+			}
+			if ((key === "Delete" || key === "Backspace") && editable.value) {
+				event.preventDefault();
+				removeSelected();
+				return;
+			}
+			if ((key === "Enter" || key === " ") && active.value) {
+				event.preventDefault();
+				const task = taskById(active.value);
+				if (task) select(task, event);
+				return;
+			}
+			if (key === "Escape" && selection.value.length) {
+				event.preventDefault();
+				selection.value = [];
+			}
+		}
+		__expose({
+			transact,
+			undo,
+			redo,
+			get canUndo() {
+				return canUndo.value;
+			},
+			get canRedo() {
+				return canRedo.value;
+			},
+			fit: axis.fit,
+			scrollToDate: axis.scrollToDate,
+			scrollToToday: axis.scrollToToday,
+			scrollToTask,
+			focusTask,
+			zoomIn: axis.zoomIn,
+			zoomOut: axis.zoomOut
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				ref_key: "root",
+				ref: root,
+				class: normalizeClass(["dou-gantt is-scheduler", {
+					"is-narrow": narrow.value,
+					"is-editable": editable.value,
+					"is-dragging": drag.value?.started,
+					[`is-dragging-${drag.value?.mode}`]: drag.value?.started
+				}]),
+				style: normalizeStyle({
+					"--dou-gantt-row-height": `${__props.rowHeight}px`,
+					"--dou-gantt-lane": `${LANE}px`
+				}),
+				role: "group",
+				tabindex: "0",
+				"aria-label": __props.ariaLabel ?? sm.value.name,
+				"aria-describedby": unref(keysHint),
+				onKeydown,
+				onPointerdownCapture: onRootPointerdown
+			}, [
+				createElementVNode("span", {
+					id: unref(keysHint),
+					class: "dou-gantt__sr-only"
+				}, toDisplayString(sm.value.keys), 9, _hoisted_2),
+				createElementVNode("div", _hoisted_3, toDisplayString(live.value), 1),
+				showTable.value ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					class: "dou-gantt__table-pane",
+					style: normalizeStyle({ width: `${tableSize.value}px` })
+				}, [createElementVNode("div", {
+					class: "dou-gantt__table",
+					role: "list",
+					"aria-label": sm.value.resource
+				}, [createElementVNode("div", _hoisted_5, [createElementVNode("div", _hoisted_6, toDisplayString(sm.value.resource), 1)]), createElementVNode("div", {
+					ref_key: "tableBody",
+					ref: tableBody,
+					class: "dou-gantt__table-body",
+					tabindex: "-1",
+					onScroll: _cache[1] || (_cache[1] = (...args) => unref(axis).onTableScroll && unref(axis).onTableScroll(...args))
+				}, [createElementVNode("div", {
+					class: "dou-gantt__table-rows",
+					style: normalizeStyle({ height: `${totalHeight.value + unref(scrollbar)}px` })
+				}, [(openBlock(true), createElementBlock(Fragment, null, renderList(visibleRows.value, (row) => {
+					return openBlock(), createElementBlock("div", {
+						key: row.key,
+						class: normalizeClass(["dou-gantt__tr", {
+							"is-group": row.kind === "group",
+							"is-hovered": hovered.value === row.key,
+							"is-overloaded": row.kind === "resource" && row.overloaded
+						}]),
+						style: normalizeStyle({
+							transform: `translateY(${row.top}px)`,
+							height: `${row.height}px`
+						}),
+						"data-row": row.key,
+						role: "listitem",
+						"aria-label": row.kind === "resource" ? describeRow(row) : row.title,
+						onPointerenter: ($event) => hovered.value = row.key,
+						onPointerleave: _cache[0] || (_cache[0] = ($event) => hovered.value = null)
+					}, [createElementVNode("div", _hoisted_8, [row.kind === "group" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createElementVNode("button", {
+						type: "button",
+						class: "dou-gantt__toggle",
+						tabindex: "-1",
+						"aria-label": collapsed.value.has(row.key) ? unref(messages).expand : unref(messages).collapse,
+						"aria-expanded": !collapsed.value.has(row.key),
+						onClick: ($event) => toggle(row)
+					}, [(openBlock(), createBlock(resolveDynamicComponent(collapsed.value.has(row.key) ? unref(ChevronRightIcon) : unref(ChevronDownIcon))))], 8, _hoisted_9), createElementVNode("span", _hoisted_10, toDisplayString(row.title), 1)], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+						row.resource?.group ? (openBlock(), createElementBlock("span", _hoisted_11)) : createCommentVNode("", true),
+						_cache[5] || (_cache[5] = createElementVNode("span", { class: "dou-gantt__toggle-space" }, null, -1)),
+						createElementVNode("span", { class: normalizeClass(["dou-gantt__cell-text", { "is-unassigned": !row.resource }]) }, [row.resource ? renderSlot(_ctx.$slots, "resource", { resource: row.resource }, () => [createTextVNode(toDisplayString(row.title), 1)], void 0, 0) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(toDisplayString(row.title), 1)], 64))], 2),
+						row.overloaded ? (openBlock(), createElementBlock("span", {
+							key: 1,
+							class: "dou-gantt__overload",
+							title: sm.value.overloadHint,
+							"aria-hidden": "true"
+						}, null, 8, _hoisted_12)) : createCommentVNode("", true)
+					], 64))])], 46, _hoisted_7);
+				}), 128))], 4)], 544)], 8, _hoisted_4)], 4)) : createCommentVNode("", true),
+				createElementVNode("div", {
+					ref_key: "chart",
+					ref: chart,
+					class: normalizeClass(["dou-gantt__chart", { "is-fixed": __props.range }]),
+					tabindex: "-1",
+					onScrollPassive: _cache[2] || (_cache[2] = (...args) => unref(axis).onChartScroll && unref(axis).onChartScroll(...args)),
+					onWheel: _cache[3] || (_cache[3] = (...args) => unref(axis).onWheel && unref(axis).onWheel(...args))
+				}, [createElementVNode("div", {
+					class: "dou-gantt__canvas",
+					style: normalizeStyle({ width: `${unref(totalWidth)}px` })
+				}, [createVNode(time_header_default, {
+					"top-cells": unref(topCells),
+					"bottom-cells": unref(bottomCells),
+					"bottom-unit": unref(level).bottom,
+					calendar: calendar.value,
+					now: unref(now),
+					"today-x": unref(todayX)
+				}, {
+					default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(markers.value, (item) => {
+						return openBlock(), createElementBlock("span", {
+							key: item.key,
+							class: normalizeClass(["dou-gantt__marker-label", [item.marker.tone && `is-${item.marker.tone}`, {
+								"is-cut": item.room !== Infinity,
+								"is-crowded": !item.room
+							}]]),
+							title: item.room !== Infinity ? item.marker.label : void 0,
+							style: normalizeStyle({
+								left: `${item.x}px`,
+								maxWidth: item.room && item.room !== Infinity ? `${item.room}px` : void 0
+							})
+						}, [item.marker.label ? (openBlock(), createElementBlock("span", _hoisted_14, toDisplayString(item.marker.label), 1)) : createCommentVNode("", true)], 14, _hoisted_13);
+					}), 128))]),
+					_: 1
+				}, 8, [
+					"top-cells",
+					"bottom-cells",
+					"bottom-unit",
+					"calendar",
+					"now",
+					"today-x"
+				]), createElementVNode("div", {
+					class: "dou-gantt__body",
+					style: normalizeStyle({ height: `${totalHeight.value}px` }),
+					onPointerdown: onBodyDown,
+					onContextmenu: onBodyContextmenu
+				}, [
+					!showTable.value ? (openBlock(), createElementBlock("div", _hoisted_15, [(openBlock(true), createElementBlock(Fragment, null, renderList(rowTitles.value, (row) => {
+						return openBlock(), createElementBlock("span", {
+							key: row.key,
+							class: normalizeClass(["dou-gantt__row-title", { "is-summary": row.kind === "group" }]),
+							style: normalizeStyle({ transform: `translateY(${row.top}px)` })
+						}, [row.kind === "resource" && row.resource ? renderSlot(_ctx.$slots, "resource", { resource: row.resource }, () => [createTextVNode(toDisplayString(row.title), 1)], void 0, 0) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(toDisplayString(row.title), 1)], 64))], 6);
+					}), 128))])) : createCommentVNode("", true),
+					createVNode(time_grid_default, {
+						cells: unref(bottomCells),
+						shaded: unref(shaded)
+					}, null, 8, ["cells", "shaded"]),
+					(openBlock(true), createElementBlock(Fragment, null, renderList(visibleRows.value, (row) => {
+						return openBlock(), createElementBlock("div", {
+							key: row.key,
+							class: normalizeClass(["dou-gantt__lane-row", {
+								"is-group": row.kind === "group",
+								"is-hovered": hovered.value === row.key
+							}]),
+							style: normalizeStyle({
+								transform: `translateY(${row.top}px)`,
+								height: `${row.height}px`
+							})
+						}, null, 6);
+					}), 128)),
+					unref(todayX) != null ? (openBlock(), createElementBlock("div", {
+						key: 1,
+						class: "dou-gantt__today",
+						style: normalizeStyle({ left: `${unref(todayX)}px` })
+					}, null, 4)) : createCommentVNode("", true),
+					(openBlock(true), createElementBlock(Fragment, null, renderList(markers.value, (item) => {
+						return openBlock(), createElementBlock("div", {
+							key: item.key,
+							class: normalizeClass(["dou-gantt__marker", item.marker.tone && `is-${item.marker.tone}`]),
+							style: normalizeStyle({ left: `${item.x}px` })
+						}, null, 6);
+					}), 128)),
+					(openBlock(true), createElementBlock(Fragment, null, renderList(loads.value, (segment) => {
+						return openBlock(), createElementBlock("div", {
+							key: segment.key,
+							class: normalizeClass(["dou-gantt__load", { "is-over": segment.over }]),
+							style: normalizeStyle({
+								transform: `translate(${segment.left}px, ${segment.top}px)`,
+								width: `${segment.width}px`,
+								"--dou-gantt-load": segment.level
+							})
+						}, null, 6);
+					}), 128)),
+					(openBlock(true), createElementBlock(Fragment, null, renderList(bars.value, (bar) => {
+						return openBlock(), createElementBlock("div", {
+							key: bar.item.task.id,
+							class: normalizeClass(["dou-gantt__bar-row", {
+								"is-selected": selected.value.has(bar.item.task.id),
+								"is-active": drag.value?.started && drag.value.spans.has(bar.item.task.id)
+							}]),
+							style: normalizeStyle({ transform: `translateY(${bar.top}px)` })
+						}, [
+							createElementVNode("div", {
+								class: normalizeClass(["dou-gantt__bar", [bar.item.task.tone && `is-${bar.item.task.tone}`, {
+									"is-milestone": bar.milestone,
+									"is-selected": selected.value.has(bar.item.task.id),
+									"is-locked": bar.item.task.locked,
+									"is-active": active.value === bar.item.task.id,
+									"is-move-refused": !!dragRefusal.value && drag.value?.started && drag.value.spans.has(bar.item.task.id)
+								}]]),
+								"data-task": bar.item.task.id,
+								style: normalizeStyle({
+									left: `${bar.left}px`,
+									width: bar.milestone ? void 0 : `${bar.width}px`
+								}),
+								role: "img",
+								tabindex: "-1",
+								"aria-label": bar.aria,
+								onPointerdown: ($event) => onBarDown($event, bar),
+								onClick: ($event) => onTaskClick(bar.item.task, $event),
+								onDblclick: ($event) => emit("taskDblclick", bar.item.task, $event),
+								onContextmenu: ($event) => onTaskContextmenu(bar, $event)
+							}, [!bar.outside ? (openBlock(), createElementBlock("span", _hoisted_17, [renderSlot(_ctx.$slots, "bar", { task: bar.item.task }, () => [createTextVNode(toDisplayString(bar.item.task.title), 1)])])) : createCommentVNode("", true)], 46, _hoisted_16),
+							editable.value && !bar.item.task.locked && !bar.milestone ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createElementVNode("span", {
+								class: "dou-gantt__handle is-start",
+								"data-handle": "start",
+								style: normalizeStyle({ left: `${bar.left}px` }),
+								onPointerdown: ($event) => onBarDown($event, bar)
+							}, null, 44, _hoisted_18), createElementVNode("span", {
+								class: "dou-gantt__handle is-end",
+								"data-handle": "end",
+								style: normalizeStyle({ left: `${bar.left + bar.width}px` }),
+								onPointerdown: ($event) => onBarDown($event, bar)
+							}, null, 44, _hoisted_19)], 64)) : createCommentVNode("", true),
+							bar.outside ? (openBlock(), createElementBlock("span", {
+								key: 1,
+								class: "dou-gantt__bar-side",
+								style: normalizeStyle({ left: `${bar.left + (bar.milestone ? 12 : bar.width + 8)}px` })
+							}, [renderSlot(_ctx.$slots, "bar", { task: bar.item.task }, () => [createTextVNode(toDisplayString(bar.item.task.title), 1)])], 4)) : createCommentVNode("", true)
+						], 6);
+					}), 128)),
+					drawnBox.value ? (openBlock(), createElementBlock("div", {
+						key: 2,
+						class: "dou-gantt__ghost",
+						style: normalizeStyle({
+							transform: `translate(${drawnBox.value.left}px, ${drawnBox.value.top}px)`,
+							width: `${drawnBox.value.width}px`
+						})
+					}, null, 4)) : createCommentVNode("", true),
+					dragTip.value ? (openBlock(), createElementBlock("div", {
+						key: 3,
+						class: normalizeClass(["dou-gantt__tip", { "is-refused": dragTip.value.refused }]),
+						style: normalizeStyle({ transform: `translate(${dragTip.value.left}px, ${dragTip.value.top}px)` })
+					}, toDisplayString(dragTip.value.text), 7)) : createCommentVNode("", true)
+				], 36)], 4)], 34),
+				showTable.value ? (openBlock(), createElementBlock("div", {
+					key: 1,
+					class: "dou-gantt__divider",
+					role: "separator",
+					"aria-label": unref(messages).resizeTable,
+					tabindex: "0",
+					"aria-orientation": "vertical",
+					"aria-valuenow": Math.round(tableSize.value),
+					"aria-valuemin": TABLE_MIN,
+					"aria-valuemax": tableMax.value,
+					onPointerdown: onDividerDown,
+					onKeydown: onDividerKey
+				}, null, 40, _hoisted_20)) : createCommentVNode("", true),
+				createVNode(gantt_menu_default, {
+					ref_key: "menu",
+					ref: menu,
+					open: menuOpen.value,
+					"onUpdate:open": _cache[4] || (_cache[4] = ($event) => menuOpen.value = $event),
+					items: menuItems.value
+				}, null, 8, ["open", "items"]),
+				renderSlot(_ctx.$slots, "default")
+			], 46, _hoisted_1);
+		};
+	}
+});
+export { scheduler_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=scheduler.vue_vue_type_script_setup_true_lang.js.map