misp-ui-library-test 0.0.1

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

@@ -0,0 +1,262 @@
+<template>
+  <div
+    class="ui-tree-node"
+    @click.stop="handleClick"
+    @contextmenu="$event => handleContextMenu($event)"
+    v-show="node.visible"
+    :class="{
+      'is-expanded': expanded,
+      'is-current': node.isCurrent,
+      'is-hidden': !node.visible,
+      'is-focusable': true,
+      'is-checked': node.checked
+    }"
+    role="treeitem"
+    tabindex="-1"
+    :aria-expanded="expanded"
+    :aria-disabled="node.disabled"
+    :aria-checked="node.checked"
+    ref="node"
+  >
+    <div
+      class="ui-tree-node__content"
+      :style="{ 'padding-left': (node.level - 1) * tree.indent + 'px' }"
+    >
+      <span
+        @click.stop="handleExpandIconClick"
+        :class="[
+          { 'is-leaf': node.isLeaf, expanded: !node.isLeaf && expanded },
+          'ui-tree-node__expand-icon',
+          tree.iconClass ? tree.iconClass : 'ui-icon-caret-right'
+        ]"
+      >
+      </span>
+      <ui-checkbox
+        v-if="showCheckbox"
+        v-model="node.checked"
+        :indeterminate="node.indeterminate"
+        :disabled="!!node.disabled"
+        @click.native.stop
+        @change="handleCheckChange"
+      >
+      </ui-checkbox>
+      <span
+        v-if="node.loading"
+        class="ui-tree-node__loading-icon ui-icon-loading"
+      >
+      </span>
+      <node-content :node="node"></node-content>
+    </div>
+    <collapse-transition>
+      <div
+        class="ui-tree-node__children"
+        v-if="!renderAfterExpand || childNodeRendered"
+        v-show="expanded"
+        role="group"
+        :aria-expanded="expanded"
+      >
+        <ui-tree-node
+          v-for="child in node.childNodes"
+          :render-after-expand="renderAfterExpand"
+          :show-checkbox="showCheckbox"
+          :key="getNodeKey(child)"
+          :node="child"
+          @node-expand="handleChildNodeExpand"
+        >
+        </ui-tree-node>
+      </div>
+    </collapse-transition>
+  </div>
+</template>
+
+<script>
+import CollapseTransition from '../../transitions/collapse-transition';
+import UiCheckbox from '../../checkbox';
+import emitter from '../../../mixins/emitter';
+import { getNodeKey } from './model/util';
+
+export default {
+  name: 'UiTreeNode',
+
+  componentName: 'UiTreeNode',
+
+  mixins: [emitter],
+
+  props: {
+    node: {
+      default() {
+        return {};
+      }
+    },
+    props: {},
+    renderContent: Function,
+    renderAfterExpand: {
+      type: Boolean,
+      default: true
+    },
+    showCheckbox: {
+      type: Boolean,
+      default: false
+    }
+  },
+
+  components: {
+    CollapseTransition,
+    UiCheckbox,
+    NodeContent: {
+      props: {
+        node: {
+          required: true
+        }
+      },
+      render(h) {
+        const parent = this.$parent;
+        const tree = parent.tree;
+        const node = this.node;
+        const { data, store } = node;
+        return (
+          parent.renderContent
+            ? parent.renderContent.call(parent._renderProxy, h, { _self: tree.$vnode.context, node, data, store })
+            : tree.$scopedSlots.default
+              ? tree.$scopedSlots.default({ node, data })
+              : h('span', { class: 'ui-tree-node__label' }, [node.label])
+        );
+      }
+    }
+  },
+
+  data() {
+    return {
+      tree: null,
+      expanded: false,
+      childNodeRendered: false,
+      oldChecked: null,
+      oldIndeterminate: null
+    };
+  },
+
+  watch: {
+    'node.indeterminate'(val) {
+      this.handleSelectChange(this.node.checked, val);
+    },
+
+    'node.checked'(val) {
+      this.handleSelectChange(val, this.node.indeterminate);
+    },
+
+    'node.expanded'(val) {
+      this.$nextTick(() => this.expanded = val);
+      if (val) {
+        this.childNodeRendered = true;
+      }
+    }
+  },
+
+  methods: {
+    getNodeKey(node) {
+      return getNodeKey(this.tree.nodeKey, node.data);
+    },
+
+    handleSelectChange(checked, indeterminate) {
+      if (this.oldChecked !== checked || this.oldIndeterminate !== indeterminate) {
+        this.$emit('check-change', this.node.data, checked, indeterminate);
+      }
+      this.oldChecked = checked;
+      this.oldIndeterminate = indeterminate;
+    },
+
+    handleClick() {
+      const store = this.tree.store;
+      store.setCurrentNode(this.node);
+      this.tree.$emit('current-change', store.currentNode ? store.currentNode.data : null, store.currentNode);
+      this.tree.currentNode = this;
+      if (this.tree.expandOnClickNode) {
+        this.handleExpandIconClick();
+      }
+      if (this.tree.checkOnClickNode && !this.node.disabled) {
+        this.handleCheckChange(null, {
+          target: { checked: !this.node.checked }
+        });
+      }
+      this.tree.$emit('node-click', this.node.data, this.node, this);
+    },
+
+    handleContextMenu(event) {
+      if (this.tree._events['node-contextmenu'] && this.tree._events['node-contextmenu'].length > 0) {
+        event.stopPropagation();
+        event.preventDefault();
+      }
+      this.tree.$emit('node-contextmenu', event, this.node.data, this.node, this);
+    },
+
+    handleExpandIconClick() {
+      if (this.node.isLeaf) return;
+      if (this.expanded) {
+        this.tree.$emit('node-collapse', this.node.data, this.node, this);
+        this.$emit('node-collapse', this.node.data, this.node, this);
+        this.node.collapse();
+      } else {
+        this.node.expand(() => {
+          this.expanded = true;
+          this.childNodeRendered = true;
+          this.$emit('node-expand', this.node.data, this.node, this);
+          this.tree.$emit('node-expand', this.node.data, this.node, this);
+        });
+      }
+    },
+
+    handleCheckChange(value, ev) {
+      this.node.setChecked(ev.target.checked, !this.tree.checkStrictly);
+      this.$nextTick(() => {
+        const store = this.tree.store;
+        this.tree.$emit('check', this.node.data, {
+          checkedNodes: store.getCheckedNodes(),
+          checkedKeys: store.getCheckedKeys(),
+          halfCheckedNodes: store.getHalfCheckedNodes(),
+          halfCheckedKeys: store.getHalfCheckedKeys(),
+        });
+      });
+    },
+
+    handleChildNodeExpand(nodeData, node, instance) {
+      this.broadcast('UiTreeNode', 'tree-node-expand', node);
+      this.tree.$emit('node-expand', nodeData, node, instance);
+    }
+  },
+
+  created() {
+    const parent = this.$parent;
+
+    if (parent.isTree) {
+      this.tree = parent;
+    } else {
+      this.tree = parent.tree;
+    }
+
+    const tree = this.tree;
+    if (!tree) {
+      console.warn('Can not find node\'s tree.');
+    }
+
+    const props = tree.props || {};
+    const childrenKey = props['children'] || 'children';
+
+    this.$watch(`node.data.${childrenKey}`, () => {
+      this.node.updateChildren();
+    });
+
+    if (this.node.expanded) {
+      this.expanded = true;
+      this.childNodeRendered = true;
+    }
+
+    if(this.tree.accordion) {
+      this.$on('tree-node-expand', node => {
+        if(this.node !== node) {
+          this.node.collapse();
+        }
+      });
+    }
+  }
+};
+</script>

