mdui 1.0.2 → 2.0.0

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

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

package/es/components/appbar/index.js

@@ -1,17 +0,0 @@
-import $ from 'mdui.jq/es/$';
-import mdui from '../../mdui';
-import '../../global/mutation';
-import '../headroom';
-$(() => {
-    // 滚动时隐藏应用栏
-    mdui.mutation('.mdui-appbar-scroll-hide', function () {
-        new mdui.Headroom(this);
-    });
-    // 滚动时只隐藏应用栏中的工具栏
-    mdui.mutation('.mdui-appbar-scroll-toolbar-hide', function () {
-        new mdui.Headroom(this, {
-            pinnedClass: 'mdui-headroom-pinned-toolbar',
-            unpinnedClass: 'mdui-headroom-unpinned-toolbar',
-        });
-    });
-});

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

@@ -1,9 +0,0 @@
-import 'mdui.jq/es/methods/addClass';
-import 'mdui.jq/es/methods/children';
-import 'mdui.jq/es/methods/each';
-import 'mdui.jq/es/methods/is';
-import 'mdui.jq/es/methods/on';
-import 'mdui.jq/es/methods/parent';
-import 'mdui.jq/es/methods/removeClass';
-import '../../global/mutation';
-import '../headroom';

package/es/components/bottom_nav/index.js

@@ -1,38 +0,0 @@
-import $ from 'mdui.jq/es/$';
-import 'mdui.jq/es/methods/addClass';
-import 'mdui.jq/es/methods/children';
-import 'mdui.jq/es/methods/each';
-import 'mdui.jq/es/methods/is';
-import 'mdui.jq/es/methods/on';
-import 'mdui.jq/es/methods/parent';
-import 'mdui.jq/es/methods/removeClass';
-import mdui from '../../mdui';
-import '../../global/mutation';
-import { componentEvent } from '../../utils/componentEvent';
-import { $document } from '../../utils/dom';
-import '../headroom';
-$(() => {
-    // 切换导航项
-    $document.on('click', '.mdui-bottom-nav>a', function () {
-        const $item = $(this);
-        const $bottomNav = $item.parent();
-        $bottomNav.children('a').each((index, item) => {
-            const isThis = $item.is(item);
-            if (isThis) {
-                componentEvent('change', 'bottomNav', $bottomNav[0], undefined, {
-                    index,
-                });
-            }
-            isThis
-                ? $(item).addClass('mdui-bottom-nav-active')
-                : $(item).removeClass('mdui-bottom-nav-active');
-        });
-    });
-    // 滚动时隐藏 mdui-bottom-nav-scroll-hide
-    mdui.mutation('.mdui-bottom-nav-scroll-hide', function () {
-        new mdui.Headroom(this, {
-            pinnedClass: 'mdui-headroom-pinned-down',
-            unpinnedClass: 'mdui-headroom-unpinned-down',
-        });
-    });
-});

package/es/components/collapse/collapseAbstract.d.ts

