feat: add space site and fix some bug

tdesign/desktop/site/src/components/web/common/index.tsx

@@ -1,17 +1,17 @@
 import { WeElement, define, h, tag, createRef } from 'omi'
-import css from "./base.css"
+import css from './base.css'
 define(
-    'demo-wrapper',
-    class extends WeElement {
-      static css = css
-      render() {
-        return (
-          <>
-            <div class="demo-wrapper">
-              <slot></slot>
-            </div>
-          </>
-        )
-      }
-    },
-  )
+  'demo-wrapper',
+  class extends WeElement {
+    static css = css
+    render(props) {
+      return (
+        <>
+          <div class="demo-wrapper" style={props.style}>
+            <slot></slot>
+          </div>
+        </>
+      )
+    }
+  },
+)

tdesign/desktop/site/src/components/web/divider/index.tsx

@@ -8,15 +8,15 @@ import * as marked from 'marked'
 const docsHTML = marked.parse(`
 
 ## API
-### Link Props
+### Divider Props
 
 name | type | default | description | required
 -- | -- | -- | -- | --
 className | String | - | 类名 | N
 style | Object | - | 样式，Typescript：\`React.CSSProperties\` | N
 align | String | center | options：left/right/center | N
-children | TNode | - | Typescript：\`string \| TNode\`。[see more ts definition](https://github.com/Tencent/omi/blob/master/tdesign/desktop/src/common.ts) | N
-content | TNode | - | Typescript：\`string \| TNode\`。[see more ts definition](https://github.com/Tencent/omi/blob/master/tdesign/desktop/src/common.ts) | N
+children | TNode | - | Typescript：\`string \\|  TNode\`。[see more ts definition](https://github.com/Tencent/omi/blob/master/tdesign/desktop/src/common.ts) | N
+content | TNode | - | Typescript：\`string \\|  TNode\`。[see more ts definition](https://github.com/Tencent/omi/blob/master/tdesign/desktop/src/common.ts) | N
 dashed | Boolean | false | \- | N
 layout | String | horizontal | options：horizontal/vertical | N
 

tdesign/desktop/site/src/components/web/link/index.tsx

@@ -7,7 +7,7 @@ import '../../../../../src/link/_example/icon'
 import '../../../../../src/link/_example/size'
 import '../../../../../src/link/_example/theme'
 import '../../../../../src/link/_example/underline'
-import * as marked from "marked"
+import * as marked from 'marked'
 
 const docsHTML = marked.parse(`
 
@@ -16,8 +16,8 @@ const docsHTML = marked.parse(`
 
 名称 | 类型 | 默认值 | 说明 | 必传
 -- | -- | -- | -- | --
-content | TNode | - | 链接内容。TS 类型：\`string \| TNode\`。[通用类型定义](https://github.com/Tencent/omi/blob/master/tdesign/desktop/src/common.ts) | N
-default | TNode | - | 链接内容，同 content。TS 类型：\`string \| TNode\`。[通用类型定义](https://github.com/Tencent/omi/blob/master/tdesign/desktop/src/common.ts) | N
+content | TNode | - | 链接内容。TS 类型：\`string \\|  TNode\`。[通用类型定义](https://github.com/Tencent/omi/blob/master/tdesign/desktop/src/common.ts) | N
+default | TNode | - | 链接内容，同 content。TS 类型：\`string \\|  TNode\`。[通用类型定义](https://github.com/Tencent/omi/blob/master/tdesign/desktop/src/common.ts) | N
 disabled | Boolean | - | 禁用链接 | N
 hover | String | underline | 链接悬浮态样式，有 文本颜色变化、添加下划线等 2 种方法。可选项：color/underline | N
 href | String | - | 跳转链接 | N
@@ -94,9 +94,7 @@ define(
               带图标的文字链接 <a class="header-anchor" href="#带图标的文字链接"></a>
             </h4>
             <p>文字链接与图标搭配使用，通过图标快速了解链接所代表的含义。</p>
-            <demo-wrapper>
-              icon待完善
-            </demo-wrapper>
+            <demo-wrapper>icon待完善</demo-wrapper>
             <h3 id="链接悬浮态样式的链接">
               链接悬浮态样式的链接 <a class="header-anchor" href="#链接悬浮态样式的链接"></a>
             </h3>
@@ -126,8 +124,15 @@ define(
             <demo-wrapper>
               <link-disabled></link-disabled>
             </demo-wrapper>
-            <h3 id="不同尺寸的链接">不同尺寸的链接 <a class="header-anchor" href="#不同尺寸的链接"></a></h3>
-            <p>提供大、中（默认）、小三种尺寸。<h3 id="不同尺寸的链接">不同尺寸的链接 <a class="header-anchor" href="#不同尺寸的链接"></a></h3></p>
+            <h3 id="不同尺寸的链接">
+              不同尺寸的链接 <a class="header-anchor" href="#不同尺寸的链接"></a>
+            </h3>
+            <p>
+              提供大、中（默认）、小三种尺寸。
+              <h3 id="不同尺寸的链接">
+                不同尺寸的链接 <a class="header-anchor" href="#不同尺寸的链接"></a>
+              </h3>
+            </p>
             <demo-wrapper>
               <link-size></link-size>
             </demo-wrapper>
@@ -136,12 +141,11 @@ define(
             <div
               style="margin-bottom:76px"
               dangerouslySetInnerHTML={{
-                __html: docsHTML
-              }}>
-            </div>
-          </div>
-          <div style={this.isShow('design')} name="DESIGN">
+                __html: docsHTML,
+              }}
+            ></div>
           </div>
+          <div style={this.isShow('design')} name="DESIGN"></div>
         </>
       )
     }

tdesign/desktop/site/src/components/web/space/index.tsx

@@ -0,0 +1,141 @@
+import { WeElement, define, h, createRef } from 'omi'
+import '../common/index'
+import '../../../../../src/space/_example/base'
+import '../../../../../src/space/_example/align'
+import '../../../../../src/space/_example/break-line'
+import '../../../../../src/space/_example/separator'
+import '../../../../../src/space/_example/size'
+import '../../../../../src/space/_example/vertical'
+import * as marked from 'marked'
+
+const docsHTML = marked.parse(`
+
+## API
+### Space Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+className | String | - | 类名 | N
+style | Object | - | 样式，TS 类型：\`React.CSSProperties\` | N
+align | String | - | 对齐方式。可选项：start/end/center/baseline | N
+breakLine | Boolean | false | 是否自动换行，仅在 horizontal 时有效	 | N
+direction | String | horizontal | 间距方向。可选项：vertical/horizontal | N
+separator | TNode | - | 分隔符。TS 类型：\`string \\| TNode\`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
+size | String / Number / Array | 'medium' | 间距大小。TS 类型：\`SpaceSize \\| SpaceSize[]\` \`type SpaceSize = number \\| string \\| SizeEnum\`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/space/type.ts) | N
+
+`)
+interface Props {
+  tab: string
+}
+
+define(
+  'page-space',
+  class extends WeElement<Props> {
+    static css = `td-doc-tabs {
+      margin-top: -140px;
+    }`
+    static defaultProps = {
+      tab: 'demo',
+    }
+
+    tab = ['demo', 'api', 'design']
+    tdDocHeader = createRef()
+    tdDocTabs = createRef()
+
+    static propTypes = {
+      tab: String,
+    }
+
+    updateTab = (t: string) => {
+      this.updateProps({
+        tab: t,
+      })
+    }
+
+    isShow(tabStr: string) {
+      return this.props.tab === tabStr ? { display: 'block' } : { display: 'none' }
+    }
+
+    installed() {
+      this.tdDocTabs.current.onchange = ({ detail: currentTab }) => {
+        this.updateTab(currentTab)
+      }
+    }
+
+    render() {
+      return (
+        <>
+          <td-doc-tabs ref={this.tdDocTabs} tab={this.props.tab} style="display:block"></td-doc-tabs>
+          <div style={this.isShow('demo')} name="DEMO">
+            <h3 id="基本用法">
+              基本用法 <a class="header-anchor" href="#基本用法"></a>
+            </h3>
+            <p>默认为横向排列，控制相邻组件水平间距。</p>
+            <demo-wrapper>
+              <space-base></space-base>
+            </demo-wrapper>
+            <h3 id="垂直间距">
+              垂直间距 <a class="header-anchor" href="#垂直间距"></a>
+            </h3>
+            <p>
+              可以设置 <td-code text="direction=vertical"></td-code> 调整为竖向排列。
+            </p>
+            <demo-wrapper>
+              <space-vertical></space-vertical>
+            </demo-wrapper>
+            <h3 id="间距大小">
+              间距大小 <a class="header-anchor" href="#间距大小"></a>
+            </h3>
+            <p>
+              可以通过 <td-code text="size"></td-code> 调整间距大小，自带三个可选值 <td-code text="small"></td-code>、
+              <td-code text="medium"></td-code>、<td-code text="large"></td-code>。 也可以自定义设置，设置为数组时参数为{' '}
+              <td-code text="[row-gap, column-gap]"></td-code>。
+            </p>
+
+            <demo-wrapper>
+              <space-size></space-size>
+            </demo-wrapper>
+            <h3 id="对齐方式">
+              对齐方式 <a class="header-anchor" href="#对齐方式"></a>
+            </h3>
+            <p>
+              可以通过 <td-code text="align"></td-code> 设置辅轴对齐方式，效果与 <td-code text="align-items"></td-code>{' '}
+              一致。
+            </p>
+
+            <demo-wrapper>
+              <space-align></space-align>
+            </demo-wrapper>
+            <h3 id="自动换行">
+              自动换行 <a class="header-anchor" href="#自动换行"></a>
+            </h3>
+            <p>
+              可以通过 <td-code text="breakLine"></td-code> 控制是否自动换行，默认不换行。
+            </p>
+            <demo-wrapper>
+              <space-break-line></space-break-line>
+            </demo-wrapper>
+            <h3 id="设置分隔符">
+              设置分隔符 <a class="header-anchor" href="#设置分隔符"></a>
+            </h3>
+            <p>
+              可以通过 <td-code text="separator"></td-code> 设置分隔符。
+            </p>
+            <demo-wrapper>
+              <space-separator></space-separator>
+            </demo-wrapper>
+          </div>
+          <div style={this.isShow('api')} name="API">
+            <div
+              style="margin-bottom:76px"
+              dangerouslySetInnerHTML={{
+                __html: docsHTML,
+              }}
+            ></div>
+          </div>
+          <div style={this.isShow('design')} name="DESIGN"></div>
+        </>
+      )
+    }
+  },
+)

tdesign/desktop/site/src/router.ts

@@ -90,6 +90,13 @@ export function registerRouting(rootEl: any) {
     })
   })
 
