mdui 1.0.2 → 2.0.0

package/es/components/dialog/class.js

@@ -1,316 +0,0 @@
-import $ from 'mdui.jq/es/$';
-import contains from 'mdui.jq/es/functions/contains';
-import extend from 'mdui.jq/es/functions/extend';
-import 'mdui.jq/es/methods/addClass';
-import 'mdui.jq/es/methods/append';
-import 'mdui.jq/es/methods/children';
-import 'mdui.jq/es/methods/css';
-import 'mdui.jq/es/methods/each';
-import 'mdui.jq/es/methods/find';
-import 'mdui.jq/es/methods/first';
-import 'mdui.jq/es/methods/hasClass';
-import 'mdui.jq/es/methods/height';
-import 'mdui.jq/es/methods/hide';
-import 'mdui.jq/es/methods/innerHeight';
-import 'mdui.jq/es/methods/off';
-import 'mdui.jq/es/methods/on';
-import 'mdui.jq/es/methods/remove';
-import 'mdui.jq/es/methods/removeClass';
-import 'mdui.jq/es/methods/show';
-import '../../jq_extends/methods/transitionEnd';
-import '../../jq_extends/static/hideOverlay';
-import '../../jq_extends/static/lockScreen';
-import '../../jq_extends/static/showOverlay';
-import '../../jq_extends/static/throttle';
-import '../../jq_extends/static/unlockScreen';
-import { componentEvent } from '../../utils/componentEvent';
-import { $window } from '../../utils/dom';
-import { dequeue, queue } from '../../utils/queue';
-const DEFAULT_OPTIONS = {
-    history: true,
-    overlay: true,
-    modal: false,
-    closeOnEsc: true,
-    closeOnCancel: true,
-    closeOnConfirm: true,
-    destroyOnClosed: false,
-};
-/**
- * 当前显示的对话框实例
- */
-let currentInst = null;
-/**
- * 队列名
- */
-const queueName = '_mdui_dialog';
-/**
- * 窗口是否已锁定
- */
-let isLockScreen = false;
-/**
- * 遮罩层元素
- */
-let $overlay;
-class Dialog {
-    constructor(selector, options = {}) {
-        /**
-         * 配置参数
-         */
-        this.options = extend({}, DEFAULT_OPTIONS);
-        /**
-         * 当前 dialog 的状态
-         */
-        this.state = 'closed';
-        /**
-         * dialog 元素是否是动态添加的
-         */
-        this.append = false;
-        this.$element = $(selector).first();
-        // 如果对话框元素没有在当前文档中，则需要添加
-        if (!contains(document.body, this.$element[0])) {
-            this.append = true;
-            $('body').append(this.$element);
-        }
-        extend(this.options, options);
-        // 绑定取消按钮事件
-        this.$element.find('[mdui-dialog-cancel]').each((_, cancel) => {
-            $(cancel).on('click', () => {
-                this.triggerEvent('cancel');
-                if (this.options.closeOnCancel) {
-                    this.close();
-                }
-            });
-        });
-        // 绑定确认按钮事件
-        this.$element.find('[mdui-dialog-confirm]').each((_, confirm) => {
-            $(confirm).on('click', () => {
-                this.triggerEvent('confirm');
-                if (this.options.closeOnConfirm) {
-                    this.close();
-                }
-            });
-        });
-        // 绑定关闭按钮事件
-        this.$element.find('[mdui-dialog-close]').each((_, close) => {
-            $(close).on('click', () => this.close());
-        });
-    }
-    /**
-     * 触发组件事件
-     * @param name
-     */
-    triggerEvent(name) {
-        componentEvent(name, 'dialog', this.$element, this);
-    }
-    /**
-     * 窗口宽度变化，或对话框内容变化时，调整对话框位置和对话框内的滚动条
-     */
-    readjust() {
-        if (!currentInst) {
-            return;
-        }
-        const $element = currentInst.$element;
-        const $title = $element.children('.mdui-dialog-title');
-        const $content = $element.children('.mdui-dialog-content');
-        const $actions = $element.children('.mdui-dialog-actions');
-        // 调整 dialog 的 top 和 height 值
-        $element.height('');
-        $content.height('');
-        const elementHeight = $element.height();
-        $element.css({
-            top: `${($window.height() - elementHeight) / 2}px`,
-            height: `${elementHeight}px`,
-        });
-        // 调整 mdui-dialog-content 的高度
-        $content.innerHeight(elementHeight -
-            ($title.innerHeight() || 0) -
-            ($actions.innerHeight() || 0));
-    }
-    /**
-     * hashchange 事件触发时关闭对话框
-     */
-    hashchangeEvent() {
-        if (window.location.hash.substring(1).indexOf('mdui-dialog') < 0) {
-            currentInst.close(true);
-        }
-    }
-    /**
-     * 点击遮罩层关闭对话框
-     * @param event
-     */
-    overlayClick(event) {
-        if ($(event.target).hasClass('mdui-overlay') &&
-            currentInst) {
-            currentInst.close();
-        }
-    }
-    /**
-     * 动画结束回调
-     */
-    transitionEnd() {
-        if (this.$element.hasClass('mdui-dialog-open')) {
-            this.state = 'opened';
-            this.triggerEvent('opened');
-        }
-        else {
-            this.state = 'closed';
-            this.triggerEvent('closed');
-            this.$element.hide();
-            // 所有对话框都关闭，且当前没有打开的对话框时，解锁屏幕
-            if (!queue(queueName).length && !currentInst && isLockScreen) {
-                $.unlockScreen();
-                isLockScreen = false;
-            }
-            $window.off('resize', $.throttle(this.readjust, 100));
-            if (this.options.destroyOnClosed) {
-                this.destroy();
-            }
-        }
-    }
-    /**
-     * 打开指定对话框
-     */
-    doOpen() {
-        currentInst = this;
-        if (!isLockScreen) {
-            $.lockScreen();
-            isLockScreen = true;
-        }
-        this.$element.show();
-        this.readjust();
-        $window.on('resize', $.throttle(this.readjust, 100));
-        // 打开消息框
-        this.state = 'opening';
-        this.triggerEvent('open');
-        this.$element
-            .addClass('mdui-dialog-open')
-            .transitionEnd(() => this.transitionEnd());
-        // 不存在遮罩层元素时，添加遮罩层
-        if (!$overlay) {
-            $overlay = $.showOverlay(5100);
-        }
-        // 点击遮罩层时是否关闭对话框
-        if (this.options.modal) {
-            $overlay.off('click', this.overlayClick);
-        }
-        else {
-            $overlay.on('click', this.overlayClick);
-        }
-        // 是否显示遮罩层，不显示时，把遮罩层背景透明
-        $overlay.css('opacity', this.options.overlay ? '' : 0);
-        if (this.options.history) {
-            // 如果 hash 中原来就有 mdui-dialog，先删除，避免后退历史纪录后仍然有 mdui-dialog 导致无法关闭
-            // 包括 mdui-dialog 和 &mdui-dialog 和 ?mdui-dialog
-            let hash = window.location.hash.substring(1);
-            if (hash.indexOf('mdui-dialog') > -1) {
-                hash = hash.replace(/[&?]?mdui-dialog/g, '');
-            }
-            // 后退按钮关闭对话框
-            if (hash) {
-                window.location.hash = `${hash}${hash.indexOf('?') > -1 ? '&' : '?'}mdui-dialog`;
-            }
-            else {
-                window.location.hash = 'mdui-dialog';
-            }
-            $window.on('hashchange', this.hashchangeEvent);
-        }
-    }
-    /**
-     * 当前对话框是否为打开状态
-     */
-    isOpen() {
-        return this.state === 'opening' || this.state === 'opened';
-    }
-    /**
-     * 打开对话框
-     */
-    open() {
-        if (this.isOpen()) {
-            return;
-        }
-        // 如果当前有正在打开或已经打开的对话框,或队列不为空，则先加入队列，等旧对话框开始关闭时再打开
-        if ((currentInst &&
-            (currentInst.state === 'opening' || currentInst.state === 'opened')) ||
-            queue(queueName).length) {
-            queue(queueName, () => this.doOpen());
-            return;
-        }
-        this.doOpen();
-    }
-    /**
-     * 关闭对话框
-     */
-    close(historyBack = false) {
-        // historyBack 是否需要后退历史纪录，默认为 `false`。该参数仅内部使用
-        // 为 `false` 时是通过 js 关闭，需要后退一个历史记录
-        // 为 `true` 时是通过后退按钮关闭，不需要后退历史记录
-        // setTimeout 的作用是：
-        // 当同时关闭一个对话框，并打开另一个对话框时，使打开对话框的操作先执行，以使需要打开的对话框先加入队列
-        setTimeout(() => {
-            if (!this.isOpen()) {
-                return;
-            }
-            currentInst = null;
-            this.state = 'closing';
-            this.triggerEvent('close');
-            // 所有对话框都关闭，且当前没有打开的对话框时，隐藏遮罩
-            if (!queue(queueName).length && $overlay) {
-                $.hideOverlay();
-                $overlay = null;
-                // 若仍存在遮罩，恢复遮罩的 z-index
-                $('.mdui-overlay').css('z-index', 2000);
-            }
-            this.$element
-                .removeClass('mdui-dialog-open')
-                .transitionEnd(() => this.transitionEnd());
-            if (this.options.history && !queue(queueName).length) {
-                if (!historyBack) {
-                    window.history.back();
-                }
-                $window.off('hashchange', this.hashchangeEvent);
-            }
-            // 关闭旧对话框，打开新对话框。
-            // 加一点延迟，仅仅为了视觉效果更好。不加延时也不影响功能
-            setTimeout(() => {
-                dequeue(queueName);
-            }, 100);
-        });
-    }
-    /**
-     * 切换对话框打开/关闭状态
-     */
-    toggle() {
-        this.isOpen() ? this.close() : this.open();
-    }
-    /**
-     * 获取对话框状态。共包含四种状态：`opening`、`opened`、`closing`、`closed`
-     */
-    getState() {
-        return this.state;
-    }
-    /**
-     * 销毁对话框
-     */
-    destroy() {
-        if (this.append) {
-            this.$element.remove();
-        }
-        if (!queue(queueName).length && !currentInst) {
-            if ($overlay) {
-                $.hideOverlay();
-                $overlay = null;
-            }
-            if (isLockScreen) {
-                $.unlockScreen();
-                isLockScreen = false;
-            }
-        }
-    }
-    /**
-     * 对话框内容变化时，需要调用该方法来调整对话框位置和滚动条高度
-     */
-    handleUpdate() {
-        this.readjust();
-    }
-}
-export { currentInst, Dialog };

