mdui 1.0.1 → 2.0.0

package/es/components/table/index.js

@@ -1,178 +0,0 @@
-import $ from 'mdui.jq/es/$';
-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 { isUndefined } from 'mdui.jq/es/utils';
-import mdui from '../../mdui';
-import '../../global/mutation';
-class Table {
-    constructor(selector) {
-        /**
-         * 表头 tr 元素
-         */
-        this.$thRow = $();
-        /**
-         * 表格 body 中的 tr 元素
-         */
-        this.$tdRows = $();
-        /**
-         * 表头的 checkbox 元素
-         */
-        this.$thCheckbox = $();
-        /**
-         * 表格 body 中的 checkbox 元素
-         */
-        this.$tdCheckboxs = $();
-        /**
-         * 表格行是否可选择
-         */
-        this.selectable = false;
-        /**
-         * 已选中的行数
-         */
-        this.selectedRow = 0;
-        this.$element = $(selector).first();
-        this.init();
-    }
-    /**
-     * 初始化表格
-     */
-    init() {
-        this.$thRow = this.$element.find('thead tr');
-        this.$tdRows = this.$element.find('tbody tr');
-        this.selectable = this.$element.hasClass('mdui-table-selectable');
-        this.updateThCheckbox();
-        this.updateTdCheckbox();
-        this.updateNumericCol();
-    }
-    /**
-     * 生成 checkbox 的 HTML 结构
-     * @param tag 标签名
-     */
-    createCheckboxHTML(tag) {
-        return (`<${tag} class="mdui-table-cell-checkbox">` +
-            '<label class="mdui-checkbox">' +
-            '<input type="checkbox"/>' +
-            '<i class="mdui-checkbox-icon"></i>' +
-            '</label>' +
-            `</${tag}>`);
-    }
-    /**
-     * 更新表头 checkbox 的状态
-     */
-    updateThCheckboxStatus() {
-        const checkbox = this.$thCheckbox[0];
-        const selectedRow = this.selectedRow;
-        const tdRowsLength = this.$tdRows.length;
-        checkbox.checked = selectedRow === tdRowsLength;
-        checkbox.indeterminate = !!selectedRow && selectedRow !== tdRowsLength;
-    }
-    /**
-     * 更新表格行的 checkbox
-     */
-    updateTdCheckbox() {
-        const rowSelectedClass = 'mdui-table-row-selected';
-        this.$tdRows.each((_, row) => {
-            const $row = $(row);
-            // 移除旧的 checkbox
-            $row.find('.mdui-table-cell-checkbox').remove();
-            if (!this.selectable) {
-                return;
-            }
-            // 创建 DOM
-            const $checkbox = $(this.createCheckboxHTML('td'))
-                .prependTo($row)
-                .find('input[type="checkbox"]');
-            // 默认选中的行
-            if ($row.hasClass(rowSelectedClass)) {
-                $checkbox[0].checked = true;
-                this.selectedRow++;
-            }
-            this.updateThCheckboxStatus();
-            // 绑定事件
-            $checkbox.on('change', () => {
-                if ($checkbox[0].checked) {
-                    $row.addClass(rowSelectedClass);
-                    this.selectedRow++;
-                }
-                else {
-                    $row.removeClass(rowSelectedClass);
-                    this.selectedRow--;
-                }
-                this.updateThCheckboxStatus();
-            });
-            this.$tdCheckboxs = this.$tdCheckboxs.add($checkbox);
-        });
-    }
-    /**
-     * 更新表头的 checkbox
-     */
-    updateThCheckbox() {
-        // 移除旧的 checkbox
-        this.$thRow.find('.mdui-table-cell-checkbox').remove();
-        if (!this.selectable) {
-            return;
-        }
-        this.$thCheckbox = $(this.createCheckboxHTML('th'))
-            .prependTo(this.$thRow)
-            .find('input[type="checkbox"]')
-            .on('change', () => {
-            const isCheckedAll = this.$thCheckbox[0].checked;
-            this.selectedRow = isCheckedAll ? this.$tdRows.length : 0;
-            this.$tdCheckboxs.each((_, checkbox) => {
-                checkbox.checked = isCheckedAll;
-            });
-            this.$tdRows.each((_, row) => {
-                isCheckedAll
-                    ? $(row).addClass('mdui-table-row-selected')
-                    : $(row).removeClass('mdui-table-row-selected');
-            });
-        });
-    }
-    /**
-     * 更新数值列
-     */
-    updateNumericCol() {
-        const numericClass = 'mdui-table-col-numeric';
-        this.$thRow.find('th').each((i, th) => {
-            const isNumericCol = $(th).hasClass(numericClass);
-            this.$tdRows.each((_, row) => {
-                const $td = $(row).find('td').eq(i);
-                isNumericCol
-                    ? $td.addClass(numericClass)
-                    : $td.removeClass(numericClass);
-            });
-        });
-    }
-}
-const dataName = '_mdui_table';
-$(() => {
-    mdui.mutation('.mdui-table', function () {
-        const $element = $(this);
-        if (!$element.data(dataName)) {
-            $element.data(dataName, new Table($element));
-        }
-    });
-});
-mdui.updateTables = function (selector) {
-    const $elements = isUndefined(selector) ? $('.mdui-table') : $(selector);
-    $elements.each((_, element) => {
-        const $element = $(element);
-        const instance = $element.data(dataName);
-        if (instance) {
-            instance.init();
-        }
-        else {
-            $element.data(dataName, new Table($element));
-        }
-    });
-};

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

@@ -1,28 +0,0 @@
-import 'mdui.jq/es/methods/addClass';
-import 'mdui.jq/es/methods/appendTo';
-import 'mdui.jq/es/methods/attr';
-import 'mdui.jq/es/methods/each';
-import 'mdui.jq/es/methods/find';
-import 'mdui.jq/es/methods/is';
-import 'mdui.jq/es/methods/on';
-import 'mdui.jq/es/methods/outerHeight';
-import 'mdui.jq/es/methods/parent';
-import 'mdui.jq/es/methods/parents';
-import 'mdui.jq/es/methods/remove';
-import 'mdui.jq/es/methods/removeClass';
-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 '../../global/mutation';
-declare module '../../interfaces/MduiStatic' {
-    interface MduiStatic {
-        /**
-         * 动态修改了文本框后，需要调用该方法重新初始化文本框。
-         *
-         * 若传入了参数，则只初始化该参数对应的文本框。若没有传入参数，则重新初始化所有文本框。
-         * @param selector CSS 选择器、或 DOM 元素、或 DOM 元素组成的数组、或 JQ 对象
-         */
-        updateTextFields(selector?: Selector | HTMLElement | ArrayLike<HTMLElement>): void;
-    }
-}

package/es/components/textfield/index.js

@@ -1,147 +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/each';
-import 'mdui.jq/es/methods/find';
-import 'mdui.jq/es/methods/is';
-import 'mdui.jq/es/methods/on';
-import 'mdui.jq/es/methods/outerHeight';
-import 'mdui.jq/es/methods/parent';
-import 'mdui.jq/es/methods/parents';
-import 'mdui.jq/es/methods/remove';
-import 'mdui.jq/es/methods/removeClass';
-import 'mdui.jq/es/methods/text';
-import 'mdui.jq/es/methods/trigger';
-import 'mdui.jq/es/methods/val';
-import { isUndefined } from 'mdui.jq/es/utils';
-import mdui from '../../mdui';
-import '../../global/mutation';
-import { $document } from '../../utils/dom';
-const defaultData = {
-    reInit: false,
-    domLoadedEvent: false,
-};
-/**
- * 输入框事件
- * @param event
- * @param data
- */
-function inputEvent(event, data = {}) {
-    data = extend({}, defaultData, data);
-    const input = event.target;
-    const $input = $(input);
-    const eventType = event.type;
-    const value = $input.val();
-    // 文本框类型
-    const inputType = $input.attr('type') || '';
-    if (['checkbox', 'button', 'submit', 'range', 'radio', 'image'].indexOf(inputType) > -1) {
-        return;
-    }
-    const $textfield = $input.parent('.mdui-textfield');
-    // 输入框是否聚焦
-    if (eventType === 'focus') {
-        $textfield.addClass('mdui-textfield-focus');
-    }
-    if (eventType === 'blur') {
-        $textfield.removeClass('mdui-textfield-focus');
-    }
-    // 输入框是否为空
-    if (eventType === 'blur' || eventType === 'input') {
-        value
-            ? $textfield.addClass('mdui-textfield-not-empty')
-            : $textfield.removeClass('mdui-textfield-not-empty');
-    }
-    // 输入框是否禁用
-    input.disabled
-        ? $textfield.addClass('mdui-textfield-disabled')
-        : $textfield.removeClass('mdui-textfield-disabled');
-    // 表单验证
-    if ((eventType === 'input' || eventType === 'blur') &&
-        !data.domLoadedEvent &&
-        input.validity) {
-        input.validity.valid
-            ? $textfield.removeClass('mdui-textfield-invalid-html5')
-            : $textfield.addClass('mdui-textfield-invalid-html5');
-    }
-    // textarea 高度自动调整
-    if ($input.is('textarea')) {
-        // IE bug：textarea 的值仅为多个换行，不含其他内容时，textarea 的高度不准确
-        //         此时，在计算高度前，在值的开头加入一个空格，计算完后，移除空格
-        const inputValue = value;
-        let hasExtraSpace = false;
-        if (inputValue.replace(/[\r\n]/g, '') === '') {
-            $input.val(' ' + inputValue);
-            hasExtraSpace = true;
-        }
-        // 设置 textarea 高度
-        $input.outerHeight('');
-        const height = $input.outerHeight();
-        const scrollHeight = input.scrollHeight;
-        if (scrollHeight > height) {
-            $input.outerHeight(scrollHeight);
-        }
-        // 计算完，还原 textarea 的值
-        if (hasExtraSpace) {
-            $input.val(inputValue);
-        }
-    }
-    // 实时字数统计
-    if (data.reInit) {
-        $textfield.find('.mdui-textfield-counter').remove();
-    }
-    const maxLength = $input.attr('maxlength');
-    if (maxLength) {
-        if (data.reInit || data.domLoadedEvent) {
-            $('<div class="mdui-textfield-counter">' +
-                `<span class="mdui-textfield-counter-inputed"></span> / ${maxLength}` +
-                '</div>').appendTo($textfield);
-        }
-        $textfield
-            .find('.mdui-textfield-counter-inputed')
-            .text(value.length.toString());
-    }
-    // 含 帮助文本、错误提示、字数统计 时，增加文本框底部内边距
-    if ($textfield.find('.mdui-textfield-helper').length ||
-        $textfield.find('.mdui-textfield-error').length ||
-        maxLength) {
-        $textfield.addClass('mdui-textfield-has-bottom');
-    }
-}
-$(() => {
-    // 绑定事件
-    $document.on('input focus blur', '.mdui-textfield-input', { useCapture: true }, inputEvent);
-    // 可展开文本框展开
-    $document.on('click', '.mdui-textfield-expandable .mdui-textfield-icon', function () {
-        $(this)
-            .parents('.mdui-textfield')
-            .addClass('mdui-textfield-expanded')
-            .find('.mdui-textfield-input')[0]
-            .focus();
-    });
-    // 可展开文本框关闭
-    $document.on('click', '.mdui-textfield-expanded .mdui-textfield-close', function () {
-        $(this)
-            .parents('.mdui-textfield')
-            .removeClass('mdui-textfield-expanded')
-            .find('.mdui-textfield-input')
-            .val('');
-    });
-    /**
-     * 初始化文本框
-     */
-    mdui.mutation('.mdui-textfield', function () {
-        $(this).find('.mdui-textfield-input').trigger('input', {
-            domLoadedEvent: true,
-        });
-    });
-});
-mdui.updateTextFields = function (selector) {
-    const $elements = isUndefined(selector) ? $('.mdui-textfield') : $(selector);
-    $elements.each((_, element) => {
-        $(element).find('.mdui-textfield-input').trigger('input', {
-            reInit: true,
-        });
-    });
-};

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

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

