@xleddyl/nuxt-cms 0.2.2 → 0.2.3

package/dist/runtime/app/pages/admin-preview.vue

@@ -0,0 +1,132 @@
+<template>
+   <div class="cms-preview" :data-cms-preview="state ? 'ready' : 'waiting'">
+      <template v-if="state && field">
+         <component :is="wrapper" v-if="wrapper && item" :item="item" :locale="state.locale">
+            <CmsBlocks :blocks="blocks" :entry="blockEntry" :field="state.field" annotate />
+            <div v-if="!visibleCount" class="cms-preview-empty">
+               <button
+                  type="button"
+                  class="cms-preview-empty-button"
+                  data-cms-preview-keep
+                  @click="post({ type: 'insert', index: state.blocks.length })"
+               >
+                  <CmsIcon name="plus" />
+                  <span>Add a block</span>
+               </button>
+            </div>
+         </component>
+         <template v-else>
+            <CmsBlocks :blocks="blocks" :entry="blockEntry" :field="state.field" annotate />
+            <div v-if="!visibleCount" class="cms-preview-empty">
+               <button
+                  type="button"
+                  class="cms-preview-empty-button"
+                  data-cms-preview-keep
+                  @click="post({ type: 'insert', index: state.blocks.length })"
+               >
+                  <CmsIcon name="plus" />
+                  <span>Add a block</span>
+               </button>
+            </div>
+         </template>
+         <PreviewOverlay
+            :field="field"
+            :total="state.blocks.length"
+            :selected="state.selected"
+            :version="version"
+            @message="post"
+         />
+      </template>
+      <p v-else-if="standalone" class="cms-preview-notice">
+         This page shows the live preview of the visual editor. Open an item in the admin to use it.
+      </p>
+   </div>
+</template>
+
+<script setup>
+import { entryFieldsFor, isHiddenBlock } from "#nuxt-cms";
+import {
+  computed,
+  definePageMeta,
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  shallowRef,
+  useHead
+} from "#imports";
+import cmsConfig from "#cms-config";
+import { cmsPreviewComponents } from "#cms-blocks";
+import {
+  isTrustedPreviewEvent,
+  parseHostMessage,
+  previewBlocks,
+  previewEnvelope,
+  previewItem
+} from "../../shared/preview";
+import { useCmsRuntime } from "../composables/cms-runtime";
+import PreviewOverlay from "../preview/PreviewOverlay.vue";
+definePageMeta({ middleware: "cms-auth" });
+const { i18n } = useCmsRuntime();
+const state = shallowRef(null);
+const version = ref(0);
+const standalone = ref(false);
+useHead({
+  title: "Preview",
+  meta: [{ name: "robots", content: "noindex, nofollow" }],
+  htmlAttrs: { lang: computed(() => state.value?.locale) }
+});
+const entry = computed(
+  () => state.value ? cmsConfig[state.value.entry] : void 0
+);
+const blockEntry = computed(() => state.value?.entry);
+const fields = computed(() => entry.value ? entryFieldsFor(entry.value) : {});
+const field = computed(() => {
+  const candidate = state.value ? fields.value[state.value.field] : void 0;
+  return candidate?.type === "blocks" ? candidate : void 0;
+});
+const blocks = computed(
+  () => state.value && field.value ? previewBlocks(
+    field.value,
+    state.value.blocks,
+    state.value.locale,
+    i18n.defaultLocale,
+    state.value.media
+  ) : []
+);
+const visibleCount = computed(() => blocks.value.filter((block) => !isHiddenBlock(block)).length);
+const item = computed(
+  () => state.value?.item && entry.value?.kind === "content" ? previewItem(
+    fields.value,
+    state.value.item,
+    state.value.locale,
+    i18n.defaultLocale,
+    state.value.media
+  ) : null
+);
+const wrapper = computed(
+  () => state.value && entry.value?.kind === "content" ? cmsPreviewComponents[state.value.entry] : void 0
+);
+function post(message) {
+  if (window.parent === window) return;
+  window.parent.postMessage(previewEnvelope(message), window.location.origin);
+}
+function onMessage(event) {
+  if (!isTrustedPreviewEvent(event, window.location.origin, window.parent)) return;
+  const message = parseHostMessage(event.data);
+  if (!message) return;
+  state.value = message.state;
+  version.value++;
+}
+onMounted(() => {
+  standalone.value = window.parent === window;
+  window.addEventListener("message", onMessage);
+  post({ type: "ready" });
+});
+onBeforeUnmount(() => {
+  window.removeEventListener("message", onMessage);
+});
+</script>
+
+<style>
+.cms-preview-overlay{--cms-preview-accent:#5b5bd6;--cms-preview-ink:#111114;--cms-preview-surface:#fff;--cms-preview-line:rgba(17,17,20,.12);--cms-preview-danger:#d9383a;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;font-size:12px;inset:0;line-height:1;pointer-events:none;position:fixed;z-index:2147483000}.cms-preview-outline{border:1px dashed color-mix(in oklab,var(--cms-preview-accent) 70%,transparent);border-radius:2px;box-sizing:border-box;position:absolute}.cms-preview-outline.is-selected{border:2px solid var(--cms-preview-accent);box-shadow:0 0 0 4px color-mix(in oklab,var(--cms-preview-accent) 14%,transparent)}.cms-preview-label{background:var(--cms-preview-accent);border-radius:2px 0 6px 0;color:#fff;font-weight:600;left:-1px;letter-spacing:.01em;padding:4px 7px;position:absolute;top:-1px;white-space:nowrap}.cms-preview-toolbar{align-items:center;background:var(--cms-preview-surface);border-radius:8px;box-shadow:0 0 0 1px var(--cms-preview-line),0 8px 24px -8px rgba(17,17,20,.28);display:flex;gap:2px;padding:3px;pointer-events:auto;position:absolute;transform:translateX(-100%)}.cms-preview-toolbar:not(.is-selected){opacity:.92}.cms-preview-empty-button,.cms-preview-insert,.cms-preview-tool{all:unset;align-items:center;box-sizing:border-box;cursor:pointer;display:inline-flex;justify-content:center}.cms-preview-tool{border-radius:6px;color:var(--cms-preview-ink);height:28px;width:28px}.cms-preview-tool:hover:not(:disabled){background:rgba(17,17,20,.06)}.cms-preview-tool:disabled{cursor:default;opacity:.35}.cms-preview-tool.is-danger{color:var(--cms-preview-danger)}.cms-preview-handle{cursor:grab;touch-action:none}.cms-preview .cms-preview-empty .cms-preview-empty-button:focus-visible,.cms-preview-overlay .cms-preview-insert:focus-visible,.cms-preview-overlay .cms-preview-tool:focus-visible{outline:2px solid var(--cms-preview-accent);outline-offset:2px}.cms-preview-separator{background:var(--cms-preview-line);height:18px;margin:0 2px;width:1px}.cms-preview-overlay svg{flex-shrink:0;height:16px;width:16px}.cms-preview-insert{background:var(--cms-preview-accent);border-radius:999px;box-shadow:0 2px 8px -2px rgba(17,17,20,.4);color:#fff;height:26px;margin:-13px 0 0 -13px;opacity:0;pointer-events:auto;position:absolute;transform:scale(.85);transition:opacity .14s ease,transform .14s ease;width:26px}.cms-preview-insert.is-near,.cms-preview-insert:focus-visible,.cms-preview-insert:hover{opacity:1;transform:scale(1)}.cms-preview-overlay.is-dragging .cms-preview-insert,.cms-preview-overlay.is-dragging .cms-preview-toolbar:not(.is-selected){visibility:hidden}.cms-preview-dropline{background:var(--cms-preview-accent);border-radius:3px;box-shadow:0 0 0 3px color-mix(in oklab,var(--cms-preview-accent) 20%,transparent);height:3px;margin-top:-1.5px;position:absolute}.cms-preview-grabbing,.cms-preview-grabbing *{cursor:grabbing!important;-webkit-user-select:none!important;-moz-user-select:none!important;user-select:none!important}.cms-preview-empty{display:flex;justify-content:center;padding:48px 16px}.cms-preview-empty-button{border:1px dashed #5b5bd6;border-radius:10px;color:#5b5bd6;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;font-size:14px;font-weight:600;gap:8px;padding:12px 18px}.cms-preview-empty-button svg{height:18px;width:18px}.cms-preview-notice{color:#6b6b75;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;margin:64px auto;max-width:32rem;padding:0 16px;text-align:center}
+</style>

package/dist/runtime/app/pages/admin-preview.vue.d.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/preview/PreviewOverlay.d.vue.ts

@@ -0,0 +1,15 @@
+import type { FieldConfig } from '../../shared/index.js';
+import type { CmsPreviewFrameMessage } from '../../shared/preview.js';
+type __VLS_Props = {
+    field: FieldConfig;
+    total: number;
+    selected: number | null;
+    version: number;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    message: (message: CmsPreviewFrameMessage) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onMessage?: ((message: CmsPreviewFrameMessage) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/preview/PreviewOverlay.vue

@@ -0,0 +1,362 @@
+<template>
+   <div ref="root" class="cms-preview-overlay" :class="{ 'is-dragging': drag?.moved }">
+      <template v-for="box in boxes" :key="box.index">
+         <div
+            v-if="box.index === hovered || box.index === selected"
+            class="cms-preview-outline"
+            :class="{ 'is-selected': box.index === selected }"
+            :style="outlineStyle(box)"
+         >
+            <span class="cms-preview-label">{{ labelOf(box) }}</span>
+         </div>
+         <div
+            v-if="box.index === hovered || box.index === selected"
+            class="cms-preview-toolbar"
+            :class="{ 'is-selected': box.index === selected }"
+            :style="toolbarStyle(box)"
+            role="toolbar"
+            :aria-label="`${labelOf(box)} block`"
+         >
+            <button
+               type="button"
+               class="cms-preview-tool cms-preview-handle"
+               :aria-label="`Move ${labelOf(box)}: drag, or use the up and down arrow keys`"
+               title="Drag to reorder"
+               @pointerdown="startDrag($event, box.index)"
+               @keydown="onHandleKey($event, box.index)"
+               @click="onHandleClick(box.index)"
+            >
+               <CmsIcon name="bars-2" />
+            </button>
+            <button
+               type="button"
+               class="cms-preview-tool"
+               aria-label="Move up"
+               title="Move up"
+               :disabled="box.index === 0"
+               @click="emitMove(box.index, box.index - 1)"
+            >
+               <CmsIcon name="arrow-up" />
+            </button>
+            <button
+               type="button"
+               class="cms-preview-tool"
+               aria-label="Move down"
+               title="Move down"
+               :disabled="box.index >= total - 1"
+               @click="emitMove(box.index, box.index + 1)"
+            >
+               <CmsIcon name="arrow-down" />
+            </button>
+            <span class="cms-preview-separator" />
+            <button
+               type="button"
+               class="cms-preview-tool"
+               aria-label="Duplicate"
+               title="Duplicate"
+               @click="emit('message', { type: 'duplicate', index: box.index })"
+            >
+               <CmsIcon name="document-duplicate" />
+            </button>
+            <button
+               v-if="hideable(box)"
+               type="button"
+               class="cms-preview-tool"
+               aria-label="Hide"
+               title="Hide"
+               @click="emit('message', { type: 'toggle-hidden', index: box.index })"
+            >
+               <CmsIcon name="eye-slash" />
+            </button>
+            <button
+               type="button"
+               class="cms-preview-tool is-danger"
+               aria-label="Delete"
+               title="Delete"
+               @click="emit('message', { type: 'remove', index: box.index })"
+            >
+               <CmsIcon name="trash" />
+            </button>
+         </div>
+      </template>
+
+      <button
+         v-for="slot in insertSlots"
+         :key="`insert-${slot.index}-${slot.edge}`"
+         type="button"
+         class="cms-preview-insert"
+         :class="{ 'is-near': slot.near }"
+         :style="{ top: `${slot.y}px`, left: `${slot.x}px` }"
+         :aria-label="`Insert a block at position ${slot.index + 1}`"
+         title="Insert a block"
+         @click="emit('message', { type: 'insert', index: slot.index })"
+      >
+         <CmsIcon name="plus" />
+      </button>
+
+      <div
+         v-if="drag?.moved && dropY !== null"
+         class="cms-preview-dropline"
+         :style="{ top: `${dropY}px`, left: `${dropLeft}px`, width: `${dropWidth}px` }"
+      />
+   </div>
+</template>
+
+<script setup>
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from "#imports";
+import { canHideBlock, insertionIndex, moveTargetForInsertion } from "../../shared/preview";
+const props = defineProps({
+  field: { type: Object, required: true },
+  total: { type: Number, required: true },
+  selected: { type: [Number, null], required: true },
+  version: { type: Number, required: true }
+});
+const emit = defineEmits(["message"]);
+const root = ref(null);
+const boxes = ref([]);
+const hovered = ref(null);
+const viewportWidth = ref(0);
+const viewportHeight = ref(0);
+const drag = ref(null);
+let refocus = false;
+let suppressClick = false;
+let frame = 0;
+function labelOf(box) {
+  return props.field.blocks?.[box.type]?.label ?? box.type;
+}
+function hideable(box) {
+  return canHideBlock(props.field.blocks?.[box.type]);
+}
+function measure() {
+  frame = 0;
+  viewportWidth.value = window.innerWidth;
+  viewportHeight.value = window.innerHeight;
+  const found = [];
+  for (const element of document.querySelectorAll("[data-cms-block]")) {
+    const index = Number(element.dataset.cmsBlock);
+    if (!Number.isInteger(index)) continue;
+    const rect = element.getBoundingClientRect();
+    found.push({
+      index,
+      type: element.dataset.cmsBlockType ?? "",
+      top: rect.top,
+      left: rect.left,
+      width: rect.width,
+      height: rect.height,
+      bottom: rect.bottom
+    });
+  }
+  boxes.value = found.sort((a, b) => a.top - b.top);
+}
+function scheduleMeasure() {
+  if (!frame) frame = requestAnimationFrame(measure);
+}
+function outlineStyle(box) {
+  return {
+    top: `${box.top}px`,
+    left: `${box.left}px`,
+    width: `${box.width}px`,
+    height: `${box.height}px`
+  };
+}
+function toolbarStyle(box) {
+  const top = Math.min(Math.max(box.top + 8, 8), Math.max(box.bottom - 44, 8));
+  const right = Math.min(box.left + box.width, viewportWidth.value) - 8;
+  return { top: `${top}px`, left: `${right}px` };
+}
+const INSERT_MARGIN = 14;
+const insertSlots = computed(() => {
+  const list = boxes.value;
+  const near = /* @__PURE__ */ new Set([hovered.value, props.selected]);
+  const maxY = viewportHeight.value - INSERT_MARGIN;
+  const clampY = (y) => Math.min(Math.max(y, INSERT_MARGIN), Math.max(maxY, INSERT_MARGIN));
+  return list.flatMap((box, position) => {
+    const next = list[position + 1];
+    const x = box.left + box.width / 2;
+    const after = {
+      index: box.index + 1,
+      edge: "after",
+      y: clampY(next ? (box.bottom + next.top) / 2 : box.bottom),
+      x,
+      near: near.has(box.index) || !!next && near.has(next.index)
+    };
+    if (position > 0) return [after];
+    const before = {
+      index: box.index,
+      edge: "before",
+      y: clampY(box.top),
+      x,
+      near: near.has(box.index)
+    };
+    return [before, after];
+  });
+});
+const dropIndex = computed(
+  () => drag.value ? insertionIndex(boxes.value, drag.value.y, props.total) : null
+);
+const dropY = computed(() => {
+  if (dropIndex.value === null) return null;
+  const list = boxes.value;
+  const position = list.findIndex((box) => box.index >= dropIndex.value);
+  if (position === -1) return list.at(-1)?.bottom ?? null;
+  const previous = list[position - 1];
+  return previous ? (previous.bottom + list[position].top) / 2 : list[position].top;
+});
+const dropLeft = computed(() => boxes.value[0]?.left ?? 0);
+const dropWidth = computed(() => boxes.value[0]?.width ?? viewportWidth.value);
+function emitMove(from, to, focus = false) {
+  if (to < 0 || to >= props.total || from === to) return;
+  emit("message", focus ? { type: "move", from, to, focus: true } : { type: "move", from, to });
+}
+function onHandleKey(event, index) {
+  if (event.key !== "ArrowUp" && event.key !== "ArrowDown") return;
+  event.preventDefault();
+  refocus = true;
+  emitMove(index, event.key === "ArrowUp" ? index - 1 : index + 1, true);
+}
+function onHandleClick(index) {
+  if (drag.value?.moved) return;
+  emit("message", { type: "select", index });
+}
+function startDrag(event, index) {
+  if (event.button !== 0) return;
+  drag.value = { from: index, startY: event.clientY, y: event.clientY, moved: false };
+  window.addEventListener("pointermove", onDragMove);
+  window.addEventListener("pointerup", onDragEnd);
+  window.addEventListener("pointercancel", cancelDrag);
+}
+function onDragMove(event) {
+  const current = drag.value;
+  if (!current) return;
+  current.y = event.clientY;
+  if (!current.moved && Math.abs(event.clientY - current.startY) > 4) {
+    current.moved = true;
+    document.documentElement.classList.add("cms-preview-grabbing");
+  }
+  if (current.moved) {
+    event.preventDefault();
+    const edge = 48;
+    if (event.clientY < edge) window.scrollBy(0, -12);
+    else if (event.clientY > window.innerHeight - edge) window.scrollBy(0, 12);
+  }
+}
+function stopDrag() {
+  window.removeEventListener("pointermove", onDragMove);
+  window.removeEventListener("pointerup", onDragEnd);
+  window.removeEventListener("pointercancel", cancelDrag);
+  document.documentElement.classList.remove("cms-preview-grabbing");
+}
+function onDragEnd() {
+  const current = drag.value;
+  stopDrag();
+  if (current?.moved && dropIndex.value !== null) {
+    suppressClick = true;
+    emitMove(current.from, moveTargetForInsertion(current.from, dropIndex.value));
+  }
+  setTimeout(() => {
+    drag.value = null;
+    suppressClick = false;
+  });
+}
+function cancelDrag() {
+  stopDrag();
+  drag.value = null;
+}
+function blockIndexOf(target) {
+  const element = target instanceof Element ? target.closest("[data-cms-block]") : null;
+  const index = element ? Number(element.dataset.cmsBlock) : NaN;
+  return Number.isInteger(index) ? index : null;
+}
+function insideOverlay(target) {
+  return target instanceof Node && !!root.value?.contains(target);
+}
+function onPointerMove(event) {
+  if (drag.value || insideOverlay(event.target)) return;
+  hovered.value = blockIndexOf(event.target);
+}
+function onPointerLeave() {
+  if (!drag.value) hovered.value = null;
+}
+function onClick(event) {
+  if (suppressClick) {
+    suppressClick = false;
+    event.preventDefault();
+    event.stopPropagation();
+    return;
+  }
+  if (insideOverlay(event.target)) return;
+  const target = event.target instanceof Element ? event.target : null;
+  if (target?.closest("a, button, input, select, textarea, label, summary")) event.preventDefault();
+  if (target?.closest("[data-cms-preview-keep]")) return;
+  event.stopPropagation();
+  emit("message", { type: "select", index: blockIndexOf(event.target) });
+}
+function onSubmit(event) {
+  event.preventDefault();
+}
+function onKeydown(event) {
+  if (event.key === "Escape" && props.selected !== null) {
+    emit("message", { type: "select", index: null });
+  }
+}
+function revealSelected() {
+  if (props.selected === null || drag.value) return;
+  const element = document.querySelector(`[data-cms-block="${props.selected}"]`);
+  if (!element) return;
+  const rect = element.getBoundingClientRect();
+  if (rect.bottom < 0 || rect.top > window.innerHeight) {
+    element.scrollIntoView({ block: "center", behavior: "smooth" });
+  }
+}
+watch(
+  () => props.version,
+  async () => {
+    await nextTick();
+    measure();
+    if (refocus) {
+      refocus = false;
+      root.value?.querySelector(".cms-preview-toolbar.is-selected .cms-preview-handle")?.focus();
+    }
+  }
+);
+watch(
+  () => props.selected,
+  async () => {
+    await nextTick();
+    revealSelected();
+  }
+);
+let resizeObserver = null;
+let mutationObserver = null;
+onMounted(() => {
+  measure();
+  document.addEventListener("pointermove", onPointerMove, { passive: true });
+  document.documentElement.addEventListener("pointerleave", onPointerLeave);
+  document.addEventListener("click", onClick, true);
+  document.addEventListener("submit", onSubmit, true);
+  document.addEventListener("keydown", onKeydown);
+  document.addEventListener("load", scheduleMeasure, true);
+  window.addEventListener("scroll", scheduleMeasure, { passive: true, capture: true });
+  window.addEventListener("resize", scheduleMeasure);
+  resizeObserver = new ResizeObserver(scheduleMeasure);
+  resizeObserver.observe(document.body);
+  mutationObserver = new MutationObserver((records) => {
+    if (records.some((record) => !root.value?.contains(record.target))) scheduleMeasure();
+  });
+  mutationObserver.observe(document.body, { childList: true, subtree: true, attributes: true });
+});
+onBeforeUnmount(() => {
+  stopDrag();
+  if (frame) cancelAnimationFrame(frame);
+  document.removeEventListener("pointermove", onPointerMove);
+  document.documentElement.removeEventListener("pointerleave", onPointerLeave);
+  document.removeEventListener("click", onClick, true);
+  document.removeEventListener("submit", onSubmit, true);
+  document.removeEventListener("keydown", onKeydown);
+  document.removeEventListener("load", scheduleMeasure, true);
+  window.removeEventListener("scroll", scheduleMeasure, { capture: true });
+  window.removeEventListener("resize", scheduleMeasure);
+  resizeObserver?.disconnect();
+  mutationObserver?.disconnect();
+});
+</script>

package/dist/runtime/app/preview/PreviewOverlay.vue.d.ts

@@ -0,0 +1,15 @@
+import type { FieldConfig } from '../../shared/index.js';
+import type { CmsPreviewFrameMessage } from '../../shared/preview.js';
+type __VLS_Props = {
+    field: FieldConfig;
+    total: number;
+    selected: number | null;
+    version: number;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    message: (message: CmsPreviewFrameMessage) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onMessage?: ((message: CmsPreviewFrameMessage) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/utils/ui.js

@@ -9,6 +9,7 @@ const FIELD_ICONS = {
   number: "hashtag",
   boolean: "check-circle",
   date: "calendar",
+  datetime: "clock",
   email: "at-symbol",
   slug: "link",
   select: "chevron-up-down",