song-ui-u
Version:
vue3 + js的PC前端组件库
75 lines (72 loc) • 2.2 kB
JavaScript
import { defineComponent, computed, createVNode } from 'vue';
import { useNamespace } from '../../../hook/use-namespace/index.mjs';
import 'song-ui-pro-icon';
import '../../../hook/use-zindex/index.mjs';
var stepsItem = /* @__PURE__ */ defineComponent({
name: "x-steps-item",
props: {
title: {
type: String,
default: ""
},
description: {
type: String,
default: ""
},
index: {
type: Number,
default: 1
},
active: {
type: [String, Number],
default: 0
},
finishStatus: {
type: String,
default: ""
},
direction: {
type: String,
default: "horizontal"
}
},
setup(props, {
slots
}) {
const ns = useNamespace("steps-item");
const isActive = computed(() => {
return props.active >= props.index;
});
const isProcess = computed(() => {
return props.active + 1 == props.index;
});
const stateLine = computed(() => {
if (props.active == props.index) {
return "middle";
} else if (props.active > props.index) {
return "finish";
}
});
return () => createVNode("div", {
"class": [ns.b(), ns.is("active", isActive.value), ns.is("process", isProcess.value), ns.m("type", props.finishStatus), ns.m("direction", props.direction)]
}, [createVNode("div", {
"class": [ns.e("head"), ns.m("direction", props.direction)]
}, [createVNode("div", {
"class": ns.e("text-wrapper")
}, [slots.default ? slots.default() : createVNode("div", {
"class": ns.e("text")
}, [props.index]), props.direction === "vertical" && createVNode("div", {
"class": [ns.e("line"), ns.m("line", props.direction), ns.m("state", stateLine.value)]
}, null)]), props.direction === "horizontal" && createVNode("div", {
"class": [ns.e("line"), ns.m("state", stateLine.value)]
}, null)]), createVNode("div", {
"class": ns.e("main")
}, [createVNode("div", {
"class": ns.e("title")
}, [props.title]), createVNode("div", {
"class": ns.e("desc")
}, [props.description])])]);
}
});
export { stepsItem as default };
//# sourceMappingURL=steps-item.mjs.map