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

package/package.json

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

package/src/components/expansion-item/QasExpansionItem.vue

@@ -1,7 +1,7 @@
 <template>
   <div ref="expansionItem" class="full-width qas-expansion-item" :class="errorClasses" v-bind="expansionProps.parent">
     <component :is="component.is" class="qas-expansion-item__box">
-      <q-expansion-item header-class="text-bold q-mt-sm q-pa-none" :label="props.label" v-bind="expansionProps.item">
+      <q-expansion-item header-class="text-bold q-mt-sm q-pa-none qas-expansion-item__header" :label="props.label" v-bind="expansionProps.item">
         <template #header>
           <slot name="header">
             <div class="full-width">
@@ -26,11 +26,13 @@
           </slot>
         </template>
 
-        <q-separator v-if="!isNestedExpansionItem" class="q-my-md" />
+        <q-separator v-if="hasHeaderSeparator" class="q-my-md" />
 
-        <slot name="content">
-          <qas-grid-generator v-if="hasGridGenerator" v-bind="gridGeneratorProps" use-inline />
-        </slot>
+        <div :class="contentClasses">
+          <slot name="content">
+            <qas-grid-generator v-if="hasGridGenerator" use-inline v-bind="gridGeneratorProps" />
+          </slot>
+        </div>
 
         <q-separator v-if="hasBottomSeparator" class="q-mt-md" />
       </q-expansion-item>
@@ -75,6 +77,11 @@ const props = defineProps({
   gridGeneratorProps: {
     type: Object,
     default: () => ({})
+  },
+
+  useHeaderSeparator: {
+    type: Boolean,
+    default: undefined
   }
 })
 
