Skip to content

Commit 7236b7b

Browse files
iloomiloiloomilo
authored
docs: add number field component to documentation
1 parent 1140551 commit 7236b7b

File tree

8 files changed

+345
-5
lines changed

8 files changed

+345
-5
lines changed

‎apps/v4/components/demo/NumberFieldCurrencyDemo.vue‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<script setup lang="ts">
2+
import { Label } from '@/registry/new-york-v4/ui/label'
3+
import {
4+
NumberField,
5+
NumberFieldContent,
6+
NumberFieldDecrement,
7+
NumberFieldIncrement,
8+
NumberFieldInput,
9+
} from '@/registry/new-york-v4/ui/number-field'
10+
</script>
11+
12+
<template>
13+
<NumberField
14+
id="balance"
15+
:default-value="1500"
16+
:format-options="{
17+
style: 'currency',
18+
currency: 'EUR',
19+
currencyDisplay: 'code',
20+
currencySign: 'accounting',
21+
}"
22+
>
23+
<Label for="balance">Balance</Label>
24+
<NumberFieldContent>
25+
<NumberFieldDecrement />
26+
<NumberFieldInput />
27+
<NumberFieldIncrement />
28+
</NumberFieldContent>
29+
</NumberField>
30+
</template>

‎apps/v4/components/demo/NumberFieldDecimalDemo.vue‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<script setup lang="ts">
2+
import { Label } from '@/registry/new-york-v4/ui/label'
3+
import {
4+
NumberField,
5+
NumberFieldContent,
6+
NumberFieldDecrement,
7+
NumberFieldIncrement,
8+
NumberFieldInput,
9+
} from '@/registry/new-york-v4/ui/number-field'
10+
</script>
11+
12+
<template>
13+
<NumberField
14+
id="number"
15+
:default-value="5"
16+
:format-options="{
17+
signDisplay: 'exceptZero',
18+
minimumFractionDigits: 1,
19+
}"
20+
>
21+
<Label for="number">Number</Label>
22+
<NumberFieldContent>
23+
<NumberFieldDecrement />
24+
<NumberFieldInput />
25+
<NumberFieldIncrement />
26+
</NumberFieldContent>
27+
</NumberField>
28+
</template>

‎apps/v4/components/demo/NumberFieldDemo.vue‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<script setup lang="ts">
2+
import { Label } from '@/registry/new-york-v4/ui/label'
3+
import {
4+
NumberField,
5+
NumberFieldContent,
6+
NumberFieldDecrement,
7+
NumberFieldIncrement,
8+
NumberFieldInput,
9+
} from '@/registry/new-york-v4/ui/number-field'
10+
</script>
11+
12+
<template>
13+
<NumberField id="age" :default-value="18" :min="0">
14+
<Label for="age">Age</Label>
15+
<NumberFieldContent>
16+
<NumberFieldDecrement />
17+
<NumberFieldInput />
18+
<NumberFieldIncrement />
19+
</NumberFieldContent>
20+
</NumberField>
21+
</template>

‎apps/v4/components/demo/NumberFieldDisabledDemo.vue‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<script setup lang="ts">
2+
import { Label } from '@/registry/new-york-v4/ui/label'
3+
import {
4+
NumberField,
5+
NumberFieldContent,
6+
NumberFieldDecrement,
7+
NumberFieldIncrement,
8+
NumberFieldInput,
9+
} from '@/registry/new-york-v4/ui/number-field'
10+
</script>
11+
12+
<template>
13+
<NumberField id="age-disabled" :default-value="18" disabled>
14+
<Label for="age-disabled">Age</Label>
15+
<NumberFieldContent>
16+
<NumberFieldDecrement />
17+
<NumberFieldInput />
18+
<NumberFieldIncrement />
19+
</NumberFieldContent>
20+
</NumberField>
21+
</template>

