chore(input): split demo (#2850)

packages/nutui-taro-demo/src/dentry/pages/input/align.vue

@@ -0,0 +1,11 @@
+<template>
+  <nut-input v-model="val1" input-align="left" />
+  <nut-input v-model="val2" input-align="center" />
+  <nut-input v-model="val3" input-align="right" />
+</template>
+<script setup>
+import { ref } from 'vue';
+const val1 = ref('Left');
+const val2 = ref('Center');
+const val3 = ref('Right');
+</script>

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

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

packages/nutui-taro-demo/src/dentry/pages/input/border.vue

@@ -0,0 +1,9 @@
+<template>
+  <nut-input v-model="val1" :border="false" />
+  <nut-input v-model="val2" :border="false" />
+</template>
+<script setup>
+import { ref } from 'vue';
+const val1 = ref('12345');
+const val2 = ref('12345');
+</script>

packages/nutui-taro-demo/src/dentry/pages/input/clear.vue

@@ -0,0 +1,17 @@
+<template>
+  <nut-input v-model="val1" placeholder="Clearable" clearable />
+  <nut-input v-model="val2" placeholder="Clear Slot" clearable show-clear-icon>
+    <template #clear>
+      <Close size="12" @click="onClick"></Close>
+    </template>
+  </nut-input>
+</template>
+<script setup>
+import { ref } from 'vue';
+import { Close } from '@nutui/icons-vue-taro';
+const val1 = ref('');
+const val2 = ref('');
+const onClick = () => {
+  val2.value = '';
+};
+</script>

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

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

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

@@ -0,0 +1,13 @@
+<template>
+  <nut-input v-model="val" clearable placeholder="Event" @clear="clear" @click-input="click" />
+</template>
+<script setup>
+import { ref } from 'vue';
+const val = ref('');
+const clear = () => {
+  console.log('clear');
+};
+const click = () => {
+  console.log('click-input');
+};
+</script>

packages/nutui-taro-demo/src/dentry/pages/input/form.vue

@@ -0,0 +1,11 @@
+<template>
+  <nut-form>
+    <nut-form-item label="Label" label-align="center">
+      <nut-input v-model="val" />
+    </nut-form-item>
+  </nut-form>
+</template>
+<script setup>
+import { ref } from 'vue';
+const val = ref('');
+</script>

packages/nutui-taro-demo/src/dentry/pages/input/format.vue

@@ -0,0 +1,10 @@
+<template>
+  <nut-input v-model="val1" placeholder="Format on Change" :formatter="formatter" format-trigger="onChange" />
+  <nut-input v-model="val2" placeholder="Format on Blur" :formatter="formatter" format-trigger="onBlur" />
+</template>
+<script setup>
+import { ref } from 'vue';
+const val1 = ref('');
+const val2 = ref('');
+const formatter = (value) => value.replace(/\d/g, '');
+</script>

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

@@ -1,139 +1,80 @@
 <template>
   <Demo class="full">
-    <h2>基础用法</h2>
-    <nut-input v-model="state.val1" placeholder="文本" />
+    <h2>{{ t('basic') }}</h2>
+    <Basic />
 
-    <h2>自定义类型</h2>
-    <nut-input v-model="state.text" placeholder="文本" />
-    <nut-input v-model="state.password" type="password" placeholder="密码" />
-    <nut-input v-model="state.digit" type="digit" placeholder="数字（支持小数）" />
-    <nut-input v-model="state.number" type="number" placeholder="整数" />
+    <h2>{{ t('type') }}</h2>
+    <Type />
 
-    <h2>禁用和只读</h2>
-    <nut-input v-model="state.readonly" readonly placeholder="只读" />
-    <nut-input v-model="state.disabled" disabled placeholder="禁用" />
+    <h2>{{ t('status') }}</h2>
+    <Status />
 
-    <h2>显示清除图标</h2>
-    <nut-input v-model="state.clear" clearable clear-size="14" placeholder="显示清除图标" />
-    <nut-input
-      v-model="state.clear2"
-      placeholder="自定义清除图标"
-      clearable
-      clear-size="14"
-      show-word-limit
-      max-length="50"
-      :show-clear-icon="true"
-    >
-      <template #clear>
-        <Close width="12" height="12" size="12" @click="clearValue"></Close>
-      </template>
-    </nut-input>
-    <h2>配合表单使用</h2>
-    <nut-form :model-value="state">
-      <nut-form-item label-align="center" label="文本">
-        <nut-input v-model="state.val2" placeholder="请输入文本" :border="false" />
-      </nut-form-item>
-    </nut-form>
+    <h2>{{ t('clear') }}</h2>
+    <Clear />
 
-    <h2>格式化输入内容</h2>
-    <nut-input v-model="state.format1" :formatter="formatter" placeholder="在输入时执行格式化" />
-    <nut-input
-      v-model="state.format2"
-      :formatter="formatter"
-      format-trigger="onBlur"
-      placeholder="在失焦时执行格式化"
-    />
+    <h2>{{ t('form') }}</h2>
+    <FormDemo />
 
-    <h2>显示字数统计</h2>
-    <nut-input
-      v-model="state.textarea"
-      type="text"
-      show-word-limit
-      rows="2"
-      max-length="50"
-      placeholder="留言"
-      :adjust-position="state.adjustPosition"
-    />
+    <h2>{{ t('format') }}</h2>
+    <Format />
 
-    <h2>无边框</h2>
-    <nut-input v-model="state.disabled" :border="false" placeholder="无边框" />
-    <nut-input v-model="state.showIcon" :border="false" placeholder="无边框" />
+    <h2>{{ t('count') }}</h2>
+    <Count />
 
-    <h2>事件演示</h2>
-    <nut-input
-      v-model="state.event"
-      placeholder="事件演示"
-      clearable
-      :adjust-position="state.adjustPosition"
-      @clear="clear"
-      @click-input="clickInput"
-    />
-    <nut-toast v-model:visible="state.show" :msg="state.msg" type="text" />
-    <h2>插槽演示</h2>
-    <nut-input v-model="state.slotsValue" placeholder="插槽演示" clearable :adjust-position="state.adjustPosition">
-      <template #left> <Ask></Ask> </template>
-      <template #right>
-        <nut-button type="primary" size="small">获取验证码</nut-button>
-      </template>
-    </nut-input>
+    <h2>{{ t('border') }}</h2>
+    <Border />
+
+    <h2>{{ t('align') }}</h2>
+    <Align />
+
+    <h2>{{ t('event') }}</h2>
+    <Event />
+
+    <h2>{{ t('slot') }}</h2>
+    <SlotDemo />
   </Demo>
 </template>
 
 <script setup lang="ts">
-import { reactive } from 'vue';
-import { Close, Ask } from '@nutui/icons-vue-taro';
+import { useTranslate } from '../../../utils';
+import Basic from './basic.vue';
+import Type from './type.vue';
+import Status from './status.vue';
+import Clear from './clear.vue';
+import FormDemo from './form.vue';
+import Format from './format.vue';
+import Count from './count.vue';
+import Border from './border.vue';
+import Align from './align.vue';
+import Event from './event.vue';
+import SlotDemo from './slot.vue';
 
-const state = reactive({
-  val1: '',
-  val2: '',
-  text: '',
-  password: '',
-  number: '',
-  digit: '',
-  tel: '',
-  readonly: '',
-  disabled: '禁用',
-  showIcon: '',
-  required: '',
-  error1: '',
-  error2: '',
-  buttonVal: '',
-  format1: '',
-  format2: '',
-  textarea: '',
-  align1: '',
-  align2: '',
-  event: '',
-  slotsValue: '',
-  clear: '',
-  clear2: '',
-  adjustPosition: false,
-  show: false,
-  msg: ''
+const t = useTranslate({
+  'zh-CN': {
+    basic: '基础用法',
+    type: '自定义类型',
+    status: '禁用和只读',
+    clear: '显示清除图标',
+    form: '配合表单使用',
+    format: '格式化输入内容',
+    count: '显示字数统计',
+    border: '无边框',
+    align: '对齐方式',
+    event: '事件演示',
+    slot: '插槽演示'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    type: 'Custom Type',
+    status: 'Disabled & Readonly',
+    clear: 'Show Clear Icon',
+    form: 'Use Form',
+    format: 'Format Value',
+    count: 'Show Word Limit',
+    border: 'No Border',
+    align: 'Input Align',
+    event: 'Event',
+    slot: 'Slot'
+  }
 });
-
-const clear = (value: string | number, event: Event) => {
-  console.log('clear:', value, event);
-  showToast('clear');
-};
-const showToast = (msg: string) => {
-  state.show = true;
-  state.msg = msg;
-};
-const clickInput = (value: string | number) => {
-  console.log('clickInput:', value);
-  showToast('clickInput');
-};
-const formatter = (value: string) => value.replace(/\d/g, '');
-const clearValue = () => {
-  state.clear2 = '';
-};
 </script>
-
-<style lang="scss" scoped>
-.demo {
-  .nut-placeholder {
-    color: #ccc;
-  }
-}
-</style>

packages/nutui-taro-demo/src/dentry/pages/input/slot.vue

@@ -0,0 +1,15 @@
+<template>
+  <nut-input v-model="val" placeholder="Slot" clearable>
+    <template #left>
+      <Ask></Ask>
+    </template>
+    <template #right>
+      <nut-button type="primary" size="small">Button</nut-button>
+    </template>
+  </nut-input>
+</template>
+<script setup>
+import { ref } from 'vue';
+import { Ask } from '@nutui/icons-vue-taro';
+const val = ref('');
+</script>

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

@@ -0,0 +1,9 @@
+<template>
+  <nut-input v-model="val1" disabled />
+  <nut-input v-model="val2" readonly />
+</template>
+<script setup>
+import { ref } from 'vue';
+const val1 = ref('Disabled');
+const val2 = ref('Readonly');
+</script>

packages/nutui-taro-demo/src/dentry/pages/input/type.vue

@@ -0,0 +1,13 @@
+<template>
+  <nut-input v-model="val1" placeholder="Text" />
+  <nut-input v-model="val2" placeholder="Password" type="password" />
+  <nut-input v-model="val3" placeholder="Digit" type="digit" />
+  <nut-input v-model="val4" placeholder="Number" type="number" />
+</template>
+<script setup>
+import { ref } from 'vue';
+const val1 = ref('');
+const val2 = ref('');
+const val3 = ref('');
+const val4 = ref('');
+</script>