feat: 新增 Space 组件 (#1035)

* feat: 新增 Space 组件

* feat: 新增 Space 组件

* feat: live demo

* feat: 优化文案

* fix: space props

* feat: update common

Co-authored-by: pengYYY <pengyue970715@gmail.com>

examples/card/demos/footer-actions.vue

@@ -9,15 +9,15 @@
             </t-button>
           </t-col>
           <t-col flex="none">
-            <t-divider theme="vertical" />
+            <t-divider layout="vertical" />
           </t-col>
           <t-col flex="auto">
             <t-button block variant="text" shape="square">
               <chat-icon size="24" />
             </t-button>
           </t-col>
           <t-col flex="none">
-            <t-divider theme="vertical" />
+            <t-divider layout="vertical" />
           </t-col>
           <t-col flex="auto">
             <t-button block variant="text" shape="square">

examples/card/demos/footer.vue

@@ -14,15 +14,15 @@
           </t-button>
         </t-col>
         <t-col flex="none">
-          <t-divider theme="vertical" />
+          <t-divider layout="vertical" />
         </t-col>
         <t-col flex="auto">
           <t-button block variant="text">
             <chat-icon size="24" />
           </t-button>
         </t-col>
         <t-col flex="none">
-          <t-divider theme="vertical" />
+          <t-divider layout="vertical" />
         </t-col>
         <t-col flex="auto">
           <t-button block variant="text">

examples/card/demos/header-footer-actions.vue

@@ -20,15 +20,15 @@
           </t-button>
         </t-col>
         <t-col flex="none">
-          <t-divider theme="vertical" />
+          <t-divider layout="vertical" />
         </t-col>
         <t-col flex="auto">
           <t-button block variant="text">
             <chat-icon size="24" />
           </t-button>
         </t-col>
         <t-col flex="none">
-          <t-divider theme="vertical" />
+          <t-divider layout="vertical" />
         </t-col>
         <t-col flex="auto">
           <t-button block variant="text">

examples/card/demos/header-subtitle-footer-actions.vue

@@ -17,15 +17,15 @@
           </t-button>
         </t-col>
         <t-col flex="none">
-          <t-divider theme="vertical" />
+          <t-divider layout="vertical" />
         </t-col>
         <t-col flex="auto">
           <t-button block variant="text">
             <chat-icon size="24" />
           </t-button>
         </t-col>
         <t-col flex="none">
-          <t-divider theme="vertical" />
+          <t-divider layout="vertical" />
         </t-col>
         <t-col flex="auto">
           <t-button block variant="text">

examples/divider/demos/vertical.vue

@@ -1,11 +1,11 @@
 <template>
   <div>
     <span>正直</span>
-    <t-divider theme="vertical" />
+    <t-divider layout="vertical" />
     <span>进取</span>
-    <t-divider theme="vertical" />
+    <t-divider layout="vertical" />
     <span>合作</span>
-    <t-divider theme="vertical" dashed />
+    <t-divider layout="vertical" dashed />
     <span>创新</span>
   </div>
 </template>

examples/space/demos/align.vue

@@ -0,0 +1,36 @@
+<template>
+  <t-space break-line>
+    <t-space align="start" class="space-border">
+      <div>start</div>
+      <t-button>Button</t-button>
+      <div class="space-block"></div>
+    </t-space>
+    <t-space align="center" class="space-border">
+      <div>center</div>
+      <t-button>Button</t-button>
+      <div class="space-block"></div>
+    </t-space>
+    <t-space align="end" class="space-border">
+      <div>end</div>
+      <t-button>Button</t-button>
+      <div class="space-block"></div>
+    </t-space>
+    <t-space align="baseline" class="space-border">
+      <div>baseline</div>
+      <t-button>Button</t-button>
+      <div class="space-block"></div>
+    </t-space>
+  </t-space>
+</template>
+
+<style scoped>
+.space-border {
+  padding: 12;
+  border: 1px dashed var(--td-component-stroke);
+}
+.space-block {
+  background: var(--td-bg-color-component);
+  height: 60px;
+  width: 60px;
+}
+</style>

examples/space/demos/base.vue

@@ -0,0 +1,7 @@
+<template>
+  <t-space>
+    <t-button>Button</t-button>
+    <t-button>Button</t-button>
+    <t-button>Button</t-button>
+  </t-space>
+</template>

examples/space/demos/break-line.vue

@@ -0,0 +1,14 @@
+<template>
+  <t-space break-line>
+    <t-button>Button</t-button>
+    <t-button>Button</t-button>
+    <t-button>Button</t-button>
+    <t-button>Button</t-button>
+    <t-button>Button</t-button>
+    <t-button>Button</t-button>
+    <t-button>Button</t-button>
+    <t-button>Button</t-button>
+    <t-button>Button</t-button>
+    <t-button>Button</t-button>
+  </t-space>
+</template>

examples/space/demos/separator.vue

@@ -0,0 +1,11 @@
+<template>
+  <t-space align="center" :separator="separator">
+    <t-button variant="text">Text</t-button>
+    <t-button variant="text">Text</t-button>
+    <t-button variant="text">Text</t-button>
+  </t-space>
+</template>
+
+<script setup lang="jsx">
+const separator = <t-divider layout="vertical" />;
+</script>

examples/space/demos/size.vue

@@ -0,0 +1,18 @@
+<template>
+  <div>
+    <t-slider v-model="size"></t-slider>
+    <br />
+    <t-space :size="size">
+      <t-button>Button</t-button>
+      <t-button>Button</t-button>
+      <t-button>Button</t-button>
+      <t-button>Button</t-button>
+    </t-space>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const size = ref(8);
+</script>

examples/space/demos/vertical.vue

@@ -0,0 +1,13 @@
+<template>
+  <t-space direction="vertical">
+    <t-card title="标题" actions="操作" header bordered hover-shadow>
+      仅有内容区域的卡片形式。卡片内容区域可以是文字、图片、表单、表格等形式信息内容。可使用大中小不同的卡片尺寸，按业务需求进行呈现。
+    </t-card>
+    <t-card title="标题" actions="操作" header bordered hover-shadow>
+      仅有内容区域的卡片形式。卡片内容区域可以是文字、图片、表单、表格等形式信息内容。可使用大中小不同的卡片尺寸，按业务需求进行呈现。
+    </t-card>
+    <t-card title="标题" actions="操作" header bordered hover-shadow>
+      仅有内容区域的卡片形式。卡片内容区域可以是文字、图片、表单、表格等形式信息内容。可使用大中小不同的卡片尺寸，按业务需求进行呈现。
+    </t-card>
+  </t-space>
+</template>

examples/space/space.md

@@ -0,0 +1,13 @@
+:: BASE_DOC ::
+
+## API
+
+### Space Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+align | String | - | 对齐方式。可选项：start/end/center/baseline | N
+breakLine | Boolean | false | 是否自动换行，仅在 horizontal 时有效	 | N
+direction | String | horizontal | 间距方向。可选项：vertical/horizontal | N
+separator | String / Slot / Function | - | 分隔符。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
+size | String / Number | medium | 间距大小。可选项：small/medium/large。TS 类型：`SpaceSize | SpaceSize[]` `type SpaceSize = number | string | SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/space/type.ts) | N

examples/space/usage/index.vue

@@ -0,0 +1,32 @@
+<!-- 该脚本为自动生成，如有需要请在 /script/generate-usage/index.js 中调整 -->
+<template>
+  <base-usage :code="usageCode" :config-list="configList" :panel-list="panelList" @PanelChange="onPanelChange">
+    <template #space="{ configProps }"
+      ><t-space v-bind="configProps">
+        <t-button>Button</t-button>
+        <t-button>Button</t-button>
+        <t-button>Button</t-button>
+        <t-button>Button</t-button>
+      </t-space></template
+    >
+  </base-usage>
+</template>
+
+<script setup lang="jsx">
+/* eslint-disable */
+import { ref, onMounted } from 'vue';
+import configJson from './props.json';
+
+const configList = ref(configJson);
+const panelList = [{ label: 'space', value: 'space' }];
+
+const usageCodeMap = {
+  space:
+    '\n        <t-space v-bind="configProps">\n          <t-button>Button</t-button>\n          <t-button>Button</t-button>\n          <t-button>Button</t-button>\n          <t-button>Button</t-button>\n        </t-space>\n      ',
+};
+const usageCode = ref(`<template>${usageCodeMap[panelList[0].value].trim()}</template>`);
+
+function onPanelChange(panel) {
+  usageCode.value = `<template>${usageCodeMap[panel].trim()}</template>`;
+}
+</script>

examples/space/usage/props.json

@@ -0,0 +1,42 @@
+[
+  {
+    "name": "breakLine",
+    "type": "Boolean",
+    "defaultValue": false,
+    "options": []
+  },
+  {
+    "name": "direction",
+    "type": "enum",
+    "defaultValue": "horizontal",
+    "options": [
+      {
+        "label": "vertical",
+        "value": "vertical"
+      },
+      {
+        "label": "horizontal",
+        "value": "horizontal"
+      }
+    ]
+  },
+  {
+    "name": "size",
+    "type": "enum",
+    "defaultValue": "medium",
+    "options": [
+      {
+        "label": "small",
+        "value": "small"
+      },
+      {
+        "label": "medium",
+        "value": "medium"
+      },
+      {
+        "label": "large",
+        "value": "large"
+      }
+    ]
+  }
+]

script/generate-usage/config.js

@@ -621,4 +621,17 @@ module.exports = {
       `,
     },
   },
