@xleddyl/nuxt-cms 0.4.4 → 0.5.0

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

@@ -1,138 +1,130 @@
 <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>
+   <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.
+   </KAlert>
 
-      <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 ?? '')"
+   <template v-else>
+      <KSettingsGroup label="Profile" description="The name shows in the sidebar.">
+         <KForm :form="profile">
+            <KGrid :columns="2">
+               <KFormField label="Name" name="name">
+                  <KInput
+                     v-model="profile.values.name"
+                     placeholder="Your name"
+                     autocomplete="name"
                   />
-               </div>
-            </CmsForm>
-         </div>
+               </KFormField>
+               <KFormField label="Email">
+                  <KInput :model-value="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>
 
-         <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>
+      <KSettingsGroup
+         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">
+               <KPasswordInput
+                  v-model="password.values.current"
+                  icon="key"
+                  autocomplete="current-password"
+                  placeholder="••••••••"
+               />
+            </KFormField>
+            <KFormField label="New password" name="next">
+               <KPasswordInput
+                  v-model="password.values.next"
+                  icon="key"
+                  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>
 </template>
 
 <script setup>
 import { MIN_PASSWORD_LENGTH } from "#nuxt-cms";
-import { ref, watch } from "#imports";
-import { useCmsAccount } from "../../composables/cms-account";
+import {
+  Alert as KAlert,
+  Button as KButton,
+  Form as KForm,
+  FormField as KFormField,
+  Grid as KGrid,
+  Input as KInput,
+  PasswordInput as KPasswordInput,
+  SettingsGroup as KSettingsGroup,
+  Stack as KStack,
+  useForm
+} from "@xleddyl/443-components-vue";
+import { 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, displayName, initial, refresh } = useCmsAccount();
+const { user, email, isSuperAdmin, refresh } = useCmsAccount();
 const toast = useCmsToast();
-const profile = ref({ name: user.value?.name ?? "" });
+const profile = useForm({
+  schema: { name: { initial: () => user.value?.name ?? "" } },
+  onSubmit: saveProfile
+});
 watch(
   () => user.value?.name,
-  (name) => {
-    profile.value.name = name ?? "";
-  }
+  (name) => profile.reset({ name: name ?? "" })
 );
