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

playground: simplify with theme

Browse Source
This commit is contained in:
Benjamin Canac
2024-03-22 14:50:22 +01:00
parent 2fefa8ab74
commit a057945ca4
6 changed files with 45 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
playground/pages/avatar.vue
View File

@@ -1,48 +1,22 @@
<script setup lang="ts">
import theme from '#build/ui/avatar'
const sizes = Object.keys(theme.variants.size)
</script>
<template>
<div class="flex flex-col gap-2">
<div class="flex items-center gap-1.5">
<UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac" size="3xs" />
<UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac" size="2xs" />
<UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac" size="xs" />
<UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac" size="sm" />
<UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac" size="md" />
<UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac" size="lg" />
<UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac" size="xl" />
<UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac" size="2xl" />
<UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac" size="3xl" />
<UAvatar v-for="size in sizes" :key="size" src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac" :size="(size as any)" />
</div>
<div class="flex items-center gap-1.5">
<UAvatar icon="i-heroicons-photo" size="3xs" />
<UAvatar icon="i-heroicons-photo" size="2xs" />
<UAvatar icon="i-heroicons-photo" size="xs" />
<UAvatar icon="i-heroicons-photo" size="sm" />
<UAvatar icon="i-heroicons-photo" size="md" />
<UAvatar icon="i-heroicons-photo" size="lg" />
<UAvatar icon="i-heroicons-photo" size="xl" />
<UAvatar icon="i-heroicons-photo" size="2xl" />
<UAvatar icon="i-heroicons-photo" size="3xl" />
<UAvatar v-for="size in sizes" :key="size" icon="i-heroicons-photo" :size="(size as any)" />
</div>
<div class="flex items-center gap-1.5">
<UAvatar alt="Benjamin Canac" size="3xs" />
<UAvatar alt="Benjamin Canac" size="2xs" />
<UAvatar alt="Benjamin Canac" size="xs" />
<UAvatar alt="Benjamin Canac" size="sm" />
<UAvatar alt="Benjamin Canac" size="md" />
<UAvatar alt="Benjamin Canac" size="lg" />
<UAvatar alt="Benjamin Canac" size="xl" />
<UAvatar alt="Benjamin Canac" size="2xl" />
<UAvatar alt="Benjamin Canac" size="3xl" />
<UAvatar v-for="size in sizes" :key="size" alt="Benjamin Canac" :size="(size as any)" />
</div>
<div class="flex items-center gap-1.5">
<UAvatar text="+1" size="3xs" />
<UAvatar text="+1" size="2xs" />
<UAvatar text="+1" size="xs" />
<UAvatar text="+1" size="sm" />
<UAvatar text="+1" size="md" />
<UAvatar text="+1" size="lg" />
<UAvatar text="+1" size="xl" />
<UAvatar text="+1" size="2xl" />
<UAvatar text="+1" size="3xl" />
<UAvatar v-for="size in sizes" :key="size" text="+1" :size="(size as any)" />
</div>
</div>
</template>

11
playground/pages/badge.vue
View File

@@ -1,3 +1,9 @@
<script setup lang="ts">
import theme from '#build/ui/badge'
const sizes = Object.keys(theme.variants.size)
</script>
<template>
<div class="flex flex-col gap-2">
<div class="flex items-center gap-2">
@@ -21,10 +27,7 @@
<UBadge label="Badge" color="black" />
</div>
<div class="flex items-center gap-2 -ml-[56px]">
<UBadge label="Badge" size="xs" />
<UBadge label="Badge" size="sm" />
<UBadge label="Badge" size="md" />
<UBadge label="Badge" size="lg" />
<UBadge v-for="size in sizes" :key="size" label="Badge" :size="(size as any)" />
</div>
</div>
</template>

40
playground/pages/button.vue
View File

