From 8f49edbe14125d0b080a81f150c1f08c33cc56b1 Mon Sep 17 00:00:00 2001
From: Mert Sincan <sincan.mert@gmail.com>
Date: Fri, 18 Oct 2024 17:29:15 +0100
Subject: [PATCH] Add form support to `TreeSelect`

---
 .../src/treeselect/BaseTreeSelect.vue         | 21 ++-----------------
 .../primevue/src/treeselect/TreeSelect.vue    | 19 +++++++++--------
 .../src/treeselect/style/TreeSelectStyle.js   |  8 +++----
 3 files changed, 16 insertions(+), 32 deletions(-)

diff --git a/packages/primevue/src/treeselect/BaseTreeSelect.vue b/packages/primevue/src/treeselect/BaseTreeSelect.vue
index 4285375c0..f5ab6370a 100644
--- a/packages/primevue/src/treeselect/BaseTreeSelect.vue
+++ b/packages/primevue/src/treeselect/BaseTreeSelect.vue
@@ -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
diff --git a/packages/primevue/src/treeselect/TreeSelect.vue b/packages/primevue/src/treeselect/TreeSelect.vue
index c00b56a3a..f436eba81 100644
--- a/packages/primevue/src/treeselect/TreeSelect.vue
+++ b/packages/primevue/src/treeselect/TreeSelect.vue
@@ -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;
diff --git a/packages/primevue/src/treeselect/style/TreeSelectStyle.js b/packages/primevue/src/treeselect/style/TreeSelectStyle.js
index 3ff0eedcb..7af64590d 100644
--- a/packages/primevue/src/treeselect/style/TreeSelectStyle.js
+++ b/packages/primevue/src/treeselect/style/TreeSelectStyle.js
@@ -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',