@xleddyl/nuxt-cms 0.4.4 → 0.5.1

package/dist/runtime/app/pages/admin-collection.vue

@@ -1,33 +1,35 @@
 <template>
    <div class="cms-page" :class="{ 'is-fill': isCollectionKind(config) && !error }">
-      <CmsPageHeader
+      <KPageHeader
          :title="config.label"
-         :icon="kindMeta.icon"
+         :icon="cmsIcon(kindMeta.icon)"
          :description="kindMeta.description"
       >
          <template v-if="config.kind !== 'single' && total" #badge>
             <span :key="total" class="cms-count">{{ total }}</span>
          </template>
-         <CmsButton
-            v-if="config.kind === 'single'"
-            type="submit"
-            :form="FORM_ID"
-            label="Save"
-            :loading="saving"
-         />
-      </CmsPageHeader>
+         <template v-if="config.kind === 'single'" #actions>
+            <KButton type="submit" :form="FORM_ID" label="Save" :loading="saving" />
+         </template>
+      </KPageHeader>
 
-      <CmsEmptyState v-if="error" icon="exclamation-triangle" title="Could not load entries">
-         <CmsButton
-            label="Retry"
-            icon="arrow-path"
-            variant="soft"
-            :loading="status === 'pending'"
-            @click="reload"
-         />
-      </CmsEmptyState>
+      <KEmptyState
+         v-if="error"
+         :icon="cmsIcon('exclamation-triangle')"
+         title="Could not load entries"
+      >
+         <template #actions>
+            <KButton
+               label="Retry"
+               :icon="cmsIcon('arrow-path')"
+               variant="soft"
+               :loading="status === 'pending'"
+               @click="reload"
+            />
+         </template>
+      </KEmptyState>
 
-      <div v-else-if="config.kind === 'single'" class="cms-card cms-panel">
+      <KCard v-else-if="config.kind === 'single'" variant="outline" padding="lg">
          <CmsEntryForm
             v-model="formState"
             :fields="config.fields"
@@ -38,20 +40,20 @@
             :focus="focus"
             @submit="saveSingle"
          />
-      </div>
+      </KCard>
 
       <template v-else-if="config.kind === 'page'">
-         <div class="cms-toolbar">
-            <CmsInput
-               v-if="total || searchTerm"
+         <div v-if="total || searchTerm" class="cms-toolbar">
+            <KInput
                v-model="search"
-               icon="magnifying-glass"
+               :icon="cmsIcon('magnifying-glass')"
                placeholder="Search…"
-               class="flex-1"
+               aria-label="Search pages"
+               class="cms-toolbar-search"
             />
          </div>
 
-         <div v-if="pageTree.length" class="cms-card cms-tree">
+         <KCard v-if="pageTree.length" variant="outline" padding="none" class="cms-tree">
             <NuxtLink
                v-for="(node, index) in pageTree"
                :key="String(node.row.id)"
@@ -62,103 +64,110 @@
   '--cms-row-delay': `${Math.min(index, 14) * 24}ms`
 }"
             >
-               <CmsIcon
+               <KIcon
                   v-if="node.depth"
-                  name="arrow-turn-left-up"
-                  class="cms-tree-branch size-3.5"
+                  :name="cmsIcon('arrow-turn-left-up')"
+                  class="cms-tree-branch"
                />
                <span class="cms-tree-doc">
-                  <CmsIcon name="document-text" class="size-4" />
+                  <KIcon :name="cmsIcon('document-text')" />
+               </span>
+               <span class="cms-tree-text">
+                  <span class="cms-tree-title">{{ node.row.label }}</span>
+                  <span class="cms-tree-path">{{ node.row.path }}</span>
                </span>
-               <div class="min-w-0 flex-1">
-                  <div class="cms-tree-title">
-                     {{ node.row.label }}
-                  </div>
-                  <div class="cms-tree-path">{{ node.row.path }}</div>
-               </div>
                <span class="cms-tree-meta">{{ lastEdit(node.row.updatedAt) }}</span>
