@tarojs/taro-h5 3.4.0-beta.2 → 3.4.2

package/dist/api/ui/interaction/index.js

@@ -0,0 +1,268 @@
+import Taro from '@tarojs/api';
+import { getParameterError, temporarilyNotSupport } from '../../utils';
+import { MethodHandler } from '../../utils/handler';
+import Toast from './toast';
+import Modal from './modal';
+import ActionSheet from './actionSheet';
+// 交互
+let status = 'default';
+// inject necessary style
+function init(doc) {
+    if (status === 'ready')
+        return;
+    const taroStyle = doc.createElement('style');
+    taroStyle.textContent = '@font-face{font-weight:normal;font-style:normal;font-family:"taro";src:url("data:application/x-font-ttf;charset=utf-8;base64, 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") format("truetype");}@-webkit-keyframes taroLoading{0%{-webkit-transform:rotate3d(0, 0, 1, 0deg);}100%{-webkit-transform:rotate3d(0, 0, 1, 360deg);transform:rotate3d(0, 0, 1, 360deg);}}@keyframes taroLoading{0%{-webkit-transform:rotate3d(0, 0, 1, 0deg);}100%{-webkit-transform:rotate3d(0, 0, 1, 360deg);transform:rotate3d(0, 0, 1, 360deg);}}.taro-modal__foot:after {content: "";position: absolute;left: 0;top: 0;right: 0;height: 1px;border-top: 1px solid #D5D5D6;color: #D5D5D6;-webkit-transform-origin: 0 0;transform-origin: 0 0;-webkit-transform: scaleY(0.5);transform: scaleY(0.5);} .taro-model__btn:active {background-color: #EEEEEE}.taro-model__btn:not(:first-child):after {content: "";position: absolute;left: 0;top: 0;width: 1px;bottom: 0;border-left: 1px solid #D5D5D6;color: #D5D5D6;-webkit-transform-origin: 0 0;transform-origin: 0 0;-webkit-transform: scaleX(0.5);transform: scaleX(0.5);}.taro-actionsheet__cell:not(:first-child):after {content: "";position: absolute;left: 0;top: 0;right: 0;height: 1px;border-top: 1px solid #e5e5e5;color: #e5e5e5;-webkit-transform-origin: 0 0;transform-origin: 0 0;-webkit-transform: scaleY(0.5);transform: scaleY(0.5);}';
+    doc.querySelector('head').appendChild(taroStyle);
+    status = 'ready';
+}
+const toast = new Toast();
+const modal = new Modal();
+const actionSheet = new ActionSheet();
+const showToast = (options = { title: '' }) => {
+    init(document);
+    options = Object.assign({
+        title: '',
+        icon: 'success',
+        image: '',
+        duration: 1500,
+        mask: false
+    }, options);
+    const { success, fail, complete } = options;
+    const handle = new MethodHandler({ name: 'showToast', success, fail, complete });
+    if (typeof options.title !== 'string') {
+        return handle.fail({
+            errMsg: getParameterError({
+                para: 'title',
+                correct: 'String',
+                wrong: options.title
+            })
+        });
+    }
+    if (typeof options.duration !== 'number') {
+        return handle.fail({
+            errMsg: getParameterError({
+                para: 'duration',
+                correct: 'Number',
+                wrong: options.duration
+            })
+        });
+    }
+    if (options.image && typeof options.image !== 'string')
+        options.image = '';
+    options.mask = !!options.mask;
+    let errMsg = '';
+    if (!toast.el) {
+        errMsg = toast.create(options, 'toast');
+    }
+    else {
+        errMsg = toast.show(options, 'toast');
+    }
+    return handle.success({ errMsg });
+};
+const hideToast = ({ success, fail, complete } = {}) => {
+    const handle = new MethodHandler({ name: 'hideToast', success, fail, complete });
+    if (!toast.el)
+        return handle.success();
+    toast.hide(0, 'toast');
+    return handle.success();
+};
+const showLoading = (options = { title: '' }) => {
+    init(document);
+    options = Object.assign({
+        title: '',
+        mask: false
+    }, options);
+    const { success, fail, complete } = options;
+    const handle = new MethodHandler({ name: 'showLoading', success, fail, complete });
+    const config = {
+        icon: 'loading',
+        image: '',
+        duration: -1
+    };
+    options = Object.assign({}, options, config);
+    if (typeof options.title !== 'string') {
+        return handle.fail({
+            errMsg: getParameterError({
+                para: 'title',
+                correct: 'String',
+                wrong: options.title
+            })
+        });
+    }
+    options.mask = !!options.mask;
+    let errMsg = '';
+    if (!toast.el) {
+        errMsg = toast.create(options, 'loading');
+    }
+    else {
+        errMsg = toast.show(options, 'loading');
+    }
+    return handle.success({ errMsg });
+};
+const hideLoading = ({ success, fail, complete } = {}) => {
+    const handle = new MethodHandler({ name: 'hideLoading', success, fail, complete });
+    if (!toast.el)
+        return handle.success();
+    toast.hide(0, 'loading');
+    return handle.success();
+};
+const showModal = async (options = {}) => {
+    init(document);
+    options = Object.assign({
+        title: '',
+        content: '',
+        showCancel: true,
+        cancelText: '取消',
+        cancelColor: '#000000',
+        confirmText: '确定',
+        confirmColor: '#3CC51F'
+    }, options);
+    const { success, fail, complete } = options;
+    const handle = new MethodHandler({ name: 'showModal', success, fail, complete });
+    if (typeof options.title !== 'string') {
+        return handle.fail({
+            errMsg: getParameterError({
+                para: 'title',
+                correct: 'String',
+                wrong: options.title
+            })
+        });
+    }
+    if (typeof options.content !== 'string') {
+        return handle.fail({
+            errMsg: getParameterError({
+                para: 'content',
+                correct: 'String',
+                wrong: options.content
+            })
+        });
+    }
+    if (typeof options.cancelText !== 'string') {
+        return handle.fail({
+            errMsg: getParameterError({
+                para: 'cancelText',
+                correct: 'String',
+                wrong: options.cancelText
+            })
+        });
+    }
+    if (options.cancelText.replace(/[\u0391-\uFFE5]/g, 'aa').length > 8) {
+        return handle.fail({
+            errMsg: 'cancelText length should not larger then 4 Chinese characters'
+        });
+    }
+    if (typeof options.confirmText !== 'string') {
+        return handle.fail({
+            errMsg: getParameterError({
+                para: 'confirmText',
+                correct: 'String',
+                wrong: options.confirmText
+            })
+        });
+    }
+    if (options.confirmText.replace(/[\u0391-\uFFE5]/g, 'aa').length > 8) {
+        return handle.fail({
+            errMsg: 'confirmText length should not larger then 4 Chinese characters'
+        });
+    }
+    if (typeof options.cancelColor !== 'string') {
+        return handle.fail({
+            errMsg: getParameterError({
+                para: 'cancelColor',
+                correct: 'String',
+                wrong: options.cancelColor
+            })
+        });
+    }
+    if (typeof options.confirmColor !== 'string') {
+        return handle.fail({
+            errMsg: getParameterError({
+                para: 'confirmColor',
+                correct: 'String',
+                wrong: options.confirmColor
+            })
+        });
+    }
+    options.showCancel = !!options.showCancel;
+    let result = '';
+    if (!modal.el) {
+        result = await modal.create(options);
+    }
+    else {
+        result = await modal.show(options);
+    }
+    const res = { cancel: !1, confirm: !1 };
+    res[result] = !0;
+    return handle.success(res);
+};
+function hideModal() {
+    if (!modal.el)
+        return;
+    modal.hide();
+}
+const showActionSheet = async (options = { itemList: [] }) => {
+    init(document);
+    options = Object.assign({
+        itemColor: '#000000',
+        itemList: []
+    }, options);
+    const { success, fail, complete } = options;
+    const handle = new MethodHandler({ name: 'showActionSheet', success, fail, complete });
+    // list item String
+    if (!Array.isArray(options.itemList)) {
+        return handle.fail({
+            errMsg: getParameterError({
+                para: 'itemList',
+                correct: 'Array',
+                wrong: options.itemList
+            })
+        });
+    }
+    if (options.itemList.length < 1) {
+        return handle.fail({ errMsg: 'parameter error: parameter.itemList should have at least 1 item' });
+    }
+    if (options.itemList.length > 6) {
+        return handle.fail({ errMsg: 'parameter error: parameter.itemList should not be large than 6' });
+    }
+    for (let i = 0; i < options.itemList.length; i++) {
+        if (typeof options.itemList[i] !== 'string') {
+            return handle.fail({
+                errMsg: getParameterError({
+                    para: `itemList[${i}]`,
+                    correct: 'String',
+                    wrong: options.itemList[i]
+                })
+            });
+        }
+    }
+    if (typeof options.itemColor !== 'string') {
+        return handle.fail({
+            errMsg: getParameterError({
+                para: 'itemColor',
+                correct: 'String',
+                wrong: options.itemColor
+            })
+        });
+    }
+    let result = '';
+    if (!actionSheet.el) {
+        result = await actionSheet.create(options);
+    }
+    else {
+        result = await actionSheet.show(options);
+    }
+    if (typeof result === 'string') {
+        return handle.fail(({ errMsg: result }));
+    }
+    else {
+        return handle.success(({ tapIndex: result }));
+    }
+};
+Taro.eventCenter.on('__taroRouterChange', () => {
+    hideToast();
+    hideLoading();
+    hideModal();
+});
+const enableAlertBeforeUnload = temporarilyNotSupport('enableAlertBeforeUnload');
+const disableAlertBeforeUnload = temporarilyNotSupport('disableAlertBeforeUnload');
+export { showToast, showModal, showLoading, showActionSheet, hideToast, hideLoading, enableAlertBeforeUnload, disableAlertBeforeUnload };

