feat(button-group): [button-group] add default empty text (#1155)

* feat(button-group): [button-group] add default empty text

* feat(button-group): [button-group] add default empty text

examples/sites/demos/pc/app/button-group/basic-usage.spec.ts

@@ -10,6 +10,7 @@ test('按钮组基本示例', async ({ page }) => {
   const button3 = demo.getByRole('button', { name: 'Button3' })
 
   await button3.click()
+  await demo.getByRole('button', { name: 'Button2' }).hover()
   await expect(buttonGroup.locator('li').nth(2)).toHaveClass('active')
   await expect(button3).toHaveCSS('background-color', 'rgb(94, 124, 224)')
   await expect(button3).toHaveCSS('border-bottom-color', 'rgb(94, 124, 224)')

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

@@ -0,0 +1,25 @@
+<template>
+  <div>
+    <tiny-button-group :data="groupData" v-model="checkedVal"></tiny-button-group>
+    <tiny-button-group :data="groupData" v-model="checkedVal">
+      <span class="custom-empty">自定义空数据</span>
+    </tiny-button-group>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { ButtonGroup as TinyButtonGroup } from '@opentiny/vue'
+
+const checkedVal = ref('')
+const groupData = ref([])
+</script>
+
+<style scoped>
+.custom-empty {
+  color: #fac20a;
+}
+.tiny-button-group + .tiny-button-group {
+  margin-left: 20px;
+}
+</style>

examples/sites/demos/pc/app/button-group/slot-empty.spec.ts

@@ -0,0 +1,11 @@
+import { test, expect } from '@playwright/test'
+
+test('空数据插槽', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('button-group#slot-empty')
+
+  const demo = page.locator('#slot-empty')
+  const emptySlot = demo.locator('.tiny-button-group .tiny-button-group--empty')
+  await expect(emptySlot.first()).toHaveCSS('color', 'rgb(173, 176, 184)')
+  await expect(demo.locator('.tiny-button-group .custom-empty')).toHaveCSS('color', 'rgb(250, 194, 10)')
+})

examples/sites/demos/pc/app/button-group/slot-empty.vue

@@ -0,0 +1,33 @@
+<template>
+  <div>
+    <tiny-button-group :data="groupData" v-model="checkedVal"></tiny-button-group>
+    <tiny-button-group :data="groupData" v-model="checkedVal">
+      <span class="custom-empty">自定义空数据</span>
+    </tiny-button-group>
+  </div>
+</template>
+
+<script>
+import { ButtonGroup } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyButtonGroup: ButtonGroup
+  },
+  data() {
+    return {
+      checkedVal: '',
+      groupData: []
+    }
+  }
+}
+</script>
+
+<style scoped>
+.custom-empty {
+  color: #fac20a;
+}
+.tiny-button-group + .tiny-button-group {
+  margin-left: 20px;
+}
+</style>

examples/sites/demos/pc/app/button-group/webdoc/button-group.js

@@ -86,6 +86,15 @@ export default {
       },
       'codeFiles': ['slot-default.vue']
     },
+    {
+      'demoId': 'slot-empty',
+      'name': { 'zh-CN': '空数据插槽', 'en-US': 'Empty slot' },
+      'desc': {
+        'zh-CN': '<p>当数据为空时，默认会显示暂无数据，通过默认插槽自定义内容。</p>',
+        'en-US': '<p>When the data is empty, customize the content via the <code>empty</code> slot.</p>'
+      },
+      'codeFiles': ['slot-empty.vue']
+    },
     {
       'demoId': 'button-group-multiple',
       'name': { 'zh-CN': '多行按钮组', 'en-US': 'Button Group Multiple' },

packages/theme/src/button-group/index.less

@@ -28,6 +28,10 @@
   margin-top: var(--ti-button-group-margin-top);
   .clearfix();
 
+  &--empty {
+    color: var(--ti-common-color-placeholder);
+  }
+
   .@{group-item-prefix-cls} {
     display: inline-block;
     vertical-align: middle;

packages/vue/src/button-group/src/pc.vue

@@ -15,6 +15,7 @@
     :class="[size ? 'tiny-button-group--' + size : '', border ? '' : 'tiny-button-group--borderless']"
   >
     <slot>
+      <template v-if="data.length > 0">
         <ul v-if="!(showMore && showMore > 0)" class="tiny-group-item">
           <li v-for="(node, index) in data" :key="index" :class="{ active: state.value === node[valueField] }">
             <button
@@ -102,6 +103,8 @@
             </tiny-button>
           </li>
         </ul>
+      </template>
+      <span v-else class="tiny-button-group--empty"> 暂无数据 </span>
     </slot>
   </div>
 </template>