Skip to content

Commit

Permalink
chore(radio): split demo (#2745)
Browse files Browse the repository at this point in the history
  • Loading branch information
@eiinu
eiinu authored Dec 15, 2023
1 parent ee96fa9 commit 47afb19
Show file tree
Hide file tree
Showing 27 changed files with 481 additions and 687 deletions.
11 changes: 11 additions & 0 deletions packages/nutui-taro-demo/src/dentry/pages/radio/basic.vue
View file
Original file line number Diff line number Diff line change
@@ -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>
11 changes: 11 additions & 0 deletions packages/nutui-taro-demo/src/dentry/pages/radio/disabled.vue
View file
Original file line number Diff line number Diff line change
@@ -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>
13 changes: 13 additions & 0 deletions packages/nutui-taro-demo/src/dentry/pages/radio/event.vue
View file
Original file line number Diff line number Diff line change
@@ -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>
11 changes: 11 additions & 0 deletions packages/nutui-taro-demo/src/dentry/pages/radio/horizontal.vue
View file
Original file line number Diff line number Diff line change
@@ -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>
11 changes: 11 additions & 0 deletions packages/nutui-taro-demo/src/dentry/pages/radio/icon-size.vue
View file
Original file line number Diff line number Diff line change
@@ -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>
19 changes: 19 additions & 0 deletions packages/nutui-taro-demo/src/dentry/pages/radio/icon.vue
View file
Original file line number Diff line number Diff line change
@@ -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-taro';
const val = ref('1');
</script>
154 changes: 60 additions & 94 deletions packages/nutui-taro-demo/src/dentry/pages/radio/index.vue
View file
Original file line number Diff line number Diff line change
@@ -1,102 +1,68 @@
<template>
<Demo class="full">
<nut-cell-group title="基础用法">
<nut-cell>
<nut-radio-group v-model="state.radioVal">
<nut-radio label="1">选项1</nut-radio>
<nut-radio disabled label="2">选项2</nut-radio>
<nut-radio label="3">选项3</nut-radio>
</nut-radio-group>
</nut-cell>
<nut-cell>
<nut-radio-group v-model="state.radioVal" text-position="left">
<nut-radio label="1">选项1</nut-radio>
<nut-radio disabled label="2">选项2</nut-radio>
<nut-radio label="3">选项3</nut-radio>
</nut-radio-group>
</nut-cell>
<nut-cell>
<nut-radio-group v-model="state.radioVal">
<nut-radio shape="button" label="1">选项1</nut-radio>
<nut-radio disabled shape="button" label="2">选项2</nut-radio>
<nut-radio shape="button" label="3">选项3</nut-radio>
</nut-radio-group>
</nut-cell>
</nut-cell-group>
<nut-cell-group title="水平使用">
<nut-cell>
<nut-radio-group v-model="state.radioVal" direction="horizontal">
<nut-radio label="1">选项1</nut-radio>
<nut-radio label="2">选项2</nut-radio>
<nut-radio label="3">选项3</nut-radio>
</nut-radio-group>
</nut-cell>
<nut-cell>
<nut-radio-group v-model="state.radioVal" text-position="left" direction="horizontal">
<nut-radio label="1">选项1</nut-radio>
<nut-radio label="2">选项2</nut-radio>
<nut-radio label="3">选项3</nut-radio>
</nut-radio-group>
</nut-cell>
<nut-cell>
<nut-radio-group v-model="state.radioVal" direction="horizontal">
<nut-radio shape="button" label="1">选项1</nut-radio>
<nut-radio shape="button" label="2">选项2</nut-radio>
<nut-radio shape="button" label="3">选项3</nut-radio>
</nut-radio-group>
</nut-cell>
</nut-cell-group>
<nut-cell-group title="自定义尺寸">
<nut-cell>
<nut-radio-group v-model="state.radioVal4">
<nut-radio label="1" icon-size="12">自定义尺寸12</nut-radio>
<nut-radio label="2" icon-size="12">自定义尺寸12</nut-radio>
</nut-radio-group>
</nut-cell>
</nut-cell-group>
<nut-cell-group title="自定义图标">
<nut-cell>
<nut-radio-group v-model="state.radioVal5">
<nut-radio label="1">
自定义图标
<template #icon> <Checklist /> </template>
<template #checkedIcon> <Checklist color="red" /> </template>
</nut-radio>
<nut-radio label="2">
自定义图标
<template #icon> <Checklist /> </template>
<template #checkedIcon> <Checklist color="red" /> </template>
</nut-radio>
</nut-radio-group>
</nut-cell>
</nut-cell-group>
<nut-cell-group title="触发事件">
<nut-cell>
<nut-radio-group v-model="state.radioVal6" @change="handleChange">
<nut-radio label="1">触发事件</nut-radio>
<nut-radio label="2">触发事件</nut-radio>
</nut-radio-group>
</nut-cell>
<nut-cell title="当前选中值" :desc="state.radioVal6"></nut-cell>
</nut-cell-group>
<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 { reactive } from 'vue';
import { Checklist } from '@nutui/icons-vue-taro';
import { useTranslate } from '../../../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 state = reactive({
radioVal: '1',
radioVal2: '2',
radioVal3: '1',
radioVal4: '1',
radioVal5: '1',
radioVal6: '1'
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'
}
});
const handleChange = (value: any) => {
console.log(value);
};
</script>

