@xleddyl/nuxt-cms 0.2.3 → 0.4.0

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/VisualEditor.d.vue.ts

@@ -1,10 +1,12 @@
 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 = {

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

@@ -75,6 +75,7 @@
 
             <div
                :id="`cms-editor-tabpanel-${activeTab}`"
+               ref="panel"
                class="cms-editor-panel-body"
                role="tabpanel"
                :aria-labelledby="tabList.length > 1 ? `cms-editor-tab-${activeTab}` : void 0"
@@ -213,6 +214,8 @@
                         :icon="fieldIcon(fields[key])"
                         :name="key"
                         :required="fields[key].required"
+                        :data-cms-field="key"
+                        :class="{ 'is-search-focus': highlighted === key }"
                      >
                         <CmsFieldInput
                            :model-value="state[key]"
@@ -267,6 +270,7 @@ import {
   toggleBlockHidden
 } from "../../../shared/preview";
 import { useCmsConfirm } from "../../composables/cms-confirm";
+import { useCmsFieldFocus } from "../../composables/cms-field-focus";
 import { useCmsRuntime } from "../../composables/cms-runtime";
 import { entryFormLayout, useCmsSettingsState } from "../../composables/cms-settings";
 import { CMS_FORM_ERRORS, fieldIcon } from "../../utils/ui";
@@ -280,7 +284,8 @@ const props = defineProps({
   fieldKey: { type: String, required: true },
   fields: { type: Object, required: true },
   title: { type: String, required: true },
-  content: { type: Boolean, required: false }
+  content: { type: Boolean, required: false },
+  focus: { type: [Object, null], required: false }
 });
 const state = defineModel("state", { type: Object, ...{ required: true } });
 const runtime = useCmsRuntime();
@@ -465,9 +470,24 @@ async function loadLibrary() {
     library.value = /* @__PURE__ */ new Map();
   }
 }
