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

package/src/components/list-view/QasListView.yml

@@ -4,25 +4,29 @@ meta:
   desc: Componente para C.R.U.D. responsável pela parte de listagem (Read).
 
 props:
+  before-fetch:
+    desc: Callback para controlar como funciona o comportamento do fetchList.
+    default: null
+    type: Function
+    examples: ['beforeFetch({ payload, resolve, done })']
+
   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
 
-  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 "fetchList" do modulo correspondente a "entity".
-    type: String
+  errors:
+    model: true
+    desc: Model de errors, utilizado para recuperar os errors fora do template.
+    default: {}
+    type: Object
+    examples: [v-model:errors="errors"]
 
-  results:
+  fetching:
     model: true
-    desc: Model de results, utilizado para recuperar a lista retornada pelo componente.
-    default: []
-    type: Array
-    examples: [v-model:results="results"]
+    desc: Model de fetching, utilizado para saber se o componente está fazendo fetching de dados.
+    type: Boolean
+    examples: [v-model:fetching="isFetching"]
 
   fields:
     model: true
@@ -31,12 +35,10 @@ props:
     type: Object
     examples: [v-model:fields="fields"]
 
-  errors:
-    model: true
-    desc: Model de errors, utilizado para recuperar os errors fora do template.
+  filters-props:
+    desc: Repassa as props para o componente "QasFilters".
     default: {}
     type: Object
-    examples: [v-model:errors="errors"]
 
   metadata:
     model: true
@@ -45,14 +47,20 @@ props:
     type: Object
     examples: [v-model:metadata="metadata"]
 
-  fetching:
+  results:
     model: true
-    desc: Model de fetching, utilizado para saber se o componente está fazendo fetching de dados.
-    type: Boolean
-    examples: [v-model:fetching="isFetching"]
+    desc: Model de results, utilizado para recuperar a lista retornada pelo componente.
+    default: []
+    type: Array
+    examples: [v-model:results="results"]
+
+  url:
+    desc: Envia como parâmetro para a action "fetchList" do modulo correspondente a "entity".
+    type: String
 
