@wikimedia/codex
Version:
Codex Design System for Wikimedia
261 lines (260 loc) • 9.48 kB
TypeScript
import { PropType } from 'vue';
import { Icon } from '@wikimedia/codex-icons';
import { Thumbnail } from '../../types';
/**
* An element which groups various kinds of content and is optionally clickable.
*/
declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
/**
* If provided, the Card will be a link to this URL.
*/
url: {
type: StringConstructor;
default: string;
};
/**
* Icon displayed at the start of the Card.
*/
icon: {
type: PropType<Icon>;
default: string;
};
/**
* Thumbnail image data for the Card.
*/
thumbnail: {
type: PropType<Thumbnail | null>;
default: null;
};
/**
* Option to force a thumbnail layout.
*
* When set to `true`, the Card will display a Thumbnail. If a `thumbnail` prop was also
* provided, the thumbnail image will display. Otherwise, a placeholder icon will display.
*
* This is useful when displaying groups of Cards when some of the cards have thumbnail
* images but some do not. `forceThumbnail` will provide a consistent layout for that group.
*
* Note that this prop is not needed to display a thumbnail image: if the `thumbnail` prop
* is provided, it will display. This prop is only needed to enable the display of the
* thumbnail placeholder icon when the `thumbnail` prop is not provided.
*/
forceThumbnail: {
type: BooleanConstructor;
default: boolean;
};
/**
* Optional custom icon for the placeholder shown when `forceThumbnail` is true but no
* thumbnail is provided.
*
* Defaults to the default placeholder icon set in the Thumbnail component.
*/
customPlaceholderIcon: {
type: PropType<Icon>;
default: undefined;
};
}>, {
isLink: import("vue").ComputedRef<boolean>;
contentTag: import("vue").ComputedRef<"span" | "a">;
cardLink: import("vue").ComputedRef<string | undefined>;
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
/**
* If provided, the Card will be a link to this URL.
*/
url: {
type: StringConstructor;
default: string;
};
/**
* Icon displayed at the start of the Card.
*/
icon: {
type: PropType<Icon>;
default: string;
};
/**
* Thumbnail image data for the Card.
*/
thumbnail: {
type: PropType<Thumbnail | null>;
default: null;
};
/**
* Option to force a thumbnail layout.
*
* When set to `true`, the Card will display a Thumbnail. If a `thumbnail` prop was also
* provided, the thumbnail image will display. Otherwise, a placeholder icon will display.
*
* This is useful when displaying groups of Cards when some of the cards have thumbnail
* images but some do not. `forceThumbnail` will provide a consistent layout for that group.
*
* Note that this prop is not needed to display a thumbnail image: if the `thumbnail` prop
* is provided, it will display. This prop is only needed to enable the display of the
* thumbnail placeholder icon when the `thumbnail` prop is not provided.
*/
forceThumbnail: {
type: BooleanConstructor;
default: boolean;
};
/**
* Optional custom icon for the placeholder shown when `forceThumbnail` is true but no
* thumbnail is provided.
*
* Defaults to the default placeholder icon set in the Thumbnail component.
*/
customPlaceholderIcon: {
type: PropType<Icon>;
default: undefined;
};
}>> & Readonly<{}>, {
url: string;
icon: Icon;
thumbnail: Thumbnail | null;
forceThumbnail: boolean;
customPlaceholderIcon: Icon;
}, {}, {
CdxIcon: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
icon: {
type: PropType<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<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>;
CdxThumbnail: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
thumbnail: {
type: PropType<Thumbnail | null>;
default: null;
};
placeholderIcon: {
type: PropType<Icon>;
default: string;
};
}>, {
thumbnailStyle: import("vue").Ref<{}, {}>;
thumbnailLoaded: import("vue").Ref<boolean, boolean>;
NoInvertClass: "cdx-no-invert";
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
thumbnail: {
type: PropType<Thumbnail | null>;
default: null;
};
placeholderIcon: {
type: PropType<Icon>;
default: string;
};
}>> & Readonly<{}>, {
thumbnail: Thumbnail | null;
placeholderIcon: Icon;
}, {}, {
CdxIcon: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
icon: {
type: PropType<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<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>;
}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
export default _default;