@xleddyl/nuxt-cms 0.9.4 → 0.10.1

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

@@ -0,0 +1,156 @@
+import {
+  REDIRECT_IMPORT_MAX_ROWS,
+  entryFieldsFor,
+  normalizeRedirectPath,
+  redirectRowsFromTable,
+  redirectsToTable
+} from "#nuxt-cms";
+import { toast, useConfirm } from "@xleddyl/443-components-vue";
+import { ref, useState } from "#imports";
+import cmsConfig from "#cms-config";
+import { presetBlockCount } from "../../shared/presets.js";
+import { encodeCsv, parseCsv } from "../../shared/transfer.js";
+import { cmsApi } from "../utils/api.js";
+import { errorMessage } from "../utils/ui.js";
+import { useCmsAccount } from "./cms-account.js";
+import { useCmsPermissions } from "./cms-permissions.js";
+import { useCmsRecordList } from "./cms-record-list.js";
+export function useCmsUsers() {
+  const { user } = useCmsAccount();
+  const { canManage } = useCmsPermissions();
+  const list = useCmsRecordList({
+    key: "users",
+    url: "/api/cms/users",
+    label: (account) => account.name || account.email,
+    loadError: "Could not load users",
+    confirmDelete: (account) => ({
+      title: `Delete ${account.email}?`,
+      description: "They lose access to the panel."
+    }),
+    deleted: "User deleted",
+    deleteError: "User not deleted"
+  });
+  function canManageUser(account) {
+    return canManage(account.role);
+  }
+  function isSelf(account) {
+    return account.id === user.value?.id;
+  }
+  return { ...list, canManageUser, isSelf };
+}
+export function useCmsRedirects() {
+  const confirm = useConfirm();
+  const importing = ref(false);
+  const list = useCmsRecordList({
+    key: "redirects",
+    url: "/api/cms/redirects",
+    label: (redirect) => redirect.from,
+    compare: (a, b) => a.from.localeCompare(b.from),
+    loadError: "Could not load redirects",
+    confirmDelete: (redirect) => ({
+      title: "Delete this redirect?",
+      description: `Visitors of ${redirect.from} are not sent to ${redirect.to} anymore.`
+    }),
+    deleted: "Redirect deleted",
+    deleteError: "Redirect not deleted"
+  });
+  function download(content, type, extension) {
+    const url = URL.createObjectURL(new Blob([content], { type }));
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = `redirects.${extension}`;
+    link.click();
+    URL.revokeObjectURL(url);
+  }
+  function exportCsv() {
+    download(encodeCsv(redirectsToTable(list.items.value)), "text/csv", "csv");
+  }
+  function exportJson() {
+    const rows = list.items.value.map(({ from, to, status, keepQuery }) => ({
+      from,
+      to,
+      status,
+      keepQuery
+    }));
+    download(`${JSON.stringify(rows, null, 2)}
+`, "application/json", "json");
+  }
+  function parseImport(name, text) {
+    if (name.toLowerCase().endsWith(".json") || text.trim().startsWith("[")) {
+      const rows = JSON.parse(text);
+      if (!Array.isArray(rows)) throw new Error("The JSON file must hold an array of redirects");
+      return rows;
+    }
+    return redirectRowsFromTable(parseCsv(text));
+  }
+  async function importFile(file) {
+    importing.value = true;
+    try {
+      const rows = parseImport(file.name, await file.text());
+      if (!rows.length) throw new Error("The file holds no redirects");
+      if (rows.length > REDIRECT_IMPORT_MAX_ROWS)
+        throw new Error(`Import at most ${REDIRECT_IMPORT_MAX_ROWS} redirects at a time`);
+      const updates = rows.filter(
+        (row) => list.items.value.some(
+          (redirect) => redirect.from === normalizeRedirectPath(String(row.from ?? ""))
+        )
+      ).length;
+      const confirmed = await confirm({
+        title: `Import ${rows.length} redirects?`,
+        description: updates ? `${updates} replace a redirect with the same From.` : "They are added to the list.",
+        confirmLabel: "Import"
+      });
+      if (!confirmed) return;
+      const result = await cmsApi(
+        "/api/cms/redirects/import",
+        { method: "POST", body: { redirects: rows } }
+      );
+      await list.load();
+      toast.success("Redirects imported", {
+        description: `${result.created} added, ${result.updated} updated.`
+      });
+    } catch (error) {
+      toast.error("Import failed", { description: errorMessage(error) });
+    } finally {
+      importing.value = false;
+    }
+  }
+  return { ...list, importing, exportCsv, exportJson, importFile };
+}
+function presetSourceLabel(source) {
+  const [entryName = "", fieldKey = ""] = source.split(".");
+  const entry = Object.hasOwn(cmsConfig, entryName) ? cmsConfig[entryName] : void 0;
+  if (!entry) return source;
+  const field = entryFieldsFor(entry)[fieldKey];
+  return field ? `${entry.label}, ${field.label}` : entry.label;
+}
+export function presetMeta(preset) {
+  return `${presetBlockCount(preset.items.length)} \xB7 Saved from ${presetSourceLabel(
+    preset.source
+  )}`;
+}
+export function useCmsPresetStore() {
+  const fieldCache = useState("cms-presets", () => ({}));
+  const list = useCmsRecordList({
+    key: "presets",
+    url: "/api/cms/presets",
+    label: (preset) => preset.name,
+    loadError: "Could not load presets",
+    confirmDelete: (preset) => ({
+      title: `Delete the preset "${preset.name}"?`,
+      description: "Blocks already inserted from it stay as they are."
+    }),
+    deleted: "Preset deleted",
+    deleteError: "Preset not deleted"
+  });
+  async function remove(preset) {
+    const removed = await list.remove(preset);
+    if (removed) fieldCache.value = {};
+    return removed;
+  }
+  function saved(preset) {
+    list.upsert(preset);
+    fieldCache.value = {};
+  }
+  return { ...list, remove, saved };
+}

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

@@ -1,4 +1,4 @@
-import type { CmsEntrySettings, CmsFormLayout, CmsSettingsMap } from '#nuxt-cms';
+import type { CmsEntrySettings, CmsFormLayout, CmsI18n, CmsSettingsMap } from '#nuxt-cms';
 export declare function useCmsSettingsState(): import("vue").Ref<CmsSettingsMap, CmsSettingsMap>;
 export declare function loadCmsSettings(): Promise<void>;
 export declare function useCmsSettings(): {
@@ -8,5 +8,5 @@ export declare function useCmsSettings(): {
 };
 export declare function entryFields(name: string): Record<string, import("#nuxt-cms").FieldConfig>;
 export declare function entryFormLayout(name: string, settings: CmsSettingsMap, fields?: Record<string, import("#nuxt-cms").FieldConfig>): CmsFormLayout;
-export declare function listExtraColumns(name: string): string[];
-export declare function entryListColumns(name: string, settings: CmsSettingsMap): string[];
+export declare function listExtraColumns(name: string, i18n?: CmsI18n): string[];
+export declare function entryListColumns(name: string, settings: CmsSettingsMap, i18n?: CmsI18n): string[];

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

@@ -7,6 +7,7 @@ import {
 } from "#nuxt-cms";
 import { useFetch, useState } from "#imports";
 import cmsConfig from "#cms-config";
+import { TRANSLATIONS_COLUMN, hasTranslationsColumn } from "../../shared/translations.js";
 import { cmsApi } from "../utils/api.js";
 const SETTINGS_ENDPOINT = "/api/cms/admin/settings";
 export function useCmsSettingsState() {
@@ -49,17 +50,22 @@ export function entryFormLayout(name, settings, fields = entryFields(name)) {
   const saved = settings[name]?.layout;
   return saved ? resolveFormLayout(fields, saved) : defaultFormLayout(name, fields);
 }
-export function listExtraColumns(name) {
+export function listExtraColumns(name, i18n) {
   const entry = entryOf(name);
-  return entry && isCollectionKind(entry) && entry.drafts ? ["status"] : [];
+  if (!entry || !isCollectionKind(entry)) return [];
+  return [
+    ...entry.drafts ? ["status"] : [],
+    ...i18n && hasTranslationsColumn(entry, i18n) ? [TRANSLATIONS_COLUMN] : []
+  ];
 }
-export function entryListColumns(name, settings) {
+export function entryListColumns(name, settings, i18n) {
   const entry = entryOf(name);
   if (!entry) return [];
-  return resolveListColumns(
-    entry.fields,
-    settings[name]?.columns,
-    entry.list,
-    listExtraColumns(name)
+  const extra = listExtraColumns(name, i18n);
+  const saved = settings[name]?.columns;
+  const columns = resolveListColumns(entry.fields, saved, entry.list, extra);
+  const customized = !!saved?.some(
+    (key) => Object.hasOwn(entry.fields, key) || extra.includes(key)
   );
+  return customized || !extra.includes(TRANSLATIONS_COLUMN) || columns.includes(TRANSLATIONS_COLUMN) ? columns : [...columns, TRANSLATIONS_COLUMN];
 }

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

@@ -0,0 +1,7 @@
+import type { AsyncData } from 'nuxt/app';
+import type { CmsSite } from '../../shared/index.js';
+import type { CmsAsyncDataOptions } from './cms-query-disabled.js';
+export interface CmsSiteOptions<DefaultT> extends CmsAsyncDataOptions<CmsSite | null, DefaultT> {
+    locale?: string;
+}
+export declare function useCmsSite<DefaultT = null>(options?: CmsSiteOptions<DefaultT>): AsyncData<CmsSite | DefaultT | null, Error | undefined>;

package/dist/runtime/app/composables/cms-site-disabled.js

@@ -0,0 +1,8 @@
+import { useAsyncData } from "#imports";
+export function useCmsSite(options = {}) {
+  const { locale, key, default: fallback } = options;
+  return useAsyncData(
+    key ?? `cms-site:${locale ?? ""}`,
+    async () => fallback ? fallback() : null
+  );
+}

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

@@ -0,0 +1,7 @@
+import type { AsyncData } from 'nuxt/app';
+import type { CmsSite } from '../../shared/index.js';
+import type { CmsAsyncDataOptions } from './cms-query.js';
+export interface CmsSiteOptions<DefaultT> extends CmsAsyncDataOptions<CmsSite | null, DefaultT> {
+    locale?: string;
+}
+export declare function useCmsSite<DefaultT = null>(options?: CmsSiteOptions<DefaultT>): AsyncData<CmsSite | DefaultT | null, Error | undefined>;

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

@@ -0,0 +1,22 @@
+import { useAsyncData } from "#imports";
+import { $cmsQuery } from "./cms-query.js";
+const SITE_QUERY = `query ($locale: String) {
+   cmsSite(locale: $locale) {
+      name titleTemplate description hidden
+      image { key url type alt mime width height }
+   }
+}`;
+export function useCmsSite(options = {}) {
+  const { locale, key, default: fallback, ...asyncDataOptions } = options;
+  return useAsyncData(
+    key ?? `cms-site:${locale ?? ""}`,
+    async () => {
+      const result = await $cmsQuery(SITE_QUERY, { locale });
+      return result?.cmsSite ?? null;
+    },
+    {
+      default: fallback ?? (() => null),
+      ...asyncDataOptions
+    }
+  );
+}

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

@@ -1,12 +1,6 @@
-export interface CmsToast {
-    id: number;
+export interface CmsNotice {
     title: string;
     description?: string;
     color?: 'success' | 'error';
 }
-export declare function useCmsToast(): {
-    add: (input: Omit<CmsToast, "id">) => {
-        id: import("@xleddyl/443-components-vue").ToastId;
-    };
-    remove: (id: string | number) => void;
-};
+export declare function showCmsNotice(notice: CmsNotice): import("@xleddyl/443-components-vue").ToastId;

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

@@ -1,11 +1,5 @@
 import { toast } from "@xleddyl/443-components-vue";
-export function useCmsToast() {
-  function add(input) {
-    const show = input.color === "error" ? toast.error : input.color === "success" ? toast.success : toast;
-    return { id: show(input.title, { description: input.description }) };
-  }
-  function remove(id) {
-    toast.dismiss(id);
-  }
-  return { add, remove };
+export function showCmsNotice(notice) {
+  const show = notice.color === "error" ? toast.error : notice.color === "success" ? toast.success : toast;
+  return show(notice.title, { description: notice.description });
 }

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

@@ -0,0 +1,15 @@
+import type { FieldConfig } from '#nuxt-cms';
+import type { MenuEntry } from '@xleddyl/443-components-vue';
+import type { MaybeRefOrGetter, Ref } from 'vue';
+type Values = Record<string, unknown>;
+export interface CmsTranslationActionsOptions {
+    fields: MaybeRefOrGetter<Record<string, FieldConfig>>;
+    state: Ref<Values>;
+    locale?: MaybeRefOrGetter<string | null | undefined>;
+    disabled?: MaybeRefOrGetter<boolean | null | undefined>;
+    apply?: (values: Values) => void;
+}
+export declare function useCmsTranslationActions(options: CmsTranslationActionsOptions): {
+    items: import("vue").ComputedRef<MenuEntry[]>;
+};
+export {};

package/dist/runtime/app/composables/cms-translation-actions.js

@@ -0,0 +1,108 @@
+import { toast } from "@xleddyl/443-components-vue";
+import { computed, toValue } from "#imports";
+import {
+  clearTranslations,
+  copyTranslations,
+  hasTranslatableContent
+} from "../../shared/translations.js";
+import { cmsIcon } from "../utils/ui.js";
+import { useCmsConfirm } from "./cms-confirm.js";
+import { useCmsRuntime } from "./cms-runtime.js";
+function code(locale) {
+  return locale.toUpperCase();
+}
+function valuesLabel(count) {
+  return `${count} ${count === 1 ? "value" : "values"}`;
+}
+export function useCmsTranslationActions(options) {
+  const { i18n } = useCmsRuntime();
+  const confirmAction = useCmsConfirm();
+  function commit(values) {
+    if (options.apply) options.apply(values);
+    else options.state.value = values;
+  }
+  function copy(from, to, overwrite) {
+    const result = copyTranslations(toValue(options.fields), options.state.value, i18n, {
+      from,
+      to,
+      overwrite
+    });
+    if (!result.count) return;
+    commit(result.values);
+    toast.success(`Copied ${valuesLabel(result.count)} from ${code(from)} to ${code(to)}`);
+  }
+  async function replace(from, to) {
+    const confirmed = await confirmAction({
+      title: `Replace ${code(to)} with ${code(from)}?`,
+      description: `Every ${code(to)} value that has a ${code(
+        from
+      )} version is overwritten. The change stays unsaved until you save.`,
+      confirmLabel: "Replace"
+    });
+    if (confirmed) copy(from, to, true);
+  }
+  async function clear(locale) {
+    const confirmed = await confirmAction({
+      title: `Clear ${code(locale)}?`,
+      description: `The ${code(locale)} values are removed and the site shows the ${code(
+        i18n.defaultLocale
+      )} text instead. The change stays unsaved until you save.`,
+      confirmLabel: "Clear"
+    });
+    if (!confirmed) return;
+    const result = clearTranslations(toValue(options.fields), options.state.value, i18n, locale);
+    commit(result.values);
+    toast.success(`Cleared ${valuesLabel(result.count)} in ${code(locale)}`);
+  }
+  function copyItem(fields, from, to) {
+    const values = options.state.value;
+    const empty = copyTranslations(fields, values, i18n, { from, to }).count;
+    const all = copyTranslations(fields, values, i18n, { from, to, overwrite: true }).count;
+    return {
+      label: `Copy ${code(from)} into ${code(to)}`,
+      icon: cmsIcon("language"),
+      disabled: !all,
+      disabledReason: `Nothing in ${code(from)} to copy`,
+      children: [
+        {
+          label: "Fill empty values",
+          description: empty ? `${valuesLabel(empty)}, keeps what ${code(to)} has` : `No empty ${code(to)} values`,
+          disabled: !empty,
+          onSelect: () => copy(from, to, false)
+        },
+        {
+          label: "Replace all values\u2026",
+          description: `${valuesLabel(all)}, overwrites ${code(to)}`,
+          onSelect: () => void replace(from, to)
+        }
+      ]
+    };
+  }
+  function clearItem(fields, locale) {
+    const count = clearTranslations(fields, options.state.value, i18n, locale).count;
+    return {
+      label: `Clear ${code(locale)}\u2026`,
+      icon: cmsIcon("backspace"),
+      tone: "danger",
+      description: count ? `${valuesLabel(count)}, falls back to ${code(i18n.defaultLocale)}` : void 0,
+      disabled: !count,
+      disabledReason: `No ${code(locale)} values`,
+      onSelect: () => void clear(locale)
+    };
+  }
+  const items = computed(() => {
+    if (toValue(options.disabled) || i18n.locales.length < 2) return [];
+    const fields = toValue(options.fields);
+    if (!hasTranslatableContent(fields)) return [];
+    const active = toValue(options.locale);
+    const targets = active && i18n.locales.includes(active) ? [active] : i18n.locales.filter((locale) => locale !== i18n.defaultLocale);
+    return [
+      { type: "label", label: "Translations" },
+      ...targets.flatMap((target) => [
+        ...i18n.locales.filter((source) => source !== target).map((source) => copyItem(fields, source, target)),
+        ...target === i18n.defaultLocale ? [] : [clearItem(fields, target)]
+      ])
+    ];
+  });
+  return { items };
+}

package/dist/runtime/app/css-url.d.ts

@@ -0,0 +1,4 @@
+declare module '*.css?url' {
+   const href: string
+   export default href
+}

package/dist/runtime/app/image/CmsImage.d.vue.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/image/CmsImage.vue

@@ -0,0 +1,91 @@
+<template>
+   <component :is="nuxtComponent" v-if="image && nuxtComponent" v-bind="nuxtBindings" />
+   <img v-else-if="image" v-bind="plainBindings" />
+</template>
+
+<script setup>
+import { cmsImageProvider, cmsNuxtImg, cmsNuxtPicture } from "#cms-image";
+import { computed, useAttrs } from "#imports";
+import {
+  cmsImageSize,
+  focalObjectPosition,
+  imgixFocalModifiers,
+  isRenderableImage
+} from "../../shared/media-focal";
+import { useCmsRuntime } from "../composables/cms-runtime";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  media: { type: Object, default: null },
+  alt: { type: String, default: void 0 },
+  width: { type: [Number, String], default: void 0 },
+  height: { type: [Number, String], default: void 0 },
+  loading: { type: String, default: "lazy" },
+  decoding: { type: String, default: "async" },
+  picture: { type: Boolean, default: false },
+  provider: { type: String, default: void 0 },
+  modifiers: { type: Object, default: void 0 }
+});
+const attrs = useAttrs();
+const { mediaStorage } = useCmsRuntime();
+const image = computed(() => isRenderableImage(props.media) ? props.media : null);
+const size = computed(() => cmsImageSize(image.value, { width: props.width, height: props.height }));
+const objectPosition = computed(() => focalObjectPosition(image.value));
+const positioned = computed(
+  () => objectPosition.value ? { style: [attrs.style, { objectPosition: objectPosition.value }] } : {}
+);
+const provider = computed(() => props.provider ?? cmsImageProvider);
+const nuxtComponent = computed(() => {
+  if (!cmsNuxtImg) return null;
+  if (!props.provider && mediaStorage === "filesystem" && (provider.value ?? "ipx") === "ipx")
+    return null;
+  return props.picture ? cmsNuxtPicture : cmsNuxtImg;
+});
+const common = computed(() => ({
+  src: image.value?.url ?? void 0,
+  alt: props.alt ?? image.value?.alt ?? "",
+  width: size.value.width,
+  height: size.value.height,
+  loading: props.loading,
+  decoding: props.decoding
+}));
+const NUXT_IMAGE_ATTRS = /* @__PURE__ */ new Set([
+  "sizes",
+  "densities",
+  "format",
+  "quality",
+  "fit",
+  "preset",
+  "placeholder",
+  "placeholderClass",
+  "placeholder-class",
+  "background",
+  "preload",
+  "imgAttrs",
+  "img-attrs"
+]);
+const plainBindings = computed(() => ({
+  ...Object.fromEntries(Object.entries(attrs).filter(([key]) => !NUXT_IMAGE_ATTRS.has(key))),
+  ...common.value,
+  ...positioned.value
+}));
+const nuxtBindings = computed(() => {
+  const focal = provider.value === "imgix" ? imgixFocalModifiers(image.value) : {};
+  const modifiers = { ...focal, ...props.modifiers };
+  const base = {
+    ...attrs,
+    ...common.value,
+    provider: props.provider,
+    modifiers: Object.keys(modifiers).length ? modifiers : void 0
+  };
+  if (!props.picture) return { ...base, ...positioned.value };
+  const imgAttrs = attrs.imgAttrs ?? attrs["img-attrs"] ?? {};
+  if (!objectPosition.value) return base;
+  return {
+    ...base,
+    imgAttrs: {
+      ...imgAttrs,
+      style: [imgAttrs.style, { objectPosition: objectPosition.value }]
+    }
+  };
+});
+</script>