zartui 0.1.113 → 3.0.1

package/lib/dropdown-item/index.js

@@ -1,362 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-exports.__esModule = true;
-exports.default = void 0;
-
-var _utils = require("../utils");
-
-var _event = require("../utils/dom/event");
-
-var _portal = require("../mixins/portal");
-
-var _relation = require("../mixins/relation");
-
-var _cell = _interopRequireDefault(require("../cell"));
-
-var _icon = _interopRequireDefault(require("../icon"));
-
-var _popup = _interopRequireDefault(require("../popup"));
-
-var _checkbox = _interopRequireDefault(require("../checkbox"));
-
-// Utils
-// Mixins
-// Components
-var _createNamespace = (0, _utils.createNamespace)('dropdown-item'),
-    createComponent = _createNamespace[0],
-    bem = _createNamespace[1];
-
-var _default2 = createComponent({
-  mixins: [(0, _portal.PortalMixin)({
-    ref: 'wrapper'
-  }), (0, _relation.ChildrenMixin)('ztDropdownMenu')],
-  props: {
-    value: null,
-    title: String,
-    disabled: Boolean,
-    titleClass: String,
-    options: {
-      type: Array,
-      default: function _default() {
-        return [];
-      }
-    },
-    lazyRender: {
-      type: Boolean,
-      default: true
-    },
-    multiSelect: {
-      type: Boolean,
-      default: false
-    },
-    customToggle: {
-      type: Boolean,
-      default: false
-    },
-    placeholder: {
-      type: String,
-      default: '未选择'
-    }
-  },
-  data: function data() {
-    return {
-      transition: true,
-      showPopup: false,
-      showWrapper: false
-    };
-  },
-  computed: {
-    displayTitle: function displayTitle() {
-      var _this = this;
-
-      if (this.title) {
-        return this.title;
-      }
-
-      if (this.multiSelect) {
-        if (this.value.length) {
-          var value = '';
-          this.options.forEach(function (item) {
-            if (_this.value.indexOf(item.value) >= 0) {
-              value += item.text + '、';
-            }
-          });
-          value = value.substr(0, value.length - 1);
-          return value;
-        } else {
-          return this.placeholder;
-        }
-      } else {
-        var match = this.options.filter(function (option) {
-          return option.value === _this.value;
-        });
-        return match.length ? match[0].text : '';
-      }
-    }
-  },
-  watch: {
-    showPopup: function showPopup(val) {
-      this.bindScroll(val);
-    }
-  },
-  beforeCreate: function beforeCreate() {
-    var _this2 = this;
-
-    var createEmitter = function createEmitter(eventName) {
-      return function () {
-        return _this2.$emit(eventName);
-      };
-    };
-
-    this.onOpen = createEmitter('open');
-    this.onClose = createEmitter('close');
-    this.onOpened = createEmitter('opened');
-  },
-  methods: {
-    // @exposed-api
-    toggle: function toggle(show, options) {
-      if (show === void 0) {
-        show = !this.showPopup;
-      }
-
-      if (options === void 0) {
-        options = {};
-      }
-
-      if (this.customToggle && show !== this.showPopup) {
-        this.$emit('toggle');
-        return;
-      }
-
-      if (show === this.showPopup) {
-        return;
-      }
-
-      this.transition = !options.immediate;
-      this.showPopup = show;
-
-      if (show) {
-        this.parent.updateOffset();
-        this.showWrapper = true;
-      }
-    },
-    bindScroll: function bindScroll(bind) {
-      var scroller = this.parent.scroller;
-      var action = bind ? _event.on : _event.off;
-      action(scroller, 'scroll', this.onScroll, true);
-    },
-    onScroll: function onScroll() {
-      this.parent.updateOffset();
-    },
-    onClickWrapper: function onClickWrapper(event) {
-      // prevent being identified as clicking outside and closed when use get-contaienr
-      if (this.getContainer) {
-        event.stopPropagation();
-      }
-    },
-    select: function select(value) {
-      if (this.value.indexOf(value) >= 0) {
-        this.value.splice(this.value.indexOf(value), 1);
-      } else {
-        this.value.push(value);
-      }
-    },
-    isSelect: function isSelect(value) {
-      if (this.value.indexOf(value) >= 0) {
-        return true;
-      } else {
-        return false;
-      }
-    },
-    reset: function reset() {
-      this.showPopup = false;
-      this.$emit('input', []);
-      this.$emit('reset', []);
-    },
-    confirm: function confirm() {
-      this.showPopup = false;
-      this.$emit('input', this.value);
-      this.$emit('change', this.value);
-    }
-  },
-  render: function render() {
-    var _this3 = this;
-
-    var h = arguments[0];
-    var _this$parent = this.parent,
-        zIndex = _this$parent.zIndex,
-        offset = _this$parent.offset,
-        overlay = _this$parent.overlay,
-        duration = _this$parent.duration,
-        direction = _this$parent.direction,
-        activeColor = _this$parent.activeColor,
-        closeOnClickOverlay = _this$parent.closeOnClickOverlay;
-    var Options;
-
-    if (this.multiSelect) {
-      Options = this.options.map(function (option, index) {
-        var active = _this3.value.indexOf(option.value) >= 0;
-        return h(_cell.default, {
-          "attrs": {
-            "clickable": true,
-            "icon": option.icon,
-            "title": option.text
-          },
-          "key": option.value,
-          "class": index === _this3.options.length - 1 ? bem('option', {
-            active: active
-          }) : "half-border-bottom " + bem('option', {
-            active: active
-          }),
-          "style": "padding-left: 16px",
-          "on": {
-            "click": function click() {
-              _this3.select(option.value);
-            }
-          }
-        }, [h(_checkbox.default, {
-          "style": "padding:0;position: absolute;right: 0px;",
-          "attrs": {
-            "value": _this3.isSelect(option.value)
-          }
-        })]);
-      });
-    } else {
-      Options = this.options.map(function (option) {
-        var active = option.value === _this3.value;
-        return h(_cell.default, {
-          "attrs": {
-            "clickable": true,
-            "icon": option.icon,
-            "title": option.text
-          },
-          "key": option.value,
-          "class": "half-border-bottom " + bem('option', {
-            active: active
-          }),
-          "style": {
-            color: active ? activeColor : ''
-          },
-          "on": {
-            "click": function click() {
-              _this3.showPopup = false;
-
-              if (option.value !== _this3.value) {
-                _this3.$emit('input', option.value);
-
-                _this3.$emit('change', option.value);
-              }
-            }
-          }
-        }, [active && h(_icon.default, {
-          "class": bem('icon'),
-          "attrs": {
-            "color": activeColor,
-            "name": "correct-checked"
-          }
-        })]);
-      });
-    }
-
-    var buttonStyle;
-    var optionStyle;
-    var popupStyle;
-
-    if (this.options.length < 7) {
-      var height = this.options.length * 44;
-      var popupHeight = this.options.length * 44 + 44;
-      buttonStyle = 'top:' + (height + "px");
-      optionStyle = 'height:' + (height + "px");
-      popupStyle = "padding-left: 0px;height:" + (popupHeight + "px");
-    } else {
-      buttonStyle = 'top: 308px';
-      optionStyle = 'height: 308px';
-      popupStyle = "padding-left: 0px;height: 352px";
-    }
-
-    var style = {
-      zIndex: zIndex
-    };
-
-    if (direction === 'down') {
-      style.top = offset + "px";
-    } else {
-      style.bottom = offset + "px";
-    }
-
-    return h("div", [h("div", {
-      "directives": [{
-        name: "show",
-        value: this.showWrapper
-      }],
-      "ref": "wrapper",
-      "style": style,
-      "class": bem([direction]),
-      "on": {
-        "click": this.onClickWrapper
-      }
-    }, [h(_popup.default, {
-      "attrs": {
-        "overlay": overlay,
-        "position": direction === 'down' ? 'top' : 'bottom',
-        "duration": this.transition ? duration : 0,
-        "lazyRender": this.lazyRender,
-        "overlayStyle": {
-          position: 'absolute'
-        },
-        "closeOnClickOverlay": closeOnClickOverlay
-      },
-      "class": bem('content'),
-      "style": this.multiSelect ? popupStyle : "",
-      "on": {
-        "open": this.onOpen,
-        "close": this.onClose,
-        "opened": this.onOpened,
-        "closed": function closed() {
-          _this3.showWrapper = false;
-
-          _this3.$emit('closed');
-        }
-      },
-      "model": {
-        value: _this3.showPopup,
-        callback: function callback($$v) {
-          _this3.showPopup = $$v;
-        }
-      }
-    }, [h("div", {
-      "directives": [{
-        name: "show",
-        value: !this.multiSelect
-      }]
-    }, [Options]), h("div", {
-      "class": "options",
-      "style": optionStyle,
-      "directives": [{
-        name: "show",
-        value: this.multiSelect
-      }]
-    }, [Options]), h("div", {
-      "class": "button",
-      "style": buttonStyle,
-      "directives": [{
-        name: "show",
-        value: this.multiSelect
-      }]
-    }, [h("div", {
-      "class": "button-reset",
-      "on": {
-        "click": this.reset
-      }
-    }, ["\u91CD\u7F6E"]), h("div", {
-      "class": "button-confirm",
-      "on": {
-        "click": this.confirm
-      }
-    }, ["\u786E\u5B9A"])]), this.slots('default')])])]);
-  }
-});
-
-exports.default = _default2;

