@xleddyl/nuxt-cms 0.1.61 → 0.2.1

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

@@ -0,0 +1,126 @@
+<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 } 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);
+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;

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

@@ -0,0 +1,177 @@
+<template>
+   <div class="cms-layout-editor" :class="{ 'is-dragging': dragging }">
+      <p class="cms-settings-hint">
+         Drag a field up or down to move it. Drop it on the side of another field to put them in the
+         same row (up to {{ MAX_LAYOUT_ROW_FIELDS }}).
+      </p>
+      <div class="cms-layout-areas">
+         <div v-for="area in AREAS" :key="area.id" class="cms-layout-area" :class="`is-${area.id}`">
+            <div
+               v-if="!model[area.id].some((section2) => section2.rows.length || section2.title)"
+               class="cms-layout-empty"
+               :class="{ 'is-over': isOver({ type: 'area', area: area.id }) }"
+               @dragover.prevent="setTarget({ type: 'area', area: area.id })"
+               @drop.prevent="drop"
+            >
+               {{ area.empty }}
+            </div>
+            <div
+               v-for="(section, sectionIndex) in model[area.id]"
+               v-else
+               :key="`${area.id}-${sectionIndex}`"
+               class="cms-layout-section"
+               :class="{ 'is-titled': !!section.title }"
+            >
+               <p v-if="section.title" class="cms-layout-section-title">
+                  {{ section.title }}
+                  <span v-if="section.collapsed" class="cms-badge is-muted">Collapsed</span>
+               </p>
+               <template v-for="(row, rowIndex) in section.rows" :key="row.join('|')">
+                  <div
+                     class="cms-layout-gap"
+                     :class="{ 'is-over': isOver(gapTarget(area.id, sectionIndex, rowIndex)) }"
+                     @dragover.prevent="setTarget(gapTarget(area.id, sectionIndex, rowIndex))"
+                     @drop.prevent="drop"
+                  />
+                  <div class="cms-layout-row">
+                     <div
+                        v-for="key in row"
+                        :key="key"
+                        class="cms-layout-chip"
+                        :class="{
+  'is-dragging': dragging === key,
+  'is-drop-before': isOver({ type: 'inline', key, after: false }),
+  'is-drop-after': isOver({ type: 'inline', key, after: true }),
+  'is-blocked': blocked === key
+}"
+                        draggable="true"
+                        @dragstart="onDragStart($event, key)"
+                        @dragover.prevent="onChipOver($event, key, row)"
+                        @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" />
+                        <span class="cms-layout-chip-label">{{ fields[key]?.label ?? key }}</span>
+                        <span v-if="tabLabel(key)" class="cms-layout-chip-tab">{{
+                           tabLabel(key)
+                        }}</span>
+                     </div>
+                  </div>
+               </template>
+               <div
+                  class="cms-layout-gap is-end"
+                  :class="{
+  'is-over': isOver(gapTarget(area.id, sectionIndex, section.rows.length)),
+  'is-empty': !section.rows.length
+}"
+                  @dragover.prevent="
+  setTarget(gapTarget(area.id, sectionIndex, section.rows.length))
+"
+                  @drop.prevent="drop"
+               >
+                  <span v-if="!section.rows.length">Drop fields here</span>
+               </div>
+            </div>
+         </div>
+      </div>
+   </div>
+</template>
+
+<script setup>
+import { MAX_LAYOUT_ROW_FIELDS, fieldTab } from "#nuxt-cms";
+import { ref } from "#imports";
+import { fieldIcon } from "../../utils/ui";
+const AREAS = [{ id: "main", empty: "Drop fields here" }];
+const props = defineProps({
+  fields: { type: Object, required: true },
+  tabs: { type: Array, required: false }
+});
+const model = defineModel({ type: Object, ...{ required: true } });
+const dragging = ref(null);
+const target = ref(null);
+const blocked = ref(null);
+function iconOf(key) {
+  const field = props.fields[key];
+  return field ? fieldIcon(field) : "bars-3-bottom-left";
+}
+function tabLabel(key) {
+  const field = props.fields[key];
+  if (!field || !props.tabs?.length) return "";
+  const id = fieldTab(field, props.tabs);
+  return props.tabs.find((tab) => tab.id === id)?.label ?? "";
+}
+function gapTarget(area, section, row) {
+  return { type: "gap", area, section, row };
+}
+function sameTarget(a, b) {
+  return !!a && JSON.stringify(a) === JSON.stringify(b);
+}
+function isOver(candidate) {
+  return sameTarget(target.value, candidate);
+}
+function setTarget(candidate) {
+  blocked.value = null;
+  if (!sameTarget(target.value, candidate)) target.value = candidate;
+}
+function onDragStart(event, key) {
+  dragging.value = key;
+  event.dataTransfer?.setData("text/plain", key);
+  if (event.dataTransfer) event.dataTransfer.effectAllowed = "move";
+}
+function onChipOver(event, key, row) {
+  if (!dragging.value || key === dragging.value) {
+    target.value = null;
+    return;
+  }
+  const full = row.length >= MAX_LAYOUT_ROW_FIELDS && !row.includes(dragging.value);
+  if (full) {
+    target.value = null;
+    blocked.value = key;
+    return;
+  }
+  const box = event.currentTarget.getBoundingClientRect();
+  setTarget({ type: "inline", key, after: event.clientX > box.left + box.width / 2 });
+}
+function onDragEnd() {
+  dragging.value = null;
+  target.value = null;
+  blocked.value = null;
+}
+function cloneLayout(layout) {
+  const copy = (sections) => sections.map((section) => ({ ...section, rows: section.rows.map((row) => [...row]) }));
+  return { main: copy(layout.main) };
+}
+function drop() {
+  const key = dragging.value;
+  const to = target.value;
+  onDragEnd();
+  if (!key || !to) return;
+  const next = cloneLayout(model.value);
+  const sections = next.main;
+  const anchorRow = to.type === "gap" ? next[to.area][to.section]?.rows[to.row] ?? null : null;
+  for (const section of sections) {
+    for (const row of section.rows) {
+      const index = row.indexOf(key);
+      if (index !== -1) row.splice(index, 1);
+    }
+  }
+  if (to.type === "inline") {
+    const row = sections.flatMap((section) => section.rows).find((r) => r.includes(to.key));
+    if (!row) return;
+    row.splice(row.indexOf(to.key) + (to.after ? 1 : 0), 0, key);
+  } else if (to.type === "gap") {
+    const section = next[to.area][to.section];
+    if (!section) return;
+    const index = anchorRow ? section.rows.indexOf(anchorRow) : section.rows.length;
+    section.rows.splice(index === -1 ? section.rows.length : index, 0, [key]);
+  } else {
+    next[to.area] = [...next[to.area].filter((s) => s.title), { rows: [[key]] }];
+  }
+  for (const section of sections) {
+    section.rows = section.rows.filter((row) => row.length);
+  }
+  next.main = next.main.filter((section) => section.title || section.rows.length);
+  model.value = next;
+}
+</script>

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

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

@@ -0,0 +1,16 @@
+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/SettingsModal.vue

@@ -0,0 +1,174 @@
+<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>
+
+               <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>
+
+                  <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>
+
+<script setup>
+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"]);
+const KIND_ICONS = {
+  collection: "square-3-stack-3d",
+  single: "document-text",
+  page: "window"
+};
+const ENTRY_PREFIX = "entry:";
+const entries = Object.entries(cmsConfig).map(([name, entry]) => ({
+  name,
+  key: `${ENTRY_PREFIX}${name}`,
+  label: entry.label,
+  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();
+});
+</script>

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

@@ -0,0 +1,16 @@
+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

@@ -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;