[Button] 新增ButtonGroup组件

src/button/_example/group.vue

@@ -1,36 +1,52 @@
 <template>
- <div class="demo-button-row">
- <div class="demo-button-col">
- <t-button theme="primary"> 确定 </t-button>
- <t-button variant="outline"> 取消 </t-button>
- </div>
- <div class="demo-button-col">
- <t-button theme="primary"> 下一步 </t-button>
- <t-button variant="outline"> 上一步 </t-button>
- </div>
- <div class="demo-button-col">
- <t-button theme="primary"> 新建主机 </t-button>
- <t-button variant="outline"> 重装系统 </t-button>
- <t-button variant="outline"> 批量续费 </t-button>
- <t-button variant="outline">
- <template #icon>
- <more-icon />
- </template>
- </t-button>
- </div>
- </div>
+ <t-space direction="vertical">
+ <t-space>
+ <t-button-group>
+ <t-button>选择</t-button>
+ <t-button theme="primary" shape="square" variant="base"><chevron-down-icon slot="icon" /></t-button>
+ </t-button-group>
+ </t-space>
+
+ <t-space>
+ <t-button-group>
+ <t-button>按钮1</t-button>
+ <t-button>按钮2</t-button>
+ </t-button-group>
+ </t-space>
+
+ <t-space>
+ <t-button-group>
+ <t-button theme="warning" shape="square" variant="base"><thumb-up-2-icon slot="icon" /></t-button>
+ <t-button theme="warning" shape="square" variant="base"><heart-icon slot="icon" /></t-button>
+ <t-button theme="warning" shape="square" variant="base"><star-icon slot="icon" /></t-button>
+ </t-button-group>
+ </t-space>
+
+ <t-space>
+ <t-button-group theme="success">
+ <t-button>按钮1</t-button>
+ <t-button>按钮2</t-button>
+ <t-button>按钮3</t-button>
+ </t-button-group>
+ </t-space>
+
+ <t-space>
+ <t-button-group size="large">
+ <t-button>大按钮1</t-button>
+ <t-button>大按钮2</t-button>
+ <t-button>大按钮2</t-button>
+ </t-button-group>
+ </t-space>
+
+ <t-space>
+ <t-button-group disabled>
+ <t-button>禁用按钮1</t-button>
+ <t-button>禁用按钮2</t-button>
+ </t-button-group>
+ </t-space>
+ </t-space>
 </template>
-<script setup>
-import { MoreIcon } from 'tdesign-icons-vue-next';
+
+<script setup lang="ts">
+import { ChevronDownIcon, ThumbUp2Icon, HeartIcon, StarIcon } from 'tdesign-icons-vue-next';
 </script>
-<style scoped>
-.demo-button-row {
- display: flex;
-}
-.demo-button-col + .demo-button-col {
- margin-left: 32px;
-}
-.t-button + .t-button {
- margin-left: 16px;
-}
-</style>

src/button/button-group-props.ts

@@ -0,0 +1,25 @@
+import { TdButtonGroupProps } from './button-group-type';
+import { PropType } from 'vue';
+
+export default {
+ /** 组件尺寸 */
+ size: {
+ type: String as PropType<TdButtonGroupProps['size']>,
+ validator(val: TdButtonGroupProps['size']): boolean {
+ if (!val) return true;
+ return ['extra-small', 'small', 'medium', 'large'].includes(val);
+ },
+ },
+ /** 组件风格，依次为默认色、品牌色、危险色、警告色、成功色 */
+ theme: {
+ type: String as PropType<TdButtonGroupProps['theme']>,
+ validator(val: TdButtonGroupProps['theme']): boolean {
+ if (!val) return true;
+ return ['default', 'primary', 'danger', 'warning', 'success'].includes(val);
+ },
+ },
+ disabled: {
+ type: Boolean,
+ default: false,
+ },
+};

src/button/button-group-type.ts

@@ -0,0 +1,17 @@
+import { SizeEnum } from '../common';
+
+export interface TdButtonGroupProps {
+ /**
+ * 组件尺寸
+ * @default medium
+ */
+ size?: SizeEnum;
+ /**
+ * 组件风格，依次为默认色、品牌色、危险色、警告色、成功色
+ */
+ theme?: 'default' | 'primary' | 'danger' | 'warning' | 'success';
+ /**
+ * 禁用状态
+ */
+ disabled?: boolean;
+}

