@xleddyl/nuxt-cms 0.1.60 → 0.2.0

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

@@ -14,29 +14,72 @@
             {{ tab.label }}
          </button>
       </div>
-      <CmsFormField
-         v-for="(field, key) in visibleFields"
-         :key="key"
-         :label="field.label"
-         :name="key"
-         :required="field.required"
-      >
-         <template v-if="hasLocaleSwitch(field) && i18n.locales.length > 1" #label-actions>
-            <CmsLocaleSwitch
-               :model-value="localeFor(key)"
-               :value="
-  isTranslatableField(field) ? state[key] : null
+      <div class="cms-form-layout">
+         <div class="cms-form-main">
+            <component
+               :is="section.title ? 'section' : 'div'"
+               v-for="section in sections"
+               :key="section.id"
+               class="cms-form-section"
+               :class="{ 'is-titled': !!section.title, 'is-collapsed': isCollapsed(section) }"
+            >
+               <button
+                  v-if="section.title"
+                  type="button"
+                  class="cms-form-section-header"
+                  :aria-expanded="!isCollapsed(section)"
+                  @click="toggleSection(section.id)"
+               >
+                  <span class="cms-form-section-text">
+                     <span class="cms-form-section-title">{{ section.title }}</span>
+                     <span v-if="section.description" class="cms-form-section-description">
+                        {{ section.description }}
+                     </span>
+                  </span>
+                  <CmsIcon name="chevron-down" class="cms-form-section-chevron size-4" />
+               </button>
+               <div v-show="!isCollapsed(section)" class="cms-form-rows">
+                  <div
+                     v-for="row in section.rows"
+                     :key="row.join('|')"
+                     class="cms-form-row"
+                     :style="{ '--cms-row-cols': row.length }"
+                  >
+                     <CmsFormField
+                        v-for="key in row"
+                        :key="key"
+                        :label="fields[key].label"
+                        :description="fields[key].description"
+                        :icon="fieldIcon(fields[key])"
+                        :name="key"
+                        :required="fields[key].required"
+                     >
+                        <template
+                           v-if="hasLocaleSwitch(fields[key]) && i18n.locales.length > 1"
+                           #label-actions
+                        >
+                           <CmsLocaleSwitch
+                              :model-value="localeFor(key)"
+                              :value="
+  isTranslatableField(fields[key]) ? state[key] : null
 "
-               @update:model-value="(locale) => setLocale(key, locale)"
-            />
-         </template>
-         <CmsFieldInput
-            v-model="state[key]"
-            :field="field"
-            :locale="localeFor(key)"
-            :slug-source="field.from ? state[field.from] : void 0"
-         />
-      </CmsFormField>
+                              @update:model-value="(locale) => setLocale(key, locale)"
+                           />
+                        </template>
+                        <CmsFieldInput
+                           v-model="state[key]"
+                           :field="fields[key]"
+                           :locale="localeFor(key)"
+                           :slug-source="
+  fields[key].from ? state[fields[key].from] : void 0
+"
+                        />
+                     </CmsFormField>
+                  </div>
+               </div>
+            </component>
+         </div>
+      </div>
       <div v-if="footer" class="cms-form-actions">
          <CmsButton type="submit" label="Save" :loading="loading" />
          <CmsButton
@@ -55,14 +98,18 @@ import {
   fieldTab,
   hasTranslatableBlockFields,
   isFieldVisible,
-  isTranslatableField
+  isTranslatableField,
+  resolveFormLayout
 } from "#nuxt-cms";
-import { computed, ref, watch } from "#imports";
+import { computed, nextTick, ref, watch } from "#imports";
 import { buildEntrySchema } from "../../../shared/validation";
 import { useCmsRuntime } from "../../composables/cms-runtime";
+import { entryFormLayout, useCmsSettingsState } from "../../composables/cms-settings";
+import { fieldIcon } from "../../utils/ui";
 const props = defineProps({
   fields: { type: Object, required: true },
   tabs: { type: Array, required: false },
+  entryName: { type: String, required: false },
   drafts: { type: Boolean, required: false },
   loading: { type: Boolean, required: false },
   formId: { type: String, required: false },
@@ -77,13 +124,40 @@ const activeTab = ref(tabList.value[0]?.id ?? "");
 watch(tabList, (tabs) => {
   if (!tabs.some((tab) => tab.id === activeTab.value)) activeTab.value = tabs[0]?.id ?? "";
 });
-const visibleFields = computed(
-  () => Object.fromEntries(
-    Object.entries(props.fields).filter(
-      ([, field]) => isFieldVisible(field, state.value) && (!tabList.value.length || fieldTab(field, tabList.value) === activeTab.value)
-    )
-  )
+const settings = useCmsSettingsState();
+const fields = computed(() => props.fields);
+const layout = computed(
+  () => props.entryName ? entryFormLayout(props.entryName, settings.value, props.fields) : resolveFormLayout(props.fields, void 0)
+);
+function isShown(key) {
+  const field = props.fields[key];
+  if (!field || !isFieldVisible(field, state.value)) return false;
+  if (!tabList.value.length) return true;
+  return fieldTab(field, tabList.value) === activeTab.value;
+}
+const sections = computed(
+  () => layout.value.main.map((section, index) => ({
+    ...section,
+    id: `${index}-${section.title ?? ""}`,
+    rows: section.rows.map((row) => row.filter((key) => isShown(key))).filter((row) => row.length)
+  })).filter((section) => section.rows.length)
 );
+const toggled = ref({});
+function isCollapsed(section) {
+  if (!section.title) return false;
+  return toggled.value[section.id] ?? !!section.collapsed;
+}
+function toggleSection(id) {
+  const section = sections.value.find((s) => s.id === id);
+  if (section) toggled.value = { ...toggled.value, [id]: !isCollapsed(section) };
+}
+function revealField(key) {
+  for (const section of sections.value) {
+    if (section.rows.some((row) => row.includes(key)) && isCollapsed(section)) {
+      toggled.value = { ...toggled.value, [section.id]: false };
+    }
+  }
+}
 function onError() {
   const issue = schema.value.safeParse(state.value).error?.issues[0];
   const key = issue ? String(issue.path[0] ?? "") : "";
@@ -92,6 +166,7 @@ function onError() {
     const tab = fieldTab(field, tabList.value);
     if (tab) activeTab.value = tab;
   }
+  if (key) void nextTick(() => revealField(key));
   emit("error");
 }
 function hasLocaleSwitch(field) {

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

@@ -2,6 +2,7 @@ import type { CmsEntry, CmsTab } from '#nuxt-cms';
 type __VLS_Props = {
     fields: CmsEntry['fields'];
     tabs?: CmsTab[];
+    entryName?: string;
     drafts?: boolean;
     loading?: boolean;
     formId?: string;

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

@@ -12,16 +12,26 @@
       :locale="locale"
    />
    <CmsRichTextField v-else-if="field.type === 'richtext'" v-model="strOrNull" />
-   <CmsTextarea v-else-if="field.type === 'text' && field.textarea" v-model="str" :rows="8" />
-   <CmsInput v-else-if="field.type === 'text'" v-model="str" />
-   <CmsInput v-else-if="field.type === 'email'" v-model="str" type="email" />
+   <CmsTextarea
+      v-else-if="field.type === 'text' && field.textarea"
+      v-model="str"
+      :rows="8"
+      :placeholder="field.placeholder"
+   />
+   <CmsInput v-else-if="field.type === 'text'" v-model="str" :placeholder="field.placeholder" />
+   <CmsInput
+      v-else-if="field.type === 'email'"
+      v-model="str"
+      type="email"
+      :placeholder="field.placeholder"
+   />
    <CmsSlugField v-else-if="field.type === 'slug'" v-model="strOrNull" :source="slugSource" />
    <CmsSelectMenu
       v-else-if="field.type === 'select'"
       v-model="selValue"
       :multiple="field.multiple"
       :items="selectItems"
-      placeholder="Select…"
+      :placeholder="field.placeholder ?? 'Select\u2026'"
    />
    <CmsSwitch
       v-else-if="field.type === 'boolean'"
@@ -33,7 +43,12 @@
 "
    />
    <CmsJsonField v-else-if="field.type === 'json'" v-model="jsonValue" />
-   <CmsInput v-else-if="field.type === 'number'" v-model.number="num" type="number" />
+   <CmsInput
+      v-else-if="field.type === 'number'"
+      v-model.number="num"
+      type="number"
+      :placeholder="field.placeholder"
+   />
    <CmsInput v-else-if="field.type === 'date'" v-model="str" type="date" />
    <CmsRelationField
       v-else-if="field.type === 'relation'"

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

@@ -1,13 +1,15 @@
 type __VLS_Props = {
     label?: string;
+    icon?: string;
+    description?: string;
     name?: string;
     required?: boolean;
 };
-declare var __VLS_1: {}, __VLS_3: {};
+declare var __VLS_6: {}, __VLS_8: {};
 type __VLS_Slots = {} & {
-    'label-actions'?: (props: typeof __VLS_1) => any;
+    'label-actions'?: (props: typeof __VLS_6) => any;
 } & {
-    default?: (props: typeof __VLS_3) => any;
+    default?: (props: typeof __VLS_8) => any;
 };
 declare const __VLS_base: 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 __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -1,13 +1,17 @@
 <template>
-   <div class="cms-form-field">
+   <div class="cms-form-field" :class="{ 'is-error': error }">
       <div v-if="label || $slots['label-actions']" class="cms-form-label-row">
          <label v-if="label" class="cms-form-label">
+            <CmsIcon v-if="icon" :name="icon" class="cms-form-label-icon size-3.5" />
             {{ label }}<span v-if="required" class="cms-form-required"> *</span>
          </label>
          <slot name="label-actions" />
       </div>
       <slot />
-      <p v-if="error" class="cms-form-error">{{ error }}</p>
+      <p v-if="description" class="cms-form-description">{{ description }}</p>
+      <p v-if="error" class="cms-form-error">
+         <CmsIcon name="exclamation-circle" class="size-3.5 shrink-0" />{{ error }}
+      </p>
    </div>
 </template>
 
@@ -16,6 +20,8 @@ import { computed, inject } from "#imports";
 import { CMS_FORM_ERRORS } from "../../utils/ui";
 const props = defineProps({
   label: { type: String, required: false },
+  icon: { type: String, required: false },
+  description: { type: String, required: false },
   name: { type: String, required: false },
   required: { type: Boolean, required: false }
 });

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

@@ -1,13 +1,15 @@
 type __VLS_Props = {
     label?: string;
+    icon?: string;
+    description?: string;
     name?: string;
     required?: boolean;
 };
-declare var __VLS_1: {}, __VLS_3: {};
+declare var __VLS_6: {}, __VLS_8: {};
 type __VLS_Slots = {} & {
-    'label-actions'?: (props: typeof __VLS_1) => any;
+    'label-actions'?: (props: typeof __VLS_6) => any;
 } & {
-    default?: (props: typeof __VLS_3) => any;
+    default?: (props: typeof __VLS_8) => any;
 };
 declare const __VLS_base: 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 __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -1,5 +1,5 @@
 <template>
-   <component :is="icon" v-if="icon" class="size-5 stroke-[1.5]" />
+   <component :is="icon" v-if="icon" :data-icon="name" class="size-5 stroke-[1.5]" />
 </template>
 
 <script setup>

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

@@ -0,0 +1,16 @@
+import type { MediaItem } from '#nuxt-cms';
+import type { CmsMediaLibrary } from '../../composables/cms-media-library.js';
+type __VLS_Props = {
+    item: MediaItem | null;
+    library: CmsMediaLibrary;
+    readOnly: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    delete: (item: MediaItem) => any;
+    close: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onDelete?: ((item: MediaItem) => any) | undefined;
+    onClose?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,169 @@
+<template>
+   <CmsDrawer :open="!!item" :title="item ? mediaFilename(item.key) : ''" @close="emit('close')">
+      <div v-if="item" class="cms-media-detail">
+         <div class="cms-media-detail-preview">
+            <img v-if="item.type === 'image' && item.url" :src="item.url" :alt="item.alt ?? ''" />
+            <video
+               v-else-if="item.type === 'video' && item.url"
+               :src="item.url"
+               controls
+               preload="metadata"
+               playsinline
+            />
+            <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"
+            />
+            <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>
+         </div>
+
+         <dl class="cms-media-detail-facts">
+            <template v-for="fact in facts" :key="fact.label">
+               <dt>{{ fact.label }}</dt>
+               <dd :class="{ 'is-mono': fact.mono }" :title="fact.value">{{ fact.value }}</dd>
+            </template>
+         </dl>
+
+         <div class="cms-form">
+            <CmsFormField label="Alt text">
+               <CmsInput
+                  v-model="alt"
+                  placeholder="Describe the image for screen readers"
+                  @keydown.enter.prevent="save"
+               />
+            </CmsFormField>
+            <CmsFormField v-if="!readOnly" label="Folder">
+               <CmsMediaFolderPicker v-model="folder" :folders="folders" />
+            </CmsFormField>
+         </div>
+
+         <section class="cms-media-detail-usage">
+            <h3 class="cms-media-section-title">Used in</h3>
+            <CmsSpinner v-if="usageLoading" />
+            <p v-else-if="usageList === null" class="cms-form-hint">
+               Could not check where this file is used.
+            </p>
+            <p v-else-if="!usageList.length" class="cms-form-hint">Not used in any entry.</p>
+            <ul v-else class="cms-media-usage-list">
+               <li v-for="(entry, index) in usageList" :key="index">
+                  <NuxtLink
+                     :to="usageLink(entry)"
+                     class="cms-media-usage-link"
+                     @click="emit('close')"
+                  >
+                     <span class="cms-media-usage-title">{{ entry.title ?? entry.label }}</span>
+                     <span class="cms-media-usage-meta">{{ entry.label }} · {{ entry.field }}</span>
+                  </NuxtLink>
+               </li>
+            </ul>
+         </section>
+      </div>
+
+      <template #footer>
+         <CmsButton
+            v-if="!readOnly"
+            label="Delete"
+            icon="trash"
+            variant="ghost"
+            color="error"
+            @click="item && emit('delete', item)"
+         />
+         <span v-else />
+         <div class="cms-actions">
+            <CmsButton label="Close" variant="ghost" color="neutral" @click="emit('close')" />
+            <CmsButton label="Save" :loading="saving" :disabled="!dirty" @click="save" />
+         </div>
+      </template>
+   </CmsDrawer>
+</template>
+
+<script setup>
+import { computed, ref, watch } from "#imports";
+import { formatFileSize, mediaFilename, mediaIconFor } from "#nuxt-cms";
+import { usageLink } from "../../composables/cms-media-library";
+const props = defineProps({
+  item: { type: [Object, null], required: true },
+  library: { type: null, required: true },
+  readOnly: { type: Boolean, required: true }
+});
+const emit = defineEmits(["close", "delete"]);
+const folders = computed(() => props.library.folders.value);
+const alt = ref("");
+const folder = ref(null);
+const saving = ref(false);
+const copied = ref(false);
+const usageList = ref([]);
+const usageLoading = ref(false);
+watch(
+  () => props.item?.key,
+  async (key) => {
+    if (!props.item || !key) return;
+    alt.value = props.item.alt ?? "";
+    folder.value = props.item.folder ?? null;
+    copied.value = false;
+    usageLoading.value = true;
+    const usage = await props.library.usage([key]);
+    if (props.item?.key !== key) return;
+    usageList.value = usage ? usage[key] ?? [] : null;
+    usageLoading.value = false;
+  },
+  { immediate: true }
+);
+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 facts = computed(() => {
+  const item = props.item;
+  if (!item) return [];
+  const list = [
+    { label: "Folder", value: item.folder ?? "Library root" },
+    { label: "Type", value: item.mime ?? item.type }
+  ];
+  if (item.size != null) list.push({ label: "Size", value: formatFileSize(item.size) });
+  if (item.width && item.height) {
+    list.push({ label: "Dimensions", value: `${item.width} \xD7 ${item.height}` });
+  }
+  if (item.createdAt) {
+    list.push({ label: "Uploaded", value: new Date(item.createdAt).toLocaleString() });
+  }
+  list.push({ label: "Key", value: item.key, mono: true });
+  return list;
+});
+async function copyUrl() {
+  if (!props.item?.url) return;
+  const url = new URL(props.item.url, window.location.origin).toString();
+  try {
+    await navigator.clipboard.writeText(url);
+    copied.value = true;
+    setTimeout(() => copied.value = false, 1500);
+  } catch {
+    copied.value = false;
+  }
+}
+async function save() {
+  if (!props.item || !dirty.value || saving.value) return;
+  saving.value = true;
+  const ok = await props.library.updateItem(props.item.key, {
+    alt: alt.value.trim() || null,
+    ...props.readOnly ? {} : { folder: folder.value }
+  });
+  saving.value = false;
+  if (ok) emit("close");
+}
+</script>

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

@@ -0,0 +1,16 @@
+import type { MediaItem } from '#nuxt-cms';
+import type { CmsMediaLibrary } from '../../composables/cms-media-library.js';
+type __VLS_Props = {
+    item: MediaItem | null;
+    library: CmsMediaLibrary;
+    readOnly: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    delete: (item: MediaItem) => any;
+    close: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onDelete?: ((item: MediaItem) => any) | undefined;
+    onClose?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -55,13 +55,19 @@
 
    <CmsModal v-model:open="galleryOpen" title="Media" size="lg">
       <template #body>
-         <CmsMediaGallery selectable :media-type="mediaType" :accept="accept" @select="onSelect" />
+         <CmsMediaGallery
+            v-model:folder="pickerFolder"
+            selectable
+            :media-type="mediaType"
+            :accept="accept"
+            @select="onSelect"
+         />
       </template>
    </CmsModal>
 </template>
 
 <script setup>
-import { computed, ref } from "#imports";
+import { computed, ref, useState } from "#imports";
 import { mediaFilename, mediaIconFor, mediaPublicUrl, mediaTypeForKey } from "#nuxt-cms";
 import { useCmsMediaKeys } from "../../composables/cms-media-keys";
 import { useCmsRuntime } from "../../composables/cms-runtime";
@@ -73,6 +79,7 @@ const model = defineModel({ type: [String, null], ...{ required: true } });
 const { mediaBaseUrl } = useCmsRuntime();
 const mediaKeys = useCmsMediaKeys();
 const galleryOpen = ref(false);
+const pickerFolder = useState("cms-media-picker-folder", () => null);
 function onSelect(item) {
   mediaKeys.remember(item.key);
   model.value = item.key;

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

@@ -1,5 +1,7 @@
 type __VLS_Props = {
     folders: string[];
+    exclude?: string | null;
+    disabled?: (string | null)[];
 };
 type __VLS_ModelProps = {
     modelValue?: string | null;
@@ -7,10 +9,8 @@ type __VLS_ModelProps = {
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: string | null) => any;
-    create: (folder: string) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: string | null) => any) | undefined;
-    onCreate?: ((folder: string) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;