-
Notifications
You must be signed in to change notification settings - Fork 296
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: add number-field component (#571)
- Loading branch information
1 parent
f48d1d4
commit ce6eb79
Showing
44 changed files
with
2,152 additions
and
1,422 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,71 @@ | ||
| --- | ||
| title: Number Field | ||
| description: A number field allows a user to enter a number and increment or decrement the value using stepper buttons. | ||
| source: apps/www/src/lib/registry/default/ui/number-field | ||
| primitive: https://www.radix-vue.com/components/number-field.html | ||
| --- | ||
|
|
||
| <ComponentPreview name="NumberFieldDemo" class="max-w-[180px]" /> | ||
|
|
||
| ## Installation | ||
|
|
||
| <TabPreview name="CLI"> | ||
| <template #CLI> | ||
|
|
||
| ```bash | ||
| npx shadcn-vue@latest add number-field | ||
| ``` | ||
| </template> | ||
| </TabPreview> | ||
|
|
||
| ## Usage | ||
|
|
||
| ```vue | ||
| <script setup lang="ts"> | ||
| import { | ||
| NumberField, | ||
| NumberFieldContent, | ||
| NumberFieldDecrement, | ||
| NumberFieldIncrement, | ||
| NumberFieldInput, | ||
| } from '@/lib/registry/default/ui/number-field' | ||
| import { Label } from '@/lib/registry/default/ui/label' | ||
| </script> | ||
| <template> | ||
| <NumberField> | ||
| <Label>Age</Label> | ||
| <NumberFieldContent> | ||
| <NumberFieldDecrement /> | ||
| <NumberFieldInput /> | ||
| <NumberFieldIncrement /> | ||
| </NumberFieldContent> | ||
| </NumberField> | ||
| </template> | ||
| ``` | ||
|
|
||
| ## Examples | ||
|
|
||
| ### Default | ||
|
|
||
| <ComponentPreview name="NumberFieldDemo" class="max-w-[180px]" /> | ||
|
|
||
| ### Disabled | ||
|
|
||
| <ComponentPreview name="NumberFieldDisabled" class="max-w-[180px]" /> | ||
|
|
||
| ### Decimal | ||
|
|
||
| <ComponentPreview name="NumberFieldDecimal" class="max-w-[180px]" /> | ||
|
|
||
| ### Percentage | ||
|
|
||
| <ComponentPreview name="NumberFieldPercentage" class="max-w-[180px]" /> | ||
|
|
||
| ### Currency | ||
|
|
||
| <ComponentPreview name="NumberFieldCurrency" class="max-w-[220px]" /> | ||
|
|
||
| ### Form | ||
|
|
||
| <ComponentPreview name="NumberFieldForm" class="max-w-xs" /> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
30 changes: 30 additions & 0 deletions
30
apps/www/src/lib/registry/default/example/NumberFieldCurrency.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| <script setup lang="ts"> | ||
| import { | ||
| NumberField, | ||
| NumberFieldContent, | ||
| NumberFieldDecrement, | ||
| NumberFieldIncrement, | ||
| NumberFieldInput, | ||
| } from '@/lib/registry/default/ui/number-field' | ||
| import { Label } from '@/lib/registry/default/ui/label' | ||
| </script> | ||
|
|
||
| <template> | ||
| <NumberField | ||
| id="balance" | ||
| :default-value="1500" | ||
| :format-options="{ | ||
| style: 'currency', | ||
| currency: 'EUR', | ||
| currencyDisplay: 'code', | ||
| currencySign: 'accounting', | ||
| }" | ||
| > | ||
| <Label for="balance">Balance</Label> | ||
| <NumberFieldContent> | ||
| <NumberFieldDecrement /> | ||
| <NumberFieldInput /> | ||
| <NumberFieldIncrement /> | ||
| </NumberFieldContent> | ||
| </NumberField> | ||
| </template> |
28 changes: 28 additions & 0 deletions
28
apps/www/src/lib/registry/default/example/NumberFieldDecimal.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,28 @@ | ||
| <script setup lang="ts"> | ||
| import { | ||
| NumberField, | ||
| NumberFieldContent, | ||
| NumberFieldDecrement, | ||
| NumberFieldIncrement, | ||
| NumberFieldInput, | ||
| } from '@/lib/registry/default/ui/number-field' | ||
| import { Label } from '@/lib/registry/default/ui/label' | ||
| </script> | ||
|
|
||
| <template> | ||
| <NumberField | ||
| id="number" | ||
| :default-value="5" | ||
| :format-options="{ | ||
| signDisplay: 'exceptZero', | ||
| minimumFractionDigits: 1, | ||
| }" | ||
| > | ||
| <Label for="number">Number</Label> | ||
| <NumberFieldContent> | ||
| <NumberFieldDecrement /> | ||
| <NumberFieldInput /> | ||
| <NumberFieldIncrement /> | ||
| </NumberFieldContent> | ||
| </NumberField> | ||
| </template> |
21 changes: 21 additions & 0 deletions
21
apps/www/src/lib/registry/default/example/NumberFieldDemo.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| <script setup lang="ts"> | ||
| import { | ||
| NumberField, | ||
| NumberFieldContent, | ||
| NumberFieldDecrement, | ||
| NumberFieldIncrement, | ||
| NumberFieldInput, | ||
| } from '@/lib/registry/default/ui/number-field' | ||
| import { Label } from '@/lib/registry/default/ui/label' | ||
| </script> | ||
|
|
||
| <template> | ||
| <NumberField id="age" :default-value="18" :min="0"> | ||
| <Label for="age">Age</Label> | ||
| <NumberFieldContent> | ||
| <NumberFieldDecrement /> | ||
| <NumberFieldInput /> | ||
| <NumberFieldIncrement /> | ||
| </NumberFieldContent> | ||
| </NumberField> | ||
| </template> |
21 changes: 21 additions & 0 deletions
21
apps/www/src/lib/registry/default/example/NumberFieldDisabled.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| <script setup lang="ts"> | ||
| import { | ||
| NumberField, | ||
| NumberFieldContent, | ||
| NumberFieldDecrement, | ||
| NumberFieldIncrement, | ||
| NumberFieldInput, | ||
| } from '@/lib/registry/default/ui/number-field' | ||
| import { Label } from '@/lib/registry/default/ui/label' | ||
| </script> | ||
|
|
||
| <template> | ||
| <NumberField id="age-disabled" :default-value="18" disabled> | ||
| <Label for="age-disabled">Age</Label> | ||
| <NumberFieldContent> | ||
| <NumberFieldDecrement /> | ||
| <NumberFieldInput /> | ||
| <NumberFieldIncrement /> | ||
| </NumberFieldContent> | ||
| </NumberField> | ||
| </template> |
Oops, something went wrong.