@kinetis/vector-ui 0.0.0-stage → 0.9.0

package/app/components/Vx/Widget/Stat.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { VectorWidgetData } from '#vector/app/types/vector'
+
+const props = defineProps<{ data: VectorWidgetData }>()
+const { t } = useVectorT()
+const delta = computed(() => {
+    const { value, previous } = props.data
+    if (value === null || value === undefined || previous === null || previous === undefined || previous === 0) return null
+    return ((value - previous) / Math.abs(previous)) * 100
+})
+</script>
+
+<template>
+    <div>
+        <div class="text-h4 font-weight-medium">{{ formatWidgetValue(data.value, data.format) }}</div>
+        <div class="d-flex align-center ga-2 mt-1">
+            <v-chip v-if="delta !== null" size="x-small" :color="delta >= 0 ? 'success' : 'error'" variant="tonal" :prepend-icon="delta >= 0 ? 'mdi-arrow-up' : 'mdi-arrow-down'">{{ t('dashboard.percent', { value: Math.abs(delta).toFixed(1) }) }}</v-chip>
+            <span v-if="data.previous !== null && data.previous !== undefined" class="text-caption text-medium-emphasis">{{ t('dashboard.stat.previous', { value: formatWidgetValue(data.previous, data.format) }) }}</span>
+        </div>
+        <div v-if="data.caption" class="text-caption text-medium-emphasis mt-1">{{ data.caption }}</div>
+    </div>
+</template>

package/app/components/Vx/Widget/Table.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { VectorWidgetData } from '#vector/app/types/vector'
+
+const props = defineProps<{ data: VectorWidgetData }>()
+const appConfig = useAppConfig()
+const { t } = useVectorT()
+const rows = computed(() => props.data.rows ?? [])
+
+function open(row: Record<string, unknown>) {
+    if (typeof row._link === 'string') navigateTo(`${appConfig.vector.basePath}${row._link}`)
+}
+</script>
+
+<template>
+    <div>
+        <v-table density="compact" hover>
+            <thead>
+                <tr><th v-for="col in data.columns ?? []" :key="col.key" :class="col.align === 'end' ? 'text-end' : ''">{{ col.label }}</th></tr>
+            </thead>
+            <tbody>
+                <tr v-for="(row, i) in rows" :key="i" :style="typeof row._link === 'string' ? 'cursor: pointer' : ''" @click="open(row)">
+                    <td v-for="col in data.columns ?? []" :key="col.key" :class="col.align === 'end' ? 'text-end' : ''">{{ row[col.key] }}</td>
+                </tr>
+                <tr v-if="rows.length === 0"><td :colspan="(data.columns ?? []).length" class="text-medium-emphasis">{{ t('dashboard.table.empty') }}</td></tr>
+            </tbody>
+        </v-table>
+        <div v-if="data.link" class="text-end mt-2">
+            <v-btn size="small" variant="text" :to="`${appConfig.vector.basePath}${data.link}`" append-icon="mdi-arrow-right">{{ t('dashboard.table.seeAll') }}</v-btn>
+        </div>
+    </div>
+</template>

