@bildvitta/quasar-ui-asteroid 2.16.0 → 2.18.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bildvitta/quasar-ui-asteroid",
-  "version": "2.16.0",
+  "version": "2.18.0",
   "description": "",
   "main": "./src/index.js",
   "scripts": {

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/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" :is-empty.sync="isEmpty" :height="signaturePadHeight" />
+        </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/helpers/filters.js

@@ -54,6 +54,11 @@ function percent (value = 0, places = 2) {
   return value ? (value / 100).toLocaleString('pt-BR', { style: 'percent', minimumFractionDigits: places }) : ''
 }
 
+function formatPercent (value = 0, places = 2) {
+  value = Number(value)
+  return value ? value.toLocaleString('pt-BR', { style: 'percent', minimumFractionDigits: places }) : ''
+}
+
 function squareArea (value = 0, suffix = 'm²') {
   value = decimal(value)
   return value ? `${value} ${suffix}` : ''
@@ -97,7 +102,6 @@ function handleMasks (value) {
 // Labels
 function humanize (field = {}, value) {
   if (field.mask && !value) return value
-
   const mappedMasks = handleMasks(value)
 
   if (mappedMasks[field.mask]) {
@@ -111,6 +115,7 @@ function humanize (field = {}, value) {
     case 'datetime': return dateTime(value)
     case 'time': return time(value)
     case 'radio': return selectLabel(field.options, value)
+    case 'percent': return formatPercent(value)
     default: return value
   }
 }
@@ -143,6 +148,7 @@ export {
   decimal,
   formatCompanyDocument,
   formatDocument,
+  formatPercent,
   formatPersonalDocument,
   formatPhone,
   formatPostalCode,

package/src/helpers/index.js

@@ -13,6 +13,7 @@ import {
   decimal,
   formatCompanyDocument,
   formatDocument,
+  formatPercent,
   formatPersonalDocument,
   formatPhone,
   formatPostalCode,
@@ -36,6 +37,7 @@ export {
   decimal,
   formatCompanyDocument,
   formatDocument,
+  formatPercent,
   formatPersonalDocument,
   formatPhone,
   formatPostalCode,