@tuya-miniapp/smart-ui 2.3.0-beta-8 → 2.3.0-beta-9

package/dist/circle/index.js

@@ -9,13 +9,12 @@ function percentToDecimal(percent) {
     percent = percent.replace('%', '');
     return percent / 100;
 }
+const idListRef = {
+    value: [],
+};
 SmartComponent({
     props: {
         className: String,
-        canvasId: {
-            type: String,
-            value: 'circle_' + Date.now(),
-        },
         customStyle: String,
         size: {
             type: String,
@@ -44,7 +43,9 @@ SmartComponent({
             type: Number,
             value: 0,
             observer(val) {
-                this.render(val);
+                if (this.data.canvasId) {
+                    this.render(val, this.data.canvasId);
+                }
             },
         },
         mode: {
@@ -57,7 +58,44 @@ SmartComponent({
             value: true,
         },
     },
+    data: {
+        canvasId: '',
+        dpr: 1,
+    },
+    created() {
+        this.initId();
+        this.initRate();
+    },
+    mounted() {
+        this.render(this.data.percent, this.data.canvasId);
+    },
+    destroyed() {
+        idListRef.value = idListRef.value.filter(id => id !== this.data.canvasId);
+    },
     methods: {
+        initId() {
+            if (this.data.canvasId)
+                return;
+            const id = `smart-ui-circle_${String(+new Date()).slice(-4)}_${String(Math.random()).slice(-2)}`;
+            if (idListRef.value.includes(id)) {
+                this.initId();
+                return;
+            }
+            this.setData({
+                canvasId: id,
+            });
+            idListRef.value.push(id);
+        },
+        initRate() {
+            wx.getSystemInfo({
+                success: res => {
+                    const dpr = res.pixelRatio; // 获取设备像素比
+                    this.setData({
+                        dpr: dpr,
+                    });
+                },
+            });
+        },
         renderAll(canvas, ctx, progress, ops = {
             lineCap: 'round',
         }) {
@@ -97,6 +135,7 @@ SmartComponent({
                 }
                 ctx.setLineCap(ops.lineCap); // 设置圆角效果
                 ctx.stroke();
+                ctx.scale(canvas.dpr, canvas.dpr);
                 ctx.draw();
             }
             // 示例：绘制不同的进度条
@@ -141,6 +180,7 @@ SmartComponent({
                 }
                 ctx.setLineCap(ops.lineCap); // 设置圆角效果
                 ctx.stroke();
+                ctx.scale(canvas.dpr, canvas.dpr);
                 ctx.draw();
             }
             // 示例：绘制不同的进度条
@@ -196,24 +236,29 @@ SmartComponent({
                 }
                 ctx.setLineCap(ops.lineCap); // 设置圆角效果
                 ctx.stroke();
+                ctx.scale(canvas.dpr, canvas.dpr);
                 ctx.draw();
             }
             // 示例：绘制不同的进度条
             drawProgressBar(progress, canvas.fillColor); // 25%的蓝色进度条
         },
-        render(val) {
+        render(val, canvasId) {
             // @ts-ignore
-            const context = ty.createCanvasContext(this.data.canvasId);
+            const context = ty.createCanvasContext(canvasId);
             const sizeVal = this.parseSize();
             const params = {
-                width: sizeVal,
-                height: sizeVal,
+                canvasWidth: +sizeVal,
+                canvasHeight: +sizeVal,
+                width: +sizeVal,
+                height: +sizeVal,
                 lineWidth: this.data.trackWidth,
                 trackColor: this.data.trackColor,
                 fillColor: this.data.fillColor,
                 fillColorStops: this.data.fillColorStops,
                 maskColor: this.data.maskColor,
+                dpr: this.data.dpr,
             };
+            this.setData(params);
             if (this.data.mode === 'basic') {
                 this.renderAll(params, context, val / 100, this.data.round ? { lineCap: 'round' } : { lineCap: '' });
             }

package/dist/circle/index.wxml

@@ -1 +1,9 @@
-<canvas class="smart-progress-circle" type="2d" canvas-id="{{canvasId}}" style="width: {{size}}; height:{{size}};"></canvas>
+<canvas 
+  class="smart-progress-circle" 
+  type="2d" 
+  wx:if="{{canvasId}}" 
+  width="{{ canvasWidth * dpr }}"
+  height="{{ canvasHeight * dpr }}"
+  canvas-id="{{canvasId}}" 
+  style="width: {{width}}px; height:{{height}}px;"
+></canvas>

package/dist/common/utils.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="node" />
 /// <reference types="miniprogram-api-typings" />
 /// <reference types="miniprogram-api-typings" />
 /// <reference types="miniprogram-api-typings" />
@@ -8,7 +7,7 @@ export { getSystemInfoSync } from './version';
 export declare function range(num: number, min: number, max: number): number;
 export declare function nextTick(cb: (...args: any[]) => void): void;
 export declare function addUnit(value?: string | number): string | undefined;
-export declare function requestAnimationFrame(cb: () => void): NodeJS.Timeout;
+export declare function requestAnimationFrame(cb?: () => void): Promise<void>;
 export declare function pickExclude(obj: unknown, keys: string[]): {};
 export declare function getRect(context: WechatMiniprogram.Component.TrivialInstance, selector: string): Promise<WechatMiniprogram.BoundingClientRectCallbackResult>;
 export declare function getAllRect(context: WechatMiniprogram.Component.TrivialInstance, selector: string): Promise<WechatMiniprogram.BoundingClientRectCallbackResult[]>;

package/dist/common/utils.js

@@ -23,9 +23,12 @@ export function addUnit(value) {
     return isNumber(value) ? `${value}px` : value;
 }
 export function requestAnimationFrame(cb) {
-    return setTimeout(() => {
-        cb();
-    }, 1000 / 30);
+    return new Promise(resolve => {
+        setTimeout(() => {
+            cb === null || cb === void 0 ? void 0 : cb();
+            resolve();
+        }, 1000 / 30);
+    });
 }
 export function pickExclude(obj, keys) {
     if (!isPlainObject(obj)) {

package/dist/datetime-picker/index.js

@@ -114,6 +114,9 @@ SmartComponent({
         },
         formatterFunc(type, value, data) {
             var _a, _b;
+            if (type === 'part') {
+                return value === 0 ? this.data.amText : this.data.pmText;
+            }
             const { formatterMap, formatter = defaultFormatter } = (_a = this === null || this === void 0 ? void 0 : this.data) !== null && _a !== void 0 ? _a : data;
             const mapDetail = formatterMap === null || formatterMap === void 0 ? void 0 : formatterMap[type];
             if (typeof mapDetail === 'string') {
@@ -339,8 +342,8 @@ SmartComponent({
                     part,
                 });
                 values = [
-                    part,
-                    formatter('hour', part ? (!hour ? 12 : hour - 12) : hour, this.data),
+                    formatter('part', part, this.data),
+                    formatter('hour', part ? (!hour ? '12' : (hour - 12).toString().padStart(2, '0')) : hour, this.data),
                     formatter('minute', minute, this.data),
                 ];
             }

package/dist/dialog/dialog.js

@@ -82,6 +82,7 @@ const Dialog = (options) => {
     prom.catch(err => {
         appLog.info(`Dialog promise Error`, err);
         console.log(err, '---Dialog-error');
+        queueRef.value = [];
     });
     return prom;
 };

package/dist/dialog/index.js

@@ -191,5 +191,12 @@ SmartComponent({
                 callback(actionType, this);
             }
         },
+        // 兜底防止 通过api方式打开组件失败 导致队列没有清除
+        onPopUpError() {
+            const { callback, actionType } = this.data;
+            if (callback) {
+                callback(actionType, this);
+            }
+        },
     },
 });

package/dist/dialog/index.wxml

@@ -17,6 +17,8 @@
   bind:before-leave="onBeforeLeave"
   bind:leave="onLeave"
   bind:after-leave="onAfterLeave"
+  bind:enter-error="onPopUpError"
+  bind:leave-error="onPopUpError"
 >
   <view
     wx:if="{{ title || useTitleSlot }}"

package/dist/mixins/transition.js

@@ -1,5 +1,13 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 // @ts-nocheck
-import appLog from '../common/appLog';
 import { requestAnimationFrame } from '../common/utils';
 import { isObj } from '../common/validator';
 const getClassNames = (name) => ({
@@ -32,6 +40,8 @@ export function transition(showDefaultValue) {
             type: '',
             inited: false,
             display: false,
+            animating: false,
+            status: '',
         },
         ready() {
             if (this.data.show === true) {
@@ -40,110 +50,100 @@ export function transition(showDefaultValue) {
         },
         methods: {
             observeShow(value, old) {
-                appLog.info(`transition component observeShow value: ${value};old: ${old}`);
                 if (value === old) {
                     return;
                 }
                 value ? this.enter() : this.leave();
             },
             enter() {
-                if (this.enterFinishedPromise)
+                if (this.enterFinishedPromise || this.data.animating)
                     return;
-                appLog.info(`transition component enter success`);
-                this.enterFinishedPromise = new Promise(resolve => {
+                this.setData({
+                    animating: true,
+                    status: 'enter',
+                });
+                // eslint-disable-next-line no-async-promise-executor
+                this.enterFinishedPromise = new Promise((resolve) => __awaiter(this, void 0, void 0, function* () {
                     const { duration, name } = this.data;
                     const classNames = getClassNames(name);
                     const currentDuration = isObj(duration) ? duration.enter : duration;
-                    if (this.status === 'enter') {
-                        return;
-                    }
-                    this.status = 'enter';
                     this.$emit('before-enter');
-                    requestAnimationFrame(() => {
-                        if (this.status !== 'enter') {
-                            return;
-                        }
-                        this.$emit('enter');
+                    yield requestAnimationFrame();
+                    this.$emit('enter');
+                    this.setData({
+                        inited: true,
+                        display: true,
+                        classes: classNames.enter,
+                        currentDuration,
+                    });
+                    yield requestAnimationFrame();
+                    this.transitionEnded = false;
+                    this.setData({ classes: classNames['enter-to'] });
+                    clearTimeout(this.timer);
+                    this.timer = setTimeout(() => {
+                        this.$emit(`after-enter`);
                         this.setData({
-                            inited: true,
-                            display: true,
-                            classes: classNames.enter,
-                            currentDuration,
+                            animating: false,
                         });
-                        requestAnimationFrame(() => {
-                            if (this.status !== 'enter') {
-                                return;
-                            }
-                            this.transitionEnded = false;
-                            appLog.info(`transition component enter transitionEnded false`);
-                            this.setData({ classes: classNames['enter-to'] });
-                            resolve();
-                        });
-                    });
-                });
+                        this.checkShowStatus();
+                    }, currentDuration + 20);
+                    resolve();
+                }));
                 this.enterFinishedPromise.catch(err => {
                     this.enterFinishedPromise = null;
-                    appLog.info(`enter enterFinishedPromise catch`, err);
                     console.log(err, '---error-enter');
+                    this.$emit('enter-error', err);
                 });
             },
             leave() {
-                if (!this.enterFinishedPromise)
-                    return;
-                appLog.info(`transition component leave success`);
-                this.enterFinishedPromise
-                    .then(() => {
-                    if (!this.data.display) {
+                return __awaiter(this, void 0, void 0, function* () {
+                    if (!this.enterFinishedPromise || this.data.animating)
                         return;
-                    }
-                    const { duration, name } = this.data;
-                    const classNames = getClassNames(name);
-                    const currentDuration = isObj(duration) ? duration.leave : duration;
-                    this.status = 'leave';
-                    this.$emit('before-leave');
-                    requestAnimationFrame(() => {
-                        if (this.status !== 'leave') {
-                            return;
-                        }
+                    this.setData({
+                        animating: true,
+                        status: 'leave',
+                    });
+                    this.enterFinishedPromise
+                        .then(() => __awaiter(this, void 0, void 0, function* () {
+                        const { duration, name } = this.data;
+                        const classNames = getClassNames(name);
+                        const currentDuration = isObj(duration) ? duration.leave : duration;
+                        this.$emit('before-leave');
+                        yield requestAnimationFrame();
                         this.$emit('leave');
                         this.setData({
                             classes: classNames.leave,
                             currentDuration,
                         });
-                        requestAnimationFrame(() => {
-                            if (this.status !== 'leave') {
-                                return;
-                            }
-                            this.transitionEnded = false;
-                            appLog.info(`transition component leave transitionEnded false`);
-                            setTimeout(() => {
-                                this.enterFinishedPromise = null;
-                                appLog.info(`transition component enterFinishedPromise cleared`);
-                                this.onTransitionEnd();
-                            }, currentDuration);
-                            this.setData({ classes: classNames['leave-to'] });
-                        });
+                        yield requestAnimationFrame();
+                        this.transitionEnded = false;
+                        clearTimeout(this.timer);
+                        setTimeout(() => {
+                            this.enterFinishedPromise = null;
+                            this.$emit(`after-leave`);
+                            this.setData({ display: false });
+                            this.setData({
+                                animating: false,
+                            });
+                            this.checkShowStatus();
+                        }, currentDuration + 20);
+                        this.setData({ classes: classNames['leave-to'] });
+                    }))
+                        .catch(err => {
+                        this.enterFinishedPromise = null;
+                        console.log(err, '---error-leave');
+                        this.$emit('leave-error', err);
                     });
-                })
-                    .catch(err => {
-                    this.enterFinishedPromise = null;
-                    appLog.info(`leave enterFinishedPromise catch`, err);
-                    console.log(err, '---error-enter');
                 });
             },
-            onTransitionEnd() {
-                appLog.info(`transition component in transitionEnded ${this.transitionEnded}`);
-                if (this.transitionEnded) {
-                    return;
-                }
-                this.transitionEnded = true;
-                appLog.info(`transition component in transitionEnded true`);
-                this.$emit(`after-${this.status}`);
-                appLog.info(`transition component onTransitionEnd ${this.status} success`);
-                const { show, display } = this.data;
-                if (!show && display) {
-                    this.setData({ display: false });
-                }
+            checkShowStatus() {
+                return __awaiter(this, void 0, void 0, function* () {
+                    const { status, show } = this.data;
+                    yield requestAnimationFrame();
+                    if ((status === 'enter' && show) || (status === 'leave' && !show))
+                        return;
+                    show ? this.enter() : this.leave();
+                });
             },
         },
     });

package/dist/popover/index.css

@@ -1 +1 @@
-@import '../common/index.css';.smart-popover{--overlay-background-color:transparent;position:relative}.smart-popover,.smart-popover-button{display:inline-block}.smart-popover-overlay{background-color:var(--popover-background-color,var(--app-B4,#fff));border-radius:var(--popover-border-radius,12px);box-shadow:var(--popover-box-shadow,0 6px 12px 0 rgba(0,0,0,.1));padding:var(--popover-padding,12px);position:absolute;z-index:102}.smart-popover-overlay-arrow{background-position:50%;background-repeat:no-repeat;position:absolute}
+@import '../common/index.css';.smart-popover{--overlay-background-color:transparent;position:relative}.smart-popover,.smart-popover-button{display:inline-block}.smart-popover-overlay{background-color:var(--popover-background-color,var(--app-B4,#fff));border-radius:var(--popover-border-radius,12px);box-shadow:var(--popover-box-shadow,0 6px 12px 0 rgba(0,0,0,.1));opacity:0;padding:var(--popover-padding,12px);position:absolute;transition:opacity .3s ease-in-out;z-index:102}.smart-popover-overlay-arrow{background-position:50%;background-repeat:no-repeat;position:absolute}

package/dist/popover/index.js

@@ -1,6 +1,5 @@
 /* eslint-disable prefer-destructuring */
 import { SmartComponent } from '../common/component';
-import { transition } from '../mixins/transition';
 const IconSrc = (deg) => `<svg style="transform: rotate(${deg})" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="18.00000052453666" height="6.000001573609978" viewBox="0 0 18.00000052453666 6.000001573609978"><g transform="matrix(-1,-8.742277657347586e-8,-8.742277657347586e-8,1,36.00000104907346,0.0000015736100241790166)"><path d="M18.026037824536658,0.006179333609978323C18.827028524536658,0.014487173609978322,19.72353052453666,0.026256673609978323,20.50303052453666,0.3038745736099783C21.34506052453666,0.6038775736099783,21.90250052453666,1.1284215736099783,22.46337052453666,1.7457315736099783C22.867160524536658,2.1897415736099783,23.66033052453666,3.137051573609978,24.04654052453666,3.5944415736099784C24.36263052453666,3.9694415736099784,24.98139052453666,4.710681573609978,25.31923052453666,5.0693015736099785C25.74452052453666,5.520461573609978,26.270210524536658,6.000001573609978,27.00036052453666,6.000001573609978C27.730510524536662,6.000001573609978,28.25600052453666,5.520461573609978,28.681000524536657,5.069761573609978C29.01880052453666,4.711371573609978,29.63760052453666,3.969671573609978,29.95390052453666,3.5949015736099783C30.33970052453666,3.137511573609978,31.13280052453666,2.1902015736099782,31.53690052453666,1.7461915736099782C32.09870052453666,1.1288815736099784,32.65520052453666,0.6043385736099783,33.49700052453666,0.3043355736099783C34.276700524536665,0.027410573609978322,35.17340052453666,0.014948673609978322,35.97390052453666,0.006640913609978322C36.811100524536656,-0.0018975863900216774,17.189137524536658,-0.0023591663900216775,18.026037824536658,0.006179333609978323Z" fill-rule="evenodd" fill="#FFFFFF" fill-opacity="1"/></g></svg>`;
 function createSvgIcon(svg) {
     return `data:image/svg+xml,${encodeURIComponent(`<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">${svg}`)}`;
@@ -15,7 +14,6 @@ SmartComponent({
         'leave-to-class',
         'close-icon-class',
     ],
-    mixins: [transition(false)],
     props: {
         // `top`、`topLeft`、`topRight`、`bottom`、`bottomLeft`、`bottomRight`、`left`、`leftTop`、`leftBottom`、`right`、`rightTop`、`rightBottom`
         placement: {
@@ -26,9 +24,12 @@ SmartComponent({
             type: Boolean,
             observer(value) {
                 if (value !== this.data.currentShow) {
-                    this.setData({
-                        currentShow: value,
-                    });
+                    if (value) {
+                        this.onOpen();
+                    }
+                    else {
+                        this.onClose();
+                    }
                 }
             },
         },
@@ -42,10 +43,10 @@ SmartComponent({
         },
         duration: {
             type: Number,
-            value: 2000,
+            value: 20000,
         },
     },
-    data: { currentShow: false },
+    data: { currentShow: false, showStyle: '' },
     mounted() { },
     created() { },
     methods: {
@@ -157,10 +158,18 @@ SmartComponent({
             this.setData(params);
         },
         onClick() {
+            this.onOpen();
+        },
+        onOpen() {
             this.getButtonPosition();
             this.setData({
                 currentShow: true,
             });
+            setTimeout(() => {
+                this.setData({
+                    showStyle: 'opacity: 1;',
+                });
+            }, 100);
             this.$emit('show-change', true);
             if (this.data.duration) {
                 setTimeout(() => {
@@ -170,10 +179,15 @@ SmartComponent({
         },
         onClose() {
             this.setData({
-                currentShow: false,
+                showStyle: 'opacity: 0;',
             });
-            this.$emit('show-change', false);
-            this.$emit('close', false);
+            setTimeout(() => {
+                this.setData({
+                    currentShow: false,
+                });
+                this.$emit('show-change', false);
+                this.$emit('close', false);
+            }, 300);
         },
     },
 });

package/dist/popover/index.json

@@ -1,7 +1,6 @@
 {
   "component": true,
   "usingComponents": {
-    "smart-transition": "../transition/index",
     "smart-overlay": "../overlay/index"
   }
 }

package/dist/popover/index.wxml

@@ -12,14 +12,12 @@
    
   </smart-overlay>
 
-  <view class="smart-popover-button" id="{{popoverId}}" catch:tap="onClick">
+  <view class="smart-popover-button" catch:tap="onClick">
     <slot />
-    <smart-transition show="{{currentShow}}">
-      <view  class="smart-popover-overlay" style="left: {{left}};top: {{top}}; bottom:{{bottom}};right:{{right}}; transform:{{transform}}; {{customStyle}}">
-        <slot name="overlay" />
-        <view class="smart-popover-overlay-arrow" style="background-image: url('{{iconSrc}}'); transform: {{iconTransform}}; {{iconPos}}: {{iconPosVal}}px;width: {{iconWidth}};height:{{iconHeight}};background-size: {{iconWidth}} {{iconHeight}};{{iconStyle}}"></view>
-      </view>
-    </smart-transition>
+    <view wx:if="{{currentShow}}" class="smart-popover-overlay" style="left: {{left}};top: {{top}}; bottom:{{bottom}};right:{{right}}; transform:{{transform}}; {{customStyle}}; {{showStyle}}">
+      <slot name="overlay" />
+      <view class="smart-popover-overlay-arrow" style="background-image: url('{{iconSrc}}'); transform: {{iconTransform}}; {{iconPos}}: {{iconPosVal}}px;width: {{iconWidth}};height:{{iconHeight}};background-size: {{iconWidth}} {{iconHeight}};{{iconStyle}}"></view>
+    </view>
   </view>
 
 </view>

package/dist/popover/index.wxss

@@ -1 +1 @@
-@import '../common/index.wxss';.smart-popover{--overlay-background-color:transparent;position:relative}.smart-popover,.smart-popover-button{display:inline-block}.smart-popover-overlay{background-color:var(--popover-background-color,var(--app-B4,#fff));border-radius:var(--popover-border-radius,12px);box-shadow:var(--popover-box-shadow,0 6px 12px 0 rgba(0,0,0,.1));padding:var(--popover-padding,12px);position:absolute;z-index:102}.smart-popover-overlay-arrow{background-position:50%;background-repeat:no-repeat;position:absolute}
+@import '../common/index.wxss';.smart-popover{--overlay-background-color:transparent;position:relative}.smart-popover,.smart-popover-button{display:inline-block}.smart-popover-overlay{background-color:var(--popover-background-color,var(--app-B4,#fff));border-radius:var(--popover-border-radius,12px);box-shadow:var(--popover-box-shadow,0 6px 12px 0 rgba(0,0,0,.1));opacity:0;padding:var(--popover-padding,12px);position:absolute;transition:opacity .3s ease-in-out;z-index:102}.smart-popover-overlay-arrow{background-position:50%;background-repeat:no-repeat;position:absolute}

package/dist/popup/popup.wxml

@@ -4,7 +4,6 @@
   wx:if="{{ inited }}"
   class="custom-class {{ classes }} {{ utils.bem('popup', [position, { round, safeTop: safeAreaInsetTop, safeTabBar: safeAreaTabBar }]) }}"
   style="{{ computed.popupStyle({ zIndex, currentDuration, display, customStyle, bottomSafeHeight }) }}"
-  bind:transitionend="onTransitionEnd"
   catch:touchmove="{{ lockScroll ? 'noop' : ''}}"
 >
   <slot />

package/dist/transition/index.wxml

@@ -4,7 +4,6 @@
   wx:if="{{ inited }}"
   class="smart-transition custom-class {{ classes }}"
   style="{{ computed.rootStyle({ currentDuration, display, customStyle }) }}"
-  bind:transitionend="onTransitionEnd"
 >
   <slot />
 </view>

package/lib/circle/index.js

@@ -11,13 +11,12 @@ function percentToDecimal(percent) {
     percent = percent.replace('%', '');
     return percent / 100;
 }
+var idListRef = {
+    value: [],
+};
 (0, component_1.SmartComponent)({
     props: {
         className: String,
-        canvasId: {
-            type: String,
-            value: 'circle_' + Date.now(),
-        },
         customStyle: String,
         size: {
             type: String,
@@ -46,7 +45,9 @@ function percentToDecimal(percent) {
             type: Number,
             value: 0,
             observer: function (val) {
-                this.render(val);
+                if (this.data.canvasId) {
+                    this.render(val, this.data.canvasId);
+                }
             },
         },
         mode: {
@@ -59,7 +60,46 @@ function percentToDecimal(percent) {
             value: true,
         },
     },
+    data: {
+        canvasId: '',
+        dpr: 1,
+    },
+    created: function () {
+        this.initId();
+        this.initRate();
+    },
+    mounted: function () {
+        this.render(this.data.percent, this.data.canvasId);
+    },
+    destroyed: function () {
+        var _this = this;
+        idListRef.value = idListRef.value.filter(function (id) { return id !== _this.data.canvasId; });
+    },
     methods: {
+        initId: function () {
+            if (this.data.canvasId)
+                return;
+            var id = "smart-ui-circle_".concat(String(+new Date()).slice(-4), "_").concat(String(Math.random()).slice(-2));
+            if (idListRef.value.includes(id)) {
+                this.initId();
+                return;
+            }
+            this.setData({
+                canvasId: id,
+            });
+            idListRef.value.push(id);
+        },
+        initRate: function () {
+            var _this = this;
+            wx.getSystemInfo({
+                success: function (res) {
+                    var dpr = res.pixelRatio; // 获取设备像素比
+                    _this.setData({
+                        dpr: dpr,
+                    });
+                },
+            });
+        },
         renderAll: function (canvas, ctx, progress, ops) {
             if (ops === void 0) { ops = {
                 lineCap: 'round',
@@ -100,6 +140,7 @@ function percentToDecimal(percent) {
                 }
                 ctx.setLineCap(ops.lineCap); // 设置圆角效果
                 ctx.stroke();
+                ctx.scale(canvas.dpr, canvas.dpr);
                 ctx.draw();
             }
             // 示例：绘制不同的进度条
@@ -145,6 +186,7 @@ function percentToDecimal(percent) {
                 }
                 ctx.setLineCap(ops.lineCap); // 设置圆角效果
                 ctx.stroke();
+                ctx.scale(canvas.dpr, canvas.dpr);
                 ctx.draw();
             }
             // 示例：绘制不同的进度条
@@ -201,24 +243,29 @@ function percentToDecimal(percent) {
                 }
                 ctx.setLineCap(ops.lineCap); // 设置圆角效果
                 ctx.stroke();
+                ctx.scale(canvas.dpr, canvas.dpr);
                 ctx.draw();
             }
             // 示例：绘制不同的进度条
             drawProgressBar(progress, canvas.fillColor); // 25%的蓝色进度条
         },
-        render: function (val) {
+        render: function (val, canvasId) {
             // @ts-ignore
-            var context = ty.createCanvasContext(this.data.canvasId);
+            var context = ty.createCanvasContext(canvasId);
             var sizeVal = this.parseSize();
             var params = {
-                width: sizeVal,
-                height: sizeVal,
+                canvasWidth: +sizeVal,
+                canvasHeight: +sizeVal,
+                width: +sizeVal,
+                height: +sizeVal,
                 lineWidth: this.data.trackWidth,
                 trackColor: this.data.trackColor,
                 fillColor: this.data.fillColor,
                 fillColorStops: this.data.fillColorStops,
                 maskColor: this.data.maskColor,
+                dpr: this.data.dpr,
             };
+            this.setData(params);
             if (this.data.mode === 'basic') {
                 this.renderAll(params, context, val / 100, this.data.round ? { lineCap: 'round' } : { lineCap: '' });
             }

package/lib/circle/index.wxml

@@ -1 +1,9 @@
-<canvas class="smart-progress-circle" type="2d" canvas-id="{{canvasId}}" style="width: {{size}}; height:{{size}};"></canvas>
+<canvas 
+  class="smart-progress-circle" 
+  type="2d" 
+  wx:if="{{canvasId}}" 
+  width="{{ canvasWidth * dpr }}"
+  height="{{ canvasHeight * dpr }}"
+  canvas-id="{{canvasId}}" 
+  style="width: {{width}}px; height:{{height}}px;"
+></canvas>

package/lib/common/utils.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="node" />
 /// <reference types="miniprogram-api-typings" />
 /// <reference types="miniprogram-api-typings" />
 /// <reference types="miniprogram-api-typings" />
@@ -8,7 +7,7 @@ export { getSystemInfoSync } from './version';
 export declare function range(num: number, min: number, max: number): number;
 export declare function nextTick(cb: (...args: any[]) => void): void;
 export declare function addUnit(value?: string | number): string | undefined;
-export declare function requestAnimationFrame(cb: () => void): NodeJS.Timeout;
+export declare function requestAnimationFrame(cb?: () => void): Promise<void>;
 export declare function pickExclude(obj: unknown, keys: string[]): {};
 export declare function getRect(context: WechatMiniprogram.Component.TrivialInstance, selector: string): Promise<WechatMiniprogram.BoundingClientRectCallbackResult>;
 export declare function getAllRect(context: WechatMiniprogram.Component.TrivialInstance, selector: string): Promise<WechatMiniprogram.BoundingClientRectCallbackResult[]>;

package/lib/common/utils.js

@@ -31,9 +31,12 @@ function addUnit(value) {
 }
 exports.addUnit = addUnit;
 function requestAnimationFrame(cb) {
-    return setTimeout(function () {
-        cb();
-    }, 1000 / 30);
+    return new Promise(function (resolve) {
+        setTimeout(function () {
+            cb === null || cb === void 0 ? void 0 : cb();
+            resolve();
+        }, 1000 / 30);
+    });
 }
 exports.requestAnimationFrame = requestAnimationFrame;
 function pickExclude(obj, keys) {

package/lib/datetime-picker/index.js

@@ -146,6 +146,9 @@ var defaultFormatter = function (type, value) {
         formatterFunc: function (type, value, data) {
             var _a;
             var _b, _c;
+            if (type === 'part') {
+                return value === 0 ? this.data.amText : this.data.pmText;
+            }
             var _d = (_b = this === null || this === void 0 ? void 0 : this.data) !== null && _b !== void 0 ? _b : data, formatterMap = _d.formatterMap, _e = _d.formatter, formatter = _e === void 0 ? defaultFormatter : _e;
             var mapDetail = formatterMap === null || formatterMap === void 0 ? void 0 : formatterMap[type];
             if (typeof mapDetail === 'string') {
@@ -375,8 +378,8 @@ var defaultFormatter = function (type, value) {
                     part: part,
                 });
                 values = [
-                    part,
-                    formatter('hour', part ? (!hour ? 12 : hour - 12) : hour, this.data),
+                    formatter('part', part, this.data),
+                    formatter('hour', part ? (!hour ? '12' : (hour - 12).toString().padStart(2, '0')) : hour, this.data),
                     formatter('minute', minute, this.data),
                 ];
             }

package/lib/dialog/dialog.js

@@ -99,6 +99,7 @@ var Dialog = function (options) {
     prom.catch(function (err) {
         appLog_1.default.info("Dialog promise Error", err);
         console.log(err, '---Dialog-error');
+        queueRef.value = [];
     });
     return prom;
 };

package/lib/dialog/index.js

@@ -199,5 +199,12 @@ var dialog_1 = require("./dialog");
                 callback(actionType, this);
             }
         },
+        // 兜底防止 通过api方式打开组件失败 导致队列没有清除
+        onPopUpError: function () {
+            var _a = this.data, callback = _a.callback, actionType = _a.actionType;
+            if (callback) {
+                callback(actionType, this);
+            }
+        },
     },
 });

package/lib/dialog/index.wxml

@@ -17,6 +17,8 @@
   bind:before-leave="onBeforeLeave"
   bind:leave="onLeave"
   bind:after-leave="onAfterLeave"
+  bind:enter-error="onPopUpError"
+  bind:leave-error="onPopUpError"
 >
   <view
     wx:if="{{ title || useTitleSlot }}"

package/lib/mixins/transition.js

@@ -1,11 +1,43 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.transition = void 0;
 // @ts-nocheck
-var appLog_1 = __importDefault(require("../common/appLog"));
 var utils_1 = require("../common/utils");
 var validator_1 = require("../common/validator");
 var getClassNames = function (name) { return ({
@@ -38,6 +70,8 @@ function transition(showDefaultValue) {
             type: '',
             inited: false,
             display: false,
+            animating: false,
+            status: '',
         },
         ready: function () {
             if (this.data.show === true) {
@@ -46,7 +80,6 @@ function transition(showDefaultValue) {
         },
         methods: {
             observeShow: function (value, old) {
-                appLog_1.default.info("transition component observeShow value: ".concat(value, ";old: ").concat(old));
                 if (value === old) {
                     return;
                 }
@@ -54,104 +87,131 @@ function transition(showDefaultValue) {
             },
             enter: function () {
                 var _this = this;
-                if (this.enterFinishedPromise)
+                if (this.enterFinishedPromise || this.data.animating)
                     return;
-                appLog_1.default.info("transition component enter success");
-                this.enterFinishedPromise = new Promise(function (resolve) {
-                    var _a = _this.data, duration = _a.duration, name = _a.name;
-                    var classNames = getClassNames(name);
-                    var currentDuration = (0, validator_1.isObj)(duration) ? duration.enter : duration;
-                    if (_this.status === 'enter') {
-                        return;
-                    }
-                    _this.status = 'enter';
-                    _this.$emit('before-enter');
-                    (0, utils_1.requestAnimationFrame)(function () {
-                        if (_this.status !== 'enter') {
-                            return;
+                this.setData({
+                    animating: true,
+                    status: 'enter',
+                });
+                // eslint-disable-next-line no-async-promise-executor
+                this.enterFinishedPromise = new Promise(function (resolve) { return __awaiter(_this, void 0, void 0, function () {
+                    var _a, duration, name, classNames, currentDuration;
+                    var _this = this;
+                    return __generator(this, function (_b) {
+                        switch (_b.label) {
+                            case 0:
+                                _a = this.data, duration = _a.duration, name = _a.name;
+                                classNames = getClassNames(name);
+                                currentDuration = (0, validator_1.isObj)(duration) ? duration.enter : duration;
+                                this.$emit('before-enter');
+                                return [4 /*yield*/, (0, utils_1.requestAnimationFrame)()];
+                            case 1:
+                                _b.sent();
+                                this.$emit('enter');
+                                this.setData({
+                                    inited: true,
+                                    display: true,
+                                    classes: classNames.enter,
+                                    currentDuration: currentDuration,
+                                });
+                                return [4 /*yield*/, (0, utils_1.requestAnimationFrame)()];
+                            case 2:
+                                _b.sent();
+                                this.transitionEnded = false;
+                                this.setData({ classes: classNames['enter-to'] });
+                                clearTimeout(this.timer);
+                                this.timer = setTimeout(function () {
+                                    _this.$emit("after-enter");
+                                    _this.setData({
+                                        animating: false,
+                                    });
+                                    _this.checkShowStatus();
+                                }, currentDuration + 20);
+                                resolve();
+                                return [2 /*return*/];
                         }
-                        _this.$emit('enter');
-                        _this.setData({
-                            inited: true,
-                            display: true,
-                            classes: classNames.enter,
-                            currentDuration: currentDuration,
-                        });
-                        (0, utils_1.requestAnimationFrame)(function () {
-                            if (_this.status !== 'enter') {
-                                return;
-                            }
-                            _this.transitionEnded = false;
-                            appLog_1.default.info("transition component enter transitionEnded false");
-                            _this.setData({ classes: classNames['enter-to'] });
-                            resolve();
-                        });
                     });
-                });
+                }); });
                 this.enterFinishedPromise.catch(function (err) {
                     _this.enterFinishedPromise = null;
-                    appLog_1.default.info("enter enterFinishedPromise catch", err);
                     console.log(err, '---error-enter');
+                    _this.$emit('enter-error', err);
                 });
             },
             leave: function () {
-                var _this = this;
-                if (!this.enterFinishedPromise)
-                    return;
-                appLog_1.default.info("transition component leave success");
-                this.enterFinishedPromise
-                    .then(function () {
-                    if (!_this.data.display) {
-                        return;
-                    }
-                    var _a = _this.data, duration = _a.duration, name = _a.name;
-                    var classNames = getClassNames(name);
-                    var currentDuration = (0, validator_1.isObj)(duration) ? duration.leave : duration;
-                    _this.status = 'leave';
-                    _this.$emit('before-leave');
-                    (0, utils_1.requestAnimationFrame)(function () {
-                        if (_this.status !== 'leave') {
-                            return;
-                        }
-                        _this.$emit('leave');
-                        _this.setData({
-                            classes: classNames.leave,
-                            currentDuration: currentDuration,
+                return __awaiter(this, void 0, void 0, function () {
+                    var _this = this;
+                    return __generator(this, function (_a) {
+                        if (!this.enterFinishedPromise || this.data.animating)
+                            return [2 /*return*/];
+                        this.setData({
+                            animating: true,
+                            status: 'leave',
                         });
-                        (0, utils_1.requestAnimationFrame)(function () {
-                            if (_this.status !== 'leave') {
-                                return;
-                            }
-                            _this.transitionEnded = false;
-                            appLog_1.default.info("transition component leave transitionEnded false");
-                            setTimeout(function () {
-                                _this.enterFinishedPromise = null;
-                                appLog_1.default.info("transition component enterFinishedPromise cleared");
-                                _this.onTransitionEnd();
-                            }, currentDuration);
-                            _this.setData({ classes: classNames['leave-to'] });
+                        this.enterFinishedPromise
+                            .then(function () { return __awaiter(_this, void 0, void 0, function () {
+                            var _a, duration, name, classNames, currentDuration;
+                            var _this = this;
+                            return __generator(this, function (_b) {
+                                switch (_b.label) {
+                                    case 0:
+                                        _a = this.data, duration = _a.duration, name = _a.name;
+                                        classNames = getClassNames(name);
+                                        currentDuration = (0, validator_1.isObj)(duration) ? duration.leave : duration;
+                                        this.$emit('before-leave');
+                                        return [4 /*yield*/, (0, utils_1.requestAnimationFrame)()];
+                                    case 1:
+                                        _b.sent();
+                                        this.$emit('leave');
+                                        this.setData({
+                                            classes: classNames.leave,
+                                            currentDuration: currentDuration,
+                                        });
+                                        return [4 /*yield*/, (0, utils_1.requestAnimationFrame)()];
+                                    case 2:
+                                        _b.sent();
+                                        this.transitionEnded = false;
+                                        clearTimeout(this.timer);
+                                        setTimeout(function () {
+                                            _this.enterFinishedPromise = null;
+                                            _this.$emit("after-leave");
+                                            _this.setData({ display: false });
+                                            _this.setData({
+                                                animating: false,
+                                            });
+                                            _this.checkShowStatus();
+                                        }, currentDuration + 20);
+                                        this.setData({ classes: classNames['leave-to'] });
+                                        return [2 /*return*/];
+                                }
+                            });
+                        }); })
+                            .catch(function (err) {
+                            _this.enterFinishedPromise = null;
+                            console.log(err, '---error-leave');
+                            _this.$emit('leave-error', err);
                         });
+                        return [2 /*return*/];
                     });
-                })
-                    .catch(function (err) {
-                    _this.enterFinishedPromise = null;
-                    appLog_1.default.info("leave enterFinishedPromise catch", err);
-                    console.log(err, '---error-enter');
                 });
             },
-            onTransitionEnd: function () {
-                appLog_1.default.info("transition component in transitionEnded ".concat(this.transitionEnded));
-                if (this.transitionEnded) {
-                    return;
-                }
-                this.transitionEnded = true;
-                appLog_1.default.info("transition component in transitionEnded true");
-                this.$emit("after-".concat(this.status));
-                appLog_1.default.info("transition component onTransitionEnd ".concat(this.status, " success"));
-                var _a = this.data, show = _a.show, display = _a.display;
-                if (!show && display) {
-                    this.setData({ display: false });
-                }
+            checkShowStatus: function () {
+                return __awaiter(this, void 0, void 0, function () {
+                    var _a, status, show;
+                    return __generator(this, function (_b) {
+                        switch (_b.label) {
+                            case 0:
+                                _a = this.data, status = _a.status, show = _a.show;
+                                return [4 /*yield*/, (0, utils_1.requestAnimationFrame)()];
+                            case 1:
+                                _b.sent();
+                                if ((status === 'enter' && show) || (status === 'leave' && !show))
+                                    return [2 /*return*/];
+                                show ? this.enter() : this.leave();
+                                return [2 /*return*/];
+                        }
+                    });
+                });
             },
         },
     });

package/lib/popover/index.css

@@ -1 +1 @@
-@import '../common/index.css';.smart-popover{--overlay-background-color:transparent;position:relative}.smart-popover,.smart-popover-button{display:inline-block}.smart-popover-overlay{background-color:var(--popover-background-color,var(--app-B4,#fff));border-radius:var(--popover-border-radius,12px);box-shadow:var(--popover-box-shadow,0 6px 12px 0 rgba(0,0,0,.1));padding:var(--popover-padding,12px);position:absolute;z-index:102}.smart-popover-overlay-arrow{background-position:50%;background-repeat:no-repeat;position:absolute}
+@import '../common/index.css';.smart-popover{--overlay-background-color:transparent;position:relative}.smart-popover,.smart-popover-button{display:inline-block}.smart-popover-overlay{background-color:var(--popover-background-color,var(--app-B4,#fff));border-radius:var(--popover-border-radius,12px);box-shadow:var(--popover-box-shadow,0 6px 12px 0 rgba(0,0,0,.1));opacity:0;padding:var(--popover-padding,12px);position:absolute;transition:opacity .3s ease-in-out;z-index:102}.smart-popover-overlay-arrow{background-position:50%;background-repeat:no-repeat;position:absolute}

package/lib/popover/index.js

@@ -13,7 +13,6 @@ var __assign = (this && this.__assign) || function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 /* eslint-disable prefer-destructuring */
 var component_1 = require("../common/component");
-var transition_1 = require("../mixins/transition");
 var IconSrc = function (deg) {
     return "<svg style=\"transform: rotate(".concat(deg, ")\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" fill=\"none\" version=\"1.1\" width=\"18.00000052453666\" height=\"6.000001573609978\" viewBox=\"0 0 18.00000052453666 6.000001573609978\"><g transform=\"matrix(-1,-8.742277657347586e-8,-8.742277657347586e-8,1,36.00000104907346,0.0000015736100241790166)\"><path d=\"M18.026037824536658,0.006179333609978323C18.827028524536658,0.014487173609978322,19.72353052453666,0.026256673609978323,20.50303052453666,0.3038745736099783C21.34506052453666,0.6038775736099783,21.90250052453666,1.1284215736099783,22.46337052453666,1.7457315736099783C22.867160524536658,2.1897415736099783,23.66033052453666,3.137051573609978,24.04654052453666,3.5944415736099784C24.36263052453666,3.9694415736099784,24.98139052453666,4.710681573609978,25.31923052453666,5.0693015736099785C25.74452052453666,5.520461573609978,26.270210524536658,6.000001573609978,27.00036052453666,6.000001573609978C27.730510524536662,6.000001573609978,28.25600052453666,5.520461573609978,28.681000524536657,5.069761573609978C29.01880052453666,4.711371573609978,29.63760052453666,3.969671573609978,29.95390052453666,3.5949015736099783C30.33970052453666,3.137511573609978,31.13280052453666,2.1902015736099782,31.53690052453666,1.7461915736099782C32.09870052453666,1.1288815736099784,32.65520052453666,0.6043385736099783,33.49700052453666,0.3043355736099783C34.276700524536665,0.027410573609978322,35.17340052453666,0.014948673609978322,35.97390052453666,0.006640913609978322C36.811100524536656,-0.0018975863900216774,17.189137524536658,-0.0023591663900216775,18.026037824536658,0.006179333609978323Z\" fill-rule=\"evenodd\" fill=\"#FFFFFF\" fill-opacity=\"1\"/></g></svg>");
 };
@@ -30,7 +29,6 @@ function createSvgIcon(svg) {
         'leave-to-class',
         'close-icon-class',
     ],
-    mixins: [(0, transition_1.transition)(false)],
     props: {
         // `top`、`topLeft`、`topRight`、`bottom`、`bottomLeft`、`bottomRight`、`left`、`leftTop`、`leftBottom`、`right`、`rightTop`、`rightBottom`
         placement: {
@@ -41,9 +39,12 @@ function createSvgIcon(svg) {
             type: Boolean,
             observer: function (value) {
                 if (value !== this.data.currentShow) {
-                    this.setData({
-                        currentShow: value,
-                    });
+                    if (value) {
+                        this.onOpen();
+                    }
+                    else {
+                        this.onClose();
+                    }
                 }
             },
         },
@@ -57,10 +58,10 @@ function createSvgIcon(svg) {
         },
         duration: {
             type: Number,
-            value: 2000,
+            value: 20000,
         },
     },
-    data: { currentShow: false },
+    data: { currentShow: false, showStyle: '' },
     mounted: function () { },
     created: function () { },
     methods: {
@@ -172,11 +173,19 @@ function createSvgIcon(svg) {
             this.setData(params);
         },
         onClick: function () {
+            this.onOpen();
+        },
+        onOpen: function () {
             var _this = this;
             this.getButtonPosition();
             this.setData({
                 currentShow: true,
             });
+            setTimeout(function () {
+                _this.setData({
+                    showStyle: 'opacity: 1;',
+                });
+            }, 100);
             this.$emit('show-change', true);
             if (this.data.duration) {
                 setTimeout(function () {
@@ -185,11 +194,17 @@ function createSvgIcon(svg) {
             }
         },
         onClose: function () {
+            var _this = this;
             this.setData({
-                currentShow: false,
+                showStyle: 'opacity: 0;',
             });
-            this.$emit('show-change', false);
-            this.$emit('close', false);
+            setTimeout(function () {
+                _this.setData({
+                    currentShow: false,
+                });
+                _this.$emit('show-change', false);
+                _this.$emit('close', false);
+            }, 300);
         },
     },
 });

package/lib/popover/index.json

@@ -1,7 +1,6 @@
 {
   "component": true,
   "usingComponents": {
-    "smart-transition": "../transition/index",
     "smart-overlay": "../overlay/index"
   }
 }

package/lib/popover/index.wxml

@@ -12,14 +12,12 @@
    
   </smart-overlay>
 
-  <view class="smart-popover-button" id="{{popoverId}}" catch:tap="onClick">
+  <view class="smart-popover-button" catch:tap="onClick">
     <slot />
-    <smart-transition show="{{currentShow}}">
-      <view  class="smart-popover-overlay" style="left: {{left}};top: {{top}}; bottom:{{bottom}};right:{{right}}; transform:{{transform}}; {{customStyle}}">
-        <slot name="overlay" />
-        <view class="smart-popover-overlay-arrow" style="background-image: url('{{iconSrc}}'); transform: {{iconTransform}}; {{iconPos}}: {{iconPosVal}}px;width: {{iconWidth}};height:{{iconHeight}};background-size: {{iconWidth}} {{iconHeight}};{{iconStyle}}"></view>
-      </view>
-    </smart-transition>
+    <view wx:if="{{currentShow}}" class="smart-popover-overlay" style="left: {{left}};top: {{top}}; bottom:{{bottom}};right:{{right}}; transform:{{transform}}; {{customStyle}}; {{showStyle}}">
+      <slot name="overlay" />
+      <view class="smart-popover-overlay-arrow" style="background-image: url('{{iconSrc}}'); transform: {{iconTransform}}; {{iconPos}}: {{iconPosVal}}px;width: {{iconWidth}};height:{{iconHeight}};background-size: {{iconWidth}} {{iconHeight}};{{iconStyle}}"></view>
+    </view>
   </view>
 
 </view>

package/lib/popover/index.wxss

@@ -1 +1 @@
-@import '../common/index.wxss';.smart-popover{--overlay-background-color:transparent;position:relative}.smart-popover,.smart-popover-button{display:inline-block}.smart-popover-overlay{background-color:var(--popover-background-color,var(--app-B4,#fff));border-radius:var(--popover-border-radius,12px);box-shadow:var(--popover-box-shadow,0 6px 12px 0 rgba(0,0,0,.1));padding:var(--popover-padding,12px);position:absolute;z-index:102}.smart-popover-overlay-arrow{background-position:50%;background-repeat:no-repeat;position:absolute}
+@import '../common/index.wxss';.smart-popover{--overlay-background-color:transparent;position:relative}.smart-popover,.smart-popover-button{display:inline-block}.smart-popover-overlay{background-color:var(--popover-background-color,var(--app-B4,#fff));border-radius:var(--popover-border-radius,12px);box-shadow:var(--popover-box-shadow,0 6px 12px 0 rgba(0,0,0,.1));opacity:0;padding:var(--popover-padding,12px);position:absolute;transition:opacity .3s ease-in-out;z-index:102}.smart-popover-overlay-arrow{background-position:50%;background-repeat:no-repeat;position:absolute}

package/lib/popup/popup.wxml

@@ -4,7 +4,6 @@
   wx:if="{{ inited }}"
   class="custom-class {{ classes }} {{ utils.bem('popup', [position, { round, safeTop: safeAreaInsetTop, safeTabBar: safeAreaTabBar }]) }}"
   style="{{ computed.popupStyle({ zIndex, currentDuration, display, customStyle, bottomSafeHeight }) }}"
-  bind:transitionend="onTransitionEnd"
   catch:touchmove="{{ lockScroll ? 'noop' : ''}}"
 >
   <slot />

package/lib/transition/index.wxml

@@ -4,7 +4,6 @@
   wx:if="{{ inited }}"
   class="smart-transition custom-class {{ classes }}"
   style="{{ computed.rootStyle({ currentDuration, display, customStyle }) }}"
-  bind:transitionend="onTransitionEnd"
 >
   <slot />
 </view>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tuya-miniapp/smart-ui",
-  "version": "2.3.0-beta-8",
+  "version": "2.3.0-beta-9",
   "author": "MiniApp Team",
   "license": "MIT",
   "miniprogram": "lib",