From 1e3fcfca599442f24f309a360c5d7bae5ee08742 Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Tue, 7 May 2024 18:47:11 +0300
Subject: [PATCH] Use IconField and InputIcon for filter inputs

---
 components/lib/listbox/Listbox.vue            | 18 +++++++++++------
 components/lib/listbox/style/ListboxStyle.js  | 14 -------------
 components/lib/multiselect/MultiSelect.vue    | 17 +++++++++++-----
 .../lib/multiselect/style/MultiSelectStyle.js | 16 +++------------
 components/lib/select/Select.vue              | 17 +++++++++++-----
 components/lib/select/style/SelectStyle.js    | 14 -------------
 components/lib/themes/aura/listbox/index.js   |  3 ---
 .../lib/themes/aura/multiselect/index.js      |  3 ---
 components/lib/themes/aura/select/index.js    |  3 ---
 components/lib/themes/aura/tree/index.js      |  3 ---
 components/lib/themes/lara/listbox/index.js   |  3 ---
 .../lib/themes/lara/multiselect/index.js      |  3 ---
 components/lib/themes/lara/select/index.js    |  3 ---
 components/lib/themes/lara/tree/index.js      |  3 ---
 components/lib/tree/Tree.vue                  | 20 ++++++++++++-------
 components/lib/tree/style/TreeStyle.js        | 17 ----------------
 16 files changed, 52 insertions(+), 105 deletions(-)

diff --git a/components/lib/listbox/Listbox.vue b/components/lib/listbox/Listbox.vue
index e5406ebe3..7210c6a08 100755
--- a/components/lib/listbox/Listbox.vue
+++ b/components/lib/listbox/Listbox.vue
@@ -15,7 +15,7 @@
             <slot name="header" :value="modelValue" :options="visibleOptions"></slot>
         </div>
         <div v-if="filter" :class="cx('header')" v-bind="ptm('header')">
-            <div :class="cx('filterContainer')" v-bind="ptm('filterContainer')">
+            <IconField :unstyled="unstyled" v-bind="ptm('pcFilterContainer')">
                 <InputText
                     v-model="filterValue"
                     type="text"
@@ -34,11 +34,13 @@
                     @keydown="onFilterKeyDown"
                     :pt="ptm('pcFilter')"
                 />
-
-                <slot name="filtericon" :class="cx('filterIcon')">
-                    <component :is="filterIcon ? 'span' : 'SearchIcon'" :class="[cx('filterIcon'), filterIcon]" v-bind="ptm('filterIcon')" />
-                </slot>
-            </div>
+                <InputIcon :unstyled="unstyled" v-bind="ptm('pcFilterIconContainer')">
+                    <slot name="filtericon">
+                        <span v-if="filterIcon" :class="filterIcon" v-bind="ptm('filterIcon')" />
+                        <SearchIcon v-else v-bind="ptm('filterIcon')" />
+                    </slot>
+                </InputIcon>
+            </IconField>
             <span role="status" aria-live="polite" class="p-hidden-accessible" v-bind="ptm('hiddenFilterResult')" :data-p-hidden-accessible="true">
                 {{ filterResultMessageText }}
             </span>
@@ -128,7 +130,9 @@
 
 <script>
 import { FilterService } from 'primevue/api';
+import IconField from 'primevue/iconfield';
 import SearchIcon from 'primevue/icons/search';
+import InputIcon from 'primevue/inputicon';
 import InputText from 'primevue/inputtext';
 import Ripple from 'primevue/ripple';
 import { DomHandler, ObjectUtils, UniqueComponentId } from 'primevue/utils';
@@ -748,6 +752,8 @@ export default {
     components: {
         InputText,
         VirtualScroller,
+        InputIcon,
+        IconField,
         SearchIcon
     }
 };
