@tdesign/uniapp 0.7.0 → 0.7.2

package/dist/calendar/calendar.vue

@@ -3,9 +3,12 @@
     <t-popup
       v-if="usePopup"
       :visible="visible"
-      :using-custom-navbar="usingCustomNavbar"
-      :custom-navbar-height="customNavbarHeight"
       placement="bottom"
+      :show-overlay="isShowOverlay(popupProps && popupProps.showOverlay, true)"
+      :using-custom-navbar="usingCustomNavbar || (popupProps && popupProps.usingCustomNavbar)"
+      :custom-navbar-height="coalesce(customNavbarHeight, popupProps && popupProps.usingCustomNavbar)"
+      :z-index="(popupProps && popupProps.zIndex)"
+      :overlay-props="(popupProps && popupProps.overlayProps) || defaultOverlayProps"
       @visible-change="onVisibleChange"
     >
       <CalendarTemplate
@@ -153,6 +156,8 @@ export default uniComponent({
       dataVisible: this.visible,
       dataValue: coalesce(this.value, this.defaultValue),
       days: [],
+
+      defaultOverlayProps: {},
     };
   },
   watch: {
@@ -253,6 +258,8 @@ export default uniComponent({
     }
   },
   methods: {
+    coalesce,
+
     getMonthTitle,
     getDateLabel,
     isDateSelected,
@@ -291,23 +298,23 @@ export default uniComponent({
     },
 
     updateActionButton(value) {
-      const _min = this.getCurrentYearAndMonth(this.base.minDate);
-      const _max = this.getCurrentYearAndMonth(this.base.maxDate);
-      const _value = this.getCurrentYearAndMonth(value);
+      const iMin = this.getCurrentYearAndMonth(this.base.minDate);
+      const iMax = this.getCurrentYearAndMonth(this.base.maxDate);
+      const iValue = this.getCurrentYearAndMonth(value);
 
-      const _minTimestamp = new Date(_min.year, _min.month, 1).getTime();
-      const _maxTimestamp = new Date(_max.year, _max.month, 1).getTime();
-      const _dateValue = new Date(_value.year, _value.month, 1);
+      const iMinTimestamp = new Date(iMin.year, iMin.month, 1).getTime();
+      const iMaxTimestamp = new Date(iMax.year, iMax.month, 1).getTime();
+      const iDateValue = new Date(iValue.year, iValue.month, 1);
 
-      const _prevYearTimestamp = getPrevYear(_dateValue).getTime();
-      const _prevMonthTimestamp = getPrevMonth(_dateValue).getTime();
-      const _nextMonthTimestamp = getNextMonth(_dateValue).getTime();
-      const _nextYearTimestamp = getNextYear(_dateValue).getTime();
+      const iPrevYearTimestamp = getPrevYear(iDateValue).getTime();
+      const iPrevMonthTimestamp = getPrevMonth(iDateValue).getTime();
+      const iNextMonthTimestamp = getNextMonth(iDateValue).getTime();
+      const iNextYearTimestamp = getNextYear(iDateValue).getTime();
 
-      const preYearBtnDisable = _prevYearTimestamp < _minTimestamp || _prevMonthTimestamp < _minTimestamp;
-      const prevMonthBtnDisable = _prevMonthTimestamp < _minTimestamp;
-      const nextYearBtnDisable = _nextMonthTimestamp > _maxTimestamp || _nextYearTimestamp > _maxTimestamp;
-      const nextMonthBtnDisable = _nextMonthTimestamp > _maxTimestamp;
+      const preYearBtnDisable = iPrevYearTimestamp < iMinTimestamp || iPrevMonthTimestamp < iMinTimestamp;
+      const prevMonthBtnDisable = iPrevMonthTimestamp < iMinTimestamp;
+      const nextYearBtnDisable = iNextMonthTimestamp > iMaxTimestamp || iNextYearTimestamp > iMaxTimestamp;
+      const nextMonthBtnDisable = iNextMonthTimestamp > iMaxTimestamp;
 
       this.actionButtons = {
         preYearBtnDisable,
@@ -440,12 +447,14 @@ export default uniComponent({
       maxDate && (this.base.maxDate = maxDate);
       this.calcMonths();
     },
+
+    isShowOverlay(value, defaultValue) {
+      return tools.isBoolean(value) ? value : defaultValue;
+    },
   },
 });
 </script>
-<style scoped>
-@import './calendar.css';
-</style>
+<style scoped src="./calendar.css"></style>
 <style scoped>
 .t-calendar-switch-mode--none > .t-calendar__months {
   /* support mp-alipay */

package/dist/calendar/props.ts

@@ -39,6 +39,11 @@ export default {
   minDate: {
     type: Number,
   },
+  /** 透传 Popup 组件全部属性 */
+  popupProps: {
+    type: Object,
+    default: () => ({}),
+  },
   /** 是否只读，只读状态下不能选择日期 */
   readonly: Boolean,
   /** 切换模式。 `none` 表示平铺展示所有月份； `month` 表示支持按月切换， `year-month` 表示既按年切换，也支持按月切换 */

package/dist/calendar/template.vue

@@ -256,6 +256,4 @@ export default {
 };
 
 </script>
-<style scoped>
-@import './calendar.css';
-</style>
+<style scoped src="./calendar.css"></style>

package/dist/calendar/type.ts

@@ -5,6 +5,7 @@
  * */
 
 import type { TdButtonProps as ButtonProps } from '../button/type';
+import type { TdPopupProps as PopupProps } from '../popup/type';
 
 export interface TdCalendarProps {
   /**
@@ -43,6 +44,11 @@ export interface TdCalendarProps {
    * 最小可选的日期，不传则默认今天
    */
   minDate?: number;
+  /**
+   * 透传 Popup 组件全部属性
+   * @default {}
+   */
+  popupProps?: PopupProps;
   /**
    * 是否只读，只读状态下不能选择日期
    */

package/dist/cascader/cascader.vue

@@ -106,7 +106,7 @@
               scroll-y
               :scroll-top="scrollTopList[index]"
               type="list"
-              :style="'height: ' + _optionsHeight + 'px'"
+              :style="'height: ' + optionsHeight + 'px'"
             >
               <view :class="'cascader-radio-group-' + index">
                 <TRadioGroup
@@ -199,7 +199,7 @@ export default uniComponent({
       selectedValue: [],
       scrollTopList: [],
       steps: [],
-      _optionsHeight: 0,
+      optionsHeight: 0,
       tools,
 
       dataVisible: this.visible,
@@ -258,6 +258,7 @@ export default uniComponent({
         this.initWithValue();
       },
       immediate: true,
+      deep: true,
     },
 
     options: {
@@ -330,7 +331,7 @@ export default uniComponent({
     },
     updateOptionsHeight(steps) {
       const { contentHeight, stepsInitHeight, stepHeight, subTitlesHeight } = this.state;
-      this._optionsHeight = contentHeight - stepsInitHeight - subTitlesHeight - (steps - 1) * stepHeight;
+      this.optionsHeight = contentHeight - stepsInitHeight - subTitlesHeight - (steps - 1) * stepHeight;
     },
 
     async initOptionsHeight(steps) {
@@ -358,7 +359,7 @@ export default uniComponent({
       }
 
       const optionsInitHeight = this.state.contentHeight - this.state.subTitlesHeight;
-      this._optionsHeight = theme === 'step'
+      this.optionsHeight = theme === 'step'
         ? optionsInitHeight - this.state.stepsInitHeight - (steps - 1) * this.state.stepHeight
         : optionsInitHeight - this.state.tabsHeight;
     },
@@ -503,6 +504,9 @@ export default uniComponent({
 
         this.hide('finish');
       }
+      // #ifdef VUE2
+      this.$set(this, 'selectedIndexes', JSON.parse(JSON.stringify(selectedIndexes)));
+      // #endif
     },
     triggerChange() {
       const { items, selectedValue, selectedIndexes } = this;
@@ -514,6 +518,4 @@ export default uniComponent({
   },
 });
 </script>
-<style scoped>
-@import './cascader.css';
-</style>
+<style scoped src="./cascader.css"></style>

package/dist/cell/cell.vue

@@ -13,18 +13,18 @@
   >
     <view :class="classPrefix + '__left ' + tClassLeft">
       <block
-        v-if="_leftIcon"
+        v-if="iLeftIcon"
         name="icon"
       >
         <t-icon
           :custom-style="leftIconCustomStyle"
           :t-class="classPrefix + '__left-icon ' + tClassLeftIcon"
-          :name="_leftIcon.name"
-          :size="_leftIcon.size"
-          :color="_leftIcon.color"
+          :name="iLeftIcon.name"
+          :size="iLeftIcon.size"
+          :color="iLeftIcon.color"
           :aria-hidden="true"
-          :aria-label="_leftIcon.ariaLabel"
-          :aria-role="_leftIcon.ariaRole"
+          :aria-label="iLeftIcon.ariaLabel"
+          :aria-role="iLeftIcon.ariaRole"
           @click="'handleClose' || ''"
         />
       </block>
@@ -93,31 +93,31 @@
       ]"
     >
       <t-icon
-        v-if="_arrow"
+        v-if="rightArrow"
         :custom-style="rightArrowCustomStyle"
         :t-class=" classPrefix + '__right-icon ' + tClassRightIcon"
-        :name="_arrow.name || ''"
-        :size="_arrow.size"
-        :color="_arrow.color"
+        :name="rightArrow.name || ''"
+        :size="rightArrow.size"
+        :color="rightArrow.color"
         :aria-hidden="true"
-        :aria-label="_arrow.ariaLabel"
-        :aria-role="_arrow.ariaRole"
+        :aria-label="rightArrow.ariaLabel"
+        :aria-role="rightArrow.ariaRole"
         @click="'handleClose' || ''"
       />
       <block v-else>
         <block
-          v-if="_rightIcon"
+          v-if="iRightIcon"
           name="icon"
         >
           <t-icon
             :custom-style="rightIconCustomStyle"
             :t-class=" classPrefix + '__right-icon ' + tClassRightIcon"
-            :name="_rightIcon.name"
-            :size="_rightIcon.size"
-            :color="_rightIcon.color || ''"
+            :name="iRightIcon.name"
+            :size="iRightIcon.size"
+            :color="iRightIcon.color || ''"
             :aria-hidden="true"
-            :aria-label="_rightIcon.ariaLabel"
-            :aria-role="_rightIcon.ariaRole"
+            :aria-label="iRightIcon.ariaLabel"
+            :aria-role="iRightIcon.ariaRole"
             @click="'handleClose' || ''"
           />
         </block>
@@ -132,7 +132,7 @@ import TImage from '../image/image';
 import { uniComponent } from '../common/src/index';
 import { prefix } from '../common/config';
 import props from './props';
-import { calcIcon } from '../common/utils';
+import { calcIcon, addUnit } from '../common/utils';
 import tools from '../common/utils.wxs';
 
 import { ChildrenMixin, RELATION_MAP } from '../common/relation';
@@ -177,9 +177,9 @@ export default uniComponent({
     return {
       prefix,
       classPrefix: name,
-      _arrow: null,
-      _rightIcon: null,
-      _leftIcon: null,
+      rightArrow: null,
+      iRightIcon: null,
+      iLeftIcon: null,
       isLastChild: false,
       tools,
     };
@@ -187,25 +187,43 @@ export default uniComponent({
   computed: {
     rightArrowCustomStyle() {
       return tools._style([
-        COMMON_RIGHT_ICON_STYLE,
+        {
+          color: this.rightArrow.color
+            ? this.rightArrow.color
+            : COMMON_RIGHT_ICON_STYLE.color,
+          fontSize: this.rightArrow.size
+            ? addUnit(this.rightArrow.size)
+            : COMMON_RIGHT_ICON_STYLE.fontSize,
+        },
         this.rightIconStyle || '',
-        this._arrow.style || '',
+        this.rightArrow.style || '',
       ]);
     },
     rightIconCustomStyle() {
       return tools._style([
-        COMMON_RIGHT_ICON_STYLE,
+        {
+          color: this.iRightIcon.color
+            ? this.iRightIcon.color
+            : COMMON_RIGHT_ICON_STYLE.color,
+          fontSize: this.iRightIcon.size
+            ? addUnit(this.iRightIcon.size)
+            : COMMON_RIGHT_ICON_STYLE.fontSize,
+        },
         this.rightIconStyle || '',
-        this._rightIcon.style || '',
+        this.iRightIcon.style || '',
       ]);
     },
     leftIconCustomStyle() {
       return tools._style([
         {
-          color: 'var(--td-cell-left-icon-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)))',
-          fontSize: 'var(--td-cell-left-icon-font-size, 24px)',
+          color: this.iLeftIcon.color
+            ? this.iLeftIcon.color
+            : 'var(--td-cell-left-icon-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)))',
+          fontSize: this.iLeftIcon.size
+            ? addUnit(this.iLeftIcon.size)
+            : 'var(--td-cell-left-icon-font-size, 24px)',
         },
-        this._leftIcon.style || '',
+        this.iLeftIcon.style || '',
       ]);
     },
     leftImageCustomStyle() {
@@ -218,19 +236,19 @@ export default uniComponent({
   watch: {
     leftIcon: {
       handler(e) {
-        this.setIcon('_leftIcon', e, '');
+        this.setIcon('iLeftIcon', e, '');
       },
       immediate: true,
     },
     rightIcon: {
       handler(e) {
-        this.setIcon('_rightIcon', e, '');
+        this.setIcon('iRightIcon', e, '');
       },
       immediate: true,
     },
     arrow: {
       handler(e) {
-        this.setIcon('_arrow', e, 'chevron-right');
+        this.setIcon('rightArrow', e, 'chevron-right');
       },
       immediate: true,
     },
@@ -255,6 +273,4 @@ export default uniComponent({
   },
 });
 </script>
-<style scoped>
-@import './cell.css';
-</style>
+<style scoped src="./cell.css"></style>

package/dist/cell-group/cell-group.vue

@@ -64,6 +64,4 @@ export default uniComponent({
   },
 });
 </script>
-<style scoped>
-@import './cell-group.css';
-</style>
+<style scoped src="./cell-group.css"></style>

package/dist/check-tag/check-tag.vue

@@ -9,19 +9,19 @@
       :class="classPrefix + '__icon'"
     >
       <block
-        v-if="_icon"
+        v-if="innerIcon"
         name="icon"
       >
         <t-icon
-          :custom-style="_icon.style || ''"
+          :custom-style="innerIcon.style || ''"
           :t-class="prefix + '-icon'"
-          :prefix="_icon.prefix"
-          :name="_icon.name"
-          :size="_icon.size"
-          :color="_icon.color"
-          :aria-hidden="!!_icon.ariaHidden"
-          :aria-label="_icon.ariaLabel"
-          :aria-role="_icon.ariaRole"
+          :prefix="innerIcon.prefix"
+          :name="innerIcon.name"
+          :size="innerIcon.size"
+          :color="innerIcon.color"
+          :aria-hidden="!!innerIcon.ariaHidden"
+          :aria-label="innerIcon.ariaLabel"
+          :aria-role="innerIcon.ariaRole"
         />
       </block>
       <slot name="icon" />
@@ -84,7 +84,7 @@ export default uniComponent({
       classPrefix: name,
       className: '',
       tools,
-      _icon: null,
+      innerIcon: null,
 
       dataChecked: coalesce(this.checked, this.defaultChecked),
     };
@@ -95,7 +95,7 @@ export default uniComponent({
     dataChecked: 'setClass',
     icon: {
       handler(e) {
-        this._icon = calcIcon(e);
+        this.innerIcon = calcIcon(e);
       },
       immediate: true,
     },
@@ -143,7 +143,4 @@ export default uniComponent({
 });
 
 </script>
-<style scoped>
-@import './check-tag.css';
-
-</style>
+<style scoped src="./check-tag.css"></style>

package/dist/checkbox/checkbox.vue

@@ -2,15 +2,15 @@
   <view
     :id="tId"
     :style="tools._style([customStyle])"
-    :class="tools.cls(classPrefix, [placement, theme, ['checked', dataChecked], ['block', block], ['disabled', _disabled]]) + ' ' + tClass"
+    :class="tools.cls(classPrefix, [placement, theme, ['checked', dataChecked], ['block', block], ['disabled', iDisabled]]) + ' ' + tClass"
     aria-role="checkbox"
     :aria-checked="dataChecked ? (dataIndeterminate ? 'mixed' : true) : false"
-    :aria-disabled="_disabled ? true : false"
+    :aria-disabled="iDisabled ? true : false"
     @click.stop="handleTap"
   >
     <view
       v-if="theme == 'default'"
-      :class="tools.cls(classPrefix + '__icon', [placement, ['checked', dataChecked], ['disabled', _disabled]]) + ' ' + tClassIcon"
+      :class="tools.cls(classPrefix + '__icon', [placement, ['checked', dataChecked], ['disabled', iDisabled]]) + ' ' + tClassIcon"
     >
       <slot
         v-if="icon === 'slot'"
@@ -38,7 +38,7 @@
         />
         <view
           v-else-if="!dataChecked && (icon == 'circle' || icon == 'rectangle')"
-          :class="tools.cls(classPrefix + '__icon-' + icon, [['disabled', _disabled]])"
+          :class="tools.cls(classPrefix + '__icon-' + icon, [['disabled', iDisabled]])"
         />
         <view
           v-if="!dataChecked && icon == 'line'"
@@ -54,7 +54,7 @@
       <view
         :class="
           tools.cls(classPrefix + '__title', [
-            ['disabled', _disabled],
+            ['disabled', iDisabled],
             ['checked', dataChecked]
           ]) +
             ' ' +
@@ -69,7 +69,7 @@
         <slot name="label" />
       </view>
       <view
-        :class="tools.cls(classPrefix + '__description', [['disabled', _disabled]]) + ' ' + tClassContent"
+        :class="tools.cls(classPrefix + '__description', [['disabled', iDisabled]]) + ' ' + tClassContent"
         :style="'-webkit-line-clamp:' + maxContentRow"
       >
         <block v-if="content">
@@ -132,7 +132,7 @@ export default uniComponent({
     return {
       prefix,
       classPrefix: name,
-      _disabled: false,
+      iDisabled: false,
       tools,
 
       dataBorderless: this.borderless,
@@ -166,7 +166,7 @@ export default uniComponent({
     },
     disabled: {
       handler(v) {
-        this._disabled = v;
+        this.iDisabled = v;
       },
       immediate: true,
     },
@@ -183,7 +183,7 @@ export default uniComponent({
       const valueSet = new Set(value);
       const checkedFromParent = valueSet.has(this.value);
       const data = {
-        _disabled: this.disabled == null ? disabled : this.disabled,
+        iDisabled: this.disabled == null ? disabled : this.disabled,
       };
 
       data.dataBorderless = !!(coalesce(this.borderless, borderless));
@@ -210,10 +210,10 @@ export default uniComponent({
       });
     },
     handleTap(e) {
-      const { _disabled, readonly, contentDisabled } = this;
+      const { iDisabled, readonly, contentDisabled } = this;
       const { target } = e.currentTarget.dataset;
 
-      if (_disabled || readonly || (target === 'text' && contentDisabled)) return;
+      if (iDisabled || readonly || (target === 'text' && contentDisabled)) return;
 
       const { value, label, checkAll, dataIndeterminate } = this;
       const checked = !this.dataChecked;
@@ -228,11 +228,9 @@ export default uniComponent({
     },
 
     setDisabled(disabled) {
-      this._disabled = this.disabled || disabled;
+      this.iDisabled = this.disabled || disabled;
     },
   },
 });
 </script>
-<style scoped>
-@import './checkbox.css';
-</style>
+<style scoped src="./checkbox.css"></style>

package/dist/col/col.vue

@@ -46,9 +46,7 @@ export default uniComponent({
 });
 
 </script>
-<style scoped>
-@import './col.css';
-</style>
+<style scoped src="./col.css"></style>
 <style scoped>
 .t-col {
   /* 适配 qq 小程序等 */

package/dist/collapse/collapse.vue

@@ -114,6 +114,4 @@ export default uniComponent({
   },
 });
 </script>
-<style scoped>
-@import './collapse.css';
-</style>
+<style scoped src="./collapse.css"></style>

package/dist/collapse-panel/collapse-panel.vue

@@ -233,6 +233,4 @@ export default uniComponent({
 });
 
 </script>
-<style scoped>
-@import './collapse-panel.css';
-</style>
+<style scoped src="./collapse-panel.css"></style>

package/dist/color-picker/color-picker.vue

@@ -234,7 +234,7 @@ export default uniComponent({
     }, 33);
     this.debouncedUpdateEleRect = debounce(e => this.updateEleRect(e), 150);
   },
-  beforeUnMount() {
+  beforeUnmount() {
     clearTimeout(this.timer);
   },
   methods: {
@@ -496,6 +496,4 @@ export default uniComponent({
 });
 
 </script>
-<style scoped>
-@import './color-picker.css';
-</style>
+<style scoped src="./color-picker.css"></style>

package/dist/color-picker/template.vue

@@ -193,6 +193,4 @@ export default {
 };
 </script>
 
-<style scoped>
-@import './color-picker.css';
-</style>
+<style scoped src="./color-picker.css"></style>

package/dist/common/src/instantiationDecorator.js

@@ -80,6 +80,12 @@ export const toComponent = function (options) {
     });
   };
 
+  // #ifdef Vue2
+  if (options.beforeUnmount) {
+    options.beforeDestroy = options.beforeUnmount;
+  }
+  // #endif
+
   options.methods._trigger = function (evtName, detail, opts) {
     const target = controlledProps.find(item => item.event === evtName);
 
@@ -171,10 +177,18 @@ function filterProps(props, controlledProps) {
        || unControlledKeys.indexOf(key) > -1
     ) {
       const newType = Array.isArray(curType) ? curType : [curType];
+      // #ifdef VUE3
       newProps[key] = {
         type: [null, ...newType],
         default: null,
       };
+      // #endif
+      // #ifdef VUE2
+      newProps[key] = {
+        type: [...newType],
+        default: null,
+      };
+      // #endif
     } else if (
       [Boolean, String].indexOf(props[key].type) > -1
       && props[key].default === undefined