@michaelthielemann/kestrel 4.1.3 → 5.0.0

package/layers/ui/app/components/field/Layout.vue

@@ -1,138 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-import FieldRenderer from './Renderer.vue'
-import FieldDeadRefNote from './DeadRefNote.vue'
-import { isFieldVisible } from '@michaelthielemann/kestrel-core/client'
-import type { FieldDef, LayoutNode, LayoutTrack, Localized } from '@michaelthielemann/kestrel-core'
-import { resolveLocalized } from '../../utils/localized'
-// The ONE shared field-list renderer, reused by every field-list surface (collection page fields, block
-// fields, repeater sub-fields). A FRAGMENT (no wrapper root) so its rows/groups drop straight into the
-// caller's existing gapped flex column — the per-context vertical rhythm is preserved. Imports are
-// explicit (not auto-imported) because this component also renders inside Repeater, which is exercised
-// by the auto-import-free `dom` test runner.
-const props = defineProps<{
-  layout?: LayoutNode[]
-  fields: Record<string, FieldDef>
-  values: Record<string, unknown>
-  errors?: Record<string, string>
-  /** Field keys holding a stale reference — shown as a non-blocking note under the field. Omit to disable. */
-  deadFields?: Set<string>
-  locale: string
-  disabled?: boolean
-}>()
-const emit = defineEmits<{ update: [name: string, value: unknown] }>()
-const { lang } = useT()
-
-// No author layout → the historical one-field-per-row flow, expressed as single-field full-width rows, so
-// both cases flow through a single render path.
-const nodes = computed<LayoutNode[]>(() =>
-  props.layout ?? Object.keys(props.fields).map((f) => ({ kind: 'row', fields: [f], tracks: [1] })),
-)
-
-// A render-ready row: only the cells that are present + visible, with the grid columns rebuilt from just
-// their tracks. A field hidden by its `condition` must collapse its grid TRACK — otherwise the resolved
-// row would still reserve it and the surviving cells auto-place into the wrong columns. This is the ONE
-// place that turns the engine's neutral tracks (weight numbers / length strings) into CSS-grid columns.
-interface RenderRow { fields: string[]; cols: string }
-type RenderNode = { kind: 'row'; row: RenderRow } | { kind: 'group'; label: Localized; rows: RenderRow[] }
-
-const isVisible = (name: string) => !!props.fields[name] && isFieldVisible(props.fields[name]!, props.values)
-const trackToCss = (t: LayoutTrack): string => (typeof t === 'number' ? `${t}fr` : t)
-
-function pruneRow(fields: string[], tracks: LayoutTrack[] = []): RenderRow {
-  const kept: string[] = []
-  const cols: string[] = []
-  fields.forEach((name, i) => {
-    if (isVisible(name)) { kept.push(name); cols.push(trackToCss(tracks[i] ?? 1)) }
-  })
-  return { fields: kept, cols: cols.join(' ') || '1fr' }
-}
-
-const renderNodes = computed<RenderNode[]>(() =>
-  nodes.value.map((node) =>
-    node.kind === 'group'
-      ? { kind: 'group', label: node.label, rows: node.rows.map((r) => pruneRow(r.fields, r.tracks)) }
-      : { kind: 'row', row: pruneRow(node.fields, node.tracks) },
-  ),
-)
-</script>
-
-<template>
-  <template v-for="(node, i) in renderNodes" :key="i">
-    <!-- Named group: a labelled fieldset wrapping its stacked rows (one level deep). -->
-    <fieldset v-if="node.kind === 'group'" class="ui-field-group">
-      <legend class="ui-field-group__legend">{{ resolveLocalized(node.label, lang) }}</legend>
-      <div
-        v-for="(row, r) in node.rows"
-        :key="r"
-        class="ui-field-row"
-        :style="{ '--ui-field-cols': row.cols }"
-      >
-        <div v-for="fname in row.fields" :key="fname" class="ui-field-cell">
-          <FieldRenderer
-            :field="fields[fname]!"
-            :name="fname"
-            :locale="locale"
-            :disabled="disabled"
-            :error="errors?.[fname] || null"
-            :model-value="values[fname]"
-            @update:model-value="(v) => emit('update', fname, v)"
-          />
-          <FieldDeadRefNote v-if="deadFields" :show="deadFields.has(fname)" />
-        </div>
-      </div>
-    </fieldset>
-
-    <!-- Plain row: the same grid + cell markup as a group's row, just without the fieldset wrapper. -->
-    <div v-else class="ui-field-row" :style="{ '--ui-field-cols': node.row.cols }">
-      <div v-for="fname in node.row.fields" :key="fname" class="ui-field-cell">
-        <FieldRenderer
-          :field="fields[fname]!"
-          :name="fname"
-          :locale="locale"
-          :disabled="disabled"
-          :error="errors?.[fname] || null"
-          :model-value="values[fname]"
-          @update:model-value="(v) => emit('update', fname, v)"
-        />
-        <FieldDeadRefNote v-if="deadFields" :show="deadFields.has(fname)" />
-      </div>
-    </div>
-  </template>
-</template>
-
-<style lang="scss">
-// Grid track set from the CUSTOM PROPERTY (not grid-template-columns directly) so the responsive collapse
-// below — a plain stylesheet rule — wins over the inline value.
-.ui-field-row {
-  display: grid;
-  grid-template-columns: var(--ui-field-cols, 1fr);
-  gap: var(--space-3);
-  align-items: start;
-  min-inline-size: 0;
-}
-.ui-field-cell {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-1); // separates a field from its stale-reference note; inert for a single-child cell
-  min-inline-size: 0; // let inputs shrink inside a grid track (the repeater idiom)
-}
-.ui-field-group {
-  margin: 0;
-  padding: 0;
-  border: 0;
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-3);
-}
-.ui-field-group__legend {
-  padding: 0;
-  font-size: var(--text-sm);
-  font-weight: var(--weight-medium);
-  color: var(--color-text-muted);
-}
-// Responsive collapse to a single column (the repo's existing breakpoint). Container queries are a follow-up.
-@media (max-width: 48rem) {
-  .ui-field-row { grid-template-columns: 1fr; }
-}
-</style>

package/layers/ui/app/components/field/Link.vue

@@ -1,112 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-import UiField from '../ui/Field.vue'
-import UiButtonGroup from '../ui/ButtonGroup.vue'
-import UiTextInput from '../ui/TextInput.vue'
-import LinkInternalPicker from './LinkInternalPicker.vue'
-import { useLinkField } from '../../composables/useLinkField'
-import type { FieldComponentProps } from '../../utils/field-component'
-import type { FieldOf, LinkType, LinkValue } from '@michaelthielemann/kestrel-core'
-
-const ALL: LinkType[] = ['external', 'email', 'tel', 'internal']
-const TYPE_KEYS: Record<LinkType, string> = {
-  internal: 'field.link.type_internal',
-  external: 'field.link.type_url',
-  email: 'field.link.type_email',
-  tel: 'field.link.type_phone',
-}
-
-const { t } = useT()
-const props = defineProps<FieldComponentProps>()
-const model = defineModel<LinkValue | null>()
-
-const required = computed(() => !!props.field.required)
-const allowed = computed<LinkType[]>(() =>
-  props.field.type === 'link' ? ((props.field as FieldOf<'link'>).options?.types ?? ALL) : ALL,
-)
-const typeOptions = computed(() => allowed.value.map((ltype) => ({ value: ltype, label: t(TYPE_KEYS[ltype]) })))
-const internalCollections = computed(() =>
-  props.field.type === 'link' ? (props.field as FieldOf<'link'>).options?.collections : undefined,
-)
-
-const { currentType, typeModel, url, email, tel, label, collection, recordId, hash } = useLinkField(model, allowed)
-</script>
-
-<template>
-  <UiField :id="id" :label="name" :error="error" :required="required">
-    <template #default="f">
-      <UiButtonGroup
-        v-if="allowed.length > 1"
-        v-model="typeModel"
-        :options="typeOptions"
-        :disabled="disabled"
-        :aria-label="t('field.link.link_type')"
-      />
-
-      <template v-if="currentType === 'external'">
-        <UiTextInput
-          v-model="url"
-          type="url"
-          :disabled="disabled"
-          :placeholder="t('field.link.url_placeholder')"
-          v-bind="f"
-        />
-      </template>
-      <template v-else-if="currentType === 'email'">
-        <UiTextInput
-          v-model="email"
-          type="email"
-          :disabled="disabled"
-          v-bind="f"
-        />
-      </template>
-      <template v-else-if="currentType === 'tel'">
-        <UiTextInput
-          v-model="tel"
-          type="tel"
-          :disabled="disabled"
-          v-bind="f"
-        />
-      </template>
-      <template v-else>
-        <LinkInternalPicker
-          v-model:collection="collection"
-          v-model:record-id="recordId"
-          :collections="internalCollections"
-          :locale="locale"
-          :disabled="disabled"
-          :input-id="f.id"
-          :invalid="f['aria-invalid'] === 'true'"
-          :describedby="f['aria-describedby']"
-          :required="f.required"
-        />
-        <UiTextInput
-          v-model="hash"
-          class="ui-link__hash"
-          :disabled="disabled"
-          :placeholder="t('field.link.hash_placeholder')"
-          :aria-label="t('field.link.hash_placeholder')"
-        />
-      </template>
-
-      <span class="ui-link__label-row">
-        <UiTextInput
-          v-model="label"
-          :disabled="disabled"
-          :placeholder="t('field.link.label_placeholder')"
-          :aria-label="t('field.link.label_placeholder')"
-        />
-      </span>
-    </template>
-  </UiField>
-</template>
-
-<style lang="scss">
-.ui-link__label-row {
-  display: block;
-  margin-top: var(--space-1);
-}
-.ui-link__hash {
-  margin-top: var(--space-1);
-}
-</style>

