@xleddyl/nuxt-cms 0.1.23 → 0.1.24

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@xleddyl/nuxt-cms",
   "configKey": "cms",
-  "version": "0.1.23",
+  "version": "0.1.24",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "unknown"

package/dist/module.mjs

@@ -10,11 +10,12 @@ import { introspectionFromSchema, buildSchema } from 'graphql';
 import { minifyIntrospection, outputIntrospectionFile } from 'gql.tada/internal';
 import { createJiti } from 'jiti';
 import { typeName, blockTypeName, blockUnionName, renderGraphqlSdl } from '../dist/runtime/shared/graphql-sdl.js';
-import { isTranslatableField, isMultiSelect } from '../dist/runtime/shared/index.js';
+import { isMultiSelect, isTranslatableField } from '../dist/runtime/shared/index.js';
 
 const IDENTIFIER = /^[a-z_]\w*$/i;
 const RESERVED_ENTRY_KEYS = ["admin", "auth", "login", "media", "graphql", "cms_media"];
 const RESERVED_COLUMNS = ["id", "status", "created_at", "updated_at"];
+const TITLE_FIELD_TYPES = ["text", "slug", "email", "number", "date", "select"];
 const RESERVED_TYPE_NAMES = [
   "Query",
   "Mutation",
@@ -68,8 +69,20 @@ function validateConfig(config, i18n) {
       errors.push(`${at}: drafts are only supported on collections`);
     if (!entry.fields || !Object.keys(entry.fields).length)
       errors.push(`${at}: fields must not be empty`);
-    if (entry.titleField && !entry.fields?.[entry.titleField])
-      errors.push(`${at}: titleField '${entry.titleField}' is not a declared field`);
+    if (entry.kind === "collection" && !entry.titleField) {
+      errors.push(`${at}: titleField is required on collections`);
+    } else if (entry.titleField) {
+      const titleField = entry.fields?.[entry.titleField];
+      if (!titleField) {
+        errors.push(`${at}: titleField '${entry.titleField}' is not a declared field`);
+      } else if (!TITLE_FIELD_TYPES.includes(titleField.type) || isMultiSelect(titleField)) {
+        errors.push(
+          `${at}: titleField '${entry.titleField}' must be one of ${TITLE_FIELD_TYPES.join(
+            ", "
+          )} (got '${titleField.type}')`
+        );
+      }
+    }
     const columnNames = /* @__PURE__ */ new Set();
     for (const [key, field] of Object.entries(entry.fields ?? {})) {
       const fat = `${at}, field '${key}'`;

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

@@ -59,7 +59,6 @@
                :key="blockKey"
                :label="blockField.label"
                :required="blockField.required"
-               :ui="CMS_FIELD_UI"
             >
                <CmsFieldInput
                   :model-value="item[blockKey]"
@@ -69,20 +68,14 @@
             </CmsFormField>
          </template>
       </div>
-      <CmsDropdownMenu :items="addItems">
-         <CmsButton
-            label="Add block"
-            icon="plus"
-            variant="subtle"
-            class="self-start rounded-full px-4"
-         />
+      <CmsDropdownMenu :items="addItems" class="self-start">
+         <CmsButton label="Add block" icon="plus" variant="subtle" />
       </CmsDropdownMenu>
    </div>
 </template>
 
 <script setup>
 import { computed, ref } from "#imports";
-import { CMS_FIELD_UI } from "../../utils/ui";
 const props = defineProps({
   field: { type: Object, required: true }
 });

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

@@ -8,7 +8,7 @@
   `cms-btn-${size ?? 'md'}`,
   `cms-btn-${color ?? 'primary'}`,
   `cms-btn-${variant ?? 'solid'}`,
-  { 'is-block': block }
+  { 'is-block': block, 'is-icon': iconOnly }
 ]"
    >
       <CmsIcon
@@ -28,7 +28,7 @@
 </template>
 
 <script setup>
-import { computed } from "#imports";
+import { computed, useSlots } from "#imports";
 const props = defineProps({
   label: { type: String, required: false },
   type: { type: String, required: false },
@@ -43,4 +43,6 @@ const props = defineProps({
   block: { type: Boolean, required: false }
 });
 const iconName = computed(() => props.loading ? "arrow-path" : props.icon);
+const slots = useSlots();
+const iconOnly = computed(() => !props.label && !props.block && !slots.default);
 </script>

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

@@ -2,24 +2,17 @@
    <CmsModal
       v-model:open="state.open"
       :title="state.title ?? 'Are you sure?'"
-      :ui="ui"
+      size="sm"
       @after:leave="finish(false)"
    >
       <template #body>
-         <div class="flex flex-col gap-5">
-            <p class="text-sm text-(--ui-text)">{{ state.message }}</p>
-            <div class="flex justify-end gap-2">
-               <CmsButton
-                  label="Cancel"
-                  variant="subtle"
-                  color="neutral"
-                  class="rounded-full px-4"
-                  @click="finish(false)"
-               />
+         <div class="cms-form">
+            <p class="text-sm">{{ state.message }}</p>
+            <div class="cms-actions is-end">
+               <CmsButton label="Cancel" variant="subtle" color="neutral" @click="finish(false)" />
                <CmsButton
                   :label="state.confirmLabel ?? 'Confirm'"
                   color="error"
-                  class="rounded-full px-4"
                   @click="finish(true)"
                />
             </div>
@@ -30,9 +23,7 @@
 
 <script setup>
 import { useCmsConfirmState } from "../../composables/cms-confirm";
-import { CMS_MODAL_UI } from "../../utils/ui";
 const state = useCmsConfirmState();
-const ui = { ...CMS_MODAL_UI, content: "rounded-2xl sm:max-w-md" };
 function finish(value) {
   const resolve = state.value.resolve;
   if (!resolve) return;

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

@@ -0,0 +1,30 @@
+type __VLS_Props = {
+    title?: string;
+};
+type __VLS_ModelProps = {
+    'open'?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_13: {}, __VLS_22: {}, __VLS_24: {};
+type __VLS_Slots = {} & {
+    badge?: (props: typeof __VLS_13) => any;
+} & {
+    default?: (props: typeof __VLS_22) => any;
+} & {
+    footer?: (props: typeof __VLS_24) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: () => any;
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onClose?: (() => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => 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/Drawer.vue

@@ -0,0 +1,65 @@
+<template>
+   <Teleport to="body">
+      <Transition name="cms-drawer">
+         <div v-if="open" class="cms-scope cms-overlay cms-overlay-drawer" @click.self="close">
+            <aside class="cms-drawer" role="dialog" aria-modal="true">
+               <header class="cms-drawer-header">
+                  <div class="cms-actions min-w-0">
+                     <h2 class="cms-title cms-title-sm truncate">
+                        {{ title }}
+                     </h2>
+                     <slot name="badge" />
+                  </div>
+                  <CmsButton
+                     icon="x-mark"
+                     variant="ghost"
+                     color="neutral"
+                     size="sm"
+                     aria-label="Close"
+                     @click="close"
+                  />
+               </header>
+
+               <div class="cms-drawer-body">
+                  <slot />
+               </div>
+
+               <footer v-if="$slots.footer" class="cms-drawer-footer">
+                  <slot name="footer" />
+               </footer>
+            </aside>
+         </div>
+      </Transition>
+   </Teleport>
+</template>
+
+<script setup>
+import { onBeforeUnmount, watch } from "#imports";
+defineProps({
+  title: { type: String, required: false }
+});
+const open = defineModel("open", { type: Boolean, ...{ default: false } });
+const emit = defineEmits(["close"]);
+function close() {
+  emit("close");
+}
+function onKeydown(event) {
+  if (event.key === "Escape") close();
+}
+watch(open, (value) => {
+  if (import.meta.server) return;
+  if (value) {
+    document.addEventListener("keydown", onKeydown);
+    document.body.style.overflow = "hidden";
+  } else {
+    document.removeEventListener("keydown", onKeydown);
+    document.body.style.overflow = "";
+  }
+});
+onBeforeUnmount(() => {
+  if (import.meta.client) {
+    document.removeEventListener("keydown", onKeydown);
+    document.body.style.overflow = "";
+  }
+});
+</script>

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

@@ -0,0 +1,30 @@
+type __VLS_Props = {
+    title?: string;
+};
+type __VLS_ModelProps = {
+    'open'?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_13: {}, __VLS_22: {}, __VLS_24: {};
+type __VLS_Slots = {} & {
+    badge?: (props: typeof __VLS_13) => any;
+} & {
+    default?: (props: typeof __VLS_22) => any;
+} & {
+    footer?: (props: typeof __VLS_24) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: () => any;
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onClose?: (() => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => 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/DropdownMenu.d.vue.ts

@@ -10,9 +10,6 @@ type __VLS_Props = {
     content?: {
         align?: 'start' | 'end';
     };
-    ui?: {
-        content?: string;
-    };
 };
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {

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

@@ -3,11 +3,7 @@
       <div class="contents" @click="open = !open">
          <slot />
       </div>
-      <div
-         v-if="open"
-         class="cms-menu"
-         :class="[content?.align === 'end' && 'align-end', ui?.content]"
-      >
+      <div v-if="open" class="cms-menu" :class="{ 'align-end': content?.align === 'end' }">
          <button
             v-for="(item, index) in items"
             :key="index"
@@ -30,8 +26,7 @@
 import { onBeforeUnmount, ref, watch } from "#imports";
 defineProps({
   items: { type: Array, required: true },
-  content: { type: Object, required: false },
-  ui: { type: Object, required: false }
+  content: { type: Object, required: false }
 });
 const open = ref(false);
 const root = ref(null);

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

@@ -10,9 +10,6 @@ type __VLS_Props = {
     content?: {
         align?: 'start' | 'end';
     };
-    ui?: {
-        content?: string;
-    };
 };
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {

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

@@ -2,6 +2,7 @@ type __VLS_Props = {
     icon: string;
     title: string;
     body?: string;
+    fill?: boolean;
 };
 declare var __VLS_6: {};
 type __VLS_Slots = {} & {

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

@@ -1,10 +1,8 @@
 <template>
-   <div class="cms-empty flex flex-col items-center gap-2 p-14 text-center">
-      <CmsIcon :name="icon" class="mb-1 size-6 text-(--cms-fern)" />
-      <p class="cms-display text-xl text-(--ui-text-highlighted)">
-         {{ title }}<span class="text-(--cms-fern)">.</span>
-      </p>
-      <p v-if="body" class="max-w-md text-sm text-(--ui-text-muted)">
+   <div class="cms-empty" :class="{ 'is-fill': fill }">
+      <CmsIcon :name="icon" class="cms-empty-icon size-6" />
+      <p class="cms-title cms-title-sm">{{ title }}<span class="cms-accent">.</span></p>
+      <p v-if="body" class="cms-subtitle max-w-md">
          {{ body }}
       </p>
       <slot />
@@ -15,6 +13,7 @@
 defineProps({
   icon: { type: String, required: true },
   title: { type: String, required: true },
-  body: { type: String, required: false }
+  body: { type: String, required: false },
+  fill: { type: Boolean, required: false }
 });
 </script>

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

@@ -2,6 +2,7 @@ type __VLS_Props = {
     icon: string;
     title: string;
     body?: string;
+    fill?: boolean;
 };
 declare var __VLS_6: {};
 type __VLS_Slots = {} & {

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

@@ -0,0 +1,21 @@
+import type { CmsEntry } from '#nuxt-cms';
+type __VLS_Props = {
+    collection: string;
+    config: CmsEntry;
+    entryId: string | null;
+};
+type __VLS_ModelProps = {
+    'open'?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    saved: () => any;
+    deleted: () => any;
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onSaved?: (() => any) | undefined;
+    onDeleted?: (() => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,193 @@
+<template>
+   <CmsDrawer v-model:open="open" :title="title" @close="requestClose">
+      <template v-if="drafts && !loading" #badge>
+         <CmsStatusBadge :published="published" />
+      </template>
+
+      <CmsSpinner v-if="loading" />
+
+      <CmsEntryForm
+         v-else
+         v-model="formState"
+         :fields="config.fields"
+         :drafts="drafts"
+         :form-id="FORM_ID"
+         :loading="saving"
+         :footer="false"
+         @submit="save"
+         @error="revertStatus"
+      />
+
+      <template #footer>
+         <CmsButton
+            v-if="!isNew"
+            label="Delete"
+            icon="trash"
+            variant="ghost"
+            color="error"
+            @click="remove"
+         />
+         <span v-else />
+         <div class="cms-actions">
+            <CmsButton
+               v-if="drafts"
+               type="submit"
+               :form="FORM_ID"
+               :label="published ? 'Make draft' : 'Publish'"
+               variant="subtle"
+               :loading="saving"
+               :disabled="loading"
+               @click="togglePublished"
+            />
+            <CmsButton
+               type="submit"
+               :form="FORM_ID"
+               label="Save"
+               :loading="saving"
+               :disabled="loading"
+            />
+         </div>
+      </template>
+   </CmsDrawer>
+</template>
+
+<script setup>
+import { isTranslatableField } from "#nuxt-cms";
+import { computed, ref, watch } from "#imports";
+import { useCmsConfirm } from "../../composables/cms-confirm";
+import { useCmsRuntime } from "../../composables/cms-runtime";
+import { useCmsToast } from "../../composables/cms-toast";
+import { cmsApi } from "../../utils/api";
+import { errorMessage } from "../../utils/ui";
+const FORM_ID = "cms-entry-drawer-form";
+const props = defineProps({
+  collection: { type: String, required: true },
+  config: { type: Object, required: true },
+  entryId: { type: [String, null], required: true }
+});
+const open = defineModel("open", { type: Boolean, ...{ default: false } });
+const emit = defineEmits(["saved", "deleted"]);
+const toast = useCmsToast();
+const confirmAction = useCmsConfirm();
+const endpoint = computed(() => `/api/cms/admin/${props.collection}`);
+const isNew = computed(() => props.entryId === null);
+const drafts = computed(() => !!props.config.drafts);
+const formKeys = computed(
+  () => drafts.value ? [...Object.keys(props.config.fields), "status"] : Object.keys(props.config.fields)
+);
+const { i18n: contentI18n } = useCmsRuntime();
+const loading = ref(false);
+const saving = ref(false);
+const formState = ref({});
+const snapshot = ref("");
+const entryName = computed(() => {
+  const key = props.config.titleField;
+  const field = key ? props.config.fields[key] : void 0;
+  const value = key ? formState.value[key] : void 0;
+  if (!field || value == null || value === "") return "";
+  if (isTranslatableField(field)) {
+    const record = value;
+    return record[contentI18n.defaultLocale] ?? Object.values(record)[0] ?? "";
+  }
+  return String(value);
+});
+const title = computed(() => {
+  if (isNew.value) return "Add entry";
+  return entryName.value || "Untitled";
+});
+function emptyState() {
+  return Object.fromEntries(formKeys.value.map((key) => [key, null]));
+}
+function pickFields(row) {
+  return Object.fromEntries(formKeys.value.map((key) => [key, row[key] ?? null]));
+}
+function setState(state) {
+  formState.value = state;
+  snapshot.value = JSON.stringify(state);
+}
+const dirty = computed(() => JSON.stringify(formState.value) !== snapshot.value);
+const published = computed({
+  get: () => formState.value.status === "published",
+  set: (value) => {
+    formState.value.status = value ? "published" : "draft";
+  }
+});
+function togglePublished() {
+  published.value = !published.value;
+}
+function revertStatus() {
+  if (!drafts.value) return;
+  formState.value.status = JSON.parse(snapshot.value).status ?? null;
+}
+async function load() {
+  if (props.entryId === null) {
+    setState(emptyState());
+    return;
+  }
+  loading.value = true;
+  try {
+    const entry = await cmsApi(`${endpoint.value}/${props.entryId}`);
+    setState(pickFields(entry));
+  } catch (error) {
+    toast.add({
+      title: "Could not load entry",
+      description: errorMessage(error),
+      color: "error"
+    });
+    open.value = false;
+  } finally {
+    loading.value = false;
+  }
+}
+watch(
+  () => [open.value, props.entryId],
+  ([isOpen]) => {
+    if (isOpen) load();
+  },
+  { immediate: true }
+);
+async function requestClose() {
+  if (dirty.value && !await confirmAction("You have unsaved changes. Close anyway?")) return;
+  open.value = false;
+}
+async function save() {
+  if (saving.value) return;
+  saving.value = true;
+  try {
+    await (isNew.value ? cmsApi(endpoint.value, { method: "POST", body: formState.value }) : cmsApi(`${endpoint.value}/${props.entryId}`, {
+      method: "PUT",
+      body: formState.value
+    }));
+    snapshot.value = JSON.stringify(formState.value);
+    toast.add({ title: "Saved", color: "success" });
+    emit("saved");
+    open.value = false;
+  } catch (error) {
+    toast.add({
+      title: "Save failed",
+      description: errorMessage(error),
+      color: "error"
+    });
+  } finally {
+    saving.value = false;
+  }
+}
+async function remove() {
+  if (!await confirmAction("Delete this row?")) return;
+  saving.value = true;
+  try {
+    await cmsApi(`${endpoint.value}/${props.entryId}`, { method: "DELETE" });
+    snapshot.value = JSON.stringify(formState.value);
+    emit("deleted");
+    open.value = false;
+  } catch (error) {
+    toast.add({
+      title: "Delete failed",
+      description: errorMessage(error),
+      color: "error"
+    });
+  } finally {
+    saving.value = false;
+  }
+}
+</script>

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

@@ -0,0 +1,21 @@
+import type { CmsEntry } from '#nuxt-cms';
+type __VLS_Props = {
+    collection: string;
+    config: CmsEntry;
+    entryId: string | null;
+};
+type __VLS_ModelProps = {
+    'open'?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    saved: () => any;
+    deleted: () => any;
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onSaved?: (() => any) | undefined;
+    onDeleted?: (() => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -3,7 +3,6 @@
       :id="formId"
       :state="state"
       :schema="schema"
-      class="flex flex-col gap-5"
       @submit="emit('submit')"
       @error="emit('error')"
    >
@@ -13,22 +12,28 @@
          :label="field.label"
          :name="key"
          :required="field.required"
-         :ui="CMS_FIELD_UI"
       >
+         <template v-if="isTranslatableField(field) && i18n.locales.length > 1" #label-actions>
+            <CmsLocaleSwitch
+               :model-value="localeFor(key)"
+               :value="state[key]"
+               @update:model-value="(locale) => setLocale(key, locale)"
+            />
+         </template>
          <CmsFieldInput
             v-model="state[key]"
             :field="field"
+            :locale="localeFor(key)"
             :slug-source="field.from ? state[field.from] : void 0"
          />
       </CmsFormField>
-      <div v-if="footer" class="flex items-center justify-end gap-3 pt-1">
-         <CmsButton type="submit" label="Save" :loading="loading" class="rounded-full px-6" />
+      <div v-if="footer" class="cms-form-actions">
+         <CmsButton type="submit" label="Save" :loading="loading" />
          <CmsButton
             v-if="drafts"
             type="submit"
             :label="published ? 'Make draft' : 'Publish'"
             :loading="loading"
-            class="rounded-full px-6"
             @click="togglePublished"
          />
       </div>
@@ -36,10 +41,10 @@
 </template>
 
 <script setup>
-import { computed } from "#imports";
+import { isTranslatableField } from "#nuxt-cms";
+import { computed, ref } from "#imports";
 import { buildEntrySchema } from "../../../shared/validation";
 import { useCmsRuntime } from "../../composables/cms-runtime";
-import { CMS_FIELD_UI } from "../../utils/ui";
 const props = defineProps({
   fields: { type: Object, required: true },
   drafts: { type: Boolean, required: false },
@@ -50,6 +55,13 @@ const props = defineProps({
 const state = defineModel({ type: Object, ...{ required: true } });
 const emit = defineEmits(["submit", "error"]);
 const { i18n } = useCmsRuntime();
+const activeLocale = ref({});
+function localeFor(key) {
+  return activeLocale.value[key] ?? i18n.defaultLocale;
+}
+function setLocale(key, locale) {
+  activeLocale.value = { ...activeLocale.value, [key]: locale };
+}
 const schema = computed(
   () => buildEntrySchema({ fields: props.fields, drafts: props.drafts }, i18n)
 );

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