package/app/components/Vx/Widget/Trend.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import type { VectorWidgetData } from '#vector/app/types/vector'
+
+// A sparkline drawn as inline SVG: no chart library, CSP-clean.
+const props = defineProps<{ data: VectorWidgetData }>()
+const { t } = useVectorT()
+const width = 600
+const height = 140
+const points = computed(() => props.data.points ?? [])
+const max = computed(() => Math.max(1, ...points.value.map(p => p.y)))
+const path = computed(() => {
+    const n = points.value.length
+    if (n === 0) return ''
+    const step = n > 1 ? width / (n - 1) : width
+    return points.value.map((p, i) => `${i === 0 ? 'M' : 'L'}${(i * step).toFixed(1)},${(height - (p.y / max.value) * (height - 10) - 5).toFixed(1)}`).join(' ')
+})
+const area = computed(() => path.value ? `${path.value} L${width},${height} L0,${height} Z` : '')
+const hover = ref<number | null>(null)
+</script>
+
+<template>
+    <div>
+        <div class="d-flex justify-space-between text-caption text-medium-emphasis mb-1">
+            <span>{{ points[0]?.x ?? '' }}</span>
+            <span v-if="data.total !== null && data.total !== undefined" class="font-weight-medium">{{ t('dashboard.trend.total', { value: formatWidgetValue(data.total, data.format) }) }}</span>
+            <span>{{ points[points.length - 1]?.x ?? '' }}</span>
+        </div>
+        <svg :viewBox="`0 0 ${width} ${height}`" preserveAspectRatio="none" class="w-100" style="height: 140px" @mouseleave="hover = null">
+            <path :d="area" fill="rgb(var(--v-theme-primary))" fill-opacity="0.12" />
+            <path :d="path" fill="none" stroke="rgb(var(--v-theme-primary))" stroke-width="2" vector-effect="non-scaling-stroke" />
+            <rect v-for="(p, i) in points" :key="p.x" :x="(i * (width / Math.max(1, points.length - 1))) - width / Math.max(1, points.length - 1) / 2" y="0" :width="width / Math.max(1, points.length - 1)" :height="height" fill="transparent" @mouseenter="hover = i" />
+        </svg>
+        <div class="text-caption text-center" style="min-height: 1.2em">
+            <template v-if="hover !== null && points[hover]">{{ points[hover]!.x }}: <strong>{{ formatWidgetValue(points[hover]!.y, data.format) }}</strong></template>
+        </div>
+    </div>
+</template>

package/app/composables/useConfirm.ts

@@ -0,0 +1,34 @@
+export interface ConfirmOptions {
+    title: string
+    text?: string
+    confirmText?: string
+    cancelText?: string
+    destructive?: boolean
+}
+
+interface PendingConfirm extends ConfirmOptions {
+    resolve: (confirmed: boolean) => void
+}
+
+/**
+ * A promise-based confirmation. Vuetify ships no programmatic dialog;
+ * VxConfirm, mounted once in the layout, renders whatever is pending.
+ */
+export function useConfirm() {
+    const pending = useState<PendingConfirm | null>('vector.confirm', () => null)
+
+    function confirm(options: ConfirmOptions): Promise<boolean> {
+        pending.value?.resolve(false) // whoever asked first is answered, not left waiting
+
+        return new Promise((resolve) => {
+            pending.value = { ...options, resolve }
+        })
+    }
+
+    function settle(confirmed: boolean) {
+        pending.value?.resolve(confirmed)
+        pending.value = null
+    }
+
+    return { pending, confirm, settle }
+}

package/app/composables/useLeaveGuard.ts

@@ -0,0 +1,21 @@
+/**
+ * Asks before leaving a page while $dirty says it holds unsaved changes:
+ * a route change through the confirm dialog, a reload or a closed tab
+ * through the browser's own prompt.
+ */
+export function useLeaveGuard(dirty: () => boolean) {
+    const { confirm } = useConfirm()
+    const { t } = useVectorT()
+
+    const mayLeave = async () => !dirty() || await confirm({ title: t('record.leave.title'), text: t('record.leave.text'), confirmText: t('record.leave.discard'), destructive: true })
+
+    onBeforeRouteLeave(mayLeave)
+    onBeforeRouteUpdate((to, from) => to.path === from.path || mayLeave())
+
+    function warnBeforeUnload(event: BeforeUnloadEvent) {
+        if (dirty()) event.preventDefault()
+    }
+
+    onMounted(() => window.addEventListener('beforeunload', warnBeforeUnload))
+    onBeforeUnmount(() => window.removeEventListener('beforeunload', warnBeforeUnload))
+}

package/app/composables/useVectorApi.ts

