@antelopejs/dms-database 0.0.1

package/frontend-vue/app/components/DataGridCell.vue

@@ -0,0 +1,147 @@
+<script setup lang="ts">
+const props = defineProps<{
+	value: unknown;
+	editable: boolean;
+	editing: boolean;
+	pending: boolean;
+	invalid: boolean;
+	focused: boolean;
+}>();
+
+const emit = defineEmits<{
+	select: [];
+	"start-edit": [];
+	commit: [draft: string | boolean, source: "enter" | "blur"];
+	cancel: [];
+	"open-json": [];
+}>();
+
+const isJson = computed(
+	() => props.value !== null && props.value !== undefined && typeof props.value === "object",
+);
+const isNull = computed(() => props.value === null || props.value === undefined);
+
+const display = computed(() => {
+	if (isNull.value) return "";
+	if (isJson.value) {
+		try {
+			return JSON.stringify(props.value);
+		} catch {
+			return String(props.value);
+		}
+	}
+	return String(props.value);
+});
+
+// --- inline editing ---
+const draft = ref("");
+const boolDraft = ref(false);
+const cellInput = useTemplateRef<HTMLInputElement | HTMLSelectElement>("cellInput");
+// Set before blurring on Escape so the blur-commit does not fire after a cancel.
+const cancelling = ref(false);
+
+watch(
+	() => props.editing,
+	(editing) => {
+		if (!editing) return;
+		cancelling.value = false;
+		if (typeof props.value === "boolean") {
+			boolDraft.value = props.value;
+		} else {
+			draft.value = isNull.value ? "" : String(props.value);
+		}
+		nextTick(() => {
+			cellInput.value?.focus();
+			if (cellInput.value instanceof HTMLInputElement) cellInput.value.select();
+		});
+	},
+);
+
+// The parent needs the trigger: Enter keeps an invalid draft open for fixing,
+// while a blur (click-away) discards it so the grid never holds an unfocused
+// editor hostage.
+function commit(source: "enter" | "blur") {
+	if (cancelling.value) return;
+	emit(
+		"commit",
+		typeof props.value === "boolean" ? boolDraft.value : draft.value,
+		source,
+	);
+}
+
+function cancel() {
+	cancelling.value = true;
+	emit("cancel");
+}
+
+function onDoubleClick() {
+	if (isJson.value) emit("open-json");
+	else if (props.editable) emit("start-edit");
+}
+</script>
+
+<template>
+	<td
+		class="relative cursor-default border-r border-b border-default p-0 align-middle"
+		:class="[
+			invalid
+				? 'ring-2 ring-error ring-inset'
+				: focused
+					? 'ring-2 ring-primary ring-inset'
+					: '',
+			editing ? 'bg-primary/5' : '',
+		]"
+		@click="emit('select')"
+		@dblclick="onDoubleClick"
+	>
+		<template v-if="editing">
+			<select
+				v-if="typeof value === 'boolean'"
+				ref="cellInput"
+				v-model="boolDraft"
+				class="w-full bg-default px-2 py-1 font-mono text-[12.5px] outline-none"
+				@change="commit('enter')"
+				@keydown.esc.stop="cancel"
+				@keydown.stop
+				@blur="commit('blur')"
+			>
+				<option :value="true">true</option>
+				<option :value="false">false</option>
+			</select>
+			<input
+				v-else
+				ref="cellInput"
+				v-model="draft"
+				type="text"
+				class="w-full bg-default px-2 py-1 font-mono text-[12.5px] outline-none"
+				@keydown.enter.prevent="commit('enter')"
+				@keydown.esc.stop="cancel"
+				@keydown.stop
+				@blur="commit('blur')"
+			>
+		</template>
+		<div
+			v-else
+			class="flex items-center gap-1 overflow-hidden px-2.5 py-1 whitespace-nowrap"
+		>
+			<span
+				v-if="isNull"
+				class="rounded bg-elevated px-1 font-mono text-[10px] tracking-wide text-dimmed uppercase"
+			>
+				null
+			</span>
+			<span
+				v-else
+				class="overflow-hidden font-mono text-[12.5px] text-ellipsis"
+				:class="isJson ? 'cursor-pointer text-info' : 'text-toned'"
+			>
+				{{ display }}
+			</span>
+			<UIcon
+				v-if="pending"
+				name="i-ph-circle-notch"
+				class="size-3 shrink-0 animate-spin text-primary"
+			/>
+		</div>
+	</td>
+</template>

