chore(pagination): split demo (#2765)

packages/nutui-taro-demo/src/nav/pages/pagination/basic.vue

@@ -0,0 +1,10 @@
+<template>
+  <nut-pagination v-model="page" :total-items="25" :items-per-page="5" @change="change" />
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const page = ref(1);
+const change = (value: number) => {
+  console.log(value);
+};
+</script>

packages/nutui-taro-demo/src/nav/pages/pagination/custom.vue

@@ -0,0 +1,16 @@
+<template>
+  <nut-pagination v-model="page" :total-items="500" :show-page-size="5">
+    <template #prev-text>
+      <Left width="10px" height="10px" />
+    </template>
+    <template #next-text>
+      <Right width="10px" height="10px" />
+    </template>
+    <template #page="{ item }"> {{ item.number == 3 ? 'hot' : item.text }} </template>
+  </nut-pagination>
+</template>
+<script setup lang="ts">
+import { Left, Right } from '@nutui/icons-vue';
+import { ref } from 'vue';
+const page = ref(1);
+</script>

packages/nutui-taro-demo/src/nav/pages/pagination/ellipse.vue

@@ -0,0 +1,7 @@
+<template>
+  <nut-pagination v-model="page" :total-items="125" :show-page-size="3" force-ellipses />
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const page = ref(1);
+</script>

packages/nutui-taro-demo/src/nav/pages/pagination/index.vue

@@ -1,34 +1,38 @@
 <template>
   <Demo>
-    <h2>基础用法</h2>
-    <nut-pagination v-model="currentPage" :total-items="25" :items-per-page="5" @change="pageChange" />
-    <h2>简单模式</h2>
-    <nut-pagination v-model="currentPage1" :page-count="12" mode="simple" @change="pageChange" />
-    <h2>显示省略号</h2>
-    <nut-pagination v-model="currentPage2" :total-items="125" :show-page-size="3" force-ellipses @change="pageChange" />
-    <h2>自定义按钮</h2>
-    <nut-pagination v-model="currentPage3" :total-items="500" :show-page-size="5" @change="pageChange">
-      <template #prev-text>
-        <Left size="10px" />
-      </template>
-      <template #next-text>
-        <Right size="10px" />
-      </template>
-      <template #page="{ item }">
-        {{ item.number == 3 ? 'hot' : item.text }}
-      </template>
-    </nut-pagination>
+    <h2>{{ t('basic') }}</h2>
+    <Basic />
+
+    <h2>{{ t('simple') }}</h2>
+    <Simple />
+
+    <h2>{{ t('ellipse') }}</h2>
+    <Ellipse />
+
+    <h2>{{ t('custom') }}</h2>
+    <Custom />
   </Demo>
 </template>
 
 <script setup lang="ts">
-import { Left, Right } from '@nutui/icons-vue-taro';
-import { ref } from 'vue';
-const currentPage = ref(1);
-const currentPage1 = ref(1);
-const currentPage2 = ref(1);
-const currentPage3 = ref(1);
-const pageChange = (value: number) => {
-  console.log(value);
-};
+import { useTranslate } from '../../../utils';
+import Basic from './basic.vue';
+import Simple from './simple.vue';
+import Ellipse from './ellipse.vue';
+import Custom from './custom.vue';
+
+const t = useTranslate({
+  'zh-CN': {
+    basic: '基础用法',
+    simple: '简单模式',
+    ellipse: '显示省略号',
+    custom: '自定义按钮'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    simple: 'Simple Mode',
+    ellipse: 'Show ellipses',
+    custom: 'Custom Button'
+  }
+});
 </script>

packages/nutui-taro-demo/src/nav/pages/pagination/simple.vue

@@ -0,0 +1,10 @@
+<template>
+  <nut-pagination v-model="page" :page-count="12" mode="simple" @change="change" />
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const page = ref(1);
+const change = (value: number) => {
+  console.log(value);
+};
+</script>

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

@@ -0,0 +1,10 @@
+<template>
+  <nut-pagination v-model="page" :total-items="25" :items-per-page="5" @change="change" />
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const page = ref(1);
+const change = (value: number) => {
+  console.log(value);
+};
+</script>

src/packages/__VUE/pagination/demo/custom.vue

@@ -0,0 +1,16 @@
+<template>
+  <nut-pagination v-model="page" :total-items="500" :show-page-size="5">
+    <template #prev-text>
+      <Left width="10px" height="10px" />
+    </template>
+    <template #next-text>
+      <Right width="10px" height="10px" />
+    </template>
+    <template #page="{ item }"> {{ item.number == 3 ? 'hot' : item.text }} </template>
+  </nut-pagination>
+</template>
+<script setup lang="ts">
+import { Left, Right } from '@nutui/icons-vue';
+import { ref } from 'vue';
+const page = ref(1);
+</script>

src/packages/__VUE/pagination/demo/ellipse.vue

@@ -0,0 +1,7 @@
+<template>
+  <nut-pagination v-model="page" :total-items="125" :show-page-size="3" force-ellipses />
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const page = ref(1);
+</script>

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

@@ -0,0 +1,38 @@
+<template>
+  <Demo>
+    <h2>{{ t('basic') }}</h2>
+    <Basic />
+
+    <h2>{{ t('simple') }}</h2>
+    <Simple />
+
+    <h2>{{ t('ellipse') }}</h2>
+    <Ellipse />
+
+    <h2>{{ t('custom') }}</h2>
+    <Custom />
+  </Demo>
+</template>
+
+<script setup lang="ts">
+import { useTranslate } from '@/sites/utils';
+import Basic from './basic.vue';
+import Simple from './simple.vue';
+import Ellipse from './ellipse.vue';
+import Custom from './custom.vue';
+
+const t = useTranslate({
+  'zh-CN': {
+    basic: '基础用法',
+    simple: '简单模式',
+    ellipse: '显示省略号',
+    custom: '自定义按钮'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    simple: 'Simple Mode',
+    ellipse: 'Show ellipses',
+    custom: 'Custom Button'
+  }
+});
+</script>

src/packages/__VUE/pagination/demo/simple.vue

@@ -0,0 +1,10 @@
+<template>
+  <nut-pagination v-model="page" :page-count="12" mode="simple" @change="change" />
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const page = ref(1);
+const change = (value: number) => {
+  console.log(value);
+};
+</script>

src/packages/__VUE/pagination/doc.en-US.md

@@ -17,91 +17,24 @@ app.use(Pagination);
 ### Basic Usage
 
 Bind current page with v-model.
-:::demo
-
-```vue
-<template>
-  <nut-pagination v-model="page" :total-items="25" :items-per-page="5" @change="pageChange" />
-</template>
-<script setup>
-import { ref } from 'vue';
-const page = ref(1);
-const pageChange = (value) => {
-  console.log(value);
-};
-</script>
-```
 
-:::
+> demo: pagination basic
 
 ### Simple mode
 
 Pagination can be switched to simple mode with simple mode attribute, and pagination cann't display specific page buttons.
-:::demo
-
-```vue
-<template>
-  <nut-pagination v-model="page" :page-count="12" mode="simple" @change="pageChange" />
-</template>
-<script setup>
-import { ref } from 'vue';
-const page = ref(1);
-const pageChange = (value) => {
-  console.log(value);
-};
-</script>
-```
 
-:::
+> demo: pagination simple
 
 ### Show ellipses
 
 The ellipses button will display after with force-ellipses attribute, click it can jump quickly.
-:::demo
-
-```vue
-<template>
-  <nut-pagination v-model="page" :total-items="125" :show-page-size="3" @change="pageChange" force-ellipses />
-</template>
-<script setup>
-import { ref } from 'vue';
-const page = ref(1);
-const pageChange = (value) => {
-  console.log(value);
-};
-</script>
-```
 
-:::
+> demo: pagination ellipse
 
 ### Custom Button
 
-Custom pagination button content with pre-text slot、next-text slot and so on.
-:::demo
-
-```vue
-<template>
-  <nut-pagination v-model="page" :total-items="500" @change="pageChange" :show-page-size="5">
-    <template #prev-text>
-      <Left width="10px" height="10px" />
-    </template>
-    <template #next-text>
-      <Right width="10px" height="10px" />
-    </template>
-    <template #page="{ item }"> {{ item.number == 3 ? 'hot' : item.text }} </template>
-  </nut-pagination>
-</template>
-<script setup>
-import { Left, Right } from '@nutui/icons-vue';
-import { ref } from 'vue';
-const page = ref(1);
-const pageChange = (value) => {
-  console.log(value);
-};
-</script>
-```
-
-:::
+> demo: pagination custom
 
 ## API