md-iview 1.0.12

package/src/components/md-tree/node.vue

@@ -0,0 +1,238 @@
+<template>
+    <collapse-transition :appear="appear">
+        <ul :class="classes" :draggable="draggable"
+            @dragover="allowDrop($event)"
+            @dragstart="handleDrag($event,data)"
+            @drop="handleDrop($event,data)">
+            <li>
+                <span :class="arrowClasses" @click="handleExpand">
+                    <Icon v-if="showArrow" :type="arrowType" :custom="customArrowType" :size="arrowSize"/>
+                    <Icon v-if="showLoading" type="ios-loading" class="ivu-load-loop"/>
+                </span>
+                <Checkbox
+                        v-if="showCheckbox"
+                        :value="data.checked"
+                        :indeterminate="data.indeterminate"
+                        :disabled="data.disabled || data.disableCheckbox"
+                        @click.native.prevent="handleCheck"></Checkbox>
+                <Render v-if="data.render" :render="data.render" :data="data" :node="node"></Render>
+                <Render v-else-if="isParentRender" :render="parentRender" :data="data" :node="node"></Render>
+                <span v-else :class="titleClasses" @click="handleSelect">{{ data.title }}</span>
+                <Tree-node
+                        v-if="data.expand"
+                        :appear="appearByClickArrow"
+                        v-for="(item, i) in children"
+                        :key="i"
+                        :data="item"
+                        :multiple="multiple"
+                        :show-checkbox="showCheckbox"
+                        :children-key="childrenKey"
+                >
+                </Tree-node>
+            </li>
+        </ul>
+    </collapse-transition>
+</template>
+<script>
+  /*    import Checkbox from '../checkbox/checkbox.vue';
+      import Icon from '../icon/icon.vue';*/
+  import Render from './render';
+  // import CollapseTransition from '../base/collapse-transition';
+  import CollapseTransition from 'iview/src/components/base/collapse-transition'
+  import Emitter from 'iview/src/mixins/emitter';
+  import {findComponentUpward} from 'iview/src/utils/assist';
+
+  const prefixCls = 'ivu-tree';
+
+  export default {
+    name: 'TreeNode',
+    mixins: [Emitter],
+    inject: ['TreeInstance', 'draggable'],
+    // components: { Checkbox, Icon, CollapseTransition, Render },
+    components: {CollapseTransition, Render},
+    props: {
+      data: {
+        type: Object,
+        default() {
+          return {};
+        }
+      },
+      multiple: {
+        type: Boolean,
+        default: false
+      },
+      childrenKey: {
+        type: String,
+        default: 'children'
+      },
+      showCheckbox: {
+        type: Boolean,
+        default: false
+      },
+      appear: {
+        type: Boolean,
+        default: false
+      }
+    },
+    data() {
+      return {
+        prefixCls: prefixCls,
+        appearByClickArrow: false
+      };
+    },
+    computed: {
+      classes() {
+        return [
+          `${prefixCls}-children`
+        ];
+      },
+      selectedCls() {
+        return [
+          {
+            [`${prefixCls}-node-selected`]: this.data.selected
+          }
+        ];
+      },
+      arrowClasses() {
+        return [
+          `${prefixCls}-arrow`,
+          {
+            [`${prefixCls}-arrow-disabled`]: this.data.disabled,
+            [`${prefixCls}-arrow-open`]: this.data.expand
+          }
+        ];
+      },
+      titleClasses() {
+        return [
+          `${prefixCls}-title`,
+          {
+            [`${prefixCls}-title-selected`]: this.data.selected
+          }
+        ];
+      },
+      showArrow() {
+        return (this.data[this.childrenKey] && this.data[this.childrenKey].length) || ('loading' in this.data && !this.data.loading);
+      },
+      showLoading() {
+        return 'loading' in this.data && this.data.loading;
+      },
+      isParentRender() {
+        const Tree = findComponentUpward(this, 'Tree');
+        return Tree && Tree.render;
+      },
+      parentRender() {
+        const Tree = findComponentUpward(this, 'Tree');
+        if (Tree && Tree.render) {
+          return Tree.render;
+        } else {
+          return null;
+        }
+      },
+      node() {
+        const Tree = findComponentUpward(this, 'Tree');
+        if (Tree) {
+          // 将所有的 node（即flatState）和当前 node 都传递
+          return [Tree.flatState, Tree.flatState.find(item => item.nodeKey === this.data.nodeKey)];
+        } else {
+          return [];
+        }
+      },
+      children() {
+        return this.data[this.childrenKey];
+      },
+      // 3.4.0, global setting customArrow 有值时，arrow 赋值空
+      arrowType() {
+        let type = 'ios-arrow-forward';
+
+        if (this.$IVIEW) {
+          if (this.$IVIEW.tree.customArrow) {
+            type = '';
+          } else if (this.$IVIEW.tree.arrow) {
+            type = this.$IVIEW.tree.arrow;
+          }
+        }
+        return type;
+      },
+      // 3.4.0, global setting
+      customArrowType() {
+        let type = '';
+
+        if (this.$IVIEW) {
+          if (this.$IVIEW.tree.customArrow) {
+            type = this.$IVIEW.tree.customArrow;
+          }
+        }
+        return type;
+      },
+      // 3.4.0, global setting
+      arrowSize() {
+        let size = '';
+
+        if (this.$IVIEW) {
+          if (this.$IVIEW.tree.arrowSize) {
+            size = this.$IVIEW.tree.arrowSize;
+          }
+        }
+        return size;
+      }
+    },
+    methods: {
+      allowDrop (e) {
+        e.preventDefault()
+      },
+      handleDrag(e, item) {
+        e.dataTransfer.setData('nodeKey', item.nodeKey);
+        e.stopPropagation()
+      },
+      handleDrop(e, item) {
+        const dragKey = parseInt(e.dataTransfer.getData('nodeKey'));
+        this.TreeInstance.dragAndDrop(item, dragKey, item.nodeKey);
+        e.stopPropagation();
+      },
+      handleExpand() {
+        const item = this.data;
+        if (item.disabled) return;
+
+        // Vue.js 2.6.9 对 transition 的 appear 进行了调整，导致 iView 初始化时无动画，加此方法来判断通过点击箭头展开时，加 appear，否则初始渲染时 appear 为 false
+        this.appearByClickArrow = true;
+
+        // async loading
+        if (item[this.childrenKey].length === 0) {
+          const tree = findComponentUpward(this, 'Tree');
+          if (tree && tree.loadData) {
+            this.$set(this.data, 'loading', true);
+            tree.loadData(item, children => {
+              this.$set(this.data, 'loading', false);
+              if (children.length) {
+                this.$set(this.data, this.childrenKey, children);
+                this.$nextTick(() => this.handleExpand());
+              }
+            });
+            return;
+          }
+        }
+
+        if (item[this.childrenKey] && item[this.childrenKey].length) {
+          this.$set(this.data, 'expand', !this.data.expand);
+          this.dispatch('Tree', 'toggle-expand', this.data);
+        }
+      },
+      handleSelect() {
+        if (this.data.disabled) return;
+        if (this.TreeInstance.showCheckbox && this.TreeInstance.checkDirectly) {
+          this.handleCheck();
+        } else {
+          this.dispatch('Tree', 'on-selected', this.data.nodeKey);
+        }
+      },
+      handleCheck() {
+        if (this.data.disabled) return;
+        const changes = {
+          checked: !this.data.checked && !this.data.indeterminate,
+          nodeKey: this.data.nodeKey
+        };
+        this.dispatch('Tree', 'on-check', changes);
+      }
+    }
+  };
+</script>

