@kinetis/vector-ui 0.0.0-stage → 0.9.0

package/app/components/Vx/Input/Text.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { VectorField } from '#vector/app/types/vector'
+
+const props = defineProps<{ field: VectorField, rules: ((v: unknown) => true | string)[], errorMessages: string[], record?: Record<string, unknown>, resource?: string }>()
+const model = defineModel<string | null>()
+const type = computed(() => ({ email: 'email', url: 'url', password: 'password' } as Record<string, string>)[props.field.type] ?? 'text')
+</script>
+
+<template>
+    <v-text-field
+        v-model="model"
+        :label="field.label"
+        :type="type"
+        :rules="rules"
+        :error-messages="errorMessages"
+        :hint="field.help ?? undefined"
+        :persistent-hint="!!field.help"
+        :clearable="field.nullable === true"
+        :prepend-inner-icon="field.type === 'color' ? 'mdi-palette' : undefined"
+    />
+</template>

package/app/components/Vx/Input/Textarea.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { VectorField } from '#vector/app/types/vector'
+
+const props = defineProps<{ field: VectorField, rules: ((v: unknown) => true | string)[], errorMessages: string[], record?: Record<string, unknown>, resource?: string }>()
+const model = defineModel<string | null>()
+</script>
+
+<template>
+    <v-textarea
+        v-model="model"
+        :label="field.label"
+        :rules="rules"
+        :error-messages="errorMessages"
+        :hint="field.help ?? undefined"
+        :persistent-hint="!!field.help"
+        :class="{ 'font-monospace': props.field.type === 'json' }"
+        auto-grow
+        rows="3"
+    />
+</template>

package/app/components/Vx/Input/Upload.vue

@@ -0,0 +1,89 @@
+<script setup lang="ts">
+import type { VectorField, VectorUploaded } from '#vector/app/types/vector'
+
+// A file or image field: pick a file, it uploads at once, and the field
+// takes the key the server issued. The server detects the format from the
+// bytes and enforces the size; accept and the size here only guide the
+// picker. Without upload support the key is edited as text.
+const props = defineProps<{ field: VectorField, rules: ((v: unknown) => true | string)[], errorMessages: string[], record?: Record<string, unknown>, resource?: string }>()
+const model = defineModel<string | null>()
+
+const { t } = useVectorT()
+const { schema, resource: find } = useVectorSchema()
+const client = useVectorResource(() => props.resource ?? '')
+const owner = computed(() => find(props.resource ?? ''))
+// The rules read the field's value (the key), not the picked file.
+const keyRules = computed(() => props.rules.map(rule => () => rule(model.value)))
+const uploads = computed(() => schema.value?.capabilities.uploads === true)
+const fieldProps = computed(() => (Array.isArray(props.field.props) ? {} : props.field.props) as { accept?: Record<string, string>, maxBytes?: number })
+const accept = computed(() => Object.keys(fieldProps.value.accept ?? {}).join(','))
+const formats = computed(() => [...new Set(Object.values(fieldProps.value.accept ?? {}))].join(', '))
+const maxMb = computed(() => fieldProps.value.maxBytes ? Math.round(fieldProps.value.maxBytes / 100_000) / 10 : null)
+const image = computed(() => props.field.type === 'image')
+
+const uploading = ref(false)
+const uploadError = ref<string | null>(null)
+const picked = ref<VectorUploaded | null>(null)
+const preview = ref<string | null>(null)
+const stored = computed(() => typeof props.record?.[props.field.name] === 'string' ? props.record![props.field.name] as string : null)
+
+async function choose(files: File | File[] | null) {
+    const file = Array.isArray(files) ? files[0] : files
+    if (!file) return
+    uploadError.value = null
+
+    if (fieldProps.value.maxBytes && file.size > fieldProps.value.maxBytes) {
+        uploadError.value = t('fields.upload.tooLarge', { size: maxMb.value })
+        return
+    }
+
+    uploading.value = true
+    try {
+        picked.value = await client.upload(props.field.name, file)
+        model.value = picked.value.key
+        preview.value = image.value ? await dataUrl(file) : null
+    } catch (error) {
+        const failure = error as { data?: { errors?: { message: string }[] } } | null
+        uploadError.value = failure?.data?.errors?.[0]?.message ? t('fields.upload.rejected', { message: failure.data.errors[0].message }) : vectorErrorMessage(error)
+    } finally {
+        uploading.value = false
+    }
+}
+
+function clear() {
+    model.value = null
+    picked.value = null
+    preview.value = null
+}
+
+</script>
+
+<template>
+    <v-text-field
+        v-if="!uploads"
+        v-model="model"
+        :label="field.label"
+        :rules="rules"
+        :error-messages="errorMessages"
+        :hint="field.help ?? t('fields.upload.storageKey')"
+        persistent-hint
+        :clearable="field.nullable === true"
+    />
+    <div v-else class="d-flex align-center ga-3">
+        <v-img v-if="preview" :src="preview" width="56" height="56" cover class="rounded flex-grow-0" :alt="t('fields.upload.preview', { label: field.label })" />
+        <VxCell v-else-if="model && model === stored && record && owner" :field="field" :value="model" :record="record" :resource="owner" context="index" />
+        <v-file-input
+            :label="field.label"
+            :accept="accept || undefined"
+            :loading="uploading"
+            :rules="keyRules"
+            :error-messages="uploadError ? [uploadError, ...errorMessages] : errorMessages"
+            :hint="picked ? t('fields.upload.uploaded', { name: picked.name ?? t('fields.upload.theFile'), size: Math.max(1, Math.round(picked.size / 1000)) }) : (field.help ?? [formats, maxMb ? t('fields.upload.upTo', { size: maxMb }) : ''].filter(Boolean).join(' · '))"
+            persistent-hint
+            :prepend-icon="image ? 'mdi-image-outline' : 'mdi-paperclip'"
+            :clearable="false"
+            @update:model-value="choose"
+        />
+        <v-btn v-if="model && field.nullable === true" icon="mdi-close" variant="text" size="small" :aria-label="t('fields.upload.remove', { label: field.label })" @click="clear" />
+    </div>
+</template>

