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

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.9",
   "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/QasDate.vue

@@ -27,6 +27,11 @@ export default {
       default: () => []
     },
 
+    eventColor: {
+      type: [String, Function],
+      default: ''
+    },
+
     mask: {
       type: String,
       default: MaskOptions.Dash,
@@ -79,7 +84,9 @@ export default {
 
   data () {
     return {
-      currentDate: {}
+      currentDate: {},
+      dateElement: null,
+      dateObserver: undefined
     }
   },
 
@@ -95,7 +102,6 @@ export default {
       return {
         class: this.classes,
         color: 'primary',
-        events: this.normalizedEvents,
         mask: this.mask,
         minimal: true,
         multiple: this.multiple,
@@ -103,7 +109,6 @@ export default {
         ref: 'date',
         style: this.styles,
         textColor: 'white',
-        eventColor: this.getEventColor,
 
         // events
         onNavigation: this.onNavigation,
@@ -116,14 +121,18 @@ export default {
       return ['qas-date', 'shadow-2', { 'qas-date--inative': this.useInactiveDates }]
     },
 
-    hasEvents () {
-      return !!Object.keys(this.events)?.length
-    },
-
     hasModelValue () {
       return this.multiple ? !!this.modelValue.length : !!this.modelValue
     },
 
+    isEventsCallback () {
+      return typeof this.events === 'function'
+    },
+
+    isEventColorCallback () {
+      return typeof this.eventColor === 'function'
+    },
+
     model: {
       get () {
         return this.modelValue
@@ -140,10 +149,6 @@ export default {
       }
     },
 
-    normalizedEvents () {
-      return this.useUnmaskEvents ? this.getUnmaskedList(this.events) : this.events
-    },
-
     normalizedOptions () {
       return this.useUnmaskOptions ? this.getUnmaskedList(this.options) : this.options
     }
@@ -151,20 +156,70 @@ export default {
 
   watch: {
     events () {
-      if (this.useInactiveDates) this.setInactiveEvents(this.currentDate)
+      this.setEvents(this.currentDate)
     }
   },
 
   mounted () {
+    this.dateElement = this.$refs.date.$el
+
+    // muda estilo da navegação
     this.setNewNavigatorDisplay()
 
-    if (this.useInactiveDates) {
-      this.currentDate = this.getCurrentDate()
-      this.setInactiveEvents(this.currentDate)
-    }
+    // observa as mudanças no DOM do QDate > .q-date__content
+    this.setObserveDate()
+
+    // seta data atual de acordo com a view do mês atual
+    this.setCurrentDate()
+
+    // seta os eventos, ativos e inativos
+    this.setEvents(this.currentDate)
+  },
+
+  unmounted () {
+    this.dateObserver.disconnect()
   },
 
   methods: {
+    createActiveEventElement (dayElement, eventElement) {
+      const buttonElement = dayElement.querySelector('.q-btn__content')
+
+      buttonElement?.appendChild?.(eventElement)
+    },
+
+    createCounterInactiveEventElement (dayElement, eventElement) {
+      const spanElement = document.createElement('span')
+      const [child] = dayElement.children
+
+      spanElement.setAttribute('data-event', true)
+      dayElement.setAttribute('data-has-inactive-event', true)
+
+      spanElement.classList.add('flex', 'items-center', 'justify-center', 'text-center')
+
+      child.setAttribute('data-day-content', child.textContent)
+
+      spanElement.appendChild(child)
+      spanElement.appendChild(eventElement)
+      dayElement.appendChild(spanElement)
+    },
+
+    createPointerEventElement (isInactive, currentColor, eventElement) {
+      const eventPointerElement = document.createElement('div')
+
+      eventPointerElement.classList.add(
+        'qas-date__event-pointer',
+        `bg-${isInactive ? 'grey-4' : currentColor || 'primary'}`
+      )
+
+      eventElement.appendChild(eventPointerElement)
+    },
+
+    getCurrentColor (date, color) {
+      return (
+        (this.isEventColorCallback ? this.eventColor(date) : this.eventColor) || color
+      )
+    },
+
     getCurrentDate () {
       const modelDate = this.multiple ? this.modelValue[0] : this.modelValue
       const extractedDate = this.hasModelValue ? date.extractDate(modelDate, this.mask) : new Date()
@@ -172,6 +227,10 @@ export default {
       return this.getDate(extractedDate)
     },
 
+    getCurrentEvent (date) {
+      return this.events.find(event => event.date === date)
+    },
+
     getDate (date) {
       return {
         year: date.getFullYear(),
@@ -193,6 +252,18 @@ export default {
       return extractedModel.includes(currentDate) ? 'white' : 'primary'
     },
 
+    getEventClasses (currentColor, hasCounter, isInactive) {
+      return [
+        'qas-date__event',
+
+        isInactive ? 'qas-date__event--inactive' : 'qas-date__event--active',
+
+        `text-${currentColor || (isInactive ? 'grey-4' : 'primary')}`,
+
+        hasCounter ? 'qas-date__event--counter' : 'qas-date__event--pointer'
+      ]
+    },
+
     getISODate (value) {
       if (!value || (this.multiple && !value.length)) return value
 
@@ -206,53 +277,145 @@ export default {
 
       return invalidTypes.includes(typeof list)
         ? list
-        : list.map(dateItem => asteroidDate(dateItem, 'yyyy/MM/dd'))
+        : list.map(item => asteroidDate(item, 'yyyy/MM/dd'))
+    },
+
+    getStatusDay ({ currentDay, index }) {
+      const status = {
+        isPrevious: false,
+        isNext: false,
+        isActiveMonthDay: false
+      }
+
+      if (currentDay > index) {
+        status.isPrevious = true
+
+        return status
+      }
+
+      if (index - 7 > currentDay) {
+        status.isNext = true
+
+        return status
+      }
+
+      status.isActiveMonthDay = true
+
+      return status
     },
 
-    async setInactiveEvents ({ year, month }) {
-      if (!this.hasEvents) return
+    getNormalizedYear ({ isNext, isPrevious, month, year }) {
+      if (isPrevious && month === 1) return year - 1
 
-      const previousMonth = month - 1
+      if (isNext && month === 12) return year + 1
 
-      const dateElement = this.$refs.date.$el
-      const inativeDays = dateElement.querySelectorAll('.q-date__calendar-item--fill')
-      const inativeList = Array.from(inativeDays)
+      return year
+    },
+
+    getNormalizedMonth ({ month, isPrevious, isNext }) {
+      if (isPrevious) return month === 1 ? (month = 12) : month - 1
 
-      let monthIncrement = 0
+      if (isNext) return month === 12 ? (month = 1) : month + 1
+
+      return month
+    },
 
-      inativeList.forEach((inativeElement, index) => {
-        const [child] = inativeElement.children
-        const previousDay = inativeList?.[index - 1]?.innerText || 0
-        const inactiveDay = child.innerText
+    resetInactiveEvents () {
+      const inactiveElementsToRemove = this.dateElement.querySelectorAll('[data-has-inactive-event]')
+
+      inactiveElementsToRemove.forEach(inactiveElement => {
+        const [element] = inactiveElement.children
+
+        const hasDayContent = element.querySelector('[data-day-content]')
+
+        if (hasDayContent) inactiveElement.append(hasDayContent)
+      })
+    },
+
+    resetEvents () {
+      if (this.useInactiveDates) this.resetInactiveEvents()
+
+      this.resetActiveEvents()
+    },
+
+    resetActiveEvents () {
+      const elementsToRemove = this.dateElement.querySelectorAll('[data-event]')
+
+      elementsToRemove.forEach(nodeElement => nodeElement.remove())
+    },
+
+    setCurrentDate (date) {
+      this.currentDate = date || this.getCurrentDate()
+    },
+
+    setEventClasses (currentColor, eventElement, hasCounter, isInactive) {
+      const classes = this.getEventClasses(currentColor, hasCounter, isInactive)
+
+      eventElement.classList.add(...classes)
+    },
+
+    setEvents ({ year, month }) {
+      if (!this.events.length || !year || !month) return
+
+      this.resetEvents()
+
+      const daysElement = this.dateElement.querySelectorAll('.q-date__calendar-days .q-date__calendar-item')
+      const daysElementList = Array.from(daysElement)
+
+      daysElementList.forEach((dayElement, index) => {
+        const [child] = dayElement.children
+
+        const day = child.textContent
+
+        const { isActiveMonthDay, isNext, isPrevious } = this.getStatusDay({ currentDay: day, index: index + 1 })
+
+        const normalizedYear = this.getNormalizedYear({ isNext, month, isPrevious, year })
+        const normalizedMonth = this.getNormalizedMonth({ isNext, isPrevious, month })
+        const newDate = date.buildDate({ year: normalizedYear, month: normalizedMonth, day })
+        const normalizedDate = asteroidDate(newDate, 'yyyy-MM-dd')
+
+        const currentEvent = this.isEventsCallback ? this.events(normalizedDate) : this.getCurrentEvent(normalizedDate)
+
+        const hasDisabledClass = dayElement.classList.contains('q-date__calendar-item--out')
+        const isInactive = !isActiveMonthDay || hasDisabledClass
 
         /*
-          * Se o dia anterior for 31 e o dia atual for 1, por exemplo, significa que estamos nos referindo ao próximo mês.
-          * Como o mês começa no mês anterior, por exemplo, em 31 de janeiro, o mês atual seria fevereiro.
-          * Portanto, o mês correspondente ao dia 1 seria março e, para alcançá-lo, seria necessário incrementar 2 meses.
+          * Se não tiver evento para o dia atual no loop ou
+          * a opção de eventos inativos estiver desabilitada e o dia atual do loop
+          * for referente ao mês anterior ou ao mês posterior, então retorna
         */
-        if (inactiveDay < previousDay) {
-          monthIncrement += 2
-        }
+        if (!currentEvent || (!this.useInactiveDates && !isActiveMonthDay)) return
 
-        const normalizedMonth = previousMonth + monthIncrement
-        const newDate = date.buildDate({ year, month: normalizedMonth, day: inactiveDay })
-        const normalizedDate = asteroidDate(newDate, 'yyyy/MM/dd')
+        const hasCounter = currentEvent.counter
 
-        const hasCallbackInactiveEvent = typeof this.events === 'function' && this.events(normalizedDate)
-        const hasArrayInactiveEvent = Array.isArray(this.events) && this.normalizedEvents.includes(normalizedDate)
+        const currentColor = this.getCurrentColor(normalizedDate, currentEvent?.color)
 
-        if (hasArrayInactiveEvent || hasCallbackInactiveEvent) {
-          const divElement = document.createElement('div')
-          divElement.classList.add('q-date__event', 'qas-date__event-inactive')
+        const eventElement = document.createElement('div')
 
-          inativeElement.appendChild(divElement)
+        eventElement.setAttribute('data-event', true)
+
+        dayElement.classList.add('qas-date__calendar-item-event')
+
+        this.setEventClasses(currentColor, eventElement, hasCounter, isInactive)
+
+        if (hasCounter) {
+          this.setTextCountEvent(eventElement, currentEvent)
+        } else {
+          this.createPointerEventElement(isInactive, currentColor, eventElement)
         }
+
+        if (isInactive) {
+          this.createCounterInactiveEventElement(dayElement, eventElement)
+
+          return
+        }
+
+        this.createActiveEventElement(dayElement, eventElement)
       })
     },
 
     setNewNavigatorDisplay () {
-      const dateElement = this.$refs.date.$el
-      const navigationElement = dateElement.querySelector('.q-date__navigation')
+      const navigationElement = this.dateElement.querySelector('.q-date__navigation')
       const navigationChildren = navigationElement?.children || []
 
       const nodesList = Array.from(navigationChildren)
@@ -275,27 +438,40 @@ export default {
       this.$nextTick(() => secondList.forEach(node => newSecondElement.appendChild(node)))
     },
 
-    async onNavigation (date) {
-      this.$emit('navigation', date)
+    setObserveDate () {
+      const element = this.dateElement.querySelector('.q-date__content')
+      const config = { childList: true, subtree: true }
 
-      /*
-        * O componente QDate usa um vue transition de 3ms, como estamos manipulando o DOM, precisamos esperar essa
-        * transição terminar para que possamos fazer a logica, com isto precisamos sempre ficar atentos a atualizações
-        * do componente QDate para assegurar que esta logica não quebre.
-      */
-      if (this.useInactiveDates) setTimeout(() => { this.setInactiveEvents(date) }, 350)
+      const callback = mutationList => {
+        mutationList.forEach(({ removedNodes, target }) => {
+          const [removedNode] = removedNodes
 
-      this.$nextTick(() => this.setNewNavigatorDisplay())
-    },
+          if (!removedNode) return
 
-    toNumberValues (objet) {
-      const normalizedObjet = {}
+          const hasCalendarDaysContainer = target.classList.contains('q-date__calendar-days-container')
+          const hasContent = target.classList.contains('q-date__content')
+          const hasMonths = removedNode.classList.contains('q-date__months')
 
-      for (const key in objet) {
-        normalizedObjet[key] = Number(objet[key])
+          if (hasCalendarDaysContainer || (hasContent && hasMonths)) {
+            this.setEvents(this.currentDate)
+          }
+        })
       }
 
-      return normalizedObjet
+      this.dateObserver = new MutationObserver(callback)
+      this.dateObserver.observe(element, config)
+    },
+
+    setTextCountEvent (eventElement, currentEvent) {
+      eventElement.innerText = `(${currentEvent.counter})`
+    },
+
+    async onNavigation (date) {
+      this.$emit('navigation', date)
+
+      this.setCurrentDate(date)
+
+      this.$nextTick(() => this.setNewNavigatorDisplay())
     }
   }
 }
@@ -307,18 +483,67 @@ export default {
   min-width: 100%;
   width: 100%;
 
-  &__event-inactive {
-    background-color: $grey-4;
-    bottom: 4px !important;
+  &__event {
+    @include set-typography($caption);
+
+    bottom: -6px;
+    color: $primary;
+    font-size: 10px !important;
+    height: 20px;
+    left: 50%;
+    position: absolute;
+    transform: translateX(-50%);
+    width: 100%;
+
+    &--pointer {
+      bottom: -6px;
+      display: flex;
+      justify-content: center;
+    }
+  }
+
+  &__event-pointer {
+    border-radius: 100%;
+    display: flex;
+    height: 6px;
+    justify-content: center;
+    margin-top: var(--qas-spacing-xs);
+    width: 6px;
   }
 
   &--inative {
     .q-date {
+      &__calendar-item--out,
       &__calendar-item--fill {
         @include set-typography($subtitle2);
 
         color: $grey-4;
         visibility: unset;
+
+        span {
+          height: 36px;
+          padding: var(--qas-spacing-xs);
+        }
+      }
+    }
+
+    .qas-date__event--inactive.qas-date__event--counter {
+      color: $grey-4 !important;
+    }
+  }
+
+  &__calendar-item-event {
+    .q-btn {
+      &.bg-primary span {
+        padding-bottom: 4px;
+      }
+
+      &.bg-primary .qas-date__event {
+        bottom: -2px;
+      }
+
+      &.bg-primary .qas-date__event--pointer {
+        bottom: -2px;
       }
     }
   }
@@ -358,12 +583,6 @@ export default {
       opacity: 1;
     }
 
-    &__event {
-      bottom: -1;
-      height: 6px;
-      width: 6px;
-    }
-
     &__months,
     &__years {
       .q-btn {
@@ -387,8 +606,9 @@ export default {
 
       .q-btn {
         border: 0;
+        border-radius: $generic-border-radius;
         box-shadow: none;
-        height: 30px !important;
+        height: 36px !important;
         min-height: 30px;
         min-width: 30px;
         transition: color var(--qas-generic-transition);
@@ -399,6 +619,14 @@ export default {
           display: none !important;
         }
 
+        &.bg-primary .qas-date__event--active {
+          color: white !important;
+        }
+
+        &.bg-primary .qas-date__event--active .qas-date__event-pointer {
+          background-color: white !important;
+        }
+
         &:hover {
           color: var(--q-primary-contrast);
         }

package/src/components/date/QasDate.yml

@@ -5,10 +5,15 @@ meta:
 
 props:
   events:
-    desc: Marcador de eventos do calendário (repassada para o quasar).
+    desc: Marcador de eventos do calendário.
     default: []
     type: [Array, Function]
 
+  event-color:
+    desc: Define a cor dos eventos.
+    default: ''
+    type: [String, Function]
+
   mask:
     desc: Máscara do model (repassada para o quasar).
     default: YYYY-MM-DD

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/grid-generator/QasGridGenerator.vue

@@ -1,13 +1,17 @@
 <template>
   <div :class="mx_classes">
-    <div v-for="(field, key) in formattedFields" :key="key" :class="mx_getFieldClass(key, true)">
-      <slot :field="slotValue[key]" :name="`field-${field.name}`">
-        <slot :field="slotValue[key]" name="header">
-          <header :class="headerClass" :data-cy="`grid-generator-${field.name}-field`">{{ field.label }}</header>
+    <div v-for="(field, key) in fieldsByResult" :key="key" :class="mx_getFieldClass(key, true)">
+      <slot :field="field" :name="`field-${field.name}`">
+        <slot :field="field" name="header">
+          <header :class="headerClass" :data-cy="`grid-generator-${field.name}-field`">
+            {{ field.label }}
+          </header>
         </slot>
 
-        <slot :field="slotValue[key]" name="content">
-          <div :class="contentClass" :data-cy="`grid-generator-${field.name}-result`">{{ resultsByFields[key] }}</div>
+        <slot :field="field" name="content">
+          <div :class="contentClass" :data-cy="`grid-generator-${field.name}-result`">
+            {{ field.formattedResult }}
+          </div>
         </slot>
       </slot>
     </div>
@@ -17,7 +21,6 @@
 <script>
 import { generatorMixin } from '../../mixins'
 import { humanize } from '../../helpers/filters'
-import { extend } from 'quasar'
 import { isObject } from 'lodash-es'
 
 export default {
@@ -54,15 +57,13 @@ export default {
 
   data () {
     return {
-      slotValue: {}
+      fieldsByResult: {}
     }
   },
 
   computed: {
     formattedFields () {
-      if (this.useEmptyResult) {
-        return this.fields
-      }
+      if (this.useEmptyResult) return this.fields
 
       const fields = {}
 
@@ -78,37 +79,41 @@ export default {
         }
       }
 
-      this.$qas.logger.group('QasGridGenerator - formattedFields', [fields])
-
       return fields
-    },
+    }
+  },
 
-    resultsByFields () {
-      return this.getResultsByFields()
+  watch: {
+    formattedFields: {
+      handler () {
+        this.setFieldsByResult()
+      },
+
+      immediate: true
     }
   },
 
   methods: {
-    getResultsByFields () {
-      const formattedResult = {}
-      const result = extend(true, {}, this.result)
+    getFieldsByResult () {
+      const result = { ...this.result }
+      const fieldsByResult = {}
 
       for (const key in result) {
-        if (this.formattedFields[key]?.type) {
-          formattedResult[key] = (
-            humanize(this.formattedFields[key], result[key]) || this.emptyResultText
-          )
-
-          this.slotValue[key] = {
-            ...this.formattedFields[key],
-            formattedResult: formattedResult[key]
-          }
+        const field = this.formattedFields[key] || {}
+
+        if (!field.type) continue
+
+        fieldsByResult[key] = {
+          ...field,
+          formattedResult: humanize(field, result[key]) || this.emptyResultText
         }
       }
 
-      this.$qas.logger.group('QasGridGenerator - getResultsByFields', [formattedResult])
+      return fieldsByResult
+    },
 
-      return formattedResult
+    setFieldsByResult () {
+      this.fieldsByResult = this.getFieldsByResult()
     }
   }
 }

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
+}