reference

Root

The separator.

reference

Reference

Root

Contains all of the progress parts.

Indicator

Used to show the progress visually. It also makes progress accessible to assistive technologies.

problem

scroll returns to top when collapsed,

should be:

position stays the same relative to the position of the clicked button.

reference

reference

Typed was missing when using the library

Task

• Find and list each elements with asChild API
• Implement it

You can check out packages/radix-vue/src/Collapsible/CollapsibleTrigger.vue for how to import the asChild props by using PrimitiveXXX component

handle all placement context-aware arrow position instead of just side.

reference

reference

API Reference

Root

Contains all the parts of a dialog.

Trigger

The button that opens the dialog.

Portal

When used, portals your overlay and content parts into the body.

Overlay

A layer that covers the inert portion of the view when the dialog is open.

Content

Contains content to be rendered in the open dialog.

Close

The button that closes the dialog.

Title

An accessible title to be announced when the dialog is opened.

If you want to hide the title, wrap it inside our Visually Hidden utility like this <VisuallyHidden asChild>.

Description

An optional accessible description to be announced when the dialog is opened.

If you want to hide the description, wrap it inside our Visually Hidden utility like this <VisuallyHidden asChild>. If you want to remove the description entirely, remove this part and pass aria-describedby={undefined} to Dialog.Content.

reference

reference

Root

Contains all the parts of a collapsible.

Trigger

The button that toggles the collapsible.

Content

The component that contains the collapsible content.

reference

Is your feature request related to a problem? Please describe.

In Radix-ui, they are using namespaced component to export all child component (including root component) as a component.

(eg: DialogRoot.vue -> Dialog.Root).

Describe the solution you'd like

We can do the same for Radix-vue too. Can check out https://github.com/xiaoluoboding/vue-command-palette/blob/main/packages/index.ts to learn how it was achievable.

