@nuxtwind/components
Version:
Component Library for Nuxt 3 using TailwindCSS
524 lines (523 loc) • 11.8 kB
TypeScript
export interface ButtonConfig {
color: {
bg: string;
text: string;
border: string;
hover: string;
iconHover: string;
loadingCircle: string;
loadingCircleDark: string;
loadingCircleProgress: string;
loadingCircleProgressDark: string;
loadingCircleCutout: string;
};
rounded: string;
grow: {
delay: string;
scale: string;
};
link: object | string;
target: string;
disabled: boolean;
icon: boolean;
loading: boolean;
outlined: boolean | string;
shadow: string;
transition: {
duration: string;
ease: string;
};
dense: boolean;
ariLabel: string;
type: 'button' | 'submit' | 'reset';
width: string;
height: string;
}
export interface BadgeConfig {
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 AppbarConfig {
color: {
bg: string;
navigationIcon: string;
navigationIconHover: string;
};
fixed: boolean;
absolute: boolean;
sticky: boolean;
bottom: boolean;
extension: boolean;
shrinkOnScroll: boolean;
elevateOnScroll: boolean;
scrollOffset: number | undefined;
navigationIcon: boolean | object;
zIndex: string;
height: string;
target: string;
}
export interface CarouselConfig {
autoPlay: boolean;
timeout: number;
disableAutoPlayOnHover: boolean;
hideNavigation: boolean;
hidePagination: boolean;
shadow: string;
transition: {
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 CheckboxConfig {
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 CheckboxgroupConfig {
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 DrawerConfig {
color: {
bg: string;
overlayBg: string;
};
absolute: boolean;
fixed: boolean;
zIndex: string;
overlay: boolean;
disableOverflow: boolean;
expandOnHover: {
width: string;
hoverWidth: string;
};
transition: {
duration: string;
ease: string;
};
noMobile: boolean;
mobileWidth: number;
border: string;
right: boolean;
permanent: boolean;
height: string;
width: string;
}
export interface ProgressConfig {
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: {
size: string;
cutout: {
size: string;
text: string;
};
};
loading: boolean;
initialLoadTime: number;
initialLoadTimeType: 'calc' | 'static';
transition: {
duration: string;
ease: string;
};
rounded: string;
}
export interface SelectConfig {
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: {
duration: string;
ease: string;
placeholder: {
duration: string;
ease: string;
};
};
shadow: string;
appendIcon?: object;
prependIcon?: object;
clearable: boolean;
width: {
textfield: string;
select: string;
};
height: string;
displayProperty?: string;
}
export interface SkeletonConfig {
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 SliderConfig {
color: {
label: string;
description: string;
sliderLine: string;
sliderThumb: string;
sliderThumbDark: string;
sliderThumbBorder: string;
sliderThumbBorderDark: string;
};
label: string;
description: string;
min: number;
max: number;
thumbSize: number;
rounded: string;
width: string;
height: string;
disabled: boolean;
}
export interface TextareaConfig {
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: string;
outlined: string;
filled: string;
placeholder: string;
hint: string;
shadow: string;
transition: {
duration: string;
ease: string;
placeholder: {
duration: string;
ease: string;
};
};
counter: boolean;
height: string;
width: string;
rules: {
(data: string): boolean | string;
}[];
}
export interface TextfieldConfig {
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: string;
outlined: string;
filled: string;
placeholder: string;
hint: string;
shadow: string;
type: string;
transition: {
duration: string;
ease: string;
placeholder: {
duration: string;
ease: string;
};
};
width: string;
rules: {
(data: string | number): boolean | string;
}[];
}
export interface ToastConfig {
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: string;
type: 'info' | 'warning' | 'error' | 'success';
title: string;
message: string;
shadow: string;
icon: object | boolean;
width: string;
}
export interface TooltipConfig {
color: {
text: string;
bg: string;
bgPointer: string;
};
top: boolean;
bottom: boolean;
left: boolean;
right: boolean;
transition: {
duration: string;
ease: string;
};
text: string;
rounded: string;
zIndex: string;
interactive: boolean;
width: string;
}