feat(Textarea): enrich attributes

src/textarea/README.md

@@ -18,32 +18,40 @@ isComponent: true
 
 ## 代码演示
 
-### 基础多行文本框
+### 组件类型
 
-<img src="https://tdesign.gtimg.com/miniprogram/readme/input-2.png" width="375px" height="50%">
+基础多行文本框
 
 {{ base }}
 
-### 带标题多行文本框
+带标题多行文本框
 
 {{ label }}
 
-### 自动增高多行文本框
+自动增高多行文本框
 
 {{ autoSize }}
 
-### 禁用多行文本框
 
-{{ disabled }}
-
-### 设置最大字符个数
+设置最大字符个数
 
 {{ maxlength }}
 
-### 设置最大字符个数，一个汉字表示两个字符
+设置最大字符个数，一个汉字表示两个字符
 
 {{ maxcharacter }}
 
+### 组件状态
+
+禁用多行文本框
+
+{{ disabled }}
+
+### 自定义组件样式
+
+标签外置输入框
+
+{{ custom }}
 ## 提示
 
 - 如果需要在页面中调整 `textarea` 中 `placeholder` 样式，请使用名称为`t-textarea__placeholder`的Class选择器，直接覆盖组件内部样式（注意权重）。
@@ -61,14 +69,18 @@ confirm-type | String | done | 设置键盘右下角按钮的文字，仅在 typ
 cursor-spacing | Number | 0 | 指定光标与键盘的距离。取textarea距离底部的距离和cursor-spacing指定的距离的最小值作为光标与键盘的距离 | N
 custom-style `v0.25.0` | String | - | 自定义组件样式 | N
 disabled | Boolean | false | 是否禁用文本框 | N
-external-classes | Array | - | 组件类名，分别用于表示组件外层元素、输入框、占位符、标签名等元素类名。`['t-class', 't-class-textarea', 't-class-label']` | N
+external-classes | Array | - | 组件类名，分别用于表示组件外层元素、输入框、占位符、标签名等元素类名。`['t-class', 't-class-textarea', 't-class-label, 't-class-indicator]` | N
 focus | Boolean | false | 自动聚焦 | N
 label | String / Slot | - | 左侧文本 | N
 maxcharacter | Number | - | 用户最多可以输入的字符个数，一个中文汉字表示两个字符长度 | N
-maxlength | Number | - | 用户最多可以输入的字符个数 | N
+maxlength | Number | -1 | 用户最多可以输入的字符个数。默认为 -1，不限制输入长度 | N
+indicator | Boolean | false | 显示文本计数器，如 0/140。当 `maxlength < 0 && maxcharacter < 0` 成立时， indicator无效 | N
 placeholder | String | undefined | 占位符 | N
+placeholderStyle | String | '' | 指定 placeholder 的样式，目前仅支持 color ,font-size和font-weight | N
 value | String | - | 文本框值 | N
 default-value | String | undefined | 文本框值。非受控属性 | N
+fixed | Boolean | false | 如果 textarea 是在一个 `position:fixed` 的区域，需要显示指定属性 fixed 为 true | N
+bordered | Boolean | false | 是否显示外边框 | N
 
 ### Textarea Events
 

src/textarea/__test__/__snapshots__/demo.test.js.snap

@@ -4,7 +4,6 @@ exports[`Textarea Textarea autosize demo works fine 1`] = `
 <autosize>
   <t-textarea
     autosize="{{true}}"
-    label="标签文字"
     placeholder="请输入文字"
   />
 </autosize>
@@ -18,11 +17,30 @@ exports[`Textarea Textarea base demo works fine 1`] = `
 </base>
 `;
 
+exports[`Textarea Textarea custom demo works fine 1`] = `
+<custom>
+  <wx-view
+    class="demo-textarea"
+  >
+    <wx-text
+      class="demo-textarea--label"
+    >
+      标签文字
+    </wx-text>
+    <t-textarea
+      bordered="{{true}}"
+      indicator="{{true}}"
+      maxlength="100"
+      placeholder="请输入文字"
+    />
+  </wx-view>
+</custom>
+`;
+
 exports[`Textarea Textarea disabled demo works fine 1`] = `
 <disabled>
   <t-textarea
     disabled="{{true}}"
-    label="标签文字"
     placeholder="请输入文字"
     value="不可编辑文字"
   />
@@ -41,8 +59,9 @@ exports[`Textarea Textarea label demo works fine 1`] = `
 exports[`Textarea Textarea maxcharacter demo works fine 1`] = `
 <maxcharacter>
   <t-textarea
-    label="标签文字"
-    maxcharacter="100"
+    indicator="{{true}}"
+    label="设置最大字符个数，一个汉字表示两个字符"
+    maxcharacter="200"
     placeholder="请输入文字"
   />
 </maxcharacter>
