extends primitiveProps for checkbox, dropdownMenu

unovue · Jul 16, 2023 · a80adb4 · a80adb4
1 parent b8851e7
commit a80adb4
Show file tree

Hide file tree

Showing 15 changed files with 45 additions and 41 deletions.
diff --git a/packages/radix-vue/src/Checkbox/CheckboxIndicator.vue b/packages/radix-vue/src/Checkbox/CheckboxIndicator.vue
@@ -1,6 +1,7 @@
 <script lang="ts">
-export interface CheckboxIndicatorProps {
-  asChild?: boolean;
+import { type PrimitiveProps } from "@/Primitive";
+
+export interface CheckboxIndicatorProps extends PrimitiveProps {
   forceMount?: boolean;
 }
 </script>
@@ -15,16 +16,14 @@ import { PrimitiveSpan } from "@/Primitive";
 
 const injectedValue = inject<CheckboxProvideValue>(CHECKBOX_INJECTION_KEY);
 
-const props = withDefaults(defineProps<CheckboxIndicatorProps>(), {
-  asChild: false,
-});
+const props = defineProps<CheckboxIndicatorProps>();
 </script>
 
 <template>
   <PrimitiveSpan
-    :asChild="props.asChild"
     v-if="injectedValue?.modelValue.value"
     style="pointer-events: none"
+    :as-child="props.asChild"
     :data-disabled="injectedValue.disabled ? '' : undefined"
     :data-state="injectedValue.modelValue.value ? 'checked' : 'unchecked'"
   >

diff --git a/packages/radix-vue/src/Checkbox/CheckboxRoot.vue b/packages/radix-vue/src/Checkbox/CheckboxRoot.vue
@@ -1,8 +1,8 @@
 <script lang="ts">
 import type { InjectionKey, Ref } from "vue";
+import { type PrimitiveProps } from "@/Primitive";
 
-export interface CheckboxRootProps {
-  asChild?: boolean;
+export interface CheckboxRootProps extends PrimitiveProps {
   defaultChecked?: boolean;
   checked?: boolean;
   onCheckedChange?: void;
@@ -29,7 +29,6 @@ import { PrimitiveDiv } from "@/Primitive";
 import { toRef, provide } from "vue";
 
 const props = withDefaults(defineProps<CheckboxRootProps>(), {
-  asChild: false,
   modelValue: false,
   value: "on",
 });
@@ -53,7 +52,7 @@ let dataState: "checked" | "unchecked" | "indeterminate";
 
 <template>
   <PrimitiveDiv
-    :asChild="props.asChild"
+    :as-child="props.asChild"
     :value="props.value"
     role="checkbox"
     :aria-checked="props.modelValue"

diff --git a/packages/radix-vue/src/Dialog/DialogContent.vue b/packages/radix-vue/src/Dialog/DialogContent.vue
@@ -136,7 +136,7 @@ function handleKeydown(e: KeyboardEvent) {
 
 <template>
   <PrimitiveDiv
-    :asChild="props.asChild"
+    :as-child="props.asChild"
     ref="primitiveElement"
     v-if="injectedValue?.open.value"
     v-on-click-outside="handleOnClickOutside"

diff --git a/packages/radix-vue/src/DropdownMenu/DropdownMenuCheckboxItem.vue b/packages/radix-vue/src/DropdownMenu/DropdownMenuCheckboxItem.vue
@@ -1,8 +1,8 @@
 <script lang="ts">
 import { useVModel } from "@vueuse/core";
+import { type PrimitiveProps } from "@/Primitive";
 
-interface DropdownMenuCheckboxItemProps {
-  asChild?: boolean;
+interface DropdownMenuCheckboxItemProps extends PrimitiveProps {
   checked?: boolean;
   //onCheckedChange?: void;
   modelValue?: boolean;
@@ -64,6 +64,7 @@ provide(DROPDOWN_MENU_ITEM_SYMBOL, {
     @escape-keydown="handleEscape"
     role="menuitemcheckbox"
     :data-state="checkboxDataState"
+    :as-child="props.asChild"
     :aria-checked="props.modelValue ? true : false"
   >
     <input

diff --git a/packages/radix-vue/src/DropdownMenu/DropdownMenuContent.vue b/packages/radix-vue/src/DropdownMenu/DropdownMenuContent.vue
@@ -5,7 +5,6 @@ import { useCollection } from "@/shared";
 export type Boundary = Element | null | Array<Element | null>;
 
 export interface DropdownMenuContentProps extends PopperContentProps {
-  asChild?: boolean;
   loop?: boolean; //false
   //onOpenAutoFocus?: void;
   //onCloseAutoFocus?: void;
@@ -71,7 +70,7 @@ onClickOutside(tooltipContentElement, (event) => {
       :data-side="props.side"
       :data-align="props.align"
       role="tooltip"
-      :asChild="props.asChild"
+      :as-child="props.asChild"
       style="pointer-events: auto"
     >
       <slot />

diff --git a/packages/radix-vue/src/DropdownMenu/DropdownMenuGroup.vue b/packages/radix-vue/src/DropdownMenu/DropdownMenuGroup.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 DropdownMenuGroupProps {
+export interface DropdownMenuGroupProps extends PrimitiveProps {
   type?: TypeEnum;
   value?: string;
   defaultValue?: string;

diff --git a/packages/radix-vue/src/DropdownMenu/DropdownMenuItem.vue b/packages/radix-vue/src/DropdownMenu/DropdownMenuItem.vue
@@ -9,9 +9,9 @@ import {
   DROPDOWN_MENU_SUB_INJECTION_KEY,
   type DropdownMenuSubProvideValue,
 } from "./DropdownMenuSub.vue";
+import { type PrimitiveProps } from "@/Primitive";
 
-interface DropdownMenuItemProps {
-  asChild?: boolean;
+interface DropdownMenuItemProps extends PrimitiveProps {
   value?: string;
   disabled?: boolean;
   //onSelect?: void;
@@ -45,6 +45,7 @@ function handleEscape() {
     :rootProvider="rootInjectedValue"
     :subProvider="subInjectedValue"
     :orientation="rootInjectedValue?.orientation"
+    :as-child="props.asChild"
     @handle-click="handleClick"
     @escape-keydown="handleEscape"
   >

diff --git a/packages/radix-vue/src/DropdownMenu/DropdownMenuItemIndicator.vue b/packages/radix-vue/src/DropdownMenu/DropdownMenuItemIndicator.vue
@@ -1,6 +1,7 @@
 <script lang="ts">
-export interface DropdownMenuItemIndicatorProps {
-  asChild?: boolean;
+import { type PrimitiveProps } from "@/Primitive";
+
+export interface DropdownMenuItemIndicatorProps extends PrimitiveProps {
   forceMount?: boolean;
 }
 </script>

diff --git a/packages/radix-vue/src/DropdownMenu/DropdownMenuLabel.vue b/packages/radix-vue/src/DropdownMenu/DropdownMenuLabel.vue
@@ -1,8 +1,8 @@
 <script lang="ts">
 import { PrimitiveLabel } from "@/Primitive";
+import { type PrimitiveProps } from "@/Primitive";
 
-interface DropdownMenuLabelProps {
-  asChild?: boolean;
+interface DropdownMenuLabelProps extends PrimitiveProps {
   for?: string;
 }
 </script>
@@ -12,5 +12,5 @@ const props = defineProps<DropdownMenuLabelProps>();
 </script>
 
 <template>
-  <PrimitiveLabel :for="props.for"><slot /></PrimitiveLabel>
+  <PrimitiveLabel v-bind="props"><slot /></PrimitiveLabel>
 </template>
diff --git a/packages/radix-vue/src/DropdownMenu/DropdownMenuRadioGroup.vue b/packages/radix-vue/src/DropdownMenu/DropdownMenuRadioGroup.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>

diff --git a/packages/radix-vue/src/DropdownMenu/DropdownMenuRadioItem.vue b/packages/radix-vue/src/DropdownMenu/DropdownMenuRadioItem.vue
@@ -10,9 +10,9 @@ import {
   type RadioGroupProvideValue,
 } from "./DropdownMenuRadioGroup.vue";
 import { DROPDOWN_MENU_ITEM_SYMBOL } from "./utils";
+import { type PrimitiveProps } from "@/Primitive";
 
-interface RadioGroupItemProps {
-  asChild?: boolean;
+interface RadioGroupItemProps extends PrimitiveProps {
   value?: string;
   disabled?: boolean;
   id?: string;
@@ -63,6 +63,7 @@ provide(DROPDOWN_MENU_ITEM_SYMBOL, {
     @click="handleClick"
     role="menuitemradio"
     :data-state="radioDataState"
+    :as-child="props.asChild"
   >
     <slot />
   </BaseMenuItem>

diff --git a/packages/radix-vue/src/DropdownMenu/DropdownMenuSeparator.vue b/packages/radix-vue/src/DropdownMenu/DropdownMenuSeparator.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 DropdownMenuSeparatorProps {
+export interface DropdownMenuSeparatorProps extends PrimitiveProps {
   orientation?: DataOrientation;
   decorative?: boolean;
-  asChild?: boolean;
 }
 </script>
 
@@ -14,8 +14,5 @@ const props = defineProps<DropdownMenuSeparatorProps>();
 </script>
 
 <template>
-  <BaseSeparator
-    :orientation="props.orientation"
-    :decorative="props.decorative"
-  />
+  <BaseSeparator v-bind="props" />
 </template>
diff --git a/packages/radix-vue/src/DropdownMenu/DropdownMenuSubContent.vue b/packages/radix-vue/src/DropdownMenu/DropdownMenuSubContent.vue
@@ -2,7 +2,6 @@
 export type Boundary = Element | null | Array<Element | null>;
 
 export interface DropdownMenuSubContentProps extends PopperContentProps {
-  asChild?: boolean;
   loop?: boolean; //false
   //onOpenAutoFocus?: void;
   //onCloseAutoFocus?: void;
@@ -107,7 +106,7 @@ onClickOutside(tooltipContentElement, (event) => {
       :data-orientation="injectedValue.orientation"
       :aria-labelledby="injectedValue.triggerId"
       role="tooltip"
-      :asChild="props.asChild"
+      :as-child="props.asChild"
       style="pointer-events: auto"
     >
       <slot />

diff --git a/packages/radix-vue/src/DropdownMenu/DropdownMenuSubTrigger.vue b/packages/radix-vue/src/DropdownMenu/DropdownMenuSubTrigger.vue
@@ -1,6 +1,7 @@
 <script lang="ts">
-export interface DropdownMenuSubTriggerProps {
-  asChild?: boolean;
+import { type PrimitiveProps } from "@/Primitive";
+
+export interface DropdownMenuSubTriggerProps extends PrimitiveProps {
   disabled?: boolean;
   textValue?: string;
 }
@@ -28,6 +29,7 @@ const injectedValue = inject<DropdownMenuSubProvideValue>(
   DROPDOWN_MENU_SUB_INJECTION_KEY
 );
 
+const props = defineProps<DropdownMenuSubTriggerProps>();
 const { primitiveElement, currentElement } = usePrimitiveElement();
 
 onMounted(() => {
@@ -75,6 +77,7 @@ function handleMouseover() {
       :aria-controls="injectedValue?.contentId"
       :data-state="dataState"
       :data-orientation="rootInjectedValue?.orientation"
+      :as-child="props.asChild"
       aria-haspopup="menu"
       @handle-click="handleClick"
       @mouseover="handleMouseover"

diff --git a/packages/radix-vue/src/DropdownMenu/DropdownMenuTrigger.vue b/packages/radix-vue/src/DropdownMenu/DropdownMenuTrigger.vue
@@ -1,7 +1,7 @@
 <script lang="ts">
-export interface DropdownMenuTriggerProps {
-  asChild?: boolean;
-}
+import { type PrimitiveProps } from "@/Primitive";
+
+export interface DropdownMenuTriggerProps extends PrimitiveProps {}
 </script>
 
 <script setup lang="ts">
@@ -13,6 +13,8 @@ import {
 } from "./DropdownMenuRoot.vue";
 import { PopperAnchor } from "@/Popper";
 
+const props = defineProps<DropdownMenuTriggerProps>();
+
 const injectedValue = inject<DropdownMenuProvideValue>(
   DROPDOWN_MENU_INJECTION_KEY
 );
@@ -48,7 +50,7 @@ async function handleKeydown(e: KeyboardEvent) {
       ref="primitiveElement"
       :aria-expanded="injectedValue?.modelValue.value || false"
       :data-state="injectedValue?.modelValue.value ? 'open' : 'closed'"
-      :as-child="false"
+      :as-child="props.asChild"
       @click="handleClick"
       @keydown.prevent="handleKeydown"
     >