@xleddyl/nuxt-cms 0.1.11 → 0.1.13

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

@@ -1,9 +1,9 @@
 <template>
    <CmsEmptyState
       v-if="notConfigured"
-      icon="i-lucide-plug-zap"
-      :title="t('cms.media.notConfiguredTitle')"
-      :body="t('cms.media.notConfiguredBody')"
+      icon="bolt"
+      title="Media storage not configured"
+      body="Set cms.media in nuxt.config to enable uploads."
    />
 
    <div v-else class="flex flex-col gap-5">
@@ -24,10 +24,10 @@
             :class="{ 'is-active': filter === f }"
             @click="filter = f"
          >
-            {{ t(`cms.media.filter.${f}`) }}
+            {{ filterLabels[f] }}
          </button>
          <template v-if="folders.length">
-            <span class="bg-(--cms-line) mx-1 h-4 w-px" />
+            <span class="mx-1 h-4 w-px bg-(--cms-line)" />
             <button
                v-for="f in folders"
                :key="f"
@@ -36,13 +36,13 @@
                :class="{ 'is-active': folder === f }"
                @click="folder = folder === f ? null : f"
             >
-               <UIcon name="i-lucide-folder" class="mr-1 size-3" />{{ f }}
+               <CmsIcon name="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" />
+         <CmsIcon name="arrow-path" class="size-6 animate-spin text-(--ui-text-dimmed)" />
       </div>
 
       <div
@@ -63,7 +63,7 @@
 }"
             @click="selectable && emit('select', { key: item.key, url: item.url })"
          >
-            <div class="bg-(--cms-field) relative flex aspect-square items-center justify-center">
+            <div class="relative flex aspect-square items-center justify-center bg-(--cms-field)">
                <img
                   v-if="item.type === 'image' && item.url"
                   :src="item.url"
@@ -79,40 +79,40 @@
                   playsinline
                   class="absolute inset-0 size-full object-cover"
                />
-               <UIcon
+               <CmsIcon
                   v-else
                   :name="mediaIconFor(item.type)"
-                  class="text-(--ui-text-dimmed) size-8"
+                  class="size-8 text-(--ui-text-dimmed)"
                />
                <div
                   v-if="!selectable"
-                  class="absolute right-2 top-2 flex gap-1 opacity-0 transition-opacity focus-within:opacity-100 group-hover:opacity-100"
+                  class="absolute top-2 right-2 flex gap-1 opacity-0 transition-opacity group-hover:opacity-100 focus-within:opacity-100"
                >
-                  <UButton
-                     icon="i-lucide-pencil"
+                  <CmsButton
+                     icon="pencil-square"
                      size="xs"
                      color="neutral"
                      variant="solid"
                      class="rounded-full shadow-sm"
-                     :aria-label="t('cms.media.edit')"
+                     aria-label="Edit details"
                      @click="openEdit(item)"
                   />
-                  <UButton
-                     icon="i-lucide-copy"
+                  <CmsButton
+                     icon="document-duplicate"
                      size="xs"
                      color="neutral"
                      variant="solid"
                      class="rounded-full shadow-sm"
-                     :aria-label="t('cms.media.copy')"
+                     aria-label="Copy URL"
                      @click="copy(item)"
                   />
-                  <UButton
-                     icon="i-lucide-trash-2"
+                  <CmsButton
+                     icon="trash"
                      size="xs"
                      color="error"
                      variant="solid"
                      class="rounded-full shadow-sm"
-                     :aria-label="t('cms.media.delete')"
+                     aria-label="Delete"
                      @click="remove(item)"
                   />
                </div>
@@ -131,14 +131,10 @@
          </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"
+      <CmsEmptyState v-else-if="loadError" icon="exclamation-triangle" title="Could not load media">
+         <CmsButton
+            label="Retry"
+            icon="arrow-path"
             variant="subtle"
             class="mt-3 rounded-full px-4"
             @click="reload"
@@ -147,12 +143,12 @@
 
       <CmsEmptyState
          v-else
-         icon="i-lucide-image"
-         :title="t('cms.media.emptyTitle')"
-         :body="t('cms.media.emptyBody')"
+         icon="photo"
+         title="No media yet"
+         body="Files you upload will show up here."
       />
 
-      <UModal
+      <CmsModal
          :open="!!editing"
          :title="editing ? mediaFilename(editing.key) : ''"
          :ui="CMS_MODAL_UI"
