@xleddyl/nuxt-cms 0.9.3 → 0.10.0

package/dist/runtime/app/image/CmsImage.vue.d.ts

@@ -0,0 +1,89 @@
+import type { PropType } from 'vue';
+import type { CmsImageMedia } from '../../shared/media-focal.js';
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    media: {
+        type: PropType<CmsImageMedia | null>;
+        default: null;
+    };
+    alt: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    width: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: undefined;
+    };
+    height: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: undefined;
+    };
+    loading: {
+        type: PropType<"lazy" | "eager">;
+        default: string;
+    };
+    decoding: {
+        type: PropType<"async" | "auto" | "sync">;
+        default: string;
+    };
+    picture: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    provider: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    modifiers: {
+        type: PropType<Record<string, unknown>>;
+        default: undefined;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    media: {
+        type: PropType<CmsImageMedia | null>;
+        default: null;
+    };
+    alt: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    width: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: undefined;
+    };
+    height: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: undefined;
+    };
+    loading: {
+        type: PropType<"lazy" | "eager">;
+        default: string;
+    };
+    decoding: {
+        type: PropType<"async" | "auto" | "sync">;
+        default: string;
+    };
+    picture: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    provider: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    modifiers: {
+        type: PropType<Record<string, unknown>>;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    media: CmsImageMedia | null;
+    alt: string;
+    width: string | number;
+    height: string | number;
+    picture: boolean;
+    loading: "lazy" | "eager";
+    decoding: "auto" | "async" | "sync";
+    provider: string;
+    modifiers: Record<string, unknown>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -1,6 +1,6 @@
-declare var __VLS_46: {};
+declare var __VLS_28: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_46) => any;
+    default?: (props: typeof __VLS_28) => 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-admin.vue

@@ -1,9 +1,20 @@
 <template>
-   <KRoot class="cms-scope cms-canvas" :theme="theme" preset="default">
+   <KRoot class="is-canvas" document :theme="theme" preset="default">
       <KDashboardLayout
          v-model:open="navOpen"
          class="cms-admin"
+         :content="content"
+         :loading="navigationPending"
          :navigation="navigation"
+         :account="account"
+         :settings-sections="settingsSections.navigation.value"
+         :settings-presets="false"
+         settings-title="Settings"
+         :settings-route="true"
+         settings-route-location="hash"
+         settings-account-section="account"
+         settings-hide-session
+         :settings-resolve-page="settingsSections.resolvePage"
          :theme-switch="false"
          :collapsible="false"
          :storage-key="false"
@@ -12,6 +23,7 @@
          :search-navigation="false"
          :search-props="searchProps"
          search-label="Search"
+         @sign-out="logout"
       >
          <template #brand>
             <CmsBrandMark :subtitle="cmsBrand.subtitle || void 0" />
@@ -21,55 +33,34 @@
             <CmsBrandMark size="sm" />
          </template>
 
-         <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>
+         <slot />
 
-         <template #account>
-            <KAccountMenu
-               :name="displayName"
-               :email="email"
-               :active="settingsOpen"
-               aria-haspopup="dialog"
-               aria-label="Open settings"
-               @click="openSettings"
-            />
+         <template #settings-nav-footer>
+            <CmsPoweredBy />
+         </template>
+         <template #settings-account-fields>
+            <CmsSettingsAccount />
+         </template>
+         <template
+            v-for="section in settingsSections.views.value"
+            #[`settings-section-${section.id}`]="slot"
+         >
+            <component :is="section.component" v-bind="section.bind?.(slot)" />
+         </template>
+         <template
+            v-for="section in settingsSections.actionViews.value"
+            #[`settings-actions-${section.id}`]="slot"
+         >
+            <component :is="section.actions" v-bind="section.bindActions?.(slot)" />
+         </template>
+         <template
+            v-for="section in settingsSections.tabViews.value"
+            #[`settings-tabs-${section.id}`]="slot"
+         >
+            <component :is="section.tabs" :page="slot.page" />
          </template>
-
-         <slot />
       </KDashboardLayout>
 
-      <CmsSettingsModal v-model:open="settingsOpen" @logout="logout" />
       <CmsWelcomeModal />
       <KOverlayHost />
    </KRoot>
