tianheng-ui 0.1.0 → 0.1.1

package/packages/Upload/upload.vue

@@ -0,0 +1,193 @@
+<template>
+  <div @click="handleClick" :class="classMatch" @keydown="handleKeydown" tabindex="0" >
+      <upload-dragger v-if="drag" :disabled="disabled" @file="uploadFiles"><slot></slot></upload-dragger>
+      <slot v-else></slot>
+      <input class="th-upload__input" type="file" ref="input" :name="name" @change="handleChange" :multiple="multiple" :accept="accept"></input>
+    </div>
+</template>
+
+
+<script>
+import ajax from './ajax';
+import UploadDragger from './upload-dragger.vue';
+
+export default {
+  inject: ['uploader'],
+  components: {
+    UploadDragger
+  },
+  props: {
+    type: String,
+    action: {
+      type: String,
+      required: true
+    },
+    name: {
+      type: String,
+      default: 'file'
+    },
+    data: Object,
+    headers: Object,
+    withCredentials: Boolean,
+    multiple: Boolean,
+    accept: String,
+    onStart: Function,
+    onProgress: Function,
+    onSuccess: Function,
+    onError: Function,
+    beforeUpload: Function,
+    drag: Boolean,
+    onPreview: {
+      type: Function,
+      default: function() {}
+    },
+    onRemove: {
+      type: Function,
+      default: function() {}
+    },
+    fileList: Array,
+    autoUpload: Boolean,
+    listType: String,
+    httpRequest: {
+      type: Function,
+      default: ajax
+    },
+    disabled: Boolean,
+    limit: Number,
+    onExceed: Function
+  },
+
+  data() {
+    return {
+      mouseover: false,
+      reqs: {}
+    };
+  },
+  computed: {
+    classMatch(){
+      const classGroup = {
+        'th-upload': true
+      }
+      classGroup[`th-upload--${this.listType}`] = true;
+      return classGroup
+    },
+  },
+  methods: {
+    isImage(str) {
+      return str.indexOf('image') !== -1;
+    },
+    handleChange(ev) {
+      const files = ev.target.files;
+
+      if (!files) return;
+      this.uploadFiles(files);
+    },
+    uploadFiles(files) {
+      if (this.limit && this.fileList.length + files.length > this.limit) {
+        this.onExceed && this.onExceed(files, this.fileList);
+        return;
+      }
+
+      let postFiles = Array.prototype.slice.call(files);
+      if (!this.multiple) { postFiles = postFiles.slice(0, 1); }
+
+      if (postFiles.length === 0) { return; }
+
+      postFiles.forEach(rawFile => {
+        this.onStart(rawFile);
+        if (this.autoUpload) this.upload(rawFile);
+      });
+    },
+    upload(rawFile) {
+      this.$refs.input.value = null;
+
+      if (!this.beforeUpload) {
+        return this.post(rawFile);
+      }
+
+      const before = this.beforeUpload(rawFile);
+      if (before && before.then) {
+        before.then(processedFile => {
+          const fileType = Object.prototype.toString.call(processedFile);
+
+          if (fileType === '[object File]' || fileType === '[object Blob]') {
+            if (fileType === '[object Blob]') {
+              processedFile = new File([processedFile], rawFile.name, {
+                type: rawFile.type
+              });
+            }
+            for (const p in rawFile) {
+              if (rawFile.hasOwnProperty(p)) {
+                processedFile[p] = rawFile[p];
+              }
+            }
+            this.post(processedFile);
+          } else {
+            this.post(rawFile);
+          }
+        }, () => {
+          this.onRemove(null, rawFile);
+        });
+      } else if (before !== false) {
+        this.post(rawFile);
+      } else {
+        this.onRemove(null, rawFile);
+      }
+    },
+    abort(file) {
+      const { reqs } = this;
+      if (file) {
+        let uid = file;
+        if (file.uid) uid = file.uid;
+        if (reqs[uid]) {
+          reqs[uid].abort();
+        }
+      } else {
+        Object.keys(reqs).forEach((uid) => {
+          if (reqs[uid]) reqs[uid].abort();
+          delete reqs[uid];
+        });
+      }
+    },
+    post(rawFile) {
+      const { uid } = rawFile;
+      const options = {
+        headers: this.headers,
+        withCredentials: this.withCredentials,
+        file: rawFile,
+        data: this.data,
+        filename: this.name,
+        action: this.action,
+        onProgress: e => {
+          this.onProgress(e, rawFile);
+        },
+        onSuccess: res => {
+          this.onSuccess(res, rawFile);
+          delete this.reqs[uid];
+        },
+        onError: err => {
+          this.onError(err, rawFile);
+          delete this.reqs[uid];
+        }
+      };
+      const req = this.httpRequest(options);
+      this.reqs[uid] = req;
+      if (req && req.then) {
+        req.then(options.onSuccess, options.onError);
+      }
+    },
+    handleClick() {
+      if (!this.disabled) {
+        this.$refs.input.value = null;
+        this.$refs.input.click();
+      }
+    },
+    handleKeydown(e) {
+      if (e.target !== e.currentTarget) return;
+      if (e.keyCode === 13 || e.keyCode === 32) {
+        this.handleClick();
+      }
+    }
+  },
+};
+</script>

