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

feat: uniformize components sizes (#68)

Browse Source
This commit is contained in:
Benjamin Canac
2024-04-16 12:26:29 +02:00
committed by GitHub
parent 78e45600de
commit f302a15972
96 changed files with 1854 additions and 1720 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
test/components/Toast.spec.ts
View File

@@ -4,6 +4,7 @@ import Toaster from '../../src/runtime/components/Toaster.vue'
import Toast, { type ToastProps } from '../../src/runtime/components/Toast.vue'
import ComponentRender from '../component-render'
import { ClientOnly } from '#components'
import theme from '#build/ui/toast'
const ToastWrapper = defineComponent({
components: {
@@ -16,19 +17,23 @@ const ToastWrapper = defineComponent({
})
describe('Toast', () => {
const colors = Object.keys(theme.variants.color) as any
it.each([
// Props
['with title', { props: { title: 'Toast' } }],
['with description', { props: { description: 'This is a toast' } }],
['with title & description', { props: { title: 'Toast', description: 'This is a toast' } }],
['with icon', { props: { icon: 'i-heroicons-rocket-launch', title: 'Toast' } }],
['with avatar', { props: { avatar: { src: 'https://avatars.githubusercontent.com/u/739984?v=4' }, title: 'Toast' } }],
['with color', { props: { color: 'green' as const, title: 'Toast' } }],
['with actions', { props: { title: 'Toast', actions: [{ label: 'Action' }] } }],
['with description actions', { props: { title: 'Toast', description: 'This is a toast', actions: [{ label: 'Action' }] } }],
['without close', { props: { title: 'Toast', close: null } }],
['with type', { props: { type: 'background' as const } }],
...colors.map((color: string) => [`with color ${color}`, { props: { color } }]),
['with class', { props: { class: 'bg-gray-50 dark:bg-gray-800/50' } }],
['with ui', { props: { title: 'Toast', ui: { title: 'font-bold' } } }],
// Slots
['with leading slot', { slots: { title: () => 'Leading slot' } }],
['with title slot', { slots: { title: () => 'Title slot' } }],
['with description slot', { slots: { description: () => 'Description slot' } }],