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

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

@@ -7,6 +7,12 @@ meta:
   desc: Componente para exibir imagem redimensionadas, implementa o "QImg".
 
 props:
+  resize:
+    desc: Formato de ajuste.
+    default: cover
+    type: String
+    examples: [cover, contain, fill, inside, outside]
+
   size:
     desc: Tamanho da imagem.
     type: String
@@ -16,8 +22,3 @@ props:
     type: String
     examples: [bild-vitta.png]
 
-  resize:
-    desc: Formato de ajuste.
-    default: cover
-    type: String
-    examples: [cover, contain, fill, inside, outside]

package/src/components/search-box/QasSearchBox.yml

@@ -37,11 +37,6 @@ props:
     default: Pesquisar
     type: String
 
-  use-empty-slot:
-    desc: Controla o slot "empty-result".
-    default: true
-    type: Boolean
-
   results:
     desc: Model que retorna o resultado filtrado.
     default: []
@@ -49,6 +44,11 @@ props:
     examples: [v-model:results="results"]
     model: true
 
+  use-empty-slot:
+    desc: Controla o slot "empty-result".
+    default: true
+    type: Boolean
+
 slots:
   default:
     desc: Acesso ao conteúdo principal, só existe caso a busca retorne algum resultado.

package/src/components/select/QasSelect.yml

@@ -7,13 +7,6 @@ meta:
   desc: Componente para select que implementa o "QSelect" repassando propriedades, slots e eventos.
 
 props:
-  model-value:
-    desc: Model do componente.
-    default: []
-    type: [Array, Object, String, Number]
-    examples: [v-model="value"]
-    model: true
-
   fuse-options:
     desc: Opções do Fuse.js (https://fusejs.io/api/options.html).
     type: Object
@@ -34,6 +27,13 @@ props:
     type: String
     examples: [label-key="name"]
 
+  model-value:
+    desc: Model do componente.
+    default: []
+    type: [Array, Object, String, Number]
+    examples: [v-model="value"]
+    model: true
+
   no-option-label:
     desc: Rótulo padrão de quando os options estão vazios.
     default: Nenhum resultado foi encontrado.

package/src/components/select-list/QasSelectList.yml

@@ -28,9 +28,9 @@ props:
     examples: [v-model="value"]
     model: true
 
-  to:
-    desc: 'Configuração do vue-router para enviar no $route.push({ ...to, params: {...} }).'
-    default: Pesquisar
+  param-key:
+    desc: Controla qual parâmetro será enviado para rota.
+    default: id
     type: String
 
   redirect-key:
@@ -38,9 +38,9 @@ props:
     default: uuid
     type: String
 
-  param-key:
-    desc: Controla qual parâmetro será enviado para rota.
-    default: id
+  to:
+    desc: 'Configuração do vue-router para enviar no $route.push({ ...to, params: {...} }).'
+    default: Pesquisar
     type: String
 
 slots:

package/src/components/signature-uploader/QasSignatureUploader.yml

@@ -9,8 +9,13 @@ props:
     type: Object
     default: { maxWidth: '620px' }
 
-  upload-label:
-    desc: Rótulo do uploader.
+  model-value:
+    desc: Model do componente, retorna url da imagem upada, usando para v-model.
+    type: String
+
+  readonly:
+    desc: Controla se o componente vai ser apenas para visualização ou pode também fazer upload.
+    default: image/png
     type: String
 
   signature-label:
@@ -18,18 +23,13 @@ props:
     default: {}
     type: Object
 
-  model-value:
-    desc: Model do componente, retorna url da imagem upada, usando para v-model.
-    type: String
-
   type:
     desc: Tipo da imagem gerada.
     default: image/png
     type: String
 
-  readonly:
-    desc: Controla se o componente vai ser apenas para visualização ou pode também fazer upload.
-    default: image/png
+  upload-label:
+    desc: Rótulo do uploader.
     type: String
 
 events: