@dineug/erd-editor 4.2.0 → 5.0.0

package/dist/components/erd/table-properties/table-properties-indexes/indexes-checkbox-column/IndexesCheckboxColumn.js

@@ -0,0 +1,92 @@
+import { query } from "../../../../../erd-editor-schema/dist/query/index.js";
+import { ColumnOption, ColumnType, Show } from "../../../../../constants/schema.js";
+import { arrayHas } from "../../../../../utils/arrayHas.js";
+import { html } from "../../../../../r-html/dist/render/index.js";
+import { repeat } from "../../../../../r-html/dist/render/directives/node/repeat.js";
+import { bHas } from "../../../../../utils/bit.js";
+import { isBothNameView } from "../../../../../engine/modules/editor/utils/nameView.js";
+import { attachChangeOnlyTag$ } from "../../../../../engine/tag.js";
+import { calcTableWidths } from "../../../../../utils/calcTable.js";
+import { addIndexColumnAction$, removeIndexColumnAction$ } from "../../../../../engine/modules/index-column/generator.actions.js";
+import { useAppContext } from "../../../../appContext.js";
+import { useI18n } from "../../../../localeContext.js";
+import EditInput from "../../../../primitives/edit-input/EditInput.js";
+import ColumnDataType from "../../../../table-view/column/column-data-type/ColumnDataType.js";
+import { root } from "../../../../table-view/column/Column.styles.js";
+import ColumnKey from "../../../../table-view/column/column-key/ColumnKey.js";
+import ColumnNotNull from "../../../../table-view/column/column-not-null/ColumnNotNull.js";
+import ColumnOption$1 from "../../../../table-view/column/column-option/ColumnOption.js";
+import { domainCellText, logicalNameCellText, nameCellText, typeCellText } from "../../../../table-view/column/columnViewText.js";
+import { root as root$1 } from "./IndexesCheckboxColumn.styles.js";
+//#region src/components/erd/table-properties/table-properties-indexes/indexes-checkbox-column/IndexesCheckboxColumn.tsx
+var IndexesCheckboxColumn = (props, ctx) => {
+	const app = useAppContext(ctx);
+	const i18n = useI18n(ctx);
+	const getColumnOrder = (column, columnWidth) => {
+		const { store } = app.value;
+		const { settings } = store.state;
+		const { t } = i18n.value;
+		return settings.columnOrder.map((columnType) => {
+			let template = null;
+			switch (columnType) {
+				case ColumnType.columnName: {
+					const { value, placeholder } = nameCellText(settings, column, i18n.value);
+					template = html`<div class="column-col"><${EditInput} .placeholder=${placeholder} .width=${columnWidth.name} .value=${value} /></div>`;
+					break;
+				}
+				case ColumnType.columnLogicalName: {
+					if (!isBothNameView(settings)) break;
+					const { value, placeholder } = logicalNameCellText(settings, column, "common.placeholder.column", i18n.value);
+					template = html`<div class="column-col"><${EditInput} .placeholder=${placeholder} .width=${columnWidth.logicalName} .value=${value} /></div>`;
+					break;
+				}
+				case ColumnType.columnDomain:
+					template = bHas(settings.show, Show.columnDomain) ? html`<div class="column-col"><${EditInput} .placeholder=${t("common.placeholder.domain")} .width=${columnWidth.domain} .value=${domainCellText(store.state, column)} /></div>` : null;
+					break;
+				case ColumnType.columnDefault:
+					template = bHas(settings.show, Show.columnDefault) ? html`<div class="column-col"><${EditInput} .placeholder=${t("common.placeholder.default")} .width=${columnWidth.default} .value=${column.default} /></div>` : null;
+					break;
+				case ColumnType.columnComment:
+					template = bHas(settings.show, Show.columnComment) ? html`<div class="column-col"><${EditInput} .placeholder=${t("common.placeholder.comment")} .width=${columnWidth.comment} .value=${column.comment} /></div>` : null;
+					break;
+				case ColumnType.columnDataType:
+					template = bHas(settings.show, Show.columnDataType) ? html`<div class="column-col"><${ColumnDataType} .tableId=${column.tableId} .columnId=${column.id} .width=${columnWidth.dataType} .value=${typeCellText(store.state, column)} /></div>` : null;
+					break;
+				case ColumnType.columnNotNull:
+					template = bHas(settings.show, Show.columnNotNull) ? html`<div class="column-col"><${ColumnNotNull} .options=${column.options} /></div>` : null;
+					break;
+				case ColumnType.columnUnique:
+					template = bHas(settings.show, Show.columnUnique) ? html`<div class="column-col"><${ColumnOption$1} .checked=${bHas(column.options, ColumnOption.unique)} .width=${22} .text="UQ" .title=${t("common.column.unique")} /></div>` : null;
+					break;
+				case ColumnType.columnAutoIncrement: template = bHas(settings.show, Show.columnAutoIncrement) ? html`<div class="column-col"><${ColumnOption$1} .checked=${bHas(column.options, ColumnOption.autoIncrement)} .width=${15} .text="AI" .title=${t("common.column.autoIncrement")} /></div>` : null;
+			}
+			return {
+				columnType,
+				template
+			};
+		}).filter(({ template }) => Boolean(template));
+	};
+	const handleChangeIndexColumn = (event, column) => {
+		const input = event.target;
+		if (!input) return;
+		const { store } = app.value;
+		const action$ = input.checked ? addIndexColumnAction$ : removeIndexColumnAction$;
+		if (!props.index || props.readonly) return;
+		store.dispatch(attachChangeOnlyTag$(action$(props.index.id, column.id)));
+	};
+	return () => {
+		const { tableId, index } = props;
+		const idle = !index || Boolean(props.readonly);
+		const { store } = app.value;
+		const { collections } = store.state;
+		const table = query(collections).collection("tableEntities").selectById(tableId);
+		if (!table) return null;
+		const columns = query(collections).collection("tableColumnEntities").selectByIds(table.columnIds);
+		const tableWidths = calcTableWidths(table, store.state);
+		const checkedColumnIds = props.keyColumnIds ?? query(collections).collection("indexColumnEntities").selectByIds(index?.indexColumnIds ?? []).map((indexColumn) => indexColumn.columnId);
+		const hasChecked = arrayHas(checkedColumnIds);
+		return html`<div class=${root$1} ?data-idle=${idle}>${repeat(columns, (column) => column.id, (column) => html`<div class=${["column-row", root]} ?data-selected=${hasChecked(column.id)}><div class="column-col"><input type="checkbox" ?disabled=${idle} .checked=${hasChecked(column.id)} @change=${(event) => handleChangeIndexColumn(event, column)} /></div><${ColumnKey} .keys=${column.ui.keys} />${repeat(getColumnOrder(column, tableWidths), ({ columnType }) => columnType, ({ template }) => template)}</div>`)}</div>`;
+	};
+};
+//#endregion
+export { IndexesCheckboxColumn as default };

