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(Card): improve spacing

Browse Source
This commit is contained in:
Benjamin Canac
2024-03-18 17:18:45 +01:00
parent 73880f798d
commit a7cb28a50e
3 changed files with 22 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
playground/pages/card.vue
View File

@@ -1,13 +1,19 @@
<template>
<UCard class="w-96">
<template #header>
<Placeholder class="h-8" />
</template>
<div class="flex flex-col gap-4">
<UCard class="w-96">
<template #header>
<Placeholder class="h-8" />
</template>
<Placeholder class="h-32" />
<Placeholder class="h-32" />
<template #footer>
<Placeholder class="h-8" />
</template>
</UCard>
<template #footer>
<Placeholder class="h-8" />
</template>
</UCard>
<UCard class="w-96">
<Placeholder class="h-32" />
</UCard>
</div>
</template>

2
src/theme/card.ts
View File

@@ -1,6 +1,6 @@
export default {
slots: {
root: 'bg-white dark:bg-gray-900 ring ring-gray-200 dark:ring-gray-800 rounded-lg shadow',
root: 'bg-white dark:bg-gray-900 ring ring-gray-200 dark:ring-gray-800 divide-y divide-gray-200 dark:divide-gray-800 rounded-lg shadow',
header: 'p-4 sm:px-6',
body: 'p-4 sm:p-6',
footer: 'p-4 sm:px-6'

12
test/components/__snapshots__/Card.spec.ts.snap
View File

@@ -1,7 +1,7 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`Card > renders basic case correctly 1`] = `
"<div class="bg-white dark:bg-gray-900 ring ring-gray-200 dark:ring-gray-800 rounded-lg shadow">
"<div class="bg-white dark:bg-gray-900 ring ring-gray-200 dark:ring-gray-800 divide-y divide-gray-200 dark:divide-gray-800 rounded-lg shadow">
<!--v-if-->
<!--v-if-->
<!--v-if-->
@@ -9,7 +9,7 @@ exports[`Card > renders basic case correctly 1`] = `
`;
exports[`Card > renders with as correctly 1`] = `
"<section class="bg-white dark:bg-gray-900 ring ring-gray-200 dark:ring-gray-800 rounded-lg shadow">
"<section class="bg-white dark:bg-gray-900 ring ring-gray-200 dark:ring-gray-800 divide-y divide-gray-200 dark:divide-gray-800 rounded-lg shadow">
<!--v-if-->
<!--v-if-->
<!--v-if-->
@@ -17,7 +17,7 @@ exports[`Card > renders with as correctly 1`] = `
`;
exports[`Card > renders with class correctly 1`] = `
"<div class="bg-white dark:bg-gray-900 ring ring-gray-200 dark:ring-gray-800 shadow rounded-xl">
"<div class="bg-white dark:bg-gray-900 ring ring-gray-200 dark:ring-gray-800 divide-y divide-gray-200 dark:divide-gray-800 shadow rounded-xl">
<!--v-if-->
<!--v-if-->
<!--v-if-->
@@ -25,7 +25,7 @@ exports[`Card > renders with class correctly 1`] = `
`;
exports[`Card > renders with default slot correctly 1`] = `
"<div class="bg-white dark:bg-gray-900 ring ring-gray-200 dark:ring-gray-800 rounded-lg shadow">
"<div class="bg-white dark:bg-gray-900 ring ring-gray-200 dark:ring-gray-800 divide-y divide-gray-200 dark:divide-gray-800 rounded-lg shadow">
<!--v-if-->
<div class="p-4 sm:p-6">Default slot</div>
<!--v-if-->
@@ -33,7 +33,7 @@ exports[`Card > renders with default slot correctly 1`] = `
`;
exports[`Card > renders with footer slot correctly 1`] = `
"<div class="bg-white dark:bg-gray-900 ring ring-gray-200 dark:ring-gray-800 rounded-lg shadow">
"<div class="bg-white dark:bg-gray-900 ring ring-gray-200 dark:ring-gray-800 divide-y divide-gray-200 dark:divide-gray-800 rounded-lg shadow">
<!--v-if-->
<!--v-if-->
<div class="p-4 sm:px-6">Footer slot</div>
@@ -41,7 +41,7 @@ exports[`Card > renders with footer slot correctly 1`] = `
`;
exports[`Card > renders with header slot correctly 1`] = `
"<div class="bg-white dark:bg-gray-900 ring ring-gray-200 dark:ring-gray-800 rounded-lg shadow">
"<div class="bg-white dark:bg-gray-900 ring ring-gray-200 dark:ring-gray-800 divide-y divide-gray-200 dark:divide-gray-800 rounded-lg shadow">
<div class="p-4 sm:px-6">Header slot</div>
<!--v-if-->
<!--v-if-->