cbvirtua 1.0.37 → 1.0.39

package/src/packages/notification/src/main.vue

@@ -0,0 +1,152 @@
+<template>
+  <transition name="el-notification-fade">
+    <div
+      :class="['el-notification', customClass, horizontalClass]"
+      v-show="visible"
+      :style="positionStyle"
+      @mouseenter="clearTimer()"
+      @mouseleave="startTimer()"
+      @click="click"
+      role="alert"
+    >
+      <i
+        class="el-notification__icon"
+        :class="[ typeClass, iconClass ]"
+        v-if="type || iconClass">
+      </i>
+      <div class="el-notification__group" :class="{ 'is-with-icon': typeClass || iconClass }">
+        <h2 class="el-notification__title" v-text="title"></h2>
+        <div class="el-notification__content" v-show="message">
+          <slot>
+            <p v-if="!dangerouslyUseHTMLString">{{ message }}</p>
+            <p v-else v-html="message"></p>
+          </slot>
+        </div>
+        <div
+          class="el-notification__closeBtn el-icon-close"
+          v-if="showClose"
+          @click.stop="close"></div>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script type="text/babel">
+  let typeMap = {
+    success: 'success',
+    info: 'info',
+    warning: 'warning',
+    error: 'error'
+  };
+
+  export default {
+    data() {
+      return {
+        visible: false,
+        title: '',
+        message: '',
+        duration: 4500,
+        type: '',
+        showClose: true,
+        customClass: '',
+        iconClass: '',
+        onClose: null,
+        onClick: null,
+        closed: false,
+        verticalOffset: 0,
+        timer: null,
+        dangerouslyUseHTMLString: false,
+        position: 'top-right'
+      };
+    },
+
+    computed: {
+      typeClass() {
+        return this.type && typeMap[this.type] ? `el-icon-${ typeMap[this.type] }` : '';
+      },
+
+      horizontalClass() {
+        return this.position.indexOf('right') > -1 ? 'right' : 'left';
+      },
+
+      verticalProperty() {
+        return /^top-/.test(this.position) ? 'top' : 'bottom';
+      },
+
+      positionStyle() {
+        return {
+          [this.verticalProperty]: `${ this.verticalOffset }px`
+        };
+      }
+    },
+
+    watch: {
+      closed(newVal) {
+        if (newVal) {
+          this.visible = false;
+          this.$el.addEventListener('transitionend', this.destroyElement);
+        }
+      }
+    },
+
+    methods: {
+      destroyElement() {
+        this.$el.removeEventListener('transitionend', this.destroyElement);
+        this.$destroy(true);
+        this.$el.parentNode.removeChild(this.$el);
+      },
+
+      click() {
+        if (typeof this.onClick === 'function') {
+          this.onClick();
+        }
+      },
+
+      close() {
+        this.closed = true;
+        if (typeof this.onClose === 'function') {
+          this.onClose();
+        }
+      },
+
+      clearTimer() {
+        clearTimeout(this.timer);
+      },
+
+      startTimer() {
+        if (this.duration > 0) {
+          this.timer = setTimeout(() => {
+            if (!this.closed) {
+              this.close();
+            }
+          }, this.duration);
+        }
+      },
+      keydown(e) {
+        if (e.keyCode === 46 || e.keyCode === 8) {
+          this.clearTimer(); // detele 取消倒计时
+        } else if (e.keyCode === 27) { // esc关闭消息
+          if (!this.closed) {
+            this.close();
+          }
+        } else {
+          this.startTimer(); // 恢复倒计时
+        }
+      }
+    },
+    mounted() {
+      if (this.duration > 0) {
+        this.timer = setTimeout(() => {
+          if (!this.closed) {
+            this.close();
+          }
+        }, this.duration);
+      }
+      document.addEventListener('keydown', this.keydown);
+    },
+    beforeDestroy() {
+      document.removeEventListener('keydown', this.keydown);
+    }
+  };
+</script>
+

package/src/packages/option/index.js

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

package/src/packages/option-group/index.js

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

package/src/packages/page-header/index.js

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

package/src/packages/page-header/src/main.vue

@@ -0,0 +1,30 @@
+<template>
+  <div class="el-page-header">
+    <div class="el-page-header__left" @click="$emit('back')">
+      <i class="el-icon-back"></i>
+      <div class="el-page-header__title">
+        <slot name="title">{{ title }}</slot>
+      </div>
+    </div>
+    <div class="el-page-header__content">
+      <slot name="content">{{ content }}</slot>
+    </div>
+  </div>
+</template>
+
+<script>
+import { t } from 'element-ui/src/locale';
+export default {
+  name: 'ElPageHeader',
+
+  props: {
+    title: {
+      type: String,
+      default() {
+        return t('el.pageHeader.title');
+      }
+    },
+    content: String
+  }
+};
+</script>

