mdui 1.0.2 → 2.0.0

package/es/components/snackbar/index.js

@@ -1,217 +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/appendTo';
-import 'mdui.jq/es/methods/find';
-import 'mdui.jq/es/methods/hasClass';
-import 'mdui.jq/es/methods/off';
-import 'mdui.jq/es/methods/on';
-import 'mdui.jq/es/methods/parents';
-import 'mdui.jq/es/methods/remove';
-import { isString } from 'mdui.jq/es/utils';
-import mdui from '../../mdui';
-import '../../jq_extends/methods/reflow';
-import '../../jq_extends/methods/transform';
-import '../../jq_extends/methods/transitionEnd';
-import { $document } from '../../utils/dom';
-import { dequeue, queue } from '../../utils/queue';
-import { startEvent } from '../../utils/touchHandler';
-const DEFAULT_OPTIONS = {
-    message: '',
-    timeout: 4000,
-    position: 'bottom',
-    buttonText: '',
-    buttonColor: '',
-    closeOnButtonClick: true,
-    closeOnOutsideClick: true,
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
-    onClick: () => { },
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
-    onButtonClick: () => { },
-    // 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: () => { },
-};
-/**
- * 当前打开着的 Snackbar
- */
-let currentInst = null;
-/**
- * 队列名
- */
-const queueName = '_mdui_snackbar';
-class Snackbar {
-    constructor(options) {
-        /**
-         * 配置参数
-         */
-        this.options = extend({}, DEFAULT_OPTIONS);
-        /**
-         * 当前 Snackbar 的状态
-         */
-        this.state = 'closed';
-        /**
-         * setTimeout 的 ID
-         */
-        this.timeoutId = null;
-        extend(this.options, options);
-        // 按钮颜色
-        let buttonColorStyle = '';
-        let buttonColorClass = '';
-        if (this.options.buttonColor.indexOf('#') === 0 ||
-            this.options.buttonColor.indexOf('rgb') === 0) {
-            buttonColorStyle = `style="color:${this.options.buttonColor}"`;
-        }
-        else if (this.options.buttonColor !== '') {
-            buttonColorClass = `mdui-text-color-${this.options.buttonColor}`;
-        }
-        // 添加 HTML
-        this.$element = $('<div class="mdui-snackbar">' +
-            `<div class="mdui-snackbar-text">${this.options.message}</div>` +
-            (this.options.buttonText
-                ? `<a href="javascript:void(0)" class="mdui-snackbar-action mdui-btn mdui-ripple mdui-ripple-white ${buttonColorClass}" ${buttonColorStyle}>${this.options.buttonText}</a>`
-                : '') +
-            '</div>').appendTo(document.body);
-        // 设置位置
-        this.setPosition('close');
-        this.$element.reflow().addClass(`mdui-snackbar-${this.options.position}`);
-    }
-    /**
-     * 点击 Snackbar 外面的区域关闭
-     * @param event
-     */
-    closeOnOutsideClick(event) {
-        const $target = $(event.target);
-        if (!$target.hasClass('mdui-snackbar') &&
-            !$target.parents('.mdui-snackbar').length) {
-            currentInst.close();
-        }
-    }
-    /**
-     * 设置 Snackbar 的位置
-     * @param state
-     */
-    setPosition(state) {
-        const snackbarHeight = this.$element[0].clientHeight;
-        const position = this.options.position;
-        let translateX;
-        let translateY;
-        // translateX
-        if (position === 'bottom' || position === 'top') {
-            translateX = '-50%';
-        }
-        else {
-            translateX = '0';
-        }
-        // translateY
-        if (state === 'open') {
-            translateY = '0';
-        }
-        else {
-            if (position === 'bottom') {
-                translateY = snackbarHeight;
-            }
-            if (position === 'top') {
-                translateY = -snackbarHeight;
-            }
-            if (position === 'left-top' || position === 'right-top') {
-                translateY = -snackbarHeight - 24;
-            }
-            if (position === 'left-bottom' || position === 'right-bottom') {
-                translateY = snackbarHeight + 24;
-            }
-        }
-        this.$element.transform(`translate(${translateX},${translateY}px`);
-    }
-    /**
-     * 打开 Snackbar
-     */
-    open() {
-        if (this.state === 'opening' || this.state === 'opened') {
-            return;
-        }
-        // 如果当前有正在显示的 Snackbar，则先加入队列，等旧 Snackbar 关闭后再打开
-        if (currentInst) {
-            queue(queueName, () => this.open());
-            return;
-        }
-        currentInst = this;
-        // 开始打开
-        this.state = 'opening';
-        this.options.onOpen(this);
-        this.setPosition('open');
-        this.$element.transitionEnd(() => {
-            if (this.state !== 'opening') {
-                return;
-            }
-            this.state = 'opened';
-            this.options.onOpened(this);
-            // 有按钮时绑定事件
-            if (this.options.buttonText) {
-                this.$element.find('.mdui-snackbar-action').on('click', () => {
-                    this.options.onButtonClick(this);
-                    if (this.options.closeOnButtonClick) {
-                        this.close();
-                    }
-                });
-            }
-            // 点击 snackbar 的事件
-            this.$element.on('click', (event) => {
-                if (!$(event.target).hasClass('mdui-snackbar-action')) {
-                    this.options.onClick(this);
-                }
-            });
-            // 点击 Snackbar 外面的区域关闭
-            if (this.options.closeOnOutsideClick) {
-                $document.on(startEvent, this.closeOnOutsideClick);
-            }
-            // 超时后自动关闭
-            if (this.options.timeout) {
-                this.timeoutId = setTimeout(() => this.close(), this.options.timeout);
-            }
-        });
-    }
-    /**
-     * 关闭 Snackbar
-     */
-    close() {
-        if (this.state === 'closing' || this.state === 'closed') {
-            return;
-        }
-        if (this.timeoutId) {
-            clearTimeout(this.timeoutId);
-        }
-        if (this.options.closeOnOutsideClick) {
-            $document.off(startEvent, this.closeOnOutsideClick);
-        }
-        this.state = 'closing';
-        this.options.onClose(this);
-        this.setPosition('close');
-        this.$element.transitionEnd(() => {
-            if (this.state !== 'closing') {
-                return;
-            }
-            currentInst = null;
-            this.state = 'closed';
-            this.options.onClosed(this);
-            this.$element.remove();
-            dequeue(queueName);
-        });
-    }
-}
-mdui.snackbar = function (message, options = {}) {
-    if (isString(message)) {
-        options.message = message;
-    }
-    else {
-        options = message;
-    }
-    const instance = new Snackbar(options);
-    instance.open();
-    return instance;
-};

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

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