@@ -0,0 +1,74 @@
+import type { $Fetch } from 'nitropack'
+
+/**
+ * The one HTTP client every Vector request goes through. Bearer mode
+ * attaches the in-memory token — renewed first when it has under two
+ * minutes left — and on a 401 renews it once and repeats the request,
+ * sending the user to the login page only when that fails too (a 401
+ * means the request did nothing, so repeating even a POST is safe);
+ * cookie mode (hosted) rides the application's session cookie,
+ * sends the CSRF token on every unsafe method, and hands a 401 to the
+ * application's own login URL.
+ */
+export function useVectorApi(): $Fetch {
+    const config = useRuntimeConfig()
+    const appConfig = useAppConfig()
+    const runtime = useVectorRuntime()
+    const auth = useVectorAuthStore()
+    const router = useRouter()
+
+    return $fetch.create({
+        baseURL: runtime.hosted ? (runtime.apiBase ?? '') : config.public.vector.apiBase,
+        credentials: runtime.hosted ? 'same-origin' : 'omit',
+        async onRequest({ options }) {
+            if (runtime.hosted) {
+                const method = String(options.method ?? 'GET').toUpperCase()
+
+                if (runtime.csrfToken && !['GET', 'HEAD', 'OPTIONS'].includes(method)) {
+                    options.headers.set('X-CSRF-Token', runtime.csrfToken)
+                }
+            } else {
+                const token = await auth.fresh()
+                if (token) options.headers.set('Authorization', `Bearer ${token}`)
+            }
+        },
+        async onResponseError({ response, options }) {
+            const once = options as typeof options & { vectorRenewed?: boolean }
+
+            if (response.status === 401 && !runtime.hosted && !once.vectorRenewed && auth.canRefresh && await auth.refresh()) {
+                // repeated once, with the renewed token (onRequest sets it)
+                once.vectorRenewed = true
+                options.retry = 1
+                options.retryStatusCodes = [401]
+
+                return
+            }
+
+            if (response.status === 401) {
+                if (runtime.hosted && runtime.loginUrl && import.meta.client) {
+                    window.location.assign(runtime.loginUrl)
+
+                    return
+                }
+
+                auth.clear()
+                // back to this page after signing in again, as the route middleware would send a visitor
+                const current = router.currentRoute.value.fullPath
+                await navigateTo({ path: `${appConfig.vector.basePath || ''}/login`, query: current.startsWith(`${appConfig.vector.basePath || ''}/login`) ? {} : { redirect: current } })
+            }
+        },
+    }) as $Fetch
+}
+
+/** The message a failed request should show, from either Kinetis error shape. */
+export function vectorErrorMessage(error: unknown): string {
+    const failure = error as { data?: { error?: string, detail?: string }, message?: string } | null
+    const data = failure?.data
+
+    if (data && typeof data === 'object') {
+        if (typeof data.error === 'string') return data.error
+        if (typeof data.detail === 'string') return data.detail
+    }
+
+    return typeof failure?.message === 'string' ? failure.message : String(error)
+}

package/app/composables/useVectorAuthStore.ts