@@ -1,3 +1,9 @@
<script setup lang="ts">
import theme from '#build/ui/button'
const sizes = Object.keys(theme.variants.size)
</script>
<template>
<div class="flex flex-col gap-2">
<div class="flex items-center gap-2">
@@ -54,38 +60,26 @@
<UButton icon="i-heroicons-rocket-launch" label="Button" color="black" variant="link" />
</div>
<div class="flex items-center gap-2 -ml-[171px]">
<UButton icon="i-heroicons-rocket-launch" label="Button" size="2xs" />
<UButton icon="i-heroicons-rocket-launch" label="Button" size="xs" />
<UButton icon="i-heroicons-rocket-launch" label="Button" size="sm" />
<UButton icon="i-heroicons-rocket-launch" label="Button" size="md" />
<UButton icon="i-heroicons-rocket-launch" label="Button" size="lg" />
<UButton icon="i-heroicons-rocket-launch" label="Button" size="xl" />
<UButton v-for="size in sizes" :key="size" icon="i-heroicons-rocket-launch" label="Button" :size="(size as any)" />
</div>
<div class="flex items-center gap-2 -ml-[159px]">
<UButton icon="i-heroicons-rocket-launch" label="Square" square size="2xs" />
<UButton icon="i-heroicons-rocket-launch" label="Square" square size="xs" />
<UButton icon="i-heroicons-rocket-launch" label="Square" square size="sm" />
<UButton icon="i-heroicons-rocket-launch" label="Square" square size="md" />
<UButton icon="i-heroicons-rocket-launch" label="Square" square size="lg" />
<UButton icon="i-heroicons-rocket-launch" label="Square" square size="xl" />
<UButton
v-for="size in sizes"
:key="size"
icon="i-heroicons-rocket-launch"
label="Square"
square
:size="(size as any)"
/>
</div>
<div class="flex items-center gap-2 -ml-[67px]">
<UButton icon="i-heroicons-rocket-launch" size="2xs" />
<UButton icon="i-heroicons-rocket-launch" size="xs" />
<UButton icon="i-heroicons-rocket-launch" size="sm" />
<UButton icon="i-heroicons-rocket-launch" size="md" />
<UButton icon="i-heroicons-rocket-launch" size="lg" />
<UButton icon="i-heroicons-rocket-launch" size="xl" />
<UButton v-for="size in sizes" :key="size" icon="i-heroicons-rocket-launch" :size="(size as any)" />
</div>
<div class="flex items-center gap-2">
<UButton icon="i-heroicons-rocket-launch" trailing-icon="i-heroicons-chevron-down-20-solid" label="Block" loading block />
</div>
<div class="flex items-center gap-2">
<UButton icon="i-heroicons-rocket-launch" label="Button" class="group">
<template #leading="leadingProps">
<UIcon v-if="leadingProps.icon" :name="leadingProps.icon" :class="[leadingProps.class, 'group-hover:text-white']" aria-hidden="true" />
</template>
</UButton>
<UButton icon="i-heroicons-cloud-arrow-down" label="Button" class="group" :ui="{ leadingIcon: 'group-hover:animate-pulse' }" />
</div>
</div>
</template>

6
playground/pages/chip.vue
View File

@@ -1,8 +1,8 @@
<script setup lang="ts">
import chip from '#build/ui/chip'
import theme from '#build/ui/chip'
const sizes = Object.keys(chip.variants.size)
const positions = Object.keys(chip.variants.position)
const sizes = Object.keys(theme.variants.size)
const positions = Object.keys(theme.variants.position)
const items = [{
name: 'messages',

5
playground/pages/form-field.vue
View File

@@ -1,6 +1,7 @@
<script setup lang="ts">
import formField from '#build/ui/formField'
import theme from '#build/ui/formField'
const sizes = Object.keys(theme.variants.size)
const feedbacks = [
{ description: 'This is a description' },
{ error: 'This is an error' },
@@ -22,7 +23,7 @@ const feedbacks = [
<div class="flex items-center gap-4">
<UFormField
v-for="size in Object.keys(formField.variants.size)"
v-for="size in sizes"
:key="size"
:size="(size as any)"
label="Email"

8
playground/pages/input.vue
View File

@@ -1,5 +1,7 @@
<script setup lang="ts">
import input from '#build/ui/input'
import theme from '#build/ui/input'
const sizes = Object.keys(theme.variants.size)
</script>
<template>
@@ -20,7 +22,7 @@ import input from '#build/ui/input'
</div>
<div class="flex items-center gap-4">
<UInput
v-for="size in Object.keys(input.variants.size)"
v-for="size in sizes"
:key="size"
icon="i-heroicons-magnifying-glass"
placeholder="Search..."
@@ -29,7 +31,7 @@ import input from '#build/ui/input'
</div>
<div class="flex items-center gap-4">
<UInput
v-for="size in Object.keys(input.variants.size)"
v-for="size in sizes"
:key="size"
icon="i-heroicons-magnifying-glass"
trailing