arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-14 12:14:41 +01:00
Code Issues Packages Projects Releases Wiki Activity

chore(Collapsible): add flex flex-col gap-2 on root

Browse Source
This commit is contained in:
Benjamin Canac
2024-07-30 16:46:42 +02:00
parent 0ddadc9b3b
commit cae27d5206
4 changed files with 8 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
playground/app/pages/components/collapsible.vue
View File

@@ -4,7 +4,7 @@ const appConfig = useAppConfig()
<template>
<div class="flex-1">
<UCollapsible class="space-y-2 w-48">
<UCollapsible class="w-48">
<UButton
class="group"
icon="i-heroicons-light-bulb"

2
src/theme/collapsible.ts
View File

@@ -1,6 +1,6 @@
export default {
slots: {
root: '',
root: 'flex flex-col gap-2',
content: 'data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden'
}
}

2
test/components/Collapsible.spec.ts
View File

@@ -8,7 +8,7 @@ describe('Collapsible', () => {
it.each([
// Props
['with open', { props }],
['with class', { props: { ...props, class: 'space-y-2' } }],
['with class', { props: { ...props, class: 'gap-4' } }],
['with ui', { props: { ...props, ui: { content: 'bg-gray-50 dark:bg-gray-800' } } }],
// Slots
['with default slot', { props, slots: { default: () => 'Default slot' } }],

10
test/components/__snapshots__/Collapsible.spec.ts.snap
View File

@@ -1,33 +1,33 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`Collapsible > renders with class correctly 1`] = `
"<div data-state="open" class="space-y-2">
"<div data-state="open" class="flex flex-col gap-4">
<!--v-if-->
<div class="data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden" id="radix-vue-collapsible-content-2" data-state="open" style="--radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;"></div>
</div>"
`;
exports[`Collapsible > renders with content slot correctly 1`] = `
"<div data-state="open">
"<div data-state="open" class="flex flex-col gap-2">
<!--v-if-->
<div class="data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden" id="radix-vue-collapsible-content-5" data-state="open" style="--radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;">Content slot</div>
</div>"
`;
exports[`Collapsible > renders with default slot correctly 1`] = `
"<div data-state="open">Default slot<div class="data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden" id="radix-vue-collapsible-content-4" data-state="open" style="--radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;"></div>
"<div data-state="open" class="flex flex-col gap-2">Default slot<div class="data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden" id="radix-vue-collapsible-content-4" data-state="open" style="--radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;"></div>
</div>"
`;
exports[`Collapsible > renders with open correctly 1`] = `
"<div data-state="open">
"<div data-state="open" class="flex flex-col gap-2">
<!--v-if-->
<div class="data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden" id="radix-vue-collapsible-content-1" data-state="open" style="--radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;"></div>
</div>"
`;
exports[`Collapsible > renders with ui correctly 1`] = `
"<div data-state="open">
"<div data-state="open" class="flex flex-col gap-2">
<!--v-if-->
<div class="data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden bg-gray-50 dark:bg-gray-800" id="radix-vue-collapsible-content-3" data-state="open" style="--radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;"></div>
</div>"