package/dist/components/erd/table-properties/table-properties-indexes/indexes-checkbox-column/IndexesCheckboxColumn.styles.js

@@ -0,0 +1,70 @@
+import { css } from "../../../../../r-html/dist/template/css.js";
+//#region src/components/erd/table-properties/table-properties-indexes/indexes-checkbox-column/IndexesCheckboxColumn.styles.ts
+var root = css`
+  display: flex;
+  flex-direction: column;
+  width: max-content;
+  min-width: 100%;
+
+  & .column-row[data-selected] {
+    box-shadow: inset 3px 0 0 var(--accent-color-10);
+  }
+
+  &:not([data-idle]) .column-row[data-selected]:hover {
+    background-color: var(--column-select-hover);
+  }
+
+  &[data-idle] .column-row:not([data-selected]):hover {
+    background-color: transparent;
+  }
+
+  & input[type='checkbox'] {
+    appearance: none;
+    display: block;
+    flex: none;
+    width: 14px;
+    height: 14px;
+    margin: 0;
+    border-radius: 3px;
+    background-color: transparent;
+    box-shadow: inset 0 0 0 1px var(--gray-color-10);
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: 10px;
+    cursor: pointer;
+  }
+
+  & input[type='checkbox']:enabled:not(:checked):hover {
+    box-shadow: inset 0 0 0 1px var(--gray-color-11);
+  }
+
+  & input[type='checkbox']:checked {
+    background-color: var(--accent-color-9);
+    box-shadow: none;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 5.2 4.1 7.2 8 3' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+  }
+
+  & input[type='checkbox']:focus-visible {
+    outline: 2px solid var(--input-active);
+    outline-offset: 1px;
+  }
+
+  & input[type='checkbox']:disabled {
+    cursor: default;
+  }
+
+  & input[type='checkbox']:disabled:checked {
+    opacity: 1;
+    background-color: var(--gray-color-9);
+  }
+
+  @media (forced-colors: active) {
+    & input[type='checkbox'] {
+      appearance: auto;
+      background-image: none;
+      box-shadow: none;
+    }
+  }
+`;
+//#endregion
+export { root };

