'use strict';

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

var vue = require('vue');
require('../../../utils/index.cjs');
require('../../../vue-components/index.cjs');
var useConfigInject = require('../../config-provider/src/hooks/useConfigInject.cjs');
var index = require('../style/index.cjs');
var ScrollNumber = require('./ScrollNumber.cjs');
var props = require('./props.cjs');
var color = require('../../../utils/color.cjs');
var props$1 = require('../../../utils/vue/props.cjs');
var is = require('../../../utils/is.cjs');
var vnode = require('../../../utils/vue/vnode.cjs');
var _class = require('../../../utils/dom/class.cjs');
var transition = require('../../../vue-components/transition/src/transition.cjs');

var ABadge = /* @__PURE__ */ vue.defineComponent({
  compatConfig: {
    MODE: 3
  },
  name: "ABadge",
  inheritAttrs: false,
  props: props.badgeProps(),
  slots: Object,
  setup(props, {
    slots,
    attrs
  }) {
    const {
      prefixCls,
      direction
    } = useConfigInject.default("badge", props);
    const [wrapSSR, hashId] = index.default(prefixCls);
    const numberedDisplayCount = vue.computed(() => {
      return props.count > props.overflowCount ? `${props.overflowCount}+` : props.count;
    });
    const isZero = vue.computed(() => numberedDisplayCount.value === "0" || numberedDisplayCount.value === 0);
    const ignoreCount = vue.computed(() => props.count === null || isZero.value && !props.showZero);
    const hasStatus = vue.computed(() => (props.status !== null && props.status !== void 0 || props.color !== null && props.color !== void 0) && ignoreCount.value);
    const showAsDot = vue.computed(() => props.dot && !isZero.value);
    const mergedCount = vue.computed(() => showAsDot.value ? "" : numberedDisplayCount.value);
    const isHidden = vue.computed(() => {
      const isEmpty = mergedCount.value === null || mergedCount.value === void 0 || mergedCount.value === "";
      return (isEmpty || isZero.value && !props.showZero) && !showAsDot.value;
    });
    const livingCount = vue.ref(props.count);
    const displayCount = vue.ref(mergedCount.value);
    const isDotRef = vue.ref(showAsDot.value);
    vue.watch([() => props.count, mergedCount, showAsDot], () => {
      if (!isHidden.value) {
        livingCount.value = props.count;
        displayCount.value = mergedCount.value;
        isDotRef.value = showAsDot.value;
      }
    }, {
      immediate: true
    });
    const isInternalColor = vue.computed(() => color.isPresetColor(props.color, false));
    const statusCls = vue.computed(() => ({
      [`${prefixCls.value}-status-dot`]: hasStatus.value,
      [`${prefixCls.value}-status-${props.status}`]: !!props.status,
      [`${prefixCls.value}-color-${props.color}`]: isInternalColor.value
    }));
    const statusStyle = vue.computed(() => {
      if (props.color && !isInternalColor.value)
        return {
          background: props.color,
          color: props.color
        };
      else
        return {};
    });
    const scrollNumberCls = vue.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}-color-${props.color}`]: isInternalColor.value
    }));
    return () => {
      var _a, _b;
      const {
        offset,
        title,
        color
      } = props;
      const style = attrs.style;
      const text = props$1.getPropsSlot(slots, props, "text");
      const pre = prefixCls.value;
      const count = livingCount.value;
      let children = props$1.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: is.isNumeric(offset[1]) ? `${offset[1]}px` : offset[1]
        };
        if (direction.value === "rtl")
          offsetStyle.left = `${Number.parseInt(offset[0], 10)}px`;
        else
          offsetStyle.right = `${-Number.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 : vue.createVNode("span", {
        "class": `${pre}-status-text`
      }, [text]);
      const displayNode = typeof count === "object" || count === void 0 && slots.count ? vnode.cloneElement(count != null ? count : (_b = slots.count) == null ? void 0 : _b.call(slots), {
        style: mergedStyle
      }, false) : null;
      const badgeClassName = _class.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(vue.createVNode("span", {
          ...attrs,
          "class": badgeClassName,
          "style": mergedStyle
        }, [vue.createVNode("span", {
          "class": statusCls.value,
          "style": statusStyle.value
        }, null), vue.createVNode("span", {
          "style": {
            color: statusTextColor
          },
          "class": `${pre}-status-text`
        }, [text])]));
      }
      const transitionProps = transition.getTransitionProps(children ? `${pre}-zoom` : "", {
        appear: false
      });
      let scrollNumberStyle = {
        ...mergedStyle,
        ...props.numberStyle
      };
      if (color && !isInternalColor.value) {
        scrollNumberStyle = scrollNumberStyle || {};
        scrollNumberStyle.background = color;
      }
      return wrapSSR(vue.createVNode("span", {
        ...attrs,
        "class": badgeClassName
      }, [children, vue.createVNode(vue.Transition, transitionProps, {
        default: () => [vue.withDirectives(vue.createVNode(ScrollNumber.default, {
          "prefixCls": props.scrollNumberPrefixCls,
          "show": visible,
          "class": scrollNumberCls.value,
          "count": displayCount.value,
          "title": titleNode,
          "style": scrollNumberStyle,
          "key": "scrollNumber"
        }, {
          default: () => [displayNode]
        }), [[vue.vShow, visible]])]
      }), statusTextNode]));
    };
  }
});

exports.default = ABadge;
//# sourceMappingURL=Badge.cjs.map
