@nexdom/uimed-vue 2.0.0-beta.6 → 2.0.0-beta.60

package/dist/components/form/form.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,37 @@
+import { createBlock, defineComponent, openBlock, renderSlot, unref, withCtx, withModifiers } from "vue";
+import { VForm } from "vuetify/components";
+var form_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	inheritAttrs: false,
+	__name: "form",
+	props: {
+		id: {
+			type: String,
+			required: false
+		},
+		dataTestid: {
+			type: String,
+			required: false
+		}
+	},
+	emits: ["submit"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		async function onSubmit(event) {
+			const { valid } = await event;
+			if (valid) emit("submit", event);
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(VForm), {
+				id: props.id,
+				"data-testid": props.dataTestid,
+				onSubmit: withModifiers(onSubmit, ["prevent"])
+			}, {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 8, ["id", "data-testid"]);
+		};
+	}
+});
+//#endregion
+export { form_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/form/types.d.ts

@@ -0,0 +1,15 @@
+//#region src/components/form/types.d.ts
+/**
+ * Props exposed by the {@link Form} component.
+ */
+export type FormProps = {
+  /**
+   * Id to set on `form` native element.
+   */
+  id?: string;
+  /**
+   * Component id to use on automated tests.
+   */
+  dataTestid?: string;
+};
+//#endregion

package/dist/components/grid/column/column.js

@@ -0,0 +1,5 @@
+import column_vue_vue_type_script_setup_true_lang_default from "./column.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/grid/column/column.vue
+var column_default = column_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { column_default as default };

package/dist/components/grid/column/column.vue.d.ts

@@ -0,0 +1,33 @@
+import { ColumnProps } from "./types.js";
+//#region src/components/grid/column/column.vue.d.ts
+/**
+ * Column component to be placed within a row.
+ *
+ * @example
+ * ```vue
+ * <template>
+ *   <u-container>
+ *     <u-row>
+ *       <u-column>
+ *         <!-- uimed-components -->
+ *       </u-column>
+ *     </u-row>
+ *  </u-container>
+ * </template>
+ * ```
+ *
+ * @see {@link https://nexdom-healthtech.github.io/uimed-vue/guide/components/layout | Column Guide}
+ */
+declare const _default: typeof __VLS_export;
+declare const __VLS_export: __VLS_WithSlots<import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<ColumnProps, {}, {}, {}, {}, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, {}, string, import("vue", { with: { "resolution-mode": "import" } }).PublicProps, Readonly<ColumnProps> & Readonly<{}>, {
+  cols: "12" | "auto" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11";
+}, {}, {}, {}, string, import("vue", { with: { "resolution-mode": "import" } }).ComponentProvideOptions, false, {}, any>, {
+  default?: (props: {}) => any;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+  new (): {
+    $slots: S;
+  };
+};
+//#endregion
+export { _default as default };

package/dist/components/grid/column/column.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,45 @@
+import { computed, createBlock, defineComponent, normalizeClass, openBlock, renderSlot, unref, withCtx } from "vue";
+import { VCol } from "vuetify/components";
+var column_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	inheritAttrs: false,
+	__name: "column",
+	props: {
+		cols: {
+			type: String,
+			required: false,
+			default: "12"
+		},
+		listItem: {
+			type: Boolean,
+			required: false
+		},
+		dataTestid: {
+			type: String,
+			required: false
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const tag = computed(() => props.listItem ? "li" : void 0);
+		const listItemClasses = computed(() => props.listItem ? "d-block" : void 0);
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(VCol), {
+				cols: "12",
+				sm: props.cols,
+				tag: tag.value,
+				class: normalizeClass(listItemClasses.value),
+				"data-testid": props.dataTestid
+			}, {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 8, [
+				"sm",
+				"tag",
+				"class",
+				"data-testid"
+			]);
+		};
+	}
+});
+//#endregion
+export { column_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/grid/column/types.d.ts

@@ -0,0 +1,27 @@
+//#region src/components/grid/column/types.d.ts
+/**
+ * Props exposed by the {@link Col} component.
+ */
+export type ColumnProps = {
+  /**
+   * Number of columns to stretch the component.
+   * Available options are:
+   * - `"auto"`: which won't try to stretch the component
+   * - `"1"` to `"12"`.
+   * @default "12"
+   */
+  cols?: Cols;
+  /**
+   * Renders the column as an item of a list (`<li>`), without its bullet.
+   * Use it on every column of a `URow` with `list`, whose records are,
+   * semantically, the items of a list.
+   * @default false
+   */
+  listItem?: boolean;
+  /**
+   * Component id to use on automated tests.
+   */
+  dataTestid?: string;
+};
+type Cols = "auto" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12";
+//#endregion

package/dist/components/grid/container/container.js

@@ -0,0 +1,5 @@
+import container_vue_vue_type_script_setup_true_lang_default from "./container.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/grid/container/container.vue
+var container_default = container_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { container_default as default };

package/dist/components/grid/container/container.vue.d.ts

@@ -0,0 +1,27 @@
+import { ContainerProps } from "./types.js";
+//#region src/components/grid/container/container.vue.d.ts
+/**
+ * Container component to be placed at the top of the component tree.
+ *
+ * @example
+ * ```vue
+ * <template>
+ *  <u-container>
+ *     <!-- uimed-components -->
+ *  </u-container>
+ * <template>
+ * ```
+ *
+ * @see {@link https://nexdom-healthtech.github.io/uimed-vue/guide/components/layout | Container Guide}
+ */
+declare const _default: typeof __VLS_export;
+declare const __VLS_export: __VLS_WithSlots<import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<ContainerProps, {}, {}, {}, {}, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, {}, string, import("vue", { with: { "resolution-mode": "import" } }).PublicProps, Readonly<ContainerProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue", { with: { "resolution-mode": "import" } }).ComponentProvideOptions, false, {}, any>, {
+  default?: (props: {}) => any;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+  new (): {
+    $slots: S;
+  };
+};
+//#endregion
+export { _default as default };

