@bildvitta/quasar-ui-asteroid 3.15.0-beta.4 → 3.15.0-beta.6

package/package.json

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

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

@@ -1,13 +1,13 @@
 <template>
   <qas-grabbable class="qas-board-generator" use-scroll-bar>
     <div class="no-wrap q-col-gutter-sm q-px-xl row">
-      <div v-for="(header, index) in results" :key="index" class="q-mr-sm">
+      <div v-for="(header, index) in headers" :key="index" class="q-mr-sm">
         <qas-box class="q-mb-md">
-          <slot :context="header" name="header-column" />
+          <slot :fields="getFieldsByHeader(header)" :header="header" name="header-column" />
         </qas-box>
 
         <div ref="columnContainer" class="qas-board-generator__column secondary-scroll" :style="containerStyle">
-          <slot v-for="item in getItemsByHeader(header)" :context="item" name="column-item" />
+          <slot v-for="item in getItemsByHeader(header)" :fields="getFieldsByHeader(header)" :item="item" name="column-item" />
 
           <div class="full-width justify-center q-mb-md q-mt-sm 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)" />
@@ -23,7 +23,7 @@
 </template>
 
 <script setup>
-import { ref, watch, computed, onMounted, shallowRef, inject } from 'vue'
+import { ref, watch, computed, onMounted, markRaw, inject } from 'vue'
 import promiseHandler from '../../helpers/promise-handler'
 
 defineOptions({ name: 'QasBoardGenerator' })
@@ -31,15 +31,21 @@ defineOptions({ name: 'QasBoardGenerator' })
 const columnContainer = ref(null)
 const columnsPagination = ref({})
 const columnsLoading = ref({})