package/es/components/dialog/confirm.d.ts

@@ -1,54 +0,0 @@
-import { Dialog } from './class';
-import './dialog';
-declare module '../../interfaces/MduiStatic' {
-    interface MduiStatic {
-        /**
-         * 打开一个确认框，可以包含标题、内容、一个确认按钮和一个取消按钮
-         * @param text 确认框内容
-         * @param title 确认框标题
-         * @param onConfirm 点击确认按钮的回调函数，参数为对话框实例
-         * @param onCancel 点击取消按钮的回调函数，参数为对话框实例
-         * @param options 配置参数
-         */
-        confirm(text: string, title: string, onConfirm?: (dialog: Dialog) => void, onCancel?: (dialog: Dialog) => void, options?: OPTIONS): Dialog;
-        /**
-         * 打开一个确认框，可以包含内容、一个确认按钮和一个取消按钮
-         * @param text 确认框内容
-         * @param onConfirm 点击确认按钮的回调函数，参数为对话框实例
-         * @param onCancel 点击取消按钮的回调函数，参数为对话框实例
-         * @param options 配置参数
-         */
-        confirm(text: string, onConfirm?: (dialog: Dialog) => void, onCancel?: (dialog: Dialog) => void, options?: OPTIONS): Dialog;
-    }
-}
-declare type OPTIONS = {
-    /**
-     * 确认按钮的文本
-     */
-    confirmText?: string;
-    /**
-     * 取消按钮的文本
-     */
-    cancelText?: string;
-    /**
-     * 是否监听 hashchange 事件，为 `true` 时可以通过 Android 的返回键或浏览器后退按钮关闭对话框，默认为 `true`
-     */
-    history?: boolean;
-    /**
-     * 是否模态化对话框。为 `false` 时点击对话框外面的区域时关闭对话框，否则不关闭，默认为 `false`
-     */
-    modal?: boolean;
-    /**
-     * 按下 Esc 键时是否关闭对话框，默认为 `true`
-     */
-    closeOnEsc?: boolean;
-    /**
-     * 是否在按下取消按钮时是否关闭对话框
-     */
-    closeOnCancel?: boolean;
-    /**
-     * 是否在按下确认按钮时是否关闭对话框
-     */
-    closeOnConfirm?: boolean;
-};
-export {};