package/frontend-vue/app/components/DataGridHeaderCell.vue

@@ -0,0 +1,175 @@
+<script setup lang="ts">
+import type { ColumnFilterState, GridColumn } from "../composables/useDataBrowserGrid";
+
+const props = defineProps<{
+	column: GridColumn;
+	sortKey: string | null;
+	sortDirection: "asc" | "desc";
+	filter: ColumnFilterState | null;
+	width: number;
+}>();
+
+const emit = defineEmits<{
+	sort: [];
+	filter: [value: ColumnFilterState | null];
+	resize: [width: number];
+}>();
+
+const { t } = useI18n();
+
+// Shared icon set (utils/databaseFieldTypeIcons) so runtime-sampled columns
+// carry the same glyph, color and named-field overrides as the inspector.
+const typeIcon = computed(() =>
+	runtimeTypeIcon(props.column.type, props.column.name),
+);
+
+const sortIcon = computed(() => {
+	if (props.sortKey !== props.column.name) return null;
+	return props.sortDirection === "asc" ? "i-ph-caret-up" : "i-ph-caret-down";
+});
+
+// --- filter popover ---
+const filterOpen = ref(false);
+const draftMode = ref<"is" | "contains">("contains");
+const draftValue = ref("");
+
+watch(filterOpen, (open) => {
+	if (!open) return;
+	draftMode.value = props.filter?.mode ?? "contains";
+	draftValue.value = props.filter?.value ?? "";
+});
+
+const modeOptions = computed(() => [
+	{ label: t("dms_database.data.filterModeContains"), value: "contains" },
+	{ label: t("dms_database.data.filterModeIs"), value: "is" },
+]);
+
+function applyFilter() {
+	const value = draftValue.value.trim();
+	emit("filter", value ? { mode: draftMode.value, value } : null);
+	filterOpen.value = false;
+}
+
+function clearFilter() {
+	emit("filter", null);
+	filterOpen.value = false;
+}
+
+// --- column resize (drag the right edge) ---
+const MIN_WIDTH = 80;
+const MAX_WIDTH = 640;
+
+// Emits are rAF-throttled (one width update per frame, not per mousemove) and
+// the window listeners are detached if the header unmounts mid-drag.
+let resizeFrame = 0;
+let detachResize: (() => void) | null = null;
+
+function startResize(event: MouseEvent) {
+	event.preventDefault();
+	const startX = event.clientX;
+	const startWidth = props.width;
+	function onMove(move: MouseEvent) {
+		cancelAnimationFrame(resizeFrame);
+		resizeFrame = requestAnimationFrame(() => {
+			const next = Math.min(
+				MAX_WIDTH,
+				Math.max(MIN_WIDTH, startWidth + (move.clientX - startX)),
+			);
+			emit("resize", next);
+		});
+	}
+	function onUp() {
+		detachResize?.();
+	}
+	detachResize = () => {
+		cancelAnimationFrame(resizeFrame);
+		window.removeEventListener("mousemove", onMove);
+		window.removeEventListener("mouseup", onUp);
+		detachResize = null;
+	};
+	window.addEventListener("mousemove", onMove);
+	window.addEventListener("mouseup", onUp);
+}
+
+onBeforeUnmount(() => detachResize?.());
+</script>
+
+<template>
+	<th
+		class="group relative select-none border-r border-b border-default bg-elevated p-0 text-left font-medium"
+		scope="col"
+	>
+		<div class="flex items-center gap-1.5 px-2.5 py-1.5">
+			<UIcon
+				v-if="column.isPrimaryKey"
+				name="i-ph-key"
+				class="size-3 shrink-0 text-amber-500"
+			/>
+			<UIcon
+				v-else
+				:name="typeIcon.icon"
+				class="size-3 shrink-0"
+				:class="typeIcon.color"
+				:title="typeIcon.label"
+			/>
+			<button
+				type="button"
+				class="min-w-0 flex-1 truncate text-left font-mono text-xs text-toned hover:text-highlighted"
+				@click="emit('sort')"
+			>
+				{{ column.name }}
+			</button>
+			<UIcon v-if="sortIcon" :name="sortIcon" class="size-3 shrink-0 text-primary" />
+			<!--
+				Data filters on columns named after the wire protocol's selection
+				params (schema / table / instance) are silently dropped server-side,
+				so don't offer the filter button on those columns at all.
+			-->
+			<UPopover v-if="!isReservedFilterField(column.name)" v-model:open="filterOpen">
+				<button
+					type="button"
+					class="rounded p-0.5 transition-opacity"
+					:class="
+						filter
+							? 'text-primary opacity-100'
+							: 'text-dimmed opacity-0 group-hover:opacity-100'
+					"
+					:aria-label="t('dms_database.data.filterTitle', { column: column.name })"
+				>
+					<UIcon name="i-ph-funnel" class="size-3" />
+				</button>
+				<template #content>
+					<div class="w-56 space-y-2 p-3">
+						<p class="font-mono text-xs text-muted">{{ column.name }}</p>
+						<USelect v-model="draftMode" :items="modeOptions" size="xs" class="w-full" />
+						<UInput
+							v-model="draftValue"
+							size="xs"
+							class="w-full"
+							autofocus
+							@keydown.enter="applyFilter"
+						/>
+						<div class="flex justify-end gap-1.5">
+							<UButton
+								size="xs"
+								variant="ghost"
+								color="neutral"
+								:label="t('dms_database.data.filterClear')"
+								@click="clearFilter"
+							/>
+							<UButton
+								size="xs"
+								:label="t('dms_database.data.filterApply')"
+								@click="applyFilter"
+							/>
+						</div>
+					</div>
+				</template>
+			</UPopover>
+		</div>
+		<span
+			class="absolute top-0 right-0 z-10 h-full w-1 cursor-col-resize hover:bg-primary/40"
+			@mousedown="startResize"
+		/>
+	</th>
+</template>

