reka-ui
Version:
Vue port for Radix UI Primitives.
375 lines (372 loc) • 14.8 kB
JavaScript
import { AccordionContent, AccordionHeader, AccordionItem, AccordionRoot, AccordionTrigger, AlertDialogRoot, AlertDialogTrigger, AlertDialogPortal, AlertDialogContent, AlertDialogOverlay, AlertDialogCancel, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AvatarRoot, AvatarFallback, AvatarImage, CalendarRoot, CalendarHeader, CalendarHeading, CalendarGrid, CalendarCell, CalendarHeadCell, CalendarNext, CalendarPrev, CalendarGridHead, CalendarGridBody, CalendarGridRow, CalendarCellTrigger, CheckboxGroupRoot, CheckboxRoot, CheckboxIndicator, CollapsibleRoot, CollapsibleTrigger, CollapsibleContent, ComboboxRoot, ComboboxInput, ComboboxAnchor, ComboboxEmpty, ComboboxTrigger, ComboboxCancel, ComboboxGroup, ComboboxLabel, ComboboxContent, ComboboxViewport, ComboboxVirtualizer, ComboboxItem, ComboboxItemIndicator, ComboboxSeparator, ComboboxArrow, ComboboxPortal, ContextMenuRoot, ContextMenuTrigger, ContextMenuPortal, ContextMenuContent, ContextMenuArrow, ContextMenuItem, ContextMenuGroup, ContextMenuSeparator, ContextMenuCheckboxItem, ContextMenuItemIndicator, ContextMenuLabel, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, DateFieldRoot, DateFieldInput, DatePickerRoot, DatePickerHeader, DatePickerHeading, DatePickerGrid, DatePickerCell, DatePickerHeadCell, DatePickerNext, DatePickerPrev, DatePickerGridHead, DatePickerGridBody, DatePickerGridRow, DatePickerCellTrigger, DatePickerInput, DatePickerCalendar, DatePickerField, DatePickerAnchor, DatePickerArrow, DatePickerClose, DatePickerTrigger, DatePickerContent, DateRangePickerRoot, DateRangePickerHeader, DateRangePickerHeading, DateRangePickerGrid, DateRangePickerCell, DateRangePickerHeadCell, DateRangePickerNext, DateRangePickerPrev, DateRangePickerGridHead, DateRangePickerGridBody, DateRangePickerGridRow, DateRangePickerCellTrigger, DateRangePickerInput, DateRangePickerCalendar, DateRangePickerField, DateRangePickerAnchor, DateRangePickerArrow, DateRangePickerClose, DateRangePickerTrigger, DateRangePickerContent, DateRangeFieldRoot, DateRangeFieldInput, DialogRoot, DialogTrigger, DialogPortal, DialogContent, DialogOverlay, DialogClose, DialogTitle, DialogDescription, DropdownMenuRoot, DropdownMenuTrigger, DropdownMenuPortal, DropdownMenuContent, DropdownMenuArrow, DropdownMenuItem, DropdownMenuGroup, DropdownMenuSeparator, DropdownMenuCheckboxItem, DropdownMenuItemIndicator, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, EditableRoot, EditableArea, EditableInput, EditablePreview, EditableSubmitTrigger, EditableCancelTrigger, EditableEditTrigger, HoverCardRoot, HoverCardTrigger, HoverCardPortal, HoverCardContent, HoverCardArrow, ListboxRoot, ListboxContent, ListboxFilter, ListboxItem, ListboxItemIndicator, ListboxVirtualizer, ListboxGroup, ListboxGroupLabel, MenubarRoot, MenubarTrigger, MenubarPortal, MenubarContent, MenubarArrow, MenubarItem, MenubarGroup, MenubarSeparator, MenubarCheckboxItem, MenubarItemIndicator, MenubarLabel, MenubarRadioGroup, MenubarRadioItem, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarMenu, NavigationMenuRoot, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuSub, NavigationMenuTrigger, NavigationMenuViewport, NumberFieldRoot, NumberFieldInput, NumberFieldIncrement, NumberFieldDecrement, PaginationRoot, PaginationEllipsis, PaginationFirst, PaginationLast, PaginationList, PaginationListItem, PaginationNext, PaginationPrev, PinInputRoot, PinInputInput, PopoverRoot, PopoverTrigger, PopoverPortal, PopoverContent, PopoverArrow, PopoverClose, PopoverAnchor, ProgressRoot, ProgressIndicator, RadioGroupRoot, RadioGroupItem, RadioGroupIndicator, RangeCalendarRoot, RangeCalendarHeader, RangeCalendarHeading, RangeCalendarGrid, RangeCalendarCell, RangeCalendarHeadCell, RangeCalendarNext, RangeCalendarPrev, RangeCalendarGridHead, RangeCalendarGridBody, RangeCalendarGridRow, RangeCalendarCellTrigger, ScrollAreaRoot, ScrollAreaViewport, ScrollAreaScrollbar, ScrollAreaThumb, ScrollAreaCorner, SelectRoot, SelectTrigger, SelectPortal, SelectContent, SelectArrow, SelectSeparator, SelectItemIndicator, SelectLabel, SelectGroup, SelectItem, SelectItemText, SelectViewport, SelectScrollUpButton, SelectScrollDownButton, SelectValue, SelectIcon, SliderRoot, SliderThumb, SliderTrack, SliderRange, SplitterGroup, SplitterPanel, SplitterResizeHandle, StepperRoot, StepperItem, StepperTrigger, StepperDescription, StepperTitle, StepperIndicator, StepperSeparator, SwitchRoot, SwitchThumb, TabsRoot, TabsList, TabsContent, TabsTrigger, TabsIndicator, TagsInputRoot, TagsInputInput, TagsInputItem, TagsInputItemText, TagsInputItemDelete, TagsInputClear, ToastProvider, ToastRoot, ToastAction, ToastClose, ToastViewport, ToastTitle, ToastDescription, ToggleGroupRoot, ToggleGroupItem, ToolbarRoot, ToolbarButton, ToolbarLink, ToolbarToggleGroup, ToolbarToggleItem, ToolbarSeparator, TooltipRoot, TooltipTrigger, TooltipContent, TooltipArrow, TooltipPortal, TooltipProvider, TreeRoot, TreeItem, TreeVirtualizer } from 'reka-ui';
export { AspectRatio, Label, Presence, Separator, Toggle, Viewport } from 'reka-ui';
const Accordion = {
Content: AccordionContent,
Header: AccordionHeader,
Item: AccordionItem,
Root: AccordionRoot,
Trigger: AccordionTrigger
};
const AlertDialog = {
Root: AlertDialogRoot,
Trigger: AlertDialogTrigger,
Portal: AlertDialogPortal,
Content: AlertDialogContent,
Overlay: AlertDialogOverlay,
Cancel: AlertDialogCancel,
Title: AlertDialogTitle,
Description: AlertDialogDescription,
Action: AlertDialogAction
};
const Avatar = {
Root: AvatarRoot,
Fallback: AvatarFallback,
Image: AvatarImage
};
const Calendar = {
Root: CalendarRoot,
Header: CalendarHeader,
Heading: CalendarHeading,
Grid: CalendarGrid,
Cell: CalendarCell,
HeadCell: CalendarHeadCell,
Next: CalendarNext,
Prev: CalendarPrev,
GridHead: CalendarGridHead,
GridBody: CalendarGridBody,
GridRow: CalendarGridRow,
CellTrigger: CalendarCellTrigger
};
const Checkbox = {
GroupRoot: CheckboxGroupRoot,
Root: CheckboxRoot,
Indicator: CheckboxIndicator
};
const Collapsible = {
Root: CollapsibleRoot,
Trigger: CollapsibleTrigger,
Content: CollapsibleContent
};
const Combobox = {
Root: ComboboxRoot,
Input: ComboboxInput,
Anchor: ComboboxAnchor,
Empty: ComboboxEmpty,
Trigger: ComboboxTrigger,
Cancel: ComboboxCancel,
Group: ComboboxGroup,
Label: ComboboxLabel,
Content: ComboboxContent,
Viewport: ComboboxViewport,
Virtualizer: ComboboxVirtualizer,
Item: ComboboxItem,
ItemIndicator: ComboboxItemIndicator,
Separator: ComboboxSeparator,
Arrow: ComboboxArrow,
Portal: ComboboxPortal
};
const ContextMenu = {
Root: ContextMenuRoot,
Trigger: ContextMenuTrigger,
Portal: ContextMenuPortal,
Content: ContextMenuContent,
Arrow: ContextMenuArrow,
Item: ContextMenuItem,
Group: ContextMenuGroup,
Separator: ContextMenuSeparator,
CheckboxItem: ContextMenuCheckboxItem,
ItemIndicator: ContextMenuItemIndicator,
Label: ContextMenuLabel,
RadioGroup: ContextMenuRadioGroup,
RadioItem: ContextMenuRadioItem,
Sub: ContextMenuSub,
SubContent: ContextMenuSubContent,
SubTrigger: ContextMenuSubTrigger
};
const DateField = {
Root: DateFieldRoot,
Input: DateFieldInput
};
const DatePicker = {
Root: DatePickerRoot,
Header: DatePickerHeader,
Heading: DatePickerHeading,
Grid: DatePickerGrid,
Cell: DatePickerCell,
HeadCell: DatePickerHeadCell,
Next: DatePickerNext,
Prev: DatePickerPrev,
GridHead: DatePickerGridHead,
GridBody: DatePickerGridBody,
GridRow: DatePickerGridRow,
CellTrigger: DatePickerCellTrigger,
Input: DatePickerInput,
Calendar: DatePickerCalendar,
Field: DatePickerField,
Anchor: DatePickerAnchor,
Arrow: DatePickerArrow,
Close: DatePickerClose,
Trigger: DatePickerTrigger,
Content: DatePickerContent
};
const DateRangePicker = {
Root: DateRangePickerRoot,
Header: DateRangePickerHeader,
Heading: DateRangePickerHeading,
Grid: DateRangePickerGrid,
Cell: DateRangePickerCell,
HeadCell: DateRangePickerHeadCell,
Next: DateRangePickerNext,
Prev: DateRangePickerPrev,
GridHead: DateRangePickerGridHead,
GridBody: DateRangePickerGridBody,
GridRow: DateRangePickerGridRow,
CellTrigger: DateRangePickerCellTrigger,
Input: DateRangePickerInput,
Calendar: DateRangePickerCalendar,
Field: DateRangePickerField,
Anchor: DateRangePickerAnchor,
Arrow: DateRangePickerArrow,
Close: DateRangePickerClose,
Trigger: DateRangePickerTrigger,
Content: DateRangePickerContent
};
const DateRangeField = {
Root: DateRangeFieldRoot,
Input: DateRangeFieldInput
};
const Dialog = {
Root: DialogRoot,
Trigger: DialogTrigger,
Portal: DialogPortal,
Content: DialogContent,
Overlay: DialogOverlay,
Close: DialogClose,
Title: DialogTitle,
Description: DialogDescription
};
const DropdownMenu = {
Root: DropdownMenuRoot,
Trigger: DropdownMenuTrigger,
Portal: DropdownMenuPortal,
Content: DropdownMenuContent,
Arrow: DropdownMenuArrow,
Item: DropdownMenuItem,
Group: DropdownMenuGroup,
Separator: DropdownMenuSeparator,
CheckboxItem: DropdownMenuCheckboxItem,
ItemIndicator: DropdownMenuItemIndicator,
Label: DropdownMenuLabel,
RadioGroup: DropdownMenuRadioGroup,
RadioItem: DropdownMenuRadioItem,
Sub: DropdownMenuSub,
SubContent: DropdownMenuSubContent,
SubTrigger: DropdownMenuSubTrigger
};
const Editable = {
Root: EditableRoot,
Area: EditableArea,
Input: EditableInput,
Preview: EditablePreview,
SubmitTrigger: EditableSubmitTrigger,
CancelTrigger: EditableCancelTrigger,
EditTrigger: EditableEditTrigger
};
const HoverCard = {
Root: HoverCardRoot,
Trigger: HoverCardTrigger,
Portal: HoverCardPortal,
Content: HoverCardContent,
Arrow: HoverCardArrow
};
const Listbox = {
Root: ListboxRoot,
Content: ListboxContent,
Filter: ListboxFilter,
Item: ListboxItem,
ItemIndicator: ListboxItemIndicator,
Virtualizer: ListboxVirtualizer,
Group: ListboxGroup,
GroupLabel: ListboxGroupLabel
};
const Menubar = {
Root: MenubarRoot,
Trigger: MenubarTrigger,
Portal: MenubarPortal,
Content: MenubarContent,
Arrow: MenubarArrow,
Item: MenubarItem,
Group: MenubarGroup,
Separator: MenubarSeparator,
CheckboxItem: MenubarCheckboxItem,
ItemIndicator: MenubarItemIndicator,
Label: MenubarLabel,
RadioGroup: MenubarRadioGroup,
RadioItem: MenubarRadioItem,
Sub: MenubarSub,
SubContent: MenubarSubContent,
SubTrigger: MenubarSubTrigger,
Menu: MenubarMenu
};
const NavigationMenu = {
Root: NavigationMenuRoot,
Content: NavigationMenuContent,
Indicator: NavigationMenuIndicator,
Item: NavigationMenuItem,
Link: NavigationMenuLink,
List: NavigationMenuList,
Sub: NavigationMenuSub,
Trigger: NavigationMenuTrigger,
Viewport: NavigationMenuViewport
};
const NumberField = {
Root: NumberFieldRoot,
Input: NumberFieldInput,
Increment: NumberFieldIncrement,
Decrement: NumberFieldDecrement
};
const Pagination = {
Root: PaginationRoot,
Ellipsis: PaginationEllipsis,
First: PaginationFirst,
Last: PaginationLast,
List: PaginationList,
ListItem: PaginationListItem,
Next: PaginationNext,
Prev: PaginationPrev
};
const PinInput = {
Root: PinInputRoot,
Input: PinInputInput
};
const Popover = {
Root: PopoverRoot,
Trigger: PopoverTrigger,
Portal: PopoverPortal,
Content: PopoverContent,
Arrow: PopoverArrow,
Close: PopoverClose,
Anchor: PopoverAnchor
};
const Progress = {
Root: ProgressRoot,
Indicator: ProgressIndicator
};
const RadioGroup = {
Root: RadioGroupRoot,
Item: RadioGroupItem,
Indicator: RadioGroupIndicator
};
const RangeCalendar = {
Root: RangeCalendarRoot,
Header: RangeCalendarHeader,
Heading: RangeCalendarHeading,
Grid: RangeCalendarGrid,
Cell: RangeCalendarCell,
HeadCell: RangeCalendarHeadCell,
Next: RangeCalendarNext,
Prev: RangeCalendarPrev,
GridHead: RangeCalendarGridHead,
GridBody: RangeCalendarGridBody,
GridRow: RangeCalendarGridRow,
CellTrigger: RangeCalendarCellTrigger
};
const ScrollArea = {
Root: ScrollAreaRoot,
Viewport: ScrollAreaViewport,
Scrollbar: ScrollAreaScrollbar,
Thumb: ScrollAreaThumb,
Corner: ScrollAreaCorner
};
const Select = {
Root: SelectRoot,
Trigger: SelectTrigger,
Portal: SelectPortal,
Content: SelectContent,
Arrow: SelectArrow,
Separator: SelectSeparator,
ItemIndicator: SelectItemIndicator,
Label: SelectLabel,
Group: SelectGroup,
Item: SelectItem,
ItemText: SelectItemText,
Viewport: SelectViewport,
ScrollUpButton: SelectScrollUpButton,
ScrollDownButton: SelectScrollDownButton,
Value: SelectValue,
Icon: SelectIcon
};
const Slider = {
Root: SliderRoot,
Thumb: SliderThumb,
Track: SliderTrack,
Range: SliderRange
};
const Splitter = {
Group: SplitterGroup,
Panel: SplitterPanel,
ResizeHandle: SplitterResizeHandle
};
const Stepper = {
Root: StepperRoot,
Item: StepperItem,
Trigger: StepperTrigger,
Description: StepperDescription,
Title: StepperTitle,
Indicator: StepperIndicator,
Separator: StepperSeparator
};
const Switch = {
Root: SwitchRoot,
Thumb: SwitchThumb
};
const Tabs = {
Root: TabsRoot,
List: TabsList,
Content: TabsContent,
Trigger: TabsTrigger,
Indicator: TabsIndicator
};
const TagsInput = {
Root: TagsInputRoot,
Input: TagsInputInput,
Item: TagsInputItem,
ItemText: TagsInputItemText,
ItemDelete: TagsInputItemDelete,
Clear: TagsInputClear
};
const Toast = {
Provider: ToastProvider,
Root: ToastRoot,
Action: ToastAction,
Close: ToastClose,
Viewport: ToastViewport,
Title: ToastTitle,
Description: ToastDescription
};
const ToggleGroup = {
Root: ToggleGroupRoot,
Item: ToggleGroupItem
};
const Toolbar = {
Root: ToolbarRoot,
Button: ToolbarButton,
Link: ToolbarLink,
ToggleGroup: ToolbarToggleGroup,
ToggleItem: ToolbarToggleItem,
Separator: ToolbarSeparator
};
const Tooltip = {
Root: TooltipRoot,
Trigger: TooltipTrigger,
Content: TooltipContent,
Arrow: TooltipArrow,
Portal: TooltipPortal,
Provider: TooltipProvider
};
const Tree = {
Root: TreeRoot,
Item: TreeItem,
Virtualizer: TreeVirtualizer
};
export { Accordion, AlertDialog, Avatar, Calendar, Checkbox, Collapsible, Combobox, ContextMenu, DateField, DatePicker, DateRangeField, DateRangePicker, Dialog, DropdownMenu, Editable, HoverCard, Listbox, Menubar, NavigationMenu, NumberField, Pagination, PinInput, Popover, Progress, RadioGroup, RangeCalendar, ScrollArea, Select, Slider, Splitter, Stepper, Switch, Tabs, TagsInput, Toast, ToggleGroup, Toolbar, Tooltip, Tree };