@bildvitta/quasar-ui-asteroid 3.0.0-beta.2 → 3.0.0-beta.20

package/src/components/password-input/QasPasswordInput.vue

@@ -1,19 +1,17 @@
 <template>
-  <div>
-    <qas-input v-model="model" bottom-slots v-bind="$attrs" remove-error-on-type :type="type">
-      <template #append>
-        <q-icon class="cursor-pointer" :color="iconColor" :name="icon" @click="toggle" />
-      </template>
-
-      <template v-for="(_, name) in $slots" #[name]="context">
-        <slot :name="name" v-bind="context || {}" />
-      </template>
-
-      <template v-if="!hideStrengthChecker" #hint>
-        <qas-password-strength-checker v-bind="strengthCheckerProps" :password="model" />
-      </template>
-    </qas-input>
-  </div>
+  <qas-input v-model="model" :bottom-slots="false" v-bind="$attrs" :type="type" use-remove-error-on-type>
+    <template #append>
+      <q-icon class="cursor-pointer" :color="iconColor" :name="icon" @click="toggle" />
+    </template>
+
+    <template v-for="(_, name) in $slots" #[name]="context">
+      <slot :name="name" v-bind="context || {}" />
+    </template>
+
+    <template v-if="useStrengthChecker" #hint>
+      <qas-password-strength-checker v-bind="strengthCheckerProps" :password="model" />
+    </template>
+  </qas-input>
 </template>
 
 <script>
