evui 2.1.0 → 2.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "evui",
-  "version": "2.1.0",
+  "version": "2.1.3",
   "description": "A EXEM Library project",
   "author": "exem <dev_client@ex-em.com>",
   "license": "MIT",
@@ -11,11 +11,11 @@
     "test": "npm run unit",
     "lint": "eslint --ext .js,.vue src test/unit",
     "build": "webpack --config build/webpack.prod.conf.js",
-    "home": "webpack-dev-server --progress --config build/webpack.home.conf.js --mode=development",
-    "home_build": "webpack --config build/webpack.home.conf.js --mode=production",
-    "maxgauge": "webpack-dev-server --progress --config build/webpack.maxgauge.conf.js",
-    "liteplus": "webpack-dev-server --progress --config build/webpack.liteplus.conf.js",
-    "liteplus_build": "webpack --config build/webpack.liteplus.conf.js --mode=production"
+    "docs": "webpack-dev-server --progress --config build/webpack.docs.conf.js --mode=development",
+    "docs_build": "webpack --config build/webpack.docs.conf.js --mode=production",
+    "pub:patch": "npm version patch --no-git-tag-version",
+    "pub:minor": "npm version minor --no-git-tag-version",
+    "pub:major": "npm version major --no-git-tag-version"
   },
   "main": "dist/evui.min.js",
   "module": "dist/evui.min.js",
@@ -39,87 +39,67 @@
     "EVUI"
   ],
   "dependencies": {
-    "axios": "^0.18.0",
-    "lodash": "^4.17.11",
-    "lodash-es": "^4.17.11",
-    "vue": "^2.6.9",
-    "vue-resize-directive": "^1.2.0",
-    "vue-router": "^3.0.2",
-    "vuex": "^3.1.0"
+    "lodash": "^4.17.15",
+    "lodash-es": "^4.17.15",
+    "vue": "^2.6.11",
+    "vue-i18n": "^8.15.6",
+    "vue-observe-visibility": "^0.4.6",
+    "vue-resize-directive": "^1.2.0"
   },
   "devDependencies": {
-    "acorn": "^6.1.1",
-    "babel-core": "^6.26.3",
-    "babel-eslint": "^8.2.6",
-    "babel-helper-vue-jsx-merge-props": "^2.0.3",
-    "babel-loader": "^7.1.5",
-    "babel-plugin-istanbul": "^5.1.1",
-    "babel-plugin-syntax-dynamic-import": "^6.18.0",
-    "babel-plugin-syntax-jsx": "^6.18.0",
-    "babel-plugin-transform-runtime": "^6.22.0",
-    "babel-plugin-transform-vue-jsx": "^3.7.0",
-    "babel-polyfill": "^6.26.0",
-    "babel-preset-env": "^1.7.0",
-    "babel-preset-stage-2": "^6.22.0",
-    "chai": "^3.5.0",
-    "clean-webpack-plugin": "^2.0.1",
-    "compression-webpack-plugin": "^2.0.0",
-    "copy-webpack-plugin": "^5.0.1",
-    "cross-env": "^5.2.0",
-    "css-loader": "^2.1.1",
-    "eslint": "4.16.0",
-    "eslint-config-airbnb-base": "^11.3.0",
-    "eslint-friendly-formatter": "^3.0.0",
-    "eslint-import-resolver-webpack": "^0.8.3",
-    "eslint-loader": "^2.1.2",
-    "eslint-plugin-html": "^4.0.6",
-    "eslint-plugin-import": "^2.16.0",
-    "eslint-plugin-vue": "^4.7.1",
-    "file-loader": "^3.0.1",
+    "@babel/core": "^7.9.0",
+    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+    "@babel/plugin-transform-runtime": "^7.9.0",
+    "@babel/preset-env": "^7.9.0",
+    "axios": "^0.19.2",
+    "babel-eslint": "^10.1.0",
+    "babel-loader": "^8.1.0",
+    "clean-webpack-plugin": "^3.0.0",
+    "codesandbox": "^2.1.12",
+    "compression-webpack-plugin": "^3.1.0",
+    "copy-webpack-plugin": "^5.1.1",
+    "css-loader": "^3.4.2",
+    "eslint": "^6.8.0",
+    "eslint-config-airbnb-base": "^14.1.0",
+    "eslint-formatter-friendly": "^7.0.0",
+    "eslint-import-resolver-webpack": "^0.12.1",
+    "eslint-loader": "^3.0.3",
+    "eslint-plugin-import": "^2.20.1",
+    "eslint-plugin-vue": "^6.2.2",
+    "file-loader": "^6.0.0",
     "friendly-errors-webpack-plugin": "^1.7.0",
-    "html-loader": "^0.5.5",
-    "html-webpack-plugin": "^3.2.0",
-    "karma": "^4.0.1",
-    "karma-coverage": "^1.1.2",
-    "karma-mocha": "^1.3.0",
-    "karma-phantomjs-launcher": "^1.0.2",
-    "karma-phantomjs-shim": "^1.4.0",
-    "karma-sinon-chai": "^1.3.4",
-    "karma-sourcemap-loader": "^0.3.7",
-    "karma-spec-reporter": "0.0.31",
-    "karma-webpack": "^3.0.5",
-    "mini-css-extract-plugin": "^0.5.0",
-    "mocha": "^5.2.0",
+    "highlight.js": "^9.18.1",
+    "html-loader": "^1.0.0",
+    "html-webpack-plugin": "^4.0.1",
+    "marked": "^0.8.2",
+    "mini-css-extract-plugin": "^0.9.0",
     "moment": "^2.24.0",
-    "ora": "^1.4.0",
-    "postcss-import": "^11.1.0",
-    "postcss-loader": "^2.1.6",
-    "postcss-url": "^7.3.2",
-    "shelljs": "^0.7.6",
-    "sinon": "^4.5.0",
-    "sinon-chai": "^2.9.0",
-    "style-loader": "^0.21.0",
-    "url-loader": "^1.1.2",
+    "node-sass": "^4.13.1",
+    "sass": "^1.26.3",
+    "sass-loader": "^8.0.2",
+    "style-loader": "^1.1.3",
+    "stylelint": "^13.2.1",
+    "stylelint-formatter-pretty": "^2.0.0",
+    "stylelint-webpack-plugin": "^1.2.3",
+    "url-loader": "^4.0.0",
     "vue-codemirror-lite": "^1.0.4",
-    "vue-loader": "^15.7.0",
-    "vue-style-loader": "^3.1.2",
-    "vue-template-compiler": "^2.6.9",
-    "vue-test-utils": "^1.0.0-beta.11",
-    "webpack": "^4.29.6",
-    "webpack-bundle-analyzer": "^2.13.1",
-    "webpack-cli": "^3.3.0",
-    "webpack-dev-server": "^3.2.1",
-    "webpack-merge": "^4.2.1",
-    "worker-loader": "^2.0.0"
+    "vue-loader": "^15.9.1",
+    "vue-router": "^3.1.6",
+    "vue-style-loader": "^4.1.2",
+    "vue-template-compiler": "^2.6.11",
+    "webpack": "^4.42.1",
+    "webpack-cli": "^3.3.11",
+    "webpack-dev-server": "^3.10.3",
+    "webpack-merge": "^4.2.2"
   },
   "engines": {
-    "node": ">= 6.0.0",
-    "npm": ">= 3.0.0",
+    "node": ">= 8.0.0",
+    "npm": ">= 5.0.0",
     "webpack": ">=4.0.0"
   },
   "browserslist": [
     "> 1%",
     "last 2 versions",
-    "not ie <= 8"
+    "not ie <= 10"
   ]
 }

package/src/common/emitter.js

@@ -0,0 +1,20 @@
+export default {
+  methods: {
+    dispatch(componentName, eventName, params) {
+      let parent = this.$parent || this.$root;
+      let name = parent.$options.name;
+
+      while (parent && (!name || name !== componentName)) {
+        parent = parent.$parent;
+
+        if (parent) {
+          name = parent.$options.name;
+        }
+      }
+      if (parent) {
+        // eslint-disable-next-line prefer-spread
+        parent.$emit.apply(parent, [eventName].concat(params));
+      }
+    },
+  },
+};

package/src/common/utils.debounce.js

@@ -0,0 +1,223 @@
+/**
+ * Original Code
+ * https://github.com/lodash/lodash/blob/es/debounce.js
+ * lodash/debounce.js
+ */
+
+function isObject(value) {
+  const type = typeof value;
+  return value != null && (type === 'object' || type === 'function');
+}
+
+/**
+ * Creates a debounced function that delays invoking `func` until after `wait`
+ * milliseconds have elapsed since the last time the debounced function was
+ * invoked, or until the next browser frame is drawn. The debounced function
+ * comes with a `cancel` method to cancel delayed `func` invocations and a
+ * `flush` method to immediately invoke them. Provide `options` to indicate
+ * whether `func` should be invoked on the leading and/or trailing edge of the
+ * `wait` timeout. The `func` is invoked with the last arguments provided to the
+ * debounced function. Subsequent calls to the debounced function return the
+ * result of the last `func` invocation.
+ *
+ * **Note:** If `leading` and `trailing` options are `true`, `func` is
+ * invoked on the trailing edge of the timeout only if the debounced function
+ * is invoked more than once during the `wait` timeout.
+ *
+ * If `wait` is `0` and `leading` is `false`, `func` invocation is deferred
+ * until the next tick, similar to `setTimeout` with a timeout of `0`.
+ *
+ * If `wait` is omitted in an environment with `requestAnimationFrame`, `func`
+ * invocation will be deferred until the next frame is drawn (typically about
+ * 16ms).
+ *
+ * See [David Corbacho's article](https://css-tricks.com/debouncing-throttling-explained-examples/)
+ * for details over the differences between `debounce` and `throttle`.
+ *
+ * @since 0.1.0
+ * @category Function
+ * @param {Function} func The function to debounce.
+ * @param {number} [wait=0]
+ *  The number of milliseconds to delay; if omitted, `requestAnimationFrame` is
+ *  used (if available).
+ * @param {Object} [options={}] The options object.
+ * @param {boolean} [options.leading=false]
+ *  Specify invoking on the leading edge of the timeout.
+ * @param {number} [options.maxWait]
+ *  The maximum time `func` is allowed to be delayed before it's invoked.
+ * @param {boolean} [options.trailing=true]
+ *  Specify invoking on the trailing edge of the timeout.
+ * @returns {Function} Returns the new debounced function.
+ * @example
+ *
+ * // Avoid costly calculations while the window size is in flux.
+ * jQuery(window).on('resize', debounce(calculateLayout, 150))
+ *
+ * // Invoke `sendMail` when clicked, debouncing subsequent calls.
+ * jQuery(element).on('click', debounce(sendMail, 300, {
+ *   'leading': true,
+ *   'trailing': false
+ * }))
+ *
+ * // Ensure `batchLog` is invoked once after 1 second of debounced calls.
+ * const debounced = debounce(batchLog, 250, { 'maxWait': 1000 })
+ * const source = new EventSource('/stream')
+ * jQuery(source).on('message', debounced)
+ *
+ * // Cancel the trailing debounced invocation.
+ * jQuery(window).on('popstate', debounced.cancel)
+ *
+ * // Check for pending invocations.
+ * const status = debounced.pending() ? "Pending..." : "Ready"
+ */
+/* eslint-disable */
+function debounce(func, wait, options) {
+  let lastArgs,
+    lastThis,
+    maxWait,
+    result,
+    timerId,
+    lastCallTime
+
+  let lastInvokeTime = 0
+  let leading = false
+  let maxing = false
+  let trailing = true
+
+  // Bypass `requestAnimationFrame` by explicitly setting `wait=0`.
+  const useRAF = (!wait && wait !== 0 && typeof root.requestAnimationFrame === 'function')
+
+  if (typeof func !== 'function') {
+    throw new TypeError('Expected a function')
+  }
+  wait = +wait || 0
+  if (isObject(options)) {
+    leading = !!options.leading
+    maxing = 'maxWait' in options
+    maxWait = maxing ? Math.max(+options.maxWait || 0, wait) : maxWait
+    trailing = 'trailing' in options ? !!options.trailing : trailing
+  }
+
+  function invokeFunc(time) {
+    const args = lastArgs
+    const thisArg = lastThis
+
+    lastArgs = lastThis = undefined
+    lastInvokeTime = time
+    result = func.apply(thisArg, args)
+    return result
+  }
+
+  function startTimer(pendingFunc, wait) {
+    if (useRAF) {
+      window.cancelAnimationFrame(timerId)
+      return window.requestAnimationFrame(pendingFunc)
+    }
+    return setTimeout(pendingFunc, wait)
+  }
+
+  function cancelTimer(id) {
+    if (useRAF) {
+      return window.cancelAnimationFrame(id)
+    }
+    clearTimeout(id)
+  }
+
+  function leadingEdge(time) {
+    // Reset any `maxWait` timer.
+    lastInvokeTime = time
+    // Start the timer for the trailing edge.
+    timerId = startTimer(timerExpired, wait)
+    // Invoke the leading edge.
+    return leading ? invokeFunc(time) : result
+  }
+
+  function remainingWait(time) {
+    const timeSinceLastCall = time - lastCallTime
+    const timeSinceLastInvoke = time - lastInvokeTime
+    const timeWaiting = wait - timeSinceLastCall
+
+    return maxing
+      ? Math.min(timeWaiting, maxWait - timeSinceLastInvoke)
+      : timeWaiting
+  }
+
+  function shouldInvoke(time) {
+    const timeSinceLastCall = time - lastCallTime
+    const timeSinceLastInvoke = time - lastInvokeTime
+
+    // Either this is the first call, activity has stopped and we're at the
+    // trailing edge, the system time has gone backwards and we're treating
+    // it as the trailing edge, or we've hit the `maxWait` limit.
+    return (lastCallTime === undefined || (timeSinceLastCall >= wait) ||
+      (timeSinceLastCall < 0) || (maxing && timeSinceLastInvoke >= maxWait))
+  }
+
+  function timerExpired() {
+    const time = Date.now()
+    if (shouldInvoke(time)) {
+      return trailingEdge(time)
+    }
+    // Restart the timer.
+    timerId = startTimer(timerExpired, remainingWait(time))
+  }
+
+  function trailingEdge(time) {
+    timerId = undefined
+
+    // Only invoke if we have `lastArgs` which means `func` has been
+    // debounced at least once.
+    if (trailing && lastArgs) {
+      return invokeFunc(time)
+    }
+    lastArgs = lastThis = undefined
+    return result
+  }
+
+  function cancel() {
+    if (timerId !== undefined) {
+      cancelTimer(timerId)
+    }
+    lastInvokeTime = 0
+    lastArgs = lastCallTime = lastThis = timerId = undefined
+  }
+
+  function flush() {
+    return timerId === undefined ? result : trailingEdge(Date.now())
+  }
+
+  function pending() {
+    return timerId !== undefined
+  }
+
+  function debounced(...args) {
+    const time = Date.now()
+    const isInvoking = shouldInvoke(time)
+
+    lastArgs = args
+    lastThis = this
+    lastCallTime = time
+
+    if (isInvoking) {
+      if (timerId === undefined) {
+        return leadingEdge(lastCallTime)
+      }
+      if (maxing) {
+        // Handle invocations in a tight loop.
+        timerId = startTimer(timerExpired, wait)
+        return invokeFunc(lastCallTime)
+      }
+    }
+    if (timerId === undefined) {
+      timerId = startTimer(timerExpired, wait)
+    }
+    return result
+  }
+  debounced.cancel = cancel
+  debounced.flush = flush
+  debounced.pending = pending
+  return debounced
+}
+
+export default debounce
+/* eslint-enable */