@@ -99,12 +106,30 @@ const component = {
 
 // computed
 const hasError = computed(() => props.error || !!props.errorMessage)
-const errorClasses = computed(() => ({ 'qas-expansion-item--error': hasError.value }))
-
 const hasGridGenerator = computed(() => !!Object.keys(props.gridGeneratorProps).length)
 const hasBottomSeparator = computed(() => isNestedExpansionItem && hasNextSibling.value)
 const hasHeaderBottom = computed(() => !!slots['header-bottom'])
 
+/**
+ * Verifica se o componente deve adicionar um separador no header.
+ *
+ * - Se a propriedade useHeaderSeparator for true, retorna separador.
+ * - Se a propriedade useHeaderSeparator for undefined, retorna separador apenas se não for um componente aninhado.
+ * - Se a propriedade useHeaderSeparator for false, não retorna separador.
+ */
+const hasHeaderSeparator = computed(() => {
+  return typeof props.useHeaderSeparator === 'undefined' ? !isNestedExpansionItem : props.useHeaderSeparator
+})
+
+const errorClasses = computed(() => ({ 'qas-expansion-item--error': hasError.value }))
+
+const contentClasses = computed(() => {
+  return {
+    'q-mt-sm': isNestedExpansionItem,
+    'q-mt-md': !isNestedExpansionItem && !props.useHeaderSeparator
+  }
+})
+
 const expansionProps = computed(() => {
   const {
     'onUpdate:modelValue': onUpdateModelValue,
@@ -141,7 +166,7 @@ const expansionProps = computed(() => {
 function setHasNextSibling (value) {
   if (!isNestedExpansionItem) return
 
-  const hasTextContentSibling = !!expansionItem.value.nextSibling.textContent?.trim?.()
+  const hasTextContentSibling = !!expansionItem.value.nextSibling?.textContent?.trim?.()
   const hasElementSibling = !!expansionItem.value.nextElementSibling
 
   hasNextSibling.value = hasElementSibling || hasTextContentSibling
@@ -152,6 +177,12 @@ function setHasNextSibling (value) {
 .qas-expansion-item {
   $root: &;
 
+  // em alguns casos quando usado com grid, o espaçamento afetava o header, com z-index o problema é resolvido
+  &__header {
+    position: relative;
+    z-index: 1;
+  }
+
   &--error {
     #{$root}__box {
       border: 2px solid $negative;

package/src/components/expansion-item/QasExpansionItem.yml

@@ -24,6 +24,11 @@ props:
     desc: Propriedades que serão repassadas para o QasGridGenerator.
     type: Object
 
+  use-header-separator:
+    desc: Propriedade para forçar o QSeparator no header.
+    type: Boolean
+    default: undefined
+
 slots:
   header:
     desc: 'Slot para substituir o conteúdo do header'

package/src/components/form-view/QasFormView.vue

@@ -5,7 +5,9 @@
     </header>
 
     <q-form ref="form" v-bind="defaultFormProps">
-      <slot />
+      <slot v-if="mx_canShowFetchErrorSlot" name="fetch-error" />
+
+      <slot v-else />
 
       <slot v-if="useActions" name="actions">
         <qas-actions>

package/src/components/form-view/QasFormView.yml

@@ -155,6 +155,9 @@ slots:
   default:
     desc: Slot para ter o conteúdo principal (dentro do main).
 
+  fetch-error:
+    desc: Slot disponibilizado em caso de fetchError.
+
   footer:
     desc: Slot para acessar o footer.
 

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

@@ -70,7 +70,7 @@ const props = defineProps({
 })
 
 // composables
-const { classes: useGeneratorClasses, getFieldClass } = useGenerator({ props })
+const { classes, getFieldClass } = useGenerator({ props })
 
 // computed
 const hasResult = computed(() => Object.keys(props.result).length)
@@ -97,12 +97,6 @@ const headerClass = computed(() => {
   ]
 })
 
-const classes = computed(() => {
-  if (props.useInline) return 'row q-col-gutter-md'
-
-  return useGeneratorClasses.value
-})
-
 const fieldsByResult = ref({})
 
 /**
@@ -163,9 +157,7 @@ function setFieldsByResult () {
 }
 
 function getContainerClass ({ key }) {
-  if (props.useInline) {
-    return 'row justify-between col-12'
-  }
+  if (props.useInline) return 'row justify-between col-12'
 
   return getFieldClass({ index: key, isGridGenerator: true })
 }

package/src/components/label/QasLabel.vue

@@ -1,7 +1,7 @@
 <template>
-  <div :class="classes">
+  <component :is="props.typography" :class="classes">
     <slot :label-with-suffix="formattedLabel">{{ formattedLabel }}</slot>
-  </div>
+  </component>
 </template>
 
 <script setup>

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

@@ -15,7 +15,9 @@
         </div>
 
         <div v-else-if="!mx_isFetching">
-          <slot name="empty-results">
+          <slot v-if="mx_canShowFetchErrorSlot" name="fetch-error" />
+
+          <slot v-else name="empty-results">
             <qas-empty-result-text />
           </slot>
         </div>

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

@@ -97,6 +97,9 @@ slots:
   empty-results:
     desc: 'Slot acessar quando a listagem está vazia.'
 
+  fetch-error:
+    desc: Slot disponibilizado em caso de fetchError.
+
   filter:
     desc: 'Slot para acessar o filtro.'
 

package/src/components/single-view/QasSingleView.vue

@@ -8,7 +8,11 @@
       <slot />
     </template>
 
-    <qas-empty-result-text v-else-if="!viewState.fetching" class="q-my-xl" />
+    <div v-else-if="!viewState.fetching">
+      <slot v-if="canShowFetchErrorSlot" name="fetch-error" />
+
+      <qas-empty-result-text v-else class="q-my-xl" />
+    </div>
 
     <footer v-if="hasFooterSlot">
       <slot name="footer" />
@@ -71,6 +75,7 @@ const {
   componentClass,
   hasHeaderSlot,
   hasFooterSlot,
+  canShowFetchErrorSlot,
 
   // functions
   errorHandler,
@@ -94,7 +99,7 @@ const resultModel = computed(() => {
   return viewState.value.result || {}
 })
 
-const hasResult = computed(() => !!resultModel.value)
+const hasResult = computed(() => !!Object.keys(resultModel.value).length)
 
 // watch
 watch(() => route, (to, from) => {

package/src/components/single-view/QasSingleView.yml

@@ -71,6 +71,9 @@ slots:
   default:
     desc: 'Slot para ter o conteúdo principal (dentro do main).'
 
+  fetch-error:
+    desc: Slot disponibilizado em caso de fetchError.
+
   footer:
     desc: 'Slot para acessar o footer.'
 

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

@@ -1,5 +1,5 @@
 <template>
-  <qas-box class="q-px-lg q-py-md">
+  <component :is="parentComponent.is" v-bind="parentComponent.props">
     <q-table ref="table" class="bg-white qas-table-generator text-grey-8" v-bind="attributes">
       <template v-for="(_, name) in slots" #[name]="context">
         <slot :name="name" v-bind="context" />
@@ -15,7 +15,7 @@
         </q-td>
       </template>
     </q-table>
-  </qas-box>
+  </component>
 </template>
 
 <script>
@@ -57,6 +57,11 @@ export default {
       type: String
     },
 
+    useBox: {
+      type: Boolean,
+      default: true
+    },
+
     useScrollOnGrab: {
       type: Boolean,
       default: true
@@ -217,6 +222,15 @@ export default {
 
     hasScrollOnGrab () {
       return !!Object.keys(this.scrollOnGrab).length
+    },
+
+    parentComponent () {
+      return {
+        is: this.useBox ? 'qas-box' : 'div',
+        props: {
+          class: this.useBox ? 'q-px-lg q-py-md' : ''
+        }
+      }
     }
   },
 

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

@@ -36,6 +36,11 @@ props:
     type: Function
     examples: ["(row) => ({ path: 'table-generator', params: { id: row.uuid } })"]
 
+  use-box:
+    desc: Controla se o componente vai usar QasBox ou div.
+    default: true
+    type: Boolean
+
   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

package/src/composables/private/use-generator.js

@@ -21,7 +21,7 @@ export const baseProps = {
   },
 
   gutter: {
-    default: Spacing.Lg,
+    default: undefined,
     type: [String, Boolean],
     validator: gutterValidator
   }
@@ -46,13 +46,19 @@ export default function ({ props = {} }) {
   const classes = computed(() => {
     const classesList = ['row']
 
-    if (props.gutter) {
-      classesList.push(`q-col-gutter-${props.gutter}`)
+    if (defaultGutter.value) {
+      classesList.push(`q-col-gutter-${defaultGutter.value}`)
     }
 
     return classesList
   })
 
+  const defaultGutter = computed(() => {
+    if (props.gutter) return props.gutter
+
+    return props.useInline ? Spacing.Md : Spacing.Lg
+  })
+
   /**
    * @function
    * @param {Object} options

package/src/composables/private/use-view.js

@@ -80,6 +80,7 @@ export default function useView (config) {
 
   // refs
   const cancelBeforeFetch = ref(false)
+  const hasFetchError = ref(false)
 
   // constants
   const fetchErrorMessage = 'Ops… Não conseguimos acessar as informações. Por favor, tente novamente em alguns minutos.'
@@ -88,6 +89,8 @@ export default function useView (config) {
   const componentClass = computed(() => props.useBoundary && 'container spaced')
   const hasFooterSlot = computed(() => !!slots.footer)
   const hasHeaderSlot = computed(() => !!slots.header)
+  const hasFetchErrorSlot = computed(() => !!slots.fetchError)
+  const canShowFetchErrorSlot = computed(() => hasFetchErrorSlot.value && hasFetchError.value)
 
   // watch
   watch(() => viewState.value.fetching, value => emit('update:fetching', value))
@@ -111,6 +114,8 @@ export default function useView (config) {
       return
     }
 
+    hasFetchError.value = true
+
     NotifyError(fetchErrorMessage)
   }
 
@@ -167,6 +172,7 @@ export default function useView (config) {
     componentClass,
     hasFooterSlot,
     hasHeaderSlot,
+    canShowFetchErrorSlot,
 
     // functions
     errorHandler,

package/src/mixins/view.js

@@ -56,7 +56,8 @@ export default {
       mx_fields: {},
       mx_metadata: {},
       mx_cancelBeforeFetch: false,
-      mx_isFetching: false
+      mx_isFetching: false,
+      mx_hasFetchError: false
     }
   },
 
@@ -79,8 +80,16 @@ export default {
       return !!(this.$slots.header)
     },
 
+    mx_hasFetchErrorSlot () {
+      return !!(this.$slots.fetchError)
+    },
+
     mx_fetchErrorMessage () {
       return 'Ops… Não conseguimos acessar as informações. Por favor, tente novamente em alguns minutos.'
+    },
+
+    mx_canShowFetchErrorSlot () {
+      return this.mx_hasFetchError && this.mx_hasFetchErrorSlot
     }
   },
 
@@ -101,6 +110,8 @@ export default {
         return
       }
 
+      this.mx_hasFetchError = true
+
       this.$qas.error(this.mx_fetchErrorMessage)
     },