@xleddyl/nuxt-cms 0.4.4 → 0.5.0

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

@@ -1,45 +1,56 @@
 <template>
-   <CmsModal
+   <KModal
       :open="open"
       size="sm"
       :title="`Welcome to ${cmsBrand.title}`"
-      @update:open="(v) => !v && keep()"
+      @update:open="(value) => !value && keep()"
    >
-      <template #body>
-         <CmsForm :state="state" @submit="save">
-            <p class="cms-settings-hint">
-               You signed in with a password that someone shared with you. Set your own password
-               now, or keep this one. You can change it later in Settings, Account.
-            </p>
-            <CmsAlert v-if="error" color="error" :title="error" />
-            <CmsFormField label="New password" name="password">
-               <CmsPasswordInput v-model="state.password" generate copy />
-            </CmsFormField>
-            <div class="cms-actions is-end">
-               <CmsButton
-                  label="Keep current password"
-                  variant="ghost"
-                  color="neutral"
-                  :disabled="busy"
-                  @click="keep"
-               />
-               <CmsButton
-                  type="submit"
-                  label="Set password"
-                  :loading="busy"
-                  :disabled="state.password.length < MIN_PASSWORD_LENGTH"
-               />
-            </div>
-         </CmsForm>
-      </template>
-   </CmsModal>
+      <KForm :form="form">
+         <p class="cms-settings-hint">
+            You signed in with a password that someone shared with you. Set your own password now,
+            or keep this one. You can change it later in Settings, Account.
+         </p>
+         <KFormField label="New password" name="password">
+            <KPasswordInput
+               v-model="form.values.password"
+               icon="key"
+               autocomplete="new-password"
+               :generate="generatePassword"
+               copy
+            />
+         </KFormField>
+         <KStack direction="row" justify="end" gap="sm" wrap>
+            <KButton
+               label="Keep current password"
+               variant="ghost"
+               tone="neutral"
+               :disabled="form.submitting.value"
+               @click="keep"
+            />
+            <KButton
+               type="submit"
+               label="Set password"
+               :disabled="(form.values.password ?? '').length < MIN_PASSWORD_LENGTH"
+            />
+         </KStack>
+      </KForm>
+   </KModal>
 </template>
 
 <script setup>
 import { MIN_PASSWORD_LENGTH } from "#nuxt-cms";
 import { cmsBrand } from "#cms-brand";
+import {
+  Button as KButton,
+  Form as KForm,
+  FormField as KFormField,
+  Modal as KModal,
+  PasswordInput as KPasswordInput,
+  Stack as KStack,
+  useForm
+} from "@xleddyl/443-components-vue";
 import { computed, ref } from "#imports";
-import { useCmsAccount } from "../../composables/cms-account";
+import { generatePassword, useCmsAccount } from "../../composables/cms-account";
 import { useCmsToast } from "../../composables/cms-toast";
 import { cmsApi } from "../../utils/api";
 import { errorMessage } from "../../utils/ui";
@@ -47,29 +58,26 @@ const { user, refresh } = useCmsAccount();
 const toast = useCmsToast();
 const dismissed = ref(false);
 const open = computed(() => !!user.value?.firstLogin && !dismissed.value);
-const state = ref({ password: "" });
-const error = ref(null);
-const busy = ref(false);
+const form = useForm({
+  schema: { password: { initial: () => "" } },
+  onSubmit: save
+});
 async function keep() {
   dismissed.value = true;
   await cmsApi("/api/cms/account/welcome", { method: "POST" }).catch(() => void 0);
   await refresh();
 }
