test: update radio story

packages/vue/src/components/CRadioGroup/CRadioGroup.stories.ts

@@ -3,10 +3,14 @@ import { h } from "vue";
 import CRadioGroup from "./CRadioGroup.vue";
 
 import StoryCRadioGroupBasic from "./stories/StoryCRadioGroupBasic.vue";
+import StoryCRadioGroupUnControlled from "./stories/StoryCRadioGroupUnControlled.vue";
 import { IconBuildingBank, IconCash, IconCreditCard } from "@tabler/icons-vue";
 
 const meta = {
   title: "inputs/CRadioGroup",
+  args: {
+    options: [],
+  },
   component: CRadioGroup,
 } satisfies Meta<typeof CRadioGroup>;
 
@@ -54,6 +58,27 @@ export const Disabled: Story = {
     }),
 };
 
+export const Uncontrolled: Story = {
+  render: () =>
+    h(StoryCRadioGroupUnControlled, {
+      options: [
+        {
+          label: "Daily",
+          value: "daily",
+        },
+        {
+          label: "Weekly",
+          value: "weekly",
+        },
+        {
+          label: "Monthly",
+          value: "monthly",
+        },
+      ],
+      uncontrolled: true,
+    }),
+};
+
 export const CustomOptions: Story = {
   render: () => {
     const spanStyle = {

packages/vue/src/components/CRadioGroup/stories/StoryCRadioGroupBasic.vue

@@ -5,6 +5,7 @@ import CRadioGroup, { RadioInputOption } from "../CRadioGroup.vue";
 const picked = ref("");
 const props = defineProps<{
   options: RadioInputOption[];
+  size?: "M" | "L";
 }>();
 </script>
 
@@ -19,6 +20,11 @@ const props = defineProps<{
     "
   >
     <div>Picked: {{ picked }}</div>
-    <CRadioGroup v-model="picked" name="radio" :options="props.options" />
+    <CRadioGroup
+      v-model="picked"
+      name="radio"
+      :options="props.options"
+      :size="size"
+    />
   </div>
 </template>

packages/vue/src/components/CRadioGroup/stories/StoryCRadioGroupUnControlled.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import CRadioGroup, { RadioInputOption } from "../CRadioGroup.vue";
+import CButton from "../../CButton/CButton.vue";
+
+const props = defineProps<{
+  options: RadioInputOption[];
+}>();
+
+const handleSubmit = (e: Event) => {
+  e.preventDefault();
+  var formData = new FormData(e.target as HTMLFormElement);
+  const selected = formData.get("radio");
+  alert(`Selected: ${selected}`);
+};
+</script>
+
+<template>
+  <form @submit="handleSubmit">
+    <div
+      style="
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: 16px;
+      "
+    >
+      <CRadioGroup name="radio" :options="props.options" />
+      <CButton type="submit" size="S">Submit</CButton>
+    </div>
+  </form>
+</template>