@plutocms/pluto 0.6.0 → 0.8.0

package/CHANGELOG.md

@@ -1,6 +1,20 @@
 # Changelog
 
 
+## [0.8.0](https://github.com/plutocms/pluto/compare/v0.7.0...v0.8.0) (2026-09-13)
+
+
+### Features
+
+* **content:** add generated admin UI for content model (wave 3) ([#135](https://github.com/plutocms/pluto/issues/135)) ([b08c5c2](https://github.com/plutocms/pluto/commit/b08c5c28f58380c805d527c1f7a7c9d194fb08f9))
+
+## [0.7.0](https://github.com/plutocms/pluto/compare/v0.6.0...v0.7.0) (2026-09-12)
+
+
+### Features
+
+* **content:** add server-side content registry and generic CRUD routes (wave 2) ([#133](https://github.com/plutocms/pluto/issues/133)) ([7846340](https://github.com/plutocms/pluto/commit/784634081f5a267fbe33dde8264e6b848bf7bdda))
+
 ## [0.6.0](https://github.com/plutocms/pluto/compare/v0.5.0...v0.6.0) (2026-09-12)
 
 

package/FEATURES.md

@@ -14,5 +14,8 @@ policies shared by every project here.
   permissions driver. @.claude/skills/permissions/SKILL.md
 - Content model: a typed content-type contract (`defineContentType`, field types, payload
   validation, field-to-column mapping) and a media-adapter contract, with registry wiring and
-  consumer composables. Client-side contracts only; no server registry or generated UI yet.
+  consumer composables, a server-side content registry and generic list/get/create/update/
+  delete routes backed by a `PlutoContentAdapter` a backend layer implements, and a generated
+  admin UI (list/form components, eight built-in field widgets, generated
+  `/admin/content/**` pages, and nav/pages derivation). No real adapter yet.
   @.claude/skills/content-model/SKILL.md

package/app/components/Pluto/Content/PlutoContentField.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+// Dispatches to whichever widget is registered for `field`, and re-emits
+// `update:modelValue` unchanged. Never needs to know which concrete widget
+// it dispatched to — every widget shares the same field/modelValue/disabled
+// contract (see the content-model skill).
+const props = defineProps<{
+  field: PlutoField
+  modelValue: unknown
+  disabled?: boolean
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: unknown]
+}>()
+
+const widget = usePlutoContentFieldWidget(props.field)
+</script>
+
+<template>
+  <component
+    :is="widget"
+    v-if="widget"
+    :field="field"
+    :model-value="modelValue"
+    :disabled="disabled"
+    @update:model-value="emit('update:modelValue', $event)"
+  />
+
+  <UFormField v-else :label="field.label">
+    <p class="text-muted text-sm">
+      No widget registered for field type "{{ field.type }}".
+    </p>
+  </UFormField>
+</template>

package/app/components/Pluto/Content/PlutoContentForm.vue

@@ -0,0 +1,222 @@
+<script setup lang="ts">
+const props = defineProps<{
+  /** A content type's `name` (not a registry entry id) — see `usePlutoContentTypes`. */
+  type: string
+  /** Present in edit mode. Absent in "new entry" mode. */
+  id?: string | number
+}>()
+
+const { byName } = usePlutoContentTypes()
+const contentType = computed(() => byName(props.type))
+
+if (!contentType.value) {
+  // The generated page (`app/pages/admin/content/[type]/{new,[id]}.vue`)
+  // already resolves the type and 404s before this component ever mounts,
+  // so this should not normally happen.
+  console.error(`PlutoContentForm: content type "${props.type}" was not found in the registry.`)
+}
+
+const { can } = usePlutoPermissions()
+
+// "No capability declared" means the operation is open to anyone who can
+// reach this page — never call can('') as a stand-in for that.
+const canWrite = computed(
+  () => !contentType.value?.capabilities?.write || can(contentType.value.capabilities.write)
+)
+
+const editing = computed(() => props.id !== undefined)
+const basePath = computed(() => contentType.value?.basePath ?? `/admin/content/${props.type}`)
+
+const { item, save } = usePlutoContentItem(props.type, () => props.id)
+
+function sortedFields(region: 'main' | 'side') {
+  return computed(() =>
+    (contentType.value?.fields ?? [])
+      .filter((field) => field.inForm !== false && (field.region ?? 'main') === region)
+      .sort((a, b) => (a.order ?? 100) - (b.order ?? 100))
+  )
+}
+
+const mainFields = sortedFields('main')
+const sideFields = sortedFields('side')
+
+// --- Slug auto-derivation, with the PostForm.vue bug fixed -----------------
+//
+// PostForm.vue re-derives its slug from the title on every keystroke, with
+// no gate at all — including while editing an already-published,
+// already-shared post, silently changing a live URL. Auto-derivation here
+// stops the moment either:
+//
+// 1. The form is in edit mode (`editing` is true) — an existing entry's
+//    slug is presumed already meaningful, and never auto-changes without
+//    the user directly touching the slug field.
+// 2. The user has typed into the slug field directly, even while creating
+//    a new entry — tracked by `slugTouched`, flipped by `updateField` below
+//    the moment a 'slug' field's own `update:modelValue` fires.
+const slugTouched = ref(false)
+const slugField = computed(() =>
+  contentType.value?.fields.find((field): field is PlutoSlugField => field.type === 'slug')
+)
+
+function slugify(value: string): string {
+  return value
+    .toLowerCase()
+    .trim()
+    .replace(/[^a-z0-9]+/g, '-')
+    .replace(/(^-|-$)/g, '')
+}
+
+watch(
+  () => {
+    const from = slugField.value?.from
+    return from ? item.value[from] : undefined
+  },
+  (value) => {
+    if (!slugField.value || editing.value || slugTouched.value) {
+      return
+    }
+
+    item.value[slugField.value.name] = slugify(String(value ?? ''))
+  }
+)
+
+function updateField(field: PlutoField, value: unknown) {
+  if (field.type === 'slug') {
+    slugTouched.value = true
+  }
+
+  item.value[field.name] = value
+}
+
+// --- Save -------------------------------------------------------------------
+
+const toast = useToast()
+const saving = ref(false)
+const validationErrors = ref<ContentValidationError[]>([])
+
+function buildPayload(): Record<string, unknown> {
+  const type = contentType.value
+  if (!type) {
+    return {}
+  }
+
+  const payload: Record<string, unknown> = {}
+  for (const field of type.fields) {
+    if (Object.hasOwn(item.value, field.name)) {
+      payload[field.name] = item.value[field.name]
+    }
+  }
+
+  return payload
+}
+
+async function onSave() {
+  const type = contentType.value
+  if (!type) {
+    return
+  }
+
+  const payload = buildPayload()
+  const errors = validateContentPayload(type, payload, { partial: editing.value })
+
+  if (errors.length > 0) {
+    validationErrors.value = errors
+    return
+  }
+
+  validationErrors.value = []
+  saving.value = true
+
+  try {
+    const saved = await save(payload)
+
+    if (!editing.value) {
+      await navigateTo(`${basePath.value}/${saved.id}`)
+      return
+    }
+
+    toast.add({
+      title: 'Saved',
+      description: `${type.label} updated successfully.`,
+      color: 'success',
+    })
+  } catch {
+    // A raced permissions check, or any other server-side rejection
+    // (a 403 included), surfaces here rather than as an unhandled
+    // rejection.
+    toast.add({
+      title: 'Error',
+      description: 'An error occurred while saving.',
+      color: 'error',
+    })
+  } finally {
+    saving.value = false
+  }
+}
+</script>
+
+<template>
+  <div v-if="contentType">
+    <AdminView>
+      <UAlert
+        v-if="validationErrors.length > 0"
+        color="error"
+        title="Please fix the following before saving"
+      >
+        <template #description>
+          <ul class="list-disc pl-4">
+            <li v-for="fieldError in validationErrors" :key="fieldError.field">
+              {{ fieldError.message }}
+            </li>
+          </ul>
+        </template>
+      </UAlert>
+
+      <div class="flex flex-col gap-6 lg:flex-row lg:items-start lg:gap-10">
+        <div class="flex flex-1 flex-col gap-6">
+          <h1 class="text-3xl font-bold lg:text-4xl">
+            {{ editing ? `Edit ${contentType.label}` : `New ${contentType.label}` }}
+          </h1>
+
+          <PlutoContentField
+            v-for="field in mainFields"
+            :key="field.name"
+            :field="field"
+            :model-value="item[field.name]"
+            :disabled="!canWrite || saving"
+            @update:model-value="updateField(field, $event)"
+          />
+        </div>
+
+        <div class="flex w-full shrink-0 flex-col gap-6 lg:max-w-xs">
+          <UButton
+            v-if="canWrite"
+            :loading="saving"
+            icon="lucide:save"
+            class="justify-center"
+            @click="onSave"
+          >
+            Save
+          </UButton>
+
+          <PlutoContentField
+            v-for="field in sideFields"
+            :key="field.name"
+            :field="field"
+            :model-value="item[field.name]"
+            :disabled="!canWrite || saving"
+            @update:model-value="updateField(field, $event)"
+          />
+        </div>
+      </div>
+    </AdminView>
+  </div>
+
+  <AdminView v-else>
+    <UAlert
+      :description="`No content type named &quot;${type}&quot; is registered.`"
+      color="error"
+      title="Content type not found"
+    />
+  </AdminView>
+</template>

package/app/components/Pluto/Content/PlutoContentList.vue

@@ -0,0 +1,197 @@
+<script setup lang="ts">
+import type { TableColumn } from '@nuxt/ui'
+
+const props = defineProps<{
+  /** A content type's `name` (not a registry entry id) — see `usePlutoContentTypes`. */
+  type: string
+}>()
+
+const { byName } = usePlutoContentTypes()
+const contentType = computed(() => byName(props.type))
+
+if (!contentType.value) {
+  // The generated page (`app/pages/admin/content/[type]/index.vue`) already
+  // resolves the type and 404s before this component ever mounts, so this
+  // should not normally happen.
+  console.error(`PlutoContentList: content type "${props.type}" was not found in the registry.`)
+}
+
+const { can } = usePlutoPermissions()
+
+// "No capability declared" means the operation is open to anyone who can
+// reach this page — never call can('') as a stand-in for that.
+const canWrite = computed(
+  () => !contentType.value?.capabilities?.write || can(contentType.value.capabilities.write)
+)
+const canDelete = computed(
+  () => !contentType.value?.capabilities?.delete || can(contentType.value.capabilities.delete)
+)
+
+const basePath = computed(() => contentType.value?.basePath ?? `/admin/content/${props.type}`)
+
+const { items, pending, refresh, remove } = usePlutoContentList(props.type)
+
+const listFields = computed(() =>
+  (contentType.value?.fields ?? [])
+    .filter((field) => field.inList)
+    .sort((a, b) => (a.order ?? 100) - (b.order ?? 100))
+)
+
+const columns = computed<TableColumn<PlutoContentItem>[]>(() => [
+  ...listFields.value.map((field) => ({ accessorKey: field.name, header: field.label })),
+  { id: 'actions', header: '' },
+])
+
+const pendingDeleteId = ref<string | number | null>(null)
+const isDeleteModalOpen = ref(false)
+
+function openDeleteModal(id: string | number) {
+  pendingDeleteId.value = id
+  isDeleteModalOpen.value = true
+}
+
+function closeDeleteModal() {
+  pendingDeleteId.value = null
+  isDeleteModalOpen.value = false
+}
+
+async function confirmDelete() {
+  if (pendingDeleteId.value === null) {
+    return
+  }
+
+  await remove(pendingDeleteId.value)
+  closeDeleteModal()
+}
+</script>
+
+<template>
+  <div v-if="contentType">
+    <Modal v-model="isDeleteModalOpen" :custom-size="480">
+      <ModalHeader @close="closeDeleteModal">Remove item</ModalHeader>
+
+      <ModalContent>
+        <p>Do you really want to remove this item?</p>
+      </ModalContent>
+
+      <ModalFooter>
+        <div class="flex items-center gap-4">
+          <UButton icon="lucide:x" variant="ghost" color="neutral" @click="closeDeleteModal">
+            Cancel
+          </UButton>
+
+          <UButton icon="lucide:trash" color="error" @click="confirmDelete">Remove</UButton>
+        </div>
+      </ModalFooter>
+    </Modal>
+
+    <AdminView>
+      <div class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
+        <hgroup class="flex items-center justify-between gap-x-3 lg:justify-start">
+          <h1 class="text-3xl font-bold lg:text-4xl">{{ contentType.labelPlural }}</h1>
+
+          <UButton
+            :loading="pending"
+            icon="lucide:refresh-ccw"
+            variant="ghost"
+            title="Refresh"
+            square
+            @click="refresh()"
+          />
+        </hgroup>
+
+        <div v-if="canWrite" class="flex lg:shrink-0">
+          <UButton
+            :to="`${basePath}/new`"
+            icon="lucide:plus"
+            as="NuxtLink"
+            class="flex-1 justify-center lg:flex-none"
+          >
+            Add {{ contentType.labelPlural }}
+          </UButton>
+        </div>
+      </div>
+
+      <div class="grid gap-3 lg:hidden">
+        <UCard v-for="item in items" :key="item.id">
+          <div class="flex flex-col gap-4">
+            <div class="min-w-0">
+              <NuxtLink
+                :to="`${basePath}/${item.id}`"
+                class="block truncate text-lg font-semibold hover:underline"
+              >
+                {{ item[contentType.titleField] }}
+              </NuxtLink>
+            </div>
+
+            <dl class="grid grid-cols-2 gap-3 text-sm">
+              <div v-for="field in listFields" :key="field.name">
+                <dt class="text-muted">{{ field.label }}</dt>
+                <dd class="font-medium">{{ item[field.name] }}</dd>
+              </div>
+            </dl>
+
+            <div class="flex gap-2 border-t border-default pt-3">
+              <UButton
+                v-if="canWrite"
+                :to="`${basePath}/${item.id}`"
+                icon="lucide:pen-line"
+                color="neutral"
+                variant="soft"
+                class="flex-1 justify-center"
+              >
+                Edit
+              </UButton>
+
+              <UButton
+                v-if="canDelete"
+                icon="lucide:trash"
+                color="error"
+                variant="soft"
+                class="flex-1 justify-center"
+                @click="openDeleteModal(item.id)"
+              >
+                Remove
+              </UButton>
+            </div>
+          </div>
+        </UCard>
+      </div>
+
+      <UCard :ui="{ body: 'sm:p-0 p-0' }" class="hidden lg:block">
+        <div class="overflow-x-auto">
+          <UTable :data="items" :columns="columns" :loading="pending" empty="No items yet.">
+            <template #actions-cell="{ row }">
+              <div class="flex justify-end gap-3">
+                <NuxtLink
+                  v-if="canWrite"
+                  :to="`${basePath}/${row.original.id}`"
+                  class="text-info px-0 py-0.5 hover:underline"
+                >
+                  Edit
+                </NuxtLink>
+
+                <button
+                  v-if="canDelete"
+                  type="button"
+                  class="text-error cursor-pointer px-0 py-0.5 hover:underline"
+                  @click="openDeleteModal(row.original.id)"
+                >
+                  Remove
+                </button>
+              </div>
+            </template>
+          </UTable>
+        </div>
+      </UCard>
+    </AdminView>
+  </div>
+
+  <AdminView v-else>
+    <UAlert
+      :description="`No content type named &quot;${type}&quot; is registered.`"
+      color="error"
+      title="Content type not found"
+    />
+  </AdminView>
+</template>

package/app/components/Pluto/Content/fields/PlutoFieldBoolean.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+const props = defineProps<{
+  field: PlutoBooleanField
+  modelValue: unknown
+  disabled?: boolean
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean]
+}>()
+
+const value = computed(() => props.modelValue === true)
+</script>
+
+<template>
+  <UFormField :label="field.label" :description="field.description">
+    <USwitch
+      :model-value="value"
+      :disabled="disabled"
+      @update:model-value="emit('update:modelValue', $event)"
+    />
+  </UFormField>
+</template>

package/app/components/Pluto/Content/fields/PlutoFieldDate.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+// UInputDate's modelValue is a `DateValue` (from `@internationalized/date`),
+// not a plain string. A content item stores a 'date' field as a plain ISO
+// date string ('YYYY-MM-DD'), so this widget converts both ways at its own
+// boundary — the rest of the content model never sees a `DateValue`.
+import type { CalendarDate, DateValue } from '@internationalized/date'
+import { parseDate } from '@internationalized/date'
+
+const props = defineProps<{
+  field: PlutoDateField
+  modelValue: unknown
+  disabled?: boolean
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string | undefined]
+}>()
+
+function toCalendarDate(value: unknown): CalendarDate | undefined {
+  if (typeof value !== 'string' || value === '') {
+    return undefined
+  }
+
+  try {
+    return parseDate(value.slice(0, 10))
+  } catch {
+    return undefined
+  }
+}
+
+const value = computed<DateValue | undefined>({
+  get: () => toCalendarDate(props.modelValue),
+  set: (next) => emit('update:modelValue', next ? next.toString() : undefined),
+})
+</script>
+
+<template>
+  <UFormField :label="field.label" :description="field.description" :required="field.required">
+    <UInputDate v-model="value" :disabled="disabled" />
+  </UFormField>
+</template>

package/app/components/Pluto/Content/fields/PlutoFieldNumber.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+const props = defineProps<{
+  field: PlutoNumberField
+  modelValue: unknown
+  disabled?: boolean
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: number | null]
+}>()
+
+const value = computed(() => {
+  const raw = props.modelValue
+  return typeof raw === 'number' ? raw : null
+})
+</script>
+
+<template>
+  <UFormField :label="field.label" :description="field.description" :required="field.required">
+    <UInputNumber
+      :model-value="value"
+      :min="field.min"
+      :max="field.max"
+      :step="field.integer ? 1 : undefined"
+      :disabled="disabled"
+      class="w-full"
+      @update:model-value="emit('update:modelValue', $event)"
+    />
+  </UFormField>
+</template>