@@ -77,28 +68,40 @@
 
 <script setup>
 import {
-  AccountMenu as KAccountMenu,
-  Badge as KBadge,
   DashboardLayout as KDashboardLayout,
-  Icon as KIcon,
   OverlayHost as KOverlayHost,
   Root as KRoot,
+  provideFormConfig,
   provideTheme
 } from "@xleddyl/443-components-vue";
+import { useNavigationPending } from "@xleddyl/443-components-vue/nuxt/composables";
 import { computed, navigateTo, ref, useRoute, 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 { useCmsPermissions } from "../composables/cms-permissions";
+import { provideCmsRouteLocation } from "../composables/cms-route";
 import { loadCmsSettings } from "../composables/cms-settings";
-import { cmsIcon } from "../utils/ui";
+import { useCmsSettingsSections } from "../composables/cms-settings-sections";
+import { cmsIcon, cmsSubmitError } from "../utils/ui";
 const route = useRoute();
 const { email, displayName } = useCmsAccount();
+const { can, role, roleLabel } = useCmsPermissions();
 const theme = useCmsTheme();
 provideTheme(theme);
+provideCmsRouteLocation();
+provideFormConfig({ submitError: cmsSubmitError });
 const navOpen = ref(false);
-const settingsOpen = ref(false);
+const navigationPending = useNavigationPending();
+const settingsSections = useCmsSettingsSections();
+const content = computed(() => route.meta.content ?? "fill");
+const account = computed(() => ({
+  name: displayName.value,
+  email: email.value,
+  role: roleLabel(role.value)
+}));
 await loadCmsSettings();
 const GROUPS = [
   { kind: "collection", title: "Collections", icon: "square-3-stack-3d" },
@@ -107,20 +110,22 @@ const GROUPS = [
   { 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 navigation = computed(
+  () => [
+    ...GROUPS.map((group) => ({
+      label: group.title,
+      items: entries.filter(([name, entry]) => entry.kind === group.kind && can(`${name}.read`)).map(([name, entry]) => ({
+        label: entry.label,
+        to: `/cms/${name}`,
+        icon: cmsIcon(entry.icon ?? group.icon)
+      }))
+    })),
+    {
+      label: "Library",
+      items: can("media.read") ? [{ label: "Media", to: "/cms/media", icon: cmsIcon("photo") }] : []
+    }
+  ].filter((section) => section.items.length)
+);
 const SEARCH_DEBOUNCE_MS = 180;
 const KIND_LABELS = {
   collection: "Collection",
@@ -172,6 +177,33 @@ const searchProps = computed(() => ({
 function isValueHit(hit) {
   return hit.type === "value" || hit.type === "media";
 }
+function snippetText(hit) {
+  const { before, match, after } = hit.snippet;
+  return {
+    text: `${before}${match}${after}`,
+    ranges: [[before.length, before.length + match.length]]
+  };
+}
+function hitItem(hit, index) {
+  const snippet = snippetText(hit);
+  const base = { id: `hit-${index}`, icon: cmsIcon(iconOf(hit)), to: hit.to, data: hit };
+  if (!isValueHit(hit)) {
+    return {
+      ...base,
+      label: snippet.text,
+      description: labelMeta(hit),
+      highlight: { label: snippet.ranges }
+    };
+  }
+  return {
+    ...base,
+    label: hit.title ?? hit.entryLabel,
+    meta: hit.fieldLabel ?? void 0,
+    description: snippet.text,
+    badge: hit.locale ? hit.locale.toUpperCase() : void 0,
+    highlight: { description: snippet.ranges }
+  };
+}
 function iconOf(hit) {
   return hit.type === "entry" ? KIND_ICONS[hit.kind] : TYPE_ICONS[hit.type] ?? "tag";
 }
@@ -195,12 +227,7 @@ async function search(term, signal) {
       group = { id: key, label: hit.entryLabel, description: KIND_LABELS[hit.kind], items: [] };
       groups.set(key, group);
     }
-    group.items.push({
-      id: `hit-${index}`,
-      label: hit.title ?? hit.entryLabel,
-      to: hit.to,
-      data: hit
-    });
+    group.items.push(hitItem(hit, index));
   });
   truncated.value = response.truncated;
   return [...groups.values()];
@@ -211,12 +238,7 @@ watch(
     navOpen.value = false;
   }
 );
-function openSettings() {
-  navOpen.value = false;
-  settingsOpen.value = true;
-}
 async function logout() {
-  settingsOpen.value = false;
   await navigateTo("/cms/logout");
 }
 </script>

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

@@ -1,6 +1,6 @@
-declare var __VLS_46: {};
+declare var __VLS_28: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_46) => any;
+    default?: (props: typeof __VLS_28) => 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,5 +1,5 @@
 <template>
-   <KRoot class="cms-scope cms-canvas" :theme="theme" preset="default">
+   <KRoot class="is-canvas" document :theme="theme" preset="default">
       <slot />
       <KOverlayHost />
    </KRoot>
@@ -9,12 +9,17 @@
 import {
   OverlayHost as KOverlayHost,
   Root as KRoot,
+  provideFormConfig,
   provideTheme
 } from "@xleddyl/443-components-vue";
-import { useCmsTheme } from "../composables/cms-theme";
+import { provideCmsRouteLocation } from "../composables/cms-route";
 import { loadCmsSettings } from "../composables/cms-settings";
+import { useCmsTheme } from "../composables/cms-theme";
+import { cmsSubmitError } from "../utils/ui";
 const theme = useCmsTheme();
 provideTheme(theme);
+provideCmsRouteLocation();
+provideFormConfig({ submitError: cmsSubmitError });
 await loadCmsSettings();
 </script>
 

package/dist/runtime/app/links/CmsLink.d.vue.ts

@@ -0,0 +1,18 @@
+import type { CmsLink as CmsLinkData } from '../../shared/index.js';
+type __VLS_Props = {
+    link?: CmsLinkData | null;
+};
+type __VLS_Slots = {
+    default?: (props: {
+        link: CmsLinkData;
+    }) => unknown;
+};
+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/links/CmsLink.vue

@@ -0,0 +1,18 @@
+<template>
+   <NuxtLink
+      v-if="link?.href"
+      :to="link.href"
+      :external="link.external || void 0"
+      :target="link.newTab ? '_blank' : void 0"
+      :rel="link.newTab ? 'noopener noreferrer' : void 0"
+   >
+      <slot :link="link">{{ link.label ?? link.href }}</slot>
+   </NuxtLink>
+</template>
+
+<script setup>
+defineProps({
+  link: { type: [Object, null], required: false }
+});
+defineSlots();
+</script>

package/dist/runtime/app/links/CmsLink.vue.d.ts

@@ -0,0 +1,18 @@
+import type { CmsLink as CmsLinkData } from '../../shared/index.js';
+type __VLS_Props = {
+    link?: CmsLinkData | null;
+};
+type __VLS_Slots = {
+    default?: (props: {
+        link: CmsLinkData;
+    }) => unknown;
+};
+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/middleware/cms-auth.js

@@ -1,7 +1,19 @@
 import { defineNuxtRouteMiddleware, navigateTo, useUserSession } from "#imports";
-export default defineNuxtRouteMiddleware(() => {
+import { useCmsPermissions } from "../composables/cms-permissions.js";
+function requiredPermission(name, entry, id) {
+  if (name === "cms-admin-media") return "media.read";
+  if (!entry) return null;
+  return id === null && String(name ?? "").endsWith("-new") ? `${entry}.create` : `${entry}.read`;
+}
+export default defineNuxtRouteMiddleware((to) => {
   const { loggedIn } = useUserSession();
   if (!loggedIn.value) {
     return navigateTo("/cms/login");
   }
+  const entry = typeof to.meta.cmsEntry === "string" ? to.meta.cmsEntry : typeof to.params.collection === "string" ? to.params.collection : null;
+  const id = typeof to.params.id === "string" ? to.params.id : null;
+  const permission = requiredPermission(to.name, entry, id);
+  if (!permission || useCmsPermissions().can(permission)) return;
+  if (permission.endsWith(".create") && entry) return navigateTo(`/cms/${entry}`);
+  return navigateTo("/cms");
 });