import { defineComponent, computed, createVNode } from 'vue';
import { CheckOutlined, CloseOutlined } from '@ant-design/icons-vue';
import '../../../utils/index.mjs';
import '../../../vue-components/index.mjs';
import '../../../hooks/index.mjs';
import '../../../theme/index.mjs';
import useConfigInject from '../../config-provider/src/hooks/useConfigInject.mjs';
import { Progress } from '../../progress/index.mjs';
import { Tooltip } from '../../tooltip/index.mjs';
import useStyle from '../style/index.mjs';
import { stepsProps } from './props.mjs';
import { initDefaultProps } from '../../../utils/vue/initDefaultProps.mjs';
import { useToken } from '../../../theme/token/internal.mjs';
import { useBreakpoint } from '../../../hooks/use-breakpoint/index.mjs';
import { classNames } from '../../../utils/dom/class.mjs';
import VcSteps from '../../../vue-components/vc-steps/src/Steps.mjs';
import { omit } from '../../../utils/lang/omit.mjs';

var ASteps = /* @__PURE__ */ defineComponent({
  compatConfig: {
    MODE: 3
  },
  name: "ASteps",
  inheritAttrs: false,
  props: initDefaultProps(stepsProps(), {
    current: 0,
    responsive: true,
    labelPlacement: "horizontal"
  }),
  slots: Object,
  // emits: ['update:current', 'change'],
  setup(props, {
    attrs,
    slots,
    emit
  }) {
    const {
      prefixCls,
      direction: rtlDirection,
      configProvider
    } = useConfigInject("steps", props);
    const [wrapSSR, hashId] = useStyle(prefixCls);
    const [, token] = useToken();
    const screens = useBreakpoint();
    const direction = computed(() => props.responsive && screens.value.xs ? "vertical" : props.direction);
    const iconPrefix = computed(() => configProvider.getPrefixCls("", props.iconPrefix));
    const handleChange = (current) => {
      emit("update:current", current);
      emit("change", current);
    };
    const isInline = computed(() => props.type === "inline");
    const mergedPercent = computed(() => isInline.value ? void 0 : props.percent);
    const stepIconRender = ({
      node,
      status
    }) => {
      if (status === "process" && props.percent !== void 0) {
        const progressWidth = props.size === "small" ? token.value.controlHeight : token.value.controlHeightLG;
        const iconWithProgress = createVNode("div", {
          "class": `${prefixCls.value}-progress-icon`
        }, [createVNode(Progress, {
          "type": "circle",
          "percent": mergedPercent.value,
          "size": progressWidth,
          "strokeWidth": 4,
          "format": () => null
        }, null), node]);
        return iconWithProgress;
      }
      return node;
    };
    const icons = computed(() => ({
      finish: createVNode(CheckOutlined, {
        "class": `${prefixCls.value}-finish-icon`
      }, null),
      error: createVNode(CloseOutlined, {
        "class": `${prefixCls.value}-error-icon`
      }, null)
    }));
    return () => {
      const stepsClassName = classNames({
        [`${prefixCls.value}-rtl`]: rtlDirection.value === "rtl",
        [`${prefixCls.value}-with-progress`]: mergedPercent.value !== void 0
      }, attrs.class, hashId.value);
      const itemRender = (item, stepItem) => item.description ? createVNode(Tooltip, {
        "title": item.description
      }, {
        default: () => [stepItem]
      }) : stepItem;
      return wrapSSR(createVNode(VcSteps, {
        "icons": icons.value,
        ...attrs,
        ...omit(props, ["percent", "responsive"]),
        "items": props.items,
        "direction": direction.value,
        "prefixCls": prefixCls.value,
        "iconPrefix": iconPrefix.value,
        "class": stepsClassName,
        "onChange": handleChange,
        "isInline": isInline.value,
        "itemRender": isInline.value ? itemRender : void 0
      }, {
        stepIcon: stepIconRender,
        ...slots
      }));
    };
  }
});

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