@@ -51,8 +70,9 @@ exports[`Textarea Textarea maxcharacter demo works fine 1`] = `
 exports[`Textarea Textarea maxlength demo works fine 1`] = `
 <maxlength>
   <t-textarea
-    label="标签文字"
-    maxlength="100"
+    indicator="{{true}}"
+    label="设置最大字符个数"
+    maxlength="200"
     placeholder="请输入文字"
   />
 </maxlength>

src/textarea/__test__/__snapshots__/index.test.js.snap

@@ -5,11 +5,11 @@ exports[`textarea slots : label 1`] = `
   class="base"
 >
   <wx-view
-    class="t-textarea t-class"
+    class="t-textarea  t-class"
     style=""
   >
     <wx-view
-      class="t-textarea__name t-class-label"
+      class="t-textarea__label t-class-label"
     >
       <wx-text
         slot="label"
@@ -24,14 +24,17 @@ exports[`textarea slots : label 1`] = `
         adjustPosition="{{true}}"
         autoFocus="{{false}}"
         autoHeight="{{false}}"
-        class="t-textarea__wrapper-textarea t-class-textarea"
+        class="t-textarea__wrapper-inner  t-class-textarea"
         confirmHold="{{false}}"
         confirmType="return"
         cursorSpacing="{{0}}"
         disabled="{{false}}"
+        fixed="{{false}}"
         focus="{{false}}"
+        maxlength="{{-1}}"
         placeholder=""
         placeholderClass="t-textarea__placeholder"
+        placeholderStyle=""
         value=""
         bind:blur="onBlur"
         bind:confirm="onConfirm"

src/textarea/__test__/demo.test.js

@@ -5,7 +5,7 @@
 import simulate from 'miniprogram-simulate';
 import path from 'path';
 
