@tdesign/uniapp 0.8.1 → 0.9.1

package/dist/cascader/cascader.vue

@@ -132,18 +132,18 @@
   </view>
 </template>
 <script>
-import TIcon from '../icon/icon';
-import TPopup from '../popup/popup';
-import TTabs from '../tabs/tabs';
-import TTabPanel from '../tab-panel/tab-panel.vue';
-import TRadioGroup from '../radio-group/radio-group';
-import { uniComponent } from '../common/src/index';
 import { prefix } from '../common/config';
-import props from './props';
+import { uniComponent } from '../common/src/index';
 import { getRect, coalesce, nextTick } from '../common/utils';
-
 import tools from '../common/utils.wxs';
+import TIcon from '../icon/icon';
 import usingConfig from '../mixins/using-config';
+import TPopup from '../popup/popup';
+import TRadioGroup from '../radio-group/radio-group';
+import TTabPanel from '../tab-panel/tab-panel.vue';
+import TTabs from '../tabs/tabs';
+
+import props from './props';
 
 
 const componentName = 'cascader';

package/dist/cell/README.en-US.md

@@ -83,7 +83,7 @@ t-class-title | \-
 ### CSS Variables
 
 The component provides the following CSS variables, which can be used to customize styles.
-Name | Default Value | Description 
+Name | Default Value | Description
 -- | -- | --
 --td-cell-group-border-color | @component-stroke | -
 --td-cell-group-title-bg-color | @bg-color-secondarycontainer | -

package/dist/cell/README.md

@@ -116,7 +116,7 @@ t-class-title | 标题样式类
 ### CSS Variables
 
 组件提供了下列 CSS 变量，可用于自定义样式。
-名称 | 默认值 | 描述 
+名称 | 默认值 | 描述
 -- | -- | --
 --td-cell-group-border-color | @component-stroke | -
 --td-cell-group-title-bg-color | @bg-color-secondarycontainer | -

package/dist/cell/cell.vue

@@ -95,7 +95,7 @@
       <t-icon
         v-if="rightArrow"
         :custom-style="rightArrowCustomStyle"
-        :t-class=" classPrefix + '__right-icon ' + tClassRightIcon"
+        :t-class="classPrefix + '__right-icon ' + tClassRightIcon"
         :name="rightArrow.name || ''"
         :size="rightArrow.size"
         :color="rightArrow.color"
@@ -111,7 +111,7 @@
         >
           <t-icon
             :custom-style="rightIconCustomStyle"
-            :t-class=" classPrefix + '__right-icon ' + tClassRightIcon"
+            :t-class="classPrefix + '__right-icon ' + tClassRightIcon"
             :name="iRightIcon.name"
             :size="iRightIcon.size"
             :color="iRightIcon.color || ''"
@@ -127,21 +127,22 @@
   </view>
 </template>
 <script>
-import TIcon from '../icon/icon';
-import TImage from '../image/image';
-import { uniComponent } from '../common/src/index';
 import { prefix } from '../common/config';
-import props from './props';
+import { ChildrenMixin, RELATION_MAP } from '../common/relation';
+import { uniComponent } from '../common/src/index';
 import { calcIcon, addUnit } from '../common/utils';
 import tools from '../common/utils.wxs';
+import TIcon from '../icon/icon';
+import TImage from '../image/image';
 
-import { ChildrenMixin, RELATION_MAP } from '../common/relation';
+import props from './props';
 
 
 const name = `${prefix}-cell`;
