@tdesign/uniapp 0.7.3 → 0.8.0

package/dist/qrcode/components/qrcode-status/qrcode-status.vue

@@ -8,12 +8,12 @@
     <template v-else>
       <view
         v-if="status === 'expired'"
-        :class="`${prefix}-expired`"
+        :class="'' + `${prefix}-expired`"
       >
-        <view :class="`${prefix}-expired__text`">
+        <view :class="'' + `${prefix}-expired__text`">
           {{ locale.expiredText }}
           <view
-            :class="`${prefix}-expired__button`"
+            :class="'' + `${prefix}-expired__button`"
             @click="handleRefresh"
           >
             <t-icon
@@ -27,7 +27,7 @@
 
       <view
         v-else-if="status === 'loading'"
-        :class="`${prefix}-loading-container`"
+        :class="'' + `${prefix}-loading-container`"
       >
         <t-loading
           size="64rpx"
@@ -37,11 +37,11 @@
 
       <view
         v-else-if="status === 'scanned'"
-        :class="`${prefix}-scanned`"
+        :class="'' + `${prefix}-scanned`"
       >
         <t-icon
           name="check-circle-filled"
-          :class="`${prefix}-scanned__icon`"
+          :class="'' + `${prefix}-scanned__icon`"
           size="44rpx"
         />
         {{ locale.scannedText }}

package/dist/qrcode/qrcode.vue

@@ -1,9 +1,9 @@
 <template>
   <view
-    :style="`${tools._style([customStyle])}; width:${containerSize}px; height: ${containerSize}px; background-color: ${bgColor};`"
-    :class="`${classPrefix} ${borderless ? prefix + '-' + 'borderless' : ''} ${tClass}`"
+    :style="'' + `${tools._style([customStyle])}; width:${containerSize}px; height: ${containerSize}px; background-color: ${bgColor};`"
+    :class="''+`${classPrefix} ${borderless ? prefix + '-' + 'borderless' : ''} ${tClass}`"
   >
-    <QrcodeCanvas
+    <qrcode-canvas
       ref="qrcodeCanvas"
       :t-class="tClassCanvas"
       :size="size"
@@ -19,17 +19,18 @@
 
     <view
       v-if="showMask && canvasReady"
-      :class="`${prefix}-mask`"
+      :class="'' + `${prefix}-mask`"
     >
-      <QrcodeStatus
+      <qrcode-status
         :status="status"
         :status-render="statusRender"
+        :locale="globalConfig"
         @refresh="handleRefresh"
       >
         <template #statusRender>
           <slot name="statusRender" />
         </template>
-      </QrcodeStatus>
+      </qrcode-status>
     </view>
   </view>
 </template>
@@ -42,101 +43,106 @@ import props from './props';
 import { uniComponent } from '../common/src/index';
 import tools from '../common/utils.wxs';
 
-const name = `${prefix}-qrcode`;
+import usingConfig from '../mixins/using-config';
+const componentName = 'qrcode';
+const name = `${prefix}-${componentName}`;
 
