mdui 1.0.2 → 2.0.0

package/src/styles/variable/shadow.less

@@ -1,103 +0,0 @@
-// 阴影
-@shadow-key-umbra-opacity: 0.2;
-@shadow-key-penumbra-opacity: 0.14;
-@shadow-ambient-shadow-opacity: 0.12;
-
-
-@shadow-depth-0: none;
-
-@shadow-depth-1: 0 2px 1px -1px rgba(0, 0, 0, @shadow-key-umbra-opacity),
-0 1px 1px 0 rgba(0, 0, 0, @shadow-key-penumbra-opacity),
-0 1px 3px 0 rgba(0, 0, 0, @shadow-ambient-shadow-opacity);
-
-@shadow-depth-2: 0 3px 1px -2px rgba(0, 0, 0, @shadow-key-umbra-opacity),
-0 2px 2px 0 rgba(0, 0, 0, @shadow-key-penumbra-opacity),
-0 1px 5px 0 rgba(0, 0, 0, @shadow-ambient-shadow-opacity);
-
-@shadow-depth-3: 0 3px 3px -2px rgba(0, 0, 0, @shadow-key-umbra-opacity),
-0 3px 4px 0 rgba(0, 0, 0, @shadow-key-penumbra-opacity),
-0 1px 8px 0 rgba(0, 0, 0, @shadow-ambient-shadow-opacity);
-
-@shadow-depth-4: 0 2px 4px -1px rgba(0, 0, 0, @shadow-key-umbra-opacity),
-0 4px 5px 0 rgba(0, 0, 0, @shadow-key-penumbra-opacity),
-0 1px 10px 0 rgba(0, 0, 0, @shadow-ambient-shadow-opacity);
-
-@shadow-depth-5: 0 3px 5px -1px rgba(0, 0, 0, @shadow-key-umbra-opacity),
-0 5px 8px 0 rgba(0, 0, 0, @shadow-key-penumbra-opacity),
-0 1px 14px 0 rgba(0, 0, 0, @shadow-ambient-shadow-opacity);
-
-@shadow-depth-6: 0 3px 5px -1px rgba(0, 0, 0, @shadow-key-umbra-opacity),
-0 6px 10px 0 rgba(0, 0, 0, @shadow-key-penumbra-opacity),
-0 1px 18px 0 rgba(0, 0, 0, @shadow-ambient-shadow-opacity);
-
-@shadow-depth-7: 0 4px 5px -2px rgba(0, 0, 0, @shadow-key-umbra-opacity),
-0 7px 10px 1px rgba(0, 0, 0, @shadow-key-penumbra-opacity),
-0 2px 16px 1px rgba(0, 0, 0, @shadow-ambient-shadow-opacity);
-
-@shadow-depth-8: 0 5px 5px -3px rgba(0, 0, 0, @shadow-key-umbra-opacity),
-0 8px 10px 1px rgba(0, 0, 0, @shadow-key-penumbra-opacity),
-0 3px 14px 2px rgba(0, 0, 0, @shadow-ambient-shadow-opacity);
-
-@shadow-depth-9: 0 5px 6px -3px rgba(0, 0, 0, @shadow-key-umbra-opacity),
-0 9px 12px 1px rgba(0, 0, 0, @shadow-key-penumbra-opacity),
-0 3px 16px 2px rgba(0, 0, 0, @shadow-ambient-shadow-opacity);
-
-@shadow-depth-10: 0 6px 6px -3px rgba(0, 0, 0, @shadow-key-umbra-opacity),
-0 10px 14px 1px rgba(0, 0, 0, @shadow-key-penumbra-opacity),
-0 4px 18px 3px rgba(0, 0, 0, @shadow-ambient-shadow-opacity);
-
-@shadow-depth-11: 0 6px 7px -4px rgba(0, 0, 0, @shadow-key-umbra-opacity),
-0 11px 15px 1px rgba(0, 0, 0, @shadow-key-penumbra-opacity),
-0 4px 20px 3px rgba(0, 0, 0, @shadow-ambient-shadow-opacity);
-
-@shadow-depth-12: 0 7px 8px -4px rgba(0, 0, 0, @shadow-key-umbra-opacity),
-0 12px 17px 2px rgba(0, 0, 0, @shadow-key-penumbra-opacity),
-0 5px 22px 4px rgba(0, 0, 0, @shadow-ambient-shadow-opacity);
-
-@shadow-depth-13: 0 7px 8px -4px rgba(0, 0, 0, @shadow-key-umbra-opacity),
-0 13px 19px 2px rgba(0, 0, 0, @shadow-key-penumbra-opacity),
-0 5px 24px 4px rgba(0, 0, 0, @shadow-ambient-shadow-opacity);
-
-@shadow-depth-14: 0 7px 9px -4px rgba(0, 0, 0, @shadow-key-umbra-opacity),
-0 14px 21px 2px rgba(0, 0, 0, @shadow-key-penumbra-opacity),
-0 5px 26px 4px rgba(0, 0, 0, @shadow-ambient-shadow-opacity);
-
-@shadow-depth-15: 0 8px 9px -5px rgba(0, 0, 0, @shadow-key-umbra-opacity),
-0 15px 22px 2px rgba(0, 0, 0, @shadow-key-penumbra-opacity),
-0 6px 28px 5px rgba(0, 0, 0, @shadow-ambient-shadow-opacity);
-
-@shadow-depth-16: 0 8px 10px -5px rgba(0, 0, 0, @shadow-key-umbra-opacity),
-0 16px 24px 2px rgba(0, 0, 0, @shadow-key-penumbra-opacity),
-0 6px 30px 5px rgba(0, 0, 0, @shadow-ambient-shadow-opacity);
-
-@shadow-depth-17: 0 8px 11px -5px rgba(0, 0, 0, @shadow-key-umbra-opacity),
-0 17px 26px 2px rgba(0, 0, 0, @shadow-key-penumbra-opacity),
-0 6px 32px 5px rgba(0, 0, 0, @shadow-ambient-shadow-opacity);
-
-@shadow-depth-18: 0 9px 11px -5px rgba(0, 0, 0, @shadow-key-umbra-opacity),
-0 18px 28px 2px rgba(0, 0, 0, @shadow-key-penumbra-opacity),
-0 7px 34px 6px rgba(0, 0, 0, @shadow-ambient-shadow-opacity);
-
-@shadow-depth-19: 0 9px 12px -6px rgba(0, 0, 0, @shadow-key-umbra-opacity),
-0 19px 29px 2px rgba(0, 0, 0, @shadow-key-penumbra-opacity),
-0 7px 36px 6px rgba(0, 0, 0, @shadow-ambient-shadow-opacity);
-
-@shadow-depth-20: 0 10px 13px -6px rgba(0, 0, 0, @shadow-key-umbra-opacity),
-0 20px 31px 3px rgba(0, 0, 0, @shadow-key-penumbra-opacity),
-0 8px 38px 7px rgba(0, 0, 0, @shadow-ambient-shadow-opacity);
-
-@shadow-depth-21: 0 10px 13px -6px rgba(0, 0, 0, @shadow-key-umbra-opacity),
-0 21px 33px 3px rgba(0, 0, 0, @shadow-key-penumbra-opacity),
-0 8px 40px 7px rgba(0, 0, 0, @shadow-ambient-shadow-opacity);
-
-@shadow-depth-22: 0 10px 14px -6px rgba(0, 0, 0, @shadow-key-umbra-opacity),
-0 22px 35px 3px rgba(0, 0, 0, @shadow-key-penumbra-opacity),
-0 8px 42px 7px rgba(0, 0, 0, @shadow-ambient-shadow-opacity);
-
-@shadow-depth-23: 0 11px 14px -7px rgba(0, 0, 0, @shadow-key-umbra-opacity),
-0 23px 36px 3px rgba(0, 0, 0, @shadow-key-penumbra-opacity),
-0 9px 44px 8px rgba(0, 0, 0, @shadow-ambient-shadow-opacity);
-
-@shadow-depth-24: 0 11px 15px -7px rgba(0, 0, 0, @shadow-key-umbra-opacity),
-0 24px 38px 3px rgba(0, 0, 0, @shadow-key-penumbra-opacity),
-0 9px 46px 8px rgba(0, 0, 0, @shadow-ambient-shadow-opacity);