src/button/button-group.tsx

@@ -0,0 +1,29 @@
+import { computed, defineComponent, h, provide } from 'vue';
+import props from './button-group-props';
+import { usePrefixClass } from '../hooks/useConfig';
+import { useContent } from '../hooks/tnode';
+import { ButtonGroupInjectionKey } from './constants';
+
+export default defineComponent({
+ name: 'TButtonGroup',
+ props,
+ setup(props) {
+ const renderContent = useContent();
+ const COMPONENT_NAME = usePrefixClass('button-group');
+
+ const buttonGroupClass = computed(() => [`${COMPONENT_NAME.value}`]);
+
+ provide(
+ ButtonGroupInjectionKey,
+ computed(() => ({
+ theme: props.theme,
+ size: props.size,
+ disabled: props.disabled,
+ })),
+ );
+ return () => {
+ const content = renderContent('default', 'content');
+ return <div class={buttonGroupClass.value}>{content}</div>;
+ };
+ },
+});

src/button/button.en-US.md

@@ -1,29 +1,38 @@
 :: BASE_DOC ::
 
 ## API
+
 ### Button Props
 
-name | type | default | description | required
--- | -- | -- | -- | --
-block | Boolean | false | make button to be a block-level element | N
-content | String / Slot / Function | - | button's children elements。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
-default | String / Slot / Function | - | default slot。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
-disabled | Boolean | undefined | disable the button, make it can not be clicked | N
-ghost | Boolean | false | make background-color to be transparent | N
-href | String | - | \- | N
-icon | Slot / Function | - | use it to set left icon in button。Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
-loading | Boolean | false | set button to be loading state | N
-shape | String | rectangle | button shape。options: rectangle/square/round/circle | N
-size | String | medium | a button has four size。options: extra-small/small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
-suffix | Slot / Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
-tag | String | - | HTML Tag Element。options: button/a/div | N
-theme | String | - | button theme。options: default/primary/danger/warning/success | N
-type | String | button | type of button element in html。options: submit/reset/button | N
-variant | String | base | variant of button。options: base/outline/dashed/text | N
-onClick | Function | | Typescript：`(e: MouseEvent) => void`<br/>trigger on click | N
+| name  | type  | default  | description  | required |
+| -------- | ------------------------ | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
+| block  | Boolean  | false  | make button to be a block-level element  | N |
+| content  | String / Slot / Function | -  | button's children elements。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts)  | N |
+| default  | String / Slot / Function | -  | default slot。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts)  | N |
+| disabled | Boolean  | undefined | disable the button, make it can not be clicked  | N |
+| ghost  | Boolean  | false  | make background-color to be transparent  | N |
+| href  | String  | -  | \-  | N |
+| icon  | Slot / Function  | -  | use it to set left icon in button。Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts)  | N |
+| loading  | Boolean  | false  | set button to be loading state  | N |
+| shape  | String  | rectangle | button shape。options: rectangle/square/round/circle  | N |
+| size  | String  | medium  | a button has four size。options: extra-small/small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N |
+| suffix  | Slot / Function  | -  | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts)  | N |
+| tag  | String  | -  | HTML Tag Element。options: button/a/div  | N |
+| theme  | String  | -  | button theme。options: default/primary/danger/warning/success  | N |
+| type  | String  | button  | type of button element in html。options: submit/reset/button  | N |
+| variant  | String  | base  | variant of button。options: base/outline/dashed/text  | N |
+| onClick  | Function  |  | Typescript：`(e: MouseEvent) => void`<br/>trigger on click  | N |
 
 ### Button Events
 
-name | params | description
--- | -- | --
-click | `(e: MouseEvent)` | trigger on click
+| name | params | description |
+| ----- | ----------------- | ---------------- |
+| click | `(e: MouseEvent)` | trigger on click |
+
+### ButtonGroup Props
+
+| 名称 | 类型 | 默认值 | 说明 | 必传 |
+| -------- | ------- | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---- |
+| size | String | - | a button has four size。options: extra-small/small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N |
+| disabled | Boolean | undefined | disable the button, make it can not be clicked | N |
+| theme | String | - | button theme。options: default/primary/danger/warning/success | N |