@@ -1,110 +0,0 @@
-import { JQ } from 'mdui.jq/es/JQ';
-import 'mdui.jq/es/methods/addClass';
-import 'mdui.jq/es/methods/children';
-import 'mdui.jq/es/methods/each';
-import 'mdui.jq/es/methods/eq';
-import 'mdui.jq/es/methods/first';
-import 'mdui.jq/es/methods/hasClass';
-import 'mdui.jq/es/methods/height';
-import 'mdui.jq/es/methods/is';
-import 'mdui.jq/es/methods/on';
-import 'mdui.jq/es/methods/parent';
-import 'mdui.jq/es/methods/parents';
-import 'mdui.jq/es/methods/removeClass';
-import Selector from 'mdui.jq/es/types/Selector';
-import '../../jq_extends/methods/reflow';
-import '../../jq_extends/methods/transition';
-import '../../jq_extends/methods/transitionEnd';
-declare type OPTIONS = {
-    /**
-     * 是否启用手风琴效果
-     * 为 `true` 时，最多只能有一个面板项处于打开状态，打开一个面板项时会关闭其他面板项
-     * 为 `false` 时，可同时打开多个面板项
-     */
-    accordion?: boolean;
-};
-declare abstract class CollapseAbstract {
-    /**
-     * collapse 元素的 JQ 对象
-     */
-    $element: JQ;
-    /**
-     * 配置参数
-     */
-    options: OPTIONS;
-    /**
-     * item 的 class 名
-     */
-    private classItem;
-    /**
-     * 打开状态的 item 的 class 名
-     */
-    private classItemOpen;
-    /**
-     * item-header 的 class 名
-     */
-    private classHeader;
-    /**
-     * item-body 的 class 名
-     */
-    private classBody;
-    /**
-     * 获取继承的组件名称
-     */
-    protected abstract getNamespace(): string;
-    constructor(selector: Selector | HTMLElement | ArrayLike<HTMLElement>, options?: OPTIONS);
-    /**
-     * 绑定事件
-     */
-    private bindEvent;
-    /**
-     * 指定 item 是否处于打开状态
-     * @param $item
-     */
-    private isOpen;
-    /**
-     * 获取所有 item
-     */
-    private getItems;
-    /**
-     * 获取指定 item
-     * @param item
-     */
-    private getItem;
-    /**
-     * 触发组件事件
-     * @param name 事件名
-     * @param $item 事件触发的目标 item
-     */
-    private triggerEvent;
-    /**
-     * 动画结束回调
-     * @param $content body 元素
-     * @param $item item 元素
-     */
-    private transitionEnd;
-    /**
-     * 打开指定面板项
-     * @param item 面板项的索引号、或 CSS 选择器、或 DOM 元素、或 JQ 对象
-     */
-    open(item: number | Selector | HTMLElement | ArrayLike<HTMLElement>): void;
-    /**
-     * 关闭指定面板项
-     * @param item 面板项的索引号、或 CSS 选择器、或 DOM 元素、或 JQ 对象
-     */
-    close(item: number | Selector | HTMLElement | ArrayLike<HTMLElement>): void;
-    /**
-     * 切换指定面板项的打开状态
-     * @param item 面板项的索引号、或 CSS 选择器、或 DOM 元素、或 JQ 对象
-     */
-    toggle(item: number | Selector | HTMLElement | ArrayLike<HTMLElement>): void;
-    /**
-     * 打开所有面板项
-     */
-    openAll(): void;
-    /**
-     * 关闭所有面板项
-     */
-    closeAll(): void;
-}
-export { OPTIONS, CollapseAbstract };

package/es/components/collapse/collapseAbstract.js

@@ -1,175 +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/children';
-import 'mdui.jq/es/methods/each';
-import 'mdui.jq/es/methods/eq';
-import 'mdui.jq/es/methods/first';
-import 'mdui.jq/es/methods/hasClass';
-import 'mdui.jq/es/methods/height';
-import 'mdui.jq/es/methods/is';
-import 'mdui.jq/es/methods/on';
-import 'mdui.jq/es/methods/parent';
-import 'mdui.jq/es/methods/parents';
-import 'mdui.jq/es/methods/removeClass';
-import { isNumber } from 'mdui.jq/es/utils';
-import '../../jq_extends/methods/reflow';
-import '../../jq_extends/methods/transition';
-import '../../jq_extends/methods/transitionEnd';
-import { componentEvent } from '../../utils/componentEvent';
-const DEFAULT_OPTIONS = {
-    accordion: false,
-};
-class CollapseAbstract {
-    constructor(selector, options = {}) {
-        /**
-         * 配置参数
-         */
-        this.options = extend({}, DEFAULT_OPTIONS);
-        // CSS 类名
-        const classPrefix = `mdui-${this.getNamespace()}-item`;
-        this.classItem = classPrefix;
-        this.classItemOpen = `${classPrefix}-open`;
-        this.classHeader = `${classPrefix}-header`;
-        this.classBody = `${classPrefix}-body`;
-        this.$element = $(selector).first();
-        extend(this.options, options);
-        this.bindEvent();
-    }
-    /**
-     * 绑定事件
-     */
-    bindEvent() {
-        // eslint-disable-next-line @typescript-eslint/no-this-alias
-        const that = this;
-        // 点击 header 时，打开/关闭 item
-        this.$element.on('click', `.${this.classHeader}`, function () {
-            const $header = $(this);
-            const $item = $header.parent();
-            const $items = that.getItems();
-            $items.each((_, item) => {
-                if ($item.is(item)) {
-                    that.toggle(item);
-                }
-            });
-        });
-        // 点击关闭按钮时，关闭 item
-        this.$element.on('click', `[mdui-${this.getNamespace()}-item-close]`, function () {
-            const $target = $(this);
-            const $item = $target.parents(`.${that.classItem}`).first();
-            that.close($item);
-        });
-    }
-    /**
-     * 指定 item 是否处于打开状态
-     * @param $item
-     */
-    isOpen($item) {
-        return $item.hasClass(this.classItemOpen);
-    }
-    /**
-     * 获取所有 item
-     */
-    getItems() {
-        return this.$element.children(`.${this.classItem}`);
-    }
-    /**
-     * 获取指定 item
-     * @param item
-     */
-    getItem(item) {
-        if (isNumber(item)) {
-            return this.getItems().eq(item);
-        }
-        return $(item).first();
-    }
-    /**
-     * 触发组件事件
-     * @param name 事件名
-     * @param $item 事件触发的目标 item
-     */
-    triggerEvent(name, $item) {
-        componentEvent(name, this.getNamespace(), $item, this);
-    }
-    /**
-     * 动画结束回调
-     * @param $content body 元素
-     * @param $item item 元素
-     */
-    transitionEnd($content, $item) {
-        if (this.isOpen($item)) {
-            $content.transition(0).height('auto').reflow().transition('');
-            this.triggerEvent('opened', $item);
-        }
-        else {
-            $content.height('');
-            this.triggerEvent('closed', $item);
-        }
-    }
-    /**
-     * 打开指定面板项
-     * @param item 面板项的索引号、或 CSS 选择器、或 DOM 元素、或 JQ 对象
-     */
-    open(item) {
-        const $item = this.getItem(item);
-        if (this.isOpen($item)) {
-            return;
-        }
-        // 关闭其他项
-        if (this.options.accordion) {
-            this.$element.children(`.${this.classItemOpen}`).each((_, element) => {
-                const $element = $(element);
-                if (!$element.is($item)) {
-                    this.close($element);
-                }
-            });
-        }
-        const $content = $item.children(`.${this.classBody}`);
-        $content
-            .height($content[0].scrollHeight)
-            .transitionEnd(() => this.transitionEnd($content, $item));
-        this.triggerEvent('open', $item);
-        $item.addClass(this.classItemOpen);
-    }
-    /**
-     * 关闭指定面板项
-     * @param item 面板项的索引号、或 CSS 选择器、或 DOM 元素、或 JQ 对象
-     */
-    close(item) {
-        const $item = this.getItem(item);
-        if (!this.isOpen($item)) {
-            return;
-        }
-        const $content = $item.children(`.${this.classBody}`);
-        this.triggerEvent('close', $item);
-        $item.removeClass(this.classItemOpen);
-        $content
-            .transition(0)
-            .height($content[0].scrollHeight)
-            .reflow()
-            .transition('')
-            .height('')
-            .transitionEnd(() => this.transitionEnd($content, $item));
-    }
-    /**
-     * 切换指定面板项的打开状态
-     * @param item 面板项的索引号、或 CSS 选择器、或 DOM 元素、或 JQ 对象
-     */
-    toggle(item) {
-        const $item = this.getItem(item);
-        this.isOpen($item) ? this.close($item) : this.open($item);
-    }
-    /**
-     * 打开所有面板项
-     */
-    openAll() {
-        this.getItems().each((_, element) => this.open(element));
-    }
-    /**
-     * 关闭所有面板项
-     */
-    closeAll() {
-        this.getItems().each((_, element) => this.close(element));
-    }
-}
-export { CollapseAbstract };

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

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

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

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

@@ -1,23 +0,0 @@
-import Selector from 'mdui.jq/es/types/Selector';
-import { CollapseAbstract, OPTIONS } from './collapseAbstract';
-declare module '../../interfaces/MduiStatic' {
-    interface MduiStatic {
-        /**
-         * 折叠内容块组件
-         *
-         * 请通过 `new mdui.Collapse()` 调用
-         */
-        Collapse: {
-            /**
-             * 实例化 Collapse 组件
-             * @param selector CSS 选择器或 DOM 元素
-             * @param options 配置参数
-             */
-            new (selector: Selector | HTMLElement | ArrayLike<HTMLElement>, options?: OPTIONS): Collapse;
-        };
-    }
-}
-declare class Collapse extends CollapseAbstract {
-    protected getNamespace(): string;
-}
-export {};

package/es/components/collapse/index.js

@@ -1,8 +0,0 @@
-import mdui from '../../mdui';
-import { CollapseAbstract } from './collapseAbstract';
-class Collapse extends CollapseAbstract {
-    getNamespace() {
-        return 'collapse';
-    }
-}
-mdui.Collapse = Collapse;

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

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

package/es/components/dialog/alert.js

@@ -1,42 +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',
-    history: true,
-    modal: false,
-    closeOnEsc: true,
-    closeOnConfirm: true,
-};
-mdui.alert = function (text, title, onConfirm, options) {
-    if (isFunction(title)) {
-        options = onConfirm;
-        onConfirm = title;
-        title = '';
-    }
-    if (isUndefined(onConfirm)) {
-        // eslint-disable-next-line @typescript-eslint/no-empty-function
-        onConfirm = () => { };
-    }
-    if (isUndefined(options)) {
-        options = {};
-    }
-    options = extend({}, DEFAULT_OPTIONS, options);
-    return mdui.dialog({
-        title: title,
-        content: text,
-        buttons: [
-            {
-                text: options.confirmText,
-                bold: false,
-                close: options.closeOnConfirm,
-                onClick: onConfirm,
-            },
-        ],
-        cssClass: 'mdui-dialog-alert',
-        history: options.history,
-        modal: options.modal,
-        closeOnEsc: options.closeOnEsc,
-    });
-};

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

@@ -1,133 +0,0 @@
-import { JQ } from 'mdui.jq/es/JQ';
-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 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 type OPTIONS = {
-    /**
-     * 打开对话框时是否添加 url hash，若为 `true`，则打开对话框后可用过浏览器的后退按钮或 Android 的返回键关闭对话框。
-     */
-    history?: boolean;
-    /**
-     * 打开对话框时是否显示遮罩。
-     */
-    overlay?: boolean;
-    /**
-     * 是否模态化对话框。为 `false` 时点击对话框外面的区域时关闭对话框，否则不关闭。
-     */
-    modal?: boolean;
-    /**
-     * 按下 Esc 键时是否关闭对话框。
-     */
-    closeOnEsc?: boolean;
-    /**
-     * 按下取消按钮时是否关闭对话框。
-     */
-    closeOnCancel?: boolean;
-    /**
-     * 按下确认按钮时是否关闭对话框。
-     */
-    closeOnConfirm?: boolean;
-    /**
-     * 关闭对话框后是否自动销毁对话框。
-     */
-    destroyOnClosed?: boolean;
-};
-declare type STATE = 'opening' | 'opened' | 'closing' | 'closed';
-/**
- * 当前显示的对话框实例
- */
-declare let currentInst: null | Dialog;
-declare class Dialog {
-    /**
-     * dialog 元素的 JQ 对象
-     */
-    $element: JQ;
-    /**
-     * 配置参数
-     */
-    options: OPTIONS;
-    /**
-     * 当前 dialog 的状态
-     */
-    state: STATE;
-    /**
-     * dialog 元素是否是动态添加的
-     */
-    private append;
-    constructor(selector: Selector | HTMLElement | ArrayLike<HTMLElement>, options?: OPTIONS);
-    /**
-     * 触发组件事件
-     * @param name
-     */
-    private triggerEvent;
-    /**
-     * 窗口宽度变化，或对话框内容变化时，调整对话框位置和对话框内的滚动条
-     */
-    private readjust;
-    /**
-     * hashchange 事件触发时关闭对话框
-     */
-    private hashchangeEvent;
-    /**
-     * 点击遮罩层关闭对话框
-     * @param event
-     */
-    private overlayClick;
-    /**
-     * 动画结束回调
-     */
-    private transitionEnd;
-    /**
-     * 打开指定对话框
-     */
-    private doOpen;
-    /**
-     * 当前对话框是否为打开状态
-     */
-    private isOpen;
-    /**
-     * 打开对话框
-     */
-    open(): void;
-    /**
-     * 关闭对话框
-     */
-    close(historyBack?: boolean): void;
-    /**
-     * 切换对话框打开/关闭状态
-     */
-    toggle(): void;
-    /**
-     * 获取对话框状态。共包含四种状态：`opening`、`opened`、`closing`、`closed`
-     */
-    getState(): STATE;
-    /**
-     * 销毁对话框
-     */
-    destroy(): void;
-    /**
-     * 对话框内容变化时，需要调用该方法来调整对话框位置和滚动条高度
-     */
-    handleUpdate(): void;
-}
-export { currentInst, OPTIONS, Dialog };