extends primitiveProps for hoverCard, label, menuBar

packages/radix-vue/src/HoverCard/HoverCardTrigger.vue

@@ -1,7 +1,7 @@
 <script lang="ts">
-export interface HoverCardTriggerProps {
-  asChild?: boolean;
-}
+import { type PrimitiveProps } from "@/Primitive";
+
+export interface HoverCardTriggerProps extends PrimitiveProps {}
 </script>
 
 <script setup lang="ts">
@@ -17,9 +17,7 @@ import { useHoverDelay, useMouseleaveDelay } from "../shared";
 
 const injectedValue = inject<HoverCardProvideValue>(HOVER_CARD_INJECTION_KEY);
 
-const props = withDefaults(defineProps<HoverCardTriggerProps>(), {
-  asChild: false,
-});
+const props = defineProps<HoverCardTriggerProps>();
 
 const { primitiveElement, currentElement } = usePrimitiveElement();
 
@@ -47,7 +45,7 @@ async function handleMouseleave(e: MouseEvent) {
   <PopperAnchor asChild>
     <PrimitiveButton
       ref="primitiveElement"
-      :asChild="props.asChild"
+      :as-child="props.asChild"
       :aria-expanded="injectedValue?.open.value || false"
       :data-state="injectedValue?.open.value ? 'open' : 'closed'"
       @mouseover="injectedValue!.isHover = true"

packages/radix-vue/src/Label/Label.vue

@@ -1,14 +1,14 @@
 <script setup lang="ts">
 import { PrimitiveLabel } from "@/Primitive";
+import { type PrimitiveProps } from "@/Primitive";
 
-const props = defineProps({
-  for: {
-    type: String,
-    required: false,
-  },
-});
+interface LabelProps extends PrimitiveProps {
+  for?: string;
+}
+
+const props = defineProps<LabelProps>();
 </script>
 
 <template>
-  <PrimitiveLabel :for="props.for"><slot /></PrimitiveLabel>
+  <PrimitiveLabel v-bind="props"><slot /></PrimitiveLabel>
 </template>

packages/radix-vue/src/Menubar/MenubarCheckboxItem.vue

@@ -1,8 +1,8 @@
 <script lang="ts">
 import { useVModel } from "@vueuse/core";
+import { type PrimitiveProps } from "@/Primitive";
 
-interface MenubarCheckboxItemProps {
-  asChild?: boolean;
+interface MenubarCheckboxItemProps extends PrimitiveProps {
   checked?: boolean;
   //onCheckedChange?: void;
   modelValue?: boolean;
@@ -85,6 +85,7 @@ function handleEscapeKeydown(e: KeyboardEvent) {
     role="menuitemcheckbox"
     :data-state="checkboxDataState"
     :aria-checked="props.modelValue ? true : false"
+    :as-child="props.asChild"
   >
     <input
       type="checkbox"

packages/radix-vue/src/Menubar/MenubarContent.vue

@@ -2,7 +2,6 @@
 export type Boundary = Element | null | Array<Element | null>;
 
 export interface MenubarContentProps extends PopperContentProps {
-  asChild?: boolean;
   loop?: boolean; //false
   //onOpenAutoFocus?: void;
   //onCloseAutoFocus?: void;
@@ -114,7 +113,7 @@ const dataState = computed(() => {
       :aria-labelledby="injectedValue?.triggerId"
       :data-orientation="injectedValue?.orientation"
       role="tooltip"
-      :asChild="props.asChild"
+      :as-child="props.asChild"
       style="pointer-events: auto"
     >
       <slot />

packages/radix-vue/src/Menubar/MenubarGroup.vue

@@ -1,10 +1,11 @@
 <script lang="ts">
 import type { Ref, InjectionKey } from "vue";
 import type { DataOrientation, Direction } from "../shared/types";
+import { type PrimitiveProps } from "@/Primitive";
 
 type TypeEnum = "single" | "multiple";
 
-export interface MenubarGroupProps {
+export interface MenubarGroupProps extends PrimitiveProps {
   type?: TypeEnum;
   value?: string;
   defaultValue?: string;
@@ -66,6 +67,7 @@ provide<MenubarGroupProvideValue>(MENUBAR_GROUP_INJECTION_KEY, {
     ref="primitiveElement"
     role="group"
     :dir="props.dir"
+    :as-child="props.asChild"
     aria-label="Text alignment"
   >
     <slot />

packages/radix-vue/src/Menubar/MenubarItem.vue

@@ -10,9 +10,9 @@ import {
   MENUBAR_SUB_INJECTION_KEY,
   type MenubarSubProvideValue,
 } from "./MenubarSub.vue";
+import { type PrimitiveProps } from "@/Primitive";
 
-interface MenubarItemProps {
-  asChild?: boolean;
+interface MenubarItemProps extends PrimitiveProps {
   value?: string;
   disabled?: boolean;
   //onSelect?: void;
@@ -64,6 +64,7 @@ function handleEscapeKeydown() {
     :rootProvider="rootInjectedValue"
     :subProvider="subInjectedValue"
     :orientation="rootInjectedValue?.orientation"
+    :as-child="props.asChild"
     @handle-click="handleClick"
     @horizontal-keydown="handleHorizontalKeydown"
     @escape-keydown="handleEscapeKeydown"

packages/radix-vue/src/Menubar/MenubarItemIndicator.vue

@@ -1,6 +1,7 @@
 <script lang="ts">
-export interface MenubarItemIndicatorProps {
-  asChild?: boolean;
+import { type PrimitiveProps } from "@/Primitive";
+
+export interface MenubarItemIndicatorProps extends PrimitiveProps {
   forceMount?: boolean;
 }
 </script>
@@ -10,10 +11,16 @@ import { inject } from "vue";
 import { PrimitiveSpan } from "@/Primitive";
 import { MENUBAR_ITEM_SYMBOL } from "./utils";
 const context = inject(MENUBAR_ITEM_SYMBOL);
+
+const props = defineProps<MenubarItemIndicatorProps>();
 </script>
 
 <template>
-  <PrimitiveSpan v-if="context?.modelValue.value" style="pointer-events: none">
+  <PrimitiveSpan
+    v-if="context?.modelValue.value"
+    :as-child="props.asChild"
+    style="pointer-events: none"
+  >
     <slot />
   </PrimitiveSpan>
 </template>

packages/radix-vue/src/Menubar/MenubarLabel.vue

@@ -1,8 +1,8 @@
 <script lang="ts">
 import { PrimitiveLabel } from "@/Primitive";
+import { type PrimitiveProps } from "@/Primitive";
 
-interface MenubarLabelProps {
-  asChild?: boolean;
+interface MenubarLabelProps extends PrimitiveProps {
   for?: string;
 }
 </script>
@@ -12,5 +12,5 @@ const props = defineProps<MenubarLabelProps>();
 </script>
 
 <template>
-  <PrimitiveLabel :for="props.for"><slot /></PrimitiveLabel>
+  <PrimitiveLabel v-bind="props"><slot /></PrimitiveLabel>
 </template>

packages/radix-vue/src/Menubar/MenubarRadioGroup.vue

@@ -1,9 +1,9 @@
 <script lang="ts">
 import type { Ref } from "vue";
 import { useVModel } from "@vueuse/core";
+import { type PrimitiveProps } from "@/Primitive";
 
-export interface RadioGroupRootProps {
-  asChild?: boolean;
+export interface RadioGroupRootProps extends PrimitiveProps {
   value?: string;
   defaultValue?: string;
   //disabled?: boolean;
@@ -49,6 +49,7 @@ provide<RadioGroupProvideValue>(RADIO_GROUP_INJECTION_KEY, {
     ref="primitiveElement"
     role="radiogroup"
     aria-label="radiogroup"
+    :as-child="props.asChild"
   >
     <slot />
   </PrimitiveDiv>

packages/radix-vue/src/Menubar/MenubarRadioItem.vue

@@ -11,9 +11,9 @@ import {
   type RadioGroupProvideValue,
 } from "./MenubarRadioGroup.vue";
 import { MENUBAR_ITEM_SYMBOL } from "./utils";
+import { type PrimitiveProps } from "@/Primitive";
 
-interface RadioGroupItemProps {
-  asChild?: boolean;
+interface RadioGroupItemProps extends PrimitiveProps {
   value?: string;
   disabled?: boolean;
   id?: string;
@@ -76,6 +76,7 @@ function handleEscapeKeydown() {
     :rootProvider="rootInjectedValue"
     :orientation="rootInjectedValue?.orientation"
     :data-radix-vue-radio-value="props.value"
+    :as-child="props.asChild"
     @handle-click="handleClick"
     @horizontal-keydown="handleHorizontalKeydown"
     @escape-keydown="handleEscapeKeydown"

packages/radix-vue/src/Menubar/MenubarSeparator.vue

@@ -1,11 +1,11 @@
 <script lang="ts">
 import BaseSeparator from "../shared/component/BaseSeparator.vue";
 import type { DataOrientation } from "../shared/types";
+import { type PrimitiveProps } from "@/Primitive";
 
-export interface MenubarSeparatorProps {
+export interface MenubarSeparatorProps extends PrimitiveProps {
   orientation?: DataOrientation;
   decorative?: boolean;
-  asChild?: boolean;
 }
 </script>
 
@@ -14,8 +14,5 @@ const props = defineProps<MenubarSeparatorProps>();
 </script>
 
 <template>
-  <BaseSeparator
-    :orientation="props.orientation"
-    :decorative="props.decorative"
-  />
+  <BaseSeparator v-bind="props" />
 </template>

packages/radix-vue/src/Menubar/MenubarSubContent.vue

@@ -2,7 +2,6 @@
 export type Boundary = Element | null | Array<Element | null>;
 
 export interface MenubarSubContentProps extends PopperContentProps {
-  asChild?: boolean;
   loop?: boolean; //false
   //onOpenAutoFocus?: void;
   //onCloseAutoFocus?: void;

packages/radix-vue/src/Menubar/MenubarSubTrigger.vue

@@ -1,6 +1,7 @@
 <script lang="ts">
-export interface MenubarSubTriggerProps {
-  asChild?: boolean;
+import { type PrimitiveProps } from "@/Primitive";
+
+export interface MenubarSubTriggerProps extends PrimitiveProps {
   disabled?: boolean;
   textValue?: string;
 }
@@ -21,6 +22,8 @@ import { usePrimitiveElement } from "@/Primitive";
 import { useArrowNavigation } from "@/shared/useArrowNavigation";
 import BaseMenuItem from "../shared/component/BaseMenuItem.vue";
 
+const props = defineProps<MenubarSubTriggerProps>();
+
 const rootInjectedValue = inject<MenubarProvideValue>(MENUBAR_INJECTION_KEY);
 
 const injectedValue = inject<MenubarSubProvideValue>(MENUBAR_SUB_INJECTION_KEY);
@@ -96,6 +99,7 @@ function handleEscapeKeydown(e: KeyboardEvent) {
       :aria-controls="injectedValue?.contentId"
       :data-state="dataState"
       :data-orientation="rootInjectedValue?.orientation"
+      :as-child="props.asChild"
       aria-haspopup="menu"
       @handle-click="handleClick"
       @mouseover="handleMouseover"

packages/radix-vue/src/Menubar/MenubarTrigger.vue

@@ -1,6 +1,7 @@
 <script lang="ts">
-export interface MenubarMenuTriggerProps {
-  asChild?: boolean;
+import { type PrimitiveProps } from "@/Primitive";
+
+export interface MenubarMenuTriggerProps extends PrimitiveProps {
   disabled?: boolean;
   textValue?: string;
 }
@@ -152,6 +153,7 @@ watch(
       :data-highlighted="highlightedState ? '' : null"
       :aria-disabled="props.disabled ? true : undefined"
       :data-disabled="props.disabled ? '' : undefined"
+      :as-child="props.asChild"
       :tabindex="
         rootInjectedValue?.triggerElement.value === currentElement ? '0' : '-1'
       "