@dineug/erd-editor 4.2.0 → 5.0.0

package/dist/components/erd/relationshipHighlight.d.ts

@@ -1,8 +1,13 @@
-/** Lights one relationship in the editor, and puts out the one it lit before. */
+/**
+ * Lights the relationships given in the editor and puts out the ones it lit
+ * before, touching only the flags that change; an empty list puts all out.
+ */
+export declare function setRelationshipHighlights(editorId: string, relationshipIds: readonly string[]): void;
+/** Lights one relationship in the editor, as a jump does, and puts out what it lit before. */
 export declare function setRelationshipHighlight(editorId: string, relationshipId: string): void;
-/** Puts out whatever relationship the editor has lit. */
+/** Puts out whatever relationships the editor has lit. */
 export declare function clearRelationshipHighlight(editorId: string): void;
-/** Whether a jump has lit the relationship, read by its connector as it reads a hover. */
+/** Whether the host has lit the relationship, read by its connector as it reads a hover. */
 export declare function isRelationshipHighlighted(editorId: string, relationshipId: string): boolean;
 /** Forgets an editor that went, whose id nothing reads again. */
 export declare function dropRelationshipHighlight(editorId: string): void;

package/dist/components/erd/relationshipHighlight.js

@@ -0,0 +1,32 @@
+import { observable } from "../../r-html/dist/observable/index.js";
+//#region src/components/erd/relationshipHighlight.ts
+var lit = observable({});
+var litOf = /* @__PURE__ */ new Map();
+var keyOf = (editorId, relationshipId) => `${editorId}\u0000${relationshipId}`;
+function setRelationshipHighlights(editorId, relationshipIds) {
+	const next = new Set(relationshipIds);
+	for (const id of litOf.get(editorId) ?? []) if (!next.has(id)) Reflect.deleteProperty(lit, keyOf(editorId, id));
+	if (!next.size) {
+		litOf.delete(editorId);
+		return;
+	}
+	litOf.set(editorId, [...next]);
+	for (const id of next) {
+		const key = keyOf(editorId, id);
+		if (!lit[key]) lit[key] = true;
+	}
+}
+function setRelationshipHighlight(editorId, relationshipId) {
+	setRelationshipHighlights(editorId, [relationshipId]);
+}
+function clearRelationshipHighlight(editorId) {
+	setRelationshipHighlights(editorId, []);
+}
+function isRelationshipHighlighted(editorId, relationshipId) {
+	return lit[keyOf(editorId, relationshipId)] === true;
+}
+function dropRelationshipHighlight(editorId) {
+	clearRelationshipHighlight(editorId);
+}
+//#endregion
+export { clearRelationshipHighlight, dropRelationshipHighlight, isRelationshipHighlighted, setRelationshipHighlight, setRelationshipHighlights };

package/dist/components/erd/table-group/TableGroupDraft.js

@@ -0,0 +1,14 @@
+import { html } from "../../../r-html/dist/render/index.js";
+import { root } from "./TableGroupDraft.styles.js";
+//#region src/components/erd/table-group/TableGroupDraft.tsx
+var TableGroupDraft = (props) => () => {
+	const rect = props.draw.draft;
+	if (!rect) return null;
+	return html`<div class=${["table-group-draft", root]} style=${{
+		transform: `translate(${rect.x}px, ${rect.y}px)`,
+		width: `${rect.width}px`,
+		height: `${rect.height}px`
+	}}></div>`;
+};
+//#endregion
+export { TableGroupDraft as default };

package/dist/components/erd/table-group/TableGroupDraft.styles.js

@@ -0,0 +1,22 @@
+import { css } from "../../../r-html/dist/template/css.js";
+//#region src/components/erd/table-group/TableGroupDraft.styles.ts
+var root = css`
+  position: absolute;
+  top: 0;
+  left: 0;
+  box-sizing: border-box;
+  border: 1px dashed var(--focus);
+  border-radius: 6px;
+  pointer-events: none;
+
+  &::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    background-color: var(--focus);
+    opacity: 0.12;
+  }
+`;
+//#endregion
+export { root };

