Add splitRoutePath and getMonthName functions to utils/numbers.ts and texts.ts

src/components/Form/InlineRadioGroup.vue

@@ -3,8 +3,9 @@
     <fieldset>
       <div class="space-y-3 sm:flex sm:items-center sm:space-y-0 sm:space-x-5">
         <div v-for="item in radioItems" :key="item.id" class="flex items-center">
-          <input :id="`${item.id}`" type="radio" name="radio"
-            :checked="item.hasOwnProperty('checked') && item.checked === true"
+          <input v-model="groupValue" 
+            type="radio" name="radio"
+            :checked="item.checked" @change="onChange(item)"
             class="w-4 h-4 border-gray-300 text-primary-500 peer focus:ring-primary-500" />
           <label :for="`${item.id}`" class="block ml-3 text-sm font-medium text-gray-700 peer-checked:text-primary-500">{{
             item.title }}</label>
@@ -15,7 +16,7 @@
 </template>
 
 <script setup lang="ts">
-import { type PropType } from 'vue'
+import { ref, watch, type PropType, onMounted } from 'vue'
 
 interface Item {
   id: number;
@@ -23,10 +24,24 @@ interface Item {
   checked?: boolean;
 }
 
-defineProps({
+const onChange= (e:Item) => {
+  itemSelected.value = e
+  emit('update:groupValue', e)
+}
+
+const props = defineProps({
   radioItems: {
     type: Array as PropType<Item[]>,
     required: true
   }
 })
+
+const itemSelected = ref(props.radioItems[0])
+const emit = defineEmits(['update:groupValue'])
+const groupValue = ref(1)
+
+onMounted(() => {
+  itemSelected.value = props.radioItems[0]
+})
+
 </script>