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

Add form support to `TreeSelect`

pull/6632/head
Mert Sincan 2024-10-18 17:29:15 +01:00
parent c7f6e25d74
commit 8f49edbe14
3 changed files with 16 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
packages/primevue/src/treeselect/BaseTreeSelect.vue
View File

@ -1,12 +1,11 @@
<script> <script>
import BaseComponent from '@primevue/core/basecomponent'; import BaseInput from '@primevue/core/baseinput';
import TreeSelectStyle from 'primevue/treeselect/style'; import TreeSelectStyle from 'primevue/treeselect/style';
export default { export default {
name: 'BaseTreeSelect', name: 'BaseTreeSelect',
extends: BaseComponent, extends: BaseInput,
props: { props: {
modelValue: null,
options: Array, options: Array,
scrollHeight: { scrollHeight: {
type: String, type: String,
@ -16,18 +15,6 @@ export default {
type: String, type: String,
default: null default: null
}, },
invalid: {
type: Boolean,
default: false
},
variant: {
type: String,
default: null
},
disabled: {
type: Boolean,
default: false
},
tabindex: { tabindex: {
type: Number, type: Number,
default: null default: null
@ -52,10 +39,6 @@ export default {
type: Boolean, type: Boolean,
default: false default: false
}, },
fluid: {
type: Boolean,
default: null
},
loading: { loading: {
type: Boolean, type: Boolean,
default: false default: false

19
packages/primevue/src/treeselect/TreeSelect.vue
View File

@ -56,7 +56,7 @@
:data-p-hidden-accessible="true" :data-p-hidden-accessible="true"
:data-p-hidden-focusable="true" :data-p-hidden-focusable="true"
></span> ></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')"> <div :class="cx('treeContainer')" :style="{ 'max-height': scrollHeight }" v-bind="ptm('treeContainer')">
<TSTree <TSTree
ref="tree" ref="tree"
@ -72,7 +72,7 @@
:filterPlaceholder="filterPlaceholder" :filterPlaceholder="filterPlaceholder"
:filterLocale="filterLocale" :filterLocale="filterLocale"
@update:selectionKeys="onSelectionChange" @update:selectionKeys="onSelectionChange"
:selectionKeys="modelValue" :selectionKeys="d_value"
:expandedKeys="d_expandedKeys" :expandedKeys="d_expandedKeys"
@update:expandedKeys="onNodeToggle" @update:expandedKeys="onNodeToggle"
:metaKeySelection="metaKeySelection" :metaKeySelection="metaKeySelection"
@ -102,7 +102,7 @@
<slot name="empty">{{ emptyMessageText }}</slot> <slot name="empty">{{ emptyMessageText }}</slot>
</div> </div>
</div> </div>
<slot name="footer" :value="modelValue" :options="options"></slot> <slot name="footer" :value="d_value" :options="options"></slot>
<span <span
ref="lastHiddenFocusableElementOnOverlay" ref="lastHiddenFocusableElementOnOverlay"
role="presentation" role="presentation"
@ -136,7 +136,7 @@ export default {
name: 'TreeSelect', name: 'TreeSelect',
extends: BaseTreeSelect, extends: BaseTreeSelect,
inheritAttrs: false, 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: { inject: {
$pcFluid: { default: null } $pcFluid: { default: null }
}, },
@ -210,6 +210,7 @@ export default {
onBlur(event) { onBlur(event) {
this.focused = false; this.focused = false;
this.$emit('blur', event); this.$emit('blur', event);
this.formField.onBlur?.();
}, },
onClick(event) { onClick(event) {
if (this.disabled) { if (this.disabled) {
@ -225,7 +226,7 @@ export default {
}, },
onSelectionChange(keys) { onSelectionChange(keys) {
this.selfChange = true; this.selfChange = true;
this.$emit('update:modelValue', keys); this.updateValue(keys);
this.$emit('change', keys); this.$emit('change', keys);
}, },
onNodeSelect(node) { onNodeSelect(node) {
@ -448,7 +449,7 @@ export default {
return this.selectionMode === 'checkbox' ? keys[node.key] && keys[node.key].checked : keys[node.key]; return this.selectionMode === 'checkbox' ? keys[node.key] && keys[node.key].checked : keys[node.key];
}, },
updateTreeState() { updateTreeState() {
let keys = { ...this.modelValue }; let keys = { ...this.d_value };
if (keys && this.options) { if (keys && this.options) {
this.updateTreeBranchState(null, null, keys); this.updateTreeBranchState(null, null, keys);
@ -497,8 +498,8 @@ export default {
selectedNodes() { selectedNodes() {
let selectedNodes = []; let selectedNodes = [];
if (this.modelValue && this.options) { if (this.d_value && this.options) {
let keys = { ...this.modelValue }; let keys = { ...this.d_value };
this.findSelectedNodes(null, keys, selectedNodes); this.findSelectedNodes(null, keys, selectedNodes);
} }
@ -514,7 +515,7 @@ export default {
return this.emptyMessage || this.$primevue.config.locale.emptyMessage; return this.emptyMessage || this.$primevue.config.locale.emptyMessage;
}, },
emptyValue() { emptyValue() {
return !this.modelValue || Object.keys(this.modelValue).length === 0; return !this.$filled;
}, },
emptyOptions() { emptyOptions() {
return !this.options || this.options.length === 0; return !this.options || this.options.length === 0;

8
packages/primevue/src/treeselect/style/TreeSelectStyle.js
View File

@ -149,13 +149,13 @@ const classes = {
{ {
'p-treeselect-display-chip': props.display === 'chip', 'p-treeselect-display-chip': props.display === 'chip',
'p-disabled': props.disabled, 'p-disabled': props.disabled,
'p-invalid': props.invalid, 'p-invalid': instance.$invalid,
'p-focus': instance.focused, 'p-focus': instance.focused,
'p-variant-filled': props.variant ? props.variant === 'filled' : instance.$primevue.config.inputStyle === 'filled' || instance.$primevue.config.inputVariant === 'filled', 'p-variant-filled': instance.$variant === 'filled',
'p-inputwrapper-filled': !instance.emptyValue, 'p-inputwrapper-filled': instance.$filled,
'p-inputwrapper-focus': instance.focused || instance.overlayVisible, 'p-inputwrapper-focus': instance.focused || instance.overlayVisible,
'p-treeselect-open': instance.overlayVisible, 'p-treeselect-open': instance.overlayVisible,
'p-treeselect-fluid': instance.hasFluid 'p-treeselect-fluid': instance.$fluid
} }
], ],
labelContainer: 'p-treeselect-label-container', labelContainer: 'p-treeselect-label-container',