mdui 1.0.2 → 2.0.0

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

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

package/es/components/panel/index.js

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

package/es/components/progress/spinner.d.ts

@@ -1,16 +0,0 @@
-import 'mdui.jq/es/methods/each';
-import 'mdui.jq/es/methods/hasClass';
-import 'mdui.jq/es/methods/html';
-import Selector from 'mdui.jq/es/types/Selector';
-import '../../global/mutation';
-declare module '../../interfaces/MduiStatic' {
-    interface MduiStatic {
-        /**
-         * 如果需要修改已有的圆形进度条组件，需要调用该方法来重新初始化组件。
-         *
-         * 若传入了参数，则只重新初始化该参数对应的圆形进度条。若没有传入参数，则重新初始化所有圆形进度条。
-         * @param selector CSS 选择器、或 DOM 元素、或 DOM 元素组成的数组、或 JQ 对象
-         */
-        updateSpinners(selector?: Selector | HTMLElement | ArrayLike<HTMLElement>): void;
-    }
-}

package/es/components/progress/spinner.js

@@ -1,47 +0,0 @@
-import $ from 'mdui.jq/es/$';
-import 'mdui.jq/es/methods/each';
-import 'mdui.jq/es/methods/hasClass';
-import 'mdui.jq/es/methods/html';
-import { isUndefined } from 'mdui.jq/es/utils';
-import mdui from '../../mdui';
-import '../../global/mutation';
-/**
- * layer 的 HTML 结构
- * @param index
- */
-function layerHTML(index = false) {
-    return (`<div class="mdui-spinner-layer ${index ? `mdui-spinner-layer-${index}` : ''}">` +
-        '<div class="mdui-spinner-circle-clipper mdui-spinner-left">' +
-        '<div class="mdui-spinner-circle"></div>' +
-        '</div>' +
-        '<div class="mdui-spinner-gap-patch">' +
-        '<div class="mdui-spinner-circle"></div>' +
-        '</div>' +
-        '<div class="mdui-spinner-circle-clipper mdui-spinner-right">' +
-        '<div class="mdui-spinner-circle"></div>' +
-        '</div>' +
-        '</div>');
-}
-/**
- * 填充 HTML
- * @param spinner
- */
-function fillHTML(spinner) {
-    const $spinner = $(spinner);
-    const layer = $spinner.hasClass('mdui-spinner-colorful')
-        ? layerHTML(1) + layerHTML(2) + layerHTML(3) + layerHTML(4)
-        : layerHTML();
-    $spinner.html(layer);
-}
-$(() => {
-    // 页面加载完后自动填充 HTML 结构
-    mdui.mutation('.mdui-spinner', function () {
-        fillHTML(this);
-    });
-});
-mdui.updateSpinners = function (selector) {
-    const $elements = isUndefined(selector) ? $('.mdui-spinner') : $(selector);
-    $elements.each(function () {
-        fillHTML(this);
-    });
-};

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

@@ -1,25 +0,0 @@
-/**
- * Inspired by https://github.com/nolimits4web/Framework7/blob/master/src/js/fast-clicks.js
- * https://github.com/nolimits4web/Framework7/blob/master/LICENSE
- *
- * Inspired by https://github.com/fians/Waves
- */
-import 'mdui.jq/es/methods/addClass';
-import 'mdui.jq/es/methods/attr';
-import 'mdui.jq/es/methods/children';
-import 'mdui.jq/es/methods/data';
-import 'mdui.jq/es/methods/each';
-import 'mdui.jq/es/methods/first';
-import 'mdui.jq/es/methods/hasClass';
-import 'mdui.jq/es/methods/innerHeight';
-import 'mdui.jq/es/methods/innerWidth';
-import 'mdui.jq/es/methods/off';
-import 'mdui.jq/es/methods/offset';
-import 'mdui.jq/es/methods/on';
-import 'mdui.jq/es/methods/parents';
-import 'mdui.jq/es/methods/prependTo';
-import 'mdui.jq/es/methods/prop';
-import 'mdui.jq/es/methods/remove';
-import '../../jq_extends/methods/reflow';
-import '../../jq_extends/methods/transform';
-import '../../jq_extends/methods/transitionEnd';

package/es/components/ripple/index.js

@@ -1,170 +0,0 @@
-/**
- * Inspired by https://github.com/nolimits4web/Framework7/blob/master/src/js/fast-clicks.js
- * https://github.com/nolimits4web/Framework7/blob/master/LICENSE
- *
- * Inspired by https://github.com/fians/Waves
- */
-import $ from 'mdui.jq/es/$';
-import 'mdui.jq/es/methods/addClass';
-import 'mdui.jq/es/methods/attr';
-import 'mdui.jq/es/methods/children';
-import 'mdui.jq/es/methods/data';
-import 'mdui.jq/es/methods/each';
-import 'mdui.jq/es/methods/first';
-import 'mdui.jq/es/methods/hasClass';
-import 'mdui.jq/es/methods/innerHeight';
-import 'mdui.jq/es/methods/innerWidth';
-import 'mdui.jq/es/methods/off';
-import 'mdui.jq/es/methods/offset';
-import 'mdui.jq/es/methods/on';
-import 'mdui.jq/es/methods/parents';
-import 'mdui.jq/es/methods/prependTo';
-import 'mdui.jq/es/methods/prop';
-import 'mdui.jq/es/methods/remove';
-import { isUndefined } from 'mdui.jq/es/utils';
-import '../../jq_extends/methods/reflow';
-import '../../jq_extends/methods/transform';
-import '../../jq_extends/methods/transitionEnd';
-import { $document } from '../../utils/dom';
-import { cancelEvent, endEvent, isAllow, moveEvent, register, startEvent, unlockEvent, } from '../../utils/touchHandler';
-/**
- * 显示涟漪动画
- * @param event
- * @param $ripple
- */
-function show(event, $ripple) {
-    // 鼠标右键不产生涟漪
-    if (event instanceof MouseEvent && event.button === 2) {
-        return;
-    }
-    // 点击位置坐标
-    const touchPosition = typeof TouchEvent !== 'undefined' &&
-        event instanceof TouchEvent &&
-        event.touches.length
-        ? event.touches[0]
-        : event;
-    const touchStartX = touchPosition.pageX;
-    const touchStartY = touchPosition.pageY;
-    // 涟漪位置
-    const offset = $ripple.offset();
-    const height = $ripple.innerHeight();
-    const width = $ripple.innerWidth();
-    const center = {
-        x: touchStartX - offset.left,
-        y: touchStartY - offset.top,
-    };
-    const diameter = Math.max(Math.pow(Math.pow(height, 2) + Math.pow(width, 2), 0.5), 48);
-    // 涟漪扩散动画
-    const translate = `translate3d(${-center.x + width / 2}px,` +
-        `${-center.y + height / 2}px, 0) scale(1)`;
-    // 涟漪的 DOM 结构，并缓存动画效果
-    $(`<div class="mdui-ripple-wave" ` +
-        `style="width:${diameter}px;height:${diameter}px;` +
-        `margin-top:-${diameter / 2}px;margin-left:-${diameter / 2}px;` +
-        `left:${center.x}px;top:${center.y}px;"></div>`)
-        .data('_ripple_wave_translate', translate)
-        .prependTo($ripple)
-        .reflow()
-        .transform(translate);
-}
-/**
- * 隐藏并移除涟漪
- * @param $wave
- */
-function removeRipple($wave) {
-    if (!$wave.length || $wave.data('_ripple_wave_removed')) {
-        return;
-    }
-    $wave.data('_ripple_wave_removed', true);
-    let removeTimer = setTimeout(() => $wave.remove(), 400);
-    const translate = $wave.data('_ripple_wave_translate');
-    $wave
-        .addClass('mdui-ripple-wave-fill')
-        .transform(translate.replace('scale(1)', 'scale(1.01)'))
-        .transitionEnd(() => {
-        clearTimeout(removeTimer);
-        $wave
-            .addClass('mdui-ripple-wave-out')
-            .transform(translate.replace('scale(1)', 'scale(1.01)'));
-        removeTimer = setTimeout(() => $wave.remove(), 700);
-        setTimeout(() => {
-            $wave.transitionEnd(() => {
-                clearTimeout(removeTimer);
-                $wave.remove();
-            });
-        }, 0);
-    });
-}
-/**
- * 隐藏涟漪动画
- * @param this
- */
-function hide() {
-    const $ripple = $(this);
-    $ripple.children('.mdui-ripple-wave').each((_, wave) => {
-        removeRipple($(wave));
-    });
-    $ripple.off(`${moveEvent} ${endEvent} ${cancelEvent}`, hide);
-}
-/**
- * 显示涟漪，并绑定 touchend 等事件
- * @param event
- */
-function showRipple(event) {
-    if (!isAllow(event)) {
-        return;
-    }
-    register(event);
-    // Chrome 59 点击滚动条时，会在 document 上触发事件
-    if (event.target === document) {
-        return;
-    }
-    const $target = $(event.target);
-    // 获取含 .mdui-ripple 类的元素
-    const $ripple = $target.hasClass('mdui-ripple')
-        ? $target
-        : $target.parents('.mdui-ripple').first();
-    if (!$ripple.length) {
-        return;
-    }
-    // 禁用状态的元素上不产生涟漪效果
-    if ($ripple.prop('disabled') || !isUndefined($ripple.attr('disabled'))) {
-        return;
-    }
-    if (event.type === 'touchstart') {
-        let hidden = false;
-        // touchstart 触发指定时间后开始涟漪动画，避免手指滑动时也触发涟漪
-        let timer = setTimeout(() => {
-            timer = 0;
-            show(event, $ripple);
-        }, 200);
-        const hideRipple = () => {
-            // 如果手指没有移动，且涟漪动画还没有开始，则开始涟漪动画
-            if (timer) {
-                clearTimeout(timer);
-                timer = 0;
-                show(event, $ripple);
-            }
-            if (!hidden) {
-                hidden = true;
-                hide.call($ripple);
-            }
-        };
-        // 手指移动后，移除涟漪动画
-        const touchMove = () => {
-            if (timer) {
-                clearTimeout(timer);
-                timer = 0;
-            }
-            hideRipple();
-        };
-        $ripple.on('touchmove', touchMove).on('touchend touchcancel', hideRipple);
-    }
-    else {
-        show(event, $ripple);
-        $ripple.on(`${moveEvent} ${endEvent} ${cancelEvent}`, hide);
-    }
-}
-$(() => {
-    $document.on(startEvent, showRipple).on(unlockEvent, register);
-});

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

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

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

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

@@ -1,160 +0,0 @@
-/**
- * 最终生成的元素结构为：
- *  <select class="mdui-select" mdui-select="{position: 'top'}" style="display: none;"> // $native
- *    <option value="1">State 1</option>
- *    <option value="2">State 2</option>
- *    <option value="3" disabled="">State 3</option>
- *  </select>
- *  <div class="mdui-select mdui-select-position-top" style="" id="88dec0e4-d4a2-c6d0-0e7f-1ba4501e0553"> // $element
- *    <span class="mdui-select-selected">State 1</span> // $selected
- *    <div class="mdui-select-menu" style="transform-origin: center 100% 0px;"> // $menu
- *      <div class="mdui-select-menu-item mdui-ripple" selected="">State 1</div> // $items
- *      <div class="mdui-select-menu-item mdui-ripple">State 2</div>
- *      <div class="mdui-select-menu-item mdui-ripple" disabled="">State 3</div>
- *    </div>
- *  </div>
- */
-import { JQ } from 'mdui.jq/es/JQ';
-import 'mdui.jq/es/methods/add';
-import 'mdui.jq/es/methods/addClass';
-import 'mdui.jq/es/methods/after';
-import 'mdui.jq/es/methods/append';
-import 'mdui.jq/es/methods/appendTo';
-import 'mdui.jq/es/methods/attr';
-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/height';
-import 'mdui.jq/es/methods/hide';
-import 'mdui.jq/es/methods/index';
-import 'mdui.jq/es/methods/innerWidth';
-import 'mdui.jq/es/methods/is';
-import 'mdui.jq/es/methods/on';
-import 'mdui.jq/es/methods/remove';
-import 'mdui.jq/es/methods/removeAttr';
-import 'mdui.jq/es/methods/removeClass';
-import 'mdui.jq/es/methods/show';
-import 'mdui.jq/es/methods/text';
-import 'mdui.jq/es/methods/trigger';
-import 'mdui.jq/es/methods/val';
-import Selector from 'mdui.jq/es/types/Selector';
-import '../../jq_extends/methods/transitionEnd';
-import '../../jq_extends/static/guid';
-declare module '../../interfaces/MduiStatic' {
-    interface MduiStatic {
-        /**
-         * 下拉选择组件
-         *
-         * 请通过 `new mdui.Select()` 调用
-         */
-        Select: {
-            /**
-             * 实例化 Select 组件
-             * @param selector CSS 选择器、或 DOM 元素、或 JQ 对象
-             * @param options 配置参数
-             */
-            new (selector: Selector | HTMLElement | ArrayLike<HTMLElement>, options?: OPTIONS): Select;
-        };
-    }
-}
-declare type OPTIONS = {
-    /**
-     * 下拉框位置：`auto`、`top`、`bottom`
-     */
-    position?: 'auto' | 'top' | 'bottom';
-    /**
-     * 菜单与窗口上下边框至少保持多少间距
-     */
-    gutter?: number;
-};
-declare type STATE = 'closing' | 'closed' | 'opening' | 'opened';
-declare class Select {
-    /**
-     * 原生 `<select>` 元素的 JQ 对象
-     */
-    $native: JQ<HTMLSelectElement>;
-    /**
-     * 生成的 `<div class="mdui-select">` 元素的 JQ 对象
-     */
-    $element: JQ;
-    /**
-     * 配置参数
-     */
-    options: OPTIONS;
-    /**
-     * select 的 size 属性的值，根据该值设置 select 的高度
-     */
-    private size;
-    /**
-     * 占位元素，显示已选中菜单项的文本
-     */
-    private $selected;
-    /**
-     * 菜单项的外层元素的 JQ 对象
-     */
-    private $menu;
-    /**
-     * 菜单项数组的 JQ 对象
-     */
-    private $items;
-    /**
-     * 当前选中的菜单项的索引号
-     */
-    private selectedIndex;
-    /**
-     * 当前选中菜单项的文本
-     */
-    private selectedText;
-    /**
-     * 当前选中菜单项的值
-     */
-    private selectedValue;
-    /**
-     * 唯一 ID
-     */
-    private uniqueID;
-    /**
-     * 当前 select 的状态
-     */
-    private state;
-    constructor(selector: Selector | HTMLElement | ArrayLike<HTMLElement>, options?: OPTIONS);
-    /**
-     * 调整菜单位置
-     */
-    private readjustMenu;
-    /**
-     * select 是否为打开状态
-     */
-    private isOpen;
-    /**
-     * 对原生 select 组件进行了修改后，需要调用该方法
-     */
-    handleUpdate(): void;
-    /**
-     * 动画结束的回调
-     */
-    private transitionEnd;
-    /**
-     * 触发组件事件
-     * @param name
-     */
-    private triggerEvent;
-    /**
-     * 切换下拉菜单的打开状态
-     */
-    toggle(): void;
-    /**
-     * 打开下拉菜单
-     */
-    open(): void;
-    /**
-     * 关闭下拉菜单
-     */
-    close(): void;
-    /**
-     * 获取当前菜单的状态。共包含四种状态：`opening`、`opened`、`closing`、`closed`
-     */
-    getState(): STATE;
-}
-export {};