@penggy/element-ui 2.4.11 → 2.4.12

package/packages/carousel/src/main.vue

@@ -1,262 +1,262 @@
-<template>
-  <div
-    class="el-carousel"
-    :class="{ 'el-carousel--card': type === 'card' }"
-    @mouseenter.stop="handleMouseEnter"
-    @mouseleave.stop="handleMouseLeave">
-    <div
-      class="el-carousel__container"
-      :style="{ height: height }">
-      <transition name="carousel-arrow-left">
-        <button
-          type="button"
-          v-if="arrow !== 'never'"
-          v-show="(arrow === 'always' || hover) && (loop || activeIndex > 0)"
-          @mouseenter="handleButtonEnter('left')"
-          @mouseleave="handleButtonLeave"
-          @click.stop="throttledArrowClick(activeIndex - 1)"
-          class="el-carousel__arrow el-carousel__arrow--left">
-          <i class="el-icon-arrow-left"></i>
-        </button>
-      </transition>
-      <transition name="carousel-arrow-right">
-        <button
-          type="button"
-          v-if="arrow !== 'never'"
-          v-show="(arrow === 'always' || hover) && (loop || activeIndex < items.length - 1)"
-          @mouseenter="handleButtonEnter('right')"
-          @mouseleave="handleButtonLeave"
-          @click.stop="throttledArrowClick(activeIndex + 1)"
-          class="el-carousel__arrow el-carousel__arrow--right">
-          <i class="el-icon-arrow-right"></i>
-        </button>
-      </transition>
-      <slot></slot>
-    </div>
-    <ul
-      class="el-carousel__indicators"
-      v-if="indicatorPosition !== 'none'"
-      :class="{ 'el-carousel__indicators--labels': hasLabel, 'el-carousel__indicators--outside': indicatorPosition === 'outside' || type === 'card' }">
-      <li
-        v-for="(item, index) in items"
-        class="el-carousel__indicator"
-        :class="{ 'is-active': index === activeIndex }"
-        @mouseenter="throttledIndicatorHover(index)"
-        @click.stop="handleIndicatorClick(index)">
-        <button class="el-carousel__button"><span v-if="hasLabel">{{ item.label }}</span></button>
-      </li>
-    </ul>
-  </div>
-</template>
-
-<script>
-import throttle from 'throttle-debounce/throttle';
-import { addResizeListener, removeResizeListener } from 'element-ui/src/utils/resize-event';
-
-export default {
-  name: 'ElCarousel',
-
-  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
-    }
-  },
-
-  data() {
-    return {
-      items: [],
-      activeIndex: -1,
-      containerWidth: 0,
-      timer: null,
-      hover: false
-    };
-  },
-
-  computed: {
-    hasLabel() {
-      return this.items.some(item => item.label.toString().length > 0);
-    }
-  },
-
-  watch: {
-    items(val) {
-      if (val.length > 0) this.setActiveItem(this.initialIndex);
-    },
-
-    activeIndex(val, oldVal) {
-      this.resetItemPosition(oldVal);
-      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) {
-      this.items.forEach((item, index) => {
-        if (arrow === this.itemInStage(item, index)) {
-          item.hover = true;
-        }
-      });
-    },
-
-    handleButtonLeave() {
-      this.items.forEach(item => {
-        item.hover = false;
-      });
-    },
-
-    updateItems() {
-      this.items = this.$children.filter(child => child.$options.name === 'ElCarouselItem');
-    },
-
-    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() {
-      clearInterval(this.timer);
-    },
-
-    startTimer() {
-      if (this.interval <= 0 || !this.autoplay) 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)) {
-        process.env.NODE_ENV !== 'production' &&
-        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);
-  }
-};
-</script>
+<template>
+  <div
+    class="el-carousel"
+    :class="{ 'el-carousel--card': type === 'card' }"
+    @mouseenter.stop="handleMouseEnter"
+    @mouseleave.stop="handleMouseLeave">
+    <div
+      class="el-carousel__container"
+      :style="{ height: height }">
+      <transition name="carousel-arrow-left">
+        <button
+          type="button"
+          v-if="arrow !== 'never'"
+          v-show="(arrow === 'always' || hover) && (loop || activeIndex > 0)"
+          @mouseenter="handleButtonEnter('left')"
+          @mouseleave="handleButtonLeave"
+          @click.stop="throttledArrowClick(activeIndex - 1)"
+          class="el-carousel__arrow el-carousel__arrow--left">
+          <i class="el-icon-arrow-left"></i>
+        </button>
+      </transition>
+      <transition name="carousel-arrow-right">
+        <button
+          type="button"
+          v-if="arrow !== 'never'"
+          v-show="(arrow === 'always' || hover) && (loop || activeIndex < items.length - 1)"
+          @mouseenter="handleButtonEnter('right')"
+          @mouseleave="handleButtonLeave"
+          @click.stop="throttledArrowClick(activeIndex + 1)"
+          class="el-carousel__arrow el-carousel__arrow--right">
+          <i class="el-icon-arrow-right"></i>
+        </button>
+      </transition>
+      <slot></slot>
+    </div>
+    <ul
+      class="el-carousel__indicators"
+      v-if="indicatorPosition !== 'none'"
+      :class="{ 'el-carousel__indicators--labels': hasLabel, 'el-carousel__indicators--outside': indicatorPosition === 'outside' || type === 'card' }">
+      <li
+        v-for="(item, index) in items"
+        class="el-carousel__indicator"
+        :class="{ 'is-active': index === activeIndex }"
+        @mouseenter="throttledIndicatorHover(index)"
+        @click.stop="handleIndicatorClick(index)">
+        <button class="el-carousel__button"><span v-if="hasLabel">{{ item.label }}</span></button>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+import throttle from 'throttle-debounce/throttle';
+import { addResizeListener, removeResizeListener } from '@penggy/element-ui/src/utils/resize-event';
+
+export default {
+  name: 'ElCarousel',
+
+  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
+    }
+  },
+
+  data() {
+    return {
+      items: [],
+      activeIndex: -1,
+      containerWidth: 0,
+      timer: null,
+      hover: false
+    };
+  },
+
+  computed: {
+    hasLabel() {
+      return this.items.some(item => item.label.toString().length > 0);
+    }
+  },
+
+  watch: {
+    items(val) {
+      if (val.length > 0) this.setActiveItem(this.initialIndex);
+    },
+
+    activeIndex(val, oldVal) {
+      this.resetItemPosition(oldVal);
+      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) {
+      this.items.forEach((item, index) => {
+        if (arrow === this.itemInStage(item, index)) {
+          item.hover = true;
+        }
+      });
+    },
+
+    handleButtonLeave() {
+      this.items.forEach(item => {
+        item.hover = false;
+      });
+    },
+
+    updateItems() {
+      this.items = this.$children.filter(child => child.$options.name === 'ElCarouselItem');
+    },
+
+    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() {
+      clearInterval(this.timer);
+    },
+
+    startTimer() {
+      if (this.interval <= 0 || !this.autoplay) 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)) {
+        process.env.NODE_ENV !== 'production' &&
+        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);
+  }
+};
+</script>

package/packages/carousel-item/index.js

@@ -1,8 +1,8 @@
-import ElCarouselItem from '../carousel/src/item';
-
-/* istanbul ignore next */
-ElCarouselItem.install = function(Vue) {
-  Vue.component(ElCarouselItem.name, ElCarouselItem);
-};
-
-export default ElCarouselItem;
+import ElCarouselItem from '../carousel/src/item';
+
+/* istanbul ignore next */
+ElCarouselItem.install = function(Vue) {
+  Vue.component(ElCarouselItem.name, ElCarouselItem);
+};
+
+export default ElCarouselItem;

package/packages/cascader/index.js

@@ -1,8 +1,8 @@
-import Cascader from './src/main';
-
-/* istanbul ignore next */
-Cascader.install = function(Vue) {
-  Vue.component(Cascader.name, Cascader);
-};
-
-export default Cascader;
+import Cascader from './src/main';
+
+/* istanbul ignore next */
+Cascader.install = function(Vue) {
+  Vue.component(Cascader.name, Cascader);
+};
+
+export default Cascader;