@xleddyl/nuxt-cms 0.9.4 → 0.10.0

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

@@ -1,6 +1,7 @@
 import type { MediaType } from '#nuxt-cms';
 type __VLS_Props = {
     selectable?: boolean;
+    fill?: boolean;
     mediaType?: MediaType | MediaType[];
     accept?: string[];
 };

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

@@ -4,34 +4,19 @@
       <span class="k-visually-hidden">No media</span>
    </span>
 
-   <img
-      v-else-if="kind === 'image' && url"
-      :src="url"
-      :alt="filename"
-      :title="filename"
-      loading="lazy"
-      class="cms-media-thumb"
-   />
-
-   <video
-      v-else-if="kind === 'video' && url"
-      :src="url"
-      :title="filename"
-      muted
-      playsinline
-      preload="metadata"
-      class="cms-media-thumb"
-   />
-
-   <span v-else :title="filename" class="cms-media-thumb is-fallback">
-      <KIcon :name="cmsIcon(icon)" />
-   </span>
+   <KTooltip v-else :text="filename">
+      <KThumbnail :src="url ?? void 0" :kind="kind" :alt="filename" size="sm" />
+   </KTooltip>
 </template>
 
 <script setup>
 import { computed } from "#imports";
-import { Icon as KIcon } from "@xleddyl/443-components-vue";
-import { mediaFilename, mediaIconFor, mediaPublicUrl, mediaTypeForKey } from "#nuxt-cms";
+import {
+  Icon as KIcon,
+  Thumbnail as KThumbnail,
+  Tooltip as KTooltip
+} from "@xleddyl/443-components-vue";
+import { mediaFilename, mediaPublicUrl, mediaTypeForKey } from "#nuxt-cms";
 import { useCmsRuntime } from "../../composables/cms-runtime";
 import { cmsIcon } from "../../utils/ui";
 const props = defineProps({
@@ -41,5 +26,4 @@ const { mediaBaseUrl } = useCmsRuntime();
 const kind = computed(() => props.value ? mediaTypeForKey(props.value) : "file");
 const url = computed(() => props.value ? mediaPublicUrl(mediaBaseUrl, props.value) : null);
 const filename = computed(() => props.value ? mediaFilename(props.value) : "");
-const icon = computed(() => mediaIconFor(kind.value));
 </script>

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

@@ -17,7 +17,7 @@
          }}
       </template>
       <template v-if="!uploading" #hint>
-         <span class="cms-media-dropzone-hint">
+         <span class="cms-icon-hint">
             <KIcon :name="cmsIcon(folder ? 'folder' : 'circle-stack')" />
             {{ folder ?? "Library root" }}
          </span>

package/dist/runtime/app/components/cms/{BlockOutline.d.vue.ts → NestedBlockList.d.vue.ts}

@@ -1,17 +1,17 @@
 import type { FieldConfig } from '#nuxt-cms';