-async function save() {
-  busy.value = true;
-  error.value = null;
+async function save(values) {
   try {
     await cmsApi("/api/cms/account/password", {
       method: "PUT",
-      body: { newPassword: state.value.password }
+      body: { newPassword: values.password }
     });
     dismissed.value = true;
     await refresh();
     toast.add({ title: "Password set", color: "success" });
   } catch (e) {
-    error.value = errorMessage(e) ?? "Password not set.";
-  } finally {
-    busy.value = false;
+    form.setError("", errorMessage(e) ?? "Password not set.");
   }
 }
 </script>

package/dist/runtime/app/composables/cms-confirm.d.ts

@@ -12,10 +12,4 @@ export interface CmsConfirmOptions {
     confirmLabel?: string;
     groups?: CmsConfirmGroup[];
 }
-export interface CmsConfirmState extends CmsConfirmOptions {
-    open: boolean;
-    message: string;
-    resolve?: (value: boolean) => void;
-}
-export declare function useCmsConfirmState(): import("vue").Ref<CmsConfirmState, CmsConfirmState>;
 export declare function useCmsConfirm(): (message: string, options?: CmsConfirmOptions) => Promise<boolean>;

package/dist/runtime/app/composables/cms-confirm.js

@@ -1,17 +1,17 @@
-import { useState } from "#imports";
-export function useCmsConfirmState() {
-  return useState("cms-confirm", () => ({ open: false, message: "" }));
-}
+import { h, markRaw } from "vue";
+import { useConfirm } from "@xleddyl/443-components-vue";
+import CmsConfirmGroups from "../components/cms/ConfirmGroups.vue";
 export function useCmsConfirm() {
-  const state = useCmsConfirmState();
-  return (message, options) => new Promise((resolve) => {
-    state.value = {
-      open: true,
-      message,
+  const confirm = useConfirm();
+  return (message, options) => {
+    const groups = options?.groups;
+    const body = groups?.length ? (_props, { attrs }) => h(CmsConfirmGroups, { ...attrs, groups }) : void 0;
+    return confirm({
       title: options?.title,
+      description: message,
       confirmLabel: options?.confirmLabel,
-      groups: options?.groups,
-      resolve
-    };
-  });
+      tone: "danger",
+      body: body ? markRaw(body) : void 0
+    });
+  };
 }

package/dist/runtime/app/composables/cms-media-uploader.d.ts

@@ -8,6 +8,10 @@ export interface UploadTree {
     directories: string[];
 }
 export declare function uploadTreeFromFiles(list: FileList | File[]): UploadTree;
+export declare function uploadTreeFromEntries(entries: {
+    file: File;
+    path: string;
+}[], directories?: string[]): UploadTree;
 export declare function uploadTreeFromDrop(dataTransfer: DataTransfer): Promise<UploadTree>;
 export declare function useCmsMediaUploader(): {
     upload: (source: FileList | File[] | UploadTree, options: {

package/dist/runtime/app/composables/cms-media-uploader.js

@@ -5,6 +5,7 @@ import {
   normalizeMediaFolder
 } from "../../shared/index.js";
 import { ref } from "#imports";
+import { readDroppedFiles } from "@xleddyl/443-components-vue";
 import { useCmsRuntime } from "./cms-runtime.js";
 import { useCmsToast } from "./cms-toast.js";
 async function imageDimensions(file) {
@@ -52,9 +53,6 @@ const UPLOAD_CONCURRENCY = 4;
 function isHiddenName(name) {
   return name.startsWith(".");
 }
-function joinPath(parent, name) {
-  return parent ? `${parent}/${name}` : name;
-}
 export function uploadTreeFromFiles(list) {
   const files = [];
   const directories = /* @__PURE__ */ new Set();
@@ -67,44 +65,18 @@ export function uploadTreeFromFiles(list) {
   }
   return { files, directories: [...directories] };
 }
-function readDirectory(entry) {
-  const reader = entry.createReader();
-  const all = [];
-  return new Promise((resolve, reject) => {
-    const next = () => reader.readEntries((batch) => {
-      if (!batch.length) return resolve(all);
-      all.push(...batch);
-      next();
-    }, reject);
-    next();
-  });
-}
-function entryFile(entry) {
-  return new Promise((resolve, reject) => entry.file(resolve, reject));
-}
-async function walkEntry(entry, parent, tree) {
-  if (isHiddenName(entry.name)) return;
-  if (entry.isFile) {
-    tree.files.push({ file: await entryFile(entry), directory: parent });
-    return;
-  }
-  if (!entry.isDirectory) return;
-  const directory = joinPath(parent, entry.name);
-  tree.directories.push(directory);
-  const children = await readDirectory(entry);
-  for (const child of children) await walkEntry(child, directory, tree);
+export function uploadTreeFromEntries(entries, directories = []) {
+  return {
+    files: entries.map(({ file, path }) => ({
+      file,
+      directory: path.split("/").slice(0, -1).join("/") || null
+    })),
+    directories
+  };
 }
-export function uploadTreeFromDrop(dataTransfer) {
-  const files = Array.from(dataTransfer.files);
-  const entries = Array.from(dataTransfer.items ?? []).filter((item) => item.kind === "file").map((item) => item.webkitGetAsEntry?.() ?? null).filter((entry) => !!entry);
-  if (!entries.some((entry) => entry.isDirectory)) {
-    return Promise.resolve(uploadTreeFromFiles(files));
-  }
-  return (async () => {
-    const tree = { files: [], directories: [] };
-    for (const entry of entries) await walkEntry(entry, null, tree);
-    return tree;
-  })();
+export async function uploadTreeFromDrop(dataTransfer) {
+  const tree = await readDroppedFiles(dataTransfer, { directories: true, skipHidden: true });
+  return uploadTreeFromEntries(tree.files, tree.directories);
 }
 async function mapWithConcurrency(list, limit, task) {
   const results = new Array(list.length);

package/dist/runtime/app/composables/cms-theme.d.ts

@@ -1,9 +1,3 @@
-import type { Ref } from 'vue';
-export type CmsTheme = 'light' | 'dark' | 'system';
-export declare const CMS_THEMES: {
-    value: CmsTheme;
-    label: string;
-    icon: string;
-}[];
-export declare function useCmsTheme(): import("nuxt/app").CookieRef<CmsTheme>;
-export declare function setCmsTheme(theme: Ref<CmsTheme>, value: CmsTheme): void;
+import type { ThemePreference } from '@xleddyl/443-components-vue';
+export type CmsTheme = ThemePreference;
+export declare function useCmsTheme(): import("nuxt/app").CookieRef<ThemePreference>;

package/dist/runtime/app/composables/cms-theme.js

@@ -1,9 +1,4 @@
-import { nextTick, useCookie } from "#imports";
-export const CMS_THEMES = [
-  { value: "light", label: "Light", icon: "sun" },
-  { value: "dark", label: "Dark", icon: "moon" },
-  { value: "system", label: "System", icon: "computer-desktop" }
-];
+import { useCookie } from "#imports";
 export function useCmsTheme() {
   return useCookie("cms-theme", {
     default: () => "system",
@@ -12,16 +7,3 @@ export function useCmsTheme() {
     path: "/"
   });
 }
-export function setCmsTheme(theme, value) {
-  if (value === theme.value) return;
-  const doc = document;
-  const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-  if (!doc.startViewTransition || reduced) {
-    theme.value = value;
-    return;
-  }
-  doc.startViewTransition(async () => {
-    theme.value = value;
-    await nextTick();
-  });
-}

package/dist/runtime/app/composables/cms-toast.d.ts

@@ -4,10 +4,9 @@ export interface CmsToast {
     description?: string;
     color?: 'success' | 'error';
 }
-export declare function useCmsToastState(): import("vue").Ref<CmsToast[], CmsToast[]>;
 export declare function useCmsToast(): {
-    add: (toast: Omit<CmsToast, "id">) => {
-        id: number;
+    add: (input: Omit<CmsToast, "id">) => {
+        id: import("@xleddyl/443-components-vue").ToastId;
     };
-    remove: (id: number) => void;
+    remove: (id: string | number) => void;
 };

package/dist/runtime/app/composables/cms-toast.js

@@ -1,18 +1,11 @@
-import { useState } from "#imports";
-let counter = 0;
-export function useCmsToastState() {
-  return useState("cms-toasts", () => []);
-}
+import { toast } from "@xleddyl/443-components-vue";
 export function useCmsToast() {
-  const toasts = useCmsToastState();
-  function remove(id) {
-    toasts.value = toasts.value.filter((toast) => toast.id !== id);
+  function add(input) {
+    const show = input.color === "error" ? toast.error : input.color === "success" ? toast.success : toast;
+    return { id: show(input.title, { description: input.description }) };
   }
-  function add(toast) {
-    const id = ++counter;
-    toasts.value = [...toasts.value, { id, ...toast }];
-    if (import.meta.client) setTimeout(() => remove(id), 4e3);
-    return { id };
+  function remove(id) {
+    toast.dismiss(id);
   }
   return { add, remove };
 }

package/dist/runtime/app/layouts/cms-admin.d.vue.ts

@@ -1,6 +1,6 @@
-declare var __VLS_41: {};
+declare var __VLS_46: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_41) => any;
+    default?: (props: typeof __VLS_46) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;