@xleddyl/nuxt-cms 0.1.9

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

@@ -0,0 +1,15 @@
+import type { FieldConfig } from '#nuxt-cms';
+type __VLS_Props = {
+    field: FieldConfig;
+};
+type __VLS_ModelProps = {
+    modelValue: Record<string, unknown>[] | null;
+};
+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: Record<string, unknown>[] | null) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: Record<string, unknown>[] | null) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,110 @@
+<template>
+   <div class="flex flex-col gap-3">
+      <div
+         v-for="(item, index) in items"
+         :key="uidFor(item)"
+         class="cms-card flex flex-col gap-4 p-4"
+      >
+         <div class="flex items-center gap-1">
+            <span class="cms-kicker grow">
+               {{ blocks[item.type]?.label ?? item.type }}
+            </span>
+            <UButton
+               icon="i-lucide-chevron-up"
+               size="xs"
+               variant="ghost"
+               color="neutral"
+               :disabled="index === 0"
+               @click="move(index, -1)"
+            />
+            <UButton
+               icon="i-lucide-chevron-down"
+               size="xs"
+               variant="ghost"
+               color="neutral"
+               :disabled="index === items.length - 1"
+               @click="move(index, 1)"
+            />
+            <UButton
+               icon="i-lucide-trash-2"
+               size="xs"
+               variant="ghost"
+               color="error"
+               @click="remove(index)"
+            />
+         </div>
+         <UFormField
+            v-for="(blockField, blockKey) in blocks[item.type]?.fields"
+            :key="blockKey"
+            :label="blockField.label"
+            :required="blockField.required"
+            :ui="CMS_FIELD_UI"
+         >
+            <CmsFieldInput
+               :model-value="item[blockKey]"
+               :field="blockField"
+               @update:model-value="(value) => updateField(index, blockKey, value)"
+            />
+         </UFormField>
+      </div>
+      <UDropdownMenu :items="addItems">
+         <UButton
+            :label="t('cms.form.addBlock')"
+            icon="i-lucide-plus"
+            variant="subtle"
+            class="self-start rounded-full px-4"
+         />
+      </UDropdownMenu>
+   </div>
+</template>
+
+<script setup>
+import { computed, useI18n } from "#imports";
+import { CMS_FIELD_UI } from "../../utils/ui";
+const props = defineProps({
+  field: { type: Object, required: true }
+});
+const model = defineModel({ type: [Array, null], ...{ required: true } });
+const { t } = useI18n();
+const blocks = computed(() => props.field.blocks ?? {});
+const items = computed(() => Array.isArray(model.value) ? model.value : []);
+let uidCounter = 0;
+const uids = /* @__PURE__ */ new WeakMap();
+function uidFor(item) {
+  let uid = uids.get(item);
+  if (uid === void 0) {
+    uid = ++uidCounter;
+    uids.set(item, uid);
+  }
+  return uid;
+}
+function updateField(index, key, value) {
+  const current = items.value[index];
+  if (!current) return;
+  const updated = { ...current, [key]: value };
+  uids.set(updated, uidFor(current));
+  model.value = items.value.map((item, i) => i === index ? updated : item);
+}
+function add(type) {
+  const block = blocks.value[type];
+  if (!block) return;
+  const empty = Object.fromEntries(Object.keys(block.fields).map((k) => [k, null]));
+  model.value = [...items.value, { type, ...empty }];
+}
+function remove(index) {
+  const next = items.value.filter((_, i) => i !== index);
+  model.value = next.length ? next : null;
+}
+function move(index, delta) {
+  const next = [...items.value];
+  const [item] = next.splice(index, 1);
+  next.splice(index + delta, 0, item);
+  model.value = next;
+}
+const addItems = computed(
+  () => Object.entries(blocks.value).map(([type, block]) => ({
+    label: block.label,
+    onSelect: () => add(type)
+  }))
+);
+</script>

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

