From 160de2074e2b3a6bbfca12503c9673a982cb90f1 Mon Sep 17 00:00:00 2001
From: Eiinu <eiinu@qq.com>
Date: Fri, 15 Dec 2023 10:58:56 +0800
Subject: [PATCH] chore(indicator): split demo (#2741)

---
 .../src/nav/pages/indicator/basic.vue         |  7 ++
 .../src/nav/pages/indicator/block.vue         |  5 ++
 .../src/nav/pages/indicator/index.vue         | 56 ++++++-------
 .../src/nav/pages/indicator/zero.vue          |  3 +
 src/packages/__VUE/indicator/demo.vue         | 50 -----------
 src/packages/__VUE/indicator/demo/basic.vue   |  7 ++
 src/packages/__VUE/indicator/demo/block.vue   |  5 ++
 src/packages/__VUE/indicator/demo/index.vue   | 32 +++++++
 src/packages/__VUE/indicator/demo/zero.vue    |  3 +
 src/packages/__VUE/indicator/doc.en-US.md     | 84 +++++--------------
 src/packages/__VUE/indicator/doc.md           | 84 +++++--------------
 src/packages/__VUE/indicator/doc.taro.md      | 84 +++++--------------
 12 files changed, 147 insertions(+), 273 deletions(-)
 create mode 100644 packages/nutui-taro-demo/src/nav/pages/indicator/basic.vue
 create mode 100644 packages/nutui-taro-demo/src/nav/pages/indicator/block.vue
 create mode 100644 packages/nutui-taro-demo/src/nav/pages/indicator/zero.vue
 delete mode 100644 src/packages/__VUE/indicator/demo.vue
 create mode 100644 src/packages/__VUE/indicator/demo/basic.vue
 create mode 100644 src/packages/__VUE/indicator/demo/block.vue
 create mode 100644 src/packages/__VUE/indicator/demo/index.vue
 create mode 100644 src/packages/__VUE/indicator/demo/zero.vue

diff --git a/packages/nutui-taro-demo/src/nav/pages/indicator/basic.vue b/packages/nutui-taro-demo/src/nav/pages/indicator/basic.vue
new file mode 100644
index 0000000000..726eb50a33
--- /dev/null
+++ b/packages/nutui-taro-demo/src/nav/pages/indicator/basic.vue
@@ -0,0 +1,7 @@
+<template>
+  <nut-space :gutter="30">
+    <nut-indicator :size="5" :current="1" />
+    <nut-indicator :size="5" :current="3" />
+    <nut-indicator :size="5" :current="5" />
+  </nut-space>
+</template>
diff --git a/packages/nutui-taro-demo/src/nav/pages/indicator/block.vue b/packages/nutui-taro-demo/src/nav/pages/indicator/block.vue
new file mode 100644
index 0000000000..878cc29b00
--- /dev/null
+++ b/packages/nutui-taro-demo/src/nav/pages/indicator/block.vue
@@ -0,0 +1,5 @@
+<template>
+  <nut-indicator block align="left" :size="6" :current="5" />
+  <nut-indicator block algin="center" :size="6" :current="5" />
+  <nut-indicator block align="right" :size="6" :current="5" />
+</template>
diff --git a/packages/nutui-taro-demo/src/nav/pages/indicator/index.vue b/packages/nutui-taro-demo/src/nav/pages/indicator/index.vue
index 661099a1d8..578285347f 100644
--- a/packages/nutui-taro-demo/src/nav/pages/indicator/index.vue
+++ b/packages/nutui-taro-demo/src/nav/pages/indicator/index.vue
@@ -1,32 +1,32 @@
 <template>
   <Demo>
-    <h2>基础用法</h2>
-    <nut-cell>
-      <nut-indicator :size="3" :current="3">step1</nut-indicator>
-    </nut-cell>
-    <nut-cell>
-      <nut-row>
-        <nut-col :span="12">
-          <nut-button size="small" type="primary">主要按钮</nut-button>
-        </nut-col>
-        <nut-col :span="12">
-          <nut-indicator block align="right" :size="6" :current="5">step1</nut-indicator>
-        </nut-col>
-      </nut-row>
-    </nut-cell>
-    <h2>block用法</h2>
-    <nut-cell>
-      <nut-indicator block algin="center" :size="6" :current="5">step1</nut-indicator>
-    </nut-cell>
-    <nut-cell>
-      <nut-indicator block align="left" :size="6" :current="1">step1</nut-indicator>
-    </nut-cell>
-    <nut-cell>
-      <nut-indicator block align="right" :size="6" :current="5">step1</nut-indicator>
-    </nut-cell>
-    <h2>不补0</h2>
-    <nut-cell>
-      <nut-indicator :fill-zero="false" :size="6" :current="5">step1</nut-indicator>
-    </nut-cell>
+    <h2>{{ t('basic') }}</h2>
+    <Basic />
+
+    <h2>{{ t('block') }}</h2>
+    <Block />
+
+    <h2>{{ t('zero') }}</h2>
+    <Zero />
   </Demo>
 </template>
+
+<script setup lang="ts">
+import { useTranslate } from '../../../utils';
+import Basic from './basic.vue';
+import Block from './block.vue';
+import Zero from './zero.vue';
+
+const t = useTranslate({
+  'zh-CN': {
+    basic: '基础用法',
+    block: 'block 用法',
+    zero: '不补 0'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    block: 'Block',
+    zero: 'Do not make up 0'
+  }
+});
+</script>
diff --git a/packages/nutui-taro-demo/src/nav/pages/indicator/zero.vue b/packages/nutui-taro-demo/src/nav/pages/indicator/zero.vue
new file mode 100644
index 0000000000..3d24ff21e5
--- /dev/null
+++ b/packages/nutui-taro-demo/src/nav/pages/indicator/zero.vue
@@ -0,0 +1,3 @@
+<template>
+  <nut-indicator :fill-zero="false" :size="6" :current="5" />
+</template>
diff --git a/src/packages/__VUE/indicator/demo.vue b/src/packages/__VUE/indicator/demo.vue
deleted file mode 100644
index 96dcbcad5b..0000000000
--- a/src/packages/__VUE/indicator/demo.vue
+++ /dev/null
@@ -1,50 +0,0 @@
-<template>
-  <div class="demo">
-    <h2>{{ translate('basic') }}</h2>
-    <nut-cell>
-      <nut-indicator :size="3" :current="3">step1</nut-indicator>
-    </nut-cell>
-    <nut-cell>
-      <nut-row>
-        <nut-col :span="12">
-          <nut-button size="small" type="primary">{{ translate('button') }}</nut-button>
-        </nut-col>
-        <nut-col :span="12">
-          <nut-indicator block align="right" :size="6" :current="5">step1</nut-indicator>
-        </nut-col>
-      </nut-row>
-    </nut-cell>
-    <h2>{{ translate('title') }}</h2>
-    <nut-cell>
-      <nut-indicator block algin="center" :size="6" :current="5">step1</nut-indicator>
-    </nut-cell>
-    <nut-cell>
-      <nut-indicator block align="left" :size="6" :current="1">step1</nut-indicator>
-    </nut-cell>
-    <nut-cell>
-      <nut-indicator block align="right" :size="6" :current="5">step1</nut-indicator>
-    </nut-cell>
-    <h2>{{ translate('title2') }}</h2>
-    <nut-cell>
-      <nut-indicator :fill-zero="false" :size="6" :current="5">step1</nut-indicator>
-    </nut-cell>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useTranslate } from '@/sites/assets/util/useTranslate';
-const translate = useTranslate({
-  'zh-CN': {
-    basic: '基础用法',
-    button: '主要按钮',
-    title: 'block用法',
-    title2: '不补0'
-  },
-  'en-US': {
-    basic: 'Basic Usage',
-    button: 'Main Button',
-    title: 'Block usage',
-    title2: 'Do not make up 0'
-  }
-});
-</script>
diff --git a/src/packages/__VUE/indicator/demo/basic.vue b/src/packages/__VUE/indicator/demo/basic.vue
new file mode 100644
index 0000000000..726eb50a33
--- /dev/null
+++ b/src/packages/__VUE/indicator/demo/basic.vue
@@ -0,0 +1,7 @@
+<template>
+  <nut-space :gutter="30">
+    <nut-indicator :size="5" :current="1" />
+    <nut-indicator :size="5" :current="3" />
+    <nut-indicator :size="5" :current="5" />
+  </nut-space>
+</template>
diff --git a/src/packages/__VUE/indicator/demo/block.vue b/src/packages/__VUE/indicator/demo/block.vue
new file mode 100644
index 0000000000..878cc29b00
--- /dev/null
+++ b/src/packages/__VUE/indicator/demo/block.vue
@@ -0,0 +1,5 @@
+<template>
+  <nut-indicator block align="left" :size="6" :current="5" />
+  <nut-indicator block algin="center" :size="6" :current="5" />
+  <nut-indicator block align="right" :size="6" :current="5" />
+</template>
diff --git a/src/packages/__VUE/indicator/demo/index.vue b/src/packages/__VUE/indicator/demo/index.vue
new file mode 100644
index 0000000000..1cf0d0cedb
--- /dev/null
+++ b/src/packages/__VUE/indicator/demo/index.vue
@@ -0,0 +1,32 @@
+<template>
+  <Demo>
+    <h2>{{ t('basic') }}</h2>
+    <Basic />
+
+    <h2>{{ t('block') }}</h2>
+    <Block />
+
+    <h2>{{ t('zero') }}</h2>
+    <Zero />
+  </Demo>
+</template>
+
+<script setup lang="ts">
+import { useTranslate } from '@/sites/utils';
+import Basic from './basic.vue';
+import Block from './block.vue';
+import Zero from './zero.vue';
+
+const t = useTranslate({
+  'zh-CN': {
+    basic: '基础用法',
+    block: 'block 用法',
+    zero: '不补 0'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    block: 'Block',
+    zero: 'Do not make up 0'
+  }
+});
+</script>
diff --git a/src/packages/__VUE/indicator/demo/zero.vue b/src/packages/__VUE/indicator/demo/zero.vue
new file mode 100644
index 0000000000..3d24ff21e5
--- /dev/null
+++ b/src/packages/__VUE/indicator/demo/zero.vue
@@ -0,0 +1,3 @@
+<template>
+  <nut-indicator :fill-zero="false" :size="6" :current="5" />
+</template>
diff --git a/src/packages/__VUE/indicator/doc.en-US.md b/src/packages/__VUE/indicator/doc.en-US.md
index 7ca2448e66..4ce606382b 100644
--- a/src/packages/__VUE/indicator/doc.en-US.md
+++ b/src/packages/__VUE/indicator/doc.en-US.md
@@ -16,73 +16,27 @@ app.use(Indicator);
 
 ### Basic Usage
 
