@plutocms/pluto 0.6.0 → 0.8.0

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

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+// A plain text input plus a preview line. This widget does not auto-derive
+// the slug from another field — only `PlutoContentForm` knows about the
+// *other* field (`field.from`) a slug derives from, so that logic lives
+// there, not here. See the content-model skill for the slug bug this
+// separation is meant to avoid repeating.
+const props = defineProps<{
+  field: PlutoSlugField
+  modelValue: unknown
+  disabled?: boolean
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+}>()
+
+const value = computed(() => (props.modelValue as string | undefined) ?? '')
+</script>
+
+<template>
+  <UFormField :label="field.label" :description="field.description" :required="field.required">
+    <UInput
+      :model-value="value"
+      :disabled="disabled"
+      class="w-full"
+      @update:model-value="emit('update:modelValue', $event)"
+    />
+
+    <p v-if="field.preview" class="text-muted mt-1 text-sm">
+      {{ field.preview }}{{ value }}
+    </p>
+  </UFormField>
+</template>

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

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+// Renders both 'text' and 'textarea' fields. `richtext` has no core widget
+// — a layer (for example @plutocms/supabase-blog) registers its own.
+const props = defineProps<{
+  field: PlutoTextField
+  modelValue: unknown
+  disabled?: boolean
+}>()
+
+defineEmits<{
+  'update:modelValue': [value: string]
+}>()
+
+const isTextarea = computed(() => props.field.type === 'textarea')
+const value = computed(() => (props.modelValue as string | undefined) ?? undefined)
+</script>
+
+<template>
+  <UFormField :label="field.label" :description="field.description" :required="field.required">
+    <UTextarea
+      v-if="isTextarea"
+      :model-value="value"
+      :placeholder="field.placeholder"
+      :maxlength="field.maxLength"
+      :disabled="disabled"
+      class="w-full"
+      @update:model-value="$emit('update:modelValue', $event)"
+    />
+
+    <UInput
+      v-else
+      :model-value="value"
+      :placeholder="field.placeholder"
+      :maxlength="field.maxLength"
+      :disabled="disabled"
+      class="w-full"
+      @update:model-value="$emit('update:modelValue', $event)"
+    />
+  </UFormField>
+</template>

package/app/composables/pluto-admin-nav.ts

@@ -6,21 +6,41 @@ interface LegacyHrefLink {
 }
 
 /**
- * The admin sidebar nav. Merges the new registry with the old
- * `useSidebarAdminActions` composable (`@plutocms/utils`), so an unmigrated
- * layer's sidebar entries keep showing up. A bridged entry is skipped when a
- * registered entry already uses the same label, so a layer that migrates
- * does not get a duplicate item.
+ * The admin sidebar nav. Merges three sources:
+ *
+ * 1. The registry's own `nav` bucket — a layer's own `definePlutoExtension`
+ *    call.
+ * 2. The old `useSidebarAdminActions` composable (`@plutocms/utils`), so an
+ *    unmigrated layer's sidebar entries keep showing up. A bridged entry is
+ *    skipped when a registered entry already uses the same label, so a
+ *    layer that migrates does not get a duplicate item.
+ * 3. One synthesized entry per auto-routed content type (`type.autoRoutes
+ *    !== false`) — a layer that declares a content type gets a nav entry
+ *    for free, without calling `definePlutoExtension` itself. Gated on the
+ *    same "no capability declared = always visible" rule the generic
+ *    content routes already use server-side (see the content-model skill):
+ *    when `type.capabilities.read` is unset, the entry is always visible;
+ *    when it is set, `can(...)` decides.
+ *
+ * `entry.enabled` is read and enforced uniformly across all three sources
+ * here. Source 1 already filters on it a second time, inside
+ * `createOwnedRegistry` itself (see
+ * `app/composables/internal/registry-factory.ts`) — applying the same
+ * filter again here is harmless for that source, and is what makes sources
+ * 2 and 3 (plain objects that never pass through that registry) respect
+ * `enabled` too, instead of only source 1.
  */
 export function usePlutoAdminNav() {
   const registry = usePlutoRegistry()
   const legacy = useSidebarAdminActions()
+  const { items: contentTypes } = usePlutoContentTypes()
+  const { can } = usePlutoPermissions()
 
   const items = computed<PlutoNavItem[]>(() => {
     const registered = registry.nav.list.value
     const seen = new Set(registered.map((item) => item.label))
 
-    const bridged = legacy.actions.value
+    const bridged: PlutoNavItem[] = legacy.actions.value
       .filter((action) => !seen.has(String(action.label)))
       .map((action, index) => ({
         id: `legacy:sidebar-${index}`,
@@ -35,9 +55,29 @@ export function usePlutoAdminNav() {
         })),
       }))
 
-    return [...registered, ...bridged].sort(
-      (a, b) => (a.order ?? 100) - (b.order ?? 100)
-    )
+    const contentNav: PlutoNavItem[] = contentTypes.value
+      .filter((entry) => entry.type.autoRoutes !== false)
+      .map((entry) => {
+        const type = entry.type
+        const basePath = type.basePath ?? `/admin/content/${type.name}`
+
+        return {
+          id: `content:${type.name}`,
+          order: type.navOrder ?? 100,
+          label: type.labelPlural,
+          icon: type.icon,
+          to: basePath,
+          enabled: () => !type.capabilities?.read || can(type.capabilities.read),
+          children: [
+            { label: `All ${type.labelPlural}`, to: basePath },
+            { label: `Create new ${type.label}`, to: `${basePath}/new` },
+          ],
+        }
+      })
+
+    return [...registered, ...bridged, ...contentNav]
+      .filter((item) => item.enabled?.() ?? true)
+      .sort((a, b) => (a.order ?? 100) - (b.order ?? 100))
   })
 
   return { items }

