@tdesign/uniapp 0.0.1-alpha.1 → 0.7.0

package/dist/textarea/README.en-US.md

@@ -0,0 +1,78 @@
+:: BASE_DOC ::
+
+## API
+
+### Textarea Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+adjust-position | Boolean | true | \- | N
+allow-input-over-max | Boolean | false | Allow input after exceeding `maxlength` or `maxcharacter` | N
+autofocus | Boolean | false | \- | N
+autosize | Boolean / Object | false | Typescript：`boolean \| { maxHeight?: number, minHeight?: number }` | N
+bordered | Boolean | false | \- | N
+confirm-hold | Boolean | false | \- | N
+confirm-type | String | return | options: return/send/search/next/go/done。Typescript：`'return' \| 'send' \| 'search' \| 'next' \| 'go' \| 'done'` | N
+cursor | Number | -1 | \- | N
+cursor-color | String | #0052d9 | \- | N
+cursor-spacing | Number | 0 | \- | N
+disable-default-padding | Boolean | false | \- | N
+disabled | Boolean | undefined | \- | N
+fixed | Boolean | false | \- | N
+focus | Boolean | false | \- | N
+hold-keyboard | Boolean | false | \- | N
+indicator | Boolean | false | \- | N
+label | String | - | \- | N
+maxcharacter | Number | - | \- | N
+maxlength | Number | -1 | \- | N
+placeholder | String | undefined | \- | N
+placeholder-class | String | textarea-placeholder | \- | N
+placeholder-style | String | - | \- | N
+readonly | Boolean | undefined | \- | N
+selection-end | Number | -1 | \- | N
+selection-start | Number | -1 | \- | N
+show-confirm-bar | Boolean | true | \- | N
+value | String / Number | - | `v-model:value` is supported。Typescript：`TextareaValue` `type TextareaValue = string \| number`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/textarea/type.ts) | N
+default-value | String / Number | - | uncontrolled property。Typescript：`TextareaValue` `type TextareaValue = string \| number`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/textarea/type.ts) | N
+
+### Textarea Events
+
+name | params | description
+-- | -- | --
+blur | `(context: { value: TextareaValue, cursor: number })` | \-
+change | `(context: { value: TextareaValue, cursor: number })` | \-
+enter | `(context: { value: TextareaValue })` | \-
+focus | `(context: { value: TextareaValue })` | \-
+keyboardheightchange | `(context: { height: number, duration: number })` | \-
+line-change | `(context: { value: TextareaValue })` | \-
+
+### Textarea Slots
+
+name | Description
+-- | --
+label | \-
+
+### Textarea External Classes
+
+className | Description
+-- | --
+t-class | \-
+t-class-indicator | \-
+t-class-label | \-
+t-class-textarea | \-
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-textarea-background-color | @bg-color-container | -
+--td-textarea-border-color | @component-border | -
+--td-textarea-border-radius | @radius-default | -
+--td-textarea-disabled-text-color | @text-color-disabled | -
+--td-textarea-indicator-text-color | @text-color-placeholder | -
+--td-textarea-label-color | @text-color-primary | -
+--td-textarea-padding | 32rpx | -
+--td-textarea-placeholder-color | @text-color-placeholder | -
+--td-textarea-text-color | @text-color-primary | -

package/dist/textarea/README.md

