@xleddyl/nuxt-cms 0.2.1 → 0.2.3

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

@@ -10,6 +10,8 @@
       v-model="blocksValue"
       :field="field"
       :locale="locale"
+      :entry-name="entryName"
+      :field-key="fieldKey"
    />
    <CmsRichTextField v-else-if="field.type === 'richtext'" v-model="strOrNull" />
    <CmsTextarea
@@ -50,6 +52,7 @@
       :placeholder="field.placeholder"
    />
    <CmsInput v-else-if="field.type === 'date'" v-model="str" type="date" />
+   <CmsInput v-else-if="field.type === 'datetime'" v-model="localDateTime" type="datetime-local" />
    <CmsRelationField
       v-else-if="field.type === 'relation'"
       v-model="relationValue"
@@ -66,7 +69,9 @@ import { computed } from "#imports";
 const props = defineProps({
   field: { type: Object, required: true },
   slugSource: { type: [String, null], required: false },
-  locale: { type: String, required: false }
+  locale: { type: String, required: false },
+  entryName: { type: String, required: false },
+  fieldKey: { type: String, required: false }
 });
 const model = defineModel({ type: null, ...{ required: true } });
 const selectItems = computed(() => [
@@ -97,6 +102,18 @@ const translatable = proxy((v) => v);
 const blocksValue = proxy(
   (v) => v
 );
+function toLocalDateTime(value) {
+  if (typeof value !== "string" || !value) return "";
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return "";
+  return new Date(date.getTime() - date.getTimezoneOffset() * 6e4).toISOString().slice(0, 16);
+}
+function fromLocalDateTime(value) {
+  if (!value) return null;
+  const date = new Date(value);
+  return Number.isNaN(date.getTime()) ? null : date.toISOString();
+}
+const localDateTime = proxy(toLocalDateTime, fromLocalDateTime);
 const relationValue = proxy((v) => v);
 const jsonValue = proxy((v) => v);
 </script>

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/MediaGallery.vue

@@ -336,6 +336,19 @@
                      <div v-if="query && item.folder" class="cms-media-folder">
                         <CmsIcon name="folder" class="size-3" />{{ item.folder }}
                      </div>
+                     <span
+                        v-if="!selectable"
+                        class="cms-media-usage-badge"
+                        :class="{ 'is-unused': usageCount(item.key) === 0 }"
+                     >
+                        <template v-if="usageCount(item.key) !== null">
+                           <CmsIcon
+                              :name="usageCount(item.key) ? 'link' : 'link-slash'"
+                              class="size-3"
+                           />{{ usageLabel(item.key) }}
+                        </template>
+                        <template v-else>&nbsp;</template>
+                     </span>
                   </div>
                </div>
             </div>
@@ -378,6 +391,18 @@
                         <CmsIcon name="folder" class="size-3" />{{ item.folder }}
                      </span>
                   </span>
+                  <span v-if="!selectable" class="cms-media-row-cell is-usage">
+                     <span
+                        v-if="usageCount(item.key) !== null"
+                        class="cms-media-usage-badge"
+                        :class="{ 'is-unused': usageCount(item.key) === 0 }"
+                     >
+                        <CmsIcon
+                           :name="usageCount(item.key) ? 'link' : 'link-slash'"
+                           class="size-3"
+                        />{{ usageLabel(item.key) }}
+                     </span>
+                  </span>
                   <span class="cms-media-row-cell is-mono">{{ extension(item.key) }}</span>
                   <span class="cms-media-row-cell">{{
                      item.size != null ? formatFileSize(item.size) : ""
@@ -556,13 +581,15 @@ import {
   mediaFolderName,
   mediaFolderParent,
   mediaIconFor,
+  groupMediaUsage,
+  mediaUsageGroups,
   mediaTypeAccept,
   mediaTypeFilter,
   rebaseMediaFolder,
   slugify
 } from "#nuxt-cms";
 import { useCmsConfirm } from "../../composables/cms-confirm";
-import { useCmsMediaLibrary, usageSummary } from "../../composables/cms-media-library";
+import { useCmsMediaLibrary, usageLink } from "../../composables/cms-media-library";
 import {
   uploadTreeFromDrop,
   uploadTreeFromFiles,
@@ -707,6 +734,35 @@ watch(visibleFiles, (list) => {
 const paged = computed(
   () => visibleFiles.value.slice((page.value - 1) * PAGE_SIZE, page.value * PAGE_SIZE)
 );
+const usageByKey = ref({});
+let usageRequest = 0;
+watch(
+  () => [props.selectable, library.loading.value, paged.value],
+  async ([selectable, loading, items]) => {
+    const request = ++usageRequest;
+    if (selectable || loading || !items.length) return;
+    const usage = await library.usage(items.map((item) => item.key));
+    if (request !== usageRequest) return;
+    usageByKey.value = usage ?? {};
+  },
+  { immediate: true }
+);
+const usageCounts = computed(
+  () => new Map(
+    Object.entries(usageByKey.value).map(([key, list]) => [key, groupMediaUsage(list).length])
+  )
+);
+function usageCount(key) {
+  return usageCounts.value.get(key) ?? null;
+}
+function entriesLabel(count) {
+  return `${count} entr${count === 1 ? "y" : "ies"}`;
+}
+function usageLabel(key) {
+  const count = usageCount(key);
+  if (count === null) return "";
+  return count ? `Used in ${entriesLabel(count)}` : "Unused";
+}
 const emptyState = computed(() => {
   if (query.value) {
     return {
@@ -890,6 +946,31 @@ async function renameFolder() {
   renameOpen.value = false;
   openFolder(to);
 }
+async function confirmDelete(keys, question, title) {
+  const usage = await library.usage(keys);
+  const groups = usage ? mediaUsageGroups(usage, keys) : [];
+  if (!groups.length) {
+    const warning = usage ? "" : " Could not check where the files are used.";
+    return confirmAction(`${question}${warning}`, { title, confirmLabel: "Delete" });
+  }
+  const single = keys.length === 1;
+  const usedIn = single ? `This file is used in ${entriesLabel(groups[0].entries.length)}.` : `${groups.length} of ${keys.length} files are used in your content.`;
+  return confirmAction(
+    `${question} ${usedIn} Deleting ${single ? "it" : "them"} leaves broken links there.`,
+    {
+      title: single ? "File in use" : "Files in use",
+      confirmLabel: "Delete anyway",
+      groups: groups.map((group) => ({
+        title: group.key,
+        links: group.entries.map((entry) => ({
+          title: entry.title ?? entry.label,
+          meta: `${entry.label} \xB7 ${entry.fields.join(", ")}`,
+          to: usageLink(entry)
+        }))
+      }))
+    }
+  );
+}
 async function removeFolder(path) {
   const files = library.itemsWithin(path);
   const subfolders = library.folders.value.filter(
@@ -898,10 +979,12 @@ async function removeFolder(path) {
   const contents = [];
   if (subfolders) contents.push(`${subfolders} subfolder${subfolders > 1 ? "s" : ""}`);
   if (files.length) contents.push(`${files.length} file${files.length > 1 ? "s" : ""}`);
-  const keys = files.map((item) => item.key);
-  const summary = usageSummary(await library.usage(keys), keys);
-  const message = contents.length ? `Delete "${mediaFolderName(path)}" with ${contents.join(" and ")}? ${summary}` : `Delete the empty folder "${mediaFolderName(path)}"?`;
-  if (!await confirmAction(message.trim(), { title: "Delete folder", confirmLabel: "Delete" }))
+  const question = contents.length ? `Delete "${mediaFolderName(path)}" with ${contents.join(" and ")}?` : `Delete the empty folder "${mediaFolderName(path)}"?`;
+  if (!await confirmDelete(
+    files.map((item) => item.key),
+    question,
+    "Delete folder"
+  ))
     return;
   const ok = await run(() => library.deleteFolder(path));
   if (ok && folder.value && isWithinMediaFolder(folder.value, path)) {
@@ -911,13 +994,8 @@ async function removeFolder(path) {
 async function removeItems(items) {
   if (!items.length) return;
   const keys = items.map((item) => item.key);
-  const summary = usageSummary(await library.usage(keys), keys);
   const question = keys.length === 1 ? `Delete "${mediaFilename(keys[0])}"?` : `Delete ${keys.length} files?`;
-  if (!await confirmAction(`${question} ${summary}`.trim(), {
-    title: "Delete",
-    confirmLabel: "Delete"
-  }))
-    return;
+  if (!await confirmDelete(keys, question, "Delete")) return;
   const ok = await run(() => library.deleteItems(keys));
   if (!ok) return;
   if (detailKey.value && keys.includes(detailKey.value)) detailKey.value = null;

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

@@ -1,7 +1,5 @@
 <template>
    <Teleport to="body">
-      <!-- Wrapped in .cms-scope so the vendored Tailwind utilities still apply
-           once teleported outside the admin layout root. -->
       <Transition name="cms-modal">
          <div v-if="open" class="cms-scope cms-overlay" @click.self="close">
             <div

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,37 @@
+import type { FieldConfig } from '#nuxt-cms';
+type __VLS_Props = {
+    entryName: string;
+    fieldKey: string;
+    fields: Record<string, FieldConfig>;
+    title: string;
+    content?: boolean;
+};
+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;
+    };
+};