package/es/components/dialog/confirm.js

@@ -1,55 +0,0 @@
-import extend from 'mdui.jq/es/functions/extend';
-import { isFunction, isUndefined } from 'mdui.jq/es/utils';
-import mdui from '../../mdui';
-import './dialog';
-const DEFAULT_OPTIONS = {
-    confirmText: 'ok',
-    cancelText: 'cancel',
-    history: true,
-    modal: false,
-    closeOnEsc: true,
-    closeOnCancel: true,
-    closeOnConfirm: true,
-};
-mdui.confirm = function (text, title, onConfirm, onCancel, options) {
-    if (isFunction(title)) {
-        options = onCancel;
-        onCancel = onConfirm;
-        onConfirm = title;
-        title = '';
-    }
-    if (isUndefined(onConfirm)) {
-        // eslint-disable-next-line @typescript-eslint/no-empty-function
-        onConfirm = () => { };
-    }
-    if (isUndefined(onCancel)) {
-        // eslint-disable-next-line @typescript-eslint/no-empty-function
-        onCancel = () => { };
-    }
-    if (isUndefined(options)) {
-        options = {};
-    }
-    options = extend({}, DEFAULT_OPTIONS, options);
-    return mdui.dialog({
-        title: title,
-        content: text,
-        buttons: [
-            {
-                text: options.cancelText,
-                bold: false,
-                close: options.closeOnCancel,
-                onClick: onCancel,
-            },
-            {
-                text: options.confirmText,
-                bold: false,
-                close: options.closeOnConfirm,
-                onClick: onConfirm,
-            },
-        ],
-        cssClass: 'mdui-dialog-confirm',
-        history: options.history,
-        modal: options.modal,
-        closeOnEsc: options.closeOnEsc,
-    });
-};

