@bildvitta/quasar-ui-asteroid 2.22.0 → 2.23.0-beta.2

package/package.json

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

package/src/components/field/QasField.vue

@@ -71,8 +71,9 @@ export default {
         pattern,
         maxFiles,
         searchable,
-        gmt
-      } = this.formatedField
+        gmt,
+        useLazyLoading
+      } = this.formattedField
 
       // Default error attributes for Quasar.
       const error = {
@@ -138,7 +139,7 @@ export default {
 
         'signature-uploader': { is: 'qas-signature-uploader', entity, uploadLabel: label, ...error },
 
-        select: { is: 'qas-select', multiple, options, searchable, ...input }
+        select: { is: 'qas-select', entity, name, multiple, options, searchable, useLazyLoading, ...input }
       }
 
       return { ...(profiles[type] || profiles.default), ...this.$attrs }
@@ -154,7 +155,7 @@ export default {
     },
 
     // This computed will change the key name when the server sends different key.
-    formatedField () {
+    formattedField () {
       const field = {}
 
       for (const key in this.field) {

package/src/components/input/QasInput.vue

@@ -75,7 +75,7 @@ export default {
 
   methods: {
     toggleMask (first, second) {
-      if (!this.value.length) return
+      if (!this.value?.length) return
 
       const length = first.split('#').length - 2
       return this.value?.length > length ? second : first

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

@@ -32,6 +32,14 @@ export default {
       description: 'List height when there is no results.'
     },
 
+    emptyResultText: {
+      description: 'Text for empty result on search.'
+    },
+
+    entity: {
+      description: 'Vuex entity name to be used on lazy loading filter.'
+    },
+
     fuseOptions: {
       description: '[Fuse.js options](https://fusejs.io/api/options.html)',
       table: {
@@ -47,6 +55,21 @@ export default {
       description: 'Hides empty slot.'
     },
 
+    lazyLoadingProps: {
+      description: 'Props to be used on lazy loading.',
+      table: {
+        defaultValue: {
+          detail: JSON.stringify({
+            url: '',
+            params: {
+              limit: 48
+            },
+            decamelizeFieldName: true
+          })
+        }
+      }
+    },
+
     list: {
       description: 'Array of objects with `label` and `value` each, to be searched.'
     },
@@ -55,6 +78,10 @@ export default {
       description: 'Display temporary message when search field in empty.'
     },
 
+    useLazyLoading: {
+      description: 'Option to enable lazy loading.'
+    },
+
     value: {
       description: 'Search field value.'
     },
@@ -65,6 +92,26 @@ export default {
       table: noSummary
     },
 
+    'fetch-options-error': {
+      description: 'Fires when occur an error fetching the options.',
+      table: {
+        defaultValue: {
+          detail: JSON.stringify({ error: 'object' }),
+          summary: '{}'
+        }
+      }
+    },
+
+    'fetch-options-success': {
+      description: 'Fires when successfully fetching the options.',
+      table: {
+        defaultValue: {
+          detail: JSON.stringify({ results: 'array' }),
+          summary: '{}'
+        }
+      }
+    },
+
     input: {
       description: 'Fires when the result changes.',
       table: noSummary
@@ -85,6 +132,11 @@ export default {
     empty: {
       description: 'To be displayed when there is no results.',
       table: noSummary
+    },
+
+    loading: {
+      description: 'To be displayed when lazy loading is in progress.',
+      table: noSummary
     }
   }
 }

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

@@ -1,18 +1,26 @@
 <template>
   <qas-box v-bind="$attrs">
-    <q-input v-model="search" clearable :disable="!list.length" outlined :placeholder="placeholder">
+    <q-input v-model="search" v-bind="attributes">
       <template #append>
         <q-icon color="primary" name="o_search" />
       </template>
     </q-input>
 
-    <div class="overflow-auto q-mt-xs relative-position" :style="contentStyle">
-      <slot v-if="hasResults" :results="results" />
+    <div ref="scrollContainer" :class="contentClasses" :style="contentStyle">
+      <component :is="component.is" v-bind="component.props" v-on="component.listeners">
+        <slot v-if="$_hasFilteredOptions" :results="filteredOptions" />
+      </component>
 
-      <slot v-else-if="!hideEmptySlot" name="empty">
+      <slot v-if="isLoading" name="loading">
+        <div class="flex justify-center q-pb-sm">
+          <q-spinner-dots color="primary" size="20px" />
+        </div>
+      </slot>
+
+      <slot v-if="showEmptyResult" name="empty">
         <div class="absolute-center text-center">
           <q-icon class="q-mb-sm text-center" color="primary" name="o_search" size="38px" />
-          <div>Não há resultados disponíveis.</div>
+          <div>{{ emptyResultText }}</div>
         </div>
       </slot>
     </div>
@@ -20,21 +28,31 @@
 </template>
 
 <script>
+import { QInfiniteScroll } from 'quasar'
 import QasBox from '../box/QasBox.vue'
 
 import Fuse from 'fuse.js'
+import lazyLoadingFilterMixin from '../../mixins/lazy-loading-filter'
 
 export default {
   components: {
+    QInfiniteScroll,
     QasBox
   },
 
+  mixins: [lazyLoadingFilterMixin],
+
   props: {
     emptyListHeight: {
       default: '100px',
       type: String
     },
 
+    emptyResultText: {
+      default: 'Não há resultados disponíveis.',
+      type: String
+    },
+
     fuseOptions: {
       default: () => ({}),
       type: Object
@@ -67,15 +85,21 @@ export default {
 
   data () {
     return {
-      fuse: null,
-      results: this.list,
-      search: ''
+      fuse: null
     }
   },
 
   computed: {
+    contentClasses () {
+      return ['overflow-auto', 'q-mt-xs', 'relative-position', this.$_virtualScrollClassName]
+    },
+
     contentStyle () {
-      return { height: this.list.length ? this.height : this.emptyListHeight }
+      return { height: this.contentHeight }
+    },
+
+    contentHeight () {
+      return this.$_hasFilteredOptions ? this.height : this.showEmptyResult ? this.emptyListHeight : 'auto'
     },
 
     defaultFuseOptions () {
@@ -92,8 +116,41 @@ export default {
       }
     },
 
-    hasResults () {
-      return !!this.results.length
+    showEmptyResult () {
+      return !this.$_hasFilteredOptions && !this.hideEmptySlot && !this.isLoading
+    },
+
+    isDisabled () {
+      return (!this.useLazyLoading && !this.list.length) || this.isLoading
+    },
+
+    attributes () {
+      return {
+        clearable: true,
+        disable: this.isDisabled,
+        debounce: this.useLazyLoading ? 500 : 0,
+        outlined: true,
+        placeholder: this.placeholder,
+        error: this.hasFetchError
+      }
+    },
+
+    component () {
+      const infiniteScrollProps = {
+        offset: 100,
+        scrollTarget: this.$refs.scrollContainer,
+        ref: 'infiniteScrollRef'
+      }
+
+      return {
+        is: this.useLazyLoading ? 'q-infinite-scroll' : 'div',
+        props: {
+          ...(this.useLazyLoading && infiniteScrollProps)
+        },
+        listeners: {
+          ...(this.useLazyLoading && { load: this.onInfiniteScroll })
+        }
+      }
     }
   },
 
@@ -102,33 +159,60 @@ export default {
       this.fuse.options = { ...this.fuse.options, ...value }
     },
 
-    hasResults (value) {
+    $_hasFilteredOptions (value) {
       !value && this.$emit('emptyResult')
     },
 
     list (value) {
-      this.fuse.list = value
-      this.setResults(this.search)
+      if (!this.useLazyLoading) {
+        this.fuse.list = value
+        this.filterOptionsByFuse(this.search)
+      }
     },
 
     search: {
-      handler (value) {
-        this.setResults(value)
+      async handler (value) {
         this.$emit('input', value)
-      },
 
-      immediate: true
+        if (this.useLazyLoading) {
+          await this.$_filterOptionsByStore(value)
+
+          this.$refs.infiniteScrollRef.resume()
+
+          return
+        }
+
+        this.filterOptionsByFuse(value)
+      }
     }
   },
 
   created () {
+    this.filteredOptions = this.list
     this.search = this.value
-    this.fuse = new Fuse(this.list, this.defaultFuseOptions)
+
+    if (!this.useLazyLoading) {
+      this.fuse = new Fuse(this.list, this.defaultFuseOptions)
+    }
   },
 
   methods: {
-    setResults (value) {
-      this.results = value ? this.fuse.search(value) : this.list
+    filterOptionsByFuse (value) {
+      this.filteredOptions = value ? this.fuse.search(value) : this.list
+    },
+
+    async onInfiniteScroll (index, done) {
+      if (!this.$_hasFilteredOptions && !this.search) {
+        await this.$_setFetchOptions()
+        return done()
+      }
+
+      if (this.$_canFetchOptions()) {
+        await this.$_loadMoreOptions()
+        return done()
+      }
+
+      done(true)
     }
   }
 }

package/src/components/select/QasSelect.stories.js

@@ -30,6 +30,10 @@ export default {
 
   argTypes: {
     // Props
+    entity: {
+      description: 'Vuex entity name to be used on lazy loading filter.'
+    },
+
     fuseOptions: {
       description: '[Fuse.js](https://fusejs.io/) options.',
       table: {
@@ -41,6 +45,25 @@ export default {
       description: 'Key to be used instead of `label`.'
     },
 
+    lazyLoadingProps: {
+      description: 'Props to be used on lazy loading.',
+      table: {
+        defaultValue: {
+          detail: JSON.stringify({
+            url: '',
+            params: {
+              limit: 48
+            },
+            decamelizeFieldName: true
+          })
+        }
+      }
+    },
+
+    name: {
+      description: 'Name of the field.'
+    },
+
     options: {
       description: 'Select options.'
     },
@@ -49,6 +72,14 @@ export default {
       description: 'Text for empty result on search.'
     },
 
+    searchable: {
+      description: 'option to enable the search field.'
+    },
+
+    useLazyLoading: {
+      description: 'Option to enable lazy loading.'
+    },
+
     value: {
       description: 'String to filter results.'
     },
@@ -57,16 +88,40 @@ export default {
       description: 'Key to be used instead of `value`.'
     },
 
-    searchable: {
-      description: 'option to enable the search field.'
+    // Events
+    'fetch-options-error': {
+      description: 'Fires when occur an error fetching the options.',
+      table: {
+        defaultValue: {
+          detail: JSON.stringify({ error: 'object' }),
+          summary: '{}'
+        }
+      }
+    },
+
+    'fetch-options-success': {
+      description: 'Fires when successfully fetching the options.',
+      table: {
+        defaultValue: {
+          detail: JSON.stringify({ results: 'array' }),
+          summary: '{}'
+        }
+      }
     },
 
-    // Events
     input: {
       description: 'Fires when model changes. Also used by `v-model`.'
     },
 
     // Slots
+    'after-options': {
+      description: 'Template slot for the elements that should be rendered after the list of options.',
+      table: {
+        category: 'slots',
+        ...noSummary
+      }
+    },
+
     append: {
       description: 'Attach to the inner field.',
       table: {
@@ -81,11 +136,6 @@ export default {
         category: 'slots',
         ...noSummary
       }
-    },
-
-    option: {
-      description: 'Replace an option defaults.',
-      table: noSummary
     }
   }
 }

package/src/components/select/QasSelect.vue

@@ -1,5 +1,5 @@
 <template>
-  <q-select v-model="model" v-bind="attributes" v-on="listeners" @filter="filterOptions">
+  <q-select v-model="model" v-bind="attributes" v-on="listeners">
     <slot v-for="(slot, key) in $slots" :slot="key" :name="key" />
 
     <template v-for="(slot, key) in $scopedSlots" :slot="key" slot-scope="scope">
@@ -8,7 +8,7 @@
 
     <template #append>
       <slot name="append">
-        <q-icon v-if="searchable" name="o_search" />
+        <q-icon v-if="isSearchable" name="o_search" />
       </slot>
     </template>
 
@@ -16,18 +16,35 @@
       <slot name="no-option">
         <q-item>
           <q-item-section class="text-grey">
-            {{ noOptionLabel }}
+            <template v-if="isLoading">
+              Buscando por {{ label }}...
+            </template>
+            <template v-else>
+              {{ noOptionLabel }}
+            </template>
           </q-item-section>
         </q-item>
       </slot>
     </template>
+
+    <template #after-options>
+      <slot v-if="isLoading" name="after-options">
+        <div class="flex justify-center q-pb-sm">
+          <q-spinner-dots color="primary" size="20px" />
+        </div>
+      </slot>
+    </template>
   </q-select>
 </template>
 
 <script>
+import lazyLoadingFilterMixin from '../../mixins/lazy-loading-filter'
+
 export default {
   name: 'QasSelect',
 
+  mixins: [lazyLoadingFilterMixin],
+
   props: {
     fuseOptions: {
       default: () => ({}),
@@ -39,11 +56,20 @@ export default {
       type: String
     },
 
+    noOptionLabel: {
+      default: 'Nenhum resultado foi encontrado.',
+      type: String
+    },
+
     options: {
       default: () => [],
       type: Array
     },
 
+    searchable: {
+      type: Boolean
+    },
+
     value: {
       default: () => [],
       type: [Array, Object, String, Number]
@@ -52,21 +78,11 @@ export default {
     valueKey: {
       default: '',
       type: String
-    },
-
-    noOptionLabel: {
-      default: 'Nenhum resultado foi encontrado.',
-      type: String
-    },
-
-    searchable: {
-      type: Boolean
     }
   },
 
   data () {
     return {
-      filteredOptions: [],
       fuse: null
     }
   },
@@ -82,10 +98,18 @@ export default {
       }
     },
 
+    label () {
+      return this.$attrs.label || ''
+    },
+
     listeners () {
       const { input, ...events } = this.$listeners
 
-      return events
+      return {
+        ...events,
+        ...(this.useLazyLoading && { 'virtual-scroll': this.$_onVirtualScroll }),
+        ...((this.useLazyLoading || this.searchable) && { filter: this.onFilter })
+      }
     },
 
     defaultFuseOptions () {
@@ -104,7 +128,7 @@ export default {
       }
     },
 
-    formattedResult () {
+    defaultOptions () {
       if (!this.labelKey && !this.valueKey) {
         return this.options
       }
@@ -116,15 +140,27 @@ export default {
       return this.$attrs.multiple || this.$attrs.multiple === ''
     },
 
+    isSearchable () {
+      return this.searchable || this.useLazyLoading
+    },
+
+    hasError () {
+      return this.hasFetchError || this.$attrs.error
+    },
+
     attributes () {
       return {
         emitValue: true,
         mapOptions: true,
         outlined: true,
-        clearable: this.searchable,
+        clearable: this.isSearchable,
+        loading: this.isLoading,
+        inputDebounce: this.useLazyLoading ? 500 : 0,
+        popupContentClass: this.$_virtualScrollClassName,
         ...this.$attrs,
         options: this.filteredOptions,
-        useInput: this.searchable
+        useInput: this.isSearchable,
+        error: this.hasError
       }
     }
   },
@@ -136,37 +172,44 @@ export default {
 
     options: {
       handler () {
+        if (this.useLazyLoading && this.$_hasFilteredOptions) return
+
         if (this.fuse) {
-          this.fuse.list = this.formattedResult
+          this.fuse.list = this.defaultOptions
         }
 
-        this.filteredOptions = this.formattedResult
+        this.filteredOptions = this.defaultOptions
       },
       immediate: true
     }
   },
 
   async created () {
-    if (this.searchable) {
+    if (this.searchable && !this.useLazyLoading) {
       const Fuse = (await import('fuse.js')).default
-      this.fuse = new Fuse(this.options, this.defaultFuseOptions)
+      this.fuse = new Fuse(this.defaultOptions, this.defaultFuseOptions)
     }
   },
 
   methods: {
-    filterOptions (value, update) {
+    onFilter (value, update) {
       update(() => {
-        if (!this.searchable) return
+        if (this.useLazyLoading && value !== this.search) return this.$_filterOptionsByStore(value)
 
-        if (value === '') {
-          this.filteredOptions = this.formattedResult
-        } else {
-          const results = this.fuse.search(value)
-          this.filteredOptions = results.map(item => item.item)
-        }
+        if (!this.useLazyLoading && this.searchable) this.filterOptionsByFuse(value)
       })
     },
 
+    filterOptionsByFuse (value) {
+      if (value === '') {
+        this.filteredOptions = this.defaultOptions
+        return
+      }
+
+      const results = this.fuse.search(value)
+      this.filteredOptions = results.map(({ item }) => item)
+    },
+
     renameKey (item) {
       const mapKeys = { label: this.labelKey, value: this.valueKey }
 

package/src/components/select-list/QasSelectList.vue

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

package/src/mixins/index.js

@@ -1,6 +1,7 @@
 import contextMixin from './context.js'
 import formMixin from './form.js'
 import generatorMixin from './generator.js'
+import lazyLoadingFilterMixin from './lazy-loading-filter.js'
 import mapMarkersMixin from './map-markers.js'
 import passwordMixin from './password.js'
 import screenMixin from './screen.js'
@@ -12,6 +13,7 @@ export {
   contextMixin,
   formMixin,
   generatorMixin,
+  lazyLoadingFilterMixin,
   mapMarkersMixin,
   passwordMixin,
   screenMixin,

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

@@ -0,0 +1,188 @@
+import { decamelize } from 'humps'
+
+export default {
+  props: {
+    entity: {
+      default: '',
+      type: String
+    },
+
+    lazyLoadingProps: {
+      default: () => ({}),
+      type: Object
+    },
+
+    name: {
+      default: '',
+      type: String
+    },
+
+    useLazyLoading: {
+      type: Boolean
+    }
+  },
+
+  data () {
+    return {
+      filteredOptions: [],
+      hasFetchError: false,
+      isLoading: false,
+      isScrolling: false,
+      pagination: {
+        page: 1,
+        lastPage: null
+      },
+      search: null
+    }
+  },
+
+  computed: {
+    $_defaultLazyLoadingProps () {
+      const {
+        url,
+        params,
+        decamelizeFieldName
+      } = this.lazyLoadingProps
+
+      const defaultParams = {
+        limit: 48
+      }
+
+      return {
+        url: url || '',
+        params: {
+          ...defaultParams,
+          ...params
+        },
+        decamelizeFieldName: (decamelizeFieldName ?? true) || decamelizeFieldName
+      }
+    },
+
+    $_hasFilteredOptions () {
+      return !!this.filteredOptions.length
+    },
+
+    $_virtualScrollClassName () {
+      return `virtual-scroll-${this.name}`
+    }
+  },
+
+  methods: {
+    async $_filterOptionsByStore (search) {
+      this.$_resetFilter(search)
+      await this.$_setFetchOptions()
+    },
+
+    $_resetFilter (search) {
+      this.filteredOptions = []
+      this.search = search
+      this.pagination = {
+        page: 1,
+        lastPage: null
+      }
+    },
+
+    async $_onVirtualScroll ({ index }) {
+      const lastIndex = this.filteredOptions.length - 1
+
+      if (index === lastIndex && this.$_canFetchOptions()) {
+        const { scrollContainer, top } = this.$_getScrollContainerTop()
+
+        await this.$_loadMoreOptions()
+
+        setTimeout(() => {
+          scrollContainer.scrollTo({ top })
+        }, 100)
+      }
+    },
+
+    async $_loadMoreOptions () {
+      this.isScrolling = true
+
+      const options = await this.$_fetchOptions()
+      this.filteredOptions.push(...options)
+
+      // this is to prevent the virtual-scroll event to be fired again
+      this.$nextTick(() => {
+        this.isScrolling = false
+      })
+    },
+
+    async $_fetchOptions () {
+      try {
+        if (!this.entity) throw new Error(this.$_getMissingPropsMessage('entity'))
+        if (!this.name) throw new Error(this.$_getMissingPropsMessage('name'))
+
+        this.hasFetchError = false
+        this.isLoading = true
+
+        const { url, params, decamelizeFieldName } = this.$_defaultLazyLoadingProps
+
+        const { data } = await this.$store.dispatch(`${this.entity}/fetchFieldOptions`, {
+          url,
+          field: decamelizeFieldName ? decamelize(this.name, { separator: '-' }) : this.name,
+          params: {
+            ...params,
+            search: this.search,
+            offset: (this.pagination.page - 1) * params.limit
+          }
+        })
+
+        const { results, count } = data
+
+        this.pagination = {
+          page: this.pagination.page + 1,
+          lastPage: Math.ceil(count / params.limit)
+        }
+
+        this.$emit('fetch-options-success', data)
+
+        return this.$_handleOptions(results)
+      } catch (error) {
+        /* eslint-disable no-console */
+        console.error(error)
+
+        this.hasFetchError = true
+        this.$emit('fetch-options-error', error)
+
+        return []
+      } finally {
+        this.isLoading = false
+      }
+    },
+
+    async $_setFetchOptions () {
+      this.filteredOptions = await this.$_fetchOptions()
+    },
+
+    $_canFetchOptions () {
+      const { lastPage, page } = this.pagination
+      const hasMorePages = lastPage && page <= lastPage
+
+      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))
+      }
+
+      return options
+    },
+
+    $_getMissingPropsMessage (prop) {
+      return `A propriedade "${prop}" é obrigatória quando a propriedade "useLazyLoading" está ativa.`
+    }
+  }
+}

package/src/mixins/view.js

@@ -1,4 +1,3 @@
-import { camelize } from 'humps'
 import { get } from 'lodash'
 import { camelizeFieldsName } from '../helpers'