816 lines
26 KiB
JavaScript
816 lines
26 KiB
JavaScript
import _objectSpread from '@babel/runtime/helpers/esm/objectSpread2';
|
|
import _extends from '@babel/runtime/helpers/esm/extends';
|
|
import { defineComponent, computed, ref, watch, createVNode, Transition, withDirectives, vShow, reactive } from 'vue';
|
|
import { z as useConfigInject, S as getPropsSlot, ab as flattenChildren, Z as cloneElement, A as classNames, ad as getTransitionProps, B as genComponentStyleHook, C as merge, P as PropTypes, R as filterEmpty, J as resetComponent, K as Keyframe } from './server.mjs';
|
|
import { i as isPresetColor, g as genPresetColor } from './index-Bpb_QU26.mjs';
|
|
|
|
function UnitNumber(_ref) {
|
|
let {
|
|
prefixCls,
|
|
value,
|
|
current,
|
|
offset = 0
|
|
} = _ref;
|
|
let style;
|
|
if (offset) {
|
|
style = {
|
|
position: "absolute",
|
|
top: `${offset}00%`,
|
|
left: 0
|
|
};
|
|
}
|
|
return createVNode("p", {
|
|
"style": style,
|
|
"class": classNames(`${prefixCls}-only-unit`, {
|
|
current
|
|
})
|
|
}, [value]);
|
|
}
|
|
function getOffset(start, end, unit) {
|
|
let index = start;
|
|
let offset = 0;
|
|
while ((index + 10) % 10 !== end) {
|
|
index += unit;
|
|
offset += unit;
|
|
}
|
|
return offset;
|
|
}
|
|
const SingleNumber = defineComponent({
|
|
compatConfig: {
|
|
MODE: 3
|
|
},
|
|
name: "SingleNumber",
|
|
props: {
|
|
prefixCls: String,
|
|
value: String,
|
|
count: Number
|
|
},
|
|
setup(props) {
|
|
const originValue = computed(() => Number(props.value));
|
|
const originCount = computed(() => Math.abs(props.count));
|
|
const state = reactive({
|
|
prevValue: originValue.value,
|
|
prevCount: originCount.value
|
|
});
|
|
const onTransitionEnd = () => {
|
|
state.prevValue = originValue.value;
|
|
state.prevCount = originCount.value;
|
|
};
|
|
const timeout = ref();
|
|
watch(originValue, () => {
|
|
clearTimeout(timeout.value);
|
|
timeout.value = setTimeout(() => {
|
|
onTransitionEnd();
|
|
}, 1e3);
|
|
}, {
|
|
flush: "post"
|
|
});
|
|
return () => {
|
|
let unitNodes;
|
|
let offsetStyle = {};
|
|
const value = originValue.value;
|
|
if (state.prevValue === value || Number.isNaN(value) || Number.isNaN(state.prevValue)) {
|
|
unitNodes = [UnitNumber(_extends(_extends({}, props), {
|
|
current: true
|
|
}))];
|
|
offsetStyle = {
|
|
transition: "none"
|
|
};
|
|
} else {
|
|
unitNodes = [];
|
|
const end = value + 10;
|
|
const unitNumberList = [];
|
|
for (let index = value; index <= end; index += 1) {
|
|
unitNumberList.push(index);
|
|
}
|
|
const prevIndex = unitNumberList.findIndex((n) => n % 10 === state.prevValue);
|
|
unitNodes = unitNumberList.map((n, index) => {
|
|
const singleUnit = n % 10;
|
|
return UnitNumber(_extends(_extends({}, props), {
|
|
value: singleUnit,
|
|
offset: index - prevIndex,
|
|
current: index === prevIndex
|
|
}));
|
|
});
|
|
const unit = state.prevCount < originCount.value ? 1 : -1;
|
|
offsetStyle = {
|
|
transform: `translateY(${-getOffset(state.prevValue, value, unit)}00%)`
|
|
};
|
|
}
|
|
return createVNode("span", {
|
|
"class": `${props.prefixCls}-only`,
|
|
"style": offsetStyle,
|
|
"onTransitionend": () => onTransitionEnd()
|
|
}, [unitNodes]);
|
|
};
|
|
}
|
|
});
|
|
var __rest$1 = function(s, e) {
|
|
var t = {};
|
|
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
|
|
if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
|
|
}
|
|
return t;
|
|
};
|
|
const scrollNumberProps = {
|
|
prefixCls: String,
|
|
count: PropTypes.any,
|
|
component: String,
|
|
title: PropTypes.any,
|
|
show: Boolean
|
|
};
|
|
const ScrollNumber = defineComponent({
|
|
compatConfig: {
|
|
MODE: 3
|
|
},
|
|
name: "ScrollNumber",
|
|
inheritAttrs: false,
|
|
props: scrollNumberProps,
|
|
setup(props, _ref) {
|
|
let {
|
|
attrs,
|
|
slots
|
|
} = _ref;
|
|
const {
|
|
prefixCls
|
|
} = useConfigInject("scroll-number", props);
|
|
return () => {
|
|
var _a;
|
|
const _b = _extends(_extends({}, props), attrs), {
|
|
prefixCls: customizePrefixCls,
|
|
count,
|
|
title,
|
|
show,
|
|
component: Tag = "sup",
|
|
class: className,
|
|
style
|
|
} = _b, restProps = __rest$1(_b, ["prefixCls", "count", "title", "show", "component", "class", "style"]);
|
|
const newProps = _extends(_extends({}, restProps), {
|
|
style,
|
|
"data-show": props.show,
|
|
class: classNames(prefixCls.value, className),
|
|
title
|
|
});
|
|
let numberNodes = count;
|
|
if (count && Number(count) % 1 === 0) {
|
|
const numberList = String(count).split("");
|
|
numberNodes = numberList.map((num, i) => createVNode(SingleNumber, {
|
|
"prefixCls": prefixCls.value,
|
|
"count": Number(count),
|
|
"value": num,
|
|
"key": numberList.length - i
|
|
}, null));
|
|
}
|
|
if (style && style.borderColor) {
|
|
newProps.style = _extends(_extends({}, style), {
|
|
boxShadow: `0 0 0 1px ${style.borderColor} inset`
|
|
});
|
|
}
|
|
const children = filterEmpty((_a = slots.default) === null || _a === void 0 ? void 0 : _a.call(slots));
|
|
if (children && children.length) {
|
|
return cloneElement(children, {
|
|
class: classNames(`${prefixCls.value}-custom-component`)
|
|
}, false);
|
|
}
|
|
return createVNode(Tag, newProps, {
|
|
default: () => [numberNodes]
|
|
});
|
|
};
|
|
}
|
|
});
|
|
const antStatusProcessing = new Keyframe("antStatusProcessing", {
|
|
"0%": {
|
|
transform: "scale(0.8)",
|
|
opacity: 0.5
|
|
},
|
|
"100%": {
|
|
transform: "scale(2.4)",
|
|
opacity: 0
|
|
}
|
|
});
|
|
const antZoomBadgeIn = new Keyframe("antZoomBadgeIn", {
|
|
"0%": {
|
|
transform: "scale(0) translate(50%, -50%)",
|
|
opacity: 0
|
|
},
|
|
"100%": {
|
|
transform: "scale(1) translate(50%, -50%)"
|
|
}
|
|
});
|
|
const antZoomBadgeOut = new Keyframe("antZoomBadgeOut", {
|
|
"0%": {
|
|
transform: "scale(1) translate(50%, -50%)"
|
|
},
|
|
"100%": {
|
|
transform: "scale(0) translate(50%, -50%)",
|
|
opacity: 0
|
|
}
|
|
});
|
|
const antNoWrapperZoomBadgeIn = new Keyframe("antNoWrapperZoomBadgeIn", {
|
|
"0%": {
|
|
transform: "scale(0)",
|
|
opacity: 0
|
|
},
|
|
"100%": {
|
|
transform: "scale(1)"
|
|
}
|
|
});
|
|
const antNoWrapperZoomBadgeOut = new Keyframe("antNoWrapperZoomBadgeOut", {
|
|
"0%": {
|
|
transform: "scale(1)"
|
|
},
|
|
"100%": {
|
|
transform: "scale(0)",
|
|
opacity: 0
|
|
}
|
|
});
|
|
const antBadgeLoadingCircle = new Keyframe("antBadgeLoadingCircle", {
|
|
"0%": {
|
|
transformOrigin: "50%"
|
|
},
|
|
"100%": {
|
|
transform: "translate(50%, -50%) rotate(360deg)",
|
|
transformOrigin: "50%"
|
|
}
|
|
});
|
|
const genSharedBadgeStyle = (token) => {
|
|
const {
|
|
componentCls,
|
|
iconCls,
|
|
antCls,
|
|
badgeFontHeight,
|
|
badgeShadowSize,
|
|
badgeHeightSm,
|
|
motionDurationSlow,
|
|
badgeStatusSize,
|
|
marginXS,
|
|
badgeRibbonOffset
|
|
} = token;
|
|
const numberPrefixCls = `${antCls}-scroll-number`;
|
|
const ribbonPrefixCls = `${antCls}-ribbon`;
|
|
const ribbonWrapperPrefixCls = `${antCls}-ribbon-wrapper`;
|
|
const colorPreset = genPresetColor(token, (colorKey, _ref) => {
|
|
let {
|
|
darkColor
|
|
} = _ref;
|
|
return {
|
|
[`&${componentCls} ${componentCls}-color-${colorKey}`]: {
|
|
background: darkColor,
|
|
[`&:not(${componentCls}-count)`]: {
|
|
color: darkColor
|
|
}
|
|
}
|
|
};
|
|
});
|
|
const statusRibbonPreset = genPresetColor(token, (colorKey, _ref2) => {
|
|
let {
|
|
darkColor
|
|
} = _ref2;
|
|
return {
|
|
[`&${ribbonPrefixCls}-color-${colorKey}`]: {
|
|
background: darkColor,
|
|
color: darkColor
|
|
}
|
|
};
|
|
});
|
|
return {
|
|
[componentCls]: _extends(_extends(_extends(_extends({}, resetComponent(token)), {
|
|
position: "relative",
|
|
display: "inline-block",
|
|
width: "fit-content",
|
|
lineHeight: 1,
|
|
[`${componentCls}-count`]: {
|
|
zIndex: token.badgeZIndex,
|
|
minWidth: token.badgeHeight,
|
|
height: token.badgeHeight,
|
|
color: token.badgeTextColor,
|
|
fontWeight: token.badgeFontWeight,
|
|
fontSize: token.badgeFontSize,
|
|
lineHeight: `${token.badgeHeight}px`,
|
|
whiteSpace: "nowrap",
|
|
textAlign: "center",
|
|
background: token.badgeColor,
|
|
borderRadius: token.badgeHeight / 2,
|
|
boxShadow: `0 0 0 ${badgeShadowSize}px ${token.badgeShadowColor}`,
|
|
transition: `background ${token.motionDurationMid}`,
|
|
a: {
|
|
color: token.badgeTextColor
|
|
},
|
|
"a:hover": {
|
|
color: token.badgeTextColor
|
|
},
|
|
"a:hover &": {
|
|
background: token.badgeColorHover
|
|
}
|
|
},
|
|
[`${componentCls}-count-sm`]: {
|
|
minWidth: badgeHeightSm,
|
|
height: badgeHeightSm,
|
|
fontSize: token.badgeFontSizeSm,
|
|
lineHeight: `${badgeHeightSm}px`,
|
|
borderRadius: badgeHeightSm / 2
|
|
},
|
|
[`${componentCls}-multiple-words`]: {
|
|
padding: `0 ${token.paddingXS}px`
|
|
},
|
|
[`${componentCls}-dot`]: {
|
|
zIndex: token.badgeZIndex,
|
|
width: token.badgeDotSize,
|
|
minWidth: token.badgeDotSize,
|
|
height: token.badgeDotSize,
|
|
background: token.badgeColor,
|
|
borderRadius: "100%",
|
|
boxShadow: `0 0 0 ${badgeShadowSize}px ${token.badgeShadowColor}`
|
|
},
|
|
[`${componentCls}-dot${numberPrefixCls}`]: {
|
|
transition: `background ${motionDurationSlow}`
|
|
},
|
|
[`${componentCls}-count, ${componentCls}-dot, ${numberPrefixCls}-custom-component`]: {
|
|
position: "absolute",
|
|
top: 0,
|
|
insetInlineEnd: 0,
|
|
transform: "translate(50%, -50%)",
|
|
transformOrigin: "100% 0%",
|
|
[`&${iconCls}-spin`]: {
|
|
animationName: antBadgeLoadingCircle,
|
|
animationDuration: "1s",
|
|
animationIterationCount: "infinite",
|
|
animationTimingFunction: "linear"
|
|
}
|
|
},
|
|
[`&${componentCls}-status`]: {
|
|
lineHeight: "inherit",
|
|
verticalAlign: "baseline",
|
|
[`${componentCls}-status-dot`]: {
|
|
position: "relative",
|
|
top: -1,
|
|
display: "inline-block",
|
|
width: badgeStatusSize,
|
|
height: badgeStatusSize,
|
|
verticalAlign: "middle",
|
|
borderRadius: "50%"
|
|
},
|
|
[`${componentCls}-status-success`]: {
|
|
backgroundColor: token.colorSuccess
|
|
},
|
|
[`${componentCls}-status-processing`]: {
|
|
overflow: "visible",
|
|
color: token.colorPrimary,
|
|
backgroundColor: token.colorPrimary,
|
|
"&::after": {
|
|
position: "absolute",
|
|
top: 0,
|
|
insetInlineStart: 0,
|
|
width: "100%",
|
|
height: "100%",
|
|
borderWidth: badgeShadowSize,
|
|
borderStyle: "solid",
|
|
borderColor: "inherit",
|
|
borderRadius: "50%",
|
|
animationName: antStatusProcessing,
|
|
animationDuration: token.badgeProcessingDuration,
|
|
animationIterationCount: "infinite",
|
|
animationTimingFunction: "ease-in-out",
|
|
content: '""'
|
|
}
|
|
},
|
|
[`${componentCls}-status-default`]: {
|
|
backgroundColor: token.colorTextPlaceholder
|
|
},
|
|
[`${componentCls}-status-error`]: {
|
|
backgroundColor: token.colorError
|
|
},
|
|
[`${componentCls}-status-warning`]: {
|
|
backgroundColor: token.colorWarning
|
|
},
|
|
[`${componentCls}-status-text`]: {
|
|
marginInlineStart: marginXS,
|
|
color: token.colorText,
|
|
fontSize: token.fontSize
|
|
}
|
|
}
|
|
}), colorPreset), {
|
|
[`${componentCls}-zoom-appear, ${componentCls}-zoom-enter`]: {
|
|
animationName: antZoomBadgeIn,
|
|
animationDuration: token.motionDurationSlow,
|
|
animationTimingFunction: token.motionEaseOutBack,
|
|
animationFillMode: "both"
|
|
},
|
|
[`${componentCls}-zoom-leave`]: {
|
|
animationName: antZoomBadgeOut,
|
|
animationDuration: token.motionDurationSlow,
|
|
animationTimingFunction: token.motionEaseOutBack,
|
|
animationFillMode: "both"
|
|
},
|
|
[`&${componentCls}-not-a-wrapper`]: {
|
|
[`${componentCls}-zoom-appear, ${componentCls}-zoom-enter`]: {
|
|
animationName: antNoWrapperZoomBadgeIn,
|
|
animationDuration: token.motionDurationSlow,
|
|
animationTimingFunction: token.motionEaseOutBack
|
|
},
|
|
[`${componentCls}-zoom-leave`]: {
|
|
animationName: antNoWrapperZoomBadgeOut,
|
|
animationDuration: token.motionDurationSlow,
|
|
animationTimingFunction: token.motionEaseOutBack
|
|
},
|
|
[`&:not(${componentCls}-status)`]: {
|
|
verticalAlign: "middle"
|
|
},
|
|
[`${numberPrefixCls}-custom-component, ${componentCls}-count`]: {
|
|
transform: "none"
|
|
},
|
|
[`${numberPrefixCls}-custom-component, ${numberPrefixCls}`]: {
|
|
position: "relative",
|
|
top: "auto",
|
|
display: "block",
|
|
transformOrigin: "50% 50%"
|
|
}
|
|
},
|
|
[`${numberPrefixCls}`]: {
|
|
overflow: "hidden",
|
|
[`${numberPrefixCls}-only`]: {
|
|
position: "relative",
|
|
display: "inline-block",
|
|
height: token.badgeHeight,
|
|
transition: `all ${token.motionDurationSlow} ${token.motionEaseOutBack}`,
|
|
WebkitTransformStyle: "preserve-3d",
|
|
WebkitBackfaceVisibility: "hidden",
|
|
[`> p${numberPrefixCls}-only-unit`]: {
|
|
height: token.badgeHeight,
|
|
margin: 0,
|
|
WebkitTransformStyle: "preserve-3d",
|
|
WebkitBackfaceVisibility: "hidden"
|
|
}
|
|
},
|
|
[`${numberPrefixCls}-symbol`]: {
|
|
verticalAlign: "top"
|
|
}
|
|
},
|
|
// ====================== RTL =======================
|
|
"&-rtl": {
|
|
direction: "rtl",
|
|
[`${componentCls}-count, ${componentCls}-dot, ${numberPrefixCls}-custom-component`]: {
|
|
transform: "translate(-50%, -50%)"
|
|
}
|
|
}
|
|
}),
|
|
[`${ribbonWrapperPrefixCls}`]: {
|
|
position: "relative"
|
|
},
|
|
[`${ribbonPrefixCls}`]: _extends(_extends(_extends(_extends({}, resetComponent(token)), {
|
|
position: "absolute",
|
|
top: marginXS,
|
|
padding: `0 ${token.paddingXS}px`,
|
|
color: token.colorPrimary,
|
|
lineHeight: `${badgeFontHeight}px`,
|
|
whiteSpace: "nowrap",
|
|
backgroundColor: token.colorPrimary,
|
|
borderRadius: token.borderRadiusSM,
|
|
[`${ribbonPrefixCls}-text`]: {
|
|
color: token.colorTextLightSolid
|
|
},
|
|
[`${ribbonPrefixCls}-corner`]: {
|
|
position: "absolute",
|
|
top: "100%",
|
|
width: badgeRibbonOffset,
|
|
height: badgeRibbonOffset,
|
|
color: "currentcolor",
|
|
border: `${badgeRibbonOffset / 2}px solid`,
|
|
transform: token.badgeRibbonCornerTransform,
|
|
transformOrigin: "top",
|
|
filter: token.badgeRibbonCornerFilter
|
|
}
|
|
}), statusRibbonPreset), {
|
|
[`&${ribbonPrefixCls}-placement-end`]: {
|
|
insetInlineEnd: -badgeRibbonOffset,
|
|
borderEndEndRadius: 0,
|
|
[`${ribbonPrefixCls}-corner`]: {
|
|
insetInlineEnd: 0,
|
|
borderInlineEndColor: "transparent",
|
|
borderBlockEndColor: "transparent"
|
|
}
|
|
},
|
|
[`&${ribbonPrefixCls}-placement-start`]: {
|
|
insetInlineStart: -badgeRibbonOffset,
|
|
borderEndStartRadius: 0,
|
|
[`${ribbonPrefixCls}-corner`]: {
|
|
insetInlineStart: 0,
|
|
borderBlockEndColor: "transparent",
|
|
borderInlineStartColor: "transparent"
|
|
}
|
|
},
|
|
// ====================== RTL =======================
|
|
"&-rtl": {
|
|
direction: "rtl"
|
|
}
|
|
})
|
|
};
|
|
};
|
|
const useStyle = genComponentStyleHook("Badge", (token) => {
|
|
const {
|
|
fontSize,
|
|
lineHeight,
|
|
fontSizeSM,
|
|
lineWidth,
|
|
marginXS,
|
|
colorBorderBg
|
|
} = token;
|
|
const badgeFontHeight = Math.round(fontSize * lineHeight);
|
|
const badgeShadowSize = lineWidth;
|
|
const badgeZIndex = "auto";
|
|
const badgeHeight = badgeFontHeight - 2 * badgeShadowSize;
|
|
const badgeTextColor = token.colorBgContainer;
|
|
const badgeFontWeight = "normal";
|
|
const badgeFontSize = fontSizeSM;
|
|
const badgeColor = token.colorError;
|
|
const badgeColorHover = token.colorErrorHover;
|
|
const badgeHeightSm = fontSize;
|
|
const badgeDotSize = fontSizeSM / 2;
|
|
const badgeFontSizeSm = fontSizeSM;
|
|
const badgeStatusSize = fontSizeSM / 2;
|
|
const badgeToken = merge(token, {
|
|
badgeFontHeight,
|
|
badgeShadowSize,
|
|
badgeZIndex,
|
|
badgeHeight,
|
|
badgeTextColor,
|
|
badgeFontWeight,
|
|
badgeFontSize,
|
|
badgeColor,
|
|
badgeColorHover,
|
|
badgeShadowColor: colorBorderBg,
|
|
badgeHeightSm,
|
|
badgeDotSize,
|
|
badgeFontSizeSm,
|
|
badgeStatusSize,
|
|
badgeProcessingDuration: "1.2s",
|
|
badgeRibbonOffset: marginXS,
|
|
// Follow token just by Design. Not related with token
|
|
badgeRibbonCornerTransform: "scaleY(0.75)",
|
|
badgeRibbonCornerFilter: `brightness(75%)`
|
|
});
|
|
return [genSharedBadgeStyle(badgeToken)];
|
|
});
|
|
var __rest = function(s, e) {
|
|
var t = {};
|
|
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
|
|
if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
|
|
}
|
|
return t;
|
|
};
|
|
const ribbonProps = () => ({
|
|
prefix: String,
|
|
color: {
|
|
type: String
|
|
},
|
|
text: PropTypes.any,
|
|
placement: {
|
|
type: String,
|
|
default: "end"
|
|
}
|
|
});
|
|
const Ribbon = defineComponent({
|
|
compatConfig: {
|
|
MODE: 3
|
|
},
|
|
name: "ABadgeRibbon",
|
|
inheritAttrs: false,
|
|
props: ribbonProps(),
|
|
slots: Object,
|
|
setup(props, _ref) {
|
|
let {
|
|
attrs,
|
|
slots
|
|
} = _ref;
|
|
const {
|
|
prefixCls,
|
|
direction
|
|
} = useConfigInject("ribbon", props);
|
|
const [wrapSSR, hashId] = useStyle(prefixCls);
|
|
const colorInPreset = computed(() => isPresetColor(props.color, false));
|
|
const ribbonCls = computed(() => [prefixCls.value, `${prefixCls.value}-placement-${props.placement}`, {
|
|
[`${prefixCls.value}-rtl`]: direction.value === "rtl",
|
|
[`${prefixCls.value}-color-${props.color}`]: colorInPreset.value
|
|
}]);
|
|
return () => {
|
|
var _a, _b;
|
|
const {
|
|
class: className,
|
|
style
|
|
} = attrs, restAttrs = __rest(attrs, ["class", "style"]);
|
|
const colorStyle = {};
|
|
const cornerColorStyle = {};
|
|
if (props.color && !colorInPreset.value) {
|
|
colorStyle.background = props.color;
|
|
cornerColorStyle.color = props.color;
|
|
}
|
|
return wrapSSR(createVNode("div", _objectSpread({
|
|
"class": `${prefixCls.value}-wrapper ${hashId.value}`
|
|
}, restAttrs), [(_a = slots.default) === null || _a === void 0 ? void 0 : _a.call(slots), createVNode("div", {
|
|
"class": [ribbonCls.value, className, hashId.value],
|
|
"style": _extends(_extends({}, colorStyle), style)
|
|
}, [createVNode("span", {
|
|
"class": `${prefixCls.value}-text`
|
|
}, [props.text || ((_b = slots.text) === null || _b === void 0 ? void 0 : _b.call(slots))]), createVNode("div", {
|
|
"class": `${prefixCls.value}-corner`,
|
|
"style": cornerColorStyle
|
|
}, null)])]));
|
|
};
|
|
}
|
|
});
|
|
const isNumeric = (value) => {
|
|
return !isNaN(parseFloat(value)) && isFinite(value);
|
|
};
|
|
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
|
|
});
|
|
const Badge = defineComponent({
|
|
compatConfig: {
|
|
MODE: 3
|
|
},
|
|
name: "ABadge",
|
|
Ribbon,
|
|
inheritAttrs: false,
|
|
props: badgeProps(),
|
|
slots: Object,
|
|
setup(props, _ref) {
|
|
let {
|
|
slots,
|
|
attrs
|
|
} = _ref;
|
|
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}-color-${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}-color-${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 || _a === void 0 ? void 0 : _a.call(slots));
|
|
children = children.length ? children : null;
|
|
const visible = !!(!isHidden.value || slots.count);
|
|
const mergedStyle = (() => {
|
|
if (!offset) {
|
|
return _extends({}, 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 _extends(_extends({}, offsetStyle), style);
|
|
})();
|
|
const titleNode = title !== null && title !== void 0 ? 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 !== void 0 ? count : (_b = slots.count) === null || _b === void 0 ? 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", _objectSpread(_objectSpread({}, 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 = _extends(_extends({}, mergedStyle), props.numberStyle);
|
|
if (color && !isInternalColor.value) {
|
|
scrollNumberStyle = scrollNumberStyle || {};
|
|
scrollNumberStyle.background = color;
|
|
}
|
|
return wrapSSR(createVNode("span", _objectSpread(_objectSpread({}, 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"
|
|
}, {
|
|
default: () => [displayNode]
|
|
}), [[vShow, visible]])]
|
|
}), statusTextNode]));
|
|
};
|
|
}
|
|
});
|
|
Badge.install = function(app) {
|
|
app.component(Badge.name, Badge);
|
|
app.component(Ribbon.name, Ribbon);
|
|
return app;
|
|
};
|
|
|
|
export { Badge as B, isNumeric as i };
|