@xleddyl/nuxt-cms 0.1.9

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

@@ -0,0 +1,309 @@
+<template>
+   <CmsEmptyState
+      v-if="notConfigured"
+      icon="i-lucide-plug-zap"
+      :title="t('cms.media.notConfiguredTitle')"
+      :body="t('cms.media.notConfiguredBody')"
+   />
+
+   <div v-else class="flex flex-col gap-5">
+      <CmsMediaUpload
+         :multiple="!selectable"
+         :dense="selectable"
+         :media-type="mediaType"
+         :accept="accept"
+         @uploaded="onUploaded"
+      />
+
+      <div v-if="!restricted && items.length" class="flex flex-wrap items-center gap-1">
+         <button
+            v-for="f in filters"
+            :key="f"
+            type="button"
+            class="cms-pill"
+            :class="{ 'is-active': filter === f }"
+            @click="filter = f"
+         >
+            {{ t(`cms.media.filter.${f}`) }}
+         </button>
+         <template v-if="folders.length">
+            <span class="bg-(--cms-line) mx-1 h-4 w-px" />
+            <button
+               v-for="f in folders"
+               :key="f"
+               type="button"
+               class="cms-pill"
+               :class="{ 'is-active': folder === f }"
+               @click="folder = folder === f ? null : f"
+            >
+               <UIcon name="i-lucide-folder" class="mr-1 size-3" />{{ f }}
+            </button>
+         </template>
+      </div>
+
+      <div v-if="loading" class="flex justify-center py-10">
+         <UIcon name="i-lucide-loader-circle" class="text-(--ui-text-dimmed) size-6 animate-spin" />
+      </div>
+
+      <div
+         v-else-if="visible.length"
+         class="grid gap-4"
+         :class="
+  selectable ? 'grid-cols-2 sm:grid-cols-3' : 'grid-cols-2 sm:grid-cols-3 lg:grid-cols-4'
+"
+      >
+         <component
+            :is="selectable ? 'button' : 'div'"
+            v-for="item in visible"
+            :key="item.key"
+            :type="selectable ? 'button' : void 0"
+            class="cms-card group overflow-hidden text-left"
+            :class="{
+  'hover:border-(--cms-fern) hover:shadow-md': selectable
+}"
+            @click="selectable && emit('select', { key: item.key, url: item.url })"
+         >
+            <div class="bg-(--cms-field) relative flex aspect-square items-center justify-center">
+               <img
+                  v-if="item.type === 'image' && item.url"
+                  :src="item.url"
+                  alt=""
+                  loading="lazy"
+                  class="absolute inset-0 size-full object-cover"
+               />
+               <video
+                  v-else-if="item.type === 'video' && item.url"
+                  :src="item.url"
+                  preload="metadata"
+                  muted
+                  playsinline
+                  class="absolute inset-0 size-full object-cover"
+               />
+               <UIcon
+                  v-else
+                  :name="mediaIconFor(item.type)"
+                  class="text-(--ui-text-dimmed) size-8"
+               />
+               <div
+                  v-if="!selectable"
+                  class="absolute right-2 top-2 flex gap-1 opacity-0 transition-opacity group-hover:opacity-100"
+               >
+                  <UButton
+                     icon="i-lucide-pencil"
+                     size="xs"
+                     color="neutral"
+                     variant="solid"
+                     class="rounded-full shadow-sm"
+                     :aria-label="t('cms.media.edit')"
+                     @click="openEdit(item)"
+                  />
+                  <UButton
+                     icon="i-lucide-copy"
+                     size="xs"
+                     color="neutral"
+                     variant="solid"
+                     class="rounded-full shadow-sm"
+                     :aria-label="t('cms.media.copy')"
+                     @click="copy(item)"
+                  />
+                  <UButton
+                     icon="i-lucide-trash-2"
+                     size="xs"
+                     color="error"
+                     variant="solid"
+                     class="rounded-full shadow-sm"
+                     :aria-label="t('cms.media.delete')"
+                     @click="remove(item)"
+                  />
+               </div>
+            </div>
+            <div class="flex flex-col gap-1 px-3.5 py-2.5">
+               <div class="truncate text-[13px] font-medium" :title="item.key">
+                  {{ mediaFilename(item.key) }}
+               </div>
+               <div class="cms-kicker">
+                  {{ extension(item.key) }} · {{ formatSize(item.size)
+                  }}<template v-if="item.width && item.height">
+                     · {{ item.width }}×{{ item.height }}
+                  </template>
+               </div>
+            </div>
+         </component>
+      </div>
+
+      <CmsEmptyState
+         v-else-if="loadError"
+         icon="i-lucide-triangle-alert"
+         :title="t('cms.media.loadError')"
+      >
+         <UButton
+            :label="t('cms.media.retry')"
+            icon="i-lucide-refresh-cw"
+            variant="subtle"
+            class="mt-3 rounded-full px-4"
+            @click="reload"
+         />
+      </CmsEmptyState>
+
+      <CmsEmptyState
+         v-else
+         icon="i-lucide-image"
+         :title="t('cms.media.emptyTitle')"
+         :body="t('cms.media.emptyBody')"
+      />
+
+      <UModal
+         :open="!!editing"
+         :title="editing ? mediaFilename(editing.key) : ''"
+         :ui="CMS_MODAL_UI"
+         @update:open="
+  (open) => {
+    if (!open) editing = null;
+  }
+"
+      >
+         <template #body>
+            <div class="flex flex-col gap-4">
+               <UFormField :label="t('cms.media.alt')">
+                  <UInput v-model="editAlt" size="lg" class="w-full" />
+               </UFormField>
+               <UFormField :label="t('cms.media.folder')">
+                  <UInput v-model="editFolder" size="lg" class="w-full" />
+               </UFormField>
+               <div class="flex justify-end">
+                  <UButton
+                     :label="t('cms.form.save')"
+                     :loading="editSaving"
+                     class="rounded-full px-6"
+                     @click="saveEdit"
+                  />
+               </div>
+            </div>
+         </template>
+      </UModal>
+   </div>
+</template>
+
+<script setup>
+import { computed, onMounted, ref, useI18n, useToast } from "#imports";
+import { MEDIA_TYPES, mediaFilename, mediaIconFor } from "#nuxt-cms";
+import { CMS_MODAL_UI, errorMessage } from "../../utils/ui";
+const props = defineProps({
+  selectable: { type: Boolean, required: false },
+  mediaType: { type: null, required: false },
+  accept: { type: Array, required: false }
+});
+const emit = defineEmits(["select"]);
+const { t } = useI18n();
+const toast = useToast();
+const endpoint = "/api/cms/admin/media";
+const items = ref([]);
+const loading = ref(true);
+const errorCode = ref(null);
+async function reload() {
+  loading.value = true;
+  errorCode.value = null;
+  try {
+    const page = await $fetch(endpoint);
+    items.value = page.items;
+  } catch (err) {
+    errorCode.value = err.statusCode ?? 500;
+  } finally {
+    loading.value = false;
+  }
+}
+onMounted(reload);
+const notConfigured = computed(() => errorCode.value === 501);
+const loadError = computed(() => errorCode.value !== null && errorCode.value !== 501);
+const restricted = computed(
+  () => props.mediaType && props.mediaType !== "file" ? props.mediaType : null
+);
+const filters = ["all", ...MEDIA_TYPES];
+const filter = ref("all");
+const folders = computed(() => {
+  const set = new Set(items.value.map((item) => item.folder).filter((f) => !!f));
+  return [...set].sort();
+});
+const folder = ref(null);
+const visible = computed(() => {
+  const active = restricted.value ?? (filter.value === "all" ? null : filter.value);
+  let list = active ? items.value.filter((item) => item.type === active) : items.value;
+  if (folder.value) list = list.filter((item) => item.folder === folder.value);
+  return list;
+});
+function onUploaded(uploaded) {
+  if (props.selectable && uploaded[0]) {
+    emit("select", uploaded[0]);
+    return;
+  }
+  void reload();
+}
+const editing = ref(null);
+const editAlt = ref("");
+const editFolder = ref("");
+const editSaving = ref(false);
+function openEdit(item) {
+  editing.value = item;
+  editAlt.value = item.alt ?? "";
+  editFolder.value = item.folder ?? "";
+}
+async function saveEdit() {
+  if (!editing.value) return;
+  editSaving.value = true;
+  try {
+    await $fetch(endpoint, {
+      method: "PUT",
+      body: {
+        id: editing.value.id,
+        alt: editAlt.value.trim() || null,
+        folder: editFolder.value.trim() || null
+      }
+    });
+    editing.value = null;
+    await reload();
+  } catch (err) {
+    toast.add({
+      title: t("cms.toast.saveFailed"),
+      description: errorMessage(err),
+      color: "error"
+    });
+  } finally {
+    editSaving.value = false;
+  }
+}
+function extension(key) {
+  const dot = key.lastIndexOf(".");
+  return dot === -1 ? "file" : key.slice(dot + 1).toLowerCase();
+}
+function formatSize(bytes) {
+  if (bytes == null) return "\u2014";
+  if (bytes < 1024) return `${bytes} B`;
+  let value = bytes;
+  for (const unit of ["KB", "MB", "GB"]) {
+    value /= 1024;
+    if (value < 1024) return `${value < 10 ? value.toFixed(1) : Math.round(value)} ${unit}`;
+  }
+  return `${Math.round(value / 1024)} TB`;
+}
+async function copy(item) {
+  try {
+    await navigator.clipboard.writeText(item.url ?? item.key);
+    toast.add({ title: t("cms.media.copied"), color: "success" });
+  } catch {
+    toast.add({ title: t("cms.media.copyError"), color: "error" });
+  }
+}
+async function remove(item) {
+  if (!confirm(t("cms.media.deleteConfirm"))) return;
+  try {
+    await $fetch(endpoint, { method: "DELETE", query: { key: item.key } });
+    await reload();
+  } catch (err) {
+    toast.add({
+      title: t("cms.media.deleteFailed"),
+      description: errorMessage(err),
+      color: "error"
+    });
+  }
+}
+</script>

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

