@wikimedia/codex/dist/types/components/image/Image.vue.d.ts

Codex Design System for Wikimedia

import { PropType } from 'vue';
import { ObjectPositions, ObjectFitOptions } from '../../constants';
import { ImageAspectRatio } from '../../types';
/**
 * Displays an image with optional aspect ratio and placeholder for loading or error states.
 */
declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
    /**
     * The source URL of the image.
     */
    src: {
        type: StringConstructor;
        default: string;
    };
    /**
     * Alternative text for the image.
     *
     * Descriptive text must be provided unless the image is decorative or described elsewhere.
     */
    alt: {
        type: StringConstructor;
        required: true;
        default: string;
    };
    /**
     * The aspect ratio of the image.
     *
     * Accepts one of the predefined aspect ratios.
     */
    aspectRatio: {
        type: PropType<ImageAspectRatio>;
        validator: import("../../types").StringTypeValidator<"16:9" | "3:2" | "4:3" | "1:1" | "3:4" | "2:3">;
        default: null;
    };
    /**
     * The object-position of the image when cropping with an aspect ratio.
     *
     * Accepts 'top', 'bottom', 'left', 'right', or 'center'.
     */
    objectPosition: {
        type: PropType<(typeof ObjectPositions)[number]>;
        validator: import("../../types").StringTypeValidator<"top" | "right" | "bottom" | "left" | "center">;
        default: string;
    };
    /**
     * Specifies how the image should be resized to fit its container.
     * Accepts 'fill', 'contain', 'cover', 'none', or 'scale-down'.
     */
    objectFit: {
        type: PropType<(typeof ObjectFitOptions)[number]>;
        validator: import("../../types").StringTypeValidator<"none" | "fill" | "contain" | "cover" | "scale-down">;
        default: string;
    };
    /**
     * Image position on a page
     */
    position: {
        type: PropType<"left" | "center" | "right">;
        default: string;
    };
    /**
     * The width of the image in pixels.
     */
    width: {
        type: (StringConstructor | NumberConstructor)[];
        default: undefined;
    };
    /**
     * The height of the image in pixels.
     */
    height: {
        type: (StringConstructor | NumberConstructor)[];
        default: undefined;
    };
    /**
     * The loading priority of the image.
     *
     * Accepts 'lazy' or 'eager'.
     */
    loadingPriority: {
        type: PropType<"lazy" | "eager">;
        default: string;
    };
}>, {
    imageSrc: import("vue").Ref<string, string>;
    isBroken: import("vue").Ref<boolean, boolean>;
    isLoaded: import("vue").Ref<boolean, boolean>;
    imageClasses: import("vue").ComputedRef<Record<string, boolean>>;
    rootClasses: import("vue").ComputedRef<Record<string, boolean>>;
    rootStyle: import("vue").ComputedRef<import("vue").StyleValue>;
    otherAttrs: import("vue").ComputedRef<{
        [x: string]: unknown;
    }>;
    placeholderStyles: import("vue").ComputedRef<{
        width: string;
        height: string;
    }>;
    handleError: (event: Event) => void;
    handleLoad: () => void;
    cdxIconImage: string;
    iconSizeClass: import("vue").ComputedRef<"cdx-image__placeholder__icon--size-smallest" | "cdx-image__placeholder__icon--size-small" | "cdx-image__placeholder__icon--size-medium" | "cdx-image__placeholder__icon--size-large">;
    placeholderClasses: import("vue").ComputedRef<Record<string, boolean>>;
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "error"[], "error", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
    /**
     * The source URL of the image.
     */
    src: {
        type: StringConstructor;
        default: string;
    };
    /**
     * Alternative text for the image.
     *
     * Descriptive text must be provided unless the image is decorative or described elsewhere.
     */
    alt: {
        type: StringConstructor;
        required: true;
        default: string;
    };
    /**
     * The aspect ratio of the image.
     *
     * Accepts one of the predefined aspect ratios.
     */
    aspectRatio: {
        type: PropType<ImageAspectRatio>;
        validator: import("../../types").StringTypeValidator<"16:9" | "3:2" | "4:3" | "1:1" | "3:4" | "2:3">;
        default: null;
    };
    /**
     * The object-position of the image when cropping with an aspect ratio.
     *
     * Accepts 'top', 'bottom', 'left', 'right', or 'center'.
     */
    objectPosition: {
        type: PropType<(typeof ObjectPositions)[number]>;
        validator: import("../../types").StringTypeValidator<"top" | "right" | "bottom" | "left" | "center">;
        default: string;
    };
    /**
     * Specifies how the image should be resized to fit its container.
     * Accepts 'fill', 'contain', 'cover', 'none', or 'scale-down'.
     */
    objectFit: {
        type: PropType<(typeof ObjectFitOptions)[number]>;
        validator: import("../../types").StringTypeValidator<"none" | "fill" | "contain" | "cover" | "scale-down">;
        default: string;
    };
    /**
     * Image position on a page
     */
    position: {
        type: PropType<"left" | "center" | "right">;
        default: string;
    };
    /**
     * The width of the image in pixels.
     */
    width: {
        type: (StringConstructor | NumberConstructor)[];
        default: undefined;
    };
    /**
     * The height of the image in pixels.
     */
    height: {
        type: (StringConstructor | NumberConstructor)[];
        default: undefined;
    };
    /**
     * The loading priority of the image.
     *
     * Accepts 'lazy' or 'eager'.
     */
    loadingPriority: {
        type: PropType<"lazy" | "eager">;
        default: string;
    };
}>> & Readonly<{
    onError?: ((...args: any[]) => any) | undefined;
}>, {
    width: string | number;
    height: string | number;
    position: "right" | "left" | "center";
    aspectRatio: "16:9" | "3:2" | "4:3" | "1:1" | "3:4" | "2:3";
    objectFit: "none" | "fill" | "contain" | "cover" | "scale-down";
    objectPosition: "top" | "right" | "bottom" | "left" | "center";
    src: string;
    alt: string;
    loadingPriority: "lazy" | "eager";
}, {}, {
    CdxIcon: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
        icon: {
            type: PropType<import("@wikimedia/codex-icons").Icon>;
            required: true;
        };
        iconLabel: {
            type: StringConstructor;
            default: string;
        };
        lang: {
            type: PropType<string | null>;
            default: null;
        };
        dir: {
            type: PropType<import("../../types").HTMLDirection | null>;
            default: null;
        };
        size: {
            type: PropType<import("../../types").IconSize>;
            default: string;
            validator: import("../../types").StringTypeValidator<"medium" | "small" | "x-small">;
        };
    }>, {
        rootElement: import("vue").Ref<HTMLSpanElement | undefined, HTMLSpanElement | undefined>;
        rootClasses: import("vue").ComputedRef<{
            [x: string]: boolean;
            'cdx-icon--flipped': boolean;
        }>;
        iconSvg: import("vue").ComputedRef<string>;
        iconPath: import("vue").ComputedRef<string>;
    }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
        icon: {
            type: PropType<import("@wikimedia/codex-icons").Icon>;
            required: true;
        };
        iconLabel: {
            type: StringConstructor;
            default: string;
        };
        lang: {
            type: PropType<string | null>;
            default: null;
        };
        dir: {
            type: PropType<import("../../types").HTMLDirection | null>;
            default: null;
        };
        size: {
            type: PropType<import("../../types").IconSize>;
            default: string;
            validator: import("../../types").StringTypeValidator<"medium" | "small" | "x-small">;
        };
    }>> & Readonly<{}>, {
        lang: string | null;
        iconLabel: string;
        dir: import("../../types").HTMLDirection | null;
        size: "medium" | "small" | "x-small";
    }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
export default _default;