@zkwq/business 0.0.1

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

@@ -0,0 +1,304 @@
+<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

@@ -0,0 +1,137 @@
+<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>