@xleddyl/nuxt-cms 0.2.2 → 0.3.0

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

@@ -3,6 +3,8 @@ type __VLS_Props = {
     field: FieldConfig;
     slugSource?: string | null;
     locale?: string;
+    entryName?: string;
+    fieldKey?: string;
 };
 type __VLS_ModelProps = {
     modelValue: unknown;

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

@@ -13,22 +13,31 @@
             <CmsIcon v-else :name="mediaIconFor(item.type)" class="size-12" />
          </div>
 
-         <div v-if="item.url" class="cms-actions">
-            <CmsButton
-               :label="copied ? 'Copied' : 'Copy URL'"
-               :icon="copied ? 'check' : 'clipboard-document'"
-               variant="soft"
-               color="neutral"
-               size="sm"
-               @click="copyUrl"
-            />
+         <div class="cms-actions">
+            <template v-if="item.url">
+               <CmsButton
+                  :label="copied ? 'Copied' : 'Copy URL'"
+                  :icon="copied ? 'check' : 'clipboard-document'"
+                  variant="soft"
+                  color="neutral"
+                  size="sm"
+                  @click="copyUrl"
+               />
+               <a
+                  :href="item.url"
+                  target="_blank"
+                  rel="noopener"
+                  class="cms-btn cms-btn-sm cms-btn-neutral cms-btn-ghost"
+               >
+                  <CmsIcon name="arrow-top-right-on-square" class="size-4 shrink-0" />Open
+               </a>
+            </template>
             <a
-               :href="item.url"
-               target="_blank"
-               rel="noopener"
+               :href="downloadHref"
+               download
                class="cms-btn cms-btn-sm cms-btn-neutral cms-btn-ghost"
             >
-               <CmsIcon name="arrow-top-right-on-square" class="size-4 shrink-0" />Open
+               <CmsIcon name="arrow-down-tray" class="size-4 shrink-0" />Download
             </a>
          </div>
 
@@ -128,6 +137,9 @@ const dirty = computed(() => {
   if (!props.item) return false;
   return (alt.value.trim() || null) !== (props.item.alt ?? null) || !props.readOnly && folder.value !== (props.item.folder ?? null);
 });
+const downloadHref = computed(
+  () => props.item ? `/api/cms/admin/media/download?key=${encodeURIComponent(props.item.key)}` : ""
+);
 const facts = computed(() => {
   const item = props.item;
   if (!item) return [];

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

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

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

@@ -0,0 +1,347 @@
+<template>
+   <button
+      ref="trigger"
+      type="button"
+      class="cms-search-trigger"
+      aria-haspopup="dialog"
+      :aria-expanded="open"
+      aria-keyshortcuts="Meta+K Control+K"
+      @click="show"
+   >
+      <CmsIcon name="magnifying-glass" class="cms-search-trigger-icon size-4 shrink-0" />
+      <span class="cms-search-trigger-text">Search</span>
+      <kbd class="cms-kbd">{{ shortcut }}</kbd>
+   </button>
+
+   <Teleport to="body">
+      <Transition name="cms-modal">
+         <div v-if="open" class="cms-scope cms-overlay cms-search-overlay" @click.self="close">
+            <div
+               class="cms-modal cms-search"
+               role="dialog"
+               aria-modal="true"
+               aria-labelledby="cms-search-label"
+            >
+               <div class="cms-search-bar">
+                  <label id="cms-search-label" for="cms-search-input" class="sr-only">
+                     Search the CMS
+                  </label>
+                  <CmsIcon name="magnifying-glass" class="cms-search-bar-icon size-5 shrink-0" />
+                  <input
+                     id="cms-search-input"
+                     ref="input"
+                     v-model="query"
+                     type="text"
+                     role="combobox"
+                     class="cms-search-input"
+                     placeholder="Search content, fields and pages"
+                     autocomplete="off"
+                     spellcheck="false"
+                     aria-autocomplete="list"
+                     aria-controls="cms-search-results"
+                     :aria-expanded="hits.length > 0"
+                     :aria-activedescendant="activeId"
+                     @keydown="onKeydown"
+                  />
+                  <CmsSpinner v-if="loading" />
+                  <kbd class="cms-kbd">Esc</kbd>
+               </div>
+
+               <div class="cms-search-body">
+                  <p v-if="hint" class="cms-search-hint">{{ hint }}</p>
+                  <div
+                     id="cms-search-results"
+                     role="listbox"
+                     aria-labelledby="cms-search-label"
+                     class="cms-search-results"
+                  >
+                     <div
+                        v-for="(group, groupIndex) in groups"
+                        :key="group.key"
+                        role="group"
+                        :aria-labelledby="`cms-search-group-${groupIndex}`"
+                        class="cms-search-group"
+                     >
+                        <div :id="`cms-search-group-${groupIndex}`" class="cms-search-group-title">
+                           <span>{{ group.label }}</span>
+                           <span class="cms-search-group-kind">{{ KIND_LABELS[group.kind] }}</span>
+                        </div>
+                        <div
+                           v-for="item in group.items"
+                           :id="optionId(item.index)"
+                           :key="item.index"
+                           role="option"
+                           class="cms-search-option"
+                           :class="{ 'is-active': item.index === active }"
+                           :aria-selected="item.index === active"
+                           @mousemove="active = item.index"
+                           @click="go(item.hit)"
+                        >
+                           <CmsIcon
+                              :name="iconOf(item.hit)"
+                              class="cms-search-option-icon size-4 shrink-0"
+                           />
+                           <span class="cms-search-option-text">
+                              <template v-if="isValueHit(item.hit)">
+                                 <span class="cms-search-option-head">
+                                    <span class="cms-search-option-title">
+                                       {{ item.hit.title ?? item.hit.entryLabel }}
+                                    </span>
+                                    <span v-if="item.hit.fieldLabel" class="cms-search-option-meta">
+                                       {{ item.hit.fieldLabel }}
+                                    </span>
+                                    <span v-if="item.hit.locale" class="cms-badge is-muted">
+                                       {{ item.hit.locale }}
+                                    </span>
+                                 </span>
+                                 <span class="cms-search-snippet">
+                                    {{ item.hit.snippet.before
+                                    }}<mark class="cms-search-mark">{{
+                                       item.hit.snippet.match
+                                    }}</mark
+                                    >{{ item.hit.snippet.after }}
+                                 </span>
+                              </template>
+                              <template v-else>
+                                 <span class="cms-search-option-title">
+                                    {{ item.hit.snippet.before
+                                    }}<mark class="cms-search-mark">{{
+                                       item.hit.snippet.match
+                                    }}</mark
+                                    >{{ item.hit.snippet.after }}
+                                 </span>
+                                 <span class="cms-search-option-meta">{{
+                                    labelMeta(item.hit)
+                                 }}</span>
+                              </template>
+                           </span>
+                        </div>
+                     </div>
+                  </div>
+                  <p v-if="truncated" class="cms-search-hint">
+                     Showing the first results. Type more to narrow them down.
+                  </p>
+               </div>
+
+               <div class="cms-search-footer" aria-hidden="true">
+                  <span><kbd class="cms-kbd">↑</kbd><kbd class="cms-kbd">↓</kbd> to move</span>
+                  <span><kbd class="cms-kbd">↵</kbd> to open</span>
+                  <span><kbd class="cms-kbd">Esc</kbd> to close</span>
+               </div>
+               <p class="sr-only" aria-live="polite">{{ status }}</p>
+            </div>
+         </div>
+      </Transition>
+   </Teleport>
+</template>
+
+<script setup>
+import { computed, navigateTo, nextTick, onBeforeUnmount, onMounted, ref, watch } from "#imports";
+import { isSearchableQuery, normalizeSearchQuery } from "../../../shared/search";
+import { useCmsOverlay } from "../../composables/cms-overlay";
+import { cmsApi } from "../../utils/api";
+const DEBOUNCE_MS = 180;
+const KIND_LABELS = {
+  collection: "Collection",
+  single: "Single",
+  content: "Content",
+  page: "Pages",
+  media: "Library"
+};
+const KIND_ICONS = {
+  collection: "square-3-stack-3d",
+  single: "document-text",
+  content: "newspaper",
+  page: "window",
+  media: "photo"
+};
+const TYPE_LABELS = {
+  entry: "Section",
+  page: "Page",
+  tab: "Tab",
+  field: "Field",
+  block: "Block",
+  value: "Value",
+  media: "Media"
+};
+const TYPE_ICONS = {
+  page: "window",
+  tab: "rectangle-group",
+  field: "tag",
+  block: "squares-2x2",
+  value: "bars-3-bottom-left",
+  media: "photo"
+};
+const emit = defineEmits(["open"]);
+const open = ref(false);
+const query = ref("");
+const hits = ref([]);
+const truncated = ref(false);
+const loading = ref(false);
+const failed = ref(false);
+const searched = ref("");
+const active = ref(0);
+const shortcut = ref("Ctrl K");
+const trigger = ref(null);
+const input = ref(null);
+let timer;
+let request = 0;
+let returnFocus = null;
+const groups = computed(() => {
+  const map = /* @__PURE__ */ new Map();
+  hits.value.forEach((hit, index2) => {
+    const key = hit.collection ?? hit.kind;
+    let group = map.get(key);
+    if (!group) {
+      group = { key, label: hit.entryLabel, kind: hit.kind, items: [] };
+      map.set(key, group);
+    }
+    group.items.push({ hit, index: index2 });
+  });
+  const ordered = [...map.values()];
+  let index = 0;
+  for (const group of ordered) {
+    for (const item of group.items) item.index = index++;
+  }
+  return ordered;
+});
+const flat = computed(() => groups.value.flatMap((group) => group.items.map((item) => item.hit)));
+const activeId = computed(() => flat.value.length ? optionId(active.value) : void 0);
+const hint = computed(() => {
+  if (!isSearchableQuery(query.value)) return "Type at least 2 characters to search.";
+  if (failed.value) return "Search failed. Try again.";
+  if (!loading.value && searched.value && !flat.value.length) {
+    return `No results for "${searched.value}".`;
+  }
+  return "";
+});
+const status = computed(() => {
+  if (hint.value) return hint.value;
+  if (loading.value) return "Searching";
+  return `${flat.value.length} results`;
+});
+function optionId(index) {
+  return `cms-search-option-${index}`;
+}
+function isValueHit(hit) {
+  return hit.type === "value" || hit.type === "media";
+}
+function iconOf(hit) {
+  return hit.type === "entry" ? KIND_ICONS[hit.kind] : TYPE_ICONS[hit.type] ?? "tag";
+}
+function labelMeta(hit) {
+  const parts = [TYPE_LABELS[hit.type]];
+  if (hit.title) parts.push(hit.title);
+  if (hit.fieldLabel && hit.type !== "tab") parts.push(hit.fieldLabel);
+  if (hit.type === "page" && hit.id) parts.push(hit.to);
+  return parts.join(" \xB7 ");
+}
+async function run(term) {
+  const current = ++request;
+  loading.value = true;
+  failed.value = false;
+  try {
+    const response = await cmsApi("/api/cms/search", { query: { q: term } });
+    if (current !== request) return;
+    hits.value = response.hits;
+    truncated.value = response.truncated;
+    searched.value = response.query;
+    active.value = 0;
+  } catch {
+    if (current !== request) return;
+    hits.value = [];
+    truncated.value = false;
+    failed.value = true;
+  } finally {
+    if (current === request) loading.value = false;
+  }
+}
+watch(query, (value) => {
+  clearTimeout(timer);
+  const term = normalizeSearchQuery(value);
+  if (!isSearchableQuery(term)) {
+    request++;
+    hits.value = [];
+    truncated.value = false;
+    loading.value = false;
+    failed.value = false;
+    searched.value = "";
+    return;
+  }
+  timer = setTimeout(() => run(term), DEBOUNCE_MS);
+});
+watch(active, (index) => {
+  void nextTick(
+    () => document.getElementById(optionId(index))?.scrollIntoView({ block: "nearest" })
+  );
+});
+function focusInput() {
+  void nextTick(() => {
+    input.value?.focus();
+    input.value?.select();
+  });
+}
+function show() {
+  if (open.value) {
+    focusInput();
+    return;
+  }
+  returnFocus = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+  emit("open");
+  open.value = true;
+}
+function close() {
+  open.value = false;
+}
+const overlay = useCmsOverlay(close);
+watch(open, (value) => {
+  if (value) {
+    overlay.activate();
+    focusInput();
+  } else {
+    overlay.deactivate();
+    const target = returnFocus ?? trigger.value;
+    returnFocus = null;
+    void nextTick(() => target?.focus());
+  }
+});
+function go(hit) {
+  if (!hit) return;
+  returnFocus = null;
+  close();
+  void navigateTo(hit.to);
+}
+function onKeydown(event) {
+  const count = flat.value.length;
+  if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+    event.preventDefault();
+    if (!count) return;
+    const step = event.key === "ArrowDown" ? 1 : -1;
+    active.value = (active.value + step + count) % count;
+  } else if (event.key === "Home" && count && event.ctrlKey) {
+    event.preventDefault();
+    active.value = 0;
+  } else if (event.key === "End" && count && event.ctrlKey) {
+    event.preventDefault();
+    active.value = count - 1;
+  } else if (event.key === "Enter") {
+    event.preventDefault();
+    go(flat.value[active.value]);
+  }
+}
+function onGlobalKeydown(event) {
+  if (event.key.toLowerCase() !== "k" || event.altKey || event.shiftKey) return;
+  if (!event.metaKey && !event.ctrlKey) return;
+  event.preventDefault();
+  show();
+}
+onMounted(() => {
+  const platform = navigator.userAgentData?.platform ?? navigator.platform ?? navigator.userAgent;
+  if (/mac|iphone|ipad|ipod/i.test(platform)) shortcut.value = "\u2318K";
+  document.addEventListener("keydown", onGlobalKeydown);
+});
+onBeforeUnmount(() => {
+  clearTimeout(timer);
+  document.removeEventListener("keydown", onGlobalKeydown);
+});
+</script>

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

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

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

@@ -69,7 +69,8 @@ import { errorMessage } from "../../utils/ui";
 const KIND_LABELS = {
   collection: "Collection",
   single: "Single",
-  page: "Pages"
+  page: "Pages",
+  content: "Content"
 };
 const STATUS_LABELS = {
   idle: "Changes save automatically",
@@ -85,7 +86,7 @@ const toast = useCmsToast();
 const entry = computed(() => cmsConfig[props.name]);
 const fields = computed(() => entryFields(props.name));
 const parts = computed(() => [
-  ...entry.value.kind === "collection" ? [{ id: "columns", label: "Table columns" }] : [],
+  ...entry.value.kind === "collection" || entry.value.kind === "content" ? [{ id: "columns", label: "Table columns" }] : [],
   { id: "layout", label: "Form layout" }
 ]);
 const activePart = ref(parts.value[0].id);

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

@@ -144,7 +144,8 @@ const emit = defineEmits(["logout"]);
 const KIND_ICONS = {
   collection: "square-3-stack-3d",
   single: "document-text",
-  page: "window"
+  page: "window",
+  content: "newspaper"
 };
 const ENTRY_PREFIX = "entry:";
 const entries = Object.entries(cmsConfig).map(([name, entry]) => ({

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

@@ -1,5 +1,7 @@
 type __VLS_Props = {
     published?: boolean;
+    scheduled?: boolean;
+    at?: string;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

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

@@ -1,11 +1,17 @@
 <template>
-   <span class="cms-badge" :class="published ? 'is-published' : 'is-draft'">
-      {{ published ? "Published" : "Draft" }}
+   <span
+      class="cms-badge"
+      :class="scheduled ? 'is-scheduled' : published ? 'is-published' : 'is-draft'"
+      :title="scheduled && at ? `Goes live ${at}` : void 0"
+   >
+      {{ scheduled ? "Scheduled" : published ? "Published" : "Draft" }}
    </span>
 </template>
 
 <script setup>
 defineProps({
-  published: { type: Boolean, required: false }
+  published: { type: Boolean, required: false },
+  scheduled: { type: Boolean, required: false },
+  at: { type: String, required: false }
 });
 </script>

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

@@ -1,5 +1,7 @@
 type __VLS_Props = {
     published?: boolean;
+    scheduled?: boolean;
+    at?: string;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

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

@@ -0,0 +1,39 @@
+import type { FieldConfig } from '#nuxt-cms';
+import type { CmsSearchFocus } from '../../../shared/search.js';
+type __VLS_Props = {
+    entryName: string;
+    fieldKey: string;
+    fields: Record<string, FieldConfig>;
+    title: string;
+    content?: boolean;
+    focus?: CmsSearchFocus | null;
+};
+declare function validate(): boolean;
+type __VLS_ModelProps = {
+    'state': Record<string, unknown>;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_1: {}, __VLS_3: {}, __VLS_15: {};
+type __VLS_Slots = {} & {
+    start?: (props: typeof __VLS_1) => any;
+} & {
+    status?: (props: typeof __VLS_3) => any;
+} & {
+    actions?: (props: typeof __VLS_15) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
+    validate: typeof validate;
+    locale: import("vue").Ref<string, string>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:state": (value: Record<string, unknown>) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:state"?: ((value: Record<string, unknown>) => 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;
+    };
+};