refactor(QVirtualScroll): rename QVirtualList to QVirtualScroll to reflect its new abilities (regarding type prop)

Author: rstoenescu

…components/components/virtual-list-1.vue …mponents/components/virtual-scroll-1.vueui/dev/components/components/virtual-list-1.vue renamed to ui/dev/components/components/virtual-scroll-1.vue ui/dev/components/components/virtual-list-1.vue renamed to ui/dev/components/components/virtual-scroll-1.vue

@@ -18,7 +18,7 @@
           Heavy test - Different components ({{ size.toLocaleString() }} items)
         </div>
         <q-list class="q-my-md bg-grey-10">
-          <q-virtual-list
+          <q-virtual-scroll
             style="max-height: 300px;"
             :items="heavyList"
           >
@@ -48,7 +48,7 @@
                 {{ item.label }} #{{ index }}
               </div>
             </template>
-          </q-virtual-list>
+          </q-virtual-scroll>
         </q-list>
 
         <div class="text-h6 q-mt-lg row items-center justify-between">
@@ -66,7 +66,7 @@
             @change="$refs.vList.scrollTo(scrollTo)"
           />
         </div>
-        <q-virtual-list component="q-list" ref="vList" :items="heavyList" separator class="q-my-md" style="max-height: 300px;">
+        <q-virtual-scroll component="q-list" ref="vList" :items="heavyList" separator class="q-my-md" style="max-height: 300px;">
           <template v-slot="{ item, index }">
             <q-item :key="index">
               <q-item-section>
@@ -88,7 +88,7 @@
               </q-item-section>
             </q-item>
           </template>
-        </q-virtual-list>
+        </q-virtual-scroll>
 
         <div class="text-h6 q-mt-lg row items-center justify-between">
           Horizontal - Variable size ({{ size.toLocaleString() }} items)
@@ -105,7 +105,7 @@
             @change="$refs.vListH.scrollTo(scrollToH)"
           />
         </div>
-        <q-virtual-list ref="vListH" virtual-list-horizontal :items="heavyList" class="q-my-md" style="max-width: 80vw; margin-bottom: 200vh;">
+        <q-virtual-scroll ref="vListH" virtual-scroll-horizontal :items="heavyList" class="q-my-md" style="max-width: 80vw; margin-bottom: 200vh;">
           <template v-slot="{ item, index }">
             <div class="row no-wrap items-center" :key="index">
               <q-avatar square color="warning" text-color="negative">
@@ -120,7 +120,7 @@
               <q-separator v-if="index < heavyList.length - 1" vertical spaced />
             </div>
           </template>
-        </q-virtual-list>
+        </q-virtual-scroll>
       </q-page>
     </q-page-container>
   </q-layout>

…components/components/virtual-list-2.vue …mponents/components/virtual-scroll-2.vueui/dev/components/components/virtual-list-2.vue renamed to ui/dev/components/components/virtual-scroll-2.vue ui/dev/components/components/virtual-list-2.vue renamed to ui/dev/components/components/virtual-scroll-2.vue

@@ -5,7 +5,7 @@
         <div class="text-h6 q-my-lg q-pa-lg bg-grey-10 text-white" style="height: 500px">
           Before list
         </div>
-        <q-virtual-list component="q-list" :items="heavyList" separator scroll-target="body">
+        <q-virtual-scroll component="q-list" :items="heavyList" separator scroll-target="body">
           <template v-slot="{ item, index }">
             <q-item
               v-if="(index % 3) === 0"
@@ -30,7 +30,7 @@
               {{ item.label }} #{{ index }}
             </div>
           </template>
-        </q-virtual-list>
+        </q-virtual-scroll>
         <div class="text-h6 q-my-lg q-pa-lg bg-grey-10 text-white" style="height: 800px">
           After list
         </div>

…components/components/virtual-list-3.vue …mponents/components/virtual-scroll-3.vueui/dev/components/components/virtual-list-3.vue renamed to ui/dev/components/components/virtual-scroll-3.vue ui/dev/components/components/virtual-list-3.vue renamed to ui/dev/components/components/virtual-scroll-3.vue

@@ -6,12 +6,12 @@
           Virtual list with dynamic generated items ({{ size.toLocaleString() }} items)
         </div>
 
-        <q-virtual-list
+        <q-virtual-scroll
           class="bg-white col"
           component="q-list"
           :items-size="size"
           :items-fn="getItems"
-          :virtual-list-item-size="5"
+          :virtual-scroll-item-size="5"
           separator
           ref="list"
         >