package/es/components/dialog/customAttr.d.ts

@@ -1,4 +0,0 @@
-import 'mdui.jq/es/methods/data';
-import 'mdui.jq/es/methods/first';
-import 'mdui.jq/es/methods/on';
-import './index';

package/es/components/dialog/customAttr.js

@@ -1,25 +0,0 @@
-import $ from 'mdui.jq/es/$';
-import 'mdui.jq/es/methods/data';
-import 'mdui.jq/es/methods/first';
-import 'mdui.jq/es/methods/on';
-import mdui from '../../mdui';
-import { $document } from '../../utils/dom';
-import { parseOptions } from '../../utils/parseOptions';
-import './index';
-const customAttr = 'mdui-dialog';
-const dataName = '_mdui_dialog';
-$(() => {
-    $document.on('click', `[${customAttr}]`, function () {
-        const options = parseOptions(this, customAttr);
-        const selector = options.target;
-        // @ts-ignore
-        delete options.target;
-        const $dialog = $(selector).first();
-        let instance = $dialog.data(dataName);
-        if (!instance) {
-            instance = new mdui.Dialog($dialog, options);
-            $dialog.data(dataName, instance);
-        }
-        instance.open();
-    });
-});

package/es/components/dialog/dialog.d.ts

@@ -1,91 +0,0 @@
-import 'mdui.jq/es/methods/each';
-import 'mdui.jq/es/methods/find';
-import 'mdui.jq/es/methods/on';
-import { Dialog } from './class';
-import './index';
-declare module '../../interfaces/MduiStatic' {
-    interface MduiStatic {
-        /**
-         * 打开一个对话框，标题、内容、按钮等都可以自定义
-         * @param options 配置参数
-         */
-        dialog(options: OPTIONS): Dialog;
-    }
-}
-declare type BUTTON = {
-    /**
-     * 按钮文本
-     */
-    text?: string;
-    /**
-     * 按钮文本是否加粗，默认为 `false`
-     */
-    bold?: boolean;
-    /**
-     * 点击按钮后是否关闭对话框，默认为 `true`
-     */
-    close?: boolean;
-    /**
-     * 点击按钮的回调函数，参数为对话框的实例
-     */
-    onClick?: (dialog: Dialog) => void;
-};
-declare type OPTIONS = {
-    /**
-     * 对话框的标题
-     */
-    title?: string;
-    /**
-     * 对话框的内容
-     */
-    content?: string;
-    /**
-     * 按钮数组，每个按钮都是一个带按钮参数的对象
-     */
-    buttons?: BUTTON[];
-    /**
-     * 按钮是否垂直排列，默认为 `false`
-     */
-    stackedButtons?: boolean;
-    /**
-     * 添加到 `.mdui-dialog` 上的 CSS 类
-     */
-    cssClass?: string;
-    /**
-     * 是否监听 `hashchange` 事件，为 `true` 时可以通过 Android 的返回键或浏览器后退按钮关闭对话框，默认为 `true`
-     */
-    history?: boolean;
-    /**
-     * 打开对话框后是否显示遮罩层，默认为 `true`
-     */
-    overlay?: boolean;
-    /**
-     * 是否模态化对话框。为 `false` 时点击对话框外面的区域时关闭对话框，否则不关闭
-     */
-    modal?: boolean;
-    /**
-     * 按下 Esc 键时是否关闭对话框，默认为 `true`
-     */
-    closeOnEsc?: boolean;
-    /**
-     * 关闭对话框后是否自动销毁对话框，默认为 `true`
-     */
-    destroyOnClosed?: boolean;
-    /**
-     * 打开动画开始时的回调，参数为对话框实例
-     */
-    onOpen?: (dialog: Dialog) => void;
-    /**
-     * 打开动画结束时的回调，参数为对话框实例
-     */
-    onOpened?: (dialog: Dialog) => void;
-    /**
-     * 关闭动画开始时的回调，参数为对话框实例
-     */
-    onClose?: (dialog: Dialog) => void;
-    /**
-     * 关闭动画结束时的回调，参数为对话框实例
-     */
-    onClosed?: (dialog: Dialog) => void;
-};
-export {};

