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

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

@@ -4,29 +4,28 @@ meta:
   desc: Componente para C.R.U.D. responsável pela visualização (Read) ou conhecido também como "show".
 
 props:
-  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
-    type: String
+  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
-
-  url:
-    desc: Envia como parâmetro para a action "fetchSingle" do modulo correspondente a "entity".
+  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
     type: String
 
-  result:
+  errors:
     model: true
-    desc: Model de result, utilizado para recuperar o resultado retornado pelo componente.
+    desc: Model de errors, utilizado para recuperar os errors fora do template.
+    default: {}
     type: Object
-    examples: [v-model:result="result"]
+    examples: [v-model:errors="errors"]
 
   fields:
     model: true
@@ -35,12 +34,11 @@ props:
     type: Object
     examples: [v-model:fields="fields"]
 
-  errors:
+  fetching:
     model: true
-    desc: Model de errors, utilizado para recuperar os errors fora do template.
-    default: {}
-    type: Object
-    examples: [v-model:errors="errors"]
+    desc: Model de fetching, utilizado para saber se o componente está fazendo fetching de dados.
+    type: Boolean
+    examples: [v-model:fetching="isFetching"]
 
   metadata:
     model: true
@@ -49,23 +47,46 @@ props:
     type: Object
     examples: [v-model:metadata="metadata"]
 
-  fetching:
+  result:
     model: true
-    desc: Model de fetching, utilizado para saber se o componente está fazendo fetching de dados.
+    desc: Model de result, utilizado para recuperar o resultado retornado pelo componente.
+    type: Object
+    examples: [v-model:result="result"]
+
+  url:
+    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
-    examples: [v-model:fetching="isFetching"]
 
 slots:
-  header:
-    desc: 'Slot para acessar o header.'
-
   default:
     desc: 'Slot para ter o conteúdo principal (dentro do main).'
 
   footer:
     desc: 'Slot para acessar o footer.'
 
+  header:
+    desc: 'Slot para acessar o header.'
+
 events:
+  '@fetch-success -> function(value)':
+    desc: Dispara quando a action "fetchSingle" é executada com sucesso.
+    params:
+      value:
+        desc: Retorna todos os dados "cru" respondido pelo fetch.
+        type: Object
+
+  '@fetch-error -> function(value)':
+    desc: Dispara quando a action "fetchSingle" cai em uma exceção.
+    params:
+      value:
+        desc: Retorna todos os dados "cru" respondido na exceção do fetch.
+        type: Object
+
   '@update:result -> function(value)':
     desc: Dispara quando a action "fetchSingle" é executada com sucesso, é chamado antes do evento "fetch-success".
     params:
@@ -100,17 +121,3 @@ events:
       value:
         desc: Retorna se está ou não fazendo fetching de dados.
         type: Boolean
-
-  '@fetch-success -> function(value)':
-    desc: Dispara quando a action "fetchSingle" é executada com sucesso.
-    params:
-      value:
-        desc: Retorna todos os dados "cru" respondido pelo fetch.
-        type: Object
-
-  '@fetch-error -> function(value)':
-    desc: Dispara quando a action "fetchSingle" cai em uma exceção.
-    params:
-      value:
-        desc: Retorna todos os dados "cru" respondido na exceção do fetch.
-        type: Object

package/src/components/sortable/QasSortable.yml

@@ -9,15 +9,22 @@ props:
     required: true
     type: String
 
+  list:
+    desc: Lista que vai ser reordenada.
+    default: []
+    type: Array
+
   sortable-options:
     desc: Opções do "sortablejs" (https://github.com/SortableJS/Sortable#options).
     default: { animation: 500 }
     type: Object
 
-  list:
-    desc: Lista que vai ser reordenada.
+  sorted:
+    desc: Model da lista reordenada
     default: []
     type: Array
+    examples: [v-model:sorted="fields"]
+    model: true
 
   tag:
     desc: Tag do componente pai.
@@ -28,24 +35,17 @@ props:
     desc: Parâmetro enviado para a action "replace".
     type: String
 
-  sorted:
-    desc: Model da lista reordenada
-    default: []
-    type: Array
-    examples: [v-model:sorted="fields"]
-    model: true
-
 slots:
   default:
     desc: Slot para adicionar os items que serão reordenados.
 
 events:
-  '@update:sorted -> function(value)':
-    desc: Dispara no created e toda vez que a prop "list" muda, usado para o v-model:sorted.
+  '@error -> function(value)':
+    desc: Dispara toda vez que acontece algum erro ao salvar a nova ordenação.
     params:
       value:
-        desc: Lista contendo nova ordenação.
-        type: Array
+        desc: fields.
+        type: Object
 
   '@sort -> function(value)':
     desc: Dispara toda vez que acontece uma nova ordenação.
@@ -57,9 +57,9 @@ events:
         desc: fields.
         type: Object
 
-  '@error -> function(value)':
-    desc: Dispara toda vez que acontece algum erro ao salvar a nova ordenação.
+  '@update:sorted -> function(value)':
+    desc: Dispara no created e toda vez que a prop "list" muda, usado para o v-model:sorted.
     params:
       value:
-        desc: fields.
-        type: Object
+        desc: Lista contendo nova ordenação.
+        type: Array

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

@@ -16,13 +16,10 @@
 import { extend } from 'quasar'
 import { humanize } from '../../helpers/filters'
 import { setScrollOnGrab } from '../../helpers'
-import screenMixin from '../../mixins/screen'
 
 export default {
   name: 'QasTableGenerator',
 
-  mixins: [screenMixin],
-
   props: {
     columns: {
       default: () => [],
@@ -104,6 +101,8 @@ export default {
           columnByField(this.fields[index])
         }
 
+        this.$qas.logger.group('QasTableGenerator - Automatic columns', [columns])
+
         return columns
       }
 
@@ -116,6 +115,8 @@ export default {
         }
       })
 
+      this.$qas.logger.group('QasTableGenerator - columns', [columns])
+
       return columns
     },
 
