@inkline/inkline
Version:
Inkline is the intuitive UI Components library that gives you a developer-friendly foundation for building high-quality, accessible, and customizable Vue.js 3 Design Systems.
346 lines (345 loc) • 8.82 kB
TypeScript
import type { PropType } from 'vue';
declare const _default: import("vue").DefineComponent<{
/**
* Determines if the modal should close when pressing escape
* @type Boolean
* @default true
* @name closeOnPressEscape
*/
closeOnPressEscape: {
type: BooleanConstructor;
default: boolean;
};
/**
* The aria-label attribute of the close button
* @type String
* @default Close
* @name closeAriaLabel
*/
closeAriaLabel: {
type: StringConstructor;
default: string;
};
/**
* The color variant of the modal
* @type primary | success | light | dark | info | success | warning | danger
* @default
* @name color
*/
color: {
type: StringConstructor;
default: undefined;
};
/**
* The disabled state of the modal
* @type Boolean
* @default false
* @name disabled
*/
disabled: {
type: BooleanConstructor;
default: boolean;
};
/**
* Make the modal cover the entire screen
* @type Boolean
* @default false
* @name fullscreen
*/
fullscreen: {
type: BooleanConstructor;
default: boolean;
};
/**
* Determines if the modal should close when clicking the overlay
* @type Boolean
* @default true
* @name hideOnClickOutside
*/
hideOnClickOutside: {
type: BooleanConstructor;
default: boolean;
};
/**
* The identifier of the modal
* @type String
* @default uid()
* @name name
*/
name: {
type: StringConstructor;
default: () => string;
};
/**
* Determines if the close icon should be visible in the modal header
* @type Boolean
* @default false
* @name dismissible
*/
dismissible: {
type: BooleanConstructor;
default: boolean;
};
/**
* The size variant of the modal
* @type sm | md | lg
* @default
* @name size
*/
size: {
type: StringConstructor;
default: undefined;
};
/**
* Used to determine if modal is visible or not
* @type Boolean
* @default false
* @name modelValue
*/
modelValue: {
type: BooleanConstructor;
default: boolean;
};
/**
* The modal opening and closing animation
* @type fade-in-transition | fade-in-linear-transition | zoom-in-top-transition | zoom-in-bottom-transition | zoom-in-center-transition | zoom-in-left-transition | zoom-in-right-transition
* @default zoom-in-center-transition
* @name transition
*/
transition: {
type: StringConstructor;
default: string;
};
/**
* The header of the modal
* @type string | VNode | VNode[]
* @default undefined
* @name header
*/
header: {
type: PropType<StringOrRenderableType>;
default: undefined;
};
/**
* The icon of the modal
* @type string | VNode | VNode[]
* @default undefined
* @name icon
*/
icon: {
type: PropType<StringOrRenderableType>;
default: undefined;
};
/**
* The body of the modal
* @type string | VNode | VNode[]
* @default undefined
* @name body
*/
body: {
type: PropType<StringOrRenderableType>;
default: undefined;
};
/**
* The footer of the modal
* @type string | VNode | VNode[]
* @default undefined
* @name footer
*/
footer: {
type: PropType<StringOrRenderableType>;
default: undefined;
};
}, {
classes: import("vue").ComputedRef<{
[x: string]: boolean;
'-disabled': boolean;
'-fullscreen': boolean;
}>;
modalRef: import("vue").Ref<HTMLElement | null>;
wrapperRef: import("vue").Ref<HTMLElement | null>;
visible: import("vue").Ref<boolean>;
isVNode: import("vue").ComputedRef<{
header: boolean;
icon: boolean;
body: boolean;
footer: boolean;
}>;
hide: () => void;
onAfterEnter: () => void;
onAfterLeave: () => void;
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "close" | "open" | "opened" | "closed")[], "update:modelValue" | "close" | "open" | "opened" | "closed", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
/**
* Determines if the modal should close when pressing escape
* @type Boolean
* @default true
* @name closeOnPressEscape
*/
closeOnPressEscape: {
type: BooleanConstructor;
default: boolean;
};
/**
* The aria-label attribute of the close button
* @type String
* @default Close
* @name closeAriaLabel
*/
closeAriaLabel: {
type: StringConstructor;
default: string;
};
/**
* The color variant of the modal
* @type primary | success | light | dark | info | success | warning | danger
* @default
* @name color
*/
color: {
type: StringConstructor;
default: undefined;
};
/**
* The disabled state of the modal
* @type Boolean
* @default false
* @name disabled
*/
disabled: {
type: BooleanConstructor;
default: boolean;
};
/**
* Make the modal cover the entire screen
* @type Boolean
* @default false
* @name fullscreen
*/
fullscreen: {
type: BooleanConstructor;
default: boolean;
};
/**
* Determines if the modal should close when clicking the overlay
* @type Boolean
* @default true
* @name hideOnClickOutside
*/
hideOnClickOutside: {
type: BooleanConstructor;
default: boolean;
};
/**
* The identifier of the modal
* @type String
* @default uid()
* @name name
*/
name: {
type: StringConstructor;
default: () => string;
};
/**
* Determines if the close icon should be visible in the modal header
* @type Boolean
* @default false
* @name dismissible
*/
dismissible: {
type: BooleanConstructor;
default: boolean;
};
/**
* The size variant of the modal
* @type sm | md | lg
* @default
* @name size
*/
size: {
type: StringConstructor;
default: undefined;
};
/**
* Used to determine if modal is visible or not
* @type Boolean
* @default false
* @name modelValue
*/
modelValue: {
type: BooleanConstructor;
default: boolean;
};
/**
* The modal opening and closing animation
* @type fade-in-transition | fade-in-linear-transition | zoom-in-top-transition | zoom-in-bottom-transition | zoom-in-center-transition | zoom-in-left-transition | zoom-in-right-transition
* @default zoom-in-center-transition
* @name transition
*/
transition: {
type: StringConstructor;
default: string;
};
/**
* The header of the modal
* @type string | VNode | VNode[]
* @default undefined
* @name header
*/
header: {
type: PropType<StringOrRenderableType>;
default: undefined;
};
/**
* The icon of the modal
* @type string | VNode | VNode[]
* @default undefined
* @name icon
*/
icon: {
type: PropType<StringOrRenderableType>;
default: undefined;
};
/**
* The body of the modal
* @type string | VNode | VNode[]
* @default undefined
* @name body
*/
body: {
type: PropType<StringOrRenderableType>;
default: undefined;
};
/**
* The footer of the modal
* @type string | VNode | VNode[]
* @default undefined
* @name footer
*/
footer: {
type: PropType<StringOrRenderableType>;
default: undefined;
};
}>> & {
"onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
onClose?: ((...args: any[]) => any) | undefined;
onOpen?: ((...args: any[]) => any) | undefined;
onOpened?: ((...args: any[]) => any) | undefined;
onClosed?: ((...args: any[]) => any) | undefined;
}, {
color: string;
size: string;
name: string;
body: StringOrRenderableType;
footer: StringOrRenderableType;
header: StringOrRenderableType;
disabled: boolean;
modelValue: boolean;
dismissible: boolean;
icon: StringOrRenderableType;
fullscreen: boolean;
closeOnPressEscape: boolean;
closeAriaLabel: string;
hideOnClickOutside: boolean;
transition: string;
}, {}>;
export default _default;