package/es/components/tab/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-tab';
-$(() => {
-    mdui.mutation(`[${customAttr}]`, function () {
-        new mdui.Tab(this, parseOptions(this, customAttr));
-    });
-});

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

@@ -1,114 +0,0 @@
-import { JQ } from 'mdui.jq/es/JQ';
-import 'mdui.jq/es/methods/addClass';
-import 'mdui.jq/es/methods/appendTo';
-import 'mdui.jq/es/methods/attr';
-import 'mdui.jq/es/methods/children';
-import 'mdui.jq/es/methods/css';
-import 'mdui.jq/es/methods/each';
-import 'mdui.jq/es/methods/eq';
-import 'mdui.jq/es/methods/first';
-import 'mdui.jq/es/methods/get';
-import 'mdui.jq/es/methods/hasClass';
-import 'mdui.jq/es/methods/hide';
-import 'mdui.jq/es/methods/index';
-import 'mdui.jq/es/methods/innerWidth';
-import 'mdui.jq/es/methods/offset';
-import 'mdui.jq/es/methods/on';
-import 'mdui.jq/es/methods/removeClass';
-import 'mdui.jq/es/methods/show';
-import Selector from 'mdui.jq/es/types/Selector';
-import '../../jq_extends/static/throttle';
-declare module '../../interfaces/MduiStatic' {
-    interface MduiStatic {
-        /**
-         * Tab 选项卡组件
-         *
-         * 请通过 `new mdui.Tab()` 调用
-         */
-        Tab: {
-            /**
-             * 实例化 Tab 组件
-             * @param selector CSS 选择器、或 DOM 元素、或 JQ 对象
-             * @param options 配置参数
-             */
-            new (selector: Selector | HTMLElement | ArrayLike<HTMLElement>, options?: OPTIONS): Tab;
-        };
-    }
-}
-declare type OPTIONS = {
-    /**
-     * 切换选项卡的触发方式。`click`: 点击切换；`hover`: 鼠标悬浮切换
-     */
-    trigger?: 'click' | 'hover';
-    /**
-     * 是否启用循环切换，若为 `true`，则最后一个选项激活时调用 `next` 方法将回到第一个选项，第一个选项激活时调用 `prev` 方法将回到最后一个选项。
-     */
-    loop?: boolean;
-};
-declare class Tab {
-    /**
-     * tab 元素的 JQ 对象
-     */
-    $element: JQ;
-    /**
-     * 配置参数
-     */
-    options: OPTIONS;
-    /**
-     * 当前激活的 tab 的索引号。为 -1 时表示没有激活的选项卡，或不存在选项卡
-     */
-    activeIndex: number;
-    /**
-     * 选项数组 JQ 对象
-     */
-    private $tabs;
-    /**
-     * 激活状态的 tab 底部的指示符
-     */
-    private $indicator;
-    constructor(selector: Selector | HTMLElement | ArrayLike<HTMLElement>, options?: OPTIONS);
-    /**
-     * 指定选项卡是否已禁用
-     * @param $tab
-     */
-    private isDisabled;
-    /**
-     * 绑定在 Tab 上点击或悬浮的事件
-     * @param tab
-     */
-    private bindTabEvent;
-    /**
-     * 触发组件事件
-     * @param name
-     * @param $element
-     * @param parameters
-     */
-    private triggerEvent;
-    /**
-     * 设置激活状态的选项卡
-     */
-    private setActive;
-    /**
-     * 设置选项卡指示器的位置
-     */
-    private setIndicatorPosition;
-    /**
-     * 切换到下一个选项卡
-     */
-    next(): void;
-    /**
-     * 切换到上一个选项卡
-     */
-    prev(): void;
-    /**
-     * 显示指定索引号、或指定id的选项卡
-     * @param index 索引号、或id
-     */
-    show(index: number | string): void;
-    /**
-     * 在父元素的宽度变化时，需要调用该方法重新调整指示器位置
-     * 在添加或删除选项卡时，需要调用该方法
-     */
-    handleUpdate(): void;
-}
-export {};