diff --git a/components/lib/listbox/style/ListboxStyle.js b/components/lib/listbox/style/ListboxStyle.js
index 854026e5f..905cec8f6 100644
--- a/components/lib/listbox/style/ListboxStyle.js
+++ b/components/lib/listbox/style/ListboxStyle.js
@@ -32,18 +32,6 @@ const theme = ({ dt }) => `
     padding: ${dt('listbox.header.padding')};
 }
 
-.p-listbox-filter-container {
-    position: relative;
-}
-
-.p-listbox-filter-icon {
-    position: absolute;
-    top: 50%;
-    margin-top: -0.5rem;
-    right: 0.75rem;
-    color: ${dt('listbox.filter.icon.color')};
-}
-
 .p-listbox-filter {
     width: 100%;
     padding-right: 1.75rem;
@@ -117,9 +105,7 @@ const classes = {
         }
     ],
     header: 'p-listbox-header',
-    filterContainer: 'p-listbox-filter-container',
     pcFilter: 'p-listbox-filter',
-    filterIcon: 'p-listbox-filter-icon',
     listContainer: 'p-listbox-list-container',
     list: 'p-listbox-list',
     optionGroup: 'p-listbox-option-group',
diff --git a/components/lib/multiselect/MultiSelect.vue b/components/lib/multiselect/MultiSelect.vue
index 1faadc0ab..602c9f3aa 100755
--- a/components/lib/multiselect/MultiSelect.vue
+++ b/components/lib/multiselect/MultiSelect.vue
@@ -86,7 +86,7 @@
                                 <component v-else-if="slotProps.checked" :is="checkboxIcon ? 'span' : 'CheckIcon'" :class="[slotProps.class, { [checkboxIcon]: slotProps.checked }]" v-bind="getHeaderCheckboxPTOptions('pcHeaderCheckbox.icon')" />
                             </template>
                         </Checkbox>
-                        <div v-if="filter" :class="cx('filterContainer')" v-bind="ptm('filterContainer')">
+                        <IconField :class="cx('pcFilterContainer')" :unstyled="unstyled" :pt="ptm('pcFilterContainer')">
                             <InputText
                                 ref="filterInput"
                                 :value="filterValue"
@@ -107,10 +107,13 @@
                                 @input="onFilterChange"
                                 :pt="ptm('pcFilter')"
                             />
-                            <slot name="filtericon" :class="cx('filterIcon')">
-                                <component :is="filterIcon ? 'span' : 'SearchIcon'" :class="[cx('filterIcon'), filterIcon]" v-bind="ptm('filterIcon')" />
-                            </slot>
-                        </div>
+                            <InputIcon :unstyled="unstyled" v-bind="ptm('pcFilterIconContainer')">
+                                <slot name="filtericon">
+                                    <span v-if="filterIcon" :class="filterIcon" v-bind="ptm('filterIcon')" />
+                                    <SearchIcon v-else v-bind="ptm('filterIcon')" />
+                                </slot>
+                            </InputIcon>
+                        </IconField>
                         <span v-if="filter" role="status" aria-live="polite" class="p-hidden-accessible" v-bind="ptm('hiddenFilterResult')" :data-p-hidden-accessible="true">
                             {{ filterResultMessageText }}
                         </span>
@@ -206,11 +209,13 @@
 import { FilterService } from 'primevue/api';
 import Checkbox from 'primevue/checkbox';
 import Chip from 'primevue/chip';
+import IconField from 'primevue/iconfield';
 import CheckIcon from 'primevue/icons/check';
 import ChevronDownIcon from 'primevue/icons/chevrondown';
 import SearchIcon from 'primevue/icons/search';
 import SpinnerIcon from 'primevue/icons/spinner';
 import TimesIcon from 'primevue/icons/times';
+import InputIcon from 'primevue/inputicon';
 import InputText from 'primevue/inputtext';
 import OverlayEventBus from 'primevue/overlayeventbus';
 import Portal from 'primevue/portal';
@@ -1109,6 +1114,8 @@ export default {
         VirtualScroller,
         Portal,
         Chip,
+        IconField,
+        InputIcon,
         TimesIcon,
         SearchIcon,
         ChevronDownIcon,
diff --git a/components/lib/multiselect/style/MultiSelectStyle.js b/components/lib/multiselect/style/MultiSelectStyle.js
index 71e76de8b..831e12672 100644
--- a/components/lib/multiselect/style/MultiSelectStyle.js
+++ b/components/lib/multiselect/style/MultiSelectStyle.js
@@ -112,16 +112,11 @@ const theme = ({ dt }) => `
 }
 
 .p-multiselect-filter-container {
-    position: relative;
     flex: 1 1 auto;
 }
 
