@tdesign/uniapp 0.7.2 → 0.8.0

package/dist/demo/demo.vue

@@ -86,6 +86,7 @@ export default {
       default: false,
     },
   },
+
   data() {
     return {
 

package/dist/dialog/dialog.vue

@@ -64,7 +64,7 @@
         <slot name="middle" />
         <view
           :class="
-            tools.cls(classPrefix + '__footer', [
+            '' + tools.cls(classPrefix + '__footer', [
               ['column', dataButtonLayout === 'vertical'],
               ['full', buttonVariant == 'text' && (!dataActions || dataActions.length == 0)]
             ])
@@ -105,14 +105,14 @@
               :app-parameter="actionItem.appParameter"
               :show-message-card="actionItem.showMessageCard"
               :aria-label="actionItem.ariaLabel"
-              @click="onTplButtonTap($event, { type: 'action', extra: index })"
-              @getuserinfo="onTplButtonTap($event, { type: 'action', extra: index })"
-              @contact="onTplButtonTap($event, { type: 'action', extra: index })"
-              @getphonenumber="onTplButtonTap($event, { type: 'action', extra: index })"
-              @error="onTplButtonTap($event, { type: 'action', extra: index })"
-              @opensetting="onTplButtonTap($event, { type: 'action', extra: index })"
-              @launchapp="onTplButtonTap($event, { type: 'action', extra: index })"
-              @agreeprivacyauthorization="onTplButtonTap($event, { type: 'action', extra: index })"
+              @click="(e) => onTplButtonTap(e, { type: 'action', extra: index })"
+              @getuserinfo="(e) => onTplButtonTap(e, { type: 'action', extra: index })"
+              @contact="(e) => onTplButtonTap(e, { type: 'action', extra: index })"
+              @getphonenumber="(e) => onTplButtonTap(e, { type: 'action', extra: index })"
+              @error="(e) => onTplButtonTap(e, { type: 'action', extra: index })"
+              @opensetting="(e) => onTplButtonTap(e, { type: 'action', extra: index })"
+              @launchapp="(e) => onTplButtonTap(e, { type: 'action', extra: index })"
+              @agreeprivacyauthorization="(e) => onTplButtonTap(e, { type: 'action', extra: index })"
             >
               <slot v-if="actionItem.useDefaultSlot || false" />
             </t-button>
@@ -151,14 +151,14 @@
               :app-parameter="innerCancel.appParameter"
               :show-message-card="innerCancel.showMessageCard"
               :aria-label="innerCancel.ariaLabel"
-              @click="onCancel($event, { type: 'action', extra: 0 })"
-              @getuserinfo="onCancel($event, { type: 'action', extra: 0 })"
-              @contact="onCancel($event, { type: 'action', extra: 0 })"
-              @getphonenumber="onCancel($event, { type: 'action', extra: 0 })"
-              @error="onCancel($event, { type: 'action', extra: 0 })"
-              @opensetting="onCancel($event, { type: 'action', extra: 0 })"
-              @launchapp="onCancel($event, { type: 'action', extra: 0 })"
-              @agreeprivacyauthorization="onCancel($event, { type: 'action', extra: 0 })"
+              @click="(e) => onCancel(e, { type: 'action', extra: 0 })"
+              @getuserinfo="(e) => onCancel(e, { type: 'action', extra: 0 })"
+              @contact="(e) => onCancel(e, { type: 'action', extra: 0 })"
+              @getphonenumber="(e) => onCancel(e, { type: 'action', extra: 0 })"
+              @error="(e) => onCancel(e, { type: 'action', extra: 0 })"
+              @opensetting="(e) => onCancel(e, { type: 'action', extra: 0 })"
+              @launchapp="(e) => onCancel(e, { type: 'action', extra: 0 })"
+              @agreeprivacyauthorization="(e) => onCancel(e, { type: 'action', extra: 0 })"
             >
               <slot v-if="innerCancel.useDefaultSlot || false" />
             </t-button>
@@ -197,14 +197,14 @@
               :app-parameter="innerConfirm.appParameter"
               :show-message-card="innerConfirm.showMessageCard"
               :aria-label="innerConfirm.ariaLabel"
-              @click="onConfirm($event, { type: 'action', extra: 0 })"
-              @getuserinfo="onConfirm($event, { type: 'action', extra: 0 })"
-              @contact="onConfirm($event, { type: 'action', extra: 0 })"
-              @getphonenumber="onConfirm($event, { type: 'action', extra: 0 })"
-              @error="onTplButtonConfirmonTap($event, { type: 'action', extra: 0 })"
-              @opensetting="onConfirm($event, { type: 'action', extra: 0 })"
-              @launchapp="onConfirm($event, { type: 'action', extra: 0 })"
-              @agreeprivacyauthorization="onConfirm($event, { type: 'action', extra: 0 })"
+              @click="(e) => onConfirm(e, { type: 'action', extra: 0 })"
+              @getuserinfo="(e) => onConfirm(e, { type: 'action', extra: 0 })"
+              @contact="(e) => onConfirm(e, { type: 'action', extra: 0 })"
+              @getphonenumber="(e) => onConfirm(e, { type: 'action', extra: 0 })"
+              @error="(e) => onTplButtonConfirmonTap(e, { type: 'action', extra: 0 })"
+              @opensetting="(e) => onConfirm(e, { type: 'action', extra: 0 })"
+              @launchapp="(e) => onConfirm(e, { type: 'action', extra: 0 })"
+              @agreeprivacyauthorization="(e) => onConfirm(e, { type: 'action', extra: 0 })"
             >
               <slot v-if="innerConfirm.useDefaultSlot || false" />
             </t-button>
@@ -222,7 +222,7 @@ import TButton from '../button/button';
 import { uniComponent } from '../common/src/index';
 import { prefix } from '../common/config';
 import props from './props';
-import { toCamel, coalesce } from '../common/utils';
+import { toCamel, coalesce, toPascal } from '../common/utils';
 import { isObject } from '../common/validator';
 import useCustomNavbar from '../mixins/using-custom-navbar';
 import tools from '../common/utils.wxs';
@@ -233,188 +233,191 @@ import { canUseVirtualHost } from '../common/version';
 const name = `${prefix}-dialog`;
 
 
-export default uniComponent({
-  name,
-  options: {
-    styleIsolation: 'shared',
-  },
-  externalClasses: [
-    `${prefix}-class`,
-    `${prefix}-class-content`,
-    `${prefix}-class-confirm`,
-    `${prefix}-class-cancel`,
-    `${prefix}-class-action`,
-  ],
-  mixins: [getFunctionalMixin(props), useCustomNavbar],
+export default {
   components: {
     TPopup,
     TIcon,
     TButton,
   },
-  props: {
-    ...props,
-  },
-  data() {
-    return {
-      prefix,
-      classPrefix: name,
-      buttonVariant: 'text',
-      tools,
+  ...uniComponent({
+    name,
+    options: {
+      styleIsolation: 'shared',
+    },
+    externalClasses: [
+      `${prefix}-class`,
+      `${prefix}-class-content`,
+      `${prefix}-class-confirm`,
+      `${prefix}-class-cancel`,
+      `${prefix}-class-action`,
+    ],
+    mixins: [getFunctionalMixin(props), useCustomNavbar],
+    props: {
+      ...props,
+    },
+    data() {
+      return {
+        prefix,
+        classPrefix: name,
+        buttonVariant: 'text',
+        tools,
 
-      innerConfirm: null,
-      innerCancel: null,
-      useVirtualHost: canUseVirtualHost(),
-    };
-  },
-  watch: {
-    dataConfirmBtn: {
-      handler() {
-        this.onWatchBtn(this.dataConfirmBtn, this.dataCancelBtn);
-      },
-      immediate: true,
+        innerConfirm: null,
+        innerCancel: null,
+        useVirtualHost: canUseVirtualHost(),
+      };
     },
-    dataCancelBtn: {
-      handler() {
-        this.onWatchBtn(this.dataConfirmBtn, this.dataCancelBtn);
+    watch: {
+      dataConfirmBtn: {
+        handler() {
+          this.onWatchBtn(this.dataConfirmBtn, this.dataCancelBtn);
+        },
+        immediate: true,
+      },
+      dataCancelBtn: {
+        handler() {
+          this.onWatchBtn(this.dataConfirmBtn, this.dataCancelBtn);
+        },
+        immediate: true,
       },
-      immediate: true,
     },
-  },
-  methods: {
-    coalesce,
-    getActionClass,
-    onWatchBtn(confirm, cancel) {
-      const { prefix, classPrefix, dataButtonLayout } = this;
-      const rect = { buttonVariant: 'text' };
-      const useBaseVariant = [confirm, cancel].some(item => isObject(item) && item.variant && item.variant !== 'text');
-      const buttonMap = { confirm, cancel };
-      const cls = [`${classPrefix}__button`];
-      const externalCls = [];
+    methods: {
+      coalesce,
+      getActionClass,
+      onWatchBtn(confirm, cancel) {
+        const { prefix, classPrefix, dataButtonLayout } = this;
+        const rect = { buttonVariant: 'text' };
+        const useBaseVariant = [confirm, cancel].some(item => isObject(item) && item.variant && item.variant !== 'text');
+        const buttonMap = { confirm, cancel };
+        const cls = [`${classPrefix}__button`];
+        const externalCls = [];
 
-      if (useBaseVariant) {
-        rect.buttonVariant = 'base';
-        cls.push(`${classPrefix}__button--${dataButtonLayout}`);
-      } else {
-        cls.push(`${classPrefix}__button--text`);
-        externalCls.push(`${classPrefix}-button`);
-      }
+        if (useBaseVariant) {
+          rect.buttonVariant = 'base';
+          cls.push(`${classPrefix}__button--${dataButtonLayout}`);
+        } else {
+          cls.push(`${classPrefix}__button--text`);
+          externalCls.push(`${classPrefix}-button`);
+        }
 
-      const useVirtualHost = canUseVirtualHost();
+        const useVirtualHost = canUseVirtualHost();
 
-      Object.keys(buttonMap).forEach((key) => {
-        const btn = buttonMap[key];
-        const rootClass = [...cls, `${classPrefix}__button--${key}`];
-        const tClass = [...externalCls, this[toCamel(`${prefix}-class-${key}`)], ...rootClass].join(' ');
+        Object.keys(buttonMap).forEach((key) => {
+          const btn = buttonMap[key];
+          const rootClass = [...cls, `${classPrefix}__button--${key}`];
+          const tClass = [...externalCls, this[toCamel(`${prefix}-class-${key}`)], ...rootClass].join(' ');
 
-        const base = {
-          block: true,
-          rootClass,
+          const base = {
+            block: true,
+            rootClass,
 
-          tClass: useVirtualHost ? tClass : '',
-          class: !useVirtualHost ? tClass : '',
+            tClass: useVirtualHost ? tClass : '',
+            class: !useVirtualHost ? tClass : '',
 
-          variant: rect.buttonVariant,
-          openType: '',
-        };
+            variant: rect.buttonVariant,
+            openType: '',
+          };
 
-        if (key === 'cancel' && rect.buttonVariant === 'base') {
-          base.theme = 'light';
-        }
+          if (key === 'cancel' && rect.buttonVariant === 'base') {
+            base.theme = 'light';
+          }
+          const parsedKey = `inner${toPascal(key)}`;
 
-        if (typeof btn === 'string') {
-          rect[`_${key}`] = { ...base, content: btn };
-        } else if (btn && typeof btn === 'object') {
-          rect[`_${key}`] = { ...base, ...btn };
-        } else {
-          rect[`_${key}`] = null;
-        }
-      });
+          if (typeof btn === 'string') {
+            rect[`${parsedKey}`] = { ...base, content: btn };
+          } else if (btn && typeof btn === 'object') {
+            rect[`${parsedKey}`] = { ...base, ...btn };
+          } else {
+            rect[`${parsedKey}`] = null;
+          }
+        });
 
-      Object.keys(rect).forEach((key) => {
-        this[key] = rect[key];
-      });
-    },
-    onTplButtonTap(e, { type, extra }) {
-      const evtType = e.type;
-      const button = this[`_${type}`];
-      const cbName = `bind${evtType}`;
+        Object.keys(rect).forEach((key) => {
+          this[key] = rect[key];
+        });
+      },
+      onTplButtonTap(e, { type, extra }) {
+        const evtType = e.type;
+        const button = this[`_${type}`];
+        const cbName = `bind${evtType}`;
 
-      if (type === 'action') {
-        this.onActionTap(extra);
-        return;
-      }
+        if (type === 'action') {
+          this.onActionTap(extra);
+          return;
+        }
 
-      if (typeof button?.[cbName] === 'function') {
-        const closeFlag = button[cbName](e);
-        if (closeFlag) {
-          this.close();
+        if (typeof button?.[cbName] === 'function') {
+          const closeFlag = button[cbName](e);
+          if (closeFlag) {
+            this.close();
+          }
         }
-      }
 
-      const hasOpenType = !!button?.openType;
-      if (!hasOpenType && ['confirm', 'cancel'].includes(type)) {
-        this[toCamel(`on-${type}`)]?.(type);
-      }
+        const hasOpenType = !!button?.openType;
+        if (!hasOpenType && ['confirm', 'cancel'].includes(type)) {
+          this[toCamel(`on-${type}`)]?.(type);
+        }
 
-      if (evtType !== 'click') {
-        const success = e.detail?.errMsg?.indexOf('ok') > -1;
-        this.$emit(success ? 'open-type-event' : 'open-type-error-event', e.detail);
-      }
-    },
+        if (evtType !== 'click') {
+          const success = e.detail?.errMsg?.indexOf('ok') > -1;
+          this.$emit(success ? 'open-type-event' : 'open-type-error-event', e.detail);
+        }
+      },
 
-    onConfirm(e) {
-      this.$emit('confirm', { e });
+      onConfirm(e) {
+        this.$emit('confirm', { e });
 
-      if (this._onConfirm) {
-        this._onConfirm({ trigger: 'confirm' });
-        this.close();
-      }
-    },
+        if (this._onConfirm) {
+          this._onConfirm({ trigger: 'confirm' });
+          this.close();
+        }
+      },
 
-    onCancel(e) {
-      const trigger = { trigger: 'cancel' };
+      onCancel(e) {
+        const trigger = { trigger: 'cancel' };
 
-      this.$emit('cancel', { e });
-      this.$emit('close', trigger);
+        this.$emit('cancel', { e });
+        this.$emit('close', trigger);
 
-      if (this._onCancel) {
-        this._onCancel(trigger);
-        this.close();
-      }
-    },
+        if (this._onCancel) {
+          this._onCancel(trigger);
+          this.close();
+        }
+      },
 
-    onClose() {
-      const trigger = { trigger: 'close-btn' };
+      onClose() {
+        const trigger = { trigger: 'close-btn' };
 
-      this.$emit('close', trigger);
-      this._onCancel?.(trigger);
-      this.close();
-    },
+        this.$emit('close', trigger);
+        this._onCancel?.(trigger);
+        this.close();
+      },
 
-    close() {
-      this.dataVisible = false;
-    },
+      close() {
+        this.dataVisible = false;
+      },
 
-    overlayClick(e) {
-      this.$emit('overlay-click', { e });
+      overlayClick(e) {
+        this.$emit('overlay-click', { e });
 
-      if (this.dataCloseOnOverlayClick) {
-        const trigger = { trigger: 'overlay' };
+        if (this.dataCloseOnOverlayClick) {
+          const trigger = { trigger: 'overlay' };
 
-        this.$emit('close', trigger);
-        this._onCancel?.(trigger);
-        this.close();
-      }
-    },
+          this.$emit('close', trigger);
+          this._onCancel?.(trigger);
+          this.close();
+        }
+      },
 
-    onActionTap(index) {
-      this.$emit('action', { index });
-      if (this._onAction) {
-        this._onAction({ index });
-        this.close();
-      }
+      onActionTap(index) {
+        this.$emit('action', { index });
+        if (this._onAction) {
+          this._onAction({ index });
+          this.close();
+        }
+      },
     },
-  },
-});
+  }),
+};
 </script>
 <style scoped src="./dialog.css"></style>

package/dist/divider/divider.vue

@@ -6,7 +6,7 @@
         tClass,
         classPrefix + '--' + layout + ' ' + classPrefix + '--' + align + ' ' + (dashed ? classPrefix + '--dashed' : '')
       ]"
-      :style="tools._style([dividerStyle, customStyle])"
+      :style="'' + tools._style([dividerStyle, customStyle])"
     >
       <view
         :class="[
@@ -35,43 +35,45 @@ import tools from '../common/utils.wxs';
 const name = `${prefix}-divider`;
 
 
-export default uniComponent({
-  name,
-  options: {
-    styleIsolation: 'shared',
-  },
-  externalClasses: [
-    `${prefix}-class`,
-    `${prefix}-class-content`,
-  ],
-  props: {
-    ...props,
-  },
-  data() {
-    return {
-      prefix,
-      classPrefix: name,
-      tools,
-      dividerStyle: '',
-    };
-  },
-  watch: {
-    lineColor: {
-      handler() {
-        this.setStyle();
+export default {
+  ...uniComponent({
+    name,
+    options: {
+      styleIsolation: 'shared',
+    },
+    externalClasses: [
+      `${prefix}-class`,
+      `${prefix}-class-content`,
+    ],
+    props: {
+      ...props,
+    },
+    data() {
+      return {
+        prefix,
+        classPrefix: name,
+        tools,
+        dividerStyle: '',
+      };
+    },
+    watch: {
+      lineColor: {
+        handler() {
+          this.setStyle();
+        },
+        immediateU: true,
       },
-      immediateU: true,
     },
-  },
-  methods: {
-    setStyle() {
-      const {
-        lineColor,
-      } = this;
-      const dividerStyle = `${lineColor ? `border-color: ${lineColor};` : ''}`;
-      this.dividerStyle = dividerStyle;
+    methods: {
+      setStyle() {
+        const {
+          lineColor,
+        } = this;
+        const dividerStyle = `${lineColor ? `border-color: ${lineColor};` : ''}`;
+        this.dividerStyle = dividerStyle;
+      },
     },
-  },
-});
+  }),
+};
 </script>
 <style scoped src="./divider.css"></style>

package/dist/draggable/draggable.vue

@@ -1,7 +1,7 @@
 <template>
   <view
     :class="[classPrefix, tClass]"
-    :style="tools._style([customStyle])"
+    :style="'' + tools._style([customStyle])"
     @touchstart="onTouchStart"
     @touchmove.stop.prevent="onTouchMove"
     @touchend="onTouchEnd"
@@ -19,72 +19,74 @@ import tools from '../common/utils.wxs';
 
 const name = `${prefix}-draggable`;
 
-export default uniComponent({
-  name,
-  options: {
-    styleIsolation: 'shared',
-  },
-  props: {
-    ...props,
-  },
-  emits: [
-    'move',
-    'start',
-    'end',
-  ],
-  data() {
-    return {
-      prefix,
-      classPrefix: name,
-      tools,
-      systemInfo: getWindowInfo(),
-    };
-  },
-  mounted() {
-    this.computedRect();
-  },
-  methods: {
-    onTouchStart(e) {
-      const { systemInfo } = this;
-      if (this.direction === 'none') return;
-      this.startX = e.touches[0].clientX + systemInfo.windowWidth - this.rect.right;
-      this.startY = e.touches[0].clientY + systemInfo.windowHeight - this.rect.bottom;
-      this.$emit('start', { startX: this.startX, startY: this.startY, rect: this.rect, e });
+export default {
+  ...uniComponent({
+    name,
+    options: {
+      styleIsolation: 'shared',
     },
+    props: {
+      ...props,
+    },
+    emits: [
+      'move',
+      'start',
+      'end',
+    ],
+    data() {
+      return {
+        prefix,
+        classPrefix: name,
+        tools,
+        systemInfo: getWindowInfo(),
+      };
+    },
+    mounted() {
+      this.computedRect();
+    },
+    methods: {
+      onTouchStart(e) {
+        const { systemInfo } = this;
+        if (this.direction === 'none') return;
+        this.startX = e.touches[0].clientX + systemInfo.windowWidth - this.rect.right;
+        this.startY = e.touches[0].clientY + systemInfo.windowHeight - this.rect.bottom;
+        this.$emit('start', { startX: this.startX, startY: this.startY, rect: this.rect, e });
+      },
 
-    onTouchMove(e) {
-      const { systemInfo } = this;
+      onTouchMove(e) {
+        const { systemInfo } = this;
 
-      if (this.direction === 'none') return;
-      let x = this.startX - e.touches[0].clientX; // x轴移动偏移量
-      let y = this.startY - e.touches[0].clientY; // y轴移动偏移量
+        if (this.direction === 'none') return;
+        let x = this.startX - e.touches[0].clientX; // x轴移动偏移量
+        let y = this.startY - e.touches[0].clientY; // y轴移动偏移量
 
 
-      if (this.direction === 'vertical') {
-        x = systemInfo.windowWidth - this.rect.right;
-      }
-      if (this.direction === 'horizontal') {
-        y = systemInfo.windowHeight - this.rect.bottom;
-      }
+        if (this.direction === 'vertical') {
+          x = systemInfo.windowWidth - this.rect.right;
+        }
+        if (this.direction === 'horizontal') {
+          y = systemInfo.windowHeight - this.rect.bottom;
+        }
 
-      this.$emit('move', { x, y, rect: this.rect, e });
-    },
+        this.$emit('move', { x, y, rect: this.rect, e });
+      },
 
-    async onTouchEnd(e) {
-      if (this.direction === 'none') return;
-      await this.computedRect();
-      this.$emit('end', { rect: this.rect, e });
-    },
+      async onTouchEnd(e) {
+        if (this.direction === 'none') return;
+        await this.computedRect();
+        this.$emit('end', { rect: this.rect, e });
+      },
 
-    async computedRect() {
-      this.rect = { right: 0, bottom: 0, width: 0, height: 0 };
-      try {
-        this.rect = await getRect(this, `.${this.classPrefix}`);
-      } catch (e) {
+      async computedRect() {
+        this.rect = { right: 0, bottom: 0, width: 0, height: 0 };
+        try {
+          this.rect = await getRect(this, `.${this.classPrefix}`);
+        } catch (e) {
         // ignore reject
-      }
+        }
+      },
     },
-  },
-});
+  }),
+};
 </script>
 <style scoped src="./draggable.css"></style>