-:::demo
-
-```vue
-<template>
-  <nut-cell>
-    <nut-indicator :size="3" :current="3">step1</nut-indicator>
-  </nut-cell>
-  <nut-cell>
-    <nut-row>
-      <nut-col :span="12">
-        <nut-button size="small" type="primary">Main button</nut-button>
-      </nut-col>
-      <nut-col :span="12">
-        <nut-indicator block align="right" :size="6" :current="5">step1</nut-indicator>
-      </nut-col>
-    </nut-row>
-  </nut-cell>
-</template>
-```
-
-:::
+> demo: indicator basic
 
 ### Block usage
 
-:::demo
-
-```vue
-<template>
-  <nut-cell>
-    <nut-indicator block algin="center" :size="6" :current="5">step1</nut-indicator>
-  </nut-cell>
-  <nut-cell>
-    <nut-indicator block align="left" :size="6" :current="1">step1</nut-indicator>
-  </nut-cell>
-  <nut-cell>
-    <nut-indicator block align="right" :size="6" :current="5">step1</nut-indicator>
-  </nut-cell>
-</template>
-```
-
-:::
+> demo: indicator block
 
 ### Do not make up 0
 
-:::demo
-
-```vue
-<template>
-  <nut-cell>
-    <nut-indicator :fill-zero="false" :size="6" :current="5">step1</nut-indicator>
-  </nut-cell>
-</template>
-```
-
-:::
+> demo: indicator zero
 
 ## API
 
 ### Props
 