@@ -0,0 +1,132 @@
+---
+title: Textarea 多行文本框
+description: 用于多行文本信息输入。
+spline: form
+isComponent: true
+---
+
+
+
+## 引入
+
+可在 `main.ts` 或在需要使用的页面或组件中引入。
+
+
+```js
+import TTextarea from '@tdesign/uniapp/textarea/textarea.vue';
+```
+
+### 组件类型
+
+基础多行文本框
+
+{{ base }}
+
+带标题多行文本框
+
+{{ label }}
+
+自动增高多行文本框
+
+{{ autosize }}
+
+设置最大字符个数
+
+{{ maxlength }}
+
+设置最大字符个数，一个汉字表示两个字符
+
+{{ maxcharacter }}
+
+### 组件状态
+
+禁用多行文本框
+
+{{ disabled }}
+
+### 自定义组件样式
+
+标签外置输入框
+
+{{ custom }}
+
+## 提示
+
+- 如果需要在页面中调整 `textarea` 中 `placeholder` 样式，请使用名称为`t-textarea__placeholder`的Class选择器，直接覆盖组件内部样式（注意权重）。
+
+## API
+
+### Textarea Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+custom-style | Object | - | 自定义样式 | N
+adjust-position | Boolean | true | 键盘弹起时，是否自动上推页面 | N
+allow-input-over-max | Boolean | false | 超出 `maxlength` 或 `maxcharacter` 之后是否还允许输入 | N
+autofocus | Boolean | false | 自动聚焦，拉起键盘 | N
+autosize | Boolean / Object | false | 是否自动增高，值为 true 时，style.height 不生效。支持传入对象，如 { maxHeight: 120, minHeight: 20 }。TS 类型：`boolean \| { maxHeight?: number, minHeight?: number }` | N
+bordered | Boolean | false | 是否显示外边框 | N
+confirm-hold | Boolean | false | 点击键盘右下角按钮时是否保持键盘不收起点 | N
+confirm-type | String | return | 设置键盘右下角按钮的文字，仅在 type='text'时生效。可选项：return/send/search/next/go/done。TS 类型：`'return' \| 'send' \| 'search' \| 'next' \| 'go' \| 'done'` | N
+cursor | Number | -1 | 指定 focus 时的光标位置 | N
+cursor-color | String | #0052d9 | 【试验性】光标颜色，仅在 Skyline 下有效 | N
+cursor-spacing | Number | 0 | 指定光标与键盘的距离。取textarea距离底部的距离和cursor-spacing指定的距离的最小值作为光标与键盘的距离 | N
+disable-default-padding | Boolean | false | 是否去掉 iOS 下的默认内边距 | N
+disabled | Boolean | undefined | 是否禁用文本框 | N
+fixed | Boolean | false | 如果 textarea 是在一个 `position:fixed` 的区域，需要显式指定属性 fixed 为 true | N
+focus | Boolean | false | 自动聚焦 | N
+hold-keyboard | Boolean | false | focus时，点击页面的时候不收起键盘 | N
+indicator | Boolean | false | 显示文本计数器，如 0/140。当 `maxlength < 0 && maxcharacter < 0` 成立时， indicator无效 | N
+label | String | - | 左侧文本 | N
+maxcharacter | Number | - | 用户最多可以输入的字符个数，一个中文汉字表示两个字符长度 | N
+maxlength | Number | -1 | 用户最多可以输入的字符个数，值为 -1 的时候不限制最大长度 | N
+placeholder | String | undefined | 占位符 | N
+placeholder-class | String | textarea-placeholder | 指定 placeholder 的样式类，目前仅支持color,font-size和font-weight | N
+placeholder-style | String | - | 指定 placeholder 的样式，目前仅支持 color ,font-size和font-weight | N
+readonly | Boolean | undefined | 只读状态 | N
+selection-end | Number | -1 | 光标结束位置，自动聚集时有效，需与 selection-start 搭配使用 | N
+selection-start | Number | -1 | 光标起始位置，自动聚集时有效，需与 selection-end 搭配使用 | N
+show-confirm-bar | Boolean | true | 是否显示键盘上方带有”完成“按钮那一栏 | N
+value | String / Number | - | 文本框值。支持语法糖 `v-model:value`。TS 类型：`TextareaValue` `type TextareaValue = string \| number`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/textarea/type.ts) | N
+default-value | String / Number | - | 文本框值。非受控属性。TS 类型：`TextareaValue` `type TextareaValue = string \| number`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/textarea/type.ts) | N
+
+### Textarea Events
+
+名称 | 参数 | 描述
+-- | -- | --
+blur | `(context: { value: TextareaValue, cursor: number })` | 失去焦点时触发
+change | `(context: { value: TextareaValue, cursor: number })` | 输入内容变化时触发
+enter | `(context: { value: TextareaValue })` | 点击完成时触发
+focus | `(context: { value: TextareaValue })` | 获得焦点时触发
+keyboardheightchange | `(context: { height: number, duration: number })` | 键盘高度发生变化的时候触发此事件
+line-change | `(context: { value: TextareaValue })` | 行高发生变化时触发
+
+### Textarea Slots
+
+名称 | 描述
+-- | --
+label | 自定义 `label` 显示内容
+
+### Textarea External Classes
+
+类名 | 描述
+-- | --
+t-class | 根节点样式类
+t-class-indicator | 计数器样式类
+t-class-label | 左侧文本样式类
+t-class-textarea | 多行文本框样式类
+
+### CSS Variables
+
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-textarea-background-color | @bg-color-container | -
+--td-textarea-border-color | @component-border | -
+--td-textarea-border-radius | @radius-default | -
+--td-textarea-disabled-text-color | @text-color-disabled | -
+--td-textarea-indicator-text-color | @text-color-placeholder | -
+--td-textarea-label-color | @text-color-primary | -
+--td-textarea-padding | 32rpx | -
+--td-textarea-placeholder-color | @text-color-placeholder | -
+--td-textarea-text-color | @text-color-primary | -

