@xleddyl/nuxt-cms 0.4.3 → 0.5.0

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

@@ -1,175 +1,126 @@
 <template>
-   <Teleport to="body">
-      <Transition name="cms-modal">
-         <div v-if="open" class="cms-scope cms-overlay" @click.self="close">
-            <div
-               class="cms-modal cms-settings"
-               role="dialog"
-               aria-modal="true"
-               aria-label="Settings"
-            >
-               <aside class="cms-settings-nav">
-                  <CmsButton
-                     icon="x-mark"
-                     variant="ghost"
-                     color="neutral"
-                     size="sm"
-                     aria-label="Close settings"
-                     class="cms-settings-close"
-                     @click="close"
-                  />
-                  <div class="cms-settings-nav-list">
-                     <button
-                        type="button"
-                        class="cms-settings-tab"
-                        :class="{ 'is-active': active === 'general' }"
-                        @click="active = 'general'"
-                     >
-                        <CmsIcon name="cog-6-tooth" class="size-4 shrink-0" />
-                        General
-                     </button>
-                     <button
-                        type="button"
-                        class="cms-settings-tab"
-                        :class="{ 'is-active': active === 'account' }"
-                        @click="active = 'account'"
-                     >
-                        <CmsIcon name="user-circle" class="size-4 shrink-0" />
-                        Account
-                     </button>
-                     <button
-                        v-if="isSuperAdmin"
-                        type="button"
-                        class="cms-settings-tab"
-                        :class="{ 'is-active': active === 'users' }"
-                        @click="active = 'users'"
-                     >
-                        <CmsIcon name="users" class="size-4 shrink-0" />
-                        Users
-                     </button>
-                     <p class="cms-settings-nav-label">Content</p>
-                     <button
-                        v-for="item in entries"
-                        :key="item.name"
-                        type="button"
-                        class="cms-settings-tab"
-                        :class="{ 'is-active': active === item.key }"
-                        @click="active = item.key"
-                     >
-                        <CmsIcon :name="item.icon" class="size-4 shrink-0" />
-                        <span class="truncate">{{ item.label }}</span>
-                     </button>
-                  </div>
-                  <hr class="cms-settings-divider" />
-                  <button type="button" class="cms-settings-tab is-danger" @click="emit('logout')">
-                     <CmsIcon name="arrow-right-start-on-rectangle" class="size-4 shrink-0" />
-                     Sign out
-                  </button>
-               </aside>
+   <KSettingsModal
+      v-model:open="open"
+      v-model:section="section"
+      :sections="sections"
+      :account="account"
+      :presets="false"
+      hide-session
+      close-label="Close settings"
+      :on-sign-out="signOut"
+   >
+      <template #section-general>
+         <KAppearanceSettings
+            :presets="false"
+            theme-label="Theme"
+            theme-text="Choose how the panel looks. System follows your device."
+         />
+      </template>
 
-               <section v-if="active === 'account'" class="cms-settings-content">
-                  <CmsSettingsAccount />
-               </section>
-               <section v-else-if="active === 'users'" class="cms-settings-content">
-                  <CmsSettingsUsers />
-               </section>
-               <section v-else-if="activeEntry" class="cms-settings-content">
-                  <CmsSettingsEntry :key="activeEntry" :name="activeEntry" />
-               </section>
-               <section v-else class="cms-settings-content">
-                  <h2 class="cms-title cms-title-sm">General</h2>
+      <template #account-fields>
+         <CmsSettingsAccount />
+      </template>
 
