@dineug/erd-editor 4.2.0 → 5.0.1

package/dist/components/dictionary/Dictionary.js

@@ -0,0 +1,584 @@
+import { isComposing, simpleShortcutToString } from "../../utils/keyboard-shortcut/index.js";
+import { RowCommand, handleDictionaryKeydown, keepClipboard, rowChordOf } from "./dictionaryKeys.js";
+import { onMounted, onUpdated } from "../../r-html/dist/render/part/node/component/hooks.js";
+import { observable, watch } from "../../r-html/dist/observable/index.js";
+import { nextTick } from "../../r-html/dist/observable/scheduler.js";
+import { html } from "../../r-html/dist/render/index.js";
+import { createRef, ref } from "../../r-html/dist/render/directives/attribute/ref.js";
+import { repeat } from "../../r-html/dist/render/directives/node/repeat.js";
+import { DictionaryFields } from "../../engine/modules/dictionary/actions.js";
+import { attachDictionarySheetTag$ } from "../../engine/tag.js";
+import { DictionarySortDirection, insertDictionaryEntriesAction$, sortDictionaryAction$ } from "../../engine/modules/dictionary/generator.actions.js";
+import { useAppContext } from "../appContext.js";
+import { Grid } from "../../grid/dist/Grid.js";
+import { DictionaryCheckLevel, listDictionaryChecks, markOf, walkDictionaryChecks } from "../../engine/modules/dictionary/checks.js";
+import { createCheckCount } from "./checkCount.js";
+import { DictionarySheet, DictionarySheetLabelKey, DictionarySheetList, bumpedSheets, isEntrySheet, sheetCellMark, sheetCellText, sheetColumns, sheetRowIds } from "./sheets.js";
+import { checkCellText, checkDestination, checkRows, checkSheetColumns } from "./checkSheet.js";
+import { useI18n } from "../localeContext.js";
+import Icon from "../primitives/icon/Icon.js";
+import { activeTermDomain, commitDictionaryCells, commitTermDomain, createSheetRows, removeSelectedRows, reportGridRefusal } from "./dictionaryCommit.js";
+import { useThemeContext } from "../themeContext.js";
+import { forceFocusEvent } from "../../utils/internalEvents.js";
+import { useUnmounted } from "../../hooks/useUnmounted.js";
+import { goToErdTarget } from "../erd/goToErdTarget.js";
+import { DICTIONARY_FILE_ACCEPT, exportDictionarySheet, importDictionaryFile } from "./dictionaryFile.js";
+import { useContextMenuRootProvider } from "../primitives/context-menu/context-menu-root/contextMenuRootContext.js";
+import DictionaryContextMenu from "./dictionary-context-menu/DictionaryContextMenu.js";
+import { changeSearch, clampSelection, dictionaryViewOf, rememberScroll, rememberSelection, rememberWidth, restoreScroll, storedSelection } from "./dictionaryView.js";
+import { openDomainCellEditor } from "./domain-cell-editor/openDomainCellEditor.js";
+import { toCellMarks, toGridTheme } from "./gridTheme.js";
+import TextInput from "../primitives/text-input/TextInput.js";
+import { formatCount } from "../../utils/formatCount.js";
+import { bar, clear, count, countError, countWarning, divider, empty, root, search, searchField, searchIcon, segment, segments, sheet, status, tool, toolDanger, tools } from "./Dictionary.styles.js";
+//#region src/components/dictionary/Dictionary.tsx
+var SETTLING_EVENTS = [
+	"keydown",
+	"dblclick",
+	"compositionstart",
+	"beforeinput"
+];
+var NO_HANDLE = Object.freeze({
+	scrollTo() {},
+	select() {},
+	focus() {},
+	isEditing: () => false
+});
+var cellSelection = (row, col) => ({
+	active: {
+		row,
+		col
+	},
+	ranges: [{
+		startRow: row,
+		startCol: col,
+		endRow: row,
+		endCol: col
+	}]
+});
+var rowsSelection = (first, last) => ({
+	active: {
+		row: first,
+		col: 0
+	},
+	ranges: [{
+		startRow: first,
+		startCol: 0,
+		endRow: last,
+		endCol: 0
+	}]
+});
+function selectedRowCount(selection, rowCount) {
+	const spans = selection.ranges.map(({ startRow, endRow }) => [Math.max(Math.min(startRow, endRow), 0), Math.min(Math.max(startRow, endRow), rowCount - 1)]).filter(([start, end]) => start <= end).sort(([a], [b]) => a - b);
+	let count = 0;
+	let reached = -1;
+	for (const [start, end] of spans) {
+		if (end <= reached) continue;
+		count += end - Math.max(start, reached + 1) + 1;
+		reached = end;
+	}
+	return count;
+}
+var topRow = ({ active, ranges }) => ranges.reduce((top, { startRow, endRow }) => Math.min(top, startRow, endRow), active.row);
+var bottomRow = ({ active, ranges }) => ranges.reduce((bottom, { startRow, endRow }) => Math.max(bottom, startRow, endRow), active.row);
+function insertedStart(ids, count, anchor) {
+	const at = anchor ? ids.indexOf(anchor.id) : -1;
+	if (!anchor || at === -1) return ids.length - count;
+	return anchor.place === "after" ? at + 1 : at - count;
+}
+function withDomainPicker(sheet, columns, openPicker) {
+	if (sheet !== DictionarySheet.term) return columns;
+	return columns.map((column) => column.id === "domainId" ? {
+		...column,
+		editor: (editor) => openPicker(editor, column.label)
+	} : column);
+}
+var Dictionary = (props, ctx) => {
+	const app = useAppContext(ctx);
+	const i18n = useI18n(ctx);
+	const theme = useThemeContext(ctx);
+	const { addUnsubscribe } = useUnmounted();
+	const sheetRef = createRef();
+	const fileRef = createRef();
+	const searchRef = createRef();
+	const contextMenu = useContextMenuRootProvider(ctx);
+	const view = dictionaryViewOf(app.value);
+	const state = observable({
+		sheet: view.sheet,
+		version: 0,
+		rowCount: 0,
+		selectedRows: 0,
+		empty: false,
+		counts: {
+			word: 0,
+			term: 0,
+			domain: 0,
+			check: 0
+		},
+		checkMark: null
+	});
+	let session = openSession(view.sheet);
+	countEntries();
+	let pending = null;
+	let revealRows = null;
+	let menuColumn = null;
+	let checksFrame = null;
+	const checkCount = createCheckCount({
+		walk: () => walkDictionaryChecks(app.value.store.state),
+		wanted: () => isEntrySheet(session.sheet),
+		done: countChecks
+	});
+	let gridTheme;
+	let columns = [];
+	let columnsKey = [];
+	let cellMarks;
+	let getCellStyle = () => void 0;
+	function columnsOf(sheet, i18nValue) {
+		const { widths } = view.sheets[sheet];
+		const key = [
+			sheet,
+			props.readonly,
+			widths,
+			i18nValue.t
+		];
+		if (key.every((part, index) => part === columnsKey[index])) return columns;
+		columnsKey = key;
+		columns = isEntrySheet(sheet) ? withDomainPicker(sheet, sheetColumns(sheet, {
+			readonly: props.readonly,
+			widths
+		}, i18nValue), openDomainPicker) : checkSheetColumns(widths, i18nValue);
+		return columns;
+	}
+	function openDomainPicker(editor, label) {
+		const { rows } = session;
+		openDomainCellEditor(editor, {
+			label,
+			linkedId: activeTermDomain(app.value.store.state, rows),
+			onPick: (option) => commitTermDomain(app.value, rows, option, i18n.value),
+			onClose: () => {
+				const held = heldInside(state.rowCount);
+				if (held) refresh(held);
+			}
+		});
+	}
+	function cellStyleOf(themeValue) {
+		const marks = toCellMarks(themeValue, cellMarks);
+		if (marks === cellMarks) return getCellStyle;
+		cellMarks = marks;
+		getCellStyle = (row, col) => {
+			const { sheet, rows } = session;
+			const column = columns[col];
+			const id = rows.ids[row];
+			if (!isEntrySheet(sheet) || !column || id === void 0) return;
+			const level = sheetCellMark(app.value.store.state, sheet, id, column.id);
+			return level ? marks[level] : void 0;
+		};
+		return getCellStyle;
+	}
+	function countSelected() {
+		state.selectedRows = selectedRowCount(session.selection, state.rowCount);
+	}
+	function heldInside(rowCount) {
+		const { selection, handle } = session;
+		if (!(bottomRow(selection) >= Math.max(rowCount, 1)) || handle.isEditing()) return;
+		return clampSelection(selection, rowCount, columns.length);
+	}
+	function refresh(select) {
+		const { store } = app.value;
+		const { sheet, handle, rows } = session;
+		const { search } = view.sheets[sheet];
+		const entry = isEntrySheet(sheet);
+		const ids = entry ? sheetRowIds(store.state, sheet, search) : [];
+		if (!entry) session.checks = listChecks(search);
+		const rowCount = entry ? ids.length : session.checks.length;
+		const selection = select ?? heldInside(rowCount);
+		if (selection) {
+			handle.select(selection);
+			session.selection = selection;
+			rows.activate(selection.active.row);
+			rememberSelection(view, sheet, selection);
+		}
+		if (entry) {
+			state.version = rows.bump(ids, handle.isEditing());
+			state.empty = sheetRowIds(store.state, sheet).length === 0;
+		} else {
+			state.version += 1;
+			state.empty = false;
+		}
+		state.rowCount = rowCount;
+		countSelected();
+	}
+	function countEntries() {
+		const { state: rootState } = app.value.store;
+		state.counts = {
+			...state.counts,
+			word: sheetRowIds(rootState, DictionarySheet.word).length,
+			term: sheetRowIds(rootState, DictionarySheet.term).length,
+			domain: sheetRowIds(rootState, DictionarySheet.domain).length
+		};
+	}
+	function countChecks(count, mark) {
+		state.counts = {
+			...state.counts,
+			check: count
+		};
+		state.checkMark = mark;
+	}
+	function listChecks(search) {
+		const { state: rootState } = app.value.store;
+		const checks = listDictionaryChecks(rootState);
+		countChecks(checks.length, markOf(checks));
+		return checkRows(rootState, search, i18n.value, checks);
+	}
+	function refreshChecks() {
+		if (checksFrame !== null) return;
+		checksFrame = requestAnimationFrame(() => {
+			checksFrame = null;
+			if (!isEntrySheet(session.sheet)) refresh();
+			else checkCount.restart();
+		});
+	}
+	function openSession(sheet) {
+		const { store } = app.value;
+		const { search } = view.sheets[sheet];
+		const ids = isEntrySheet(sheet) ? sheetRowIds(store.state, sheet, search) : [];
+		const checks = isEntrySheet(sheet) ? [] : listChecks(search);
+		state.sheet = sheet;
+		state.version = 0;
+		state.rowCount = isEntrySheet(sheet) ? ids.length : checks.length;
+		state.empty = isEntrySheet(sheet) && sheetRowIds(store.state, sheet).length === 0;
+		state.selectedRows = 0;
+		return {
+			sheet,
+			rows: createSheetRows(ids),
+			checks,
+			handle: NO_HANDLE,
+			selection: storedSelection(view, sheet, 0, 0)
+		};
+	}
+	const closeMenu = () => {
+		contextMenu.state.show = false;
+	};
+	const handleMousedown = (event) => {
+		if (event.target?.closest(".context-menu-content")) event.preventDefault();
+		contextMenu.onMousedown(event);
+	};
+	const switchSheet = (sheet) => {
+		if (sheet === session.sheet) return;
+		closeMenu();
+		view.sheet = sheet;
+		session = openSession(sheet);
+	};
+	const getCell = (row, col) => {
+		const column = columns[col];
+		if (!column) return "";
+		const { state: rootState } = app.value.store;
+		const { sheet } = session;
+		if (isEntrySheet(sheet)) {
+			const id = session.rows.ids[row];
+			return id === void 0 ? "" : sheetCellText(rootState, sheet, id, column.id);
+		}
+		const check = session.checks[row];
+		return check ? checkCellText(rootState, check, column.id, i18n.value) : "";
+	};
+	const handleReady = (handle) => {
+		const { sheet } = session;
+		const selection = storedSelection(view, sheet, state.rowCount, columns.length);
+		session.handle = handle;
+		session.selection = selection;
+		handle.select(selection);
+		session.rows.activate(selection.active.row);
+		restoreScroll(handle, view, sheet, state.rowCount, columns.length);
+		handle.focus();
+		countSelected();
+	};
+	const handleSelectionChange = (selection) => {
+		closeMenu();
+		session.selection = selection;
+		session.rows.activate(selection.active.row);
+		rememberSelection(view, session.sheet, selection);
+		countSelected();
+	};
+	const handleViewportChange = (viewport) => {
+		rememberScroll(view, session.sheet, viewport);
+	};
+	const handleColumnResize = (col, width) => {
+		rememberWidth(view, session.sheet, columns[col].id, width);
+	};
+	let pasteLanded = false;
+	const handleCommit = (event) => {
+		const { sheet, rows } = session;
+		if (!isEntrySheet(sheet)) return;
+		if (commitDictionaryCells(app.value, sheet, rows, event, i18n.value) && event.source === "paste") {
+			pasteLanded = true;
+			queueMicrotask(() => {
+				pasteLanded = false;
+			});
+		}
+	};
+	const handleReject = (event) => {
+		if (event.reason === "paste-beyond-columns" && !pasteLanded) return;
+		reportGridRefusal(app.value, event);
+	};
+	const search$1 = (text) => {
+		const { sheet } = session;
+		changeSearch(view, sheet, text);
+		refresh(storedSelection(view, sheet, state.rowCount, columns.length));
+		session.handle.scrollTo(0, 0);
+	};
+	const handleSearch = (event) => {
+		search$1(event.target.value);
+	};
+	const countClass = (item) => {
+		if (item !== DictionarySheet.check || state.counts.check === 0) return count;
+		return state.checkMark === DictionaryCheckLevel.error ? countError : countWarning;
+	};
+	const withChord = (name, shortcut) => shortcut ? `${name} (${simpleShortcutToString(shortcut)})` : name;
+	const clearSearch = () => {
+		search$1("");
+		searchRef.value?.querySelector("input")?.focus();
+	};
+	const handleSearchKeydown = (event) => {
+		if (event.key !== "Escape" || isComposing(event)) return;
+		if (!view.sheets[session.sheet].search) return;
+		event.preventDefault();
+		event.stopPropagation();
+		clearSearch();
+	};
+	const insertRows = (count, anchor) => {
+		const { sheet } = session;
+		if (!isEntrySheet(sheet)) return;
+		if (view.sheets[sheet].search) {
+			changeSearch(view, sheet, "");
+			refresh(storedSelection(view, sheet, state.rowCount, columns.length));
+		}
+		pending = {
+			kind: "add",
+			count,
+			anchor
+		};
+		app.value.store.dispatch(attachDictionarySheetTag$(insertDictionaryEntriesAction$(sheet, count, anchor)));
+		session.handle.focus();
+	};
+	const handleAddRow = () => insertRows(1, null);
+	const handleDeleteRows = () => {
+		const { sheet, rows, selection } = session;
+		if (!isEntrySheet(sheet)) return;
+		if (removeSelectedRows(app.value.store, sheet, rows, selection)) pending = { kind: "remove" };
+		session.handle.focus();
+	};
+	const handleCellContextMenu = ({ col, clientX, clientY }) => {
+		menuColumn = col === null ? null : columns[col] ?? null;
+		const menu = contextMenu.state;
+		menu.x = clientX;
+		menu.y = clientY;
+		menu.show = false;
+		nextTick(() => {
+			menu.show = true;
+		});
+	};
+	const menuRowCount = () => Math.max(state.selectedRows, 1);
+	const selectedEnds = () => {
+		const { selection, rows } = session;
+		return {
+			top: rows.ids[topRow(selection)],
+			bottom: rows.ids[bottomRow(selection)]
+		};
+	};
+	const handleMenuInsertAbove = () => {
+		closeMenu();
+		const { top } = selectedEnds();
+		insertRows(menuRowCount(), top ? {
+			id: top,
+			place: "before"
+		} : null);
+	};
+	const handleMenuInsertBelow = () => {
+		closeMenu();
+		const { bottom } = selectedEnds();
+		insertRows(menuRowCount(), bottom ? {
+			id: bottom,
+			place: "after"
+		} : null);
+	};
+	const sortRows = (direction) => {
+		closeMenu();
+		const { sheet } = session;
+		if (!isEntrySheet(sheet) || !menuColumn) return;
+		app.value.store.dispatch(attachDictionarySheetTag$(sortDictionaryAction$(sheet, menuColumn.id, direction, i18n.value.locale)));
+		session.handle.focus();
+	};
+	const handleMenuDeleteRows = () => {
+		closeMenu();
+		handleDeleteRows();
+	};
+	const handleMenuImport = () => {
+		closeMenu();
+		handleImport();
+	};
+	const handleMenuExport = () => {
+		closeMenu();
+		handleExport();
+		session.handle.focus();
+	};
+	const handleImport = () => {
+		fileRef.value?.click();
+	};
+	const handleFileChange = async (event) => {
+		const input = event.currentTarget;
+		const file = input.files?.[0];
+		input.value = "";
+		if (!file) return;
+		const kind = await importDictionaryFile(app.value, file, i18n.value);
+		if (!kind) return;
+		switchSheet(kind);
+		session.handle.focus();
+	};
+	const handleExport = () => {
+		const { sheet } = session;
+		if (!isEntrySheet(sheet)) return;
+		exportDictionarySheet(app.value.store.state, sheet);
+	};
+	const selectionAfter = (asked) => {
+		const { sheet, selection } = session;
+		if (!asked || !isEntrySheet(sheet)) return;
+		const ids = sheetRowIds(app.value.store.state, sheet, view.sheets[sheet].search);
+		if (!ids.length) return;
+		if (asked.kind === "add") {
+			const { anchor, count } = asked;
+			const start = insertedStart(ids, count, anchor);
+			const first = Math.min(Math.max(start, 0), ids.length - 1);
+			const last = Math.min(first + count - 1, ids.length - 1);
+			revealRows = {
+				first,
+				last
+			};
+			return rowsSelection(first, last);
+		}
+		return cellSelection(Math.min(topRow(selection), ids.length - 1), selection.active.col);
+	};
+	const showEntry = (kind, id, columnId) => {
+		const { state: rootState } = app.value.store;
+		const { search } = view.sheets[kind];
+		let row = sheetRowIds(rootState, kind, search).indexOf(id);
+		if (row === -1) {
+			row = sheetRowIds(rootState, kind).indexOf(id);
+			if (row === -1) return;
+			changeSearch(view, kind, "");
+		}
+		const fields = DictionaryFields[kind];
+		const col = Math.max(fields.indexOf(columnId), 0);
+		rememberSelection(view, kind, cellSelection(row, col));
+		rememberScroll(view, kind, {
+			rowStart: row,
+			colStart: 0
+		});
+		switchSheet(kind);
+	};
+	const goToCheck = (row) => {
+		const check = session.checks[row];
+		if (!check) return;
+		const destination = checkDestination(check);
+		if (destination.kind === "entry") {
+			showEntry(destination.sheet, destination.id, destination.columnId);
+			return;
+		}
+		goToErdTarget(app.value.store, destination.target);
+		ctx.host.dispatchEvent(forceFocusEvent());
+	};
+	const onActiveCell = ({ clientX, clientY }) => {
+		const focus = sheetRef.value?.querySelector("textarea");
+		if (!focus) return false;
+		const { left, top, right, bottom } = focus.getBoundingClientRect();
+		return clientX >= left && clientX < right && clientY >= top && clientY < bottom;
+	};
+	const handleSheetDoubleClick = (event) => {
+		if (session.sheet !== DictionarySheet.check || !onActiveCell(event)) return;
+		goToCheck(session.selection.active.row);
+	};
+	const handleSheetKeydown = (event) => {
+		if (session.sheet !== DictionarySheet.check || isComposing(event)) return;
+		const modified = event.shiftKey || event.altKey || event.ctrlKey || event.metaKey;
+		if (event.key !== "Enter" || modified) return;
+		event.stopPropagation();
+		goToCheck(session.selection.active.row);
+	};
+	const handleKeydown = (event) => {
+		const { keyBindingMap, store } = app.value;
+		if (contextMenu.state.show && event.key === "Escape") {
+			event.stopPropagation();
+			closeMenu();
+			return;
+		}
+		handleDictionaryKeydown(event, {
+			keyBindingMap,
+			undo: () => {
+				if (isEntrySheet(session.sheet)) store.undoSheet(session.sheet);
+			},
+			redo: () => {
+				if (isEntrySheet(session.sheet)) store.redoSheet(session.sheet);
+			},
+			inGrid: event.composedPath().includes(sheetRef.value),
+			isEditing: () => session.handle.isEditing(),
+			insertRows: () => {
+				if (!props.readonly) handleMenuInsertBelow();
+			},
+			insertRowsAbove: () => {
+				if (!props.readonly) handleMenuInsertAbove();
+			},
+			deleteRows: () => {
+				if (!props.readonly) handleMenuDeleteRows();
+			}
+		});
+	};
+	const settle = () => {
+		session.rows.settle(session.handle.isEditing());
+	};
+	onMounted(() => {
+		const { store } = app.value;
+		const $sheet = sheetRef.value;
+		SETTLING_EVENTS.forEach((type) => $sheet.addEventListener(type, settle, { capture: true }));
+		addUnsubscribe(() => SETTLING_EVENTS.forEach((type) => $sheet.removeEventListener(type, settle, { capture: true })));
+		addUnsubscribe(store.subscribe((actions) => {
+			const bumped = bumpedSheets(actions);
+			if (bumped.some(isEntrySheet)) countEntries();
+			if (bumped.length) checkCount.restart();
+			if (!bumped.includes(session.sheet)) return;
+			closeMenu();
+			if (!isEntrySheet(session.sheet)) return refreshChecks();
+			const asked = pending;
+			pending = null;
+			refresh(selectionAfter(asked));
+		}), watch(props).subscribe((name) => {
+			if (name === "readonly") closeMenu();
+		}), watch(i18n.value).subscribe((name) => {
+			if (name === "locale" && session.sheet === DictionarySheet.check) refresh();
+		}), () => {
+			if (checksFrame !== null) cancelAnimationFrame(checksFrame);
+			checkCount.stop();
+		});
+		checkCount.restart();
+	});
+	onUpdated(() => {
+		const rows = revealRows;
+		if (rows === null) return;
+		revealRows = null;
+		nextTick(() => {
+			session.handle.scrollTo(rows.last, 0);
+			session.handle.scrollTo(rows.first, 0);
+		});
+	});
+	return () => {
+		const i18nValue = i18n.value;
+		const { t } = i18nValue;
+		const { sheet: sheet$1, version, rowCount, selectedRows, empty: empty$1 } = state;
+		const entry = isEntrySheet(sheet$1);
+		const gridColumns = columnsOf(sheet$1, i18nValue);
+		gridTheme = toGridTheme(theme.value, gridTheme);
+		const cellStyle = cellStyleOf(theme.value);
+		session.rows.receive(version);
+		return html`<div class=${["dictionary", root]} @keydown=${handleKeydown} @mousedown=${handleMousedown} @copy=${keepClipboard} @cut=${keepClipboard} @paste=${keepClipboard}><div class=${bar}><div class=${segments} role="group" aria-label=${t("common.tab.dictionary")}>${DictionarySheetList.map((item) => html`<button type="button" class=${segment} aria-pressed=${item === sheet$1 ? "true" : "false"} @click=${() => switchSheet(item)}><span>${t(DictionarySheetLabelKey[item])}</span><span class=${countClass(item)} aria-hidden="true">${formatCount(i18nValue.locale, state.counts[item])}</span></button>`)}</div><div class=${searchField} ${ref(searchRef)}><span class=${searchIcon}><${Icon} .name="search" .size=${14} /></span><${TextInput} .class=${search} .title=${t("common.search")} .placeholder=${t("common.search")} .dir="auto" .value=${view.sheets[sheet$1].search} .onInput=${handleSearch} .onKeydown=${handleSearchKeydown} />${view.sheets[sheet$1].search ? html`<button type="button" class=${clear} title=${t("dictionary.clearSearch")} aria-label=${t("dictionary.clearSearch")} @click=${clearSearch}><${Icon} .name="x" .size=${14} /></button>` : null}</div>${entry && !props.readonly ? html`<div class=${tools}><button type="button" class=${tool} title=${t("dictionary.addRow")} aria-label=${t("dictionary.addRow")} @click=${handleAddRow}><${Icon} .name="list-plus" .size=${16} /></button><button type="button" class=${[tool, toolDanger]} title=${withChord(t("dictionary.deleteRows"), rowChordOf(app.value.keyBindingMap, RowCommand.deleteRows))} aria-label=${t("dictionary.deleteRows")} @click=${handleDeleteRows}><${Icon} .name="list-x" .size=${16} /></button><span class=${divider} aria-hidden="true" /><button type="button" class=${tool} title=${t("dictionary.import", { format: "CSV" })} aria-label=${t("dictionary.import", { format: "CSV" })} @click=${handleImport}><${Icon} .name="upload" .size=${16} /></button><button type="button" class=${tool} title=${t("dictionary.export", { format: "CSV" })} aria-label=${t("dictionary.export", { format: "CSV" })} @click=${handleExport}><${Icon} .name="download" .size=${16} /></button><input type="file" .accept=${DICTIONARY_FILE_ACCEPT} hidden ${ref(fileRef)} @change=${handleFileChange} /></div>` : null}</div><div class=${sheet} ${ref(sheetRef)} @keydown=${handleSheetKeydown} @dblclick=${handleSheetDoubleClick}>${repeat([sheet$1], (key) => key, () => html`<${Grid} .rowCount=${rowCount} .columns=${gridColumns} .getCell=${getCell} .getCellStyle=${cellStyle} .theme=${gridTheme} .version=${version} .ariaLabel=${t(DictionarySheetLabelKey[sheet$1])} .onCommit=${handleCommit} .onReject=${handleReject} .onCellContextMenu=${entry && !props.readonly ? handleCellContextMenu : void 0} .onSelectionChange=${handleSelectionChange} .onViewportChange=${handleViewportChange} .onColumnResize=${handleColumnResize} .onReady=${handleReady} />`)}${empty$1 && !props.readonly ? html`<p class=${empty}>${t("dictionary.empty", { format: "CSV" })}</p>` : null}</div>${contextMenu.state.show && entry && !props.readonly ? html`<${DictionaryContextMenu} .count=${menuRowCount()} .column=${menuColumn?.label ?? null} .empty=${rowCount === 0} .insertAboveShortcut=${rowChordOf(app.value.keyBindingMap, RowCommand.insertAbove)} .insertShortcut=${rowChordOf(app.value.keyBindingMap, RowCommand.insertBelow)} .deleteShortcut=${rowChordOf(app.value.keyBindingMap, RowCommand.deleteRows)} .onInsertAbove=${handleMenuInsertAbove} .onInsertBelow=${handleMenuInsertBelow} .onDeleteRows=${handleMenuDeleteRows} .onSortAscending=${() => sortRows(DictionarySortDirection.ascending)} .onSortDescending=${() => sortRows(DictionarySortDirection.descending)} .onImport=${handleMenuImport} .onExport=${handleMenuExport} />` : null}<div class=${status}><span>${t("dictionary.rowCount", { count: rowCount })}</span>${selectedRows > 0 ? html`<span>${t("dictionary.selectedCount", { count: selectedRows })}</span>` : null}</div></div>`;
+	};
+};
+//#endregion
+export { Dictionary as default };