@plutocms/pluto 0.9.1 → 0.11.0

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

@@ -13,7 +13,9 @@ 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.`)
+  console.error(
+    `PlutoContentList: content type "${props.type}" was not found in the registry.`
+  )
 }
 
 const { can } = usePlutoPermissions()
@@ -21,19 +23,27 @@ 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)
+  () =>
+    !contentType.value?.capabilities?.write ||
+    can(contentType.value.capabilities.write)
 )
 const canDelete = computed(
-  () => !contentType.value?.capabilities?.delete || can(contentType.value.capabilities.delete)
+  () =>
+    !contentType.value?.capabilities?.delete ||
+    can(contentType.value.capabilities.delete)
 )
 
-const basePath = computed(() => contentType.value?.basePath ?? `/admin/content/${props.type}`)
+const basePath = computed(
+  () => contentType.value?.basePath ?? `/admin/content/${props.type}`
+)
 
 // newPath/editPath exist so an already-deployed layer's URLs never have
 // to change to adopt this component — see the doc comments on
 // PlutoContentType.newPath/editPath for why a single basePath cannot
 // always express both.
-const newPath = computed(() => contentType.value?.newPath ?? `${basePath.value}/new`)
+const newPath = computed(
+  () => contentType.value?.newPath ?? `${basePath.value}/new`
+)
 function editPath(id: string | number) {
   return contentType.value?.editPath?.(id) ?? `${basePath.value}/${id}`
 }
@@ -47,7 +57,10 @@ const listFields = computed(() =>
 )
 
 const columns = computed<TableColumn<PlutoContentItem>[]>(() => [
-  ...listFields.value.map((field) => ({ accessorKey: field.name, header: field.label })),
+  ...listFields.value.map((field) => ({
+    accessorKey: field.name,
+    header: field.label,
+  })),
   { id: 'actions', header: '' },
 ])
 
@@ -75,30 +88,10 @@ async function confirmDelete() {
 </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>
-
+  <PlutoViewAdminPanel v-if="contentType">
+    <template #toolbar>
+      <PlutoViewToolbar :title="contentType.labelPlural">
+        <template #trailing>
           <UButton
             :loading="pending"
             icon="lucide:refresh-ccw"
@@ -107,100 +100,125 @@ async function confirmDelete() {
             square
             @click="refresh()"
           />
-        </hgroup>
+        </template>
 
-        <div v-if="canWrite" class="flex lg:shrink-0">
-          <UButton
-            :to="newPath"
-            icon="lucide:plus"
-            as="NuxtLink"
-            class="flex-1 justify-center lg:flex-none"
-          >
+        <template v-if="canWrite" #right>
+          <UButton :to="newPath" icon="lucide:plus" as="NuxtLink">
             Add {{ contentType.labelPlural }}
           </UButton>
-        </div>
-      </div>
+        </template>
+      </PlutoViewToolbar>
+    </template>
+
+    <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="editPath(item.id)"
+              class="block truncate text-lg font-semibold hover:underline"
+            >
+              {{ item[contentType.titleField] }}
+            </NuxtLink>
+          </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="editPath(item.id)"
-                class="block truncate text-lg font-semibold hover:underline"
-              >
-                {{ item[contentType.titleField] }}
-              </NuxtLink>
+          <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 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
+          </dl>
+
+          <div class="border-default flex gap-2 border-t pt-3">
+            <UButton
+              v-if="canWrite"
+              :to="editPath(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="editPath(item.id)"
-                icon="lucide:pen-line"
-                color="neutral"
-                variant="soft"
-                class="flex-1 justify-center"
+                :to="editPath(row.original.id)"
+                class="text-info px-0 py-0.5 hover:underline"
               >
                 Edit
-              </UButton>
+              </NuxtLink>
 
-              <UButton
+              <button
                 v-if="canDelete"
-                icon="lucide:trash"
-                color="error"
-                variant="soft"
-                class="flex-1 justify-center"
-                @click="openDeleteModal(item.id)"
+                type="button"
+                class="text-error cursor-pointer px-0 py-0.5 hover:underline"
+                @click="openDeleteModal(row.original.id)"
               >
                 Remove
-              </UButton>
+              </button>
             </div>
-          </div>
-        </UCard>
+          </template>
+        </UTable>
       </div>
+    </UCard>
+  </PlutoViewAdminPanel>
 
-      <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="editPath(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>
+  <PlutoViewAdminPanel v-else>
     <UAlert
       :description="`No content type named &quot;${type}&quot; is registered.`"
       color="error"
       title="Content type not found"
     />
-  </AdminView>
+  </PlutoViewAdminPanel>
+
+  <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>
 </template>

package/app/components/Pluto/Navbar/PlutoNavbarAdmin.vue

@@ -2,7 +2,7 @@
 
 <template>
   <nav
-    class="light:bg-white light:border-black/10 font-outfit sticky top-0 z-50 h-14 shrink-0 border-b lg:h-10 dark:border-white/5 dark:bg-black dark:text-white"
+    class="light:bg-white light:border-black/10 font-outfit fixed inset-0 z-50 h-(--ui-header-height) shrink-0 border-b dark:border-white/5 dark:bg-black dark:text-white"
   >
     <slot />
   </nav>

package/app/components/Pluto/View/PlutoViewAdminPanel.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    /** Drop the max-width container in the main region. Default 'container'. */
+    width?: 'container' | 'full'
+  }>(),
+  {
+    width: 'container',
+  }
+)
+</script>
+
+<template>
+  <div class="flex h-full min-h-0 flex-col overflow-hidden">
+    <div class="shrink-0">
+      <slot name="toolbar" />
+    </div>
+
+    <div class="flex flex-1 min-h-0 overflow-hidden">
+      <main class="flex-1 min-h-0 overflow-y-auto">
+        <!--
+          'container' matches AdminView's own padding/gap classes, so a view
+          moving from AdminView to this panel looks the same. 'full' adds
+          none — a focus-layout consumer (e.g. a rich text editor) supplies
+          its own padding instead.
+        -->
+        <UContainer
+          v-if="width === 'container'"
+          class="flex max-w-300 flex-col gap-y-6 px-4 py-6 sm:px-6 lg:gap-y-8 lg:px-8 lg:py-10"
+        >
+          <slot />
+        </UContainer>
+        <slot v-else />
+      </main>
+
+      <div class="shrink-0">
+        <slot name="aside" />
+      </div>
+    </div>
+  </div>
+</template>

package/app/components/Pluto/View/PlutoViewAside.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+// Do NOT use UDashboardSidebar here. Nuxt UI's UDashboardSidebar listens to
+// a GLOBAL `dashboard:sidebar:toggle` runtime hook, not a per-instance one.
+// A second instance of it (this aside) would open and close in lockstep
+// with the app's own LEFT sidebar from admin.vue. This component is a
+// hand-built stand-in instead: a plain `<aside>` on desktop, a `USlideover`
+// on mobile, both bound to the same `open` model.
+withDefaults(
+  defineProps<{
+    title?: string
+    /** Desktop width, in px. Default 320. */
+    width?: number
+  }>(),
+  {
+    width: 320,
+  }
+)
+
+const open = defineModel<boolean>('open', { default: false })
+
+function close() {
+  open.value = false
+}
+
+// Open the slideover on mobile only. A `lg:hidden` class alone is not
+// enough: an open slideover is a modal dialog, so it disables pointer
+// events on the rest of the page even while it is hidden. On desktop, the
+// page then stops taking clicks as soon as the aside opens. It also mounts
+// the slot a second time.
+const isDesktop = useMediaQuery('(min-width: 64rem)')
+const slideoverOpen = computed({
+  get: () => open.value && !isDesktop.value,
+  set: (value: boolean) => {
+    open.value = value
+  },
+})
+</script>
+
+<template>
+  <aside
+    v-if="open"
+    :style="{ width: `${width}px` }"
+    class="border-default hidden h-full shrink-0 flex-col border-s lg:flex"
+  >
+    <div class="border-default flex h-12 shrink-0 items-center justify-between gap-1.5 border-b px-4">
+      <h2 class="text-highlighted truncate text-sm font-semibold">{{ title }}</h2>
+      <UButton
+        icon="i-lucide-x"
+        color="neutral"
+        variant="ghost"
+        square
+        @click="close"
+      />
+    </div>
+    <div class="min-h-0 flex-1 overflow-y-auto p-4">
+      <slot />
+    </div>
+  </aside>
+
+  <USlideover
+    v-model:open="slideoverOpen"
+    :title="title"
+    side="right"
+  >
+    <template #body>
+      <slot />
+    </template>
+  </USlideover>
+</template>

package/app/components/Pluto/View/PlutoViewToolbar.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+defineProps<{
+  title?: string
+  icon?: string
+  /** Path for a back button, rendered before the title. */
+  backTo?: string
+}>()
+
+defineSlots<{
+  left?: () => unknown
+  title?: () => unknown
+  default?: () => unknown
+  right?: () => unknown
+  trailing?: () => unknown
+}>()
+</script>
+
+<template>
+  <!--
+    `:toggle="false"` is load-bearing. UDashboardNavbar's default toggle
+    button calls Nuxt UI's global `dashboard:sidebar:toggle` hook, which
+    controls the app-level LEFT sidebar from admin.vue. This is a SECOND,
+    page-local navbar — its own toggle would open and close the wrong
+    sidebar, so it must never render one.
+  -->
+  <UDashboardNavbar
+    :title="title"
+    :icon="icon"
+    :toggle="false"
+    :ui="{ root: 'h-12 border-muted' }"
+  >
+    <template v-if="$slots.left" #left>
+      <slot name="left" />
+    </template>
+
+    <template v-if="backTo || icon" #leading>
+      <UButton
+        v-if="backTo"
+        :to="backTo"
+        icon="i-lucide-arrow-left"
+        color="neutral"
+        variant="ghost"
+        square
+      />
+      <UIcon v-if="icon" :name="icon" class="me-1.5 size-5 shrink-0 self-center" />
+    </template>
+
+    <template v-if="$slots.title" #title>
+      <slot name="title" />
+    </template>
+
+    <template v-if="$slots.default" #default>
+      <slot />
+    </template>
+
+    <template v-if="$slots.right" #right>
+      <slot name="right" />
+    </template>
+
+    <template v-if="$slots.trailing" #trailing>
+      <slot name="trailing" />
+    </template>
+  </UDashboardNavbar>
+</template>

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

@@ -0,0 +1,17 @@
+/**
+ * The `PlutoContentAction` entries that apply to one content type, at one
+ * placement. Matches an entry whose `contentType` is `typeName` or `'*'`,
+ * the same matching rule `usePlutoContentFieldWidget` uses for field type.
+ * `placement` defaults to 'toolbar', matching `PlutoContentAction.placement`.
+ */
+export function usePlutoContentActions(typeName: string, placement: 'toolbar' | 'aside' = 'toolbar') {
+  const registry = usePlutoRegistry()
+
+  return computed(() =>
+    registry.contentActions.list.value.filter(
+      (action) =>
+        (action.contentType === typeName || action.contentType === '*') &&
+        (action.placement ?? 'toolbar') === placement
+    )
+  )
+}

package/app/composables/pluto-extension.ts

@@ -28,5 +28,6 @@ export function definePlutoExtension(definition: PlutoExtension): void {
   )
   registry.contentTypes.set(definition.id, definition.contentTypes ?? [])
   registry.contentFieldWidgets.set(definition.id, definition.contentFieldWidgets ?? [])
+  registry.contentActions.set(definition.id, definition.contentActions ?? [])
   registry.mediaAdapters.set(definition.id, definition.mediaAdapters ?? [])
 }

package/app/composables/pluto-registry.ts

@@ -25,6 +25,7 @@ export function usePlutoRegistry(): PlutoRegistry {
       permissionsDrivers: createOwnedRegistry<PlutoPermissionsDriver>(),
       contentTypes: createOwnedRegistry<PlutoContentTypeEntry>(),
       contentFieldWidgets: createOwnedRegistry<PlutoContentFieldWidget>(),
+      contentActions: createOwnedRegistry<PlutoContentAction>(),
       mediaAdapters: createOwnedRegistry<PlutoMediaAdapterEntry>(),
     }
   }

package/app/layouts/admin.vue

@@ -28,76 +28,49 @@ function toMenuItem(item: PlutoNavItem): SidebarMenuItem {
 const { items: navItems } = usePlutoAdminNav()
 const menu = computed<SidebarMenuItem[]>(() => navItems.value.map(toMenuItem))
 
-const route = useRoute()
+// This key is a cross-repo contract: `supabase`'s own mobile navbar
+// (`app/components/navbar/NavbarAdmin.vue`) writes to this exact state key
+// to open the sidebar from its own hamburger button. Keep the name as-is.
 const isSidebarOpen = useState<boolean>('pluto-admin-sidebar-open', () => false)
-
-function closeSidebar() {
-  isSidebarOpen.value = false
-}
-
-watch(
-  () => route.fullPath,
-  closeSidebar
-)
 </script>
 
 <template>
-  <div
-    class="dark:bg-admin-content light:bg-white font-outfit flex h-full min-h-0 grow flex-col overflow-hidden"
+  <UDashboardGroup
+    :class="(base: string) => base.replace('inset-0', 'inset-x-0 bottom-0 top-(--ui-header-height)')"
+    storage="cookie"
+    storage-key="pluto-admin"
+    unit="rem"
   >
-    <div class="relative flex min-h-0 flex-1 items-stretch">
-      <Transition name="sidebar-fade">
-        <button
-          v-if="isSidebarOpen"
-          type="button"
-          aria-label="Close navigation"
-          class="fixed inset-x-0 top-14 bottom-0 z-40 bg-black/50 backdrop-blur-xs lg:hidden"
-          @click="closeSidebar"
-        />
-      </Transition>
-
-      <aside
-        :class="isSidebarOpen ? 'translate-x-0' : '-translate-x-full'"
-        class="dark:bg-admin-sidebar light:bg-zinc-100 border-default fixed inset-y-14 left-0 z-50 flex w-[min(18rem,85vw)] shrink-0 flex-col border-r px-3 py-4 shadow-2xl transition-transform duration-200 lg:static lg:inset-auto lg:z-auto lg:w-64 lg:translate-x-0 lg:shadow-none"
-      >
-        <div class="mb-3 flex items-center justify-between px-2 lg:hidden">
-          <span class="text-muted text-sm font-semibold">Navigation</span>
-          <UButton
-            icon="lucide:x"
-            color="neutral"
-            variant="ghost"
-            aria-label="Close navigation"
-            square
-            @click="closeSidebar"
-          />
-        </div>
-
-        <UNavigationMenu
-          :items="menu"
-          :ui="{
-            link: 'text-base gap-x-3 font-normal',
-          }"
-          orientation="vertical"
-          class="data-[orientation=vertical]:w-full"
-          highlight
-        />
-      </aside>
+    <UDashboardSidebar
+      id="admin"
+      v-model:open="isSidebarOpen"
+      :default-size="16"
+      :min-size="12"
+      :max-size="24"
+      :ui="{
+        root: 'min-h-0 dark:bg-admin-sidebar light:bg-zinc-100',
+        content: 'lg:hidden w-[min(18rem,85vw)]',
+      }"
+      resizable
+    >
+      <UNavigationMenu
+        :items="menu"
+        :ui="{ link: 'text-base gap-x-3 font-normal' }"
+        orientation="vertical"
+        class="data-[orientation=vertical]:w-full"
+        highlight
+      />
+    </UDashboardSidebar>
 
-      <div class="min-w-0 grow overflow-x-hidden overflow-y-auto">
+    <UDashboardPanel
+      :ui="{
+        root: 'min-h-0 dark:bg-admin-content light:bg-white font-outfit',
+        body: 'p-0 gap-0 overflow-x-hidden',
+      }"
+    >
+      <template #body>
         <slot />
-      </div>
-    </div>
-  </div>
+      </template>
+    </UDashboardPanel>
+  </UDashboardGroup>
 </template>
-
-<style scoped>
-.sidebar-fade-enter-active,
-.sidebar-fade-leave-active {
-  transition: opacity 200ms ease;
-}
-
-.sidebar-fade-enter-from,
-.sidebar-fade-leave-to {
-  opacity: 0;
-}
-</style>