package/app/components/Vx/Layout.vue

@@ -0,0 +1,111 @@
+<script setup lang="ts">
+import type { VectorLayoutNode } from '#vector/app/types/vector'
+
+// A resource's layout (sections, tabs, column spans) around the fields
+// the owner renders through the `field` slot: the record form's inputs,
+// the show page's values. Layout only groups — it never decides what is
+// edited or shown; `shown` does, per field. A section or tab none of
+// whose fields is shown is not drawn. A field with an error opens the
+// section holding it and activates its tab, which carries a badge.
+const props = withDefaults(defineProps<{
+    nodes: VectorLayoutNode[]
+    /** The grid columns at this level. */
+    columns?: number
+    shown: (name: string) => boolean
+    /** Names of the fields holding an error. */
+    errors?: string[]
+    /** A field's width when its node does not say. */
+    defaultSpan: (name: string) => 1 | 2 | 'full'
+}>(), { columns: 2, errors: () => [] })
+
+// the slot prop is `field`, not `name`: on <slot>, `name` picks which slot renders
+defineSlots<{ field(props: { field: string }): unknown }>()
+
+function names(node: VectorLayoutNode): string[] {
+    return node.kind === 'field' ? [node.name!] : (node.children ?? []).flatMap(names)
+}
+
+const visible = (node: VectorLayoutNode) => names(node).some(name => props.shown(name))
+const hasError = (node: VectorLayoutNode) => names(node).some(name => props.errors.includes(name))
+const visibleNodes = computed(() => props.nodes.map((node, index) => ({ node, key: String(index) })).filter(({ node }) => visible(node)))
+
+/** The md width of a field node on this level's grid. */
+function width(node: VectorLayoutNode): number {
+    const span = node.span ?? props.defaultSpan(node.name!)
+    if (span === 'full') return 12
+    return Math.round((12 * Math.min(span, props.columns)) / props.columns)
+}
+
+// Sections open unless declared collapsed; tabs start on their first visible tab.
+const open = reactive<Record<string, boolean>>(Object.fromEntries(props.nodes.map((node, i) => [String(i), !node.collapsed])))
+const active = reactive<Record<string, string | undefined>>({})
+const tabsOf = (node: VectorLayoutNode) => (node.children ?? []).filter(visible)
+
+// An error inside a closed section opens it; one in another tab switches to it.
+watch(() => props.errors, () => {
+    for (const { node, key } of visibleNodes.value) {
+        if (node.kind === 'section' && hasError(node)) open[key] = true
+
+        if (node.kind === 'tabs') {
+            const tabs = tabsOf(node)
+            const current = tabs.find(tab => tab.label === (active[key] ?? tabs[0]?.label))
+            const failing = tabs.find(hasError)
+            if (failing && (!current || !hasError(current))) active[key] = failing.label ?? undefined
+        }
+    }
+}, { deep: true, immediate: true })
+</script>
+
+<template>
+    <v-row density="compact">
+        <template v-for="{ node, key } in visibleNodes" :key="key">
+            <v-col v-if="node.kind === 'field'" cols="12" :md="width(node)" :data-layout-field="node.name">
+                <slot name="field" :field="node.name!" />
+            </v-col>
+
+            <v-col v-else-if="node.kind === 'section'" cols="12" class="vx-layout-section" :data-layout-section="node.label">
+                <v-expansion-panels v-if="node.collapsible" :model-value="open[key] ? [0] : []" variant="accordion" @update:model-value="(v: unknown) => open[key] = Array.isArray(v) && v.length > 0">
+                    <v-expansion-panel :value="0">
+                        <v-expansion-panel-title>
+                            <span class="font-weight-medium">{{ node.label }}</span>
+                            <v-icon v-if="hasError(node)" icon="mdi-alert-circle" color="error" size="small" class="ms-2" />
+                        </v-expansion-panel-title>
+                        <v-expansion-panel-text eager>
+                            <p v-if="node.description" class="text-body-2 text-medium-emphasis mb-4">{{ node.description }}</p>
+                            <VxLayout :nodes="node.children ?? []" :columns="node.columns ?? 2" :shown="shown" :errors="errors" :default-span="defaultSpan">
+                                <template #field="{ field }"><slot name="field" :field="field" /></template>
+                            </VxLayout>
+                        </v-expansion-panel-text>
+                    </v-expansion-panel>
+                </v-expansion-panels>
+                <template v-else>
+                    <div class="text-subtitle-1 font-weight-medium mt-2" :class="node.description ? 'mb-1' : 'mb-4'">{{ node.label }}</div>
+                    <p v-if="node.description" class="text-body-2 text-medium-emphasis mb-4">{{ node.description }}</p>
+                    <VxLayout :nodes="node.children ?? []" :columns="node.columns ?? 2" :shown="shown" :errors="errors" :default-span="defaultSpan">
+                        <template #field="{ field }"><slot name="field" :field="field" /></template>
+                    </VxLayout>
+                </template>
+            </v-col>
+
+            <v-col v-else-if="node.kind === 'tabs'" cols="12" class="vx-layout-tabs">
+                <div v-if="node.label" class="text-subtitle-1 font-weight-medium mt-2">{{ node.label }}</div>
+                <v-tabs :model-value="active[key] ?? tabsOf(node)[0]?.label ?? undefined" density="compact" color="primary" @update:model-value="(v: unknown) => active[key] = String(v)">
+                    <v-tab v-for="tab in tabsOf(node)" :key="tab.label ?? ''" :value="tab.label" :data-layout-tab="tab.label">
+                        {{ tab.label }}
+                        <v-badge v-if="hasError(tab)" dot inline color="error" class="ms-1" />
+                    </v-tab>
+                </v-tabs>
+                <v-divider class="mb-2" />
+                <!-- eager: an inactive tab's inputs stay mounted, so the form validates and keeps them -->
+                <v-tabs-window :model-value="active[key] ?? tabsOf(node)[0]?.label ?? undefined">
+                    <!-- padded: the window clips its content, and an outlined field's label sits above its border -->
+                    <v-tabs-window-item v-for="tab in tabsOf(node)" :key="tab.label ?? ''" :value="tab.label" eager class="pt-3">
+                        <VxLayout :nodes="tab.children ?? []" :columns="tab.columns ?? 2" :shown="shown" :errors="errors" :default-span="defaultSpan">
+                            <template #field="{ field }"><slot name="field" :field="field" /></template>
+                        </VxLayout>
+                    </v-tabs-window-item>
+                </v-tabs-window>
+            </v-col>
+        </template>
+    </v-row>
+</template>