package/dist/textarea/computed.js

@@ -0,0 +1,14 @@
+import utils from '../common/utils.wxs';
+
+
+export function textareaStyle(autosize) {
+  if (autosize && typeof autosize === 'object') {
+    return utils._style({
+      'min-height': utils.addUnit(autosize.minHeight),
+      'max-height': utils.addUnit(autosize.maxHeight),
+    });
+  }
+  return '';
+}
+
+

package/dist/textarea/props.ts

@@ -0,0 +1,152 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdTextareaProps } from './type';
+export default {
+  /** 键盘弹起时，是否自动上推页面 */
+  adjustPosition: {
+    type: Boolean,
+    default: true,
+  },
+  /** 超出 `maxlength` 或 `maxcharacter` 之后是否还允许输入 */
+  allowInputOverMax: Boolean,
+  /** 自动聚焦，拉起键盘 */
+  autofocus: Boolean,
+  /** 是否自动增高，值为 true 时，style.height 不生效。支持传入对象，如 { maxHeight: 120, minHeight: 20 } */
+  autosize: {
+    type: [Boolean, Object],
+    default: false as TdTextareaProps['autosize'],
+  },
+  /** 是否显示外边框 */
+  bordered: Boolean,
+  /** 点击键盘右下角按钮时是否保持键盘不收起点 */
+  confirmHold: Boolean,
+  /** 设置键盘右下角按钮的文字，仅在 type='text'时生效 */
+  confirmType: {
+    type: String,
+    default: 'return' as TdTextareaProps['confirmType'],
+    validator(val: TdTextareaProps['confirmType']): boolean {
+      if (!val) return true;
+      return ['return', 'send', 'search', 'next', 'go', 'done'].includes(val);
+    },
+  },
+  /** 指定 focus 时的光标位置 */
+  cursor: {
+    type: Number,
+    default: -1,
+  },
+  /** 【试验性】光标颜色，仅在 Skyline 下有效 */
+  cursorColor: {
+    type: String,
+    default: '#0052d9',
+  },
+  /** 指定光标与键盘的距离。取textarea距离底部的距离和cursor-spacing指定的距离的最小值作为光标与键盘的距离 */
+  cursorSpacing: {
+    type: Number,
+    default: 0,
+  },
+  /** 是否去掉 iOS 下的默认内边距 */
+  disableDefaultPadding: Boolean,
+  /** 是否禁用文本框 */
+  disabled: {
+    type: Boolean,
+    default: undefined,
+  },
+  /** 如果 textarea 是在一个 `position:fixed` 的区域，需要显式指定属性 fixed 为 true */
+  fixed: Boolean,
+  /** 自动聚焦 */
+  focus: Boolean,
+  /** focus时，点击页面的时候不收起键盘 */
+  holdKeyboard: Boolean,
+  /** 显示文本计数器，如 0/140。当 `maxlength < 0 && maxcharacter < 0` 成立时， indicator无效 */
+  indicator: Boolean,
+  /** 左侧文本 */
+  label: {
+    type: String,
+  },
+  /** 用户最多可以输入的字符个数，一个中文汉字表示两个字符长度 */
+  maxcharacter: {
+    type: Number,
+  },
+  /** 用户最多可以输入的字符个数，值为 -1 的时候不限制最大长度 */
+  maxlength: {
+    type: Number,
+    default: -1,
+  },
+  /** 占位符 */
+  placeholder: {
+    type: String,
+    default: undefined,
+  },
+  /** 指定 placeholder 的样式类，目前仅支持color,font-size和font-weight */
+  placeholderClass: {
+    type: String,
+    default: 'textarea-placeholder',
+  },
+  /** 指定 placeholder 的样式，目前仅支持 color ,font-size和font-weight */
+  placeholderStyle: {
+    type: String,
+    default: '',
+  },
+  /** 只读状态 */
+  readonly: {
+    type: Boolean,
+    default: undefined,
+  },
+  /** 光标结束位置，自动聚集时有效，需与 selection-start 搭配使用 */
+  selectionEnd: {
+    type: Number,
+    default: -1,
+  },
+  /** 光标起始位置，自动聚集时有效，需与 selection-end 搭配使用 */
+  selectionStart: {
+    type: Number,
+    default: -1,
+  },
+  /** 是否显示键盘上方带有”完成“按钮那一栏 */
+  showConfirmBar: {
+    type: Boolean,
+    default: true,
+  },
+  /** 文本框值 */
+  value: {
+    type: [String, Number],
+  },
+  /** 文本框值，非受控属性 */
+  defaultValue: {
+    type: [String, Number],
+  },
+  /** 失去焦点时触发 */
+  onBlur: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 输入内容变化时触发 */
+  onChange: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 点击完成时触发 */
+  onEnter: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 获得焦点时触发 */
+  onFocus: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 键盘高度发生变化的时候触发此事件 */
+  onKeyboardheightchange: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 行高发生变化时触发 */
+  onLineChange: {
+    type: Function,
+    default: () => ({}),
+  },
+};

