@xleddyl/nuxt-cms 0.1.9 → 0.1.10

package/dist/module.json

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

package/dist/module.mjs

@@ -552,7 +552,11 @@ const module$1 = defineNuxtModule({
         ]
       });
     });
-    const { driver = "sqlite", path: dbPath = "data/cms.db", url: databaseUrl = "" } = options.database;
+    const {
+      driver = "sqlite",
+      path: dbPath = "data/cms.db",
+      url: databaseUrl = ""
+    } = options.database;
     nuxt.options.alias["#cms-db"] = resolver.resolve(
       driver === "postgres" ? "./runtime/server/utils/db-postgres" : "./runtime/server/utils/db-sqlite"
     );

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

@@ -6,14 +6,26 @@
          class="cms-card flex flex-col gap-4 p-4"
       >
          <div class="flex items-center gap-1">
-            <span class="cms-kicker grow">
+            <button
+               type="button"
+               class="cms-kicker flex grow items-center gap-1.5 text-left"
+               :aria-label="
+  isCollapsed(item) ? t('cms.form.expandBlock') : t('cms.form.collapseBlock')
+"
+               @click="toggleCollapsed(item)"
+            >
+               <UIcon
+                  :name="isCollapsed(item) ? 'i-lucide-chevron-right' : 'i-lucide-chevron-down'"
+                  class="size-3.5"
+               />
                {{ blocks[item.type]?.label ?? item.type }}
-            </span>
+            </button>
             <UButton
                icon="i-lucide-chevron-up"
                size="xs"
                variant="ghost"
                color="neutral"
+               :aria-label="t('cms.form.moveUp')"
                :disabled="index === 0"
                @click="move(index, -1)"
             />
@@ -22,30 +34,42 @@
                size="xs"
                variant="ghost"
                color="neutral"
+               :aria-label="t('cms.form.moveDown')"
                :disabled="index === items.length - 1"
                @click="move(index, 1)"
             />
+            <UButton
+               icon="i-lucide-copy"
+               size="xs"
+               variant="ghost"
+               color="neutral"
+               :aria-label="t('cms.form.duplicateBlock')"
+               @click="duplicate(index)"
+            />
             <UButton
                icon="i-lucide-trash-2"
                size="xs"
                variant="ghost"
                color="error"
+               :aria-label="t('cms.form.removeBlock')"
                @click="remove(index)"
             />
          </div>
-         <UFormField
-            v-for="(blockField, blockKey) in blocks[item.type]?.fields"
-            :key="blockKey"
-            :label="blockField.label"
-            :required="blockField.required"
-            :ui="CMS_FIELD_UI"
-         >
-            <CmsFieldInput
-               :model-value="item[blockKey]"
-               :field="blockField"
-               @update:model-value="(value) => updateField(index, blockKey, value)"
-            />
-         </UFormField>
+         <template v-if="!isCollapsed(item)">
+            <UFormField
+               v-for="(blockField, blockKey) in blocks[item.type]?.fields"
+               :key="blockKey"
+               :label="blockField.label"
+               :required="blockField.required"
+               :ui="CMS_FIELD_UI"
+            >
+               <CmsFieldInput
+                  :model-value="item[blockKey]"
+                  :field="blockField"
+                  @update:model-value="(value) => updateField(index, blockKey, value)"
+               />
+            </UFormField>
+         </template>
       </div>
       <UDropdownMenu :items="addItems">
          <UButton
@@ -59,7 +83,7 @@
 </template>
 
 <script setup>