-import type { CmsBlockValue } from '../../../shared/preview.js';
 type __VLS_Props = {
-    items: CmsBlockValue[];
     field: FieldConfig;
+    items: unknown;
     locale: string;
-    selected: number | null;
+    invalid: (index: number) => boolean;
+    readonly?: boolean;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     select: (index: number) => any;
-    move: (from: number, to: number) => any;
+    insert: (anchor: HTMLElement) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onSelect?: ((index: number) => any) | undefined;
-    onMove?: ((from: number, to: number) => any) | undefined;
+    onInsert?: ((anchor: HTMLElement) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -0,0 +1,87 @@
+<template>
+   <KStack gap="sm">
+      <KTree
+         v-if="rows.length"
+         :nodes="nodes"
+         :selectable="false"
+         size="sm"
+         :label="field.label"
+         @select="(node2) => emit('select', Number(node2.id))"
+      >
+         <template #meta="{ node }">
+            <KIcon
+               v-if="rows[Number(node.id)]?.hidden"
+               :name="cmsIcon('eye-slash')"
+               label="Hidden"
+            />
+         </template>
+      </KTree>
+      <div v-if="!readonly">
+         <KButton
+            :icon="cmsIcon('plus')"
+            label="Add a block"
+            size="sm"
+            variant="soft"
+            tone="neutral"
+            aria-haspopup="dialog"
+            :disabled="!canAdd"
+            :tooltip="canAdd ? void 0 : full"
+            @click="(event) => emit('insert', event.currentTarget)"
+         />
+      </div>
+      <KFieldMessage v-else-if="!rows.length" tone="neutral" :icon="false" message="No blocks." />
+   </KStack>
+</template>
+
+<script setup>
+import { canAddBlock, isHiddenBlock } from "#nuxt-cms";
+import {
+  Button as KButton,
+  FieldMessage as KFieldMessage,
+  Icon as KIcon,
+  Stack as KStack,
+  Tree as KTree
+} from "@xleddyl/443-components-vue";
+import { computed } from "#imports";
+import { blockSummary } from "../../../shared/preview";
+import { useCmsRuntime } from "../../composables/cms-runtime";
+import { cmsIcon } from "../../utils/ui";
+const props = defineProps({
+  field: { type: Object, required: true },
+  items: { type: null, required: true },
+  locale: { type: String, required: true },
+  invalid: { type: Function, required: true },
+  readonly: { type: Boolean, required: false }
+});
+const emit = defineEmits(["select", "insert"]);
+const { i18n } = useCmsRuntime();
+const list = computed(() => Array.isArray(props.items) ? props.items : []);
+const rows = computed(
+  () => list.value.map((item, index) => {
+    const block = props.field.blocks?.[String(item.type)];
+    return {
+      index,
+      label: block?.label ?? String(item.type),
+      icon: block?.icon ?? "rectangle-stack",
+      summary: blockSummary(block, item, props.locale, i18n.defaultLocale, 60),
+      hidden: isHiddenBlock(item),
+      invalid: props.invalid(index)
+    };
+  })
+);
+const nodes = computed(
+  () => rows.value.map((row) => ({
+    id: row.index,
+    label: row.label,
+    description: row.summary || void 0,
+    descriptionVariant: "text",
+    icon: cmsIcon(row.icon),
+    invalid: row.invalid
+  }))
+);
+const canAdd = computed(() => canAddBlock(props.field, list.value.length));
+const full = computed(() => {
+  const max = props.field.max ?? 0;
+  return `This field holds at most ${max} ${max === 1 ? "block" : "blocks"}.`;
+});
+</script>

package/dist/runtime/app/components/cms/{BlockOutline.vue.d.ts → NestedBlockList.vue.d.ts}

@@ -1,17 +1,17 @@
 import type { FieldConfig } from '#nuxt-cms';
-import type { CmsBlockValue } from '../../../shared/preview.js';
 type __VLS_Props = {
-    items: CmsBlockValue[];
     field: FieldConfig;
+    items: unknown;
     locale: string;
-    selected: number | null;
+    invalid: (index: number) => boolean;
+    readonly?: boolean;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     select: (index: number) => any;
-    move: (from: number, to: number) => any;
+    insert: (anchor: HTMLElement) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onSelect?: ((index: number) => any) | undefined;
-    onMove?: ((from: number, to: number) => any) | undefined;
+    onInsert?: ((anchor: HTMLElement) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,12 +1,19 @@
 <template>
    <span>
       Powered by
-      <a
-         class="cms-powered-by-link"
+      <KButton
+         variant="link"
+         size="xs"
          href="https://github.com/443-studio/nuxt-cms"
          target="_blank"
-         rel="noopener"
-         >@443-studio/nuxt-cms</a
-      >
+         external
+         :label="version ? `nuxt-cms v${version}` : 'nuxt-cms'"
+      />
    </span>
 </template>
+
+<script setup>
+import { Button as KButton } from "@xleddyl/443-components-vue";
+import { useCmsRuntime } from "../../composables/cms-runtime";
+const version = useCmsRuntime().version;
+</script>

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

@@ -0,0 +1,18 @@
+import type { CmsPresetDetails } from '../../../shared/presets.js';
+type __VLS_Props = {
+    title: string;
+    submitLabel?: string;
+    hint?: string;
+    save: (details: CmsPresetDetails) => Promise<void>;
+};
+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, {
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "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/PresetModal.vue

@@ -0,0 +1,70 @@
+<template>
+   <KFormModal
+      v-model:open="open"
+      :title="title"
+      :description="hint"
+      size="sm"
+      :form="form"
+      :submit-label="submitLabel"
+      :submit-icon="cmsIcon(CMS_PRESET_ICON)"
+      creating
+      nested
+   >
+      <KFormField label="Name" name="name" required>
+         <KInput
+            v-model="draft.name"
+            :maxlength="CMS_PRESET_NAME_MAX"
+            placeholder="Article intro"
+            autocomplete="off"
+         />
+      </KFormField>
+      <KFormField label="Description" name="description">
+         <KTextarea
+            v-model="draft.description"
+            :maxlength="CMS_PRESET_DESCRIPTION_MAX"
+            :rows="3"
+            placeholder="Optional"
+         />
+      </KFormField>
+   </KFormModal>
+</template>
+
+<script setup>
+import {
+  FormField as KFormField,
+  FormModal as KFormModal,
+  Input as KInput,
+  Textarea as KTextarea,
+  useForm
+} from "@xleddyl/443-components-vue";
+import { ref, watch } from "#imports";
+import {
+  CMS_PRESET_DESCRIPTION_MAX,
+  CMS_PRESET_ICON,
+  CMS_PRESET_NAME_MAX
+} from "../../../shared/presets";
+import { cmsIcon } from "../../utils/ui";
+const props = defineProps({
+  title: { type: String, required: true },
+  submitLabel: { type: String, required: false, default: "Save" },
+  hint: { type: String, required: false, default: void 0 },
+  save: { type: Function, required: true }
+});
+const open = defineModel("open", { type: Boolean, ...{ default: false } });
+const draft = ref({ name: "", description: "" });
+const form = useForm({
+  values: draft,
+  schema: {
+    name: { required: true, maxLength: CMS_PRESET_NAME_MAX },
+    description: { maxLength: CMS_PRESET_DESCRIPTION_MAX }
+  },
+  onSubmit: async (values) => {
+    const description = values.description.trim();
+    await props.save({ name: values.name.trim(), ...description ? { description } : {} });
+    open.value = false;
+  }
+});
+watch(open, (value) => {
+  if (value) form.reset({ name: "", description: "" });
+});
+</script>

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

@@ -0,0 +1,18 @@
+import type { CmsPresetDetails } from '../../../shared/presets.js';
+type __VLS_Props = {
+    title: string;
+    submitLabel?: string;
+    hint?: string;
+    save: (details: CmsPresetDetails) => Promise<void>;
+};
+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, {
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "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/RelationField.vue

@@ -12,11 +12,10 @@
 
 <script setup>
 import { isTranslatableField, selectDisplayValue } from "#nuxt-cms";
-import { Combobox as KCombobox } from "@xleddyl/443-components-vue";
+import { Combobox as KCombobox, toast } from "@xleddyl/443-components-vue";
 import { computed, onMounted, ref } from "#imports";
 import cmsConfig from "#cms-config";
 import { useCmsRuntime } from "../../composables/cms-runtime";
-import { useCmsToast } from "../../composables/cms-toast";
 import { errorMessage } from "../../utils/ui";
 const props = defineProps({
   to: { type: String, required: true },
@@ -24,7 +23,6 @@ const props = defineProps({
   multiple: { type: Boolean, required: false }
 });
 const model = defineModel({ type: [String, Array, null], ...{ required: true } });
-const toast = useCmsToast();
 const target = cmsConfig[props.to];
 const endpoint = `/api/cms/admin/${props.to}`;
 const selectedRows = ref(/* @__PURE__ */ new Map());
@@ -38,11 +36,7 @@ async function search(query, signal) {
     return page.items.map((row) => ({ label: optionLabel(row), value: row.id }));
   } catch (err) {
     if (signal.aborted) throw err;
-    toast.add({
-      title: "Loading failed",
-      description: errorMessage(err),
-      color: "error"
-    });
+    toast.error("Loading failed", { description: errorMessage(err) });
     return [];
   }
 }

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

@@ -1,32 +1,34 @@
 <template>
    <KAlert v-if="isSuperAdmin" tone="neutral" title="Environment account">
       This account signs in with the credentials of the environment variables (NUXT_CMS_ADMIN_EMAIL
-      and NUXT_CMS_ADMIN_PASSWORD). Change them there. Only this account can manage users.
+      and NUXT_CMS_ADMIN_PASSWORD). Change them there. It holds every permission and cannot be
+      removed or locked out from the panel.
    </KAlert>
 
    <template v-else>
       <KSettingsGroup label="Profile" description="The name shows in the sidebar.">
-         <KForm :form="profile">
-            <KGrid :columns="2">
+         <template #actions>
+            <KButton
+               variant="soft"
+               tone="neutral"
+               type="submit"
+               size="sm"
+               :form="profileFormId"
+               :loading="profileForm.submitting.value"
+               :disabled="profile.name === (user?.name ?? '')"
+            >
+               Save
+            </KButton>
+         </template>
+         <KForm :id="profileFormId" :form="profileForm">
+            <KGrid :columns="{ base: 1, sm: 2 }">
                <KFormField label="Name" name="name">
-                  <KInput
-                     v-model="profile.values.name"
-                     placeholder="Your name"
-                     autocomplete="name"
-                  />
+                  <KInput v-model="profile.name" placeholder="Your name" autocomplete="name" />
                </KFormField>
                <KFormField label="Email">
-                  <KInput :model-value="email" disabled />
+                  <KInput :model-value="email" type="email" disabled />
                </KFormField>
             </KGrid>
-            <KStack direction="row" justify="end" gap="sm">
-               <KButton
-                  type="submit"
-                  label="Save profile"
-                  size="sm"
-                  :disabled="profile.values.name === (user?.name ?? '')"
-               />
-            </KStack>
          </KForm>
       </KSettingsGroup>
 
@@ -34,34 +36,34 @@
          label="Password"
          :description="`At least ${MIN_PASSWORD_LENGTH} characters. Use the generate button to create one.`"
       >
-         <KForm :form="password">
-            <KFormField label="Current password" name="current">
+         <template #actions>
+            <KButton
+               variant="soft"
+               tone="neutral"
+               type="submit"
+               size="sm"
+               :form="passwordFormId"
+               :loading="passwordForm.submitting.value"
+            >
+               Change password
+            </KButton>
+         </template>
+         <KForm :id="passwordFormId" :form="passwordForm">
+            <KFormField label="Current password" name="currentPassword" required>
                <KPasswordInput
-                  v-model="password.values.current"
-                  icon="key"
+                  v-model="password.currentPassword"
                   autocomplete="current-password"
                   placeholder="••••••••"
                />
             </KFormField>
-            <KFormField label="New password" name="next">
+            <KFormField label="New password" name="newPassword" required>
                <KPasswordInput
-                  v-model="password.values.next"
-                  icon="key"
+                  v-model="password.newPassword"
                   autocomplete="new-password"
                   :generate="generatePassword"
                   copy
                />
             </KFormField>
-            <KStack direction="row" justify="end" gap="sm">
-               <KButton
-                  type="submit"
-                  label="Change password"
-                  size="sm"
-                  :disabled="
-  !password.values.current || (password.values.next ?? '').length < MIN_PASSWORD_LENGTH
-"
-               />
-            </KStack>
          </KForm>
       </KSettingsGroup>
    </template>
@@ -78,53 +80,40 @@ import {
   Input as KInput,
   PasswordInput as KPasswordInput,
   SettingsGroup as KSettingsGroup,
-  Stack as KStack,
+  toast,
   useForm
 } from "@xleddyl/443-components-vue";
-import { watch } from "#imports";
+import { ref, useId, watch } from "#imports";
 import { generatePassword, useCmsAccount } from "../../composables/cms-account";
-import { useCmsToast } from "../../composables/cms-toast";
 import { cmsApi } from "../../utils/api";
-import { errorMessage } from "../../utils/ui";
 const { user, email, isSuperAdmin, refresh } = useCmsAccount();
-const toast = useCmsToast();
-const profile = useForm({
-  schema: { name: { initial: () => user.value?.name ?? "" } },
-  onSubmit: saveProfile
+const profileFormId = useId();
+const passwordFormId = useId();
+const profile = ref({ name: user.value?.name ?? "" });
+const profileForm = useForm({
+  values: profile,
+  schema: { name: { maxLength: 120 } },
+  onSubmit: async (values) => {
+    await cmsApi("/api/cms/account", { method: "PUT", body: { name: values.name || null } });
+    await refresh();
+    toast.success("Profile saved");
+  }
 });
 watch(
   () => user.value?.name,
-  (name) => profile.reset({ name: name ?? "" })
+  (name) => profileForm.reset({ name: name ?? "" })
 );
-async function saveProfile(values) {
-  try {
-    await cmsApi("/api/cms/account", {
-      method: "PUT",
-      body: { name: values.name || null }
-    });
-    await refresh();
-    toast.add({ title: "Profile saved", color: "success" });
-  } catch (error) {
-    toast.add({ title: "Profile not saved", description: errorMessage(error), color: "error" });
-  }
-}
-const password = useForm({
+const password = ref({ currentPassword: "", newPassword: "" });
+const passwordForm = useForm({
+  values: password,
   schema: {
-    current: { initial: () => "" },
-    next: { initial: () => "" }
+    currentPassword: { required: true },
+    newPassword: { required: true, minLength: MIN_PASSWORD_LENGTH, maxLength: 256 }
   },
-  onSubmit: savePassword
-});
-async function savePassword(values) {
-  try {
-    await cmsApi("/api/cms/account/password", {
-      method: "PUT",
-      body: { currentPassword: values.current, newPassword: values.next }
-    });
-    password.reset();
-    toast.add({ title: "Password changed", color: "success" });
-  } catch (error) {
-    password.setError("", errorMessage(error) ?? "Password not changed.");
+  onSubmit: async (values) => {
+    await cmsApi("/api/cms/account/password", { method: "PUT", body: values });
+    passwordForm.reset({ currentPassword: "", newPassword: "" });
+    toast.success("Password changed");
   }
-}
+});
 </script>