mdui 1.0.2 → 2.0.1

package/src/components/dialog/customAttr.ts

@@ -1,41 +0,0 @@
-import $ from 'mdui.jq/es/$';
-import 'mdui.jq/es/methods/data';
-import 'mdui.jq/es/methods/first';
-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-dialog';
-const dataName = '_mdui_dialog';
-
-type OPTIONS = {
-  target: string;
-  history?: boolean;
-  overlay?: boolean;
-  modal?: boolean;
-  closeOnEsc?: boolean;
-  closeOnCancel?: boolean;
-  closeOnConfirm?: boolean;
-  destroyOnClosed?: boolean;
-};
-
-$(() => {
-  $document.on('click', `[${customAttr}]`, function () {
-    const options = parseOptions(this as HTMLElement, customAttr) as OPTIONS;
-    const selector = options.target;
-    // @ts-ignore
-    delete options.target;
-
-    const $dialog = $(selector).first();
-    let instance = $dialog.data(dataName);
-
-    if (!instance) {
-      instance = new mdui.Dialog($dialog, options);
-      $dialog.data(dataName, instance);
-    }
-
-    instance.open();
-  });
-});

package/src/components/dialog/dialog.ts

@@ -1,224 +0,0 @@
-import $ from 'mdui.jq/es/$';
-import each from 'mdui.jq/es/functions/each';
-import extend from 'mdui.jq/es/functions/extend';
-import 'mdui.jq/es/methods/each';
-import 'mdui.jq/es/methods/find';
-import 'mdui.jq/es/methods/on';
-import mdui from '../../mdui';
-import { Dialog } from './class';
-import './index';
-
-declare module '../../interfaces/MduiStatic' {
-  interface MduiStatic {
-    /**
-     * 打开一个对话框，标题、内容、按钮等都可以自定义
-     * @param options 配置参数
-     */
-    dialog(options: OPTIONS): Dialog;
-  }
-}
-
-type BUTTON = {
-  /**
-   * 按钮文本
-   */
-  text?: string;
-
-  /**
-   * 按钮文本是否加粗，默认为 `false`
-   */
-  bold?: boolean;
-
-  /**
-   * 点击按钮后是否关闭对话框，默认为 `true`
-   */
-  close?: boolean;
-
-  /**
-   * 点击按钮的回调函数，参数为对话框的实例
-   */
-  onClick?: (dialog: Dialog) => void;
-};
-
-type OPTIONS = {
-  /**
-   * 对话框的标题
-   */
-  title?: string;
-
-  /**
-   * 对话框的内容
-   */
-  content?: string;
-
-  /**
-   * 按钮数组，每个按钮都是一个带按钮参数的对象
-   */
-  buttons?: BUTTON[];
-
-  /**
-   * 按钮是否垂直排列，默认为 `false`
-   */
-  stackedButtons?: boolean;
-
-  /**
-   * 添加到 `.mdui-dialog` 上的 CSS 类
-   */
-  cssClass?: string;
-
-  /**
-   * 是否监听 `hashchange` 事件，为 `true` 时可以通过 Android 的返回键或浏览器后退按钮关闭对话框，默认为 `true`
-   */
-  history?: boolean;
-
-  /**
-   * 打开对话框后是否显示遮罩层，默认为 `true`
-   */
-  overlay?: boolean;
-
-  /**
-   * 是否模态化对话框。为 `false` 时点击对话框外面的区域时关闭对话框，否则不关闭
-   */
-  modal?: boolean;
-
-  /**
-   * 按下 Esc 键时是否关闭对话框，默认为 `true`
-   */
-  closeOnEsc?: boolean;
-
-  /**
-   * 关闭对话框后是否自动销毁对话框，默认为 `true`
-   */
-  destroyOnClosed?: boolean;
-
-  /**
-   * 打开动画开始时的回调，参数为对话框实例
-   */
-  onOpen?: (dialog: Dialog) => void;
-
-  /**
-   * 打开动画结束时的回调，参数为对话框实例
-   */
-  onOpened?: (dialog: Dialog) => void;
-
-  /**
-   * 关闭动画开始时的回调，参数为对话框实例
-   */
-  onClose?: (dialog: Dialog) => void;
-
-  /**
-   * 关闭动画结束时的回调，参数为对话框实例
-   */
-  onClosed?: (dialog: Dialog) => void;
-};
-
-const DEFAULT_BUTTON: BUTTON = {
-  text: '',
-  bold: false,
-  close: true,
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
-  onClick: () => {},
-};
-
-const DEFAULT_OPTIONS: OPTIONS = {
-  title: '',
-  content: '',
-  buttons: [],
-  stackedButtons: false,
-  cssClass: '',
-  history: true,
-  overlay: true,
-  modal: false,
-  closeOnEsc: true,
-  destroyOnClosed: true,
-  // 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: () => {},
-};
-
-mdui.dialog = function (options: OPTIONS): Dialog {
-  // 合并配置参数
-  options = extend({}, DEFAULT_OPTIONS, options);
-
-  each(options.buttons!, (i, button) => {
-    options.buttons![i] = extend({}, DEFAULT_BUTTON, button);
-  });
-
-  // 按钮的 HTML
-  let buttonsHTML = '';
-  if (options.buttons?.length) {
-    buttonsHTML = `<div class="mdui-dialog-actions${
-      options.stackedButtons ? ' mdui-dialog-actions-stacked' : ''
-    }">`;
-
-    each(options.buttons, (_, button) => {
-      buttonsHTML +=
-        '<a href="javascript:void(0)" ' +
-        `class="mdui-btn mdui-ripple mdui-text-color-primary ${
-          button.bold ? 'mdui-btn-bold' : ''
-        }">${button.text}</a>`;
-    });
-
-    buttonsHTML += '</div>';
-  }
-
-  // Dialog 的 HTML
-  const HTML =
-    `<div class="mdui-dialog ${options.cssClass}">` +
-    (options.title
-      ? `<div class="mdui-dialog-title">${options.title}</div>`
-      : '') +
-    (options.content
-      ? `<div class="mdui-dialog-content">${options.content}</div>`
-      : '') +
-    buttonsHTML +
-    '</div>';
-
-  // 实例化 Dialog
-  const instance = new mdui.Dialog(HTML, {
-    history: options.history,
-    overlay: options.overlay,
-    modal: options.modal,
-    closeOnEsc: options.closeOnEsc,
-    destroyOnClosed: options.destroyOnClosed,
-  });
-
-  // 绑定按钮事件
-  if (options.buttons?.length) {
-    instance.$element
-      .find('.mdui-dialog-actions .mdui-btn')
-      .each((index, button) => {
-        $(button).on('click', () => {
-          options.buttons![index].onClick!(instance);
-
-          if (options.buttons![index].close) {
-            instance.close();
-          }
-        });
-      });
-  }
-
-  // 绑定打开关闭事件
-  instance.$element
-    .on('open.mdui.dialog', () => {
-      options.onOpen!(instance);
-    })
-    .on('opened.mdui.dialog', () => {
-      options.onOpened!(instance);
-    })
-    .on('close.mdui.dialog', () => {
-      options.onClose!(instance);
-    })
-    .on('closed.mdui.dialog', () => {
-      options.onClosed!(instance);
-    });
-
-  instance.open();
-
-  return instance;
-};