package/src/components/md-tree/render.js

@@ -0,0 +1,17 @@
+export default {
+    name: 'RenderCell',
+    functional: true,
+    props: {
+        render: Function,
+        data: Object,
+        node: Array
+    },
+    render: (h, ctx) => {
+        const params = {
+            root: ctx.props.node[0],
+            node: ctx.props.node[1],
+            data: ctx.props.data
+        };
+        return ctx.props.render(h, params);
+    }
+};

package/src/components/md-tree/tree.vue

@@ -0,0 +1,241 @@
+<template>
+    <div :class="prefixCls">
+        <Tree-node
+                v-for="(item, i) in stateTree"
+                :key="i"
+                :data="item"
+                visible
+                :multiple="multiple"
+                :show-checkbox="showCheckbox"
+                :children-key="childrenKey"
+        >
+        </Tree-node>
+        <div :class="[prefixCls + '-empty']" v-if="!stateTree.length">{{ localeEmptyText }}</div>
+    </div>
+</template>
+<script>
+  import TreeNode from './node.vue';
+  import Emitter from 'iview/src/mixins/emitter';
+  import Locale from 'iview/src/mixins/locale';
+
+  const prefixCls = 'ivu-tree';
+
+  export default {
+    name: 'Tree',
+    mixins: [Emitter, Locale],
+    components: {TreeNode},
+    provide() {
+      return {TreeInstance: this, draggable: this.draggable};
+    },
+    props: {
+      draggable: {
+        type: Boolean,
+        default: false
+      },
+      allowGetParentNode: {
+        type: Boolean,
+        default: false
+      },
+      data: {
+        type: Array,
+        default() {
+          return [];
+        }
+      },
+      multiple: {
+        type: Boolean,
+        default: false
+      },
+      showCheckbox: {
+        type: Boolean,
+        default: false
+      },
+      checkStrictly: {
+        type: Boolean,
+        default: false
+      },
+      // 当开启 showCheckbox 时，如果开启 checkDirectly，select 将强制转为 check 事件
+      checkDirectly: {
+        type: Boolean,
+        default: false
+      },
+      emptyText: {
+        type: String
+      },
+      childrenKey: {
+        type: String,
+        default: 'children'
+      },
+      loadData: {
+        type: Function
+      },
+      render: {
+        type: Function
+      },
+
+    },
+    data() {
+      return {
+        prefixCls: prefixCls,
+        stateTree: this.data,
+        flatState: [],
+      };
+    },
+    watch: {
+      data: {
+        deep: true,
+        handler() {
+          this.stateTree = this.data;
+          this.flatState = this.compileFlatState();
+          this.rebuildTree();
+        }
+      }
+    },
+    computed: {
+      localeEmptyText() {
+        if (typeof this.emptyText === 'undefined') {
+          return this.t('i.tree.emptyText');
+        } else {
+          return this.emptyText;
+        }
+      },
+    },
+    methods: {
+      dragAndDrop(item, dragKey, dropKey) {
+        let dragNode = JSON.parse(JSON.stringify(this.flatState[dragKey]));
+        if (item[this.childrenKey] && item[this.childrenKey].length) {
+          dragNode.parent = item.nodeKey;
+        }
+        let childrenKey = this.childrenKey;
+        let flattenChildren = (node, /*parent*/) =>{
+          if (node[childrenKey]) {
+            node[childrenKey] = node[childrenKey].filter(child => child.nodeKey !== dragKey)
+            if(node[childrenKey].length<=0) {
+              this.$delete(node, 'expand');
+            }
+            node[childrenKey].forEach(child => flattenChildren(child, node));
+          }
+        }
+        this.stateTree.forEach(rootNode => {
+          flattenChildren(rootNode);
+        });
+        console.log(this.stateTree);
+        item[this.childrenKey] = item[this.childrenKey]||[]
+        item[this.childrenKey].push(dragNode.node);
+        this.$set(item, 'expand', true);
+
+        this.$emit('on-drag-drop', dragKey, dropKey);
+      },
+      compileFlatState() { // so we have always a relation parent/children of each node
+        let keyCounter = 0;
+        let childrenKey = this.childrenKey;
+        const flatTree = [];
+
+        function flattenChildren(node, parent) {
+          node.nodeKey = keyCounter++;
+          flatTree[node.nodeKey] = {node: node, nodeKey: node.nodeKey};
+          if (typeof parent != 'undefined') {
+            flatTree[node.nodeKey].parent = parent.nodeKey;
+            flatTree[parent.nodeKey][childrenKey].push(node.nodeKey);
+          }
+
+          if (node[childrenKey]) {
+            flatTree[node.nodeKey][childrenKey] = [];
+            node[childrenKey].forEach(child => flattenChildren(child, node));
+          }
+        }
+
+        this.stateTree.forEach(rootNode => {
+          flattenChildren(rootNode);
+        });
+        return flatTree;
+      },
+      updateTreeUp(nodeKey) {
+        const parentKey = this.flatState[nodeKey].parent;
+        if (typeof parentKey == 'undefined' || this.checkStrictly) return;
+
+        const node = this.flatState[nodeKey].node;
+        const parent = this.flatState[parentKey].node;
+        if (node.checked == parent.checked && node.indeterminate == parent.indeterminate) return; // no need to update upwards
+
+        if (node.checked == true) {
+          this.$set(parent, 'checked', parent[this.childrenKey].every(node => node.checked));
+          this.$set(parent, 'indeterminate', !parent.checked);
+        } else {
+          this.$set(parent, 'checked', false);
+          this.$set(parent, 'indeterminate', parent[this.childrenKey].some(node => node.checked || node.indeterminate));
+        }
+        this.updateTreeUp(parentKey);
+      },
+      rebuildTree() { // only called when `data` prop changes
+        const checkedNodes = this.getCheckedNodes();
+        checkedNodes.forEach(node => {
+          this.updateTreeDown(node, {checked: true});
+          // propagate upwards
+          const parentKey = this.flatState[node.nodeKey].parent;
+          if (!parentKey && parentKey !== 0) return;
+          const parent = this.flatState[parentKey].node;
+          const childHasCheckSetter = typeof node.checked != 'undefined' && node.checked;
+          if (childHasCheckSetter && parent.checked != node.checked) {
+            this.updateTreeUp(node.nodeKey); // update tree upwards
+          }
+        });
+      },
+
+      getSelectedNodes() {
+        /* public API */
+        return this.flatState.filter(obj => obj.node.selected).map(obj => obj.node);
+      },
+      getCheckedNodes() {
+        /* public API */
+        return this.flatState.filter(obj => obj.node.checked).map(obj => obj.node);
+      },
+      getCheckedAndIndeterminateNodes() {
+        /* public API */
+        return this.flatState.filter(obj => (obj.node.checked || obj.node.indeterminate)).map(obj => obj.node);
+      },
+      updateTreeDown(node, changes = {}) {
+        if (this.checkStrictly) return;
+
+        for (let key in changes) {
+          this.$set(node, key, changes[key]);
+        }
+        if (node[this.childrenKey]) {
+          node[this.childrenKey].forEach(child => {
+            this.updateTreeDown(child, changes);
+          });
+        }
+      },
+      handleSelect(nodeKey) {
+        const node = this.flatState[nodeKey].node;
+        if (!this.multiple) { // reset previously selected node
+          const currentSelectedKey = this.flatState.findIndex(obj => obj.node.selected);
+          if (currentSelectedKey >= 0 && currentSelectedKey !== nodeKey) this.$set(this.flatState[currentSelectedKey].node, 'selected', false);
+        }
+        this.$set(node, 'selected', !node.selected);
+
+        this.$emit('on-select-change', this.getSelectedNodes(), node);
+      },
+      handleCheck({checked, nodeKey}) {
+        const node = this.flatState[nodeKey].node;
+        this.$set(node, 'checked', checked);
+        this.$set(node, 'indeterminate', false);
+
+        this.updateTreeUp(nodeKey); // propagate up
+        this.updateTreeDown(node, {checked, indeterminate: false}); // reset `indeterminate` when going down
+
+        this.$emit('on-check-change', this.getCheckedNodes(), node);
+      }
+    },
+    created() {
+      this.flatState = this.compileFlatState();
+      this.rebuildTree();
+      // console.log(this.stateTree);
+    },
+    mounted() {
+      this.$on('on-check', this.handleCheck);
+      this.$on('on-selected', this.handleSelect);
+      this.$on('toggle-expand', node => this.$emit('on-toggle-expand', node));
+    }
+  };
+</script>

