@antelopejs/dms-database 0.0.13 → 0.1.0

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

@@ -1,105 +1,114 @@
 <script setup lang="ts">
+import {
+	cellLabel,
+	cellText,
+	draftText,
+	isStructured,
+} from '../build/data/cellValues'
+import type { StagedCell } from '../build/data/stagedEdits'
+import type { ColumnRole } from '../build/utils/fieldTypes'
+
+// One cell of the data grid. A staged cell is tinted, with the stored value
+// struck through before the new one; nothing is written until the changes
+// are saved. An empty cell reads null, an empty text "".
+
 const props = defineProps<{
-	value: unknown;
-	editable: boolean;
-	editing: boolean;
-	pending: boolean;
-	invalid: boolean;
-	focused: boolean;
-}>();
+	/** The column's name, which names the editor for assistive technology. */
+	column: string
+	value: unknown
+	staged?: StagedCell
+	role: ColumnRole
+	editable: boolean
+	editing: boolean
+	/** Why the draft was refused, shown under the editor. */
+	invalid?: string
+	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);
+	select: []
+	'start-edit': []
+	commit: [draft: string | boolean, source: 'enter' | 'blur']
+	cancel: []
+}>()
 
-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);
-});
+const shown = computed(() => (props.staged ? props.staged.after : props.value))
+const isNull = computed(() => shown.value === null || shown.value === undefined)
+const isEmptyText = computed(() => shown.value === '')
+const structured = computed(() => isStructured(shown.value))
+const isNumber = computed(() => typeof shown.value === 'number')
+// "{3}" for an object of three keys, "[2]" for a list of two items.
+const sizeTag = computed(() => {
+	if (!structured.value) return ''
+	const size = Object.keys(shown.value as object).length
+	return Array.isArray(shown.value) ? `[${size}]` : `{${size}}`
+})
 
-// --- 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);
+const draft = ref('')
+const boolDraft = ref(false)
+const cellInput = useTemplateRef<HTMLInputElement | HTMLSelectElement>(
+	'cellInput',
+)
+// Set before blurring on Escape so the blur does not commit 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);
-		}
+		if (!editing) return
+		cancelling.value = false
+		if (typeof shown.value === 'boolean') boolDraft.value = shown.value
+		else draft.value = draftText(shown.value)
 		nextTick(() => {
-			cellInput.value?.focus();
-			if (cellInput.value instanceof HTMLInputElement) cellInput.value.select();
-		});
+			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;
+function commit(source: 'enter' | 'blur') {
+	if (cancelling.value) return
 	emit(
-		"commit",
-		typeof props.value === "boolean" ? boolDraft.value : draft.value,
+		'commit',
+		typeof shown.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");
+	cancelling.value = true
+	emit('cancel')
 }
 </script>
 
 <template>
 	<td
-		class="relative cursor-default border-r border-b border-default p-0 align-middle"
+		class="border-default relative cursor-default border-b border-r p-0 align-middle"
 		:class="[
 			invalid
-				? 'ring-2 ring-error ring-inset'
+				? 'ring-error ring-2 ring-inset'
 				: focused
-					? 'ring-2 ring-primary ring-inset'
+					? 'ring-primary ring-2 ring-inset'
 					: '',
-			editing ? 'bg-primary/5' : '',
+			staged ? 'bg-warning/10' : editing ? 'bg-primary/5' : '',
 		]"
+		:title="
+			staged
+				? $t('dms_database.data.grid.staged_title', {
+						before: cellLabel(staged.before),
+					})
+				: undefined
+		"
 		@click="emit('select')"
-		@dblclick="onDoubleClick"
+		@dblclick="editable && emit('start-edit')"
 	>
 		<template v-if="editing">
 			<select
-				v-if="typeof value === 'boolean'"
+				v-if="typeof shown === 'boolean'"
 				ref="cellInput"
 				v-model="boolDraft"
-				class="w-full bg-default px-2 py-1 font-mono text-[12.5px] outline-none"
+				class="bg-default w-full px-2 py-1 font-mono text-[12.5px] outline-none"
+				:aria-label="$t('dms_database.data.grid.edit_cell', { column })"
 				@change="commit('enter')"
 				@keydown.esc.stop="cancel"
 				@keydown.stop
