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

package/dist/components/sheet-toolbar.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,1562 @@
+import { boundsOf, columnName, formatRange, inBounds, parseRange } from "../core/address.js";
+import { changeDecimals, formatValue } from "../core/format.js";
+import { rangesOf, ruleRangeText } from "../core/conditional.js";
+import { format } from "../locale.js";
+import { useSheet } from "../context.js";
+import { LOOKS, SCALES, TONES, barSwatch, scaleSwatch, toneKey } from "./format-presets.js";
+import format_dialog_default from "./format-dialog.js";
+import format_list_default from "./format-list.js";
+import validation_dialog_default from "./validation-dialog.js";
+import { DouButton, DouColorPanel, DouDropdown, DouDropdownItem, DouDropdownRadioGroup, DouDropdownSub, DouPopover, DouToggle, DouToggleGroup, DouToolbar, DouToolbarSeparator, DouTooltip } from "dou-ui";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, openBlock, ref, renderList, renderSlot, resolveDynamicComponent, toDisplayString, unref, useTemplateRef, watch, withCtx } from "vue";
+import { BaselineIcon, BoldIcon, CellsMergeIcon, ChevronDownIcon, DecimalDecreaseIcon, DecimalIncreaseIcon, DownloadIcon, FilterIcon, ItalicIcon, LinkIcon, PaintBucketIcon, PaletteIcon, RedoIcon, ShieldLockIcon, SortAscendingIcon, SortDescendingIcon, SortIcon, StrikethroughIcon, TableCheckIcon, TableFreezeIcon, TableHighlightIcon, TextAlignCenterIcon, TextAlignLeftIcon, TextAlignRightIcon, TextValignBottomIcon, TextValignMiddleIcon, TextValignTopIcon, TypeXIcon, UnderlineIcon, UndoIcon, UploadIcon, WrapTextIcon } from "@dou-ui/icons";
+// src/components/sheet-toolbar.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "dou-sheet-toolbar" };
+var _hoisted_2 = { class: "dou-sheet-toolbar__trigger" };
+var _hoisted_3 = {
+	key: 1,
+	class: "dou-sheet-toolbar__text"
+};
+var _hoisted_4 = {
+	key: 1,
+	class: "dou-sheet-toolbar__text"
+};
+var _hoisted_5 = {
+	key: 1,
+	class: "dou-sheet-toolbar__text"
+};
+var _hoisted_6 = { class: "dou-sheet-toolbar__format-label" };
+var _hoisted_7 = { class: "dou-sheet-toolbar__example" };
+var _hoisted_8 = { class: "dou-sheet-toolbar__trigger" };
+var _hoisted_9 = ["aria-label"];
+var _hoisted_10 = [
+	"aria-pressed",
+	"aria-label",
+	"title",
+	"onClick"
+];
+var _hoisted_11 = [
+	"aria-pressed",
+	"aria-label",
+	"title",
+	"onClick"
+];
+var _hoisted_12 = {
+	key: 0,
+	"aria-hidden": "true"
+};
+var _hoisted_13 = [
+	"aria-pressed",
+	"aria-expanded",
+	"aria-label",
+	"title",
+	"onClick"
+];
+var _hoisted_14 = {
+	key: 0,
+	"aria-hidden": "true"
+};
+var _hoisted_15 = { class: "dou-sheet-toolbar__trigger" };
+var _hoisted_16 = { class: "dou-sheet-toolbar__trigger" };
+var _hoisted_17 = { class: "dou-sheet-toolbar__trigger" };
+var _hoisted_18 = { class: "dou-sheet-toolbar__trigger" };
+var _hoisted_19 = { class: "dou-sheet-toolbar__trigger" };
+var _hoisted_20 = { class: "dou-sheet-toolbar__trigger" };
+var _hoisted_21 = ["accept"];
+var sheet_toolbar_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "DouSheetToolbar",
+	__name: "sheet-toolbar",
+	props: {
+		tools: {},
+		formats: {},
+		fileName: { type: [String, Function] }
+	},
+	setup(__props) {
+		const props = __props;
+		const sheet = useSheet();
+		const { messages: m, active } = sheet;
+		const DEFAULT_TOOLS = [
+			"undo",
+			"redo",
+			"|",
+			"format",
+			"decimals",
+			"|",
+			"bold",
+			"italic",
+			"underline",
+			"strike",
+			"|",
+			"color",
+			"fill",
+			"|",
+			"align",
+			"valign",
+			"wrap",
+			"|",
+			"merge",
+			"freeze",
+			"link",
+			"|",
+			"sort",
+			"filter",
+			"conditional",
+			"validation",
+			"protect",
+			"|",
+			"clear"
+		];
+		const BUILT_IN = /* @__PURE__ */ new Set([
+			...DEFAULT_TOOLS,
+			"export",
+			"import"
+		]);
+		/** The protect menu: locking the selection, then protecting the sheet and the workbook. */
+		const PROTECT_COMMANDS = [
+			"lock",
+			"protect.sheet",
+			"protect.workbook"
+		];
+		/** A tool that isn't built in, ready to draw: an extension's item, or a command by name. */
+		function extraTool(item) {
+			const name = item.command;
+			const info = name ? sheet.commands.get(name) : void 0;
+			if (name && !info) throw new Error(`[@dou-ui/sheet] the toolbar item "${item.key}" runs no command: "${name}" is unknown`);
+			return {
+				key: item.key,
+				label: item.label ?? info?.label ?? item.key,
+				icon: item.icon ?? info?.icon,
+				shortcut: item.shortcut ?? info?.shortcut,
+				pressed: item.pressed ?? (name && info.toggle ? sheet.commands.pressed(name) : void 0),
+				disabled: item.disabled ?? (name ? !sheet.commands.can(name) : false),
+				run: item.run ?? (name ? () => void sheet.commands.run(name) : void 0),
+				children: item.children
+			};
+		}
+		/** The extensions' items, by key. */
+		const extensionItems = computed(() => {
+			const map = /* @__PURE__ */ new Map();
+			for (const item of sheet.toolbarItems.value) {
+				if (BUILT_IN.has(item.key) || map.has(item.key)) throw new Error(`[@dou-ui/sheet] the toolbar item "${item.key}" is added twice, or has the name of a built-in tool`);
+				warnOnce(item);
+				map.set(item.key, item);
+			}
+			return map;
+		});
+		const warned = /* @__PURE__ */ new Set();
+		/** Says once when an item can't show a name or does nothing when pressed. */
+		function warnOnce(item) {
+			if (process.env.NODE_ENV === "production" || warned.has(item.key)) return;
+			warned.add(item.key);
+			if (!item.command && !item.label) console.warn(`[@dou-ui/sheet] the toolbar item "${item.key}" has no label or command, so it shows its key`);
+			if (!item.command && !item.run && !item.children?.length) console.warn(`[@dou-ui/sheet] the toolbar item "${item.key}" has no run, command or children: pressing it does nothing`);
+		}
+		/**
+		* Built-in tools of one button that an extension's command replaced: they
+		* are drawn from the command, with its label, icon and state.
+		*/
+		const SINGLE = /* @__PURE__ */ new Set([
+			"undo",
+			"redo",
+			"bold",
+			"italic",
+			"underline",
+			"strike",
+			"wrap",
+			"merge",
+			"filter",
+			"clear",
+			"link"
+		]);
+		const replaced = (tool) => SINGLE.has(tool) && sheet.commands.get(tool)?.builtin === false;
+		/** The tools to show, without separators at either end or two in a row. */
+		const tools = computed(() => {
+			const list = props.tools ?? [
+				...DEFAULT_TOOLS,
+				"|",
+				...extensionItems.value.keys()
+			];
+			const out = [];
+			for (const tool of list) if (tool !== "|" || out.length && out[out.length - 1] !== "|") out.push(tool);
+			if (out[out.length - 1] === "|") out.pop();
+			return out;
+		});
+		/** The tools that aren't built in, by name. */
+		const extras = computed(() => {
+			const map = /* @__PURE__ */ new Map();
+			for (const tool of tools.value) {
+				if (replaced(tool)) {
+					map.set(tool, extraTool({
+						key: tool,
+						command: tool
+					}));
+					continue;
+				}
+				if (tool === "|" || BUILT_IN.has(tool)) continue;
+				const item = extensionItems.value.get(tool);
+				if (item) map.set(tool, extraTool(item));
+				else if (sheet.commands.has(tool)) map.set(tool, extraTool({
+					key: tool,
+					command: tool
+				}));
+				else throw new Error(`[@dou-ui/sheet] the toolbar has no tool "${tool}": it is no built-in tool, item of an extension or command`);
+			}
+			return map;
+		});
+		/** Runs a command from a tool, then gives the keys back to the grid after a press. */
+		function run(name, arg) {
+			sheet.commands.run(name, arg);
+			done();
+		}
+		const can = (name) => sheet.commands.can(name);
+		const on = (name) => sheet.commands.pressed(name);
+		function runExtra(item) {
+			item.run?.();
+			done();
+		}
+		function runChild(child) {
+			const name = child.command;
+			if (child.run) child.run();
+			else if (name) sheet.commands.run(name);
+			done();
+		}
+		const childLabel = (child) => child.label ?? (child.command ? sheet.commands.get(child.command)?.label ?? child.key : child.key);
+		const childIcon = (child) => child.icon ?? (child.command ? sheet.commands.get(child.command)?.icon : void 0);
+		const childShortcut = (child) => child.shortcut ?? (child.command ? sheet.commands.get(child.command)?.shortcut : void 0);
+		const coarse = ref(false);
+		onMounted(() => {
+			coarse.value = typeof matchMedia !== "undefined" && matchMedia("(pointer: coarse)").matches;
+		});
+		const childDisabled = (child) => child.disabled ?? (child.command ? !sheet.commands.can(child.command) : false);
+		const disabled = computed(() => sheet.readonly.value);
+		const style = computed(() => sheet.styleAt(active.value));
+		const cellFormat = computed(() => sheet.formatAt(active.value));
+		let pointer = false;
+		function onPointerDown(event) {
+			pointer = true;
+			if (event.pointerType === "mouse" && event.target.closest("button")) event.preventDefault();
+		}
+		function onKeyDown() {
+			pointer = false;
+		}
+		function done() {
+			if (pointer) nextTick(() => sheet.focus());
+		}
+		const menuOpen = ref(null);
+		function onMenu(tool, open) {
+			if (open) menuOpen.value = tool;
+			else if (menuOpen.value === tool) {
+				menuOpen.value = null;
+				done();
+			}
+		}
+		/** Whether more than one cell is selected, so exporting the selection means something. */
+		const manySelected = computed(() => {
+			const { ranges } = sheet.selection.value;
+			if (ranges.length !== 1) return true;
+			const { start, end } = ranges[0];
+			return start.row !== end.row || start.col !== end.col;
+		});
+		const exportItems = computed(() => sheet.exporters.value.map((exporter) => {
+			const scopes = exporter.scopes.filter((scope) => scope !== "selection" || manySelected.value);
+			return {
+				name: exporter.name,
+				label: exporter.label,
+				icon: exporter.icon,
+				extension: exporter.extension,
+				scopes: scopes.length > 1 ? scopes : [],
+				scope: scopes[0]
+			};
+		}));
+		function exportWith(name, scope) {
+			done();
+			const exporter = sheet.exporters.value.find((e) => e.name === name);
+			const fileName = typeof props.fileName === "function" ? props.fileName(exporter, scope ?? exporter.scopes[0]) : props.fileName && `${props.fileName}.${exporter.extension}`;
+			sheet.saveFile(name, {
+				scope,
+				fileName
+			}).catch(() => {});
+		}
+		const picker = useTemplateRef("picker");
+		function pickFile() {
+			picker.value?.click();
+		}
+		function onPicked(event) {
+			const input = event.target;
+			const file = input.files?.[0];
+			input.value = "";
+			nextTick(() => sheet.focus());
+			if (file) sheet.importFile(file).catch(() => {});
+		}
+		function onPickCancel() {
+			nextTick(() => sheet.focus());
+		}
+		const STYLE = {
+			bold: {
+				icon: BoldIcon,
+				key: "mod+b"
+			},
+			italic: {
+				icon: ItalicIcon,
+				key: "mod+i"
+			},
+			underline: {
+				icon: UnderlineIcon,
+				key: "mod+u"
+			},
+			strike: {
+				icon: StrikethroughIcon,
+				key: "mod+shift+x"
+			}
+		};
+		const isStyleTool = (tool) => tool in STYLE;
+		const formats = computed(() => props.formats ?? [
+			{
+				label: m.value.formatGeneral,
+				format: void 0,
+				example: 1234.5
+			},
+			{
+				label: m.value.formatNumber,
+				format: "#,##0.00",
+				example: 1234.5
+			},
+			{
+				label: m.value.formatPercent,
+				format: "0.00%",
+				example: .1234
+			},
+			{
+				label: m.value.formatCurrency,
+				format: m.value.currencyFormat,
+				example: 1234.5
+			},
+			{
+				label: m.value.formatDate,
+				format: "yyyy-mm-dd",
+				example: "2026-03-05"
+			},
+			{
+				label: m.value.formatTime,
+				format: "hh:mm",
+				example: "09:30"
+			},
+			{
+				label: m.value.formatText,
+				format: "@"
+			}
+		]);
+		/**
+		* The option the cell's format is, or is with other decimals or grouping:
+		* `¥#,##0.000` is still currency, `0.0%` still percent and `0.0` a number.
+		*/
+		const formatShown = computed(() => {
+			const current = cellFormat.value;
+			const exact = formats.value.find((option) => option.format === current);
+			if (exact || !current) return exact ?? null;
+			const kind = withoutDecimals(current);
+			return formats.value.find((option) => option.format && withoutDecimals(option.format) === kind) ?? null;
+		});
+		const formatLabel = computed(() => formatShown.value?.label ?? m.value.formatCustom);
+		const withoutDecimals = (pattern) => changeDecimals(pattern, null, -99).replace(/[#,](?=[#,0]*0)/g, "");
+		const exampleOf = (option) => option.example == null ? "" : formatValue(option.example, option.format);
+		function setFormat(option) {
+			sheet.formatSelection(option.format);
+			done();
+		}
+		const toneLabel = (tone) => m.value[toneKey(tone)];
+		const colorOpen = ref(null);
+		const custom = ref(null);
+		const customColor = ref(null);
+		/** The color a tool shows now: a tone, a CSS color, or `null` for none. */
+		function colorOf(tool) {
+			const s = style.value;
+			return tool === "color" ? {
+				tone: s.color ? void 0 : s.tone,
+				css: s.color
+			} : {
+				tone: s.background ? void 0 : s.fill,
+				css: s.background
+			};
+		}
+		/** What the mark under the icon is drawn in. */
+		function swatchOf(tool) {
+			const { tone, css } = colorOf(tool);
+			if (css) return css;
+			if (!tone) return void 0;
+			return tool === "color" ? `var(--dou-color-${tone}-text)` : `var(--dou-color-${tone})`;
+		}
+		function setColor(tool, value, close = true) {
+			sheet.styleSelection(tool === "color" ? {
+				tone: value.tone,
+				color: value.css
+			} : {
+				fill: value.tone,
+				background: value.css
+			});
+			if (close) {
+				colorOpen.value = null;
+				done();
+			}
+		}
+		/** Opens the color panel, starting from the color the cell shows now. */
+		function openCustom(tool, event) {
+			custom.value = custom.value === tool ? null : tool;
+			const css = colorOf(tool).css;
+			if (css) customColor.value = css;
+			else {
+				const shown = event.currentTarget.closest(".dou-sheet-toolbar__colors")?.querySelector("[aria-pressed=\"true\"]");
+				const look = shown && getComputedStyle(shown);
+				customColor.value = look && (tool === "color" ? look.color : look.backgroundColor) || null;
+			}
+		}
+		watch(colorOpen, (open) => {
+			if (open) return;
+			custom.value = null;
+			done();
+		});
+		const ALIGN = [
+			{
+				value: "left",
+				icon: TextAlignLeftIcon,
+				label: "alignLeft"
+			},
+			{
+				value: "center",
+				icon: TextAlignCenterIcon,
+				label: "alignCenter"
+			},
+			{
+				value: "right",
+				icon: TextAlignRightIcon,
+				label: "alignRight"
+			}
+		];
+		const VALIGN = [
+			{
+				value: "top",
+				icon: TextValignTopIcon,
+				label: "alignTop"
+			},
+			{
+				value: "middle",
+				icon: TextValignMiddleIcon,
+				label: "alignMiddle"
+			},
+			{
+				value: "bottom",
+				icon: TextValignBottomIcon,
+				label: "alignBottom"
+			}
+		];
+		const align = computed(() => ALIGN.find((a) => on(`align.${a.value}`))?.value ?? null);
+		const valign = computed(() => VALIGN.find((v) => on(`valign.${v.value}`))?.value ?? "middle");
+		const valignIcon = computed(() => VALIGN.find((v) => v.value === valign.value).icon);
+		function setAlign(value) {
+			if (typeof value === "string") run(`align.${value}`);
+		}
+		/** The selected ranges, as names such as `D2:D40`. */
+		function selectedRanges() {
+			const data = sheet.sheet.value;
+			const size = {
+				rows: data.rowCount ?? 1e3,
+				cols: data.colCount ?? 26
+			};
+			return sheet.selection.value.ranges.map((range) => formatRange(range, size));
+		}
+		/** The selection as a rule's range, which a new rule starts with: one range, or several. */
+		function selectedRange() {
+			const ranges = selectedRanges();
+			return ranges.length === 1 ? ranges[0] : ranges;
+		}
+		/** Whether a rule's ranges hold a cell. */
+		const ruleHolds = (range, row, col) => rangesOf(range).some((text) => {
+			const r = parseRange(text);
+			return !!r && inBounds(boundsOf(r), row, col);
+		});
+		function addFormats(list) {
+			if (!list.length) return;
+			sheet.transact((tr) => {
+				for (const f of list) tr.addConditionalFormat(f);
+			}, { action: "format" });
+			sheet.announce(format(m.value.formats.added, { range: list.map((f) => ruleRangeText(f.range)).join(", ") }));
+			done();
+		}
+		/** The menu items that open the dialog, and the rule each starts with. */
+		const HIGHLIGHTS = [
+			"gt",
+			"lt",
+			"between",
+			"eq",
+			"contains",
+			"duplicates",
+			"formula"
+		];
+		const RANKS = [
+			"top",
+			"bottom",
+			"above",
+			"below"
+		];
+		function startOf(item, range) {
+			const look = { ...LOOKS.danger };
+			switch (item) {
+				case "duplicates": return {
+					range,
+					duplicates: true,
+					style: look
+				};
+				case "formula": return {
+					range,
+					formula: "",
+					style: look
+				};
+				case "top": return {
+					range,
+					top: 10,
+					style: look
+				};
+				case "bottom": return {
+					range,
+					bottom: 10,
+					style: look
+				};
+				case "above":
+				case "below": return {
+					range,
+					average: item,
+					style: look
+				};
+				default: return {
+					range,
+					when: { op: item },
+					style: look
+				};
+			}
+		}
+		const dialogFormat = ref({
+			range: "",
+			when: { op: "gt" },
+			style: {}
+		});
+		const dialogTitle = ref("");
+		const dialogOpen = ref(false);
+		/** The rule being edited, by its place in the list; `-1` adds one. */
+		const editing = ref(-1);
+		function openFormat(item) {
+			dialogFormat.value = startOf(item, selectedRange());
+			dialogTitle.value = m.value.formats[item].replace(/…$/, "");
+			editing.value = -1;
+			dialogOpen.value = true;
+		}
+		function editFormat(index) {
+			dialogFormat.value = conditionals.value[index];
+			dialogTitle.value = m.value.formats.editTitle;
+			editing.value = index;
+			dialogOpen.value = true;
+		}
+		function applyFormat(f) {
+			if (editing.value < 0) return addFormats([f]);
+			const list = [...conditionals.value];
+			list[editing.value] = f;
+			setFormats(list);
+		}
+		function dialogClosed() {
+			if (!listOpen.value) sheet.focus();
+		}
+		const validations = computed(() => sheet.sheet.value.validations ?? []);
+		const ruleOpen = ref(false);
+		const rule = ref({
+			range: "",
+			list: []
+		});
+		/** The rule being edited, by its place in the sheet's; `-1` adds one. */
+		const ruleIndex = ref(-1);
+		/** Opens the rule of the active cell, or a new one for the selection. */
+		function openValidation() {
+			const { row, col } = active.value;
+			ruleIndex.value = validations.value.findIndex((r) => ruleHolds(r.range, row, col));
+			rule.value = ruleIndex.value >= 0 ? validations.value[ruleIndex.value] : {
+				range: selectedRange(),
+				list: []
+			};
+			ruleOpen.value = true;
+		}
+		function applyValidation(next) {
+			const list = [...validations.value];
+			if (ruleIndex.value >= 0) list[ruleIndex.value] = next;
+			else list.push(next);
+			sheet.transact((tr) => tr.setValidations(list), { action: "validation" });
+			sheet.announce(format(m.value.validation.added, { range: ruleRangeText(next.range) }));
+		}
+		function removeValidation() {
+			const gone = validations.value[ruleIndex.value];
+			if (!gone) return;
+			sheet.transact((tr) => tr.setValidations(validations.value.filter((r) => r !== gone)), { action: "validation" });
+			sheet.announce(format(m.value.validation.removed, { range: ruleRangeText(gone.range) }));
+		}
+		const listOpen = ref(false);
+		const conditionals = computed(() => sheet.sheet.value.conditionalFormats ?? []);
+		function setFormats(next) {
+			sheet.transact((tr) => tr.setConditionalFormats(next), { action: "format" });
+		}
+		function clearFormats(all) {
+			const before = conditionals.value.length;
+			sheet.transact((tr) => {
+				if (all) tr.clearConditionalFormats();
+				else for (const range of selectedRanges()) tr.clearConditionalFormats(range);
+			}, { action: "format" });
+			const count = before - (sheet.sheet.value.conditionalFormats?.length ?? 0);
+			sheet.announce(format(m.value.formats.cleared, { count }));
+			done();
+		}
+		function addScale(colors) {
+			addFormats([{
+				range: selectedRange(),
+				scale: [...colors]
+			}]);
+		}
+		function addBar(tone) {
+			addFormats([{
+				range: selectedRange(),
+				bar: tone
+			}]);
+		}
+		const freeze = computed(() => sheet.sheet.value.freeze ?? {});
+		function setFreeze(rows, cols) {
+			sheet.transact((tr) => tr.updateSheet({ freeze: rows || cols ? {
+				rows: rows || void 0,
+				cols: cols || void 0
+			} : void 0 }), { action: "freeze" });
+			done();
+		}
+		const freezeItems = computed(() => {
+			const { row, col } = active.value;
+			const f = freeze.value;
+			const items = [{
+				key: "row1",
+				label: m.value.freezeFirstRow,
+				rows: 1,
+				cols: f.cols ?? 0
+			}, {
+				key: "col1",
+				label: m.value.freezeFirstCol,
+				rows: f.rows ?? 0,
+				cols: 1
+			}];
+			if (row > 0) items.push({
+				key: "rows",
+				label: format(m.value.freezeRows, { n: row + 1 }),
+				rows: row + 1,
+				cols: f.cols ?? 0
+			});
+			if (col > 0) items.push({
+				key: "cols",
+				label: format(m.value.freezeCols, { col: columnName(col) }),
+				rows: f.rows ?? 0,
+				cols: col + 1
+			});
+			return items;
+		});
+		const frozen = computed(() => !!(freeze.value.rows || freeze.value.cols));
+		const bar = useTemplateRef("bar");
+		const barEl = computed(() => bar.value?.$el ?? null);
+		const more = ref({
+			start: false,
+			end: false
+		});
+		function measure() {
+			const el = barEl.value;
+			if (!el) return;
+			const start = el.scrollLeft > 1;
+			const end = el.scrollLeft + el.clientWidth < el.scrollWidth - 1;
+			if (start !== more.value.start || end !== more.value.end) more.value = {
+				start,
+				end
+			};
+		}
+		let observer;
+		watch(barEl, (el) => {
+			observer?.disconnect();
+			if (!el || typeof ResizeObserver === "undefined") return;
+			observer = new ResizeObserver(measure);
+			observer.observe(el);
+		}, { flush: "post" });
+		onBeforeUnmount(() => observer?.disconnect());
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1, [
+				createVNode(unref(DouToolbar), {
+					ref_key: "bar",
+					ref: bar,
+					size: "sm",
+					class: normalizeClass(["dou-sheet-toolbar__bar", {
+						"has-more-start": more.value.start,
+						"has-more-end": more.value.end
+					}]),
+					"aria-label": unref(m).toolbar,
+					onPointerdown: onPointerDown,
+					onKeydown: onKeyDown,
+					onScrollPassive: measure
+				}, {
+					default: withCtx(() => [
+						renderSlot(_ctx.$slots, "start"),
+						(openBlock(true), createElementBlock(Fragment, null, renderList(tools.value, (tool, i) => {
+							return openBlock(), createElementBlock(Fragment, { key: tool === "|" ? `|${i}` : tool }, [tool === "|" ? (openBlock(), createBlock(unref(DouToolbarSeparator), { key: 0 })) : extras.value.get(tool)?.children ? (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList([extras.value.get(tool)], (item) => {
+								return openBlock(), createBlock(unref(DouTooltip), {
+									key: item.key,
+									content: item.label,
+									disabled: menuOpen.value === tool || !item.icon,
+									placement: "bottom"
+								}, {
+									default: withCtx(() => [createElementVNode("span", _hoisted_2, [createVNode(unref(DouDropdown), {
+										open: menuOpen.value === tool,
+										placement: "bottom-start",
+										disabled: item.disabled,
+										"onUpdate:open": ($event) => onMenu(tool, $event)
+									}, {
+										menu: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(item.children, (child) => {
+											return openBlock(), createElementBlock(Fragment, { key: child.key }, [child.children?.length ? (openBlock(), createBlock(unref(DouDropdownSub), {
+												key: 0,
+												title: childLabel(child),
+												divided: child.divided
+											}, {
+												default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(child.children, (grand) => {
+													return openBlock(), createBlock(unref(DouDropdownItem), {
+														key: grand.key,
+														disabled: childDisabled(grand),
+														divided: grand.divided,
+														tone: grand.tone,
+														shortcut: coarse.value ? void 0 : childShortcut(grand),
+														onClick: ($event) => runChild(grand)
+													}, createSlots({
+														default: withCtx(() => [createTextVNode(" " + toDisplayString(childLabel(grand)), 1)]),
+														_: 2
+													}, [childIcon(grand) ? {
+														name: "prefix",
+														fn: withCtx(() => [(openBlock(), createBlock(resolveDynamicComponent(childIcon(grand))))]),
+														key: "0"
+													} : void 0]), 1032, [
+														"disabled",
+														"divided",
+														"tone",
+														"shortcut",
+														"onClick"
+													]);
+												}), 128))]),
+												_: 2
+											}, 1032, ["title", "divided"])) : (openBlock(), createBlock(unref(DouDropdownItem), {
+												key: 1,
+												disabled: childDisabled(child),
+												divided: child.divided,
+												tone: child.tone,
+												shortcut: coarse.value ? void 0 : childShortcut(child),
+												onClick: ($event) => runChild(child)
+											}, createSlots({
+												default: withCtx(() => [createTextVNode(" " + toDisplayString(childLabel(child)), 1)]),
+												_: 2
+											}, [childIcon(child) ? {
+												name: "prefix",
+												fn: withCtx(() => [(openBlock(), createBlock(resolveDynamicComponent(childIcon(child))))]),
+												key: "0"
+											} : void 0]), 1032, [
+												"disabled",
+												"divided",
+												"tone",
+												"shortcut",
+												"onClick"
+											]))], 64);
+										}), 128))]),
+										default: withCtx(() => [createVNode(unref(DouButton), {
+											variant: "ghost",
+											class: "dou-sheet-toolbar__menu",
+											"aria-label": item.label
+										}, {
+											trailing: withCtx(() => [createVNode(unref(ChevronDownIcon))]),
+											default: withCtx(() => [item.icon ? (openBlock(), createBlock(resolveDynamicComponent(item.icon), { key: 0 })) : (openBlock(), createElementBlock("span", _hoisted_3, toDisplayString(item.label), 1))]),
+											_: 2
+										}, 1032, ["aria-label"])]),
+										_: 2
+									}, 1032, [
+										"open",
+										"disabled",
+										"onUpdate:open"
+									])])]),
+									_: 2
+								}, 1032, ["content", "disabled"]);
+							}), 128)) : extras.value.get(tool) ? (openBlock(true), createElementBlock(Fragment, { key: 2 }, renderList([extras.value.get(tool)], (item) => {
+								return openBlock(), createBlock(unref(DouTooltip), {
+									key: item.key,
+									content: item.label,
+									shortcut: item.shortcut,
+									disabled: !item.icon && !item.shortcut,
+									placement: "bottom"
+								}, {
+									default: withCtx(() => [item.pressed !== void 0 ? (openBlock(), createBlock(unref(DouToggle), {
+										key: 0,
+										pressed: item.pressed,
+										"aria-label": item.label,
+										"aria-keyshortcuts": item.shortcut,
+										disabled: item.disabled,
+										"onUpdate:pressed": ($event) => runExtra(item)
+									}, {
+										default: withCtx(() => [item.icon ? (openBlock(), createBlock(resolveDynamicComponent(item.icon), { key: 0 })) : (openBlock(), createElementBlock("span", _hoisted_4, toDisplayString(item.label), 1))]),
+										_: 2
+									}, 1032, [
+										"pressed",
+										"aria-label",
+										"aria-keyshortcuts",
+										"disabled",
+										"onUpdate:pressed"
+									])) : (openBlock(), createBlock(unref(DouButton), {
+										key: 1,
+										variant: "ghost",
+										"aria-label": item.label,
+										"aria-keyshortcuts": item.shortcut,
+										disabled: item.disabled,
+										onClick: ($event) => runExtra(item)
+									}, {
+										default: withCtx(() => [item.icon ? (openBlock(), createBlock(resolveDynamicComponent(item.icon), { key: 0 })) : (openBlock(), createElementBlock("span", _hoisted_5, toDisplayString(item.label), 1))]),
+										_: 2
+									}, 1032, [
+										"aria-label",
+										"aria-keyshortcuts",
+										"disabled",
+										"onClick"
+									]))]),
+									_: 2
+								}, 1032, [
+									"content",
+									"shortcut",
+									"disabled"
+								]);
+							}), 128)) : tool === "undo" || tool === "redo" ? (openBlock(), createBlock(unref(DouTooltip), {
+								key: 3,
+								content: unref(m)[tool],
+								shortcut: tool === "undo" ? "mod+z" : "mod+shift+z",
+								placement: "bottom"
+							}, {
+								default: withCtx(() => [createVNode(unref(DouButton), {
+									variant: "ghost",
+									"aria-label": unref(m)[tool],
+									disabled: !can(tool),
+									onClick: ($event) => run(tool)
+								}, {
+									default: withCtx(() => [tool === "undo" ? (openBlock(), createBlock(unref(UndoIcon), { key: 0 })) : (openBlock(), createBlock(unref(RedoIcon), { key: 1 }))]),
+									_: 2
+								}, 1032, [
+									"aria-label",
+									"disabled",
+									"onClick"
+								])]),
+								_: 2
+							}, 1032, ["content", "shortcut"])) : tool === "format" ? (openBlock(), createBlock(unref(DouDropdown), {
+								key: 4,
+								open: menuOpen.value === tool,
+								placement: "bottom-start",
+								disabled: disabled.value,
+								"onUpdate:open": ($event) => onMenu(tool, $event)
+							}, {
+								menu: withCtx(() => [createVNode(unref(DouDropdownRadioGroup), { "model-value": formatShown.value ? formats.value.indexOf(formatShown.value) : -1 }, {
+									default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(formats.value, (option, i) => {
+										return openBlock(), createBlock(unref(DouDropdownItem), {
+											key: option.label,
+											value: i,
+											class: "dou-sheet-toolbar__format-item",
+											onClick: ($event) => setFormat(option)
+										}, {
+											suffix: withCtx(() => [createElementVNode("span", _hoisted_7, toDisplayString(exampleOf(option)), 1)]),
+											default: withCtx(() => [createTextVNode(toDisplayString(option.label) + " ", 1)]),
+											_: 2
+										}, 1032, ["value", "onClick"]);
+									}), 128))]),
+									_: 2
+								}, 1032, ["model-value"])]),
+								default: withCtx(() => [createVNode(unref(DouButton), {
+									variant: "ghost",
+									class: "dou-sheet-toolbar__format",
+									"aria-label": `${unref(m).numberFormat}：${formatLabel.value}`
+								}, {
+									trailing: withCtx(() => [createVNode(unref(ChevronDownIcon))]),
+									default: withCtx(() => [createElementVNode("span", _hoisted_6, toDisplayString(formatLabel.value), 1)]),
+									_: 1
+								}, 8, ["aria-label"])]),
+								_: 2
+							}, 1032, [
+								"open",
+								"disabled",
+								"onUpdate:open"
+							])) : tool === "decimals" ? (openBlock(), createElementBlock(Fragment, { key: 5 }, renderList([-1, 1], (by) => {
+								return createVNode(unref(DouTooltip), {
+									key: by,
+									content: by < 0 ? unref(m).fewerDecimals : unref(m).moreDecimals,
+									placement: "bottom"
+								}, {
+									default: withCtx(() => [createVNode(unref(DouButton), {
+										variant: "ghost",
+										"aria-label": by < 0 ? unref(m).fewerDecimals : unref(m).moreDecimals,
+										disabled: !can(by < 0 ? "decimals.fewer" : "decimals.more"),
+										onClick: ($event) => run(by < 0 ? "decimals.fewer" : "decimals.more")
+									}, {
+										default: withCtx(() => [by < 0 ? (openBlock(), createBlock(unref(DecimalDecreaseIcon), { key: 0 })) : (openBlock(), createBlock(unref(DecimalIncreaseIcon), { key: 1 }))]),
+										_: 2
+									}, 1032, [
+										"aria-label",
+										"disabled",
+										"onClick"
+									])]),
+									_: 2
+								}, 1032, ["content"]);
+							}), 64)) : isStyleTool(tool) ? (openBlock(), createBlock(unref(DouTooltip), {
+								key: 6,
+								content: unref(m)[tool],
+								shortcut: STYLE[tool].key,
+								placement: "bottom"
+							}, {
+								default: withCtx(() => [createVNode(unref(DouToggle), {
+									pressed: on(tool),
+									"aria-label": unref(m)[tool],
+									disabled: !can(tool),
+									"onUpdate:pressed": ($event) => run(tool, $event)
+								}, {
+									default: withCtx(() => [(openBlock(), createBlock(resolveDynamicComponent(STYLE[tool].icon)))]),
+									_: 2
+								}, 1032, [
+									"pressed",
+									"aria-label",
+									"disabled",
+									"onUpdate:pressed"
+								])]),
+								_: 2
+							}, 1032, ["content", "shortcut"])) : tool === "color" || tool === "fill" ? (openBlock(), createBlock(unref(DouTooltip), {
+								key: 7,
+								content: tool === "color" ? unref(m).textColor : unref(m).fillColor,
+								disabled: colorOpen.value === tool,
+								placement: "bottom"
+							}, {
+								default: withCtx(() => [createElementVNode("span", _hoisted_8, [createVNode(unref(DouPopover), {
+									open: colorOpen.value === tool,
+									placement: "bottom-start",
+									disabled: disabled.value,
+									"onUpdate:open": ($event) => colorOpen.value = $event ? tool : colorOpen.value === tool ? null : colorOpen.value
+								}, {
+									content: withCtx(() => [createElementVNode("div", {
+										class: "dou-sheet-toolbar__colors",
+										"aria-label": tool === "color" ? unref(m).textColor : unref(m).fillColor,
+										role: "group"
+									}, [
+										createElementVNode("button", {
+											type: "button",
+											class: normalizeClass(["dou-sheet-toolbar__swatch is-default", `is-${tool}`]),
+											"aria-pressed": !colorOf(tool).tone && !colorOf(tool).css,
+											"aria-label": unref(m).colorDefault,
+											title: unref(m).colorDefault,
+											onClick: ($event) => setColor(tool, {})
+										}, null, 10, _hoisted_10),
+										(openBlock(true), createElementBlock(Fragment, null, renderList(unref(TONES), (tone) => {
+											return openBlock(), createElementBlock("button", {
+												key: tone,
+												type: "button",
+												class: normalizeClass(["dou-sheet-toolbar__swatch", [`is-${tool}`, `is-tone-${tone}`]]),
+												"aria-pressed": colorOf(tool).tone === tone,
+												"aria-label": toneLabel(tone),
+												title: toneLabel(tone),
+												onClick: ($event) => setColor(tool, { tone })
+											}, [tool === "color" ? (openBlock(), createElementBlock("span", _hoisted_12, "A")) : createCommentVNode("", true)], 10, _hoisted_11);
+										}), 128)),
+										createElementVNode("button", {
+											type: "button",
+											class: normalizeClass(["dou-sheet-toolbar__swatch is-custom", `is-${tool}`]),
+											"aria-pressed": !!colorOf(tool).css,
+											"aria-expanded": custom.value === tool,
+											"aria-label": unref(m).colorCustom,
+											title: unref(m).colorCustom,
+											style: normalizeStyle({ "--dou-sheet-swatch": colorOf(tool).css }),
+											onClick: ($event) => openCustom(tool, $event)
+										}, [colorOf(tool).css && tool === "color" ? (openBlock(), createElementBlock("span", _hoisted_14, "A")) : !colorOf(tool).css ? (openBlock(), createBlock(unref(PaletteIcon), { key: 1 })) : createCommentVNode("", true)], 14, _hoisted_13)
+									], 8, _hoisted_9), custom.value === tool ? (openBlock(), createBlock(unref(DouColorPanel), {
+										key: 0,
+										modelValue: customColor.value,
+										"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => customColor.value = $event),
+										class: "dou-sheet-toolbar__panel",
+										bordered: false,
+										format: "hex",
+										"show-input": "",
+										onChange: ($event) => $event && setColor(tool, { css: $event }, false)
+									}, null, 8, ["modelValue", "onChange"])) : createCommentVNode("", true)]),
+									default: withCtx(() => [createVNode(unref(DouButton), {
+										variant: "ghost",
+										class: normalizeClass(["dou-sheet-toolbar__color", `is-${tool}`]),
+										style: normalizeStyle({ "--dou-sheet-swatch": swatchOf(tool) }),
+										"aria-label": tool === "color" ? unref(m).textColor : unref(m).fillColor,
+										"aria-expanded": colorOpen.value === tool
+									}, {
+										default: withCtx(() => [tool === "color" ? (openBlock(), createBlock(unref(BaselineIcon), { key: 0 })) : (openBlock(), createBlock(unref(PaintBucketIcon), { key: 1 }))]),
+										_: 2
+									}, 1032, [
+										"class",
+										"style",
+										"aria-label",
+										"aria-expanded"
+									])]),
+									_: 2
+								}, 1032, [
+									"open",
+									"disabled",
+									"onUpdate:open"
+								])])]),
+								_: 2
+							}, 1032, ["content", "disabled"])) : tool === "align" ? (openBlock(), createBlock(unref(DouToggleGroup), {
+								key: 8,
+								type: "single",
+								"model-value": align.value,
+								disabled: disabled.value,
+								"onUpdate:modelValue": setAlign
+							}, {
+								default: withCtx(() => [(openBlock(), createElementBlock(Fragment, null, renderList(ALIGN, (a) => {
+									return createVNode(unref(DouTooltip), {
+										key: a.value,
+										content: unref(m)[a.label],
+										placement: "bottom"
+									}, {
+										default: withCtx(() => [createVNode(unref(DouToggle), {
+											value: a.value,
+											"aria-label": unref(m)[a.label]
+										}, {
+											default: withCtx(() => [(openBlock(), createBlock(resolveDynamicComponent(a.icon)))]),
+											_: 2
+										}, 1032, ["value", "aria-label"])]),
+										_: 2
+									}, 1032, ["content"]);
+								}), 64))]),
+								_: 1
+							}, 8, ["model-value", "disabled"])) : tool === "valign" ? (openBlock(), createBlock(unref(DouTooltip), {
+								key: 9,
+								content: unref(m).verticalAlign,
+								disabled: menuOpen.value === tool,
+								placement: "bottom"
+							}, {
+								default: withCtx(() => [createElementVNode("span", _hoisted_15, [createVNode(unref(DouDropdown), {
+									open: menuOpen.value === tool,
+									placement: "bottom-start",
+									disabled: disabled.value,
+									"onUpdate:open": ($event) => onMenu(tool, $event)
+								}, {
+									menu: withCtx(() => [createVNode(unref(DouDropdownRadioGroup), { "model-value": valign.value }, {
+										default: withCtx(() => [(openBlock(), createElementBlock(Fragment, null, renderList(VALIGN, (v) => {
+											return createVNode(unref(DouDropdownItem), {
+												key: v.value,
+												value: v.value,
+												disabled: !can(`valign.${v.value}`),
+												onClick: ($event) => run(`valign.${v.value}`)
+											}, {
+												prefix: withCtx(() => [(openBlock(), createBlock(resolveDynamicComponent(v.icon)))]),
+												default: withCtx(() => [createTextVNode(" " + toDisplayString(unref(m)[v.label]), 1)]),
+												_: 2
+											}, 1032, [
+												"value",
+												"disabled",
+												"onClick"
+											]);
+										}), 64))]),
+										_: 1
+									}, 8, ["model-value"])]),
+									default: withCtx(() => [createVNode(unref(DouButton), {
+										variant: "ghost",
+										class: "dou-sheet-toolbar__menu",
+										"aria-label": unref(m).verticalAlign
+									}, {
+										trailing: withCtx(() => [createVNode(unref(ChevronDownIcon))]),
+										default: withCtx(() => [(openBlock(), createBlock(resolveDynamicComponent(valignIcon.value)))]),
+										_: 1
+									}, 8, ["aria-label"])]),
+									_: 1
+								}, 8, [
+									"open",
+									"disabled",
+									"onUpdate:open"
+								])])]),
+								_: 2
+							}, 1032, ["content", "disabled"])) : tool === "wrap" ? (openBlock(), createBlock(unref(DouTooltip), {
+								key: 10,
+								content: unref(m).wrap,
+								placement: "bottom"
+							}, {
+								default: withCtx(() => [createVNode(unref(DouToggle), {
+									pressed: on("wrap"),
+									"aria-label": unref(m).wrap,
+									disabled: !can("wrap"),
+									"onUpdate:pressed": _cache[1] || (_cache[1] = ($event) => run("wrap", $event))
+								}, {
+									default: withCtx(() => [createVNode(unref(WrapTextIcon))]),
+									_: 1
+								}, 8, [
+									"pressed",
+									"aria-label",
+									"disabled"
+								])]),
+								_: 1
+							}, 8, ["content"])) : tool === "merge" ? (openBlock(), createBlock(unref(DouTooltip), {
+								key: 11,
+								content: unref(sheet).commands.get("merge")?.label,
+								placement: "bottom"
+							}, {
+								default: withCtx(() => [createVNode(unref(DouToggle), {
+									pressed: on("merge"),
+									"aria-label": unref(m).mergeCells,
+									disabled: !can("merge"),
+									"onUpdate:pressed": _cache[2] || (_cache[2] = ($event) => run("merge"))
+								}, {
+									default: withCtx(() => [createVNode(unref(CellsMergeIcon))]),
+									_: 1
+								}, 8, [
+									"pressed",
+									"aria-label",
+									"disabled"
+								])]),
+								_: 1
+							}, 8, ["content"])) : tool === "link" ? (openBlock(), createBlock(unref(DouTooltip), {
+								key: 12,
+								content: unref(m).link.add,
+								shortcut: "mod+k",
+								placement: "bottom"
+							}, {
+								default: withCtx(() => [createVNode(unref(DouButton), {
+									variant: "ghost",
+									"aria-label": unref(m).link.add,
+									disabled: !can("link"),
+									onClick: _cache[3] || (_cache[3] = ($event) => run("link"))
+								}, {
+									default: withCtx(() => [createVNode(unref(LinkIcon))]),
+									_: 1
+								}, 8, ["aria-label", "disabled"])]),
+								_: 1
+							}, 8, ["content"])) : tool === "protect" ? (openBlock(), createBlock(unref(DouTooltip), {
+								key: 13,
+								content: unref(m).protect.menu,
+								disabled: menuOpen.value === tool,
+								placement: "bottom"
+							}, {
+								default: withCtx(() => [createElementVNode("span", _hoisted_16, [createVNode(unref(DouDropdown), {
+									open: menuOpen.value === tool,
+									placement: "bottom-start",
+									disabled: disabled.value,
+									"onUpdate:open": ($event) => onMenu(tool, $event)
+								}, {
+									menu: withCtx(() => [(openBlock(), createElementBlock(Fragment, null, renderList(PROTECT_COMMANDS, (name) => {
+										return createVNode(unref(DouDropdownItem), {
+											key: name,
+											disabled: !can(name),
+											divided: name === "protect.sheet",
+											onClick: ($event) => run(name)
+										}, {
+											prefix: withCtx(() => [(openBlock(), createBlock(resolveDynamicComponent(unref(sheet).commands.get(name)?.icon)))]),
+											default: withCtx(() => [createTextVNode(" " + toDisplayString(unref(sheet).commands.get(name)?.label), 1)]),
+											_: 2
+										}, 1032, [
+											"disabled",
+											"divided",
+											"onClick"
+										]);
+									}), 64))]),
+									default: withCtx(() => [createVNode(unref(DouButton), {
+										variant: "ghost",
+										class: normalizeClass(["dou-sheet-toolbar__menu", { "is-on": on("protect.sheet") }]),
+										"aria-label": unref(m).protect.menu
+									}, {
+										trailing: withCtx(() => [createVNode(unref(ChevronDownIcon))]),
+										default: withCtx(() => [createVNode(unref(ShieldLockIcon))]),
+										_: 1
+									}, 8, ["class", "aria-label"])]),
+									_: 1
+								}, 8, [
+									"open",
+									"disabled",
+									"onUpdate:open"
+								])])]),
+								_: 2
+							}, 1032, ["content", "disabled"])) : tool === "freeze" ? (openBlock(), createBlock(unref(DouTooltip), {
+								key: 14,
+								content: unref(m).freeze,
+								disabled: menuOpen.value === tool,
+								placement: "bottom"
+							}, {
+								default: withCtx(() => [createElementVNode("span", _hoisted_17, [createVNode(unref(DouDropdown), {
+									open: menuOpen.value === tool,
+									placement: "bottom-start",
+									disabled: disabled.value,
+									"onUpdate:open": ($event) => onMenu(tool, $event)
+								}, {
+									menu: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(freezeItems.value, (item) => {
+										return openBlock(), createBlock(unref(DouDropdownItem), {
+											key: item.key,
+											checked: (freeze.value.rows ?? 0) === item.rows && (freeze.value.cols ?? 0) === item.cols,
+											onClick: ($event) => setFreeze(item.rows, item.cols)
+										}, {
+											default: withCtx(() => [createTextVNode(toDisplayString(item.label), 1)]),
+											_: 2
+										}, 1032, ["checked", "onClick"]);
+									}), 128)), createVNode(unref(DouDropdownItem), {
+										divided: "",
+										disabled: !frozen.value,
+										onClick: _cache[4] || (_cache[4] = ($event) => setFreeze(0, 0))
+									}, {
+										default: withCtx(() => [createTextVNode(toDisplayString(unref(m).unfreeze), 1)]),
+										_: 1
+									}, 8, ["disabled"])]),
+									default: withCtx(() => [createVNode(unref(DouButton), {
+										variant: "ghost",
+										class: normalizeClass(["dou-sheet-toolbar__menu", { "is-on": frozen.value }]),
+										"aria-label": unref(m).freeze
+									}, {
+										trailing: withCtx(() => [createVNode(unref(ChevronDownIcon))]),
+										default: withCtx(() => [createVNode(unref(TableFreezeIcon))]),
+										_: 1
+									}, 8, ["class", "aria-label"])]),
+									_: 1
+								}, 8, [
+									"open",
+									"disabled",
+									"onUpdate:open"
+								])])]),
+								_: 2
+							}, 1032, ["content", "disabled"])) : tool === "sort" ? (openBlock(), createBlock(unref(DouTooltip), {
+								key: 15,
+								content: unref(m).filter.sort,
+								disabled: menuOpen.value === tool,
+								placement: "bottom"
+							}, {
+								default: withCtx(() => [createElementVNode("span", _hoisted_18, [createVNode(unref(DouDropdown), {
+									open: menuOpen.value === tool,
+									placement: "bottom-start",
+									disabled: disabled.value,
+									"onUpdate:open": ($event) => onMenu(tool, $event)
+								}, {
+									menu: withCtx(() => [createVNode(unref(DouDropdownItem), {
+										disabled: !can("sort.asc"),
+										onClick: _cache[5] || (_cache[5] = ($event) => run("sort.asc"))
+									}, {
+										prefix: withCtx(() => [createVNode(unref(SortAscendingIcon))]),
+										default: withCtx(() => [createTextVNode(" " + toDisplayString(unref(m).filter.sortAsc), 1)]),
+										_: 1
+									}, 8, ["disabled"]), createVNode(unref(DouDropdownItem), {
+										disabled: !can("sort.desc"),
+										onClick: _cache[6] || (_cache[6] = ($event) => run("sort.desc"))
+									}, {
+										prefix: withCtx(() => [createVNode(unref(SortDescendingIcon))]),
+										default: withCtx(() => [createTextVNode(" " + toDisplayString(unref(m).filter.sortDesc), 1)]),
+										_: 1
+									}, 8, ["disabled"])]),
+									default: withCtx(() => [createVNode(unref(DouButton), {
+										variant: "ghost",
+										class: "dou-sheet-toolbar__menu",
+										"aria-label": unref(m).filter.sort
+									}, {
+										trailing: withCtx(() => [createVNode(unref(ChevronDownIcon))]),
+										default: withCtx(() => [createVNode(unref(SortIcon))]),
+										_: 1
+									}, 8, ["aria-label"])]),
+									_: 1
+								}, 8, [
+									"open",
+									"disabled",
+									"onUpdate:open"
+								])])]),
+								_: 2
+							}, 1032, ["content", "disabled"])) : tool === "filter" ? (openBlock(), createBlock(unref(DouTooltip), {
+								key: 16,
+								content: unref(sheet).commands.get("filter")?.label,
+								placement: "bottom"
+							}, {
+								default: withCtx(() => [createVNode(unref(DouToggle), {
+									pressed: on("filter"),
+									"aria-label": unref(m).filter.turnOn,
+									disabled: !can("filter"),
+									"onUpdate:pressed": _cache[7] || (_cache[7] = ($event) => run("filter"))
+								}, {
+									default: withCtx(() => [createVNode(unref(FilterIcon))]),
+									_: 1
+								}, 8, [
+									"pressed",
+									"aria-label",
+									"disabled"
+								])]),
+								_: 1
+							}, 8, ["content"])) : tool === "conditional" ? (openBlock(), createBlock(unref(DouTooltip), {
+								key: 17,
+								content: unref(m).formats.title,
+								disabled: menuOpen.value === tool,
+								placement: "bottom"
+							}, {
+								default: withCtx(() => [createElementVNode("span", _hoisted_19, [createVNode(unref(DouDropdown), {
+									open: menuOpen.value === tool,
+									placement: "bottom-start",
+									disabled: disabled.value,
+									"onUpdate:open": ($event) => onMenu(tool, $event)
+								}, {
+									menu: withCtx(() => [
+										createVNode(unref(DouDropdownSub), { title: unref(m).formats.highlight }, {
+											default: withCtx(() => [(openBlock(), createElementBlock(Fragment, null, renderList(HIGHLIGHTS, (kind) => {
+												return createVNode(unref(DouDropdownItem), {
+													key: kind,
+													onClick: ($event) => openFormat(kind)
+												}, {
+													default: withCtx(() => [createTextVNode(toDisplayString(unref(m).formats[kind]), 1)]),
+													_: 2
+												}, 1032, ["onClick"]);
+											}), 64))]),
+											_: 1
+										}, 8, ["title"]),
+										createVNode(unref(DouDropdownSub), { title: unref(m).formats.ranks }, {
+											default: withCtx(() => [(openBlock(), createElementBlock(Fragment, null, renderList(RANKS, (kind) => {
+												return createVNode(unref(DouDropdownItem), {
+													key: kind,
+													onClick: ($event) => openFormat(kind)
+												}, {
+													default: withCtx(() => [createTextVNode(toDisplayString(unref(m).formats[kind]), 1)]),
+													_: 2
+												}, 1032, ["onClick"]);
+											}), 64))]),
+											_: 1
+										}, 8, ["title"]),
+										createVNode(unref(DouDropdownSub), { title: unref(m).formats.bar }, {
+											default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(TONES), (tone) => {
+												return openBlock(), createBlock(unref(DouDropdownItem), {
+													key: tone,
+													onClick: ($event) => addBar(tone)
+												}, {
+													prefix: withCtx(() => [createElementVNode("span", {
+														class: "dou-sheet-toolbar__gradient",
+														style: normalizeStyle({ backgroundImage: unref(barSwatch)(tone) })
+													}, null, 4)]),
+													default: withCtx(() => [createTextVNode(" " + toDisplayString(toneLabel(tone)), 1)]),
+													_: 2
+												}, 1032, ["onClick"]);
+											}), 128))]),
+											_: 1
+										}, 8, ["title"]),
+										createVNode(unref(DouDropdownSub), { title: unref(m).formats.scale }, {
+											default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(SCALES), (colors, key) => {
+												return openBlock(), createBlock(unref(DouDropdownItem), {
+													key,
+													onClick: ($event) => addScale(colors)
+												}, {
+													prefix: withCtx(() => [createElementVNode("span", {
+														class: "dou-sheet-toolbar__gradient",
+														style: normalizeStyle({ backgroundImage: unref(scaleSwatch)(colors) })
+													}, null, 4)]),
+													default: withCtx(() => [createTextVNode(" " + toDisplayString(unref(m).formats.scales[key]), 1)]),
+													_: 2
+												}, 1032, ["onClick"]);
+											}), 128))]),
+											_: 1
+										}, 8, ["title"]),
+										createVNode(unref(DouDropdownItem), {
+											divided: "",
+											onClick: _cache[8] || (_cache[8] = ($event) => clearFormats(false))
+										}, {
+											default: withCtx(() => [createTextVNode(toDisplayString(unref(m).formats.clearSelection), 1)]),
+											_: 1
+										}),
+										createVNode(unref(DouDropdownItem), {
+											disabled: !conditionals.value.length,
+											onClick: _cache[9] || (_cache[9] = ($event) => clearFormats(true))
+										}, {
+											default: withCtx(() => [createTextVNode(toDisplayString(unref(m).formats.clearSheet), 1)]),
+											_: 1
+										}, 8, ["disabled"]),
+										createVNode(unref(DouDropdownItem), {
+											divided: "",
+											onClick: _cache[10] || (_cache[10] = ($event) => listOpen.value = true)
+										}, {
+											default: withCtx(() => [createTextVNode(toDisplayString(unref(m).formats.manage), 1)]),
+											_: 1
+										})
+									]),
+									default: withCtx(() => [createVNode(unref(DouButton), {
+										variant: "ghost",
+										class: "dou-sheet-toolbar__menu",
+										"aria-label": unref(m).formats.title
+									}, {
+										trailing: withCtx(() => [createVNode(unref(ChevronDownIcon))]),
+										default: withCtx(() => [createVNode(unref(TableHighlightIcon))]),
+										_: 1
+									}, 8, ["aria-label"])]),
+									_: 1
+								}, 8, [
+									"open",
+									"disabled",
+									"onUpdate:open"
+								])])]),
+								_: 2
+							}, 1032, ["content", "disabled"])) : tool === "export" ? (openBlock(), createBlock(unref(DouTooltip), {
+								key: 18,
+								content: unref(m).file.export,
+								disabled: menuOpen.value === tool,
+								placement: "bottom"
+							}, {
+								default: withCtx(() => [createElementVNode("span", _hoisted_20, [createVNode(unref(DouDropdown), {
+									open: menuOpen.value === tool,
+									placement: "bottom-start",
+									"onUpdate:open": ($event) => onMenu(tool, $event)
+								}, {
+									menu: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(exportItems.value, (item) => {
+										return openBlock(), createElementBlock(Fragment, { key: item.name }, [item.scopes.length ? (openBlock(), createBlock(unref(DouDropdownSub), {
+											key: 0,
+											title: item.label
+										}, createSlots({
+											default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(item.scopes, (scope) => {
+												return openBlock(), createBlock(unref(DouDropdownItem), {
+													key: scope,
+													onClick: ($event) => exportWith(item.name, scope)
+												}, {
+													default: withCtx(() => [createTextVNode(toDisplayString(unref(m).file[scope]), 1)]),
+													_: 2
+												}, 1032, ["onClick"]);
+											}), 128))]),
+											_: 2
+										}, [item.icon ? {
+											name: "prefix",
+											fn: withCtx(() => [(openBlock(), createBlock(resolveDynamicComponent(item.icon)))]),
+											key: "0"
+										} : void 0]), 1032, ["title"])) : (openBlock(), createBlock(unref(DouDropdownItem), {
+											key: 1,
+											onClick: ($event) => exportWith(item.name, item.scope)
+										}, createSlots({
+											default: withCtx(() => [createTextVNode(" " + toDisplayString(item.label), 1)]),
+											_: 2
+										}, [item.icon ? {
+											name: "prefix",
+											fn: withCtx(() => [(openBlock(), createBlock(resolveDynamicComponent(item.icon)))]),
+											key: "0"
+										} : void 0]), 1032, ["onClick"]))], 64);
+									}), 128))]),
+									default: withCtx(() => [createVNode(unref(DouButton), {
+										variant: "ghost",
+										class: "dou-sheet-toolbar__menu",
+										"aria-label": unref(m).file.export
+									}, {
+										trailing: withCtx(() => [createVNode(unref(ChevronDownIcon))]),
+										default: withCtx(() => [createVNode(unref(DownloadIcon))]),
+										_: 1
+									}, 8, ["aria-label"])]),
+									_: 1
+								}, 8, ["open", "onUpdate:open"])])]),
+								_: 2
+							}, 1032, ["content", "disabled"])) : tool === "import" ? (openBlock(), createBlock(unref(DouTooltip), {
+								key: 19,
+								content: unref(m).file.import,
+								placement: "bottom"
+							}, {
+								default: withCtx(() => [createVNode(unref(DouButton), {
+									variant: "ghost",
+									"aria-label": unref(m).file.import,
+									"aria-haspopup": "dialog",
+									disabled: disabled.value,
+									onClick: pickFile
+								}, {
+									default: withCtx(() => [createVNode(unref(UploadIcon))]),
+									_: 1
+								}, 8, ["aria-label", "disabled"])]),
+								_: 1
+							}, 8, ["content"])) : tool === "validation" ? (openBlock(), createBlock(unref(DouTooltip), {
+								key: 20,
+								content: unref(m).validation.title,
+								placement: "bottom"
+							}, {
+								default: withCtx(() => [createVNode(unref(DouButton), {
+									variant: "ghost",
+									"aria-label": unref(m).validation.title,
+									"aria-haspopup": "dialog",
+									disabled: disabled.value,
+									onClick: openValidation
+								}, {
+									default: withCtx(() => [createVNode(unref(TableCheckIcon))]),
+									_: 1
+								}, 8, ["aria-label", "disabled"])]),
+								_: 1
+							}, 8, ["content"])) : tool === "clear" ? (openBlock(), createBlock(unref(DouTooltip), {
+								key: 21,
+								content: unref(m).clearFormatting,
+								shortcut: "mod+\\",
+								placement: "bottom"
+							}, {
+								default: withCtx(() => [createVNode(unref(DouButton), {
+									variant: "ghost",
+									"aria-label": unref(m).clearFormatting,
+									disabled: !can("clear"),
+									onClick: _cache[11] || (_cache[11] = ($event) => run("clear"))
+								}, {
+									default: withCtx(() => [createVNode(unref(TypeXIcon))]),
+									_: 1
+								}, 8, ["aria-label", "disabled"])]),
+								_: 1
+							}, 8, ["content"])) : createCommentVNode("", true)], 64);
+						}), 128)),
+						renderSlot(_ctx.$slots, "end")
+					]),
+					_: 3
+				}, 8, ["class", "aria-label"]),
+				createElementVNode("input", {
+					ref_key: "picker",
+					ref: picker,
+					type: "file",
+					class: "dou-sheet-toolbar__picker",
+					accept: unref(sheet).importAccept.value,
+					tabindex: "-1",
+					"aria-hidden": "true",
+					onChange: onPicked,
+					onCancel: onPickCancel
+				}, null, 40, _hoisted_21),
+				createVNode(format_dialog_default, {
+					open: dialogOpen.value,
+					"onUpdate:open": _cache[12] || (_cache[12] = ($event) => dialogOpen.value = $event),
+					format: dialogFormat.value,
+					title: dialogTitle.value,
+					styles: unref(sheet).doc.value.styles,
+					messages: unref(m),
+					onApply: applyFormat,
+					onClosed: dialogClosed
+				}, null, 8, [
+					"open",
+					"format",
+					"title",
+					"styles",
+					"messages"
+				]),
+				createVNode(validation_dialog_default, {
+					open: ruleOpen.value,
+					"onUpdate:open": _cache[13] || (_cache[13] = ($event) => ruleOpen.value = $event),
+					rule: rule.value,
+					editing: ruleIndex.value >= 0,
+					messages: unref(m),
+					onApply: applyValidation,
+					onRemove: removeValidation,
+					onClosed: _cache[14] || (_cache[14] = ($event) => unref(sheet).focus())
+				}, null, 8, [
+					"open",
+					"rule",
+					"editing",
+					"messages"
+				]),
+				createVNode(format_list_default, {
+					open: listOpen.value,
+					"onUpdate:open": _cache[15] || (_cache[15] = ($event) => listOpen.value = $event),
+					formats: conditionals.value,
+					styles: unref(sheet).doc.value.styles,
+					messages: unref(m),
+					onChange: setFormats,
+					onEdit: editFormat,
+					onClosed: _cache[16] || (_cache[16] = ($event) => unref(sheet).focus())
+				}, null, 8, [
+					"open",
+					"formats",
+					"styles",
+					"messages"
+				])
+			]);
+		};
+	}
+});
+export { sheet_toolbar_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=sheet-toolbar.vue_vue_type_script_setup_true_lang.js.map