Styles imported. Components added

components/tree/TreeNode.vue

@@ -0,0 +1,299 @@
+<template>
+    <li :class="containerClass" role="treeitem" :aria-label="label(node)" :aria-selected="selected" :aria-expanded="expanded"
+        :aria-setsize="node.children ? node.children.length : 0" :aria-posinset="index + 1" :aria-level="level">
+        <div :class="contentClass" tabindex="0" role="treeitem" :aria-expanded="expanded"
+            @click="onClick" @keydown="onKeyDown" @touchend="onTouchEnd" :style="node.style">
+            <button type="button" class="p-tree-toggler p-link" @click="toggle" tabindex="-1" v-ripple>
+                <span :class="toggleIcon"></span>
+            </button>
+            <div class="p-checkbox p-component" v-if="checkboxMode">
+                <div :class="checkboxClass" role="checkbox" :aria-checked="checked">
+                    <span :class="checkboxIcon"></span>
+                </div>
+            </div>
+            <span :class="icon"></span>
+            <span class="p-treenode-label">
+                <component :is="templates[node.type]||templates['default']" :node="node" v-if="templates[node.type]||templates['default']"/>
+                <template v-else>{{label(node)}}</template>
+            </span>
+        </div>
+        <ul class="p-treenode-children" role="group" v-if="hasChildren && expanded">
+            <TreeNode v-for="childNode of node.children" :key="childNode.key" :node="childNode" :templates="templates" :level="level + 1"
+                :expandedKeys="expandedKeys" @node-toggle="onChildNodeToggle" @node-click="onChildNodeClick"
+                :selectionMode="selectionMode" :selectionKeys="selectionKeys"
+                @checkbox-change="propagateUp" />
+        </ul>
+    </li>
+</template>
+
+<script>
+import {DomHandler} from 'primevue/utils';
+import Ripple from 'primevue/ripple';
+
+export default {
+    name: 'TreeNode',
+    emits: ['node-toggle', 'node-click', 'checkbox-change'],
+    props: {
+        node: {
+            type: null,
+            default: null
+        },
+        expandedKeys: {
+            type: null,
+            default: null
+        },
+        selectionKeys: {
+            type: null,
+            default: null
+        },
+        selectionMode: {
+            type: String,
+            default: null
+        },
+        templates: {
+            type: null,
+            default: null
+        },
+        level: {
+            type: Number,
+            default: null
+        },
+        index: {
+            type: Number,
+            default: null
+        }
+    },
+    nodeTouched: false,
+    methods: {
+        toggle() {
+            this.$emit('node-toggle', this.node);
+        },
+        label(node) {
+            return (typeof node.label === 'function' ? node.label() : node.label);
+        },
+        onChildNodeToggle(node) {
+            this.$emit('node-toggle', node);
+        },
+        onClick(event) {
+            if (DomHandler.hasClass(event.target, 'p-tree-toggler') || DomHandler.hasClass(event.target.parentElement, 'p-tree-toggler')) {
+                return;
+            }
+
+            if (this.isCheckboxSelectionMode()) {
+                this.toggleCheckbox();
+            }
+            else {
+                this.$emit('node-click', {
+                    originalEvent: event,
+                    nodeTouched: this.nodeTouched,
+                    node: this.node
+                });
+            }
+
+            this.nodeTouched = false;
+        },
+        onChildNodeClick(event) {
+            this.$emit('node-click', event);
+        },
+        onTouchEnd() {
+            this.nodeTouched = true;
+        },
+        onKeyDown(event) {
+            const nodeElement = event.target.parentElement;
+
+            switch (event.code) {
+                case 'ArrowDown':
+                    var listElement = nodeElement.children[1];
+                    if (listElement) {
+                        this.focusNode(listElement.children[0]);
+                    }
+                    else {
+                        const nextNodeElement = nodeElement.nextElementSibling;
+                        if (nextNodeElement) {
+                            this.focusNode(nextNodeElement);
+                        }
+                        else {
+                            let nextSiblingAncestor = this.findNextSiblingOfAncestor(nodeElement);
+                            if (nextSiblingAncestor) {
+                                this.focusNode(nextSiblingAncestor);
+                            }
+                        }
+                    }
+                break;
+
+                case 'ArrowUp':
+                    if (nodeElement.previousElementSibling) {
+                        this.focusNode(this.findLastVisibleDescendant(nodeElement.previousElementSibling));
+                    }
+                    else {
+                        let parentNodeElement = this.getParentNodeElement(nodeElement);
+                        if (parentNodeElement) {
+                            this.focusNode(parentNodeElement);
+                        }
+                    }
+                break;
+
+                case 'ArrowRight':
+                case 'ArrowLeft':
+                    this.$emit('node-toggle', this.node);
+                break;
+
+                case 'Enter':
+                case 'Space':
+                    this.onClick(event);
+                break;
+
+                default:
+                    //no op
+                break;
+            }
+
+            event.preventDefault();
+        },
+        toggleCheckbox() {
+            let _selectionKeys = this.selectionKeys ? {...this.selectionKeys} : {};
+            const _check = !this.checked;
+
+            this.propagateDown(this.node, _check, _selectionKeys);
+
+            this.$emit('checkbox-change', {
+                node: this.node,
+                check: _check,
+                selectionKeys: _selectionKeys
+            });
+        },
+        propagateDown(node, check, selectionKeys) {
+            if (check)
+                selectionKeys[node.key] = {checked: true, partialChecked: false};
+            else
+                delete selectionKeys[node.key];
+
+            if (node.children && node.children.length) {
+                for (let child of node.children) {
+                    this.propagateDown(child, check, selectionKeys);
+                }
+            }
+        },
+        propagateUp(event) {
+            let check = event.check;
+            let _selectionKeys = {...event.selectionKeys};
+            let checkedChildCount = 0;
+            let childPartialSelected = false;
+
+            for (let child of this.node.children) {
+                if(_selectionKeys[child.key] && _selectionKeys[child.key].checked)
+                    checkedChildCount++;
+                else if(_selectionKeys[child.key] && _selectionKeys[child.key].partialChecked)
+                    childPartialSelected = true;
+            }
+
+            if(check && checkedChildCount === this.node.children.length) {
+                _selectionKeys[this.node.key] = {checked: true, partialChecked: false};
+            }
+            else {
+                if (!check) {
+                    delete _selectionKeys[this.node.key];
+                }
+
+                if (childPartialSelected || (checkedChildCount > 0 && checkedChildCount !== this.node.children.length))
+                    _selectionKeys[this.node.key] = {checked: false, partialChecked: true};
+                else
+                    delete _selectionKeys[this.node.key];
+            }
+
+            this.$emit('checkbox-change', {
+                node: event.node,
+                check: event.check,
+                selectionKeys: _selectionKeys
+            });
+        },
+        onChildCheckboxChange(event) {
+            this.$emit('checkbox-change', event);
+        },
+        findNextSiblingOfAncestor(nodeElement) {
+            let parentNodeElement = this.getParentNodeElement(nodeElement);
+            if (parentNodeElement) {
+                if (parentNodeElement.nextElementSibling)
+                    return parentNodeElement.nextElementSibling;
+                else
+                    return this.findNextSiblingOfAncestor(parentNodeElement);
+            }
+            else {
+                return null;
+            }
+        },
+        findLastVisibleDescendant(nodeElement) {
+            const childrenListElement = nodeElement.children[1];
+            if (childrenListElement) {
+                const lastChildElement = childrenListElement.children[childrenListElement.children.length - 1];
+
+                return this.findLastVisibleDescendant(lastChildElement);
+            }
+            else {
+                return nodeElement;
+            }
+        },
+        getParentNodeElement(nodeElement) {
+            const parentNodeElement = nodeElement.parentElement.parentElement;
+
+            return DomHandler.hasClass(parentNodeElement, 'p-treenode') ? parentNodeElement : null;
+        },
+        focusNode(element) {
+            element.children[0].focus();
+        },
+        isCheckboxSelectionMode() {
+            return this.selectionMode === 'checkbox';
+        }
+    },
+    computed: {
+        hasChildren() {
+            return this.node.children && this.node.children.length > 0;
+        },
+        expanded() {
+            return this.expandedKeys && this.expandedKeys[this.node.key] === true;
+        },
+        leaf() {
+            return this.node.leaf === false ? false : !(this.node.children && this.node.children.length);
+        },
+        selectable() {
+            return this.node.selectable === false ? false : this.selectionMode != null;
+        },
+        selected() {
+            return (this.selectionMode && this.selectionKeys) ? this.selectionKeys[this.node.key] === true : false;
+        },
+        containerClass() {
+            return ['p-treenode', {'p-treenode-leaf': this.leaf}];
+        },
+        contentClass() {
+            return ['p-treenode-content', this.node.styleClass, {
+                'p-treenode-selectable': this.selectable,
+                'p-highlight': this.checkboxMode ? this.checked : this.selected
+            }];
+        },
+        icon() {
+            return ['p-treenode-icon', this.node.icon];
+        },
+        toggleIcon() {
+            return ['p-tree-toggler-icon pi pi-fw', this.expanded ? this.node.expandedIcon || 'pi-chevron-down' : this.node.collapsedIcon || 'pi-chevron-right'];
+        },
+        checkboxClass() {
+            return ['p-checkbox-box', {'p-highlight': this.checked, 'p-indeterminate': this.partialChecked}];
+        },
+        checkboxIcon() {
+            return ['p-checkbox-icon', {'pi pi-check': this.checked, 'pi pi-minus': this.partialChecked}];
+        },
+        checkboxMode() {
+            return this.selectionMode === 'checkbox' && this.node.selectable !== false;
+        },
+        checked() {
+            return this.selectionKeys ? this.selectionKeys[this.node.key] && this.selectionKeys[this.node.key].checked: false;
+        },
+        partialChecked() {
+            return this.selectionKeys ? this.selectionKeys[this.node.key] && this.selectionKeys[this.node.key].partialChecked: false;
+        }
+    },
+    directives: {
+        'ripple': Ripple
+    }
+}
+</script>