@bildvitta/quasar-ui-asteroid 3.6.0-beta.0 → 3.6.0-beta.2

package/src/css/plugins/notify.scss

@@ -2,6 +2,27 @@
   margin-top: 80px;
   max-width: 560px;
 
+  &.qas-notification {
+    &--error::before,
+    &--success::before {
+      border-radius: var(--qas-generic-border-radius) 0 0 var(--qas-generic-border-radius);
+      bottom: 0;
+      content: '';
+      left: calc(var(--qas-spacing-md) * -1);
+      position: relative;
+      top: 0;
+      width: 4px;
+    }
+
+    &--error::before {
+      background-color: var(--q-negative);
+    }
+
+    &--success::before {
+      background-color: var(--q-positive);
+    }
+  }
+
   &__content {
     .q-icon {
       margin-right: var(--qas-spacing-sm);

package/src/css/variables/button.scss

@@ -1,3 +1,4 @@
 $button-font-size: 1rem;
-$button-line-height: 1.5rem;
+$button-line-height: 16px;
 $button-font-weight: 600;
+$button-border-radius: 32px;

package/src/css/variables/spacing.scss

@@ -1,11 +1,8 @@
 @use 'sass:map';
 
-/*
-* O único valor que de fato é alterado diferente do padrão do Quasar é o tamanho "lg"
-*/
 $space-base   : 16px;
-$space-x-base : $space-base;
-$space-y-base : $space-base;
+$space-x-base : $space-base; // 16px
+$space-y-base : $space-base; // 16px
 
 $space-none : (
   x: 0,
@@ -13,38 +10,50 @@ $space-none : (
 );
 
 $space-xs: (
-  x: ($space-x-base * 0.25),
-  y: ($space-y-base * 0.25)
+  x: ($space-x-base * 0.25), // 4px
+  y: ($space-y-base * 0.25) // 4px
 );
 
 $space-sm: (
-  x: ($space-x-base * 0.5),
-  y: ($space-y-base * 0.5)
+  x: ($space-x-base * 0.5), // 8px
+  y: ($space-y-base * 0.5) // 8px
 );
 
 $space-md: (
-  x: $space-x-base,
-  y: $space-y-base
+  x: $space-x-base, // 16px
+  y: $space-y-base // 16px
 );
 
 $space-lg: (
-  x: ($space-x-base * 1.5),
-  y: ($space-y-base * 1.5)
+  x: ($space-x-base * 1.5), // 24px
+  y: ($space-y-base * 1.5) // 24px
 );
 
 // O tamanho original seria "16px * 3" ou "48px", alterado para ter "32px"
 $space-xl: (
-  x: ($space-x-base * 2),
-  y: ($space-y-base * 2)
+  x: ($space-x-base * 2), // 32px
+  y: ($space-y-base * 2) // 32px
+);
+
+$space-2xl: (
+  x: ($space-x-base * 2.5), // 40px
+  y: ($space-y-base * 2.5) // 40px
+);
+
+$space-3xl: (
+  x: ($space-x-base * 3), // 48px
+  y: ($space-y-base * 3) // 48px
 );
 
 $spaces: (
-  none: $space-none,
-  xs: $space-xs,
-  sm: $space-sm,
-  md: $space-md,
-  lg: $space-lg,
-  xl: $space-xl
+  none: $space-none, // 0px
+  xs: $space-xs, // 4px
+  sm: $space-sm, // 8px
+  md: $space-md, // 16px
+  lg: $space-lg, // 24px
+  xl: $space-xl, // 32px
+  2xl: $space-2xl, // 40px
+  3xl: $space-3xl // 48px
 );
 
 $flex-gutter-xs : map.get($space-xs, 'x');
@@ -52,14 +61,18 @@ $flex-gutter-sm : map.get($space-sm, 'x');
 $flex-gutter-md : map.get($space-md, 'x');
 $flex-gutter-lg : map.get($space-lg, 'x');
 $flex-gutter-xl : map.get($space-xl, 'x');
+$flex-gutter-2xl : map.get($space-2xl, 'x');
+$flex-gutter-3xl : map.get($space-3xl, 'x');
 
 $flex-gutter: (
-  none: 0,
-  xs: $flex-gutter-xs,
-  sm: $flex-gutter-sm,
-  md: $flex-gutter-md,
-  lg: $flex-gutter-lg,
-  xl: $flex-gutter-xl
+  none: 0, // 0px
+  xs: $flex-gutter-xs, // 4px
+  sm: $flex-gutter-sm, // 8px
+  md: $flex-gutter-md, // 16px
+  lg: $flex-gutter-lg, // 24px
+  xl: $flex-gutter-xl, // 32px
+  2xl: $flex-gutter-2xl, // 48px
+  3xl: $flex-gutter-3xl // 40px
 );
 
 :root {

package/src/mixins/view.js

@@ -96,7 +96,7 @@ export default {
 
       const redirect = status >= 500
         ? 'ServerError'
-        : ({ 401: 'Unauthorized', 403: 'Forbidden', 404: 'NotFound' })[status]
+        : ({ 403: 'Forbidden', 404: 'NotFound' })[status]
 
       // caso exista um desses status será redirecionado sem aparecer o "notify"
       if (redirect) {

package/src/pages/ErrorComponent.vue

@@ -1,11 +1,17 @@
 <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 class="container error-component flex">
+    <div class="column full-width items-center justify-center row">
+      <h2 :aria-label="ariaLabelCode" class="q-mb-sm text-grey-9 text-h2" role="heading">
+        {{ code }}
+      </h2>
+
+      <div class="q-mb-2xl text-body1 text-center text-grey-8">
+        <qas-breakline :text="description" />
+      </div>
+
+      <q-img alt="ilustração do código de erro" class="error-component__image" :src="imagePath" />
+
+      <qas-btn v-if="hasButtonProps" class="q-mt-xl" v-bind="buttonProps" color="primary" icon="sym_r_chevron_left" variant="tertiary" />
     </div>
   </div>
 </template>
@@ -25,24 +31,24 @@ export default {
       required: true
     },
 
-    subtitle: {
+    description: {
       type: String,
       default: ''
     },
 
-    title: {
+    imagePath: {
       type: String,
-      required: true
+      default: ''
     }
   },
 
   computed: {
-    gearSize () {
-      return this.$qas.screen.isSmall ? '90px' : '160px'
-    },
-
     hasButtonProps () {
       return !!Object.keys(this.buttonProps).length
+    },
+
+    ariaLabelCode () {
+      return `Código de erro ${this.code}`
     }
   }
 }
@@ -52,5 +58,18 @@ export default {
 .error-component {
   background-color: var(--qas-background-color);
   min-height: 100vh;
+  padding: var(--qas-spacing-3xl) 0;
+
+  &__image {
+    width: 300px;
+  }
+
+  @media (max-width: $breakpoint-xs) {
+    padding: var(--qas-spacing-xl) 0;
+
+    &__image {
+      width: 265px;
+    }
+  }
 }
 </style>

package/src/pages/Forbidden.vue

@@ -16,7 +16,8 @@ export default {
     errorProps () {
       return {
         code: '403',
-        title: 'Ops, parece que você não tem acesso para este recurso!',
+        description: 'Parece que você não tem permissão para acessar esta página. \n Sugerimos que entre em contato com o administrador.',
+        imagePath: require('../assets/big-shoes-walking-the-dog.svg'),
         buttonProps: {
           to: { path: '/' },
           label: 'Voltar ao início'

package/src/pages/NotFound.vue

@@ -16,7 +16,8 @@ export default {
     errorProps () {
       return {
         code: '404',
-        title: 'Ops! Parece que a página que está tentando acessar não existe!',
+        description: 'A página que você está tentando acessar está indisponível ou não existe.',
+        imagePath: require('../assets/big-shoes-hero.svg'),
         buttonProps: {
           to: { path: '/' },
           label: 'Voltar ao início'

package/src/pages/ServerError.vue

@@ -16,8 +16,12 @@ export default {
     errorProps () {
       return {
         code: '500',
-        title: 'Ops, ocorreu um erro interno no nosso servidor!',
-        subtitle: 'Tente novamente em alguns instantes.'
+        description: 'Ops... O sistema está passando por uma instabilidade. \n Já identificamos o problema e estamos trabalhando na solução.',
+        imagePath: require('../assets/big-shoes-sitting-on-rock.svg'),
+        buttonProps: {
+          to: { path: '/' },
+          label: 'Voltar ao início'
+        }
       }
     }
   }

package/src/pages/Unauthorized.vue

@@ -16,10 +16,11 @@ export default {
     errorProps () {
       return {
         code: '401',
-        title: 'Ops! Parece que você está sem acesso ao sistema!',
+        description: 'Ops... Parece que você foi desconectado do sistema. \n Por favor, entre na sua conta novamente.',
+        imagePath: require('../assets/big-shoes-walking-the-dog.svg'),
         buttonProps: {
           to: { path: '/auth/login' },
-          label: 'Fazer login'
+          label: 'Entrar novamente'
         }
       }
     }

package/src/plugins/notify-error/NotifyError.js

@@ -1,11 +1,12 @@
 import { Notify } from 'quasar'
 import notifyConfig from '../../shared/notify-config.js'
 
-Notify.registerType('error', { icon: 'sym_r_cancel', ...notifyConfig })
+Notify.registerType('error', notifyConfig)
 
 export default (message, caption) => {
   Notify.create({
     caption,
+    classes: 'qas-notification--error',
     message,
     type: 'error'
   })

package/src/plugins/notify-success/NotifySuccess.js

@@ -1,11 +1,12 @@
 import { Notify } from 'quasar'
 import notifyConfig from '../../shared/notify-config.js'
 
-Notify.registerType('success', { icon: 'sym_r_check_circle', ...notifyConfig })
+Notify.registerType('success', notifyConfig)
 
 export default (message, caption) => {
   Notify.create({
     caption,
+    classes: 'qas-notification--success',
     message,
     type: 'success'
   })

package/src/vue-plugin.js

@@ -56,7 +56,7 @@ import QasUploader from './components/uploader/QasUploader.vue'
 import QasWelcome from './components/welcome/QasWelcome.vue'
 
 import VueGoogleMaps from '@fawmi/vue-google-maps'
-import { Notify, Quasar, Dialog as QuasarDialog } from 'quasar'
+import { Notify, Loading, Quasar, Dialog as QuasarDialog } from 'quasar'
 
 // Plugins
 import {
@@ -132,7 +132,7 @@ function install (app) {
   app.component('QasUploader', QasUploader)
   app.component('QasWelcome', QasWelcome)
 
-  app.use(Quasar, { plugins: { Notify, QuasarDialog, Dialog } })
+  app.use(Quasar, { plugins: { Notify, Loading, QuasarDialog, Dialog } })
 
   if (process.env.MAPS_API_KEY) {
     app.use(VueGoogleMaps, { load: { key: process.env.MAPS_API_KEY, libraries: 'places' } })

package/src/assets/gear.svg

@@ -1,27 +0,0 @@
-<?xml version='1.0' encoding='utf-8'?>
-<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 100 100">
-  <g>
-    <path id="small" fill="#424242" d="m86.6 10.3v-0.1c-1.5-2-3.3-3.7-5.4-5.3v0.1c-1.7 1.3-3.4 2.7-5 4.1-0.7-0.4-1.3-0.7-1.9-1-0.8-0.4-1.6-0.8-2.5-1-0.3-0.1-0.6-0.2-0.9-0.2-0.2-2.2-0.4-4.4-0.7-6.6-1-0.2-2-0.2-3.1-0.3h-1.6c-1 0.1-1.9 0.1-2.8 0.3-0.3 2.1-0.5 4.3-0.6 6.5-0.4 0-0.7 0.1-1.1 0.2-0.1 0-0.2 0-0.3 0.1-0.8 0.2-1.6 0.6-2.4 1-0.7 0.3-1.3 0.6-1.9 1-1.7-1.4-3.3-2.7-5-4.1l-0.1-0.1c-0.4 0.3-0.8 0.6-1.1 0.9-0.7 0.5-1.3 1.1-1.8 1.7-0.9 0.8-1.6 1.8-2.4 2.8h0.1c1.3 1.7 2.7 3.3 4.1 5-0.4 0.6-0.8 1.3-1.1 1.9-0.4 0.8-0.7 1.7-0.9 2.5-0.2 0.4-0.3 0.8-0.3 1.1-2.2 0.2-4.4 0.4-6.5 0.7-0.2 1-0.3 2-0.3 3.1 0 1.5 0.1 3 0.4 4.4 2.1 0.2 4.2 0.4 6.4 0.6 0 0.4 0.1 0.8 0.3 1.1 0.2 0.9 0.5 1.7 0.9 2.6 0.4 0.7 0.7 1.4 1.2 2-1.4 1.7-2.8 3.3-4.1 5 1.5 2.1 3.3 3.9 5.4 5.4v-0.1c1.6-1.3 3.3-2.7 4.9-4.1h0.1c0.5 0.3 1.1 0.6 1.6 0.9 0.9 0.4 1.9 0.8 2.8 1 0.4 0.1 0.7 0.2 1 0.3 0.2 2.1 0.4 4.3 0.7 6.5 0.9 0.1 1.8 0.2 2.8 0.2h1.5c1.1 0 2.2-0.1 3.3-0.3 0.2-2.1 0.4-4.3 0.6-6.5 0.3-0.1 0.6-0.2 0.9-0.3 0.9-0.2 1.7-0.5 2.5-0.9 0.7-0.3 1.4-0.7 2.1-1.2 0 0.1 0 0.1 0.1 0.1 1.6 1.4 3.3 2.8 5 4.1 0.3-0.2 0.6-0.4 1-0.7 0.6-0.5 1.2-1.1 1.7-1.7 0.9-0.9 1.8-1.9 2.6-3-1.4-1.7-2.8-3.4-4.2-5v-0.1c0.3-0.5 0.6-1.1 0.9-1.7 0.3-0.8 0.7-1.6 0.9-2.4 0-0.1 0-0.2 0.1-0.2 0-0.4 0.1-0.7 0.2-0.9 2.2-0.2 4.4-0.4 6.5-0.6 0.2-1 0.2-2 0.3-3v-1.7c-0.1-1-0.1-2-0.3-3-2.1-0.2-4.3-0.4-6.5-0.6-0.1-0.3-0.2-0.6-0.2-0.9-0.3-0.9-0.6-1.8-1-2.7-0.3-0.6-0.7-1.3-1-1.9 1.3-1.6 2.7-3.3 4.1-5zm-26.7 8.3c1.8-1.9 4-2.8 6.5-2.7 2.6-0.1 4.7 0.8 6.6 2.7 1.8 1.8 2.7 4 2.7 6.5 0 2.6-0.9 4.7-2.7 6.6-1.9 1.8-4 2.7-6.6 2.7-2.5 0-4.7-0.9-6.5-2.7-1.8-1.9-2.7-4-2.7-6.6 0-2.5 0.9-4.7 2.7-6.5z"></path>
-    <path fill="#424242" d="m66.5 17.2c-2.2 0-4 0.8-5.6 2.3-1.5 1.6-2.3 3.4-2.3 5.6s0.8 4 2.3 5.6c1.6 1.6 3.4 2.4 5.6 2.4s4-0.8 5.6-2.4 2.3-3.4 2.3-5.6-0.7-4-2.3-5.6c-1.6-1.5-3.4-2.3-5.6-2.3zm-4.2 3.7c1.2-1.1 2.6-1.7 4.2-1.7s3 0.6 4.2 1.7c1.2 1.2 1.7 2.5 1.7 4.2s-0.5 3.1-1.7 4.2c-1.2 1.2-2.6 1.8-4.2 1.8s-3-0.6-4.2-1.8c-1.1-1.1-1.7-2.5-1.7-4.2 0-1.6 0.6-3 1.7-4.2z"/>
-    <animateTransform
-      attributeName="transform"
-      attributeType="XML"
-      type="rotate"
-      from="360 66 25.1"
-      to="0 66 25.1"
-      dur="6s"
-      repeatCount="indefinite"/>
-  </g>
-  <g>
-    <path id="big" fill="#424242" d="m40.8 33.6c-0.4-0.2-0.7-0.3-1-0.3-1.2-0.3-2.4-0.5-3.6-0.7-1.1 2.7-2 5.3-2.9 7.9h-1.8c-1.2 0.1-2.3 0.2-3.4 0.4-0.9 0.1-1.8 0.4-2.7 0.7-1.6-2.3-3.3-4.6-4.9-6.8l-0.1-0.1c-0.6 0.2-1.2 0.4-1.7 0.7-1 0.4-1.9 0.9-2.8 1.5-1.4 0.7-2.7 1.6-3.9 2.7v0.1c1.2 2.5 2.3 5 3.5 7.5-0.7 0.7-1.3 1.3-1.9 2.1-0.8 0.8-1.5 1.8-2.1 2.8-0.3 0.4-0.5 0.8-0.7 1.3-2.8-0.5-5.6-1-8.4-1.4-0.5 1.2-1 2.4-1.4 3.7-0.4 2-0.8 3.9-1 5.8l7.8 3v1.4c0 1.1 0.1 2.3 0.4 3.5 0.1 1 0.4 2 0.7 3-2.3 1.6-4.5 3.2-6.8 4.9 1.2 3 2.9 5.8 4.9 8.4h0.1c2.5-1.2 5-2.3 7.6-3.5 0.6 0.6 1.2 1.1 1.8 1.7 0.9 0.8 2 1.5 3.2 2.2 0.3 0.2 0.7 0.4 1.1 0.7-0.5 2.7-0.9 5.5-1.3 8.3 1.1 0.5 2.2 0.9 3.4 1.2 0.3 0.1 0.9 0.3 1.9 0.5 1.4 0.4 2.8 0.6 4.1 0.8 1.1-2.7 2.1-5.3 3-8h1.3c1.2 0 2.3-0.1 3.4-0.3 1-0.2 2-0.5 3-0.8 0 0 0 0.1 0.1 0.1 1.6 2.3 3.3 4.6 4.9 6.9 0.5-0.3 1-0.5 1.4-0.7 1-0.4 1.9-0.9 2.8-1.4 1.5-0.9 2.9-1.9 4.2-3-1.1-2.6-2.3-5.1-3.5-7.7 0.6-0.6 1.1-1.2 1.7-1.8 0.7-0.9 1.4-1.9 2-2.8 0-0.1 0.1-0.2 0.1-0.3 0.2-0.3 0.4-0.7 0.6-1 2.8 0.5 5.6 0.9 8.4 1.4 0.5-1.2 0.9-2.4 1.3-3.7 0.1-0.3 0.2-0.6 0.3-1 0.1-0.3 0.1-0.6 0.3-1 0.2-1.3 0.5-2.6 0.6-3.8-2.6-1.1-5.3-2-7.9-3v-1.2c0-1.2-0.1-2.5-0.4-3.7-0.1-0.9-0.4-1.8-0.6-2.7 2.3-1.6 4.6-3.3 6.8-5h0.1c-1.2-3-2.8-5.8-5-8.4-2.6 1.1-5.1 2.3-7.6 3.5-0.7-0.7-1.4-1.4-2.1-2-0.9-0.7-1.8-1.4-2.8-1.9-0.3-0.3-0.7-0.5-1-0.7 0.4-2.8 0.9-5.6 1.3-8.4-1.2-0.5-2.5-1-3.8-1.4-0.3-0.1-0.7-0.2-1-0.2zm-18.6 37.4c-1.7-2.9-2.1-5.9-1.2-9.1 0.8-3.2 2.7-5.6 5.6-7.3 2.8-1.6 5.9-2 9-1.2 3.2 0.9 5.7 2.7 7.3 5.6 1.7 2.9 2.1 5.9 1.2 9.1-0.8 3.2-2.7 5.6-5.5 7.2-3 1.7-6 2.1-9.1 1.2-3.2-0.8-5.7-2.7-7.3-5.5z"></path>
-    <path fill="#424242" d="m22.8 62.4c-0.8 2.7-0.5 5.3 0.9 7.7h0.1c1.4 2.5 3.5 4 6.2 4.8 2.7 0.7 5.3 0.4 7.8-1 2.5-1.5 4-3.5 4.8-6.2v-0.1c0.7-2.7 0.3-5.3-1.1-7.7-1.4-2.5-3.5-4.1-6.2-4.8-2.7-0.8-5.4-0.4-7.8 1-2.5 1.4-4 3.5-4.7 6.3zm6-4c1.9-1.1 3.8-1.4 5.8-0.8 2 0.5 3.6 1.7 4.7 3.6 1.1 1.8 1.3 3.8 0.8 5.8-0.6 2-1.8 3.6-3.6 4.6v0.1c-1.9 1-3.8 1.3-5.8 0.7-2.1-0.5-3.6-1.7-4.7-3.6-1-1.8-1.3-3.7-0.8-5.8 0.6-2 1.8-3.5 3.6-4.6z" />
-    <animateTransform
-      attributeName="transform"
-      attributeType="XML"
-      type="rotate"
-      from="0 32.5 65"
-      to="360 32.5 65"
-      dur="6s"
-      repeatCount="indefinite"/>
-  </g>
-</svg>