mazey-element-ui 2.0.1 → 2.15.16

package/packages/pagination/src/pagination.js

@@ -1,9 +1,9 @@
 import Pager from './pager.vue';
-import ElSelect from 'element-ui/packages/select';
-import ElOption from 'element-ui/packages/option';
-import ElInput from 'element-ui/packages/input';
-import Locale from 'element-ui/src/mixins/locale';
-import { valueEquals } from 'element-ui/src/utils/util';
+import ElSelect from 'mazey-element-ui/packages/select';
+import ElOption from 'mazey-element-ui/packages/option';
+import ElInput from 'mazey-element-ui/packages/input';
+import Locale from 'mazey-element-ui/src/mixins/locale';
+import { valueEquals } from 'mazey-element-ui/src/utils/util';
 
 export default {
   name: 'ElPagination',
@@ -52,7 +52,9 @@ export default {
 
     background: Boolean,
 
-    disabled: Boolean
+    disabled: Boolean,
+
+    hideOnSinglePage: Boolean
   },
 
   data() {
@@ -65,19 +67,21 @@ export default {
   },
 
   render(h) {
+    const layout = this.layout;
+    if (!layout) return null;
+    if (this.hideOnSinglePage && (!this.internalPageCount || this.internalPageCount === 1)) return null;
+
     let template = <div class={['el-pagination', {
       'is-background': this.background,
       'el-pagination--small': this.small
     }] }></div>;
-    const layout = this.layout || '';
-    if (!layout) return;
     const TEMPLATE_MAP = {
       prev: <prev></prev>,
       jumper: <jumper></jumper>,
       pager: <pager currentPage={ this.internalCurrentPage } pageCount={ this.internalPageCount } pagerCount={ this.pagerCount } on-change={ this.handleCurrentChange } disabled={ this.disabled }></pager>,
       next: <next></next>,
       sizes: <sizes pageSizes={ this.pageSizes }></sizes>,
-      slot: <my-slot></my-slot>,
+      slot: <slot>{ this.$slots.default ? this.$slots.default : '' }</slot>,
       total: <total></total>
     };
     const components = layout.split(',').map((item) => item.trim());
@@ -107,15 +111,6 @@ export default {
   },
 
   components: {
-    MySlot: {
-      render(h) {
-        return (
-          this.$parent.$slots.default
-            ? this.$parent.$slots.default[0]
-            : ''
-        );
-      }
-    },
     Prev: {
       render(h) {
         return (
@@ -179,6 +174,7 @@ export default {
             <el-select
               value={ this.$parent.internalPageSize }
               popperClass={ this.$parent.popperClass || '' }
+              size="mini"
               on-input={ this.handleChange }
               disabled={ this.$parent.disabled }>
               {
@@ -204,6 +200,7 @@ export default {
           if (val !== this.$parent.internalPageSize) {
             this.$parent.internalPageSize = val = parseInt(val, 10);
             this.$parent.userChangePageSize = true;
+            this.$parent.$emit('update:pageSize', val);
             this.$parent.$emit('size-change', val);
           }
         }
@@ -213,55 +210,36 @@ export default {
     Jumper: {
       mixins: [Locale],
 
+      components: { ElInput },
+
       data() {
         return {
-          oldValue: null
+          userInput: null
         };
       },
 
-      components: { ElInput },
-
       watch: {
-        '$parent.internalPageSize'() {
-          this.$nextTick(() => {
-            this.$refs.input.$el.querySelector('input').value = this.$parent.internalCurrentPage;
-          });
+        '$parent.internalCurrentPage'() {
+          this.userInput = null;
         }
       },
 
       methods: {
-        handleFocus(event) {
-          this.oldValue = event.target.value;
-        },
-        handleBlur({ target }) {
-          this.resetValueIfNeed(target.value);
-          this.reassignMaxValue(target.value);
-        },
         handleKeyup({ keyCode, target }) {
-          if (keyCode === 13 && this.oldValue && target.value !== this.oldValue) {
+          // Chrome, Safari, Firefox triggers change event on Enter
+          // Hack for IE: https://github.com/ElemeFE/element/issues/11710
+          // Drop this method when we no longer supports IE
+          if (keyCode === 13) {
             this.handleChange(target.value);
           }
         },
+        handleInput(value) {
+          this.userInput = value;
+        },
         handleChange(value) {
           this.$parent.internalCurrentPage = this.$parent.getValidCurrentPage(value);
           this.$parent.emitChange();
-          this.oldValue = null;
-          this.resetValueIfNeed(value);
-        },
-        resetValueIfNeed(value) {
-          const num = parseInt(value, 10);
-          if (!isNaN(num)) {
-            if (num < 1) {
-              this.$refs.input.$el.querySelector('input').value = 1;
-            } else {
-              this.reassignMaxValue(value);
-            }
-          }
-        },
-        reassignMaxValue(value) {
-          if (+value > this.$parent.internalPageCount) {
-            this.$refs.input.$el.querySelector('input').value = this.$parent.internalPageCount;
-          }
+          this.userInput = null;
         }
       },
 
@@ -273,15 +251,12 @@ export default {
               class="el-pagination__editor is-in-pagination"
               min={ 1 }
               max={ this.$parent.internalPageCount }
-              value={ this.$parent.internalCurrentPage }
-              domPropsValue={ this.$parent.internalCurrentPage }
+              value={ this.userInput !== null ? this.userInput : this.$parent.internalCurrentPage }
               type="number"
-              ref="input"
               disabled={ this.$parent.disabled }
               nativeOnKeyup={ this.handleKeyup }
-              onChange={ this.handleChange }
-              onFocus={ this.handleFocus }
-              onBlur={ this.handleBlur }/>
+              onInput={ this.handleInput }
+              onChange={ this.handleChange }/>
             { this.t('el.pagination.pageClassifier') }
           </span>
         );
@@ -365,9 +340,9 @@ export default {
   computed: {
     internalPageCount() {
       if (typeof this.total === 'number') {
-        return Math.ceil(this.total / this.internalPageSize);
+        return Math.max(1, Math.ceil(this.total / this.internalPageSize));
       } else if (typeof this.pageCount === 'number') {
-        return this.pageCount;
+        return Math.max(1, this.pageCount);
       }
       return null;
     }
@@ -377,7 +352,7 @@ export default {
     currentPage: {
       immediate: true,
       handler(val) {
-        this.internalCurrentPage = val;
+        this.internalCurrentPage = this.getValidCurrentPage(val);
       }
     },
 
@@ -390,24 +365,8 @@ export default {
 
     internalCurrentPage: {
       immediate: true,
-      handler(newVal, oldVal) {
-        newVal = parseInt(newVal, 10);
-
-        /* istanbul ignore if */
-        if (isNaN(newVal)) {
-          newVal = oldVal || 1;
-        } else {
-          newVal = this.getValidCurrentPage(newVal);
-        }
-
-        if (newVal !== undefined) {
-          this.internalCurrentPage = newVal;
-          if (oldVal !== newVal) {
-            this.$emit('update:currentPage', newVal);
-          }
-        } else {
-          this.$emit('update:currentPage', newVal);
-        }
+      handler(newVal) {
+        this.$emit('update:currentPage', newVal);
         this.lastEmittedPage = -1;
       }
     },

package/packages/popconfirm/index.js

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

package/packages/popconfirm/src/main.vue

@@ -0,0 +1,104 @@
+<template>
+  <el-popover
+    v-bind="$attrs"
+    v-model="visible"
+    trigger="click"
+  >
+  <div class="el-popconfirm">
+    <p class="el-popconfirm__main">
+    <i
+      v-if="!hideIcon"
+      :class="icon"
+      class="el-popconfirm__icon"
+      :style="{color: iconColor}"
+    ></i>
+      {{title}}
+    </p>
+    <div class="el-popconfirm__action">
+      <el-button 
+        size="mini" 
+        :type="cancelButtonType" 
+        @click="cancel"
+      >
+        {{ displayCancelButtonText }}
+      </el-button>
+      <el-button 
+        size="mini" 
+        :type="confirmButtonType" 
+        @click="confirm"
+      >
+        {{ displayConfirmButtonText }}
+      </el-button>
+    </div>
+  </div>
+  <slot name="reference" slot="reference"></slot>
+</el-popover>
+</template>
+
+<script>
+import ElPopover from 'mazey-element-ui/packages/popover';
+import ElButton from 'mazey-element-ui/packages/button';
+import {t} from 'mazey-element-ui/src/locale';
+
+export default {
+  name: 'ElPopconfirm',
+  props: {
+    title: {
+      type: String
+    },
+    confirmButtonText: {
+      type: String
+    },
+    cancelButtonText: {
+      type: String
+    },
+    confirmButtonType: {
+      type: String,
+      default: 'primary'
+    },
+    cancelButtonType: {
+      type: String,
+      default: 'text'
+    },
+    icon: {
+      type: String,
+      default: 'el-icon-question'
+    },
+    iconColor: {
+      type: String,
+      default: '#f90'
+    },
+    hideIcon: {
+      type: Boolean,
+      default: false
+    }
+  },
+  components: {
+    ElPopover,
+    ElButton
+  },
+  data() {
+    return {
+      visible: false
+    };
+  },
+  computed: {
+    displayConfirmButtonText() {
+      return this.confirmButtonText || t('el.popconfirm.confirmButtonText');
+    },
+    displayCancelButtonText() {
+      return this.cancelButtonText || t('el.popconfirm.cancelButtonText');
+    }
+  },
+  methods: {
+    confirm() {
+      this.visible = false;
+      this.$emit('confirm');
+    },
+    cancel() {
+      this.visible = false;
+      this.$emit('cancel');
+    }
+  }
+};
+</script>

package/packages/popover/src/directive.js

@@ -2,7 +2,11 @@ const getReference = (el, binding, vnode) => {
   const _ref = binding.expression ? binding.value : binding.arg;
   const popper = vnode.context.$refs[_ref];
   if (popper) {
-    popper.$refs.reference = el;
+    if (Array.isArray(popper)) {
+      popper[0].$refs.reference = el;
+    } else {
+      popper.$refs.reference = el;
+    }
   }
 };
 

package/packages/popover/src/main.vue

@@ -18,14 +18,16 @@
         <slot>{{ content }}</slot>
       </div>
     </transition>
-    <slot name="reference"></slot>
+    <span class="el-popover__reference-wrapper" ref="wrapper" >
+      <slot name="reference"></slot>
+    </span>
   </span>
 </template>
 <script>
-import Popper from 'element-ui/src/utils/vue-popper';
-import { on, off } from 'element-ui/src/utils/dom';
-import { addClass, removeClass } from 'element-ui/src/utils/dom';
-import { generateId } from 'element-ui/src/utils/util';
+import Popper from 'mazey-element-ui/src/utils/vue-popper';
+import { on, off } from 'mazey-element-ui/src/utils/dom';
+import { addClass, removeClass } from 'mazey-element-ui/src/utils/dom';
+import { generateId } from 'mazey-element-ui/src/utils/util';
 
 export default {
   name: 'ElPopover',
@@ -42,6 +44,10 @@ export default {
       type: Number,
       default: 0
     },
+    closeDelay: {
+      type: Number,
+      default: 200
+    },
     title: String,
     disabled: Boolean,
     content: String,
@@ -58,6 +64,10 @@ export default {
     transition: {
       type: String,
       default: 'fade-in-linear'
+    },
+    tabindex: {
+      type: Number,
+      default: 0
     }
   },
 
@@ -68,6 +78,9 @@ export default {
   },
   watch: {
     showPopper(val) {
+      if (this.disabled) {
+        return;
+      }
       val ? this.$emit('show') : this.$emit('hide');
     }
   },
@@ -76,14 +89,14 @@ export default {
     let reference = this.referenceElm = this.reference || this.$refs.reference;
     const popper = this.popper || this.$refs.popper;
 
-    if (!reference && this.$slots.reference && this.$slots.reference[0]) {
-      reference = this.referenceElm = this.$slots.reference[0].elm;
+    if (!reference && this.$refs.wrapper.children) {
+      reference = this.referenceElm = this.$refs.wrapper.children[0];
     }
     // 可访问性
     if (reference) {
       addClass(reference, 'el-popover__reference');
       reference.setAttribute('aria-describedby', this.tooltipId);
-      reference.setAttribute('tabindex', 0); // tab序列
+      reference.setAttribute('tabindex', this.tabindex); // tab序列
       popper.setAttribute('tabindex', 0);
 
       if (this.trigger !== 'click') {
@@ -110,24 +123,10 @@ export default {
       on(reference, 'mouseleave', this.handleMouseLeave);
       on(popper, 'mouseleave', this.handleMouseLeave);
     } else if (this.trigger === 'focus') {
-      let found = false;
-
-      if ([].slice.call(reference.children).length) {
-        const children = reference.childNodes;
-        const len = children.length;
-        for (let i = 0; i < len; i++) {
-          if (children[i].nodeName === 'INPUT' ||
-              children[i].nodeName === 'TEXTAREA') {
-            on(children[i], 'focusin', this.doShow);
-            on(children[i], 'focusout', this.doClose);
-            found = true;
-            break;
-          }
-        }
+      if (this.tabindex < 0) {
+        console.warn('[Element Warn][Popover]a negative taindex means that the element cannot be focused by tab key');
       }
-      if (found) return;
-      if (reference.nodeName === 'INPUT' ||
-        reference.nodeName === 'TEXTAREA') {
+      if (reference.querySelector('input, textarea')) {
         on(reference, 'focusin', this.doShow);
         on(reference, 'focusout', this.doClose);
       } else {
@@ -137,6 +136,14 @@ export default {
     }
   },
 
+  beforeDestroy() {
+    this.cleanup();
+  },
+
+  deactivated() {
+    this.cleanup();
+  },
+
   methods: {
     doToggle() {
       this.showPopper = !this.showPopper;
@@ -149,14 +156,14 @@ export default {
     },
     handleFocus() {
       addClass(this.referenceElm, 'focusing');
-      if (this.trigger !== 'manual') this.showPopper = true;
+      if (this.trigger === 'click' || this.trigger === 'focus') this.showPopper = true;
     },
     handleClick() {
       removeClass(this.referenceElm, 'focusing');
     },
     handleBlur() {
       removeClass(this.referenceElm, 'focusing');
-      if (this.trigger !== 'manual') this.showPopper = false;
+      if (this.trigger === 'click' || this.trigger === 'focus') this.showPopper = false;
     },
     handleMouseEnter() {
       clearTimeout(this._timer);
@@ -175,16 +182,20 @@ export default {
     },
     handleMouseLeave() {
       clearTimeout(this._timer);
-      this._timer = setTimeout(() => {
+      if (this.closeDelay) {
+        this._timer = setTimeout(() => {
+          this.showPopper = false;
+        }, this.closeDelay);
+      } else {
         this.showPopper = false;
-      }, 200);
+      }
     },
     handleDocumentClick(e) {
       let reference = this.reference || this.$refs.reference;
       const popper = this.popper || this.$refs.popper;
 
-      if (!reference && this.$slots.reference && this.$slots.reference[0]) {
-        reference = this.referenceElm = this.$slots.reference[0].elm;
+      if (!reference && this.$refs.wrapper.children) {
+        reference = this.referenceElm = this.$refs.wrapper.children[0];
       }
       if (!this.$el ||
         !reference ||
@@ -200,6 +211,11 @@ export default {
     handleAfterLeave() {
       this.$emit('after-leave');
       this.doDestroy();
+    },
+    cleanup() {
+      if (this.openDelay || this.closeDelay) {
+        clearTimeout(this._timer);
+      }
     }
   },
 
@@ -211,6 +227,8 @@ export default {
     off(reference, 'mousedown', this.doShow);
     off(reference, 'focusin', this.doShow);
     off(reference, 'focusout', this.doClose);
+    off(reference, 'mousedown', this.doShow);
+    off(reference, 'mouseup', this.doClose);
     off(reference, 'mouseleave', this.handleMouseLeave);
     off(reference, 'mouseenter', this.handleMouseEnter);
     off(document, 'click', this.handleDocumentClick);