[Collapsible]feat: 2/3 (#185)

* init

* finish

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

@@ -1,7 +1,6 @@
 <script lang="ts">
 export interface CollapsibleContentProps {
   asChild?: boolean;
-  forceMount?: boolean;
 }
 </script>
 
@@ -81,13 +80,18 @@ onMounted(() => {
     isMountAnimationPrevented.value = false;
   });
 });
+
+const props = withDefaults(defineProps<CollapsibleContentProps>(), {
+  asChild: false,
+});
 </script>
 
 <template>
   <PrimitiveDiv
     ref="primitiveElement"
+    :asChild="props.asChild"
     :data-state="injectedValue?.open.value ? 'open' : 'closed'"
-    :data-disabled="injectedValue?.disabled?.value ? 'true' : undefined"
+    :data-disabled="injectedValue?.disabled?.value ? '' : undefined"
     :id="injectedValue?.contentId"
     :hidden="!isPresent"
     :style="{

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"
   >

playground/vue3/src/components/Demo/CollapsibleDemo.vue

@@ -1,34 +1,27 @@
 <script setup lang="ts">
 import { ref } from 'vue'
-import { CollapsibleContent, CollapsibleRoot, CollapsibleTrigger } from 'radix-vue'
 import { Icon } from '@iconify/vue'
+import {
+  CollapsibleContent,
+  CollapsibleRoot,
+  CollapsibleTrigger,
+} from '../../../../../packages/radix-vue/src'
 
 const rootOpen = ref(false)
 const rootDisabled = ref(false)
-const open = ref(false)
 </script>
 
 <template>
-  <div class="absolute left-4 top-3 text-sm">
-    <p>Value: {{ rootOpen ? "checked" : "unchecked" }}</p>
-    <button
-      class="bg-white/20 px-2 py-1 rounded-md active:scale-90 duration-100 transform hover:bg-white/40 active:bg-white/20"
-      @click="rootOpen = !rootOpen"
-    >
-      {{ rootOpen ? "Close" : "Open" }}
-    </button>
-  </div>
   <CollapsibleRoot v-model:open="rootOpen" class="w-[300px]" :disabled="rootDisabled">
     <div style="display: flex; align-items: center; justify-content: space-between">
-      <span class="text-violet11 text-[15px] leading-[25px]" style="color: white"> @mujahidfa starred 3 repos </span>
+      <span class="text-white text-[15px] leading-[25px]">
+        @peduarte starred 3 repos
+      </span>
       <CollapsibleTrigger
-        as-child
-        class="rounded-full h-[25px] w-[25px] inline-flex items-center justify-center text-violet11 shadow-[0_2px_10px] shadow-blackA7 outline-none data-[state=closed]:bg-white data-[state=open]:bg-violet3 hover:bg-violet3 focus:shadow-[0_0_0_2px] focus:shadow-black"
+        class="cursor-default rounded-full h-[25px] w-[25px] inline-flex items-center justify-center text-violet11 shadow-[0_2px_10px] shadow-blackA7 outline-none data-[state=closed]:bg-white data-[state=open]:bg-violet3 hover:bg-violet3 focus:shadow-[0_0_0_2px] focus:shadow-black"
       >
-        <button>
-          <Icon v-if="rootOpen" icon="radix-icons:cross-2" class="h-3 w-3 text-black" />
-          <Icon v-else icon="radix-icons:row-spacing" class="h-3 w-3 text-black" />
-        </button>
+        <Icon v-if="rootOpen" icon="radix-icons:cross-2" class="h-3.5 w-3.5" />
+        <Icon v-else icon="radix-icons:row-spacing" class="h-3.5 w-3.5" />
       </CollapsibleTrigger>
     </div>
 
@@ -41,7 +34,7 @@ const open = ref(false)
         <span class="text-violet11 text-[15px] leading-[25px]">vuejs/core</span>
       </div>
       <div class="bg-white rounded my-[10px] p-[10px] shadow-[0_2px_10px] shadow-blackA7">
-        <span class="text-violet11 text-[15px] leading-[25px]">nuxt/nuxt</span>
+        <span class="text-violet11 text-[15px] leading-[25px]">@radix-ui/primitives</span>
       </div>
     </CollapsibleContent>
   </CollapsibleRoot>

playground/vue3/src/components/Demo/ContextMenuDemo.vue

@@ -12,10 +12,10 @@ import {
   ContextMenuRadioItem,
   ContextMenuRoot,
   ContextMenuSeparator,
-  ContextMenuTrigger,
   ContextMenuSub,
   ContextMenuSubContent,
-  ContextMenuSubTrigger
+  ContextMenuSubTrigger,
+  ContextMenuTrigger,
 } from '../../../../../packages/radix-vue/src'
 
 const toggleState = ref(false)

playground/vue3/src/components/Demo/TabsDemo.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { TabsContent, TabsList, TabsRoot, TabsTrigger } from '../../../../../packages/radix-vue/src'
 import { ref } from 'vue'
+import { TabsContent, TabsList, TabsRoot, TabsTrigger } from '../../../../../packages/radix-vue/src'
 
 const toggleStateSingle = ref('tab1')
 </script>