zartui 0.1.97 → 0.1.98

package/es/index.js

@@ -72,12 +72,13 @@ import TabbarItem from './tabbar-item';
 import Table from './table';
 import Tabs from './tabs';
 import Tag from './tag';
+import Timeline from './timeline';
 import Toast from './toast';
 import Uploader from './uploader';
-var version = '0.1.97';
+var version = '0.1.98';
 
 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, Toast, Uploader];
+  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];
   components.forEach(function (item) {
     if (item.install) {
       Vue.use(item);
@@ -91,7 +92,7 @@ if (typeof window !== 'undefined' && window.Vue) {
   install(window.Vue);
 }
 
-export { install, version, 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, Toast, Uploader };
+export { install, version, 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 };
 export default {
   install: install,
   version: version

package/es/pdf-viewer/index.js

@@ -1,5 +1,3 @@
-var _methods;
-
 import { createNamespace } from '../utils';
 
 var _createNamespace = createNamespace('pdf-viewer'),
@@ -31,7 +29,7 @@ var defaultData = function defaultData() {
     bodyInitialHeight: "",
     bodyInitialMinHeight: "",
     metaContent: "",
-    onScollEvent: function onScollEvent() {},
+    pdfScrollEvent: function pdfScrollEvent() {},
     scrollEvent: function scrollEvent() {}
   };
 };
@@ -125,7 +123,7 @@ export default createComponent({
       }
     }
   },
-  methods: (_methods = {
+  methods: {
     recordScrollEvent: function recordScrollEvent() {
       this.scrollEvent = window.onscroll;
     },
@@ -135,9 +133,9 @@ export default createComponent({
       if (restore) {
         window.onscroll = this.scrollEvent;
       } else {
-        if (this.onScollEvent) {
+        if (this.pdfScrollEvent) {
           window.onscroll = function () {
-            _this3.onScollEvent();
+            _this3.pdfScrollEvent();
           };
         }
       }
@@ -230,120 +228,133 @@ export default createComponent({
         _this5.pageNum = 1;
         _this5.pdfArr = pdfArr;
 
-        _this5.setScrollEvent();
+        _this5.buildPdfScrollEvent();
       }).catch(function (err) {
         console.error("pdf 加载失败", err);
       }).finally(function () {
         _this5.loading = false;
       });
-    }
-  }, _methods["setScrollEvent"] = function setScrollEvent() {
-    var _this6 = this;
-
-    this.onScollEvent = window.onscroll = _.throttle(function () {
-      if (_this6.pageChangeByButton) {
-        _this6.pageChangeByButton = false;
-      } else {
-        _this6.changePage();
+    },
+    buildPdfScrollEvent: function buildPdfScrollEvent() {
+      var _this6 = this;
+
+      this.pdfScrollEvent = window.onscroll = _.throttle(function () {
+        if (_this6.pageChangeByButton) {
+          _this6.pageChangeByButton = false;
+        } else {
+          _this6.changePage();
+        }
+      }, 1000);
+    },
+    changePage: function changePage() {
+      if (window.pageYOffset === 0) {
+        this.pageNum = 1;
+        return;
       }
-    }, 1000);
-  }, _methods.changePage = function changePage() {
-    if (window.pageYOffset === 0) {
-      this.pageNum = 1;
-      return;
-    }
 
-    var i = 1,
-        count = this.pdfPageCount;
-    var clientHeight = document.documentElement.clientHeight;
+      var i = 1,
+          count = this.pdfPageCount;
+      var clientHeight = document.documentElement.clientHeight;
 
-    do {
-      var start = this.findPos(document.getElementById("pdfContent" + i));
-      var end = start + document.getElementById("pdfContent" + i).offsetHeight;
+      do {
+        var start = this.findPos(document.getElementById("pdfContent" + i));
+        var end = start + document.getElementById("pdfContent" + i).offsetHeight;
 
-      if (window.pageYOffset + clientHeight >= start && window.pageYOffset + clientHeight <= end) {
-        this.pageNum = i;
-        break;
-      }
+        if (window.pageYOffset + clientHeight >= start && window.pageYOffset + clientHeight <= end) {
+          this.pageNum = i;
+          break;
+        }
 
-      if (i === count && window.pageYOffset + clientHeight > end) {
-        this.pageNum = i;
-        break;
-      }
+        if (i === count && window.pageYOffset + clientHeight > end) {
+          this.pageNum = i;
+          break;
+        }
 
-      i++;
-    } while (i < count + 1);
-  }, _methods.findPos = function findPos(obj) {
-    if (obj) {
-      return obj.offsetTop;
-    } else {
-      return 0;
-    }
-  }, _methods.perPage = function perPage() {
-    if (this.pageNum > 1) {
-      this.pageNum = this.pageNum - 1;
-      this.pageChangeByButton = true;
-    } else {
-      Toast("已经是首页！");
-    }
-  }, _methods.nextPage = function nextPage() {
-    if (this.pageNum < this.pdfPageCount) {
-      this.pageNum = this.pageNum + 1;
+        i++;
+      } while (i < count + 1);
+    },
+    findPos: function findPos(obj) {
+      if (obj) {
+        return obj.offsetTop;
+      } else {
+        return 0;
+      }
+    },
+    perPage: function perPage() {
+      if (this.pageNum > 1) {
+        this.pageNum = this.pageNum - 1;
+        this.pageChangeByButton = true;
+      } else {
+        Toast("已经是首页！");
+      }
+    },
+    nextPage: function nextPage() {
+      if (this.pageNum < this.pdfPageCount) {
+        this.pageNum = this.pageNum + 1;
+        this.pageChangeByButton = true;
+      } else {
+        Toast("已经是尾页！");
+      }
+    },
+    onPdfLoaded: function onPdfLoaded(e) {
+      this.pdfArr[e - 1].loaded = true;
+      this.$emit("loaded", e);
+      console.log("pdf loaded", e);
+    },
+    onPdfError: function onPdfError(e) {
+      this.$emit("error", e);
+      console.log("pdf viewer error: " + e);
+    },
+    rotate: function rotate() {
+      this.rotateDegree += 90;
+    },
+    genPdf: function genPdf(i) {
+      var h = this.$createElement;
+
+      if (this.currentShowArr.includes(i) || this.pdfArr[i - 1].loaded) {
+        return h("div", [h(pdf, {
+          "attrs": {
+            "src": this.loadingTask,
+            "page": i,
+            "id": "pdfContent" + i,
+            "rotate": this.rotateDegree
+          },
+          "key": i,
+          "on": {
+            "page-loaded": this.onPdfLoaded,
+            "error": this.onPdfError
+          }
+        }), h("div", {
+          "class": bem("page-margin")
+        })]);
+      } else {
+        return h("div", [h("div", {
+          "attrs": {
+            "id": "pdfContent" + i
+          },
+          "style": "width:100vw;height:100vh;"
+        }), h("div", {
+          "class": bem("page-margin")
+        })]);
+      }
+    },
+    showPagePicker: function showPagePicker() {
+      this.showPicker = true;
+    },
+    getPageList: function getPageList() {
+      return this.pdfArr.map(function (v, i) {
+        return i + 1;
+      });
+    },
+    setPage: function setPage(i) {
+      this.pageNum = i;
       this.pageChangeByButton = true;
-    } else {
-      Toast("已经是尾页！");
-    }
-  }, _methods.onPdfLoaded = function onPdfLoaded(e) {
-    this.pdfArr[e - 1].loaded = true;
-    this.$emit("loaded", e);
-    console.log("pdf loaded", e);
-  }, _methods.onPdfError = function onPdfError(e) {
-    this.$emit("error", e);
-    console.log("pdf viewer error: " + e);
-  }, _methods.rotate = function rotate() {
-    this.rotateDegree += 90;
-  }, _methods.genPdf = function genPdf(i) {
-    var h = this.$createElement;
-
-    if (this.currentShowArr.includes(i) || this.pdfArr[i - 1].loaded) {
-      return h("div", [h(pdf, {
-        "attrs": {
-          "src": this.loadingTask,
-          "page": i,
-          "id": "pdfContent" + i,
-          "rotate": this.rotateDegree
-        },
-        "key": i,
-        "on": {
-          "page-loaded": this.onPdfLoaded,
-          "error": this.onPdfError
-        }
-      }), h("div", {
-        "class": bem("page-margin")
-      })]);
-    } else {
-      return h("div", [h("div", {
-        "attrs": {
-          "id": "pdfContent" + i
-        },
-        "style": "width:100vw;height:100vh;"
-      }), h("div", {
-        "class": bem("page-margin")
-      })]);
+      this.showPicker = false;
+    },
+    cancel: function cancel() {
+      this.showPicker = false;
     }
-  }, _methods.showPagePicker = function showPagePicker() {
-    this.showPicker = true;
-  }, _methods.getPageList = function getPageList() {
-    return this.pdfArr.map(function (v, i) {
-      return i + 1;
-    });
-  }, _methods.setPage = function setPage(i) {
-    this.pageNum = i;
-    this.pageChangeByButton = true;
-    this.showPicker = false;
-  }, _methods.cancel = function cancel() {
-    this.showPicker = false;
-  }, _methods),
+  },
   render: function render(h) {
     var _this7 = this;
 

package/es/timeline/index.css

@@ -0,0 +1 @@
+.zt-timeline{background-color:#fff}.zt-timeline__top-bar{height:44px;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-box-align:center;-webkit-align-items:center;align-items:center}.zt-timeline__top-left{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center}.zt-timeline__bar{width:4px;height:16px;background:#0091fa;margin-right:12px}.zt-timeline__title{font-size:16px;font-weight:700;color:#000;line-height:24px}.zt-timeline__top-right{padding-right:16px;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center}.zt-timeline__fold-text{font-size:16px;color:rgba(0,0,0,.6);line-height:24px;margin-right:8px}.zt-timeline__container{padding-top:16px}.zt-timeline__item{padding:0 16px 16px 16px;display:-webkit-box;display:-webkit-flex;display:flex}.zt-timeline__item.last-item .zt-timeline__line{height:0}.zt-timeline__left-container{margin-right:8px;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;flex-direction:column;-webkit-box-align:center;-webkit-align-items:center;align-items:center}.zt-timeline__right-container{-webkit-box-flex:1;-webkit-flex:1;flex:1}.zt-timeline__avatar-box{width:40px;height:40px}.zt-timeline__avatar{width:40px;height:40px;background:#0091fa;border-radius:4px;font-size:14px;font-weight:700;text-align:center;color:#fff;line-height:40px}.zt-timeline__line{background-color:#f5f5f5;width:2px;height:100%;margin-top:4px;margin-bottom:-12px}.zt-timeline__title-box{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-box-align:center;-webkit-align-items:center;align-items:center;margin-bottom:8px}.zt-timeline__title{font-size:16px;font-weight:700;color:#000;line-height:24px}.zt-timeline__time{font-size:12px;color:rgba(0,0,0,.8);line-height:16px}.zt-timeline__content-box{font-size:14px;color:rgba(0,0,0,.8);line-height:20px;padding-bottom:8px}.zt-timeline__main-container{background:rgba(0,0,0,.02);border-radius:4px;padding:8px 12px}.zt-timeline__main-container::before{border-radius:4px}.zt-timeline__main-container .zt-timeline__text-bold{font-weight:700;color:#000}.zt-timeline__opinion-box{padding-top:7px}.zt-timeline__opinion-label{margin-bottom:4px;font-size:14px;color:rgba(0,0,0,.4);line-height:20px}.zt-timeline__opinion{font-size:14px;color:#000;line-height:20px}

package/es/timeline/index.js

@@ -0,0 +1,185 @@
+import { createNamespace } from '../utils';
+
+var _createNamespace = createNamespace('timeline'),
+    createComponent = _createNamespace[0],
+    bem = _createNamespace[1];
+
+import Switch from "../switch";
+
+var defaultData = function defaultData() {
+  return {
+    isFold: false
+  };
+};
+
+export default createComponent({
+  props: {
+    title: {
+      type: String,
+      default: "办理经过"
+    },
+    // 默认折叠显示
+    defaultFold: {
+      type: Boolean,
+      default: false
+    },
+    // 折叠时显示几条数据
+    collapseCount: {
+      type: Number,
+      default: 0
+    },
+    processes: {
+      type: Array,
+      default: function _default() {
+        return [];
+      }
+    },
+    opinionKey: {
+      type: String,
+      default: "处理意见"
+    }
+  },
+  data: function data() {
+    return defaultData();
+  },
+  computed: {},
+  watch: {},
+  mounted: function mounted() {
+    this.isFold = this.defaultFold;
+    console.log("this.$slots", this.$slots);
+  },
+  methods: {
+    genProcesses: function genProcesses() {
+      var _this = this;
+
+      if (this.isFold) {
+        var showProcesses = this.processes.slice(0, this.collapseCount);
+        return showProcesses.map(function (item, index) {
+          return _this.genProcessItem(item, index === showProcesses.length - 1);
+        });
+      } else {
+        return this.processes.map(function (item, index) {
+          return _this.genProcessItem(item, index === _this.processes.length - 1);
+        });
+      }
+    },
+    genAvatar: function genAvatar(item, avatarSlot) {
+      var h = this.$createElement;
+
+      if (avatarSlot) {
+        return h("div", {
+          "class": bem("avatar-box") + " half-border"
+        }, [avatarSlot]);
+      }
+
+      return h("div", {
+        "class": bem("avatar-box" + " half-border")
+      }, [item.avatar ? h("img", {
+        "class": bem("avatar"),
+        "attrs": {
+          "src": item.avatar,
+          "alt": ""
+        }
+      }) : h("div", {
+        "class": bem("avatar")
+      }, [item.human.slice(-2)])]);
+    },
+    genTitle: function genTitle(item, titleSlot) {
+      var h = this.$createElement;
+
+      if (titleSlot) {
+        return h("div", {
+          "class": bem("title-box")
+        }, [titleSlot]);
+      }
+
+      return h("div", {
+        "class": bem("title-box")
+      }, [h("span", {
+        "class": bem("title")
+      }, [item.department + "[" + item.human + "]"]), h("span", {
+        "class": bem("time")
+      }, [item.timestamp])]);
+    },
+    genContent: function genContent(item, contentSlot) {
+      var h = this.$createElement;
+
+      if (contentSlot) {
+        return h("div", {
+          "class": bem("content-box") + " half-border-bottom"
+        }, [contentSlot]);
+      }
+
+      return h("div", {
+        "class": bem("content-box" + " half-border-bottom")
+      }, ["\u5728", h("span", [item.stage]), "\u9636\u6BB5", h("span", {
+        "class": bem("text-bold")
+      }, [" ", item.action, " "]), "\u5230", h("span", [item.nextAction]), h("span", [item.nextDepartment]), h("span", {
+        "class": bem("text-bold")
+      }, [" [", item.nextHuman, "]"])]);
+    },
+    genOpinion: function genOpinion(item, opinionSlot) {
+      var h = this.$createElement;
+
+      if (opinionSlot) {
+        return h("div", {
+          "class": bem("opinion-box")
+        }, [opinionSlot]);
+      }
+
+      return h("div", {
+        "class": bem("opinion-box")
+      }, [h("div", {
+        "class": bem("opinion-label")
+      }, [this.opinionKey]), h("div", {
+        "class": bem("opinion")
+      }, [item.opinion])]);
+    },
+    genProcessItem: function genProcessItem(item, isLast) {
+      var h = this.$createElement;
+      var avatarSlot = this.slots("avatar", item);
+      var titleSlot = this.slots("title", item);
+      var contentSlot = this.slots("content", item);
+      var opinionSlot = this.slots("opinion", item);
+      return h("div", {
+        "class": bem("item") + (" " + (isLast ? "last-item" : ""))
+      }, [h("div", {
+        "class": bem("left-container")
+      }, [this.genAvatar(item, avatarSlot), h("div", {
+        "class": bem("line")
+      })]), h("div", {
+        "class": bem("right-container")
+      }, [this.genTitle(item, titleSlot), h("div", {
+        "class": bem("main-container") + " half-border"
+      }, [this.genContent(item, contentSlot), this.genOpinion(item, opinionSlot)])])]);
+    }
+  },
+  render: function render(h) {
+    var _this2 = this;
+
+    return h("div", {
+      "class": bem()
+    }, [h("div", {
+      "class": bem("top-bar") + " half-border-bottom"
+    }, [h("div", {
+      "class": bem("top-left")
+    }, [h("div", {
+      "class": bem("bar")
+    }), h("div", {
+      "class": bem("title")
+    }, [this.title])]), h("div", {
+      "class": bem("top-right")
+    }, [h("span", {
+      "class": bem("fold-text")
+    }, ["\u6298\u53E0", this.title]), h(Switch, {
+      "model": {
+        value: _this2.isFold,
+        callback: function callback($$v) {
+          _this2.isFold = $$v;
+        }
+      }
+    })])]), this.processes.length ? h("div", {
+      "class": bem("container")
+    }, [this.genProcesses()]) : h()]);
+  }
+});

package/es/timeline/index.less

@@ -0,0 +1,130 @@
+@import '../style/var';
+
+.zt-timeline {
+  background-color: #fff;
+  &__top-bar {
+    height: 44px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  &__top-left {
+    display: flex;
+    align-items: center;
+  }
+  &__bar {
+    width: 4px;
+    height: 16px;
+    background: #0091fa;
+    margin-right: 12px;
+  }
+  &__title {
+    font-size: 16px;
+    font-weight: bold;
+    color: #000000;
+    line-height: 24px;
+  }
+  &__top-right {
+    padding-right: 16px;
+    display: flex;
+    align-items: center;
+  }
+  &__fold-text {
+    font-size: 16px;
+    color: rgba(0,0,0,0.60);
+    line-height: 24px;
+    margin-right: 8px;
+  }
+  &__container {
+    padding-top: 16px;
+  }
+  &__item {
+    padding: 0 16px 16px 16px;
+    display: flex;
+    &.last-item {
+      .zt-timeline__line {
+        height: 0;
+      }
+    }
+  }
+  &__left-container {
+    margin-right: 8px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+  &__right-container {
+    flex: 1;
+  }
+  &__avatar-box {
+    width: 40px;
+    height: 40px;
+  }
+  &__avatar {
+    width: 40px;
+    height: 40px;
+    background: #0091fa;
+    border-radius: 4px;
+    font-size: 14px;
+    font-weight: bold;
+    text-align: center;
+    color: #ffffff;
+    line-height: 40px;
+  }
+  &__line {
+    background-color: #f5f5f5;
+    width: 2px;
+    height: 100%;
+    margin-top: 4px;
+    margin-bottom: -12px;
+  }
+  &__title-box {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 8px;
+  }
+  &__title {
+    font-size: 16px;
+    font-weight: bold;
+    color: #000000;
+    line-height: 24px;
+  }
+  &__time {
+    font-size: 12px;
+    color: rgba(0,0,0,.8);
+    line-height: 16px;
+  }
+  &__content-box {
+    font-size: 14px;
+    color: rgba(0,0,0,0.80);
+    line-height: 20px;
+    padding-bottom: 8px;
+  }
+  &__main-container {
+    background: rgba(0,0,0,0.02);
+    border-radius: 4px;
+    padding: 8px 12px;
+    &::before {
+      border-radius: 4px;
+    }
+    .zt-timeline__text-bold {
+      font-weight: bold;
+      color: #000000;
+    }
+  }
+  &__opinion-box {
+    padding-top: 7px;
+  }
+  &__opinion-label {
+    margin-bottom: 4px;
+    font-size: 14px;
+    color: rgba(0,0,0,.4);
+    line-height: 20px;
+  }
+  &__opinion {
+    font-size: 14px;
+    color: #000000;
+    line-height: 20px;
+  }
+}

package/es/timeline/style/index.js

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

package/es/timeline/style/less.js

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