zartui 0.1.113 → 3.0.1

package/es/image-preview/ImagePreview.js

@@ -1,237 +0,0 @@
-// Utils
-import { bem, createComponent } from './shared'; // Mixins
-
-import { PopupMixin } from '../mixins/popup';
-import { TouchMixin } from '../mixins/touch';
-import { BindEventMixin } from '../mixins/bind-event'; // Components
-
-import Icon from '../icon';
-import Swipe from '../swipe';
-import ImagePreviewItem from './ImagePreviewItem';
-export default createComponent({
-  mixins: [TouchMixin, PopupMixin({
-    skipToggleEvent: true
-  }), BindEventMixin(function (bind) {
-    bind(window, 'resize', this.resize, true);
-    bind(window, 'orientationchange', this.resize, true);
-  })],
-  props: {
-    className: null,
-    closeable: Boolean,
-    asyncClose: Boolean,
-    showIndicators: Boolean,
-    images: {
-      type: Array,
-      default: function _default() {
-        return [];
-      }
-    },
-    loop: {
-      type: Boolean,
-      default: true
-    },
-    overlay: {
-      type: Boolean,
-      default: true
-    },
-    minZoom: {
-      type: [Number, String],
-      default: 1 / 3
-    },
-    maxZoom: {
-      type: [Number, String],
-      default: 3
-    },
-    transition: {
-      type: String,
-      default: 'zt-fade'
-    },
-    showIndex: {
-      type: Boolean,
-      default: true
-    },
-    swipeDuration: {
-      type: [Number, String],
-      default: 300
-    },
-    startPosition: {
-      type: [Number, String],
-      default: 0
-    },
-    overlayClass: {
-      type: String,
-      default: bem('overlay')
-    },
-    closeIcon: {
-      type: String,
-      default: 'clear'
-    },
-    closeOnPopstate: {
-      type: Boolean,
-      default: true
-    },
-    closeIconPosition: {
-      type: String,
-      default: 'top-right'
-    }
-  },
-  data: function data() {
-    return {
-      active: 0,
-      rootWidth: 0,
-      rootHeight: 0,
-      doubleClickTimer: null
-    };
-  },
-  mounted: function mounted() {
-    this.resize();
-  },
-  watch: {
-    startPosition: 'setActive',
-    value: function value(val) {
-      var _this = this;
-
-      if (val) {
-        this.setActive(+this.startPosition);
-        this.$nextTick(function () {
-          _this.resize();
-
-          _this.$refs.swipe.swipeTo(+_this.startPosition, {
-            immediate: true
-          });
-        });
-      } else {
-        this.$emit('close', this.images[this.active], this.active);
-      }
-    }
-  },
-  methods: {
-    resize: function resize() {
-      if (this.$el && this.$el.getBoundingClientRect) {
-        var rect = this.$el.getBoundingClientRect();
-        this.rootWidth = rect.width;
-        this.rootHeight = rect.height;
-      }
-    },
-    emitClose: function emitClose() {
-      if (!this.asyncClose) {
-        this.$emit('input', false);
-      }
-    },
-    emitScale: function emitScale(args) {
-      this.$emit('scale', args);
-    },
-    setActive: function setActive(active) {
-      if (active !== this.active) {
-        this.active = active;
-        this.$emit('change', active);
-      }
-    },
-    genIndex: function genIndex() {
-      var h = this.$createElement;
-
-      if (this.showIndex) {
-        return h("div", {
-          "class": bem('index')
-        }, [this.slots('index', {
-          index: this.active
-        }) || this.active + 1 + " / " + this.images.length]);
-      }
-    },
-    genCover: function genCover() {
-      var h = this.$createElement;
-      var cover = this.slots('cover');
-
-      if (cover) {
-        return h("div", {
-          "class": bem('cover')
-        }, [cover]);
-      }
-    },
-    genImages: function genImages() {
-      var _this2 = this;
-
-      var h = this.$createElement;
-      return h(Swipe, {
-        "ref": "swipe",
-        "attrs": {
-          "lazyRender": true,
-          "loop": this.loop,
-          "duration": this.swipeDuration,
-          "initialSwipe": this.startPosition,
-          "showIndicators": this.showIndicators,
-          "indicatorColor": "white"
-        },
-        "class": bem('swipe'),
-        "on": {
-          "change": this.setActive
-        }
-      }, [this.images.map(function (image) {
-        return h(ImagePreviewItem, {
-          "attrs": {
-            "src": image.url,
-            "show": _this2.value,
-            "active": _this2.active,
-            "maxZoom": _this2.maxZoom,
-            "minZoom": _this2.minZoom,
-            "rootWidth": _this2.rootWidth,
-            "rootHeight": _this2.rootHeight
-          },
-          "on": {
-            "scale": _this2.emitScale,
-            "close": _this2.emitClose
-          }
-        });
-      })]);
-    },
-    genClose: function genClose() {
-      var h = this.$createElement;
-
-      if (this.closeable) {
-        return h(Icon, {
-          "attrs": {
-            "role": "button",
-            "name": this.closeIcon
-          },
-          "class": bem('close-icon', this.closeIconPosition),
-          "on": {
-            "click": this.emitClose
-          }
-        });
-      }
-    },
-    onClosed: function onClosed() {
-      this.$emit('closed');
-    },
-    // @exposed-api
-    swipeTo: function swipeTo(index, options) {
-      if (this.$refs.swipe) {
-        this.$refs.swipe.swipeTo(index, options);
-      }
-    },
-    //底部标题
-    genTitle: function genTitle() {
-      var h = this.$createElement;
-      return h("div", {
-        "class": bem('title')
-      }, [this.images[this.active] ? this.images[this.active].title : '']);
-    }
-  },
-  render: function render() {
-    var h = arguments[0];
-    return h("transition", {
-      "attrs": {
-        "name": this.transition
-      },
-      "on": {
-        "afterLeave": this.onClosed
-      }
-    }, [this.shouldRender ? h("div", {
-      "directives": [{
-        name: "show",
-        value: this.value
-      }],
-      "class": [bem(), this.className]
-    }, [this.genClose(), this.genImages(), this.genIndex(), this.genCover(), this.genTitle()]) : null]);
-  }
-});

package/es/image-preview/ImagePreviewItem.js

@@ -1,242 +0,0 @@
-// Utils
-import { bem } from './shared';
-import { range } from '../utils/format/number';
-import { preventDefault } from '../utils/dom/event'; // Mixins
-
-import { TouchMixin } from '../mixins/touch'; // Component
-
-import Image from '../image';
-import Loading from '../loading';
-import SwipeItem from '../swipe-item';
-
-function getDistance(touches) {
-  return Math.sqrt(Math.pow(touches[0].clientX - touches[1].clientX, 2) + Math.pow(touches[0].clientY - touches[1].clientY, 2));
-}
-
-export default {
-  mixins: [TouchMixin],
-  props: {
-    src: String,
-    show: Boolean,
-    active: Number,
-    minZoom: [Number, String],
-    maxZoom: [Number, String],
-    rootWidth: Number,
-    rootHeight: Number
-  },
-  data: function data() {
-    return {
-      scale: 1,
-      moveX: 0,
-      moveY: 0,
-      moving: false,
-      zooming: false,
-      imageRatio: 0,
-      displayWidth: 0,
-      displayHeight: 0
-    };
-  },
-  computed: {
-    vertical: function vertical() {
-      var rootWidth = this.rootWidth,
-          rootHeight = this.rootHeight;
-      var rootRatio = rootHeight / rootWidth;
-      return this.imageRatio > rootRatio;
-    },
-    imageStyle: function imageStyle() {
-      var scale = this.scale;
-      var style = {
-        transitionDuration: this.zooming || this.moving ? '0s' : '.3s'
-      };
-
-      if (scale !== 1) {
-        var offsetX = this.moveX / scale;
-        var offsetY = this.moveY / scale;
-        style.transform = "scale(" + scale + ", " + scale + ") translate(" + offsetX + "px, " + offsetY + "px)";
-      }
-
-      return style;
-    },
-    maxMoveX: function maxMoveX() {
-      if (this.imageRatio) {
-        var displayWidth = this.vertical ? this.rootHeight / this.imageRatio : this.rootWidth;
-        return Math.max(0, (this.scale * displayWidth - this.rootWidth) / 2);
-      }
-
-      return 0;
-    },
-    maxMoveY: function maxMoveY() {
-      if (this.imageRatio) {
-        var displayHeight = this.vertical ? this.rootHeight : this.rootWidth * this.imageRatio;
-        return Math.max(0, (this.scale * displayHeight - this.rootHeight) / 2);
-      }
-
-      return 0;
-    }
-  },
-  watch: {
-    active: 'resetScale',
-    show: function show(val) {
-      if (!val) {
-        this.resetScale();
-      }
-    }
-  },
-  mounted: function mounted() {
-    this.bindTouchEvent(this.$el);
-  },
-  methods: {
-    resetScale: function resetScale() {
-      this.setScale(1);
-      this.moveX = 0;
-      this.moveY = 0;
-    },
-    setScale: function setScale(scale) {
-      scale = range(scale, +this.minZoom, +this.maxZoom);
-
-      if (scale !== this.scale) {
-        this.scale = scale;
-        this.$emit('scale', {
-          scale: this.scale,
-          index: this.active
-        });
-      }
-    },
-    toggleScale: function toggleScale() {
-      var scale = this.scale > 1 ? 1 : 2;
-      this.setScale(scale);
-      this.moveX = 0;
-      this.moveY = 0;
-    },
-    onTouchStart: function onTouchStart(event) {
-      var touches = event.touches;
-      var _this$offsetX = this.offsetX,
-          offsetX = _this$offsetX === void 0 ? 0 : _this$offsetX;
-      this.touchStart(event);
-      this.touchStartTime = new Date();
-      this.startMoveX = this.moveX;
-      this.startMoveY = this.moveY;
-      this.moving = touches.length === 1 && this.scale !== 1;
-      this.zooming = touches.length === 2 && !offsetX;
-
-      if (this.zooming) {
-        this.startScale = this.scale;
-        this.startDistance = getDistance(event.touches);
-      }
-    },
-    onTouchMove: function onTouchMove(event) {
-      var touches = event.touches;
-      this.touchMove(event);
-
-      if (this.moving || this.zooming) {
-        preventDefault(event, true);
-      }
-
-      if (this.moving) {
-        var moveX = this.deltaX + this.startMoveX;
-        var moveY = this.deltaY + this.startMoveY;
-        this.moveX = range(moveX, -this.maxMoveX, this.maxMoveX);
-        this.moveY = range(moveY, -this.maxMoveY, this.maxMoveY);
-      }
-
-      if (this.zooming && touches.length === 2) {
-        var distance = getDistance(touches);
-        var scale = this.startScale * distance / this.startDistance;
-        this.setScale(scale);
-      }
-    },
-    onTouchEnd: function onTouchEnd(event) {
-      var stopPropagation = false;
-      /* istanbul ignore else */
-
-      if (this.moving || this.zooming) {
-        stopPropagation = true;
-
-        if (this.moving && this.startMoveX === this.moveX && this.startMoveY === this.moveY) {
-          stopPropagation = false;
-        }
-
-        if (!event.touches.length) {
-          if (this.zooming) {
-            this.moveX = range(this.moveX, -this.maxMoveX, this.maxMoveX);
-            this.moveY = range(this.moveY, -this.maxMoveY, this.maxMoveY);
-            this.zooming = false;
-          }
-
-          this.moving = false;
-          this.startMoveX = 0;
-          this.startMoveY = 0;
-          this.startScale = 1;
-
-          if (this.scale < 1) {
-            this.resetScale();
-          }
-        }
-      } // eliminate tap delay on safari
-
-
-      preventDefault(event, stopPropagation);
-      this.checkTap();
-      this.resetTouchStatus();
-    },
-    checkTap: function checkTap() {
-      var _this = this;
-
-      var _this$offsetX2 = this.offsetX,
-          offsetX = _this$offsetX2 === void 0 ? 0 : _this$offsetX2,
-          _this$offsetY = this.offsetY,
-          offsetY = _this$offsetY === void 0 ? 0 : _this$offsetY;
-      var deltaTime = new Date() - this.touchStartTime;
-      var TAP_TIME = 250;
-      var TAP_OFFSET = 10;
-
-      if (offsetX < TAP_OFFSET && offsetY < TAP_OFFSET && deltaTime < TAP_TIME) {
-        if (this.doubleTapTimer) {
-          clearTimeout(this.doubleTapTimer);
-          this.doubleTapTimer = null;
-          this.toggleScale();
-        } else {
-          this.doubleTapTimer = setTimeout(function () {
-            _this.$emit('close');
-
-            _this.doubleTapTimer = null;
-          }, TAP_TIME);
-        }
-      }
-    },
-    onLoad: function onLoad(event) {
-      var _event$target = event.target,
-          naturalWidth = _event$target.naturalWidth,
-          naturalHeight = _event$target.naturalHeight;
-      this.imageRatio = naturalHeight / naturalWidth;
-    }
-  },
-  render: function render() {
-    var h = arguments[0];
-    var imageSlots = {
-      loading: function loading() {
-        return h(Loading, {
-          "attrs": {
-            "type": "spinner"
-          }
-        });
-      }
-    };
-    return h(SwipeItem, {
-      "class": bem('swipe-item')
-    }, [h(Image, {
-      "attrs": {
-        "src": this.src,
-        "fit": "contain"
-      },
-      "class": bem('image', {
-        vertical: this.vertical
-      }),
-      "style": this.imageStyle,
-      "scopedSlots": imageSlots,
-      "on": {
-        "load": this.onLoad
-      }
-    })]);
-  }
-};

