Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix Tab-Group Header not displayed #2557

Merged
merged 11 commits into from
Jul 13, 2024
Merged

Fix Tab-Group Header not displayed #2557

Changes from 2 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
ab7984b
Add content to named slot
gerteck Jun 13, 2024
624fa5b
Remove header prop
gerteck Jun 13, 2024
f92b856
Add props for TabGroup header
gerteck Jun 20, 2024
c213c5c
Update tabgroup header prop name
gerteck Jul 1, 2024
b1a0055
Update tab group header prop
gerteck Jul 1, 2024
a5c6934
Add slot for header back
gerteck Jul 4, 2024
1dd2449
Rename prop name
gerteck Jul 4, 2024
2168083
Add Tabset, Tab, Tabgroup snapshot test
gerteck Jul 4, 2024
0cdf3d0
Merge branch 'master' into branch-TabGroupHeaderFix
gerteck Jul 4, 2024
a5da4c4
Refactor import
gerteck Jul 4, 2024
49ab2db
Merge branch 'branch-TabGroupHeaderFix' of https://github.com/gerteck…
gerteck Jul 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion packages/vue-components/src/Tabset.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,10 +24,12 @@
v-else
:key="index"
class="nav-item"
:header="t.headerRendered"
:class="{active:t.active}"
:disabled="t.disabled"
>
<template #header>
<span v-html="t.headerRendered"></span>
</template>
Copy link
Contributor

@lhw-1 lhw-1 Jun 15, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Instead of making this change (since we rely on the conversions from slots to templates, and do not use header templates directly in our .vue files), a suggestion I have is to just directly treat the header as a prop instead, without relying on slot conversion?

In Dropdown.vue, we can first include the header as a prop:

props: {
  ...
  header: {
    type: String,
    default: '',
  },
  ...

And then we can replace the <slot name="header"></slot> under the v-if, with {{ header }}. We could also rename header to something like tabgroup-header to differentiate it as well.

This might be a less hacky solution, but if we can investigate the issue deeper and find a better solution, that would be best 👍

<li v-for="(tab, tabIndex) in t.tabs" :key="tabIndex">
<a
class="nav-link"
Expand Down
Loading