-               <CmsIcon name="chevron-right" class="cms-tree-chevron size-4" />
+               <KIcon name="chevron-right" class="cms-tree-chevron" />
             </NuxtLink>
-         </div>
+         </KCard>
 
-         <CmsSpinner v-else-if="status === 'pending'" />
+         <KSpinner v-else-if="status === 'pending'" block />
 
-         <CmsEmptyState v-else-if="searchTerm" icon="magnifying-glass" title="No matching pages" />
+         <KEmptyState
+            v-else-if="searchTerm"
+            :icon="cmsIcon('magnifying-glass')"
+            title="No matching pages"
+         />
 
-         <CmsEmptyState
+         <KEmptyState
             v-else
-            icon="document-text"
+            :icon="cmsIcon('document-text')"
             title="No pages yet"
-            body="Pages come from the routes of the app."
+            description="Pages come from the routes of the app."
          />
 
-         <CmsPagination v-model:page="page" :total="total" :items-per-page="PAGE_SIZE" />
+         <KPagination
+            v-model:page="page"
+            :total="total"
+            :page-size="PAGE_SIZE"
+            :show-summary="false"
+         />
       </template>
 
       <template v-else>
          <div class="cms-toolbar">
-            <CmsInput
+            <KInput
                v-if="total || narrowed"
                v-model="search"
-               icon="magnifying-glass"
+               :icon="cmsIcon('magnifying-glass')"
                placeholder="Search…"
-               class="flex-1"
+               aria-label="Search entries"
+               class="cms-toolbar-search"
             />
-            <div v-if="selected.length" :key="'bulk'" class="cms-toolbar-actions cms-bulk-actions">
-               <span class="cms-bulk-count">{{ selected.length }} selected</span>
-               <CmsButton
-                  icon="x-mark"
-                  variant="ghost"
-                  color="neutral"
-                  size="sm"
-                  aria-label="Clear selection"
-                  title="Clear selection"
-                  @click="selected = []"
-               />
-               <template v-if="drafts">
-                  <CmsButton
-                     label="Draft"
-                     icon="pencil-square"
-                     variant="soft"
-                     :disabled="saving"
-                     @click="bulkStatus('draft')"
-                  />
-                  <CmsButton
-                     label="Publish"
-                     icon="check-circle"
-                     variant="soft"
-                     :disabled="saving"
-                     @click="bulkStatus('published')"
-                  />
+            <div class="cms-toolbar-actions">
+               <KSelectionBar
+                  :count="selected.length"
+                  :total="rows.length"
+                  :on-select-all="selectAll"
+                  :on-clear="clearSelection"
+               >
+                  <template #actions>
+                     <template v-if="drafts">
+                        <KButton
+                           label="Draft"
+                           :icon="cmsIcon('pencil-square')"
+                           variant="soft"
+                           :disabled="saving"
+                           @click="bulkStatus('draft')"
+                        />
+                        <KButton
+                           label="Publish"
+                           :icon="cmsIcon('check-circle')"
+                           variant="soft"
+                           :disabled="saving"
+                           @click="bulkStatus('published')"
+                        />
+                     </template>
+                     <KButton
+                        v-if="selected.length === 1"
+                        label="Duplicate"
+                        :icon="cmsIcon('document-duplicate')"
+                        variant="soft"
+                        :disabled="saving"
+                        @click="duplicateSelected"
+                     />
+                     <KButton
+                        label="Delete"
+                        :icon="cmsIcon('trash')"
+                        tone="danger"
+                        :loading="saving"
+                        @click="bulkDelete"
+                     />
+                  </template>
+               </KSelectionBar>
+               <template v-if="!selected.length">
+                  <KDropdownMenu :items="transferItems" placement="bottom-end">
+                     <KButton
+                        :icon="cmsIcon('arrows-up-down')"
+                        variant="soft"
+                        tone="neutral"
+                        :loading="exporting"
+                        aria-label="Import and export"
+                        title="Import and export"
+                     />
+                  </KDropdownMenu>
+                  <KButton label="New entry" icon="plus" @click="openCreate" />
                </template>
