diff --git a/components/anchor/Anchor.tsx b/components/anchor/Anchor.tsx index 879bd1f2b..9fd6ac319 100644 --- a/components/anchor/Anchor.tsx +++ b/components/anchor/Anchor.tsx @@ -127,10 +127,10 @@ export default defineComponent({ emit('change', link); }; const handleScrollTo = (link: string) => { - const { offsetTop, getContainer, targetOffset } = props; + const { offsetTop, targetOffset } = props; setCurrentActiveLink(link); - const container = getContainer(); + const container = getContainer.value(); const scrollTop = getScroll(container, true); const sharpLinkMatch = sharpMatcherRegx.exec(link); if (!sharpLinkMatch) { @@ -150,7 +150,7 @@ export default defineComponent({ callback: () => { state.animating = false; }, - getContainer, + getContainer: getContainer.value, }); }; expose({ diff --git a/components/badge/Badge.tsx b/components/badge/Badge.tsx index 6625d2b85..e2f0d0230 100644 --- a/components/badge/Badge.tsx +++ b/components/badge/Badge.tsx @@ -62,7 +62,7 @@ export default defineComponent({ () => numberedDisplayCount.value === '0' || numberedDisplayCount.value === 0, ); - const showAsDot = computed(() => (props.dot && !isZero.value) || hasStatus.value); + const showAsDot = computed(() => props.dot && !isZero.value); const mergedCount = computed(() => (showAsDot.value ? '' : numberedDisplayCount.value)); diff --git a/components/badge/__tests__/__snapshots__/demo.test.js.snap b/components/badge/__tests__/__snapshots__/demo.test.js.snap index 20a75da6c..a3b176315 100644 --- a/components/badge/__tests__/__snapshots__/demo.test.js.snap +++ b/components/badge/__tests__/__snapshots__/demo.test.js.snap @@ -1,14 +1,14 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`renders ./components/badge/demo/basic.vue correctly 1`] = ` -

5

 -

0

 - +

5

 +

0

 + `; exports[`renders ./components/badge/demo/change.vue correctly 1`] = ` -

5

 +

5
-
+ + `; exports[`renders ./components/badge/demo/colors.vue correctly 1`] = ` @@ -38,19 +41,16 @@ exports[`renders ./components/badge/demo/colors.vue correctly 1`] = `
gold
lime
-

Custom:

-
#f50
#2db7f5
#87d068
#108ee9
+#f50
#2db7f5
#87d068
#108ee9 `; exports[`renders ./components/badge/demo/dot.vue correctly 1`] = ` -
- - Link something -
+ +Link something `; exports[`renders ./components/badge/demo/link.vue correctly 1`] = ` -

5

 +

5

 `; @@ -62,19 +62,147 @@ exports[`renders ./components/badge/demo/no-wrapper.vue correctly 1`] = ` `; exports[`renders ./components/badge/demo/overflow.vue correctly 1`] = ` -

9

9

 -99+10+999+ +

9

9

 +99+ +10+ +999+ + `; exports[`renders ./components/badge/demo/ribbon.vue correctly 1`] = `
-
+
+
+
+
Pushes open the window
+ +
+ +
- -
And raises the spyglass.
+
and raises the spyglass.
-
Pushes open the window +
Hippies +
+
+
+
+
+
+
+
Pushes open the window
+ +
+ +
+ +
and raises the spyglass.
+ +
+
Hippies +
+
+
+
+
+
+
+
Pushes open the window
+ +
+ +
+ +
and raises the spyglass.
+ +
+
Hippies +
+
+
+
+
+
+
+
Pushes open the window
+ +
+ +
+ +
and raises the spyglass.
+ +
+
Hippies +
+
+
+
+
+
+
+
Pushes open the window
+ +
+ +
+ +
and raises the spyglass.
+ +
+
Hippies +
+
+
+
+
+
+
+
Pushes open the window
+ +
+ +
+ +
and raises the spyglass.
+ +
+
Hippies +
+
+
+
+
+
+
+
Pushes open the window
+ +
+ +
+ +
and raises the spyglass.
+ +
+
Hippies +
+
+
+
+
+
+
+
Pushes open the window
+ +
+ +
+ +
and raises the spyglass.
+ +
+
Hippies
@@ -83,7 +211,6 @@ exports[`renders ./components/badge/demo/ribbon.vue correctly 1`] = ` exports[`renders ./components/badge/demo/status.vue correctly 1`] = `
Success
Error
Default
Processing
warning`; exports[`renders ./components/badge/demo/title.vue correctly 1`] = ` -

5

 - -
+

5

 + `; diff --git a/components/badge/demo/basic.vue b/components/badge/demo/basic.vue index e37c06967..883813466 100644 --- a/components/badge/demo/basic.vue +++ b/components/badge/demo/basic.vue @@ -1,7 +1,7 @@ --- order: 0 -title: +title: zh-CN: 基本 en-US: Basic --- @@ -17,16 +17,16 @@ Simplest Usage. Badge will be hidden when `count` is `0`, but we can use `showZe diff --git a/components/badge/demo/change.vue b/components/badge/demo/change.vue index 550ef939d..996b70d3f 100644 --- a/components/badge/demo/change.vue +++ b/components/badge/demo/change.vue @@ -1,7 +1,7 @@ --- order: 5 -title: +title: zh-CN: 动态 en-US: Dynamic --- @@ -11,14 +11,14 @@ title: 展示动态变化的效果。 ## en-US - + The count will be animated as it changes. - diff --git a/components/badge/demo/index.vue b/components/badge/demo/index.vue index e17ac93a4..6e98468a0 100644 --- a/components/badge/demo/index.vue +++ b/components/badge/demo/index.vue @@ -8,8 +8,8 @@ <Colors /> - <Link /> <Ribbon /> + <Link /> </demo-sort> </template> <script lang="ts"> diff --git a/components/badge/demo/link.vue b/components/badge/demo/link.vue index bf7296937..edce3a83b 100644 --- a/components/badge/demo/link.vue +++ b/components/badge/demo/link.vue @@ -1,7 +1,7 @@ <docs> --- order: 8 -title: +title: zh-CN: 可点击 en-US: Clickable --- @@ -18,7 +18,7 @@ The badge can be wrapped with `a` tag to make it linkable. <template> <a href="#"> <a-badge count="5"> - <span class="head-example" /> + <a-avatar shape="square" size="large" /> </a-badge> </a> </template> diff --git a/components/badge/demo/overflow.vue b/components/badge/demo/overflow.vue index 78ec97ea0..73d7854a0 100644 --- a/components/badge/demo/overflow.vue +++ b/components/badge/demo/overflow.vue @@ -1,7 +1,7 @@ <docs> --- order: 2 -title: +title: zh-CN: 封顶数字 en-US: Overflow Count --- @@ -18,15 +18,15 @@ title: <template> <a-badge :count="99"> - <a href="#" class="head-example" /> + <a-avatar shape="square" size="large" /> </a-badge> <a-badge :count="100"> - <a href="#" class="head-example" /> + <a-avatar shape="square" size="large" /> </a-badge> <a-badge :count="99" :overflow-count="10"> - <a href="#" class="head-example" /> + <a-avatar shape="square" size="large" /> </a-badge> <a-badge :count="1000" :overflow-count="999"> - <a href="#" class="head-example" /> + <a-avatar shape="square" size="large" /> </a-badge> </template> diff --git a/components/badge/demo/ribbon.vue b/components/badge/demo/ribbon.vue index 769158189..6bd74794a 100644 --- a/components/badge/demo/ribbon.vue +++ b/components/badge/demo/ribbon.vue @@ -6,17 +6,38 @@ title: en-US: Ribbon --- -## zh-CN -使用缎带型的徽标。 +## zh-CN +使用缎带型的徽标。 -## en-US +## en-US -Use ribbon badge. +Use ribbon badge. </docs> <template> - <a-badge-ribbon text="Pushes open the window"> - <a-card>And raises the spyglass.</a-card> + <a-badge-ribbon text="Hippies"> + <a-card title="Pushes open the window" size="small">and raises the spyglass.</a-card> + </a-badge-ribbon> + <a-badge-ribbon text="Hippies" color="pink"> + <a-card title="Pushes open the window" size="small">and raises the spyglass.</a-card> + </a-badge-ribbon> + <a-badge-ribbon text="Hippies" color="red"> + <a-card title="Pushes open the window" size="small">and raises the spyglass.</a-card> + </a-badge-ribbon> + <a-badge-ribbon text="Hippies" color="cyan"> + <a-card title="Pushes open the window" size="small">and raises the spyglass.</a-card> + </a-badge-ribbon> + <a-badge-ribbon text="Hippies" color="green"> + <a-card title="Pushes open the window" size="small">and raises the spyglass.</a-card> + </a-badge-ribbon> + <a-badge-ribbon text="Hippies" color="purple"> + <a-card title="Pushes open the window" size="small">and raises the spyglass.</a-card> + </a-badge-ribbon> + <a-badge-ribbon text="Hippies" color="volcano"> + <a-card title="Pushes open the window" size="small">and raises the spyglass.</a-card> + </a-badge-ribbon> + <a-badge-ribbon text="Hippies" color="magenta"> + <a-card title="Pushes open the window" size="small">and raises the spyglass.</a-card> </a-badge-ribbon> </template> diff --git a/components/badge/demo/title.vue b/components/badge/demo/title.vue index 0d7eeac0f..f61a6d1f7 100644 --- a/components/badge/demo/title.vue +++ b/components/badge/demo/title.vue @@ -1,7 +1,7 @@ <docs> --- order: 6 -title: +title: zh-CN: 自定义标题 en-US: Title --- @@ -17,21 +17,7 @@ The badge will display `title` when hovered over, instead of `count`. </docs> <template> - <div id="components-badge-demo-title"> - <a-badge :count="5" title="Custom hover text"> - <a href="#" class="head-example" /> - </a-badge> - </div> + <a-badge :count="5" title="Custom hover text"> + <a-avatar shape="square" size="large" /> + </a-badge> </template> -<style scoped> -#components-badge-demo-title .ant-badge:not(.ant-badge-status) { - margin-right: 20px; -} -.head-example { - width: 42px; - height: 42px; - border-radius: 4px; - background: #eee; - display: inline-block; -} -</style> diff --git a/components/badge/style/index.less b/components/badge/style/index.less index 435f08a66..8059ae581 100644 --- a/components/badge/style/index.less +++ b/components/badge/style/index.less @@ -25,6 +25,7 @@ background: @badge-color; border-radius: (@badge-height / 2); box-shadow: 0 0 0 1px @shadow-color-inverse; + a, a:hover { color: @badge-text-color; @@ -54,6 +55,11 @@ box-shadow: 0 0 0 1px @shadow-color-inverse; } + // Tricky way to resolve https://github.com/ant-design/ant-design/issues/30088 + &-dot.@{number-prefix-cls} { + transition: background 1.5s; + } + &-count, &-dot, .@{number-prefix-cls}-custom-component { @@ -81,12 +87,15 @@ vertical-align: middle; border-radius: 50%; } + &-success { background-color: @success-color; } + &-processing { position: relative; background-color: @processing-color; + &::after { position: absolute; top: 0; @@ -99,12 +108,15 @@ content: ''; } } + &-default { background-color: @normal-color; } + &-error { background-color: @error-color; } + &-warning { background-color: @warning-color; } @@ -152,21 +164,18 @@ vertical-align: middle; } - .@{number-prefix-cls}-custom-component { + .@{number-prefix-cls}-custom-component, + .@{badge-prefix-cls}-count { transform: none; } .@{number-prefix-cls}-custom-component, - .@{ant-prefix}-scroll-number { + .@{number-prefix-cls} { position: relative; top: auto; display: block; transform-origin: 50% 50%; } - - .@{badge-prefix-cls}-count { - transform: none; - } } } @@ -175,6 +184,7 @@ transform: scale(0.8); opacity: 0.5; } + 100% { transform: scale(2.4); opacity: 0; @@ -183,12 +193,16 @@ // Safari will blink with transform when inner element has absolute style. .safari-fix-motion() { + /* stylelint-disable property-no-vendor-prefix */ -webkit-transform-style: preserve-3d; -webkit-backface-visibility: hidden; + /* stylelint-enable property-no-vendor-prefix */ } .@{number-prefix-cls} { overflow: hidden; + direction: ltr; + &-only { position: relative; display: inline-block; @@ -213,6 +227,7 @@ transform: scale(0) translate(50%, -50%); opacity: 0; } + 100% { transform: scale(1) translate(50%, -50%); } @@ -222,6 +237,7 @@ 0% { transform: scale(1) translate(50%, -50%); } + 100% { transform: scale(0) translate(50%, -50%); opacity: 0; @@ -233,6 +249,7 @@ transform: scale(0); opacity: 0; } + 100% { transform: scale(1); } @@ -242,6 +259,7 @@ 0% { transform: scale(1); } + 100% { transform: scale(0); opacity: 0; diff --git a/components/badge/style/index.ts b/components/badge/style/index.tsx similarity index 100% rename from components/badge/style/index.ts rename to components/badge/style/index.tsx diff --git a/components/badge/style/rtl.less b/components/badge/style/rtl.less index 40c1b30f4..bcc7ce8b6 100644 --- a/components/badge/style/rtl.less +++ b/components/badge/style/rtl.less @@ -3,9 +3,9 @@ direction: rtl; } - &-count, - &-dot, - .@{number-prefix-cls}-custom-component { + &:not(&-not-a-wrapper) &-count, + &:not(&-not-a-wrapper) &-dot, + &:not(&-not-a-wrapper) .@{number-prefix-cls}-custom-component { .@{badge-prefix-cls}-rtl & { right: auto; left: 0; @@ -15,7 +15,7 @@ } } - .@{badge-prefix-cls}-rtl& .@{number-prefix-cls}-custom-component { + &-rtl&:not(&-not-a-wrapper) .@{number-prefix-cls}-custom-component { right: auto; left: 0; transform: translate(-50%, -50%); @@ -30,25 +30,6 @@ } } } - - &-zoom-appear, - &-zoom-enter { - .@{badge-prefix-cls}-rtl & { - animation-name: antZoomBadgeInRtl; - } - } - - &-zoom-leave { - .@{badge-prefix-cls}-rtl & { - animation-name: antZoomBadgeOutRtl; - } - } - - &-not-a-wrapper { - .@{badge-prefix-cls}-count { - transform: none; - } - } } .@{ribbon-prefix-cls}-rtl { @@ -62,6 +43,7 @@ right: unset; left: 0; border-color: currentColor currentColor transparent transparent; + &::after { border-color: currentColor currentColor transparent transparent; } @@ -76,29 +58,10 @@ right: 0; left: unset; border-color: currentColor transparent transparent currentColor; + &::after { border-color: currentColor transparent transparent currentColor; } } } } - -@keyframes antZoomBadgeInRtl { - 0% { - transform: scale(0) translate(-50%, -50%); - opacity: 0; - } - 100% { - transform: scale(1) translate(-50%, -50%); - } -} - -@keyframes antZoomBadgeOutRtl { - 0% { - transform: scale(1) translate(-50%, -50%); - } - 100% { - transform: scale(0) translate(-50%, -50%); - opacity: 0; - } -}