-const savingProfile = ref(false);
-async function saveProfile() {
-  savingProfile.value = true;
+async function saveProfile(values) {
   try {
     await cmsApi("/api/cms/account", {
       method: "PUT",
-      body: { name: profile.value.name || null }
+      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" });
-  } 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;
+const password = useForm({
+  schema: {
+    current: { initial: () => "" },
+    next: { initial: () => "" }
+  },
+  onSubmit: savePassword
+});
+async function savePassword(values) {
   try {
     await cmsApi("/api/cms/account/password", {
       method: "PUT",
-      body: { currentPassword: password.value.current, newPassword: password.value.next }
+      body: { currentPassword: values.current, newPassword: values.next }
     });
-    password.value = { current: "", next: "" };
+    password.reset();
     toast.add({ title: "Password changed", color: "success" });
   } catch (error) {
-    passwordError.value = errorMessage(error) ?? "Password not changed.";
-  } finally {
-    savingPassword.value = false;
+    password.setError("", errorMessage(error) ?? "Password not changed.");
   }
 }
 </script>

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

@@ -18,10 +18,10 @@
             @drop.prevent="onDrop(index)"
             @dragend="onDragEnd"
          >
-            <CmsIcon name="bars-2" class="cms-settings-grip size-4" />
-            <CmsIcon :name="iconOf(key)" class="cms-settings-item-icon size-4" />
+            <KIcon :name="cmsIcon('bars-2')" class="cms-settings-grip" />
+            <KIcon :name="cmsIcon(iconOf(key))" class="cms-settings-item-icon" />
             <span class="cms-settings-item-label">{{ labelOf(key) }}</span>
-            <CmsSwitch
+            <KSwitch
                :model-value="true"
                :aria-label="`Hide ${labelOf(key)}`"
                :disabled="model.length === 1"
@@ -41,9 +41,9 @@
          <p class="cms-settings-subtitle">Hidden</p>
          <ul class="cms-settings-list">
             <li v-for="key in hidden" :key="key" class="cms-settings-item is-muted">
-               <CmsIcon :name="iconOf(key)" class="cms-settings-item-icon size-4" />
+               <KIcon :name="cmsIcon(iconOf(key))" class="cms-settings-item-icon" />
                <span class="cms-settings-item-label">{{ labelOf(key) }}</span>
-               <CmsSwitch
+               <KSwitch
                   :model-value="false"
                   :aria-label="`Show ${labelOf(key)}`"
                   @update:model-value="show(key)"
@@ -55,8 +55,9 @@
 </template>
 
 <script setup>
+import { Icon as KIcon, Switch as KSwitch } from "@xleddyl/443-components-vue";
 import { computed, ref } from "#imports";
-import { fieldIcon } from "../../utils/ui";
+import { cmsIcon, fieldIcon } from "../../utils/ui";
 const props = defineProps({
   fields: { type: Object, required: true },
   extra: { type: Array, required: true }

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

@@ -1,6 +1,15 @@
+type Status = 'idle' | 'saving' | 'saved' | 'error';
 type __VLS_Props = {
     name: string;
 };
-declare const __VLS_export: 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>;
+type __VLS_ModelProps = {
+    'status'?: Status;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:status": (value: Status) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:status"?: ((value: Status) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,37 +1,31 @@
 <template>
    <div class="cms-settings-entry">
-      <div class="cms-settings-entry-header">
-         <div class="cms-settings-heading">
-            <h2 class="cms-title cms-title-sm">{{ entry.label }}</h2>
-            <p class="cms-settings-hint">{{ KIND_LABELS[entry.kind] }}</p>
-         </div>
-         <span class="cms-settings-status" :class="`is-${status}`" aria-live="polite">
-            {{ STATUS_LABELS[status] }}
-         </span>
-      </div>
-
-      <div v-if="parts.length > 1" class="cms-tabs" role="tablist">
-         <button
-            v-for="part in parts"
-            :key="part.id"
-            type="button"
-            role="tab"
-            class="cms-tab"
-            :class="{ 'is-active': activePart === part.id }"
-            :aria-selected="activePart === part.id"
-            @click="activePart = part.id"
-         >
-            {{ part.label }}
-         </button>
-      </div>
-
-      <CmsSettingsColumns
-         v-if="activePart === 'columns'"
-         :model-value="columns"
-         :fields="entry.fields"
-         :extra="listExtraColumns(name)"
-         @update:model-value="saveColumns"
-      />
+      <KTabs
+         v-if="parts.length > 1"
+         v-model="activePart"
+         :items="parts"
+         :label="`${entry.label} settings`"
+         size="sm"
+         lazy
+         :panel-focusable="false"
+      >
+         <template #panel-columns>
+            <CmsSettingsColumns
+               :model-value="columns"
+               :fields="entry.fields"
+               :extra="listExtraColumns(name)"
+               @update:model-value="saveColumns"
+            />
+         </template>
+         <template #panel-layout>
+            <CmsSettingsLayout
+               :model-value="layout"
+               :fields="fields"
+               :tabs="entry.tabs"
+               @update:model-value="saveLayout"
+            />
+         </template>
+      </KTabs>
       <CmsSettingsLayout
          v-else
          :model-value="layout"
@@ -41,11 +35,11 @@
       />
 
       <div class="cms-settings-footer">
-         <CmsButton
+         <KButton
             label="Reset to default"
-            icon="arrow-uturn-left"
+            :icon="cmsIcon('arrow-uturn-left')"
             variant="ghost"
-            color="neutral"
+            tone="neutral"
             size="sm"
             :disabled="!isCustom"
             @click="resetPart"
@@ -55,6 +49,7 @@
 </template>
 
 <script setup>
+import { Button as KButton, Tabs as KTabs } from "@xleddyl/443-components-vue";
 import { computed, ref } from "#imports";
 import cmsConfig from "#cms-config";
 import {
@@ -65,38 +60,26 @@ import {
   useCmsSettings
 } from "../../composables/cms-settings";
 import { useCmsToast } from "../../composables/cms-toast";
-import { errorMessage } from "../../utils/ui";
-const KIND_LABELS = {
-  collection: "Collection",
-  single: "Single",
-  page: "Pages",
-  content: "Content"
-};
-const STATUS_LABELS = {
-  idle: "Changes save automatically",
-  saving: "Saving\u2026",
-  saved: "Saved",
-  error: "Not saved"
-};
+import { cmsIcon, errorMessage } from "../../utils/ui";
 const props = defineProps({
   name: { type: String, required: true }
 });
+const status = defineModel("status", { type: String, ...{ default: "idle" } });
 const { settings, save, reset } = useCmsSettings();
 const toast = useCmsToast();
 const entry = computed(() => cmsConfig[props.name]);
 const fields = computed(() => entryFields(props.name));
 const parts = computed(() => [
-  ...entry.value.kind === "collection" || entry.value.kind === "content" ? [{ id: "columns", label: "Table columns" }] : [],
-  { id: "layout", label: "Form layout" }
+  ...entry.value.kind === "collection" || entry.value.kind === "content" ? [{ value: "columns", label: "Table columns" }] : [],
+  { value: "layout", label: "Form layout" }
 ]);
-const activePart = ref(parts.value[0].id);
+const activePart = ref(parts.value[0].value);
 const columns = computed(() => entryListColumns(props.name, settings.value));
 const layout = computed(() => entryFormLayout(props.name, settings.value, fields.value));
 const isCustom = computed(() => {
   const saved = settings.value[props.name];
   return activePart.value === "columns" ? !!saved?.columns : !!saved?.layout;
 });
-const status = ref("idle");
 async function persist(next) {
   status.value = "saving";
   try {

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

@@ -1,6 +1,15 @@
+type Status = 'idle' | 'saving' | 'saved' | 'error';
 type __VLS_Props = {
     name: string;
 };
-declare const __VLS_export: 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>;
+type __VLS_ModelProps = {
+    'status'?: Status;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:status": (value: Status) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:status"?: ((value: Status) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -24,7 +24,9 @@
             >
                <p v-if="section.title" class="cms-layout-section-title">
                   {{ section.title }}
-                  <span v-if="section.collapsed" class="cms-badge is-muted">Collapsed</span>
+                  <KBadge v-if="section.collapsed" size="sm" class="cms-code-badge"
+                     >Collapsed</KBadge
+                  >
                </p>
                <template v-for="(row, rowIndex) in section.rows" :key="row.join('|')">
                   <div
@@ -50,8 +52,8 @@
                         @drop.prevent="drop"
                         @dragend="onDragEnd"
                      >
-                        <CmsIcon name="bars-2" class="cms-settings-grip size-3.5" />
-                        <CmsIcon :name="iconOf(key)" class="cms-settings-item-icon size-3.5" />
+                        <KIcon :name="cmsIcon('bars-2')" class="cms-settings-grip" />
+                        <KIcon :name="cmsIcon(iconOf(key))" class="cms-settings-item-icon" />
                         <span class="cms-layout-chip-label">{{ fields[key]?.label ?? key }}</span>
                         <span v-if="tabLabel(key)" class="cms-layout-chip-tab">{{
                            tabLabel(key)
@@ -80,8 +82,9 @@
 
 <script setup>
 import { MAX_LAYOUT_ROW_FIELDS, fieldTab } from "#nuxt-cms";
+import { Badge as KBadge, Icon as KIcon } from "@xleddyl/443-components-vue";
 import { ref } from "#imports";
-import { fieldIcon } from "../../utils/ui";
+import { cmsIcon, fieldIcon } from "../../utils/ui";
 const AREAS = [{ id: "main", empty: "Drop fields here" }];
 const props = defineProps({
   fields: { type: Object, required: true },

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

@@ -1,16 +1,12 @@
-import { type CmsTheme } from '../../composables/cms-theme.js';
 type __VLS_ModelProps = {
     'open'?: boolean;
-    'theme': CmsTheme;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     logout: () => any;
     "update:open": (value: boolean) => any;
-    "update:theme": (value: CmsTheme) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{
     onLogout?: (() => any) | undefined;
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
-    "onUpdate:theme"?: ((value: CmsTheme) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;