+const columnsFieldsModel = ref({})
 
 const axios = inject('axios')
 
 const props = defineProps({
-  results: {
+  headers: {
     type: Array,
     default: () => []
   },
 
+  results: {
+    type: Object,
+    default: () => ({})
+  },
+
   columnIdKey: {
     type: String,
     required: true
@@ -55,11 +61,6 @@ const props = defineProps({
     required: true
   },
 
-  modelValue: {
-    type: Object,
-    default: () => ({})
-  },
-
   height: {
     type: String,
     default: ''
@@ -72,17 +73,30 @@ const props = defineProps({
 
   columnWidth: {
     type: String,
-    default: '288px'
+    default: '300px'
   },
 
-  useShallowRef: {
+  useMarkRaw: {
     type: Boolean,
     default: true
+  },
+
+  lazyLoadingFieldsKeys: {
+    type: Array,
+    default: () => []
   }
 })
 
+const emit = defineEmits([
+  'update:results',
+  'fetch-column-success',
+  'fetch-column-error',
+  'fetch-columns-success',
+  'fetch-columns-error'
+])
+
 watch(
-  () => props.results,
+  () => props.headers,
   () => {
     reset()
     setColumnHeightContainer()
@@ -98,21 +112,19 @@ onMounted(() => {
   fetchColumns()
 })
 
-const emit = defineEmits(['update:modelValue'])
-
 defineExpose({ fetchColumns, fetchColumn, reset })
 
-const columnsModel = computed({
+const columnsResultsModel = computed({
   get () {
-    return props.modelValue
+    return props.results
   },
 
   set (newValues) {
-    emit('update:modelValue', newValues)
+    emit('update:results', newValues)
   }
 })
 
-const hasColumnsLength = computed(() => Object.keys(columnsModel.value).length)
+const hasColumnsLength = computed(() => Object.keys(columnsResultsModel.value).length)
 
 const containerStyle = computed(() => `width: ${props.columnWidth};`)
 
@@ -134,7 +146,17 @@ function setColumnHeightContainer () {
 * Bater API pra cada header
 */
 async function fetchColumns () {
-  props.results.forEach(header => fetchColumn(header))
+  const promises = props.headers.map(header => fetchColumn(header))
+
+  const { error } = await promiseHandler(promises, { useLoading: false })
+
+  if (error) {
+    emit('fetch-columns-error', error)
+
+    return
+  }
+
+  emit('fetch-columns-success')
 }
 
 /*
@@ -161,32 +183,82 @@ async function fetchColumn (header) {
     }
   )
 
-  if (error) return
+  if (error) {
+    emit('fetch-column-error', error)
+
+    throw error
+  }
 
   /*
-  * exemplo de como columnsModel irá ficar:
+  * 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 "columnsLoading" e "columnPagination", organizando
-  * os loadings e o controle de paginação por chave identificadora do header.
+  * 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 newColumnValues = [
-    ...columnsModel.value[headerKey] || [],
+    ...columnsResultsModel.value[headerKey] || [],
     ...response.data?.results || []
   ]
 
-  columnsModel.value[headerKey] = props.useShallowRef ? shallowRef(newColumnValues) : newColumnValues
+  columnsResultsModel.value[headerKey] = props.useMarkRaw ? markRaw(newColumnValues) : newColumnValues
 
-  columnsPagination.value[headerKey].offset = columnsModel.value[headerKey].length
+  /*
+  * Pode acontecer das options nos fields da segunda página serem diferentes da primeira página,
+  * portanto deve ocorrer o merge.
+  */
+  if (response.data?.fields) {
+    columnsFieldsModel.value[headerKey] = markRaw(
+      getMergedFields(columnsFieldsModel.value[headerKey], response.data?.fields)
+    )
+  }
+
+  columnsPagination.value[headerKey].offset = columnsResultsModel.value[headerKey].length
   columnsPagination.value[headerKey].count = response.data?.count
+
+  emit('fetch-column-success', { response, header })
+}
+
+/*
+* Mergeia os options antigos com os novos de cada field.
+*/
+function getMergedFields (oldFields, newFields) {
+  // Primeira vez batendo a API, retorna os novos fields.
+  if (!oldFields || !props.lazyLoadingFieldsKeys.length) return newFields
+
+  // Caso bata a API e por algum motivo não venha fields, mantenha o antigos.
+  if (oldFields && !newFields) return oldFields
+
+  const mergedFields = { ...oldFields }
+
+  props.lazyLoadingFieldsKeys.forEach(fieldKey => {
+    mergedFields[fieldKey].options = getNonDuplicatedOptions(oldFields[fieldKey].options, newFields[fieldKey].options)
+  })
+
+  return mergedFields
+}
+
+/*
+* Tratamento para fazer o merge e evitar options duplicados.
+*/
+function getNonDuplicatedOptions (oldOptions, newOptions) {
+  const options = [...oldOptions]
+
+  newOptions.forEach(item => {
+    const hasOption = options.find(option => option.value === item.value)
+
+    if (!hasOption) options.push(item)
+  })
+
+  return options
 }
 
 function getItemsByHeader (header) {
-  return hasColumnsLength.value ? columnsModel.value[getKeyByHeader(header)] : []
+  return hasColumnsLength.value ? columnsResultsModel.value[getKeyByHeader(header)] : []
 }
 
 /**
@@ -213,7 +285,7 @@ function setColumnsPagination () {
   columnsPagination.value = {}
   columnsLoading.value = {}
 
-  props.results.forEach(header => {
+  props.headers.forEach(header => {
     const headerKey = getKeyByHeader(header)
 
     columnsPagination.value[headerKey] = { limit: props.limitPerColumn, offset: 0 }
@@ -231,16 +303,22 @@ function hasEmptyResultText (header) {
 */
 function hasSeeMore (header) {
   const headerKey = getKeyByHeader(header)
-  const hasMorePagination = columnsModel.value[headerKey]?.length < columnsPagination.value[headerKey]?.count
+  const hasMorePagination = columnsResultsModel.value[headerKey]?.length < columnsPagination.value[headerKey]?.count
 
   return hasMorePagination && !columnsLoading.value[headerKey]
 }
 
 function reset () {
-  columnsModel.value = {}
+  columnsResultsModel.value = {}
   columnsPagination.value = {}
   columnsLoading.value = {}
 }
+
+function getFieldsByHeader (header) {
+  const headerKey = getKeyByHeader(header)
+
+  return columnsFieldsModel.value[headerKey] || {}
+}
 </script>
 
 <style lang="scss">

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

@@ -4,11 +4,6 @@ meta:
   desc: Componente usado para board de colunas.
 
 props:
-  results:
-    desc: Lista de itens sendo cada um o header de cada coluna.
-    default: []
-    type: Array
-
   column-id-key:
     desc: chave que será o id usado para ser o identificador da coluna.
     type: String
@@ -28,53 +23,101 @@ props:
     desc: Largura da coluna
     type: String
     default: 288
+
+  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.
     type: String
+  
+  lazy-loading-fields-keys:
+    desc: Chaves dos campos que são lazy loading para o tratamento de merge das options.
+    type: Array
+    default: []
 
   limit:
     desc: Quantidade de itens da coluna por busca na API.
     type: Number
     default: 12
 
-  use-shallow-ref:
-    desc: Define se os valores dos itens das colunas irá ser atribuido utilizando o "shallowRef", onde somente a primeira camada do model será reativa.(https://vuejs.org/api/reactivity-advanced.html#shallowref)
+  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)
     type: Boolean
     default: true
 
-  model-value:
-    desc: Model do componente, usado para o v-model.
+  results:
+    desc: Model do componente, usado para o v-model dos itens da coluna.
     default: {}
     type: Object
-    examples: [v-model="value"]
+    examples: [v-model:results="resultsColumns"]
     model: true
 
 slots:
   header-column:
     desc: Slot para acessar o card do header de cada coluna.
     scope:
-      context:
-        desc: Informações de cada item do header que foi fornecido através do "results".
+      fields:
+        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"
         type: Object
         default: {}
 
   column-item:
     desc: Slot para acessar o item da coluna.
     scope:
-      context:
+      fields:
+        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
         default: {}
 
 events:
-  '@update:model-value -> function(value)':
-    desc: Dispara quando o model-value altera, também usado para v-model.
+  '@update:results -> function(value)':
+    desc: Dispara quando o "results" altera, também usado para v-model.
     params:
       value:
         desc: Novo valor do model.
         type: Object
 
+  '@update:fetch-column-success -> function({ response, header })':
+    desc: Dispara quando o "fetchColumn" é executado com sucesso.
+    params:
+      response:
+        desc: Retorno da API.
+        type: Object
+
+      header:
+        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.
+        type: Object
+
+  '@update:fetch-columns-success -> function()':
+    desc: Dispara quando todos "fetchColumn" foram executados com sucesso.
+
+  '@update:fetch-columns-error -> function(error)':
+    desc: Dispara quando algum "fetchColumn" cai em uma exceção.
+    params:
+      error:
+        desc: Retorna todos os dados "cru" respondido na exceção do fetch.
+        type: Object
+
 methods:
   'fetchColumns: () => void':
     desc: Busca todas colunas com base nos headers fornecidos.

package/src/components/nested-fields/QasNestedFields.vue

@@ -17,7 +17,7 @@
 
             <div ref="formGenerator" class="col-12 justify-between q-col-gutter-x-md row">
               <slot :errors="transformedErrors" :fields="getFields(index, row)" :index="index" name="fields" :update-value="updateValuesFromInput">
-                <qas-form-generator v-model="nested[index]" :class="formClasses" :columns="formColumns" :disable="isDisabledRow(row)" :errors="transformedErrors[index]" :fields="getFields(index, row)" :fields-props="getFieldsProps(index, row)" @update:model-value="updateValuesFromInput($event, index)">
+                <qas-form-generator v-model="nested[index]" class="col" :columns="formColumns" :disable="isDisabledRow(row)" :errors="transformedErrors[index]" :fields="getFields(index, row)" :fields-props="getFieldsProps(index, row)" :gutter="formGutter" @update:model-value="updateValuesFromInput($event, index)">
                   <template v-for="(slot, key) in $slots" #[key]="scope">
                     <slot v-bind="scope" :disabled="isDisabledRow(row)" :errors="transformedErrors" :index="index" :name="key" />
                   </template>
@@ -67,6 +67,7 @@ import QasInput from '../input/QasInput.vue'
 import QasLabel from '../label/QasLabel.vue'
 
 import { constructObject } from '../../helpers'
+import { Spacing } from '../../enums/Spacing'
 
 import { TransitionGroup } from 'vue'
 import debug from 'debug'
@@ -164,17 +165,9 @@ export default {
     },
 
     formGutter: {
-      type: String,
-      default: 'md',
-      validator: value => {
-        return [
-          'xs',
-          'sm',
-          'md',
-          'lg',
-          'xl'
-        ].includes(value)
-      }
+      default: Spacing.Lg,
+      type: [String, Boolean],
+      validator: value => typeof value === 'boolean' || Object.values(Spacing).includes(value)
     },
 
     identifierItemKey: {
@@ -280,13 +273,6 @@ export default {
       return this.field?.name
     },
 
-    formClasses () {
-      return {
-        col: true,
-        [`q-col-gutter-x-${this.formGutter}`]: this.useInlineActions
-      }
-    },
-
     showDestroyButton () {
       return this.nested.filter(item => !item[this.destroyKey]).length > 1 || this.hasDestroyAlways
     },

package/src/components/nested-fields/QasNestedFields.yml

@@ -75,10 +75,10 @@ props:
     examples: ["[{ sm: 6, md: 12 }]", "{ name: { sm: 6, md: 12 } }", "12"]
 
   form-gutter:
-    desc: Espaçamento entre cada campo.
-    default: md
-    type: String
-    examples: [xs, sm, md, lg, xl]
+    desc: Espaçamento entre colunas do formulário.
+    default: lg
+    type: [String, Boolean]
+    examples: [xs, sm, md, lg, xl, false]
 
   identifier-item-key:
     desc: Define um identificador para o item. O identificador será utilizado para validar exclusão do item, por exemplo.