import { isVNode, defineComponent, computed, ref, watch, createVNode, mergeProps, Transition, withDirectives, vShow } from 'vue';
import { getTransitionProps } from '../_util/components/transition.mjs';
import { getPropsSlot, flattenChildren } from '../_util/props-util/index.mjs';
import '../hooks/index.mjs';
import { isPresetColor } from '../_util/colors.mjs';
import PropTypes from '../_util/vue-types/index.mjs';
import classNames from '../_util/classNames.mjs';
import { cloneElement } from '../_util/vnode.mjs';
import { isNumeric } from '../_util/is.mjs';
import Ribbon from './Ribbon.mjs';
import ScrollNumber from './ScrollNumber.mjs';
import useStyle from './style/index.mjs';
import useConfigInject from '../config-provider/hooks/useConfigInject.mjs';

function _isSlot(s) {
  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
}
const badgeProps = () => ({
  /** Number to show in badge */
  count: PropTypes.any.def(null),
  showZero: {
    type: Boolean,
    default: void 0
  },
  /** Max count to show */
  overflowCount: {
    type: Number,
    default: 99
  },
  /** whether to show red dot without number */
  dot: {
    type: Boolean,
    default: void 0
  },
  prefixCls: String,
  scrollNumberPrefixCls: String,
  status: {
    type: String
  },
  size: {
    type: String,
    default: "default"
  },
  color: String,
  text: PropTypes.any,
  offset: Array,
  numberStyle: {
    type: Object,
    default: void 0
  },
  title: String
});
var Badge = /* @__PURE__ */ defineComponent({
  compatConfig: {
    MODE: 3
  },
  name: "ABadge",
  Ribbon,
  inheritAttrs: false,
  props: badgeProps(),
  slots: Object,
  setup(props, {
    slots,
    attrs
  }) {
    const {
      prefixCls,
      direction
    } = useConfigInject("badge", props);
    const [wrapSSR, hashId] = useStyle(prefixCls);
    const numberedDisplayCount = computed(() => {
      return props.count > props.overflowCount ? `${props.overflowCount}+` : props.count;
    });
    const isZero = computed(() => numberedDisplayCount.value === "0" || numberedDisplayCount.value === 0);
    const ignoreCount = computed(() => props.count === null || isZero.value && !props.showZero);
    const hasStatus = computed(() => (props.status !== null && props.status !== void 0 || props.color !== null && props.color !== void 0) && ignoreCount.value);
    const showAsDot = computed(() => props.dot && !isZero.value);
    const mergedCount = computed(() => showAsDot.value ? "" : numberedDisplayCount.value);
    const isHidden = computed(() => {
      const isEmpty = mergedCount.value === null || mergedCount.value === void 0 || mergedCount.value === "";
      return (isEmpty || isZero.value && !props.showZero) && !showAsDot.value;
    });
    const livingCount = ref(props.count);
    const displayCount = ref(mergedCount.value);
    const isDotRef = ref(showAsDot.value);
    watch([() => props.count, mergedCount, showAsDot], () => {
      if (!isHidden.value) {
        livingCount.value = props.count;
        displayCount.value = mergedCount.value;
        isDotRef.value = showAsDot.value;
      }
    }, {
      immediate: true
    });
    const isInternalColor = computed(() => isPresetColor(props.color, false));
    const statusCls = computed(() => ({
      [`${prefixCls.value}-status-dot`]: hasStatus.value,
      [`${prefixCls.value}-status-${props.status}`]: !!props.status,
      [`${prefixCls.value}-status-${props.color}`]: isInternalColor.value
    }));
    const statusStyle = computed(() => {
      if (props.color && !isInternalColor.value)
        return {
          background: props.color,
          color: props.color
        };
      else
        return {};
    });
    const scrollNumberCls = computed(() => ({
      [`${prefixCls.value}-dot`]: isDotRef.value,
      [`${prefixCls.value}-count`]: !isDotRef.value,
      [`${prefixCls.value}-count-sm`]: props.size === "small",
      [`${prefixCls.value}-multiple-words`]: !isDotRef.value && displayCount.value && displayCount.value.toString().length > 1,
      [`${prefixCls.value}-status-${props.status}`]: !!props.status,
      [`${prefixCls.value}-status-${props.color}`]: isInternalColor.value
    }));
    return () => {
      var _a, _b;
      const {
        offset,
        title,
        color
      } = props;
      const style = attrs.style;
      const text = getPropsSlot(slots, props, "text");
      const pre = prefixCls.value;
      const count = livingCount.value;
      let children = flattenChildren((_a = slots.default) == null ? void 0 : _a.call(slots));
      children = children.length ? children : null;
      const visible = !!(!isHidden.value || slots.count);
      const mergedStyle = (() => {
        if (!offset)
          return {
            ...style
          };
        const offsetStyle = {
          marginTop: isNumeric(offset[1]) ? `${offset[1]}px` : offset[1]
        };
        if (direction.value === "rtl")
          offsetStyle.left = `${parseInt(offset[0], 10)}px`;
        else
          offsetStyle.right = `${-parseInt(offset[0], 10)}px`;
        return {
          ...offsetStyle,
          ...style
        };
      })();
      const titleNode = title != null ? title : typeof count === "string" || typeof count === "number" ? count : void 0;
      const statusTextNode = visible || !text ? null : createVNode("span", {
        "class": `${pre}-status-text`
      }, [text]);
      const displayNode = typeof count === "object" || count === void 0 && slots.count ? cloneElement(count != null ? count : (_b = slots.count) == null ? void 0 : _b.call(slots), {
        style: mergedStyle
      }, false) : null;
      const badgeClassName = classNames(pre, {
        [`${pre}-status`]: hasStatus.value,
        [`${pre}-not-a-wrapper`]: !children,
        [`${pre}-rtl`]: direction.value === "rtl"
      }, attrs.class, hashId.value);
      if (!children && hasStatus.value) {
        const statusTextColor = mergedStyle.color;
        return wrapSSR(createVNode("span", mergeProps(attrs, {
          "class": badgeClassName,
          "style": mergedStyle
        }), [createVNode("span", {
          "class": statusCls.value,
          "style": statusStyle.value
        }, null), createVNode("span", {
          "style": {
            color: statusTextColor
          },
          "class": `${pre}-status-text`
        }, [text])]));
      }
      const transitionProps = getTransitionProps(children ? `${pre}-zoom` : "", {
        appear: false
      });
      let scrollNumberStyle = {
        ...mergedStyle,
        ...props.numberStyle
      };
      if (color && !isInternalColor.value) {
        scrollNumberStyle = scrollNumberStyle || {};
        scrollNumberStyle.background = color;
      }
      return wrapSSR(createVNode("span", mergeProps(attrs, {
        "class": badgeClassName
      }), [children, createVNode(Transition, transitionProps, {
        default: () => [withDirectives(createVNode(ScrollNumber, {
          "prefixCls": props.scrollNumberPrefixCls,
          "show": visible,
          "class": scrollNumberCls.value,
          "count": displayCount.value,
          "title": titleNode,
          "style": scrollNumberStyle,
          "key": "scrollNumber"
        }, _isSlot(displayNode) ? displayNode : {
          default: () => [displayNode]
        }), [[vShow, visible]])]
      }), statusTextNode]));
    };
  }
});

export { badgeProps, Badge as default };
//# sourceMappingURL=Badge.mjs.map