+  route('/space', () => {
+    import('./components/web/space/index').then(() => {
+      rootEl.data.tagName = 'page-space'
+      rootEl.update()
+    })
+  })
+
   route('*', function () {
     console.log('not found')
   })

tdesign/desktop/src/divider/divider.tsx

@@ -3,7 +3,7 @@ import { DividerProps } from './type'
 import css from './style/index'
 
 @tag('t-divider')
-export default class Link extends WeElement<DividerProps> {
+export default class Divider extends WeElement<DividerProps> {
   static css = css as string
 
   static defaultProps = {
@@ -17,8 +17,6 @@ export default class Link extends WeElement<DividerProps> {
     content: Object,
     dashed: Boolean,
     layout: String,
-    style: String,
-    class: String,
   }
 
   render(props: OmiProps<DividerProps>) {

tdesign/desktop/src/divider/type.ts

@@ -24,9 +24,4 @@ export interface DividerProps {
    * @default horizontal
    */
   layout?: 'horizontal' | 'vertical'
-  /**
-   * 样式
-   */
-  style?: string
-  class?: string
 }

tdesign/desktop/src/space/_example/align.tsx

@@ -0,0 +1,36 @@
+import { h, tag, WeElement } from 'omi'
+
+import '../index'
+import '../../button/index'
+
+@tag('space-align')
+export default class SpaceAlign extends WeElement {
+  render() {
+    return (
+      <h>
+        <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>
+      </h>
+    )
+  }
+}

tdesign/desktop/src/space/_example/base.tsx

@@ -12,9 +12,6 @@ export default class SpaceBase extends WeElement {
           <t-button>Button</t-button>
           <t-button>Button</t-button>
           <t-button>Button</t-button>
-          <p>button</p>
-          <p>button</p>
-          <p>button</p>
         </t-space>
       </h>
     )

tdesign/desktop/src/space/_example/break-line.tsx

@@ -0,0 +1,38 @@
+import { h, tag, WeElement } from 'omi'
+
+import '../index'
+import '../../button/index'
+
+@tag('space-break-line')
+export default class SpaceBreakLine extends WeElement {
+  render() {
+    return (
+      <h>
+        <div>
+          <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>
+        </div>
+      </h>
+    )
+  }
+}