@@ -164,15 +160,15 @@
       >
          <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>
+               <CmsFormField label="Alt text">
+                  <CmsInput v-model="editAlt" size="lg" class="w-full" />
+               </CmsFormField>
+               <CmsFormField label="Folder">
+                  <CmsInput v-model="editFolder" size="lg" class="w-full" />
+               </CmsFormField>
                <div class="flex justify-end">
-                  <UButton
-                     :label="t('cms.form.save')"
+                  <CmsButton
+                     label="Save"
                      :loading="editSaving"
                      class="rounded-full px-6"
                      @click="saveEdit"
@@ -180,23 +176,29 @@
                </div>
             </div>
          </template>
-      </UModal>
+      </CmsModal>
    </div>
 </template>
 
 <script setup>
-import { computed, onMounted, ref, useI18n, useToast } from "#imports";
+import { computed, onMounted, ref } from "#imports";
 import { MEDIA_TYPES, mediaFilename, mediaIconFor } from "#nuxt-cms";
 import { useCmsConfirm } from "../../composables/cms-confirm";
+import { useCmsToast } from "../../composables/cms-toast";
 import { CMS_MODAL_UI, errorMessage } from "../../utils/ui";
+const filterLabels = {
+  all: "All",
+  image: "Images",
+  video: "Videos",
+  file: "Files"
+};
 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 toast = useCmsToast();
 const endpoint = "/api/cms/admin/media";
 const items = ref([]);
 const loading = ref(true);
