@xleddyl/nuxt-cms 0.4.2 → 0.4.3

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

@@ -3,6 +3,7 @@ type __VLS_Props = {
     collection: string;
     config: CmsEntry;
     entryId: string | null;
+    initial?: Record<string, unknown> | null;
 };
 type __VLS_ModelProps = {
     'open'?: boolean;
@@ -11,10 +12,12 @@ type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     saved: () => any;
     deleted: () => any;
+    duplicate: (values: Record<string, unknown>) => any;
     "update:open": (value: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     onSaved?: (() => any) | undefined;
     onDeleted?: (() => any) | undefined;
+    onDuplicate?: ((values: Record<string, unknown>) => any) | undefined;
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

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

@@ -9,6 +9,7 @@ type __VLS_Props = {
     formId?: string;
     footer?: boolean;
     focus?: CmsSearchFocus | null;
+    path?: string;
 };
 type __VLS_ModelProps = {
     modelValue: Record<string, unknown>;

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

@@ -4,6 +4,7 @@
       ref="form"
       :state="state"
       :schema="schema"
+      :warnings="warnings"
       @submit="emit('submit')"
       @error="onError"
    >
@@ -112,7 +113,8 @@ import {
   slugSourceValue
 } from "#nuxt-cms";
 import { computed, nextTick, onMounted, ref, watch } from "#imports";
-import { buildEntrySchema } from "../../../shared/validation";
+import cmsConfig from "#cms-config";
+import { buildEntrySchema, entryValidationWarnings } from "../../../shared/validation";
 import { useCmsFieldFocus } from "../../composables/cms-field-focus";
 import { useCmsRuntime } from "../../composables/cms-runtime";
 import { entryFormLayout, useCmsSettingsState } from "../../composables/cms-settings";
@@ -125,7 +127,8 @@ const props = defineProps({
   loading: { type: Boolean, required: false },
   formId: { type: String, required: false },
   footer: { type: Boolean, required: false, default: true },
-  focus: { type: [Object, null], required: false }
+  focus: { type: [Object, null], required: false },
+  path: { type: String, required: false }
 });
 const state = defineModel({ type: Object, ...{ required: true } });
 const emit = defineEmits(["submit", "error"]);
@@ -193,9 +196,23 @@ function localeFor(key) {
 function setLocale(key, locale) {
   activeLocale.value = { ...activeLocale.value, [key]: locale };
 }
+const validate = computed(
+  () => props.entryName ? cmsConfig[props.entryName]?.validate : void 0
+);
 const schema = computed(
-  () => buildEntrySchema({ fields: props.fields, drafts: props.drafts }, i18n)
+  () => buildEntrySchema(
+    { fields: props.fields, drafts: props.drafts, validate: validate.value, path: props.path },
+    i18n
+  )
 );
+function warnings(values) {
+  return entryValidationWarnings(
+    { fields: props.fields, validate: validate.value },
+    values,
+    i18n,
+    props.path
+  );
+}
 const published = computed({
   get: () => state.value.status === "published",
   set: (value) => {

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

@@ -9,6 +9,7 @@ type __VLS_Props = {
     formId?: string;
     footer?: boolean;
     focus?: CmsSearchFocus | null;
+    path?: string;
 };
 type __VLS_ModelProps = {
     modelValue: Record<string, unknown>;

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

@@ -64,7 +64,7 @@
 </template>
 
 <script setup>
-import { isTranslatableField } from "#nuxt-cms";
+import { isTranslatableField, selectOptions } from "#nuxt-cms";
 import { computed } from "#imports";
 const props = defineProps({
   field: { type: Object, required: true },
@@ -76,7 +76,7 @@ const props = defineProps({
 const model = defineModel({ type: null, ...{ required: true } });
 const selectItems = computed(() => [
   ...props.field.required || props.field.multiple ? [] : [{ label: "\u2014", value: null }],
-  ...(props.field.options ?? []).map((option) => ({ label: option, value: option }))
+  ...selectOptions(props.field).map(({ value, label }) => ({ label, value }))
 ]);
 function proxy(fromModel, toModel = (v) => v) {
   return computed({

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

@@ -1,10 +1,11 @@
+interface FormIssue {
+    path: readonly PropertyKey[];
+    message: string;
+}
 interface ParseResult {
     success: boolean;
     error?: {
-        issues: readonly {
-            path: readonly PropertyKey[];
-            message: string;
-        }[];
+        issues: readonly FormIssue[];
     };
 }
 type __VLS_Props = {
@@ -13,10 +14,11 @@ type __VLS_Props = {
     schema?: {
         safeParse: (value: unknown) => ParseResult;
     };
+    warnings?: (value: Record<string, unknown>) => readonly FormIssue[];
 };
-declare var __VLS_1: {};
+declare var __VLS_13: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_1) => any;
+    default?: (props: typeof __VLS_13) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     error: () => any;

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

@@ -1,20 +1,41 @@
 <template>
    <form :id="id" class="cms-form" @submit.prevent="onSubmit">
+      <CmsAlert v-if="errors[ROOT_KEY]" color="error">{{ errors[ROOT_KEY] }}</CmsAlert>
+      <CmsAlert v-for="message in rootWarnings" :key="message" color="warning">
+         {{ message }}
+      </CmsAlert>
       <slot />
    </form>
 </template>
 
 <script setup>
-import { provide, reactive, watch } from "#imports";
-import { CMS_FORM_ERRORS } from "../../utils/ui";
+import { computed, provide, reactive, watch } from "#imports";
+import { CMS_FORM_ERRORS, CMS_FORM_WARNINGS } from "../../utils/ui";
+const ROOT_KEY = "";
 const props = defineProps({
   id: { type: String, required: false },
   state: { type: Object, required: true },
-  schema: { type: Object, required: false }
+  schema: { type: Object, required: false },
+  warnings: { type: Function, required: false }
 });
 const emit = defineEmits(["submit", "error"]);
 const errors = reactive({});
 provide(CMS_FORM_ERRORS, errors);
+const warningList = computed(() => props.warnings?.(props.state) ?? []);
+const warningsByKey = computed(() => {
+  const grouped = {};
+  for (const issue of warningList.value) {
+    const key = String(issue.path[0] ?? ROOT_KEY);
+    if (key !== ROOT_KEY) grouped[key] ??= issue.message;
+  }
+  return grouped;
+});
+provide(CMS_FORM_WARNINGS, warningsByKey);
+const rootWarnings = computed(() => [
+  ...new Set(
+    warningList.value.filter((issue) => !issue.path.length).map((issue) => issue.message)
+  )
+]);
 let submitted = false;
 function validate() {
   for (const key of Object.keys(errors)) delete errors[key];
@@ -22,8 +43,8 @@ function validate() {
   const result = props.schema.safeParse(props.state);
   if (result.success) return true;
   for (const issue of result.error?.issues ?? []) {
-    const key = String(issue.path[0] ?? "");
-    if (key && !errors[key]) errors[key] = issue.message;
+    const key = String(issue.path[0] ?? ROOT_KEY);
+    if (!errors[key]) errors[key] = issue.message;
   }
   return false;
 }

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

@@ -1,10 +1,11 @@
+interface FormIssue {
+    path: readonly PropertyKey[];
+    message: string;
+}
 interface ParseResult {
     success: boolean;
     error?: {
-        issues: readonly {
-            path: readonly PropertyKey[];
-            message: string;
-        }[];
+        issues: readonly FormIssue[];
     };
 }
 type __VLS_Props = {
@@ -13,10 +14,11 @@ type __VLS_Props = {
     schema?: {
         safeParse: (value: unknown) => ParseResult;
     };
+    warnings?: (value: Record<string, unknown>) => readonly FormIssue[];
 };
-declare var __VLS_1: {};
+declare var __VLS_13: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_1) => any;
+    default?: (props: typeof __VLS_13) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     error: () => any;

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

@@ -12,12 +12,15 @@
       <p v-if="error" class="cms-form-error">
          <CmsIcon name="exclamation-circle" class="size-3.5 shrink-0" />{{ error }}
       </p>
+      <p v-else-if="warning" class="cms-form-warning">
+         <CmsIcon name="exclamation-triangle" class="size-3.5 shrink-0" />{{ warning }}
+      </p>
    </div>
 </template>
 
 <script setup>
 import { computed, inject } from "#imports";
-import { CMS_FORM_ERRORS } from "../../utils/ui";
+import { CMS_FORM_ERRORS, CMS_FORM_WARNINGS } from "../../utils/ui";
 const props = defineProps({
   label: { type: String, required: false },
   icon: { type: String, required: false },
@@ -26,5 +29,7 @@ const props = defineProps({
   required: { type: Boolean, required: false }
 });
 const errors = inject(CMS_FORM_ERRORS, null);
+const warnings = inject(CMS_FORM_WARNINGS, null);
 const error = computed(() => props.name && errors ? errors[props.name] : void 0);
+const warning = computed(() => props.name && warnings ? warnings.value[props.name] : void 0);
 </script>

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

@@ -0,0 +1,18 @@
+import type { CmsEntry } from '#nuxt-cms';
+type __VLS_Props = {
+    collection: string;
+    config: CmsEntry;
+};
+type __VLS_ModelProps = {
+    'open'?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    imported: () => any;
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onImported?: (() => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,252 @@
+<template>
+   <CmsModal v-model:open="open" :title="`Import ${config.label}`" size="lg">
+      <div class="cms-form">
+         <p class="cms-form-description">
+            {{ csv ? "A JSON or CSV file" : "A JSON file" }} in the format of the export, up to
+            {{ maxSize }} and {{ IMPORT_MAX_ROWS }} rows. Media fields take keys of files that are
+            already in the media library. Nothing is written until you confirm.
+         </p>
+
+         <div class="cms-import-file">
+            <input
+               ref="input"
+               type="file"
+               class="hidden"
+               :accept="csv ? '.json,.csv,application/json,text/csv' : '.json,application/json'"
+               @change="onFile"
+            />
+            <CmsButton
+               :label="file ? 'Choose another file' : 'Choose file'"
+               icon="document-arrow-up"
+               variant="soft"
+               color="neutral"
+               :disabled="busy"
+               @click="input?.click()"
+            />
+            <span v-if="file" class="cms-import-file-name">
+               {{ file.name }} · {{ formatFileSize(file.size) }}
+            </span>
+         </div>
+
+         <CmsFormField
+            label="Mode"
+            :description="
+  mode === 'create' ? 'Every row becomes a new entry. A row with the id of an existing entry is an error.' : 'A row with the id of an existing entry replaces it. Other rows become new entries.'
+"
+         >
+            <div class="cms-media-filters">
+               <button
+                  v-for="option in MODE_OPTIONS"
+                  :key="option.value"
+                  type="button"
+                  class="cms-pill"
+                  :class="{ 'is-active': mode === option.value }"
+                  :disabled="busy"
+                  @click="setMode(option.value)"
+               >
+                  {{ option.label }}
+               </button>
+            </div>
+         </CmsFormField>
+
+         <CmsSpinner v-if="checking" />
+
+         <CmsAlert v-else-if="fileErrors.length" color="error" title="The file cannot be imported">
+            <ul class="cms-import-list">
+               <li v-for="message in fileErrors" :key="message">{{ message }}</li>
+            </ul>
+         </CmsAlert>
+
+         <template v-else-if="preview">
+            <CmsAlert :color="invalidCount ? 'warning' : 'success'" :title="summary" />
+            <div class="cms-card cms-table-shell cms-import-preview">
+               <div class="cms-table-scroll">
+                  <table class="cms-table">
+                     <thead>
+                        <tr>
+                           <th>Row</th>
+                           <th>Entry</th>
+                           <th>Action</th>
+                           <th>Problems</th>
+                        </tr>
+                     </thead>
+                     <tbody>
+                        <tr v-for="row in shownRows" :key="row.index">
+                           <td>{{ row.index }}</td>
+                           <td class="cms-import-title">{{ row.title || row.id || "Untitled" }}</td>
+                           <td>
+                              <span class="cms-tag">
+                                 {{ row.action === "update" ? "Update" : "New" }}
+                              </span>
+                           </td>
+                           <td>
+                              <ul
+                                 v-if="row.errors.length"
+                                 class="cms-import-list cms-import-issues"
+                              >
+                                 <li v-for="(issue, index) in row.errors" :key="index">
+                                    {{ issue.path ? `${issue.path}: ` : "" }}{{ issue.message }}
+                                 </li>
+                              </ul>
+                              <span v-else class="cms-import-ok">
+                                 <CmsIcon name="check" class="size-3.5" />Ready
+                              </span>
+                           </td>
+                        </tr>
+                     </tbody>
+                  </table>
+               </div>
+            </div>
+         </template>
+
+         <div class="cms-actions is-end">
+            <CmsButton label="Cancel" variant="soft" color="neutral" @click="open = false" />
+            <CmsButton
+               :label="importLabel"
+               icon="arrow-down-tray"
+               :disabled="!canImport"
+               :loading="importing"
+               @click="commit"
+            />
+         </div>
+      </div>
+   </CmsModal>
+</template>
+
+<script setup>
+import { formatFileSize } from "#nuxt-cms";
+import { computed, ref, watch } from "#imports";
+import { canTransferCsv, IMPORT_MAX_BYTES, IMPORT_MAX_ROWS } from "../../../shared/transfer";
+import { useCmsToast } from "../../composables/cms-toast";
+import { errorMessage } from "../../utils/ui";
+const MODE_OPTIONS = [
+  { value: "create", label: "Create only" },
+  { value: "upsert", label: "Create or update by id" }
+];
+const props = defineProps({
+  collection: { type: String, required: true },
+  config: { type: Object, required: true }
+});
+const open = defineModel("open", { type: Boolean, ...{ default: false } });
+const emit = defineEmits(["imported"]);
+const toast = useCmsToast();
+const csv = canTransferCsv(props.config);
+const maxSize = formatFileSize(IMPORT_MAX_BYTES);
+const input = ref(null);
+const file = ref(null);
+const text = ref("");
+const mode = ref("create");
+const preview = ref(null);
+const fileErrors = ref([]);
+const checking = ref(false);
+const importing = ref(false);
+const busy = computed(() => checking.value || importing.value);
+const invalidCount = computed(() => preview.value ? preview.value.total - preview.value.valid : 0);
+const summary = computed(() => {
+  const current = preview.value;
+  if (!current) return "";
+  if (!current.total) return "The file has no rows";
+  const parts = [
+    current.create ? `${current.create} new` : "",
+    current.update ? `${current.update} to update` : ""
+  ].filter(Boolean);
+  const ready = parts.length ? parts.join(", ") : "nothing ready";
+  return invalidCount.value ? `${invalidCount.value} of ${current.total} rows have problems; fix the file and choose it again` : `${current.total} rows checked: ${ready}`;
+});
+const shownRows = computed(() => {
+  const rows = preview.value?.rows ?? [];
+  return invalidCount.value ? rows.filter((row) => row.errors.length) : rows;
+});
+const canImport = computed(
+  () => !!preview.value && !busy.value && !fileErrors.value.length && preview.value.total > 0 && !invalidCount.value
+);
+const importLabel = computed(() => {
+  const total = preview.value?.total ?? 0;
+  return total ? `Import ${total} ${total === 1 ? "entry" : "entries"}` : "Import";
+});
+function formatOf(name) {
+  return name.toLowerCase().endsWith(".csv") ? "csv" : "json";
+}
+function reset() {
+  file.value = null;
+  text.value = "";
+  preview.value = null;
+  fileErrors.value = [];
+  mode.value = "create";
+  if (input.value) input.value.value = "";
+}
+watch(open, (value) => {
+  if (value) reset();
+});
+function send(dryRun) {
+  return $fetch(`/api/cms/import/${props.collection}`, {
+    method: "POST",
+    query: { format: formatOf(file.value.name), mode: mode.value, dryRun: String(dryRun) },
+    body: text.value,
+    headers: { "content-type": "text/plain" }
+  });
+}
+function readPreview(error) {
+  const data = error.data?.data;
+  return data && typeof data === "object" && Array.isArray(data.rows) ? data : null;
+}
+async function check() {
+  if (!file.value) return;
+  checking.value = true;
+  preview.value = null;
+  fileErrors.value = [];
+  try {
+    const result = await send(true);
+    preview.value = result;
+    fileErrors.value = result.errors;
+  } catch (error) {
+    fileErrors.value = [errorMessage(error) ?? "The file could not be checked"];
+  } finally {
+    checking.value = false;
+  }
+}
+async function onFile(event) {
+  const picked = event.target.files?.[0];
+  if (!picked) return;
+  file.value = picked;
+  preview.value = null;
+  if (picked.size > IMPORT_MAX_BYTES) {
+    fileErrors.value = [`The file is larger than ${maxSize}`];
+    return;
+  }
+  if (formatOf(picked.name) === "csv" && !csv) {
+    fileErrors.value = ["This entry has blocks or many-to-many fields: use a JSON file"];
+    return;
+  }
+  text.value = await picked.text();
+  await check();
+}
+function setMode(value) {
+  if (mode.value === value) return;
+  mode.value = value;
+  if (text.value) void check();
+}
+async function commit() {
+  if (!canImport.value) return;
+  importing.value = true;
+  try {
+    const result = await send(false);
+    const count = result.create + result.update;
+    toast.add({
+      title: `Imported ${count} ${count === 1 ? "entry" : "entries"}`,
+      color: "success"
+    });
+    emit("imported");
+    open.value = false;
+  } catch (error) {
+    const returned = readPreview(error);
+    if (returned) {
+      preview.value = returned;
+      fileErrors.value = returned.errors;
+    }
+    toast.add({ title: "Import failed", description: errorMessage(error), color: "error" });
+  } finally {
+    importing.value = false;
+  }
+}
+</script>

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

@@ -0,0 +1,18 @@
+import type { CmsEntry } from '#nuxt-cms';
+type __VLS_Props = {
+    collection: string;
+    config: CmsEntry;
+};
+type __VLS_ModelProps = {
+    'open'?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    imported: () => any;
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onImported?: (() => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,18 @@
+import type { CmsEntry } from '#nuxt-cms';
+import type { CmsListFilters } from '../../../shared/list-filters.js';
+type __VLS_Props = {
+    config: CmsEntry;
+    keys: string[];
+    relations?: Record<string, Record<string, unknown>>;
+};
+type __VLS_ModelProps = {
+    modelValue: CmsListFilters;
+};
+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: CmsListFilters) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: CmsListFilters) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;