zartui 0.1.52 → 0.1.55

package/es/cascader/index.css

@@ -0,0 +1 @@
+.zt-cascader__header{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;height:44px;padding:0 16px}.zt-cascader__title{font-weight:700;font-size:16px;line-height:44px}.zt-cascader__close-icon{color:rgba(0,0,0,.4);font-size:20px}.zt-cascader__close-icon:active{color:rgba(0,0,0,.6)}.zt-cascader__tabs .zt-tab{-webkit-box-flex:0;-webkit-flex:none;flex:none;margin:0 8px;padding:0}.zt-cascader__tabs.zt-tabs--line .zt-tabs__wrap{height:48px}.zt-cascader__tabs .zt-tabs__nav--complete{padding-right:8px;padding-left:8px}.zt-cascader__tab{color:#000;font-weight:700;font-size:14px;line-height:44px}.zt-cascader__tab--unselected{color:rgba(0,0,0,.4);font-weight:400}.zt-cascader__option{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;padding:0 16px;font-weight:700;font-size:16px;line-height:44px}.zt-cascader__option:active{background-color:rgba(0,0,0,.04)}.zt-cascader__option--selected{color:#0091fa}.zt-cascader__selected-icon{font-size:24px}.zt-cascader__options{box-sizing:border-box;height:352px;overflow-y:auto;-webkit-overflow-scrolling:touch}

package/es/cascader/index.js

@@ -0,0 +1,286 @@
+import { createNamespace } from '../utils';
+import Tab from '../tab';
+import Tabs from '../tabs';
+import Icon from '../icon';
+import Divider from "../divider";
+
+var _createNamespace = createNamespace('cascader'),
+    createComponent = _createNamespace[0],
+    bem = _createNamespace[1],
+    t = _createNamespace[2];
+
+export default createComponent({
+  props: {
+    title: String,
+    value: [Number, String],
+    fieldNames: Object,
+    placeholder: String,
+    activeColor: String,
+    options: {
+      type: Array,
+      default: function _default() {
+        return [];
+      }
+    },
+    closeable: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data: function data() {
+    return {
+      tabs: [],
+      activeTab: 0
+    };
+  },
+  computed: {
+    textKey: function textKey() {
+      var _this$fieldNames;
+
+      return ((_this$fieldNames = this.fieldNames) == null ? void 0 : _this$fieldNames.text) || 'text';
+    },
+    valueKey: function valueKey() {
+      var _this$fieldNames2;
+
+      return ((_this$fieldNames2 = this.fieldNames) == null ? void 0 : _this$fieldNames2.value) || 'value';
+    },
+    childrenKey: function childrenKey() {
+      var _this$fieldNames3;
+
+      return ((_this$fieldNames3 = this.fieldNames) == null ? void 0 : _this$fieldNames3.children) || 'children';
+    }
+  },
+  watch: {
+    options: {
+      deep: true,
+      handler: 'updateTabs'
+    },
+    value: function value(_value) {
+      var _this = this;
+
+      if (_value || _value === 0) {
+        var values = this.tabs.map(function (tab) {
+          var _tab$selectedOption;
+
+          return (_tab$selectedOption = tab.selectedOption) == null ? void 0 : _tab$selectedOption[_this.valueKey];
+        });
+
+        if (values.indexOf(_value) !== -1) {
+          return;
+        }
+      }
+
+      this.updateTabs();
+    }
+  },
+  created: function created() {
+    this.updateTabs();
+  },
+  methods: {
+    getSelectedOptionsByValue: function getSelectedOptionsByValue(options, value) {
+      for (var i = 0; i < options.length; i++) {
+        var option = options[i];
+
+        if (option[this.valueKey] === value) {
+          return [option];
+        }
+
+        if (option[this.childrenKey]) {
+          var selectedOptions = this.getSelectedOptionsByValue(option[this.childrenKey], value);
+
+          if (selectedOptions) {
+            return [option].concat(selectedOptions);
+          }
+        }
+      }
+    },
+    updateTabs: function updateTabs() {
+      var _this2 = this;
+
+      if (this.value || this.value === 0) {
+        var selectedOptions = this.getSelectedOptionsByValue(this.options, this.value);
+
+        if (selectedOptions) {
+          var optionsCursor = this.options;
+          this.tabs = selectedOptions.map(function (option) {
+            var tab = {
+              options: optionsCursor,
+              selectedOption: option
+            };
+            var next = optionsCursor.filter(function (item) {
+              return item[_this2.valueKey] === option[_this2.valueKey];
+            });
+
+            if (next.length) {
+              optionsCursor = next[0][_this2.childrenKey];
+            }
+
+            return tab;
+          });
+
+          if (optionsCursor) {
+            this.tabs.push({
+              options: optionsCursor,
+              selectedOption: null
+            });
+          }
+
+          this.$nextTick(function () {
+            _this2.activeTab = _this2.tabs.length - 1;
+          });
+          return;
+        }
+      }
+
+      this.tabs = [{
+        options: this.options,
+        selectedOption: null
+      }];
+    },
+    onSelect: function onSelect(option, tabIndex) {
+      var _this3 = this;
+
+      this.tabs[tabIndex].selectedOption = option;
+
+      if (this.tabs.length > tabIndex + 1) {
+        this.tabs = this.tabs.slice(0, tabIndex + 1);
+      }
+
+      if (option[this.childrenKey]) {
+        var nextTab = {
+          options: option[this.childrenKey],
+          selectedOption: null
+        };
+
+        if (this.tabs[tabIndex + 1]) {
+          this.$set(this.tabs, tabIndex + 1, nextTab);
+        } else {
+          this.tabs.push(nextTab);
+        }
+
+        this.$nextTick(function () {
+          _this3.activeTab++;
+        });
+      }
+
+      var selectedOptions = this.tabs.map(function (tab) {
+        return tab.selectedOption;
+      }).filter(function (item) {
+        return !!item;
+      });
+      var eventParams = {
+        value: option[this.valueKey],
+        tabIndex: tabIndex,
+        selectedOptions: selectedOptions
+      };
+      this.$emit('input', option[this.valueKey]);
+      this.$emit('change', eventParams);
+
+      if (!option[this.childrenKey]) {
+        this.$emit('finish', eventParams);
+      }
+    },
+    onClose: function onClose() {
+      this.$emit('close');
+    },
+    renderHeader: function renderHeader() {
+      var h = this.$createElement;
+      return h("div", {
+        "class": bem('header')
+      }, [h("h2", {
+        "class": bem('title')
+      }, [this.slots('title') || this.title]), this.closeable ? h(Icon, {
+        "attrs": {
+          "name": "cross"
+        },
+        "class": bem('close-icon'),
+        "on": {
+          "click": this.onClose
+        }
+      }) : null]);
+    },
+    renderDivider: function renderDivider() {
+      var h = this.$createElement;
+      return h("zt-divider", {
+        "style": {
+          margin: 0
+        }
+      });
+    },
+    renderOptions: function renderOptions(options, selectedOption, tabIndex) {
+      var _this4 = this;
+
+      var h = this.$createElement;
+
+      var renderOption = function renderOption(option) {
+        var isSelected = selectedOption && option[_this4.valueKey] === selectedOption[_this4.valueKey];
+        var Text = _this4.slots('option', {
+          option: option,
+          selected: isSelected
+        }) || h("span", [option[_this4.textKey]]);
+        return h("li", {
+          "class": bem('option', {
+            selected: isSelected
+          }),
+          "style": {
+            color: isSelected ? _this4.activeColor : null
+          },
+          "on": {
+            "click": function click() {
+              _this4.onSelect(option, tabIndex);
+            }
+          }
+        }, [Text, isSelected ? h(Icon, {
+          "attrs": {
+            "name": "success"
+          },
+          "class": bem('selected-icon')
+        }) : null]);
+      };
+
+      return h("ul", {
+        "class": bem('options')
+      }, [options.map(renderOption)]);
+    },
+    renderTab: function renderTab(item, tabIndex) {
+      var h = this.$createElement;
+      var options = item.options,
+          selectedOption = item.selectedOption;
+      var title = selectedOption ? selectedOption[this.textKey] : this.placeholder || t('select');
+      return h(Tab, {
+        "attrs": {
+          "title": title,
+          "titleClass": bem('tab', {
+            unselected: !selectedOption
+          })
+        }
+      }, [this.renderOptions(options, selectedOption, tabIndex)]);
+    },
+    renderTabs: function renderTabs() {
+      var _this5 = this;
+
+      var h = this.$createElement;
+      return h(Tabs, {
+        "attrs": {
+          "animated": true,
+          "swipeable": true,
+          "swipeThreshold": 0,
+          "color": this.activeColor
+        },
+        "class": bem('tabs'),
+        "model": {
+          value: _this5.activeTab,
+          callback: function callback($$v) {
+            _this5.activeTab = $$v;
+          }
+        }
+      }, [this.tabs.map(this.renderTab)]);
+    }
+  },
+  render: function render() {
+    var h = arguments[0];
+    return h("div", {
+      "class": bem()
+    }, [this.renderHeader(), this.renderDivider(), this.renderTabs()]);
+  }
+});

package/es/cascader/index.less

@@ -0,0 +1,84 @@
+@import '../style/var';
+
+.zt-cascader {
+  &__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: @cascader-header-height;
+    padding: 0 @padding-md;
+  }
+
+  &__title {
+    font-weight: @font-weight-bold;
+    font-size: @cascader-title-font-size;
+    line-height: @cascader-title-line-height;
+  }
+
+  &__close-icon {
+    color: @cascader-close-icon-color;
+    font-size: @cascader-close-icon-size;
+
+    &:active {
+      color: @cascader-close-icon-active-color;
+    }
+  }
+
+  &__tabs {
+    .zt-tab {
+      flex: none;
+      margin: 0 8px;
+      padding: 0;
+    }
+
+    &.zt-tabs--line .zt-tabs__wrap {
+      height: @cascader-tabs-height;
+    }
+
+    .zt-tabs__nav--complete {
+      padding-right: 8px;
+      padding-left: 8px;
+    }
+  }
+
+  &__tab {
+    color: @cascader-tab-color;
+    font-weight: @font-weight-bold;
+    font-size: @font-size-md;
+    line-height: 44px;
+
+    &--unselected {
+      color: @cascader-unselected-tab-color;
+      font-weight: normal;
+    }
+  }
+
+  &__option {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 @padding-md;
+    font-weight: @font-weight-bold;
+    font-size: @font-size-lg;
+    line-height: 44px;
+
+    &:active {
+      background-color: @active-color;
+    }
+
+    &--selected {
+      color: @cascader-active-color;
+    }
+  }
+
+  &__selected-icon {
+    font-size: @cascader-selected-icon-size;
+  }
+
+  &__options {
+    box-sizing: border-box;
+    height: @cascader-options-height;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+}

package/es/cascader/style/index.js

@@ -0,0 +1,8 @@
+import '../../style/base.css';
+import '../../info/index.css';
+import '../../icon/index.css';
+import '../../tab/index.css';
+import '../../sticky/index.css';
+import '../../tabs/index.css';
+import '../../divider/index.css';
+import '../index.css';

package/es/cascader/style/less.js

@@ -0,0 +1,8 @@
+import '../../style/base.less';
+import '../../info/index.less';
+import '../../icon/index.less';
+import '../../tab/index.less';
+import '../../sticky/index.less';
+import '../../tabs/index.less';
+import '../../divider/index.less';
+import '../index.less';

package/es/datetime-picker/shared.js

@@ -24,7 +24,8 @@ export var sharedProps = _extends({}, pickerProps, {
 export var TimePickerMixin = {
   data: function data() {
     return {
-      innerValue: this.formatValue(this.value)
+      innerValue: this.formatValue(this.value),
+      columnValueNotInited: false
     };
   },
   computed: {
@@ -91,15 +92,35 @@ export var TimePickerMixin = {
       } else {
         this.$emit('input', val);
       }
+    },
+    showPicker: function showPicker() {
+      var _this3 = this;
+
+      if (this.columnValueNotInited) {
+        this.updateColumnValue();
+        this.$nextTick(function () {
+          _this3.updateInnerValue();
+
+          _this3.columnValueNotInited = false;
+        });
+      }
     }
   },
   mounted: function mounted() {
-    var _this3 = this;
+    var _this4 = this;
 
-    this.updateColumnValue();
-    this.$nextTick(function () {
-      _this3.updateInnerValue();
-    });
+    var picker = this.getPicker(); // picker UI元素没有准备好，没有columns
+
+    if (!picker || !picker.getColumnCount()) {
+      this.columnValueNotInited = true;
+    } else {
+      this.updateColumnValue();
+      this.$nextTick(function () {
+        _this4.updateInnerValue();
+
+        _this4.columnValueNotInited = false;
+      });
+    }
   },
   methods: {
     // @exposed-api
@@ -115,12 +136,12 @@ export var TimePickerMixin = {
     }
   },
   render: function render() {
-    var _this4 = this;
+    var _this5 = this;
 
     var h = arguments[0];
     var props = {};
     Object.keys(pickerProps).forEach(function (key) {
-      props[key] = _this4[key];
+      props[key] = _this5[key];
     });
     return h(Picker, {
       "ref": "picker",

package/es/dialog/index.css

@@ -1 +1 @@
-.zt-dialog{position:fixed;top:45%;left:50%;width:327px;overflow:hidden;font-size:16px;background-color:#fff;border-radius:4px;-webkit-transform:translate3d(-50%,-50%,0);transform:translate3d(-50%,-50%,0);-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-transition:.3s;transition:.3s;-webkit-transition-property:opacity,-webkit-transform;transition-property:opacity,-webkit-transform;transition-property:transform,opacity;transition-property:transform,opacity,-webkit-transform}@media (max-width:328px){.zt-dialog{width:90%}}.zt-dialog__header{padding-top:24px;font-weight:700;line-height:24px;text-align:center;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;word-break:break-all;padding-left:16px;padding-right:16px}.zt-dialog__header--isolated{padding:24px 0}.zt-dialog__header--custom-title{height:44px;padding-left:0;padding-right:0;padding-top:0}.zt-dialog__content{text-align:center}.zt-dialog__content--isolated{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;min-height:100px}.zt-dialog__message{max-height:60vh;padding:24px 16px;overflow-y:auto;font-size:16px;line-height:20px;color:rgba(0,0,0,.6);display:inline-block;text-align:left;white-space:pre-wrap;word-wrap:break-word;-webkit-overflow-scrolling:touch}.zt-dialog__message--has-title{padding-top:8px;font-size:14px}.zt-dialog__message--left{text-align:left}.zt-dialog__message--right{text-align:right}.zt-dialog__footer{display:-webkit-box;display:-webkit-flex;display:flex;overflow:hidden;-webkit-user-select:none;user-select:none}.zt-dialog__footer .zt-hairline--left::after{top:calc(-50% + 20px);bottom:calc(-50% + 20px)}.zt-dialog__cancel,.zt-dialog__confirm{-webkit-box-flex:1;-webkit-flex:1;flex:1;height:44px;margin:0;border:0}.zt-dialog__confirm,.zt-dialog__confirm:active{color:#0091fa}.zt-dialog__cancel{color:#000;font-weight:400}.zt-dialog-bounce-enter{-webkit-transform:translate3d(-50%,-50%,0) scale(.7);transform:translate3d(-50%,-50%,0) scale(.7);opacity:0}.zt-dialog-bounce-leave-active{-webkit-transform:translate3d(-50%,-50%,0) scale(.9);transform:translate3d(-50%,-50%,0) scale(.9);opacity:0}
+.zt-dialog{position:fixed;top:45%;left:50%;width:327px;overflow:hidden;font-size:16px;background-color:#fff;border-radius:4px;-webkit-transform:translate3d(-50%,-50%,0);transform:translate3d(-50%,-50%,0);-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-transition:.3s;transition:.3s;-webkit-transition-property:opacity,-webkit-transform;transition-property:opacity,-webkit-transform;transition-property:transform,opacity;transition-property:transform,opacity,-webkit-transform}@media (max-width:328px){.zt-dialog{width:90%}}.zt-dialog__header{padding-top:24px;font-weight:700;line-height:24px;text-align:center;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;word-break:break-all;padding-left:16px;padding-right:16px}.zt-dialog__header--isolated{padding:24px 0}.zt-dialog__header--custom-title{height:44px;padding-left:0;padding-right:0;padding-top:0}.zt-dialog__content{text-align:center;word-break:break-all}.zt-dialog__content--isolated{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;min-height:100px}.zt-dialog__message{max-height:60vh;padding:24px 16px;overflow-y:auto;font-size:16px;line-height:20px;color:rgba(0,0,0,.6);display:inline-block;text-align:left;white-space:pre-wrap;word-wrap:break-word;-webkit-overflow-scrolling:touch}.zt-dialog__message--has-title{padding-top:8px;font-size:14px}.zt-dialog__message--left{text-align:left}.zt-dialog__message--right{text-align:right}.zt-dialog__footer{display:-webkit-box;display:-webkit-flex;display:flex;overflow:hidden;-webkit-user-select:none;user-select:none}.zt-dialog__footer .zt-hairline--left::after{top:calc(-50% + 20px);bottom:calc(-50% + 20px)}.zt-dialog__cancel,.zt-dialog__confirm{-webkit-box-flex:1;-webkit-flex:1;flex:1;height:44px;margin:0;border:0}.zt-dialog__confirm,.zt-dialog__confirm:active{color:#0091fa}.zt-dialog__cancel{color:#000;font-weight:400}.zt-dialog-bounce-enter{-webkit-transform:translate3d(-50%,-50%,0) scale(.7);transform:translate3d(-50%,-50%,0) scale(.7);opacity:0}.zt-dialog-bounce-leave-active{-webkit-transform:translate3d(-50%,-50%,0) scale(.9);transform:translate3d(-50%,-50%,0) scale(.9);opacity:0}

package/es/dialog/index.less

@@ -44,6 +44,8 @@
 
   &__content {
     text-align: center;
+    word-break:break-all;
+
     &--isolated {
       display: flex;
       align-items: center;

package/es/field/index.css

@@ -1 +1 @@
-.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{text-align:right;direction:rtl;caret-color:#0091fa}.zt-field__body textarea::-webkit-textarea-placeholder{text-align:left}.zt-field__body textarea:-ms-textarea-placeholder{text-align:left}.zt-field__body textarea::-webkit-input-placeholder{text-align:left}.zt-field__body textarea::placeholder{text-align:left}.zt-field__body input::-webkit-input-placeholder{text-align:right}.zt-field__body input::placeholder{text-align:right}.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{color:#e62314;font-size:12px;text-align:left}.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__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{color:#e62314;font-size:12px;text-align:left}.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}

package/es/field/index.less

@@ -33,28 +33,8 @@
     display: flex;
     align-items: center;
     input {
-      text-align: right;
-      direction: rtl;
       caret-color: @blue;
     }
-    textarea::-webkit-textarea-placeholder { /* Edge */
-      text-align: left;
-    }
-    textarea:-ms-textarea-placeholder { /* Internet Explorer 10-11 */
-      text-align: left;
-    }
-    textarea::placeholder {
-      text-align: left;
-    }
-    input::-webkit-input-placeholder { /* Edge */
-      text-align: right;
-    }
-    input:-ms-input-placeholder { /* Internet Explorer 10-11 */
-      text-align: right;
-    }
-    input::placeholder {
-      text-align: right;
-    }
   }
 
   &__control {

package/es/index-anchor/index.css

@@ -0,0 +1 @@
+.zt-index-anchor{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-flow:row nowrap;flex-flow:row nowrap;-webkit-box-flex:0;-webkit-flex:none;flex:none;z-index:1;box-sizing:border-box;color:#000;font-weight:700;font-size:16px;line-height:24px;height:44px;background-color:#fff}.zt-index-anchor--sticky{position:fixed;top:0;right:0;left:0;color:#0091fa;background-color:#fff}.zt-index-anchor__anchor-icon{display:inline-block;width:4px;height:16px;background-color:#0091fa;margin-right:12px}

package/es/index-anchor/index.js

@@ -0,0 +1,83 @@
+import { createNamespace } from '../utils';
+import { ChildrenMixin } from '../mixins/relation';
+import { BORDER_BOTTOM, BORDER_TOP_BOTTOM, BORDER_UNSET_TOP_BOTTOM } from '../utils/constant';
+import { getScrollTop, getRootScrollTop } from '../utils/dom/scroll';
+
+var _createNamespace = createNamespace('index-anchor'),
+    createComponent = _createNamespace[0],
+    bem = _createNamespace[1];
+
+export default createComponent({
+  mixins: [ChildrenMixin('ztIndexBar', {
+    indexKey: 'childrenIndex'
+  })],
+  props: {
+    index: [Number, String]
+  },
+  data: function data() {
+    return {
+      top: 0,
+      left: null,
+      rect: {
+        top: 0,
+        height: 0
+      },
+      width: null,
+      active: false
+    };
+  },
+  computed: {
+    sticky: function sticky() {
+      return this.active && this.parent.sticky;
+    },
+    anchorStyle: function anchorStyle() {
+      if (this.sticky) {
+        return {
+          zIndex: "" + this.parent.zIndex,
+          left: this.left ? this.left + "px" : null,
+          width: this.width ? this.width + "px" : null,
+          transform: "translate3d(0, " + this.top + "px, 0)",
+          color: this.parent.highlightColor
+        };
+      }
+    }
+  },
+  mounted: function mounted() {
+    var rect = this.$el.getBoundingClientRect();
+    this.rect.height = rect.height;
+  },
+  methods: {
+    scrollIntoView: function scrollIntoView() {
+      this.$el.scrollIntoView();
+    },
+    getRect: function getRect(scroller, scrollerRect) {
+      var el = this.$el;
+      var elRect = el.getBoundingClientRect();
+      this.rect.height = elRect.height;
+
+      if (scroller === window || scroller === document.body) {
+        this.rect.top = elRect.top + getRootScrollTop();
+      } else {
+        this.rect.top = elRect.top + getScrollTop(scroller) - scrollerRect.top;
+      }
+
+      return this.rect;
+    }
+  },
+  render: function render() {
+    var h = arguments[0];
+    var sticky = this.sticky;
+    return h("div", {
+      "style": {
+        height: sticky ? this.rect.height + "px" : null
+      }
+    }, [h("div", {
+      "style": this.anchorStyle,
+      "class": [bem({
+        sticky: sticky
+      }), BORDER_TOP_BOTTOM]
+    }, [h("div", {
+      "class": bem('anchor-icon')
+    }), this.slots('default') || this.index])]);
+  }
+});

package/es/index-anchor/index.less

@@ -0,0 +1,34 @@
+@import '../style/var';
+
+.zt-index-anchor {
+  display: flex;
+  align-items: center;
+  flex-flow: row nowrap;
+  flex: none;
+  z-index: @index-anchor-z-index;
+  box-sizing: border-box;
+  color: @index-anchor-text-color;
+  font-weight: @index-anchor-font-weight;
+  font-size: @index-anchor-font-size;
+  line-height: @index-anchor-line-height;
+  height: @index-anchor-height;
+  background-color: @index-anchor-background-color;
+
+
+  &--sticky {
+    position: fixed;
+    top: 0;
+    right: 0;
+    left: 0;
+    color: @index-anchor-sticky-text-color;
+    background-color: @index-anchor-sticky-background-color;
+  }
+
+  &__anchor-icon {
+    display: inline-block;
+    width: @index-anchor-icon-width;
+    height: @index-anchor-icon-height;
+    background-color: @index-anchor-icon-background-color;
+    margin-right: 12px;
+  }
+}

package/es/index-anchor/style/index.js

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

package/es/index-anchor/style/less.js

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