@kinetis/vector-ui 0.0.0-stage → 0.9.1

package/app/layouts/vector.vue

@@ -0,0 +1,238 @@
+<script setup lang="ts">
+import { useTheme } from 'vuetify'
+import { languageName } from '#vector/app/i18n'
+
+const appConfig = useAppConfig()
+const auth = useVectorAuthStore()
+const theme = useTheme()
+const drawer = ref<boolean | null>(null)
+const { schema, menu, load, clear } = useVectorSchema()
+const { branding, apply } = useVectorBranding()
+const palette = ref<{ open: boolean } | null>(null)
+const { t, noun } = useVectorT()
+
+apply() // hosted: branding is known before the descriptor loads
+await load()
+apply()
+watch(branding, apply)
+
+// the user's language: the descriptor names it and the ones on offer; the app bar switches it.
+// Followed on every reload of the descriptor: saving the Languages settings changes what is on offer,
+// and switching off the language in use moves the user to another.
+const language = useVectorLocale()
+watch(() => schema.value?.i18n, i18n => language.adopt(i18n), { immediate: true })
+const currentLanguage = computed(() => language.locales.value.find(l => l.code === language.current.value) ?? null)
+async function chooseLanguage(code: string) {
+    try {
+        await language.choose(code)
+    } catch (caught) {
+        useVectorNotifications().error(t('shell.languageFailed', { error: vectorErrorMessage(caught) }))
+        // refused — say, switched off since this menu was loaded: the descriptor says what is on offer now
+        await load(true).catch(() => undefined)
+    }
+}
+
+useHead({ titleTemplate: title => title ? t('shell.titleTemplate', { title, brand: branding.value.title }) : branding.value.title })
+
+// Menu badges: counted after the shell renders, again every minute while
+// the tab is visible, and after each navigation (an edit may change them).
+const api = useVectorApi()
+const route = useRoute()
+const badges = ref<Record<string, { count: number, color: string, label: string | null }>>({})
+async function loadBadges() {
+    if (!import.meta.client || document.hidden) return
+    try {
+        badges.value = (await api<{ data: typeof badges.value }>('/vector/badges')).data
+    } catch {
+        // a badge is a hint; the menu works without one
+    }
+}
+if (import.meta.client) {
+    onMounted(loadBadges)
+    useIntervalFn(loadBadges, 60_000)
+    watch(() => route.path, loadBadges)
+}
+const badgeOf = (slug: string) => (badges.value[slug]?.count ?? 0) > 0 ? badges.value[slug] : undefined
+
+function toggleTheme() {
+    theme.toggle()
+}
+
+const runtime = useVectorRuntime()
+auth.restore()
+
+const impersonation = useVectorImpersonation()
+// the sentence around the impersonated user's name, split so the name can stay bold
+onMounted(() => impersonation.refresh().catch(() => undefined))
+
+async function stopImpersonating() {
+    try {
+        await impersonation.stop()
+        impersonation.impersonator.value = null
+        await navigateTo(appConfig.vector.basePath || '/')
+    } catch (caught) {
+        useVectorNotifications().error(vectorErrorMessage(caught))
+    }
+}
+
+// nobody at the keyboard for vector.idleMinutes: the session ends, and the login page says why
+useVectorIdle(() => signOut('idle'))
+
+function logout() {
+    return signOut()
+}
+
+/** Ends the session: the application's, by its own logout form, or the bearer one, then the login page. */
+async function signOut(reason?: 'idle') {
+    if (runtime.hosted && runtime.logoutUrl) {
+        // the application ends its own session: a form post carrying its CSRF token
+        const form = document.createElement('form')
+        form.method = 'post'
+        form.action = runtime.logoutUrl
+        const token = document.createElement('input')
+        token.type = 'hidden'
+        token.name = '_token'
+        token.value = runtime.csrfToken ?? ''
+        form.appendChild(token)
+        document.body.appendChild(form)
+        form.submit()
+
+        return
+    }
+
+    await auth.logout() // revokes the refresh token where the application issued one
+    clear()
+    useVectorPreferences().clear()
+    await navigateTo({
+        path: `${appConfig.vector.basePath || ''}/login`,
+        // back to this page after signing in again, and the reason the session ended
+        query: reason === 'idle' ? { reason, redirect: useRoute().fullPath } : {},
+    })
+}
+
+// Custom pages, grouped by their menu section ("Pages" when they name none).
+const pages = useVectorPages()
+const pageGroups = computed(() => {
+    const groups = new Map<string, { name: string, title: string, icon?: string }[]>()
+    for (const [name, page] of Object.entries(pages.value)) {
+        const label = page.group ?? t('shell.nav.pages')
+        groups.set(label, [...(groups.get(label) ?? []), { name, title: page.title, icon: page.icon }])
+    }
+    return [...groups.entries()].map(([label, items]) => ({ label, items }))
+})
+</script>
+
+<template>
+    <v-app>
+        <v-navigation-drawer v-model="drawer">
+            <v-list-item :title="branding.title" :subtitle="t('shell.brandSubtitle')" class="py-3">
+                <template v-if="branding.logoUrl" #prepend>
+                    <v-avatar rounded="0" size="36"><v-img :src="branding.logoUrl" :alt="branding.title" /></v-avatar>
+                </template>
+            </v-list-item>
+            <v-divider />
+            <v-list nav density="compact" role="navigation" :aria-label="t('shell.nav.main')">
+                <v-list-item :to="appConfig.vector.basePath || '/'" prepend-icon="mdi-view-dashboard-outline" :title="t('shell.nav.dashboard')" exact />
+                <v-list-item v-for="dashboard in (schema?.dashboards ?? []).filter(d => d.name !== 'main')" :key="dashboard.name" :to="`${appConfig.vector.basePath}/d/${dashboard.name}`" :prepend-icon="dashboard.icon ?? 'mdi-view-dashboard-outline'" :title="dashboard.label" />
+                <template v-for="group in menu" :key="group.label">
+                    <v-list-subheader>{{ group.label }}</v-list-subheader>
+                    <v-list-item
+                        v-for="resource in group.items"
+                        :key="resource.slug"
+                        :to="`${appConfig.vector.basePath}/r/${resource.slug}`"
+                        :prepend-icon="resource.icon ?? 'mdi-table'"
+                        :title="resource.label"
+                    >
+                        <template v-if="badgeOf(resource.slug)" #append>
+                            <v-chip
+                                size="x-small"
+                                variant="flat"
+                                label
+                                :color="badgeOf(resource.slug)!.color"
+                                :aria-label="t('shell.nav.badge', { count: badgeOf(resource.slug)!.count, label: badgeOf(resource.slug)!.label ?? noun(resource.label) })"
+                            >{{ formatNumber(badgeOf(resource.slug)!.count) }}</v-chip>
+                        </template>
+                    </v-list-item>
+                </template>
+                <template v-for="group in pageGroups" :key="`pages-${group.label}`">
+                    <v-list-subheader>{{ group.label }}</v-list-subheader>
+                    <v-list-item
+                        v-for="page in group.items"
+                        :key="page.name"
+                        :to="`${appConfig.vector.basePath}/p/${page.name}`"
+                        :prepend-icon="page.icon ?? 'mdi-file-document-outline'"
+                        :title="page.title"
+                    />
+                </template>
+                <v-divider class="my-2" />
+                <v-list-item v-if="schema?.capabilities.queue" :to="`${appConfig.vector.basePath}/jobs`" prepend-icon="mdi-progress-clock" :title="t('shell.nav.jobs')" />
+                <v-list-item v-if="schema?.settings.length" :to="`${appConfig.vector.basePath}/settings`" prepend-icon="mdi-cog-outline" :title="t('shell.nav.settings')" />
+            </v-list>
+        </v-navigation-drawer>
+
+        <v-app-bar flat border>
+            <v-app-bar-nav-icon :aria-label="t('shell.toggleNavigation')" @click="drawer = !drawer" />
+            <v-app-bar-title>{{ branding.title }}</v-app-bar-title>
+            <v-spacer />
+            <v-btn v-if="appConfig.vector.commandPalette" variant="text" prepend-icon="mdi-magnify" class="d-none d-sm-flex" @click="palette && (palette.open = true)">
+                {{ t('common.search') }} <kbd class="ms-2 text-caption text-medium-emphasis">⌘K</kbd>
+            </v-btn>
+            <VxInbox />
+            <v-menu v-if="language.locales.value.length > 1">
+                <template #activator="{ props }">
+                    <v-btn v-bind="props" icon="mdi-translate" variant="text" :aria-label="t('shell.language', { name: currentLanguage?.name ?? language.current.value })" />
+                </template>
+                <v-list density="compact" :aria-label="t('shell.language', { name: currentLanguage?.name ?? language.current.value })">
+                    <!-- each in its own name (and script direction), with its name in the current language beneath -->
+                    <v-list-item
+                        v-for="locale in language.locales.value"
+                        :key="locale.code"
+                        :subtitle="languageName(locale.code, language.current.value, locale.name) ?? undefined"
+                        :active="locale.code === language.current.value"
+                        @click="chooseLanguage(locale.code)"
+                    >
+                        <template #title><span :lang="locale.code" :dir="locale.dir">{{ locale.name }}</span></template>
+                    </v-list-item>
+                </v-list>
+            </v-menu>
+            <v-btn icon="mdi-theme-light-dark" variant="text" :aria-label="t('shell.toggleTheme')" @click="toggleTheme" />
+            <v-menu>
+                <template #activator="{ props }">
+                    <v-btn v-bind="props" variant="text" prepend-icon="mdi-account-circle-outline">
+                        {{ auth.user?.name ?? t('shell.account') }}
+                    </v-btn>
+                </template>
+                <v-list density="compact">
+                    <v-list-item :title="t('shell.signOut')" prepend-icon="mdi-logout" @click="logout" />
+                </v-list>
+            </v-menu>
+        </v-app-bar>
+
+        <v-main>
+            <v-alert v-if="impersonation.impersonator.value" type="warning" variant="tonal" density="compact" rounded="0" icon="mdi-account-switch-outline" class="px-6">
+                <i18n-t keypath="shell.impersonation.actingAs" tag="span" scope="global">
+                    <template #name><strong>{{ auth.user?.name ?? t('shell.impersonation.anotherUser') }}</strong></template>
+                </i18n-t>
+                <template #append>
+                    <v-btn size="small" variant="flat" color="warning" @click="stopImpersonating">{{ t('shell.impersonation.stop') }}</v-btn>
+                </template>
+            </v-alert>
+            <v-container fluid class="pa-6">
+                <slot />
+            </v-container>
+        </v-main>
+
+        <v-footer v-if="branding.footerText" app border class="text-caption text-medium-emphasis justify-center">{{ branding.footerText }}</v-footer>
+
+        <VxNotifications />
+        <VxConfirm />
+        <VxCommandPalette v-if="appConfig.vector.commandPalette" ref="palette" />
+    </v-app>
+</template>
+
+<style>
+/* The current breadcrumb is not a link; Vuetify dims it as disabled, which fails AA contrast. */
+.v-breadcrumbs-item--disabled {
+    opacity: var(--v-medium-emphasis-opacity);
+}
+</style>

