@xleddyl/nuxt-cms 0.9.3 → 0.10.0

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

@@ -1,62 +1,46 @@
 <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"
-         >
-            <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>
+   <KStack gap="sm">
+      <KFieldMessage
+         tone="neutral"
+         :icon="false"
+         message="Choose the columns of the table. Drag the visible columns to change their order."
+      />
+      <KSortableList v-model="visible" label="Visible columns" size="sm">
+         <template #trailing="{ item }">
             <KSwitch
                :model-value="true"
-               :aria-label="`Hide ${labelOf(key)}`"
+               :aria-label="`Hide ${item.label}`"
                :disabled="model.length === 1"
-               @update:model-value="hide(key)"
+               @update:model-value="hide(String(item.value))"
             />
-         </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>
+      </KSortableList>
 
       <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">
-               <KIcon :name="cmsIcon(iconOf(key))" class="cms-settings-item-icon" />
-               <span class="cms-settings-item-label">{{ labelOf(key) }}</span>
+         <KSeparator variant="heading" label="Hidden" :level="3" />
+         <KSortableList :model-value="hidden" label="Hidden columns" size="sm" disabled>
+            <template #trailing="{ item }">
                <KSwitch
                   :model-value="false"
-                  :aria-label="`Show ${labelOf(key)}`"
-                  @update:model-value="show(key)"
+                  :aria-label="`Show ${item.label}`"
+                  @update:model-value="show(String(item.value))"
                />
-            </li>
-         </ul>
+            </template>
+         </KSortableList>
       </template>
-   </div>
+   </KStack>
 </template>
 
 <script setup>
