arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-22 16:00:39 +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

6
playground/pages/checkbox.vue
View File

@@ -8,7 +8,7 @@ const checked = ref(false)
<template>
<div class="flex flex-col items-center gap-4">
<div class="flex flex-col gap-4 ml-[-286px]">
<div class="flex flex-col gap-4">
<UCheckbox v-model="checked" label="Model" />
<UCheckbox label="Default value" :default-value="true" />
<UCheckbox label="Indeterminate" indeterminate />
@@ -16,10 +16,10 @@ const checked = ref(false)
<UCheckbox label="Disabled" disabled />
<UCheckbox label="Custom icon" color="red" icon="i-heroicons-heart-solid" :model-value="true" />
</div>
<div class="flex items-center gap-4 ml-[-156px]">
<div class="flex items-center gap-4 mr-[-11px]">
<UCheckbox v-for="size in sizes" :key="size" label="Check me" :size="(size as any)" />
</div>
<div class="flex items-center gap-4">
<div class="flex items-center gap-4 mr-[-96px]">
<UCheckbox v-for="size in sizes" :key="size" label="Check me" description="This is a description" :size="(size as any)" />
</div>
</div>

2
playground/pages/chip.vue
View File

@@ -29,7 +29,7 @@ const items = [{
</UChip>
</div>
<div class="flex items-center gap-2 ml-[-84px]">
<div class="flex items-center gap-2">
<UChip v-for="size in sizes" :key="size" :size="(size as any)" inset text="1">
<UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" :size="(size as any)" />
</UChip>

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

@@ -13,7 +13,7 @@ const feedbacks = [
<template>
<div class="flex flex-col items-center gap-4">
<div class="flex flex-col gap-4 ml-[-258px]">
<div class="flex flex-col gap-4 ml-[-38px]">
<div v-for="(feedback, count) in feedbacks" :key="count" class="flex items-center">
<UFormField v-bind="feedback" label="Email" name="email">
<UInput placeholder="john@lennon.com" />

12
playground/pages/input.vue
View File

@@ -6,21 +6,21 @@ const sizes = Object.keys(theme.variants.size)
<template>
<div class="flex flex-col items-center gap-4">
<div class="flex flex-col gap-4 ml-[-169px]">
<div class="flex flex-col gap-4 ml-[86px]">
<UInput placeholder="Search..." autofocus />
<UInput placeholder="Search..." color="gray" />
<UInput placeholder="Search..." color="primary" />
<UInput placeholder="Search..." disabled />
<UInput placeholder="Search..." type="number" />
<UInput icon="i-heroicons-folder" placeholder="Search..." type="file" />
<UInput icon="i-heroicons-calendar" placeholder="Search..." type="date" />
<UInput icon="i-heroicons-lock-closed" placeholder="Search..." type="password" value="password" />
<UInput file="i-heroicons-calculator" type="number" :model-value="10" />
<UInput icon="i-heroicons-folder" type="file" />
<UInput icon="i-heroicons-calendar" type="date" :model-value="new Date().toISOString().substring(0, 10)" />
<UInput icon="i-heroicons-lock-closed" type="password" model-value="password" />
<UInput loading placeholder="Search..." />
<UInput loading leading-icon="i-heroicons-magnifying-glass" placeholder="Search..." />
<UInput loading trailing placeholder="Search..." />
<UInput loading trailing-icon="i-heroicons-magnifying-glass" placeholder="Search..." />
</div>
<div class="flex items-center gap-4 ml-[-76px]">
<div class="flex items-center gap-4 -ml-[42px]">
<UInput
v-for="size in sizes"
:key="size"

8
playground/pages/radio-group.vue
View File

@@ -23,7 +23,7 @@ const optionsWithDescription = [
<template>
<div class="flex flex-col items-center gap-4">
<div class="flex flex-col gap-4 ml-[-142px]">
<div class="flex flex-col gap-4">
<URadioGroup :options="options" default-value="1" />
<URadioGroup :options="literalOptions" />
<URadioGroup :options="options" label="Disabled" disabled />
@@ -31,15 +31,15 @@ const optionsWithDescription = [
<URadioGroup :options="options" orientation="horizontal" />
</div>
<div class="flex items-center gap-4">
<div class="flex items-center gap-4 ml-[34px]">
<URadioGroup v-for="size in sizes" :key="size" :size="(size as any)" :options="options" />
</div>
<div class="flex items-center gap-4 ml-[75px]">
<div class="flex items-center gap-4 ml-[74px]">
<URadioGroup v-for="size in sizes" :key="size" :size="(size as any)" :options="optionsWithDescription" />
</div>
<div class="flex gap-4 ml-[-142px]">
<div class="flex gap-4">
<URadioGroup :options="options" legend="Legend" />
<URadioGroup :options="options" legend="Legend" required />
<URadioGroup :options="options">

4
playground/pages/separator.vue
View File

@@ -15,7 +15,7 @@
</div>
<USeparator
:avatar="{ size: 'sm', src: 'https://avatars.githubusercontent.com/u/739984?v=4' }"
:avatar="{ src: 'https://avatars.githubusercontent.com/u/739984?v=4' }"
decorative
orientation="vertical"
/>
@@ -25,7 +25,7 @@
</div>
<USeparator decorative orientation="vertical">
<UAvatar src="https://avatars.githubusercontent.com/u/13056429?v=4" />
<UAvatar size="2xs" src="https://avatars.githubusercontent.com/u/13056429?v=4" />
</USeparator>
<div class="flex-1 text-center">

16
playground/pages/slider.vue
View File

@@ -14,22 +14,24 @@ const value = ref(50)
<USlider color="green" />
<USlider inverted />
<USlider disabled />
<USlider :min="4" :max="12" :step="2" />
<USlider :min="4" :max="12" :step="2" :model-value="6" />
</div>
<div class="flex flex-col gap-4 w-48">
<USlider :model-value="[0, 10]" />
<USlider :model-value="[0, 10, 30]" />
<USlider :model-value="[0, 30]" :min-steps-between-thumbs="20" />
<USlider :default-value="[0, 10]" />
<USlider :default-value="[0, 20]" />
<USlider :model-value="[0, 20]" />
<USlider :model-value="[0, 20, 80]" />
<USlider :model-value="[0, 80]" :min-steps-between-thumbs="20" />
</div>
<div class="flex items-center gap-4">
<USlider v-for="size in sizes" :key="size" :size="(size as any)" class="w-32" />
<USlider v-for="size in sizes" :key="size" v-model="value" :size="(size as any)" class="w-48" />
</div>
<div class="h-48">
<div class="h-48 flex items-center gap-8">
<USlider :model-value="[0, 20, 80]" orientation="vertical" />
<USlider v-model="value" orientation="vertical" />
<USlider :model-value="[0, 80]" :min-steps-between-thumbs="20" orientation="vertical" />
</div>
</div>
</template>

19
playground/pages/switch.vue
View File

@@ -8,16 +8,16 @@ const checked = ref(false)
<template>
<div class="flex flex-col items-center gap-4">
<div class="flex flex-col gap-4 ml-[-369px]">
<div class="flex flex-col gap-4 ml-[-114px]">
<USwitch v-model="checked" label="Model" />
<USwitch label="Default value" :default-value="true" />
<USwitch label="Required" required />
<USwitch label="Disabled" disabled />
</div>
<div class="flex items-center gap-4 ml-[-150px]">
<div class="flex items-center gap-4 ml-[-82px]">
<USwitch v-for="size in sizes" :key="size" :size="(size as any)" label="Switch me" />
</div>
<div class="flex items-center gap-4 ml-[-150px]">
<div class="flex items-center gap-4 ml-[-82px]">
<USwitch
v-for="size in sizes"
:key="size"
@@ -27,7 +27,7 @@ const checked = ref(false)
checked-icon="i-heroicons-check-20-solid"
/>
</div>
<div class="flex items-center gap-4 ml-[-150px]">
<div class="flex items-center gap-4 ml-[-82px]">
<USwitch
v-for="size in sizes"
:key="size"
@@ -47,5 +47,16 @@ const checked = ref(false)
description="This is a description"
/>
</div>
<div class="flex items-center gap-4">
<USwitch
v-for="size in sizes"
:key="size"
:size="(size as any)"
label="Switch me"
description="This is a description"
unchecked-icon="i-heroicons-x-mark-20-solid"
checked-icon="i-heroicons-check-20-solid"
/>
</div>
</div>
</template>