zartui 0.1.21 → 0.1.25

package/es/uploader/index.less

@@ -1,163 +1,163 @@
-@import '../style/var';
-
-.zt-uploader {
-  position: relative;
-  display: inline-block;
-
-  &__wrapper {
-    display: flex;
-    flex-wrap: wrap;
-
-    &--disabled {
-      opacity: @uploader-disabled-opacity;
-    }
-  }
-
-  &__input {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    overflow: hidden; // to clip file-upload-button
-    cursor: pointer;
-    opacity: 0;
-
-    &-wrapper {
-      position: relative;
-    }
-
-    &:disabled {
-      cursor: not-allowed;
-    }
-  }
-
-  &__upload {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    box-sizing: border-box;
-    width: @uploader-size;
-    height: @uploader-size;
-    margin: 0 @padding-xs @padding-xs 0;
-    background-color: @uploader-upload-background-color;
-
-    &:active {
-      background-color: @uploader-upload-active-color;
-    }
-
-    &--readonly:active {
-      background-color: @uploader-upload-background-color;
-    }
-
-    &-icon {
-      color: @uploader-icon-color;
-      font-size: @uploader-icon-size;
-    }
-
-    &-text {
-      margin-top: @padding-xs;
-      color: @uploader-text-color;
-      font-size: @uploader-text-font-size;
-    }
-  }
-
-  &__preview {
-    position: relative;
-    margin: 0 @padding-xs @padding-xs 0;
-    cursor: pointer;
-
-    &-image {
-      display: block;
-      width: @uploader-size;
-      height: @uploader-size;
-      overflow: hidden;
-    }
-
-    &-delete {
-      position: absolute;
-      top: 0;
-      right: 0;
-      width: @uploader-delete-icon-size;
-      height: @uploader-delete-icon-size;
-      background-color: @uploader-delete-background-color;
-      border-radius: 0 0 0 12px;
-
-      &-icon {
-        position: absolute;
-        top: -2px;
-        right: -2px;
-        color: #fff;
-        color: @uploader-delete-color;
-        font-size: 16px;
-        transform: scale(0.5);
-      }
-    }
-
-    &-cover {
-      position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
-    }
-  }
-
-  &__mask {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    color: @white;
-    background-color: @uploader-mask-background-color;
-
-    &-icon {
-      font-size: @uploader-mask-icon-size;
-    }
-
-    &-message {
-      margin-top: 6px;
-      padding: 0 @padding-base;
-      font-size: @uploader-mask-message-font-size;
-      line-height: @uploader-mask-message-line-height;
-    }
-  }
-
-  &__loading {
-    width: @uploader-loading-icon-size;
-    height: @uploader-loading-icon-size;
-    color: @uploader-loading-icon-color;
-  }
-
-  &__file {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    width: @uploader-size;
-    height: @uploader-size;
-    background-color: @uploader-file-background-color;
-
-    &-icon {
-      color: @uploader-file-icon-color;
-      font-size: @uploader-file-icon-size;
-    }
-
-    &-name {
-      box-sizing: border-box;
-      width: 100%;
-      margin-top: @uploader-file-name-margin-top;
-      padding: @uploader-file-name-padding;
-      color: @uploader-file-name-text-color;
-      font-size: @uploader-file-name-font-size;
-      text-align: center;
-    }
-  }
-}
+@import '../style/var';
+
+.zt-uploader {
+  position: relative;
+  display: inline-block;
+
+  &__wrapper {
+    display: flex;
+    flex-wrap: wrap;
+
+    &--disabled {
+      opacity: @uploader-disabled-opacity;
+    }
+  }
+
+  &__input {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    overflow: hidden; // to clip file-upload-button
+    cursor: pointer;
+    opacity: 0;
+
+    &-wrapper {
+      position: relative;
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+    }
+  }
+
+  &__upload {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    width: @uploader-size;
+    height: @uploader-size;
+    margin: 0 @padding-xs @padding-xs 0;
+    background-color: @uploader-upload-background-color;
+
+    &:active {
+      background-color: @uploader-upload-active-color;
+    }
+
+    &--readonly:active {
+      background-color: @uploader-upload-background-color;
+    }
+
+    &-icon {
+      color: @uploader-icon-color;
+      font-size: @uploader-icon-size;
+    }
+
+    &-text {
+      margin-top: @padding-xs;
+      color: @uploader-text-color;
+      font-size: @uploader-text-font-size;
+    }
+  }
+
+  &__preview {
+    position: relative;
+    margin: 0 @padding-xs @padding-xs 0;
+    cursor: pointer;
+
+    &-image {
+      display: block;
+      width: @uploader-size;
+      height: @uploader-size;
+      overflow: hidden;
+    }
+
+    &-delete {
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: @uploader-delete-icon-size;
+      height: @uploader-delete-icon-size;
+      background-color: @uploader-delete-background-color;
+      border-radius: 0 0 0 12px;
+
+      &-icon {
+        position: absolute;
+        top: -2px;
+        right: -2px;
+        color: #fff;
+        color: @uploader-delete-color;
+        font-size: 16px;
+        transform: scale(0.5);
+      }
+    }
+
+    &-cover {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+    }
+  }
+
+  &__mask {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    color: @white;
+    background-color: @uploader-mask-background-color;
+
+    &-icon {
+      font-size: @uploader-mask-icon-size;
+    }
+
+    &-message {
+      margin-top: 6px;
+      padding: 0 @padding-base;
+      font-size: @uploader-mask-message-font-size;
+      line-height: @uploader-mask-message-line-height;
+    }
+  }
+
+  &__loading {
+    width: @uploader-loading-icon-size;
+    height: @uploader-loading-icon-size;
+    color: @uploader-loading-icon-color;
+  }
+
+  &__file {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: @uploader-size;
+    height: @uploader-size;
+    background-color: @uploader-file-background-color;
+
+    &-icon {
+      color: @uploader-file-icon-color;
+      font-size: @uploader-file-icon-size;
+    }
+
+    &-name {
+      box-sizing: border-box;
+      width: 100%;
+      margin-top: @uploader-file-name-margin-top;
+      padding: @uploader-file-name-padding;
+      color: @uploader-file-name-text-color;
+      font-size: @uploader-file-name-font-size;
+      text-align: center;
+    }
+  }
+}