package/dist/api/ui/interaction/modal.js

@@ -0,0 +1,207 @@
+import { inlineStyle } from '../../utils';
+export default class Modal {
+    constructor() {
+        this.options = {
+            title: '',
+            content: '',
+            showCancel: true,
+            cancelText: '取消',
+            cancelColor: '#000000',
+            confirmText: '确定',
+            confirmColor: '#3CC51F'
+        };
+        this.style = {
+            maskStyle: {
+                position: 'fixed',
+                'z-index': '1000',
+                top: '0',
+                right: '0',
+                left: '0',
+                bottom: '0',
+                background: 'rgba(0,0,0,0.6)'
+            },
+            modalStyle: {
+                'z-index': '4999',
+                position: 'fixed',
+                top: '50%',
+                left: '50%',
+                transform: 'translate(-50%, -50%)',
+                width: '80%',
+                'max-width': '300px',
+                'border-radius': '3px',
+                'text-align': 'center',
+                'line-height': '1.6',
+                overflow: 'hidden',
+                background: '#FFFFFF'
+            },
+            titleStyle: {
+                padding: '20px 24px 9px',
+                'font-size': '18px'
+            },
+            textStyle: {
+                padding: '0 24px 12px',
+                'min-height': '40px',
+                'font-size': '15px',
+                'line-height': '1.3',
+                color: '#808080'
+            },
+            footStyle: {
+                position: 'relative',
+                'line-height': '48px',
+                'font-size': '18px',
+                display: 'flex'
+            },
+            btnStyle: {
+                position: 'relative',
+                '-webkit-box-flex': '1',
+                '-webkit-flex': '1',
+                flex: '1'
+            }
+        };
+    }
+    create(options = {}) {
+        return new Promise((resolve) => {
+            // style
+            const { maskStyle, modalStyle, titleStyle, textStyle, footStyle, btnStyle } = this.style;
+            // configuration
+            const config = {
+                ...this.options,
+                ...options
+            };
+            // wrapper
+            this.el = document.createElement('div');
+            this.el.className = 'taro__modal';
+            this.el.style.opacity = '0';
+            this.el.style.transition = 'opacity 0.2s linear';
+            // mask
+            const mask = document.createElement('div');
+            mask.className = 'taro-modal__mask';
+            mask.setAttribute('style', inlineStyle(maskStyle));
+            // modal
+            const modal = document.createElement('div');
+            modal.className = 'taro-modal__content';
+            modal.setAttribute('style', inlineStyle(modalStyle));
+            // title
+            const titleCSS = config.title ? titleStyle : {
+                ...titleStyle,
+                display: 'none'
+            };
+            this.title = document.createElement('div');
+            this.title.className = 'taro-modal__title';
+            this.title.setAttribute('style', inlineStyle(titleCSS));
+            this.title.textContent = config.title;
+            // text
+            const textCSS = config.title ? textStyle : {
+                ...textStyle,
+                padding: '40px 20px 26px',
+                color: '#353535'
+            };
+            this.text = document.createElement('div');
+            this.text.className = 'taro-modal__text';
+            this.text.setAttribute('style', inlineStyle(textCSS));
+            this.text.textContent = config.content;
+            // foot
+            const foot = document.createElement('div');
+            foot.className = 'taro-modal__foot';
+            foot.setAttribute('style', inlineStyle(footStyle));
+            // cancel button
+            const cancelCSS = {
+                ...btnStyle,
+                color: config.cancelColor,
+                display: config.showCancel ? 'block' : 'none'
+            };
+            this.cancel = document.createElement('div');
+            this.cancel.className = 'taro-model__btn taro-model__cancel';
+            this.cancel.setAttribute('style', inlineStyle(cancelCSS));
+            this.cancel.textContent = config.cancelText;
+            this.cancel.onclick = () => {
+                this.hide();
+                resolve('cancel');
+            };
+            // confirm button
+            this.confirm = document.createElement('div');
+            this.confirm.className = 'taro-model__btn taro-model__confirm';
+            this.confirm.setAttribute('style', inlineStyle(btnStyle));
+            this.confirm.style.color = config.confirmColor;
+            this.confirm.textContent = config.confirmText;
+            this.confirm.onclick = () => {
+                this.hide();
+                resolve('confirm');
+            };
+            // result
+            foot.appendChild(this.cancel);
+            foot.appendChild(this.confirm);
+            modal.appendChild(this.title);
+            modal.appendChild(this.text);
+            modal.appendChild(foot);
+            this.el.appendChild(mask);
+            this.el.appendChild(modal);
+            // show immediately
+            document.body.appendChild(this.el);
+            setTimeout(() => { this.el.style.opacity = '1'; }, 0);
+        });
+    }
+    show(options = {}) {
+        return new Promise((resolve) => {
+            const config = {
+                ...this.options,
+                ...options
+            };
+            if (this.hideOpacityTimer)
+                clearTimeout(this.hideOpacityTimer);
+            if (this.hideDisplayTimer)
+                clearTimeout(this.hideDisplayTimer);
+            // title & text
+            const { textStyle } = this.style;
+            if (config.title) {
+                this.title.textContent = config.title;
+                // none => block
+                this.title.style.display = 'block';
+                this.text.setAttribute('style', inlineStyle(textStyle));
+            }
+            else {
+                // block => none
+                this.title.style.display = 'none';
+                const textCSS = {
+                    ...textStyle,
+                    padding: '40px 20px 26px',
+                    color: '#353535'
+                };
+                this.text.setAttribute('style', inlineStyle(textCSS));
+            }
+            this.text.textContent = config.content || '';
+            // showCancel
+            this.cancel.style.display = config.showCancel ? 'block' : 'none';
+            // cancelText
+            this.cancel.textContent = config.cancelText || '';
+            // cancelColor
+            this.cancel.style.color = config.cancelColor || '';
+            // confirmText
+            this.confirm.textContent = config.confirmText || '';
+            // confirmColor
+            this.confirm.style.color = config.confirmColor || '';
+            // cbs
+            this.cancel.onclick = () => {
+                this.hide();
+                resolve('cancel');
+            };
+            this.confirm.onclick = () => {
+                this.hide();
+                resolve('confirm');
+            };
+            // show
+            this.el.style.display = 'block';
+            setTimeout(() => { this.el.style.opacity = '1'; }, 0);
+        });
+    }
+    hide() {
+        if (this.hideOpacityTimer)
+            clearTimeout(this.hideOpacityTimer);
+        if (this.hideDisplayTimer)
+            clearTimeout(this.hideDisplayTimer);
+        this.hideOpacityTimer = setTimeout(() => {
+            this.el.style.opacity = '0';
+            this.hideDisplayTimer = setTimeout(() => { this.el.style.display = 'none'; }, 200);
+        }, 0);
+    }
+}

