@xleddyl/nuxt-cms 0.1.60 → 0.2.0

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

@@ -4,16 +4,22 @@ type __VLS_Props = {
     mediaType?: MediaType | MediaType[];
     accept?: string[];
 };
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+type __VLS_ModelProps = {
+    'folder'?: string | null;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     select: (item: {
         key: string;
         url: string | null;
     }) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "update:folder": (value: string | null) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     onSelect?: ((item: {
         key: string;
         url: string | null;
     }) => any) | undefined;
+    "onUpdate:folder"?: ((value: string | null) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -4,6 +4,7 @@ type __VLS_Props = {
     mediaType?: MediaType | MediaType[];
     accept?: string[];
     folder?: string | null;
+    directories?: boolean;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     uploaded: (items: MediaItem[]) => any;

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

@@ -1,165 +1,102 @@
 <template>
-   <button
-      type="button"
-      class="cms-dropzone"
-      :class="{ 'is-over': dragOver, 'is-busy': uploading }"
-      :disabled="uploading"
-      @click="input?.click()"
-      @dragover.prevent="dragOver = true"
-      @dragleave.prevent="dragOver = false"
-      @drop.prevent="onDrop"
-   >
-      <input
-         ref="input"
-         type="file"
-         class="hidden"
-         :accept="acceptAttr"
-         :multiple="multiple"
-         @change="onChange"
-         @click.stop
-      />
-      <CmsIcon
-         :name="uploading ? 'arrow-path' : 'cloud-arrow-up'"
-         class="size-5 shrink-0"
-         :class="{ 'animate-spin': uploading }"
-      />
-      <span class="text-sm font-medium">
-         {{
-            uploading ? `Uploading ${Math.min(done + 1, total)} of ${total}\u2026` : multiple ? "Drop files here or click to browse" : "Drop a file here or click to browse"
-         }}
-      </span>
-      <span v-if="!uploading" class="cms-dropzone-hint">
-         <CmsIcon :name="folder ? 'folder' : 'circle-stack'" class="size-3.5" />
-         {{ folder ?? "Library root" }}
-      </span>
-   </button>
+   <div class="flex flex-col items-center gap-2">
+      <button
+         type="button"
+         class="cms-dropzone"
+         :class="{ 'is-over': dragOver, 'is-busy': uploading }"
+         :disabled="uploading"
+         @click="input?.click()"
+         @dragover.prevent="dragOver = true"
+         @dragleave.prevent="dragOver = false"
+         @drop.prevent.stop="onDrop"
+      >
+         <input
+            ref="input"
+            type="file"
+            class="hidden"
+            :accept="acceptAttr"
+            :multiple="multiple"
+            @change="onChange"
+            @click.stop
+         />
+         <CmsIcon
+            :name="uploading ? 'arrow-path' : 'cloud-arrow-up'"
+            class="size-5 shrink-0"
+            :class="{ 'animate-spin': uploading }"
+         />
+         <span class="text-sm font-medium">
+            {{
+               uploading ? `Uploading ${Math.min(done + 1, total)} of ${total}\u2026` : multiple ? "Drop files here or click to browse" : "Drop a file here or click to browse"
+            }}
+         </span>
+         <span v-if="!uploading" class="cms-dropzone-hint">
+            <CmsIcon :name="folder ? 'folder' : 'circle-stack'" class="size-3.5" />
+            {{ folder ?? "Library root" }}
+         </span>
+      </button>
+      <template v-if="directories && multiple && !uploading">
+         <input
+            ref="directoryInput"
+            type="file"
+            class="hidden"
+            webkitdirectory
+            multiple
+            @change="onChange"
+         />
+         <CmsButton
+            label="Upload a folder"
+            icon="folder-arrow-down"
+            variant="ghost"
+            color="neutral"
+            size="sm"
+            @click="directoryInput?.click()"
+         />
+      </template>
+   </div>
 </template>
 
 <script setup>
-import { formatFileSize, mediaTypeAccept } from "#nuxt-cms";
+import { mediaTypeAccept } from "#nuxt-cms";
 import { computed, ref } from "#imports";
-import { useCmsRuntime } from "../../composables/cms-runtime";
-import { useCmsToast } from "../../composables/cms-toast";
+import {
+  uploadTreeFromDrop,
+  uploadTreeFromFiles,
+  useCmsMediaUploader
+} from "../../composables/cms-media-uploader";
 const props = defineProps({
   multiple: { type: Boolean, required: false },
   mediaType: { type: null, required: false, default: "file" },
   accept: { type: Array, required: false },
-  folder: { type: [String, null], required: false, default: null }
+  folder: { type: [String, null], required: false, default: null },
+  directories: { type: Boolean, required: false }
 });
 const emit = defineEmits(["uploaded"]);
-const toast = useCmsToast();
-const { mediaMaxFileSize } = useCmsRuntime();
-async function imageDimensions(file) {
-  try {
-    const bitmap = await createImageBitmap(file);
-    const dims = { width: bitmap.width, height: bitmap.height };
-    bitmap.close();
-    return dims;
-  } catch {
-    return {};
-  }
-}
-function videoDimensions(file) {
-  return new Promise((resolve) => {
-    const url = URL.createObjectURL(file);
-    const video = document.createElement("video");
-    const settle = (dims) => {
-      URL.revokeObjectURL(url);
-      resolve(dims);
-    };
-    video.preload = "metadata";
-    video.muted = true;
-    video.onloadedmetadata = () => settle(
-      video.videoWidth && video.videoHeight ? { width: video.videoWidth, height: video.videoHeight } : {}
-    );
-    video.onerror = () => settle({});
-    video.src = url;
-  });
-}
-async function mediaDimensions(file) {
-  if (file.type.startsWith("image/")) return imageDimensions(file);
-  if (file.type.startsWith("video/")) return videoDimensions(file);
-  return {};
-}
+const { upload, uploading, done, total } = useCmsMediaUploader();
 const input = ref(null);
+const directoryInput = ref(null);
 const dragOver = ref(false);
-const uploading = ref(false);
-const done = ref(0);
-const total = ref(0);
 const acceptAttr = computed(
   () => (props.accept?.length ? props.accept : mediaTypeAccept(props.mediaType))?.join(",")
 );
-function matchesAccept(file) {
-  if (!acceptAttr.value) return true;
-  return acceptAttr.value.split(",").some((raw) => {
-    const pattern = raw.trim().toLowerCase();
-    if (pattern.endsWith("/*")) return file.type.toLowerCase().startsWith(pattern.slice(0, -1));
-    if (pattern.startsWith(".")) return file.name.toLowerCase().endsWith(pattern);
-    return file.type.toLowerCase() === pattern;
+async function handleTree(pending) {
+  const tree = await pending;
+  const items = await upload(tree, {
+    folder: props.folder,
+    accept: acceptAttr.value,
+    multiple: props.multiple
   });
-}
-async function uploadOne(file) {
-  const presign = await $fetch("/api/cms/admin/media/presign", {
-    method: "POST",
-    body: {
-      filename: file.name,
-      contentType: file.type || "application/octet-stream",
-      size: file.size,
-      folder: props.folder
-    }
-  });
-  const res = await fetch(presign.uploadUrl, {
-    method: "PUT",
-    headers: presign.headers,
-    body: file
-  });
-  if (!res.ok) throw new Error(`Upload failed (${res.status})`);
-  const item = await $fetch("/api/cms/admin/media", {
-    method: "POST",
-    body: {
-      key: presign.key,
-      folder: presign.folder,
-      mime: file.type || null,
-      size: file.size,
-      ...await mediaDimensions(file)
-    }
-  });
-  done.value++;
-  return item;
-}
-async function handleFiles(list) {
-  let files = Array.from(list).filter(matchesAccept);
-  const tooLarge = files.filter((file) => file.size > mediaMaxFileSize);
-  for (const file of tooLarge) {
-    toast.add({
-      title: `File too large (max ${formatFileSize(mediaMaxFileSize)}): ${file.name}`,
-      color: "error"
-    });
-  }
-  files = files.filter((file) => file.size <= mediaMaxFileSize);
-  if (!props.multiple) files = files.slice(0, 1);
-  if (!files.length || uploading.value) return;
-  uploading.value = true;
-  done.value = 0;
-  total.value = files.length;
-  try {
-    const results = await Promise.allSettled(files.map(uploadOne));
-    const ok = results.filter((r) => r.status === "fulfilled").map((r) => r.value);
-    const failed = results.length - ok.length;
-    if (failed)
-      toast.add({ title: `${failed} upload${failed > 1 ? "s" : ""} failed`, color: "error" });
-    if (ok.length) emit("uploaded", ok);
-  } finally {
-    uploading.value = false;
-  }
+  if (items.length || props.directories && tree.directories.length) emit("uploaded", items);
 }
 function onChange(event) {
   const el = event.target;
-  if (el.files?.length) void handleFiles(el.files);
+  if (el.files?.length) void handleTree(uploadTreeFromFiles(el.files));
   el.value = "";
 }
 function onDrop(event) {
   dragOver.value = false;
-  if (event.dataTransfer?.files.length) void handleFiles(event.dataTransfer.files);
+  if (!event.dataTransfer?.files.length) return;
+  void handleTree(
+    props.directories ? uploadTreeFromDrop(event.dataTransfer) : uploadTreeFromFiles(event.dataTransfer.files)
+  );
 }
 </script>

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

@@ -4,6 +4,7 @@ type __VLS_Props = {
     mediaType?: MediaType | MediaType[];
     accept?: string[];
     folder?: string | null;
+    directories?: boolean;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     uploaded: (items: MediaItem[]) => any;

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

@@ -4,13 +4,15 @@ export interface CmsBreadcrumbLink {
 }
 type __VLS_Props = {
     title: string;
+    icon?: string;
+    description?: string;
     links?: CmsBreadcrumbLink[];
 };
-declare var __VLS_12: {}, __VLS_14: {};
+declare var __VLS_17: {}, __VLS_19: {};
 type __VLS_Slots = {} & {
-    badge?: (props: typeof __VLS_12) => any;
+    badge?: (props: typeof __VLS_17) => any;
 } & {
-    default?: (props: typeof __VLS_14) => any;
+    default?: (props: typeof __VLS_19) => 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/PageHeader.vue

@@ -4,14 +4,22 @@
          <nav v-if="links?.length" class="cms-breadcrumb">
             <template v-for="link in links" :key="link.to">
                <NuxtLink :to="link.to" class="cms-breadcrumb-link">{{ link.label }}</NuxtLink>
-               <CmsIcon name="chevron-right" class="cms-breadcrumb-separator size-2.5" />
+               <CmsIcon name="chevron-right" class="cms-breadcrumb-separator size-3" />
             </template>
          </nav>
-         <div class="cms-actions">
-            <h1 class="cms-title cms-title-md">
-               {{ title }}
-            </h1>
-            <slot name="badge" />
+         <div class="cms-page-title-row">
+            <span v-if="icon" class="cms-page-icon">
+               <CmsIcon :name="icon" class="size-[18px]" />
+            </span>
+            <div class="cms-page-title-text">
+               <div class="cms-actions">
+                  <h1 class="cms-title cms-title-md">
+                     {{ title }}
+                  </h1>
+                  <slot name="badge" />
+               </div>
+               <p v-if="description" class="cms-page-description">{{ description }}</p>
+            </div>
          </div>
       </div>
       <slot />
@@ -21,6 +29,8 @@
 <script setup>
 defineProps({
   title: { type: String, required: true },
+  icon: { type: String, required: false },
+  description: { type: String, required: false },
   links: { type: Array, required: false }
 });
 </script>

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

@@ -4,13 +4,15 @@ export interface CmsBreadcrumbLink {
 }
 type __VLS_Props = {
     title: string;
+    icon?: string;
+    description?: string;
     links?: CmsBreadcrumbLink[];
 };
-declare var __VLS_12: {}, __VLS_14: {};
+declare var __VLS_17: {}, __VLS_19: {};
 type __VLS_Slots = {} & {
-    badge?: (props: typeof __VLS_12) => any;
+    badge?: (props: typeof __VLS_17) => any;
 } & {
-    default?: (props: typeof __VLS_14) => any;
+    default?: (props: typeof __VLS_19) => 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/PasswordInput.d.vue.ts

@@ -0,0 +1,17 @@
+type __VLS_Props = {
+    generate?: boolean;
+    copy?: boolean;
+    placeholder?: string;
+    autocomplete?: string;
+};
+type __VLS_ModelProps = {
+    modelValue: string;
+};
+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) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,77 @@
+<template>
+   <CmsInput
+      v-model="model"
+      :type="visible ? 'text' : 'password'"
+      icon="key"
+      class="cms-password-input"
+      :autocomplete="autocomplete ?? 'new-password'"
+      :placeholder="placeholder"
+   >
+      <template #trailing>
+         <span class="cms-password-actions">
+            <button
+               type="button"
+               class="cms-password-action"
+               :title="visible ? 'Hide password' : 'Show password'"
+               :aria-label="visible ? 'Hide password' : 'Show password'"
+               @click="visible = !visible"
+            >
+               <CmsIcon :name="visible ? 'eye-slash' : 'eye'" class="size-4" />
+            </button>
+            <button
+               v-if="generate"
+               type="button"
+               class="cms-password-action"
+               title="Generate a password"
+               aria-label="Generate a password"
+               @click="regenerate"
+            >
+               <CmsIcon name="sparkles" class="size-4" />
+            </button>
+            <button
+               v-if="copy"
+               type="button"
+               class="cms-password-action"
+               :class="{ 'is-done': copied }"
+               :title="copied ? 'Copied' : 'Copy password'"
+               :aria-label="copied ? 'Copied' : 'Copy password'"
+               :disabled="!model"
+               @click="copyPassword"
+            >
+               <CmsIcon
+                  :name="copied ? 'clipboard-document-check' : 'clipboard-document'"
+                  class="size-4"
+               />
+            </button>
+         </span>
+      </template>
+   </CmsInput>
+</template>
+
+<script setup>
+import { ref } from "#imports";
+import { generatePassword } from "../../composables/cms-account";
+defineProps({
+  generate: { type: Boolean, required: false },
+  copy: { type: Boolean, required: false },
+  placeholder: { type: String, required: false },
+  autocomplete: { type: String, required: false }
+});
+const model = defineModel({ type: String, ...{ required: true } });
+const visible = ref(false);
+const copied = ref(false);
+let copiedTimer;
+function regenerate() {
+  model.value = generatePassword();
+  visible.value = true;
+}
+async function copyPassword() {
+  if (!model.value) return;
+  await navigator.clipboard.writeText(model.value);
+  copied.value = true;
+  clearTimeout(copiedTimer);
+  copiedTimer = setTimeout(() => {
+    copied.value = false;
+  }, 1600);
+}
+</script>

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

@@ -0,0 +1,17 @@
+type __VLS_Props = {
+    generate?: boolean;
+    copy?: boolean;
+    placeholder?: string;
+    autocomplete?: string;
+};
+type __VLS_ModelProps = {
+    modelValue: string;
+};
+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) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -25,11 +25,9 @@
             @input="onInput"
             @focus="onFocus"
          />
-         <CmsIcon
-            v-if="loading"
-            name="arrow-path"
-            class="cms-selectmenu-affix ml-auto size-4 animate-spin"
-         />
+         <span v-if="loading" class="cms-selectmenu-affix ml-auto flex">
+            <CmsIcon name="arrow-path" class="size-4 animate-spin" />
+         </span>
          <button
             v-else
             type="button"

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

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,138 @@
+<template>
+   <div class="cms-settings-entry">
+      <div class="cms-settings-entry-header">
+         <div class="cms-settings-heading">
+            <h2 class="cms-title cms-title-sm">Account</h2>
+            <p class="cms-settings-hint">Your profile and your password.</p>
+         </div>
+      </div>
+
+      <div class="cms-account-card">
+         <span class="cms-avatar is-lg">{{ initial }}</span>
+         <div class="cms-account-text">
+            <span class="cms-account-name">{{ displayName }}</span>
+            <span class="cms-account-email">{{ email }}</span>
+         </div>
+         <span class="cms-badge is-muted">{{ isSuperAdmin ? "Super admin" : "Admin" }}</span>
+      </div>
+
+      <CmsAlert v-if="isSuperAdmin" color="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.
+      </CmsAlert>
+
+      <template v-else>
+         <div class="cms-settings-group">
+            <div class="cms-settings-heading">
+               <p class="cms-settings-label">Profile</p>
+               <p class="cms-settings-hint">The name shows in the sidebar.</p>
+            </div>
+            <CmsForm :state="profile" @submit="saveProfile">
+               <div class="cms-form-row" style="--cms-row-cols: 2">
+                  <CmsFormField label="Name" name="name">
+                     <CmsInput v-model="profile.name" placeholder="Your name" autocomplete="name" />
+                  </CmsFormField>
+                  <CmsFormField label="Email" name="email">
+                     <CmsInput :model-value="email" disabled />
+                  </CmsFormField>
+               </div>
+               <div class="cms-actions is-end">
+                  <CmsButton
+                     type="submit"
+                     label="Save profile"
+                     size="sm"
+                     :loading="savingProfile"
+                     :disabled="profile.name === (user?.name ?? '')"
+                  />
+               </div>
+            </CmsForm>
+         </div>
+
+         <div class="cms-settings-group">
+            <div class="cms-settings-heading">
+               <p class="cms-settings-label">Password</p>
+               <p class="cms-settings-hint">
+                  At least {{ MIN_PASSWORD_LENGTH }} characters. Use the sparkle button to generate
+                  one.
+               </p>
+            </div>
+            <CmsForm :state="password" @submit="savePassword">
+               <CmsAlert v-if="passwordError" color="error" :title="passwordError" />
+               <CmsFormField label="Current password" name="current">
+                  <CmsPasswordInput
+                     v-model="password.current"
+                     autocomplete="current-password"
+                     placeholder="••••••••"
+                  />
+               </CmsFormField>
+               <CmsFormField label="New password" name="next">
+                  <CmsPasswordInput v-model="password.next" generate copy />
+               </CmsFormField>
+               <div class="cms-actions is-end">
+                  <CmsButton
+                     type="submit"
+                     label="Change password"
+                     size="sm"
+                     :loading="savingPassword"
+                     :disabled="!password.current || password.next.length < MIN_PASSWORD_LENGTH"
+                  />
+               </div>
+            </CmsForm>
+         </div>
+      </template>
+   </div>
+</template>
+
+<script setup>
+import { MIN_PASSWORD_LENGTH } from "#nuxt-cms";
+import { ref, watch } from "#imports";
+import { 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, displayName, initial, refresh } = useCmsAccount();
+const toast = useCmsToast();
+const profile = ref({ name: user.value?.name ?? "" });
+watch(
+  () => user.value?.name,
+  (name) => {
+    profile.value.name = name ?? "";
+  }
+);
+const savingProfile = ref(false);
+async function saveProfile() {
+  savingProfile.value = true;
+  try {
+    await cmsApi("/api/cms/account", {
+      method: "PUT",
+      body: { name: profile.value.name || null }
+    });
+    await refresh();
+    toast.add({ title: "Profile saved", color: "success" });
+  } catch (error) {
+    toast.add({ title: "Profile not saved", description: errorMessage(error), color: "error" });
+  } finally {
+    savingProfile.value = false;
+  }
+}
+const password = ref({ current: "", next: "" });
+const passwordError = ref(null);
+const savingPassword = ref(false);
+async function savePassword() {
+  savingPassword.value = true;
+  passwordError.value = null;
+  try {
+    await cmsApi("/api/cms/account/password", {
+      method: "PUT",
+      body: { currentPassword: password.value.current, newPassword: password.value.next }
+    });
+    password.value = { current: "", next: "" };
+    toast.add({ title: "Password changed", color: "success" });
+  } catch (error) {
+    passwordError.value = errorMessage(error) ?? "Password not changed.";
+  } finally {
+    savingPassword.value = false;
+  }
+}
+</script>

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

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

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