@@ -36,7 +36,7 @@
               </q-item-section>
             </q-item>
           </template>
-        </q-virtual-list>
+        </q-virtual-scroll>
 
         <div class="q-pa-md row justify-between">
           <q-btn label="+1e5" @click="() => { size += 1e5 }" />

…components/components/virtual-list-4.vue …mponents/components/virtual-scroll-4.vueui/dev/components/components/virtual-list-4.vue renamed to ui/dev/components/components/virtual-scroll-4.vue ui/dev/components/components/virtual-list-4.vue renamed to ui/dev/components/components/virtual-scroll-4.vue

@@ -11,7 +11,7 @@
           <div class="text-h6 q-my-lg q-pa-lg bg-grey-10 text-white" style="height: 500px">
             Before list
           </div>
-          <q-virtual-list component="q-list" :items="heavyList" separator :scroll-target="scrollTarget" @virtual-scroll="onVirtualScroll1">
+          <q-virtual-scroll component="q-list" :items="heavyList" separator :scroll-target="scrollTarget" @virtual-scroll="onVirtualScroll1">
             <template v-slot="{ item, index }">
               <q-item
                 v-if="(index % 3) === 0"
@@ -36,7 +36,7 @@
                 {{ item.label }} #{{ index }}
               </div>
             </template>
-          </q-virtual-list>
+          </q-virtual-scroll>
           <div class="text-h6 q-my-lg q-pa-lg bg-grey-10 text-white" style="height: 800px">
             After list
           </div>
@@ -55,7 +55,7 @@
             />
           </div>
 
-          <q-virtual-list
+          <q-virtual-scroll
             ref="virtualListRef"
             class="q-my-md"
             style="max-height: 300px;"
@@ -81,7 +81,7 @@
                 </q-item-section>
               </q-item>
             </template>
-          </q-virtual-list>
+          </q-virtual-scroll>
         </div>
       </q-page>
     </q-page-container>

…components/components/virtual-list-5.vue …mponents/components/virtual-scroll-5.vueui/dev/components/components/virtual-list-5.vue renamed to ui/dev/components/components/virtual-scroll-5.vue ui/dev/components/components/virtual-list-5.vue renamed to ui/dev/components/components/virtual-scroll-5.vue

@@ -2,10 +2,10 @@
   <q-layout view="lHh LpR fFf">
     <q-page-container>
       <q-page padding class="bg-white q-pr-xl">
-        <q-virtual-list
+        <q-virtual-scroll
           type="table"
           style="max-height: 70vh"
-          :virtual-list-item-size="48"
+          :virtual-scroll-item-size="48"
           :items="heavyList"
         >
           <template v-slot:before>
@@ -51,7 +51,7 @@
               </td>
             </tr>
           </template>
-        </q-virtual-list>
+        </q-virtual-scroll>
       </q-page>
     </q-page-container>
   </q-layout>

ui/dev/components/form/select-part-3.vue

@@ -143,7 +143,7 @@
         style="width: 250px"
         clearable
         :behavior="behavior"
-        virtual-list-horizontal
+        virtual-scroll-horizontal
       >
         <template v-slot:no-option>
           <q-item>

ui/src/components.js

@@ -59,4 +59,4 @@ export * from './components/tooltip/index.js'
 export * from './components/tree/index.js'
 export * from './components/uploader/index.js'
 export * from './components/video/index.js'
-export * from './components/virtual-list/index.js'
+export * from './components/virtual-scroll/index.js'

ui/src/components/list/list.styl

@@ -85,7 +85,7 @@
     border 1px solid $separator-color
   &--separator
     > .q-item-type + .q-item-type,
-    > .q-virtual-list__content > .q-item-type + .q-item-type
+    > .q-virtual-scroll__content > .q-item-type + .q-item-type
       border-top 1px solid $separator-color
   &--padding
     padding 8px 0
@@ -96,7 +96,7 @@
 
 .q-list--dark.q-list--separator
   > .q-item-type + .q-item-type,
-  > .q-virtual-list__content > .q-item-type + .q-item-type
+  > .q-virtual-scroll__content > .q-item-type + .q-item-type
     border-top-color $separator-dark-color
 
 .q-list--dark, .q-item--dark

ui/src/components/select/QSelect.js

@@ -15,14 +15,14 @@ import { isDeepEqual } from '../../utils/is.js'
 import { stop, prevent, stopAndPrevent } from '../../utils/event.js'
 import { normalizeToInterval } from '../../utils/format.js'
 