package/es/components/dialog/dialog.js

@@ -1,101 +0,0 @@
-import $ from 'mdui.jq/es/$';
-import each from 'mdui.jq/es/functions/each';
-import extend from 'mdui.jq/es/functions/extend';
-import 'mdui.jq/es/methods/each';
-import 'mdui.jq/es/methods/find';
-import 'mdui.jq/es/methods/on';
-import mdui from '../../mdui';
-import './index';
-const DEFAULT_BUTTON = {
-    text: '',
-    bold: false,
-    close: true,
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
-    onClick: () => { },
-};
-const DEFAULT_OPTIONS = {
-    title: '',
-    content: '',
-    buttons: [],
-    stackedButtons: false,
-    cssClass: '',
-    history: true,
-    overlay: true,
-    modal: false,
-    closeOnEsc: true,
-    destroyOnClosed: true,
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
-    onOpen: () => { },
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
-    onOpened: () => { },
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
-    onClose: () => { },
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
-    onClosed: () => { },
-};
-mdui.dialog = function (options) {
-    var _a, _b;
-    // 合并配置参数
-    options = extend({}, DEFAULT_OPTIONS, options);
-    each(options.buttons, (i, button) => {
-        options.buttons[i] = extend({}, DEFAULT_BUTTON, button);
-    });
-    // 按钮的 HTML
-    let buttonsHTML = '';
-    if ((_a = options.buttons) === null || _a === void 0 ? void 0 : _a.length) {
-        buttonsHTML = `<div class="mdui-dialog-actions${options.stackedButtons ? ' mdui-dialog-actions-stacked' : ''}">`;
-        each(options.buttons, (_, button) => {
-            buttonsHTML +=
-                '<a href="javascript:void(0)" ' +
-                    `class="mdui-btn mdui-ripple mdui-text-color-primary ${button.bold ? 'mdui-btn-bold' : ''}">${button.text}</a>`;
-        });
-        buttonsHTML += '</div>';
-    }
-    // Dialog 的 HTML
-    const HTML = `<div class="mdui-dialog ${options.cssClass}">` +
-        (options.title
-            ? `<div class="mdui-dialog-title">${options.title}</div>`
-            : '') +
-        (options.content
-            ? `<div class="mdui-dialog-content">${options.content}</div>`
-            : '') +
-        buttonsHTML +
-        '</div>';
-    // 实例化 Dialog
-    const instance = new mdui.Dialog(HTML, {
-        history: options.history,
-        overlay: options.overlay,
-        modal: options.modal,
-        closeOnEsc: options.closeOnEsc,
-        destroyOnClosed: options.destroyOnClosed,
-    });
-    // 绑定按钮事件
-    if ((_b = options.buttons) === null || _b === void 0 ? void 0 : _b.length) {
-        instance.$element
-            .find('.mdui-dialog-actions .mdui-btn')
-            .each((index, button) => {
-            $(button).on('click', () => {
-                options.buttons[index].onClick(instance);
-                if (options.buttons[index].close) {
-                    instance.close();
-                }
-            });
-        });
-    }
-    // 绑定打开关闭事件
-    instance.$element
-        .on('open.mdui.dialog', () => {
-        options.onOpen(instance);
-    })
-        .on('opened.mdui.dialog', () => {
-        options.onOpened(instance);
-    })
-        .on('close.mdui.dialog', () => {
-        options.onClose(instance);
-    })
-        .on('closed.mdui.dialog', () => {
-        options.onClosed(instance);
-    });
-    instance.open();
-    return instance;
-};

