@tdesign/uniapp 0.7.3 → 0.8.1

package/dist/locale/zh_TW.ts

@@ -0,0 +1,132 @@
+/* eslint-disable no-template-curly-in-string */
+// 文件有效，为国际化做准备
+import '../npm/dayjs/esm/locale/zh-tw';
+
+export default {
+  actionSheet: {
+    cancel: '取消',
+  },
+  calendar: {
+    title: '請選擇日期',
+    confirm: '確認',
+    weekdays: ['日', '一', '二', '三', '四', '五', '六'],
+    monthTitle: '{year} 年 {month}',
+    months: ['1 月', '2 月', '3 月', '4 月', '5 月', '6 月', '7 月', '8 月', '9 月', '10 月', '11 月', '12 月'],
+  },
+  cascader: {
+    title: '標題',
+    placeholder: '選擇選項',
+  },
+  dropdownMenu: {
+    reset: '重置',
+    confirm: '確定',
+  },
+  dateTimePicker: {
+    dayjsLocale: 'zh-tw',
+    title: '選擇時間',
+    cancel: '取消',
+    confirm: '確定',
+    format: 'YYYY-MM-DD',
+    months: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
+    yearLabel: '年',
+    monthLabel: '月',
+    dateLabel: '日',
+    hourLabel: '時',
+    minuteLabel: '分',
+    secondLabel: '秒',
+  },
+  form: {
+    errorMessage: {
+      date: '請輸入正確的${name}',
+      url: '請輸入正確的${name}',
+      whitespace: '${name}不能為空',
+      required: '${name}必填',
+      max: '${name}字符長度不能超過 ${validate} 個字符，一個中文等於兩個字符',
+      min: '${name}字符長度不能少於 ${validate} 個字符，一個中文等於兩個字符',
+      len: '${name}字符長度必須是 ${validate}',
+      enum: '${name}只能是${validate}等',
+      idcard: '請輸入正確的${name}',
+      telnumber: '請輸入正確的${name}',
+      pattern: '請輸入正確的${name}',
+      validator: '${name}不符合要求',
+      boolean: '${name}數據類型必須是布林類型',
+      number: '${name}必須是數字',
+    },
+    colonText: '：',
+  },
+  picker: {
+    cancel: '取消',
+    confirm: '確認',
+  },
+  pullDownRefresh: {
+    loadingTexts: ['下拉刷新', '鬆手刷新', '正在刷新', '刷新完成'],
+  },
+  rate: {
+    texts: ['極差', '失望', '一般', '滿意', '驚喜'],
+    valueText: '{value} 分',
+    noValueText: '未評分',
+  },
+  tabBar: {
+    newsAriaLabel: '有新消息',
+    moreNewsAriaLabel: '有很多消息',
+    haveMoreNewsAriaLabel: '有 {value}+ 條消息',
+    haveNewsAriaLabel: '有 {value} 條消息',
+  },
+  table: {
+    empty: '暫無數據',
+  },
+  list: {
+    loading: '加載中...',
+    loadingMoreText: '點擊加載更多',
+    pulling: '下拉即可刷新...',
+    loosing: '釋放即可刷新...',
+    success: '刷新成功',
+  },
+  upload: {
+    progress: {
+      uploadingText: '上傳中...',
+      waitingText: '待上傳',
+      failText: '上傳失敗',
+      successText: '上傳成功',
+    },
+  },
+  guide: {
+    next: '下一步',
+    skip: '跳過',
+    finish: '完成',
+    back: '返回',
+  },
+  qrcode: {
+    expiredText: '二維碼過期',
+    refreshText: '點擊刷新',
+    scannedText: '已掃描',
+  },
+  attachments: {
+    status: {
+      pending: '上傳中...',
+      fail: '上傳失敗',
+    },
+  },
+  chatActionbar: {
+    actionBar: {
+      replay: '刷新',
+      copy: '複製',
+      good: '點讚',
+      bad: '點踩',
+      share: '分享',
+      quote: '引用',
+    },
+  },
+  chatSender: {
+    placeholder: '請輸入消息...',
+    sendText: '發送',
+    stopText: '停止',
+  },
+  chatThinking: {
+    status: {
+      pending: '正在思考中...',
+      complete: '已完成思考',
+      stop: '已停止思考',
+    },
+  },
+};

package/dist/message/README.md

@@ -8,7 +8,9 @@ isComponent: true
 
 ## 引入
 
-可在 `main.ts` 或在需要使用的页面或组件中引入。
+推荐使用 easycom 模式引入组件，配置后无需手动 import 即可直接在模板中使用 `<t-message />`。详细配置请参考 [快速开始](../getting-started)。
+
+如需手动引入：
 
 ```js
 import TMessage from '@tdesign/uniapp/message/message.vue';
@@ -16,10 +18,13 @@ import TMessage from '@tdesign/uniapp/message/message.vue';
 
 ### 引入 API
 
-若以 API 形式调用 Message，则需在页面 `page.js` 中引入组件 API：
+若以 API 形式调用 Message，则需在页面中引入组件 API：
 
 ```js
-import Message from '@tdesign/uniapp/message/index';
+// MessagePlugin 和 Message 均可使用
+import { MessagePlugin } from '@tdesign/uniapp';
+// 或
+// import { Message } from '@tdesign/uniapp';
 ```
 
 ### 组件类型

package/dist/message/message.vue

@@ -1,12 +1,12 @@
 <template>
   <view>
-    <TMessageItem
+    <t-message-item
       v-for="(item) in messageList"
       :key="item.id"
       :ref="item.id"
-      @close-btn-click="handleClose($event, { tagId: item.id })"
-      @link-click="handleLinkClick($event, { tagId: item.id })"
-      @duration-end="handleDurationEnd($event, { tagId: item.id })"
+      @close-btn-click="(e) => handleClose(e, { tagId: item.id })"
+      @link-click="(e) => handleLinkClick(e, { tagId: item.id })"
+      @duration-end="(e) => handleDurationEnd(e, { tagId: item.id })"
     >
       <template #icon>
         <slot
@@ -29,7 +29,7 @@
           name="close-btn"
         />
       </template>
-    </TMessageItem>
+    </t-message-item>
   </view>
 </template>
 
@@ -45,231 +45,239 @@ import { unitConvert } from '../common/utils';
 const SHOW_DURATION = 400;
 const name = `${prefix}-message`;
 
-export default uniComponent({
-  name,
-  options: {
-    styleIsolation: 'shared',
-  },
+export default {
   components: {
     TMessageItem,
   },
-  props: {
-    ...props,
-  },
-  data() {
-    return {
-      prefix,
-      classPrefix: name,
-      messageList: [],
-      instances: [],
-      index: 0,
-    };
-  },
-  watch: {
-    visible: {
-      handler(value) {
-        if (value) {
-          const data = Object.keys(props).reduce((acc, key) => ({
-            ...acc,
-            [key]: this[key],
-          }), {});
+  ...uniComponent({
+    name,
+    options: {
+      styleIsolation: 'shared',
+    },
+    props: {
+      ...props,
+    },
+    data() {
+      return {
+        prefix,
+        classPrefix: name,
+        messageList: [],
+        index: 0,
+      };
+    },
+    watch: {
+      visible: {
+        handler(value) {
+          if (value) {
+            const data = Object.keys(props).reduce((acc, key) => ({
+              ...acc,
+              [key]: this[key],
+            }), {});
 
-          this.setMessage(data, this.theme);
-        } else {
-          this.messageList = [];
-        }
+            this.setMessage(data, this.theme);
+          } else {
+            this.messageList = [];
+          }
+        },
+        immediate: true,
       },
-      immediate: true,
     },
-  },
 
-  pageLifetimes: {
-    show() {
-      this.hideAll();
+    pageLifetimes: {
+      show() {
+        this.hideAll();
+      },
     },
-  },
 
-  mounted() {
-  },
+    created() {
+      this.instances = [];
+    },
+    mounted() {
+    },
 
-  methods: {
+    methods: {
     /**
    * 设置消息信息
    * @param msg
    * @param theme
    */
-    setMessage(msg, theme = MessageType.info) {
-      let id = `${name}_${this.index}`;
-      if (msg.single) {
+      setMessage(msg, theme = MessageType.info) {
+        if (!this.instances) {
+          this.instances = [];
+        }
+
+        let id = `${name}_${this.index}`;
+        if (msg.single) {
         // 不能与外层的 ref 相同，否则抖音小程序报错
-        id = `${name}_inner`;
-      }
-      const gap = unitConvert(msg.gap || this.gap);
-      const msgObj = {
-        ...msg,
-        theme,
-        id,
-        gap,
-      };
-      const instanceIndex = this.instances.findIndex(x => x.id === id);
-      if (instanceIndex < 0) {
-        this.addMessage(msgObj);
-      } else {
-      // 更新消息
-        const instance = this.instances[instanceIndex];
-        const offsetHeight = this.getOffsetHeight(instanceIndex);
-        instance.resetData(() => {
-          Object.keys(msgObj).forEach((key) => {
-            instance[key] = msgObj[key];
-          });
-          setTimeout(() => {
-            instance.show.call(instance, offsetHeight);
+          id = `${name}_inner`;
+        }
+        const gap = unitConvert(msg.gap || this.gap);
+        const msgObj = {
+          ...msg,
+          theme,
+          id,
+          gap,
+        };
+        const instanceIndex = this.instances.findIndex(x => x.id === id);
+        if (instanceIndex < 0) {
+          this.addMessage(msgObj);
+        } else {
+          // 更新消息
+          const instance = this.instances[instanceIndex];
+          const offsetHeight = this.getOffsetHeight(instanceIndex);
+          instance.resetData(() => {
+            Object.keys(msgObj).forEach((key) => {
+              instance[key] = msgObj[key];
+            });
+            setTimeout(() => {
+              instance.show.call(instance, offsetHeight);
+            });
+            instance.onHide = () => {
+              this.close(id);
+            };
           });
-          instance.onHide = () => {
-            this.close(id);
-          };
-        });
-      }
-    },
+        }
+      },
 
-    /**
+      /**
    * 新增消息
    * @param msgObj
    */
-    addMessage(msgObj) {
-      const list = [...this.messageList, { id: msgObj.id }];
-      this.messageList = list;
+      addMessage(msgObj) {
+        const list = [...this.messageList, { id: msgObj.id }];
+        this.messageList = list;
 
-      setTimeout(() => {
-        const offsetHeight = this.getOffsetHeight();
-        const instance = this.showMessageItem(msgObj, msgObj.id, offsetHeight);
-        if (this.instances) {
-          this.instances.push(instance);
-          this.index += 1;
-        }
-      }, 33);
-    },
+        setTimeout(() => {
+          const offsetHeight = this.getOffsetHeight();
+          const instance = this.showMessageItem(msgObj, msgObj.id, offsetHeight);
+          if (this.instances) {
+            this.instances.push(instance);
+            this.index += 1;
+          }
+        }, 33);
+      },
 
-    /**
+      /**
    * 获取消息显示top偏移距离
    * @param index
    * @returns
    */
-    getOffsetHeight(index = -1) {
-      let offsetHeight = 0;
-      let len = index;
-      if (len === -1 || len > this.instances.length) {
-        len = this.instances.length;
-      }
-      for (let i = 0; i < len; i += 1) {
-        const instance = this.instances[i];
-        offsetHeight += instance.height + instance.gap;
-      }
-      return offsetHeight;
-    },
+      getOffsetHeight(index = -1) {
+        let offsetHeight = 0;
+        let len = index;
+        if (len === -1 || len > this.instances.length) {
+          len = this.instances.length;
+        }
+        for (let i = 0; i < len; i += 1) {
+          const instance = this.instances[i];
+          offsetHeight += instance.height + instance.gap;
+        }
+        return offsetHeight;
+      },
 
-    /**
+      /**
    * 新增消息显示
    * @param options
    * @param id
    * @param offsetHeight
    * @returns
    */
-    showMessageItem(options, id, offsetHeight) {
-      let instance = this.$refs[`${id}`];
-      if (Array.isArray(instance)) {
-        instance = instance[0];
-      }
+      showMessageItem(options, id, offsetHeight) {
+        let instance = this.$refs[`${id}`];
+        if (Array.isArray(instance)) {
+          instance = instance[0];
+        }
 
-      if (instance) {
-        instance.resetData(() => {
-          Object.keys(options).forEach((key) => {
-            instance[key] = options[key];
-          });
-          setTimeout(() => {
-            instance.show.call(instance, offsetHeight);
+        if (instance) {
+          instance.resetData(() => {
+            Object.keys(options).forEach((key) => {
+              instance[key] = options[key];
+            });
+            setTimeout(() => {
+              instance.show.call(instance, offsetHeight);
+            });
+            instance.onHide = () => {
+              this.close(id);
+            };
           });
-          instance.onHide = () => {
-            this.close(id);
-          };
-        });
 
-        return instance;
-      }
-      console.error('未找到组件,请确认 selector && context 是否正确');
-    },
+          return instance;
+        }
+        console.error('未找到组件,请确认 selector && context 是否正确');
+      },
 
-    close(id) {
-      setTimeout(() => {
-        this.removeMsg(id);
-      }, SHOW_DURATION);
-      this.removeInstance(id);
-    },
+      close(id) {
+        setTimeout(() => {
+          this.removeMsg(id);
+        }, SHOW_DURATION);
+        this.removeInstance(id);
+      },
 
-    /**
+      /**
    * 移除指定消息，id为空则删除全部消息
    * @param id
    */
-    hide(id) {
-      if (!id) {
-        this.hideAll();
-      }
-      const instance = this.instances.find(x => x.id === id);
-      if (instance) {
-        instance.hide();
-      }
-    },
+      hide(id) {
+        if (!id) {
+          this.hideAll();
+        }
+        const instance = this.instances.find(x => x.id === id);
+        if (instance) {
+          instance.hide();
+        }
+      },
 
-    /**
+      /**
    * 移除全部消息
    */
-    hideAll() {
-    // 消息移除后也会移除instance，下标不用增加，直至全部删除
-      for (let i = 0; i < this.instances.length;) {
-        const instance = this.instances[i];
-        instance.hide();
-      }
-    },
+      hideAll() {
+        // 消息移除后也会移除instance，下标不用增加，直至全部删除
+        for (let i = 0; i < this.instances.length;) {
+          const instance = this.instances[i];
+          instance.hide();
+        }
+      },
 
-    /**
+      /**
    * 移除message实例
    */
-    removeInstance(id) {
-      const index = this.instances.findIndex(x => x.id === id);
-      if (index < 0) return;
-      const instance = this.instances[index];
-      const removedHeight = instance.height;
-      this.instances.splice(index, 1);
-      for (let i = index; i < this.instances.length; i += 1) {
-        const instance = this.instances[i];
-        instance.wrapTop = instance.wrapTop - removedHeight - instance.gap;
-      }
-    },
+      removeInstance(id) {
+        const index = this.instances.findIndex(x => x.id === id);
+        if (index < 0) return;
+        const instance = this.instances[index];
+        const removedHeight = instance.height;
+        this.instances.splice(index, 1);
+        for (let i = index; i < this.instances.length; i += 1) {
+          const instance = this.instances[i];
+          instance.wrapTop = instance.wrapTop - removedHeight - instance.gap;
+        }
+      },
 
-    /**
+      /**
    * 移除页面元素
    * @param id
    */
-    removeMsg(id) {
-      this.messageList = this.messageList.filter(item => item.id !== id);
-      // #ifdef VUE2
-      this.$set(this, 'messageList', this.messageList);
+      removeMsg(id) {
+        this.messageList = this.messageList.filter(item => item.id !== id);
+        // #ifdef VUE2
+        this.$set(this, 'messageList', this.messageList);
       // #endif
-    },
+      },
 
-    handleClose(e) {
-      this.$emit('close-btn-click', { e });
-    },
+      handleClose(e) {
+        this.$emit('close-btn-click', { e });
+      },
 
-    handleLinkClick(e) {
-      this.$emit('link-click', { e });
-    },
+      handleLinkClick(e) {
+        this.$emit('link-click', { e });
+      },
 
-    handleDurationEnd(e) {
-      this.$emit('duration-end', { e });
+      handleDurationEnd(e) {
+        this.$emit('duration-end', { e });
+      },
     },
-  },
-});
+  }),
+};
 </script>
 <style scoped>
 </style>

package/dist/message/props.ts

@@ -68,8 +68,8 @@ export default {
   },
   /** 是否显示，隐藏时默认销毁组件 */
   visible: {
-    type: Boolean,
-    default: undefined,
+    type: [Boolean, null],
+    default: null as TdMessageProps['visible'],
   },
   /** 是否显示，隐藏时默认销毁组件，非受控属性 */
   defaultVisible: Boolean,

package/dist/message/type.ts

@@ -61,7 +61,7 @@ export interface TdMessageProps {
    * 是否显示，隐藏时默认销毁组件
    * @default false
    */
-  visible?: boolean;
+  visible?: boolean | null;
   /**
    * 是否显示，隐藏时默认销毁组件，非受控属性
    * @default false