MrSphay/Modrinth-plus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add collapsible library groups in app (#5739)

Browse Source 
* feat: add collapsible library groups in app

* feat: use accordion rather than custom

---------

Co-authored-by: Calum H. <calum@modrinth.com>
Co-authored-by: Calum H. (IMB11) <contact@cal.engineer>
This commit is contained in:
kk
2026-04-16 16:44:52 +03:00
committed by GitHub
parent 7b5c746757
commit 3c2cc7568d
4 changed files with 88 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
packages/ui/src/components/base/Accordion.vue
View File

@@ -1,7 +1,30 @@
<template>
<div v-bind="$attrs">
<div v-if="divider && !!slots.title" class="flex items-center gap-4 mb-4">
<button
:class="
buttonClass ??
'group flex items-center gap-1 bg-transparent m-0 p-0 border-none cursor-pointer'
"
@click="() => (forceOpen ? undefined : toggledOpen ? close() : open())"
>
<slot name="button" :open="isOpen">
<div
class="flex items-center gap-1 whitespace-nowrap transition-colors text-primary group-hover:text-contrast"
>
<slot name="title" :open="isOpen" />
<DropdownIcon
v-if="!forceOpen"
class="size-5 transition-transform duration-300 shrink-0 text-secondary group-hover:text-primary"
:class="{ 'rotate-180': isOpen }"
/>
</div>
</slot>
</button>
<hr class="h-px w-full border-none bg-divider" aria-hidden="true" />
</div>
<button
v-if="!!slots.title"
v-else-if="!!slots.title"
:class="buttonClass ?? 'flex flex-col gap-2 bg-transparent m-0 p-0 border-none'"
@click="() => (forceOpen ? undefined : toggledOpen ? close() : open())"
>
@@ -44,6 +67,7 @@ const props = withDefaults(
titleWrapperClass?: string
forceOpen?: boolean
overflowVisible?: boolean
divider?: boolean
}>(),
{
type: 'standard',
@@ -53,6 +77,7 @@ const props = withDefaults(
titleWrapperClass: null,
forceOpen: false,
overflowVisible: false,
divider: false,
},
)

29
packages/ui/src/stories/base/Accordion.stories.ts
View File

@@ -156,6 +156,35 @@ export const NestedContent: StoryObj = {
}),
}
export const Divider: StoryObj = {
render: () => ({
components: { Accordion },
template: /*html*/ `
<div class="flex flex-col gap-4">
<Accordion divider open-by-default>
<template #title>
<span class="text-base font-semibold text-contrast">Category A</span>
</template>
<div class="mt-2 flex flex-wrap gap-2">
<span class="px-3 py-2 bg-bg-raised rounded text-sm">Item 1</span>
<span class="px-3 py-2 bg-bg-raised rounded text-sm">Item 2</span>
<span class="px-3 py-2 bg-bg-raised rounded text-sm">Item 3</span>
</div>
</Accordion>
<Accordion divider>
<template #title>
<span class="text-base font-semibold text-contrast">Category B</span>
</template>
<div class="mt-2 flex flex-wrap gap-2">
<span class="px-3 py-2 bg-bg-raised rounded text-sm">Item 4</span>
<span class="px-3 py-2 bg-bg-raised rounded text-sm">Item 5</span>
</div>
</Accordion>
</div>
`,
}),
}
export const AllStates: StoryObj = {
render: () => ({
components: { Accordion },