package/dist/components/erd/table-properties/table-properties-indexes/indexes-column/IndexesColumn.js

@@ -0,0 +1,85 @@
+import { query } from "../../../../../erd-editor-schema/dist/query/index.js";
+import { OrderType } from "../../../../../constants/schema.js";
+import { onUpdated } from "../../../../../r-html/dist/render/part/node/component/hooks.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 { nameLabelText, toNameLabel } from "../../../../../engine/modules/editor/utils/nameView.js";
+import { attachChangeOnlyTag$ } from "../../../../../engine/tag.js";
+import { changeIndexColumnOrderTypeAction$, moveIndexColumnAction$ } from "../../../../../engine/modules/index-column/generator.actions.js";
+import { useAppContext } from "../../../../appContext.js";
+import { useI18n } from "../../../../localeContext.js";
+import Icon from "../../../../primitives/icon/Icon.js";
+import { onPrevent } from "../../../../../utils/domEvent.js";
+import { toOrderName } from "../../../../../utils/schema-sql/utils.js";
+import ColumnOption from "../../../../table-view/column/column-option/ColumnOption.js";
+import { FlipAnimation } from "../../../../../utils/flipAnimation.js";
+import { fromShadowDraggable } from "../../../../../utils/rx-operators/fromShadowDraggable.js";
+import { grip, gripSlot, mark, orderType, root, row } from "./IndexesColumn.styles.js";
+//#region src/components/erd/table-properties/table-properties-indexes/indexes-column/IndexesColumn.tsx
+var IndexesColumn = (props, ctx) => {
+	const app = useAppContext(ctx);
+	const i18n = useI18n(ctx);
+	const root$1 = createRef();
+	const flipAnimation = new FlipAnimation(root$1, `.${row}:not(.dragging)`, "index-column-order-move");
+	const toOrderTitle = (orderType) => {
+		const { t } = i18n.value;
+		switch (orderType) {
+			case OrderType.ASC: return t("tableProperties.ascending");
+			case OrderType.DESC: return t("tableProperties.descending");
+			default: return "";
+		}
+	};
+	const handleMove = (id, targetId) => {
+		const { store } = app.value;
+		if (id !== targetId) {
+			flipAnimation.snapshot();
+			store.dispatch(attachChangeOnlyTag$(moveIndexColumnAction$(id, targetId)));
+		}
+	};
+	const handleDragstart = (event) => {
+		const $root = root$1.value;
+		const $target = event.target;
+		if (!$root || !$target) return;
+		const id = $target.dataset?.id;
+		if (!id) return;
+		const elements = Array.from($root.querySelectorAll(`.${row}`));
+		elements.forEach((el) => el.classList.add("none-hover"));
+		$target.classList.add("dragging");
+		fromShadowDraggable(elements, (el) => el.dataset.id).subscribe({
+			next: (targetId) => {
+				handleMove(id, targetId);
+			},
+			complete: () => {
+				$target.classList.remove("dragging");
+				elements.forEach((el) => el.classList.remove("none-hover"));
+			}
+		});
+	};
+	const handleChangeOrderType = (indexColumn) => {
+		if (props.readonly) return;
+		const { store } = app.value;
+		store.dispatch(attachChangeOnlyTag$(changeIndexColumnOrderTypeAction$(indexColumn.id)));
+	};
+	onUpdated(() => flipAnimation.play());
+	return () => {
+		const { store } = app.value;
+		const { collections, settings } = store.state;
+		const { alternateKey = 0, readonly } = props;
+		const table = query(collections).collection("tableEntities").selectById(props.index.tableId);
+		const tableColumnIds = new Set(table?.columnIds ?? []);
+		const indexColumnEntities = query(collections).collection("indexColumnEntities").selectByIds(props.index.indexColumnIds);
+		const keyedIds = indexColumnEntities.filter((indexColumn) => tableColumnIds.has(indexColumn.columnId)).map((indexColumn) => indexColumn.id);
+		const indexColumns = indexColumnEntities.map((indexColumn) => {
+			const position = keyedIds.indexOf(indexColumn.id) + 1;
+			return {
+				...indexColumn,
+				column: query(collections).collection("tableColumnEntities").selectById(indexColumn.columnId),
+				mark: alternateKey && position ? `AK${alternateKey}.${position}` : ""
+			};
+		});
+		return html`<div class=${["scrollbar", root]} ${ref(root$1)} @dragenter=${onPrevent} @dragover=${onPrevent}>${repeat(indexColumns, (indexColumn) => indexColumn.id, (indexColumn) => html`<div class=${row} ?data-readonly=${readonly} draggable=${readonly ? "false" : "true"} data-id=${indexColumn.id} @dragstart=${readonly ? null : handleDragstart}>${readonly ? html`<div class=${["column-col", gripSlot]}></div>` : html`<${Icon} .class=${["column-col", grip]} .name="grip-vertical" .size=${14} />`}<div class="column-col" @click=${() => handleChangeOrderType(indexColumn)}><${ColumnOption} .class=${readonly ? null : orderType} .checked=${true} .width=${40} .text=${toOrderName(indexColumn.orderType)} .title=${toOrderTitle(indexColumn.orderType)} /></div><div class="column-col">${indexColumn.column ? nameLabelText(toNameLabel(settings, indexColumn.column)) : ""}</div>${indexColumn.mark ? html`<span class=${mark}>${indexColumn.mark}</span>` : null}</div>`)}</div>`;
+	};
+};
+//#endregion
+export { IndexesColumn as default };

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

