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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bildvitta/quasar-ui-asteroid",
-  "version": "2.23.0-beta.4",
+  "version": "2.23.0-beta.5",
   "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/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

@@ -17,7 +17,7 @@
         <q-item>
           <q-item-section class="text-grey">
             <template v-if="isLoading">
-              Buscando por {{ label }}...
+              Buscando opções de {{ label }}...
             </template>
             <template v-else>
               {{ noOptionLabel }}

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,6 @@
 import { decamelize } from 'humps'
+import { isEqual } from 'lodash'
+import { uid } from 'quasar'
 
 export default {
   props: {
@@ -63,7 +65,19 @@ export default {
     },
 
     $_virtualScrollClassName () {
-      return `virtual-scroll-${this.name}`
+      const id = uid()
+      return `virtual-scroll-${id}`
+    }
+  },
+
+  watch: {
+    lazyLoadingProps: {
+      handler (value, oldValue) {
+        if (isEqual(value, oldValue)) return
+
+        this.$_resetFilter()
+        this.$emit('input', '')
+      }
     }
   },
 
@@ -114,7 +128,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 +164,7 @@ export default {
         return []
       } finally {
         this.isLoading = false
+        this.$emit('fetching', false)
       }
     },