@cloudbase/weda-ui-mp 3.6.0

package/components/wd-text/index.js

@@ -0,0 +1,162 @@
+import classNames from '../../utils/classnames';
+import handleEvents from '../../utils/handleEvents';
+import { WD_TEXT_LEVEL, WD_TEXT_MAX_LINES } from '../../utils/enum';
+import { convertLegacyEnum } from '../../utils/platform';
+import { commonCompBehavior } from '../../utils/common-behavior';
+import { WD_PREFIX } from '../../utils/constant';
+
+Component({
+  options: {
+    virtualHost: true,
+  },
+  behaviors: [commonCompBehavior],
+  properties: {
+    id: {
+      type: String,
+      value: '',
+    },
+    text: {
+      type: String,
+      value: '',
+    },
+    level: {
+      type: String,
+      value: 'body-default',
+    },
+    userSelect: {
+      type: Boolean,
+      value: false,
+    },
+    inheritColor: {
+      type: Boolean,
+      value: false,
+    },
+    space: {
+      type: Boolean,
+      value: true,
+    },
+    overflow: {
+      type: Boolean,
+      value: false,
+    },
+    maxLines: {
+      type: String,
+      value: '',
+    },
+    className: {
+      type: String,
+      value: '',
+    },
+    style: {
+      type: String,
+      value: '',
+    },
+  },
+  data: {
+    cls: '',
+    WebkitLineClamp: '',
+  },
+  methods: {
+    updateWidgetAPI() {
+      const { text, level, overflow, maxLines, space, userSelect, tips } =
+        this.data;
+
+      this.setReadonlyAttributes &&
+        this.setReadonlyAttributes({
+          text,
+          level,
+          overflow,
+          maxLines,
+          space,
+          userSelect,
+          tips,
+        });
+    },
+    init() {
+      {
+        const { className, level, maxLines, overflow, inheritColor } =
+          this.data;
+        const PROPS_VALUE_MAP = {
+          0: 'body-md',
+          1: 'title-1',
+          2: 'title-2',
+          3: 'title-3',
+          4: 'title-4',
+          5: 'title-5',
+          6: 'title-6',
+        };
+        // 兼容旧的组件样式
+        let _level = PROPS_VALUE_MAP[level] || level;
+        // 枚举转换
+        _level = convertLegacyEnum(_level, WD_TEXT_LEVEL);
+        const _maxLines = convertLegacyEnum(maxLines, WD_TEXT_MAX_LINES);
+
+        const classPrefix = WD_PREFIX;
+        const compClassName = `${classPrefix}-typography`;
+        // 响应式css api
+        const platformCss = `${classPrefix}-mp-typography`;
+        const levelClass = {
+          'title-1': `${compClassName}-display-lg`,
+          'title-2': `${compClassName}-display-md`,
+          'title-3': `${compClassName}-headline-lg`,
+          'title-4': `${compClassName}-headline-sm`,
+          'title-5': `${compClassName}-title-xl`,
+          'title-6': `${compClassName}-title-lg`,
+          'title-7': `${compClassName}-title-md`,
+          'title-8': `${compClassName}-title-sm`,
+          'title-9': `${compClassName}-title-xs`,
+          'body-sm': `${compClassName}-body-sm`,
+          'body-md': `${compClassName}-body-md`,
+          'body-lg': `${compClassName}-body-lg`,
+          0: `${compClassName}-body-md`,
+          1: `${compClassName}-display-lg`,
+          2: `${compClassName}-display-md`,
+          3: `${compClassName}-headline-lg`,
+          4: `${compClassName}-headline-sm`,
+          5: `${compClassName}-title-xl`,
+          6: `${compClassName}-title-lg`,
+        };
+        const classes = {
+          [compClassName]: true,
+          [levelClass[_level]]: levelClass[_level],
+          // 连续字符会换行，正常英文不会强制换行
+          [`${classPrefix}-g-word-break`]: true,
+          // 超出隐藏多少行
+          [`${classPrefix}-g-text-ellipsis-${_maxLines}`]: overflow,
+          // 是否继承父级颜色
+          [`${compClassName}__inherit-color`]: inheritColor,
+          [platformCss]: true,
+        };
+        // 兼容旧的text组件溢出省略
+        const maxLevel = 10;
+        if (Number(maxLines) > maxLevel) {
+          this.setData({ WebkitLineClamp: `-webkit-line-clamp: ${maxLines}` });
+        } else {
+          this.setData({ WebkitLineClamp: '' });
+        }
+
+        const cls = classNames({
+          ...classes,
+          [className]: className,
+        });
+        this.setData({ cls });
+      }
+    },
+    ...handleEvents([{ title: '点击', name: 'tap' }]),
+  },
+  observers: {
+    'className,level,maxLines,overflow,inheritColor': function () {
+      this.init();
+    },
+    'text,level,overflow,maxLines,space,userSelect,tips': function () {
+      this.updateWidgetAPI();
+    },
+  },
+  lifetimes: {
+    attached() {
+      this.init();
+      this.updateWidgetAPI();
+      this.setData({ id: this.id });
+    },
+  },
+});