@@ -0,0 +1,252 @@
+import { defineStore } from 'pinia'
+
+export interface VectorUser {
+    id: number | string
+    name: string
+    email?: string
+}
+
+interface TokenResponse {
+    accessToken: string
+    tokenType: string
+    expiresIn: number
+    /** Present when the application issues refresh tokens (POST /auth/refresh renews both, once). */
+    refreshToken?: string
+    refreshExpiresIn?: number
+    user: VectorUser
+}
+
+interface Saved {
+    token: string
+    expiresAt: number
+    user: VectorUser
+    refreshToken?: string | null
+    refreshExpiresAt?: number
+    refreshSubject?: string | null
+}
+
+const STORAGE_KEY = 'vector.session'
+/** An access token with less than this left is renewed before it is used. */
+export const REFRESH_MARGIN_MS = 120_000
+
+// The pending end (or renewal) of the session, and a renewal in flight. The
+// UI runs in the browser only (ssr: false), one app per page, so one of
+// each per module is one per session.
+let expiryTimer: ReturnType<typeof setTimeout> | null = null
+let refreshing: Promise<boolean> | null = null
+// setTimeout's longest delay; a later expiry is re-checked when it fires
+const MAX_DELAY = 2 ** 31 - 1
+
+/**
+ * Bearer-mode session. The access token lives in memory for the tab and
+ * is mirrored to sessionStorage — never localStorage — beside the refresh
+ * token when the application issues one (`/auth/login` answering
+ * `refreshToken`). The session renews itself through `POST /auth/refresh`
+ * when the access token has under two minutes left, and once more on a
+ * 401; a failed renewal signs the user out. Logout revokes the refresh
+ * token (`POST /auth/logout`). An impersonation token is never renewed:
+ * the refresh token is the signed-in user's own, used only while the
+ * session is theirs. Hosted mode rides the application's session instead.
+ */
+export const useVectorAuthStore = defineStore('vectorAuth', {
+    state: () => ({
+        token: null as string | null,
+        expiresAt: 0,
+        user: null as VectorUser | null,
+        refreshToken: null as string | null,
+        refreshExpiresAt: 0,
+        /** Whose refresh token it is: the user who signed in. */
+        refreshSubject: null as string | null,
+        restored: false,
+        hosted: false,
+    }),
+
+    getters: {
+        /** Whether the session can renew itself: a live refresh token, and the session is its owner's. */
+        canRefresh: state => state.refreshToken !== null
+            && state.refreshExpiresAt > Date.now()
+            && state.user !== null
+            && String(state.user.id) === state.refreshSubject,
+        // A getter is cached until the state changes, and the clock is not
+        // state: the session's own timer (expireAt) renews or clears the
+        // token when it runs out, which is the change that updates this.
+        isAuthenticated(state): boolean {
+            return state.hosted || (state.token !== null && state.expiresAt > Date.now()) || this.canRefresh
+        },
+    },
+
+    actions: {
+        restore() {
+            if (this.restored) {
+                return
+            }
+
+            this.restored = true
+            const runtime = useVectorRuntime()
+
+            if (runtime.hosted) {
+                this.hosted = true
+                this.user = runtime.user ? { id: runtime.user.id, name: runtime.user.name ?? vt('shell.account') } : null
+
+                return
+            }
+
+            try {
+                const raw = sessionStorage.getItem(STORAGE_KEY)
+
+                if (raw) {
+                    const saved = JSON.parse(raw) as Saved
+                    const refreshable = !!saved.refreshToken && (saved.refreshExpiresAt ?? 0) > Date.now()
+
+                    if (saved.expiresAt > Date.now() || refreshable) {
+                        this.token = saved.token
+                        this.expiresAt = saved.expiresAt
+                        this.user = saved.user
+                        this.refreshToken = refreshable ? saved.refreshToken! : null
+                        this.refreshExpiresAt = refreshable ? saved.refreshExpiresAt! : 0
+                        this.refreshSubject = refreshable ? saved.refreshSubject ?? null : null
+                        this.expireAt(saved.expiresAt)
+                    }
+                }
+            } catch {
+                // Storage unavailable or unreadable: the user simply logs in again.
+            }
+        },
+
+        async login(email: string, password: string) {
+            const config = useRuntimeConfig()
+            const response = await $fetch<TokenResponse>('/auth/login', {
+                baseURL: config.public.vector.apiBase,
+                method: 'POST',
+                body: { email, password },
+            })
+
+            this.take(response)
+        },
+
+        /**
+         * Renews both tokens, once at a time however many callers ask.
+         * False, and the session ended, when the refresh token is refused.
+         */
+        refresh(): Promise<boolean> {
+            if (!this.canRefresh) return Promise.resolve(false)
+
+            refreshing ??= (async () => {
+                try {
+                    const config = useRuntimeConfig()
+                    const response = await $fetch<TokenResponse>('/auth/refresh', {
+                        baseURL: config.public.vector.apiBase,
+                        method: 'POST',
+                        body: { refreshToken: this.refreshToken },
+                    })
+                    this.take(response)
+
+                    return true
+                } catch {
+                    this.clear()
+
+                    return false
+                } finally {
+                    refreshing = null
+                }
+            })()
+
+            return refreshing
+        },
+
+        /** A token fit to send: renewed first when it has under two minutes left and the session can renew. */
+        async fresh(): Promise<string | null> {
+            if (this.token !== null && this.expiresAt - Date.now() < REFRESH_MARGIN_MS && this.canRefresh) {
+                await this.refresh()
+            }
+
+            return this.token
+        },
+
+        /** Takes a token the server issued outside the login form: impersonation. It is not renewed. */
+        adopt(token: string, expiresIn: number, user: VectorUser) {
+            this.token = token
+            this.expiresAt = Date.now() + expiresIn * 1000
+            this.user = user
+            this.expireAt(this.expiresAt)
+            this.save()
+        },
+
+        /** Signs out: the refresh token is revoked where the application issued it, then the session is forgotten. */
+        async logout() {
+            const refreshToken = this.refreshToken
+
+            if (refreshToken) {
+                const config = useRuntimeConfig()
+                await $fetch('/auth/logout', { baseURL: config.public.vector.apiBase, method: 'POST', body: { refreshToken } }).catch(() => undefined)
+            }
+
+            this.clear()
+        },
+
+        /** Renews the session shortly before its token runs out, or ends it when it cannot. */
+        expireAt(expiresAt: number) {
+            if (expiryTimer !== null) clearTimeout(expiryTimer)
+
+            const due = this.canRefresh ? expiresAt - REFRESH_MARGIN_MS : expiresAt
+
+            expiryTimer = setTimeout(() => {
+                expiryTimer = null
+
+                if (this.expiresAt !== expiresAt) return // a newer token has its own timer
+                if (Date.now() < due) this.expireAt(expiresAt) // past setTimeout's range: wait again
+                else if (this.canRefresh) void this.refresh()
+                else this.clear()
+            }, Math.min(MAX_DELAY, Math.max(0, due - Date.now())))
+        },
+
+        clear() {
+            if (expiryTimer !== null) {
+                clearTimeout(expiryTimer)
+                expiryTimer = null
+            }
+
+            this.token = null
+            this.expiresAt = 0
+            this.user = null
+            this.refreshToken = null
+            this.refreshExpiresAt = 0
+            this.refreshSubject = null
+
+            try {
+                sessionStorage.removeItem(STORAGE_KEY)
+            } catch {
+                // Nothing to remove.
+            }
+        },
+
+        /** A login or refresh answer: the tokens, the user, and the timer that renews them. */
+        take(response: TokenResponse) {
+            this.token = response.accessToken
+            this.expiresAt = Date.now() + response.expiresIn * 1000
+            this.user = response.user
+
+            if (response.refreshToken) {
+                this.refreshToken = response.refreshToken
+                this.refreshExpiresAt = Date.now() + (response.refreshExpiresIn ?? 0) * 1000
+                this.refreshSubject = String(response.user.id)
+            } else {
+                this.refreshToken = null
+                this.refreshExpiresAt = 0
+                this.refreshSubject = null
+            }
+
+            this.expireAt(this.expiresAt)
+            this.save()
+        },
+
+        save() {
+            try {
+                const saved: Saved = { token: this.token!, expiresAt: this.expiresAt, user: this.user!, refreshToken: this.refreshToken, refreshExpiresAt: this.refreshExpiresAt, refreshSubject: this.refreshSubject }
+                sessionStorage.setItem(STORAGE_KEY, JSON.stringify(saved))
+            } catch {
+                // Fine without the mirror.
+            }
+        },
+    },
+})