package/app/components/Vx/List/BulkBar.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import type { VectorAction, VectorResource } from '#vector/app/types/vector'
+
+// What a selection can do: the built-in edit, delete, restore and
+// force-delete of the resource and every index action. "All matching" widens the
+// selection from the checked rows to every record the list matches.
+defineProps<{
+    resource: VectorResource
+    selected: number
+    total: number
+    allMatching: boolean
+    trashedOnly: boolean
+    actions: VectorAction[]
+}>()
+
+const emit = defineEmits<{
+    'update:allMatching': [value: boolean]
+    clear: []
+    operation: [op: 'delete' | 'restore' | 'forceDelete']
+    action: [action: VectorAction]
+    edit: []
+}>()
+
+const { t } = useVectorT()
+</script>
+
+<template>
+    <v-sheet color="primary" rounded class="d-flex align-center flex-wrap ga-2 px-4 py-2 mb-2">
+        <span class="font-weight-medium">{{ allMatching ? t('list.bulk.allMatching', { total }) : t('list.bulk.selected', { count: selected }) }}</span>
+        <v-btn v-if="!allMatching && total > selected" size="small" variant="outlined" @click="emit('update:allMatching', true)">{{ t('list.bulk.selectAllMatching', { total }) }}</v-btn>
+        <v-btn v-else-if="allMatching" size="small" variant="outlined" @click="emit('update:allMatching', false)">{{ t('list.bulk.onlyChecked') }}</v-btn>
+        <v-spacer />
+        <template v-if="resource.softDelete && trashedOnly">
+            <v-btn size="small" variant="flat" color="white" prepend-icon="mdi-restore" @click="emit('operation', 'restore')">{{ t('common.restore') }}</v-btn>
+            <v-btn size="small" variant="flat" color="error" prepend-icon="mdi-delete-forever-outline" @click="emit('operation', 'forceDelete')">{{ t('common.deleteForever') }}</v-btn>
+        </template>
+        <template v-else>
+            <v-btn v-if="resource.permissions.update" size="small" variant="flat" color="white" prepend-icon="mdi-pencil-box-multiple-outline" @click="emit('edit')">{{ t('common.edit') }}</v-btn>
+            <v-btn v-if="resource.permissions.delete" size="small" variant="flat" color="white" prepend-icon="mdi-delete-outline" @click="emit('operation', 'delete')">{{ t('common.delete') }}</v-btn>
+        </template>
+        <v-btn v-for="action in actions" :key="action.name" size="small" variant="flat" color="white" :prepend-icon="action.icon ?? undefined" @click="emit('action', action)">{{ action.label }}</v-btn>
+        <v-btn size="small" variant="text" icon="mdi-close" :aria-label="t('list.bulk.clearSelection')" @click="emit('clear')" />
+    </v-sheet>
+</template>

