vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Refactor #3965 - For Tree

pull/4004/head
Tuğçe Küçükoğlu 2023-05-26 14:56:52 +03:00
parent db683b49bd
commit ebff8ce44d
2 changed files with 9 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/lib/tree/Tree.vue
View File

@ -9,7 +9,7 @@
</div> </div>
</template> </template>
<div v-if="filter" :class="cx('filterContainer')" v-bind="ptm('filterContainer')"> <div v-if="filter" :class="cx('filterContainer')" v-bind="ptm('filterContainer')">
<input v-model="filterValue" type="text" autocomplete="off" :class="cx('root')" :placeholder="filterPlaceholder" @keydown="onFilterKeydown" v-bind="ptm('input')" /> <input v-model="filterValue" type="text" autocomplete="off" :class="cx('input')" :placeholder="filterPlaceholder" @keydown="onFilterKeydown" v-bind="ptm('input')" />
<slot name="searchicon" :class="cx('searchIcon')"> <slot name="searchicon" :class="cx('searchIcon')">
<SearchIcon :class="cx('searchIcon')" v-bind="ptm('searchIcon')" /> <SearchIcon :class="cx('searchIcon')" v-bind="ptm('searchIcon')" />
</slot> </slot>

13
components/lib/tree/TreeNode.vue
View File

@ -15,14 +15,14 @@
v-bind="level === 1 ? getPTOptions('node') : ptm('subgroup')" v-bind="level === 1 ? getPTOptions('node') : ptm('subgroup')"
data-pc-section="treeitem" data-pc-section="treeitem"
> >
<div :class="getCXOptions('content')" @click="onClick" @touchend="onTouchEnd" :style="node.style" v-bind="getPTOptions('content')"> <div :class="getCXOptions('content')" @click="onClick" @touchend="onTouchEnd" :style="node.style" v-bind="getPTOptions('content')" :data-p-highlight="checkboxMode ? checked : selected" :data-p-selectable="selectable">
<button v-ripple type="button" :class="cx('toggler')" @click="toggle" tabindex="-1" aria-hidden="true" v-bind="getPTOptions('toggler')"> <button v-ripple type="button" :class="cx('toggler')" @click="toggle" tabindex="-1" aria-hidden="true" v-bind="getPTOptions('toggler')">
<component v-if="templates['togglericon']" :is="templates['togglericon']" :node="node" :expanded="expanded" :class="cx('togglerIcon')" /> <component v-if="templates['togglericon']" :is="templates['togglericon']" :node="node" :expanded="expanded" :class="cx('togglerIcon')" />
<component v-else-if="expanded" :is="node.expandedIcon ? 'span' : 'ChevronDownIcon'" :class="cx('togglerIcon')" v-bind="getPTOptions('togglerIcon')" /> <component v-else-if="expanded" :is="node.expandedIcon ? 'span' : 'ChevronDownIcon'" :class="cx('togglerIcon')" v-bind="getPTOptions('togglerIcon')" />
<component v-else :is="node.collapsedIcon ? 'span' : 'ChevronRightIcon'" :class="cx('togglerIcon')" v-bind="getPTOptions('togglerIcon')" /> <component v-else :is="node.collapsedIcon ? 'span' : 'ChevronRightIcon'" :class="cx('togglerIcon')" v-bind="getPTOptions('togglerIcon')" />
</button> </button>
<div v-if="checkboxMode" :class="cx('checkboxContainer')" aria-hidden="true" v-bind="getPTOptions('checkboxContainer')"> <div v-if="checkboxMode" :class="cx('checkboxContainer')" aria-hidden="true" v-bind="getPTOptions('checkboxContainer')">
<div :class="getCXOptions('checkbox')" role="checkbox" v-bind="getPTOptions('checkbox')"> <div :class="getCXOptions('checkbox')" role="checkbox" v-bind="getPTOptions('checkbox')" :data-p-checked="checked" :data-p-partialchecked="partialchecked">
<component v-if="templates['checkboxicon']" :is="templates['checkboxicon']" :checked="checked" :partialChecked="partialChecked" :class="cx('checkboxIcon')" /> <component v-if="templates['checkboxicon']" :is="templates['checkboxicon']" :checked="checked" :partialChecked="partialChecked" :class="cx('checkboxIcon')" />
<component v-else :is="checked ? 'CheckIcon' : partialChecked ? 'MinusIcon' : null" :class="cx('checkboxIcon')" v-bind="getPTOptions('checkboxIcon')" /> <component v-else :is="checked ? 'CheckIcon' : partialChecked ? 'MinusIcon' : null" :class="cx('checkboxIcon')" v-bind="getPTOptions('checkboxIcon')" />
</div> </div>
@ -97,6 +97,9 @@ export default {
}, },
nodeTouched: false, nodeTouched: false,
toggleClicked: false, toggleClicked: false,
mounted() {
this.setAllNodesTabIndexes();
},
methods: { methods: {
toggle() { toggle() {
this.$emit('node-toggle', this.node); this.$emit('node-toggle', this.node);
@ -280,7 +283,7 @@ export default {
}, },
setTabIndexForSelectionMode(event, nodeTouched) { setTabIndexForSelectionMode(event, nodeTouched) {
if (this.selectionMode !== null) { if (this.selectionMode !== null) {
const elements = [...DomHandler.find(this.$refs.currentNode.parentElement, '[data-pc-section="node"]')]; const elements = [...DomHandler.find(this.$refs.currentNode.parentElement, '[data-pc-section="treeitem"]')];
event.currentTarget.tabIndex = nodeTouched === false ? -1 : 0; event.currentTarget.tabIndex = nodeTouched === false ? -1 : 0;
@ -387,7 +390,7 @@ export default {
getParentNodeElement(nodeElement) { getParentNodeElement(nodeElement) {
const parentNodeElement = nodeElement.parentElement.parentElement; const parentNodeElement = nodeElement.parentElement.parentElement;
return DomHandler.getAttribute(parentNodeElement, '[data-pc-section="node"]') ? parentNodeElement : null; return DomHandler.getAttribute(parentNodeElement, '[data-pc-section="treeitem"]') ? parentNodeElement : null;
}, },
focusNode(element) { focusNode(element) {
element.focus(); element.focus();
@ -396,7 +399,7 @@ export default {
return this.selectionMode === 'checkbox'; return this.selectionMode === 'checkbox';
}, },
isSameNode(event) { isSameNode(event) {
return event.currentTarget && (event.currentTarget.isSameNode(event.target) || event.currentTarget.isSameNode(event.target.closest('[data-pc-section="node"]'))); return event.currentTarget && (event.currentTarget.isSameNode(event.target) || event.currentTarget.isSameNode(event.target.closest('[data-pc-section="treeitem"]')));
} }
}, },
computed: { computed: {