@dineug/erd-editor 4.1.0 → 5.0.0

package/dist/components/primitives/toast/Toast.js

@@ -0,0 +1,24 @@
+import { html, svg } from "../../../r-html/dist/render/index.js";
+import Icon from "../icon/Icon.js";
+import { action, description, indicator, root, textWrap, title } from "./Toast.styles.js";
+import { clamp } from "es-toolkit";
+//#region src/components/primitives/toast/Toast.tsx
+var RING_SIZE = 16;
+var RING_RADIUS = 6;
+var RING_LENGTH = 2 * Math.PI * RING_RADIUS;
+var progressInRange = (value) => clamp(value, 0, 1);
+var TONE_ICON = {
+	success: "check",
+	error: "triangle-alert"
+};
+var ring = (fraction) => svg`<svg viewBox=${`0 0 ${RING_SIZE} ${RING_SIZE}`} fill="none" stroke-width="2"><circle data-part="track" cx=${RING_SIZE / 2} cy=${RING_SIZE / 2} r=${RING_RADIUS} /><circle data-part="arc" cx=${RING_SIZE / 2} cy=${RING_SIZE / 2} r=${RING_RADIUS} stroke-dasharray=${RING_LENGTH} stroke-dashoffset=${RING_LENGTH * (1 - fraction)} stroke-linecap="round" transform=${`rotate(-90 ${RING_SIZE / 2} ${RING_SIZE / 2})`} /></svg>`;
+var Toast = (props, ctx) => {
+	return () => {
+		const showText = props.title || props.description;
+		const showButton = props.action;
+		const fraction = typeof props.progress === "number" ? progressInRange(props.progress) : null;
+		return html`<div class=${root}>${fraction !== null ? html`<div class=${indicator} role="progressbar" aria-valuemin="0" aria-valuemax="1" aria-valuenow=${fraction}>${ring(fraction)}</div>` : props.busy ? html`<div class=${indicator} role="progressbar" aria-busy="true" data-busy="true"><${Icon} .name="loader-circle" .size=${RING_SIZE} /></div>` : props.tone ? html`<div class=${indicator} data-tone=${props.tone} aria-hidden="true"><${Icon} .name=${TONE_ICON[props.tone]} .size=${RING_SIZE} /></div>` : null}${showText ? html`<div class=${textWrap}>${props.title ? html`<div class=${title}>${props.title}</div>` : null}${props.description ? html`<div class=${description}>${props.description}</div>` : null}</div>` : null}${showButton ? html`<div class=${action}>${props.action}</div>` : null}</div>`;
+	};
+};
+//#endregion
+export { Toast as default };

package/dist/components/primitives/toast/Toast.styles.js

@@ -0,0 +1,87 @@
+import { css } from "../../../r-html/dist/template/css.js";
+import { floatingShadow } from "../../../styles/elevation.styles.js";
+import { fontSize2, typography } from "../../../styles/typography.styles.js";
+//#region src/components/primitives/toast/Toast.styles.ts
+var root = css`
+  display: flex;
+  align-items: center;
+  border-radius: 6px;
+  width: fit-content;
+  padding: 15px;
+  background-color: var(--toast-background);
+  border: 1px solid var(--toast-border);
+  ${floatingShadow};
+`;
+var indicator = css`
+  flex: none;
+  width: 16px;
+  height: 16px;
+  margin-inline-end: 12px;
+  color: var(--active);
+
+  & svg {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+
+  & [data-part='track'] {
+    stroke: var(--toast-border);
+  }
+
+  & [data-part='arc'] {
+    stroke: currentColor;
+    transition: stroke-dashoffset 0.2s;
+  }
+
+  &[data-busy] svg {
+    animation: toastSpin 0.9s linear infinite;
+  }
+
+  &[data-tone='success'] {
+    color: var(--toast-success);
+  }
+
+  &[data-tone='error'] {
+    color: var(--toast-error);
+  }
+
+  @keyframes toastSpin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+`;
+var textWrap = css`
+  overflow-wrap: anywhere;
+
+  & > div {
+    margin-bottom: 5px;
+  }
+
+  & > div:last-child {
+    margin-bottom: 0;
+  }
+`;
+var title = css`
+  color: var(--active);
+  font-weight: var(--font-weight-medium);
+  ${fontSize2};
+`;
+var description = css`
+  ${typography.paragraph};
+`;
+var action = css`
+  display: flex;
+  margin-inline-start: 15px;
+
+  & > button {
+    margin-inline-start: 8px;
+  }
+
+  & > button:first-child {
+    margin-inline-start: 0;
+  }
+`;
+//#endregion
+export { action, description, indicator, root, textWrap, title };

package/dist/components/primitives/tree/Tree.js

@@ -0,0 +1,182 @@
+import { onMounted, onUpdated } from "../../../r-html/dist/render/part/node/component/hooks.js";
+import { observable } from "../../../r-html/dist/observable/index.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 Icon from "../icon/Icon.js";
+import { useUnmounted } from "../../../hooks/useUnmounted.js";
+import { offsetToShow, visibleRange } from "../../../utils/virtualRange.js";
+import { root, row, space, twisty } from "./Tree.styles.js";
+import { moveFocus } from "./treeModel.js";
+var TREE_INDENT = 12;
+var TREE_KEYS = /* @__PURE__ */ new Set([
+	"ArrowUp",
+	"ArrowDown",
+	"ArrowLeft",
+	"ArrowRight",
+	"Home",
+	"End",
+	"Enter",
+	" "
+]);
+var treeCount = 0;
+var Tree = (props) => {
+	const prefix = `tree-${++treeCount}`;
+	const root$1 = createRef();
+	const view = observable({
+		first: 0,
+		last: -1
+	});
+	const measured = {
+		scrollTop: 0,
+		height: 0
+	};
+	const { addUnsubscribe } = useUnmounted();
+	let revealed = null;
+	let mounted = false;
+	let leftWithWindow = false;
+	const domId = (id) => `${prefix}:${id}`;
+	const indexOf = (id) => id ? props.rows.findIndex((row) => row.node.id === id) : -1;
+	const rangeNow = () => {
+		const count = props.rows.length;
+		const maxScrollTop = Math.max(0, count * 22 - measured.height);
+		return visibleRange(count, Math.min(measured.scrollTop, maxScrollTop), measured.height, 22);
+	};
+	const syncRange = () => {
+		const { first, last } = rangeNow();
+		if (first !== view.first) view.first = first;
+		if (last !== view.last) view.last = last;
+	};
+	const scrollTo = (top) => {
+		const $root = root$1.value;
+		if (!$root) return;
+		const before = measured.scrollTop;
+		$root.scrollTop = top;
+		measured.scrollTop = $root.scrollTop;
+		syncRange();
+		if (measured.scrollTop !== before) props.onScroll?.(measured.scrollTop);
+	};
+	const scrollToIndex = (index) => {
+		scrollTo(offsetToShow(index, measured.scrollTop, measured.height, 22));
+	};
+	const applyReveal = () => {
+		const id = props.revealId ?? null;
+		if (id === null) {
+			revealed = null;
+			return;
+		}
+		if (!mounted || id === revealed) return;
+		const index = indexOf(id);
+		if (index === -1) return;
+		revealed = id;
+		scrollToIndex(index);
+	};
+	const handleScroll = () => {
+		const $root = root$1.value;
+		if (!$root || $root.scrollTop === measured.scrollTop) return;
+		measured.scrollTop = $root.scrollTop;
+		props.onScroll?.(measured.scrollTop);
+		syncRange();
+	};
+	const handleKeydown = (event) => {
+		if (event.isComposing || event.altKey || event.ctrlKey || event.metaKey || !TREE_KEYS.has(event.key)) return;
+		event.preventDefault();
+		const { rows, activeId } = props;
+		if (event.key === "Enter" || event.key === " ") {
+			const index = indexOf(activeId);
+			if (index !== -1) props.onActivate?.(rows[index]);
+			return;
+		}
+		const move = moveFocus(rows, activeId, event.key, props.dir);
+		if (!move) return;
+		if (move.type === "toggle") {
+			props.onToggle?.(move.id, move.expanded);
+			return;
+		}
+		scrollToIndex(move.index);
+		props.onActiveChange?.(move.id);
+	};
+	const handleBlur = () => {
+		leftWithWindow = !document.hasFocus();
+	};
+	const handleFocus = () => {
+		const skipScroll = leftWithWindow;
+		leftWithWindow = false;
+		const { rows, activeId, currentId } = props;
+		if (!rows.length || !root$1.value?.matches(":focus-visible")) return;
+		const active = indexOf(activeId);
+		if (active !== -1) {
+			if (!skipScroll) scrollToIndex(active);
+			return;
+		}
+		const current = indexOf(currentId);
+		const index = current !== -1 ? current : Math.min(rows.length - 1, Math.ceil(measured.scrollTop / 22));
+		scrollToIndex(index);
+		props.onActiveChange?.(rows[index].node.id);
+	};
+	const handleRowClick = (row) => {
+		props.onActiveChange?.(row.node.id);
+		props.onActivate?.(row);
+	};
+	const handleTwistyClick = (event, row) => {
+		event.stopPropagation();
+		props.onActiveChange?.(row.node.id);
+		props.onToggle?.(row.node.id, !row.expanded);
+	};
+	onMounted(() => {
+		const $root = root$1.value;
+		mounted = true;
+		measured.height = $root.clientHeight;
+		scrollTo(props.getScrollTop());
+		applyReveal();
+		const resizeObserver = new ResizeObserver(() => {
+			if ($root.clientHeight === measured.height) return;
+			measured.height = $root.clientHeight;
+			syncRange();
+		});
+		resizeObserver.observe($root);
+		addUnsubscribe(() => resizeObserver.disconnect());
+	});
+	onUpdated(applyReveal);
+	const renderItem = (row$1, index) => {
+		const { node } = row$1;
+		const current = node.id === props.currentId;
+		return html`<div class=${[
+			"tree-row",
+			row,
+			{
+				active: node.id === props.activeId,
+				current
+			}
+		]} id=${domId(node.id)} role="treeitem" aria-level=${row$1.level} aria-setsize=${row$1.setSize} aria-posinset=${row$1.posInSet} .ariaExpanded=${node.hasChildren ? String(row$1.expanded) : null} .ariaCurrent=${current ? "true" : null} style=${{
+			height: `22px`,
+			transform: `translateY(${index * 22}px)`,
+			"padding-inline-start": `${(row$1.level - 1) * TREE_INDENT}px`
+		}} @click=${() => handleRowClick(row$1)}>${node.hasChildren ? html`<span class=${[
+			"tree-twisty",
+			twisty,
+			{ collapsed: !row$1.expanded }
+		]} @click=${(event) => handleTwistyClick(event, row$1)}><${Icon} .name=${row$1.expanded ? "chevron-down" : "chevron-right"} .size=${16} /></span>` : html`<span class=${twisty}></span>`}${props.renderRow(row$1)}</div>`;
+	};
+	return () => {
+		const { rows, activeId } = props;
+		view.first;
+		view.last;
+		props.revealId;
+		const { first, last } = rangeNow();
+		const active = indexOf(activeId);
+		const indexes = [];
+		for (let index = first; index <= last; index++) indexes.push(index);
+		if (active !== -1 && (active < first || active > last)) {
+			indexes.push(active);
+			indexes.sort((a, b) => a - b);
+		}
+		return html`<div class=${[
+			"tree",
+			"scrollbar",
+			root
+		]} ${ref(root$1)} role="tree" tabindex=${rows.length ? 0 : -1} .dir=${props.dir ?? ""} aria-label=${props.label} aria-activedescendant=${active === -1 ? "" : domId(rows[active].node.id)} @keydown=${handleKeydown} @focus=${handleFocus} @blur=${handleBlur} @scroll=${handleScroll}><div class=${space} style=${{ height: `${rows.length * 22}px` }}>${repeat(indexes, (index) => rows[index].node.id, (index) => renderItem(rows[index], index))}</div></div>`;
+	};
+};
+//#endregion
+export { Tree as default };

package/dist/components/primitives/tree/Tree.styles.js

@@ -0,0 +1,71 @@
+import { css } from "../../../r-html/dist/template/css.js";
+//#region src/components/primitives/tree/Tree.styles.ts
+var root = css`
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+  outline: none;
+  background-color: var(--tree-background);
+  color: var(--foreground);
+  font-size: 13px;
+  user-select: none;
+`;
+var space = css`
+  position: relative;
+  width: 100%;
+`;
+var row = css`
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  box-sizing: border-box;
+  white-space: nowrap;
+  cursor: pointer;
+
+  &:hover,
+  .tree:focus &.active:not(.current) {
+    background-color: var(--tree-row-hover);
+    color: var(--active);
+  }
+
+  &.current {
+    background-color: var(--tree-row-current);
+  }
+
+  @media (forced-colors: active) {
+    &.current {
+      outline: 1px dashed CanvasText;
+      outline-offset: -1px;
+    }
+
+    .tree:focus &.active {
+      outline: 1px solid Highlight;
+      outline-offset: -1px;
+    }
+
+    .tree:focus &.active.current {
+      outline: 1px dashed Highlight;
+      outline-offset: -1px;
+    }
+  }
+`;
+var twisty = css`
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  color: var(--tree-muted);
+
+  .tree[dir='rtl'] &.collapsed {
+    transform: scaleX(-1);
+  }
+`;
+//#endregion
+export { root, row, space, twisty };

