zartui 0.1.21 → 0.1.25

package/es/number-keyboard/index.less

@@ -1,142 +1,144 @@
-@import '../style/var';
-
-.zt-number-keyboard {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  z-index: @number-keyboard-z-index;
-  width: 100%;
-  padding-bottom: 22px;
-  background-color: @number-keyboard-background-color;
-  user-select: none;
-
-  &--with-title {
-    border-radius: 20px 20px 0 0;
-  }
-
-  &__header {
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    box-sizing: content-box;
-    height: @number-keyboard-title-height;
-    padding-top: 6px;
-    color: @number-keyboard-title-color;
-    font-size: @number-keyboard-title-font-size;
-  }
-
-  &__title {
-    display: inline-block;
-    font-weight: normal;
-
-    &-left {
-      position: absolute;
-      left: 0;
-    }
-  }
-
-  &__body {
-    display: flex;
-    padding: 6px 0 0 6px;
-  }
-
-  &__keys {
-    display: flex;
-    flex: 3;
-    flex-wrap: wrap;
-  }
-
-  &__close {
-    position: absolute;
-    right: 0;
-    height: 100%;
-    padding: @number-keyboard-close-padding;
-    color: @number-keyboard-close-color;
-    font-size: @number-keyboard-close-font-size;
-    background-color: transparent;
-    border: none;
-    cursor: pointer;
-
-    &:active {
-      opacity: @active-opacity;
-    }
-  }
-
-  &__sidebar {
-    display: flex;
-    flex: 1;
-    flex-direction: column;
-  }
-
-  &--unfit {
-    padding-bottom: 0;
-  }
-}
-
-.zt-key {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: @number-keyboard-key-height;
-  font-size: @number-keyboard-key-font-size;
-  line-height: 1.5;
-  background-color: @white;
-  border-radius: @border-radius-lg;
-  cursor: pointer;
-
-  &--large {
-    // height: 100% can't fill flex parent on legacy safari
-    // see: https://stackoverflow.com/questions/33636796
-    position: absolute;
-    top: 0;
-    right: 6px;
-    bottom: 6px;
-    left: 0;
-    height: auto;
-  }
-
-  &--blue,
-  &--delete {
-    font-size: @number-keyboard-delete-font-size;
-  }
-
-  &--active {
-    background-color: @number-keyboard-key-active-color;
-  }
-
-  &--blue {
-    color: @number-keyboard-button-text-color;
-    background-color: @number-keyboard-button-background-color;
-
-    &.zt-key--active {
-      background-color: darken(@number-keyboard-button-background-color, 10%);
-    }
-  }
-
-  &__wrapper {
-    position: relative;
-    flex: 1;
-    flex-basis: 33%;
-    box-sizing: border-box;
-    padding: 0 6px 6px 0;
-
-    &--wider {
-      flex-basis: 66%;
-    }
-  }
-
-  &__delete-icon {
-    width: 32px;
-    height: 22px;
-  }
-
-  &__collapse-icon {
-    width: 30px;
-    height: 24px;
-  }
-
-  &__loading-icon {
-    color: @number-keyboard-button-text-color;
-  }
-}
+@import '../style/var';
+
+.zt-number-keyboard {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  z-index: @number-keyboard-z-index;
+  width: calc(100% - 24px);
+  padding: 16px 8px 8px 16px;
+  background-color: @number-keyboard-background-color;
+  user-select: none;
+
+  &--with-title {
+    border-radius: 20px 20px 0 0;
+  }
+
+  &__header {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: content-box;
+    height: @number-keyboard-title-height;
+    padding-top: 6px;
+    color: @number-keyboard-title-color;
+    font-size: @number-keyboard-title-font-size;
+  }
+
+  &__title {
+    display: inline-block;
+    font-weight: normal;
+
+    &-left {
+      position: absolute;
+      left: 0;
+    }
+  }
+
+  &__body {
+    display: flex;
+  }
+
+  &__keys {
+    display: flex;
+    flex: 3;
+    flex-wrap: wrap;
+  }
+
+  &__close {
+    position: absolute;
+    right: 0;
+    height: 100%;
+    padding: @number-keyboard-close-padding;
+    color: @number-keyboard-close-color;
+    font-size: @number-keyboard-close-font-size;
+    background-color: transparent;
+    border: none;
+    cursor: pointer;
+
+    &:active {
+      opacity: @active-opacity;
+    }
+  }
+
+  &__sidebar {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+  }
+
+  &--unfit {
+    padding-bottom: 0;
+  }
+}
+
+.zt-key {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: @number-keyboard-key-height;
+  font-size: @number-keyboard-key-font-size;
+  line-height: 1.5;
+  background-color: @white;
+  border-radius: @border-radius-lg;
+  cursor: pointer;
+
+  &--large {
+    // height: 100% can't fill flex parent on legacy safari
+    // see: https://stackoverflow.com/questions/33636796
+    position: absolute;
+    top: 0;
+    right: 6px;
+    bottom: 6px;
+    left: 0;
+    height: auto;
+  }
+
+  &--blue,
+  &--delete {
+    font-size: @number-keyboard-delete-font-size;
+  }
+
+  &--active {
+    background-color: @number-keyboard-key-active-color;
+  }
+
+  &--blue {
+    color: @number-keyboard-button-text-color;
+    background-color: @number-keyboard-button-background-color;
+
+    &.zt-key--active {
+      background-color: darken(@number-keyboard-button-background-color, 10%);
+    }
+  }
+
+  &__wrapper {
+    position: relative;
+    flex: 1;
+    flex-basis: 33%;
+    box-sizing: border-box;
+    padding: 0 8px 8px 0;
+
+    &--wider {
+      flex-basis: 66%;
+    }
+  }
+
+  &__delete-icon {
+    width: 32px;
+    height: 22px;
+  }
+
+  &__collapse-icon {
+    width: 30px;
+    height: 24px;
+  }
+
+  &__loading-icon {
+    color: @number-keyboard-button-text-color;
+  }
+}
+.zt-cell .zt-field__label {
+  color: rgba(0, 0, 0, 0.6);
+}