-import { Icon as KIcon, Switch as KSwitch } from "@xleddyl/443-components-vue";
-import { computed, ref } from "#imports";
+import {
+  FieldMessage as KFieldMessage,
+  Separator as KSeparator,
+  SortableList as KSortableList,
+  Stack as KStack,
+  Switch as KSwitch
+} from "@xleddyl/443-components-vue";
+import { computed } from "#imports";
+import { TRANSLATIONS_COLUMN } from "../../../shared/translations";
 import { cmsIcon, fieldIcon } from "../../utils/ui";
 const props = defineProps({
   fields: { type: Object, required: true },
@@ -64,13 +48,28 @@ const props = defineProps({
 });
 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 columnItem(key) {
+  return { value: key, label: labelOf(key), icon: cmsIcon(iconOf(key)) };
+}
+const hidden = computed(
+  () => available.value.filter((key) => !model.value.includes(key)).map(columnItem)
+);
+const visible = computed({
+  get: () => model.value.map(columnItem),
+  set: (items) => {
+    model.value = items.map((item) => String(item.value));
+  }
+});
+const EXTRA_COLUMNS = {
+  status: { label: "Status", icon: "check-circle" },
+  [TRANSLATIONS_COLUMN]: { label: "Translations", icon: "language" }
+};
 function labelOf(key) {
-  return props.fields[key]?.label ?? (key === "status" ? "Status" : key);
+  return props.fields[key]?.label ?? EXTRA_COLUMNS[key]?.label ?? key;
 }
 function iconOf(key) {
   const field = props.fields[key];
-  return field ? fieldIcon(field) : "check-circle";
+  return field ? fieldIcon(field) : EXTRA_COLUMNS[key]?.icon ?? "check-circle";
 }
 function hide(key) {
   if (model.value.length === 1) return;
@@ -79,25 +78,4 @@ function hide(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/SettingsEmptyAdd.d.vue.ts

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

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

@@ -0,0 +1,21 @@
+<template>
+   <KButton
+      :icon="cmsIcon(icon)"
+      size="sm"
+      @click="emit('open', { id: CMS_NEW_RECORD, label: newLabel })"
+   >
+      {{ label }}
+   </KButton>
+</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";
+defineProps({
+  label: { type: String, required: false, default: "Add" },
+  newLabel: { type: String, required: true },
+  icon: { type: String, required: false, default: "plus" }
+});
+const emit = defineEmits(["open"]);
+</script>

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

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

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

@@ -0,0 +1,50 @@
+<template>
+   <CmsSettingsEntry v-if="page && entryNames.includes(page.id)" :key="page.id" :name="page.id" />
+   <KRecordList
+      v-else
+      :items="items"
+      label="Content types"
+      :empty-icon="cmsIcon('view-columns')"
+      empty-text="No content types"
+      empty-description="Your role cannot read any content type."
+      @row-click="(item2) => open(String(item2.id), item2.title)"
+   >
+      <template #action="{ item }">
+         <KButton
+            icon="chevron-right"
+            variant="ghost"
+            tone="neutral"
+            size="sm"
+            square
+            aria-label="Open"
+            @click="open(String(item.id), item.title)"
+         />
+      </template>
+   </KRecordList>
+</template>
+
+<script setup>
+import { Button as KButton, RecordList as KRecordList } from "@xleddyl/443-components-vue";
+import { computed, watch } from "#imports";
+import { useCmsEntrySettings, useCmsSettingsEntries } from "../../composables/cms-entry-settings";
+import { cmsIcon } from "../../utils/ui";
+const props = defineProps({
+  page: { type: Object, required: false }
+});
+const emit = defineEmits(["open", "back"]);
+const entries = useCmsSettingsEntries();
+const { status } = useCmsEntrySettings(() => props.page?.id);
+const entryNames = computed(() => entries.value.map((entry) => entry.name));
+const items = computed(
+  () => entries.value.map((entry) => ({ id: entry.name, title: entry.label, description: entry.kind }))
+);
+watch(
+  () => props.page?.id,
+  () => {
+    status.value = "idle";
+  }
+);
+function open(id, label) {
+  emit("open", { id, label });
+}
+</script>

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

@@ -1,15 +1,6 @@
-type Status = 'idle' | 'saving' | 'saved' | 'error';
 type __VLS_Props = {
     name: string;
 };
-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 __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

@@ -1,110 +1,26 @@
 <template>
-   <div class="cms-settings-entry">
-      <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>
+   <div :id="CMS_ENTRY_SETTINGS_PANEL" class="cms-settings-entry">
+      <CmsSettingsColumns
+         v-if="part === 'columns' && entry"
+         :model-value="columns"
+         :fields="entry.fields"
+         :extra="extraColumns"
+         @update:model-value="saveColumns"
+      />
       <CmsSettingsLayout
-         v-else
+         v-else-if="entry"
          :model-value="layout"
          :fields="fields"
          :tabs="entry.tabs"
          @update:model-value="saveLayout"
       />
-
-      <div class="cms-settings-footer">
-         <KButton
-            label="Reset to default"
-            :icon="cmsIcon('arrow-uturn-left')"
-            variant="ghost"
-            tone="neutral"
-            size="sm"
-            :disabled="!isCustom"
-            @click="resetPart"
-         />
-      </div>
    </div>
 </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 {
-  entryFields,
-  entryFormLayout,
-  entryListColumns,
-  listExtraColumns,
-  useCmsSettings
-} from "../../composables/cms-settings";
-import { useCmsToast } from "../../composables/cms-toast";
-import { cmsIcon, errorMessage } from "../../utils/ui";
+import { CMS_ENTRY_SETTINGS_PANEL, useCmsEntrySettings } from "../../composables/cms-entry-settings";
 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" ? [{ value: "columns", label: "Table columns" }] : [],
-  { value: "layout", label: "Form layout" }
-]);
-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;
-});
-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);
-}
+const { entry, part, fields, columns, layout, extraColumns, saveColumns, saveLayout } = useCmsEntrySettings(() => props.name);
 </script>

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

@@ -1,15 +1,6 @@
-type Status = 'idle' | 'saving' | 'saved' | 'error';
 type __VLS_Props = {
     name: string;
 };
-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 __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/SettingsEntryActions.d.vue.ts

@@ -0,0 +1,7 @@
+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, {}, 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/SettingsEntryActions.vue