package/app/middleware/vector-auth.ts

@@ -0,0 +1,16 @@
+export default defineNuxtRouteMiddleware((to) => {
+    const runtime = useVectorRuntime()
+
+    if (runtime.hosted) {
+        return // the application gated the shell page before it was served
+    }
+
+    const auth = useVectorAuthStore()
+    const appConfig = useAppConfig()
+
+    auth.restore()
+
+    if (!auth.isAuthenticated) {
+        return navigateTo({ path: `${appConfig.vector.basePath || ''}/login`, query: { redirect: to.fullPath } })
+    }
+})

package/app/pages/d/[name].vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+definePageMeta({ layout: 'vector', middleware: 'vector-auth', key: route => route.fullPath })
+
+const route = useRoute()
+const { load } = useVectorSchema()
+await load()
+const name = computed(() => String(route.params.name))
+</script>
+
+<template>
+    <VxDashboard :name="name" />
+</template>

package/app/pages/index.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+definePageMeta({ layout: 'vector', middleware: 'vector-auth' })
+
+// The home page: the `main` dashboard when the application declares one.
+// Every resource is in the navigation drawer, so the page repeats none.
+const { t } = useVectorT()
+const { load, schema } = useVectorSchema()
+await load()
+
+const main = computed(() => schema.value?.dashboards.find(d => d.name === 'main') ?? schema.value?.dashboards[0] ?? null)
+
+useHead({ title: () => t('shell.home.title') })
+</script>
+
+<template>
+    <div>
+        <VxDashboard v-if="main" :name="main.name" />
+        <template v-else>
+            <h1 class="text-h4 mb-4">{{ t('shell.home.title') }}</h1>
+        </template>
+    </div>
+</template>

