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,93 +15,96 @@
     :class="[size ? 'tiny-button-group--' + size : '', border ? '' : 'tiny-button-group--borderless']"
   >
     <slot>
-      <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
-            :class="getItemClass(node)"
-            :style="{
-              height: size === 'medium' ? '42px' : size === 'small' ? '32px' : size === 'mini' ? '24px' : '',
-              'line-height': size === 'medium' ? '40px' : size === 'small' ? '30px' : size === 'mini' ? '22px' : ''
-            }"
-            type="button"
-            @click="handleClick(node)"
-          >
-            {{ node[textField] }}
-          </button>
+      <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
+              :class="getItemClass(node)"
+              :style="{
+                height: size === 'medium' ? '42px' : size === 'small' ? '32px' : size === 'mini' ? '24px' : '',
+                'line-height': size === 'medium' ? '40px' : size === 'small' ? '30px' : size === 'mini' ? '22px' : ''
+              }"
+              type="button"
+              @click="handleClick(node)"
+            >
+              {{ node[textField] }}
+            </button>
 
-          <span
-            v-if="node.sup"
-            :class="[
-              'tiny-group-item__sup',
-              {
-                'tiny-group-item__sup-text': !node.sup.slot && !node.sup.icon && node.sup.text,
-                'tiny-group-item__sup-icon': !node.sup.slot && node.sup.icon
-              },
-              typeof node.sup.class === 'string' ? node.sup.class : '',
-              ...(Array.isArray(node.sup.class) ? node.sup.class : [])
-            ]"
+            <span
+              v-if="node.sup"
+              :class="[
+                'tiny-group-item__sup',
+                {
+                  'tiny-group-item__sup-text': !node.sup.slot && !node.sup.icon && node.sup.text,
+                  'tiny-group-item__sup-icon': !node.sup.slot && node.sup.icon
+                },
+                typeof node.sup.class === 'string' ? node.sup.class : '',
+                ...(Array.isArray(node.sup.class) ? node.sup.class : [])
+              ]"
+            >
+              <slot v-if="node.sup.slot" :name="node.sup.slot" :sup="node.sup" />
+              <component v-else-if="node.sup.icon" :is="node.sup.icon"></component>
+              <span v-else-if="node.sup.text">{{ node.sup.text }}</span>
+            </span>
+          </li>
+        </ul>
+        <ul v-else class="tiny-group-item show-more">
+          <li
+            v-for="(node, index) in state.buttonData"
+            :key="index"
+            :class="{ active: state.value === node[valueField] }"
           >
-            <slot v-if="node.sup.slot" :name="node.sup.slot" :sup="node.sup" />
-            <component v-else-if="node.sup.icon" :is="node.sup.icon"></component>
-            <span v-else-if="node.sup.text">{{ node.sup.text }}</span>
-          </span>
-        </li>
-      </ul>
-      <ul v-else class="tiny-group-item show-more">
-        <li
-          v-for="(node, index) in state.buttonData"
-          :key="index"
-          :class="{ active: state.value === node[valueField] }"
-        >
-          <tiny-button :class="getItemClass(node)" @click="handleClick(node)">
-            {{ node[textField] }}
-          </tiny-button>
+            <tiny-button :class="getItemClass(node)" @click="handleClick(node)">
+              {{ node[textField] }}
+            </tiny-button>
 
-          <span
-            v-if="node.sup"
-            :class="[
-              'tiny-group-item__sup',
-              {
-                'tiny-group-item__sup-text': !node.sup.slot && !node.sup.icon && node.sup.text,
-                'tiny-group-item__sup-icon': !node.sup.slot && node.sup.icon
-              },
-              typeof node.sup.class === 'string' ? node.sup.class : '',
-              ...(Array.isArray(node.sup.class) ? node.sup.class : [])
-            ]"
-          >
-            <slot v-if="node.sup.slot" :name="node.sup.slot" :sup="node.sup" />
-            <component v-else-if="node.sup.icon" :is="node.sup.icon"></component>
-            <span v-else-if="node.sup.text">{{ node.sup.text }}</span>
-          </span>
-        </li>
-        <li v-if="data.length > showMore" class="tiny-group-item__more">
-          <tiny-popover :visible-arrow="false" width="200" popper-class="tiny-group-item__more-popover">
-            <template #reference>
-              <tiny-button class="more-button">
-                <icon-popup></icon-popup>
-              </tiny-button>
-            </template>
-            <ul class="more-list">
-              <li
-                v-for="(moreNode, index) in state.moreData"
-                :key="index"
-                :class="{
-                  active: state.value === moreNode[valueField],
-                  'more-item': true
-                }"
-                @click="moreNodeClick(moreNode)"
-              >
-                {{ moreNode[textField] }}
-              </li>
-            </ul>
-          </tiny-popover>
-        </li>
-        <li v-if="showEdit" class="tiny-group-item__edit">
-          <tiny-button @click="$emit('edit')" class="edit-button">
-            <icon-writing></icon-writing>
-          </tiny-button>
-        </li>
-      </ul>
+            <span
+              v-if="node.sup"
+              :class="[
+                'tiny-group-item__sup',
+                {
+                  'tiny-group-item__sup-text': !node.sup.slot && !node.sup.icon && node.sup.text,
+                  'tiny-group-item__sup-icon': !node.sup.slot && node.sup.icon
+                },
+                typeof node.sup.class === 'string' ? node.sup.class : '',
+                ...(Array.isArray(node.sup.class) ? node.sup.class : [])
+              ]"
+            >
+              <slot v-if="node.sup.slot" :name="node.sup.slot" :sup="node.sup" />
+              <component v-else-if="node.sup.icon" :is="node.sup.icon"></component>
+              <span v-else-if="node.sup.text">{{ node.sup.text }}</span>
+            </span>
+          </li>
+          <li v-if="data.length > showMore" class="tiny-group-item__more">
+            <tiny-popover :visible-arrow="false" width="200" popper-class="tiny-group-item__more-popover">
+              <template #reference>
+                <tiny-button class="more-button">
+                  <icon-popup></icon-popup>
+                </tiny-button>
+              </template>
+              <ul class="more-list">
+                <li
+                  v-for="(moreNode, index) in state.moreData"
+                  :key="index"
+                  :class="{
+                    active: state.value === moreNode[valueField],
+                    'more-item': true
+                  }"
+                  @click="moreNodeClick(moreNode)"
+                >
+                  {{ moreNode[textField] }}
+                </li>
+              </ul>
+            </tiny-popover>
+          </li>
+          <li v-if="showEdit" class="tiny-group-item__edit">
+            <tiny-button @click="$emit('edit')" class="edit-button">
+              <icon-writing></icon-writing>
+            </tiny-button>
+          </li>
+        </ul>
+      </template>
+      <span v-else class="tiny-button-group--empty"> 暂无数据 </span>
     </slot>
   </div>
 </template>