+const panel = ref(null);
+const { highlighted, reveal } = useCmsFieldFocus();
+function applyFocus(focus) {
+  if (focus.locale && i18n.locales.includes(focus.locale)) locale.value = focus.locale;
+  const key = focus.field;
+  if (!key || !Object.hasOwn(props.fields, key)) return;
+  if (key === props.fieldKey) {
+    activeTab.value = "block";
+    if (focus.block != null && focus.block < blocks.value.length) select(focus.block);
+    return;
+  }
+  activeTab.value = tabOfKey(key);
+  reveal(() => panel.value, key);
+}
 onMounted(() => {
   window.addEventListener("message", onMessage);
   void loadLibrary();
+  if (props.focus) applyFocus(props.focus);
 });
 onBeforeUnmount(() => {
   window.removeEventListener("message", onMessage);

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

@@ -1,10 +1,12 @@
 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 = {

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

@@ -1,5 +1,10 @@
 <template>
-   <CmsModal :open="open" size="sm" title="Welcome to nuxt-cms" @update:open="(v) => !v && keep()">
+   <CmsModal
+      :open="open"
+      size="sm"
+      :title="`Welcome to ${cmsBrand.title}`"
+      @update:open="(v) => !v && keep()"
+   >
       <template #body>
          <CmsForm :state="state" @submit="save">
             <p class="cms-settings-hint">
@@ -32,6 +37,7 @@
 
 <script setup>
 import { MIN_PASSWORD_LENGTH } from "#nuxt-cms";
+import { cmsBrand } from "#cms-brand";
 import { computed, ref } from "#imports";
 import { useCmsAccount } from "../../composables/cms-account";
 import { useCmsToast } from "../../composables/cms-toast";

package/dist/runtime/app/composables/cms-field-focus.d.ts

@@ -0,0 +1,4 @@
+export declare function useCmsFieldFocus(): {
+    highlighted: import("vue").Ref<string | null, string | null>;
+    reveal: (root: () => HTMLElement | null | undefined, key: string) => void;
+};

package/dist/runtime/app/composables/cms-field-focus.js

@@ -0,0 +1,20 @@
+import { nextTick, onBeforeUnmount, ref } from "#imports";
+const HIGHLIGHT_MS = 2400;
+export function useCmsFieldFocus() {
+  const highlighted = ref(null);
+  let timer;
+  function reveal(root, key) {
+    void nextTick(() => {
+      const element = root()?.querySelector(`[data-cms-field="${CSS.escape(key)}"]`);
+      if (!element) return;
+      element.scrollIntoView({ block: "center", behavior: "smooth" });
+      highlighted.value = key;
+      clearTimeout(timer);
+      timer = setTimeout(() => {
+        highlighted.value = null;
+      }, HIGHLIGHT_MS);
+    });
+  }
+  onBeforeUnmount(() => clearTimeout(timer));
+  return { highlighted, reveal };
+}

package/dist/runtime/app/layouts/cms-admin.d.vue.ts

@@ -1,6 +1,6 @@
-declare var __VLS_34: {};
+declare var __VLS_41: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_34) => any;
+    default?: (props: typeof __VLS_41) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/app/layouts/cms-admin.vue

@@ -5,11 +5,15 @@
             <div class="cms-sidebar-brand">
                <CmsBrandMark />
                <div class="cms-brand-text">
-                  <span class="cms-brand-name">nuxt-cms</span>
-                  <span class="cms-brand-meta">Content studio</span>
+                  <span class="cms-brand-name">{{ cmsBrand.title }}</span>
+                  <span v-if="cmsBrand.subtitle" class="cms-brand-meta">{{
+                     cmsBrand.subtitle
+                  }}</span>
                </div>
             </div>
 
+            <CmsSearch @open="navOpen = false" />
+
             <nav class="cms-sidebar-nav">
                <div v-for="group in groups" :key="group.title" class="cms-sidebar-group">
                   <div class="cms-label">
@@ -62,7 +66,7 @@
                   @click="navOpen = true"
                />
                <CmsBrandMark />
-               <span class="cms-brand-name">nuxt-cms</span>
+               <span class="cms-brand-name">{{ cmsBrand.title }}</span>
             </header>
             <div class="cms-main-inner">
                <slot />
@@ -80,6 +84,7 @@
 <script setup>
 import { computed, navigateTo, ref, useRoute, useUserSession, watch } from "#imports";
 import cmsConfig from "#cms-config";
+import { cmsBrand } from "#cms-brand";
 import { useCmsTheme } from "../composables/cms-theme";
 import { useCmsAccount } from "../composables/cms-account";
 import { loadCmsSettings } from "../composables/cms-settings";

package/dist/runtime/app/layouts/cms-admin.vue.d.ts

@@ -1,6 +1,6 @@
-declare var __VLS_34: {};
+declare var __VLS_41: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_34) => any;
+    default?: (props: typeof __VLS_41) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -35,6 +35,7 @@
             :entry-name="name"
             :form-id="FORM_ID"
             :loading="saving"
+            :focus="focus"
             @submit="saveSingle"
          />
       </div>
@@ -219,6 +220,7 @@ import {
   watch
 } from "#imports";
 import cmsConfig from "#cms-config";
+import { readSearchFocus } from "../../shared/search";
 import { useCmsConfirm } from "../composables/cms-confirm";
 import { useCmsRuntime } from "../composables/cms-runtime";
 import { entryListColumns, useCmsSettingsState } from "../composables/cms-settings";
@@ -234,6 +236,7 @@ definePageMeta({
 const FORM_ID = "cms-single-form";
 const route = useRoute();
 const toast = useCmsToast();
+const focus = readSearchFocus(route.query);
 const name = route.params.collection;
 const config = cmsConfig[name];
 if (!config) {

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

@@ -6,6 +6,7 @@
       :field-key="CONTENT_BODY_FIELD"
       :fields="config.fields"
       :title="headerTitle"
+      :focus="focus"
       content
    >
       <template #start>
@@ -120,6 +121,7 @@ import {
   watch
 } from "#imports";
 import cmsConfig from "#cms-config";
+import { readSearchFocus } from "../../shared/search";
 import { useCmsConfirm } from "../composables/cms-confirm";
 import { useCmsRuntime } from "../composables/cms-runtime";
 import { useCmsToast } from "../composables/cms-toast";
@@ -133,6 +135,7 @@ definePageMeta({
 const route = useRoute();
 const toast = useCmsToast();
 const confirmAction = useCmsConfirm();
+const focus = readSearchFocus(route.query);
 const { i18n } = useCmsRuntime();
 const name = String(route.meta.cmsEntry ?? route.path.split("/")[2] ?? "");
 const config = cmsConfig[name];

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

@@ -27,6 +27,7 @@
             :drafts="drafts"
             :form-id="FORM_ID"
             :loading="saving"
+            :focus="focus"
             @submit="save"
             @error="revertStatus"
          />
@@ -49,6 +50,7 @@ import {
   watch
 } from "#imports";
 import cmsConfig from "#cms-config";
+import { readSearchFocus } from "../../shared/search";
 import { useCmsConfirm } from "../composables/cms-confirm";
 import { useCmsToast } from "../composables/cms-toast";
 import { cmsApi } from "../utils/api";
@@ -62,6 +64,7 @@ definePageMeta({
 });
 const route = useRoute();
 const toast = useCmsToast();
+const focus = readSearchFocus(route.query);
 const name = route.params.collection;
 const config = cmsConfig[name];
 if (!config || config.kind !== "collection" && config.kind !== "page") {