@bildvitta/quasar-ui-asteroid 2.18.0 → 2.21.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bildvitta/quasar-ui-asteroid",
-  "version": "2.18.0",
+  "version": "2.21.0",
   "description": "",
   "main": "./src/index.js",
   "scripts": {
@@ -73,9 +73,5 @@
   },
   "peerDependencies": {
     "vue": "^2.6.14"
-  },
-  "engines": {
-    "node": ">= 12 < 15",
-    "npm": ">= 6 < 7"
   }
 }

package/src/assets/gear.svg

@@ -0,0 +1,25 @@
+<?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>

package/src/components/input/QasInput.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <q-input ref="mask" v-model="model" v-bind="$attrs" bottom-slots :mask="mask" unmasked-value v-on="listeners">
+    <q-input ref="mask" v-model="model" v-bind="$attrs" bottom-slots :mask="mask" unmasked-value v-on="listeners" @paste="onPaste">
       <slot v-for="(slot, key) in $slots" :slot="key" :name="key" />
       <template v-for="(slot, key) in $scopedSlots" :slot="key" slot-scope="scope">
         <slot :name="key" v-bind="scope" />
@@ -65,7 +65,7 @@ export default {
 
   watch: {
     mask () {
-      const input = this.$refs.mask.$refs.input
+      const input = this.getInput()
 
       requestAnimationFrame(() => {
         input.selectionStart = input.value ? input.value.length : ''
@@ -75,6 +75,8 @@ export default {
 
   methods: {
     toggleMask (first, second) {
+      if (!this.value.length) return
+
       const length = first.split('#').length - 2
       return this.value?.length > length ? second : first
     },
@@ -89,6 +91,22 @@ export default {
 
     resetValidation () {
       return this.inputReference.resetValidation()
+    },
+
+    onPaste (event) {
+      if (!this.mask) return
+
+      const value = event.clipboardData.getData('text')
+      const input = this.getInput()
+
+      requestAnimationFrame(() => {
+        this.$emit('input', value)
+        input.selectionStart = input.value ? input.value.length : ''
+      })
+    },
+
+    getInput () {
+      return this.inputReference.$el?.querySelector('input')
     }
   }
 }

package/src/components/nested-fields/QasNestedFields.vue

@@ -68,7 +68,6 @@ import QasLabel from '../label/QasLabel'
 import { constructObject } from '../../helpers'
 
 import { extend } from 'quasar'
-import { camelize } from 'humps'
 
 export default {
   name: 'QasNestedFields',
@@ -213,13 +212,7 @@ export default {
     },
 
     children () {
-      const field = extend(true, {}, this.field)
-
-      for (const key in field?.children) {
-        field.children[key].name = camelize(field?.children[key].name)
-      }
-
-      return field?.children
+      return this.field?.children
     },
 
     showDestroyBtn () {

package/src/components/numeric-input/QasNumericInput.stories.js

@@ -44,13 +44,23 @@ export default {
 
     // Events
     input: {
-      description: 'Emitted when the component needs to change the model. Is also used by `v-model`.',
+      description: 'Emitted when the component needs to change the value.',
       table: {
         defaultValue: {
           detail: JSON.stringify({ value: 'number' }),
           summary: '{}'
         }
       }
+    },
+
+    'update-model': {
+      description: 'Emitted when the user inputs a new value in the component.',
+      table: {
+        defaultValue: {
+          detail: JSON.stringify({ value: 'object' }),
+          summary: '{}'
+        }
+      }
     }
   }
 }

package/src/components/numeric-input/QasNumericInput.vue

@@ -1,8 +1,8 @@
 <template>
   <div>
-    <q-field v-model="model" v-bind="$attrs">
-      <template #control="{ emitValue, floatingLabel, id, value: modelValue }">
-        <input v-show="floatingLabel" :id="id" ref="input" class="q-field__input" :model-value="modelValue" @input="emitValue($event.target.value)">
+    <q-field :value="value" v-bind="$attrs">
+      <template #control="{ floatingLabel, id }">
+        <input v-show="floatingLabel" :id="id" ref="input" class="q-field__input" @blur="emitValue" @click="setSelect" @input="emitUpdateModel($event.target.value)">
       </template>
     </q-field>
   </div>
@@ -66,15 +66,13 @@ export default {
   computed: {
     defaultMode () {
       return defaultModes[this.mode]
-    },
-
-    model: {
-      get () {
-        return this.value
-      },
+    }
+  },
 
-      set () {
-        this.$emit('input', this.autoNumeric.getNumber())
+  watch: {
+    value (value) {
+      if (this.autoNumeric) {
+        this.autoNumeric.set(value)
       }
     }
   },
@@ -110,13 +108,30 @@ export default {
     Object.assign(options, this.autonumericProps)
 
     this.$nextTick(() => {
-      this.$refs.input.value = this.value
       this.autoNumeric = new AutoNumeric(this.$refs.input, options)
+      this.autoNumeric.set(this.value)
     })
   },
 
   beforeDestroy () {
     this.autoNumeric.remove()
+  },
+
+  methods: {
+    setSelect () {
+      this.$refs?.input?.select()
+    },
+
+    emitValue () {
+      this.$emit('input', this.autoNumeric.getNumber())
+    },
+
+    emitUpdateModel (value) {
+      this.$emit('update-model', {
+        value,
+        raw: this.autoNumeric.getNumber()
+      })
+    }
   }
 }
 </script>

package/src/components/signature-uploader/QasSignatureUploader.vue

@@ -22,7 +22,7 @@
 
       <template #description>
         <div :style="signaturePadWidth">
-          <qas-signature-pad ref="signaturePadModal" :is-empty.sync="isEmpty" :height="signaturePadHeight" />
+          <qas-signature-pad ref="signaturePadModal" :height="signaturePadHeight" :is-empty.sync="isEmpty" />
         </div>
       </template>
 

package/src/helpers/camelize-fields-name.js

@@ -0,0 +1,15 @@
+import { camelize } from 'humps'
+
+export default function camelizeFieldsName (fields) {
+  for (const field in fields) {
+    const currentField = fields[field]
+
+    currentField.name = camelize(currentField.name)
+
+    if (Object.keys(currentField.children || {}).length) {
+      camelizeFieldsName(currentField.children)
+    }
+  }
+
+  return fields
+}

package/src/helpers/index.js

@@ -1,4 +1,5 @@
 import base64ToBlob from './base64ToBlob.js'
+import camelizeFieldsName from './camelize-fields-name.js'
 import constructObject from './constructObject.js'
 import filterObject from './filter-object.js'
 import greatestCommonDivisor from './greatestCommonDivisor.js'
@@ -31,6 +32,7 @@ export {
   // filters
   asset,
   booleanLabel,
+  camelizeFieldsName,
   constructObject,
   date,
   dateTime,

package/src/mixins/view.js

@@ -1,5 +1,6 @@
 import { camelize } from 'humps'
 import { get } from 'lodash'
+import { camelizeFieldsName } from '../helpers'
 
 import { NotifyError } from '../plugins'
 
@@ -52,7 +53,7 @@ export default {
       NotifyError('Ops! Erro ao obter os dados.', exception)
 
       const status = get(response, 'status')
-      const redirect = ({ 403: 'Forbidden', 404: 'NotFound' })[status]
+      const redirect = status >= 500 ? 'ServerError' : ({ 403: 'Forbidden', 404: 'NotFound' })[status]
 
       if (redirect) {
         this.$router.replace({ name: redirect })
@@ -64,11 +65,7 @@ export default {
     },
 
     setFields (fields = {}) {
-      for (const field in fields) {
-        fields[field].name = camelize(fields[field].name)
-      }
-
-      this.fields = fields
+      this.fields = camelizeFieldsName(fields)
     },
 
     setMetadata (metadata = {}) {

package/src/pages/ErrorComponent.vue

@@ -0,0 +1,60 @@
+<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>
+import screenMixin from '../mixins/screen'
+
+export default {
+  name: 'ErrorComponent',
+
+  mixins: [screenMixin],
+
+  props: {
+    buttonProps: {
+      type: Object,
+      default: () => ({})
+    },
+
+    code: {
+      type: String,
+      required: true
+    },
+
+    subtitle: {
+      type: String,
+      default: ''
+    },
+
+    title: {
+      type: String,
+      required: true
+    }
+  },
+
+  computed: {
+    gearSize () {
+      return this.$_isSmall ? '90px' : '160px'
+    },
+
+    hasButtonProps () {
+      return !!Object.keys(this.buttonProps).length
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.error-component {
+  min-height: 100vh;
+  background-color: var(--qas-background-color);
+}
+</style>

package/src/pages/Forbidden.vue

@@ -1,6 +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>
-</template>
+  <error-component v-bind="errorProps" />
+</template>
+
+<script>
+import ErrorComponent from './ErrorComponent'
+
+export default {
+  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,6 +1,26 @@
 <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'
+
+export default {
+  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,23 @@
+<template>
+  <error-component v-bind="errorProps" />
+</template>
+
+<script>
+import ErrorComponent from './ErrorComponent'
+
+export default {
+  components: {
+    ErrorComponent
+  },
+
+  computed: {
+    errorProps () {
+      return {
+        code: '500',
+        title: 'Ops, ocorreu um erro interno no nosso servidor!',
+        subtitle: 'Tente novamente em alguns instantes.'
+      }
+    }
+  }
+}
+</script>