mazey-element-ui 2.0.1 → 2.15.16

package/packages/tree/src/model/tree-store.js

@@ -32,6 +32,7 @@ export default class TreeStore {
 
   filter(value) {
     const filterNodeMethod = this.filterNodeMethod;
+    const lazy = this.lazy;
     const traverse = function(node) {
       const childNodes = node.root ? node.root.childNodes : node.childNodes;
 
@@ -43,10 +44,7 @@ export default class TreeStore {
 
       if (!node.visible && childNodes.length) {
         let allHidden = true;
-
-        childNodes.forEach((child) => {
-          if (child.visible) allHidden = false;
-        });
+        allHidden = !childNodes.some(child => child.visible);
 
         if (node.root) {
           node.root.visible = allHidden === false;
@@ -56,7 +54,7 @@ export default class TreeStore {
       }
       if (!value) return;
 
-      if (node.visible && !node.isLeaf) node.expand();
+      if (node.visible && !node.isLeaf && !lazy) node.expand();
     };
 
     traverse(this);
@@ -90,7 +88,11 @@ export default class TreeStore {
 
   remove(data) {
     const node = this.getNode(data);
-    if (node) {
+
+    if (node && node.parent) {
+      if (node === this.currentNode) {
+        this.currentNode = null;
+      }
       node.parent.removeChild(node);
     }
   }
@@ -143,22 +145,20 @@ export default class TreeStore {
     const key = this.key;
     if (!key || !node || !node.data) return;
 
-    const childNodes = node.childNodes;
-    for (let i = 0, j = childNodes.length; i < j; i++) {
-      const child = childNodes[i];
+    node.childNodes.forEach(child => {
       this.deregisterNode(child);
-    }
+    });
 
     delete this.nodesMap[node.key];
   }
 
-  getCheckedNodes(leafOnly = false) {
+  getCheckedNodes(leafOnly = false, includeHalfChecked = false) {
     const checkedNodes = [];
     const traverse = function(node) {
       const childNodes = node.root ? node.root.childNodes : node.childNodes;
 
       childNodes.forEach((child) => {
-        if (child.checked && (!leafOnly || (leafOnly && child.isLeaf))) {
+        if ((child.checked || (includeHalfChecked && child.indeterminate)) && (!leafOnly || (leafOnly && child.isLeaf))) {
           checkedNodes.push(child.data);
         }
 
@@ -311,8 +311,13 @@ export default class TreeStore {
     return this.currentNode;
   }
 
-  setCurrentNode(node) {
-    this.currentNode = node;
+  setCurrentNode(currentNode) {
+    const prevCurrentNode = this.currentNode;
+    if (prevCurrentNode) {
+      prevCurrentNode.isCurrent = false;
+    }
+    this.currentNode = currentNode;
+    this.currentNode.isCurrent = true;
   }
 
   setUserCurrentNode(node) {
@@ -322,13 +327,14 @@ export default class TreeStore {
   }
 
   setCurrentNodeKey(key) {
-    if (key === null) {
+    if (key === null || key === undefined) {
+      this.currentNode && (this.currentNode.isCurrent = false);
       this.currentNode = null;
       return;
     }
     const node = this.getNode(key);
     if (node) {
-      this.currentNode = node;
+      this.setCurrentNode(node);
     }
   }
 };

package/packages/tree/src/tree-node.vue

@@ -6,7 +6,7 @@
     v-show="node.visible"
     :class="{
       'is-expanded': expanded,
-      'is-current': tree.store.currentNode === node,
+      'is-current': node.isCurrent,
       'is-hidden': !node.visible,
       'is-focusable': !node.disabled,
       'is-checked': !node.disabled && node.checked
@@ -26,9 +26,13 @@
     <div class="el-tree-node__content"
       :style="{ 'padding-left': (node.level - 1) * tree.indent + 'px' }">
       <span
-        class="el-tree-node__expand-icon el-icon-caret-right"
         @click.stop="handleExpandIconClick"
-        :class="{ 'is-leaf': node.isLeaf, expanded: !node.isLeaf && expanded }">
+        :class="[
+          { 'is-leaf': node.isLeaf, expanded: !node.isLeaf && expanded },
+          'el-tree-node__expand-icon',
+          tree.iconClass ? tree.iconClass : 'el-icon-caret-right'
+        ]"
+      >
       </span>
       <el-checkbox
         v-if="showCheckbox"
@@ -57,6 +61,7 @@
           :render-content="renderContent"
           v-for="child in node.childNodes"
           :render-after-expand="renderAfterExpand"
+          :show-checkbox="showCheckbox"
           :key="getNodeKey(child)"
           :node="child"
           @node-expand="handleChildNodeExpand">
@@ -67,9 +72,9 @@
 </template>
 
 <script type="text/jsx">
-  import ElCollapseTransition from 'element-ui/src/transitions/collapse-transition';
-  import ElCheckbox from 'element-ui/packages/checkbox';
-  import emitter from 'element-ui/src/mixins/emitter';
+  import ElCollapseTransition from 'mazey-element-ui/src/transitions/collapse-transition';
+  import ElCheckbox from 'mazey-element-ui/packages/checkbox';
+  import emitter from 'mazey-element-ui/src/mixins/emitter';
   import { getNodeKey } from './model/util';
 
   export default {
@@ -90,6 +95,10 @@
       renderAfterExpand: {
         type: Boolean,
         default: true
+      },
+      showCheckbox: {
+        type: Boolean,
+        default: false
       }
     },
 
@@ -123,7 +132,6 @@
         tree: null,
         expanded: false,
         childNodeRendered: false,
-        showCheckbox: false,
         oldChecked: null,
         oldIndeterminate: null
       };
@@ -167,7 +175,7 @@
         if (this.tree.expandOnClickNode) {
           this.handleExpandIconClick();
         }
-        if (this.tree.checkOnClickNode) {
+        if (this.tree.checkOnClickNode && !this.node.disabled) {
           this.handleCheckChange(null, {
             target: { checked: !this.node.checked }
           });
@@ -254,8 +262,6 @@
         this.node.updateChildren();
       });
 
-      this.showCheckbox = tree.showCheckbox;
-
       if (this.node.expanded) {
         this.expanded = true;
         this.childNodeRendered = true;

package/packages/tree/src/tree.vue

@@ -14,11 +14,12 @@
       :node="child"
       :props="props"
       :render-after-expand="renderAfterExpand"
+      :show-checkbox="showCheckbox"
       :key="getNodeKey(child)"
       :render-content="renderContent"
       @node-expand="handleNodeExpand">
     </el-tree-node>
-    <div class="el-tree__empty-block" v-if="!root.childNodes || root.childNodes.length === 0">
+    <div class="el-tree__empty-block" v-if="isEmpty">
       <span class="el-tree__empty-text">{{ emptyText }}</span>
     </div>
     <div
@@ -33,9 +34,9 @@
   import TreeStore from './model/tree-store';
   import { getNodeKey, findNearestComponent } from './model/util';
   import ElTreeNode from './tree-node.vue';
-  import {t} from 'element-ui/src/locale';
-  import emitter from 'element-ui/src/mixins/emitter';
-  import { addClass, removeClass } from 'element-ui/src/utils/dom';
+  import {t} from 'mazey-element-ui/src/locale';
+  import emitter from 'mazey-element-ui/src/mixins/emitter';
+  import { addClass, removeClass } from 'mazey-element-ui/src/utils/dom';
 
   export default {
     name: 'ElTree',
@@ -94,6 +95,7 @@
       },
       defaultCheckedKeys: Array,
       defaultExpandedKeys: Array,
+      currentNodeKey: [String, Number],
       renderContent: Function,
       showCheckbox: {
         type: Boolean,
@@ -110,7 +112,6 @@
           return {
             children: 'children',
             label: 'label',
-            icon: 'icon',
             disabled: 'disabled'
           };
         }
@@ -126,7 +127,8 @@
       indent: {
         type: Number,
         default: 18
-      }
+      },
+      iconClass: String
     },
 
     computed: {
@@ -141,12 +143,16 @@
 
       treeItemArray() {
         return Array.prototype.slice.call(this.treeItems);
+      },
+
+      isEmpty() {
+        const { childNodes } = this.root;
+        return !childNodes || childNodes.length === 0 || childNodes.every(({visible}) => !visible);
       }
     },
 
     watch: {
       defaultCheckedKeys(newVal) {
-        this.store.defaultCheckedKeys = newVal;
         this.store.setDefaultCheckedKey(newVal);
       },
 
@@ -193,8 +199,8 @@
         return path.reverse();
       },
 
-      getCheckedNodes(leafOnly) {
-        return this.store.getCheckedNodes(leafOnly);
+      getCheckedNodes(leafOnly, includeHalfChecked) {
+        return this.store.getCheckedNodes(leafOnly, includeHalfChecked);
       },
 
       getCheckedKeys(leafOnly) {
@@ -285,15 +291,15 @@
         this.treeItems[0] && this.treeItems[0].setAttribute('tabindex', 0);
       },
 
-      handelKeydown(ev) {
+      handleKeydown(ev) {
         const currentItem = ev.target;
         if (currentItem.className.indexOf('el-tree-node') === -1) return;
-        ev.preventDefault();
         const keyCode = ev.keyCode;
         this.treeItems = this.$el.querySelectorAll('.is-focusable[role=treeitem]');
         const currentIndex = this.treeItemArray.indexOf(currentItem);
         let nextIndex;
         if ([38, 40].indexOf(keyCode) > -1) { // up、down
+          ev.preventDefault();
           if (keyCode === 38) { // up
             nextIndex = currentIndex !== 0 ? currentIndex - 1 : 0;
           } else {
@@ -302,10 +308,12 @@
           this.treeItemArray[nextIndex].focus(); // 选中
         }
         if ([37, 39].indexOf(keyCode) > -1) { // left、right 展开
+          ev.preventDefault();
           currentItem.click(); // 选中
         }
         const hasInput = currentItem.querySelector('[type="checkbox"]');
         if ([13, 32].indexOf(keyCode) > -1 && hasInput) { // space enter选中checkbox
+          ev.preventDefault();
           hasInput.click();
         }
       }
@@ -362,12 +370,12 @@
         let dropPrev = true;
         let dropInner = true;
         let dropNext = true;
+        let userAllowDropInner = true;
         if (typeof this.allowDrop === 'function') {
           dropPrev = this.allowDrop(draggingNode.node, dropNode.node, 'prev');
-          dropInner = this.allowDrop(draggingNode.node, dropNode.node, 'inner');
+          userAllowDropInner = dropInner = this.allowDrop(draggingNode.node, dropNode.node, 'inner');
           dropNext = this.allowDrop(draggingNode.node, dropNode.node, 'next');
         }
-        dragState.allowDrop = dropInner;
         event.dataTransfer.dropEffect = dropInner ? 'move' : 'none';
         if ((dropPrev || dropInner || dropNext) && oldDropNode !== dropNode) {
           if (oldDropNode) {
@@ -395,12 +403,12 @@
           dropNext = false;
         }
 
-        const targetPosition = dropNode.$el.querySelector('.el-tree-node__expand-icon').getBoundingClientRect();
+        const targetPosition = dropNode.$el.getBoundingClientRect();
         const treePosition = this.$el.getBoundingClientRect();
 
         let dropType;
-        const prevPercent = dropPrev ? (dropInner ? 0.25 : (dropNext ? 0.5 : 1)) : -1;
-        const nextPercent = dropNext ? (dropInner ? 0.75 : (dropPrev ? 0.5 : 0)) : 1;
+        const prevPercent = dropPrev ? (dropInner ? 0.25 : (dropNext ? 0.45 : 1)) : -1;
+        const nextPercent = dropNext ? (dropInner ? 0.75 : (dropPrev ? 0.55 : 0)) : 1;
 
         let indicatorTop = -9999;
         const distance = event.clientY - targetPosition.top;
@@ -414,14 +422,15 @@
           dropType = 'none';
         }
 
+        const iconPosition = dropNode.$el.querySelector('.el-tree-node__expand-icon').getBoundingClientRect();
         const dropIndicator = this.$refs.dropIndicator;
         if (dropType === 'before') {
-          indicatorTop = targetPosition.top - treePosition.top;
+          indicatorTop = iconPosition.top - treePosition.top;
         } else if (dropType === 'after') {
-          indicatorTop = targetPosition.bottom - treePosition.top;
+          indicatorTop = iconPosition.bottom - treePosition.top;
         }
         dropIndicator.style.top = indicatorTop + 'px';
-        dropIndicator.style.left = (targetPosition.right - treePosition.left) + 'px';
+        dropIndicator.style.left = (iconPosition.right - treePosition.left) + 'px';
 
         if (dropType === 'inner') {
           addClass(dropNode.$el, 'is-drop-inner');
@@ -430,6 +439,7 @@
         }
 
         dragState.showDropIndicator = dropType === 'before' || dropType === 'after';
+        dragState.allowDrop = dragState.showDropIndicator || userAllowDropInner;
         dragState.dropType = dropType;
         this.$emit('node-drag-over', draggingNode.node, dropNode.node, event);
       });
@@ -440,17 +450,21 @@
         event.dataTransfer.dropEffect = 'move';
 
         if (draggingNode && dropNode) {
-          const data = draggingNode.node.data;
-          if (dropType === 'before') {
+          const draggingNodeCopy = { data: draggingNode.node.data };
+          if (dropType !== 'none') {
             draggingNode.node.remove();
-            dropNode.node.parent.insertBefore({ data }, dropNode.node);
+          }
+          if (dropType === 'before') {
+            dropNode.node.parent.insertBefore(draggingNodeCopy, dropNode.node);
           } else if (dropType === 'after') {
-            draggingNode.node.remove();
-            dropNode.node.parent.insertAfter({ data }, dropNode.node);
+            dropNode.node.parent.insertAfter(draggingNodeCopy, dropNode.node);
           } else if (dropType === 'inner') {
-            dropNode.node.insertChild({ data });
-            draggingNode.node.remove();
+            dropNode.node.insertChild(draggingNodeCopy);
           }
+          if (dropType !== 'none') {
+            this.store.registerNode(draggingNodeCopy);
+          }
+
           removeClass(dropNode.$el, 'is-drop-inner');
 
           this.$emit('node-drag-end', draggingNode.node, dropNode.node, dropType, event);
@@ -471,7 +485,7 @@
 
     mounted() {
       this.initTabIndex();
-      this.$el.addEventListener('keydown', this.handelKeydown);
+      this.$el.addEventListener('keydown', this.handleKeydown);
     },
 
     updated() {

package/packages/upload/src/index.vue

@@ -1,9 +1,8 @@
 <script>
 import UploadList from './upload-list';
 import Upload from './upload';
-import IframeUpload from './iframe-upload';
-import ElProgress from 'element-ui/packages/progress';
-import Migrating from 'element-ui/src/mixins/migrating';
+import ElProgress from 'mazey-element-ui/packages/progress';
+import Migrating from 'mazey-element-ui/src/mixins/migrating';
 
 function noop() {}
 
@@ -15,8 +14,7 @@ export default {
   components: {
     ElProgress,
     UploadList,
-    Upload,
-    IframeUpload
+    Upload
   },
 
   provide() {
@@ -124,6 +122,20 @@ export default {
   },
 
   watch: {
+    listType(type) {
+      if (type === 'picture-card' || type === 'picture') {
+        this.uploadFiles = this.uploadFiles.map(file => {
+          if (!file.url && file.raw) {
+            try {
+              file.url = URL.createObjectURL(file.raw);
+            } catch (err) {
+              console.error('[Element Error][Upload]', err);
+            }
+          }
+          return file;
+        });
+      }
+    },
     fileList: {
       immediate: true,
       handler(fileList) {
@@ -148,11 +160,13 @@ export default {
         raw: rawFile
       };
 
-      try {
-        file.url = URL.createObjectURL(rawFile);
-      } catch (err) {
-        console.error(err);
-        return;
+      if (this.listType === 'picture-card' || this.listType === 'picture') {
+        try {
+          file.url = URL.createObjectURL(rawFile);
+        } catch (err) {
+          console.error('[Element Error][Upload]', err);
+          return;
+        }
       }
 
       this.uploadFiles.push(file);
@@ -243,6 +257,14 @@ export default {
     }
   },
 
+  beforeDestroy() {
+    this.uploadFiles.forEach(file => {
+      if (file.url && file.url.indexOf('blob:') === 0) {
+        URL.revokeObjectURL(file.url);
+      }
+    });
+  },
+
   render(h) {
     let uploadList;
 
@@ -254,6 +276,15 @@ export default {
           files={this.uploadFiles}
           on-remove={this.handleRemove}
           handlePreview={this.onPreview}>
+          {
+            (props) => {
+              if (this.$scopedSlots.file) {
+                return this.$scopedSlots.file({
+                  file: props.file
+                });
+              }
+            }
+          }
         </UploadList>
       );
     }
@@ -288,9 +319,7 @@ export default {
     };
 
     const trigger = this.$slots.trigger || this.$slots.default;
-    const uploadComponent = (typeof FormData !== 'undefined' || this.$isServer)
-      ? <upload {...uploadData}>{trigger}</upload>
-      : <iframeUpload {...uploadData}>{trigger}</iframeUpload>;
+    const uploadComponent = <upload {...uploadData}>{trigger}</upload>;
 
     return (
       <div>

package/packages/upload/src/upload-list.vue

@@ -9,62 +9,67 @@
     name="el-list"
   >
     <li
-      v-for="(file, index) in files"
+      v-for="file in files"
       :class="['el-upload-list__item', 'is-' + file.status, focusing ? 'focusing' : '']"
-      :key="index"
+      :key="file.uid"
       tabindex="0"
       @keydown.delete="!disabled && $emit('remove', file)"
       @focus="focusing = true"
       @blur="focusing = false"
       @click="focusing = false"
     >
-      <img
-        class="el-upload-list__item-thumbnail"
-        v-if="file.status !== 'uploading' && ['picture-card', 'picture'].indexOf(listType) > -1"
-        :src="file.url" alt=""
-      >
-      <a class="el-upload-list__item-name" @click="handleClick(file)">
-        <i class="el-icon-document"></i>{{file.name}}
-      </a>
-      <label class="el-upload-list__item-status-label">
-        <i :class="{
-          'el-icon-upload-success': true,
-          'el-icon-circle-check': listType === 'text',
-          'el-icon-check': ['picture-card', 'picture'].indexOf(listType) > -1
-        }"></i>
-      </label>
-      <i class="el-icon-close" v-if="!disabled" @click="$emit('remove', file)"></i>
-      <i class="el-icon-close-tip" v-if="!disabled">{{ t('el.upload.deleteTip') }}</i> <!--因为close按钮只在li:focus的时候 display, li blur后就不存在了，所以键盘导航时永远无法 focus到 close按钮上-->
-      <el-progress
-        v-if="file.status === 'uploading'"
-        :type="listType === 'picture-card' ? 'circle' : 'line'"
-        :stroke-width="listType === 'picture-card' ? 6 : 2"
-        :percentage="parsePercentage(file.percentage)">
-      </el-progress>
-      <span class="el-upload-list__item-actions" v-if="listType === 'picture-card'">
-        <span
-          class="el-upload-list__item-preview"
-          v-if="handlePreview && listType === 'picture-card'"
-          @click="handlePreview(file)"
+      <slot :file="file">
+        <img
+          class="el-upload-list__item-thumbnail"
+          v-if="file.status !== 'uploading' && ['picture-card', 'picture'].indexOf(listType) > -1"
+          :src="file.url" alt=""
         >
-          <i class="el-icon-zoom-in"></i>
+        <a class="el-upload-list__item-name" @click="handleClick(file)">
+          <i class="el-icon-document"></i>{{file.name}}
+        </a>
+        <label class="el-upload-list__item-status-label">
+          <i :class="{
+            'el-icon-upload-success': true,
+            'el-icon-circle-check': listType === 'text',
+            'el-icon-check': ['picture-card', 'picture'].indexOf(listType) > -1
+          }"></i>
+        </label>
+        <i class="el-icon-close" v-if="!disabled" @click="$emit('remove', file)"></i>
+        <i class="el-icon-close-tip" v-if="!disabled">{{ t('el.upload.deleteTip') }}</i> <!--因为close按钮只在li:focus的时候 display, li blur后就不存在了，所以键盘导航时永远无法 focus到 close按钮上-->
+        <el-progress
+          v-if="file.status === 'uploading'"
+          :type="listType === 'picture-card' ? 'circle' : 'line'"
+          :stroke-width="listType === 'picture-card' ? 6 : 2"
+          :percentage="parsePercentage(file.percentage)">
+        </el-progress>
+        <span class="el-upload-list__item-actions" v-if="listType === 'picture-card'">
+          <span
+            class="el-upload-list__item-preview"
+            v-if="handlePreview && listType === 'picture-card'"
+            @click="handlePreview(file)"
+          >
+            <i class="el-icon-zoom-in"></i>
+          </span>
+          <span
+            v-if="!disabled"
+            class="el-upload-list__item-delete"
+            @click="$emit('remove', file)"
+          >
+            <i class="el-icon-delete"></i>
+          </span>
         </span>
-        <span
-          v-if="!disabled"
-          class="el-upload-list__item-delete"
-          @click="$emit('remove', file)"
-        >
-          <i class="el-icon-delete"></i>
-        </span>
-      </span>
+      </slot>
     </li>
   </transition-group>
 </template>
 <script>
-  import Locale from 'element-ui/src/mixins/locale';
-  import ElProgress from 'element-ui/packages/progress';
+  import Locale from 'mazey-element-ui/src/mixins/locale';
+  import ElProgress from 'mazey-element-ui/packages/progress';
 
   export default {
+
+    name: 'ElUploadList',
+
     mixins: [Locale],
 
     data() {

package/src/directives/repeat-click.js

@@ -1,12 +1,14 @@
-import { once, on } from 'element-ui/src/utils/dom';
+import { once, on } from 'mazey-element-ui/src/utils/dom';
+import { isMac } from 'mazey-element-ui/src/utils/util';
 
 export default {
   bind(el, binding, vnode) {
     let interval = null;
     let startTime;
+    const maxIntervals = isMac() ? 100 : 200;
     const handler = () => vnode.context[binding.expression].apply();
     const clear = () => {
-      if (new Date() - startTime < 100) {
+      if (Date.now() - startTime < maxIntervals) {
         handler();
       }
       clearInterval(interval);
@@ -15,10 +17,10 @@ export default {
 
     on(el, 'mousedown', (e) => {
       if (e.button !== 0) return;
-      startTime = new Date();
+      startTime = Date.now();
       once(document, 'mouseup', clear);
       clearInterval(interval);
-      interval = setInterval(handler, 100);
+      interval = setInterval(handler, maxIntervals);
     });
   }
 };