@@ -0,0 +1,60 @@
+import { css } from "../../../../../r-html/dist/template/css.js";
+import { typography } from "../../../../../styles/typography.styles.js";
+//#region src/components/erd/table-properties/table-properties-indexes/indexes-column/IndexesColumn.styles.ts
+var root = css`
+  max-height: ${72}px;
+  overflow-y: auto;
+
+  .index-column-order-move {
+    transition: transform 0.3s;
+  }
+`;
+var row = css`
+  display: flex;
+  width: 100%;
+  height: ${24}px;
+  align-items: center;
+  color: var(--active);
+  padding: 0 ${8}px;
+  cursor: move;
+  ${typography.paragraph};
+
+  &:hover {
+    background-color: var(--column-hover);
+  }
+
+  & > .column-col {
+    padding: ${2}px ${8}px ${2}px 0;
+  }
+
+  &.none-hover {
+    background-color: transparent;
+  }
+
+  &.dragging {
+    opacity: 0.5;
+  }
+
+  &[data-readonly] {
+    cursor: default;
+  }
+`;
+var grip = css`
+  color: var(--placeholder);
+`;
+var gripSlot = css`
+  flex-shrink: 0;
+  width: 14px;
+  box-sizing: content-box;
+`;
+var orderType = css`
+  cursor: pointer;
+`;
+var mark = css`
+  margin-inline-start: auto;
+  color: var(--accent-color-11);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+`;
+//#endregion
+export { grip, gripSlot, mark, orderType, root, row };

package/dist/components/erd/table-properties/table-properties-indexes/indexes-index/IndexesIndex.js

@@ -0,0 +1,46 @@
+import { html } from "../../../../../r-html/dist/render/index.js";
+import { attachChangeOnlyTag$ } from "../../../../../engine/tag.js";
+import { changeIndexNameAction, removeIndexAction } from "../../../../../engine/modules/index/atom.actions.js";
+import { changeIndexUniqueAction$ } from "../../../../../engine/modules/index/generator.actions.js";
+import { useAppContext } from "../../../../appContext.js";
+import { useI18n } from "../../../../localeContext.js";
+import Icon from "../../../../primitives/icon/Icon.js";
+import TextInput from "../../../../primitives/text-input/TextInput.js";
+import ColumnOption from "../../../../table-view/column/column-option/ColumnOption.js";
+import { alternateKey, iconButton, input, nameCell, row, unique } from "./IndexesIndex.styles.js";
+//#region src/components/erd/table-properties/table-properties-indexes/indexes-index/IndexesIndex.tsx
+var IndexesIndex = (props, ctx) => {
+	const app = useAppContext(ctx);
+	const i18n = useI18n(ctx);
+	const handleSelect = () => {
+		props.onSelect(props.index);
+	};
+	const handleRemoveIndex = (event) => {
+		event.stopPropagation();
+		props.onSelect(null);
+		const { store } = app.value;
+		store.dispatch(attachChangeOnlyTag$(removeIndexAction({ id: props.index.id })));
+	};
+	const handleChangeUniqueIndex = () => {
+		if (props.readonly) return;
+		const { store } = app.value;
+		store.dispatch(attachChangeOnlyTag$(changeIndexUniqueAction$(props.index.id)));
+	};
+	const handleChangeIndexName = (event) => {
+		const input = event.target;
+		if (!input) return;
+		const { store } = app.value;
+		store.dispatch(attachChangeOnlyTag$(changeIndexNameAction({
+			id: props.index.id,
+			tableId: props.index.tableId,
+			value: input.value
+		})));
+	};
+	return () => {
+		const { index, readonly } = props;
+		const { t } = i18n.value;
+		return html`<div class=${[row, { selected: props.selected }]} @click=${handleSelect}><div class="column-col" @click=${handleChangeUniqueIndex}><${ColumnOption} .class=${readonly ? null : unique} .checked=${index.unique} .width=${22} .text="UQ" .title=${t("common.column.unique")} /></div><div class=${["column-col", nameCell]}><${TextInput} .class=${input} .placeholder=${t("tableProperties.indexName")} .readonly=${readonly} .value=${index.name} .onInput=${handleChangeIndexName} /></div>${props.alternateKey ? html`<div class=${alternateKey} title=${t("tableProperties.alternateKeyN", { n: props.alternateKey })}>${`AK${props.alternateKey}`}</div>` : null}${readonly ? null : html`<${Icon} .class=${iconButton} .size=${12} .name="x" .title=${t("tableProperties.remove")} .onClick=${handleRemoveIndex} />`}</div>`;
+	};
+};
+//#endregion
+export { IndexesIndex as default };

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