-import VirtualList from '../../mixins/virtual-list.js'
+import VirtualScroll from '../../mixins/virtual-scroll.js'
 
 const validateNewValueMode = v => ['add', 'add-unique', 'toggle'].includes(v)
 
 export default Vue.extend({
   name: 'QSelect',
 
-  mixins: [ QField, VirtualList ],
+  mixins: [ QField, VirtualScroll ],
 
   props: {
     value: {
@@ -122,7 +122,7 @@ export default Vue.extend({
   },
 
   computed: {
-    virtualListLength () {
+    virtualScrollLength () {
       return Array.isArray(this.options)
         ? this.options.length
         : 0
@@ -133,7 +133,7 @@ export default Vue.extend({
     },
 
     menuContentClass () {
-      return (this.virtualListHorizontal === true ? 'q-virtual-list--horizontal' : '') +
+      return (this.virtualScrollHorizontal === true ? 'q-virtual-scroll--horizontal' : '') +
         (this.popupContentClass ? ' ' + this.popupContentClass : '')
     },
 
@@ -158,7 +158,7 @@ export default Vue.extend({
     },
 
     noOptions () {
-      return this.virtualListLength.length === 0
+      return this.virtualScrollLength.length === 0
     },
 
     selectedString () {
@@ -191,11 +191,11 @@ export default Vue.extend({
     },
 
     optionScope () {
-      if (this.virtualListLength === 0) {
+      if (this.virtualScrollLength === 0) {
         return []
       }
 
-      const { from, to } = this.virtualListSliceRange
+      const { from, to } = this.virtualScrollSliceRange
 
       return this.options.slice(from, to).map((opt, i) => {
         const disable = this.__isDisabled(opt)
@@ -359,7 +359,7 @@ export default Vue.extend({
     setOptionIndex (index) {
       if (this.$q.platform.is.desktop !== true) { return }
 
-      const val = index > -1 && index < this.virtualListLength
+      const val = index > -1 && index < this.virtualScrollLength
         ? index
         : -1
 
@@ -446,7 +446,7 @@ export default Vue.extend({
       }
 
       // up, down
-      const optionsLength = this.virtualListLength
+      const optionsLength = this.virtualScrollLength
 
       if (e.keyCode === 38 || e.keyCode === 40) {
         stopAndPrevent(e)
@@ -531,7 +531,7 @@ export default Vue.extend({
       }
     },
 
-    __getVirtualListEl () {
+    __getVirtualScrollEl () {
       return this.hasDialog === true
         ? this.$refs.menuContent
         : (
@@ -541,8 +541,8 @@ export default Vue.extend({
         )
     },
 
-    __getVirtualListScrollTarget () {
-      return this.__getVirtualListEl()
+    __getVirtualScrollTarget () {
+      return this.__getVirtualScrollEl()
     },
 
     __getSelection (h, fromDialog) {
@@ -647,7 +647,7 @@ export default Vue.extend({
           ])
         ])
 
-      return this.__padVirtualList(h, 'div', this.optionScope.map(fn))
+      return this.__padVirtualScroll(h, 'div', this.optionScope.map(fn))
     },
 
     __getInnerAppend (h) {
@@ -875,7 +875,7 @@ export default Vue.extend({
           separateClosePopup: true
         },
         on: {
-          '&scroll': this.__onVirtualListScroll,
+          '&scroll': this.__onVirtualScrollEvt,
           'before-hide': this.__closeMenu
         }
       }, child)
@@ -931,7 +931,7 @@ export default Vue.extend({
           style: this.popupContentStyle,
           on: {
             click: prevent,
-            '&scroll': this.__onVirtualListScroll
+            '&scroll': this.__onVirtualScrollEvt
           }
         }, (
           this.noOptions === true
@@ -1033,7 +1033,7 @@ export default Vue.extend({
           optionIndex = this.options.findIndex(v => isDeepEqual(this.__getOptionValue(v), val))
         }
 
-        this.__resetVirtualList(optionIndex)
+        this.__resetVirtualScroll(optionIndex)
       }
 
       this.setOptionIndex(optionIndex)

ui/src/components/select/QSelect.json

@@ -1,5 +1,5 @@
 {
-  "mixins": [ "components/field/__QField", "mixins/virtual-list" ],
+  "mixins": [ "components/field/__QField", "mixins/virtual-scroll" ],
 
   "props": {
     "value": {