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

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-pad/QasSignaturePad.vue

@@ -116,7 +116,7 @@ export default {
 <style lang="scss">
 .qas-signature-pad {
   &__canvas {
-    border: 1px solid $grey-3;
+    border: 1px solid $separator-color;
   }
 }
 </style>

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:

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

@@ -9,8 +9,8 @@
     </template>
 
     <div v-else-if="!mx_isFetching" 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>
 
     <footer v-if="mx_hasFooterSlot">

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

@@ -4,11 +4,6 @@ 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
-
   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
@@ -18,15 +13,17 @@ props:
     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 +32,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 +45,41 @@ 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.
-    type: Boolean
-    examples: [v-model:fetching="isFetching"]
+    desc: Model de result, utilizado para recuperar o resultado retornado pelo componente.
+    type: Object
+    examples: [v-model:result="result"]
 
-slots:
-  header:
-    desc: 'Slot para acessar o header.'
+  url:
+    desc: Envia como parâmetro para a action "fetchSingle" do modulo correspondente a "entity".
+    type: String
 
+slots:
   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 +114,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.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/transfer/QasTransfer.vue

@@ -144,6 +144,7 @@ export default {
     options: {
       handler (value) {
         this.optionsList = extend(true, [], value)
+        this.setSelectedFromValue(true)
       },
 
       immediate: true
@@ -209,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

@@ -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.image" rounded :text-color="getColorFileIcon(file)" />
 
               <div class="col items-center no-wrap row">
                 <div class="column no-wrap" :class="{ col: isMultiple }">
@@ -328,7 +328,7 @@ export default {
     },
 
     getFileNameClass (isFailed) {
-      return isFailed ? 'text-negative' : 'text-grey-8'
+      return isFailed ? 'text-negative' : 'text-grey-9'
     },
 
     isFailed (file) {

package/src/components/uploader/QasUploader.yml

@@ -39,6 +39,13 @@ props:
     default: undefined
     type: Number
 
+  model-value:
+    desc: Model do componente, caso seja múltiplo, retorna um array de string, senão somente uma string.
+    default: true
+    type: [Array, String]
+    examples: [v-model="value"]
+    model: true
+
   pica-resize-options:
     desc: Opções para a biblioteca "pica" que é responsável por fazer o redimensionamento antes do upload (https://github.com/nodeca/pica).
     type: Object
@@ -48,6 +55,11 @@ props:
       unsharpRadius: 0.6
       unsharpThreshold: 1
 
+  readonly:
+    desc: O componente não faz mais upload, apenas exibe.
+    default: true
+    type: Number
+
   size-limit:
     desc: Se o tamanho da imagem for menor ou igual ao passado nesta prop, não será feito um redimensionamento.
     default: 1280
@@ -58,18 +70,6 @@ props:
     default: true
     type: Number
 
-  readonly:
-    desc: O componente não faz mais upload, apenas exibe.
-    default: true
-    type: Number
-
-  model-value:
-    desc: Model do componente, caso seja múltiplo, retorna um array de string, senão somente uma string.
-    default: true
-    type: [Array, String]
-    examples: [v-model="value"]
-    model: true
-
   uploading:
     desc: Model que retorna se o componente está fazendo algum upload.
     type: Boolean

package/src/composables/index.js

@@ -1 +1 @@
-export { default as useHistory } from './useHistory.js'
+export { default as useHistory } from './use-history.js'

package/src/css/utils/index.scss

@@ -5,6 +5,5 @@
 @import './fonts';
 @import './line-height';
 @import './opacity';
-@import './shadow';
 @import './text';
 @import './unset';

package/src/css/variables/index.scss

@@ -1,2 +1,3 @@
 @import './button';
+@import './shadow';
 @import './typography';

package/src/css/variables/shadow.scss

@@ -0,0 +1,33 @@
+$shadow-color: $accent;
+
+$elevation-umbra: $shadow-color;
+$elevation-penumbra: $shadow-color;
+$elevation-ambient: $shadow-color;
+
+// Embossed
+$shadow-2: (
+  0 1px 5px $elevation-umbra,
+  0 2px 2px $elevation-penumbra,
+  0 3px 1px -2px $elevation-ambient
+);
+
+// Shallow
+$shadow-6: (
+  0 3px 5px -1px $elevation-umbra,
+  0 6px 10px $elevation-penumbra,
+  0 1px 18px $elevation-ambient
+);
+
+// Overhead
+$shadow-14: (
+  0 7px 9px -4px $elevation-umbra,
+  0 14px 21px 2px $elevation-penumbra,
+  0 5px 26px 4px $elevation-ambient
+);
+
+// levite
+$shadow-20: (
+  0 10px 13px -6px $elevation-umbra,
+  0 20px 31px 3px $elevation-penumbra,
+  0 8px 38px 7px $elevation-ambient
+);

package/src/css/variables/typography.scss

@@ -127,7 +127,7 @@ $h-tags: (
   h6: map.get($headings, 'h6')
 );
 
-// sobrescreve as tags do css para adicionar "margin"
+// sobrescreve as tags do html para adicionar "margin"
 @each $heading, $value in $h-tags {
   #{$heading} {
     font-size: map.get($value, 'size');

package/src/index.scss

@@ -5,6 +5,7 @@ $primary: var(--q-primary);
 $primary-contrast: var(--q-primary-contrast);
 $secondary: var(--q-secondary);
 $secondary-contrast: var(--q-secondary-contrast);
+$accent: var(--q-accent);
 
 // Asteroid variables
 :root {

package/src/pages/ErrorComponent.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="column error-component items-center justify-around q-px-xl">
+    <div class="column full-width items-center justify-center q-gutter-md q-py-md row">
+      <q-img src="../assets/gear.svg" :width="gearSize" />
+      <div class="text-bold text-h1 text-primary">{{ code }}</div>
+      <div class="text-bold text-center text-grey-9 text-h6">{{ title }}</div>
+      <div v-if="subtitle" class="text-bold text-center text-grey-9 text-subtitle2">{{ subtitle }}</div>
+      <qas-btn v-if="hasButtonProps" class="text-bold text-primary" v-bind="buttonProps" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ErrorComponent',
+
+  props: {
+    buttonProps: {
+      type: Object,
+      default: () => ({})
+    },
+
+    code: {
+      type: String,
+      required: true
+    },
+
+    subtitle: {
+      type: String,
+      default: ''
+    },
+
+    title: {
+      type: String,
+      required: true
+    }
+  },
+
+  computed: {
+    gearSize () {
+      return this.$qas.screen.isSmall ? '90px' : '160px'
+    },
+
+    hasButtonProps () {
+      return !!Object.keys(this.buttonProps).length
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.error-component {
+  background-color: var(--qas-background-color);
+  min-height: 100vh;
+}
+</style>

package/src/pages/Forbidden.vue

@@ -1,12 +1,26 @@
 <template>
-  <div class="fixed-center text-center">
-    <p class="q-my-lg text-faded">Ops, você não tem permissão para acessar esta página <strong>(403).</strong></p>
-    <q-btn color="primary" flat @click="$router.push('/')">Voltar</q-btn>
-  </div>
+  <error-component v-bind="errorProps" />
 </template>
 
 <script>
+import ErrorComponent from './ErrorComponent'
+
 export default {
-  name: 'Forbidden'
+  components: {
+    ErrorComponent
+  },
+
+  computed: {
+    errorProps () {
+      return {
+        code: '403',
+        title: 'Ops, parece que você não tem acesso para este recurso!',
+        buttonProps: {
+          to: { path: '/' },
+          label: 'Voltar ao início'
+        }
+      }
+    }
+  }
 }
 </script>