misp-ui-library-test 0.0.1

package/src/packages/transfer/src/transfer-panel.vue

@@ -0,0 +1,245 @@
+<template>
+  <div class="ui-transfer-panel">
+    <p class="ui-transfer-panel__header">
+      <ui-checkbox
+        v-model="allChecked"
+        @change="handleAllCheckedChange"
+        :indeterminate="isIndeterminate">
+        {{ title }}
+        <span>{{ checkedSummary }}</span>
+      </ui-checkbox>
+    </p>
+
+    <div :class="['ui-transfer-panel__body', hasFooter ? 'is-with-footer' : '']">
+      <ui-input
+        class="ui-transfer-panel__filter"
+        v-model="query"
+        size="small"
+        :placeholder="placeholder"
+        @mouseenter="inputHover = true"
+        @mouseleave="inputHover = false"
+        v-if="filterable">
+        <i slot="prefix"
+          :class="['ui-input__icon', inputIcon]"
+          @click="clearQuery"
+        ></i>
+      </ui-input>
+      <ui-checkbox-group
+        v-model="checked"
+        v-show="!hasNoMatch && data.length > 0"
+        :class="{ 'is-filterable': filterable }"
+        class="ui-transfer-panel__list">
+        <ui-checkbox
+          class="ui-transfer-panel__item"
+          :label="item[keyProp]"
+          :disabled="item[disabledProp]"
+          :key="item[keyProp]"
+          v-for="item in filteredData">
+          <option-content :option="item"></option-content>
+        </ui-checkbox>
+      </ui-checkbox-group>
+      <p
+        class="ui-transfer-panel__empty"
+        v-show="hasNoMatch">{{ noMatchText }}</p>
+      <p
+        class="ui-transfer-panel__empty"
+        v-show="data.length === 0 && !hasNoMatch">{{ noDataText }}</p>
+    </div>
+    <p class="ui-transfer-panel__footer" v-if="hasFooter">
+      <slot></slot>
+    </p>
+  </div>
+</template>
+
+<script>
+  import UiCheckbox from '../../checkbox';
+  import UiInput from '../../input';
+
+  export default {
+    name: 'UiTransferPanel',
+
+    componentName: 'UiTransferPanel',
+
+    components: {
+      UiCheckbox,
+      UiCheckboxGroup: UiCheckbox.Group || UiCheckbox,
+      UiInput
+    },
+
+    props: {
+      data: {
+        type: Array,
+        default() {
+          return [];
+        }
+      },
+      renderContent: Function,
+      placeholder: {
+        type: String,
+        default: '请输入搜索内容'
+      },
+      title: String,
+      filterable: Boolean,
+      format: Object,
+      filterMethod: Function,
+      defaultChecked: Array,
+      props: Object
+    },
+
+    data() {
+      return {
+        checked: [],
+        allChecked: false,
+        query: '',
+        inputHover: false,
+        checkChangeByUser: true
+      };
+    },
+
+    watch: {
+      checked(val, oldVal) {
+        this.updateAllChecked();
+        if (this.checkChangeByUser) {
+          const movedKeys = val.concat(oldVal)
+            .filter(v => val.indexOf(v) === -1 || oldVal.indexOf(v) === -1);
+          this.$emit('checked-change', val, movedKeys);
+        } else {
+          this.$emit('checked-change', val);
+          this.checkChangeByUser = true;
+        }
+      },
+
+      data() {
+        const checked = [];
+        const filteredDataKeys = this.filteredData.map(item => item[this.keyProp]);
+        this.checked.forEach(item => {
+          if (filteredDataKeys.indexOf(item) > -1) {
+            checked.push(item);
+          }
+        });
+        this.checkChangeByUser = false;
+        this.checked = checked;
+      },
+
+      checkableData() {
+        this.updateAllChecked();
+      },
+
+      defaultChecked: {
+        immediate: true,
+        handler(val, oldVal) {
+          if (oldVal && val.length === oldVal.length &&
+            val.every(item => oldVal.indexOf(item) > -1)) return;
+          const checked = [];
+          const checkableDataKeys = this.checkableData.map(item => item[this.keyProp]);
+          val.forEach(item => {
+            if (checkableDataKeys.indexOf(item) > -1) {
+              checked.push(item);
+            }
+          });
+          this.checkChangeByUser = false;
+          this.checked = checked;
+        }
+      }
+    },
+
+    computed: {
+      filteredData() {
+        return this.data.filter(item => {
+          if (typeof this.filterMethod === 'function') {
+            return this.filterMethod(this.query, item);
+          } else {
+            const label = item[this.labelProp] || item[this.keyProp].toString();
+            return label.toLowerCase().indexOf(this.query.toLowerCase()) > -1;
+          }
+        });
+      },
+
+      checkableData() {
+        return this.filteredData.filter(item => !item[this.disabledProp]);
+      },
+
+      checkedSummary() {
+        const checkedLength = this.checked.length;
+        const dataLength = this.data.length;
+        const { noChecked, hasChecked } = this.format;
+        if (noChecked && hasChecked) {
+          return checkedLength > 0
+            ? hasChecked.replace(/\${checked}/g, checkedLength).replace(/\${total}/g, dataLength)
+            : noChecked.replace(/\${total}/g, dataLength);
+        } else {
+          return `${ checkedLength }/${ dataLength }`;
+        }
+      },
+
+      isIndeterminate() {
+        const checkedLength = this.checked.length;
+        return checkedLength > 0 && checkedLength < this.checkableData.length;
+      },
+
+      hasNoMatch() {
+        return this.query.length > 0 && this.filteredData.length === 0;
+      },
+
+      inputIcon() {
+        return this.query.length > 0 && this.inputHover
+          ? 'close'
+          : 'search';
+      },
+
+      labelProp() {
+        return this.props.label || 'label';
+      },
+
+      keyProp() {
+        return this.props.key || 'key';
+      },
+
+      disabledProp() {
+        return this.props.disabled || 'disabled';
+      },
+
+      hasFooter() {
+        return !!this.$slots.default;
+      },
+
+      noMatchText() {
+        return '无匹配数据';
+      },
+
+      noDataText() {
+        return '无数据';
+      }
+    },
+
+    methods: {
+      updateAllChecked() {
+        const checkableDataKeys = this.checkableData.map(item => item[this.keyProp]);
+        this.allChecked = checkableDataKeys.length > 0 &&
+          checkableDataKeys.every(item => this.checked.indexOf(item) > -1);
+      },
+
+      handleAllCheckedChange(value) {
+        this.checked = value
+          ? this.checkableData.map(item => item[this.keyProp])
+          : [];
+      },
+
+      clearQuery() {
+        if (this.inputIcon === 'close') {
+          this.query = '';
+        }
+      },
+
+      getParent(vm) {
+        if (vm.$options.componentName === 'UiTransferPanel') {
+          return vm;
+        } else if (vm.$parent) {
+          return this.getParent(vm.$parent);
+        } else {
+          return vm;
+        }
+      }
+    }
+  };
+</script>

