@xleddyl/nuxt-cms 0.1.23 → 0.1.25

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

@@ -1,22 +1,15 @@
 <template>
-   <CmsTranslatableField v-if="isTranslatableField(field)" v-model="translatable" :field="field" />
+   <CmsTranslatableField
+      v-if="isTranslatableField(field)"
+      v-model="translatable"
+      :field="field"
+      :locale="locale"
+   />
    <CmsBlocksField v-else-if="field.type === 'blocks'" v-model="blocksValue" :field="field" />
    <CmsRichTextField v-else-if="field.type === 'richtext'" v-model="strOrNull" />
-   <CmsTextarea
-      v-else-if="field.type === 'text' && field.textarea"
-      v-model="str"
-      :rows="4"
-      size="lg"
-      class="w-full"
-   />
-   <CmsInput v-else-if="field.type === 'text'" v-model="str" size="lg" class="w-full" />
-   <CmsInput
-      v-else-if="field.type === 'email'"
-      v-model="str"
-      type="email"
-      size="lg"
-      class="w-full"
-   />
+   <CmsTextarea v-else-if="field.type === 'text' && field.textarea" v-model="str" :rows="8" />
+   <CmsInput v-else-if="field.type === 'text'" v-model="str" />
+   <CmsInput v-else-if="field.type === 'email'" v-model="str" type="email" />
    <CmsSlugField v-else-if="field.type === 'slug'" v-model="strOrNull" :source="slugSource" />
    <CmsSelectMenu
       v-else-if="field.type === 'select'"
@@ -24,8 +17,6 @@
       :multiple="field.multiple"
       :items="selectItems"
       placeholder="Select…"
-      size="lg"
-      class="w-full"
    />
    <CmsSwitch
       v-else-if="field.type === 'boolean'"
@@ -37,14 +28,8 @@
 "
    />
    <CmsJsonField v-else-if="field.type === 'json'" v-model="jsonValue" />
-   <CmsInput
-      v-else-if="field.type === 'number'"
-      v-model.number="num"
-      type="number"
-      size="lg"
-      class="w-full"
-   />
-   <CmsInput v-else-if="field.type === 'date'" v-model="str" type="date" size="lg" class="w-full" />
+   <CmsInput v-else-if="field.type === 'number'" v-model.number="num" type="number" />
+   <CmsInput v-else-if="field.type === 'date'" v-model="str" type="date" />
    <CmsRelationField
       v-else-if="field.type === 'relation'"
       v-model="relationValue"
@@ -60,7 +45,8 @@ import { isTranslatableField } from "#nuxt-cms";
 import { computed } from "#imports";
 const props = defineProps({
   field: { type: Object, required: true },
-  slugSource: { type: [String, null], required: false }
+  slugSource: { type: [String, null], required: false },
+  locale: { type: String, required: false }
 });
 const model = defineModel({ type: null, ...{ required: true } });
 const selectItems = computed(() => [

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

@@ -2,6 +2,7 @@ import type { FieldConfig } from '#nuxt-cms';
 type __VLS_Props = {
     field: FieldConfig;
     slugSource?: string | null;
+    locale?: string;
 };
 type __VLS_ModelProps = {
     modelValue: unknown;

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

@@ -1,5 +1,5 @@
 <template>
-   <form :id="id" @submit.prevent="onSubmit">
+   <form :id="id" class="cms-form" @submit.prevent="onSubmit">
       <slot />
    </form>
 </template>

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

@@ -2,13 +2,12 @@ type __VLS_Props = {
     label?: string;
     name?: string;
     required?: boolean;
-    ui?: {
-        label?: string;
-    };
 };
-declare var __VLS_1: {};
+declare var __VLS_1: {}, __VLS_3: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_1) => any;
+    'label-actions'?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_3) => any;
 };
 declare const __VLS_base: 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 __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -1,10 +1,13 @@
 <template>
-   <div class="flex flex-col gap-1.5">
-      <label v-if="label" :class="ui?.label ?? 'text-sm font-medium text-(--ui-text-toned)'">
-         {{ label }}<span v-if="required" class="text-(--ui-error)"> *</span>
-      </label>
+   <div class="cms-form-field">
+      <div v-if="label || $slots['label-actions']" class="cms-form-label-row">
+         <label v-if="label" class="cms-form-label">
+            {{ label }}<span v-if="required" class="cms-form-required"> *</span>
+         </label>
+         <slot name="label-actions" />
+      </div>
       <slot />