package/dist/components/grid/container/container.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,33 @@
+import { useFullHeight } from "../../../composables/dimensions/dimensions.js";
+import { createBlock, defineComponent, normalizeClass, openBlock, renderSlot, unref, withCtx } from "vue";
+import { VContainer } from "vuetify/components";
+var container_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	inheritAttrs: false,
+	__name: "container",
+	props: {
+		fullHeight: {
+			type: Boolean,
+			required: false
+		},
+		dataTestid: {
+			type: String,
+			required: false
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const heightClass = useFullHeight(() => props.fullHeight);
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(VContainer), {
+				class: normalizeClass(unref(heightClass)),
+				"data-testid": props.dataTestid,
+				fluid: ""
+			}, {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 8, ["class", "data-testid"]);
+		};
+	}
+});
+//#endregion
+export { container_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/grid/container/types.d.ts

@@ -0,0 +1,17 @@
+//#region src/components/grid/container/types.d.ts
+/**
+ * Props exposed by the {@link Container} component.
+ */
+export type ContainerProps = {
+  /**
+   * Stretches the container to the whole height of its parent, which must have a height of its
+   * own, e.g. the content area of `UMain`.
+   * @default false
+   */
+  fullHeight?: boolean;
+  /**
+   * Component id to use on automated tests.
+   */
+  dataTestid?: string;
+};
+//#endregion

package/dist/components/grid/row/row.js

@@ -0,0 +1,5 @@
+import row_vue_vue_type_script_setup_true_lang_default from "./row.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/grid/row/row.vue
+var row_default = row_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { row_default as default };

package/dist/components/grid/row/row.vue.d.ts

@@ -0,0 +1,29 @@
+import { RowProps } from "./types.js";
+//#region src/components/grid/row/row.vue.d.ts
+/**
+ * Row component to be placed within a container.
+ *
+ * @example
+ * ```vue
+ * <template>
+ *   <u-container>
+ *     <u-row align-x="center" align-y="center">
+ *       <!-- uimed-column -->
+ *     </u-row>
+ *   </u-container>
+ * </template>
+ * ```
+ *
+ * @see {@link https://nexdom-healthtech.github.io/uimed-vue/guide/components/layout | Row Guide}
+ */
+declare const _default: typeof __VLS_export;
+declare const __VLS_export: __VLS_WithSlots<import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<RowProps, {}, {}, {}, {}, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, {}, string, import("vue", { with: { "resolution-mode": "import" } }).PublicProps, Readonly<RowProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue", { with: { "resolution-mode": "import" } }).ComponentProvideOptions, false, {}, any>, {
+  default?: (props: {}) => any;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+  new (): {
+    $slots: S;
+  };
+};
+//#endregion
+export { _default as default };