@@ -132,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
@@ -142,6 +145,10 @@ export default {
 
         return result
       })
+
+      this.$qas.logger.group('QasTableGenerator - resultsByFields', [mappedResults])
+
+      return mappedResults
     },
 
     rowsPerPage () {
@@ -149,7 +156,7 @@ export default {
     },
 
     tableClass () {
-      return this.mx_isSmall && 'qas-table-generator--mobile'
+      return this.$qas.screen.isSmall && 'qas-table-generator--mobile'
     },
 
     hasScrollOnGrab () {
@@ -202,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/table-generator/QasTableGenerator.yml

@@ -9,6 +9,11 @@ props:
     default: []
     type: Array
 
+  empty-result-text:
+    desc: Quando uma célula da tabela está vazia, esta prop define qual será o valor padrão.
+    default: '-'
+    type: String
+
   fields:
     desc: Lista de field contendo informações necessárias para a criação da tabela.
     default: {}
@@ -26,11 +31,6 @@ props:
     default: name
     type: String
 
-  empty-result-text:
-    desc: Quando uma célula da tabela está vazia, esta prop define qual será o valor padrão.
-    default: '-'
-    type: String
-
   use-scroll-on-grab:
     desc: Adiciona scroll pelo mouse ao arrastar tabela em todas as telas (Celular, Desktop).
     default: true

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

@@ -18,7 +18,6 @@
 </template>
 
 <script>
-import screenMixin from '../../mixins/screen'
 import QasDialog from '../dialog/QasDialog.vue'
 
 export default {
@@ -28,8 +27,6 @@ export default {
     QasDialog
   },
 
-  mixins: [screenMixin],
-
   props: {
     dialogProps: {
       type: Object,
@@ -69,7 +66,7 @@ export default {
 
   computed: {
     truncateTextClass () {
-      return (this.isTruncated || this.mx_isSmall) && 'ellipsis q-pr-sm'
+      return (this.isTruncated || this.$qas.screen.isSmall) && 'ellipsis q-pr-sm'
     },
 
     isTruncated () {
@@ -84,7 +81,7 @@ export default {
       return {
         cancel: false,
         ok: false,
-        useCloseIcon: true,
+        useCloseButton: true,
         ...this.dialogProps,
         card: {
           title: this.dialogTitle,

package/src/components/transfer/QasTransfer.vue

@@ -49,7 +49,6 @@
 </template>
 
 <script>
-import { screenMixin } from '../../mixins'
 import { extend } from 'quasar'
 
 import QasBtn from '../btn/QasBtn.vue'
@@ -65,8 +64,6 @@ export default {
     QasSearchBox
   },
 
-  mixins: [screenMixin],
-
   props: {
     emitValue: {
       type: Boolean
@@ -124,15 +121,15 @@ export default {
 
   computed: {
     actionsClass () {
-      return !this.mx_isSmall && 'column'
+      return !this.$qas.screen.isSmall && 'column'
     },
 
     gutterClass () {
-      return `q-col-gutter-${this.mx_untilLarge ? 'md' : 'xl'}`
+      return `q-col-gutter-${this.$qas.screen.untilLarge ? 'md' : 'xl'}`
     },
 
     iconClass () {
-      return !this.mx_isSmall && 'qas-transfer__icon'
+      return !this.$qas.screen.isSmall && 'qas-transfer__icon'
     },
 
     searchBoxProps () {
@@ -147,6 +144,7 @@ export default {
     options: {
       handler (value) {
         this.optionsList = extend(true, [], value)
+        this.setSelectedFromValue(true)
       },
 
       immediate: true
@@ -212,7 +210,7 @@ export default {
     },
 
     setSelectedFromValue (isFirst) {
-      this.modelValue.forEach(item => {
+      this.optionsList.length && this.modelValue.forEach(item => {
         const selected = this.optionsList.find(option => {
           return option[this.valueKey] === (this.emitValue ? item : item[this.valueKey])
         })

package/src/components/transfer/QasTransfer.yml

@@ -8,25 +8,25 @@ props:
     desc: Controla como sera o retorno do model, se "true" será um array de string, se "false" array de objeto.
     type: Boolean
 
-  model-value:
-    desc: Model do componente, controla quais itens estão na segunda coluna.
-    default: []
-    type: Array
-
   fuse-options:
     desc: Configurações do [fuse.js](https://fusejs.io/api/options.html).
     default: { keys: ['label'] }
     type: Object
 
+  label-key:
+    desc: Nos options, você pode passar um array de objeto com qualquer chave/valor, esta prop serve para identificar qual será o equivalente ao "label".
+    default: label
+    type: String
+
   label:
     desc: Rotulo que vai ficar em cima da primeira coluna.
     type: String
     required: true
 
-  label-key:
-    desc: Nos options, você pode passar um array de objeto com qualquer chave/valor, esta prop serve para identificar qual será o equivalente ao "label".
-    default: label
-    type: String
+  model-value:
+    desc: Model do componente, controla quais itens estão na segunda coluna.
+    default: []
+    type: Array
 
   options:
     desc: Array de objetos com todos items que serão transferidos

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="grey-3" 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,21 +346,23 @@ 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
     },
 
     getFileNameClass (isFailed) {
-      return isFailed ? 'text-negative' : 'text-grey-8'
+      return isFailed ? 'text-negative' : 'text-grey-9'
     },
 
     isFailed (file) {
@@ -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