-                  <div class="cms-settings-group">
-                     <div class="cms-settings-heading">
-                        <p class="cms-settings-label">Theme</p>
-                        <p class="cms-settings-hint">
-                           Choose how the panel looks. System follows your device.
-                        </p>
-                     </div>
-                     <div class="cms-theme-cards" role="radiogroup" aria-label="Theme">
-                        <button
-                           v-for="option in CMS_THEMES"
-                           :key="option.value"
-                           type="button"
-                           role="radio"
-                           :aria-checked="theme === option.value"
-                           class="cms-theme-card"
-                           :class="{ 'is-active': theme === option.value }"
-                           @click="selectTheme(option.value)"
-                        >
-                           <span class="cms-theme-preview" :class="`is-${option.value}`">
-                              <span
-                                 v-for="half in previewHalves(option.value)"
-                                 :key="half"
-                                 class="cms-theme-preview-app"
-                                 :class="`is-${half}`"
-                              >
-                                 <span class="cms-theme-preview-side" />
-                                 <span class="cms-theme-preview-panel">
-                                    <span class="cms-theme-preview-line is-accent" />
-                                    <span class="cms-theme-preview-line" />
-                                    <span class="cms-theme-preview-line is-short" />
-                                 </span>
-                              </span>
-                           </span>
-                           <span class="cms-theme-card-label">
-                              <CmsIcon :name="option.icon" class="size-3.5" />
-                              {{ option.label }}
-                              <CmsIcon
-                                 v-if="theme === option.value"
-                                 name="check"
-                                 class="cms-theme-card-check size-3.5"
-                              />
-                           </span>
-                        </button>
-                     </div>
-                  </div>
-               </section>
-            </div>
-         </div>
-      </Transition>
-   </Teleport>
+      <template #actions-users>
+         <KButton
+            v-if="!usersCreating"
+            label="Add user"
+            :icon="cmsIcon('user-plus')"
+            size="sm"
+            @click="usersCreating = true"
+         />
+      </template>
+      <template #section-users>
+         <CmsSettingsUsers v-model:creating="usersCreating" />
+      </template>
+
+      <template v-for="item in entries" :key="item.key" #[`actions-${item.key}`]>
+         <span class="cms-settings-status" :class="`is-${entryStatus}`" aria-live="polite">
+            {{ STATUS_LABELS[entryStatus] }}
+         </span>
+      </template>
+      <template v-for="item in entries" :key="item.key" #[`section-${item.key}`]>
+         <CmsSettingsEntry v-model:status="entryStatus" :name="item.name" />
+      </template>
+   </KSettingsModal>
 </template>
 
 <script setup>
+import {
+  AppearanceSettings as KAppearanceSettings,
+  Button as KButton,
+  SettingsModal as KSettingsModal
+} from "@xleddyl/443-components-vue";
 import { computed, ref, watch } from "#imports";
 import cmsConfig from "#cms-config";
-import { CMS_THEMES, setCmsTheme } from "../../composables/cms-theme";
 import { useCmsAccount } from "../../composables/cms-account";
-import { useCmsOverlay } from "../../composables/cms-overlay";
-const { isSuperAdmin } = useCmsAccount();
-const open = defineModel("open", { type: Boolean, ...{ default: false } });
-const theme = defineModel("theme", { type: String, ...{ required: true } });
-const emit = defineEmits(["logout"]);
+import { cmsIcon } from "../../utils/ui";
 const KIND_ICONS = {
   collection: "square-3-stack-3d",
   single: "document-text",
   page: "window",
   content: "newspaper"
 };
+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"
+};
 const ENTRY_PREFIX = "entry:";
+const { isSuperAdmin, displayName, email } = useCmsAccount();
+const open = defineModel("open", { type: Boolean, ...{ default: false } });
+const emit = defineEmits(["logout"]);
 const entries = Object.entries(cmsConfig).map(([name, entry]) => ({
   name,
   key: `${ENTRY_PREFIX}${name}`,
   label: entry.label,
+  kind: entry.kind,
   icon: entry.icon ?? KIND_ICONS[entry.kind]
 }));
-const active = ref("general");
-const activeEntry = computed(
-  () => active.value.startsWith(ENTRY_PREFIX) ? active.value.slice(ENTRY_PREFIX.length) : null
-);
-function selectTheme(value) {
-  setCmsTheme(theme, value);
-}
-function previewHalves(value) {
-  return value === "system" ? ["light", "dark"] : [value];
-}
-function close() {
-  open.value = false;
-}
-const overlay = useCmsOverlay(close);
-watch(open, (value) => {
-  if (value) overlay.activate();
-  else overlay.deactivate();
+const account = computed(() => ({
+  name: displayName.value,
+  email: email.value,
+  role: isSuperAdmin.value ? "Super admin" : "Admin"
+}));
+const sections = computed(() => [
+  { id: "general", label: "General", icon: cmsIcon("cog-6-tooth") },
+  {
+    id: "account",
+    label: "Account",
+    icon: cmsIcon("user-circle"),
+    description: "Your profile and your password."
+  },
+  ...isSuperAdmin.value ? [
+    {
+      id: "users",
+      label: "Users",
+      icon: cmsIcon("users"),
+      description: "Users can do everything in the panel, except manage users."
+    }
+  ] : [],
+  ...entries.map((item) => ({
+    id: item.key,
+    label: item.label,
+    icon: cmsIcon(item.icon),
+    group: "Content",
+    description: KIND_LABELS[item.kind]
+  }))
+]);
+const section = ref("general");
+const usersCreating = ref(false);
+const entryStatus = ref("idle");
+watch(section, () => {
+  usersCreating.value = false;
+  entryStatus.value = "idle";
 });
+function signOut() {
+  emit("logout");
+}
 </script>

package/dist/runtime/app/components/cms/SettingsModal.vue.d.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;

package/dist/runtime/app/components/cms/SettingsUsers.d.vue.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;