-const mapper = ['autosize', 'base', 'disabled', 'label', 'maxcharacter', 'maxlength'];
+const mapper = ['autosize', 'base', 'custom', 'disabled', 'label', 'maxcharacter', 'maxlength'];
 
 describe('Textarea', () => {
   mapper.forEach((demoName) => {

src/textarea/__test__/index.test.js

@@ -24,7 +24,7 @@ describe('textarea', () => {
       comp.attach(document.createElement('parent-wrapper'));
       const component = comp.querySelector('.base');
 
-      const $label = comp.querySelector('.base >>> .t-textarea__name');
+      const $label = comp.querySelector('.base >>> .t-textarea__label');
       expect($label).toBeDefined();
       expect($label.dom.textContent).toBe(component.instance.data.label);
     });
@@ -55,7 +55,7 @@ describe('textarea', () => {
       const component = comp.querySelector('.base');
       expect(component.instance.data.count).toBe(7);
 
-      const $textarea = comp.querySelector('.base >>> .t-textarea__wrapper-textarea');
+      const $textarea = comp.querySelector('.base >>> .t-textarea__wrapper-inner');
 
       $textarea.dispatchEvent('input', { detail: { value: 'tdesign123' } });
       await simulate.sleep(0);
@@ -92,7 +92,7 @@ describe('textarea', () => {
       const component = comp.querySelector('.base');
       expect(component).toMatchSnapshot();
 
-      const $label = comp.querySelector('.base >>> .t-textarea__name');
+      const $label = comp.querySelector('.base >>> .t-textarea__label');
       expect($label.dom.textContent).toBe('标签文字');
       //
     });
@@ -125,7 +125,7 @@ describe('textarea', () => {
       const component = comp.querySelector('.base');
       expect(component.instance.data.count).toBe(7);
 
-      const $textarea = comp.querySelector('.base >>> .t-textarea__wrapper-textarea');
+      const $textarea = comp.querySelector('.base >>> .t-textarea__wrapper-inner');
 
       $textarea.dispatchEvent('linechange', {
         detail: {
@@ -171,7 +171,7 @@ describe('textarea', () => {
       const component = comp.querySelector('.base');
       expect(component.instance.data.count).toBe(7);
 
-      const $textarea = comp.querySelector('.base >>> .t-textarea__wrapper-textarea');
+      const $textarea = comp.querySelector('.base >>> .t-textarea__wrapper-inner');
 
       $textarea.dispatchEvent('focus');
       await simulate.sleep();

src/textarea/_example/autosize/index.wxml

@@ -1 +1 @@
-<t-textarea label="标签文字" placeholder="请输入文字" autosize />
+<t-textarea placeholder="请输入文字" autosize />

src/textarea/_example/custom/index.js

@@ -0,0 +1 @@
+Component({});

src/textarea/_example/custom/index.json

@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-textarea": "tdesign-miniprogram/textarea/textarea"
+  }
+}

src/textarea/_example/custom/index.wxml

@@ -0,0 +1,4 @@
+<view class="demo-textarea">
+  <text class="demo-textarea--label">标签文字</text>
+  <t-textarea placeholder="请输入文字" bordered maxlength="100" indicator />
+</view>

src/textarea/_example/custom/index.wxss

@@ -0,0 +1,12 @@
+.demo-textarea {
+  padding: 32rpx;
+  background-color: #fff;
+}
+
+.demo-textarea--label {
+  display: block;
+  color: rgba(0, 0, 0, 0.9);
+  font-size: 24rpx;
+  line-height: 40rpx;
+  padding-bottom: 16rpx;
+}

src/textarea/_example/disabled/index.wxml

@@ -1 +1 @@
-<t-textarea label="标签文字" placeholder="请输入文字" value="不可编辑文字" disabled />
+<t-textarea placeholder="请输入文字" value="不可编辑文字" disabled />

src/textarea/_example/maxcharacter/index.wxml

@@ -1 +1 @@
-<t-textarea label="标签文字" placeholder="请输入文字" maxcharacter="100" />
+<t-textarea label="设置最大字符个数，一个汉字表示两个字符" placeholder="请输入文字" maxcharacter="200" indicator />

src/textarea/_example/maxlength/index.wxml

@@ -1 +1 @@
-<t-textarea label="标签文字" placeholder="请输入文字" maxlength="100" />
+<t-textarea label="设置最大字符个数" placeholder="请输入文字" maxlength="200" indicator />

src/textarea/_example/textarea.json

@@ -2,10 +2,11 @@
   "navigationBarTitleText": "Textarea 多行输入框",
   "usingComponents": {
     "base": "./base",
-    "labelDemo": "./label",
+    "label": "./label",
     "autosize": "./autosize",
     "disabled": "./disabled",
     "maxcharacter": "./maxcharacter",
-    "maxlength": "./maxlength"
+    "maxlength": "./maxlength",
+    "custom": "./custom"
   }
 }

src/textarea/_example/textarea.wxml

@@ -1,22 +1,25 @@
 <view class="textarea-example">
   <view class="demo-title">Textarea 多行文本框</view>
   <view class="demo-desc">用于多行文本信息输入。</view>
-  <t-demo title="01 类型" desc="基础多行文本框">
+  <t-demo title="01 组件类型" desc="基础多行文本框">
     <base />
   </t-demo>
   <t-demo title="" desc="带标题多行文本框">
-    <labelDemo />
+    <label />
   </t-demo>
   <t-demo title="" desc="自动增高多行文本框">
     <autosize />
   </t-demo>
-  <t-demo title="02 状态" desc="禁用多行文本框">
-    <disabled />
-  </t-demo>
-  <t-demo title="03 字符限制" desc="设置最大字符个数">
+  <t-demo desc="设置最大字符个数">
     <maxlength />
   </t-demo>
-  <t-demo title="" desc="设置最大字符个数，一个汉字表示两个字符">
+  <t-demo desc="设置最大字符个数，一个汉字表示两个字符">
     <maxcharacter />
   </t-demo>
+  <t-demo title="02 组件状态" desc="禁用多行文本框">
+    <disabled />
+  </t-demo>
+  <t-demo title="03 自定义组件样式" desc="标签外置输入框">
+    <custom />
+  </t-demo>
 </view>

src/textarea/props.ts

@@ -59,19 +59,30 @@ const props: TdTextareaProps = {
   label: {
     type: String,
   },
+  /** 如果 textarea 是在一个 `position:fixed` 的区域，需要显示指定属性 fixed 为 true */
+  fixed: {
+    type: Boolean,
+    value: false,
+  },
   /** 用户最多可以输入的字符个数，一个中文汉字表示两个字符长度 */
   maxcharacter: {
     type: Number,
   },
-  /** 用户最多可以输入的字符个数 */
+  /** 用户最多可以输入的字符个数。默认为 -1，不限制输入长度 */
   maxlength: {
     type: Number,
+    value: -1,
   },
-  /** 占位符 */
+  /** 指定 placeholder 的样式，目前仅支持 color ,font-size和font-weight */
   placeholder: {
     type: String,
     value: undefined,
   },
+  /** 占位符样式 */
+  placeholderStyle: {
+    type: String,
+    value: '',
+  },
   /** 文本框值 */
   value: {
     type: String,
@@ -82,6 +93,18 @@ const props: TdTextareaProps = {
     type: String,
     value: '',
   },
+  /** 是否显示外边框 */
+  bordered: {
+    type: Boolean,
+    value: false,
+  },
+  /**
+   * 显示文本计数器，如 0/140。当 `maxlength < 0 && maxcharacter < 0` 成立时， indicator无效
+   */
+  indicator: {
+    type: Boolean,
+    value: false,
+  },
 };
 
 export default props;