@tdesign/uniapp 0.7.2 → 0.8.0

package/dist/dropdown-menu/dropdown-menu.vue

@@ -1,23 +1,15 @@
 <template>
   <view
     id="t-bar"
-    :style="tools._style([customStyle])"
+    :style="'' + tools._style([customStyle])"
     :class="classPrefix + ' ' + tClass"
-    @touchmove.stop.prevent="parseEventDynamicCode($event, activeIdx === -1 ? '' : 'noop')"
+    @touchmove.stop.prevent="(e) => parseEventDynamicCode(e, activeIdx === -1 ? '' : 'noop')"
   >
     <view
       v-for="(item, index) in menus"
       :key="index"
       :data-index="index"
-      :class="
-        tools.cls(classPrefix + '__item', [
-          ['active', activeIdx == index],
-          ['disabled', item.disabled],
-          [index, true]
-        ]) +
-          ' ' +
-          tClassItem
-      "
+      :class="[classPrefix + '__item', activeIdx == index ? classPrefix + '__item' + '--active' : '', item.disabled ? classPrefix + '__item' + '--disabled' : '', true ? classPrefix + '__item' + '--index' : '', tClassItem]"
       :aria-disabled="item.disabled"
       aria-role="button"
       :aria-expanded="activeIdx === index"
@@ -35,7 +27,7 @@
         <t-icon
           :custom-style="iArrowIcon.style || ''"
           :t-class="getIconTClass(index)"
-          :class="getIconClass(index)"
+          :class="''+getIconClass(index)"
           :prefix="iArrowIcon.prefix"
           :name="iArrowIcon.name"
           :size="iArrowIcon.size"
@@ -65,109 +57,111 @@ import { canUseVirtualHost } from '../common/version';
 const name = `${prefix}-dropdown-menu`;
 
 
