@xleddyl/nuxt-cms 0.9.3 → 0.10.0

package/dist/runtime/app/composables/cms-record-list.js

@@ -0,0 +1,75 @@
+import { toast, useConfirm } from "@xleddyl/443-components-vue";
+import { computed, ref, useState } from "#imports";
+import { cmsApi } from "../utils/api.js";
+import { errorMessage } from "../utils/ui.js";
+export function useCmsRecordList(options) {
+  const confirm = useConfirm();
+  const items = useState(`cms-list-${options.key}`, () => []);
+  const loaded = useState(`cms-list-${options.key}-loaded`, () => false);
+  const loading = ref(false);
+  let pending = null;
+  const sorted = computed(
+    () => options.compare ? [...items.value].sort(options.compare) : items.value
+  );
+  function load() {
+    pending ??= (async () => {
+      loading.value = true;
+      try {
+        items.value = await cmsApi(options.url);
+        loaded.value = true;
+      } catch (error) {
+        toast.error(options.loadError, { description: errorMessage(error) });
+      } finally {
+        loading.value = false;
+        pending = null;
+      }
+    })();
+    return pending;
+  }
+  async function ensureLoaded() {
+    if (!loaded.value) await load();
+  }
+  function find(id) {
+    return id == null ? void 0 : items.value.find((item) => item.id === id);
+  }
+  function upsert(record) {
+    const exists = items.value.some((item) => item.id === record.id);
+    items.value = exists ? items.value.map((item) => item.id === record.id ? record : item) : [...items.value, record];
+  }
+  function removeLocal(id) {
+    items.value = items.value.filter((item) => item.id !== id);
+  }
+  async function resolveLabel(id) {
+    await ensureLoaded();
+    const record = find(id);
+    return record ? options.label(record) : void 0;
+  }
+  async function remove(record) {
+    const question = options.confirmDelete?.(record);
+    if (question && !await confirm.delete(question.title, { description: question.description }))
+      return false;
+    try {
+      await cmsApi(`${options.url}/${encodeURIComponent(record.id)}`, { method: "DELETE" });
+      removeLocal(record.id);
+      if (options.deleted) toast.success(options.deleted);
+      return true;
+    } catch (error) {
+      toast.error(options.deleteError ?? "Not deleted", { description: errorMessage(error) });
+      return false;
+    }
+  }
+  return {
+    items,
+    sorted,
+    loaded,
+    loading,
+    load,
+    ensureLoaded,
+    find,
+    upsert,
+    removeLocal,
+    resolveLabel,
+    remove,
+    label: options.label
+  };
+}

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

@@ -0,0 +1,6 @@
+export declare const CMS_NEW_RECORD = "new";
+export declare const CMS_MEDIA_ROUTE_KEY = "media";
+export declare function provideCmsRouteLocation(): void;
+export declare function useCmsRouteFlag(key: string, value?: string): import("vue").WritableComputedRef<boolean, boolean>;
+export declare function useCmsOverlayFlag(key: string, routed: boolean, value?: string): import("vue").WritableComputedRef<boolean, boolean>;
+export declare function useCmsPageQuery(key: string): import("vue").WritableComputedRef<string, string>;

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

@@ -0,0 +1,36 @@
+import { ROUTE_LOCATION_KEY, useRouteState } from "@xleddyl/443-components-vue";
+import { computed, provide, ref } from "#imports";
+export const CMS_NEW_RECORD = "new";
+export const CMS_MEDIA_ROUTE_KEY = "media";
+export function provideCmsRouteLocation() {
+  provide(ROUTE_LOCATION_KEY, "hash");
+}
+export function useCmsRouteFlag(key, value = "open") {
+  const param = useRouteState(key, { location: "hash" });
+  return computed({
+    get: () => param.value === value,
+    set: (open) => {
+      param.value = open ? value : void 0;
+    }
+  });
+}
+export function useCmsOverlayFlag(key, routed, value = "open") {
+  const local = ref(false);
+  const flag = useCmsRouteFlag(key, value);
+  return computed({
+    get: () => routed ? flag.value : local.value,
+    set: (open) => {
+      if (routed) flag.value = open;
+      else local.value = open;
+    }
+  });
+}
+export function useCmsPageQuery(key) {
+  const param = useRouteState(key, { location: "query", history: "replace" });
+  return computed({
+    get: () => param.value ?? "",
+    set: (value) => {
+      param.value = value.trim() ? value : void 0;
+    }
+  });
+}

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

