@bildvitta/quasar-ui-asteroid 2.23.0-beta.7 → 2.24.0-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bildvitta/quasar-ui-asteroid",
-  "version": "2.23.0-beta.7",
+  "version": "2.24.0-beta.0",
   "description": "",
   "main": "./src/index.js",
   "scripts": {
@@ -26,52 +26,56 @@
   "author": "Inovação Bild & Vitta <inova@bild.com.br>",
   "license": "ISC",
   "devDependencies": {
-    "@babel/core": "^7.12.10",
-    "@babel/eslint-parser": "^7.12.1",
-    "@babel/preset-env": "^7.12.11",
-    "@storybook/addon-actions": "^6.2.9",
+    "@babel/core": "^7.20.12",
+    "@babel/eslint-parser": "^7.19.1",
+    "@babel/preset-env": "^7.20.2",
+    "@storybook/addon-actions": "^6.5.16",
     "@storybook/addon-console": "^1.2.3",
-    "@storybook/addon-essentials": "^6.2.9",
-    "@storybook/addon-links": "^6.2.9",
+    "@storybook/addon-essentials": "^6.5.16",
+    "@storybook/addon-links": "^6.5.16",
     "@storybook/addon-postcss": "^2.0.0",
-    "@storybook/vue": "^6.2.9",
-    "@testing-library/jest-dom": "^5.11.9",
-    "@vue/test-utils": "^1.1.2",
-    "autoprefixer": "^10.2.6",
+    "@storybook/vue": "^6.5.16",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@vue/test-utils": "^1.3.4",
+    "autoprefixer": "^10.4.13",
     "babel-core": "^7.0.0-bridge.0",
     "babel-jest": "^27.0.1",
-    "babel-loader": "^8.2.2",
-    "core-js": "^3.8.3",
+    "babel-loader": "^8.3.0",
+    "core-js": "^3.27.2",
     "eslint": "^7.18.0",
     "eslint-plugin-jest": "^24.1.3",
     "eslint-plugin-vue": "^7.5.0",
-    "eslint-webpack-plugin": "^2.4.3",
+    "eslint-webpack-plugin": "^2.7.0",
     "jest": "^27.0.3",
-    "postcss": "^8.3.5",
+    "postcss": "^8.4.21",
     "react-is": "^17.0.1",
-    "sass": "^1.32.5",
-    "sass-loader": "^10.1.1",
+    "sass": "^1.58.0",
+    "sass-loader": "^10.4.1",
     "standard": "^16.0.3",
     "vue-jest": "^3.0.7",
-    "vue-loader": "^15.9.6",
-    "vue-template-compiler": "^2.6.14"
+    "vue-loader": "^15.10.1",
+    "vue-template-compiler": "^2.7.14"
   },
   "dependencies": {
-    "@quasar/extras": "^1.9.14",
+    "@quasar/extras": "^1.15.10",
     "autonumeric": "^4.6.0",
     "axios": "^0.21.1",
-    "date-fns": "^2.16.1",
+    "date-fns": "^2.29.3",
     "fuse.js": "^3.4.6",
     "humps": "^2.0.1",
     "lodash": "^4.17.21",
     "pica": "^7.1.0",
-    "quasar": "^1.15.0",
+    "quasar": "^1.22.5",
     "signature_pad": "^3.0.0-beta.4",
     "sortablejs": "^1.12.0",
-    "vue-router": "^3.4.9",
+    "vue-router": "^3.6.5",
     "vuex": "^3.6.0"
   },
   "peerDependencies": {
     "vue": "^2.6.14"
+  },
+  "engines": {
+    "node": ">= 10.18.1 <= 16",
+    "npm": ">= 6.13.4"
   }
 }

package/src/components/filters/QasFilters.stories.js

@@ -31,6 +31,14 @@ export default {
       description: '[VuexStoreModule](https://github.com/bildvitta/vuex-store-module) entity.'
     },
 
+    fieldsEvents: {
+      description: 'Defines each field events.'
+    },
+
+    fieldsProps: {
+      description: 'Defines each field props.'
+    },
+
     noFilterButton: {
       description: 'Hides filter button.'
     },

package/src/components/filters/QasFilters.vue

