@xleddyl/nuxt-cms 0.1.11 → 0.1.13

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

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,42 @@
+<template>
+   <Teleport to="body">
+      <div v-if="toasts.length" class="cms-scope">
+         <div class="cms-toaster">
+            <div
+               v-for="toast in toasts"
+               :key="toast.id"
+               class="cms-toast cms-rise"
+               :class="{
+  'is-success': toast.color === 'success',
+  'is-error': toast.color === 'error'
+}"
+            >
+               <div class="flex items-start gap-3">
+                  <div class="min-w-0 flex-1">
+                     <p class="text-[13px] font-medium text-(--ui-text-highlighted)">
+                        {{ toast.title }}
+                     </p>
+                     <p v-if="toast.description" class="mt-0.5 text-xs text-(--ui-text-muted)">
+                        {{ toast.description }}
+                     </p>
+                  </div>
+                  <button
+                     type="button"
+                     class="shrink-0 text-(--ui-text-dimmed) hover:text-(--ui-text)"
+                     aria-label="Dismiss"
+                     @click="remove(toast.id)"
+                  >
+                     <CmsIcon name="x-mark" class="size-4" />
+                  </button>
+               </div>
+            </div>
+         </div>
+      </div>
+   </Teleport>
+</template>
+
+<script setup>
+import { useCmsToast, useCmsToastState } from "../../composables/cms-toast";
+const toasts = useCmsToastState();
+const { remove } = useCmsToast();
+</script>

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

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -1,7 +1,7 @@
 <template>
    <div class="flex flex-col gap-2">
       <div v-if="i18n.locales.length > 1" class="flex items-center gap-1">
-         <UButton
+         <CmsButton
             v-for="locale in i18n.locales"
             :key="locale"
             size="xs"
@@ -19,23 +19,23 @@
                class="size-1.5 rounded-full"
                :class="hasContent(locale) ? 'bg-(--cms-fern)' : 'bg-(--cms-line)'"
             />
-         </UButton>
+         </CmsButton>
          <span
             v-if="props.field.required && active === i18n.defaultLocale"
-            class="text-(--ui-text-muted) ml-auto font-mono text-xs"
+            class="ml-auto font-mono text-xs text-(--ui-text-muted)"
          >
             {{ i18n.defaultLocale }} *
          </span>
       </div>
       <CmsRichTextField v-if="props.field.type === 'richtext'" v-model="current" />
-      <UTextarea
+      <CmsTextarea
          v-else-if="props.field.textarea"
          v-model="current"
          :rows="4"
          size="lg"
          class="w-full"
       />
-      <UInput v-else v-model="current" size="lg" class="w-full" />
+      <CmsInput v-else v-model="current" size="lg" class="w-full" />
    </div>
 </template>
 

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

