hongluan-ui/lib/components/steps/src/item2.js

Hongluan Component Library for Vue 3

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var vue = require('vue');
require('../../../hooks/index.js');
var index = require('../../icon/index.js');
require('../../system-icon/index.js');
var item = require('./item.js');
var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
var checked = require('../../system-icon/src/checked.js');
var close = require('../../system-icon/src/close.js');
var index$1 = require('../../../hooks/use-namespace/index.js');

const _sfc_main = vue.defineComponent({
  name: "Step",
  components: {
    HlIcon: index.HlIcon,
    SystemChecked: checked["default"],
    SystemClose: close["default"]
  },
  props: item.stepProps,
  setup(props) {
    const { namespace } = index$1.useNamespace("step");
    const index = vue.ref(-1);
    const internalStatus = vue.ref("");
    const parent = vue.inject("Steps");
    const currentInstance = vue.getCurrentInstance();
    vue.onMounted(() => {
      vue.watch([() => parent.props.active, () => parent.props.processStatus, () => parent.props.finishStatus], ([active]) => {
        updateStatus(active);
      }, { immediate: true });
    });
    vue.onBeforeUnmount(() => {
      parent.removeStep(stepItemState.uid);
    });
    const currentStatus = vue.computed(() => {
      return props.status || internalStatus.value;
    });
    const prevStatus = vue.computed(() => {
      const prevStep = parent.steps.value[index.value - 1];
      return prevStep ? prevStep.currentStatus : "wait";
    });
    const isCenter = vue.computed(() => {
      return parent.props.center;
    });
    const isVertical = vue.computed(() => {
      return parent.props.dir === "vertical";
    });
    const isInline = vue.computed(() => {
      return parent.props.dir === "inline";
    });
    const stepsCount = vue.computed(() => {
      return parent.steps.value.length;
    });
    const isLast = vue.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 = vue.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 = vue.resolveComponent("system-checked");
  const _component_hl_icon = vue.resolveComponent("hl-icon");
  const _component_system_close = vue.resolveComponent("system-close");
  return vue.openBlock(), vue.createElementBlock("div", {
    class: vue.normalizeClass([_ctx.namespace, `is-${_ctx.parent.props.dir}`, _ctx.isCenter && !_ctx.isVertical && !_ctx.isInline && "is-center", `is-${_ctx.currentStatus}`])
  }, [
    _ctx.isInline ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
      vue.createElementVNode("div", {
        class: vue.normalizeClass([
          "step-icon",
          `is-${_ctx.$slots.icon ? "icon" : "text"}`,
          _ctx.parent.props.round ? "round" : ""
        ])
      }, [
        _ctx.currentStatus !== "success" && _ctx.currentStatus !== "error" ? vue.renderSlot(_ctx.$slots, "icon", { key: 0 }, () => [
          !_ctx.$slots.icon ? (vue.openBlock(), vue.createElementBlock("div", {
            key: 0,
            class: "icon-inner"
          }, vue.toDisplayString(_ctx.index + 1), 1)) : vue.createCommentVNode("v-if", true)
        ]) : _ctx.currentStatus == "success" ? vue.renderSlot(_ctx.$slots, "success-icon", { key: 1 }, () => [
          vue.createVNode(_component_hl_icon, {
            class: vue.normalizeClass(["icon-inner", "is-status"])
          }, {
            default: vue.withCtx(() => [
              vue.createVNode(_component_system_checked)
            ]),
            _: 1
          })
        ]) : _ctx.currentStatus == "error" ? vue.renderSlot(_ctx.$slots, "error-icon", { key: 2 }, () => [
          vue.createVNode(_component_hl_icon, {
            class: vue.normalizeClass(["icon-inner", "is-status"])
          }, {
            default: vue.withCtx(() => [
              vue.createVNode(_component_system_close)
            ]),
            _: 1
          })
        ]) : vue.createCommentVNode("v-if", true)
      ], 2),
      vue.createElementVNode("div", { class: "step-main" }, [
        vue.createElementVNode("div", { class: "step-head" }, [
          vue.createElementVNode("div", { class: "step-title" }, [
            vue.renderSlot(_ctx.$slots, "title", {}, () => [
              vue.createTextVNode(vue.toDisplayString(_ctx.title), 1)
            ])
          ]),
          vue.createElementVNode("div", { class: "step-line" }, [
            vue.renderSlot(_ctx.$slots, "line", {}, () => [
              vue.createElementVNode("hr")
            ])
          ])
        ]),
        _ctx.description || _ctx.$slots.description ? (vue.openBlock(), vue.createElementBlock("div", {
          key: 0,
          class: "step-description"
        }, [
          vue.renderSlot(_ctx.$slots, "description", {}, () => [
            vue.createTextVNode(vue.toDisplayString(_ctx.description), 1)
          ])
        ])) : vue.createCommentVNode("v-if", true)
      ])
    ], 64)) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
      vue.createElementVNode("div", { class: "step-head" }, [
        vue.createElementVNode("div", {
          class: vue.normalizeClass([
            "step-icon",
            `is-${_ctx.$slots.icon ? "icon" : "text"}`,
            _ctx.parent.props.round ? "round" : ""
          ])
        }, [
          _ctx.currentStatus !== "success" && _ctx.currentStatus !== "error" ? vue.renderSlot(_ctx.$slots, "icon", { key: 0 }, () => [
            !_ctx.$slots.icon ? (vue.openBlock(), vue.createElementBlock("div", {
              key: 0,
              class: "icon-inner"
            }, vue.toDisplayString(_ctx.index + 1), 1)) : vue.createCommentVNode("v-if", true)
          ]) : _ctx.currentStatus == "success" ? vue.renderSlot(_ctx.$slots, "success-icon", { key: 1 }, () => [
            vue.createVNode(_component_hl_icon, {
              class: vue.normalizeClass(["icon-inner", "is-status"])
            }, {
              default: vue.withCtx(() => [
                vue.createVNode(_component_system_checked)
              ]),
              _: 1
            })
          ]) : _ctx.currentStatus == "error" ? vue.renderSlot(_ctx.$slots, "error-icon", { key: 2 }, () => [
            vue.createVNode(_component_hl_icon, {
              class: vue.normalizeClass(["icon-inner", "is-status"])
            }, {
              default: vue.withCtx(() => [
                vue.createVNode(_component_system_close)
              ]),
              _: 1
            })
          ]) : vue.createCommentVNode("v-if", true)
        ], 2),
        vue.createElementVNode("div", { class: "step-line" })
      ]),
      vue.createCommentVNode(" title & description "),
      vue.createElementVNode("div", { class: "step-main" }, [
        vue.createElementVNode("div", { class: "step-title" }, [
          vue.renderSlot(_ctx.$slots, "title", {}, () => [
            vue.createTextVNode(vue.toDisplayString(_ctx.title), 1)
          ])
        ]),
        _ctx.description || _ctx.$slots.description ? (vue.openBlock(), vue.createElementBlock("div", {
          key: 0,
          class: "step-description"
        }, [
          vue.renderSlot(_ctx.$slots, "description", {}, () => [
            vue.createTextVNode(vue.toDisplayString(_ctx.description), 1)
          ])
        ])) : vue.createCommentVNode("v-if", true)
      ])
    ], 64))
  ], 2);
}
var Step = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["render", _sfc_render]]);

exports["default"] = Step;
//# sourceMappingURL=item2.js.map