@xleddyl/nuxt-cms 0.4.4 → 0.5.0

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

@@ -1,140 +1,211 @@
 <template>
-   <div class="cms-scope cms-canvas min-h-screen" :data-theme="theme">
-      <div class="cms-shell" :class="{ 'is-nav-open': navOpen }">
-         <aside class="cms-sidebar">
-            <div class="cms-sidebar-brand">
-               <CmsBrandMark />
-               <div class="cms-brand-text">
-                  <span class="cms-brand-name">{{ cmsBrand.title }}</span>
-                  <span v-if="cmsBrand.subtitle" class="cms-brand-meta">{{
-                     cmsBrand.subtitle
-                  }}</span>
-               </div>
-            </div>
+   <KRoot class="cms-scope cms-canvas" :theme="theme" preset="default">
+      <KDashboardLayout
+         v-model:open="navOpen"
+         class="cms-admin"
+         :navigation="navigation"
+         :theme-switch="false"
+         :collapsible="false"
+         :storage-key="false"
+         :shortcut="false"
+         :search="search"
+         :search-navigation="false"
+         :search-props="searchProps"
+         search-label="Search"
+      >
+         <template #brand>
+            <CmsBrandMark :subtitle="cmsBrand.subtitle || void 0" />
+         </template>
 
-            <CmsSearch @open="navOpen = false" />
+         <template #topbar-brand>
+            <CmsBrandMark size="sm" />
+         </template>
 
-            <nav class="cms-sidebar-nav">
-               <div v-for="group in groups" :key="group.title" class="cms-sidebar-group">
-                  <div class="cms-label">
-                     {{ group.title }}
-                  </div>
-                  <NuxtLink
-                     v-for="link in group.links"
-                     :key="link.name"
-                     :to="link.to"
-                     class="cms-navlink"
-                     :class="{ 'is-active': isActive(link.to) }"
-                  >
-                     <CmsIcon
-                        :name="link.icon ?? group.icon"
-                        class="cms-navlink-icon size-4 shrink-0"
-                     />
-                     <span class="truncate">{{ link.label }}</span>
-                  </NuxtLink>
-               </div>
-            </nav>
+         <template #search-item="{ item: { data: hit } }">
+            <template v-if="hit">
+               <KIcon :name="cmsIcon(iconOf(hit))" class="cms-search-option-icon" />
+               <span class="cms-search-option-text">
+                  <template v-if="isValueHit(hit)">
+                     <span class="cms-search-option-head">
+                        <span class="cms-search-option-title">{{
+                           hit.title ?? hit.entryLabel
+                        }}</span>
+                        <span v-if="hit.fieldLabel" class="cms-search-option-meta">
+                           {{ hit.fieldLabel }}
+                        </span>
+                        <KBadge v-if="hit.locale" size="sm" class="cms-code-badge">
+                           {{ hit.locale }}
+                        </KBadge>
+                     </span>
+                     <span class="cms-search-snippet">
+                        {{ hit.snippet.before
+                        }}<mark class="cms-search-mark">{{ hit.snippet.match }}</mark
+                        >{{ hit.snippet.after }}
+                     </span>
+                  </template>
+                  <template v-else>
+                     <span class="cms-search-option-title">
+                        {{ hit.snippet.before
+                        }}<mark class="cms-search-mark">{{ hit.snippet.match }}</mark
+                        >{{ hit.snippet.after }}
+                     </span>
+                     <span class="cms-search-option-meta">{{ labelMeta(hit) }}</span>
+                  </template>
+               </span>
+            </template>
+         </template>
 
-            <div class="cms-sidebar-footer">
-               <button
-                  type="button"
-                  class="cms-account"
-                  :class="{ 'is-open': settingsOpen }"
-                  aria-label="Open settings"
-                  @click="openSettings"
-               >
-                  <span class="cms-avatar">{{ initial }}</span>
-                  <span class="cms-account-text">
-                     <span class="cms-account-name">{{ displayName }}</span>
-                     <span class="cms-account-email" :title="email">{{ email }}</span>
-                  </span>
-                  <CmsIcon name="ellipsis-horizontal" class="cms-account-more size-4" />
-               </button>
-            </div>
-         </aside>
+         <template #account>
+            <KAccountMenu
+               :name="displayName"
+               :email="email"
+               :icon="cmsIcon('ellipsis-horizontal')"
+               :active="settingsOpen"
+               aria-haspopup="dialog"
+               aria-label="Open settings"
+               @click="openSettings"
+            />
+         </template>
 
-         <div class="cms-sidebar-scrim" @click="navOpen = false" />
+         <slot />
+      </KDashboardLayout>
 
-         <main class="cms-main">
-            <header class="cms-topbar">
-               <CmsButton
-                  icon="bars-3"
-                  variant="ghost"
-                  color="neutral"
-                  size="sm"
-                  aria-label="Open navigation"
-                  @click="navOpen = true"
-               />
-               <CmsBrandMark />
-               <span class="cms-brand-name">{{ cmsBrand.title }}</span>
-            </header>
-            <div class="cms-main-inner">
-               <slot />
-            </div>
-         </main>
-      </div>
-
-      <CmsSettingsModal v-model:open="settingsOpen" v-model:theme="theme" @logout="logout" />
+      <CmsSettingsModal v-model:open="settingsOpen" @logout="logout" />
       <CmsWelcomeModal />
-      <CmsToaster />
-      <CmsConfirmModal />
-   </div>
+      <KOverlayHost />
+   </KRoot>
 </template>
 
 <script setup>
+import {
+  AccountMenu as KAccountMenu,
+  Badge as KBadge,
+  DashboardLayout as KDashboardLayout,
+  Icon as KIcon,
+  OverlayHost as KOverlayHost,
+  Root as KRoot,
+  provideTheme
+} from "@xleddyl/443-components-vue";
 import { computed, navigateTo, ref, useRoute, useUserSession, watch } from "#imports";
 import cmsConfig from "#cms-config";
 import { cmsBrand } from "#cms-brand";
+import { CMS_SEARCH_MIN_LENGTH, normalizeSearchQuery } from "../../shared/search";
 import { useCmsTheme } from "../composables/cms-theme";
 import { useCmsAccount } from "../composables/cms-account";
 import { loadCmsSettings } from "../composables/cms-settings";
+import { cmsIcon } from "../utils/ui";
 const route = useRoute();
 const { clear } = useUserSession();
-const { email, displayName, initial } = useCmsAccount();
+const { email, displayName } = useCmsAccount();
 const theme = useCmsTheme();
+provideTheme(theme);
 const navOpen = ref(false);
 const settingsOpen = ref(false);
 await loadCmsSettings();
-const links = Object.entries(cmsConfig).map(([name, entry]) => ({
-  name,
-  label: entry.label,
-  kind: entry.kind,
-  icon: entry.icon,
-  to: `/cms/${name}`
+const GROUPS = [
+  { kind: "collection", title: "Collections", icon: "square-3-stack-3d" },
+  { kind: "single", title: "Singles", icon: "document-text" },
+  { kind: "content", title: "Content", icon: "newspaper" },
+  { kind: "page", title: "Pages", icon: "window" }
+];
+const entries = Object.entries(cmsConfig);
+const navigation = [
+  ...GROUPS.map((group) => ({
+    label: group.title,
+    items: entries.filter(([, entry]) => entry.kind === group.kind).map(([name, entry]) => ({
+      label: entry.label,
+      to: `/cms/${name}`,
+      icon: cmsIcon(entry.icon ?? group.icon)
+    }))
+  })),
+  {
+    label: "Library",
+    items: [{ label: "Media", to: "/cms/media", icon: cmsIcon("photo") }]
+  }
+].filter((section) => section.items.length);
+const SEARCH_DEBOUNCE_MS = 180;
+const KIND_LABELS = {
+  collection: "Collection",
+  single: "Single",
+  content: "Content",
+  page: "Pages",
+  media: "Library"
+};
+const KIND_ICONS = {
+  collection: "square-3-stack-3d",
+  single: "document-text",
+  content: "newspaper",
+  page: "window",
+  media: "photo"
+};
+const TYPE_LABELS = {
+  entry: "Section",
+  page: "Page",
+  tab: "Tab",
+  field: "Field",
+  block: "Block",
+  value: "Value",
+  media: "Media"
+};
+const TYPE_ICONS = {
+  page: "window",
+  tab: "rectangle-group",
+  field: "tag",
+  block: "squares-2x2",
+  value: "bars-3-bottom-left",
+  media: "photo"
+};
+const truncated = ref(false);
+const searchProps = computed(() => ({
+  label: "Search the CMS",
+  placeholder: "Search content, fields and pages",
+  debounce: SEARCH_DEBOUNCE_MS,
+  minQueryLength: CMS_SEARCH_MIN_LENGTH,
+  minQueryText: `Type at least ${CMS_SEARCH_MIN_LENGTH} characters to search.`,
+  errorText: "Search failed. Try again.",
+  loadingText: "Searching",
+  emptyText: (query) => `No results for "${normalizeSearchQuery(query)}".`,
+  resultsText: (count) => `${count} results`,
+  notice: truncated.value ? "Showing the first results. Type more to narrow them down." : void 0,
+  footerMove: "to move",
+  footerSelect: "to open",
+  footerClose: "to close"
 }));
-const groups = computed(
-  () => [
-    {
-      title: "Collections",
-      icon: "square-3-stack-3d",
-      links: links.filter((l) => l.kind === "collection")
-    },
-    {
-      title: "Singles",
-      icon: "document-text",
-      links: links.filter((l) => l.kind === "single")
-    },
-    {
-      title: "Content",
-      icon: "newspaper",
-      links: links.filter((l) => l.kind === "content")
-    },
-    {
-      title: "Pages",
-      icon: "window",
-      links: links.filter((l) => l.kind === "page")
-    },
-    {
-      title: "Library",
-      icon: "photo",
-      links: [
-        { name: "media", label: "Media", kind: "media", icon: void 0, to: "/cms/media" }
-      ]
+function isValueHit(hit) {
+  return hit.type === "value" || hit.type === "media";
+}
+function iconOf(hit) {
+  return hit.type === "entry" ? KIND_ICONS[hit.kind] : TYPE_ICONS[hit.type] ?? "tag";
+}
+function labelMeta(hit) {
+  const parts = [TYPE_LABELS[hit.type]];
+  if (hit.title) parts.push(hit.title);
+  if (hit.fieldLabel && hit.type !== "tab") parts.push(hit.fieldLabel);
+  if (hit.type === "page" && hit.id) parts.push(hit.to);
+  return parts.join(" \xB7 ");
+}
+async function search(term, signal) {
+  const response = await $fetch("/api/cms/search", {
+    query: { q: normalizeSearchQuery(term) },
+    signal
+  });
+  const groups = /* @__PURE__ */ new Map();
+  response.hits.forEach((hit, index) => {
+    const key = hit.collection ?? hit.kind;
+    let group = groups.get(key);
+    if (!group) {
+      group = { id: key, label: hit.entryLabel, description: KIND_LABELS[hit.kind], items: [] };
+      groups.set(key, group);
     }
-  ].filter((g) => g.links.length)
-);
-function isActive(to) {
-  return route.path === to || route.path.startsWith(`${to}/`);
+    group.items.push({
+      id: `hit-${index}`,
+      label: hit.title ?? hit.entryLabel,
+      to: hit.to,
+      data: hit
+    });
+  });
+  truncated.value = response.truncated;
+  return [...groups.values()];
 }
 watch(
   () => route.fullPath,

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

@@ -1,6 +1,6 @@
-declare var __VLS_41: {};
+declare var __VLS_46: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_41) => any;
+    default?: (props: typeof __VLS_46) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/app/layouts/cms-editor.d.vue.ts

@@ -1,6 +1,6 @@
-declare var __VLS_1: {};
+declare var __VLS_8: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_1) => any;
+    default?: (props: typeof __VLS_8) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -1,14 +1,19 @@
 <template>
-   <div class="cms-scope cms-canvas" :data-theme="theme">
+   <KRoot class="cms-scope cms-canvas" :theme="theme" preset="default">
       <slot />
-      <CmsToaster />
-      <CmsConfirmModal />
-   </div>
+      <KOverlayHost />
+   </KRoot>
 </template>
 
 <script setup>
+import {
+  OverlayHost as KOverlayHost,
+  Root as KRoot,
+  provideTheme
+} from "@xleddyl/443-components-vue";
 import { useCmsTheme } from "../composables/cms-theme";
 import { loadCmsSettings } from "../composables/cms-settings";
 const theme = useCmsTheme();
+provideTheme(theme);
 await loadCmsSettings();
 </script>

package/dist/runtime/app/layouts/cms-editor.vue.d.ts

@@ -1,6 +1,6 @@
-declare var __VLS_1: {};
+declare var __VLS_8: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_1) => any;
+    default?: (props: typeof __VLS_8) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;