@hywax/cms 3.6.1 → 3.7.0

package/.nuxt/cms/config.ts

@@ -1,6 +1,3 @@
-interface CmsConfig {
-}
-
 const cmsConfig = {
   "name": "cms",
   "formats": {

package/.nuxt/cms/prose/index.ts

@@ -1 +1,2 @@
-export { default as uploraImage } from './uplora-image'
+export { default as uploraImage } from './uplora-image'
+export { default as uploraImageGallery } from './uplora-image-gallery'

package/.nuxt/cms/prose/uplora-image-gallery.ts

@@ -0,0 +1,15 @@
+export default {
+  "slots": {
+    "base": "grid gap-4"
+  },
+  "variants": {
+    "columns": {
+      "two-columns": {
+        "base": "grid-cols-2"
+      },
+      "three-columns": {
+        "base": "grid-cols-3"
+      }
+    }
+  }
+}

package/.nuxt/cms/uplora-image.ts

@@ -2,7 +2,18 @@ export default {
   "slots": {
     "root": "relative grid grid-cols-[100%] grid-rows-[100%] overflow-hidden",
     "lqip": "bg-cover bg-no-repeat bg-center col-[1] row-[1]",
-    "picture": "aspect-3/2 col-[1] row-[1]",
+    "picture": "col-[1] row-[1]",
     "img": "w-full h-full block object-cover"
+  },
+  "variants": {
+    "aspect": {
+      "horizontal": {
+        "picture": "aspect-3/2"
+      },
+      "vertical": {
+        "picture": "aspect-2/3"
+      },
+      "dynamic": {}
+    }
   }
 }

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "@hywax/cms",
-  "version": "3.6.1",
+  "version": "3.7.0",
   "configKey": "cms",
   "builder": {
     "@nuxt/module-builder": "1.0.2",

package/dist/module.mjs

@@ -7,7 +7,7 @@ import { pascalCase, kebabCase, camelCase } from 'scule';
 import { globSync } from 'tinyglobby';
 
 const name = "@hywax/cms";
-const version = "3.6.1";
+const version = "3.7.0";
 
 function createContext(options, nuxt) {
   const { resolve } = createResolver(import.meta.url);
@@ -181,6 +181,7 @@ const icons = {
   strikethrough: "i-lucide-strikethrough",
   code: "i-lucide-code",
   image: "i-lucide-image",
+  images: "i-lucide-images",
   editLine: "i-lucide-pen-line",
   save: "i-lucide-cloud-check",
   toc: "i-lucide-text-align-start"
@@ -356,7 +357,8 @@ async function prepareMergeConfigs({ nuxt, options, resolve, detectedComponents:
   nuxt.options.mdc = defu(nuxt.options.mdc || {}, {
     components: {
       map: {
-        "uplora-image": "ProseUploraImage"
+        "uplora-image": "ProseUploraImage",
+        "uplora-image-gallery": "ProseUploraImageGallery"
       }
     }
   });
@@ -563,8 +565,19 @@ const uploraImage$1 = {
   slots: {
     root: "relative grid grid-cols-[100%] grid-rows-[100%] overflow-hidden",
     lqip: "bg-cover bg-no-repeat bg-center col-[1] row-[1]",
-    picture: "aspect-3/2 col-[1] row-[1]",
+    picture: "col-[1] row-[1]",
     img: "w-full h-full block object-cover"
+  },
+  variants: {
+    aspect: {
+      horizontal: {
+        picture: "aspect-3/2"
+      },
+      vertical: {
+        picture: "aspect-2/3"
+      },
+      dynamic: {}
+    }
   }
 };
 
@@ -601,9 +614,26 @@ const uploraImage = {
   }
 };
 
+const uploraImageGallery = {
+  slots: {
+    base: "grid gap-4"
+  },
+  variants: {
+    columns: {
+      "two-columns": {
+        base: "grid-cols-2"
+      },
+      "three-columns": {
+        base: "grid-cols-3"
+      }
+    }
+  }
+};
+
 const themeProse = {
   __proto__: null,
-  uploraImage: uploraImage
+  uploraImage: uploraImage,
+  uploraImageGallery: uploraImageGallery
 };
 
 async function getAppTemplates({ options, resolve, nuxt, detectedComponents: contextDetectedComponents }) {

package/dist/runtime/components/EditorFull.vue

@@ -16,8 +16,8 @@
     v-bind="forwardedEditor"
     class="min-h-screen"
     content-type="markdown"
-    placeholder="Введите '/' для выбора блока..."
     autofocus
+    :placeholder="{ placeholder: '\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u0442\u0435\u043A\u0441\u0442...', includeChildren: true }"
     :extensions="extensions"
     :handlers="customHandlers"
   >
@@ -64,7 +64,7 @@
       :editor="editor"
       :items="bubbleToolbarItems"
       :should-show="({ view, state }) => {
-  if (editor.isActive('uplora-image')) {
+  if (editor.isActive('uplora-image') || editor.isActive('uplora-image-gallery')) {
     return false;
   }
   const { selection } = state;
@@ -92,7 +92,12 @@ import { computed } from "vue";
 import { useEditorDragHandle } from "../composables/useEditorDragHandle";
 import { useEditorSuggestions } from "../composables/useEditorSuggestions";
 import { useEditorToolbar } from "../composables/useEditorToolbar";
+import { Caution as CautionExtension, CautionHandlers } from "../editor/caution/EditorCaution";
+import { Note as NoteExtension, NoteHandlers } from "../editor/note/EditorNote";
+import { Tip as TipExtension, TipHandlers } from "../editor/tip/EditorTip";
+import { UploraImageGallery as UploraImageGalleryExtension, UploraImageGalleryHandlers } from "../editor/uplora-image-gallery/EditorUploraImageGallery";
 import { UploraImage as UploraImageExtension, UploraImageHandlers } from "../editor/uplora-image/EditorUploraImage";
+import { Warning as WarningExtension, WarningHandlers } from "../editor/warning/EditorWarning";
 import CEditorLinkPopover from "./EditorLinkPopover.vue";
 </script>
 
@@ -143,11 +148,21 @@ const forwardedTextarea = useForwardPropsEmits(reactivePick(props, "modelValue")
 const appConfig = useAppConfig();
 const extensions = computed(() => [
   UploraImageExtension,
+  UploraImageGalleryExtension,
+  NoteExtension,
+  TipExtension,
+  WarningExtension,
+  CautionExtension,
   ...props.extensions || []
 ]);
 const customHandlers = computed(() => ({
   ...props.customHandlers || {},
-  ...UploraImageHandlers
+  ...UploraImageHandlers,
+  ...UploraImageGalleryHandlers,
+  ...NoteHandlers,
+  ...TipHandlers,
+  ...WarningHandlers,
+  ...CautionHandlers
 }));
 const appendToBody = false ? () => document.body : void 0;
 const { items: suggestionItems } = useEditorSuggestions(customHandlers);

package/dist/runtime/components/FormSeo.d.vue.ts

@@ -10,13 +10,13 @@ export interface FormSeoProps {
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: import("vue").DefineComponent<FormSeoProps & {
-    modelValue?: SEO;
+    modelValue?: SEO | null;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: SEO) => any;
+    "update:modelValue": (value: SEO | null | undefined) => any;
 }, string, import("vue").PublicProps, Readonly<FormSeoProps & {
-    modelValue?: SEO;
+    modelValue?: SEO | null;
 }> & Readonly<{
-    "onUpdate:modelValue"?: ((value: SEO) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: SEO | null | undefined) => any) | undefined;
 }>, {
     name: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/FormSeo.vue

@@ -9,10 +9,15 @@
     <UFormField
       name="title"
       label="Заголовок"
-      :hint="`${model.title.length}/60`"
+      :hint="`${state.title.length}/60`"
       :ui="{ hint: 'text-xs' }"
     >
-      <UInput v-model="model.title" placeholder="Введите заголовок..." class="w-full" />
+      <UInput
+        :model-value="state.title"
+        placeholder="Введите заголовок..."
+        class="w-full"
+        @update:model-value="state = { ...state, title: $event }"
+      />
 
       <template #help>
         <p class="text-xs mb-2">
@@ -29,14 +34,15 @@
     <UFormField
       name="description"
       label="Описание"
-      :hint="`${model.description.length}/160`"
+      :hint="`${state.description.length}/160`"
       :ui="{ hint: 'text-xs' }"
     >
       <UTextarea
-        v-model="model.description"
+        :model-value="state.description"
         placeholder="Введите описание..."
         class="w-full"
         autoresize
+        @update:model-value="state = { ...state, description: $event }"
       />
 
       <template #help>
@@ -68,17 +74,23 @@ const props = defineProps({
   name: { type: String, required: false, default: "seo" },
   ui: { type: null, required: false }
 });
-const model = defineModel({ type: Object, ...{
-  default: () => ({
-    title: "",
-    description: ""
-  })
-} });
+const model = defineModel({ type: [Object, null] });
+const state = computed({
+  get: () => {
+    return model.value ?? {
+      title: "",
+      description: ""
+    };
+  },
+  set: (value) => {
+    model.value = value;
+  }
+});
 const appConfig = useAppConfig();
 const schema = z.object({
-  title: z.string().min(1),
-  description: z.string().min(1)
+  title: z.string(),
+  description: z.string()
 });
-const { title, description } = useSeoStats(model);
+const { title, description } = useSeoStats(() => state.value);
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.cms?.formSeo || {} })());
 </script>

package/dist/runtime/components/FormSeo.vue.d.ts

@@ -10,13 +10,13 @@ export interface FormSeoProps {
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: import("vue").DefineComponent<FormSeoProps & {
-    modelValue?: SEO;
+    modelValue?: SEO | null;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: SEO) => any;
+    "update:modelValue": (value: SEO | null | undefined) => any;
 }, string, import("vue").PublicProps, Readonly<FormSeoProps & {
-    modelValue?: SEO;
+    modelValue?: SEO | null;
 }> & Readonly<{
-    "onUpdate:modelValue"?: ((value: SEO) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: SEO | null | undefined) => any) | undefined;
 }>, {
     name: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/FormUploraImage.d.vue.ts

@@ -1,16 +1,13 @@
 import type { AppConfig } from '@nuxt/schema';
 import type { ComponentConfig } from '../types';
+import type { UploraImageProps } from './UploraImage.vue';
 import theme from '#build/cms/form-uplora-image';
 type FormUploraImage = ComponentConfig<typeof theme, AppConfig, 'formUploraImage'>;
-export interface FormUploraImageModelValue {
+export interface FormUploraImageModelValue extends Pick<UploraImageProps, 'alt' | 'lqip' | 'color' | 'aspect' | 'width' | 'height'> {
     image?: string;
-    alt?: string;
-    color?: string;
-    lqip?: string;
 }
 export interface FormUploraImageProps {
     showExtensions?: boolean;
-    id?: string;
     name?: string;
     label?: string;
     disabled?: boolean;
@@ -26,18 +23,19 @@ export interface FormUploraImageEmits {
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: import("vue").DefineComponent<FormUploraImageProps & {
-    modelValue?: FormUploraImageModelValue;
+    modelValue?: FormUploraImageModelValue | null;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     delete: () => any;
-    "update:modelValue": (value: FormUploraImageModelValue) => any;
+    "update:modelValue": (value: FormUploraImageModelValue | null | undefined) => any;
     upload: (args_0: FormUploraImageModelValue) => any;
 }, string, import("vue").PublicProps, Readonly<FormUploraImageProps & {
-    modelValue?: FormUploraImageModelValue;
+    modelValue?: FormUploraImageModelValue | null;
 }> & Readonly<{
     onDelete?: (() => any) | undefined;
-    "onUpdate:modelValue"?: ((value: FormUploraImageModelValue) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: FormUploraImageModelValue | null | undefined) => any) | undefined;
     onUpload?: ((args_0: FormUploraImageModelValue) => any) | undefined;
 }>, {
+    name: string;
     showExtensions: boolean;
     nested: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/FormUploraImage.vue

@@ -8,17 +8,34 @@
   >
     <UFormField name="image" :label="label">
       <div :class="ui.base({ class: [props.ui?.base] })">
-        <template v-if="modelValue.image">
-          <UPopover :content="{ align: 'center', side: 'top', sideOffset: 8 }" :ui="{ content: 'p-1' }">
+        <template v-if="state.image">
+          <UPopover
+            :content="{ align: 'center', side: 'top', sideOffset: 8 }"
+            :ui="{ content: 'p-1' }"
+            mode="click"
+          >
             <CUploraImage
-              :image="modelValue.image"
-              :alt="modelValue.alt"
-              :color="modelValue.color"
-              :lqip="modelValue.lqip"
+              :image="state.image"
+              :alt="state.alt"
+              :color="state.color"
+              :lqip="state.lqip"
+              :aspect="state.aspect"
+              :width="state.width"
+              :height="state.height"
             />
 
             <template #content>
               <div class="flex items-center gap-0.5">
+                <USelect
+                  variant="ghost"
+                  color="neutral"
+                  size="sm"
+                  :items="aspectItems"
+                  :model-value="state.aspect"
+                  default-value="horizontal"
+                  @update:model-value="state = { ...state, aspect: $event === 'horizontal' ? void 0 : $event }"
+                />
+
                 <UButton
                   color="neutral"
                   size="sm"
@@ -33,13 +50,13 @@
                   variant="ghost"
                   label=""
                   :icon="appConfig.ui.icons.trash"
-                  @confirm="deleteExecute(modelValue.image)"
+                  @confirm="deleteExecute(state.image)"
                 />
               </div>
             </template>
           </UPopover>
         </template>
-        <div v-else :id="id" :class="ui.uploader({ class: [props.ui?.uploader] })">
+        <div v-else :class="ui.uploader({ class: [props.ui?.uploader] })">
           <template v-if="uploadStatus === 'pending'">
             <UIcon :name="appConfig.ui.icons.loading" :class="ui.uploaderPendingIcon({ class: [props.ui?.uploaderPendingIcon] })" />
           </template>
@@ -48,7 +65,6 @@
               type="button"
               :class="ui.uploaderIdleButton({ class: [props.ui?.uploaderIdleButton] })"
               :disabled="disabled"
-              v-bind="ariaAttrs"
               @click="open"
             >
               <UAvatar :icon="appConfig.ui.icons.image" size="lg" />
@@ -85,12 +101,12 @@
     </UFormField>
     <UFormField name="alt">
       <UInput
-        v-model="modelValue.alt"
         placeholder="Введите описание..."
         variant="none"
         size="xs"
+        :model-value="state.alt"
         :ui="{ base: 'text-center text-toned' }"
-        @update:model-value="onAltInput"
+        @update:model-value="state = { ...state, alt: $event || void 0 }"
       />
     </UFormField>
   </UForm>
@@ -98,9 +114,9 @@
 
 <script>
 import theme from "#build/cms/form-uplora-image";
-import { useAppConfig, useFormField, useUploraDelete, useUploraUpload } from "#imports";
+import { useAppConfig, useUploraDelete, useUploraUpload } from "#imports";
 import { imagesExtensions } from "@uplora/formats";
-import { computed, useId } from "vue";
+import { computed } from "vue";
 import { z } from "zod";
 import { tv } from "../tv";
 import CButtonDeleteConfirm from "./ButtonDeleteConfirm.vue";
@@ -109,8 +125,7 @@ import CButtonDeleteConfirm from "./ButtonDeleteConfirm.vue";
 <script setup>
 const props = defineProps({
   showExtensions: { type: Boolean, required: false, default: true },
-  id: { type: String, required: false },
-  name: { type: String, required: false },
+  name: { type: String, required: false, default: "image" },
   label: { type: String, required: false },
   disabled: { type: Boolean, required: false },
   as: { type: null, required: false },
@@ -119,63 +134,72 @@ const props = defineProps({
   ui: { type: null, required: false }
 });
 const emit = defineEmits(["upload", "delete"]);
-const modelValue = defineModel({ type: Object, ...{
-  default: () => ({
-    image: void 0,
-    alt: void 0,
-    lqip: void 0,
-    color: void 0
-  })
-} });
+const model = defineModel({ type: [Object, null] });
+const state = computed({
+  get: () => {
+    return model.value ?? {
+      image: void 0,
+      width: void 0,
+      height: void 0,
+      alt: void 0,
+      lqip: void 0,
+      color: void 0,
+      aspect: void 0
+    };
+  },
+  set: (value) => {
+    model.value = value;
+  }
+});
 const appConfig = useAppConfig();
 const schema = z.object({
   image: z.string().min(1),
   alt: z.string().min(1),
+  width: z.number(),
+  height: z.number(),
   lqip: z.string().min(1).optional(),
-  color: z.string().min(1).optional()
+  color: z.string().min(1).optional(),
+  aspect: z.union([z.literal("horizontal"), z.literal("vertical"), z.literal("dynamic")]).optional()
 });
 const extensions = computed(() => imagesExtensions.filter((extension) => extension !== "jpeg").join(", "));
-const { id: _id, disabled, emitFormChange, emitFormInput, ariaAttrs } = useFormField(props);
-const id = _id.value ?? useId();
+const aspectItems = [
+  { value: "horizontal", label: "\u0413\u043E\u0440\u0438\u0437\u043E\u043D\u0442\u0430\u043B\u044C\u043D\u044B\u0439" },
+  { value: "vertical", label: "\u0412\u0435\u0440\u0442\u0438\u043A\u0430\u043B\u044C\u043D\u044B\u0439" },
+  { value: "dynamic", label: "\u0414\u0438\u043D\u0430\u043C\u0438\u0447\u0435\u0441\u043A\u0438\u0439" }
+];
 const { open, execute: uploadExecute, status: uploadStatus, reset: resetUpload, onUploaded } = useUploraUpload({
   accept: "image/*"
 });
 const { execute: deleteExecute, onDeleted } = useUploraDelete();
-function onAltInput(alt) {
-  modelValue.value = {
-    ...modelValue.value,
-    alt: alt || void 0
-  };
-  emitFormChange();
-  emitFormInput();
-}
 function resetState() {
-  modelValue.value = {
+  resetUpload();
+  state.value = {
     image: void 0,
+    width: void 0,
+    height: void 0,
     alt: void 0,
     lqip: void 0,
-    color: void 0
+    color: void 0,
+    aspect: void 0
   };
-  emitFormChange();
-  emitFormInput();
 }
 onUploaded((file) => {
-  modelValue.value = {
-    ...modelValue.value,
+  state.value = {
     image: file.id,
+    width: file.width,
+    height: file.height,
+    alt: void 0,
     lqip: file.lqip,
-    color: file.color
+    color: file.color,
+    aspect: void 0
   };
-  emit("upload", modelValue.value);
-  emitFormChange();
-  emitFormInput();
+  emit("upload", state.value);
 });
 onDeleted(() => {
-  resetUpload();
   resetState();
   emit("delete");
 });
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.cms?.formUploraImage || {} })({
-  disabled: disabled.value
+  disabled: props.disabled
 }));
 </script>

package/dist/runtime/components/FormUploraImage.vue.d.ts

@@ -1,16 +1,13 @@
 import type { AppConfig } from '@nuxt/schema';
 import type { ComponentConfig } from '../types';
+import type { UploraImageProps } from './UploraImage.vue';
 import theme from '#build/cms/form-uplora-image';
 type FormUploraImage = ComponentConfig<typeof theme, AppConfig, 'formUploraImage'>;
-export interface FormUploraImageModelValue {
+export interface FormUploraImageModelValue extends Pick<UploraImageProps, 'alt' | 'lqip' | 'color' | 'aspect' | 'width' | 'height'> {
     image?: string;
-    alt?: string;
-    color?: string;
-    lqip?: string;
 }
 export interface FormUploraImageProps {
     showExtensions?: boolean;
-    id?: string;
     name?: string;
     label?: string;
     disabled?: boolean;
@@ -26,18 +23,19 @@ export interface FormUploraImageEmits {
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: import("vue").DefineComponent<FormUploraImageProps & {
-    modelValue?: FormUploraImageModelValue;
+    modelValue?: FormUploraImageModelValue | null;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     delete: () => any;
-    "update:modelValue": (value: FormUploraImageModelValue) => any;
+    "update:modelValue": (value: FormUploraImageModelValue | null | undefined) => any;
     upload: (args_0: FormUploraImageModelValue) => any;
 }, string, import("vue").PublicProps, Readonly<FormUploraImageProps & {
-    modelValue?: FormUploraImageModelValue;
+    modelValue?: FormUploraImageModelValue | null;
 }> & Readonly<{
     onDelete?: (() => any) | undefined;
-    "onUpdate:modelValue"?: ((value: FormUploraImageModelValue) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: FormUploraImageModelValue | null | undefined) => any) | undefined;
     onUpload?: ((args_0: FormUploraImageModelValue) => any) | undefined;
 }>, {
+    name: string;
     showExtensions: boolean;
     nested: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/UploraImage.d.vue.ts

@@ -11,6 +11,9 @@ export interface UploraImageProps {
     sizes?: ImageSize[];
     lqip?: string;
     color?: string;
+    aspect?: 'horizontal' | 'vertical' | 'dynamic';
+    width?: number | string;
+    height?: number | string;
     loading?: 'lazy' | 'eager';
     preload?: boolean | {
         fetchPriority: 'auto' | 'high' | 'low';
@@ -34,4 +37,5 @@ declare const __VLS_export: import("vue").DefineComponent<UploraImageProps, {},
     onLoad?: ((args_0: Event) => any) | undefined;
 }>, {
     loading: "lazy" | "eager";
+    aspect: "horizontal" | "vertical" | "dynamic";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/UploraImage.vue

@@ -8,7 +8,7 @@
   backgroundImage: lqip ? `url(${lqip})` : void 0
 }"
     />
-    <picture :class="ui.picture({ class: props.ui?.picture })">
+    <picture :class="ui.picture({ class: props.ui?.picture })" :style="{ aspectRatio }">
       <template v-if="sources.length">
         <source
           v-for="(source, key) in sources"
@@ -47,6 +47,9 @@ const props = defineProps({
   sizes: { type: Array, required: false },
   lqip: { type: String, required: false },
   color: { type: String, required: false },
+  aspect: { type: String, required: false, default: "horizontal" },
+  width: { type: [Number, String], required: false },
+  height: { type: [Number, String], required: false },
   loading: { type: String, required: false, default: "lazy" },
   preload: { type: [Boolean, Object], required: false },
   nonce: { type: String, required: false },
@@ -90,6 +93,12 @@ const imageAttrs = computed(() => ({
   ...props.imgAttrs || {},
   ...import.meta.server ? { onerror: "this.setAttribute('data-error', 1)" } : {}
 }));
+const aspectRatio = computed(() => {
+  if (props.aspect === "dynamic" && props.width && props.height) {
+    return Number.parseInt(props.width) / Number(props.height);
+  }
+  return void 0;
+});
 onMounted(() => {
   if (!imageRef.value) {
     return;
@@ -108,5 +117,7 @@ onMounted(() => {
     emit("error", event);
   };
 });
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.cms?.uploraImage || {} })());
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.cms?.uploraImage || {} })({
+  aspect: props.aspect
+}));
 </script>

package/dist/runtime/components/UploraImage.vue.d.ts

@@ -11,6 +11,9 @@ export interface UploraImageProps {
     sizes?: ImageSize[];
     lqip?: string;
     color?: string;
+    aspect?: 'horizontal' | 'vertical' | 'dynamic';
+    width?: number | string;
+    height?: number | string;
     loading?: 'lazy' | 'eager';
     preload?: boolean | {
         fetchPriority: 'auto' | 'high' | 'low';
@@ -34,4 +37,5 @@ declare const __VLS_export: import("vue").DefineComponent<UploraImageProps, {},
     onLoad?: ((args_0: Event) => any) | undefined;
 }>, {
     loading: "lazy" | "eager";
+    aspect: "horizontal" | "vertical" | "dynamic";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;