package/components/wd-text/index.json

@@ -0,0 +1,5 @@
+{
+  "component": true,
+  "styleIsolation": "shared",
+  "usingComponents": {}
+}

package/components/wd-text/index.wxml

@@ -0,0 +1,8 @@
+<!-- 小程序 text 组件即使空白也会会有一个高度与web不一致，空白的时候改成空白view -->
+<block wx:if="{{text && text.length > 0}}">
+  <text wx:if="{{userSelect}}" user-select="{{userSelect}}" class="{{cls}}" style="{{style}}" id="{{id}}" space="{{space?'nbsp':''}}" bind:tap="tap">{{text}}</text>
+  <text wx:else class="{{cls}}" style="{{WebkitLineClamp}};{{style}}" id="{{id}}" space="{{space?'nbsp':''}}" bind:tap="tap">{{text}}</text>
+</block>
+<block wx:else>
+  <view class="{{cls}}" style="{{style}}" id="{{id}}" bind:tap="tap">{{text}}</view>
+</block>

package/components/wd-text/index.wxss

@@ -0,0 +1,2 @@
+@import '../../style/wd-design.wxss';
+@import './wd-text.wxss';

package/components/wd-text/wd-text.wxss

@@ -0,0 +1,256 @@
+@charset "UTF-8";
+.wd-g-text-default {
+  color: var(--wd-color-text-default);
+}
+
+.wd-g-text-secondary {
+  color: var(--wd-color-text-secondary);
+}
+
+.wd-g-text-placeholder {
+  color: var(--wd-color-text-placeholder);
+}
+
+.wd-g-text-disabled {
+  color: var(--wd-color-text-disabled);
+}
+
+.wd-g-text-brand {
+  color: var(--wd-color-text-brand);
+}
+
+.wd-g-text-error {
+  color: var(--wd-color-text-error);
+}
+
+.wd-g-text-success {
+  color: var(--wd-color-text-success);
+}
+
+.wd-g-text-refresh {
+  color: var(--wd-color-brand);
+}
+
+.wd-g-text-warning,
+.wd-g-text-warn {
+  color: var(--wd-color-text-warning);
+}
+
+.wd-g-text-ellipsis-1 {
+  /*将对象作为弹性伸缩盒子模型显示*/
+  display: -webkit-box;
+  overflow: hidden;
+  /*-webkit-line-clamp不是一个规范的属性，只有chrome浏览器支持，兼容性不好，适用于移动端，因为移动设备浏览器更多是基于webkit内核*/
+  -webkit-line-clamp: 1;
+  /*设置或检索伸缩盒对象的子元素的排列方式*/
+  -webkit-box-orient: vertical;
+}
+
+.wd-g-text-ellipsis-2 {
+  /*将对象作为弹性伸缩盒子模型显示*/
+  display: -webkit-box;
+  overflow: hidden;
+  /*-webkit-line-clamp不是一个规范的属性，只有chrome浏览器支持，兼容性不好，适用于移动端，因为移动设备浏览器更多是基于webkit内核*/
+  -webkit-line-clamp: 2;
+  /*设置或检索伸缩盒对象的子元素的排列方式*/
+  -webkit-box-orient: vertical;
+}
+
+.wd-g-text-ellipsis-3 {
+  /*将对象作为弹性伸缩盒子模型显示*/
+  display: -webkit-box;
+  overflow: hidden;
+  /*-webkit-line-clamp不是一个规范的属性，只有chrome浏览器支持，兼容性不好，适用于移动端，因为移动设备浏览器更多是基于webkit内核*/
+  -webkit-line-clamp: 3;
+  /*设置或检索伸缩盒对象的子元素的排列方式*/
+  -webkit-box-orient: vertical;
+}
+
+.wd-g-text-ellipsis-4 {
+  /*将对象作为弹性伸缩盒子模型显示*/
+  display: -webkit-box;
+  overflow: hidden;
+  /*-webkit-line-clamp不是一个规范的属性，只有chrome浏览器支持，兼容性不好，适用于移动端，因为移动设备浏览器更多是基于webkit内核*/
+  -webkit-line-clamp: 4;
+  /*设置或检索伸缩盒对象的子元素的排列方式*/
+  -webkit-box-orient: vertical;
+}
+
+.wd-g-text-ellipsis-5 {
+  /*将对象作为弹性伸缩盒子模型显示*/
+  display: -webkit-box;
+  overflow: hidden;
+  /*-webkit-line-clamp不是一个规范的属性，只有chrome浏览器支持，兼容性不好，适用于移动端，因为移动设备浏览器更多是基于webkit内核*/
+  -webkit-line-clamp: 5;
+  /*设置或检索伸缩盒对象的子元素的排列方式*/
+  -webkit-box-orient: vertical;
+}
+
+.wd-g-text-ellipsis-6 {
+  /*将对象作为弹性伸缩盒子模型显示*/
+  display: -webkit-box;
+  overflow: hidden;
+  /*-webkit-line-clamp不是一个规范的属性，只有chrome浏览器支持，兼容性不好，适用于移动端，因为移动设备浏览器更多是基于webkit内核*/
+  -webkit-line-clamp: 6;
+  /*设置或检索伸缩盒对象的子元素的排列方式*/
+  -webkit-box-orient: vertical;
+}
+
+.wd-g-text-ellipsis-7 {
+  /*将对象作为弹性伸缩盒子模型显示*/
+  display: -webkit-box;
+  overflow: hidden;
+  /*-webkit-line-clamp不是一个规范的属性，只有chrome浏览器支持，兼容性不好，适用于移动端，因为移动设备浏览器更多是基于webkit内核*/
+  -webkit-line-clamp: 7;
+  /*设置或检索伸缩盒对象的子元素的排列方式*/
+  -webkit-box-orient: vertical;
+}
+
+.wd-g-text-ellipsis-8 {
+  /*将对象作为弹性伸缩盒子模型显示*/
+  display: -webkit-box;
+  overflow: hidden;
+  /*-webkit-line-clamp不是一个规范的属性，只有chrome浏览器支持，兼容性不好，适用于移动端，因为移动设备浏览器更多是基于webkit内核*/
+  -webkit-line-clamp: 8;
+  /*设置或检索伸缩盒对象的子元素的排列方式*/
+  -webkit-box-orient: vertical;
+}
+
+.wd-g-text-ellipsis-9 {
+  /*将对象作为弹性伸缩盒子模型显示*/
+  display: -webkit-box;
+  overflow: hidden;
+  /*-webkit-line-clamp不是一个规范的属性，只有chrome浏览器支持，兼容性不好，适用于移动端，因为移动设备浏览器更多是基于webkit内核*/
+  -webkit-line-clamp: 9;
+  /*设置或检索伸缩盒对象的子元素的排列方式*/
+  -webkit-box-orient: vertical;
+}
+
+.wd-g-text-ellipsis-10 {
+  /*将对象作为弹性伸缩盒子模型显示*/
+  display: -webkit-box;
+  overflow: hidden;
+  /*-webkit-line-clamp不是一个规范的属性，只有chrome浏览器支持，兼容性不好，适用于移动端，因为移动设备浏览器更多是基于webkit内核*/
+  -webkit-line-clamp: 10;
+  /*设置或检索伸缩盒对象的子元素的排列方式*/
+  -webkit-box-orient: vertical;
+}
+
+.wd-g-user-select-auto {
+  user-select: auto;
+}
+
+.wd-g-user-select-none {
+  user-select: none;
+}
+
+.wd-g-white-space-pre-line {
+  white-space: pre-line;
+}
+
+.wd-g-white-space-pre-wrap {
+  white-space: pre-wrap;
+}
+
+.wd-g-white-space-pre {
+  white-space: pre;
+}
+
+.wd-g-word-break {
+  word-wrap: break-word;
+  word-break: break-word;
+}
+
+.wd-typography {
+  --wd-body-margin-top: 0;
+  --wd-body-margin-bottom: 0;
+  --wd-title-margin-top: 0;
+  --wd-title-margin-bottom: 0;
+}
+
+.wd-typography {
+  color: var(--wd-color-text-default);
+  font-size: var(--wd-font-size-default);
+  line-height: var(--wd-font-line-height-default);
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  font-size: inherit;
+  font-weight: inherit;
+}
+.wd-typography-body-sm {
+  font: var(--wd-typography-body-sm);
+  margin-top: var(--wd-body-margin-top);
+  margin-bottom: var(--wd-body-margin-bottom);
+}
+.wd-typography-body-md {
+  font: var(--wd-typography-body-md);
+  margin-top: var(--wd-body-margin-top);
+  margin-bottom: var(--wd-body-margin-bottom);
+}
+.wd-typography-body-lg {
+  font: var(--wd-typography-body-lg);
+  margin-top: var(--wd-body-margin-top);
+  margin-bottom: var(--wd-body-margin-bottom);
+}
+.wd-typography-display-lg {
+  font: var(--wd-typography-display-lg);
+  margin-top: var(--wd-title-margin-top);
+  margin-bottom: var(--wd-title-margin-bottom);
+}
+.wd-typography-display-md {
+  font: var(--wd-typography-display-md);
+  margin-top: var(--wd-title-margin-top);
+  margin-bottom: var(--wd-title-margin-bottom);
+}
+.wd-typography-headline-lg {
+  font: var(--wd-typography-headline-lg);
+  margin-top: var(--wd-title-margin-top);
+  margin-bottom: var(--wd-title-margin-bottom);
+}
+.wd-typography-headline-md {
+  font: var(--wd-typography-headline-md);
+  margin-top: var(--wd-title-margin-top);
+  margin-bottom: var(--wd-title-margin-bottom);
+}
+.wd-typography-headline-sm {
+  font: var(--wd-typography-headline-sm);
+  margin-top: var(--wd-title-margin-top);
+  margin-bottom: var(--wd-title-margin-bottom);
+}
+.wd-typography-title-xs {
+  font: var(--wd-typography-title-xs);
+  margin-top: var(--wd-title-margin-top);
+  margin-bottom: var(--wd-title-margin-bottom);
+}
+.wd-typography-title-sm {
+  font: var(--wd-typography-title-sm);
+  margin-top: var(--wd-title-margin-top);
+  margin-bottom: var(--wd-title-margin-bottom);
+}
+.wd-typography-title-md {
+  font: var(--wd-typography-title-md);
+  margin-top: var(--wd-title-margin-top);
+  margin-bottom: var(--wd-title-margin-bottom);
+}
+.wd-typography-title-lg {
+  font: var(--wd-typography-title-lg);
+  margin-top: var(--wd-title-margin-top);
+  margin-bottom: var(--wd-title-margin-bottom);
+}
+.wd-typography-title-xl {
+  font: var(--wd-typography-title-xl);
+  margin-top: var(--wd-title-margin-top);
+  margin-bottom: var(--wd-title-margin-bottom);
+}
+.wd-typography__inherit-color {
+  color: inherit;
+}
+
+.wd-typography {
+  display: block;
+}
+.wd-typography.wd-g-text-ellipsis-1, .wd-typography.wd-g-text-ellipsis-2, .wd-typography.wd-g-text-ellipsis-3, .wd-typography.wd-g-text-ellipsis-4, .wd-typography.wd-g-text-ellipsis-5, .wd-typography.wd-g-text-ellipsis-6, .wd-typography.wd-g-text-ellipsis-7, .wd-typography.wd-g-text-ellipsis-8, .wd-typography.wd-g-text-ellipsis-9, .wd-typography.wd-g-text-ellipsis-10 {
+  display: -webkit-box;
+}

package/components/wd-textarea/index.js

@@ -0,0 +1,94 @@
+import { commonCompBehavior } from '../../utils/common-behavior';
+import formFieldBehavior from '../form-field-behavior/form-field-behavior';
+import itemBehavior from '../form-field-behavior/item-behavior';
+import { WD_PREFIX } from '../../utils/constant';
+import classNames from '../../utils/classnames';
+import { convertSize } from '../../utils/getFormLegacy';
+
+Component({
+  options: { virtualHost: true },
+  behaviors: [itemBehavior, commonCompBehavior, formFieldBehavior],
+  properties: {
+    classRoot: {
+      type: String,
+      value: 'textarea',
+    },
+    counterVisible: {
+      type: Boolean,
+      value: true,
+    },
+  },
+  data: {
+    classPrefix: WD_PREFIX,
+    cls: '',
+    countCls: '',
+    counter: 0,
+    placeholderCls: `${WD_PREFIX}-form-input-wrap__placeholder weui-input__placeholder`,
+    _size: 'md',
+  },
+  methods: {
+    handleChange: function (e) {
+      this.setData({ value: e.detail.value });
+      this.triggerEvent('change', e.detail);
+    },
+    handleFocus: function (e) {
+      this.triggerEvent('focus', e.detail);
+    },
+    handleBlur: function (e) {
+      this.triggerEvent('blur', e.detail);
+    },
+    updateWidgetAPI: function () {
+      const { name, value, label, required, visible, disabled, readOnly } =
+        this.data;
+      this.setReadonlyAttributes?.({
+        name,
+        value,
+        label,
+        required,
+        visible,
+        disabled,
+        readOnly,
+      });
+    },
+    init() {
+      const { disabled, size, classRoot } = this.data;
+      const { classPrefix } = this.data;
+      const _size = convertSize(size);
+      const root = `${classPrefix}-${classRoot}`;
+      const inputWrap = `${classPrefix}-form-input-wrap`;
+      const textareaWrap = `${classPrefix}-form-textarea-wrap`;
+      const cls = classNames(
+        inputWrap,
+        textareaWrap,
+        `${root}-${classRoot}`,
+        `size-width-${_size}`,
+        `size-font-${_size}`,
+        {
+          'size-width-hundred': true,
+          'is-disabled': disabled,
+          'textarea-restriction': true,
+        }
+      );
+      const countCls = `${textareaWrap}__label ${root}-${classRoot}__count-text`;
+      this.setData({ cls, countCls, _size });
+    },
+  },
+  observers: {
+    'disabled,counterVisible,size,classRoot': function () {
+      this.init();
+    },
+    value: function (value) {
+      const counter = typeof value === 'string' ? value.length : 0;
+      this.setData({ counter });
+    },
+    'name, value, label, required, visible, disabled, readOnly': function () {
+      this.updateWidgetAPI();
+    },
+  },
+  lifetimes: {
+    attached: function () {
+      this.init();
+      this.updateWidgetAPI();
+    },
+  },
+});

