[Accordion]feat: 2/3 (radix-vue#211)

* [Accordion]feat: 2/3

* Added useSingleOrMultipleValue

* [Accordion]fix: Check if item is disabled onClick

* [useSingleOrMultipleValue] fix: use defaultValue from props

* [AccordionStory] fix: Use collapsible for single type

* [Accordion] fix: Remove unnecessary type in inject

README.md

@@ -23,7 +23,7 @@ For changelog, visit [radix-vue.com/overview/releases](https://radix-vue.com/ove
 
 | Component                                                           | Usable | Complete API | Complete Accessibility |
 | :------------------------------------------------------------------ | :----: | ------------ | ---------------------- |
-| [Accordion](https://radix-vue.com/components/accordion)             |   ✅   |              |                        |
+| [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)                   |   ✅   | ✅           |                        |

packages/radix-vue/src/Accordion/AccordionContent.vue

@@ -1,32 +1,33 @@
 <script setup lang="ts">
+import type { PrimitiveProps } from "@/Primitive";
 import { inject } from "vue";
 import { CollapsibleContent } from "../Collapsible";
-import {
-  ACCORDION_IMPL_INJECTION_KEY,
-  type AccordionImplProvideValue,
-} from "./AccordionImpl.vue";
-import {
-  ACCORDION_ITEM_INJECTION_KEY,
-  type AccordionItemProvideValue,
-} from "./AccordionItem.vue";
+import { ACCORDION_ITEM_INJECTION_KEY } from "./AccordionItem.vue";
+import { ACCORDION_INJECTION_KEY } from "./AccordionRoot.vue";
 
-const accordionImplInjectedValue = inject<AccordionImplProvideValue>(
-  ACCORDION_IMPL_INJECTION_KEY
-);
-const accordionItemInjectedValue = inject<AccordionItemProvideValue>(
-  ACCORDION_ITEM_INJECTION_KEY
-);
+interface AccordionContentProps extends PrimitiveProps {}
+
+const props = defineProps<AccordionContentProps>();
+
+const injectedRoot = inject(ACCORDION_INJECTION_KEY);
+const injectedItem = inject(ACCORDION_ITEM_INJECTION_KEY);
 </script>
 
 <template>
   <CollapsibleContent
     role="region"
-    :aria-labelledby="accordionItemInjectedValue?.triggerId"
-    :data-orientation="accordionImplInjectedValue?.orientation"
-    :style="{
-      ['--radix-accordion-content-height' as any]: 'var(--radix-collapsible-content-height)',
-      ['--radix-accordion-content-width' as any]: 'var(--radix-collapsible-content-width)',
-    }"
+    :id="injectedItem?.triggerId"
+    :open="injectedItem?.open.value"
+    :hidden="!injectedItem?.open.value"
+    :as-child="props.asChild"
+    :aria-labelledby="injectedItem?.triggerId"
+    :data-state="injectedItem?.dataState.value"
+    :data-disabled="injectedItem?.dataDisabled.value"
+    :data-orientation="injectedRoot?.orientation"
+    :style="`
+      --radix-accordion-content-width: var(--radix-collapsible-content-width);
+      --radix-accordion-content-height: var(--radix-collapsible-content-height);
+    `"
   >
     <slot />
   </CollapsibleContent>

packages/radix-vue/src/Accordion/AccordionHeader.vue

@@ -1,33 +1,23 @@
 <script setup lang="ts">
-import { inject } from "vue";
 import { PrimitiveH3, type PrimitiveProps } from "@/Primitive";
+import { inject } from "vue";
+import { ACCORDION_ITEM_INJECTION_KEY } from "./AccordionItem.vue";
+import { ACCORDION_INJECTION_KEY } from "./AccordionRoot.vue";
 
 interface AccordionHeaderProps extends PrimitiveProps {}
-const props = defineProps<AccordionHeaderProps>();
 
-import {
-  ACCORDION_IMPL_INJECTION_KEY,
-  type AccordionImplProvideValue,
-} from "./AccordionImpl.vue";
-import {
-  ACCORDION_ITEM_INJECTION_KEY,
-  type AccordionItemProvideValue,
-} from "./AccordionItem.vue";
+const props = defineProps<AccordionHeaderProps>();
 
-const accordionImplInjectedValue = inject<AccordionImplProvideValue>(
-  ACCORDION_IMPL_INJECTION_KEY
-);
-const accordionItemInjectedValue = inject<AccordionItemProvideValue>(
-  ACCORDION_ITEM_INJECTION_KEY
-);
+const injectedRoot = inject(ACCORDION_INJECTION_KEY);
+const injectedItem = inject(ACCORDION_ITEM_INJECTION_KEY);
 </script>
 
 <template>
   <PrimitiveH3
-    :data-orientation="accordionImplInjectedValue?.orientation"
-    :data-state="accordionItemInjectedValue?.open ? 'open' : 'closed'"
-    :data-disabled="accordionItemInjectedValue?.disabled ? '' : undefined"
     :as-child="props.asChild"
+    :data-orientation="injectedRoot?.orientation"
+    :data-state="injectedItem?.dataState.value"
+    :data-disabled="injectedItem?.dataDisabled.value"
   >
     <slot />
   </PrimitiveH3>