export type ButtonComponentProps = ButtonGenericProps | ButtonColorProps;
|
|
/**
|
* Interface defining the properties for the generic button component.
|
*/
|
export interface ButtonGenericProps {
|
/**
|
* The type of component to display. Can be "button-generic" (default), a custom component, or one of the other supported button types.
|
*/
|
is?: string | object;
|
|
/**
|
* The text displayed on the button.
|
*/
|
text?: string;
|
|
/**
|
* Raw HTML content to display within the button.
|
*/
|
html?: string;
|
|
/**
|
* Tooltip text displayed when hovering over the button.
|
*/
|
title?: string;
|
|
/**
|
* Name of the Material icon to display on the button. See https://material.io/resources/icons/ for available icons.
|
* Alternatively, you can provide a custom icon component (e.g., using https://github.com/antfu/unplugin-icons).
|
*/
|
icon?: string | object;
|
|
/**
|
* Name of the Emoji to display on the button. See https://raw.githubusercontent.com/omnidan/node-emoji/master/lib/emoji.json for available emojis.
|
*/
|
emoji?: string;
|
|
/**
|
* Hotkey combination shortcut for the button. Use the format: https://github.com/jaywcjlove/hotkeys#supported-keys.
|
*/
|
hotkey?: string;
|
|
/**
|
* Indicates whether the button is currently toggled.
|
*/
|
active?: boolean;
|
|
/**
|
* Determines whether the button is disabled and cannot be clicked.
|
*/
|
disabled?: boolean;
|
|
/**
|
* Event handler function for the button's click event.
|
*/
|
click?: Function;
|
|
/**
|
* CSS classes to apply to the button element.
|
*/
|
class?: string | object;
|
|
/**
|
* Element ID to apply to the button element.
|
*/
|
id?: string;
|
|
/**
|
* Custom menu width for the button.
|
*/
|
menu_width?: number;
|
|
/**
|
* Custom maximum height for the menu content. If set, a scrollbar will be activated if the content overflows.
|
*/
|
menu_height?: number;
|
|
/**
|
* CSS classes to apply to the menu container.
|
* You can set the menu alignment using the following values: "align-left" (default), "align-center", or "align-right".
|
*/
|
menu_class?: string | object;
|
|
/**
|
* Element ID to apply to the menu container.
|
*/
|
menu_id?: string;
|
|
/**
|
* Determines whether to display a chevron icon next to the button. Set to `true` for the default chevron, or provide custom HTML for your own chevron.
|
*/
|
chevron?: boolean | string;
|
|
/**
|
* Array of menu items or a custom component to display when the button is clicked.
|
*/
|
menu?: MenuItemComponentProps[] | object;
|
}
|
|
export interface MenuItemComponentProps {
|
/**
|
* The type of component to display. Can be "item" (default), a custom component, or "separator".
|
*/
|
is?: string | object;
|
|
/**
|
* The text displayed on the menu item.
|
*/
|
text?: string;
|
|
/**
|
* Raw HTML content to display within the menu item.
|
*/
|
html?: string;
|
|
/**
|
* Name of the Material icon to display on the menu item. See https://material.io/resources/icons/ for available icons.
|
* Alternatively, you can provide a custom icon component (e.g., using https://github.com/antfu/unplugin-icons).
|
*/
|
icon?: string | object;
|
|
/**
|
* Name of the Emoji to display on the menu item. See https://raw.githubusercontent.com/omnidan/node-emoji/master/lib/emoji.json for available emojis.
|
*/
|
emoji?: string;
|
|
/**
|
* Hotkey combination shortcut for the menu item. Use the format: https://github.com/jaywcjlove/hotkeys#supported-keys.
|
*/
|
hotkey?: string;
|
/**
|
* Menu item disabled state
|
*/
|
disabled?: boolean;
|
/**
|
* Click event handler function
|
*/
|
click?: Function;
|
/**
|
* CSS classes for the menu item
|
*/
|
class?: string | object;
|
/**
|
* Element ID for the menu item
|
*/
|
id?: string; //
|
|
// Sub-menu configuration (if applicable)
|
menu_width?: number; // Custom sub-menu width
|
menu_height?: number; // Custom sub-menu height (activates scrollbar)
|
menu_class?: string | object; // CSS classes for the sub-menu
|
menu_id?: string; // Element ID for the sub-menu
|
custom_chevron?: string; // Custom HTML for chevron (or "" to hide)
|
menu?: MenuItemComponentProps[] | object; // Sub-menu items (recursive)
|
}
|
|
export interface ButtonColorProps {
|
type?: string; // Color picker format (see https://github.com/xiaokaike/vue-color)
|
title?: string; // Tooltip text
|
menu_class?: string | object; // CSS classes for the color picker box
|
menu_id?: string; // Element ID for the color picker box
|
stay_open?: boolean; // Color picker stays open on click
|
disabled?: boolean; // Color picker disabled state
|
color?: string | object; // Initial color (see https://github.com/xiaokaike/vue-color)
|
update_color?: (newColor: ColorObject) => void; // Color change callback function
|
}
|
|
export interface ColorObject {
|
a: number; // Alpha value
|
hex: string; // Hex format (#123456)
|
hex8: string; // Hex8 format with alpha (#12345678)
|
hsl: {
|
h: number;
|
s: number;
|
l: number;
|
a: number;
|
};
|
hsv: {
|
h: number;
|
s: number;
|
v: number;
|
a: number;
|
};
|
rgba: {
|
r: number;
|
g: number;
|
b: number;
|
a: number;
|
};
|
}
|
