@xleddyl/nuxt-cms 0.4.3 → 0.5.0

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

@@ -1,170 +1,177 @@
 <template>
-   <div class="cms-settings-entry">
-      <div class="cms-settings-entry-header">
-         <div class="cms-settings-heading">
-            <h2 class="cms-title cms-title-sm">Users</h2>
-            <p class="cms-settings-hint">
-               Users can do everything in the panel, except manage users.
-            </p>
-         </div>
-         <CmsButton
-            v-if="!creating"
-            label="Add user"
-            icon="user-plus"
-            size="sm"
-            @click="startCreate"
+   <KAlert
+      v-if="created"
+      tone="accent"
+      :icon="cmsIcon('key')"
+      :title="created.title"
+      class="cms-credentials-alert"
+   >
+      <p>Share these credentials with the user. The password does not show again.</p>
+      <KDescriptionList
+         :items="[
+  { key: 'email', label: 'Email', value: created.email },
+  { key: 'password', label: 'Password', value: created.password }
+]"
+         :divided="false"
+         class="cms-credentials-items"
+      >
+         <template #value-password="{ item }">
+            <span class="k-mono">{{ item.value }}</span>
+         </template>
+      </KDescriptionList>
+      <template #actions>
+         <KCopyButton
+            :value="`Email: ${created.email}
+Password: ${created.password}`"
+            label="Copy credentials"
+            copied-label="Copied"
+            show-label
+            variant="soft"
+            tone="accent"
          />
-      </div>
+         <KButton label="Done" size="sm" @click="created = null" />
+      </template>
+   </KAlert>
 
-      <div v-if="created" class="cms-credentials">
-         <div class="cms-settings-heading">
-            <p class="cms-settings-label">{{ created.title }}</p>
-            <p class="cms-settings-hint">
-               Share these credentials with the user. The password does not show again.
-            </p>
-         </div>
-         <dl class="cms-credentials-list">
-            <dt>Email</dt>
-            <dd>{{ created.email }}</dd>
-            <dt>Password</dt>
-            <dd class="cms-mono">{{ created.password }}</dd>
-         </dl>
-         <div class="cms-actions is-end">
-            <CmsButton
-               :label="copied ? 'Copied' : 'Copy credentials'"
-               :icon="copied ? 'clipboard-document-check' : 'clipboard-document'"
-               variant="soft"
+   <KCard v-if="creating" variant="subtle" title="New user" class="cms-user-create">
+      <KForm :form="draft">
+         <KGrid :columns="2">
+            <KFormField label="Email" name="email" required>
+               <KInput
+                  v-model="draft.values.email"
+                  type="email"
+                  :icon="cmsIcon('envelope')"
+                  placeholder="name@example.com"
+                  autocomplete="off"
+               />
+            </KFormField>
+            <KFormField label="Name" name="name">
+               <KInput v-model="draft.values.name" placeholder="Optional" autocomplete="off" />
+            </KFormField>
+         </KGrid>
+         <KFormField label="Password" name="password" required>
+            <KPasswordInput
+               v-model="draft.values.password"
+               icon="key"
+               autocomplete="new-password"
+               :generate="generatePassword"
+               copy
+            />
+         </KFormField>
+         <KStack direction="row" justify="end" gap="sm">
+            <KButton label="Cancel" variant="ghost" tone="neutral" size="sm" @click="cancel" />
+            <KButton
+               type="submit"
+               label="Create user"
                size="sm"
-               @click="copyCredentials"
+               :disabled="
+  !draft.values.email || (draft.values.password ?? '').length < MIN_PASSWORD_LENGTH
+"
             />
-            <CmsButton label="Done" size="sm" @click="created = null" />
-         </div>
-      </div>
+         </KStack>
+      </KForm>
+   </KCard>
+
+   <KSpinner v-if="loading" />
 
-      <div v-if="creating" class="cms-credentials">
-         <p class="cms-settings-label">New user</p>
-         <CmsForm :state="draft" @submit="create">
-            <CmsAlert v-if="formError" color="error" :title="formError" />
-            <div class="cms-form-row" style="--cms-row-cols: 2">
-               <CmsFormField label="Email" name="email" required>
-                  <CmsInput
-                     v-model="draft.email"
-                     type="email"
-                     icon="envelope"
-                     placeholder="name@example.com"
-                     autocomplete="off"
-                  />
-               </CmsFormField>
-               <CmsFormField label="Name" name="name">
-                  <CmsInput v-model="draft.name" placeholder="Optional" autocomplete="off" />
-               </CmsFormField>
+   <ul v-else-if="users.length" class="cms-user-list">
+      <li v-for="account in users" :key="account.id" class="cms-user-row">
+         <div class="cms-user-main">
+            <KAvatar :name="account.name || account.email" size="sm" decorative />
+            <div class="cms-user-text">
+               <span class="cms-user-name">{{ account.name || account.email }}</span>
+               <span class="cms-user-meta">
+                  {{ account.name ? `${account.email} \xB7 ` : "" }}{{ lastLogin(account) }}
+               </span>
             </div>
-            <CmsFormField label="Password" name="password" required>
-               <CmsPasswordInput v-model="draft.password" generate copy />
-            </CmsFormField>
-            <div class="cms-actions is-end">
-               <CmsButton
+            <KStack direction="row" gap="none">
+               <KButton
+                  :icon="cmsIcon('key')"
+                  variant="ghost"
+                  tone="neutral"
+                  size="sm"
+                  title="Set a new password"
+                  aria-label="Set a new password"
+                  @click="startReset(account)"
+               />
+               <KButton
+                  :icon="cmsIcon('trash')"
+                  variant="ghost"
+                  tone="danger"
+                  size="sm"
+                  title="Delete user"
+                  aria-label="Delete user"
+                  @click="remove(account)"
+               />
+            </KStack>
+         </div>
+         <KForm v-if="resetting === account.id" :form="reset" class="cms-user-reset">
+            <KFormField label="New password" name="password">
+               <KPasswordInput
+                  v-model="reset.values.password"
+                  icon="key"
+                  autocomplete="new-password"
+                  :generate="generatePassword"
+                  copy
+               />
+            </KFormField>
+            <KStack direction="row" justify="end" gap="sm">
+               <KButton
                   label="Cancel"
                   variant="ghost"
-                  color="neutral"
+                  tone="neutral"
                   size="sm"
-                  @click="cancel"
+                  @click="resetting = null"
                />
-               <CmsButton
+               <KButton
                   type="submit"
-                  label="Create user"
+                  label="Set password"
                   size="sm"
-                  :loading="busy"
-                  :disabled="!draft.email || draft.password.length < MIN_PASSWORD_LENGTH"
+                  :disabled="(reset.values.password ?? '').length < MIN_PASSWORD_LENGTH"
                />
-            </div>
-         </CmsForm>
-      </div>
-
-      <CmsSpinner v-if="loading" />
+            </KStack>
+         </KForm>
+      </li>
+   </ul>
 
-      <ul v-else-if="users.length" class="cms-settings-list">
-         <li v-for="account in users" :key="account.id" class="cms-user-row">
-            <div class="cms-user-main">
-               <span class="cms-avatar">{{ initialOf(account.name, account.email) }}</span>
-               <div class="cms-account-text">
-                  <span class="cms-account-name">{{ account.name || account.email }}</span>
-                  <span class="cms-account-email">
-                     {{ account.name ? `${account.email} \xB7 ` : "" }}{{ lastLogin(account) }}
-                  </span>
-               </div>
-               <div class="cms-user-actions">
-                  <CmsButton
-                     icon="key"
-                     variant="ghost"
-                     color="neutral"
-                     size="sm"
-                     title="Set a new password"
-                     aria-label="Set a new password"
-                     @click="startReset(account)"
-                  />
-                  <CmsButton
-                     icon="trash"
-                     variant="ghost"
-                     color="error"
-                     size="sm"
-                     title="Delete user"
-                     aria-label="Delete user"
-                     @click="remove(account)"
-                  />
-               </div>
-            </div>
-            <CmsForm
-               v-if="resetting === account.id"
-               :state="reset"
-               class="cms-user-reset"
-               @submit="saveReset(account)"
-            >
-               <CmsFormField label="New password" name="password">
-                  <CmsPasswordInput v-model="reset.password" generate copy />
-               </CmsFormField>
-               <div class="cms-actions is-end">
-                  <CmsButton
-                     label="Cancel"
-                     variant="ghost"
-                     color="neutral"
-                     size="sm"
-                     @click="resetting = null"
-                  />
-                  <CmsButton
-                     type="submit"
-                     label="Set password"
-                     size="sm"
-                     :loading="busy"
-                     :disabled="reset.password.length < MIN_PASSWORD_LENGTH"
-                  />
-               </div>
-            </CmsForm>
-         </li>
-      </ul>
-
-      <CmsEmptyState
-         v-else-if="!creating"
-         icon="users"
-         title="No users yet"
-         body="Add a user to give someone access to the panel."
-      />
-   </div>
+   <KEmptyState
+      v-else-if="!creating"
+      :icon="cmsIcon('users')"
+      title="No users yet"
+      description="Add a user to give someone access to the panel."
+   />
 </template>
 
 <script setup>
 import { MIN_PASSWORD_LENGTH } from "#nuxt-cms";
-import { onMounted, ref } from "#imports";
-import { generatePassword, initialOf } from "../../composables/cms-account";
+import {
+  Alert as KAlert,
+  Avatar as KAvatar,
+  Button as KButton,
+  Card as KCard,
+  CopyButton as KCopyButton,
+  DescriptionList as KDescriptionList,
+  EmptyState as KEmptyState,
+  Form as KForm,
+  FormField as KFormField,
+  Grid as KGrid,
+  Input as KInput,
+  PasswordInput as KPasswordInput,
+  Spinner as KSpinner,
+  Stack as KStack,
+  useForm
+} from "@xleddyl/443-components-vue";
+import { onMounted, ref, watch } from "#imports";
+import { generatePassword } from "../../composables/cms-account";
 import { useCmsConfirm } from "../../composables/cms-confirm";
 import { useCmsToast } from "../../composables/cms-toast";
 import { cmsApi } from "../../utils/api";
-import { errorMessage } from "../../utils/ui";
+import { cmsIcon, errorMessage } from "../../utils/ui";
 const toast = useCmsToast();
 const confirmAction = useCmsConfirm();
+const creating = defineModel("creating", { type: Boolean, ...{ default: false } });
 const users = ref([]);
 const loading = ref(true);
-const busy = ref(false);
 async function load() {
   try {
     users.value = await cmsApi("/api/cms/users");
@@ -182,83 +189,69 @@ function lastLogin(account) {
     timeStyle: "short"
   })}`;
 }
