@bildvitta/quasar-ui-asteroid 3.0.0-beta.9 → 3.0.0

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

@@ -1,42 +1,64 @@
 <template>
   <qas-box>
-    <q-input v-model="search" clearable :disable="!list.length" outlined :placeholder="placeholder">
+    <qas-input v-bind="attributes" ref="search" v-model="mx_search">
       <template #append>
         <q-icon color="primary" name="o_search" />
       </template>
-    </q-input>
+    </qas-input>
 
-    <div class="overflow-auto q-mt-xs relative-position" :style="contentStyle">
-      <slot v-if="hasResults" />
+    <div ref="scrollContainer" class="overflow-auto q-mt-xs relative-position" :style="containerStyle">
+      <component :is="component.is" v-bind="component.props">
+        <slot v-if="mx_hasFilteredOptions" />
+      </component>
 
-      <slot v-else-if="useEmptySlot" name="empty-result">
+      <slot v-if="showSpinnerDots" 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-result">
         <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>
+
+      <q-inner-loading :showing="showInnerLoading">
+        <q-spinner color="grey" size="3em" />
+      </q-inner-loading>
     </div>
   </qas-box>
 </template>
 
 <script>
+import { QInfiniteScroll } from 'quasar'
 import Fuse from 'fuse.js'
 
 import QasBox from '../box/QasBox.vue'
+import { searchFilterMixin } from '../../mixins'
 
 export default {
   name: 'QasSearchBox',
 
   components: {
-    QasBox
+    QasBox,
+    QInfiniteScroll
   },
 
+  mixins: [searchFilterMixin],
+
   props: {
     emptyListHeight: {
       default: '100px',
       type: String
     },
 
+    emptyResultText: {
+      default: 'Não há resultados disponíveis.',
+      type: String
+    },
+
     fuseOptions: {
       default: () => ({}),
       type: Object
@@ -81,15 +103,52 @@ export default {
 
   data () {
     return {
-      fuse: null,
-      searchResults: this.list,
-      search: ''
+      fuse: null
     }
   },
 
   computed: {
-    contentStyle () {
-      return { height: this.list.length ? this.height : this.emptyListHeight }
+    attributes () {
+      return {
+        clearable: true,
+        disable: this.isDisabled,
+        debounce: this.useLazyLoading ? 500 : 0,
+        outlined: true,
+        placeholder: this.placeholder,
+        hideBottomSpace: true,
+        error: this.mx_hasFetchError,
+        loading: this.mx_isFetching
+      }
+    },
+
+    containerStyle () {
+      return { height: this.containerHeight }
+    },
+
+    hasNoOptionsOnFirstFetch () {
+      return this.mx_fetchCount === 1 && !this.mx_hasFilteredOptions
+    },
+
+    containerHeight () {
+      const hasEmptyList = (!this.list.length && !this.useLazyLoading) || this.hasNoOptionsOnFirstFetch
+
+      return hasEmptyList ? this.emptyListHeight : this.height
+    },
+
+    component () {
+      const infiniteScrollProps = {
+        offset: 100,
+        scrollTarget: this.$refs.scrollContainer,
+        ref: 'infiniteScrollRef'
+      }
+
+      return {
+        is: this.useLazyLoading ? 'q-infinite-scroll' : 'div',
+        props: {
+          ...(this.useLazyLoading && infiniteScrollProps),
+          ...(this.useLazyLoading && { onLoad: this.onInfiniteScroll })
+        }
+      }
     },
 
     defaultFuseOptions () {
@@ -101,63 +160,105 @@ export default {
       }
     },
 
-    hasResults () {
-      return !!this.searchResults.length
+    isDisabled () {
+      return (!this.useLazyLoading && !this.list.length) || this.mx_isFetching || this.hasNoOptionsOnFirstFetch
+    },
+
+    showEmptyResult () {
+      return this.useEmptySlot && !this.mx_hasFilteredOptions && !this.mx_isFetching
+    },
+
+    showSpinnerDots () {
+      return this.mx_hasFilteredOptions && this.mx_isFetching
+    },
+
+    showInnerLoading () {
+      return !this.mx_hasFilteredOptions && this.mx_isFetching
     }
   },
 
   watch: {
     defaultFuseOptions (value) {
+      if (this.useLazyLoading) return
+
       this.fuse.options = { ...this.fuse.options, ...value }
     },
 
-    hasResults (value) {
+    mx_hasFilteredOptions (value) {
       !value && this.$emit('empty-result')
     },
 
-    list: {
-      handler (value) {
-        this.fuse = new Fuse(value, this.defaultFuseOptions)
+    mx_search: {
+      async handler (value) {
+        this.$emit('update:modelValue', value)
 
-        this.setResults(this.search)
-        this.updateResultsModel(value)
-      },
+        if (this.useLazyLoading) {
+          await this.mx_filterOptionsByStore(value)
+
+          this.$refs.infiniteScrollRef.resume()
+          this.$refs.search.focus()
+
+          return
+        }
 
-      deep: true
+        this.filterOptionsByFuse(value)
+      }
     },
 
-    search: {
+    modelValue: {
       handler (value) {
-        this.setResults(value)
-        this.$emit('update:modelValue', value)
+        this.mx_search = value
       },
 
       immediate: true
     },
 
-    searchResults: {
-      handler (value) {
-        this.updateResultsModel(value)
+    mx_filteredOptions: {
+      handler (options) {
+        this.$emit('update:results', options)
       },
+
       immediate: true
     }
   },
 
   created () {
-    this.search = this.modelValue
+    if (this.useLazyLoading) return
+
+    this.mx_filteredOptions = this.list
     this.fuse = new Fuse(this.list, this.defaultFuseOptions)
-    this.setResults()
+
+    this.setListWatcher()
   },
 
   methods: {
-    setResults (value) {
-      this.searchResults = value
-        ? this.fuse.search(value)
-        : this.list
+    filterOptionsByFuse (value) {
+      this.mx_filteredOptions = value ? this.mx_getNormalizedFuseResults(this.fuse.search(value)) : this.list
     },
 
-    updateResultsModel (value) {
-      this.$emit('update:results', value.map(result => result.item || result))
+    async onInfiniteScroll (_, done) {
+      // Se tiver erro no primeiro fetch, retorna o "done" na proxima.
+      if (((this.mx_hasFetchError && !this.mx_hasFilteredOptions) || this.hasNoOptionsOnFirstFetch)) return done()
+
+      if (!this.mx_hasFilteredOptions && !this.mx_search) {
+        await this.mx_setFetchOptions()
+        return done()
+      }
+
+      if (this.mx_canFetchOptions()) {
+        await this.mx_loadMoreOptions()
+        return done()
+      }
+
+      done(true)
+    },
+
+    setListWatcher () {
+      this.$watch('list', value => {
+        this.fuse = new Fuse(value, this.defaultFuseOptions)
+
+        this.filterOptionsByFuse(this.mx_search)
+      }, { deep: true })
     }
   }
 }

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

@@ -9,6 +9,24 @@ props:
     default: 100px
     type: String
 
+  empty-result-text:
+    desc: Define o texto dentro do box quando a lista está vazia.
+    default: Não há resultados disponíveis.
+    type: String
+
+  entity:
+    desc: Entidade enviada para a action "fetchFieldOptions" (usar somente quando "useLazyLoading" estiver habilitada).
+    default: ''
+    type: String
+    examples: [users]
+
+  fetching:
+    desc: Usado para saber quando o componente está fazendo fetching (usar somente quando "useLazyLoading" estiver habilitada).
+    default: false
+    type: Boolean
+    model: true
+    examples: [v-model:fetching="isFetching"]
+
   fuse-options:
     desc: Opções do Fuse.js (https://fusejs.io/api/options.html).
     debugger: true
@@ -23,8 +41,18 @@ props:
     default: 300px
     type: String
 
+  lazy-loading-props:
+    desc: Propriedades para o lazy loading (usar somente quando "useLazyLoading" estiver habilitada).
+    type: Object
+    debugger: true
+    default:
+      decamelizeFieldName: true
+      url: ''
+      params:
+        limit: 48
+
   list:
-    desc: Lista onde ocorrerá a busca (array de objetos).
+    desc: Lista onde ocorrerá a busca sendo array de objetos (usar somente quando "useLazyLoading" **NÃO** estiver habilitada).
     default: []
     type: String
 
@@ -34,6 +62,11 @@ props:
     examples: [v-model="search"]
     model: true
 
+  name:
+    desc: Nome do campo a ser enviado para a action "fetchFieldOptions" (usar somente quando "useLazyLoading" estiver habilitada).
+    type: String
+    examples: [cities]
+
   placeholder:
     desc: Placeholder do campo de pesquisa.
     default: Pesquisar
@@ -51,6 +84,11 @@ props:
     default: true
     type: Boolean
 
+  use-lazy-loading:
+    desc: Controla a busca pela store "fetchFieldOptions".
+    default: false
+    type: Boolean
+
 slots:
   default:
     desc: Acesso ao conteúdo principal, só existe caso a busca retorne algum resultado.
@@ -58,6 +96,9 @@ slots:
   empty-result:
     desc: Acesso ao conteúdo quando a busca não retorne resultado e a prop "useEmptySlot" seja "true".
 
+  loading:
+    desc: Acesso ao conteúdo do loading que contém o "<q-spinner-dots />"..
+
 events:
   '@empty-result -> function ()':
     desc: Dispara toda vez que a pesquisa não retorna resultado.
@@ -76,3 +117,27 @@ events:
         desc: Novo valor do v-model:results
         default: []
         type: Array
+
+  '@update:fetching -> function (value)':
+    desc: Dispara toda vez que o campo de busca faz o fetch do lazy loading
+    params:
+      value:
+        desc: Novo valor do v-model:fetching
+        default: false
+        type: Boolean
+
+  '@fetch-options-success -> function (value)':
+    desc: Dispara toda vez que o campo de busca faz o fetch do lazy loading com sucesso.
+    params:
+      value:
+        desc: Valor retornado pela action "fetchFieldOptions"
+        default: {}
+        type: Object
+
+  '@fetch-options-error -> function (value)':
+    desc: Dispara toda vez que o campo de busca faz o fetch do lazy loading e cai em uma exceção.
+    params:
+      value:
+        desc: Valor retornado pela action "fetchFieldOptions"
+        default: {}
+        type: Object

package/src/components/select/QasSelect.vue

@@ -1,13 +1,13 @@
 <template>
-  <q-select v-model="model" v-bind="attributes" @filter="filterOptions">
+  <q-select v-model="model" v-bind="attributes">
     <template #append>
       <slot name="append">
-        <q-icon v-if="searchable" name="o_search" />
+        <q-icon v-if="isSearchable" name="o_search" />
       </slot>
     </template>
 
     <template #no-option>
-      <slot name="no-option">
+      <slot v-if="!mx_isFetching" name="no-option">
         <q-item>
           <q-item-section class="text-grey">
             {{ noOptionLabel }}
@@ -16,6 +16,14 @@
       </slot>
     </template>
 
+    <template #after-options>
+      <slot v-if="mx_isFetching" name="after-options">
+        <div class="flex justify-center q-pb-sm">
+          <q-spinner-dots color="primary" size="20px" />
+        </div>
+      </slot>
+    </template>
+
     <template v-for="(_, name) in $slots" #[name]="context">
       <slot :name="name" v-bind="context || {}" />
     </template>
@@ -23,11 +31,14 @@
 </template>
 
 <script>
+import { searchFilterMixin } from '../../mixins'
 import Fuse from 'fuse.js'
 
 export default {
   name: 'QasSelect',
 
+  mixins: [searchFilterMixin],
+
   props: {
     fuseOptions: {
       default: () => ({}),
@@ -41,7 +52,7 @@ export default {
 
     modelValue: {
       default: () => [],
-      type: [Array, Object, String, Number]
+      type: [Array, Object, String, Number, Boolean]
     },
 
     noOptionLabel: {
@@ -54,13 +65,13 @@ export default {
       type: Array
     },
 
-    searchable: {
-      type: Boolean
-    },
-
     valueKey: {
       default: '',
       type: String
+    },
+
+    useSearch: {
+      type: Boolean
     }
   },
 
@@ -68,7 +79,6 @@ export default {
 
   data () {
     return {
-      filteredOptions: [],
       fuse: null
     }
   },
@@ -76,15 +86,18 @@ export default {
   computed: {
     attributes () {
       return {
-        clearable: this.searchable,
+        clearable: this.isSearchable,
         emitValue: true,
         mapOptions: true,
         outlined: true,
-
         ...this.$attrs,
 
-        options: this.filteredOptions,
-        useInput: this.searchable
+        options: this.mx_filteredOptions,
+        useInput: this.isSearchable,
+        error: this.hasError,
+        loading: this.hasLoading,
+        ...(this.useLazyLoading && { onVirtualScroll: this.mx_onVirtualScroll }),
+        ...(this.isSearchable && { onFilter: this.onFilter })
       }
     },
 
@@ -98,12 +111,20 @@ export default {
       }
     },
 
-    formattedResult () {
-      if (!this.labelKey && !this.valueKey) {
-        return this.options
-      }
+    isSearchable () {
+      return this.useSearch || this.useLazyLoading
+    },
+
+    defaultOptions () {
+      return this.mx_handleOptions(this.options)
+    },
 
-      return this.options.map(item => this.renameKey(item))
+    hasError () {
+      return this.mx_hasFetchError || this.$attrs.error
+    },
+
+    hasLoading () {
+      return this.mx_isFetching || this.$attrs.loading
     },
 
     model: {
@@ -124,11 +145,11 @@ export default {
 
     options: {
       handler () {
-        if (this.fuse) {
-          this.fuse.list = this.formattedResult
-        }
+        if (this.useLazyLoading && this.mx_hasFilteredOptions) return
+
+        if (this.fuse) this.setFuse()
 
-        this.filteredOptions = this.formattedResult
+        this.mx_filteredOptions = this.defaultOptions
       },
 
       immediate: true
@@ -137,42 +158,37 @@ export default {
 
   created () {
     this.setFuse()
+    this.useLazyLoading && this.mx_setFetchOptions('')
   },
 
   methods: {
-    filterOptions (value, update) {
-      update(() => {
-        if (!this.searchable) return
-
-        if (value === '') {
-          this.filteredOptions = this.formattedResult
-        } else {
-          const results = this.fuse.search(value)
-          this.filteredOptions = results.map(item => item.item)
-        }
-      })
+    setFuse () {
+      if (this.useSearch) {
+        this.fuse = new Fuse(this.defaultOptions, this.defaultFuseOptions)
+      }
     },
 
-    renameKey (item) {
-      const mapKeys = {
-        label: this.labelKey,
-        value: this.valueKey
+    async onFilter (value, update) {
+      if (this.useLazyLoading && value !== this.mx_search) {
+        await this.mx_filterOptionsByStore(value)
       }
 
-      for (const newKey in mapKeys) {
-        if (!item.hasOwnProperty.call(newKey)) {
-          item[newKey] = item[mapKeys[newKey]]
-          delete item[mapKeys[newKey]]
-        }
+      if (!this.useLazyLoading && this.useSearch) {
+        this.filterOptionsByFuse(value)
       }
 
-      return item
+      update()
     },
 
-    setFuse () {
-      if (this.searchable) {
-        this.fuse = new Fuse(this.options, this.defaultFuseOptions)
+    filterOptionsByFuse (value) {
+      if (value === '') {
+        this.mx_filteredOptions = this.defaultOptions
+        return
       }
+
+      const results = this.fuse.search(value)
+
+      this.mx_filteredOptions = this.mx_getNormalizedFuseResults(results)
     }
   }
 }

package/src/components/select/QasSelect.yml

@@ -7,6 +7,19 @@ meta:
   desc: Componente para select que implementa o "QSelect" repassando propriedades, slots e eventos.
 
 props:
+  entity:
+    desc: Entidade enviada para a action "fetchFieldOptions" (usar somente quando "useLazyLoading" estiver habilitada).
+    default: ''
+    type: String
+    examples: [users]
+
+  fetching:
+    desc: Usado para saber quando o componente está fazendo fetching (usar somente quando "useLazyLoading" estiver habilitada).
+    default: false
+    type: Boolean
+    model: true
+    examples: [v-model:fetching="isFetching"]
+
   fuse-options:
     desc: Opções do Fuse.js (https://fusejs.io/api/options.html).
     type: Object
@@ -21,13 +34,28 @@ props:
     type: String
     examples: [label-key="name"]
 
+  lazy-loading-props:
+    desc: Propriedades para o lazy loading (usar somente quando "useLazyLoading" estiver habilitada).
+    type: Object
+    debugger: true
+    default:
+      decamelizeFieldName: true
+      url: ''
+      params:
+        limit: 48
+
   model-value:
     desc: Model do componente.
     default: []
-    type: [Array, Object, String, Number]
+    type: [Array, Object, String, Number, Boolean]
     examples: [v-model="value"]
     model: true
 
+  name:
+    desc: Nome do campo a ser enviado para a action "fetchFieldOptions" (usar somente quando "useLazyLoading" estiver habilitada).
+    type: String
+    examples: [cities]
+
   no-option-label:
     desc: Rótulo padrão de quando os options estão vazios.
     default: Nenhum resultado foi encontrado.
@@ -38,19 +66,48 @@ props:
     default: []
     type: Array
 
-  searchable:
-    desc: Controla se vai ou não ter campo de busca no select.
-    type: Boolean
-
   value-key:
     desc: O componente internamente espera receber na propriedade "options" um array de objeto contendo "label" e "value", caso o seu objeto não tenha "value" mas um "uuid" por exemplo, você pode definir esta prop "label-value" como "uuid".
     type: String
     examples: [value-key="uuid"]
 
+  use-search:
+    desc: Controla se vai ou não ter campo de busca no select.
+    type: Boolean
+
+  use-lazy-loading:
+    desc: Controla a busca pela store "fetchFieldOptions".
+    default: false
+    type: Boolean
+
 events:
   '@update:model-value -> function (value)':
     desc: Dispara toda vez que o model é atualizado, também utilizado para v-model.
     params:
       value:
         desc: Novo valor do v-model
-        type: [Array, Object, String, Number]
+        type: [Array, Object, String, Number, Boolean]
+
+  '@update:fetching -> function (value)':
+    desc: Dispara toda vez que o campo de busca faz o fetch do lazy loading
+    params:
+      value:
+        desc: Novo valor do v-model:fetching
+        default: false
+        type: Boolean
+
+  '@fetch-options-success -> function (value)':
+    desc: Dispara toda vez que o campo de busca faz o fetch do lazy loading com sucesso.
+    params:
+      value:
+        desc: Valor retornado pela action "fetchFieldOptions"
+        default: {}
+        type: Object
+
+  '@fetch-options-error -> function (value)':
+    desc: Dispara toda vez que o campo de busca faz o fetch do lazy loading e cai em uma exceção.
+    params:
+      value:
+        desc: Valor retornado pela action "fetchFieldOptions"
+        default: {}
+        type: Object