package/app/pages/jobs/[id].vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import type { VectorJob } from '#vector/app/types/vector'
+
+definePageMeta({ layout: 'vector', middleware: 'vector-auth', key: route => route.fullPath })
+
+const route = useRoute()
+const appConfig = useAppConfig()
+const jobs = useVectorJobs()
+const { t } = useVectorT()
+const id = Number(route.params.id)
+const job = ref<VectorJob | null>(null)
+const error = ref<string | null>(null)
+
+const polling = new AbortController()
+onBeforeUnmount(() => polling.abort())
+
+onMounted(async () => {
+    try {
+        await jobs.watch(id, j => (job.value = j), polling.signal)
+    } catch (caught) {
+        if (!polling.signal.aborted) error.value = vectorErrorMessage(caught)
+    }
+})
+
+useHead({ title: () => (job.value ? t('jobs.detail.pageTitle', { id: job.value.id }) : t('jobs.detail.fallbackTitle')) })
+const percent = computed(() => (job.value && job.value.total ? Math.min(100, (job.value.processed / job.value.total) * 100) : null))
+</script>
+
+<template>
+    <div>
+        <v-breadcrumbs class="pa-0 mb-2" :items="[{ title: t('jobs.title'), to: `${appConfig.vector.basePath}/jobs` }, { title: `#${id}` }]" />
+        <v-alert v-if="error" type="error" variant="tonal" :text="error" />
+        <v-card v-else-if="job">
+            <v-card-item>
+                <v-card-title class="text-capitalize">{{ t(`jobs.kind.${job.kind}`) }} · {{ job.name }} <v-chip size="small" class="ms-2" :color="{ queued: 'grey', running: 'info', done: 'success', failed: 'error', stalled: 'warning' }[job.status]" variant="tonal">{{ t(`jobs.status.${job.status}`) }}</v-chip></v-card-title>
+                <v-card-subtitle>{{ job.resource }} · {{ t('jobs.detail.started', { date: formatDateTime(job.createdAt) }) }}<template v-if="job.finishedAt"> · {{ t('jobs.detail.finished', { date: formatDateTime(job.finishedAt) }) }}</template></v-card-subtitle>
+            </v-card-item>
+            <v-card-text>
+                <v-progress-linear :model-value="percent ?? 0" :indeterminate="percent === null && job.status !== 'done' && job.status !== 'failed'" color="primary" height="10" rounded class="mb-2" :aria-label="t('jobs.detail.progress')" />
+                <div class="text-body-2 mb-4">{{ job.total !== null ? t('jobs.detail.processedOfTotal', { processed: job.processed, total: job.total }) : t('jobs.detail.processed', { processed: job.processed }) }}</div>
+                <v-alert v-if="job.failure" type="error" variant="tonal" :text="job.failure" class="mb-4" />
+                <template v-if="job.result">
+                    <div v-for="(value, key) in job.result" :key="key" class="text-body-2"><span class="text-medium-emphasis">{{ key }}:</span> {{ value }}</div>
+                </template>
+            </v-card-text>
+            <v-card-actions v-if="job.hasFile && job.status === 'done'">
+                <v-btn color="primary" prepend-icon="mdi-download-outline" @click="jobs.download(job)">{{ t('jobs.detail.download', { file: job.fileName ?? t('jobs.detail.file') }) }}</v-btn>
+            </v-card-actions>
+        </v-card>
+        <v-skeleton-loader v-else type="article" />
+    </div>
+</template>