package/app/components/Vx/List/BulkEdit.vue

@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import type { SubmitEventPromise } from 'vuetify'
+import type { VectorResource, VectorSelection } from '#vector/app/types/vector'
+
+// Writes the same values to every selected record: the user picks which
+// fields to change, fills them in, and the server validates once and
+// writes all records in one transaction, or none.
+const props = defineProps<{
+    resource: VectorResource
+    selection: VectorSelection
+    count: number
+}>()
+
+const emit = defineEmits<{ done: [affected: number], cancel: [] }>()
+
+const { t, noun } = useVectorT()
+const notifications = useVectorNotifications()
+const client = useVectorResource(() => props.resource.slug)
+const { editable } = useVectorInputs()
+
+const editableFields = computed(() => props.resource.fields.filter(f => editable(f, 'update') && f.type !== 'password' && f.type !== 'hasMany'))
+const chosen = ref<string[]>([])
+const fields = computed(() => editableFields.value.filter(f => chosen.value.includes(f.name)))
+const values = reactive<Record<string, unknown>>({})
+const serverErrors = reactive<Record<string, string[]>>({})
+const formError = ref<string | null>(null)
+const running = ref(false)
+
+watch(chosen, (names) => {
+    for (const field of editableFields.value) {
+        if (names.includes(field.name) && !(field.name in values)) values[field.name] = initialValue(field)
+        if (!names.includes(field.name)) delete values[field.name]
+    }
+})
+
+const subject = computed(() => props.selection.all
+    ? t('list.bulkEdit.everyMatching', { noun: noun(props.resource.labelSingular), count: props.count })
+    : t('list.bulkEdit.some', { count: props.count, noun: noun(props.count === 1 ? props.resource.labelSingular : props.resource.label) }))
+
+async function save(event: SubmitEventPromise) {
+    const { valid } = await event
+    if (!valid || !chosen.value.length) return
+
+    running.value = true
+    formError.value = null
+    for (const key of Object.keys(serverErrors)) delete serverErrors[key]
+
+    try {
+        const { affected } = await client.batch('update', props.selection, { ...values })
+        notifications.success(t('list.bulkEdit.updated', { count: affected, noun: noun(affected === 1 ? props.resource.labelSingular : props.resource.label) }))
+        emit('done', affected)
+    } catch (error) {
+        formError.value = applyViolations(error, values, serverErrors)
+    } finally {
+        running.value = false
+    }
+}
+</script>
+
+<template>
+    <v-dialog :model-value="true" max-width="640" persistent @update:model-value="emit('cancel')">
+        <v-form validate-on="blur lazy" @submit.prevent="save">
+            <v-card>
+                <v-card-title class="d-flex align-center ga-2">
+                    <v-icon icon="mdi-pencil-box-multiple-outline" />
+                    {{ t('list.bulkEdit.title', { subject }) }}
+                </v-card-title>
+                <v-card-text>
+                    <v-alert v-if="formError" type="error" variant="tonal" class="mb-4" :text="formError" />
+                    <v-select
+                        v-model="chosen"
+                        :items="editableFields.map(f => ({ title: f.label, value: f.name }))"
+                        :label="t('list.bulkEdit.fieldsToChange')"
+                        multiple
+                        chips
+                        closable-chips
+                        :hint="t('list.bulkEdit.fieldsHint')"
+                        persistent-hint
+                        class="mb-4"
+                    />
+                    <VxFieldsForm v-if="fields.length" :fields="fields" :values="values" :server-errors="serverErrors" :resource="resource.slug" @clear="(name: string) => delete serverErrors[name]" />
+                </v-card-text>
+                <v-card-actions>
+                    <v-spacer />
+                    <v-btn variant="text" :disabled="running" @click="emit('cancel')">{{ t('common.cancel') }}</v-btn>
+                    <v-btn type="submit" color="primary" :loading="running" :disabled="!chosen.length">{{ t('list.bulkEdit.applyTo', { count }) }}</v-btn>
+                </v-card-actions>
+            </v-card>
+        </v-form>
+    </v-dialog>
+</template>

