song-ui-u/lib/components/steps/src/steps-item.cjs

vue3 + js的PC前端组件库

'use strict';

var vue = require('vue');
var index = require('../../../hook/use-namespace/index.cjs');
require('song-ui-pro-icon');
require('../../../hook/use-zindex/index.cjs');

var stepsItem = /* @__PURE__ */ vue.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 = index.useNamespace("steps-item");
    const isActive = vue.computed(() => {
      return props.active >= props.index;
    });
    const isProcess = vue.computed(() => {
      return props.active + 1 == props.index;
    });
    const stateLine = vue.computed(() => {
      if (props.active == props.index) {
        return "middle";
      } else if (props.active > props.index) {
        return "finish";
      }
    });
    return () => vue.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)]
    }, [vue.createVNode("div", {
      "class": [ns.e("head"), ns.m("direction", props.direction)]
    }, [vue.createVNode("div", {
      "class": ns.e("text-wrapper")
    }, [slots.default ? slots.default() : vue.createVNode("div", {
      "class": ns.e("text")
    }, [props.index]), props.direction === "vertical" && vue.createVNode("div", {
      "class": [ns.e("line"), ns.m("line", props.direction), ns.m("state", stateLine.value)]
    }, null)]), props.direction === "horizontal" && vue.createVNode("div", {
      "class": [ns.e("line"), ns.m("state", stateLine.value)]
    }, null)]), vue.createVNode("div", {
      "class": ns.e("main")
    }, [vue.createVNode("div", {
      "class": ns.e("title")
    }, [props.title]), vue.createVNode("div", {
      "class": ns.e("desc")
    }, [props.description])])]);
  }
});

module.exports = stepsItem;
//# sourceMappingURL=steps-item.cjs.map