package/components/wd-textarea/index.json

@@ -0,0 +1,7 @@
+{
+  "component": true,
+  "styleIsolation": "shared",
+  "usingComponents": {
+    "wd-form-item": "../wd-form-item/index"
+  }
+}

package/components/wd-textarea/index.wxml

@@ -0,0 +1,31 @@
+<block wx:if="{{visible}}">
+  <wd-form-item
+    id="{{id}}"
+    className="{{className}}"
+    style="{{style}}"
+    label="{{label}}"
+    labelVisible="{{labelVisible}}"
+    labelTips="{{labelTips}}"
+    labelWidth="{{labelWidth}}"
+    labelAlign="{{labelAlign}}"
+    labelWrap="{{labelWrap}}"
+    layout="{{actualLayout}}"
+    extra="{{extra}}"
+    required="{{required}}"
+    readOnly="{{readOnly}}"
+    requiredFlag="{{requiredFlag}}"
+    validateState="{{validateState}}"
+    validateErrorMsg="{{validateErrorMsg}}"
+    readValue="{{value}}"
+    classRoot="{{classRoot}}"
+    size="{{_size}}"
+    borderedH5="{{borderedH5}}"
+  >
+    <view class="{{cls}}" wx:if="{{!readOnly}}">
+      <textarea placeholder-class="{{placeholderCls}}" auto-focus="{{focus}}" auto-height="{{autoHeight}}" cursor-spacing="{{cursorSpacing}}" focus="{{focus}}" placeholder="{{placeholder}}" value="{{value}}" disabled="{{disabled}}" maxlength="{{maxLength}}" bind:input="handleChange" bind:focus="handleFocus" bind:blur="handleBlur"></textarea>
+      <block wx:if="{{counterVisible}}">
+        <label class="{{countCls}}">{{counter}}/{{maxLength}}</label>
+      </block>
+    </view>
+  </wd-form-item>
+</block>