package/frontend-vue/app/components/DiagramNoteNode.vue

@@ -0,0 +1,100 @@
+<script setup lang="ts">
+interface NoteNodeData {
+	noteId: string;
+	text: string;
+	color: string | null;
+	width: number;
+	height: number;
+	onTextChange: (noteId: string, text: string) => void;
+	onDelete: (noteId: string) => void;
+}
+
+const props = defineProps<{ data: NoteNodeData; selected: boolean }>();
+
+// Sticky-note palette (amber). Centralised so the note frame, header and ink
+// stay in sync instead of being repeated as literals across the template.
+const NOTE_DEFAULT_BG = "#fef9c3";
+const NOTE_BORDER = "rgba(202, 138, 4, 0.45)";
+const NOTE_HEADER_BG = "rgba(250, 204, 21, 0.5)";
+const NOTE_HEADER_BORDER = "rgba(202, 138, 4, 0.35)";
+const NOTE_ACCENT = "#92400e";
+const NOTE_INK = "#422006";
+const NOTE_PLACEHOLDER_INK = "rgba(66, 32, 6, 0.45)";
+
+const editing = ref(false);
+const textBuffer = ref(props.data.text);
+
+watch(
+	() => props.data.text,
+	(v) => {
+		if (!editing.value) textBuffer.value = v;
+	},
+);
+
+function commitText() {
+	editing.value = false;
+	const next = textBuffer.value;
+	if (next !== props.data.text) {
+		props.data.onTextChange(props.data.noteId, next);
+	}
+}
+</script>
+
+<template>
+	<div
+		class="rounded-lg shadow-md border relative overflow-hidden flex flex-col"
+		:class="{ 'ring-2 ring-primary': selected }"
+		:style="{
+			background: data.color ?? NOTE_DEFAULT_BG,
+			borderColor: NOTE_BORDER,
+			width: `${data.width}px`,
+			height: `${data.height}px`,
+		}"
+		@dblclick="editing = true"
+	>
+		<!-- Header strip: gives the note a recognisable sticky-note frame and
+		     hosts the delete affordance without overlapping the text. -->
+		<div
+			class="flex items-center justify-between h-6 px-2 shrink-0 cursor-grab"
+			:style="{
+				background: NOTE_HEADER_BG,
+				borderBottom: `1px solid ${NOTE_HEADER_BORDER}`,
+			}"
+		>
+			<UIcon
+				name="i-ph-note-pencil"
+				class="size-3.5"
+				:style="{ color: NOTE_ACCENT }"
+			/>
+			<button
+				v-if="selected"
+				type="button"
+				class="p-0.5 rounded hover:bg-black/10"
+				:style="{ color: NOTE_ACCENT }"
+				:aria-label="$t('dms_database.diagram.notes.delete')"
+				@click.stop="data.onDelete(data.noteId)"
+			>
+				<UIcon name="i-ph-x" class="size-3.5" />
+			</button>
+		</div>
+		<!-- Body. Fixed dark ink so the text stays readable on the light note in
+		     any app theme (the previous theme-aware text colour washed out). -->
+		<textarea
+			v-if="editing"
+			v-model="textBuffer"
+			class="flex-1 w-full bg-transparent text-sm p-3 resize-none outline-none"
+			:style="{ color: NOTE_INK }"
+			:placeholder="$t('dms_database.diagram.notes.placeholder')"
+			autofocus
+			@blur="commitText"
+			@keydown.escape.prevent="commitText"
+		/>
+		<div
+			v-else
+			class="flex-1 w-full p-3 text-sm whitespace-pre-wrap break-words cursor-text overflow-auto"
+			:style="{ color: data.text ? NOTE_INK : NOTE_PLACEHOLDER_INK }"
+		>
+			{{ data.text || $t("dms_database.diagram.notes.placeholder") }}
+		</div>
+	</div>
+</template>

