layui/package/component/es/step/index.js

import { w as withInstall } from "../badge/index2.js";
import { defineComponent, ref, watch, provide, openBlock, createElementBlock, normalizeClass, renderSlot } from "vue";
var index = /* @__PURE__ */ (() => '.lay-step{display:flex;flex-wrap:nowrap}.lay-step .lay-step-item{flex-grow:1;position:relative}.lay-step .is-item-center{text-align:center}.lay-step .lay-step-item-last{flex-grow:0!important}.lay-step .lay-step-item-pace{position:relative;z-index:10;cursor:pointer;width:24px;height:24px;border:1px #8d8d8d solid;border-radius:50%;text-align:center;line-height:24px;background:#ffffff}.lay-step .is-center{margin:0 auto}.lay-step .lay-step-item-active{border:1px #5fb878 solid;color:#5fb878}.lay-step .lay-step-item-wait{border:1px #000000 solid;color:#000}.lay-step .lay-step-item--success{border:1px #5fb878 solid;color:#fff;background:#5fb878}.lay-step .lay-step-item--fail{border:1px #ff5722 solid;color:#fff;background:#ff5722}.lay-step .lay-step-item--warning{border:1px #ffb800 solid;color:#fff;background:#ffb800}.lay-step .lay-step-item--primary{border:1px #1e9fff solid;color:#fff;background:#1e9fff}.lay-step .lay-step-item-success{border:1px #5fb878 solid;color:#fff;background:#5fb878}.lay-step .lay-step-item-fail{border:1px #ff5722 solid;color:#fff;background:#ff5722}.lay-step .lay-step-item-warning{border:1px #ffb800 solid;color:#fff;background:#ffb800}.lay-step .lay-step-item-primary{border:1px #1e9fff solid;color:#fff;background:#1e9fff}.lay-step .lay-step-item-content{color:#8d8d8d;cursor:pointer}.lay-step .lay-step-item-content .lay-step-item-content-title{font-weight:700;font-size:16px}.lay-step .lay-step-item-content-row{color:#8d8d8d;position:absolute;top:5px;left:24px;width:calc(100% - 26px)}.lay-step .lay-step-item-content-row .lay-step-item-content-title{word-wrap:break-word;max-width:calc(100% - 8px);font-weight:700;display:inline-block;margin-left:2px;background:#ffffff;padding:0 8px;font-size:16px}.lay-step .lay-step-item-content-active,.lay-step .lay-step-item-content--success{color:#5fb878}.lay-step .lay-step-item-content--fail{color:#ff5722}.lay-step .lay-step-item-content--warning{color:#ffb800}.lay-step .lay-step-item-content--primary{color:#1e9fff}.lay-step .lay-step-item-content-wait{color:#000}.lay-step .lay-step-item-content-success{color:#5fb878}.lay-step .lay-step-item-content-fail{color:#ff5722}.lay-step .lay-step-item-content-warning{color:#ffb800}.lay-step .lay-step-item-content-primary{color:#1e9fff}.lay-step .lay-step-item-line{position:relative}.lay-step .lay-step-item-line:before{content:"";position:absolute;top:50%;display:block;height:1px;width:100%;background:#c9c5c5}.lay-step .is-line-center:before{left:50%}.lay-step .lay-step-item-line-active:before{transition:background .15s;background:#5fb878!important}.lay-step .lay-step-item-line-fail:before{transition:background .15s;background:#ff5722!important}.lay-step .lay-step-item-line-warning:before{transition:background .15s;background:#ffb800!important}.lay-step .lay-step-item-line-primary:before{transition:background .15s;background:#1e9fff!important}.lay-step .lay-step-simple{height:30px;padding:0 8px;line-height:30px;color:#fff;background-color:#cecece;cursor:pointer}.lay-step .lay-step-item-simple{padding:0 18px}.lay-step .lay-step-item-simple:after{content:"";position:absolute;top:0;left:0;right:auto;bottom:auto;border:15px solid;border-color:transparent transparent transparent #cecece;background-color:transparent;border-radius:0;display:block;height:auto;width:auto}.lay-step .lay-step-item-simple:before{content:"";position:absolute;top:0;left:0;right:auto;bottom:auto;border:15px solid;border-color:transparent transparent transparent #cecece;background-color:transparent;border-radius:0;display:block;height:auto;width:auto}.lay-step .lay-step-item-simple-border:before{left:1px;border-color:transparent transparent transparent #ffffff}.lay-step .lay-step-item-simple-active{background-color:#9fd4ae}.lay-step .lay-step-item-simple-success{background-color:#5fb878}.lay-step .lay-step-item-simple-fail{background-color:#ff5722}.lay-step .lay-step-item-simple-warning{background-color:#ffb800}.lay-step .lay-step-item-simple-primary{background-color:#1e9fff}.lay-step .lay-step-item-simple-active-border:after{border-color:transparent transparent transparent #9fd4ae!important}.lay-step .lay-step-item-simple-success-border:after{border-color:transparent transparent transparent #5fb878!important}.lay-step .lay-step-item-simple-fail-border:after{border-color:transparent transparent transparent #ff5722!important}.lay-step .lay-step-item-simple-warning-border:after{border-color:transparent transparent transparent #ffb800!important}.lay-step .lay-step-item-simple-primary-border:after{border-color:transparent transparent transparent #1e9fff!important}.lay-step-column{height:100%;flex-flow:column}.lay-step-column .lay-step-item-line{position:relative;height:100%;width:24px}.lay-step-column .lay-step-item-line:before{content:"";position:absolute;top:0;left:50%;display:block;width:1px;height:100%;background:#c9c5c5}.lay-step-column .lay-step-item-content{margin-left:8px}.lay-step-column .is-vertical{display:flex}\n')();
const __default__ = {
  name: "LayStep"
};
const _sfc_main = defineComponent({
  ...__default__,
  props: {
    active: { default: 0 },
    center: { type: Boolean, default: false },
    direction: { default: "horizontal" },
    space: { default: "auto" },
    currentStatus: { default: "success" },
    composition: { default: "default" },
    simple: { type: Boolean, default: false }
  },
  emits: ["onChange"],
  setup(__props, { emit: emits }) {
    const props = __props;
    const steps = ref([]);
    const change = (index2) => {
      emits("onChange", index2 - 1);
    };
    watch(steps, () => {
      steps.value.forEach((instance, index2) => {
        instance.setIndex(index2);
      });
    });
    provide("LayStep", {
      props,
      steps,
      change
    });
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", {
        class: normalizeClass(["lay-step", __props.direction !== "vertical" ? "" : "lay-step-column"])
      }, [
        renderSlot(_ctx.$slots, "default")
      ], 2);
    };
  }
});
const component = withInstall(_sfc_main);
export { component as default };