hongluan-ui
Version:
Hongluan Component Library for Vue 3
209 lines (206 loc) • 8.15 kB
JavaScript
import { defineComponent, ref, inject, getCurrentInstance, onMounted, watch, onBeforeUnmount, computed, reactive, resolveComponent, openBlock, createElementBlock, normalizeClass, Fragment, createElementVNode, renderSlot, toDisplayString, createCommentVNode, createVNode, withCtx, createTextVNode } from 'vue';
import '../../../hooks/index.mjs';
import { HlIcon } from '../../icon/index.mjs';
import '../../system-icon/index.mjs';
import { stepProps } from './item.mjs';
import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
import SystemChecked from '../../system-icon/src/checked.mjs';
import SystemClose from '../../system-icon/src/close.mjs';
import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
const _sfc_main = defineComponent({
name: "Step",
components: {
HlIcon,
SystemChecked,
SystemClose
},
props: stepProps,
setup(props) {
const { namespace } = useNamespace("step");
const index = ref(-1);
const internalStatus = ref("");
const parent = inject("Steps");
const currentInstance = getCurrentInstance();
onMounted(() => {
watch([() => parent.props.active, () => parent.props.processStatus, () => parent.props.finishStatus], ([active]) => {
updateStatus(active);
}, { immediate: true });
});
onBeforeUnmount(() => {
parent.removeStep(stepItemState.uid);
});
const currentStatus = computed(() => {
return props.status || internalStatus.value;
});
const prevStatus = computed(() => {
const prevStep = parent.steps.value[index.value - 1];
return prevStep ? prevStep.currentStatus : "wait";
});
const isCenter = computed(() => {
return parent.props.center;
});
const isVertical = computed(() => {
return parent.props.dir === "vertical";
});
const isInline = computed(() => {
return parent.props.dir === "inline";
});
const stepsCount = computed(() => {
return parent.steps.value.length;
});
const isLast = computed(() => {
var _a;
return ((_a = parent.steps.value[stepsCount.value - 1]) == null ? void 0 : _a.uid) === currentInstance.uid;
});
const setIndex = (val) => {
index.value = val;
};
const updateStatus = (activeIndex) => {
if (activeIndex > index.value) {
internalStatus.value = parent.props.finishStatus;
} else if (activeIndex === index.value && prevStatus.value !== "error") {
internalStatus.value = parent.props.processStatus;
} else {
internalStatus.value = "wait";
}
};
const stepItemState = reactive({
uid: currentInstance.uid,
currentStatus,
setIndex
});
parent.addStep(stepItemState);
return {
namespace,
index,
currentStatus,
isCenter,
isVertical,
isInline,
isLast,
parent,
setIndex,
updateStatus
};
}
});
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_system_checked = resolveComponent("system-checked");
const _component_hl_icon = resolveComponent("hl-icon");
const _component_system_close = resolveComponent("system-close");
return openBlock(), createElementBlock("div", {
class: normalizeClass([_ctx.namespace, `is-${_ctx.parent.props.dir}`, _ctx.isCenter && !_ctx.isVertical && !_ctx.isInline && "is-center", `is-${_ctx.currentStatus}`])
}, [
_ctx.isInline ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
createElementVNode("div", {
class: normalizeClass([
"step-icon",
`is-${_ctx.$slots.icon ? "icon" : "text"}`,
_ctx.parent.props.round ? "round" : ""
])
}, [
_ctx.currentStatus !== "success" && _ctx.currentStatus !== "error" ? renderSlot(_ctx.$slots, "icon", { key: 0 }, () => [
!_ctx.$slots.icon ? (openBlock(), createElementBlock("div", {
key: 0,
class: "icon-inner"
}, toDisplayString(_ctx.index + 1), 1)) : createCommentVNode("v-if", true)
]) : _ctx.currentStatus == "success" ? renderSlot(_ctx.$slots, "success-icon", { key: 1 }, () => [
createVNode(_component_hl_icon, {
class: normalizeClass(["icon-inner", "is-status"])
}, {
default: withCtx(() => [
createVNode(_component_system_checked)
]),
_: 1
})
]) : _ctx.currentStatus == "error" ? renderSlot(_ctx.$slots, "error-icon", { key: 2 }, () => [
createVNode(_component_hl_icon, {
class: normalizeClass(["icon-inner", "is-status"])
}, {
default: withCtx(() => [
createVNode(_component_system_close)
]),
_: 1
})
]) : createCommentVNode("v-if", true)
], 2),
createElementVNode("div", { class: "step-main" }, [
createElementVNode("div", { class: "step-head" }, [
createElementVNode("div", { class: "step-title" }, [
renderSlot(_ctx.$slots, "title", {}, () => [
createTextVNode(toDisplayString(_ctx.title), 1)
])
]),
createElementVNode("div", { class: "step-line" }, [
renderSlot(_ctx.$slots, "line", {}, () => [
createElementVNode("hr")
])
])
]),
_ctx.description || _ctx.$slots.description ? (openBlock(), createElementBlock("div", {
key: 0,
class: "step-description"
}, [
renderSlot(_ctx.$slots, "description", {}, () => [
createTextVNode(toDisplayString(_ctx.description), 1)
])
])) : createCommentVNode("v-if", true)
])
], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
createElementVNode("div", { class: "step-head" }, [
createElementVNode("div", {
class: normalizeClass([
"step-icon",
`is-${_ctx.$slots.icon ? "icon" : "text"}`,
_ctx.parent.props.round ? "round" : ""
])
}, [
_ctx.currentStatus !== "success" && _ctx.currentStatus !== "error" ? renderSlot(_ctx.$slots, "icon", { key: 0 }, () => [
!_ctx.$slots.icon ? (openBlock(), createElementBlock("div", {
key: 0,
class: "icon-inner"
}, toDisplayString(_ctx.index + 1), 1)) : createCommentVNode("v-if", true)
]) : _ctx.currentStatus == "success" ? renderSlot(_ctx.$slots, "success-icon", { key: 1 }, () => [
createVNode(_component_hl_icon, {
class: normalizeClass(["icon-inner", "is-status"])
}, {
default: withCtx(() => [
createVNode(_component_system_checked)
]),
_: 1
})
]) : _ctx.currentStatus == "error" ? renderSlot(_ctx.$slots, "error-icon", { key: 2 }, () => [
createVNode(_component_hl_icon, {
class: normalizeClass(["icon-inner", "is-status"])
}, {
default: withCtx(() => [
createVNode(_component_system_close)
]),
_: 1
})
]) : createCommentVNode("v-if", true)
], 2),
createElementVNode("div", { class: "step-line" })
]),
createCommentVNode(" title & description "),
createElementVNode("div", { class: "step-main" }, [
createElementVNode("div", { class: "step-title" }, [
renderSlot(_ctx.$slots, "title", {}, () => [
createTextVNode(toDisplayString(_ctx.title), 1)
])
]),
_ctx.description || _ctx.$slots.description ? (openBlock(), createElementBlock("div", {
key: 0,
class: "step-description"
}, [
renderSlot(_ctx.$slots, "description", {}, () => [
createTextVNode(toDisplayString(_ctx.description), 1)
])
])) : createCommentVNode("v-if", true)
])
], 64))
], 2);
}
var Step = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
export { Step as default };
//# sourceMappingURL=item2.mjs.map