Merge pull request #1213 from bildvitta/feature/expansion-item-header…

…-left feat(QasExpansionItem): HeaderSlot full width
bildvitta · Nov 13, 2024 · a0016b3 · a0016b3
2 parents 4070fdf + c04caac
commit a0016b3
Show file tree

Hide file tree

Showing 5 changed files with 67 additions and 29 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -10,6 +10,23 @@ Neste arquivo (CHANGELOG.MD) você encontrará somente as mudanças referentes a
 ### Sobre os "BREAKING CHANGES"
 Podemos ter pequenas breaking changes sem alterar o `major` version, apesar de serem pequenas, podem alterar o comportamento da funcionalidade caso não seja feita uma atualização, **preste muita atenção** nas breaking changes dentro das versões quando existirem.
 
+## Não publicado
+## BREAKING CHANGES
+- `QasExpansionItem`:
+  - Renomeado slot `label` para `header-label`.
+  - Removido slot `header-left` (agora o `header` tem o mesmo comportamento que o `header-left`).
+
+### Corrigido
+- `QasExpansionItem`: Corrigido direção do ícone de dropdown.
+
+### Modificado
+- `QasExpansionItem`:
+  - Modificado slot `header` para ele ser o antigo `header-left`, pegando toda a largura do conteúdo menos o ícone.
+  - Renomeado slot `label` para `header-label`.
+
+### Removido
+- `QasExpansionItem`: Removido slot `header-left` (agora o `header` tem o mesmo comportamento que o `header-left`).
+
 ## [3.17.0-beta.16] - 11-11-2024
 ## BREAKING CHANGES
 - `QasRadio` e `QasCheckbox`: Adicionado label por padrão a partir do field, caso tenha lugares que são feitos a mão, irá duplicar a label.
@@ -3325,4 +3342,4 @@ Adicionado suporte para Pinia/Vuex Seguindo os padrões da biblioteca `@bildvitt
 [3.16.1]: https://github.com/bildvitta/asteroid/compare/v3.16.0...v3.16.1?expand=1
 [3.16.2]: https://github.com/bildvitta/asteroid/compare/v3.16.1...v3.16.2?expand=1
 [3.17.0-beta.15]: https://github.com/bildvitta/asteroid/compare/v3.16.2...v3.17.0-beta.15?expand=1
-[3.17.0-beta.16]: https://github.com/bildvitta/asteroid/compare/v3.17.0-beta.15...v3.17.0-beta.16?expand=1
+[3.17.0-beta.16]: https://github.com/bildvitta/asteroid/compare/v3.17.0-beta.15...v3.17.0-beta.16?expand=1
diff --git a/docs/src/examples/QasExpansionItem/HeaderSlot.vue b/docs/src/examples/QasExpansionItem/HeaderSlot.vue
@@ -0,0 +1,27 @@
+<template>
+  <div class="container spaced">
+    <qas-expansion-item label="John Doe">
+      <template #header>
+        <div class="items-center justify-between row">
+          <qas-label label="Meu titulo" margin="none" typography="h5" />
+
+          <div class="text-body1 text-grey-8">
+            {{ date }}
+          </div>
+        </div>
+      </template>
+
+      <template #content>
+        Meu conteúdo customizado
+      </template>
+    </qas-expansion-item>
+  </div>
+</template>
+
+<script setup>
+import { dateTime } from '@bildvitta/quasar-ui-asteroid/src/helpers'
+
+defineOptions({ name: 'HeaderLeftSlot' })
+
+const date = dateTime('2023-01-11T14:58:40.000000Z')
+</script>
diff --git a/docs/src/pages/components/expansion-item.md b/docs/src/pages/components/expansion-item.md
@@ -22,6 +22,7 @@ Componente de card expansivo, wrapper do QExpansionItem(https://quasar.dev/vue-c
 <doc-example file="QasExpansionItem/WithMaxContentHeight" title="Com limite de altura no conteúdo" />
 <doc-example file="QasExpansionItem/Slot" title="Slot" />
 <doc-example file="QasExpansionItem/Nested" title="Nested" />
+<doc-example file="QasExpansionItem/HeaderSlot" title="Header Slot" />
 <doc-example file="QasExpansionItem/HeaderBottomSlot" title="HeaderBottomSlot" />
 <doc-example file="QasExpansionItem/Error" title="Com erro" />
 <doc-example file="QasExpansionItem/WithBox" title="Dentro de um QasBox" />

diff --git a/ui/src/components/expansion-item/QasExpansionItem.vue b/ui/src/components/expansion-item/QasExpansionItem.vue
@@ -3,33 +3,29 @@
     <component :is="component.is" 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">
         <template #header>
-          <slot name="header">
-            <div class="full-width justify-between no-wrap row">
-              <div>
-                <slot name="header-left">
-                  <div class="items-center q-col-gutter-sm row">
-                    <slot name="label">
-                      <h5 class="col-auto qas-expansion-item__label text-h5">
-                        {{ props.label }}
-                      </h5>
-                    </slot>
-
-                    <div v-if="hasBadges" class="col-auto items-center q-col-gutter-sm row">
-                      <div v-for="(badge, badgeIndex) in props.badges" :key="badgeIndex" class="col-auto">
-                        <qas-badge v-bind="badge" />
-                      </div>
+          <div class="full-width justify-between no-wrap row">
+            <div class="full-width">
+              <slot name="header">
+                <div class="items-center q-col-gutter-sm row">
+                  <slot name="header-label">
+                    <qas-label class="col-auto qas-expansion-item__label" :label="props.label" margin="none" typography="h5" />
+                  </slot>
+
+                  <div v-if="hasBadges" class="col-auto items-center q-col-gutter-sm row">
+                    <div v-for="(badge, badgeIndex) in props.badges" :key="badgeIndex" class="col-auto">
+                      <qas-badge v-bind="badge" />
                     </div>
                   </div>
+                </div>
 
-                  <div v-if="hasHeaderBottom" class="q-mt-sm">
-                    <slot name="header-bottom" />
-                  </div>
-                </slot>
-              </div>
-
-              <qas-btn class="qas-expansion-item__dropdown" color="grey-10" :disable="isDisabled" icon="sym_r_keyboard_arrow_up" />
+                <div v-if="hasHeaderBottom" class="q-mt-sm">
+                  <slot name="header-bottom" />
+                </div>
+              </slot>
             </div>
-          </slot>
+
+            <qas-btn class="qas-expansion-item__dropdown" color="grey-10" :disable="isDisabled" icon="sym_r_keyboard_arrow_down" />
+          </div>
         </template>
 
         <q-separator v-if="hasHeaderSeparator" class="q-my-md" />

diff --git a/ui/src/components/expansion-item/QasExpansionItem.yml b/ui/src/components/expansion-item/QasExpansionItem.yml
@@ -56,15 +56,12 @@ props:
 
 slots:
   header:
-    desc: Slot para substituir o conteúdo do header (incluindo o botão dropdown).
+    desc: Slot para substituir o conteúdo do header (não inclui o botão dropdown).
 
   header-bottom:
     desc: Slot para acessar o conteúdo que fica abaixo do header.
 
-  header-left:
-    desc: Slot para substituir o conteúdo do header á esquerda (não inclui o botão dropdown).
-
-  label:
+  header-label:
     desc: Slot para substituir o conteúdo da label do header.
 
   content: