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

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/checkbox-group/QasCheckboxGroup.vue

@@ -1,118 +1,107 @@
 <template>
   <div :class="classes">
-    <div v-for="(option, index) in options" :key="index">
+    <div v-for="(option, index) in props.options" :key="index">
       <q-checkbox v-if="hasChildren(option)" :class="getCheckboxClass(option)" :label="option.label" :model-value="getModelValue(index)" @update:model-value="updateCheckbox($event, option, index)" />
 
-      <q-option-group v-if="hasChildren(option)" class="q-ml-sm" :inline="inline" :model-value="modelValue" :options="option.children" type="checkbox" @update:model-value="updateChildren($event, option, index)" />
+      <q-option-group v-if="hasChildren(option)" class="q-ml-sm" :inline="props.inline" :model-value="props.modelValue" :options="option.children" type="checkbox" @update:model-value="updateChildren($event, option, index)" />
 
-      <q-option-group v-else v-model="model" v-bind="$attrs" :options="[option]" type="checkbox" />
+      <q-option-group v-else v-model="model" v-bind="attrs" :options="[option]" type="checkbox" />
     </div>
   </div>
 </template>
 
-<script>
-export default {
-  name: 'QasCheckboxGroup',
+<script setup>
+import { watch, computed, ref, onMounted, useAttrs } from 'vue'
 
-  props: {
-    options: {
-      default: () => [],
-      type: Array
-    },
+defineOptions({ name: 'QasCheckboxGroup' })
 
-    modelValue: {
-      default: () => [],
-      type: Array
-    },
+const props = defineProps({
+  options: {
+    default: () => [],
+    type: Array
+  },
 
-    inline: {
-      default: true,
-      type: Boolean
-    }
+  modelValue: {
+    default: () => [],
+    type: Array
   },
 
-  emits: ['update:modelValue'],
+  inline: {
+    default: true,
+    type: Boolean
+  }
+})
 
-  data () {
-    return {
-      group: {}
-    }
-  },
+const emit = defineEmits(['update:modelValue'])
 
-  computed: {
-    model: {
-      get () {
-        return this.modelValue
-      },
+const attrs = useAttrs()
 
-      set (value) {
-        this.$emit('update:modelValue', value)
-      }
-    },
+onMounted(handleParent)
 
-    classes () {
-      return this.inline && 'flex q-gutter-x-sm'
-    }
-  },
+const group = ref({})
 
-  watch: {
-    options () {
-      this.handleParent()
-    }
-  },
+const classes = computed(() => props.inline && 'flex q-gutter-x-sm')
 
-  created () {
-    this.handleParent()
+const model = computed({
+  get () {
+    return props.modelValue
   },
 
-  methods: {
-    handleParent () {
-      for (const index in this.options) {
-        const option = this.options[index]
-        if (this.hasChildren(option)) {
-          this.setGroupIntersection(this.modelValue, option, index)
-        }
-      }
-    },
-
-    hasChildren (option) {
-      return Object.prototype.hasOwnProperty.call(option, 'children')
-    },
-
-    setGroupIntersection (value, option, index) {
-      const options = option.children.map(item => item.value)
-      const intersection = options.filter(item => value.includes(item))
-
-      this.group[index] = intersection.length && (intersection.length === options.length ? true : null)
-    },
-
-    updateCheckbox (value, option, index) {
-      this.group[index] = value
-      const groupValues = option.children.map(item => item.value)
-
-      const updatedValue = value
-        ? [...new Set([...this.modelValue, ...groupValues])]
-        : this.modelValue.filter(item => !groupValues.includes(item))
-
-      this.updateModelValue(updatedValue)
-    },
-
-    updateChildren (value, option, index) {
-      this.setGroupIntersection(value, option, index)
-      this.updateModelValue(value)
-    },
-
-    getCheckboxClass (option) {
-      return this.hasChildren(option) && 'text-weight-bold'
-    },
-
-    getModelValue (index) {
-      return this.group[index]
-    },
-
-    updateModelValue (value) {
-      this.$emit('update:modelValue', value)
+  set (value) {
+    updateModelValue(value)
+  }
+})
+
+watch(() => props.options, handleParent)
+
+// functions
+function handleParent () {
+  for (const index in props.options) {
+    const option = props.options[index]
+    if (hasChildren(option)) {
+      setGroupIntersection(props.modelValue, option, index)
     }
   }
 }
+
+function hasChildren (option) {
+  return Object.prototype.hasOwnProperty.call(option, 'children')
+}
+
+function setGroupIntersection (value, option, index) {
+  const options = option.children.map(item => item.value)
+  const intersection = options.filter(item => value.includes(item))
+
+  group.value[index] = intersection.length && (intersection.length === options.length ? true : null)
+}
+
+function updateCheckbox (value, option, index) {
+  group.value[index] = value
+
+  const groupValues = option.children.map(item => item.value)
+
+  const updatedValue = value
+    ? [...new Set([...props.modelValue, ...groupValues])]
+    : props.modelValue.filter(item => !groupValues.includes(item))
+
+  updateModelValue(updatedValue)
+}
+
+function updateChildren (value, option, index) {
+  setGroupIntersection(value, option, index)
+  updateModelValue(value)
+}
+
+function updateModelValue (value) {
+  emit('update:modelValue', value)
+}
+
+function getCheckboxClass (option) {
+  return hasChildren(option) && 'text-weight-bold'
+}
+
+function getModelValue (index) {
+  return group.value[index]
+}
+
 </script>

package/src/components/copy/QasCopy.vue

@@ -1,43 +1,36 @@
 <template>
   <span>
-    <slot>{{ text }}</slot>
+    <slot>{{ props.text }}</slot>
 
-    <qas-btn class="q-ml-xs" color="primary" :icon="icon" :loading="isLoading" variant="tertiary" @click.stop.prevent="copy">
+    <qas-btn class="q-ml-xs" color="primary" :icon="props.icon" :loading="isLoading" variant="tertiary" @click.stop.prevent="copy">
       <q-tooltip>Copiar</q-tooltip>
     </qas-btn>
   </span>
 </template>
 
-<script>
+<script setup>
 import { copyToClipboard } from '../../helpers'
+import { ref } from 'vue'
 
-export default {
-  name: 'QasCopy',
+defineOptions({ name: 'QasCopy' })
 
-  props: {
-    icon: {
-      default: 'sym_r_file_copy',
-      type: String
-    },
-
-    text: {
-      required: true,
-      type: String
-    }
-  },
-
-  data () {
-    return {
-      isLoading: false
-    }
+const props = defineProps({
+  icon: {
+    default: 'sym_r_file_copy',
+    type: String
   },
 
-  methods: {
-    copy () {
-      copyToClipboard(this.text, isLoading => {
-        this.isLoading = isLoading
-      })
-    }
+  text: {
+    required: true,
+    type: String
   }
+})
+
+const isLoading = ref(false)
+
+function copy () {
+  copyToClipboard(props.text, value => {
+    isLoading.value = value
+  })
 }
 </script>