refactor(Radio) (#57)

radix-vue · Jun 25, 2023 · 8c7fd34 · 8c7fd34
1 parent f8fbbc5
commit 8c7fd34
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 17 deletions.
diff --git a/packages/radix-vue/src/RadioGroup/RadioGroupItem.vue b/packages/radix-vue/src/RadioGroup/RadioGroupItem.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { ref, inject, computed, provide } from "vue";
-import type { Ref } from "vue";
 import {
   RADIO_GROUP_INJECTION_KEY,
   type RadioGroupProvideValue,
@@ -24,16 +23,16 @@ function changeTab(value: string) {
   injectedValue?.changeModelValue(value);
 }
 
-const currentRadioElement: Ref<HTMLElement> = ref();
+const currentRadioElement = ref<HTMLElement>();
 
 function handleKeydown(e: KeyboardEvent) {
   const allRadioItem = Array.from(
-    injectedValue?.parentElement.value.querySelectorAll(
+    injectedValue!.parentElement.value!.querySelectorAll(
       "[data-radix-vue-collection-item]"
     )
-  );
+  ) as HTMLElement[];
   if (allRadioItem.length) {
-    const currentTabIndex = allRadioItem.indexOf(currentRadioElement.value);
+    const currentTabIndex = allRadioItem.indexOf(currentRadioElement.value!);
 
     if (e.key === "ArrowRight" || e.key === "ArrowDown") {
       e.preventDefault();
@@ -42,11 +41,11 @@ function handleKeydown(e: KeyboardEvent) {
         changeTab(
           allRadioItem[currentTabIndex + 1].getAttribute(
             "data-radix-vue-radio-value"
-          )
+          )!
         );
       } else {
         allRadioItem[0].focus();
-        changeTab(allRadioItem[0].getAttribute("data-radix-vue-radio-value"));
+        changeTab(allRadioItem[0].getAttribute("data-radix-vue-radio-value")!);
       }
     }
 
@@ -57,14 +56,14 @@ function handleKeydown(e: KeyboardEvent) {
         changeTab(
           allRadioItem[currentTabIndex - 1].getAttribute(
             "data-radix-vue-radio-value"
-          )
+          )!
         );
       } else {
         allRadioItem[allRadioItem.length - 1].focus();
         changeTab(
           allRadioItem[allRadioItem.length - 1].getAttribute(
             "data-radix-vue-radio-value"
-          )
+          )!
         );
       }
     }
@@ -76,7 +75,7 @@ function handleKeydown(e: KeyboardEvent) {
   <button
     type="button"
     :data-state="state"
-    @click="injectedValue.changeModelValue(props.value)"
+    @click="injectedValue?.changeModelValue(props.value)"
     :tabindex="`${
       injectedValue?.modelValue?.value === props.value ? '0' : '-1'
     }`"

diff --git a/packages/radix-vue/src/RadioGroup/RadioGroupRoot.vue b/packages/radix-vue/src/RadioGroup/RadioGroupRoot.vue
@@ -12,26 +12,23 @@ export const RADIO_GROUP_INJECTION_KEY = "RadioGroup" as const;
 
 export interface RadioGroupProvideValue {
   modelValue?: Readonly<Ref<string | string[] | undefined>>;
-  changeModelValue(): (value: string) => void;
-  parentElement: Ref<HTMLElement>;
+  changeModelValue: (value?: string) => void;
+  parentElement: Ref<HTMLElement | undefined>;
 }
 </script>
 
 <script setup lang="ts">
 import { ref, toRef, provide } from "vue";
 
-const props = withDefaults(defineProps<RadioGroupRootProps>(), {
-  type: "single",
-});
+const props = defineProps<RadioGroupRootProps>();
 
 const emits = defineEmits(["update:modelValue"]);
 
 const parentElementRef: Ref<HTMLElement | undefined> = ref();
 
 provide<RadioGroupProvideValue>(RADIO_GROUP_INJECTION_KEY, {
-  type: props.type,
   modelValue: toRef(() => props.modelValue),
-  changeModelValue: (value: string) => {
+  changeModelValue: (value?: string) => {
     emits("update:modelValue", value);
   },
   parentElement: parentElementRef,