zartui 0.1.60 → 0.1.61

package/es/hierarchy-select/index.css

@@ -0,0 +1 @@
+[class*=zt-hairline]::after{position:absolute;box-sizing:border-box;content:' ';pointer-events:none;top:-50%;right:-50%;bottom:-50%;left:-50%;border:0 solid rgba(0,0,0,.1);-webkit-transform:scale(.5);transform:scale(.5)}.zt-hairline,.zt-hairline--bottom,.zt-hairline--left,.zt-hairline--right,.zt-hairline--surround,.zt-hairline--top,.zt-hairline--top-bottom{position:relative}.zt-hairline--top::after{border-top-width:1px}.zt-hairline--left::after{border-left-width:1px}.zt-hairline--right::after{border-right-width:1px}.zt-hairline--bottom::after{border-bottom-width:1px}.zt-hairline--top-bottom::after,.zt-hairline-unset--top-bottom::after{border-width:1px 0}.zt-hairline--surround::after{border-width:1px}.zt-hierarchy-select__wrap{width:100%;background:#fff;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;flex-direction:column}.zt-hierarchy-select__button-cancel{text-align:center;color:#ff4b50;padding:20px;-webkit-box-flex:1;-webkit-flex:1;flex:1}.zt-hierarchy-select__button-ok{text-align:center;color:#3a90f6;padding:20px;-webkit-box-flex:1;-webkit-flex:1;flex:1}.zt-hierarchy-select__actions{height:350px;overflow-y:auto}.zt-hierarchy-select__actions-item{padding:20px 0;text-align:center;color:#333;font-size:15px}.zt-hierarchy-select__button-wrap{display:-webkit-box;display:-webkit-flex;display:flex;height:50px}.zt-hierarchy-select__container{background-color:#fff;padding:12px 20px 20px 20px;margin:0 0 2px 0}.zt-hierarchy-select__icon-text{font-size:12px;line-height:15px;color:#333}.zt-hierarchy-select__icon-wrap{padding:8px 10px;background-color:#fff;border:1px solid #727e8d;margin:8px 10px 0 0;border-radius:8px;display:-webkit-box;display:-webkit-flex;display:flex;float:left}.zt-hierarchy-select__cancel{height:12px;width:12px;margin:0 0 0 3px}

package/es/hierarchy-select/index.js

@@ -0,0 +1,188 @@
+// Utils
+import { createNamespace } from '../utils'; // Components
+
+import Loading from '../loading';
+import Popup from '../popup';
+import Icon from '../icon';
+import { PopupMixin } from '../mixins/popup';
+import { deepClone } from '../utils/deep-clone';
+
+var _createNamespace = createNamespace('hierarchy-select'),
+    createComponent = _createNamespace[0],
+    bem = _createNamespace[1],
+    t = _createNamespace[2];
+
+import Toast from '../toast';
+export default createComponent({
+  mixins: [PopupMixin()],
+  props: {
+    showPicker: {
+      type: Boolean,
+      default: false
+    },
+    maskClosable: {
+      type: Boolean,
+      default: false
+    },
+    showCancel: {
+      type: Boolean,
+      default: true
+    },
+    cancelText: {
+      type: String,
+      default: '取消'
+    },
+    getHierarchyList: {
+      type: Function,
+      default: function _default() {}
+    }
+  },
+  data: function data() {
+    return {
+      loading: false,
+      hierarchyList: [],
+      hierarchyListCache: [],
+      hierarchyCache: [],
+      selectIndex: 0,
+      showComfirmBtn: false
+    };
+  },
+  mounted: function mounted() {
+    this.getHierarchyById(-1);
+  },
+  methods: {
+    handleCancel: function handleCancel() {
+      this.$emit('cancel');
+    },
+    unitNaviBack: function unitNaviBack(index) {
+      this.hierarchyList = this.hierarchyListCache[index];
+      this.hierarchyCache = this.hierarchyCache.slice(0, index);
+      this.hierarchyListCache = this.hierarchyListCache.slice(0, index);
+      this.showComfirmBtn = false;
+    },
+    onClick: function onClick(item, index) {
+      this.selectIndex = index;
+      var list = deepClone(this.hierarchyList);
+      var hierarchyInfo = list[index];
+
+      if (this.showComfirmBtn) {
+        // 不存在子级
+        this.hierarchyCache.pop();
+      } else {
+        this.hierarchyListCache.push(list);
+      }
+
+      this.hierarchyCache.push({
+        name: hierarchyInfo.name,
+        id: hierarchyInfo.id
+      });
+      this.getHierarchyById(hierarchyInfo.id);
+    },
+    handleConfirm: function handleConfirm() {
+      this.$emit('confirm', this.hierarchyCache);
+    },
+    handleResult: function handleResult(data) {
+      if (data.length > 0) {
+        this.selectIndex = 0;
+        this.hierarchyList = deepClone(data);
+        this.$nextTick(function () {
+          var element = document.getElementById("scrollItem");
+
+          if (element) {
+            element.scrollTop = 0;
+          }
+        });
+        this.showComfirmBtn = false;
+      } else {
+        this.showComfirmBtn = true;
+      }
+    },
+    getHierarchyById: function getHierarchyById(id) {
+      var _this = this;
+
+      this.loading = true;
+      this.getHierarchyList(id).then(function (array) {
+        _this.loading = false;
+
+        _this.handleResult(array || []);
+      }).catch(function (err) {
+        _this.loading = false;
+        Toast(err);
+      });
+    },
+    hierarchyReset: function hierarchyReset() {
+      if (this.hierarchyCache.length > 0) {
+        this.unitNaviBack(0);
+      }
+    },
+    genSelector: function genSelector() {
+      var _this2 = this;
+
+      var h = this.$createElement;
+      return h("div", {
+        "class": bem("wrap")
+      }, [this.hierarchyCache && this.hierarchyCache.length > 0 ? h("div", {
+        "class": bem("container")
+      }, [this.hierarchyCache.map(function (item, index) {
+        return h("div", [h("div", {
+          "class": bem("icon-wrap")
+        }, [h("div", {
+          "class": bem("icon-text")
+        }, [item.name]), h(Icon, {
+          "attrs": {
+            "name": "cross"
+          },
+          "class": bem("cancel"),
+          "on": {
+            "click": function click() {
+              _this2.unitNaviBack(index);
+            }
+          }
+        })])]);
+      })]) : h(), h("div", {
+        "class": bem("actions"),
+        "attrs": {
+          "id": "scrollItem"
+        }
+      }, [this.hierarchyList && this.hierarchyList.length ? this.hierarchyList.map(function (item, index) {
+        return h("div", {
+          "class": bem("actions-item"),
+          "on": {
+            "click": function click() {
+              _this2.onClick(item, index);
+            }
+          },
+          "style": index === _this2.selectIndex ? 'color: #3A90F6' : ''
+        }, [item.name]);
+      }) : h()]), h("div", {
+        "class": bem("button-wrap")
+      }, [this.showCancel ? h("div", {
+        "class": bem("button-cancel"),
+        "on": {
+          "click": this.handleCancel
+        }
+      }, [this.cancelText]) : h(), h("div", {
+        "class": bem("button-ok"),
+        "on": {
+          "click": this.handleConfirm
+        }
+      }, ["\u786E\u5B9A"])])]);
+    }
+  },
+  render: function render(h) {
+    return h(Popup, {
+      "attrs": {
+        "value": this.showPicker,
+        "round": true,
+        "position": "bottom",
+        "closeOnPopstate": true,
+        "closeOnClickOverlay": this.maskClosable
+      },
+      "class": bem('popup')
+    }, [h("div", {
+      "class": bem()
+    }, [this.loading ? h(Loading, {
+      "class": bem('loading')
+    }) : h(), this.genSelector()])]);
+  }
+});

package/es/hierarchy-select/index.less

@@ -0,0 +1,77 @@
+@import '../style/var';
+@import '../style/hairline';
+.zt-hierarchy-select__popup {
+  &.zt-popup {
+    // height: 100%;
+  }
+}
+.zt-hierarchy-select {
+  // height: 100%;
+  &__wrap {
+    width: 100%;
+    // height: 100%;
+    background: white;
+    display: flex;
+    flex-direction: column;
+  }
+  
+  &__button-cancel {
+    text-align: center;
+    color: @hierarchy-select-cancel-color;
+    padding: @hierarchy-select-button-padding;
+    flex: 1;
+  }
+  
+  &__button-ok {
+    text-align: center;
+    color: #3A90F6;
+    padding: @hierarchy-select-button-padding;
+    flex: 1;
+  }
+  
+  &__actions {
+    // height: calc(100% - 50px);
+    height: @hierarchy-select-actions-height;
+    overflow-y: auto;
+  }
+  
+  &__actions-item {
+    padding: @hierarchy-select-actions-item-padding;
+    text-align: center;
+    color: @hierarchy-select-actions-item-color;
+    font-size: @hierarchy-select-actions-item-font-size;
+  }
+  
+  &__button-wrap{
+    display: flex;
+    height: @hierarchy-select-button-height;
+  }
+  
+  &__container {
+    background-color: white;
+    padding: @hierarchy-select-selected-container-padding;
+    margin: @hierarchy-select-selected-container-margin;
+  }
+  
+  &__icon-text {
+    font-size: @hierarchy-select-selected-font-size;
+    line-height: @hierarchy-select-selected-line-height;
+    color: @hierarchy-select-selected-color;
+  }
+  
+  &__icon-wrap {
+    padding: @hierarchy-select-selected-item-padding;
+    background-color: #fff;
+    border: @hierarchy-select-selected-item-border;
+    margin: @hierarchy-select-selected-item-margin;
+    border-radius: @hierarchy-select-selected-item-border-radius;
+    display: flex;
+    float: left;
+  }
+  
+  &__cancel {
+    height: @hierarchy-select-selected-cancel-size;
+    width: @hierarchy-select-selected-cancel-size;
+    margin: @hierarchy-select-selected-cancel-margin;
+  }
+}

package/es/hierarchy-select/style/index.js

@@ -0,0 +1,8 @@
+import '../../style/base.css';
+import '../../overlay/index.css';
+import '../../info/index.css';
+import '../../icon/index.css';
+import '../../popup/index.css';
+import '../../loading/index.css';
+import '../../toast/index.css';
+import '../index.css';

package/es/hierarchy-select/style/less.js

@@ -0,0 +1,8 @@
+import '../../style/base.less';
+import '../../overlay/index.less';
+import '../../info/index.less';
+import '../../icon/index.less';
+import '../../popup/index.less';
+import '../../loading/index.less';
+import '../../toast/index.less';
+import '../index.less';

package/es/index.js

@@ -23,6 +23,7 @@ import Empty from './empty';
 import Field from './field';
 import FoldDialog from './fold-dialog';
 import Form from './form';
+import HierarchySelect from './hierarchy-select';
 import Icon from './icon';
 import Image from './image';
 import ImagePreview from './image-preview';
@@ -69,10 +70,10 @@ import Tabs from './tabs';
 import Tag from './tag';
 import Toast from './toast';
 import Uploader from './uploader';
-var version = '0.1.60';
+var version = '0.1.61';
 
 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, Icon, Image, ImagePreview, IndexAnchor, IndexBar, Info, Lazyload, List, Loading, Locale, 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, HierarchySelect, Icon, Image, ImagePreview, IndexAnchor, IndexBar, Info, Lazyload, List, Loading, Locale, 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];
   components.forEach(function (item) {
     if (item.install) {
       Vue.use(item);
@@ -86,7 +87,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, Icon, Image, ImagePreview, IndexAnchor, IndexBar, Info, Lazyload, List, Loading, Locale, 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, HierarchySelect, Icon, Image, ImagePreview, IndexAnchor, IndexBar, Info, Lazyload, List, Loading, Locale, 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 default {
   install: install,
   version: version

package/es/style/var.less

@@ -1008,4 +1008,24 @@
 @foldDialog-content-color: @black;
 @foldDialog-content-font-size: @font-size-lg;
 @foldDialog-content-line-height: 24px;
-@foldDialog-button-color: @blue;
+@foldDialog-button-color: @blue;
+
+// Hierarchy-Select
+@hierarchy-select-cancel-color: rgba(255, 75, 80, 1);
+@hierarchy-select-button-padding: 20px;
+@hierarchy-select-button-height: 50px;
+@hierarchy-select-actions-height: 350px;
+@hierarchy-select-actions-item-padding: 20px 0;
+@hierarchy-select-actions-item-color: rgba(51, 51, 51, 1);
+@hierarchy-select-actions-item-font-size: 15px;
+@hierarchy-select-selected-container-padding: 12px 20px 20px 20px;
+@hierarchy-select-selected-container-margin: 0 0 2px 0;
+@hierarchy-select-selected-font-size: 12px;
+@hierarchy-select-selected-line-height: 15px;
+@hierarchy-select-selected-color: #333333;
+@hierarchy-select-selected-item-padding: 8px 10px;
+@hierarchy-select-selected-item-border: 1px solid rgba(114, 126, 141, 1);
+@hierarchy-select-selected-item-margin: 8px 10px 0 0;
+@hierarchy-select-selected-item-border-radius: 8px;
+@hierarchy-select-selected-cancel-size: 12px;
+@hierarchy-select-selected-cancel-margin: 0 0 0 3px;