package/app/composables/useVectorBranding.ts

@@ -0,0 +1,45 @@
+import { useTheme } from 'vuetify'
+import type { VectorBranding } from '#vector/app/types/vector'
+
+/**
+ * What the shell shows about the application: the Branding settings
+ * group, published with the descriptor (and, hosted, injected before
+ * the first paint). Falls back to app.config while nothing loaded.
+ */
+export function useVectorBranding() {
+    const appConfig = useAppConfig()
+    const { schema } = useVectorSchema()
+    const theme = useTheme()
+    const applied = useState<string>('vector.branding.applied', () => '')
+
+    const hosted = import.meta.client ? window.__VECTOR__?.branding ?? null : null
+
+    const branding = computed<VectorBranding>(() => ({
+        title: appConfig.vector.brand.title,
+        logoUrl: null,
+        primaryColor: null,
+        primaryColorDark: null,
+        theme: null,
+        footerText: null,
+        ...(schema.value?.branding ?? hosted ?? {}),
+    }))
+
+    /** Pushes the colours into Vuetify's theme and picks the default theme once per session. */
+    function apply() {
+        const b = branding.value
+        const signature = JSON.stringify(b)
+
+        if (applied.value === signature) return
+
+        if (b.primaryColor) theme.themes.value.light!.colors.primary = b.primaryColor
+        if (b.primaryColorDark) theme.themes.value.dark!.colors.primary = b.primaryColorDark
+
+        if (applied.value === '' && b.theme && b.theme !== 'system') {
+            theme.change(b.theme)
+        }
+
+        applied.value = signature
+    }
+
+    return { branding, apply }
+}