package/app/pages/jobs/index.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import type { VectorJob } from '#vector/app/types/vector'
+
+definePageMeta({ layout: 'vector', middleware: 'vector-auth' })
+
+const appConfig = useAppConfig()
+const jobs = useVectorJobs()
+const { t } = useVectorT()
+const { data, refresh } = await useAsyncData('vector.jobs', () => jobs.list())
+const running = computed(() => (data.value ?? []).some(j => j.status === 'queued' || j.status === 'running'))
+const { pause, resume } = useIntervalFn(() => refresh(), 3000, { immediate: false })
+watch(running, r => (r ? resume() : pause()), { immediate: true })
+onUnmounted(pause)
+
+useHead({ title: () => t('jobs.title') })
+
+const color: Record<VectorJob['status'], string> = { queued: 'grey', running: 'info', done: 'success', failed: 'error', stalled: 'warning' }
+</script>
+
+<template>
+    <div>
+        <h1 class="text-h4 mb-4">{{ t('jobs.heading') }}</h1>
+        <v-card>
+            <v-table hover>
+                <thead>
+                    <tr><th>{{ t('jobs.columns.job') }}</th><th>{{ t('jobs.columns.resource') }}</th><th>{{ t('jobs.columns.status') }}</th><th class="text-end">{{ t('jobs.columns.progress') }}</th><th>{{ t('jobs.columns.started') }}</th><th /></tr>
+                </thead>
+                <tbody>
+                    <tr v-for="job in data ?? []" :key="job.id" style="cursor: pointer" @click="navigateTo(`${appConfig.vector.basePath}/jobs/${job.id}`)">
+                        <td><span class="text-capitalize">{{ t(`jobs.kind.${job.kind}`) }}</span> <span class="text-medium-emphasis">{{ job.name }}</span></td>
+                        <td>{{ job.resource }}</td>
+                        <td><v-chip size="small" :color="color[job.status]" variant="tonal">{{ t(`jobs.status.${job.status}`) }}</v-chip></td>
+                        <td class="text-end">{{ job.processed }}<template v-if="job.total !== null"> / {{ job.total }}</template></td>
+                        <td>{{ formatDateTime(job.createdAt) }}</td>
+                        <td class="text-end"><v-btn v-if="job.hasFile && job.status === 'done'" size="small" variant="text" icon="mdi-download-outline" :aria-label="t('common.download')" @click.stop="jobs.download(job)" /></td>
+                    </tr>
+                    <tr v-if="(data ?? []).length === 0"><td colspan="6" class="text-medium-emphasis">{{ t('jobs.empty') }}</td></tr>
+                </tbody>
+            </v-table>
+        </v-card>
+    </div>
+</template>

