Refactor #5426 - For Tree

components/lib/tree/Tree.d.ts

@@ -9,6 +9,7 @@
  */
 import { VNode } from 'vue';
 import { ComponentHooks } from '../basecomponent';
+import { InputTextPassThroughOptions } from '../inputtext';
 import { PassThroughOptions } from '../passthrough';
 import { TreeNode } from '../treenode';
 import { ClassComponent, GlobalComponentConstructor, HintedString, PassThrough } from '../ts-helpers';
@@ -45,6 +46,20 @@ export interface TreePassThroughMethodOptions<T = any> {
     global: object | undefined;
 }
 
+/**
+ * Custom shared passthrough(pt) option method.
+ */
+export interface TreeSharedPassThroughMethodOptions {
+    /**
+     * Defines valid properties.
+     */
+    props: TreeProps;
+    /**
+     * Defines current inline state.
+     */
+    state: TreeState;
+}
+
 /**
  * Custom expanded keys metadata.
  */
@@ -95,8 +110,9 @@ export interface TreePassThroughOptions<T = any> {
     filterContainer?: TreePassThroughOptionType<T>;
     /**
      * Used to pass attributes to the input's DOM element.
+     * @see {@link InputTextPassThroughOptions}
      */
-    input?: TreePassThroughOptionType<T>;
+    input?: InputTextPassThroughOptions<TreeSharedPassThroughMethodOptions>;
     /**
      * Used to pass attributes to the search icon's DOM element.
      */

components/lib/tree/Tree.vue

@@ -9,7 +9,7 @@
             </div>
         </template>
         <div v-if="filter" :class="cx('filterContainer')" v-bind="ptm('filterContainer')">
-            <input v-model="filterValue" type="text" autocomplete="off" :class="cx('input')" :placeholder="filterPlaceholder" @keydown="onFilterKeydown" v-bind="ptm('input')" />
+            <InputText v-model="filterValue" autocomplete="off" :class="cx('input')" :placeholder="filterPlaceholder" @keydown="onFilterKeydown" v-bind="ptm('input')" />
             <slot name="searchicon" :class="cx('searchIcon')">
                 <SearchIcon :class="cx('searchIcon')" v-bind="ptm('searchIcon')" />
             </slot>
@@ -41,6 +41,7 @@
 <script>
 import SearchIcon from 'primevue/icons/search';
 import SpinnerIcon from 'primevue/icons/spinner';
+import InputText from 'primevue/inputtext';
 import { ObjectUtils } from 'primevue/utils';
 import BaseTree from './BaseTree.vue';
 import TreeNode from './TreeNode.vue';
@@ -240,9 +241,10 @@ export default {
         }
     },
     components: {
-        TreeNode: TreeNode,
+        TreeNode,
-        SearchIcon: SearchIcon,
+        InputText,
-        SpinnerIcon: SpinnerIcon
+        SearchIcon,
+        SpinnerIcon
     }
 };
 </script>

components/lib/tree/style/TreeStyle.js

@@ -12,7 +12,7 @@ const classes = {
     loadingOverlay: 'p-tree-loading-overlay p-component-overlay',
     loadingIcon: 'p-tree-loading-icon',
     filterContainer: 'p-tree-filter-container',
-    input: 'p-tree-filter p-component',
+    input: 'p-tree-filter',
     searchIcon: 'p-tree-filter-icon',
     wrapper: 'p-tree-wrapper',
     container: 'p-tree-container',