-               <CmsButton
-                  v-if="selected.length === 1"
-                  label="Duplicate"
-                  icon="document-duplicate"
-                  variant="soft"
-                  :disabled="saving"
-                  @click="duplicateSelected"
-               />
-               <CmsButton
-                  label="Delete"
-                  icon="trash"
-                  color="error"
-                  :loading="saving"
-                  @click="bulkDelete"
-               />
-            </div>
-            <div v-else :key="'default'" class="cms-toolbar-actions">
-               <CmsDropdownMenu :items="transferItems" :content="{ align: 'end' }">
-                  <CmsButton
-                     icon="arrows-up-down"
-                     variant="soft"
-                     color="neutral"
-                     :loading="exporting"
-                     aria-label="Import and export"
-                     title="Import and export"
-                  />
-               </CmsDropdownMenu>
-               <CmsButton label="New entry" icon="plus" @click="openCreate" />
             </div>
          </div>
 
@@ -170,55 +179,59 @@
             :relations="relations"
          />
 
-         <CmsTable
+         <KTable
             v-if="rows.length"
             v-model:selected="selected"
-            selectable
             v-model:sort="sort"
-            :data="rows"
+            selectable
+            :rows="rows"
             :columns="columns"
-            @select="onSelect"
+            :row-key="rowKey"
+            @row-click="onSelect"
          >
-            <template v-for="key in mediaKeys" #[`${key}-cell`]="{ row }" :key="key">
-               <CmsMediaThumb :value="mediaThumbValue(key, row.original[key])" />
+            <template v-for="key in mediaKeys" #[`cell-${key}`]="{ row }" :key="key">
+               <CmsMediaThumb :value="mediaThumbValue(key, row[key])" />
             </template>
-            <template v-if="drafts" #status-cell="{ row }">
+            <template v-if="drafts" #cell-status="{ row }">
                <CmsStatusBadge
-                  :published="row.original.status === 'published'"
-                  :scheduled="mounted && isContent && isScheduledContent(row.original)"
-                  :at="formatDateTime(row.original.publishedAt)"
+                  :published="row.status === 'published'"
+                  :scheduled="mounted && isContent && isScheduledContent(row)"
+                  :at="formatDateTime(row.publishedAt)"
                />
             </template>
-         </CmsTable>
+         </KTable>
 
-         <CmsSpinner v-else-if="status === 'pending'" />
+         <KSpinner v-else-if="status === 'pending'" block />
 
-         <CmsEmptyState
+         <KEmptyState
             v-else-if="narrowed"
-            icon="magnifying-glass"
+            :icon="cmsIcon('magnifying-glass')"
             title="No matching entries"
             fill
          >
-            <CmsButton
-               v-if="filterCount"
-               label="Clear filters"
-               icon="x-mark"
-               variant="soft"
-               @click="filters = {}"
-            />
-         </CmsEmptyState>
+            <template v-if="filterCount" #actions>
+               <KButton label="Clear filters" icon="x-mark" variant="soft" @click="filters = {}" />
+            </template>
+         </KEmptyState>
 
-         <CmsEmptyState
+         <KEmptyState
             v-else
-            icon="sparkles"
+            :icon="cmsIcon('sparkles')"
             title="Nothing here yet"
-            body="Entries you create will show up here."
+            description="Entries you create will show up here."
             fill
          >
-            <CmsButton label="New entry" icon="plus" variant="soft" @click="openCreate" />
-         </CmsEmptyState>
+            <template #actions>
+               <KButton label="New entry" icon="plus" variant="soft" @click="openCreate" />
+            </template>
+         </KEmptyState>
 
