Add form support to `TreeSelect`
Mert Sincan
parent
c7f6e25d74
commit
8f49edbe14
|
|
@ -1,12 +1,11 @@
|
|||
<script>
|
||||
import BaseComponent from '@primevue/core/basecomponent';
|
||||
import BaseInput from '@primevue/core/baseinput';
|
||||
import TreeSelectStyle from 'primevue/treeselect/style';
|
||||
|
||||
export default {
|
||||
name: 'BaseTreeSelect',
|
||||
extends: BaseComponent,
|
||||
extends: BaseInput,
|
||||
props: {
|
||||
modelValue: null,
|
||||
options: Array,
|
||||
scrollHeight: {
|
||||
type: String,
|
||||
|
|
@ -16,18 +15,6 @@ export default {
|
|||
type: String,
|
||||
default: null
|
||||
},
|
||||
invalid: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
variant: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
tabindex: {
|
||||
type: Number,
|
||||
default: null
|
||||
|
|
@ -52,10 +39,6 @@ export default {
|
|||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
fluid: {
|
||||
type: Boolean,
|
||||
default: null
|
||||
},
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
|
|
|
|||
|
|
@ -56,7 +56,7 @@
|
|||
:data-p-hidden-accessible="true"
|
||||
:data-p-hidden-focusable="true"
|
||||
></span>
|
||||
<slot name="header" :value="modelValue" :options="options"></slot>
|
||||
<slot name="header" :value="d_value" :options="options"></slot>
|
||||
<div :class="cx('treeContainer')" :style="{ 'max-height': scrollHeight }" v-bind="ptm('treeContainer')">
|
||||
<TSTree
|
||||
ref="tree"
|
||||
|
|
@ -72,7 +72,7 @@
|
|||
:filterPlaceholder="filterPlaceholder"
|
||||
:filterLocale="filterLocale"
|
||||
@update:selectionKeys="onSelectionChange"
|
||||
:selectionKeys="modelValue"
|
||||
:selectionKeys="d_value"
|
||||
:expandedKeys="d_expandedKeys"
|
||||
@update:expandedKeys="onNodeToggle"
|
||||
:metaKeySelection="metaKeySelection"
|
||||
|
|
@ -102,7 +102,7 @@
|
|||
<slot name="empty">{{ emptyMessageText }}</slot>
|
||||
</div>
|
||||
</div>
|
||||
<slot name="footer" :value="modelValue" :options="options"></slot>
|
||||
<slot name="footer" :value="d_value" :options="options"></slot>
|
||||
<span
|
||||
ref="lastHiddenFocusableElementOnOverlay"
|
||||
role="presentation"
|
||||
|
|
@ -136,7 +136,7 @@ export default {
|
|||
name: 'TreeSelect',
|
||||
extends: BaseTreeSelect,
|
||||
inheritAttrs: false,
|
||||
emits: ['update:modelValue', 'before-show', 'before-hide', 'change', 'show', 'hide', 'node-select', 'node-unselect', 'node-expand', 'node-collapse', 'focus', 'blur', 'update:expandedKeys'],
|
||||
emits: ['before-show', 'before-hide', 'change', 'show', 'hide', 'node-select', 'node-unselect', 'node-expand', 'node-collapse', 'focus', 'blur', 'update:expandedKeys'],
|
||||
inject: {
|
||||
$pcFluid: { default: null }
|
||||
},
|
||||
|
|
@ -210,6 +210,7 @@ export default {
|
|||
onBlur(event) {
|
||||
this.focused = false;
|
||||
this.$emit('blur', event);
|
||||
this.formField.onBlur?.();
|
||||
},
|
||||
onClick(event) {
|
||||
if (this.disabled) {
|
||||
|
|
@ -225,7 +226,7 @@ export default {
|
|||
},
|
||||
onSelectionChange(keys) {
|
||||
this.selfChange = true;
|
||||
this.$emit('update:modelValue', keys);
|
||||
this.updateValue(keys);
|
||||
this.$emit('change', keys);
|
||||
},
|
||||
onNodeSelect(node) {
|
||||
|
|
@ -448,7 +449,7 @@ export default {
|
|||
return this.selectionMode === 'checkbox' ? keys[node.key] && keys[node.key].checked : keys[node.key];
|
||||
},
|
||||
updateTreeState() {
|
||||
let keys = { ...this.modelValue };
|
||||
let keys = { ...this.d_value };
|
||||
|
||||
if (keys && this.options) {
|
||||
this.updateTreeBranchState(null, null, keys);
|
||||
|
|
@ -497,8 +498,8 @@ export default {
|
|||
selectedNodes() {
|
||||
let selectedNodes = [];
|
||||
|
||||
if (this.modelValue && this.options) {
|
||||
let keys = { ...this.modelValue };
|
||||
if (this.d_value && this.options) {
|
||||
let keys = { ...this.d_value };
|
||||
|
||||
this.findSelectedNodes(null, keys, selectedNodes);
|
||||
}
|
||||
|
|
@ -514,7 +515,7 @@ export default {
|
|||
return this.emptyMessage || this.$primevue.config.locale.emptyMessage;
|
||||
},
|
||||
emptyValue() {
|
||||
return !this.modelValue || Object.keys(this.modelValue).length === 0;
|
||||
return !this.$filled;
|
||||
},
|
||||
emptyOptions() {
|
||||
return !this.options || this.options.length === 0;
|
||||
|
|
|
|||
|
|
@ -149,13 +149,13 @@ const classes = {
|
|||
{
|
||||
'p-treeselect-display-chip': props.display === 'chip',
|
||||
'p-disabled': props.disabled,
|
||||
'p-invalid': props.invalid,
|
||||
'p-invalid': instance.$invalid,
|
||||
'p-focus': instance.focused,
|
||||
'p-variant-filled': props.variant ? props.variant === 'filled' : instance.$primevue.config.inputStyle === 'filled' || instance.$primevue.config.inputVariant === 'filled',
|
||||
'p-inputwrapper-filled': !instance.emptyValue,
|
||||
'p-variant-filled': instance.$variant === 'filled',
|
||||
'p-inputwrapper-filled': instance.$filled,
|
||||
'p-inputwrapper-focus': instance.focused || instance.overlayVisible,
|
||||
'p-treeselect-open': instance.overlayVisible,
|
||||
'p-treeselect-fluid': instance.hasFluid
|
||||
'p-treeselect-fluid': instance.$fluid
|
||||
}
|
||||
],
|
||||
labelContainer: 'p-treeselect-label-container',
|
||||
|
|
|
|||
Loading…
Reference in New Issue