package/dist/textarea/textarea.css

@@ -0,0 +1,67 @@
+.t-textarea {
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  padding: var(--td-textarea-padding, 32rpx);
+  background-color: var(--td-textarea-background-color, var(--td-bg-color-container, var(--td-font-white-1, #ffffff)));
+}
+.t-textarea__label:not(:empty) {
+  font: var(--td-font-body-medium, 28rpx / 44rpx var(--td-font-family, PingFang SC, Microsoft YaHei, Arial Regular));
+  color: var(--td-textarea-label-color, var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9))));
+  flex-shrink: 0;
+  padding-bottom: var(--td-spacer, 16rpx);
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.t-textarea__wrapper {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  flex: 1 1 auto;
+  overflow: hidden;
+}
+.t-textarea__wrapper-inner {
+  flex: 1 1 auto;
+  box-sizing: border-box;
+  width: inherit;
+  min-width: 0;
+  min-height: 20px;
+  margin: 0;
+  padding: 0;
+  text-align: left;
+  background-color: transparent;
+  border: 0;
+  resize: none;
+  font: var(--td-font-body-large, 32rpx / 48rpx var(--td-font-family, PingFang SC, Microsoft YaHei, Arial Regular));
+  color: var(--td-textarea-text-color, var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9))));
+}
+.t-textarea__placeholder {
+  color: var(--td-textarea-placeholder-color, var(--td-text-color-placeholder, var(--td-font-gray-3, rgba(0, 0, 0, 0.4))));
+  font: var(--td-font-body-medium, 28rpx / 44rpx var(--td-font-family, PingFang SC, Microsoft YaHei, Arial Regular));
+}
+.t-textarea__indicator:not(:empty) {
+  flex-shrink: 0;
+  color: var(--td-textarea-indicator-text-color, var(--td-text-color-placeholder, var(--td-font-gray-3, rgba(0, 0, 0, 0.4))));
+  font: var(--td-font-body-small, 24rpx / 40rpx var(--td-font-family, PingFang SC, Microsoft YaHei, Arial Regular));
+  text-align: right;
+  padding-top: var(--td-spacer, 16rpx);
+}
+.t-textarea--border {
+  border-radius: var(--td-textarea-border-radius, var(--td-radius-default, 12rpx));
+  position: relative;
+}
+.t-textarea--border::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border: 2rpx solid var(--td-textarea-border-color, var(--td-component-border, var(--td-gray-color-4, #dcdcdc)));
+  border-radius: inherit;
+  pointer-events: none;
+}
+.t-textarea .t-is-disabled {
+  color: var(--td-textarea-disabled-text-color, var(--td-text-color-disabled, var(--td-font-gray-4, rgba(0, 0, 0, 0.26))));
+}

package/dist/textarea/textarea.vue

@@ -0,0 +1,227 @@
+<template>
+  <view
+    :style="tools._style([customStyle])"
+    :class="classPrefix + ' ' + (bordered ? classPrefix + '--border' : '') + ' ' + tClass"
+  >
+    <view :class="classPrefix + '__label ' + tClassLabel">
+      <block v-if="label">
+        {{ label }}
+      </block>
+      <slot name="label" />
+    </view>
+    <view :class="classPrefix + '__wrapper'">
+      <textarea
+        :class="classPrefix + '__wrapper-inner ' + (disabled ? prefix + '-is-disabled' : '') + ' ' + tClassTextarea"
+        :style="textareaStyle(autosize)"
+        :maxlength="allowInputOverMax ? -1 : maxlength"
+        :disabled="disabled || readonly"
+        :placeholder="placeholder"
+        :placeholder-class="classPrefix + '__placeholder ' + placeholderClass"
+        :placeholder-style="placeholderStyle"
+        :value="dataValue"
+        :auto-height="!!autosize"
+        :auto-focus="autofocus"
+        :fixed="fixed"
+        :focus="focus"
+        :cursor="cursor"
+        :cursor-spacing="cursorSpacing"
+        :adjust-position="adjustPosition"
+        :confirm-type="confirmType"
+        :confirm-hold="confirmHold"
+        :disable-default-padding="disableDefaultPadding"
+        :show-confirm-bar="showConfirmBar"
+        :selection-start="selectionStart"
+        :selection-end="selectionEnd"
+        :hold-keyboard="holdKeyboard"
+        @input="onInput"
+        @focus="onFocus"
+        @blur="onBlur"
+        @confirm="onConfirm"
+        @linechange="onLineChange"
+        @keyboardheightchange="onKeyboardHeightChange"
+      />
+      <view
+        v-if="indicator && (maxcharacter > 0 || maxlength > 0)"
+        :class="classPrefix + '__indicator ' + tClassIndicator"
+      >
+        {{ count }} / {{ maxcharacter || maxlength }}
+      </view>
+    </view>
+  </view>
+</template>
+<script>
+import { uniComponent } from '../common/src/index';
+import { prefix } from '../common/config';
+import props from './props';
+import { getCharacterLength, coalesce, nextTick } from '../common/utils';
+import tools from '../common/utils.wxs';
+import { textareaStyle } from './computed.js';
+// import { getInnerMaxLen } from '../input/utils';
+import { RELATION_MAP } from '../common/relation/parent-map.js';
+
+
+const name = `${prefix}-textarea`;
+
+export default uniComponent({
+  name,
+  options: {
+    styleIsolation: 'shared',
+  },
+  externalClasses: [
+    `${prefix}-class`,
+    `${prefix}-class-textarea`,
+    `${prefix}-class-label`,
+    `${prefix}-class-indicator`,
+  ],
+  inject: {
+    [RELATION_MAP.FormKey]: {
+      default: null,
+    },
+  },
+  props: {
+    ...props,
+  },
+
+  emits: [
+    'update:value',
+  ],
+
+  data() {
+    return {
+      prefix,
+      classPrefix: name,
+      count: 0,
+      tools,
+
+      dataValue: coalesce(this.value, this.defaultValue, ''),
+    };
+  },
+  watch: {
+    value(val) {
+      this.updateValue(val);
+
+      if (this[RELATION_MAP.FormKey]
+        && this[RELATION_MAP.FormKey].onValueChange) {
+        this[RELATION_MAP.FormKey].onValueChange(val);
+      }
+    },
+  },
+  mounted() {
+    const { value, defaultValue } = this;
+    this.updateValue(coalesce(value, defaultValue, ''));
+  },
+  methods: {
+    textareaStyle,
+    updateCount(val) {
+      const { maxcharacter, maxlength } = this;
+      const { count } = this.calculateValue(val, maxcharacter, maxlength);
+      this.count = count;
+    },
+
+    updateValue(val) {
+      const { maxcharacter, maxlength } = this;
+      const { value, count } = this.calculateValue(val, maxcharacter, maxlength);
+
+      this.dataValue = val;
+
+
+      nextTick().then(() => {
+        this.dataValue = value;
+        this.count = count;
+      });
+      // this.updateInnerMaxLen();
+    },
+
+    calculateValue(value, maxcharacter, maxlength) {
+      const { allowInputOverMax } = this;
+      if (maxcharacter > 0 && !Number.isNaN(maxcharacter)) {
+        const { length, characters } = getCharacterLength(
+          'maxcharacter',
+          value,
+          allowInputOverMax ? Infinity : maxcharacter,
+        );
+        return {
+          value: characters,
+          count: length,
+        };
+      }
+      if (maxlength > 0 && !Number.isNaN(maxlength)) {
+        const { length, characters } = getCharacterLength('maxlength', value, allowInputOverMax ? Infinity : maxlength);
+        return {
+          value: characters,
+          count: length,
+        };
+      }
+      return {
+        value,
+        count: value ? String(value).length : 0,
+      };
+    },
+
+    onInput(event) {
+      const { value, cursor } = event.detail;
+      this.updateValue(value);
+      this.emitChange({ value: this.dataValue, cursor });
+    },
+
+    emitChange(data) {
+      this.$emit('change', data);
+      this.$emit('update:value', data.value);
+    },
+
+    onFocus(event) {
+      this.$emit('focus', {
+        ...event.detail,
+      });
+    },
+    onBlur(event) {
+      this.$emit('blur', {
+        ...event.detail,
+      });
+
+      if (this[RELATION_MAP.FormKey]
+        && this[RELATION_MAP.FormKey].onBlur) {
+        this[RELATION_MAP.FormKey].onBlur(event.detail.value);
+      }
+    },
+    onConfirm(event) {
+      this.$emit('enter', {
+        ...event.detail,
+      });
+    },
+    onLineChange(event) {
+      this.$emit('line-change', {
+        ...event.detail,
+      });
+    },
+    onKeyboardHeightChange(e) {
+      this.$emit('keyboardheightchange', e.detail);
+    },
+
+    // updateInnerMaxLen() {
+    //   this.innerMaxLen = this.getInnerMaxLen();
+    // },
+    // getInnerMaxLen() {
+    //   const {
+    //     allowInputOverMax,
+    //     maxcharacter,
+    //     maxlength,
+    //     dataValue,
+    //     rawValue,
+    //     count,
+    //   } = this;
+    //   return getInnerMaxLen({
+    //     allowInputOverMax,
+    //     maxcharacter,
+    //     maxlength,
+    //     dataValue,
+    //     rawValue,
+    //     count,
+    //   });
+    // },
+  },
+});
+</script>
+<style scoped>
+@import './textarea.css';
+</style>