package/dist/components/erd/table-group/tableGroupName.d.ts

@@ -1,14 +1,5 @@
 import { GeneratorAction } from '../../../engine/generator.actions';
 import { RxStore } from '../../../engine/rx-store';
-/**
- * Opens the editor over a group's title bar, the table focus let go so Enter and the arrows are the
- * name's. A readonly store opens nothing, nor do hidden groups, whose bar no editor stands over and
- * which would leave the canvas shortcuts waiting on an editor that never opened.
- *
- * @example
- * openTableGroupNameEditor(store, groupId);
- */
-export declare function openTableGroupNameEditor(store: RxStore, id: string): void;
 /**
  * Adds a group through the batch given and opens its name editor, so a name
  * can be typed at once. The group is the one id the batch adds to the

package/dist/components/erd/table-group/tableGroupName.js

@@ -0,0 +1,10 @@
+import { openTableGroupNameEditor } from "../canvas/table-group/tableGroupNameEditor.js";
+//#region src/components/erd/table-group/tableGroupName.ts
+function addTableGroupAndRename(store, action) {
+	const before = new Set(store.state.doc.tableGroupIds);
+	store.dispatchSync(action);
+	const id = store.state.doc.tableGroupIds.find((id) => !before.has(id));
+	if (id) openTableGroupNameEditor(store, id);
+}
+//#endregion
+export { addTableGroupAndRename };

package/dist/components/erd/table-group/useTableGroupDraw.js

@@ -0,0 +1,97 @@
+import "../../../constants/layout.js";
+import { observable } from "../../../r-html/dist/observable/index.js";
+import { getSceneTransform, toScenePoint } from "../../../konva/scene/viewport.js";
+import { changeDrawTableGroupAction } from "../../../engine/modules/editor/atom.actions.js";
+import { addTableGroupAction$ } from "../../../engine/modules/table-group/generator.actions.js";
+import { editorRootOf, isMouseEvent, suppressSelection } from "../../../utils/domEvent.js";
+import { drag$ } from "../../../utils/globalEventObservable.js";
+import { useUnmounted } from "../../../hooks/useUnmounted.js";
+import { addTableGroupAndRename } from "./tableGroupName.js";
+//#region src/components/erd/table-group/useTableGroupDraw.ts
+var clientPointOf = (event) => isMouseEvent(event) ? {
+	x: event.clientX,
+	y: event.clientY
+} : {
+	x: event.touches[0].clientX,
+	y: event.touches[0].clientY
+};
+function useTableGroupDraw({ app, root }) {
+	const state = observable({ draft: null });
+	const { addUnsubscribe } = useUnmounted();
+	let subscription = null;
+	const pointIn = ({ x, y }) => {
+		const rect = root.value.getBoundingClientRect();
+		return {
+			x: x - rect.x,
+			y: y - rect.y
+		};
+	};
+	const transformOf = () => getSceneTransform(app().store.state, "document");
+	const draftOf = (from, to) => {
+		if (Math.max(Math.abs(to.x - from.x), Math.abs(to.y - from.y)) < 4) return null;
+		const { zoomLevel } = transformOf();
+		return {
+			x: Math.min(from.x, to.x),
+			y: Math.min(from.y, to.y),
+			width: Math.max(Math.abs(to.x - from.x), 160 * zoomLevel),
+			height: Math.max(Math.abs(to.y - from.y), 100 * zoomLevel)
+		};
+	};
+	const sceneRectOf = (from, draft) => {
+		const transform = transformOf();
+		const origin = toScenePoint(transform, draft ?? from);
+		const width = draft ? Math.max(draft.width / transform.zoomLevel, 160) : 480;
+		const height = draft ? Math.max(draft.height / transform.zoomLevel, 100) : 320;
+		return {
+			x: Math.round(origin.x),
+			y: Math.round(origin.y),
+			width: Math.round(width),
+			height: Math.round(height)
+		};
+	};
+	const stop = () => {
+		subscription?.unsubscribe();
+		subscription = null;
+		state.draft = null;
+	};
+	const isArmed = () => {
+		const { store } = app();
+		return store.state.editor.drawTableGroup && !store.getReadonly();
+	};
+	const end = (from, draft) => {
+		stop();
+		if (!isArmed()) return;
+		const { store } = app();
+		const rect = sceneRectOf(from, draft);
+		store.dispatchSync(changeDrawTableGroupAction({ value: false }));
+		addTableGroupAndRename(store, addTableGroupAction$(rect));
+	};
+	const start = (event) => {
+		stop();
+		const from = pointIn(clientPointOf(event));
+		let draft = null;
+		subscription = drag$.subscribe({
+			next: ({ event: move, x, y }) => {
+				if (move.type === "mousemove") move.preventDefault();
+				if (!isArmed()) {
+					stop();
+					return;
+				}
+				draft = draftOf(from, pointIn({
+					x,
+					y
+				}));
+				state.draft = draft;
+			},
+			complete: () => end(from, draft)
+		});
+		subscription.add(suppressSelection(editorRootOf(root.value)));
+	};
+	addUnsubscribe(stop);
+	return {
+		state,
+		start
+	};
+}
+//#endregion
+export { useTableGroupDraw };

package/dist/components/erd/table-properties/TableProperties.js

@@ -0,0 +1,67 @@
+import { KeyBindingName, toShortcutTitle } from "../../../utils/keyboard-shortcut/index.js";
+import { query } from "../../../erd-editor-schema/dist/query/index.js";
+import { onMounted } from "../../../r-html/dist/render/part/node/component/hooks.js";
+import { observable } 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 { Open } from "../../../constants/open.js";
+import { nameLabelText, toNameLabel } from "../../../engine/modules/editor/utils/nameView.js";
+import { changeOpenMapAction } from "../../../engine/modules/editor/atom.actions.js";
+import { useAppContext } from "../../appContext.js";
+import { useI18n } from "../../localeContext.js";
+import Icon from "../../primitives/icon/Icon.js";
+import { onStop } from "../../../utils/domEvent.js";
+import { focusEvent } from "../../../utils/internalEvents.js";
+import { useUnmounted } from "../../../hooks/useUnmounted.js";
+import { close, container, header, readonlyBadge, root, scope, scrollbarArea, tableChip, tables, title } from "./TableProperties.styles.js";
+import TablePropertiesIndexes from "./table-properties-indexes/TablePropertiesIndexes.js";
+import TablePropertiesTabs, { Tab } from "./table-properties-tabs/TablePropertiesTabs.js";
+import GeneratorCode from "../../generator-code/GeneratorCode.js";
+import SchemaSQL from "../../schema-sql/SchemaSQL.js";
+//#region src/components/erd/table-properties/TableProperties.tsx
+var TableProperties = (props, ctx) => {
+	const app = useAppContext(ctx);
+	const i18n = useI18n(ctx);
+	const { addUnsubscribe } = useUnmounted();
+	const state = observable({ tab: Tab.Indexes });
+	const handleClose = () => {
+		const { store } = app.value;
+		store.dispatch(changeOpenMapAction({ [Open.tableProperties]: false }));
+	};
+	const handleCloseButton = () => {
+		handleClose();
+		nextTick(() => {
+			ctx.host.dispatchEvent(focusEvent());
+		});
+	};
+	const handleCloseKeydown = (event) => {
+		if (event.code === "Space") event.stopPropagation();
+	};
+	const handleOutsideClick = (event) => {
+		const el = event.target;
+		if (!el) return;
+		!el.closest(".table-properties") && handleClose();
+	};
+	const handleChangeTab = (tab) => {
+		state.tab = tab;
+	};
+	onMounted(() => {
+		const { shortcut$ } = app.value;
+		addUnsubscribe(shortcut$.subscribe(({ type }) => {
+			type === KeyBindingName.stop && handleClose();
+		}));
+	});
+	return () => {
+		const { store, keyBindingMap } = app.value;
+		const { collections, settings } = store.state;
+		const { tableIds } = props;
+		const { t } = i18n.value;
+		const tables$1 = query(collections).collection("tableEntities").selectByIds(tableIds);
+		return html`<div class=${root} @contextmenu=${onStop} @mousedown=${onStop} @touchstart=${onStop} @wheel=${onStop} @click=${handleOutsideClick}><div class=${["table-properties", container]} role="dialog" aria-label=${t("common.tableProperties")}><div class=${header}><span class=${title}>${t("common.tableProperties")}</span>${props.readonly ? html`<span class=${readonlyBadge}><${Icon} .name="lock" .size=${12} /><span>${t("tableProperties.readOnly")}</span></span>` : null}<div class=${["scrollbar", tables]}>${tables$1.map((table) => {
+			const name = nameLabelText(toNameLabel(settings, table));
+			return html`<div class=${[tableChip, { selected: table.id === props.tableId }]} title=${name} .dir="auto" @click=${() => props.onChange(table.id)}><span>${name.trim() ? name : t("common.unnamed")}</span></div>`;
+		})}</div><button class=${["table-properties-close", close]} type="button" title=${toShortcutTitle(keyBindingMap, t("common.close"), KeyBindingName.stop)} @click=${handleCloseButton} @keydown=${handleCloseKeydown}><${Icon} .name="x" .size=${14} /></button></div><${TablePropertiesTabs} .value=${state.tab} .onChange=${handleChangeTab} /><div class=${["scrollbar", scrollbarArea]}>${state.tab === Tab.Indexes ? html`<div class=${scope}><${TablePropertiesIndexes} .tableId=${props.tableId} .readonly=${props.readonly} /></div>` : state.tab === Tab.SchemaSQL ? html`<div class=${["code", scope]}><${SchemaSQL} .isDarkMode=${props.isDarkMode} .tableId=${props.tableId} /></div>` : state.tab === Tab.GeneratorCode ? html`<div class=${["code", scope]}><${GeneratorCode} .isDarkMode=${props.isDarkMode} .tableId=${props.tableId} /></div>` : null}</div></div></div>`;
+	};
+};
+//#endregion
+export { TableProperties as default };

package/dist/components/erd/table-properties/TableProperties.styles.js

@@ -0,0 +1,172 @@
+import { css } from "../../../r-html/dist/template/css.js";
+import { floatingShadow } from "../../../styles/elevation.styles.js";
+import { typography } from "../../../styles/typography.styles.js";
+//#region src/components/erd/table-properties/TableProperties.styles.ts
+var root = css`
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 16px;
+
+  &::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background-color: rgba(0, 0, 0, 0.4);
+  }
+`;
+var container = css`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  max-width: 1040px;
+  height: 600px;
+  max-height: 100%;
+  position: relative;
+  z-index: 1;
+  background-color: var(--context-menu-background);
+  border: 1px solid var(--context-menu-border);
+  border-radius: 6px;
+  ${floatingShadow};
+  overflow: hidden;
+`;
+var header = css`
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  height: 48px;
+  flex-shrink: 0;
+  padding: 0 12px;
+  border-bottom: 1px solid var(--context-menu-border);
+`;
+var title = css`
+  ${typography.normal};
+  color: var(--active);
+  white-space: nowrap;
+  flex-shrink: 0;
+`;
+var readonlyBadge = css`
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  flex-shrink: 0;
+  height: 20px;
+  padding: 0 6px;
+  border: 1px solid var(--context-menu-border);
+  border-radius: 3px;
+  color: var(--foreground);
+  white-space: nowrap;
+  ${typography.paragraph};
+`;
+var edgeShade = css`
+  background-image:
+    linear-gradient(to right, var(--context-menu-background) 50%, transparent),
+    linear-gradient(to left, var(--context-menu-background) 50%, transparent),
+    linear-gradient(to right, var(--context-menu-border), transparent),
+    linear-gradient(to left, var(--context-menu-border), transparent);
+  background-position:
+    left center,
+    right center,
+    left center,
+    right center;
+  background-size:
+    24px 100%,
+    24px 100%,
+    12px 100%,
+    12px 100%;
+  background-repeat: no-repeat;
+  background-attachment: local, local, scroll, scroll;
+  background-clip: content-box;
+`;
+var tables = css`
+  flex: 1 1 0;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  overflow-x: auto;
+  padding: 2px 0;
+  ${edgeShade};
+`;
+var tableChip = css`
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  max-width: 160px;
+  height: 22px;
+  padding: 0 8px;
+  border: 1px solid var(--context-menu-border);
+  border-radius: 9999px;
+  color: var(--foreground);
+  cursor: pointer;
+  ${typography.paragraph};
+
+  &:hover {
+    color: var(--active);
+  }
+
+  &.selected {
+    color: var(--accent-color-11);
+    border-color: var(--accent-color-8);
+    background-color: var(--accent-color-3);
+  }
+
+  & > span {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+`;
+var close = css`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 26px;
+  height: 26px;
+  border-radius: 4px;
+  color: var(--foreground);
+  cursor: pointer;
+
+  &:hover {
+    color: var(--active);
+    background-color: var(--context-menu-hover);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--input-active);
+    outline-offset: 1px;
+  }
+`;
+var scrollbarArea = css`
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  min-height: 0;
+  width: 100%;
+  padding: ${12}px;
+  overflow: auto;
+`;
+var scope = css`
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  gap: 12px;
+  width: 100%;
+  flex-shrink: 0;
+
+  &.code {
+    flex: 1 1 auto;
+    min-height: 0;
+    flex-wrap: nowrap;
+    border: 1px solid var(--context-menu-border);
+    border-radius: 4px;
+    overflow: hidden;
+  }
+`;
+//#endregion
+export { close, container, edgeShade, header, readonlyBadge, root, scope, scrollbarArea, tableChip, tables, title };

package/dist/components/erd/table-properties/table-properties-indexes/TablePropertiesIndexes.js

@@ -0,0 +1,76 @@
+import { query } from "../../../../erd-editor-schema/dist/query/index.js";
+import { observable } from "../../../../r-html/dist/observable/index.js";
+import { html } from "../../../../r-html/dist/render/index.js";
+import { repeat } from "../../../../r-html/dist/render/directives/node/repeat.js";
+import { attachChangeOnlyTag$ } from "../../../../engine/tag.js";
+import { getAlternateKeys, getColumnKeys } from "../../../../utils/tableKeys.js";
+import { addIndexAction$ } from "../../../../engine/modules/index/generator.actions.js";
+import { useAppContext } from "../../../appContext.js";
+import { sourceI18n } from "../../../../i18n/source.js";
+import { useI18n } from "../../../localeContext.js";
+import Icon from "../../../primitives/icon/Icon.js";
+import IndexesCheckboxColumn from "./indexes-checkbox-column/IndexesCheckboxColumn.js";
+import IndexesColumn from "./indexes-column/IndexesColumn.js";
+import IndexesIndex from "./indexes-index/IndexesIndex.js";
+import IndexesKey, { KIND_LABEL } from "./indexes-key/IndexesKey.js";
+import Separator from "../../../primitives/separator/Separator.js";
+import { addIcon, addIndexButtonArea, columns, columnsHead, hint, leftArea, leftTrack, order, rightArea, sectionLabel, sectionStatus } from "./TablePropertiesIndexes.styles.js";
+//#region src/components/erd/table-properties/table-properties-indexes/TablePropertiesIndexes.tsx
+var KEY_STATUS = {
+	primaryKey: "tableProperties.readOnlyByPrimaryKey",
+	unique: "tableProperties.readOnlyByUnique"
+};
+function toColumnsStatus(selectedIndex, selectedKey, checkedCount, columnCount, hasKeys, hasIndexes, readonly, { t } = sourceI18n) {
+	if (selectedIndex) return {
+		text: t("tableProperties.selectedCount", {
+			count: checkedCount,
+			total: columnCount
+		}),
+		locked: false
+	};
+	if (selectedKey) return {
+		text: t(KEY_STATUS[selectedKey.kind], { flag: KIND_LABEL[selectedKey.kind].text }),
+		locked: true
+	};
+	return {
+		text: hasKeys ? t("tableProperties.selectKeyOrIndex") : hasIndexes ? readonly ? t("tableProperties.selectIndexToSee") : t("tableProperties.selectIndexToEdit") : readonly ? t("tableProperties.noKeysOrIndexes") : t("tableProperties.addIndexToChoose"),
+		locked: false
+	};
+}
+var TablePropertiesIndexes = (props, ctx) => {
+	const app = useAppContext(ctx);
+	const i18n = useI18n(ctx);
+	const state = observable({ indexId: null });
+	const handleSelectIndex = (index) => {
+		state.indexId = index?.id ?? null;
+	};
+	const handleSelectKey = (columnKey) => {
+		state.indexId = columnKey.id;
+	};
+	const handleAddIndex = () => {
+		const { store } = app.value;
+		store.dispatch(attachChangeOnlyTag$(addIndexAction$(props.tableId)));
+	};
+	return () => {
+		const { tableId } = props;
+		const readonly = Boolean(props.readonly);
+		const { store } = app.value;
+		const { t } = i18n.value;
+		const { doc: { indexIds }, collections } = store.state;
+		const table = query(collections).collection("tableEntities").selectById(tableId);
+		const columnIds = table?.columnIds ?? [];
+		const columnCount = query(collections).collection("tableColumnEntities").selectByIds(columnIds).length;
+		const indexes = query(collections).collection("indexEntities").selectByIds(indexIds).filter((index) => index.tableId === tableId);
+		const columnKeys = table ? getColumnKeys(store.state, table) : [];
+		const alternateKeyIds = table ? getAlternateKeys(store.state, table).map((key) => key.indexId) : [];
+		const { indexId } = state;
+		const selectedIndex = indexes.find((index) => index.id === indexId) ?? null;
+		const selectedKey = columnKeys.find((key) => key.id === indexId) ?? null;
+		const checkedColumnIds = new Set(query(collections).collection("indexColumnEntities").selectByIds(selectedIndex?.indexColumnIds ?? []).map((indexColumn) => indexColumn.columnId));
+		const status = toColumnsStatus(selectedIndex, selectedKey, columnIds.filter((id) => checkedColumnIds.has(id)).length, columnCount, columnKeys.length > 0, indexes.length > 0, readonly, i18n.value);
+		const orderCount = selectedIndex?.indexColumnIds.length ?? 0;
+		return html`<div class=${leftTrack}><div class=${leftArea}>${columnKeys.length ? html`<div class=${sectionLabel}><span>${t("tableProperties.keys")}</span></div>` : null}${repeat(columnKeys, (columnKey) => columnKey.id, (columnKey) => html`<${IndexesKey} .columnKey=${columnKey} .selected=${columnKey.id === selectedKey?.id} .onSelect=${handleSelectKey} />`)}${columnKeys.length ? html`<${Separator} .space=${4} .padding=${8} />` : null}<div class=${sectionLabel}><span>${t("tableProperties.indexes")}</span></div>${repeat(indexes, (index) => index.id, (index) => html`<${IndexesIndex} .index=${index} .alternateKey=${alternateKeyIds.indexOf(index.id) + 1} .selected=${index.id === selectedIndex?.id} .readonly=${readonly} .onSelect=${handleSelectIndex} />`)}${indexes.length ? null : html`<div class=${hint}>${readonly ? t("tableProperties.noIndexes") : t("tableProperties.noIndexesYet")}</div>`}${readonly ? null : html`<div class=${addIndexButtonArea} title=${t("tableProperties.addIndex")} @click=${handleAddIndex}><${Icon} .class=${addIcon} .size=${12} .name="plus" /><span>${t("tableProperties.addIndex")}</span></div>`}</div></div><div class=${rightArea}><div class=${columnsHead}><div class=${sectionLabel}><span>${t("tableProperties.columns")}</span><span class=${sectionStatus}>${status.locked ? html`<${Icon} .size=${12} .name="lock" />` : null}<span>${status.text}</span></span></div></div>${columnCount ? html`<div class=${["scrollbar", columns]}><${IndexesCheckboxColumn} .tableId=${tableId} .index=${selectedIndex} .keyColumnIds=${selectedKey?.columnIds ?? null} .readonly=${readonly} /></div>` : html`<div class=${hint}>${t("tableProperties.noColumns")}</div>`}${selectedIndex ? html`<div class=${order}><div class=${sectionLabel}><span>${t("tableProperties.indexOrder")}</span>${orderCount > 1 && !readonly ? html`<span class=${sectionStatus}><span>${t("tableProperties.dragToReorder")}</span></span>` : null}</div>${orderCount ? html`<${IndexesColumn} .index=${selectedIndex} .alternateKey=${alternateKeyIds.indexOf(selectedIndex.id) + 1} .readonly=${readonly} />` : html`<div class=${hint}>${readonly ? t("tableProperties.indexHasNoColumns") : t("tableProperties.checkColumnsToAdd")}</div>`}</div>` : null}</div>`;
+	};
+};
+//#endregion
+export { TablePropertiesIndexes as default };

package/dist/components/erd/table-properties/table-properties-indexes/TablePropertiesIndexes.styles.js

@@ -0,0 +1,115 @@
+import { css } from "../../../../r-html/dist/template/css.js";
+import { typography } from "../../../../styles/typography.styles.js";
+import { edgeShade } from "../TableProperties.styles.js";
+//#region src/components/erd/table-properties/table-properties-indexes/TablePropertiesIndexes.styles.ts
+var CHECKBOX_ROW_SLACK = 5;
+var COLUMNS_HEAD_HEIGHT = 36;
+var ORDER_MAX_HEIGHT = 109;
+var leftTrack = css`
+  flex: 0 1 260px;
+  min-width: 220px;
+  align-self: stretch;
+  display: flex;
+  flex-direction: column;
+`;
+var leftArea = css`
+  position: sticky;
+  top: 0;
+  display: flex;
+  flex-direction: column;
+  ${typography.paragraph};
+`;
+var rightArea = css`
+  flex: 1 1 520px;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  ${typography.paragraph};
+
+  & input[type='checkbox'] {
+    scroll-margin: ${COLUMNS_HEAD_HEIGHT + CHECKBOX_ROW_SLACK}px 0
+      ${ORDER_MAX_HEIGHT + CHECKBOX_ROW_SLACK}px;
+  }
+`;
+var columnsHead = css`
+  position: sticky;
+  top: -${12}px;
+  z-index: 1;
+  flex-shrink: 0;
+  margin-top: -${12}px;
+  padding-top: ${12}px;
+  background-color: var(--context-menu-background);
+`;
+var sectionLabel = css`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  height: ${24}px;
+  padding: 0 ${8}px;
+  color: var(--foreground);
+  font-weight: var(--font-weight-medium);
+  flex-shrink: 0;
+`;
+var sectionStatus = css`
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  overflow: hidden;
+  white-space: nowrap;
+  font-weight: var(--font-weight-regular);
+  font-variant-numeric: tabular-nums;
+  color: var(--foreground);
+
+  & > span {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+`;
+var columns = css`
+  flex-shrink: 0;
+  overflow-x: auto;
+  overflow-y: hidden;
+  ${edgeShade};
+`;
+var hint = css`
+  display: flex;
+  align-items: center;
+  height: ${24}px;
+  padding: 0 ${8}px;
+  color: var(--foreground);
+`;
+var addIndexButtonArea = css`
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+  height: ${24}px;
+  padding: 0 ${8}px;
+  color: var(--foreground);
+  cursor: pointer;
+
+  &:hover {
+    background-color: var(--column-hover);
+    color: var(--active);
+  }
+`;
+var addIcon = css`
+  flex-shrink: 0;
+  width: ${22}px;
+  justify-content: center;
+`;
+var order = css`
+  margin-top: 12px;
+  margin-bottom: -${12}px;
+  padding-bottom: ${12}px;
+  position: sticky;
+  bottom: -${12}px;
+  z-index: 1;
+  background-color: var(--context-menu-background);
+  border-top: 1px solid var(--context-menu-border);
+`;
+//#endregion
+export { addIcon, addIndexButtonArea, columns, columnsHead, hint, leftArea, leftTrack, order, rightArea, sectionLabel, sectionStatus };