@@ -5,4 +5,5 @@ export declare function useCmsRuntime(): {
     mediaMaxFileSize: number;
     i18n: CmsI18n;
     previewPath?: string;
+    version?: string;
 };

package/dist/runtime/app/composables/cms-save-handoff.d.ts

@@ -0,0 +1,4 @@
+export declare function useCmsSaveHandoff(entry: string): {
+    stash(id: string, state: Record<string, unknown>): void;
+    take(id: string): Record<string, unknown> | null;
+};

package/dist/runtime/app/composables/cms-save-handoff.js

@@ -0,0 +1,19 @@
+import { useState } from "#imports";
+export function useCmsSaveHandoff(entry) {
+  const pending = useState("cms:save-handoff", () => ({}));
+  const keyOf = (id) => `${entry}/${id}`;
+  return {
+    stash(id, state) {
+      pending.value = { ...pending.value, [keyOf(id)]: state };
+    },
+    take(id) {
+      const key = keyOf(id);
+      const state = pending.value[key] ?? null;
+      if (state) {
+        const { [key]: _taken, ...rest } = pending.value;
+        pending.value = rest;
+      }
+      return state;
+    }
+  };
+}

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

@@ -0,0 +1,12 @@
+import type { ComputedRef, MaybeRefOrGetter, Ref } from 'vue';
+import type { CmsSeoMeta, CmsSeoOverrides, CmsSeoSource, CmsSite } from '../../shared/index.js';
+export type CmsSeoOptions = {
+    [K in keyof CmsSeoOverrides]?: MaybeRefOrGetter<CmsSeoOverrides[K]>;
+} & {
+    locale?: string;
+};
+export interface CmsSeoResult {
+    site: Ref<CmsSite | null>;
+    meta: ComputedRef<CmsSeoMeta>;
+}
+export declare function useCmsSeo(item?: MaybeRefOrGetter<CmsSeoSource | null | undefined>, options?: CmsSeoOptions): CmsSeoResult;

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

@@ -0,0 +1,69 @@
+import {
+  computed,
+  toValue,
+  useCmsSite,
+  useHead,
+  useRequestURL,
+  useRoute,
+  useRuntimeConfig,
+  useSeoMeta
+} from "#imports";
+import { isForwardedHostTrusted, normalizeSiteUrl, resolveSeoMeta } from "../../shared/index.js";
+export function useCmsSeo(item, options = {}) {
+  const { locale, ...overrides } = options;
+  const config = useRuntimeConfig().public;
+  const { i18n } = config.cms ?? {};
+  const trusted = isForwardedHostTrusted(
+    config.cmsTrustForwardedHost
+  );
+  const siteUrl = normalizeSiteUrl(config.siteUrl) || useRequestURL({ xForwardedHost: trusted, xForwardedProto: trusted }).origin;
+  const route = useRoute();
+  const { data: site } = useCmsSite({ locale });
+  const meta = computed(
+    () => resolveSeoMeta(
+      toValue(item),
+      site.value,
+      { siteUrl, path: route.path, defaultLocale: i18n?.defaultLocale ?? "en" },
+      Object.fromEntries(
+        Object.entries(overrides).map(([key, value]) => [key, toValue(value)])
+      )
+    )
+  );
+  const image = () => meta.value.image;
+  const article = () => meta.value.type === "article";
+  useHead({
+    title: () => meta.value.title,
+    titleTemplate: null,
+    link: () => [
+      { key: "cms-canonical", rel: "canonical", href: meta.value.canonical },
+      ...meta.value.alternates.map((alternate) => ({
+        key: `cms-alternate-${alternate.hreflang}`,
+        rel: "alternate",
+        hreflang: alternate.hreflang,
+        href: alternate.href
+      }))
+    ]
+  });
+  useSeoMeta({
+    description: () => meta.value.description ?? void 0,
+    robots: () => meta.value.robots ?? void 0,
+    ogTitle: () => meta.value.pageTitle ?? meta.value.title,
+    ogDescription: () => meta.value.description ?? void 0,
+    ogUrl: () => meta.value.canonical,
+    ogType: () => meta.value.type,
+    ogSiteName: () => meta.value.siteName ?? void 0,
+    ogImage: () => image()?.url,
+    ogImageAlt: () => image()?.alt ?? void 0,
+    ogImageWidth: () => image()?.width ?? void 0,
+    ogImageHeight: () => image()?.height ?? void 0,
+    ogImageType: () => image()?.type ?? void 0,
+    articlePublishedTime: () => article() ? meta.value.publishedTime ?? void 0 : void 0,
+    articleModifiedTime: () => article() ? meta.value.modifiedTime ?? void 0 : void 0,
+    twitterCard: () => image() ? "summary_large_image" : "summary",
+    twitterTitle: () => meta.value.pageTitle ?? meta.value.title,
+    twitterDescription: () => meta.value.description ?? void 0,
+    twitterImage: () => image()?.url,
+    twitterImageAlt: () => image()?.alt ?? void 0
+  });
+  return { site, meta };
+}