-         <CmsPagination v-model:page="page" :total="total" :items-per-page="PAGE_SIZE" />
+         <KPagination
+            v-model:page="page"
+            :total="total"
+            :page-size="PAGE_SIZE"
+            :show-summary="false"
+         />
 
          <CmsEntryDrawer
             v-if="!isContent"
@@ -263,6 +276,19 @@ import {
   useRoute,
   watch
 } from "#imports";
+import {
+  Button as KButton,
+  Card as KCard,
+  DropdownMenu as KDropdownMenu,
+  EmptyState as KEmptyState,
+  Icon as KIcon,
+  Input as KInput,
+  PageHeader as KPageHeader,
+  Pagination as KPagination,
+  SelectionBar as KSelectionBar,
+  Spinner as KSpinner,
+  Table as KTable
+} from "@xleddyl/443-components-vue";
 import cmsConfig from "#cms-config";
 import { duplicateEntryValues } from "../../shared/duplicate";
 import {
@@ -278,7 +304,7 @@ import { useCmsRuntime } from "../composables/cms-runtime";
 import { entryListColumns, useCmsSettingsState } from "../composables/cms-settings";
 import { useCmsToast } from "../composables/cms-toast";
 import { cmsApi } from "../utils/api";
-import { errorMessage } from "../utils/ui";
+import { cmsIcon, errorMessage } from "../utils/ui";
 definePageMeta({
   layout: "cms-admin",
   middleware: "cms-auth",
@@ -342,7 +368,7 @@ watch(
   }
 );
 const sortQuery = computed(
-  () => sort.value ? { sort: sort.value.key, order: sort.value.order } : {}
+  () => sort.value ? { sort: sort.value.key, order: sort.value.direction } : {}
 );
 const listQuery = computed(() => ({
   limit: PAGE_SIZE,
@@ -496,14 +522,17 @@ function isSortable(field) {
 const settings = useCmsSettingsState();
 const columns = computed(
   () => entryListColumns(name, settings.value).map(
-    (key) => key === "status" && !config.fields.status ? { accessorKey: "status", header: "Status", sortable: true } : {
-      id: key,
-      accessorFn: (row) => displayValue(config.fields[key], key, row[key]),
-      header: config.fields[key].label,
+    (key) => key === "status" && !config.fields.status ? { key: "status", label: "Status", sortable: true } : {
+      key,
+      label: config.fields[key].label,
+      value: (row) => displayValue(config.fields[key], key, row[key]),
       sortable: isSortable(config.fields[key])
     }
   )
 );
+function rowKey(row) {
+  return String(row.id);
+}
 const filterKeys = computed(() => {
   if (!isCollectionKind(config)) return [];
   const shown = entryListFilterKeys(config, entryListColumns(name, settings.value));
@@ -513,13 +542,13 @@ const filterKeys = computed(() => {
 const drawerOpen = ref(false);
 const drawerEntryId = ref(null);
 const drawerInitial = ref(null);
-function onSelect(_event, row) {
+function onSelect(row) {
   if (isContent) {
-    void navigateTo(`/cms/${name}/${row.original.id}`);
+    void navigateTo(`/cms/${name}/${row.id}`);
     return;
   }
   drawerInitial.value = null;
-  drawerEntryId.value = String(row.original.id);
+  drawerEntryId.value = String(row.id);
   drawerOpen.value = true;
 }
 function openCreate() {
@@ -537,7 +566,7 @@ function openDuplicate(values) {
   drawerOpen.value = true;
 }
 async function duplicateSelected() {
-  const id = selected.value[0];
+  const id = selected.value.map(String)[0];
   if (!id || saving.value) return;
   if (isContent) {
     void navigateTo({ path: `/cms/${name}/new`, query: { duplicate: id } });
@@ -605,8 +634,14 @@ const confirmAction = useCmsConfirm();
 const selected = ref([]);
 watch(rows, (current) => {
   const ids = new Set(current.map((row) => String(row.id)));
-  selected.value = selected.value.filter((id) => ids.has(id));
+  selected.value = selected.value.filter((id) => ids.has(String(id)));
 });
+function selectAll() {
+  selected.value = rows.value.map(rowKey);
+}
+function clearSelection() {
+  selected.value = [];
+}
 function entriesLabel(count) {
   return `${count} ${count === 1 ? "entry" : "entries"}`;
 }
@@ -636,7 +671,7 @@ function reportBulk(done, total2, failed) {
   }
 }
 async function bulkDelete() {
-  const ids = [...selected.value];
+  const ids = selected.value.map(String);
   if (!ids.length || saving.value) return;
   if (!await confirmAction(`Delete ${entriesLabel(ids.length)}?`)) return;
   const emptiesPage = ids.length >= rows.value.length && page.value > 1;
@@ -645,7 +680,7 @@ async function bulkDelete() {
   if (!failed.length && emptiesPage) page.value -= 1;
 }
 async function bulkStatus(status2) {
-  const ids = [...selected.value];
+  const ids = selected.value.map(String);
   if (!ids.length || saving.value) return;
   const failed = await runBulk(ids, async (id) => {
     const entry = await cmsApi(`${endpoint}/${id}`);

package/dist/runtime/app/pages/admin-content.vue

@@ -10,11 +10,11 @@
       content
    >
       <template #start>
-         <CmsButton
-            icon="arrow-left"
+         <KButton
+            :icon="cmsIcon('arrow-left')"
             size="sm"
             variant="ghost"
-            color="neutral"
+            tone="neutral"
             :aria-label="`Back to ${config.label}`"
             :title="`Back to ${config.label}`"
             @click="goBack"
@@ -27,77 +27,75 @@
       </template>
 
       <template #actions>
-         <CmsPopover v-model:open="scheduleOpen" class="cms-editor-schedule">
-            <CmsButton
-               icon="clock"
+         <KPopover v-model:open="scheduleOpen" placement="bottom-end" label="Schedule">
+            <KButton
+               :icon="cmsIcon('clock')"
                size="sm"
                variant="ghost"
-               color="neutral"
+               tone="neutral"
                :label="scheduled ? 'Reschedule' : 'Schedule'"
                :disabled="saving"
-               aria-haspopup="dialog"
-               :aria-expanded="scheduleOpen"
             />
             <template #content>
-               <div class="cms-editor-schedule-panel" role="dialog" aria-label="Schedule">
-                  <CmsFormField
+               <KStack gap="md" class="cms-editor-schedule-panel">
+                  <KFormField
                      label="Publish at"
                      description="The item stays hidden from the site until this moment."
                   >
                      <CmsFieldInput v-model="scheduleDraft" :field="publishedAtField" />
-                  </CmsFormField>
-                  <div class="cms-actions is-end">
-                     <CmsButton
+                  </KFormField>
+                  <KStack direction="row" justify="end" gap="sm">
+                     <KButton
                         label="Cancel"
                         size="sm"
                         variant="ghost"
-                        color="neutral"
+                        tone="neutral"
                         @click="scheduleOpen = false"
                      />
-                     <CmsButton
+                     <KButton
                         label="Schedule"
                         size="sm"
                         :disabled="!scheduleDraft"
                         :loading="saving"
                         @click="schedule"
                      />
-                  </div>
-               </div>
+                  </KStack>
+               </KStack>
             </template>
-         </CmsPopover>
-         <CmsButton
+         </KPopover>
+         <KButton
             label="Save"
             size="sm"
             variant="soft"
-            color="neutral"
+            tone="neutral"
             :loading="saving"
             @click="save()"
          />
-         <CmsButton
+         <KButton
             :label="published ? 'Unpublish' : 'Publish'"
             size="sm"
             :variant="published ? 'soft' : 'solid'"
-            :color="published ? 'neutral' : 'primary'"
+            :tone="published ? 'neutral' : 'accent'"
             :loading="saving"
             @click="save(published ? 'draft' : 'published')"
          />
-         <CmsDropdownMenu
+         <KDropdownMenu
             v-if="!isNew"
             :items="[
   { label: 'Duplicate', onSelect: duplicate },
   { label: 'Delete', onSelect: remove }
 ]"
-            :content="{ align: 'end' }"
+            placement="bottom-end"
          >
-            <CmsButton
-               icon="ellipsis-horizontal"
+            <KButton
+               :icon="cmsIcon('ellipsis-horizontal')"
                size="sm"
                variant="ghost"
-               color="neutral"
+               tone="neutral"
                aria-label="More actions"
                title="More actions"
             />
-         </CmsDropdownMenu>
+         </KDropdownMenu>
       </template>
    </CmsVisualEditor>
 </template>
@@ -123,6 +121,13 @@ import {
   useRoute,
   watch
 } from "#imports";
+import {
+  Button as KButton,
+  DropdownMenu as KDropdownMenu,
+  FormField as KFormField,
+  Popover as KPopover,
+  Stack as KStack
+} from "@xleddyl/443-components-vue";
 import cmsConfig from "#cms-config";
 import { duplicateEntryValues } from "../../shared/duplicate";
 import { readSearchFocus } from "../../shared/search";
@@ -130,7 +135,7 @@ import { useCmsConfirm } from "../composables/cms-confirm";
 import { useCmsRuntime } from "../composables/cms-runtime";
 import { useCmsToast } from "../composables/cms-toast";
 import { cmsApi } from "../utils/api";
-import { errorMessage } from "../utils/ui";
+import { cmsIcon, errorMessage } from "../utils/ui";
 definePageMeta({
   layout: "cms-editor",
   middleware: "cms-auth",

package/dist/runtime/app/pages/admin-entry.vue

@@ -1,13 +1,13 @@
 <template>
    <div class="cms-page">
-      <CmsPageHeader :title="headerTitle" :links="breadcrumb">
+      <KPageHeader :title="headerTitle" :breadcrumbs="breadcrumb" breadcrumbs-ancestors>
          <template v-if="drafts" #badge>
             <CmsStatusBadge :published="published" />
          </template>
-         <div class="cms-actions">
-            <CmsButton label="Back" icon="arrow-left" variant="soft" @click="goBack" />
-            <CmsButton type="submit" :form="FORM_ID" label="Save" :loading="saving" />
-            <CmsButton
+         <template #actions>
+            <KButton label="Back" icon="arrow-left" variant="soft" @click="goBack" />
+            <KButton type="submit" :form="FORM_ID" label="Save" :loading="saving" />
+            <KButton
                v-if="drafts"
                type="submit"
                :form="FORM_ID"
@@ -15,10 +15,10 @@
                :loading="saving"
                @click="togglePublished"
             />
-         </div>
-      </CmsPageHeader>
+         </template>
+      </KPageHeader>
 
-      <div class="cms-card cms-panel">
+      <KCard variant="outline" padding="lg">
          <CmsEntryForm
             v-model="formState"
             :fields="fields"
@@ -32,7 +32,7 @@
             @submit="save"
             @error="revertStatus"
          />
-      </div>
+      </KCard>
    </div>
 </template>
 
@@ -50,6 +50,11 @@ import {
   useRoute,
   watch
 } from "#imports";
+import {
+  Button as KButton,
+  Card as KCard,
+  PageHeader as KPageHeader
+} from "@xleddyl/443-components-vue";
 import cmsConfig from "#cms-config";
 import { readSearchFocus } from "../../shared/search";
 import { useCmsConfirm } from "../composables/cms-confirm";