import { defineComponent, computed, createVNode, Fragment } from 'vue';
import '../../../utils/index.mjs';
import { handleGradient, getSize, validProgress, getSuccessPercent } from './utils.mjs';
import { progressLineProps } from './props.mjs';
import { devWarning } from '../../../utils/log.mjs';

var Line = /* @__PURE__ */ defineComponent({
  compatConfig: {
    MODE: 3
  },
  name: "ProgressLine",
  inheritAttrs: false,
  props: progressLineProps(),
  setup(props, {
    slots,
    attrs
  }) {
    const backgroundProps = computed(() => {
      const {
        strokeColor,
        direction
      } = props;
      return strokeColor && typeof strokeColor !== "string" ? handleGradient(strokeColor, direction) : {
        backgroundColor: strokeColor
      };
    });
    const borderRadius = computed(() => props.strokeLinecap === "square" || props.strokeLinecap === "butt" ? 0 : void 0);
    const trailStyle = computed(() => props.trailColor ? {
      backgroundColor: props.trailColor
    } : void 0);
    const mergedSize = computed(() => {
      var _a;
      return (_a = props.size) != null ? _a : [-1, props.strokeWidth || (props.size === "small" ? 6 : 8)];
    });
    const sizeRef = computed(() => getSize(mergedSize.value, "line", {
      strokeWidth: props.strokeWidth
    }));
    if (process.env.NODE_ENV !== "production") {
      devWarning("strokeWidth" in props, "Progress", "`strokeWidth` is deprecated. Please use `size` instead.");
    }
    const percentStyle = computed(() => {
      const {
        percent
      } = props;
      return {
        width: `${validProgress(percent)}%`,
        height: `${sizeRef.value.height}px`,
        borderRadius: borderRadius.value,
        ...backgroundProps.value
      };
    });
    const successPercent = computed(() => {
      return getSuccessPercent(props);
    });
    const successPercentStyle = computed(() => {
      const {
        success
      } = props;
      return {
        width: `${validProgress(successPercent.value)}%`,
        height: `${sizeRef.value.height}px`,
        borderRadius: borderRadius.value,
        backgroundColor: success == null ? void 0 : success.strokeColor
      };
    });
    const outerStyle = {
      width: sizeRef.value.width < 0 ? "100%" : sizeRef.value.width,
      height: `${sizeRef.value.height}px`
    };
    return () => {
      var _a;
      return createVNode(Fragment, null, [createVNode("div", {
        ...attrs,
        "class": [`${props.prefixCls}-outer`, attrs.class],
        "style": [attrs.style, outerStyle]
      }, [createVNode("div", {
        "class": `${props.prefixCls}-inner`,
        "style": trailStyle.value
      }, [createVNode("div", {
        "class": `${props.prefixCls}-bg`,
        "style": percentStyle.value
      }, null), successPercent.value !== void 0 ? createVNode("div", {
        "class": `${props.prefixCls}-success-bg`,
        "style": successPercentStyle.value
      }, null) : null])]), (_a = slots.default) == null ? void 0 : _a.call(slots)]);
    };
  }
});

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