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

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:
+  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]
+    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>
 
@@ -56,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 () {
@@ -87,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 () {
@@ -121,6 +107,7 @@ export default {
         this.values = [...value]
       },
 
+      deep: true,
       immediate: true
     }
   },
@@ -142,7 +129,7 @@ export default {
 
       return {
         dense: this.$qas.screen.isSmall,
-        hideLabelOnSmallScreen: true,
+        useLabelOnSmallScreen: false,
         icon: !this.$qas.screen.isSmall ? undefined : isSelected ? 'o_close' : 'o_add',
         label: isSelected ? 'Remover' : 'Adicionar',
         outline: isSelected,
@@ -167,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
 
-  param-key:
-    desc: Controla qual parâmetro será enviado para rota.
-    default: id
-    type: String
-
-  redirect-key:
-    desc: Controla qual propriedade será a chave primaria para fazer o redirecionamento.
-    default: uuid
-    type: String
-
-  to:
-    desc: 'Configuração do vue-router para enviar no $route.push({ ...to, params: {...} }).'
-    default: Pesquisar
-    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.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,14 +27,15 @@
       </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'
@@ -45,6 +46,7 @@ export default {
   name: 'QasSignatureUploader',
 
   components: {
+    QasBtn,
     QasDialog,
     QasUploader,
     QasSignaturePad

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

@@ -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
       }

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

@@ -4,15 +4,17 @@ meta:
   desc: Componente para C.R.U.D. responsável pela visualização (Read) ou conhecido também como "show".
 
 props:
+  before-fetch:
+    desc: Callback para controlar como funciona o comportamento do fetchSingle.
+    default: null
+    type: Function
+    examples: ['beforeFetch({ payload, resolve, done })']
+
   custom-id:
     desc: Por padrão, o componente vai pegar o "id" que vem como parâmetro na url, caso queira que o id seja diferente da url, use esta prop.
     type: String
     examples: ['my-custom-id']
 
-  dialog:
-    desc: Este componente pode ser utilizado dentro de um dialog, neste caso o componente pai não pode ser um "QPage" e sim uma "div", esta prop cuida disto.
-    type: Boolean
-
   entity:
     desc: Entidade da store, por exemplo se tiver que trabalhar com modulo de usuários, teremos o model "users" na store, que vai ser nossa "entity".
     required: true
@@ -55,6 +57,11 @@ props:
     desc: Envia como parâmetro para a action "fetchSingle" do modulo correspondente a "entity".
     type: String
 
+  use-boundary:
+    desc: Controla o limite que o FormView terá, quando é "false", a tag pai deixa de ser um "QPage" para ser uma "div" e é removido as classes "container" e "spaced", comumente utilizando quando precisa usar o QasFormView dentro de um dialog.
+    default: true
+    type: Boolean
+
 slots:
   default:
     desc: 'Slot para ter o conteúdo principal (dentro do main).'

package/src/components/table-generator/QasTableGenerator.vue

@@ -101,6 +101,8 @@ export default {
           columnByField(this.fields[index])
         }
 
+        this.$qas.logger.group('QasTableGenerator - Automatic columns', [columns])
+
         return columns
       }
 
@@ -113,6 +115,8 @@ export default {
         }
       })
 
+      this.$qas.logger.group('QasTableGenerator - columns', [columns])
+
       return columns
     },
 
