chore(rate): split demo

packages/nutui-taro-demo/src/basic/pages/button/index.vue

@@ -16,13 +16,13 @@
     <Loading />
 
     <h2>{{ t('icon') }}</h2>
-    <Icon />
+    <IconDemo />
 
     <h2>{{ t('size') }}</h2>
     <Size />
 
     <h2>{{ t('block') }}</h2>
-    <Block />
+    <BlockDemo />
 
     <h2>{{ t('color') }}</h2>
     <Color />
@@ -36,9 +36,9 @@ import Plain from './plain.vue';
 import Disabled from './disabled.vue';
 import Shape from './shape.vue';
 import Loading from './loading.vue';
-import Icon from './icon.vue';
+import IconDemo from './icon.vue';
 import Size from './size.vue';
-import Block from './block.vue';
+import BlockDemo from './block.vue';
 import Color from './color.vue';
 const t = useTranslate({
   'zh-CN': {

packages/nutui-taro-demo/src/dentry/pages/radio/index.vue

@@ -10,7 +10,7 @@
     <Disabled />
 
     <h2>{{ t('icon') }}</h2>
-    <Icon />
+    <IconDemo />
 
     <h2>{{ t('position') }}</h2>
     <Position />
@@ -34,7 +34,7 @@ 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 IconDemo from './icon.vue';
 import Position from './position.vue';
 import IconSize from './icon-size.vue';
 import Shape from './shape.vue';

packages/nutui-taro-demo/src/dentry/pages/rate/basic.vue

@@ -0,0 +1,7 @@
+<template>
+  <nut-rate v-model="value" />
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const value = ref(3);
+</script>

packages/nutui-taro-demo/src/dentry/pages/rate/color.vue

@@ -0,0 +1,7 @@
+<template>
+  <nut-rate v-model="value" active-color="skyblue" />
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const value = ref(3);
+</script>

packages/nutui-taro-demo/src/dentry/pages/rate/count.vue

@@ -0,0 +1,7 @@
+<template>
+  <nut-rate v-model="value" :count="10" />
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const value = ref(3);
+</script>

packages/nutui-taro-demo/src/dentry/pages/rate/disabled.vue

@@ -0,0 +1,7 @@
+<template>
+  <nut-rate v-model="value" disabled />
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const value = ref(3);
+</script>

packages/nutui-taro-demo/src/dentry/pages/rate/event.vue

@@ -0,0 +1,10 @@
+<template>
+  <nut-rate v-model="value" @change="onChange" />
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const value = ref(3);
+const onChange = (val: number) => {
+  console.log(val);
+};
+</script>

packages/nutui-taro-demo/src/dentry/pages/rate/half.vue

@@ -0,0 +1,7 @@
+<template>
+  <nut-rate v-model="value" allow-half />
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const value = ref(3.5);
+</script>

packages/nutui-taro-demo/src/dentry/pages/rate/icon.vue

@@ -0,0 +1,8 @@
+<template>
+  <nut-rate v-model="value" :custom-icon="HeartFill" />
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+import { HeartFill } from '@nutui/icons-vue-taro';
+const value = ref(3);
+</script>

packages/nutui-taro-demo/src/dentry/pages/rate/index.vue

@@ -1,54 +1,68 @@
 <template>
   <Demo>
-    <h2>基础用法</h2>
-    <nut-cell class="cell">
-      <nut-rate v-model="state.val" />
-    </nut-cell>
+    <h2>{{ t('basic') }}</h2>
+    <Basic />
 
-    <h2>半星</h2>
-    <nut-cell class="cell"><nut-rate v-model="state.val1" allow-half></nut-rate></nut-cell>
+    <h2>{{ t('half') }}</h2>
+    <Half />
 
-    <h2>自定义 icon </h2>
-    <nut-cell class="cell"><nut-rate v-model="state.val2" :custom-icon="HeartFill"></nut-rate></nut-cell>
+    <h2>{{ t('icon') }}</h2>
+    <IconDemo />
 
-    <h2>自定义数量</h2>
-    <nut-cell class="cell"><nut-rate v-model="state.val3" count="10"></nut-rate></nut-cell>
+    <h2>{{ t('count') }}</h2>
+    <Count />
 
-    <h2>自定义颜色</h2>
-    <nut-cell class="cell"><nut-rate v-model="state.val4" active-color="#FFC800"></nut-rate></nut-cell>
+    <h2>{{ t('color') }}</h2>
+    <Color />
 
-    <h2>禁用状态</h2>
-    <nut-cell class="cell"><nut-rate v-model="state.val5" disabled></nut-rate></nut-cell>
+    <h2>{{ t('disabled') }}</h2>
+    <Disabled />
 
-    <h2>只读状态</h2>
-    <nut-cell class="cell"><nut-rate v-model="state.val6" readonly></nut-rate></nut-cell>
+    <h2>{{ t('read') }}</h2>
+    <Read />
 
-    <h2>绑定事件</h2>
-    <nut-cell class="cell"><nut-rate v-model="state.val7" @change="onChange"></nut-rate></nut-cell>
+    <h2>{{ t('event') }}</h2>
+    <Event />
 
-    <h2>自定义尺寸 35px</h2>
-    <nut-cell class="cell"><nut-rate v-model="state.val8" size="35"></nut-rate></nut-cell>
+    <h2>{{ t('size') }}</h2>
+    <Size />
   </Demo>
 </template>
 
 <script setup lang="ts">
-import { reactive } from 'vue';
-import { HeartFill } from '@nutui/icons-vue-taro';
-
-const state = reactive({
-  val: 3,
-  val1: 3.5,
-  val2: 3,
-  val3: 3,
-  val4: 3,
-  val5: 3,
-  val6: 3,
-  val7: 3,
-  val8: 3
+import { useTranslate } from '../../../utils';
+import Basic from './basic.vue';
+import Half from './half.vue';
+import IconDemo from './icon.vue';
+import Count from './count.vue';
+import Color from './color.vue';
+import Disabled from './disabled.vue';
+import Read from './read.vue';
+import Event from './event.vue';
+import Size from './size.vue';
+
+const t = useTranslate({
+  'zh-CN': {
+    basic: '基础用法',
+    half: '半星',
+    icon: '自定义图标',
+    count: '自定义数量',
+    color: '自定义颜色',
+    disabled: '禁用状态',
+    read: '只读状态',
+    event: '绑定事件',
+    size: '自定义尺寸 35px'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    half: 'Half Star',
+    icon: 'Custom Icon',
+    count: 'Custom Count',
+    color: 'Custom Color',
+    disabled: 'Disabled',
+    read: 'Read Only',
+    event: 'event',
+    size: 'Custom size 35px'
+  }
 });
-const onChange = (val) => {
-  console.log(val);
-};
 </script>
-
-<style lang="scss" scoped></style>

packages/nutui-taro-demo/src/dentry/pages/rate/read.vue

@@ -0,0 +1,7 @@
+<template>
+  <nut-rate v-model="value" readonly />
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const value = ref(3);
+</script>

packages/nutui-taro-demo/src/dentry/pages/rate/size.vue

@@ -0,0 +1,7 @@
+<template>
+  <nut-rate v-model="value" size="35" />
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const value = ref(3);
+</script>

packages/nutui-taro-demo/src/layout/pages/divider/vertical.vue

@@ -2,7 +2,7 @@
   <div :style="{ fontSize: '14px', marginLeft: '27px', color: '#909ca4' }">
     text1
     <nut-divider direction="vertical" />
-    <a href="#" style="color: #1989fa"> link </a>
+    link
     <nut-divider direction="vertical" />
     text2
   </div>

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

@@ -0,0 +1,7 @@
+<template>
+  <nut-rate v-model="value" />
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const value = ref(3);
+</script>

src/packages/__VUE/rate/demo/color.vue

@@ -0,0 +1,7 @@
+<template>
+  <nut-rate v-model="value" active-color="skyblue" />
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const value = ref(3);
+</script>

src/packages/__VUE/rate/demo/count.vue

@@ -0,0 +1,7 @@
+<template>
+  <nut-rate v-model="value" :count="10" />
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const value = ref(3);
+</script>

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

@@ -0,0 +1,7 @@
+<template>
+  <nut-rate v-model="value" disabled />
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const value = ref(3);
+</script>

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

@@ -0,0 +1,10 @@
+<template>
+  <nut-rate v-model="value" @change="onChange" />
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const value = ref(3);
+const onChange = (val: number) => {
+  console.log(val);
+};
+</script>

src/packages/__VUE/rate/demo/half.vue

@@ -0,0 +1,7 @@
+<template>
+  <nut-rate v-model="value" allow-half />
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const value = ref(3.5);
+</script>

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

@@ -0,0 +1,8 @@
+<template>
+  <nut-rate v-model="value" :custom-icon="HeartFill" />
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+import { HeartFill } from '@nutui/icons-vue';
+const value = ref(3);
+</script>