arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-14 20:19:34 +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

4
docs/app/components/content/ComponentCode.vue
View File

@@ -220,7 +220,7 @@ const { data: ast } = await useAsyncData(`component-code-${name}-${hash({ props:
<template>
<div class="my-5">
<div>
<div v-if="options.length" class="flex items-center gap-2.5 border border-[var(--ui-color-neutral-200)] dark:border-[var(--ui-color-neutral-700)] border-b-0 relative rounded-t-[calc(var(--ui-radius)*1.5)] px-4 py-2.5 overflow-x-auto">
<div v-if="options.length" class="flex items-center gap-2.5 border border-[var(--ui-border-muted)] border-b-0 relative rounded-t-[calc(var(--ui-radius)*1.5)] px-4 py-2.5 overflow-x-auto">
<template v-for="option in options" :key="option.name">
<UFormField
:label="option.label"
@@ -269,7 +269,7 @@ const { data: ast } = await useAsyncData(`component-code-${name}-${hash({ props:
</template>
</div>
<div v-if="component" class="flex justify-center border border-b-0 border-[var(--ui-color-neutral-200)] dark:border-[var(--ui-color-neutral-700)] relative p-4 z-[1]" :class="[!options.length && 'rounded-t-[calc(var(--ui-radius)*1.5)]', props.class]">
<div v-if="component" class="flex justify-center border border-b-0 border-[var(--ui-border-muted)] relative p-4 z-[1]" :class="[!options.length && 'rounded-t-[calc(var(--ui-radius)*1.5)]', props.class]">
<component :is="component" v-bind="{ ...componentProps, ...componentEvents }">
<template v-for="slot in Object.keys(slots || {})" :key="slot" #[slot]>
<MDCSlot :name="slot" unwrap="p">

4
docs/app/components/content/ComponentExample.vue
View File

@@ -117,8 +117,8 @@ const optionsValues = ref(props.options?.reduce((acc, option) => {
<template>
<div class="my-5">
<template v-if="preview">
<div class="border border-[var(--ui-color-neutral-200)] dark:border-[var(--ui-color-neutral-700)] relative z-[1]" :class="[{ 'border-b-0 rounded-t-[calc(var(--ui-radius)*1.5)]': props.source, 'rounded-[calc(var(--ui-radius)*1.5)]': !props.source }]">
<div v-if="props.options?.length || !!slots.options" class="flex gap-4 p-4 border-b border-[var(--ui-color-neutral-200)] dark:border-[var(--ui-color-neutral-700)]">
<div class="border border-[var(--ui-border-muted)] relative z-[1]" :class="[{ 'border-b-0 rounded-t-[calc(var(--ui-radius)*1.5)]': props.source, 'rounded-[calc(var(--ui-radius)*1.5)]': !props.source }]">
<div v-if="props.options?.length || !!slots.options" class="flex gap-4 p-4 border-b border-[var(--ui-border-muted)]">
<slot name="options" />
<UFormField

21
docs/app/components/content/examples/form/FormExampleElements.vue
View File

@@ -4,6 +4,7 @@ import type { FormSubmitEvent } from '@nuxt/ui'
const schema = z.object({
input: z.string().min(10),
inputNumber: z.number().min(10),
inputMenu: z.any().refine(option => option?.value === 'option-2', {
message: 'Select Option 2'
}),
@@ -56,7 +57,7 @@ async function onSubmit(event: FormSubmitEvent<any>) {
<UForm ref="form" :state="state" :schema="schema" class="w-full" @submit="onSubmit">
<div class="grid grid-cols-3 gap-4">
<UFormField label="Input" name="input">
<UInput v-model="state.input" placeholder="john@lennon.com" class="w-40" />
<UInput v-model="state.input" placeholder="john@lennon.com" class="w-full" />
</UFormField>
<div class="flex flex-col gap-4">
@@ -74,37 +75,37 @@ async function onSubmit(event: FormSubmitEvent<any>) {
</UFormField>
<UFormField name="select" label="Select">
<USelect v-model="state.select" :items="items" class="w-48" />
<USelect v-model="state.select" :items="items" class="w-full" />
</UFormField>
<UFormField name="selectMenu" label="Select Menu">
<USelectMenu v-model="state.selectMenu" :items="items" class="w-48" />
<USelectMenu v-model="state.selectMenu" :items="items" class="w-full" />
</UFormField>
<UFormField name="selectMenuMultiple" label="Select Menu (Multiple)">
<USelectMenu v-model="state.selectMenuMultiple" multiple :items="items" class="w-48" />
<USelectMenu v-model="state.selectMenuMultiple" multiple :items="items" class="w-full" />
</UFormField>
<UFormField name="inputMenu" label="Input Menu">
<UInputMenu v-model="state.inputMenu" :items="items" />
<UInputMenu v-model="state.inputMenu" :items="items" class="w-full" />
</UFormField>
<UFormField name="inputMenuMultiple" label="Input Menu (Multiple)">
<UInputMenu v-model="state.inputMenuMultiple" multiple :items="items" />
<UInputMenu v-model="state.inputMenuMultiple" multiple :items="items" class="w-full" />
</UFormField>
<span />
<UFormField name="inputNumber" label="Input Number">
<UInputNumber v-model="state.inputNumber" class="w-full" />
</UFormField>
<UFormField label="Textarea" name="textarea">
<UTextarea v-model="state.textarea" />
<UTextarea v-model="state.textarea" class="w-full" />
</UFormField>
<UFormField name="radioGroup">
<URadioGroup v-model="state.radioGroup" legend="Radio group" :items="items" />
</UFormField>
<span />
<UFormField name="pin" label="Pin Input" :error-pattern="/(pin)\..*/">
<UPinInput v-model="state.pin" />
</UFormField>

15
docs/app/components/content/examples/input-number/InputNumberCurrencyExample.vue Normal file
View File

@@ -0,0 +1,15 @@
<script setup lang="ts">
const value = ref(1500)
</script>
<template>
<UInputNumber
v-model="value"
:format-options="{
style: 'currency',
currency: 'EUR',
currencyDisplay: 'code',
currencySign: 'accounting'
}"
/>
</template>

13
docs/app/components/content/examples/input-number/InputNumberDecimalExample.vue Normal file
View File

@@ -0,0 +1,13 @@
<script setup lang="ts">
const value = ref(5)
</script>
<template>
<UInputNumber
v-model="value"
:format-options="{
signDisplay: 'exceptZero',
minimumFractionDigits: 1
}"
/>
</template>

9
docs/app/components/content/examples/input-number/InputNumberFormFieldExample.vue Normal file
View File

@@ -0,0 +1,9 @@
<script setup lang="ts">
const retries = ref(0)
</script>
<template>
<UFormField label="Retries" help="Specify number of attempts" required>
<UInputNumber v-model="retries" placeholder="Enter retries" />
</UFormField>
</template>

13
docs/app/components/content/examples/input-number/InputNumberPercentageExample.vue Normal file
View File

@@ -0,0 +1,13 @@
<script setup lang="ts">
const value = ref(0.05)
</script>
<template>
<UInputNumber
v-model="value"
:step="0.01"
:format-options="{
style: 'percent'
}"
/>
</template>

15
docs/app/components/content/examples/input-number/InputNumberSlotsExample.vue Normal file
View File

@@ -0,0 +1,15 @@
<script setup lang="ts">
const value = ref(5)
</script>
<template>
<UInputNumber v-model="value">
<template #decrement>
<UButton size="xs" icon="i-lucide-minus" />
</template>
<template #increment>
<UButton size="xs" icon="i-lucide-plus" />
</template>
</UInputNumber>
</template>

2
docs/app/components/content/examples/input/InputClearButtonExample.vue
View File

@@ -6,7 +6,7 @@ const value = ref('Click to clear')
<UInput
v-model="value"
placeholder="Type something..."
:ui="{ trailing: 'pr-0.5' }"
:ui="{ trailing: 'pe-1' }"
>
<template v-if="value?.length" #trailing>
<UButton

2
docs/app/components/content/examples/input/InputPasswordStrengthIndicatorExample.vue
View File

@@ -40,7 +40,7 @@ const text = computed(() => {
placeholder="Password"
:color="color"
:type="show ? 'text' : 'password'"
:ui="{ trailing: 'pr-0.5' }"
:ui="{ trailing: 'pe-1' }"
:aria-invalid="score < 4"
aria-describedby="password-strength"
class="w-full"

2
docs/app/components/content/examples/input/InputPasswordToggleExample.vue
View File

@@ -8,7 +8,7 @@ const password = ref('password')
v-model="password"
placeholder="Password"
:type="show ? 'text' : 'password'"
:ui="{ trailing: 'pr-0.5' }"
:ui="{ trailing: 'pe-1' }"
>
<template #trailing>
<UButton