-      <p v-if="error" class="text-sm text-(--ui-error)">{{ error }}</p>
+      <p v-if="error" class="cms-form-error">{{ error }}</p>
    </div>
 </template>
 
@@ -14,8 +17,7 @@ import { CMS_FORM_ERRORS } from "../../utils/ui";
 const props = defineProps({
   label: { type: String, required: false },
   name: { type: String, required: false },
-  required: { type: Boolean, required: false },
-  ui: { type: Object, required: false }
+  required: { type: Boolean, required: false }
 });
 const errors = inject(CMS_FORM_ERRORS, null);
 const error = computed(() => props.name && errors ? errors[props.name] : void 0);

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

@@ -2,13 +2,12 @@ type __VLS_Props = {
     label?: string;
     name?: string;
     required?: boolean;
-    ui?: {
-        label?: string;
-    };
 };
-declare var __VLS_1: {};
+declare var __VLS_1: {}, __VLS_3: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_1) => any;
+    'label-actions'?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_3) => any;
 };
 declare const __VLS_base: 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 __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -1,15 +1,14 @@
 <template>
-   <div class="flex flex-col gap-1">
+   <div class="cms-form-field">
       <CmsTextarea
          v-model="text"
          :rows="6"
-         size="lg"
-         class="w-full font-mono"
+         class="font-mono"
          :color="invalid ? 'error' : void 0"
          @blur="commit"
          @update:model-value="invalid = false"
       />
-      <p v-if="invalid" class="text-sm text-(--ui-error)">Invalid JSON</p>
+      <p v-if="invalid" class="cms-form-error">Invalid JSON</p>
    </div>
 </template>
 

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

@@ -0,0 +1,14 @@
+type __VLS_Props = {
+    value?: Record<string, string> | null;
+};
+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/LocaleSwitch.vue

@@ -0,0 +1,29 @@
+<template>
+   <div class="cms-locale-switch" role="tablist" aria-label="Content language">
+      <button
+         v-for="locale in i18n.locales"
+         :key="locale"
+         type="button"
+         role="tab"
+         :aria-selected="model === locale"
+         :title="filled(locale) ? locale : `${locale} \u2014 empty`"
+         class="cms-locale-option"
+         :class="{ 'is-active': model === locale, 'is-empty': !filled(locale) }"
+         @click="model = locale"
+      >
+         {{ locale }}
+      </button>
+   </div>
+</template>
+
+<script setup>
+import { useCmsRuntime } from "../../composables/cms-runtime";
+const props = defineProps({
+  value: { type: [Object, null], required: false }
+});
+const model = defineModel({ type: String, ...{ required: true } });
+const { i18n } = useCmsRuntime();
+function filled(locale) {
+  return !!props.value?.[locale]?.trim();
+}
+</script>

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

@@ -0,0 +1,14 @@
+type __VLS_Props = {
+    value?: Record<string, string> | null;
+};
+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/MediaField.vue

@@ -1,30 +1,22 @@
 <template>
-   <div v-if="model" class="cms-card overflow-hidden">
-      <img
-         v-if="kind === 'image' && url"
-         :src="url"
-         alt=""
-         class="max-h-56 w-full bg-(--cms-field) object-cover"
-      />
+   <div v-if="model" class="cms-card cms-media-tile">
+      <img v-if="kind === 'image' && url" :src="url" alt="" class="cms-media-preview-large" />
       <video
          v-else-if="kind === 'video' && url"
          :src="url"
          controls
          preload="metadata"
          playsinline
-         class="max-h-56 w-full bg-(--cms-field)"
+         class="cms-media-preview-large"
       />
-      <div class="flex items-center gap-2.5 px-4 py-3">
-         <CmsIcon :name="icon" class="size-4 shrink-0 text-(--ui-text-dimmed)" />
-         <span class="min-w-0 flex-1 truncate text-sm font-medium" :title="model">{{
-            mediaFilename(model)
-         }}</span>
+      <div class="cms-media-bar">
+         <CmsIcon :name="icon" class="cms-media-bar-icon size-4" />
+         <span class="cms-media-bar-name" :title="model">{{ mediaFilename(model) }}</span>
          <CmsButton
             icon="photo"
             variant="ghost"
             color="neutral"
             size="xs"
-            class="rounded-full"
             aria-label="Change"
             @click="openGallery"
          />
@@ -33,7 +25,6 @@
             variant="ghost"
             color="neutral"
             size="xs"
