zartui 0.1.113 → 3.0.1

package/lib/skeleton/index.js

@@ -1,144 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-exports.__esModule = true;
-exports.default = void 0;
-
-var _babelHelperVueJsxMergeProps = _interopRequireDefault(require("@vue/babel-helper-vue-jsx-merge-props"));
-
-var _utils = require("../utils");
-
-var _functional = require("../utils/functional");
-
-// Utils
-var _createNamespace = (0, _utils.createNamespace)('skeleton'),
-    createComponent = _createNamespace[0],
-    bem = _createNamespace[1];
-
-var DEFAULT_ROW_WIDTH = '100%';
-var DEFAULT_LAST_ROW_WIDTH = '60%';
-
-function Skeleton(h, props, slots, ctx) {
-  if (!props.loading) {
-    return slots.default && slots.default();
-  }
-
-  function Title() {
-    if (props.title && !props.field) {
-      return h("h3", {
-        "class": bem('title'),
-        "style": {
-          width: (0, _utils.addUnit)(props.titleWidth)
-        }
-      });
-    }
-  }
-
-  function Rows() {
-    var Rows = [];
-    var rowWidth = props.rowWidth;
-
-    function getRowWidth(index) {
-      if (rowWidth === DEFAULT_ROW_WIDTH && index === +props.row - 1) {
-        return DEFAULT_LAST_ROW_WIDTH;
-      }
-
-      if (Array.isArray(rowWidth)) {
-        return rowWidth[index];
-      }
-
-      return rowWidth;
-    }
-
-    for (var i = 0; i < props.row; i++) {
-      if (props.field) {
-        Rows.push(h("div", {
-          "class": bem('field')
-        }, [h("span", {
-          "class": bem('field-title'),
-          "style": {
-            width: (0, _utils.addUnit)(props.titleWidth)
-          }
-        }), h("span", {
-          "class": bem('field-value'),
-          "style": {
-            width: (0, _utils.addUnit)(getRowWidth(i))
-          }
-        })]));
-      } else if (props.textarea) {
-        Rows.push(h("div", {
-          "class": bem('textarea'),
-          "style": {
-            width: (0, _utils.addUnit)(getRowWidth(i))
-          }
-        }));
-      } else {
-        Rows.push(h("div", {
-          "class": bem('row'),
-          "style": {
-            width: (0, _utils.addUnit)(getRowWidth(i))
-          }
-        }));
-      }
-    }
-
-    return Rows;
-  }
-
-  function Avatar() {
-    if (props.avatar) {
-      var size = (0, _utils.addUnit)(props.avatarSize);
-      return h("div", {
-        "class": bem('avatar', props.avatarShape),
-        "style": {
-          width: size,
-          height: size
-        }
-      });
-    }
-  }
-
-  return h("div", (0, _babelHelperVueJsxMergeProps.default)([{
-    "class": bem({
-      animate: props.animate,
-      round: props.round
-    })
-  }, (0, _functional.inherit)(ctx)]), [Avatar(), h("div", {
-    "class": bem('content')
-  }, [Title(), Rows()])]);
-}
-
-Skeleton.props = {
-  title: Boolean,
-  round: Boolean,
-  avatar: Boolean,
-  field: Boolean,
-  textarea: Boolean,
-  titleWidth: [Number, String],
-  avatarSize: [Number, String],
-  row: {
-    type: [Number, String],
-    default: 0
-  },
-  loading: {
-    type: Boolean,
-    default: true
-  },
-  animate: {
-    type: Boolean,
-    default: true
-  },
-  avatarShape: {
-    type: String,
-    default: 'round'
-  },
-  rowWidth: {
-    type: [Number, String, Array],
-    default: DEFAULT_ROW_WIDTH
-  }
-};
-
-var _default = createComponent(Skeleton);
-
-exports.default = _default;

package/lib/skeleton/index.less