package/app/pages/login.vue

@@ -0,0 +1,109 @@
+<script setup lang="ts">
+import type { SubmitEventPromise } from 'vuetify'
+
+definePageMeta({ layout: 'default' })
+
+const appConfig = useAppConfig()
+const auth = useVectorAuthStore()
+const route = useRoute()
+const notifications = useVectorNotifications()
+const { t } = useVectorT()
+
+const email = ref('')
+const password = ref('')
+const submitting = ref(false)
+const error = ref<string | null>(null)
+// why the last session ended, when the admin ended it itself
+const notice = computed(() => route.query.reason === 'idle' ? t('shell.login.signedOutIdle', { minutes: appConfig.vector.idleMinutes }) : null)
+
+const rules = {
+    required: (value: string) => value.trim() !== '' || t('common.required'),
+    email: (value: string) => /.+@.+\..+/.test(value) || t('shell.login.invalidEmail'),
+}
+
+const runtime = useVectorRuntime()
+useHead({ title: () => t('shell.login.pageTitle', { brand: appConfig.vector.brand.title }) })
+
+if (runtime.hosted && runtime.loginUrl && import.meta.client) {
+    window.location.assign(runtime.loginUrl) // the application owns sign-in in hosted mode
+}
+
+auth.restore()
+
+if (auth.isAuthenticated) {
+    await navigateTo(appConfig.vector.basePath || '/', { replace: true })
+}
+
+async function submit(event: SubmitEventPromise) {
+    const { valid } = await event
+
+    if (!valid) {
+        return
+    }
+
+    submitting.value = true
+    error.value = null
+
+    try {
+        await auth.login(email.value, password.value)
+
+        // The credentials can be right for an account the admin refuses (no
+        // access, 403): the descriptor is the first thing the admin needs, so
+        // it is loaded here, for this identity, and a refusal ends the sign-in
+        // with the server's reason instead of a welcome.
+        try {
+            await useVectorSchema().load(true)
+        } catch (refused) {
+            await auth.logout()
+            throw refused
+        }
+
+        notifications.success(t('shell.login.welcome', { name: auth.user?.name ?? email.value }))
+
+        // only a path of this app: `//host`, `/\host` and anything with a scheme are not places to go back to
+        const wanted = typeof route.query.redirect === 'string' ? route.query.redirect : ''
+        const redirect = /^\/(?![/\\])/.test(wanted) ? wanted : (appConfig.vector.basePath || '/')
+        await navigateTo(redirect, { replace: true })
+    } catch (caught) {
+        error.value = vectorErrorMessage(caught)
+    } finally {
+        submitting.value = false
+    }
+}
+</script>
+
+<template>
+    <v-container class="fill-height" fluid>
+        <v-row justify="center" align="center">
+            <v-col cols="12" sm="8" md="4">
+                <v-card class="pa-4">
+                    <v-card-title class="text-h5">{{ appConfig.vector.brand.title }}</v-card-title>
+                    <v-card-subtitle>{{ t('shell.login.subtitle') }}</v-card-subtitle>
+                    <v-card-text>
+                        <v-form validate-on="blur lazy" @submit.prevent="submit">
+                            <v-text-field
+                                v-model="email"
+                                :label="t('shell.login.email')"
+                                type="email"
+                                autocomplete="username"
+                                :rules="[rules.required, rules.email]"
+                                prepend-inner-icon="mdi-email-outline"
+                            />
+                            <v-text-field
+                                v-model="password"
+                                :label="t('shell.login.password')"
+                                type="password"
+                                autocomplete="current-password"
+                                :rules="[rules.required]"
+                                prepend-inner-icon="mdi-lock-outline"
+                            />
+                            <v-alert v-if="notice && !error" type="info" variant="tonal" class="mb-4" :text="notice" />
+                            <v-alert v-if="error" type="error" variant="tonal" class="mb-4" :text="error" />
+                            <v-btn type="submit" color="primary" block :loading="submitting">{{ t('shell.login.submit') }}</v-btn>
+                        </v-form>
+                    </v-card-text>
+                </v-card>
+            </v-col>
+        </v-row>
+    </v-container>
+</template>