package/src/components/dialog/index.less

@@ -1,154 +0,0 @@
-/**
- * =============================================================================
- * ************   Dialog 提示框   ************
- * =============================================================================
- */
-
-@import '../button/index';
-
-.mdui-dialog {
-  position: fixed;
-  right: 0;
-  left: 0;
-  z-index: @z-index-dialog;
-  display: none;
-  box-sizing: border-box;
-  width: 92%;
-  min-width: 180px;
-  max-width: 728px;
-  max-height: 90%;
-  margin: auto;
-  overflow: hidden;
-  color: #000;
-  background-color: #fff;
-  border-radius: 2px;
-  transform: scale(0.95);
-  opacity: 0;
-  transition-duration: .3s;
-  transition-property: transform, opacity, visibility;
-  will-change: top, opacity, transform;
-
-  @media (min-width: @screen-sm-min) {
-    width: 85%;
-    max-height: 85%;
-  }
-  @media (min-width: @screen-md-min) {
-    width: 80%;
-    max-height: 80%;
-  }
-
-  .mdui-shadow(24);
-}
-
-/* 打开提示框 */
-.mdui-dialog-open {
-  transform: scale(1);
-  opacity: 1;
-}
-
-/* 提示框标题 */
-.mdui-dialog-title {
-  box-sizing: border-box;
-  font-weight: 500;
-  font-size: 20px;
-  line-height: 24px;
-  text-align: left;
-}
-
-/* 标题固定在顶部 */
-.mdui-dialog>.mdui-dialog-title {
-  padding: 24px 24px 20px 24px;
-}
-
-/* 提示框内容 */
-.mdui-dialog-content {
-  box-sizing: border-box;
-  padding: 24px;
-  overflow-y: auto;
-  color: rgba(0, 0, 0, 0.7);
-  font-size: 15px;
-  line-height: 1.5;
-  -webkit-overflow-scrolling: touch;
-}
-
-/* 标题随内容滚动 */
-.mdui-dialog-content>.mdui-dialog-title {
-  padding-bottom: 20px;
-}
-
-.mdui-dialog-title + .mdui-dialog-content {
-  padding-top: 0;
-}
-
-/* 提示框底部按钮 */
-.mdui-dialog-actions {
-  box-sizing: border-box;
-  padding: 8px;
-  text-align: right;
-  .mdui-btn {
-    min-width: 64px;
-    margin-left: 8px;
-    .mdui-text-color(@color-accent-default-name);
-    &:first-child {
-      margin-left: 0;
-    }
-  }
-}
-
-/* 底部按钮滚随内容动 */
-.mdui-dialog-content>.mdui-dialog-actions {
-  margin: 0 -24px -24px -24px;
-  padding-top: 32px;
-}
-
-/* 使提示框底部按钮竖排 */
-.mdui-dialog-actions-stacked {
-  padding: 8px 0 8px 0;
-  .mdui-btn {
-    width: 100%;
-    height: 48px;
-    margin: 0;
-    line-height: 48px !important;
-    text-align: right;
-    border-radius: 0;
-  }
-}
-
-
-/**
- * =============================================================================
- * ************   Dialog 强调色   ************
- * =============================================================================
- */
-& {
-  .loop-accent-theme(@counter-color) when (@counter-color > 0) {
-    .loop-accent-theme((@counter-color - 1));
-    @colorName: extract(@globalAccentColors, @counter-color);
-
-    .mdui-theme-accent-@{colorName} when not (@colorName = null) {
-      .mdui-dialog-actions {
-        .mdui-btn {
-          .mdui-text-color(@colorName);
-        }
-      }
-    }
-
-  }
-  .loop-accent-theme(length(@globalAccentColors));
-}
-
-
-/**
- * =============================================================================
- * ************   Dialog dark   ************
- * =============================================================================
- */
-.layout-theme({
-  .mdui-dialog {
-    color: #fff;
-    background-color: @layout-dark-color-4;
-  }
-  .mdui-dialog-content {
-    color: rgba(255, 255, 255, 0.7);
-  }
-});

