@tdesign/uniapp 0.7.2 → 0.8.0

package/dist/rate/rate.vue

@@ -1,7 +1,7 @@
 <template>
   <view
     :class="classPrefix"
-    :style="tools._style([customStyle])"
+    :style="'' + tools._style([customStyle])"
   >
     <view
       :class="classPrefix + '__wrapper ' + tClass"
@@ -10,62 +10,60 @@
       :aria-valuemax="count"
       :aria-valuemin="0"
       :aria-valuenow="dataValue"
-      :aria-valuetext="utils.getText(texts, dataValue, defaultTexts)"
+      :aria-valuetext="utils.getText(texts, dataValue, globalConfig)"
       @touchstart="parseEventDynamicCode($event, !disabled ? 'onTouchStart' : '')"
       @touchmove="parseEventDynamicCode($event, !disabled ? 'onTouchMove' : '')"
       @click="onTap"
-      @touchend="parseEventDynamicCode($event, !disabled ? 'onTouchEnd' : '')"
-      @touchcancel="parseEventDynamicCode($event, !disabled ? 'onTouchEnd' : '')"
+      @touchend="(e) => parseEventDynamicCode(e, !disabled ? 'onTouchEnd' : '')"
+      @touchcancel="(e) => parseEventDynamicCode(e, !disabled ? 'onTouchEnd' : '')"
     >
       <t-icon
         v-for="(item, index) in count"
         :key="index"
         :t-class="classPrefix + '__icon ' + utils.getIconClass(classPrefix + '__icon', defaultValue, dataValue, index, allowHalf, disabled, scaleIndex) + ' ' + tClassIcon"
         :custom-style="'margin-right: ' + (count - index > 1 ? tools.addUnit(gap) : 0) + '; ' + utils.getColor(color)"
-        :name="utils.getIconName(defaultValue, dataValue, index, icon)"
+        :name="'' + utils.getIconName(defaultValue, dataValue, index, icon)"
         :size="size"
         :prefix="iconPrefix"
       />
     </view>
     <text
       v-if="showText"
-      :class="tools.cls(classPrefix + '__text', [['active', dataValue > 0]]) + ' ' + tClassText"
+      :class="'' + tools.cls(classPrefix + '__text', [['active', dataValue > 0]]) + ' ' + tClassText"
       :aria-hidden="true"
     >
-      {{ utils.getText(texts, dataValue, defaultTexts) }}
+      {{ utils.getText(texts, dataValue, globalConfig) }}
     </text>
     <text
       v-if="isVisibleToScreenReader"
-      :class="
-        tools.cls(classPrefix + '__text', [
-          ['active', dataValue > 0],
-          ['sr-only', isVisibleToScreenReader]
-        ]) +
-          ' ' +
-          tClassText
-      "
+      :class="'' + tools.cls(classPrefix + '__text', [
+        ['active', dataValue > 0],
+        ['sr-only', isVisibleToScreenReader]
+      ]) +
+        ' ' +
+        tClassText"
       aria-role="alert"
       aria-live="assertive"
     >
-      {{ dataValue + '星' }} {{ utils.getText(texts, dataValue, defaultTexts) }}
+      {{ dataValue + '星' }} {{ utils.getText(texts, dataValue, globalConfig) }}
     </text>
     <!-- TODO -->
     <view
       v-if="tipsVisible && placement"
-      :class="tools.cls(classPrefix + '__tips', [placement])"
+      :class="'' + tools.cls(classPrefix + '__tips', [placement])"
       :style="'left: ' + tipsLeft + 'px'"
       :aria-hidden="true"
     >
       <block v-if="actionType == 'tap'">
         <view
           v-if="allowHalf"
-          :class="tools.cls(classPrefix + '__tips-item', [['active', utils.ceil(dataValue) - 0.5 == dataValue]])"
-          :data-value="utils.ceil(dataValue) - 0.5"
+          :class="[classPrefix + '__tips-item', utils.ceil(dataValue) - 0.5 == dataValue ? classPrefix + '__tips-item' + '--active' : '']"
+          :data-value="'' + utils.ceil(dataValue) - 0.5"
           @click="onSelect"
         >
           <t-icon
             :t-class="classPrefix + '__icon ' + classPrefix + '__icon--selected-half'"
-            :name="utils.getIconName(defaultValue, dataValue, 0, icon)"
+            :name="'' + utils.getIconName(defaultValue, dataValue, 0, icon)"
             :size="size"
             :custom-style="utils.getColor(color)"
           />
@@ -74,7 +72,7 @@
           </view>
         </view>
         <view
-          :class="tools.cls(classPrefix + '__tips-item', [['active', utils.ceil(dataValue) == dataValue]])"
+          :class="[classPrefix + '__tips-item', utils.ceil(dataValue) == dataValue ? classPrefix + '__tips-item' + '--active' : '']"
           :data-value="utils.ceil(dataValue)"
           @click="onSelect"
         >
@@ -91,17 +89,15 @@
       </block>
       <view
         v-else
-        :class="tools.cls(classPrefix + '__tips-item', [['active', utils.ceil(dataValue) == dataValue && actionType == 'tap']])"
+        :class="[classPrefix + '__tips-item', utils.ceil(dataValue) == dataValue && actionType == 'tap' ? classPrefix + '__tips-item' + '--active' : '']"
         :data-value="utils.ceil(dataValue)"
         @click="onSelect"
       >
         <t-icon
-          :t-class="
-            tools.cls(classPrefix + '__icon', [
-              ['selected', utils.ceil(dataValue) == dataValue],
-              ['selected-half', utils.ceil(dataValue) != dataValue]
-            ])
-          "
+          :t-class="tools.cls(classPrefix + '__icon', [
+            ['selected', utils.ceil(dataValue) == dataValue],
+            ['selected-half', utils.ceil(dataValue) != dataValue]
+          ])"
           :name="utils.getIconName(defaultValue, 0, 0, icon)"
           :size="size"
           :custom-style="utils.getColor(color)"
@@ -124,151 +120,156 @@ import utils from './computed.js';
 import { parseEventDynamicCode } from '../common/event/dynamic';
 
 