package/es/components/tab/index.js

@@ -1,266 +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/appendTo';
-import 'mdui.jq/es/methods/attr';
-import 'mdui.jq/es/methods/children';
-import 'mdui.jq/es/methods/css';
-import 'mdui.jq/es/methods/each';
-import 'mdui.jq/es/methods/eq';
-import 'mdui.jq/es/methods/first';
-import 'mdui.jq/es/methods/get';
-import 'mdui.jq/es/methods/hasClass';
-import 'mdui.jq/es/methods/hide';
-import 'mdui.jq/es/methods/index';
-import 'mdui.jq/es/methods/innerWidth';
-import 'mdui.jq/es/methods/offset';
-import 'mdui.jq/es/methods/on';
-import 'mdui.jq/es/methods/removeClass';
-import 'mdui.jq/es/methods/show';
-import { isNumber } from 'mdui.jq/es/utils';
-import mdui from '../../mdui';
-import '../../jq_extends/static/throttle';
-import { componentEvent } from '../../utils/componentEvent';
-import { $window } from '../../utils/dom';
-const DEFAULT_OPTIONS = {
-    trigger: 'click',
-    loop: false,
-};
-class Tab {
-    constructor(selector, options = {}) {
-        /**
-         * 配置参数
-         */
-        this.options = extend({}, DEFAULT_OPTIONS);
-        /**
-         * 当前激活的 tab 的索引号。为 -1 时表示没有激活的选项卡，或不存在选项卡
-         */
-        this.activeIndex = -1;
-        this.$element = $(selector).first();
-        extend(this.options, options);
-        this.$tabs = this.$element.children('a');
-        this.$indicator = $('<div class="mdui-tab-indicator"></div>').appendTo(this.$element);
-        // 根据 url hash 获取默认激活的选项卡
-        const hash = window.location.hash;
-        if (hash) {
-            this.$tabs.each((index, tab) => {
-                if ($(tab).attr('href') === hash) {
-                    this.activeIndex = index;
-                    return false;
-                }
-                return true;
-            });
-        }
-        // 含 .mdui-tab-active 的元素默认激活
-        if (this.activeIndex === -1) {
-            this.$tabs.each((index, tab) => {
-                if ($(tab).hasClass('mdui-tab-active')) {
-                    this.activeIndex = index;
-                    return false;
-                }
-                return true;
-            });
-        }
-        // 存在选项卡时，默认激活第一个选项卡
-        if (this.$tabs.length && this.activeIndex === -1) {
-            this.activeIndex = 0;
-        }
-        // 设置激活状态选项卡
-        this.setActive();
-        // 监听窗口大小变化事件，调整指示器位置
-        $window.on('resize', $.throttle(() => this.setIndicatorPosition(), 100));
-        // 监听点击选项卡事件
-        this.$tabs.each((_, tab) => {
-            this.bindTabEvent(tab);
-        });
-    }
-    /**
-     * 指定选项卡是否已禁用
-     * @param $tab
-     */
-    isDisabled($tab) {
-        return $tab.attr('disabled') !== undefined;
-    }
-    /**
-     * 绑定在 Tab 上点击或悬浮的事件
-     * @param tab
-     */
-    bindTabEvent(tab) {
-        const $tab = $(tab);
-        // 点击或鼠标移入触发的事件
-        const clickEvent = () => {
-            // 禁用状态的选项卡无法选中
-            if (this.isDisabled($tab)) {
-                return false;
-            }
-            this.activeIndex = this.$tabs.index(tab);
-            this.setActive();
-        };
-        // 无论 trigger 是 click 还是 hover，都会响应 click 事件
-        $tab.on('click', clickEvent);
-        // trigger 为 hover 时，额外响应 mouseenter 事件
-        if (this.options.trigger === 'hover') {
-            $tab.on('mouseenter', clickEvent);
-        }
-        // 阻止链接的默认点击动作
-        $tab.on('click', () => {
-            if (($tab.attr('href') || '').indexOf('#') === 0) {
-                return false;
-            }
-        });
-    }
-    /**
-     * 触发组件事件
-     * @param name
-     * @param $element
-     * @param parameters
-     */
-    triggerEvent(name, $element, parameters = {}) {
-        componentEvent(name, 'tab', $element, this, parameters);
-    }
-    /**
-     * 设置激活状态的选项卡
-     */
-    setActive() {
-        this.$tabs.each((index, tab) => {
-            const $tab = $(tab);
-            const targetId = $tab.attr('href') || '';
-            // 设置选项卡激活状态
-            if (index === this.activeIndex && !this.isDisabled($tab)) {
-                if (!$tab.hasClass('mdui-tab-active')) {
-                    this.triggerEvent('change', this.$element, {
-                        index: this.activeIndex,
-                        id: targetId.substr(1),
-                    });
-                    this.triggerEvent('show', $tab);
-                    $tab.addClass('mdui-tab-active');
-                }
-                $(targetId).show();
-                this.setIndicatorPosition();
-            }
-            else {
-                $tab.removeClass('mdui-tab-active');
-                $(targetId).hide();
-            }
-        });
-    }
-    /**
-     * 设置选项卡指示器的位置
-     */
-    setIndicatorPosition() {
-        // 选项卡数量为 0 时，不显示指示器
-        if (this.activeIndex === -1) {
-            this.$indicator.css({
-                left: 0,
-                width: 0,
-            });
-            return;
-        }
-        const $activeTab = this.$tabs.eq(this.activeIndex);
-        if (this.isDisabled($activeTab)) {
-            return;
-        }
-        const activeTabOffset = $activeTab.offset();
-        this.$indicator.css({
-            left: `${activeTabOffset.left +
-                this.$element[0].scrollLeft -
-                this.$element[0].getBoundingClientRect().left}px`,
-            width: `${$activeTab.innerWidth()}px`,
-        });
-    }
-    /**
-     * 切换到下一个选项卡
-     */
-    next() {
-        if (this.activeIndex === -1) {
-            return;
-        }
-        if (this.$tabs.length > this.activeIndex + 1) {
-            this.activeIndex++;
-        }
-        else if (this.options.loop) {
-            this.activeIndex = 0;
-        }
-        this.setActive();
-    }
-    /**
-     * 切换到上一个选项卡
-     */
-    prev() {
-        if (this.activeIndex === -1) {
-            return;
-        }
-        if (this.activeIndex > 0) {
-            this.activeIndex--;
-        }
-        else if (this.options.loop) {
-            this.activeIndex = this.$tabs.length - 1;
-        }
-        this.setActive();
-    }
-    /**
-     * 显示指定索引号、或指定id的选项卡
-     * @param index 索引号、或id
-     */
-    show(index) {
-        if (this.activeIndex === -1) {
-            return;
-        }
-        if (isNumber(index)) {
-            this.activeIndex = index;
-        }
-        else {
-            this.$tabs.each((i, tab) => {
-                if (tab.id === index) {
-                    this.activeIndex = i;
-                    return false;
-                }
-            });
-        }
-        this.setActive();
-    }
-    /**
-     * 在父元素的宽度变化时，需要调用该方法重新调整指示器位置
-     * 在添加或删除选项卡时，需要调用该方法
-     */
-    handleUpdate() {
-        const $oldTabs = this.$tabs; // 旧的 tabs JQ对象
-        const $newTabs = this.$element.children('a'); // 新的 tabs JQ对象
-        const oldTabsElement = $oldTabs.get(); // 旧的 tabs 元素数组
-        const newTabsElement = $newTabs.get(); // 新的 tabs 元素数组
-        if (!$newTabs.length) {
-            this.activeIndex = -1;
-            this.$tabs = $newTabs;
-            this.setIndicatorPosition();
-            return;
-        }
-        // 重新遍历选项卡，找出新增的选项卡
-        $newTabs.each((index, tab) => {
-            // 有新增的选项卡
-            if (oldTabsElement.indexOf(tab) < 0) {
-                this.bindTabEvent(tab);
-                if (this.activeIndex === -1) {
-                    this.activeIndex = 0;
-                }
-                else if (index <= this.activeIndex) {
-                    this.activeIndex++;
-                }
-            }
-        });
-        // 找出被移除的选项卡
-        $oldTabs.each((index, tab) => {
-            // 有被移除的选项卡
-            if (newTabsElement.indexOf(tab) < 0) {
-                if (index < this.activeIndex) {
-                    this.activeIndex--;
-                }
-                else if (index === this.activeIndex) {
-                    this.activeIndex = 0;
-                }
-            }
-        });
-        this.$tabs = $newTabs;
-        this.setActive();
-    }
-}
-mdui.Tab = Tab;

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

@@ -1,25 +0,0 @@
-import 'mdui.jq/es/methods/add';
-import 'mdui.jq/es/methods/addClass';
-import 'mdui.jq/es/methods/data';
-import 'mdui.jq/es/methods/each';
-import 'mdui.jq/es/methods/eq';
-import 'mdui.jq/es/methods/find';
-import 'mdui.jq/es/methods/first';
-import 'mdui.jq/es/methods/hasClass';
-import 'mdui.jq/es/methods/on';
-import 'mdui.jq/es/methods/prependTo';
-import 'mdui.jq/es/methods/remove';
-import 'mdui.jq/es/methods/removeClass';
-import Selector from 'mdui.jq/es/types/Selector';
-import '../../global/mutation';
-declare module '../../interfaces/MduiStatic' {
-    interface MduiStatic {
-        /**
-         * 动态修改了表格后，需要调用该方法重新初始化表格。
-         *
-         * 若传入了参数，则只初始化该参数对应的表格。若没有传入参数，则重新初始化所有表格。
-         * @param selector CSS 选择器、或 DOM 元素、或 DOM 元素组成的数组、或 JQ 对象
-         */
-        updateTables(selector?: Selector | HTMLElement | ArrayLike<HTMLElement>): void;
-    }
-}