@bildvitta/quasar-ui-asteroid 3.17.0-beta.2 → 3.17.0-beta.21

package/src/components/grid-generator/QasGridGenerator.vue

@@ -1,31 +1,35 @@
 <template>
-  <div :class="classes">
-    <div v-for="(field, key) in fieldsByResult" :key="key" :class="getContainerClass({ key })">
-      <slot :field="field" :name="`field-${field.name}`">
-        <qas-grid-item :use-ellipsis="props.useEllipsis" :use-inline="props.useInline">
-          <template #header>
-            <slot :field="field" :name="`header-field-${field.name}`">
-              <slot :field="field" name="header">
-                <div :class="headerClass" :data-cy="`grid-generator-${field.name}-field`" :title="getTitle(field, 'label')">
-                  {{ field.label }}
-                </div>
+  <component :is="component.is" v-bind="component.props">
+    <qas-header v-if="hasHeader" v-bind="props.headerProps" />
+
+    <div :class="classes">
+      <div v-for="(field, key) in fieldsByResult" :key="key" :class="getContainerClassses({ key })">
+        <slot :field="field" :name="`field-${field.name}`">
+          <qas-grid-item :use-ellipsis="hasEllipsis(field)" :use-inline="props.useInline">
+            <template #header>
+              <slot :field="field" :name="`header-field-${field.name}`">
+                <slot :field="field" name="header">
+                  <div :class="headerClass" :data-cy="`grid-generator-${field.name}-field`" :title="getTitle(field, 'label')">
+                    {{ field.label }}
+                  </div>
+                </slot>
               </slot>
-            </slot>
-          </template>
-
-          <template #content>
-            <slot :field="field" :name="`content-field-${field.name}`">
-              <slot :field="field" name="content">
-                <div :class="contentClass" :data-cy="`grid-generator-${field.name}-result`" :title="getTitle(field, 'formattedResult')">
-                  {{ field.formattedResult }}
-                </div>
+            </template>
+
+            <template #content>
+              <slot :field="field" :name="`content-field-${field.name}`">
+                <slot :field="field" name="content">
+                  <div :class="getContentClasses(field)" :data-cy="`grid-generator-${field.name}-result`" :title="getTitle(field, 'formattedResult')">
+                    {{ field.formattedResult }}
+                  </div>
+                </slot>
               </slot>
-            </slot>
-          </template>
-        </qas-grid-item>
-      </slot>
+            </template>
+          </qas-grid-item>
+        </slot>
+      </div>
     </div>
-  </div>
+  </component>
 </template>
 
 <script setup>
