mirror of
https://github.com/primefaces/primevue.git
synced 2025-05-09 08:52:34 +00:00
Fixed #3802 - Improve folder structure for nuxt configurations
This commit is contained in:
mertsincan
parent
851950270b
commit
f5fe822afb
563 changed files with 1703 additions and 1095 deletions
440
components/lib/tree/TreeNode.vue
Executable file
440
components/lib/tree/TreeNode.vue
Executable file
|
|
@ -0,0 +1,440 @@
|
|||
<template>
|
||||
<li
|
||||
ref="currentNode"
|
||||
:class="containerClass"
|
||||
role="treeitem"
|
||||
:aria-label="label(node)"
|
||||
:aria-selected="ariaSelected"
|
||||
:aria-expanded="expanded"
|
||||
:aria-setsize="node.children ? node.children.length : 0"
|
||||
:aria-posinset="index + 1"
|
||||
:aria-level="level"
|
||||
:aria-checked="ariaChecked"
|
||||
:tabindex="index === 0 ? 0 : -1"
|
||||
@keydown="onKeyDown"
|
||||
>
|
||||
<div :class="contentClass" @click="onClick" @touchend="onTouchEnd" :style="node.style">
|
||||
<button v-ripple type="button" class="p-tree-toggler p-link" @click="toggle" tabindex="-1" aria-hidden="true">
|
||||
<span :class="toggleIcon"></span>
|
||||
</button>
|
||||
<div v-if="checkboxMode" class="p-checkbox p-component" aria-hidden="true">
|
||||
<div :class="checkboxClass" role="checkbox">
|
||||
<span :class="checkboxIcon"></span>
|
||||
</div>
|
||||
</div>
|
||||
<span :class="icon"></span>
|
||||
<span class="p-treenode-label">
|
||||
<component v-if="templates[node.type] || templates['default']" :is="templates[node.type] || templates['default']" :node="node" />
|
||||
<template v-else>{{ label(node) }}</template>
|
||||
</span>
|
||||
</div>
|
||||
<ul v-if="hasChildren && expanded" class="p-treenode-children" role="group">
|
||||
<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 Ripple from 'primevue/ripple';
|
||||
import { DomHandler } from 'primevue/utils';
|
||||
|
||||
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,
|
||||
mounted() {
|
||||
const hasTreeSelectParent = this.$refs.currentNode.closest('.p-treeselect-items-wrapper');
|
||||
|
||||
if (hasTreeSelectParent) {
|
||||
this.setAllNodesTabIndexes();
|
||||
}
|
||||
},
|
||||
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) {
|
||||
if (!this.isSameNode(event)) return;
|
||||
|
||||
switch (event.code) {
|
||||
case 'Tab':
|
||||
this.onTabKey(event);
|
||||
|
||||
break;
|
||||
|
||||
case 'ArrowDown':
|
||||
this.onArrowDown(event);
|
||||
|
||||
break;
|
||||
|
||||
case 'ArrowUp':
|
||||
this.onArrowUp(event);
|
||||
|
||||
break;
|
||||
|
||||
case 'ArrowRight':
|
||||
this.onArrowRight(event);
|
||||
|
||||
break;
|
||||
|
||||
case 'ArrowLeft':
|
||||
this.onArrowLeft(event);
|
||||
|
||||
break;
|
||||
|
||||
case 'Enter':
|
||||
case 'Space':
|
||||
this.onEnterKey(event);
|
||||
|
||||
break;
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
},
|
||||
onArrowDown(event) {
|
||||
const nodeElement = event.target;
|
||||
const listElement = nodeElement.children[1];
|
||||
|
||||
if (listElement) {
|
||||
this.focusRowChange(nodeElement, listElement.children[0]);
|
||||
} else {
|
||||
if (nodeElement.nextElementSibling) {
|
||||
this.focusRowChange(nodeElement, nodeElement.nextElementSibling);
|
||||
} else {
|
||||
let nextSiblingAncestor = this.findNextSiblingOfAncestor(nodeElement);
|
||||
|
||||
if (nextSiblingAncestor) {
|
||||
this.focusRowChange(nodeElement, nextSiblingAncestor);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
event.preventDefault();
|
||||
},
|
||||
onArrowUp(event) {
|
||||
const nodeElement = event.target;
|
||||
|
||||
if (nodeElement.previousElementSibling) {
|
||||
this.focusRowChange(nodeElement, nodeElement.previousElementSibling, this.findLastVisibleDescendant(nodeElement.previousElementSibling));
|
||||
} else {
|
||||
let parentNodeElement = this.getParentNodeElement(nodeElement);
|
||||
|
||||
if (parentNodeElement) {
|
||||
this.focusRowChange(nodeElement, parentNodeElement);
|
||||
}
|
||||
}
|
||||
|
||||
event.preventDefault();
|
||||
},
|
||||
onArrowRight(event) {
|
||||
if (this.leaf || this.expanded) return;
|
||||
|
||||
event.currentTarget.tabIndex = -1;
|
||||
|
||||
this.$emit('node-toggle', this.node);
|
||||
this.$nextTick(() => {
|
||||
this.onArrowDown(event);
|
||||
});
|
||||
},
|
||||
onArrowLeft(event) {
|
||||
const togglerElement = DomHandler.findSingle(event.currentTarget, '.p-tree-toggler');
|
||||
|
||||
if (this.level === 0 && !this.expanded) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (this.expanded && !this.leaf) {
|
||||
togglerElement.click();
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
const target = this.findBeforeClickableNode(event.currentTarget);
|
||||
|
||||
if (target) {
|
||||
this.focusRowChange(event.currentTarget, target);
|
||||
}
|
||||
},
|
||||
onEnterKey(event) {
|
||||
this.setTabIndexForSelectionMode(event, this.nodeTouched);
|
||||
this.onClick(event);
|
||||
|
||||
event.preventDefault();
|
||||
},
|
||||
onTabKey() {
|
||||
this.setAllNodesTabIndexes();
|
||||
},
|
||||
setAllNodesTabIndexes() {
|
||||
const nodes = DomHandler.find(this.$refs.currentNode.closest('.p-tree-container'), '.p-treenode');
|
||||
|
||||
const hasSelectedNode = [...nodes].some((node) => node.getAttribute('aria-selected') === 'true' || node.getAttribute('aria-checked') === 'true');
|
||||
|
||||
[...nodes].forEach((node) => {
|
||||
node.tabIndex = -1;
|
||||
});
|
||||
|
||||
if (hasSelectedNode) {
|
||||
const selectedNodes = [...nodes].filter((node) => node.getAttribute('aria-selected') === 'true' || node.getAttribute('aria-checked') === 'true');
|
||||
|
||||
selectedNodes[0].tabIndex = 0;
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
[...nodes][0].tabIndex = 0;
|
||||
},
|
||||
setTabIndexForSelectionMode(event, nodeTouched) {
|
||||
if (this.selectionMode !== null) {
|
||||
const elements = [...DomHandler.find(this.$refs.currentNode.parentElement, '.p-treenode')];
|
||||
|
||||
event.currentTarget.tabIndex = nodeTouched === false ? -1 : 0;
|
||||
|
||||
if (elements.every((element) => element.tabIndex === -1)) {
|
||||
elements[0].tabIndex = 0;
|
||||
}
|
||||
}
|
||||
},
|
||||
focusRowChange(firstFocusableRow, currentFocusedRow, lastVisibleDescendant) {
|
||||
firstFocusableRow.tabIndex = '-1';
|
||||
currentFocusedRow.tabIndex = '0';
|
||||
|
||||
this.focusNode(lastVisibleDescendant || currentFocusedRow);
|
||||
},
|
||||
findBeforeClickableNode(node) {
|
||||
const parentListElement = node.closest('ul').closest('li');
|
||||
|
||||
if (parentListElement) {
|
||||
const prevNodeButton = DomHandler.findSingle(parentListElement, 'button');
|
||||
|
||||
if (prevNodeButton && prevNodeButton.style.visibility !== 'hidden') {
|
||||
return parentListElement;
|
||||
}
|
||||
|
||||
return this.findBeforeClickableNode(node.previousElementSibling);
|
||||
}
|
||||
|
||||
return null;
|
||||
},
|
||||
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.focus();
|
||||
},
|
||||
isCheckboxSelectionMode() {
|
||||
return this.selectionMode === 'checkbox';
|
||||
},
|
||||
isSameNode(event) {
|
||||
return event.currentTarget && (event.currentTarget.isSameNode(event.target) || event.currentTarget.isSameNode(event.target.closest('.p-treenode')));
|
||||
}
|
||||
},
|
||||
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;
|
||||
},
|
||||
ariaChecked() {
|
||||
return this.selectionMode === 'single' || this.selectionMode === 'multiple' ? this.selected : undefined;
|
||||
},
|
||||
ariaSelected() {
|
||||
return this.checkboxMode ? this.checked : undefined;
|
||||
}
|
||||
},
|
||||
directives: {
|
||||
ripple: Ripple
|
||||
}
|
||||
};
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue