@tdesign/uniapp 0.7.2 → 0.8.0

package/dist/swiper/swiper.vue

@@ -1,7 +1,7 @@
 <template>
   <view
     :class="classPrefix + ' ' + tClass"
-    :style="tools._style([customStyle])"
+    :style="'' + tools._style([customStyle])"
   >
     <swiper
       :class="classPrefix + '-host'"
@@ -24,7 +24,7 @@
         v-for="(item, index) in list"
         :key="index"
         :class="
-          tools.cls(classPrefix + '__item', [
+          '' + tools.cls(classPrefix + '__item', [
             ['preview', isPrev(navCurrent, index, list)],
             ['next', isNext(navCurrent, index, list)]
           ])
@@ -33,7 +33,7 @@
         :aria-hidden="navCurrent !== index"
         aria-role="image"
         :aria-label="tools.isObject(item) ? item.ariaLabel : ''"
-        @click="onTap($event, { index })"
+        @click="(e) => onTap(e, { index })"
       >
         <t-image
           :t-class="getImageClass(prefix, navCurrent, index, list, tClassImage, tClassPrevImage, tClassNextImage)"
@@ -46,7 +46,7 @@
           :mode="imageProps.mode || 'aspectFill'"
           :webp="imageProps.webp || false"
           :show-menu-by-longpress="imageProps.showMenuByLongpress || false"
-          @load="onImageLoad($event, { custom: index || null })"
+          @load="(e) => onImageLoad(e, { custom: index || null })"
         />
       </swiper-item>
     </swiper>
@@ -78,114 +78,116 @@ import { ParentMixin, RELATION_MAP } from '../common/relation';
 
 const name = `${prefix}-swiper`;
 
-export default uniComponent({
-  name,
-  options: {
-    multipleSlots: true,
-    styleIsolation: 'shared',
-  },
-  externalClasses: [`${prefix}-class`, `${prefix}-class-nav`, `${prefix}-class-image`, `${prefix}-class-prev-image`, `${prefix}-class-next-image`],
-  mixins: [ParentMixin(RELATION_MAP.SwiperNav)],
+export default {
   components: {
     TSwiperNav,
     TImage,
   },
-  props: {
-    ...props,
-  },
-  emits: [
-    'click',
-    'change',
-    'animationfinish',
-    'image-load',
-  ],
-  data() {
-    return {
-      prefix,
-      classPrefix: name,
-      tools,
-      navCurrent: 0,
-    };
-  },
-  watch: {
-    navCurrent(t) {
-      this.updateNav(t);
+  ...uniComponent({
+    name,
+    options: {
+      multipleSlots: true,
+      styleIsolation: 'shared',
     },
-  },
-
-  mounted() {
-    this.navCurrent = this.current;
-  },
-
-  methods: {
-    isPrev,
-    isNext,
-    getImageClass,
-
-    updateNav(currentValue) {
-      if (this.navigation) return;
-      const $nav = this.getRelationNodes('./swiper-nav')?.[0];
-      if (!$nav) return;
-      const { direction, paginationPosition, list } = this;
-
-      this.current = currentValue;
-      this.total = list.length;
-      this.direction = direction;
-      this.paginationPosition = paginationPosition;
+    externalClasses: [`${prefix}-class`, `${prefix}-class-nav`, `${prefix}-class-image`, `${prefix}-class-prev-image`, `${prefix}-class-next-image`],
+    mixins: [ParentMixin(RELATION_MAP.SwiperNav)],
+    props: {
+      ...props,
+    },
+    emits: [
+      'click',
+      'change',
+      'animationfinish',
+      'image-load',
+    ],
+    data() {
+      return {
+        prefix,
+        classPrefix: name,
+        tools,
+        navCurrent: 0,
+      };
+    },
+    watch: {
+      navCurrent(t) {
+        this.updateNav(t);
+      },
     },
 
-    onTap(e, dataset) {
-      const { index } = dataset;
-      this.$emit('click', { index });
+    mounted() {
+      this.navCurrent = this.current;
     },
 
-    onChange(e) {
-      const { current, source } = e.detail;
+    methods: {
+      isPrev,
+      isNext,
+      getImageClass,
 
-      if (!source) return;
+      updateNav(currentValue) {
+        if (this.navigation) return;
+        const $nav = this.getRelationNodes('./swiper-nav')?.[0];
+        if (!$nav) return;
+        const { direction, paginationPosition, list } = this;
 
-      this.navCurrent = current;
-      this.triggerSource = source;
+        this.current = currentValue;
+        this.total = list.length;
+        this.direction = direction;
+        this.paginationPosition = paginationPosition;
+      },
 
-      this.$emit('change', { current, source });
-    },
+      onTap(e, dataset) {
+        const { index } = dataset;
+        this.$emit('click', { index });
+      },
 
-    onAnimationFinish(e) {
-      const { current, source } = e.detail;
+      onChange(e) {
+        const { current, source } = e.detail;
 
-      this.$emit('animationfinish', { current, source: source || this.triggerSource });
-    },
+        if (!source) return;
 
-    onNavBtnChange(e) {
-      const { dir, source } = e;
+        this.navCurrent = current;
+        this.triggerSource = source;
 
-      this.doNavBtnChange(dir, source);
-    },
+        this.$emit('change', { current, source });
+      },
 
-    doNavBtnChange(dir, source) {
-      const { current, list, loop, navCurrent } = this;
-      const count = list.length;
-      let nextPos = dir === 'next' ? current + 1 : current - 1;
+      onAnimationFinish(e) {
+        const { current, source } = e.detail;
 
-      if (loop) {
-        nextPos = dir === 'next' ? (current + 1) % count : (current - 1 + count) % count;
-      } else {
-        nextPos = nextPos < 0 || nextPos >= count ? current : nextPos;
-      }
+        this.$emit('animationfinish', { current, source: source || this.triggerSource });
+      },
 
-      if (nextPos === navCurrent) return;
+      onNavBtnChange(e) {
+        const { dir, source } = e;
 
-      this.navCurrent = nextPos;
-      this.triggerSource = source;
+        this.doNavBtnChange(dir, source);
+      },
 
-      this.$emit('change', { current: nextPos, source });
-    },
+      doNavBtnChange(dir, source) {
+        const { current, list, loop, navCurrent } = this;
+        const count = list.length;
+        let nextPos = dir === 'next' ? current + 1 : current - 1;
+
+        if (loop) {
+          nextPos = dir === 'next' ? (current + 1) % count : (current - 1 + count) % count;
+        } else {
+          nextPos = nextPos < 0 || nextPos >= count ? current : nextPos;
+        }
 
-    onImageLoad(e, dataset) {
-      this.$emit('image-load', { index: dataset.custom });
+        if (nextPos === navCurrent) return;
+
+        this.navCurrent = nextPos;
+        this.triggerSource = source;
+
+        this.$emit('change', { current: nextPos, source });
+      },
+
+      onImageLoad(e, dataset) {
+        this.$emit('image-load', { index: dataset.custom });
+      },
     },
-  },
-});
+  }),
+};
 
 </script>
 <style scoped src="./swiper.css"></style>

package/dist/swiper-nav/swiper-nav.vue

@@ -3,26 +3,26 @@
     <view
       v-if="showControls"
       :class="classPrefix + '__btn ' + ' ' + tClass"
-      :style="tools._style([customStyle])"
+      :style="'' + tools._style([customStyle])"
     >
       <view
         :class="classPrefix + '__btn--prev'"
         data-dir="prev"
         aria-role="button"
         aria-label="上一张"
-        @click="nav($event, { dir: 'prev'})"
+        @click="(e) => nav(e, { dir: 'prev'})"
       />
       <view
         :class="classPrefix + '__btn--next'"
         data-dir="next"
         aria-role="button"
         aria-label="下一张"
-        @click="nav($event, { dir: 'next'})"
+        @click="(e) => nav(e, { dir: 'next'})"
       />
     </view>
     <view
       v-if="total >= minShowNum"
-      :style="tools._style([customStyle])"
+      :style="'' + tools._style([customStyle])"
       :class="
         tClass +
           ' ' + classPrefix +
@@ -35,7 +35,7 @@
         <view
           v-for="(item, idx) in total"
           :key="idx"
-          :class="tools.cls(classPrefix + '__' + type + '-item', [['active', current === idx], direction])"
+          :class="[classPrefix + '__' + type + '-item', current === idx ? classPrefix + '__' + type + '-item' + '--active' : '', direction ? classPrefix + '__' + type + '-item' + '--' + direction : '']"
         />
       </block>
       <block v-if="type === 'fraction'">
@@ -53,39 +53,41 @@ import { ChildrenMixin, RELATION_MAP } from '../common/relation';
 
 const name = `${prefix}-swiper-nav`;
 
-export default uniComponent({
-  name,
-  options: {
-    styleIsolation: 'shared',
-  },
-  externalClasses: [`${prefix}-class`],
-  mixins: [ChildrenMixin(RELATION_MAP.SwiperNav)],
+export default {
   components: { },
-  props: {
-    ...props,
-  },
-  emits: [
-    'nav-btn-change',
-  ],
-  data() {
-    return {
-      prefix,
-      classPrefix: name,
-      tools,
-    };
-  },
+  ...uniComponent({
+    name,
+    options: {
+      styleIsolation: 'shared',
+    },
+    externalClasses: [`${prefix}-class`],
+    mixins: [ChildrenMixin(RELATION_MAP.SwiperNav)],
+    props: {
+      ...props,
+    },
+    emits: [
+      'nav-btn-change',
+    ],
+    data() {
+      return {
+        prefix,
+        classPrefix: name,
+        tools,
+      };
+    },
 
-  methods: {
-    nav(e, dataset) {
-      const { dir } = dataset;
-      const source = 'nav';
-      this.$emit('nav-btn-change', { dir, source });
-      const parent = this[RELATION_MAP.SwiperNav];
-      if (parent) {
-        parent.doNavBtnChange(dir, source);
-      }
+    methods: {
+      nav(e, dataset) {
+        const { dir } = dataset;
+        const source = 'nav';
+        this.$emit('nav-btn-change', { dir, source });
+        const parent = this[RELATION_MAP.SwiperNav];
+        if (parent) {
+          parent.doNavBtnChange(dir, source);
+        }
+      },
     },
-  },
-});
+  }),
+};
 </script>
 <style scoped src="./swiper-nav.css"></style>

package/dist/switch/props.ts

@@ -13,8 +13,8 @@ export default {
   },
   /** 是否禁用组件。优先级：Switch.disabled > Form.disabled */
   disabled: {
-    type: Boolean,
-    default: undefined,
+    type: [Boolean, null],
+    default: null as TdSwitchProps['disabled'],
   },
   /** 开关的图标；[打开时的图标，关闭时的图标] */
   icon: {

package/dist/switch/switch.vue

@@ -1,24 +1,22 @@
 <template>
   <view
-    :style="tools._style([customStyle])"
+    :style="'' + tools._style([customStyle])"
     :class="tClass + ' ' + classPrefix"
     :aria-checked="checked"
     :aria-disabled="disabled"
     aria-role="switch"
     @click="handleSwitch"
   >
-    <view :class="tools.cls(classPrefix + '__body', [['checked', checked], ['disabled', disabled || loading], size]) + ' ' + tClassBody">
+    <view :class="'' + tools.cls(classPrefix + '__body', [['checked', checked], ['disabled', disabled || loading], size]) + ' ' + tClassBody">
       <view
-        :class="
-          tools.cls(classPrefix + '__dot', [['checked', checked], ['disabled', disabled], ['plain', label.length != 2 && icon.length != 2 && !loading], size]) +
-            ' ' +
-            tClassDot
-        "
+        :class="'' + tools.cls(classPrefix + '__dot', [['checked', checked], ['disabled', disabled], ['plain', label.length != 2 && icon.length != 2 && !loading], size]) +
+          ' ' +
+          tClassDot"
         :aria-hidden="true"
       >
         <view
           v-if="label"
-          :class="tools.cls(classPrefix + '__label', [['checked', checked], ['disabled', disabled], size]) + ' ' + tClassLabel"
+          :class="'' + tools.cls(classPrefix + '__label', [['checked', checked], ['disabled', disabled], size]) + ' ' + tClassLabel"
         >
           <t-loading
             v-if="loading"
@@ -50,71 +48,73 @@ import tools from '../common/utils.wxs';
 
 const name = `${prefix}-switch`;
 
-export default uniComponent({
-  name,
-  options: {
-    styleIsolation: 'shared',
-  },
-  controlledProps: [
-    {
-      key: 'value',
-      event: 'change',
-    },
-  ],
-  externalClasses: [
-    `${prefix}-class`,
-    `${prefix}-class-label`,
-    `${prefix}-class-body`,
-    `${prefix}-class-dot`,
-  ],
+export default {
   components: {
     TIcon,
     TLoading,
   },
-  props: {
-    ...props,
-  },
-  emits: ['change'],
-  data() {
-    return {
-      prefix,
-      classPrefix: name,
-      checked: false,
-      tools,
-
-      dataValue: coalesce(this.value, this.defaultValue),
-    };
-  },
-  watch: {
-    value: {
-      handler(v) {
-        this.dataValue = v;
+  ...uniComponent({
+    name,
+    options: {
+      styleIsolation: 'shared',
+    },
+    controlledProps: [
+      {
+        key: 'value',
+        event: 'change',
       },
-      immediate: true,
+    ],
+    externalClasses: [
+      `${prefix}-class`,
+      `${prefix}-class-label`,
+      `${prefix}-class-body`,
+      `${prefix}-class-dot`,
+    ],
+    props: {
+      ...props,
+    },
+    emits: ['change'],
+    data() {
+      return {
+        prefix,
+        classPrefix: name,
+        checked: false,
+        tools,
+
+        dataValue: coalesce(this.value, this.defaultValue),
+      };
     },
-    dataValue: {
-      handler(val) {
-        const [activeValue] = this.customValue;
+    watch: {
+      value: {
+        handler(v) {
+          this.dataValue = v;
+        },
+        immediate: true,
+      },
+      dataValue: {
+        handler(val) {
+          const [activeValue] = this.customValue;
 
-        this.checked = val === activeValue;
+          this.checked = val === activeValue;
+        },
+        immediate: true,
       },
-      immediate: true,
     },
-  },
-  mounted() {
+    mounted() {
 
-  },
-  methods: {
-    handleSwitch() {
-      const { loading, disabled, dataValue, customValue } = this;
-      const [activeValue, inactiveValue] = customValue;
-      if (loading || disabled) return;
+    },
+    methods: {
+      handleSwitch() {
+        const { loading, disabled, dataValue, customValue } = this;
+        const [activeValue, inactiveValue] = customValue;
+        if (loading || disabled) return;
 
-      this._trigger('change', {
-        value: dataValue === activeValue ? inactiveValue : activeValue,
-      });
+        this._trigger('change', {
+          value: dataValue === activeValue ? inactiveValue : activeValue,
+        });
+      },
     },
-  },
-});
+  }),
+};
 </script>
 <style scoped src="./switch.css"></style>

package/dist/switch/type.ts

@@ -13,7 +13,7 @@ export interface TdSwitchProps<T = SwitchValue> {
   /**
    * 是否禁用组件。优先级：Switch.disabled > Form.disabled
    */
-  disabled?: boolean;
+  disabled?: boolean | null;
   /**
    * 开关的图标；[打开时的图标，关闭时的图标]
    * @default []