@bildvitta/quasar-ui-asteroid 3.17.0-beta.24 → 3.17.0-beta.25

package/package.json

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

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

@@ -1,6 +1,6 @@
 <template>
   <div ref="expansionItem" class="full-width qas-expansion-item" :class="classes" v-bind="expansionProps.parent">
-    <component :is="component.is" class="qas-expansion-item__box" v-bind="boxProps">
+    <qas-box class="qas-expansion-item__box" v-bind="boxProps">
       <q-expansion-item v-model="modelValue" v-bind="expansionProps.item" header-class="text-bold q-mt-sm q-pa-none qas-expansion-item__header" @show="setShowContent">
         <template #header>
           <div class="full-width justify-between no-wrap row">
@@ -28,17 +28,13 @@
           </div>
         </template>
 
-        <q-separator v-if="hasHeaderSeparator" class="q-my-md" />
-
         <div :class="contentClasses">
           <slot v-if="showContent" 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>
-    </component>
+    </qas-box>
 
     <div v-if="hasError" class="q-pt-sm qas-expansion-item__error-message text-caption text-negative">
       {{ props.errorMessage }}
@@ -49,7 +45,7 @@
 <script setup>
 import QasBox from '../box/QasBox.vue'
 
-import { computed, provide, inject, onMounted, ref, useAttrs } from 'vue'
+import { computed, provide, inject, ref, useAttrs } from 'vue'
 
 defineOptions({
   name: 'QasExpansionItem',
@@ -97,11 +93,6 @@ const props = defineProps({
   maxContentHeight: {
     type: String,
     default: ''
-  },
-
-  useHeaderSeparator: {
-    type: Boolean,
-    default: undefined
   }
 })
 
@@ -116,37 +107,18 @@ const slots = defineSlots()
 
 // refs
 const expansionItem = ref(null)
-const hasNextSibling = ref(false)
 const showContent = ref(false)
 
-onMounted(setHasNextSibling)
-
 // constants
 const isNestedExpansionItem = inject('isExpansionItem', false)
 const isNestedBox = inject('isBox', false)
 
-const component = {
-  is: isNestedExpansionItem ? 'div' : QasBox
-}
-
 // computed
 const hasBadges = computed(() => !!props.badges.length)
 const hasError = computed(() => props.error || !!props.errorMessage)
 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 classes = computed(() => {
   return {
     'qas-expansion-item--error': hasError.value,
@@ -157,8 +129,7 @@ const classes = computed(() => {
 
 const contentClasses = computed(() => {
   return {
-    'q-mt-sm': isNestedExpansionItem,
-    'q-mt-md': !isNestedExpansionItem && !props.useHeaderSeparator,
+    'q-mt-md': true,
     'qas-expansion-item__content overflow-auto': !!props.maxContentHeight
   }
 })
@@ -196,10 +167,10 @@ const expansionProps = computed(() => {
 
 const boxProps = computed(() => {
   /**
-   * Caso o QasExpansionItem estiver dentro de um QasBox e não for um QasExpansionItem
+   * Caso o QasExpansionItem estiver dentro de um QasBox ou for um QasExpansionItem
    * dentro de outro QasExpansionItem, o componente terá uma borda.
   */
-  const isBoxed = isNestedBox && !isNestedExpansionItem
+  const isBoxed = isNestedBox || isNestedExpansionItem
 
   if (!isBoxed) return {}
 
@@ -212,20 +183,6 @@ const boxProps = computed(() => {
 const isDisabled = computed(() => props.disable || props.disableButton)
 
 // functions
-
-/**
- * Caso o componente esteja dentro de um QasExpansionItem, verifica se existe um próximo irmão
- * para adicionar um separador.
- */
-function setHasNextSibling () {
-  if (!isNestedExpansionItem) return
-
-  const hasTextContentSibling = !!expansionItem.value.nextSibling?.textContent?.trim?.()
-  const hasElementSibling = !!expansionItem.value.nextElementSibling
-
-  hasNextSibling.value = hasElementSibling || hasTextContentSibling
-}
-
 function setShowContent () {
   showContent.value = true
 }

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

@@ -49,11 +49,6 @@ 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 (não inclui o botão dropdown).