package/src/styles/variable.less

@@ -1,26 +0,0 @@
-@import './variable/global';
-@import './variable/color/black';
-@import './variable/color/white';
-@import './variable/color/transparent';
-@import './variable/color/red';
-@import './variable/color/pink';
-@import './variable/color/purple';
-@import './variable/color/deep-purple';
-@import './variable/color/indigo';
-@import './variable/color/blue';
-@import './variable/color/light-blue';
-@import './variable/color/cyan';
-@import './variable/color/teal';
-@import './variable/color/green';
-@import './variable/color/light-green';
-@import './variable/color/lime';
-@import './variable/color/yellow';
-@import './variable/color/amber';
-@import './variable/color/orange';
-@import './variable/color/deep-orange';
-@import './variable/color/brown';
-@import './variable/color/grey';
-@import './variable/color/blue-grey';
-@import './variable/color/default';
-@import './variable/animation';
-@import './variable/shadow';

package/src/tsconfig.json

@@ -1,12 +0,0 @@
-{
-  "extends": "../tsconfig",
-  "include": ["./"],
-  "compilerOptions": {
-    "declaration": true,
-    "declarationDir": "../es",
-    "module": "ES6",
-    "outDir": "../es",
-    "target": "ES6",
-    "typeRoots": []
-  }
-}