@@ -44,6 +48,11 @@ const screen = useScreen()
 const props = defineProps({
   ...baseProps,
 
+  boxProps: {
+    type: Object,
+    default: () => ({})
+  },
+
   contentClass: {
     default: '',
     type: [Array, Object, String]
@@ -54,6 +63,11 @@ const props = defineProps({
     type: [Array, Object, String]
   },
 
+  headerProps: {
+    type: Object,
+    default: () => ({})
+  },
+
   emptyResultText: {
     default: '-',
     type: String
@@ -64,6 +78,10 @@ const props = defineProps({
     type: Object
   },
 
+  useBox: {
+    type: Boolean
+  },
+
   useEmptyResult: {
     default: true,
     type: Boolean
@@ -85,15 +103,13 @@ const { classes, getFieldClass } = useGenerator({ props })
 // computed
 const hasResult = computed(() => Object.keys(props.result).length)
 const hasFields = computed(() => Object.keys(props.fields).length)
+const hasHeader = computed(() => Object.keys(props.headerProps).length)
 
-const contentClass = computed(() => {
-  return [
-    props.contentClass,
-
-    {
-      ellipsis: !screen.isSmall && props.useEllipsis
-    }
-  ]
+const component = computed(() => {
+  return {
+    is: props.useBox ? 'qas-box' : 'div',
+    props: props.useBox ? props.boxProps : {}
+  }
 })
 
 const headerClass = computed(() => {
@@ -137,7 +153,7 @@ const formattedFields = computed(() => {
 // watch
 watch(() => formattedFields.value, setFieldsByResult, { immediate: true })
 
-// methods
+// functions
 function getFieldsByResult () {
   if (!hasResult.value || !hasFields.value) return {}
 
@@ -165,7 +181,7 @@ function setFieldsByResult () {
   fieldsByResult.value = getFieldsByResult()
 }
 
-function getContainerClass ({ key }) {
+function getContainerClassses ({ key }) {
   if (props.useInline) return 'row justify-between col-12'
 
   return getFieldClass({ index: key, isGridGenerator: true })
@@ -174,4 +190,21 @@ function getContainerClass ({ key }) {
 function getTitle (field, key) {
   return props.useEllipsis ? field[key] : ''
 }
+
+function hasEllipsis (field) {
+  /**
+   * Para campos do tipo "textarea" vamos sempre exibir o conteúdo por completo.
+   */
+  return (field.type === 'textarea') && !props.useInline ? false : props.useEllipsis
+}
+
+function getContentClasses (field) {
+  return [
+    props.contentClass,
+
+    {
+      ellipsis: !screen.isSmall && hasEllipsis(field)
+    }
+  ]
+}
 </script>

package/src/components/grid-generator/QasGridGenerator.yml

@@ -4,6 +4,11 @@ meta:
   desc: Componente para criação de textos dinâmicos.
 
 props:
+  box-props:
+    desc: Propriedades do "QasBox" que envolve o conteúdo.
+    default: {}
+    type: Object
+
   columns:
     desc: Colunas do grid de cada campo.
     default: col-6
@@ -41,6 +46,11 @@ props:
     default: 'text-bold'
     type: [Array, Object, String]
 
+  header-props:
+    desc: Propriedades do "QasHeader".
+    default: {}
+    type: Object
+
   result:
     desc: Resultado contendo todas informações para serem exibidas na tela.
     default: {}
@@ -52,6 +62,11 @@ props:
     default: true
     type: Boolean
 
+  use-box:
+    desc: Controla se o componente vai ter o QasBox englobando ou não.
+    default: false
+    type: Boolean
+
   use-ellipsis:
     desc: Adiciona a classe "ellipsis" para o elemento do conteúdo.
     default: true

package/src/components/header/QasHeader.vue

@@ -1,6 +1,6 @@
 <template>
   <div :class="containerClasses">
-    <div v-if="hasLabelSection" class="items-center justify-between no-wrap row" :class="labelSectionClasses">
+    <div v-if="hasLabelSection" class="full-width items-center justify-between no-wrap row" :class="labelSectionClasses">
       <div class="items-center q-col-gutter-sm row">
         <slot name="label">
           <qas-label v-if="hasLabel" v-bind="defaultLabelProps" />
@@ -13,25 +13,23 @@
         </div>
       </div>
 
-      <slot name="actions">
-        <qas-actions-menu v-if="hasDefaultActionsMenu" v-bind="props.actionsMenuProps" />
-
-        <qas-btn v-if="hasDefaultButton" :use-label-on-small-screen="false" v-bind="props.buttonProps" />
-      </slot>
+      <div v-if="hasActionsSection" class="text-right">
+        <slot name="actions">
+          <component :is="actionsComponent.is" v-if="hasActionsComponent" v-bind="actionsComponent.props" />
+        </slot>
+      </div>
     </div>
 
-    <div class="items-start justify-between no-wrap q-col-gutter-sm row">
+    <div class="items-start no-wrap q-col-gutter-sm row" :class="descriptionSectionClasses">
       <div v-if="hasDescriptionSection" class="text-body1 text-grey-8">
         <slot name="description">
           {{ props.description }}
         </slot>
       </div>
 
-      <div v-if="!hasLabelSection" class="justify-end row">
+      <div v-if="!hasLabelSection" class="justify-end row text-right">
         <slot name="actions">
-          <qas-actions-menu v-if="hasDefaultActionsMenu" v-bind="props.actionsMenuProps" />
-
-          <qas-btn v-if="hasDefaultButton" :use-label-on-small-screen="false" v-bind="props.buttonProps" />
+          <component :is="actionsComponent.is" v-if="hasActionsComponent" v-bind="actionsComponent.props" />
         </slot>
       </div>
     </div>
@@ -67,6 +65,11 @@ const props = defineProps({
     default: ''
   },
 
+  filtersProps: {
+    default: () => ({}),
+    type: Object
+  },
+
   labelProps: {
     type: Object,
     default: () => ({})
@@ -90,16 +93,59 @@ const labelSectionClasses = computed(() => {
   }
 })
 
+const descriptionSectionClasses = computed(() => {
+  return {
+    'justify-between': hasDescriptionSection.value,
+    'justify-end': hasActionsSection.value && !hasDescriptionSection.value
+  }
+})
+
 const defaultLabelProps = computed(() => {
   return {
-    margin: hasBadges.value ? 'none' : 'xs',
+    margin: 'none',
     ...props.labelProps
   }
 })
 
+const actionsComponent = computed(() => {
+  const component = {
+    [hasDefaultButton.value]: {
+      is: 'qas-btn',
+      props: {
+        ...props.buttonProps,
+        useLabelOnSmallScreen: false
+      }
+    },
+
+    [hasDefaultActionsMenu.value]: {
+      is: 'qas-actions-menu',
+      props: props.actionsMenuProps
+    },
+
+    [hasDefaultFilters.value]: {
+      is: 'qas-filters',
+      props: {
+        useSearch: false,
+        useChip: false,
+        useSpacing: false,
+        ...props.filtersProps
+      }
+    }
+  }
+
+  return component.true
+})
+
+const hasActionsComponent = computed(() => {
+  return hasDefaultButton.value || hasDefaultActionsMenu.value || hasDefaultFilters.value
+})
+
+const hasActionsSection = computed(() => !!slots.actions || hasActionsComponent.value)
+
 const hasBadges = computed(() => !!props.badges.length)
 const hasLabel = computed(() => !!Object.keys(props.labelProps).length)
 const hasDefaultButton = computed(() => !!Object.keys(props.buttonProps).length)
+const hasDefaultFilters = computed(() => !!Object.keys(props.filtersProps).length)
 const hasDefaultActionsMenu = computed(() => !!Object.keys(props.actionsMenuProps).length)
 const hasDescriptionSection = computed(() => props.description || slots.description)
 const hasLabelSection = computed(() => hasLabel.value || slots.label || hasBadges.value)

package/src/components/header/QasHeader.yml

@@ -23,6 +23,11 @@ props:
     desc: Descrição da seção a esquerda.
     type: String
 
+  filters-props:
+    desc: Propriedades do QasFilters.
+    default: {}
+    type: Object
+
   label-props:
     desc: Propriedades repassadas para o componente QasLabel.
     type: Object

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-items/QasListItems.vue

@@ -4,7 +4,18 @@
       <q-item v-for="(item, index) in props.list" :key="index" :clickable="props.useClickableItem" @click="onClick({ item, index }, true)">
         <slot :index="index" :item="item" name="item">
           <q-item-section>
-            <slot :index="index" :item="item" name="item-section" />
+            <slot :index="index" :item="item" name="item-section">
+              <qas-label
+                v-if="item[props.labelKey]"
+                :label="item[props.labelKey]"
+                :margin="getLabelMargin(item)"
+                typography="h5"
+              />
+
+              <div v-if="item[props.descriptionKey]" class="text-body1">
+                {{ item[props.descriptionKey] }}
+              </div>
+            </slot>
           </q-item-section>
 
           <q-item-section v-if="props.useSectionActions" side>
@@ -26,11 +37,21 @@ import { computed } from 'vue'
 defineOptions({ name: 'QasListItems' })
 
 const props = defineProps({
+  descriptionKey: {
+    type: String,
+    default: 'description'
+  },
+
   icon: {
     type: String,
     default: 'sym_r_chevron_right'
   },
 
+  labelKey: {
+    type: String,
+    default: 'label'
+  },
+
   list: {
     default: () => [],
     type: Array
@@ -57,17 +78,20 @@ const classes = computed(() => ({ 'qas-list-items--no-click': !props.useClickabl
 
 const component = computed(() => props.useBox ? 'qas-box' : 'div')
 
+// functions
 function onClick ({ item, index }, fromItem) {
   /**
    * se o click veio do q-item e "useClickableItem" for "false", ou
    * se o click não veio do q-item e "useClickableItem" for "true", então retorna sem emitir.
    */
-  if (
-    (fromItem && !props.useClickableItem) || (!fromItem && props.useClickableItem)
-  ) return
+  if ((fromItem && !props.useClickableItem) || (!fromItem && props.useClickableItem)) return
 
   emit('click-item', { item, index })
 }
+
+function getLabelMargin (item) {
+  return item[props.descriptionKey] ? 'xs' : 'none'
+}
 </script>
 
 <style lang="scss">

package/src/components/list-items/QasListItems.yml

@@ -4,11 +4,21 @@ meta:
   desc: Componente para listagem.
 
 props:
+  description-key:
+    desc: Chave para acessar a descrição do item.
+    default: description
+    type: String
+
   icon:
     desc: Nome do ícone
     default: sym_r_chevron_right
     type: String
 
+  label-key:
+    desc: Chave para acessar o label do item.
+    default: label
+    type: String
+
   list:
     desc: Lista para ser selecionada.
     default: []

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

@@ -12,6 +12,10 @@
       <main class="relative-position">
         <div v-if="showResults">
           <slot />
+
+          <q-inner-loading :showing="mx_isFetching">
+            <q-spinner color="grey" size="3em" />
+          </q-inner-loading>
         </div>
 
         <div v-else-if="!mx_isFetching">
@@ -29,10 +33,6 @@
         <div v-if="hasPages" class="flex items-center q-mt-md" :class="paginationClasses">
           <qas-pagination v-model="page" :max="totalPages" @click="changePage" />
         </div>
-
-        <q-inner-loading :showing="hasResults && mx_isFetching">
-          <q-spinner color="grey" size="3em" />
-        </q-inner-loading>
       </main>
     </q-pull-to-refresh>
 
@@ -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