@tuya-miniapp/smart-ui 2.3.8-beta-4 → 2.3.8-beta-5

package/example/dist/dialog/demo/index.js

@@ -0,0 +1,135 @@
+import { SmartComponent } from '../../common/component';
+import DialogInstance from '../../dialog/dialog';
+const message = 'Body';
+SmartComponent({
+    data: {
+        show: false,
+        inputValue: '',
+    },
+    methods: {
+        showCustomDialog() {
+            this.setData({ show: true });
+        },
+        getUserInfo(event) {
+            console.log(event.detail);
+        },
+        onClickThemeAlert() {
+            console.log('=== click theme alert');
+            DialogInstance.alert({
+                context: this,
+                title: 'Title',
+                theme: 'round-button',
+                icon: false,
+                message,
+                confirmButtonText: I18n.t('confirm'),
+                cancelButtonText: I18n.t('cancel'),
+            });
+        },
+        onClickThemeAlert2() {
+            console.log('=== 222 click theme alert');
+            DialogInstance.alert({
+                context: this,
+                theme: 'round-button',
+                message,
+                showCancelButton: true,
+                confirmButtonText: I18n.t('confirm'),
+                cancelButtonText: I18n.t('cancel'),
+            });
+        },
+        onClickAlert() {
+            DialogInstance.alert({
+                context: this,
+                title: 'Title',
+                icon: false,
+                message,
+                confirmButtonText: I18n.t('confirm'),
+                cancelButtonText: I18n.t('cancel'),
+            });
+        },
+        onClickAlert2() {
+            DialogInstance.alert({
+                context: this,
+                message: 'Title',
+                confirmButtonText: I18n.t('confirm'),
+                cancelButtonText: I18n.t('cancel'),
+            });
+        },
+        onClickConfirm() {
+            DialogInstance.confirm({
+                context: this,
+                title: 'Title',
+                icon: false,
+                message,
+                cancelButtonText: 'Sub Action',
+                confirmButtonText: I18n.t('confirm'),
+            });
+        },
+        onClickConfirmIcon() {
+            DialogInstance.confirm({
+                context: this,
+                title: 'Title',
+                icon: true,
+                message,
+                cancelButtonText: 'Sub Action',
+                confirmButtonText: I18n.t('confirm'),
+            });
+        },
+        onClickInput() {
+            const beforeClose = (action, value) => new Promise((resolve) => {
+                setTimeout(() => {
+                    if (action === 'confirm') {
+                        // 不存在输入值则拦截确认操作
+                        resolve(!!value);
+                    }
+                    else {
+                        resolve(true);
+                    }
+                }, 1000);
+            });
+            DialogInstance.input({
+                context: this,
+                title: 'Title',
+                value: this.data.inputValue,
+                cancelButtonText: 'Sub Action',
+                beforeClose,
+                confirmButtonText: I18n.t('confirm'),
+            })
+                .then((res) => {
+                var _a;
+                console.log('=== onConfirm', res);
+                const inputValue = (_a = res === null || res === void 0 ? void 0 : res.data) === null || _a === void 0 ? void 0 : _a.inputValue;
+                this.setData({ inputValue });
+            })
+                .catch((res) => {
+                console.log('=== onCancel', res);
+            });
+        },
+        onClickAsyncClose() {
+            const beforeClose = (action) => new Promise((resolve) => {
+                setTimeout(() => {
+                    if (action === 'confirm') {
+                        resolve(true);
+                    }
+                    else {
+                        // 拦截取消操作
+                        resolve(false);
+                    }
+                }, 1000);
+            });
+            DialogInstance.confirm({
+                context: this,
+                title: 'Title',
+                icon: false,
+                message,
+                beforeClose,
+                confirmButtonText: I18n.t('confirm'),
+                cancelButtonText: I18n.t('cancel'),
+            });
+        },
+        onClose() {
+            this.setData({
+                show: false,
+            });
+        },
+    },
+});