package/src/components/utilities/can.js

@@ -0,0 +1,35 @@
+export default {
+  name: 'Can',
+  functional: true,
+  props: {
+    I: String,
+    a: [String, Array, Object],
+    of: [String, Array, Object],
+    not: Boolean,
+  },
+  watch:{
+    of(to) {
+      this.can(this.I, to, this.not)
+    },
+    I(to) {
+      this.can(to, this.of || this.a, this.not)
+    },
+  },
+  render(h, { props, children, parent, data }) {
+    const action = props.I;
+    const subject = props.of || props.a;
+
+    if (!action) {
+      throw new Error('[Vue Can]: neither `I` nor `do` property exist');
+    }
+    if (!subject) {
+      throw new Error('[Vue Can]: neither `of` nor `a` nor `this` nor `on` property exist');
+    }
+    const hasAction = (action, subject)=>{
+      return action === subject || Array.isArray(subject) && subject.indexOf(action) !== -1;
+    }
+    const allowed = !!(props.not ^ hasAction(action, subject));
+
+    return allowed ? children : null;
+  },
+};

package/src/directives/index.js

@@ -0,0 +1,34 @@
+import Resize from './resize'
+import Scroll from './scroll'
+import Margin from './style/margin'
+import Padding from './style/padding'
+import Width from './style/width'
+import Height from './style/height'
+import LineHeight from './style/lineHeight'
+import Color from './style/color'
+import BgColor from './style/bg-color'
+import Opacity from './style/opacity'
+import FontSize from './style/font-size'
+
+
+
+export {
+  Resize,
+  Scroll,
+  Width,
+  Height
+}
+
+export default {
+  Resize,
+  Scroll,
+  Margin,
+  Padding,
+  Width,
+  Height,
+  LineHeight,
+  Color,
+  FontSize,
+  BgColor,
+  Opacity
+}

