docs: update reference api link
This commit is contained in:
zernonia
parent
da5f36227f
commit
5c4b16c76b
|
|
@ -23,7 +23,7 @@
|
|||
"@tanstack/vue-table": "^8.20.5",
|
||||
"@unovis/ts": "^1.4.4",
|
||||
"@unovis/vue": "^1.4.4",
|
||||
"@vee-validate/zod": "^4.14.7",
|
||||
"@vee-validate/zod": "^4.13.2",
|
||||
"@vueuse/core": "^11.2.0",
|
||||
"class-variance-authority": "^0.7.0",
|
||||
"clsx": "^2.1.1",
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
title: Accordion
|
||||
description: A vertically stacked set of interactive headings that each reveal a section of content.
|
||||
source: apps/www/src/lib/registry/default/ui/accordion
|
||||
primitive: https://www.reka-ui.com/components/accordion.html
|
||||
primitive: https://www.reka-ui.com/docs/components/accordion.html
|
||||
---
|
||||
|
||||
<ComponentPreview name="AccordionDemo" class="sm:max-w-[70%]" />
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
title: Alert Dialog
|
||||
description: A modal dialog that interrupts the user with important content and expects a response.
|
||||
source: apps/www/src/lib/registry/default/ui/alert-dialog
|
||||
primitive: https://www.reka-ui.com/components/alert-dialog.html
|
||||
primitive: https://www.reka-ui.com/docs/components/alert-dialog.html
|
||||
---
|
||||
|
||||
<ComponentPreview name="AlertDialogDemo" />
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
title: Aspect Ratio
|
||||
description: Displays content within a desired ratio.
|
||||
source: apps/www/src/lib/registry/default/ui/aspect-ratio
|
||||
primitive: https://www.reka-ui.com/components/aspect-ratio.html
|
||||
primitive: https://www.reka-ui.com/docs/components/aspect-ratio.html
|
||||
---
|
||||
|
||||
<ComponentPreview name="AspectRatioDemo" />
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
title: Avatar
|
||||
description: An image element with a fallback for representing the user.
|
||||
source: apps/www/src/lib/registry/default/ui/avatar
|
||||
primitive: https://www.reka-ui.com/components/avatar.html
|
||||
primitive: https://www.reka-ui.com/docs/components/avatar.html
|
||||
---
|
||||
|
||||
<ComponentPreview name="AvatarDemo" />
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
title: Calendar
|
||||
description: A date field component that allows users to enter and edit date.
|
||||
source: apps/www/src/lib/registry/default/ui/calendar
|
||||
primitive: https://www.reka-ui.com/components/calendar.html
|
||||
primitive: https://www.reka-ui.com/docs/components/calendar.html
|
||||
---
|
||||
|
||||
<ComponentPreview name="CalendarDemo" />
|
||||
|
|
@ -15,7 +15,7 @@ If you're looking for **previous** Calendar implementation, checkout to <span cl
|
|||
|
||||
## About
|
||||
|
||||
The `<Calendar />` component is built on top of the [RadixVue Calendar](https://www.reka-ui.com/components/calendar.html) component, which uses the [@internationalized/date](https://react-spectrum.adobe.com/internationalized/date/index.html) package to handle dates.
|
||||
The `<Calendar />` component is built on top of the [RadixVue Calendar](https://www.reka-ui.com/docs/components/calendar.html) component, which uses the [@internationalized/date](https://react-spectrum.adobe.com/internationalized/date/index.html) package to handle dates.
|
||||
|
||||
If you're looking for a range calendar, check out the [Range Calendar](/docs/components/range-calendar) component.
|
||||
|
||||
|
|
@ -26,7 +26,7 @@ npx shadcn-vue@latest add calendar
|
|||
```
|
||||
::: tip
|
||||
The component depends on the [@internationalized/date](https://react-spectrum.adobe.com/internationalized/date/index.html) package, which solves a lot of the problems that come with working with dates and times in JavaScript.
|
||||
Check [Dates & Times in Radix Vue](https://www.reka-ui.com/guides/dates.html) for more information and installation instructions.
|
||||
Check [Dates & Times in Radix Vue](https://www.reka-ui.com/docs/guides/dates.html) for more information and installation instructions.
|
||||
:::
|
||||
|
||||
## Datepicker
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
title: Checkbox
|
||||
description: A control that allows the user to toggle between checked and not checked.
|
||||
source: apps/www/src/lib/registry/default/ui/checkbox
|
||||
primitive: https://www.reka-ui.com/components/checkbox.html
|
||||
primitive: https://www.reka-ui.com/docs/components/checkbox.html
|
||||
---
|
||||
|
||||
<ComponentPreview name="CheckboxDemo" />
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
title: Collapsible
|
||||
description: An interactive component which expands/collapses a panel.
|
||||
source: apps/www/src/lib/registry/default/ui/collapsible
|
||||
primitive: https://www.reka-ui.com/components/collapsible.html
|
||||
primitive: https://www.reka-ui.com/docs/components/collapsible.html
|
||||
---
|
||||
|
||||
<ComponentPreview name="CollapsibleDemo" />
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
title: Command
|
||||
description: Fast, composable, unstyled command menu.
|
||||
source: apps/www/src/lib/registry/default/ui/command
|
||||
primitive: https://www.reka-ui.com/components/combobox.html
|
||||
primitive: https://www.reka-ui.com/docs/components/combobox.html
|
||||
---
|
||||
|
||||
<ComponentPreview name="CommandDemo" />
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
title: Context Menu
|
||||
description: Displays a menu to the user — such as a set of actions or functions — triggered by a button.
|
||||
source: apps/www/src/lib/registry/default/ui/context-menu
|
||||
primitive: https://www.reka-ui.com/components/context-menu.html
|
||||
primitive: https://www.reka-ui.com/docs/components/context-menu.html
|
||||
---
|
||||
|
||||
<ComponentPreview name="ContextMenuDemo" />
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
title: Date Picker
|
||||
description: A date picker component with range and presets.
|
||||
source: apps/www/src/lib/registry/default/example/DatePickerDemo.vue
|
||||
primitive: https://www.reka-ui.com/components/calendar.html
|
||||
primitive: https://www.reka-ui.com/docs/components/calendar.html
|
||||
---
|
||||
|
||||
<ComponentPreview name="DatePickerDemo" />
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
title: Dialog
|
||||
description: A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.
|
||||
source: apps/www/src/lib/registry/default/ui/dialog
|
||||
primitive: https://www.reka-ui.com/components/dialog.html
|
||||
primitive: https://www.reka-ui.com/docs/components/dialog.html
|
||||
---
|
||||
|
||||
<ComponentPreview name="DialogDemo" />
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
title: Dropdown Menu
|
||||
description: Displays a menu to the user — such as a set of actions or functions — triggered by a button.
|
||||
source: apps/www/src/lib/registry/default/ui/dropdown-menu
|
||||
primitive: https://www.reka-ui.com/components/dropdown-menu.html
|
||||
primitive: https://www.reka-ui.com/docs/components/dropdown-menu.html
|
||||
---
|
||||
|
||||
<ComponentPreview name="DropdownMenuDemo" />
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
title: Hover Card
|
||||
description: For sighted users to preview content available behind a link.
|
||||
source: apps/www/src/lib/registry/default/ui/hover-card
|
||||
primitive: https://www.reka-ui.com/components/hover-card.html
|
||||
primitive: https://www.reka-ui.com/docs/components/hover-card.html
|
||||
---
|
||||
|
||||
<ComponentPreview name="HoverCardDemo" />
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
title: Label
|
||||
description: Renders an accessible label associated with controls.
|
||||
source: apps/www/src/lib/registry/default/ui/label
|
||||
primitive: https://www.reka-ui.com/components/label.html
|
||||
primitive: https://www.reka-ui.com/docs/components/label.html
|
||||
---
|
||||
|
||||
<ComponentPreview name="LabelDemo" />
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
title: Menubar
|
||||
description: A visually persistent menu common in desktop applications that provides quick access to a consistent set of commands.
|
||||
source: apps/www/src/lib/registry/default/ui/menubar
|
||||
primitive: https://www.reka-ui.com/components/menubar.html
|
||||
primitive: https://www.reka-ui.com/docs/components/menubar.html
|
||||
---
|
||||
|
||||
<ComponentPreview name="MenubarDemo" />
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
title: Navigation Menu
|
||||
description: A collection of links for navigating websites.
|
||||
source: apps/www/src/lib/registry/default/ui/navigation-menu
|
||||
primitive: https://www.reka-ui.com/components/navigation-menu.html
|
||||
primitive: https://www.reka-ui.com/docs/components/navigation-menu.html
|
||||
---
|
||||
|
||||
<ComponentPreview name="NavigationMenuDemo" />
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
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.reka-ui.com/components/number-field.html
|
||||
primitive: https://www.reka-ui.com/docs/components/number-field.html
|
||||
---
|
||||
|
||||
<ComponentPreview name="NumberFieldDemo" class="max-w-[180px]" />
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
title: Pagination
|
||||
description: Displays data in paged format and provides navigation between pages.
|
||||
source: apps/www/src/lib/registry/default/ui/pagination
|
||||
primitive: https://www.reka-ui.com/components/pagination.html
|
||||
primitive: https://www.reka-ui.com/docs/components/pagination.html
|
||||
---
|
||||
|
||||
<ComponentPreview name="PaginationDemo" />
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
title: PIN Input
|
||||
description: Allows users to input a sequence of one-character alphanumeric inputs.
|
||||
source: apps/www/src/lib/registry/default/ui/pin-input
|
||||
primitive: https://www.reka-ui.com/components/pin-input.html
|
||||
primitive: https://www.reka-ui.com/docs/components/pin-input.html
|
||||
---
|
||||
|
||||
<ComponentPreview name="PinInputDemo" />
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
title: Popover
|
||||
description: Displays rich content in a portal, triggered by a button.
|
||||
source: apps/www/src/lib/registry/default/ui/popover
|
||||
primitive: https://www.reka-ui.com/components/popover.html
|
||||
primitive: https://www.reka-ui.com/docs/components/popover.html
|
||||
---
|
||||
|
||||
<ComponentPreview name="PopoverDemo" />
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
title: Progress
|
||||
description: Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
|
||||
source: apps/www/src/lib/registry/default/ui/progress
|
||||
primitive: https://www.reka-ui.com/components/progress.html
|
||||
primitive: https://www.reka-ui.com/docs/components/progress.html
|
||||
---
|
||||
|
||||
<ComponentPreview name="ProgressDemo" />
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
title: Radio Group
|
||||
description: A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.
|
||||
source: apps/www/src/lib/registry/default/ui/radio-group
|
||||
primitive: https://www.reka-ui.com/components/radio-group.html
|
||||
primitive: https://www.reka-ui.com/docs/components/radio-group.html
|
||||
---
|
||||
|
||||
<ComponentPreview name="RadioGroupDemo" />
|
||||
|
|
|
|||
|
|
@ -2,14 +2,14 @@
|
|||
title: Range Calendar
|
||||
description: A calendar component that allows users to select a range of dates.
|
||||
source: apps/www/src/lib/registry/default/ui/range-calendar
|
||||
primitive: https://www.reka-ui.com/components/range-calendar.html
|
||||
primitive: https://www.reka-ui.com/docs/components/range-calendar.html
|
||||
---
|
||||
|
||||
<ComponentPreview name="RangeCalendarDemo" />
|
||||
|
||||
## About
|
||||
|
||||
The `<RangeCalendar />` component is built on top of the [RadixVue Range Calendar](https://www.reka-ui.com/components/date-range-picker.html) component, which uses the [@internationalized/date](https://react-spectrum.adobe.com/internationalized/date/index.html) package to handle dates.
|
||||
The `<RangeCalendar />` component is built on top of the [RadixVue Range Calendar](https://www.reka-ui.com/docs/components/date-range-picker.html) component, which uses the [@internationalized/date](https://react-spectrum.adobe.com/internationalized/date/index.html) package to handle dates.
|
||||
|
||||
## Installation
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
title: Resizable
|
||||
description: Accessible resizable panel groups and layouts with keyboard support.
|
||||
source: apps/www/src/lib/registry/default/ui/resizable
|
||||
primitive: https://www.reka-ui.com/components/splitter.html
|
||||
primitive: https://www.reka-ui.com/docs/components/splitter.html
|
||||
---
|
||||
|
||||
<ComponentPreview name="ResizableDemo" />
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
title: Scroll-area
|
||||
description: Augments native scroll functionality for custom, cross-browser styling.
|
||||
source: apps/www/src/lib/registry/default/ui/scroll-area
|
||||
primitive: https://www.reka-ui.com/components/scroll-area.html
|
||||
primitive: https://www.reka-ui.com/docs/components/scroll-area.html
|
||||
---
|
||||
|
||||
<ComponentPreview name="ScrollAreaDemo" />
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
title: Select
|
||||
description: Displays a list of options for the user to pick from—triggered by a button.
|
||||
source: apps/www/src/lib/registry/default/ui/select
|
||||
primitive: https://www.reka-ui.com/components/select.html
|
||||
primitive: https://www.reka-ui.com/docs/components/select.html
|
||||
---
|
||||
|
||||
<ComponentPreview name="SelectDemo" />
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
title: Separator
|
||||
description: Visually or semantically separates content.
|
||||
source: apps/www/src/lib/registry/default/ui/separator
|
||||
primitive: https://www.reka-ui.com/components/separator.html
|
||||
primitive: https://www.reka-ui.com/docs/components/separator.html
|
||||
---
|
||||
|
||||
<ComponentPreview name="SeparatorDemo" />
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
title: Sheet
|
||||
description: Extends the Dialog component to display content that complements the main content of the screen.
|
||||
source: apps/www/src/lib/registry/default/ui/sheet
|
||||
primitive: https://www.reka-ui.com/components/dialog.html
|
||||
primitive: https://www.reka-ui.com/docs/components/dialog.html
|
||||
---
|
||||
|
||||
<ComponentPreview name="SheetDemo" />
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
title: Slider
|
||||
description: An input where the user selects a value from within a given range.
|
||||
source: apps/www/src/lib/registry/default/ui/slider
|
||||
primitive: https://www.reka-ui.com/components/slider.html
|
||||
primitive: https://www.reka-ui.com/docs/components/slider.html
|
||||
---
|
||||
|
||||
<ComponentPreview name="SliderDemo" />
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
title: Stepper
|
||||
description: A set of steps that are used to indicate progress through a multi-step process.
|
||||
source: apps/www/src/lib/registry/default/ui/stepper
|
||||
primitive: https://www.reka-ui.com/components/stepper.html
|
||||
primitive: https://www.reka-ui.com/docs/components/stepper.html
|
||||
---
|
||||
|
||||
<ComponentPreview name="StepperDemo" />
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
title: Switch
|
||||
description: A control that allows the user to toggle between checked and not checked.
|
||||
source: apps/www/src/lib/registry/default/ui/switch
|
||||
primitive: https://www.reka-ui.com/components/switch.html
|
||||
primitive: https://www.reka-ui.com/docs/components/switch.html
|
||||
---
|
||||
|
||||
<ComponentPreview name="SwitchDemo" />
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
title: Tabs
|
||||
description: A set of layered sections of content—known as tab panels—that are displayed one at a time.
|
||||
source: apps/www/src/lib/registry/default/ui/tabs
|
||||
primitive: https://www.reka-ui.com/components/tabs.html
|
||||
primitive: https://www.reka-ui.com/docs/components/tabs.html
|
||||
---
|
||||
|
||||
<ComponentPreview name="TabsDemo" />
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
title: Tags Input
|
||||
description: Tag inputs render tags inside an input, followed by an actual text input.
|
||||
source: apps/www/src/lib/registry/default/ui/tags-input
|
||||
primitive: https://www.reka-ui.com/components/tags-input.html
|
||||
primitive: https://www.reka-ui.com/docs/components/tags-input.html
|
||||
---
|
||||
|
||||
<ComponentPreview name="TagsInputDemo" />
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
title: Toast
|
||||
description: A succinct message that is displayed temporarily.
|
||||
source: apps/www/src/lib/registry/default/ui/toast
|
||||
primitive: https://www.reka-ui.com/components/toast.html
|
||||
primitive: https://www.reka-ui.com/docs/components/toast.html
|
||||
---
|
||||
|
||||
<ComponentPreview name="ToastDemo" />
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
title: Toggle Group
|
||||
description: A set of two-state buttons that can be toggled on or off.
|
||||
source: apps/www/src/lib/registry/default/ui/toggle-group
|
||||
primitive: https://www.reka-ui.com/components/toggle-group.html
|
||||
primitive: https://www.reka-ui.com/docs/components/toggle-group.html
|
||||
---
|
||||
|
||||
<ComponentPreview name="ToggleGroupDemo" />
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
title: Toggle
|
||||
description: A two-state button that can be either on or off.
|
||||
source: apps/www/src/lib/registry/default/ui/toggle
|
||||
primitive: https://www.reka-ui.com/components/toggle.html
|
||||
primitive: https://www.reka-ui.com/docs/components/toggle.html
|
||||
---
|
||||
|
||||
<ComponentPreview name="ToggleDemo" />
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
title: Tooltip
|
||||
description: A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.
|
||||
source: apps/www/src/lib/registry/default/ui/tooltip
|
||||
primitive: https://www.reka-ui.com/components/tooltip.html
|
||||
primitive: https://www.reka-ui.com/docs/components/tooltip.html
|
||||
---
|
||||
|
||||
<ComponentPreview name="TooltipDemo" />
|
||||
|
|
|
|||
|
|
@ -180,7 +180,7 @@ There are many cases that you need to wrap `Reka UI` components.
|
|||
### Props & Events
|
||||
All of the `Reka UI` compoennts expose their prop and emit types. We need to forward any props/events that are coming from outside to the `Reka UI` component.
|
||||
|
||||
To do so, we have a helper function named [`useForwardPropsEmits`](https://www.reka-ui.com/utilities/use-forward-props-emits.html) that combines props and events that must be binded to the child radix component.
|
||||
To do so, we have a helper function named [`useForwardPropsEmits`](https://www.reka-ui.com/docs/utilities/use-forward-props-emits.html) that combines props and events that must be binded to the child radix component.
|
||||
|
||||
To be more clear, the function `useForwardPropsEmits` takes in props and an optional emit function, and returns a
|
||||
computed object that combines the parsed props and emits as props.
|
||||
|
|
@ -264,7 +264,7 @@ const props = defineProps<SelectValueProps>()
|
|||
|
||||
### Boolean Props
|
||||
When you are building a wrapper for a component, in some cases you want to ignore Vue [Props Boolean Casting](https://vuejs.org/guide/components/props.html#boolean-casting).
|
||||
You can either set default value as undefined for all the boolean field, or you can use [`useForwardProps`](https://www.reka-ui.com/utilities/use-forward-props.html) composable.
|
||||
You can either set default value as undefined for all the boolean field, or you can use [`useForwardProps`](https://www.reka-ui.com/docs/utilities/use-forward-props.html) composable.
|
||||
|
||||
Take a look at `AccordionItem.vue`
|
||||
|
||||
|
|
@ -300,7 +300,7 @@ Since `AccordionItemProps` type has atleast one boolean property, we need to use
|
|||
Note that `useForwardPropsEmits` use `useForwardProps` under the hood.
|
||||
|
||||
### Component as Root
|
||||
Whenever your root component is a `Component` Primitive from vue, it's easier to use [`Primitive`](https://www.reka-ui.com/utilities/primitive.html) instead.
|
||||
Whenever your root component is a `Component` Primitive from vue, it's easier to use [`Primitive`](https://www.reka-ui.com/docs/utilities/primitive.html) instead.
|
||||
|
||||
Let's take a look at `Button.vue`
|
||||
|
||||
|
|
@ -333,7 +333,7 @@ const props = withDefaults(defineProps<Props>(), {
|
|||
</template>
|
||||
```
|
||||
|
||||
You'll need to extend `PrimitiveProps` in your props to support `Primitive` component. In most cases you would also need a default value for [`as`](https://www.reka-ui.com/utilities/primitive.html#changing-as-value) property.
|
||||
You'll need to extend `PrimitiveProps` in your props to support `Primitive` component. In most cases you would also need a default value for [`as`](https://www.reka-ui.com/docs/utilities/primitive.html#changing-as-value) property.
|
||||
|
||||
## Updating with `shadcn/ui`
|
||||
|
||||
|
|
|
|||
|
|
@ -87,7 +87,7 @@ importers:
|
|||
specifier: ^1.4.4
|
||||
version: 1.4.4(@unovis/ts@1.4.4)(vue@3.5.13(typescript@5.6.3))
|
||||
'@vee-validate/zod':
|
||||
specifier: ^4.14.7
|
||||
specifier: ^4.13.2
|
||||
version: 4.14.7(vue@3.5.13(typescript@5.6.3))
|
||||
'@vueuse/core':
|
||||
specifier: ^11.2.0
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user