arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-23 16:30:45 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat(InputNumber): implement component (#2577)

Browse Source 
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
This commit is contained in:
Alex
2024-11-18 14:08:57 +05:00
committed by GitHub
parent 7329900ae5
commit bd2f077fe8
39 changed files with 1657 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
playground/app/app.vue
View File

@@ -38,6 +38,7 @@ const components = [
'form-field',
'input',
'input-menu',
'input-number',
'kbd',
'link',
'modal',

68
playground/app/pages/components/input-number.vue Normal file
View File

@@ -0,0 +1,68 @@
<template>
<div class="flex flex-col items-center gap-4">
<div class="flex flex-col gap-4 w-48">
<UInputNumber />
</div>
<div class="flex items-center gap-2">
<UInputNumber
v-for="variant in variants"
:key="variant"
:placeholder="upperFirst(variant)"
:variant="variant"
class="w-48"
/>
</div>
<div class="flex items-center gap-2">
<UInputNumber
v-for="variant in variants"
:key="variant"
:placeholder="upperFirst(variant)"
:variant="variant"
color="neutral"
class="w-48"
/>
</div>
<div class="flex items-center gap-2">
<UInputNumber
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">
<UInputNumber placeholder="Disabled" disabled />
<UInputNumber placeholder="Required" required />
</div>
<div class="flex items-center gap-4">
<UInputNumber
v-for="size in sizes"
:key="size"
:size="size"
:placeholder="`Horizontal ${size}`"
class="w-48"
/>
</div>
<div class="flex items-center gap-4">
<UInputNumber
v-for="size in sizes"
:key="size"
:size="size"
class="w-48"
:placeholder="`Vertical ${size}`"
orientation="vertical"
/>
</div>
</div>
</template>
<script setup lang="ts">
import { upperFirst } from 'scule'
import theme from '#build/ui/input-number'
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>