@@ -129,9 +133,11 @@ export default {
     },
 
     resultsByFields () {
+      if (!Object.keys(this.fields).length) return []
+
       const results = extend(true, [], this.results)
 
-      return results.map((result, index) => {
+      const mappedResults = results.map((result, index) => {
         for (const key in result) {
           result.default = this.results[index]
           result[key] = humanize(this.fields[key], result[key]) || this.emptyResultText
@@ -139,6 +145,10 @@ export default {
 
         return result
       })
+
+      this.$qas.logger.group('QasTableGenerator - resultsByFields', [mappedResults])
+
+      return mappedResults
     },
 
     rowsPerPage () {
@@ -199,10 +209,11 @@ export default {
     handleScrollOnGrab () {
       const fullTableWidth = this.getFullTableWidth()
       const containerTableWidth = this.getContainerTableWidth()
+      const hasScrollOnGrab = !!Object.keys(this.scrollOnGrab).length
 
       if (fullTableWidth > containerTableWidth) {
         this.initializeScrollOnGrab()
-      } else if (this.hasScrollOnGrab) {
+      } else if (hasScrollOnGrab) {
         this.scrollOnGrab.destroyEvents()
         this.scrollOnGrab.element.style.cursor = 'auto'
         this.scrollOnGrab = {}

package/src/components/tabs-generator/QasTabsGenerator.vue

@@ -1,7 +1,7 @@
 <template>
   <q-tabs v-model="model" :active-color="activeColor" :indicator-color="indicatorColor" outside-arrows>
     <slot v-for="(tab, key) in formattedTabs" :item="tab" :name="`tab-${tab.value}`">
-      <q-tab :key="key" v-bind="tab" :class="tabClass" :label="tab.label" :name="key">
+      <q-tab :key="key" v-bind="tab" :class="tabClass" :label="tab.label" :name="tab.value">
         <slot :item="tab" :name="`tab-after-${tab.value}`">
           <q-badge v-if="counters[key]" :label="counters[key]" v-bind="defaultCounterProps" />
         </slot>
@@ -50,7 +50,7 @@ export default {
     tabs: {
       default: () => ({}),
       required: true,
-      type: Object
+      type: [Object, Array]
     }
   },
 

package/src/components/tabs-generator/QasTabsGenerator.yml

@@ -38,9 +38,9 @@ props:
     type: String
 
   tabs:
-    desc: Objeto contendo todas as tabs a serem geradas.
+    desc: Objeto ou Array contendo todas as tabs a serem geradas.
     default: {}
-    type: Object
+    type: [Object, Array]
     examples: ["{ tab1: 'tab1', tab2: 'tab2' }"]
 
 slots:

package/src/components/text-truncate/QasTextTruncate.vue

@@ -81,7 +81,7 @@ export default {
       return {
         cancel: false,
         ok: false,
-        useCloseIcon: true,
+        useCloseButton: true,
         ...this.dialogProps,
         card: {
           title: this.dialogTitle,

package/src/components/uploader/QasUploader.vue

@@ -15,7 +15,7 @@
 
             <qas-btn v-if="showAddFile" ref="buttonUpload" color="white" dense flat icon="o_add" round @click="$refs.hiddenInput.click()" />
 
-            <input ref="hiddenInput" class="qas-uploader__input" :multiple="isMultiple" type="file">
+            <input ref="hiddenInput" :accept="attributes.accept" class="qas-uploader__input" :multiple="isMultiple" type="file">
 
             <qas-btn ref="buttonCleanFiles" class="hidden" color="white" @click="scope.removeUploadedFiles" />
             <qas-btn v-if="scope.canUpload" color="white" dense flat icon="o_cloud_upload" round @click="scope.upload" />
@@ -28,7 +28,7 @@
         <slot name="list" :scope="scope">
           <div class="col-12 q-col-gutter-md row">
             <div v-for="(file, index) in getFilesList(scope.files, scope)" :key="index" class="row" :class="itemClass">
-              <qas-avatar class="q-mr-sm" color="contrast-primary" icon="o_attach_file" :image="file.image" rounded :text-color="getColorFileIcon(file)" />
+              <qas-avatar class="q-mr-sm" color="contrast-primary" icon="o_attach_file" :image="file.url" rounded :text-color="getColorFileIcon(file)" />
 
               <div class="col items-center no-wrap row">
                 <div class="column no-wrap" :class="{ col: isMultiple }">
@@ -131,6 +131,10 @@ export default {
 
     uploading: {
       type: Boolean
+    },
+
+    useObjectModel: {
+      type: Boolean
     }
   },
 
@@ -244,12 +248,19 @@ export default {
     uploaded (response) {
       const fullPath = response.xhr.responseURL.split('?').shift()
 
-      this.$emit(
-        'update:modelValue',
-        this.isMultiple ? [...this.modelValue, fullPath] : fullPath || ''
-      )
+      const objectValue = {
+        format: response.files[0].type,
+        url: fullPath,
+        name: response.files[0].name
+      }
+
+      const model = this.useObjectModel ? objectValue : fullPath
+
+      this.$emit('update:modelValue', this.isMultiple ? [...this.modelValue, model] : model || '')
 
       this.updateUploading(false)
+
+      this.$qas.logger.group('QasUploader - uploaded', [this.modelValue])
     },
 
     async fetchCredentials (filename) {
@@ -260,6 +271,12 @@ export default {
           entity: this.entity,
           filename
         })
+
+        this.$qas.logger.group(
+          'QasUploader - fetchCredentials -> resposta de /upload-credentials/',
+          [data]
+        )
+
         return data
       } finally {
         this.isFetching = false
@@ -278,8 +295,16 @@ export default {
       }
 
       const clonedValue = extend(true, [], this.modelValue)
-      const numberIndex = this.modelValue.findIndex(file => this.getFileName(file) === index)
+      const numberIndex = this.modelValue.findIndex(file => {
+        if (this.useObjectModel) {
+          return file.uuid === index || file.url.includes(index)
+        }
+
+        return this.getFileName(file) === index
+      })
+
       clonedValue.splice(numberIndex, 1)
+
       this.$emit('update:modelValue', clonedValue)
     },
 
@@ -288,12 +313,10 @@ export default {
     },
 
     getFilesList (uploadedFiles) {
-      const pathsList = Array.isArray(this.modelValue) ? this.modelValue : (this.modelValue ? [this.modelValue] : [])
-
       uploadedFiles = uploadedFiles.map((file, indexToDelete) => {
         return {
           isUploaded: true,
-          image: file.xhr ? file.xhr.responseURL.split('?').shift() : '',
+          url: file.xhr ? file.xhr.responseURL.split('?').shift() : '',
           name: file.name,
           progressLabel: file.__progressLabel,
           sizeLabel: file.__sizeLabel,
@@ -302,11 +325,20 @@ export default {
         }
       })
 
+      const pathsList = Array.isArray(this.modelValue)
+        ? this.modelValue
+        : (this.modelValue ? [this.modelValue] : [])
+
       const mergedList = [...pathsList, ...uploadedFiles]
 
       const files = {}
 
       mergedList.forEach(file => {
+        if (this.useObjectModel && file.uuid) {
+          files[file.uuid] = file
+          return
+        }
+
         if (file.isFailed) {
           files[file.name] = file
           return
@@ -314,16 +346,18 @@ export default {
 
         if (typeof file === 'string') {
           const fileName = this.getFileName(file)
-          files[fileName] = { image: file, isUploaded: false, name: fileName }
+          files[fileName] = { url: file, isUploaded: false, name: fileName }
           return
         }
 
-        if (file.image) {
-          const fileName = this.getFileName(file.image)
+        if (file.url) {
+          const fileName = this.getFileName(file.url)
           files[fileName] = file
         }
       })
 
+      this.$qas.logger.group('QasUploader - getFilesList', [files])
+
       return files
     },
 
@@ -343,6 +377,8 @@ export default {
       const filesList = Array.from(this.hiddenInputElement.files)
       const processedFiles = []
 
+      this.$refs.hiddenInput.value = ''
+
       filesList.forEach(file => processedFiles.push(this.resizeImage(file)))
       this.uploader.addFiles(await Promise.all(processedFiles))
     },
@@ -362,7 +398,14 @@ export default {
         // Retorna largura e altura da original da imagem
         const { width, height } = await getImageSize(image)
 
-        if (width <= this.sizeLimit) return file
+        if (width <= this.sizeLimit) {
+          this.$qas.logger.info(`
+            QasUploader - resizeImage -> Tamanho da imagem menor que o tamanho limite,
+            sendo assim, não faz o resize
+          `)
+
+          return file
+        }
 
         // Retorna os novos tamanhos redimensionados
         const resizedDimensions = getResizeDimensions(this.sizeLimit, width, height)
@@ -380,7 +423,11 @@ export default {
         const resizedImage = await pica.resize(image, canvas, this.defaultPicaResizeOptions)
         const blob = await pica.toBlob(resizedImage, type, 0.90)
 
-        return new File([blob], file.name, { type })
+        const newFile = new File([blob], file.name, { type })
+
+        this.$qas.logger.group('QasUploader - resizeImage -> nova imagem', [newFile])
+
+        return newFile
       } catch {
         // Caso não consiga redimensionar retorna o arquivo original
         return file

package/src/components/uploader/QasUploader.yml

@@ -76,6 +76,11 @@ props:
     examples: [v-model:uploading="isUploading"]
     model: true
 
+  useObjectModel:
+    desc: Controla se a model retornará um array de objetos.
+    type: Boolean
+    model: true
+
 slots:
   header:
     desc: Acesso ao header do <q-uploader />.