@zkwq/business 0.0.4 → 0.0.6

package/src/components/base/ui/carousel/Carousel.vue

@@ -1,304 +0,0 @@
-<template>
-  <div
-    :class="carouselClasses"
-    @mouseenter.stop="handleMouseEnter"
-    @mouseleave.stop="handleMouseLeave">
-    <div
-      class="base-carousel__container"
-      :style="{ height: height }">
-      <transition
-        v-if="arrowDisplay"
-        name="carousel-arrow-left">
-        <button
-          type="button"
-          v-show="(arrow === 'always' || hover) && (loop || activeIndex > 0)"
-          @mouseenter="handleButtonEnter('left')"
-          @mouseleave="handleButtonLeave"
-          @click.stop="throttledArrowClick(activeIndex - 1)"
-          class="base-carousel__arrow base-carousel__arrow--left">
-          <i class="base-icon-arrow-left"></i>
-        </button>
-      </transition>
-      <transition
-        v-if="arrowDisplay"
-        name="carousel-arrow-right">
-        <button
-          type="button"
-          v-show="(arrow === 'always' || hover) && (loop || activeIndex < items.length - 1)"
-          @mouseenter="handleButtonEnter('right')"
-          @mouseleave="handleButtonLeave"
-          @click.stop="throttledArrowClick(activeIndex + 1)"
-          class="base-carousel__arrow base-carousel__arrow--right">
-          <i class="base-icon-arrow-right"></i>
-        </button>
-      </transition>
-      <slot></slot>
-    </div>
-    <ul
-      v-if="indicatorPosition !== 'none'"
-      :class="indicatorsClasses">
-      <li
-        v-for="(item, index) in items"
-        :key="index"
-        :class="[
-          'base-carousel__indicator',
-          'base-carousel__indicator--' + direction,
-          { 'is-active': index === activeIndex }]"
-        @mouseenter="throttledIndicatorHover(index)"
-        @click.stop="handleIndicatorClick(index)">
-        <button class="base-carousel__button">
-          <span v-if="hasLabel">{{ item.label }}</span>
-        </button>
-      </li>
-    </ul>
-  </div>
-</template>
-
-<script>
-import throttle from '../util/throttle'
-import { addResizeListener, removeResizeListener } from '../util/resize-events'
-
-export default {
-  name: 'BaseCarousel',
-
-  props: {
-    initialIndex: {
-      type: Number,
-      default: 0
-    },
-    height: String,
-    trigger: {
-      type: String,
-      default: 'hover'
-    },
-    autoplay: {
-      type: Boolean,
-      default: true
-    },
-    interval: {
-      type: Number,
-      default: 3000
-    },
-    indicatorPosition: String,
-    indicator: {
-      type: Boolean,
-      default: true
-    },
-    arrow: {
-      type: String,
-      default: 'hover'
-    },
-    type: String,
-    loop: {
-      type: Boolean,
-      default: true
-    },
-    direction: {
-      type: String,
-      default: 'horizontal',
-      validator(val) {
-        return ['horizontal', 'vertical'].indexOf(val) !== -1;
-      }
-    }
-  },
-
-  data() {
-    return {
-      items: [],
-      activeIndex: -1,
-      containerWidth: 0,
-      timer: null,
-      hover: false
-    }
-  },
-
-  computed: {
-    arrowDisplay() {
-      return this.arrow !== 'never' && this.direction !== 'vertical';
-    },
-
-    hasLabel() {
-      return this.items.some(item => item.label.toString().length > 0);
-    },
-
-    carouselClasses() {
-      const classes = ['base-carousel', 'base-carousel--' + this.direction];
-      if (this.type === 'card') {
-        classes.push('base-carousel--card');
-      }
-      return classes;
-    },
-
-    indicatorsClasses() {
-      const classes = ['base-carousel__indicators', 'base-carousel__indicators--' + this.direction];
-      if (this.hasLabel) {
-        classes.push('base-carousel__indicators--labels');
-      }
-      if (this.indicatorPosition === 'outside' || this.type === 'card') {
-        classes.push('base-carousel__indicators--outside');
-      }
-      return classes;
-    }
-  },
-
-  watch: {
-    items(val) {
-      if (val.length > 0) this.setActiveItem(this.initialIndex);
-    },
-
-    activeIndex(val, oldVal) {
-      this.resetItemPosition(oldVal);
-      if (oldVal > -1) {
-        this.$emit('change', val, oldVal);
-      }
-    },
-
-    autoplay(val) {
-      val ? this.startTimer() : this.pauseTimer();
-    },
-
-    loop() {
-      this.setActiveItem(this.activeIndex);
-    }
-  },
-
-  methods: {
-    handleMouseEnter() {
-      this.hover = true;
-      this.pauseTimer();
-    },
-
-    handleMouseLeave() {
-      this.hover = false;
-      this.startTimer();
-    },
-
-    itemInStage(item, index) {
-      const length = this.items.length;
-      if (index === length - 1 && item.inStage && this.items[0].active ||
-        (item.inStage && this.items[index + 1] && this.items[index + 1].active)) {
-        return 'left';
-      } else if (index === 0 && item.inStage && this.items[length - 1].active ||
-        (item.inStage && this.items[index - 1] && this.items[index - 1].active)) {
-        return 'right';
-      }
-      return false;
-    },
-
-    handleButtonEnter(arrow) {
-      if (this.direction === 'vertical') return;
-      this.items.forEach((item, index) => {
-        if (arrow === this.itemInStage(item, index)) {
-          item.hover = true;
-        }
-      });
-    },
-
-    handleButtonLeave() {
-      if (this.direction === 'vertical') return;
-      this.items.forEach(item => {
-        item.hover = false;
-      });
-    },
-
-    updateItems() {
-      this.items = this.$children.filter(child => child.$options.name === 'BaseCarouselItem');
-    },
-
-    resetItemPosition(oldIndex) {
-      this.items.forEach((item, index) => {
-        item.translateItem(index, this.activeIndex, oldIndex);
-      });
-    },
-
-    playSlides() {
-      if (this.activeIndex < this.items.length - 1) {
-        this.activeIndex++;
-      } else if (this.loop) {
-        this.activeIndex = 0;
-      }
-    },
-
-    pauseTimer() {
-      if (this.timer) {
-        clearInterval(this.timer);
-        this.timer = null;
-      }
-    },
-
-    startTimer() {
-      if (this.interval <= 0 || !this.autoplay || this.timer) return;
-      this.timer = setInterval(this.playSlides, this.interval);
-    },
-
-    setActiveItem(index) {
-      if (typeof index === 'string') {
-        const filteredItems = this.items.filter(item => item.name === index);
-        if (filteredItems.length > 0) {
-          index = this.items.indexOf(filteredItems[0]);
-        }
-      }
-      index = Number(index);
-      if (isNaN(index) || index !== Math.floor(index)) {
-        console.warn('[Element Warn][Carousel]index must be an integer.');
-        return;
-      }
-      let length = this.items.length;
-      const oldIndex = this.activeIndex;
-      if (index < 0) {
-        this.activeIndex = this.loop ? length - 1 : 0;
-      } else if (index >= length) {
-        this.activeIndex = this.loop ? 0 : length - 1;
-      } else {
-        this.activeIndex = index;
-      }
-      if (oldIndex === this.activeIndex) {
-        this.resetItemPosition(oldIndex);
-      }
-    },
-
-    prev() {
-      this.setActiveItem(this.activeIndex - 1);
-    },
-
-    next() {
-      this.setActiveItem(this.activeIndex + 1);
-    },
-
-    handleIndicatorClick(index) {
-      this.activeIndex = index;
-    },
-
-    handleIndicatorHover(index) {
-      if (this.trigger === 'hover' && index !== this.activeIndex) {
-        this.activeIndex = index;
-      }
-    }
-  },
-
-  created() {
-    this.throttledArrowClick = throttle(300, true, index => {
-      this.setActiveItem(index);
-    });
-    this.throttledIndicatorHover = throttle(300, index => {
-      this.handleIndicatorHover(index);
-    });
-  },
-
-  mounted() {
-    this.updateItems();
-    this.$nextTick(() => {
-      addResizeListener(this.$el, this.resetItemPosition);
-      if (this.initialIndex < this.items.length && this.initialIndex >= 0) {
-        this.activeIndex = this.initialIndex;
-      }
-      this.startTimer();
-    });
-  },
-
-  beforeDestroy() {
-    if (this.$el) removeResizeListener(this.$el, this.resetItemPosition);
-    this.pauseTimer();
-  }
-};
-</script>

package/src/components/base/ui/carousel/CarouselItem.vue

@@ -1,137 +0,0 @@
-<template>
-  <div
-    v-show="ready"
-    class="base-carousel__item"
-    :class="{
-      'is-active': active,
-      'base-carousel__item--card': $parent.type === 'card',
-      'is-in-stage': inStage,
-      'is-hover': hover,
-      'is-animating': animating
-    }"
-    @click="handleItemClick"
-    :style="itemStyle">
-    <div
-      v-if="$parent.type === 'card'"
-      v-show="!active"
-      class="base-carousel__mask">
-    </div>
-    <slot></slot>
-  </div>
-</template>
-
-<script>
-  import { autoprefixer } from '../util'
-  const CARD_SCALE = 0.83;
-  export default {
-    name: 'BaseCarouselItem',
-
-    props: {
-      name: String,
-      label: {
-        type: [String, Number],
-        default: ''
-      }
-    },
-
-    data() {
-      return {
-        hover: false,
-        translate: 0,
-        scale: 1,
-        active: false,
-        ready: false,
-        inStage: false,
-        animating: false
-      };
-    },
-
-    methods: {
-      processIndex(index, activeIndex, length) {
-        if (activeIndex === 0 && index === length - 1) {
-          return -1;
-        } else if (activeIndex === length - 1 && index === 0) {
-          return length;
-        } else if (index < activeIndex - 1 && activeIndex - index >= length / 2) {
-          return length + 1;
-        } else if (index > activeIndex + 1 && index - activeIndex >= length / 2) {
-          return -2;
-        }
-        return index;
-      },
-
-      calcCardTranslate(index, activeIndex) {
-        const parentWidth = this.$parent.$el.offsetWidth;
-        if (this.inStage) {
-          return parentWidth * ((2 - CARD_SCALE) * (index - activeIndex) + 1) / 4;
-        } else if (index < activeIndex) {
-          return -(1 + CARD_SCALE) * parentWidth / 4;
-        } else {
-          return (3 + CARD_SCALE) * parentWidth / 4;
-        }
-      },
-
-      calcTranslate(index, activeIndex, isVertical) {
-        const distance = this.$parent.$el[isVertical ? 'offsetHeight' : 'offsetWidth'];
-        return distance * (index - activeIndex);
-      },
-
-      translateItem(index, activeIndex, oldIndex) {
-        const parentType = this.$parent.type;
-        const parentDirection = this.parentDirection;
-        const length = this.$parent.items.length;
-        if (parentType !== 'card' && oldIndex !== undefined) {
-          this.animating = index === activeIndex || index === oldIndex;
-        }
-        if (index !== activeIndex && length > 2 && this.$parent.loop) {
-          index = this.processIndex(index, activeIndex, length);
-        }
-        if (parentType === 'card') {
-          if (parentDirection === 'vertical') {
-            console.warn('[Element Warn][Carousel]vertical direction is not supported in card mode');
-          }
-          this.inStage = Math.round(Math.abs(index - activeIndex)) <= 1;
-          this.active = index === activeIndex;
-          this.translate = this.calcCardTranslate(index, activeIndex);
-          this.scale = this.active ? 1 : CARD_SCALE;
-        } else {
-          this.active = index === activeIndex;
-          const isVertical = parentDirection === 'vertical';
-          this.translate = this.calcTranslate(index, activeIndex, isVertical);
-        }
-        this.ready = true;
-      },
-
-      handleItemClick() {
-        const parent = this.$parent;
-        if (parent && parent.type === 'card') {
-          const index = parent.items.indexOf(this);
-          parent.setActiveItem(index);
-        }
-      }
-    },
-
-    computed: {
-      parentDirection() {
-        return this.$parent.direction;
-      },
-
-      itemStyle() {
-        const translateType = this.parentDirection === 'vertical' ? 'translateY' : 'translateX';
-        const value = `${translateType}(${ this.translate }px) scale(${ this.scale })`;
-        const style = {
-          transform: value
-        };
-        return autoprefixer(style);
-      }
-    },
-
-    created() {
-      this.$parent && this.$parent.updateItems();
-    },
-
-    destroyed() {
-      this.$parent && this.$parent.updateItems();
-    }
-  };
-</script>