layui-vue/es/stepItem/index.js

import { w as withInstall } from "../badge/index2.js";
import { defineComponent, ref, inject, getCurrentInstance, computed, reactive, onMounted, onBeforeUnmount, unref, openBlock, createElementBlock, normalizeClass, normalizeStyle, createElementVNode, renderSlot, createBlock, Fragment, toDisplayString, createTextVNode } from "vue";
import { _ as _sfc_main$2W } from "../_chunks/@layui/index.js";
const _hoisted_1 = { key: 0 };
const _hoisted_2 = { class: "lay-step-item-content-title" };
const __default__ = {
  name: "LayStepItem"
};
const _sfc_main = defineComponent({
  ...__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) => {
      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(unref(_sfc_main$2W), {
                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(unref(_sfc_main$2W), {
                  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));
    };
  }
});
const component = withInstall(_sfc_main);
export { component as default };