package/es/overlay/index.less

@@ -1,11 +1,11 @@
-@import '../style/var';
-
-.zt-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: @overlay-z-index;
-  width: 100%;
-  height: 100%;
-  background-color: @overlay-background-color;
-}
+@import '../style/var';
+
+.zt-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: @overlay-z-index;
+  width: 100%;
+  height: 100%;
+  background-color: @overlay-background-color;
+}

package/es/password-input/index.css

@@ -0,0 +1 @@
+.zt-password-input{position:relative;margin:0 16px;-webkit-user-select:none;user-select:none}.zt-password-input__error-info,.zt-password-input__info{margin-top:16px;font-size:14px;text-align:center}.zt-password-input__info{color:#969799}.zt-password-input__error-info{color:#e62314}.zt-password-input__security{display:-webkit-box;display:-webkit-flex;display:flex;width:100%;height:50px;cursor:pointer}.zt-password-input__security::after{border-radius:6px}.zt-password-input__security li{position:relative;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-flex:1;-webkit-flex:1;flex:1;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;height:100%;font-size:20px;line-height:1.2;background-color:#fff}.zt-password-input__security i{position:absolute;top:50%;left:50%;width:10px;height:10px;background-color:#000;border-radius:100%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);visibility:hidden}.zt-password-input__cursor{position:absolute;top:50%;left:50%;width:1px;height:40%;background-color:rgba(0,0,0,.6);-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);-webkit-animation:1s zt-cursor-flicker infinite;animation:1s zt-cursor-flicker infinite}@-webkit-keyframes zt-cursor-flicker{from{opacity:0}50%{opacity:1}100%{opacity:0}}@keyframes zt-cursor-flicker{from{opacity:0}50%{opacity:1}100%{opacity:0}}

package/es/password-input/index.js

@@ -0,0 +1,80 @@
+import _mergeJSXProps from "@vue/babel-helper-vue-jsx-merge-props";
+// Utils
+import { createNamespace, addUnit } from '../utils';
+import { emit, inherit } from '../utils/functional';
+import { BORDER_LEFT, BORDER_SURROUND } from '../utils/constant'; // Types
+
+var _createNamespace = createNamespace('password-input'),
+    createComponent = _createNamespace[0],
+    bem = _createNamespace[1];
+
+function PasswordInput(h, props, slots, ctx) {
+  var _ref2;
+
+  var mask = props.mask,
+      value = props.value,
+      length = props.length,
+      gutter = props.gutter,
+      focused = props.focused,
+      errorInfo = props.errorInfo;
+  var Points = [];
+
+  for (var i = 0; i < length; i++) {
+    var _ref;
+
+    var _char = value[i];
+    var showBorder = i !== 0 && !gutter;
+    var showCursor = focused && i === value.length;
+    var style = void 0;
+
+    if (i !== 0 && gutter) {
+      style = {
+        marginLeft: addUnit(gutter)
+      };
+    }
+
+    Points.push(h("li", {
+      "class": [(_ref = {}, _ref[BORDER_LEFT] = showBorder, _ref), bem('item', {
+        focus: showCursor
+      })],
+      "style": style
+    }, [mask ? h("i", {
+      "style": {
+        visibility: _char ? 'visible' : 'hidden'
+      }
+    }) : _char, showCursor && h("div", {
+      "class": bem('cursor')
+    })]));
+  }
+
+  return h("div", {
+    "class": bem()
+  }, [h("ul", _mergeJSXProps([{
+    "class": [bem('security'), (_ref2 = {}, _ref2[BORDER_SURROUND] = !gutter, _ref2)],
+    "on": {
+      "touchstart": function touchstart(event) {
+        event.stopPropagation();
+        emit(ctx, 'focus', event);
+      }
+    }
+  }, inherit(ctx, true)]), [Points])]);
+}
+
+PasswordInput.props = {
+  gutter: [Number, String],
+  focused: Boolean,
+  errorInfo: String,
+  mask: {
+    type: Boolean,
+    default: true
+  },
+  value: {
+    type: String,
+    default: ''
+  },
+  length: {
+    type: [Number, String],
+    default: 6
+  }
+};
+export default createComponent(PasswordInput);

package/es/password-input/index.less

@@ -0,0 +1,83 @@
+@import '../style/var';
+
+.zt-password-input {
+  position: relative;
+  margin: @password-input-margin;
+  user-select: none;
+
+  &__info,
+  &__error-info {
+    margin-top: @padding-md;
+    font-size: @password-input-info-font-size;
+    text-align: center;
+  }
+
+  &__info {
+    color: @password-input-info-color;
+  }
+
+  &__error-info {
+    color: @password-input-error-info-color;
+  }
+
+  &__security {
+    display: flex;
+    width: 100%;
+    height: @password-input-height;
+    cursor: pointer;
+
+    &::after {
+      border-radius: @password-input-border-radius;
+    }
+
+    li {
+      position: relative;
+      display: flex;
+      flex: 1;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
+      font-size: @password-input-font-size;
+      line-height: 1.2;
+      background-color: @password-input-background-color;
+    }
+
+    i {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: @password-input-dot-size;
+      height: @password-input-dot-size;
+      background-color: @password-input-dot-color;
+      border-radius: 100%;
+      transform: translate(-50%, -50%);
+      visibility: hidden;
+    }
+  }
+
+  &__cursor {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: @number-keyboard-cursor-width;
+    height: @number-keyboard-cursor-height;
+    background-color: @number-keyboard-cursor-color;
+    transform: translate(-50%, -50%);
+    animation: @number-keyboard-cursor-animation-duration zt-cursor-flicker
+      infinite;
+  }
+}
+
+@keyframes zt-cursor-flicker {
+  from {
+    opacity: 0;
+  }
+
+  50% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+  }
+}