-const creating = ref(false);
-const draft = ref({ email: "", name: "", password: "" });
-const formError = ref(null);
 const created = ref(null);
-const copied = ref(false);
-function startCreate() {
-  created.value = null;
-  formError.value = null;
-  draft.value = { email: "", name: "", password: generatePassword() };
-  creating.value = true;
-}
+const draft = useForm({
+  schema: {
+    email: { initial: () => "" },
+    name: { initial: () => "" },
+    password: { initial: () => "" }
+  },
+  onSubmit: create
+});
+watch(
+  creating,
+  (value) => {
+    if (!value) return;
+    created.value = null;
+    draft.reset({ email: "", name: "", password: generatePassword() });
+  },
+  { immediate: true }
+);
 function cancel() {
   creating.value = false;
 }
 async function create() {
-  busy.value = true;
-  formError.value = null;
+  const password = draft.values.password ?? "";
   try {
     const account = await cmsApi("/api/cms/users", {
       method: "POST",
       body: {
-        email: draft.value.email,
-        name: draft.value.name || null,
-        password: draft.value.password
+        email: String(draft.values.email ?? ""),
+        name: draft.values.name ? String(draft.values.name) : null,
+        password
       }
     });
     users.value = [...users.value, account];
-    created.value = {
-      title: "User created",
-      email: account.email,
-      password: draft.value.password
-    };
-    copied.value = false;
+    created.value = { title: "User created", email: account.email, password };
     creating.value = false;
   } catch (error) {
-    formError.value = errorMessage(error) ?? "User not created.";
-  } finally {
-    busy.value = false;
-  }
-}
-async function copyCredentials() {
-  if (!created.value) return;
-  try {
-    await navigator.clipboard.writeText(
-      `Email: ${created.value.email}
-Password: ${created.value.password}`
-    );
-    copied.value = true;
-  } catch {
-    copied.value = false;
+    draft.setError("", errorMessage(error) ?? "User not created.");
   }
 }
 const resetting = ref(null);
