Refactor #3965 - For TreeSelect
Tuğçe Küçükoğlu
parent
ebff8ce44d
commit
7773c13221
|
|
@ -0,0 +1,187 @@
|
|||
<script>
|
||||
import BaseComponent from 'primevue/basecomponent';
|
||||
import { useStyle } from 'primevue/usestyle';
|
||||
|
||||
const styles = `
|
||||
.p-treeselect {
|
||||
display: inline-flex;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.p-treeselect-trigger {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.p-treeselect-label-container {
|
||||
overflow: hidden;
|
||||
flex: 1 1 auto;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.p-treeselect-label {
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.p-treeselect-label-empty {
|
||||
overflow: hidden;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.p-treeselect-token {
|
||||
cursor: default;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.p-treeselect .p-treeselect-panel {
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
.p-treeselect-items-wrapper {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.p-fluid .p-treeselect {
|
||||
display: flex;
|
||||
}
|
||||
`;
|
||||
|
||||
const inlineStyles = {
|
||||
root: ({ props }) => ({ position: props.appendTo === 'self' ? 'relative' : undefined })
|
||||
};
|
||||
|
||||
const classes = {
|
||||
root: ({ instance, props }) => [
|
||||
'p-treeselect p-component p-inputwrapper',
|
||||
{
|
||||
'p-treeselect-chip': props.display === 'chip',
|
||||
'p-disabled': props.disabled,
|
||||
'p-focus': instance.focused,
|
||||
'p-inputwrapper-filled': !instance.emptyValue,
|
||||
'p-inputwrapper-focus': instance.focused || instance.overlayVisible
|
||||
}
|
||||
],
|
||||
hiddenInputWrapper: 'p-hidden-accessible',
|
||||
labelContainer: 'p-treeselect-label-container',
|
||||
label: ({ instance, props }) => [
|
||||
'p-treeselect-label',
|
||||
{
|
||||
'p-placeholder': instance.label === props.placeholder,
|
||||
'p-treeselect-label-empty': !props.placeholder && instance.emptyValue
|
||||
}
|
||||
],
|
||||
token: 'p-treeselect-token',
|
||||
tokenLabel: 'p-treeselect-token-label',
|
||||
trigger: 'p-treeselect-trigger',
|
||||
triggerIcon: 'p-treeselect-trigger-icon',
|
||||
panel: ({ instance }) => [
|
||||
'p-treeselect-panel p-component',
|
||||
{
|
||||
'p-input-filled': instance.$primevue.config.inputStyle === 'filled',
|
||||
'p-ripple-disabled': instance.$primevue.config.ripple === false
|
||||
}
|
||||
],
|
||||
wrapper: 'p-treeselect-items-wrapper',
|
||||
emptyMessage: 'p-treeselect-empty-message'
|
||||
};
|
||||
|
||||
const { load: loadStyle, unload: unloadStyle } = useStyle(styles, { id: 'primevue_treeselect_style', manual: true });
|
||||
|
||||
export default {
|
||||
name: 'BaseTreeSelect',
|
||||
extends: BaseComponent,
|
||||
props: {
|
||||
modelValue: null,
|
||||
options: Array,
|
||||
scrollHeight: {
|
||||
type: String,
|
||||
default: '400px'
|
||||
},
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
tabindex: {
|
||||
type: Number,
|
||||
default: null
|
||||
},
|
||||
selectionMode: {
|
||||
type: String,
|
||||
default: 'single'
|
||||
},
|
||||
appendTo: {
|
||||
type: String,
|
||||
default: 'body'
|
||||
},
|
||||
emptyMessage: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
display: {
|
||||
type: String,
|
||||
default: 'comma'
|
||||
},
|
||||
metaKeySelection: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
inputId: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
inputClass: {
|
||||
type: [String, Object],
|
||||
default: null
|
||||
},
|
||||
inputStyle: {
|
||||
type: Object,
|
||||
default: null
|
||||
},
|
||||
inputProps: {
|
||||
type: null,
|
||||
default: null
|
||||
},
|
||||
panelClass: {
|
||||
type: [String, Object],
|
||||
default: null
|
||||
},
|
||||
panelProps: {
|
||||
type: null,
|
||||
default: null
|
||||
},
|
||||
'aria-labelledby': {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
'aria-label': {
|
||||
type: String,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
css: {
|
||||
classes,
|
||||
inlineStyles
|
||||
},
|
||||
watch: {
|
||||
isUnstyled: {
|
||||
immediate: true,
|
||||
handler(newValue) {
|
||||
!newValue && loadStyle();
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -196,6 +196,11 @@ export interface TreeSelectProps {
|
|||
* @type {TreeSelectPassThroughOptions}
|
||||
*/
|
||||
pt?: TreeSelectPassThroughOptions;
|
||||
/**
|
||||
* When enabled, it removes component related styles in the core.
|
||||
* @defaultValue false
|
||||
*/
|
||||
unstyled?: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -256,7 +261,12 @@ export interface TreeSelectSlots {
|
|||
/**
|
||||
* Custom indicator template.
|
||||
*/
|
||||
triggericon(): VNode[];
|
||||
triggericon(scope: {
|
||||
/**
|
||||
* Style class of the icon.
|
||||
*/
|
||||
class: string;
|
||||
}): VNode[];
|
||||
/**
|
||||
* Custom item toggler icon template.
|
||||
* @param {Object} scope - item toggler icon slot's params.
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div ref="container" :class="containerClass" @click="onClick" v-bind="ptm('root')">
|
||||
<div class="p-hidden-accessible" v-bind="ptm('hiddenInputWrapper')">
|
||||
<div ref="container" :class="cx('root')" :style="sx('root')" @click="onClick" v-bind="ptm('root')">
|
||||
<div :class="cx('hiddenInputWrapper')" :style="sx('hiddenAccessible', isUnstyled)" v-bind="ptm('hiddenInputWrapper')" :data-p-hidden-accessible="true">
|
||||
<input
|
||||
ref="focusInput"
|
||||
:id="inputId"
|
||||
|
|
@ -22,31 +22,31 @@
|
|||
v-bind="{ ...inputProps, ...ptm('hiddenInput') }"
|
||||
/>
|
||||
</div>
|
||||
<div class="p-treeselect-label-container" v-bind="ptm('labelContainer')">
|
||||
<div :class="labelClass" v-bind="ptm('label')">
|
||||
<div :class="cx('labelContainer')" v-bind="ptm('labelContainer')">
|
||||
<div :class="cx('label')" v-bind="ptm('label')">
|
||||
<slot name="value" :value="selectedNodes" :placeholder="placeholder">
|
||||
<template v-if="display === 'comma'">
|
||||
{{ label || 'empty' }}
|
||||
</template>
|
||||
<template v-else-if="display === 'chip'">
|
||||
<div v-for="node of selectedNodes" :key="node.key" class="p-treeselect-token" v-bind="ptm('token')">
|
||||
<span class="p-treeselect-token-label" v-bind="ptm('tokenLabel')">{{ node.label }}</span>
|
||||
<div v-for="node of selectedNodes" :key="node.key" :class="cx('token')" v-bind="ptm('token')">
|
||||
<span :class="cx('tokenLabel')" v-bind="ptm('tokenLabel')">{{ node.label }}</span>
|
||||
</div>
|
||||
<template v-if="emptyValue">{{ placeholder || 'empty' }}</template>
|
||||
</template>
|
||||
</slot>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-treeselect-trigger" role="button" aria-haspopup="tree" :aria-expanded="overlayVisible" v-bind="ptm('trigger')">
|
||||
<slot name="triggericon">
|
||||
<component :is="'ChevronDownIcon'" class="p-treeselect-trigger-icon" v-bind="ptm('triggerIcon')" />
|
||||
<div :class="cx('trigger')" role="button" aria-haspopup="tree" :aria-expanded="overlayVisible" v-bind="ptm('trigger')">
|
||||
<slot name="triggericon" :class="cx('triggerIcon')">
|
||||
<component :is="'ChevronDownIcon'" :class="cx('triggerIcon')" v-bind="ptm('triggerIcon')" />
|
||||
</slot>
|
||||
</div>
|
||||
<Portal :appendTo="appendTo">
|
||||
<transition name="p-connected-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave">
|
||||
<div v-if="overlayVisible" :ref="overlayRef" @click="onOverlayClick" :class="panelStyleClass" @keydown="onOverlayKeydown" v-bind="{ ...panelProps, ...ptm('panel') }">
|
||||
<div v-if="overlayVisible" :ref="overlayRef" @click="onOverlayClick" :class="[cx('panel'), panelClass]" @keydown="onOverlayKeydown" v-bind="{ ...panelProps, ...ptm('panel') }">
|
||||
<slot name="header" :value="modelValue" :options="options"></slot>
|
||||
<div class="p-treeselect-items-wrapper" :style="{ 'max-height': scrollHeight }" v-bind="ptm('wrapper')">
|
||||
<div :class="cx('panel')" :style="{ 'max-height': scrollHeight }" v-bind="ptm('wrapper')">
|
||||
<TSTree
|
||||
ref="tree"
|
||||
:id="listId"
|
||||
|
|
@ -63,6 +63,7 @@
|
|||
@node-unselect="onNodeUnselect"
|
||||
:level="0"
|
||||
:pt="ptm('tree')"
|
||||
data-pc-section="tree"
|
||||
>
|
||||
<template v-if="$slots.itemtogglericon" #togglericon="iconProps">
|
||||
<slot name="itemtogglericon" :node="iconProps.node" :expanded="iconProps.expanded" :class="iconProps.class" />
|
||||
|
|
@ -71,7 +72,7 @@
|
|||
<slot name="itemcheckboxicon" :checked="iconProps.checked" :partialChecked="iconProps.partialChecked" :class="iconProps.class" />
|
||||
</template>
|
||||
</TSTree>
|
||||
<div v-if="emptyOptions" class="p-treeselect-empty-message" v-bind="ptm('emptyMessage')">
|
||||
<div v-if="emptyOptions" :class="cx('emptyMessage')" v-bind="ptm('emptyMessage')">
|
||||
<slot name="empty">{{ emptyMessageText }}</slot>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -83,90 +84,18 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import BaseComponent from 'primevue/basecomponent';
|
||||
import ChevronDownIcon from 'primevue/icons/chevrondown';
|
||||
import OverlayEventBus from 'primevue/overlayeventbus';
|
||||
import Portal from 'primevue/portal';
|
||||
import Ripple from 'primevue/ripple';
|
||||
import Tree from 'primevue/tree';
|
||||
import { ConnectedOverlayScrollHandler, DomHandler, UniqueComponentId, ZIndexUtils } from 'primevue/utils';
|
||||
import BaseTreeSelect from './BaseTreeSelect.vue';
|
||||
|
||||
export default {
|
||||
name: 'TreeSelect',
|
||||
extends: BaseComponent,
|
||||
extends: BaseTreeSelect,
|
||||
emits: ['update:modelValue', 'before-show', 'before-hide', 'change', 'show', 'hide', 'node-select', 'node-unselect', 'node-expand', 'node-collapse', 'focus', 'blur'],
|
||||
props: {
|
||||
modelValue: null,
|
||||
options: Array,
|
||||
scrollHeight: {
|
||||
type: String,
|
||||
default: '400px'
|
||||
},
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
tabindex: {
|
||||
type: Number,
|
||||
default: null
|
||||
},
|
||||
selectionMode: {
|
||||
type: String,
|
||||
default: 'single'
|
||||
},
|
||||
appendTo: {
|
||||
type: String,
|
||||
default: 'body'
|
||||
},
|
||||
emptyMessage: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
display: {
|
||||
type: String,
|
||||
default: 'comma'
|
||||
},
|
||||
metaKeySelection: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
inputId: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
inputClass: {
|
||||
type: [String, Object],
|
||||
default: null
|
||||
},
|
||||
inputStyle: {
|
||||
type: Object,
|
||||
default: null
|
||||
},
|
||||
inputProps: {
|
||||
type: null,
|
||||
default: null
|
||||
},
|
||||
panelClass: {
|
||||
type: [String, Object],
|
||||
default: null
|
||||
},
|
||||
panelProps: {
|
||||
type: null,
|
||||
default: null
|
||||
},
|
||||
'aria-labelledby': {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
'aria-label': {
|
||||
type: String,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
focused: false,
|
||||
|
|
@ -231,7 +160,7 @@ export default {
|
|||
this.$emit('blur', event);
|
||||
},
|
||||
onClick(event) {
|
||||
if (!this.disabled && (!this.overlay || !this.overlay.contains(event.target)) && !DomHandler.hasClass(event.target, 'p-treeselect-close')) {
|
||||
if (!this.disabled && (!this.overlay || !this.overlay.contains(event.target))) {
|
||||
if (this.overlayVisible) this.hide();
|
||||
else this.show();
|
||||
|
||||
|
|
@ -282,7 +211,7 @@ export default {
|
|||
this.show();
|
||||
|
||||
this.$nextTick(() => {
|
||||
const treeNodeEl = DomHandler.find(this.$refs.tree.$el, '.p-treenode');
|
||||
const treeNodeEl = DomHandler.find(this.$refs.tree.$el, '[data-pc-section="treeitem"]');
|
||||
const focusedElement = [...treeNodeEl].find((item) => item.getAttribute('tabindex') === '0');
|
||||
|
||||
DomHandler.focus(focusedElement);
|
||||
|
|
@ -307,6 +236,8 @@ export default {
|
|||
},
|
||||
onOverlayEnter(el) {
|
||||
ZIndexUtils.set('overlay', el, this.$primevue.config.zIndex.overlay);
|
||||
|
||||
DomHandler.addStyles(el, { position: 'absolute', top: '0', left: '0' });
|
||||
this.alignOverlay();
|
||||
this.bindOutsideClickListener();
|
||||
this.bindScrollListener();
|
||||
|
|
@ -459,7 +390,7 @@ export default {
|
|||
},
|
||||
scrollValueInView() {
|
||||
if (this.overlay) {
|
||||
let selectedItem = DomHandler.findSingle(this.overlay, 'li.p-highlight');
|
||||
let selectedItem = DomHandler.findSingle(this.overlay, '[data-p-highlight="true"]');
|
||||
|
||||
if (selectedItem) {
|
||||
selectedItem.scrollIntoView({ block: 'nearest', inline: 'start' });
|
||||
|
|
@ -468,37 +399,6 @@ export default {
|
|||
}
|
||||
},
|
||||
computed: {
|
||||
containerClass() {
|
||||
return [
|
||||
'p-treeselect p-component p-inputwrapper',
|
||||
{
|
||||
'p-treeselect-chip': this.display === 'chip',
|
||||
'p-disabled': this.disabled,
|
||||
'p-focus': this.focused,
|
||||
'p-inputwrapper-filled': !this.emptyValue,
|
||||
'p-inputwrapper-focus': this.focused || this.overlayVisible
|
||||
}
|
||||
];
|
||||
},
|
||||
labelClass() {
|
||||
return [
|
||||
'p-treeselect-label',
|
||||
{
|
||||
'p-placeholder': this.label === this.placeholder,
|
||||
'p-treeselect-label-empty': !this.placeholder && this.emptyValue
|
||||
}
|
||||
];
|
||||
},
|
||||
panelStyleClass() {
|
||||
return [
|
||||
'p-treeselect-panel p-component',
|
||||
this.panelClass,
|
||||
{
|
||||
'p-input-filled': this.$primevue.config.inputStyle === 'filled',
|
||||
'p-ripple-disabled': this.$primevue.config.ripple === false
|
||||
}
|
||||
];
|
||||
},
|
||||
selectedNodes() {
|
||||
let selectedNodes = [];
|
||||
|
||||
|
|
@ -538,63 +438,3 @@ export default {
|
|||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.p-treeselect {
|
||||
display: inline-flex;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.p-treeselect-trigger {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.p-treeselect-label-container {
|
||||
overflow: hidden;
|
||||
flex: 1 1 auto;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.p-treeselect-label {
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.p-treeselect-label-empty {
|
||||
overflow: hidden;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.p-treeselect-token {
|
||||
cursor: default;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.p-treeselect .p-treeselect-panel {
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
.p-treeselect-panel {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.p-treeselect-items-wrapper {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.p-fluid .p-treeselect {
|
||||
display: flex;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue