import { defineComponent, computed, createVNode } from 'vue';
import { progressStepsProps } from './props.mjs';
import { getSize } from './utils.mjs';

var Steps = /* @__PURE__ */ defineComponent({
  compatConfig: {
    MODE: 3
  },
  name: "ProgressSteps",
  props: progressStepsProps(),
  setup(props, {
    slots
  }) {
    const current = computed(() => Math.round(props.steps * ((props.percent || 0) / 100)));
    const mergedSize = computed(() => {
      var _a;
      return (_a = props.size) != null ? _a : [props.size === "small" ? 2 : 14, props.strokeWidth || 8];
    });
    const sizeRef = computed(() => getSize(mergedSize.value, "step", {
      steps: props.steps,
      strokeWidth: props.strokeWidth || 8
    }));
    const styledSteps = 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(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 createVNode("div", {
        "class": `${props.prefixCls}-steps-outer`
      }, [styledSteps.value, (_a = slots.default) == null ? void 0 : _a.call(slots)]);
    };
  }
});

export { Steps as default };
//# sourceMappingURL=Steps.mjs.map
