@bildvitta/quasar-ui-asteroid 2.17.1 → 2.20.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bildvitta/quasar-ui-asteroid",
-  "version": "2.17.1",
+  "version": "2.20.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/filters/QasFilters.stories.js

@@ -52,6 +52,10 @@ export default {
       description: 'Ignore entity and specify another endpoint.'
     },
 
+    forceRefetch: {
+      description: 'Force refetching of filters data.'
+    },
+
     // Events
     'fetch-error': {
       description: 'Fires when occur an error fetching value.',

package/src/components/filters/QasFilters.vue

@@ -16,7 +16,7 @@
 
       <slot v-if="showFilterButton" :filter="filter" name="filter-button">
         <q-btn v-if="!noFilterButton" :color="filterButtonColor" flat icon="o_filter_list" :label="filterButtonLabel">
-          <q-menu @before-show="fetchFilters">
+          <q-menu>
             <div v-if="isFetching" class="q-pa-xl text-center">
               <q-spinner color="grey" size="2em" />
             </div>
@@ -61,6 +61,7 @@ export default {
   },
 
   mixins: [contextMixin],
+
   props: {
     badges: {
       default: true,
@@ -95,6 +96,10 @@ export default {
     url: {
       default: '',
       type: String
+    },
+
+    forceRefetch: {
+      type: Boolean
     }
   },
 
@@ -220,7 +225,7 @@ export default {
     },
 
     async fetchFilters () {
-      if (this.hasFields || this.noFilterButton) {
+      if (!this.forceRefetch && (this.hasFields || this.noFilterButton)) {
         return null
       }
 

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-pad/QasSignaturePad.vue

@@ -12,19 +12,19 @@ import { isEqual } from 'lodash'
 
 export default {
   props: {
-    options: {
-      default: () => ({}),
-      type: Object
+    height: {
+      type: String,
+      default: '250'
     },
 
-    type: {
-      default: 'image/png',
-      type: String
+    options: {
+      type: Object,
+      default: () => ({})
     },
 
-    height: {
-      default: '250',
-      type: String
+    type: {
+      type: String,
+      default: 'image/png'
     },
 
     isEmpty: {

package/src/components/signature-uploader/QasSignatureUploader.stories.js

@@ -26,6 +26,13 @@ export default {
       description: 'Generated signature label.'
     },
 
+    dialogProps: {
+      description: 'Set props in dialog',
+      table: {
+        defaultValue: { summary: JSON.stringify({}) }
+      }
+    },
+
     value: {
       description: 'Model value.'
     },

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

@@ -15,13 +15,15 @@
       </template>
     </qas-uploader>
 
-    <qas-dialog v-model="isOpenedDialog">
+    <qas-dialog v-model="isOpenedDialog" v-bind="defaultDialogProps" >
       <template #header>
         <div class="text-bold text-center">Insira sua assinatura digital no campo abaixo</div>
       </template>
 
       <template #description>
-        <qas-signature-pad ref="signaturePadModal" height="250" :is-empty.sync="isEmpty" />
+        <div :style="signaturePadWidth">
+          <qas-signature-pad ref="signaturePadModal" :height="signaturePadHeight" :is-empty.sync="isEmpty" />
+        </div>
       </template>
 
       <template #actions>
@@ -36,10 +38,13 @@
 import QasDialog from '../dialog/QasDialog.vue'
 import QasUploader from '../uploader/QasUploader.vue'
 import QasSignaturePad from '../signature-pad/QasSignaturePad.vue'
+import { screenMixin } from '../../mixins'
 import { base64ToBlob } from '../../helpers'
 import { NotifyError } from '../../plugins'
 
 export default {
+  mixins: [screenMixin],
+
   components: {
     QasDialog,
     QasUploader,
@@ -47,6 +52,11 @@ export default {
   },
 
   props: {
+    dialogProps: {
+      type: Object,
+      default: () => ({})
+    },
+
     uploadLabel: {
       default: 'Assinatura digital',
       type: String
@@ -93,6 +103,33 @@ export default {
 
     headerClasses () {
       return `q-pa-${this.readonly ? 'md' : 'sm'}`
+    },
+
+    defaultDialogProps () {
+      return {
+        maxWidth: '620px',
+        ...this.dialogProps
+      }
+    },
+
+    signaturePadWidth () {
+      const sizes = {
+        [this.$_isSmall]: { width: '100%' },
+        [this.$_isMedium]: { width: '570px' },
+        [this.$_isLarge]: { width: '350px' }
+      }
+
+      return sizes.true
+    },
+
+    signaturePadHeight () {
+      const sizes = {
+        [this.$_isSmall]: '250',
+        [this.$_isMedium]: '400',
+        [this.$_isLarge]: '250'
+      }
+
+      return sizes.true
     }
   },
 

package/src/mixins/view.js

@@ -52,7 +52,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 })

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>