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
237
components/lib/tree/Tree.d.ts
vendored
Executable file
237
components/lib/tree/Tree.d.ts
vendored
Executable file
|
|
@ -0,0 +1,237 @@
|
|||
/**
|
||||
*
|
||||
* Tree is used to display hierarchical data.
|
||||
*
|
||||
* [Live Demo](https://www.primevue.org/tree/)
|
||||
*
|
||||
* @module tree
|
||||
*
|
||||
*/
|
||||
import { VNode } from 'vue';
|
||||
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
|
||||
|
||||
/**
|
||||
* Custom TreeNode metadata.
|
||||
*/
|
||||
export interface TreeNode {
|
||||
/**
|
||||
* Mandatory unique key of the node.
|
||||
*/
|
||||
key?: string;
|
||||
/**
|
||||
* Label of the node.
|
||||
*/
|
||||
label?: string;
|
||||
/**
|
||||
* Data represented by the node.
|
||||
*/
|
||||
data?: any;
|
||||
/**
|
||||
* Type of the node to match a template.
|
||||
*/
|
||||
type?: string;
|
||||
/**
|
||||
* Icon of the node to display next to content.
|
||||
*/
|
||||
icon?: string;
|
||||
/**
|
||||
* An array of treenodes as children.
|
||||
*/
|
||||
children?: TreeNode[];
|
||||
/**
|
||||
* Inline style of the node.
|
||||
*/
|
||||
style?: any;
|
||||
/**
|
||||
* Style class of the node.
|
||||
*/
|
||||
styleClass?: string;
|
||||
/**
|
||||
* Whether the node is selectable when selection mode is enabled.
|
||||
* @defaultValue false
|
||||
*/
|
||||
selectable?: boolean;
|
||||
/**
|
||||
* Specifies if the node has children. Used in lazy loading.
|
||||
* @defaultValue false
|
||||
*/
|
||||
leaf?: boolean;
|
||||
/**
|
||||
* Optional
|
||||
*/
|
||||
[key: string]: any;
|
||||
/**
|
||||
* Icon to use in expanded state.
|
||||
*/
|
||||
expandedIcon?: string;
|
||||
/**
|
||||
* Icon to use in collapsed state.
|
||||
*/
|
||||
collapsedIcon?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Custom expanded keys metadata.
|
||||
*/
|
||||
export interface TreeExpandedKeys {
|
||||
/**
|
||||
* Optional
|
||||
*/
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
/**
|
||||
* Custom selection keys metadata.
|
||||
*/
|
||||
export interface TreeSelectionKeys {
|
||||
/**
|
||||
* Optional
|
||||
*/
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
/**
|
||||
* Defines valid properties in Tree component.
|
||||
*/
|
||||
export interface TreeProps {
|
||||
/**
|
||||
* An array of treenodes.
|
||||
*/
|
||||
value?: TreeNode[] | undefined;
|
||||
/**
|
||||
* A map of keys to represent the expansion state in controlled mode.
|
||||
*/
|
||||
expandedKeys?: TreeExpandedKeys;
|
||||
/**
|
||||
* A map of keys to control the selection state.
|
||||
*/
|
||||
selectionKeys?: TreeSelectionKeys;
|
||||
/**
|
||||
* Defines the selection mode.
|
||||
*/
|
||||
selectionMode?: 'single' | 'multiple' | 'checkbox' | undefined;
|
||||
/**
|
||||
* Defines how multiple items can be selected, when true metaKey needs to be pressed to select or unselect an item and when set to false selection of each item can be toggled individually.
|
||||
* On touch enabled devices, metaKeySelection is turned off automatically.
|
||||
* @defaultValue true
|
||||
*/
|
||||
metaKeySelection?: boolean | undefined;
|
||||
/**
|
||||
* Whether to display loading indicator.
|
||||
* @defaultValue false
|
||||
*/
|
||||
loading?: boolean | undefined;
|
||||
/**
|
||||
* Icon to display when tree is loading.
|
||||
* @defaultValue pi pi-spin
|
||||
*/
|
||||
loadingIcon?: string | undefined;
|
||||
/**
|
||||
* When specified, displays an input field to filter the items.
|
||||
* @defaultValue false
|
||||
*/
|
||||
filter?: boolean | undefined;
|
||||
/**
|
||||
* When filtering is enabled, filterBy decides which field or fields (comma separated) to search against.
|
||||
* @defaultValue label
|
||||
*/
|
||||
filterBy?: string | undefined;
|
||||
/**
|
||||
* Mode for filtering.
|
||||
* @defaultValue lenient
|
||||
*/
|
||||
filterMode?: 'lenient' | 'strict' | undefined;
|
||||
/**
|
||||
* Placeholder text to show when filter input is empty.
|
||||
*/
|
||||
filterPlaceholder?: string | undefined;
|
||||
/**
|
||||
* Locale to use in filtering. The default locale is the host environment's current locale.
|
||||
*/
|
||||
filterLocale?: string | undefined;
|
||||
/**
|
||||
* Height of the scroll viewport in fixed units or the 'flex' keyword for a dynamic size.
|
||||
*/
|
||||
scrollHeight?: 'flex' | string | undefined;
|
||||
/**
|
||||
* Defines a string value that labels an interactive element.
|
||||
*/
|
||||
'aria-label'?: string | undefined;
|
||||
/**
|
||||
* Identifier of the underlying menu element.
|
||||
*/
|
||||
'aria-labelledby'?: string | undefined;
|
||||
}
|
||||
|
||||
/**
|
||||
* Defines valid slots in Tree component.
|
||||
*/
|
||||
export interface TreeSlots {
|
||||
/**
|
||||
* Optional slots.
|
||||
* @todo
|
||||
*/
|
||||
[key: string]: (scope: {
|
||||
/**
|
||||
* Tree node instance
|
||||
*/
|
||||
node: TreeNode;
|
||||
}) => VNode[];
|
||||
}
|
||||
|
||||
/**
|
||||
* Defines valid slots in Tree component.
|
||||
*/
|
||||
export interface TreeEmits {
|
||||
/**
|
||||
* Emitted when the expanded keys change.
|
||||
* @param {TreeNode} value - New expanded keys.
|
||||
*/
|
||||
'update:expandedKeys'(value: TreeExpandedKeys): void;
|
||||
/**
|
||||
* Emitted when the selection keys change.
|
||||
* @param {TreeSelectionKeys} value - New selection keys.
|
||||
*/
|
||||
'update:selectionKeys'(event: TreeSelectionKeys): void;
|
||||
/**
|
||||
* Callback to invoke when a node is selected.
|
||||
* @param {TreeNode} node - Node instance.
|
||||
*/
|
||||
'node-select'(node: TreeNode): void;
|
||||
/**
|
||||
* Callback to invoke when a node is unselected.
|
||||
* @param {TreeNode} node - Node instance.
|
||||
*/
|
||||
'node-unselect'(node: TreeNode): void;
|
||||
/**
|
||||
* Callback to invoke when a node is expanded.
|
||||
* @param {TreeNode} node - Node instance.
|
||||
*/
|
||||
'node-expand'(node: TreeNode): void;
|
||||
/**
|
||||
* Callback to invoke when a node is collapsed.
|
||||
* @param {TreeNode} node - Node instance.
|
||||
*/
|
||||
'node-collapse'(node: TreeNode): void;
|
||||
}
|
||||
|
||||
/**
|
||||
* **PrimeVue - Tree**
|
||||
*
|
||||
* _Tree is used to display hierarchical data._
|
||||
*
|
||||
* [Live Demo](https://www.primevue.org/tree/)
|
||||
* --- ---
|
||||
* 
|
||||
*
|
||||
* @group Component
|
||||
*/
|
||||
declare class Tree extends ClassComponent<TreeProps, TreeSlots, TreeEmits> {}
|
||||
|
||||
declare module '@vue/runtime-core' {
|
||||
interface GlobalComponents {
|
||||
Tree: GlobalComponentConstructor<Tree>;
|
||||
}
|
||||
}
|
||||
|
||||
export default Tree;
|
||||
394
components/lib/tree/Tree.vue
Executable file
394
components/lib/tree/Tree.vue
Executable file
|
|
@ -0,0 +1,394 @@
|
|||
<template>
|
||||
<div :class="containerClass">
|
||||
<template v-if="loading">
|
||||
<div class="p-tree-loading-overlay p-component-overlay">
|
||||
<i :class="loadingIconClass" />
|
||||
</div>
|
||||
</template>
|
||||
<div v-if="filter" class="p-tree-filter-container">
|
||||
<input v-model="filterValue" type="text" autocomplete="off" class="p-tree-filter p-inputtext p-component" :placeholder="filterPlaceholder" @keydown="onFilterKeydown" />
|
||||
<span class="p-tree-filter-icon pi pi-search"></span>
|
||||
</div>
|
||||
<div class="p-tree-wrapper" :style="{ maxHeight: scrollHeight }">
|
||||
<ul class="p-tree-container" role="tree" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel">
|
||||
<TreeNode
|
||||
v-for="(node, index) of valueToRender"
|
||||
:key="node.key"
|
||||
:node="node"
|
||||
:templates="$slots"
|
||||
:level="level + 1"
|
||||
:index="index"
|
||||
:expandedKeys="d_expandedKeys"
|
||||
@node-toggle="onNodeToggle"
|
||||
@node-click="onNodeClick"
|
||||
:selectionMode="selectionMode"
|
||||
:selectionKeys="selectionKeys"
|
||||
@checkbox-change="onCheckboxChange"
|
||||
></TreeNode>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ObjectUtils } from 'primevue/utils';
|
||||
import TreeNode from './TreeNode.vue';
|
||||
|
||||
export default {
|
||||
name: 'Tree',
|
||||
emits: ['node-expand', 'node-collapse', 'update:expandedKeys', 'update:selectionKeys', 'node-select', 'node-unselect'],
|
||||
props: {
|
||||
value: {
|
||||
type: null,
|
||||
default: null
|
||||
},
|
||||
expandedKeys: {
|
||||
type: null,
|
||||
default: null
|
||||
},
|
||||
selectionKeys: {
|
||||
type: null,
|
||||
default: null
|
||||
},
|
||||
selectionMode: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
metaKeySelection: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
loadingIcon: {
|
||||
type: String,
|
||||
default: 'pi pi-spinner'
|
||||
},
|
||||
filter: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
filterBy: {
|
||||
type: String,
|
||||
default: 'label'
|
||||
},
|
||||
filterMode: {
|
||||
type: String,
|
||||
default: 'lenient'
|
||||
},
|
||||
filterPlaceholder: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
filterLocale: {
|
||||
type: String,
|
||||
default: undefined
|
||||
},
|
||||
scrollHeight: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
level: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
'aria-labelledby': {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
'aria-label': {
|
||||
type: String,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
d_expandedKeys: this.expandedKeys || {},
|
||||
filterValue: null
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
expandedKeys(newValue) {
|
||||
this.d_expandedKeys = newValue;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onNodeToggle(node) {
|
||||
const key = node.key;
|
||||
|
||||
if (this.d_expandedKeys[key]) {
|
||||
delete this.d_expandedKeys[key];
|
||||
this.$emit('node-collapse', node);
|
||||
} else {
|
||||
this.d_expandedKeys[key] = true;
|
||||
this.$emit('node-expand', node);
|
||||
}
|
||||
|
||||
this.d_expandedKeys = { ...this.d_expandedKeys };
|
||||
this.$emit('update:expandedKeys', this.d_expandedKeys);
|
||||
},
|
||||
onNodeClick(event) {
|
||||
if (this.selectionMode != null && event.node.selectable !== false) {
|
||||
const metaSelection = event.nodeTouched ? false : this.metaKeySelection;
|
||||
const _selectionKeys = metaSelection ? this.handleSelectionWithMetaKey(event) : this.handleSelectionWithoutMetaKey(event);
|
||||
|
||||
this.$emit('update:selectionKeys', _selectionKeys);
|
||||
}
|
||||
},
|
||||
onCheckboxChange(event) {
|
||||
this.$emit('update:selectionKeys', event.selectionKeys);
|
||||
|
||||
if (event.check) this.$emit('node-select', event.node);
|
||||
else this.$emit('node-unselect', event.node);
|
||||
},
|
||||
handleSelectionWithMetaKey(event) {
|
||||
const originalEvent = event.originalEvent;
|
||||
const node = event.node;
|
||||
const metaKey = originalEvent.metaKey || originalEvent.ctrlKey;
|
||||
const selected = this.isNodeSelected(node);
|
||||
let _selectionKeys;
|
||||
|
||||
if (selected && metaKey) {
|
||||
if (this.isSingleSelectionMode()) {
|
||||
_selectionKeys = {};
|
||||
} else {
|
||||
_selectionKeys = { ...this.selectionKeys };
|
||||
delete _selectionKeys[node.key];
|
||||
}
|
||||
|
||||
this.$emit('node-unselect', node);
|
||||
} else {
|
||||
if (this.isSingleSelectionMode()) {
|
||||
_selectionKeys = {};
|
||||
} else if (this.isMultipleSelectionMode()) {
|
||||
_selectionKeys = !metaKey ? {} : this.selectionKeys ? { ...this.selectionKeys } : {};
|
||||
}
|
||||
|
||||
_selectionKeys[node.key] = true;
|
||||
this.$emit('node-select', node);
|
||||
}
|
||||
|
||||
return _selectionKeys;
|
||||
},
|
||||
handleSelectionWithoutMetaKey(event) {
|
||||
const node = event.node;
|
||||
const selected = this.isNodeSelected(node);
|
||||
let _selectionKeys;
|
||||
|
||||
if (this.isSingleSelectionMode()) {
|
||||
if (selected) {
|
||||
_selectionKeys = {};
|
||||
this.$emit('node-unselect', node);
|
||||
} else {
|
||||
_selectionKeys = {};
|
||||
_selectionKeys[node.key] = true;
|
||||
this.$emit('node-select', node);
|
||||
}
|
||||
} else {
|
||||
if (selected) {
|
||||
_selectionKeys = { ...this.selectionKeys };
|
||||
delete _selectionKeys[node.key];
|
||||
|
||||
this.$emit('node-unselect', node);
|
||||
} else {
|
||||
_selectionKeys = this.selectionKeys ? { ...this.selectionKeys } : {};
|
||||
_selectionKeys[node.key] = true;
|
||||
|
||||
this.$emit('node-select', node);
|
||||
}
|
||||
}
|
||||
|
||||
return _selectionKeys;
|
||||
},
|
||||
isSingleSelectionMode() {
|
||||
return this.selectionMode === 'single';
|
||||
},
|
||||
isMultipleSelectionMode() {
|
||||
return this.selectionMode === 'multiple';
|
||||
},
|
||||
isNodeSelected(node) {
|
||||
return this.selectionMode && this.selectionKeys ? this.selectionKeys[node.key] === true : false;
|
||||
},
|
||||
isChecked(node) {
|
||||
return this.selectionKeys ? this.selectionKeys[node.key] && this.selectionKeys[node.key].checked : false;
|
||||
},
|
||||
isNodeLeaf(node) {
|
||||
return node.leaf === false ? false : !(node.children && node.children.length);
|
||||
},
|
||||
onFilterKeydown(event) {
|
||||
if (event.which === 13) {
|
||||
event.preventDefault();
|
||||
}
|
||||
},
|
||||
findFilteredNodes(node, paramsWithoutNode) {
|
||||
if (node) {
|
||||
let matched = false;
|
||||
|
||||
if (node.children) {
|
||||
let childNodes = [...node.children];
|
||||
|
||||
node.children = [];
|
||||
|
||||
for (let childNode of childNodes) {
|
||||
let copyChildNode = { ...childNode };
|
||||
|
||||
if (this.isFilterMatched(copyChildNode, paramsWithoutNode)) {
|
||||
matched = true;
|
||||
node.children.push(copyChildNode);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (matched) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
},
|
||||
isFilterMatched(node, { searchFields, filterText, strict }) {
|
||||
let matched = false;
|
||||
|
||||
for (let field of searchFields) {
|
||||
let fieldValue = String(ObjectUtils.resolveFieldData(node, field)).toLocaleLowerCase(this.filterLocale);
|
||||
|
||||
if (fieldValue.indexOf(filterText) > -1) {
|
||||
matched = true;
|
||||
}
|
||||
}
|
||||
|
||||
if (!matched || (strict && !this.isNodeLeaf(node))) {
|
||||
matched = this.findFilteredNodes(node, { searchFields, filterText, strict }) || matched;
|
||||
}
|
||||
|
||||
return matched;
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
containerClass() {
|
||||
return [
|
||||
'p-tree p-component',
|
||||
{
|
||||
'p-tree-selectable': this.selectionMode != null,
|
||||
'p-tree-loading': this.loading,
|
||||
'p-tree-flex-scrollable': this.scrollHeight === 'flex'
|
||||
}
|
||||
];
|
||||
},
|
||||
loadingIconClass() {
|
||||
return ['p-tree-loading-icon pi-spin', this.loadingIcon];
|
||||
},
|
||||
filteredValue() {
|
||||
let filteredNodes = [];
|
||||
const searchFields = this.filterBy.split(',');
|
||||
const filterText = this.filterValue.trim().toLocaleLowerCase(this.filterLocale);
|
||||
const strict = this.filterMode === 'strict';
|
||||
|
||||
for (let node of this.value) {
|
||||
let _node = { ...node };
|
||||
let paramsWithoutNode = { searchFields, filterText, strict };
|
||||
|
||||
if (
|
||||
(strict && (this.findFilteredNodes(_node, paramsWithoutNode) || this.isFilterMatched(_node, paramsWithoutNode))) ||
|
||||
(!strict && (this.isFilterMatched(_node, paramsWithoutNode) || this.findFilteredNodes(_node, paramsWithoutNode)))
|
||||
) {
|
||||
filteredNodes.push(_node);
|
||||
}
|
||||
}
|
||||
|
||||
return filteredNodes;
|
||||
},
|
||||
valueToRender() {
|
||||
if (this.filterValue && this.filterValue.trim().length > 0) return this.filteredValue;
|
||||
else return this.value;
|
||||
}
|
||||
},
|
||||
components: {
|
||||
TreeNode: TreeNode
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.p-tree-container {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.p-treenode-children {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.p-tree-wrapper {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.p-treenode-selectable {
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.p-tree-toggler {
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.p-treenode-leaf > .p-treenode-content .p-tree-toggler {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.p-treenode-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.p-tree-filter {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.p-tree-filter-container {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.p-tree-filter-icon {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -0.5rem;
|
||||
}
|
||||
|
||||
.p-tree-loading {
|
||||
position: relative;
|
||||
min-height: 4rem;
|
||||
}
|
||||
|
||||
.p-tree .p-tree-loading-overlay {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.p-tree-flex-scrollable {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.p-tree-flex-scrollable .p-tree-wrapper {
|
||||
flex: 1;
|
||||
}
|
||||
</style>
|
||||
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>
|
||||
9
components/lib/tree/package.json
Normal file
9
components/lib/tree/package.json
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
{
|
||||
"main": "./tree.cjs.js",
|
||||
"module": "./tree.esm.js",
|
||||
"unpkg": "./tree.min.js",
|
||||
"types": "./Tree.d.ts",
|
||||
"browser": {
|
||||
"./sfc": "./Tree.vue"
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue