@xleddyl/nuxt-cms 0.9.3 → 0.10.0

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

@@ -0,0 +1,322 @@
+<template>
+   <div ref="root" class="cms-block-tree">
+      <KTree
+         v-model:expanded="expanded"
+         :nodes="nodes"
+         :selected="selectedId"
+         :highlighted="highlightedId"
+         :label="label"
+         size="sm"
+         :bordered="false"
+         :move-buttons="false"
+         :reorderable="!readonly"
+         nestable
+         :can-drop="canDrop"
+         empty-variant="plain"
+         :empty-icon="cmsIcon('rectangle-stack')"
+         empty-text="No blocks yet"
+         :empty-description="
+  canAdd([fieldKey]) ? 'Add the first block to start the page.' : void 0
+"
+         @select="onSelect"
+         @move="onMove"
+         @hover="onHover"
+      >
+         <template #label="{ node }">
+            <span v-if="rowOf(node)?.kind === 'add'" class="cms-block-tree-add">
+               {{ node.label }}
+            </span>
+            <span
+               v-else
+               class="cms-block-tree-text"
+               :class="{ 'is-group': rowOf(node)?.kind === 'field' }"
+            >
+               <span class="cms-block-tree-label">{{ node.label }}</span>
+               <span v-if="node.description" class="cms-block-tree-summary">
+                  {{ node.description }}
+               </span>
+            </span>
+         </template>
+         <template #meta="{ node }">
+            <template v-if="rowOf(node)?.hidden">
+               <KIcon :name="cmsIcon('eye-slash')" class="cms-block-tree-hidden" />
+               <KVisuallyHidden>Hidden</KVisuallyHidden>
+            </template>
+         </template>
+         <template #actions="{ node }">
+            <template v-if="blockRow(node)">
+               <KButton
+                  v-if="!readonly && canAdd(blockListPath(blockRow(node).path))"
+                  :icon="cmsIcon('plus')"
+                  size="xs"
+                  variant="ghost"
+                  tone="neutral"
+                  aria-haspopup="dialog"
+                  :aria-label="`Add a block after ${node.label}`"
+                  @click="(event) => insertAfter(blockRow(node).path, event)"
+               />
+               <KDropdownMenu :items="menu(blockRow(node).path)" placement="bottom-end">
+                  <KButton
+                     :icon="cmsIcon('ellipsis-horizontal')"
+                     size="xs"
+                     variant="ghost"
+                     tone="neutral"
+                     :aria-label="`${node.label} actions`"
+                  />
+               </KDropdownMenu>
+            </template>
+            <KButton
+               v-else-if="fieldRow(node) && !readonly && canAdd(fieldRow(node).list)"
+               :icon="cmsIcon('plus')"
+               size="xs"
+               variant="ghost"
+               tone="neutral"
+               aria-haspopup="dialog"
+               :aria-label="`Add a block to ${node.label}`"
+               @click="(event) => appendTo(fieldRow(node).list, event)"
+            />
+         </template>
+         <template v-if="canAdd([fieldKey]) && !readonly" #empty-actions>
+            <KButton
+               :icon="cmsIcon('plus')"
+               label="Add a block"
+               size="sm"
+               variant="soft"
+               tone="neutral"
+               aria-haspopup="dialog"
+               @click="(event) => appendTo([fieldKey], event)"
+            />
+         </template>
+      </KTree>
+   </div>
+</template>
+
+<script setup>
+import {
+  blockListAt,
+  blockListPath,
+  blockPathIndex,
+  formatBlockPath,
+  isFieldVisible,
+  isHiddenBlock,
+  sameBlockPath
+} from "#nuxt-cms";
+import {
+  Button as KButton,
+  DropdownMenu as KDropdownMenu,
+  Icon as KIcon,
+  Tree as KTree,
+  VisuallyHidden as KVisuallyHidden
+} from "@xleddyl/443-components-vue";
+import { computed, nextTick, ref, watch } from "#imports";
+import {
+  blockSummary,
+  blockTreeVisits,
+  canMoveBlock,
+  stableBlockTreeIds
+} from "../../../shared/preview";
+import { useCmsRuntime } from "../../composables/cms-runtime";
+import { cmsIcon } from "../../utils/ui";
+const props = defineProps({
+  items: { type: Array, required: true },
+  field: { type: Object, required: true },
+  fieldKey: { type: String, required: true },
+  locale: { type: String, required: true },
+  selected: { type: [Array, null], required: true },
+  highlighted: { type: [Array, null], required: true },
+  errors: { type: Set, required: true },
+  canAdd: { type: Function, required: true },
+  label: { type: String, required: true },
+  menu: { type: Function, required: true },
+  readonly: { type: Boolean, required: false }
+});
+const emit = defineEmits(["select", "move", "hover", "insert"]);
+const { i18n } = useCmsRuntime();
+const root = ref(null);
+const rootFields = computed(() => ({ [props.fieldKey]: props.field }));
+const rootValues = computed(() => ({ [props.fieldKey]: props.items }));
+let counter = 0;
+let snapshot = null;
+const ids = computed(() => {
+  const result = stableBlockTreeIds(
+    blockTreeVisits(rootFields.value, rootValues.value),
+    snapshot,
+    () => ++counter
+  );
+  snapshot = result.snapshot;
+  return result.ids;
+});
+function idOf(path) {
+  const key = formatBlockPath(path);
+  return ids.value.get(key) ?? key;
+}
+function fieldRowId(owner, key) {
+  return `field:${idOf(owner)}:${key}`;
+}
+function listInvalid(list) {
+  const prefix = `${formatBlockPath(list)}.`;
+  for (const path of props.errors) if (path.startsWith(prefix)) return true;
+  return false;
+}
+const tree = computed(() => {
+  const rows = /* @__PURE__ */ new Map();
+  function addRow(list, owner, dimmed) {
+    if (props.readonly) return [];
+    const id = `add:${String(owner)}:${String(list.at(-1))}`;
+    rows.set(id, { kind: "add", list, hidden: false, dimmed });
+    return [{ id, label: "Add a block", icon: cmsIcon("plus") }];
+  }
+  function listNodes(list, field, value, owner, dimmed) {
+    const items = Array.isArray(value) ? value : [];
+    if (!items.length) return addRow(list, owner, dimmed);
+    return items.map((item, index) => blockNode([...list, index], field, item, dimmed));
+  }
+  function blockNode(path, field, item, parentDimmed) {
+    const block = field.blocks?.[String(item.type)];
+    const id = idOf(path);
+    const hidden = isHiddenBlock(item);
+    const dimmed = parentDimmed || hidden;
+    const nested = Object.entries(block?.fields ?? {}).filter(
+      ([, subfield]) => subfield.type === "blocks" && isFieldVisible(subfield, item, block.fields)
+    );
+    const single = nested.length === 1 ? [...path, nested[0][0]] : null;
+    rows.set(id, { kind: "block", path, hidden, dimmed, list: single });
+    let children;
+    if (single) children = listNodes(single, nested[0][1], item[nested[0][0]], id, dimmed);
+    else if (nested.length)
+      children = nested.map(([key, subfield]) => {
+        const list = [...path, key];
+        const fieldId = fieldRowId(path, key);
+        rows.set(fieldId, { kind: "field", owner: path, list, hidden: false, dimmed });
+        return {
+          id: fieldId,
+          label: subfield.label,
+          icon: cmsIcon("queue-list"),
+          invalid: listInvalid(list),
+          muted: dimmed,
+          children: listNodes(list, subfield, item[key], fieldId, dimmed)
+        };
+      });
+    return {
+      id,
+      label: block?.label ?? String(item.type),
+      description: blockSummary(block, item, props.locale, i18n.defaultLocale, 60) || void 0,
+      icon: cmsIcon(block?.icon ?? "rectangle-stack"),
+      invalid: props.errors.has(formatBlockPath(path)),
+      muted: dimmed,
+      children
+    };
+  }
+  const nodes2 = props.items.map(
+    (item, index) => blockNode([props.fieldKey, index], props.field, item, false)
+  );
+  return { nodes: nodes2, rows };
+});
+const nodes = computed(() => tree.value.nodes);
+function rowOf(node) {
+  return tree.value.rows.get(node.id);
+}
+function blockRow(node) {
+  const row = rowOf(node);
+  return row?.kind === "block" ? row : null;
+}
+function fieldRow(node) {
+  const row = rowOf(node);
+  return row?.kind === "field" ? row : null;
+}
+const selectedId = computed(() => props.selected ? idOf(props.selected) : null);
+const highlightedId = computed(() => props.highlighted ? idOf(props.highlighted) : null);
+const expanded = ref([]);
+const seen = /* @__PURE__ */ new Set();
+watch(
+  nodes,
+  (list) => {
+    const fresh = [];
+    const walk = (items) => {
+      for (const node of items) {
+        if (!node.children?.length) continue;
+        if (!seen.has(node.id)) {
+          seen.add(node.id);
+          fresh.push(node.id);
+        }
+        walk(node.children);
+      }
+    };
+    walk(list);
+    if (fresh.length) expanded.value = [...expanded.value, ...fresh];
+  },
+  { immediate: true }
+);
+function ancestorIds(path) {
+  const found = [];
+  for (let end = 2; end < path.length; end += 2) {
+    const owner = path.slice(0, end);
+    found.push(idOf(owner));
+    const row = tree.value.rows.get(idOf(owner));
+    if (row?.kind === "block" && !row.list) found.push(fieldRowId(owner, String(path[end])));
+  }
+  return found;
+}
+function destination(move) {
+  const source = rowOf(move.node);
+  if (source?.kind !== "block") return null;
+  const parent = move.to.parent === null ? null : tree.value.rows.get(move.to.parent);
+  let list = null;
+  if (move.to.parent === null) list = [props.fieldKey];
+  else if (parent?.kind === "field") list = parent.list;
+  else if (parent?.kind === "block") list = parent.list;
+  if (!list) return null;
+  const length = blockListAt(rootValues.value, list)?.length ?? 0;
+  const sameList = sameBlockPath(blockListPath(source.path), list);
+  const index = Math.max(Math.min(move.to.index, sameList ? length - 1 : length), 0);
+  const insertion = sameList && index >= blockPathIndex(source.path) ? index + 1 : index;
+  return { from: source.path, list, index: insertion };
+}
+function canDrop(move) {
+  if (props.readonly) return false;
+  const target = destination(move);
+  return !!target && canMoveBlock(rootFields.value, rootValues.value, target.from, target.list);
+}
+function onMove(move) {
+  const target = destination(move);
+  if (!target || !canDrop(move)) return;
+  emit("move", target.from, target.list, target.index);
+}
+function focusedRow() {
+  const active = document.activeElement;
+  return active instanceof HTMLElement && root.value?.contains(active) ? active : root.value;
+}
+function onSelect(node) {
+  const row = rowOf(node);
+  if (row?.kind === "block") emit("select", row.path);
+  else if (row?.kind === "field") emit("select", row.owner);
+  else if (row?.kind === "add" && props.canAdd(row.list))
+    emit("insert", row.list, blockListAt(rootValues.value, row.list)?.length ?? 0, focusedRow());
+}
+function insertAfter(path, event) {
+  emit("insert", blockListPath(path), blockPathIndex(path) + 1, event.currentTarget);
+}
+function appendTo(list, event) {
+  emit(
+    "insert",
+    list,
+    blockListAt(rootValues.value, list)?.length ?? 0,
+    event.currentTarget
+  );
+}
+function onHover(node) {
+  const row = node ? rowOf(node) : void 0;
+  emit("hover", row?.kind === "block" ? row.path : row?.kind === "field" ? row.owner : null);
+}
+watch(
+  () => props.selected ? formatBlockPath(props.selected) : null,
+  async () => {
+    const path = props.selected;
+    if (!path) return;
+    const missing = ancestorIds(path).filter((id) => !expanded.value.includes(id));
+    if (missing.length) expanded.value = [...expanded.value, ...missing];
+    await nextTick();
+    root.value?.querySelector('[role="treeitem"][aria-selected="true"]')?.scrollIntoView({ block: "nearest" });
+  }
+);
+</script>

package/dist/runtime/app/components/cms/BlockTree.vue.d.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;