mdui 1.0.2 → 2.0.0

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

@@ -1,74 +0,0 @@
-import 'mdui.jq/es/methods/find';
-import 'mdui.jq/es/methods/on';
-import 'mdui.jq/es/methods/val';
-import '../textfield';
-import { Dialog } from './class';
-import './dialog';
-declare module '../../interfaces/MduiStatic' {
-    interface MduiStatic {
-        /**
-         * 打开一个提示用户输入的对话框，可以包含标题、文本框标签、文本框、一个确认按钮和一个取消按钮
-         * @param label 文本框浮动标签的文本
-         * @param title 标题
-         * @param onConfirm 点击确认按钮的回调。含两个参数，分别为文本框的值和对话框实例
-         * @param onCancel 点击取消按钮的回调。含两个参数，分别为文本框的值和对话框实例
-         * @param options 配置参数
-         */
-        prompt(label: string, title: string, onConfirm?: (value: string, dialog: Dialog) => void, onCancel?: (value: string, dialog: Dialog) => void, options?: OPTIONS): Dialog;
-        /**
-         * 打开一个提示用户输入的对话框，可以包含文本框标签、文本框、一个确认按钮和一个取消按钮
-         * @param label 文本框浮动标签的文本
-         * @param onConfirm 点击确认按钮的回调。含两个参数，分别为文本框的值和对话框实例
-         * @param onCancel 点击取消按钮的回调，含两个参数，分别为文本框的值和对话框实例
-         * @param options 配置参数
-         */
-        prompt(label: string, onConfirm?: (value: string, dialog: Dialog) => void, onCancel?: (value: string, 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;
-    /**
-     * 是否在按下 Enter 键时触发 `onConfirm` 回调函数，默认为 `false`
-     */
-    confirmOnEnter?: boolean;
-    /**
-     * 文本框的类型。`text`: 单行文本框； `textarea`: 多行文本框
-     */
-    type?: 'text' | 'textarea';
-    /**
-     * 最大输入字符数量，为 0 时表示不限制
-     */
-    maxlength?: number;
-    /**
-     * 文本框的默认值
-     */
-    defaultValue?: string;
-};
-export {};

package/es/components/dialog/prompt.js

@@ -1,109 +0,0 @@
-import extend from 'mdui.jq/es/functions/extend';
-import 'mdui.jq/es/methods/find';
-import 'mdui.jq/es/methods/on';
-import 'mdui.jq/es/methods/val';
-import { isFunction, isUndefined } from 'mdui.jq/es/utils';
-import mdui from '../../mdui';
-import '../textfield';
-import './dialog';
-const DEFAULT_OPTIONS = {
-    confirmText: 'ok',
-    cancelText: 'cancel',
-    history: true,
-    modal: false,
-    closeOnEsc: true,
-    closeOnCancel: true,
-    closeOnConfirm: true,
-    type: 'text',
-    maxlength: 0,
-    defaultValue: '',
-    confirmOnEnter: false,
-};
-mdui.prompt = function (label, 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);
-    const content = '<div class="mdui-textfield">' +
-        (label ? `<label class="mdui-textfield-label">${label}</label>` : '') +
-        (options.type === 'text'
-            ? `<input class="mdui-textfield-input" type="text" value="${options.defaultValue}" ${options.maxlength ? 'maxlength="' + options.maxlength + '"' : ''}/>`
-            : '') +
-        (options.type === 'textarea'
-            ? `<textarea class="mdui-textfield-input" ${options.maxlength ? 'maxlength="' + options.maxlength + '"' : ''}>${options.defaultValue}</textarea>`
-            : '') +
-        '</div>';
-    const onCancelClick = (dialog) => {
-        const value = dialog.$element.find('.mdui-textfield-input').val();
-        onCancel(value, dialog);
-    };
-    const onConfirmClick = (dialog) => {
-        const value = dialog.$element.find('.mdui-textfield-input').val();
-        onConfirm(value, dialog);
-    };
-    return mdui.dialog({
-        title,
-        content,
-        buttons: [
-            {
-                text: options.cancelText,
-                bold: false,
-                close: options.closeOnCancel,
-                onClick: onCancelClick,
-            },
-            {
-                text: options.confirmText,
-                bold: false,
-                close: options.closeOnConfirm,
-                onClick: onConfirmClick,
-            },
-        ],
-        cssClass: 'mdui-dialog-prompt',
-        history: options.history,
-        modal: options.modal,
-        closeOnEsc: options.closeOnEsc,
-        onOpen: (dialog) => {
-            // 初始化输入框
-            const $input = dialog.$element.find('.mdui-textfield-input');
-            mdui.updateTextFields($input);
-            // 聚焦到输入框
-            $input[0].focus();
-            // 捕捉文本框回车键，在单行文本框的情况下触发回调
-            if (options.type !== 'textarea' && options.confirmOnEnter === true) {
-                $input.on('keydown', (event) => {
-                    if (event.keyCode === 13) {
-                        const value = dialog.$element.find('.mdui-textfield-input').val();
-                        onConfirm(value, dialog);
-                        if (options.closeOnConfirm) {
-                            dialog.close();
-                        }
-                        return false;
-                    }
-                    return;
-                });
-            }
-            // 如果是多行输入框，监听输入框的 input 事件，更新对话框高度
-            if (options.type === 'textarea') {
-                $input.on('input', () => dialog.handleUpdate());
-            }
-            // 有字符数限制时，加载完文本框后 DOM 会变化，需要更新对话框高度
-            if (options.maxlength) {
-                dialog.handleUpdate();
-            }
-        },
-    });
-};

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

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

package/es/components/drawer/customAttr.js

@@ -1,20 +0,0 @@
-import $ from 'mdui.jq/es/$';
-import 'mdui.jq/es/methods/first';
-import 'mdui.jq/es/methods/on';
-import mdui from '../../mdui';
-import '../../global/mutation';
-import { parseOptions } from '../../utils/parseOptions';
-import './index';
-const customAttr = 'mdui-drawer';
-$(() => {
-    mdui.mutation(`[${customAttr}]`, function () {
-        const $element = $(this);
-        const options = parseOptions(this, customAttr);
-        const selector = options.target;
-        // @ts-ignore
-        delete options.target;
-        const $drawer = $(selector).first();
-        const instance = new mdui.Drawer($drawer, options);
-        $element.on('click', () => instance.toggle());
-    });
-});

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

@@ -1,111 +0,0 @@
-/**
- * 在桌面设备上默认显示抽屉栏，不显示遮罩层
- * 在手机和平板设备上默认不显示抽屉栏，始终显示遮罩层，且覆盖导航栏
- */
-import { JQ } from 'mdui.jq/es/JQ';
-import 'mdui.jq/es/methods/addClass';
-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/off';
-import 'mdui.jq/es/methods/on';
-import 'mdui.jq/es/methods/one';
-import 'mdui.jq/es/methods/removeClass';
-import 'mdui.jq/es/methods/width';
-import Selector from 'mdui.jq/es/types/Selector';
-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';
-declare module '../../interfaces/MduiStatic' {
-    interface MduiStatic {
-        /**
-         * Drawer 组件
-         *
-         * 请通过 `new mdui.Drawer()` 调用
-         */
-        Drawer: {
-            /**
-             * 实例化 Drawer 组件
-             * @param selector CSS 选择器、或 DOM 元素、或 JQ 对象
-             * @param options 配置参数
-             */
-            new (selector: Selector | HTMLElement | ArrayLike<HTMLElement>, options?: OPTIONS): Drawer;
-        };
-    }
-}
-declare type OPTIONS = {
-    /**
-     * 打开抽屉栏时是否显示遮罩层。该参数只对中等屏幕及以上的设备有效，在超小屏和小屏设备上始终会显示遮罩层。
-     */
-    overlay?: boolean;
-    /**
-     * 是否启用滑动手势。
-     */
-    swipe?: boolean;
-};
-declare type STATE = 'opening' | 'opened' | 'closing' | 'closed';
-declare class Drawer {
-    /**
-     * drawer 元素的 JQ 对象
-     */
-    $element: JQ;
-    /**
-     * 配置参数
-     */
-    options: OPTIONS;
-    /**
-     * 当前是否显示着遮罩层
-     */
-    private overlay;
-    /**
-     * 抽屉栏的位置
-     */
-    private position;
-    /**
-     * 当前抽屉栏状态
-     */
-    private state;
-    constructor(selector: Selector | HTMLElement | ArrayLike<HTMLElement>, options?: OPTIONS);
-    /**
-     * 是否是桌面设备
-     */
-    private isDesktop;
-    /**
-     * 滑动手势支持
-     */
-    private swipeSupport;
-    /**
-     * 触发组件事件
-     * @param name
-     */
-    private triggerEvent;
-    /**
-     * 动画结束回调
-     */
-    private transitionEnd;
-    /**
-     * 是否处于打开状态
-     */
-    private isOpen;
-    /**
-     * 打开抽屉栏
-     */
-    open(): void;
-    /**
-     * 关闭抽屉栏
-     */
-    close(): void;
-    /**
-     * 切换抽屉栏打开/关闭状态
-     */
-    toggle(): void;
-    /**
-     * 返回当前抽屉栏的状态。共包含四种状态：`opening`、`opened`、`closing`、`closed`
-     */
-    getState(): STATE;
-}
-export {};

package/es/components/drawer/index.js

@@ -1,310 +0,0 @@
-/**
- * 在桌面设备上默认显示抽屉栏，不显示遮罩层
- * 在手机和平板设备上默认不显示抽屉栏，始终显示遮罩层，且覆盖导航栏
- */
-import $ from 'mdui.jq/es/$';
-import extend from 'mdui.jq/es/functions/extend';
-import 'mdui.jq/es/methods/addClass';
-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/off';
-import 'mdui.jq/es/methods/on';
-import 'mdui.jq/es/methods/one';
-import 'mdui.jq/es/methods/removeClass';
-import 'mdui.jq/es/methods/width';
-import mdui from '../../mdui';
-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';
-const DEFAULT_OPTIONS = {
-    overlay: false,
-    swipe: false,
-};
-class Drawer {
-    constructor(selector, options = {}) {
-        /**
-         * 配置参数
-         */
-        this.options = extend({}, DEFAULT_OPTIONS);
-        /**
-         * 当前是否显示着遮罩层
-         */
-        this.overlay = false;
-        this.$element = $(selector).first();
-        extend(this.options, options);
-        this.position = this.$element.hasClass('mdui-drawer-right')
-            ? 'right'
-            : 'left';
-        if (this.$element.hasClass('mdui-drawer-close')) {
-            this.state = 'closed';
-        }
-        else if (this.$element.hasClass('mdui-drawer-open')) {
-            this.state = 'opened';
-        }
-        else if (this.isDesktop()) {
-            this.state = 'opened';
-        }
-        else {
-            this.state = 'closed';
-        }
-        // 浏览器窗口大小调整时
-        $window.on('resize', $.throttle(() => {
-            if (this.isDesktop()) {
-                // 由手机平板切换到桌面时
-                // 如果显示着遮罩，则隐藏遮罩
-                if (this.overlay && !this.options.overlay) {
-                    $.hideOverlay();
-                    this.overlay = false;
-                    $.unlockScreen();
-                }
-                // 没有强制关闭，则状态为打开状态
-                if (!this.$element.hasClass('mdui-drawer-close')) {
-                    this.state = 'opened';
-                }
-            }
-            else if (!this.overlay && this.state === 'opened') {
-                // 由桌面切换到手机平板时。如果抽屉栏是打开着的且没有遮罩层，则关闭抽屉栏
-                if (this.$element.hasClass('mdui-drawer-open')) {
-                    $.showOverlay();
-                    this.overlay = true;
-                    $.lockScreen();
-                    $('.mdui-overlay').one('click', () => this.close());
-                }
-                else {
-                    this.state = 'closed';
-                }
-            }
-        }, 100));
-        // 绑定关闭按钮事件
-        this.$element.find('[mdui-drawer-close]').each((_, close) => {
-            $(close).on('click', () => this.close());
-        });
-        this.swipeSupport();
-    }
-    /**
-     * 是否是桌面设备
-     */
-    isDesktop() {
-        return $window.width() >= 1024;
-    }
-    /**
-     * 滑动手势支持
-     */
-    swipeSupport() {
-        // eslint-disable-next-line @typescript-eslint/no-this-alias
-        const that = this;
-        // 抽屉栏滑动手势控制
-        let openNavEventHandler;
-        let touchStartX;
-        let touchStartY;
-        let swipeStartX;
-        let swiping = null;
-        let maybeSwiping = false;
-        const $body = $('body');
-        // 手势触发的范围
-        const swipeAreaWidth = 24;
-        function setPosition(translateX) {
-            const rtlTranslateMultiplier = that.position === 'right' ? -1 : 1;
-            const transformCSS = `translate(${-1 * rtlTranslateMultiplier * translateX}px, 0) !important;`;
-            const transitionCSS = 'initial !important;';
-            that.$element.css('cssText', `transform: ${transformCSS}; transition: ${transitionCSS};`);
-        }
-        function cleanPosition() {
-            that.$element[0].style.transform = '';
-            that.$element[0].style.webkitTransform = '';
-            that.$element[0].style.transition = '';
-            that.$element[0].style.webkitTransition = '';
-        }
-        function getMaxTranslateX() {
-            return that.$element.width() + 10;
-        }
-        function getTranslateX(currentX) {
-            return Math.min(Math.max(swiping === 'closing'
-                ? swipeStartX - currentX
-                : getMaxTranslateX() + swipeStartX - currentX, 0), getMaxTranslateX());
-        }
-        function onBodyTouchEnd(event) {
-            if (swiping) {
-                let touchX = event.changedTouches[0].pageX;
-                if (that.position === 'right') {
-                    touchX = $body.width() - touchX;
-                }
-                const translateRatio = getTranslateX(touchX) / getMaxTranslateX();
-                maybeSwiping = false;
-                const swipingState = swiping;
-                swiping = null;
-                if (swipingState === 'opening') {
-                    if (translateRatio < 0.92) {
-                        cleanPosition();
-                        that.open();
-                    }
-                    else {
-                        cleanPosition();
-                    }
-                }
-                else {
-                    if (translateRatio > 0.08) {
-                        cleanPosition();
-                        that.close();
-                    }
-                    else {
-                        cleanPosition();
-                    }
-                }
-                $.unlockScreen();
-            }
-            else {
-                maybeSwiping = false;
-            }
-            $body.off({
-                // eslint-disable-next-line @typescript-eslint/no-use-before-define
-                touchmove: onBodyTouchMove,
-                touchend: onBodyTouchEnd,
-                // eslint-disable-next-line @typescript-eslint/no-use-before-define
-                touchcancel: onBodyTouchMove,
-            });
-        }
-        function onBodyTouchMove(event) {
-            let touchX = event.touches[0].pageX;
-            if (that.position === 'right') {
-                touchX = $body.width() - touchX;
-            }
-            const touchY = event.touches[0].pageY;
-            if (swiping) {
-                setPosition(getTranslateX(touchX));
-            }
-            else if (maybeSwiping) {
-                const dXAbs = Math.abs(touchX - touchStartX);
-                const dYAbs = Math.abs(touchY - touchStartY);
-                const threshold = 8;
-                if (dXAbs > threshold && dYAbs <= threshold) {
-                    swipeStartX = touchX;
-                    swiping = that.state === 'opened' ? 'closing' : 'opening';
-                    $.lockScreen();
-                    setPosition(getTranslateX(touchX));
-                }
-                else if (dXAbs <= threshold && dYAbs > threshold) {
-                    onBodyTouchEnd();
-                }
-            }
-        }
-        function onBodyTouchStart(event) {
-            touchStartX = event.touches[0].pageX;
-            if (that.position === 'right') {
-                touchStartX = $body.width() - touchStartX;
-            }
-            touchStartY = event.touches[0].pageY;
-            if (that.state !== 'opened') {
-                if (touchStartX > swipeAreaWidth ||
-                    openNavEventHandler !== onBodyTouchStart) {
-                    return;
-                }
-            }
-            maybeSwiping = true;
-            $body.on({
-                touchmove: onBodyTouchMove,
-                touchend: onBodyTouchEnd,
-                touchcancel: onBodyTouchMove,
-            });
-        }
-        function enableSwipeHandling() {
-            if (!openNavEventHandler) {
-                $body.on('touchstart', onBodyTouchStart);
-                openNavEventHandler = onBodyTouchStart;
-            }
-        }
-        if (this.options.swipe) {
-            enableSwipeHandling();
-        }
-    }
-    /**
-     * 触发组件事件
-     * @param name
-     */
-    triggerEvent(name) {
-        componentEvent(name, 'drawer', this.$element, this);
-    }
-    /**
-     * 动画结束回调
-     */
-    transitionEnd() {
-        if (this.$element.hasClass('mdui-drawer-open')) {
-            this.state = 'opened';
-            this.triggerEvent('opened');
-        }
-        else {
-            this.state = 'closed';
-            this.triggerEvent('closed');
-        }
-    }
-    /**
-     * 是否处于打开状态
-     */
-    isOpen() {
-        return this.state === 'opening' || this.state === 'opened';
-    }
-    /**
-     * 打开抽屉栏
-     */
-    open() {
-        if (this.isOpen()) {
-            return;
-        }
-        this.state = 'opening';
-        this.triggerEvent('open');
-        if (!this.options.overlay) {
-            $('body').addClass(`mdui-drawer-body-${this.position}`);
-        }
-        this.$element
-            .removeClass('mdui-drawer-close')
-            .addClass('mdui-drawer-open')
-            .transitionEnd(() => this.transitionEnd());
-        if (!this.isDesktop() || this.options.overlay) {
-            this.overlay = true;
-            $.showOverlay().one('click', () => this.close());
-            $.lockScreen();
-        }
-    }
-    /**
-     * 关闭抽屉栏
-     */
-    close() {
-        if (!this.isOpen()) {
-            return;
-        }
-        this.state = 'closing';
-        this.triggerEvent('close');
-        if (!this.options.overlay) {
-            $('body').removeClass(`mdui-drawer-body-${this.position}`);
-        }
-        this.$element
-            .addClass('mdui-drawer-close')
-            .removeClass('mdui-drawer-open')
-            .transitionEnd(() => this.transitionEnd());
-        if (this.overlay) {
-            $.hideOverlay();
-            this.overlay = false;
-            $.unlockScreen();
-        }
-    }
-    /**
-     * 切换抽屉栏打开/关闭状态
-     */
-    toggle() {
-        this.isOpen() ? this.close() : this.open();
-    }
-    /**
-     * 返回当前抽屉栏的状态。共包含四种状态：`opening`、`opened`、`closing`、`closed`
-     */
-    getState() {
-        return this.state;
-    }
-}
-mdui.Drawer = Drawer;

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

@@ -1 +0,0 @@
-import './index';

package/es/components/fab/customAttr.js

@@ -1,13 +0,0 @@
-import $ from 'mdui.jq/es/$';
-import mdui from '../../mdui';
-import { $document } from '../../utils/dom';
-import { parseOptions } from '../../utils/parseOptions';
-import './index';
-const customAttr = 'mdui-fab';
-$(() => {
-    // mouseenter 不冒泡，无法进行事件委托，这里用 mouseover 代替。
-    // 不管是 click 、 mouseover 还是 touchstart ，都先初始化。
-    $document.on('touchstart mousedown mouseover', `[${customAttr}]`, function () {
-        new mdui.Fab(this, parseOptions(this, customAttr));
-    });
-});