package/es/components/dialog/index.d.ts

@@ -1,20 +0,0 @@
-import Selector from 'mdui.jq/es/types/Selector';
-import 'mdui.jq/es/methods/on';
-import { OPTIONS, Dialog } from './class';
-declare module '../../interfaces/MduiStatic' {
-    interface MduiStatic {
-        /**
-         * Dialog 组件
-         *
-         * 请通过 `new mdui.Dialog()` 调用
-         */
-        Dialog: {
-            /**
-             * 实例化 Dialog 组件
-             * @param selector CSS 选择器、或 DOM 元素、或 JQ 对象
-             * @param options 配置参数
-             */
-            new (selector: Selector | HTMLElement | ArrayLike<HTMLElement>, options?: OPTIONS): Dialog;
-        };
-    }
-}

package/es/components/dialog/index.js

@@ -1,14 +0,0 @@
-import mdui from '../../mdui';
-import 'mdui.jq/es/methods/on';
-import { $document } from '../../utils/dom';
-import { currentInst, Dialog } from './class';
-// esc 按下时关闭对话框
-$document.on('keydown', (event) => {
-    if (currentInst &&
-        currentInst.options.closeOnEsc &&
-        currentInst.state === 'opened' &&
-        event.keyCode === 27) {
-        currentInst.close();
-    }
-});
-mdui.Dialog = Dialog;