package/layers/ui/app/components/field/LinkInternalPicker.vue

@@ -1,95 +0,0 @@
-<script setup lang="ts">
-import { ref, computed, onMounted, toRef } from 'vue'
-import UiSelect from '../ui/Select.vue'
-import UiCombobox from '../ui/Combobox.vue'
-import { useRecordOptions } from '../../composables/useRecordOptions'
-import { resolveLocalized } from '../../utils/localized'
-import type { SerializedCollection } from '@michaelthielemann/kestrel-core'
-
-const { t, lang } = useT()
-
-const props = defineProps<{
-  collections?: string[]
-  locale: string
-  disabled?: boolean
-  inputId?: string
-  invalid?: boolean
-  describedby?: string
-  required?: boolean
-}>()
-
-const collection = defineModel<string | null>('collection')
-const recordId = defineModel<number | null>('recordId')
-
-interface CollectionOption { label: string; value: string }
-const collectionOptions = ref<CollectionOption[]>([])
-const showSelect = ref(false) // stays hidden until the fetch resolves → no flash, no empty select
-const loadError = ref<string | null>(null)
-
-onMounted(async () => {
-  try {
-    const res = await $fetch<{ data: SerializedCollection[] }>('/api/collections')
-    const filtered = res.data.filter((c) => !props.collections || props.collections.includes(c.name))
-    collectionOptions.value = filtered.map((c) => ({
-      value: c.name,
-      label: resolveLocalized(c.label?.plural, lang.value) ?? resolveLocalized(c.label?.singular, lang.value) ?? c.name,
-    }))
-    if (collectionOptions.value.length === 1) collection.value ||= collectionOptions.value[0]!.value
-    showSelect.value = collectionOptions.value.length > 1
-  } catch {
-    loadError.value = t('field.linkPicker.loadError')
-  }
-})
-
-// Reset only on a user pick — a programmatic {collection, id} reseed (record loader) sets both
-// together and must not have its freshly-set id clobbered.
-function onPickCollection(value: string | null | undefined) {
-  collection.value = value ?? null
-  recordId.value = null
-}
-
-const coll = computed(() => collection.value ?? '')
-const ids = computed(() => (recordId.value != null ? [recordId.value] : []))
-const { options, selected, loading, onSearch } = useRecordOptions(coll, ids, toRef(props, 'locale'))
-</script>
-
-<template>
-  <div class="ui-link-internal">
-    <p v-if="loadError" class="ui-link-internal__error">{{ loadError }}</p>
-    <UiSelect
-      v-if="showSelect"
-      :model-value="collection"
-      :options="collectionOptions"
-      :disabled="disabled"
-      :placeholder="t('field.linkPicker.chooseCollection')"
-      :aria-label="t('field.linkPicker.collectionLabel')"
-      :aria-invalid="invalid || undefined"
-      :aria-describedby="describedby"
-      @update:model-value="onPickCollection"
-    />
-    <UiCombobox
-      v-model="recordId"
-      :options="options"
-      :selected="selected"
-      :loading="loading"
-      :multiple="false"
-      :disabled="disabled || !collection"
-      :input-id="inputId"
-      :invalid="invalid"
-      :describedby="describedby"
-      :required="required"
-      :placeholder="t('field.linkPicker.searchRecords')"
-      @search="onSearch"
-    />
-  </div>
-</template>
-
-<style lang="scss">
-// The internal arm stacks two block controls (collection select + record combobox) plus an error line.
-// Matches the `--space-1` rhythm the hash/label rows already use.
-.ui-link-internal {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-1);
-}
-</style>

