@nextcloud/vue
Version:
Nextcloud vue components
517 lines (516 loc) • 16.8 kB
TypeScript
import { NC_ACTIONS_IS_SEMANTIC_MENU, NC_ACTIONS_CLOSE_MENU } from './useNcActions.ts';
declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
/**
* Specify the open state of the popover menu
*/
open: {
type: BooleanConstructor;
default: boolean;
};
/**
* This disables the internal open management,
* so the actions menu only respects the `open` prop.
* This is e.g. necessary for the NcAvatar component
* to only open the actions menu after loading it's entries has finished.
*/
manualOpen: {
type: BooleanConstructor;
default: boolean;
};
/**
* Force the actions to display in a three dot menu
*/
forceMenu: {
type: BooleanConstructor;
default: boolean;
};
/**
* Force the name to show for single actions
*/
forceName: {
type: BooleanConstructor;
default: boolean;
};
/**
* Specify the menu name
*/
menuName: {
type: StringConstructor;
default: null;
};
/**
* Apply primary styling for this menu
*/
primary: {
type: BooleanConstructor;
default: boolean;
};
/**
* Icon to show for the toggle menu button
* when more than one action is inside the actions component.
* Only replace the default three-dot icon if really necessary.
*/
defaultIcon: {
type: StringConstructor;
default: string;
};
/**
* Aria label for the actions menu.
*
* If `menuName` is defined this will not be used to prevent
* any accessible name conflicts. This ensures that the
* element can be activated via voice input.
*/
ariaLabel: {
type: StringConstructor;
default: string;
};
/**
* Wanted direction of the menu
*/
placement: {
type: StringConstructor;
default: string;
};
/**
* DOM element for the actions' popover boundaries
*/
boundariesElement: {
type: {
new (): Element;
prototype: Element;
};
default: () => HTMLElement | null;
};
/**
* Selector for the actions' popover container
*/
container: {
type: (ObjectConstructor | BooleanConstructor | StringConstructor | {
new (): Element;
prototype: Element;
})[];
default: string;
};
/**
* Disabled state of the main button (single action or menu toggle)
*/
disabled: {
type: BooleanConstructor;
default: boolean;
};
/**
* Display x items inline out of the dropdown menu
* Will be ignored if `forceMenu` is set
*/
inline: {
type: NumberConstructor;
default: number;
};
/**
* Specifies the button variant used for trigger and single actions buttons.
*
* If left empty, the default button style will be applied.
*
* @since 8.23.0
*/
variant: {
type: StringConstructor;
validator(value: unknown): boolean;
default: null;
};
/**
* Specify the size used for trigger and single actions buttons.
*
* If left empty, the default button size will be applied.
*/
size: {
type: StringConstructor;
default: string;
validator(value: unknown): boolean;
};
}>, {
randomId: string;
}, {
opened: boolean;
focusIndex: number;
/**
* @type {'menu'|'navigation'|'dialog'|'tooltip'|'unknown'}
*/
actionsMenuSemanticType: "menu" | "navigation" | "dialog" | "tooltip" | "unknown";
}, {
triggerButtonVariant(): string;
/**
* A11y roles and keyboard navigation configuration depending on the semantic type
*/
config(): {
popupRole: string;
withArrowNavigation: boolean;
withTabNavigation: boolean;
withFocusTrap: boolean;
} | {
popupRole: undefined;
withArrowNavigation: boolean;
withTabNavigation: boolean;
withFocusTrap: boolean;
} | {
popupRole: string;
withArrowNavigation: boolean;
withTabNavigation: boolean;
withFocusTrap: boolean;
} | {
popupRole: undefined;
withArrowNavigation: boolean;
withTabNavigation: boolean;
withFocusTrap: boolean;
} | {
popupRole: undefined;
role: undefined;
withArrowNavigation: boolean;
withTabNavigation: boolean;
withFocusTrap: boolean;
};
withFocusTrap(): boolean;
}, {
/**
* Get the name of the action component
*
* @param {import('vue').VNode} action - a vnode with a NcAction* component instance
* @return {string} the name of the action component
*/
getActionName(action: import('vue').VNode): string;
/**
* Do we have exactly one Action and
* is it allowed as a standalone element?
*
* @param {import('vue').VNode} action The action to check
* @return {boolean}
*/
isValidSingleAction(action: import('vue').VNode): boolean;
isAction(action: any): boolean;
/**
* Check whether a icon prop value is an URL or not
*
* @param {string} url The icon prop value
*/
isIconUrl(url: string): boolean;
toggleMenu(state: any): void;
openMenu(): void;
closeMenu(returnFocus?: boolean): Promise<void>;
/**
* Called when popover is shown after the show delay
*/
onOpened(): void;
onClosed(): void;
/**
* @return {HTMLElement|null}
*/
getCurrentActiveMenuItemElement(): HTMLElement | null;
/**
* @return {NodeList<HTMLElement>}
*/
getFocusableMenuItemElements(): NodeList<HTMLElement>;
/**
* Dispatches the keydown listener to different handlers
*
* @param {object} event The keydown event
*/
onKeydown(event: object): void;
onTriggerKeydown(event: any): void;
handleEscapePressed(event: any): void;
removeCurrentActive(): void;
focusAction(): void;
focusPreviousAction(event: any): void;
focusNextAction(event: any): void;
focusFirstAction(event: any): void;
focusLastAction(event: any): void;
preventIfEvent(event: any): void;
onFocus(event: any): void;
onBlur(event: any): void;
onClick(event: any): void;
}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("blur" | "click" | "close" | "focus" | "open" | "closed" | "opened" | "update:open")[], "blur" | "click" | "close" | "focus" | "open" | "closed" | "opened" | "update:open", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
/**
* Specify the open state of the popover menu
*/
open: {
type: BooleanConstructor;
default: boolean;
};
/**
* This disables the internal open management,
* so the actions menu only respects the `open` prop.
* This is e.g. necessary for the NcAvatar component
* to only open the actions menu after loading it's entries has finished.
*/
manualOpen: {
type: BooleanConstructor;
default: boolean;
};
/**
* Force the actions to display in a three dot menu
*/
forceMenu: {
type: BooleanConstructor;
default: boolean;
};
/**
* Force the name to show for single actions
*/
forceName: {
type: BooleanConstructor;
default: boolean;
};
/**
* Specify the menu name
*/
menuName: {
type: StringConstructor;
default: null;
};
/**
* Apply primary styling for this menu
*/
primary: {
type: BooleanConstructor;
default: boolean;
};
/**
* Icon to show for the toggle menu button
* when more than one action is inside the actions component.
* Only replace the default three-dot icon if really necessary.
*/
defaultIcon: {
type: StringConstructor;
default: string;
};
/**
* Aria label for the actions menu.
*
* If `menuName` is defined this will not be used to prevent
* any accessible name conflicts. This ensures that the
* element can be activated via voice input.
*/
ariaLabel: {
type: StringConstructor;
default: string;
};
/**
* Wanted direction of the menu
*/
placement: {
type: StringConstructor;
default: string;
};
/**
* DOM element for the actions' popover boundaries
*/
boundariesElement: {
type: {
new (): Element;
prototype: Element;
};
default: () => HTMLElement | null;
};
/**
* Selector for the actions' popover container
*/
container: {
type: (ObjectConstructor | BooleanConstructor | StringConstructor | {
new (): Element;
prototype: Element;
})[];
default: string;
};
/**
* Disabled state of the main button (single action or menu toggle)
*/
disabled: {
type: BooleanConstructor;
default: boolean;
};
/**
* Display x items inline out of the dropdown menu
* Will be ignored if `forceMenu` is set
*/
inline: {
type: NumberConstructor;
default: number;
};
/**
* Specifies the button variant used for trigger and single actions buttons.
*
* If left empty, the default button style will be applied.
*
* @since 8.23.0
*/
variant: {
type: StringConstructor;
validator(value: unknown): boolean;
default: null;
};
/**
* Specify the size used for trigger and single actions buttons.
*
* If left empty, the default button size will be applied.
*/
size: {
type: StringConstructor;
default: string;
validator(value: unknown): boolean;
};
}>> & Readonly<{
onFocus?: ((...args: any[]) => any) | undefined;
onBlur?: ((...args: any[]) => any) | undefined;
onClick?: ((...args: any[]) => any) | undefined;
onClose?: ((...args: any[]) => any) | undefined;
onOpen?: ((...args: any[]) => any) | undefined;
onClosed?: ((...args: any[]) => any) | undefined;
onOpened?: ((...args: any[]) => any) | undefined;
"onUpdate:open"?: ((...args: any[]) => any) | undefined;
}>, {
size: string;
disabled: boolean;
open: boolean;
primary: boolean;
ariaLabel: string;
variant: string;
inline: number;
placement: string;
container: string | boolean | Element | Record<string, any>;
manualOpen: boolean;
forceMenu: boolean;
forceName: boolean;
menuName: string;
defaultIcon: string;
boundariesElement: Element;
}, {}, {
NcButton: {
new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<{
alignment?: import('../NcButton/NcButton.vue').ButtonAlignment;
ariaLabel?: string;
disabled?: boolean;
download?: string | true;
href?: string;
pressed?: boolean | undefined;
size?: import('../NcButton/NcButton.vue').ButtonSize;
target?: string;
text?: string;
to?: import('vue-router').RouteLocationRaw;
type?: import('../NcButton/NcButton.vue').ButtonType;
variant?: import('../NcButton/NcButton.vue').ButtonVariant;
wide?: boolean;
}> & Readonly<{
onClick?: ((e: MouseEvent) => any) | undefined;
"onUpdate:pressed"?: ((pressed: boolean) => any) | undefined;
}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
click: (e: MouseEvent) => any;
"update:pressed": (pressed: boolean) => any;
}, import('vue').PublicProps, {
size: import('../NcButton/NcButton.vue').ButtonSize;
type: import('../NcButton/NcButton.vue').ButtonType;
text: string;
alignment: import('../NcButton/NcButton.vue').ButtonAlignment;
ariaLabel: string;
download: string | true;
href: string;
pressed: boolean;
target: string;
to: import('vue-router').RouteLocationRaw;
variant: import('../NcButton/NcButton.vue').ButtonVariant;
}, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, any, import('vue').ComponentProvideOptions, {
P: {};
B: {};
D: {};
C: {};
M: {};
Defaults: {};
}, Readonly<{
alignment?: import('../NcButton/NcButton.vue').ButtonAlignment;
ariaLabel?: string;
disabled?: boolean;
download?: string | true;
href?: string;
pressed?: boolean | undefined;
size?: import('../NcButton/NcButton.vue').ButtonSize;
target?: string;
text?: string;
to?: import('vue-router').RouteLocationRaw;
type?: import('../NcButton/NcButton.vue').ButtonType;
variant?: import('../NcButton/NcButton.vue').ButtonVariant;
wide?: boolean;
}> & Readonly<{
onClick?: ((e: MouseEvent) => any) | undefined;
"onUpdate:pressed"?: ((pressed: boolean) => any) | undefined;
}>, {}, {}, {}, {}, {
size: import('../NcButton/NcButton.vue').ButtonSize;
type: import('../NcButton/NcButton.vue').ButtonType;
text: string;
alignment: import('../NcButton/NcButton.vue').ButtonAlignment;
ariaLabel: string;
download: string | true;
href: string;
pressed: boolean;
target: string;
to: import('vue-router').RouteLocationRaw;
variant: import('../NcButton/NcButton.vue').ButtonVariant;
}>;
__isFragment?: never;
__isTeleport?: never;
__isSuspense?: never;
} & import('vue').ComponentOptionsBase<Readonly<{
alignment?: import('../NcButton/NcButton.vue').ButtonAlignment;
ariaLabel?: string;
disabled?: boolean;
download?: string | true;
href?: string;
pressed?: boolean | undefined;
size?: import('../NcButton/NcButton.vue').ButtonSize;
target?: string;
text?: string;
to?: import('vue-router').RouteLocationRaw;
type?: import('../NcButton/NcButton.vue').ButtonType;
variant?: import('../NcButton/NcButton.vue').ButtonVariant;
wide?: boolean;
}> & Readonly<{
onClick?: ((e: MouseEvent) => any) | undefined;
"onUpdate:pressed"?: ((pressed: boolean) => any) | undefined;
}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
click: (e: MouseEvent) => any;
"update:pressed": (pressed: boolean) => any;
}, string, {
size: import('../NcButton/NcButton.vue').ButtonSize;
type: import('../NcButton/NcButton.vue').ButtonType;
text: string;
alignment: import('../NcButton/NcButton.vue').ButtonAlignment;
ariaLabel: string;
download: string | true;
href: string;
pressed: boolean;
target: string;
to: import('vue-router').RouteLocationRaw;
variant: import('../NcButton/NcButton.vue').ButtonVariant;
}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
$slots: Readonly<{
default?: import('vue').Slot;
icon?: import('vue').Slot;
}> & {
default?: import('vue').Slot;
icon?: import('vue').Slot;
};
});
NcPopover: import('vue').DefineSetupFnComponent<Record<string, any>, {}, {}, Record<string, any> & {}, import('vue').PublicProps>;
}, {}, string, () => {
/**
* NcActions can be used as:
* - Application menu (has menu role)
* - Navigation (has no specific role, should be used an element with navigation role)
* - Popover with plain text or text inputs (has no specific role)
* Depending on the usage (used items), the menu and its items should have different roles for a11y.
* Provide the role for NcAction* components in the NcActions content.
*
* @type {import('vue').ComputedRef<boolean>}
*/
[NC_ACTIONS_IS_SEMANTIC_MENU]: import('vue').ComputedRef<boolean>;
[NC_ACTIONS_CLOSE_MENU]: (returnFocus?: boolean) => Promise<void>;
}, true, {}, any>;
export default _default;