zartui 0.1.45 → 0.1.46

package/es/index.js

@@ -25,6 +25,7 @@ import Image from './image';
 import ImagePreview from './image-preview';
 import Info from './info';
 import Lazyload from './lazyload';
+import List from './list';
 import Loading from './loading';
 import Locale from './locale';
 import NavBar from './nav-bar';
@@ -35,6 +36,7 @@ import PasswordInput from './password-input';
 import PdfViewer from './pdf-viewer';
 import Picker from './picker';
 import Popup from './popup';
+import PullRefresh from './pull-refresh';
 import Radio from './radio';
 import RadioGroup from './radio-group';
 import Rate from './rate';
@@ -59,10 +61,10 @@ import Tabs from './tabs';
 import Tag from './tag';
 import Toast from './toast';
 import Uploader from './uploader';
-var version = '0.1.45';
+var version = '0.1.46';
 
 function install(Vue) {
-  var components = [ActionSheet, Area, Avatar, Badge, Button, Calendar, Cell, CellGroup, Checkbox, CheckboxGroup, Col, Collapse, CollapseItem, CountDown, DatetimePicker, Dialog, Divider, DropdownItem, DropdownMenu, Empty, Field, Form, Icon, Image, ImagePreview, Info, Lazyload, Loading, Locale, NavBar, NoticeBar, NumberKeyboard, Overlay, PasswordInput, PdfViewer, Picker, Popup, Radio, RadioGroup, Rate, Row, Search, Signature, Skeleton, Slider, Step, Stepper, Steps, Sticky, Swipe, SwipeCell, SwipeItem, Switch, SwitchCell, Tab, Tabbar, TabbarItem, Tabs, Tag, Toast, Uploader];
+  var components = [ActionSheet, Area, Avatar, Badge, Button, Calendar, Cell, CellGroup, Checkbox, CheckboxGroup, Col, Collapse, CollapseItem, CountDown, DatetimePicker, Dialog, Divider, DropdownItem, DropdownMenu, Empty, Field, Form, Icon, Image, ImagePreview, Info, Lazyload, List, Loading, Locale, NavBar, NoticeBar, NumberKeyboard, Overlay, PasswordInput, PdfViewer, Picker, Popup, PullRefresh, Radio, RadioGroup, Rate, Row, Search, Signature, Skeleton, Slider, Step, Stepper, Steps, Sticky, Swipe, SwipeCell, SwipeItem, Switch, SwitchCell, Tab, Tabbar, TabbarItem, Tabs, Tag, Toast, Uploader];
   components.forEach(function (item) {
     if (item.install) {
       Vue.use(item);
@@ -76,7 +78,7 @@ if (typeof window !== 'undefined' && window.Vue) {
   install(window.Vue);
 }
 
-export { install, version, ActionSheet, Area, Avatar, Badge, Button, Calendar, Cell, CellGroup, Checkbox, CheckboxGroup, Col, Collapse, CollapseItem, CountDown, DatetimePicker, Dialog, Divider, DropdownItem, DropdownMenu, Empty, Field, Form, Icon, Image, ImagePreview, Info, Lazyload, Loading, Locale, NavBar, NoticeBar, NumberKeyboard, Overlay, PasswordInput, PdfViewer, Picker, Popup, Radio, RadioGroup, Rate, Row, Search, Signature, Skeleton, Slider, Step, Stepper, Steps, Sticky, Swipe, SwipeCell, SwipeItem, Switch, SwitchCell, Tab, Tabbar, TabbarItem, Tabs, Tag, Toast, Uploader };
+export { install, version, ActionSheet, Area, Avatar, Badge, Button, Calendar, Cell, CellGroup, Checkbox, CheckboxGroup, Col, Collapse, CollapseItem, CountDown, DatetimePicker, Dialog, Divider, DropdownItem, DropdownMenu, Empty, Field, Form, Icon, Image, ImagePreview, Info, Lazyload, List, Loading, Locale, NavBar, NoticeBar, NumberKeyboard, Overlay, PasswordInput, PdfViewer, Picker, Popup, PullRefresh, Radio, RadioGroup, Rate, Row, Search, Signature, Skeleton, Slider, Step, Stepper, Steps, Sticky, Swipe, SwipeCell, SwipeItem, Switch, SwitchCell, Tab, Tabbar, TabbarItem, Tabs, Tag, Toast, Uploader };
 export default {
   install: install,
   version: version

package/es/list/index.css

@@ -0,0 +1 @@
+.zt-list__error-text,.zt-list__finished-text,.zt-list__loading{color:#969799;font-size:14px;line-height:50px;text-align:center}.zt-list__placeholder{height:0;pointer-events:none}

package/es/list/index.js

@@ -0,0 +1,178 @@
+// Utils
+import { createNamespace } from '../utils';
+import { isHidden } from '../utils/dom/style';
+import { getScroller } from '../utils/dom/scroll'; // Mixins
+
+import { BindEventMixin } from '../mixins/bind-event'; // Components
+
+import Loading from '../loading';
+
+var _createNamespace = createNamespace('list'),
+    createComponent = _createNamespace[0],
+    bem = _createNamespace[1],
+    t = _createNamespace[2];
+
+export default createComponent({
+  mixins: [BindEventMixin(function (bind) {
+    if (!this.scroller) {
+      this.scroller = getScroller(this.$el);
+    }
+
+    bind(this.scroller, 'scroll', this.check);
+  })],
+  model: {
+    prop: 'loading'
+  },
+  props: {
+    error: Boolean,
+    loading: Boolean,
+    finished: Boolean,
+    errorText: String,
+    loadingText: String,
+    finishedText: String,
+    immediateCheck: {
+      type: Boolean,
+      default: true
+    },
+    offset: {
+      type: [Number, String],
+      default: 300
+    },
+    direction: {
+      type: String,
+      default: 'down'
+    }
+  },
+  data: function data() {
+    return {
+      // use sync innerLoading state to avoid repeated loading in some edge cases
+      innerLoading: this.loading
+    };
+  },
+  updated: function updated() {
+    this.innerLoading = this.loading;
+  },
+  mounted: function mounted() {
+    if (this.immediateCheck) {
+      this.check();
+    }
+  },
+  watch: {
+    loading: 'check',
+    finished: 'check'
+  },
+  methods: {
+    // @exposed-api
+    check: function check() {
+      var _this = this;
+
+      this.$nextTick(function () {
+        if (_this.innerLoading || _this.finished || _this.error) {
+          return;
+        }
+
+        var el = _this.$el,
+            scroller = _this.scroller,
+            offset = _this.offset,
+            direction = _this.direction;
+        var scrollerRect;
+
+        if (scroller.getBoundingClientRect) {
+          scrollerRect = scroller.getBoundingClientRect();
+        } else {
+          scrollerRect = {
+            top: 0,
+            bottom: scroller.innerHeight
+          };
+        }
+
+        var scrollerHeight = scrollerRect.bottom - scrollerRect.top;
+        /* istanbul ignore next */
+
+        if (!scrollerHeight || isHidden(el)) {
+          return false;
+        }
+
+        var isReachEdge = false;
+
+        var placeholderRect = _this.$refs.placeholder.getBoundingClientRect();
+
+        if (direction === 'up') {
+          isReachEdge = scrollerRect.top - placeholderRect.top <= offset;
+        } else {
+          isReachEdge = placeholderRect.bottom - scrollerRect.bottom <= offset;
+        }
+
+        if (isReachEdge) {
+          _this.innerLoading = true;
+
+          _this.$emit('input', true);
+
+          _this.$emit('load');
+        }
+      });
+    },
+    clickErrorText: function clickErrorText() {
+      this.$emit('update:error', false);
+      this.check();
+    },
+    genLoading: function genLoading() {
+      var h = this.$createElement;
+
+      if (this.innerLoading && !this.finished) {
+        return h("div", {
+          "key": "loading",
+          "class": bem('loading')
+        }, [this.slots('loading') || h(Loading, {
+          "attrs": {
+            "size": "16"
+          }
+        }, [this.loadingText || t('loading')])]);
+      }
+    },
+    genFinishedText: function genFinishedText() {
+      var h = this.$createElement;
+
+      if (this.finished) {
+        var text = this.slots('finished') || this.finishedText;
+
+        if (text) {
+          return h("div", {
+            "class": bem('finished-text')
+          }, [text]);
+        }
+      }
+    },
+    genErrorText: function genErrorText() {
+      var h = this.$createElement;
+
+      if (this.error) {
+        var text = this.slots('error') || this.errorText;
+
+        if (text) {
+          return h("div", {
+            "on": {
+              "click": this.clickErrorText
+            },
+            "class": bem('error-text')
+          }, [text]);
+        }
+      }
+    }
+  },
+  render: function render() {
+    var h = arguments[0];
+    var Placeholder = h("div", {
+      "ref": "placeholder",
+      "key": "placeholder",
+      "class": bem('placeholder')
+    });
+    return h("div", {
+      "class": bem(),
+      "attrs": {
+        "role": "feed",
+        "aria-busy": this.innerLoading
+      }
+    }, [this.direction === 'down' ? this.slots() : Placeholder, this.genLoading(), this.genFinishedText(), this.genErrorText(), this.direction === 'up' ? this.slots() : Placeholder]);
+  }
+});

package/es/list/index.less

@@ -0,0 +1,17 @@
+@import '../style/var';
+
+.zt-list {
+  &__loading,
+  &__finished-text,
+  &__error-text {
+    color: @list-text-color;
+    font-size: @list-text-font-size;
+    line-height: @list-text-line-height;
+    text-align: center;
+  }
+
+  &__placeholder {
+    height: 0;
+    pointer-events: none;
+  }
+}

package/es/list/style/index.js

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

package/es/list/style/less.js

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

package/es/locale/index.js

@@ -3,18 +3,18 @@ import { deepAssign } from '../utils/deep-assign';
 import defaultMessages from './lang/zh-CN';
 var proto = Vue.prototype;
 var defineReactive = Vue.util.defineReactive;
-defineReactive(proto, '$vantLang', 'zh-CN');
-defineReactive(proto, '$vantMessages', {
+defineReactive(proto, '$zartLang', 'zh-CN');
+defineReactive(proto, '$zartMessages', {
   'zh-CN': defaultMessages
 });
 export default {
   messages: function messages() {
-    return proto.$vantMessages[proto.$vantLang];
+    return proto.$zartMessages[proto.$zartLang];
   },
   use: function use(lang, messages) {
     var _this$add;
 
-    proto.$vantLang = lang;
+    proto.$zartLang = lang;
     this.add((_this$add = {}, _this$add[lang] = messages, _this$add));
   },
   add: function add(messages) {
@@ -22,6 +22,6 @@ export default {
       messages = {};
     }
 
-    deepAssign(proto.$vantMessages, messages);
+    deepAssign(proto.$zartMessages, messages);
   }
 };

package/es/pull-refresh/index.css

@@ -0,0 +1 @@
+.zt-pull-refresh{overflow:hidden;-webkit-user-select:none;user-select:none}.zt-pull-refresh__track{position:relative;height:100%;-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;transition-property:transform;transition-property:transform,-webkit-transform}.zt-pull-refresh__head{position:absolute;left:0;width:100%;height:50px;overflow:hidden;color:#969799;font-size:14px;line-height:50px;text-align:center;-webkit-transform:translateY(-100%);transform:translateY(-100%)}

package/es/pull-refresh/index.js

@@ -0,0 +1,214 @@
+// Utils
+import { createNamespace } from '../utils';
+import { preventDefault } from '../utils/dom/event';
+import { getScrollTop, getScroller } from '../utils/dom/scroll'; // Mixins
+
+import { TouchMixin } from '../mixins/touch'; // Components
+
+import Loading from '../loading';
+
+var _createNamespace = createNamespace('pull-refresh'),
+    createComponent = _createNamespace[0],
+    bem = _createNamespace[1],
+    t = _createNamespace[2];
+
+var DEFAULT_HEAD_HEIGHT = 50;
+var TEXT_STATUS = ['pulling', 'loosing', 'success'];
+export default createComponent({
+  mixins: [TouchMixin],
+  props: {
+    disabled: Boolean,
+    successText: String,
+    pullingText: String,
+    loosingText: String,
+    loadingText: String,
+    pullDistance: [Number, String],
+    value: {
+      type: Boolean,
+      required: true
+    },
+    successDuration: {
+      type: [Number, String],
+      default: 500
+    },
+    animationDuration: {
+      type: [Number, String],
+      default: 300
+    },
+    headHeight: {
+      type: [Number, String],
+      default: DEFAULT_HEAD_HEIGHT
+    }
+  },
+  data: function data() {
+    return {
+      status: 'normal',
+      distance: 0,
+      duration: 0
+    };
+  },
+  computed: {
+    touchable: function touchable() {
+      return this.status !== 'loading' && this.status !== 'success' && !this.disabled;
+    },
+    headStyle: function headStyle() {
+      if (this.headHeight !== DEFAULT_HEAD_HEIGHT) {
+        return {
+          height: this.headHeight + "px"
+        };
+      }
+    }
+  },
+  watch: {
+    value: function value(loading) {
+      this.duration = this.animationDuration;
+
+      if (loading) {
+        this.setStatus(+this.headHeight, true);
+      } else if (this.slots('success') || this.successText) {
+        this.showSuccessTip();
+      } else {
+        this.setStatus(0, false);
+      }
+    }
+  },
+  mounted: function mounted() {
+    this.bindTouchEvent(this.$refs.track);
+    this.scrollEl = getScroller(this.$el);
+  },
+  methods: {
+    checkPullStart: function checkPullStart(event) {
+      this.ceiling = getScrollTop(this.scrollEl) === 0;
+
+      if (this.ceiling) {
+        this.duration = 0;
+        this.touchStart(event);
+      }
+    },
+    onTouchStart: function onTouchStart(event) {
+      if (this.touchable) {
+        this.checkPullStart(event);
+      }
+    },
+    onTouchMove: function onTouchMove(event) {
+      if (!this.touchable) {
+        return;
+      }
+
+      if (!this.ceiling) {
+        this.checkPullStart(event);
+      }
+
+      this.touchMove(event);
+
+      if (this.ceiling && this.deltaY >= 0 && this.direction === 'vertical') {
+        preventDefault(event);
+        this.setStatus(this.ease(this.deltaY));
+      }
+    },
+    onTouchEnd: function onTouchEnd() {
+      var _this = this;
+
+      if (this.touchable && this.ceiling && this.deltaY) {
+        this.duration = this.animationDuration;
+
+        if (this.status === 'loosing') {
+          this.setStatus(+this.headHeight, true);
+          this.$emit('input', true); // ensure value change can be watched
+
+          this.$nextTick(function () {
+            _this.$emit('refresh');
+          });
+        } else {
+          this.setStatus(0);
+        }
+      }
+    },
+    ease: function ease(distance) {
+      var pullDistance = +(this.pullDistance || this.headHeight);
+
+      if (distance > pullDistance) {
+        if (distance < pullDistance * 2) {
+          distance = pullDistance + (distance - pullDistance) / 2;
+        } else {
+          distance = pullDistance * 1.5 + (distance - pullDistance * 2) / 4;
+        }
+      }
+
+      return Math.round(distance);
+    },
+    setStatus: function setStatus(distance, isLoading) {
+      var status;
+
+      if (isLoading) {
+        status = 'loading';
+      } else if (distance === 0) {
+        status = 'normal';
+      } else {
+        status = distance < (this.pullDistance || this.headHeight) ? 'pulling' : 'loosing';
+      }
+
+      this.distance = distance;
+
+      if (status !== this.status) {
+        this.status = status;
+      }
+    },
+    genStatus: function genStatus() {
+      var h = this.$createElement;
+      var status = this.status,
+          distance = this.distance;
+      var slot = this.slots(status, {
+        distance: distance
+      });
+
+      if (slot) {
+        return slot;
+      }
+
+      var nodes = [];
+      var text = this[status + "Text"] || t(status);
+
+      if (TEXT_STATUS.indexOf(status) !== -1) {
+        nodes.push(h("div", {
+          "class": bem('text')
+        }, [text]));
+      }
+
+      if (status === 'loading') {
+        nodes.push(h(Loading, {
+          "attrs": {
+            "size": "16"
+          }
+        }, [text]));
+      }
+
+      return nodes;
+    },
+    showSuccessTip: function showSuccessTip() {
+      var _this2 = this;
+
+      this.status = 'success';
+      setTimeout(function () {
+        _this2.setStatus(0);
+      }, this.successDuration);
+    }
+  },
+  render: function render() {
+    var h = arguments[0];
+    var trackStyle = {
+      transitionDuration: this.duration + "ms",
+      transform: this.distance ? "translate3d(0," + this.distance + "px, 0)" : ''
+    };
+    return h("div", {
+      "class": bem()
+    }, [h("div", {
+      "ref": "track",
+      "class": bem('track'),
+      "style": trackStyle
+    }, [h("div", {
+      "class": bem('head'),
+      "style": this.headStyle
+    }, [this.genStatus()]), this.slots()])]);
+  }
+});

package/es/pull-refresh/index.less

@@ -0,0 +1,25 @@
+@import '../style/var';
+
+.zt-pull-refresh {
+  overflow: hidden;
+  user-select: none;
+
+  &__track {
+    position: relative;
+    height: 100%;
+    transition-property: transform;
+  }
+
+  &__head {
+    position: absolute;
+    left: 0;
+    width: 100%;
+    height: @pull-refresh-head-height;
+    overflow: hidden;
+    color: @pull-refresh-head-text-color;
+    font-size: @pull-refresh-head-font-size;
+    line-height: @pull-refresh-head-height;
+    text-align: center;
+    transform: translateY(-100%);
+  }
+}

package/es/pull-refresh/style/index.js

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

package/es/pull-refresh/style/less.js

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

package/es/signature/index.js

@@ -200,6 +200,16 @@ export default createComponent({
 
             _this3.ctx.fillRect(0, 0, _this3.$refs.canvas.width, _this3.$refs.canvas.height);
           }, 50);
+        } else {
+          setTimeout(function () {
+            var backgroundColor = _this3.backgroundStyle;
+
+            if (backgroundColor !== 'transparent') {
+              _this3.ctx.fillStyle = backgroundColor;
+
+              _this3.ctx.fillRect(0, 0, _this3.$refs.canvas.width, _this3.$refs.canvas.height);
+            }
+          }, 50);
         }
       }
     }

package/es/sticky/index.css

@@ -1 +1 @@
-.zt-sticky--fixed{position:fixed;top:0;right:0;left:0;z-index:99}
+.zt-sticky--fixed{position:fixed;top:0;right:0;left:0;z-index:99}.zt-sticky__head{text-align:center}

package/es/sticky/index.js

@@ -61,6 +61,10 @@ export default createComponent({
     pc: {
       type: Boolean,
       default: false
+    },
+    pulling: {
+      type: Boolean,
+      default: true
     }
   },
   data: function data() {
@@ -75,7 +79,8 @@ export default createComponent({
       touchOn: false,
       refreshOffsetTop: null,
       t1: 0,
-      t2: 0
+      t2: 0,
+      pull: false
     };
   },
   computed: {
@@ -158,12 +163,16 @@ export default createComponent({
       var emitScrollEvent = function emitScrollEvent() {
         _this3.$emit('scroll', {
           scrollTop: scrollTop,
-          isFixed: _this3.fixed
+          isFixed: _this3.fixed,
+          distance: overpx + scrollTop + offsetTopPx - topToPageTop
         });
       };
 
       var overpx = this.refresh && this.lockfixed ? this.refreshDistance : 0; // The sticky component should be kept inside the container element
 
+      var currentY = document.documentElement.scrollTop || document.body.scrollTop;
+      this.pull = currentY < this.refreshtopToPageTop - this.offsetTopPx;
+
       if (container) {
         var bottomToPageTop = topToPageTop - overpx + container.offsetHeight;
 
@@ -219,7 +228,7 @@ export default createComponent({
             _this.touchOn = false;
             return;
           } else if (_this.refresh && _this.fixed && currentY < _this.refreshtopToPageTop - _this.offsetTopPx) {
-            _this.$emit('refleshcallback');
+            _this.$emit('refreshcallback');
 
             _this.scrollAnimation(currentY, _this.refreshtopToPageTop - _this.refreshOffsetTop, true);
 
@@ -261,7 +270,7 @@ export default createComponent({
         this.touchOn = false;
         return;
       } else if (this.refresh && this.deltaY > 0 && this.fixed && currentY < this.refreshtopToPageTop - this.offsetTopPx) {
-        this.$emit('refleshcallback');
+        this.$emit('refreshcallback');
         this.scrollAnimation(currentY, this.refreshtopToPageTop - this.refreshOffsetTop, true);
         this.touchOn = false;
         return;
@@ -272,12 +281,12 @@ export default createComponent({
     renderLoading: function renderLoading() {
       var h = this.$createElement;
 
-      if (this.lockfixed && this.refresh && this.touchOn && false) {
-        return h("zt-loading", {
-          "attrs": {
-            "color": "#0091FA"
-          }
-        });
+      if (this.lockfixed && this.refresh && this.touchOn && this.pull && this.pulling) {
+        if (this.$slots.pull) {
+          return this.slots('pull');
+        }
+
+        return h("zt-loading");
       }
     },
     scrollAnimation: function scrollAnimation(currentY, targetY, lockfixed) {
@@ -321,6 +330,9 @@ export default createComponent({
         fixed: fixed
       }),
       "style": this.style
-    }, [this.slots(), this.renderLoading()])]);
+    }, [this.slots(), h("div", {
+      "class": bem('head'),
+      "style": this.headStyle
+    }, [this.renderLoading()])])]);
   }
 });

package/es/sticky/index.less

@@ -8,4 +8,7 @@
     left: 0;
     z-index: @sticky-z-index;
   }
+  &__head {
+    text-align: center;
+  }
 }