(This is just a nice to have, so we don't need to import all the child component manually when building a custom component)

Todo:

Anatomy

<Accordion.Root>
    <Accordion.Item>
      <Accordion.Header>
        <Accordion.Trigger />
      </Accordion.Header>
      <Accordion.Content />
    </Accordion.Item>
  </Accordion.Root>

API

API Reference

Root

Contains all the parts of an alert dialog.

Trigger

A button that opens the dialog.

Data Attributes

• [data-state]: open, closed

Portal

When used, portals your overlay and content parts into the body.

Overlay

A layer that covers the inert portion of the view when the dialog is open.

Data Attributes

• [data-state]: open, closed

Content

Contains content to be rendered when the dialog is open.

Data Attributes

• [data-state]: open, closed

Cancel

A button that closes the dialog. This button should be distinguished visually from AlertDialog.Action buttons.

Action

A button that closes the dialog. These buttons should be distinguished visually from the AlertDialog.Cancel button.

Title

An accessible name to be announced when the dialog is opened. Alternatively, you can provide aria-label or aria-labelledby to AlertDialog.Content and exclude this component.

Description

An accessible description to be announced when the dialog is opened. Alternatively, you can provide aria-describedby to AlertDialog.Content and exclude this component.

Accessibility:

Example

Working Demo

<script setup lang="ts">
import { ref } from "vue";
import {
  AlertDialogRoot,
  AlertDialogTrigger,
  AlertDialogContent,
  AlertDialogOverlay,
  AlertDialogCancel,
  AlertDialogAction,
  AlertDialogPortal,
  AlertDialogTitle,
  AlertDialogDescription
} from "radix-vue";

const alertDialogOpen = ref(false);

function handleAction(){
  alert('clicked action button!')
}
</script>

<template>
   <AlertDialogRoot v-model="alertDialogOpen">
    <AlertDialogTrigger class="text-violet11 hover:bg-mauve3 shadow-blackA7 inline-flex h-[35px] items-center justify-center rounded-[4px] bg-white px-[15px] font-medium leading-none shadow-[0_2px_10px] outline-none focus:shadow-[0_0_0_2px] focus:shadow-black">
        Delete account
    </AlertDialogTrigger>
    <AlertDialogPortal>
      <AlertDialogOverlay class="bg-blackA9 data-[state=open]:animate-overlayShow fixed inset-0" />
      <AlertDialogContent class="data-[state=open]:animate-contentShow fixed top-[50%] left-[50%] max-h-[85vh] w-[90vw] max-w-[500px] translate-x-[-50%] translate-y-[-50%] rounded-[6px] bg-white p-[25px] shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] focus:outline-none">
        <AlertDialogTitle class="text-mauve12 m-0 text-[17px] font-medium">
          Are you absolutely sure?
        </AlertDialogTitle>
        <AlertDialogDescription class="text-mauve11 mt-4 mb-5 text-[15px] leading-normal">
          This action cannot be undone. This will permanently delete your account and remove your
          data from our servers.
        </AlertDialogDescription>
        <div class="flex justify-end gap-[25px]">
          <AlertDialogCancel class="text-mauve11 bg-mauve4 hover:bg-mauve5 focus:shadow-mauve7 inline-flex h-[35px] items-center justify-center rounded-[4px] px-[15px] font-medium leading-none outline-none focus:shadow-[0_0_0_2px]">
              Cancel
          </AlertDialogCancel>
          <AlertDialogAction @click="handleAction" class="text-red11 bg-red4 hover:bg-red5 focus:shadow-red7 inline-flex h-[35px] items-center justify-center rounded-[4px] px-[15px] font-medium leading-none outline-none focus:shadow-[0_0_0_2px]">
              Yes, delete account
          </AlertDialogAction>
        </div>
      </AlertDialogContent>
    </AlertDialogPortal>
  </AlertDialogRoot>
</template>

• implement delay open and close behavior
• create open and close delayMs props

Behavior

• dont open if not hovered for the delay duration
• dont close if not hover outside for the delay duration
• handle wether open/close if hover over card/tooltip

Describe the bug
The Discord link is not valid anymore

To Reproduce

Expected behavior
Valid invitation to the Discord server

Screenshots

Desktop (please complete the following information):

Smartphone (please complete the following information):

Additional context

reference

API Reference

Root

Contains all the parts of a switch. An input will also render when used within a form to ensure events propagate correctly.

Thumb

The thumb that is used to visually indicate whether the switch is on or off.

Accessibility

• AlertDialogRoot
• CollapsibleRoot
• DialogRoot

Discussion history

implementing props is one thing, declaring is another.

By declaring every props and typing them Im hoping that we can speed up the development even further.

#11 #9

affected component:

• DropdownMenu
• MenuBar
• ContextMenu

reference

API Reference

Root

Contains all the parts of a radio group.

Item

An item in the group that can be checked. An input will also render when used within a form to ensure events propagate correctly.

Indicator

Renders when the radio item is in a checked state. You can style this element directly, or you can use it as a wrapper to put an icon into, or both.

• Phase 1: #50
• Phase 2
• Phase 3

reference

Anatomy

<Avatar.Root>
  <Avatar.Image />
  <Avatar.Fallback />
</Avatar.Root>

API Reference

Root

Contains all the parts of an avatar.

Image

The image to render. By default it will only render when it has loaded. You can use the onLoadingStatusChange handler if you need more control.

Fallback

An element that renders when the image hasn't loaded. This means whilst it's loading, or if there was an error. If you notice a flash during loading, you can provide a delayMs prop to delay its rendering so it only renders for those with slower connections. For more control, use the onLoadingStatusChange handler on Avatar.Image.

Accessibility

Examples

Working Demo

<script setup lang="ts">
import { AvatarRoot, AvatarImage, AvatarFallback } from "radix-vue";
</script>

<template>
  <div class="flex gap-5">
    <AvatarRoot class="bg-blackA3 inline-flex h-[45px] w-[45px] select-none items-center justify-center overflow-hidden rounded-full align-middle">
      <AvatarImage
        class="h-full w-full rounded-[inherit] object-cover"
        src="https://images.unsplash.com/photo-1492633423870-43d1cd2775eb?&w=128&h=128&dpr=2&q=80"
        alt="Colm Tuite"
      />
      <AvatarFallback
        class="text-violet11 leading-1 flex h-full w-full items-center justify-center bg-white text-[15px] font-medium"
        :delayMs="600"
      >
        CT
      </AvatarFallback>
    </AvatarRoot>
    <AvatarRoot class="bg-blackA3 inline-flex h-[45px] w-[45px] select-none items-center justify-center overflow-hidden rounded-full align-middle">
      <AvatarImage
        class="h-full w-full rounded-[inherit] object-cover"
        src="https://images.unsplash.com/photo-1511485977113-f34c92461ad9?ixlib=rb-1.2.1&w=128&h=128&dpr=2&q=80"
        alt="Pedro Duarte"
      />
      <AvatarFallback
        class="text-violet11 leading-1 flex h-full w-full items-center justify-center bg-white text-[15px] font-medium"
        :delayMs="600"
      >
        JD
      </AvatarFallback>
    </AvatarRoot>
    <AvatarRoot class="bg-blackA3 inline-flex h-[45px] w-[45px] select-none items-center justify-center overflow-hidden rounded-full align-middle">
      <AvatarFallback class="text-violet11 leading-1 flex h-full w-full items-center justify-center bg-white text-[15px] font-medium">
        PD
      </AvatarFallback>
    </AvatarRoot>
  </div>
</template>

reference

Behaviors

• Delay open

• Delay close

• #65

• #77

API

Provider

Root

Contains all the parts of a tooltip.

Trigger

The button that toggles the tooltip. By default, the Tooltip.Content will position itself against the trigger.

Portal

When used, portals the content part into the body.

Content

When used, portals the content part into the body.

Examples

<script setup lang="ts">
import { TooltipRoot, TooltipTrigger, TooltipPortal, TooltipContent, TooltipArrow } from "radix-vue";
import { Icon } from "@iconify/vue";
import { ref } from "vue";

const toggleState = ref(false);
</script>

<template>
  <div class="absolute left-4 top-3 text-sm">
    <p>{{ toggleState ? "checked" : "uncheked" }}</p>
  </div>
  <TooltipRoot v-model="toggleState">
    <TooltipTrigger class="text-violet11 shadow-blackA7 hover:bg-violet3 inline-flex h-[35px] w-[35px] items-center justify-center rounded-full bg-white shadow-[0_2px_10px] outline-none focus:shadow-[0_0_0_2px] focus:shadow-black">
        <Icon icon="radix-icons:plus" />
    </TooltipTrigger>
    <TooltipPortal>
      <TooltipContent
        class="data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade text-violet11 select-none rounded-[4px] bg-white px-[15px] py-[10px] text-[15px] leading-none shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] will-change-[transform,opacity]">
        Add to library
        <TooltipArrow class="bg-white"  size="8" />
      </TooltipContent>
    </TooltipPortal>
  </TooltipRoot>
</template>

• For single, by default, focusing will move to the selected toggle. Tab and shift+tab will move outside of toggle group

#26

fix focus entry when navigate using keyboard to the selected item

reference

reference

Root

Contains all the parts of a toggle group.

<DataAttributesTable
data={[
{
attribute: '[data-orientation]',
values: ['vertical', 'horizontal'],
},
]}
/>

Item

An item in the group.

<DataAttributesTable
data={[
{
attribute: '[data-state]',
values: ['on', 'off'],
},
{
attribute: '[data-disabled]',
values: 'Present when disabled',
},
{
attribute: '[data-orientation]',
values: ['vertical', 'horizontal'],
},
]}
/>

Thumb shouldnt overflow to the sides when max/min.

• Make relative offset according to the position

Docs: link

Files: link

• 1/3 #81
• 2/3 #186
• 3/3 TBD

reference

Root

Contains all the parts of a hover card.

Trigger

The link that opens the hover card when hovered.

Portal

When used, portals the content part into the body.

Content

The component that pops out when the hover card is open.

Arrow

An optional arrow element to render alongside the hover card. This can be used to help visually link the trigger with the HoverCard.Content. Must be rendered inside HoverCard.Content.

reference

API Reference

Root

Contains all the parts of a slider. It will render an input for each thumb when used within a form to ensure events propagate correctly.

Track

The track that contains the Slider.Range.

Range

The range part. Must live inside Slider.Track.

Thumb

A draggable thumb. You can render multiple thumbs.

Describe the bug
Poppover wont close when clicked outside after clicking inside popper

To Reproduce
Steps to reproduce the behavior:

1. Open the popover from the demo
2. Click inside the opened popper
3. Click outside, it wont close

Expected behavior
Popover should behave as usual and closed when clicked outside

#86

reference

reference

Root

Contains all the parts of a checkbox. An input will also render when used within a form to ensure events propagate correctly.

Indicator

Renders when the checkbox is in a checked or indeterminate state. You can style this element directly, or you can use it as a wrapper to put an icon into, or both.

Examples

Working Demo

Fix relevant components to be able to be used with or without v-model(controllable or uncontrollable)
Use the useVueModel, refer to #95
Related to all components with open/close

• #1 ~wait until built first
• #2
• #5
• #6
• #8
• #9
• #11
• #13 ~wait until built first
• #14 ~wait until built first
• #15
• #17 ~needs refactor to support without v-model first
• #19 ~wait until built first
• #21 ~needs refactor to support without v-model first
• #22 #91
• #23 ~needs refactor to support without v-model first
• #25
• #26 ~needs refactor to support without v-model first
• #28

reference

reference

API Reference

Root

Contains all the tabs component parts.

List

Contains the triggers that are aligned along the edge of the active content.

Trigger

The button that activates its associated content.

Content

Contains the content associated with each trigger.

reference

API

Root

Contains all the toolbar component parts.

Button

A button item.

Link

A link item.

ToggleGroup

A set of two-state buttons that can be toggled on or off.

ToggleItem

An item in the group.

Separator

Used to visually separate items in the toolbar.

Allow tabs to be usable without handling state explicitly and manually.

reference

reference

Root

Contains the content you want to constrain to a given ratio.

Examples

Working Demo

<script setup lang="ts">
import { AspectRatio } from "radix-vue";
</script>

<template>
  <div class="shadow-blackA7 w-[300px] overflow-hidden rounded-md shadow-[0_2px_10px]">
    <AspectRatio :ratio="16 / 9">
      <img class="h-full w-full object-cover"
        src="https://images.unsplash.com/photo-1535025183041-0991a977e25b?w=300&dpr=2&q=80"
        alt="Landscape photograph by Tobias Tullius" />
    </AspectRatio>
  </div>
</template>

Start here:

This is our main issue tracker, we use this to track and see what we are working on and what we will working on next:

Active

• #87 - @khairulhaaziq
• #18 - @zernonia

Upcoming

• #72
• #79
• #93

Backlog

• #19 - @zernonia

Closed

• #77
• #70
• #1 - @mujahidfa

reference

API

Root

Data Attributes:

Accessibility:

Keyboard Interactions:

collapsible wont close onece open, basically unresponsive, see current demo

reference