zartui 0.1.21 → 0.1.25

package/lib/radio/index.less

@@ -1,86 +1,86 @@
-@import '../style/var';
-
-.zt-radio {
-  display: flex;
-  align-items: center;
-  overflow: hidden;
-  cursor: pointer;
-  user-select: none;
-
-  &--disabled {
-    cursor: not-allowed;
-  }
-
-  &--label-disabled {
-    cursor: default;
-  }
-
-  &--horizontal {
-    margin-right: @padding-sm;
-  }
-
-  &__icon {
-    flex: none;
-    height: 1em;
-    font-size: @radio-size;
-    line-height: 1em;
-    cursor: pointer;
-
-    .zt-icon {
-      display: block;
-      box-sizing: border-box;
-      width: 1.25em;
-      height: 1.25em;
-      color: transparent;
-      font-size: 0.8em;
-      line-height: 1.25;
-      text-align: center;
-      border: 1px solid @radio-border-color;
-      transition-duration: @radio-transition-duration;
-      transition-property: color, border-color, background-color;
-    }
-
-    &--round {
-      .zt-icon {
-        border-radius: 100%;
-      }
-    }
-
-    &--checked {
-      .zt-icon {
-        color: @white;
-        background-color: @radio-checked-icon-color;
-        border-color: @radio-checked-icon-color;
-      }
-    }
-
-    &--disabled {
-      cursor: not-allowed;
-
-      .zt-icon {
-        background-color: @radio-disabled-background-color;
-        border-color: @radio-disabled-icon-color;
-      }
-    }
-
-    &--disabled&--checked {
-      .zt-icon {
-        color: @radio-disabled-icon-color;
-      }
-    }
-  }
-
-  &__label {
-    margin-left: @radio-label-margin;
-    color: @radio-label-color;
-    line-height: @radio-size;
-
-    &--left {
-      margin: 0 @radio-label-margin 0 0;
-    }
-
-    &--disabled {
-      color: @radio-disabled-label-color;
-    }
-  }
-}
+@import '../style/var';
+
+.zt-radio {
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+  cursor: pointer;
+  user-select: none;
+
+  &--disabled {
+    cursor: not-allowed;
+  }
+
+  &--label-disabled {
+    cursor: default;
+  }
+
+  &--horizontal {
+    margin-right: @padding-sm;
+  }
+
+  &__icon {
+    flex: none;
+    height: 1em;
+    font-size: @radio-size;
+    line-height: 1em;
+    cursor: pointer;
+
+    .zt-icon {
+      display: block;
+      box-sizing: border-box;
+      width: 1.25em;
+      height: 1.25em;
+      color: transparent;
+      font-size: 0.8em;
+      line-height: 1.25;
+      text-align: center;
+      border: 1px solid @radio-border-color;
+      transition-duration: @radio-transition-duration;
+      transition-property: color, border-color, background-color;
+    }
+
+    &--round {
+      .zt-icon {
+        border-radius: 100%;
+      }
+    }
+
+    &--checked {
+      .zt-icon {
+        color: @white;
+        background-color: @radio-checked-icon-color;
+        border-color: @radio-checked-icon-color;
+      }
+    }
+
+    &--disabled {
+      cursor: not-allowed;
+
+      .zt-icon {
+        background-color: @radio-disabled-background-color;
+        border-color: @radio-disabled-icon-color;
+      }
+    }
+
+    &--disabled&--checked {
+      .zt-icon {
+        color: @radio-disabled-icon-color;
+      }
+    }
+  }
+
+  &__label {
+    margin-left: @radio-label-margin;
+    color: @radio-label-color;
+    line-height: @radio-size;
+
+    &--left {
+      margin: 0 @radio-label-margin 0 0;
+    }
+
+    &--disabled {
+      color: @radio-disabled-label-color;
+    }
+  }
+}

package/lib/radio-group/index.less

@@ -1,8 +1,8 @@
-@import '../style/var';
-
-.zt-radio-group {
-  &--horizontal {
-    display: flex;
-    flex-wrap: wrap;
-  }
-}
+@import '../style/var';
+
+.zt-radio-group {
+  &--horizontal {
+    display: flex;
+    flex-wrap: wrap;
+  }
+}

package/lib/rate/index.css

@@ -1 +1 @@
-.zt-rate{display:-webkit-inline-box;display:-webkit-inline-flex;display:inline-flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;cursor:pointer;-webkit-user-select:none;user-select:none}.zt-rate__item{position:relative}.zt-rate__item:not(:last-child){padding-right:4px}.zt-rate__icon{display:block;width:1em;color:#c8c9cc;font-size:20px}.zt-rate__icon--half{position:absolute;top:0;left:0;width:.5em;overflow:hidden}.zt-rate__icon--full{color:#e62314}.zt-rate__icon--disabled{color:#c8c9cc}.zt-rate--disabled{cursor:not-allowed}.zt-rate--readonly{cursor:default}
+.zt-rate{display:-webkit-inline-box;display:-webkit-inline-flex;display:inline-flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;cursor:pointer;-webkit-user-select:none;user-select:none}.zt-rate__item{position:relative}.zt-rate__item:not(:last-child){padding-right:4px}.zt-rate__icon{display:block;width:1em;color:#ccc;font-size:20px}.zt-rate__icon--half{position:absolute;top:0;left:0;width:.5em;overflow:hidden}.zt-rate__icon--full{color:#ffcd23}.zt-rate__icon--disabled{color:#c8c9cc}.zt-rate--disabled{cursor:not-allowed}.zt-rate--readonly{cursor:default}

package/lib/rate/index.js

@@ -56,7 +56,7 @@ var _default = createComponent({
     },
     voidIcon: {
       type: String,
-      default: 'star-o'
+      default: 'star'
     },
     count: {
       type: [Number, String],

package/lib/rate/index.less

@@ -1,47 +1,47 @@
-@import '../style/var';
-
-.zt-rate {
-  display: inline-flex;
-  flex-wrap: wrap;
-  cursor: pointer;
-  user-select: none;
-
-  &__item {
-    position: relative;
-
-    &:not(:last-child) {
-      padding-right: @rate-icon-gutter;
-    }
-  }
-
-  &__icon {
-    display: block;
-    width: 1em;
-    color: @rate-icon-void-color;
-    font-size: @rate-icon-size;
-
-    &--half {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 0.5em;
-      overflow: hidden;
-    }
-
-    &--full {
-      color: @rate-icon-full-color;
-    }
-
-    &--disabled {
-      color: @rate-icon-disabled-color;
-    }
-  }
-
-  &--disabled {
-    cursor: not-allowed;
-  }
-
-  &--readonly {
-    cursor: default;
-  }
-}
+@import '../style/var';
+
+.zt-rate {
+  display: inline-flex;
+  flex-wrap: wrap;
+  cursor: pointer;
+  user-select: none;
+
+  &__item {
+    position: relative;
+
+    &:not(:last-child) {
+      padding-right: @rate-icon-gutter;
+    }
+  }
+
+  &__icon {
+    display: block;
+    width: 1em;
+    color: @rate-icon-void-color;
+    font-size: @rate-icon-size;
+
+    &--half {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 0.5em;
+      overflow: hidden;
+    }
+
+    &--full {
+      color: @rate-icon-full-color;
+    }
+
+    &--disabled {
+      color: @rate-icon-disabled-color;
+    }
+  }
+
+  &--disabled {
+    cursor: not-allowed;
+  }
+
+  &--readonly {
+    cursor: default;
+  }
+}

package/lib/row/index.less

@@ -1,42 +1,42 @@
-@import '../style/var';
-
-.zt-row {
-  &::after {
-    display: table;
-    clear: both;
-    content: '';
-  }
-
-  &--flex {
-    display: flex;
-    flex-wrap: wrap;
-
-    &::after {
-      display: none;
-    }
-  }
-
-  &--justify-center {
-    justify-content: center;
-  }
-
-  &--justify-end {
-    justify-content: flex-end;
-  }
-
-  &--justify-space-between {
-    justify-content: space-between;
-  }
-
-  &--justify-space-around {
-    justify-content: space-around;
-  }
-
-  &--align-center {
-    align-items: center;
-  }
-
-  &--align-bottom {
-    align-items: flex-end;
-  }
-}
+@import '../style/var';
+
+.zt-row {
+  &::after {
+    display: table;
+    clear: both;
+    content: '';
+  }
+
+  &--flex {
+    display: flex;
+    flex-wrap: wrap;
+
+    &::after {
+      display: none;
+    }
+  }
+
+  &--justify-center {
+    justify-content: center;
+  }
+
+  &--justify-end {
+    justify-content: flex-end;
+  }
+
+  &--justify-space-between {
+    justify-content: space-between;
+  }
+
+  &--justify-space-around {
+    justify-content: space-around;
+  }
+
+  &--align-center {
+    align-items: center;
+  }
+
+  &--align-bottom {
+    align-items: flex-end;
+  }
+}

package/lib/signature/index.css

@@ -0,0 +1 @@
+.zt-signature{background-color:#f5f5f5;width:100%;height:100%;position:relative}.zt-signature__placeholder{z-index:2;pointer-events:none;position:absolute;left:0;top:calc(50% - 8px);font-size:16px;height:16px;width:100%;opacity:.1;color:#000;text-align:center}.zt-signature__canvasWrapper{z-index:1;position:absolute;top:0;left:0;width:100%;height:100%;background:#fff}.zt-signature__canvas{background:#f5f5f5}.zt-signature__actions{z-index:2;position:absolute;right:0;bottom:16px;width:320px;float:right}.zt-signature__actions button{float:left;width:96px;margin-right:8px}

package/lib/signature/index.js

@@ -0,0 +1,242 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _utils = require("../utils");
+
+var _button = _interopRequireDefault(require("../button"));
+
+var _toast = _interopRequireDefault(require("../toast"));
+
+var _imageUtil = require("../utils/media/image-util");
+
+// Utils
+var _createNamespace = (0, _utils.createNamespace)('signature'),
+    createComponent = _createNamespace[0],
+    bem = _createNamespace[1],
+    t = _createNamespace[2];
+
+var _default = createComponent({
+  props: {
+    customClass: {
+      type: String,
+      default: ''
+    },
+    lineWidth: {
+      type: Number | String,
+      default: 2
+    },
+    strokeStyle: {
+      type: String,
+      default: '#000'
+    },
+    imageType: {
+      type: String,
+      default: 'png'
+    },
+    resultTypes: {
+      type: String,
+      default: 'file,dataUrl'
+    },
+    unSupportTpl: {
+      type: String,
+      default: t('browserUnsupported')
+    }
+  },
+  data: function data() {
+    return {
+      canvasHeight: 0,
+      canvasWidth: 0,
+      ctx: null,
+      isSupportTouch: 'ontouchstart' in window,
+      events: 'ontouchstart' in window ? ['touchstart', 'touchmove', 'touchend', 'touchleave'] : ['mousedown', 'mousemove', 'mouseup', 'mouseleave'],
+      isHintHidden: false,
+      isCompleteButtonDisabled: true // default disabled
+
+    };
+  },
+  methods: {
+    addEvent: function addEvent() {
+      var _this = this;
+
+      // console.log(this.resultTypes)
+      this.startEventHandler = this.startEventHandler.bind(this);
+      this.$refs.canvas.addEventListener(this.events[0], this.startEventHandler, false);
+
+      if (this.isCanvasSupported) {
+        window.addEventListener("orientationchange", function () {
+          setTimeout(function () {
+            _this.canvasWidth = _this.$refs.canvasWrapper.offsetWidth;
+            _this.canvasHeight = _this.$refs.canvasWrapper.offsetHeight;
+
+            if (!_this.isCompleteButtonDisabled) {
+              (0, _toast.default)(t('orientationChangeTip'));
+
+              _this.clear(true);
+            }
+          }, 100);
+        });
+      }
+    },
+    startEventHandler: function startEventHandler(event) {
+      event.preventDefault();
+      this.ctx.beginPath();
+      this.ctx.lineWidth = this.lineWidth;
+      this.ctx.strokeStyle = this.strokeStyle;
+      this.moveEventHandler = this.moveEventHandler.bind(this), this.leaveEventHandler = this.leaveEventHandler.bind(this), this.endEventHandler = this.endEventHandler.bind(this);
+      this.$refs.canvas.addEventListener(this.events[1], this.moveEventHandler, false);
+      this.$refs.canvas.addEventListener(this.events[2], this.endEventHandler, false);
+      this.$refs.canvas.addEventListener(this.events[3], this.leaveEventHandler, false);
+    },
+    moveEventHandler: function moveEventHandler(event) {
+      event.preventDefault();
+      this.isHintHidden = true;
+      this.isCompleteButtonDisabled = false;
+      var evt = this.isSupportTouch ? event.touches[0] : event;
+      var coverPos = this.$refs.canvas.getBoundingClientRect();
+      var mouseX = evt.clientX - coverPos.left;
+      var mouseY = evt.clientY - coverPos.top;
+      this.ctx.lineTo(mouseX, mouseY);
+      this.ctx.stroke();
+    },
+    endEventHandler: function endEventHandler(event) {
+      event.preventDefault();
+      this.$refs.canvas.removeEventListener(this.events[1], this.moveEventHandler, false);
+      this.$refs.canvas.removeEventListener(this.events[2], this.endEventHandler, false);
+    },
+    leaveEventHandler: function leaveEventHandler(event) {
+      event.preventDefault();
+      this.$refs.canvas.removeEventListener(this.events[1], this.moveEventHandler, false);
+      this.$refs.canvas.removeEventListener(this.events[2], this.endEventHandler, false);
+    },
+    clear: function clear(isUnEmit) {
+      this.$refs.canvas.addEventListener(this.events[2], this.endEventHandler, false);
+      this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
+      this.ctx.closePath();
+      this.isHintHidden = false;
+      this.isCompleteButtonDisabled = true;
+
+      if (!isUnEmit) {
+        this.$emit('clear');
+      }
+    },
+    confirm: function confirm() {
+      this.onSave(this.$refs.canvas);
+    },
+    cancel: function cancel() {
+      this.clear(true);
+      this.$emit('cancel');
+    },
+    onSave: function onSave(canvas) {
+      var _this2 = this;
+
+      var resultTypes = this.resultTypes ? this.resultTypes.split(',') : ['file', 'dataUrl']; // build result
+
+      Promise.all(resultTypes.map(function (resultType) {
+        if (resultType.trim() === 'dataUrl') {
+          var dataURL;
+
+          switch (_this2.imageType) {
+            case 'png':
+              dataURL = canvas.toDataURL('image/png');
+              break;
+
+            case 'jpg':
+              dataURL = canvas.toDataURL('image/jpeg', 0.8);
+              break;
+          }
+
+          return Promise.resolve(dataURL);
+        } else if (resultType.trim() === 'file') {
+          var exportFilename = new Date().getTime() + '.jpg';
+          return (0, _imageUtil.canvas2File)(canvas, exportFilename);
+        } else {
+          return Promise.resolve(null);
+        }
+      })).then(function (results) {
+        _this2.clear(true);
+
+        _this2.$emit('confirm', canvas, results);
+      });
+    },
+    onMounted: function onMounted() {
+      if (this.isCanvasSupported) {
+        this.ctx = this.$refs.canvas.getContext('2d');
+        this.canvasWidth = this.$refs.canvasWrapper.offsetWidth;
+        this.canvasHeight = this.$refs.canvasWrapper.offsetHeight;
+        this.addEvent();
+      }
+    }
+  },
+  computed: {
+    isCanvasSupported: function isCanvasSupported() {
+      var elem = document.createElement('canvas');
+      return !!(elem.getContext && elem.getContext('2d'));
+    }
+  },
+  render: function render() {
+    var h = arguments[0];
+    return h("transition", {
+      "attrs": {
+        "appear": true
+      },
+      "on": {
+        "afterEnter": this.onMounted
+      }
+    }, [h("div", {
+      "class": [bem(''), this.customClass ? this.customClass : '']
+    }, [h("label", {
+      "class": bem('placeholder'),
+      "directives": [{
+        name: "show",
+        value: !this.isHintHidden
+      }]
+    }, [this.isCanvasSupported ? t('hint') : this.unSupportTpl]), h("div", {
+      "class": bem('canvasWrapper'),
+      "ref": "canvasWrapper"
+    }, [h("canvas", {
+      "class": bem('canvas'),
+      "directives": [{
+        name: "show",
+        value: this.isCanvasSupported
+      }],
+      "ref": "canvas",
+      "attrs": {
+        "width": this.canvasWidth,
+        "height": this.canvasHeight
+      }
+    })]), h("div", {
+      "class": bem('actions')
+    }, [h(_button.default, {
+      "attrs": {
+        "plain": true,
+        "type": "warning"
+      },
+      "on": {
+        "click": this.clear
+      }
+    }, [t('reSign')]), h(_button.default, {
+      "attrs": {
+        "plain": true,
+        "type": "default"
+      },
+      "on": {
+        "click": this.cancel
+      }
+    }, [t('cancel')]), h(_button.default, {
+      "attrs": {
+        "block": true,
+        "type": "primary",
+        "disabled": this.isCompleteButtonDisabled
+      },
+      "on": {
+        "click": this.confirm
+      }
+    }, [t('complete')])])])]);
+  }
+});
+
+exports.default = _default;

package/lib/signature/index.less

@@ -0,0 +1,50 @@
+@import '../style/var';
+
+.zt-signature {
+  background-color: #f5f5f5;
+  width: 100%;
+  height: 100%;
+  position: relative;
+
+  &__placeholder {
+    z-index: @signature-hint-z-index;
+    pointer-events: none;
+    position: absolute;
+    left: 0;
+    top: calc(50% - 8px);
+    font-size: 16px;
+    height: 16px;
+    width: 100%;
+    opacity: 0.1;
+    color: #000;
+    text-align: center;
+  }
+
+  &__canvasWrapper {
+    z-index: @signature-canvas-z-index;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: white
+  }
+
+  &__canvas {
+    background: #f5f5f5;
+  }
+
+  &__actions {
+    z-index: @signature-actions-z-index;
+    position: absolute;
+    right: 0px;
+    bottom: 16px;
+    width: 320px;
+    float: right;
+    button {
+      float: left;
+      width: 96px;
+      margin-right: 8px;
+    }
+  }
+}

package/lib/signature/style/index.js

@@ -0,0 +1,9 @@
+require('../../style/base.css');
+require('../../loading/index.css');
+require('../../overlay/index.css');
+require('../../info/index.css');
+require('../../icon/index.css');
+require('../../button/index.css');
+require('../../popup/index.css');
+require('../../toast/index.css');
+require('../index.css');