From 6505a4375323a1fd7e0e8092302f87e86b1b58f8 Mon Sep 17 00:00:00 2001
From: lukicenturi <lukicenturi@gmail.com>
Date: Thu, 19 Sep 2024 15:22:50 +0700
Subject: [PATCH] fix(Radio): use generic type for Radio modelValue

---
 example/src/views/RadioView.vue               |  3 ++-
 .../radio-group/RuiRadioGroup.spec.ts         | 11 ++++++--
 .../radio-group/RuiRadioGroup.stories.ts      |  9 ++++---
 .../radio-group/RuiRadioGroup.vue             | 13 +++-------
 .../radio-button/radio/RuiRadio.stories.ts    |  4 +--
 .../forms/radio-button/radio/RuiRadio.vue     | 26 +++++++------------
 6 files changed, 31 insertions(+), 35 deletions(-)

diff --git a/example/src/views/RadioView.vue b/example/src/views/RadioView.vue
index 24e437e4..29db0329 100644
--- a/example/src/views/RadioView.vue
+++ b/example/src/views/RadioView.vue
@@ -1,8 +1,9 @@
 <script lang="ts" setup>
 import { type RadioProps, RuiRadio, RuiRadioGroup } from '@rotki/ui-library';
 
-type RadioData = RadioProps & {
+type RadioData = RadioProps<string> & {
   label?: string;
+  modelValue?: string;
 };
 
 const radios = ref<RadioData[]>([
diff --git a/src/components/forms/radio-button/radio-group/RuiRadioGroup.spec.ts b/src/components/forms/radio-button/radio-group/RuiRadioGroup.spec.ts
index 3a237161..e6b04ba9 100644
--- a/src/components/forms/radio-button/radio-group/RuiRadioGroup.spec.ts
+++ b/src/components/forms/radio-button/radio-group/RuiRadioGroup.spec.ts
@@ -2,8 +2,15 @@ import { describe, expect, it } from 'vitest';
 import { type ComponentMountingOptions, mount } from '@vue/test-utils';
 import RuiRadioGroup from '@/components/forms/radio-button/radio-group/RuiRadioGroup.vue';
 
-function createWrapper(options?: ComponentMountingOptions<typeof RuiRadioGroup>) {
-  return mount(RuiRadioGroup, { ...options, global: { stubs: ['icon'] } });
+function createWrapper(options?: ComponentMountingOptions<typeof RuiRadioGroup<string>>) {
+  const opts: ComponentMountingOptions<typeof RuiRadioGroup<string>> = {
+    ...options,
+    global: {
+      stubs: ['icon'],
+    },
+  };
+
+  return mount(RuiRadioGroup, opts);
 }
 
 describe('forms/RadioButton/RadioGroup', () => {
diff --git a/src/components/forms/radio-button/radio-group/RuiRadioGroup.stories.ts b/src/components/forms/radio-button/radio-group/RuiRadioGroup.stories.ts
index e04a92c4..1ce4fb41 100644
--- a/src/components/forms/radio-button/radio-group/RuiRadioGroup.stories.ts
+++ b/src/components/forms/radio-button/radio-group/RuiRadioGroup.stories.ts
@@ -3,7 +3,8 @@ import { contextColors } from '@/consts/colors';
 import RuiRadioGroup, { type Props } from '@/components/forms/radio-button/radio-group/RuiRadioGroup.vue';
 import type { Meta, StoryFn, StoryObj } from '@storybook/vue3';
 
-const render: StoryFn<Props> = args => ({
+type RuiRadioGroupProps = Props & { modelValue: string };
+const render: StoryFn<RuiRadioGroupProps> = args => ({
   components: { RuiRadio, RuiRadioGroup },
   setup() {
     const modelValue = computed({
@@ -23,7 +24,7 @@ const render: StoryFn<Props> = args => ({
   </RuiRadioGroup>`,
 });
 
-const meta: Meta<Props> = {
+const meta: Meta<RuiRadioGroupProps> = {
   argTypes: {
     color: { control: 'select', options: contextColors },
     disabled: { control: 'boolean', table: { category: 'State' } },
@@ -35,13 +36,13 @@ const meta: Meta<Props> = {
     size: { control: 'select', options: ['medium', 'sm', 'lg'] },
     successMessages: { control: 'object' },
   },
-  component: RuiRadioGroup,
+  component: RuiRadioGroup as any,
   render,
   tags: ['autodocs'],
   title: 'Components/Forms/Radio/RadioGroup',
 };
 
-type Story = StoryObj<Props>;
+type Story = StoryObj<RuiRadioGroupProps>;
 
 export const Default: Story = {
   args: {},
diff --git a/src/components/forms/radio-button/radio-group/RuiRadioGroup.vue b/src/components/forms/radio-button/radio-group/RuiRadioGroup.vue
index b59f8779..872a0407 100644
--- a/src/components/forms/radio-button/radio-group/RuiRadioGroup.vue
+++ b/src/components/forms/radio-button/radio-group/RuiRadioGroup.vue
@@ -1,13 +1,10 @@
-<script setup lang="ts">
+<script lang="ts" setup generic='TValue'>
 import { objectPick } from '@vueuse/shared';
 import { Fragment, isVNode } from 'vue';
 import RuiFormTextDetail from '@/components/helpers/RuiFormTextDetail.vue';
 import type { ContextColorsType } from '@/consts/colors';
 
-type ModelValue = string | number | boolean;
-
 export interface Props {
-  modelValue?: ModelValue;
   inline?: boolean;
   label?: string;
   hint?: string;
@@ -25,7 +22,6 @@ defineOptions({
 });
 
 withDefaults(defineProps<Props>(), {
-  modelValue: '',
   inline: false,
   label: '',
   hint: '',
@@ -37,9 +33,7 @@ withDefaults(defineProps<Props>(), {
   size: undefined,
 });
 
-const emit = defineEmits<{
-  (e: 'update:modelValue', value: ModelValue): void;
-}>();
+const modelValue = defineModel<TValue>({ required: false });
 
 const radioGroupName = ref('');
 
@@ -75,10 +69,9 @@ const css = useCssModule();
         v-for="(child, i) in children"
         v-bind="objectPick($props, ['disabled', 'color', 'size'])"
         :key="i"
-        :model-value="modelValue"
+        v-model="modelValue"
         hide-details
         :name="radioGroupName"
-        @update:model-value="emit('update:modelValue', $event)"
       />
     </div>
     <RuiFormTextDetail
diff --git a/src/components/forms/radio-button/radio/RuiRadio.stories.ts b/src/components/forms/radio-button/radio/RuiRadio.stories.ts
index 2132002a..cc722a32 100644
--- a/src/components/forms/radio-button/radio/RuiRadio.stories.ts
+++ b/src/components/forms/radio-button/radio/RuiRadio.stories.ts
@@ -2,7 +2,7 @@ import { contextColors } from '@/consts/colors';
 import RuiRadio, { type RadioProps } from '@/components/forms/radio-button/radio/RuiRadio.vue';
 import type { Meta, StoryFn, StoryObj } from '@storybook/vue3';
 
-type PropsAndLabel = RadioProps & { label: string };
+type PropsAndLabel = RadioProps<string> & { label: string; modelValue: string };
 
 const render: StoryFn<PropsAndLabel> = args => ({
   components: { RuiRadio },
@@ -37,7 +37,7 @@ const meta: Meta<PropsAndLabel> = {
     size: { control: 'select', options: ['medium', 'sm', 'lg'] },
     value: { control: 'text' },
   },
-  component: RuiRadio,
+  component: RuiRadio as any,
   parameters: {
     docs: {
       controls: { exclude: ['default'] },
diff --git a/src/components/forms/radio-button/radio/RuiRadio.vue b/src/components/forms/radio-button/radio/RuiRadio.vue
index 30b26b26..7215ee0e 100644
--- a/src/components/forms/radio-button/radio/RuiRadio.vue
+++ b/src/components/forms/radio-button/radio/RuiRadio.vue
@@ -1,14 +1,11 @@
-<script lang="ts" setup>
+<script lang="ts" setup generic='TValue'>
 import { getNonRootAttrs, getRootAttrs } from '@/utils/helpers';
 import RuiFormTextDetail from '@/components/helpers/RuiFormTextDetail.vue';
 import RuiIcon from '@/components/icons/RuiIcon.vue';
 import type { ContextColorsType } from '@/consts/colors';
 
-type ModelValue = string | number | boolean;
-
-export interface RadioProps {
-  value: ModelValue;
-  modelValue?: ModelValue;
+export interface RadioProps<TValue> {
+  value: TValue;
   disabled?: boolean;
   color?: ContextColorsType;
   size?: 'sm' | 'lg';
@@ -24,8 +21,7 @@ defineOptions({
   inheritAttrs: false,
 });
 
-const props = withDefaults(defineProps<RadioProps>(), {
-  modelValue: '',
+const props = withDefaults(defineProps<RadioProps<TValue>>(), {
   disabled: false,
   color: undefined,
   size: undefined,
@@ -36,25 +32,23 @@ const props = withDefaults(defineProps<RadioProps>(), {
   hideDetails: false,
 });
 
-const emit = defineEmits<{
-  (e: 'update:modelValue', modelValue: ModelValue): void;
-}>();
+const modelValue = defineModel<TValue>({ required: false });
 
-const { modelValue, size, value, successMessages, errorMessages }
+const { value, successMessages, errorMessages }
   = toRefs(props);
 
 function input(event: Event) {
   const checked = (event.target as HTMLInputElement).checked;
   if (checked)
-    emit('update:modelValue', get(value));
+    set(modelValue, get(value));
 }
 
 const iconSize: ComputedRef<number> = computed(() => {
-  const sizeVal = get(size);
-  if (sizeVal === 'lg')
+  const size = props.size;
+  if (size === 'lg')
     return 28;
 
-  if (sizeVal === 'sm')
+  if (size === 'sm')
     return 20;
 
   return 24;