mdui 1.0.2 → 2.0.1

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

@@ -1,100 +0,0 @@
-import { JQ } from 'mdui.jq/es/JQ';
-import 'mdui.jq/es/methods/addClass';
-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/last';
-import 'mdui.jq/es/methods/on';
-import 'mdui.jq/es/methods/parents';
-import 'mdui.jq/es/methods/removeClass';
-import Selector from 'mdui.jq/es/types/Selector';
-import '../../jq_extends/methods/transitionEnd';
-declare module '../../interfaces/MduiStatic' {
-    interface MduiStatic {
-        /**
-         * 浮动操作按钮组件
-         *
-         * 请通过 `new mdui.Fab()` 调用
-         */
-        Fab: {
-            /**
-             * 实例化 Fab 组件
-             * @param selector CSS 选择器、或 DOM 元素、或 JQ 对象
-             * @param options 配置参数
-             */
-            new (selector: Selector | HTMLElement | ArrayLike<HTMLElement>, options?: OPTIONS): Fab;
-        };
-    }
-}
-declare type OPTIONS = {
-    /**
-     * 触发方式。`hover`: 鼠标悬浮触发；`click`: 点击触发
-     *
-     * 默认为 `hover`
-     */
-    trigger?: 'click' | 'hover';
-};
-declare type STATE = 'opening' | 'opened' | 'closing' | 'closed';
-declare class Fab {
-    /**
-     * Fab 元素的 JQ 对象
-     */
-    $element: JQ;
-    /**
-     * 配置参数
-     */
-    options: OPTIONS;
-    /**
-     * 当前 fab 的状态
-     */
-    private state;
-    /**
-     * 按钮元素
-     */
-    private $btn;
-    /**
-     * 拨号菜单元素
-     */
-    private $dial;
-    /**
-     * 拨号菜单内的按钮
-     */
-    private $dialBtns;
-    constructor(selector: Selector | HTMLElement | ArrayLike<HTMLElement>, options?: OPTIONS);
-    /**
-     * 触发组件事件
-     * @param name
-     */
-    private triggerEvent;
-    /**
-     * 当前是否为打开状态
-     */
-    private isOpen;
-    /**
-     * 打开快速拨号菜单
-     */
-    open(): void;
-    /**
-     * 关闭快速拨号菜单
-     */
-    close(): void;
-    /**
-     * 切换快速拨号菜单的打开状态
-     */
-    toggle(): void;
-    /**
-     * 以动画的形式显示整个浮动操作按钮
-     */
-    show(): void;
-    /**
-     * 以动画的形式隐藏整个浮动操作按钮
-     */
-    hide(): void;
-    /**
-     * 返回当前快速拨号菜单的打开状态。共包含四种状态：`opening`、`opened`、`closing`、`closed`
-     */
-    getState(): STATE;
-}
-export {};

package/es/components/fab/index.js

@@ -1,144 +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/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/last';
-import 'mdui.jq/es/methods/on';
-import 'mdui.jq/es/methods/parents';
-import 'mdui.jq/es/methods/removeClass';
-import mdui from '../../mdui';
-import '../../jq_extends/methods/transitionEnd';
-import { componentEvent } from '../../utils/componentEvent';
-import { $document } from '../../utils/dom';
-import { startEvent } from '../../utils/touchHandler';
-const DEFAULT_OPTIONS = {
-    trigger: 'hover',
-};
-class Fab {
-    constructor(selector, options = {}) {
-        /**
-         * 配置参数
-         */
-        this.options = extend({}, DEFAULT_OPTIONS);
-        /**
-         * 当前 fab 的状态
-         */
-        this.state = 'closed';
-        this.$element = $(selector).first();
-        extend(this.options, options);
-        this.$btn = this.$element.find('.mdui-fab');
-        this.$dial = this.$element.find('.mdui-fab-dial');
-        this.$dialBtns = this.$dial.find('.mdui-fab');
-        if (this.options.trigger === 'hover') {
-            this.$btn.on('touchstart mouseenter', () => this.open());
-            this.$element.on('mouseleave', () => this.close());
-        }
-        if (this.options.trigger === 'click') {
-            this.$btn.on(startEvent, () => this.open());
-        }
-        // 触摸屏幕其他地方关闭快速拨号
-        $document.on(startEvent, (event) => {
-            if ($(event.target).parents('.mdui-fab-wrapper').length) {
-                return;
-            }
-            this.close();
-        });
-    }
-    /**
-     * 触发组件事件
-     * @param name
-     */
-    triggerEvent(name) {
-        componentEvent(name, 'fab', this.$element, this);
-    }
-    /**
-     * 当前是否为打开状态
-     */
-    isOpen() {
-        return this.state === 'opening' || this.state === 'opened';
-    }
-    /**
-     * 打开快速拨号菜单
-     */
-    open() {
-        if (this.isOpen()) {
-            return;
-        }
-        // 为菜单中的按钮添加不同的 transition-delay
-        this.$dialBtns.each((index, btn) => {
-            const delay = `${15 * (this.$dialBtns.length - index)}ms`;
-            btn.style.transitionDelay = delay;
-            btn.style.webkitTransitionDelay = delay;
-        });
-        this.$dial.css('height', 'auto').addClass('mdui-fab-dial-show');
-        // 如果按钮中存在 .mdui-fab-opened 的图标，则进行图标切换
-        if (this.$btn.find('.mdui-fab-opened').length) {
-            this.$btn.addClass('mdui-fab-opened');
-        }
-        this.state = 'opening';
-        this.triggerEvent('open');
-        // 打开顺序为从下到上逐个打开，最上面的打开后才表示动画完成
-        this.$dialBtns.first().transitionEnd(() => {
-            if (this.$btn.hasClass('mdui-fab-opened')) {
-                this.state = 'opened';
-                this.triggerEvent('opened');
-            }
-        });
-    }
-    /**
-     * 关闭快速拨号菜单
-     */
-    close() {
-        if (!this.isOpen()) {
-            return;
-        }
-        // 为菜单中的按钮添加不同的 transition-delay
-        this.$dialBtns.each((index, btn) => {
-            const delay = `${15 * index}ms`;
-            btn.style.transitionDelay = delay;
-            btn.style.webkitTransitionDelay = delay;
-        });
-        this.$dial.removeClass('mdui-fab-dial-show');
-        this.$btn.removeClass('mdui-fab-opened');
-        this.state = 'closing';
-        this.triggerEvent('close');
-        // 从上往下依次关闭，最后一个关闭后才表示动画完成
-        this.$dialBtns.last().transitionEnd(() => {
-            if (this.$btn.hasClass('mdui-fab-opened')) {
-                return;
-            }
-            this.state = 'closed';
-            this.triggerEvent('closed');
-            this.$dial.css('height', 0);
-        });
-    }
-    /**
-     * 切换快速拨号菜单的打开状态
-     */
-    toggle() {
-        this.isOpen() ? this.close() : this.open();
-    }
-    /**
-     * 以动画的形式显示整个浮动操作按钮
-     */
-    show() {
-        this.$element.removeClass('mdui-fab-hide');
-    }
-    /**
-     * 以动画的形式隐藏整个浮动操作按钮
-     */
-    hide() {
-        this.$element.addClass('mdui-fab-hide');
-    }
-    /**
-     * 返回当前快速拨号菜单的打开状态。共包含四种状态：`opening`、`opened`、`closing`、`closed`
-     */
-    getState() {
-        return this.state;
-    }
-}
-mdui.Fab = Fab;

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

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

package/es/components/headroom/customAttr.js

@@ -1,11 +0,0 @@
-import $ from 'mdui.jq/es/$';
-import mdui from '../../mdui';
-import '../../global/mutation';
-import { parseOptions } from '../../utils/parseOptions';
-import './index';
-const customAttr = 'mdui-headroom';
-$(() => {
-    mdui.mutation(`[${customAttr}]`, function () {
-        new mdui.Headroom(this, parseOptions(this, customAttr));
-    });
-});

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

@@ -1,120 +0,0 @@
-import { JQ } from 'mdui.jq/es/JQ';
-import 'mdui.jq/es/methods/addClass';
-import 'mdui.jq/es/methods/data';
-import 'mdui.jq/es/methods/first';
-import 'mdui.jq/es/methods/hasClass';
-import 'mdui.jq/es/methods/on';
-import 'mdui.jq/es/methods/removeClass';
-import Selector from 'mdui.jq/es/types/Selector';
-import '../../jq_extends/methods/transitionEnd';
-declare module '../../interfaces/MduiStatic' {
-    interface MduiStatic {
-        /**
-         * Headroom 插件
-         *
-         * 请通过 `new mdui.Headroom()` 调用
-         */
-        Headroom: {
-            /**
-             * 实例化 Headroom 组件
-             * @param selector CSS 选择器、或 DOM 元素、或 JQ 对象
-             * @param options 配置参数
-             */
-            new (selector: Selector | HTMLElement | ArrayLike<HTMLElement>, options?: OPTIONS): Headroom;
-        };
-    }
-}
-declare type TOLERANCE = {
-    /**
-     * 滚动条向下滚动多少距离开始隐藏或显示元素
-     */
-    down: number;
-    /**
-     * 滚动条向上滚动多少距离开始隐藏或显示元素
-     */
-    up: number;
-};
-declare type OPTIONS = {
-    /**
-     * 滚动条滚动多少距离开始隐藏或显示元素
-     */
-    tolerance?: TOLERANCE | number;
-    /**
-     * 在页面顶部多少距离内滚动不会隐藏元素
-     */
-    offset?: number;
-    /**
-     * 初始化时添加的类
-     */
-    initialClass?: string;
-    /**
-     * 元素固定时添加的类
-     */
-    pinnedClass?: string;
-    /**
-     * 元素隐藏时添加的类
-     */
-    unpinnedClass?: string;
-};
-declare type STATE = 'pinning' | 'pinned' | 'unpinning' | 'unpinned';
-declare class Headroom {
-    /**
-     * headroom 元素的 JQ 对象
-     */
-    $element: JQ;
-    /**
-     * 配置参数
-     */
-    options: OPTIONS;
-    /**
-     * 当前 headroom 的状态
-     */
-    private state;
-    /**
-     * 当前是否启用
-     */
-    private isEnable;
-    /**
-     * 上次滚动后，垂直方向的距离
-     */
-    private lastScrollY;
-    /**
-     * AnimationFrame ID
-     */
-    private rafId;
-    constructor(selector: Selector | HTMLElement | ArrayLike<HTMLElement>, options?: OPTIONS);
-    /**
-     * 滚动时的处理
-     */
-    private onScroll;
-    /**
-     * 触发组件事件
-     * @param name
-     */
-    private triggerEvent;
-    /**
-     * 动画结束的回调
-     */
-    private transitionEnd;
-    /**
-     * 使元素固定住
-     */
-    pin(): void;
-    /**
-     * 使元素隐藏
-     */
-    unpin(): void;
-    /**
-     * 启用 headroom 插件
-     */
-    enable(): void;
-    /**
-     * 禁用 headroom 插件
-     */
-    disable(): void;
-    /**
-     * 获取当前状态。共包含四种状态：`pinning`、`pinned`、`unpinning`、`unpinned`
-     */
-    getState(): STATE;
-}
-export {};

package/es/components/headroom/index.js