package/src/packages/transitions/collapse-transition.js

@@ -0,0 +1,75 @@
+import { addClass, removeClass } from '../../utils/dom/index';
+
+const Transition = {
+  'before-enter'(el) {
+    addClass(el, 'collapse-transition');
+    if (!el.dataset) el.dataset = {};
+
+    el.dataset.oldPaddingTop = el.style.paddingTop;
+    el.dataset.oldPaddingBottom = el.style.paddingBottom;
+
+    el.style.height = '0';
+    el.style.paddingTop = 0;
+    el.style.paddingBottom = 0;
+  },
+
+  'enter'(el) {
+    el.dataset.oldOverflow = el.style.overflow;
+    if (el.scrollHeight !== 0) {
+      el.style.height = el.scrollHeight + 'px';
+      el.style.paddingTop = el.dataset.oldPaddingTop;
+      el.style.paddingBottom = el.dataset.oldPaddingBottom;
+    } else {
+      el.style.height = '';
+      el.style.paddingTop = el.dataset.oldPaddingTop;
+      el.style.paddingBottom = el.dataset.oldPaddingBottom;
+    }
+
+    el.style.overflow = 'hidden';
+  },
+
+  'after-enter'(el) {
+    removeClass(el, 'collapse-transition');
+    el.style.height = '';
+    el.style.overflow = el.dataset.oldOverflow;
+  },
+
+  'before-leave'(el) {
+    if (!el.dataset) el.dataset = {};
+    el.dataset.oldPaddingTop = el.style.paddingTop;
+    el.dataset.oldPaddingBottom = el.style.paddingBottom;
+    el.dataset.oldOverflow = el.style.overflow;
+
+    el.style.height = el.scrollHeight + 'px';
+    el.style.overflow = 'hidden';
+  },
+
+  'leave'(el) {
+    if (el.scrollHeight !== 0) {
+      addClass(el, 'collapse-transition');
+      el.style.height = 0;
+      el.style.paddingTop = 0;
+      el.style.paddingBottom = 0;
+    }
+  },
+
+  'after-leave'(el) {
+    removeClass(el, 'collapse-transition');
+    el.style.height = '';
+    el.style.overflow = el.dataset.oldOverflow;
+    el.style.paddingTop = el.dataset.oldPaddingTop;
+    el.style.paddingBottom = el.dataset.oldPaddingBottom;
+  }
+};
+
+export default {
+  name: 'CollapseTransition',
+  functional: true,
+  render(h, { children }) {
+    const data = {
+      on: Transition
+    };
+
+    return h('transition', data, children);
+  }
+};

