mdui 1.0.2 → 2.0.1

package/es/components/select/index.js

@@ -1,340 +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 $ from 'mdui.jq/es/$';
-import contains from 'mdui.jq/es/functions/contains';
-import extend from 'mdui.jq/es/functions/extend';
-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 mdui from '../../mdui';
-import '../../jq_extends/methods/transitionEnd';
-import '../../jq_extends/static/guid';
-import { componentEvent } from '../../utils/componentEvent';
-import { $document, $window } from '../../utils/dom';
-const DEFAULT_OPTIONS = {
-    position: 'auto',
-    gutter: 16,
-};
-class Select {
-    constructor(selector, options = {}) {
-        /**
-         * 生成的 `<div class="mdui-select">` 元素的 JQ 对象
-         */
-        this.$element = $();
-        /**
-         * 配置参数
-         */
-        this.options = extend({}, DEFAULT_OPTIONS);
-        /**
-         * select 的 size 属性的值，根据该值设置 select 的高度
-         */
-        this.size = 0;
-        /**
-         * 占位元素，显示已选中菜单项的文本
-         */
-        this.$selected = $();
-        /**
-         * 菜单项的外层元素的 JQ 对象
-         */
-        this.$menu = $();
-        /**
-         * 菜单项数组的 JQ 对象
-         */
-        this.$items = $();
-        /**
-         * 当前选中的菜单项的索引号
-         */
-        this.selectedIndex = 0;
-        /**
-         * 当前选中菜单项的文本
-         */
-        this.selectedText = '';
-        /**
-         * 当前选中菜单项的值
-         */
-        this.selectedValue = '';
-        /**
-         * 当前 select 的状态
-         */
-        this.state = 'closed';
-        this.$native = $(selector).first();
-        this.$native.hide();
-        extend(this.options, options);
-        // 为当前 select 生成唯一 ID
-        this.uniqueID = $.guid();
-        // 生成 select
-        this.handleUpdate();
-        // 点击 select 外面区域关闭
-        $document.on('click touchstart', (event) => {
-            const $target = $(event.target);
-            if (this.isOpen() &&
-                !$target.is(this.$element) &&
-                !contains(this.$element[0], $target[0])) {
-                this.close();
-            }
-        });
-    }
-    /**
-     * 调整菜单位置
-     */
-    readjustMenu() {
-        const windowHeight = $window.height();
-        // mdui-select 高度
-        const elementHeight = this.$element.height();
-        // 菜单项高度
-        const $itemFirst = this.$items.first();
-        const itemHeight = $itemFirst.height();
-        const itemMargin = parseInt($itemFirst.css('margin-top'));
-        // 菜单高度
-        const menuWidth = this.$element.innerWidth() + 0.01; // 必须比真实宽度多一点，不然会出现省略号
-        let menuHeight = itemHeight * this.size + itemMargin * 2;
-        // mdui-select 在窗口中的位置
-        const elementTop = this.$element[0].getBoundingClientRect().top;
-        let transformOriginY;
-        let menuMarginTop;
-        if (this.options.position === 'bottom') {
-            menuMarginTop = elementHeight;
-            transformOriginY = '0px';
-        }
-        else if (this.options.position === 'top') {
-            menuMarginTop = -menuHeight - 1;
-            transformOriginY = '100%';
-        }
-        else {
-            // 菜单高度不能超过窗口高度
-            const menuMaxHeight = windowHeight - this.options.gutter * 2;
-            if (menuHeight > menuMaxHeight) {
-                menuHeight = menuMaxHeight;
-            }
-            // 菜单的 margin-top
-            menuMarginTop = -(itemMargin +
-                this.selectedIndex * itemHeight +
-                (itemHeight - elementHeight) / 2);
-            const menuMaxMarginTop = -(itemMargin +
-                (this.size - 1) * itemHeight +
-                (itemHeight - elementHeight) / 2);
-            if (menuMarginTop < menuMaxMarginTop) {
-                menuMarginTop = menuMaxMarginTop;
-            }
-            // 菜单不能超出窗口
-            const menuTop = elementTop + menuMarginTop;
-            if (menuTop < this.options.gutter) {
-                // 不能超出窗口上方
-                menuMarginTop = -(elementTop - this.options.gutter);
-            }
-            else if (menuTop + menuHeight + this.options.gutter > windowHeight) {
-                // 不能超出窗口下方
-                menuMarginTop = -(elementTop +
-                    menuHeight +
-                    this.options.gutter -
-                    windowHeight);
-            }
-            // transform 的 Y 轴坐标
-            transformOriginY = `${this.selectedIndex * itemHeight + itemHeight / 2 + itemMargin}px`;
-        }
-        // 设置样式
-        this.$element.innerWidth(menuWidth);
-        this.$menu
-            .innerWidth(menuWidth)
-            .height(menuHeight)
-            .css({
-            'margin-top': menuMarginTop + 'px',
-            'transform-origin': 'center ' + transformOriginY + ' 0',
-        });
-    }
-    /**
-     * select 是否为打开状态
-     */
-    isOpen() {
-        return this.state === 'opening' || this.state === 'opened';
-    }
-    /**
-     * 对原生 select 组件进行了修改后，需要调用该方法
-     */
-    handleUpdate() {
-        if (this.isOpen()) {
-            this.close();
-        }
-        this.selectedValue = this.$native.val();
-        const itemsData = [];
-        this.$items = $();
-        // 生成 HTML
-        this.$native.find('option').each((index, option) => {
-            const text = option.textContent || '';
-            const value = option.value;
-            const disabled = option.disabled;
-            const selected = this.selectedValue === value;
-            itemsData.push({
-                value,
-                text,
-                disabled,
-                selected,
-                index,
-            });
-            if (selected) {
-                this.selectedText = text;
-                this.selectedIndex = index;
-            }
-            this.$items = this.$items.add('<div class="mdui-select-menu-item mdui-ripple"' +
-                (disabled ? ' disabled' : '') +
-                (selected ? ' selected' : '') +
-                `>${text}</div>`);
-        });
-        this.$selected = $(`<span class="mdui-select-selected">${this.selectedText}</span>`);
-        this.$element = $(`<div class="mdui-select mdui-select-position-${this.options.position}" ` +
-            `style="${this.$native.attr('style')}" ` +
-            `id="${this.uniqueID}"></div>`)
-            .show()
-            .append(this.$selected);
-        this.$menu = $('<div class="mdui-select-menu"></div>')
-            .appendTo(this.$element)
-            .append(this.$items);
-        $(`#${this.uniqueID}`).remove();
-        this.$native.after(this.$element);
-        // 根据 select 的 size 属性设置高度
-        this.size = parseInt(this.$native.attr('size') || '0');
-        if (this.size <= 0) {
-            this.size = this.$items.length;
-            if (this.size > 8) {
-                this.size = 8;
-            }
-        }
-        // 点击选项时关闭下拉菜单
-        // eslint-disable-next-line @typescript-eslint/no-this-alias
-        const that = this;
-        this.$items.on('click', function () {
-            if (that.state === 'closing') {
-                return;
-            }
-            const $item = $(this);
-            const index = $item.index();
-            const data = itemsData[index];
-            if (data.disabled) {
-                return;
-            }
-            that.$selected.text(data.text);
-            that.$native.val(data.value);
-            that.$items.removeAttr('selected');
-            $item.attr('selected', '');
-            that.selectedIndex = data.index;
-            that.selectedValue = data.value;
-            that.selectedText = data.text;
-            that.$native.trigger('change');
-            that.close();
-        });
-        // 点击 $element 时打开下拉菜单
-        this.$element.on('click', (event) => {
-            const $target = $(event.target);
-            // 在菜单上点击时不打开
-            if ($target.is('.mdui-select-menu') ||
-                $target.is('.mdui-select-menu-item')) {
-                return;
-            }
-            this.toggle();
-        });
-    }
-    /**
-     * 动画结束的回调
-     */
-    transitionEnd() {
-        this.$element.removeClass('mdui-select-closing');
-        if (this.state === 'opening') {
-            this.state = 'opened';
-            this.triggerEvent('opened');
-            this.$menu.css('overflow-y', 'auto');
-        }
-        if (this.state === 'closing') {
-            this.state = 'closed';
-            this.triggerEvent('closed');
-            // 恢复样式
-            this.$element.innerWidth('');
-            this.$menu.css({
-                'margin-top': '',
-                height: '',
-                width: '',
-            });
-        }
-    }
-    /**
-     * 触发组件事件
-     * @param name
-     */
-    triggerEvent(name) {
-        componentEvent(name, 'select', this.$native, this);
-    }
-    /**
-     * 切换下拉菜单的打开状态
-     */
-    toggle() {
-        this.isOpen() ? this.close() : this.open();
-    }
-    /**
-     * 打开下拉菜单
-     */
-    open() {
-        if (this.isOpen()) {
-            return;
-        }
-        this.state = 'opening';
-        this.triggerEvent('open');
-        this.readjustMenu();
-        this.$element.addClass('mdui-select-open');
-        this.$menu.transitionEnd(() => this.transitionEnd());
-    }
-    /**
-     * 关闭下拉菜单
-     */
-    close() {
-        if (!this.isOpen()) {
-            return;
-        }
-        this.state = 'closing';
-        this.triggerEvent('close');
-        this.$menu.css('overflow-y', '');
-        this.$element
-            .removeClass('mdui-select-open')
-            .addClass('mdui-select-closing');
-        this.$menu.transitionEnd(() => this.transitionEnd());
-    }
-    /**
-     * 获取当前菜单的状态。共包含四种状态：`opening`、`opened`、`closing`、`closed`
-     */
-    getState() {
-        return this.state;
-    }
-}
-mdui.Select = Select;

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

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