@@ -264,7 +266,7 @@ async function saveEdit() {
     await reload();
   } catch (err) {
     toast.add({
-      title: t("cms.toast.saveFailed"),
+      title: "Save failed",
       description: errorMessage(err),
       color: "error"
     });
@@ -289,23 +291,24 @@ function formatSize(bytes) {
 async function copy(item) {
   try {
     await navigator.clipboard.writeText(item.url ?? item.key);
-    toast.add({ title: t("cms.media.copied"), color: "success" });
+    toast.add({ title: "Copied", color: "success" });
   } catch {
-    toast.add({ title: t("cms.media.copyError"), color: "error" });
+    toast.add({ title: "Copy failed", color: "error" });
   }
 }
 const confirmAction = useCmsConfirm();
 const removing = ref(false);
 async function remove(item) {
   if (removing.value) return;
-  if (!await confirmAction(t("cms.media.deleteConfirm"))) return;
+  if (!await confirmAction("Delete this file? Entries referencing it will keep a broken link."))
+    return;
   removing.value = true;
   try {
     await $fetch(endpoint, { method: "DELETE", query: { key: item.key } });
     await reload();
   } catch (err) {
     toast.add({
-      title: t("cms.media.deleteFailed"),
+      title: "Delete failed",
       description: errorMessage(err),
       color: "error"
     });

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

@@ -18,21 +18,22 @@
          @change="onChange"
          @click.stop
       />
-      <UIcon
-         :name="uploading ? 'i-lucide-loader-circle' : 'i-lucide-upload-cloud'"
+      <CmsIcon
+         :name="uploading ? 'arrow-path' : 'cloud-arrow-up'"
          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")
+            uploading ? `Uploading ${Math.min(done + 1, total)} of ${total}\u2026` : multiple ? "Drop files here or click to browse" : "Drop a file here or click to browse"
          }}
       </span>
    </button>
 </template>
 
 <script setup>
-import { computed, ref, useI18n, useToast } from "#imports";
+import { computed, ref } from "#imports";
+import { useCmsToast } from "../../composables/cms-toast";
 const props = defineProps({
   multiple: { type: Boolean, required: false },
   mediaType: { type: null, required: false, default: "file" },
@@ -40,8 +41,7 @@ const props = defineProps({
   dense: { type: Boolean, required: false }
 });
 const emit = defineEmits(["uploaded"]);
-const { t } = useI18n();
-const toast = useToast();
+const toast = useCmsToast();
 async function imageDimensions(file) {
   if (!file.type.startsWith("image/")) return {};
   try {
@@ -102,7 +102,7 @@ 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" });
+    toast.add({ title: `File too large (max 10 MB): ${file.name}`, color: "error" });
   }
   files = files.filter((file) => file.size <= MAX_FILE_SIZE);
   if (!props.multiple) files = files.slice(0, 1);
@@ -114,7 +114,8 @@ async function handleFiles(list) {
     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 (failed)
+      toast.add({ title: `${failed} upload${failed > 1 ? "s" : ""} failed`, color: "error" });
     if (ok.length) emit("uploaded", ok);
   } finally {
     uploading.value = false;

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

@@ -0,0 +1,34 @@
+type __VLS_Props = {
+    title?: string;
+    ui?: {
+        content?: string;
+        title?: string;
+    };
+};
+type __VLS_ModelProps = {
+    'open'?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_7: {}, __VLS_9: {}, __VLS_11: {};
+type __VLS_Slots = {} & {
+    header?: (props: typeof __VLS_7) => any;
+} & {
+    body?: (props: typeof __VLS_9) => any;
+} & {
+    default?: (props: typeof __VLS_11) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "after:leave": () => any;
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onAfter:leave"?: (() => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, 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/Modal.vue

@@ -0,0 +1,54 @@
+<template>
+   <Teleport to="body">
+      <!-- Wrapped in .cms-scope so the vendored Tailwind utilities still apply
+           once teleported outside the admin layout root. -->
+      <div v-if="open" class="cms-scope">
+         <div class="cms-overlay" @click.self="close">
+            <div class="cms-modal cms-rise" :class="ui?.content" role="dialog" aria-modal="true">
+               <div v-if="title || $slots.header" class="cms-modal-header">
+                  <slot name="header">
+                     <h2
+                        :class="
+  ui?.title ?? 'cms-display text-xl font-medium text-(--ui-text-highlighted)'
+"
+                     >
+                        {{ title }}
+                     </h2>
+                  </slot>
+               </div>
+               <div class="cms-modal-body">
+                  <slot name="body"><slot /></slot>
+               </div>
+            </div>
+         </div>
+      </div>
+   </Teleport>
+</template>
+
+<script setup>
+import { onBeforeUnmount, watch } from "#imports";
+defineProps({
+  title: { type: String, required: false },
+  ui: { type: Object, required: false }
+});
+const open = defineModel("open", { type: Boolean, ...{ default: false } });
+const emit = defineEmits(["after:leave"]);
+function close() {
+  open.value = false;
+}
+function onKeydown(event) {
+  if (event.key === "Escape") close();
+}
+watch(open, (value, previous) => {
+  if (import.meta.server) return;
+  if (value) {
+    document.addEventListener("keydown", onKeydown);
+  } else {
+    document.removeEventListener("keydown", onKeydown);
+    if (previous) emit("after:leave");
+  }
+});
+onBeforeUnmount(() => {
+  if (import.meta.client) document.removeEventListener("keydown", onKeydown);
+});
+</script>

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

@@ -0,0 +1,34 @@
+type __VLS_Props = {
+    title?: string;
+    ui?: {
+        content?: string;
+        title?: string;
+    };
+};
+type __VLS_ModelProps = {
+    'open'?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_7: {}, __VLS_9: {}, __VLS_11: {};
+type __VLS_Slots = {} & {
+    header?: (props: typeof __VLS_7) => any;
+} & {
+    body?: (props: typeof __VLS_9) => any;
+} & {
+    default?: (props: typeof __VLS_11) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "after:leave": () => any;
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onAfter:leave"?: (() => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, 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

@@ -5,7 +5,7 @@
             {{ kicker }}
          </div>
          <div class="flex items-center gap-3">
-            <h1 class="cms-display text-(--ui-text-highlighted) text-[32px]/none font-medium">
+            <h1 class="cms-display text-[32px]/none font-medium text-(--ui-text-highlighted)">
                {{ title }}
             </h1>
             <slot name="badge" />

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

@@ -0,0 +1,15 @@
+type __VLS_Props = {
+    total: number;
+    itemsPerPage: number;
+};
+type __VLS_ModelProps = {
+    'page'?: number;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:page": (value: number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:page"?: ((value: number) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,51 @@
+<template>
+   <div class="cms-pagination">
+      <button
+         type="button"
+         class="cms-page-btn"
+         :disabled="page <= 1"
+         aria-label="Previous page"
+         @click="go(page - 1)"
+      >
+         <CmsIcon name="chevron-left" class="size-4" />
+      </button>
+      <button
+         v-for="p in pages"
+         :key="p"
+         type="button"
+         class="cms-page-btn"
+         :class="{ 'is-active': p === page }"
+         @click="go(p)"
+      >
+         {{ p }}
+      </button>
+      <button
+         type="button"
+         class="cms-page-btn"
+         :disabled="page >= pageCount"
+         aria-label="Next page"
+         @click="go(page + 1)"
+      >
+         <CmsIcon name="chevron-right" class="size-4" />
+      </button>
+   </div>
+</template>
+
+<script setup>
+import { computed } from "#imports";
+const props = defineProps({
+  total: { type: Number, required: true },
+  itemsPerPage: { type: Number, required: true }
+});
+const page = defineModel("page", { type: Number, ...{ default: 1 } });
+const pageCount = computed(() => Math.max(1, Math.ceil(props.total / props.itemsPerPage)));
+const pages = computed(() => {
+  const count = pageCount.value;
+  if (count <= 7) return Array.from({ length: count }, (_, index) => index + 1);
+  const start = Math.min(Math.max(page.value - 3, 1), count - 6);
+  return Array.from({ length: 7 }, (_, index) => start + index);
+});
+function go(target) {
+  if (target >= 1 && target <= pageCount.value) page.value = target;
+}
+</script>

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

@@ -0,0 +1,15 @@
+type __VLS_Props = {
+    total: number;
+    itemsPerPage: number;
+};
+type __VLS_ModelProps = {
+    'page'?: number;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:page": (value: number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:page"?: ((value: number) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,22 @@
+type __VLS_ModelProps = {
+    'open'?: boolean;
+};
+declare var __VLS_1: {}, __VLS_3: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+} & {
+    content?: (props: typeof __VLS_3) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_ModelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, 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/Popover.vue

@@ -0,0 +1,27 @@
+<template>
+   <div ref="root" class="relative inline-flex">
+      <div class="contents" @click="open = !open">
+         <slot />
+      </div>
+      <div v-if="open" class="cms-popover">
+         <slot name="content" />
+      </div>
+   </div>
+</template>
+
+<script setup>
+import { onBeforeUnmount, ref, watch } from "#imports";
+const open = defineModel("open", { type: Boolean, ...{ default: false } });
+const root = ref(null);
+function onOutside(event) {
+  if (root.value && !root.value.contains(event.target)) open.value = false;
+}
+watch(open, (value) => {
+  if (import.meta.server) return;
+  if (value) document.addEventListener("click", onOutside, true);
+  else document.removeEventListener("click", onOutside, true);
+});
+onBeforeUnmount(() => {
+  if (import.meta.client) document.removeEventListener("click", onOutside, true);
+});
+</script>

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

@@ -0,0 +1,22 @@
+type __VLS_ModelProps = {
+    'open'?: boolean;
+};
+declare var __VLS_1: {}, __VLS_3: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+} & {
+    content?: (props: typeof __VLS_3) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_ModelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, 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.vue

@@ -1,5 +1,5 @@
 <template>
-   <USelectMenu
+   <CmsSelectMenu
       v-if="multiple"
       v-model="many"
       v-model:search-term="searchTerm"
@@ -11,7 +11,7 @@
       size="lg"
       class="w-full"
    />
-   <USelectMenu
+   <CmsSelectMenu
       v-else
       v-model="single"
       v-model:search-term="searchTerm"
@@ -26,9 +26,10 @@
 
 <script setup>
 import { isTranslatableField } from "#nuxt-cms";
-import { computed, onMounted, ref, useI18n, useToast, watch } from "#imports";
+import { computed, onMounted, ref, watch } from "#imports";
 import cmsConfig from "#cms-config";
 import { useCmsRuntime } from "../../composables/cms-runtime";
+import { useCmsToast } from "../../composables/cms-toast";
 import { errorMessage } from "../../utils/ui";
 const props = defineProps({
   to: { type: String, required: true },
@@ -36,8 +37,7 @@ const props = defineProps({
   multiple: { type: Boolean, required: false }
 });
 const model = defineModel({ type: [String, Array, null], ...{ required: true } });
-const { t } = useI18n();
-const toast = useToast();
+const toast = useCmsToast();
 const target = cmsConfig[props.to];
 const endpoint = `/api/cms/admin/${props.to}`;
 const fetched = ref([]);
@@ -54,7 +54,7 @@ async function fetchOptions() {
     fetched.value = page.items;
   } catch (err) {
     toast.add({
-      title: t("cms.toast.loadFailed"),
+      title: "Loading failed",
       description: errorMessage(err),
       color: "error"
     });