@tdesign/uniapp 0.9.0 → 0.9.1

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/indexes.vue

@@ -38,14 +38,17 @@
 </template>
 <script>
 
-import { uniComponent } from '../common/src/index';
 import { prefix } from '../common/config';
-import props from './props';
+import { ParentMixin, RELATION_MAP } from '../common/relation';
+import { uniComponent } from '../common/src/index';
+
+
 import { getRect, throttle, systemInfo } from '../common/utils';
-import pageScrollMixin from '../mixins/page-scroll';
 import tools from '../common/utils.wxs';
+import pageScrollMixin from '../mixins/page-scroll';
+
 import { getFirstCharacter } from './computed.js';
-import { ParentMixin, RELATION_MAP } from '../common/relation';
+import props from './props';
 
 
 const name = `${prefix}-indexes`;

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

@@ -11,7 +11,7 @@ index | String / Number | - | \- | 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-indexes-anchor-active-bg-color | @bg-color-container | -
 --td-indexes-anchor-active-color | @brand-color | -

package/dist/indexes-anchor/README.md

@@ -15,7 +15,7 @@ t-class | 根节点样式类
 ### CSS Variables
 
 组件提供了下列 CSS 变量，可用于自定义样式。
-名称 | 默认值 | 描述 
+名称 | 默认值 | 描述
 -- | -- | --
 --td-indexes-anchor-active-bg-color | @bg-color-container | -
 --td-indexes-anchor-active-color | @brand-color | -

package/dist/indexes-anchor/indexes-anchor.vue

@@ -20,11 +20,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 { ChildrenMixin, RELATION_MAP } from '../common/relation';
+import { uniComponent } from '../common/src/index';
+
+import tools from '../common/utils.wxs';
+
+import props from './props';
 
 
 const name = `${prefix}-indexes-anchor`;

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

@@ -93,7 +93,7 @@ t-class-tips | \-
 ### 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-input-align-items | center | -
 --td-input-bg-color | @bg-color-container | -

package/dist/input/README.md

@@ -164,7 +164,7 @@ t-class-tips | 提示样式类
 ### CSS Variables
 
 组件提供了下列 CSS 变量，可用于自定义样式。
-名称 | 默认值 | 描述 
+名称 | 默认值 | 描述
 -- | -- | --
 --td-input-align-items | center | -
 --td-input-bg-color | @bg-color-container | -

package/dist/input/input.vue

@@ -305,8 +305,8 @@ export default {
       },
 
       emitChange(data) {
-        this.$emit('change', data);
         this.$emit('update:value', data.value);
+        this.$emit('change', data);
       },
 
       onFocus(e) {

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

@@ -48,7 +48,7 @@ t-class-suffix-icon | \-
 ### 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-link-danger-active-color | @error-color-active | -
 --td-link-danger-color | @error-color | -

package/dist/link/README.md

@@ -98,7 +98,7 @@ t-class-suffix-icon | 后置图标样式类
 ### CSS Variables
 
 组件提供了下列 CSS 变量，可用于自定义样式。
-名称 | 默认值 | 描述 
+名称 | 默认值 | 描述
 -- | -- | --
 --td-link-danger-active-color | @error-color-active | -
 --td-link-danger-color | @error-color | -

package/dist/link/link.vue

@@ -72,12 +72,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 { calcIcon, coalesce } from '../common/utils';
 import tools from '../common/utils.wxs';
+import TIcon from '../icon/icon';
+
+import props from './props';
 
 
 const name = `${prefix}-link`;

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

@@ -40,7 +40,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-loading-color | @brand-color | -
 --td-loading-full-bg-color | rgba(255, 255, 255, 0.6) | -

package/dist/loading/README.md

@@ -89,7 +89,7 @@ t-class-text | 文本样式类
 ### CSS Variables
 
 组件提供了下列 CSS 变量，可用于自定义样式。
-名称 | 默认值 | 描述 
+名称 | 默认值 | 描述
 -- | -- | --
 --td-loading-color | @brand-color | -
 --td-loading-full-bg-color | rgba(255, 255, 255, 0.6) | -

package/dist/loading/loading.vue

@@ -88,11 +88,13 @@
   </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 tools from '../common/utils.wxs';
 
+import props from './props';
+
 
 const name = `${prefix}-loading`;
 

package/dist/message/index.js

@@ -1,6 +1,7 @@
-import { MessageType } from './message.interface';
 import { getInstance } from '../common/utils';
 
+import { MessageType } from './message.interface';
+
 
 const showMessage = function (options, theme = MessageType.info) {
   const { context, selector = '#t-message', ...otherOptions } = options;

package/dist/message/message.vue

@@ -34,12 +34,13 @@
 </template>
 
 <script>
-import TMessageItem from '../message-item/message-item.vue';
-import { uniComponent } from '../common/src/index';
 import { prefix } from '../common/config';
+import { uniComponent } from '../common/src/index';
+import { unitConvert } from '../common/utils';
+import TMessageItem from '../message-item/message-item.vue';
+
 import { MessageType } from './message.interface';
 import props from './props';
-import { unitConvert } from '../common/utils';
 
 
 const SHOW_DURATION = 400;

package/dist/message-item/index.js

@@ -1,5 +1,5 @@
-import { MessageType } from '../message/message.interface';
 import { getInstance } from '../common/utils';
+import { MessageType } from '../message/message.interface';
 
 
 const showMessage = function (options, theme = MessageType.info) {

package/dist/message-item/message-item.vue

@@ -89,16 +89,18 @@
   </view>
 </template>
 <script>
-import TIcon from '../icon/icon';
-import TLink from '../link/link';
-import { uniComponent } from '../common/src/index';
 import { prefix } from '../common/config';
+import { uniComponent } from '../common/src/index';
 import { getRect, unitConvert, calcIcon } from '../common/utils';
-import { isObject } from '../common/validator';
 import tools from '../common/utils.wxs';
-import { getMessageStyles } from './computed.js';
+import { isObject } from '../common/validator';
+import TIcon from '../icon/icon';
+import TLink from '../link/link';
+
 import { messageDefaultData } from '../message/config';
 
+import { getMessageStyles } from './computed.js';
+
 
 const SHOW_DURATION = 400;
 const name = `${prefix}-message`;

package/dist/mixins/page-scroll.js

@@ -1,5 +1,5 @@
-import { getCurrentPage } from '../common/utils';
 import Bus from '../common/bus';
+import { getCurrentPage } from '../common/utils';
 
 const overflowScrollReg = /scroll|auto|overlay/i;