package/packages/VueEditor/index.js

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

package/packages/VueEditor/index.vue

@@ -0,0 +1,38 @@
+<template>
+  <vue-editor v-model="data" :disabled="disabled"> </vue-editor>
+</template>
+
+<script>
+import { VueEditor } from "vue2-editor";
+export default {
+  name: "ThVueEditor",
+  components: { VueEditor },
+  model: {
+    prop: "value",
+    event: "upload:value"
+  },
+  props: {
+    value: String,
+    disabled: Boolean
+  },
+  data() {
+    return {
+      data: this.value
+    };
+  },
+  watch: {
+    data: {
+      handler(val) {
+        this.$emit("upload:value", val);
+      },
+      deep: true
+    },
+    value(val) {
+      this.data = val;
+    }
+  },
+  methods: {}
+};
+</script>
+
+<style></style>

package/packages/Workflow/Log.js

@@ -0,0 +1,99 @@
+function Log() {}
+
+Log.prototype.type = ["primary", "success", "warn", "error", "info"];
+
+Log.prototype.typeColor = function(type) {
+  let color = "";
+  switch (type) {
+    case "primary":
+      color = "#2d8cf0";
+      break;
+    case "success":
+      color = "#19be6b";
+      break;
+    case "info":
+      color = "#909399";
+      break;
+    case "warn":
+      color = "#ff9900";
+      break;
+    case "error":
+      color = "#f03f14";
+      break;
+    default:
+      color = "#35495E";
+      break;
+  }
+  return color;
+};
+
+Log.prototype.isArray = function(obj) {
+  return Object.prototype.toString.call(obj) === "[object Array]";
+};
+
+Log.prototype.print = function(text, type = "default", back = false) {
+  if (typeof text === "object") {
+    // 如果是對象則調用打印對象方式
+    this.isArray(text) ? console.table(text) : console.dir(text);
+    return;
+  }
+  if (back) {
+    // 如果是打印帶背景圖的
+    console.log(`%c ${text} `, `background:${this.typeColor(type)}; padding: 2px; border-radius: 4px; color: #fff;`);
+  } else {
+    console.log(
+      `%c ${text} `,
+      `border: 1px solid ${this.typeColor(type)};
+        padding: 2px; border-radius: 4px;
+        color: ${this.typeColor(type)};`
+    );
+  }
+};
+
+Log.prototype.printBack = function(type = "primary", title) {
+  this.print(type, title, true);
+};
+
+Log.prototype.pretty = function(type = "primary", title, text) {
+  if (typeof text === "object") {
+    console.group("Console Group", title);
+    console.log(
+      `%c ${title}`,
+      `background:${this.typeColor(type)};border:1px solid ${this.typeColor(type)};
+        padding: 1px; border-radius: 4px; color: #fff;`
+    );
+    this.isArray(text) ? console.table(text) : console.dir(text);
+    console.groupEnd();
+    return;
+  }
+  console.log(
+    `%c ${title} %c ${text} %c`,
+    `background:${this.typeColor(type)};border:1px solid ${this.typeColor(type)};
+      padding: 1px; border-radius: 4px 0 0 4px; color: #fff;`,
+    `border:1px solid ${this.typeColor(type)};
+      padding: 1px; border-radius: 0 4px 4px 0; color: ${this.typeColor(type)};`,
+    "background:transparent"
+  );
+};
+
+Log.prototype.prettyPrimary = function(title, ...text) {
+  text.forEach(t => this.pretty("primary", title, t));
+};
+
+Log.prototype.prettySuccess = function(title, ...text) {
+  text.forEach(t => this.pretty("success", title, t));
+};
+
+Log.prototype.prettyWarn = function(title, ...text) {
+  text.forEach(t => this.pretty("warn", title, t));
+};
+
+Log.prototype.prettyError = function(title, ...text) {
+  text.forEach(t => this.pretty("error", title, t));
+};
+
+Log.prototype.prettyInfo = function(title, ...text) {
+  text.forEach(t => this.pretty("info", title, t));
+};
+
+export default new Log();