package/dist/api/ui/interaction/toast.js

@@ -0,0 +1,195 @@
+import { inlineStyle } from '../../utils';
+export default class Toast {
+    constructor() {
+        this.options = {
+            title: '',
+            icon: 'none',
+            image: '',
+            duration: 1500,
+            mask: false
+        };
+        this.style = {
+            maskStyle: {
+                position: 'fixed',
+                'z-index': '1000',
+                top: '0',
+                right: '0',
+                left: '0',
+                bottom: '0'
+            },
+            toastStyle: {
+                'z-index': '5000',
+                'box-sizing': 'border-box',
+                display: 'flex',
+                'flex-direction': 'column',
+                'justify-content': 'center',
+                '-webkit-justify-content': 'center',
+                position: 'fixed',
+                top: '50%',
+                left: '50%',
+                'min-width': '120px',
+                'max-width': '200px',
+                'min-height': '120px',
+                padding: '15px',
+                transform: 'translate(-50%, -50%)',
+                'border-radius': '5px',
+                'text-align': 'center',
+                'line-height': '1.6',
+                color: '#FFFFFF',
+                background: 'rgba(17, 17, 17, 0.7)'
+            },
+            successStyle: {
+                margin: '6px auto',
+                width: '38px',
+                height: '38px',
+                background: 'transparent url(data:image/svg+xml;base64,PHN2ZyB0PSIxNjM5NTQ4OTYzMjA0IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQzNDgiIHdpZHRoPSIyMDAiIGhlaWdodD0iMjAwIj48cGF0aCBkPSJNMjE5Ljk1MiA1MTIuNTc2bDIxMC40MzIgMjEwLjQzMi00NS4yNDggNDUuMjU2LTIxMC40MzItMjEwLjQzMnoiIHAtaWQ9IjQzNDkiIGZpbGw9IiNmZmZmZmYiPjwvcGF0aD48cGF0aCBkPSJNNzk5LjY3MiAyNjIuMjY0bDQ1LjI1NiA0NS4yNTYtNDYwLjQ2NCA0NjAuNDY0LTQ1LjI1Ni00NS4yNTZ6IiBwLWlkPSI0MzUwIiBmaWxsPSIjZmZmZmZmIj48L3BhdGg+PC9zdmc+) no-repeat',
+                'background-size': '100%'
+            },
+            errrorStyle: {
+                margin: '6px auto',
+                width: '38px',
+                height: '38px',
+                background: 'transparent url(data:image/svg+xml;base64,PHN2ZyB0PSIxNjM5NTUxMDU1MTgzIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjE0MDc2IiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PHBhdGggZD0iTTUxMiA2NEMyNjQuNTggNjQgNjQgMjY0LjU4IDY0IDUxMnMyMDAuNTggNDQ4IDQ0OCA0NDggNDQ4LTIwMC41OCA0NDgtNDQ4Uzc1OS40MiA2NCA1MTIgNjR6IG0wIDc1MmEzNiAzNiAwIDEgMSAzNi0zNiAzNiAzNiAwIDAgMS0zNiAzNnogbTUxLjgzLTU1MS45NUw1NDggNjM2YTM2IDM2IDAgMCAxLTcyIDBsLTE1LjgzLTM3MS45NWMtMC4xLTEuMzMtMC4xNy0yLjY4LTAuMTctNC4wNWE1MiA1MiAwIDAgMSAxMDQgMGMwIDEuMzctMC4wNyAyLjcyLTAuMTcgNC4wNXoiIHAtaWQ9IjE0MDc3IiBmaWxsPSIjZmZmZmZmIj48L3BhdGg+PC9zdmc+) no-repeat',
+                'background-size': '100%'
+            },
+            loadingStyle: {
+                margin: '6px auto',
+                width: '38px',
+                height: '38px',
+                '-webkit-animation': 'taroLoading 1s steps(12, end) infinite',
+                animation: 'taroLoading 1s steps(12, end) infinite',
+                background: 'transparent url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAiIGhlaWdodD0iMTIwIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgxMDB2MTAwSDB6Ii8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTlFOUU5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLTMwKSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iIzk4OTY5NyIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgzMCAxMDUuOTggNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjOUI5OTlBIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDYwIDc1Ljk4IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0EzQTFBMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSg5MCA2NSA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNBQkE5QUEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoMTIwIDU4LjY2IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0IyQjJCMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgxNTAgNTQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjQkFCOEI5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDMkMwQzEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTE1MCA0NS45OCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDQkNCQ0IiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTEyMCA0MS4zNCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNEMkQyRDIiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTkwIDM1IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0RBREFEQSIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgtNjAgMjQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTJFMkUyIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKC0zMCAtNS45OCA2NSkiLz48L3N2Zz4=) no-repeat',
+                'background-size': '100%'
+            },
+            imageStyle: {
+                margin: '6px auto',
+                width: '40px',
+                height: '40px',
+                background: 'transparent no-repeat',
+                'background-size': '100%'
+            },
+            textStyle: {
+                margin: '0',
+                'font-size': '16px'
+            }
+        };
+    }
+    create(options = {}, _type = 'toast') {
+        // style
+        const { maskStyle, toastStyle, successStyle, errrorStyle, loadingStyle, imageStyle, textStyle } = this.style;
+        // configuration
+        const config = {
+            ...this.options,
+            ...options,
+            _type
+        };
+        // wrapper
+        this.el = document.createElement('div');
+        this.el.className = 'taro__toast';
+        this.el.style.opacity = '0';
+        this.el.style.transition = 'opacity 0.1s linear';
+        // mask
+        this.mask = document.createElement('div');
+        this.mask.setAttribute('style', inlineStyle(maskStyle));
+        this.mask.style.display = config.mask ? 'block' : 'none';
+        // icon
+        this.icon = document.createElement('p');
+        if (config.image) {
+            this.icon.setAttribute('style', inlineStyle({
+                ...imageStyle,
+                'background-image': `url(${config.image})`
+            }));
+        }
+        else {
+            const iconStyle = config.icon === 'loading' ? loadingStyle : config.icon === 'error' ? errrorStyle : successStyle;
+            this.icon.setAttribute('style', inlineStyle({
+                ...iconStyle,
+                ...(config.icon === 'none' ? { display: 'none' } : {})
+            }));
+        }
+        // toast
+        this.toast = document.createElement('div');
+        this.toast.setAttribute('style', inlineStyle({
+            ...toastStyle,
+            ...(config.icon === 'none' ? {
+                'min-height': '0',
+                padding: '10px 15px'
+            } : {})
+        }));
+        // title
+        this.title = document.createElement('p');
+        this.title.setAttribute('style', inlineStyle(textStyle));
+        this.title.textContent = config.title;
+        // result
+        this.toast.appendChild(this.icon);
+        this.toast.appendChild(this.title);
+        this.el.appendChild(this.mask);
+        this.el.appendChild(this.toast);
+        // show immediately
+        document.body.appendChild(this.el);
+        setTimeout(() => { this.el.style.opacity = '1'; }, 0);
+        this.type = config._type;
+        // disappear after duration
+        config.duration >= 0 && this.hide(config.duration, this.type);
+        return '';
+    }
+    show(options = {}, _type = 'toast') {
+        const config = {
+            ...this.options,
+            ...options,
+            _type
+        };
+        if (this.hideOpacityTimer)
+            clearTimeout(this.hideOpacityTimer);
+        if (this.hideDisplayTimer)
+            clearTimeout(this.hideDisplayTimer);
+        // title
+        this.title.textContent = config.title || '';
+        // mask
+        this.mask.style.display = config.mask ? 'block' : 'none';
+        // image
+        const { toastStyle, successStyle, errrorStyle, loadingStyle, imageStyle } = this.style;
+        if (config.image) {
+            this.icon.setAttribute('style', inlineStyle({
+                ...imageStyle,
+                'background-image': `url(${config.image})`
+            }));
+        }
+        else {
+            if (!config.image && config.icon) {
+                const iconStyle = config.icon === 'loading' ? loadingStyle : config.icon === 'error' ? errrorStyle : successStyle;
+                this.icon.setAttribute('style', inlineStyle({
+                    ...iconStyle,
+                    ...(config.icon === 'none' ? { display: 'none' } : {})
+                }));
+            }
+        }
+        // toast
+        this.toast.setAttribute('style', inlineStyle({
+            ...toastStyle,
+            ...(config.icon === 'none' ? {
+                'min-height': '0',
+                padding: '10px 15px'
+            } : {})
+        }));
+        // show
+        this.el.style.display = 'block';
+        setTimeout(() => { this.el.style.opacity = '1'; }, 0);
+        this.type = config._type;
+        // disappear after duration
+        config.duration >= 0 && this.hide(config.duration, this.type);
+        return '';
+    }
+    hide(duration = 0, type) {
+        if (this.type !== type)
+            return;
+        if (this.hideOpacityTimer)
+            clearTimeout(this.hideOpacityTimer);
+        if (this.hideDisplayTimer)
+            clearTimeout(this.hideDisplayTimer);
+        this.hideOpacityTimer = setTimeout(() => {
+            this.el.style.opacity = '0';
+            this.hideDisplayTimer = setTimeout(() => { this.el.style.display = 'none'; }, 100);
+        }, duration);
+    }
+}

package/dist/api/ui/menu.js

@@ -0,0 +1,3 @@
+import { temporarilyNotSupport } from '../utils';
+// 菜单
+export const getMenuButtonBoundingClientRect = temporarilyNotSupport('getMenuButtonBoundingClientRect');