@xleddyl/nuxt-cms 0.9.4 → 0.10.0

package/dist/runtime/app/blocks/CmsBlocks.d.vue.ts

@@ -36,9 +36,9 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         default: boolean;
     };
 }>> & Readonly<{}>, {
-    field: string;
     blocks: readonly CmsBlockItem[] | null;
     entry: string;
+    field: string;
     annotate: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/app/blocks/CmsBlocks.vue

@@ -1,36 +1,84 @@
 <template>
-   <component
-      :is="block.component"
+   <CmsBlockNode
       v-for="block in resolved"
       :key="block.key"
-      v-bind="annotate ? { ...block.props, ...annotation(block) } : block.props"
+      :block="block"
+      :parent="parentOf(block)"
+      :attrs="annotating ? annotation(block) : null"
    />
+   <button
+      v-if="placeholder"
+      type="button"
+      class="cms-preview-empty-button is-nested"
+      v-bind="cmsTokenRoot(cmsPreviewTheme)"
+      :data-cms-insert="placeholder"
+   >
+      <svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+         <path
+            d="M10.75 4.75a.75.75 0 0 0-1.5 0v4.5h-4.5a.75.75 0 0 0 0 1.5h4.5v4.5a.75.75 0 0 0 1.5 0v-4.5h4.5a.75.75 0 0 0 0-1.5h-4.5v-4.5Z"
+         />
+      </svg>
+      <span>Add a block</span>
+   </button>
 </template>
 
 <script setup>
-import { computed } from "#imports";
-import { cmsBlockTypeName, resolveCmsBlocks } from "./resolve";
+import { computed, inject, toRaw } from "#imports";
+import { cmsPreviewEditable, cmsPreviewTheme, cmsTokenRoot } from "../preview/field-marker";
+import { CMS_BLOCK_PARENT, CmsBlockNode } from "./node";
+import { cmsBlockAnnotation, cmsBlockScope, cmsBlockTypeName, resolveCmsBlocks } from "./resolve";
 const props = defineProps({
   blocks: { type: Array, default: null },
   entry: { type: String, default: void 0 },
   field: { type: String, default: void 0 },
   annotate: { type: Boolean, default: false }
 });
+const parent = inject(CMS_BLOCK_PARENT, null);
+const scope = computed(
+  () => cmsBlockScope(
+    { entry: props.entry, field: props.field },
+    parent?.value ? {
+      ...parent.value,
+      props: Object.fromEntries(
+        Object.entries(parent.value.props).map(([key, value]) => [key, toRaw(value)])
+      )
+    } : null,
+    toRaw(props.blocks)
+  )
+);
+const annotating = computed(() => props.annotate || !!parent?.value?.annotate);
 function warnMissing(item) {
   if (!import.meta.dev) return;
-  const name = cmsBlockTypeName(item, props.entry, props.field) ?? item.type;
+  const name = cmsBlockTypeName(
+    item,
+    scope.value.schemaPath ? scope.value.entry : void 0,
+    scope.value.schemaPath ?? void 0
+  ) ?? item.type;
   console.warn(
     `[nuxt-cms] <CmsBlocks> has no component for block '${name}': set component on the block in cms.config, or pass entry and field when the data has no __typename`
   );
 }
 const resolved = computed(
   () => resolveCmsBlocks(props.blocks, {
-    entry: props.entry,
-    field: props.field,
+    entry: scope.value.schemaPath ? scope.value.entry : void 0,
+    field: scope.value.schemaPath ?? void 0,
     onMissing: warnMissing
   })
 );
+const placeholder = computed(
+  () => parent?.value && annotating.value && cmsPreviewEditable.value && !resolved.value.length ? `${scope.value.listPath}.${props.blocks?.length ?? 0}` : null
+);
+function parentOf(block) {
+  return {
+    entry: scope.value.entry,
+    schemaPath: scope.value.schemaPath,
+    itemPath: `${scope.value.listPath}.${block.index}`,
+    type: block.type,
+    props: block.props,
+    annotate: annotating.value
+  };
+}
 function annotation(block) {
-  return { "data-cms-block": block.index, "data-cms-block-type": block.type };
+  return cmsBlockAnnotation(block, scope.value, !!parent?.value);
 }
 </script>

package/dist/runtime/app/blocks/CmsBlocks.vue.d.ts

@@ -36,9 +36,9 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         default: boolean;
     };
 }>> & Readonly<{}>, {
-    field: string;
     blocks: readonly CmsBlockItem[] | null;
     entry: string;
+    field: string;
     annotate: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/app/blocks/CmsField.d.ts

@@ -0,0 +1,24 @@
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    name: {
+        type: StringConstructor;
+        required: true;
+    };
+    as: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    name: {
+        type: StringConstructor;
+        required: true;
+    };
+    as: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    as: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/runtime/app/blocks/CmsField.js

@@ -0,0 +1,16 @@
+import { defineComponent, h } from "#imports";
+import { CMS_FIELD_ATTRIBUTE, cmsFieldMarking } from "../preview/field-marker.js";
+export default defineComponent({
+  name: "CmsField",
+  props: {
+    name: { type: String, required: true },
+    as: { type: String, default: "span" }
+  },
+  setup(props, { slots }) {
+    return () => h(
+      props.as,
+      cmsFieldMarking.value ? { [CMS_FIELD_ATTRIBUTE]: props.name } : null,
+      slots.default?.()
+    );
+  }
+});

package/dist/runtime/app/blocks/node.d.ts

@@ -0,0 +1,37 @@
+import type { ComputedRef, InjectionKey, PropType } from 'vue';
+import type { CmsBlockParent, ResolvedCmsBlock } from './resolve.js';
+export type CmsBlockParentContext = CmsBlockParent & {
+    annotate: boolean;
+};
+export declare const CMS_BLOCK_PARENT: InjectionKey<ComputedRef<CmsBlockParentContext>>;
+export declare const CmsBlockNode: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    block: {
+        type: PropType<ResolvedCmsBlock>;
+        required: true;
+    };
+    parent: {
+        type: PropType<CmsBlockParentContext>;
+        required: true;
+    };
+    attrs: {
+        type: PropType<Record<string, unknown> | null>;
+        default: null;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    block: {
+        type: PropType<ResolvedCmsBlock>;
+        required: true;
+    };
+    parent: {
+        type: PropType<CmsBlockParentContext>;
+        required: true;
+    };
+    attrs: {
+        type: PropType<Record<string, unknown> | null>;
+        default: null;
+    };
+}>> & Readonly<{}>, {
+    attrs: Record<string, unknown> | null;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/runtime/app/blocks/node.js

@@ -0,0 +1,17 @@
+import { computed, defineComponent, h, provide } from "#imports";
+export const CMS_BLOCK_PARENT = Symbol("cms-block-parent");
+export const CmsBlockNode = defineComponent({
+  name: "CmsBlockNode",
+  props: {
+    block: { type: Object, required: true },
+    parent: { type: Object, required: true },
+    attrs: { type: Object, default: null }
+  },
+  setup(props) {
+    provide(
+      CMS_BLOCK_PARENT,
+      computed(() => props.parent)
+    );
+    return () => h(props.block.component, { ...props.block.props, ...props.attrs });
+  }
+});

package/dist/runtime/app/blocks/resolve.d.ts

@@ -14,6 +14,24 @@ export declare const isHiddenCmsBlock: (item: CmsBlockItem) => boolean;
 export declare function cmsBlockTypeName(item: CmsBlockItem, entry?: string, field?: string): string | undefined;
 export declare function cmsBlockComponent(item: CmsBlockItem, entry?: string, field?: string): Component | undefined;
 export declare function cmsBlockProps(item: CmsBlockItem): Record<string, unknown>;
+export interface CmsBlockScope {
+    entry?: string;
+    schemaPath: string | null;
+    listPath: string;
+}
+export interface CmsBlockParent {
+    entry?: string;
+    schemaPath: string | null;
+    itemPath: string;
+    type: string;
+    props: Record<string, unknown>;
+}
+export declare function nestedBlocksField(parent: Pick<CmsBlockParent, 'props'>, blocks: unknown, field?: string): string | undefined;
+export declare function cmsBlockScope(options: {
+    entry?: string;
+    field?: string;
+}, parent?: CmsBlockParent | null, blocks?: unknown): CmsBlockScope;
+export declare function cmsBlockAnnotation(block: Pick<ResolvedCmsBlock, 'index' | 'type'>, scope: Pick<CmsBlockScope, 'listPath'>, nested: boolean): Record<string, string | number>;
 export declare function resolveCmsBlocks(blocks: readonly CmsBlockItem[] | null | undefined, options?: {
     entry?: string;
     field?: string;

package/dist/runtime/app/blocks/resolve.js

@@ -16,6 +16,40 @@ export function cmsBlockProps(item) {
     )
   );
 }
+export function nestedBlocksField(parent, blocks, field) {
+  if (field) return field;
+  if (!blocks) return void 0;
+  return Object.entries(parent.props).find(([, value]) => value === blocks)?.[0];
+}
+export function cmsBlockScope(options, parent, blocks) {
+  if (!parent) {
+    const field = options.field ?? CONTENT_BODY_FIELD;
+    return {
+      entry: options.entry,
+      schemaPath: options.entry ? field : null,
+      listPath: field
+    };
+  }
+  const key = nestedBlocksField(parent, blocks, options.field) ?? "_";
+  const entry = options.entry ?? parent.entry;
+  return {
+    entry,
+    schemaPath: entry && parent.schemaPath ? `${parent.schemaPath}.${parent.type}.${key}` : null,
+    listPath: `${parent.itemPath}.${key}`
+  };
+}
+export function cmsBlockAnnotation(block, scope, nested) {
+  const path = `${scope.listPath}.${block.index}`;
+  return nested ? {
+    "data-cms-block-path": path,
+    "data-cms-block-parent": scope.listPath.slice(0, scope.listPath.lastIndexOf(".")),
+    "data-cms-block-type": block.type
+  } : {
+    "data-cms-block": block.index,
+    "data-cms-block-path": path,
+    "data-cms-block-type": block.type
+  };
+}
 export function resolveCmsBlocks(blocks, options = {}) {
   const resolved = [];
   (blocks ?? []).forEach((item, index) => {

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

@@ -0,0 +1,22 @@
+import type { BlockConfig } from '#nuxt-cms';
+import type { CmsBlockPreset } from '../../../shared/presets.js';
+type __VLS_Props = {
+    blocks: Record<string, BlockConfig>;
+    disabledReason?: string;
+    pasteCount?: number;
+    presets?: CmsBlockPreset[];
+    label?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    pick: (type: string) => any;
+    paste: () => any;
+    close: () => any;
+    preset: (id: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onPick?: ((type: string) => any) | undefined;
+    onPaste?: (() => any) | undefined;
+    onClose?: (() => any) | undefined;
+    onPreset?: ((id: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,87 @@
+<template>
+   <KCommandList
+      :groups="groups"
+      :pinned="pinned"
+      :label="label"
+      placeholder="Search blocks"
+      :empty-text="emptyText"
+      @select="choose"
+      @close="emit('close')"
+   />
+</template>
+
+<script setup>
+import { CommandList as KCommandList } from "@xleddyl/443-components-vue";
+import { computed } from "#imports";
+import { blockPickerGroups } from "../../../shared/block-picker";
+import { CMS_PRESET_ICON, CMS_PRESET_PICKER_GROUP, presetPickerItem } from "../../../shared/presets";
+import { cmsIcon } from "../../utils/ui";
+const PASTE_ID = "cms:paste";
+const PRESET_PREFIX = "cms:preset:";
+const props = defineProps({
+  blocks: { type: Object, required: true },
+  disabledReason: { type: String, required: false, default: void 0 },
+  pasteCount: { type: Number, required: false, default: 0 },
+  presets: { type: Array, required: false, default: () => [] },
+  label: { type: String, required: false, default: "Available blocks" }
+});
+const emit = defineEmits(["pick", "paste", "preset", "close"]);
+const disabledState = computed(
+  () => props.disabledReason ? { disabled: true, disabledReason: props.disabledReason } : {}
+);
+const presetGroup = computed(
+  () => props.presets.length ? [
+    {
+      id: "cms:presets",
+      label: CMS_PRESET_PICKER_GROUP,
+      items: props.presets.map((preset) => {
+        const item = presetPickerItem(preset);
+        return {
+          ...item,
+          id: `${PRESET_PREFIX}${item.id}`,
+          icon: cmsIcon(CMS_PRESET_ICON),
+          ...disabledState.value
+        };
+      })
+    }
+  ] : []
+);
+const groups = computed(() => [
+  ...blockPickerGroups(props.blocks, () => props.disabledReason).map((group) => ({
+    id: group.id || "other",
+    label: group.label ?? (presetGroup.value.length ? "Blocks" : void 0),
+    items: group.items.map((item) => ({
+      id: item.type,
+      label: item.label,
+      description: item.description,
+      icon: cmsIcon(item.icon),
+      keywords: item.keywords,
+      disabled: item.disabled,
+      disabledReason: item.disabledReason,
+      data: item.type
+    }))
+  })),
+  ...presetGroup.value
+]);
+function pinned(query) {
+  const count = props.pasteCount;
+  if (!count || query) return [];
+  return [
+    {
+      id: PASTE_ID,
+      label: `Paste ${count} ${count === 1 ? "block" : "blocks"}`,
+      description: "From the clipboard",
+      icon: cmsIcon("clipboard"),
+      ...disabledState.value
+    }
+  ];
+}
+function emptyText(query) {
+  return `No block matches "${query}".`;
+}
+function choose(item) {
+  if (item.id === PASTE_ID) emit("paste");
+  else if (item.id.startsWith(PRESET_PREFIX)) emit("preset", item.id.slice(PRESET_PREFIX.length));
+  else if (item.data) emit("pick", item.data);
+}
+</script>

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

@@ -0,0 +1,22 @@
+import type { BlockConfig } from '#nuxt-cms';
+import type { CmsBlockPreset } from '../../../shared/presets.js';
+type __VLS_Props = {
+    blocks: Record<string, BlockConfig>;
+    disabledReason?: string;
+    pasteCount?: number;
+    presets?: CmsBlockPreset[];
+    label?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    pick: (type: string) => any;
+    paste: () => any;
+    close: () => any;
+    preset: (id: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onPick?: ((type: string) => any) | undefined;
+    onPaste?: (() => any) | undefined;
+    onClose?: (() => any) | undefined;
+    onPreset?: ((id: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,38 @@
+import type { BlockConfig } from '#nuxt-cms';
+import type { OverlayAnchorTarget } from '@xleddyl/443-components-vue';
+import type { CmsBlockPreset } from '../../../shared/presets.js';
+type __VLS_Props = {
+    blocks: Record<string, BlockConfig>;
+    disabledReason?: string;
+    pasteCount?: number;
+    presets?: CmsBlockPreset[];
+    label?: string;
+    anchor?: OverlayAnchorTarget | null;
+};
+type __VLS_ModelProps = {
+    'open'?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_9: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_9) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    pick: (type: string) => any;
+    paste: () => any;
+    preset: (id: string) => any;
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onPick?: ((type: string) => any) | undefined;
+    onPaste?: (() => any) | undefined;
+    onPreset?: ((id: string) => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, 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/components/cms/BlockPickerPopover.vue

@@ -0,0 +1,44 @@
+<template>
+   <KPopover v-model:open="open" :anchor="anchor" :label="label" placement="bottom-start" sheet>
+      <template v-if="$slots.default" #default><slot /></template>
+      <template #content>
+         <CmsBlockPicker
+            v-if="open"
+            :blocks="blocks"
+            :disabled-reason="disabledReason"
+            :paste-count="pasteCount"
+            :presets="presets"
+            @pick="pick"
+            @paste="paste"
+            @preset="preset"
+            @close="open = false"
+         />
+      </template>
+   </KPopover>
+</template>
+
+<script setup>
+import { Popover as KPopover } from "@xleddyl/443-components-vue";
+defineProps({
+  blocks: { type: Object, required: true },
+  disabledReason: { type: String, required: false, default: void 0 },
+  pasteCount: { type: Number, required: false, default: 0 },
+  presets: { type: Array, required: false, default: () => [] },
+  label: { type: String, required: false, default: "Insert a block" },
+  anchor: { type: null, required: false, default: null }
+});
+const emit = defineEmits(["pick", "paste", "preset"]);
+const open = defineModel("open", { type: Boolean, ...{ default: false } });
+function pick(type) {
+  open.value = false;
+  emit("pick", type);
+}
+function paste() {
+  open.value = false;
+  emit("paste");
+}
+function preset(id) {
+  open.value = false;
+  emit("preset", id);
+}
+</script>

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

@@ -0,0 +1,38 @@
+import type { BlockConfig } from '#nuxt-cms';
+import type { OverlayAnchorTarget } from '@xleddyl/443-components-vue';
+import type { CmsBlockPreset } from '../../../shared/presets.js';
+type __VLS_Props = {
+    blocks: Record<string, BlockConfig>;
+    disabledReason?: string;
+    pasteCount?: number;
+    presets?: CmsBlockPreset[];
+    label?: string;
+    anchor?: OverlayAnchorTarget | null;
+};
+type __VLS_ModelProps = {
+    'open'?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_9: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_9) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    pick: (type: string) => any;
+    paste: () => any;
+    preset: (id: string) => any;
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onPick?: ((type: string) => any) | undefined;
+    onPaste?: (() => any) | undefined;
+    onPreset?: ((id: string) => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, 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/components/cms/BlockTree.d.vue.ts

@@ -0,0 +1,29 @@
+import type { CmsBlockPath, FieldConfig } from '#nuxt-cms';
+import type { MenuItems } from '@xleddyl/443-components-vue';
+import type { CmsBlockValue } from '../../../shared/preview.js';
+type __VLS_Props = {
+    items: CmsBlockValue[];
+    field: FieldConfig;
+    fieldKey: string;
+    locale: string;
+    selected: CmsBlockPath | null;
+    highlighted: CmsBlockPath | null;
+    errors: ReadonlySet<string>;
+    canAdd: (list: CmsBlockPath) => boolean;
+    label: string;
+    menu: (path: CmsBlockPath) => MenuItems;
+    readonly?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: (path: CmsBlockPath) => any;
+    hover: (path: CmsBlockPath | null) => any;
+    insert: (list: CmsBlockPath, index: number, anchor: HTMLElement) => any;
+    move: (from: CmsBlockPath, toList: CmsBlockPath, toIndex: number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSelect?: ((path: CmsBlockPath) => any) | undefined;
+    onHover?: ((path: CmsBlockPath | null) => any) | undefined;
+    onInsert?: ((list: CmsBlockPath, index: number, anchor: HTMLElement) => any) | undefined;
+    onMove?: ((from: CmsBlockPath, toList: CmsBlockPath, toIndex: number) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;