@@ -0,0 +1,15 @@
+import type { FieldConfig } from '#nuxt-cms';
+type __VLS_Props = {
+    field: FieldConfig;
+};
+type __VLS_ModelProps = {
+    modelValue: Record<string, unknown>[] | null;
+};
+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: Record<string, unknown>[] | null) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: Record<string, unknown>[] | null) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,18 @@
+type __VLS_Props = {
+    icon: string;
+    title: string;
+    body?: string;
+};
+declare var __VLS_6: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_6) => 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>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,20 @@
+<template>
+   <div class="cms-empty flex flex-col items-center gap-2 p-14 text-center">
+      <UIcon :name="icon" class="text-(--cms-fern) mb-1 size-6" />
+      <p class="cms-display text-(--ui-text-highlighted) text-xl">
+         {{ title }}<span class="text-(--cms-fern)">.</span>
+      </p>
+      <p v-if="body" class="text-(--ui-text-muted) max-w-md text-sm">
+         {{ body }}
+      </p>
+      <slot />
+   </div>
+</template>
+
+<script setup>
+defineProps({
+  icon: { type: String, required: true },
+  title: { type: String, required: true },
+  body: { type: String, required: false }
+});
+</script>

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

@@ -0,0 +1,18 @@
+type __VLS_Props = {
+    icon: string;
+    title: string;
+    body?: string;
+};
+declare var __VLS_6: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_6) => 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>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,23 @@
+import type { CmsEntry } from '#nuxt-cms';
+type __VLS_Props = {
+    fields: CmsEntry['fields'];
+    drafts?: boolean;
+    loading?: boolean;
+    formId?: string;
+    footer?: boolean;
+};
+type __VLS_ModelProps = {
+    modelValue: Record<string, unknown>;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    error: () => any;
+    submit: () => any;
+    "update:modelValue": (value: Record<string, unknown>) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onError?: (() => any) | undefined;
+    onSubmit?: (() => any) | undefined;
+    "onUpdate:modelValue"?: ((value: Record<string, unknown>) => 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

@@ -0,0 +1,78 @@
+<template>
+   <UForm
+      :id="formId"
+      :state="state"
+      :schema="schema"
+      class="flex flex-col gap-5"
+      @submit="emit('submit')"
+      @error="emit('error')"
+   >
+      <UFormField
+         v-for="(field, key) in fields"
+         :key="key"
+         :label="field.label"
+         :name="key"
+         :required="field.required"
+         :ui="CMS_FIELD_UI"
+      >
+         <CmsFieldInput
+            v-model="state[key]"
+            :field="field"
+            :slug-source="field.from ? state[field.from] : void 0"
+         />
+      </UFormField>
+      <div v-if="footer" class="flex items-center justify-end gap-3 pt-1">
+         <UButton
+            type="submit"
+            :label="t('cms.form.save')"
+            :loading="loading"
+            class="rounded-full px-6"
+         />
+         <UButton
+            v-if="drafts"
+            type="submit"
+            :label="published ? t('cms.status.unpublish') : t('cms.status.publish')"
+            :loading="loading"
+            class="rounded-full px-6"
+            @click="togglePublished"
+         />
+      </div>
+   </UForm>
+</template>
+
+<script setup>
+import { computed, useI18n } 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 },
+  loading: { type: Boolean, required: false },
+  formId: { type: String, required: false },
+  footer: { type: Boolean, required: false, default: true }
+});
+const state = defineModel({ type: Object, ...{ required: true } });
+const emit = defineEmits(["submit", "error"]);
+const { t } = useI18n();
+const { i18n } = useCmsRuntime();
+const schema = computed(
+  () => buildEntrySchema({ fields: props.fields, drafts: props.drafts }, i18n, {
+    required: t("cms.validation.required"),
+    invalidDate: t("cms.validation.invalidDate"),
+    invalidEmail: t("cms.validation.invalidEmail"),
+    invalidSlug: t("cms.validation.invalidSlug"),
+    unknownLocale: t("cms.validation.unknownLocale"),
+    requiredLocale: (locale) => t("cms.validation.requiredLocale", { locale })
+  })
+);
+const published = computed({
+  get: () => state.value.status === "published",
+  set: (value) => {
+    state.value.status = value ? "published" : "draft";
+  }
+});
+function togglePublished() {
+  published.value = !published.value;
+}
+</script>

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

