@xleddyl/nuxt-cms 0.1.61 → 0.2.0

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;

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

@@ -0,0 +1,102 @@
+<template>
+   <div class="cms-settings-columns">
+      <p class="cms-settings-hint">
+         Choose the columns of the table. Drag the visible columns to change their order.
+      </p>
+      <ul class="cms-settings-list">
+         <li
+            v-for="(key, index) in model"
+            :key="key"
+            class="cms-settings-item is-draggable"
+            :class="{
+  'is-dragging': dragging === key,
+  'is-drop-before': dropIndex === index && dragging !== key
+}"
+            draggable="true"
+            @dragstart="onDragStart($event, key)"
+            @dragover.prevent="dropIndex = index"
+            @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" />
+            <span class="cms-settings-item-label">{{ labelOf(key) }}</span>
+            <CmsSwitch
+               :model-value="true"
+               :aria-label="`Hide ${labelOf(key)}`"
+               :disabled="model.length === 1"
+               @update:model-value="hide(key)"
+            />
+         </li>
+         <li
+            v-if="dragging"
+            class="cms-settings-drop-end"
+            :class="{ 'is-over': dropIndex === model.length }"
+            @dragover.prevent="dropIndex = model.length"
+            @drop.prevent="onDrop(model.length)"
+         />
+      </ul>
+
+      <template v-if="hidden.length">
+         <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" />
+               <span class="cms-settings-item-label">{{ labelOf(key) }}</span>
+               <CmsSwitch
+                  :model-value="false"
+                  :aria-label="`Show ${labelOf(key)}`"
+                  @update:model-value="show(key)"
+               />
+            </li>
+         </ul>
+      </template>
+   </div>
+</template>
+
+<script setup>
+import { computed, ref } from "#imports";
+import { fieldIcon } from "../../utils/ui";
+const props = defineProps({
+  fields: { type: Object, required: true },
+  extra: { type: Array, required: true }
+});
+const model = defineModel({ type: Array, ...{ required: true } });
+const available = computed(() => [...Object.keys(props.fields), ...props.extra]);
+const hidden = computed(() => available.value.filter((key) => !model.value.includes(key)));
+function labelOf(key) {
+  return props.fields[key]?.label ?? (key === "status" ? "Status" : key);
+}
+function iconOf(key) {
+  const field = props.fields[key];
+  return field ? fieldIcon(field) : "check-circle";
+}
+function hide(key) {
+  if (model.value.length === 1) return;
+  model.value = model.value.filter((k) => k !== key);
+}
+function show(key) {
+  model.value = [...model.value, key];
+}
+const dragging = ref(null);
+const dropIndex = ref(null);
+function onDragStart(event, key) {
+  dragging.value = key;
+  event.dataTransfer?.setData("text/plain", key);
+  if (event.dataTransfer) event.dataTransfer.effectAllowed = "move";
+}
+function onDrop(index) {
+  const key = dragging.value;
+  if (key) {
+    const next = model.value.filter((k) => k !== key);
+    const from = model.value.indexOf(key);
+    next.splice(from < index ? index - 1 : index, 0, key);
+    model.value = next;
+  }
+  onDragEnd();
+}
+function onDragEnd() {
+  dragging.value = null;
+  dropIndex.value = null;
+}
+</script>

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

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

@@ -0,0 +1,6 @@
+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>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,133 @@
+<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"
+      />
+      <CmsSettingsLayout
+         v-else
+         :model-value="layout"
+         :fields="fields"
+         :tabs="entry.tabs"
+         @update:model-value="saveLayout"
+      />
+
+      <div class="cms-settings-footer">
+         <CmsButton
+            label="Reset to default"
+            icon="arrow-uturn-left"
+            variant="ghost"
+            color="neutral"
+            size="sm"
+            :disabled="!isCustom"
+            @click="resetPart"
+         />
+      </div>
+   </div>
+</template>
+
+<script setup>
+import { computed, ref, watch } from "#imports";
+import cmsConfig from "#cms-config";
+import {
+  entryFields,
+  entryFormLayout,
+  entryListColumns,
+  listExtraColumns,
+  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"
+};
+const STATUS_LABELS = {
+  idle: "Changes save automatically",
+  saving: "Saving\u2026",
+  saved: "Saved",
+  error: "Not saved"
+};
+const props = defineProps({
+  name: { type: String, required: true }
+});
+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" ? [{ id: "columns", label: "Table columns" }] : [],
+  { id: "layout", label: "Form layout" }
+]);
+const activePart = ref(parts.value[0].id);
+watch(
+  () => props.name,
+  () => {
+    activePart.value = parts.value[0].id;
+    status.value = "idle";
+  }
+);
+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 {
+    if (!next.columns && !next.layout) await reset(props.name);
+    else await save(props.name, next);
+    status.value = "saved";
+  } catch (error) {
+    status.value = "error";
+    toast.add({ title: "Settings not saved", description: errorMessage(error), color: "error" });
+  }
+}
+function current() {
+  const saved = settings.value[props.name] ?? {};
+  return { columns: saved.columns, layout: saved.layout };
+}
+function saveColumns(value) {
+  void persist({ ...current(), columns: value });
+}
+function saveLayout(value) {
+  void persist({ ...current(), layout: value });
+}
+function resetPart() {
+  const next = current();
+  if (activePart.value === "columns") next.columns = void 0;
+  else next.layout = void 0;
+  void persist(next);
+}
+</script>

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

@@ -0,0 +1,6 @@
+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>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

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