@xleddyl/nuxt-cms 0.9.3 → 0.10.0

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

@@ -0,0 +1,60 @@
+<template>
+   <KForm :id="formId" :form="form">
+      <KFormField label="Name" name="name" required>
+         <KInput
+            v-model="draft.name"
+            :maxlength="CMS_PRESET_NAME_MAX"
+            placeholder="Article intro"
+            autocomplete="off"
+         />
+      </KFormField>
+      <KFormField label="Description" name="description">
+         <KTextarea
+            v-model="draft.description"
+            :maxlength="CMS_PRESET_DESCRIPTION_MAX"
+            :rows="3"
+            placeholder="Optional"
+         />
+      </KFormField>
+      <KFieldMessage tone="neutral" :icon="false" :message="presetMeta(preset)" />
+   </KForm>
+</template>
+
+<script setup>
+import {
+  FieldMessage as KFieldMessage,
+  Form as KForm,
+  FormField as KFormField,
+  Input as KInput,
+  Textarea as KTextarea,
+  toast,
+  useForm
+} from "@xleddyl/443-components-vue";
+import { ref } from "#imports";
+import { CMS_PRESET_DESCRIPTION_MAX, CMS_PRESET_NAME_MAX } from "../../../shared/presets";
+import { presetMeta } from "../../composables/cms-settings-stores";
+import { useCmsSettingsForm } from "../../composables/cms-settings-form";
+import { cmsApi } from "../../utils/api";
+const props = defineProps({
+  preset: { type: Object, required: true }
+});
+const emit = defineEmits(["saved"]);
+const draft = ref({ name: props.preset.name, description: props.preset.description ?? "" });
+const form = useForm({
+  values: draft,
+  schema: {
+    name: { required: true, maxLength: CMS_PRESET_NAME_MAX },
+    description: { maxLength: CMS_PRESET_DESCRIPTION_MAX }
+  },
+  onSubmit: async (values) => {
+    const description = values.description.trim();
+    const saved = await cmsApi(`/api/cms/presets/${props.preset.id}`, {
+      method: "PUT",
+      body: { name: values.name.trim(), ...description ? { description } : {} }
+    });
+    toast.success("Preset saved");
+    emit("saved", saved);
+  }
+});
+const formId = useCmsSettingsForm({ submitting: form.submitting });
+</script>

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