package/app/components/Vx/List/ColumnManager.vue

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import type { VectorResource } from '#vector/app/types/vector'
+
+// Which index columns show, and in what order. Persisted per user and
+// resource through the preferences store.
+const props = defineProps<{ resource: VectorResource }>()
+const model = defineModel<string[]>({ required: true })
+
+const { t } = useVectorT()
+const open = ref(false)
+const draft = ref<string[]>([])
+const available = computed(() => props.resource.table.columns)
+
+function start() {
+    draft.value = [...model.value.filter(c => available.value.includes(c)), ...available.value.filter(c => !model.value.includes(c))]
+    open.value = true
+}
+
+const visible = (name: string) => model.value.includes(name)
+const shown = ref<Record<string, boolean>>({})
+
+watch(open, (o) => {
+    if (o) shown.value = Object.fromEntries(available.value.map(c => [c, visible(c)]))
+})
+
+function move(index: number, delta: number) {
+    const target = index + delta
+    if (target < 0 || target >= draft.value.length) return
+    const next = [...draft.value]
+    const [item] = next.splice(index, 1)
+    next.splice(target, 0, item!)
+    draft.value = next
+}
+
+function apply() {
+    const chosen = draft.value.filter(c => shown.value[c])
+    model.value = chosen.length ? chosen : [available.value[0]!]
+    open.value = false
+}
+
+function reset() {
+    model.value = [...available.value]
+    open.value = false
+}
+
+const label = (name: string) => props.resource.fields.find(f => f.name === name)?.label ?? name
+</script>
+
+<template>
+    <v-btn size="small" variant="text" icon="mdi-table-column-plus-after" :aria-label="t('list.columns.title')" @click="start" />
+    <v-dialog v-model="open" max-width="420">
+        <v-card :title="t('list.columns.title')">
+            <v-card-text>
+                <v-list density="compact">
+                    <v-list-item v-for="(name, index) in draft" :key="name" :title="label(name)">
+                        <template #prepend>
+                            <v-checkbox-btn v-model="shown[name]" />
+                        </template>
+                        <template #append>
+                            <v-btn icon="mdi-chevron-up" size="x-small" variant="text" :disabled="index === 0" :aria-label="t('list.columns.moveUp')" @click="move(index, -1)" />
+                            <v-btn icon="mdi-chevron-down" size="x-small" variant="text" :disabled="index === draft.length - 1" :aria-label="t('list.columns.moveDown')" @click="move(index, 1)" />
+                        </template>
+                    </v-list-item>
+                </v-list>
+            </v-card-text>
+            <v-card-actions>
+                <v-btn variant="text" @click="reset">{{ t('list.columns.reset') }}</v-btn>
+                <v-spacer />
+                <v-btn variant="text" @click="open = false">{{ t('common.cancel') }}</v-btn>
+                <v-btn color="primary" @click="apply">{{ t('common.apply') }}</v-btn>
+            </v-card-actions>
+        </v-card>
+    </v-dialog>
+</template>