@@ -1,85 +0,0 @@
-@import '../style/var';
-
-.zt-skeleton {
-  display: flex;
-  padding: 0 @padding-md;
-
-  &__avatar {
-    flex-shrink: 0;
-    width: @skeleton-avatar-size;
-    height: @skeleton-avatar-size;
-    margin-right: @padding-md;
-    background-color: @skeleton-avatar-background-color;
-
-    &--round {
-      border-radius: @border-radius-max;
-    }
-  }
-
-  &__content {
-    width: 100%;
-  }
-
-  &__avatar + &__content {
-    padding-top: @padding-xs;
-  }
-
-  &__row,
-  &__textarea,
-  &__title {
-    height: @skeleton-row-height;
-    background-color: @skeleton-row-background-color;
-  }
-
-  &__title {
-    width: @skeleton-title-width;
-    margin: 0;
-  }
-
-  &__row {
-    &:not(:first-child) {
-      margin-top: @skeleton-row-margin-top;
-    }
-  }
-  
-  &__textarea {
-    margin-top: 10px;
-  }
-
-  &__title + &__row {
-    margin-top: 20px;
-  }
-
-  &--animate {
-    animation: zt-skeleton-blink @skeleton-animation-duration ease-in-out
-      infinite;
-  }
-
-  &--round {
-    .zt-skeleton__row,
-    .zt-skeleton__title {
-      border-radius: @border-radius-max;
-    }
-  }
-  
-  &__field {
-    width: 100%;
-    display: flex;
-    justify-content: space-between;
-    &:not(:first-child) {
-      margin-top: 16px;
-    }
-  }
-  
-  &__field-title,
-  &__field-value {
-    height: 16px;
-    background-color: @skeleton-row-background-color;
-  }
-}
-
-@keyframes zt-skeleton-blink {
-  50% {
-    opacity: 0.5;
-  }
-}

package/lib/skeleton/style/index.js

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

package/lib/skeleton/style/less.js

@@ -1,2 +0,0 @@
-require('../../style/base.less');
-require('../index.less');

package/lib/slider/index.css