package/frontend-vue/app/components/DiagramRelationEdge.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { BaseEdge, type EdgeProps, Position, getBezierPath } from "@vue-flow/core";
+
+const props = defineProps<EdgeProps>();
+
+const ARC_MIN_OFFSET = 60;
+const ARC_DY_FACTOR = 0.35;
+
+function sideSign(position: Position): 1 | -1 | 0 {
+	if (position === Position.Right) return 1;
+	if (position === Position.Left) return -1;
+	return 0;
+}
+
+const computedPath = computed<[string, number, number]>(() => {
+	const sourceSign = sideSign(props.sourcePosition);
+	const targetSign = sideSign(props.targetPosition);
+	if (sourceSign !== 0 && targetSign !== 0) {
+		const dy = Math.abs(props.targetY - props.sourceY);
+		const offset = Math.max(ARC_MIN_OFFSET, dy * ARC_DY_FACTOR);
+		const cx1 = props.sourceX + sourceSign * offset;
+		const cy1 = props.sourceY;
+		const cx2 = props.targetX + targetSign * offset;
+		const cy2 = props.targetY;
+		const d = `M${props.sourceX},${props.sourceY} C${cx1},${cy1} ${cx2},${cy2} ${props.targetX},${props.targetY}`;
+		// Label sits at the bezier midpoint (t = 0.5).
+		const labelX =
+			(props.sourceX + 3 * cx1 + 3 * cx2 + props.targetX) / 8;
+		const labelY =
+			(props.sourceY + 3 * cy1 + 3 * cy2 + props.targetY) / 8;
+		return [d, labelX, labelY];
+	}
+	const [d, lx, ly] = getBezierPath({
+		sourceX: props.sourceX,
+		sourceY: props.sourceY,
+		sourcePosition: props.sourcePosition,
+		targetX: props.targetX,
+		targetY: props.targetY,
+		targetPosition: props.targetPosition,
+	});
+	return [d, lx, ly];
+});
+</script>
+
+<template>
+	<BaseEdge
+		:id="id"
+		:path="computedPath[0]"
+		:marker-end="markerEnd"
+		:marker-start="markerStart"
+		:style="style"
+		:label="label"
+		:label-x="computedPath[1]"
+		:label-y="computedPath[2]"
+		:label-style="labelStyle"
+		:label-show-bg="labelShowBg"
+		:label-bg-style="labelBgStyle"
+		:label-bg-padding="labelBgPadding"
+		:label-bg-border-radius="labelBgBorderRadius"
+		:interaction-width="interactionWidth"
+	/>
+</template>