package/src/components/dialog/index.ts

@@ -1,40 +0,0 @@
-import Selector from 'mdui.jq/es/types/Selector';
-import mdui from '../../mdui';
-import 'mdui.jq/es/methods/on';
-import { $document } from '../../utils/dom';
-import { currentInst, OPTIONS, Dialog } from './class';
-
-declare module '../../interfaces/MduiStatic' {
-  interface MduiStatic {
-    /**
-     * Dialog 组件
-     *
-     * 请通过 `new mdui.Dialog()` 调用
-     */
-    Dialog: {
-      /**
-       * 实例化 Dialog 组件
-       * @param selector CSS 选择器、或 DOM 元素、或 JQ 对象
-       * @param options 配置参数
-       */
-      new (
-        selector: Selector | HTMLElement | ArrayLike<HTMLElement>,
-        options?: OPTIONS,
-      ): Dialog;
-    };
-  }
-}
-
-// esc 按下时关闭对话框
-$document.on('keydown', (event: Event) => {
-  if (
-    currentInst &&
-    currentInst.options.closeOnEsc &&
-    currentInst.state === 'opened' &&
-    (event as KeyboardEvent).keyCode === 27
-  ) {
-    currentInst.close();
-  }
-});
-
-mdui.Dialog = Dialog;