-import { computed, useI18n } from "#imports";
+import { computed, ref, useI18n } from "#imports";
 import { CMS_FIELD_UI } from "../../utils/ui";
 const props = defineProps({
   field: { type: Object, required: true }
@@ -95,6 +119,25 @@ function remove(index) {
   const next = items.value.filter((_, i) => i !== index);
   model.value = next.length ? next : null;
 }
+function duplicate(index) {
+  const current = items.value[index];
+  if (!current) return;
+  const copy = JSON.parse(JSON.stringify(current));
+  const next = [...items.value];
+  next.splice(index + 1, 0, copy);
+  model.value = next;
+}
+const collapsedUids = ref(/* @__PURE__ */ new Set());
+function isCollapsed(item) {
+  return collapsedUids.value.has(uidFor(item));
+}
+function toggleCollapsed(item) {
+  const uid = uidFor(item);
+  const next = new Set(collapsedUids.value);
+  if (next.has(uid)) next.delete(uid);
+  else next.add(uid);
+  collapsedUids.value = next;
+}
 function move(index, delta) {
   const next = [...items.value];
   const [item] = next.splice(index, 1);

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

@@ -0,0 +1,20 @@
+type __VLS_Props = {
+    message: string;
+    title?: string;
+    confirmLabel?: string;
+};
+type __VLS_ModelProps = {
+    'open'?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: (value: boolean) => any;
+    "after:leave": () => any;
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onClose?: ((value: boolean) => any) | undefined;
+    "onAfter:leave"?: (() => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,43 @@
+<template>
+   <UModal
+      v-model:open="open"
+      :title="title ?? t('cms.confirm.title')"
+      :ui="ui"
+      @after:leave="emit('after:leave')"
+   >
+      <template #body>
+         <div class="flex flex-col gap-5">
+            <p class="text-(--ui-text) text-sm">{{ message }}</p>
+            <div class="flex justify-end gap-2">
+               <UButton
+                  :label="t('cms.confirm.cancel')"
+                  variant="subtle"
+                  color="neutral"
+                  class="rounded-full px-4"
+                  @click="emit('close', false)"
+               />
+               <UButton
+                  :label="confirmLabel ?? t('cms.confirm.confirm')"
+                  color="error"
+                  class="rounded-full px-4"
+                  @click="emit('close', true)"
+               />
+            </div>
+         </div>
+      </template>
+   </UModal>
+</template>
+
+<script setup>
+import { useI18n } from "#imports";
+import { CMS_MODAL_UI } from "../../utils/ui";
+defineProps({
+  message: { type: String, required: true },
+  title: { type: String, required: false },
+  confirmLabel: { type: String, required: false }
+});
+const open = defineModel("open", { type: Boolean, ...{ default: true } });
+const emit = defineEmits(["close", "after:leave"]);
+const { t } = useI18n();
+const ui = { ...CMS_MODAL_UI, content: "rounded-2xl shadow-xl sm:max-w-md" };
+</script>

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

@@ -0,0 +1,20 @@
+type __VLS_Props = {
+    message: string;
+    title?: string;
+    confirmLabel?: string;
+};
+type __VLS_ModelProps = {
+    'open'?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: (value: boolean) => any;
+    "after:leave": () => any;
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onClose?: ((value: boolean) => any) | undefined;
+    "onAfter:leave"?: (() => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -86,7 +86,7 @@
                />
                <div
                   v-if="!selectable"
-                  class="absolute right-2 top-2 flex gap-1 opacity-0 transition-opacity group-hover:opacity-100"
+                  class="absolute right-2 top-2 flex gap-1 opacity-0 transition-opacity focus-within:opacity-100 group-hover:opacity-100"
                >
                   <UButton
                      icon="i-lucide-pencil"
@@ -187,6 +187,7 @@
 <script setup>
 import { computed, onMounted, ref, useI18n, useToast } from "#imports";
 import { MEDIA_TYPES, mediaFilename, mediaIconFor } from "#nuxt-cms";
+import { useCmsConfirm } from "../../composables/cms-confirm";
 import { CMS_MODAL_UI, errorMessage } from "../../utils/ui";
 const props = defineProps({
   selectable: { type: Boolean, required: false },
@@ -293,8 +294,12 @@ async function copy(item) {
     toast.add({ title: t("cms.media.copyError"), color: "error" });
   }
 }
+const confirmAction = useCmsConfirm();
+const removing = ref(false);
 async function remove(item) {
-  if (!confirm(t("cms.media.deleteConfirm"))) return;
+  if (removing.value) return;
+  if (!await confirmAction(t("cms.media.deleteConfirm"))) return;
+  removing.value = true;
   try {
     await $fetch(endpoint, { method: "DELETE", query: { key: item.key } });
     await reload();
@@ -304,6 +309,8 @@ async function remove(item) {
       description: errorMessage(err),
       color: "error"
     });
+  } finally {
+    removing.value = false;
   }
 }
 </script>

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

@@ -2,7 +2,9 @@
    <USelectMenu
       v-if="multiple"
       v-model="many"
+      v-model:search-term="searchTerm"
       multiple
+      ignore-filter
       :items="options"
       value-key="value"
       :loading="loading"
@@ -12,6 +14,8 @@
    <USelectMenu
       v-else
       v-model="single"
+      v-model:search-term="searchTerm"
+      ignore-filter
       :items="singleItems"
       value-key="value"
       :loading="loading"
@@ -22,7 +26,7 @@
 
 <script setup>
 import { isTranslatableField } from "#nuxt-cms";
-import { computed, onMounted, ref, useI18n, useToast } from "#imports";
+import { computed, onMounted, ref, useI18n, useToast, watch } from "#imports";
 import cmsConfig from "#cms-config";
 import { useCmsRuntime } from "../../composables/cms-runtime";
 import { errorMessage } from "../../utils/ui";
@@ -35,11 +39,19 @@ const model = defineModel({ type: [String, Array, null], ...{ required: true } }
 const { t } = useI18n();
 const toast = useToast();
 const target = cmsConfig[props.to];
-const rows = ref([]);
+const endpoint = `/api/cms/admin/${props.to}`;
+const fetched = ref([]);
+const selectedRows = ref(/* @__PURE__ */ new Map());
 const loading = ref(true);
-onMounted(async () => {
+const searchTerm = ref("");
+async function fetchOptions() {
+  loading.value = true;
   try {
-    rows.value = await $fetch(`/api/cms/admin/${props.to}`);
+    const term = searchTerm.value.trim();
+    const page = await $fetch(endpoint, {
+      query: { light: "true", limit: 25, ...term ? { search: term } : {} }
+    });
+    fetched.value = page.items;
   } catch (err) {
     toast.add({
       title: t("cms.toast.loadFailed"),
@@ -49,6 +61,31 @@ onMounted(async () => {
   } finally {
     loading.value = false;
   }
+}
+let searchTimer;
+watch(searchTerm, () => {
+  clearTimeout(searchTimer);
+  searchTimer = setTimeout(() => void fetchOptions(), 300);
+});
+const selectedIds = computed(() => {
+  if (props.multiple) return model.value ?? [];
+  return model.value ? [model.value] : [];
+});
+async function resolveSelected() {
+  const missing = selectedIds.value.filter((id) => !selectedRows.value.has(id));
+  await Promise.all(
+    missing.map(async (id) => {
+      try {
+        const row = await $fetch(`${endpoint}/${id}`);
+        selectedRows.value.set(id, row);
+      } catch {
+      }
+    })
+  );
+}
+onMounted(() => {
+  void fetchOptions();
+  void resolveSelected();
 });
 const { i18n: contentI18n } = useCmsRuntime();
 const titleField = target?.titleField ?? "id";
@@ -62,12 +99,21 @@ function optionLabel(row) {
   }
   return String(value ?? `#${row.id}`);
 }
-const options = computed(
-  () => rows.value.map((row) => ({
-    label: optionLabel(row),
-    value: row.id
-  }))
-);
+const options = computed(() => {
+  const seen = /* @__PURE__ */ new Set();
+  const list = [];
+  for (const row of fetched.value) {
+    const id = row.id;
+    list.push({ label: optionLabel(row), value: id });
+    seen.add(id);
+  }
+  for (const id of selectedIds.value) {
+    if (seen.has(id)) continue;
+    const row = selectedRows.value.get(id);
+    list.push({ label: row ? optionLabel(row) : `#${id}`, value: id });
+  }
+  return list;
+});
 const singleItems = computed(() => [
   ...props.required ? [] : [{ label: "\u2014", value: null }],
   ...options.value

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

@@ -8,14 +8,48 @@
             size="xs"
             :variant="editor?.isActive(action.mark, action.attrs) ? 'soft' : 'ghost'"
             color="neutral"
+            :aria-label="t(action.label)"
+            :title="t(action.label)"
             @click="action.run"
          />
+         <UPopover v-model:open="linkOpen">
+            <UButton
+               icon="i-lucide-link"
+               size="xs"
+               :variant="editor?.isActive('link') ? 'soft' : 'ghost'"
+               color="neutral"
+               :aria-label="t('cms.richtext.link')"
+               :title="t('cms.richtext.link')"
+            />
+            <template #content>
+               <div class="flex items-center gap-2 p-2">
+                  <UInput
+                     v-model="linkUrl"
+                     size="sm"
+                     placeholder="https://"
+                     class="w-64"
+                     @keydown.enter.prevent="applyLink"
+                  />
+                  <UButton size="xs" :label="t('cms.richtext.setLink')" @click="applyLink" />
+                  <UButton
+                     v-if="editor?.isActive('link')"
+                     size="xs"
+                     variant="subtle"
+                     color="error"
+                     :label="t('cms.richtext.unsetLink')"
+                     @click="removeLink"
+                  />
+               </div>
+            </template>
+         </UPopover>
          <span class="grow" />
          <UButton
             icon="i-lucide-undo-2"
             size="xs"
             variant="ghost"
             color="neutral"
+            :aria-label="t('cms.richtext.undo')"
+            :title="t('cms.richtext.undo')"
             :disabled="!editor?.can().undo()"
             @click="undo"
          />
@@ -24,6 +58,8 @@
             size="xs"
             variant="ghost"
             color="neutral"
+            :aria-label="t('cms.richtext.redo')"
+            :title="t('cms.richtext.redo')"
             :disabled="!editor?.can().redo()"
             @click="redo"
          />
@@ -35,11 +71,12 @@
 <script setup>
 import StarterKit from "@tiptap/starter-kit";
 import { EditorContent, useEditor } from "@tiptap/vue-3";
-import { watch } from "#imports";
+import { ref, useI18n, watch } from "#imports";
 const model = defineModel({ type: [String, null], ...{ required: true } });
+const { t } = useI18n();
 const editor = useEditor({
   content: model.value ?? "",
-  extensions: [StarterKit],
+  extensions: [StarterKit.configure({ link: { openOnClick: false } })],
   editorProps: {
     attributes: { class: "cms-richtext-body" }
   },
@@ -58,6 +95,7 @@ const actions = [
   {
     icon: "i-lucide-bold",
     mark: "bold",
+    label: "cms.richtext.bold",
     run: () => {
       editor.value?.chain().focus().toggleBold().run();
     }
@@ -65,6 +103,7 @@ const actions = [
   {
     icon: "i-lucide-italic",
     mark: "italic",
+    label: "cms.richtext.italic",
     run: () => {
       editor.value?.chain().focus().toggleItalic().run();
     }
@@ -72,6 +111,7 @@ const actions = [
   {
     icon: "i-lucide-strikethrough",
     mark: "strike",
+    label: "cms.richtext.strike",
     run: () => {
       editor.value?.chain().focus().toggleStrike().run();
     }
@@ -80,6 +120,7 @@ const actions = [
     icon: "i-lucide-heading-2",
     mark: "heading",
     attrs: { level: 2 },
+    label: "cms.richtext.h2",
     run: () => {
       editor.value?.chain().focus().toggleHeading({ level: 2 }).run();
     }
@@ -88,6 +129,7 @@ const actions = [
     icon: "i-lucide-heading-3",
     mark: "heading",
     attrs: { level: 3 },
+    label: "cms.richtext.h3",
     run: () => {
       editor.value?.chain().focus().toggleHeading({ level: 3 }).run();
     }
@@ -95,6 +137,7 @@ const actions = [
   {
     icon: "i-lucide-list",
     mark: "bulletList",
+    label: "cms.richtext.bulletList",
     run: () => {
       editor.value?.chain().focus().toggleBulletList().run();
     }
@@ -102,6 +145,7 @@ const actions = [
   {
     icon: "i-lucide-list-ordered",
     mark: "orderedList",
+    label: "cms.richtext.orderedList",
     run: () => {
       editor.value?.chain().focus().toggleOrderedList().run();
     }
@@ -109,11 +153,28 @@ const actions = [
   {
     icon: "i-lucide-text-quote",
     mark: "blockquote",
+    label: "cms.richtext.blockquote",
     run: () => {
       editor.value?.chain().focus().toggleBlockquote().run();
     }
   }
 ];
+const linkOpen = ref(false);
+const linkUrl = ref("");
+watch(linkOpen, (open) => {
+  if (open) linkUrl.value = editor.value?.getAttributes("link").href ?? "";
+});
+function applyLink() {
+  const url = linkUrl.value.trim();
+  const chain = editor.value?.chain().focus().extendMarkRange("link");
+  if (url) chain?.setLink({ href: url }).run();
+  else chain?.unsetLink().run();
+  linkOpen.value = false;
+}
+function removeLink() {
+  editor.value?.chain().focus().extendMarkRange("link").unsetLink().run();
+  linkOpen.value = false;
+}
 function undo() {
   editor.value?.chain().focus().undo().run();
 }

package/dist/runtime/app/composables/cms-confirm.d.ts

@@ -0,0 +1,4 @@
+export declare function useCmsConfirm(): (message: string, options?: {
+    title?: string;
+    confirmLabel?: string;
+}) => Promise<boolean>;

package/dist/runtime/app/composables/cms-confirm.js

@@ -0,0 +1,7 @@
+import { useOverlay } from "#imports";
+import ConfirmModal from "../components/cms/ConfirmModal.vue";
+export function useCmsConfirm() {
+  const overlay = useOverlay();
+  const modal = overlay.create(ConfirmModal);
+  return async (message, options) => await modal.open({ message, ...options }) === true;
+}

package/dist/runtime/app/i18n/en.json

@@ -27,7 +27,16 @@
          "emptyBody": "Entries you create will show up here.",
          "deleteConfirm": "Delete this row?",
          "status": "Status",
-         "columns": "Columns"
+         "columns": "Columns",
+         "loadError": "Could not load entries",
+         "retry": "Retry",
+         "searchPlaceholder": "Search…",
+         "noResults": "No matching entries"
+      },
+      "confirm": {
+         "title": "Are you sure?",
+         "confirm": "Confirm",
+         "cancel": "Cancel"
       },
       "entry": {
          "unsavedChanges": "You have unsaved changes. Leave anyway?"
@@ -79,7 +88,28 @@
          "mediaChange": "Change",
          "mediaRemove": "Remove",
          "invalidJson": "Invalid JSON",
-         "addBlock": "Add block"
+         "addBlock": "Add block",
+         "moveUp": "Move up",
+         "moveDown": "Move down",
+         "duplicateBlock": "Duplicate block",
+         "removeBlock": "Remove block",
+         "collapseBlock": "Collapse block",
+         "expandBlock": "Expand block"
+      },
+      "richtext": {
+         "bold": "Bold",
+         "italic": "Italic",
+         "strike": "Strikethrough",
+         "h2": "Heading 2",
+         "h3": "Heading 3",
+         "bulletList": "Bullet list",
+         "orderedList": "Numbered list",
+         "blockquote": "Quote",
+         "link": "Link",
+         "setLink": "Apply",
+         "unsetLink": "Remove link",
+         "undo": "Undo",
+         "redo": "Redo"
       },
       "validation": {
          "required": "Required field",

package/dist/runtime/app/i18n/it.json

@@ -27,7 +27,16 @@
          "emptyBody": "Le voci che crei appariranno qui.",
          "deleteConfirm": "Eliminare questa voce?",
          "status": "Stato",
-         "columns": "Colonne"
+         "columns": "Colonne",
+         "loadError": "Impossibile caricare le voci",
+         "retry": "Riprova",
+         "searchPlaceholder": "Cerca…",
+         "noResults": "Nessuna voce corrispondente"
+      },
+      "confirm": {
+         "title": "Sei sicuro?",
+         "confirm": "Conferma",
+         "cancel": "Annulla"
       },
       "entry": {
          "unsavedChanges": "Ci sono modifiche non salvate. Uscire comunque?"
@@ -79,7 +88,28 @@
          "mediaChange": "Cambia",
          "mediaRemove": "Rimuovi",
          "invalidJson": "JSON non valido",
-         "addBlock": "Aggiungi blocco"
+         "addBlock": "Aggiungi blocco",
+         "moveUp": "Sposta su",
+         "moveDown": "Sposta giù",
+         "duplicateBlock": "Duplica blocco",
+         "removeBlock": "Rimuovi blocco",
+         "collapseBlock": "Comprimi blocco",
+         "expandBlock": "Espandi blocco"
+      },
+      "richtext": {
+         "bold": "Grassetto",
+         "italic": "Corsivo",
+         "strike": "Barrato",
+         "h2": "Titolo 2",
+         "h3": "Titolo 3",
+         "bulletList": "Elenco puntato",
+         "orderedList": "Elenco numerato",
+         "blockquote": "Citazione",
+         "link": "Link",
+         "setLink": "Applica",
+         "unsetLink": "Rimuovi link",
+         "undo": "Annulla",
+         "redo": "Ripristina"
       },
       "validation": {
          "required": "Campo obbligatorio",