Fixed #1565 - Add indicator slot

primefaces · Sep 20, 2021 · e367eec · e367eec
1 parent dfb679e
commit e367eec
Show file tree

Hide file tree

Showing 12 changed files with 38 additions and 3 deletions.
diff --git a/api-generator/components/cascadeselect.js b/api-generator/components/cascadeselect.js
@@ -138,6 +138,10 @@ const CascadeSelectSlots = [
     {
         name: "option",
         description: "Custom content for the item's option"
+    },
+    {
+        name: "indicator",
+        description: "Custom content for the cascade select indicator"
     }
 ];
 

diff --git a/api-generator/components/dropdown.js b/api-generator/components/dropdown.js
@@ -185,6 +185,10 @@ const DropdownSlots = [
     {
         name: "value",
         description: "Custom content for the item's value"
+    },
+    {
+        name: "indicator",
+        description: "Custom content for the dropdown indicator"
     }
 ];
 

diff --git a/api-generator/components/multiselect.js b/api-generator/components/multiselect.js
@@ -191,6 +191,10 @@ const MultiSelectSlots = [
     {
         name: "value",
         description: "Custom content for the item value"
+    },
+    {
+        name: "indicator",
+        description: "Custom content for the multiselect indicator"
     }
 ];
 

diff --git a/src/components/cascadeselect/CascadeSelect.d.ts b/src/components/cascadeselect/CascadeSelect.d.ts
@@ -23,6 +23,8 @@ declare class CascadeSelect extends Vue {
     $emit(eventName: 'hide'): this;
     $slot: {
         option: VNode[];
+        value: VNode[];
+        indicator: VNode[];
     }
 }
 

diff --git a/src/components/cascadeselect/CascadeSelect.vue b/src/components/cascadeselect/CascadeSelect.vue
@@ -10,7 +10,9 @@
             </slot>
         </span>
         <div class="p-cascadeselect-trigger" role="button" aria-haspopup="listbox" :aria-expanded="overlayVisible">
-            <span class="p-cascadeselect-trigger-icon pi pi-chevron-down"></span>
+            <slot name="indicator">
+                <span class="p-cascadeselect-trigger-icon pi pi-chevron-down"></span>
+            </slot>
         </div>
         <transition name="p-connected-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave">
             <div ref="overlay" class="p-cascadeselect-panel p-component" v-if="overlayVisible">

diff --git a/src/components/dropdown/Dropdown.d.ts b/src/components/dropdown/Dropdown.d.ts
@@ -29,6 +29,8 @@ declare class Dropdown extends Vue {
     $emit(eventName: 'filter', e: { originalEvent: Event, value: string }): this;
     $slot: {
         option: VNode[];
+        value: VNode[];
+        indicator: VNode[];
     }
 }
 

diff --git a/src/components/dropdown/Dropdown.vue b/src/components/dropdown/Dropdown.vue
@@ -13,7 +13,9 @@
         </span>
         <i v-if="showClear && value != null" class="p-dropdown-clear-icon pi pi-times" @click="onClearClick($event)"></i>
         <div class="p-dropdown-trigger" role="button" aria-haspopup="listbox" :aria-expanded="overlayVisible">
-            <span class="p-dropdown-trigger-icon pi pi-chevron-down"></span>
+            <slot name="indicator">
+                <span class="p-dropdown-trigger-icon pi pi-chevron-down"></span>
+            </slot>
         </div>
         <transition name="p-connected-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave">
             <div ref="overlay" class="p-dropdown-panel p-component" v-if="overlayVisible">

diff --git a/src/components/multiselect/MultiSelect.d.ts b/src/components/multiselect/MultiSelect.d.ts
@@ -31,6 +31,7 @@ declare class MultiSelect extends Vue {
     $slots: {
         value: VNode[];
         option: VNode[];
+        indicator: VNode[];
     }
 }
 

diff --git a/src/components/multiselect/MultiSelect.vue b/src/components/multiselect/MultiSelect.vue
@@ -21,7 +21,9 @@
             </div>
         </div>
         <div class="p-multiselect-trigger">
-            <span class="p-multiselect-trigger-icon pi pi-chevron-down"></span>
+            <slot name="indicator">
+                 <span class="p-multiselect-trigger-icon pi pi-chevron-down"></span>
+            </slot>
         </div>
         <transition name="p-connected-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave">
             <div ref="overlay" class="p-multiselect-panel p-component" v-if="overlayVisible">

diff --git a/src/views/cascadeselect/CascadeSelectDoc.vue b/src/views/cascadeselect/CascadeSelectDoc.vue
@@ -283,6 +283,10 @@ exports default {
                                 <td>option</td>
                                 <td>option: Option instance</td>
                             </tr>
+                            <tr>
+                                <td>indicator</td>
+                                <td>-</td>
+                            </tr>
                         </tbody>
                     </table>
                 </div>

diff --git a/src/views/dropdown/DropdownDoc.vue b/src/views/dropdown/DropdownDoc.vue
@@ -291,6 +291,10 @@ data() {
                                 <td>value: Value of the component <br />
                                     placeholder: Placeholder prop value</td>
                             </tr>
+                            <tr>
+                                <td>indicator</td>
+                                <td>-</td>
+                            </tr>
                         </tbody>
                     </table>
                 </div>

diff --git a/src/views/multiselect/MultiSelectDoc.vue b/src/views/multiselect/MultiSelectDoc.vue
@@ -303,6 +303,10 @@ data() {
                                 <td>option: Option instance <br />
                                     index: Index of the option</td>
                             </tr>
+                            <tr>
+                                <td>indicator</td>
+                                <td>-</td>
+                            </tr>
                         </tbody>
                     </table>
                 </div>