@@ -0,0 +1,11 @@
+import type { CmsBlockPreset } from '../../../shared/presets.js';
+type __VLS_Props = {
+    preset: CmsBlockPreset;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    saved: (preset: CmsBlockPreset) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSaved?: ((preset: CmsBlockPreset) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,13 @@
+import type { SettingsModalPage } from '@xleddyl/443-components-vue';
+type __VLS_Props = {
+    page?: SettingsModalPage;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    open: (page: SettingsModalPage) => any;
+    back: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onOpen?: ((page: SettingsModalPage) => any) | undefined;
+    onBack?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,65 @@
+<template>
+   <CmsSettingsPresetForm
+      v-if="page && current"
+      :key="page.id"
+      :preset="current"
+      @saved="onSaved"
+   />
+   <KSkeletonForm v-else-if="page && !store.loaded.value" :fields="2" />
+   <KRecordList
+      v-else
+      :items="items"
+      :loading="!store.loaded.value"
+      label="Block presets"
+      :empty-icon="cmsIcon(CMS_PRESET_ICON)"
+      empty-text="No presets yet"
+      empty-description="Use Save as preset in the menu of a block to keep a copy of it here."
+      @row-click="(item2) => open(item2.preset)"
+   >
+      <template #action="{ item }">
+         <KButton
+            :icon="cmsIcon('pencil')"
+            variant="ghost"
+            tone="neutral"
+            size="sm"
+            square
+            aria-label="Edit"
+            @click="open(item.preset)"
+         />
+      </template>
+   </KRecordList>
+</template>
+
+<script setup>
+import {
+  Button as KButton,
+  RecordList as KRecordList,
+  SkeletonForm as KSkeletonForm
+} from "@xleddyl/443-components-vue";
+import { computed, onMounted } from "#imports";
+import { CMS_PRESET_ICON } from "../../../shared/presets";
+import { presetMeta, useCmsPresetStore } from "../../composables/cms-settings-stores";
+import { cmsIcon } from "../../utils/ui";
+const props = defineProps({
+  page: { type: Object, required: false }
+});
+const emit = defineEmits(["open", "back"]);
+const store = useCmsPresetStore();
+onMounted(store.load);
+const current = computed(() => store.find(props.page?.id));
+const items = computed(
+  () => store.items.value.map((preset) => ({
+    id: preset.id,
+    preset,
+    title: preset.name,
+    description: [presetMeta(preset), preset.description].filter(Boolean).join(" \xB7 ")
+  }))
+);
+function open(preset) {
+  emit("open", { id: preset.id, label: preset.name });
+}
+function onSaved(preset) {
+  store.saved(preset);
+  emit("back");
+}
+</script>

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

@@ -0,0 +1,13 @@
+import type { SettingsModalPage } from '@xleddyl/443-components-vue';
+type __VLS_Props = {
+    page?: SettingsModalPage;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    open: (page: SettingsModalPage) => any;
+    back: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onOpen?: ((page: SettingsModalPage) => any) | undefined;
+    onBack?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,32 @@
+import type { SettingsModalPage } from '@xleddyl/443-components-vue';
+type __VLS_Props = {
+    page?: SettingsModalPage;
+    addLabel?: string;
+    newLabel?: string;
+    addIcon?: string;
+    hideAdd?: boolean;
+    deletable?: boolean;
+    deleteDisabled?: boolean;
+    deleteHint?: string;
+};
+declare var __VLS_1: {}, __VLS_11: {};
+type __VLS_Slots = {} & {
+    list?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_11) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    delete: () => any;
+    open: (page: SettingsModalPage) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onDelete?: (() => any) | undefined;
+    onOpen?: ((page: SettingsModalPage) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,45 @@
+<template>
+   <template v-if="!page">
+      <slot name="list" />
+      <KButton v-if="!hideAdd" :icon="cmsIcon(addIcon)" size="sm" @click="openNew">
+         {{ addLabel }}
+      </KButton>
+   </template>
+   <template v-else>
+      <slot />
+      <KButton
+         v-if="deletable"
+         size="sm"
+         variant="soft"
+         tone="danger"
+         icon="trash"
+         :disabled="deleteDisabled"
+         :disabled-reason="deleteHint"
+         @click="emit('delete')"
+      >
+         Delete
+      </KButton>
+      <CmsSettingsFormAction />
+   </template>
+</template>
+
+<script setup>
+import { Button as KButton } from "@xleddyl/443-components-vue";
+import { CMS_NEW_RECORD } from "../../composables/cms-route";
+import { cmsIcon } from "../../utils/ui";
+import CmsSettingsFormAction from "./SettingsFormAction.vue";
+const props = defineProps({
+  page: { type: Object, required: false, default: void 0 },
+  addLabel: { type: String, required: false, default: "Add" },
+  newLabel: { type: String, required: false, default: "New" },
+  addIcon: { type: String, required: false, default: "plus" },
+  hideAdd: { type: Boolean, required: false, default: false },
+  deletable: { type: Boolean, required: false },
+  deleteDisabled: { type: Boolean, required: false },
+  deleteHint: { type: String, required: false, default: void 0 }
+});
+const emit = defineEmits(["open", "delete"]);
+function openNew() {
+  emit("open", { id: CMS_NEW_RECORD, label: props.newLabel });
+}
+</script>

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

@@ -0,0 +1,32 @@
+import type { SettingsModalPage } from '@xleddyl/443-components-vue';
+type __VLS_Props = {
+    page?: SettingsModalPage;
+    addLabel?: string;
+    newLabel?: string;
+    addIcon?: string;
+    hideAdd?: boolean;
+    deletable?: boolean;
+    deleteDisabled?: boolean;
+    deleteHint?: string;
+};
+declare var __VLS_1: {}, __VLS_11: {};
+type __VLS_Slots = {} & {
+    list?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_11) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    delete: () => any;
+    open: (page: SettingsModalPage) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onDelete?: (() => any) | undefined;
+    onOpen?: ((page: SettingsModalPage) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,59 @@
+<template>
+   <CmsSettingsRecordActions v-bind="$attrs">
+      <template #list>
+         <KDropdownMenu :items="menuItems" placement="bottom-end" label="Import and export">
+            <KButton
+               icon="ellipsis-horizontal"
+               variant="ghost"
+               tone="neutral"
+               size="sm"
+               square
+               aria-label="Import and export"
+               :loading="store.importing.value"
+            />
+         </KDropdownMenu>
+      </template>
+   </CmsSettingsRecordActions>
+</template>
+
+<script setup>
+import {
+  Button as KButton,
+  DropdownMenu as KDropdownMenu,
+  useFileDialog
+} from "@xleddyl/443-components-vue";
+import { computed } from "#imports";
+import { useCmsRedirects } from "../../composables/cms-settings-stores";
+import { cmsIcon } from "../../utils/ui";
+import CmsSettingsRecordActions from "./SettingsRecordActions.vue";
+defineOptions({ inheritAttrs: false });
+const store = useCmsRedirects();
+const fileDialog = useFileDialog({ accept: ".csv,.json,text/csv,application/json" });
+async function importFile() {
+  const [file] = await fileDialog.open();
+  if (file) await store.importFile(file);
+}
+const empty = computed(() => !store.items.value.length);
+const menuItems = computed(() => [
+  {
+    label: "Import CSV or JSON",
+    icon: cmsIcon("arrow-up-tray"),
+    onSelect: () => void importFile()
+  },
+  { type: "separator" },
+  {
+    label: "Export CSV",
+    icon: cmsIcon("arrow-down-tray"),
+    disabled: empty.value,
+    disabledReason: "No redirects to export",
+    onSelect: store.exportCsv
+  },
+  {
+    label: "Export JSON",
+    icon: cmsIcon("arrow-down-tray"),
+    disabled: empty.value,
+    disabledReason: "No redirects to export",
+    onSelect: store.exportJson
+  }
+]);
+</script>

package/dist/runtime/app/components/cms/SettingsRedirectActions.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/SettingsRedirectForm.d.vue.ts

@@ -0,0 +1,11 @@
+import type { CmsRedirect } from '#nuxt-cms';
+type __VLS_Props = {
+    redirect?: CmsRedirect;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    saved: (redirect: CmsRedirect) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSaved?: ((redirect: CmsRedirect) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,77 @@
+<template>
+   <KForm :id="formId" :form="form">
+      <KGrid :columns="{ base: 1, sm: 2 }">
+         <KFormField label="From" name="from" required>
+            <KInput v-model="draft.from" placeholder="/old-page" autocomplete="off" />
+         </KFormField>
+         <KFormField label="To" name="to" required>
+            <KInput
+               v-model="draft.to"
+               placeholder="/new-page or https://example.com"
+               autocomplete="off"
+            />
+         </KFormField>
+      </KGrid>
+      <KGrid :columns="{ base: 1, sm: 2 }">
+         <KFormField label="Status" name="status">
+            <KSelect v-model="draft.status" :options="REDIRECT_STATUS_OPTIONS" />
+         </KFormField>
+         <KFormField label="Query string" name="keepQuery">
+            <KSwitch v-model="draft.keepQuery" label="Keep the visitor's query" />
+         </KFormField>
+      </KGrid>
+   </KForm>
+</template>
+
+<script setup>
+import { redirectFromErrors, redirectToErrors } from "#nuxt-cms";
+import {
+  Form as KForm,
+  FormField as KFormField,
+  Grid as KGrid,
+  Input as KInput,
+  Select as KSelect,
+  Switch as KSwitch,
+  toast,
+  useForm
+} from "@xleddyl/443-components-vue";
+import { ref } from "#imports";
+import { useCmsSettingsForm } from "../../composables/cms-settings-form";
+import { cmsApi } from "../../utils/api";
+import { REDIRECT_STATUS_OPTIONS } from "../../utils/redirects";
+const props = defineProps({
+  redirect: { type: Object, required: false }
+});
+const emit = defineEmits(["saved"]);
+const draft = ref({
+  from: props.redirect?.from ?? "",
+  to: props.redirect?.to ?? "",
+  status: props.redirect?.status ?? 301,
+  keepQuery: props.redirect?.keepQuery ?? true
+});
+const form = useForm({
+  values: draft,
+  schema: {
+    from: { required: true, validate: (value) => redirectFromErrors(value.trim())[0] },
+    to: { required: true, validate: (value) => redirectToErrors(value.trim())[0] }
+  },
+  onSubmit: async (values) => {
+    const creating = !props.redirect;
+    const saved = await cmsApi(
+      creating ? "/api/cms/redirects" : `/api/cms/redirects/${props.redirect.id}`,
+      {
+        method: creating ? "POST" : "PUT",
+        body: {
+          from: values.from.trim(),
+          to: values.to.trim(),
+          status: values.status,
+          keepQuery: values.keepQuery
+        }
+      }
+    );
+    toast.success(creating ? "Redirect added" : "Redirect saved");
+    emit("saved", saved);
+  }
+});
+const formId = useCmsSettingsForm({ creating: () => !props.redirect, submitting: form.submitting });
+</script>

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

@@ -0,0 +1,11 @@
+import type { CmsRedirect } from '#nuxt-cms';
+type __VLS_Props = {
+    redirect?: CmsRedirect;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    saved: (redirect: CmsRedirect) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSaved?: ((redirect: CmsRedirect) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,13 @@
+import type { SettingsModalPage } from '@xleddyl/443-components-vue';
+type __VLS_Props = {
+    page?: SettingsModalPage;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    open: (page: SettingsModalPage) => any;
+    back: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onOpen?: ((page: SettingsModalPage) => any) | undefined;
+    onBack?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,117 @@
+<template>
+   <KFieldset v-if="page && (isNew || current)">
+      <CmsSettingsRedirectForm :key="page.id" :redirect="current" @saved="onSaved" />
+   </KFieldset>
+   <KSkeletonForm v-else-if="page && !store.loaded.value" :fields="4" :columns="2" />
+   <KStack v-else>
+      <KInput
+         v-if="store.items.value.length"
+         v-model="search"
+         type="search"
+         size="sm"
+         icon="magnifying-glass"
+         clearable
+         placeholder="Search redirects"
+         aria-label="Search redirects"
+      />
+      <KRecordList
+         :items="items"
+         :loading="!store.loaded.value"
+         label="Redirects"
+         :empty-icon="cmsIcon(search ? 'magnifying-glass' : 'arrow-uturn-right')"
+         :empty-text="search ? 'No redirects found' : 'No redirects yet'"
+         :empty-description="
+  search ? `Nothing matches \u201C${search}\u201D.` : 'A redirect sends visitors from an old path to a new one. Changing the slug of a published item adds one for you.'
+"
+         @row-click="(item2) => open(item2.redirect)"
+      >
+         <template #action="{ item }">
+            <KButton
+               :icon="cmsIcon('pencil')"
+               variant="ghost"
+               tone="neutral"
+               size="sm"
+               square
+               aria-label="Edit"
+               @click="open(item.redirect)"
+            />
+         </template>
+         <template v-if="!search" #empty-actions>
+            <CmsSettingsEmptyAdd
+               label="Add redirect"
+               new-label="New redirect"
+               @open="emit('open', $event)"
+            />
+         </template>
+      </KRecordList>
+      <KPagination
+         v-if="filtered.length > PAGE_SIZE"
+         v-model:page="pageNumber"
+         :total="filtered.length"
+         :page-size="PAGE_SIZE"
+         size="sm"
+      />
+   </KStack>
+</template>
+
+<script setup>
+import {
+  Button as KButton,
+  Fieldset as KFieldset,
+  Input as KInput,
+  Pagination as KPagination,
+  RecordList as KRecordList,
+  SkeletonForm as KSkeletonForm,
+  Stack as KStack
+} from "@xleddyl/443-components-vue";
+import { computed, onMounted, ref, watch } from "#imports";
+import { CMS_NEW_RECORD } from "../../composables/cms-route";
+import { useCmsRedirects } from "../../composables/cms-settings-stores";
+import { cmsIcon } from "../../utils/ui";
+import { REDIRECT_STATUS_LABELS } from "../../utils/redirects";
+const PAGE_SIZE = 25;
+const props = defineProps({
+  page: { type: Object, required: false }
+});
+const emit = defineEmits(["open", "back"]);
+const store = useCmsRedirects();
+onMounted(store.load);
+const isNew = computed(() => props.page?.id === CMS_NEW_RECORD);
+const current = computed(() => store.find(props.page?.id));
+const search = ref("");
+const pageNumber = ref(1);
+watch(search, () => {
+  pageNumber.value = 1;
+});
+const filtered = computed(() => {
+  const term = search.value.trim().toLowerCase();
+  const list = store.sorted.value;
+  if (!term) return list;
+  return list.filter(
+    (redirect) => redirect.from.toLowerCase().includes(term) || redirect.to.toLowerCase().includes(term)
+  );
+});
+function statusLabel(status) {
+  return REDIRECT_STATUS_LABELS[status];
+}
+const items = computed(
+  () => filtered.value.slice((pageNumber.value - 1) * PAGE_SIZE, pageNumber.value * PAGE_SIZE).map((redirect) => ({
+    id: redirect.id,
+    redirect,
+    title: `${redirect.from} \u2192 ${redirect.to}`,
+    description: [
+      statusLabel(redirect.status),
+      redirect.keepQuery ? "Keeps the query" : "Drops the query",
+      redirect.source === "auto" ? "Added when a page moved" : "Added by hand"
+    ].join(" \xB7 "),
+    badge: { label: String(redirect.status) }
+  }))
+);
+function open(redirect) {
+  emit("open", { id: redirect.id, label: redirect.from });
+}
+function onSaved(redirect) {
+  store.upsert(redirect);
+  emit("back");
+}
+</script>

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

@@ -0,0 +1,13 @@
+import type { SettingsModalPage } from '@xleddyl/443-components-vue';
+type __VLS_Props = {
+    page?: SettingsModalPage;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    open: (page: SettingsModalPage) => any;
+    back: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onOpen?: ((page: SettingsModalPage) => any) | undefined;
+    onBack?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,17 @@
+type __VLS_Props = {
+    title: string;
+    description: string;
+    items: {
+        label: string;
+        value: string;
+    }[];
+    copyLabel?: string;
+    secretKey?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    done: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onDone?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,43 @@
+<template>
+   <KCard :title="title" :description="description">
+      <KDescriptionList :items="rows">
+         <template #value="{ item }">
+            <span :class="{ 'k-mono': item.key === secretKey }">{{ item.value }}</span>
+         </template>
+      </KDescriptionList>
+      <template #footer>
+         <KCopyButton
+            variant="soft"
+            tone="neutral"
+            :value="copyText"
+            :label="copyLabel"
+            copied-label="Copied"
+            show-label
+            size="sm"
+         />
+         <KButton variant="ghost" tone="neutral" size="sm" @click="emit('done')">Done</KButton>
+      </template>
+   </KCard>
+</template>
+
+<script setup>
+import {
+  Button as KButton,
+  Card as KCard,
+  CopyButton as KCopyButton,
+  DescriptionList as KDescriptionList
+} from "@xleddyl/443-components-vue";
+import { computed } from "#imports";
+const props = defineProps({
+  title: { type: String, required: true },
+  description: { type: String, required: true },
+  items: { type: Array, required: true },
+  copyLabel: { type: String, required: false, default: "Copy credentials" },
+  secretKey: { type: String, required: false, default: "password" }
+});
+const emit = defineEmits(["done"]);
+const rows = computed(() => props.items.map((item) => ({ key: item.label.toLowerCase(), ...item })));
+const copyText = computed(
+  () => props.items.map((item) => `${item.label}: ${item.value}`).join("\n")
+);
+</script>