-const reset = ref({ password: "" });
+const reset = useForm({
+  schema: { password: { initial: () => "" } },
+  onSubmit: () => {
+    const account = users.value.find((candidate) => candidate.id === resetting.value);
+    return account ? saveReset(account) : void 0;
+  }
+});
 function startReset(account) {
-  reset.value = { password: generatePassword() };
+  reset.reset({ password: generatePassword() });
   resetting.value = resetting.value === account.id ? null : account.id;
 }
 async function saveReset(account) {
-  busy.value = true;
+  const password = reset.values.password ?? "";
   try {
     const updated = await cmsApi(`/api/cms/users/${account.id}`, {
       method: "PUT",
-      body: { password: reset.value.password }
+      body: { password }
     });
     users.value = users.value.map((u) => u.id === updated.id ? updated : u);
-    created.value = {
-      title: "Password changed",
-      email: account.email,
-      password: reset.value.password
-    };
-    copied.value = false;
+    created.value = { title: "Password changed", email: account.email, password };
     resetting.value = null;
   } catch (error) {
     toast.add({ title: "Password not changed", description: errorMessage(error), color: "error" });
-  } finally {
-    busy.value = false;
   }
 }
 async function remove(account) {

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

@@ -1,3 +1,10 @@
-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>;
+type __VLS_ModelProps = {
+    'creating'?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:creating": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{
+    "onUpdate:creating"?: ((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/SlugField.vue

@@ -1,27 +1,30 @@
 <template>
-   <CmsInput
+   <KInput
       :model-value="model ?? ''"
-      class="font-mono"
+      class="k-mono"
       @update:model-value="
   (v) => {
-    model = v || null;
+    model = v == null || v === '' ? null : String(v);
     touched = true;
   }
 "
    >
       <template v-if="source !== void 0" #trailing>
-         <CmsButton
+         <KButton
             icon="arrow-path"
             size="xs"
             variant="ghost"
-            color="neutral"
+            tone="neutral"
+            aria-label="Regenerate slug"
+            title="Regenerate slug"
             @click="regenerate"
          />
       </template>
-   </CmsInput>
+   </KInput>
 </template>
 
 <script setup>
+import { Button as KButton, Input as KInput } from "@xleddyl/443-components-vue";
 import { ref, watch } from "#imports";
 import { slugify } from "#nuxt-cms";
 const props = defineProps({

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

@@ -1,14 +1,15 @@
 <template>
-   <span
-      class="cms-badge"
-      :class="scheduled ? 'is-scheduled' : published ? 'is-published' : 'is-draft'"
+   <KBadge
+      :label="scheduled ? 'Scheduled' : published ? 'Published' : 'Draft'"
+      :tone="scheduled ? 'warning' : published ? 'success' : 'neutral'"
+      :variant="scheduled || published ? 'soft' : 'outline'"
+      dot
       :title="scheduled && at ? `Goes live ${at}` : void 0"
-   >
-      {{ scheduled ? "Scheduled" : published ? "Published" : "Draft" }}
-   </span>
+   />
 </template>
 
 <script setup>
+import { Badge as KBadge } from "@xleddyl/443-components-vue";
 defineProps({
   published: { type: Boolean, required: false },
   scheduled: { type: Boolean, required: false },

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

@@ -1,16 +1,17 @@
 <template>
    <CmsMediaField
       v-if="props.field.type === 'media'"
-      v-model="currentMedia"
+      v-model="currentOrNull"
       :media-type="props.field.mediaType"
       :accept="props.field.accept"
    />
-   <CmsRichTextField v-else-if="props.field.type === 'richtext'" v-model="current" />
-   <CmsTextarea v-else-if="props.field.textarea" v-model="current" :rows="8" />
-   <CmsInput v-else v-model="current" />
+   <CmsRichTextField v-else-if="props.field.type === 'richtext'" v-model="currentOrNull" />
+   <KTextarea v-else-if="props.field.textarea" v-model="currentText" :rows="8" />
+   <KInput v-else v-model="current" />
 </template>
 
 <script setup>
+import { Input as KInput, Textarea as KTextarea } from "@xleddyl/443-components-vue";
 import { computed } from "#imports";
 import { useCmsRuntime } from "../../composables/cms-runtime";
 const props = defineProps({
@@ -24,14 +25,18 @@ function write(value) {
   const next = Object.fromEntries(
     Object.entries(model.value ?? {}).filter(([locale]) => locale !== active.value)
   );
-  if (value != null && value !== "") next[active.value] = value;
+  if (value != null && value !== "") next[active.value] = String(value);
   model.value = Object.keys(next).length ? next : null;
 }
 const current = computed({
   get: () => model.value?.[active.value] ?? "",
   set: write
 });
-const currentMedia = computed({
+const currentText = computed({
+  get: () => model.value?.[active.value] ?? "",
+  set: write
+});
+const currentOrNull = computed({
   get: () => model.value?.[active.value] ?? null,
   set: write
 });