@tdesign/uniapp 0.8.1 → 0.9.1

package/dist/form-item/form-item.vue

@@ -5,19 +5,24 @@
   >
     <view :class="formItemClass + '-wrap ' + formItemClass + '--' + dataLabelAlign + ' ' + tClassWrap">
       <!-- 标签区域 -->
-      <view
-        v-if="label"
-        :class="labelClass + ' ' + labelClass + '--' + dataLabelAlign
-          + (dataRequiredMark ? ' ' + labelClass + '--required' : '')
-          + (dataRequiredMark && requiredMarkPosition === 'right' ? ' ' + labelClass + '--required-right' : '')
-          + ' ' + tClassLabel"
-        :style="'width: ' + dataLabelWidth"
-      >
-        <label :for="forId">{{ label }}</label>
-        <template v-if="colon">
-          {{ globalConfig.colonText }}
-        </template>
-      </view>
+      <slot name="label">
+        <view
+          v-if="label"
+          :class="labelClass + ' ' + labelClass + '--' + dataLabelAlign
+            + (dataRequiredMark ? ' ' + labelClass + '--required' : '')
+            + (dataRequiredMark && requiredMarkPosition === 'right' ? ' ' + labelClass + '--required-right' : '')
+            + ' ' + tClassLabel"
+          :style="'width: ' + dataLabelWidth"
+        >
+          <label
+            :class="labelClass + '-text'"
+            :for="forId"
+          >{{ label }}</label>
+          <template v-if="colon">
+            {{ globalConfig.colonText }}
+          </template>
+        </view>
+      </slot>
 
       <!-- 内容区域 -->
       <view :class="formClass + '__controls ' + errorClasses + ' ' + tClassControls">
@@ -28,12 +33,14 @@
           <slot />
         </view>
         <!-- 帮助信息 -->
-        <view
-          v-if="help"
-          :class="formItemClass + '-help ' + formClass + '__controls--' + dataContentAlign + ' ' + tClassHelp"
-        >
-          {{ help }}
-        </view>
+        <slot name="help">
+          <view
+            v-if="help"
+            :class="formItemClass + '-help ' + formClass + '__controls--' + dataContentAlign + ' ' + tClassHelp"
+          >
+            {{ help }}
+          </view>
+        </slot>
 
         <!-- 校验提示信息 -->
         <view
@@ -53,16 +60,18 @@
   </view>
 </template>
 <script>
-import { uniComponent } from '../common/src/index';
-import { getRect } from '../common/utils';
 import { prefix } from '../common/config';
-import props from './props';
-import { validateRules, ValidateStatus } from './form-model';
-import TIcon from '../icon/icon.vue';
+
 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 usingConfig from '../mixins/using-config';
 import { isNumeric } from '../common/validator';
+import TIcon from '../icon/icon.vue';
+import usingConfig from '../mixins/using-config';
+
+import { validateRules, ValidateStatus } from './form-model';
+import props from './props';
 
 const parentComponentName = 'form';
 const componentName = 'form-item';