-| Attribute | Description                                                                                         | Type    | Default |
-| --------- | --------------------------------------------------------------------------------------------------- | ------- | ------- |
-| current   | Current step                                                                                        | number  | `1`     |
-| size      | Step length                                                                                         | number  | `3`     |
-| block     | Enable block level layout                                                                           | boolean | `false` |
-| align     | Alignment, which takes effect only when `block` is `true`. optional value `left`, `right`, `center` | string  | `left`  |
-| fill-zero | Whether to add 0 before singular number                                                             | boolean | `true`  |
+| Attribute | Description | Type | Default |
+| --- | --- | --- | --- |
+| current | Current step | number | `1` |
+| size | Step length | number | `3` |
+| block | Enable block level layout | boolean | `false` |
+| align | Alignment, which takes effect only when `block` is `true`. optional value `left`, `right`, `center` | string | `left` |
+| fill-zero | Whether to add 0 before singular number | boolean | `true` |
 
 ## Theming
 
@@ -90,12 +44,12 @@ app.use(Indicator);
 
 The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/component/configprovider).
 
-| Name                             | Default Value                         |
-| -------------------------------- | ------------------------------------- |
-| --nut-indicator-bg-color         | _var(--nut-primary-color)_            |
-| --nut-indicator-dot-color        | _var(--nut-disable-color)_            |
-| --nut-indicator-color            | _var(--nut-white)_                    |
-| --nut-indicator-size             | _18px_                                |
-| --nut-indicator-dot-size         | _calc(var(--nut-indicator-size) / 3)_ |
-| --nut-indicator-border-size      | _calc(var(--nut-indicator-size)+ 2)_  |
-| --nut-indicator-number-font-size | _10px_                                |
+| Name | Default Value |
+| --- | --- |
+| --nut-indicator-bg-color | _var(--nut-primary-color)_ |
+| --nut-indicator-dot-color | _var(--nut-disable-color)_ |
+| --nut-indicator-color | _var(--nut-white)_ |
+| --nut-indicator-size | _18px_ |
+| --nut-indicator-dot-size | _calc(var(--nut-indicator-size) / 3)_ |
+| --nut-indicator-border-size | _calc(var(--nut-indicator-size)+ 2)_ |
+| --nut-indicator-number-font-size | _10px_ |
diff --git a/src/packages/__VUE/indicator/doc.md b/src/packages/__VUE/indicator/doc.md
index 19a08f41c7..cc44bd17e7 100644
--- a/src/packages/__VUE/indicator/doc.md
+++ b/src/packages/__VUE/indicator/doc.md
@@ -16,73 +16,27 @@ app.use(Indicator);
 
 ### 基础用法
 
-:::demo
-
-```vue
-<template>
-  <nut-cell>
-    <nut-indicator :size="3" :current="3">step1</nut-indicator>
-  </nut-cell>
-  <nut-cell>
-    <nut-row>
-      <nut-col :span="12">
-        <nut-button size="small" type="primary">主要按钮</nut-button>
-      </nut-col>
-      <nut-col :span="12">
-        <nut-indicator block align="right" :size="6" :current="5">step1</nut-indicator>
-      </nut-col>
-    </nut-row>
-  </nut-cell>
-</template>
-```
-
-:::
+> demo: indicator basic
 
 ### block 用法
 
-:::demo
-
-```vue
-<template>
-  <nut-cell>
-    <nut-indicator block algin="center" :size="6" :current="5">step1</nut-indicator>
-  </nut-cell>
-  <nut-cell>
-    <nut-indicator block align="left" :size="6" :current="1">step1</nut-indicator>
-  </nut-cell>
-  <nut-cell>
-    <nut-indicator block align="right" :size="6" :current="5">step1</nut-indicator>
-  </nut-cell>
-</template>
-```
-
-:::
+> demo: indicator block
 
 ### 不补 0
 
-:::demo
-
-```vue
-<template>
-  <nut-cell>
-    <nut-indicator :fill-zero="false" :size="6" :current="5">step1</nut-indicator>
-  </nut-cell>
-</template>
-```
-
-:::
+> demo: indicator zero
 
 ## API
 
 ### Props
 
-| 参数      | 说明                                                                      | 类型    | 默认值  |
-| --------- | ------------------------------------------------------------------------- | ------- | ------- |
-| current   | 当前步骤                                                                  | number  | `1`     |
-| size      | 步骤长度                                                                  | number  | `3`     |
-| block     | 是否启用块级布局                                                          | boolean | `false` |
-| align     | 对齐方式，仅在 `block` 为 `true` 时生效, 可选值 `left`, `right`, `center` | string  | `left`  |
-| fill-zero | 单数前面是否补 0                                                          | boolean | `true`  |
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| current | 当前步骤 | number | `1` |
+| size | 步骤长度 | number | `3` |
+| block | 是否启用块级布局 | boolean | `false` |
+| align | 对齐方式，仅在 `block` 为 `true` 时生效, 可选值 `left`, `right`, `center` | string | `left` |
+| fill-zero | 单数前面是否补 0 | boolean | `true` |
 
 ## 主题定制
 
@@ -90,12 +44,12 @@ app.use(Indicator);
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
 
