mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-24 00:40:34 +01:00
refactor(module)!: implement design system with CSS variables (#2298)
This commit is contained in:
@@ -21,7 +21,7 @@ const groups = computed(() => [{
|
||||
<UModal>
|
||||
<UButton
|
||||
label="Search users..."
|
||||
color="gray"
|
||||
color="neutral"
|
||||
variant="subtle"
|
||||
icon="i-heroicons-magnifying-glass"
|
||||
/>
|
||||
|
||||
@@ -9,7 +9,7 @@ defineProps<{
|
||||
<template>
|
||||
<UModal :title="`This modal was opened programmatically ${count} times`">
|
||||
<template #footer>
|
||||
<UButton color="gray" label="Close" @click="modal.close()" />
|
||||
<UButton color="neutral" label="Close" @click="modal.close()" />
|
||||
</template>
|
||||
</UModal>
|
||||
</template>
|
||||
|
||||
@@ -4,15 +4,15 @@ const open = ref(false)
|
||||
|
||||
<template>
|
||||
<UModal v-model:open="open" title="Modal with footer" description="This is useful when you want a form in a Modal." :ui="{ footer: 'justify-end' }">
|
||||
<UButton label="Open" color="gray" variant="subtle" />
|
||||
<UButton label="Open" color="neutral" variant="subtle" />
|
||||
|
||||
<template #body>
|
||||
<Placeholder class="h-48" />
|
||||
</template>
|
||||
|
||||
<template #footer>
|
||||
<UButton label="Cancel" color="gray" variant="outline" @click="open = false" />
|
||||
<UButton label="Submit" color="gray" />
|
||||
<UButton label="Cancel" color="neutral" variant="outline" @click="open = false" />
|
||||
<UButton label="Submit" color="neutral" />
|
||||
</template>
|
||||
</UModal>
|
||||
</template>
|
||||
|
||||
@@ -5,16 +5,16 @@ const second = ref(false)
|
||||
|
||||
<template>
|
||||
<UModal v-model:open="first" title="First modal" :ui="{ footer: 'justify-end' }">
|
||||
<UButton color="gray" variant="subtle" label="Open" />
|
||||
<UButton color="neutral" variant="subtle" label="Open" />
|
||||
|
||||
<template #footer>
|
||||
<UButton label="Close" color="gray" variant="outline" @click="first = false" />
|
||||
<UButton label="Close" color="neutral" variant="outline" @click="first = false" />
|
||||
|
||||
<UModal v-model:open="second" title="Second modal" :ui="{ footer: 'justify-end' }">
|
||||
<UButton label="Open second" color="gray" />
|
||||
<UButton label="Open second" color="neutral" />
|
||||
|
||||
<template #footer>
|
||||
<UButton label="Close" color="gray" variant="outline" @click="second = false" />
|
||||
<UButton label="Close" color="neutral" variant="outline" @click="second = false" />
|
||||
</template>
|
||||
</UModal>
|
||||
</template>
|
||||
|
||||
@@ -8,7 +8,7 @@ defineShortcuts({
|
||||
|
||||
<template>
|
||||
<UModal v-model:open="open">
|
||||
<UButton label="Open" color="gray" variant="subtle" />
|
||||
<UButton label="Open" color="neutral" variant="subtle" />
|
||||
|
||||
<template #content>
|
||||
<Placeholder class="h-48 m-4" />
|
||||
|
||||
@@ -16,5 +16,5 @@ function open() {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UButton label="Open" color="gray" variant="subtle" @click="open" />
|
||||
<UButton label="Open" color="neutral" variant="subtle" @click="open" />
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user