package/lib/dropdown-item/index.less

@@ -1,84 +0,0 @@
-@import '../style/var';
-
-.zt-dropdown-item {
-  position: fixed;
-  right: 0;
-  left: 0;
-  z-index: @dropdown-item-z-index;
-  overflow: hidden;
-
-  &__icon {
-    display: block;
-    line-height: inherit;
-    font-size: 24px;
-  }
-
-  .zt-cell::after {
-    border: none;
-  }
-
-  &__option {
-    text-align: left;
-    font-size: @dropdown-menu-option-font-size;
-    padding-left: 0;
-
-    &--active {
-      color: @dropdown-menu-option-active-color;
-
-      .zt-dropdown-item__icon {
-        color: @dropdown-menu-option-active-color;
-      }
-    }
-  }
-
-  &--up {
-    top: 0;
-  }
-
-  &--down {
-    bottom: 0;
-  }
-
-  &__content, &__content.zt-popup {
-    position: absolute;
-    max-height: @dropdown-menu-content-max-height;
-    padding-left: @padding-md;
-    box-sizing: border-box;
-  }
-
-}
-
-.options{
-  position: absolute;
-  top: 0px;
-  width: 100%;
-  overflow-y: scroll;
-}
-
-.button{
-  position: absolute;
-  z-index: 1;
-  width: 100%;
-  height: 44px;
-  display: flex;
-  border-top: 1px solid rgba(0,0,0,0.05);
-}
-.button-reset{
-  width: 50%;
-  font-family: PingFangSC-Regular;
-  font-weight: 400;
-  font-size: 16px;
-  color: #FF9623;
-  text-align: center;
-  padding-top: 11px;
-}
-.button-confirm{
-  width: 50%;
-  background-color: #0091FA;
-  font-family: PingFangSC-Semibold;
-  font-weight: 600;
-  font-size: 16px;
-  color: #F5F5FA;
-  text-align: center;
-  padding-top: 11px;
-}

