@penggy/element-ui 2.4.11 → 2.4.12

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

@@ -1,70 +1,70 @@
-<template>
-  <div
-    class="el-upload-dragger"
-    :class="{
-      'is-dragover': dragover
-    }"
-    @drop.prevent="onDrop"
-    @dragover.prevent="onDragover"
-    @dragleave.prevent="dragover = false"
-  >
-    <slot></slot>
-  </div>
-</template>
-<script>
-  export default {
-    name: 'ElUploadDrag',
-    props: {
-      disabled: Boolean
-    },
-    inject: {
-      uploader: {
-        default: ''
-      }
-    },
-    data() {
-      return {
-        dragover: false
-      };
-    },
-    methods: {
-      onDragover() {
-        if (!this.disabled) {
-          this.dragover = true;
-        }
-      },
-      onDrop(e) {
-        if (this.disabled || !this.uploader) return;
-        const accept = this.uploader.accept;
-        this.dragover = false;
-        if (!accept) {
-          this.$emit('file', e.dataTransfer.files);
-          return;
-        }
-        this.$emit('file', [].slice.call(e.dataTransfer.files).filter(file => {
-          const { type, name } = file;
-          const extension = name.indexOf('.') > -1
-            ? `.${ name.split('.').pop() }`
-            : '';
-          const baseType = type.replace(/\/.*$/, '');
-          return accept.split(',')
-            .map(type => type.trim())
-            .filter(type => type)
-            .some(acceptedType => {
-              if (/\..+$/.test(acceptedType)) {
-                return extension === acceptedType;
-              }
-              if (/\/\*$/.test(acceptedType)) {
-                return baseType === acceptedType.replace(/\/\*$/, '');
-              }
-              if (/^[^\/]+\/[^\/]+$/.test(acceptedType)) {
-                return type === acceptedType;
-              }
-              return false;
-            });
-        }));
-      }
-    }
-  };
-</script>
-
+<template>
+  <div
+    class="el-upload-dragger"
+    :class="{
+      'is-dragover': dragover
+    }"
+    @drop.prevent="onDrop"
+    @dragover.prevent="onDragover"
+    @dragleave.prevent="dragover = false"
+  >
+    <slot></slot>
+  </div>
+</template>
+<script>
+  export default {
+    name: 'ElUploadDrag',
+    props: {
+      disabled: Boolean
+    },
+    inject: {
+      uploader: {
+        default: ''
+      }
+    },
+    data() {
+      return {
+        dragover: false
+      };
+    },
+    methods: {
+      onDragover() {
+        if (!this.disabled) {
+          this.dragover = true;
+        }
+      },
+      onDrop(e) {
+        if (this.disabled || !this.uploader) return;
+        const accept = this.uploader.accept;
+        this.dragover = false;
+        if (!accept) {
+          this.$emit('file', e.dataTransfer.files);
+          return;
+        }
+        this.$emit('file', [].slice.call(e.dataTransfer.files).filter(file => {
+          const { type, name } = file;
+          const extension = name.indexOf('.') > -1
+            ? `.${ name.split('.').pop() }`
+            : '';
+          const baseType = type.replace(/\/.*$/, '');
+          return accept.split(',')
+            .map(type => type.trim())
+            .filter(type => type)
+            .some(acceptedType => {
+              if (/\..+$/.test(acceptedType)) {
+                return extension === acceptedType;
+              }
+              if (/\/\*$/.test(acceptedType)) {
+                return baseType === acceptedType.replace(/\/\*$/, '');
+              }
+              if (/^[^\/]+\/[^\/]+$/.test(acceptedType)) {
+                return type === acceptedType;
+              }
+              return false;
+            });
+        }));
+      }
+    }
+  };
+</script>
+

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

@@ -1,103 +1,103 @@
-<template>
-  <transition-group
-    tag="ul"
-    :class="[
-      'el-upload-list',
-      'el-upload-list--' + listType,
-      { 'is-disabled': disabled }
-    ]"
-    name="el-list"
-  >
-    <li
-      v-for="file in files"
-      :class="['el-upload-list__item', 'is-' + file.status, focusing ? 'focusing' : '']"
-      :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)"
-        >
-          <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>
-    </li>
-  </transition-group>
-</template>
-<script>
-  import Locale from 'element-ui/src/mixins/locale';
-  import ElProgress from 'element-ui/packages/progress';
-
-  export default {
-
-    name: 'ElUploadList',
-
-    mixins: [Locale],
-
-    data() {
-      return {
-        focusing: false
-      };
-    },
-    components: { ElProgress },
-
-    props: {
-      files: {
-        type: Array,
-        default() {
-          return [];
-        }
-      },
-      disabled: {
-        type: Boolean,
-        default: false
-      },
-      handlePreview: Function,
-      listType: String
-    },
-    methods: {
-      parsePercentage(val) {
-        return parseInt(val, 10);
-      },
-      handleClick(file) {
-        this.handlePreview && this.handlePreview(file);
-      }
-    }
-  };
-</script>
+<template>
+  <transition-group
+    tag="ul"
+    :class="[
+      'el-upload-list',
+      'el-upload-list--' + listType,
+      { 'is-disabled': disabled }
+    ]"
+    name="el-list"
+  >
+    <li
+      v-for="file in files"
+      :class="['el-upload-list__item', 'is-' + file.status, focusing ? 'focusing' : '']"
+      :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)"
+        >
+          <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>
+    </li>
+  </transition-group>
+</template>
+<script>
+  import Locale from '@penggy/element-ui/src/mixins/locale';
+  import ElProgress from '@penggy/element-ui/packages/progress';
+
+  export default {
+
+    name: 'ElUploadList',
+
+    mixins: [Locale],
+
+    data() {
+      return {
+        focusing: false
+      };
+    },
+    components: { ElProgress },
+
+    props: {
+      files: {
+        type: Array,
+        default() {
+          return [];
+        }
+      },
+      disabled: {
+        type: Boolean,
+        default: false
+      },
+      handlePreview: Function,
+      listType: String
+    },
+    methods: {
+      parsePercentage(val) {
+        return parseInt(val, 10);
+      },
+      handleClick(file) {
+        this.handlePreview && this.handlePreview(file);
+      }
+    }
+  };
+</script>