package/dist/components/primitives/tree/treeModel.js

@@ -0,0 +1,60 @@
+//#region src/components/primitives/tree/treeModel.ts
+function flattenTree(roots, expanded) {
+	const rows = [];
+	const visit = (nodes, level, parentId) => {
+		nodes.forEach((node, index) => {
+			const open = node.hasChildren && expanded[node.id] === true;
+			rows.push({
+				node,
+				level,
+				setSize: nodes.length,
+				posInSet: index + 1,
+				expanded: open,
+				parentId
+			});
+			if (open) visit(node.children(), level + 1, node.id);
+		});
+	};
+	visit(roots, 1, null);
+	return rows;
+}
+function moveFocus(rows, activeId, key, dir = "ltr") {
+	if (!rows.length) return null;
+	const focus = (index) => ({
+		type: "focus",
+		id: rows[index].node.id,
+		index
+	});
+	const index = rows.findIndex((row) => row.node.id === activeId);
+	const forward = dir === "rtl" ? "ArrowLeft" : "ArrowRight";
+	const backward = dir === "rtl" ? "ArrowRight" : "ArrowLeft";
+	if (key === "Home") return focus(0);
+	if (key === "End") return focus(rows.length - 1);
+	if (index === -1) return key === "ArrowDown" || key === "ArrowUp" ? focus(0) : null;
+	const row = rows[index];
+	switch (key) {
+		case "ArrowDown": return index < rows.length - 1 ? focus(index + 1) : null;
+		case "ArrowUp": return index > 0 ? focus(index - 1) : null;
+		case forward:
+			if (!row.node.hasChildren) return null;
+			if (!row.expanded) return {
+				type: "toggle",
+				id: row.node.id,
+				expanded: true
+			};
+			return rows[index + 1]?.parentId === row.node.id ? focus(index + 1) : null;
+		case backward: {
+			if (row.expanded) return {
+				type: "toggle",
+				id: row.node.id,
+				expanded: false
+			};
+			if (row.parentId === null) return null;
+			const parent = rows.findIndex(({ node }) => node.id === row.parentId);
+			return parent === -1 ? null : focus(parent);
+		}
+		default: return null;
+	}
+}
+//#endregion
+export { flattenTree, moveFocus };

package/dist/components/quick-search/QuickSearch.d.ts

@@ -1,6 +1,15 @@
 import { FC } from '@dineug/r-html';
-import { PalettePreferences } from './actions';
-export type QuickSearchProps = PalettePreferences;
+import { AppContext } from '../appContext';
+import { I18n } from '../../i18n/translate';
+import { Action, PalettePreferences } from './documentSearch';
+/** What builds the palette's top level in the language shown, with the options of the pickers the element offers. */
+export type PaletteTopLevel = (app: AppContext, i18n: I18n, preferences: PalettePreferences) => Action[];
+export type QuickSearchProps = PalettePreferences & {
+    /** The rows the palette opens on, which its host decides: the editor hands in its commands and table jumps. */
+    topLevel: PaletteTopLevel;
+    /** Whether the host is readonly, which the rows it builds follow, so a turn builds the level shown again. */
+    readonly?: boolean;
+};
 declare const QuickSearch: FC<QuickSearchProps>;
 export default QuickSearch;
 //# sourceMappingURL=QuickSearch.d.ts.map