@bildvitta/quasar-ui-asteroid 3.5.0 → 3.6.0-beta.1

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="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

@@ -5,6 +5,7 @@ import QasAppBar from './components/app-bar/QasAppBar.vue'
 import QasAppMenu from './components/app-menu/QasAppMenu.vue'
 import QasAppUser from './components/app-user/QasAppUser.vue'
 import QasAvatar from './components/avatar/QasAvatar.vue'
+import QasBadge from './components/badge/QasBadge.vue'
 import QasBox from './components/box/QasBox.vue'
 import QasBreakline from './components/breakline/QasBreakline.vue'
 import QasBtn from './components/btn/QasBtn.vue'
@@ -45,6 +46,7 @@ import QasSignaturePad from './components/signature-pad/QasSignaturePad.vue'
 import QasSignatureUploader from './components/signature-uploader/QasSignatureUploader.vue'
 import QasSingleView from './components/single-view/QasSingleView.vue'
 import QasSortable from './components/sortable/QasSortable.vue'
+import QasStatus from './components/status/QasStatus.vue'
 import QasTableGenerator from './components/table-generator/QasTableGenerator.vue'
 import QasTabsGenerator from './components/tabs-generator/QasTabsGenerator.vue'
 import QasTextTruncate from './components/text-truncate/QasTextTruncate.vue'
@@ -80,6 +82,7 @@ function install (app) {
   app.component('QasAppMenu', QasAppMenu)
   app.component('QasAppUser', QasAppUser)
   app.component('QasAvatar', QasAvatar)
+  app.component('QasBadge', QasBadge)
   app.component('QasBox', QasBox)
   app.component('QasBreakline', QasBreakline)
   app.component('QasBtn', QasBtn)
@@ -120,6 +123,7 @@ function install (app) {
   app.component('QasSignatureUploader', QasSignatureUploader)
   app.component('QasSingleView', QasSingleView)
   app.component('QasSortable', QasSortable)
+  app.component('QasStatus', QasStatus)
   app.component('QasTableGenerator', QasTableGenerator)
   app.component('QasTabsGenerator', QasTabsGenerator)
   app.component('QasTextTruncate', QasTextTruncate)
@@ -156,6 +160,7 @@ export {
   QasAppMenu,
   QasAppUser,
   QasAvatar,
+  QasBadge,
   QasBox,
   QasBreakline,
   QasBtn,
@@ -196,6 +201,7 @@ export {
   QasSignatureUploader,
   QasSingleView,
   QasSortable,
+  QasStatus,
   QasTableGenerator,
   QasTabsGenerator,
   QasTextTruncate,

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>