package/dist/runtime/app/composables/cms-settings-form.d.ts

@@ -0,0 +1,13 @@
+import type { MaybeRefOrGetter, Ref } from 'vue';
+export interface CmsSettingsFormAction {
+    id: string;
+    label: string;
+    submitting: boolean;
+}
+export declare function useCmsSettingsFormAction(): Ref<CmsSettingsFormAction | null, CmsSettingsFormAction | null>;
+export declare function useCmsSettingsForm(options: {
+    creating?: MaybeRefOrGetter<boolean>;
+    label?: MaybeRefOrGetter<string>;
+    submitting: Ref<boolean>;
+    enabled?: MaybeRefOrGetter<boolean>;
+}): string;

package/dist/runtime/app/composables/cms-settings-form.js

@@ -0,0 +1,29 @@
+import { onBeforeUnmount, onMounted, toValue, useId, useState, watch } from "#imports";
+export function useCmsSettingsFormAction() {
+  return useState("cms-settings-form-action", () => null);
+}
+export function useCmsSettingsForm(options) {
+  const id = useId();
+  const action = useCmsSettingsFormAction();
+  function label() {
+    if (options.label !== void 0) return toValue(options.label);
+    return toValue(options.creating) ? "Create" : "Save";
+  }
+  function sync() {
+    const enabled = toValue(options.enabled) ?? true;
+    if (enabled) {
+      action.value = { id, label: label(), submitting: options.submitting.value };
+    } else if (action.value?.id === id) {
+      action.value = null;
+    }
+  }
+  onMounted(() => {
+    watch(() => [label(), options.submitting.value, toValue(options.enabled)], sync, {
+      immediate: true
+    });
+  });
+  onBeforeUnmount(() => {
+    if (action.value?.id === id) action.value = null;
+  });
+  return id;
+}

package/dist/runtime/app/composables/cms-settings-sections.d.ts

@@ -0,0 +1,26 @@
+import type { SettingsModalPage, SettingsModalSection } from '@xleddyl/443-components-vue';
+import type { Component } from 'vue';
+export interface CmsSettingsSlot {
+    page?: SettingsModalPage;
+    pages: SettingsModalPage[];
+    openPage: (page: SettingsModalPage) => Promise<boolean>;
+    back: () => Promise<boolean>;
+    goTo: (depth: number) => Promise<boolean>;
+}
+type SlotBinding = (slot: CmsSettingsSlot) => Record<string, unknown>;
+export interface CmsSettingsSectionView extends SettingsModalSection {
+    component?: Component;
+    bind?: SlotBinding;
+    actions?: Component;
+    bindActions?: SlotBinding;
+    tabs?: Component;
+    resolvePage?: (id: string, parents: SettingsModalPage[]) => Promise<string | undefined>;
+}
+export declare function useCmsSettingsSections(): {
+    navigation: import("vue").ComputedRef<SettingsModalSection[]>;
+    views: import("vue").ComputedRef<CmsSettingsSectionView[]>;
+    actionViews: import("vue").ComputedRef<CmsSettingsSectionView[]>;
+    tabViews: import("vue").ComputedRef<CmsSettingsSectionView[]>;
+    resolvePage: (sectionId: string, id: string, parents: SettingsModalPage[]) => Promise<string | undefined> | undefined;
+};
+export {};

package/dist/runtime/app/composables/cms-settings-sections.js

