@bildvitta/quasar-ui-asteroid 3.10.0-beta.7 → 3.10.0-beta.8

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bildvitta/quasar-ui-asteroid",
   "description": "Asteroid",
-  "version": "3.10.0-beta.7",
+  "version": "3.10.0-beta.8",
   "author": "Bild & Vitta <systemteam@bild.com.br>",
   "license": "MIT",
   "main": "dist/asteroid.cjs.min.js",
@@ -12,8 +12,7 @@
     "src"
   ],
   "scripts": {
-    "build": "npx rollup -c",
-    "dev": "cd dev && npm i && npm run dev && cd .."
+    "build": "npx rollup -c --bundleConfigAsCjs"
   },
   "publishConfig": {
     "access": "public",
@@ -28,34 +27,33 @@
     "components"
   ],
   "devDependencies": {
-    "@rollup/plugin-json": "^4.1.0",
-    "@rollup/plugin-replace": "^3.0.1",
-    "@rollup/plugin-url": "^6.1.0",
-    "@vue/compiler-sfc": "^3.2.31",
-    "autoprefixer": "^10.4.2",
-    "core-js": "^3.20.2",
-    "postcss": "^8.4.5",
-    "quasar": "^2.11.10",
-    "rimraf": "^3.0.2",
-    "rollup": "^2.66.0",
+    "@rollup/plugin-json": "^6.0.0",
+    "@rollup/plugin-replace": "^5.0.2",
+    "@rollup/plugin-url": "^8.0.1",
+    "@vue/compiler-sfc": "^3.3.4",
+    "autoprefixer": "^10.4.14",
+    "core-js": "^3.30.2",
+    "postcss": "^8.4.24",
+    "quasar": "^2.12.0",
+    "rimraf": "^5.0.1",
+    "rollup": "^3.23.1",
     "rollup-plugin-local-resolve": "^1.0.7",
-    "rollup-plugin-scss": "^3.0.0",
-    "rollup-plugin-terser": "^7.0.2",
+    "rollup-plugin-scss": "^4.0.0",
     "rollup-plugin-vue": "^6.0.0",
-    "sass": "^1.49.0"
+    "sass": "^1.62.1"
   },
   "dependencies": {
     "@bildvitta/store-adapter": "^1.0.0",
-    "@fawmi/vue-google-maps": "^0.9.4",
-    "autonumeric": "^4.6.0",
-    "axios": "^0.21.1",
-    "date-fns": "^2.28.0",
-    "fuse.js": "^6.5.3",
+    "@fawmi/vue-google-maps": "^0.9.79",
+    "autonumeric": "^4.9.0",
+    "axios": "^1.4.0",
+    "date-fns": "^2.30.0",
+    "fuse.js": "^6.6.2",
     "humps": "^2.0.1",
     "lodash-es": "^4.17.21",
     "pica": "^9.0.1",
-    "signature_pad": "^4.0.1",
-    "sortablejs": "^1.14.0"
+    "signature_pad": "^4.1.5",
+    "sortablejs": "^1.15.0"
   },
   "browserslist": [
     "defaults"

package/src/components/date-time-input/QasDateTimeInput.vue

@@ -233,7 +233,7 @@ export default {
       if (this.useDateOnly) return this.validateDateOnly(value)
       if (this.useTimeOnly) return this.validateTimeOnly(value)
 
-      const [date, time] = value?.split(' ')
+      const [date, time] = value?.split(' ') || []
 
       return this.validateDateOnly(date) || this.validateTimeOnly(time)
     },

package/src/components/filters/QasFilters.vue

@@ -4,7 +4,7 @@
       <div v-if="showSearch" class="col-12 col-md-6">
         <slot :filter="filter" name="search">
           <q-form v-if="useSearch" @submit.prevent="filter()">
-            <qas-search-input v-model="search" :placeholder="searchPlaceholder" :use-search-on-type="useSearchOnType" @filter="filter()" @update:model-value="onSearch">
+            <qas-search-input v-model="search" :placeholder="searchPlaceholder" :use-search-on-type="useSearchOnType" @clear="clearSearch" @filter="filter()" @update:model-value="onSearch">
               <template v-if="showFilterButton" #after-clear>
                 <slot :context="mx_context" :filter="filter" :filters="activeFilters" name="filter-button" :remove-filter="removeFilter">
                   <pv-filters-button v-if="useFilterButton" ref="filtersButton" v-model="filters" v-bind="filterButtonProps" />

package/src/components/gallery/QasGallery.vue

@@ -1,4 +1,3 @@
-
 <template>
   <div class="qas-gallery">
     <div class="q-col-gutter-md row">

package/src/components/search-box/QasSearchBox.vue

@@ -27,7 +27,7 @@
 <script>
 import { QInfiniteScroll } from 'quasar'
 import Fuse from 'fuse.js'
-
+import fuseConfig from '../../shared/fuse-config'
 import QasBox from '../box/QasBox.vue'
 import { searchFilterMixin } from '../../mixins'
 
@@ -139,8 +139,7 @@ export default {
 
     defaultFuseOptions () {
       return {
-        ignoreLocation: true,
-
+        ...fuseConfig,
         ...this.fuseOptions
       }
     },

package/src/components/search-box/QasSearchBox.yml

@@ -29,7 +29,7 @@ props:
     examples: ["{ keys: ['label'] }"]
     default:
       ignoreLocation: true
-      threshold: 0.6
+      threshold: 0.4
 
   height:
     desc: Define altura do box quando a lista não está vazia.

package/src/components/select/QasSelect.vue

@@ -29,8 +29,10 @@
 </template>
 
 <script>
+import { uid } from 'quasar'
 import { searchFilterMixin } from '../../mixins'
 import Fuse from 'fuse.js'
+import fuseConfig from '../../shared/fuse-config'
 
 export default {
   name: 'QasSelect',
@@ -69,21 +71,25 @@ export default {
     }
   },
 
-  emits: ['update:modelValue'],
+  emits: ['popup-hide', 'popup-show', 'update:modelValue', 'virtual-scroll'],
 
   data () {
     return {
-      fuse: null
+      fuse: null,
+      isPopupContentOpen: false
     }
   },
 
   computed: {
     attributes () {
       return {
+        class: 'qas-select',
         clearable: this.isSearchable,
         emitValue: true,
         mapOptions: true,
         outlined: true,
+        popupContentClass: this.popupContentClass,
+
         ...this.$attrs,
 
         error: this.hasError,
@@ -91,14 +97,20 @@ export default {
         loading: this.hasLoading,
         options: this.mx_filteredOptions,
         useInput: this.isSearchable,
+
         ...(this.isSearchable && { onFilter: this.onFilter }),
-        ...(this.useLazyLoading && { onVirtualScroll: this.mx_onVirtualScroll })
+
+        ...(this.useLazyLoading && {
+          onPopupHide: this.onPopupHide,
+          onPopupShow: this.onPopupShow,
+          onVirtualScroll: this.mx_onVirtualScroll
+        })
       }
     },
 
     defaultFuseOptions () {
       return {
-        ignoreLocation: true,
+        ...fuseConfig,
         keys: ['label', 'value'],
 
         ...this.fuseOptions
@@ -139,6 +151,10 @@ export default {
       set (value) {
         this.$emit('update:modelValue', value)
       }
+    },
+
+    popupContentClass () {
+      return `qas-select__popup-content-${uid()}`
     }
   },
 
@@ -162,6 +178,7 @@ export default {
 
   created () {
     this.setSearchMethod()
+    this.setIsFetchingWatcher()
   },
 
   methods: {
@@ -192,6 +209,30 @@ export default {
       this.mx_filteredOptions = this.mx_getNormalizedFuseResults(results)
     },
 
+    onPopupHide () {
+      this.isPopupContentOpen = false
+      this.$emit('popup-hide')
+    },
+
+    onPopupShow () {
+      this.isPopupContentOpen = true
+      this.$emit('popup-show')
+
+      if (this.mx_isFetching) {
+        this.togglePopupContentClass(true)
+      }
+    },
+
+    setIsFetchingWatcher () {
+      if (this.useLazyLoading) {
+        this.$watch('mx_isFetching', value => {
+          if (!this.isPopupContentOpen) return
+
+          this.togglePopupContentClass(value)
+        })
+      }
+    },
+
     setLazyLoading () {
       this.mx_setCachedOptions('options')
 
@@ -202,7 +243,33 @@ export default {
       if (this.useLazyLoading) return this.setLazyLoading()
 
       if (this.hasFuse) this.setFuse()
+    },
+
+    async togglePopupContentClass (force) {
+      await this.$nextTick()
+
+      const popupContentElement = document.querySelector(`.${this.popupContentClass}`)
+
+      if (popupContentElement) {
+        popupContentElement.classList.toggle('qas-select__is-fetching', force)
+      }
     }
   }
 }
 </script>
+
+<style lang="scss">
+.qas-select {
+  &__is-fetching {
+    cursor: not-allowed !important;
+
+    .q-virtual-scroll__content {
+      pointer-events: none;
+
+      .q-item {
+        color: $grey-6;
+      }
+    }
+  }
+}
+</style>

package/src/components/select/QasSelect.yml

@@ -27,7 +27,7 @@ props:
     default:
       ignoreLocation: true
       keys: [label, value]
-      threshold: 0.6
+      threshold: 0.4
 
   label-key:
     desc: O componente internamente espera receber na propriedade "options" um array de objeto contendo "label" e "value", caso o seu objeto não tenha "label" mas um "name" por exemplo, você pode definir esta prop "label-key" como "name".

package/src/mixins/search-filter.js

@@ -77,21 +77,19 @@ export default {
 
     mx_hasFilteredOptions () {
       return !!this.mx_filteredOptions.length
-    },
-
-    mx_isMultiple () {
-      return this.$attrs.multiple || this.$attrs.multiple === ''
     }
   },
 
   watch: {
-    lazyLoadingProps: {
-      handler (value, oldValue) {
-        if (isEqual(value, oldValue)) return
+    'lazyLoadingProps.params': {
+      handler (newParams, oldParams) {
+        if (isEqual(newParams, oldParams)) return
+
+        this.mx_cachedOptions = []
 
         this.mx_filterOptionsByStore('')
 
-        this.$emit('update:modelValue', this.mx_isMultiple ? [] : '')
+        this.$emit('update:modelValue', undefined)
       }
     }
   },
@@ -126,7 +124,8 @@ export default {
       }
     },
 
-    async mx_onVirtualScroll ({ index, ref }) {
+    async mx_onVirtualScroll (details) {
+      const { index, ref } = details
       const lastIndex = this.mx_filteredOptions.length - 1
 
       if (index === lastIndex && this.mx_canFetchOptions()) {
@@ -137,6 +136,8 @@ export default {
           ref.refresh(lastIndex)
         })
       }
+
+      this.$emit('virtual-scroll', details)
     },
 
     async mx_loadMoreOptions () {

package/src/shared/fuse-config.js

@@ -0,0 +1,4 @@
+export default {
+  ignoreLocation: true,
+  threshold: 0.4
+}