package/dist/components/grid/row/row.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,61 @@
+import { useFullHeight } from "../../../composables/dimensions/dimensions.js";
+import { useAlignX, useAlignY } from "../../../composables/alignment/alignment.js";
+import { computed, createBlock, defineComponent, normalizeClass, openBlock, renderSlot, unref, withCtx } from "vue";
+import { VRow } from "vuetify/components";
+var row_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	inheritAttrs: false,
+	__name: "row",
+	props: {
+		alignX: {
+			type: String,
+			required: false
+		},
+		alignY: {
+			type: String,
+			required: false
+		},
+		fullHeight: {
+			type: Boolean,
+			required: false
+		},
+		list: {
+			type: Boolean,
+			required: false
+		},
+		dataTestid: {
+			type: String,
+			required: false
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const alignXClass = useAlignX(() => props.alignX);
+		const alignYClasses = useAlignY(() => props.alignY);
+		const heightClass = useFullHeight(() => props.fullHeight);
+		const alignContentClass = computed(() => props.fullHeight ? alignYClasses.value.content : void 0);
+		const tag = computed(() => props.list ? "ul" : void 0);
+		const listClasses = computed(() => props.list ? "pa-0 ma-0" : void 0);
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(VRow), {
+				tag: tag.value,
+				class: normalizeClass([
+					unref(alignXClass),
+					unref(alignYClasses).items,
+					unref(heightClass),
+					alignContentClass.value,
+					listClasses.value
+				]),
+				"data-testid": props.dataTestid
+			}, {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 8, [
+				"tag",
+				"class",
+				"data-testid"
+			]);
+		};
+	}
+});
+//#endregion
+export { row_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/grid/row/types.d.ts

@@ -0,0 +1,63 @@
+import { AlignX, AlignY } from "../../../composables/alignment/types.js";
+//#region src/components/grid/row/types.d.ts
+/**
+ * Props exposed by the {@link Row} component.
+ */
+export type RowProps = {
+  /**
+   * Horizontal alignment of the row's columns on each line.
+   * Available options are:
+   * - `"start"`: aligns the columns to the start of the line;
+   * - `"center"`: centers the columns horizontally;
+   * - `"end"`: aligns the columns to the end of the line.
+   *
+   * `"start"` and `"end"` follow the text direction. It only has a visible effect when the
+   * columns of a line don't fill it, e.g. with `cols="auto"` or sizes adding up to less than 12.
+   * When the columns wrap into several lines, each line is aligned on its own.
+   *
+   * Columns sit side by side only from the `sm` breakpoint up. Below it, each column takes a
+   * whole line, so the alignment has no visible effect.
+   * @default "start"
+   */
+  alignX?: AlignX;
+  /**
+   * Vertical alignment of the row's columns, relative to the tallest column on the same line.
+   * Available options are:
+   * - `"start"`: aligns the columns to the top;
+   * - `"center"`: centers the columns vertically;
+   * - `"end"`: aligns the columns to the bottom;
+   * - `"stretch"`: stretches every column to the height of the tallest one.
+   *
+   * Use `"stretch"` to keep side by side columns at the same height, e.g. cards made of
+   * `USection`s with `fullHeight`.
+   *
+   * Columns sit side by side only from the `sm` breakpoint up. Below it, each column takes a
+   * whole line, so the alignment has no visible effect, unless the row has `fullHeight`: then
+   * the columns, as a group, are aligned within the row's height.
+   * @default "start"
+   */
+  alignY?: AlignY;
+  /**
+   * Stretches the row to the whole height of its parent: the visible content area of `UMain`
+   * (below its app bar) or a `UContainer` with `fullHeight`.
+   *
+   * Combine it with `alignY` to place the columns within that height, e.g. `alignY="center"`
+   * and `alignX="center"` to center a login form on the screen. A row with `fullHeight` takes
+   * the whole height by itself, so other rows next to it are pushed below the visible area.
+   * @default false
+   */
+  fullHeight?: boolean;
+  /**
+   * Renders the row as a list (`<ul>`), without the list's default indentation
+   * and bullets, so assistive technologies announce its columns as the items
+   * of a list. Use it for a grid of records that is, semantically, a list,
+   * like cards of patients, and set `listItem` on each of its `UColumn`s.
+   * @default false
+   */
+  list?: boolean;
+  /**
+   * Component id to use on automated tests.
+   */
+  dataTestid?: string;
+};
+//#endregion

package/dist/components/icon-button/icon-button.js

@@ -0,0 +1,5 @@
+import icon_button_vue_vue_type_script_setup_true_lang_default from "./icon-button.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/icon-button/icon-button.vue
+var icon_button_default = icon_button_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { icon_button_default as default };

package/dist/components/icon-button/icon-button.vue.d.ts

@@ -0,0 +1,23 @@
+import { IconButtonProps } from "./types.js";
+//#region src/components/icon-button/icon-button.vue.d.ts
+/**
+ * Button that shows only an icon, for actions whose icon is enough to identify them, such as
+ * editing a record of a list. Its `label` is the name assistive technologies read.
+ *
+ * @example
+ * ```vue
+ * <template>
+ *   <u-icon-button icon="cog" label="Configurações" @click="onClick" />
+ * </template>
+ * ```
+ *
+ * @see {@link https://nexdom-healthtech.github.io/uimed-vue/guide/components/icon-button | IconButton Guide}
+ */
+declare const _default: typeof __VLS_export;
+declare const __VLS_export: import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<IconButtonProps, {}, {}, {}, {}, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, {} & {
+  click: (event: MouseEvent) => any;
+}, string, import("vue", { with: { "resolution-mode": "import" } }).PublicProps, Readonly<IconButtonProps> & Readonly<{
+  onClick?: ((event: MouseEvent) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue", { with: { "resolution-mode": "import" } }).ComponentProvideOptions, false, {}, any>;
+//#endregion
+export { _default as default };

package/dist/components/icon-button/icon-button.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,51 @@
+import { icons } from "../../consts/icons.js";
+import useVuetifyColor from "../../composables/colors/use-vuetify-color.js";
+import { createBlock, defineComponent, openBlock, unref } from "vue";
+import { VIconBtn } from "vuetify/components";
+var icon_button_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	inheritAttrs: false,
+	__name: "icon-button",
+	props: {
+		icon: {
+			type: null,
+			required: true
+		},
+		label: {
+			type: String,
+			required: true
+		},
+		color: {
+			type: String,
+			required: false
+		},
+		dataTestid: {
+			type: String,
+			required: false
+		}
+	},
+	emits: ["click"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const color = useVuetifyColor(() => props.color);
+		function onClick(event) {
+			emit("click", event);
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(VIconBtn), {
+				icon: unref(icons)[props.icon],
+				"aria-label": props.label,
+				color: unref(color),
+				"data-testid": props.dataTestid,
+				onClick
+			}, null, 8, [
+				"icon",
+				"aria-label",
+				"color",
+				"data-testid"
+			]);
+		};
+	}
+});
+//#endregion
+export { icon_button_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/icon-button/types.d.ts

@@ -0,0 +1,32 @@
+import { Icon } from "../../consts/types.js";
+import { ColorVariant } from "../../composables/colors/types.js";
+//#region src/components/icon-button/types.d.ts
+/**
+ * Props exposed by the {@link IconButton} component.
+ */
+export type IconButtonProps = {
+  /**
+   * Icon drawn on the button. One of the names listed on the "Ícones" guide page. Assistive
+   * technologies ignore it and read `label` instead.
+   *
+   * @see {@link https://nexdom-healthtech.github.io/uimed-vue/guide/icons | Icons Guide}
+   */
+  icon: Icon;
+  /**
+   * Accessible name of the button, read by assistive technologies instead of the icon. Describe
+   * the action the button performs (e.g. "Editar paciente"), not the icon's drawing (e.g.
+   * "Lápis").
+   */
+  label: string;
+  /**
+   * Applies a color to the button.
+   * One of `primary`, `secondary`, `positive`, `informative`, `caution`, or `danger`.
+   * @default "primary"
+   */
+  color?: ColorVariant;
+  /**
+   * Component id to use on automated tests.
+   */
+  dataTestid?: string;
+};
+//#endregion

package/dist/components/img/img.js

@@ -0,0 +1,5 @@
+import img_vue_vue_type_script_setup_true_lang_default from "./img.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/img/img.vue
+var img_default = img_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { img_default as default };

package/dist/components/img/img.vue.d.ts

@@ -0,0 +1,23 @@
+import { ImgProps } from "./types.js";
+//#region src/components/img/img.vue.d.ts
+/**
+ * Decorative image, ignored by assistive technologies, loaded when it's about
+ * to become visible. Set its dimensions to reserve its space before it loads.
+ *
+ * @example
+ * ```vue
+ * <template>
+ *   <u-row>
+ *     <u-column cols="12">
+ *       <u-img src="/logo.svg" :width="380" :height="88" eager />
+ *     </u-column>
+ *   </u-row>
+ * </template>
+ * ```
+ *
+ * @see {@link https://nexdom-healthtech.github.io/uimed-vue/guide/components/img | Img Guide}
+ */
+declare const _default: typeof __VLS_export;
+declare const __VLS_export: import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<ImgProps, {}, {}, {}, {}, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, {}, string, import("vue", { with: { "resolution-mode": "import" } }).PublicProps, Readonly<ImgProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue", { with: { "resolution-mode": "import" } }).ComponentProvideOptions, false, {}, any>;
+//#endregion
+export { _default as default };

package/dist/components/img/img.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,61 @@
+import { createBlock, defineComponent, openBlock, unref } from "vue";
+import { VImg } from "vuetify/components";
+var img_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	inheritAttrs: false,
+	__name: "img",
+	props: {
+		src: {
+			type: String,
+			required: true
+		},
+		width: {
+			type: [Number, String],
+			required: false
+		},
+		height: {
+			type: [Number, String],
+			required: false
+		},
+		aspectRatio: {
+			type: Number,
+			required: false
+		},
+		cover: {
+			type: Boolean,
+			required: false
+		},
+		eager: {
+			type: Boolean,
+			required: false
+		},
+		dataTestid: {
+			type: String,
+			required: false
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(VImg), {
+				src: props.src,
+				alt: "",
+				width: props.width,
+				height: props.height,
+				"aspect-ratio": props.aspectRatio,
+				cover: props.cover,
+				eager: props.eager,
+				"data-testid": props.dataTestid
+			}, null, 8, [
+				"src",
+				"width",
+				"height",
+				"aspect-ratio",
+				"cover",
+				"eager",
+				"data-testid"
+			]);
+		};
+	}
+});
+//#endregion
+export { img_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/img/types.d.ts

@@ -0,0 +1,43 @@
+//#region src/components/img/types.d.ts
+/**
+ * Props exposed by the {@link Img} component.
+ */
+export type ImgProps = {
+  /**
+   * Path or URL of the image.
+   */
+  src: string;
+  /**
+   * Width of the image. A number sets it in pixels, and a string sets it in
+   * any CSS unit (e.g. `"100%"`). Shrinks to fit the available width when
+   * it's larger (e.g. inside a narrow `UColumn`).
+   */
+  width?: number | string;
+  /**
+   * Height of the image. A number sets it in pixels, and a string sets it in
+   * any CSS unit (e.g. `"10rem"`).
+   */
+  height?: number | string;
+  /**
+   * Proportion between width and height (e.g. `16 / 9`), used to reserve the
+   * image's space before it loads. Ignored when `height` is set.
+   */
+  aspectRatio?: number;
+  /**
+   * Fills the image's area, cropping the image when its proportion differs
+   * from the area's. By default, the whole image is shown inside the area.
+   * @default false
+   */
+  cover?: boolean;
+  /**
+   * Loads the image right away, instead of when it's about to become
+   * visible. Use it for images visible when the page opens, such as a logo.
+   * @default false
+   */
+  eager?: boolean;
+  /**
+   * Component id to use on automated tests.
+   */
+  dataTestid?: string;
+};
+//#endregion