package/app/components/Pluto/Content/fields/PlutoFieldReference.vue

@@ -0,0 +1,79 @@
+<script setup lang="ts">
+// Only `field.optionsUrl` is resolved in this wave. `field.target` (a
+// same-app content-type reference with no `optionsUrl`) needs the generic
+// list endpoint of *another* content type, which is out of scope here — see
+// the content-model skill.
+const props = defineProps<{
+  field: PlutoReferenceField
+  modelValue: unknown
+  disabled?: boolean
+}>()
+
+defineEmits<{
+  'update:modelValue': [value: string | number]
+}>()
+
+interface ReferenceOption {
+  label: string
+  value: string | number
+}
+
+interface ReferenceOptionsResponse {
+  data: Array<Record<string, unknown>>
+}
+
+const options = ref<ReferenceOption[]>([])
+const pending = ref(false)
+
+async function loadOptions() {
+  if (!props.field.optionsUrl) {
+    return
+  }
+
+  pending.value = true
+
+  try {
+    const result = await $fetch<ReferenceOptionsResponse>(props.field.optionsUrl)
+    const labelKey = props.field.labelKey ?? 'label'
+    const valueKey = props.field.valueKey ?? 'id'
+
+    options.value = result.data.map((row) => ({
+      label: String(row[labelKey] ?? ''),
+      value: row[valueKey] as string | number,
+    }))
+  } finally {
+    pending.value = false
+  }
+}
+
+onMounted(loadOptions)
+
+const hasOptionsSource = computed(() => Boolean(props.field.optionsUrl))
+const value = computed(() => props.modelValue as string | number | undefined)
+</script>
+
+<template>
+  <UFormField :label="field.label" :description="field.description" :required="field.required">
+    <UInputMenu
+      v-if="hasOptionsSource"
+      :model-value="value"
+      :items="options"
+      :loading="pending"
+      :disabled="disabled"
+      value-key="value"
+      label-key="label"
+      class="w-full"
+      @update:model-value="$emit('update:modelValue', $event)"
+    />
+
+    <UInputMenu
+      v-else
+      :items="[]"
+      value-key="value"
+      label-key="label"
+      placeholder="No options source configured for this reference field."
+      class="w-full"
+      disabled
+    />
+  </UFormField>
+</template>

package/app/components/Pluto/Content/fields/PlutoFieldSelect.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+const props = defineProps<{
+  field: PlutoSelectField
+  modelValue: unknown
+  disabled?: boolean
+}>()
+
+defineEmits<{
+  'update:modelValue': [value: string | number]
+}>()
+
+const items = computed(() =>
+  props.field.options.map((option) => ({ label: option.label, value: option.value }))
+)
+const value = computed(() => props.modelValue as string | number | undefined)
+</script>
+
+<template>
+  <UFormField :label="field.label" :description="field.description" :required="field.required">
+    <USelect
+      :model-value="value"
+      :items="items"
+      :disabled="disabled"
+      class="w-full"
+      @update:model-value="$emit('update:modelValue', $event)"
+    />
+  </UFormField>
+</template>