@@ -0,0 +1,42 @@
+<template>
+   <template v-if="page">
+      <KBadge
+         :label="ENTRY_SETTINGS_STATUS_LABELS[status]"
+         :tone="STATUS_TONES[status]"
+         :pulse="status === 'saving'"
+         variant="outline"
+         dot
+         aria-live="polite"
+      />
+      <KButton
+         variant="soft"
+         tone="neutral"
+         size="sm"
+         :icon="cmsIcon('arrow-uturn-left')"
+         :disabled="!isCustom"
+         disabled-reason="This part already uses the default"
+         @click="resetPart"
+      >
+         Reset to default
+      </KButton>
+   </template>
+</template>
+
+<script setup>
+import { Badge as KBadge, Button as KButton } from "@xleddyl/443-components-vue";
+import {
+  ENTRY_SETTINGS_STATUS_LABELS,
+  useCmsEntrySettings
+} from "../../composables/cms-entry-settings";
+import { cmsIcon } from "../../utils/ui";
+const props = defineProps({
+  page: { type: Object, required: false }
+});
+const STATUS_TONES = {
+  idle: "neutral",
+  saving: "neutral",
+  saved: "success",
+  error: "danger"
+};
+const { status, isCustom, resetPart } = useCmsEntrySettings(() => props.page?.id);
+</script>

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

@@ -0,0 +1,7 @@
+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, {}, 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/SettingsEntryTabs.d.vue.ts

@@ -0,0 +1,7 @@
+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, {}, 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/SettingsEntryTabs.vue

@@ -0,0 +1,21 @@
+<template>
+   <KTabs
+      v-if="page && parts.length > 1"
+      :model-value="part"
+      :items="parts"
+      variant="underline"
+      size="sm"
+      label="Layout parts"
+      :controls="CMS_ENTRY_SETTINGS_PANEL"
+      @update:model-value="(value) => part = value"
+   />
+</template>
+
+<script setup>
+import { Tabs as KTabs } from "@xleddyl/443-components-vue";
+import { CMS_ENTRY_SETTINGS_PANEL, useCmsEntrySettings } from "../../composables/cms-entry-settings";
+const props = defineProps({
+  page: { type: Object, required: false }
+});
+const { parts, part } = useCmsEntrySettings(() => props.page?.id);
+</script>

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

@@ -0,0 +1,7 @@
+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, {}, 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/SettingsFormAction.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/SettingsFormAction.vue

@@ -0,0 +1,17 @@
+<template>
+   <KButton
+      v-if="formAction"
+      type="submit"
+      size="sm"
+      :form="formAction.id"
+      :loading="formAction.submitting"
+   >
+      {{ formAction.label }}
+   </KButton>
+</template>
+
+<script setup>
+import { Button as KButton } from "@xleddyl/443-components-vue";
+import { useCmsSettingsFormAction } from "../../composables/cms-settings-form";
+const formAction = useCmsSettingsFormAction();
+</script>

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

@@ -1,20 +1,21 @@
 <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>
+      <KFieldMessage
+         tone="neutral"
+         :icon="false"
+         :message="`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}).`"
+      />
       <div class="cms-layout-areas">
          <div v-for="area in AREAS" :key="area.id" class="cms-layout-area" :class="`is-${area.id}`">
-            <div
+            <KCard
                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 }) }"
+               variant="dashed"
+               :title="area.empty"
+               :selected="isOver({ type: 'area', area: area.id })"
+               :animated="false"
                @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
@@ -24,9 +25,7 @@
             >
                <p v-if="section.title" class="cms-layout-section-title">
                   {{ section.title }}
-                  <KBadge v-if="section.collapsed" size="sm" class="cms-code-badge"
-                     >Collapsed</KBadge
-                  >
+                  <KBadge v-if="section.collapsed" size="sm" class="cms-code">Collapsed</KBadge>
                </p>
                <template v-for="(row, rowIndex) in section.rows" :key="row.join('|')">
                   <div
@@ -82,7 +81,12 @@
 
 <script setup>
 import { MAX_LAYOUT_ROW_FIELDS, fieldTab } from "#nuxt-cms";
-import { Badge as KBadge, Icon as KIcon } from "@xleddyl/443-components-vue";
+import {
+  Badge as KBadge,
+  Card as KCard,
+  FieldMessage as KFieldMessage,
+  Icon as KIcon
+} from "@xleddyl/443-components-vue";
 import { ref } from "#imports";
 import { cmsIcon, fieldIcon } from "../../utils/ui";
 const AREAS = [{ id: "main", empty: "Drop fields here" }];

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