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

package/dist/dashboard/dashboard.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,1072 @@
+import { findPlace, fitItem, moveItem } from "../layout/engine.js";
+import { format, useDashboardMessages } from "../locale.js";
+import { DEFAULT_BREAKPOINTS, DEFAULT_COLUMNS, gridTiers } from "../grid/tiers.js";
+import grid_layout_default from "../grid/grid-layout.js";
+import { emptyDocument } from "../core/document.js";
+import { DashboardTransaction, applySteps, cloneJson, replaceWidgets, sameValue } from "../core/transaction.js";
+import { DashboardHistory } from "../core/history.js";
+import { dataContextKey } from "../data/context.js";
+import { filterText, isEmptyFilter } from "../data/filters.js";
+import { createSourceStore, sameSource } from "../data/store.js";
+import { DEFAULT_WIDGET_SIZE, defaultPropsOf } from "../widget/define.js";
+import { createObservers, observersKey } from "./observers.js";
+import { elementToPNG } from "./export.js";
+import widget_body_default from "./widget-body.js";
+import { frameContextKey } from "./frame-context.js";
+import widget_frame_default from "./widget-frame.js";
+import widget_settings_default from "./widget-settings.js";
+import { DouDialog, DouDrawer, DouEmpty, DouInput, downloadBlob, matchesHotkey, useLocale } from "dou-ui";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, mergeModels, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, openBlock, provide, ref, shallowReactive, shallowRef, toDisplayString, toRaw, unref, useModel, watch, withCtx } from "vue";
+import { LayoutGridPlusIcon, fileIconOf } from "@dou-ui/icons";
+// src/dashboard/dashboard.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["aria-label"];
+var _hoisted_2 = {
+	key: 0,
+	class: "dou-dashboard__empty"
+};
+var _hoisted_3 = {
+	class: "dou-dashboard__live",
+	"aria-live": "polite",
+	"aria-atomic": "true"
+};
+var _hoisted_4 = {
+	key: 0,
+	class: "dou-dashboard__settings"
+};
+var _hoisted_5 = { class: "dou-dashboard__field" };
+var _hoisted_6 = { class: "dou-dashboard__field-label" };
+var EAGER = 16;
+var CLIPBOARD_KIND = "dou-dashboard/widget";
+var dashboard_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "DouDashboard",
+	__name: "dashboard",
+	props: /*@__PURE__*/ mergeModels({
+		widgets: { default: () => [] },
+		sources: {},
+		editable: { type: Boolean },
+		columns: { default: () => DEFAULT_COLUMNS },
+		breakpoints: { default: () => DEFAULT_BREAKPOINTS },
+		rowHeight: { default: 80 },
+		gap: { default: 16 },
+		compact: {
+			type: [String, Boolean],
+			default: "vertical"
+		},
+		label: {},
+		messages: {},
+		createId: {},
+		collaboration: {},
+		exporters: {}
+	}, {
+		"modelValue": { default: emptyDocument },
+		"modelModifiers": {},
+		"filters": { default: () => ({}) },
+		"filtersModifiers": {}
+	}),
+	emits: /*@__PURE__*/ mergeModels([
+		"change",
+		"breakpointChange",
+		"exportError"
+	], ["update:modelValue", "update:filters"]),
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const model = useModel(__props, "modelValue");
+		const filters = useModel(__props, "filters");
+		const messages = useDashboardMessages(() => props.messages);
+		const grid = ref();
+		const observers = createObservers();
+		provide(observersKey, observers);
+		onBeforeUnmount(() => observers.dispose());
+		/** This many widgets are drawn in full at once, the rest when they come near the view. */
+		const root = ref();
+		const typeMap = computed(() => new Map(props.widgets.map((type) => [type.type, type])));
+		const typeOf = (widget) => typeMap.value.get(widget.type);
+		const widgetMap = computed(() => new Map(model.value.widgets.map((widget) => [widget.id, widget])));
+		/** The first widgets of the document, drawn in full without waiting to be seen. */
+		const eagerIds = computed(() => new Set(model.value.widgets.slice(0, EAGER).map((w) => w.id)));
+		/** Widgets added once the dashboard is up are drawn in full straight away (not reactive on purpose). */
+		let mounted = false;
+		onMounted(() => mounted = true);
+		const isEager = (id) => mounted || eagerIds.value.has(id);
+		const titleOf = (widget) => widget.title || typeOf(widget)?.label || widget.type;
+		const tiers = computed(() => gridTiers(props.columns, props.breakpoints));
+		/** The widest breakpoint: its places are the main ones. */
+		const main = computed(() => tiers.value[0]);
+		const mainOptions = computed(() => ({
+			columns: Math.max(1, Math.round(main.value.columns)),
+			compact: props.compact
+		}));
+		const history = new DashboardHistory();
+		/** Bumped whenever the history changes, so `canUndo` and `canRedo` update. */
+		const historyVersion = ref(0);
+		/** The document last emitted, to tell our own changes from the app's. */
+		let emitted;
+		watch(model, (doc) => {
+			if (toRaw(doc) === emitted) return;
+			history.clear();
+			historyVersion.value++;
+		});
+		function commit(tr) {
+			emitted = toRaw(tr.doc);
+			model.value = tr.doc;
+			emit("change", tr);
+		}
+		/** A transaction on the document as it is now, to `dispatch`. */
+		function transaction() {
+			return new DashboardTransaction(model.value);
+		}
+		/** Makes the changes of a transaction, as one undo step (or part of one, by `meta.group`). */
+		function dispatch(tr) {
+			if (toRaw(tr.before) !== toRaw(model.value)) throw new Error("[@dou-ui/dashboard] the transaction was made on another version of the dashboard");
+			if (!tr.changed) return;
+			const shared = props.collaboration;
+			if (!shared) {
+				history.record(tr);
+				historyVersion.value++;
+			}
+			commit(tr);
+			shared?.transaction(tr);
+		}
+		/** Steps made into a transaction and dispatched, for the dashboard's own changes. */
+		function run(steps, meta) {
+			const tr = applySteps(model.value, steps, meta);
+			dispatch(tr);
+			return tr;
+		}
+		function undo() {
+			if (props.collaboration) return props.collaboration.undo();
+			const tr = history.undo(model.value);
+			historyVersion.value++;
+			if (!tr) return false;
+			if (tr.changed) commit(tr);
+			return true;
+		}
+		function redo() {
+			if (props.collaboration) return props.collaboration.redo();
+			const tr = history.redo(model.value);
+			historyVersion.value++;
+			if (!tr) return false;
+			if (tr.changed) commit(tr);
+			return true;
+		}
+		const canUndo = computed(() => props.collaboration ? props.collaboration.canUndo() : (historyVersion.value, history.canUndo));
+		const canRedo = computed(() => props.collaboration ? props.collaboration.canRedo() : (historyVersion.value, history.canRedo));
+		function limitsOf(type) {
+			const size = type?.size ?? DEFAULT_WIDGET_SIZE;
+			return {
+				w: size.w,
+				h: size.h,
+				minW: size.minW,
+				maxW: size.maxW,
+				minH: size.minH,
+				maxH: size.maxH
+			};
+		}
+		/** The widgets on the widest breakpoint; those without a place there get the first spot they fit. */
+		const placeOf = (item) => ({
+			x: item.x,
+			y: item.y,
+			w: item.w,
+			h: item.h
+		});
+		let itemCache = /* @__PURE__ */ new WeakMap();
+		watch([typeMap, main], () => itemCache = /* @__PURE__ */ new WeakMap(), { flush: "sync" });
+		const items = computed(() => {
+			const name = main.value.name;
+			const options = mainOptions.value;
+			const placed = [];
+			const result = /* @__PURE__ */ new Map();
+			const missing = [];
+			for (const widget of model.value.widgets) {
+				const raw = toRaw(widget);
+				const place = raw.place[name];
+				if (!place) {
+					missing.push(raw);
+					continue;
+				}
+				let item = itemCache.get(raw);
+				if (!item) {
+					const { minW, maxW, minH, maxH } = limitsOf(typeOf(raw));
+					item = {
+						id: raw.id,
+						...placeOf(place),
+						minW,
+						maxW,
+						minH,
+						maxH
+					};
+					itemCache.set(raw, item);
+				}
+				placed.push(item);
+				result.set(raw.id, item);
+			}
+			for (const widget of missing) {
+				const fitted = fitItem({
+					id: widget.id,
+					x: 0,
+					y: 0,
+					...limitsOf(typeOf(widget))
+				}, options.columns);
+				const item = {
+					...fitted,
+					...findPlace(placed, fitted, options)
+				};
+				placed.push(item);
+				result.set(widget.id, item);
+			}
+			return model.value.widgets.map((widget) => result.get(widget.id));
+		});
+		/** The places on the narrower breakpoints. */
+		const layouts = computed(() => {
+			const result = {};
+			for (const tier of tiers.value.slice(1)) {
+				const list = [];
+				for (const widget of model.value.widgets) {
+					const place = widget.place[tier.name];
+					if (place) list.push({
+						id: widget.id,
+						...place
+					});
+				}
+				if (list.length) result[tier.name] = list;
+			}
+			return result;
+		});
+		let pending = {};
+		let flushing = false;
+		function gather(part) {
+			Object.assign(pending, part);
+			if (flushing) return;
+			flushing = true;
+			queueMicrotask(flush);
+		}
+		function flush() {
+			flushing = false;
+			const { items: list, layouts: saved, drop } = pending;
+			pending = {};
+			const doc = model.value;
+			const places = /* @__PURE__ */ new Map();
+			const setPlace = (id, name, item) => {
+				let place = places.get(id);
+				if (!place) places.set(id, place = { ...widgetMap.value.get(id)?.place });
+				place[name] = placeOf(item);
+			};
+			for (const item of list ?? []) setPlace(item.id, main.value.name, item);
+			for (const [name, others] of Object.entries(saved ?? {})) for (const item of others ?? []) setPlace(item.id, name, item);
+			const steps = [];
+			for (const [id, place] of places) if (widgetMap.value.has(id)) steps.push({
+				type: "update",
+				id,
+				patch: { place }
+			});
+			else if (drop?.id === id) {
+				const type = typeMap.value.get(drop.type);
+				if (type) steps.push({
+					type: "add",
+					widget: newWidget(id, type, place),
+					index: doc.widgets.length
+				});
+			}
+			const tr = run(steps, { origin: drop ? "drop" : "layout" });
+			if (drop && tr.changed) {
+				const widget = widgetMap.value.get(drop.id);
+				if (widget) say(format(messages.value.added, { item: titleOf(widget) }));
+			}
+		}
+		function onDrop(event) {
+			const data = event.data;
+			if (data?.type) gather({ drop: {
+				id: event.item.id,
+				type: data.type
+			} });
+		}
+		const dragging = ref(false);
+		function newId(type) {
+			const used = widgetMap.value;
+			for (;;) {
+				const id = props.createId?.(type) ?? `${type}-${Math.random().toString(36).slice(2, 8)}`;
+				if (!used.has(id)) return id;
+				if (props.createId) throw new Error(`[@dou-ui/dashboard] createId gave "${id}", which is already in use`);
+			}
+		}
+		function newWidget(id, type, place, options = {}) {
+			const widget = {
+				id,
+				type: type.type,
+				place
+			};
+			if (options.title) widget.title = options.title;
+			const initial = defaultPropsOf(type);
+			if (initial || options.props) widget.props = {
+				...initial,
+				...options.props
+			};
+			return widget;
+		}
+		/**
+		* Puts a new item on the widest breakpoint, at `at` (pushing the others
+		* away) or in the first spot it fits; the steps also move any widget it
+		* pushed.
+		*/
+		function placeNew(item, at) {
+			const options = mainOptions.value;
+			const fitted = fitItem(item, options.columns);
+			const spot = at ?? findPlace(items.value, fitted, options);
+			const layout = moveItem([...items.value, {
+				...fitted,
+				...spot
+			}], item.id, spot, options);
+			const steps = [];
+			let place = {
+				...fitted,
+				...spot
+			};
+			for (const next of layout) {
+				if (next.id === item.id) {
+					place = placeOf(next);
+					continue;
+				}
+				const widget = widgetMap.value.get(next.id);
+				const old = widget && items.value.find((other) => other.id === next.id);
+				if (widget && old && (old.x !== next.x || old.y !== next.y)) steps.push({
+					type: "update",
+					id: next.id,
+					patch: { place: {
+						...widget.place,
+						[main.value.name]: placeOf(next)
+					} }
+				});
+			}
+			return {
+				place,
+				steps
+			};
+		}
+		function addWidget(typeName, options = {}) {
+			const type = typeMap.value.get(typeName);
+			if (!type) return void 0;
+			const id = newId(typeName);
+			const { place, steps } = placeNew({
+				id,
+				x: 0,
+				y: 0,
+				...limitsOf(type)
+			}, options.at);
+			const widget = newWidget(id, type, { [main.value.name]: place }, options);
+			run([{
+				type: "add",
+				widget,
+				index: model.value.widgets.length
+			}, ...steps], { origin: "api" });
+			say(format(messages.value.added, { item: titleOf(widget) }));
+			if (options.focus !== false) nextTick(() => focusWidget(id));
+			return id;
+		}
+		/** Adds a copy of a widget (from this dashboard or the clipboard) beside `near`, or in the first free spot. */
+		function addCopy(source, near) {
+			const type = typeOf(source);
+			const id = newId(source.type);
+			const columns = mainOptions.value.columns;
+			const size = near ?? {
+				...limitsOf(type),
+				...source.place[main.value.name]
+			};
+			const at = near ? near.x + near.w * 2 <= columns ? {
+				x: near.x + near.w,
+				y: near.y
+			} : {
+				x: near.x,
+				y: near.y + near.h
+			} : void 0;
+			const { place, steps } = placeNew({
+				...limitsOf(type),
+				id,
+				x: 0,
+				y: 0,
+				w: size.w,
+				h: size.h
+			}, at);
+			const widget = {
+				...cloneJson(source),
+				id,
+				place: { [main.value.name]: place }
+			};
+			run([{
+				type: "add",
+				widget,
+				index: near ? model.value.widgets.findIndex((other) => other.id === near.id) + 1 : model.value.widgets.length
+			}, ...steps], { origin: "copy" });
+			say(format(messages.value.added, { item: titleOf(widget) }));
+			nextTick(() => focusWidget(id));
+			return id;
+		}
+		function duplicateWidget(id) {
+			const widget = widgetMap.value.get(id);
+			const item = items.value.find((other) => other.id === id);
+			return widget && item ? addCopy(widget, item) : void 0;
+		}
+		function removeWidget(id) {
+			const list = model.value.widgets;
+			const index = list.findIndex((widget) => widget.id === id);
+			if (index < 0) return;
+			const widget = list[index];
+			const hadFocus = root.value?.contains(document.activeElement);
+			const neighbour = list[index + 1] ?? list[index - 1];
+			if (settingsId.value === id) settingsId.value = void 0;
+			if (fullscreenId.value === id) fullscreenId.value = void 0;
+			run([{
+				type: "remove",
+				id
+			}], { origin: "api" });
+			say(format(messages.value.removed, { item: titleOf(widget) }));
+			if (hadFocus) nextTick(() => neighbour ? focusWidget(neighbour.id) : root.value?.focus());
+		}
+		function focusWidget(id) {
+			grid.value?.focusItem(id);
+		}
+		/** The widget being dragged in, which has no widget yet: its name is its type's. */
+		let adding;
+		function startAdd(event, typeName) {
+			const type = typeMap.value.get(typeName);
+			if (!type || !props.editable) return;
+			adding = {
+				id: newId(typeName),
+				label: type.label
+			};
+			grid.value?.startDrop(event, {
+				id: adding.id,
+				...limitsOf(type)
+			}, { type: typeName });
+		}
+		function labelOf(item) {
+			const widget = widgetMap.value.get(item.id);
+			return widget ? titleOf(widget) : item.id === adding?.id ? adding.label : item.id;
+		}
+		function setProps(id, patch, options = {}) {
+			const widget = widgetMap.value.get(id);
+			if (!widget) return;
+			run([{
+				type: "update",
+				id,
+				patch: { props: {
+					...widget.props,
+					...patch
+				} }
+			}], {
+				origin: "widget",
+				group: options.group
+			});
+		}
+		function rename(id, title) {
+			run([{
+				type: "update",
+				id,
+				patch: { title: title.trim() || void 0 }
+			}], { origin: "title" });
+		}
+		const settingsId = ref();
+		const settingsWidget = computed(() => settingsId.value ? widgetMap.value.get(settingsId.value) : void 0);
+		const fullscreenId = ref();
+		const fullscreenWidget = computed(() => fullscreenId.value ? widgetMap.value.get(fullscreenId.value) : void 0);
+		/** The widget to give focus back to when a drawer or dialog closes. */
+		let returnTo;
+		function openSettings(id) {
+			if (!props.editable || !widgetMap.value.has(id)) return;
+			returnTo = id;
+			settingsId.value = id;
+		}
+		function openFullscreen(id) {
+			const widget = widgetMap.value.get(id);
+			if (!widget || typeOf(widget)?.fullscreen === false) return;
+			returnTo = id;
+			fullscreenId.value = id;
+		}
+		function restoreFocus() {
+			const id = returnTo;
+			returnTo = void 0;
+			if (id && widgetMap.value.has(id)) focusWidget(id);
+		}
+		watch(() => props.editable, (editable) => {
+			if (!editable) settingsId.value = void 0;
+		});
+		function onAction(id, action) {
+			if (action === "settings") openSettings(id);
+			else if (action === "fullscreen") openFullscreen(id);
+			else if (action === "duplicate") duplicateWidget(id);
+			else removeWidget(id);
+		}
+		/** Changes from others wait while a widget is dragged here; then the shared document is read again. */
+		let held = false;
+		function applyShared(doc, origin) {
+			if (dragging.value) {
+				held = true;
+				return;
+			}
+			const tr = replaceWidgets(new DashboardTransaction(model.value), doc);
+			if (!tr.changed) return;
+			tr.setMeta("history", false).setMeta("origin", origin);
+			const ids = new Set(tr.doc.widgets.map((widget) => widget.id));
+			if (settingsId.value && !ids.has(settingsId.value)) settingsId.value = void 0;
+			if (fullscreenId.value && !ids.has(fullscreenId.value)) fullscreenId.value = void 0;
+			commit(tr);
+		}
+		let setupTimes = [];
+		let setupWarned = false;
+		function warnRepeatedSetup() {
+			if (process.env.NODE_ENV === "production" || setupWarned) return;
+			const now = Date.now();
+			setupTimes = [...setupTimes.filter((time) => now - time < 1e3), now];
+			if (setupTimes.length < 4) return;
+			setupWarned = true;
+			console.warn("[@dou-ui/dashboard] collaboration keeps being replaced, which starts it over and clears undo each time. Create it once in <script setup> instead of in the template.");
+		}
+		watch(() => props.collaboration, (shared, _, onCleanup) => {
+			if (shared) warnRepeatedSetup();
+			history.clear();
+			historyVersion.value++;
+			if (!shared) return;
+			const stop = shared.setup({
+				document: () => model.value,
+				apply: applyShared
+			});
+			onCleanup(() => {
+				shared.presence?.(null);
+				stop();
+			});
+		}, { immediate: true });
+		/** The widget being moved or resized here, and how. */
+		const drag = shallowRef();
+		function onDragStart(event) {
+			dragging.value = true;
+			drag.value = event;
+		}
+		function onDragEnd() {
+			dragging.value = false;
+			drag.value = void 0;
+			if (!held) return;
+			held = false;
+			queueMicrotask(() => queueMicrotask(() => props.collaboration?.sync()));
+		}
+		/** The widget whose item, or a control in it, has focus. */
+		const focused = ref();
+		function onFocusIn(event) {
+			const item = event.target.closest?.("[data-grid-id]");
+			focused.value = item?.closest(".dou-dashboard") === root.value ? item?.dataset.gridId : void 0;
+		}
+		function onFocusOut(event) {
+			if (!root.value?.contains(event.relatedTarget)) focused.value = void 0;
+		}
+		/** What this person is doing, shown to the others. */
+		const presence = computed(() => {
+			const moving = drag.value;
+			if (moving && moving.kind !== "drop" && widgetMap.value.has(moving.id)) return {
+				widget: moving.id,
+				action: moving.kind
+			};
+			if (settingsId.value) return {
+				widget: settingsId.value,
+				action: "settings"
+			};
+			if (focused.value && widgetMap.value.has(focused.value)) return {
+				widget: focused.value,
+				action: "focus"
+			};
+			return null;
+		});
+		watch([presence, () => props.collaboration], ([current, shared], previous) => {
+			if (!shared?.presence) return;
+			const [before, sharedBefore] = previous ?? [];
+			if (sharedBefore === shared && before?.widget === current?.widget && before?.action === current?.action) return;
+			shared.presence(current);
+		}, { immediate: true });
+		const NO_PEERS = [];
+		provide(frameContextKey, {
+			widget: (id) => widgetMap.value.get(id),
+			type: typeOf,
+			title: titleOf,
+			editing: () => props.editable,
+			messages: () => messages.value,
+			eager: isEager,
+			all: () => showAll.value,
+			setProps,
+			action: onAction,
+			rename,
+			linked: (id) => linksByWidget.value.get(id) ?? NO_LINKS,
+			clearFilter: (key) => setFilter(void 0, key, void 0),
+			peers: (id) => props.collaboration?.peers?.(id) ?? NO_PEERS,
+			setWorkbook,
+			exporters: (id) => workbooks.has(id) ? exporterList.value : NO_EXPORTERS,
+			exportTo: exportFromMenu,
+			exporting: (id) => exporting.has(id),
+			setDrawn: (id, drawn) => drawn ? drawnIds.add(id) : drawnIds.delete(id),
+			exportError: (id) => exportErrors.get(id),
+			clearExportError: (id) => exportErrors.delete(id)
+		});
+		/** How each mounted widget gives its content as a workbook; see `setWorkbook`. */
+		const workbooks = shallowReactive(/* @__PURE__ */ new Map());
+		function setWorkbook(id, get) {
+			workbooks.set(id, get);
+			return () => {
+				if (workbooks.get(id) === get) workbooks.delete(id);
+			};
+		}
+		const sheetCore = shallowRef();
+		let loadingCore;
+		function loadSheetCore() {
+			loadingCore ??= import("@dou-ui/sheet/core").then((core) => sheetCore.value = core);
+			return loadingCore;
+		}
+		watch(() => props.exporters?.length, (count) => count && void loadSheetCore(), { immediate: true });
+		const NO_EXPORTERS = [];
+		const { locale } = useLocale();
+		/** The exporters of the menu, without those that draw a sheet's grid. */
+		const exporterList = computed(() => {
+			const core = sheetCore.value;
+			if (!core) return NO_EXPORTERS;
+			const sheetMessages = core.sheetMessagesFor(locale.value.name);
+			return (props.exporters ?? []).filter((exporter) => exporter.needs !== "view").map((exporter) => ({
+				name: exporter.name,
+				label: typeof exporter.label === "function" ? exporter.label(sheetMessages) : exporter.label,
+				icon: exporter.icon ?? fileIconOf(exporter.extension)
+			}));
+		});
+		function exporterOf(exporter) {
+			if (typeof exporter !== "string") return exporter;
+			const found = props.exporters?.find((item) => item.name === exporter);
+			if (!found) throw new RangeError(`[@dou-ui/dashboard] there is no exporter "${exporter}"`);
+			return found;
+		}
+		/** A widget's file and sheet name: its title, or its type's name. */
+		const exportNameOf = (widget) => titleOf(widget).trim() || widget.type;
+		/** Why something failed, as people read it: a file error's `reason`, or its message. */
+		function reasonOf(error) {
+			if (error instanceof Error) return "reason" in error && typeof error.reason === "string" ? error.reason : error.message;
+			return String(error);
+		}
+		/**
+		* A widget's content as a file: its workbook written by the exporter, a
+		* name from `exporters` or an exporter itself. Waits for the data shown,
+		* and draws the widget first when it is far from the view.
+		*/
+		async function exportWidget(id, exporter, options = {}) {
+			const chosen = exporterOf(exporter);
+			const widget = widgetMap.value.get(id);
+			if (!widget) throw new RangeError(`[@dou-ui/dashboard] there is no widget "${id}"`);
+			const core = await loadSheetCore();
+			await settle(5e3, !drawnIds.has(id));
+			options.signal?.throwIfAborted();
+			const get = workbooks.get(id);
+			const book = get?.();
+			if (!book) throw new core.SheetFileError(get ? `[@dou-ui/dashboard] the widget "${id}" has no data to export now` : `[@dou-ui/dashboard] the widget "${id}" doesn't give its content as a workbook (setWorkbook)`, "empty", messages.value.nothingToExport);
+			const name = exportNameOf(widget);
+			const named = book.sheets.some((sheet) => !sheet.name) ? {
+				...book,
+				sheets: book.sheets.map((sheet) => sheet.name ? sheet : {
+					...sheet,
+					name
+				})
+			} : book;
+			return core.exportWorkbook(named, chosen, {
+				options: options.options,
+				signal: options.signal,
+				locale: locale.value.name
+			});
+		}
+		/** The widgets drawn in full; the others show only their title until they come near. */
+		const drawnIds = /* @__PURE__ */ new Set();
+		/** Why the last export from each widget's menu failed, shown over its content until closed. */
+		const exportErrors = shallowReactive(/* @__PURE__ */ new Map());
+		/** The widgets exporting now, whose export button waits. */
+		const exporting = shallowReactive(/* @__PURE__ */ new Set());
+		/**
+		* Exports a widget's content and saves the file in the downloads, as its
+		* menu does. A failure shows over the widget and comes as `exportError`,
+		* and the promise rejects.
+		*/
+		async function saveWidget(id, exporter, options = {}) {
+			const chosen = exporterOf(exporter);
+			const widget = widgetMap.value.get(id);
+			if (!widget) throw new RangeError(`[@dou-ui/dashboard] there is no widget "${id}"`);
+			const name = options.fileName ?? `${exportNameOf(widget)}.${chosen.extension}`;
+			exportErrors.delete(id);
+			exporting.add(id);
+			let blob;
+			try {
+				blob = await exportWidget(id, chosen, options);
+			} catch (error) {
+				const event = {
+					widget: id,
+					exporter: chosen.name,
+					error,
+					message: format(messages.value.exportFailed, {
+						name,
+						reason: reasonOf(error)
+					}),
+					defaultPrevented: false,
+					preventDefault() {
+						this.defaultPrevented = true;
+					}
+				};
+				emit("exportError", event);
+				if (event.defaultPrevented) say(event.message);
+				else exportErrors.set(id, event.message);
+				throw error;
+			} finally {
+				exporting.delete(id);
+			}
+			downloadBlob(blob, name);
+			say(format(messages.value.exported, { name }));
+		}
+		function exportFromMenu(id, name) {
+			if (exporting.has(id)) return;
+			saveWidget(id, name).catch(() => {});
+		}
+		const store = createSourceStore(() => props.sources);
+		onBeforeUnmount(() => store.dispose());
+		watch(() => props.sources, (next, previous) => {
+			const names = /* @__PURE__ */ new Set([...Object.keys(previous ?? {}), ...Object.keys(next ?? {})]);
+			for (const name of names) if (!sameSource(previous?.[name], next?.[name])) store.reload(name);
+		});
+		/** The filters set by widgets, by key: they apply to every widget but the one that set them. */
+		const links = shallowRef(/* @__PURE__ */ new Map());
+		const EMPTY_SET = /* @__PURE__ */ new Set();
+		const NO_LINKS = [];
+		const linksByWidget = computed(() => {
+			const result = /* @__PURE__ */ new Map();
+			for (const link of links.value.values()) {
+				const list = result.get(link.widget);
+				if (list) list.push(link);
+				else result.set(link.widget, [link]);
+			}
+			return result;
+		});
+		const emittedByWidget = computed(() => {
+			const result = /* @__PURE__ */ new Map();
+			for (const [id, list] of linksByWidget.value) result.set(id, new Set(list.map((link) => link.key)));
+			return result;
+		});
+		const values = shallowRef(filters.value);
+		watch(filters, (next) => values.value = next);
+		function setFilter(widget, key, value, options = {}) {
+			const next = { ...values.value };
+			const nextLinks = new Map(links.value);
+			if (isEmptyFilter(value)) delete next[key];
+			else next[key] = value;
+			if (widget && !isEmptyFilter(value) && widgetMap.value.has(widget)) nextLinks.set(key, {
+				key,
+				value,
+				label: options.label ?? filterText(value),
+				widget
+			});
+			else nextLinks.delete(key);
+			links.value = nextLinks;
+			values.value = next;
+			filters.value = next;
+		}
+		function clearFilters() {
+			links.value = /* @__PURE__ */ new Map();
+			values.value = {};
+			filters.value = {};
+		}
+		watch(filters, (current) => {
+			let next;
+			for (const [key, link] of links.value) {
+				if (sameValue(current[key], link.value)) continue;
+				next ??= new Map(links.value);
+				next.delete(key);
+			}
+			if (next) links.value = next;
+		});
+		watch(widgetMap, (map) => {
+			for (const link of links.value.values()) if (!map.has(link.widget)) setFilter(void 0, link.key, void 0);
+		});
+		const sourceNames = computed(() => Object.keys(props.sources ?? {}));
+		provide(dataContextKey, {
+			store,
+			sourceNames: () => sourceNames.value,
+			filters: () => values.value,
+			emitted: (id) => emittedByWidget.value.get(id) ?? EMPTY_SET,
+			linked: (id) => linksByWidget.value.get(id) ?? NO_LINKS,
+			setFilter
+		});
+		function isTyping(target) {
+			const el = target;
+			if (!el?.tagName) return false;
+			return el.isContentEditable || el.tagName === "TEXTAREA" || el.tagName === "SELECT" || el.tagName === "INPUT" && ![
+				"checkbox",
+				"radio",
+				"button",
+				"range",
+				"color"
+			].includes(el.type);
+		}
+		/** The widget whose item itself has focus (not a control inside it). */
+		function focusedId(target) {
+			const el = target;
+			return el?.dataset?.gridId && el.closest(".dou-dashboard") === root.value ? el.dataset.gridId : void 0;
+		}
+		function onKeydown(event) {
+			if (!props.editable || event.defaultPrevented || isTyping(event.target)) return;
+			if (matchesHotkey(event, "mod+z")) {
+				event.preventDefault();
+				undo();
+				return;
+			}
+			if (matchesHotkey(event, "mod+shift+z") || matchesHotkey(event, "mod+y")) {
+				event.preventDefault();
+				redo();
+				return;
+			}
+			const id = focusedId(event.target);
+			if (!id || dragging.value) return;
+			if (event.key === "Delete" || event.key === "Backspace") {
+				event.preventDefault();
+				removeWidget(id);
+			} else if (matchesHotkey(event, "mod+d")) {
+				event.preventDefault();
+				duplicateWidget(id);
+			}
+		}
+		function onCopy(event, cut = false) {
+			if (isTyping(event.target)) return;
+			const id = focusedId(event.target);
+			const widget = id && widgetMap.value.get(id);
+			if (!widget || !event.clipboardData) return;
+			event.clipboardData.setData("text/plain", JSON.stringify({
+				kind: CLIPBOARD_KIND,
+				widget
+			}));
+			event.preventDefault();
+			if (cut && props.editable) removeWidget(widget.id);
+		}
+		function onPaste(event) {
+			if (!props.editable || isTyping(event.target)) return;
+			let data;
+			try {
+				data = JSON.parse(event.clipboardData?.getData("text/plain") ?? "");
+			} catch {
+				return;
+			}
+			const widget = data?.kind === CLIPBOARD_KIND ? data.widget : void 0;
+			if (!widget?.type || !typeMap.value.has(widget.type)) return;
+			event.preventDefault();
+			const id = focusedId(event.target);
+			addCopy(widget, id ? items.value.find((item) => item.id === id) : void 0);
+		}
+		/** Every widget drawn in full, not only those near the view. */
+		const showAll = ref(false);
+		const nextFrame = () => new Promise((resolve) => requestAnimationFrame(() => resolve()));
+		/** Draws every widget (unless `all` is false) and waits for their sources (at most `timeout` ms) and one more frame. */
+		async function settle(timeout = 5e3, all = true) {
+			if (all) showAll.value = true;
+			await nextTick();
+			const start = performance.now();
+			await nextFrame();
+			while (store.busy() && performance.now() - start < timeout) await nextFrame();
+			await nextFrame();
+			await nextFrame();
+		}
+		/** The dashboard as it is shown, every widget drawn, as a PNG image. */
+		async function exportPNG(options) {
+			await settle();
+			const el = root.value;
+			el.classList.add("is-exporting");
+			try {
+				return elementToPNG(el, options);
+			} finally {
+				el.classList.remove("is-exporting");
+			}
+		}
+		/** Draws every widget, waits for their data, and opens the browser's print dialog. */
+		async function print() {
+			await settle();
+			window.print();
+		}
+		function onBeforePrint() {
+			showAll.value = true;
+		}
+		onMounted(() => window.addEventListener("beforeprint", onBeforePrint));
+		onBeforeUnmount(() => window.removeEventListener("beforeprint", onBeforePrint));
+		const live = ref("");
+		function say(text) {
+			live.value = "";
+			requestAnimationFrame(() => live.value = text);
+		}
+		const breakpointName = shallowRef(main.value.name);
+		function onBreakpoint(name) {
+			breakpointName.value = name;
+			emit("breakpointChange", name);
+		}
+		const minHeight = computed(() => {
+			const gap = Array.isArray(props.gap) ? props.gap[1] : props.gap;
+			return `${props.rowHeight * 3 + gap * 2}px`;
+		});
+		__expose({
+			transaction,
+			dispatch,
+			undo,
+			redo,
+			get canUndo() {
+				return canUndo.value;
+			},
+			get canRedo() {
+				return canRedo.value;
+			},
+			addWidget,
+			removeWidget,
+			duplicateWidget,
+			focusWidget,
+			openSettings,
+			openFullscreen,
+			startAdd,
+			get types() {
+				return props.widgets;
+			},
+			get breakpoint() {
+				return grid.value?.breakpoint ?? breakpointName.value;
+			},
+			get editable() {
+				return props.editable;
+			},
+			get document() {
+				return model.value;
+			},
+			get filters() {
+				return values.value;
+			},
+			get linkedFilters() {
+				return [...links.value.values()];
+			},
+			setFilter: (key, value, options) => setFilter(void 0, key, value, options),
+			clearFilters,
+			refresh: (source) => store.reload(source),
+			exportPNG,
+			exportWidget,
+			saveWidget,
+			print
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				ref_key: "root",
+				ref: root,
+				class: normalizeClass(["dou-dashboard", __props.editable && "is-editable"]),
+				role: "region",
+				"aria-label": __props.label || unref(messages).dashboard,
+				tabindex: "-1",
+				onKeydown,
+				onCopy: _cache[6] || (_cache[6] = ($event) => onCopy($event)),
+				onCut: _cache[7] || (_cache[7] = ($event) => onCopy($event, true)),
+				onPaste,
+				onFocusin: onFocusIn,
+				onFocusout: onFocusOut
+			}, [
+				createVNode(grid_layout_default, {
+					ref_key: "grid",
+					ref: grid,
+					"model-value": items.value,
+					layouts: layouts.value,
+					columns: __props.columns,
+					breakpoints: __props.breakpoints,
+					"row-height": __props.rowHeight,
+					gap: __props.gap,
+					compact: __props.compact,
+					editable: __props.editable,
+					handle: true,
+					"item-label": labelOf,
+					messages: unref(messages),
+					style: normalizeStyle(__props.editable && !model.value.widgets.length ? { minHeight: minHeight.value } : void 0),
+					"onUpdate:modelValue": _cache[0] || (_cache[0] = (list) => gather({ items: list })),
+					"onUpdate:layouts": _cache[1] || (_cache[1] = (next) => gather({ layouts: next })),
+					onDrop,
+					onDragStart,
+					onDragEnd,
+					onBreakpointChange: onBreakpoint
+				}, {
+					item: withCtx(({ item }) => [createVNode(widget_frame_default, { id: item.id }, null, 8, ["id"])]),
+					_: 1
+				}, 8, [
+					"model-value",
+					"layouts",
+					"columns",
+					"breakpoints",
+					"row-height",
+					"gap",
+					"compact",
+					"editable",
+					"messages",
+					"style"
+				]),
+				__props.editable && !model.value.widgets.length ? (openBlock(), createElementBlock("div", _hoisted_2, [createVNode(unref(DouEmpty), {
+					size: "sm",
+					title: unref(messages).emptyTitle,
+					description: unref(messages).emptyHint
+				}, {
+					icon: withCtx(() => [createVNode(unref(LayoutGridPlusIcon))]),
+					_: 1
+				}, 8, ["title", "description"])])) : createCommentVNode("", true),
+				createElementVNode("div", _hoisted_3, toDisplayString(live.value), 1),
+				createVNode(unref(DouDrawer), {
+					open: !!settingsWidget.value,
+					title: settingsWidget.value ? unref(format)(unref(messages).settingsTitle, { title: titleOf(settingsWidget.value) }) : "",
+					size: 360,
+					"onUpdate:open": _cache[4] || (_cache[4] = (open) => !open && (settingsId.value = void 0)),
+					onClosed: restoreFocus
+				}, {
+					default: withCtx(() => [settingsWidget.value ? (openBlock(), createElementBlock("div", _hoisted_4, [createElementVNode("label", _hoisted_5, [createElementVNode("span", _hoisted_6, toDisplayString(unref(messages).titleField), 1), createVNode(unref(DouInput), {
+						"model-value": settingsWidget.value.title ?? "",
+						placeholder: typeOf(settingsWidget.value)?.label ?? settingsWidget.value.type,
+						"onUpdate:modelValue": _cache[2] || (_cache[2] = (value) => run([{
+							type: "update",
+							id: settingsWidget.value.id,
+							patch: { title: value || void 0 }
+						}], {
+							origin: "settings",
+							group: `title:${settingsWidget.value.id}`
+						}))
+					}, null, 8, ["model-value", "placeholder"])]), typeOf(settingsWidget.value)?.settings ? (openBlock(), createBlock(widget_settings_default, {
+						key: 0,
+						widget: settingsWidget.value,
+						type: typeOf(settingsWidget.value),
+						"set-props": setProps,
+						"onUpdate:props": _cache[3] || (_cache[3] = (value) => run([{
+							type: "update",
+							id: settingsWidget.value.id,
+							patch: { props: value }
+						}], {
+							origin: "settings",
+							group: `props:${settingsWidget.value.id}`
+						}))
+					}, null, 8, ["widget", "type"])) : createCommentVNode("", true)])) : createCommentVNode("", true)]),
+					_: 1
+				}, 8, ["open", "title"]),
+				createVNode(unref(DouDialog), {
+					open: !!fullscreenWidget.value,
+					title: fullscreenWidget.value ? titleOf(fullscreenWidget.value) : "",
+					fullscreen: "",
+					"onUpdate:open": _cache[5] || (_cache[5] = (open) => !open && (fullscreenId.value = void 0)),
+					onClosed: restoreFocus
+				}, {
+					default: withCtx(() => [fullscreenWidget.value ? (openBlock(), createBlock(widget_body_default, {
+						key: 0,
+						class: "is-fullscreen",
+						widget: fullscreenWidget.value,
+						type: typeOf(fullscreenWidget.value),
+						editing: false,
+						fullscreen: "",
+						messages: unref(messages),
+						"set-props": setProps
+					}, null, 8, [
+						"widget",
+						"type",
+						"messages"
+					])) : createCommentVNode("", true)]),
+					_: 1
+				}, 8, ["open", "title"])
+			], 42, _hoisted_1);
+		};
+	}
+});
+export { dashboard_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=dashboard.vue_vue_type_script_setup_true_lang.js.map