package/src/directives/resize.js

@@ -0,0 +1,27 @@
+function inserted(el, binding) {
+    const callback = binding.value
+    const options = binding.options || { passive: true }
+
+    window.addEventListener('resize', callback, options)
+    el._onResize = {
+        callback,
+        options
+    }
+
+    if (!binding.modifiers || !binding.modifiers.quiet) {
+        callback()
+    }
+}
+
+function unbind(el) {
+    if (!el._onResize) return
+
+    const { callback, options } = el._onResize
+    window.removeEventListener('resize', callback, options)
+    delete el._onResize
+}
+
+export default {
+    inserted,
+    unbind
+}

package/src/directives/scroll.js

@@ -0,0 +1,27 @@
+function inserted(el, binding) {
+  const callback = binding.value;
+  const options = binding.options || { passive: true };
+  const target = binding.arg ? document.querySelector(binding.arg) : window;
+  if (!target) return;
+
+  target.addEventListener('scroll', callback, options);
+
+  el._onScroll = {
+    callback,
+    options,
+    target
+  }
+}
+
+function unbind(el) {
+  if (!el._onScroll) return;
+
+  const { callback, options, target } = el._onScroll;
+  target.removeEventListener('scroll', callback, options);
+  delete el._onScroll
+}
+
+export default {
+  inserted,
+  unbind
+}

