chore(ellipsis): split demo (#2847)

packages/nutui-taro-demo/src/exhibition/pages/ellipsis/end.vue

@@ -0,0 +1,11 @@
+<template>
+  <nut-cell>
+    <nut-ellipsis direction="end" :content="content"></nut-ellipsis>
+  </nut-cell>
+</template>
+<script setup>
+import { ref } from 'vue';
+const content = ref(
+  'NutUI3.0上线后我们研发团队也在不断的优化、测试、使用、迭代 Vue3 的相关组件，但是在跨端小程序的开发过程中，发现没有合适的组件库可以支持多端开发。为了填补这一空白，同时为了优化开发者体验，让 NutUI 能够为更多的开发者带来便利，我们决定在 NutUI 中增加小程序多端适配的能力。'
+);
+</script>

packages/nutui-taro-demo/src/exhibition/pages/ellipsis/expand.vue

@@ -0,0 +1,18 @@
+<template>
+  <nut-cell>
+    <nut-ellipsis :content="content" direction="start" expand-text="展开" collapse-text="收起"></nut-ellipsis>
+  </nut-cell>
+  <nut-cell>
+    <nut-ellipsis :content="content" direction="middle" expand-text="展开" collapse-text="收起"></nut-ellipsis>
+  </nut-cell>
+  <nut-cell>
+    <nut-ellipsis :content="content" direction="end" rows="3" expand-text="展开" collapse-text="收起"></nut-ellipsis>
+  </nut-cell>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+const content = ref(
+  'NutUI3.0上线后我们研发团队也在不断的优化、测试、使用、迭代 Vue3 的相关组件，但是在跨端小程序的开发过程中，发现没有合适的组件库可以支持多端开发。为了填补这一空白，同时为了优化开发者体验，让 NutUI 能够为更多的开发者带来便利，我们决定在 NutUI 中增加小程序多端适配的能力。'
+);
+</script>

packages/nutui-taro-demo/src/exhibition/pages/ellipsis/index.vue

@@ -1,40 +1,43 @@
 <template>
   <Demo>
-    <h2>头部省略</h2>
-    <nut-cell>
-      <nut-ellipsis :content="content" direction="start" class="elli"></nut-ellipsis>
-    </nut-cell>
+    <h2>{{ t('start') }}</h2>
+    <Start />
 
-    <h2>尾部省略</h2>
-    <nut-cell>
-      <nut-ellipsis :content="content" direction="end" class="elli"></nut-ellipsis>
-    </nut-cell>
+    <h2>{{ t('end') }}</h2>
+    <End />
 
-    <h2>中间省略</h2>
-    <nut-cell>
-      <nut-ellipsis :content="content" direction="middle" class="elli"></nut-ellipsis>
-    </nut-cell>
+    <h2>{{ t('middle') }}</h2>
+    <Middle />
 
-    <h2>多行省略</h2>
-    <nut-cell>
-      <nut-ellipsis :content="content" direction="start" rows="3"></nut-ellipsis>
-    </nut-cell>
+    <h2>{{ t('row') }}</h2>
+    <Row />
 
-    <h2>展开收起</h2>
-    <nut-cell>
-      <nut-ellipsis :content="content" direction="start" expand-text="展开" collapse-text="收起"></nut-ellipsis>
-    </nut-cell>
-    <nut-cell>
-      <nut-ellipsis :content="content" direction="middle" expand-text="展开" collapse-text="收起"></nut-ellipsis>
-    </nut-cell>
-    <nut-cell>
-      <nut-ellipsis :content="content" direction="end" rows="3" expand-text="展开" collapse-text="收起"></nut-ellipsis>
-    </nut-cell>
+    <h2>{{ t('expand') }}</h2>
+    <Expand />
   </Demo>
 </template>
 <script setup lang="ts">
-import { ref } from 'vue';
-const content = ref(
-  'NutUI3.0上线后我们研发团队也在不断的优化、测试、使用、迭代 Vue3 的相关组件，但是在跨端小程序的开发过程中，发现没有合适的组件库可以支持多端开发。为了填补这一空白，同时为了优化开发者体验，让 NutUI 能够为更多的开发者带来便利，我们决定在 NutUI 中增加小程序多端适配的能力。'
-);
+import { useTranslate } from '../../../utils';
+import Start from './start.vue';
+import End from './end.vue';
+import Middle from './middle.vue';
+import Row from './row.vue';
+import Expand from './expand.vue';
+
+const t = useTranslate({
+  'zh-CN': {
+    start: '头部省略',
+    end: '尾部省略',
+    middle: '中间省略',
+    row: '多行省略',
+    expand: '展开收起'
+  },
+  'en-US': {
+    start: 'Start',
+    end: 'End',
+    middle: 'Middle',
+    row: 'Multi-line',
+    expand: 'Expand & Collapse'
+  }
+});
 </script>

packages/nutui-taro-demo/src/exhibition/pages/ellipsis/middle.vue

@@ -0,0 +1,11 @@
+<template>
+  <nut-cell>
+    <nut-ellipsis direction="middle" :content="content"></nut-ellipsis>
+  </nut-cell>
+</template>
+<script setup>
+import { ref } from 'vue';
+const content = ref(
+  'NutUI3.0上线后我们研发团队也在不断的优化、测试、使用、迭代 Vue3 的相关组件，但是在跨端小程序的开发过程中，发现没有合适的组件库可以支持多端开发。为了填补这一空白，同时为了优化开发者体验，让 NutUI 能够为更多的开发者带来便利，我们决定在 NutUI 中增加小程序多端适配的能力。'
+);
+</script>

packages/nutui-taro-demo/src/exhibition/pages/ellipsis/row.vue

@@ -0,0 +1,11 @@
+<template>
+  <nut-cell>
+    <nut-ellipsis direction="start" :content="content" :rows="3"></nut-ellipsis>
+  </nut-cell>
+</template>
+<script setup>
+import { ref } from 'vue';
+const content = ref(
+  'NutUI3.0上线后我们研发团队也在不断的优化、测试、使用、迭代 Vue3 的相关组件，但是在跨端小程序的开发过程中，发现没有合适的组件库可以支持多端开发。为了填补这一空白，同时为了优化开发者体验，让 NutUI 能够为更多的开发者带来便利，我们决定在 NutUI 中增加小程序多端适配的能力。'
+);
+</script>

packages/nutui-taro-demo/src/exhibition/pages/ellipsis/start.vue

@@ -0,0 +1,11 @@
+<template>
+  <nut-cell>
+    <nut-ellipsis direction="start" :content="content"></nut-ellipsis>
+  </nut-cell>
+</template>
+<script setup>
+import { ref } from 'vue';
+const content = ref(
+  'NutUI3.0上线后我们研发团队也在不断的优化、测试、使用、迭代 Vue3 的相关组件，但是在跨端小程序的开发过程中，发现没有合适的组件库可以支持多端开发。为了填补这一空白，同时为了优化开发者体验，让 NutUI 能够为更多的开发者带来便利，我们决定在 NutUI 中增加小程序多端适配的能力。'
+);
+</script>

src/packages/__VUE/ellipsis/demo/end.vue

@@ -0,0 +1,11 @@
+<template>
+  <nut-cell>
+    <nut-ellipsis direction="end" :content="content"></nut-ellipsis>
+  </nut-cell>
+</template>
+<script setup>
+import { ref } from 'vue';
+const content = ref(
+  'NutUI3.0上线后我们研发团队也在不断的优化、测试、使用、迭代 Vue3 的相关组件，但是在跨端小程序的开发过程中，发现没有合适的组件库可以支持多端开发。为了填补这一空白，同时为了优化开发者体验，让 NutUI 能够为更多的开发者带来便利，我们决定在 NutUI 中增加小程序多端适配的能力。'
+);
+</script>

src/packages/__VUE/ellipsis/demo/expand.vue

@@ -0,0 +1,18 @@
+<template>
+  <nut-cell>
+    <nut-ellipsis :content="content" direction="start" expand-text="展开" collapse-text="收起"></nut-ellipsis>
+  </nut-cell>
+  <nut-cell>
+    <nut-ellipsis :content="content" direction="middle" expand-text="展开" collapse-text="收起"></nut-ellipsis>
+  </nut-cell>
+  <nut-cell>
+    <nut-ellipsis :content="content" direction="end" rows="3" expand-text="展开" collapse-text="收起"></nut-ellipsis>
+  </nut-cell>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+const content = ref(
+  'NutUI3.0上线后我们研发团队也在不断的优化、测试、使用、迭代 Vue3 的相关组件，但是在跨端小程序的开发过程中，发现没有合适的组件库可以支持多端开发。为了填补这一空白，同时为了优化开发者体验，让 NutUI 能够为更多的开发者带来便利，我们决定在 NutUI 中增加小程序多端适配的能力。'
+);
+</script>

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

@@ -0,0 +1,43 @@
+<template>
+  <Demo>
+    <h2>{{ t('start') }}</h2>
+    <Start />
+
+    <h2>{{ t('end') }}</h2>
+    <End />
+
+    <h2>{{ t('middle') }}</h2>
+    <Middle />
+
+    <h2>{{ t('row') }}</h2>
+    <Row />
+
+    <h2>{{ t('expand') }}</h2>
+    <Expand />
+  </Demo>
+</template>
+<script setup lang="ts">
+import { useTranslate } from '@/sites/utils';
+import Start from './start.vue';
+import End from './end.vue';
+import Middle from './middle.vue';
+import Row from './row.vue';
+import Expand from './expand.vue';
+
+const t = useTranslate({
+  'zh-CN': {
+    start: '头部省略',
+    end: '尾部省略',
+    middle: '中间省略',
+    row: '多行省略',
+    expand: '展开收起'
+  },
+  'en-US': {
+    start: 'Start',
+    end: 'End',
+    middle: 'Middle',
+    row: 'Multi-line',
+    expand: 'Expand & Collapse'
+  }
+});
+</script>

src/packages/__VUE/ellipsis/demo/middle.vue

@@ -0,0 +1,11 @@
+<template>
+  <nut-cell>
+    <nut-ellipsis direction="middle" :content="content"></nut-ellipsis>
+  </nut-cell>
+</template>
+<script setup>
+import { ref } from 'vue';
+const content = ref(
+  'NutUI3.0上线后我们研发团队也在不断的优化、测试、使用、迭代 Vue3 的相关组件，但是在跨端小程序的开发过程中，发现没有合适的组件库可以支持多端开发。为了填补这一空白，同时为了优化开发者体验，让 NutUI 能够为更多的开发者带来便利，我们决定在 NutUI 中增加小程序多端适配的能力。'
+);
+</script>

src/packages/__VUE/ellipsis/demo/row.vue

@@ -0,0 +1,11 @@
+<template>
+  <nut-cell>
+    <nut-ellipsis direction="start" :content="content" :rows="3"></nut-ellipsis>
+  </nut-cell>
+</template>
+<script setup>
+import { ref } from 'vue';
+const content = ref(
+  'NutUI3.0上线后我们研发团队也在不断的优化、测试、使用、迭代 Vue3 的相关组件，但是在跨端小程序的开发过程中，发现没有合适的组件库可以支持多端开发。为了填补这一空白，同时为了优化开发者体验，让 NutUI 能够为更多的开发者带来便利，我们决定在 NutUI 中增加小程序多端适配的能力。'
+);
+</script>

src/packages/__VUE/ellipsis/demo/start.vue

@@ -0,0 +1,11 @@
+<template>
+  <nut-cell>
+    <nut-ellipsis direction="start" :content="content"></nut-ellipsis>
+  </nut-cell>
+</template>
+<script setup>
+import { ref } from 'vue';
+const content = ref(
+  'NutUI3.0上线后我们研发团队也在不断的优化、测试、使用、迭代 Vue3 的相关组件，但是在跨端小程序的开发过程中，发现没有合适的组件库可以支持多端开发。为了填补这一空白，同时为了优化开发者体验，让 NutUI 能够为更多的开发者带来便利，我们决定在 NutUI 中增加小程序多端适配的能力。'
+);
+</script>