package/layers/ui/app/components/field/Number.vue

@@ -1,30 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-import UiField from '../ui/Field.vue'
-import UiNumberInput from '../ui/NumberInput.vue'
-import { fieldConstraints } from '@michaelthielemann/kestrel-fields/client'
-import type { FieldComponentProps } from '../../utils/field-component'
-import type { FieldOf } from '@michaelthielemann/kestrel-core'
-
-const props = defineProps<FieldComponentProps>()
-const model = defineModel<number | null>()
-const c = computed(() => fieldConstraints(props.field))
-// Display-only unit suffix (e.g. 'rem'); the stored value stays a bare number.
-const unit = computed(() => (props.field.type === 'number' ? (props.field as FieldOf<'number'>).options?.unit : undefined))
-</script>
-
-<template>
-  <UiField :id="id" :label="name" :error="error" :required="c.required">
-    <template #default="f">
-      <UiNumberInput
-        v-model="model"
-        :min="c.min"
-        :max="c.max"
-        :step="c.step"
-        :suffix="unit"
-        :disabled="disabled"
-        v-bind="f"
-      />
-    </template>
-  </UiField>
-</template>

package/layers/ui/app/components/field/Relation.vue

@@ -1,49 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-import UiField from '../ui/Field.vue'
-import UiCombobox from '../ui/Combobox.vue'
-import { useRecordOptions } from '../../composables/useRecordOptions'
-import type { FieldComponentProps } from '../../utils/field-component'
-import type { FieldOf } from '@michaelthielemann/kestrel-core'
-
-const props = defineProps<FieldComponentProps>()
-const model = defineModel<number | number[] | null>()
-
-const cfg = computed(() => {
-  if (props.field.type !== 'relation') return { collection: '', many: false, label: undefined as string | undefined }
-  const r = (props.field as FieldOf<'relation'>).relation
-  return { collection: r.collection, many: !!r.many, label: r.labelField }
-})
-const required = computed(() => !!props.field.required)
-
-const ids = computed<number[]>(() =>
-  cfg.value.many ? (Array.isArray(model.value) ? model.value : []) : (typeof model.value === 'number' ? [model.value] : []))
-
-const collection = computed(() => cfg.value.collection)
-const locale = computed(() => props.locale)
-const labelField = computed(() => cfg.value.label)
-
-const { options, selected, loading, onSearch } = useRecordOptions(collection, ids, locale, labelField)
-const { t } = useT()
-</script>
-
-<template>
-  <UiField :id="id" :label="name" :error="error" :required="required">
-    <template #default="f">
-      <UiCombobox
-        v-model="model"
-        :options="options"
-        :selected="selected"
-        :multiple="cfg.many"
-        :loading="loading"
-        :disabled="disabled"
-        :placeholder="t('field.relation.placeholder')"
-        :input-id="f.id"
-        :invalid="f['aria-invalid'] === 'true'"
-        :describedby="f['aria-describedby']"
-        :required="f.required"
-        @search="onSearch"
-      />
-    </template>
-  </UiField>
-</template>

package/layers/ui/app/components/field/Renderer.vue

@@ -1,30 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-import { resolveFieldComponent } from '../../utils/field-registry'
-import { resolveLocalized } from '../../utils/localized'
-import { humanizeFieldName } from '../../utils/humanize'
-import FieldUnsupported from './Unsupported.vue'
-import type { FieldComponentProps } from '../../utils/field-component'
-
-const props = defineProps<FieldComponentProps>()
-const model = defineModel<unknown>()
-const { lang } = useT()
-const component = computed(() => resolveFieldComponent(props.field.type) ?? FieldUnsupported)
-// The widget renders `name` as its display label. Prefer the def's (localized) label, else humanize the
-// key (`siteName` → "Site Name") so the editor label matches the collection-list header. The field's wire
-// key is owned by the parent, so passing the human label down as `name` is safe.
-const label = computed(() => resolveLocalized(props.field.label, lang.value) ?? humanizeFieldName(props.name))
-</script>
-
-<template>
-  <component
-    :is="component"
-    :id="id"
-    v-model="model"
-    :field="field"
-    :name="label"
-    :locale="locale"
-    :error="error"
-    :disabled="disabled"
-  />
-</template>