@@ -27,7 +27,7 @@
 
             <q-form v-else class="q-gutter-y-md q-pa-md" @submit.prevent="filter()">
               <div v-for="(field, index) in fields" :key="index">
-                <qas-field v-model="filters[field.name]" dense :field="field" />
+                <qas-field dense :field="field" :value="filters[field.name]" v-bind="fieldsProps[field.name]" v-on="fieldsEvents[field.name]" @input="emitter(field.name, $event)" />
               </div>
 
               <div class="text-right">
@@ -51,6 +51,7 @@
 <script>
 import QasField from '../field/QasField'
 
+import { isNil, isEmpty } from 'lodash'
 import { camelize, camelizeKeys } from 'humps'
 import { humanize, parseValue } from '../../helpers/filters'
 import contextMixin from '../../mixins/context'
@@ -73,6 +74,16 @@ export default {
       type: String
     },
 
+    fieldsProps: {
+      default: () => ({}),
+      type: Object
+    },
+
+    fieldsEvents: {
+      default: () => ({}),
+      type: Object
+    },
+
     noFilterButton: {
       default: false,
       type: Boolean
@@ -100,6 +111,11 @@ export default {
 
     forceRefetch: {
       type: Boolean
+    },
+
+    value: {
+      default: () => ({}),
+      type: Object
     }
   },
 
@@ -127,7 +143,9 @@ export default {
         const hasField = fields.includes(key)
 
         if (hasField) {
-          const value = humanize(this.fields[key], this.normalizeValues(filters[key], this.fields[key]?.multiple))
+          const field = { ...this.fields[key], ...this.fieldsProps?.[key] }
+
+          const value = humanize(field, this.normalizeValues(filters[key], this.fields[key]?.multiple))
           const { label, name } = this.fields[key]
 
           activeFilters[key] = { label, name, value }
@@ -184,10 +202,25 @@ export default {
       this.updateValues()
     },
 
+    '$route.query': {
+      immediate: true,
+      handler () {
+        this.$emit('input', this.context.filters)
+      }
+    },
+
     search () {
       if (this.debounce) {
         this.filter()
       }
+    },
+
+    value: {
+      immediate: true,
+      deep: true,
+      handler (value) {
+        this.filters = value
+      }
     }
   },
 
@@ -275,6 +308,11 @@ export default {
       this.search = search || ''
 
       for (const key in filters) {
+        if (isEmpty(filters[key]) || isNil(filters[key])) {
+          delete filters[key]
+          continue
+        }
+
         this.$set(this.filters, key, parseValue(this.normalizeValues(filters[key], this.fields[key]?.multiple)))
       }
     },
@@ -292,6 +330,11 @@ export default {
           watchOnce()
         }
       })
+    },
+
+    emitter (key, value) {
+      this.filters[key] = value
+      this.$emit('input', this.filters)
     }
   }
 }

package/src/components/form-view/QasFormView.stories.js

