@bildvitta/quasar-ui-asteroid 3.14.0-beta.1 → 3.14.0-beta.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bildvitta/quasar-ui-asteroid",
   "description": "Asteroid",
-  "version": "3.14.0-beta.1",
+  "version": "3.14.0-beta.2",
   "author": "Bild & Vitta <systemteam@bild.com.br>",
   "license": "MIT",
   "main": "dist/asteroid.cjs.min.js",

package/src/components/chart-view/QasChartView.vue

@@ -11,7 +11,7 @@
     </template>
 
     <template #right>
-      <qas-filters v-bind="chartFiltersProps" v-model:currentFilters="filters" />
+      <qas-filters v-bind="chartFiltersProps" />
     </template>
   </qas-header-actions>
 
@@ -74,6 +74,11 @@ export default {
   },
 
   props: {
+    beforeFetch: {
+      default: null,
+      type: Function
+    },
+
     entity: {
       required: true,
       type: String
@@ -137,6 +142,7 @@ export default {
 
   data () {
     return {
+      cancelBeforeFetch: false,
       data: [],
       filters: {},
       isFetched: false,
@@ -199,7 +205,12 @@ export default {
         useSpacing: false,
         useUpdateRoute: false,
 
-        ...this.filtersProps
+        ...this.filtersProps,
+
+        'onUpdate:currentFilters': filters => {
+          this.filters = filters
+          this.filtersProps['onUpdate:currentFilters']?.(filters)
+        }
       }
     },
 
@@ -296,7 +307,7 @@ export default {
 
   watch: {
     filters () {
-      this.fetchData()
+      this.handleFetchData()
     },
 
     isFetching (value) {
@@ -306,7 +317,7 @@ export default {
 
   created () {
     this.registerChartJS()
-    this.fetchData()
+    this.handleFetchData()
   },
 
   unmounted () {
@@ -314,17 +325,34 @@ export default {
   },
 
   methods: {
-    async fetchData () {
+    handleFetchData () {
+      const hasBeforeFetch = typeof this.beforeFetch === 'function'
+      const payload = {
+        url: this.url,
+        filters: this.filters
+      }
+
+      if (hasBeforeFetch && !this.cancelBeforeFetch) {
+        return this.beforeFetch({
+          payload,
+          resolve: this.fetchData,
+          done: () => {
+            this.cancelBeforeFetch = true
+          }
+        })
+      }
+
+      this.fetchData(payload)
+    },
+
+    async fetchData (payload = {}) {
       try {
         this.isFetching = true
 
         const response = await getAction.call(this, {
           entity: this.entity,
           key: 'fetchList',
-          payload: {
-            url: this.url,
-            filters: this.filters
-          }
+          payload
         })
 
         const { results } = response.data

package/src/components/chart-view/QasChartView.yml

@@ -4,6 +4,12 @@ meta:
   desc: Componente responsável pela renderização de gráficos
 
 props:
+  before-fetch:
+    desc: Callback para controlar o fetch de dados interno do componente.
+    default: null
+    type: Function
+    examples: ['beforeFetch({ payload, resolve, done })']
+
   entity:
     desc: Entidade da store, por exemplo se tiver que trabalhar com modulo de usuários, teremos o model "users" na store, que vai ser nossa "entity".
     required: true

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

@@ -1,7 +1,7 @@
 <template>
   <q-field :label="formattedLabel" :model-value="modelValue" outlined>
-    <template #control="{ floatingLabel, id }">
-      <input v-show="floatingLabel" :id="id" ref="input" class="q-field__input" inputmode="numeric" @blur="emitValue" @click="setSelect" @input="emitUpdateModel($event.target.value)">
+    <template #control="{ floatingLabel, id, editable }">
+      <input v-show="floatingLabel" :id="id" ref="input" class="q-field__input" :disabled="!editable" inputmode="numeric" @blur="emitValue" @click="setSelect" @input="emitUpdateModel($event.target.value)">
     </template>
   </q-field>
 </template>

package/src/components/uploader/private/PvUploaderGalleryCard.vue

@@ -317,7 +317,7 @@ export default {
     },
 
     url () {
-      return this.defaultGalleryCardProps?.card?.url
+      return this.normalizedCardGalleryProps?.card?.url
     }
   },
 

package/src/components/whatsapp-link/QasWhatsappLink.vue

@@ -0,0 +1,34 @@
+<template>
+  <qas-btn :href="whatsappLink" :icon="fabWhatsapp" target="_blank" />
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { fabWhatsapp } from '@quasar/extras/fontawesome-v5'
+
+defineOptions({ name: 'QasWhatsappLink' })
+
+const props = defineProps({
+  callingCode: {
+    type: String,
+    default: '55'
+  },
+
+  phone: {
+    type: String,
+    default: ''
+  },
+
+  text: {
+    type: String,
+    default: ''
+  }
+})
+
+const whatsappLink = computed(() => {
+  const formattedPhone = props.phone.replace(/[^a-zA-Z0-9]/g, '')
+  const formattedText = props.text ? props.text.replace(/\n/g, '%0a') : ''
+
+  return `https://wa.me/${props.callingCode}${formattedPhone}?text=${formattedText}`
+})
+</script>

package/src/components/whatsapp-link/QasWhatsappLink.yml

@@ -0,0 +1,18 @@
+type: component
+
+meta:
+  desc: Componente de link para o Whatsapp.
+
+props:
+  calling-code:
+    desc: Propriedade para passar o DDI.
+    default: 55
+    type: String
+
+  phone:
+    desc: Propriedade para passar o telefone.
+    type: String
+
+  text:
+    desc: Propriedade para passar o texto que será enviado na mensagem do Whatsapp.
+    type: String

package/src/vue-plugin.js

@@ -61,6 +61,7 @@ import QasTransfer from './components/transfer/QasTransfer.vue'
 import QasTreeGenerator from './components/tree-generator/QasTreeGenerator.vue'
 import QasUploader from './components/uploader/QasUploader.vue'
 import QasWelcome from './components/welcome/QasWelcome.vue'
+import QasWhatsappLink from './components/whatsapp-link/QasWhatsappLink.vue'
 
 import { Notify, Loading, Quasar, Dialog as QuasarDialog } from 'quasar'
 
@@ -146,6 +147,7 @@ async function install (app) {
   app.component('QasTreeGenerator', QasTreeGenerator)
   app.component('QasUploader', QasUploader)
   app.component('QasWelcome', QasWelcome)
+  app.component('QasWhatsappLink', QasWhatsappLink)
 
   app.use(Quasar, { plugins: { Notify, Loading, QuasarDialog, Dialog } })