package/src/common/utils.js

@@ -21,24 +21,21 @@ export const Console = {
 };
 
 export function getQuantity(input) {
-  let output;
+  let output = null;
   if (typeof input === 'string' || typeof input === 'number') {
-    const match = (/^(normal|(-*\d+(?:\.\d+)?)(px|%)?)$/).exec(input);
+    const match = /^(normal|(-*\d+(?:\.\d+)?)(px|%)?)$/.exec(input);
     output = match ? { value: +match[2], unit: match[3] || undefined } : null;
-  } else {
-    output = null;
   }
+
   return output;
 }
 
 export function getSize(size) {
-  let sizeValue;
-
+  let sizeValue = '100%';
   if (size) {
     sizeValue = size.unit ? size.value + size.unit : `${size.value}px`;
-  } else {
-    sizeValue = '100%';
   }
+
   return sizeValue;
 }
 
@@ -46,7 +43,7 @@ export function getMatchedComponentsDownward(context, componentName) {
   const children = context.$children;
   const result = [];
   if (!children) {
-    return [];
+    return result;
   }
   for (let i = 0; i < children.length; i++) {
     const v = children[i];
@@ -74,22 +71,59 @@ export function getMatchedComponentUpward(context, componentName) {
   return parent;
 }
 
+export function truthyNumber(v) {
+  return typeof v === 'number' && !Number.isNaN(v);
+}
+
+export function truthy(...args) {
+  return args.every(truthyNumber);
+}
+
 export function convertToPercent(value, totalValue) {
-  if (!value || !totalValue) {
+  const res = (value / totalValue) * 100;
+  if (!truthy(value, totalValue, res) || value === 0 || totalValue === 0) {
     return 0;
   }
 
-  return +((value / totalValue) * 100).toFixed(2);
+  return res.toFixed(2);
 }
 
 export function convertToValue(value, totalValue) {
-  let result = 0;
-
-  if (!value || !totalValue) {
-    return result;
+  const res = (value / 100) * totalValue;
+  if (!truthy(value, totalValue, res) || value === 0 || totalValue === 0) {
+    return 0;
   }
 
-  result = (value / 100) * totalValue;
+  return res.toFixed(2);
+}
+
+export function millions(v) {
+  return truthy(v) ? 1e6 * v : 0;
+}
+
+export function billions(v) {
+  return truthy(v) ? 1e9 * v : 0;
+}
+
+export function trillion(v) {
+  return truthy(v) ? 1e12 * v : 0;
+}
+
+export function quadrillion(v) {
+  return truthy(v) ? 1e15 * v : 0;
+}
+
+export function numberWithComma(v) {
+  const reg = /\B(?=(\d{3})+(?!\d))/g;
+
+  if (truthy(v)) {
+    if (Number.isInteger(v)) {
+      return v.toString().replace(reg, ',');
+    }
+
+    const part = v.toString().split('.');
+    return part[0].replace(reg, ',') + (part[1] ? `.${part[1]}` : '');
+  }
 
-  return +result.toFixed(2);
+  return false;
 }

package/src/common/utils.throttle.js

@@ -0,0 +1,83 @@
+import debounce from './utils.debounce';
+
+/**
+ * Original Code
+ * https://github.com/lodash/lodash/blob/es/throttle.js
+ * lodash/throttle.js
+ */
+
+function isObject(value) {
+  const type = typeof value;
+  return value != null && (type === 'object' || type === 'function');
+}
+
+/** Error message constants. */
+const FUNC_ERROR_TEXT = 'Expected a function';
+
+/**
+ * Creates a throttled function that only invokes `func` at most once per
+ * every `wait` milliseconds. The throttled function comes with a `cancel`
+ * method to cancel delayed `func` invocations and a `flush` method to
+ * immediately invoke them. Provide `options` to indicate whether `func`
+ * should be invoked on the leading and/or trailing edge of the `wait`
+ * timeout. The `func` is invoked with the last arguments provided to the
+ * throttled function. Subsequent calls to the throttled function return the
+ * result of the last `func` invocation.
+ *
+ * **Note:** If `leading` and `trailing` options are `true`, `func` is
+ * invoked on the trailing edge of the timeout only if the throttled function
+ * is invoked more than once during the `wait` timeout.
+ *
+ * If `wait` is `0` and `leading` is `false`, `func` invocation is deferred
+ * until to the next tick, similar to `setTimeout` with a timeout of `0`.
+ *
+ * See [David Corbacho's article](https://css-tricks.com/debouncing-throttling-explained-examples/)
+ * for details over the differences between `_.throttle` and `_.debounce`.
+ *
+ * @static
+ * @memberOf _
+ * @since 0.1.0
+ * @category Function
+ * @param {Function} func The function to throttle.
+ * @param {number} [wait=0] The number of milliseconds to throttle invocations to.
+ * @param {Object} [options={}] The options object.
+ * @param {boolean} [options.leading=true]
+ *  Specify invoking on the leading edge of the timeout.
+ * @param {boolean} [options.trailing=true]
+ *  Specify invoking on the trailing edge of the timeout.
+ * @returns {Function} Returns the new throttled function.
+ * @example
+ *
+ * // Avoid excessively updating the position while scrolling.
+ * jQuery(window).on('scroll', _.throttle(updatePosition, 100));
+ *
+ * // Invoke `renewToken` when the click event is fired, but not more than once every 5 minutes.
+ * var throttled = _.throttle(renewToken, 300000, { 'trailing': false });
+ * jQuery(element).on('click', throttled);
+ *
+ * // Cancel the trailing throttled invocation.
+ * jQuery(window).on('popstate', throttled.cancel);
+ */
+/* eslint-disable */
+function throttle(func, wait, options) {
+  let leading = true;
+  let trailing = true;
+
+  if (typeof func != 'function') {
+    throw new TypeError(FUNC_ERROR_TEXT);
+  }
+
+  if (isObject(options)) {
+    leading = 'leading' in options ? !!options.leading : leading;
+    trailing = 'trailing' in options ? !!options.trailing : trailing;
+  }
+
+  return debounce(func, wait, {
+    'leading': leading,
+    'maxWait': wait,
+    'trailing': trailing
+  });
+}
+
+export default throttle;
+/* eslint-enable */

package/src/common/utils.tree.js

@@ -0,0 +1,18 @@
+function findComponentUpward(context, componentName, componentNames) {
+  let componentNamesTemp = componentNames;
+  if (typeof componentName === 'string') {
+    componentNamesTemp = [componentName];
+  } else {
+    componentNamesTemp = componentName;
+  }
+
+  let parent = context.$parent;
+  let name = parent.$options.name;
+  while (parent && (!name || componentNamesTemp.indexOf(name) < 0)) {
+    parent = parent.$parent;
+    if (parent) name = parent.$options.name;
+  }
+  return parent;
+}
+// eslint-disable-next-line import/prefer-default-export
+export { findComponentUpward };