zartui 2.0.1 → 2.0.2

package/es/button/index.css

@@ -1 +1 @@
-.zt-button{position:relative;display:inline-block;box-sizing:border-box;height:44px;margin:0;padding:0;font-size:16px;line-height:calc(var(16px) * 2 - 8px);text-align:center;border-radius:22px;cursor:pointer;-webkit-transition:opacity .2s;transition:opacity .2s;-webkit-appearance:none}.zt-button::before{position:absolute;top:50%;left:50%;width:100%;height:100%;background-color:#000;border:inherit;border-color:#000;border-radius:inherit;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);opacity:0;content:' '}.zt-button:active::before{opacity:.1}.zt-button--disabled::before,.zt-button--loading::before{display:none}.zt-button--default{color:#2d4b73;background:#f5faff;border:1px solid rgba(45,75,115,.2)}.zt-button--primary{color:#fff;background:-webkit-linear-gradient(135deg,#3cafff 0,#0091fa 100%);background:linear-gradient(-45deg,#3cafff 0,#0091fa 100%);border:1px solid #3caafa}.zt-button--primary-light{color:#0091fa;background:rgba(1,144,250,.1);border:none}.zt-button--danger{color:#fff;background:#ff5a5a;border:1px solid #ff5a5a}.zt-button--warning{color:#fff;background:#fa8500;border:1px solid #fa8500}.zt-button--success{color:#fff;background:#00e173;border:1px solid #00e173}.zt-button--plain{background:#f5faff}.zt-button--plain.zt-button--primary{color:#3caafa}.zt-button--plain.zt-button--danger{color:#ff5a5a}.zt-button--plain.zt-button--warning{color:#fa8500}.zt-button--plain.zt-button--success{color:#00e173}.zt-button--large{width:100%;height:50px}.zt-button--normal{padding:0 24px;font-size:16px}.zt-button--medium{height:36px;padding:0 16px;font-size:14px}.zt-button--small{height:28px;padding:0 12px;font-size:14px}.zt-button__loading{color:inherit;font-size:inherit}.zt-button--mini{height:24px;padding:0 12px;font-size:12px}.zt-button--mini+.zt-button--mini{margin-left:4px}.zt-button--block{display:block;width:100%}.zt-button--block-inner{display:block;width:calc(100% - 2 * 16px);margin:0 16px}.zt-button--disabled{cursor:not-allowed;opacity:.4}.zt-button--loading{cursor:default}.zt-button--round{border-radius:999px;padding:0}.zt-button--round.zt-button--mini{width:24px}.zt-button--round.zt-button--small{width:28px}.zt-button--round.zt-button--medium{width:36px}.zt-button--round.zt-button--normal{width:44px}.zt-button--square{border-radius:0}.zt-button__content{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;height:100%}.zt-button__content::before{content:' '}.zt-button__icon{font-size:24px}.zt-button__icon--mini{font-size:16px}.zt-button__icon--small{font-size:20px}.zt-button__icon--medium{font-size:20px}.zt-button__icon+.zt-button__text,.zt-button__loading+.zt-button__text,.zt-button__text+.zt-button__icon,.zt-button__text+.zt-button__loading{margin-left:2px}.zt-button--hairline{border-width:0}.zt-button--hairline::after{border-color:inherit;border-radius:44px}.zt-button--hairline.zt-button--round::after{border-radius:999px}.zt-button--hairline.zt-button--square::after{border-radius:0}
+.zt-button{position:relative;display:inline-block;box-sizing:border-box;height:44px;margin:0;padding:0;font-size:16px;line-height:calc(var(16px) * 2 - 8px);text-align:center;border-radius:22px;cursor:pointer;-webkit-transition:opacity .2s;transition:opacity .2s;-webkit-appearance:none}.zt-button::before{position:absolute;top:50%;left:50%;width:100%;height:100%;background-color:#000;border:inherit;border-color:#000;border-radius:inherit;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);opacity:0;content:' '}.zt-button:active::before{opacity:.1}.zt-button--disabled::before,.zt-button--loading::before{display:none}.zt-button--default{color:#2d4b73;background:#f5faff;border:1px solid rgba(45,75,115,.2)}.zt-button--primary{color:#fff;background:-webkit-linear-gradient(135deg,#3cafff 0,#0091fa 100%);background:linear-gradient(-45deg,#3cafff 0,#0091fa 100%);border:1px solid #3caafa}.zt-button--primary-light{color:#0091fa;background:rgba(1,144,250,.1);border:none}.zt-button--danger{color:#fff;background:#ff5a5a;border:1px solid #ff5a5a}.zt-button--warning{color:#fff;background:#fa8500;border:1px solid #fa8500}.zt-button--success{color:#fff;background:#00e173;border:1px solid #00e173}.zt-button--plain{background:0 0}.zt-button--plain.zt-button--primary{color:#3caafa}.zt-button--plain.zt-button--danger{color:#ff5a5a}.zt-button--plain.zt-button--warning{color:#fa8500}.zt-button--plain.zt-button--success{color:#00e173}.zt-button--large{width:100%;height:50px}.zt-button--normal{padding:0 24px;font-size:16px}.zt-button--medium{height:36px;padding:0 16px;font-size:14px}.zt-button--small{height:28px;padding:0 12px;font-size:14px}.zt-button__loading{color:inherit;font-size:inherit}.zt-button--mini{height:24px;padding:0 12px;font-size:12px}.zt-button--mini+.zt-button--mini{margin-left:4px}.zt-button--block{display:block;width:100%}.zt-button--block-inner{display:block;width:calc(100% - 2 * 16px);margin:0 16px}.zt-button--disabled{cursor:not-allowed;opacity:.4}.zt-button--loading{cursor:default}.zt-button--round{border-radius:999px;padding:0}.zt-button--round.zt-button--mini{width:24px}.zt-button--round.zt-button--small{width:28px}.zt-button--round.zt-button--medium{width:36px}.zt-button--round.zt-button--normal{width:44px}.zt-button--square{border-radius:0}.zt-button__content{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;height:100%}.zt-button__content::before{content:' '}.zt-button__icon{font-size:24px}.zt-button__icon--mini{font-size:16px}.zt-button__icon--small{font-size:20px}.zt-button__icon--medium{font-size:20px}.zt-button__icon+.zt-button__text,.zt-button__loading+.zt-button__text,.zt-button__text+.zt-button__icon,.zt-button__text+.zt-button__loading{margin-left:2px}.zt-button--hairline{border-width:0}.zt-button--hairline::after{border-color:inherit;border-radius:44px}.zt-button--hairline.zt-button--round::after{border-radius:999px}.zt-button--hairline.zt-button--square::after{border-radius:0}

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: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)}
+.zt-cell{position:relative;display:-webkit-box;display:-webkit-flex;display:flex;box-sizing:border-box;width:100%;padding:12px 16px;overflow:hidden;color:#2d4b73;font-size:16px;line-height:20px;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__value{-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:20px;font-size:16px;line-height:20px}.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;-webkit-box-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start}.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

@@ -24,7 +24,7 @@ function Cell(h, props, slots, ctx) {
       placeholder = props.placeholder,
       direction = props.direction,
       subtitle = props.subtitle;
-  var showTitle = slots.title || isDef(title);
+  var showTitle = slots.title || isDef(title) || icon || slots.icon;
   var clickable = (_props$clickable = props.clickable) != null ? _props$clickable : isLink;
 
   function Label() {
@@ -105,14 +105,14 @@ function Cell(h, props, slots, ctx) {
       return h(Icon, {
         "class": bem('right-icon'),
         "attrs": {
-          "name": arrowDirection ? "arrow-" + arrowDirection : 'arrow'
+          "name": arrowDirection ? "arrow-" + arrowDirection : 'arrow-right'
         }
       });
     }
   }
 
   function Value() {
-    var showValue = slots.default || isDef(value) || clickable;
+    var showValue = slots.default || isDef(value) || clickable || slots['right-icon'];
 
     if (showValue) {
       return h("div", {

package/es/cell/index.less

@@ -45,11 +45,10 @@
     &-content {
       flex: 18;
     }
-    .zt-icon {
-      flex: 1;
-      display: flex;
-      justify-content: flex-end;
-    }
+
+  }
+  &__value {
+    justify-content: flex-end;
   }
 
   &__placeholder {
@@ -141,6 +140,7 @@
     box-sizing: border-box;
     background-color: white;
     align-items: center;
+    justify-content: flex-start;
     .zt-icon {
       flex: 2;
       display: flex;

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: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)}
+.zt-checkbox{display:-webkit-box;display:-webkit-flex;display:flex;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:20px;line-height:1em;cursor:pointer}.zt-checkbox__icon .zt-icon{display:block;box-sizing:border-box;width:1em;height:1em;color:transparent;font-size:1em;line-height:.95em;text-align:center;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);-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{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;align-items:center;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:20px}.zt-checkbox__label--left{margin:0 8px 0 0}.zt-checkbox__label--disabled{color:#c8c9cc}

package/es/checkbox/index.less

@@ -2,7 +2,6 @@
 
 .zt-checkbox {
   display: flex;
-  align-items: center;
   overflow: hidden;
   cursor: pointer;
   user-select: none;
@@ -26,26 +25,28 @@
     font-size: @checkbox-size;
     line-height: 1em;
     cursor: pointer;
-    i, img {
-      transform: scale(0.8333);
-      transform-origin: center;
-    }
 
     .zt-icon {
       display: block;
       box-sizing: border-box;
-      width: 1.25em;
-      height: 1.25em;
+      width: 1em;
+      height: 1em;
       color: transparent;
-      font-size: 0.8em;
-      line-height: 1.25;
+      font-size: 1em;
+      line-height: 0.95em;
       text-align: center;
+      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);
       transition-duration: @checkbox-transition-duration;
       transition-property: color, border-color, background-color;
     }
 
     &--round {
       .zt-icon {
+        display: flex;
+        justify-content: center;
+        align-items: center;
         border-radius: 100%;
       }
     }
@@ -93,13 +94,3 @@
   }
 }
 
-.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/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--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}
+.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;font-size:14px;line-height:20px}.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-content{color:#2d4b73}.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;width:100%}.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;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:20px}.zt-field__control[type=date],.zt-field__control[type=datetime-local],.zt-field__control[type=time]{min-height:20px}.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;color:rgba(45,75,115,.4)}.zt-field__left-icon{margin-right:4px}.zt-field__right-icon{color:#969799}.zt-field__button{padding:0 8px 0 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{color:#646566;font-size:12px;line-height:20px;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__right-icon-box{position:absolute;right:12px;bottom:12px;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center}.zt-field__column .zt-field__right-icon-box-row{-webkit-flex-shrink:0;flex-shrink:0}.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

@@ -51,7 +51,10 @@ export default createComponent({
     labelWidth: [Number, String],
     labelClass: null,
     labelAlign: String,
-    inputAlign: String,
+    inputAlign: {
+      type: String,
+      default: 'left'
+    },
     placeholder: String,
     errorMessage: String,
     errorMessageAlign: String,
@@ -525,7 +528,10 @@ export default createComponent({
           "on": {
             "click": this.onClickLeftIcon
           }
-        }, [h(SearchIcon, {
+        }, [h(Icon, {
+          "attrs": {
+            "name": "search"
+          },
           "class": bem('zt-left-icon-size')
         })]);
       } else if (this.leftIcon) {
@@ -704,9 +710,15 @@ export default createComponent({
           "name": "eye-closed",
           "color": this.iconColor
         }
-      })]), this.genWordLimit(), this.genRightIcon(), slots('button') && h("div", {
+      })]), this.genWordLimit(), this.type === "textarea" ? h("div", {
+        "class": bem("right-icon-box")
+      }, [this.genRightIcon(), slots('button') && h("div", {
+        "class": bem('button')
+      }, [slots('button')])]) : h("div", {
+        "class": bem("right-icon-box-row")
+      }, [this.genRightIcon(), slots('button') && h("div", {
         "class": bem('button')
-      }, [slots('button')])])]), this.genMessage()]);
+      }, [slots('button')])])])]), this.genMessage()]);
     }
 
     return h("div", {

package/es/field/index.less

@@ -20,6 +20,8 @@
 .zt-field {
   padding: 0;
   // background-color: @field-background-color;
+  font-size: 14px;
+  line-height: 20px;
   &::after {
     display: none;
   }
@@ -34,6 +36,10 @@
     word-wrap: break-word;
     vertical-align: middle;
     flex: 4;
+    &-content {
+      color: #2D4B73;
+
+    }
     &--center {
       text-align: center;
     }
@@ -58,6 +64,7 @@
   &__body {
     display: flex;
     align-items: center;
+    width: 100%;
     input {
       caret-color: @blue;
     }
@@ -73,7 +80,6 @@
     padding: 0;
     color: #2D4B73;
     line-height: inherit;
-    text-align: left;
     background-color: transparent;
     border: 0;
     resize: none;
@@ -164,6 +170,7 @@
   &__zt-left-icon-size, &__zt-clear-size {
     width: @field-zt-icon-size;
     height: @field-zt-icon-size;
+    color: @field-zt-icon-color;
   }
 
   &__left-icon {
@@ -175,7 +182,7 @@
   }
 
   &__button {
-    padding-left: @padding-xs;
+    padding: 0 @padding-xs 0 @padding-xs;
   }
 
   &__error-message {
@@ -206,7 +213,7 @@
 
 
   &__word-limit {
-    margin-top: @padding-base;
+    // margin-top: @padding-base;
     color: @field-word-limit-color;
     font-size: @field-word-limit-font-size;
     line-height: @field-word-limit-line-height;
@@ -247,6 +254,17 @@
       color: #2D4B73;
     }
   }
+  .zt-field__right-icon-box {
+    position: absolute;
+    right: 12px;
+    bottom: 12px;
+    display: flex;
+    align-items: center;
+  }
+
+  .zt-field__right-icon-box-row {
+    flex-shrink: 0;
+  }
 
   .zt-field__value {
     justify-content: flex-start;

package/es/index.js

@@ -75,7 +75,7 @@ import Tag from './tag';
 import Timeline from './timeline';
 import Toast from './toast';
 import Uploader from './uploader';
-var version = '2.0.1';
+var version = '2.0.2';
 
 function install(Vue) {
   var components = [ActionSheet, Area, Avatar, BackTop, Badge, Button, Calendar, Cascader, Cell, CellGroup, Checkbox, CheckboxGroup, Col, Collapse, CollapseItem, CountDown, DatetimePicker, Dialog, Divider, DropdownItem, DropdownMenu, Empty, Field, FoldDialog, Form, Grid, GridItem, HierarchySelect, Icon, Image, ImagePreview, IndexAnchor, IndexBar, Info, Lazyload, List, Loading, Locale, MediaPicker, MediaPlayer, MultiplePicker, NavBar, NoticeBar, NumberKeyboard, Overlay, PasswordInput, PdfViewer, Picker, Popover, Popup, PullRefresh, Radio, RadioGroup, Rate, Row, Search, Signature, Skeleton, Slider, Step, Stepper, Steps, Sticky, Swipe, SwipeCell, SwipeItem, Switch, SwitchCell, Tab, Tabbar, TabbarItem, Table, Tabs, Tag, Timeline, Toast, Uploader];

package/es/media-picker/index.js

@@ -1,15 +1,15 @@
 // Utils
-import { createNamespace, isDef, isPromise, noop } from '../utils'; // Types
+import { createNamespace, isDef, isPromise, noop } from '../utils';
+import Icon from "../icon";
+import Loading from "../loading";
+import ZtImage from "../image";
+import ZtGridItem from "../grid-item";
+import ZtMediaPlayer from "../media-player";
+import ZtActionSheet from "../action-sheet";
+import ZtGrid from "../grid"; // Types
 
 import { MediaAddType, MediaType, Media, MediaUploadStatus } from "./type";
-import { checkWatermarkConfigSupported, CompressOptions, file2DataURL, ImageProcessor, ResizeOptions, WatermarkOptions } from "@egova/media"; // 单个文件最大限制，单位为M（目前限制是100M）
-
-var FILE_SIZE_LIMIT = 100;
-
-var _createNamespace = createNamespace('media-picker'),
-    createComponent = _createNamespace[0],
-    bem = _createNamespace[1]; // import components
-
+import { checkWatermarkConfigSupported, CompressOptions, file2DataURL, ImageProcessor, ResizeOptions, WatermarkOptions } from "@egova/media"; // import components
 
 import Toast from '../toast';
 import ImagePreview from "../image-preview"; // Images
@@ -23,9 +23,14 @@ import DeleteIcon from "./image/DeleteIcon";
 import DefaultVideoIcon from "./image/DefaultVideoIcon";
 import DefaultAudioIcon from "./image/DefaultAudioIcon";
 import DefaultFileIcon from "./image/DefaultFileIcon";
-import { getFileUniqueCode, getUniqueFileName, isAudioType, isImageType, isVideoType } from "./media-util";
-import Icon from "../icon";
-import Loading from "../loading";
+import { getFileUniqueCode, getUniqueFileName, isAudioType, isImageType, isVideoType } from "./media-util"; // 单个文件最大限制，单位为M（目前限制是100M）
+
+var FILE_SIZE_LIMIT = 100;
+
+var _createNamespace = createNamespace('media-picker'),
+    createComponent = _createNamespace[0],
+    bem = _createNamespace[1];
+
 export default createComponent({
   props: {
     disabled: Boolean,
@@ -885,7 +890,7 @@ export default createComponent({
       var h = this.$createElement;
 
       if (media.showSrc) {
-        return h("zt-image", {
+        return h(ZtImage, {
           "attrs": {
             "src": media.showSrc,
             "fit": 'fill',
@@ -922,7 +927,7 @@ export default createComponent({
             }
           }
         });
-        return h("zt-grid-item", {
+        return h(ZtGridItem, {
           "key": media.uniqueCode,
           "on": {
             "click": function click() {
@@ -946,7 +951,7 @@ export default createComponent({
     }, [this.title]);
     return h("div", {
       "class": bem()
-    }, [title, this.hiddenInput(), h("zt-media-player", {
+    }, [title, this.hiddenInput(), h(ZtMediaPlayer, {
       "attrs": {
         "mediaType": this.mediaTypeToPlay,
         "mediaUrl": this.mediaUrlToPlay
@@ -957,7 +962,7 @@ export default createComponent({
           _this9.mediaPlayerVisible = $$v;
         }
       }
-    }), h("zt-action-sheet", {
+    }), h(ZtActionSheet, {
       "attrs": {
         "actions": this.actionOptions,
         "title": '请选择',
@@ -975,7 +980,7 @@ export default createComponent({
       }
     }), h("div", {
       "class": bem('line')
-    }, [this.renderButtons()]), h("zt-grid", {
+    }, [this.renderButtons()]), h(ZtGrid, {
       "directives": [{
         name: "show",
         value: this.mediaList.length

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

@@ -3,10 +3,14 @@ import '../../overlay/index.css';
 import '../../info/index.css';
 import '../../icon/index.css';
 import '../../image/index.css';
+import '../../grid-item/index.css';
 import '../../popup/index.css';
 import '../../loading/index.css';
 import '../../toast/index.css';
+import '../../action-sheet/index.css';
+import '../../grid/index.css';
 import '../../swipe/index.css';
 import '../../swipe-item/index.css';
 import '../../image-preview/index.css';
+import '../../media-player/index.css';
 import '../index.css';

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

@@ -3,10 +3,14 @@ import '../../overlay/index.less';
 import '../../info/index.less';
 import '../../icon/index.less';
 import '../../image/index.less';
+import '../../grid-item/index.less';
 import '../../popup/index.less';
 import '../../loading/index.less';
 import '../../toast/index.less';
+import '../../action-sheet/index.less';
+import '../../grid/index.less';
 import '../../swipe/index.less';
 import '../../swipe-item/index.less';
 import '../../image-preview/index.less';
+import '../../media-player/index.less';
 import '../index.less';

package/es/popup/index.css

@@ -1 +1 @@
-.zt-overflow-hidden{overflow:hidden!important}.zt-popup{position:fixed;max-height:100%;overflow-y:auto;background-color:#fff;-webkit-transition:-webkit-transform .3s;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s;-webkit-overflow-scrolling:touch}.zt-popup--center{top:50%;left:50%;-webkit-transform:translate3d(-50%,-50%,0);transform:translate3d(-50%,-50%,0)}.zt-popup--center.zt-popup--round{border-radius:16px}.zt-popup--top{top:0;left:0;width:100%}.zt-popup--top.zt-popup--round{border-radius:0 0 16px 16px}.zt-popup--right{top:50%;right:0;-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0)}.zt-popup--right.zt-popup--round{border-radius:16px 0 0 16px}.zt-popup--bottom{bottom:0;left:0;width:100%}.zt-popup--bottom.zt-popup--round{border-radius:16px 16px 0 0}.zt-popup--left{top:50%;left:0;-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0)}.zt-popup--left.zt-popup--round{border-radius:0 16px 16px 0}.zt-popup--safe-area-inset-bottom{padding-bottom:constant(safe-area-inset-bottom);padding-bottom:env(safe-area-inset-bottom)}.zt-popup-slide-bottom-enter-active,.zt-popup-slide-left-enter-active,.zt-popup-slide-right-enter-active,.zt-popup-slide-top-enter-active{-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out}.zt-popup-slide-bottom-leave-active,.zt-popup-slide-left-leave-active,.zt-popup-slide-right-leave-active,.zt-popup-slide-top-leave-active{-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in}.zt-popup-slide-top-enter,.zt-popup-slide-top-leave-active{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}.zt-popup-slide-right-enter,.zt-popup-slide-right-leave-active{-webkit-transform:translate3d(100%,-50%,0);transform:translate3d(100%,-50%,0)}.zt-popup-slide-bottom-enter,.zt-popup-slide-bottom-leave-active{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}.zt-popup-slide-left-enter,.zt-popup-slide-left-leave-active{-webkit-transform:translate3d(-100%,-50%,0);transform:translate3d(-100%,-50%,0)}.zt-popup__close-icon{position:absolute;z-index:1;color:rgba(45,75,115,.6);font-size:24px;cursor:pointer}.zt-popup__close-icon:active{color:#969799}.zt-popup__close-icon--top-left{top:12px;left:16px}.zt-popup__close-icon--top-right{top:12px;right:16px}.zt-popup__close-icon--bottom-left{bottom:16px;left:16px}.zt-popup__close-icon--bottom-right{right:16px;bottom:16px}
+.zt-overflow-hidden{overflow:hidden!important}.zt-popup{position:fixed;max-height:100%;overflow-y:auto;background-color:#fff;-webkit-transition:-webkit-transform .3s;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s;-webkit-overflow-scrolling:touch}.zt-popup__slider{position:fixed;width:100%;bottom:0;border-radius:16px 16px 0 0;background-color:#fff}.zt-popup__slider-title{height:40px;text-align:center}.zt-popup__slider-bar{display:inline-block;width:32px;height:4px;-webkit-transform:scaleY(-1);transform:scaleY(-1);background:rgba(45,75,115,.2);border-radius:3px}.zt-popup__slider-content{overflow-y:auto}.zt-popup--center{top:50%;left:50%;-webkit-transform:translate3d(-50%,-50%,0);transform:translate3d(-50%,-50%,0)}.zt-popup--center.zt-popup--round{border-radius:16px}.zt-popup--top{top:0;left:0;width:100%}.zt-popup--top.zt-popup--round{border-radius:0 0 16px 16px}.zt-popup--right{top:50%;right:0;-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0)}.zt-popup--right.zt-popup--round{border-radius:16px 0 0 16px}.zt-popup--bottom{bottom:0;left:0;width:100%}.zt-popup--bottom.zt-popup--round{border-radius:16px 16px 0 0}.zt-popup--left{top:50%;left:0;-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0)}.zt-popup--left.zt-popup--round{border-radius:0 16px 16px 0}.zt-popup--safe-area-inset-bottom{padding-bottom:constant(safe-area-inset-bottom);padding-bottom:env(safe-area-inset-bottom)}.zt-popup-slide-bottom-enter-active,.zt-popup-slide-left-enter-active,.zt-popup-slide-right-enter-active,.zt-popup-slide-top-enter-active{-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out}.zt-popup-slide-bottom-leave-active,.zt-popup-slide-left-leave-active,.zt-popup-slide-right-leave-active,.zt-popup-slide-top-leave-active{-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in}.zt-popup-slide-top-enter,.zt-popup-slide-top-leave-active{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}.zt-popup-slide-right-enter,.zt-popup-slide-right-leave-active{-webkit-transform:translate3d(100%,-50%,0);transform:translate3d(100%,-50%,0)}.zt-popup-slide-bottom-enter,.zt-popup-slide-bottom-leave-active{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}.zt-popup-slide-left-enter,.zt-popup-slide-left-leave-active{-webkit-transform:translate3d(-100%,-50%,0);transform:translate3d(-100%,-50%,0)}.zt-popup__slider-icon{z-index:1;color:rgba(45,75,115,.6);font-size:24px;cursor:pointer}.zt-popup__close-icon{position:absolute;z-index:1;color:rgba(45,75,115,.6);font-size:24px;cursor:pointer}.zt-popup__close-icon:active{color:#969799}.zt-popup__close-icon--top-left{top:12px;left:16px}.zt-popup__close-icon--top-right{top:12px;right:16px}.zt-popup__close-icon--bottom-left{bottom:16px;left:16px}.zt-popup__close-icon--bottom-right{right:16px;bottom:16px}

package/es/popup/index.js

@@ -37,6 +37,14 @@ export default createComponent({
     customOnClickOverlay: {
       type: Function,
       default: null
+    },
+    sliderContentHeight: {
+      type: Number,
+      default: 60
+    },
+    sliderShow: {
+      type: Boolean,
+      default: false
     }
   },
   beforeCreate: function beforeCreate() {
@@ -52,71 +60,134 @@ export default createComponent({
     this.onOpened = createEmitter('opened');
     this.onClosed = createEmitter('closed');
   },
+  data: function data() {
+    return {
+      positionY: 0,
+      timerId: null,
+      contentStyle: "height:" + this.sliderContentHeight + "px;",
+      touchHeight: 0
+    };
+  },
   methods: {
     onClickCloseIcon: function onClickCloseIcon(event) {
       this.$emit('click-close-icon', event);
       this.close();
     },
     onClickOverlay: function onClickOverlay() {
+      if (this.sliderShow) {
+        this.contentStyle = 'height:60px';
+      }
+
       if (this.customOnClickOverlay) {
         this.customOnClickOverlay();
       } else if (this.closeOnClickOverlay) {
         this.close();
       }
+    },
+    move: function move(event) {
+      var _this2 = this;
+
+      if (this.timerId) {
+        event.preventDefault();
+      }
+
+      var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
+      this.positionY = event.touches[0].clientY;
+      this.timerId = setTimeout(function () {
+        if (_this2.positionY === 0 || _this2.positionY < h * 0.15) {
+          return;
+        }
+
+        _this2.touchHeight = _this2.positionY - 40 > h - 40 ? h - 40 : _this2.positionY;
+        _this2.contentStyle = "height:" + (h - _this2.touchHeight - 40) + "px;";
+      }, 10);
+    },
+    endMove: function endMove() {
+      clearInterval(this.timerId);
+      this.timerId = null;
+    },
+    startMove: function startMove() {
+      if (this.timerId) {
+        clearInterval(this.timerId);
+      }
+    },
+    allowSliderRender: function allowSliderRender() {
+      var h = this.$createElement;
+      return h("div", {
+        "class": bem('slider'),
+        "directives": [{
+          name: "show",
+          value: this.value
+        }]
+      }, [h("div", {
+        "class": bem('slider-title'),
+        "on": {
+          "touchmove": this.move,
+          "touchend": this.endMove,
+          "touchstart": this.startMove
+        }
+      }, [h("div", {
+        "class": bem('slider-bar')
+      })]), h("div", {
+        "class": bem('slider-content'),
+        "style": this.contentStyle
+      }, [this.slots()])]);
+    },
+    popupRender: function popupRender() {
+      var _bem;
+
+      var h = this.$createElement;
+      var round = this.round,
+          position = this.position,
+          duration = this.duration;
+      var isCenter = position === 'center';
+      var transitionName = this.transition || (isCenter ? 'zt-fade' : "zt-popup-slide-" + position);
+      var style = {};
+
+      if (isDef(duration)) {
+        var key = isCenter ? 'animationDuration' : 'transitionDuration';
+        style[key] = duration + "s";
+      }
+
+      return h("transition", {
+        "attrs": {
+          "appear": this.transitionAppear,
+          "name": transitionName
+        },
+        "on": {
+          "afterEnter": this.onOpened,
+          "afterLeave": this.onClosed
+        }
+      }, [h("div", {
+        "directives": [{
+          name: "show",
+          value: this.value
+        }],
+        "style": style,
+        "class": bem((_bem = {
+          round: round
+        }, _bem[position] = position, _bem['safe-area-inset-bottom'] = this.safeAreaInsetBottom, _bem)),
+        "on": {
+          "click": this.onClick
+        }
+      }, [this.slots(), this.closeable && h(Icon, {
+        "attrs": {
+          "role": "button",
+          "tabindex": "0",
+          "name": this.closeIcon
+        },
+        "class": bem('close-icon', this.closeIconPosition),
+        "on": {
+          "click": this.onClickCloseIcon
+        }
+      })])]);
     }
   },
   render: function render() {
-    var _bem;
-
-    var h = arguments[0];
-
     if (!this.shouldRender) {
       return;
     }
 
-    var round = this.round,
-        position = this.position,
-        duration = this.duration;
-    var isCenter = position === 'center';
-    var transitionName = this.transition || (isCenter ? 'zt-fade' : "zt-popup-slide-" + position);
-    var style = {};
-
-    if (isDef(duration)) {
-      var key = isCenter ? 'animationDuration' : 'transitionDuration';
-      style[key] = duration + "s";
-    }
-
-    return h("transition", {
-      "attrs": {
-        "appear": this.transitionAppear,
-        "name": transitionName
-      },
-      "on": {
-        "afterEnter": this.onOpened,
-        "afterLeave": this.onClosed
-      }
-    }, [h("div", {
-      "directives": [{
-        name: "show",
-        value: this.value
-      }],
-      "style": style,
-      "class": bem((_bem = {
-        round: round
-      }, _bem[position] = position, _bem['safe-area-inset-bottom'] = this.safeAreaInsetBottom, _bem)),
-      "on": {
-        "click": this.onClick
-      }
-    }, [this.slots(), this.closeable && h(Icon, {
-      "attrs": {
-        "role": "button",
-        "tabindex": "0",
-        "name": this.closeIcon
-      },
-      "class": bem('close-icon', this.closeIconPosition),
-      "on": {
-        "click": this.onClickCloseIcon
-      }
-    })])]);
+    return this.sliderShow ? this.allowSliderRender() : this.popupRender();
   }
 });