@@ -113,34 +122,73 @@ function onDoubleClick() {
 				ref="cellInput"
 				v-model="draft"
 				type="text"
-				class="w-full bg-default px-2 py-1 font-mono text-[12.5px] outline-none"
+				class="bg-default w-full px-2 py-1 font-mono text-[12.5px] outline-none"
+				:aria-label="$t('dms_database.data.grid.edit_cell', { column })"
+				:title="$t('dms_database.data.grid.null_hint')"
+				:aria-invalid="invalid ? true : undefined"
 				@keydown.enter.prevent="commit('enter')"
 				@keydown.esc.stop="cancel"
 				@keydown.stop
 				@blur="commit('blur')"
+			/>
+			<span
+				v-if="invalid"
+				class="bg-error text-inverted absolute left-0 top-full z-20 mt-1 whitespace-nowrap rounded px-2 py-1 text-[11px] shadow"
 			>
+				{{ invalid }}
+			</span>
 		</template>
 		<div
 			v-else
-			class="flex items-center gap-1 overflow-hidden px-2.5 py-1 whitespace-nowrap"
+			class="flex items-center gap-1.5 overflow-hidden whitespace-nowrap px-2.5 py-1"
+			:class="isNumber ? 'justify-end' : ''"
 		>
+			<s v-if="staged" class="text-dimmed font-mono text-[11.5px]">
+				{{ cellLabel(staged.before) }}
+			</s>
 			<span
 				v-if="isNull"
-				class="rounded bg-elevated px-1 font-mono text-[10px] tracking-wide text-dimmed uppercase"
+				class="text-dimmed rounded border border-dashed border-current px-1 font-mono text-[10px]"
 			>
 				null
 			</span>
+			<span
+				v-else-if="isEmptyText"
+				class="text-dimmed font-mono text-[12.5px]"
+				:title="$t('dms_database.data.grid.empty_text')"
+			>
+				""
+			</span>
+			<template v-else-if="structured">
+				<span
+					class="bg-elevated text-muted shrink-0 rounded px-1 font-mono text-[10px]"
+				>
+					{{ sizeTag }}
+				</span>
+				<span
+					class="text-muted overflow-hidden text-ellipsis font-mono text-[12px]"
+				>
+					{{ cellText(shown) }}
+				</span>
+			</template>
 			<span
 				v-else
-				class="overflow-hidden font-mono text-[12.5px] text-ellipsis"
-				:class="isJson ? 'cursor-pointer text-info' : 'text-toned'"
+				class="overflow-hidden text-ellipsis font-mono text-[12.5px] tabular-nums"
+				:class="[
+					role === 'key'
+						? 'text-muted'
+						: role === 'relation'
+							? 'text-primary'
+							: 'text-toned',
+					staged ? 'text-highlighted font-medium' : '',
+				]"
 			>
-				{{ display }}
+				{{ cellText(shown) }}
 			</span>
 			<UIcon
-				v-if="pending"
-				name="i-ph-circle-notch"
-				class="size-3 shrink-0 animate-spin text-primary"
+				v-if="role === 'relation' && !isNull"
+				name="i-ph-arrow-up-right"
+				class="text-primary size-3 shrink-0"
 			/>
 		</div>
 	</td>

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

@@ -1,147 +1,185 @@
 <script setup lang="ts">
-import type { ColumnFilterState, GridColumn } from "../composables/useDataBrowserGrid";
+import { isReservedFilterField } from '../build/composables/useDataBrowserGrid'
+import type {
+	ColumnFilterState,
+	GridColumn,
+} from '../build/composables/useDataBrowserGrid'
+import {
+	COLUMN_ROLE_CLASSES,
+	type ColumnRole,
+	describeRuntimeType,
+} from '../build/utils/fieldTypes'
+
+// A column header (D-14): its type as a neutral icon, colour only for the key
+// and relation columns, and the sort arrow and funnel shown whenever they are
+// on. The funnel opens the column's filter; the active filters are also chips
+// under the toolbar.
 
 const props = defineProps<{
-	column: GridColumn;
-	sortKey: string | null;
-	sortDirection: "asc" | "desc";
-	filter: ColumnFilterState | null;
-	width: number;
-}>();
+	column: GridColumn
+	role: ColumnRole
+	sortKey: string | null
+	sortDirection: 'asc' | 'desc'
+	filter: ColumnFilterState | null
+	width: number
+}>()
 
 const emit = defineEmits<{
-	sort: [];
-	filter: [value: ColumnFilterState | null];
-	resize: [width: number];
-}>();
+	sort: []
+	filter: [value: ColumnFilterState | null]
+	resize: [width: number]
+}>()
+
+const { t } = useI18n()
 
-const { t } = useI18n();
+const ROLE_ICONS: Record<ColumnRole, string | null> = {
+	key: 'i-ph-key',
+	relation: 'i-ph-arrow-right',
+	plain: null,
+}
 
-// 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 type = computed(() =>
+	describeRuntimeType(props.column.type, props.column.name),
+)
+const icon = computed(() => ROLE_ICONS[props.role] ?? type.value.icon)
 
 const sortIcon = computed(() => {
-	if (props.sortKey !== props.column.name) return null;
-	return props.sortDirection === "asc" ? "i-ph-caret-up" : "i-ph-caret-down";
-});
+	if (props.sortKey !== props.column.name) return null
+	return props.sortDirection === 'asc' ? 'i-ph-arrow-up' : 'i-ph-arrow-down'
+})
 
 // --- filter popover ---
-const filterOpen = ref(false);
-const draftMode = ref<"is" | "contains">("contains");
-const draftValue = ref("");
+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 ?? "";
-});
+	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" },
-]);
+	{ label: t('dms_database.data.filters.contains'), value: 'contains' },
+	{ label: t('dms_database.data.filters.is'), value: 'is' },
+])
 
 function applyFilter() {
-	const value = draftValue.value.trim();
-	emit("filter", value ? { mode: draftMode.value, value } : null);
-	filterOpen.value = false;
+	const value = draftValue.value.trim()
+	emit('filter', value ? { mode: draftMode.value, value } : null)
+	filterOpen.value = false
 }
 
 function clearFilter() {
-	emit("filter", null);
-	filterOpen.value = false;
+	emit('filter', null)
+	filterOpen.value = false
 }
 
 // --- column resize (drag the right edge) ---