package/app/pages/p/[name].vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+definePageMeta({ layout: 'vector', middleware: 'vector-auth', key: route => route.fullPath })
+
+// A custom page: the component a runtime extension or the application
+// registered under this name, handed the admin's API client so it can
+// call the application's own endpoints with the admin's credentials.
+const route = useRoute()
+const { t } = useVectorT()
+const pages = useVectorPages()
+const { ready } = useVectorExtensions()
+const appConfig = useAppConfig()
+const api = useVectorApi()
+const notifications = useVectorNotifications()
+
+const name = computed(() => String(route.params.name))
+const page = computed(() => pages.value[name.value] ?? null)
+const component = computed(() => (typeof page.value?.component === 'string' ? resolveComponent(page.value.component) : page.value?.component))
+const context = {
+    api,
+    notify: { success: (m: string) => notifications.success(m), error: (m: string) => notifications.error(m) },
+    navigate: (path: string) => navigateTo(`${appConfig.vector.basePath}${path}`),
+}
+
+useHead({ title: () => page.value?.title ?? t('shell.page.unknown') })
+</script>
+
+<template>
+    <div v-if="page">
+        <h1 class="text-h4 mb-4 d-flex align-center ga-2">
+            <v-icon v-if="page.icon" :icon="page.icon" />
+            {{ page.title }}
+        </h1>
+        <component :is="component" :vector="context" />
+    </div>
+    <v-progress-linear v-else-if="!ready" indeterminate :aria-label="t('shell.page.loading')" />
+    <v-empty-state v-else icon="mdi-help-circle-outline" :title="t('shell.page.unknown')" />
+</template>

