feat: 按钮组增加了一个props (#4032)

* feat(bttonFroup): 处理了按钮组，增加了一个 merge 功能，但是存在其他问题

* feat: add demo

* feat(button): 添加版本信息

Author: ourcx

examples/sites/demos/apis/button-group.js

@@ -110,6 +110,21 @@ export default {
           mode: ['pc', 'mobile-first'],
           pcDemo: 'text-value-field',
           mfDemo: ''
+        },
+        // displayMode
+        {
+          name: 'display-mode',
+          type: "'default' | 'merged'",
+          defaultValue: "'default'",
+          desc: {
+            'zh-CN': '按钮组显示模式，可选值为"default"和"merged"，默认为"default"。当设置为"merged"时，按钮组内的按钮将合并显示，形成一个整体的外观。',
+            'en-US': 'Button group display mode, optional values are "default" and "merged", the default is "default". When set to "merged", the buttons in the button group will be merged to form an overall appearance.'
+          },
+          mode: ['pc','mobile-first'],
+          pcDemo: 'display-mode',
+          meta: {
+            stable: '3.29.0'
+          }
         }
       ],
       events: [

examples/sites/demos/mobile-first/app/button-group/display-mode.vue

@@ -0,0 +1,31 @@
+<template>
+  <div>
+    <!-- 默认模式 -->
+    <tiny-button-group :data="groupData" v-model="checkedVal" />
+    <br>
+    <br>
+    
+    <!-- 圆角合并模式 -->
+    <tiny-button-group :data="groupData" v-model="checkedVal" display-mode="merged" />
+  </div>
+</template>
+
+<script>
+import { TinyButtonGroup } from "@opentiny/vue";
+
+export default {
+  components: {
+    TinyButtonGroup,
+  },
+  data() {
+    return {
+      checkedVal: "Button1",
+      groupData: [
+        { text: "Button1", value: "Button1" },
+        { text: "Button2", value: "Button2" },
+        { text: "Button3", value: "Button3" },
+      ],
+    };
+  },
+};
+</script>

examples/sites/demos/mobile-first/app/button-group/webdoc/button-group.js

@@ -52,6 +52,19 @@ export default {
         'en-US': '<p>bbutton click</p>'
       },
       codeFiles: ['enumeration.vue']
+    },
+    {
+      demoId: 'display-mode',
+      name: {
+        'zh-CN': '按钮组显示模式',
+        'en-US': 'button mode'
+      },
+      desc: {
+        'zh-CN':
+          '<p>通过 <code>display-mode</code> 属性设置按钮组显示模式，可选值有 <code>default</code>（默认）和 <code>merged</code>（选块合并）。</p>',
+        'en-US': '<p>button mode</p>'
+      },
+      codeFiles: ['display-mode.vue']
     }
   ]
 }

examples/sites/demos/pc/app/button-group/display-mode.spec.ts

@@ -0,0 +1,31 @@
+<template>
+  <div>
+    <!-- 默认模式 -->
+    <tiny-button-group :data="groupData" v-model="checkedVal" />
+    <br>
+    <br>
+    
+    <!-- 圆角合并模式 -->
+    <tiny-button-group :data="groupData" v-model="checkedVal" display-mode="merged" />
+  </div>
+</template>
+
+<script>
+import { TinyButtonGroup } from "@opentiny/vue";
+
+export default {
+  components: {
+    TinyButtonGroup,
+  },
+  data() {
+    return {
+      checkedVal: "Button1",
+      groupData: [
+        { text: "Button1", value: "Button1" },
+        { text: "Button2", value: "Button2" },
+        { text: "Button3", value: "Button3" },
+      ],
+    };
+  },
+};
+</script>

examples/sites/demos/pc/app/button-group/display-mode.vue

@@ -149,6 +149,20 @@ export default {
         'en-US': '<p>The <code>change</code> event is triggered when the selected button is changed. </p>'
       },
       codeFiles: ['change-event.vue']
+    },
+    {
+      demoId: 'display-mode',
+      name: {
+        'zh-CN': '按钮组显示模式',
+        'en-US': 'Button Group Display Mode'
+      },
+      desc: {
+        'zh-CN':
+        '<p>通过 <code>display-mode</code> 属性设置按钮组显示模式，可选值有 <code>default</code>（默认）和 <code>merged</code>（选块合并）。</p>',
+        'en-US':
+        '<p>Set the display mode of the button group through the <code>display-mode</code> attribute. The optional values are: <code>default</code> (default) and <code>merged</code> (merged).</p>'
+      },
+      codeFiles: ['display-mode.vue']
     }
   ],
   features: [

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

@@ -5,6 +5,7 @@ import type { handleChange, handleClick, moreNodeClick, getItemClass } from '../
 
 export type IButtonGroupProps = ExtractPropTypes<typeof buttonGroupProps>
 
+
 export interface IButtonGroupItemClass {
   disabled?: boolean
   plain?: boolean

packages/renderless/types/button-group.type.ts

@@ -200,3 +200,23 @@
     }
   }
 }
+.@{button-group-prefix-cls}--merged {
+  // 第一个按钮：左圆角
+  .@{group-item-prefix-cls} li:first-child > button {
+    border-top-left-radius: var(--tv-ButtonGroup-border-radius);
+    border-bottom-left-radius: var(--tv-ButtonGroup-border-radius);
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  // 最后一个按钮：右圆角
+  .@{group-item-prefix-cls} li:last-child > button {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    border-top-right-radius: var(--tv-ButtonGroup-border-radius);
+    border-bottom-right-radius: var(--tv-ButtonGroup-border-radius);
+  }
+  // 中间按钮：直角
+  .@{group-item-prefix-cls} li > button {
+    border-radius: 0;
+  }
+}

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

@@ -44,6 +44,11 @@ export const buttonGroupProps = {
   border: {
     type: Boolean,
     default: true
+  },
+  displayMode: {
+    type: String as PropType<'default' | 'merged'>,
+    default: 'default',
+    validator: (val: string) => ['default', 'merged'].includes(val)
   }
 }
 

packages/vue/src/button-group/src/index.ts

@@ -12,7 +12,7 @@
 <template>
   <div
     class="tiny-button-group"
-    :class="[size ? 'tiny-button-group--' + size : '', border ? '' : 'tiny-button-group--borderless']"
+    :class="[size ? 'tiny-button-group--' + size : '', border ? '' : 'tiny-button-group--borderless', displayMode === 'merged' ? 'tiny-button-group--merged' : '']"
   >
     <slot>
       <template v-if="data.length > 0">
@@ -134,7 +134,8 @@ export default defineComponent({
     'textField',
     'showMore',
     'showEdit',
-    'border'
+    'border',
+    'displayMode'
   ],
   components: {
     TinyPopover: Popover,