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

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 () {

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 />.

package/src/helpers/camelize-fields-name.js

@@ -0,0 +1,15 @@
+import { camelize } from 'humps'
+
+export default function camelizeFieldsName (fields) {
+  for (const field in fields) {
+    const currentField = fields[field]
+
+    currentField.name = camelize(currentField.name)
+
+    if (Object.keys(currentField.children || {}).length) {
+      camelizeFieldsName(currentField.children)
+    }
+  }
+
+  return fields
+}

package/src/helpers/filters.js

@@ -114,6 +114,8 @@ function humanize (field = {}, value) {
     case 'time': return time(value)
     case 'radio': return selectLabel(field.options, value)
     case 'percent': return formatPercent(value)
+    case 'money': return money(value)
+    case 'decimal': return decimal(value)
     default: return value
   }
 }

package/src/helpers/get-normalized-options.js

@@ -0,0 +1,20 @@
+/**
+ * param {options: object[], label: string, value: string} object
+ *
+ * @example getNormalizedOptions({
+ *  options: [{ name: 'Test 1', uuid: '1' }, { name: 'Test 2', uuid: '2' }],
+ *  label: 'name'
+ *  value: 'uuid'
+ * }) // retorna [{ label: 'Test 1', value: '1' }, { label: 'Test 2', value: '2' }]
+ */
+export default ({ options = [], label, value }) => {
+  return options.map(option => {
+    const { [label]: labelKey, [value]: valueKey, ...payload } = option
+
+    return {
+      label: option[label],
+      value: option[value],
+      ...payload
+    }
+  })
+}

package/src/helpers/handle-process.js

@@ -0,0 +1,13 @@
+/**
+ * @param {function} processEnv função que retorna o process.env.
+ * @param {string} defaultValue valor default caso não exista a process.env
+ *
+ * @example handleProcess(() => process.env.MY_ENV, 'meu-valor-default')
+ */
+export default (processEnv = () => {}, defaultValue) => {
+  try {
+    return processEnv() || defaultValue
+  } catch {
+    return defaultValue
+  }
+}

package/src/helpers/index.js

@@ -8,6 +8,9 @@ export { default as filterObject } from './filter-object.js'
 export { default as getGreatestCommonDivisor } from './get-greatest-common-divisor.js'
 export { default as filterObjectToArray } from './filter-object-to-array.js'
 export { default as filterListByHandle } from './filter-list-by-handle.js'
+export { default as camelizeFieldsName } from './camelize-fields-name.js'
+export { default as getNormalizedOptions } from './get-normalized-options.js'
+export { default as handleProcess } from './handle-process.js'
 
 export * from './filters.js'
 export * from './images.js'

package/src/mixins/generator.js

@@ -15,7 +15,9 @@ export default {
     gutter: {
       default: 'md',
       type: [String, Boolean],
-      validator: value => ['xs', 'sm', 'md', 'lg', 'xl'].includes(value)
+      validator: value => {
+        return typeof value === 'boolean' || ['xs', 'sm', 'md', 'lg', 'xl'].includes(value)
+      }
     }
   },
 
@@ -64,7 +66,13 @@ export default {
     },
 
     mx_handleColumnsByIndex (index, isGridGenerator) {
-      const fields = isGridGenerator ? this.fields : this.groupedFields.visible
+      const fields = isGridGenerator ? this.fields : {}
+
+      if (!isGridGenerator) {
+        for (const key in this.normalizedFields) {
+          Object.assign(fields, this.normalizedFields[key].fields.visible)
+        }
+      }
 
       if (!Array.isArray(fields)) {
         index = Object.keys(fields).findIndex(field => field === index)

package/src/mixins/index.js

@@ -1,6 +1,7 @@
 import contextMixin from './context.js'
 import formMixin from './form.js'
 import generatorMixin from './generator.js'
+import searchFilterMixin from './search-filter.js'
 import passwordMixin from './password.js'
 import viewMixin from './view.js'
 
@@ -8,6 +9,7 @@ export {
   contextMixin,
   formMixin,
   generatorMixin,
+  searchFilterMixin,
   passwordMixin,
   viewMixin
 }