package/app/pages/r/[resource]/[id]/edit.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import type { VectorRecord } from '#vector/app/types/vector'
+import type { SaveVariant } from '#vector/app/components/Vx/Resource/Form.vue'
+
+definePageMeta({ layout: 'vector', middleware: 'vector-auth', key: route => route.fullPath })
+
+const { t } = useVectorT()
+const route = useRoute()
+const appConfig = useAppConfig()
+const { load, resource: find } = useVectorSchema()
+await load()
+
+const slug = computed(() => String(route.params.resource))
+const id = computed(() => String(route.params.id))
+const resource = computed(() => find(slug.value))
+const client = useVectorResource(slug)
+const base = computed(() => `${appConfig.vector.basePath}/r/${slug.value}`)
+
+const { data: response, status, error, refresh } = await useAsyncData(() => `vector.${slug.value}.${id.value}.edit`, () => client.show(id.value))
+
+const title = computed(() => {
+    const value = response.value?.data?.[resource.value?.titleField ?? 'id']
+    return value === undefined || value === null ? `#${id.value}` : String(value)
+})
+
+useHead({ title: () => resource.value ? `${t('record.editTitle', { title: title.value })} · ${resource.value.label}` : '' })
+
+const form = ref<{ dirty: boolean, reset: () => void } | null>(null)
+useLeaveGuard(() => form.value?.dirty === true)
+// a new form after "save and continue": the record, and its version, as saved
+const generation = ref(0)
+
+async function saved(record: VectorRecord, variant: SaveVariant) {
+    if (variant === 'continue') {
+        await refresh()
+        generation.value++
+        return
+    }
+
+    navigateTo(`${base.value}/${encodeURIComponent(String(record.id))}`)
+}
+</script>
+
+<template>
+    <div v-if="resource">
+        <v-breadcrumbs class="pa-0 mb-2" :items="[{ title: resource.label, to: base }, { title, to: `${base}/${id}` }, { title: t('common.edit') }]" />
+        <h1 class="text-h4 mb-4">{{ t('record.editTitle', { title }) }}</h1>
+        <v-skeleton-loader v-if="status === 'pending'" type="article" />
+        <v-alert v-else-if="error" type="error" variant="tonal" :text="vectorErrorMessage(error)" />
+        <v-alert v-else-if="response && !response.permissions.update" type="warning" variant="tonal" :text="t('record.editNotAllowed')" />
+        <VxResourceForm v-else-if="response" :key="generation" ref="form" :resource="resource" operation="update" :record="response.data" variants @saved="saved" @cancel="navigateTo(`${base}/${id}`)" />
+    </div>
+    <v-empty-state v-else icon="mdi-help-circle-outline" :title="t('record.unknownResource')" />
+</template>