-const MIN_WIDTH = 80;
-const MAX_WIDTH = 640;
+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;
+let resizeFrame = 0
+let detachResize: (() => void) | null = null
 
 function startResize(event: MouseEvent) {
-	event.preventDefault();
-	const startX = event.clientX;
-	const startWidth = props.width;
+	event.preventDefault()
+	const startX = event.clientX
+	const startWidth = props.width
 	function onMove(move: MouseEvent) {
-		cancelAnimationFrame(resizeFrame);
+		cancelAnimationFrame(resizeFrame)
 		resizeFrame = requestAnimationFrame(() => {
 			const next = Math.min(
 				MAX_WIDTH,
 				Math.max(MIN_WIDTH, startWidth + (move.clientX - startX)),
-			);
-			emit("resize", next);
-		});
+			)
+			emit('resize', next)
+		})
 	}
 	function onUp() {
-		detachResize?.();
+		detachResize?.()
 	}
 	detachResize = () => {
-		cancelAnimationFrame(resizeFrame);
-		window.removeEventListener("mousemove", onMove);
-		window.removeEventListener("mouseup", onUp);
-		detachResize = null;
-	};
-	window.addEventListener("mousemove", onMove);
-	window.addEventListener("mouseup", onUp);
+		cancelAnimationFrame(resizeFrame)
+		window.removeEventListener('mousemove', onMove)
+		window.removeEventListener('mouseup', onUp)
+		detachResize = null
+	}
+	window.addEventListener('mousemove', onMove)
+	window.addEventListener('mouseup', onUp)
 }
 
-onBeforeUnmount(() => detachResize?.());
+onBeforeUnmount(() => detachResize?.())
 </script>
 
 <template>
 	<th
-		class="group relative select-none border-r border-b border-default bg-elevated p-0 text-left font-medium"
+		class="border-default bg-elevated group relative select-none border-b border-r p-0 text-left font-medium"
 		scope="col"
+		:aria-sort="
+			sortIcon
+				? sortDirection === 'asc'
+					? 'ascending'
+					: 'descending'
+				: undefined
+		"
 	>
 		<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"
+				:name="icon"
 				class="size-3 shrink-0"
-				:class="typeIcon.color"
-				:title="typeIcon.label"
+				:class="role === 'plain' ? 'text-dimmed' : COLUMN_ROLE_CLASSES[role]"
+				:title="type.label"
 			/>
 			<button
 				type="button"
-				class="min-w-0 flex-1 truncate text-left font-mono text-xs text-toned hover:text-highlighted"
+				class="hover:text-highlighted min-w-0 flex-1 truncate text-left font-mono text-xs"
+				:class="role === 'relation' ? 'text-primary' : 'text-toned'"
+				:title="t('dms_database.data.grid.sort_hint')"
 				@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">
+			<UIcon
+				v-if="sortIcon"
+				:name="sortIcon"
+				class="text-primary size-3 shrink-0"
+			/>
+			<!-- Columns named after the selection parameters (schema, table,
+			     instance) cannot be filtered: the server reads those as the
+			     table to browse. -->
+			<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'
+							: 'text-dimmed opacity-0 focus-visible:opacity-100 group-hover:opacity-100'
+					"
+					:aria-label="
+						t('dms_database.data.filters.column_title', { column: column.name })
+					"
+					:title="
+						t('dms_database.data.filters.column_title', { column: column.name })
 					"
-					: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" />
+					<div class="w-60 space-y-2 p-3">
+						<p class="text-muted font-mono text-xs">{{ column.name }}</p>
+						<USelect
+							v-model="draftMode"
+							:items="modeOptions"
+							size="xs"
+							class="w-full"
+						/>
 						<UInput
 							v-model="draftValue"
 							size="xs"
@@ -154,12 +192,12 @@ onBeforeUnmount(() => detachResize?.());
 								size="xs"
 								variant="ghost"
 								color="neutral"
-								:label="t('dms_database.data.filterClear')"
+								:label="t('dms_database.data.filters.remove')"
 								@click="clearFilter"
 							/>
 							<UButton
 								size="xs"
-								:label="t('dms_database.data.filterApply')"
+								:label="t('dms_database.data.filters.apply')"
 								@click="applyFilter"
 							/>
 						</div>
@@ -168,7 +206,7 @@ onBeforeUnmount(() => detachResize?.());
 			</UPopover>
 		</div>
 		<span
-			class="absolute top-0 right-0 z-10 h-full w-1 cursor-col-resize hover:bg-primary/40"
+			class="hover:bg-primary/40 absolute right-0 top-0 z-10 h-full w-1 cursor-col-resize"
 			@mousedown="startResize"
 		/>
 	</th>