Merge remote-tracking branch 'origin/main' into navigation-menu-1/3

.github/workflows/build.yaml

@@ -0,0 +1,50 @@
+name: Build & Lint
+
+on: [push]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v2
+
+    - name: Setup Node.js environment
+      uses: actions/setup-node@v2
+      with:
+        node-version: 16
+
+    - name: Install dependencies
+      run: cd packages/radix-vue && npm install
+
+    - name: Build
+      run: cd packages/radix-vue && npm run -r --filter=!docs build
+
+    - name: Check for errors
+      run: |
+        if [ $? -eq 0 ]; then
+          echo "Build succeeded"
+        else
+          echo "Build failed"
+          exit 1
+        fi
+
+  lint:
+    needs: build
+    runs-on: ubuntu-latest
+
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v2
+
+    - name: Setup Node.js environment
+      uses: actions/setup-node@v2
+      with:
+        node-version: 16
+
+    - name: Install dependencies
+      run: cd packages/radix-vue && npm install
+
+    - name: Lint
+      run: cd packages/radix-vue && npm run lint

README.md

@@ -23,32 +23,32 @@ For changelog, visit [radix-vue.com/overview/releases](https://radix-vue.com/ove
 
 | Component                                                           | Usable | Complete API | Complete Accessibility |
 | :------------------------------------------------------------------ | :----: | ------------ | ---------------------- |
-| [Accordion](https://github.com/radix-vue/radix-vue/issues/1)        |   ✅   |              |                        |
-| [Alert Dialog](https://github.com/radix-vue/radix-vue/issues/2)     |   ✅   | ⏳           |                        |
-| [Aspect Ratio](https://github.com/radix-vue/radix-vue/issues/3)     |   ✅   | ✅           |                        |
-| [Avatar](https://github.com/radix-vue/radix-vue/issues/4)           |   ✅   | ✅           |                        |
-| [Checkbox](https://github.com/radix-vue/radix-vue/issues/5)         |   ✅   | ✅           |                        |
-| [Collapsible](https://github.com/radix-vue/radix-vue/issues/6)      |   ✅   |              |                        |
-| [Context Menu](https://github.com/radix-vue/radix-vue/issues/7)     |   ✅   |              |                        |
-| [Dialog](https://github.com/radix-vue/radix-vue/issues/8)           |   ✅   | ⏳           |                        |
-| [Dropdown Menu](https://github.com/radix-vue/radix-vue/issues/9)    |   ✅   |              |                        |
-| [Hover Card](https://github.com/radix-vue/radix-vue/issues/11)      |   ✅   |              |                        |
-| [Label](https://github.com/radix-vue/radix-vue/issues/12)           |   ✅   | ✅           | ✅                     |
-| [Menubar](https://github.com/radix-vue/radix-vue/issues/13)         |   ✅   |              |                        |
-| [Navigation Menu](https://github.com/radix-vue/radix-vue/issues/14) |   ⏳   |              |                        |
-| [Popover](https://github.com/radix-vue/radix-vue/issues/15)         |   ✅   |              |                        |
-| [Progress](https://github.com/radix-vue/radix-vue/issues/16)        |   ✅   | ⏳           |                        |
-| [Radio Group](https://github.com/radix-vue/radix-vue/issues/17)     |   ✅   |              |                        |
-| [Scroll Area](https://github.com/radix-vue/radix-vue/issues/18)     |   ✅   |              |                        |
-| [Select](https://github.com/radix-vue/radix-vue/issues/19)          |   ✅   |              |                        |
-| [Separator](https://github.com/radix-vue/radix-vue/issues/20)       |   ✅   | ✅           |                        |
-| [Slider](https://github.com/radix-vue/radix-vue/issues/21)          |   ✅   |              |                        |
-| [Switch](https://github.com/radix-vue/radix-vue/issues/22)          |   ✅   | ✅           |                        |
-| [Tabs](https://github.com/radix-vue/radix-vue/issues/23)            |   ✅   | ✅           |                        |
-| [Toggle](https://github.com/radix-vue/radix-vue/issues/25)          |   ✅   | ✅           |                        |
-| [Toggle Group](https://github.com/radix-vue/radix-vue/issues/26)    |   ✅   |              |                        |
-| [Toolbar](https://github.com/radix-vue/radix-vue/issues/27)         |   ✅   |              |                        |
-| [Tooltip](https://github.com/radix-vue/radix-vue/issues/28)         |   ✅   |              |                        |
+| [Accordion](https://radix-vue.com/components/accordion)             |   ✅   |              |                        |
+| [Alert Dialog](https://radix-vue.com/components/alert-dialog)       |   ✅   | ⏳           |                        |
+| [Aspect Ratio](https://radix-vue.com/components/aspect-ratio)       |   ✅   | ✅           |                        |
+| [Avatar](https://radix-vue.com/components/avatar)                   |   ✅   | ✅           |                        |
+| [Checkbox](https://radix-vue.com/components/checkbox)               |   ✅   | ✅           |                        |
+| [Collapsible](https://radix-vue.com/components/collapsible)         |   ✅   | ✅           |                        |
+| [Context Menu](https://radix-vue.com/components/context-menu)       |   ✅   |              |                        |
+| [Dialog](https://radix-vue.com/components/dialog)                   |   ✅   | ⏳           |                        |
+| [Dropdown Menu](https://radix-vue.com/components/dropdown-menu)     |   ✅   |              |                        |
+| [Hover Card](https://radix-vue.com/components/hover-card)           |   ✅   |              |                        |
+| [Label](https://radix-vue.com/components/label)                     |   ✅   | ✅           | ✅                     |
+| [Menubar](https://radix-vue.com/components/menubar)                 |   ✅   |              |                        |
+| [Navigation Menu](https://radix-vue.com/components/navigation-menu) |   ⏳   |              |                        |
+| [Popover](https://radix-vue.com/components/popover)                 |   ✅   |              |                        |
+| [Progress](https://radix-vue.com/components/progress)               |   ✅   | ⏳           |                        |
+| [Radio Group](https://radix-vue.com/components/radio-group)         |   ✅   | ✅           |                        |
+| [Scroll Area](https://radix-vue.com/components/scroll-area)         |   ✅   |              |                        |
+| [Select](https://radix-vue.com/components/select)                   |   ✅   |              |                        |
+| [Separator](https://radix-vue.com/components/separator)             |   ✅   | ✅           |                        |
+| [Slider](https://radix-vue.com/components/slider)                   |   ✅   |              |                        |
+| [Switch](https://radix-vue.com/components/switch)                   |   ✅   | ✅           |                        |
+| [Tabs](https://radix-vue.com/components/tabs)                       |   ✅   | ✅           |                        |
+| [Toggle](https://radix-vue.com/components/toggle)                   |   ✅   | ✅           |                        |
+| [Toggle Group](https://radix-vue.com/components/toggle-group)       |   ✅   | ✅           |                        |
+| [Toolbar](https://radix-vue.com/components/toolbar)                 |   ✅   |              |                        |
+| [Tooltip](https://radix-vue.com/components/tooltip)                 |   ✅   |              |                        |
 
 ## Contributing
 
@@ -57,11 +57,13 @@ We would love to have your contributions! All PRs all welcomed! We need help bui
 ## Dev Setup
 
 ### Docs
-1. Go to the docs directory :  `cd docs`
+
+1. Go to the docs directory : `cd docs`
 2. Run `pnpm i --ignore-workspace`
 3. Run `pnpm run dev`
 
 ### Package
+
 1. Clone the repo
 2. Go to the repo directory: `cd radix-vue`
 3. Run `pnpm run start`
@@ -79,8 +81,9 @@ We would love to have your contributions! All PRs all welcomed! We need help bui
 ## Credits
 
 All credits goes to these open-source works and resources
+
 - [Radix UI](https://radix-ui.com)
 - [Radix Svelte](https://radix-svelte.com)
 - [Headless UI](https://headlessui.com)
 - [Floating UI](https://floating-ui.com)
-- [Vue Use](https://vueuse.org)
+- [Vue Use](https://vueuse.org)

packages/radix-vue/package.json

@@ -1,6 +1,6 @@
 {
   "name": "radix-vue",
-  "version": "0.0.1-rc-.8",
+  "version": "0.0.1-rc-.9",
   "description": "Vue port for Radix UI Primitives.",
   "type": "module",
   "main": "./dist/index.umd.cjs",

packages/radix-vue/src/Collapsible/CollapsibleContent.vue

@@ -1,7 +1,6 @@
 <script lang="ts">
 export interface CollapsibleContentProps {
   asChild?: boolean;
-  forceMount?: boolean;
 }
 </script>
 
@@ -67,13 +66,18 @@ requestAnimationFrame(() => {
 defineOptions({
   inheritAttrs: false,
 });
+
+const props = withDefaults(defineProps<CollapsibleContentProps>(), {
+  asChild: false,
+});
 </script>
 
 <template>
   <Presence ref="presentRef" :present="injectedValue!.open.value">
     <PrimitiveDiv
       ref="primitiveElement"
       v-bind="$attrs"
+      :asChild="props.asChild"
       :data-state="injectedValue?.open.value ? 'open' : 'closed'"
       :data-disabled="injectedValue?.disabled?.value ? 'true' : undefined"
       :id="injectedValue?.contentId"

packages/radix-vue/src/Collapsible/CollapsibleRoot.vue

@@ -1,11 +1,11 @@
 <script lang="ts">
 import type { InjectionKey, Ref } from "vue";
+import { useId } from "@/shared";
 
 export interface CollapsibleRootProps {
   asChild?: boolean;
   defaultOpen?: boolean;
   open?: boolean;
-  onOpenChange?: void;
   disabled?: boolean;
 }
 
@@ -39,10 +39,11 @@ const open = useVModel(props, "open", emit, {
   defaultValue: props.defaultOpen,
   passive: true,
 });
+
 const disabled = useVModel(props, "disabled");
 
 provide<CollapsibleProvideValue>(COLLAPSIBLE_INJECTION_KEY, {
-  contentId: "1",
+  contentId: useId(),
   disabled,
   open,
   onOpenToggle: () => {
@@ -53,8 +54,9 @@ provide<CollapsibleProvideValue>(COLLAPSIBLE_INJECTION_KEY, {
 
 <template>
   <PrimitiveDiv
+    :asChild="props.asChild"
     :data-state="props.open ? 'open' : 'closed'"
-    :data-disabled="props.disabled ? 'true' : undefined"
+    :data-disabled="props.disabled ? '' : undefined"
   >
     <slot :open="open" />
   </PrimitiveDiv>

packages/radix-vue/src/Collapsible/CollapsibleTrigger.vue

@@ -15,15 +15,20 @@ import {
 const injectedValue = inject<CollapsibleProvideValue>(
   COLLAPSIBLE_INJECTION_KEY
 );
+
+const props = withDefaults(defineProps<CollapsibleTriggerProps>(), {
+  asChild: false,
+});
 </script>
 
 <template>
   <PrimitiveButton
     type="button"
+    :asChild="props.asChild"
     :aria-controls="injectedValue?.contentId"
     :aria-expanded="injectedValue?.open.value || false"
     :data-state="injectedValue?.open.value ? 'open' : 'closed'"
-    :data-disabled="injectedValue?.disabled?.value ? 'true' : undefined"
+    :data-disabled="injectedValue?.disabled?.value ? '' : undefined"
     :disabled="injectedValue?.disabled?.value"
     @click="injectedValue?.onOpenToggle"
   >

packages/radix-vue/src/RadioGroup/RadioGroupIndicator.vue

@@ -1,29 +1,30 @@
 <script lang="ts">
 export interface RadioGroupIndicatorProps {
   asChild?: boolean;
-  forceMount?: boolean;
 }
 </script>
 
 <script setup lang="ts">
+import { PrimitiveSpan } from "@/Primitive";
 import { inject } from "vue";
 import {
-  RADIO_GROUP_INJECTION_KEY,
-  type RadioGroupProvideValue,
+  RADIO_ITEM_INJECTION_KEY,
+  type RadioItemProvideValue,
 } from "./RadioGroupRoot.vue";
-import { PrimitiveSpan } from "@/Primitive";
 
-const injectedValue = inject<RadioGroupProvideValue>(RADIO_GROUP_INJECTION_KEY);
-const value = inject<string>("radioItemValue");
+withDefaults(defineProps<RadioGroupIndicatorProps>(), {
+  asChild: false,
+});
+
+const injectedItem = inject<RadioItemProvideValue>(RADIO_ITEM_INJECTION_KEY);
 </script>
 
 <template>
   <PrimitiveSpan
-    v-if="injectedValue?.modelValue?.value === value"
-    :data-state="
-      injectedValue?.modelValue?.value === value ? 'checked' : 'unchecked'
-    "
-    :data-disabled="injectedValue?.disabled"
+    :asChild="asChild"
+    v-if="injectedItem?.checked"
+    :data-state="injectedItem?.checked ? 'checked' : 'unchecked'"
+    :data-disabled="injectedItem?.disabled ? '' : undefined"
   >
     <slot />
   </PrimitiveSpan>