+  space: {
+    panelStr: `const panelList = [{label: 'space', value: 'space'}];`,
+    render: {
+      space: `
+        <t-space v-bind="configProps">
+          <t-button>Button</t-button>
+          <t-button>Button</t-button>
+          <t-button>Button</t-button>
+          <t-button>Button</t-button>
+        </t-space>
+      `,
+    },
+  },
 };

site/site.config.mjs

@@ -66,12 +66,6 @@ export default {
           path: '/vue-next/components/button',
           component: () => import('@/examples/button/button.md'),
         },
-        {
-          title: 'Divider 分割线',
-          name: 'divider',
-          path: '/vue-next/components/divider',
-          component: () => import('@/examples/divider/divider.md'),
-        },
         {
           title: 'Icon 图标',
           name: 'icon',
@@ -96,6 +90,18 @@ export default {
           path: '/vue-next/components/layout',
           component: () => import('@/examples/layout/layout.md'),
         },
+        {
+          title: 'Divider 分割线',
+          name: 'divider',
+          path: '/vue-next/components/divider',
+          component: () => import('@/examples/divider/divider.md'),
+        },
+        {
+          title: 'Space 间距',
+          name: 'space',
+          path: '/vue-next/components/space',
+          component: () => import('@/examples/space/space.md'),
+        },
       ],
     },
     {

src/components.ts

@@ -1,11 +1,12 @@
 // 基础
 export * from './button';
-export * from './divider';
 export * from './icon';
 
 // 布局
 export * from './grid';
 export * from './layout';
+export * from './divider';
+export * from './space';
 
 // 导航
 export * from './affix';

src/divider/divider.tsx

@@ -12,12 +12,12 @@ export default defineComponent({
     const COMPONENT_NAME = usePrefixClass('divider');
     const renderContent = useContent();
     return () => {
-      const { theme, dashed, align } = props;
+      const { layout, dashed, align } = props;
       const children = renderContent('default', 'content');
 
       const dividerClassNames = [
         `${COMPONENT_NAME.value}`,
-        [`${COMPONENT_NAME.value}--${theme}`],
+        [`${COMPONENT_NAME.value}--${layout}`],
         {
           [`${COMPONENT_NAME.value}--dashed`]: !!dashed,
           [`${COMPONENT_NAME.value}--with-text`]: !!children,

src/divider/props.ts

@@ -35,12 +35,4 @@ export default {
       return ['horizontal', 'vertical'].includes(val);
     },
   },
-  /** 已废弃。请更为使用 `layout`。分隔线类型有两种：水平和垂直 */
-  theme: {
-    type: String as PropType<TdDividerProps['theme']>,
-    default: 'horizontal' as TdDividerProps['theme'],
-    validator(val: TdDividerProps['theme']): boolean {
-      return ['horizontal', 'vertical'].includes(val);
-    },
-  },
 };

src/divider/type.ts

@@ -31,10 +31,4 @@ export interface TdDividerProps {
    * @default horizontal
    */
   layout?: 'horizontal' | 'vertical';
-  /**
-   * 请更为使用 `layout`。分隔线类型有两种：水平和垂直
-   * @default horizontal
-   * @deprecated
-   */
-  theme?: 'horizontal' | 'vertical';
 }

src/space/index.ts

@@ -0,0 +1,10 @@
+import _Space from './space';
+import withInstall from '../utils/withInstall';
+
+import './style';
+
+export * from './type';
+
+export const Space = withInstall(_Space);
+
+export default Space;