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

package/package.json

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

package/src/components/filters/QasFilters.vue

@@ -4,10 +4,10 @@
       <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" @clear="clearSearch" @filter="filter()" @update:model-value="onSearch">
+            <qas-search-input v-model="internalSearch" :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" />
+                  <pv-filters-button v-if="useFilterButton" ref="filtersButton" v-model="internalFilters" v-bind="filterButtonProps" />
                 </slot>
               </template>
             </qas-search-input>
@@ -17,7 +17,7 @@
 
       <div v-else-if="showFilterButton" class="col-12 col-md-6">
         <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" />
+          <pv-filters-button v-if="useFilterButton" ref="filtersButton" v-model="internalFilters" v-bind="filterButtonProps" />
         </slot>
       </div>
 
@@ -73,6 +73,11 @@ export default {
       type: Object
     },
 
+    filters: {
+      default: () => ({}),
+      type: Object
+    },
+
     useFilterButton: {
       default: true,
       type: Boolean
@@ -113,15 +118,26 @@ export default {
     }
   },
 
-  emits: ['fetch-success', 'fetch-error', 'update:currentFilters'],
+  emits: [
+    'fetch-success',
+    'fetch-error',
+    'update:currentFilters',
+    'update:filters'
+  ],
 
   data () {
     return {
       currentFilters: {},
-      filters: {},
       hasFetchError: false,
+      internalFilters: {},
+      internalSearch: '',
       isFetching: false,
-      search: ''
+      /**
+       * O objeto funciona como um auxiliar para armazenar opções selecionadas do lazy loading.
+       * Isso é necessário porque, por padrão, não há opções no campo. As opções selecionadas servem
+       * para exibir as "tags" dos filtros ativos na tela.
+      */
+      lazyLoadingSelectedOptions: {}
     }
   },
 