-.p-multiselect-filter-icon {
-    position: absolute;
-    top: 50%;
-    margin-top: -0.5rem;
-    right: 0.75rem;
-    color: ${dt('multiselect.filter.icon.color')};
+.p-multiselect-list-container {
+    overflow: auto;
 }
 
 .p-multiselect-filter-container .p-inputtext {
@@ -129,10 +124,6 @@ const theme = ({ dt }) => `
     padding-right: 1.75rem;
 }
 
-.p-multiselect-list-container {
-    overflow: auto;
-}
-
 .p-multiselect-list {
     margin: 0;
     padding: 0;
@@ -242,9 +233,8 @@ const classes = {
         }
     ],
     header: 'p-multiselect-header',
-    filterContainer: 'p-multiselect-filter-container',
+    pcFilterContainer: 'p-multiselect-filter-container',
     pcFilter: 'p-multiselect-filter',
-    filterIcon: 'p-multiselect-filter-icon',
     listContainer: 'p-multiselect-list-container',
     list: 'p-multiselect-list',
     optionGroup: 'p-multiselect-option-group',
diff --git a/components/lib/select/Select.vue b/components/lib/select/Select.vue
index 98c07ee45..403e2afc5 100755
--- a/components/lib/select/Select.vue
+++ b/components/lib/select/Select.vue
@@ -76,7 +76,7 @@
                     ></span>
                     <slot name="header" :value="modelValue" :options="visibleOptions"></slot>
                     <div v-if="filter" :class="cx('header')" v-bind="ptm('header')">
-                        <div :class="cx('filterContainer')" v-bind="ptm('filterContainer')">
+                        <IconField :unstyled="unstyled" v-bind="ptm('pcFilterContainer')">
                             <InputText
                                 ref="filterInput"
                                 type="text"
@@ -97,10 +97,13 @@
                                 @input="onFilterChange"
                                 :pt="ptm('pcFilter')"
                             />
-                            <slot name="filtericon" :class="cx('filterIcon')">
-                                <component :is="filterIcon ? 'span' : 'SearchIcon'" :class="[cx('filterIcon'), filterIcon]" v-bind="ptm('filterIcon')" />
-                            </slot>
-                        </div>
+                            <InputIcon :unstyled="unstyled" v-bind="ptm('pcFilterIconContainer')">
+                                <slot name="filtericon">
+                                    <span v-if="filterIcon" :class="filterIcon" v-bind="ptm('filterIcon')" />
+                                    <SearchIcon v-else v-bind="ptm('filterIcon')" />
+                                </slot>
+                            </InputIcon>
+                        </IconField>
                         <span role="status" aria-live="polite" class="p-hidden-accessible" v-bind="ptm('hiddenFilterResult')" :data-p-hidden-accessible="true">
                             {{ filterResultMessageText }}
                         </span>
@@ -189,12 +192,14 @@
 
 <script>
 import { FilterService } from 'primevue/api';
+import IconField from 'primevue/iconfield';
 import BlankIcon from 'primevue/icons/blank';
 import CheckIcon from 'primevue/icons/check';
 import ChevronDownIcon from 'primevue/icons/chevrondown';
 import SearchIcon from 'primevue/icons/search';
 import SpinnerIcon from 'primevue/icons/spinner';
 import TimesIcon from 'primevue/icons/times';
+import InputIcon from 'primevue/inputicon';
 import InputText from 'primevue/inputtext';
 import OverlayEventBus from 'primevue/overlayeventbus';
 import Portal from 'primevue/portal';
@@ -992,6 +997,8 @@ export default {
         InputText,
         VirtualScroller,
         Portal,
+        InputIcon,
+        IconField,
         TimesIcon,
         ChevronDownIcon,
         SpinnerIcon,
diff --git a/components/lib/select/style/SelectStyle.js b/components/lib/select/style/SelectStyle.js
index 2e04a28f6..9deb1da80 100644
--- a/components/lib/select/style/SelectStyle.js
+++ b/components/lib/select/style/SelectStyle.js
@@ -121,18 +121,6 @@ input.p-select-label {
     margin-right: -1.75rem;
 }
 
-.p-select-filter-container {
-    position: relative;
-}
-
-.p-select-filter-icon {
-    position: absolute;
-    top: 50%;
-    margin-top: -0.5rem;
-    right: 0.75rem;
-    color: ${dt('select.filter.icon.color')};
-}
-
 .p-select-list-container {
     overflow: auto;
 }
@@ -245,9 +233,7 @@ const classes = {
         }
     ],
     header: 'p-select-header',
-    filterContainer: 'p-select-filter-container',
     pcFilter: 'p-select-filter',
-    filterIcon: 'p-select-filter-icon',
     listContainer: 'p-select-list-container',
     list: 'p-select-list',
     optionGroup: 'p-select-option-group',
diff --git a/components/lib/themes/aura/listbox/index.js b/components/lib/themes/aura/listbox/index.js
index f19b93f7e..125c05deb 100644
--- a/components/lib/themes/aura/listbox/index.js
+++ b/components/lib/themes/aura/listbox/index.js
@@ -41,8 +41,5 @@ export default {
         color: '{list.option.group.color}',
         fontWeight: '{list.option.group.font.weight}',
         padding: '{list.option.group.padding}'
-    },
-    filterIcon: {
-        color: '{form.field.icon.color}'
     }
 };
diff --git a/components/lib/themes/aura/multiselect/index.js b/components/lib/themes/aura/multiselect/index.js
index 9f44920da..9eca8755c 100644
--- a/components/lib/themes/aura/multiselect/index.js
+++ b/components/lib/themes/aura/multiselect/index.js
@@ -33,8 +33,5 @@ export default {
     optionGroup: {
         background: '{list.option.group.background}',
         color: '{list.option.group.color}'
-    },
-    filterIcon: {
-        color: '{form.field.icon.color}'
     }
 };
diff --git a/components/lib/themes/aura/select/index.js b/components/lib/themes/aura/select/index.js
index 2af90a30d..154e22989 100644
--- a/components/lib/themes/aura/select/index.js
+++ b/components/lib/themes/aura/select/index.js
@@ -34,9 +34,6 @@ export default {
         background: '{list.option.group.background}',
         color: '{list.option.group.color}'
     },
-    filterIcon: {
-        color: '{form.field.icon.color}'
-    },
     checkmark: {
         color: '{list.option.color}'
     }
diff --git a/components/lib/themes/aura/tree/index.js b/components/lib/themes/aura/tree/index.js
index 3e08dc3e5..7900b39df 100644
--- a/components/lib/themes/aura/tree/index.js
+++ b/components/lib/themes/aura/tree/index.js
@@ -17,8 +17,5 @@ export default {
         highlightHoverBackground: '{content.background}',
         color: '{text.muted.color}',
         hoverColor: '{text.hover.muted.color}'
-    },
-    filterIcon: {
-        color: '{surface.400}'
     }
 };
diff --git a/components/lib/themes/lara/listbox/index.js b/components/lib/themes/lara/listbox/index.js
index bc3bb5fef..192623632 100644
--- a/components/lib/themes/lara/listbox/index.js
+++ b/components/lib/themes/lara/listbox/index.js
@@ -41,8 +41,5 @@ export default {
         color: '{list.option.group.color}',
         fontWeight: '{list.option.group.font.weight}',
         padding: '{list.option.group.padding}'
-    },
-    filterIcon: {
-        color: '{form.field.icon.color}'
     }
 };
diff --git a/components/lib/themes/lara/multiselect/index.js b/components/lib/themes/lara/multiselect/index.js
index 9f44920da..9eca8755c 100644
--- a/components/lib/themes/lara/multiselect/index.js
+++ b/components/lib/themes/lara/multiselect/index.js
@@ -33,8 +33,5 @@ export default {
     optionGroup: {
         background: '{list.option.group.background}',
         color: '{list.option.group.color}'
-    },
-    filterIcon: {
-        color: '{form.field.icon.color}'
     }
 };
diff --git a/components/lib/themes/lara/select/index.js b/components/lib/themes/lara/select/index.js
index 2af90a30d..154e22989 100644
--- a/components/lib/themes/lara/select/index.js
+++ b/components/lib/themes/lara/select/index.js
@@ -34,9 +34,6 @@ export default {
         background: '{list.option.group.background}',
         color: '{list.option.group.color}'
     },
-    filterIcon: {
-        color: '{form.field.icon.color}'
-    },
     checkmark: {
         color: '{list.option.color}'
     }
diff --git a/components/lib/themes/lara/tree/index.js b/components/lib/themes/lara/tree/index.js
index 3e08dc3e5..7900b39df 100644
--- a/components/lib/themes/lara/tree/index.js
+++ b/components/lib/themes/lara/tree/index.js
@@ -17,8 +17,5 @@ export default {
         highlightHoverBackground: '{content.background}',
         color: '{text.muted.color}',
         hoverColor: '{text.hover.muted.color}'
-    },
-    filterIcon: {
-        color: '{surface.400}'
     }
 };
diff --git a/components/lib/tree/Tree.vue b/components/lib/tree/Tree.vue
index bc16033fc..3efa4b88a 100755
--- a/components/lib/tree/Tree.vue
+++ b/components/lib/tree/Tree.vue
@@ -8,13 +8,15 @@
                 </slot>
             </div>
         </template>
-        <div v-if="filter" :class="cx('filterContainer')" v-bind="ptm('filterContainer')">
-            <InputText v-model="filterValue" autocomplete="off" :class="cx('pcFilterInput')" :placeholder="filterPlaceholder" @keydown="onFilterKeydown" v-bind="ptm('pcFilterInput')" />
-            <!--TODO: searchicon deprecated since v4.0-->
-            <slot :name="$slots.filtericon ? 'filtericon' : 'searchicon'" :class="cx('filterIcon')">
-                <SearchIcon :class="cx('filterIcon')" v-bind="ptm('filterIcon')" />
-            </slot>
-        </div>
+        <IconField v-if="filter" :unstyled="unstyled" v-bind="ptm('pcFilterContainer')">
+            <InputText v-model="filterValue" autocomplete="off" :class="cx('pcFilterInput')" :placeholder="filterPlaceholder" :unstyled="unstyled" @keydown="onFilterKeydown" v-bind="ptm('pcFilterInput')" />
+            <InputIcon :unstyled="unstyled" v-bind="ptm('pcFilterIconContainer')">
+                <!--TODO: searchicon deprecated since v4.0-->
+                <slot :name="$slots.filtericon ? 'filtericon' : 'searchicon'" :class="cx('filterIcon')">
+                    <SearchIcon :class="cx('filterIcon')" v-bind="ptm('filterIcon')" />
+                </slot>
+            </InputIcon>
+        </IconField>
         <div :class="cx('wrapper')" :style="{ maxHeight: scrollHeight }" v-bind="ptm('wrapper')">
             <ul :class="cx('rootChildren')" role="tree" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel" v-bind="ptm('rootChildren')">
                 <TreeNode
@@ -40,8 +42,10 @@
 </template>
 
 <script>
+import IconField from 'primevue/iconfield';
 import SearchIcon from 'primevue/icons/search';
 import SpinnerIcon from 'primevue/icons/spinner';
+import InputIcon from 'primevue/inputicon';
 import InputText from 'primevue/inputtext';
 import { ObjectUtils } from 'primevue/utils';
 import BaseTree from './BaseTree.vue';
@@ -244,6 +248,8 @@ export default {
     components: {
         TreeNode,
         InputText,
+        InputIcon,
+        IconField,
         SearchIcon,
         SpinnerIcon
     }
diff --git a/components/lib/tree/style/TreeStyle.js b/components/lib/tree/style/TreeStyle.js
index c4cb41ec4..fd3a5dbfa 100644
--- a/components/lib/tree/style/TreeStyle.js
+++ b/components/lib/tree/style/TreeStyle.js
@@ -133,21 +133,6 @@ const theme = ({ dt }) => `
     padding-right: 1.75rem;
 }
 
-.p-tree-filter-container {
-    position: relative;
-    display: block;
-    width: 100%;
-    margin-bottom: 0.5rem;
-}
-
-.p-tree-filter-icon {
-    position: absolute;
-    top: 50%;
-    margin-top: -0.5rem;
-    right: 0.75rem;
-    color: ${dt('tree.filter.icon.color')};
-}
-
 .p-tree-loading {
     position: relative;
     min-height: 4rem;
@@ -190,9 +175,7 @@ const classes = {
     ],
     mask: 'p-tree-mask p-component-overlay',
     loadingIcon: 'p-tree-loading-icon',
-    filterContainer: 'p-tree-filter-container',
     pcFilterInput: 'p-tree-filter-input',
-    filterIcon: 'p-tree-filter-icon',
     wrapper: 'p-tree-root', //TODO: discuss
     rootChildren: 'p-tree-root-children',
     node: ({ instance }) => ['p-tree-node', { 'p-tree-node-leaf': instance.leaf }],