@bildvitta/quasar-ui-asteroid 2.23.0-beta.4 → 2.23.0-beta.7

package/package.json

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

package/src/components/search-box/QasSearchBox.stories.js

@@ -112,6 +112,10 @@ export default {
       }
     },
 
+    fetching: {
+      description: 'Fires when fetching the options.'
+    },
+
     input: {
       description: 'Fires when the result changes.',
       table: noSummary

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.stories.js

@@ -109,6 +109,10 @@ export default {
       }
     },
 
+    fetching: {
+      description: 'Fires when fetching the options.'
+    },
+
     input: {
       description: 'Fires when model changes. Also used by `v-model`.'
     },

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 por {{ 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
       }
     }
   },
@@ -189,15 +192,21 @@ export default {
       const Fuse = (await import('fuse.js')).default
       this.fuse = new Fuse(this.defaultOptions, this.defaultFuseOptions)
     }
+
+    this.useLazyLoading && this.$_setFetchOptions('')
   },
 
   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/components/select-list/QasSelectList.vue

@@ -1,21 +1,23 @@
 <template>
   <qas-search-box v-bind="$attrs" class="q-pa-md" :fuse-options="fuseOptions" :list="sortedOptions">
     <template #default="{ results }">
-      <q-item v-for="(item, index) in results" :key="index">
-        <slot name="item" v-bind="self">
-          <slot name="item-section" :result="item">
-            <q-item-section class="items-start text-bold">
-              <div :class="labelClass" @click="redirectRoute(item)">{{ item.label }}</div>
+      <q-list separator>
+        <q-item v-for="(item, index) in results" :key="index">
+          <slot name="item" v-bind="self">
+            <slot name="item-section" :result="item">
+              <q-item-section class="items-start text-bold">
+                <div :class="labelClass" @click="redirectRoute(item)">{{ item.label }}</div>
+              </q-item-section>
+            </slot>
+
+            <q-item-section avatar>
+              <slot name="item-action" v-bind="self">
+                <qas-btn hide-mobile-label v-bind="setButtonProps(item)" size="sm" @click="handleClick(item)" />
+              </slot>
             </q-item-section>
           </slot>
-
-          <q-item-section avatar>
-            <slot name="item-action" v-bind="self">
-              <qas-btn hide-mobile-label v-bind="setButtonProps(item)" size="sm" @click="handleClick(item)" />
-            </slot>
-          </q-item-section>
-        </slot>
-      </q-item>
+        </q-item>
+      </q-list>
     </template>
   </qas-search-box>
 </template>

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

@@ -1,4 +1,5 @@
 import { decamelize } from 'humps'
+import { isEqual } from 'lodash'
 
 export default {
   props: {
@@ -30,9 +31,11 @@ export default {
       isScrolling: false,
       pagination: {
         page: 1,
-        lastPage: null
+        lastPage: null,
+        hasCount: true,
+        hasNextPage: false
       },
-      search: null
+      search: ''
     }
   },
 
@@ -60,10 +63,17 @@ export default {
 
     $_hasFilteredOptions () {
       return !!this.filteredOptions.length
-    },
+    }
+  },
 
-    $_virtualScrollClassName () {
-      return `virtual-scroll-${this.name}`
+  watch: {
+    lazyLoadingProps: {
+      handler (value, oldValue) {
+        if (isEqual(value, oldValue)) return
+
+        this.$_filterOptionsByStore('')
+        this.$emit('input', '')
+      }
     }
   },
 
@@ -78,21 +88,22 @@ export default {
       this.search = search
       this.pagination = {
         page: 1,
-        lastPage: null
+        lastPage: null,
+        hasCount: true,
+        hasNextPage: false
       }
     },
 
-    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)
+        })
       }
     },
 
@@ -114,7 +125,9 @@ export default {
         if (!this.name) throw new Error(this.$_getMissingPropsMessage('name'))
 
         this.hasFetchError = false
+
         this.isLoading = true
+        this.$emit('fetching', true)
 
         const { url, params, decamelizeFieldName } = this.$_defaultLazyLoadingProps
 
@@ -128,11 +141,14 @@ export default {
           }
         })
 
-        const { results, count } = data
+        const { results, count, hasNextPage } = data
+        const hasCount = count !== undefined
 
         this.pagination = {
           page: this.pagination.page + 1,
-          lastPage: Math.ceil(count / params.limit)
+          lastPage: hasCount ? Math.ceil(count / params.limit) : null,
+          hasCount,
+          hasNextPage
         }
 
         this.$emit('fetch-options-success', data)
@@ -148,6 +164,7 @@ export default {
         return []
       } finally {
         this.isLoading = false
+        this.$emit('fetching', false)
       }
     },
 
@@ -156,23 +173,12 @@ export default {
     },
 
     $_canFetchOptions () {
-      const { lastPage, page } = this.pagination
-      const hasMorePages = lastPage && page <= lastPage
+      const { lastPage, page, hasCount, hasNextPage } = this.pagination
+      const hasMorePages = hasCount ? lastPage && page <= lastPage : hasNextPage
 
       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))