package/es/components/slider/index.js

@@ -1,134 +0,0 @@
-import $ from 'mdui.jq/es/$';
-import 'mdui.jq/es/methods/addClass';
-import 'mdui.jq/es/methods/append';
-import 'mdui.jq/es/methods/attr';
-import 'mdui.jq/es/methods/css';
-import 'mdui.jq/es/methods/data';
-import 'mdui.jq/es/methods/each';
-import 'mdui.jq/es/methods/empty';
-import 'mdui.jq/es/methods/find';
-import 'mdui.jq/es/methods/hasClass';
-import 'mdui.jq/es/methods/on';
-import 'mdui.jq/es/methods/parent';
-import 'mdui.jq/es/methods/remove';
-import 'mdui.jq/es/methods/removeClass';
-import 'mdui.jq/es/methods/text';
-import 'mdui.jq/es/methods/val';
-import 'mdui.jq/es/methods/width';
-import { isUndefined } from 'mdui.jq/es/utils';
-import mdui from '../../mdui';
-import { $document } from '../../utils/dom';
-import { endEvent, isAllow, register, startEvent, unlockEvent, } from '../../utils/touchHandler';
-/**
- * 滑块的值改变后修改滑块样式
- * @param $slider
- */
-function updateValueStyle($slider) {
-    const data = $slider.data();
-    const $track = data._slider_$track;
-    const $fill = data._slider_$fill;
-    const $thumb = data._slider_$thumb;
-    const $input = data._slider_$input;
-    const min = data._slider_min;
-    const max = data._slider_max;
-    const isDisabled = data._slider_disabled;
-    const isDiscrete = data._slider_discrete;
-    const $thumbText = data._slider_$thumbText;
-    const value = $input.val();
-    const percent = ((value - min) / (max - min)) * 100;
-    $fill.width(`${percent}%`);
-    $track.width(`${100 - percent}%`);
-    if (isDisabled) {
-        $fill.css('padding-right', '6px');
-        $track.css('padding-left', '6px');
-    }
-    $thumb.css('left', `${percent}%`);
-    if (isDiscrete) {
-        $thumbText.text(value);
-    }
-    percent === 0
-        ? $slider.addClass('mdui-slider-zero')
-        : $slider.removeClass('mdui-slider-zero');
-}
-/**
- * 重新初始化滑块
- * @param $slider
- */
-function reInit($slider) {
-    const $track = $('<div class="mdui-slider-track"></div>');
-    const $fill = $('<div class="mdui-slider-fill"></div>');
-    const $thumb = $('<div class="mdui-slider-thumb"></div>');
-    const $input = $slider.find('input[type="range"]');
-    const isDisabled = $input[0].disabled;
-    const isDiscrete = $slider.hasClass('mdui-slider-discrete');
-    // 禁用状态
-    isDisabled
-        ? $slider.addClass('mdui-slider-disabled')
-        : $slider.removeClass('mdui-slider-disabled');
-    // 重新填充 HTML
-    $slider.find('.mdui-slider-track').remove();
-    $slider.find('.mdui-slider-fill').remove();
-    $slider.find('.mdui-slider-thumb').remove();
-    $slider.append($track).append($fill).append($thumb);
-    // 间续型滑块
-    let $thumbText = $();
-    if (isDiscrete) {
-        $thumbText = $('<span></span>');
-        $thumb.empty().append($thumbText);
-    }
-    $slider.data('_slider_$track', $track);
-    $slider.data('_slider_$fill', $fill);
-    $slider.data('_slider_$thumb', $thumb);
-    $slider.data('_slider_$input', $input);
-    $slider.data('_slider_min', $input.attr('min'));
-    $slider.data('_slider_max', $input.attr('max'));
-    $slider.data('_slider_disabled', isDisabled);
-    $slider.data('_slider_discrete', isDiscrete);
-    $slider.data('_slider_$thumbText', $thumbText);
-    // 设置默认值
-    updateValueStyle($slider);
-}
-const rangeSelector = '.mdui-slider input[type="range"]';
-$(() => {
-    // 滑块滑动事件
-    $document.on('input change', rangeSelector, function () {
-        const $slider = $(this).parent();
-        updateValueStyle($slider);
-    });
-    // 开始触摸滑块事件
-    $document.on(startEvent, rangeSelector, function (event) {
-        if (!isAllow(event)) {
-            return;
-        }
-        register(event);
-        if (this.disabled) {
-            return;
-        }
-        const $slider = $(this).parent();
-        $slider.addClass('mdui-slider-focus');
-    });
-    // 结束触摸滑块事件
-    $document.on(endEvent, rangeSelector, function (event) {
-        if (!isAllow(event)) {
-            return;
-        }
-        if (this.disabled) {
-            return;
-        }
-        const $slider = $(this).parent();
-        $slider.removeClass('mdui-slider-focus');
-    });
-    $document.on(unlockEvent, rangeSelector, register);
-    /**
-     * 初始化滑块
-     */
-    mdui.mutation('.mdui-slider', function () {
-        reInit($(this));
-    });
-});
-mdui.updateSliders = function (selector) {
-    const $elements = isUndefined(selector) ? $('.mdui-slider') : $(selector);
-    $elements.each((_, element) => {
-        reInit($(element));
-    });
-};

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