package/example/dist/dialog/demo/index.json

@@ -0,0 +1,8 @@
+{
+  "component": true,
+  "usingComponents": {
+    "smart-cell": "../../cell/index",
+    "smart-dialog": "../../dialog/index",
+    "demo-block": "../../../components/demo-block/index"
+  }
+}

package/example/dist/dialog/demo/index.wxml

@@ -0,0 +1,42 @@
+<demo-block card title="{{I18n.t('promptPopup')}}" padding>
+  <smart-cell title="{{I18n.t('promptPopup')}}" bind:click="onClickAlert" is-link />
+  <smart-cell title="{{I18n.t('hintPopupNoTitle')}}" bind:click="onClickAlert2" is-link />
+  <smart-cell title="{{I18n.t('confirmationPopup')}}" bind:click="onClickConfirm" is-link />
+  <smart-cell title="{{I18n.t('warningConfirmationDialog')}}" bind:click="onClickConfirmIcon" is-link />
+</demo-block>
+
+<demo-block card title="{{I18n.t('roundedButtonStyle')}}" padding>
+  <smart-cell title="{{I18n.t('promptPopup')}}" bind:click="onClickThemeAlert" is-link />
+  <smart-cell title="{{I18n.t('promptPopupNoTitle')}}" bind:click="onClickThemeAlert2" is-link />
+</demo-block>
+
+<demo-block card title="{{I18n.t('asynchronousShutdown')}}" padding>
+  <smart-cell title="{{I18n.t('asynchronousShutdown')}}" bind:click="onClickAsyncClose" />
+  <smart-cell title="{{I18n.t('inputConfirmationPopup')}}" bind:click="onClickInput" />
+</demo-block>
+
+<demo-block card title="{{I18n.t('componentInvocation')}}" padding>
+  <smart-cell title="{{I18n.t('imageTipPopup')}}" bind:click="showCustomDialog" />
+</demo-block>
+
+<smart-dialog
+  use-slot
+  title="Title"
+  show="{{ show }}"
+  show-cancel-button
+  bind:close="onClose"
+  confirm-button-open-type="getUserInfo"
+  bind:getuserinfo="getUserInfo"
+>
+  <view class="demo-imageWrapper">
+    <image
+      class="demo-image"
+      src="https://static1.tuyacn.com/static/tuya-miniapp-doc/_next/static/images/logo-small.png"
+    />
+  </view>
+  <view class="demo-text">
+    <text>Body</text>
+  </view>
+</smart-dialog>
+
+<smart-dialog id="smart-dialog" />

package/example/dist/dialog/demo/index.wxss

