chore: fix NumberField label for ids

fix new-york example DatePickerWithIndependentMonths to use related icon @radix-icons/vue
This commit is contained in:
Sadegh Barati 2024-06-03 12:57:47 +03:30
parent 5094a7a498
commit ff8e8f6613
11 changed files with 28 additions and 22 deletions

View File

@ -11,6 +11,7 @@ import { Label } from '@/lib/registry/default/ui/label'
<template>
<NumberField
id="balance"
:default-value="1500"
:format-options="{
style: 'currency',
@ -19,7 +20,7 @@ import { Label } from '@/lib/registry/default/ui/label'
currencySign: 'accounting',
}"
>
<Label>Balance</Label>
<Label for="balance">Balance</Label>
<NumberFieldContent>
<NumberFieldDecrement />
<NumberFieldInput />

View File

@ -11,13 +11,14 @@ import { Label } from '@/lib/registry/default/ui/label'
<template>
<NumberField
id="number"
:default-value="5"
:format-options="{
signDisplay: 'exceptZero',
minimumFractionDigits: 1,
}"
>
<Label>Number</Label>
<Label for="number">Number</Label>
<NumberFieldContent>
<NumberFieldDecrement />
<NumberFieldInput />

View File

@ -10,8 +10,8 @@ import { Label } from '@/lib/registry/default/ui/label'
</script>
<template>
<NumberField :default-value="18" :min="0">
<Label>Age</Label>
<NumberField id="age" :default-value="18" :min="0">
<Label for="age">Age</Label>
<NumberFieldContent>
<NumberFieldDecrement />
<NumberFieldInput />

View File

@ -10,8 +10,8 @@ import { Label } from '@/lib/registry/default/ui/label'
</script>
<template>
<NumberField :default-value="18" :min="0" disabled>
<Label>Age</Label>
<NumberField id="age-disabled" :default-value="18" disabled>
<Label for="age-disabled">Age</Label>
<NumberFieldContent>
<NumberFieldDecrement />
<NumberFieldInput />

View File

@ -11,13 +11,14 @@ import { Label } from '@/lib/registry/default/ui/label'
<template>
<NumberField
id="percent"
:default-value="0.05"
:step="0.01"
:format-options="{
style: 'percent',
}"
>
<Label>Percent</Label>
<Label for="percent">Percent</Label>
<NumberFieldContent>
<NumberFieldDecrement />
<NumberFieldInput />

View File

@ -2,10 +2,10 @@
import { type Ref, ref, watch } from 'vue'
import {
Calendar as CalendarIcon,
ChevronLeft,
ChevronRight,
} from 'lucide-vue-next'
CalendarIcon,
ChevronLeftIcon,
ChevronRightIcon,
} from '@radix-icons/vue'
import {
CalendarDate,
type DateValue,
@ -153,7 +153,7 @@ watch(secondMonthPlaceholder, (_secondMonthPlaceholder) => {
"
@click="updateMonth('first', -1)"
>
<ChevronLeft class="h-4 w-4" />
<ChevronLeftIcon class="h-4 w-4" />
</button>
<div :class="cn('text-sm font-medium')">
{{
@ -171,7 +171,7 @@ watch(secondMonthPlaceholder, (_secondMonthPlaceholder) => {
"
@click="updateMonth('first', 1)"
>
<ChevronRight class="h-4 w-4" />
<ChevronRightIcon class="h-4 w-4" />
</button>
</div>
<RangeCalendarGrid>
@ -219,7 +219,7 @@ watch(secondMonthPlaceholder, (_secondMonthPlaceholder) => {
"
@click="updateMonth('second', -1)"
>
<ChevronLeft class="h-4 w-4" />
<ChevronLeftIcon class="h-4 w-4" />
</button>
<div :class="cn('text-sm font-medium')">
{{
@ -238,7 +238,7 @@ watch(secondMonthPlaceholder, (_secondMonthPlaceholder) => {
"
@click="updateMonth('second', 1)"
>
<ChevronRight class="h-4 w-4" />
<ChevronRightIcon class="h-4 w-4" />
</button>
</div>
<RangeCalendarGrid>

View File

@ -11,6 +11,7 @@ import { Label } from '@/lib/registry/new-york/ui/label'
<template>
<NumberField
id="balance"
:default-value="1500"
:format-options="{
style: 'currency',
@ -19,7 +20,7 @@ import { Label } from '@/lib/registry/new-york/ui/label'
currencySign: 'accounting',
}"
>
<Label>Balance</Label>
<Label for="balance">Balance</Label>
<NumberFieldContent>
<NumberFieldDecrement />
<NumberFieldInput />

View File

@ -11,13 +11,14 @@ import { Label } from '@/lib/registry/new-york/ui/label'
<template>
<NumberField
id="number"
:default-value="5"
:format-options="{
signDisplay: 'exceptZero',
minimumFractionDigits: 1,
}"
>
<Label>Number</Label>
<Label for="number">Number</Label>
<NumberFieldContent>
<NumberFieldDecrement />
<NumberFieldInput />

View File

@ -10,8 +10,8 @@ import { Label } from '@/lib/registry/new-york/ui/label'
</script>
<template>
<NumberField :default-value="18" :min="0">
<Label>Age</Label>
<NumberField id="age" :default-value="18" :min="0">
<Label for="age">Age</Label>
<NumberFieldContent>
<NumberFieldDecrement />
<NumberFieldInput />

View File

@ -10,8 +10,8 @@ import { Label } from '@/lib/registry/new-york/ui/label'
</script>
<template>
<NumberField :default-value="18" disabled>
<Label>Age</Label>
<NumberField id="age-disabled" :default-value="18" disabled>
<Label for="age-disabled">Age</Label>
<NumberFieldContent>
<NumberFieldDecrement />
<NumberFieldInput />

View File

@ -11,13 +11,14 @@ import { Label } from '@/lib/registry/new-york/ui/label'
<template>
<NumberField
id="percent"
:default-value="0.05"
:step="0.01"
:format-options="{
style: 'percent',
}"
>
<Label>Percent</Label>
<Label for="percent">Percent</Label>
<NumberFieldContent>
<NumberFieldDecrement />
<NumberFieldInput />