@@ -1,126 +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/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 '../../jq_extends/methods/reflow';
-import '../../jq_extends/methods/transform';
-import '../../jq_extends/methods/transitionEnd';
-declare module '../../interfaces/MduiStatic' {
-    interface MduiStatic {
-        /**
-         * 打开一个 Snackbar
-         * @param message Snackbar 的文本
-         * @param options 配置参数
-         */
-        snackbar(message: string, options?: OPTIONS): Snackbar;
-        /**
-         * 打开一个 Snackbar
-         * @param options 配置参数
-         */
-        snackbar(options: OPTIONS): Snackbar;
-    }
-}
-declare type OPTIONS = {
-    /**
-     * Snackbar 的文本。通过 `mdui.snackbar(options)` 调用时，该参数不能为空
-     */
-    message?: string;
-    /**
-     * 在用户没有操作时多长时间自动隐藏，单位（毫秒）。为 `0` 时表示不自动关闭，默认为 `4000`
-     */
-    timeout?: number;
-    /**
-     * Snackbar 的位置，默认为 `bottom`。
-     * 取值范围包括：
-     *   `bottom`: 下方
-     *   `top`: 上方
-     *   `left-top`: 左上角
-     *   `left-bottom`: 左下角
-     *   `right-top`: 右上角
-     *   `right-bottom`: 右下角
-     */
-    position?: 'bottom' | 'top' | 'left-top' | 'left-bottom' | 'right-top' | 'right-bottom';
-    /**
-     * 按钮的文本
-     */
-    buttonText?: string;
-    /**
-     * 按钮的文本颜色，可以是颜色名或颜色值，如 `red`、`#ffffff`、`rgba(255, 255, 255, 0.3)` 等。默认为 `#90CAF9`
-     */
-    buttonColor?: string;
-    /**
-     * 点击按钮时是否关闭 Snackbar，默认为 `true`
-     */
-    closeOnButtonClick?: boolean;
-    /**
-     * 点击或触摸 Snackbar 以外的区域时是否关闭 Snackbar，默认为 `true`
-     */
-    closeOnOutsideClick?: boolean;
-    /**
-     * 在 Snackbar 上点击的回调函数，参数为 Snackbar 的实例
-     */
-    onClick?: (snackbar: Snackbar) => void;
-    /**
-     * 点击 Snackbar 上的按钮时的回调函数，参数为 Snackbar 的实例
-     */
-    onButtonClick?: (snackbar: Snackbar) => void;
-    /**
-     * Snackbar 开始打开时的回调函数，参数为 Snackbar 的实例
-     */
-    onOpen?: (snackbar: Snackbar) => void;
-    /**
-     * Snackbar 打开后的回调函数，参数为 Snackbar 的实例
-     */
-    onOpened?: (snackbar: Snackbar) => void;
-    /**
-     * Snackbar 开始关闭时的回调函数，参数为 Snackbar 的实例
-     */
-    onClose?: (snackbar: Snackbar) => void;
-    /**
-     * Snackbar 关闭后的回调函数，参数为 Snackbar 的实例
-     */
-    onClosed?: (snackbar: Snackbar) => void;
-};
-declare class Snackbar {
-    /**
-     * Snackbar 元素
-     */
-    $element: JQ;
-    /**
-     * 配置参数
-     */
-    options: OPTIONS;
-    /**
-     * 当前 Snackbar 的状态
-     */
-    private state;
-    /**
-     * setTimeout 的 ID
-     */
-    private timeoutId;
-    constructor(options: OPTIONS);
-    /**
-     * 点击 Snackbar 外面的区域关闭
-     * @param event
-     */
-    private closeOnOutsideClick;
-    /**
-     * 设置 Snackbar 的位置
-     * @param state
-     */
-    private setPosition;
-    /**
-     * 打开 Snackbar
-     */
-    open(): void;
-    /**
-     * 关闭 Snackbar
-     */
-    close(): void;
-}
-export {};