@@ -0,0 +1,19 @@
+import type { MediaType } from '#nuxt-cms';
+type __VLS_Props = {
+    selectable?: boolean;
+    mediaType?: MediaType;
+    accept?: string[];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: (item: {
+        key: string;
+        url: string | null;
+    }) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSelect?: ((item: {
+        key: string;
+        url: string | null;
+    }) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,14 @@
+import type { MediaItem, MediaType } from '#nuxt-cms';
+type __VLS_Props = {
+    multiple?: boolean;
+    mediaType?: MediaType;
+    accept?: string[];
+    dense?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    uploaded: (items: MediaItem[]) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onUploaded?: ((items: MediaItem[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,132 @@
+<template>
+   <button
+      type="button"
+      class="cms-dropzone"
+      :class="{ 'is-dense': dense, 'is-over': dragOver, 'is-busy': uploading }"
+      :disabled="uploading"
+      @click="input?.click()"
+      @dragover.prevent="dragOver = true"
+      @dragleave.prevent="dragOver = false"
+      @drop.prevent="onDrop"
+   >
+      <input
+         ref="input"
+         type="file"
+         class="hidden"
+         :accept="acceptAttr"
+         :multiple="multiple"
+         @change="onChange"
+         @click.stop
+      />
+      <UIcon
+         :name="uploading ? 'i-lucide-loader-circle' : 'i-lucide-upload-cloud'"
+         class="size-5 shrink-0"
+         :class="{ 'animate-spin': uploading }"
+      />
+      <span class="text-[13px] font-medium">
+         {{
+            uploading ? t("cms.media.uploading", { done: Math.min(done + 1, total), total }) : t(multiple ? "cms.media.dropHint" : "cms.media.dropHintSingle")
+         }}
+      </span>
+   </button>
+</template>
+
+<script setup>
+import { computed, ref, useI18n, useToast } from "#imports";
+const props = defineProps({
+  multiple: { type: Boolean, required: false },
+  mediaType: { type: null, required: false, default: "file" },
+  accept: { type: Array, required: false },
+  dense: { type: Boolean, required: false }
+});
+const emit = defineEmits(["uploaded"]);
+const { t } = useI18n();
+const toast = useToast();
+async function imageDimensions(file) {
+  if (!file.type.startsWith("image/")) return {};
+  try {
+    const bitmap = await createImageBitmap(file);
+    const dims = { width: bitmap.width, height: bitmap.height };
+    bitmap.close();
+    return dims;
+  } catch {
+    return {};
+  }
+}
+const input = ref(null);
+const dragOver = ref(false);
+const uploading = ref(false);
+const done = ref(0);
+const total = ref(0);
+const acceptAttr = computed(
+  () => props.accept?.length ? props.accept.join(",") : props.mediaType === "image" ? "image/*" : props.mediaType === "video" ? "video/*" : void 0
+);
+function matchesAccept(file) {
+  if (!acceptAttr.value) return true;
+  return acceptAttr.value.split(",").some((raw) => {
+    const pattern = raw.trim().toLowerCase();
+    if (pattern.endsWith("/*")) return file.type.toLowerCase().startsWith(pattern.slice(0, -1));
+    if (pattern.startsWith(".")) return file.name.toLowerCase().endsWith(pattern);
+    return file.type.toLowerCase() === pattern;
+  });
+}
+const MAX_FILE_SIZE = 10 * 1024 * 1024;
+async function uploadOne(file) {
+  const presign = await $fetch("/api/cms/admin/media/presign", {
+    method: "POST",
+    body: {
+      filename: file.name,
+      contentType: file.type || "application/octet-stream",
+      size: file.size
+    }
+  });
+  const res = await fetch(presign.uploadUrl, {
+    method: "PUT",
+    headers: presign.headers,
+    body: file
+  });
+  if (!res.ok) throw new Error(`Upload failed (${res.status})`);
+  const item = await $fetch("/api/cms/admin/media", {
+    method: "POST",
+    body: {
+      key: presign.key,
+      mime: file.type || null,
+      size: file.size,
+      ...await imageDimensions(file)
+    }
+  });
+  done.value++;
+  return item;
+}
+async function handleFiles(list) {
+  let files = Array.from(list).filter(matchesAccept);
+  const tooLarge = files.filter((file) => file.size > MAX_FILE_SIZE);
+  for (const file of tooLarge) {
+    toast.add({ title: t("cms.media.tooLarge", { name: file.name }), color: "error" });
+  }
+  files = files.filter((file) => file.size <= MAX_FILE_SIZE);
+  if (!props.multiple) files = files.slice(0, 1);
+  if (!files.length || uploading.value) return;
+  uploading.value = true;
+  done.value = 0;
+  total.value = files.length;
+  try {
+    const results = await Promise.allSettled(files.map(uploadOne));
+    const ok = results.filter((r) => r.status === "fulfilled").map((r) => r.value);
+    const failed = results.length - ok.length;
+    if (failed) toast.add({ title: t("cms.media.uploadFailed", failed), color: "error" });
+    if (ok.length) emit("uploaded", ok);
+  } finally {
+    uploading.value = false;
+  }
+}
+function onChange(event) {
+  const el = event.target;
+  if (el.files?.length) void handleFiles(el.files);
+  el.value = "";
+}
+function onDrop(event) {
+  dragOver.value = false;
+  if (event.dataTransfer?.files.length) void handleFiles(event.dataTransfer.files);
+}
+</script>

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

@@ -0,0 +1,14 @@
+import type { MediaItem, MediaType } from '#nuxt-cms';
+type __VLS_Props = {
+    multiple?: boolean;
+    mediaType?: MediaType;
+    accept?: string[];
+    dense?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    uploaded: (items: MediaItem[]) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onUploaded?: ((items: MediaItem[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,19 @@
+type __VLS_Props = {
+    kicker: string;
+    title: string;
+};
+declare var __VLS_1: {}, __VLS_3: {};
+type __VLS_Slots = {} & {
+    badge?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_3) => any;
+};
+declare const __VLS_base: 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 __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,23 @@
+<template>
+   <header class="flex items-end justify-between gap-4">
+      <div class="flex flex-col gap-2">
+         <div class="cms-kicker">
+            {{ kicker }}
+         </div>
+         <div class="flex items-center gap-3">
+            <h1 class="cms-display text-(--ui-text-highlighted) text-[32px]/none font-medium">
+               {{ title }}
+            </h1>
+            <slot name="badge" />
+         </div>
+      </div>
+      <slot />
+   </header>
+</template>
+
+<script setup>
+defineProps({
+  kicker: { type: String, required: true },
+  title: { type: String, required: true }
+});
+</script>

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

@@ -0,0 +1,19 @@
+type __VLS_Props = {
+    kicker: string;
+    title: string;
+};
+declare var __VLS_1: {}, __VLS_3: {};
+type __VLS_Slots = {} & {
+    badge?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_3) => any;
+};
+declare const __VLS_base: 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 __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,16 @@
+type __VLS_Props = {
+    to: string;
+    required?: boolean;
+    multiple?: boolean;
+};
+type __VLS_ModelProps = {
+    modelValue: string | string[] | null;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | string[] | null) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | string[] | null) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,87 @@
+<template>
+   <USelectMenu
+      v-if="multiple"
+      v-model="many"
+      multiple
+      :items="options"
+      value-key="value"
+      :loading="loading"
+      size="lg"
+      class="w-full"
+   />
+   <USelectMenu
+      v-else
+      v-model="single"
+      :items="singleItems"
+      value-key="value"
+      :loading="loading"
+      size="lg"
+      class="w-full"
+   />
+</template>
+
+<script setup>
+import { isTranslatableField } from "#nuxt-cms";
+import { computed, onMounted, ref, useI18n, useToast } from "#imports";
+import cmsConfig from "#cms-config";
+import { useCmsRuntime } from "../../composables/cms-runtime";
+import { errorMessage } from "../../utils/ui";
+const props = defineProps({
+  to: { type: String, required: true },
+  required: { type: Boolean, required: false },
+  multiple: { type: Boolean, required: false }
+});
+const model = defineModel({ type: [String, Array, null], ...{ required: true } });
+const { t } = useI18n();
+const toast = useToast();
+const target = cmsConfig[props.to];
+const rows = ref([]);
+const loading = ref(true);
+onMounted(async () => {
+  try {
+    rows.value = await $fetch(`/api/cms/admin/${props.to}`);
+  } catch (err) {
+    toast.add({
+      title: t("cms.toast.loadFailed"),
+      description: errorMessage(err),
+      color: "error"
+    });
+  } finally {
+    loading.value = false;
+  }
+});
+const { i18n: contentI18n } = useCmsRuntime();
+const titleField = target?.titleField ?? "id";
+const titleFieldConfig = target?.fields[titleField];
+function optionLabel(row) {
+  const value = row[titleField];
+  if (value != null && titleFieldConfig && isTranslatableField(titleFieldConfig)) {
+    const record = value;
+    const raw = record[contentI18n.defaultLocale] ?? Object.values(record)[0] ?? "";
+    return raw || `#${row.id}`;
+  }
+  return String(value ?? `#${row.id}`);
+}
+const options = computed(
+  () => rows.value.map((row) => ({
+    label: optionLabel(row),
+    value: row.id
+  }))
+);
+const singleItems = computed(() => [
+  ...props.required ? [] : [{ label: "\u2014", value: null }],
+  ...options.value
+]);
+const single = computed({
+  get: () => model.value ?? null,
+  set: (value) => {
+    model.value = value;
+  }
+});
+const many = computed({
+  get: () => model.value ?? [],
+  set: (value) => {
+    model.value = value;
+  }
+});
+</script>

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

@@ -0,0 +1,16 @@
+type __VLS_Props = {
+    to: string;
+    required?: boolean;
+    multiple?: boolean;
+};
+type __VLS_ModelProps = {
+    modelValue: string | string[] | null;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | string[] | null) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | string[] | null) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;