Refactor #3832 Refactor #3833 - For CascadeSelect

api-generator/components/cascadeselect.js

@@ -107,12 +107,24 @@ const CascadeSelectProps = [
         default: 'false',
         description: 'Whether the multiselect is in loading state.'
     },
+    {
+        name: 'dropdownIcon',
+        type: 'string',
+        default: 'null',
+        description: 'Icon to display in the dropdown.'
+    },
     {
         name: 'loadingIcon',
         type: 'string',
-        default: 'pi pi-spinner pi-spin',
+        default: 'null',
         description: 'Icon to display in loading state.'
     },
+    {
+        name: 'optionGroupIcon',
+        type: 'string',
+        default: 'null',
+        description: 'Icon to display in the option group.'
+    },
     {
         name: 'autoOptionFocus',
         type: 'boolean',
@@ -262,15 +274,19 @@ const CascadeSelectEvents = [
 const CascadeSelectSlots = [
     {
         name: 'value',
-        description: "Custom content for the item's value"
+        description: "Custom content for the item's value."
     },
     {
         name: 'option',
-        description: "Custom content for the item's option"
+        description: "Custom content for the item's option."
     },
     {
         name: 'indicator',
-        description: 'Custom content for the dropdown indicator'
+        description: 'Custom content for the dropdown indicator.'
+    },
+    {
+        name: 'optiongroupicon',
+        description: 'Custom content for the option group icon.'
     }
 ];
 

components/lib/cascadeselect/CascadeSelect.d.ts

@@ -116,17 +116,14 @@ export interface CascadeSelectProps {
     loading?: boolean | undefined;
     /**
      * Icon to display in the dropdown.
-     * @defaultValue pi pi-chevron-down
      */
     dropdownIcon?: string | undefined;
     /**
      * Icon to display in loading state.
-     * @defaultValue pi pi-spinner pi-spin
      */
     loadingIcon?: string | undefined;
     /**
      * Icon to display in the option group.
-     * @defaultValue pi pi-angle-right
      */
     optionGroupIcon?: string | undefined;
     /**
@@ -214,6 +211,10 @@ export interface CascadeSelectSlots {
      * Custom indicator template.
      */
     indicator(): VNode[];
+    /**
+     * Custom option group icon template.
+     */
+    optiongroupicon(): VNode[];
 }
 
 /**

components/lib/cascadeselect/CascadeSelect.vue

@@ -31,7 +31,8 @@
         </span>
         <div class="p-cascadeselect-trigger" role="button" tabindex="-1" aria-hidden="true">
             <slot name="indicator">
-                <span :class="dropdownIconClass"></span>
+                <component v-if="loading" :is="loadingIcon ? 'span' : 'SpinnerIcon'" spin :class="['p-cascadeselect-trigger-icon', loadingIcon]" aria-hidden="true" />
+                <component v-else :is="dropdownIcon ? 'span' : 'ChevronDownIcon'" :class="['p-cascadeselect-trigger-icon', dropdownIcon]" aria-hidden="true" />
             </slot>
         </div>
         <span role="status" aria-live="polite" class="p-hidden-accessible">
@@ -71,6 +72,9 @@
 </template>
 
 <script>
+import AngleRightIcon from 'primevue/icon/angleright';
+import ChevronDownIcon from 'primevue/icon/chevrondown';
+import SpinnerIcon from 'primevue/icon/spinner';
 import OverlayEventBus from 'primevue/overlayeventbus';
 import Portal from 'primevue/portal';
 import { ConnectedOverlayScrollHandler, DomHandler, ObjectUtils, UniqueComponentId, ZIndexUtils } from 'primevue/utils';
@@ -128,15 +132,15 @@ export default {
         },
         dropdownIcon: {
             type: String,
-            default: 'pi pi-chevron-down'
+            default: undefined
         },
         loadingIcon: {
             type: String,
-            default: 'pi pi-spinner pi-spin'
+            default: undefined
         },
         optionGroupIcon: {
             type: String,
-            default: 'pi pi-angle-right'
+            default: undefined
         },
         autoOptionFocus: {
             type: Boolean,
@@ -802,9 +806,6 @@ export default {
                 }
             ];
         },
-        dropdownIconClass() {
-            return ['p-cascadeselect-trigger-icon', this.loading ? this.loadingIcon : this.dropdownIcon];
-        },
         hasSelectedOption() {
             return ObjectUtils.isNotEmpty(this.modelValue);
         },
@@ -858,7 +859,10 @@ export default {
     },
     components: {
         CascadeSelectSub: CascadeSelectSub,
-        Portal: Portal
+        Portal: Portal,
+        ChevronDownIcon: ChevronDownIcon,
+        SpinnerIcon: SpinnerIcon,
+        AngleRightIcon: AngleRightIcon
     }
 };
 </script>

components/lib/cascadeselect/CascadeSelectSub.vue

@@ -15,7 +15,9 @@
                 <div v-ripple class="p-cascadeselect-item-content" @click="onOptionClick($event, processedOption)">
                     <component v-if="templates['option']" :is="templates['option']" :option="processedOption.option" />
                     <span v-else class="p-cascadeselect-item-text">{{ getOptionLabelToRender(processedOption) }}</span>
-                    <span v-if="isOptionGroup(processedOption)" :class="['p-cascadeselect-group-icon', optionGroupIcon]" aria-hidden="true"></span>
+                    <slot v-if="isOptionGroup(processedOption)" name="optiongroupicon">
+                        <component :is="templates['optiongroupicon'] ? templates['optiongroupicon'] : optionGroupIcon ? 'span' : 'AngleRightIcon'" :class="['p-cascadeselect-group-icon', optionGroupIcon]" aria-hidden="true" />
+                    </slot>
                 </div>
                 <CascadeSelectSub
                     v-if="isOptionGroup(processedOption) && isOptionActive(processedOption)"
@@ -41,6 +43,7 @@
 </template>
 
 <script>
+import AngleRightIcon from 'primevue/icon/angleright';
 import Ripple from 'primevue/ripple';
 import { DomHandler, ObjectUtils } from 'primevue/utils';
 
@@ -131,6 +134,9 @@ export default {
     },
     directives: {
         ripple: Ripple
+    },
+    components: {
+        AngleRightIcon: AngleRightIcon
     }
 };
 </script>