-export default uniComponent({
-  name,
-  options: {
-    styleIsolation: 'shared',
-  },
-  externalClasses: [
-    `${prefix}-class`,
-    `${prefix}-class-item`,
-    `${prefix}-class-label`,
-    `${prefix}-class-icon`,
-  ],
-  mixins: [ParentMixin(RELATION_MAP.DropdownItem)],
+export default {
   components: {
     TIcon,
   },
-  props: {
-    ...props,
-  },
-  emits: ['close', 'open'],
-  data() {
-    return {
-      prefix,
-      classPrefix: name,
-      menus: null,
-      activeIdx: -1,
-      bottom: 0,
-      iArrowIcon: {
-        name: props.arrowIcon.default,
-      },
-      tools,
-    };
-  },
-  watch: {
-    arrowIcon: {
-      handler(v) {
-        this.iArrowIcon = calcIcon(v);
-      },
-      immediate: true,
+  ...uniComponent({
+    name,
+    options: {
+      styleIsolation: 'shared',
     },
-
-    activeIdx(v) {
-      this.$emit(v === -1 ? 'close' : 'open');
+    externalClasses: [
+      `${prefix}-class`,
+      `${prefix}-class-item`,
+      `${prefix}-class-label`,
+      `${prefix}-class-icon`,
+    ],
+    mixins: [ParentMixin(RELATION_MAP.DropdownItem)],
+    props: {
+      ...props,
     },
-  },
-  mounted() {
-    this.getAllItems();
-  },
-  methods: {
-    getIconTClass(index) {
-      return canUseVirtualHost() ? this.getIconRealClass(index) : '';
+    emits: ['close', 'open'],
+    data() {
+      return {
+        prefix,
+        classPrefix: name,
+        menus: null,
+        activeIdx: -1,
+        bottom: 0,
+        iArrowIcon: {
+          name: props.arrowIcon.default,
+        },
+        tools,
+      };
     },
-    getIconClass(index) {
-      return !canUseVirtualHost() ? this.getIconRealClass(index) : '';
+    watch: {
+      arrowIcon: {
+        handler(v) {
+          this.iArrowIcon = calcIcon(v);
+        },
+        immediate: true,
+      },
+
+      activeIdx(v) {
+        this.$emit(v === -1 ? 'close' : 'open');
+      },
     },
-    getIconRealClass(index) {
-      const { classPrefix, activeIdx, tClassIcon } = this;
-      return `${classPrefix}__icon ${classPrefix}__icon--${activeIdx == index ? 'active ' : ' '}${tClassIcon}`;
+    mounted() {
+      this.getAllItems();
     },
-    parseEventDynamicCode,
-    toggle(index) {
-      const { activeIdx, duration } = this;
-      const prevItem = this.children[activeIdx];
-      const currItem = this.children[index];
+    methods: {
+      getIconTClass(index) {
+        return canUseVirtualHost() ? this.getIconRealClass(index) : '';
+      },
+      getIconClass(index) {
+        return !canUseVirtualHost() ? this.getIconRealClass(index) : '';
+      },
+      getIconRealClass(index) {
+        const { classPrefix, activeIdx, tClassIcon } = this;
+        return `${classPrefix}__icon ${classPrefix}__icon--${activeIdx == index ? 'active ' : ' '}${tClassIcon}`;
+      },
+      parseEventDynamicCode,
+      toggle(index) {
+        const { activeIdx, duration } = this;
+        const prevItem = this.children[activeIdx];
+        const currItem = this.children[index];
 
-      if (currItem?.disabled) return;
+        if (currItem?.disabled) return;
 
-      if (activeIdx !== -1) {
-        prevItem.$emit('close');
-        prevItem.show = false;
+        if (activeIdx !== -1) {
+          prevItem.$emit('close');
+          prevItem.show = false;
 
-        setTimeout(() => {
-          prevItem.$emit('closed');
-        }, duration);
-      }
+          setTimeout(() => {
+            prevItem.$emit('closed');
+          }, duration);
+        }
 
-      if (index == null || activeIdx === index) {
-        this.activeIdx = -1;
-      } else {
-        currItem.$emit('open');
-        this.activeIdx = index;
+        if (index == null || activeIdx === index) {
+          this.activeIdx = -1;
+        } else {
+          currItem.$emit('open');
+          this.activeIdx = index;
 
-        currItem.show = true;
+          currItem.show = true;
 
-        setTimeout(() => {
-          currItem.$emit('opened');
-        }, duration);
-      }
-    },
-    getAllItems() {
-      const menus = this.children?.map(data => ({
-        label: data.label || data.computedLabel,
-        disabled: data.disabled,
-      }));
+          setTimeout(() => {
+            currItem.$emit('opened');
+          }, duration);
+        }
+      },
+      getAllItems() {
+        const menus = this.children?.map(data => ({
+          label: data.label || data.computedLabel,
+          disabled: data.disabled,
+        }));
 
-      this.menus = menus;
-    },
-    handleToggle(index) {
-      this.toggle(index);
-    },
+        this.menus = menus;
+      },
+      handleToggle(index) {
+        this.toggle(index);
+      },
 
-    noop() {},
-  },
-});
+      noop() {},
+    },
+  }),
+};
 </script>
 <style scoped src="./dropdown-menu.css"></style>
 <style scoped>

package/dist/empty/empty.vue

@@ -1,6 +1,6 @@
 <template>
   <view
-    :style="tools._style([customStyle])"
+    :style="'' + tools._style([customStyle])"
     :class="[
       tClass,
       classPrefix
@@ -73,37 +73,37 @@ import { canUseVirtualHost } from '../common/version';
 const name = `${prefix}-empty`;
 
 
-export default uniComponent({
-  name,
-  options: {
-    styleIsolation: 'shared',
-  },
-  externalClasses: [
-    `${prefix}-class`,
-    `${prefix}-class-description`,
-    `${prefix}-class-image`,
-    `${prefix}-class-actions`,
-  ],
+export default {
   components: {
     TIcon,
     TImage,
   },
-  props: {
-    ...props,
-  },
-  data() {
-    return {
-      prefix,
-      classPrefix: name,
+  ...uniComponent({
+    name,
+    options: {
+      styleIsolation: 'shared',
+    },
+    externalClasses: [
+      `${prefix}-class`,
+      `${prefix}-class-description`,
+      `${prefix}-class-image`,
+      `${prefix}-class-actions`,
+    ],
+    props: {
+      ...props,
+    },
+    data() {
+      return {
+        prefix,
+        classPrefix: name,
 
-      iconName: '',
-      iconData: {},
+        iconName: '',
+        iconData: {},
 
-      tools,
-    };
-  },
-  computed: {
-    iconTClass() {
+        tools,
+      };
+    },
+    computed: { iconTClass() {
       return canUseVirtualHost() ? this.iconRealClass : '';
     },
     iconClass() {
@@ -113,26 +113,27 @@ export default uniComponent({
       const { classPrefix, iconData } = this;
       return `${classPrefix}__icon ${classPrefix}__icon--${iconData.activeIdx == iconData.index ? 'active ' : ' '}`;
     },
-  },
-  watch: {
-    icon: {
-      handler(t) {
-        const obj = setIcon('icon', t, '');
+    },
+    watch: {
+      icon: {
+        handler(t) {
+          const obj = setIcon('icon', t, '');
 
-        Object.keys(obj).forEach((key) => {
-          this[key] = obj[key];
-        });
+          Object.keys(obj).forEach((key) => {
+            this[key] = obj[key];
+          });
+        },
+        immediate: true,
       },
-      immediate: true,
-    },
 
-  },
-  mounted() {
+    },
+    mounted() {
 
-  },
-  methods: {
+    },
+    methods: {
 
-  },
-});
+    },
+  }),
+};
 </script>
 <style scoped src="./empty.css"></style>

package/dist/fab/fab.vue

@@ -18,7 +18,7 @@
         :t-id="buttonData.tId"
         :custom-style="buttonData.style || ''"
         :block="buttonData.block"
-        :class="getActionClass(classPrefix, buttonData.buttonLayout) || ''"
+        :class="'' + getActionClass(classPrefix, buttonData.buttonLayout) || ''"
         :t-class="buttonData.tClass"
         :disabled="buttonData.disabled"
         :data-type="'action'"
@@ -63,7 +63,7 @@
   <view
     v-else
     :class="[classPrefix, tClass]"
-    :style="tools._style(['right: 16px; bottom: 32px;', customStyle])"
+    :style="'' + tools._style(['right: 16px; bottom: 32px;', customStyle])"
   >
     <slot v-if="!buttonData || !buttonData.content && !buttonData.icon" />
     <t-button
@@ -71,7 +71,7 @@
       :t-id="buttonData.tId"
       :custom-style="buttonData.style || ''"
       :block="buttonData.block"
-      :class="getActionClass(classPrefix, buttonData.buttonLayout) || ''"
+      :class="'' + getActionClass(classPrefix, buttonData.buttonLayout) || ''"
       :t-class="buttonData.tClass"
       :disabled="buttonData.disabled"
       :data-type="'action'"
@@ -132,105 +132,107 @@ const baseButtonProps = {
   tClass: `${prefix}-fab__button`,
 };
 
-export default uniComponent({
-  name,
-  options: {
-    styleIsolation: 'shared',
-  },
-  externalClasses: [`${prefix}-class`, `${prefix}-class-button`],
-  mixins: [useCustomNavbar],
+export default {
   components: {
     TButton,
     TDraggable,
   },
-  props: {
-    ...props,
-  },
-  emits: [
-    'move',
-    'start',
-    'end',
-  ],
-  data() {
-    return {
-      prefix,
-      classPrefix: name,
-      moveStyle: null,
-      tools,
-      systemInfo: getWindowInfo(),
-    };
-  },
-  computed: {
-    buttonData() {
+  ...uniComponent({
+    name,
+    options: {
+      styleIsolation: 'shared',
+    },
+    externalClasses: [`${prefix}-class`, `${prefix}-class-button`],
+    mixins: [useCustomNavbar],
+    props: {
+      ...props,
+    },
+    emits: [
+      'move',
+      'start',
+      'end',
+    ],
+    data() {
       return {
-        ...baseButtonProps,
-        shape: this.text ? 'round' : 'circle',
-        ...this.buttonProps,
-        icon: this.icon,
-        content: this.text,
-        ariaLabel: this.ariaLabel,
+        prefix,
+        classPrefix: name,
+        moveStyle: null,
+        tools,
+        systemInfo: getWindowInfo(),
       };
     },
-  },
-  watch: {
-    icon: 'computedSize',
-    ariaLabel: 'computedSize',
-    yBounds: 'computedSize',
-    buttonProps: 'computedSize',
-    text: {
-      handler(val) {
-        this.content = val;
-        this.computedSize();
+    computed: {
+      buttonData() {
+        return {
+          ...baseButtonProps,
+          shape: this.text ? 'round' : 'circle',
+          ...this.buttonProps,
+          icon: this.icon,
+          content: this.text,
+          ariaLabel: this.ariaLabel,
+        };
       },
-      immediate: true,
-    },
-  },
-  methods: {
-    onTplButtonTap(e) {
-      this.$emit('click', { e  });
     },
-    onStart(t) {
-      this.$emit('drag-start', t);
+    watch: {
+      icon: 'computedSize',
+      ariaLabel: 'computedSize',
+      yBounds: 'computedSize',
+      buttonProps: 'computedSize',
+      text: {
+        handler(val) {
+          this.content = val;
+          this.computedSize();
+        },
+        immediate: true,
+      },
     },
-    onMove(e) {
-      const {
-        yBounds = [],
-        distanceTop,
-        systemInfo,
-      } = this;
+    methods: {
+      onTplButtonTap(e) {
+        this.$emit('click', { e  });
+      },
+      onStart(t) {
+        this.$emit('drag-start', t);
+      },
+      onMove(e) {
+        const {
+          yBounds = [],
+          distanceTop,
+          systemInfo,
+        } = this;
 
-      const { x, y, rect } = e;
-      const maxX = systemInfo.windowWidth - rect.width; // 父容器宽度 - 拖动元素宽度
-      const maxY = systemInfo.windowHeight - Math.max(distanceTop, unitConvert(yBounds[0])) - rect.height; // 父容器高度 - 拖动元素高度
-      const right = Math.max(0, Math.min(x, maxX));
-      const bottom = Math.max(0, unitConvert(yBounds[1]), Math.min(y, maxY));
+        const { x, y, rect } = e;
+        const maxX = systemInfo.windowWidth - rect.width; // 父容器宽度 - 拖动元素宽度
+        const maxY = systemInfo.windowHeight - Math.max(distanceTop, unitConvert(yBounds[0])) - rect.height; // 父容器高度 - 拖动元素高度
+        const right = Math.max(0, Math.min(x, maxX));
+        const bottom = Math.max(0, unitConvert(yBounds[1]), Math.min(y, maxY));
 
 
-      this.moveStyle = `right: ${right}px; bottom: ${bottom}px;`;
-    },
-    onEnd(t) {
-      this.$emit('drag-end', t);
-    },
-    computedSize() {
-      if (!this.draggable) return;
+        this.moveStyle = `right: ${right}px; bottom: ${bottom}px;`;
+      },
+      onEnd(t) {
+        this.$emit('drag-end', t);
+      },
+      computedSize() {
+        if (!this.draggable) return;
 
-      setTimeout(() => {
-        const insChild = this.$refs.draggableTemplate?.$refs?.draggable;
+        setTimeout(() => {
+          const insChild = this.$refs.draggableTemplate?.$refs?.draggable;
 
 
-        // button 更新时，重新获取其尺寸
-        if (this?.yBounds?.[1]) {
-          this.moveStyle = `bottom: ${unitConvert(this.yBounds[1])}px`;
-          insChild?.computedRect();
-        } else {
-          insChild?.computedRect();
-        }
-      });
-    },
-    getActionClass(a, b) {
-      return `${a}-${b}`;
+          // button 更新时，重新获取其尺寸
+          if (this?.yBounds?.[1]) {
+            this.moveStyle = `bottom: ${unitConvert(this.yBounds[1])}px`;
+            insChild?.computedRect();
+          } else {
+            insChild?.computedRect();
+          }
+        });
+      },
+      getActionClass(a, b) {
+        return `${a}-${b}`;
+      },
     },
-  },
-});
+  }),
+};
 </script>
 <style scoped src="./fab.css"></style>

package/dist/footer/footer.vue

@@ -1,6 +1,6 @@
 <template>
   <view
-    :style="tools._style([customStyle])"
+    :style="'' + tools._style([customStyle])"
     :class="[
       classPrefix,
       tClass
@@ -73,43 +73,45 @@ import tools from '../common/utils.wxs';
 const name = `${prefix}-footer`;
 
 
-export default uniComponent({
-  name,
-  options: {
-    styleIsolation: 'shared',
-  },
-  externalClasses: [
-    `${prefix}-class`,
-  ],
+export default {
   components: {
     TImage,
   },
-  props: {
-    ...props,
-  },
-  data() {
-    return {
-      prefix,
-      classPrefix: name,
-      tools,
-    };
-  },
-  computed: {
-    iconCustomStyle() {
-      return tools._style({
-        width: 'var(--td-footer-logo-icon-width, 24px)',
-        height: 'var(--td-footer-logo-icon-height, 24px)',
-        marginRight: 'var(--td-footer-logo-icon-margin-right, var(--td-spacer, 8px))',
-      });
+  ...uniComponent({
+    name,
+    options: {
+      styleIsolation: 'shared',
     },
-    titleUrlCustomStyle() {
-      return tools._style({
-        width: 'var(--td-footer-logo-title-url-width, 128px)',
-      });
+    externalClasses: [
+      `${prefix}-class`,
+    ],
+    props: {
+      ...props,
     },
-  },
-  methods: {
-  },
-});
+    data() {
+      return {
+        prefix,
+        classPrefix: name,
+        tools,
+      };
+    },
+    computed: {
+      iconCustomStyle() {
+        return tools._style({
+          width: 'var(--td-footer-logo-icon-width, 24px)',
+          height: 'var(--td-footer-logo-icon-height, 24px)',
+          marginRight: 'var(--td-footer-logo-icon-margin-right, var(--td-spacer, 8px))',
+        });
+      },
+      titleUrlCustomStyle() {
+        return tools._style({
+          width: 'var(--td-footer-logo-title-url-width, 128px)',
+        });
+      },
+    },
+    methods: {
+    },
+  }),
+};
 </script>
 <style scoped src="./footer.css"></style>