package/lib/dropdown-item/style/index.js

@@ -1,8 +0,0 @@
-require('../../style/base.css');
-require('../../overlay/index.css');
-require('../../info/index.css');
-require('../../icon/index.css');
-require('../../checkbox/index.css');
-require('../../cell/index.css');
-require('../../popup/index.css');
-require('../index.css');

package/lib/dropdown-item/style/less.js

@@ -1,8 +0,0 @@
-require('../../style/base.less');
-require('../../overlay/index.less');
-require('../../info/index.less');
-require('../../icon/index.less');
-require('../../checkbox/index.less');
-require('../../cell/index.less');
-require('../../popup/index.less');
-require('../index.less');

package/lib/dropdown-menu/index.css

@@ -1 +0,0 @@
-.zt-dropdown-menu{-webkit-user-select:none;user-select:none;font-family:PingFangSC-Regular}.zt-dropdown-menu__bar{position:relative;display:-webkit-box;display:-webkit-flex;display:flex;height:44px;background-color:#fff;padding:0 16px;-webkit-box-align:center;-webkit-align-items:center;align-items:center}.zt-dropdown-menu__bar--opened{z-index:11}.zt-dropdown-menu__item{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-flex:1;-webkit-flex:1;flex:1;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;min-width:0;cursor:pointer;height:28px;margin-right:8px}.zt-dropdown-menu__item:last-child{margin-right:0}.zt-dropdown-menu__item:active{opacity:.7}.zt-dropdown-menu__item--disabled:active{opacity:1}.zt-dropdown-menu__item--disabled .zt-dropdown-menu__title{color:#969799}.zt-dropdown-menu__title{position:relative;box-sizing:border-box;width:100%;padding:0 8px;color:#000;font-size:14px;line-height:22px}.zt-dropdown-menu__title .zt-icon{position:absolute;top:50%;right:8px;margin-top:-6px;color:#dcdee0}.zt-dropdown-menu__title .zt-dropdown-menu__icon{-webkit-transform:rotate(90deg);transform:rotate(90deg)}.zt-dropdown-menu__title--active{color:#0091fa}.zt-dropdown-menu__title--active .zt-icon{color:currentColor}.zt-dropdown-menu__title--active .zt-dropdown-menu__icon{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}.zt-dropdown-menu__title--down::after{margin-top:-1px;-webkit-transform:rotate(135deg);transform:rotate(135deg)}

package/lib/dropdown-menu/index.js

@@ -1,152 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-exports.__esModule = true;
-exports.default = void 0;
-
-var _utils = require("../utils");
-
-var _scroll = require("../utils/dom/scroll");
-
-var _relation = require("../mixins/relation");
-
-var _clickOutside = require("../mixins/click-outside");
-
-var _icon = _interopRequireDefault(require("../icon"));
-
-// Utils
-// Mixins
-var _createNamespace = (0, _utils.createNamespace)('dropdown-menu'),
-    createComponent = _createNamespace[0],
-    bem = _createNamespace[1];
-
-var _default = createComponent({
-  mixins: [(0, _relation.ParentMixin)('ztDropdownMenu'), (0, _clickOutside.ClickOutsideMixin)({
-    event: 'click',
-    method: 'onClickOutside'
-  })],
-  props: {
-    zIndex: [Number, String],
-    activeColor: String,
-    overlay: {
-      type: Boolean,
-      default: true
-    },
-    duration: {
-      type: [Number, String],
-      default: 0.2
-    },
-    direction: {
-      type: String,
-      default: 'down'
-    },
-    closeOnClickOverlay: {
-      type: Boolean,
-      default: true
-    }
-  },
-  data: function data() {
-    return {
-      offset: 0
-    };
-  },
-  computed: {
-    scroller: function scroller() {
-      return (0, _scroll.getScroller)(this.$el);
-    },
-    opened: function opened() {
-      return this.children.some(function (item) {
-        return item.showWrapper;
-      });
-    },
-    barStyle: function barStyle() {
-      if (this.opened && (0, _utils.isDef)(this.zIndex)) {
-        return {
-          zIndex: 1 + this.zIndex
-        };
-      }
-    }
-  },
-  methods: {
-    updateOffset: function updateOffset() {
-      if (!this.$refs.bar) {
-        return;
-      }
-
-      var rect = this.$refs.bar.getBoundingClientRect();
-
-      if (this.direction === 'down') {
-        this.offset = rect.bottom;
-      } else {
-        this.offset = window.innerHeight - rect.top;
-      }
-    },
-    toggleItem: function toggleItem(active) {
-      this.children.forEach(function (item, index) {
-        if (index === active) {
-          item.toggle();
-        } else if (item.showPopup) {
-          item.toggle(false, {
-            immediate: true
-          });
-        }
-      });
-    },
-    onClickOutside: function onClickOutside() {
-      this.children.forEach(function (item) {
-        item.toggle(false);
-      });
-    }
-  },
-  render: function render() {
-    var _this = this;
-
-    var h = arguments[0];
-    var Titles = this.children.map(function (item, index) {
-      return h("div", {
-        "attrs": {
-          "role": "button",
-          "tabindex": item.disabled ? -1 : 0
-        },
-        "class": 'half-border ' + bem('item', {
-          disabled: item.disabled
-        }),
-        "on": {
-          "click": function click() {
-            if (!item.disabled) {
-              _this.toggleItem(index);
-            }
-          }
-        }
-      }, [h("span", {
-        "class": [bem('title', {
-          active: item.showPopup,
-          down: item.showPopup === (_this.direction === 'down')
-        }), item.titleClass],
-        "style": {
-          color: item.showPopup ? _this.activeColor : ''
-        }
-      }, [h("div", {
-        "class": "zt-ellipsis",
-        "style": "padding-right: 18px"
-      }, [item.slots('title') || item.displayTitle, item.slots('icon') || h(_icon.default, {
-        "class": bem('icon'),
-        "attrs": {
-          "name": "play"
-        }
-      })])])]);
-    });
-    return h("div", {
-      "class": bem()
-    }, [h("div", {
-      "ref": "bar",
-      "style": this.barStyle,
-      "class": bem('bar', {
-        opened: this.opened
-      })
-    }, [Titles]), this.slots('default')]);
-  }
-});
-
-exports.default = _default;

package/lib/dropdown-menu/index.less

@@ -1,85 +0,0 @@
-@import '../style/var';
-
-.zt-dropdown-menu {
-  user-select: none;
-  font-family: PingFangSC-Regular;
-
-  &__bar {
-    position: relative;
-    display: flex;
-    height: @dropdown-menu-height;
-    background-color: @dropdown-menu-background-color;
-    padding: @dropdown-menu-padding;
-    align-items: center;
-
-    &--opened {
-      z-index: @dropdown-item-z-index + 1;
-    }
-  }
-
-  &__item {
-    display: flex;
-    flex: 1;
-    align-items: center;
-    justify-content: center;
-    min-width: 0; // hack for flex ellipsis
-    cursor: pointer;
-    height: @dropdown-menu-item-height;
-    margin-right: @dropdown-menu-item-margin-right;
-    &:last-child {
-      margin-right: 0;
-    }
-    &:active {
-      opacity: @active-opacity;
-    }
-
-    &--disabled {
-      &:active {
-        opacity: 1;
-      }
-
-      .zt-dropdown-menu__title {
-        color: @dropdown-menu-title-disabled-text-color;
-      }
-    }
-  }
-
-  &__title {
-    position: relative;
-    box-sizing: border-box;
-    width: 100%;
-    padding: @dropdown-menu-title-padding;
-    color: @dropdown-menu-title-text-color;
-    font-size: @dropdown-menu-title-font-size;
-    line-height: @dropdown-menu-title-line-height;
-
-    .zt-icon {
-      position: absolute;
-      top: 50%;
-      right: 8px;
-      margin-top: -6px;
-      color: @gray-4;
-    }
-    .zt-dropdown-menu__icon {
-      transform: rotate(90deg);
-    }
-
-    &--active {
-      color: @dropdown-menu-title-active-text-color;
-
-      .zt-icon {
-        color: currentColor;
-      }
-      .zt-dropdown-menu__icon {
-        transform: rotate(-90deg);
-      }
-    }
-
-    &--down {
-      &::after {
-        margin-top: -1px;
-        transform: rotate(135deg);
-      }
-    }
-  }
-}

package/lib/dropdown-menu/style/index.js

@@ -1,4 +0,0 @@
-require('../../style/base.css');
-require('../../info/index.css');
-require('../../icon/index.css');
-require('../index.css');