@ctsy/layui-vue
Version:
a component library for Vue 3 base on layui-vue
183 lines (182 loc) • 7.69 kB
JavaScript
var __defProp = Object.defineProperty;
var __defProps = Object.defineProperties;
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __propIsEnum = Object.prototype.propertyIsEnumerable;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __spreadValues = (a, b) => {
for (var prop in b || (b = {}))
if (__hasOwnProp.call(b, prop))
__defNormalProp(a, prop, b[prop]);
if (__getOwnPropSymbols)
for (var prop of __getOwnPropSymbols(b)) {
if (__propIsEnum.call(b, prop))
__defNormalProp(a, prop, b[prop]);
}
return a;
};
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
import { defineComponent, ref, inject, getCurrentInstance, computed, reactive, onMounted, onBeforeUnmount, resolveComponent, unref, openBlock, createElementBlock, normalizeClass, normalizeStyle, createElementVNode, renderSlot, createBlock, Fragment, toDisplayString, createTextVNode } from "vue";
const _hoisted_1 = { key: 0 };
const _hoisted_2 = { class: "lay-step-item-content-title" };
const __default__ = {
name: "LayStepItem"
};
const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__), {
props: {
title: { default: "" },
content: { default: "" },
icon: { default: "" },
status: { default: "" }
},
setup(__props) {
const index = ref(-1);
const parents = inject("LayStep");
const currentInstance = getCurrentInstance();
const setIndex = (val) => {
index.value = val;
};
const onChange = (index2) => {
parents.change(index2);
};
const stepsCount = computed(() => {
return parents.steps.value.length;
});
const currentStatus = computed(() => {
return parents.props.currentStatus;
});
const simple = computed(() => {
return parents.props.simple;
});
const composition = computed(() => {
return parents.props.composition;
});
const isCurrent = computed(() => {
return parents.props.active;
});
const isCurrentBorder = computed(() => {
return parents.props.active + 1;
});
const space = computed(() => {
return parents.props.space;
});
const isVertical = computed(() => {
return parents.props.direction === "vertical";
});
const isCenter = computed(() => {
return parents.props.center;
});
const isLineActive = computed(() => {
return index.value <= parents.props.active - 1;
});
const isWait = computed(() => {
return index.value === parents.props.active + 1;
});
const isSimpleActive = computed(() => {
return index.value - 1 <= parents.props.active;
});
const isActive = computed(() => {
return index.value <= parents.props.active;
});
const isLast = computed(() => {
var _a;
return ((_a = parents.steps.value[stepsCount.value - 1]) == null ? void 0 : _a.itemId) === currentInstance.uid;
});
const isStart = computed(() => {
var _a;
return ((_a = parents.steps.value[0]) == null ? void 0 : _a.itemId) === currentInstance.uid;
});
const stepItemState = reactive({
itemId: computed(() => currentInstance == null ? void 0 : currentInstance.uid),
setIndex
});
parents.steps.value = [...parents.steps.value, stepItemState];
onMounted(() => {
});
onBeforeUnmount(() => {
parents.steps.value = parents.steps.value.filter((instance) => instance.itemId !== currentInstance.uid);
});
return (_ctx, _cache) => {
const _component_lay_icon = resolveComponent("lay-icon");
return !unref(simple) ? (openBlock(), createElementBlock("div", {
key: 0,
class: normalizeClass([
"lay-step-item",
unref(isLast) && !unref(isCenter) && unref(composition) !== "row" ? "lay-step-item-last" : "",
unref(isCenter) ? "is-item-center" : "",
unref(isVertical) ? "is-vertical" : ""
]),
style: normalizeStyle({ flexBasis: unref(space), flexGrow: unref(space) === "auto" ? 1 : 0 })
}, [
createElementVNode("div", {
class: normalizeClass([
!unref(isLast) ? unref(isLineActive) ? `lay-step-item-line lay-step-item-line-${__props.status || "active"}` : "lay-step-item-line" : "",
unref(isCenter) ? "is-line-center" : ""
])
}, [
createElementVNode("div", {
class: normalizeClass([
"lay-step-item-pace",
unref(isActive) ? `lay-step-item-active` : "",
unref(isCurrent) === index.value ? `lay-step-item--${unref(currentStatus)}` : "",
__props.status ? `lay-step-item-${__props.status}` : "",
unref(isWait) ? "lay-step-item-wait" : "",
unref(isCenter) ? "is-center" : ""
]),
onClick: _cache[0] || (_cache[0] = ($event) => onChange(index.value + 1))
}, [
renderSlot(_ctx.$slots, "pace", {}, () => [
__props.icon ? (openBlock(), createBlock(_component_lay_icon, {
key: 0,
type: __props.icon
}, null, 8, ["type"])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
!unref(isActive) ? (openBlock(), createElementBlock("span", _hoisted_1, toDisplayString(index.value + 1), 1)) : (openBlock(), createBlock(_component_lay_icon, {
key: 1,
type: __props.status === "fail" ? "layui-icon-close" : "layui-icon-ok"
}, null, 8, ["type"]))
], 64))
])
], 2)
], 2),
createElementVNode("div", {
class: normalizeClass([
"lay-step-item-content",
unref(composition) === "row" ? "lay-step-item-content-row" : "",
unref(isActive) ? `lay-step-item-content-active` : "",
unref(isCurrent) === index.value ? `lay-step-item-content--${unref(currentStatus)}` : "",
__props.status ? `lay-step-item-content-${__props.status}` : "",
unref(isWait) ? "lay-step-item-content-wait" : ""
]),
onClick: _cache[1] || (_cache[1] = ($event) => onChange(index.value + 1))
}, [
renderSlot(_ctx.$slots, "default", {}, () => [
createElementVNode("div", _hoisted_2, toDisplayString(__props.title), 1),
createElementVNode("p", null, toDisplayString(__props.content), 1)
])
], 2)
], 6)) : (openBlock(), createElementBlock("div", {
key: 1,
class: normalizeClass([
"lay-step-item",
"lay-step-simple",
!unref(isStart) ? "lay-step-item-simple" : "",
"lay-step-item-simple-border",
unref(isActive) ? "lay-step-item-simple-active" : "",
unref(isCurrent) === index.value ? `lay-step-item-simple-${unref(currentStatus)}` : "",
unref(isCurrentBorder) === index.value ? `lay-step-item-simple-${unref(currentStatus)}-border` : "",
unref(isSimpleActive) ? "lay-step-item-simple-active-border" : ""
]),
onClick: _cache[2] || (_cache[2] = ($event) => onChange(index.value + 1))
}, [
renderSlot(_ctx.$slots, "default", {}, () => [
createTextVNode(toDisplayString(index.value + 1) + "." + toDisplayString(__props.title), 1)
])
], 2));
};
}
}));
_sfc_main.install = (app) => {
app.component(_sfc_main.name, _sfc_main);
};
export { _sfc_main as default };