package/es/components/tooltip/customAttr.js

@@ -1,20 +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-tooltip';
-const dataName = '_mdui_tooltip';
-$(() => {
-    // mouseenter 不能冒泡，所以这里用 mouseover 代替
-    $document.on('touchstart mouseover', `[${customAttr}]`, function () {
-        const $target = $(this);
-        let instance = $target.data(dataName);
-        if (!instance) {
-            instance = new mdui.Tooltip(this, parseOptions(this, customAttr));
-            $target.data(dataName, instance);
-        }
-    });
-});

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

@@ -1,123 +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/css';
-import 'mdui.jq/es/methods/first';
-import 'mdui.jq/es/methods/hasClass';
-import 'mdui.jq/es/methods/height';
-import 'mdui.jq/es/methods/html';
-import 'mdui.jq/es/methods/offset';
-import 'mdui.jq/es/methods/on';
-import 'mdui.jq/es/methods/removeClass';
-import 'mdui.jq/es/methods/width';
-import Selector from 'mdui.jq/es/types/Selector';
-import '../../jq_extends/methods/transformOrigin';
-import '../../jq_extends/methods/transitionEnd';
-import '../../jq_extends/static/guid';
-declare module '../../interfaces/MduiStatic' {
-    interface MduiStatic {
-        /**
-         * Tooltip 组件
-         *
-         * 请通过 `new mdui.Tooltip()` 调用
-         */
-        Tooltip: {
-            /**
-             * 实例化 Tooltip 组件
-             * @param selector CSS 选择器、或 DOM 元素、或 JQ 对象
-             * @param options 配置参数
-             */
-            new (selector: Selector | HTMLElement | ArrayLike<HTMLElement>, options?: OPTIONS): Tooltip;
-        };
-    }
-}
-declare type POSITION = 'auto' | 'bottom' | 'top' | 'left' | 'right';
-declare type OPTIONS = {
-    /**
-     * Tooltip 的位置。取值范围包括 `auto`、`bottom`、`top`、`left`、`right`。
-     * 为 `auto` 时，会自动判断位置。默认在下方。优先级为 `bottom` > `top` > `left` > `right`。
-     * 默认为 `auto`
-     */
-    position?: POSITION;
-    /**
-     * 延时触发，单位毫秒。默认为 `0`，即没有延时。
-     */
-    delay?: number;
-    /**
-     * Tooltip 的内容
-     */
-    content?: string;
-};
-declare type STATE = 'opening' | 'opened' | 'closing' | 'closed';
-declare class Tooltip {
-    /**
-     * 触发 tooltip 元素的 JQ 对象
-     */
-    $target: JQ;
-    /**
-     * tooltip 元素的 JQ 对象
-     */
-    $element: JQ;
-    /**
-     * 配置参数
-     */
-    options: OPTIONS;
-    /**
-     * 当前 tooltip 的状态
-     */
-    private state;
-    /**
-     * setTimeout 的返回值
-     */
-    private timeoutId;
-    constructor(selector: Selector | HTMLElement | ArrayLike<HTMLElement>, options?: OPTIONS);
-    /**
-     * 元素是否已禁用
-     * @param element
-     */
-    private isDisabled;
-    /**
-     * 是否是桌面设备
-     */
-    private isDesktop;
-    /**
-     * 设置 Tooltip 的位置
-     */
-    private setPosition;
-    /**
-     * 触发组件事件
-     * @param name
-     */
-    private triggerEvent;
-    /**
-     * 动画结束回调
-     */
-    private transitionEnd;
-    /**
-     * 当前 tooltip 是否为打开状态
-     */
-    private isOpen;
-    /**
-     * 执行打开 tooltip
-     */
-    private doOpen;
-    /**
-     * 打开 Tooltip
-     * @param options 允许每次打开时设置不同的参数
-     */
-    open(options?: OPTIONS): void;
-    /**
-     * 关闭 Tooltip
-     */
-    close(): void;
-    /**
-     * 切换 Tooltip 的打开状态
-     */
-    toggle(): void;
-    /**
-     * 获取 Tooltip 状态。共包含四种状态：`opening`、`opened`、`closing`、`closed`
-     */
-    getState(): STATE;
-}
-export {};