feat(): add space component

site/sidebar.config.ts

@@ -55,6 +55,20 @@ export default [
     ],
     tag: '',
   },
+  {
+    title: '布局',
+    name: 'layout',
+    type: 'component', // 组件文档
+    children: [
+      {
+        title: 'Space 间距',
+        name: 'space',
+        path: '/components/space',
+        component: () => import('tdesign-web-components/space/README.md'),
+      },
+    ],
+    tag: '',
+  },
   {
     title: '导航',
     name: 'navigation',

src/image/_example/fill-mode.tsx

@@ -5,12 +5,13 @@ export default function fillModeImage() {
   return (
     <t-space breakLine size={16}>
       {['fill', 'contain', 'cover', 'none', 'scale-down'].map((item) => (
-        <t-space direction="vertical" align="left" key={item}>
+        <t-space direction="vertical" align="center" key={item}>
           <t-image
             src="https://tdesign.gtimg.com/demo/demo-image-1.png"
             fit={item}
             style={{ width: 120, height: 120 }}
           />
+          {item}
         </t-space>
       ))}
     </t-space>

src/image/image.tsx

@@ -2,7 +2,7 @@
 // import 'tdesign-icons-omi/image-1';
 import '../space';
 
-import { classNames,Component, createRef, OmiProps, tag } from 'omi';
+import { classNames, Component, createRef, OmiProps, tag } from 'omi';
 
 import observe from '../_common/js/utils/observe';
 import { getClassPrefix } from '../_util/classname';
@@ -154,7 +154,7 @@ export default class Image extends Component<ImageProps> {
       ...rest
     } = props;
 
-    console.log('===src', src, onLoad, onError, lazy, overlayTrigger);
+    console.log('src', src, onLoad, onError, lazy, overlayTrigger);
     const renderOverlay = () => {
       if (!overlayContent) {
         return null;

src/space/README.md

@@ -0,0 +1,44 @@
+---
+title: Space 间距
+description: 控制组件之间的间距。
+isComponent: true
+usage: { title: '', description: '' }
+spline: layout
+---
+
+### 基本用法
+
+默认为横向排列，控制相邻组件水平间距。
+
+{{ base }}
+
+### 垂直间距
+
+可以设置 `direction=vertical` 调整为竖向排列。
+
+{{ vertical }}
+
+### 间距大小
+
+可以通过 `size` 调整间距大小，自带三个可选值 `small`、`medium`、`large`。
+也可以自定义设置，设置为数组时参数为 `[row-gap, column-gap]`。
+
+{{ size }}
+
+### 对齐方式
+
+可以通过 `align` 设置辅轴对齐方式，效果与 `align-items` 一致。
+
+{{ align }}
+
+### 自动换行
+
+可以通过 `breakLine` 控制是否自动换行，默认不换行。
+
+{{ break-line }}
+
+### 设置分隔符
+
+可以通过 `separator` 设置分隔符。
+
+{{ separator }}

src/space/_example/align.tsx

@@ -0,0 +1,29 @@
+import 'tdesign-web-components/space';
+import 'tdesign-web-components/button';
+
+export default function SpaceAlign() {
+  return (
+    <t-space breakLine>
+      <t-space align="start" style={{ padding: 12, border: '1px dashed var(--td-component-stroke)' }}>
+        <div>start</div>
+        <t-button>Button</t-button>
+        <div style={{ background: 'var(--td-bg-color-component)', height: 60, width: 60 }}></div>
+      </t-space>
+      <t-space align="center" style={{ padding: 12, border: '1px dashed var(--td-component-stroke)' }}>
+        <div>center</div>
+        <t-button>Button</t-button>
+        <div style={{ background: 'var(--td-bg-color-component)', height: 60, width: 60 }}></div>
+      </t-space>
+      <t-space align="end" style={{ padding: 12, border: '1px dashed var(--td-component-stroke)' }}>
+        <div>end</div>
+        <t-button>Button</t-button>
+        <div style={{ background: 'var(--td-bg-color-component)', height: 60, width: 60 }}></div>
+      </t-space>
+      <t-space align="baseline" style={{ padding: 12, border: '1px dashed var(--td-component-stroke)' }}>
+        <div>baseline</div>
+        <t-button>Button</t-button>
+        <div style={{ background: 'var(--td-bg-color-component)', height: 60, width: 60 }}></div>
+      </t-space>
+    </t-space>
+  );
+}

src/space/_example/base.tsx

@@ -0,0 +1,12 @@
+import 'tdesign-web-components/space';
+import 'tdesign-web-components/button';
+
+export default function SpaceBase() {
+  return (
+    <t-space>
+      <t-button>Button</t-button>
+      <t-button>Button</t-button>
+      <t-button>Button</t-button>
+    </t-space>
+  );
+}

src/space/_example/break-line.tsx

@@ -0,0 +1,29 @@
+import 'tdesign-web-components/space';
+import 'tdesign-web-components/button';
+
+export default function SpaceBreakLine() {
+  return (
+    <t-space breakLine size="small">
+      <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-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>
+  );
+}

src/space/_example/separator.tsx

@@ -0,0 +1,12 @@
+import 'tdesign-web-components/space';
+import 'tdesign-web-components/button';
+
+export default function SpaceSeparator() {
+  return (
+    <t-space align="center" separator={<t-divider layout="vertical" />}>
+      <t-button variant="text">Text</t-button>
+      <t-button variant="text">Text</t-button>
+      <t-button variant="text">Text</t-button>
+    </t-space>
+  );
+}

src/space/_example/size.tsx

@@ -0,0 +1,36 @@
+import 'tdesign-web-components/space';
+import 'tdesign-web-components/button';
+
+const size5 = 5;
+const size15 = 15;
+const size30 = 30;
+export default function SpaceSize() {
+  return (
+    <div>
+      {/* TODO: remain: add slider? */}
+      size: 5
+      <t-space size={size5}>
+        <t-button>Button</t-button>
+        <t-button>Button</t-button>
+        <t-button>Button</t-button>
+      </t-space>
+      <br />
+      <br />
+      size: 15
+      <t-space size={size15}>
+        <t-button>Button</t-button>
+        <t-button>Button</t-button>
+        <t-button>Button</t-button>
+      </t-space>
+      <br />
+      <br />
+      size: 30
+      <t-space size={size30}>
+        <t-button>Button</t-button>
+        <t-button>Button</t-button>
+        <t-button>Button</t-button>
+      </t-space>
+      <br />
+    </div>
+  );
+}

src/space/_example/vertical.tsx

@@ -0,0 +1,12 @@
+import 'tdesign-web-components/space';
+import 'tdesign-web-components/button';
+
+export default function SpaceVertical() {
+  return (
+    <t-space direction="vertical">
+      <t-button>Button</t-button>
+      <t-button>Button</t-button>
+      <t-button>Button</t-button>
+    </t-space>
+  );
+}

src/space/index.ts

@@ -0,0 +1,9 @@
+import './style/index.js';
+
+import _Space from './space';
+
+export type { TdSpaceProps } from './type';
+
+export const Space = _Space;
+
+export default Space;

src/space/space.tsx

@@ -0,0 +1,87 @@
+import { toArray } from 'lodash';
+import { classNames, Component, OmiProps, tag } from 'omi';
+
+import { getClassPrefix } from '../_util/classname';
+import { type StyledProps } from '../common';
+import { TdSpaceProps } from './type';
+
+export interface SpaceProps extends TdSpaceProps, StyledProps {}
+
+const SizeMap = { small: '8px', medium: '16px', large: '24px' };
+
+@tag('t-space')
+export default class Space extends Component<SpaceProps> {
+  static css = [];
+
+  static defaultProps = { breakLine: false, direction: 'horizontal', size: 'medium' };
+
+  static propTypes = {
+    algin: String,
+    breakLine: Boolean,
+    direction: String,
+    separator: Object,
+    size: Object,
+  };
+
+  componentName = `${getClassPrefix()}-space`;
+
+  renderGap = '';
+
+  renderStyle = {
+    gap: this.renderGap,
+    ...(this.props.breakLine ? { flexWrap: 'wrap' } : {}),
+    ...this.props.style,
+  };
+
+  install() {
+    if (Array.isArray(this.props.size)) {
+      this.renderGap = this.props.size
+        .map((s: string | number) => {
+          if (typeof s === 'number') return `${s}px`;
+          if (typeof s === 'string') return SizeMap[s] || this.props.size;
+          return s;
+        })
+        .join(' ');
+    } else if (typeof this.props.size === 'string') {
+      this.renderGap = SizeMap[this.props.size] || this.props.size;
+    } else if (typeof this.props.size === 'number') {
+      this.renderGap = `${this.props.size}px`;
+    }
+
+    this.renderStyle = {
+      gap: this.renderGap,
+      ...(this.props.breakLine ? { flexWrap: 'wrap' } : {}),
+      ...this.props.style,
+    };
+  }
+
+  render(props: OmiProps<SpaceProps>) {
+    function renderChildren() {
+      const children = toArray(props.children);
+      const childCount = children.length;
+      return children.map((child, index) => {
+        // const separatorNode = renderTNodeJSX(this, 'separator') check 效果
+        const showSeparator = index + 1 !== childCount && props.separator;
+        return (
+          <>
+            <div key={index} className={`${this.componentName}-item`}>
+              {child}
+            </div>
+            {showSeparator && <div className={`${this.componentName}-item-separator`}>{props.separator}</div>}
+          </>
+        );
+      });
+    }
+    return (
+      <div
+        style={this.renderStyle}
+        class={classNames(`${this.componentName}`, props.class, {
+          [`${this.componentName}-align-${props.align}`]: props.align,
+          [`${this.componentName}-${props.direction}`]: props.direction,
+        })}
+      >
+        {renderChildren()}
+      </div>
+    );
+  }
+}

src/space/style/index.ts

@@ -0,0 +1,10 @@
+import { css, globalCSS } from 'omi';
+
+// 为了做主题切换
+import styles from '../../_common/style/web/components/space/_index.less';
+
+export const styleSheet = css`
+  ${styles}
+`;
+
+globalCSS(styleSheet);

src/space/type.ts

@@ -0,0 +1,29 @@
+import { SizeEnum, TNode } from '../common';
+
+export interface TdSpaceProps {
+  /**
+   * 对齐方式
+   */
+  align?: 'start' | 'end' | 'center' | 'baseline';
+  /**
+   * 是否自动换行，仅在 horizontal 时有效
+   * @default false
+   */
+  breakLine?: boolean;
+  /**
+   * 间距方向
+   * @default horizontal
+   */
+  direction?: 'vertical' | 'horizontal';
+  /**
+   * 分隔符
+   */
+  separator?: TNode;
+  /**
+   * 间距大小
+   * @default 'medium'
+   */
+  size?: SpaceSize | SpaceSize[];
+}
+
+export type SpaceSize = number | string | SizeEnum;