Merge branch 'dev' of github.com:opentiny/tiny-vue into wyp/tag-xdesign-0904

Author: wuyiping0628

.github/labeler.yaml

@@ -0,0 +1,30 @@
+labels:
+  - label: 'enhancement'
+    sync: true
+    matcher:
+      title: '^feat.*: ?.*'
+      commit: '^feat.*: ?.*'
+  - label: 'bug'
+    sync: true
+    matcher:
+      title: '^fix.*: ?.*'
+      commit: '^fix.*: ?.*'
+  - label: 'documentation'
+    sync: true
+    matcher:
+      title: '^docs?: ?.*'
+      commit: '^docs?: ?.*'
+  - label: 'refactoring'
+    sync: true
+    matcher:
+      title: '^refactor.*: ?.*'
+      commit: '^refactor.*: ?.*'
+  - label: 'chore'
+    sync: true
+    matcher:
+      title: '^chore.*: ?.*'
+      commit: '^chore.*: ?.*'
+  - label: 'ospp-2024'
+    sync: true
+    matcher:
+      baseBranch: '^ospp-2024/.*'

.github/workflows/auto-label.yaml

@@ -0,0 +1,18 @@
+name: Auto Label (Pull Request)
+
+on:
+  pull_request_target:
+    types: [opened, edited]
+
+permissions:
+  contents: read
+  pull-requests: write
+
+jobs:
+  label:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: fuxingloh/[email protected]
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          config-path: .github/labeler.yaml

examples/sites/demos/apis/checkbox.js

@@ -145,7 +145,7 @@ export default {
           type: "'medium' | 'small' | 'mini'",
           defaultValue: '',
           desc: {
-            'zh-CN': 'checkbox 的尺寸，仅在 border 为真时有效',
+            'zh-CN': 'checkbox 的尺寸，仅在 border 为true时有效',
             'en-US': 'Checkbox size. This parameter is valid only when border is set to true'
           },
           mode: ['pc', 'mobile-first'],

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>
 

examples/sites/demos/pc/app/button-group/border-composition-api.vue

@@ -1,24 +1,28 @@
 <template>
   <div class="demo-button">
     <p>原生及插槽</p>
-    <tiny-button-group :data="groupData" v-model="checkedVal">
-      <template #button4="{ sup }">
-        <tiny-icon-plus-circle></tiny-icon-plus-circle>
-        <span>
-          {{ sup.text }}
-        </span>
-      </template>
-    </tiny-button-group>
+    <div class="sup">
+      <tiny-button-group :data="groupData" v-model="checkedVal">
+        <template #button4="{ sup }">
+          <tiny-icon-plus-circle></tiny-icon-plus-circle>
+          <span>
+            {{ sup.text }}
+          </span>
+        </template>
+      </tiny-button-group>
+    </div>
     <br /><br />
     <p>插槽引用tag角标</p>
-    <tiny-button-group :data="groupDataTag" v-model="checkedVal">
-      <template #btn="{ sup }">
-        <tiny-tag type="warning" size="small" hit>
-          <component :is="sup.icon" class="tiny-svg-size"></component>
-          {{ sup.text }}
-        </tiny-tag>
-      </template>
-    </tiny-button-group>
+    <div class="tag">
+      <tiny-button-group :data="groupDataTag" v-model="checkedVal">
+        <template #btn="{ sup }">
+          <tiny-tag type="warning" size="small" hit>
+            <component :is="sup.icon" class="tiny-svg-size"></component>
+            {{ sup.text }}
+          </tiny-tag>
+        </template>
+      </tiny-button-group>
+    </div>
   </div>
 </template>
 
@@ -32,31 +36,31 @@ const TinyIconPlusCircle = iconPlusCircle()
 const checkedVal = ref('Button1')
 const groupData = ref([
   {
-    text: '1年',
+    text: '文字',
     value: 'Button1',
     sup: {
       class: ['success-bg'],
       text: '特惠'
     }
   },
   {
-    text: '2年',
+    text: '图标',
     value: 'Button2',
     sup: {
       class: 'sup-icon',
       icon: iconSearch()
     }
   },
   {
-    text: '3年',
+    text: '文字',
     value: 'Button3',
     sup: {
       class: 'sup-text',
       text: '8折'
     }
   },
   {
-    text: '4年',
+    text: '组合',
     value: 'Button4',
     sup: {
       slot: 'button4',
@@ -67,7 +71,7 @@ const groupData = ref([
 ])
 const groupDataTag = ref([
   {
-    text: '1年',
+    text: '文本',
     value: 'Button1',
     sup: {
       slot: 'btn',
@@ -76,7 +80,7 @@ const groupDataTag = ref([
     }
   },
   {
-    text: '2年',
+    text: '图标',
     value: 'Button2',
     sup: {
       slot: 'btn',
@@ -85,7 +89,7 @@ const groupDataTag = ref([
     }
   },
   {
-    text: '3年',
+    text: '图标',
     value: 'Button3',
     sup: {
       slot: 'btn',
@@ -94,7 +98,7 @@ const groupDataTag = ref([
     }
   },
   {
-    text: '4年',
+    text: '组合',
     value: 'Button4',
     sup: {
       slot: 'btn',
@@ -128,9 +132,18 @@ const groupDataTag = ref([
 </style>
 
 <style>
-.demo-button button {
+.demo-button .sup button {
+  width: 84px;
+}
+.demo-button .sup li:nth-of-type(4) button {
   width: 124px;
 }
+.demo-button .tag button {
+  width: 84px;
+}
+.demo-button .tag li:last-child button {
+  width: 120px;
+}
 .demo-button p {
   margin-bottom: 8px;
 }