@tplc/wot 0.0.1

package/components/wd-textarea/index.scss

@@ -0,0 +1,343 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+.wot-theme-dark {
+  @include b(textarea) {
+    background: $-dark-background2;
+
+    &::after {
+      background: $-dark-color-gray;
+    }
+
+    @include when(not-empty) {
+      &:not(.is-disabled) {
+        &::after {
+          background-color: $-dark-color;
+        }
+      }
+    }
+
+    @include e(value) {
+      background: $-dark-background2;
+    }
+
+    @include e(inner) {
+      color: $-dark-color;
+
+      &::-webkit-input-placeholder {
+        color: $-dark-color3;
+      }
+    }
+
+    @include e(placeholder) {
+      color: $-dark-color3;
+    }
+
+    @include e(count) {
+      color: $-dark-color3;
+      background: transparent;
+    }
+
+    @include e(count-current) {
+      color: $-dark-color;
+    }
+
+    :deep(.wd-textarea__icon),
+    :deep(.wd-textarea__clear) {
+      color: $-dark-color;
+      background: transparent;
+    }
+
+    @include when(cell) {
+      background-color: $-dark-background2;
+
+      @include when(border) {
+        @include halfPixelBorder('top', $-textarea-cell-padding, $-dark-border-color);
+      }
+    }
+
+    @include when(disabled) {
+      .wd-textarea__inner {
+        color: $-dark-color-gray;
+        background: transparent;
+      }
+    }
+
+    @include e(label) {
+      color: $-dark-color;
+    }
+  }
+}
+
+@include b(textarea) {
+  position: relative;
+  padding: $-textarea-cell-padding $-textarea-padding;
+  text-align: left;
+  background: $-textarea-bg;
+  -webkit-tap-highlight-color: transparent;
+
+  &::after {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    display: none;
+    height: 1px;
+    content: '';
+    background: $-textarea-border-color;
+    transition: background-color 0.2s ease-in-out;
+    transform: scaleY(0.5);
+  }
+
+  @include e(label) {
+    position: relative;
+    box-sizing: border-box;
+    display: flex;
+    flex-shrink: 0;
+    width: $-input-cell-label-width;
+    margin-right: $-cell-padding;
+    font-size: $-textarea-fs;
+    color: $-cell-title-color;
+
+    @include when(required) {
+      padding-left: 12px;
+
+      &::after {
+        position: absolute;
+        top: 2px;
+        left: 0;
+        font-size: $-cell-required-size;
+        line-height: 1.1;
+        color: $-cell-required-color;
+        content: '*';
+      }
+    }
+  }
+
+  @include e(label-inner) {
+    display: inline-block;
+    font-size: $-textarea-fs;
+    line-height: $-cell-line-height;
+  }
+
+  @include e(prefix) {
+    margin-right: $-textarea-icon-margin;
+    font-size: $-textarea-fs;
+    line-height: initial;
+
+    :deep(.wd-textarea__icon) {
+      margin-left: 0;
+    }
+  }
+
+  @include e(suffix) {
+    flex-shrink: 0;
+    line-height: initial;
+  }
+
+  @include e(value) {
+    position: relative;
+    box-sizing: border-box;
+    padding: 0;
+    font-size: 0;
+    background: $-textarea-bg;
+
+    @include when(show-limit) {
+      padding-bottom: 36px;
+    }
+
+    @include when(suffix) {
+      padding-right: calc($-textarea-icon-size + 8px);
+    }
+  }
+
+  @include e(inner) {
+    box-sizing: border-box;
+    width: 100%;
+    min-height: 24px;
+    padding: 0;
+    font-size: $-textarea-fs;
+    line-height: $-cell-line-height;
+    color: $-textarea-color;
+    word-break: break-word;
+    background: none;
+    border: none;
+    outline: none;
+
+    &::-webkit-input-placeholder {
+      color: $-input-placeholder-color;
+    }
+  }
+
+  @include e(suffix) {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 1;
+  }
+
+  @include edeep(icon) {
+    margin-left: $-textarea-icon-margin;
+    font-size: $-textarea-icon-size;
+    color: $-textarea-icon-color;
+    background: $-textarea-bg;
+  }
+
+  @include edeep(clear) {
+    margin-left: $-textarea-icon-margin;
+    font-size: $-textarea-icon-size;
+    line-height: $-cell-line-height;
+    color: $-textarea-clear-color;
+    vertical-align: middle;
+    background: $-textarea-bg;
+  }
+
+  @include e(count) {
+    position: absolute;
+    right: 0;
+    bottom: 8px;
+    display: inline-flex;
+    font-size: $-textarea-count-fs;
+    line-height: 20px;
+    color: $-textarea-count-color;
+    background: $-textarea-bg;
+  }
+
+  @include e(count-current) {
+    color: $-textarea-count-current-color;
+
+    @include when(error) {
+      color: $-input-error-color;
+    }
+  }
+
+  @include e(placeholder) {
+    color: $-input-placeholder-color;
+
+    &.is-error {
+      color: $-input-error-color;
+    }
+  }
+
+  @include e(readonly-mask) {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 2;
+    width: 100%;
+    height: 100%;
+  }
+
+  @include e(error-message) {
+    font-size: $-form-item-error-message-font-size;
+    line-height: $-form-item-error-message-line-height;
+    color: $-form-item-error-message-color;
+    text-align: left;
+    vertical-align: middle;
+  }
+
+  @include when(not-empty) {
+    &:not(.is-disabled) {
+      &::after {
+        background-color: $-textarea-not-empty-border-color;
+      }
+    }
+  }
+
+  @include when(disabled) {
+    .wd-textarea__inner {
+      color: $-input-disabled-color;
+      background: transparent;
+    }
+  }
+
+  @include when(error) {
+    .wd-textarea__inner {
+      color: $-input-error-color;
+      background: transparent;
+    }
+  }
+
+  @include when(auto-height) {
+    &:not(.is-cell) {
+      padding: 5px 0;
+    }
+
+    &::after {
+      display: block;
+    }
+  }
+
+  @include when(no-border) {
+    &::after {
+      display: none;
+    }
+  }
+
+  @include when(cell) {
+    display: flex;
+    line-height: $-cell-line-height;
+
+    &.is-error::after {
+      background: $-textarea-cell-border-color;
+    }
+
+    .wd-textarea__value {
+      flex: 1;
+    }
+
+    :deep(.wd-textarea__icon) {
+      display: inline-flex;
+      align-items: center;
+      height: $-textarea-cell-height;
+      line-height: $-textarea-cell-height;
+    }
+
+    .wd-textarea__prefix {
+      display: inline-block;
+      margin-right: $-cell-icon-right;
+    }
+
+    &.wd-textarea::after {
+      display: none;
+    }
+
+    .wd-textarea__suffix {
+      right: 0;
+    }
+
+    @include when(center) {
+      align-items: center;
+    }
+
+    @include when(border) {
+      @include halfPixelBorder('top', $-textarea-cell-padding);
+    }
+  }
+
+  @include when(large) {
+    padding: $-textarea-cell-padding-large;
+
+    .wd-textarea__prefix {
+      font-size: $-textarea-fs-large;
+    }
+
+    .wd-textarea__label-inner {
+      font-size: $-textarea-fs-large;
+    }
+
+    .wd-textarea__inner {
+      font-size: $-textarea-fs-large;
+    }
+
+    .wd-textarea__count {
+      font-size: $-textarea-count-fs-large;
+    }
+
+    :deep(.wd-textarea__icon),
+    :deep(.wd-textarea__clear) {
+      font-size: $-textarea-icon-size-large;
+    }
+  }
+}