package/components/wd-textarea/index.wxss

@@ -0,0 +1,7 @@
+@import '../../style/wd-design.wxss';
+@import '../../style/utils.wxss';
+
+@import '../form/form/index.wxss';
+@import '../wd-input-wrap/wd-input-wrap.wxss';
+
+@import './wd-textarea.wxss';

package/components/wd-textarea/wd-textarea.wxss

@@ -0,0 +1,91 @@
+.wd-form-textarea-wrap {
+  --wd-form-textarea-group-max-height: 13.125rem;
+  --wd-form-textarea-wrap-height-sm: var(--wd-form-height-sm);
+  --wd-form-textarea-wrap-height-md: 3.5rem;
+  --wd-form-textarea-wrap-restriction-height-md: 3rem;
+  --wd-form-textarea-wrap-height-lg: var(--wd-form-height-lg);
+  --wd-form-textarea-wrap-width-sm: var(--wd-form-width-sm);
+  --wd-form-textarea-wrap-width-md: var(--wd-form-width-md);
+  --wd-form-textarea-wrap-width-lg: var(--wd-form-width-lg);
+  --wd-form-textarea-label-font-weight: var(--wd-font-weight-regular);
+  --wd-form-textarea-label-font-size: var(--wd-font-size-2);
+  --wd-form-textarea-label-height: 1.25rem;
+  --wd-form-textarea-label-color: var(--wd-color-text-placeholder);
+  --wd-form-textarea-wrap-padding: 0.3125rem 0.3125rem 0.3125rem 0.5rem;
+}
+
+.wd-form-textarea-wrap {
+  color: var(--wd-color-text-default);
+  font-size: var(--wd-font-size-default);
+  line-height: var(--wd-font-line-height-default);
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  height: auto;
+  padding: var(--wd-form-textarea-wrap-padding);
+}
+.wd-form-textarea-wrap.is-disabled textarea {
+  cursor: not-allowed;
+}
+.wd-form-textarea-wrap .wd-form-input-wrap__content {
+  flex-direction: column;
+}
+.wd-form-textarea-wrap__label {
+  font-weight: var(--wd-form-textarea-label-font-weight);
+  font-size: var(--wd-form-textarea-label-font-size);
+  line-height: var(--wd-form-textarea-label-height);
+  width: 100%;
+  text-align: right;
+  color: var(--wd-form-textarea-label-color);
+}
+.wd-form-textarea-wrap__input {
+  max-height: var(--wd-form-textarea-group-max-height);
+}
+
+.wd-form-textarea-wrap.textarea-restriction textarea, .wd-form-textarea-wrap.textarea-restriction__input {
+  min-height: var(--wd-form-textarea-wrap-restriction-height-md);
+  resize: none;
+}
+
+.wd-form-textarea-wrap.size-font-sm {
+  font: var(--wd-typography-body-sm);
+}
+.wd-form-textarea-wrap.size-height-sm {
+  height: var(--wd-form-height-sm);
+}
+.wd-form-textarea-wrap.size-width-sm {
+  width: var(--wd-form-width-sm);
+}
+.wd-form-textarea-wrap.size-font-md {
+  font: var(--wd-typography-body-md);
+}
+.wd-form-textarea-wrap.size-height-md {
+  height: var(--wd-form-item-height-md);
+}
+.wd-form-textarea-wrap.size-width-md {
+  width: var(--wd-form-width-md);
+}
+.wd-form-textarea-wrap.size-font-lg {
+  font: var(--wd-typography-body-lg);
+}
+.wd-form-textarea-wrap.size-height-lg {
+  height: var(--wd-form-item-height-lg);
+}
+.wd-form-textarea-wrap.size-width-lg {
+  width: var(--wd-form-width-lg);
+}
+.wd-form-textarea-wrap.size-width-hundred {
+  width: 100%;
+}
+.wd-form-textarea-wrap.size-height-sm {
+  height: var(--wd-form-textarea-wrap-height-md);
+}
+.wd-form-textarea-wrap.size-height-md {
+  height: var(--wd-form-textarea-wrap-height-md);
+}
+.wd-form-textarea-wrap.size-height-lg {
+  height: var(--wd-form-textarea-wrap-height-md);
+}