package/src/utils/componentEvent.ts

@@ -1,63 +0,0 @@
-import $ from 'mdui.jq/es/$';
-import { JQ } from 'mdui.jq/es/JQ';
-import PlainObject from 'mdui.jq/es/interfaces/PlainObject';
-import 'mdui.jq/es/methods/trigger';
-
-/**
- * 触发组件上的事件
- * @param eventName 事件名
- * @param componentName 组件名
- * @param target 在该元素上触发事件
- * @param instance 组件实例
- * @param parameters 事件参数
- */
-function componentEvent(
-  eventName: string,
-  componentName: string,
-  target: HTMLElement | HTMLElement[] | JQ,
-  instance?: any,
-  parameters?: PlainObject,
-): void {
-  if (!parameters) {
-    parameters = {};
-  }
-
-  // @ts-ignore
-  parameters.inst = instance;
-
-  const fullEventName = `${eventName}.mdui.${componentName}`;
-
-  // jQuery 事件
-  // @ts-ignore
-  if (typeof jQuery !== 'undefined') {
-    // @ts-ignore
-    jQuery(target).trigger(fullEventName, parameters);
-  }
-
-  const $target = $(target);
-
-  // mdui.jq 事件
-  $target.trigger(fullEventName, parameters);
-
-  // 原生事件，供使用 addEventListener 监听
-  type EventParams = {
-    detail?: any;
-    bubbles: boolean;
-    cancelable: boolean;
-  };
-
-  const eventParams: EventParams = {
-    bubbles: true,
-    cancelable: true,
-    detail: parameters,
-  };
-
-  const eventObject: CustomEvent = new CustomEvent(fullEventName, eventParams);
-
-  // @ts-ignore
-  eventObject._detail = parameters;
-
-  $target[0].dispatchEvent(eventObject);
-}
-
-export { componentEvent };

package/src/utils/dom.ts

@@ -1,7 +0,0 @@
-import $ from 'mdui.jq/es/$';
-
-const $document = $(document);
-const $window = $(window);
-const $body = $('body');
-
-export { $document, $window, $body };

package/src/utils/mutation.ts

@@ -1,41 +0,0 @@
-import PlainObject from 'mdui.jq/es/interfaces/PlainObject';
-import data from 'mdui.jq/es/functions/data';
-
-type TYPE_API_INIT = (
-  this: HTMLElement,
-  i: number,
-  element: HTMLElement,
-) => void;
-
-/**
- * CSS 选择器和初始化函数组成的对象
- */
-const entries: PlainObject<TYPE_API_INIT> = {};
-
-/**
- * 注册并执行初始化函数
- * @param selector CSS 选择器
- * @param apiInit 初始化函数
- * @param i 元素索引
- * @param element 元素
- */
-function mutation(
-  selector: string,
-  apiInit: TYPE_API_INIT,
-  i: number,
-  element: HTMLElement,
-): void {
-  let selectors = data(element, '_mdui_mutation');
-
-  if (!selectors) {
-    selectors = [];
-    data(element, '_mdui_mutation', selectors);
-  }
-
-  if (selectors.indexOf(selector) === -1) {
-    selectors.push(selector);
-    apiInit.call(element, i, element);
-  }
-}
-
-export { TYPE_API_INIT, entries, mutation };

package/src/utils/parseOptions.ts