package/src/packages/upload/index.js

@@ -0,0 +1,9 @@
+import UiUpload from './src/main.vue'
+
+// 自动安装
+UiUpload.install = function(Vue) {
+  Vue.component(UiUpload.name, UiUpload)
+}
+
+export default UiUpload
+

package/src/packages/upload/src/main.vue

@@ -0,0 +1,415 @@
+<template>
+  <div class="ui-upload-wrapper">
+    <!-- Picture Card File List -->
+    <transition-group
+      v-if="showFileList && listType === 'picture-card'"
+      tag="ul"
+      class="ui-upload-list ui-upload-list--picture-card"
+      name="ui-list"
+    >
+      <li
+        v-for="file in uploadFiles"
+        :key="file.uid"
+        class="ui-upload-list__item"
+        :class="['is-' + file.status]"
+      >
+        <img class="ui-upload-list__item-thumbnail" :src="file.url" alt="" v-if="file.url">
+        <span class="ui-upload-list__item-actions">
+          <span class="ui-upload-list__item-preview" @click.stop="handlePreview(file)">
+            <i class="ui-icon-zoom-in"></i>
+          </span>
+          <span v-if="!disabled" class="ui-upload-list__item-delete" @click.stop="handleRemove(file)">
+            <i class="ui-icon-delete"></i>
+          </span>
+        </span>
+        <ui-progress
+          v-if="file.status === 'uploading'"
+          type="circle"
+          :stroke-width="6"
+          :width="70"
+          :percentage="parsePercentage(file.percentage)">
+        </ui-progress>
+      </li>
+    </transition-group>
+
+    <!-- Picture Card Trigger -->
+    <div
+      v-if="listType === 'picture-card'"
+      v-show="!disabled && uploadFiles.length < (limit || Infinity)"
+      class="ui-upload ui-upload--picture-card"
+      @click="handleClick"
+    >
+      <slot><i class="ui-icon-plus"></i></slot>
+    </div>
+
+    <!-- Text & Picture Trigger -->
+    <div
+      v-else
+      class="ui-upload"
+      :class="[`ui-upload--${listType}`, { 'is-drag': drag }]"
+      @click="handleClick"
+      @dragover.prevent="handleDragover"
+      @dragleave.prevent="dragover = false"
+      @drop.prevent="handleDrop"
+    >
+      <div
+        v-if="drag"
+        class="ui-upload-dragger"
+        :class="{ 'is-dragover': dragover, 'is-disabled': disabled }"
+      >
+        <slot>
+          <i class="ui-icon-upload"></i>
+          <div class="ui-upload__text">
+            {{ t('components.upload.dragText') || '将文件拖到此处，或' }}<em>{{ t('components.upload.clickText') || '点击上传' }}</em>
+          </div>
+        </slot>
+      </div>
+      <slot v-else></slot>
+    </div>
+
+    <!-- Tip Content -->
+    <div v-if="$slots.tip" class="ui-upload__tip">
+      <slot name="tip"></slot>
+    </div>
+
+    <!-- Hidden Input -->
+    <input
+      ref="input"
+      class="ui-upload__input"
+      type="file"
+      :accept="accept"
+      :multiple="multiple"
+      :disabled="disabled"
+      @change="handleChange"
+    >
+
+    <!-- Text & Picture File List -->
+    <transition-group
+      v-if="showFileList && listType !== 'picture-card'"
+      tag="ul"
+      :class="[
+        'ui-upload-list',
+        'ui-upload-list--' + listType,
+        { 'is-disabled': disabled }
+      ]"
+      name="ui-list"
+    >
+      <li
+        v-for="file in uploadFiles"
+        :class="['ui-upload-list__item', 'is-' + file.status]"
+        :key="file.uid"
+      >
+        <slot name="file" :file="file">
+          <img
+            class="ui-upload-list__item-thumbnail"
+            v-if="listType === 'picture'"
+            :src="file.url" alt=""
+          >
+          <a class="ui-upload-list__item-name" @click="handlePreview(file)">
+            <i class="ui-icon-document"></i>{{file.name}}
+          </a>
+          <label class="ui-upload-list__item-status-label">
+            <i :class="{
+              'ui-icon-upload-success': true,
+              'ui-icon-circle-check': listType === 'text',
+              'ui-icon-check': listType === 'picture'
+            }"></i>
+          </label>
+          <i class="ui-icon-close" v-if="!disabled" @click="handleRemove(file)"></i>
+          <ui-progress
+            v-if="file.status === 'uploading'"
+            :stroke-width="2"
+            :percentage="parsePercentage(file.percentage)">
+          </ui-progress>
+        </slot>
+      </li>
+    </transition-group>
+  </div>
+</template>
+
+<script>
+import UiProgress from '../../progress'
+import locale from '../../../mixins/locale';
+
+export default {
+  name: 'UiUpload',
+
+  mixins: [locale],
+
+  components: {
+    UiProgress
+  },
+
+  props: {
+    action: {
+      type: String,
+      required: true
+    },
+    headers: {
+      type: Object,
+      default: () => ({})
+    },
+    multiple: Boolean,
+    data: Object,
+    name: {
+      type: String,
+      default: 'file'
+    },
+    withCredentials: {
+      type: Boolean,
+      default: false
+    },
+    showFileList: {
+      type: Boolean,
+      default: true
+    },
+    drag: Boolean,
+    accept: String,
+    fileList: {
+      type: Array,
+      default: () => []
+    },
+    autoUpload: {
+      type: Boolean,
+      default: true
+    },
+    listType: {
+      type: String,
+      default: 'text',
+      validator: val => ['text', 'picture', 'picture-card'].indexOf(val) > -1
+    },
+    disabled: Boolean,
+    limit: Number,
+    onExceed: Function,
+    beforeUpload: Function,
+    onRemove: Function,
+    onChange: Function,
+    onSuccess: Function,
+    onError: Function,
+    onProgress: Function,
+    onPreview: Function,
+    beforeRemove: Function,
+    httpRequest: Function
+  },
+
+  data() {
+    return {
+      dragover: false,
+      uploadFiles: []
+    };
+  },
+
+  watch: {
+    fileList: {
+      immediate: true,
+      handler(val) {
+        this.uploadFiles = val.map(file => {
+          if (!file.uid) file.uid = Date.now() + Math.random();
+          if (!file.status) file.status = 'success';
+          return file;
+        });
+      }
+    }
+  },
+
+  methods: {
+    parsePercentage(val) {
+      return parseInt(val, 10);
+    },
+
+    handleClick() {
+      if (this.disabled) return;
+      this.$refs.input.click();
+    },
+
+    handlePreview(file) {
+      if (this.onPreview) {
+        this.onPreview(file);
+      }
+    },
+
+    handleChange(ev) {
+      const files = ev.target.files;
+      if (!files) return;
+      this.uploadFilesHandle(Array.from(files));
+      ev.target.value = '';
+    },
+
+    async uploadFilesHandle(files) {
+      if (this.limit && this.uploadFiles.length + files.length > this.limit) {
+        this.onExceed && this.onExceed(files, this.uploadFiles);
+        return;
+      }
+
+      for (const file of files) {
+        const rawFile = file;
+        if (this.beforeUpload) {
+          const before = this.beforeUpload(rawFile);
+          if (before === false || (before instanceof Promise && await before.catch(() => false) === false)) {
+            continue;
+          }
+        }
+
+        const uploadFile = {
+          name: rawFile.name,
+          percentage: 0,
+          status: 'ready',
+          size: rawFile.size,
+          raw: rawFile,
+          uid: Date.now() + Math.random(),
+          url: this.listType !== 'text' ? URL.createObjectURL(rawFile) : ''
+        };
+
+        this.uploadFiles.push(uploadFile);
+        this.$emit('change', uploadFile, this.uploadFiles);
+        
+        if (this.autoUpload) {
+          this.post(uploadFile);
+        }
+      }
+    },
+
+    post(file) {
+      if (this.httpRequest) {
+        this.httpRequest({
+          headers: this.headers,
+          withCredentials: this.withCredentials,
+          file: file.raw,
+          data: this.data,
+          filename: this.name,
+          action: this.action,
+          onProgress: e => this.handleProgress(e, file),
+          onSuccess: res => this.handleSuccess(res, file),
+          onError: err => this.handleError(err, file)
+        });
+        return;
+      }
+
+      const formData = new FormData();
+      if (this.data) {
+        Object.keys(this.data).forEach(key => {
+          formData.append(key, this.data[key]);
+        });
+      }
+      formData.append(this.name, file.raw, file.name);
+
+      const xhr = new XMLHttpRequest();
+      xhr.open('POST', this.action, true);
+
+      if (this.withCredentials) {
+        xhr.withCredentials = true;
+      }
+
+      Object.keys(this.headers || {}).forEach(key => {
+        xhr.setRequestHeader(key, this.headers[key]);
+      });
+
+      xhr.upload.onprogress = (e) => {
+        this.handleProgress(e, file);
+      };
+
+      xhr.onload = () => {
+        if (xhr.status < 200 || xhr.status >= 300) {
+          this.handleError(xhr.response, file);
+          return;
+        }
+        this.handleSuccess(xhr.response, file);
+      };
+
+      xhr.onerror = (e) => {
+        this.handleError(e, file);
+      };
+
+      xhr.send(formData);
+      file.status = 'uploading';
+      file.xhr = xhr;
+    },
+
+    handleProgress(e, file) {
+      if (e.total > 0) {
+        file.percentage = (e.loaded / e.total * 100) | 0;
+      }
+      file.status = 'uploading';
+      this.onProgress && this.onProgress(e, file, this.uploadFiles);
+    },
+
+    handleSuccess(res, file) {
+      file.status = 'success';
+      file.response = res;
+      this.onSuccess && this.onSuccess(res, file, this.uploadFiles);
+      this.$emit('success', res, file, this.uploadFiles);
+      this.$emit('change', file, this.uploadFiles);
+    },
+
+    handleError(err, file) {
+      file.status = 'fail';
+      this.onError && this.onError(err, file, this.uploadFiles);
+      this.$emit('error', err, file, this.uploadFiles);
+      this.$emit('change', file, this.uploadFiles);
+    },
+
+    async handleRemove(file) {
+      if (this.beforeRemove) {
+        const before = this.beforeRemove(file, this.uploadFiles);
+        if (before === false || (before instanceof Promise && await before.catch(() => false) === false)) {
+          return;
+        }
+      }
+
+      const index = this.uploadFiles.findIndex(f => f.uid === file.uid);
+      if (index > -1) {
+        const removedFile = this.uploadFiles.splice(index, 1)[0];
+        if (removedFile.xhr) removedFile.xhr.abort();
+        if (removedFile.url && removedFile.url.startsWith('blob:')) {
+          URL.revokeObjectURL(removedFile.url);
+        }
+        this.onRemove && this.onRemove(removedFile, this.uploadFiles);
+        this.$emit('remove', removedFile, this.uploadFiles);
+        this.$emit('change', null, this.uploadFiles);
+      }
+    },
+
+    handleDragover() {
+      if (this.disabled) return;
+      this.dragover = true;
+    },
+
+    handleDrop(ev) {
+      if (this.disabled) return;
+      this.dragover = false;
+      const files = ev.dataTransfer.files;
+      if (files) {
+        this.uploadFilesHandle(Array.from(files));
+      }
+    },
+
+    submit() {
+      this.uploadFiles
+        .filter(file => file.status === 'ready')
+        .forEach(file => {
+          this.post(file);
+        });
+    },
+
+    clearFiles() {
+      this.uploadFiles.forEach(file => {
+        if (file.url && file.url.startsWith('blob:')) {
+          URL.revokeObjectURL(file.url);
+        }
+      });
+      this.uploadFiles = [];
+    },
+
+    abort(file) {
+      const target = file ? this.uploadFiles.find(f => f.uid === file.uid) : null;
+      if (target && target.xhr) {
+        target.xhr.abort();
+      } else if (!file) {
+        this.uploadFiles.forEach(f => f.xhr && f.xhr.abort());
+      }
+    }
+  }
+};
+</script>
+
+</script>