'use strict';

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

var vue = require('vue');
var props = require('./props.cjs');
var utils = require('./utils.cjs');

var Steps = /* @__PURE__ */ vue.defineComponent({
  compatConfig: {
    MODE: 3
  },
  name: "ProgressSteps",
  props: props.progressStepsProps(),
  setup(props, {
    slots
  }) {
    const current = vue.computed(() => Math.round(props.steps * ((props.percent || 0) / 100)));
    const mergedSize = vue.computed(() => {
      var _a;
      return (_a = props.size) != null ? _a : [props.size === "small" ? 2 : 14, props.strokeWidth || 8];
    });
    const sizeRef = vue.computed(() => utils.getSize(mergedSize.value, "step", {
      steps: props.steps,
      strokeWidth: props.strokeWidth || 8
    }));
    const styledSteps = vue.computed(() => {
      const {
        steps,
        strokeColor,
        trailColor,
        prefixCls
      } = props;
      const temp = [];
      for (let i = 0; i < steps; i += 1) {
        const color = Array.isArray(strokeColor) ? strokeColor[i] : strokeColor;
        const cls = {
          [`${prefixCls}-steps-item`]: true,
          [`${prefixCls}-steps-item-active`]: i <= current.value - 1
        };
        temp.push(vue.createVNode("div", {
          "key": i,
          "class": cls,
          "style": {
            backgroundColor: i <= current.value - 1 ? color : trailColor,
            width: `${sizeRef.value.width / steps}px`,
            height: `${sizeRef.value.height}px`
          }
        }, null));
      }
      return temp;
    });
    return () => {
      var _a;
      return vue.createVNode("div", {
        "class": `${props.prefixCls}-steps-outer`
      }, [styledSteps.value, (_a = slots.default) == null ? void 0 : _a.call(slots)]);
    };
  }
});

exports.default = Steps;
//# sourceMappingURL=Steps.cjs.map
