From b542b52554e8c75d244b67eb92080f9733313bba Mon Sep 17 00:00:00 2001 From: Gavi <604983389@qq.com> Date: Sat, 26 Aug 2023 14:59:32 +0800 Subject: [PATCH 1/2] textarea 1.0.3 and add textarea site --- tdesign/desktop/site/site.config.mjs | 350 +++++++++--------- .../src/components/web/textarea/index.tsx | 132 +++++++ tdesign/desktop/site/src/router.ts | 7 + .../desktop/src/textarea/_example/base.tsx | 13 +- .../desktop/src/textarea/_example/event.tsx | 59 +++ .../desktop/src/textarea/_example/limit.tsx | 19 + .../desktop/src/textarea/_example/status.tsx | 22 ++ tdesign/desktop/src/textarea/index.html | 3 +- tdesign/desktop/src/textarea/index.tsx | 54 ++- 9 files changed, 456 insertions(+), 203 deletions(-) create mode 100644 tdesign/desktop/site/src/components/web/textarea/index.tsx create mode 100644 tdesign/desktop/src/textarea/_example/event.tsx create mode 100644 tdesign/desktop/src/textarea/_example/limit.tsx create mode 100644 tdesign/desktop/src/textarea/_example/status.tsx diff --git a/tdesign/desktop/site/site.config.mjs b/tdesign/desktop/site/site.config.mjs index ba488d2f51..888c462b6e 100644 --- a/tdesign/desktop/site/site.config.mjs +++ b/tdesign/desktop/site/site.config.mjs @@ -225,183 +225,183 @@ export const docs = [ // }, // ], // }, - // { - // title: '输入', - // titleEn: 'Form', - // type: 'component', - // children: [ - // { - // title: 'AutoComplete 自动填充', - // titleEn: 'AutoComplete', - // name: 'auto-complete', - // path: '/omi/components/auto-complete', - // component: () => import('tdesign-omi/auto-complete/auto-complete.md'), - // componentEn: () => import('tdesign-omi/auto-complete/auto-complete.en-US.md'), - // }, - // { - // title: 'Cascader 级联组件', - // titleEn: 'Cascader', - // name: 'cascader', - // path: '/omi/components/cascader', - // component: () => import('tdesign-omi/cascader/cascader.md'), - // componentEn: () => import('tdesign-omi/cascader/cascader.en-US.md'), - // }, - // { - // title: 'Checkbox 多选框', - // titleEn: 'Checkbox', - // name: 'checkbox', - // path: '/omi/components/checkbox', - // component: () => import('tdesign-omi/checkbox/checkbox.md'), - // componentEn: () => import('tdesign-omi/checkbox/checkbox.en-US.md'), - // }, - // { - // title: 'ColorPicker 颜色选择器', - // titleEn: 'ColorPicker', - // name: 'color-picker', - // path: '/omi/components/color-picker', - // component: () => import('tdesign-omi/color-picker/color-picker.md'), - // componentEn: () => import('tdesign-omi/color-picker/color-picker.en-US.md'), - // }, - // { - // title: 'DatePicker 日期选择器', - // titleEn: 'DatePicker', - // name: 'date-picker', - // path: '/omi/components/date-picker', - // component: () => import('tdesign-omi/date-picker/date-picker.md'), - // componentEn: () => import('tdesign-omi/date-picker/date-picker.en-US.md'), - // }, - // { - // title: 'Form 表单', - // titleEn: 'Form', - // name: 'form', - // path: '/omi/components/form', - // component: () => import('tdesign-omi/form/form.md'), - // componentEn: () => import('tdesign-omi/form/form.en-US.md'), - // }, - // { - // title: 'Input 输入框', - // titleEn: 'Input', - // name: 'input', - // path: '/omi/components/input', - // component: () => import('tdesign-omi/input/input.md'), - // componentEn: () => import('tdesign-omi/input/input.en-US.md'), - // }, - // { - // title: 'InputAdornment 输入装饰器', - // titleEn: 'InputAdornment', - // name: 'input-adornment', - // path: '/omi/components/input-adornment', - // component: () => import('tdesign-omi/input-adornment/input-adornment.md'), - // componentEn: () => import('tdesign-omi/input-adornment/input-adornment.en-US.md'), - // }, - // { - // title: 'InputNumber 数字输入框', - // titleEn: 'InputNumber', - // name: 'input-number', - // path: '/omi/components/input-number', - // component: () => import('tdesign-omi/input-number/input-number.md'), - // componentEn: () => import('tdesign-omi/input-number/input-number.en-US.md'), - // }, - // { - // title: 'TagInput 标签输入框', - // titleEn: 'TagInput', - // name: 'tag-input', - // docType: 'form', - // path: '/omi/components/tag-input', - // component: () => import('tdesign-omi/tag-input/tag-input.md'), - // componentEn: () => import('tdesign-omi/tag-input/tag-input.en-US.md'), - // }, - // { - // title: 'Radio 单选框', - // titleEn: 'Radio', - // name: 'radio', - // path: '/omi/components/radio', - // component: () => import('tdesign-omi/radio/radio.md'), - // componentEn: () => import('tdesign-omi/radio/radio.en-US.md'), - // }, - // { - // title: 'RangeInput 范围输入框', - // titleEn: 'RangeInput', - // name: 'range-input', - // path: '/omi/components/range-input', - // component: () => import('tdesign-omi/range-input/range-input.md'), - // componentEn: () => import('tdesign-omi/range-input/range-input.en-US.md'), - // }, - // { - // title: 'Select 选择器', - // titleEn: 'Select', - // name: 'select', - // path: '/omi/components/select', - // component: () => import('tdesign-omi/select/select.md'), - // componentEn: () => import('tdesign-omi/select/select.en-US.md'), - // }, - // { - // title: 'SelectInput 筛选器输入框', - // titleEn: 'SelectInput', - // name: 'select-input', - // docType: 'form', - // path: '/omi/components/select-input', - // component: () => import('tdesign-omi/select-input/select-input.md'), - // componentEn: () => import('tdesign-omi/select-input/select-input.en-US.md'), - // }, { - title: 'Slider 滑块', - titleEn: 'Slider', - name: 'slider', - path: '/slider', - // component: () => import('tdesign-omi/slider/slider.md'), - // componentEn: () => import('tdesign-omi/slider/slider.en-US.md'), + title: '输入', + titleEn: 'Form', + type: 'component', + children: [ + // { + // title: 'AutoComplete 自动填充', + // titleEn: 'AutoComplete', + // name: 'auto-complete', + // path: '/omi/components/auto-complete', + // component: () => import('tdesign-omi/auto-complete/auto-complete.md'), + // componentEn: () => import('tdesign-omi/auto-complete/auto-complete.en-US.md'), + // }, + // { + // title: 'Cascader 级联组件', + // titleEn: 'Cascader', + // name: 'cascader', + // path: '/omi/components/cascader', + // component: () => import('tdesign-omi/cascader/cascader.md'), + // componentEn: () => import('tdesign-omi/cascader/cascader.en-US.md'), + // }, + // { + // title: 'Checkbox 多选框', + // titleEn: 'Checkbox', + // name: 'checkbox', + // path: '/omi/components/checkbox', + // component: () => import('tdesign-omi/checkbox/checkbox.md'), + // componentEn: () => import('tdesign-omi/checkbox/checkbox.en-US.md'), + // }, + // { + // title: 'ColorPicker 颜色选择器', + // titleEn: 'ColorPicker', + // name: 'color-picker', + // path: '/omi/components/color-picker', + // component: () => import('tdesign-omi/color-picker/color-picker.md'), + // componentEn: () => import('tdesign-omi/color-picker/color-picker.en-US.md'), + // }, + // { + // title: 'DatePicker 日期选择器', + // titleEn: 'DatePicker', + // name: 'date-picker', + // path: '/omi/components/date-picker', + // component: () => import('tdesign-omi/date-picker/date-picker.md'), + // componentEn: () => import('tdesign-omi/date-picker/date-picker.en-US.md'), + // }, + // { + // title: 'Form 表单', + // titleEn: 'Form', + // name: 'form', + // path: '/omi/components/form', + // component: () => import('tdesign-omi/form/form.md'), + // componentEn: () => import('tdesign-omi/form/form.en-US.md'), + // }, + // { + // title: 'Input 输入框', + // titleEn: 'Input', + // name: 'input', + // path: '/omi/components/input', + // component: () => import('tdesign-omi/input/input.md'), + // componentEn: () => import('tdesign-omi/input/input.en-US.md'), + // }, + // { + // title: 'InputAdornment 输入装饰器', + // titleEn: 'InputAdornment', + // name: 'input-adornment', + // path: '/omi/components/input-adornment', + // component: () => import('tdesign-omi/input-adornment/input-adornment.md'), + // componentEn: () => import('tdesign-omi/input-adornment/input-adornment.en-US.md'), + // }, + // { + // title: 'InputNumber 数字输入框', + // titleEn: 'InputNumber', + // name: 'input-number', + // path: '/omi/components/input-number', + // component: () => import('tdesign-omi/input-number/input-number.md'), + // componentEn: () => import('tdesign-omi/input-number/input-number.en-US.md'), + // }, + // { + // title: 'TagInput 标签输入框', + // titleEn: 'TagInput', + // name: 'tag-input', + // docType: 'form', + // path: '/omi/components/tag-input', + // component: () => import('tdesign-omi/tag-input/tag-input.md'), + // componentEn: () => import('tdesign-omi/tag-input/tag-input.en-US.md'), + // }, + // { + // title: 'Radio 单选框', + // titleEn: 'Radio', + // name: 'radio', + // path: '/omi/components/radio', + // component: () => import('tdesign-omi/radio/radio.md'), + // componentEn: () => import('tdesign-omi/radio/radio.en-US.md'), + // }, + // { + // title: 'RangeInput 范围输入框', + // titleEn: 'RangeInput', + // name: 'range-input', + // path: '/omi/components/range-input', + // component: () => import('tdesign-omi/range-input/range-input.md'), + // componentEn: () => import('tdesign-omi/range-input/range-input.en-US.md'), + // }, + // { + // title: 'Select 选择器', + // titleEn: 'Select', + // name: 'select', + // path: '/omi/components/select', + // component: () => import('tdesign-omi/select/select.md'), + // componentEn: () => import('tdesign-omi/select/select.en-US.md'), + // }, + // { + // title: 'SelectInput 筛选器输入框', + // titleEn: 'SelectInput', + // name: 'select-input', + // docType: 'form', + // path: '/omi/components/select-input', + // component: () => import('tdesign-omi/select-input/select-input.md'), + // componentEn: () => import('tdesign-omi/select-input/select-input.en-US.md'), + // }, + { + title: 'Slider 滑块', + titleEn: 'Slider', + name: 'slider', + path: '/slider', + // component: () => import('tdesign-omi/slider/slider.md'), + // componentEn: () => import('tdesign-omi/slider/slider.en-US.md'), + }, + // { + // title: 'Switch 开关', + // titleEn: 'Switch', + // name: 'switch', + // path: '/omi/components/switch', + // component: () => import('tdesign-omi/switch/switch.md'), + // componentEn: () => import('tdesign-omi/switch/switch.en-US.md'), + // }, + { + title: 'Textarea 多行文本框', + titleEn: 'Textarea', + name: 'textarea', + path: '/textarea', + // component: () => import('tdesign-omi/textarea/textarea.md'), + // componentEn: () => import('tdesign-omi/textarea/textarea.en-US.md'), + } + // { + // title: 'Transfer 穿梭框', + // titleEn: 'Transfer', + // name: 'transfer', + // path: '/omi/components/transfer', + // component: () => import('tdesign-omi/transfer/transfer.md'), + // componentEn: () => import('tdesign-omi/transfer/transfer.en-US.md'), + // }, + // { + // title: 'TimePicker 时间选择器', + // titleEn: 'TimePicker', + // name: 'time-picker', + // path: '/omi/components/time-picker', + // component: () => import('tdesign-omi/time-picker/time-picker.md'), + // componentEn: () => import('tdesign-omi/time-picker/time-picker.en-US.md'), + // }, + // { + // title: 'TreeSelect 树选择', + // titleEn: 'TreeSelect', + // name: 'tree-select', + // path: '/omi/components/tree-select', + // component: () => import('tdesign-omi/tree-select/tree-select.md'), + // componentEn: () => import('tdesign-omi/tree-select/tree-select.en-US.md'), + // }, + // { + // title: 'Upload 上传', + // titleEn: 'Upload', + // name: 'upload', + // path: '/omi/components/upload', + // component: () => import('tdesign-omi/upload/upload.md'), + // componentEn: () => import('tdesign-omi/upload/upload.en-US.md'), + // }, + ], }, - // { - // title: 'Switch 开关', - // titleEn: 'Switch', - // name: 'switch', - // path: '/omi/components/switch', - // component: () => import('tdesign-omi/switch/switch.md'), - // componentEn: () => import('tdesign-omi/switch/switch.en-US.md'), - // }, - // { - // title: 'Textarea 多行文本框', - // titleEn: 'Textarea', - // name: 'textarea', - // path: '/omi/components/textarea', - // component: () => import('tdesign-omi/textarea/textarea.md'), - // componentEn: () => import('tdesign-omi/textarea/textarea.en-US.md'), - // }, - // { - // title: 'Transfer 穿梭框', - // titleEn: 'Transfer', - // name: 'transfer', - // path: '/omi/components/transfer', - // component: () => import('tdesign-omi/transfer/transfer.md'), - // componentEn: () => import('tdesign-omi/transfer/transfer.en-US.md'), - // }, - // { - // title: 'TimePicker 时间选择器', - // titleEn: 'TimePicker', - // name: 'time-picker', - // path: '/omi/components/time-picker', - // component: () => import('tdesign-omi/time-picker/time-picker.md'), - // componentEn: () => import('tdesign-omi/time-picker/time-picker.en-US.md'), - // }, - // { - // title: 'TreeSelect 树选择', - // titleEn: 'TreeSelect', - // name: 'tree-select', - // path: '/omi/components/tree-select', - // component: () => import('tdesign-omi/tree-select/tree-select.md'), - // componentEn: () => import('tdesign-omi/tree-select/tree-select.en-US.md'), - // }, - // { - // title: 'Upload 上传', - // titleEn: 'Upload', - // name: 'upload', - // path: '/omi/components/upload', - // component: () => import('tdesign-omi/upload/upload.md'), - // componentEn: () => import('tdesign-omi/upload/upload.en-US.md'), - // }, - // ], - // }, { title: '数据展示', titleEn: 'Data Display', diff --git a/tdesign/desktop/site/src/components/web/textarea/index.tsx b/tdesign/desktop/site/src/components/web/textarea/index.tsx new file mode 100644 index 0000000000..7d53f20c6a --- /dev/null +++ b/tdesign/desktop/site/src/components/web/textarea/index.tsx @@ -0,0 +1,132 @@ +import { WeElement, define, h, createRef } from 'omi' +import '../common/index' +import '../../../../../src/textarea/_example/base' +import '../../../../../src/textarea/_example/limit' +import '../../../../../src/textarea/_example/event' +import '../../../../../src/textarea/_example/status' + +import '../../../../../src/textarea/style/index' + +import * as marked from 'marked' + +const docsHTML = marked.parse(` + +## API +### Rate Props + +名称 | 类型 | 默认值 | 说明 | 必传 +-- | -- | -- | -- | -- +allowInputOverMax | Boolean | false | 超出maxlength或maxcharacter之后是否还允许输入 | N +autofocus | Boolean | false | 自动聚焦，拉起键盘 | N +autosize | Boolean / Object | false | 高度自动撑开。 autosize = true 表示组件高度自动撑开，同时，依旧允许手动拖高度。如果设置了 autosize.maxRows 或者 autosize.minRows 则不允许手动调整高度。TS 类型： \`boolean / { minRows?: number; maxRows?: number }\` | N +disabled | Boolean | false | 是否禁用文本框 | N +label | String / Slot / Function | - | 左侧文本。TS 类型：\`string / TNode\`。[通用类型定义](https://github.com/Tencent/omi/blob/master/tdesign/desktop/src/common.ts) | N +maxcharacter | Number | - | 用户最多可以输入的字符个数，一个中文汉字表示两个字符长度 | N +maxlength | Number | - | 用户最多可以输入的字符个数 | N +name | String | - | 名称，HTML 元素原生属性 | N +placeholder | String | undefined | 占位符 | N +readonly | Boolean | false | 只读状态 | N +status | String | - | 文本框状态。可选项：default/success/warning/error | N +tips | String / Slot / Function | - | 输入框下方提示文本，会根据不同的 status 呈现不同的样式。TS 类型：\`string / TNode\`。[通用类型定义](https://github.com/Tencent/omi/blob/master/tdesign/desktop/src/common.ts) | N +value | String / Number | - | 文本框值。TS 类型：\`TextareaValue type TextareaValue = string\`。[详细类型定义](https://github.com/Tencent/omi/blob/master/tdesign/desktop/src/textarea/type.ts) | N +defaultValue | String / Number | - | 文本框值。非受控属性。TS 类型：\`TextareaValue type TextareaValue = string\`。[详细类型定义](https://github.com/Tencent/omi/blob/master/tdesign/desktop/src/textarea/type.ts) | N +onBlur | Function | - | TS 类型：\`(value: TextareaValue, context: { e: FocusEvent }) => void\`
失去焦点时触发 | N +onChange | Function | - | TS 类型：\`(value: TextareaValue, context?: { e?: InputEvent }) => void\`
输入内容变化时触发 | N +onFocus | Function | - | TS 类型：\`TS 类型：(value: TextareaValue, context : { e: FocusEvent }) => void\`
获得焦点时触发 | N +onKeydown | Function | - | TS 类型：\`(value: TextareaValue, context: { e: KeyboardEvent }) => void\`
键盘按下时触发 | N +onKeypress | Function | - | TS 类型：\`(value: TextareaValue, context: { e: KeyboardEvent }) => void\`
按下字符键时触发（keydown -> keypress -> keyup） | N +onKeyup | Function | - | TS 类型：\`(value: TextareaValue, context: { e: KeyboardEvent }) => void\`
释放键盘时触发 | N + +`) +interface Props { + tab: string +} + +define( + 'page-textarea', + class extends WeElement { + static defaultProps = { + tab: 'demo', + } + + 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; + }` + + 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 ( + <> + +
+

+ 基本多行文本框

+

用于多行文本的输入。

+ + + + +

+ 限制最大字符数

+

用于多行文本的输入。

+ + + + +

+ 绑定 DOM 事件

+

可绑定 onKeypress onKeydown onKeyup onFocus onBlur 等 DOM 原生事件。

+ + + + +

+ 不同状态的多行文本框

+

支持只读、禁用状态。

+ + + +
+
+
+
+
+ + ) + } + }, +) diff --git a/tdesign/desktop/site/src/router.ts b/tdesign/desktop/site/src/router.ts index 10cf17f038..545bdb78e3 100644 --- a/tdesign/desktop/site/src/router.ts +++ b/tdesign/desktop/site/src/router.ts @@ -75,6 +75,13 @@ export function registerRouting(rootEl: any) { }) }) + route('/textarea', () => { + import('./components/web/textarea/index').then(() => { + rootEl.data.tagName = 'page-textarea' + rootEl.update() + }) + }) + route('/input', () => { import('./components/web/input').then(() => { rootEl.data.tagName = 'page-input' diff --git a/tdesign/desktop/src/textarea/_example/base.tsx b/tdesign/desktop/src/textarea/_example/base.tsx index 46796af447..0fdb56bafa 100644 --- a/tdesign/desktop/src/textarea/_example/base.tsx +++ b/tdesign/desktop/src/textarea/_example/base.tsx @@ -1,5 +1,4 @@ -import exp from 'constants' -import { OmiProps, WeElement, h, tag, classNames, createRef, render } from 'omi' +import { OmiProps, WeElement, h, tag, render } from 'omi' import "../index" @@ -12,12 +11,12 @@ export default class TextareaBase extends WeElement{ render(){ return - - - + + + + {/* + */} } } - -render(, '.testContainer', {}) \ No newline at end of file diff --git a/tdesign/desktop/src/textarea/_example/event.tsx b/tdesign/desktop/src/textarea/_example/event.tsx new file mode 100644 index 0000000000..a52da6078d --- /dev/null +++ b/tdesign/desktop/src/textarea/_example/event.tsx @@ -0,0 +1,59 @@ +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) + } + + 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 ( + + + + ) + } +} diff --git a/tdesign/desktop/src/textarea/_example/limit.tsx b/tdesign/desktop/src/textarea/_example/limit.tsx new file mode 100644 index 0000000000..84380160a5 --- /dev/null +++ b/tdesign/desktop/src/textarea/_example/limit.tsx @@ -0,0 +1,19 @@ +import { OmiProps, WeElement, h, tag, render } from 'omi' + +import "../index" + +@tag("textarea-limit") +export default class TextareaLimit extends WeElement{ + static css = `t-textarea { + margin : 10px; + }` + + render(){ + + return + + + + + } +} diff --git a/tdesign/desktop/src/textarea/_example/status.tsx b/tdesign/desktop/src/textarea/_example/status.tsx new file mode 100644 index 0000000000..285b0e86d5 --- /dev/null +++ b/tdesign/desktop/src/textarea/_example/status.tsx @@ -0,0 +1,22 @@ +import { OmiProps, WeElement, h, tag, render } from 'omi' + +import "../index" + +@tag("textarea-status") +export default class TextareaStatus extends WeElement{ + static css = `t-textarea { + margin : 10px; + }` + + render(){ + + return + + + + + + + + } +} diff --git a/tdesign/desktop/src/textarea/index.html b/tdesign/desktop/src/textarea/index.html index 40958b5811..dac2f55e66 100644 --- a/tdesign/desktop/src/textarea/index.html +++ b/tdesign/desktop/src/textarea/index.html @@ -8,7 +8,8 @@ Textarea - + + diff --git a/tdesign/desktop/src/textarea/index.tsx b/tdesign/desktop/src/textarea/index.tsx index 499bdc3bb4..909daeec7b 100644 --- a/tdesign/desktop/src/textarea/index.tsx +++ b/tdesign/desktop/src/textarea/index.tsx @@ -19,6 +19,7 @@ export default class Textarea extends WeElement { autosize: false, disabled: false, readonly: false, + value:'' } static propTypes = { @@ -50,10 +51,14 @@ export default class Textarea extends WeElement { onKeyup: Function, } - installed() { + + value = "" + + installed() { let node = this.textArea.current + this.value = node.value + // console.log(this.props) let autosize = this.props.autosize - console.log(autosize) if (autosize === true) { node.addEventListener('input', () => { let heightObj = calcTextareaHeight(node) @@ -111,29 +116,35 @@ export default class Textarea extends WeElement { return text.length + chineseCharacters.length; } - onBlur = (e: any) => { - // console.log(event) - } - handleTextChange = (evt : any) => { + onblur = (event : Event) =>{ + var textareaValue = event.currentTarget.value; + this.fire('my-blur', { event : event, value : textareaValue }) } - onFocus = (e: any) => { + onfocus = (event : Event) =>{ + var textareaValue = event.currentTarget.value; + this.fire('my-focus', { event : event, value : textareaValue }) } + onKeyup = (event : Event) =>{ + var textareaValue = event.currentTarget.value; + this.fire('my-keyup', { event : event, value : textareaValue }) + } - onKeypress = (e: any) => { - // console.log(event); - } - onKeydown = (e: any) => { - // console.log(event); - } - onKeyup = (e: any) => { - // console.log(event); - } + onKeypress = (event : Event) =>{ + var textareaValue = event.currentTarget.value; + this.fire('my-keypress', { event : event, value : textareaValue }) + } + + onKeydown = (event : Event) =>{ + var textareaValue = event.currentTarget.value; + this.fire('my-keydown', { event : event, value : textareaValue }) + } render(props: OmiProps, store: any) { const { autofocus, autosize, placeholder, readonly, value, status, - disabled, tips ,maxlength, maxcharacter} = props + disabled, tips ,maxlength, maxcharacter, onBlur, onChange, onKeydown, + onKeypress, onKeyup, onFocus} = props return ( <> @@ -151,9 +162,12 @@ export default class Textarea extends WeElement { autofocus={autofocus} maxlength={maxlength} maxcharacter={maxcharacter} - onChange={this.handleTextChange} - onFocus={this.onFocus} - onKeypress={this.onKeypress} + onBlur={(e) => {this.onblur(e)}} + onChange={onChange} + onFocus={(e) => {this.onfocus(e)}} + onKeyPress={(e) => {this.onKeypress(e)}} + onKeyDown={(e) =>{this.onKeydown(e)}} + onKeyUp={(e) =>{this.onKeyup(e)}} ref={this.textArea} > {tips &&
{tips}
} From 8a62e165c38be7cd08b1103b6f33c2a79bc1b55d Mon Sep 17 00:00:00 2001 From: Gavi <604983389@qq.com> Date: Sat, 26 Aug 2023 15:13:15 +0800 Subject: [PATCH 2/2] textarea 1.0.3 and add textarea site --- tdesign/desktop/site/site.config.mjs | 350 +++++++++++++-------------- tdesign/desktop/site/src/router.ts | 14 -- 2 files changed, 175 insertions(+), 189 deletions(-) diff --git a/tdesign/desktop/site/site.config.mjs b/tdesign/desktop/site/site.config.mjs index 888c462b6e..ba488d2f51 100644 --- a/tdesign/desktop/site/site.config.mjs +++ b/tdesign/desktop/site/site.config.mjs @@ -225,183 +225,183 @@ export const docs = [ // }, // ], // }, + // { + // title: '输入', + // titleEn: 'Form', + // type: 'component', + // children: [ + // { + // title: 'AutoComplete 自动填充', + // titleEn: 'AutoComplete', + // name: 'auto-complete', + // path: '/omi/components/auto-complete', + // component: () => import('tdesign-omi/auto-complete/auto-complete.md'), + // componentEn: () => import('tdesign-omi/auto-complete/auto-complete.en-US.md'), + // }, + // { + // title: 'Cascader 级联组件', + // titleEn: 'Cascader', + // name: 'cascader', + // path: '/omi/components/cascader', + // component: () => import('tdesign-omi/cascader/cascader.md'), + // componentEn: () => import('tdesign-omi/cascader/cascader.en-US.md'), + // }, + // { + // title: 'Checkbox 多选框', + // titleEn: 'Checkbox', + // name: 'checkbox', + // path: '/omi/components/checkbox', + // component: () => import('tdesign-omi/checkbox/checkbox.md'), + // componentEn: () => import('tdesign-omi/checkbox/checkbox.en-US.md'), + // }, + // { + // title: 'ColorPicker 颜色选择器', + // titleEn: 'ColorPicker', + // name: 'color-picker', + // path: '/omi/components/color-picker', + // component: () => import('tdesign-omi/color-picker/color-picker.md'), + // componentEn: () => import('tdesign-omi/color-picker/color-picker.en-US.md'), + // }, + // { + // title: 'DatePicker 日期选择器', + // titleEn: 'DatePicker', + // name: 'date-picker', + // path: '/omi/components/date-picker', + // component: () => import('tdesign-omi/date-picker/date-picker.md'), + // componentEn: () => import('tdesign-omi/date-picker/date-picker.en-US.md'), + // }, + // { + // title: 'Form 表单', + // titleEn: 'Form', + // name: 'form', + // path: '/omi/components/form', + // component: () => import('tdesign-omi/form/form.md'), + // componentEn: () => import('tdesign-omi/form/form.en-US.md'), + // }, + // { + // title: 'Input 输入框', + // titleEn: 'Input', + // name: 'input', + // path: '/omi/components/input', + // component: () => import('tdesign-omi/input/input.md'), + // componentEn: () => import('tdesign-omi/input/input.en-US.md'), + // }, + // { + // title: 'InputAdornment 输入装饰器', + // titleEn: 'InputAdornment', + // name: 'input-adornment', + // path: '/omi/components/input-adornment', + // component: () => import('tdesign-omi/input-adornment/input-adornment.md'), + // componentEn: () => import('tdesign-omi/input-adornment/input-adornment.en-US.md'), + // }, + // { + // title: 'InputNumber 数字输入框', + // titleEn: 'InputNumber', + // name: 'input-number', + // path: '/omi/components/input-number', + // component: () => import('tdesign-omi/input-number/input-number.md'), + // componentEn: () => import('tdesign-omi/input-number/input-number.en-US.md'), + // }, + // { + // title: 'TagInput 标签输入框', + // titleEn: 'TagInput', + // name: 'tag-input', + // docType: 'form', + // path: '/omi/components/tag-input', + // component: () => import('tdesign-omi/tag-input/tag-input.md'), + // componentEn: () => import('tdesign-omi/tag-input/tag-input.en-US.md'), + // }, + // { + // title: 'Radio 单选框', + // titleEn: 'Radio', + // name: 'radio', + // path: '/omi/components/radio', + // component: () => import('tdesign-omi/radio/radio.md'), + // componentEn: () => import('tdesign-omi/radio/radio.en-US.md'), + // }, + // { + // title: 'RangeInput 范围输入框', + // titleEn: 'RangeInput', + // name: 'range-input', + // path: '/omi/components/range-input', + // component: () => import('tdesign-omi/range-input/range-input.md'), + // componentEn: () => import('tdesign-omi/range-input/range-input.en-US.md'), + // }, + // { + // title: 'Select 选择器', + // titleEn: 'Select', + // name: 'select', + // path: '/omi/components/select', + // component: () => import('tdesign-omi/select/select.md'), + // componentEn: () => import('tdesign-omi/select/select.en-US.md'), + // }, + // { + // title: 'SelectInput 筛选器输入框', + // titleEn: 'SelectInput', + // name: 'select-input', + // docType: 'form', + // path: '/omi/components/select-input', + // component: () => import('tdesign-omi/select-input/select-input.md'), + // componentEn: () => import('tdesign-omi/select-input/select-input.en-US.md'), + // }, { - title: '输入', - titleEn: 'Form', - type: 'component', - children: [ - // { - // title: 'AutoComplete 自动填充', - // titleEn: 'AutoComplete', - // name: 'auto-complete', - // path: '/omi/components/auto-complete', - // component: () => import('tdesign-omi/auto-complete/auto-complete.md'), - // componentEn: () => import('tdesign-omi/auto-complete/auto-complete.en-US.md'), - // }, - // { - // title: 'Cascader 级联组件', - // titleEn: 'Cascader', - // name: 'cascader', - // path: '/omi/components/cascader', - // component: () => import('tdesign-omi/cascader/cascader.md'), - // componentEn: () => import('tdesign-omi/cascader/cascader.en-US.md'), - // }, - // { - // title: 'Checkbox 多选框', - // titleEn: 'Checkbox', - // name: 'checkbox', - // path: '/omi/components/checkbox', - // component: () => import('tdesign-omi/checkbox/checkbox.md'), - // componentEn: () => import('tdesign-omi/checkbox/checkbox.en-US.md'), - // }, - // { - // title: 'ColorPicker 颜色选择器', - // titleEn: 'ColorPicker', - // name: 'color-picker', - // path: '/omi/components/color-picker', - // component: () => import('tdesign-omi/color-picker/color-picker.md'), - // componentEn: () => import('tdesign-omi/color-picker/color-picker.en-US.md'), - // }, - // { - // title: 'DatePicker 日期选择器', - // titleEn: 'DatePicker', - // name: 'date-picker', - // path: '/omi/components/date-picker', - // component: () => import('tdesign-omi/date-picker/date-picker.md'), - // componentEn: () => import('tdesign-omi/date-picker/date-picker.en-US.md'), - // }, - // { - // title: 'Form 表单', - // titleEn: 'Form', - // name: 'form', - // path: '/omi/components/form', - // component: () => import('tdesign-omi/form/form.md'), - // componentEn: () => import('tdesign-omi/form/form.en-US.md'), - // }, - // { - // title: 'Input 输入框', - // titleEn: 'Input', - // name: 'input', - // path: '/omi/components/input', - // component: () => import('tdesign-omi/input/input.md'), - // componentEn: () => import('tdesign-omi/input/input.en-US.md'), - // }, - // { - // title: 'InputAdornment 输入装饰器', - // titleEn: 'InputAdornment', - // name: 'input-adornment', - // path: '/omi/components/input-adornment', - // component: () => import('tdesign-omi/input-adornment/input-adornment.md'), - // componentEn: () => import('tdesign-omi/input-adornment/input-adornment.en-US.md'), - // }, - // { - // title: 'InputNumber 数字输入框', - // titleEn: 'InputNumber', - // name: 'input-number', - // path: '/omi/components/input-number', - // component: () => import('tdesign-omi/input-number/input-number.md'), - // componentEn: () => import('tdesign-omi/input-number/input-number.en-US.md'), - // }, - // { - // title: 'TagInput 标签输入框', - // titleEn: 'TagInput', - // name: 'tag-input', - // docType: 'form', - // path: '/omi/components/tag-input', - // component: () => import('tdesign-omi/tag-input/tag-input.md'), - // componentEn: () => import('tdesign-omi/tag-input/tag-input.en-US.md'), - // }, - // { - // title: 'Radio 单选框', - // titleEn: 'Radio', - // name: 'radio', - // path: '/omi/components/radio', - // component: () => import('tdesign-omi/radio/radio.md'), - // componentEn: () => import('tdesign-omi/radio/radio.en-US.md'), - // }, - // { - // title: 'RangeInput 范围输入框', - // titleEn: 'RangeInput', - // name: 'range-input', - // path: '/omi/components/range-input', - // component: () => import('tdesign-omi/range-input/range-input.md'), - // componentEn: () => import('tdesign-omi/range-input/range-input.en-US.md'), - // }, - // { - // title: 'Select 选择器', - // titleEn: 'Select', - // name: 'select', - // path: '/omi/components/select', - // component: () => import('tdesign-omi/select/select.md'), - // componentEn: () => import('tdesign-omi/select/select.en-US.md'), - // }, - // { - // title: 'SelectInput 筛选器输入框', - // titleEn: 'SelectInput', - // name: 'select-input', - // docType: 'form', - // path: '/omi/components/select-input', - // component: () => import('tdesign-omi/select-input/select-input.md'), - // componentEn: () => import('tdesign-omi/select-input/select-input.en-US.md'), - // }, - { - title: 'Slider 滑块', - titleEn: 'Slider', - name: 'slider', - path: '/slider', - // component: () => import('tdesign-omi/slider/slider.md'), - // componentEn: () => import('tdesign-omi/slider/slider.en-US.md'), - }, - // { - // title: 'Switch 开关', - // titleEn: 'Switch', - // name: 'switch', - // path: '/omi/components/switch', - // component: () => import('tdesign-omi/switch/switch.md'), - // componentEn: () => import('tdesign-omi/switch/switch.en-US.md'), - // }, - { - title: 'Textarea 多行文本框', - titleEn: 'Textarea', - name: 'textarea', - path: '/textarea', - // component: () => import('tdesign-omi/textarea/textarea.md'), - // componentEn: () => import('tdesign-omi/textarea/textarea.en-US.md'), - } - // { - // title: 'Transfer 穿梭框', - // titleEn: 'Transfer', - // name: 'transfer', - // path: '/omi/components/transfer', - // component: () => import('tdesign-omi/transfer/transfer.md'), - // componentEn: () => import('tdesign-omi/transfer/transfer.en-US.md'), - // }, - // { - // title: 'TimePicker 时间选择器', - // titleEn: 'TimePicker', - // name: 'time-picker', - // path: '/omi/components/time-picker', - // component: () => import('tdesign-omi/time-picker/time-picker.md'), - // componentEn: () => import('tdesign-omi/time-picker/time-picker.en-US.md'), - // }, - // { - // title: 'TreeSelect 树选择', - // titleEn: 'TreeSelect', - // name: 'tree-select', - // path: '/omi/components/tree-select', - // component: () => import('tdesign-omi/tree-select/tree-select.md'), - // componentEn: () => import('tdesign-omi/tree-select/tree-select.en-US.md'), - // }, - // { - // title: 'Upload 上传', - // titleEn: 'Upload', - // name: 'upload', - // path: '/omi/components/upload', - // component: () => import('tdesign-omi/upload/upload.md'), - // componentEn: () => import('tdesign-omi/upload/upload.en-US.md'), - // }, - ], + title: 'Slider 滑块', + titleEn: 'Slider', + name: 'slider', + path: '/slider', + // component: () => import('tdesign-omi/slider/slider.md'), + // componentEn: () => import('tdesign-omi/slider/slider.en-US.md'), }, + // { + // title: 'Switch 开关', + // titleEn: 'Switch', + // name: 'switch', + // path: '/omi/components/switch', + // component: () => import('tdesign-omi/switch/switch.md'), + // componentEn: () => import('tdesign-omi/switch/switch.en-US.md'), + // }, + // { + // title: 'Textarea 多行文本框', + // titleEn: 'Textarea', + // name: 'textarea', + // path: '/omi/components/textarea', + // component: () => import('tdesign-omi/textarea/textarea.md'), + // componentEn: () => import('tdesign-omi/textarea/textarea.en-US.md'), + // }, + // { + // title: 'Transfer 穿梭框', + // titleEn: 'Transfer', + // name: 'transfer', + // path: '/omi/components/transfer', + // component: () => import('tdesign-omi/transfer/transfer.md'), + // componentEn: () => import('tdesign-omi/transfer/transfer.en-US.md'), + // }, + // { + // title: 'TimePicker 时间选择器', + // titleEn: 'TimePicker', + // name: 'time-picker', + // path: '/omi/components/time-picker', + // component: () => import('tdesign-omi/time-picker/time-picker.md'), + // componentEn: () => import('tdesign-omi/time-picker/time-picker.en-US.md'), + // }, + // { + // title: 'TreeSelect 树选择', + // titleEn: 'TreeSelect', + // name: 'tree-select', + // path: '/omi/components/tree-select', + // component: () => import('tdesign-omi/tree-select/tree-select.md'), + // componentEn: () => import('tdesign-omi/tree-select/tree-select.en-US.md'), + // }, + // { + // title: 'Upload 上传', + // titleEn: 'Upload', + // name: 'upload', + // path: '/omi/components/upload', + // component: () => import('tdesign-omi/upload/upload.md'), + // componentEn: () => import('tdesign-omi/upload/upload.en-US.md'), + // }, + // ], + // }, { title: '数据展示', titleEn: 'Data Display', diff --git a/tdesign/desktop/site/src/router.ts b/tdesign/desktop/site/src/router.ts index 3fdb6141e6..10cf17f038 100644 --- a/tdesign/desktop/site/src/router.ts +++ b/tdesign/desktop/site/src/router.ts @@ -75,13 +75,6 @@ export function registerRouting(rootEl: any) { }) }) - route('/textarea', () => { - import('./components/web/textarea/index').then(() => { - rootEl.data.tagName = 'page-textarea' - rootEl.update() - }) - }) - route('/input', () => { import('./components/web/input').then(() => { rootEl.data.tagName = 'page-input' @@ -145,13 +138,6 @@ export function registerRouting(rootEl: any) { }) }) - route('/input-adornment', () => { - import('./components/web/input-adornment/index').then(() => { - rootEl.data.tagName = 'page-input-adornment' - rootEl.update() - }) - }) - route('*', function () { console.log('not found') })