@wikimedia/codex
Version:
Codex Design System for Wikimedia
966 lines (965 loc) • 35.1 kB
TypeScript
import { PropType, ComponentPublicInstance } from 'vue';
import { MenuItemData, MenuItemDataWithId, MenuState, MenuItemValue, MenuGroupData, MenuGroupDataWithIds } from '../../types';
/**
* Type guard for each item within a menu groups definition.
*
* @param menuEntry
* @return Whether this is a menu group or a single menu item.
*/
declare function isMenuGroupData(menuEntry: MenuItemData | MenuGroupData): menuEntry is MenuGroupData;
/**
* A contextual list of selectable options, often triggered by a control or an input.
*/
declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
/**
* Menu items and menu group definitions.
*
* Menu groups and individual menu items will be output in the order they appear here.
*/
menuItems: {
type: PropType<(MenuItemData | MenuGroupData)[]>;
required: true;
};
/**
* Interactive footer item.
*
* This is a special menu item which is pinned to the bottom of the menu. When scrolling is
* enabled within the menu, the footer item will always be visible at the bottom of the
* menu. When scrolling is not enabled, the footer item will simply appear as the last menu
* item.
*
* The footer item is selectable, like other menu items.
*/
footer: {
type: PropType<MenuItemData>;
default: null;
};
/**
* Value(s) of the selected menu item(s). A single value for single-select, or an array of
* values for multi-select.
*
* Must be bound with `v-model:selected`.
*
* The property should be initialized to `null` (for single-select) or an empty array (for
* multi-select) rather than using a falsy value.
*/
selected: {
type: PropType<MenuItemValue | MenuItemValue[] | null>;
required: true;
};
/**
* Whether the menu is expanded. Must be bound with `v-model:expanded`.
*/
expanded: {
type: BooleanConstructor;
required: true;
};
/**
* Whether to display pending state indicators. Meant to indicate that new menu items are
* being fetched or computed.
*
* When true, the menu will expand if not already expanded, and an inline progress bar will
* display. If there are no menu items yet, a message can be displayed in the `pending`
* slot, e.g. "Loading results".
*/
showPending: {
type: BooleanConstructor;
default: boolean;
};
/**
* Limit the number of menu items to display before scrolling.
*
* Setting this prop to anything falsy will show all menu items.
*
* By default, all menu items are shown.
*/
visibleItemLimit: {
type: PropType<number | null>;
default: null;
};
/**
* Whether menu item thumbnails (or a placeholder icon) should be displayed.
*/
showThumbnail: {
type: BooleanConstructor;
default: boolean;
};
/**
* Whether to bold menu item labels.
*/
boldLabel: {
type: BooleanConstructor;
default: boolean;
};
/**
* Whether to hide description text overflow via an ellipsis.
*/
hideDescriptionOverflow: {
type: BooleanConstructor;
default: boolean;
};
/**
* The search query to be highlighted within the menu items' titles.
*/
searchQuery: {
type: StringConstructor;
default: string;
};
/**
* Whether to show the `no-results` slot content.
*
* The Menu component automatically shows this slot when there is content in the
* `no-results` slot and there are zero menu items. However, some components may need to
* customize this behavior, e.g. to show the slot even when there is at least one menu item.
* This prop can be used to override the default Menu behavior.
*
* Possible values:
* `null` (default): the `no-results` slot will display only if there are zero menu items.
* `true`: the `no-results` slot will display, regardless of number of menu items.
* `false`: the `no-results` slot will not display, regardless of number of menu items.
*/
showNoResultsSlot: {
type: PropType<boolean | null>;
default: null;
};
/**
* Whether to disable the use of teleport and render the Menu in its
* original location in the document.
*
* Teleport is disabled by default for Menus, but it will be enabled if `'CdxTeleportMenus'`
* is provided and set to true. Setting this prop prevents the Menu from being teleported
* regardless of the value of `'CdxTeleportMenus'`.
*/
renderInPlace: {
type: BooleanConstructor;
default: boolean;
};
}>, {
listBoxStyle: import("vue").ComputedRef<{
'max-height': string | undefined;
'margin-bottom': string | undefined;
}>;
rootClasses: import("vue").ComputedRef<Record<string, boolean>>;
rootStyle: import("vue").ComputedRef<import("vue").StyleValue>;
otherAttrs: import("vue").ComputedRef<{
[x: string]: unknown;
}>;
assignTemplateRef: (templateRef: ComponentPublicInstance | Element | null, index: number) => void;
computedMenuEntries: import("vue").ComputedRef<(MenuItemDataWithId | MenuGroupDataWithIds)[]>;
computedMenuItems: import("vue").ComputedRef<MenuItemDataWithId[]>;
computedShowNoResultsSlot: import("vue").ComputedRef<boolean>;
highlightedMenuItem: import("vue").Ref<{
id: string;
value: MenuItemValue;
label?: string | undefined;
match?: string | undefined;
supportingText?: string | undefined;
description?: string | null | undefined;
language?: {
label?: string | undefined;
match?: string | undefined;
supportingText?: string | undefined;
description?: string | undefined;
} | undefined;
icon?: string | {
path: string;
} | {
ltr: string | {
path: string;
};
shouldFlip: true;
shouldFlipExceptions?: string[] | undefined;
} | {
rtl: string | {
path: string;
};
ltr: string | {
path: string;
};
} | {
langCodeMap: Record<string, import("@wikimedia/codex-icons").SimpleIcon | import("@wikimedia/codex-icons").IconFlipForRtl>;
default: string | {
path: string;
} | {
ltr: string | {
path: string;
};
shouldFlip: true;
shouldFlipExceptions?: string[] | undefined;
};
} | undefined;
thumbnail?: {
url: string;
} | null | undefined;
url?: string | undefined;
urlNewTab?: boolean | undefined;
disabled?: boolean | undefined;
} | null, MenuItemDataWithId | {
id: string;
value: MenuItemValue;
label?: string | undefined;
match?: string | undefined;
supportingText?: string | undefined;
description?: string | null | undefined;
language?: {
label?: string | undefined;
match?: string | undefined;
supportingText?: string | undefined;
description?: string | undefined;
} | undefined;
icon?: string | {
path: string;
} | {
ltr: string | {
path: string;
};
shouldFlip: true;
shouldFlipExceptions?: string[] | undefined;
} | {
rtl: string | {
path: string;
};
ltr: string | {
path: string;
};
} | {
langCodeMap: Record<string, import("@wikimedia/codex-icons").SimpleIcon | import("@wikimedia/codex-icons").IconFlipForRtl>;
default: string | {
path: string;
} | {
ltr: string | {
path: string;
};
shouldFlip: true;
shouldFlipExceptions?: string[] | undefined;
};
} | undefined;
thumbnail?: {
url: string;
} | null | undefined;
url?: string | undefined;
urlNewTab?: boolean | undefined;
disabled?: boolean | undefined;
} | null>;
highlightedViaKeyboard: import("vue").Ref<boolean, boolean>;
teleportDisabled: import("vue").ComputedRef<boolean>;
computedTarget: import("vue").ComputedRef<string | HTMLElement>;
handleMenuItemChange: (menuState: MenuState, menuItem: MenuItemDataWithId | null) => void;
handleKeyNavigation: (e: KeyboardEvent, { prevent, characterNavigation }?: {
prevent?: boolean | undefined;
characterNavigation?: boolean | undefined;
}) => boolean;
ariaRelevant: "text" | "all" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
isMultiselect: import("vue").ComputedRef<boolean>;
rootElement: import("vue").Ref<HTMLElement | undefined, HTMLElement | undefined>;
menuListbox: import("vue").Ref<HTMLElement | undefined, HTMLElement | undefined>;
getGroupWrapperClasses: (group: MenuGroupData) => {
'cdx-menu__group-wrapper--hide-label': boolean;
};
getMenuItemIndex: (menuItem: MenuItemDataWithId) => number;
getMenuItemBindings: (menuItem: MenuItemDataWithId) => {
id: string;
value: MenuItemValue;
label?: string;
match?: string;
supportingText?: string;
description?: string | null;
language?: import("../../types").MenuItemLanguageData;
icon?: import("@wikimedia/codex-icons").Icon;
thumbnail?: import("../../types").Thumbnail | null;
url?: string;
urlNewTab?: boolean;
disabled?: boolean;
selected: boolean;
active: boolean;
highlighted: boolean;
showThumbnail: boolean;
boldLabel: boolean;
hideDescriptionOverflow: boolean;
searchQuery: string;
multiselect: boolean;
};
getMenuItemHandlers: (menuItem: MenuItemDataWithId) => {
change: (menuState: MenuState, setState: boolean) => void;
click: () => void;
};
getSlotBindings: (menuItem: MenuItemDataWithId) => {
menuItem: MenuItemDataWithId;
active: boolean;
};
isMenuGroupData: typeof isMenuGroupData;
}, {}, {}, {
/**
* Returns whether the menu is expanded.
*
* @return {boolean}
*/
isExpanded(): boolean;
/**
* Get the root element of the menu. The normal `.$el` property doesn't work due to the use
* of teleport; it returns a `<!-- teleport start -->` comment instead. This method returns
* the real, teleported root element.
*
* @return {HTMLElement|undefined}
*/
getRootElement(): HTMLElement | undefined;
/**
* Get the highlighted menu item, if any.
*
* The parent component should set `aria-activedescendant` to the `.id` property of the
* object returned by this method. If this method returns null, `aria-activedescendant`
* should not be set.
*
* @public
* @return {MenuItemDataWithId|null} The highlighted menu item,
* or null if no item is highlighted or if the menu is closed.
*/
getHighlightedMenuItem(): MenuItemDataWithId | null;
/**
* Get whether the last highlighted item was highlighted via the keyboard.
*
* @public
* @return {boolean} Whether the last highlighted menu item was highlighted via keyboard.
*/
getHighlightedViaKeyboard(): boolean;
/**
* Get the computed menu items with IDs (without menu groups).
*
* @public
* @return {MenuItemDataWithId[]} List of current menu items without menu groups.
*/
getComputedMenuItems(): MenuItemDataWithId[];
/**
* Ensure no menu item is active. This unsets the active item if there is one.
*
* @public
*/
clearActive(): void;
/**
* Handles all necessary keyboard navigation.
*
* The parent component should listen for keydown events on its focusable element,
* and pass those events to this method. Events for arrow keys, tab and enter are handled
* by this method. If a different key was pressed, this method will return false to indicate
* that it didn't handle the event.
*
* @public
* @param event {KeyboardEvent} Keydown event object
* @param options
* @param options.prevent {boolean} If false, do not call e.preventDefault() or
* e.stopPropagation()
* @param options.characterNavigation {boolean}
* @return Whether the event was handled
*/
delegateKeyNavigation(event: KeyboardEvent, { prevent, characterNavigation }?: {
prevent?: boolean | undefined;
characterNavigation?: boolean | undefined;
}): boolean;
}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:selected" | "update:expanded" | "menu-item-click" | "menu-item-keyboard-navigation" | "load-more")[], "update:selected" | "update:expanded" | "menu-item-click" | "menu-item-keyboard-navigation" | "load-more", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
/**
* Menu items and menu group definitions.
*
* Menu groups and individual menu items will be output in the order they appear here.
*/
menuItems: {
type: PropType<(MenuItemData | MenuGroupData)[]>;
required: true;
};
/**
* Interactive footer item.
*
* This is a special menu item which is pinned to the bottom of the menu. When scrolling is
* enabled within the menu, the footer item will always be visible at the bottom of the
* menu. When scrolling is not enabled, the footer item will simply appear as the last menu
* item.
*
* The footer item is selectable, like other menu items.
*/
footer: {
type: PropType<MenuItemData>;
default: null;
};
/**
* Value(s) of the selected menu item(s). A single value for single-select, or an array of
* values for multi-select.
*
* Must be bound with `v-model:selected`.
*
* The property should be initialized to `null` (for single-select) or an empty array (for
* multi-select) rather than using a falsy value.
*/
selected: {
type: PropType<MenuItemValue | MenuItemValue[] | null>;
required: true;
};
/**
* Whether the menu is expanded. Must be bound with `v-model:expanded`.
*/
expanded: {
type: BooleanConstructor;
required: true;
};
/**
* Whether to display pending state indicators. Meant to indicate that new menu items are
* being fetched or computed.
*
* When true, the menu will expand if not already expanded, and an inline progress bar will
* display. If there are no menu items yet, a message can be displayed in the `pending`
* slot, e.g. "Loading results".
*/
showPending: {
type: BooleanConstructor;
default: boolean;
};
/**
* Limit the number of menu items to display before scrolling.
*
* Setting this prop to anything falsy will show all menu items.
*
* By default, all menu items are shown.
*/
visibleItemLimit: {
type: PropType<number | null>;
default: null;
};
/**
* Whether menu item thumbnails (or a placeholder icon) should be displayed.
*/
showThumbnail: {
type: BooleanConstructor;
default: boolean;
};
/**
* Whether to bold menu item labels.
*/
boldLabel: {
type: BooleanConstructor;
default: boolean;
};
/**
* Whether to hide description text overflow via an ellipsis.
*/
hideDescriptionOverflow: {
type: BooleanConstructor;
default: boolean;
};
/**
* The search query to be highlighted within the menu items' titles.
*/
searchQuery: {
type: StringConstructor;
default: string;
};
/**
* Whether to show the `no-results` slot content.
*
* The Menu component automatically shows this slot when there is content in the
* `no-results` slot and there are zero menu items. However, some components may need to
* customize this behavior, e.g. to show the slot even when there is at least one menu item.
* This prop can be used to override the default Menu behavior.
*
* Possible values:
* `null` (default): the `no-results` slot will display only if there are zero menu items.
* `true`: the `no-results` slot will display, regardless of number of menu items.
* `false`: the `no-results` slot will not display, regardless of number of menu items.
*/
showNoResultsSlot: {
type: PropType<boolean | null>;
default: null;
};
/**
* Whether to disable the use of teleport and render the Menu in its
* original location in the document.
*
* Teleport is disabled by default for Menus, but it will be enabled if `'CdxTeleportMenus'`
* is provided and set to true. Setting this prop prevents the Menu from being teleported
* regardless of the value of `'CdxTeleportMenus'`.
*/
renderInPlace: {
type: BooleanConstructor;
default: boolean;
};
}>> & Readonly<{
"onUpdate:selected"?: ((...args: any[]) => any) | undefined;
"onUpdate:expanded"?: ((...args: any[]) => any) | undefined;
"onMenu-item-click"?: ((...args: any[]) => any) | undefined;
"onMenu-item-keyboard-navigation"?: ((...args: any[]) => any) | undefined;
"onLoad-more"?: ((...args: any[]) => any) | undefined;
}>, {
footer: MenuItemData;
searchQuery: string;
showThumbnail: boolean;
boldLabel: boolean;
hideDescriptionOverflow: boolean;
showPending: boolean;
visibleItemLimit: number | null;
showNoResultsSlot: boolean | null;
renderInPlace: boolean;
}, {}, {
CdxMenuItem: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
id: {
type: StringConstructor;
required: true;
};
value: {
type: PropType<MenuItemValue>;
required: true;
};
disabled: {
type: BooleanConstructor;
default: boolean;
};
selected: {
type: BooleanConstructor;
default: boolean;
};
active: {
type: BooleanConstructor;
default: boolean;
};
highlighted: {
type: BooleanConstructor;
default: boolean;
};
label: {
type: StringConstructor;
default: string;
};
match: {
type: StringConstructor;
default: string;
};
supportingText: {
type: StringConstructor;
default: string;
};
url: {
type: StringConstructor;
default: string;
};
urlNewTab: {
type: BooleanConstructor;
default: boolean;
};
icon: {
type: PropType<import("@wikimedia/codex-icons").Icon>;
default: string;
};
showThumbnail: {
type: BooleanConstructor;
default: boolean;
};
thumbnail: {
type: PropType<import("../../types").Thumbnail | null>;
default: null;
};
description: {
type: PropType<string | null>;
default: string;
};
searchQuery: {
type: StringConstructor;
default: string;
};
boldLabel: {
type: BooleanConstructor;
default: boolean;
};
hideDescriptionOverflow: {
type: BooleanConstructor;
default: boolean;
};
language: {
type: PropType<import("../../types").MenuItemLanguageData>;
default: () => {};
};
action: {
type: PropType<import("../../types").ButtonAction>;
default: string;
};
multiselect: {
type: BooleanConstructor;
default: boolean;
};
}>, {
onMouseMove: () => void;
onMouseLeave: () => void;
onMouseDown: (e: MouseEvent) => void;
onClick: () => void;
highlightQuery: import("vue").ComputedRef<boolean>;
rootClasses: import("vue").ComputedRef<Record<string, boolean>>;
contentTag: import("vue").ComputedRef<"span" | "a">;
linkAttrs: import("vue").ComputedRef<{
target: string;
rel: string;
} | {
target?: undefined;
rel?: undefined;
}>;
title: import("vue").ComputedRef<string>;
cdxIconCheck: string;
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "change"[], "change", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
id: {
type: StringConstructor;
required: true;
};
value: {
type: PropType<MenuItemValue>;
required: true;
};
disabled: {
type: BooleanConstructor;
default: boolean;
};
selected: {
type: BooleanConstructor;
default: boolean;
};
active: {
type: BooleanConstructor;
default: boolean;
};
highlighted: {
type: BooleanConstructor;
default: boolean;
};
label: {
type: StringConstructor;
default: string;
};
match: {
type: StringConstructor;
default: string;
};
supportingText: {
type: StringConstructor;
default: string;
};
url: {
type: StringConstructor;
default: string;
};
urlNewTab: {
type: BooleanConstructor;
default: boolean;
};
icon: {
type: PropType<import("@wikimedia/codex-icons").Icon>;
default: string;
};
showThumbnail: {
type: BooleanConstructor;
default: boolean;
};
thumbnail: {
type: PropType<import("../../types").Thumbnail | null>;
default: null;
};
description: {
type: PropType<string | null>;
default: string;
};
searchQuery: {
type: StringConstructor;
default: string;
};
boldLabel: {
type: BooleanConstructor;
default: boolean;
};
hideDescriptionOverflow: {
type: BooleanConstructor;
default: boolean;
};
language: {
type: PropType<import("../../types").MenuItemLanguageData>;
default: () => {};
};
action: {
type: PropType<import("../../types").ButtonAction>;
default: string;
};
multiselect: {
type: BooleanConstructor;
default: boolean;
};
}>> & Readonly<{
onChange?: ((...args: any[]) => any) | undefined;
}>, {
url: string;
selected: boolean;
highlighted: boolean;
active: boolean;
icon: import("@wikimedia/codex-icons").Icon;
label: string;
match: string;
action: "default" | "progressive" | "destructive";
disabled: boolean;
thumbnail: import("../../types").Thumbnail | null;
description: string | null;
searchQuery: string;
supportingText: string;
urlNewTab: boolean;
showThumbnail: boolean;
boldLabel: boolean;
hideDescriptionOverflow: boolean;
language: import("../../types").MenuItemLanguageData;
multiselect: boolean;
}, {}, {
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>;
CdxThumbnail: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
thumbnail: {
type: PropType<import("../../types").Thumbnail | null>;
default: null;
};
placeholderIcon: {
type: PropType<import("@wikimedia/codex-icons").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<import("../../types").Thumbnail | null>;
default: null;
};
placeholderIcon: {
type: PropType<import("@wikimedia/codex-icons").Icon>;
default: string;
};
}>> & Readonly<{}>, {
thumbnail: import("../../types").Thumbnail | null;
placeholderIcon: import("@wikimedia/codex-icons").Icon;
}, {}, {
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>;
CdxSearchResultTitle: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
title: {
type: StringConstructor;
required: true;
};
searchQuery: {
type: StringConstructor;
default: string;
};
}>, {
titleChunks: import("vue").ComputedRef<[string, string, string]>;
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
title: {
type: StringConstructor;
required: true;
};
searchQuery: {
type: StringConstructor;
default: string;
};
}>> & Readonly<{}>, {
searchQuery: string;
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
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>;
CdxProgressBar: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
inline: {
type: BooleanConstructor;
default: boolean;
};
disabled: {
type: BooleanConstructor;
default: boolean;
};
}>, {
rootClasses: import("vue").ComputedRef<{
'cdx-progress-bar--block': boolean;
'cdx-progress-bar--inline': boolean;
'cdx-progress-bar--enabled': boolean;
'cdx-progress-bar--disabled': boolean;
}>;
computedAriaHidden: import("vue").ComputedRef<"true" | undefined>;
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
inline: {
type: BooleanConstructor;
default: boolean;
};
disabled: {
type: BooleanConstructor;
default: boolean;
};
}>> & Readonly<{}>, {
disabled: boolean;
inline: boolean;
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
export default _default;