package/src/packages/tree/index.js

@@ -0,0 +1,12 @@
+/**
+ * Tree 树形控件
+ */
+
+import UiTree from './src/main.vue'
+
+// 自动安装
+UiTree.install = function(Vue) {
+  Vue.component(UiTree.name, UiTree)
+}
+
+export default UiTree

package/src/packages/tree/src/main.vue

@@ -0,0 +1,322 @@
+<template>
+  <div
+    class="ui-tree"
+    :class="{
+      'ui-tree--highlight-current': highlightCurrent,
+      'is-dragging': !!dragState.draggingNode,
+      'is-drop-not-allow': !dragState.allowDrop,
+      'is-drop-inner': dragState.dropType === 'inner'
+    }"
+    role="tree"
+  >
+    <ui-tree-node
+      v-for="child in root.childNodes"
+      :node="child"
+      :props="props"
+      :render-after-expand="renderAfterExpand"
+      :show-checkbox="showCheckbox"
+      :key="getNodeKey(child)"
+      :render-content="renderContent"
+      @node-expand="handleNodeExpand"
+    >
+    </ui-tree-node>
+    <div v-if="isEmpty" class="ui-tree__empty-block">
+      <span class="ui-tree__empty-text">{{ emptyText }}</span>
+    </div>
+    <div
+      v-show="dragState.showDropIndicator"
+      class="ui-tree__drop-indicator"
+      ref="dropIndicator"
+    >
+    </div>
+  </div>
+</template>
+
+<script>
+import TreeStore from './model/tree-store';
+import UiTreeNode from './tree-node.vue';
+import emitter from '../../../mixins/emitter';
+import locale, { t } from '../../../mixins/locale';
+
+export default {
+  name: 'UiTree',
+
+  mixins: [emitter, locale],
+
+  components: {
+    UiTreeNode
+  },
+
+  props: {
+    data: {
+      type: Array
+    },
+    emptyText: {
+      type: String,
+      default() {
+        return t('components.tree.emptyText') || '暂无数据';
+      }
+    },
+    renderAfterExpand: {
+      type: Boolean,
+      default: true
+    },
+    nodeKey: String,
+    checkStrictly: Boolean,
+    defaultExpandAll: Boolean,
+    expandOnClickNode: {
+      type: Boolean,
+      default: true
+    },
+    checkOnClickNode: Boolean,
+    checkDescendants: {
+      type: Boolean,
+      default: false
+    },
+    autoExpandParent: {
+      type: Boolean,
+      default: true
+    },
+    defaultExpandedKeys: Array,
+    showCheckbox: {
+      type: Boolean,
+      default: false
+    },
+    draggable: {
+      type: Boolean,
+      default: false
+    },
+    allowDrag: Function,
+    allowDrop: Function,
+    props: {
+      default() {
+        return {
+          children: 'children',
+          label: 'label',
+          disabled: 'disabled'
+        };
+      }
+    },
+    lazy: {
+      type: Boolean,
+      default: false
+    },
+    highlightCurrent: Boolean,
+    load: Function,
+    filterNodeMethod: Function,
+    accordion: Boolean,
+    indent: {
+      type: Number,
+      default: 18
+    },
+    iconClass: String,
+    defaultCheckedKeys: Array,
+    renderContent: Function
+  },
+
+  data() {
+    return {
+      store: null,
+      root: null,
+      currentNode: null,
+      treeItems: null,
+      checkboxItems: [],
+      dragState: {
+        showDropIndicator: false,
+        draggingNode: null,
+        dropNode: null,
+        allowDrop: true,
+        dropType: null
+      }
+    };
+  },
+
+  computed: {
+    children: {
+      get() {
+        return this.data;
+      }
+    },
+
+    isEmpty() {
+      const { childNodes } = this.root;
+      return !childNodes || childNodes.length === 0 || childNodes.every(({visible}) => !visible);
+    }
+  },
+
+  watch: {
+    defaultCheckedKeys(newVal) {
+      this.store.defaultCheckedKeys = newVal;
+      this.store.setCheckedKeys(newVal);
+    },
+
+    defaultExpandedKeys(newVal) {
+      this.store.defaultExpandedKeys = newVal;
+      this.store.setDefaultExpandedKeys(newVal);
+    },
+
+    data(newVal) {
+      this.store.setData(newVal);
+    },
+
+    checkboxItems(val) {
+      if (val && val.length > 0) {
+        this.checkboxItems = [];
+      }
+    },
+
+    checkStrictly(newVal) {
+      this.store.checkStrictly = newVal;
+    }
+  },
+
+  methods: {
+    filter(value) {
+      if (!this.filterNodeMethod) throw new Error('[Tree] filterNodeMethod is required when filter');
+      this.store.filter(value);
+    },
+
+    getNodeKey(node) {
+      return node.data[this.nodeKey || 'id'] || node.id;
+    },
+
+    getNodePath(data) {
+      if (!this.nodeKey) throw new Error('[Tree] nodeKey is required in getNodePath');
+      const node = this.store.getNode(data);
+      if (!node) return [];
+      const path = [];
+      let parent = node;
+      while (parent && parent.level > 0) {
+        path.push(parent.data);
+        parent = parent.parent;
+      }
+      return path.reverse();
+    },
+
+    getCheckedNodes(leafOnly, includeHalfChecked) {
+      return this.store.getCheckedNodes(leafOnly, includeHalfChecked);
+    },
+
+    getCheckedKeys(leafOnly) {
+      return this.store.getCheckedKeys(leafOnly);
+    },
+
+    getCurrentNode() {
+      const currentNode = this.store.getCurrentNode();
+      return currentNode ? currentNode.data : null;
+    },
+
+    getCurrentKey() {
+      if (!this.nodeKey) throw new Error('[Tree] nodeKey is required in getCurrentKey');
+      const currentNode = this.getCurrentNode();
+      return currentNode ? currentNode[this.nodeKey] : null;
+    },
+
+    setCheckedNodes(nodes, leafOnly) {
+      if (!this.nodeKey) throw new Error('[Tree] nodeKey is required in setCheckedNodes');
+      this.store.setCheckedNodes(nodes, leafOnly);
+    },
+
+    setCheckedKeys(keys, leafOnly) {
+      if (!this.nodeKey) throw new Error('[Tree] nodeKey is required in setCheckedKeys');
+      this.store.setCheckedKeys(keys, leafOnly);
+    },
+
+    setChecked(data, checked, deep) {
+      this.store.setChecked(data, checked, deep);
+    },
+
+    getHalfCheckedNodes() {
+      return this.store.getHalfCheckedNodes();
+    },
+
+    getHalfCheckedKeys() {
+      return this.store.getHalfCheckedKeys();
+    },
+
+    setCurrentNode(node) {
+      if (!this.nodeKey) throw new Error('[Tree] nodeKey is required in setCurrentNode');
+      this.store.setUserCurrentNode(node);
+    },
+
+    setCurrentKey(key) {
+      if (!this.nodeKey) throw new Error('[Tree] nodeKey is required in setCurrentKey');
+      this.store.setCurrentNodeKey(key);
+    },
+
+    getNode(data) {
+      return this.store.getNode(data);
+    },
+
+    remove(data) {
+      this.store.remove(data);
+    },
+
+    append(data, parentNode) {
+      this.store.append(data, parentNode);
+    },
+
+    insertBefore(data, refNode) {
+      this.store.insertBefore(data, refNode);
+    },
+
+    insertAfter(data, refNode) {
+      this.store.insertAfter(data, refNode);
+    },
+
+    handleNodeExpand(nodeData, node, instance) {
+      this.broadcast('UiTreeNode', 'tree-node-expand', node);
+      this.$emit('node-expand', nodeData, node, instance);
+    },
+
+    updateKeyChildren(key, data) {
+      if (!this.nodeKey) throw new Error('[Tree] nodeKey is required in updateKeyChild');
+      this.store.updateKeyChildren(key, data);
+    },
+
+    initTabIndex() {
+      this.treeItems = this.$el.querySelectorAll('[role=treeitem]');
+      this.checkboxItems = this.$el.querySelectorAll('input[type=checkbox]');
+      const checkedItem = this.$el.querySelectorAll('.is-current[role=treeitem]');
+      if (checkedItem.length) {
+        checkedItem[0].setAttribute('tabindex', '0');
+        return;
+      }
+      if (this.treeItems[0]) {
+        this.treeItems[0].setAttribute('tabindex', '0');
+      }
+    }
+  },
+
+  created() {
+    this.isTree = true;
+
+    this.store = new TreeStore({
+      key: this.nodeKey,
+      data: this.data,
+      lazy: this.lazy,
+      props: this.props,
+      load: this.load,
+      currentNodeKey: this.currentNodeKey,
+      checkStrictly: this.checkStrictly,
+      checkDescendants: this.checkDescendants,
+      defaultCheckedKeys: this.defaultCheckedKeys,
+      defaultExpandedKeys: this.defaultExpandedKeys,
+      autoExpandParent: this.autoExpandParent,
+      defaultExpandAll: this.defaultExpandAll,
+      filterNodeMethod: this.filterNodeMethod
+    });
+
+    this.root = this.store.root;
+  },
+
+  mounted() {
+    this.initTabIndex();
+  },
+
+  updated() {
+    this.treeItems = this.$el.querySelectorAll('[role=treeitem]');
+    this.checkboxItems = this.$el.querySelectorAll('input[type=checkbox]');
+  }
+};
+</script>