+
 const COMMON_RIGHT_ICON_STYLE = {
   color: 'var(--td-cell-right-icon-color, var(--td-text-color-placeholder, var(--td-font-gray-3, rgba(0, 0, 0, .4))))',
-  fontSize: 'var(--td-cell-right-icon-font-size, 24px)',
+  fontSize: 'var(--td-cell-right-icon-font-size, 48rpx)',
 };
 
 export default {
@@ -178,14 +179,35 @@ export default {
       return {
         prefix,
         classPrefix: name,
+        tools,
         rightArrow: null,
         iRightIcon: null,
         iLeftIcon: null,
         isLastChild: false,
-        tools,
       };
     },
     computed: {
+      leftIconCustomStyle() {
+        if (!this.iLeftIcon) return '';
+
+        return tools._style([
+          {
+            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, 48rpx)',
+          },
+          this.iLeftIcon.style || '',
+        ]);
+      },
+      leftImageCustomStyle() {
+        return tools._style({
+          width: 'var(--td-cell-image-width, 96rpx)',
+          height: 'var(--td-cell-image-height, 96rpx)',
+        });
+      },
       rightArrowCustomStyle() {
         if (!this.rightArrow) return '';
         return tools._style([
@@ -216,52 +238,28 @@ export default {
           this.iRightIcon.style || '',
         ]);
       },
-      leftIconCustomStyle() {
-        if (!this.iLeftIcon) return '';
-
-        return tools._style([
-          {
-            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.iLeftIcon.style || '',
-        ]);
-      },
-      leftImageCustomStyle() {
-        return tools._style({
-          height: 'var(--td-cell-image-height, 48px)',
-          width: 'var(--td-cell-image-width, 48px)',
-        });
-      },
     },
     watch: {
       leftIcon: {
         handler(e) {
-          this.setIcon('iLeftIcon', e, '');
+          this.iLeftIcon = calcIcon(e, '');
         },
         immediate: true,
       },
       rightIcon: {
         handler(e) {
-          this.setIcon('iRightIcon', e, '');
+          this.iRightIcon = calcIcon(e, '');
         },
         immediate: true,
       },
       arrow: {
         handler(e) {
-          this.setIcon('rightArrow', e, 'chevron-right');
+          this.rightArrow = calcIcon(e, 'chevron-right');
         },
         immediate: true,
       },
     },
     methods: {
-      setIcon(e, t, s) {
-        this[e] = calcIcon(t, s);
-      },
       onClick(e) {
         this.$emit('click', e);
         this.jumpLink();

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

@@ -21,11 +21,13 @@
   </view>
 </template>
 <script>
-import { uniComponent } from '../common/src/index';
 import { prefix } from '../common/config';
-import props from './props';
-import tools from '../common/utils.wxs';
 import { ParentMixin, RELATION_MAP } from '../common/relation';
+import { uniComponent } from '../common/src/index';
+
+import tools from '../common/utils.wxs';
+
+import props from './props';
 
 
 const name = `${prefix}-cell-group`;

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

@@ -48,12 +48,15 @@
   </view>
 </template>
 <script>
-import TIcon from '../icon/icon';
-import { uniComponent } from '../common/src/index';
 import { prefix } from '../common/config';
-import props from './props';
+import { uniComponent } from '../common/src/index';
+
+
 import { classNames, calcIcon, coalesce } from '../common/utils';
 import tools from '../common/utils.wxs';
+import TIcon from '../icon/icon';
+
+import props from './props';
 
 
 const name = `${prefix}-tag`;

package/dist/checkbox/README.en-US.md

@@ -82,7 +82,7 @@ name | Description
 ### CSS Variables
 
 The component provides the following CSS variables, which can be used to customize styles.
-Name | Default Value | Description 
+Name | Default Value | Description
 -- | -- | --
 --td-checkbox-bg-color | @bg-color-container | -
 --td-checkbox-border-color | @component-stroke | -

package/dist/checkbox/README.md

@@ -139,7 +139,7 @@ change | `(context: { value: CheckboxGroupValue, context: { value: boolean\|numb
 ### CSS Variables
 
 组件提供了下列 CSS 变量，可用于自定义样式。
-名称 | 默认值 | 描述 
+名称 | 默认值 | 描述
 -- | -- | --
 --td-checkbox-bg-color | @bg-color-container | -
 --td-checkbox-border-color | @component-stroke | -

package/dist/checkbox/checkbox.vue

@@ -83,13 +83,14 @@
   </view>
 </template>
 <script>
-import TIcon from '../icon/icon';
+import { prefix, ISOLATED_RELATION_KEY } from '../common/config';
+import { ChildrenMixin, RELATION_MAP } from '../common/relation';
 import { uniComponent } from '../common/src/index';
 import { coalesce } from '../common/utils';
-import { prefix, ISOLATED_RELATION_KEY } from '../common/config';
-import props from './props';
 import tools from '../common/utils.wxs';
-import { ChildrenMixin, RELATION_MAP } from '../common/relation';
+import TIcon from '../icon/icon';
+
+import props from './props';
 
 
 const name = `${prefix}-checkbox`;

package/dist/checkbox-group/checkbox-group.vue

@@ -33,12 +33,14 @@
 </template>
 <script>
 import TCheckbox from '../checkbox/checkbox';
-import { uniComponent } from '../common/src/index';
 import { prefix } from '../common/config';
+import { ParentMixin, RELATION_MAP } from '../common/relation';
+import { uniComponent } from '../common/src/index';
 import { coalesce } from '../common/utils';
-import props from './props';
+
 import tools from '../common/utils.wxs';
-import { ParentMixin, RELATION_MAP } from '../common/relation';
+
+import props from './props';
 
 
 const name = `${prefix}-checkbox-group`;

package/dist/col/col.vue

@@ -11,12 +11,16 @@
   </view>
 </template>
 <script>
-import { uniComponent } from '../common/src/index';
 import { prefix } from '../common/config';
-import props from './props';
+import { ChildrenMixin, RELATION_MAP } from '../common/relation';
+import { uniComponent } from '../common/src/index';
+
+
 import tools from '../common/utils.wxs';
+
 import { getColStyles } from './computed.js';
-import { ChildrenMixin, RELATION_MAP } from '../common/relation';
+import props from './props';
+
 
 const name = `${prefix}-col`;
 

package/dist/collapse/README.en-US.md

@@ -64,7 +64,7 @@ t-class-header | \-
 ### CSS Variables
 
 The component provides the following CSS variables, which can be used to customize styles.
-Name | Default Value | Description 
+Name | Default Value | Description
 -- | -- | --
 --td-collapse-border-color | @border-level-1-color | -
 --td-collapse-content-font | @font-body-medium | -

package/dist/collapse/README.md

@@ -103,7 +103,7 @@ t-class-header | 头部样式类
 ### CSS Variables
 
 组件提供了下列 CSS 变量，可用于自定义样式。
-名称 | 默认值 | 描述 
+名称 | 默认值 | 描述
 -- | -- | --
 --td-collapse-border-color | @border-level-1-color | -
 --td-collapse-content-font | @font-body-medium | -

package/dist/collapse/collapse.vue

@@ -10,12 +10,14 @@
   </view>
 </template>
 <script>
-import { uniComponent } from '../common/src/index';
 import { prefix } from '../common/config';
+import { ParentMixin, RELATION_MAP } from '../common/relation';
+import { uniComponent } from '../common/src/index';
 import { coalesce } from '../common/utils';
-import props from './props';
+
 import tools from '../common/utils.wxs';
-import { ParentMixin, RELATION_MAP } from '../common/relation';
+
+import props from './props';
 
 
 const name = `${prefix}-collapse`;
@@ -75,7 +77,7 @@ export default {
     },
     mounted() {
       let interval = 0;
-      // #ifdef APP-PLUS
+      // #ifdef APP
       interval = 33;
       // #endif
       setTimeout(() => {

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

@@ -30,6 +30,7 @@
         :right-icon-style="rightIconCustomStyle"
       >
         <template
+          v-if="$slots['header-left-icon']"
           #left-icon
         >
           <slot
@@ -37,6 +38,7 @@
           />
         </template>
         <template
+          v-if="$slots['header']"
           #title
         >
           <slot
@@ -44,6 +46,7 @@
           />
         </template>
         <template
+          v-if="$slots['header-right-content']"
           #note
         >
           <slot
@@ -51,6 +54,7 @@
           />
         </template>
         <template
+          v-if="$slots['expand-icon']"
           #right-icon
         >
           <slot
@@ -74,15 +78,16 @@
 </template>
 <script>
 import TCell from '../cell/cell';
-import { uniComponent } from '../common/src/index';
 import { prefix } from '../common/config';
-import props from './props';
+import { ChildrenMixin, RELATION_MAP } from '../common/relation';
+import { uniComponent } from '../common/src/index';
 import { getRect } from '../common/utils';
 import tools from '../common/utils.wxs';
-import { ChildrenMixin, RELATION_MAP } from '../common/relation';
 
+import props from './props';
 
 const name = `${prefix}-collapse-panel`;
+
 const DISABLED_COLOR = 'var(--td-text-color-disabled, var(--td-font-gray-4, rgba(0, 0, 0, .26)))';
 
 export default {
@@ -154,7 +159,11 @@ export default {
 
         if (expanded === this.expanded) return;
 
-        this.expanded = expanded;
+        // 防止 innerAfterLinked 中调用 updateExpanded 时机过早导致图标状态异常
+        this.$nextTick(() => {
+          this.expanded = expanded;
+        });
+
         this.updateStyle(expanded);
       },
 
@@ -177,7 +186,7 @@ export default {
             } else {
               let doAnimation = false;
 
-              // #ifdef H5 || APP-PLUS
+              // #ifdef H5 || APP
               animation
                 .height(height)
                 .top(1)
@@ -223,7 +232,7 @@ export default {
 
 
         let interval = 0;
-        // #ifdef APP-PLUS
+        // #ifdef APP
         interval = 33;
         // #endif
         setTimeout(() => {

package/dist/color-picker/README.en-US.md

@@ -37,7 +37,7 @@ header | \-
 ### CSS Variables
 
 The component provides the following CSS variables, which can be used to customize styles.
-Name | Default Value | Description 
+Name | Default Value | Description
 -- | -- | --
 --td-color-picker-gradient-preview-height | 56rpx | -
 --td-color-picker-gradient-preview-radius | 6rpx | -

package/dist/color-picker/README.md

@@ -87,7 +87,7 @@ header | 顶部插槽，仅在 `usePopup` 为 `true` 时有效
 ### CSS Variables
 
 组件提供了下列 CSS 变量，可用于自定义样式。
-名称 | 默认值 | 描述 
+名称 | 默认值 | 描述
 -- | -- | --
 --td-color-picker-gradient-preview-height | 56rpx | -
 --td-color-picker-gradient-preview-radius | 6rpx | -

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

@@ -64,10 +64,12 @@
   </view>
 </template>
 <script>
-import TPopup from '../popup/popup';
-import { uniComponent } from '../common/src/index';
 import { prefix } from '../common/config';
-import props from './props';
+import { uniComponent } from '../common/src/index';
+import { debounce, nextTick } from '../common/utils';
+import tools from '../common/utils.wxs';
+import TPopup from '../popup/popup';
+
 import {
   SATURATION_PANEL_DEFAULT_HEIGHT,
   SATURATION_PANEL_DEFAULT_WIDTH,
@@ -77,11 +79,11 @@ import {
   HUE_MAX,
   DEFAULT_SYSTEM_SWATCH_COLORS,
 } from './constants';
-import { debounce, nextTick } from '../common/utils';
-import { Color, getColorObject } from './utils';
-import TemplateVue from './template.vue';
+import props from './props';
 
-import tools from '../common/utils.wxs';
+
+import TemplateVue from './template.vue';
+import { Color, getColorObject } from './utils';
 
 
 const name = `${prefix}-color-picker`;

package/dist/color-picker/template.vue

@@ -154,9 +154,10 @@
 </template>
 
 <script>
+import { getRect } from '../common/utils';
 import utils from '../common/utils.wxs';
+
 import props from './template.props';
-import { getRect } from '../common/utils';
 
 
 export default {

package/dist/common/canvas/index.js

@@ -23,7 +23,7 @@ export async function loadImage({
   }
   // #endif
 
-  // #ifdef APP-PLUS
+  // #ifdef APP
   result = new Promise((resolve) => {
     uni.getImageInfo({
       src,

package/dist/common/shared/color-picker/color.js

@@ -1,4 +1,5 @@
 import tinyColor from '../../../npm/tinycolor2/esm/tinycolor.js';
+
 import { cmykInputToColor, rgb2cmyk } from './cmyk';
 import { parseGradientString, isGradientColor } from './gradient';
 

package/dist/common/src/instantiationDecorator.js

@@ -1,7 +1,7 @@
 /* eslint-disable no-param-reassign */
+import { toCamel, toPascal, hyphenate } from '../utils';
 import { isPlainObject } from '../validator';
 import { canUseVirtualHost } from '../version';
-import { toCamel, toPascal, hyphenate } from '../utils';
 
 const getInnerControlledValue = key => `data${key.replace(/^(\w)/, (e, t) => t.toUpperCase())}`;
 const getDefaultKey = key =>  `default${key.replace(/^(\w)/, (e, t) => t.toUpperCase())}`;