‎apps/v4/components/demo/NumberFieldFormDemo.vue‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
<script setup lang="ts">
2+
import { toTypedSchema } from '@vee-validate/zod'
3+
import { useForm } from 'vee-validate'
4+
import { h } from 'vue'
5+
import { toast } from 'vue-sonner'
6+
7+
import * as z from 'zod'
8+
import { Button } from '@/registry/new-york-v4/ui/button'
9+
import {
10+
FormControl,
11+
FormDescription,
12+
FormField,
13+
FormItem,
14+
FormLabel,
15+
FormMessage,
16+
} from '@/registry/new-york-v4/ui/form'
17+
import {
18+
NumberField,
19+
NumberFieldContent,
20+
NumberFieldDecrement,
21+
NumberFieldIncrement,
22+
NumberFieldInput,
23+
} from '@/registry/new-york-v4/ui/number-field'
24+
25+
const formSchema = toTypedSchema(z.object({
26+
payment: z.number().min(10, 'Min 10 euros to send payment').max(5000, 'Max 5000 euros to send payment'),
27+
}))
28+
29+
const { handleSubmit, setFieldValue } = useForm({
30+
validationSchema: formSchema,
31+
initialValues: {
32+
payment: 10,
33+
},
34+
})
35+
36+
const onSubmit = handleSubmit((values) => {
37+
toast({
38+
title: 'You submitted the following values:',
39+
description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),
40+
})
41+
})
42+
</script>
43+
44+
<template>
45+
<form class="w-2/3 space-y-6" @submit="onSubmit">
46+
<FormField v-slot="{ value }" name="payment">
47+
<FormItem>
48+
<FormLabel>Payment</FormLabel>
49+
<NumberField
50+
class="gap-2"
51+
:min="0"
52+
:format-options="{
53+
style: 'currency',
54+
currency: 'EUR',
55+
currencyDisplay: 'code',
56+
currencySign: 'accounting',
57+
}"
58+
:model-value="value"
59+
@update:model-value="(v) => {
60+
if (v) {
61+
setFieldValue('payment', v)
62+
}
63+
else {
64+
setFieldValue('payment', undefined)
65+
}
66+
}"
67+
>
68+
<NumberFieldContent>
69+
<NumberFieldDecrement />
70+
<FormControl>
71+
<NumberFieldInput />
72+
</FormControl>
73+
<NumberFieldIncrement />
74+
</NumberFieldContent>
75+
</NumberField>
76+
<FormDescription>
77+
Enter value between 10 and 5000.
78+
</FormDescription>
79+
<FormMessage />
80+
</FormItem>
81+
</FormField>
82+
<Button type="submit">
83+
Submit
84+
</Button>
85+
</form>
86+
</template>

‎apps/v4/components/demo/NumberFieldPercentageDemo.vue‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<script setup lang="ts">
2+
import { Label } from '@/registry/new-york-v4/ui/label'
3+
import {
4+
NumberField,
5+
NumberFieldContent,
6+
NumberFieldDecrement,
7+
NumberFieldIncrement,
8+
NumberFieldInput,
9+
} from '@/registry/new-york-v4/ui/number-field'
10+
</script>
11+
12+
<template>
13+
<NumberField
14+
id="percent"
15+
:default-value="0.05"
16+
:step="0.01"
17+
:format-options="{
18+
style: 'percent',
19+
}"
20+
>
21+
<Label for="percent">Percent</Label>
22+
<NumberFieldContent>
23+
<NumberFieldDecrement />
24+
<NumberFieldInput />
25+
<NumberFieldIncrement />
26+
</NumberFieldContent>
27+
</NumberField>
28+
</template>

‎apps/v4/content/docs/components/number-field.md‎