@@ -33,6 +33,10 @@ export default {
 
   argTypes: {
     // Props
+    beforeFetch: {
+      description: 'Function to be called before fetching data.'
+    },
+
     cancelButton: {
       description: 'Cancel button label.'
     },
@@ -80,6 +84,10 @@ export default {
       description: 'Submit button label.'
     },
 
+    beforeSubmit: {
+      description: 'Function to be called before submit.'
+    },
+
     url: {
       control: null,
       description: 'Ignore entity and specify another endpoint.'

package/src/components/form-view/QasFormView.vue

@@ -4,7 +4,7 @@
       <slot :errors="errors" :fields="fields" :metadata="metadata" name="header" />
     </header>
 
-    <q-form ref="form" @submit="submit">
+    <q-form ref="form" @submit="submitHandler">
       <slot :errors="errors" :fields="fields" :metadata="metadata" />
 
       <slot v-if="!readOnly" :errors="errors" :fields="fields" :metadata="metadata" name="actions">
@@ -13,7 +13,7 @@
             <qas-btn v-close-popup="dialog" class="full-width" :data-cy="`btnCancel-${entity}`" :disable="isCancelButtonDisabled" :label="cancelButton" outline type="button" @click="cancel" />
           </div>
           <div class="col-12 col-sm-2" :class="saveButtonClass">
-            <qas-btn class="full-width" :data-cy="`btnSave-${entity}`" :disable="disable" :label="submitButton" :loading="isSubmiting" type="submit" />
+            <qas-btn class="full-width" :data-cy="`btnSave-${entity}`" :disable="disable" :label="submitButton" :loading="isSubmitting" type="submit" />
           </div>
         </div>
       </slot>
@@ -95,6 +95,11 @@ export default {
       type: String
     },
 
+    beforeSubmit: {
+      default: null,
+      type: Function
+    },
+
     value: {
       default: () => ({}),
       type: Object
@@ -105,7 +110,7 @@ export default {
     return {
       cachedResult: {},
       hasResult: false,
-      isSubmiting: false,
+      isSubmitting: false,
       showDialog: false,
 
       dialogConfig: {
@@ -181,7 +186,7 @@ export default {
   },
 
   created () {
-    this.fetch()
+    this.fetchHandler({ form: true, id: this.id, url: this.fetchURL }, this.fetchSingle)
   },
 
   methods: {
@@ -203,14 +208,18 @@ export default {
       }
     },
 
-    async fetch (params) {
+    async fetchSingle (externalPayload = {}) {
       this.isFetching = true
 
-      try {
-        const response = await this.$store.dispatch(
-          `${this.entity}/fetchSingle`, { form: true, id: this.id, params, url: this.fetchURL }
-        )
+      const payload = {
+        form: true,
+        id: this.id,
+        url: this.fetchURL,
+        ...externalPayload
+      }
 
+      try {
+        const response = await this.$store.dispatch(`${this.entity}/fetchSingle`, payload)
         const { errors, fields, metadata, result } = response.data
 
         this.setErrors(errors)
@@ -264,22 +273,33 @@ export default {
       this.showDialog = true
     },
 
-    async submit (event) {
+    submitHandler (event) {
       if (event) {
         event.preventDefault()
       }
 
-      if (this.disable || this.readyOnly) {
+      const hasBeforeSubmit = typeof this.beforeSubmit === 'function'
+
+      if (hasBeforeSubmit) {
+        return this.beforeSubmit({
+          params: { id: this.id, payload: this.value, url: this.url },
+          resolve: payload => this.submit(payload)
+        })
+      }
+
+      this.submit()
+    },
+
+    async submit (externalPayload = {}) {
+      if (this.disable) {
         return null
       }
 
-      this.isSubmiting = true
+      this.isSubmitting = true
 
       try {
-        const response = await this.$store.dispatch(
-          `${this.entity}/${this.mode}`,
-          { id: this.id, payload: this.value, url: this.url }
-        )
+        const payload = { id: this.id, payload: this.value, url: this.url, ...externalPayload }
+        const response = await this.$store.dispatch(`${this.entity}/${this.mode}`, payload)
 
         if (this.showDialogOnUnsavedChanges) {
           this.cachedResult = cloneDeep(this.value)
@@ -301,7 +321,7 @@ export default {
 
         this.$emit('submit-error', error)
       } finally {
-        this.isSubmiting = false
+        this.isSubmitting = false
       }
     }
   }

package/src/components/list-view/QasListView.stories.js

@@ -41,6 +41,10 @@ export default {
 
   argTypes: {
     // Props
+    beforeFetch: {
+      description: 'Function to be called before fetching data.'
+    },
+
     dialog: {
       description: 'Use when the component is inside a dialog.'
     },
@@ -67,6 +71,10 @@ export default {
       description: 'Ignore entity and specify another endpoint.'
     },
 
+    useResultsAreaOnly: {
+      description: 'Controls whether results will always be displayed regardless of there are no results to be displayed.'
+    },
+
     // Events
     'fetch-error': {
       description: 'Fires when occur an error fetching value.',

package/src/components/list-view/QasListView.vue

@@ -10,7 +10,7 @@
       </slot>
 
       <main class="relative-position">
-        <div v-if="hasResults">
+        <div v-if="showResults">
           <slot :fields="fields" :metadata="metadata" :results="results" />
         </div>
 
@@ -67,6 +67,10 @@ export default {
     filtersProps: {
       default: () => ({}),
       type: Object
+    },
+
+    useResultsAreaOnly: {
+      type: Boolean
     }
   },
 
@@ -77,11 +81,6 @@ export default {
   },
 
   computed: {
-    context () {
-      const { limit, ordering, page, search, ...filters } = this.$route.query
-      return { filters, limit, ordering, page: page ? parseInt(page) : 1, search }
-    },
-
     hasHeaderSlot () {
       return !!(this.$slots.header || this.$scopedSlots.header)
     },
@@ -98,6 +97,10 @@ export default {
       return this.$store.getters[`${this.entity}/list`]
     },
 
+    showResults () {
+      return this.hasResults || (this.useResultsAreaOnly && !this.isFetching)
+    },
+
     totalPages () {
       return this.$store.getters[`${this.entity}/totalPages`]
     }
@@ -105,13 +108,13 @@ export default {
 
   watch: {
     $route () {
-      this.fetchList()
+      this.onFetchHandler()
       this.setCurrentPage()
     }
   },
 
   created () {
-    this.fetchList()
+    this.onFetchHandler()
     this.setCurrentPage()
   },
 
@@ -148,13 +151,17 @@ export default {
     },
 
     async refresh (done) {
-      await this.fetchList()
+      await this.onFetchHandler()
 
       if (typeof done === 'function') {
         done()
       }
     },
 
+    async onFetchHandler () {
+      await this.fetchHandler({ ...this.context, url: this.url }, this.fetchList)
+    },
+
     setCurrentPage () {
       this.page = parseInt(this.$route.query.page || 1)
     }

package/src/components/select/QasSelect.vue

@@ -12,14 +12,6 @@
       </slot>
     </template>
 
-    <template #hint>
-      <slot name="hint">
-        <div v-if="isLoading" class="q-pb-sm">
-          Buscando por opções...
-        </div>
-      </slot>
-    </template>
-
     <template #no-option>
       <slot v-if="!isLoading" name="no-option">
         <q-item>
@@ -75,7 +67,7 @@ export default {
 
     value: {
       default: () => [],
-      type: [Array, Object, String, Number]
+      type: [Array, Object, String, Number, Boolean]
     },
 
     valueKey: {

package/src/components/single-view/QasSingleView.stories.js

@@ -33,6 +33,10 @@ export default {
 
   argTypes: {
     // Props
+    beforeFetch: {
+      description: 'Function to be called before fetching data.'
+    },
+
     customId: {
       control: null,
       description: 'Sets a custom id to `entity`. When not set, will use the `:id` route param.'

package/src/components/single-view/QasSingleView.vue

@@ -57,7 +57,7 @@ export default {
 
   watch: {
     $route () {
-      this.fetchSingle()
+      this.onFetchHandler()
     },
 
     result (value) {
@@ -66,7 +66,7 @@ export default {
   },
 
   created () {
-    this.fetchSingle()
+    this.onFetchHandler()
   },
 
   methods: {
@@ -94,6 +94,10 @@ export default {
       } finally {
         this.isFetching = false
       }
+    },
+
+    async onFetchHandler () {
+      await this.fetchHandler({ id: this.id, url: this.url }, this.fetchSingle)
     }
   }
 }

package/src/mixins/view.js

@@ -5,6 +5,11 @@ import { NotifyError } from '../plugins'
 
 export default {
   props: {
+    beforeFetch: {
+      default: null,
+      type: Function
+    },
+
     dialog: {
       type: Boolean
     },
@@ -22,10 +27,10 @@ export default {
 
   data () {
     return {
+      cancelBeforeFetch: false,
       errors: {},
       fields: {},
       metadata: {},
-
       isFetching: false
     }
   },
@@ -59,6 +64,22 @@ export default {
       }
     },
 
+    fetchHandler (payload, resolve) {
+      const hasBeforeFetch = typeof this.beforeFetch === 'function'
+
+      if (hasBeforeFetch && !this.cancelBeforeFetch) {
+        return this.beforeFetch({
+          payload,
+          resolve: payload => resolve(payload),
+          done: () => {
+            this.cancelBeforeFetch = true
+          }
+        })
+      }
+
+      resolve()
+    },
+
     setErrors (errors = {}) {
       this.errors = errors
     },