tianheng-ui 0.1.0 → 0.1.1

package/packages/Upload/ajax.js

@@ -0,0 +1,85 @@
+function getError(action, option, xhr) {
+  let msg;
+  if (xhr.response) {
+    msg = `${xhr.response.error || xhr.response}`;
+  } else if (xhr.responseText) {
+    msg = `${xhr.responseText}`;
+  } else {
+    msg = `fail to post ${action} ${xhr.status}`;
+  }
+
+  const err = new Error(msg);
+  err.status = xhr.status;
+  err.method = 'post';
+  err.url = action;
+  return err;
+}
+
+function getBody(xhr) {
+  const text = xhr.responseText || xhr.response;
+  if (!text) {
+    return text;
+  }
+
+  try {
+    return JSON.parse(text);
+  } catch (e) {
+    return text;
+  }
+}
+
+export default function upload(option) {
+  if (typeof XMLHttpRequest === 'undefined') {
+    return;
+  }
+
+  const xhr = new XMLHttpRequest();
+  const action = option.action;
+
+  if (xhr.upload) {
+    xhr.upload.onprogress = function progress(e) {
+      if (e.total > 0) {
+        e.percent = e.loaded / e.total * 100;
+      }
+      option.onProgress(e);
+    };
+  }
+
+  const formData = new FormData();
+
+  if (option.data) {
+    Object.keys(option.data).forEach(key => {
+      formData.append(key, option.data[key]);
+    });
+  }
+
+  formData.append(option.filename, option.file, option.file.name);
+
+  xhr.onerror = function error(e) {
+    option.onError(e);
+  };
+
+  xhr.onload = function onload() {
+    if (xhr.status < 200 || xhr.status >= 300) {
+      return option.onError(getError(action, option, xhr));
+    }
+
+    option.onSuccess(getBody(xhr));
+  };
+
+  xhr.open('post', action, true);
+
+  if (option.withCredentials && 'withCredentials' in xhr) {
+    xhr.withCredentials = true;
+  }
+
+  const headers = option.headers || {};
+
+  for (let item in headers) {
+    if (headers.hasOwnProperty(item) && headers[item] !== null) {
+      xhr.setRequestHeader(item, headers[item]);
+    }
+  }
+  xhr.send(formData);
+  return xhr;
+}

package/packages/Upload/index.js

@@ -0,0 +1,8 @@
+import Upload from "./index.vue";
+
+/* istanbul ignore next */
+Upload.install = function(Vue) {
+  Vue.component(Upload.name, Upload);
+};
+
+export default Upload;

package/packages/Upload/index.vue