@@ -0,0 +1,85 @@
+import { css } from "../../../../../r-html/dist/template/css.js";
+import { typography } from "../../../../../styles/typography.styles.js";
+//#region src/components/erd/table-properties/table-properties-indexes/indexes-index/IndexesIndex.styles.ts
+var row = css`
+  display: flex;
+  width: 100%;
+  height: ${24}px;
+  align-items: center;
+  color: var(--placeholder);
+  padding: 0 ${8}px;
+  cursor: pointer;
+
+  &:hover {
+    color: var(--foreground);
+    background-color: var(--column-hover);
+  }
+
+  &:hover input:not(:focus):not([readonly]) {
+    box-shadow: inset 0 -1px 0 var(--context-menu-border);
+  }
+
+  &.selected {
+    background-color: var(--column-select);
+    box-shadow: inset 3px 0 0 var(--accent-color-10);
+  }
+
+  &.selected:hover {
+    background-color: var(--column-select-hover);
+  }
+
+  & > .column-col {
+    padding: ${2}px ${8}px ${2}px 0;
+  }
+`;
+var nameCell = css`
+  flex: 1 1 auto;
+  min-width: 0;
+`;
+var input = css`
+  width: 100%;
+  height: 20px;
+  padding: 0 4px;
+  ${typography.paragraph};
+  text-overflow: ellipsis;
+
+  &:focus:not([readonly]) {
+    box-shadow: inset 0 -1.5px 0 var(--input-active);
+  }
+`;
+var unique = css`
+  cursor: pointer;
+`;
+var alternateKey = css`
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  height: 16px;
+  padding: 0 6px;
+  margin-inline-start: 4px;
+  border: 1px solid var(--accent-color-8);
+  border-radius: 9999px;
+  background-color: var(--accent-color-3);
+  color: var(--accent-color-11);
+  font-size: 10px;
+  font-weight: var(--font-weight-medium);
+  line-height: 1;
+  white-space: nowrap;
+  font-variant-numeric: tabular-nums;
+`;
+var iconButton = css`
+  flex-shrink: 0;
+  margin-inline-start: auto;
+  width: 20px;
+  height: 20px;
+  justify-content: center;
+  border-radius: 4px;
+  cursor: pointer;
+
+  &:hover {
+    color: var(--active);
+    background-color: var(--context-menu-hover);
+  }
+`;
+//#endregion
+export { alternateKey, iconButton, input, nameCell, row, unique };

package/dist/components/erd/table-properties/table-properties-indexes/indexes-key/IndexesKey.js

@@ -0,0 +1,30 @@
+import { html } from "../../../../../r-html/dist/render/index.js";
+import { useI18n } from "../../../../localeContext.js";
+import Icon from "../../../../primitives/icon/Icon.js";
+import { lock, name, row, tag } from "./IndexesKey.styles.js";
+//#region src/components/erd/table-properties/table-properties-indexes/indexes-key/IndexesKey.tsx
+var KIND_LABEL = {
+	primaryKey: {
+		text: "PK",
+		titleKey: "common.primaryKey"
+	},
+	unique: {
+		text: "UQ",
+		titleKey: "tableProperties.uniqueColumn"
+	}
+};
+var IndexesKey = (props, ctx) => {
+	const i18n = useI18n(ctx);
+	const handleSelect = () => {
+		props.onSelect(props.columnKey);
+	};
+	return () => {
+		const { columnKey } = props;
+		const { t } = i18n.value;
+		const label = KIND_LABEL[columnKey.kind];
+		const title = t(label.titleKey);
+		return html`<div class=${[row, { selected: props.selected }]} title=${title} @click=${handleSelect}><div class="column-col"><span class=${tag} title=${title}>${label.text}</span></div><div class=${name}>${columnKey.name}</div><${Icon} .class=${lock} .size=${12} .name="lock" .title=${t("tableProperties.readOnlyKey")} /></div>`;
+	};
+};
+//#endregion
+export { KIND_LABEL, IndexesKey as default };

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