Lines changed: 126 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
---
2+
title: Number Field
3+
description: A number field allows a user to enter a number and increment or decrement the value using stepper buttons.
4+
component: true
5+
links:
6+
doc: https://reka-ui.com/docs/components/number-field
7+
api: https://reka-ui.com/docs/components/number-field#api-reference
8+
---
9+
10+
::component-preview
11+
---
12+
name: NumberFieldDemo
13+
description: An default Number Field
14+
---
15+
::
16+
17+
## Installation
18+
19+
::code-tabs
20+
21+
::tabs-list
22+
23+
::tabs-trigger{value="cli"}
24+
CLI
25+
::
26+
27+
::tabs-trigger{value="manual"}
28+
Manual
29+
::
30+
31+
::
32+
33+
::tabs-content{value="cli"}
34+
35+
```bash
36+
npx shadcn-vue@latest add number-field
37+
```
38+
39+
::
40+
41+
::tabs-content{value="manual"}
42+
::steps
43+
::step
44+
Install the following dependencies:
45+
::
46+
47+
```bash
48+
npm install reka-ui
49+
```
50+
51+
::step
52+
Copy and paste the [GitHub source code](https://github.com/unovue/shadcn-vue/tree/dev/apps/v4/registry/new-york-v4/ui/number-field) into your project.
53+
::
54+
55+
::step
56+
Update the import paths to match your project setup.
57+
::
58+
::
59+
::
60+
61+
::
62+
63+
### Disabled
64+
::component-preview
65+
---
66+
name: NumberFieldDisabledDemo
67+
description: Disabled Number Field
68+
---
69+
::
70+
71+
### Decimal
72+
::component-preview
73+
---
74+
name: NumberFieldDecimalDemo
75+
description: Number Field with decimal support
76+
---
77+
::
78+
79+
### Percentage
80+
::component-preview
81+
---
82+
name: NumberFieldPercentageDemo
83+
description: Percentage Number Field
84+
---
85+
::
86+
87+
### Currency
88+
::component-preview
89+
---
90+
name: NumberFieldCurrencyDemo
91+
description: Currency Number Field
92+
---
93+
::
94+
95+
### Form
96+
::component-preview
97+
---
98+
name: NumberFieldFormDemo
99+
description: Number Field inside a form
100+
---
101+
::
102+
103+
## Usage
104+
105+
```vue showLineNumbers
106+
<script setup lang="ts">
107+
import {
108+
NumberField,
109+
NumberFieldContent,
110+
NumberFieldDecrement,
111+
NumberFieldIncrement,
112+
NumberFieldInput,
113+
} from '@/components/ui/number-field'
114+
</script>
115+
116+
<template>
117+
<NumberField :default-value="18" :min="0">
118+
<NumberFieldContent>
119+
<NumberFieldDecrement />
120+
<NumberFieldInput />
121+
<NumberFieldIncrement />
122+
</NumberFieldContent>
123+
</NumberField>
124+
</template>
125+
126+
```

‎apps/v4/public/r/styles/new-york-v4/number-field.json‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,11 @@
77
"@vueuse/core"
88
],
99
"files": [
10+
{
11+
"path": "registry/new-york-v4/ui/number-field/index.ts",
12+
"content": "export { default as NumberField } from \"./NumberField.vue\"\nexport { default as NumberFieldContent } from \"./NumberFieldContent.vue\"\nexport { default as NumberFieldDecrement } from \"./NumberFieldDecrement.vue\"\nexport { default as NumberFieldIncrement } from \"./NumberFieldIncrement.vue\"\nexport { default as NumberFieldInput } from \"./NumberFieldInput.vue\"\n",
13+
"type": "registry:ui"
14+
},
1015
{
1116
"path": "registry/new-york-v4/ui/number-field/NumberField.vue",
1217
"content": "<script setup lang=\"ts\">\nimport type { NumberFieldRootEmits, NumberFieldRootProps } from \"reka-ui\"\nimport type { HTMLAttributes } from \"vue\"\nimport { reactiveOmit } from \"@vueuse/core\"\nimport { NumberFieldRoot, useForwardPropsEmits } from \"reka-ui\"\nimport { cn } from \"@/lib/utils\"\n\nconst props = defineProps<NumberFieldRootProps & { class?: HTMLAttributes[\"class\"] }>()\nconst emits = defineEmits<NumberFieldRootEmits>()\n\nconst delegatedProps = reactiveOmit(props, \"class\")\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n <NumberFieldRoot v-slot=\"slotProps\" v-bind=\"forwarded\" :class=\"cn('grid gap-1.5', props.class)\">\n <slot v-bind=\"slotProps\" />\n </NumberFieldRoot>\n</template>\n",
@@ -31,11 +36,6 @@
3136
"path": "registry/new-york-v4/ui/number-field/NumberFieldInput.vue",
3237
"content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from \"vue\"\nimport { NumberFieldInput } from \"reka-ui\"\nimport { cn } from \"@/lib/utils\"\n\nconst props = defineProps<{\n class?: HTMLAttributes[\"class\"]\n}>()\n</script>\n\n<template>\n <NumberFieldInput\n data-slot=\"input\"\n :class=\"cn('flex h-9 w-full rounded-md border border-input bg-transparent py-1 text-sm text-center shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50', props.class)\"\n />\n</template>\n",
3338
"type": "registry:ui"
34-
},
35-
{
36-
"path": "registry/new-york-v4/ui/number-field/index.ts",
37-
"content": "export { default as NumberField } from \"./NumberField.vue\"\nexport { default as NumberFieldContent } from \"./NumberFieldContent.vue\"\nexport { default as NumberFieldDecrement } from \"./NumberFieldDecrement.vue\"\nexport { default as NumberFieldIncrement } from \"./NumberFieldIncrement.vue\"\nexport { default as NumberFieldInput } from \"./NumberFieldInput.vue\"\n",
38-
"type": "registry:ui"
3939
}
4040
]
4141
}

0 commit comments

Comments
 (0)