primevue 3.16.2 → 3.18.0

package/cascadeselect/CascadeSelectSub.vue

@@ -1,25 +1,48 @@
 <template>
     <ul class="p-cascadeselect-panel p-cascadeselect-items">
-        <template v-for="(processedOption,index) of options" :key="getOptionLabelToRender(processedOption)">
-            <li :id="getOptionId(processedOption)" :class="['p-cascadeselect-item', {'p-cascadeselect-item-group': isOptionGroup(processedOption), 'p-cascadeselect-item-active p-highlight': isOptionActive(processedOption), 'p-focus': isOptionFocused(processedOption), 'p-disabled': isOptionDisabled(processedOption)}]"
-                role="treeitem" :aria-label="getOptionLabelToRender(processedOption)" :aria-selected="isOptionGroup(processedOption) ? undefined : isOptionSelected(processedOption)" :aria-expanded="isOptionGroup(processedOption) ? isOptionActive(processedOption) : undefined"
-                :aria-setsize="processedOption.length" :aria-posinset="index + 1" :aria-level="level + 1">
-                <div class="p-cascadeselect-item-content" @click="onOptionClick($event, processedOption)" v-ripple>
+        <template v-for="(processedOption, index) of options" :key="getOptionLabelToRender(processedOption)">
+            <li
+                :id="getOptionId(processedOption)"
+                :class="getOptionClass(processedOption)"
+                role="treeitem"
+                :aria-label="getOptionLabelToRender(processedOption)"
+                :aria-selected="isOptionGroup(processedOption) ? undefined : isOptionSelected(processedOption)"
+                :aria-expanded="isOptionGroup(processedOption) ? isOptionActive(processedOption) : undefined"
+                :aria-level="level + 1"
+                :aria-setsize="options.length"
+                :aria-posinset="index + 1"
+            >
+                <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 pi pi-angle-right" aria-hidden="true"></span>
+                    <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>
                 </div>
-                <CascadeSelectSub v-if="isOptionGroup(processedOption) && isOptionActive(processedOption)" role="group" class="p-cascadeselect-sublist" :selectId="selectId" :focusedOptionId="focusedOptionId"
-                    :options="getOptionGroupChildren(processedOption)" :activeOptionPath="activeOptionPath" :level="level + 1" :templates="templates" :optionLabel="optionLabel" :optionValue="optionValue" :optionDisabled="optionDisabled"
-                    :optionGroupLabel="optionGroupLabel" :optionGroupChildren="optionGroupChildren" @option-change="onOptionChange" />
+                <CascadeSelectSub
+                    v-if="isOptionGroup(processedOption) && isOptionActive(processedOption)"
+                    role="group"
+                    class="p-cascadeselect-sublist"
+                    :selectId="selectId"
+                    :focusedOptionId="focusedOptionId"
+                    :options="getOptionGroupChildren(processedOption)"
+                    :activeOptionPath="activeOptionPath"
+                    :level="level + 1"
+                    :templates="templates"
+                    :optionLabel="optionLabel"
+                    :optionValue="optionValue"
+                    :optionDisabled="optionDisabled"
+                    :optionGroupIcon="optionGroupIcon"
+                    :optionGroupLabel="optionGroupLabel"
+                    :optionGroupChildren="optionGroupChildren"
+                    @option-change="onOptionChange"
+                />
             </li>
         </template>
     </ul>
 </template>
 
 <script>
-import {ObjectUtils,DomHandler} from 'primevue/utils';
 import Ripple from 'primevue/ripple';
+import { DomHandler, ObjectUtils } from 'primevue/utils';
 
 export default {
     name: 'CascadeSelectSub',
@@ -31,6 +54,7 @@ export default {
         optionLabel: String,
         optionValue: String,
         optionDisabled: null,
+        optionGroupIcon: String,
         optionGroupLabel: String,
         optionGroupChildren: Array,
         activeOptionPath: Array,
@@ -68,7 +92,7 @@ export default {
             return !this.isOptionGroup(processedOption) && this.isOptionActive(processedOption);
         },
         isOptionActive(processedOption) {
-            return this.activeOptionPath.some(path => path.key === processedOption.key);
+            return this.activeOptionPath.some((path) => path.key === processedOption.key);
         },
         isOptionFocused(processedOption) {
             return this.focusedOptionId === this.getOptionId(processedOption);
@@ -89,13 +113,24 @@ export default {
             const sublistWidth = this.$el.offsetParent ? this.$el.offsetWidth : DomHandler.getHiddenElementOuterWidth(this.$el);
             const itemOuterWidth = DomHandler.getOuterWidth(parentItem.children[0]);
 
-            if ((parseInt(containerOffset.left, 10) + itemOuterWidth + sublistWidth) > (viewport.width - DomHandler.calculateScrollbarWidth())) {
+            if (parseInt(containerOffset.left, 10) + itemOuterWidth + sublistWidth > viewport.width - DomHandler.calculateScrollbarWidth()) {
                 this.$el.style.left = '-100%';
             }
+        },
+        getOptionClass(processedOption) {
+            return [
+                'p-cascadeselect-item',
+                {
+                    'p-cascadeselect-item-group': this.isOptionGroup(processedOption),
+                    'p-cascadeselect-item-active p-highlight': this.isOptionActive(processedOption),
+                    'p-focus': this.isOptionFocused(processedOption),
+                    'p-disabled': this.isOptionDisabled(processedOption)
+                }
+            ];
         }
     },
     directives: {
-        'ripple': Ripple
+        ripple: Ripple
     }
-}
+};
 </script>