@tdesign/uniapp 0.7.3 → 0.8.0

package/dist/button/button.vue

@@ -1,7 +1,7 @@
 <template>
   <button
     :id="tId"
-    :style="tools._style([customStyle])"
+    :style="'' + tools._style([customStyle])"
     :data-custom="customDataset"
     :class="className"
     :activity-type="activityType ? activityType : ''"
@@ -89,132 +89,137 @@ import tools from '../common/utils.wxs';
 const name = `${prefix}-button`;
 
 
-export default uniComponent({
-  name,
-  options: {
-    styleIsolation: 'shared',
-  },
-  externalClasses: [
-    `${prefix}-class`,
-    `${prefix}-class-icon`,
-    `${prefix}-class-loading`,
-  ],
+export default {
   components: {
     TIcon,
     TLoading,
   },
-  props: {
-    ...props,
-  },
-  emits: [
-    'click',
-  ],
-  data() {
-    return {
-      tools,
-      prefix,
-      className: '',
-      classPrefix: name,
-      innerIcon: undefined,
-    };
-  },
-  computed: {
-    iconCustomStyle() {
-      const fontSize = {
-        'extra-small': 'var(--td-button-extra-small-icon-font-size, 18px)',
-        small: 'var(--td-button-small-icon-font-size, 18px)',
-        medium: 'var(--td-button-medium-icon-font-size, 20px)',
-        large: 'var(--td-button-large-icon-font-size, 24px)',
-      };
-
-      return tools._style([
-        {
-          fontSize: this.innerIcon.size
-            ? addUnit(this.innerIcon.size)
-            : fontSize[this.size || 'medium'],
-          borderRadius: 'var(--td-button-icon-border-radius, 4px)',
-        },
-        this.innerIcon.style || '',
-      ]);
-    },
-    loadingCustomStyle() {
-      return tools._style({
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-      });
+  ...uniComponent({
+    name,
+    options: {
+      styleIsolation: 'shared',
     },
-  },
-  watch: {
-    icon: {
-      handler(value) {
-        this.innerIcon = calcIcon(value, '');
-      },
-      immediate: true,
+    externalClasses: [
+      `${prefix}-class`,
+      `${prefix}-class-icon`,
+      `${prefix}-class-loading`,
+    ],
+    props: {
+      ...props,
     },
-    theme: 'setClass',
-    size: 'setClass',
-    plain: 'setClass',
-    block: 'setClass',
-    shape: 'setClass',
-    disabled: 'setClass',
-    loading: 'setClass',
-    variant: 'setClass',
-  },
-  created() {
-    this.setClass();
-  },
-  methods: {
-    setClass() {
-      const t = [
-        name,
-        this.tClass,
-        `${name}--${this.variant || 'base'}`,
-        `${name}--${this.theme || 'default'}`,
-        `${name}--${this.shape || 'rectangle'}`,
-        `${name}--size-${this.size || 'medium'}`,
-      ];
-      if (this.block) {
-        t.push(`${name}--block`);
-      }
-      if (this.disabled) {
-        t.push(`${name}--disabled`);
-      }
-      if (this.ghost) {
-        t.push(`${name}--ghost`);
-      }
-      this.className = t.join(' ');
-    },
-    getuserinfo(t) {
-      this.$emit('getuserinfo', t);
-    },
-    contact(t) {
-      this.$emit('contact', t);
-    },
-    getphonenumber(t) {
-      this.$emit('getphonenumber', t);
-    },
-    error(t) {
-      this.$emit('error', t);
-    },
-    opensetting(t) {
-      this.$emit('opensetting', t);
+    emits: [
+      'click',
+    ],
+    data() {
+      return {
+        tools,
+        prefix,
+        className: '',
+        classPrefix: name,
+        innerIcon: undefined,
+      };
     },
-    launchapp(t) {
-      this.$emit('launchapp', t);
+    computed: {
+      iconCustomStyle() {
+        if (!this.innerIcon) {
+          return {};
+        }
+        const fontSize = {
+          'extra-small': 'var(--td-button-extra-small-icon-font-size, 18px)',
+          small: 'var(--td-button-small-icon-font-size, 18px)',
+          medium: 'var(--td-button-medium-icon-font-size, 20px)',
+          large: 'var(--td-button-large-icon-font-size, 24px)',
+        };
+
+        return tools._style([
+          {
+            fontSize: this.innerIcon.size
+              ? addUnit(this.innerIcon.size)
+              : fontSize[this.size || 'medium'],
+            borderRadius: 'var(--td-button-icon-border-radius, 4px)',
+          },
+          this.innerIcon.style || '',
+        ]);
+      },
+      loadingCustomStyle() {
+        return tools._style({
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+        });
+      },
     },
-    chooseavatar(t) {
-      this.$emit('chooseavatar', t);
+    watch: {
+      icon: {
+        handler(value) {
+          this.innerIcon = calcIcon(value, '');
+        },
+        immediate: true,
+      },
+      theme: 'setClass',
+      size: 'setClass',
+      plain: 'setClass',
+      block: 'setClass',
+      shape: 'setClass',
+      disabled: 'setClass',
+      loading: 'setClass',
+      variant: 'setClass',
     },
-    agreeprivacyauthorization(t) {
-      this.$emit('agreeprivacyauthorization', t);
+    created() {
+      this.setClass();
     },
-    handleTap(t) {
-      if (this.disabled || this.loading) return;
-      this.$emit('click', t);
+    methods: {
+      setClass() {
+        const t = [
+          name,
+          this.tClass,
+          `${name}--${this.variant || 'base'}`,
+          `${name}--${this.theme || 'default'}`,
+          `${name}--${this.shape || 'rectangle'}`,
+          `${name}--size-${this.size || 'medium'}`,
+        ];
+        if (this.block) {
+          t.push(`${name}--block`);
+        }
+        if (this.disabled) {
+          t.push(`${name}--disabled`);
+        }
+        if (this.ghost) {
+          t.push(`${name}--ghost`);
+        }
+        this.className = t.join(' ');
+      },
+      getuserinfo(t) {
+        this.$emit('getuserinfo', t);
+      },
+      contact(t) {
+        this.$emit('contact', t);
+      },
+      getphonenumber(t) {
+        this.$emit('getphonenumber', t);
+      },
+      error(t) {
+        this.$emit('error', t);
+      },
+      opensetting(t) {
+        this.$emit('opensetting', t);
+      },
+      launchapp(t) {
+        this.$emit('launchapp', t);
+      },
+      chooseavatar(t) {
+        this.$emit('chooseavatar', t);
+      },
+      agreeprivacyauthorization(t) {
+        this.$emit('agreeprivacyauthorization', t);
+      },
+      handleTap(t) {
+        if (this.disabled || this.loading) return;
+        this.$emit('click', t);
+      },
     },
-  },
-});
+  }),
+};
 </script>
 <style scoped src="./button.css"></style>
 <style scoped>

package/dist/button/props.ts

@@ -28,8 +28,8 @@ export default {
   },
   /** 禁用状态。优先级：Button.disabled > Form.disabled */
   disabled: {
-    type: Boolean,
-    default: undefined,
+    type: [Boolean, null],
+    default: null as TdButtonProps['disabled'],
   },
   /** 从消息小程序入口打开小程序的路径，默认为聊天工具启动路径 */
   entrancePath: {

package/dist/button/type.ts

@@ -33,7 +33,7 @@ export interface TdButtonProps {
   /**
    * 禁用状态。优先级：Button.disabled > Form.disabled
    */
-  disabled?: boolean;
+  disabled?: boolean | null;
   /**
    * 从消息小程序入口打开小程序的路径，默认为聊天工具启动路径
    * @default ''

package/dist/calendar/calendar-header.vue

@@ -9,7 +9,7 @@
     >
       <view
         v-if="switchMode === 'year-month'"
-        :class="utils.cls(classPrefix + '__icon', [['disabled', preYearBtnDisable]])"
+        :class="'' + utils.cls(classPrefix + '__icon', [['disabled', preYearBtnDisable]])"
         :data-disabled="preYearBtnDisable"
         data-type="pre-year"
         @click="handleSwitchModeChange"
@@ -17,7 +17,7 @@
         <t-icon name="chevron-left-double" />
       </view>
       <view
-        :class="utils.cls(classPrefix + '__icon', [['disabled', prevMonthBtnDisable]])"
+        :class="'' + utils.cls(classPrefix + '__icon', [['disabled', prevMonthBtnDisable]])"
         :data-disabled="prevMonthBtnDisable"
         data-type="pre-month"
         @click="handleSwitchModeChange"
@@ -33,7 +33,7 @@
       :class="classPrefix + '__action'"
     >
       <view
-        :class="utils.cls(classPrefix + '__icon', [['disabled', nextMonthBtnDisable]])"
+        :class="'' + utils.cls(classPrefix + '__icon', [['disabled', nextMonthBtnDisable]])"
         :data-disabled="nextMonthBtnDisable"
         data-type="next-month"
         @click="handleSwitchModeChange"
@@ -42,7 +42,7 @@
       </view>
       <view
         v-if="switchMode === 'year-month'"
-        :class="utils.cls(classPrefix + '__icon', [['disabled', nextYearBtnDisable]])"
+        :class="'' + utils.cls(classPrefix + '__icon', [['disabled', nextYearBtnDisable]])"
         :data-disabled="nextYearBtnDisable"
         data-type="next-year"
         @click="handleSwitchModeChange"