package/src/packages/pagination/index.js

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

package/src/packages/pagination/src/pager.vue

@@ -0,0 +1,163 @@
+<template>
+  <ul @click="onPagerClick" class="el-pager">
+    <li
+      :class="{ active: currentPage === 1, disabled }"
+      v-if="pageCount > 0"
+      class="number">1</li>
+    <li
+      class="el-icon more btn-quickprev"
+      :class="[quickprevIconClass, { disabled }]"
+      v-if="showPrevMore"
+      @mouseenter="onMouseenter('left')"
+      @mouseleave="quickprevIconClass = 'el-icon-more'">
+    </li>
+    <li
+      v-for="pager in pagers"
+      :key="pager"
+      :class="{ active: currentPage === pager, disabled }"
+      class="number">{{ pager }}</li>
+    <li
+      class="el-icon more btn-quicknext"
+      :class="[quicknextIconClass, { disabled }]"
+      v-if="showNextMore"
+      @mouseenter="onMouseenter('right')"
+      @mouseleave="quicknextIconClass = 'el-icon-more'">
+    </li>
+    <li
+      :class="{ active: currentPage === pageCount, disabled }"
+      class="number"
+      v-if="pageCount > 1">{{ pageCount }}</li>
+  </ul>
+</template>
+
+<script type="text/babel">
+  export default {
+    name: 'ElPager',
+
+    props: {
+      currentPage: Number,
+
+      pageCount: Number,
+
+      pagerCount: Number,
+
+      disabled: Boolean
+    },
+
+    watch: {
+      showPrevMore(val) {
+        if (!val) this.quickprevIconClass = 'el-icon-more';
+      },
+
+      showNextMore(val) {
+        if (!val) this.quicknextIconClass = 'el-icon-more';
+      }
+    },
+
+    methods: {
+      onPagerClick(event) {
+        const target = event.target;
+        if (target.tagName === 'UL' || this.disabled) {
+          return;
+        }
+
+        let newPage = Number(event.target.textContent);
+        const pageCount = this.pageCount;
+        const currentPage = this.currentPage;
+        const pagerCountOffset = this.pagerCount - 2;
+
+        if (target.className.indexOf('more') !== -1) {
+          if (target.className.indexOf('quickprev') !== -1) {
+            newPage = currentPage - pagerCountOffset;
+          } else if (target.className.indexOf('quicknext') !== -1) {
+            newPage = currentPage + pagerCountOffset;
+          }
+        }
+
+        /* istanbul ignore if */
+        if (!isNaN(newPage)) {
+          if (newPage < 1) {
+            newPage = 1;
+          }
+
+          if (newPage > pageCount) {
+            newPage = pageCount;
+          }
+        }
+
+        if (newPage !== currentPage) {
+          this.$emit('change', newPage);
+        }
+      },
+
+      onMouseenter(direction) {
+        if (this.disabled) return;
+        if (direction === 'left') {
+          this.quickprevIconClass = 'el-icon-d-arrow-left';
+        } else {
+          this.quicknextIconClass = 'el-icon-d-arrow-right';
+        }
+      }
+    },
+
+    computed: {
+      pagers() {
+        const pagerCount = this.pagerCount;
+        const halfPagerCount = (pagerCount - 1) / 2;
+
+        const currentPage = Number(this.currentPage);
+        const pageCount = Number(this.pageCount);
+
+        let showPrevMore = false;
+        let showNextMore = false;
+
+        if (pageCount > pagerCount) {
+          if (currentPage > pagerCount - halfPagerCount) {
+            showPrevMore = true;
+          }
+
+          if (currentPage < pageCount - halfPagerCount) {
+            showNextMore = true;
+          }
+        }
+
+        const array = [];
+
+        if (showPrevMore && !showNextMore) {
+          const startPage = pageCount - (pagerCount - 2);
+          for (let i = startPage; i < pageCount; i++) {
+            array.push(i);
+          }
+        } else if (!showPrevMore && showNextMore) {
+          for (let i = 2; i < pagerCount; i++) {
+            array.push(i);
+          }
+        } else if (showPrevMore && showNextMore) {
+          const offset = Math.floor(pagerCount / 2) - 1;
+          for (let i = currentPage - offset ; i <= currentPage + offset; i++) {
+            array.push(i);
+          }
+        } else {
+          for (let i = 2; i < pageCount; i++) {
+            array.push(i);
+          }
+        }
+
+        this.showPrevMore = showPrevMore;
+        this.showNextMore = showNextMore;
+
+        return array;
+      }
+    },
+
+    data() {
+      return {
+        current: null,
+        showPrevMore: false,
+        showNextMore: false,
+        quicknextIconClass: 'el-icon-more',
+        quickprevIconClass: 'el-icon-more'
+      };
+    }
+  };
+</script>