maz-ui
Version:
A standalone components library for Vue.Js 3 & Nuxt.Js 3
116 lines (115 loc) • 3.42 kB
TypeScript
import type { Color } from './types';
import { type SVGAttributes } from 'vue';
type __VLS_Props = {
/**
* The percentage value of the progress bar
*/
percentage: number;
/**
* The size of the progress bar
* @default '10em' (equal 80px for a font-size of 16px)
*/
size?: string;
/**
* Duration of the animation in milliseconds
* @default 1000
*/
duration?: number;
/**
* Delay before the animation starts in milliseconds
* @default 100
*/
delay?: number;
/**
* The color of the progress bar
*/
color?: Color;
/**
* Auto color based on the count (danger, warning, success)
* @default false
*/
autoColor?: boolean;
/**
* Suffix to display next to the number
*/
prefix?: string;
/**
* Suffix to display next to the number
*/
suffix?: string;
/**
* The stroke-linecap style
* @default 'round'
* @values 'butt', 'round', 'square', 'inherit'
*/
strokeLinecap?: SVGAttributes['stroke-linecap'];
/**
* The stroke width
* @default 6
*/
strokeWidth?: SVGAttributes['width'];
/**
* The stroke color
* Use this prop to override the gradient color
* You can use a color name or a color code
*/
stroke?: SVGAttributes['stroke'];
/**
* The percentage value of the success level
* @description The progress circle will be filled with the success color when the percentage is greater than or equal to this value
* @default 100
*/
successPercentage?: number;
/**
* The percentage value of the warning level
* @description The progress circle will be filled with the warning color when the percentage is greater than or equal to this value
* @default 50
*/
warningPercentage?: number;
/**
* The percentage value of the danger level
* @description The progress circle will be filled with the danger color when the percentage is greater than or equal to this value
* @default 25
*/
dangerPercentage?: number;
/**
* Play the animation only once
* @default true
*/
once?: boolean;
};
declare function __VLS_template(): {
attrs: Partial<{}>;
slots: {
default?(_: {}): any;
prefix?(_: {}): any;
suffix?(_: {}): any;
};
refs: {
circleRef: SVGSVGElement;
};
rootEl: HTMLDivElement;
};
type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
size: string;
color: Color;
duration: number;
once: boolean;
prefix: string;
suffix: string;
stroke: string;
percentage: number;
strokeLinecap: "inherit" | "round" | "square" | "butt";
strokeWidth: string | number;
successPercentage: number;
warningPercentage: number;
dangerPercentage: number;
}, {}, {}, {}, 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;
};
};