@@ -0,0 +1,23 @@
+import type { CmsEntry } from '#nuxt-cms';
+type __VLS_Props = {
+    fields: CmsEntry['fields'];
+    drafts?: boolean;
+    loading?: boolean;
+    formId?: string;
+    footer?: boolean;
+};
+type __VLS_ModelProps = {
+    modelValue: Record<string, unknown>;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    error: () => any;
+    submit: () => any;
+    "update:modelValue": (value: Record<string, unknown>) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onError?: (() => any) | undefined;
+    onSubmit?: (() => any) | undefined;
+    "onUpdate:modelValue"?: ((value: Record<string, unknown>) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,16 @@
+import type { FieldConfig } from '#nuxt-cms';
+type __VLS_Props = {
+    field: FieldConfig;
+    slugSource?: string | null;
+};
+type __VLS_ModelProps = {
+    modelValue: unknown;
+};
+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: unknown) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: unknown) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,85 @@
+<template>
+   <CmsTranslatableField v-if="isTranslatableField(field)" v-model="translatable" :field="field" />
+   <CmsBlocksField v-else-if="field.type === 'blocks'" v-model="blocksValue" :field="field" />
+   <CmsRichTextField v-else-if="field.type === 'richtext'" v-model="strOrNull" />
+   <UTextarea
+      v-else-if="field.type === 'text' && field.textarea"
+      v-model="str"
+      :rows="4"
+      size="lg"
+      class="w-full"
+   />
+   <UInput v-else-if="field.type === 'text'" v-model="str" size="lg" class="w-full" />
+   <UInput v-else-if="field.type === 'email'" v-model="str" type="email" size="lg" class="w-full" />
+   <CmsSlugField v-else-if="field.type === 'slug'" v-model="strOrNull" :source="slugSource" />
+   <USelect
+      v-else-if="field.type === 'select'"
+      v-model="sel"
+      :items="field.options"
+      size="lg"
+      class="w-full"
+   />
+   <USwitch
+      v-else-if="field.type === 'boolean'"
+      :model-value="!!model"
+      @update:model-value="
+  (v) => {
+    model = v;
+  }
+"
+   />
+   <CmsJsonField v-else-if="field.type === 'json'" v-model="jsonValue" />
+   <UInput
+      v-else-if="field.type === 'number'"
+      v-model.number="num"
+      type="number"
+      size="lg"
+      class="w-full"
+   />
+   <UInput v-else-if="field.type === 'date'" v-model="str" type="date" size="lg" class="w-full" />
+   <CmsRelationField
+      v-else-if="field.type === 'relation'"
+      v-model="relationValue"
+      :to="field.to"
+      :required="field.required"
+      :multiple="field.cardinality === 'many-to-many'"
+   />
+   <CmsMediaField v-else v-model="strOrNull" :media-type="field.mediaType" :accept="field.accept" />
+</template>
+
+<script setup>
+import { isTranslatableField } from "#nuxt-cms";
+import { computed } from "#imports";
+defineProps({
+  field: { type: Object, required: true },
+  slugSource: { type: [String, null], required: false }
+});
+const model = defineModel({ type: null, ...{ required: true } });
+function proxy(fromModel, toModel = (v) => v) {
+  return computed({
+    get: () => fromModel(model.value),
+    set: (value) => {
+      model.value = toModel(value);
+    }
+  });
+}
+const str = proxy(
+  (v) => v ?? "",
+  (v) => v === "" ? null : v
+);
+const strOrNull = proxy((v) => v);
+const sel = proxy(
+  (v) => v ?? void 0,
+  (v) => v ?? null
+);
+const num = proxy(
+  (v) => v ?? void 0,
+  (v) => typeof v === "number" && !Number.isNaN(v) ? v : null
+);
+const translatable = proxy((v) => v);
+const blocksValue = proxy(
+  (v) => v
+);
+const relationValue = proxy((v) => v);
+const jsonValue = proxy((v) => v);
+</script>

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

@@ -0,0 +1,16 @@
+import type { FieldConfig } from '#nuxt-cms';
+type __VLS_Props = {
+    field: FieldConfig;
+    slugSource?: string | null;
+};
+type __VLS_ModelProps = {
+    modelValue: unknown;
+};
+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: unknown) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: unknown) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,10 @@
+type __VLS_ModelProps = {
+    modelValue: unknown;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: unknown) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: unknown) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,51 @@
+<template>
+   <div class="flex flex-col gap-1">
+      <UTextarea
+         v-model="text"
+         :rows="6"
+         size="lg"
+         class="w-full font-mono"
+         :color="invalid ? 'error' : void 0"
+         @blur="commit"
+         @update:model-value="invalid = false"
+      />
+      <p v-if="invalid" class="text-(--ui-error) text-xs">
+         {{ t("cms.form.invalidJson") }}
+      </p>
+   </div>
+</template>
+
+<script setup>
+import { ref, useI18n, watch } from "#imports";
+const model = defineModel({ type: null, ...{ required: true } });
+const { t } = useI18n();
+function serialize(value) {
+  return value == null ? "" : JSON.stringify(value, null, 2);
+}
+function parse(raw) {
+  if (!raw.trim()) return null;
+  try {
+    return JSON.parse(raw);
+  } catch {
+    return void 0;
+  }
+}
+const text = ref(serialize(model.value));
+const invalid = ref(false);
+watch(model, (value) => {
+  const current = parse(text.value);
+  if (JSON.stringify(current ?? null) !== JSON.stringify(value ?? null)) {
+    text.value = serialize(value);
+    invalid.value = false;
+  }
+});
+function commit() {
+  const parsed = parse(text.value);
+  if (parsed === void 0) {
+    invalid.value = true;
+    return;
+  }
+  invalid.value = false;
+  model.value = parsed;
+}
+</script>

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