-export default uniComponent({
-  name,
-  options: {
-    styleIsolation: 'shared',
-  },
-  externalClasses: [
-    `${prefix}-class`,
-    `${prefix}-class-canvas`,
-  ],
+export default {
   components: {
     QrcodeCanvas,
     QrcodeStatus,
   },
-  props: {
-    ...props,
-  },
-  data() {
-    return {
-      prefix,
-      tools,
-      showMask: false,
-      classPrefix: name,
-      canvasReady: false,
-      canvasNode: null,
-    };
-  },
-  computed: {
-    // 容器尺寸 = Canvas 尺寸 + padding * 2
+  ...uniComponent({
+    name,
+    mixins: [usingConfig({ componentName })],
+    options: {
+      styleIsolation: 'shared',
+    },
+    externalClasses: [
+      `${prefix}-class`,
+      `${prefix}-class-canvas`,
+    ],
+    props: {
+      ...props,
+    },
+    data() {
+      return {
+        prefix,
+        tools,
+        showMask: false,
+        classPrefix: name,
+        canvasReady: false,
+        canvasNode: null,
+      };
+    },
+    computed: {
+      // 容器尺寸 = Canvas 尺寸 + padding * 2
     // padding 为 12px，所以容器需要额外 24px
-    containerSize() {
-      return this.size + 24;
+      containerSize() {
+        return this.size + 24;
+      },
     },
-  },
-  watch: {
-    status: {
-      handler(newVal) {
-        this.showMask = newVal !== 'active';
+    watch: {
+      status: {
+        handler(newVal) {
+          this.showMask = newVal !== 'active';
+        },
+        immediate: true,
       },
-      immediate: true,
     },
-  },
-  mounted() {
-    this.initCanvas();
-  },
-  methods: {
-    async initCanvas() {
-      // 获取 canvas 实例
-      const canvasComp = this.$refs.qrcodeCanvas;
-      if (canvasComp) {
-        const canvas = await canvasComp.getCanvasNode();
-        this.canvasNode = canvas;
-      }
+    mounted() {
+      this.initCanvas();
     },
+    methods: {
+      async initCanvas() {
+      // 获取 canvas 实例
+        const canvasComp = this.$refs.qrcodeCanvas;
+        if (canvasComp) {
+          const canvas = await canvasComp.getCanvasNode();
+          this.canvasNode = canvas;
+        }
+      },
 
-    // 用于外部调用，重新绘制二维码
-    init() {
-      const canvasComp = this.$refs.qrcodeCanvas;
-      if (canvasComp) {
-        canvasComp.initCanvas();
-      }
-    },
+      // 用于外部调用，重新绘制二维码
+      init() {
+        const canvasComp = this.$refs.qrcodeCanvas;
+        if (canvasComp) {
+          canvasComp.initCanvas();
+        }
+      },
 
-    handleDrawCompleted() {
-      this.canvasReady = true;
-    },
-    handleDrawError(err) {
-      console.error('二维码绘制失败', err);
-    },
-    handleRefresh() {
-      this.$emit('refresh');
-    },
-    // 二维码下载方法
-    async handleDownload() {
-      if (!this.canvasNode) {
-        console.error('未找到 canvas 节点');
-        return;
-      }
+      handleDrawCompleted() {
+        this.canvasReady = true;
+      },
+      handleDrawError(err) {
+        console.error('二维码绘制失败', err);
+      },
+      handleRefresh() {
+        this.$emit('refresh');
+      },
+      // 二维码下载方法
+      async handleDownload() {
+        if (!this.canvasNode) {
+          console.error('未找到 canvas 节点');
+          return;
+        }
 
-      // 注意：此方法在非小程序环境需要适配
-      if (typeof wx !== 'undefined' && uni.canvasToTempFilePath) {
-        uni.canvasToTempFilePath({
-          canvas: this.canvasNode,
-          success: (res) => {
-            uni.saveImageToPhotosAlbum({ filePath: res.tempFilePath });
-          },
-          fail: (err) => {
-            console.error('canvasToTempFilePath failed', err);
-          },
-        });
-      }
+        // 注意：此方法在非小程序环境需要适配
+        if (typeof wx !== 'undefined' && uni.canvasToTempFilePath) {
+          uni.canvasToTempFilePath({
+            canvas: this.canvasNode,
+            success: (res) => {
+              uni.saveImageToPhotosAlbum({ filePath: res.tempFilePath });
+            },
+            fail: (err) => {
+              console.error('canvasToTempFilePath failed', err);
+            },
+          });
+        }
+      },
     },
-  },
-});
+  }),
+};
 </script>
 
 <style scoped src="./qrcode.css"></style>

package/dist/radio/props.ts

@@ -15,8 +15,8 @@ export default {
   },
   /** 是否选中 */
   checked: {
-    type: Boolean,
-    default: undefined,
+    type: [Boolean, null],
+    default: null as TdRadioProps['checked'],
   },
   /** 是否选中，非受控属性 */
   defaultChecked: Boolean,
@@ -28,8 +28,8 @@ export default {
   contentDisabled: Boolean,
   /** 是否为禁用态 */
   disabled: {
-    type: Boolean,
-    default: undefined,
+    type: [Boolean, null],
+    default: null as TdRadioProps['disabled'],
   },
   /** 自定义选中图标和非选中图标。使用 Array 时表示：`[选中态图标，非选中态图标]`。使用 String 时，值为 circle 表示填充型图标、值为 line 表示描边型图标、值为 dot 表示圆点图标，值为 slot 时使用插槽 */
   icon: {
@@ -65,8 +65,8 @@ export default {
   },
   /** 只读状态 */
   readonly: {
-    type: Boolean,
-    default: undefined,
+    type: [Boolean, null],
+    default: null as TdRadioProps['readonly'],
   },
   /** -1 时代表独立，不再寻找 parent，用于头条小程序 */
   relationKey: {

package/dist/radio/radio.vue

@@ -1,8 +1,8 @@
 <template>
   <view
     :id="tId"
-    :style="tools._style([customStyle])"
-    :class="tools.cls(classPrefix, [innerPlacement, ['block', block], ['disabled', iDisabled]]) + ' ' + tClass"
+    :style="'' + tools._style([customStyle])"
+    :class="'' + tools.cls(classPrefix, [innerPlacement, ['block', block], ['disabled', iDisabled]]) + ' ' + tClass"
     :disabled="iDisabled"
     aria-role="radio"
     :aria-checked="dataChecked"
@@ -10,7 +10,7 @@
     :aria-disabled="iDisabled"
     @click.stop="handleTap"
   >
-    <view :class="tools.cls(classPrefix + '__icon', [innerPlacement, ['checked', dataChecked], ['disabled', iDisabled]]) + ' ' + tClassIcon">
+    <view :class="'' + tools.cls(classPrefix + '__icon', [innerPlacement, ['checked', dataChecked], ['disabled', iDisabled]]) + ' ' + tClassIcon">
       <slot
         v-if="slotIcon"
         name="icon"
@@ -33,11 +33,11 @@
         />
         <view
           v-if="dataChecked && icon == 'dot'"
-          :class="tools.cls(classPrefix + '__icon-' + icon, [['disabled', iDisabled]])"
+          :class="'' + tools.cls(classPrefix + '__icon-' + icon, [['disabled', iDisabled]])"
         />
         <view
           v-if="!dataChecked && (icon == 'circle' || icon == 'dot')"
-          :class="tools.cls(classPrefix + '__icon-circle', [['disabled', iDisabled]])"
+          :class="'' + tools.cls(classPrefix + '__icon-circle', [['disabled', iDisabled]])"
         />
         <view
           v-if="!dataChecked && icon == 'line'"
@@ -51,14 +51,12 @@
       @click.stop="handleTap"
     >
       <view
-        :class="
-          tools.cls(classPrefix + '__title', [
-            ['disabled', iDisabled],
-            ['checked', dataChecked]
-          ]) +
-            ' ' +
-            tClassLabel
-        "
+        :class="'' + tools.cls(classPrefix + '__title', [
+          ['disabled', iDisabled],
+          ['checked', dataChecked]
+        ]) +
+          ' ' +
+          tClassLabel"
         :style="'-webkit-line-clamp:' + maxLabelRow"
       >
         <block v-if="label">
@@ -68,14 +66,12 @@
         <slot name="label" />
       </view>
       <view
-        :class="
-          tools.cls(classPrefix + '__description', [
-            ['disabled', iDisabled],
-            ['checked', dataChecked]
-          ]) +
-            ' ' +
-            tClassContent
-        "
+        :class="'' + tools.cls(classPrefix + '__description', [
+          ['disabled', iDisabled],
+          ['checked', dataChecked]
+        ]) +
+          ' ' +
+          tClassContent"
         :style="'-webkit-line-clamp:' + maxContentRow"
       >
         <block v-if="content">
@@ -86,7 +82,7 @@
     </view>
     <view
       v-if="!borderless"
-      :class="tools.cls(classPrefix + '__border', [innerPlacement]) + ' ' + tClassBorder"
+      :class="'' + tools.cls(classPrefix + '__border', [innerPlacement]) + ' ' + tClassBorder"
     />
   </view>
 </template>
@@ -102,124 +98,126 @@ import { ChildrenMixin, RELATION_MAP } from '../common/relation';
 
 const name = `${prefix}-radio`;
 
-export default uniComponent({
-  name,
-  options: {
-    styleIsolation: 'shared',
-  },
-  controlledProps: [
-    {
-      key: 'checked',
-      event: 'change',
-    },
-  ],
-  externalClasses: [
-    `${prefix}-class`,
-    `${prefix}-class-label`,
-    `${prefix}-class-icon`,
-    `${prefix}-class-content`,
-    `${prefix}-class-border`,
-  ],
-  mixins: [ChildrenMixin(RELATION_MAP.Radio)],
+export default {
   components: {
     TIcon,
   },
-  props: {
-    ...props,
-    borderless: {
-      type: Boolean,
-      default: false,
+  ...uniComponent({
+    name,
+    options: {
+      styleIsolation: 'shared',
     },
-    tId: {
-      type: String,
+    controlledProps: [
+      {
+        key: 'checked',
+        event: 'change',
+      },
+    ],
+    externalClasses: [
+      `${prefix}-class`,
+      `${prefix}-class-label`,
+      `${prefix}-class-icon`,
+      `${prefix}-class-content`,
+      `${prefix}-class-border`,
+    ],
+    mixins: [ChildrenMixin(RELATION_MAP.Radio)],
+    props: {
+      ...props,
+      borderless: {
+        type: Boolean,
+        default: false,
+      },
+      tId: {
+        type: String,
+      },
     },
-  },
-  data() {
-    return {
-      prefix,
-      classPrefix: name,
-      customIcon: false,
-      slotIcon: false,
-      optionLinked: false,
-      iconVal: [],
-      innerPlacement: '',
-      iDisabled: false,
-      iReadonly: false,
-      tools,
+    data() {
+      return {
+        prefix,
+        classPrefix: name,
+        customIcon: false,
+        slotIcon: false,
+        optionLinked: false,
+        iconVal: [],
+        innerPlacement: '',
+        iDisabled: false,
+        iReadonly: false,
+        tools,
 
-      dataChecked: coalesce(this.checked, this.defaultChecked),
-    };
-  },
-  computed: {
-    isIsolated() {
-      return this.relationKey === ISOLATED_RELATION_KEY;
+        dataChecked: coalesce(this.checked, this.defaultChecked),
+      };
     },
-  },
-  watch: {
-    checked: {
-      handler(v) {
-        this.dataChecked = v;
+    computed: {
+      isIsolated() {
+        return this.relationKey === ISOLATED_RELATION_KEY;
       },
-      immediate: true,
     },
-    disabled: {
-      handler(v) {
-        this.iDisabled = v;
+    watch: {
+      checked: {
+        handler(v) {
+          this.dataChecked = v;
+        },
+        immediate: true,
       },
-      immediate: true,
-    },
-    readonly: {
-      handler(v) {
-        this.iReadonly = v;
+      disabled: {
+        handler(v) {
+          this.iDisabled = v;
+        },
+        immediate: true,
+      },
+      readonly: {
+        handler(v) {
+          this.iReadonly = v;
+        },
+        immediate: true,
       },
-      immediate: true,
     },
-  },
-  mounted() {
-    this.init();
-  },
-  methods: {
-    handleTap(e) {
-      const { iDisabled, iReadonly, contentDisabled } = this;
-      const { target } = e.currentTarget.dataset;
+    mounted() {
+      this.init();
+    },
+    methods: {
+      handleTap(e) {
+        const { iDisabled, iReadonly, contentDisabled } = this;
+        const { target } = e.currentTarget.dataset;
 
-      if (iDisabled || iReadonly || (target === 'text' && contentDisabled)) return;
+        if (iDisabled || iReadonly || (target === 'text' && contentDisabled)) return;
 
-      this.doChange();
-    },
-    doChange() {
-      const { value, dataChecked, allowUncheck } = this;
-      const parent = this.isIsolated ? null : this[RELATION_MAP.Radio];
+        this.doChange();
+      },
+      doChange() {
+        const { value, dataChecked, allowUncheck } = this;
+        const parent = this.isIsolated ? null : this[RELATION_MAP.Radio];
 
-      const isAllowUncheck = Boolean(allowUncheck || parent?.allowUncheck);
+        const isAllowUncheck = Boolean(allowUncheck || parent?.allowUncheck);
 
-      if (parent) {
-        this[RELATION_MAP.Radio].updateValue(dataChecked && isAllowUncheck ? null : value);
-      } else {
-        this._trigger('change', { checked: isAllowUncheck ? !dataChecked : true });
-      }
-    },
-    init() {
-      const { icon } = this;
-      const parent = this.isIsolated ? null : this[RELATION_MAP.Radio];
-      const isIdArr = Array.isArray(parent?.icon || icon);
+        if (parent) {
+          this[RELATION_MAP.Radio].updateValue(dataChecked && isAllowUncheck ? null : value);
+        } else {
+          this._trigger('change', { checked: isAllowUncheck ? !dataChecked : true });
+        }
+      },
+      init() {
+        const { icon } = this;
+        const parent = this.isIsolated ? null : this[RELATION_MAP.Radio];
+        const isIdArr = Array.isArray(parent?.icon || icon);
 
-      this.customIcon = isIdArr;
-      this.slotIcon = icon === 'slot';
-      this.iconVal = isIdArr ? parent?.icon || icon : [];
-      this.innerPlacement = this.placement || parent?.placement || 'left';
-    },
+        this.customIcon = isIdArr;
+        this.slotIcon = icon === 'slot';
+        this.iconVal = isIdArr ? parent?.icon || icon : [];
+        this.innerPlacement = this.placement || parent?.placement || 'left';
+      },
 
-    setDisabled(disabled) {
-      if (this.isIsolated) return;
+      setDisabled(disabled) {
+        if (this.isIsolated) return;
 
-      this.iDisabled = this.disabled || disabled;
-    },
+        this.iDisabled = this.disabled || disabled;
+      },
 
-    setReadonly(readonly) {
-      this.iReadonly = this.readonly || readonly;
+      setReadonly(readonly) {
+        this.iReadonly = this.readonly || readonly;
+      },
     },
-  },
-});
+  }),
+};
 </script>
 <style scoped src="./radio.css"></style>

package/dist/radio/type.ts

@@ -19,7 +19,7 @@ export interface TdRadioProps<T = RadioValue> {
    * 是否选中
    * @default false
    */
-  checked?: boolean;
+  checked?: boolean | null;
   /**
    * 是否选中，非受控属性
    * @default false
@@ -37,7 +37,7 @@ export interface TdRadioProps<T = RadioValue> {
   /**
    * 是否为禁用态
    */
-  disabled?: boolean;
+  disabled?: boolean | null;
   /**
    * 自定义选中图标和非选中图标。使用 Array 时表示：`[选中态图标，非选中态图标]`。使用 String 时，值为 circle 表示填充型图标、值为 line 表示描边型图标、值为 dot 表示圆点图标，值为 slot 时使用插槽
    * @default 'circle'
@@ -69,7 +69,7 @@ export interface TdRadioProps<T = RadioValue> {
   /**
    * 只读状态
    */
-  readonly?: boolean;
+  readonly?: boolean | null;
   /**
    * -1 时代表独立，不再寻找 parent，用于头条小程序
    * @default ''

package/dist/radio-group/props.ts

@@ -12,8 +12,8 @@ export default {
   borderless: Boolean,
   /** 是否禁用全部子单选框 */
   disabled: {
-    type: Boolean,
-    default: undefined,
+    type: [Boolean, null],
+    default: null as TdRadioGroupProps['disabled'],
   },
   /** 自定义选中图标和非选中图标。示例：[选中态图标，非选中态图标]。使用 String 时，值为 circle 表示填充型图标、值为 line 表示描边型图标、值为 dot 表示圆点图标；仅在使用 options 时生效 */
   icon: {
@@ -44,8 +44,8 @@ export default {
   },
   /** 只读状态 */
   readonly: {
-    type: Boolean,
-    default: undefined,
+    type: [Boolean, null],
+    default: null as TdRadioGroupProps['readonly'],
   },
   /** -1 时代表独立，不再寻找 parent，用于头条小程序 */
   relationKey: {