-            class="rounded-full"
             aria-label="Remove"
             @click="clear"
          />
@@ -45,7 +36,7 @@
       <span class="text-sm font-medium">Choose from the gallery</span>
    </button>
 
-   <CmsModal v-model:open="galleryOpen" title="Media" :ui="CMS_MODAL_UI">
+   <CmsModal v-model:open="galleryOpen" title="Media" size="lg">
       <template #body>
          <CmsMediaGallery selectable :media-type="mediaType" :accept="accept" @select="onSelect" />
       </template>
@@ -56,7 +47,6 @@
 import { computed, ref } from "#imports";
 import { mediaFilename, mediaIconFor, mediaPublicUrl, mediaTypeForKey } from "#nuxt-cms";
 import { useCmsRuntime } from "../../composables/cms-runtime";
-import { CMS_MODAL_UI } from "../../utils/ui";
 defineProps({
   mediaType: { type: null, required: false },
   accept: { type: Array, required: false }

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

@@ -6,7 +6,7 @@
       body="Set cms.media in nuxt.config to enable uploads."
    />
 
-   <div v-else class="flex flex-col gap-5">
+   <div v-else class="cms-media-gallery">
       <CmsMediaUpload
          v-if="!readOnly"
          :multiple="!selectable"
@@ -16,7 +16,7 @@
          @uploaded="onUploaded"
       />
 
-      <div v-if="!restricted && items.length" class="flex flex-wrap items-center gap-1">
+      <div v-if="!restricted && items.length" class="cms-media-filters">
          <button
             v-for="f in filters"
             :key="f"
@@ -28,7 +28,7 @@
             {{ filterLabels[f] }}
          </button>
          <template v-if="folders.length">
-            <span class="mx-1 h-4 w-px bg-(--cms-line)" />
+            <span class="cms-media-filter-separator" />
             <button
                v-for="f in folders"
                :key="f"
@@ -37,40 +37,29 @@
                :class="{ 'is-active': folder === f }"
                @click="folder = folder === f ? null : f"
             >
-               <CmsIcon name="folder" class="mr-1 size-3" />{{ f }}
+               <CmsIcon name="folder" class="size-3" />{{ f }}
             </button>
          </template>
       </div>
 
-      <div v-if="loading" class="flex justify-center py-10">
-         <CmsIcon name="arrow-path" class="size-6 animate-spin text-(--ui-text-dimmed)" />
-      </div>
+      <CmsSpinner v-if="loading" />
 
-      <div
-         v-else-if="visible.length"
-         class="grid gap-4"
-         :class="
-  selectable ? 'grid-cols-2 sm:grid-cols-3' : 'grid-cols-2 sm:grid-cols-3 lg:grid-cols-4'
-"
-      >
+      <div v-else-if="visible.length" class="cms-media-grid" :class="{ 'is-compact': selectable }">
          <component
             :is="selectable ? 'button' : 'div'"
-            v-for="item in visible"
+            v-for="item in paged"
             :key="item.key"
             :type="selectable ? 'button' : void 0"
-            class="cms-card group overflow-hidden text-left"
-            :class="{
-  'hover:border-(--cms-line-strong)': selectable
-}"
+            class="cms-card cms-media-tile"
+            :class="{ 'is-selectable': selectable }"
             @click="selectable && emit('select', { key: item.key, url: item.url })"
          >
-            <div class="relative flex aspect-square items-center justify-center bg-(--cms-field)">
+            <div class="cms-media-preview">
                <img
                   v-if="item.type === 'image' && item.url"
                   :src="item.url"
                   alt=""
                   loading="lazy"
-                  class="absolute inset-0 size-full object-cover"
                />
                <video
                   v-else-if="item.type === 'video' && item.url"
@@ -78,70 +67,45 @@
                   preload="metadata"
                   muted
                   playsinline
-                  class="absolute inset-0 size-full object-cover"
-               />
-               <CmsIcon
-                  v-else
-                  :name="mediaIconFor(item.type)"
-                  class="size-8 text-(--ui-text-dimmed)"
                />
-               <div
-                  v-if="!selectable"
-                  class="absolute top-2 right-2 flex gap-1 opacity-0 transition-opacity group-hover:opacity-100 focus-within:opacity-100"
-               >
+               <CmsIcon v-else :name="mediaIconFor(item.type)" class="size-8" />
+               <div v-if="!selectable" class="cms-media-actions">
                   <CmsButton
                      v-if="!readOnly"
                      icon="pencil-square"
                      size="xs"
                      color="neutral"
                      variant="solid"
-                     class="rounded-full"
                      aria-label="Edit details"
                      @click="openEdit(item)"
                   />
-                  <CmsButton
-                     icon="document-duplicate"
-                     size="xs"
-                     color="neutral"
-                     variant="solid"
-                     class="rounded-full"
-                     aria-label="Copy URL"
-                     @click="copy(item)"
-                  />
                   <CmsButton
                      v-if="!readOnly"
                      icon="trash"
                      size="xs"
                      color="error"
                      variant="solid"
-                     class="rounded-full"
                      aria-label="Delete"
                      @click="remove(item)"
                   />
                </div>
-            </div>
-            <div class="flex flex-col gap-1 px-3.5 py-2.5">
-               <div class="truncate text-sm font-medium" :title="item.key">
-                  {{ mediaFilename(item.key) }}
-               </div>
-               <div class="cms-kicker">
+               <div class="cms-media-info">
                   {{ extension(item.key) }} · {{ formatSize(item.size)
                   }}<template v-if="item.width && item.height">
                      · {{ item.width }}×{{ item.height }}
                   </template>
                </div>
             </div>
+            <div class="cms-media-meta">
+               <div class="cms-media-name" :title="item.key">
+                  {{ mediaFilename(item.key) }}
+               </div>
+            </div>
          </component>
       </div>
 
       <CmsEmptyState v-else-if="loadError" icon="exclamation-triangle" title="Could not load media">
-         <CmsButton
-            label="Retry"
-            icon="arrow-path"
-            variant="subtle"
-            class="mt-3 rounded-full px-4"
-            @click="reload"
-         />
+         <CmsButton label="Retry" icon="arrow-path" variant="subtle" @click="reload" />
       </CmsEmptyState>
 
       <CmsEmptyState
@@ -151,11 +115,18 @@
          :body="readOnly ? 'No media registered.' : 'Files you upload will show up here.'"
       />
 
+      <CmsPagination
+         v-if="!loading && visible.length"
+         v-model:page="page"
+         :total="visible.length"
+         :items-per-page="PAGE_SIZE"
+      />
+
       <CmsModal
          v-if="!readOnly"
          :open="!!editing"
          :title="editing ? mediaFilename(editing.key) : ''"
-         :ui="CMS_MODAL_UI"
+         size="lg"
          @update:open="
   (open) => {
     if (!open) editing = null;
@@ -163,20 +134,15 @@
 "
       >
          <template #body>
-            <div class="flex flex-col gap-4">
+            <div class="cms-form">
                <CmsFormField label="Alt text">
-                  <CmsInput v-model="editAlt" size="lg" class="w-full" />
+                  <CmsInput v-model="editAlt" />
                </CmsFormField>
                <CmsFormField label="Folder">
-                  <CmsInput v-model="editFolder" size="lg" class="w-full" />
+                  <CmsInput v-model="editFolder" />
                </CmsFormField>
-               <div class="flex justify-end">
-                  <CmsButton
-                     label="Save"
-                     :loading="editSaving"
-                     class="rounded-full px-6"
-                     @click="saveEdit"
-                  />
+               <div class="cms-actions is-end">
+                  <CmsButton label="Save" :loading="editSaving" @click="saveEdit" />
                </div>
             </div>
          </template>
@@ -185,12 +151,12 @@
 </template>
 
 <script setup>
-import { computed, onMounted, ref } from "#imports";
+import { computed, onMounted, ref, watch } from "#imports";
 import { MEDIA_TYPES, mediaFilename, mediaIconFor } from "#nuxt-cms";
 import { useCmsConfirm } from "../../composables/cms-confirm";
 import { useCmsRuntime } from "../../composables/cms-runtime";
 import { useCmsToast } from "../../composables/cms-toast";
-import { CMS_MODAL_UI, errorMessage } from "../../utils/ui";
+import { errorMessage } from "../../utils/ui";
 const filterLabels = {
   all: "All",
   image: "Images",
@@ -214,8 +180,8 @@ async function reload() {
   loading.value = true;
   errorCode.value = null;
   try {
-    const page = await $fetch(endpoint);
-    items.value = page.items;
+    const result = await $fetch(endpoint);
+    items.value = result.items;
   } catch (err) {
     errorCode.value = err.statusCode ?? 500;
   } finally {
@@ -241,6 +207,18 @@ const visible = computed(() => {
   if (folder.value) list = list.filter((item) => item.folder === folder.value);
   return list;
 });
+const PAGE_SIZE = 24;
+const page = ref(1);
+watch([filter, folder], () => {
+  page.value = 1;
+});
+watch(visible, (list) => {
+  const pageCount = Math.max(1, Math.ceil(list.length / PAGE_SIZE));
+  if (page.value > pageCount) page.value = pageCount;
+});
+const paged = computed(
+  () => visible.value.slice((page.value - 1) * PAGE_SIZE, page.value * PAGE_SIZE)
+);
 function onUploaded(uploaded) {
   if (props.selectable && uploaded[0]) {
     emit("select", uploaded[0]);
@@ -295,14 +273,6 @@ function formatSize(bytes) {
   }
   return `${Math.round(value / 1024)} TB`;
 }
-async function copy(item) {
-  try {
-    await navigator.clipboard.writeText(item.url ?? item.key);
-    toast.add({ title: "Copied", color: "success" });
-  } catch {
-    toast.add({ title: "Copy failed", color: "error" });
-  }
-}
 const confirmAction = useCmsConfirm();
 const removing = ref(false);
 async function remove(item) {

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

@@ -0,0 +1,6 @@
+type __VLS_Props = {
+    value?: string | null;
+};
+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/MediaThumb.vue

@@ -0,0 +1,40 @@
+<template>
+   <span v-if="!value" class="cms-media-thumb-empty">—</span>
+
+   <img
+      v-else-if="kind === 'image' && url"
+      :src="url"
+      :alt="filename"
+      :title="filename"
+      loading="lazy"
+      class="cms-media-thumb"
+   />
+
+   <video
+      v-else-if="kind === 'video' && url"
+      :src="url"
+      :title="filename"
+      muted
+      playsinline
+      preload="metadata"
+      class="cms-media-thumb"
+   />
+
+   <span v-else :title="filename" class="cms-media-thumb is-fallback">
+      <CmsIcon :name="icon" class="size-4" />
+   </span>
+</template>
+
+<script setup>
+import { computed } from "#imports";
+import { mediaFilename, mediaIconFor, mediaPublicUrl, mediaTypeForKey } from "#nuxt-cms";
+import { useCmsRuntime } from "../../composables/cms-runtime";
+const props = defineProps({
+  value: { type: [String, null], required: false }
+});
+const { mediaBaseUrl } = useCmsRuntime();
+const kind = computed(() => props.value ? mediaTypeForKey(props.value) : "file");
+const url = computed(() => props.value ? mediaPublicUrl(mediaBaseUrl, props.value) : null);
+const filename = computed(() => props.value ? mediaFilename(props.value) : "");
+const icon = computed(() => mediaIconFor(kind.value));
+</script>

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

@@ -0,0 +1,6 @@
+type __VLS_Props = {
+    value?: string | null;
+};
+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/Modal.d.vue.ts

@@ -1,9 +1,6 @@
 type __VLS_Props = {
     title?: string;
-    ui?: {
-        content?: string;
-        title?: string;
-    };
+    size?: 'sm' | 'lg';
 };
 type __VLS_ModelProps = {
     'open'?: boolean;

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

@@ -4,14 +4,15 @@
            once teleported outside the admin layout root. -->
       <div v-if="open" class="cms-scope">
          <div class="cms-overlay" @click.self="close">
-            <div class="cms-modal cms-rise" :class="ui?.content" role="dialog" aria-modal="true">
+            <div
+               class="cms-modal cms-rise"
+               :class="size ? `is-${size}` : void 0"
+               role="dialog"
+               aria-modal="true"
+            >
                <div v-if="title || $slots.header" class="cms-modal-header">
                   <slot name="header">
-                     <h2
-                        :class="
-  ui?.title ?? 'cms-display text-xl font-medium text-(--ui-text-highlighted)'
-"
-                     >
+                     <h2 class="cms-title cms-title-sm">
                         {{ title }}
                      </h2>
                   </slot>
@@ -29,7 +30,7 @@
 import { onBeforeUnmount, watch } from "#imports";
 defineProps({
   title: { type: String, required: false },
-  ui: { type: Object, required: false }
+  size: { type: String, required: false }
 });
 const open = defineModel("open", { type: Boolean, ...{ default: false } });
 const emit = defineEmits(["after:leave"]);