@xleddyl/nuxt-cms 0.9.4 → 0.10.0

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

@@ -1,34 +1,21 @@
 <template>
-   <KModal v-model:open="open" :title="`Import ${config.label}`" size="lg">
+   <KModal v-model:open="open" :title="`Import ${config.label}`" :description="intro" size="lg">
       <KStack gap="md">
-         <p class="cms-settings-hint">
-            {{ 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>
-
-         <KStack direction="row" gap="sm" wrap>
-            <input
-               ref="input"
-               type="file"
-               hidden
-               :accept="csv ? '.json,.csv,application/json,text/csv' : '.json,application/json'"
-               @change="onFile"
-            />
-            <KButton
-               :label="file ? 'Choose another file' : 'Choose file'"
-               :icon="cmsIcon('document-arrow-up')"
-               variant="soft"
-               tone="neutral"
-               :disabled="busy"
-               @click="input?.click()"
-            />
-            <span v-if="file" class="cms-import-file-name">
-               {{ file.name }} · {{ formatFileSize(file.size) }}
-            </span>
-         </KStack>
+         <KFileInput
+            :model-value="file"
+            :accept="csv ? '.json,.csv,application/json,text/csv' : '.json,application/json'"
+            :icon="cmsIcon('document-arrow-up')"
+            :title="file ? 'Choose another file' : 'Choose a file'"
+            :disabled="busy"
+            :previews="false"
+            size="sm"
+            list
+            aria-label="Import file"
+            @update:model-value="onFile"
+         />
 
          <KFormField
+            v-if="canUpsert"
             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.'
@@ -44,18 +31,15 @@
             />
          </KFormField>
 
-         <KSpinner v-if="checking" />
+         <KSkeletonList v-if="checking" :rows="3" />
 
          <KAlert
             v-else-if="fileErrors.length"
             tone="danger"
             role="alert"
             title="The file cannot be imported"
-         >
-            <ul class="cms-import-list">
-               <li v-for="message in fileErrors" :key="message">{{ message }}</li>
-            </ul>
-         </KAlert>
+            :description="fileErrors"
+         />
 
          <template v-else-if="preview">
             <KAlert :tone="invalidCount ? 'warning' : 'success'" role="status" :title="summary" />
@@ -74,26 +58,27 @@
                   <KBadge :label="row.action === 'update' ? 'Update' : 'New'" size="sm" />
                </template>
                <template #cell-errors="{ row }">
-                  <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">
-                     <KIcon name="check" />
-                     Ready
-                  </span>
+                  <KStack v-if="row.errors.length" gap="none" class="cms-import-issues">
+                     <KFieldMessage
+                        v-for="(issue, index) in row.errors"
+                        :key="index"
+                        :message="issue.path ? `${issue.path}: ${issue.message}` : issue.message"
+                        :icon="false"
+                     />
+                  </KStack>
+                  <KBadge v-else label="Ready" tone="success" icon="check" size="sm" />
                </template>
             </KTable>
          </template>
       </KStack>
 
       <template #footer>
-         <KButton label="Cancel" variant="soft" tone="neutral" @click="open = false" />
+         <KButton label="Cancel" variant="ghost" tone="neutral" @click="open = false" />
          <KButton
             :label="importLabel"
             :icon="cmsIcon('arrow-down-tray')"
             :disabled="!canImport"
+            disabled-reason="Choose a file without errors first"
             :loading="importing"
             @click="commit"
          />
@@ -107,17 +92,19 @@ import {
   Alert as KAlert,
   Badge as KBadge,
   Button as KButton,
+  FieldMessage as KFieldMessage,
+  FileInput as KFileInput,
   FormField as KFormField,
-  Icon as KIcon,
   Modal as KModal,
   SegmentedControl as KSegmentedControl,
-  Spinner as KSpinner,
+  SkeletonList as KSkeletonList,
   Stack as KStack,
-  Table as KTable
+  Table as KTable,
+  toast
 } from "@xleddyl/443-components-vue";
 import { computed, ref, watch } from "#imports";
 import { canTransferCsv, IMPORT_MAX_BYTES, IMPORT_MAX_ROWS } from "../../../shared/transfer";
-import { useCmsToast } from "../../composables/cms-toast";
+import { useCmsPermissions } from "../../composables/cms-permissions";
 import { cmsIcon, errorMessage } from "../../utils/ui";
 const MODE_OPTIONS = [
   { value: "create", label: "Create only" },
@@ -135,10 +122,11 @@ const props = defineProps({
 });
 const open = defineModel("open", { type: Boolean, ...{ default: false } });
 const emit = defineEmits(["imported"]);
-const toast = useCmsToast();
+const { can } = useCmsPermissions();
+const canUpsert = computed(() => can(`${props.collection}.update`));
 const csv = canTransferCsv(props.config);
 const maxSize = formatFileSize(IMPORT_MAX_BYTES);
-const input = ref(null);
+const intro = `${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.`;
 const file = ref(null);
 const text = ref("");
 const mode = ref("create");
@@ -179,7 +167,6 @@ function reset() {
   preview.value = null;
   fileErrors.value = [];
   mode.value = "create";
-  if (input.value) input.value.value = "";
 }
 watch(open, (value) => {
   if (value) reset();
@@ -211,11 +198,15 @@ async function check() {
     checking.value = false;
   }
 }
-async function onFile(event) {
-  const picked = event.target.files?.[0];
-  if (!picked) return;
+async function onFile(value) {
+  const picked = Array.isArray(value) ? value[0] : value;
+  if (!picked) {
+    reset();
+    return;
+  }
   file.value = picked;
   preview.value = null;
+  fileErrors.value = [];
   if (picked.size > IMPORT_MAX_BYTES) {
     fileErrors.value = [`The file is larger than ${maxSize}`];
     return;
@@ -238,10 +229,7 @@ async function commit() {
   try {
     const result = await send(false);
     const count = result.create + result.update;
-    toast.add({
-      title: `Imported ${count} ${count === 1 ? "entry" : "entries"}`,
-      color: "success"
-    });
+    toast.success(`Imported ${count} ${count === 1 ? "entry" : "entries"}`);
     emit("imported");
     open.value = false;
   } catch (error) {
@@ -250,7 +238,7 @@ async function commit() {
       preview.value = returned;
       fileErrors.value = returned.errors;
     }
-    toast.add({ title: "Import failed", description: errorMessage(error), color: "error" });
+    toast.error("Import failed", { description: errorMessage(error) });
   } finally {
     importing.value = false;
   }

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

@@ -0,0 +1,16 @@
+import type { FieldConfig } from '#nuxt-cms';
+type __VLS_Props = {
+    field: FieldConfig;
+    locale?: string;
+};
+type __VLS_ModelProps = {
+    modelValue: unknown;
+};
+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: unknown) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: unknown) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,250 @@
+<template>
+   <KStack gap="sm">
+      <KStack direction="row" align="center" gap="sm" wrap>
+         <KFieldBoundary v-if="modeOptions.length > 1" auxiliary>
+            <KSegmentedControl
+               v-model="mode"
+               :options="modeOptions"
+               size="sm"
+               required
+               aria-label="Link type"
+            />
+         </KFieldBoundary>
+         <KCombobox
+            v-if="mode === 'internal'"
+            v-model="targetValue"
+            class="cms-link-input"
+            clearable
+            open-on-focus
+            :options="selectedOptions"
+            :search="search"
+            :debounce="300"
+            :placeholder="field.placeholder ?? 'Search pages and content\u2026'"
+         />
+         <KInput
+            v-else
+            v-model="urlValue"
+            class="cms-link-input k-mono"
+            :placeholder="field.placeholder ?? 'https://, /path, mailto:, tel: or #anchor'"
+         />
+      </KStack>
+      <KFieldMessage v-if="warning" tone="warning" :message="warning" />
+      <KFieldBoundary auxiliary>
+         <KStack direction="row" align="center" gap="md" wrap>
+            <KInput
+               v-if="field.withLabel"
+               v-model="labelValue"
+               class="cms-link-label"
+               aria-label="Link text"
+               placeholder="Link text"
+            />
+            <KSwitch v-model="newTabValue" size="sm" label="Open in a new tab" />
+         </KStack>
+      </KFieldBoundary>
+   </KStack>
+</template>
+
+<script setup>
+import {
+  allowsExternalLinks,
+  contentItemPath,
+  isLocalizedLinkField,
+  linkLabelText,
+  linkTargetKey,
+  linkTargetNames,
+  pageLinkPath,
+  pageRoutes,
+  parseLinkTargetKey,
+  readLinkValue
+} from "#nuxt-cms";
+import {
+  Combobox as KCombobox,
+  FieldBoundary as KFieldBoundary,
+  FieldMessage as KFieldMessage,
+  Input as KInput,
+  SegmentedControl as KSegmentedControl,
+  Stack as KStack,
+  Switch as KSwitch,
+  toast
+} from "@xleddyl/443-components-vue";
+import { computed, ref, watch } from "#imports";
+import cmsConfig from "#cms-config";
+import { useCmsLinkTargets } from "../../composables/cms-link-targets";
+import { useCmsPermissions } from "../../composables/cms-permissions";
+import { useCmsRuntime } from "../../composables/cms-runtime";
+import { errorMessage } from "../../utils/ui";
+const SEARCH_LIMIT = 10;
+const props = defineProps({
+  field: { type: Object, required: true },
+  locale: { type: String, required: false }
+});
+const model = defineModel({ type: null, ...{ required: true } });
+const config = cmsConfig;
+const { i18n } = useCmsRuntime();
+const targets = useCmsLinkTargets(config);
+const { can } = useCmsPermissions();
+const targetNames = computed(
+  () => linkTargetNames(config, props.field).filter((name) => can(`${name}.read`))
+);
+const external = computed(() => allowsExternalLinks(props.field));
+const activeLocale = computed(() => props.locale ?? i18n.defaultLocale);
+const link = computed(() => readLinkValue(model.value));
+const modeOptions = computed(() => [
+  ...targetNames.value.length ? [{ value: "internal", label: "Internal" }] : [],
+  ...external.value ? [{ value: "external", label: "External" }] : []
+]);
+function initialMode() {
+  if (link.value?.url) return "external";
+  if (link.value?.entry || !external.value) return "internal";
+  return targetNames.value.length ? "internal" : "external";
+}
+const mode = ref(initialMode());
+function write(next) {
+  const hasTarget = !!next.url || !!(next.entry && next.id);
+  const hasExtra = next.label !== void 0 || !!next.newTab;
+  model.value = hasTarget || hasExtra ? next : null;
+}
+function extras() {
+  const current = link.value;
+  return {
+    ...current?.label !== void 0 ? { label: current.label } : {},
+    ...current?.newTab ? { newTab: true } : {}
+  };
+}
+watch(mode, (next) => {
+  if (next === "internal" && link.value?.url) write(extras());
+  if (next === "external" && link.value?.entry) write(extras());
+});
+const urlValue = computed({
+  get: () => link.value?.url ?? "",
+  set: (value) => {
+    const url = value == null ? "" : String(value);
+    write({ ...url ? { url } : {}, ...extras() });
+  }
+});
+const targetValue = computed({
+  get: () => link.value?.entry && link.value.id ? linkTargetKey(link.value.entry, link.value.id) : null,
+  set: (value) => {
+    const target = value ? parseLinkTargetKey(value) : null;
+    write({ ...target ? { entry: target.entry, id: target.id } : {}, ...extras() });
+  }
+});
+const labelValue = computed({
+  get: () => {
+    const label = link.value?.label;
+    if (isLocalizedLinkField(props.field))
+      return label && typeof label === "object" ? label[activeLocale.value] ?? "" : "";
+    return typeof label === "string" ? label : "";
+  },
+  set: (value) => {
+    const text = value == null ? "" : String(value);
+    const current = link.value ?? {};
+    const { label: previous, ...rest } = current;
+    let label;
+    if (isLocalizedLinkField(props.field)) {
+      const map = { ...previous && typeof previous === "object" ? previous : {} };
+      if (text) map[activeLocale.value] = text;
+      else delete map[activeLocale.value];
+      label = Object.keys(map).length ? map : void 0;
+    } else {
+      label = text || void 0;
+    }
+    write({ ...rest, ...label !== void 0 ? { label } : {} });
+  }
+});
+const newTabValue = computed({
+  get: () => !!link.value?.newTab,
+  set: (value) => {
+    const { newTab: _newTab, ...rest } = link.value ?? {};
+    write({ ...rest, ...value ? { newTab: true } : {} });
+  }
+});
+function rowTitle(entry, row) {
+  const value = row[entry.titleField ?? "title"];
+  const text = typeof value === "string" ? value : value && typeof value === "object" ? linkLabelText(value, activeLocale.value, i18n.defaultLocale) : null;
+  return text || `#${String(row.id)}`;
+}
+function rowPath(entry, row) {
+  return contentItemPath(entry, row, activeLocale.value) ?? "";
+}
+function pageOptions(name, entry, term) {
+  return pageRoutes(entry).filter(
+    (route) => !term || route.path.toLowerCase().includes(term) || route.label.toLowerCase().includes(term)
+  ).slice(0, SEARCH_LIMIT).map((route) => ({
+    label: route.label,
+    value: linkTargetKey(name, route.key),
+    description: route.path,
+    group: entry.label
+  }));
+}
+async function contentOptions(name, entry, term, signal) {
+  const page = await $fetch(`/api/cms/admin/${name}`, {
+    query: { light: "true", limit: SEARCH_LIMIT, ...term ? { search: term } : {} },
+    signal
+  });
+  return page.items.map((row) => {
+    targets.remember(name, row);
+    const state = targets.state({ entry: name, id: String(row.id) });
+    const path = rowPath(entry, row);
+    return {
+      label: rowTitle(entry, row),
+      value: linkTargetKey(name, String(row.id)),
+      description: state === "live" ? path : `${path} (${state})`.trim(),
+      group: entry.label
+    };
+  });
+}
+async function search(query, signal) {
+  const term = query.trim().toLowerCase();
+  try {
+    const groups = await Promise.all(
+      targetNames.value.map((name) => {
+        const entry = config[name];
+        return entry.kind === "page" ? pageOptions(name, entry, term) : contentOptions(name, entry, query.trim(), signal);
+      })
+    );
+    return groups.flat();
+  } catch (error) {
+    if (signal.aborted) throw error;
+    toast.error("Loading failed", { description: errorMessage(error) });
+    return [];
+  }
+}
+watch(
+  link,
+  (value) => {
+    if (value?.entry && value.id && !value.url) targets.load(value.entry, value.id);
+  },
+  { immediate: true }
+);
+const selectedOptions = computed(() => {
+  const value = link.value;
+  if (!value?.entry || !value.id || value.url) return [];
+  const entry = config[value.entry];
+  const key = linkTargetKey(value.entry, value.id);
+  if (entry?.kind === "page") {
+    const route = pageRoutes(entry).find((candidate) => candidate.key === value.id);
+    return [{ label: route?.label ?? value.id, value: key, description: route?.path }];
+  }
+  const row = targets.target(value.entry, value.id);
+  if (!entry || !row) return [{ label: `${entry?.label ?? value.entry} #${value.id}`, value: key }];
+  return [{ label: rowTitle(entry, row), value: key, description: rowPath(entry, row) }];
+});
+const warning = computed(() => {
+  const value = link.value;
+  if (mode.value !== "internal" || !value?.entry || !value.id) return null;
+  const entry = config[value.entry];
+  if (entry?.kind === "page")
+    return pageLinkPath(entry, value.id) ? null : "This page no longer exists.";
+  switch (targets.state(value)) {
+    case "missing":
+      return "The linked item was deleted. The site shows no link until you pick another one.";
+    case "draft":
+      return "The linked item is a draft. The site hides this link until it is published.";
+    case "scheduled":
+      return "The linked item is scheduled. The site shows this link once it goes live.";
+    default:
+      return null;
+  }
+});
+</script>

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

@@ -0,0 +1,16 @@
+import type { FieldConfig } from '#nuxt-cms';
+type __VLS_Props = {
+    field: FieldConfig;
+    locale?: string;
+};
+type __VLS_ModelProps = {
+    modelValue: unknown;
+};
+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: unknown) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: unknown) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -7,23 +7,20 @@
       multiple
       clearable
       clear-label="Clear filters"
-      class="cms-list-filters"
       @update:model-value="onPillsUpdate"
    >
       <template v-for="key in relationKeys" #[`panel-${key}`]="{ close }" :key="key">
-         <div class="cms-list-filter-panel">
-            <CmsRelationField
-               :model-value="model[key] ?? null"
-               :to="config.fields[key].to"
-               @update:model-value="(value) => pickRelation(key, value, close)"
-            />
-         </div>
+         <CmsRelationField
+            :model-value="model[key] ?? null"
+            :to="relationTarget(config.fields[key])"
+            @update:model-value="(value) => pickRelation(key, value, close)"
+         />
       </template>
    </KFilterPills>
 </template>
 
 <script setup>
-import { isTranslatableField, selectDisplayValue } from "#nuxt-cms";
+import { isTranslatableField, relationTarget, selectDisplayValue } from "#nuxt-cms";
 import { FilterPills as KFilterPills } from "@xleddyl/443-components-vue";
 import { computed, reactive, watch } from "#imports";
 import cmsConfig from "#cms-config";
@@ -53,7 +50,8 @@ const pills = computed(
       valueLabel: valueLabelOf(key),
       active: isActive(key),
       menu,
-      panel: !menu
+      panel: !menu,
+      panelWidth: menu ? void 0 : "18rem"
     };
   })
 );
@@ -104,7 +102,7 @@ function titleText(entry, value) {
   return String(value);
 }
 function relationTitle(key, id) {
-  const target = cmsConfig[props.config.fields[key]?.to ?? ""];
+  const target = cmsConfig[relationTarget(props.config.fields[key] ?? {})];
   const known = props.relations?.[key]?.[id];
   const title = known !== void 0 ? titleText(target, known) : fetchedTitles[`${key}:${id}`];
   return title || `#${id}`;
@@ -113,7 +111,7 @@ async function resolveTitle(key, id) {
   if (import.meta.server) return;
   const cacheKey = `${key}:${id}`;
   if (props.relations?.[key]?.[id] !== void 0 || fetchedTitles[cacheKey] !== void 0) return;
-  const to = props.config.fields[key]?.to;
+  const to = relationTarget(props.config.fields[key] ?? {});
   if (!to) return;
   fetchedTitles[cacheKey] = "";
   try {

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

@@ -1,5 +1,6 @@
+import type { TranslationProgress } from '../../../shared/translations.js';
 type __VLS_Props = {
-    value?: Record<string, string> | null;
+    progress?: TranslationProgress | null;
 };
 type __VLS_ModelProps = {
     modelValue: string;

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

@@ -1,9 +1,10 @@
 <template>
    <KSegmentedControl
       v-model="model"
-      class="cms-locale-control"
+      class="cms-code"
       :options="options"
       size="sm"
+      :disabled="false"
       required
       aria-label="Content language"
    />
@@ -12,20 +13,43 @@
 <script setup>
 import { SegmentedControl as KSegmentedControl } from "@xleddyl/443-components-vue";
 import { computed } from "#imports";
+import { translationSummary } from "../../../shared/translations";
 import { useCmsRuntime } from "../../composables/cms-runtime";
 const props = defineProps({
-  value: { type: [Object, null], required: false }
+  progress: { type: [Object, null], required: false }
 });
 const model = defineModel({ type: String, ...{ required: true } });
 const { i18n } = useCmsRuntime();
+function stateOf(locale) {
+  const progress = props.progress?.[locale];
+  if (locale === i18n.defaultLocale || !progress?.total) return null;
+  return progress.state;
+}
+function titleOf(locale) {
+  const progress = props.progress?.[locale];
+  if (!progress) return void 0;
+  if (locale === i18n.defaultLocale) {
+    return progress.values ? `${locale}: default language` : `${locale}: empty`;
+  }
+  if (!progress.total) return progress.values ? void 0 : `${locale}: empty`;
+  return `${locale}: ${translationSummary(progress)}`;
+}
+const DOT_TONES = {
+  complete: "success",
+  partial: "warning",
+  missing: "danger"
+};
 const options = computed(
   () => i18n.locales.map((locale) => {
-    const empty = !props.value?.[locale]?.trim();
+    const state = stateOf(locale);
     return {
       value: locale,
       label: locale,
-      title: empty ? `${locale}: empty` : void 0,
-      muted: empty
+      title: titleOf(locale),
+      muted: !!props.progress && !props.progress[locale]?.values,
+      dot: !!state,
+      dotTone: state ? DOT_TONES[state] : void 0,
+      dotLabel: state ? titleOf(locale) : void 0
     };
   })
 );

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

@@ -1,5 +1,6 @@
+import type { TranslationProgress } from '../../../shared/translations.js';
 type __VLS_Props = {
-    value?: Record<string, string> | null;
+    progress?: TranslationProgress | null;
 };
 type __VLS_ModelProps = {
     modelValue: string;

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

@@ -4,6 +4,8 @@ type __VLS_Props = {
     item: MediaItem | null;
     library: CmsMediaLibrary;
     readOnly: boolean;
+    canEdit?: boolean;
+    canDelete?: boolean;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     delete: (item: MediaItem) => any;