@@ -1 +0,0 @@
-.zt-slider__container{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center}.zt-slider__container .zt-slider__progress{-webkit-box-flex:3;-webkit-flex:3;flex:3;text-align:center;font-size:14px}.zt-slider__container .zt-slider__title{-webkit-box-flex:2;-webkit-flex:2;flex:2;text-align:left;font-size:14px;font-weight:700}.zt-slider__container .zt-slider{position:relative;width:100%;height:4px;background-color:#ebedf0;cursor:pointer;-webkit-box-flex:10;-webkit-flex:10;flex:10}.zt-slider__container .zt-slider::before{position:absolute;top:-8px;right:0;bottom:-8px;left:0;content:''}.zt-slider__container .zt-slider__bar{position:relative;width:100%;height:100%;background-color:#0091fa;border-radius:inherit;-webkit-transition:all .2s;transition:all .2s}.zt-slider__container .zt-slider__button{width:24px;height:24px;background-color:#fff;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.2)}.zt-slider__container .zt-slider__button-wrapper,.zt-slider__container .zt-slider__button-wrapper-right{position:absolute;top:50%;right:0;-webkit-transform:translate3d(50%,-50%,0);transform:translate3d(50%,-50%,0);cursor:grab}.zt-slider__container .zt-slider__button-wrapper-left{position:absolute;top:50%;left:0;-webkit-transform:translate3d(-50%,-50%,0);transform:translate3d(-50%,-50%,0);cursor:grab}.zt-slider__container .zt-slider--disabled{cursor:not-allowed;opacity:.4}.zt-slider__container .zt-slider--disabled .zt-slider__button-wrapper,.zt-slider__container .zt-slider--disabled .zt-slider__button-wrapper-left,.zt-slider__container .zt-slider--disabled .zt-slider__button-wrapper-right{cursor:not-allowed}.zt-slider__container .zt-slider--vertical{display:inline-block;width:4px;height:100%}.zt-slider__container .zt-slider--vertical .zt-slider__button-wrapper,.zt-slider__container .zt-slider--vertical .zt-slider__button-wrapper-right{top:auto;right:50%;bottom:0;-webkit-transform:translate3d(50%,50%,0);transform:translate3d(50%,50%,0)}.zt-slider__container .zt-slider--vertical .zt-slider__button-wrapper-left{top:0;right:50%;left:auto;-webkit-transform:translate3d(50%,-50%,0);transform:translate3d(50%,-50%,0)}.zt-slider__container .zt-slider--vertical::before{top:0;right:-8px;bottom:0;left:-8px}

package/lib/slider/index.js

@@ -1,352 +0,0 @@
-"use strict";
-
-exports.__esModule = true;
-exports.default = void 0;
-
-var _utils = require("../utils");
-
-var _deepClone = require("../utils/deep-clone");
-
-var _event = require("../utils/dom/event");
-
-var _number = require("../utils/format/number");
-
-var _touch = require("../mixins/touch");
-
-var _field = require("../mixins/field");
-
-var _createNamespace = (0, _utils.createNamespace)('slider'),
-    createComponent = _createNamespace[0],
-    bem = _createNamespace[1];
-
-var isSameValue = function isSameValue(newValue, oldValue) {
-  return JSON.stringify(newValue) === JSON.stringify(oldValue);
-};
-
-var _default = createComponent({
-  mixins: [_touch.TouchMixin, _field.FieldMixin],
-  props: {
-    disabled: Boolean,
-    vertical: Boolean,
-    range: Boolean,
-    barHeight: [Number, String],
-    buttonSize: [Number, String],
-    activeColor: [String, Array],
-    inactiveColor: String,
-    min: {
-      type: [Number, String],
-      default: 0
-    },
-    max: {
-      type: [Number, String],
-      default: 100
-    },
-    step: {
-      type: [Number, String],
-      default: 1
-    },
-    value: {
-      type: [Number, Array],
-      default: 0
-    },
-    progress: {
-      type: Boolean,
-      default: false
-    },
-    progressText: Boolean,
-    title: String
-  },
-  data: function data() {
-    return {
-      dragStatus: ''
-    };
-  },
-  computed: {
-    scope: function scope() {
-      return this.max - this.min;
-    },
-    buttonStyle: function buttonStyle() {
-      if (this.buttonSize) {
-        var size = (0, _utils.addUnit)(this.buttonSize);
-        return {
-          width: size,
-          height: size
-        };
-      }
-    }
-  },
-  created: function created() {
-    // format initial value
-    this.updateValue(this.value);
-  },
-  mounted: function mounted() {
-    if (!this.progress) {
-      if (this.range) {
-        this.bindTouchEvent(this.$refs.wrapper0);
-        this.bindTouchEvent(this.$refs.wrapper1);
-      } else {
-        this.bindTouchEvent(this.$refs.wrapper);
-      }
-    }
-  },
-  methods: {
-    onTouchStart: function onTouchStart(event) {
-      if (this.disabled) {
-        return;
-      }
-
-      this.touchStart(event);
-      this.currentValue = this.value;
-
-      if (this.range) {
-        this.startValue = this.value.map(this.format);
-      } else {
-        this.startValue = this.format(this.value);
-      }
-
-      this.dragStatus = 'start';
-    },
-    onTouchMove: function onTouchMove(event) {
-      if (this.disabled) {
-        return;
-      }
-
-      if (this.dragStatus === 'start') {
-        this.$emit('drag-start');
-      }
-
-      (0, _event.preventDefault)(event, true);
-      this.touchMove(event);
-      this.dragStatus = 'draging';
-      var rect = this.$el.getBoundingClientRect();
-      var delta = this.vertical ? this.deltaY : this.deltaX;
-      var total = this.vertical ? rect.height : rect.width;
-      var diff = delta / total * this.scope;
-
-      if (this.range) {
-        this.currentValue[this.index] = this.startValue[this.index] + diff;
-      } else {
-        this.currentValue = this.startValue + diff;
-      }
-
-      this.updateValue(this.currentValue);
-    },
-    onTouchEnd: function onTouchEnd() {
-      if (this.disabled) {
-        return;
-      }
-
-      if (this.dragStatus === 'draging') {
-        this.updateValue(this.currentValue, true);
-        this.$emit('drag-end');
-      }
-
-      this.dragStatus = '';
-    },
-    onClick: function onClick(event) {
-      if (this.progress) {
-        return;
-      }
-
-      event.stopPropagation();
-      if (this.disabled) return;
-      var rect = this.$el.getBoundingClientRect();
-      var delta = this.vertical ? event.clientY - rect.top : event.clientX - rect.left;
-      var total = this.vertical ? rect.height : rect.width;
-      var value = +this.min + delta / total * this.scope;
-
-      if (this.range) {
-        var _this$value = this.value,
-            left = _this$value[0],
-            right = _this$value[1];
-        var middle = (left + right) / 2;
-
-        if (value <= middle) {
-          left = value;
-        } else {
-          right = value;
-        }
-
-        value = [left, right];
-      }
-
-      this.startValue = this.value;
-      this.updateValue(value, true);
-    },
-    // 处理两个滑块重叠之后的情况
-    handleOverlap: function handleOverlap(value) {
-      if (value[0] > value[1]) {
-        value = (0, _deepClone.deepClone)(value);
-        return value.reverse();
-      }
-
-      return value;
-    },
-    updateValue: function updateValue(value, end) {
-      if (this.range) {
-        value = this.handleOverlap(value).map(this.format);
-      } else {
-        value = this.format(value);
-      }
-
-      if (!isSameValue(value, this.value)) {
-        this.$emit('input', value);
-      }
-
-      if (end && !isSameValue(value, this.startValue)) {
-        this.$emit('change', value);
-      }
-    },
-    format: function format(value) {
-      var min = +this.min;
-      var max = +this.max;
-      var step = +this.step;
-      value = (0, _number.range)(value, min, max);
-      var diff = Math.round((value - min) / step) * step;
-      return (0, _number.addNumber)(min, diff);
-    }
-  },
-  render: function render() {
-    var _wrapperStyle,
-        _this = this,
-        _barStyle;
-
-    var h = arguments[0];
-    var vertical = this.vertical;
-    var mainAxis = vertical ? 'height' : 'width';
-    var crossAxis = vertical ? 'width' : 'height';
-    var wrapperStyle = (_wrapperStyle = {
-      background: this.inactiveColor
-    }, _wrapperStyle[crossAxis] = (0, _utils.addUnit)(this.barHeight) ? (0, _utils.addUnit)(this.barHeight) : this.progress ? '8px' : '4px', _wrapperStyle); // 计算选中条的长度百分比
-
-    var calcMainAxis = function calcMainAxis() {
-      var value = _this.value,
-          min = _this.min,
-          range = _this.range,
-          scope = _this.scope;
-
-      if (range) {
-        return (value[1] - value[0]) * 100 / scope + "%";
-      } // return `calc(${((value - min) * 100) / scope}% + 12px - ${24 * (value - min) / scope}px)` ;
-
-
-      return (value - min) * 100 / scope + "%";
-    }; // 计算选中条的开始位置的偏移量
-
-
-    var calcOffset = function calcOffset() {
-      var value = _this.value,
-          min = _this.min,
-          range = _this.range,
-          scope = _this.scope;
-
-      if (range) {
-        return (value[0] - min) * 100 / scope + "%";
-      }
-
-      return null;
-    };
-
-    var barStyle = (_barStyle = {}, _barStyle[mainAxis] = calcMainAxis(), _barStyle.left = this.vertical ? null : calcOffset(), _barStyle.top = this.vertical ? calcOffset() : null, _barStyle.background = Array.isArray(this.activeColor) ? "-webkit-linear-gradient(90deg, " + this.activeColor[0] + " , " + this.activeColor[1] + " )" : this.activeColor, _barStyle["background"] = Array.isArray(this.activeColor) ? "-o-linear-linear-gradient(90deg, " + this.activeColor[0] + " , " + this.activeColor[1] + ")" : this.activeColor, _barStyle["background"] = Array.isArray(this.activeColor) ? "-moz-linear-gradient(90deg, " + this.activeColor[0] + " , " + this.activeColor[1] + ")" : this.activeColor, _barStyle["background"] = Array.isArray(this.activeColor) ? "linear-gradient(90deg, " + this.activeColor[0] + " , " + this.activeColor[1] + ")" : this.activeColor, _barStyle);
-
-    if (this.dragStatus) {
-      barStyle.transition = 'none';
-    }
-
-    var renderButton = function renderButton(i) {
-      if (_this.progress) {
-        return;
-      }
-
-      var map = ['left', 'right'];
-      var isNumber = typeof i === 'number';
-
-      var getClassName = function getClassName() {
-        if (isNumber) {
-          return "button-wrapper-" + map[i];
-        }
-
-        return "button-wrapper";
-      };
-
-      var getRefName = function getRefName() {
-        if (isNumber) {
-          return "wrapper" + i;
-        }
-
-        return "wrapper";
-      };
-
-      return h("div", {
-        "ref": getRefName(),
-        "attrs": {
-          "role": "slider",
-          "tabindex": _this.disabled ? -1 : 0,
-          "aria-valuemin": _this.min,
-          "aria-valuenow": _this.value,
-          "aria-valuemax": _this.max,
-          "aria-orientation": _this.vertical ? 'vertical' : 'horizontal'
-        },
-        "class": bem(getClassName()),
-        "on": {
-          "touchstart": function touchstart() {
-            if (isNumber) {
-              // 保存当前按钮的索引
-              _this.index = i;
-            }
-          },
-          "click": function click(e) {
-            return e.stopPropagation();
-          }
-        }
-      }, [_this.slots('button') || h("div", {
-        "class": bem('button'),
-        "style": _this.buttonStyle
-      })]);
-    };
-
-    var renderProgress = function renderProgress() {
-      if (_this.slots('right')) {
-        return h("div", {
-          "class": bem('progress')
-        }, [_this.slots('right')]);
-      } else if (_this.progressText) {
-        return h("div", {
-          "class": bem('progress')
-        }, [_this.value, "%"]);
-      } else {
-        return;
-      }
-    };
-
-    var renderTitle = function renderTitle() {
-      if (_this.slots('left')) {
-        return _this.slots('left');
-      } else if (_this.title) {
-        return h("div", {
-          "class": bem('title')
-        }, [_this.title]);
-      } else {
-        return;
-      }
-    };
-
-    return h("div", {
-      "class": bem('container')
-    }, [this.title ? renderTitle() : '', h("div", {
-      "style": wrapperStyle,
-      "class": bem({
-        disabled: this.disabled,
-        vertical: vertical
-      }),
-      "on": {
-        "click": this.onClick
-      }
-    }, [h("div", {
-      "class": bem('bar'),
-      "style": barStyle
-    }, [this.range ? [renderButton(0), renderButton(1)] : renderButton()])]), renderProgress()]);
-  }
-});
-
-exports.default = _default;

package/lib/slider/index.less

@@ -1,108 +0,0 @@
-@import '../style/var';
-.zt-slider__container{
-  display: flex;
-  align-items: center;
-  .zt-slider__progress{
-    flex: 3;
-    text-align: center;
-    font-size: 14px;
-  }
-  .zt-slider__title{
-    flex: 2;
-    text-align: left;
-    font-size: 14px;
-    font-weight: bold;
-  }
-  .zt-slider {
-    position: relative;
-    width: 100%;
-    height: @slider-bar-height;
-    background-color: @slider-inactive-background-color;
-    cursor: pointer;
-    flex: 10;
-    // use pseudo element to expand click area
-    &::before {
-      position: absolute;
-      top: -@padding-xs;
-      right: 0;
-      bottom: -@padding-xs;
-      left: 0;
-      content: '';
-    }
-  
-    &__bar {
-      position: relative;
-      width: 100%;
-      height: 100%;
-      background-color: @slider-active-background-color;
-      border-radius: inherit;
-      transition: all @animation-duration-fast;
-    }
-  
-    &__button {
-      width: @slider-button-width;
-      height: @slider-button-height;
-      background-color: @slider-button-background-color;
-      border-radius: @slider-button-border-radius;
-      box-shadow: @slider-button-box-shadow;
-  
-      &-wrapper,
-      &-wrapper-right {
-        position: absolute;
-        top: 50%;
-        right: 0;
-        transform: translate3d(50%, -50%, 0);
-        cursor: grab;
-      }
-  
-      &-wrapper-left {
-        position: absolute;
-        top: 50%;
-        left: 0;
-        transform: translate3d(-50%, -50%, 0);
-        cursor: grab;
-      }
-    }
-  
-    &--disabled {
-      cursor: not-allowed;
-      opacity: @slider-disabled-opacity;
-  
-      .zt-slider__button-wrapper,
-      .zt-slider__button-wrapper-left,
-      .zt-slider__button-wrapper-right {
-        cursor: not-allowed;
-      }
-    }
-  
-    &--vertical {
-      display: inline-block;
-      width: @slider-bar-height;
-      height: 100%;
-  
-      .zt-slider__button-wrapper,
-      .zt-slider__button-wrapper-right {
-        top: auto;
-        right: 50%;
-        bottom: 0;
-        transform: translate3d(50%, 50%, 0);
-      }
-  
-      .zt-slider__button-wrapper-left {
-        top: 0;
-        right: 50%;
-        left: auto;
-        transform: translate3d(50%, -50%, 0);
-      }
-  
-      // use pseudo element to expand click area
-      &::before {
-        top: 0;
-        right: -@padding-xs;
-        bottom: 0;
-        left: -@padding-xs;
-      }
-    }
-  }
-}
-

package/lib/slider/style/index.js

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

package/lib/slider/style/less.js

@@ -1,2 +0,0 @@
-require('../../style/base.less');
-require('../index.less');