@@ -1,167 +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/data';
-import 'mdui.jq/es/methods/first';
-import 'mdui.jq/es/methods/hasClass';
-import 'mdui.jq/es/methods/on';
-import 'mdui.jq/es/methods/removeClass';
-import { isNumber } from 'mdui.jq/es/utils';
-import mdui from '../../mdui';
-import '../../jq_extends/methods/transitionEnd';
-import { componentEvent } from '../../utils/componentEvent';
-import { $window } from '../../utils/dom';
-const DEFAULT_OPTIONS = {
-    tolerance: 5,
-    offset: 0,
-    initialClass: 'mdui-headroom',
-    pinnedClass: 'mdui-headroom-pinned-top',
-    unpinnedClass: 'mdui-headroom-unpinned-top',
-};
-class Headroom {
-    constructor(selector, options = {}) {
-        /**
-         * 配置参数
-         */
-        this.options = extend({}, DEFAULT_OPTIONS);
-        /**
-         * 当前 headroom 的状态
-         */
-        this.state = 'pinned';
-        /**
-         * 当前是否启用
-         */
-        this.isEnable = false;
-        /**
-         * 上次滚动后，垂直方向的距离
-         */
-        this.lastScrollY = 0;
-        /**
-         * AnimationFrame ID
-         */
-        this.rafId = 0;
-        this.$element = $(selector).first();
-        extend(this.options, options);
-        // tolerance 参数若为数值，转换为对象
-        const tolerance = this.options.tolerance;
-        if (isNumber(tolerance)) {
-            this.options.tolerance = {
-                down: tolerance,
-                up: tolerance,
-            };
-        }
-        this.enable();
-    }
-    /**
-     * 滚动时的处理
-     */
-    onScroll() {
-        this.rafId = window.requestAnimationFrame(() => {
-            const currentScrollY = window.pageYOffset;
-            const direction = currentScrollY > this.lastScrollY ? 'down' : 'up';
-            const tolerance = this.options.tolerance[direction];
-            const scrolled = Math.abs(currentScrollY - this.lastScrollY);
-            const toleranceExceeded = scrolled >= tolerance;
-            if (currentScrollY > this.lastScrollY &&
-                currentScrollY >= this.options.offset &&
-                toleranceExceeded) {
-                this.unpin();
-            }
-            else if ((currentScrollY < this.lastScrollY && toleranceExceeded) ||
-                currentScrollY <= this.options.offset) {
-                this.pin();
-            }
-            this.lastScrollY = currentScrollY;
-        });
-    }
-    /**
-     * 触发组件事件
-     * @param name
-     */
-    triggerEvent(name) {
-        componentEvent(name, 'headroom', this.$element, this);
-    }
-    /**
-     * 动画结束的回调
-     */
-    transitionEnd() {
-        if (this.state === 'pinning') {
-            this.state = 'pinned';
-            this.triggerEvent('pinned');
-        }
-        if (this.state === 'unpinning') {
-            this.state = 'unpinned';
-            this.triggerEvent('unpinned');
-        }
-    }
-    /**
-     * 使元素固定住
-     */
-    pin() {
-        if (this.state === 'pinning' ||
-            this.state === 'pinned' ||
-            !this.$element.hasClass(this.options.initialClass)) {
-            return;
-        }
-        this.triggerEvent('pin');
-        this.state = 'pinning';
-        this.$element
-            .removeClass(this.options.unpinnedClass)
-            .addClass(this.options.pinnedClass)
-            .transitionEnd(() => this.transitionEnd());
-    }
-    /**
-     * 使元素隐藏
-     */
-    unpin() {
-        if (this.state === 'unpinning' ||
-            this.state === 'unpinned' ||
-            !this.$element.hasClass(this.options.initialClass)) {
-            return;
-        }
-        this.triggerEvent('unpin');
-        this.state = 'unpinning';
-        this.$element
-            .removeClass(this.options.pinnedClass)
-            .addClass(this.options.unpinnedClass)
-            .transitionEnd(() => this.transitionEnd());
-    }
-    /**
-     * 启用 headroom 插件
-     */
-    enable() {
-        if (this.isEnable) {
-            return;
-        }
-        this.isEnable = true;
-        this.state = 'pinned';
-        this.$element
-            .addClass(this.options.initialClass)
-            .removeClass(this.options.pinnedClass)
-            .removeClass(this.options.unpinnedClass);
-        this.lastScrollY = window.pageYOffset;
-        $window.on('scroll', () => this.onScroll());
-    }
-    /**
-     * 禁用 headroom 插件
-     */
-    disable() {
-        if (!this.isEnable) {
-            return;
-        }
-        this.isEnable = false;
-        this.$element
-            .removeClass(this.options.initialClass)
-            .removeClass(this.options.pinnedClass)
-            .removeClass(this.options.unpinnedClass);
-        $window.off('scroll', () => this.onScroll());
-        window.cancelAnimationFrame(this.rafId);
-    }
-    /**
-     * 获取当前状态。共包含四种状态：`pinning`、`pinned`、`unpinning`、`unpinned`
-     */
-    getState() {
-        return this.state;
-    }
-}
-mdui.Headroom = Headroom;

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

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

package/es/components/menu/customAttr.js

@@ -1,24 +0,0 @@
-import $ from 'mdui.jq/es/$';
-import 'mdui.jq/es/methods/data';
-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-menu';
-const dataName = '_mdui_menu';
-$(() => {
-    $document.on('click', `[${customAttr}]`, function () {
-        const $this = $(this);
-        let instance = $this.data(dataName);
-        if (!instance) {
-            const options = parseOptions(this, customAttr);
-            const menuSelector = options.target;
-            // @ts-ignore
-            delete options.target;
-            instance = new mdui.Menu($this, menuSelector, options);
-            $this.data(dataName, instance);
-            instance.toggle();
-        }
-    });
-});