package/src/directives/style/bg-color.js

@@ -0,0 +1,23 @@
+function bind(el, binding, vnode) {
+  const callback = binding.value;
+  const options = binding.options || { passive: true};
+  const target = binding.arg
+
+  el.style.backgroundColor = callback;
+  el._bgColor = {
+    callback,
+    options,
+    target
+  }
+}
+
+
+function unbind(el) {
+  if (!el._bgColor) return;
+  delete el._bgColor
+}
+
+export default {
+  bind,
+  unbind
+}

package/src/directives/style/color.js

@@ -0,0 +1,23 @@
+function bind(el, binding, vnode) {
+  const callback = binding.value;
+  const options = binding.options || { passive: true};
+  const target = binding.arg
+
+  el.style.color = callback;
+  el._color = {
+    callback,
+    options,
+    target
+  }
+}
+
+
+function unbind(el) {
+  if (!el._color) return;
+  delete el._color
+}
+
+export default {
+  bind,
+  unbind
+}

package/src/directives/style/font-size.js

@@ -0,0 +1,23 @@
+function bind(el, binding, vnode) {
+  const callback = binding.value;
+  const options = binding.options || { passive: true};
+  const target = binding.arg
+
+  el.style.fontSize = callback;
+  el._fontSize = {
+    callback,
+    options,
+    target
+  }
+}
+
+
+function unbind(el) {
+  if (!el._fontSize) return;
+  delete el._fontSize
+}
+
+export default {
+  bind,
+  unbind
+}