@@ -0,0 +1,181 @@
+import { entryFieldsFor } from "#nuxt-cms";
+import { computed, nextTick } from "#imports";
+import cmsConfig from "#cms-config";
+import { CMS_PRESET_ICON } from "../../shared/presets.js";
+import CmsSettingsEntries from "../components/cms/SettingsEntries.vue";
+import CmsSettingsEntryActions from "../components/cms/SettingsEntryActions.vue";
+import CmsSettingsEntryTabs from "../components/cms/SettingsEntryTabs.vue";
+import CmsSettingsFormAction from "../components/cms/SettingsFormAction.vue";
+import CmsSettingsPresets from "../components/cms/SettingsPresets.vue";
+import CmsSettingsRecordActions from "../components/cms/SettingsRecordActions.vue";
+import CmsSettingsRedirectActions from "../components/cms/SettingsRedirectActions.vue";
+import CmsSettingsRedirects from "../components/cms/SettingsRedirects.vue";
+import CmsSettingsSite from "../components/cms/SettingsSite.vue";
+import CmsSettingsUsers from "../components/cms/SettingsUsers.vue";
+import { cmsIcon } from "../utils/ui.js";
+import { useCmsSettingsEntries } from "./cms-entry-settings.js";
+import { useCmsPermissions } from "./cms-permissions.js";
+import { CMS_NEW_RECORD } from "./cms-route.js";
+import { useCmsPresetStore, useCmsRedirects, useCmsUsers } from "./cms-settings-stores.js";
+const GROUPS = { account: "Account", access: "Access", site: "Site", content: "Content" };
+function pageBinding({ page, openPage, back }) {
+  return { page, onOpen: openPage, onBack: back };
+}
+function hasBlockFields() {
+  return Object.values(cmsConfig).some(
+    (entry) => Object.values(entryFieldsFor(entry)).some((field) => field.type === "blocks")
+  );
+}
+export function useCmsSettingsSections() {
+  const { can } = useCmsPermissions();
+  const users = useCmsUsers();
+  const redirects = useCmsRedirects();
+  const presets = useCmsPresetStore();
+  const entries = useCmsSettingsEntries();
+  const blocks = hasBlockFields();
+  function recordSection(section, component, store, options = {}) {
+    const creatable = options.creatable ?? true;
+    const newLabel = options.newLabel ?? "New";
+    return {
+      ...section,
+      component,
+      bind: pageBinding,
+      actions: options.actions ?? CmsSettingsRecordActions,
+      bindActions: ({ page, openPage, back }) => {
+        const record = store.find(page?.id);
+        return {
+          page,
+          addLabel: options.addLabel ?? "Add",
+          addIcon: options.addIcon,
+          newLabel,
+          hideAdd: !creatable || !(store.loaded.value && store.items.value.length),
+          deletable: !!record && (options.deletable?.(record) ?? true),
+          deleteDisabled: !!record && !!options.locked?.(record),
+          deleteHint: options.lockHint,
+          onOpen: openPage,
+          onDelete: async () => {
+            if (!record || !await store.remove(record)) return;
+            await nextTick();
+            void back();
+          }
+        };
+      },
+      resolvePage: async (id) => {
+        if (id === CMS_NEW_RECORD) return creatable ? newLabel : void 0;
+        return store.resolveLabel(id);
+      }
+    };
+  }
+  const sections = computed(() => [
+    {
+      id: "account",
+      label: "Account",
+      icon: cmsIcon("user-circle"),
+      description: "Your profile and your password.",
+      group: GROUPS.account
+    },
+    {
+      id: "appearance",
+      label: "Appearance",
+      icon: cmsIcon("swatch"),
+      description: "Choose how the panel looks. System follows your device.",
+      group: GROUPS.account
+    },
+    ...can("users.manage") ? [
+      recordSection(
+        {
+          id: "users",
+          label: "Users",
+          icon: cmsIcon("users"),
+          description: "Accounts that can sign in to the panel, and what their role allows.",
+          group: GROUPS.access
+        },
+        CmsSettingsUsers,
+        users,
+        {
+          addLabel: "Add user",
+          addIcon: "user-plus",
+          newLabel: "New user",
+          deletable: users.canManageUser,
+          locked: users.isSelf,
+          lockHint: "You cannot delete your own account"
+        }
+      )
+    ] : [],
+    ...can("settings.manage") ? [
+      {
+        id: "site",
+        label: "Site",
+        icon: cmsIcon("globe-alt"),
+        description: "Site name, search engines and sharing.",
+        group: GROUPS.site,
+        component: CmsSettingsSite,
+        actions: CmsSettingsFormAction
+      }
+    ] : [],
+    ...can("redirects.manage") ? [
+      recordSection(
+        {
+          id: "redirects",
+          label: "Redirects",
+          icon: cmsIcon("arrow-uturn-right"),
+          description: "Send visitors from old paths to new ones.",
+          group: GROUPS.site
+        },
+        CmsSettingsRedirects,
+        redirects,
+        {
+          addLabel: "Add redirect",
+          newLabel: "New redirect",
+          actions: CmsSettingsRedirectActions
+        }
+      )
+    ] : [],
+    ...entries.value.length ? [
+      {
+        id: "layout",
+        label: "Layout",
+        icon: cmsIcon("view-columns"),
+        description: "Table columns and form layout of each content type.",
+        group: GROUPS.content,
+        component: CmsSettingsEntries,
+        bind: pageBinding,
+        actions: CmsSettingsEntryActions,
+        bindActions: ({ page }) => ({ page }),
+        tabs: CmsSettingsEntryTabs,
+        resolvePage: async (id) => entries.value.find((entry) => entry.name === id)?.label
+      }
+    ] : [],
+    ...blocks && can("settings.manage") ? [
+      recordSection(
+        {
+          id: "presets",
+          label: "Block presets",
+          icon: cmsIcon(CMS_PRESET_ICON),
+          description: "Saved copies of blocks, inserted from the block picker.",
+          group: GROUPS.content
+        },
+        CmsSettingsPresets,
+        presets,
+        { creatable: false }
+      )
+    ] : []
+  ]);
+  const views = computed(() => sections.value.filter((section) => section.component));
+  const actionViews = computed(() => sections.value.filter((section) => section.actions));
+  const tabViews = computed(() => sections.value.filter((section) => section.tabs));
+  const navigation = computed(
+    () => sections.value.map(({ id, label, icon, description, group }) => ({
+      id,
+      label,
+      icon,
+      description,
+      group
+    }))
+  );
+  function resolvePage(sectionId, id, parents) {
+    const section = sections.value.find((item) => item.id === sectionId);
+    return section?.resolvePage ? section.resolvePage(id, parents) : void 0;
+  }
+  return { navigation, views, actionViews, tabViews, resolvePage };
+}

