@nuxtwind/components
Version:
Component Library for Nuxt 3 using TailwindCSS
533 lines (532 loc) • 12.7 kB
TypeScript
export interface ButtonProps {
color?: {
bg?: string;
text?: string;
border?: string;
hover?: string;
iconHover?: string;
loadingCircle?: string;
loadingCircleDark?: string;
loadingCircleProgress?: string;
loadingCircleProgressDark?: string;
loadingCircleCutout?: string;
};
rounded?: boolean | string;
grow?: boolean | {
delay?: string;
scale?: string;
};
link?: object | string;
target?: string;
disabled?: boolean;
icon?: boolean;
loading?: boolean;
outlined?: boolean | string;
shadow?: boolean | string;
transition?: boolean | {
duration?: string;
ease?: string;
};
dense?: boolean;
ariLabel?: string;
type?: 'button' | 'submit' | 'reset';
width?: string;
height?: string;
}
export interface BadgeProps {
color?: {
bg?: string;
border?: string;
text?: string;
};
top?: boolean;
bottom?: boolean;
right?: boolean;
left?: boolean;
text?: string;
border?: boolean | string;
width?: string;
height?: string;
}
export interface AppbarProps {
color?: {
bg?: string;
navigationIcon?: string;
navigationIconHover?: string;
};
fixed?: boolean;
absolute?: boolean;
sticky?: boolean;
bottom?: boolean;
extension?: boolean;
shrinkOnScroll?: boolean;
elevateOnScroll?: boolean;
scrollOffset?: number;
navigationIcon?: boolean | object;
zIndex?: string;
height?: string;
target?: string;
}
export interface CarouselProps {
modelValue?: number;
autoPlay?: boolean;
timeout?: number;
disableAutoPlayOnHover?: boolean;
hideNavigation?: boolean;
hidePagination?: boolean;
shadow?: boolean | string;
transition?: boolean | {
duration?: string;
delay?: string;
ease?: string;
};
navigation?: {
color?: {
bg?: string;
text?: string;
hover?: string;
};
icon?: {
left?: string;
right?: string;
};
size?: string;
rounded?: string;
opacity?: {
default?: string;
hover?: string;
};
};
pagination?: {
color?: {
active?: string;
inactive?: string;
hover?: string;
};
size?: string;
spacing?: string;
rounded?: string;
};
}
export interface CheckboxProps {
modelValue?: boolean;
color?: {
label?: string;
description?: string;
iconInactive?: string;
iconActive?: string;
hover?: string;
};
text?: {
label?: string;
description?: string;
};
label?: string;
description?: string;
radio?: boolean;
disabled?: boolean;
loading?: boolean;
}
export interface CheckboxgroupProps {
modelValue?: boolean[];
items?: {
label?: string;
description?: string;
color?: {
label?: string;
description?: string;
iconInactive?: string;
iconActive?: string;
hover?: string;
};
text?: {
label?: string;
description?: string;
};
disabled?: boolean;
loading?: boolean;
}[];
color?: {
label?: string;
description?: string;
};
text?: {
label?: string;
description?: string;
};
label?: string;
description?: string;
multiple?: boolean;
noRadio?: boolean;
loading?: boolean;
disabled?: boolean;
width?: string;
generalCheckboxProps?: {
label?: string;
description?: string;
color?: {
label?: string;
description?: string;
iconInactive?: string;
iconActive?: string;
hover?: string;
};
text?: {
label?: string;
description?: string;
};
disabled?: boolean;
loading?: boolean;
};
notZero?: boolean;
}
export interface DrawerProps {
modelValue?: boolean;
color?: {
bg?: string;
overlayBg?: string;
};
absolute?: boolean;
fixed?: boolean;
zIndex?: string;
overlay?: boolean;
disableOverflow?: boolean;
expandOnHover?: boolean | {
width?: string;
hoverWidth?: string;
};
transition?: boolean | {
duration?: string;
ease?: string;
};
noMobile?: boolean;
mobileWidth?: number;
border?: boolean | string;
right?: boolean;
permanent?: boolean;
height?: string;
width?: string;
}
export interface ProgressProps {
modelValue?: number;
size?: {
width?: string;
height?: string;
};
color?: {
circle?: string;
circleDark?: string;
circleProgress?: string;
circleProgressDark?: string;
circleCutout?: string;
background?: string;
firstStrike?: string;
secondStrike?: string;
linearProgress?: string;
linearProgressHover?: string;
};
circular?: boolean | {
size?: string;
cutout?: {
size?: string;
text?: string;
};
};
loading?: boolean;
initialLoadTime?: number | boolean;
initialLoadTimeType?: 'calc' | 'static';
transition?: boolean | {
duration?: string;
ease?: string;
};
rounded?: boolean | string;
}
export interface SelectProps {
modelValue?: string | object;
items?: string[] | object[];
color?: {
textfield?: {
bg?: string;
text?: string;
hint?: string;
error?: string;
label?: string;
labelFocus?: string;
placeholderText?: string;
icon?: string;
iconFocus?: string;
border?: string;
borderFocus?: string;
borderError?: string;
borderFocusError?: string;
};
bg?: string;
text?: string;
border?: string;
hover?: string;
};
font?: {
label?: string;
input?: string;
placeholder?: string;
hint?: string;
};
search?: boolean;
markOnFocus?: boolean;
showAllOnFocus?: boolean;
label?: string;
outlined?: boolean | string;
filled?: boolean | string;
disabled?: boolean;
loading?: boolean;
placeholder?: string;
transition?: boolean | {
duration?: string;
ease?: string;
placeholder?: {
duration?: string;
ease?: string;
};
};
shadow?: boolean | string;
appendIcon?: object;
prependIcon?: object;
clearable?: boolean;
width?: {
textfield?: string;
select?: string;
};
height?: string;
displayProperty?: string;
}
export interface SkeletonProps {
loading?: boolean;
tag?: string;
autoDetectRootTag?: boolean;
animationClass?: string;
tagOptions?: {
p?: {
gap?: string;
lines?: number;
lineHeight?: string;
color?: string;
rounded?: string;
};
article?: {
headingGap?: string;
headingHeight?: string;
headingRounded?: string;
gap?: string;
lines?: number;
lineHeight?: string;
color?: string;
rounded?: string;
};
img?: {
width?: string;
height?: string;
color?: string;
rounded?: string;
iconSize?: string;
iconColor?: string;
};
card?: {
imgHeight?: string;
headingHeight?: string;
imgRounded?: string;
headingRounded?: string;
imgIconColor?: string;
imgIconSize?: string;
imageAspect?: string;
color?: string;
gap?: string;
};
};
}
export interface SliderProps {
modelValue?: number;
color?: {
slider?: string;
description?: string;
sliderLine?: string;
sliderThumb?: string;
sliderThumbDark?: string;
sliderThumbBorder?: string;
sliderThumbBorderDark?: string;
};
label?: string;
description?: string;
min?: number;
max?: number;
thumbSize?: number;
rounded?: boolean | string;
width?: string;
height?: string;
disabled?: boolean;
}
export interface TextareaProps {
modelValue?: string;
color?: {
bg?: string;
text?: string;
hint?: string;
error?: string;
label?: string;
labelFocus?: string;
placeholderText?: string;
icon?: string;
iconFocus?: string;
border?: string;
borderFocus?: string;
borderError?: string;
borderFocusError?: string;
};
font?: {
label?: string;
input?: string;
placeholder?: string;
hint?: string;
};
label?: string;
autocomplete?: string;
prependIcon?: boolean | object;
appendIcon?: boolean | object;
disabled?: boolean;
loading?: boolean;
rounded?: boolean | string;
outlined?: boolean | string;
filled?: boolean | string;
placeholder?: string;
hint?: string;
shadow?: boolean | string;
transition?: boolean | {
duration?: string;
ease?: string;
placeholder?: {
duration?: string;
ease?: string;
};
};
counter?: boolean;
height?: string;
width?: string;
rules?: {
(data: string): boolean | string;
}[];
}
export interface TextfieldProps {
modelValue?: string | number;
color?: {
bg?: string;
text?: string;
hint?: string;
error?: string;
label?: string;
labelFocus?: string;
placeholderText?: string;
icon?: string;
iconFocus?: string;
border?: string;
borderFocus?: string;
borderError?: string;
borderFocusError?: string;
};
font?: {
label?: string;
input?: string;
placeholder?: string;
hint?: string;
};
label?: string;
autocomplete?: string;
prependIcon?: boolean | object;
appendIcon?: boolean | object;
clearable?: boolean;
disabled?: boolean;
loading?: boolean;
rounded?: boolean | string;
outlined?: boolean | string;
filled?: boolean | string;
placeholder?: string;
hint?: string;
shadow?: boolean | string;
type?: string;
transition?: boolean | {
duration?: string;
ease?: string;
placeholder?: {
duration?: string;
ease?: string;
};
};
width?: string;
rules?: {
(data: string | number): boolean | string;
}[];
}
export interface ToastProps {
id?: string;
color?: {
progress?: {
circle?: string;
circleDark?: string;
circleProgress?: string;
circleProgressDark?: string;
circleCutout?: string;
background?: string;
firstStrike?: string;
secondStrike?: string;
linearProgress?: string;
linearProgressHover?: string;
};
text?: string;
bg?: string;
icon?: {
info?: {
text?: string;
bg?: string;
};
warning?: {
text?: string;
bg?: string;
};
error?: {
text?: string;
bg?: string;
};
success?: {
text?: string;
bg?: string;
};
};
};
autoClose?: boolean;
duration?: number;
rounded?: boolean | string;
type?: 'info' | 'warning' | 'error' | 'success';
title?: string;
message?: string;
shadow?: boolean | string;
icon?: object;
width?: string;
}
export interface TooltipProps {
color?: {
text?: string;
bg?: string;
bgPointer?: string;
};
top?: boolean;
bottom?: boolean;
left?: boolean;
right?: boolean;
transition?: boolean | {
duration?: string;
ease?: string;
};
text?: string;
rounded?: boolean | string;
zIndex?: string;
interactive?: boolean;
width?: string;
}