From ba75e9c51c91e693e95393429b1cb6f80427976c Mon Sep 17 00:00:00 2001
From: mertsincan <sincan.mert@gmail.com>
Date: Mon, 16 Aug 2021 13:48:28 +0300
Subject: [PATCH] Refactor #1451 - For Listbox

---
 src/components/listbox/Listbox.d.ts |  2 +
 src/components/listbox/Listbox.vue  | 72 ++++++++++++++++++++---------
 2 files changed, 52 insertions(+), 22 deletions(-)

diff --git a/src/components/listbox/Listbox.d.ts b/src/components/listbox/Listbox.d.ts
index b0e325774..651f41015 100755
--- a/src/components/listbox/Listbox.d.ts
+++ b/src/components/listbox/Listbox.d.ts
@@ -1,4 +1,5 @@
 import { VNode } from 'vue';
+import { VirtualScrollerProps } from '../virtualscroller';
 
 interface ListboxProps {
     modelValue?: any;
@@ -20,6 +21,7 @@ interface ListboxProps {
     filterFields?: string[];
     emptyFilterMessage?: string;
     emptyMessage?: string;
+    virtualScrollerOptions?: VirtualScrollerProps;
 }
 
 declare class Listbox {
diff --git a/src/components/listbox/Listbox.vue b/src/components/listbox/Listbox.vue
index 429c2fc18..35512fba3 100755
--- a/src/components/listbox/Listbox.vue
+++ b/src/components/listbox/Listbox.vue
@@ -8,31 +8,38 @@
             </div>
         </div>
         <div class="p-listbox-list-wrapper" :style="listStyle">
-            <ul class="p-listbox-list" role="listbox" aria-multiselectable="multiple">
-                <template v-if="!optionGroupLabel">
-                    <li v-for="(option, i) of visibleOptions" :tabindex="isOptionDisabled(option) ? null : '0'" :class="['p-listbox-item', {'p-highlight': isSelected(option), 'p-disabled': isOptionDisabled(option)}]" v-ripple
-                        :key="getOptionRenderKey(option)" @click="onOptionSelect($event, option)" @touchend="onOptionTouchEnd()" @keydown="onOptionKeyDown($event, option)" role="option" :aria-label="getOptionLabel(option)" :aria-selected="isSelected(option)" >
-                        <slot name="option" :option="option" :index="i">{{getOptionLabel(option)}} </slot>
-                    </li>
-                </template>
-                <template v-else>
-                    <template v-for="(optionGroup, i) of visibleOptions" :key="getOptionGroupRenderKey(optionGroup)">
-                        <li  class="p-listbox-item-group" >
-                            <slot name="optiongroup" :option="optionGroup" :index="i">{{getOptionGroupLabel(optionGroup)}}</slot>
+            <VirtualScroller :ref="virtualScrollerRef" v-bind="virtualScrollerOptions" :style="listStyle" :items="visibleOptions" :disabled="virtualScrollerDisabled">
+                <template v-slot:content="{ styleClass, contentRef, items, getItemOptions }">
+                    <ul :ref="contentRef" :class="['p-listbox-list', styleClass]" role="listbox" aria-multiselectable="multiple">
+                        <template v-if="!optionGroupLabel">
+                            <li v-for="(option, i) of getVisibleOptions(items)" :tabindex="isOptionDisabled(option) ? null : '0'" :class="['p-listbox-item', {'p-highlight': isSelected(option), 'p-disabled': isOptionDisabled(option)}]" v-ripple
+                                :key="getOptionRenderKey(option)" @click="onOptionSelect($event, option)" @touchend="onOptionTouchEnd()" @keydown="onOptionKeyDown($event, option)" role="option" :aria-label="getOptionLabel(option)" :aria-selected="isSelected(option)" >
+                                <slot name="option" :option="option" :index="getOptionIndex(i, getItemOptions)">{{getOptionLabel(option)}} </slot>
+                            </li>
+                        </template>
+                        <template v-else>
+                            <template v-for="(optionGroup, i) of getVisibleOptions(items)" :key="getOptionGroupRenderKey(optionGroup)">
+                                <li  class="p-listbox-item-group">
+                                    <slot name="optiongroup" :option="optionGroup" :index="getOptionIndex(i, getItemOptions)">{{getOptionGroupLabel(optionGroup)}}</slot>
+                                </li>
+                                <li v-for="(option, i) of getOptionGroupChildren(optionGroup)" :tabindex="isOptionDisabled(option) ? null : '0'" :class="['p-listbox-item', {'p-highlight': isSelected(option), 'p-disabled': isOptionDisabled(option)}]" v-ripple
+                                    :key="getOptionRenderKey(option)" @click="onOptionSelect($event, option)" @touchend="onOptionTouchEnd()" @keydown="onOptionKeyDown($event, option)" role="option" :aria-label="getOptionLabel(option)" :aria-selected="isSelected(option)" >
+                                    <slot name="option" :option="option" :index="getOptionIndex(i, getItemOptions)">{{getOptionLabel(option)}}</slot>
+                                </li>
+                            </template>
+                        </template>
+                        <li v-if="filterValue && (!getVisibleOptions(items) || (getVisibleOptions(items) && getVisibleOptions(items).length === 0))" class="p-listbox-empty-message">
+                            <slot name="emptyfilter">{{emptyFilterMessageText}}</slot>
                         </li>
-                        <li v-for="(option, i) of getOptionGroupChildren(optionGroup)" :tabindex="isOptionDisabled(option) ? null : '0'" :class="['p-listbox-item', {'p-highlight': isSelected(option), 'p-disabled': isOptionDisabled(option)}]" v-ripple
-                            :key="getOptionRenderKey(option)" @click="onOptionSelect($event, option)" @touchend="onOptionTouchEnd()" @keydown="onOptionKeyDown($event, option)" role="option" :aria-label="getOptionLabel(option)" :aria-selected="isSelected(option)" >
-                            <slot name="option" :option="option" :index="i">{{getOptionLabel(option)}}</slot>
+                        <li v-else-if="(!options || (options && options.length === 0))" class="p-listbox-empty-message">
+                            <slot name="empty">{{emptyMessageText}}</slot>
                         </li>
-                    </template>
+                    </ul>
                 </template>
-                <li v-if="filterValue && (!visibleOptions || (visibleOptions && visibleOptions.length === 0))" class="p-listbox-empty-message">
-                    <slot name="emptyfilter">{{emptyFilterMessageText}}</slot>
-                </li>
-                <li v-else-if="(!options || (options && options.length === 0))" class="p-listbox-empty-message">
-                    <slot name="empty">{{emptyMessageText}}</slot>
-                </li>
-            </ul>
+                <template v-slot:loader="{ options }" v-if="$slots.loader">
+                    <slot name="loader" :options="options"></slot>
+                </template>
+            </VirtualScroller>
         </div>
         <slot name="footer" :value="modelValue" :options="visibleOptions"></slot>
     </div>
@@ -43,6 +50,7 @@ import {ObjectUtils} from 'primevue/utils';
 import {DomHandler} from 'primevue/utils';
 import {FilterService} from 'primevue/api';
 import Ripple from 'primevue/ripple';
+import VirtualScroller from 'primevue/virtualscroller';
 
 export default {
     name: 'Listbox',
@@ -78,15 +86,26 @@ export default {
         emptyMessage: {
             type: String,
             default: null
+        },
+        virtualScrollerOptions: {
+            type: Object,
+            default: null
         }
     },
     optionTouched: false,
+    virtualScroller: null,
     data() {
         return {
             filterValue: null
         };
     },
     methods: {
+        getVisibleOptions(items) {
+            return items || this.visibleOptions;
+        },
+        getOptionIndex(index, fn) {
+            return this.virtualScrollerDisabled ? index : (fn && fn(index)['index']);
+        },
         getOptionLabel(option) {
             return this.optionLabel ? ObjectUtils.resolveFieldData(option, this.optionLabel) : option;
         },
@@ -268,6 +287,9 @@ export default {
         },
         onFilterChange(event) {
             this.$emit('filter', {originalEvent: event, value: event.target.value});
+        },
+        virtualScrollerRef(el) {
+            this.virtualScroller = el;
         }
     },
     computed: {
@@ -302,10 +324,16 @@ export default {
         },
         emptyMessageText() {
             return this.emptyMessage || this.$primevue.config.locale.emptyMessage;
+        },
+        virtualScrollerDisabled() {
+            return !this.virtualScrollerOptions;
         }
     },
     directives: {
         'ripple': Ripple
+    },
+    components: {
+        'VirtualScroller': VirtualScroller
     }
 }
 </script>