package/dist/runtime/app/composables/cms-settings-stores.d.ts

@@ -0,0 +1,52 @@
+import type { CmsAccount, CmsRedirect } from '#nuxt-cms';
+import type { CmsBlockPreset } from '../../shared/presets.js';
+export declare function useCmsUsers(): {
+    canManageUser: (account: CmsAccount) => boolean;
+    isSelf: (account: CmsAccount) => boolean;
+    items: import("vue").Ref<CmsAccount[], CmsAccount[]>;
+    sorted: import("vue").ComputedRef<CmsAccount[]>;
+    loaded: import("vue").Ref<boolean, boolean>;
+    loading: import("vue").Ref<boolean, boolean>;
+    load: () => Promise<void>;
+    ensureLoaded: () => Promise<void>;
+    find: (id: string | null | undefined) => CmsAccount | undefined;
+    upsert: (record: CmsAccount) => void;
+    removeLocal: (id: string) => void;
+    resolveLabel: (id: string) => Promise<string | undefined>;
+    remove: (record: CmsAccount) => Promise<boolean>;
+    label: (item: CmsAccount) => string;
+};
+export declare function useCmsRedirects(): {
+    importing: import("vue").Ref<boolean, boolean>;
+    exportCsv: () => void;
+    exportJson: () => void;
+    importFile: (file: File) => Promise<void>;
+    items: import("vue").Ref<CmsRedirect[], CmsRedirect[]>;
+    sorted: import("vue").ComputedRef<CmsRedirect[]>;
+    loaded: import("vue").Ref<boolean, boolean>;
+    loading: import("vue").Ref<boolean, boolean>;
+    load: () => Promise<void>;
+    ensureLoaded: () => Promise<void>;
+    find: (id: string | null | undefined) => CmsRedirect | undefined;
+    upsert: (record: CmsRedirect) => void;
+    removeLocal: (id: string) => void;
+    resolveLabel: (id: string) => Promise<string | undefined>;
+    remove: (record: CmsRedirect) => Promise<boolean>;
+    label: (item: CmsRedirect) => string;
+};
+export declare function presetMeta(preset: CmsBlockPreset): string;
+export declare function useCmsPresetStore(): {
+    remove: (preset: CmsBlockPreset) => Promise<boolean>;
+    saved: (preset: CmsBlockPreset) => void;
+    items: import("vue").Ref<CmsBlockPreset[], CmsBlockPreset[]>;
+    sorted: import("vue").ComputedRef<CmsBlockPreset[]>;
+    loaded: import("vue").Ref<boolean, boolean>;
+    loading: import("vue").Ref<boolean, boolean>;
+    load: () => Promise<void>;
+    ensureLoaded: () => Promise<void>;
+    find: (id: string | null | undefined) => CmsBlockPreset | undefined;
+    upsert: (record: CmsBlockPreset) => void;
+    removeLocal: (id: string) => void;
+    resolveLabel: (id: string) => Promise<string | undefined>;
+    label: (item: CmsBlockPreset) => string;
+};