package/es/uploader/style/index.js

@@ -1,9 +1,9 @@
 import '../../style/base.css';
 import '../../loading/index.css';
+import '../../overlay/index.css';
 import '../../info/index.css';
 import '../../icon/index.css';
 import '../../image/index.css';
-import '../../overlay/index.css';
 import '../../popup/index.css';
 import '../../swipe/index.css';
 import '../../swipe-item/index.css';

package/es/uploader/style/less.js

@@ -1,9 +1,9 @@
 import '../../style/base.less';
 import '../../loading/index.less';
+import '../../overlay/index.less';
 import '../../info/index.less';
 import '../../icon/index.less';
 import '../../image/index.less';
-import '../../overlay/index.less';
 import '../../popup/index.less';
 import '../../swipe/index.less';
 import '../../swipe-item/index.less';

package/es/utils/create/bem.js

@@ -1,10 +1,10 @@
-/**
- * bem helper
- * b() // 'button'
- * b('text') // 'button__text'
- * b({ disabled }) // 'button button--disabled'
- * b('text', { disabled }) // 'button__text button__text--disabled'
- * b(['disabled', 'primary']) // 'button button--disabled button--primary'
+/**
+ * bem helper
+ * b() // 'button'
+ * b('text') // 'button__text'
+ * b({ disabled }) // 'button button--disabled'
+ * b('text', { disabled }) // 'button__text button__text--disabled'
+ * b(['disabled', 'primary']) // 'button button--disabled button--primary'
  */
 function gen(name, mods) {
   if (!mods) {

package/es/utils/create/component.js

@@ -1,11 +1,13 @@
-/**
- * Create a basic component with common options
+/**
+ * Create a basic component with common options
  */
 import '../../locale';
 import { isFunction } from '..';
 import { camelize } from '../format/string';
 import { SlotsMixin } from '../../mixins/slots';
+import { TelemetryMixin } from "../../mixins/telemetry";
 import Vue from 'vue';
+import { Telemetry, TelemetryEvent } from "../../telemetry";
 
 function install(Vue) {
   var name = this.name;
@@ -28,26 +30,54 @@ export function unifySlots(context) {
   return scopedSlots;
 } // should be removed after Vue 3
 
-function transformFunctionComponent(pure) {
+function transformFunctionComponent(pure, name) {
+  var onAfterEnter = function onAfterEnter() {
+    var event = new TelemetryEvent(name);
+    Telemetry.sharedInstance.trackAppear(event);
+  };
+
+  var onBeforeLeave = function onBeforeLeave() {
+    var event = new TelemetryEvent(name);
+    Telemetry.sharedInstance.trackDisappear(event);
+  };
+  /**
+   * 使用transition 模拟 functional template的 mounted 和 unmounted
+   * @param h
+   * @param context
+   * @see {@link https://dev.to/denisinvader/mounted-and-beforedestroy-hooks-in-vuejs-functional-components-7bi|Mounted and BeforeDestroy Hooks in Vue.js functional components.}
+   */
+
+
+  var render = function render(h, context) {
+    return h("transition", {
+      "attrs": {
+        "appear": true
+      },
+      "on": {
+        "afterEnter": onAfterEnter,
+        "beforeLeave": onBeforeLeave
+      }
+    }, [pure(h, context.props, unifySlots(context), context)]);
+  };
+
   return {
     functional: true,
     props: pure.props,
     model: pure.model,
-    render: function render(h, context) {
-      return pure(h, context.props, unifySlots(context), context);
-    }
+    render: render
   };
 }
 
 export function createComponent(name) {
   return function (sfc) {
     if (isFunction(sfc)) {
-      sfc = transformFunctionComponent(sfc);
+      sfc = transformFunctionComponent(sfc, name);
     }
 
     if (!sfc.functional) {
       sfc.mixins = sfc.mixins || [];
       sfc.mixins.push(SlotsMixin);
+      sfc.mixins.push(TelemetryMixin);
     }
 
     sfc.name = name;

package/es/utils/dom/raf.js

@@ -1,5 +1,5 @@
-/**
- * requestAnimationFrame polyfill
+/**
+ * requestAnimationFrame polyfill
  */
 import { isServer } from '..';
 var prev = Date.now();

package/es/utils/dom/reset-scroll.js

@@ -1,6 +1,6 @@
-/**
- * Hack for iOS12 page scroll
- * https://developers.weixin.qq.com/community/develop/doc/00044ae90742f8c82fb78fcae56800
+/**
+ * Hack for iOS12 page scroll
+ * https://developers.weixin.qq.com/community/develop/doc/00044ae90742f8c82fb78fcae56800
  */
 import { isIOS as checkIsIOS } from '../validate/system';
 import { getRootScrollTop, setRootScrollTop } from './scroll';

package/es/utils/index.js

@@ -27,35 +27,35 @@ export function get(object, path) {
   });
   return result;
 }
-/**
- * Checks if `value` is an empty object, collection, map, or set.
- *
- * Objects are considered empty if they have no own enumerable string keyed
- * properties.
- *
- * Array-like values such as `arguments` objects, arrays, buffers, strings, or
- * jQuery-like collections are considered empty if they have a `length` of `0`.
- * Similarly, maps and sets are considered empty if they have a `size` of `0`.
- *
- * @function isEmpty
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is empty, else `false`.
- * @example
- *
- * _.isEmpty(null);
- * // => true
- *
- * _.isEmpty(true);
- * // => true
- *
- * _.isEmpty(1);
- * // => true
- *
- * _.isEmpty([1, 2, 3]);
- * // => false
- *
- * _.isEmpty({ 'a': 1 });
- * // => false
+/**
+ * Checks if `value` is an empty object, collection, map, or set.
+ *
+ * Objects are considered empty if they have no own enumerable string keyed
+ * properties.
+ *
+ * Array-like values such as `arguments` objects, arrays, buffers, strings, or
+ * jQuery-like collections are considered empty if they have a `length` of `0`.
+ * Similarly, maps and sets are considered empty if they have a `size` of `0`.
+ *
+ * @function isEmpty
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is empty, else `false`.
+ * @example
+ *
+ * _.isEmpty(null);
+ * // => true
+ *
+ * _.isEmpty(true);
+ * // => true
+ *
+ * _.isEmpty(1);
+ * // => true
+ *
+ * _.isEmpty([1, 2, 3]);
+ * // => false
+ *
+ * _.isEmpty({ 'a': 1 });
+ * // => false
  */
 
 export function isEmpty(value) {

package/es/utils/media/image-util.js

@@ -0,0 +1,138 @@
+/**
+ * Convert File to data schema url
+ * @param file
+ */
+export function file2DataURL(file) {
+  return new Promise(function (resolve, reject) {
+    var a = new FileReader();
+
+    a.onload = function (res) {
+      if (res && res.target) {
+        resolve(res.target.result);
+      } else {
+        reject(new Error('读取文件url失败'));
+      }
+    };
+
+    a.readAsDataURL(file);
+  });
+}
+/**
+ * Convert file to image
+ * @param file
+ */
+
+export function file2Image(file) {
+  return new Promise(function (resolve, reject) {
+    file2DataURL(file).then(function (url) {
+      var img = new Image();
+      img.src = url;
+
+      img.onload = function (e) {
+        if (img.complete) {
+          resolve(img);
+        } else {
+          reject(new Error('文件加载失败'));
+        }
+      };
+    }).catch(reject);
+  });
+}
+export function image2file(img, fileName, lastModified, type, quality) {
+  if (type === void 0) {
+    type = "image/jpeg";
+  }
+
+  if (quality === void 0) {
+    quality = 0.8;
+  }
+
+  return image2Canvas(img).then(function (canvas) {
+    return canvas2File(canvas, fileName, lastModified, type, quality);
+  });
+}
+/**
+ * Draw image on canvas
+ * @param img
+ * @param width
+ * @param height
+ */
+
+export function image2Canvas(img, width, height) {
+  var canvas = document.createElement('canvas');
+
+  if (!width) {
+    width = img.width;
+  }
+
+  if (!height) {
+    height = img.height;
+  }
+
+  canvas.width = width;
+  canvas.height = height;
+  var ctx = canvas.getContext('2d');
+
+  if (ctx) {
+    ctx.drawImage(img, 0, 0, width, height);
+    return Promise.resolve(canvas);
+  } else {
+    return Promise.reject(null);
+  }
+}
+/**
+ * Export Image from canvas
+ * @param canvas
+ * @param type
+ * @param quality
+ * @see {@link https://meshworld.in/convert-canvas-to-an-image-using-javascript/}
+ */
+
+export function canvas2Image(canvas, type, quality) {
+  if (type === void 0) {
+    type = "image/jpeg";
+  }
+
+  if (quality === void 0) {
+    quality = 0.8;
+  }
+
+  var image = new Image();
+  image.src = canvas.toDataURL(type, quality);
+  return Promise.resolve(image);
+}
+/**
+ * Export File from canvas
+ * @param canvas
+ * @param fileName
+ * @param lastModified
+ * @param type
+ * @param quality
+ * @see {@link https://meshworld.in/convert-canvas-to-an-image-using-javascript/}
+ */
+
+export function canvas2File(canvas, fileName, lastModified, type, quality) {
+  if (type === void 0) {
+    type = "image/jpeg";
+  }
+
+  if (quality === void 0) {
+    quality = 0.8;
+  }
+
+  return new Promise(function (resolve, reject) {
+    canvas.toBlob(function (blob) {
+      if (!blob) {
+        reject(new Error('canvas文件导出失败'));
+      } else {
+        var file = new File([blob], fileName, {
+          lastModified: lastModified,
+          type: type
+        }); // console.log("file size " + file.size / 1024 + "kb");
+        // console.log(file)
+
+        resolve(file);
+      }
+    }, type, quality);
+  });
+}

package/es/utils/router.js

@@ -1,5 +1,5 @@
-/**
- * Vue Router support
+/**
+ * Vue Router support
  */
 function isRedundantNavigation(err) {
   return err.name === 'NavigationDuplicated' || err.message && err.message.indexOf('redundant navigation') !== -1;