Merge pull request #786 from GuYith/master

feat: link and divider site, fix children

tdesign/desktop/site/pwaConfig.js

@@ -19,4 +19,4 @@ export default {
  },
  ],
  },
-};
+}

tdesign/desktop/site/src/components/web/common/base.css

@@ -0,0 +1,6 @@
+.demo-wrapper{
+ margin: 20px auto; padding: 40px; 
+ border: 1px solid rgb(231, 231, 231); 
+ border-top-left-radius: 5px; 
+ border-top-right-radius: 5px; 
+}

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

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

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

@@ -0,0 +1,106 @@
+import { WeElement, define, h, createRef } from 'omi'
+import '../common/index'
+import '../../../../../src/divider/_example/base'
+import '../../../../../src/divider/_example/text'
+import '../../../../../src/divider/_example/vertical'
+import * as marked from 'marked'
+
+const docsHTML = marked.parse(`
+
+## API
+### Link 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:/Tencent/omi/blob/master/tdesign/desktop/src/common.ts) | N
+content | TNode | - | Typescript：\`string \| TNode\`。[see more ts definition](https:/Tencent/omi/blob/master/tdesign/desktop/src/common.ts) | N
+dashed | Boolean | false | \- | N
+layout | String | horizontal | options：horizontal/vertical | N
+
+`)
+interface Props {
+ tab: string
+}
+
+define(
+ 'page-divider',
+ 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>
+ <h4 id="水平分割线">
+ 水平分割线 <a class="header-anchor" href="#水平分割线"></a>
+ </h4>
+ <p>水平分割线常用来对不同元素内容进行分割。</p>
+ <demo-wrapper>
+ <divider-base></divider-base>
+ </demo-wrapper>
+ <h4 id="垂直分割线">
+ 垂直分割线 <a class="header-anchor" href="#垂直分割线"></a>
+ </h4>
+ <p>垂直分割线常用来做行内分割。</p>
+ <demo-wrapper>
+ <divider-vertical></divider-vertical>
+ </demo-wrapper>
+ <h3 id="带文字的分割线">
+ 带文字的分割线 <a class="header-anchor" href="#带文字的分割线"></a>
+ </h3>
+ <p>带文字的分割线是在分割线中嵌入文字，在需要对分割内容进行解释说明时使用。</p>
+ <demo-wrapper>
+ <divider-text></divider-text>
+ </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/components/web/link/index.tsx

@@ -0,0 +1,149 @@
+import { WeElement, define, h, createRef } from 'omi'
+import '../common/index'
+import '../../../../../src/link/_example/base'
+import '../../../../../src/link/_example/disabled'
+import '../../../../../src/link/_example/hover'
+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"
+
+const docsHTML = marked.parse(`
+
+## API
+### Link Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+content | TNode | - | 链接内容。TS 类型：\`string \| TNode\`。[通用类型定义](https:/Tencent/omi/blob/master/tdesign/desktop/src/common.ts) | N
+default | TNode | - | 链接内容，同 content。TS 类型：\`string \| TNode\`。[通用类型定义](https:/Tencent/omi/blob/master/tdesign/desktop/src/common.ts) | N
+disabled | Boolean | - | 禁用链接 | N
+hover | String | underline | 链接悬浮态样式，有 文本颜色变化、添加下划线等 2 种方法。可选项：color/underline | N
+href | String | - | 跳转链接 | N
+prefixIcon | TElement | - | 前置图标。TS 类型：\`TNode\`。[通用类型定义](https:/Tencent/omi/blob/master/tdesign/desktop/src/common.ts) | N
+size | String | medium | 尺寸。可选项：small/medium/large。TS 类型：\`SizeEnum\`。[通用类型定义](https:/Tencent/omi/blob/master/tdesign/desktop/src/common.ts) | N
+suffixIcon | TElement | - | 后置图标。TS 类型：\`TNode\`。[通用类型定义](https:/Tencent/omi/blob/master/tdesign/desktop/src/common.ts) | N
+target | String | - | 跳转方式，如：当前页面打开、新页面打开等，同 HTML 属性 target 含义相同 | N
+theme | String | default | 组件风格，依次为默认色、品牌色、危险色、警告色、成功色。可选项：default/primary/danger/warning/success | N
+underline | Boolean | - | 普通状态是否显示链接下划线 | N
+onClick | Function | | TS 类型：\`(e: MouseEvent) => void\`<br/>点击事件，禁用状态不会触发点击事件 | N
+
+`)
+interface Props {
+ tab: string
+}
+
+define(
+ 'page-link',
+ 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>
+ <h4 id="基础文字链接">
+ 基础文字链接 <a class="header-anchor" href="#基础文字链接"></a>
+ </h4>
+ <p>最简单的文字链接形式，点击后直接跳转到对应链接。</p>
+ <demo-wrapper>
+ <link-base></link-base>
+ </demo-wrapper>
+ <h4 id="下划线文字链接">
+ 下划线文字链接 <a class="header-anchor" href="#下划线文字链接"></a>
+ </h4>
+ <p>在文字下加横线，表明此处为链接。</p>
+ <demo-wrapper>
+ <link-underline></link-underline>
+ </demo-wrapper>
+ <h4 id="带图标的文字链接">
+ 带图标的文字链接 <a class="header-anchor" href="#带图标的文字链接"></a>
+ </h4>
+ <p>文字链接与图标搭配使用，通过图标快速了解链接所代表的含义。</p>
+ <demo-wrapper>
+ icon待完善
+ </demo-wrapper>
+ <h3 id="链接悬浮态样式的链接">
+ 链接悬浮态样式的链接 <a class="header-anchor" href="#链接悬浮态样式的链接"></a>
+ </h3>
+ <p>
+ 悬浮状态包含 2 种状态：文本颜色变化 和 添加下划线。由 <td-code text="hover"></td-code> 控制，可选值：
+ <td-code text="color | underline"></td-code>
+ </p>
+ <demo-wrapper>
+ <link-hover></link-hover>
+ </demo-wrapper>
+
+ <h3 id="提示不同状态的链接">
+ 提示不同状态的链接 <a class="header-anchor" href="#提示不同状态的链接"></a>
+ </h3>
+ <p>
+ 在<td-code text="default、primary、success、warning、danger"></td-code>
+ 不同状态下，可提供对应的链接主题色。
+ </p>
+ <demo-wrapper>
+ <link-theme></link-theme>
+ </demo-wrapper>
+
+ <h3 id="禁用的链接">
+ 禁用的链接 <a class="header-anchor" href="#禁用的链接"></a>
+ </h3>
+ <p>当链接不可用时，显示禁用状态。</p>
+ <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>
+ <demo-wrapper>
+ <link-size></link-size>
+ </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

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

tdesign/desktop/src/divider/_example/text.tsx

@@ -14,13 +14,13 @@ export default class DividerText extends WeElement {
  <p>
  通过高效广告平台，协助品牌和市场营销者触达数以亿计的中国消费者通过金融科技及企业服务，促进合作伙伴业务发展，助力实现数字化升级，我们大力投资于人才队伍和推动科技创新，积极参与互联网行业协同发展。
  </p>
- <t-divider align="center" style="background-color: red">
+ <t-divider align="center">
  TDesign
  </t-divider>
  <p>
  通过高效广告平台，协助品牌和市场营销者触达数以亿计的中国消费者通过金融科技及企业服务，促进合作伙伴业务发展，助力实现数字化升级，我们大力投资于人才队伍和推动科技创新，积极参与互联网行业协同发展。
  </p>
- <t-divider align="right"></t-divider>
+ <t-divider align="right">TDesign</t-divider>
  <p>
  通过高效广告平台，协助品牌和市场营销者触达数以亿计的中国消费者通过金融科技及企业服务，促进合作伙伴业务发展，助力实现数字化升级，我们大力投资于人才队伍和推动科技创新，积极参与互联网行业协同发展。
  </p>

tdesign/desktop/src/divider/divider.tsx

@@ -15,7 +15,6 @@ export default class Link extends WeElement<DividerProps> {
 
  static propTypes = {
  algin: String,
- children: Object,
  content: Object,
  dashed: Boolean,
  layout: String,
@@ -25,7 +24,6 @@ export default class Link extends WeElement<DividerProps> {
 
  render(props: OmiProps<DividerProps>) {
  const classPrefix = 't'
- // TODO: children is null
  const childNode = props.content || props.children
 
  const showText = props.layout !== 'vertical' && !!childNode
@@ -35,11 +33,13 @@ export default class Link extends WeElement<DividerProps> {
  [`${classPrefix}-divider--with-text`]: showText,
  [`${classPrefix}-divider--with-text-${props.align}`]: showText,
  })
- console.log('props.style', props.style)
+ console.log('props.children', props.children)
  return (
- <div class={dividerClassNames} style={props.style}>
- {showText ? <span class={`${classPrefix}-divider__inner-text`}>{childNode}</span> : null}
- </div>
+ <>
+ <div class={dividerClassNames} style={props.style}>
+ {showText ? <span class={`${classPrefix}-divider__inner-text`}>{childNode}</span> : null}
+ </div>
+ </>
  )
  }
 }