package/frontend-vue/app/components/DiagramStubNode.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { Handle, Position } from "@vue-flow/core";
+
+interface StubNodeData {
+	targetSchema: string;
+	targetTable: string;
+}
+
+defineProps<{ data: StubNodeData }>();
+
+const route = useDmsRoute();
+const router = useDmsRouter();
+
+function jumpToSchema(schemaId: string) {
+	router.replace({ query: { ...route.query, schema: schemaId } });
+}
+</script>
+
+<template>
+	<button
+		type="button"
+		class="diagram-stub-node flex items-center gap-1 px-2 py-1 rounded border border-dashed border-default bg-elevated text-xs text-muted hover:text-highlighted hover:border-primary transition-colors opacity-70 relative"
+		@click="jumpToSchema(data.targetSchema)"
+	>
+		<Handle id="stub::left::target" type="target" :position="Position.Left" />
+		<Handle id="stub::right::target" type="target" :position="Position.Right" />
+		<UIcon name="i-ph-arrow-right" />
+		<span class="font-mono">{{ data.targetSchema }}.{{ data.targetTable }}</span>
+	</button>
+</template>
+
+<style scoped>
+.diagram-stub-node :deep(.vue-flow__handle) {
+	opacity: 0;
+	pointer-events: none;
+}
+</style>

package/frontend-vue/app/components/DiagramTableNode.vue

@@ -0,0 +1,94 @@
+<script setup lang="ts">
+import { Handle, Position } from "@vue-flow/core";
+
+interface NodeData {
+	tableName: string;
+	fields: Record<string, unknown>;
+	indexes: Record<string, { fields?: string[]; multi?: boolean }>;
+	modifiers: Record<string, string[]>;
+}
+
+defineProps<{ data: NodeData }>();
+</script>
+
+<template>
+	<div class="diagram-table-node bg-elevated border border-default rounded-lg w-60 shadow-md">
+		<!-- Fallback handles on the node body for edges that reference a non-existent field -->
+		<Handle id="__node__::left::source" type="source" :position="Position.Left" />
+		<Handle id="__node__::left::target" type="target" :position="Position.Left" />
+		<Handle id="__node__::right::source" type="source" :position="Position.Right" />
+		<Handle id="__node__::right::target" type="target" :position="Position.Right" />
+
+		<div class="px-3 py-2 border-b border-default flex items-center gap-2">
+			<UIcon name="i-ph-table" />
+			<span class="font-mono text-sm">{{ data.tableName }}</span>
+		</div>
+
+		<ul class="py-1">
+			<li
+				v-for="(fieldType, fieldName) in data.fields"
+				:key="fieldName"
+				class="relative flex items-center justify-between px-3 py-1 text-sm"
+			>
+				<Handle
+					:id="`${fieldName}::left::source`"
+					type="source"
+					:position="Position.Left"
+				/>
+				<Handle
+					:id="`${fieldName}::left::target`"
+					type="target"
+					:position="Position.Left"
+				/>
+				<Handle
+					:id="`${fieldName}::right::source`"
+					type="source"
+					:position="Position.Right"
+				/>
+				<Handle
+					:id="`${fieldName}::right::target`"
+					type="target"
+					:position="Position.Right"
+				/>
+
+				<span class="flex items-center gap-0.5 font-mono min-w-0">
+					<UTooltip
+						v-if="isPrimaryKey(String(fieldName), data.indexes)"
+						text="Primary key"
+					>
+						<UIcon name="i-ph-key" class="text-amber-500 size-4 shrink-0" />
+					</UTooltip>
+					<template
+						v-for="modifierId in data.modifiers?.[String(fieldName)] ?? []"
+						:key="modifierId"
+					>
+						<UTooltip :text="resolveModifierIcon(modifierId).label">
+							<UIcon
+								:name="resolveModifierIcon(modifierId).icon"
+								:class="[resolveModifierIcon(modifierId).color, 'size-4 shrink-0']"
+							/>
+						</UTooltip>
+					</template>
+					<span class="truncate ml-1">{{ fieldName }}</span>
+				</span>
+
+				<UTooltip :text="inferFieldTypeIcon(fieldType, String(fieldName)).label">
+					<UIcon
+						:name="inferFieldTypeIcon(fieldType, String(fieldName)).icon"
+						:class="[
+							inferFieldTypeIcon(fieldType, String(fieldName)).color,
+							'size-4 shrink-0',
+						]"
+					/>
+				</UTooltip>
+			</li>
+		</ul>
+	</div>
+</template>
+
+<style scoped>
+.diagram-table-node :deep(.vue-flow__handle) {
+	opacity: 0;
+	pointer-events: none;
+}
+</style>