@bildvitta/quasar-ui-asteroid 3.17.0-beta.12 → 3.17.0-beta.14

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bildvitta/quasar-ui-asteroid",
   "description": "Asteroid",
-  "version": "3.17.0-beta.12",
+  "version": "3.17.0-beta.14",
   "author": "Bild & Vitta <systemteam@bild.com.br>",
   "license": "MIT",
   "main": "dist/asteroid.cjs.min.js",
@@ -54,7 +54,7 @@
     "lodash-es": "^4.17.21",
     "pica": "^9.0.1",
     "signature_pad": "^4.1.5",
-    "sortablejs": "^1.15.0"
+    "sortablejs": "^1.15.3"
   },
   "browserslist": [
     "defaults"

package/src/components/board-generator/QasBoardGenerator.vue

@@ -1,39 +1,40 @@
 <template>
-  <qas-grabbable class="qas-board-generator" use-scroll-bar>
+  <qas-grabbable class="qas-board-generator" v-bind="grabbableProps">
     <div class="no-wrap q-col-gutter-sm q-px-xl row">
       <div v-for="(header, index) in headers" :key="index" class="q-mr-sm">
-        <qas-box class="q-mb-md">
-          <slot :fields="getFieldsByHeader(header)" :header="header" name="header-column" />
+        <qas-box class="q-mb-md" v-bind="headerBoxProps">
+          <slot :fields="getFieldsByHeader(header)" :header="header" :index="index" name="header-column" />
         </qas-box>
 
-        <div ref="columnContainer" class="qas-board-generator__column secondary-scroll" :style="containerStyle">
-          <slot v-for="item in getItemsByHeader(header)" :fields="getFieldsByHeader(header)" :item="item" name="column-item" />
+        <div ref="columnContainer" class="qas-board-generator__column secondary-scroll" :data-header-key="getKeyByHeader(header)" :style="containerStyle">
+          <div v-for="item in getItemsByHeader(header)" :id="item[props.itemIdKey]" :key="item[props.itemIdKey]" class="qas-board-generator__item">
+            <slot :column-index="index" :fields="getFieldsByHeader(header)" :item="item" name="column-item" />
+          </div>
 
-          <div class="full-width justify-center q-mb-md q-mt-sm row">
+          <div class="full-width justify-center row">
             <qas-btn v-if="hasSeeMore(header)" icon="sym_r_add" label="Ver mais" :use-label-on-small-screen="false" variant="tertiary" @click="fetchColumn(header)" />
 
-            <q-spinner v-if="columnsLoading[getKeyByHeader(header)]" color="grey-4" size="3em" />
-
-            <qas-empty-result-text v-if="hasEmptyResultText(header)" />
+            <q-spinner v-if="columnsLoading[getKeyByHeader(header)]" class="q-mb-md" color="grey-4" size="3em" />
           </div>
+
+          <qas-empty-result-text v-if="hasEmptyResultText(header)" />
         </div>
       </div>
     </div>
+
+    <qas-dialog v-model="showConfirmDialog" v-bind="defaultConfirmDialogProps" />
   </qas-grabbable>
 </template>
 
 <script setup>
-import { ref, watch, computed, onMounted, markRaw, inject } from 'vue'
-import promiseHandler from '../../helpers/promise-handler'
+import QasDialog from '../dialog/QasDialog.vue'
 
-defineOptions({ name: 'QasBoardGenerator' })
+import { ref, watch, computed, onUnmounted, markRaw, inject, onMounted } from 'vue'
+import promiseHandler from '../../helpers/promise-handler'
 
-const columnContainer = ref(null)
-const columnsPagination = ref({})
-const columnsLoading = ref({})
-const columnsFieldsModel = ref({})
+import Sortable from 'sortablejs'
 
-const axios = inject('axios')
+defineOptions({ name: 'QasBoardGenerator' })
 
 const props = defineProps({
   headers: {
@@ -46,6 +47,11 @@ const props = defineProps({
     default: () => ({})
   },
 
+  headerBoxProps: {
+    type: Object,
+    default: () => ({})
+  },
+
   columnIdKey: {
     type: String,
     required: true
@@ -61,11 +67,21 @@ const props = defineProps({
     required: true
   },
 
+  confirmDialogProps: {
+    type: Object,
+    default: () => ({})
+  },
+
   height: {
     type: String,
     default: ''
   },
 
+  itemIdKey: {
+    type: String,
+    default: ''
+  },
+
   limitPerColumn: {
     type: Number,
     default: 12
@@ -76,11 +92,34 @@ const props = defineProps({
     default: '300px'
   },
 
+  sortableConfig: {
+    type: Object,
+    default: () => ({})
+  },
+
   useMarkRaw: {
     type: Boolean,
     default: true
   },
 
+  useDragAndDropX: {
+    type: Boolean
+  },
+
+  useDragAndDropY: {
+    type: Boolean
+  },
+
+  updatePositionUrl: {
+    type: String,
+    default: ''
+  },
+
+  updatePositionParams: {
+    type: Object,
+    default: () => ({})
+  },
+
   lazyLoadingFieldsKeys: {
     type: Array,
     default: () => []
@@ -92,28 +131,93 @@ const emit = defineEmits([
   'fetch-column-success',
   'fetch-column-error',
   'fetch-columns-success',
-  'fetch-columns-error'
+  'fetch-columns-error',
+  'update-success'
 ])
 
+defineExpose({ fetchColumns, fetchColumn, reset })
+
+// Inject
+const axios = inject('axios')
+
+const isFetchSuccessHeader = inject('isFetchListSucceeded', false)
+
+const isInsideListView = inject('isListView', false)
+
+// Refs
+const columnContainer = ref(null)
+const columnsPagination = ref({})
+const columnsLoading = ref({})
+const columnsFieldsModel = ref({})
+const showConfirmDialog = ref(false)
+const isDragging = ref(false)
+const isLoadingUpdatePosition = ref(false)
+
+/**
+ * Instâncias do sortable, que são utilizadas para realizar o destroy ao sair da página
+ */
+const sortableInstances = ref([])
+
+/**
+ * Callbacks que recebe o event de movimentação
+ */
+const onCancelDrop = ref(() => {})
+const onConfirmDrop = ref(() => {})
+
+/**
+ * Variável auxiliar que controla quando estou atualizando o header em caso de drag and drop
+ */
+const isUpdatingPosition = ref(false)
+
+// Consts
+const hasDragAndDrop = !!props.useDragAndDropX || !!props.useDragAndDropY
+
+const grabbableProps = {
+  useScrollBar: true,
+
+  ...(hasDragAndDrop && {
+    cancelMouseDownTarget: 'qas-board-generator__item'
+  })
+}
+
+// Watchers
+watch(
+  () => isFetchSuccessHeader.value,
+  value => {
+    /**
+     * isFetchSuccessHeader é uma variavel que pego do listView por inject/provide, no qual caso eu faça request do header e dê sucesso, eu chamo as demais funções.
+     * Valido se não houve sucesso na requisição do header ou se não é uma atualização de posição, para assim não bater novamente nas colunas apenas no header.
+     */
+    if (!value || isUpdatingPosition.value) return
+
+    fetchColumnsValues()
+  }
+)
+
 watch(
   () => props.headers,
   () => {
-    reset()
-    setColumnHeightContainer()
-    setColumnsPagination()
-    fetchColumns()
+    if (isUpdatingPosition.value) return
+
+    isUpdatingPosition.value = false
   }
 )
 
 watch(columnContainer, setColumnHeightContainer)
 
+// Lifecycles
 onMounted(() => {
-  setColumnsPagination()
-  fetchColumns()
+  /**
+   * Caso eu use o listView (valor pego por provide), a request é feito pelo watch quando se ocorre o sucesso do `fetchList`
+   */
+  if (isInsideListView) return
+
+  fetchColumnsValues()
 })
 
-defineExpose({ fetchColumns, fetchColumn, reset })
+onUnmounted(destroySortable)
 
+// Computeds
 const columnsResultsModel = computed({
   get () {
     return props.results
@@ -124,10 +228,32 @@ const columnsResultsModel = computed({
   }
 })
 
-const hasColumnsLength = computed(() => Object.keys(columnsResultsModel.value).length)
+const hasColumnsLength = computed(() => !!Object.keys(columnsResultsModel.value).length)
 
 const containerStyle = computed(() => `width: ${props.columnWidth};`)
 
+const hasConfirmDialogProps = computed(() => !!Object.keys(props.confirmDialogProps).length)
+
+const defaultConfirmDialogProps = computed(() => {
+  const defaultProps = {
+    ok: {
+      label: 'Confirmar',
+      onClick: onConfirmDrop.value,
+      loading: isLoadingUpdatePosition.value
+    },
+
+    cancel: {
+      onClick: onCancelDrop.value
+    }
+  }
+
+  return {
+    ...props.confirmDialogProps,
+    ...defaultProps
+  }
+})
+
+// functions
 /*
 * Setar o tamanho do container do board, onde deverá ser a altura passada via prop, ou o default será ocupar o maximo
 * de espaço que ele conseguir considerando a altura do container em relação ao topo.
@@ -157,6 +283,8 @@ async function fetchColumns () {
   }
 
   emit('fetch-columns-success')
+
+  if (hasDragAndDrop) handleElementsList()
 }
 
 /*
@@ -189,22 +317,25 @@ async function fetchColumn (header) {
     throw error
   }
 
-  /*
-  * exemplo de como columnsResultsModel irá ficar:
-  *
-  * {
-  *  '2024-02-15': [...],
-  *  '2024-02-16': [...]
-  * }
-  *
-  * onde cada item do objeto é uma coluna no board. O mesmo vale para "columnsFieldsModel", "columnsLoading" e
-  * "columnPagination", organizando os fields, loadings e o controle de paginação por chave identificadora do header.
-  */
+  const newValues = response.data?.results || []
+  const resultsModel = columnsResultsModel.value[headerKey] || []
+
   const newColumnValues = [
-    ...columnsResultsModel.value[headerKey] || [],
-    ...response.data?.results || []
+    ...resultsModel,
+    ...newValues
   ]
 
+  /**
+   * exemplo de como columnsResultsModel irá ficar:
+   *
+   * {
+   *  '2024-02-15': [...],
+   *  '2024-02-16': [...]
+   * }
+   *
+   * onde cada item do objeto é uma coluna no board. O mesmo vale para "columnsFieldsModel", "columnsLoading" e
+   * "columnPagination", organizando os fields, loadings e o controle de paginação por chave identificadora do header.
+   */
   columnsResultsModel.value[headerKey] = props.useMarkRaw ? markRaw(newColumnValues) : newColumnValues
 
   /*
@@ -293,8 +424,24 @@ function setColumnsPagination () {
   })
 }
 
+function fetchColumnsValues () {
+  reset()
+  setColumnHeightContainer()
+  setColumnsPagination()
+  fetchColumns()
+}
+
+/**
+ * Descricao:
+ * Exibe o texto quando:
+ * - Nao esta carregando a coluna
+ * - Nao tem itens na coluna
+ * - Nao estou fazendo o drag and drop
+ *
+ * @param {Object} header
+ */
 function hasEmptyResultText (header) {
-  return !columnsLoading.value[getKeyByHeader(header)] && !getItemsByHeader(header)?.length
+  return !columnsLoading.value[getKeyByHeader(header)] && !getItemsByHeader(header)?.length && !isDragging.value
 }
 
 /*
@@ -319,6 +466,221 @@ function getFieldsByHeader (header) {
 
   return columnsFieldsModel.value[headerKey] || {}
 }
+
+/**
+ * Loopa todos os itens da coluna com base no ref para pegar o elemento HTML e setar e instaciar o sortable.
+ */
+function handleElementsList () {
+  columnContainer.value.forEach((element, index) => {
+    const sortable = setSortable(element, index)
+
+    sortableInstances.value.push(sortable)
+  })
+}
+
+/**
+ * Descricao:
+ * Seta a instancia do sortable, no qual varia de acordo com as props passadas.
+ *
+ * @param {HTMLElement} element
+ * @param {Number} index
+ */
+function setSortable (element, index) {
+  const defaultSortableConfig = {
+    animation: 500,
+    swapThreshold: 1,
+    delay: 50,
+    delayOnTouchOnly: true,
+    emptyInsertThreshold: 0
+  }
+
+  /**
+   * Caso seja apenas drag and drop no eixo Y
+   */
+  const useOnlyDragAndDropY = !!props.useDragAndDropY && !props.useDragAndDropX
+
+  const sortable = new Sortable(element, {
+    sort: props.useDragAndDropY,
+
+    ...defaultSortableConfig,
+
+    ...props.sortableConfig,
+
+    group: useOnlyDragAndDropY ? `column-${index}` : 'shared',
+
+    direction: useOnlyDragAndDropY ? 'vertical' : 'horizontal',
+
+    onStart: toggleIsDragging,
+
+    onAdd: event => onDropCard(event),
+
+    ...(props.useDragAndDropY && {
+      onSort: event => onDropCard(event)
+    })
+  })
+
+  return sortable
+}
+
+function toggleIsDragging () {
+  isDragging.value = !isDragging.value
+}
+
+function onDropCard (event) {
+  onCancelDrop.value = () => cancelDrop(event)
+
+  onConfirmDrop.value = () => confirmDrop(event)
+
+  hasConfirmDialogProps.value
+    ? openConfirmDialog()
+    : confirmDrop(event)
+}
+
+function openConfirmDialog () {
+  showConfirmDialog.value = true
+}
+
+function closeConfirmDialog () {
+  showConfirmDialog.value = false
+}
+
+/**
+ * @param {event} event
+ */
+function cancelDrop (event) {
+  /**
+   * Insere na posição antiga que pertencia (event.oldIndex) dentro do seu antigo pai (event.from)
+   */
+  if (props.useDragAndDropX) event.from.insertBefore(event.item, event.from.children[event.oldIndex])
+
+  if (props.useDragAndDropY) {
+    const oldIndex = event.oldIndex
+
+    /**
+     * Se oldIndex for 0, o targetIndex deverá ser 0, pois isso indica que se o item é o primeiro da lista, ele não será movido para outra posição.
+     *
+     * Caso o oldIndex for diferente, devo incrementar 1 para adicionar, pois isso permite que o item seja inserido logo após sua posição original.
+     */
+    const targetIndex = oldIndex === 0 ? oldIndex : oldIndex + 1
+
+    /**
+     * Verifica se o índice alvo é válido, caso contrário, define como o final
+     */
+    const insertBeforeElement = targetIndex < event.from.children.length
+      ? event.from.children[targetIndex]
+      : null
+
+    event.from.insertBefore(event.item, insertBeforeElement)
+  }
+
+  if (hasConfirmDialogProps.value) closeConfirmDialog()
+
+  toggleIsDragging()
+}
+
+function confirmDrop (event) {
+  const { from, to, item: { id: itemId } } = event
+
+  const { headerKey: newHeaderKey } = to.dataset
+  const { headerKey: oldHeaderKey } = from.dataset
+
+  updatePosition({ newHeaderKey, oldHeaderKey, itemId, event })
+}
+
+/**
+ *
+ * @param {{
+ *  headerKey: string,
+ *  itemId: string
+ * }}
+ */
+function removeItemFromList ({ headerKey, itemId }) {
+  /**
+   * Coluna referente ao model de resultado
+   */
+  const columnItemList = columnsResultsModel.value[headerKey]
+
+  /**
+   * Busca o item com base em seu ID na lista de itens da coluna
+   */
+  const itemIndex = columnItemList.findIndex(itemContent => itemContent[props.itemIdKey] === itemId)
+
+  /**
+   * Remove o item da listagem com base no index, sendo que preciso subtrair 1 para pegar o index correto
+   */
+  columnItemList.splice(itemIndex, 1)
+
+  /**
+   * Remove o item do count da coluna para não mostrar o botão de "Ver mais¨.
+   */
+  columnsPagination.value[headerKey].count -= 1
+}
+
+/**
+ * Descricao:
+ * Metodo que realiza a request de update
+ *
+ * @param {{
+ *  newHeaderKey: string - ID da coluna de destino,
+ *  oldHeaderKey: string - ID da antiga coluna,
+ *  itemId: string - ID do meu item a ser movimento,
+ *  event: event
+ * }}
+ */
+async function updatePosition ({ newHeaderKey, oldHeaderKey, itemId, event }) {
+  const params = {
+    [props.columnIdKey]: newHeaderKey,
+    ...(props.useDragAndDropY && { newIndex: event.newIndex }),
+    ...props.updatePositionParams
+  }
+
+  const { data, error } = await promiseHandler(
+    axios.patch(`${props.updatePositionUrl}/${itemId}/update-position`, params),
+    {
+      errorMessage: 'Ocorreu um erro ao atualizar a posição de seu item.',
+      useLoading: false,
+      onLoading: value => {
+        isLoadingUpdatePosition.value = value
+
+        columnsLoading.value[newHeaderKey] = value
+      }
+    }
+  )
+
+  if (error) {
+    onCancelDrop.value()
+
+    return
+  }
+
+  removeItemFromList({ headerKey: oldHeaderKey, itemId })
+
+  setItemList({ headerKey: newHeaderKey, data: data.data, index: event.newIndex })
+
+  isUpdatingPosition.value = true
+
+  toggleIsDragging()
+
+  closeConfirmDialog()
+
+  emit('update-success')
+}
+
+function setItemList ({ headerKey, data, index }) {
+  /**
+   * Coluna referente ao model de resultado
+   */
+  const columnItemList = columnsResultsModel.value[headerKey]
+
+  /**
+   * Adiciona o item na posição do event escolhido.
+   */
+  columnItemList.splice(index, 0, data.result)
+}
+
+function destroySortable () {
+  sortableInstances.value.forEach(sortable => sortable.destroy())
+}
 </script>
 
 <style lang="scss">
@@ -341,5 +703,10 @@ function getFieldsByHeader (header) {
       display: none;
     }
   }
+
+  // 60px é o valor do padding definido no container da column.
+  &__column-items {
+    height: calc(100% - 60px);
+  }
 }
 </style>

package/src/components/board-generator/QasBoardGenerator.yml

@@ -20,19 +20,33 @@ props:
     required: true
 
   column-width:
-    desc: Largura da coluna
+    desc: Largura da coluna.
     type: String
     default: 288
 
+  confirm-dialog-props:
+    desc: Propriedade repassada ao `QasDialog` para confirmar um drag and drop. Caso não seja passado, não é usado dialog de confirmação. As ações de confirmar e cancelar são feitas por padrão no componente.
+    type: Object
+    default: {}
+
+  header-box-props:
+    desc: Propriedades repassadas ao `QasBox` do header.
+    type: Object
+    default: {}
+
   headers:
     desc: Lista de itens sendo cada um o header de cada coluna.
     default: []
     type: Array
-  
+
   height:
-    desc: Altura do container do board. Caso não seja passado um height, o calculo é feito para ocupar a maior altura possível da página.
+    desc: Altura do container do board. Caso não seja passado um height, o cálculo é feito para ocupar a maior altura possível da página.
+    type: String
+
+  item-id-key:
+    desc: Identificador único do item a ser movido, sendo que será usado nas requisições realizadas pelo drop.
     type: String
-  
+
   lazy-loading-fields-keys:
     desc: Chaves dos campos que são lazy loading para o tratamento de merge das options.
     type: Array
@@ -44,7 +58,7 @@ props:
     default: 12
 
   use-mark-raw:
-    desc: Define se os valores dos itens das colunas irá ser atribuido utilizando o "markRaw", onde somente a primeira camada do model será reativa.(https://vuejs.org/api/reactivity-advanced.html#markraw)
+    desc: Define se os valores dos itens das colunas irão ser atribuídos utilizando o "markRaw", onde somente a primeira camada do model será reativa. (https://vuejs.org/api/reactivity-advanced.html#markraw)
     type: Boolean
     default: true
 
@@ -55,6 +69,30 @@ props:
     examples: [v-model:results="resultsColumns"]
     model: true
 
+  sortable-config:
+    desc: Configuração passada para a instância do SortableJS.
+    type: Object
+    default: "{ animation: 500, swapThreshold: 1, delay: 50, delayOnTouchOnly: true, emptyInsertThreshold: 0 }"
+    debugger: true
+
+  use-drag-and-drop-x:
+    desc: Controla se irá ter drag and drop no eixo X (entre colunas).
+    type: Boolean
+
+  use-drag-and-drop-y:
+    desc: Controla se irá ter drag and drop no eixo Y (mesma coluna, utilizado para ordenação de itens).
+    type: Boolean
+
+  update-position-url:
+    desc: URL usada para realizar o PATCH do drag and drop.
+    type: String
+    default: ''
+
+  update-position-params:
+    desc: Parâmetros customizados caso precise passar para a API de PATCH.
+    type: Object
+    default: {}
+
 slots:
   header-column:
     desc: Slot para acessar o card do header de cada coluna.
@@ -63,9 +101,9 @@ slots:
         desc: Fields referente à coluna atual do template.
         type: Object
         default: {}
-      
+
       header:
-        desc: Informações de cada item do header que foi fornecido através da prop "headers"
+        desc: Informações de cada item do header que foi fornecido através da prop "headers".
         type: Object
         default: {}
 
@@ -76,7 +114,7 @@ slots:
         desc: Fields referente à coluna atual do template.
         type: Object
         default: {}
-      
+
       item:
         desc: Informações de cada item da coluna que foi buscado através da API.
         type: Object
@@ -98,14 +136,14 @@ events:
         type: Object
 
       header:
-        desc: header da coluna atual.
+        desc: Header da coluna atual.
         type: Object
 
   '@update:fetch-column-error -> function(error)':
     desc: Dispara quando o "fetchColumn" cai em uma exceção.
     params:
       error:
-        desc: Retorna todos os dados "cru" respondido na exceção do fetch.
+        desc: Retorna todos os dados "crus" respondidos na exceção do fetch.
         type: Object
 
   '@update:fetch-columns-success -> function()':
@@ -115,12 +153,15 @@ events:
     desc: Dispara quando algum "fetchColumn" cai em uma exceção.
     params:
       error:
-        desc: Retorna todos os dados "cru" respondido na exceção do fetch.
+        desc: Retorna todos os dados "crus" respondidos na exceção do fetch.
         type: Object
 
+  '@update-success -> function()':
+    desc: Dispara quando o PATCH do drag and drop é com sucesso.
+
 methods:
   'fetchColumns: () => void':
     desc: Busca todas colunas com base nos headers fornecidos.
 
   'fetchColumn: (header) => void':
-    desc: Busca uma coluna especifica com base no header fornecido.
+    desc: Busca uma coluna específica com base no header fornecido.

package/src/components/card/QasCard.vue

@@ -3,7 +3,7 @@
     <qas-box class="rounded-borders-right" v-bind="boxProps">
       <q-card class="column full-height overflow-hidden shadow-0">
         <div class="items-center justify-between row">
-          <component :is="titleComponent" class="text-h4 text-no-decoration" :class="titleClasses" :to="route">
+          <component :is="titleComponent" class="text-h5 text-no-decoration" :class="titleClasses" :to="route">
             <slot name="title">
               {{ props.title }}
             </slot>
@@ -89,7 +89,7 @@ const titleClasses = computed(() => {
   }
 })
 
-const titleComponent = computed(() => hasRoute.value ? 'router-link' : 'div')
+const titleComponent = computed(() => hasRoute.value ? 'router-link' : 'h5')
 
 const style = computed(() => {
   if (!props.statusColor) return

package/src/components/grabbable/QasGrabbable.vue

@@ -19,6 +19,11 @@ defineOptions({ name: 'QasGrabbable' })
 const props = defineProps({
   useScrollBar: {
     type: Boolean
+  },
+
+  cancelMouseDownTarget: {
+    type: String,
+    default: ''
   }
 })
 
@@ -61,17 +66,20 @@ function handleEnableScrollOnGrab () {
 function initScrollOnGrab () {
   if (hasScrollOnGrab.value) return
 
-  scrollOnGrab.value = setScrollOnGrab(grabContainer.value, {
-    onGrabFn: onGrab,
-    onMoveFn: setGrabPosition,
-    onScrollFn: setGrabPosition
-  })
+  scrollOnGrab.value = setScrollOnGrab(
+    grabContainer.value,
+    {
+      onGrabFn: onGrab,
+      onMoveFn: setGrabPosition,
+      onScrollFn: setGrabPosition
+    },
+    props.cancelMouseDownTarget
+  )
 }
 
 function destroyScrollOnGrab () {
   if (!hasScrollOnGrab.value) return
 
-  scrollOnGrab.value.destroyEvents()
   scrollOnGrab.value.element.style.cursor = 'auto'
   scrollOnGrab.value = {}
 

package/src/components/grabbable/QasGrabbable.yml

@@ -9,6 +9,10 @@ props:
     default: false
     type: Boolean
 
+  cancel-mouse-down-target:
+    desc: Classe do elemento no qual será ignorado para não realizar o grab.
+    type: String
+
 slots:
   default:
     desc: Slot para ter o conteúdo que terá o scroll na horizontal.

package/src/components/header/QasHeader.vue

@@ -13,11 +13,11 @@
         </div>
       </div>
 
-      <slot name="actions">
-        <div v-if="hasActionsSection" class="q-mt-xs text-right">
+      <div v-if="hasActionsSection" class="text-right">
+        <slot name="actions">
           <component :is="actionsComponent.is" v-if="hasActionsComponent" v-bind="actionsComponent.props" />
-        </div>
-      </slot>
+        </slot>
+      </div>
     </div>
 
     <div class="items-start no-wrap q-col-gutter-sm row" :class="descriptionSectionClasses">
@@ -27,7 +27,7 @@
         </slot>
       </div>
 
-      <div v-if="!hasLabelSection" class="justify-end row">
+      <div v-if="!hasLabelSection" class="justify-end row text-right">
         <slot name="actions">
           <component :is="actionsComponent.is" v-if="hasActionsComponent" v-bind="actionsComponent.props" />
         </slot>

package/src/components/infinite-scroll/QasInfiniteScroll.vue

@@ -33,6 +33,11 @@ const props = defineProps({
     default: () => []
   },
 
+  fields: {
+    type: Object,
+    default: () => ({})
+  },
+
   limitPerPage: {
     type: Number,
     default: 12
@@ -62,7 +67,10 @@ const props = defineProps({
 
 defineExpose({ refresh, remove })
 
-const emit = defineEmits(['update:list', 'fetch-success', 'fetch-error'])
+const emit = defineEmits(['fetch-success', 'fetch-error'])
+
+const modelList = defineModel('list', { type: Array, default: () => [] })
+const modelFields = defineModel('fields', { type: Object, default: () => ({}) })
 
 const axios = inject('axios')
 
@@ -74,7 +82,7 @@ const hasMadeFirstFetch = ref(false)
 const count = ref(0)
 const offset = ref(0)
 
-const listLength = computed(() => model.value.length)
+const listLength = computed(() => modelList.value.length)
 
 const attributes = computed(() => ({
   offset: 100,
@@ -91,16 +99,6 @@ const containerStyle = computed(() => ({
   ...(props.maxHeight && { maxHeight: props.maxHeight, overflow: 'auto' })
 }))
 
-const model = computed({
-  get () {
-    return props.list
-  },
-
-  set (newList) {
-    emit('update:list', newList)
-  }
-})
-
 async function onLoad (_, done) {
   const hasMadeFirstFetchAndHasNoData = hasMadeFirstFetch.value && !listLength.value
   const hasFetchAllData = listLength.value && listLength.value >= count.value
@@ -124,11 +122,12 @@ async function fetchList () {
       params: { offset: offset.value, limit: props.limitPerPage, ...props.params }
     })
 
-    const newList = [...model.value, ...(data.results || [])]
+    const newList = [...modelList.value, ...(data.results || [])]
 
-    model.value = newList
+    modelList.value = newList
     offset.value = newList.length
     count.value = data.count
+    modelFields.value = data.fields
 
     /**
      * Sinalizar que houve já uma busca, para evitar que onLoad entre em looping,
@@ -136,7 +135,7 @@ async function fetchList () {
     */
     hasMadeFirstFetch.value = true
 
-    emit('fetch-success', { list: newList, offset: offset.value, count: count.value })
+    emit('fetch-success', { list: newList, fields: modelFields.value, offset: offset.value, count: count.value })
   } catch (error) {
     NotifyError('Ops… Não conseguimos acessar as informações. Por favor, tente novamente em alguns minutos.')
 
@@ -151,7 +150,7 @@ async function fetchList () {
 function refresh () {
   count.value = 0
   offset.value = 0
-  model.value = []
+  modelList.value = []
 
   hasMadeFirstFetch.value = false
 
@@ -162,7 +161,7 @@ function refresh () {
 }
 
 function remove (index) {
-  model.value.splice(index, 1)
+  modelList.value.splice(index, 1)
   count.value -= 1
   offset.value -= 1
 }

package/src/components/infinite-scroll/QasInfiniteScroll.yml

@@ -4,6 +4,13 @@ meta:
   desc: Componente de infinite scroll que implementa o "QInfiniteScroll".
 
 props:
+  fields:
+    desc: Model dos fields.
+    default: {}
+    type: Object
+    examples: [v-model:fields="fields"]
+    model: true
+
   list:
     desc: Model da lista de itens.
     default: []

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

@@ -47,6 +47,7 @@ import debug from 'debug'
 import { extend } from 'quasar'
 import { getState, getAction } from '@bildvitta/store-adapter'
 import { viewMixin, contextMixin } from '../../mixins'
+import { computed } from 'vue'
 
 const log = debug('asteroid-ui:qas-list-view')
 
@@ -58,6 +59,13 @@ export default {
 
   mixins: [contextMixin, viewMixin],
 
+  provide () {
+    return {
+      isFetchListSucceeded: computed(() => this.isFetchListSucceeded),
+      isListView: true
+    }
+  },
+
   props: {
     filtersProps: {
       default: () => ({}),
@@ -107,7 +115,8 @@ export default {
   data () {
     return {
       page: 1,
-      resultsQuantity: 0
+      resultsQuantity: 0,
+      isFetchListSucceeded: false
     }
   },
 
@@ -188,6 +197,7 @@ export default {
 
     async fetchList (externalPayload = {}) {
       this.mx_isFetching = true
+      this.isFetchListSucceeded = false
 
       try {
         const payload = {
@@ -215,6 +225,8 @@ export default {
           metadata: this.mx_metadata
         })
 
+        this.isFetchListSucceeded = true
+
         this.$emit('fetch-success', response)
 
         log(`[${this.entity}]:fetchList:success`, response)

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

@@ -158,3 +158,12 @@ events:
       value:
         desc: Retorna se está ou não fazendo fetching de dados.
         type: Boolean
+
+provide:
+  is-fetch-list-succeeded:
+    desc: Valor que diz se o `fetchList` foi realizado com sucesso ou não.
+    type: Boolean
+
+  is-list-view:
+    desc: Provide que diz quando se está utilizando o listView
+    type: Boolean

package/src/components/stepper-form-view/QasStepperFormView.yml

@@ -17,7 +17,7 @@ props:
     desc: Propriedades que serão repassadas para o QasStepper.
     type: Object
 
-inject:
+provide:
   stepper-model:
     desc: Model do stepper caso precise recuperar o step atual para alguma lógica. Possui reatividade, portanto para acessar é necessário do ".value"
     type: Number

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

@@ -7,10 +7,11 @@
 *  onMoveFn: function({ element: HTMLElement, event: MouseEvent | TouchEvent }),
 *  onScrollFn: function({ element: HTMLElement, event: Event })
 * }} options
+* @param {String} cancelMouseDownTarget
 *
 * @returns {{ element: HTMLElement, destroyEvents: function }}
 */
-export default function (element, options = {}) {
+export default function (element, options = {}, cancelMouseDownTarget) {
   let isDown = false
   let startX
   let scrollLeft
@@ -46,6 +47,13 @@ export default function (element, options = {}) {
   }
 
   function onMouseEnter (event) {
+    /**
+     * closest busca ancestral mais próximo de um elemento, ou seja, verifica se no event que recebo, tenho a classe no qual nao se deve aplicar o grab.
+     */
+    const targetElement = event.target.closest(`.${cancelMouseDownTarget}`)
+
+    if (!!cancelMouseDownTarget && !!targetElement) return null
+
     onEnter()
 
     startX = event.pageX - element.offsetLeft