package/es/image-preview/index.css

@@ -1 +0,0 @@
-.zt-image-preview{position:fixed;top:0;left:0;width:100%;height:100%}.zt-image-preview__swipe{height:100%}.zt-image-preview__swipe-item{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;overflow:hidden}.zt-image-preview__cover{position:absolute;top:0;left:0}.zt-image-preview__image{width:100%;-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;transition-property:transform;transition-property:transform,-webkit-transform}.zt-image-preview__image--vertical{width:auto;height:100%}.zt-image-preview__image img{-webkit-user-drag:none}.zt-image-preview__image .zt-image__error{top:30%;height:40%}.zt-image-preview__image .zt-image__error-icon{font-size:36px}.zt-image-preview__image .zt-image__loading{background-color:transparent}.zt-image-preview__index{position:absolute;bottom:8px;left:40px;height:24px;line-height:24px;padding:4px 8px;border-radius:2px;background:rgba(0,0,0,.6);color:#fff;font-size:16px;text-shadow:0 1px 1px #323233;-webkit-transform:translate(-50%,0);transform:translate(-50%,0);z-index:10}.zt-image-preview__overlay.zt-overlay{background-color:#000}.zt-image-preview__close-icon{position:absolute;z-index:1;color:#c8c9cc;font-size:22px;cursor:pointer}.zt-image-preview__close-icon:active{color:#969799}.zt-image-preview__close-icon--top-left{top:16px;left:16px}.zt-image-preview__close-icon--top-right{top:16px;right:16px}.zt-image-preview__close-icon--bottom-left{bottom:16px;left:16px}.zt-image-preview__close-icon--bottom-right{right:16px;bottom:16px}.zt-image-preview__title{position:absolute;bottom:0;height:48px;width:100%;padding-left:70px;left:0;line-height:48px;font-size:18px;color:#fff;background:rgba(0,0,0,.4);z-index:9}

package/es/image-preview/index.js

@@ -1,87 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import Vue from 'vue';
-import VueImagePreview from './ImagePreview';
-import { isServer } from '../utils';
-var instance;
-var defaultConfig = {
-  loop: true,
-  value: true,
-  images: [],
-  maxZoom: 3,
-  minZoom: 1 / 3,
-  onClose: null,
-  onChange: null,
-  className: '',
-  showIndex: true,
-  closeable: false,
-  closeIcon: 'clear',
-  asyncClose: false,
-  transition: 'zt-fade',
-  getContainer: 'body',
-  startPosition: 0,
-  swipeDuration: 300,
-  showIndicators: false,
-  closeOnPopstate: true,
-  closeIconPosition: 'top-right'
-};
-
-var initInstance = function initInstance() {
-  instance = new (Vue.extend(VueImagePreview))({
-    el: document.createElement('div')
-  });
-  document.body.appendChild(instance.$el);
-  instance.$on('change', function (index) {
-    if (instance.onChange) {
-      instance.onChange(index);
-    }
-  });
-  instance.$on('scale', function (data) {
-    if (instance.onScale) {
-      instance.onScale(data);
-    }
-  });
-};
-
-var ImagePreview = function ImagePreview(images, startPosition) {
-  if (startPosition === void 0) {
-    startPosition = 0;
-  }
-
-  /* istanbul ignore if */
-  if (isServer) {
-    return;
-  }
-
-  if (!instance) {
-    initInstance();
-  }
-
-  var options = Array.isArray(images) ? {
-    images: images,
-    startPosition: startPosition
-  } : images;
-
-  _extends(instance, defaultConfig, options);
-
-  instance.$once('input', function (show) {
-    instance.value = show;
-  });
-  instance.$once('closed', function () {
-    instance.images = [];
-  });
-
-  if (options.onClose) {
-    instance.$off('close');
-    instance.$once('close', options.onClose);
-  }
-
-  return instance;
-};
-
-ImagePreview.Component = VueImagePreview;
-
-ImagePreview.install = function () {
-  Vue.use(VueImagePreview);
-};
-
-export default ImagePreview;

package/es/image-preview/index.less

@@ -1,121 +0,0 @@
-@import '../style/var';
-
-.zt-image-preview {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-
-  &__swipe {
-    height: 100%;
-
-    &-item {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      overflow: hidden;
-    }
-  }
-
-  &__cover {
-    position: absolute;
-    top: 0;
-    left: 0;
-  }
-
-  &__image {
-    width: 100%;
-    transition-property: transform;
-
-    &--vertical {
-      width: auto;
-      height: 100%;
-    }
-
-    img {
-      // disable desktop browser image drag
-      -webkit-user-drag: none;
-    }
-
-    .zt-image {
-      &__error {
-        top: 30%;
-        height: 40%;
-      }
-
-      &__error-icon {
-        font-size: 36px;
-      }
-
-      &__loading {
-        background-color: transparent;
-      }
-    }
-  }
-
-  &__index {
-    position: absolute;
-    bottom: @image-preview-index-bottom;
-    left: @image-preview-index-left;
-    height: @image-preview-index-height;
-    line-height:@image-preview-index-line-height;
-    padding: @image-preview-index-padding;
-    border-radius: @border-radius-sm;
-    background: @image-preview-index-background;
-    color: @image-preview-index-text-color;
-    font-size: @font-size-lg;
-    text-shadow: @image-preview-index-text-shadow;
-    transform: translate(-50%, 0);
-    z-index: @image-preview-index-z-index;
-  }
-
-  &__overlay.zt-overlay {
-    background-color: @black;
-  }
-
-  &__close-icon {
-    position: absolute;
-    z-index: @image-preview-close-icon-z-index;
-    color: @image-preview-close-icon-color;
-    font-size: @image-preview-close-icon-size;
-    cursor: pointer;
-
-    &:active {
-      color: @image-preview-close-icon-active-color;
-    }
-
-    &--top-left {
-      top: @image-preview-close-icon-margin;
-      left: @image-preview-close-icon-margin;
-    }
-
-    &--top-right {
-      top: @image-preview-close-icon-margin;
-      right: @image-preview-close-icon-margin;
-    }
-
-    &--bottom-left {
-      bottom: @image-preview-close-icon-margin;
-      left: @image-preview-close-icon-margin;
-    }
-
-    &--bottom-right {
-      right: @image-preview-close-icon-margin;
-      bottom: @image-preview-close-icon-margin;
-    }
-  }
-  &__title{
-    position:absolute;
-    bottom:@image-preview-title-bottom;
-    height: @image-preview-title-height;
-    width: @image-preview-title-width;
-    padding-left: @image-preview-title-padding-left;
-    left:@image-preview-title-left;
-    line-height: @image-preview-title-line-height;
-    font-size: @image-preview-title-font-size;
-    color: @white;
-    background:@image-preview-title-background;
-    z-index:@image-preview-title-z-index
-  }
-}

package/es/image-preview/shared.js

@@ -1,7 +0,0 @@
-import { createNamespace } from '../utils';
-
-var _createNamespace = createNamespace('image-preview'),
-    createComponent = _createNamespace[0],
-    bem = _createNamespace[1];
-
-export { createComponent, bem };

package/es/image-preview/style/index.js

@@ -1,10 +0,0 @@
-import '../../style/base.css';
-import '../../overlay/index.css';
-import '../../info/index.css';
-import '../../icon/index.css';
-import '../../image/index.css';
-import '../../popup/index.css';
-import '../../loading/index.css';
-import '../../swipe/index.css';
-import '../../swipe-item/index.css';
-import '../index.css';