@bildvitta/quasar-ui-asteroid 3.17.0-beta.20 → 3.17.0-beta.21

package/src/mixins/view.js

@@ -1,156 +1,156 @@
-import { camelizeFieldsName } from '../helpers'
-import { markRaw } from 'vue'
-
-export default {
-  props: {
-    entity: {
-      required: true,
-      type: String
-    },
-
-    url: {
-      default: '',
-      type: String
-    },
-
-    fields: {
-      default: () => ({}),
-      type: Object
-    },
-
-    errors: {
-      default: () => ({}),
-      type: Object
-    },
-
-    metadata: {
-      default: () => ({}),
-      type: Object
-    },
-
-    fetching: {
-      type: Boolean
-    },
-
-    useBoundary: {
-      default: true,
-      type: Boolean
-    },
-
-    beforeFetch: {
-      default: null,
-      type: Function
-    }
-  },
-
-  emits: [
-    'update:fields',
-    'update:errors',
-    'update:metadata',
-    'update:fetching'
-  ],
-
-  data () {
-    return {
-      mx_errors: {},
-      mx_fields: {},
-      mx_metadata: {},
-      mx_cancelBeforeFetch: false,
-      mx_isFetching: false,
-      mx_hasFetchError: false
-    }
-  },
-
-  watch: {
-    mx_isFetching (value) {
-      this.$emit('update:fetching', value)
-    }
-  },
-
-  computed: {
-    mx_componentClass () {
-      return this.useBoundary && 'container spaced'
-    },
-
-    mx_hasFooterSlot () {
-      return !!(this.$slots.footer)
-    },
-
-    mx_hasHeaderSlot () {
-      return !!(this.$slots.header)
-    },
-
-    mx_hasFetchErrorSlot () {
-      return !!(this.$slots['fetch-error'])
-    },
-
-    mx_fetchErrorMessage () {
-      return 'Ops… Não conseguimos acessar as informações. Por favor, tente novamente em alguns minutos.'
-    },
-
-    mx_canShowFetchErrorSlot () {
-      return this.mx_hasFetchError && this.mx_hasFetchErrorSlot
-    }
-  },
-
-  methods: {
-    mx_fetchError (error) {
-      const { response } = error
-
-      const status = response?.status
-
-      const redirect = status >= 500
-        ? 'ServerError'
-        : ({ 403: 'Forbidden', 404: 'NotFound' })[status]
-
-      // caso exista um desses status será redirecionado sem aparecer o "notify"
-      if (redirect) {
-        this.$router.replace({ name: redirect })
-
-        return
-      }
-
-      this.mx_hasFetchError = true
-
-      this.$qas.error(this.mx_fetchErrorMessage)
-    },
-
-    mx_setErrors (errors = {}) {
-      this.mx_errors = markRaw(errors)
-    },
-
-    mx_setFields (fields = {}) {
-      const camelizedFields = camelizeFieldsName(fields)
-
-      this.mx_fields = markRaw(camelizedFields)
-    },
-
-    mx_setMetadata (metadata = {}) {
-      this.mx_metadata = markRaw(metadata)
-    },
-
-    mx_updateModels (models) {
-      for (const key in models) {
-        if (!models[key]) continue
-
-        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()
-    }
-  }
-}
+import { camelizeFieldsName } from '../helpers'
+import { markRaw } from 'vue'
+
+export default {
+  props: {
+    entity: {
+      required: true,
+      type: String
+    },
+
+    url: {
+      default: '',
+      type: String
+    },
+
+    fields: {
+      default: () => ({}),
+      type: Object
+    },
+
+    errors: {
+      default: () => ({}),
+      type: Object
+    },
+
+    metadata: {
+      default: () => ({}),
+      type: Object
+    },
+
+    fetching: {
+      type: Boolean
+    },
+
+    useBoundary: {
+      default: true,
+      type: Boolean
+    },
+
+    beforeFetch: {
+      default: null,
+      type: Function
+    }
+  },
+
+  emits: [
+    'update:fields',
+    'update:errors',
+    'update:metadata',
+    'update:fetching'
+  ],
+
+  data () {
+    return {
+      mx_errors: {},
+      mx_fields: {},
+      mx_metadata: {},
+      mx_cancelBeforeFetch: false,
+      mx_isFetching: false,
+      mx_hasFetchError: false
+    }
+  },
+
+  watch: {
+    mx_isFetching (value) {
+      this.$emit('update:fetching', value)
+    }
+  },
+
+  computed: {
+    mx_componentClass () {
+      return this.useBoundary && 'container spaced'
+    },
+
+    mx_hasFooterSlot () {
+      return !!(this.$slots.footer)
+    },
+
+    mx_hasHeaderSlot () {
+      return !!(this.$slots.header)
+    },
+
+    mx_hasFetchErrorSlot () {
+      return !!(this.$slots['fetch-error'])
+    },
+
+    mx_fetchErrorMessage () {
+      return 'Ops… Não conseguimos acessar as informações. Por favor, tente novamente em alguns minutos.'
+    },
+
+    mx_canShowFetchErrorSlot () {
+      return this.mx_hasFetchError && this.mx_hasFetchErrorSlot
+    }
+  },
+
+  methods: {
+    mx_fetchError (error) {
+      const { response } = error
+
+      const status = response?.status
+
+      const redirect = status >= 500
+        ? 'ServerError'
+        : ({ 403: 'Forbidden', 404: 'NotFound' })[status]
+
+      // caso exista um desses status será redirecionado sem aparecer o "notify"
+      if (redirect) {
+        this.$router.replace({ name: redirect })
+
+        return
+      }
+
+      this.mx_hasFetchError = true
+
+      this.$qas.error(this.mx_fetchErrorMessage)
+    },
+
+    mx_setErrors (errors = {}) {
+      this.mx_errors = markRaw(errors)
+    },
+
+    mx_setFields (fields = {}) {
+      const camelizedFields = camelizeFieldsName(fields)
+
+      this.mx_fields = markRaw(camelizedFields)
+    },
+
+    mx_setMetadata (metadata = {}) {
+      this.mx_metadata = markRaw(metadata)
+    },
+
+    mx_updateModels (models) {
+      for (const key in models) {
+        if (!models[key]) continue
+
+        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

@@ -1,74 +1,74 @@
-<template>
-  <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-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>
-
-<script>
-export default {
-  name: 'ErrorComponent',
-
-  props: {
-    buttonProps: {
-      type: Object,
-      default: () => ({})
-    },
-
-    code: {
-      type: String,
-      required: true
-    },
-
-    description: {
-      type: String,
-      default: ''
-    },
-
-    imagePath: {
-      type: String,
-      default: ''
-    }
-  },
-
-  computed: {
-    hasButtonProps () {
-      return !!Object.keys(this.buttonProps).length
-    },
-
-    ariaLabelCode () {
-      return `Código de erro ${this.code}`
-    }
-  }
-}
-</script>
-
-<style lang="scss">
-.error-component {
-  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>
+<template>
+  <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-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>
+
+<script>
+export default {
+  name: 'ErrorComponent',
+
+  props: {
+    buttonProps: {
+      type: Object,
+      default: () => ({})
+    },
+
+    code: {
+      type: String,
+      required: true
+    },
+
+    description: {
+      type: String,
+      default: ''
+    },
+
+    imagePath: {
+      type: String,
+      default: ''
+    }
+  },
+
+  computed: {
+    hasButtonProps () {
+      return !!Object.keys(this.buttonProps).length
+    },
+
+    ariaLabelCode () {
+      return `Código de erro ${this.code}`
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.error-component {
+  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

@@ -1,29 +1,29 @@
-<template>
-  <error-component v-bind="errorProps" />
-</template>
-
-<script>
-import ErrorComponent from './ErrorComponent.vue'
-
-export default {
-  name: 'Forbidden',
-
-  components: {
-    ErrorComponent
-  },
-
-  computed: {
-    errorProps () {
-      return {
-        code: '403',
-        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'
-        }
-      }
-    }
-  }
-}
-</script>
+<template>
+  <error-component v-bind="errorProps" />
+</template>
+
+<script>
+import ErrorComponent from './ErrorComponent.vue'
+
+export default {
+  name: 'Forbidden',
+
+  components: {
+    ErrorComponent
+  },
+
+  computed: {
+    errorProps () {
+      return {
+        code: '403',
+        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'
+        }
+      }
+    }
+  }
+}
+</script>

package/src/pages/NotFound.vue

@@ -1,29 +1,29 @@
-<template>
-  <error-component v-bind="errorProps" />
-</template>
-
-<script>
-import ErrorComponent from './ErrorComponent.vue'
-
-export default {
-  name: 'NotFound',
-
-  components: {
-    ErrorComponent
-  },
-
-  computed: {
-    errorProps () {
-      return {
-        code: '404',
-        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'
-        }
-      }
-    }
-  }
-}
-</script>
+<template>
+  <error-component v-bind="errorProps" />
+</template>
+
+<script>
+import ErrorComponent from './ErrorComponent.vue'
+
+export default {
+  name: 'NotFound',
+
+  components: {
+    ErrorComponent
+  },
+
+  computed: {
+    errorProps () {
+      return {
+        code: '404',
+        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'
+        }
+      }
+    }
+  }
+}
+</script>

package/src/pages/ServerError.vue

@@ -1,29 +1,29 @@
-<template>
-  <error-component v-bind="errorProps" />
-</template>
-
-<script>
-import ErrorComponent from './ErrorComponent.vue'
-
-export default {
-  name: 'ServerError',
-
-  components: {
-    ErrorComponent
-  },
-
-  computed: {
-    errorProps () {
-      return {
-        code: '500',
-        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'
-        }
-      }
-    }
-  }
-}
-</script>
+<template>
+  <error-component v-bind="errorProps" />
+</template>
+
+<script>
+import ErrorComponent from './ErrorComponent.vue'
+
+export default {
+  name: 'ServerError',
+
+  components: {
+    ErrorComponent
+  },
+
+  computed: {
+    errorProps () {
+      return {
+        code: '500',
+        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'
+        }
+      }
+    }
+  }
+}
+</script>