zartui 0.1.113 → 2.0.1

package/es/calendar/index.js

@@ -165,6 +165,9 @@ export default createComponent({
       this.currentDate = date;
       this.scrollIntoView();
     },
+    onCancel: function onCancel() {
+      this.$emit('cancel');
+    },
     init: function init() {
       var _this = this;
 
@@ -455,7 +458,22 @@ export default createComponent({
 
       if (this.showConfirm) {
         var text = this.buttonDisabled ? this.confirmDisabledText : this.confirmText;
-        return h(Button, {
+        return [h(Button, {
+          "attrs": {
+            "block": true,
+            "color": this.color,
+            "disabled": this.buttonDisabled,
+            "nativeType": "button"
+          },
+          "class": bem('confirm'),
+          "on": {
+            "click": this.onCancel
+          },
+          "style": {
+            marginRight: "4px",
+            backgroundColor: "white"
+          }
+        }, [text || '取消']), h(Button, {
           "attrs": {
             "block": true,
             "type": "primary",
@@ -466,8 +484,11 @@ export default createComponent({
           "class": bem('confirm'),
           "on": {
             "click": this.onConfirm
+          },
+          "style": {
+            marginLeft: "4px"
           }
-        }, [text || t('confirm')]);
+        }, [text || t('confirm')])];
       }
     },
     genFooter: function genFooter() {
@@ -513,8 +534,6 @@ export default createComponent({
     var h = arguments[0];
 
     if (this.poppable) {
-      var _attrs;
-
       var createListener = function createListener(name) {
         return function () {
           return _this5.$emit(name);
@@ -522,11 +541,15 @@ export default createComponent({
       };
 
       return h(Popup, {
-        "attrs": (_attrs = {
-          "round": true,
-          "value": this.value
-        }, _attrs["round"] = this.round, _attrs["position"] = this.position, _attrs["closeable"] = this.showTitle || this.showSubtitle, _attrs["getContainer"] = this.getContainer, _attrs["closeOnPopstate"] = this.closeOnPopstate, _attrs["closeOnClickOverlay"] = this.closeOnClickOverlay, _attrs),
         "class": bem('popup'),
+        "attrs": {
+          "value": this.value,
+          "round": this.round,
+          "position": this.position,
+          "getContainer": this.getContainer,
+          "closeOnPopstate": this.closeOnPopstate,
+          "closeOnClickOverlay": this.closeOnClickOverlay
+        },
         "on": {
           "input": this.togglePopup,
           "open": createListener('open'),

package/es/calendar/index.less

@@ -6,6 +6,7 @@
   flex-direction: column;
   height: 100%;
   background-color: @calendar-background-color;
+  color: #2D4B73;
 
   &__popup {
     &.zt-popup--top,
@@ -31,12 +32,17 @@
 
   &__header-title {
     height: @calendar-header-title-height;
-    font-weight: @base-font-weight;
+    font-weight: 400;
     line-height: @calendar-header-title-height;
-    text-align: left;
-    padding-left: @padding-md;
     position: relative;
-
+    color: #2D4B73;
+    font-size: 14px;
+    line-height: 20px;
+    opacity: 0.4;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-bottom: 1px solid rgba(45,75,115,0.10);
   }
 
   &__header-title .hint-block {
@@ -47,6 +53,7 @@
     width: 4px;
     height: 16px;
     background: #0091fa;
+    
   }
 
   &__header-title::after {
@@ -71,9 +78,6 @@
     text-align: center;
   }
 
-  &__header-title {
-    font-size: @calendar-header-title-font-size;
-  }
 
   &__header-subtitle {
     font-size: @calendar-header-subtitle-font-size;
@@ -235,8 +239,11 @@
 
   &__footer {
     flex-shrink: 0;
-    padding-bottom: constant(safe-area-inset-bottom);
-    padding-bottom: env(safe-area-inset-bottom);
+    // padding-bottom: constant(safe-area-inset-bottom);
+    // padding-bottom: env(safe-area-inset-bottom);
+    display: flex;
+    padding: 8px 16px 8px 16px;
+    border-top: 1px solid rgba(45,75,115,0.10);
 
     &--unfit {
       padding-bottom: 0;
@@ -244,7 +251,6 @@
   }
 
   &__confirm {
-    border-radius: 0px;
     //height: @calendar-confirm-button-height;
     //margin: @calendar-confirm-button-margin;
   }

package/es/cell/index.css

@@ -1 +1 @@
-.zt-cell{position:relative;display:-webkit-box;display:-webkit-flex;display:flex;box-sizing:border-box;width:100%;padding:10px 16px;overflow:hidden;color:rgba(0,0,0,.6);font-size:16px;line-height:24px;background-color:#fff}.zt-cell--noFlex{display:block}.zt-cell--noFlex .zt-cell__title{margin-bottom:10px;width:100%;max-width:100%}.zt-cell::after{position:absolute;box-sizing:border-box;content:' ';pointer-events:none;right:0;bottom:0;left:16px;border-bottom:1px solid rgba(0,0,0,.1);-webkit-transform:scaleY(.5);transform:scaleY(.5)}.zt-cell--borderless::after,.zt-cell:last-child::after{display:none}.zt-cell__label{margin-top:10px;color:#000;font-size:14px;line-height:18px}.zt-cell__title,.zt-cell__value{-webkit-box-flex:1;-webkit-flex:1;flex:1}.zt-cell__placeholder{color:#c8c9cc;-webkit-box-flex:1;-webkit-flex:1;flex:1;text-align:right}.zt-cell__value{position:relative;overflow:hidden;color:#000;text-align:right;vertical-align:middle;word-wrap:break-word}.zt-cell__value--alone{color:rgba(0,0,0,.6);text-align:left}.zt-cell__left-icon,.zt-cell__right-icon{height:24px;font-size:16px;line-height:24px}.zt-cell__left-icon{margin-right:4px}.zt-cell__right-icon{margin:auto 0;margin-left:4px;color:#969799}.zt-cell--clickable{cursor:pointer}.zt-cell--clickable:active{background-color:rgba(0,0,0,.04)}.zt-cell--center{-webkit-box-align:center;-webkit-align-items:center;align-items:center}.zt-cell--large{padding-top:12px;padding-bottom:12px}.zt-cell--large .zt-cell__title{font-size:16px}.zt-cell--large .zt-cell__label{font-size:14px}
+.zt-cell{position:relative;display:-webkit-box;display:-webkit-flex;display:flex;box-sizing:border-box;width:100%;padding:16px 16px;overflow:hidden;color:#2d4b73;font-size:16px;line-height:24px;background-color:#fff}.zt-cell--noFlex{display:block}.zt-cell--noFlex .zt-cell__title{margin-bottom:10px;width:100%;max-width:100%}.zt-cell--borderless::after,.zt-cell:last-child::after{display:none}.zt-cell__label{margin-top:10px;color:#2d4b73;font-size:14px;line-height:18px}.zt-cell__title,.zt-cell__value{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-flex:1;-webkit-flex:1;flex:1}.zt-cell__title-content,.zt-cell__value-content{-webkit-box-flex:18;-webkit-flex:18;flex:18}.zt-cell__title .zt-icon,.zt-cell__value .zt-icon{-webkit-box-flex:1;-webkit-flex:1;flex:1;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end}.zt-cell__placeholder{color:#c8c9cc;-webkit-box-flex:9;-webkit-flex:9;flex:9;text-align:right}.zt-cell__value{position:relative;overflow:hidden;color:#2d4b73;text-align:right;vertical-align:middle;word-wrap:break-word}.zt-cell__value--alone{color:rgba(0,0,0,.6);text-align:left}.zt-cell__left-icon,.zt-cell__right-icon{height:24px;font-size:16px;line-height:24px}.zt-cell__left-icon{margin-right:4px}.zt-cell__right-icon{margin:auto 0;margin-left:4px;color:#969799}.zt-cell--center{-webkit-box-align:center;-webkit-align-items:center;align-items:center}.zt-cell--large{padding-top:12px;padding-bottom:12px}.zt-cell--large .zt-cell__title{font-size:16px}.zt-cell--large .zt-cell__label{font-size:14px}.zt-cell__direction-column{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;flex-direction:column;background-color:#f5faff;font-size:14px;line-height:20px}.zt-cell__direction-column .zt-cell__title{margin-bottom:8px;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center}.zt-cell__direction-column .zt-cell__title-content{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-box-flex:1;-webkit-flex:1;flex:1}.zt-cell__direction-column .zt-cell__title-subtitle{display:-webkit-box;display:-webkit-flex;display:flex;white-space:nowrap;-webkit-box-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;-webkit-box-flex:1;-webkit-flex:1;flex:1;opacity:.4}.zt-cell__direction-column .zt-cell__value{display:-webkit-box;display:-webkit-flex;display:flex;text-align:left;min-height:44px;padding:12px;box-sizing:border-box;background-color:#fff;-webkit-box-align:center;-webkit-align-items:center;align-items:center}.zt-cell__direction-column .zt-cell__value .zt-icon{-webkit-box-flex:2;-webkit-flex:2;flex:2;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end}.zt-cell__direction-column .zt-cell__value-content{-webkit-box-flex:18;-webkit-flex:18;flex:18;word-break:break-all}.zt-cell__clickable{cursor:pointer}.zt-cell__clickable:active{background-color:rgba(0,0,0,.04)}

package/es/cell/index.js

@@ -21,27 +21,65 @@ function Cell(h, props, slots, ctx) {
       label = props.label,
       value = props.value,
       isLink = props.isLink,
-      placeholder = props.placeholder;
+      placeholder = props.placeholder,
+      direction = props.direction,
+      subtitle = props.subtitle;
   var showTitle = slots.title || isDef(title);
+  var clickable = (_props$clickable = props.clickable) != null ? _props$clickable : isLink;
 
   function Label() {
     var showLabel = slots.label || isDef(label);
 
-    if (showLabel) {
+    if (showLabel && direction !== "column") {
       return h("div", {
         "class": [bem('label'), props.labelClass]
       }, [slots.label ? slots.label() : label]);
     }
   }
 
+  function LeftIcon() {
+    if (slots.icon) {
+      return slots.icon();
+    }
+
+    if (icon) {
+      return h(Icon, {
+        "class": bem('left-icon'),
+        "attrs": {
+          "name": icon,
+          "classPrefix": props.iconPrefix
+        }
+      });
+    }
+  } // 渲染副标题
+
+
+  function renderSubTitle() {
+    if (direction === "column") {
+      if (slots != null && slots.subtitle) {
+        return h("div", {
+          "class": bem('title-subtitle')
+        }, [slots == null ? void 0 : slots.subtitle()]);
+      }
+
+      if (subtitle) {
+        return h("div", {
+          "class": bem('title-subtitle')
+        }, [subtitle]);
+      }
+    }
+  }
+
   function Title() {
     if (showTitle) {
       return h("div", {
         "class": [bem('title'), props.titleClass],
         "style": props.titleStyle
-      }, [slots.title ? slots.title() : h("span", [title]), Label(), props.required ? h("span", {
+      }, [LeftIcon(), slots.title ? slots.title() : h("span", {
+        "class": bem('title-content')
+      }, [title, Label()]), props.required ? h("span", {
         "style": "color:#ff5023;margin-left:4px;"
-      }, ["*"]) : ""]);
+      }, ["*"]) : "", renderSubTitle()]);
     }
   }
 
@@ -55,36 +93,6 @@ function Cell(h, props, slots, ctx) {
     }
   }
 
-  function Value() {
-    var showValue = slots.default || isDef(value);
-
-    if (showValue) {
-      return h("div", {
-        "class": [bem('value', {
-          alone: !showTitle
-        }), props.valueClass]
-      }, [slots.default ? slots.default() : value !== "" ? h("span", [value]) : PlaceholderSpan()]);
-    } else {
-      return PlaceholderSpan();
-    }
-  }
-
-  function LeftIcon() {
-    if (slots.icon) {
-      return slots.icon();
-    }
-
-    if (icon) {
-      return h(Icon, {
-        "class": bem('left-icon'),
-        "attrs": {
-          "name": icon,
-          "classPrefix": props.iconPrefix
-        }
-      });
-    }
-  }
-
   function RightIcon() {
     var rightIconSlot = slots['right-icon'];
 
@@ -103,14 +111,28 @@ function Cell(h, props, slots, ctx) {
     }
   }
 
+  function Value() {
+    var showValue = slots.default || isDef(value) || clickable;
+
+    if (showValue) {
+      return h("div", {
+        "class": [bem('value', {
+          alone: !showTitle
+        }), props.valueClass, direction === 'column' && clickable ? bem('clickable') : '']
+      }, [slots.default ? slots.default() : value !== "" ? h("span", {
+        "class": bem('value-content')
+      }, [value]) : PlaceholderSpan(), slots.extra == null ? void 0 : slots.extra(), RightIcon()]);
+    } else {
+      return PlaceholderSpan();
+    }
+  }
+
   function onClick(event) {
     emit(ctx, 'click', event);
     functionalRoute(ctx);
   }
 
-  var clickable = (_props$clickable = props.clickable) != null ? _props$clickable : isLink;
   var classes = {
-    clickable: clickable,
     center: props.center,
     // required: props.required,
     borderless: !props.border,
@@ -122,7 +144,7 @@ function Cell(h, props, slots, ctx) {
   }
 
   return h("div", _mergeJSXProps([{
-    "class": bem(classes),
+    "class": [bem(classes), direction === 'column' ? bem('direction-column') : '', clickable && direction !== 'column' ? bem('clickable') : ''],
     "attrs": {
       "role": clickable ? 'button' : null,
       "tabindex": clickable ? 0 : null
@@ -130,7 +152,7 @@ function Cell(h, props, slots, ctx) {
     "on": {
       "click": onClick
     }
-  }, inherit(ctx)]), [LeftIcon(), Title(), Value(), RightIcon(), slots.extra == null ? void 0 : slots.extra()]);
+  }, inherit(ctx)]), [Title(), Value()]);
 }
 
 Cell.props = _extends({}, cellProps, routeProps);

package/es/cell/index.less

@@ -22,9 +22,9 @@
     }
   }
 
-  &::after {
-    .hairline-bottom(@cell-border-color, @padding-md, );
-  }
+  // &::after {
+  //   .hairline-bottom(@cell-border-color, @padding-md, );
+  // }
 
   &:last-child::after,
   &--borderless::after {
@@ -40,19 +40,28 @@
 
   &__title,
   &__value {
+    display: flex;
     flex: 1;
+    &-content {
+      flex: 18;
+    }
+    .zt-icon {
+      flex: 1;
+      display: flex;
+      justify-content: flex-end;
+    }
   }
 
   &__placeholder {
     color: @field-placeholder-text-color;
-    flex: 1;
+    flex: 9;
     text-align: right;
   }
 
   &__value {
     position: relative;
     overflow: hidden;
-    color: @cell-value-color;
+    color: @cell-text-color;
     text-align: right;
     vertical-align: middle;
     word-wrap: break-word;
@@ -80,13 +89,7 @@
     color: @cell-right-icon-color;
   }
 
-  &--clickable {
-    cursor: pointer;
-
-    &:active {
-      background-color: @cell-active-color;
-    }
-  }
+ 
   
   &--center {
     align-items: center;
@@ -105,3 +108,55 @@
     }
   }
 }
+
+.zt-cell__direction-column {
+  flex-direction: column;
+  background-color: #f5faff;
+  font-size: 14px;
+  line-height: 20px;
+  .zt-cell__title {
+    margin-bottom: 8px;
+    display: flex;
+    align-items: center;
+    &-content {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      flex: 1;
+    }
+    &-subtitle {
+      display: flex;
+      white-space: nowrap;
+      justify-content: flex-end;
+      flex: 1;
+      opacity: 0.4;
+    }
+  }
+
+  .zt-cell__value {
+    display: flex;
+    text-align: left;
+    min-height: 44px;
+    padding: 12px;
+    box-sizing: border-box;
+    background-color: white;
+    align-items: center;
+    .zt-icon {
+      flex: 2;
+      display: flex;
+      justify-content: flex-end;
+    }
+    &-content {
+      flex: 18;
+      word-break: break-all;
+    }
+  }
+}
+
+
+.zt-cell__clickable {
+  cursor: pointer;
+  &:active {
+    background-color: @cell-active-color;
+  }
+}

package/es/cell/shared.js

@@ -14,6 +14,8 @@ export var cellProps = {
   value: [Number, String],
   label: [Number, String],
   arrowDirection: String,
+  direction: String,
+  subtitle: String,
   border: {
     type: Boolean,
     default: true

package/es/checkbox/index.css

@@ -1 +1 @@
-.zt-checkbox{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;overflow:hidden;cursor:pointer;-webkit-user-select:none;user-select:none;padding:10px 0}.zt-checkbox--disabled{cursor:not-allowed}.zt-checkbox--label-disabled{cursor:default}.zt-checkbox--horizontal{margin-left:12px}.zt-checkbox__icon{-webkit-box-flex:0;-webkit-flex:none;flex:none;height:1em;font-size:24px;line-height:1em;cursor:pointer}.zt-checkbox__icon i,.zt-checkbox__icon img{-webkit-transform:scale(.8333);transform:scale(.8333);-webkit-transform-origin:center;transform-origin:center}.zt-checkbox__icon .zt-icon{display:block;box-sizing:border-box;width:1.25em;height:1.25em;color:transparent;font-size:.8em;line-height:1.25;text-align:center;border:1px solid #c8c9cc;-webkit-transition-duration:.2s;transition-duration:.2s;-webkit-transition-property:color,border-color,background-color;transition-property:color,border-color,background-color}.zt-checkbox__icon--round .zt-icon{border-radius:100%}.zt-checkbox__icon--checked .zt-icon{color:#fff;background-color:#0091fa;border-color:#0091fa}.zt-checkbox__icon--disabled{cursor:not-allowed}.zt-checkbox__icon--disabled .zt-icon{background-color:rgba(0,0,0,.1);border-color:#c8c9cc}.zt-checkbox__icon--disabled.zt-checkbox__icon--checked .zt-icon{opacity:.4;background-color:#0091fa;color:#fff}.zt-checkbox__label{margin-left:8px;color:#000;line-height:24px}.zt-checkbox__label--left{margin:0 8px 0 0}.zt-checkbox__label--disabled{color:#c8c9cc}
+.zt-checkbox{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;overflow:hidden;cursor:pointer;-webkit-user-select:none;user-select:none;padding:14px 0}.zt-checkbox--disabled{cursor:not-allowed}.zt-checkbox--label-disabled{cursor:default}.zt-checkbox--horizontal{margin-left:12px}.zt-checkbox__icon{-webkit-box-flex:0;-webkit-flex:none;flex:none;height:1em;font-size:24px;line-height:1em;cursor:pointer}.zt-checkbox__icon i,.zt-checkbox__icon img{-webkit-transform:scale(.8333);transform:scale(.8333);-webkit-transform-origin:center;transform-origin:center}.zt-checkbox__icon .zt-icon{display:block;box-sizing:border-box;width:1.25em;height:1.25em;color:transparent;font-size:.8em;line-height:1.25;text-align:center;-webkit-transition-duration:.2s;transition-duration:.2s;-webkit-transition-property:color,border-color,background-color;transition-property:color,border-color,background-color}.zt-checkbox__icon--round .zt-icon{border-radius:100%}.zt-checkbox__icon--checked .zt-icon{color:#fff;background:#0091fa;box-shadow:inset 1px 1px 2px 0 rgba(0,0,0,.2);border:1px solid rgba(255,255,255,.5)}.zt-checkbox__icon--disabled{cursor:not-allowed}.zt-checkbox__icon--disabled .zt-icon{border:1px solid rgba(255,255,255,.5);box-shadow:-1px -1px 2px 0 #fff,0 0 3px 0 rgba(45,75,115,.2);background-image:-webkit-linear-gradient(316deg,#e1e6eb 0,#e5edf5 100%);background-image:linear-gradient(134deg,#e1e6eb 0,#e5edf5 100%)}.zt-checkbox__icon--disabled.zt-checkbox__icon--checked .zt-icon{opacity:.4;background:#0091fa;color:#fff}.zt-checkbox__label{margin-left:8px;color:#000;line-height:24px}.zt-checkbox__label--left{margin:0 8px 0 0}.zt-checkbox__label--disabled{color:#c8c9cc}.zt-checkbox__disable-icon .zt-checkbox__icon--round:not(.zt-checkbox__icon--disabled,.zt-checkbox__icon--checked){width:18px;height:18px;border-radius:100%;background-image:-webkit-linear-gradient(315deg,#e6ebf0 0,#fff 100%);background-image:linear-gradient(135deg,#e6ebf0 0,#fff 100%);border:1px solid rgba(45,75,115,.13);box-shadow:-1px -1px 2px 0 #fff,0 0 3px 0 rgba(45,75,115,.2)}

package/es/checkbox/index.less

@@ -40,7 +40,6 @@
       font-size: 0.8em;
       line-height: 1.25;
       text-align: center;
-      border: 1px solid @checkbox-border-color;
       transition-duration: @checkbox-transition-duration;
       transition-property: color, border-color, background-color;
     }
@@ -54,8 +53,9 @@
     &--checked {
       .zt-icon {
         color: @white;
-        background-color: @checkbox-checked-icon-color;
-        border-color: @checkbox-checked-icon-color;
+        background: @checkbox-checked-icon-color;
+        box-shadow: inset 1px 1px 2px 0 @gray-a2;
+        border: 1px solid rgba(255,255,255,0.50);
       }
     }
 
@@ -63,15 +63,16 @@
       cursor: not-allowed;
 
       .zt-icon {
-        background-color: @checkbox-disabled-background-color;
-        border-color: @checkbox-disabled-icon-color;
+        border: 1px solid @checkbox-disabled-border-color;
+        box-shadow: -1px -1px 2px 0 #fff, 0 0 3px 0 rgba(45,75,115,0.20);
+        background-image: @gradient-white;
       }
     }
 
     &--disabled&--checked {
       .zt-icon {
         opacity: .4;
-        background-color: @checkbox-checked-icon-color;
+        background: @radio-checked-icon-color;
         color: @white;
       }
     }
@@ -91,3 +92,14 @@
     }
   }
 }
+
+.zt-checkbox__disable-icon {
+  .zt-checkbox__icon--round:not(.zt-checkbox__icon--disabled,.zt-checkbox__icon--checked){
+    width: 18px;
+    height: 18px;
+    border-radius: 100%;
+    background-image: @gradient-white-1;
+    border: 1px solid @radio-border-color;
+    box-shadow: -1px -1px 2px 0 #FFF, 0 0 3px 0 rgba(45,75,115,0.20);
+  }
+}

package/es/checkbox-group/index.js

@@ -14,6 +14,7 @@ export default createComponent({
     direction: String,
     iconSize: [Number, String],
     checkedColor: String,
+    boxShadow: String,
     value: {
       type: Array,
       default: function _default() {

package/es/datetime-picker/style/index.js

@@ -4,4 +4,5 @@ import '../../info/index.css';
 import '../../icon/index.css';
 import '../../popup/index.css';
 import '../../loading/index.css';
+import '../../button/index.css';
 import '../../picker/index.css';

package/es/datetime-picker/style/less.js

@@ -4,4 +4,5 @@ import '../../info/index.less';
 import '../../icon/index.less';
 import '../../popup/index.less';
 import '../../loading/index.less';
+import '../../button/index.less';
 import '../../picker/index.less';

package/es/field/index.css

@@ -1 +1 @@
-.zt-field__root{position:relative;-webkit-box-flex:1;-webkit-flex:1;flex:1;background-color:#fff;padding:10px 16px}.zt-field__root::after{position:absolute;box-sizing:border-box;content:' ';pointer-events:none;right:0;bottom:0;left:16px;border-bottom:1px solid rgba(0,0,0,.1);-webkit-transform:scaleY(.5);transform:scaleY(.5)}.zt-field__root--borderless::after,.zt-field__root:last-child::after{display:none}.zt-field{padding:0;background-color:#fff}.zt-field::after{display:none}.zt-field__label{-webkit-box-flex:0;-webkit-flex:none;flex:none;box-sizing:border-box;width:6.2em;margin-right:12px;color:#646566;text-align:left;word-wrap:break-word;vertical-align:middle}.zt-field__label--center{text-align:center}.zt-field__label--right{text-align:right}.zt-field--disabled .zt-field__label{color:#c8c9cc}.zt-field__value{overflow:visible}.zt-field__body{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center}.zt-field__body input{caret-color:#0091fa}.zt-field__control{display:block;box-sizing:border-box;width:100%;min-width:0;margin:0;padding:0;color:rgba(0,0,0,.6);line-height:inherit;text-align:left;background-color:transparent;border:0;resize:none}.zt-field__control::-webkit-input-placeholder{color:#c8c9cc}.zt-field__control::placeholder{color:#c8c9cc}.zt-field__control:disabled{color:#c8c9cc;cursor:not-allowed;opacity:1;-webkit-text-fill-color:#c8c9cc}.zt-field__control:read-only{cursor:default}.zt-field__control--center{-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;text-align:center}.zt-field__control--right{-webkit-box-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;text-align:right}.zt-field__control--custom{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;min-height:24px}.zt-field__control[type=date],.zt-field__control[type=datetime-local],.zt-field__control[type=time]{min-height:24px}.zt-field__control[type=search]{-webkit-appearance:none}.zt-field__button,.zt-field__clear,.zt-field__icon,.zt-field__right-icon{-webkit-flex-shrink:0;flex-shrink:0}.zt-field__clear,.zt-field__right-icon{margin-right:-8px;padding:0 8px;line-height:inherit}.zt-field__zt-clear-icon{margin-right:-8px;padding:0 8px;height:20px}.zt-field__clear{color:#c8c9cc;font-size:16px;cursor:pointer}.zt-field__left-icon .zt-icon,.zt-field__right-icon .zt-icon{display:block;font-size:16px;line-height:inherit}.zt-field__zt-left-icon{margin-right:4px;height:20px}.zt-field__zt-clear-size,.zt-field__zt-left-icon-size{width:20px;height:20px}.zt-field__left-icon{margin-right:4px}.zt-field__right-icon{color:#969799}.zt-field__button{padding-left:8px}.zt-field__error-message{position:relative;background-color:rgba(230,35,20,.08);margin-top:10px;padding:5px 8px;color:#ff5023;font-size:12px;line-height:20px;text-align:left;word-break:break-all}.zt-field__error-message::after{position:absolute;box-sizing:border-box;content:' ';pointer-events:none;top:0;right:0;left:0;border-top:1px solid #ff5023;-webkit-transform:scaleY(.5);transform:scaleY(.5)}.zt-field__error-message--center{text-align:center}.zt-field__error-message--right{text-align:right}.zt-field__word-limit{margin-top:4px;color:#646566;font-size:12px;line-height:16px;text-align:left}.zt-field--error .zt-field__control::-webkit-input-placeholder{color:#e62314;-webkit-text-fill-color:currentColor}.zt-field--error .zt-field__control,.zt-field--error .zt-field__control::placeholder{color:#e62314;-webkit-text-fill-color:currentColor}.zt-field--error-label span{color:#ff5023}
+.zt-field__root{position:relative;-webkit-box-flex:1;-webkit-flex:1;flex:1;background-color:#fff;padding:10px 16px}.zt-field__root--borderless::after,.zt-field__root:last-child::after{display:none}.zt-field{padding:0}.zt-field::after{display:none}.zt-field__label{-webkit-box-flex:0;-webkit-flex:none;flex:none;box-sizing:border-box;margin-right:12px;color:#646566;text-align:left;word-wrap:break-word;vertical-align:middle;-webkit-box-flex:4;-webkit-flex:4;flex:4}.zt-field__label--center{text-align:center}.zt-field__label--right{text-align:right}.zt-field--disabled .zt-field__label{color:#c8c9cc}.zt-field__value{overflow:visible;-webkit-box-flex:6;-webkit-flex:6;flex:6;-webkit-box-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end}.zt-field__body{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center}.zt-field__body input{caret-color:#0091fa}.zt-field__control{display:block;box-sizing:border-box;width:100%;min-width:0;margin:0;padding:0;color:#2d4b73;line-height:inherit;text-align:left;background-color:transparent;border:0;resize:none;font-size:14px}.zt-field__control::-webkit-input-placeholder{color:#c8c9cc}.zt-field__control::placeholder{color:#c8c9cc}.zt-field__control:disabled{color:#c8c9cc;cursor:not-allowed;opacity:1;-webkit-text-fill-color:#c8c9cc}.zt-field__control:read-only{cursor:default}.zt-field__control--center{-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;text-align:center}.zt-field__control--right{-webkit-box-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;text-align:right}.zt-field__control--custom{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;min-height:24px}.zt-field__control[type=date],.zt-field__control[type=datetime-local],.zt-field__control[type=time]{min-height:24px}.zt-field__control[type=search]{-webkit-appearance:none}.zt-field__button,.zt-field__clear,.zt-field__icon,.zt-field__right-icon{-webkit-flex-shrink:0;flex-shrink:0}.zt-field__clear,.zt-field__right-icon{margin-right:-8px;padding:0 8px;line-height:inherit}.zt-field__zt-clear-icon{margin-right:-8px;padding:0 8px;height:20px}.zt-field__clear{color:#c8c9cc;font-size:16px;cursor:pointer}.zt-field__left-icon .zt-icon,.zt-field__right-icon .zt-icon{display:block;font-size:16px;line-height:inherit}.zt-field__zt-left-icon{margin-right:4px;height:20px}.zt-field__zt-clear-size,.zt-field__zt-left-icon-size{width:20px;height:20px}.zt-field__left-icon{margin-right:4px}.zt-field__right-icon{color:#969799}.zt-field__button{padding-left:8px}.zt-field__error-message{position:relative;background-color:rgba(230,35,20,.08);margin-top:0;padding:5px 8px;color:#ff5023;font-size:12px;line-height:20px;text-align:left;word-break:break-all}.zt-field__error-message::after{position:absolute;box-sizing:border-box;content:' ';pointer-events:none;top:0;right:0;left:0;border-top:1px solid #ff5023;-webkit-transform:scaleY(.5);transform:scaleY(.5)}.zt-field__error-message--center{text-align:center}.zt-field__error-message--right{text-align:right}.zt-field__word-limit{margin-top:4px;color:#646566;font-size:12px;line-height:16px;text-align:left}.zt-field--error .zt-field__control::-webkit-input-placeholder{color:#e62314;-webkit-text-fill-color:currentColor}.zt-field--error .zt-field__control,.zt-field--error .zt-field__control::placeholder{color:#e62314;-webkit-text-fill-color:currentColor}.zt-field--error-label span{color:#ff5023}.zt-field__column{background-color:#f5faff}.zt-field__column .zt-field__label{margin-right:0;line-height:20px}.zt-field__column .zt-field__label-content{color:#2d4b73}.zt-field__column .zt-field__value{-webkit-box-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start}.zt-field__column .zt-field__value .zt-field__body{-webkit-box-flex:8;-webkit-flex:8;flex:8}.zt-field__column .zt-field__value .zt-field__body textarea{padding-bottom:16px}.zt-field__column .zt-field__word-limit{position:absolute;bottom:12px}.zt-field__column .zt-field__no-error{background:rgba(45,75,115,.04);color:rgba(45,75,115,.6)}.zt-field__column .zt-field__no-error::after{position:absolute;box-sizing:border-box;content:' ';pointer-events:none;top:0;right:0;left:0;border-top:1px solid #000;-webkit-transform:scaleY(.5);transform:scaleY(.5);opacity:.2}

package/es/field/index.js

@@ -68,7 +68,7 @@ export default createComponent({
     },
     error: {
       type: Boolean,
-      default: null
+      default: false
     },
     colon: {
       type: Boolean,
@@ -585,7 +585,7 @@ export default createComponent({
       if (message) {
         var errorMessageAlign = this.getProp('errorMessageAlign');
         return h("div", {
-          "class": bem('error-message', errorMessageAlign)
+          "class": [bem('error-message', errorMessageAlign), this.error ? '' : bem('no-error')]
         }, [message]);
       }
     },
@@ -607,12 +607,14 @@ export default createComponent({
       }
 
       if (this.label) {
-        return h("span", [this.label + colon]);
+        return h("span", {
+          "class": bem('label-content')
+        }, [this.label + colon]);
       }
     }
   },
   render: function render() {
-    var _bem;
+    var _bem2;
 
     var h = arguments[0];
     var slots = this.slots;
@@ -637,6 +639,76 @@ export default createComponent({
       };
     }
 
+    if (this.direction === 'column') {
+      var _bem;
+
+      return h("div", {
+        "class": [bem('root'), bem("column")]
+      }, [h(Cell, {
+        "attrs": {
+          "icon": this.leftIcon,
+          "size": this.size,
+          "center": this.center,
+          "border": this.border,
+          "isLink": this.isLink,
+          "required": this.required,
+          "clickable": this.clickable,
+          "titleStyle": this.labelStyle,
+          "valueClass": bem('value'),
+          "titleClass": [bem('label', labelAlign), this.labelClass, {
+            'zt-field--error-label': this.showErrorMessage
+          }],
+          "arrowDirection": this.arrowDirection,
+          "noFlex": this.type === 'textarea',
+          "direction": this.direction
+        },
+        "scopedSlots": scopedSlots,
+        "class": bem((_bem = {
+          error: this.showError,
+          disabled: disabled
+        }, _bem["label-" + labelAlign] = labelAlign, _bem['min-height'] = this.type === 'textarea' && !this.autosize, _bem)),
+        "on": {
+          "click": this.onClick
+        }
+      }, [h("div", {
+        "class": bem('body')
+      }, [this.genInput(), this.showClear &&
+      /*<Icon
+        name="clear"
+        class={bem('clear')}
+        onTouchstart={this.onClear}
+      />*/
+      h("div", {
+        "class": bem('zt-clear-icon'),
+        "on": {
+          "touchstart": this.onClear,
+          "click": this.onClear
+        }
+      }, [h(ClearIcon, {
+        "class": bem('zt-clear-size'),
+        "attrs": {
+          "color": this.iconColor
+        }
+      })]), this.type === 'password' && h("div", {
+        "on": {
+          "click": this.togglePwdVisible
+        },
+        "style": "width:20px;height:20px;margin-left:12px;display:flex;justify-content:center;align-items:center;color:rgba(0,0,0,.4);"
+      }, [this.showPassword ? h(Icon, {
+        "attrs": {
+          "name": "eye-open",
+          "color": this.iconColor
+        }
+      }) : h(Icon, {
+        "attrs": {
+          "name": "eye-closed",
+          "color": this.iconColor
+        }
+      })]), this.genWordLimit(), this.genRightIcon(), slots('button') && h("div", {
+        "class": bem('button')
+      }, [slots('button')])])]), this.genMessage()]);
+    }
+
     return h("div", {
       "class": bem('root')
     }, [h(Cell, {
@@ -654,13 +726,14 @@ export default createComponent({
           'zt-field--error-label': this.showErrorMessage
         }],
         "arrowDirection": this.arrowDirection,
-        "noFlex": this.type === 'textarea'
+        "noFlex": this.type === 'textarea',
+        "direction": this.direction
       },
       "scopedSlots": scopedSlots,
-      "class": bem((_bem = {
+      "class": bem((_bem2 = {
         error: this.showError,
         disabled: disabled
-      }, _bem["label-" + labelAlign] = labelAlign, _bem['min-height'] = this.type === 'textarea' && !this.autosize, _bem)),
+      }, _bem2["label-" + labelAlign] = labelAlign, _bem2['min-height'] = this.type === 'textarea' && !this.autosize, _bem2)),
       "on": {
         "click": this.onClick
       }