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

package/src/components/grid-generator/QasGridGenerator.yml

@@ -4,70 +4,71 @@ meta:
   desc: Componente para criação de textos dinâmicos.
 
 props:
+  columns:
+    desc: Colunas do grid de cada campo.
+    default: col-6
+    type: [Array, String, Object]
+    examples: ["{ name: { sm: 6, md: 12 } }", "[{ sm: 6, md: 12 }]"]
+
   content-class:
     desc: Classe de cada "div" pai referente ao resultado.
     default: ''
     type: [Array, Object, String]
 
-  header-class:
-    desc: Classe de cada "header" pai referente ao "label".
-    default: 'text-bold'
-    type: [Array, Object, String]
-
-  hide-empty-result:
-    desc: Se o resultado de algum campo for vazio, ele remove todo o campo.
-    type: Boolean
-
   empty-result-text:
     desc: Se o resultado de algum campo for vazio, esta prop define qual será o valor padrão.
     default: '-'
     type: String
 
-  result:
-    desc: Resultado contendo todas informações para serem exibidas na tela.
-    default: {}
-    type: Object
-    examples: ["{ 'joah@examples.com' }"]
-
   fields:
     desc: Lista de field contendo informações necessárias para a criação do campo correspondente.
     default: {}
     type: Object
     examples: ["{ email: { name: 'email', type: 'email', label: 'E-mail' } }"]
 
-  columns:
-    desc: Colunas do grid de cada campo.
-    default: col-6
-    type: [Array, String, Object]
-    examples: ["{ name: { sm: 6, md: 12 } }", "[{ sm: 6, md: 12 }]"]
-
   gutter:
     desc: Espaçamento entre colunas.
     default: md
     type: String
     examples: [xs, sm, md, lg, xl]
 
+  header-class:
+    desc: Classe de cada "header" pai referente ao "label".
+    default: 'text-bold'
+    type: [Array, Object, String]
+
+  hide-empty-result:
+    desc: Se o resultado de algum campo for vazio, ele remove todo o campo.
+    type: Boolean
+
+  result:
+    desc: Resultado contendo todas informações para serem exibidas na tela.
+    default: {}
+    type: Object
+    examples: ["{ 'joah@examples.com' }"]
+
 slots:
-  'field-[nome-da-chave]':
-    desc: Slot para todo o conteúdo dentro de cada grid (header e content).
+  content:
+    desc: Slot para o conteúdo (content).
     scope:
       field:
         desc: Conteúdo do field atual mais o resultado formatado.
         default: {}
         type: Object
 
-  header:
-    desc: Slot para o header.
+  'field-[nome-da-chave]':
+    desc: Slot para todo o conteúdo dentro de cada grid (header e content).
     scope:
       field:
         desc: Conteúdo do field atual mais o resultado formatado.
         default: {}
         type: Object
 
-  content:
-    desc: Slot para o conteúdo (content).
+  header:
+    desc: Slot para o header.
     scope:
       field:
         desc: Conteúdo do field atual mais o resultado formatado.
         default: {}
         type: Object
+

package/src/components/input/QasInput.yml

@@ -7,34 +7,34 @@ meta:
   desc: Componente para input que implementa o "QInput" repassando propriedades, slots e eventos.
 
 props:
+  error-message:
+    desc: Controla mensagem de erro (apenas quando "error" for "true").
+    type: String
+
+  error:
+    desc: Controla cor da borda do input.
+    type: Boolean
+
   model-value:
     desc: Model do componente.
     type: [String, Input]
     examples: [v-model="value"]
     model: true
 
-  unmasked-value:
-    desc: Remove a mascara do v-model.
-    default: true
-    type: Boolean
-
   outlined:
     desc: Controla borda do input.
     default: true
     type: Boolean
 
-  error:
-    desc: Controla cor da borda do input.
-    type: Boolean
-
-  error-message:
-    desc: Controla mensagem de erro (apenas quando "error" for "true").
-    type: String
-
   remove-error-on-type:
     desc: Limpa os erros do campo caso os mesmos existam toda vez que o model atualiza.
     type: Boolean
 
+  unmasked-value:
+    desc: Remove a mascara do v-model.
+    default: true
+    type: Boolean
+
 events:
   '@update:model-value -> function (value)':
     desc: Dispara toda vez que o model é atualizado, também utilizado para v-model.

package/src/components/list-items/QasListItems.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="qas-list-items shadow-primary">
+  <div class="qas-list-items shadow-14">
     <q-list bordered class="rounded-borders" separator>
       <q-item v-for="(item, index) in list" :key="index" v-ripple :clickable="!redirectOnIcon" :to="redirect(item)">
         <slot :index="index" :item="item" name="item">

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

@@ -17,8 +17,8 @@
         <div v-else-if="!mx_isFetching">
           <slot name="empty-results">
             <div 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>
           </slot>
         </div>
@@ -121,6 +121,7 @@ export default {
       handler (value) {
         this.$emit('update:results', extend([], true, value))
       },
+      deep: true,
       immediate: true
     }
   },
