textarea 1.0.4 and improve textarea in site

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

@@ -49,15 +49,29 @@ define(
  tab: 'demo',
  }
 
- static css = `code {
+ static css = `
+ code {
  margin: 0 2px;
  color: var(--error-8);
  background: var(--error-1);
  border-radius: 3px;
  padding: 2px 6px;
  font-size: 12px;
  word-break: break-word;
- }`
+ }
+
+ .tdesign-demo-item__body {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ flex-wrap: wrap;
+ min-height: 204px;
+ padding: 40px;
+ border-top-left-radius: 5px;
+ border-top-right-radius: 5px;
+ overflow: auto;
+ }
+ `
 
  tab = ['demo', 'api', 'design']
  tdDocHeader = createRef()
@@ -87,34 +101,179 @@ define(
  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>
+ <td-doc-usage
+ language="markup"
+ panel="textarea"
+ code='<t-textarea
+ allowInputOverMax={false}
+ autofocus={false}
+ autosize={false}
+ placeholder="请输入内容"
+ readonly={false}
+/>'
+ >
+ <div slot="textarea" style="width: 100%; display: flex; align-items: center; justify-content: center;">
+ <t-textarea placeholder="请输入内容" style="width: 100%;"></t-textarea>
+ </div>
+ </td-doc-usage>
+
+
+
+ <h3 id="基本多行文本框">
+ 基本多行文本框 <a class="header-anchor" href="#基本多行文本框"></a>
+ </h3>
  <p>用于多行文本的输入。</p>
- <demo-wrapper>
- <textarea-base></textarea-base>
- </demo-wrapper>
+ <td-doc-demo 
+ code='import { OmiProps, WeElement, h, tag, render } from "omi"
+import "../index"
+
+@tag("textarea-base")
+export default class TextareaBase extends WeElement{
+ render(){
+ return <h.f>
+ <t-textarea placeholder="请输入描述文案"></t-textarea>
+ <t-textarea placeholder="请输入文案，高度可自适应；autosize=true" autosize={true}></t-textarea>
+ <t-textarea placeholder="请输入文案，高度可自适应，最小3行，最大5行；autosize={minRows: 3, maxRows: 5}" autosize={{minRows: 3, maxRows: 5}}></t-textarea>
+ </h.f>
+ }
+}' language="jsx" mode="auto">
+ <div class='tdesign-demo-item__body'>
+ <div style="width: 100%;">
+ <textarea-base></textarea-base>
+ </div>
+ </div>
+ </td-doc-demo>
+
 
- <h3 id='限制最大字符数'>
- 限制最大字符数 <a class="header-anchor" href="#限制最大字符数"></a></h3>
+
+ <h3 id="限制最大字符数">
+ 限制最大字符数 <a class="header-anchor" href="#限制最大字符数"></a>
+ </h3>
  <p>用于多行文本的输入。</p>
- <demo-wrapper>
- <textarea-limit></textarea-limit>
- </demo-wrapper>
-
- <h3 id='绑定 DOM 事件'>
- 绑定 DOM 事件 <a class="header-anchor" href="#绑定 DOM 事件"></a></h3>
- <p>可绑定 <code>onKeypress</code> <code>onKeydown</code> <code>onKeyup</code> <code>onFocus</code> <code>onBlur</code> 等 DOM 原生事件。</p>
- <demo-wrapper>
- <textarea-event></textarea-event>
- </demo-wrapper>
-
- <h3 id='不同状态的多行文本框'>
- 不同状态的多行文本框 <a class="header-anchor" href="#不同状态的多行文本框"></a></h3>
+ <td-doc-demo code='import { OmiProps, WeElement, h, tag, render } from "omi"
+
+import "../index"
+import "../../space/index"
+
+@tag("textarea-limit")
+export default class TextareaLimit extends WeElement{
+
+ render(){
+ return <h.f>
+ <t-space direction="vertical" style={{ width: 100% }}>
+ <t-textarea placeholder="请输入描述文案，文本长度最多20，maxlength=20" maxlength="20"></t-textarea>
+ <t-textarea placeholder="请输入描述文案，最多20字符（一个汉字占两个字符长度），maxcharacter=20" maxcharacter="20"></t-textarea>
+ </t-space>
+ </h.f>
+
+ }
+}' language="jsx" mode="auto"> 
+ <div class='tdesign-demo-item__body'>
+ <div style="width: 100%;">
+ <textarea-limit></textarea-limit>
+ </div>
+ </div>
+ </td-doc-demo>
+
+
+ <h3 id="绑定 DOM 事件">
+ 绑定 DOM 事件 <a class="header-anchor" href="#绑定 DOM 事件"></a>
+ </h3>
+ <p>
+ 可绑定 <code>onKeypress</code> <code>onKeydown</code> <code>onKeyup</code> <code>onFocus</code>{' '}
+ <code>onBlur</code> 等 DOM 原生事件。
+ </p>
+
+ <td-doc-demo
+ code='import { OmiProps, WeElement, h, tag, render} from "omi"
+import "../index"
+
+@tag("textarea-event")
+export default class TextareaEvent extends WeElement {
+
+ evtDetail: number
+ value :string
+
+ onBlur = (evt : Event) =>{
+ console.log("onBlur", evt.detail.value, evt.detail.event)
+ }
+
+ onFocus = (evt : Event) =>{
+ console.log("onFocus", evt.detail.value, evt.detail.event)
+ }
+
+ onKeyup = (evt : Event) =>{
+ console.log("onKeyup", evt.detail.value, evt.detail.event)
+ }
+
+ onKeypress = (evt : Event) =>{
+ console.log("onKeypress", evt.detail.value, evt.detail.event)
+ }
+
+ onKeydown = (evt : Event) =>{
+ console.log("onKeydown", evt.detail.value, evt.detail.event)
+ }
+
+ render() {
+ return (
+ <h.f>
+ <t-textarea
+ placeholder="请输入"
+ // value={this.value}
+ onMyBlur={this.onBlur}
+ onMyFocus={this.onFocus}
+ onMyKeypress={this.onKeypress}
+ onMyKeydown={this.onKeydown}
+ onMyKeyup={this.onKeyup}
+ ></t-textarea>
+ </h.f>
+ )
+ }
+}' language="jsx" mode="auto">
+
+ <div class='tdesign-demo-item__body'>
+ <div style="width: 100%;">
+ <textarea-event></textarea-event>
+ </div>
+ </div>
+ </td-doc-demo>
+
+ <h3 id="不同状态的多行文本框">
+ 不同状态的多行文本框 <a class="header-anchor" href="#不同状态的多行文本框"></a>
+ </h3>
  <p>支持只读、禁用状态。</p>
- <demo-wrapper>
- <textarea-status></textarea-status>
- </demo-wrapper>
+
+ <td-doc-demo 
+ code='import { OmiProps, WeElement, h, tag, render } from "omi"
+
+import "../index"
+import "../../space/index"
+
+@tag("textarea-status")
+export default class TextareaStatus extends WeElement{
+
+ render(){
+ return <h.f>
+ <t-space direction="vertical" style={{ width: "100%" }}>
+ <t-textarea placeholder="禁用状态" disabled="true"></t-textarea>
+ <t-textarea placeholder="只读状态" readonly="true"></t-textarea>
+ <t-textarea placeholder="普通状态" readonly="true" tips="这是普通文本提示"></t-textarea>
+ <t-textarea placeholder="成功状态" tips="校验通过文本提示" status="success"></t-textarea>
+ <t-textarea placeholder="警告状态" tips="校验不通过文本提示" status="warning"></t-textarea>
+ <t-textarea placeholder="错误状态" tips="校验存在严重问题文本提示" status="error"></t-textarea>
+ </t-space>
+ </h.f>
+ }
+}'
+ language="jsx" mode="auto">
+ <div class='tdesign-demo-item__body'>
+ <div style="width: 100%;">
+ <textarea-status></textarea-status>
+ </div>
+ </div>
+ </td-doc-demo>
  </div>
  <div style={this.isShow('api')} name="API">
  <div

tdesign/desktop/site/src/meta.ts

@@ -118,6 +118,20 @@ const metaData = new Map([
  description: '用于承载过多的操作集合，通过下拉拓展的形式，收纳更多的操作。',
  },
  ],
+ [
+ 'list',
+ {
+ title: 'List 列表',
+ description: '列表用一个连续的列来显示多行元素，常用于具有相同构成及内容的模块批量展示，可承载多样化的信息内容，从纯文字到复杂的图文组合。',
+ },
+ ],
+ [
+ 'back-top',
+ {
+ title: 'BackTop 返回顶部',
+ description: '用于返回页面顶部',
+ },
+ ],
 ])
 
 const getMetaData = (componentName: string) => {

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

@@ -1,21 +1,17 @@
 import { OmiProps, WeElement, h, tag, render } from 'omi'
-
 import "../index"
-
+import "../../space/index"
 @tag("textarea-base")
 export default class TextareaBase extends WeElement{
- static css = `t-textarea {
- margin : 10px;
- }`
 
  render(){
 
  return <h.f>
- <t-textarea placeholder="请输入描述文案"></t-textarea>
- <t-textarea placeholder="请输入文案，高度可自适应；autosize=true" autosize={true}></t-textarea>
- <t-textarea placeholder="请输入文案，高度可自适应，最小3行，最大5行；autosize={minRows: 3, maxRows: 5}" autosize={{minRows: 3, maxRows: 5}}></t-textarea>
- {/* <t-textarea placeholder="请输入你的文本" autosize={true}></t-textarea>
- <t-textarea placeholder="请输入描述文案，文本长度最多20，maxlength=20" maxlength="20"></t-textarea> */}
+ <t-space direction="vertical" style={{ width: '100%' }}>
+  <t-textarea placeholder="请输入描述文案"></t-textarea>
+  <t-textarea placeholder="请输入文案，高度可自适应；autosize=true" autosize={true}></t-textarea>
+  <t-textarea placeholder="请输入文案，高度可自适应，最小3行，最大5行；autosize={minRows: 3, maxRows: 5}" autosize={{minRows: 3, maxRows: 5}}></t-textarea>
+ </t-space>
  </h.f>
 
  }

tdesign/desktop/src/textarea/_example/event.tsx

@@ -1,25 +1,13 @@
-import Install from '@src/icon/install'
 import { OmiProps, WeElement, h, tag, render} from 'omi'
 
 import '../index'
 
 @tag('textarea-event')
 export default class TextareaEvent extends WeElement {
- static css = `t-textarea {
- margin : 10px;
- }`
-
- // onKeypress(value:string, e:any) {
- // console.log('onKeypress: ', value, e);
- // }
 
  evtDetail: number
  value :string
 
-
- installed(){
-
- }
  onBlur = (evt : Event) =>{
  console.log('onBlur', evt.detail.value, evt.detail.event)
  }
@@ -40,7 +28,6 @@ export default class TextareaEvent extends WeElement {
  console.log('onKeydown', evt.detail.value, evt.detail.event)
  }
 
-
  render() {
  return (
  <h.f>

tdesign/desktop/src/textarea/_example/limit.tsx

@@ -1,18 +1,18 @@
 import { OmiProps, WeElement, h, tag, render } from 'omi'
 
 import "../index"
+import "../../space/index"
 
 @tag("textarea-limit")
 export default class TextareaLimit extends WeElement{
- static css = `t-textarea {
- margin : 10px;
- }`
+
 
  render(){
-
  return <h.f>
- <t-textarea placeholder="请输入描述文案，文本长度最多20，maxlength=20" maxlength="20"></t-textarea>
- <t-textarea placeholder="请输入描述文案，最多20字符（一个汉字占两个字符长度），maxcharacter=20" maxcharacter="20"></t-textarea>
+ <t-space direction="vertical" style={{ width: '100%' }}>
+ <t-textarea placeholder="请输入描述文案，文本长度最多20，maxlength=20" maxlength="20"></t-textarea>
+ <t-textarea placeholder="请输入描述文案，最多20字符（一个汉字占两个字符长度），maxcharacter=20" maxcharacter="20"></t-textarea>
+ </t-space>
  </h.f>
 
  }

tdesign/desktop/src/textarea/_example/status.tsx

@@ -1,22 +1,21 @@
-import { OmiProps, WeElement, h, tag, render } from 'omi'
+import { OmiProps, WeElement, h, tag, render } from "omi"
 
 import "../index"
+import "../../space/index"
 
 @tag("textarea-status")
 export default class TextareaStatus extends WeElement{
- static css = `t-textarea {
- margin : 10px;
- }`
 
  render(){
-
  return <h.f>
- <t-textarea placeholder="禁用状态" disabled="true"></t-textarea>
- <t-textarea placeholder="只读状态" readonly="true"></t-textarea>
- <t-textarea placeholder="普通状态" readonly="true" tips="这是普通文本提示"></t-textarea>
- <t-textarea placeholder="成功状态" tips="校验通过文本提示" status="success"></t-textarea>
- <t-textarea placeholder="警告状态" tips="校验不通过文本提示" status="warning"></t-textarea>
- <t-textarea placeholder="错误状态" tips="校验存在严重问题文本提示" status="error"></t-textarea>
+ <t-space direction="vertical" style={{ width: "100%" }}>
+ <t-textarea placeholder="禁用状态" disabled="true"></t-textarea>
+ <t-textarea placeholder="只读状态" readonly="true"></t-textarea>
+ <t-textarea placeholder="普通状态" readonly="true" tips="这是普通文本提示"></t-textarea>
+ <t-textarea placeholder="成功状态" tips="校验通过文本提示" status="success"></t-textarea>
+ <t-textarea placeholder="警告状态" tips="校验不通过文本提示" status="warning"></t-textarea>
+ <t-textarea placeholder="错误状态" tips="校验存在严重问题文本提示" status="error"></t-textarea>
+ </t-space>
  </h.f>
  }
 }