From a129dcaaf231b9503fbb6e23bc54b1c84933f69f Mon Sep 17 00:00:00 2001 From: Khairul Haaziq <101852870+khairulhaaziq@users.noreply.github.com> Date: Sat, 15 Jul 2023 05:46:53 +0800 Subject: [PATCH] [Collapsible]feat: 2/3 (#185) * init * finish --- .../src/Collapsible/CollapsibleContent.vue | 8 +++-- .../src/Collapsible/CollapsibleRoot.vue | 8 +++-- .../src/Collapsible/CollapsibleTrigger.vue | 7 ++++- .../src/components/Demo/CollapsibleDemo.vue | 31 +++++++------------ .../src/components/Demo/ContextMenuDemo.vue | 4 +-- .../vue3/src/components/Demo/TabsDemo.vue | 2 +- 6 files changed, 32 insertions(+), 28 deletions(-) diff --git a/packages/radix-vue/src/Collapsible/CollapsibleContent.vue b/packages/radix-vue/src/Collapsible/CollapsibleContent.vue index dd87c891e..abb5f7c45 100644 --- a/packages/radix-vue/src/Collapsible/CollapsibleContent.vue +++ b/packages/radix-vue/src/Collapsible/CollapsibleContent.vue @@ -1,7 +1,6 @@ @@ -81,13 +80,18 @@ onMounted(() => { isMountAnimationPrevented.value = false; }); }); + +const props = withDefaults(defineProps(), { + asChild: false, +}); 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(COLLAPSIBLE_INJECTION_KEY, { - contentId: "1", + contentId: useId(), disabled, open, onOpenToggle: () => { @@ -53,8 +54,9 @@ provide(COLLAPSIBLE_INJECTION_KEY, { diff --git a/packages/radix-vue/src/Collapsible/CollapsibleTrigger.vue b/packages/radix-vue/src/Collapsible/CollapsibleTrigger.vue index 8a2ec1645..3baccc188 100644 --- a/packages/radix-vue/src/Collapsible/CollapsibleTrigger.vue +++ b/packages/radix-vue/src/Collapsible/CollapsibleTrigger.vue @@ -15,15 +15,20 @@ import { const injectedValue = inject( COLLAPSIBLE_INJECTION_KEY ); + +const props = withDefaults(defineProps(), { + asChild: false, +}); diff --git a/playground/vue3/src/components/Demo/CollapsibleDemo.vue b/playground/vue3/src/components/Demo/CollapsibleDemo.vue index 655e50cd1..0650b8263 100644 --- a/playground/vue3/src/components/Demo/CollapsibleDemo.vue +++ b/playground/vue3/src/components/Demo/CollapsibleDemo.vue @@ -1,34 +1,27 @@ - - Value: {{ rootOpen ? "checked" : "unchecked" }} - - {{ rootOpen ? "Close" : "Open" }} - - - @mujahidfa starred 3 repos + + @peduarte starred 3 repos + - - - - + + @@ -41,7 +34,7 @@ const open = ref(false) vuejs/core - nuxt/nuxt + @radix-ui/primitives diff --git a/playground/vue3/src/components/Demo/ContextMenuDemo.vue b/playground/vue3/src/components/Demo/ContextMenuDemo.vue index 6382308b8..3bd691c22 100644 --- a/playground/vue3/src/components/Demo/ContextMenuDemo.vue +++ b/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) diff --git a/playground/vue3/src/components/Demo/TabsDemo.vue b/playground/vue3/src/components/Demo/TabsDemo.vue index bf97c588d..0b383038d 100644 --- a/playground/vue3/src/components/Demo/TabsDemo.vue +++ b/playground/vue3/src/components/Demo/TabsDemo.vue @@ -1,6 +1,6 @@
Value: {{ rootOpen ? "checked" : "unchecked" }}