@@ -0,0 +1,62 @@
+import { css } from "../../../../../r-html/dist/template/css.js";
+import { typography } from "../../../../../styles/typography.styles.js";
+//#region src/components/erd/table-properties/table-properties-indexes/indexes-key/IndexesKey.styles.ts
+var row = css`
+  display: flex;
+  width: 100%;
+  height: ${24}px;
+  align-items: center;
+  color: var(--foreground);
+  padding: 0 ${8}px;
+  cursor: pointer;
+
+  &:hover {
+    background-color: var(--column-hover);
+  }
+
+  &.selected {
+    color: var(--active);
+    background-color: var(--column-select);
+    box-shadow: inset 3px 0 0 var(--accent-color-10);
+  }
+
+  &.selected:hover {
+    background-color: var(--column-select-hover);
+  }
+
+  & > .column-col {
+    padding: ${2}px ${8}px ${2}px 0;
+  }
+`;
+var tag = css`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: ${22}px;
+  height: 16px;
+  border-radius: 3px;
+  background-color: var(--gray-color-5);
+  color: var(--active);
+  font-size: 10px;
+  font-weight: var(--font-weight-medium);
+  line-height: 1;
+  user-select: none;
+`;
+var name = css`
+  ${typography.paragraph};
+  min-width: 0;
+  padding-inline-start: 4px;
+  padding-inline-end: ${8}px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+var lock = css`
+  flex-shrink: 0;
+  margin-inline-start: auto;
+  width: 20px;
+  justify-content: center;
+  color: var(--placeholder);
+`;
+//#endregion
+export { lock, name, row, tag };

package/dist/components/erd/table-properties/table-properties-tabs/TablePropertiesTabs.js

@@ -0,0 +1,21 @@
+import { html } from "../../../../r-html/dist/render/index.js";
+import { useI18n } from "../../../localeContext.js";
+import { tab, tabs as tabs$1 } from "./TablePropertiesTabs.styles.js";
+//#region src/components/erd/table-properties/table-properties-tabs/TablePropertiesTabs.tsx
+var Tab = {
+	Indexes: "Indexes",
+	SchemaSQL: "Schema SQL",
+	GeneratorCode: "Code Generator"
+};
+var tabs = Object.values(Tab);
+var TabLabelKey = {
+	[Tab.Indexes]: "tableProperties.indexes",
+	[Tab.SchemaSQL]: "common.tab.schemaSql",
+	[Tab.GeneratorCode]: "common.tab.codeGenerator"
+};
+var TablePropertiesTabs = (props, ctx) => {
+	const i18n = useI18n(ctx);
+	return () => html`<div class=${["scrollbar", tabs$1]}>${tabs.map((tab$1) => html`<div class=${[tab, { selected: tab$1 === props.value }]} @click=${() => props.onChange(tab$1)}>${i18n.value.t(TabLabelKey[tab$1])}</div>`)}</div>`;
+};
+//#endregion
+export { Tab, TabLabelKey, TablePropertiesTabs as default };

package/dist/components/erd/table-properties/table-properties-tabs/TablePropertiesTabs.styles.js

@@ -0,0 +1,34 @@
+import { css } from "../../../../r-html/dist/template/css.js";
+import { typography } from "../../../../styles/typography.styles.js";
+//#region src/components/erd/table-properties/table-properties-tabs/TablePropertiesTabs.styles.ts
+var tabs = css`
+  display: flex;
+  gap: 4px;
+  padding: 8px 12px;
+  min-height: 48px;
+  flex-shrink: 0;
+  border-bottom: 1px solid var(--context-menu-border);
+  overflow-x: auto;
+`;
+var tab = css`
+  display: flex;
+  align-items: center;
+  padding: 0 12px;
+  height: 32px;
+  border-radius: 4px;
+  cursor: default;
+  white-space: nowrap;
+  ${typography.normal};
+
+  &:hover {
+    background-color: var(--gray-color-3);
+    color: var(--active);
+  }
+
+  &.selected {
+    background-color: var(--context-menu-select);
+    color: var(--active);
+  }
+`;
+//#endregion
+export { tab, tabs };