@@ -29,8 +27,11 @@ export default {
 
   mixins: [passwordMixin],
 
+  inheritAttrs: false,
+
   props: {
-    hideStrengthChecker: {
+    useStrengthChecker: {
+      default: true,
       type: Boolean
     },
 

package/src/components/password-input/QasPasswordInput.yml

@@ -7,22 +7,11 @@ mixins:
   - '@bildvitta/quasar-ui-asteroid/dist/api/QasInput.json'
   - quasar/dist/api/QInput.json
 props:
-  use-strength-checker:
-    desc: Controla exibição do componente `QasStrenghtChecker`.
-    default: true
-    type: Boolean
-
   icon-color:
     desc: Cor do ícone do input.
     default: primary
     type: String
 
-  model-value:
-    desc: Model do componente.
-    type: String
-    examples: [v-model="value"]
-    model: true
-
   levels:
     desc: Níveis de força da senha, é um objeto de objeto.
     type: [Object, Boolean]
@@ -59,6 +48,12 @@ props:
         progress: 1
         textClass: text-positive
 
+  model-value:
+    desc: Model do componente.
+    type: String
+    examples: [v-model="value"]
+    model: true
+
   minlength:
     desc: Número mínimo de caracteres.
     default: 8
@@ -74,6 +69,11 @@ props:
     default: blue-grey-1
     type: String
 
+  use-strength-checker:
+    desc: Controla exibição do componente `QasStrengthChecker`.
+    default: true
+    type: Boolean
+
   use-lowercase:
     desc: Obrigatório uso de letra(s) minuscula.
     default: true

package/src/components/password-strength-checker/QasPasswordStrengthChecker.yml

@@ -4,16 +4,6 @@ meta:
   desc: Componente para checar nível de força da senha.
 
 props:
-  model-value:
-    desc: Model do componente, retorna se passou ou não na validação de senha.
-    type: Boolean
-    examples: [v-model="value"]
-    model: true
-
-  password:
-    desc: Senha para ser usado nas validações.
-    type: String
-
   levels:
     desc: Níveis de força da senha, é um objeto de objeto.
     type: [Object, Boolean]
@@ -50,6 +40,16 @@ props:
         progress: 1
         textClass: text-positive
 
+  password:
+    desc: Senha para ser usado nas validações.
+    type: String
+
+  model-value:
+    desc: Model do componente, retorna se passou ou não na validação de senha.
+    type: Boolean
+    examples: [v-model="value"]
+    model: true
+
   minlength:
     desc: Número mínimo de caracteres.
     default: 8

package/src/components/profile/QasProfile.vue

@@ -13,7 +13,7 @@
         </div>
       </div>
       <slot name="grid">
-        <qas-grid-generator class="col-lg-7 col-xs-12 items-center" :columns="columns" :fields="filterObject(fields, list)" hide-empty-result :result="result">
+        <qas-grid-generator class="col-lg-7 col-xs-12 items-center" :columns="columns" :fields="filterObject(fields, list)" :result="result" :use-empty-result="false">
           <template v-for="(_, name) in $slots" #[name]="context">
             <slot :name="name" v-bind="context || {}" />
           </template>
@@ -25,7 +25,6 @@
 
 <script>
 import filterObject from '../../helpers/filter-object'
-import screenMixin from '../../mixins/screen'
 
 import QasAvatar from '../avatar/QasAvatar.vue'
 import QasBox from '../box/QasBox.vue'
@@ -40,8 +39,6 @@ export default {
     QasGridGenerator
   },
 
-  mixins: [screenMixin],
-
   props: {
     columns: {
       type: Object,
@@ -82,7 +79,7 @@ export default {
 
   computed: {
     directionClasses () {
-      return this.mx_untilMedium ? 'col' : 'row items-center'
+      return this.$qas.screen.untilMedium ? 'col' : 'row items-center'
     },
 
     userAvatarImage () {
@@ -90,7 +87,7 @@ export default {
     },
 
     avatarSize () {
-      return this.mx_isSmall ? '145px' : '188px'
+      return this.$qas.screen.isSmall ? '145px' : '188px'
     }
   },
 

package/src/components/profile/QasProfile.yml

@@ -34,16 +34,16 @@ props:
     desc: Subtitulo do cabeçalho de perfil.
     type: String
 
-  title:
-    desc: Título do cabeçalho de perfil.
-    type: String
-    required: true
-
   tag:
     desc: Tag do componente pai.
     default: qas-box
     type: String
 
+  title:
+    desc: Título do cabeçalho de perfil.
+    type: String
+    required: true
+
 slots:
   default:
     desc: Slot para acessar seção de título e subtitulo.

package/src/components/resizer/QasResizer.vue

@@ -1,5 +1,5 @@
 <template>
-  <q-img :ratio="ratio" spinner-color="grey-6" :src="imageSource">
+  <q-img :ratio="ratio" spinner-color="grey-7" :src="imageSource">
     <template #error>
       <div class="absolute-full bg-grey-2 flex flex-center text-grey">⚠︎</div>
     </template>

package/src/components/resizer/QasResizer.yml

@@ -7,6 +7,12 @@ meta:
   desc: Componente para exibir imagem redimensionadas, implementa o "QImg".
 
 props:
+  resize:
+    desc: Formato de ajuste.
+    default: cover
+    type: String
+    examples: [cover, contain, fill, inside, outside]
+
   size:
     desc: Tamanho da imagem.
     type: String
@@ -16,8 +22,3 @@ props:
     type: String
     examples: [bild-vitta.png]
 
-  resize:
-    desc: Formato de ajuste.
-    default: cover
-    type: String
-    examples: [cover, contain, fill, inside, outside]

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,88 +103,162 @@ 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 () {
       return {
-        distance: 100,
-        location: 0,
-        maxPatternLength: 32,
-        minMatchCharLength: 1,
-        shouldSort: true,
         threshold: 0.1,
-        tokenize: true,
+        ignoreLocation: true,
 
         ...this.fuseOptions
       }
     },
 
-    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,20 +9,50 @@ 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).
-    default: "{ distance: 100, location: 0, maxPatternLength: 32, minMatchCharLength: 1, shouldSort: true, threshold: 0.1, tokenize: true }"
     debugger: true
     type: Object
     examples: ["{ keys: ['label'] }"]
+    default:
+      ignoreLocation: true
+      threshold: 0.1
 
   height:
     desc: Define altura do box quando a lista não está vazia.
     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
 
@@ -32,16 +62,16 @@ 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
     type: String
 
-  use-empty-slot:
-    desc: Controla o slot "empty-result".
-    default: true
-    type: Boolean
-
   results:
     desc: Model que retorna o resultado filtrado.
     default: []
@@ -49,6 +79,16 @@ props:
     examples: [v-model:results="results"]
     model: true
 
+  use-empty-slot:
+    desc: Controla o slot "empty-result".
+    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.
@@ -56,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.
@@ -74,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