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

feat(components): uniformize colors and variants (#141)

Browse Source
This commit is contained in:
Benjamin Canac
2024-07-09 10:45:26 +02:00
committed by GitHub
parent 18c5ead1bd
commit c018c23224
115 changed files with 4366 additions and 4191 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
playground/app/components/FormElementsExample.vue
View File

@@ -99,7 +99,7 @@ function onSubmit(event: FormSubmitEvent<Schema>) {
Submit
</UButton>
<UButton variant="outline" :disabled="form?.disabled" @click="form?.clear()">
<UButton color="gray" variant="outline" :disabled="form?.disabled" @click="form?.clear()">
Clear
</UButton>
</div>

4
playground/app/components/FormNestedListExample.vue
View File

@@ -68,11 +68,11 @@ function onError(event: any) {
</UForm>
<div class="flex gap-2">
<UButton color="black" @click="addItem()">
<UButton color="gray" variant="subtle" size="sm" @click="addItem()">
Add Item
</UButton>
<UButton color="black" variant="ghost" @click="removeItem()">
<UButton color="gray" variant="ghost" size="sm" @click="removeItem()">
Remove Item
</UButton>
</div>

52
playground/app/pages/alert.vue
View File

@@ -3,9 +3,9 @@ import theme from '#build/ui/alert'
const variants = Object.keys(theme.variants.variant) as Array<keyof typeof theme.variants.variant>
const actions = (variant?: string) => [{
const actions = (color: string) => [{
label: 'Action',
color: (variant === 'solid' ? 'black' as const : 'primary' as const),
color: color as any,
click() {
console.log('Action clicked')
}
@@ -15,29 +15,39 @@ const data = {
title: 'Heads up!',
description: 'You can add components to your app using the cli.',
icon: 'i-heroicons-command-line',
actions: actions(),
close: true
}
</script>
<template>
<div class="flex flex-col gap-2 flex-1">
<UAlert :title="data.title" />
<UAlert :title="data.title" :icon="data.icon" />
<UAlert :title="data.title" :icon="data.icon" :close="data.close" />
<UAlert :title="data.title" :icon="data.icon" :close="data.close" :actions="data.actions" />
<UAlert :title="data.title" :icon="data.icon" :close="data.close" :description="data.description" />
<UAlert :title="data.title" :avatar="{ src: 'https://avatars.githubusercontent.com/u/739984?v=4' }" :close="data.close" :description="data.description" />
<UAlert v-bind="data" color="white" />
<UAlert v-bind="data" color="gray" />
<UAlert v-bind="data" color="black" />
<UAlert
v-for="variant in variants"
:key="variant"
v-bind="data"
:actions="actions(variant)"
color="primary"
:variant="variant"
/>
<div class="flex flex-col gap-4 flex-1 items-center">
<div class="flex flex-col gap-2 w-96">
<UAlert :title="data.title" />
<UAlert :title="data.title" :icon="data.icon" />
<UAlert :title="data.title" :icon="data.icon" :close="data.close" />
<UAlert :title="data.title" :icon="data.icon" :close="data.close" :actions="actions('primary')" />
<UAlert :title="data.title" :icon="data.icon" :close="data.close" :description="data.description" />
<UAlert :title="data.title" :avatar="{ src: 'https://avatars.githubusercontent.com/u/739984?v=4' }" :close="data.close" :description="data.description" />
</div>
<div class="flex items-center gap-2">
<UAlert
v-for="variant in variants"
:key="variant"
v-bind="data"
:actions="actions('gray')"
:variant="variant"
/>
</div>
<div class="flex items-center gap-2">
<UAlert
v-for="variant in variants"
:key="variant"
v-bind="data"
:actions="actions('primary')"
color="gray"
:variant="variant"
/>
</div>
</div>
</template>

11
playground/app/pages/badge.vue
View File

@@ -1,4 +1,5 @@
<script setup lang="ts">
import { upperFirst } from 'scule'
import theme from '#build/ui/badge'
const sizes = Object.keys(theme.variants.size) as Array<keyof typeof theme.variants.size>
@@ -13,16 +14,10 @@ const variants = Object.keys(theme.variants.variant) as Array<keyof typeof theme
</UBadge>
</div>
<div class="flex items-center gap-2">
<UBadge v-for="variant in variants" :key="variant" label="Badge" :variant="variant" />
<UBadge v-for="variant in variants" :key="variant" :label="upperFirst(variant)" :variant="variant" />
</div>
<div class="flex items-center gap-2">
<UBadge label="Badge" color="white" />
</div>
<div class="flex items-center gap-2">
<UBadge label="Badge" color="gray" />
</div>
<div class="flex items-center gap-2">
<UBadge label="Badge" color="black" />
<UBadge v-for="variant in variants" :key="variant" :label="upperFirst(variant)" :variant="variant" color="gray" />
</div>
<div class="flex items-center gap-2 ml-[-56px]">
<UBadge v-for="size in sizes" :key="size" label="Badge" :size="size" />

2
playground/app/pages/breadcrumb.vue
View File

@@ -25,7 +25,7 @@ const items = [{
<UBreadcrumb :items="items">
<template #dropdown="{ item }">
<UDropdownMenu :items="item.children">
<UButton :icon="item.icon" color="gray" variant="link" class="p-0" />
<UButton :icon="item.icon" color="gray" variant="link" class="p-0.5" />
</UDropdownMenu>
</template>
</UBreadcrumb>

40
playground/app/pages/button-group.vue
View File

@@ -8,48 +8,52 @@ const sizes = Object.keys(theme.variants.size) as Array<keyof typeof theme.varia
<div class="flex flex-col gap-4 items-center">
<div class="flex flex-col gap-4 -ml-[110px]">
<UButtonGroup>
<UButton> Click me! </UButton>
<UButton>Button</UButton>
</UButtonGroup>
<UButtonGroup>
<UInput />
<UInput placeholder="Search..." />
</UButtonGroup>
<UButtonGroup>
<UButton> Click me! </UButton>
<UButton color="white">
Click me!
<UButton color="gray" variant="outline">
Button
</UButton>
<UButton color="gray" variant="subtle">
Button
</UButton>
<UButton color="gray" variant="outline">
Button
</UButton>
<UButton> Click me! </UButton>
</UButtonGroup>
<UButtonGroup orientation="vertical">
<UButton color="white">
Click me!
<UButton color="gray" variant="outline">
Button
</UButton>
<UInput />
<UInput placeholder="Search..." />
</UButtonGroup>
<UButtonGroup>
<UButton color="white">
Click me!
<UButton color="gray" variant="outline">
Button
</UButton>
<UInput />
<UInput placeholder="Search..." />
</UButtonGroup>
<UButtonGroup>
<UInput />
<UButton color="white">
Click me!
<UInput placeholder="Search..." />
<UButton color="gray" variant="outline">
Button
</UButton>
</UButtonGroup>
</div>
<div class="flex gap-4 items-center justify-center">
<UButtonGroup v-for="size in sizes" :key="size" :size="size">
<UInput />
<UButton color="white">
Click me!
<UInput placeholder="Search..." />
<UButton color="gray" variant="outline">
Button
</UButton>
</UButtonGroup>
</div>

24
playground/app/pages/button.vue
View File

@@ -1,4 +1,5 @@
<script setup lang="ts">
import { upperFirst } from 'scule'
import theme from '#build/ui/button'
const sizes = Object.keys(theme.variants.size) as Array<keyof typeof theme.variants.size>
@@ -28,22 +29,17 @@ const variants = Object.keys(theme.variants.variant) as Array<keyof typeof theme
</UButton>
</div>
<div class="flex items-center gap-2">
<UButton v-for="variant in variants" :key="variant" icon="i-heroicons-rocket-launch" label="Button" :variant="variant" />
<UButton v-for="variant in variants" :key="variant" icon="i-heroicons-rocket-launch" :label="upperFirst(variant)" :variant="variant" />
</div>
<div class="flex items-center gap-2">
<UButton icon="i-heroicons-rocket-launch" label="Button" color="white" />
<UButton icon="i-heroicons-rocket-launch" label="Button" color="white" variant="ghost" />
<UButton icon="i-heroicons-rocket-launch" label="Button" color="white" variant="link" />
</div>
<div class="flex items-center gap-2">
<UButton icon="i-heroicons-rocket-launch" label="Button" color="gray" />
<UButton icon="i-heroicons-rocket-launch" label="Button" color="gray" variant="ghost" />
<UButton icon="i-heroicons-rocket-launch" label="Button" color="gray" variant="link" />
</div>
<div class="flex items-center gap-2">
<UButton icon="i-heroicons-rocket-launch" label="Button" color="black" />
<UButton icon="i-heroicons-rocket-launch" label="Button" color="black" variant="ghost" />
<UButton icon="i-heroicons-rocket-launch" label="Button" color="black" variant="link" />
<UButton
v-for="variant in variants"
:key="variant"
icon="i-heroicons-rocket-launch"
:label="upperFirst(variant)"
:variant="variant"
color="gray"
/>
</div>
<div class="flex items-center gap-2 ml-[-129px]">
<UButton v-for="size in sizes" :key="size" label="Button" :size="size" />

9
playground/app/pages/checkbox.vue
View File

@@ -3,19 +3,20 @@ import theme from '#build/ui/checkbox'
const sizes = Object.keys(theme.variants.size) as Array<keyof typeof theme.variants.size>
const checked = ref(false)
const checked = ref(true)
</script>
<template>
<div class="flex flex-col items-center gap-4">
<div class="flex flex-col gap-4">
<UCheckbox v-model="checked" label="Model" />
<UCheckbox v-model="checked" label="Primary" />
<UCheckbox label="Gray" color="gray" :default-value="true" />
<UCheckbox label="Error" color="error" icon="i-heroicons-heart-solid" :model-value="true" />
<UCheckbox label="Icon" icon="i-heroicons-heart-solid" :model-value="true" />
<UCheckbox label="Default value" :default-value="true" />
<UCheckbox label="Indeterminate" indeterminate />
<UCheckbox label="Required" required />
<UCheckbox label="Disabled" disabled />
<UCheckbox label="Black" color="black" :default-value="true" />
<UCheckbox label="Icon" color="red" icon="i-heroicons-heart-solid" :model-value="true" />
</div>
<div class="flex items-center gap-4 mr-[-11px]">
<UCheckbox v-for="size in sizes" :key="size" label="Check me" :size="size" />

4
playground/app/pages/chip.vue
View File

@@ -19,13 +19,13 @@ const items = [{
<div class="flex flex-col gap-4">
<div class="flex items-center gap-2">
<UChip v-for="position in positions" :key="position" :position="position">
<UButton icon="i-heroicons-inbox" color="gray" />
<UButton icon="i-heroicons-inbox" color="gray" variant="subtle" />
</UChip>
</div>
<div class="flex items-center gap-2">
<UChip v-for="{ name, icon, count } in items" :key="name" :text="count" :show="count > 0" size="lg">
<UButton :icon="icon" color="gray" />
<UButton :icon="icon" color="gray" variant="subtle" />
</UChip>
</div>

1
playground/app/pages/collapsible.vue
View File

@@ -10,6 +10,7 @@ const appConfig = useAppConfig()
icon="i-heroicons-light-bulb"
:trailing-icon="appConfig.ui.icons.chevronDown"
color="gray"
variant="outline"
label="Open"
block
:ui="{ trailingIcon: 'group-data-[state=open]:rotate-180 transition-transform duration-200' }"

6
playground/app/pages/command-palette.vue
View File

@@ -114,7 +114,7 @@ defineShortcuts({
<div class="flex-1 flex flex-col gap-12 w-full max-w-lg">
<div class="flex items-center justify-between gap-2 mt-[58px]">
<UModal v-model:open="open">
<UButton label="Open modal" color="gray" />
<UButton label="Open modal" color="gray" variant="outline" />
<template #content>
<ReuseTemplate :close="true" @close="open = false" />
@@ -122,7 +122,7 @@ defineShortcuts({
</UModal>
<UDrawer should-scale-background>
<UButton label="Open drawer" color="gray" />
<UButton label="Open drawer" color="gray" variant="outline" />
<template #content>
<ReuseTemplate class="border-t border-gray-200 dark:border-gray-800" />
@@ -130,7 +130,7 @@ defineShortcuts({
</UDrawer>
<UPopover :content="{ side: 'right', align: 'start' }">
<UButton label="Select label (popover)" color="gray" />
<UButton label="Select label (popover)" color="gray" variant="outline" />
<template #content>
<UCommandPalette v-model="label" placeholder="Search labels..." :groups="[{ id: 'labels', items: labels }]" :ui="{ input: '[&>input]:h-9' }" />

8
playground/app/pages/drawer.vue
View File

@@ -5,20 +5,20 @@ const open = ref(false)
<template>
<div class="flex flex-col gap-2">
<UDrawer v-model:open="open" title="Drawer with v-model" description="This is useful to control the state yourself.">
<UButton color="white" label="Open with v-model" />
<UButton color="gray" variant="outline" label="Open with v-model" />
<template #body>
<Placeholder class="h-48 w-full" />
</template>
<template #footer>
<UButton label="Submit" color="black" class="justify-center" />
<UButton label="Cancel" color="white" class="justify-center" @click="open = false" />
<UButton label="Submit" color="gray" class="justify-center" />
<UButton label="Cancel" color="gray" variant="outline" class="justify-center" @click="open = false" />
</template>
</UDrawer>
<UDrawer should-scale-background title="Drawer with `should-scale-background`" description="You need to add the `vaul-drawer-wrapper` directive to your content to make it work.">
<UButton color="white" label="Open with scale" />
<UButton color="gray" variant="outline" label="Open with scale" />
<template #body>
<Placeholder class="h-screen w-full" />

2
playground/app/pages/dropdown-menu.vue
View File

@@ -127,7 +127,7 @@ defineShortcuts(extractShortcuts(items))
<USelectMenu v-model="size" :items="sizes" placeholder="Size" />
<UDropdownMenu :items="items" :size="size" arrow :content="{ side: 'bottom', align: 'start' }" class="min-w-48">
<UButton label="Open" color="white" icon="i-heroicons-user" />
<UButton label="Open" color="gray" variant="outline" icon="i-heroicons-user" />
<template #custom-trailing>
<UIcon name="i-heroicons-check-badge" class="shrink-0 size-5 text-primary-500 dark:text-primary-400" />

52
playground/app/pages/input-menu.vue
View File

@@ -1,9 +1,11 @@
<script setup lang="ts">
import { upperFirst } from 'scule'
import { refDebounced } from '@vueuse/core'
import type { User } from '~/types'
import theme from '#build/ui/input-menu'
const sizes = Object.keys(theme.variants.size) as Array<keyof typeof theme.variants.size>
const variants = Object.keys(theme.variants.variant) as Array<keyof typeof theme.variants.variant>
const fruits = ['Apple', 'Banana', 'Blueberry', 'Grapes', 'Pineapple']
const vegetables = ['Aubergine', 'Broccoli', 'Carrot', 'Courgette', 'Leek']
@@ -42,11 +44,43 @@ const { data: users, status } = await useFetch('https://jsonplaceholder.typicode
<template>
<div class="flex flex-col items-center gap-4">
<div class="flex flex-col gap-4 w-60">
<UInputMenu :items="items" autofocus />
<UInputMenu :items="items" placeholder="Search..." color="gray" />
<UInputMenu :items="items" placeholder="Search..." color="primary" />
<UInputMenu :items="items" placeholder="Search..." variant="none" />
<div class="flex flex-col gap-4 w-48">
<UInputMenu :items="items" autofocus placeholder="Search..." />
</div>
<div class="flex items-center gap-2">
<UInputMenu
v-for="variant in variants"
:key="variant"
:items="items"
:placeholder="upperFirst(variant)"
:variant="variant"
class="w-48"
/>
</div>
<div class="flex items-center gap-2">
<UInputMenu
v-for="variant in variants"
:key="variant"
:items="items"
:placeholder="upperFirst(variant)"
:variant="variant"
color="gray"
class="w-48"
/>
</div>
<div class="flex items-center gap-2">
<UInputMenu
v-for="variant in variants"
:key="variant"
:items="items"
:placeholder="upperFirst(variant)"
:variant="variant"
color="error"
highlight
class="w-48"
/>
</div>
<div class="flex flex-col gap-4 w-48">
<UInputMenu :items="items" placeholder="Disabled" disabled />
<UInputMenu :items="items" placeholder="Required" required />
<UInputMenu v-model="selectedItems" :items="items" placeholder="Multiple" multiple />
@@ -59,7 +93,7 @@ const { data: users, status } = await useFetch('https://jsonplaceholder.typicode
:items="items"
placeholder="Search..."
:size="size"
class="w-60"
class="w-48"
/>
</div>
<div class="flex items-center gap-4">
@@ -71,7 +105,7 @@ const { data: users, status } = await useFetch('https://jsonplaceholder.typicode
icon="i-heroicons-magnifying-glass"
trailing-icon="i-heroicons-chevron-up-down-20-solid"
:size="size"
class="w-60"
class="w-48"
>
<template #leading="{ modelValue, ui }">
<UIcon v-if="modelValue?.icon" :name="modelValue.icon" :class="ui.leadingIcon()" />
@@ -89,7 +123,7 @@ const { data: users, status } = await useFetch('https://jsonplaceholder.typicode
icon="i-heroicons-user"
placeholder="Search users..."
:size="size"
class="w-60"
class="w-48"
>
<template #leading="{ modelValue, ui }">
<UAvatar v-if="modelValue?.avatar" :size="ui.itemLeadingAvatarSize()" v-bind="modelValue.avatar" />
@@ -106,7 +140,7 @@ const { data: users, status } = await useFetch('https://jsonplaceholder.typicode
icon="i-heroicons-magnifying-glass"
placeholder="Search..."
:size="size"
class="w-60"
class="w-48"
/>
</div>
</div>

41
playground/app/pages/input.vue
View File

@@ -1,16 +1,41 @@
<script setup lang="ts">
import { upperFirst } from 'scule'
import theme from '#build/ui/input'
const sizes = Object.keys(theme.variants.size) as Array<keyof typeof theme.variants.size>
const variants = Object.keys(theme.variants.variant) as Array<keyof typeof theme.variants.variant>
</script>
<template>
<div class="flex flex-col items-center gap-4">
<div class="flex flex-col gap-4 w-60">
<UInput autofocus />
<UInput placeholder="Search..." color="gray" />
<UInput placeholder="Search..." color="primary" />
<UInput placeholder="Search..." variant="none" />
<div class="flex flex-col gap-4 w-48">
<UInput autofocus placeholder="Search..." />
</div>
<div class="flex items-center gap-2">
<UInput v-for="variant in variants" :key="variant" :placeholder="upperFirst(variant)" :variant="variant" class="w-48" />
</div>
<div class="flex items-center gap-2">
<UInput
v-for="variant in variants"
:key="variant"
:placeholder="upperFirst(variant)"
:variant="variant"
color="gray"
class="w-48"
/>
</div>
<div class="flex items-center gap-2">
<UInput
v-for="variant in variants"
:key="variant"
:placeholder="upperFirst(variant)"
:variant="variant"
color="error"
highlight
class="w-48"
/>
</div>
<div class="flex flex-col gap-4 w-48">
<UInput placeholder="Disabled" disabled />
<UInput placeholder="Required" required />
<UInput file="i-heroicons-calculator" type="number" :model-value="10" />
@@ -27,7 +52,7 @@ const sizes = Object.keys(theme.variants.size) as Array<keyof typeof theme.varia
:key="size"
placeholder="Search..."
:size="size"
class="w-60"
class="w-48"
/>
</div>
<div class="flex items-center gap-4">
@@ -37,7 +62,7 @@ const sizes = Object.keys(theme.variants.size) as Array<keyof typeof theme.varia
icon="i-heroicons-magnifying-glass"
placeholder="Search..."
:size="size"
class="w-60"
class="w-48"
/>
</div>
<div class="flex items-center gap-4">
@@ -48,7 +73,7 @@ const sizes = Object.keys(theme.variants.size) as Array<keyof typeof theme.varia
trailing
placeholder="Search..."
:size="size"
class="w-60"
class="w-48"
/>
</div>
</div>

4
playground/app/pages/kbd.vue
View File

@@ -13,10 +13,10 @@ const kbdKeys = Object.keys(kbdKeysMap)
<UKbd value="meta" />
</div>
<div class="flex items-center gap-1">
<UKbd value="meta" color="gray" />
<UKbd value="meta" variant="subtle" />
</div>
<div class="flex items-center gap-1">
<UKbd value="meta" color="black" />
<UKbd value="meta" variant="solid" />
</div>
<div class="flex items-center gap-1 ml-[-216px]">
<UKbd v-for="(kdbKey, index) in kbdKeys" :key="index" :value="kdbKey" />

22
playground/app/pages/modal.vue
View File

@@ -19,7 +19,7 @@ function openModal() {
<template>
<div class="flex flex-col gap-2">
<UModal title="First modal">
<UButton color="white" label="Open with nested" />
<UButton color="gray" variant="outline" label="Open with nested" />
<template #footer>
<UModal title="Second modal">
@@ -30,40 +30,40 @@ function openModal() {
<UModal v-model:open="open" title="Modal with v-model" description="This can be useful to control the state of the modal yourself." />
<UButton label="Open with v-model" color="gray" @click="open = true" />
<UButton label="Open with v-model" color="gray" variant="subtle" @click="open = true" />
<UModal title="Modal without overlay" description="This modal has `overlay: false` prop." :overlay="false">
<UButton label="Open without overlay" color="white" />
<UButton label="Open without overlay" color="gray" variant="outline" />
</UModal>
<UModal title="Modal without modal & overlay" description="This modal has `modal: false` and `overlay: false` to interact with outside content." :overlay="false" :modal="false">
<UButton label="Open without modal" color="gray" />
<UButton label="Open without modal" color="gray" variant="subtle" />
</UModal>
<UModal title="Modal without transition" description="This modal has `transition: false` prop." :transition="false">
<UButton label="Open without transition" color="white" />
<UButton label="Open without transition" color="gray" variant="outline" />
</UModal>
<UModal title="Modal without portal" description="This modal has `portal: false` prop." :portal="false">
<UButton label="Open without portal" color="gray" />
<UButton label="Open without portal" color="gray" variant="subtle" />
</UModal>
<UModal title="Modal fullscreen" description="This modal has `fullscreen: true` prop." fullscreen>
<UButton label="Open fullscreen" color="white" />
<UButton label="Open fullscreen" color="gray" variant="outline" />
</UModal>
<UModal title="Modal prevent close" description="This modal has `prevent-close: true` prop so it won't close when clicking outside." prevent-close>
<UButton label="Open unclosable" color="gray" />
<UButton label="Open unclosable" color="gray" variant="subtle" />
</UModal>
<UModal title="Modal without close button" description="This modal has `close: false` prop." :close="false">
<UButton label="Open without close button" color="white" />
<UButton label="Open without close button" color="gray" variant="outline" />
</UModal>
<UModal title="Modal with custom close button" description="The `close` prop inherits from the Button props." :close="{ color: 'primary', variant: 'solid', size: 'xs' }" :ui="{ close: 'top-3.5 rounded-full' }">
<UButton label="Open with custom close button" color="gray" />
<UButton label="Open with custom close button" color="gray" variant="subtle" />
</UModal>
<UButton label="Open programmatically" color="white" @click="openModal" />
<UButton label="Open programmatically" color="gray" variant="outline" @click="openModal" />
</div>
</template>

1
playground/app/pages/navigation-menu.vue
View File

@@ -15,6 +15,7 @@ const items = [
[{
label: 'Documentation',
icon: 'i-heroicons-book-open',
badge: 10,
children: [{
label: 'Introduction',
description: 'Fully styled and customizable components for Nuxt.',

18
playground/app/pages/popover.vue
View File

@@ -16,7 +16,7 @@ function send() {
<div class="text-center">
<div>
<UPopover arrow :content="{ side: 'top' }">
<UButton label="Click me top" color="white" />
<UButton label="Click me top" color="gray" variant="outline" />
<template #content>
<div class="w-48 h-16" />
@@ -25,7 +25,7 @@ function send() {
<div class="flex items-center gap-2 my-2">
<UPopover arrow :content="{ side: 'left' }">
<UButton label="Click me top" color="white" />
<UButton label="Click me top" color="gray" variant="outline" />
<template #content>
<div class="w-48 h-16" />
@@ -33,7 +33,7 @@ function send() {
</UPopover>
<UPopover arrow :content="{ side: 'right' }">
<UButton label="Click me top" color="white" />
<UButton label="Click me top" color="gray" variant="outline" />
<template #content>
<div class="w-48 h-16" />
@@ -42,12 +42,12 @@ function send() {
</div>
<UPopover v-model:open="open" arrow>
<UButton label="Click me bottom" color="white" />
<UButton label="Click me bottom" color="gray" variant="outline" />
<template #content>
<div class="flex justify-center gap-2 p-4 w-48">
<UButton label="Close" color="gray" @click="open = false" />
<UButton label="Send" color="black" trailing-icon="i-heroicons-paper-airplane" :loading="loading" @click="send" />
<UButton label="Send" color="gray" trailing-icon="i-heroicons-paper-airplane" :loading="loading" @click="send" />
</div>
</template>
</UPopover>
@@ -55,7 +55,7 @@ function send() {
<div class="mt-24">
<UPopover mode="hover" arrow :content="{ side: 'top' }">
<UButton label="Hover me top" color="white" />
<UButton label="Hover me top" color="gray" variant="outline" />
<template #content>
<div class="w-48 h-16" />
@@ -64,7 +64,7 @@ function send() {
<div class="flex items-center gap-2 my-2">
<UPopover mode="hover" arrow :content="{ side: 'left' }">
<UButton label="Hover me left" color="white" />
<UButton label="Hover me left" color="gray" variant="outline" />
<template #content>
<div class="w-48 h-16" />
@@ -72,7 +72,7 @@ function send() {
</UPopover>
<UPopover mode="hover" arrow :content="{ side: 'right' }">
<UButton label="Hover me right" color="white" />
<UButton label="Hover me right" color="gray" variant="outline" />
<template #content>
<div class="w-48 h-16" />
@@ -81,7 +81,7 @@ function send() {
</div>
<UPopover mode="hover" arrow>
<UButton label="Hover me bottom" color="white" />
<UButton label="Hover me bottom" color="gray" variant="outline" />
<template #content>
<div class="w-48 h-16" />

4
playground/app/pages/progress.vue
View File

@@ -33,8 +33,8 @@ onMounted(() => {
<div class="flex flex-col gap-8 items-center">
<div class="flex flex-col gap-4 w-48">
<UProgress />
<UProgress color="black" />
<UProgress color="red" />
<UProgress color="gray" />
<UProgress color="error" />
<UProgress animation="carousel-inverse" />
<UProgress animation="swing" />
<UProgress animation="elastic" />

4
playground/app/pages/radio-group.vue
View File

@@ -25,10 +25,10 @@ const itemsWithDescription = [
<div class="flex flex-col items-center gap-4">
<div class="flex flex-col gap-4 ml-[100px]">
<URadioGroup :items="items" default-value="1" />
<URadioGroup :items="items" color="gray" default-value="1" />
<URadioGroup :items="items" color="error" default-value="2" />
<URadioGroup :items="literalOptions" />
<URadioGroup :items="items" label="Disabled" disabled />
<URadioGroup :items="items" color="black" default-value="1" />
<URadioGroup :items="items" color="red" default-value="2" />
<URadioGroup :items="items" orientation="horizontal" class="ml-[-91px]" />
</div>

48
playground/app/pages/select-menu.vue
View File

@@ -1,9 +1,11 @@
<script setup lang="ts">
import { upperFirst } from 'scule'
import { refDebounced } from '@vueuse/core'
import theme from '#build/ui/select-menu'
import type { User } from '~/types'
const sizes = Object.keys(theme.variants.size) as Array<keyof typeof theme.variants.size>
const variants = Object.keys(theme.variants.variant) as Array<keyof typeof theme.variants.variant>
const fruits = ['Apple', 'Banana', 'Blueberry', 'Grapes', 'Pineapple']
const vegetables = ['Aubergine', 'Broccoli', 'Carrot', 'Courgette', 'Leek']
@@ -47,11 +49,43 @@ const { data: users, status } = await useFetch('https://jsonplaceholder.typicode
<template>
<div class="flex flex-col items-center gap-4">
<div class="flex flex-col gap-4 w-60">
<div class="flex flex-col gap-4 w-48">
<USelectMenu :items="items" />
<USelectMenu :items="items" placeholder="Search..." color="gray" />
<USelectMenu :items="items" placeholder="Search..." color="primary" />
<USelectMenu :items="items" placeholder="Search..." variant="none" />
</div>
<div class="flex items-center gap-2">
<USelectMenu
v-for="variant in variants"
:key="variant"
:items="items"
:placeholder="upperFirst(variant)"
:variant="variant"
class="w-48"
/>
</div>
<div class="flex items-center gap-2">
<USelectMenu
v-for="variant in variants"
:key="variant"
:items="items"
:placeholder="upperFirst(variant)"
:variant="variant"
color="gray"
class="w-48"
/>
</div>
<div class="flex items-center gap-2">
<USelectMenu
v-for="variant in variants"
:key="variant"
:items="items"
:placeholder="upperFirst(variant)"
:variant="variant"
color="error"
highlight
class="w-48"
/>
</div>
<div class="flex flex-col gap-4 w-48">
<USelectMenu :items="items" placeholder="Disabled" disabled />
<USelectMenu :items="items" placeholder="Required" required />
<USelectMenu v-model="selectedItems" :items="items" placeholder="Multiple" multiple />
@@ -64,7 +98,7 @@ const { data: users, status } = await useFetch('https://jsonplaceholder.typicode
:items="items"
placeholder="Search..."
:size="size"
class="w-60"
class="w-48"
/>
</div>
<div class="flex items-center gap-4">
@@ -76,7 +110,7 @@ const { data: users, status } = await useFetch('https://jsonplaceholder.typicode
icon="i-heroicons-magnifying-glass"
trailing-icon="i-heroicons-chevron-up-down-20-solid"
:size="size"
class="w-60"
class="w-48"
>
<template #leading="{ modelValue, ui }">
<UIcon v-if="modelValue" :name="modelValue.icon" :class="ui.leadingIcon()" />
@@ -94,7 +128,7 @@ const { data: users, status } = await useFetch('https://jsonplaceholder.typicode
icon="i-heroicons-user"
placeholder="Search users..."
:size="size"
class="w-60"
class="w-48"
@update:open="searchTerm = ''"
>
<template #leading="{ modelValue, ui }">

50
playground/app/pages/select.vue
View File

@@ -1,8 +1,10 @@
<script setup lang="ts">
import { upperFirst } from 'scule'
import theme from '#build/ui/select'
import type { User } from '~/types'
const sizes = Object.keys(theme.variants.size) as Array<keyof typeof theme.variants.size>
const variants = Object.keys(theme.variants.variant) as Array<keyof typeof theme.variants.variant>
const fruits = ['Apple', 'Banana', 'Blueberry', 'Grapes', 'Pineapple']
const vegetables = ['Aubergine', 'Broccoli', 'Carrot', 'Courgette', 'Leek']
@@ -49,11 +51,43 @@ function getUserAvatar(value: string) {
<template>
<div class="flex flex-col items-center gap-4">
<div class="flex flex-col gap-4 w-60">
<USelect :items="items" />
<USelect :items="items" placeholder="Search..." color="gray" />
<USelect :items="items" placeholder="Search..." color="primary" />
<USelect :items="items" placeholder="Search..." variant="none" />
<div class="flex flex-col gap-4 w-48">
<USelect :items="items" placeholder="Search..." />
</div>
<div class="flex items-center gap-2">
<USelect
v-for="variant in variants"
:key="variant"
:items="items"
:placeholder="upperFirst(variant)"
:variant="variant"
class="w-48"
/>
</div>
<div class="flex items-center gap-2">
<USelect
v-for="variant in variants"
:key="variant"
:items="items"
:placeholder="upperFirst(variant)"
:variant="variant"
color="gray"
class="w-48"
/>
</div>
<div class="flex items-center gap-2">
<USelect
v-for="variant in variants"
:key="variant"
:items="items"
:placeholder="upperFirst(variant)"
:variant="variant"
color="error"
highlight
class="w-48"
/>
</div>
<div class="flex flex-col gap-4 w-48">
<USelect :items="items" placeholder="Disabled" disabled />
<USelect :items="items" placeholder="Required" required />
<USelect :items="items" loading placeholder="Search..." />
@@ -65,7 +99,7 @@ function getUserAvatar(value: string) {
:items="items"
placeholder="Search..."
:size="size"
class="w-60"
class="w-48"
/>
</div>
<div class="flex items-center gap-4">
@@ -77,7 +111,7 @@ function getUserAvatar(value: string) {
icon="i-heroicons-magnifying-glass"
trailing-icon="i-heroicons-chevron-up-down-20-solid"
:size="size"
class="w-60"
class="w-48"
>
<template #leading="{ modelValue, ui }">
<UIcon v-if="modelValue" :name="getStatusIcon(modelValue)" :class="ui.leadingIcon()" />
@@ -93,7 +127,7 @@ function getUserAvatar(value: string) {
icon="i-heroicons-user"
placeholder="Search users..."
:size="size"
class="w-60"
class="w-48"
>
<template #leading="{ modelValue, ui }">
<UAvatar v-if="modelValue" :size="ui.itemLeadingAvatarSize()" v-bind="getUserAvatar(modelValue)" />

26
playground/app/pages/slideover.vue
View File

@@ -19,7 +19,7 @@ function openSlideover() {
<template>
<div class="flex flex-col gap-2">
<USlideover title="First slideover">
<UButton color="white" label="Open with nested" />
<UButton color="gray" variant="outline" label="Open with nested" />
<template #body>
<Placeholder class="h-full w-full" />
@@ -33,7 +33,7 @@ function openSlideover() {
</USlideover>
<USlideover title="Slideover on left side" description="This slideover has `side: 'left'` prop." side="left">
<UButton label="Open on left" color="gray" />
<UButton label="Open on left" color="gray" variant="subtle" />
<template #body>
<Placeholder class="h-full w-full" />
@@ -41,7 +41,7 @@ function openSlideover() {
</USlideover>
<USlideover title="Slideover on top side" description="This slideover has `side: 'top'` prop." side="top">
<UButton label="Open on top" color="white" />
<UButton label="Open on top" color="gray" variant="outline" />
<template #body>
<Placeholder class="h-48 w-full" />
@@ -49,7 +49,7 @@ function openSlideover() {
</USlideover>
<USlideover title="Slideover on bottom side" description="This slideover has `side: 'bottom'` prop." side="bottom">
<UButton label="Open on bottom" color="gray" />
<UButton label="Open on bottom" color="gray" variant="subtle" />
<template #body>
<Placeholder class="h-48 w-full" />
@@ -62,10 +62,10 @@ function openSlideover() {
</template>
</USlideover>
<UButton label="Open with v-model" color="white" @click="open = true" />
<UButton label="Open with v-model" color="gray" variant="outline" @click="open = true" />
<USlideover title="Slideover without overlay" description="This slideover has `overlay: false` prop." :overlay="false">
<UButton label="Open without overlay" color="gray" />
<UButton label="Open without overlay" color="gray" variant="subtle" />
<template #body>
<Placeholder class="h-full w-full" />
@@ -73,7 +73,7 @@ function openSlideover() {
</USlideover>
<USlideover title="Slideover without modal & overlay" description="This slideover has `modal: false` and `overlay: false` to interact with outside content." :overlay="false" :modal="false">
<UButton label="Open without modal" color="white" />
<UButton label="Open without modal" color="gray" variant="outline" />
<template #body>
<Placeholder class="h-full w-full" />
@@ -81,7 +81,7 @@ function openSlideover() {
</USlideover>
<USlideover title="Slideover without transition" description="This slideover has `transition: false` prop." :transition="false">
<UButton label="Open without transition" color="gray" />
<UButton label="Open without transition" color="gray" variant="subtle" />
<template #body>
<Placeholder class="h-full w-full" />
@@ -89,7 +89,7 @@ function openSlideover() {
</USlideover>
<USlideover title="Slideover without portal" description="This slideover has `portal: false` prop." :portal="false">
<UButton label="Open without portal" color="white" />
<UButton label="Open without portal" color="gray" variant="outline" />
<template #body>
<Placeholder class="h-full w-full" />
@@ -97,7 +97,7 @@ function openSlideover() {
</USlideover>
<USlideover title="Slideover prevent close" description="This slideover has `prevent-close: true` prop so it won't close when clicking outside." prevent-close>
<UButton label="Open unclosable" color="gray" />
<UButton label="Open unclosable" color="gray" variant="subtle" />
<template #body>
<Placeholder class="h-full w-full" />
@@ -105,7 +105,7 @@ function openSlideover() {
</USlideover>
<USlideover title="Slideover without close button" description="This slideover has `close: false` prop." :close="false">
<UButton label="Open without close button" color="white" />
<UButton label="Open without close button" color="gray" variant="outline" />
<template #body>
<Placeholder class="h-full w-full" />
@@ -113,13 +113,13 @@ function openSlideover() {
</USlideover>
<USlideover title="Slideover with custom close button" description="The `close` prop inherits from the Button props." :close="{ color: 'primary', variant: 'solid', size: 'xs' }" :ui="{ close: 'top-3.5 rounded-full' }">
<UButton label="Open with custom close button" color="gray" />
<UButton label="Open with custom close button" color="gray" variant="subtle" />
<template #body>
<Placeholder class="h-full w-full" />
</template>
</USlideover>
<UButton label="Open programmatically" color="white" @click="openSlideover" />
<UButton label="Open programmatically" color="gray" variant="outline" @click="openSlideover" />
</div>
</template>

4
playground/app/pages/slider.vue
View File

@@ -10,11 +10,11 @@ const value = ref(50)
<div class="flex flex-col gap-6 items-center">
<div class="flex flex-col gap-6 w-48">
<USlider v-model="value" />
<USlider color="gray" :model-value="50" />
<USlider color="error" :model-value="50" />
<USlider :default-value="100" />
<USlider inverted />
<USlider disabled />
<USlider color="black" :model-value="50" />
<USlider color="red" :model-value="50" />
<USlider :min="4" :max="12" :step="2" :model-value="6" />
</div>

8
playground/app/pages/switch.vue
View File

@@ -3,18 +3,18 @@ import theme from '#build/ui/switch'
const sizes = Object.keys(theme.variants.size) as Array<keyof typeof theme.variants.size>
const checked = ref(false)
const checked = ref(true)
</script>
<template>
<div class="flex flex-col items-center gap-4">
<div class="flex flex-col gap-4 ml-[-114px]">
<USwitch v-model="checked" label="Model" />
<USwitch v-model="checked" label="Primary" />
<USwitch color="gray" label="Gray" :default-value="true" />
<USwitch color="error" label="Error" :default-value="true" />
<USwitch label="Default value" :default-value="true" />
<USwitch label="Required" required />
<USwitch label="Disabled" disabled />
<USwitch color="black" label="Black" :default-value="true" />
<USwitch color="red" label="Red" :default-value="true" />
</div>
<div class="flex items-center gap-4 ml-[-82px]">
<USwitch v-for="size in sizes" :key="size" :size="size" label="Switch me" />

35
playground/app/pages/textarea.vue
View File

@@ -1,21 +1,46 @@
<script setup lang="ts">
import { upperFirst } from 'scule'
import theme from '#build/ui/textarea'
const sizes = Object.keys(theme.variants.size) as Array<keyof typeof theme.variants.size>
const variants = Object.keys(theme.variants.variant) as Array<keyof typeof theme.variants.variant>
</script>
<template>
<div class="flex flex-col items-center gap-4">
<div class="flex flex-col gap-4 w-60">
<div class="flex flex-col gap-4 w-48">
<UTextarea autofocus />
<UTextarea placeholder="Search..." color="gray" />
<UTextarea placeholder="Search..." color="primary" />
<UTextarea placeholder="Search..." variant="none" />
</div>
<div class="flex items-center gap-2">
<UTextarea v-for="variant in variants" :key="variant" :placeholder="upperFirst(variant)" :variant="variant" class="w-48" />
</div>
<div class="flex items-center gap-2">
<UTextarea
v-for="variant in variants"
:key="variant"
:placeholder="upperFirst(variant)"
:variant="variant"
color="gray"
class="w-48"
/>
</div>
<div class="flex items-center gap-2">
<UTextarea
v-for="variant in variants"
:key="variant"
:placeholder="upperFirst(variant)"
:variant="variant"
color="error"
highlight
class="w-48"
/>
</div>
<div class="flex flex-col gap-4 w-48">
<UTextarea placeholder="Search..." disabled />
<UTextarea autoresize :maxrows="5" :rows="1" />
</div>
<div class="flex items-center gap-4">
<UTextarea v-for="size in sizes" :key="size" placeholder="Search..." :size="size" class="w-60" />
<UTextarea v-for="size in sizes" :key="size" placeholder="Search..." :size="size" class="w-48" />
</div>
</div>
</template>

9
playground/app/pages/toast.vue
View File

@@ -55,7 +55,8 @@ const templates = (id: number) => [{
}
}, {
label: 'Action 2',
color: 'black' as const,
color: 'gray' as const,
variant: 'outline' as const,
click() {
console.log(`Toast ${id} action 2 clicked`)
}
@@ -115,9 +116,9 @@ function removeToast() {
</div>
<div class="flex items-center gap-2">
<UButton label="Add new" color="gray" @click="addToast" />
<UButton label="Update last" color="gray" @click="updateToast" />
<UButton label="Remove last" color="gray" @click="removeToast" />
<UButton label="Add new" color="gray" variant="outline" @click="addToast" />
<UButton label="Update last" color="gray" variant="outline" @click="updateToast" />
<UButton label="Remove last" color="gray" variant="outline" @click="removeToast" />
</div>
</div>
</template>