@tdesign/uniapp 0.0.1-alpha.1 → 0.7.1

package/dist/input/input.css

@@ -0,0 +1,161 @@
+.t-input {
+  background-color: var(--td-input-bg-color, var(--td-bg-color-container, var(--td-font-white-1, #ffffff)));
+  display: flex;
+  align-items: var(--td-input-align-items, center);
+  flex: 1;
+  padding: var(--td-input-vertical-padding, 32rpx);
+  overflow: hidden;
+}
+.t-input--border {
+  position: relative;
+}
+.t-input--border::after {
+  content: '';
+  display: block;
+  position: absolute;
+  top: unset;
+  bottom: 0;
+  left: unset;
+  right: unset;
+  background-color: var(--td-input-border-color, var(--td-component-stroke, var(--td-gray-color-3, #e7e7e7)));
+}
+.t-input--border::after {
+  height: 1px;
+  left: 0;
+  right: 0;
+  transform: scaleY(0.5);
+}
+.t-input--border:after {
+  left: var(--td-input-border-left-space, 32rpx);
+  right: var(--td-input-border-right-space, 0);
+}
+.t-input--layout-vertical {
+  flex-direction: column;
+  align-items: start;
+}
+.t-input__wrap--prefix {
+  display: flex;
+}
+.t-input__icon--prefix {
+  font-size: 48rpx;
+  color: var(--td-input-prefix-icon-color, var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9))));
+}
+.t-input__label:not(:empty) {
+  min-width: var(--td-input-label-min-width, 2em);
+  max-width: var(--td-input-label-max-width, 5em);
+  font: var(--td-input-label-text-font, var(--td-font-body-large, 32rpx / 48rpx var(--td-font-family, PingFang SC, Microsoft YaHei, Arial Regular)));
+  color: var(--td-input-label-text-color, var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9))));
+  margin-right: var(--td-spacer-2, 32rpx);
+  word-wrap: break-word;
+}
+.t-input--layout-vertical .t-input__label:not(:empty) {
+  font-size: var(--td-font-size-base, 28rpx);
+  padding-bottom: 8rpx;
+}
+.t-input__icon--prefix:not(:empty) + .t-input__label:not(:empty) {
+  padding-left: 8rpx;
+}
+.t-input__label:not(:empty) + .t-input__wrap {
+  margin-left: var(--td-spacer-2, 32rpx);
+}
+.t-input__icon--prefix:not(:empty) + .t-input__label:empty {
+  margin-right: var(--td-spacer-2, 32rpx);
+}
+.t-input__wrap {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  justify-content: center;
+  flex-shrink: 1;
+  flex: 1;
+}
+.t-input__wrap .t-input__content {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  font: var(--td-font-body-large, 32rpx / 48rpx var(--td-font-family, PingFang SC, Microsoft YaHei, Arial Regular));
+}
+.t-input__wrap--clearable-icon,
+.t-input__wrap--suffix-icon,
+.t-input__wrap--suffix {
+  flex: 0 0 auto;
+  padding-left: var(--td-spacer-1, 24rpx);
+}
+.t-input__wrap--clearable-icon:empty,
+.t-input__wrap--suffix-icon:empty,
+.t-input__wrap--suffix:empty {
+  display: none;
+}
+.t-input__wrap--clearable-icon,
+.t-input__wrap--suffix-icon {
+  font-size: 48rpx;
+  color: var(--td-input-suffix-icon-color, var(--td-text-color-placeholder, var(--td-font-gray-3, rgba(0, 0, 0, 0.4))));
+}
+.t-input__wrap--suffix {
+  font-size: var(--td-font-size-m, 32rpx);
+  color: var(--td-input-suffix-text-color, var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9))));
+}
+.t-input__icon--prefix:empty,
+.t-input__tips:empty,
+.t-input__wrap--clearable-icon:empty,
+.t-input__wrap--suffix-icon:empty,
+.t-input__wrap--suffix:empty {
+  display: none;
+}
+.t-input__control {
+  display: block;
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+  min-height: 48rpx;
+  margin: 0;
+  padding: 0;
+  color: var(--td-input-default-text-color, var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9))));
+  line-height: inherit;
+  background-color: transparent;
+  border: 0;
+  resize: none;
+  font-size: inherit;
+}
+.t-input__control--disabled {
+  color: var(--td-input-disabled-text-color, var(--td-text-color-disabled, var(--td-font-gray-4, rgba(0, 0, 0, 0.26))));
+  cursor: not-allowed;
+  opacity: 1;
+  -webkit-text-fill-color: currentColor;
+}
+.t-input__control--read-only {
+  cursor: default;
+}
+.t-input--left {
+  text-align: left;
+}
+.t-input--right {
+  text-align: right;
+}
+.t-input--center {
+  text-align: center;
+}
+.t-input__placeholder {
+  color: var(--td-input-placeholder-text-color, var(--td-text-color-placeholder, var(--td-font-gray-3, rgba(0, 0, 0, 0.4))));
+  font: var(--td-input-placeholder-text-font, var(--td-font-body-large, 32rpx / 48rpx var(--td-font-family, PingFang SC, Microsoft YaHei, Arial Regular)));
+}
+.t-input__placeholder--disabled {
+  color: var(--td-input-disabled-text-color, var(--td-text-color-disabled, var(--td-font-gray-4, rgba(0, 0, 0, 0.26))));
+}
+.t-input__tips {
+  font: var(--td-font-body-small, 24rpx / 40rpx var(--td-font-family, PingFang SC, Microsoft YaHei, Arial Regular));
+  padding-top: 8rpx;
+}
+.t-input--default + .t-input__tips {
+  color: var(--td-input-default-tips-color, var(--td-text-color-placeholder, var(--td-font-gray-3, rgba(0, 0, 0, 0.4))));
+}
+.t-input--success + .t-input__tips {
+  color: var(--td-input-success-tips-color, var(--td-success-color, var(--td-success-color-5, #2ba471)));
+}
+.t-input--warning + .t-input__tips {
+  color: var(--td-input-warning-tips-color, var(--td-warning-color, var(--td-warning-color-5, #e37318)));
+}
+.t-input--error + .t-input__tips {
+  color: var(--td-input-error-tips-color, var(--td-error-color, var(--td-error-color-6, #d54941)));
+}

package/dist/input/input.vue

@@ -0,0 +1,407 @@
+<template>
+  <view
+    :style="tools._style([customStyle])"
+    :class="tools.cls(classPrefix, [['border', !borderless], ['readonly', readonly], ['disabled', disabled]])
+      + ' ' + classPrefix + '--layout-' + layout + ' ' + tClass"
+    aria-describedby
+  >
+    <view :class="classPrefix + '__wrap--prefix'">
+      <view :class="classPrefix + '__icon--prefix'">
+        <slot name="prefix-icon" />
+        <block
+          v-if="_prefixIcon"
+          name="icon"
+        >
+          <t-icon
+            :custom-style="_prefixIcon.style || ''"
+            :t-class="tClassPrefixIcon"
+            :prefix="_prefixIcon.prefix"
+            :name="_prefixIcon.name"
+            :size="_prefixIcon.size"
+            :color="_prefixIcon.color"
+            :aria-hidden="true"
+            :aria-label="_prefixIcon.ariaLabel"
+            :aria-role="_prefixIcon.ariaRole"
+            @click="_prefixIcon.click || ''"
+          />
+        </block>
+      </view>
+      <view
+        :class="classPrefix + '__label ' + tClassLabel"
+        aria-hidden
+      >
+        <slot name="label" />
+        <block v-if="label">
+          {{ label }}
+        </block>
+      </view>
+    </view>
+    <view :class="classPrefix + '__wrap'">
+      <view
+        :class="classPrefix + '__content ' + classPrefix + '--' + status"
+        @click="onClick"
+      >
+        <input
+          :class="getInputClass(classPrefix, suffix, align, disabled) + ' ' + tClassInput"
+          :maxlength="allowInputOverMax ? -1 : maxlength"
+          :disabled="disabled || readonly"
+          :placeholder="placeholder"
+          :placeholder-style="placeholderStyle"
+          :placeholder-class="tools.cls(classPrefix + '__placeholder', [['disabled', disabled]]) + ' ' + placeholderClass"
+          :value="dataValue"
+          :password="type === 'password'"
+          :type="type === 'password' ? 'text' : type"
+          :focus="focus"
+          :confirm-type="confirmType"
+          :confirm-hold="confirmHold"
+          :cursor="cursor"
+          :cursor-color="cursorColor"
+          :cursor-spacing="cursorSpacing"
+          :adjust-position="adjustPosition"
+          :auto-focus="autoFocus"
+          :always-embed="alwaysEmbed"
+          :selection-start="selectionStart"
+          :selection-end="selectionEnd"
+          :hold-keyboard="holdKeyboard"
+          :safe-password-cert-path="safePasswordCertPath"
+          :safe-password-length="safePasswordLength"
+          :safe-password-time-stamp="safePasswordTimeStamp"
+          :safe-password-nonce="safePasswordNonce"
+          :safe-password-salt="safePasswordSalt"
+          :safe-password-custom-hash="safePasswordCustomHash"
+          aria-role="textbox"
+          :aria-label="label"
+          :aria-roledescription="label"
+          @input="onInput"
+          @change="onChange"
+          @focus="onFocus"
+          @blur="onBlur"
+          @confirm="onConfirm"
+          @keyboardheightchange="onKeyboardHeightChange"
+          @nicknamereview="onNickNameReview"
+        >
+        <view
+          v-if="_clearIcon && dataValue && dataValue.length && showClearIcon"
+          :class="classPrefix + '__wrap--clearable-icon'"
+          @click.stop="clearInput"
+        >
+          <t-icon
+            :custom-style="_clearIcon.style || ''"
+            :t-class="tClassClearable"
+            :prefix="_clearIcon.prefix"
+            :name="_clearIcon.name"
+            :size="_clearIcon.size"
+            :color="_clearIcon.color"
+            :aria-hidden="false"
+            :aria-label="_clearIcon.ariaLabel || '清除'"
+            :aria-role="_clearIcon.ariaRole || 'button'"
+            @click="_clearIcon.click || ''"
+          />
+        </view>
+        <view
+          :class="classPrefix + '__wrap--suffix ' + tClassSuffix"
+          @click="onSuffixClick"
+        >
+          <text v-if="suffix">
+            {{ suffix }}
+          </text>
+          <slot name="suffix" />
+        </view>
+        <view
+          :class="classPrefix + '__wrap--suffix-icon'"
+          @click="onSuffixIconClick"
+        >
+          <slot name="suffix-icon" />
+          <block
+            v-if="_suffixIcon"
+            name="icon"
+          >
+            <t-icon
+              :custom-style="_suffixIcon.style || ''"
+              :t-class="tClassSuffixIcon"
+              :prefix="_suffixIcon.prefix"
+              :name="_suffixIcon.name"
+              :size="_suffixIcon.size"
+              :color="_suffixIcon.color"
+              :aria-hidden="true"
+              :aria-label="_suffixIcon.ariaLabel"
+              :aria-role="_suffixIcon.ariaRole || 'button'"
+              @click="_suffixIcon.click || ''"
+            />
+          </block>
+        </view>
+      </view>
+      <view
+        v-if="tips && tips.length > 0"
+        :class="classPrefix + '__tips ' + classPrefix + '--' + align + ' ' + tClassTips"
+      >
+        {{ tips }}
+      </view>
+      <slot name="tips" />
+    </view>
+    <slot name="extra" />
+  </view>
+</template>
+<script>
+import TIcon from '../icon/icon';
+import { uniComponent } from '../common/src/index';
+import { prefix } from '../common/config';
+import props from './props';
+import { getCharacterLength, calcIcon, coalesce, nextTick } from '../common/utils';
+import { isDef } from '../common/validator';
+import { getInputClass } from './computed.js';
+import tools from '../common/utils.wxs';
+import { RELATION_MAP } from '../common/relation/parent-map.js';
+
+
+const name = `${prefix}-input`;
+
+
+export default uniComponent({
+  name,
+  options: {
+    styleIsolation: 'shared',
+  },
+  inject: {
+    [RELATION_MAP.FormKey]: {
+      default: null,
+    },
+  },
+  externalClasses: [
+    `${prefix}-class`,
+    `${prefix}-class-prefix-icon`,
+    `${prefix}-class-label`,
+    `${prefix}-class-input`,
+    `${prefix}-class-clearable`,
+    `${prefix}-class-suffix`,
+    `${prefix}-class-suffix-icon`,
+    `${prefix}-class-tips`,
+  ],
+  components: {
+    TIcon,
+  },
+  props: {
+    ...props,
+  },
+  emits: [
+    'blur',
+    'change',
+    'clear',
+    'click',
+    'enter',
+    'focus',
+    'keyboardheightchange',
+    'nicknamereview',
+    'validate',
+    'update:value',
+  ],
+  data() {
+    return {
+      prefix,
+      classPrefix: name,
+      classBasePrefix: prefix,
+      showClearIcon: true,
+      tools,
+
+      dataValue: coalesce(this.value, this.defaultValue),
+
+      // rawValue: '',
+      // innerMaxLen: -1,
+    };
+  },
+  computed: {
+  },
+  watch: {
+    prefixIcon: {
+      handler(v) {
+        this._prefixIcon = calcIcon(v);
+      },
+      immediate: true,
+    },
+
+    suffixIcon: {
+      handler(v) {
+        this._suffixIcon = calcIcon(v);
+      },
+      immediate: true,
+    },
+
+    clearable: {
+      handler(v) {
+        this._clearIcon = calcIcon(v, 'close-circle-filled');
+      },
+      immediate: true,
+    },
+
+    clearTrigger: 'updateClearIconVisible',
+    disabled: 'updateClearIconVisible',
+    readonly: 'updateClearIconVisible',
+
+    value: {
+      handler(v) {
+        this.dataValue = v;
+        nextTick().then(() => {
+          this.dataValue = v;
+
+          if (this[RELATION_MAP.FormKey]
+            && this[RELATION_MAP.FormKey].onValueChange) {
+            this[RELATION_MAP.FormKey].onValueChange(v);
+          }
+        });
+      },
+    },
+  },
+  mounted() {
+    const { value, defaultValue } = this;
+    this.updateValue(coalesce(value, defaultValue, ''));
+
+    this.updateClearIconVisible();
+  },
+  methods: {
+    getInputClass,
+    updateValue(value) {
+      // this.rawValue = value;
+      this.dataValue = value;
+
+      const { allowInputOverMax, maxcharacter, maxlength } = this;
+      if (!allowInputOverMax && maxcharacter && maxcharacter > 0 && !Number.isNaN(maxcharacter)) {
+        const { length, characters } = getCharacterLength('maxcharacter', value, maxcharacter);
+        nextTick().then(() => {
+          this.dataValue = characters;
+        });
+        this.count = length;
+      } else if (!allowInputOverMax && maxlength && maxlength > 0 && !Number.isNaN(maxlength)) {
+        const { length, characters } = getCharacterLength('maxlength', value, maxlength);
+        nextTick().then(() => {
+          this.dataValue = characters;
+        });
+        this.count = length;
+      } else {
+        nextTick().then(() => {
+          this.dataValue = value;
+        });
+        this.dataValue = value;
+        this.count = isDef(value) ? String(value).length : 0;
+      }
+
+      // this.updateInnerMaxLen();
+    },
+    // updateInnerMaxLen() {
+    // this.innerMaxLen = this.getInnerMaxLen();
+    // },
+    // getInnerMaxLen() {
+    //   const {
+    //     allowInputOverMax,
+    //     maxcharacter,
+    //     maxlength,
+    //     dataValue,
+    //     rawValue,
+    //     count,
+    //   } = this;
+    //   return getInnerMaxLen({
+    //     allowInputOverMax,
+    //     maxcharacter,
+    //     maxlength,
+    //     dataValue,
+    //     rawValue,
+    //     count,
+    //   });
+    // },
+
+    updateClearIconVisible(value = false) {
+      const { clearTrigger, disabled, readonly } = this;
+      if (disabled || readonly) {
+        this.showClearIcon = false;
+        return;
+      }
+      this.showClearIcon = value || clearTrigger === 'always';
+    },
+
+    onInput(e) {
+      const { value, cursor, keyCode } = e.detail;
+      this.updateValue(value);
+      this.emitChange({ value: this.dataValue, cursor, keyCode });
+    },
+
+    onChange(e) {
+      if (this.type !== 'nickname') return;
+      const { value } = e.detail;
+      this.updateValue(value);
+      this.emitChange({ value: this.dataValue });
+    },
+
+    emitChange(data) {
+      this.$emit('change', data);
+      this.$emit('update:value', data.value);
+    },
+
+    onFocus(e) {
+      this.updateClearIconVisible(true);
+      this.$emit('focus', e.detail);
+    },
+
+    onBlur(e) {
+      this.updateClearIconVisible();
+
+      if (this[RELATION_MAP.FormKey]
+        && this[RELATION_MAP.FormKey].onBlur) {
+        this[RELATION_MAP.FormKey].onBlur(this.dataValue);
+      }
+
+      // 失焦时处理 format
+      if (typeof this.format === 'function') {
+        const v = this.format(e.detail.value);
+        this.updateValue(v);
+        this.$emit('blur', { value: this.dataValue, cursor: this.count });
+        return;
+      }
+      this.$emit('blur', e.detail);
+    },
+
+    onConfirm(e) {
+      this.$emit('enter', e.detail);
+    },
+
+    onSuffixClick() {
+      this.$emit('click', { trigger: 'suffix' });
+    },
+
+    onSuffixIconClick() {
+      this.$emit('click', { trigger: 'suffix-icon' });
+    },
+
+    clearInput(e) {
+      this.$emit('clear', e.detail);
+      this.dataValue = '';
+    },
+
+    onKeyboardHeightChange(e) {
+      this.$emit('keyboardheightchange', e.detail);
+    },
+
+    onNickNameReview(e) {
+      this.$emit('nicknamereview', e.detail);
+    },
+
+    onClick() {
+      this.$emit('click', { trigger: 'input' });
+    },
+  },
+});
+
+</script>
+<style scoped>
+@import './input.css';
+/* #ifdef H5 */
+.t-input--disabled {
+  :deep(input) {
+    pointer-events: none;
+  }
+}
+.t-input--readonly {
+  :deep(input) {
+    pointer-events: none;
+  }
+}
+/* #endif */
+</style>