@@ -139,10 +140,16 @@ export default {
     async fetchList (filters = {}) {
       this.mx_isFetching = true
 
+      const hasFilters = !!Object.keys(filters).length
+
       try {
         const response = await this.$store.dispatch(
           `${this.entity}/fetchList`,
-          { ...this.mx_context, url: this.url, filters }
+          {
+            ...this.mx_context,
+            url: this.url,
+            ...(hasFilters && { filters })
+          }
         )
 
         const { errors, fields, metadata } = response.data

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

@@ -4,25 +4,31 @@ meta:
   desc: Componente para C.R.U.D. responsável pela parte de listagem (Read).
 
 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
-
   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".
+  disable-refresh:
+    desc: Desabilita o [pull-to-refresh](https://quasar.dev/vue-components/pull-to-refresh#basic).
+    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
     type: String
 
-  results:
+  errors:
     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 errors, utilizado para recuperar os errors fora do template.
+    default: {}
+    type: Object
+    examples: [v-model:errors="errors"]
+
+  fetching:
+    model: true
+    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 +37,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,43 +49,53 @@ 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"]
 
-  disable-refresh:
-    desc: Desabilita o [pull-to-refresh](https://quasar.dev/vue-components/pull-to-refresh#basic).
-    type: Boolean
+  url:
+    desc: Envia como parâmetro para a action "fetchList" do modulo correspondente a "entity".
+    type: String
 
   use-filter:
     desc: Controla se o componente vai usar ou não o componente "QasFilters".
     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.'
-
-  filter:
-    desc: 'Slot para acessar o filtro.'
-
   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 +130,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/nested-fields/QasNestedFields.yml

@@ -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,13 @@ props:
     type: String
     examples: [xs, sm, md, lg, xl]
 
+  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 +105,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 +134,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 +155,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 +171,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>
@@ -65,7 +65,10 @@ export default {
     }
   },
 
-  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)
       }
     }
   },
@@ -119,13 +120,30 @@ export default {
     Object.assign(options, this.autonumericProps)
 
     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

@@ -45,7 +45,21 @@ props:
 
 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.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]

package/src/components/password-input/QasPasswordInput.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <qas-input v-model="model" bottom-slots v-bind="$attrs" remove-error-on-type :type="type">
+    <qas-input v-model="model" :bottom-slots="false" color="negative" v-bind="$attrs" remove-error-on-type :type="type">
       <template #append>
         <q-icon class="cursor-pointer" :color="iconColor" :name="icon" @click="toggle" />
       </template>

package/src/components/password-input/QasPasswordInput.yml

@@ -7,22 +7,11 @@ mixins:
   - '@bildvitta/quasar-ui-asteroid/dist/api/QasInput.json'
   - quasar/dist/api/QInput.json
 props:
-  use-strength-checker:
-    desc: Controla exibição do componente `QasStrenghtChecker`.
-    default: true
-    type: Boolean
-
   icon-color:
     desc: Cor do ícone do input.
     default: primary
     type: String
 
-  model-value:
-    desc: Model do componente.
-    type: String
-    examples: [v-model="value"]
-    model: true
-
   levels:
     desc: Níveis de força da senha, é um objeto de objeto.
     type: [Object, Boolean]
@@ -59,6 +48,12 @@ props:
         progress: 1
         textClass: text-positive
 
+  model-value:
+    desc: Model do componente.
+    type: String
+    examples: [v-model="value"]
+    model: true
+
   minlength:
     desc: Número mínimo de caracteres.
     default: 8
@@ -74,6 +69,11 @@ props:
     default: blue-grey-1
     type: String
 
+  use-strength-checker:
+    desc: Controla exibição do componente `QasStrenghtChecker`.
+    default: true
+    type: Boolean
+
   use-lowercase:
     desc: Obrigatório uso de letra(s) minuscula.
     default: true

package/src/components/password-strength-checker/QasPasswordStrengthChecker.yml

@@ -4,16 +4,6 @@ meta:
   desc: Componente para checar nível de força da senha.
 
 props:
-  model-value:
-    desc: Model do componente, retorna se passou ou não na validação de senha.
-    type: Boolean
-    examples: [v-model="value"]
-    model: true
-
-  password:
-    desc: Senha para ser usado nas validações.
-    type: String
-
   levels:
     desc: Níveis de força da senha, é um objeto de objeto.
     type: [Object, Boolean]
@@ -50,6 +40,16 @@ props:
         progress: 1
         textClass: text-positive
 
+  password:
+    desc: Senha para ser usado nas validações.
+    type: String
+
+  model-value:
+    desc: Model do componente, retorna se passou ou não na validação de senha.
+    type: Boolean
+    examples: [v-model="value"]
+    model: true
+
   minlength:
     desc: Número mínimo de caracteres.
     default: 8

package/src/components/profile/QasProfile.yml

@@ -34,16 +34,16 @@ props:
     desc: Subtitulo do cabeçalho de perfil.
     type: String
 
-  title:
-    desc: Título do cabeçalho de perfil.
-    type: String
-    required: true
-
   tag:
     desc: Tag do componente pai.
     default: qas-box
     type: String
 
+  title:
+    desc: Título do cabeçalho de perfil.
+    type: String
+    required: true
+
 slots:
   default:
     desc: Slot para acessar seção de título e subtitulo.

package/src/components/resizer/QasResizer.vue

@@ -1,5 +1,5 @@
 <template>
-  <q-img :ratio="ratio" spinner-color="grey-6" :src="imageSource">
+  <q-img :ratio="ratio" spinner-color="grey-7" :src="imageSource">
     <template #error>
       <div class="absolute-full bg-grey-2 flex flex-center text-grey">⚠︎</div>
     </template>