feat(badge): [badge] Adapting to the SMB theme

examples/sites/demos/pc/app/badge/is-dot-composition-api.vue

@@ -1,7 +1,17 @@
 <template>
   <tiny-badge is-dot>小圆点显示</tiny-badge>
+  <br /><br />
+  <tiny-badge is-dot>
+    <template #default>
+      <tiny-button type="text" :icon="TinyIconMail"> </tiny-button>
+    </template>
+  </tiny-badge>
 </template>
 
 <script setup>
 import { Badge as TinyBadge } from '@opentiny/vue'
+import { iconMail } from '@opentiny/vue-icon'
+import { Button as TinyButton } from '@opentiny/vue'
+
+const TinyIconMail = iconMail()
 </script>

examples/sites/demos/pc/app/badge/is-dot.spec.ts

@@ -4,8 +4,11 @@ test('小圆点标记', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('badge#is-dot')
 
-  const demo = page.locator('#is-dot')
-  const badge = demo.locator('.tiny-badge')
+  const demo = page
+    .locator('div')
+    .filter({ hasText: /^小圆点显示$/ })
+    .first()
+  const badge = demo.locator('.tiny-badge').first()
 
   await expect(badge).toHaveClass(/tiny-badge--default/)
   await expect(badge).toHaveCSS('width', '6px')

examples/sites/demos/pc/app/badge/is-dot.vue

@@ -1,13 +1,27 @@
 <template>
   <tiny-badge is-dot>小圆点显示</tiny-badge>
+  <br /><br />
+  <tiny-badge is-dot>
+    <template #default>
+      <tiny-button type="text" :icon="TinyIconMail"> </tiny-button>
+    </template>
+  </tiny-badge>
 </template>
 
 <script>
 import { Badge } from '@opentiny/vue'
+import { Button } from '@opentiny/vue'
+import { iconMail } from '@opentiny/vue-icon'
 
 export default {
   components: {
+    TinyButton: Button,
     TinyBadge: Badge
+  },
+  data() {
+    return {
+      TinyIconMail: iconMail()
+    }
   }
 }
 </script>

examples/sites/demos/pc/app/badge/max-composition-api.vue

@@ -1,5 +1,9 @@
 <template>
-  <tiny-badge :value="5" :max="2">最大值显示</tiny-badge>
+  <tiny-badge :value="10" :max="9">最大值显示</tiny-badge>
+  <br />
+  <tiny-badge value="100" :max="99" data="我的待办"></tiny-badge>
+  <br />
+  <tiny-badge value="1000" :max="999" data="我的待办"></tiny-badge>
 </template>
 
 <script setup>

examples/sites/demos/pc/app/badge/max.spec.ts

@@ -5,7 +5,7 @@ test('计数最大值', async ({ page }) => {
   await page.goto('badge#max')
 
   const demo = page.locator('#max')
-  const badge = demo.locator('.tiny-badge')
+  const badge = demo.locator('.tiny-badge').first()
 
-  await expect(badge).toContainText('2+')
+  await expect(badge).toContainText('9+')
 })

examples/sites/demos/pc/app/badge/max.vue

@@ -1,5 +1,11 @@
 <template>
-  <tiny-badge :value="5" :max="2">最大值显示</tiny-badge>
+  <template>
+    <tiny-badge :value="10" :max="9">最大值显示</tiny-badge>
+    <br />
+    <tiny-badge value="100" :max="99" data="我的待办"></tiny-badge>
+    <br />
+    <tiny-badge value="1000" :max="999" data="我的待办"></tiny-badge>
+  </template>
 </template>
 
 <script>

examples/sites/demos/pc/app/badge/offset-composition-api.vue

@@ -2,11 +2,11 @@
   <div>
     <p>使用字符串：</p>
     <br />
-    <tiny-badge :value="2" :offset="['0', '-50%']">我的待办</tiny-badge>
+    <tiny-badge :value="2" :offset="['0', '-20%']">我的待办</tiny-badge>
     <br /><br />
     <p>使用数字：</p>
     <br />
-    <tiny-badge :value="2" :offset="[0, -10]">我的待办</tiny-badge>
+    <tiny-badge :value="2" :offset="[0, -6]">我的待办</tiny-badge>
   </div>
 </template>
 

examples/sites/demos/pc/app/badge/offset.spec.ts

@@ -7,6 +7,6 @@ test('标记的位置', async ({ page }) => {
   const demo = page.locator('#offset')
   const badge = demo.locator('.tiny-badge')
 
-  await expect(badge.first()).toHaveCSS('transform', 'matrix(1, 0, 0, 1, 0, -10)')
-  await expect(badge.nth(1)).toHaveCSS('transform', 'matrix(1, 0, 0, 1, 0, -10)')
+  await expect(badge.first()).toHaveCSS('transform', 'matrix(1, 0, 0, 1, 0, -4)')
+  await expect(badge.nth(1)).toHaveCSS('transform', 'matrix(1, 0, 0, 1, 0, -6)')
 })

examples/sites/demos/pc/app/badge/offset.vue

@@ -2,11 +2,11 @@
   <div>
     <p>使用字符串：</p>
     <br />
-    <tiny-badge :value="2" :offset="['0', '-50%']">我的待办</tiny-badge>
+    <tiny-badge :value="2" :offset="['0', '-20%']">我的待办</tiny-badge>
     <br /><br />
     <p>使用数字：</p>
     <br />
-    <tiny-badge :value="2" :offset="[0, -10]">我的待办</tiny-badge>
+    <tiny-badge :value="2" :offset="[0, -6]">我的待办</tiny-badge>
   </div>
 </template>
 

packages/renderless/src/badge/index.ts

@@ -15,20 +15,20 @@ import type { StyleValue } from 'vue'
 export const computedContent =
   ({ props, state }: Pick<IBadgeRenderlessParams, 'props' | 'state'>) =>
   (): IBadgeContent =>
-    typeof state.valueRef === 'number' && typeof props.max === 'number'
-      ? props.max < state.valueRef
+    (typeof props.value === 'number' || typeof props.value === 'string') && typeof props.max === 'number'
+      ? props.max < Number(state.valueRef)
         ? `${props.max}+`
         : state.valueRef
       : state.valueRef
 
 export const computedValueRef =
   ({ props }: Pick<IBadgeRenderlessParams, 'props'>) =>
-  (): number | undefined => {
-    if (typeof props.value === 'number') {
+  (): number | string | undefined => {
+    if (typeof props.value === 'number' || typeof props.value === 'string') {
       return props.value
+    } else {
+      return undefined
     }
-
-    return typeof props.modelValue === 'number' ? props.modelValue : undefined
   }
 
 export const computedTransform =

packages/theme/src/badge/index.less

@@ -33,7 +33,7 @@
   vertical-align: baseline;
   white-space: nowrap;
   text-align: center;
-  margin-left: 4px;
+  margin-left: var(--ti-badge-margin-left);
   border: var(--ti-badge-border) solid #FFFFFF;
 
   &:empty {
@@ -84,6 +84,7 @@
     vertical-align: top;
     padding: 0;
     border-radius: 50%;
+    border: unset;
   }
 
   &--primary {

packages/theme/src/badge/smb-theme.js

@@ -5,5 +5,7 @@ export const tinyBadgeSmbTheme = {
   'ti-badge-font-size': 'var(--ti-common-font-size-0)',
   'ti-badge-text-color': 'var(--ti-base-color-bg-7)',
   'ti-badge-border-radius': 'var(--ti-common-border-radius-4)',
-  'ti-badge-border': 'var(--ti-common-border-weight-normal)'
+  'ti-badge-border': 'var(--ti-common-border-weight-normal)',
+  'ti-badge-font-weight': 'var(--ti-common-font-weight-normal)',
+  'ti-badge-margin-left': '0'
 }

packages/theme/src/badge/vars.less

@@ -27,4 +27,5 @@
   --ti-badge-danger-bg-color: var(--ti-base-color-error-3, #f66f6a);
   --ti-badge-info-bg-color: var(--ti-common-color-info-normal, #252b3a);
   --ti-badge-border: 0;
+  --ti-badge-margin-left: 4px;
 }

packages/vue/src/badge/src/index.ts

@@ -47,7 +47,7 @@ export const badgeProps = {
   badgeClass: String,
   offset: {
     type: Array,
-    default: () => [0, 0]
+    default: () => ['0', '-50%']
   },
   data: [String, Number]
 }

packages/vue/src/badge/src/pc.vue

@@ -22,7 +22,7 @@
         type ? 'tiny-badge--' + type : '',
         badgeClass || ''
       ]"
-      :style="state.transform"
+      :style="!isDot ? state.transform : ''"
     >
       <slot name="content">
         <a v-if="state.href" :href="state.href" :target="target" rel="noopener noreferrer">{{ state.content }}</a>