chore(textarea): split demo (#2856)

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

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

packages/nutui-taro-demo/src/dentry/pages/textarea/focus.vue

@@ -0,0 +1,7 @@
+<template>
+  <nut-textarea v-model="val" autofocus />
+</template>
+<script setup>
+import { ref } from 'vue';
+const val = ref('');
+</script>

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

@@ -1,20 +1,44 @@
 <template>
   <Demo class="full">
-    <h2>基础用法</h2>
-    <nut-textarea v-model="value" />
-    <h2>显示字数统计</h2>
-    <nut-textarea v-model="value2" limit-show max-length="20" />
-    <h2>高度自定义，拉伸</h2>
-    <nut-textarea v-model="value3" autosize />
-    <h2>只读、禁用</h2>
-    <nut-textarea readonly model-value="textarea 只读状态" />
-    <nut-textarea disabled model-value="textarea 禁用状态" />
+    <h2>{{ t('basic') }}</h2>
+    <Basic />
+
+    <h2>{{ t('limit') }}</h2>
+    <Limit />
+
+    <h2>{{ t('row') }}</h2>
+    <Row />
+
+    <h2>{{ t('status') }}</h2>
+    <Status />
+
+    <h2>{{ t('focus') }}</h2>
+    <Focus />
   </Demo>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
-const value = ref('');
-const value2 = ref('');
-const value3 = ref('');
+import { useTranslate } from '../../../utils';
+import Basic from './basic.vue';
+import Limit from './limit.vue';
+import Row from './row.vue';
+import Status from './status.vue';
+import Focus from './focus.vue';
+
+const t = useTranslate({
+  'zh-CN': {
+    basic: '基础用法',
+    limit: '显示字数统计',
+    row: '高度自动拉伸',
+    status: '只读、禁用',
+    focus: '自动获取焦点'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    limit: 'Display word count',
+    row: 'Height customization, stretching',
+    status: 'Readonly & Disabled',
+    focus: 'Autofocus'
+  }
+});
 </script>

packages/nutui-taro-demo/src/dentry/pages/textarea/limit.vue

@@ -0,0 +1,7 @@
+<template>
+  <nut-textarea v-model="val" limit-show :max-length="20" />
+</template>
+<script setup>
+import { ref } from 'vue';
+const val = ref('');
+</script>

packages/nutui-taro-demo/src/dentry/pages/textarea/row.vue

@@ -0,0 +1,7 @@
+<template>
+  <nut-textarea v-model="val" autosize />
+</template>
+<script setup>
+import { ref } from 'vue';
+const val = ref('');
+</script>

packages/nutui-taro-demo/src/dentry/pages/textarea/status.vue

@@ -0,0 +1,4 @@
+<template>
+  <nut-textarea readonly model-value="Textarea Readonly" />
+  <nut-textarea disabled model-value="Textarea Disabled" />
+</template>

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

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

src/packages/__VUE/textarea/demo/focus.vue

@@ -0,0 +1,7 @@
+<template>
+  <nut-textarea v-model="val" autofocus />
+</template>
+<script setup>
+import { ref } from 'vue';
+const val = ref('');
+</script>

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

@@ -0,0 +1,44 @@
+<template>
+  <Demo class="full">
+    <h2>{{ t('basic') }}</h2>
+    <Basic />
+
+    <h2>{{ t('limit') }}</h2>
+    <Limit />
+
+    <h2>{{ t('row') }}</h2>
+    <Row />
+
+    <h2>{{ t('status') }}</h2>
+    <Status />
+
+    <h2>{{ t('focus') }}</h2>
+    <Focus />
+  </Demo>
+</template>
+
+<script setup lang="ts">
+import { useTranslate } from '@/sites/utils';
+import Basic from './basic.vue';
+import Limit from './limit.vue';
+import Row from './row.vue';
+import Status from './status.vue';
+import Focus from './focus.vue';
+
+const t = useTranslate({
+  'zh-CN': {
+    basic: '基础用法',
+    limit: '显示字数统计',
+    row: '高度自定义，拉伸',
+    status: '只读、禁用',
+    focus: '自动获取焦点'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    limit: 'Display word count',
+    row: 'Height customization, stretching',
+    status: 'Readonly & Disabled',
+    focus: 'Autofocus'
+  }
+});
+</script>

src/packages/__VUE/textarea/demo/limit.vue

@@ -0,0 +1,7 @@
+<template>
+  <nut-textarea v-model="val" limit-show :max-length="20" />
+</template>
+<script setup>
+import { ref } from 'vue';
+const val = ref('');
+</script>

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

@@ -0,0 +1,7 @@
+<template>
+  <nut-textarea v-model="val" :rows="3" autosize />
+</template>
+<script setup>
+import { ref } from 'vue';
+const val = ref('');
+</script>

src/packages/__VUE/textarea/demo/status.vue

@@ -0,0 +1,4 @@
+<template>
+  <nut-textarea readonly model-value="Textarea Readonly" />
+  <nut-textarea disabled model-value="Textarea Disabled" />
+</template>

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

@@ -14,66 +14,25 @@ const app = createApp();
 app.use(Textarea);
 ```
 
-### Basic usage
-
-:::demo
-
-```vue
-<template>
-  <nut-textarea v-model="value" />
-</template>
-<script setup>
-import { ref } from 'vue';
-const value = ref('');
-</script>
-```
+### Basic Usage
 
-:::
+> demo: textarea basic
 
 ### Display word count
 
-:::demo
-
-```vue
-<template>
-  <nut-textarea v-model="value" limit-show max-length="20" />
-</template>
-<script setup>
-import { ref } from 'vue';
-const value = ref('');
-</script>
-```
-
-:::
+> demo: textarea limit
 
 ### Height customization, stretching
 
-:::demo
-
-```vue
-<template>
-  <nut-textarea v-model="value" :rows="1" autosize />
-</template>
-<script setup>
-import { ref } from 'vue';
-const value = ref('');
-</script>
-```
-
-:::
+> demo: textarea row
 
 ### read-only，disabled
 
-:::demo
+> demo: textarea status
 
-```vue
-<template>
-  <nut-textarea readonly model-value="Textarea read only status" />
-  <nut-textarea disabled model-value="Textarea disabled" />
-</template>
-```
+### Autofocus
 
-:::
+> demo: textarea focus
 
 ## API
 

src/packages/__VUE/textarea/doc.md

@@ -16,64 +16,23 @@ app.use(Textarea);
 
 ### 基础用法
 
-:::demo
-
-```vue
-<template>
-  <nut-textarea v-model="value" />
-</template>
-<script setup>
-import { ref } from 'vue';
-const value = ref('');
-</script>
-```
-
-:::
+> demo: textarea basic
 
 ### 显示字数统计
 
-:::demo
-
-```vue
-<template>
-  <nut-textarea v-model="value" limit-show max-length="20" />
-</template>
-<script setup>
-import { ref } from 'vue';
-const value = ref('');
-</script>
-```
-
-:::
+> demo: textarea limit
 
 ### 高度自定义，拉伸
 
-:::demo
-
-```vue
-<template>
-  <nut-textarea v-model="value" :rows="1" autosize />
-</template>
-<script setup>
-import { ref } from 'vue';
-const value = ref('');
-</script>
-```
-
-:::
+> demo: textarea row
 
 ### 只读、禁用
 
-:::demo
+> demo: textarea status
 
-```vue
-<template>
-  <nut-textarea readonly model-value="textarea 只读状态" />
-  <nut-textarea disabled model-value="textarea 禁用状态" />
-</template>
-```
+### 自动获取焦点
 
-:::
+> demo: textarea focus
 
 ## API
 
@@ -82,7 +41,7 @@ const value = ref('');
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
 | v-model | 输入值，支持双向绑定 | string | - |
-| placeholder | 设置占位提示文字 | string | `'请输入'` |
+| placeholder | 设置占位提示文字 | string | `请输入` |
 | max-length | 限制最长输入字符 | string \| number | - |
 | rows | textarea 的高度，优先级高于 autosize 属性 `仅支持 H5` | string \| number | `2` |
 | limit-show | textarea 是否展示输入字符。须配合`max-length`使用 | boolean | `false` |