@@ -162,14 +171,14 @@ export default {
         const formRules = target.rules?.[this.name];
         const isRequired = formRules?.some(rule => rule.required);
 
-        this.dataRules = formRules;
+        this.dataRules = formRules || [];
         this.colon = target.colon;
         this.dataLabelAlign = labelAlign || target.labelAlign;
         this.dataLabelWidth = normalizeLabelWidth(labelWidth || target.labelWidth);
         this.dataContentAlign = contentAlign || target.contentAlign;
         this.dataRequiredMark = requiredMark || target.requiredMark || globalConfig.requiredMark || isRequired;
         this.dataShowErrorMessage = typeof showErrorMessage === 'boolean' ? showErrorMessage : target.showErrorMessage;
-        this.requiredMarkPosition = target.requiredMarkPosition || globalConfig.requiredMarkPosition;
+        this.requiredMarkPosition = target.requiredMarkPosition || globalConfig.requiredMarkPosition || 'left';
       },
       innerAfterUnlinked() {
         if (this.form) {

package/dist/form-item/props.ts

@@ -8,6 +8,14 @@ import type { TdFormItemProps } from './type';
 export default {
   /** 是否显示右侧箭头 */
   arrow: Boolean,
+  /** 表单内容对齐方式：左对齐、右对齐，优先级高于 Form.contentAlign */
+  contentAlign: {
+    type: String,
+    validator(val: TdFormItemProps['contentAlign']): boolean {
+      if (!val) return true;
+      return ['left', 'right'].includes(val);
+    },
+  },
   /** 表单项说明内容 */
   help: {
     type: String,

package/dist/form-item/type.ts

@@ -12,6 +12,10 @@ export interface TdFormItemProps {
    * @default false
    */
   arrow?: boolean;
+  /**
+   * 表单内容对齐方式：左对齐、右对齐，优先级高于 Form.contentAlign
+   */
+  contentAlign?: 'left' | 'right';
   /**
    * 表单项说明内容
    */

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

@@ -70,7 +70,7 @@ t-class-text | \-
 ### 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-grid-bg-color | @bg-color-container | -
 --td-grid-card-radius | @radius-large | -

package/dist/grid/README.md

@@ -123,7 +123,7 @@ t-class-text | 文本样式类
 ### CSS Variables
 
 组件提供了下列 CSS 变量，可用于自定义样式。
-名称 | 默认值 | 描述 
+名称 | 默认值 | 描述
 -- | -- | --
 --td-grid-bg-color | @bg-color-container | -
 --td-grid-card-radius | @radius-large | -

package/dist/grid/grid.vue

@@ -22,12 +22,13 @@
   </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 tools from '../common/utils.wxs';
 import { isObject } from '../common/validator';
+
 import props from './props';
-import tools from '../common/utils.wxs';
-import { ParentMixin, RELATION_MAP } from '../common/relation';
 
 
 const name = `${prefix}-grid`;

package/dist/grid-item/README.en-US.md

@@ -45,7 +45,7 @@ t-class-text | \-
 ### 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-grid-item-bg-color | @bg-color-container | -
 --td-grid-item-description-color | @text-color-placeholder | -

package/dist/grid-item/README.md

@@ -45,7 +45,7 @@ t-class-text | 文本样式类
 ### CSS Variables
 
 组件提供了下列 CSS 变量，可用于自定义样式。
-名称 | 默认值 | 描述 
+名称 | 默认值 | 描述
 -- | -- | --
 --td-grid-item-bg-color | @bg-color-container | -
 --td-grid-item-description-color | @text-color-placeholder | -

package/dist/grid-item/grid-item.vue

@@ -118,17 +118,19 @@
   </view>
 </template>
 <script>
-import TImage from '../image/image';
-import TIcon from '../icon/icon';
 import TBadge from '../badge/badge';
 
-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 { uniqueFactory, setIcon } from '../common/utils';
-import { isObject } from '../common/validator';
 import tools from '../common/utils.wxs';
-import { ChildrenMixin, RELATION_MAP } from '../common/relation';
+import { isObject } from '../common/validator';
+import TIcon from '../icon/icon';
+import TImage from '../image/image';
+
+import props from './props';
 
 
 const name = `${prefix}-grid-item`;

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

@@ -70,7 +70,7 @@ title | String | - | title of current step | N
 ### 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-guide-body-color | @text-color-secondary | -
 --td-guide-dialog-body-font | @font-body-large | -

package/dist/guide/README.md

@@ -109,7 +109,7 @@ title | String | - | 当前步骤的标题内容，支持插槽：slot="title-{{
 ### CSS Variables
 
 组件提供了下列 CSS 变量，可用于自定义样式。
-名称 | 默认值 | 描述 
+名称 | 默认值 | 描述
 -- | -- | --
 --td-guide-body-color | @text-color-secondary | -
 --td-guide-dialog-body-font | @font-body-large | -

package/dist/guide/guide.vue

@@ -210,18 +210,19 @@
 </template>
 
 <script>
-import TOverlay from '../overlay/overlay';
-import TPopup from '../popup/popup';
-import { uniComponent } from '../common/src/index';
-import props from './props';
 import { prefix } from '../common/config';
-import { isFunction, isNumeric } from '../common/validator';
+import { uniComponent } from '../common/src/index';
 import { debounce, getRect, rpx2px, styles, unitConvert, nextTick, systemInfo, coalesce } from '../common/utils';
+import { isFunction, isNumeric } from '../common/validator';
+import usingConfig from '../mixins/using-config';
+import useCustomNavbar from '../mixins/using-custom-navbar';
+import TOverlay from '../overlay/overlay';
+import TPopup from '../popup/popup';
+
 import ContentComp from './content.vue';
+import props from './props';
 
-import useCustomNavbar from '../mixins/using-custom-navbar';
 
-import usingConfig from '../mixins/using-config';
 const componentName = 'guide';
 const name = `${prefix}-${componentName}`;
 

package/dist/icon/icon.vue

@@ -24,12 +24,15 @@
   </view>
 </template>
 <script>
-import { uniComponent } from '../common/src/index';
 import { prefix } from '../common/config';
-import props from './props';
+import { uniComponent } from '../common/src/index';
+
+
 import { styles, addUnit, getRect } from '../common/utils';
 import tools from '../common/utils.wxs';
 
+import props from './props';
+
 
 const name = `${prefix}-icon`;
 export default {

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

@@ -43,7 +43,7 @@ t-class-load | \-
 ### 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-image-color | @text-color-placeholder | -
 --td-image-loading-bg-color | @bg-color-secondarycontainer | -

package/dist/image/README.md

@@ -80,7 +80,7 @@ t-class-load | 加载样式类
 ### CSS Variables
 
 组件提供了下列 CSS 变量，可用于自定义样式。
-名称 | 默认值 | 描述 
+名称 | 默认值 | 描述
 -- | -- | --
 --td-image-color | @text-color-placeholder | -
 --td-image-loading-bg-color | @bg-color-secondarycontainer | -

package/dist/image/image.vue

@@ -83,14 +83,15 @@
   </view>
 </template>
 <script>
-import TLoading from '../loading/loading';
-import TIcon from '../icon/icon';
-import { uniComponent } from '../common/src/index';
-import ImageProps from './props';
 import { prefix } from '../common/config';
+import { uniComponent } from '../common/src/index';
 import { addUnit, getRect, appBaseInfo } from '../common/utils';
-import { compareVersion } from '../common/version';
 import tools from '../common/utils.wxs';
+import { compareVersion } from '../common/version';
+import TIcon from '../icon/icon';
+import TLoading from '../loading/loading';
+
+import ImageProps from './props';
 
 
 const name = `${prefix}-image`;

package/dist/image-viewer/README.en-US.md

@@ -14,10 +14,11 @@ image-props | Object | - | Typescript: `ImageProps`，[Image API Documents](./im
 images | Array | [] | Typescript: `Array<string>` | N
 initial-index | Number | 0 | Typescript: `Number` | N
 lazy | Boolean | true | \- | N
+max-zoom | Number | 3 | \- | N
 show-index | Boolean | false | \- | N
 using-custom-navbar | Boolean | false | \- | N
-visible | Boolean | false | hide or show image viewer。`v-model:visible` is supported | N
-default-visible | Boolean | false | hide or show image viewer。uncontrolled property | N
+visible | Boolean | false | hide or show image viewer。`v-model:visible` is supported。Typescript: `boolean \| null` | N
+default-visible | Boolean | false | hide or show image viewer。uncontrolled property。Typescript: `boolean \| null` | N
 
 ### ImageViewer Events
 
@@ -37,7 +38,7 @@ delete-btn | \-
 ### 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-image-viewer-close-margin-left | @spacer-1 | -
 --td-image-viewer-delete-margin-right | @spacer-1 | -

package/dist/image-viewer/README.md

@@ -45,10 +45,11 @@ image-props | Object | - | 透传至 Image 组件。TS 类型：`ImageProps`，[
 images | Array | [] | 图片数组。TS 类型：`Array<string>` | N
 initial-index | Number | 0 | 初始化页码。TS 类型：`Number` | N
 lazy | Boolean | true | 是否开启图片懒加载。开启后会预加载当前图片、相邻图片 | N
+max-zoom | Number | 3 | 图片最大放大比例 | N
 show-index | Boolean | false | 是否显示页码 | N
 using-custom-navbar | Boolean | false | 是否使用了自定义导航栏 | N
-visible | Boolean | false | 隐藏/显示预览。支持语法糖 `v-model:visible` | N
-default-visible | Boolean | false | 隐藏/显示预览。非受控属性 | N
+visible | Boolean | false | 隐藏/显示预览。支持语法糖 `v-model:visible`。TS 类型：`boolean \| null` | N
+default-visible | Boolean | false | 隐藏/显示预览。非受控属性。TS 类型：`boolean \| null` | N
 
 ### ImageViewer Events
 
@@ -68,7 +69,7 @@ delete-btn | 删除操作
 ### CSS Variables
 
 组件提供了下列 CSS 变量，可用于自定义样式。
-名称 | 默认值 | 描述 
+名称 | 默认值 | 描述
 -- | -- | --
 --td-image-viewer-close-margin-left | @spacer-1 | -
 --td-image-viewer-delete-margin-right | @spacer-1 | -

package/dist/image-viewer/image-viewer.css

@@ -28,6 +28,18 @@
 .t-image-viewer .swiper {
   outline: 0;
 }
+.t-image-viewer__movable-area {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+.t-image-viewer__movable-view {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
 .t-image-viewer__image {
   width: 100%;
   display: inline-block;

package/dist/image-viewer/image-viewer.vue

@@ -7,7 +7,6 @@
     :aria-modal="true"
     aria-role="dialog"
     aria-label="图片查看器"
-    @touchmove.stop.prevent="true"
   >
     <view
       :class="classPrefix + '__mask'"
@@ -15,6 +14,7 @@
       :style="'' + tools._style([backgroundColor && '--td-image-viewer-mask-bg-color: ' + backgroundColor])"
       aria-role="button"
       aria-label="关闭"
+      @touchmove.prevent="() => {}"
       @click="(e) => onClose(e, 'overlay')"
     />
     <block v-if="images && images.length">
@@ -33,21 +33,42 @@
             :key="index"
             :class="classPrefix + '__preview-image'"
           >
-            <t-image
-              v-if="!lazy || shouldLoadImage(index, currentSwiperIndex, loadedImageIndexes)"
-              :t-class="prefix + '-image--external'"
-              :class="classPrefix + '__image'"
-              :custom-style="(imagesStyle[index] && imagesStyle[index].style) || ''"
-              :data-index="index"
-              :src="item"
-              :mode="(imageProps && imageProps.mode) || 'aspectFit'"
-              :lazy="(imageProps && imageProps.lazy) || false"
-              :loading="(imageProps && imageProps.loading) || 'default'"
-              :shape="(imageProps && imageProps.shape) || 'square'"
-              :webp="(imageProps && imageProps.webp) || false"
-              :show-menu-by-longpress="(imageProps && imageProps.showMenuByLongpress) || false"
-              @load="(e) => onImageLoadSuccess(e, { index })"
-            />
+            <movable-area
+              :class="classPrefix + '__movable-area'"
+              scale-area
+              @touchmove="onAreaTouchMove"
+            >
+              <movable-view
+                :class="classPrefix + '__movable-view'"
+                direction="all"
+                :scale="true"
+                :scale-min="1"
+                :scale-max="maxZoom"
+                :scale-value="index === currentSwiperIndex ? currentScale : 1"
+                :damping="100"
+                :friction="20"
+                :out-of-bounds="false"
+                :disabled="false"
+                @scale="onMovableScale"
+                @tap.stop="onImageDoubleTap(index)"
+              >
+                <t-image
+                  v-if="!lazy || shouldLoadImage(index, currentSwiperIndex, loadedImageIndexes)"
+                  :t-class="prefix + '-image--external'"
+                  :class="classPrefix + '__image'"
+                  :custom-style="(imagesStyle[index] && imagesStyle[index].style) || ''"
+                  :data-index="index"
+                  :src="item"
+                  :mode="(imageProps && imageProps.mode) || 'aspectFit'"
+                  :lazy="(imageProps && imageProps.lazy) || false"
+                  :loading="(imageProps && imageProps.loading) || 'default'"
+                  :shape="(imageProps && imageProps.shape) || 'square'"
+                  :webp="(imageProps && imageProps.webp) || false"
+                  :show-menu-by-longpress="(imageProps && imageProps.showMenuByLongpress) || false"
+                  @load="(e) => onImageLoadSuccess(e, { index })"
+                />
+              </movable-view>
+            </movable-area>
           </swiper-item>
         </swiper>
       </view>
@@ -111,16 +132,21 @@
   </view>
 </template>
 <script>
-import TImage from '../image/image';
-import TIcon from '../icon/icon';
+import { prefix } from '../common/config';
 import { uniComponent } from '../common/src/index';
 import { styles, calcIcon, systemInfo } from '../common/utils';
-import { prefix } from '../common/config';
-import props from './props';
+
+
 import tools from '../common/utils.wxs';
-import { shouldLoadImage } from './computed.js';
+import TIcon from '../icon/icon';
+import TImage from '../image/image';
+
+
 import useCustomNavbar from '../mixins/using-custom-navbar';
 
+import { shouldLoadImage } from './computed.js';
+import props from './props';
+
 
 const name = `${prefix}-image-viewer`;
 
@@ -161,6 +187,8 @@ export default {
         iDeleteBtn: null,
         iCloseBtn: null,
         dataVisible: this.visible,
+        currentScale: 1,
+        lastTapTime: 0,
       };
     },
     watch: {
@@ -297,11 +325,46 @@ export default {
         const {
           detail: { current },
         } = e;
+        // 切换图片时重置缩放，避免上一张的缩放状态影响当前图
+        this.currentScale = 1;
         this.currentSwiperIndex = current;
 
         this._trigger('change', { index: current });
       },
 
+      onMovableScale(e) {
+        const scale = e?.detail?.scale ?? 1;
+        this.currentScale = scale;
+      },
+
+      onAreaTouchMove(e) {
+        // 当图片处于缩放状态时，阻止 touchmove 冒泡到 swiper，避免误触翻页（H5 端兜底）
+        // movable-view 自身仍会响应拖动/pinch，不受影响
+        // 注：小程序端原生 swiper 滑动手势底层接管，stopPropagation 无效，留作平台限制
+        if (this.currentScale > 1) {
+          if (e && typeof e.stopPropagation === 'function') {
+            e.stopPropagation();
+          }
+          if (e && typeof e.preventDefault === 'function') {
+            e.preventDefault();
+          }
+        }
+      },
+
+      onImageDoubleTap(index) {
+        // 仅响应当前图片，避免影响其它 swiper-item
+        if (index !== this.currentSwiperIndex) return;
+        const now = Date.now();
+        if (now - this.lastTapTime < 300) {
+          // 双击：在 1 与 maxZoom 之间切换
+          const max = Number(this.maxZoom) || 3;
+          this.currentScale = this.currentScale > 1 ? 1 : max;
+          this.lastTapTime = 0;
+        } else {
+          this.lastTapTime = now;
+        }
+      },
+
       onClose(e, source) {
         this._trigger('close', { visible: false, trigger: source || 'button', index: this.currentSwiperIndex });
       },

package/dist/image-viewer/props.ts

@@ -40,6 +40,11 @@ export default {
     type: Boolean,
     default: true,
   },
+  /** 图片最大放大比例 */
+  maxZoom: {
+    type: Number,
+    default: 3,
+  },
   /** 是否显示页码 */
   showIndex: Boolean,
   /** 是否使用了自定义导航栏 */

package/dist/image-viewer/type.ts

@@ -41,6 +41,11 @@ export interface TdImageViewerProps {
    * @default true
    */
   lazy?: boolean;
+  /**
+   * 图片最大放大比例
+   * @default 3
+   */
+  maxZoom?: number;
   /**
    * 是否显示页码
    * @default false
@@ -60,7 +65,7 @@ export interface TdImageViewerProps {
    * 隐藏/显示预览，非受控属性
    * @default false
    */
-  defaultVisible?: boolean;
+  defaultVisible?: boolean | null;
   /**
    * 翻页时回调
    */

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

@@ -52,7 +52,7 @@ t-class-sidebar-item | \-
 ### 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-indexes-sidebar-active-bg-color | @brand-color | -
 --td-indexes-sidebar-active-color | @text-color-anti | -

package/dist/indexes/README.md

@@ -83,7 +83,7 @@ t-class-sidebar-item | 侧边栏选项样式类
 ### CSS Variables
 
 组件提供了下列 CSS 变量，可用于自定义样式。
-名称 | 默认值 | 描述 
+名称 | 默认值 | 描述
 -- | -- | --
 --td-indexes-sidebar-active-bg-color | @brand-color | -
 --td-indexes-sidebar-active-color | @text-color-anti | -

package/dist/indexes/computed.js

@@ -1,4 +1,8 @@
-export function getFirstCharacter(str) {
-  return str.toString().substring(0, 1);
+export function getFirstCharacter(str, showFullIndex) {
+  const res = str.toString();
+  if (showFullIndex) {
+    return res;
+  }
+  return res.substring(0, 1);
 }
 

package/dist/indexes/indexes.css

@@ -5,17 +5,22 @@
 .t-indexes__sidebar {
   position: fixed;
   right: var(--td-indexes-sidebar-right, 16rpx);
-  width: var(--td-indexes-sidebar-item-size, 40rpx);
   color: var(--td-indexes-sidebar-color, var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9))));
   font: var(--td-indexes-sidebar-font, var(--td-font-body-small, 24rpx / 40rpx var(--td-font-family, PingFang SC, Microsoft YaHei, Arial Regular)));
   display: flex;
+  align-items: center;
+  justify-content: center;
   flex-flow: column nowrap;
   top: 50%;
   transform: translateY(-50%);
   z-index: 1;
 }
 .t-indexes__sidebar-item {
-  border-radius: 50%;
+  min-width: var(--td-indexes-sidebar-item-size, 40rpx);
+  height: var(--td-indexes-sidebar-item-size, 40rpx);
+  padding: 0 calc(var(--td-spacer, 16rpx) / 2);
+  box-sizing: border-box;
+  border-radius: var(--td-indexes-sidebar-item-size, 40rpx);
   position: relative;
   text-align: center;
 }