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

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,40 +86,45 @@ 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 })
       }
     },
 
     defaultFuseOptions () {
       return {
-        distance: 100,
-        includeScore: true,
+        ignoreLocation: true,
         keys: ['label', 'value'],
-        location: 0,
-        maxPatternLength: 32,
-        minMatchCharLength: 1,
-        shouldSort: true,
         threshold: 0.1,
-        tokenize: true,
 
         ...this.fuseOptions
       }
     },
 
-    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: {
@@ -130,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
@@ -143,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,33 +7,55 @@ meta:
   desc: Componente para select que implementa o "QSelect" repassando propriedades, slots e eventos.
 
 props:
-  model-value:
-    desc: Model do componente.
-    default: []
-    type: [Array, Object, String, Number]
-    examples: [v-model="value"]
+  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
     debugger: true
     default:
-      distance: 100
-      includeScore: true
+      ignoreLocation: true
       keys: [label, value]
-      location: 0
-      maxPatternLength: 32
-      minMatchCharLength: 1
-      shouldSort: true
       threshold: 0.1
-      tokenize: true
 
   label-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 "label" mas um "name" por exemplo, você pode definir esta prop "label-key" como "name".
     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, 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.
@@ -44,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

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

@@ -6,7 +6,7 @@
           <slot v-bind="slotData" :item="result" name="item">
             <slot name="item-section" :result="result">
               <q-item-section class="items-start text-bold">
-                <div :class="labelClass" @click="redirectRoute(result)">{{ result.label }}</div>
+                <div :class="labelClass" @click="onClickLabel({ item: result, index })">{{ result.label }}</div>
               </q-item-section>
             </slot>
 
@@ -24,7 +24,6 @@
 
 <script>
 import { sortBy } from 'lodash-es'
-import { screenMixin } from '../../mixins'
 
 import QasBtn from '../btn/QasBtn.vue'
 import QasSearchBox from '../search-box/QasSearchBox.vue'
@@ -37,8 +36,6 @@ export default {
     QasSearchBox
   },
 
-  mixins: [screenMixin],
-
   props: {
     deleteOnly: {
       type: Boolean
@@ -59,26 +56,16 @@ export default {
       default: () => []
     },
 
-    to: {
-      default: () => ({}),
-      type: Object
-    },
-
-    redirectKey: {
-      default: 'uuid',
-      type: String
-    },
-
-    paramKey: {
-      default: 'id',
-      type: String
+    useClickableLabel: {
+      type: Boolean
     }
   },
 
   emits: [
     'added',
-    'update:modelValue',
-    'removed'
+    'click-label',
+    'removed',
+    'update:modelValue'
   ],
 
   data () {
@@ -90,12 +77,8 @@ export default {
   },
 
   computed: {
-    isRedirectEnabled () {
-      return Object.keys(this.to).length
-    },
-
     labelClass () {
-      return this.isRedirectEnabled ? 'cursor-pointer' : ''
+      return this.useClickableLabel && 'cursor-pointer'
     },
 
     slotData () {
@@ -124,6 +107,7 @@ export default {
         this.values = [...value]
       },
 
+      deep: true,
       immediate: true
     }
   },
@@ -144,9 +128,9 @@ export default {
       const isSelected = this.values.includes(value)
 
       return {
-        dense: this.mx_isSmall,
-        hideLabelOnSmallScreen: true,
-        icon: !this.mx_isSmall ? undefined : isSelected ? 'o_close' : 'o_add',
+        dense: this.$qas.screen.isSmall,
+        useLabelOnSmallScreen: false,
+        icon: !this.$qas.screen.isSmall ? undefined : isSelected ? 'o_close' : 'o_add',
         label: isSelected ? 'Remover' : 'Adicionar',
         outline: isSelected,
         size: 'sm'
@@ -170,11 +154,8 @@ export default {
       })
     },
 
-    redirectRoute (item) {
-      return this.isRedirectEnabled && this.$router.push({
-        params: { [this.paramKey]: item[this.redirectKey] },
-        ...this.to
-      })
+    onClickLabel ({ item, index }) {
+      this.useClickableLabel && this.$emit('click-label', { item, index })
     },
 
     remove (item) {

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

@@ -28,20 +28,9 @@ props:
     examples: [v-model="value"]
     model: true
 
-  to:
-    desc: 'Configuração do vue-router para enviar no $route.push({ ...to, params: {...} }).'
-    default: Pesquisar
-    type: String
-
-  redirect-key:
-    desc: Controla qual propriedade será a chave primaria para fazer o redirecionamento.
-    default: uuid
-    type: String
-
-  param-key:
-    desc: Controla qual parâmetro será enviado para rota.
-    default: id
-    type: String
+  use-clickable-label:
+    desc: Habilita "cursor-pointer" no label e evento "click-label".
+    type: Boolean
 
 slots:
   item:
@@ -98,6 +87,16 @@ events:
         desc: Item adicionado
         type: String
 
+  '@click-label -> function ({ item, index })':
+    desc: Dispara toda vez que o label do item é clicado **SE** a propriedade "useClickableLabel" for "true".
+    params:
+      item:
+        desc: Item clicado
+        type: Object
+      index:
+        desc: Posição do item
+        type: Number
+
   '@removed -> function (item, index)':
     desc: Dispara toda vez que um item é removido do v-model.
     params:

package/src/components/signature-pad/QasSignaturePad.vue

@@ -116,7 +116,7 @@ export default {
 <style lang="scss">
 .qas-signature-pad {
   &__canvas {
-    border: 1px solid $grey-3;
+    border: 1px solid $separator-color;
   }
 }
 </style>

package/src/components/signature-pad/QasSignaturePad.yml

@@ -15,7 +15,7 @@ props:
     default: {}
     type: Object
 
-  signature_options:
+  signature-options:
     desc: Opções da biblioteca signature_pad (https://github.com/szimek/signature_pad#options).
     default: {}
     type: Object

package/src/components/signature-uploader/QasSignatureUploader.vue

@@ -7,10 +7,10 @@
             <div v-if="uploadLabel" class="q-uploader__title">{{ uploadLabel }}</div>
           </div>
 
-          <q-btn v-if="!readonly" dense flat icon="o_add" round @click="openDialog" />
+          <qas-btn v-if="!readonly" color="white" dense flat icon="o_add" round @click="openDialog" />
 
-          <q-btn ref="forceUpload" class="hidden" @click="upload(scope)" />
-          <q-btn ref="buttonCleanFiles" class="hidden" @click="scope.removeUploadedFiles" />
+          <qas-btn ref="forceUpload" class="hidden" @click="upload(scope)" />
+          <qas-btn ref="buttonCleanFiles" class="hidden" @click="scope.removeUploadedFiles" />
         </div>
       </template>
     </qas-uploader>
@@ -27,18 +27,18 @@
       </template>
 
       <template #actions>
-        <q-btn class="full-width" color="primary" :disable="isEmpty" label="Salvar" no-caps @click="getSignatureData" />
-        <q-btn class="full-width q-mt-sm" color="primary" flat label="Cancelar" no-caps @click="closeSignature" />
+        <qas-btn class="full-width" color="primary" :disable="isEmpty" label="Salvar" no-caps @click="getSignatureData" />
+        <qas-btn class="full-width q-mt-sm" color="primary" flat label="Cancelar" no-caps @click="closeSignature" />
       </template>
     </qas-dialog>
   </div>
 </template>
 
 <script>
+import QasBtn from '../btn/QasBtn.vue'
 import QasDialog from '../dialog/QasDialog.vue'
 import QasUploader from '../uploader/QasUploader.vue'
 import QasSignaturePad from '../signature-pad/QasSignaturePad.vue'
-import { screenMixin } from '../../mixins'
 import { base64ToBlob } from '../../helpers'
 import { NotifyError } from '../../plugins'
 
@@ -46,13 +46,12 @@ export default {
   name: 'QasSignatureUploader',
 
   components: {
+    QasBtn,
     QasDialog,
     QasUploader,
     QasSignaturePad
   },
 
-  mixins: [screenMixin],
-
   props: {
     dialogProps: {
       type: Object,
@@ -118,18 +117,18 @@ export default {
 
     signaturePadWidth () {
       const sizes = {
-        [this.mx_isSmall]: { width: '100%' },
-        [this.mx_isMedium]: { width: '570px' },
-        [this.mx_isLarge]: { width: '350px' }
+        [this.$qas.screen.isSmall]: { width: '100%' },
+        [this.$qas.screen.isMedium]: { width: '570px' },
+        [this.$qas.screen.isLarge]: { width: '350px' }
       }
       return sizes.true
     },
 
     signaturePadHeight () {
       const sizes = {
-        [this.mx_isSmall]: '250',
-        [this.mx_isMedium]: '400',
-        [this.mx_isLarge]: '250'
+        [this.$qas.screen.isSmall]: '250',
+        [this.$qas.screen.isMedium]: '400',
+        [this.$qas.screen.isLarge]: '250'
       }
 
       return sizes.true

package/src/components/signature-uploader/QasSignatureUploader.yml

@@ -9,8 +9,13 @@ props:
     type: Object
     default: { maxWidth: '620px' }
 
-  upload-label:
-    desc: Rótulo do uploader.
+  model-value:
+    desc: Model do componente, retorna url da imagem upada, usando para v-model.
+    type: String
+
+  readonly:
+    desc: Controla se o componente vai ser apenas para visualização ou pode também fazer upload.
+    default: image/png
     type: String
 
   signature-label:
@@ -18,18 +23,13 @@ props:
     default: {}
     type: Object
 
-  model-value:
-    desc: Model do componente, retorna url da imagem upada, usando para v-model.
-    type: String
-
   type:
     desc: Tipo da imagem gerada.
     default: image/png
     type: String
 
-  readonly:
-    desc: Controla se o componente vai ser apenas para visualização ou pode também fazer upload.
-    default: image/png
+  upload-label:
+    desc: Rótulo do uploader.
     type: String
 
 events:

package/src/components/single-view/QasSingleView.vue

@@ -9,8 +9,8 @@
     </template>
 
     <div v-else-if="!mx_isFetching" class="q-my-xl text-center">
-      <q-icon class="q-mb-sm text-center" color="grey-6" name="o_search" size="38px" />
-      <div class="text-grey-6">Nenhum item encontrado.</div>
+      <q-icon class="q-mb-sm text-center" color="grey-7" name="o_search" size="38px" />
+      <div class="text-grey-7">Nenhum item encontrado.</div>
     </div>
 
     <footer v-if="mx_hasFooterSlot">
@@ -66,7 +66,9 @@ export default {
 
   watch: {
     $route (to, from) {
-      to.name === from.name && this.fetchSingle()
+      if (to.name === from.name) {
+        this.mx_fetchHandler({ id: this.id, url: this.url }, this.fetchSingle)
+      }
     },
 
     resultModel (value) {
@@ -75,19 +77,23 @@ export default {
   },
 
   created () {
-    this.fetchSingle()
+    this.mx_fetchHandler({ id: this.id, url: this.url }, this.fetchSingle)
   },
 
   methods: {
-    async fetchSingle (params = {}) {
+    async fetchSingle (externalPayload = {}) {
       this.mx_isFetching = true
 
       try {
-        const response = await this.$store.dispatch(
-          `${this.entity}/fetchSingle`,
-          { id: this.id, url: this.url, params }
+        const payload = { id: this.id, url: this.url, ...externalPayload }
+
+        this.$qas.logger.group(
+          `QasSingleView - fetchSingle -> payload do parâmetro do ${this.entity}/fetchSingle`,
+          [payload]
         )
 
+        const response = await this.$store.dispatch(`${this.entity}/fetchSingle`, payload)
+
         const { errors, fields, metadata } = response.data
 
         this.mx_setErrors(errors)
@@ -100,10 +106,20 @@ export default {
           metadata: this.mx_metadata
         })
 
+        this.$qas.logger.group(
+          `QasSingleView - fetchSingle -> resposta da action ${this.entity}/fetchSingle`, [response]
+        )
+
         this.$emit('fetch-success', response)
       } catch (error) {
         this.mx_fetchError(error)
         this.$emit('fetch-error', error)
+
+        this.$qas.logger.group(
+          `QasSingleView - fetchSingle -> exceção da action ${this.entity}/fetchSingle`,
+          [error],
+          { error: true }
+        )
       } finally {
         this.mx_isFetching = false
       }