package/app/composables/useVectorDashboards.ts

@@ -0,0 +1,15 @@
+import type { VectorDashboard, VectorWidgetData } from '#vector/app/types/vector'
+
+export function useVectorDashboards() {
+    const api = useVectorApi()
+
+    async function show(name: string): Promise<VectorDashboard> {
+        return (await api<{ data: VectorDashboard }>(`/vector/dashboards/${encodeURIComponent(name)}`)).data
+    }
+
+    async function widget(dashboard: string, name: string, range?: string): Promise<VectorWidgetData> {
+        return (await api<{ data: VectorWidgetData }>(`/vector/dashboards/${encodeURIComponent(dashboard)}/widgets/${encodeURIComponent(name)}`, { query: range ? { range } : {} })).data
+    }
+
+    return { show, widget }
+}

package/app/composables/useVectorExtensions.ts

@@ -0,0 +1,44 @@
+import type { Component } from 'vue'
+import type { AnyExtension } from '@tiptap/core'
+
+/** A custom page: a menu entry and a route, `/p/{name}`, rendering the component. */
+export interface VectorPageDefinition {
+    title: string
+    icon?: string
+    /** The menu section it appears under; the "Pages" section when omitted. */
+    group?: string
+    component: Component | string
+}
+
+/**
+ * The registries runtime extensions fill through `window.Vector`:
+ * cells, inputs, widget renderers and custom pages by name. Reactive, so
+ * something registered after boot shows up without a reload. `ready`
+ * turns true once every extension module has loaded (or failed to).
+ */
+export function useVectorExtensions() {
+    const cells = useState<Map<string, Component>>('vector.ext.cells', () => shallowReactive(new Map()))
+    const inputs = useState<Map<string, Component>>('vector.ext.inputs', () => shallowReactive(new Map()))
+    const widgets = useState<Map<string, Component>>('vector.ext.widgets', () => shallowReactive(new Map()))
+    const pages = useState<Map<string, VectorPageDefinition>>('vector.ext.pages', () => shallowReactive(new Map()))
+    // rich-text node and mark types, by the feature name a field's `features` uses
+    const richText = useState<Map<string, AnyExtension>>('vector.ext.richText', () => shallowReactive(new Map()))
+    const ready = useState<boolean>('vector.ext.ready', () => false)
+
+    return { cells: cells.value, inputs: inputs.value, widgets: widgets.value, pages: pages.value, richText: richText.value, ready }
+}
+
+/**
+ * Every custom page: the application's own from app config
+ * `vector.pages` (a globally registered component by name) and the ones
+ * runtime extensions defined.
+ */
+export function useVectorPages() {
+    const appConfig = useAppConfig()
+    const { pages } = useVectorExtensions()
+
+    return computed<Record<string, VectorPageDefinition>>(() => ({
+        ...(appConfig.vector.pages ?? {}),
+        ...Object.fromEntries(pages.entries()),
+    }))
+}

package/app/composables/useVectorFields.ts

@@ -0,0 +1,68 @@
+import type { Component } from 'vue'
+import type { VectorField } from '#vector/app/types/vector'
+
+/**
+ * The field registry: a descriptor field resolves to the component that
+ * renders it as a table cell or a show-page value.
+ *
+ * Built-in cells are imported explicitly — a dynamic `<component :is>`
+ * defeats template-time auto-import, so nothing here relies on it. A
+ * consuming app adds or replaces entries through `app.config.vector.fields`
+ * (keyed by a field's explicit `component` name or by its `type`), naming
+ * a component it registered globally in a plugin.
+ */
+const cells: Record<string, Component> = {
+    id: defineAsyncComponent(() => import('#vector/app/components/Vx/Cell/Text.vue')),
+    string: defineAsyncComponent(() => import('#vector/app/components/Vx/Cell/Text.vue')),
+    text: defineAsyncComponent(() => import('#vector/app/components/Vx/Cell/Text.vue')),
+    markdown: defineAsyncComponent(() => import('#vector/app/components/Vx/Cell/Markdown.vue')),
+    richtext: defineAsyncComponent(() => import('#vector/app/components/Vx/Cell/RichText.vue')),
+    number: defineAsyncComponent(() => import('#vector/app/components/Vx/Cell/Number.vue')),
+    money: defineAsyncComponent(() => import('#vector/app/components/Vx/Cell/Money.vue')),
+    boolean: defineAsyncComponent(() => import('#vector/app/components/Vx/Cell/Boolean.vue')),
+    enum: defineAsyncComponent(() => import('#vector/app/components/Vx/Cell/Enum.vue')),
+    date: defineAsyncComponent(() => import('#vector/app/components/Vx/Cell/Date.vue')),
+    datetime: defineAsyncComponent(() => import('#vector/app/components/Vx/Cell/DateTime.vue')),
+    email: defineAsyncComponent(() => import('#vector/app/components/Vx/Cell/Email.vue')),
+    url: defineAsyncComponent(() => import('#vector/app/components/Vx/Cell/Url.vue')),
+    password: defineAsyncComponent(() => import('#vector/app/components/Vx/Cell/Text.vue')),
+    slug: defineAsyncComponent(() => import('#vector/app/components/Vx/Cell/Text.vue')),
+    color: defineAsyncComponent(() => import('#vector/app/components/Vx/Cell/Color.vue')),
+    json: defineAsyncComponent(() => import('#vector/app/components/Vx/Cell/Json.vue')),
+    keyValue: defineAsyncComponent(() => import('#vector/app/components/Vx/Cell/KeyValue.vue')),
+    file: defineAsyncComponent(() => import('#vector/app/components/Vx/Cell/File.vue')),
+    image: defineAsyncComponent(() => import('#vector/app/components/Vx/Cell/Image.vue')),
+    belongsTo: defineAsyncComponent(() => import('#vector/app/components/Vx/Cell/Relation.vue')),
+    hasOne: defineAsyncComponent(() => import('#vector/app/components/Vx/Cell/Relation.vue')),
+    hasMany: defineAsyncComponent(() => import('#vector/app/components/Vx/Cell/Count.vue')),
+    manyToMany: defineAsyncComponent(() => import('#vector/app/components/Vx/Cell/Count.vue')),
+}
+
+export function useVectorFields() {
+    const appConfig = useAppConfig()
+
+    /** The cell for a field: an app override by name, then the built-in for its type. */
+    function cellFor(field: VectorField): Component | string {
+        const overrides = appConfig.vector.fields
+        const runtime = useVectorExtensions().cells
+
+        if (field.component && overrides[field.component]) {
+            return overrides[field.component]!
+        }
+
+        if (field.component && runtime.has(field.component)) {
+            return runtime.get(field.component)!
+        }
+
+        if (overrides[field.type]) {
+            return overrides[field.type]!
+        }
+
+        // a computed value is shown by the cell of what it is computed as
+        const type = field.type === 'computed' ? (field.computed?.as === 'text' ? 'string' : field.computed?.as ?? 'string') : field.type
+
+        return cells[type] ?? cells.string!
+    }
+
+    return { cellFor }
+}