package/components/wd-textarea/types.ts

@@ -0,0 +1,298 @@
+import type { ExtractPropTypes } from 'vue'
+import {
+  baseProps,
+  makeArrayProp,
+  makeBooleanProp,
+  makeNumberProp,
+  makeNumericProp,
+  makeStringProp,
+} from '../common/props'
+import type { FormItemRule } from '../wd-form/types'
+import type { InputClearTrigger } from '../wd-input/types'
+
+export type ConfirmType = 'send' | 'search' | 'next' | 'go' | 'done'
+
+export const textareaProps = {
+  ...baseProps,
+  /**
+   * * 自定义文本域容器class名称。
+   * 类型：string
+   */
+  customTextareaContainerClass: makeStringProp(''),
+
+  /**
+   * * 自定义文本域class名称。
+   * 类型：string
+   */
+  customTextareaClass: makeStringProp(''),
+
+  /**
+   * * 自定义标签class名称。
+   * 类型：string
+   */
+  customLabelClass: makeStringProp(''),
+  // 原生属性
+  /**
+   * * 绑定值。
+   * 类型：string | number
+   */
+  modelValue: makeNumericProp(''),
+
+  /**
+   * * 占位文本。
+   * 类型：string
+   * 默认值：'请输入...'
+   */
+  placeholder: String,
+
+  /**
+   * 指定placeholder的样式。
+   * 类型：string
+   */
+  placeholderStyle: String,
+
+  /**
+   * * 指定placeholder的样式类。
+   * 类型：string
+   * 默认值：空字符串
+   */
+  placeholderClass: makeStringProp(''),
+
+  /**
+   * * 禁用输入框。
+   * 类型：boolean
+   * 默认值：false
+   */
+  disabled: makeBooleanProp(false),
+
+  /**
+   * * 最大输入长度，设置为-1表示不限制最大长度。
+   * 类型：number
+   * 默认值：-1
+   */
+  maxlength: makeNumberProp(-1),
+
+  /**
+   * * 自动聚焦并拉起键盘。
+   * 类型：boolean
+   * 默认值：false
+   */
+  autoFocus: makeBooleanProp(false),
+
+  /**
+   * * 获取焦点。
+   * 类型：boolean
+   * 默认值：false
+   */
+  focus: makeBooleanProp(false),
+
+  /**
+   * * 是否自动增高输入框高度，style.height属性在auto-height生效时不生效。
+   * 类型：boolean
+   * 默认值：false
+   */
+  autoHeight: makeBooleanProp(false),
+
+  /**
+   * * 如果textarea处于position:fixed区域，需要设置此属性为true。
+   * 类型：boolean
+   * 默认值：false
+   */
+  fixed: makeBooleanProp(false),
+
+  /**
+   * * 指定光标与键盘的距离，取textarea距离底部的距离和cursor-spacing指定的距离的最小值作为实际距离。
+   * 类型：number
+   * 默认值：0
+   */
+  cursorSpacing: makeNumberProp(0),
+
+  /**
+   * * 指定focus时的光标位置。
+   * 类型：number
+   * 默认值：-1
+   */
+  cursor: makeNumberProp(-1),
+
+  /**
+   * * 设置键盘右下角按钮的文字。
+   * 类型：string
+   * 默认值：'done'
+   * 可选值有'done', 'go', 'next', 'search', 'send'
+   */
+  confirmType: makeStringProp<ConfirmType | null>(null),
+
+  /**
+   * * 点击键盘右下角按钮时是否保持键盘不收起。
+   * 类型：boolean
+   * 默认值：false
+   */
+  confirmHold: makeBooleanProp(false),
+
+  /**
+   * * 是否显示键盘上方带有“完成”按钮那一栏。
+   * 类型：boolean
+   * 默认值：true
+   */
+  showConfirmBar: makeBooleanProp(true),
+
+  /**
+   * * 光标起始位置，自动聚集时有效，需与selection-end搭配使用。
+   * 类型：number
+   * 默认值：-1
+   */
+  selectionStart: makeNumberProp(-1),
+
+  /**
+   * * 光标结束位置，自动聚集时有效，需与selection-start搭配使用。
+   * 类型：number
+   * 默认值：-1
+   */
+  selectionEnd: makeNumberProp(-1),
+
+  /**
+   * * 键盘弹起时是否自动上推页面。
+   * 类型：boolean
+   * 默认值：true
+   */
+  adjustPosition: makeBooleanProp(true),
+
+  /**
+   * * 是否去掉iOS下的默认内边距。
+   * 类型：boolean
+   * 默认值：false
+   */
+  disableDefaultPadding: makeBooleanProp(false),
+
+  /**
+   * * focus状态下点击页面时是否不收起键盘。
+   * 类型：boolean
+   * 默认值：false
+   */
+  holdKeyboard: makeBooleanProp(false),
+
+  // 非原生属性
+  /**
+   * * 显示为密码框。
+   * 类型：boolean
+   * 默认值：false
+   */
+  showPassword: makeBooleanProp(false),
+
+  /**
+   * * 是否显示清空按钮。
+   * 类型：boolean
+   * 默认值：false
+   */
+  clearable: makeBooleanProp(false),
+
+  /**
+   * * 输入框只读状态。
+   * 类型：boolean
+   * 默认值：false
+   */
+  readonly: makeBooleanProp(false),
+
+  /**
+   * * 前置图标，icon组件中的图标类名。
+   * 类型：string
+   */
+  prefixIcon: String,
+
+  /**
+   * * 是否使用前置图标插槽。
+   * 类型：boolean
+   * 默认值：false
+   */
+  usePrefixSlot: makeBooleanProp(false),
+
+  /**
+   * * 是否显示字数限制，需要同时设置maxlength。
+   * 类型：boolean
+   * 默认值：false
+   */
+  showWordLimit: makeBooleanProp(false),
+
+  /**
+   * * 设置左侧标题。
+   * 类型：string
+   */
+  label: String,
+
+  /**
+   * * 设置左侧标题宽度。
+   * 类型：string
+   * 默认值：'33%'
+   */
+  labelWidth: makeStringProp('33%'),
+
+  /**
+   * * 是否使用label插槽。
+   * 类型：boolean
+   * 默认值：false
+   */
+  useLabelSlot: makeBooleanProp(false),
+
+  /**
+   * * 设置输入框大小。
+   * 类型：string
+   */
+  size: String,
+
+  /**
+   * * 设置输入框错误状态（红色）。
+   * 类型：boolean
+   * 默认值：false
+   */
+  error: makeBooleanProp(false),
+
+  /**
+   * * 当存在label属性时，设置标题和输入框垂直居中，默认为顶部居中。
+   * 类型：boolean
+   * 默认值：false
+   */
+  center: makeBooleanProp(false),
+
+  /**
+   * * 非cell类型下是否隐藏下划线。
+   * 类型：boolean
+   * 默认值：false
+   */
+  noBorder: makeBooleanProp(false),
+
+  /**
+   * * cell类型下必填样式。
+   * 类型：boolean
+   * 默认值：false
+   */
+  required: makeBooleanProp(false),
+
+  /**
+   * * 表单域model字段名，在使用表单校验功能的情况下，该属性是必填的。
+   * 类型：string
+   */
+  prop: makeStringProp(''),
+
+  /**
+   * * 表单验证规则。
+   * 类型：FormItemRule[]
+   * 默认值：[]
+   */
+  rules: makeArrayProp<FormItemRule>(),
+  /**
+   * 显示清除图标的时机，always 表示输入框不为空时展示，focus 表示输入框聚焦且不为空时展示
+   * 类型: "focus" | "always"
+   * 默认值: "always"
+   * 最低版本: $LOWEST_VERSION$
+   */
+  clearTrigger: makeStringProp<InputClearTrigger>('always'),
+  /**
+   * 是否在点击清除按钮时聚焦输入框
+   * 类型: boolean
+   * 默认值: true
+   * 最低版本: $LOWEST_VERSION$
+   */
+  focusWhenClear: makeBooleanProp(true),
+}
+
+export type TextareaProps = ExtractPropTypes<typeof textareaProps>