@tdesign/uniapp 0.7.2 → 0.8.0

package/dist/avatar/avatar.vue

@@ -4,7 +4,7 @@
       classPrefix + '__wrapper',
       tClass
     ]"
-    :style="tools._style([utils.getStyles(isShow), customStyle, innerStyle])"
+    :style="'' + tools._style([utils.getStyles(isShow), customStyle, innerStyle])"
   >
     <t-badge
       v-if="badgeProps"
@@ -26,7 +26,7 @@
           utils.getClass(classPrefix, dataSize || 'medium', dataShape, dataBordered),
           tClassImage
         ]"
-        :style="utils.getSize(dataSize, windowWidth)"
+        :style="'' + utils.getSize(dataSize, windowWidth)"
         :aria-label="ariaLabel || alt || '头像'"
         :aria-role="ariaRole || 'img'"
         :aria-hidden="ariaHidden"
@@ -92,109 +92,111 @@ import { ChildrenMixin, RELATION_MAP } from '../common/relation';
 const name = `${prefix}-avatar`;
 
 
-export default uniComponent({
-  name,
-  options: {
-    styleIsolation: 'shared',
-  },
-  externalClasses: [
-    `${prefix}-class`,
-    `${prefix}-class-image`,
-    `${prefix}-class-icon`,
-    `${prefix}-class-alt`,
-    `${prefix}-class-content`,
-  ],
-  mixins: [ChildrenMixin(RELATION_MAP.Avatar)],
+export default {
   components: {
     TIcon,
     TBadge,
     TImage,
   },
-  props: {
-    ...avatarProps,
-  },
-  data() {
-    return {
-      prefix,
-      classPrefix: name,
-      isShow: true,
-      zIndex: 0,
-      windowWidth: systemInfo.windowWidth,
-      utils,
-      tools,
+  ...uniComponent({
+    name,
+    options: {
+      styleIsolation: 'shared',
+    },
+    externalClasses: [
+      `${prefix}-class`,
+      `${prefix}-class-image`,
+      `${prefix}-class-icon`,
+      `${prefix}-class-alt`,
+      `${prefix}-class-content`,
+    ],
+    mixins: [ChildrenMixin(RELATION_MAP.Avatar)],
+    props: {
+      ...avatarProps,
+    },
+    data() {
+      return {
+        prefix,
+        classPrefix: name,
+        isShow: true,
+        zIndex: 0,
+        windowWidth: systemInfo.windowWidth,
+        utils,
+        tools,
 
-      iconName: '',
-      iconData: {},
+        iconName: '',
+        iconData: {},
 
-      dataShape: this.shape,
-      dataSize: this.size,
-      dataBordered: this.bordered,
-      innerStyle: '',
-    };
-  },
-  computed: {
-    iconCustomStyle() {
-      const fontSize = {
-        small: 'var(--td-avatar-icon-small-font-size, 20px)',
-        medium: 'var(--td-avatar-icon-medium-font-size, 24px)',
-        large: 'var(--td-avatar-icon-large-font-size, 32px)',
+        dataShape: this.shape,
+        dataSize: this.size,
+        dataBordered: this.bordered,
+        innerStyle: '',
       };
-
-      return tools._style([
-        {
-          fontSize: this.iconData.size
-            ? addUnit(this.iconData.size)
-            : fontSize[this.dataSize],
-        },
-        this.iconData.style || '',
-      ]);
-    },
-    imageCustomStyle() {
-      return tools._style([
-        {
-          width: '100%',
-          height: '100%',
-        },
-        this.imageProps?.style || '',
-      ]);
     },
-  },
-  watch: {
-    icon: {
-      handler(t) {
-        const obj = setIcon('icon', t, '');
+    computed: {
+      iconCustomStyle() {
+        const fontSize = {
+          small: 'var(--td-avatar-icon-small-font-size, 20px)',
+          medium: 'var(--td-avatar-icon-medium-font-size, 24px)',
+          large: 'var(--td-avatar-icon-large-font-size, 32px)',
+        };
 
-        Object.keys(obj).forEach((key) => {
-          this[key] = obj[key];
-        });
+        return tools._style([
+          {
+            fontSize: this.iconData.size
+              ? addUnit(this.iconData.size)
+              : fontSize[this.dataSize],
+          },
+          this.iconData.style || '',
+        ]);
+      },
+      imageCustomStyle() {
+        return tools._style([
+          {
+            width: '100%',
+            height: '100%',
+          },
+          this.imageProps?.style || '',
+        ]);
       },
-      immediate: true,
     },
+    watch: {
+      icon: {
+        handler(t) {
+          const obj = setIcon('icon', t, '');
 
-  },
-  mounted() {
+          Object.keys(obj).forEach((key) => {
+            this[key] = obj[key];
+          });
+        },
+        immediate: true,
+      },
 
-  },
-  methods: {
-    innerAfterLinked() {
-      this.dataShape = this.shape || this[RELATION_MAP.Avatar]?.shape || 'circle';
-      this.dataSize = this.size || this[RELATION_MAP.Avatar]?.size;
-      this.dataBordered = true;
     },
-    hide() {
-      this.isShow = false;
+    mounted() {
+
     },
-    onLoadError(e) {
-      if (this.hideOnLoadFailed) {
+    methods: {
+      innerAfterLinked() {
+        this.dataShape = this.shape || this[RELATION_MAP.Avatar]?.shape || 'circle';
+        this.dataSize = this.size || this[RELATION_MAP.Avatar]?.size;
+        this.dataBordered = true;
+      },
+      hide() {
         this.isShow = false;
-      }
-      this.$emit('error', e && e.e);
-    },
-    setStyle(val = '') {
-      this.innerStyle = val;
+      },
+      onLoadError(e) {
+        if (this.hideOnLoadFailed) {
+          this.isShow = false;
+        }
+        this.$emit('error', e && e.e);
+      },
+      setStyle(val = '') {
+        this.innerStyle = val;
+      },
     },
-  },
-});
+  }),
+};
 
 </script>
 <style scoped src="./avatar.css"></style>

package/dist/avatar-group/avatar-group.vue

@@ -1,6 +1,6 @@
 <template>
   <view
-    :style="tools._style([customStyle])"
+    :style="'' + tools._style([customStyle])"
     :class="className"
   >
     <slot />
@@ -39,81 +39,83 @@ const name = `${prefix}-avatar-group`;
 const AVATAR_GROUP_INIT_Z_INDEX = 50;
 
 
-export default uniComponent({
-  name,
-  options: {
-    styleIsolation: 'shared',
-  },
-  externalClasses: [
-    `${prefix}-class`,
-    `${prefix}-class-content`,
-    `${prefix}-class-image`,
-  ],
-  mixins: [ParentMixin(RELATION_MAP.Avatar)],
+export default {
   components: {
     TAvatar,
   },
-  props: {
-    ...avatarGroupProps,
-  },
-  data() {
-    return {
-      prefix,
-      classPrefix: name,
-      hasChild: true,
-      length: 0,
-      className: '',
-      tools,
-    };
-  },
-  watch: {
-    cascading: 'setClass',
-    size: 'setClass',
-  },
-  mounted() {
-    this.setClass();
-    this.length = this.children?.length || 0;
-    if (this.length) {
-      this.handleMax();
-    }
-  },
-  methods: {
-    setClass() {
-      const { cascading, size } = this;
-      const direction = cascading.split('-')[0];
-      const classList = [
-        name,
-        this.tClass,
-        `${name}-offset-${direction}`,
-        `${name}-offset-${direction}-${size.indexOf('px') > -1 ? 'medium' : size || 'medium'}`,
-      ];
-
-      this.className = classList.join(' ');
+  ...uniComponent({
+    name,
+    options: {
+      styleIsolation: 'shared',
+    },
+    externalClasses: [
+      `${prefix}-class`,
+      `${prefix}-class-content`,
+      `${prefix}-class-image`,
+    ],
+    mixins: [ParentMixin(RELATION_MAP.Avatar)],
+    props: {
+      ...avatarGroupProps,
     },
+    data() {
+      return {
+        prefix,
+        classPrefix: name,
+        hasChild: true,
+        length: 0,
+        className: '',
+        tools,
+      };
+    },
+    watch: {
+      cascading: 'setClass',
+      size: 'setClass',
+    },
+    mounted() {
+      this.setClass();
+      this.length = this.children?.length || 0;
+      if (this.length) {
+        this.handleMax();
+      }
+    },
+    methods: {
+      setClass() {
+        const { cascading, size } = this;
+        const direction = cascading.split('-')[0];
+        const classList = [
+          name,
+          this.tClass,
+          `${name}-offset-${direction}`,
+          `${name}-offset-${direction}-${size.indexOf('px') > -1 ? 'medium' : size || 'medium'}`,
+        ];
+
+        this.className = classList.join(' ');
+      },
 
-    handleMax() {
-      const { max, cascading } = this;
-      const len = this.children.length;
-      if (!max || max > len) return;
+      handleMax() {
+        const { max, cascading } = this;
+        const len = this.children.length;
+        if (!max || max > len) return;
 
-      const restAvatars = this.children.splice(max, len - max);
+        const restAvatars = this.children.splice(max, len - max);
 
-      const isLeft = cascading === 'left-up';
-      this.children.forEach((child, index) => {
-        child.setStyle({
-          zIndex: isLeft && `calc(var(--td-avatar-group-init-z-index, ${AVATAR_GROUP_INIT_Z_INDEX}) - ${index})`,
-          padding: 'var(--td-avatar-group-line-spacing, 2px) 0',
+        const isLeft = cascading === 'left-up';
+        this.children.forEach((child, index) => {
+          child.setStyle({
+            zIndex: isLeft && `calc(var(--td-avatar-group-init-z-index, ${AVATAR_GROUP_INIT_Z_INDEX}) - ${index})`,
+            padding: 'var(--td-avatar-group-line-spacing, 2px) 0',
+          });
         });
-      });
 
-      restAvatars.forEach((child) => {
-        child.hide();
-      });
-    },
-    onCollapsedItemClick(e) {
-      this.$emit('collapsed-item-click', e);
+        restAvatars.forEach((child) => {
+          child.hide();
+        });
+      },
+      onCollapsedItemClick(e) {
+        this.$emit('collapsed-item-click', e);
+      },
     },
-  },
-});
+  }),
+};
 </script>
 <style scoped src="./avatar-group.css"></style>

package/dist/back-top/back-top.vue

@@ -1,7 +1,7 @@
 <template>
   <view
     v-if="!hidden"
-    :style="tools._style([customStyle])"
+    :style="'' + tools._style([customStyle])"
     :class="tClass + ' ' + tools.cls(classPrefix, [['fixed', fixed], theme])"
     aria-role="button"
     @click="toTop"
@@ -50,71 +50,73 @@ import { ChildrenMixin, RELATION_MAP } from '../common/relation';
 
 const name = `${prefix}-back-top`;
 
-export default uniComponent({
-  name,
-  options: {
-    styleIsolation: 'shared',
-  },
-  externalClasses: [
-    `${prefix}-class`,
-    `${prefix}-class-icon`,
-    `${prefix}-class-text`,
-  ],
-  mixins: [
-    ChildrenMixin(RELATION_MAP.BackTop),
-  ],
+export default {
   components: {
     TIcon,
   },
-  props: {
-    ...props,
-  },
-  emits: [
-    'to-top',
-  ],
-  watch: {
-    icon() {
-      this.setIcon();
+  ...uniComponent({
+    name,
+    options: {
+      styleIsolation: 'shared',
+    },
+    externalClasses: [
+      `${prefix}-class`,
+      `${prefix}-class-icon`,
+      `${prefix}-class-text`,
+    ],
+    mixins: [
+      ChildrenMixin(RELATION_MAP.BackTop),
+    ],
+    props: {
+      ...props,
     },
-    scrollTop: {
-      handler(value) {
-        const { visibilityHeight } = this;
-        this.hidden = value < visibilityHeight;
+    emits: [
+      'to-top',
+    ],
+    watch: {
+      icon() {
+        this.setIcon();
+      },
+      scrollTop: {
+        handler(value) {
+          const { visibilityHeight } = this;
+          this.hidden = value < visibilityHeight;
+        },
+        immediate: true,
       },
-      immediate: true,
     },
-  },
-  mounted() {
-    const { icon } = this;
-    this.setIcon(icon);
-  },
-  methods: {
-    setIcon(v) {
-      this.innerIcon = calcIcon(v, 'backtop');
+    mounted() {
+      const { icon } = this;
+      this.setIcon(icon);
     },
+    methods: {
+      setIcon(v) {
+        this.innerIcon = calcIcon(v, 'backtop');
+      },
 
-    toTop() {
-      this.$emit('to-top');
-      if (this[RELATION_MAP.BackTop]) {
-        this[RELATION_MAP.BackTop]?.scrollToTop();
-        this.hidden = true;
-      } else {
-        uni.pageScrollTo({
-          scrollTop: 0,
-          duration: 300,
-        });
-      }
+      toTop() {
+        this.$emit('to-top');
+        if (this[RELATION_MAP.BackTop]) {
+          this[RELATION_MAP.BackTop]?.scrollToTop();
+          this.hidden = true;
+        } else {
+          uni.pageScrollTo({
+            scrollTop: 0,
+            duration: 300,
+          });
+        }
+      },
     },
-  },
-  data() {
-    return {
-      prefix,
-      classPrefix: name,
-      innerIcon: null,
-      hidden: true,
-      tools,
-    };
-  },
-});
+    data() {
+      return {
+        prefix,
+        classPrefix: name,
+        innerIcon: null,
+        hidden: true,
+        tools,
+      };
+    },
+  }),
+};
 </script>
 <style scoped src="./back-top.css"></style>

package/dist/badge/badge.vue

@@ -1,6 +1,6 @@
 <template>
   <view
-    :style="tools._style([customStyle])"
+    :style="'' + tools._style([customStyle])"
     :class="classPrefix + ' ' + (useOuterClass ? classPrefix + '__' + shape + '-outer' : '') + tClass"
     :aria-labelledby="labelID"
     :aria-describedby="descriptionID"
@@ -8,7 +8,7 @@
   >
     <view
       :id="labelID"
-      :class="tools.cls(classPrefix + '__content', [['empty', !content && !hasChild]]) + ' ' + tClassContent"
+      :class="'' + tools.cls(classPrefix + '__content', [['empty', !content && !hasChild]]) + ' ' + tClassContent"
       :aria-hidden="true"
     >
       <!-- #ifdef H5 -->
@@ -34,19 +34,19 @@
       </text>
     </view>
     <view
-      v-if="isShowBadge({ dot, count, showZero }) || count === null"
+      v-if="isShowBadge || count === null"
       :id="descriptionID"
       :aria-hidden="true"
-      :aria-label="ariaLabel || tools.getBadgeAriaLabel({ dot, count, maxCount })"
+      :aria-label="ariaLabel || tools.getBadgeAriaLabel({ dot: dot, count: count, maxCount: maxCount })"
       :class="[
-        getBadgeInnerClass({ classPrefix, dot, size, shape, count }) + ' ' + prefix + '-has-count ',
+        getBadgeInnerClass + ' ' + prefix + '-has-count ',
         tClassCount
       ]"
-      :style="tools._style([getBadgeStyles({ color, offset })])"
+      :style="'' + tools._style([getBadgeStyles])"
     >
       <view :class="classPrefix + '__count'">
-        <template v-if="isShowBadge({ dot, count, showZero })">
-          {{ getBadgeValue({ dot, count, maxCount }) }}
+        <template v-if="isShowBadge">
+          {{ getBadgeValue }}
         </template>
         <slot
           else
@@ -75,58 +75,68 @@ const name = `${prefix}-badge`;
 const getUniqueID = uniqueFactory('badge');
 
 
-export default uniComponent({
-  name,
-  options: {
-    styleIsolation: 'shared',
-  },
-  externalClasses: [
-    `${prefix}-class`,
-    `${prefix}-class-count`,
-    `${prefix}-class-content`,
-  ],
-  props: {
-    ...props,
-  },
-  data() {
-    return {
-      prefix,
-      classPrefix: name,
-      value: '',
-      labelID: '',
-      descriptionID: '',
-      tools,
-      useOuterClass: false,
-    };
-  },
-  computed: {
-    hasChild() {
-      return !!this.$slots?.default;
+export default {
+  ...uniComponent({
+    name,
+    options: {
+      styleIsolation: 'shared',
     },
-  },
-  mounted() {
-    const e = getUniqueID();
-    this.labelID = `${e}_label`;
-    this.descriptionID = `${e}_description`;
-    this.checkForActualContent();
-  },
-  methods: {
-    getBadgeValue,
-    getBadgeStyles,
-    getBadgeInnerClass,
-    isShowBadge,
-    checkForActualContent() {
-      const target = ['ribbon', 'ribbon-right', 'ribbon-left', 'triangle-right', 'triangle-left'];
-      if (this.content || !target.includes(this.shape)) {
-        this.useOuterClass = false;
-        return;
-      }
-      return getRect(this, `.${name}__content`).then((rect) => {
-        const hasSlotContent = rect.width > 0 || rect.height > 0;
-        this.useOuterClass = !hasSlotContent;
-      });
+    externalClasses: [
+      `${prefix}-class`,
+      `${prefix}-class-count`,
+      `${prefix}-class-content`,
+    ],
+    props: {
+      ...props,
     },
-  },
-});
+    data() {
+      return {
+        prefix,
+        classPrefix: name,
+        value: '',
+        labelID: '',
+        descriptionID: '',
+        tools,
+        useOuterClass: false,
+      };
+    },
+    computed: {
+      hasChild() {
+        return !!this.$slots?.default;
+      },
+      getBadgeValue() {
+        return getBadgeValue(this);
+      },
+      getBadgeStyles() {
+        return getBadgeStyles(this);
+      },
+      getBadgeInnerClass() {
+        return getBadgeInnerClass(this);
+      },
+      isShowBadge() {
+        return isShowBadge(this);
+      },
+    },
+    mounted() {
+      const e = getUniqueID();
+      this.labelID = `${e}_label`;
+      this.descriptionID = `${e}_description`;
+      this.checkForActualContent();
+    },
+    methods: {
+      checkForActualContent() {
+        const target = ['ribbon', 'ribbon-right', 'ribbon-left', 'triangle-right', 'triangle-left'];
+        if (this.content || !target.includes(this.shape)) {
+          this.useOuterClass = false;
+          return;
+        }
+        return getRect(this, `.${name}__content`).then((rect) => {
+          const hasSlotContent = rect.width > 0 || rect.height > 0;
+          this.useOuterClass = !hasSlotContent;
+        });
+      },
+    },
+  }),
+};
 </script>
 <style scoped src="./badge.css"></style>