-| 名称                             | 默认值                                |
-| -------------------------------- | ------------------------------------- |
-| --nut-indicator-bg-color         | _var(--nut-primary-color)_            |
-| --nut-indicator-dot-color        | _var(--nut-disable-color)_            |
-| --nut-indicator-color            | _var(--nut-white)_                    |
-| --nut-indicator-size             | _18px_                                |
-| --nut-indicator-dot-size         | _calc(var(--nut-indicator-size) / 3)_ |
-| --nut-indicator-border-size      | _calc(var(--nut-indicator-size)+ 2)_  |
-| --nut-indicator-number-font-size | _10px_                                |
+| 名称 | 默认值 |
+| --- | --- |
+| --nut-indicator-bg-color | _var(--nut-primary-color)_ |
+| --nut-indicator-dot-color | _var(--nut-disable-color)_ |
+| --nut-indicator-color | _var(--nut-white)_ |
+| --nut-indicator-size | _18px_ |
+| --nut-indicator-dot-size | _calc(var(--nut-indicator-size) / 3)_ |
+| --nut-indicator-border-size | _calc(var(--nut-indicator-size)+ 2)_ |
+| --nut-indicator-number-font-size | _10px_ |
diff --git a/src/packages/__VUE/indicator/doc.taro.md b/src/packages/__VUE/indicator/doc.taro.md
index e0aa278483..45fe564e22 100644
--- a/src/packages/__VUE/indicator/doc.taro.md
+++ b/src/packages/__VUE/indicator/doc.taro.md
@@ -16,73 +16,27 @@ app.use(Indicator);
 
 ### 基础用法
 
-:::demo
-
-```vue
-<template>
-  <nut-cell>
-    <nut-indicator :size="3" :current="3">step1</nut-indicator>
-  </nut-cell>
-  <nut-cell>
-    <nut-row>
-      <nut-col :span="12">
-        <nut-button size="small" type="primary">主要按钮</nut-button>
-      </nut-col>
-      <nut-col :span="12">
-        <nut-indicator block align="right" :size="6" :current="5">step1</nut-indicator>
-      </nut-col>
-    </nut-row>
-  </nut-cell>
-</template>
-```
-
-:::
+> demo: indicator basic nav
 
 ### block 用法
 
-:::demo
-
-```vue
-<template>
-  <nut-cell>
-    <nut-indicator block algin="center" :size="6" :current="5">step1</nut-indicator>
-  </nut-cell>
-  <nut-cell>
-    <nut-indicator block align="left" :size="6" :current="1">step1</nut-indicator>
-  </nut-cell>
-  <nut-cell>
-    <nut-indicator block align="right" :size="6" :current="5">step1</nut-indicator>
-  </nut-cell>
-</template>
-```
-
-:::
+> demo: indicator block nav
 
 ### 不补 0
 
-:::demo
-
-```vue
-<template>
-  <nut-cell>
-    <nut-indicator :fill-zero="false" :size="6" :current="5">step1</nut-indicator>
-  </nut-cell>
-</template>
-```
-
-:::
+> demo: indicator zero nav
 
 ## API
 
 ### Props
 
-| 参数      | 说明                                                                      | 类型    | 默认值  |
-| --------- | ------------------------------------------------------------------------- | ------- | ------- |
-| current   | 当前步骤                                                                  | number  | `1`     |
-| size      | 步骤长度                                                                  | number  | `3`     |
-| block     | 是否启用块级布局                                                          | boolean | `false` |
-| align     | 对齐方式，仅在 `block` 为 `true` 时生效, 可选值 `left`, `right`, `center` | string  | `left`  |
-| fill-zero | 单数前面是否补 0                                                          | boolean | `true`  |
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| current | 当前步骤 | number | `1` |
+| size | 步骤长度 | number | `3` |
+| block | 是否启用块级布局 | boolean | `false` |
+| align | 对齐方式，仅在 `block` 为 `true` 时生效, 可选值 `left`, `right`, `center` | string | `left` |
+| fill-zero | 单数前面是否补 0 | boolean | `true` |
 
 ## 主题定制
 
@@ -90,12 +44,12 @@ app.use(Indicator);
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
 
-| 名称                             | 默认值                                |
-| -------------------------------- | ------------------------------------- |
-| --nut-indicator-bg-color         | _var(--nut-primary-color)_            |
-| --nut-indicator-dot-color        | _var(--nut-disable-color)_            |
-| --nut-indicator-color            | _var(--nut-white)_                    |
-| --nut-indicator-size             | _18px_                                |
-| --nut-indicator-dot-size         | _calc(var(--nut-indicator-size) / 3)_ |
-| --nut-indicator-border-size      | _calc(var(--nut-indicator-size)+ 2)_  |
-| --nut-indicator-number-font-size | _10px_                                |
+| 名称 | 默认值 |
+| --- | --- |
+| --nut-indicator-bg-color | _var(--nut-primary-color)_ |
+| --nut-indicator-dot-color | _var(--nut-disable-color)_ |
+| --nut-indicator-color | _var(--nut-white)_ |
+| --nut-indicator-size | _18px_ |
+| --nut-indicator-dot-size | _calc(var(--nut-indicator-size) / 3)_ |
+| --nut-indicator-border-size | _calc(var(--nut-indicator-size)+ 2)_ |
+| --nut-indicator-number-font-size | _10px_ |