@xleddyl/nuxt-cms 0.4.4 → 0.5.0

package/README.md

@@ -11,7 +11,7 @@ nuxt-cms is a Nuxt module that adds a CMS to your Nuxt app. The CMS runs in the
 ## Features
 
 - **Content types in code.** You declare collections, singles, pages and content types (news, blog) in `cms.config.ts`. The module generates the database schema, the migrations and the TypeScript types.
-- **Admin panel at `/cms`.** Editors manage entries, drafts and media, filter and duplicate entries, and import or export a collection as JSON or CSV. The panel has a light and a dark theme, a global search (⌘K) and admin accounts.
+- **Admin panel at `/cms`.** Editors manage entries, drafts and media, filter and duplicate entries, and import or export a collection as JSON or CSV. The panel has a light and a dark theme, a global search (⌘K) and admin accounts. It is built on [@xleddyl/443-components-vue](https://www.npmjs.com/package/@xleddyl/443-components-vue), installed for you; the module adds no Tailwind or other build plugins to your app.
 - **Visual editor.** Editors build content from your own site components, on a live preview of the site.
 - **GraphQL API.** A read-only, typed API with filters, sorting and pagination. Composables such as `useCmsCollection` and `useCmsContent` query it for you.
 - **Your database.** SQLite (default), Postgres, libSQL/Turso or Cloudflare D1.

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@xleddyl/nuxt-cms",
   "configKey": "cms",
-  "version": "0.4.4",
+  "version": "0.5.0",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "unknown"

package/dist/module.mjs

@@ -3,9 +3,7 @@ import { existsSync, readFileSync } from 'node:fs';
 import { createRequire } from 'node:module';
 import { extname, resolve, isAbsolute, join, relative, dirname } from 'node:path';
 import { fileURLToPath } from 'node:url';
-import { defineNuxtModule, createResolver, useLogger, addImports, addTemplate, addServerPlugin, addTypeTemplate, addVitePlugin, addComponentsDir, addRouteMiddleware, extendPages, addServerHandler, resolvePath, addComponent } from '@nuxt/kit';
-import tailwindcss from '@tailwindcss/vite';
-import svgLoader from 'vite-svg-loader';
+import { defineNuxtModule, createResolver, useLogger, addImports, addTemplate, addServerPlugin, addTypeTemplate, addComponentsDir, addRouteMiddleware, extendPages, addServerHandler, resolvePath, addComponent } from '@nuxt/kit';
 import { introspectionFromSchema, buildSchema } from 'graphql';
 import { minifyIntrospection, outputIntrospectionFile } from 'gql.tada/internal';
 import { createJiti } from 'jiti';
@@ -1527,7 +1525,23 @@ const module$1 = defineNuxtModule({
   moduleDependencies: (nuxt) => resolveCmsEnabled(
     nuxt.options.cms?.enabled,
     process.env[CMS_ENABLED_ENV]
-  ) ? { "nuxt-auth-utils": {} } : {},
+  ) ? {
+    "nuxt-auth-utils": {},
+    "@xleddyl/443-components-vue/nuxt": {
+      defaults: {
+        editor: true,
+        icons: {
+          collections: [
+            {
+              prefix: "heroicons",
+              from: resolveImport("@iconify-json/heroicons/icons.json"),
+              exclude: ["*-solid", "*-20-*", "*-16-*"]
+            }
+          ]
+        }
+      }
+    }
+  } : {},
   defaults: {
     configPath: "cms.config",
     admin: {
@@ -1885,12 +1899,13 @@ const module$1 = defineNuxtModule({
       getContents: () => renderBrandFile(resolveBrand(resolved.admin, brandPaths).brand)
     });
     nuxt.options.alias["#cms-brand"] = brandTemplate.dst;
-    addVitePlugin(tailwindcss());
-    addVitePlugin(svgLoader({ defaultImport: "url", svgoConfig: { plugins: ["prefixIds"] } }));
     nuxt.options.css.push(
       resolveImport("@fontsource-variable/geist/index.css"),
       resolveImport("@fontsource-variable/geist-mono/index.css"),
-      resolver.resolve("./runtime/assets/main.css")
+      resolver.resolve("./runtime/assets/main.css"),
+      resolver.resolve("./runtime/assets/shell.css"),
+      resolver.resolve("./runtime/assets/media.css"),
+      resolver.resolve("./runtime/assets/editor.css")
     );
     nuxt.hook("app:templates", (app) => {
       app.layouts["cms-admin"] = {

package/dist/runtime/app/components/cms/BlockOutline.vue

@@ -1,57 +1,42 @@
 <template>
-   <ol class="cms-outline" aria-label="Blocks">
-      <li
-         v-for="(item, index) in items"
-         :key="uidFor(item)"
-         class="cms-outline-row"
-         :class="{
-  'is-selected': index === selected,
-  'is-hidden': isHiddenBlock(item),
-  'is-dragging': dragIndex === index,
-  'is-drop-target': dropIndex === index && dragIndex !== index
-}"
-         draggable="true"
-         @dragstart="onDragStart(index, $event)"
-         @dragover.prevent="dropIndex = index"
-         @dragleave="dropIndex === index && (dropIndex = null)"
-         @drop.prevent="onDrop(index)"
-         @dragend="onDragEnd"
-      >
-         <span class="cms-outline-grip" aria-hidden="true">
-            <CmsIcon name="bars-2" class="size-3.5" />
-         </span>
-         <button
-            type="button"
-            class="cms-outline-main"
-            :aria-current="index === selected ? 'true' : void 0"
-            :aria-label="`${labelOf(item)}, ${index + 1} of ${items.length}${isHiddenBlock(item) ? ', hidden' : ''}. Alt and the arrow keys move it`"
-            aria-keyshortcuts="Alt+ArrowUp Alt+ArrowDown"
-            @click="emit('select', index)"
-            @keydown.alt.up.prevent="index > 0 && emit('move', index, index - 1)"
-            @keydown.alt.down.prevent="index < items.length - 1 && emit('move', index, index + 1)"
-         >
-            <CmsIcon :name="blockOf(item)?.icon ?? 'rectangle-stack'" class="size-4 shrink-0" />
-            <span class="cms-outline-text">
-               <span class="cms-outline-label">{{ labelOf(item) }}</span>
-               <span v-if="summaryOf(item)" class="cms-outline-summary">
-                  {{ summaryOf(item) }}
-               </span>
+   <KTree
+      :nodes="nodes"
+      :selected="selectedId"
+      label="Blocks"
+      size="sm"
+      :bordered="false"
+      reorderable
+      @select="onSelect"
+      @move="onMove"
+   >
+      <template #label="{ node }">
+         <span class="cms-outline-text" :class="{ 'is-hidden': hiddenIds.has(node.id) }">
+            <span class="cms-outline-label">{{ node.label }}</span>
+            <span v-if="node.description" class="cms-outline-summary">
+               {{ node.description }}
             </span>
-            <CmsIcon
-               v-if="isHiddenBlock(item)"
-               name="eye-slash"
-               class="cms-outline-hidden size-4 shrink-0"
-            />
-         </button>
-      </li>
-   </ol>
+         </span>
+      </template>
+      <template #meta="{ node }">
+         <template v-if="hiddenIds.has(node.id)">
+            <KIcon name="eye-slash" class="cms-outline-hidden" />
+            <KVisuallyHidden>Hidden</KVisuallyHidden>
+         </template>
+      </template>
+   </KTree>
 </template>
 
 <script setup>
 import { isHiddenBlock } from "#nuxt-cms";
-import { ref } from "#imports";
+import {
+  Icon as KIcon,
+  Tree as KTree,
+  VisuallyHidden as KVisuallyHidden
+} from "@xleddyl/443-components-vue";
+import { computed } from "#imports";
 import { blockSummary } from "../../../shared/preview";
 import { useCmsRuntime } from "../../composables/cms-runtime";
+import { cmsIcon } from "../../utils/ui";
 const props = defineProps({
   items: { type: Array, required: true },
   field: { type: Object, required: true },
@@ -73,27 +58,31 @@ function uidFor(item) {
 function blockOf(item) {
   return props.field.blocks?.[String(item.type)];
 }
-function labelOf(item) {
-  return blockOf(item)?.label ?? String(item.type);
-}
-function summaryOf(item) {
-  return blockSummary(blockOf(item), item, props.locale, i18n.defaultLocale, 60);
-}
-const dragIndex = ref(null);
-const dropIndex = ref(null);
-function onDragStart(index, event) {
-  dragIndex.value = index;
-  if (event.dataTransfer) {
-    event.dataTransfer.effectAllowed = "move";
-    event.dataTransfer.setData("text/plain", String(index));
-  }
-}
-function onDrop(index) {
-  if (dragIndex.value !== null && dragIndex.value !== index) emit("move", dragIndex.value, index);
-  onDragEnd();
+const nodes = computed(
+  () => props.items.map((item) => {
+    const block = blockOf(item);
+    return {
+      id: uidFor(item),
+      label: block?.label ?? String(item.type),
+      description: blockSummary(block, item, props.locale, i18n.defaultLocale, 60) || void 0,
+      icon: cmsIcon(block?.icon ?? "rectangle-stack")
+    };
+  })
+);
+const hiddenIds = computed(
+  () => new Set(
+    props.items.filter((item) => isHiddenBlock(item)).map((item) => uidFor(item))
+  )
+);
+const selectedId = computed(() => {
+  const item = props.selected === null ? void 0 : props.items[props.selected];
+  return item ? uidFor(item) : null;
+});
+function onSelect(node) {
+  const index = nodes.value.findIndex((entry) => entry.id === node.id);
+  if (index !== -1) emit("select", index);
 }
-function onDragEnd() {
-  dragIndex.value = null;
-  dropIndex.value = null;
+function onMove(move) {
+  emit("move", move.from.index, move.to.index);
 }
 </script>

package/dist/runtime/app/components/cms/BlockPalette.vue

@@ -8,7 +8,7 @@
          @click="emit('pick', String(type))"
       >
          <span class="cms-palette-icon">
-            <CmsIcon :name="block.icon ?? 'rectangle-stack'" class="size-4" />
+            <KIcon :name="cmsIcon(block.icon ?? 'rectangle-stack')" />
          </span>
          <span class="cms-palette-text">
             <span class="cms-palette-label">{{ block.label }}</span>
@@ -21,6 +21,8 @@
 </template>
 
 <script setup>
+import { Icon as KIcon } from "@xleddyl/443-components-vue";
+import { cmsIcon } from "../../utils/ui";
 defineProps({
   blocks: { type: Object, required: true },
   label: { type: String, required: false, default: "Available blocks" }

package/dist/runtime/app/components/cms/BlocksField.vue

@@ -1,10 +1,10 @@
 <template>
-   <div class="flex flex-col gap-3">
+   <KStack gap="sm" class="cms-blocks-field">
       <div class="cms-blocks-grid">
          <div
             v-for="(item, index) in items"
             :key="uidFor(item)"
-            class="cms-card cms-block-tile"
+            class="cms-block-tile"
             :class="{
   'is-muted': isHidden(item),
   'is-dragging': dragIndex === index,
@@ -45,9 +45,9 @@
                <span v-else-if="summaryOf(item)" class="cms-block-summary">
                   {{ summaryOf(item) }}
                </span>
-               <CmsIcon v-else :name="iconOf(item)" class="size-7" />
+               <KIcon v-else :name="cmsIcon(iconOf(item))" class="cms-block-icon" />
 
-               <CmsIcon v-if="isHidden(item)" name="eye-slash" class="cms-block-hidden size-4" />
+               <KIcon v-if="isHidden(item)" name="eye-slash" class="cms-block-hidden" />
 
                <template v-if="mediaOnly">
                   <span
@@ -55,7 +55,7 @@
                      class="cms-block-missing"
                      title="Not found in the media library"
                   >
-                     <CmsIcon name="exclamation-triangle" class="size-3.5" />
+                     <KIcon name="exclamation-triangle" />
                   </span>
                   <button
                      type="button"
@@ -64,7 +64,7 @@
                      title="Remove"
                      @click.stop="remove(index)"
                   >
-                     <CmsIcon name="x-mark" class="size-3.5" />
+                     <KIcon name="x-mark" />
                   </button>
                </template>
             </component>
@@ -77,35 +77,33 @@
                   @keydown.left.prevent="index > 0 && move(index, -1)"
                   @keydown.right.prevent="index < items.length - 1 && move(index, 1)"
                >
-                  <CmsIcon name="bars-2" class="size-4" />
+                  <KIcon :name="cmsIcon('bars-2')" />
                </button>
                <span class="cms-block-bar-name" :title="barTitle(item)">{{ barLabel(item) }}</span>
                <span
                   v-if="hasMissingMedia(item)"
-                  class="cms-media-missing-icon"
+                  class="cms-block-missing-icon"
                   title="Not found in the media library"
                >
-                  <CmsIcon name="exclamation-triangle" class="size-4" />
+                  <KIcon name="exclamation-triangle" />
                </span>
-               <div class="cms-block-bar-actions">
-                  <CmsButton
-                     icon="trash"
-                     size="xs"
-                     variant="ghost"
-                     color="error"
-                     aria-label="Remove block"
-                     @click="remove(index)"
-                  />
-               </div>
+               <KButton
+                  icon="trash"
+                  size="xs"
+                  variant="ghost"
+                  tone="danger"
+                  aria-label="Remove block"
+                  @click="remove(index)"
+               />
             </div>
          </div>
 
-         <CmsDropdownMenu v-if="canAdd && addItems.length > 1" :items="addItems">
+         <KDropdownMenu v-if="canAdd && addItems.length > 1" :items="addItems">
             <button type="button" class="cms-block-add">
-               <CmsIcon name="plus" class="size-5" />
+               <KIcon name="plus" />
                <span>Add</span>
             </button>
-         </CmsDropdownMenu>
+         </KDropdownMenu>
          <button
             v-else
             type="button"
@@ -114,132 +112,142 @@
             :title="canAdd ? void 0 : countHint"
             @click="addFirst"
          >
-            <CmsIcon name="plus" class="size-5" />
+            <KIcon name="plus" />
             <span>{{ mediaOnly ? addMediaLabel : "Add" }}</span>
          </button>
       </div>
 
-      <p v-if="countHint" class="cms-form-description">{{ countHint }}</p>
+      <p v-if="countHint" class="cms-field-hint">{{ countHint }}</p>
 
-      <CmsButton
+      <div v-if="visual">
+         <KButton
+            label="Open visual editor"
+            :icon="cmsIcon('window')"
+            size="sm"
+            variant="soft"
+            tone="neutral"
+            @click="visualOpen = true"
+         />
+      </div>
+
+      <KModal
          v-if="visual"
-         class="self-start"
-         label="Open visual editor"
-         icon="window"
-         size="sm"
-         variant="soft"
-         color="neutral"
-         @click="visualOpen = true"
-      />
+         v-model:open="visualOpen"
+         size="fullscreen"
+         flush
+         hide-close
+         class="cms-editor-modal"
+         aria-label="Visual editor"
+      >
+         <CmsVisualEditor
+            :state="{ [fieldKey]: model }"
+            :entry-name="entryName"
+            :field-key="fieldKey"
+            :fields="{ [fieldKey]: field }"
+            :title="field.label"
+            @update:state="onVisualUpdate"
+         >
+            <template #start>
+               <KButton
+                  icon="arrow-left"
+                  size="sm"
+                  variant="ghost"
+                  tone="neutral"
+                  aria-label="Back to the form"
+                  title="Back to the form"
+                  @click="visualOpen = false"
+               />
+            </template>
+            <template #actions>
+               <KButton label="Done" size="sm" @click="visualOpen = false" />
+            </template>
+         </CmsVisualEditor>
+      </KModal>
 
-      <Teleport to="body">
-         <div v-if="visual && visualOpen" class="cms-scope cms-editor-overlay" :data-theme="theme">
-            <CmsVisualEditor
-               :state="{ [fieldKey]: model }"
-               :entry-name="entryName"
-               :field-key="fieldKey"
-               :fields="{ [fieldKey]: field }"
-               :title="field.label"
-               @update:state="onVisualUpdate"
-            >
-               <template #start>
-                  <CmsButton
-                     icon="arrow-left"
-                     size="sm"
-                     variant="ghost"
-                     color="neutral"
-                     aria-label="Back to the form"
-                     title="Back to the form"
-                     @click="visualOpen = false"
-                  />
-               </template>
-               <template #actions>
-                  <CmsButton label="Done" size="sm" @click="visualOpen = false" />
-               </template>
-            </CmsVisualEditor>
-         </div>
-      </Teleport>
+      <KModal v-if="mediaOnly" v-model:open="pickerOpen" title="Media" size="lg">
+         <CmsMediaGallery
+            v-model:folder="pickerFolder"
+            selectable
+            :media-type="mediaOnly.field.mediaType"
+            :accept="mediaOnly.field.accept"
+            @select="addMedia"
+         />
+      </KModal>
 
-      <CmsModal v-if="mediaOnly" v-model:open="pickerOpen" title="Media" size="lg">
-         <template #body>
-            <CmsMediaGallery
-               v-model:folder="pickerFolder"
-               selectable
-               :media-type="mediaOnly.field.mediaType"
-               :accept="mediaOnly.field.accept"
-               @select="addMedia"
-            />
-         </template>
-      </CmsModal>
+      <KModal v-model:open="editorOpen" :title="editorTitle">
+         <KStack gap="md">
+            <KFormField
+               v-for="(blockField, blockKey) in editorFields"
+               :key="blockKey"
+               :label="blockField.label"
+               :icon="cmsIcon(fieldIcon(blockField))"
+               :required="blockField.required"
+            >
+               <CmsFieldInput
+                  :model-value="editorItem?.[blockKey]"
+                  :field="blockField"
+                  :locale="locale"
+                  @update:model-value="(value) => updateEditorField(blockKey, value)"
+               />
+            </KFormField>
+         </KStack>
 
-      <CmsModal v-model:open="editorOpen" :title="editorTitle">
-         <template #body>
-            <div class="flex flex-col gap-4">
-               <CmsFormField
-                  v-for="(blockField, blockKey) in editorFields"
-                  :key="blockKey"
-                  :label="blockField.label"
-                  :icon="fieldIcon(blockField)"
-                  :required="blockField.required"
-               >
-                  <CmsFieldInput
-                     :model-value="editorItem?.[blockKey]"
-                     :field="blockField"
-                     :locale="locale"
-                     @update:model-value="(value) => updateEditorField(blockKey, value)"
+         <template #footer>
+            <KStack
+               direction="row"
+               justify="between"
+               gap="sm"
+               wrap
+               class="cms-block-editor-actions"
+            >
+               <KStack direction="row" gap="sm" wrap>
+                  <KButton
+                     icon="chevron-left"
+                     variant="soft"
+                     tone="neutral"
+                     aria-label="Move earlier"
+                     :disabled="editorIndex === 0"
+                     @click="moveCurrent(-1)"
                   />
-               </CmsFormField>
-
-               <div class="cms-actions justify-between">
-                  <div class="cms-actions">
-                     <CmsButton
-                        icon="chevron-left"
-                        variant="soft"
-                        color="neutral"
-                        aria-label="Move earlier"
-                        :disabled="editorIndex === 0"
-                        @click="moveCurrent(-1)"
-                     />
-                     <CmsButton
-                        icon="chevron-right"
-                        variant="soft"
-                        color="neutral"
-                        aria-label="Move later"
-                        :disabled="editorIndex === items.length - 1"
-                        @click="moveCurrent(1)"
-                     />
-                     <CmsButton
-                        label="Duplicate"
-                        icon="document-duplicate"
-                        variant="soft"
-                        color="neutral"
-                        :disabled="!canAdd"
-                        @click="duplicateCurrent"
-                     />
-                     <CmsButton
-                        v-if="editorItem && !declaresHiddenField(blockOf(editorItem))"
-                        :label="isHidden(editorItem) ? 'Show' : 'Hide'"
-                        :icon="isHidden(editorItem) ? 'eye' : 'eye-slash'"
-                        variant="soft"
-                        color="neutral"
-                        @click="toggleHiddenCurrent"
-                     />
-                  </div>
-                  <div class="cms-actions">
-                     <CmsButton
-                        label="Remove"
-                        icon="trash"
-                        variant="soft"
-                        color="error"
-                        @click="removeCurrent"
-                     />
-                     <CmsButton label="Done" @click="editorOpen = false" />
-                  </div>
-               </div>
-            </div>
+                  <KButton
+                     icon="chevron-right"
+                     variant="soft"
+                     tone="neutral"
+                     aria-label="Move later"
+                     :disabled="editorIndex === items.length - 1"
+                     @click="moveCurrent(1)"
+                  />
+                  <KButton
+                     label="Duplicate"
+                     :icon="cmsIcon('document-duplicate')"
+                     variant="soft"
+                     tone="neutral"
+                     :disabled="!canAdd"
+                     @click="duplicateCurrent"
+                  />
+                  <KButton
+                     v-if="editorItem && !declaresHiddenField(blockOf(editorItem))"
+                     :label="isHidden(editorItem) ? 'Show' : 'Hide'"
+                     :icon="cmsIcon(isHidden(editorItem) ? 'eye' : 'eye-slash')"
+                     variant="soft"
+                     tone="neutral"
+                     @click="toggleHiddenCurrent"
+                  />
+               </KStack>
+               <KStack direction="row" gap="sm">
+                  <KButton
+                     label="Remove"
+                     icon="trash"
+                     variant="soft"
+                     tone="danger"
+                     @click="removeCurrent"
+                  />
+                  <KButton label="Done" @click="editorOpen = false" />
+               </KStack>
+            </KStack>
          </template>
-      </CmsModal>
-   </div>
+      </KModal>
+   </KStack>
 </template>
 
 <script setup>
@@ -254,12 +262,18 @@ import {
   mediaTypeForKey,
   pickTranslatedMedia
 } from "#nuxt-cms";
-import { computed, ref, useState, watch } from "#imports";
+import {
+  Button as KButton,
+  DropdownMenu as KDropdownMenu,
+  FormField as KFormField,
+  Icon as KIcon,
+  Modal as KModal,
+  Stack as KStack
+} from "@xleddyl/443-components-vue";
+import { computed, ref, useState } from "#imports";
 import { useCmsMediaKeys } from "../../composables/cms-media-keys";
-import { useCmsOverlay } from "../../composables/cms-overlay";
 import { useCmsRuntime } from "../../composables/cms-runtime";
-import { useCmsTheme } from "../../composables/cms-theme";
-import { fieldIcon } from "../../utils/ui";
+import { cmsIcon, fieldIcon } from "../../utils/ui";
 const props = defineProps({
   field: { type: Object, required: true },
   locale: { type: String, required: false },
@@ -299,14 +313,6 @@ const visual = computed(() => {
   return !mediaOnly.value && !!props.entryName && !!props.fieldKey && !!list.length && list.every((block) => typeof block.component === "string" && !!block.component.trim());
 });
 const visualOpen = ref(false);
-const theme = useCmsTheme();
-const visualOverlay = useCmsOverlay(() => {
-  visualOpen.value = false;
-});
-watch(visualOpen, (open) => {
-  if (open) visualOverlay.activate();
-  else visualOverlay.deactivate();
-});
 function onVisualUpdate(state) {
   const value = props.fieldKey ? state[props.fieldKey] : null;
   model.value = Array.isArray(value) && value.length ? value : null;

package/dist/runtime/app/components/cms/BrandMark.d.vue.ts

@@ -1,5 +1,7 @@
 type __VLS_Props = {
-    size?: 'md' | 'lg';
+    size?: 'sm' | 'md' | 'lg';
+    subtitle?: string;
+    hideText?: boolean;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;