maz-ui
Version:
A standalone components library for Vue.Js 3 & Nuxt.Js 3
158 lines (157 loc) • 5 kB
TypeScript
import { IconComponent } from '@maz-ui/icons';
import { MazColor, MazSize } from './types';
export type MazTimelineColor = Exclude<MazColor, 'transparent'>;
export type MazTimelineDirection = 'horizontal' | 'vertical' | 'auto';
export type MazTimelineRoundedSize = 'none' | 'sm' | 'md' | 'base' | 'lg' | 'xl' | '2xl' | '3xl' | 'full';
export type MazTimelineStepState = 'completed' | 'active' | 'error' | 'warning' | 'pending';
export interface MazTimelineItem {
/**
* Title displayed below (horizontal) or beside (vertical) the step indicator
*/
title?: string;
/**
* Subtitle displayed below the title
*/
subtitle?: string;
/**
* Icon for the step indicator - can be a component or icon name string
* @type {IconComponent | string}
*/
icon?: IconComponent | string;
/**
* State of the step
* @type {MazTimelineStepState}
* @values `'completed' | 'active' | 'error' | 'warning' | 'pending'`
* @default 'pending'
*/
state?: MazTimelineStepState;
/**
* Whether the step is disabled (not clickable, visually muted)
* @default false
*/
disabled?: boolean;
}
export interface MazTimelineProps {
/**
* Index of the active step (v-model)
*/
modelValue?: number;
/**
* Array of timeline steps to display
* @required
*/
steps: MazTimelineItem[];
/**
* Layout direction of the timeline
* - `'horizontal'`: always horizontal
* - `'vertical'`: always vertical
* - `'auto'`: horizontal above breakpoint, vertical below
* @type {MazTimelineDirection}
* @values `'horizontal' | 'vertical' | 'auto'`
* @default 'auto'
*/
direction?: MazTimelineDirection;
/**
* CSS media breakpoint for auto direction (below this value → vertical)
* @default '768px'
*/
breakpoint?: string;
/**
* Color theme for active and completed steps
* @type {MazTimelineColor}
* @values `'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'destructive' | 'contrast'`
* @default 'primary'
*/
color?: MazTimelineColor;
/**
* Size of the step indicators and typography
* @type {MazSize}
* @values `'mini' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'`
* @default 'md'
*/
size?: MazSize;
/**
* Show step numbers inside the indicators
* @default true
*/
showStepNumbers?: boolean;
/**
* Automatically show a checkmark icon for completed steps
* @default true
*/
autoValidateSteps?: boolean;
/**
* Enable click interaction on steps
* @default false
*/
clickable?: boolean;
/**
* Enable animations (pulse on active, state transitions, connector progress)
* @default true
*/
animated?: boolean;
/**
* Border radius of step indicators
* @type {MazTimelineRoundedSize}
* @values `'none' | 'sm' | 'md' | 'base' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'`
* @default 'full'
*/
roundedSize?: MazTimelineRoundedSize;
}
declare function __VLS_template(): {
attrs: Partial<{}>;
slots: {
indicator?(_: {
step: MazTimelineItem;
index: number;
state: MazTimelineStepState;
isActive: boolean;
isCompleted: boolean;
}): any;
content?(_: {
step: MazTimelineItem;
index: number;
state: MazTimelineStepState;
isActive: boolean;
isCompleted: boolean;
}): any;
title?(_: {
step: MazTimelineItem;
index: number;
state: MazTimelineStepState;
}): any;
subtitle?(_: {
step: MazTimelineItem;
index: number;
state: MazTimelineStepState;
}): any;
connector?(_: {
index: number;
isCompleted: boolean;
isActive: boolean;
}): any;
};
refs: {};
rootEl: HTMLDivElement;
};
type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
declare const __VLS_component: import('vue').DefineComponent<MazTimelineProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
"update:modelValue": (value: number) => any;
"click-step": (payload: {
step: MazTimelineItem;
index: number;
}) => any;
}, string, import('vue').PublicProps, Readonly<MazTimelineProps> & Readonly<{
"onUpdate:modelValue"?: ((value: number) => any) | undefined;
"onClick-step"?: ((payload: {
step: MazTimelineItem;
index: number;
}) => any) | undefined;
}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
export default _default;
type __VLS_WithTemplateSlots<T, S> = T & {
new (): {
$slots: S;
};
};