@@ -1,23 +0,0 @@
-import $ from 'mdui.jq/es/$';
-import 'mdui.jq/es/methods/attr';
-import PlainObject from 'mdui.jq/es/interfaces/PlainObject';
-
-/**
- * 解析 DATA API 参数
- * @param element 元素
- * @param name 属性名
- */
-function parseOptions(element: HTMLElement, name: string): PlainObject {
-  const attr = $(element).attr(name);
-
-  if (!attr) {
-    return {};
-  }
-
-  return new Function(
-    '',
-    `var json = ${attr}; return JSON.parse(JSON.stringify(json));`,
-  )();
-}
-
-export { parseOptions };

package/src/utils/queue.ts

@@ -1,51 +0,0 @@
-import { isUndefined } from 'mdui.jq/es/utils';
-import PlainObject from 'mdui.jq/es/interfaces/PlainObject';
-
-type Func = () => any;
-
-const container: PlainObject<Func[]> = {};
-
-/**
- * 根据队列名，获取队列中所有函数
- * @param name 队列名
- */
-function queue(name: string): Func[];
-
-/**
- * 写入队列
- * @param name 队列名
- * @param func 函数
- */
-function queue(name: string, func: Func): void;
-
-function queue(name: string, func?: Func): void | Func[] {
-  if (isUndefined(container[name])) {
-    container[name] = [];
-  }
-
-  if (isUndefined(func)) {
-    return container[name];
-  }
-
-  container[name].push(func);
-}
-
-/**
- * 从队列中移除第一个函数，并执行该函数
- * @param name 队列满
- */
-function dequeue(name: string): void {
-  if (isUndefined(container[name])) {
-    return;
-  }
-
-  if (!container[name].length) {
-    return;
-  }
-
-  const func = container[name].shift()!;
-
-  func();
-}
-
-export { queue, dequeue };

package/src/utils/touchHandler.ts

@@ -1,92 +0,0 @@
-/**
- * touch 事件后的 500ms 内禁用 mousedown 事件
- *
- * 不支持触控的屏幕上事件顺序为 mousedown -> mouseup -> click
- * 支持触控的屏幕上事件顺序为 touchstart -> touchend -> mousedown -> mouseup -> click
- *
- * 在每一个事件中都使用 TouchHandler.isAllow(event) 判断事件是否可执行
- * 在 touchstart 和 touchmove、touchend、touchcancel
- *
- * (function () {
- *   $document
- *     .on(start, function (e) {
- *       if (!isAllow(e)) {
- *         return;
- *       }
- *       register(e);
- *       console.log(e.type);
- *     })
- *     .on(move, function (e) {
- *       if (!isAllow(e)) {
- *         return;
- *       }
- *       console.log(e.type);
- *     })
- *     .on(end, function (e) {
- *       if (!isAllow(e)) {
- *         return;
- *       }
- *       console.log(e.type);
- *     })
- *     .on(unlock, register);
- * })();
- */
-
-const startEvent = 'touchstart mousedown';
-const moveEvent = 'touchmove mousemove';
-const endEvent = 'touchend mouseup';
-const cancelEvent = 'touchcancel mouseleave';
-const unlockEvent = 'touchend touchmove touchcancel';
-
-let touches = 0;
-
-/**
- * 该事件是否被允许，在执行事件前调用该方法判断事件是否可以执行
- * 若已触发 touch 事件，则阻止之后的鼠标事件
- * @param event
- */
-function isAllow(event: Event): boolean {
-  return !(
-    touches &&
-    [
-      'mousedown',
-      'mouseup',
-      'mousemove',
-      'click',
-      'mouseover',
-      'mouseout',
-      'mouseenter',
-      'mouseleave',
-    ].indexOf(event.type) > -1
-  );
-}
-
-/**
- * 在 touchstart 和 touchmove、touchend、touchcancel 事件中调用该方法注册事件
- * @param event
- */
-function register(event: Event): void {
-  if (event.type === 'touchstart') {
-    // 触发了 touch 事件
-    touches += 1;
-  } else if (
-    ['touchmove', 'touchend', 'touchcancel'].indexOf(event.type) > -1
-  ) {
-    // touch 事件结束 500ms 后解除对鼠标事件的阻止
-    setTimeout(function () {
-      if (touches) {
-        touches -= 1;
-      }
-    }, 500);
-  }
-}
-
-export {
-  startEvent,
-  moveEvent,
-  endEvent,
-  cancelEvent,
-  unlockEvent,
-  isAllow,
-  register,
-};