package/es/password-input/style/index.js

@@ -0,0 +1,2 @@
+import '../../style/base.css';
+import '../index.css';

package/es/password-input/style/less.js

@@ -0,0 +1,2 @@
+import '../../style/base.less';
+import '../index.less';

package/es/pdf-viewer/style/index.js

@@ -1,8 +1,8 @@
 import '../../style/base.css';
 import '../../loading/index.css';
+import '../../overlay/index.css';
 import '../../info/index.css';
 import '../../icon/index.css';
-import '../../overlay/index.css';
 import '../../popup/index.css';
 import '../../toast/index.css';
 import '../index.css';

package/es/pdf-viewer/style/less.js

@@ -1,8 +1,8 @@
 import '../../style/base.less';
 import '../../loading/index.less';
+import '../../overlay/index.less';
 import '../../info/index.less';
 import '../../icon/index.less';
-import '../../overlay/index.less';
 import '../../popup/index.less';
 import '../../toast/index.less';
 import '../index.less';

package/es/picker/PickerColumn.js

@@ -30,6 +30,7 @@ function isOptionDisabled(option) {
 export default createComponent({
   mixins: [TouchMixin],
   props: {
+    columnCollector: Array,
     valueKey: String,
     readonly: Boolean,
     allowHtml: Boolean,
@@ -54,8 +55,8 @@ export default createComponent({
     };
   },
   created: function created() {
-    if (this.$parent.children) {
-      this.$parent.children.push(this);
+    if (this.columnCollector) {
+      this.columnCollector.push(this);
     }
 
     this.setIndex(this.currentIndex);
@@ -64,10 +65,8 @@ export default createComponent({
     this.bindTouchEvent(this.$el);
   },
   destroyed: function destroyed() {
-    var children = this.$parent.children;
-
-    if (children) {
-      children.splice(children.indexOf(this), 1);
+    if (this.columnCollector) {
+      this.columnCollector.splice(this.columnCollector.indexOf(this), 1);
     }
   },
   watch: {

package/es/picker/index.js

@@ -2,12 +2,13 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 // Utils
 import { createNamespace } from '../utils';
 import { preventDefault } from '../utils/dom/event';
-import { BORDER_UNSET_TOP_BOTTOM } from '../utils/constant';
 import { pickerProps, DEFAULT_ITEM_HEIGHT } from './shared';
 import { unitToPx } from '../utils/format/unit'; // Components
 
 import Loading from '../loading';
 import PickerColumn from './PickerColumn';
+import Popup from '../popup';
+import { PopupMixin } from '../mixins/popup';
 
 var _createNamespace = createNamespace('picker'),
     createComponent = _createNamespace[0],
@@ -15,7 +16,16 @@ var _createNamespace = createNamespace('picker'),
     t = _createNamespace[2];
 
 export default createComponent({
+  mixins: [PopupMixin()],
   props: _extends({}, pickerProps, {
+    showPicker: {
+      type: Boolean,
+      default: true
+    },
+    showToolbar: {
+      type: Boolean,
+      default: true
+    },
     defaultIndex: {
       type: [Number, String],
       default: 0
@@ -42,7 +52,8 @@ export default createComponent({
   data: function data() {
     return {
       children: [],
-      formattedColumns: []
+      formattedColumns: [],
+      show: false
     };
   },
   computed: {
@@ -68,6 +79,9 @@ export default createComponent({
     columns: {
       handler: 'format',
       immediate: true
+    },
+    showPicker: function showPicker(val) {
+      this.show = val;
     }
   },
   methods: {
@@ -369,6 +383,7 @@ export default createComponent({
 
         return h(PickerColumn, {
           "attrs": {
+            "columnCollector": _this5.children,
             "readonly": _this5.readonly,
             "valueKey": _this5.valueKey,
             "allowHtml": _this5.allowHtml,
@@ -392,14 +407,28 @@ export default createComponent({
     }
   },
   render: function render(h) {
-    return h("div", {
-      "class": bem()
+    var _this6 = this;
+
+    return h(Popup, {
+      "attrs": {
+        "round": true,
+        "position": "bottom"
+      },
+      "model": {
+        value: _this6.show,
+        callback: function callback($$v) {
+          _this6.show = $$v;
+        }
+      }
+    }, [h("div", {
+      "class": bem(),
+      "ref": 'columnParent'
     }, [this.toolbarPosition === 'top' ? this.genToolbar() : h(), this.toolbarPosition === 'top' ? h("div", {
       "class": bem('border')
     }) : h(), this.loading ? h(Loading, {
       "class": bem('loading')
     }) : h(), this.slots('columns-top'), this.headers && this.headers.length > 0 ? this.genHeaders() : h(), this.headers && this.headers.length > 0 ? h("div", {
       "class": bem('border')
-    }) : h(), this.genColumns(), this.slots('columns-bottom'), this.toolbarPosition === 'bottom' ? this.genToolbar() : h()]);
+    }) : h(), this.genColumns(), this.slots('columns-bottom'), this.toolbarPosition === 'bottom' ? this.genToolbar() : h()])]);
   }
 });