@bildvitta/quasar-ui-asteroid 2.23.0-beta.5 → 2.23.0-beta.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bildvitta/quasar-ui-asteroid",
-  "version": "2.23.0-beta.5",
+  "version": "2.23.0-beta.6",
   "description": "",
   "main": "./src/index.js",
   "scripts": {

package/src/components/search-box/QasSearchBox.vue

@@ -91,7 +91,7 @@ export default {
 
   computed: {
     contentClasses () {
-      return ['overflow-auto', 'q-mt-xs', 'relative-position', this.$_virtualScrollClassName]
+      return ['overflow-auto', 'q-mt-xs', 'relative-position']
     },
 
     contentStyle () {

package/src/components/select/QasSelect.vue

@@ -12,16 +12,19 @@
       </slot>
     </template>
 
+    <template #hint>
+      <slot name="hint">
+        <div v-if="isLoading" class="q-pb-sm">
+          Buscando por opções...
+        </div>
+      </slot>
+    </template>
+
     <template #no-option>
-      <slot name="no-option">
+      <slot v-if="!isLoading" name="no-option">
         <q-item>
           <q-item-section class="text-grey">
-            <template v-if="isLoading">
-              Buscando opções de {{ label }}...
-            </template>
-            <template v-else>
-              {{ noOptionLabel }}
-            </template>
+            {{ noOptionLabel }}
           </q-item-section>
         </q-item>
       </slot>
@@ -98,10 +101,6 @@ export default {
       }
     },
 
-    label () {
-      return this.$attrs.label || ''
-    },
-
     listeners () {
       const { input, ...events } = this.$listeners
 
@@ -148,19 +147,23 @@ export default {
       return this.hasFetchError || this.$attrs.error
     },
 
+    hasLoading () {
+      return this.isLoading || this.$attrs.loading
+    },
+
     attributes () {
       return {
+        bottomSlots: true,
         emitValue: true,
         mapOptions: true,
         outlined: true,
         clearable: this.isSearchable,
-        loading: this.isLoading,
         inputDebounce: this.useLazyLoading ? 500 : 0,
-        popupContentClass: this.$_virtualScrollClassName,
         ...this.$attrs,
         options: this.filteredOptions,
         useInput: this.isSearchable,
-        error: this.hasError
+        error: this.hasError,
+        loading: this.hasLoading
       }
     }
   },
@@ -192,12 +195,16 @@ export default {
   },
 
   methods: {
-    onFilter (value, update) {
-      update(() => {
-        if (this.useLazyLoading && value !== this.search) return this.$_filterOptionsByStore(value)
+    async onFilter (value, update) {
+      if (this.useLazyLoading && value !== this.search) {
+        await this.$_filterOptionsByStore(value)
+      }
+
+      if (!this.useLazyLoading && this.searchable) {
+        this.filterOptionsByFuse(value)
+      }
 
-        if (!this.useLazyLoading && this.searchable) this.filterOptionsByFuse(value)
-      })
+      update()
     },
 
     filterOptionsByFuse (value) {

package/src/mixins/lazy-loading-filter.js

@@ -1,6 +1,5 @@
 import { decamelize } from 'humps'
 import { isEqual } from 'lodash'
-import { uid } from 'quasar'
 
 export default {
   props: {
@@ -62,11 +61,6 @@ export default {
 
     $_hasFilteredOptions () {
       return !!this.filteredOptions.length
-    },
-
-    $_virtualScrollClassName () {
-      const id = uid()
-      return `virtual-scroll-${id}`
     }
   },
 
@@ -96,17 +90,16 @@ export default {
       }
     },
 
-    async $_onVirtualScroll ({ index }) {
+    async $_onVirtualScroll ({ index, ref }) {
       const lastIndex = this.filteredOptions.length - 1
 
       if (index === lastIndex && this.$_canFetchOptions()) {
-        const { scrollContainer, top } = this.$_getScrollContainerTop()
-
         await this.$_loadMoreOptions()
 
-        setTimeout(() => {
-          scrollContainer.scrollTo({ top })
-        }, 100)
+        this.$nextTick(() => {
+          ref.reset()
+          ref.refresh(lastIndex)
+        })
       }
     },
 
@@ -179,17 +172,6 @@ export default {
       return hasMorePages && !this.isLoading && !this.isScrolling && this.useLazyLoading
     },
 
-    $_getScrollContainerTop () {
-      const scrollContainer = document.querySelector(`.${this.$_virtualScrollClassName}`)
-      const scrollContainerHeight = scrollContainer.offsetHeight
-      const scrollContainerTop = scrollContainer.scrollTop
-
-      return {
-        scrollContainer,
-        top: scrollContainerTop + (scrollContainerHeight / 2)
-      }
-    },
-
     $_handleOptions (options) {
       if (this.labelKey && this.valueKey && this.renameKey) {
         return options.map(item => this.renameKey(item))