@@ -0,0 +1 @@
+@import '../../common/index.wxss';.demo-imageWrapper{align-items:center;background:var(--app-B1,#f6f7fb);display:flex;height:180px;justify-content:center;margin:auto;width:279px}.demo-image{height:88px;width:88px}.demo-text{color:var(--app-B4-N3,rgba(0,0,0,.5));font-size:14px;line-height:16px;padding:8px 0 24px;text-align:center}

package/example/dist/dialog/dialog.d.ts

@@ -0,0 +1,71 @@
+/// <reference types="miniprogram-api-typings" />
+/// <reference types="miniprogram-api-typings" />
+export type Action = 'confirm' | 'cancel' | 'overlay';
+type DialogContext = WechatMiniprogram.Page.TrivialInstance | WechatMiniprogram.Component.TrivialInstance;
+type AnyObject = {};
+interface DialogOptions {
+    lang?: string;
+    show?: boolean;
+    title?: string;
+    icon?: boolean;
+    nativeDisabled?: boolean;
+    width?: string | number | null;
+    zIndex?: number;
+    theme?: string;
+    context?: (() => DialogContext) | DialogContext;
+    message?: string;
+    overlay?: boolean;
+    selector?: string;
+    ariaLabel?: string;
+    customStyle?: string;
+    transition?: string;
+    beforeClose?: null | ((action: Action, value?: string) => Promise<void | boolean> | void);
+    businessId?: number;
+    sessionFrom?: string;
+    overlayStyle?: string;
+    appParameter?: string;
+    messageAlign?: string;
+    sendMessageImg?: string;
+    showMessageCard?: boolean;
+    sendMessagePath?: string;
+    sendMessageTitle?: string;
+    confirmButtonText?: string;
+    cancelButtonText?: string;
+    showConfirmButton?: boolean;
+    showCancelButton?: boolean;
+    closeOnClickOverlay?: boolean;
+    confirmButtonOpenType?: string;
+    value?: null | string;
+    ignoreQueue?: boolean;
+    password?: boolean;
+    placeholder?: string;
+    maxlength?: number;
+}
+interface DialogInputOptions extends DialogOptions {
+    value: string;
+    type?: string;
+    password?: boolean;
+    placeholder?: string;
+    maxlength?: number;
+}
+export declare const contextRef: {
+    value: Record<string, DialogContext | null>;
+};
+declare const Dialog: {
+    (options: DialogOptions): Promise<WechatMiniprogram.Component.TrivialInstance>;
+    alert(options: DialogOptions): Promise<WechatMiniprogram.Component.TrivialInstance>;
+    confirm(options: DialogOptions): Promise<WechatMiniprogram.Component.TrivialInstance>;
+    input: (options: DialogInputOptions) => Promise<WechatMiniprogram.Component.Instance<{
+        /**
+         * 输入框的当前值
+         */
+        inputValue: string;
+    }, AnyObject, AnyObject>>;
+    close(): void;
+    stopLoading(): void;
+    currentOptions: DialogOptions;
+    defaultOptions: DialogOptions;
+    setDefaultOptions(options: DialogOptions): void;
+    resetDefaultOptions(): void;
+};
+export default Dialog;

package/example/dist/dialog/dialog.js

@@ -0,0 +1,115 @@
+import appLog from '../common/appLog';
+import { getCurrentPage } from '../common/utils';
+const queueRef = {
+    value: [],
+};
+const defaultOptions = {
+    show: false,
+    title: '',
+    width: null,
+    theme: 'default',
+    message: '',
+    zIndex: 100,
+    overlay: true,
+    selector: '#smart-dialog',
+    beforeClose: null,
+    transition: 'scale',
+    customStyle: '',
+    messageAlign: '',
+    overlayStyle: '',
+    confirmButtonText: '确认',
+    cancelButtonText: '取消',
+    showConfirmButton: true,
+    showCancelButton: false,
+    closeOnClickOverlay: false,
+    confirmButtonOpenType: '',
+    icon: false,
+    nativeDisabled: false,
+    ignoreQueue: false,
+    value: null,
+    password: false,
+    placeholder: '',
+    maxlength: 20,
+};
+let currentOptions = Object.assign({}, defaultOptions);
+export const contextRef = {
+    value: {},
+};
+const Dialog = (options) => {
+    options = Object.assign(Object.assign({}, currentOptions), options);
+    const prom = new Promise((resolve, reject) => {
+        appLog.info('start open dialog');
+        const context = (typeof options.context === 'function' ? options.context() : options.context) ||
+            contextRef.value[options.selector] ||
+            getCurrentPage();
+        const selector = options.selector;
+        appLog.info(`dialog selector: ${selector}`);
+        appLog.info(`queue : ${JSON.stringify(queueRef.value)}`);
+        const dialog = context.selectComponent(options.selector);
+        appLog.info(`dialog component ${dialog ? 'success' : 'fail'}`);
+        if (!options.ignoreQueue &&
+            queueRef.value.length > 0 &&
+            queueRef.value.find(item => dialog && item && item.id === dialog.id)) {
+            console.warn(`相同选择器的 Dialog 调用过于频繁，${dialog.id} 已忽略重复调用`);
+            appLog.info(`相同选择器的 Dialog 调用过于频繁，${dialog.id} 已忽略重复调用`);
+            return;
+        }
+        delete options.context;
+        delete options.selector;
+        if (dialog) {
+            const optionsWithInputValue = Object.assign({}, options);
+            if (typeof options.value === 'string') {
+                optionsWithInputValue.inputValue = options.value;
+            }
+            dialog.setData(Object.assign({ callback: (action, instance) => {
+                    /**
+                     * 在声明式调用的情况下，在 close 后需要手动清空队列
+                     */
+                    queueRef.value = queueRef.value.filter(item => item.id !== dialog.id);
+                    action === 'confirm' ? resolve(instance) : reject(instance);
+                    appLog.info(`dialog ${dialog.id} callback`);
+                } }, optionsWithInputValue));
+            wx.nextTick(() => {
+                appLog.info(`start open dialog ${dialog.id}`);
+                dialog.setData({ show: true });
+            });
+            queueRef.value.push(dialog);
+        }
+        else {
+            console.warn(`未找到 ${(selector !== null && selector !== void 0 ? selector : '#smart-dialog').replace('#', '')} 节点，请确认 selector 及 context 是否正确`);
+            appLog.info(`未找到 ${(selector !== null && selector !== void 0 ? selector : '#smart-dialog').replace('#', '')} 节点，请确认 selector 及 context 是否正确`);
+        }
+    });
+    prom.catch(err => {
+        appLog.info(`Dialog promise Error`, err);
+        console.log(err, '---Dialog-error');
+        queueRef.value = [];
+    });
+    return prom;
+};
+Dialog.alert = (options) => Dialog(options);
+Dialog.confirm = (options) => Dialog(Object.assign({ showCancelButton: true }, options));
+Dialog.input = ((options) => Dialog(Object.assign({ showCancelButton: true }, options)));
+Dialog.close = () => {
+    queueRef.value.forEach(dialog => {
+        dialog.close();
+    });
+    queueRef.value = [];
+};
+Dialog.stopLoading = () => {
+    queueRef.value.forEach(dialog => {
+        dialog.stopLoading();
+    });
+};
+Dialog.currentOptions = currentOptions;
+Dialog.defaultOptions = defaultOptions;
+Dialog.setDefaultOptions = (options) => {
+    currentOptions = Object.assign(Object.assign({}, currentOptions), options);
+    Dialog.currentOptions = currentOptions;
+};
+Dialog.resetDefaultOptions = () => {
+    currentOptions = Object.assign({}, defaultOptions);
+    Dialog.currentOptions = currentOptions;
+};
+Dialog.resetDefaultOptions();
+export default Dialog;

package/example/dist/dialog/index.css

@@ -0,0 +1 @@
+@import '../common/index.css';.smart-dialog{background-color:var(--dialog-background-color,var(--app-B4,#fff));border-radius:var(--dialog-border-radius,16px);font-size:var(--dialog-font-size,16px);overflow:hidden;top:45%!important;width:var(--dialog-width,311px)}@media (max-width:321px){.smart-dialog{width:var(--dialog-small-screen-width,90%)}}.smart-dialog__header{color:var(--dialog-header-font-color,var(--app-B4-N1,#000));font-weight:var(--dialog-header-font-weight,400);line-height:var(--dialog-header-line-height,24px);padding:var(--dialog-header-padding,0);padding-top:var(--dialog-header-padding-top,24px);text-align:center}.smart-dialog__header-icon{border-radius:100%;display:block;font-size:var(--dialog-header-icon-size,39px);height:var(--dialog-header-icon-size,39px);margin:auto auto 12px;width:var(--dialog-header-icon-size,39px)}.smart-dialog__header--isolated{padding:var(--dialog-header-isolated-padding,24px 0)}.smart-dialog__message{-webkit-overflow-scrolling:touch;color:var(--dialog-message-text-color,var(--app-B4-N1,#000));font-size:var(--dialog-message-font-size,16px);line-height:var(--dialog-message-line-height,20px);max-height:var(--dialog-message-max-height,60vh);overflow-y:auto;padding:var(--dialog-message-padding,24px);text-align:center}.smart-dialog__message-text{word-wrap:break-word}.smart-dialog__message--hasTitle{color:var(--dialog-has-title-message-text-color,var(--app-B4-N3,rgba(0,0,0,.5)));font-size:var(--dialog-has-title-message-font-size,14px);padding-top:var(--dialog-has-title-message-padding-top,8px)}.smart-dialog__message--round-button{padding-bottom:16px}.smart-dialog__message--left{text-align:left}.smart-dialog__message--right{text-align:right}.smart-dialog__message--justify{text-align:justify}.smart-dialog__input{background-color:var(--dialog-input-background-color,var(--app-B4-N9,rgba(0,0,0,.05)));border-radius:var(--dialog-input-border-radius,10px);font-size:var(--dialog-input-font-size,14px);height:var(--dialog-input-height,40px);margin:var(--dialog-input-margin,0 16px 24px);padding:var(--dialog-input-padding,0 10px)}.smart-dialog__footer{display:flex}.smart-dialog__footer--round-button{height:40px!important;padding:8px 20px 16px!important;position:relative!important}.smart-dialog__button{flex:1}.smart-dialog__cancel,.smart-dialog__confirm{border:0!important;border-radius:0!important}.smart-dialog-bounce-enter{opacity:0;transform:translate3d(-50%,-50%,0) scale(.7)}.smart-dialog-bounce-leave-active{opacity:0;transform:translate3d(-50%,-50%,0) scale(.9)}.smart-dialog--round-button .smart-dialog__cancel,.smart-dialog--round-button .smart-dialog__confirm{border-radius:var(--dialog--round-button-border-radius,20px)!important}

package/example/dist/dialog/index.d.ts

@@ -0,0 +1 @@
+export {};

package/example/dist/dialog/index.js

@@ -0,0 +1,203 @@
+import warningIcon from '@tuya-miniapp/icons/dist/svg/Warning';
+import { SmartComponent } from '../common/component';
+import { button } from '../mixins/button';
+import appLog from '../common/appLog';
+import { getCurrentPage, toPromise } from '../common/utils';
+import { contextRef } from './dialog';
+SmartComponent({
+    mixins: [button],
+    classes: ['cancle-button-class', 'confirm-button-class'],
+    props: {
+        show: {
+            type: Boolean,
+            observer(show) {
+                !show && this.stopLoading();
+            },
+        },
+        icon: Boolean,
+        title: String,
+        message: String,
+        theme: {
+            type: String,
+            value: 'default',
+        },
+        confirmButtonId: String,
+        className: String,
+        customStyle: String,
+        asyncClose: Boolean,
+        messageAlign: String,
+        beforeClose: null,
+        overlayStyle: String,
+        useSlot: Boolean,
+        useTitleSlot: Boolean,
+        useConfirmButtonSlot: Boolean,
+        useCancelButtonSlot: Boolean,
+        showCancelButton: Boolean,
+        closeOnClickOverlay: Boolean,
+        nativeDisabled: Boolean,
+        confirmButtonOpenType: String,
+        width: null,
+        zIndex: {
+            type: Number,
+            value: 2000,
+        },
+        confirmButtonText: {
+            type: String,
+            value: 'Confirm',
+        },
+        cancelButtonText: {
+            type: String,
+            value: 'Cancel',
+        },
+        confirmButtonColor: {
+            type: String,
+        },
+        cancelButtonColor: {
+            type: String,
+        },
+        showConfirmButton: {
+            type: Boolean,
+            value: true,
+        },
+        overlay: {
+            type: Boolean,
+            value: true,
+        },
+        transition: {
+            type: String,
+            value: 'scale',
+        },
+        rootPortal: {
+            type: Boolean,
+            value: false,
+        },
+        value: null,
+        password: {
+            type: Boolean,
+            value: false,
+        },
+        placeholder: {
+            type: String,
+        },
+        maxlength: {
+            type: Number,
+            value: 20,
+        },
+    },
+    data: {
+        warningIcon,
+        inputValue: '',
+        loading: {
+            confirm: false,
+            cancel: false,
+        },
+        actionType: '',
+        callback: (() => { }),
+    },
+    mounted: function () {
+        if (!this.id)
+            return;
+        if (contextRef.value[`#${this.id}`]) {
+            console.error(`Dialog component #${this.id} repeated!`);
+            appLog.info(`Dialog component #${this.id} repeated!`);
+        }
+        contextRef.value[`#${this.id}`] = getCurrentPage();
+        appLog.info(`Dialog #${this.id} mounted`);
+    },
+    destroyed: function () {
+        if (!this.id)
+            return;
+        contextRef.value[`#${this.id}`] = null;
+        appLog.info(`dialog #${this.id} destroyed`);
+    },
+    methods: {
+        onConfirm() {
+            this.handleAction('confirm');
+        },
+        onCancel() {
+            this.handleAction('cancel');
+        },
+        onClickOverlay() {
+            this.close('overlay');
+        },
+        onInput(evt) {
+            var _a, _b;
+            this.setData({ inputValue: (_b = (_a = evt === null || evt === void 0 ? void 0 : evt.detail) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : '' });
+        },
+        close(action) {
+            this.setData({ show: false });
+            this.setData({ actionType: action });
+            wx.nextTick(() => {
+                this.$emit('close', action);
+                // const { callback } = this.data;
+                // console.log(callback, 'close');
+                // if (callback) {
+                //   callback(action, this);
+                // }
+            });
+        },
+        stopLoading() {
+            this.setData({
+                loading: {
+                    confirm: false,
+                    cancel: false,
+                },
+            });
+        },
+        handleAction(action) {
+            // 避免快速点击时，dialog 已经被关闭了，但是还往下走导致 loading 一直存在
+            // see /tuyarn-kit/base/ray-smart-ui/-/issues/11
+            if (!this.data.show)
+                return;
+            this.$emit(action, { dialog: this, value: this.data.inputValue });
+            const { asyncClose, beforeClose } = this.data;
+            if (!asyncClose && !beforeClose) {
+                this.close(action);
+                return;
+            }
+            this.setData({
+                [`loading.${action}`]: true,
+            });
+            if (beforeClose) {
+                toPromise(beforeClose(action, this.data.inputValue)).then(value => {
+                    if (value) {
+                        this.close(action);
+                    }
+                    else {
+                        this.stopLoading();
+                    }
+                });
+            }
+        },
+        onBeforeEnter() {
+            this.$emit('before-enter');
+        },
+        onEnter() {
+            this.$emit('enter');
+        },
+        onAfterEnter() {
+            this.$emit('after-enter');
+        },
+        onBeforeLeave() {
+            this.$emit('before-leave');
+        },
+        onLeave() {
+            this.$emit('leave');
+        },
+        onAfterLeave() {
+            this.$emit('after-leave');
+            appLog.info(`dialog #${this.id} after-leave`);
+            const { callback, actionType } = this.data;
+            if (callback) {
+                callback(actionType, this);
+            }
+        },
+        // 兜底防止 通过api方式打开组件失败 导致队列没有清除
+        onPopUpError() {
+            const { callback, actionType } = this.data;
+            if (callback) {
+                callback(actionType, this);
+            }
+        },
+    },
+});

package/example/dist/dialog/index.json

@@ -0,0 +1,10 @@
+{
+  "component": true,
+  "usingComponents": {
+    "smart-popup": "../popup/index",
+    "smart-button": "../button/index",
+    "smart-icon": "../icon/index",
+    "smart-goods-action": "../goods-action/index",
+    "smart-goods-action-button": "../goods-action-button/index"
+  }
+}