@@ -155,15 +171,32 @@ export default {
     },
 
     formattedFieldsProps () {
-      const fieldsProps = {}
+      const formattedFieldsProps = {}
 
-      for (const key in this.fieldsProps) {
+      for (const key in this.fields) {
         const decamelizedFieldKey = decamelize(key)
+        const fieldsProps = this.fieldsProps[key] || {}
+
+        /**
+         * Aqui é onde se encontra a tratativa para campos lazy loading. É atribuída a prop useFetchOptionsOnFocus
+         * por padrão. Ela é necessária pois toda vez que o menu do filtro é aberto é criado uma nova instância
+         * e quando é fechado é destruída essa instância. O que causa que toda vez que abrir novamente o menu,
+         * irá bater todos os endpoints de lazy loading.
+         * Aqui também é escutado pelo evento onUpdate:selectedOptions, esse evento irá trazer as opções selecionadas
+         * e elas serão salvas na chave lazyLoadingSelectedOptions para serem utilizadas posteriormente nas tags.
+        */
+        const hasLazyLoading = this.fields[key].useLazyLoading || fieldsProps.useLazyLoading
+        const lazyLoadingProps = hasLazyLoading ? {
+          useFetchOptionsOnFocus: true,
+          'onUpdate:selectedOptions': options => {
+            this.lazyLoadingSelectedOptions[key] = options
+          }
+        } : {}
 
-        fieldsProps[decamelizedFieldKey] = { ...this.fieldsProps[key] }
+        formattedFieldsProps[decamelizedFieldKey] = Object.assign(fieldsProps, lazyLoadingProps)
       }
 
-      return fieldsProps
+      return formattedFieldsProps
     },
 
     fields () {
@@ -187,6 +220,16 @@ export default {
         fields: this.fields,
         fieldsProps: this.formattedFieldsProps,
         loading: this.isFetching,
+        menuProps: {
+          /**
+           * O tratamento no onHide do menu é que como o menu é recriado toda vez que o filtro é aberto, ocorre que as
+           * opções selecionadas anteriormente (e que não foram filtradas) não ficam salvas na memória, ocasionando em
+           * campos lazy loading um problema de exibir o uuid da opção por não achar essa opção no array de options do field.
+           * Para solucionar esse problema, sempre ao fechar os filtros as opções não filtradas são removidas,
+           * voltando o filtro para o seu estado anterior.
+          */
+          onHide: this.setInternalFilters
+        },
 
         onClear: this.clearFilters,
         onFilter: () => this.filter()
@@ -224,6 +267,17 @@ export default {
         this.fetchFilters()
         this.useUpdateRoute && this.updateValues()
       }
+    },
+
+    internalFilters: {
+      handler (value) {
+        this.$emit('update:filters', value)
+      },
+      deep: true
+    },
+
+    filters (value) {
+      this.internalFilters = value
     }
   },
 
@@ -232,10 +286,8 @@ export default {
 
     if (this.useUpdateRoute) {
       this.updateValues()
-      this.updateCurrentFilters()
+      this.onUpdateFilters()
     }
-
-    this.handleSearchModelOnCreate()
   },
 
   methods: {
@@ -244,7 +296,7 @@ export default {
       const query = { ...this.$route.query }
       const activeFilters = {
         ...filters,
-        ...this.filters
+        ...this.internalFilters
       }
 
       if (this.hasFields) {
@@ -256,22 +308,22 @@ export default {
 
           if (hasField) {
             delete query[key]
-            delete this.filters[key]
+            delete this.internalFilters[key]
           }
         }
       } else {
-        this.filters = {}
+        this.internalFilters = {}
       }
 
       this.hideFiltersMenu()
 
       await this.updateRouteQuery(query)
 
-      this.updateCurrentFilters()
+      this.onUpdateFilters()
     },
 
     clearSearch () {
-      this.search = ''
+      this.internalSearch = ''
       this.filter()
     },
 
@@ -283,11 +335,13 @@ export default {
       this.hasFetchError = false
       this.isFetching = true
 
+      const { filters } = this.mx_context
+
       try {
         const response = await getAction.call(this, {
           entity: this.entity,
           key: 'fetchFilters',
-          payload: { url: this.url }
+          payload: { url: this.url, params: filters }
         })
 
         this.$emit('fetch-success', response)
@@ -308,10 +362,10 @@ export default {
 
       const query = {
         ...filters,
-        ...this.filters,
+        ...this.internalFilters,
         ...external,
         ...context,
-        search: this.search || undefined
+        search: this.internalSearch || undefined
       }
 
       for (const key in query) {
@@ -322,7 +376,7 @@ export default {
 
       await this.updateRouteQuery(query)
 
-      this.updateCurrentFilters()
+      this.onUpdateFilters()
     },
 
     getChipValue (value) {
@@ -333,21 +387,36 @@ export default {
       this.$refs.filtersButton?.hideMenu()
     },
 
+    setInternalFilters () {
+      this.internalFilters = { ...this.currentFilters }
+    },
+
+    setSelectFieldOptions () {
+      for (const key in this.lazyLoadingSelectedOptions) {
+        this.fields[key].options = this.lazyLoadingSelectedOptions[key]
+      }
+    },
+
     async removeFilter ({ name }) {
       const query = { ...this.$route.query }
 
       delete query[name]
-      delete this.filters[name]
+      delete this.internalFilters[name]
 
       await this.updateRouteQuery(query)
 
-      this.updateCurrentFilters()
+      this.onUpdateFilters()
     },
 
-    updateCurrentFilters () {
+    onUpdateFilters () {
+      this.setCurrentFilters()
+      this.setSelectFieldOptions()
+    },
+
+    setCurrentFilters () {
       this.currentFilters = {
-        ...this.filters,
-        ...(this.search && { search: this.search })
+        ...this.internalFilters,
+        ...(this.internalSearch && { search: this.internalSearch })
       }
 
       this.$emit('update:currentFilters', this.currentFilters)
@@ -368,12 +437,6 @@ export default {
       return isMultiple ? [value] : value
     },
 
-    handleSearchModelOnCreate () {
-      if (this.useUpdateRoute && !this.useFilterButton) {
-        this.setSearch()
-      }
-    },
-
     onSearch () {
       if (this.useSearchOnType) {
         this.filter()
@@ -382,16 +445,17 @@ export default {
 
     setSearch () {
       const { search } = this.mx_context
-      this.search = search || ''
+
+      this.internalSearch = search || ''
     },
 
     setFilters () {
-      this.filters = {}
+      this.internalFilters = {}
 
       const { filters } = this.mx_context
 
       for (const key in filters) {
-        this.filters[key] = parseValue(this.normalizeValues(filters[key], this.fields[key]?.multiple))
+        this.internalFilters[key] = parseValue(this.normalizeValues(filters[key], this.fields[key]?.multiple))
       }
     }
   }

package/src/components/filters/QasFilters.yml

@@ -22,6 +22,13 @@ props:
     type: Object
     examples: ["{ name: { dense: true, onClick: () => alert('Estou sendo clicado') } }"]
 
+  filters:
+    model: true
+    desc: Diferente do model "currentFilters" que controla os filtros realizado, este model controla os filtros que ainda não foram realizados.
+    default: {}
+    type: Object
+    examples: [v-model:filters="filters"]
+
   search-placeholder:
     desc: Placeholder do campo de busca.
     default: Pesquisar...

package/src/components/filters/private/PvFiltersButton.vue

@@ -1,6 +1,6 @@
 <template>
   <qas-btn :color="color" data-cy="filters-btn" icon="sym_r_tune" variant="tertiary">
-    <q-menu ref="menu" anchor="center right" class="full-width" max-width="270px" self="top right">
+    <q-menu ref="menu" anchor="center right" class="full-width" max-width="270px" self="top right" v-bind="menuProps">
       <div v-if="loading" class="q-pa-xl text-center">
         <q-spinner color="grey" size="2em" />
       </div>
@@ -66,6 +66,11 @@ export default {
       type: Boolean
     },
 
+    menuProps: {
+      default: () => ({}),
+      type: Object
+    },
+
     modelValue: {
       default: () => ({}),
       type: Object

package/src/components/grabbable/QasGrabbable.vue

@@ -0,0 +1,187 @@
+<template>
+  <div class="qas-grabbable relative-position">
+    <div
+      ref="grabContainer"
+      class="flex no-wrap qas-grabbable__container"
+      :class="classes"
+    >
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, ref, onMounted, onBeforeUnmount } from 'vue'
+import { setScrollOnGrab } from '../../helpers'
+
+defineOptions({ name: 'QasGrabbable' })
+
+const props = defineProps({
+  useScrollBar: {
+    type: Boolean
+  }
+})
+
+const emit = defineEmits(['grabbing'])
+
+const grabContainer = ref(null)
+const grabPosition = ref(null)
+const isGrabbing = ref(false)
+const scrollOnGrab = ref({})
+
+const classes = computed(() => {
+  const baseClass = 'qas-grabbable__container'
+
+  return [
+    {
+      [`${baseClass}--grabbing`]: isGrabbing.value,
+      [`${baseClass}--no-grab`]: !hasScrollOnGrab.value,
+      [`${baseClass}--no-scroll`]: !props.useScrollBar
+    },
+    `${baseClass}--grab-${grabPosition.value}`
+  ]
+})
+
+const hasScrollOnGrab = computed(() => !!Object.keys(scrollOnGrab.value).length)
+
+function handleEnableScrollOnGrab () {
+  const { scrollWidth, offsetWidth } = grabContainer.value
+
+  if (scrollWidth > offsetWidth) {
+    initScrollOnGrab()
+    setGrabPosition()
+
+    return
+  }
+
+  disableScrollOnGrab()
+}
+
+function initScrollOnGrab () {
+  if (hasScrollOnGrab.value) return
+
+  scrollOnGrab.value = setScrollOnGrab(grabContainer.value, {
+    onGrabFn: onGrab,
+    onMoveFn: setGrabPosition,
+    onScrollFn: setGrabPosition
+  })
+}
+
+function disableScrollOnGrab () {
+  if (!hasScrollOnGrab.value) return
+
+  scrollOnGrab.value.destroyEvents()
+  scrollOnGrab.value.element.style.cursor = 'auto'
+  scrollOnGrab.value = {}
+
+  grabPosition.value = null
+}
+
+function onGrab ({ isGrabbing: grabbing }) {
+  isGrabbing.value = grabbing
+
+  emit('grabbing', grabbing)
+}
+
+function setGrabPosition () {
+  const { offsetWidth, scrollLeft, scrollWidth } = grabContainer.value
+  const offset = 16
+
+  if (scrollLeft <= offset) {
+    /**
+     * Se o scroll estiver no início, o valor de `scrollLeft` será 0. No entanto,
+     * é necessário verificar se o valor de `scrollLeft` é menor ou igual a `offset`
+     * para garantir um espaço de segurança.
+     */
+    grabPosition.value = 'start'
+  } else if (scrollLeft + offsetWidth + offset >= scrollWidth) {
+    /**
+     * Se o scroll estiver no final, o valor de `scrollLeft` + `offsetWidth` será
+     * igual a `scrollWidth`. Porém, estamos levamos em consideração um espaço de
+     * segurança contido na variável `offset`.
+     */
+    grabPosition.value = 'end'
+  } else {
+    /**
+     * Se o scroll não estiver no início e nem no final, ele estará no meio.
+     */
+    grabPosition.value = 'middle'
+  }
+}
+
+onMounted(() => {
+  handleEnableScrollOnGrab()
+
+  window.addEventListener('resize', handleEnableScrollOnGrab)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', handleEnableScrollOnGrab)
+
+  disableScrollOnGrab()
+})
+</script>
+
+<style lang="scss">
+.qas-grabbable {
+  &__container {
+    -webkit-overflow-scrolling: touch;
+    -ms-overflow-style: none;
+    overflow-x: auto;
+    scrollbar-color: $blue-grey-3 transparent;
+
+    &::-webkit-scrollbar {
+      height: 12px;
+      background-color: transparent;
+    }
+
+    &::-webkit-scrollbar-track {
+      background-color: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background-color: $blue-grey-3;
+      border-radius: var(--qas-generic-border-radius);
+    }
+
+    &::-webkit-scrollbar-thumb:hover {
+      background-color: $blue-grey-4;
+    }
+
+    &::before,
+    &::after {
+      content: '';
+      width: 24px;
+      height: 100%;
+      position: absolute;
+      top: 0;
+      pointer-events: none;
+    }
+
+    &::before {
+      background: linear-gradient(-270deg, rgba($grey-1, 0.7) 0%, rgba(251, 251, 251, 0) 100%);
+      left: 0;
+    }
+
+    &::after {
+      background: linear-gradient(270deg, rgba($grey-1, 0.7) 0%, rgba(251, 251, 251, 0) 100%);
+      right: 0;
+    }
+
+    &--no-scroll {
+      scrollbar-width: none;
+
+      &::-webkit-scrollbar {
+        width: 0;
+      }
+    }
+
+    &--no-grab::before,
+    &--no-grab::after,
+    &--grab-start::before,
+    &--grab-end::after {
+      content: none !important;
+    }
+  }
+}
+</style>

package/src/components/grabbable/QasGrabbable.yml

@@ -0,0 +1,22 @@
+type: component
+
+meta:
+  desc: Componente de scroll em uma determinada área (elemento) ao realizar evento de grab (puxar/agarrar) com o mouse/touch.
+
+props:
+  use-scroll-bar:
+    desc: Se deve ou não usar a barra de rolagem.
+    default: false
+    type: Boolean
+
+slots:
+  default:
+    desc: Slot para ter o conteúdo que terá o scroll na horizontal.
+
+events:
+  '@grabbable -> function(grabbing)':
+    desc: Dispara toda vez que o "grab" é realizado.
+    params:
+      grabbing:
+        desc: Retorna se está ou não fazendo "grabbing".
+        type: Boolean

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

@@ -129,6 +129,14 @@ events:
         default: false
         type: Boolean
 
+  '@update:selectedOptions -> function (value)':
+    desc: Dispara toda vez que a lista de opções selecionadas é atualizada.
+    params:
+      value:
+        desc: Array com as opções selecionadas (label e value)
+        default: []
+        type: Array
+
   '@fetch-options-success -> function (value)':
     desc: Dispara toda vez que o campo de busca faz o fetch do lazy loading com sucesso.
     params:

package/src/components/select/QasSelect.vue

@@ -75,6 +75,10 @@ export default {
       type: Boolean
     },
 
+    useFetchOptionsOnFocus: {
+      type: Boolean
+    },
+
     useSearch: {
       type: Boolean,
       default: undefined
@@ -238,6 +242,10 @@ export default {
       this.isPopupContentOpen = true
       this.$emit('popup-show')
 
+      if (this.useFetchOptionsOnFocus && this.mx_fetchCount === 0) {
+        this.mx_setFetchOptions('')
+      }
+
       if (this.mx_isFetching) {
         this.togglePopupContentClass(true)
       }
@@ -246,7 +254,7 @@ export default {
     setLazyLoading () {
       this.mx_setCachedOptions('options')
 
-      if (this.useFetchOptionsOnCreate) this.mx_setFetchOptions('')
+      if (this.useFetchOptionsOnCreate && !this.useFetchOptionsOnFocus) this.mx_setFetchOptions('')
     },
 
     setSearchMethod () {

package/src/components/select/QasSelect.yml

@@ -86,6 +86,11 @@ props:
     default: true
     type: Boolean
 
+  use-fetch-options-on-focus:
+    desc: Controla se o componente vai fazer um fetch das opções assim que o mesmo é focado (caso tenha lazy loading ativado). Se essa opção estiver habilitada, o componente não vai fazer o fetch das opções assim que é criado, anulando a propriedade "useFetchOptionsOnCreate".
+    default: false
+    type: Boolean
+
   use-search:
     desc: Controla se vai ou não ter campo de busca no select.
     default: undefined
@@ -112,6 +117,14 @@ events:
         default: false
         type: Boolean
 
+  '@update:selectedOptions -> function (value)':
+    desc: Dispara toda vez que a lista de opções selecionadas é atualizada.
+    params:
+      value:
+        desc: Array com as opções selecionadas (label e value)
+        default: []
+        type: Array
+
   '@fetch-options-success -> function (value)':
     desc: Dispara toda vez que o campo de busca faz o fetch do lazy loading com sucesso.
     params:

package/src/components/table-generator/QasTableGenerator.vue

@@ -217,10 +217,6 @@ export default {
 
     hasScrollOnGrab () {
       return !!Object.keys(this.scrollOnGrab).length
-    },
-
-    isScrolling () {
-      return this.hasScrollOnGrab && this.scrollOnGrab.haveMoved()
     }
   },
 
@@ -299,18 +295,11 @@ export default {
       return {
         class: 'text-no-decoration text-grey-8 flex full-width items-center full-height',
         [this.useExternalLink ? 'href' : 'to']: this.rowRouteFn(row),
-        onClick: this.onRowClickHandler,
         ...(this.useExternalLink && { target: '_blank' })
       }
     },
 
-    onRowClickHandler (event) {
-      if (this.isScrolling) return event.preventDefault()
-    },
-
     onRowClick () {
-      if (this.isScrolling) return
-
       this.$attrs.onRowClick(...arguments)
     }
   }

package/src/components/table-generator/QasTableGenerator.yml

@@ -31,21 +31,21 @@ props:
     default: name
     type: String
 
-  use-scroll-on-grab:
-    desc: Adiciona scroll pelo mouse ao arrastar tabela em todas as telas (Celular, Desktop).
-    default: true
-    type: Boolean
-
   row-route-fn:
     desc: Usado quando há a necessidade de alteração de rota ao clicar em um item da tabela(a linha passa ser um <a> habilitando a opção de abrir em uma nova aba).
     type: Function
-    examples: ["() => ({ name: 'UsersList' })"]
+    examples: ["(row) => ({ path: 'table-generator', params: { id: row.uuid } })"]
 
   use-external-link:
     desc: Usado em conjunto com a prop "row-route-fn" quando há a necessidade da rota ser um link externo.
     default: false
     type: Boolean
 
+  use-scroll-on-grab:
+    desc: Adiciona scroll pelo mouse ao arrastar tabela em todas as telas (Celular, Desktop).
+    default: true
+    type: Boolean
+
   use-sticky-header:
     desc: Usado para manter o header da tabela (thead) fixo.
     default: false

package/src/helpers/set-scroll-on-grab.js

@@ -1,70 +1,112 @@
-export default function (element) {
-  setStyle()
+/**
+* Helper de scroll em uma determinada área (elemento) ao realizar evento de grab (puxar/agarrar) com o mouse/touch.
+*
+* @param {HTMLElement} element
+* @param {{
+*  onGrabFn: function({ element: HTMLElement, isGrabbing: boolean }),
+*  onMoveFn: function({ element: HTMLElement, event: MouseEvent | TouchEvent }),
+*  onScrollFn: function({ element: HTMLElement, event: Event })
+* }} options
+*
+* @returns {{ element: HTMLElement, destroyEvents: function }}
+*/
+export default function (element, options = {}) {
+  setModel()
 
   let isDown = false
-  let moved = false
   let startX
   let scrollLeft
 
-  element.addEventListener('mousedown', onMouseDown)
-  element.addEventListener('mouseleave', onMouseLeave)
-  element.addEventListener('mouseup', onMouseUp)
-  element.addEventListener('mousemove', onMouseMove)
+  const events = {
+    mousedown: onMouseEnter,
+    mouseleave: onLeave,
+    mousemove: onMouseMove,
+    mouseup: onLeave,
+    scroll: onScroll,
+    touchend: onLeave,
+    touchmove: onTouchMove,
+    touchstart: onEnter
+  }
+
+  addEvents()
+
+  function addEvents () {
+    Object.entries(events).forEach(([event, fn]) => element.addEventListener(event, fn))
+  }
+
+  function destroyEvents () {
+    Object.entries(events).forEach(([event, fn]) => element.removeEventListener(event, fn))
+  }
 
-  function onMouseDown (event) {
+  function onEnter () {
     isDown = true
-    moved = false
 
     element.classList.add('active')
+  }
+
+  function onMouseEnter (event) {
+    onEnter()
 
     startX = event.pageX - element.offsetLeft
     scrollLeft = element.scrollLeft
   }
 
-  function onMouseLeave () {
+  function onLeave () {
     isDown = false
 
     element.classList.remove('active')
-    setStyle()
-  }
 
-  function onMouseUp () {
-    isDown = false
-
-    element.classList.remove('active')
-    setStyle()
+    setModel()
   }
 
   function onMouseMove (event) {
     if (event) event.preventDefault()
+
     if (!isDown) return
 
-    setStyle('grabbing')
+    setModel('grabbing')
 
     const x = event.pageX - element.offsetLeft
     const walk = (x - startX) * 3 // scroll-fast
+
     element.scrollLeft = scrollLeft - walk
-    moved = true
+
+    options.onMoveFn?.({ element, event })
   }
 
-  function setStyle (model = 'grab') {
-    element.style.cursor = model
+  function onTouchMove (event) {
+    event = event.touches[0]
+
+    if (!isDown) return
+
+    setModel('grabbing')
+
+    options.onMoveFn?.({ element, event })
   }
 
-  function destroyEvents () {
-    element.removeEventListener('mousedown', onMouseDown)
-    element.removeEventListener('mouseleave', onMouseLeave)
-    element.removeEventListener('mouseup', onMouseUp)
-    element.removeEventListener('mousemove', onMouseMove)
+  function onScroll (event) {
+    options.onScrollFn?.({ element, event })
   }
 
-  function haveMoved () {
-    return moved
+  function setModel (model = 'grab') {
+    const isGrabbing = model === 'grabbing'
+
+    setStyles({ model, isGrabbing })
+
+    options.onGrabFn?.({ element, isGrabbing })
+  }
+
+  function setStyles ({ model, isGrabbing }) {
+    element.style.cursor = model
+
+    Array.from(element.children).forEach(child => {
+      child.classList.toggle('no-pointer-events', isGrabbing)
+      child.classList.toggle('non-selectable', isGrabbing)
+    })
   }
 
   return {
     element,
-    haveMoved,
     destroyEvents
   }
 }

package/src/mixins/search-filter.js

@@ -36,6 +36,7 @@ export default {
   emits: [
     'update:modelValue',
     'update:fetching',
+    'update:selectedOptions',
     'fetch-options-success',
     'fetch-options-error'
   ],
@@ -103,6 +104,10 @@ export default {
     }
   },
 
+  created () {
+    this.mx_registerSelectedOptionsEvent()
+  },
+
   methods: {
     async mx_filterOptionsByStore (search) {
       this.mx_resetFilter(search)
@@ -153,6 +158,7 @@ export default {
       this.mx_isScrolling = true
 
       const options = await this.mx_fetchOptions()
+
       this.mx_filteredOptions.push(...options)
 
       // this is to prevent the virtual-scroll event to be fired again
@@ -161,6 +167,12 @@ export default {
       })
     },
 
+    mx_decamelizeFieldName (fieldName) {
+      if (fieldName.includes('_')) return fieldName.replaceAll('_', '-')
+
+      return decamelize(fieldName, { separator: '-' })
+    },
+
     async mx_fetchOptions () {
       this.mx_fetchCount++
 
@@ -180,7 +192,7 @@ export default {
           key: 'fetchFieldOptions',
           payload: {
             url,
-            field: decamelizeFieldName ? decamelize(this.name, { separator: '-' }) : this.name,
+            field: decamelizeFieldName ? this.mx_decamelizeFieldName(this.name) : this.name,
             params: {
               ...params,
               search: this.mx_search,
@@ -322,6 +334,21 @@ export default {
       }
 
       return options
+    },
+
+    mx_registerSelectedOptionsEvent () {
+      if (!this.useLazyLoading) return
+
+      this.$watch('modelValue', values => {
+        if (!values) return this.$emit('update:selectedOptions', [])
+
+        const findOption = value => this.mx_filteredOptions.find(option => option.value === value)
+        const isArray = Array.isArray(values)
+
+        const selectedOptions = isArray ? values.map(findOption) : [findOption(values)]
+
+        this.$emit('update:selectedOptions', selectedOptions)
+      })
     }
   }
 }

package/src/vue-plugin.js

@@ -27,6 +27,7 @@ import QasFormGenerator from './components/form-generator/QasFormGenerator.vue'
 import QasFormView from './components/form-view/QasFormView.vue'
 import QasGallery from './components/gallery/QasGallery.vue'
 import QasGalleryCard from './components/gallery-card/QasGalleryCard.vue'
+import QasGrabbable from './components/grabbable/QasGrabbable.vue'
 import QasGridGenerator from './components/grid-generator/QasGridGenerator.vue'
 import QasHeaderActions from './components/header-actions/QasHeaderActions.vue'
 import QasInfiniteScroll from './components/infinite-scroll/QasInfiniteScroll.vue'
@@ -114,6 +115,7 @@ async function install (app) {
   app.component('QasFormView', QasFormView)
   app.component('QasGallery', QasGallery)
   app.component('QasGalleryCard', QasGalleryCard)
+  app.component('QasGrabbable', QasGrabbable)
   app.component('QasGridGenerator', QasGridGenerator)
   app.component('QasHeaderActions', QasHeaderActions)
   app.component('QasInfiniteScroll', QasInfiniteScroll)
@@ -203,6 +205,7 @@ export {
   QasFormView,
   QasGallery,
   QasGalleryCard,
+  QasGrabbable,
   QasGridGenerator,
   QasHeaderActions,
   QasInfiniteScroll,