@bildvitta/quasar-ui-asteroid 3.0.0-beta.2 → 3.0.0-beta.20

package/src/mixins/view.js

@@ -1,12 +1,8 @@
-import { camelize } from 'humps'
+import { camelizeFieldsName } from '../helpers'
 import { markRaw } from 'vue'
 
 export default {
   props: {
-    dialog: {
-      type: Boolean
-    },
-
     entity: {
       required: true,
       type: String
@@ -34,6 +30,16 @@ export default {
 
     fetching: {
       type: Boolean
+    },
+
+    useBoundary: {
+      default: true,
+      type: Boolean
+    },
+
+    beforeFetch: {
+      default: null,
+      type: Function
     }
   },
 
@@ -49,7 +55,7 @@ export default {
       mx_errors: {},
       mx_fields: {},
       mx_metadata: {},
-
+      mx_cancelBeforeFetch: false,
       mx_isFetching: false
     }
   },
@@ -62,11 +68,11 @@ export default {
 
   computed: {
     mx_componentTag () {
-      return this.dialog ? 'div' : 'q-page'
+      return this.useBoundary ? 'q-page' : 'div'
     },
 
     mx_componentClass () {
-      return !this.dialog && 'container spaced'
+      return this.useBoundary && 'container spaced'
     },
 
     mx_hasFooterSlot () {
@@ -86,7 +92,9 @@ export default {
       this.$qas.error('Ops! Erro ao obter os dados.', exception)
 
       const status = response?.status
-      const redirect = ({ 403: 'Forbidden', 404: 'NotFound' })[status]
+      const redirect = status >= 500
+        ? 'ServerError'
+        : ({ 401: 'Unauthorized', 403: 'Forbidden', 404: 'NotFound' })[status]
 
       if (redirect) {
         this.$router.replace({ name: redirect })
@@ -98,11 +106,9 @@ export default {
     },
 
     mx_setFields (fields = {}) {
-      for (const field in fields) {
-        fields[field].name = camelize(fields[field].name)
-      }
+      const camelizedFields = camelizeFieldsName(fields)
 
-      this.mx_fields = markRaw(fields)
+      this.mx_fields = markRaw(camelizedFields)
     },
 
     mx_setMetadata (metadata = {}) {
@@ -115,6 +121,22 @@ export default {
 
         this.$emit(`update:${key}`, models[key])
       }
+    },
+
+    mx_fetchHandler (payload, resolve) {
+      const hasBeforeFetch = typeof this.beforeFetch === 'function'
+
+      if (hasBeforeFetch && !this.mx_cancelBeforeFetch) {
+        return this.beforeFetch({
+          payload,
+          resolve: payload => resolve(payload),
+          done: () => {
+            this.mx_cancelBeforeFetch = true
+          }
+        })
+      }
+
+      resolve()
     }
   }
 }

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,28 @@
 <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.vue'
+
 export default {
-  name: 'Forbidden'
+  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>

package/src/pages/NotFound.vue

@@ -1,12 +1,28 @@
 <template>
-  <div class="fixed-center text-center">
-    <p class="q-my-lg text-faded">Ops, nada aqui... <strong>(404)</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.vue'
+
 export default {
-  name: 'NotFound'
+  name: 'NotFound',
+
+  components: {
+    ErrorComponent
+  },
+
+  computed: {
+    errorProps () {
+      return {
+        code: '404',
+        title: 'Ops! Parece que a página que está tentando acessar não existe!',
+        buttonProps: {
+          to: { path: '/' },
+          label: 'Voltar ao início'
+        }
+      }
+    }
+  }
 }
 </script>

package/src/pages/ServerError.vue

@@ -0,0 +1,25 @@
+<template>
+  <error-component v-bind="errorProps" />
+</template>
+
+<script>
+import ErrorComponent from './ErrorComponent.vue'
+
+export default {
+  name: 'ServerError',
+
+  components: {
+    ErrorComponent
+  },
+
+  computed: {
+    errorProps () {
+      return {
+        code: '500',
+        title: 'Ops, ocorreu um erro interno no nosso servidor!',
+        subtitle: 'Tente novamente em alguns instantes.'
+      }
+    }
+  }
+}
+</script>

package/src/pages/Unauthorized.vue

@@ -0,0 +1,28 @@
+<template>
+  <error-component v-bind="errorProps" />
+</template>
+
+<script>
+import ErrorComponent from './ErrorComponent.vue'
+
+export default {
+  name: 'Unauthorized',
+
+  components: {
+    ErrorComponent
+  },
+
+  computed: {
+    errorProps () {
+      return {
+        code: '401',
+        title: 'Ops! Parece que você está sem acesso ao sistema!',
+        buttonProps: {
+          to: { path: '/auth/login' },
+          label: 'Fazer login'
+        }
+      }
+    }
+  }
+}
+</script>

package/src/plugins/index.js

@@ -1,11 +1,13 @@
 import Dialog from './dialog/Dialog.js'
+import Logger from './logger/Logger.js'
 import NotifyError from './notify-error/NotifyError.js'
 import NotifySuccess from './notify-success/NotifySuccess.js'
 import Screen from './screen/Screen.js'
 
 export {
   Dialog,
+  Logger,
   NotifyError,
-  Screen,
-  NotifySuccess
+  NotifySuccess,
+  Screen
 }

package/src/plugins/logger/Logger.js

@@ -0,0 +1,44 @@
+export default () => {
+  const isDebugEnabled = process.env.DEBUGGING
+
+  const normalizeMessage = msg => `%c ${msg}`
+  const getStyle = isError => (
+    `
+      background: ${isError ? '#C10015 ' : '#1976d2'};
+      font-weight: bold;
+      color: white;
+      padding: 6px 20px;
+      border-radius: 4px;
+      display: block;
+      width: 100%;
+      font-size: 12px;
+    `
+  )
+
+  return {
+    group (message, payload = [], { error } = {}) {
+      if (!isDebugEnabled) return
+
+      console.groupCollapsed(normalizeMessage(message), getStyle(error))
+
+      for (const item of payload) {
+        if (typeof item === 'string') {
+          console.info(normalizeMessage(item), getStyle(error))
+          continue
+        }
+
+        console.table(item)
+      }
+
+      console.groupEnd()
+    },
+
+    info (message) {
+      isDebugEnabled && console.info(normalizeMessage(message), getStyle())
+    },
+
+    error (message) {
+      isDebugEnabled && console.info(normalizeMessage(message), getStyle(true))
+    }
+  }
+}

package/src/plugins/logger/Logger.yml

@@ -0,0 +1,9 @@
+type: component
+
+meta:
+  desc: Plugin para adicionar loggers.
+
+inject:
+  'this.$qas.logger':
+    default: {}
+    type: Object

package/src/plugins/screen/Screen.js

@@ -2,10 +2,15 @@ import { Screen, Platform } from 'quasar'
 
 export default () => {
   const screensModel = {
+    // até 599px
     isSmall: () => Screen.xs,
+    // de 600 até 1023px
     isMedium: () => Screen.sm,
+    // de 600 até 1023px
     isLarge: () => Screen.gt.sm,
+    // de 0 até 599px
     untilMedium: () => Screen.lt.sm,
+    // de 0 ate 1023px
     untilLarge: () => Screen.lt.md,
 
     // Plataforma

package/src/vue-plugin.js

@@ -55,7 +55,8 @@ import {
   Dialog,
   NotifyError,
   NotifySuccess,
-  Screen
+  Screen,
+  Logger
 } from './plugins'
 
 import packageInfo from '../package.json'
@@ -124,8 +125,9 @@ function install (app) {
   app.config.globalProperties.$qas = {
     dialog: Dialog,
     error: NotifyError,
-    success: NotifySuccess,
-    screen: Screen()
+    logger: Logger(),
+    screen: Screen(),
+    success: NotifySuccess
   }
 
   app.directive(Test.name, Test)
@@ -186,6 +188,7 @@ export {
 
   // plugins
   Dialog,
+  Logger,
   NotifyError,
   NotifySuccess,
   Screen,

package/src/assets/logo-modular.svg

@@ -1 +0,0 @@
-<svg width="126" height="26" fill="none" xmlns="http://www.w3.org/2000/svg"><g opacity=".3"><g clip-path="url(#a)"><path d="M6.829 10.909c.02-2.295.059-4.6.119-6.895C9.197 2.653 11.41 1.3 13.58 0c2.172 1.301 4.393 2.653 6.634 4.014.07 2.295.11 4.6.12 6.895a342.175 342.175 0 0 0 6.048 3.417c-.02 2.504-.1 5.017-.238 7.521A575.699 575.699 0 0 0 19.392 26a404.892 404.892 0 0 1-5.81-3.388A525.05 525.05 0 0 1 7.77 26a574.702 574.702 0 0 0-6.753-4.153 158.72 158.72 0 0 1-.238-7.52 381.833 381.833 0 0 0 6.049-3.418Zm6.752-9.24c-1.487.884-2.994 1.788-4.521 2.702 1.487.855 2.994 1.73 4.521 2.613a830.152 830.152 0 0 1 4.522-2.613c-1.527-.904-3.034-1.818-4.522-2.702Zm.714 6.577v5.295c1.537-.884 3.064-1.768 4.591-2.642-.01-1.759-.03-3.507-.06-5.266-1.487.855-3.004 1.729-4.53 2.613Zm5.87 15.658a402.133 402.133 0 0 1 4.602-2.792c.079-1.719.128-3.438.158-5.156-1.547.884-3.084 1.788-4.62 2.692-.04 1.749-.08 3.507-.14 5.256Zm4.046-9.16c-1.517-.845-3.044-1.72-4.571-2.593a767.782 767.782 0 0 0-4.601 2.652c1.527.884 3.044 1.759 4.551 2.613 1.547-.894 3.084-1.788 4.621-2.672Zm-15.806 9.21c1.468-.835 2.955-1.71 4.462-2.594 0-1.768-.01-3.546-.01-5.315a577.521 577.521 0 0 1-4.56 2.623c.029 1.758.059 3.527.108 5.285Zm3.719-9.15c-1.537-.885-3.064-1.78-4.601-2.653a310.65 310.65 0 0 1-4.572 2.593c1.537.874 3.084 1.768 4.621 2.672a573.757 573.757 0 0 0 4.552-2.613Z" fill="#00314D"/></g><path d="m47.676 21.17-.022-10.315-5.113 8.536h-1.29l-5.112-8.403V21.17h-2.756V5.61h2.378l6.18 10.314L48.01 5.61h2.378l.022 15.56h-2.734ZM58.193 21.325c-1.2 0-2.282-.26-3.245-.778a5.774 5.774 0 0 1-2.268-2.156c-.533-.934-.8-1.986-.8-3.157 0-1.17.267-2.215.8-3.134a5.774 5.774 0 0 1 2.267-2.156c.964-.52 2.045-.778 3.246-.778 1.215 0 2.304.259 3.268.778a5.619 5.619 0 0 1 2.245 2.156c.548.919.822 1.963.822 3.134 0 1.17-.274 2.223-.822 3.157a5.62 5.62 0 0 1-2.245 2.156c-.964.518-2.053.778-3.268.778Zm0-2.379c1.023 0 1.867-.34 2.534-1.022.667-.682 1-1.578 1-2.69 0-1.111-.333-2.008-1-2.69-.667-.681-1.511-1.022-2.534-1.022s-1.867.34-2.534 1.022c-.652.682-.978 1.579-.978 2.69 0 1.112.326 2.008.978 2.69.667.681 1.511 1.022 2.534 1.022ZM78.513 4.675V21.17h-2.667v-1.534c-.46.563-1.03.986-1.712 1.267-.667.282-1.408.423-2.223.423-1.14 0-2.17-.252-3.09-.756a5.47 5.47 0 0 1-2.133-2.134c-.52-.934-.779-2-.779-3.2 0-1.201.26-2.26.778-3.18a5.471 5.471 0 0 1 2.135-2.134c.918-.504 1.948-.755 3.09-.755.785 0 1.503.133 2.155.4a4.337 4.337 0 0 1 1.668 1.2v-6.09h2.778Zm-6.268 14.271c.667 0 1.267-.148 1.8-.444a3.372 3.372 0 0 0 1.267-1.312c.312-.563.467-1.215.467-1.956 0-.74-.155-1.393-.467-1.956a3.217 3.217 0 0 0-1.267-1.29 3.507 3.507 0 0 0-1.8-.466c-.667 0-1.267.155-1.8.467a3.217 3.217 0 0 0-1.268 1.289c-.311.563-.467 1.215-.467 1.956 0 .741.156 1.393.467 1.956.311.563.734 1 1.267 1.312a3.644 3.644 0 0 0 1.8.444ZM91.854 9.299v11.87H89.21v-1.511c-.444.533-1 .948-1.667 1.244a5.487 5.487 0 0 1-2.156.423c-1.586 0-2.838-.437-3.757-1.312-.904-.889-1.356-2.2-1.356-3.934v-6.78h2.779V15.7c0 1.067.237 1.867.711 2.4.49.52 1.178.779 2.067.779.993 0 1.779-.304 2.357-.912.592-.622.889-1.511.889-2.667V9.299h2.778ZM93.805 4.675h2.78V21.17h-2.78V4.675ZM103.773 9.166c1.749 0 3.083.422 4.002 1.267.933.83 1.4 2.09 1.4 3.778v6.958h-2.623v-1.445c-.341.519-.83.92-1.467 1.2-.622.267-1.378.4-2.267.4-.89 0-1.668-.147-2.334-.444-.667-.311-1.186-.733-1.556-1.267a3.317 3.317 0 0 1-.534-1.845c0-1.067.393-1.919 1.178-2.556.8-.652 2.053-.978 3.757-.978h3.067v-.178c0-.83-.252-1.467-.755-1.912-.489-.444-1.223-.667-2.201-.667-.667 0-1.326.104-1.978.312-.638.207-1.179.496-1.623.867l-1.09-2.023c.623-.475 1.371-.838 2.246-1.09a9.984 9.984 0 0 1 2.778-.377Zm-.377 10.136c.696 0 1.311-.156 1.845-.467a2.638 2.638 0 0 0 1.155-1.378v-1.378h-2.867c-1.601 0-2.401.526-2.401 1.578 0 .504.2.904.6 1.2.4.297.956.445 1.668.445ZM113.997 11.033c.8-1.245 2.208-1.867 4.224-1.867v2.645a3.532 3.532 0 0 0-.645-.067c-1.082 0-1.927.319-2.534.956-.608.622-.912 1.526-.912 2.712v5.757h-2.778V9.3h2.645v1.734Z" fill="#00314D"/></g><defs><clipPath id="a"><path fill="#fff" transform="matrix(-1 0 0 1 26.383 0)" d="M0 0h25.603v26H0z"/></clipPath></defs></svg>

package/src/css/design-system.scss

@@ -1,18 +0,0 @@
-body {
-  background-color: $background-color;
-}
-
-// Fields
-.q-field--outlined .q-field__inner {
-  background-color: white;
-  border-radius: $generic-border-radius;
-}
-
-.q-radio__inner::before {
-  color: $primary;
-}
-
-// Tabs
-.q-tabs__arrow {
-  color: $primary;
-}

package/src/css/shadow.scss

@@ -1,7 +0,0 @@
-.shadow-primary {
-  box-shadow: 0 8px 25px $primary-contrast !important;
-}
-
-.shadow-secondary {
-  box-shadow: 0 8px 25px $secondary-contrast !important;
-}

package/src/mixins/screen.js

@@ -1,34 +0,0 @@
-export default {
-  // TODO: Esses nomes precisam ser alterados para algo mais inteligente.
-
-  computed: {
-    mx_isSmall () {
-      // until 599
-      return this.$q.screen.xs
-    },
-
-    mx_isMedium () {
-      // from 600 until 1023
-      return this.$q.screen.sm
-    },
-
-    mx_isLarge () {
-      // from 1024 until the limit
-      return this.$q.screen.gt.sm
-    },
-
-    mx_untilMedium () {
-      // from 0 until 599
-      return this.$q.screen.lt.sm
-    },
-
-    mx_untilLarge () {
-      // from 0 until 1023
-      return this.$q.screen.lt.md
-    },
-
-    mx_isMobile () {
-      return this.$q.platform.is.mobile
-    }
-  }
-}