refactor(ui): [WIP] tabs with links are activated when name matches in Url

This commit is contained in:
upsiflu 2025-02-11 10:08:33 +01:00
parent d9302789bd
commit 0caee2181d
3 changed files with 5 additions and 2 deletions

View File

@ -17,8 +17,9 @@ provide(TABS_INJECTION_KEY, {
tabs: tabs, tabs: tabs,
}) })
/* Note that this only compares the name. Make sure to add a `name` field to identify paths in your router config! */
const actualCurrentTitle = computed(() => const actualCurrentTitle = computed(() =>
tabs.find(({ to })=>currentRoute.matched.some(route => typeof to === 'string' ? route.path === to : to && 'path' in to && route.path === to.path))?.title tabs.find(({ to })=> to && typeof to !== 'string' && 'name' in to && currentRoute.name === to?.name)?.title
|| currentTitle.value) || currentTitle.value)
const currentIndex = computed(() => const currentIndex = computed(() =>

View File

@ -164,7 +164,7 @@ const recentActivity = ref(0)
> >
<a <a
href="" href=""
@click.stop.prevent="showUploadModal = true" @click.stop.prevent="/*showUploadModal = true*/"
> >
<i class="bi bi-plus" /> <i class="bi bi-plus" />
{{ t('views.auth.ProfileOverview.link.addNew') }} {{ t('views.auth.ProfileOverview.link.addNew') }}

View File

@ -85,3 +85,5 @@ You can add a template to the right side of the tabs using the `#tabs-right` dir
If the tab content covers most of the page, users will expect that they can navigate to the previous tab with the "back" button of the browser ([See Navigation](./navigation.md)). If the tab content covers most of the page, users will expect that they can navigate to the previous tab with the "back" button of the browser ([See Navigation](./navigation.md)).
In this case, add the `:to` prop to each tab, and place a `RouterView` with the intended props of the route's component into its default slot. In this case, add the `:to` prop to each tab, and place a `RouterView` with the intended props of the route's component into its default slot.
Note that this only compares the name. Make sure to add a `name` field to identify paths in your router config!