@@ -0,0 +1,325 @@
+<script>
+import UploadList from './upload-list';
+import Upload from './upload';
+import ElProgress from 'element-ui/packages/progress';
+
+function noop() {}
+
+export default {
+  name: 'ThUpload',
+  components: {
+    ElProgress,
+    UploadList,
+    Upload
+  },
+
+  provide() {
+    return {
+      uploader: this
+    };
+  },
+
+  inject: {
+    elForm: {
+      default: ''
+    }
+  },
+
+  props: {
+    action: {
+      type: String,
+      required: true
+    },
+    headers: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    data: Object,
+    multiple: Boolean,
+    name: {
+      type: String,
+      default: 'file'
+    },
+    drag: Boolean,
+    dragger: Boolean,
+    withCredentials: Boolean,
+    showFileList: {
+      type: Boolean,
+      default: true
+    },
+    accept: String,
+    type: {
+      type: String,
+      default: 'select'
+    },
+    beforeUpload: Function,
+    beforeRemove: Function,
+    onRemove: {
+      type: Function,
+      default: noop
+    },
+    onChange: {
+      type: Function,
+      default: noop
+    },
+    onPreview: {
+      type: Function
+    },
+    onSuccess: {
+      type: Function,
+      default: noop
+    },
+    onProgress: {
+      type: Function,
+      default: noop
+    },
+    onError: {
+      type: Function,
+      default: noop
+    },
+    fileList: {
+      type: Array,
+      default() {
+        return [];
+      }
+    },
+    autoUpload: {
+      type: Boolean,
+      default: true
+    },
+    listType: {
+      type: String,
+      default: 'text' // text,picture,picture-card
+    },
+    httpRequest: Function,
+    disabled: Boolean,
+    limit: Number,
+    onExceed: {
+      type: Function,
+      default: noop
+    }
+  },
+
+  data() {
+    return {
+      uploadFiles: [],
+      dragOver: false,
+      draging: false,
+      tempIndex: 1
+    };
+  },
+
+  computed: {
+    uploadDisabled() {
+      return this.disabled || (this.elForm || {}).disabled;
+    }
+  },
+
+  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) {
+        this.uploadFiles = fileList.map(item => {
+          item.uid = item.uid || (Date.now() + this.tempIndex++);
+          item.status = item.status || 'success';
+          return item;
+        });
+      }
+    }
+  },
+
+  methods: {
+    handleStart(rawFile) {
+      rawFile.uid = Date.now() + this.tempIndex++;
+      let file = {
+        status: 'ready',
+        name: rawFile.name,
+        size: rawFile.size,
+        percentage: 0,
+        uid: rawFile.uid,
+        raw: rawFile
+      };
+
+      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);
+      this.onChange(file, this.uploadFiles);
+    },
+    handleProgress(ev, rawFile) {
+      const file = this.getFile(rawFile);
+      this.onProgress(ev, file, this.uploadFiles);
+      file.status = 'uploading';
+      file.percentage = ev.percent || 0;
+    },
+    handleSuccess(res, rawFile) {
+      const file = this.getFile(rawFile);
+
+      if (file) {
+        file.status = 'success';
+        file.response = res;
+
+        this.onSuccess(res, file, this.uploadFiles);
+        this.onChange(file, this.uploadFiles);
+      }
+    },
+    handleError(err, rawFile) {
+      const file = this.getFile(rawFile);
+      const fileList = this.uploadFiles;
+
+      file.status = 'fail';
+
+      fileList.splice(fileList.indexOf(file), 1);
+
+      this.onError(err, file, this.uploadFiles);
+      this.onChange(file, this.uploadFiles);
+    },
+    handleRemove(file, raw) {
+      if (raw) {
+        file = this.getFile(raw);
+      }
+      let doRemove = () => {
+        this.abort(file);
+        let fileList = this.uploadFiles;
+        fileList.splice(fileList.indexOf(file), 1);
+        this.onRemove(file, fileList);
+      };
+
+      if (!this.beforeRemove) {
+        doRemove();
+      } else if (typeof this.beforeRemove === 'function') {
+        const before = this.beforeRemove(file, this.uploadFiles);
+        if (before && before.then) {
+          before.then(() => {
+            doRemove();
+          }, noop);
+        } else if (before !== false) {
+          doRemove();
+        }
+      }
+    },
+    getFile(rawFile) {
+      let fileList = this.uploadFiles;
+      let target;
+      fileList.every(item => {
+        target = rawFile.uid === item.uid ? item : null;
+        return !target;
+      });
+      return target;
+    },
+    abort(file) {
+      this.$refs['upload-inner'].abort(file);
+    },
+    clearFiles() {
+      this.uploadFiles = [];
+    },
+    submit() {
+      this.uploadFiles
+        .filter(file => file.status === 'ready')
+        .forEach(file => {
+          this.$refs['upload-inner'].upload(file.raw);
+        });
+    },
+  },
+
+  beforeDestroy() {
+    this.uploadFiles.forEach(file => {
+      if (file.url && file.url.indexOf('blob:') === 0) {
+        URL.revokeObjectURL(file.url);
+      }
+    });
+  },
+
+  render(h) {
+    let uploadList;
+
+    if (this.showFileList) {
+      uploadList = (
+        <UploadList
+          disabled={this.uploadDisabled}
+          listType={this.listType}
+          files={this.uploadFiles}
+          on-remove={this.handleRemove}
+          handlePreview={this.onPreview}>
+          {
+            (props) => {
+              if (this.$scopedSlots.file) {
+                return this.$scopedSlots.file({
+                  file: props.file
+                });
+              }
+            }
+          }
+        </UploadList>
+      );
+    }
+
+    const uploadData = {
+      props: {
+        type: this.type,
+        drag: this.drag,
+        action: this.action,
+        multiple: this.multiple,
+        'before-upload': this.beforeUpload,
+        // 'with-credentials': this.withCredentials,
+        headers: this.headers,
+        name: this.name,
+        data: this.data,
+        accept: this.accept,
+        fileList: this.uploadFiles,
+        autoUpload: this.autoUpload,
+        listType: this.listType,
+        disabled: this.uploadDisabled,
+        limit: this.limit,
+        'on-exceed': this.onExceed,
+        'on-start': this.handleStart,
+        'on-progress': this.handleProgress,
+        'on-success': this.handleSuccess,
+        'on-error': this.handleError,
+        'on-preview': this.onPreview,
+        'on-remove': this.handleRemove,
+        'http-request': this.httpRequest
+      },
+      ref: 'upload-inner'
+    };
+
+    const trigger = this.$slots.trigger || this.$slots.default;
+    const uploadComponent = <upload {...uploadData}>{trigger}</upload>;
+
+    return (
+      <div>
+        { this.listType === 'picture-card' ? uploadList : ''}
+        {
+          this.$slots.trigger
+            ? [uploadComponent, this.$slots.default]
+            : uploadComponent
+        }
+        {this.$slots.tip}
+        { this.listType !== 'picture-card' ? uploadList : ''}
+      </div>
+    );
+  }
+};
+</script>

package/packages/Upload/upload-dragger.vue

@@ -0,0 +1,70 @@
+<template>
+  <div
+    class="th-upload-dragger"
+    :class="{
+      'is-dragover': dragover
+    }"
+    @drop.prevent="onDrop"
+    @dragover.prevent="onDragover"
+    @dragleave.prevent="dragover = false"
+  >
+    <slot></slot>
+  </div>
+</template>
+<script>
+  export default {
+    name: 'ThUploadDrag',
+    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/upload-list.vue

@@ -0,0 +1,121 @@
+<template>
+  <transition-group
+    tag="ul"
+    :class="[
+      'th-upload-list',
+      'th-upload-list--' + listType,
+      { 'is-disabled': disabled }
+    ]"
+    name="th-list"
+  >
+    <li
+      v-for="file in files"
+      :class="[
+        'th-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"
+    >
+      <slot :file="file">
+        <img
+          class="th-upload-list__item-thumbnail"
+          v-if="
+            file.status !== 'uploading' &&
+              ['picture-card', 'picture'].indexOf(listType) > -1
+          "
+          :src="file.url"
+          alt=""
+        />
+        <a class="th-upload-list__item-name" @click="handleClick(file)">
+          <i class="el-icon-document"></i>{{ file.name }}
+        </a>
+        <label class="th-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="th-upload-list__item-actions"
+          v-if="listType === 'picture-card'"
+        >
+          <span
+            class="th-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="th-upload-list__item-delete"
+            @click="$emit('remove', file)"
+          >
+            <i class="el-icon-delete"></i>
+          </span>
+        </span>
+      </slot>
+    </li>
+  </transition-group>
+</template>
+<script>
+import ElProgress from "element-ui/packages/progress";
+export default {
+  name: "ThUploadList",
+  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>