@@ -1,3 +1,11 @@
+export interface CmsConfirmState {
+    open: boolean;
+    message: string;
+    title?: string;
+    confirmLabel?: string;
+    resolve?: (value: boolean) => void;
+}
+export declare function useCmsConfirmState(): import("vue").Ref<CmsConfirmState, CmsConfirmState>;
 export declare function useCmsConfirm(): (message: string, options?: {
     title?: string;
     confirmLabel?: string;

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

@@ -1,7 +1,16 @@
-import { useOverlay } from "#imports";
-import ConfirmModal from "../components/cms/ConfirmModal.vue";
+import { useState } from "#imports";
+export function useCmsConfirmState() {
+  return useState("cms-confirm", () => ({ open: false, message: "" }));
+}
 export function useCmsConfirm() {
-  const overlay = useOverlay();
-  const modal = overlay.create(ConfirmModal);
-  return async (message, options) => await modal.open({ message, ...options }) === true;
+  const state = useCmsConfirmState();
+  return (message, options) => new Promise((resolve) => {
+    state.value = {
+      open: true,
+      message,
+      title: options?.title,
+      confirmLabel: options?.confirmLabel,
+      resolve
+    };
+  });
 }

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

@@ -0,0 +1,13 @@
+export interface CmsToast {
+    id: number;
+    title: string;
+    description?: string;
+    color?: 'success' | 'error';
+}
+export declare function useCmsToastState(): import("vue").Ref<CmsToast[], CmsToast[]>;
+export declare function useCmsToast(): {
+    add: (toast: Omit<CmsToast, "id">) => {
+        id: number;
+    };
+    remove: (id: number) => void;
+};

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

@@ -0,0 +1,18 @@
+import { useState } from "#imports";
+let counter = 0;
+export function useCmsToastState() {
+  return useState("cms-toasts", () => []);
+}
+export function useCmsToast() {
+  const toasts = useCmsToastState();
+  function remove(id) {
+    toasts.value = toasts.value.filter((toast) => toast.id !== id);
+  }
+  function add(toast) {
+    const id = ++counter;
+    toasts.value = [...toasts.value, { id, ...toast }];
+    if (import.meta.client) setTimeout(() => remove(id), 4e3);
+    return { id };
+  }
+  return { add, remove };
+}

package/dist/runtime/app/layouts/cms-admin.vue

@@ -2,15 +2,13 @@
    <div class="cms-scope cms-canvas cms-grain min-h-screen">
       <div class="flex min-h-screen">
          <aside
-            class="border-(--cms-line) sticky top-0 flex h-screen w-64 shrink-0 flex-col gap-7 border-r px-4 py-7"
+            class="sticky top-0 flex h-screen w-64 shrink-0 flex-col gap-7 border-r border-(--cms-line) px-4 py-7"
          >
             <div class="px-3">
-               <div class="cms-display text-(--ui-text-highlighted) text-[22px] font-semibold">
+               <div class="cms-display text-[22px] font-semibold text-(--ui-text-highlighted)">
                   nuxt<span class="text-(--cms-fern)">·</span>cms
                </div>
-               <div class="cms-kicker mt-1.5">
-                  {{ t("cms.sidebar.tagline") }}
-               </div>
+               <div class="cms-kicker mt-1.5">content studio</div>
             </div>
 
             <nav class="flex flex-1 flex-col gap-6 overflow-y-auto">
@@ -25,22 +23,22 @@
                      class="cms-navlink"
                      :class="{ 'is-active': route.path === link.to }"
                   >
-                     <UIcon
+                     <CmsIcon
                         :name="group.icon"
-                        class="cms-navlink-icon text-(--ui-text-dimmed) size-4 shrink-0"
+                        class="cms-navlink-icon size-4 shrink-0 text-(--ui-text-dimmed)"
                      />
                      <span class="truncate">{{ link.label }}</span>
                   </NuxtLink>
                </div>
             </nav>
 
-            <div class="border-(--cms-line) flex flex-col gap-3 border-t px-3 pt-5">
-               <div class="text-(--ui-text-muted) truncate text-[11px] font-medium">
+            <div class="flex flex-col gap-3 border-t border-(--cms-line) px-3 pt-5">
+               <div class="truncate text-[11px] font-medium text-(--ui-text-muted)">
                   {{ user?.email }}
                </div>
-               <UButton
-                  :label="t('cms.sidebar.signOut')"
-                  icon="i-lucide-log-out"
+               <CmsButton
+                  label="Sign out"
+                  icon="arrow-right-on-rectangle"
                   variant="ghost"
                   color="neutral"
                   size="xs"
@@ -56,15 +54,17 @@
             </div>
          </main>
       </div>
+
+      <CmsToaster />
+      <CmsConfirmModal />
    </div>
 </template>
 
 <script setup>
-import { computed, navigateTo, useI18n, useRoute, useUserSession } from "#imports";
+import { computed, navigateTo, useRoute, useUserSession } from "#imports";
 import cmsConfig from "#cms-config";
 const route = useRoute();
 const { user, clear } = useUserSession();
-const { t } = useI18n();
 const links = Object.entries(cmsConfig).map(([name, entry]) => ({
   name,
   label: entry.label,
@@ -74,19 +74,19 @@ const links = Object.entries(cmsConfig).map(([name, entry]) => ({
 const groups = computed(
   () => [
     {
-      title: t("cms.sidebar.collections"),
-      icon: "i-lucide-layers",
+      title: "Collections",
+      icon: "square-3-stack-3d",
       links: links.filter((l) => l.kind === "collection")
     },
     {
-      title: t("cms.sidebar.singles"),
-      icon: "i-lucide-file-text",
+      title: "Singles",
+      icon: "document-text",
       links: links.filter((l) => l.kind === "single")
     },
     {
-      title: t("cms.sidebar.library"),
-      icon: "i-lucide-image",
-      links: [{ name: "media", label: t("cms.sidebar.media"), kind: "media", to: "/cms/media" }]
+      title: "Library",
+      icon: "photo",
+      links: [{ name: "media", label: "Media", kind: "media", to: "/cms/media" }]
     }
   ].filter((g) => g.links.length)
 );

package/dist/runtime/app/middleware/cms-auth.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("#app").RouteMiddleware;
+declare const _default: import("nuxt/app").RouteMiddleware;
 export default _default;

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

@@ -1,45 +1,41 @@
 <template>
    <div class="cms-rise flex flex-col gap-7">
       <CmsPageHeader :kicker="kicker" :title="config.label">
-         <UButton
+         <CmsButton
             v-if="config.kind === 'single'"
             type="submit"
             :form="FORM_ID"
-            :label="t('cms.form.save')"
+            label="Save"
             :loading="saving"
             class="rounded-full px-6"
          />
          <div v-if="config.kind === 'collection'" class="flex items-center gap-2">
-            <UDropdownMenu
+            <CmsDropdownMenu
                v-if="rows.length"
                :items="columnItems"
                :content="{ align: 'end' }"
                :ui="{ content: 'w-48' }"
             >
-               <UButton
-                  :label="t('cms.collection.columns')"
-                  icon="i-lucide-columns-3"
+               <CmsButton
+                  label="Columns"
+                  icon="view-columns"
                   variant="subtle"
                   class="rounded-full px-4"
                />
-            </UDropdownMenu>
-            <UButton
-               :label="t('cms.collection.new')"
-               icon="i-lucide-plus"
+            </CmsDropdownMenu>
+            <CmsButton
+               label="New entry"
+               icon="plus"
                class="rounded-full px-4"
                @click="openCreate"
             />
          </div>
       </CmsPageHeader>
 
-      <CmsEmptyState
-         v-if="error"
-         icon="i-lucide-triangle-alert"
-         :title="t('cms.collection.loadError')"
-      >
-         <UButton
-            :label="t('cms.collection.retry')"
-            icon="i-lucide-refresh-cw"
+      <CmsEmptyState v-if="error" icon="exclamation-triangle" title="Could not load entries">
+         <CmsButton
+            label="Retry"
+            icon="arrow-path"
             variant="subtle"
             class="mt-3 rounded-full px-4"
             :loading="status === 'pending'"
@@ -58,16 +54,16 @@
       </div>
 
       <template v-else>
-         <UInput
+         <CmsInput
             v-if="total || searchTerm"
             v-model="search"
-            icon="i-lucide-search"
-            :placeholder="t('cms.collection.searchPlaceholder')"
+            icon="magnifying-glass"
+            placeholder="Search…"
             class="max-w-xs"
          />
 
          <div v-if="rows.length" class="cms-card overflow-hidden">
-            <UTable
+            <CmsTable
                v-model:column-visibility="columnVisibility"
                :data="rows"
                :columns="columns"
@@ -79,20 +75,16 @@
                      type="button"
                      class="cms-badge"
                      :class="row.original.status === 'published' ? 'is-published' : 'is-draft'"
-                     :title="
-  row.original.status === 'published' ? t('cms.status.unpublish') : t('cms.status.publish')
-"
+                     :title="row.original.status === 'published' ? 'Make draft' : 'Publish'"
                      @click.stop="toggleStatus(row.original)"
                   >
-                     {{
-                        row.original.status === "published" ? t("cms.status.published") : t("cms.status.draft")
-                     }}
+                     {{ row.original.status === "published" ? "Published" : "Draft" }}
                   </button>
                </template>
                <template #actions-cell="{ row }">
                   <div class="flex justify-end">
-                     <UButton
-                        icon="i-lucide-trash-2"
+                     <CmsButton
+                        icon="trash"
                         variant="ghost"
                         color="error"
                         size="xs"
@@ -101,31 +93,28 @@
                      />
                   </div>
                </template>
-            </UTable>
+            </CmsTable>
          </div>
 
          <div v-else-if="status === 'pending'" 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>
 
          <CmsEmptyState
             v-else-if="searchTerm"
-            icon="i-lucide-search-x"
-            :title="t('cms.collection.noResults')"
+            icon="magnifying-glass"
+            title="No matching entries"
          />
 
          <CmsEmptyState
             v-else
-            icon="i-lucide-sprout"
-            :title="t('cms.collection.emptyTitle')"
-            :body="t('cms.collection.emptyBody')"
+            icon="sparkles"
+            title="Nothing here yet"
+            body="Entries you create will show up here."
          >
-            <UButton
-               :label="t('cms.collection.new')"
-               icon="i-lucide-plus"
+            <CmsButton
+               label="New entry"
+               icon="plus"
                variant="subtle"
                class="mt-3 rounded-full px-4"
                @click="openCreate"
@@ -133,7 +122,7 @@
          </CmsEmptyState>
 
          <div v-if="total > PAGE_SIZE" class="flex justify-center">
-            <UPagination v-model:page="page" :total="total" :items-per-page="PAGE_SIZE" />
+            <CmsPagination v-model:page="page" :total="total" :items-per-page="PAGE_SIZE" />
          </div>
       </template>
    </div>
@@ -149,14 +138,13 @@ import {
   onMounted,
   ref,
   useFetch,
-  useI18n,
   useRoute,
-  useToast,
   watch
 } from "#imports";
 import cmsConfig from "#cms-config";
 import { useCmsConfirm } from "../composables/cms-confirm";
 import { useCmsRuntime } from "../composables/cms-runtime";
+import { useCmsToast } from "../composables/cms-toast";
 import { cmsApi } from "../utils/api";
 import { errorMessage } from "../utils/ui";
 definePageMeta({
@@ -167,8 +155,7 @@ definePageMeta({
 });
 const FORM_ID = "cms-single-form";
 const route = useRoute();
-const toast = useToast();
-const { t } = useI18n();
+const toast = useCmsToast();
 const name = route.params.collection;
 const config = cmsConfig[name];
 if (!config) {
@@ -232,7 +219,7 @@ async function submit(action) {
     return true;
   } catch (error2) {
     toast.add({
-      title: t("cms.toast.saveFailed"),
+      title: "Save failed",
       description: errorMessage(error2),
       color: "error"
     });
@@ -246,7 +233,7 @@ if (config.kind === "single") {
 }
 async function saveSingle() {
   const ok = await submit(() => cmsApi(endpoint, { method: "PUT", body: formState.value }));
-  if (ok) toast.add({ title: t("cms.toast.saved"), color: "success" });
+  if (ok) toast.add({ title: "Saved", color: "success" });
 }
 const { i18n: contentI18n } = useCmsRuntime();
 function stripHtml(html) {
@@ -281,7 +268,7 @@ const columns = computed(() => [
     accessorFn: (row) => displayValue(config.fields[key], row[key]),
     header: config.fields[key].label
   })),
-  ...drafts ? [{ accessorKey: "status", header: t("cms.collection.status") }] : [],
+  ...drafts ? [{ accessorKey: "status", header: "Status" }] : [],
   { id: "actions", header: "" }
 ]);
 const DEFAULT_VISIBLE_COLUMNS = 4;
@@ -320,7 +307,7 @@ const columnItems = computed(
   }))
 );
 const kicker = computed(
-  () => config.kind === "single" ? t("cms.collection.kickerSingle") : t("cms.collection.kicker", total.value)
+  () => config.kind === "single" ? "single document" : `collection \xB7 ${total.value} ${total.value === 1 ? "entry" : "entries"}`
 );
 function onSelect(_event, row) {
   navigateTo(`/cms/${name}/${row.original.id}`);
@@ -340,7 +327,7 @@ function openCreate() {
 }
 const confirmAction = useCmsConfirm();
 async function deleteRow(row) {
-  if (!await confirmAction(t("cms.collection.deleteConfirm"))) return;
+  if (!await confirmAction("Delete this row?")) return;
   const lastOnPage = rows.value.length === 1 && page.value > 1;
   const ok = await submit(() => cmsApi(`${endpoint}/${row.id}`, { method: "DELETE" }));
   if (ok && lastOnPage) page.value -= 1;

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

@@ -1,37 +1,34 @@
 <template>
    <div class="cms-rise flex flex-col gap-7">
-      <CmsPageHeader
-         :kicker="config.label"
-         :title="isNew ? t('cms.collection.new') : t('cms.collection.edit')"
-      >
+      <CmsPageHeader :kicker="config.label" :title="isNew ? 'New entry' : 'Edit entry'">
          <template v-if="drafts" #badge>
             <span
                class="cms-badge pointer-events-none"
                :class="published ? 'is-published' : 'is-draft'"
             >
-               {{ published ? t("cms.status.published") : t("cms.status.draft") }}
+               {{ published ? "Published" : "Draft" }}
             </span>
          </template>
          <div class="flex items-center gap-3">
-            <UButton
-               :label="t('cms.collection.back')"
-               icon="i-lucide-arrow-left"
+            <CmsButton
+               label="Back"
+               icon="arrow-left"
                variant="subtle"
                class="rounded-full px-4"
                @click="goBack"
             />
-            <UButton
+            <CmsButton
                type="submit"
                :form="FORM_ID"
-               :label="t('cms.form.save')"
+               label="Save"
                :loading="saving"
                class="rounded-full px-6"
             />
-            <UButton
+            <CmsButton
                v-if="drafts"
                type="submit"
                :form="FORM_ID"
-               :label="published ? t('cms.status.unpublish') : t('cms.status.publish')"
+               :label="published ? 'Make draft' : 'Publish'"
                :loading="saving"
                class="rounded-full px-6"
                @click="togglePublished"
@@ -63,13 +60,12 @@ import {
   onBeforeUnmount,
   ref,
   useFetch,
-  useI18n,
   useRoute,
-  useToast,
   watch
 } from "#imports";
 import cmsConfig from "#cms-config";
 import { useCmsConfirm } from "../composables/cms-confirm";
+import { useCmsToast } from "../composables/cms-toast";
 import { cmsApi } from "../utils/api";
 import { errorMessage } from "../utils/ui";
 const FORM_ID = "cms-entry-form";
@@ -80,8 +76,7 @@ definePageMeta({
   key: (route2) => route2.fullPath
 });
 const route = useRoute();
-const toast = useToast();
-const { t } = useI18n();
+const toast = useCmsToast();
 const name = route.params.collection;
 const config = cmsConfig[name];
 if (!config || config.kind !== "collection") {
@@ -125,7 +120,8 @@ watch(dirty, (value) => {
 onBeforeUnmount(() => window.removeEventListener("beforeunload", onBeforeUnload));
 const confirmAction = useCmsConfirm();
 onBeforeRouteLeave(async () => {
-  if (dirty.value && !await confirmAction(t("cms.entry.unsavedChanges"))) return false;
+  if (dirty.value && !await confirmAction("You have unsaved changes. Leave anyway?"))
+    return false;
 });
 const published = computed({
   get: () => formState.value.status === "published",
@@ -148,11 +144,11 @@ async function save() {
   try {
     await (isNew ? cmsApi(endpoint, { method: "POST", body: formState.value }) : cmsApi(`${endpoint}/${id}`, { method: "PUT", body: formState.value }));
     snapshot.value = JSON.stringify(formState.value);
-    toast.add({ title: t("cms.toast.saved"), color: "success" });
+    toast.add({ title: "Saved", color: "success" });
     goBack();
   } catch (error) {
     toast.add({
-      title: t("cms.toast.saveFailed"),
+      title: "Save failed",
       description: errorMessage(error),
       color: "error"
     });