@tdesign/uniapp 0.7.3 → 0.8.0

package/dist/tag/tag.vue

@@ -1,7 +1,7 @@
 <template>
   <view
     :class="[className + ' ', tClass]"
-    :style="tools._style([tagStyle, customStyle])"
+    :style="'' + tools._style([tagStyle, customStyle])"
     @click="handleClick"
   >
     <view
@@ -65,94 +65,96 @@ import tools from '../common/utils.wxs';
 const name = `${prefix}-tag`;
 
 
-export default uniComponent({
-  name,
-  options: {
-    styleIsolation: 'shared',
-  },
-  externalClasses: [
-    `${prefix}-class`,
-  ],
+export default {
   components: {
     TIcon,
   },
-  props: {
-    ...props,
-  },
-  data() {
-    return {
-      prefix,
-      classPrefix: name,
-      className: '',
-      tagStyle: '',
-      tools,
+  ...uniComponent({
+    name,
+    options: {
+      styleIsolation: 'shared',
+    },
+    externalClasses: [
+      `${prefix}-class`,
+    ],
+    props: {
+      ...props,
+    },
+    data() {
+      return {
+        prefix,
+        classPrefix: name,
+        className: '',
+        tagStyle: '',
+        tools,
 
-      innerIcon: null,
-      innerClosable: null,
-    };
-  },
-  watch: {
-    size: 'setClass',
-    shape: 'setClass',
-    theme: 'setClass',
-    variant: 'setClass',
-    disabled: 'setClass',
-    maxWidth: 'setTagStyle',
-    icon: {
-      handler(s) {
-        this.innerIcon = calcIcon(s);
-      },
-      immediate: true,
+        innerIcon: null,
+        innerClosable: null,
+      };
     },
-    closable: {
-      handler(s) {
-        this.setClass();
-        this.innerClosable = calcIcon(s, 'close');
+    watch: {
+      size: 'setClass',
+      shape: 'setClass',
+      theme: 'setClass',
+      variant: 'setClass',
+      disabled: 'setClass',
+      maxWidth: 'setTagStyle',
+      icon: {
+        handler(s) {
+          this.innerIcon = calcIcon(s);
+        },
+        immediate: true,
+      },
+      closable: {
+        handler(s) {
+          this.setClass();
+          this.innerClosable = calcIcon(s, 'close');
+        },
+        immediate: true,
       },
-      immediate: true,
     },
-  },
-  mounted() {
-    this.setClass();
-    this.setTagStyle();
-  },
-  methods: {
-    setClass() {
-      const { prefix, classPrefix } = this;
-      const { size, shape, theme, variant, closable, disabled } = this;
-      const tagClass = [
-        classPrefix,
-        `${classPrefix}--${theme || 'default'}`,
-        `${classPrefix}--${variant}`,
-        closable ? `${classPrefix}--closable ${prefix}-is-closable` : '',
-        disabled ? `${classPrefix}--disabled ${prefix}-is-disabled` : '',
-        `${classPrefix}--${size}`,
-        `${classPrefix}--${shape}`,
-      ];
-      const className = classNames(tagClass);
-      this.className = className;
+    mounted() {
+      this.setClass();
+      this.setTagStyle();
     },
+    methods: {
+      setClass() {
+        const { prefix, classPrefix } = this;
+        const { size, shape, theme, variant, closable, disabled } = this;
+        const tagClass = [
+          classPrefix,
+          `${classPrefix}--${theme || 'default'}`,
+          `${classPrefix}--${variant}`,
+          closable ? `${classPrefix}--closable ${prefix}-is-closable` : '',
+          disabled ? `${classPrefix}--disabled ${prefix}-is-disabled` : '',
+          `${classPrefix}--${size}`,
+          `${classPrefix}--${shape}`,
+        ];
+        const className = classNames(tagClass);
+        this.className = className;
+      },
 
-    setTagStyle() {
-      const { maxWidth } = this;
-      if (!maxWidth) {
-        return '';
-      }
-      const width = isNumeric(maxWidth) ? `${maxWidth}px` : maxWidth;
-      this.tagStyle = `max-width:${width};`;
-    },
+      setTagStyle() {
+        const { maxWidth } = this;
+        if (!maxWidth) {
+          return '';
+        }
+        const width = isNumeric(maxWidth) ? `${maxWidth}px` : maxWidth;
+        this.tagStyle = `max-width:${width};`;
+      },
 
-    handleClick(e) {
-      if (this.disabled) return;
-      this.$emit('click', { e });
-    },
+      handleClick(e) {
+        if (this.disabled) return;
+        this.$emit('click', { e });
+      },
 
-    handleClose(e) {
-      if (this.disabled) return;
-      this.$emit('close', { e });
+      handleClose(e) {
+        if (this.disabled) return;
+        this.$emit('close', { e });
+      },
     },
-  },
-});
+  }),
+};
 
 </script>
 <style scoped src="./tag.css"></style>

package/dist/textarea/props.ts

@@ -52,8 +52,8 @@ export default {
   disableDefaultPadding: Boolean,
   /** 是否禁用文本框 */
   disabled: {
-    type: Boolean,
-    default: undefined,
+    type: [Boolean, null],
+    default: null as TdTextareaProps['disabled'],
   },
   /** 如果 textarea 是在一个 `position:fixed` 的区域，需要显式指定属性 fixed 为 true */
   fixed: Boolean,
@@ -78,8 +78,8 @@ export default {
   },
   /** 占位符 */
   placeholder: {
-    type: String,
-    default: undefined,
+    type: [String, null],
+    default: null as TdTextareaProps['placeholder'],
   },
   /** 指定 placeholder 的样式类，目前仅支持color,font-size和font-weight */
   placeholderClass: {
@@ -93,8 +93,8 @@ export default {
   },
   /** 只读状态 */
   readonly: {
-    type: Boolean,
-    default: undefined,
+    type: [Boolean, null],
+    default: null as TdTextareaProps['readonly'],
   },
   /** 光标结束位置，自动聚集时有效，需与 selection-start 搭配使用 */
   selectionEnd: {

package/dist/textarea/textarea.vue

@@ -1,6 +1,6 @@
 <template>
   <view
-    :style="tools._style([customStyle])"
+    :style="'' + tools._style([customStyle])"
     :class="classPrefix + ' ' + (bordered ? classPrefix + '--border' : '') + ' ' + tClass"
   >
     <view :class="classPrefix + '__label ' + tClassLabel">
@@ -12,7 +12,7 @@
     <view :class="classPrefix + '__wrapper'">
       <textarea
         :class="classPrefix + '__wrapper-inner ' + (disabled ? prefix + '-is-disabled' : '') + ' ' + tClassTextarea"
-        :style="textareaStyle(autosize)"
+        :style="''+textareaStyle(autosize)"
         :maxlength="allowInputOverMax ? -1 : maxlength"
         :disabled="disabled || readonly"
         :placeholder="placeholder"
@@ -62,141 +62,141 @@ 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,
+export default {
+  ...uniComponent({
+    name,
+    options: {
+      styleIsolation: 'shared',
     },
-  },
-  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;
+    externalClasses: [
+      `${prefix}-class`,
+      `${prefix}-class-textarea`,
+      `${prefix}-class-label`,
+      `${prefix}-class-indicator`,
+    ],
+    inject: {
+      [RELATION_MAP.FormKey]: {
+        default: null,
+      },
     },
-
-    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();
+    props: {
+      ...props,
     },
 
-    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,
-        };
-      }
+    emits: [
+      'update:value',
+    ],
+    data() {
       return {
-        value,
-        count: value ? String(value).length : 0,
+        prefix,
+        classPrefix: name,
+        count: 0,
+        tools,
+
+        dataValue: coalesce(this.value, this.defaultValue, ''),
       };
     },
+    watch: {
+      value(val) {
+        this.updateValue(val);
 
-    onInput(event) {
-      const { value, cursor } = event.detail;
-      this.updateValue(value);
-      this.emitChange({ value: this.dataValue, cursor });
+        if (this[RELATION_MAP.FormKey]
+        && this[RELATION_MAP.FormKey].onValueChange) {
+          this[RELATION_MAP.FormKey].onValueChange(val);
+        }
+      },
     },
-
-    emitChange(data) {
-      this.$emit('change', data);
-      this.$emit('update:value', data.value);
+    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;
+      },
 
-    onFocus(event) {
-      this.$emit('focus', {
-        ...event.detail,
-      });
-    },
-    onBlur(event) {
-      this.$emit('blur', {
-        ...event.detail,
-      });
+      updateValue(val) {
+        const { maxcharacter, maxlength } = this;
+        const { value, count } = this.calculateValue(val, maxcharacter, maxlength);
+
+        this.dataValue = val;
 
-      if (this[RELATION_MAP.FormKey]
+
+        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);
-    },
+          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();
@@ -219,7 +219,8 @@ export default uniComponent({
     //     count,
     //   });
     // },
-  },
-});
+    },
+  }),
+};
 </script>
 <style scoped src="./textarea.css"></style>

package/dist/textarea/type.ts

@@ -63,7 +63,7 @@ export interface TdTextareaProps {
   /**
    * 是否禁用文本框
    */
-  disabled?: boolean;
+  disabled?: boolean | null;
   /**
    * 如果 textarea 是在一个 `position:fixed` 的区域，需要显式指定属性 fixed 为 true
    * @default false
@@ -100,7 +100,7 @@ export interface TdTextareaProps {
   /**
    * 占位符
    */
-  placeholder?: string;
+  placeholder?: string | null;
   /**
    * 指定 placeholder 的样式类，目前仅支持color,font-size和font-weight
    * @default textarea-placeholder
@@ -114,7 +114,7 @@ export interface TdTextareaProps {
   /**
    * 只读状态
    */
-  readonly?: boolean;
+  readonly?: boolean | null;
   /**
    * 光标结束位置，自动聚集时有效，需与 selection-start 搭配使用
    * @default -1