<style lang="scss" scoped></style>
11 changes: 11 additions & 0 deletions packages/nutui-taro-demo/src/dentry/pages/radio/position.vue
View file
Original file line number Diff line number Diff line change
@@ -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>
11 changes: 11 additions & 0 deletions packages/nutui-taro-demo/src/dentry/pages/radio/shape.vue
View file
Original file line number Diff line number Diff line change
@@ -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>
23 changes: 23 additions & 0 deletions packages/nutui-taro-demo/src/dentry/pages/radio/size.vue
View file
Original file line number Diff line number Diff line change
@@ -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>
2 changes: 1 addition & 1 deletion packages/nutui-vite-plugins/src/markdown.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ const TransformMarkdownDemo = (options: MarkdownOptions): Plugin => {
transform(src, id) {
if (fileRegex.test(id)) {
return {
code: src.replace(/> demo: ([0-9a-z .]*)[\n|\r\n]/g, (_match, $1: string) => {
code: src.replace(/> demo: ([-0-9a-z .]*)[\n|\r\n]/g, (_match, $1: string) => {
const [comp, demo, type] = $1.split(' ');
const docPath = type
? path.resolve(options.docTaroRoot, type, 'pages', comp, `${demo}.vue`)
Expand Down
2 changes: 1 addition & 1 deletion scripts/copyh5.cjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ const replaceFile = (file) => {
if (err) throw err;

// 修改文件内容
data = data.replace(/> demo: ([0-9a-z .]*)[\n|\r\n]/g, (_match, $1) => {
data = data.replace(/> demo: ([-0-9a-z .]*)[\n|\r\n]/g, (_match, $1) => {
const [left, right] = $1.split(' ');
const target = path.resolve('src/packages/__VUE/', left, 'demo', `${right}.vue`);
let code = '';
Expand Down
2 changes: 1 addition & 1 deletion scripts/copytaro.cjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ const replaceFile = (file) => {
if (err) throw err;

// 修改文件内容
data = data.replace(/> demo: ([0-9a-z .]*)[\n|\r\n]/g, (_match, $1) => {
data = data.replace(/> demo: ([-0-9a-z .]*)[\n|\r\n]/g, (_match, $1) => {
const [left, right, type] = $1.split(' ');
const target = path.resolve('packages/nutui-taro-demo/src', type, 'pages', left, `${right}.vue`);
let code = '';
Expand Down
Loading

0 comments on commit 47afb19

Please sign in to comment.