67 lines
2.0 KiB
Vue
67 lines
2.0 KiB
Vue
import type { ExtractPropTypes } from 'vue';
|
|
import { computed, defineComponent } from 'vue';
|
|
import type { VueNode } from '../_util/type';
|
|
import { someType } from '../_util/type';
|
|
import type { ProgressSize } from './props';
|
|
import { progressProps } from './props';
|
|
import { getSize } from './utils';
|
|
|
|
export const stepsProps = () => ({
|
|
...progressProps(),
|
|
steps: Number,
|
|
strokeColor: someType<string | string[]>(),
|
|
trailColor: String,
|
|
});
|
|
|
|
export type StepsProps = Partial<ExtractPropTypes<ReturnType<typeof stepsProps>>>;
|
|
|
|
export default defineComponent({
|
|
compatConfig: { MODE: 3 },
|
|
name: 'Steps',
|
|
props: stepsProps(),
|
|
setup(props, { slots }) {
|
|
const current = computed(() => Math.round(props.steps * ((props.percent || 0) / 100)));
|
|
const mergedSize = computed(
|
|
() => props.size ?? [props.size === 'small' ? 2 : 14, props.strokeWidth || 8],
|
|
);
|
|
const sizeRef = computed(() =>
|
|
getSize(mergedSize.value as ProgressSize, 'step', {
|
|
steps: props.steps,
|
|
strokeWidth: props.strokeWidth || 8,
|
|
}),
|
|
);
|
|
|
|
const styledSteps = computed(() => {
|
|
const { steps, strokeColor, trailColor, prefixCls } = props;
|
|
|
|
const temp: VueNode[] = [];
|
|
for (let i = 0; i < steps; i += 1) {
|
|
const color = Array.isArray(strokeColor) ? strokeColor[i] : strokeColor;
|
|
const cls = {
|
|
[`${prefixCls}-steps-item`]: true,
|
|
[`${prefixCls}-steps-item-active`]: i <= current.value - 1,
|
|
};
|
|
temp.push(
|
|
<div
|
|
key={i}
|
|
class={cls}
|
|
style={{
|
|
backgroundColor: i <= current.value - 1 ? color : trailColor,
|
|
width: `${sizeRef.value.width / steps}px`,
|
|
height: `${sizeRef.value.height}px`,
|
|
}}
|
|
/>,
|
|
);
|
|
}
|
|
return temp;
|
|
});
|
|
|
|
return () => (
|
|
<div class={`${props.prefixCls}-steps-outer`}>
|
|
{styledSteps.value}
|
|
{slots.default?.()}
|
|
</div>
|
|
);
|
|
},
|
|
});
|