-const name = `${prefix}-rate`;
+import usingConfig from '../mixins/using-config';
+const componentName = 'rate';
+const name = `${prefix}-${componentName}`;
 
 
-export default uniComponent({
-  name,
-  options: {
-    styleIsolation: 'shared',
-  },
-  controlledProps: [
-    {
-      key: 'value',
-      event: 'change',
-    },
-  ],
-  externalClasses: [
-    `${prefix}-class`,
-    `${prefix}-class-icon`,
-    `${prefix}-class-text`,
-  ],
+export default {
   components: {
     TIcon,
   },
-  props: {
-    ...props,
-  },
-  data() {
-    return {
-      prefix,
-      classPrefix: name,
-      defaultTexts: ['极差', '失望', '一般', '满意', '惊喜'],
-      tipsVisible: false,
-      tipsLeft: 0,
-      actionType: '',
-      scaleIndex: -1,
-      isVisibleToScreenReader: false,
-
-      tools,
-      utils,
-      dataValue: coalesce(this.value, this.defaultValue),
-    };
-  },
-  watch: {
-    value: {
-      handler(v) {
-        this.dataValue = v;
+  ...uniComponent({
+    name,
+    mixins: [usingConfig({ componentName })],
+    options: {
+      styleIsolation: 'shared',
+    },
+    controlledProps: [
+      {
+        key: 'value',
+        event: 'change',
       },
-      immediate: true,
+    ],
+    externalClasses: [
+      `${prefix}-class`,
+      `${prefix}-class-icon`,
+      `${prefix}-class-text`,
+    ],
+    props: {
+      ...props,
     },
-  },
-  mounted() {
+    data() {
+      return {
+        prefix,
+        classPrefix: name,
+        defaultTexts: ['极差', '失望', '一般', '满意', '惊喜'],
+        tipsVisible: false,
+        tipsLeft: 0,
+        actionType: '',
+        scaleIndex: -1,
+        isVisibleToScreenReader: false,
 
-  },
-  methods: {
-    parseEventDynamicCode,
-    onTouch(e, eventType) {
-      const { count, allowHalf, gap, dataValue: currentValue, size } = this;
-      let touch = e.changedTouches?.[0];
-      // #ifdef MP-ALIPAY
-      if (eventType === 'tap') {
-        touch = e.target;
-      }
-      // #endif
-      const margin = unitConvert(gap);
-      getRect(this, `.${name}__wrapper`).then((rect) => {
-        const { width, left } = rect;
-        const starWidth = (width - (count - 1) * margin) / count;
-        const offsetX = touch.pageX - left;
-        const num = (offsetX + margin) / (starWidth + margin);
-        const remainder = num % 1;
-        const integral = num - remainder;
-        let value = remainder <= 0.5 && allowHalf ? integral + 0.5 : integral + 1;
+        tools,
+        utils,
+        dataValue: coalesce(this.value, this.defaultValue),
+      };
+    },
+    watch: {
+      value: {
+        handler(v) {
+          this.dataValue = v;
+        },
+        immediate: true,
+      },
+    },
+    mounted() {
 
-        if (value > count) {
-          value = count;
-        } else if (value < 0) {
-          value = 0;
+    },
+    methods: {
+      parseEventDynamicCode,
+      onTouch(e, eventType) {
+        const { count, allowHalf, gap, dataValue: currentValue, size } = this;
+        let touch = e.changedTouches?.[0];
+        // #ifdef MP-ALIPAY
+        if (eventType === 'tap') {
+          touch = e.target;
         }
+        // #endif
+        const margin = unitConvert(gap);
+        getRect(this, `.${name}__wrapper`).then((rect) => {
+          const { width, left } = rect;
+          const starWidth = (width - (count - 1) * margin) / count;
+          const offsetX = touch.pageX - left;
+          const num = (offsetX + margin) / (starWidth + margin);
+          const remainder = num % 1;
+          const integral = num - remainder;
+          let value = remainder <= 0.5 && allowHalf ? integral + 0.5 : integral + 1;
 
-        const tipsLeft = Math.ceil(value - 1) * (unitConvert(gap) + unitConvert(size)) + unitConvert(size) * 0.5;
-        this.tipsVisible = true;
-        this.actionType = eventType;
-        this.scaleIndex = Math.ceil(value);
-        this.tipsLeft = Math.max(tipsLeft, 0);
+          if (value > count) {
+            value = count;
+          } else if (value < 0) {
+            value = 0;
+          }
 
-        if (value !== currentValue) {
-          this.innerTrigger(value);
-        }
+          const tipsLeft = Math.ceil(value - 1) * (unitConvert(gap) + unitConvert(size)) + unitConvert(size) * 0.5;
+          this.tipsVisible = true;
+          this.actionType = eventType;
+          this.scaleIndex = Math.ceil(value);
+          this.tipsLeft = Math.max(tipsLeft, 0);
 
-        if (this.touchEnd) {
-          this.hideTips();
+          if (value !== currentValue) {
+            this.innerTrigger(value);
+          }
+
+          if (this.touchEnd) {
+            this.hideTips();
+          }
+        });
+      },
+      innerTrigger(value) {
+        this._trigger('change', { value });
+        if (this._selfControlled) {
+          this.currentValue = value;
         }
-      });
-    },
-    innerTrigger(value) {
-      this._trigger('change', { value });
-      if (this._selfControlled) {
-        this.currentValue = value;
-      }
-    },
-    onTap(e) {
-      const { disabled } = this;
-      if (disabled) return;
-      this.onTouch(e, 'tap');
-    },
-    onTouchStart() {
-      this.touchEnd = false;
-    },
-    onTouchMove(e) {
-      this.onTouch(e, 'move');
-      this.showAlertText();
-    },
-    onTouchEnd() {
-      this.touchEnd = true;
-      this.hideTips();
-    },
-    hideTips() {
-      if (this.actionType === 'move') {
-        this.tipsVisible = false;
-        this.scaleIndex = -1;
-      }
-    },
-    onSelect(e) {
-      const { value } = e.currentTarget.dataset;
-      const { actionType } = this;
+      },
+      onTap(e) {
+        const { disabled } = this;
+        if (disabled) return;
+        this.onTouch(e, 'tap');
+      },
+      onTouchStart() {
+        this.touchEnd = false;
+      },
+      onTouchMove(e) {
+        this.onTouch(e, 'move');
+        this.showAlertText();
+      },
+      onTouchEnd() {
+        this.touchEnd = true;
+        this.hideTips();
+      },
+      hideTips() {
+        if (this.actionType === 'move') {
+          this.tipsVisible = false;
+          this.scaleIndex = -1;
+        }
+      },
+      onSelect(e) {
+        const { value } = e.currentTarget.dataset;
+        const { actionType } = this;
 
-      if (actionType === 'move') return;
+        if (actionType === 'move') return;
 
-      this.innerTrigger(value);
+        this.innerTrigger(value);
 
-      setTimeout(() => {
-        this.tipsVisible = false;
-        this.scaleIndex = -1;
-      }, 300);
-    },
-    // 旁白模式: 变更数值时显示告警文案
-    showAlertText() {
-      if (this.isVisibleToScreenReader === true) return;
-      this.isVisibleToScreenReader = true;
+        setTimeout(() => {
+          this.tipsVisible = false;
+          this.scaleIndex = -1;
+        }, 300);
+      },
+      // 旁白模式: 变更数值时显示告警文案
+      showAlertText() {
+        if (this.isVisibleToScreenReader === true) return;
+        this.isVisibleToScreenReader = true;
 
-      setTimeout(() => {
-        this.isVisibleToScreenReader = false;
-      }, 2e3);
+        setTimeout(() => {
+          this.isVisibleToScreenReader = false;
+        }, 2e3);
+      },
     },
-  },
-});
+  }),
+};
 
 </script>
 <style scoped src="./rate.css"></style>

package/dist/rate/type.ts

@@ -23,7 +23,7 @@ export interface TdRateProps {
   /**
    * 是否禁用评分
    */
-  disabled?: boolean;
+  disabled?: boolean | null;
   /**
    * 评分图标的间距
    * @default 8
@@ -36,7 +36,7 @@ export interface TdRateProps {
   /**
    * 定义图标前缀
    */
-  iconPrefix?: string;
+  iconPrefix?: string | null;
   /**
    * 选择评分弹框的位置，值为空字符表示不显示评分弹框
    * @default top

package/dist/result/result.vue

@@ -1,6 +1,6 @@
 <template>
   <view
-    :style="tools._style([customStyle])"
+    :style="'' + tools._style([customStyle])"
     :class="[
       classPrefix + ' ' + classPrefix + '--theme-' + theme,
       tClass
@@ -78,49 +78,51 @@ const THEME_ICON = {
 };
 
 
-export default uniComponent({
-  name,
-  options: {
-    styleIsolation: 'shared',
-  },
-  externalClasses: [
-    `${prefix}-class`,
-    `${prefix}-class-image`,
-    `${prefix}-class-title`,
-    `${prefix}-class-description`,
-  ],
+export default {
   components: {
     TIcon,
     TImage,
   },
-  props: {
-    ...props,
-  },
-  data() {
-    return {
-      prefix,
-      classPrefix: name,
-      tools,
+  ...uniComponent({
+    name,
+    options: {
+      styleIsolation: 'shared',
+    },
+    externalClasses: [
+      `${prefix}-class`,
+      `${prefix}-class-image`,
+      `${prefix}-class-title`,
+      `${prefix}-class-description`,
+    ],
+    props: {
+      ...props,
+    },
+    data() {
+      return {
+        prefix,
+        classPrefix: name,
+        tools,
 
-      innerIcon: null,
-    };
-  },
-  watch: {
-    icon: 'initIcon',
-    theme: 'initIcon',
-  },
-  mounted() {
-    this.initIcon();
-  },
-  methods: {
-    initIcon() {
-      const {
-        icon,
-        theme,
-      } = this;
-      this.innerIcon = calcIcon(icon, THEME_ICON[theme]);
+        innerIcon: null,
+      };
     },
-  },
-});
+    watch: {
+      icon: 'initIcon',
+      theme: 'initIcon',
+    },
+    mounted() {
+      this.initIcon();
+    },
+    methods: {
+      initIcon() {
+        const {
+          icon,
+          theme,
+        } = this;
+        this.innerIcon = calcIcon(icon, THEME_ICON[theme]);
+      },
+    },
+  }),
+};
 </script>
 <style scoped src="./result.css"></style>

package/dist/row/row.vue

@@ -1,7 +1,7 @@
 <template>
   <view
     :class="prefix + '-row'"
-    :style="getRowStyles(gutter, customStyle)"
+    :style="''+getRowStyles(gutter, customStyle)"
   >
     <slot />
   </view>
@@ -17,45 +17,47 @@ import { ParentMixin, RELATION_MAP } from '../common/relation';
 const name = `${prefix}-row`;
 
 
-export default uniComponent({
-  name,
-  options: {
-    styleIsolation: 'shared',
-  },
-  mixins: [ParentMixin(RELATION_MAP.Col)],
-  props: {
-    ...props,
-  },
-  data() {
-    return {
-      prefix,
-      tools,
-    };
-  },
-  watch: {
-    gutter: {
-      handler() {
-        this.setGutter();
-      },
-      immediate: true,
+export default {
+  ...uniComponent({
+    name,
+    options: {
+      styleIsolation: 'shared',
+    },
+    mixins: [ParentMixin(RELATION_MAP.Col)],
+    props: {
+      ...props,
+    },
+    data() {
+      return {
+        prefix,
+        tools,
+      };
     },
-  },
-  methods: {
-    getRowStyles,
-    innerAfterLinked() {
-      this.setGutter();
+    watch: {
+      gutter: {
+        handler() {
+          this.setGutter();
+        },
+        immediate: true,
+      },
     },
-    setGutter() {
-      const {
-        gutter,
-      } = this;
+    methods: {
+      getRowStyles,
+      innerAfterLinked() {
+        this.setGutter();
+      },
+      setGutter() {
+        const {
+          gutter,
+        } = this;
 
-      this.children?.forEach((o) => {
-        o.gutter = gutter;
-      });
+        this.children?.forEach((o) => {
+          o.gutter = gutter;
+        });
+      },
     },
-  },
-});
+  }),
+};
 
 </script>
 <style scoped src="./row.css"></style>

package/dist/scroll-view/scroll-view.vue

@@ -20,33 +20,35 @@ import { prefix } from '../common/config';
 const name = `${prefix}-scroll-view`;
 
 
-export default uniComponent({
-  name,
-  options: {
-    styleIsolation: 'shared',
-  },
-  externalClasses: [`${prefix}-class`],
-  props: {
-    scrollIntoView: {
-      type: [String, Number, null],
-      default: null,
+export default {
+  ...uniComponent({
+    name,
+    options: {
+      styleIsolation: 'shared',
     },
-  },
-  data() {
-    return {
+    externalClasses: [`${prefix}-class`],
+    props: {
+      scrollIntoView: {
+        type: [String, Number, null],
+        default: null,
+      },
+    },
+    data() {
+      return {
 
-    };
-  },
-  watch: {
+      };
+    },
+    watch: {
 
-  },
-  mounted() {
+    },
+    mounted() {
 
-  },
-  methods: {
+    },
+    methods: {
 
-  },
-});
+    },
+  }),
+};
 </script>
 <style scoped>
 </style>

package/dist/search/props.ts

@@ -97,8 +97,8 @@ export default {
   },
   /** 只读状态 */
   readonly: {
-    type: Boolean,
-    default: undefined,
+    type: [Boolean, null],
+    default: null as TdSearchProps['readonly'],
   },
   /** 预览结果列表 */
   resultList: {