@@ -0,0 +1,10 @@
+type __VLS_ModelProps = {
+    modelValue: unknown;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: unknown) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: unknown) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,16 @@
+import type { MediaType } from '#nuxt-cms';
+type __VLS_Props = {
+    mediaType?: MediaType;
+    accept?: string[];
+};
+type __VLS_ModelProps = {
+    modelValue: string | null;
+};
+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 | null) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | null) => 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

@@ -0,0 +1,81 @@
+<template>
+   <div v-if="model" class="cms-card overflow-hidden">
+      <img
+         v-if="kind === 'image' && url"
+         :src="url"
+         alt=""
+         class="bg-(--cms-field) max-h-56 w-full object-cover"
+      />
+      <video
+         v-else-if="kind === 'video' && url"
+         :src="url"
+         controls
+         preload="metadata"
+         playsinline
+         class="bg-(--cms-field) max-h-56 w-full"
+      />
+      <div class="flex items-center gap-2.5 px-4 py-3">
+         <UIcon :name="icon" class="text-(--ui-text-dimmed) size-4 shrink-0" />
+         <span class="min-w-0 flex-1 truncate text-[13px] font-medium" :title="model">{{
+            mediaFilename(model)
+         }}</span>
+         <UButton
+            icon="i-lucide-images"
+            variant="ghost"
+            color="neutral"
+            size="xs"
+            class="rounded-full"
+            :aria-label="t('cms.form.mediaChange')"
+            @click="openGallery"
+         />
+         <UButton
+            icon="i-lucide-x"
+            variant="ghost"
+            color="neutral"
+            size="xs"
+            class="rounded-full"
+            :aria-label="t('cms.form.mediaRemove')"
+            @click="clear"
+         />
+      </div>
+   </div>
+
+   <button v-else type="button" class="cms-dropzone is-dense" @click="openGallery">
+      <UIcon name="i-lucide-images" class="size-5 shrink-0" />
+      <span class="text-[13px] font-medium">{{ t("cms.form.mediaChoose") }}</span>
+   </button>
+
+   <UModal v-model:open="galleryOpen" :title="t('cms.media.title')" :ui="CMS_MODAL_UI">
+      <template #body>
+         <CmsMediaGallery selectable :media-type="mediaType" :accept="accept" @select="onSelect" />
+      </template>
+   </UModal>
+</template>
+
+<script setup>
+import { computed, ref, useI18n } 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 }
+});
+const model = defineModel({ type: [String, null], ...{ required: true } });
+const { t } = useI18n();
+const { mediaBaseUrl } = useCmsRuntime();
+const galleryOpen = ref(false);
+function onSelect(item) {
+  model.value = item.key;
+  galleryOpen.value = false;
+}
+function openGallery() {
+  galleryOpen.value = true;
+}
+function clear() {
+  model.value = null;
+}
+const url = computed(() => model.value ? mediaPublicUrl(mediaBaseUrl, model.value) : null);
+const kind = computed(() => model.value ? mediaTypeForKey(model.value) : "file");
+const icon = computed(() => mediaIconFor(kind.value));
+</script>

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

@@ -0,0 +1,16 @@
+import type { MediaType } from '#nuxt-cms';
+type __VLS_Props = {
+    mediaType?: MediaType;
+    accept?: string[];
+};
+type __VLS_ModelProps = {
+    modelValue: string | null;
+};
+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 | null) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | null) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,19 @@
+import type { MediaType } from '#nuxt-cms';
+type __VLS_Props = {
+    selectable?: boolean;
+    mediaType?: MediaType;
+    accept?: string[];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: (item: {
+        key: string;
+        url: string | null;
+    }) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSelect?: ((item: {
+        key: string;
+        url: string | null;
+    }) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;