chore(radio): split demo

src/packages/__VUE/radio/demo/basic.vue

@@ -0,0 +1,11 @@
+<template>
+  <nut-radio-group v-model="val">
+    <nut-radio label="1">Option 1</nut-radio>
+    <nut-radio label="2">Option 2</nut-radio>
+    <nut-radio label="3">Option 3</nut-radio>
+  </nut-radio-group>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const val = ref('1');
+</script>

src/packages/__VUE/radio/demo/disabled.vue

@@ -0,0 +1,11 @@
+<template>
+  <nut-radio-group v-model="val">
+    <nut-radio disabled label="1">Option 1</nut-radio>
+    <nut-radio disabled label="2">Option 2</nut-radio>
+    <nut-radio disabled label="3">Option 3</nut-radio>
+  </nut-radio-group>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const val = ref('1');
+</script>

src/packages/__VUE/radio/demo/event.vue

@@ -0,0 +1,13 @@
+<template>
+  <nut-radio-group v-model="val" @change="onChange">
+    <nut-radio label="1">Option 1</nut-radio>
+    <nut-radio label="2">Option 2</nut-radio>
+  </nut-radio-group>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const val = ref('1');
+const onChange = (v: string) => {
+  console.log(v);
+};
+</script>

src/packages/__VUE/radio/demo/horizontal.vue

@@ -0,0 +1,11 @@
+<template>
+  <nut-radio-group v-model="val" direction="horizontal">
+    <nut-radio label="1">Option 1</nut-radio>
+    <nut-radio label="2">Option 2</nut-radio>
+    <nut-radio label="3">Option 3</nut-radio>
+  </nut-radio-group>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const val = ref('1');
+</script>

src/packages/__VUE/radio/demo/icon-size.vue

@@ -0,0 +1,11 @@
+<template>
+  <nut-radio-group v-model="val">
+    <nut-radio label="1" icon-size="12">Option 1</nut-radio>
+    <nut-radio label="2" icon-size="12">Option 2</nut-radio>
+    <nut-radio label="3" icon-size="12">Option 3</nut-radio>
+  </nut-radio-group>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const val = ref('1');
+</script>

src/packages/__VUE/radio/demo/icon.vue

@@ -0,0 +1,19 @@
+<template>
+  <nut-radio-group v-model="val">
+    <nut-radio label="1">
+      Option 1
+      <template #icon><Checklist /></template>
+      <template #checkedIcon><Checklist color="red" /></template>
+    </nut-radio>
+    <nut-radio label="2">
+      Option 2
+      <template #icon><Checklist /></template>
+      <template #checkedIcon><Checklist color="red" /></template>
+    </nut-radio>
+  </nut-radio-group>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+import { Checklist } from '@nutui/icons-vue';
+const val = ref('1');
+</script>

src/packages/__VUE/radio/demo/index.vue

@@ -0,0 +1,68 @@
+<template>
+  <Demo class="bg-w">
+    <h2>{{ t('basic') }}</h2>
+    <Basic />
+
+    <h2>{{ t('horizontal') }}</h2>
+    <Horizontal />
+
+    <h2>{{ t('disabled') }}</h2>
+    <Disabled />
+
+    <h2>{{ t('icon') }}</h2>
+    <Icon />
+
+    <h2>{{ t('position') }}</h2>
+    <Position />
+
+    <h2>{{ t('iconSize') }}</h2>
+    <IconSize />
+
+    <h2>{{ t('shape') }}</h2>
+    <Shape />
+
+    <h2>{{ t('size') }}</h2>
+    <Size />
+
+    <h2>{{ t('event') }}</h2>
+    <Event />
+  </Demo>
+</template>
+
+<script setup lang="ts">
+import { useTranslate } from '@/sites/utils';
+import Basic from './basic.vue';
+import Horizontal from './horizontal.vue';
+import Disabled from './disabled.vue';
+import Icon from './icon.vue';
+import Position from './position.vue';
+import IconSize from './icon-size.vue';
+import Shape from './shape.vue';
+import Size from './size.vue';
+import Event from './event.vue';
+
+const t = useTranslate({
+  'zh-CN': {
+    basic: '基础用法',
+    horizontal: '水平方向',
+    disabled: '禁用状态',
+    icon: '自定义图标',
+    position: '左侧文本',
+    iconSize: '图标尺寸',
+    shape: '设置形状',
+    size: '自定义按钮尺寸',
+    event: '触发事件'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    horizontal: 'Horizontal',
+    disabled: 'Disabled',
+    icon: 'Custom Icon',
+    position: 'Text Position',
+    iconSize: 'Icon Size',
+    shape: 'Shape',
+    size: 'Custom Button Size',
+    event: 'Event'
+  }
+});
+</script>

src/packages/__VUE/radio/demo/position.vue

@@ -0,0 +1,11 @@
+<template>
+  <nut-radio-group v-model="val" text-position="left">
+    <nut-radio label="1">Option 1</nut-radio>
+    <nut-radio label="2">Option 2</nut-radio>
+    <nut-radio label="3">Option 3</nut-radio>
+  </nut-radio-group>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const val = ref('1');
+</script>

src/packages/__VUE/radio/demo/shape.vue

@@ -0,0 +1,11 @@
+<template>
+  <nut-radio-group v-model="val">
+    <nut-radio label="1" shape="button">Option 1</nut-radio>
+    <nut-radio label="2" shape="button">Option 2</nut-radio>
+    <nut-radio label="3" shape="button">Option 3</nut-radio>
+  </nut-radio-group>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const val = ref('1');
+</script>

src/packages/__VUE/radio/demo/size.vue

@@ -0,0 +1,23 @@
+<template>
+  <nut-radio-group v-model="val1" direction="horizontal">
+    <nut-radio label="1" shape="button">Option 1</nut-radio>
+    <nut-radio label="2" shape="button">Option 2</nut-radio>
+    <nut-radio label="3" shape="button">Option 3</nut-radio>
+  </nut-radio-group>
+  <nut-radio-group v-model="val2" direction="horizontal">
+    <nut-radio label="1" shape="button" size="small">Option 1</nut-radio>
+    <nut-radio label="2" shape="button" size="small">Option 2</nut-radio>
+    <nut-radio label="3" shape="button" size="small">Option 3</nut-radio>
+  </nut-radio-group>
+  <nut-radio-group v-model="val3" direction="horizontal">
+    <nut-radio label="1" shape="button" size="mini">Option 1</nut-radio>
+    <nut-radio label="2" shape="button" size="mini">Option 2</nut-radio>
+    <nut-radio label="3" shape="button" size="mini">Option 3</nut-radio>
+  </nut-radio-group>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const val1 = ref('1');
+const val2 = ref('1');
+const val3 = ref('1');
+</script>