package/src/components/dialog/prompt.less

@@ -1,16 +0,0 @@
-/**
- * =============================================================================
- * ************   Dialog prompt   ************
- * =============================================================================
- */
-
-@import '../textfield/index';
-@import './index';
-
-.mdui-dialog-prompt {
-  max-width: 448px;
-
-  .mdui-textfield {
-    padding-top: 0;
-  }
-}

package/src/components/dialog/prompt.ts

@@ -1,231 +0,0 @@
-import extend from 'mdui.jq/es/functions/extend';
-import 'mdui.jq/es/methods/find';
-import 'mdui.jq/es/methods/on';
-import 'mdui.jq/es/methods/val';
-import { isFunction, isUndefined } from 'mdui.jq/es/utils';
-import mdui from '../../mdui';
-import '../textfield';
-import { Dialog } from './class';
-import './dialog';
-
-declare module '../../interfaces/MduiStatic' {
-  interface MduiStatic {
-    /**
-     * 打开一个提示用户输入的对话框，可以包含标题、文本框标签、文本框、一个确认按钮和一个取消按钮
-     * @param label 文本框浮动标签的文本
-     * @param title 标题
-     * @param onConfirm 点击确认按钮的回调。含两个参数，分别为文本框的值和对话框实例
-     * @param onCancel 点击取消按钮的回调。含两个参数，分别为文本框的值和对话框实例
-     * @param options 配置参数
-     */
-    prompt(
-      label: string,
-      title: string,
-      onConfirm?: (value: string, dialog: Dialog) => void,
-      onCancel?: (value: string, dialog: Dialog) => void,
-      options?: OPTIONS,
-    ): Dialog;
-
-    /**
-     * 打开一个提示用户输入的对话框，可以包含文本框标签、文本框、一个确认按钮和一个取消按钮
-     * @param label 文本框浮动标签的文本
-     * @param onConfirm 点击确认按钮的回调。含两个参数，分别为文本框的值和对话框实例
-     * @param onCancel 点击取消按钮的回调，含两个参数，分别为文本框的值和对话框实例
-     * @param options 配置参数
-     */
-    prompt(
-      label: string,
-      onConfirm?: (value: string, dialog: Dialog) => void,
-      onCancel?: (value: string, dialog: Dialog) => void,
-      options?: OPTIONS,
-    ): Dialog;
-  }
-}
-
-type OPTIONS = {
-  /**
-   * 确认按钮的文本
-   */
-  confirmText?: string;
-
-  /**
-   * 取消按钮的文本
-   */
-  cancelText?: string;
-
-  /**
-   * 是否监听 hashchange 事件，为 `true` 时可以通过 Android 的返回键或浏览器后退按钮关闭对话框，默认为 `true`
-   */
-  history?: boolean;
-
-  /**
-   * 是否模态化对话框。为 `false` 时点击对话框外面的区域时关闭对话框，否则不关闭，默认为 `false`
-   */
-  modal?: boolean;
-
-  /**
-   * 是否在按下 Esc 键时是否关闭对话框，默认为 `true`
-   */
-  closeOnEsc?: boolean;
-
-  /**
-   * 是否在按下取消按钮时是否关闭对话框
-   */
-  closeOnCancel?: boolean;
-
-  /**
-   * 是否在按下确认按钮时是否关闭对话框
-   */
-  closeOnConfirm?: boolean;
-
-  /**
-   * 是否在按下 Enter 键时触发 `onConfirm` 回调函数，默认为 `false`
-   */
-  confirmOnEnter?: boolean;
-
-  /**
-   * 文本框的类型。`text`: 单行文本框； `textarea`: 多行文本框
-   */
-  type?: 'text' | 'textarea';
-
-  /**
-   * 最大输入字符数量，为 0 时表示不限制
-   */
-  maxlength?: number;
-
-  /**
-   * 文本框的默认值
-   */
-  defaultValue?: string;
-};
-
-const DEFAULT_OPTIONS: OPTIONS = {
-  confirmText: 'ok',
-  cancelText: 'cancel',
-  history: true,
-  modal: false,
-  closeOnEsc: true,
-  closeOnCancel: true,
-  closeOnConfirm: true,
-  type: 'text',
-  maxlength: 0,
-  defaultValue: '',
-  confirmOnEnter: false,
-};
-
-mdui.prompt = function (
-  label: string,
-  title?: any,
-  onConfirm?: any,
-  onCancel?: any,
-  options?: any,
-): Dialog {
-  if (isFunction(title)) {
-    options = onCancel;
-    onCancel = onConfirm;
-    onConfirm = title;
-    title = '';
-  }
-
-  if (isUndefined(onConfirm)) {
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
-    onConfirm = (): void => {};
-  }
-
-  if (isUndefined(onCancel)) {
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
-    onCancel = (): void => {};
-  }
-
-  if (isUndefined(options)) {
-    options = {};
-  }
-
-  options = extend({}, DEFAULT_OPTIONS, options);
-
-  const content =
-    '<div class="mdui-textfield">' +
-    (label ? `<label class="mdui-textfield-label">${label}</label>` : '') +
-    (options.type === 'text'
-      ? `<input class="mdui-textfield-input" type="text" value="${
-          options.defaultValue
-        }" ${
-          options.maxlength ? 'maxlength="' + options.maxlength + '"' : ''
-        }/>`
-      : '') +
-    (options.type === 'textarea'
-      ? `<textarea class="mdui-textfield-input" ${
-          options.maxlength ? 'maxlength="' + options.maxlength + '"' : ''
-        }>${options.defaultValue}</textarea>`
-      : '') +
-    '</div>';
-
-  const onCancelClick = (dialog: Dialog): void => {
-    const value = dialog.$element.find('.mdui-textfield-input').val();
-    onCancel(value, dialog);
-  };
-
-  const onConfirmClick = (dialog: Dialog): void => {
-    const value = dialog.$element.find('.mdui-textfield-input').val();
-    onConfirm(value, dialog);
-  };
-
-  return mdui.dialog({
-    title,
-    content,
-    buttons: [
-      {
-        text: options.cancelText,
-        bold: false,
-        close: options.closeOnCancel,
-        onClick: onCancelClick,
-      },
-      {
-        text: options.confirmText,
-        bold: false,
-        close: options.closeOnConfirm,
-        onClick: onConfirmClick,
-      },
-    ],
-    cssClass: 'mdui-dialog-prompt',
-    history: options.history,
-    modal: options.modal,
-    closeOnEsc: options.closeOnEsc,
-    onOpen: (dialog) => {
-      // 初始化输入框
-      const $input = dialog.$element.find('.mdui-textfield-input');
-      mdui.updateTextFields($input);
-
-      // 聚焦到输入框
-      $input[0].focus();
-
-      // 捕捉文本框回车键，在单行文本框的情况下触发回调
-      if (options.type !== 'textarea' && options.confirmOnEnter === true) {
-        $input.on('keydown', (event) => {
-          if ((event as KeyboardEvent).keyCode === 13) {
-            const value = dialog.$element.find('.mdui-textfield-input').val();
-            onConfirm(value, dialog);
-
-            if (options.closeOnConfirm) {
-              dialog.close();
-            }
-
-            return false;
-          }
-
-          return;
-        });
-      }
-
-      // 如果是多行输入框，监听输入框的 input 事件，更新对话框高度
-      if (options.type === 'textarea') {
-        $input.on('input', () => dialog.handleUpdate());
-      }
-
-      // 有字符数限制时，加载完文本框后 DOM 会变化，需要更新对话框高度
-      if (options.maxlength) {
-        dialog.handleUpdate();
-      }
-    },
-  });
-};