-  disable-refresh:
-    desc: Desabilita o [pull-to-refresh](https://quasar.dev/vue-components/pull-to-refresh#basic).
+  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
 
   use-filter:
@@ -60,28 +68,46 @@ props:
     default: true
     type: Boolean
 
-  filters-props:
-    desc: Repassa as props para o componente "QasFilters".
-    default: {}
-    type: Object
-
-slots:
-  header:
-    desc: 'Slot para acessar o header.'
+  use-refresh:
+    desc: Controla o [pull-to-refresh](https://quasar.dev/vue-components/pull-to-refresh#basic).
+    default: true
+    type: Boolean
 
-  filter:
-    desc: 'Slot para acessar o filtro.'
+  use-results-area-only:
+    desc: Controla se irá sempre ser exibido os resultados independente se não há nenhum resultado a ser exibido.
+    type: Boolean
 
+slots:
   default:
     desc: 'Slot para ter o conteúdo principal (dentro do main).'
 
   empty-results:
     desc: 'Slot acessar quando a listagem está vazia.'
 
+  filter:
+    desc: 'Slot para acessar o filtro.'
+
   footer:
     desc: 'Slot para acessar o footer.'
 
+  header:
+    desc: 'Slot para acessar o header.'
+
 events:
+  '@fetch-success -> function(value)':
+    desc: Dispara quando a action "fetchList" é 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 "fetchList" cai em uma exceção.
+    params:
+      value:
+        desc: Retorna todos os dados "cru" respondido na exceção do fetch.
+        type: Object
+
   '@update:results -> function(value)':
     desc: Dispara quando a action "fetchList" é executada com sucesso, é chamado antes do evento "fetch-success".
     params:
@@ -116,17 +142,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 "fetchList" é 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 "fetchList" cai em uma exceção.
-    params:
-      value:
-        desc: Retorna todos os dados "cru" respondido na exceção do fetch.
-        type: Object

package/src/components/map/QasMap.vue

@@ -26,13 +26,13 @@ export default {
       default: () => []
     },
 
-    usePopup: {
-      type: Boolean
-    },
-
     zoom: {
       type: Number,
       default: 17
+    },
+
+    usePopup: {
+      type: Boolean
     }
   },
 
@@ -70,7 +70,7 @@ export default {
 <style lang="scss">
 .qas-map {
   &__draw {
-    height: 300px;
+    height: 300px !important;
     width: 100%;
   }
 }

package/src/components/nested-fields/QasNestedFields.vue

@@ -10,11 +10,11 @@
           <div v-if="!row[destroyKey]" :key="index" class="col-12 q-mt-md">
             <div>
               <div class="flex items-center justify-between q-py-xs">
-                <qas-label v-if="!useSingleLabel" :label="setRowLabel(index)" />
+                <qas-label v-if="!useSingleLabel" :label="getRowLabel(index)" />
 
                 <div v-if="!useInlineActions" class="q-gutter-x-sm">
-                  <qas-btn v-if="useDuplicate" v-bind="btnDuplicateProps" @click="add(row)" />
-                  <qas-btn v-if="showDestroyBtn" v-bind="btnDestroyProps" @click="destroy(index, row)" />
+                  <qas-btn v-if="useDuplicate" v-bind="buttonDuplicateProps" @click="add(row)" />
+                  <qas-btn v-if="showDestroyBtn" v-bind="buttonDestroyProps" @click="destroy(index, row)" />
                 </div>
               </div>
 
@@ -75,7 +75,6 @@ import { TransitionGroup } from 'vue'
 
 import { constructObject } from '../../helpers'
 import { extend } from 'quasar'
-import { camelize } from 'humps'
 
 export default {
   name: 'QasNestedFields',
@@ -96,7 +95,7 @@ export default {
       default: 'Inserir novo campo'
     },
 
-    btnDestroyProps: {
+    buttonDestroyProps: {
       type: Object,
       default: () => {
         return {
@@ -108,14 +107,14 @@ export default {
       }
     },
 
-    btnDuplicateProps: {
+    buttonDuplicateProps: {
       type: Object,
       default: () => {
         return {
           label: 'Duplicar',
           icon: 'o_content_copy',
           flat: true,
-          hideMobileLabel: true,
+          useLabelOnSmallScreen: false,
           dense: true
         }
       }
@@ -160,6 +159,11 @@ export default {
       }
     },
 
+    identifierItemKey: {
+      type: String,
+      default: 'uuid'
+    },
+
     rowLabel: {
       type: String,
       default: ''
@@ -225,13 +229,7 @@ export default {
     },
 
     children () {
-      const field = extend(true, {}, this.field)
-
-      for (const key in field?.children) {
-        field.children[key].name = camelize(field?.children[key].name)
-      }
-
-      return field?.children
+      return this.field?.children
     },
 
     showDestroyBtn () {
@@ -258,8 +256,7 @@ export default {
 
       return {
         tag: 'div',
-        enterActiveClass: 'animated slideInDown',
-        leaveActiveClass: 'animated slideOutUp'
+        enterActiveClass: 'animated slideInDown'
       }
     }
   },
@@ -272,9 +269,9 @@ export default {
       immediate: true
     },
 
-    field: {
+    rowObject: {
       handler () {
-        !this.modelValue.length && this.setDefaultNestedValue()
+        if (!this.nested.length) return this.setDefaultNestedValue()
       },
       immediate: true
     }
@@ -282,13 +279,22 @@ export default {
 
   methods: {
     add (row = {}) {
-      this.nested.push({ ...this.rowObject, ...row })
+      const payload = { ...this.rowObject, ...row }
+      const hasIdentifierKey = payload[this.identifierItemKey]
+
+      if (hasIdentifierKey) {
+        delete payload[this.identifierItemKey]
+      }
+
+      this.nested.push(payload)
 
       this.$nextTick(() => {
         this.useAnimation && this.setScroll()
         this.setFocus()
       })
 
+      this.$qas.logger.group('QasNestedFields - add', [payload])
+
       return this.updateModelValue()
     },
 
@@ -304,10 +310,12 @@ export default {
     },
 
     destroy (index, row) {
-      this.useRemoveOnDestroy
+      !row[this.identifierItemKey] && this.useRemoveOnDestroy
         ? this.nested.splice(index, 1)
         : this.nested.splice(index, 1, { [this.destroyKey]: true, ...row })
 
+      this.$qas.logger.group('QasNestedFields - destroy', [{ index, row }])
+
       return this.updateModelValue()
     },
 
@@ -333,7 +341,7 @@ export default {
       })
     },
 
-    setRowLabel (rowKey) {
+    getRowLabel (rowKey) {
       if (this.rowLabel) {
         return this.useIndexLabel ? `${this.rowLabel} ${rowKey + 1}` : this.rowLabel
       }

package/src/components/nested-fields/QasNestedFields.yml

@@ -9,15 +9,15 @@ props:
     default: Inserir novo campo
     type: Boolean
 
-  btn-destroy-props:
+  button-destroy-props:
     desc: Props do botão de excluir linha contendo os campos.
     default: "{ label: 'Remover', o_cancel, flat: true, dense: true }"
     debugger: true
     type: Object
 
-  btn-duplicate-props:
+  button-duplicate-props:
     desc: Props do botão de duplicar linha contendo os campos.
-    default: "{ label: 'Duplicar', o_content_copy, flat: true, dense: true, hideMobileLabel: true }"
+    default: "{ label: 'Duplicar', o_content_copy, flat: true, dense: true, useLabelOnSmallScreen: false }"
     debugger: true
     type: Object
 
@@ -26,13 +26,6 @@ props:
     default: destroyed
     type: String
 
-  model-value:
-    desc: Model do componente
-    default: []
-    type: Array
-    examples: [v-model="value"]
-    model: true
-
   errors:
     desc: Propriedade de erros para mostrar nos campos gerados.
     default: {}
@@ -63,6 +56,19 @@ props:
     type: String
     examples: [xs, sm, md, lg, xl]
 
+  identifier-item-key:
+    desc: Define um identificador para o item. O identificador será utilizado para validar exclusão do item, por exemplo.
+    default: uuid
+    type: String
+    examples: [id, uuid, slug]
+
+  model-value:
+    desc: Model do componente
+    default: []
+    type: Array
+    examples: [v-model="value"]
+    model: true
+
   row-label:
     desc: Rótulo entre cada linha (row).
     type: String
@@ -105,8 +111,16 @@ props:
     type: Boolean
 
 slots:
-  fields:
-    desc: Substitui o "QasFormGenerator".
+  add-input:
+    desc: Slot para acessar campo de adicionar.
+    scope:
+      'add -> function(row)':
+        desc: Função para adicionar novos campos no model.
+        type: Function
+        examples: ["add({ name: 'novo valor' })"]
+
+  custom-fields:
+    desc: Slot para adicionar um campo customizado.
     scope:
       fields:
         desc: Campos atuais.
@@ -126,9 +140,14 @@ slots:
         type: Function
         examples: ["updateValue({ name: 'novo valor' }, 2)"]
 
-  'field-[nome-da-chave]':
-    desc: Repassa todos os slots e escopos do "QasFormGenerator".
+  fields:
+    desc: Substitui o "QasFormGenerator".
     scope:
+      fields:
+        desc: Campos atuais.
+        default: {}
+        type: Object
+
       index:
         desc: Index atual dos campos
         type: Number
@@ -142,14 +161,9 @@ slots:
         type: Function
         examples: ["updateValue({ name: 'novo valor' }, 2)"]
 
-  custom-fields:
-    desc: Slot para adicionar um campo customizado.
+  'field-[nome-da-chave]':
+    desc: Repassa todos os slots e escopos do "QasFormGenerator".
     scope:
-      fields:
-        desc: Campos atuais.
-        default: {}
-        type: Object
-
       index:
         desc: Index atual dos campos
         type: Number
@@ -163,13 +177,6 @@ slots:
         type: Function
         examples: ["updateValue({ name: 'novo valor' }, 2)"]
 
-  add-input:
-    desc: Slot para acessar campo de adicionar.
-    scope:
-      'add -> function(row)':
-        desc: Função para adicionar novos campos no model.
-        type: Function
-        examples: ["add({ name: 'novo valor' })"]
 
 events:
   '@update:model-value -> function (value)':

package/src/components/numeric-input/QasNumericInput.vue

@@ -1,7 +1,7 @@
 <template>
-  <q-field v-model="model" outlined>
-    <template #control="{ emitValue, floatingLabel, id, value }">
-      <input v-show="floatingLabel" :id="id" ref="input" class="q-field__input" :model-value="value" @input="emitValue($event.target.value)">
+  <q-field :model-value="modelValue" outlined>
+    <template #control="{ floatingLabel, id }">
+      <input v-show="floatingLabel" :id="id" ref="input" class="q-field__input" @blur="emitValue" @click="setSelect" @input="emitUpdateModel($event.target.value)">
     </template>
   </q-field>
 </template>
@@ -20,17 +20,7 @@ export default {
   name: 'QasNumericInput',
 
   props: {
-    allowNegative: {
-      default: true,
-      type: Boolean
-    },
-
-    allowPositive: {
-      default: true,
-      type: Boolean
-    },
-
-    autonumericProps: {
+    autonumericOptions: {
       default: () => ({}),
       type: Object
     },
@@ -62,10 +52,23 @@ export default {
     preset: {
       default: false,
       type: [Boolean, String]
+    },
+
+    useNegative: {
+      default: true,
+      type: Boolean
+    },
+
+    usePositive: {
+      default: true,
+      type: Boolean
     }
   },
 
-  emits: ['update:modelValue'],
+  emits: [
+    'update:modelValue',
+    'update-model'
+  ],
 
   data () {
     return {
@@ -76,15 +79,13 @@ export default {
   computed: {
     defaultMode () {
       return defaultModes[this.mode]
-    },
-
-    model: {
-      get () {
-        return this.modelValue
-      },
+    }
+  },
 
-      set () {
-        this.$emit('update:modelValue', this.autoNumeric.getNumber())
+  watch: {
+    modelValue (value) {
+      if (this.autoNumeric) {
+        this.autoNumeric.set(value)
       }
     }
   },
@@ -104,11 +105,11 @@ export default {
       Object.assign(options, autoNumericPredefinedOptions[value])
     }
 
-    if (!this.allowNegative) {
+    if (!this.useNegative) {
       options.minimumValue = 0
     }
 
-    if (!this.allowPositive) {
+    if (!this.usePositive) {
       options.maximumValue = 0
     }
 
@@ -116,16 +117,33 @@ export default {
       options.decimalPlaces = this.decimalPlaces
     }
 
-    Object.assign(options, this.autonumericProps)
+    Object.assign(options, this.autonumericOptions)
 
     this.$nextTick(() => {
-      this.$refs.input.value = this.modelValue
       this.autoNumeric = new AutoNumeric(this.$refs.input, options)
+      this.autoNumeric.set(this.modelValue)
     })
   },
 
   beforeUnmount () {
     this.autoNumeric.remove()
+  },
+
+  methods: {
+    setSelect () {
+      this.$refs?.input?.select()
+    },
+
+    emitValue () {
+      this.$emit('update:modelValue', this.autoNumeric.getNumber())
+    },
+
+    emitUpdateModel (value) {
+      this.$emit('update-model', {
+        value,
+        raw: this.autoNumeric.getNumber()
+      })
+    }
   }
 }
 </script>

package/src/components/numeric-input/QasNumericInput.yml

@@ -7,16 +7,6 @@ meta:
   desc: Componente de input para decimal, inteiro, dinheiro e porcentagem.
 
 props:
-  allow-negative:
-    desc: Controla se pode ou não números negativos.
-    default: true
-    type: Boolean
-
-  allow-positive:
-    desc: Controla se pode ou não números positivos.
-    default: true
-    type: Boolean
-
   autonumeric-props:
     desc: Opções do autonumeric (http://autonumeric.org/guide).
     default: {}
@@ -43,9 +33,33 @@ props:
     desc: Propriedade preset serve para usar configuração de predefinição/nacionalidade da moeda pré setada pelo autonumeric (Brasil é o padrão).
     type: [Boolean, String]
 
+  use-negative:
+    desc: Controla se pode ou não números negativos.
+    default: true
+    type: Boolean
+
+  use-positive:
+    desc: Controla se pode ou não números positivos.
+    default: true
+    type: Boolean
+
 events:
   '@update:model-value -> function (value)':
-    desc: Dispara toda vez que o model é atualizado, também utilizado para v-model.
+    desc: Dispara toda vez que o model é atualizado (após o blur do input), também utilizado para v-model.
     params:
       value:
-        desc: Novo valor do v-model
+        desc: Novo valor do v-model.
+
+  '@update-model -> function (payload)':
+    desc: Dispara toda vez que o model é atualizado, diferente do "update:model-value", é disparado sempre que acontece um novo input. Também utilizado para v-model.
+    params:
+      payload:
+        type: Object
+        desc: Objeto contendo informações atualizadas.
+        params:
+          value:
+            type: String,
+            desc: Valor formato.
+          raw:
+            type: Number
+            desc: Valor sem formatação.

package/src/components/page-header/QasPageHeader.vue

@@ -17,23 +17,27 @@
 <script>
 import { castArray } from 'lodash-es'
 import { useHistory } from '../../composables'
+import { createMetaMixin } from 'quasar'
 
 const { hasPreviousRoute, history, getPreviousRoute } = useHistory()
 
 export default {
   name: 'QasPageHeader',
 
+  mixins: [
+    createMetaMixin(function () {
+      return {
+        title: this.title
+      }
+    })
+  ],
+
   props: {
     breadcrumbs: {
       default: '',
       type: [Array, String]
     },
 
-    useBreadcrumbs: {
-      default: true,
-      type: Boolean
-    },
-
     root: {
       default: '',
       type: [Object, String]
@@ -42,6 +46,11 @@ export default {
     title: {
       default: '',
       type: String
+    },
+
+    useBreadcrumbs: {
+      default: true,
+      type: Boolean
     }
   },
 
@@ -85,12 +94,6 @@ export default {
 
       return lastIndex === index ? 'text-grey-7' : 'text-primary'
     }
-  },
-
-  meta () {
-    return {
-      title: this.title
-    }
   }
 }
 </script>

package/src/components/page-header/QasPageHeader.yml

@@ -11,10 +11,6 @@ props:
     desc: Configurações do QBreadcrumbs (https://quasar.dev/vue-components/breadcrumbs#introduction).
     type: [Array, String]
 
-  use-breadcrumbs:
-    desc: Habilita ou não o breadcrumbs.
-    type: [Array, String]
-
   title:
     desc: Título do cabeçalho.
     type: String
@@ -22,3 +18,7 @@ props:
   root:
     desc: Rota raiz do breadcrumbs.
     type: [Object, String]
+
+  use-breadcrumbs:
+    desc: Habilita ou não o breadcrumbs.
+    type: [Array, String]