package/app/composables/pluto-admin-pages.ts

@@ -1,13 +1,38 @@
 /**
  * Metadata for admin pages, registered on top of routes Nuxt already
- * creates from files. No layer registers page metadata today, so this has
- * no legacy bridge.
+ * creates from files, plus two synthesized entries per auto-routed content
+ * type (`type.autoRoutes !== false`): a list page and a "new" page — the
+ * page-metadata equivalent of the nav entry `usePlutoAdminNav` synthesizes
+ * for the same content type. No layer registers page metadata today, so
+ * the registry bucket itself has no legacy bridge.
  */
 export function usePlutoAdminPages() {
   const registry = usePlutoRegistry()
   const route = useRoute()
+  const { items: contentTypes } = usePlutoContentTypes()
+
+  const items = computed<PlutoAdminPage[]>(() => {
+    const contentPages: PlutoAdminPage[] = contentTypes.value
+      .filter((entry) => entry.type.autoRoutes !== false)
+      .flatMap((entry) => {
+        const type = entry.type
+        const basePath = type.basePath ?? `/admin/content/${type.name}`
+        const navId = `content:${type.name}`
+
+        return [
+          { id: `${navId}:list`, path: basePath, title: type.labelPlural },
+          {
+            id: `${navId}:new`,
+            path: `${basePath}/new`,
+            title: `Create new ${type.label}`,
+            parent: navId,
+          },
+        ]
+      })
+
+    return [...registry.pages.list.value, ...contentPages]
+  })
 
-  const items = computed(() => registry.pages.list.value)
   const current = computed(() => items.value.find((page) => page.path === route.path))
 
   return { items, current }

package/app/composables/pluto-content-item.ts

@@ -0,0 +1,98 @@
+/**
+ * Loads (or creates) one item of one content type, for the generic form page
+ * (`PlutoContentForm`).
+ *
+ * This is one half of the split that replaces the old `usePost`/`useProduct`
+ * pattern (see `usePlutoContentList` for the other half). That old pattern
+ * fetched a list AND a single item from one composable every time, and threw
+ * away whichever one the caller did not need. `usePlutoContentItem` only
+ * ever fetches a single item, and only when `id` is defined — a "new entry"
+ * form never fires a GET at all.
+ *
+ * It is also not a "fake thenable": it returns plain refs and explicit
+ * methods, so a caller `await`s `save()`/`remove()`/`refresh()` directly,
+ * instead of `await`ing the composable's own return value through a
+ * hand-rolled `.then()`.
+ *
+ * `id` is read once, with `toValue`, at composable-creation time. It is not
+ * watched for later changes — each of the three generated pages
+ * (`app/pages/admin/content/[type]/{index,new,[id]}.vue`) mounts fresh on
+ * every route change, so there is no case in this wave where `id` changes
+ * under a still-mounted `PlutoContentForm`.
+ */
+export function usePlutoContentItem(
+  typeName: string,
+  id: MaybeRefOrGetter<string | number | undefined>
+) {
+  const resolvedId = toValue(id)
+  const isNew = resolvedId === undefined
+
+  const item = ref<Record<string, unknown>>({})
+  const pending = ref(false)
+  const error = ref<unknown>(null)
+
+  async function refresh(): Promise<void> {
+    // A new, unsaved entry has nothing to fetch — `item` stays the empty
+    // object it started as.
+    if (isNew) {
+      return
+    }
+
+    pending.value = true
+    error.value = null
+
+    try {
+      item.value = await $fetch<PlutoContentItem>(`/api/_pluto/content/${typeName}/${resolvedId}`)
+    } catch (caught) {
+      error.value = caught
+      throw caught
+    } finally {
+      pending.value = false
+    }
+  }
+
+  // Fire the initial fetch right away, same reasoning as
+  // usePlutoContentList: /admin/** is client-only, so there is no SSR
+  // payload concern. The failure path already lands in `error` for a
+  // reactive consumer to read; swallow the rejection here so it never
+  // surfaces as an unhandled rejection. A caller invoking `refresh()`
+  // again later still gets a real rejection to `await`.
+  refresh().catch(() => {})
+
+  async function save(values: Record<string, unknown>): Promise<PlutoContentItem> {
+    error.value = null
+
+    try {
+      const saved = isNew
+        ? await $fetch<PlutoContentItem>(`/api/_pluto/content/${typeName}`, {
+            method: 'POST',
+            body: values,
+          })
+        : await $fetch<PlutoContentItem>(`/api/_pluto/content/${typeName}/${resolvedId}`, {
+            method: 'PATCH',
+            body: values,
+          })
+
+      item.value = saved
+      return saved
+    } catch (caught) {
+      error.value = caught
+      throw caught
+    }
+  }
+
+  async function remove(): Promise<void> {
+    if (isNew) {
+      throw new Error('Cannot remove an entry that has not been saved yet.')
+    }
+
+    try {
+      await $fetch(`/api/_pluto/content/${typeName}/${resolvedId}`, { method: 'DELETE' })
+    } catch (caught) {
+      error.value = caught
+      throw caught
+    }
+  }
+
+  return { item, pending, error, refresh, save, remove }
+}

package/app/composables/pluto-content-list.ts

@@ -0,0 +1,60 @@
+/**
+ * Fetches one content type's list of items, for the generic list page
+ * (`PlutoContentList`).
+ *
+ * This is one half of the split that replaces the old `usePost`/`useProduct`
+ * pattern (see `usePlutoContentItem` for the other half). That old pattern
+ * fetched a list AND a single item from one composable every time, and threw
+ * away whichever one the caller did not need — a list page paid for an item
+ * fetch it never used, and an edit page paid for a list fetch it never used.
+ * `usePlutoContentList` only ever fetches a list, because a list page only
+ * ever needs a list.
+ *
+ * It is also not a "fake thenable": it returns plain refs and explicit
+ * methods, so a caller `await`s `refresh()` or `remove()` directly, instead
+ * of `await`ing the composable's own return value through a hand-rolled
+ * `.then()`.
+ */
+export function usePlutoContentList(typeName: string) {
+  const items = ref<PlutoContentItem[]>([])
+  const total = ref<number | undefined>(undefined)
+  const pending = ref(false)
+  const error = ref<unknown>(null)
+
+  async function refresh(): Promise<void> {
+    pending.value = true
+    error.value = null
+
+    try {
+      const result = await $fetch<PlutoContentListResult>(`/api/_pluto/content/${typeName}`)
+      items.value = result.data
+      total.value = result.total
+    } catch (caught) {
+      error.value = caught
+      throw caught
+    } finally {
+      pending.value = false
+    }
+  }
+
+  // Fire the initial fetch right away. /admin/** is client-only
+  // (ssr: false in nuxt.config.ts), so there is no SSR payload concern —
+  // this only ever runs in the browser. The failure path already lands in
+  // `error` for a reactive consumer to read; swallow the rejection here so
+  // it never surfaces as an unhandled rejection. A caller invoking
+  // `refresh()` again later still gets a real rejection to `await`.
+  refresh().catch(() => {})
+
+  async function remove(id: string | number): Promise<void> {
+    try {
+      await $fetch(`/api/_pluto/content/${typeName}/${id}`, { method: 'DELETE' })
+    } catch (caught) {
+      error.value = caught
+      throw caught
+    }
+
+    await refresh()
+  }
+
+  return { items, total, pending, error, refresh, remove }
+}

package/app/pages/admin/content/[type]/[id].vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+const route = useRoute()
+const typeName = route.params.type as string
+
+const { byName } = usePlutoContentTypes()
+const type = byName(typeName)
+
+if (!type) {
+  throw createError({ statusCode: 404, statusMessage: 'Content type not found.', fatal: true })
+}
+
+useHead({
+  title: `Edit ${type.label}`,
+})
+</script>
+
+<template>
+  <PlutoContentForm :id="route.params.id as string" :type="type.name" />
+</template>

package/app/pages/admin/content/[type]/index.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+const route = useRoute()
+const typeName = route.params.type as string
+
+const { byName } = usePlutoContentTypes()
+const type = byName(typeName)
+
+if (!type) {
+  throw createError({ statusCode: 404, statusMessage: 'Content type not found.', fatal: true })
+}
+
+useHead({
+  title: type.labelPlural,
+})
+</script>
+
+<template>
+  <PlutoContentList :type="type.name" />
+</template>

package/app/pages/admin/content/[type]/new.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+const route = useRoute()
+const typeName = route.params.type as string
+
+const { byName } = usePlutoContentTypes()
+const type = byName(typeName)
+
+if (!type) {
+  throw createError({ statusCode: 404, statusMessage: 'Content type not found.', fatal: true })
+}
+
+useHead({
+  title: `New ${type.label}`,
+})
+</script>
+
+<template>
+  <PlutoContentForm :type="type.name" />
+</template>

package/app/plugins/pluto-core-registrations.ts

@@ -1,6 +1,25 @@
-// Registers core's own Home and Settings anchors. `order: 0` and
-// `order: 1000` are reserved for these two entries, so every other layer's
-// nav item sorts between them by default (default order is 100).
+import PlutoFieldBoolean from '../components/Pluto/Content/fields/PlutoFieldBoolean.vue'
+import PlutoFieldDate from '../components/Pluto/Content/fields/PlutoFieldDate.vue'
+import PlutoFieldNumber from '../components/Pluto/Content/fields/PlutoFieldNumber.vue'
+import PlutoFieldReference from '../components/Pluto/Content/fields/PlutoFieldReference.vue'
+import PlutoFieldSelect from '../components/Pluto/Content/fields/PlutoFieldSelect.vue'
+import PlutoFieldSlug from '../components/Pluto/Content/fields/PlutoFieldSlug.vue'
+import PlutoFieldText from '../components/Pluto/Content/fields/PlutoFieldText.vue'
+
+// Registers core's own Home and Settings anchors, plus the eight built-in
+// content field widgets. `order: 0` and `order: 1000` are reserved for the
+// Home/Settings nav entries, so every other layer's nav item sorts between
+// them by default (default order is 100).
+//
+// Everything core itself contributes to the registry lives in this one
+// `definePlutoExtension` call — `definePlutoExtension` replaces a layer's
+// whole contribution on every call, not just the buckets that call passes,
+// so a second `id: 'pluto'` call elsewhere would silently wipe this one out.
+//
+// `richtext` and `media` have no core widget here on purpose — a layer
+// registers those (blog registers `richtext`, storage registers `media`),
+// because core has no real editor or file picker to offer for either. See
+// the content-model skill.
 export default defineNuxtPlugin(() => {
   definePlutoExtension({
     id: 'pluto',
@@ -12,5 +31,15 @@ export default defineNuxtPlugin(() => {
       { id: 'home', path: '/admin/home', title: 'Dashboard', icon: 'lucide:house' },
       { id: 'settings', path: '/admin/settings', title: 'Settings', icon: 'lucide:settings' },
     ],
+    contentFieldWidgets: [
+      { id: 'text', fieldType: 'text', component: PlutoFieldText },
+      { id: 'textarea', fieldType: 'textarea', component: PlutoFieldText },
+      { id: 'slug', fieldType: 'slug', component: PlutoFieldSlug },
+      { id: 'number', fieldType: 'number', component: PlutoFieldNumber },
+      { id: 'boolean', fieldType: 'boolean', component: PlutoFieldBoolean },
+      { id: 'date', fieldType: 'date', component: PlutoFieldDate },
+      { id: 'select', fieldType: 'select', component: PlutoFieldSelect },
+      { id: 'reference', fieldType: 'reference', component: PlutoFieldReference },
+    ],
   })
 })

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@plutocms/pluto",
   "type": "module",
-  "version": "0.6.0",
+  "version": "0.8.0",
   "description": "The layerable CMS",
   "author": "Victor Ribeiro",
   "license": "MIT",
@@ -44,6 +44,7 @@
   "dependencies": {
     "@iconify-json/lucide": "^1.2.116",
     "@iconify-json/simple-icons": "^1.2.89",
+    "@internationalized/date": "^3.12.2",
     "@nuxt/eslint": "^1.16.0",
     "@nuxt/ui": "^4.9.0",
     "@plutocms/utils": "^0.2.1",

package/server/api/_pluto/content/[type]/[id].delete.ts

@@ -0,0 +1,15 @@
+/**
+ * Deletes one item of one content type. Generic, core-internal route — see
+ * the content-model skill for the `/_pluto/` prefix and the
+ * delete-capability enforcement this route follows.
+ */
+export default defineEventHandler(async (event) => {
+  const typeName = getRouterParam(event, 'type')
+  const type = requireContentType(typeName ?? '')
+
+  const id = getRouterParam(event, 'id') ?? ''
+
+  await deleteContentItem({ event, type }, id)
+
+  return { success: true }
+})

package/server/api/_pluto/content/[type]/[id].get.ts

@@ -0,0 +1,13 @@
+/**
+ * Gets one item of one content type, by id or slug. Generic, core-internal
+ * route — see the content-model skill for the `/_pluto/` prefix and the
+ * capability rule this route follows (no `read` capability check, ever).
+ */
+export default defineEventHandler(async (event) => {
+  const typeName = getRouterParam(event, 'type')
+  const type = requireContentType(typeName ?? '')
+
+  const idOrSlug = getRouterParam(event, 'id') ?? ''
+
+  return getContentItem({ event, type }, idOrSlug)
+})

package/server/api/_pluto/content/[type]/[id].patch.ts

@@ -0,0 +1,14 @@
+/**
+ * Updates one item of one content type. Generic, core-internal route — see
+ * the content-model skill for the `/_pluto/` prefix, partial-payload
+ * validation, and the write-capability enforcement this route follows.
+ */
+export default defineEventHandler(async (event) => {
+  const typeName = getRouterParam(event, 'type')
+  const type = requireContentType(typeName ?? '')
+
+  const id = getRouterParam(event, 'id') ?? ''
+  const body = await readBody(event)
+
+  return updateContentItem({ event, type }, id, body)
+})

package/server/api/_pluto/content/[type]/index.get.ts

@@ -0,0 +1,16 @@
+/**
+ * Lists items of one content type. Generic, core-internal route — see the
+ * content-model skill for the `/_pluto/` prefix and the capability rule
+ * this route follows (no `read` capability check, ever).
+ */
+export default defineEventHandler(async (event) => {
+  const typeName = getRouterParam(event, 'type')
+  const type = requireContentType(typeName ?? '')
+
+  const query = getQuery(event)
+  const limit = query.limit === undefined ? undefined : Number.parseInt(query.limit as string, 10)
+  const offset = query.offset === undefined ? undefined : Number.parseInt(query.offset as string, 10)
+  const search = query.search === undefined ? undefined : String(query.search)
+
+  return listContentItems({ event, type }, { limit, offset, search })
+})

package/server/api/_pluto/content/[type]/index.post.ts

@@ -0,0 +1,13 @@
+/**
+ * Creates one item of one content type. Generic, core-internal route — see
+ * the content-model skill for the `/_pluto/` prefix, payload validation,
+ * and the write-capability enforcement this route follows.
+ */
+export default defineEventHandler(async (event) => {
+  const typeName = getRouterParam(event, 'type')
+  const type = requireContentType(typeName ?? '')
+
+  const body = await readBody(event)
+
+  return createContentItem({ event, type }, body)
+})