@tdesign/uniapp 0.7.2 → 0.8.0

package/dist/slider/type.ts

@@ -8,7 +8,7 @@ export interface TdSliderProps {
   /**
    * 是否禁用组件
    */
-  disabled?: boolean;
+  disabled?: boolean | null;
   /**
    * 滑块当前值文本。<br />值为 true 显示默认文案；值为 false 不显示滑块当前值文本；<br />值为 `${value}%` 则表示组件会根据占位符渲染文案；<br />值类型为函数时，参数 `value` 标识滑块值，参数 `position=start` 表示范围滑块的起始值，参数 `position=end` 表示范围滑块的终点值
    * @default false

package/dist/step-item/step-item.vue

@@ -1,23 +1,23 @@
 <template>
   <view
-    :style="tools._style([customStyle])"
-    :class="tools.cls(classPrefix, [layout, ['readonly', readonly]]) + ' ' + tClass"
+    :style="'' + tools._style([customStyle])"
+    :class="'' + tools.cls(classPrefix, [layout, ['readonly', readonly]]) + ' ' + tClass"
     :aria-role="ariaRole || readonly ? 'option' : 'button'"
     :aria-label="ariaLabel || getAriaLabel(index, title, content)"
     :aria-current="curStatus == 'process' ? 'step' : ''"
     @click="onTap"
   >
     <view
-      :class="tools.cls(classPrefix + '__anchor', [layout])"
+      :class="'' + tools.cls(classPrefix + '__anchor', [layout])"
       :aria-hidden="true"
     >
       <view
         v-if="isDot"
-        :class="tools.cls(classPrefix + '__dot', [curStatus])"
+        :class="'' + tools.cls(classPrefix + '__dot', [curStatus])"
       />
       <view
         v-else-if="icon"
-        :class="tools.cls(classPrefix + '__icon', [curStatus])"
+        :class="'' + tools.cls(classPrefix + '__icon', [curStatus])"
       >
         <slot
           v-if="icon == 'slot'"
@@ -31,7 +31,7 @@
       </view>
       <view
         v-else
-        :class="tools.cls(classPrefix + '__circle', [curStatus])"
+        :class="'' + tools.cls(classPrefix + '__circle', [curStatus])"
       >
         <t-icon
           v-if="curStatus == 'finish'"
@@ -47,11 +47,11 @@
       </view>
     </view>
     <view
-      :class="tools.cls(classPrefix + '__content', [layout, ['last', isLastChild]]) + ' ' + tClassContent"
+      :class="'' + tools.cls(classPrefix + '__content', [layout, ['last', isLastChild]]) + ' ' + tClassContent"
       :aria-hidden="true"
     >
       <slot />
-      <view :class="tools.cls(classPrefix + '__title', [curStatus, layout]) + ' ' + tClassContent">
+      <view :class="'' + tools.cls(classPrefix + '__title', [curStatus, layout]) + ' ' + tClassContent">
         <block v-if="title">
           {{ title }}
         </block>
@@ -61,19 +61,19 @@
           name="title-right"
         />
       </view>
-      <view :class="tools.cls(classPrefix + '__description', [layout]) + ' ' + tClassDescription">
+      <view :class="'' + tools.cls(classPrefix + '__description', [layout]) + ' ' + tClassDescription">
         <block v-if="content">
           {{ content }}
         </block>
         <slot name="content" />
       </view>
-      <view :class="tools.cls(classPrefix + '__extra', [layout]) + ' ' + tClassExtra">
+      <view :class="'' + tools.cls(classPrefix + '__extra', [layout]) + ' ' + tClassExtra">
         <slot name="extra" />
       </view>
     </view>
     <view
       v-if="!isLastChild"
-      :class="tools.cls(classPrefix + '__line', [curStatus, layout, theme, sequence])"
+      :class="'' + tools.cls(classPrefix + '__line', [curStatus, layout, theme, sequence])"
       :aria-hidden="true"
     />
   </view>
@@ -91,83 +91,85 @@ import { ChildrenMixin, RELATION_MAP } from '../common/relation';
 const name = `${prefix}-steps-item`;
 
 
-export default uniComponent({
-  name,
-  options: {
-    styleIsolation: 'shared',
-    virtualHost: true,
-  },
-  externalClasses: [
-    `${prefix}-class`,
-    `${prefix}-class-content`,
-    `${prefix}-class-title`,
-    `${prefix}-class-description`,
-    `${prefix}-class-extra`,
-  ],
-  mixins: [ChildrenMixin(RELATION_MAP.StepItem, {
-    indexKey: 'tIndex',
-  })],
-  props: {
-    ...props,
-  },
+export default {
   components: {
     TIcon,
   },
-  data() {
-    return {
-      classPrefix: name,
-      prefix,
-      index: 0,
-      isDot: false,
-      curStatus: '',
-      layout: 'vertical',
-      isLastChild: false,
-      sequence: 'positive',
-      tools,
+  ...uniComponent({
+    name,
+    options: {
+      styleIsolation: 'shared',
+      virtualHost: true,
+    },
+    externalClasses: [
+      `${prefix}-class`,
+      `${prefix}-class-content`,
+      `${prefix}-class-title`,
+      `${prefix}-class-description`,
+      `${prefix}-class-extra`,
+    ],
+    mixins: [ChildrenMixin(RELATION_MAP.StepItem, {
+      indexKey: 'tIndex',
+    })],
+    props: {
+      ...props,
+    },
+    data() {
+      return {
+        classPrefix: name,
+        prefix,
+        index: 0,
+        isDot: false,
+        curStatus: '',
+        layout: 'vertical',
+        isLastChild: false,
+        sequence: 'positive',
+        tools,
 
-      readonly: false,
-      theme: '',
-    };
-  },
-  watch: {
-    status(value) {
-      const { curStatus } = this;
+        readonly: false,
+        theme: '',
+      };
+    },
+    watch: {
+      status(value) {
+        const { curStatus } = this;
 
-      if (curStatus === '' || value === curStatus) return;
+        if (curStatus === '' || value === curStatus) return;
 
-      this.curStatus = value;
+        this.curStatus = value;
+      },
     },
-  },
-  mounted() {
+    mounted() {
 
-  },
-  methods: {
-    getAriaLabel,
-    updateStatus({ current, currentStatus, index, theme, layout, items, sequence }) {
-      let curStatus = this.status;
+    },
+    methods: {
+      getAriaLabel,
+      updateStatus({ current, currentStatus, index, theme, layout, items, sequence }) {
+        let curStatus = this.status;
 
-      if (curStatus === 'default') {
-        if (index < Number(current)) {
-          curStatus = 'finish';
-        } else if (index === Number(current)) {
-          curStatus = currentStatus;
+        if (curStatus === 'default') {
+          if (index < Number(current)) {
+            curStatus = 'finish';
+          } else if (index === Number(current)) {
+            curStatus = currentStatus;
+          }
         }
-      }
 
-      this.curStatus = curStatus;
-      this.index = index;
-      this.layout = layout;
-      this.theme = theme;
-      this.sequence = sequence;
-      this.isDot = theme === 'dot';
-      this.isLastChild = index === (sequence === 'positive' ? items.length - 1 : 0);
-    },
+        this.curStatus = curStatus;
+        this.index = index;
+        this.layout = layout;
+        this.theme = theme;
+        this.sequence = sequence;
+        this.isDot = theme === 'dot';
+        this.isLastChild = index === (sequence === 'positive' ? items.length - 1 : 0);
+      },
 
-    onTap() {
-      this[RELATION_MAP.StepItem].handleClick(this.index);
+      onTap() {
+        this[RELATION_MAP.StepItem].handleClick(this.index);
+      },
     },
-  },
-});
+  }),
+};
 
 </script>
 <style scoped src="./step-item.css"></style>

package/dist/stepper/props.ts

@@ -10,8 +10,8 @@ export default {
   disableInput: Boolean,
   /** 禁用全部操作 */
   disabled: {
-    type: Boolean,
-    default: undefined,
+    type: [Boolean, null],
+    default: null as TdStepperProps['disabled'],
   },
   /** 输入框宽度，默认单位 `px` */
   inputWidth: {

package/dist/stepper/stepper.vue

@@ -1,6 +1,6 @@
 <template>
   <view
-    :style="tools._style([customStyle])"
+    :style="'' + tools._style([customStyle])"
     :class="classPrefix + ' ' + classPrefix + '--' + size + ' ' + tClass"
   >
     <view
@@ -51,7 +51,7 @@
 import TIcon from '../icon/icon';
 import { uniComponent } from '../common/src/index';
 import { prefix } from '../common/config';
-import { coalesce } from '../common/utils';
+import { coalesce, nextTick } from '../common/utils';
 import props from './props';
 import tools from '../common/utils.wxs';
 
@@ -59,163 +59,182 @@ import tools from '../common/utils.wxs';
 const name = `${prefix}-stepper`;
 
 
-export default uniComponent({
-  name,
-  options: {
-    styleIsolation: 'shared',
-  },
-  controlledProps: [
-    {
-      key: 'value',
-      event: 'change',
-    },
-  ],
-  externalClasses: [
-    `${prefix}-class`,
-    `${prefix}-class-input`,
-    `${prefix}-class-minus`,
-    `${prefix}-class-plus`,
-  ],
+export default {
   components: {
     TIcon,
   },
-  props: {
-    ...props,
-  },
-  data() {
-    return {
-      currentValue: 0,
-      classPrefix: name,
-      prefix,
-      tools,
-      disablePlus: false,
-      disableMinus: false,
-    };
-  },
-  watch: {
-    value(v) {
-      this.preValue = Number(v);
-      this.updateCurrentValue(this.format(this.preValue));
-    },
-  },
-  mounted() {
-    const { value, defaultValue, min } = this;
-    const cur = coalesce(value, defaultValue);
-
-    this.updateCurrentValue(cur ? Number(cur) : min);
-  },
-  methods: {
-    isDisabled(type) {
-      const { min, max, disabled } = this;
-      const { currentValue } = this;
-      if (disabled) {
-        return true;
-      }
-      if (type === 'minus' && currentValue <= min) {
-        return true;
-      }
-      if (type === 'plus' && currentValue >= max) {
-        return true;
-      }
-      return false;
-    },
-
-    getLen(num) {
-      const numStr = num.toString();
-      return numStr.indexOf('.') === -1 ? 0 : numStr.split('.')[1].length;
+  ...uniComponent({
+    name,
+    options: {
+      styleIsolation: 'shared',
     },
-
-    add(a, b) {
-      const maxLen = Math.max(this.getLen(a), this.getLen(b));
-      const base = 10 ** maxLen;
-      return Math.round(a * base + b * base) / base;
+    controlledProps: [
+      {
+        key: 'value',
+        event: 'change',
+      },
+    ],
+    externalClasses: [
+      `${prefix}-class`,
+      `${prefix}-class-input`,
+      `${prefix}-class-minus`,
+      `${prefix}-class-plus`,
+    ],
+    props: {
+      ...props,
     },
-
-    format(value) {
-      const { min, max, step } = this;
-      const len = Math.max(this.getLen(step), this.getLen(value));
-      // 超过边界取边界值
-      return Math.max(Math.min(max, value, Number.MAX_SAFE_INTEGER), min, Number.MIN_SAFE_INTEGER).toFixed(len);
+    data() {
+      return {
+        currentValue: 0,
+        classPrefix: name,
+        prefix,
+        tools,
+        disablePlus: false,
+        disableMinus: false,
+      };
     },
-
-    setValue(value) {
-      const newValue = Number(this.format(value));
-
-      this.updateCurrentValue(newValue);
-
-      if (this.preValue === newValue) return;
-
-      this.preValue = newValue;
-      this._trigger('change', { value: newValue });
+    watch: {
+      value(v) {
+        this.preValue = Number(v);
+        this.updateCurrentValue(this.format(this.preValue));
+      },
     },
+    mounted() {
+      const { value, defaultValue, min } = this;
+      const cur = coalesce(value, defaultValue);
 
-    minusValue() {
-      if (this.isDisabled('minus')) {
-        this.$emit('overlimit', { type: 'minus' });
-        return false;
-      }
-      const { currentValue, step } = this;
-      this.setValue(this.add(currentValue, -step));
+      this.updateCurrentValue(cur ? Number(cur) : min);
     },
-
-    plusValue() {
-      if (this.isDisabled('plus')) {
-        this.$emit('overlimit', { type: 'plus' });
+    methods: {
+      isDisabled(type) {
+        const { min, max, disabled } = this;
+        const { currentValue } = this;
+        if (disabled) {
+          return true;
+        }
+        if (type === 'minus' && currentValue <= min) {
+          return true;
+        }
+        if (type === 'plus' && currentValue >= max) {
+          return true;
+        }
         return false;
-      }
-      const { currentValue, step } = this;
-      this.setValue(this.add(currentValue, step));
+      },
+
+      getLen(num) {
+        const numStr = num.toString();
+        return numStr.indexOf('.') === -1 ? 0 : numStr.split('.')[1].length;
+      },
+
+      add(a, b) {
+        const maxLen = Math.max(this.getLen(a), this.getLen(b));
+        const base = 10 ** maxLen;
+        const result = Math.round(a * base + b * base) / base;
+        // 保留运算涉及的最大小数位数，避免精度信息丢失
+        return maxLen > 0 ? result.toFixed(maxLen) : result;
+      },
+
+      format(value) {
+        const { min, max, step } = this;
+        // 使用字符串形式计算小数位数，避免数字隐式转换导致末尾0丢失
+        const len = Math.max(this.getLen(step), this.getLen(String(value)));
+        // 超过边界取边界值
+        return Math.max(Math.min(max, value, Number.MAX_SAFE_INTEGER), min, Number.MIN_SAFE_INTEGER).toFixed(len);
+      },
+
+      setValue(value) {
+        const formattedStr = this.format(value);
+        const newValue = Number(formattedStr);
+
+        nextTick().then(() => {
+        // 使用 format 返回的字符串更新显示值，避免 Number() 转换丢失末尾0
+          this.updateCurrentValue(formattedStr);
+        });
+
+        if (this.preValue === newValue) return;
+
+        this.preValue = newValue;
+        this._trigger('change', { value: newValue });
+      },
+
+      minusValue() {
+        if (this.isDisabled('minus')) {
+          this.$emit('overlimit', { type: 'minus' });
+          return false;
+        }
+        const { currentValue, step } = this;
+        this.setValue(this.add(currentValue, -step));
+      },
+
+      plusValue() {
+        if (this.isDisabled('plus')) {
+          this.$emit('overlimit', { type: 'plus' });
+          return false;
+        }
+        const { currentValue, step } = this;
+        this.setValue(this.add(currentValue, step));
+      },
+
+      filterIllegalChar(value) {
+        const v = String(value).replace(/[^0-9.]/g, '');
+        const indexOfDot = v.indexOf('.');
+        if (this.integer && indexOfDot !== -1) {
+          return v.split('.')[0];
+        }
+
+        if (!this.integer && indexOfDot !== -1 && indexOfDot !== v.lastIndexOf('.')) {
+          return v.split('.', 2).join('.');
+        }
+
+        return v;
+      },
+
+      updateCurrentValue(value) {
+        this.currentValue = value;
+      },
+
+      handleFocus(e) {
+        const { value } = e.detail;
+
+        this.$emit('focus', { value });
+      },
+
+      handleInput(e) {
+        const { value } = e.detail;
+        // 允许输入空值
+        if (value === '') {
+          return;
+        }
+
+        const formatted = this.filterIllegalChar(value);
+        const newValue = this.format(formatted);
+
+        const displayValue = this.integer ? newValue : formatted;
+        // 当过滤后的值与当前值相同时，需要先清空再回填，强制触发视图更新
+        if (String(this.currentValue) === String(displayValue)) {
+          this.updateCurrentValue('');
+          nextTick().then(() => {
+            this.updateCurrentValue(displayValue);
+          });
+        } else {
+          this.updateCurrentValue(displayValue);
+        }
+
+        if (this.integer || /\.\d*[1-9]/.test(formatted)) {
+          this.setValue(formatted);
+        }
+      },
+
+      handleBlur(e) {
+        const { value: rawValue } = e.detail;
+        const formatted = this.filterIllegalChar(rawValue);
+        const value = this.format(formatted);
+
+        this.setValue(value);
+        this.$emit('blur', { value });
+      },
     },
-
-    filterIllegalChar(value) {
-      const v = String(value).replace(/[^0-9.]/g, '');
-      const indexOfDot = v.indexOf('.');
-      if (this.integer && indexOfDot !== -1) {
-        return v.split('.')[0];
-      }
-
-      if (!this.integer && indexOfDot !== -1 && indexOfDot !== v.lastIndexOf('.')) {
-        return v.split('.', 2).join('.');
-      }
-
-      return v;
-    },
-
-    updateCurrentValue(value) {
-      this.currentValue = value;
-    },
-
-    handleFocus(e) {
-      const { value } = e.detail;
-
-      this.$emit('focus', { value });
-    },
-
-    handleInput(e) {
-      const { value } = e.detail;
-      // 允许输入空值
-      if (value === '') {
-        return;
-      }
-
-      const formatted = this.filterIllegalChar(value);
-      const newValue = this.format(formatted);
-
-      this.updateCurrentValue(this.integer ? newValue : formatted);
-
-      if (this.integer || /\.\d+/.test(formatted)) {
-        this.setValue(formatted);
-      }
-    },
-
-    handleBlur(e) {
-      const { value: rawValue } = e.detail;
-      const value = this.format(rawValue);
-
-      this.setValue(value);
-      this.$emit('blur', { value });
-    },
-  },
-});
+  }),
+};
 </script>
 <style scoped src="./stepper.css"></style>

package/dist/stepper/type.ts

@@ -15,7 +15,7 @@ export interface TdStepperProps {
   /**
    * 禁用全部操作
    */
-  disabled?: boolean;
+  disabled?: boolean | null;
   /**
    * 输入框宽度，默认单位 `px`
    */

package/dist/steps/props.ts

@@ -34,8 +34,8 @@ export default {
   },
   /** 只读状态 */
   readonly: {
-    type: Boolean,
-    default: undefined,
+    type: [Boolean, null],
+    default: null as TdStepsProps['readonly'],
   },
   /** 步骤条顺序 */
   sequence: {