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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bildvitta/quasar-ui-asteroid",
-  "version": "2.23.0-beta.3",
+  "version": "2.23.0-beta.6",
   "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
       }
     }
   },
@@ -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/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: {
@@ -54,16 +55,23 @@ export default {
           ...defaultParams,
           ...params
         },
-        decamelizeFieldName: (decamelizeFieldName ?? true) || decamelizeFieldName
+        decamelizeFieldName: decamelizeFieldName === undefined ? true : decamelizeFieldName
       }
     },
 
     $_hasFilteredOptions () {
       return !!this.filteredOptions.length
-    },
+    }
+  },
 
-    $_virtualScrollClassName () {
-      return `virtual-scroll-${this.name}`
+  watch: {
+    lazyLoadingProps: {
+      handler (value, oldValue) {
+        if (isEqual(value, oldValue)) return
+
+        this.$_resetFilter()
+        this.$emit('input', '')
+      }
     }
   },
 
@@ -82,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)
+        })
       }
     },
 
@@ -114,7 +121,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
 
@@ -148,6 +157,7 @@ export default {
         return []
       } finally {
         this.isLoading = false
+        this.$emit('fetching', false)
       }
     },
 
@@ -162,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))