From b41b5ee9aa728ba021328eb6d074578b36d9dc0c Mon Sep 17 00:00:00 2001
From: ajaxzheng <894103554@qq.com>
Date: Thu, 31 Oct 2024 21:05:02 +0800
Subject: [PATCH] docs(input): [input] optimizing input component example

---
 .../demos/mobile/app/input/webdoc/input.js    |  2 +-
 .../input/display-only-composition-api.vue    |  2 +-
 .../sites/demos/pc/app/input/display-only.vue |  2 +-
 .../pc/app/input/native-composition-api.vue   |  8 +++--
 examples/sites/demos/pc/app/input/native.vue  |  8 +++--
 .../pc/app/input/type-composition-api.vue     | 30 -----------------
 .../sites/demos/pc/app/input/type.spec.ts     | 16 +---------
 examples/sites/demos/pc/app/input/type.vue    | 32 +------------------
 .../sites/demos/pc/app/input/webdoc/input.js  | 13 ++++++--
 9 files changed, 27 insertions(+), 86 deletions(-)

diff --git a/examples/sites/demos/mobile/app/input/webdoc/input.js b/examples/sites/demos/mobile/app/input/webdoc/input.js
index db62ccbd64..f9cb87be7b 100644
--- a/examples/sites/demos/mobile/app/input/webdoc/input.js
+++ b/examples/sites/demos/mobile/app/input/webdoc/input.js
@@ -37,7 +37,7 @@ export default {
       },
       desc: {
         'zh-CN':
-          '<p>通过对应的 <code>type</code> 属性，可以设置为对应的类型。默认为 text，可选值为 text，textarea 和其他 原生 input 的 type 值</p>',
+          '<p>通过对应的 <code>type</code> 属性，可以设置为对应的类型。默认为 text，可选值为 text，number 等其他 原生 input 的 type 值</p>',
         'en-US':
           '<p>You can set the corresponding type through the corresponding <code>type</code> attribute. The default value is text. The options are text, textarea, and other type values of the native input</p>'
       },
diff --git a/examples/sites/demos/pc/app/input/display-only-composition-api.vue b/examples/sites/demos/pc/app/input/display-only-composition-api.vue
index 983d950929..3001c73868 100644
--- a/examples/sites/demos/pc/app/input/display-only-composition-api.vue
+++ b/examples/sites/demos/pc/app/input/display-only-composition-api.vue
@@ -17,7 +17,7 @@
       <tiny-input class="demp-input-dis" v-model="input1" type="textarea" display-only></tiny-input>
     </p>
     <p>
-      <label>display-only&autosize：</label>
+      <label>display-only & autosize：</label>
       <tiny-input class="demp-input-dis" v-model="input1" type="textarea" display-only autosize></tiny-input>
     </p>
   </div>
diff --git a/examples/sites/demos/pc/app/input/display-only.vue b/examples/sites/demos/pc/app/input/display-only.vue
index e2cd17cd40..6bd8c0be2d 100644
--- a/examples/sites/demos/pc/app/input/display-only.vue
+++ b/examples/sites/demos/pc/app/input/display-only.vue
@@ -17,7 +17,7 @@
       <tiny-input class="demp-input-dis" v-model="input1" type="textarea" display-only></tiny-input>
     </p>
     <p>
-      <label>display-only&autosize：</label>
+      <label>display-only & autosize：</label>
       <tiny-input class="demp-input-dis" v-model="input1" type="textarea" display-only autosize></tiny-input>
     </p>
   </div>
diff --git a/examples/sites/demos/pc/app/input/native-composition-api.vue b/examples/sites/demos/pc/app/input/native-composition-api.vue
index a5ad3b794f..de039d3016 100644
--- a/examples/sites/demos/pc/app/input/native-composition-api.vue
+++ b/examples/sites/demos/pc/app/input/native-composition-api.vue
@@ -21,7 +21,6 @@
     <br />
     <div>
       <span>autocomplete="on"</span>
-      <br /><br />
       <form>
         <tiny-input v-model="inputAutocomplete" autocomplete="on" name="email" type="email"></tiny-input>
       </form>
@@ -40,11 +39,16 @@ const inputAutocomplete = ref('')
 </script>
 
 <style scoped>
-.demo-input > p > span {
+.demo-input > p > span,
+.demo-input > div > span {
   display: inline-block;
   width: 130px;
 }
 .demo-input .tiny-input {
   width: 250px;
 }
+.demo-input > div {
+  display: flex;
+  align-items: center;
+}
 </style>
diff --git a/examples/sites/demos/pc/app/input/native.vue b/examples/sites/demos/pc/app/input/native.vue
index dd172e4daa..60074c6a84 100644
--- a/examples/sites/demos/pc/app/input/native.vue
+++ b/examples/sites/demos/pc/app/input/native.vue
@@ -21,7 +21,6 @@
     <br />
     <div>
       <span>autocomplete="on"</span>
-      <br /><br />
       <form>
         <tiny-input v-model="inputAutocomplete" autocomplete="on" name="email" type="email"></tiny-input>
       </form>
@@ -48,11 +47,16 @@ export default {
 </script>
 
 <style scoped>
-.demo-input > p > span {
+.demo-input > p > span,
+.demo-input > div > span {
   display: inline-block;
   width: 130px;
 }
 .demo-input .tiny-input {
   width: 250px;
 }
+.demo-input > div {
+  display: flex;
+  align-items: center;
+}
 </style>
diff --git a/examples/sites/demos/pc/app/input/type-composition-api.vue b/examples/sites/demos/pc/app/input/type-composition-api.vue
index 6cc0d14211..fd0d4641a0 100644
--- a/examples/sites/demos/pc/app/input/type-composition-api.vue
+++ b/examples/sites/demos/pc/app/input/type-composition-api.vue
@@ -2,20 +2,7 @@
   <div class="demo-input">
     <tiny-input v-model="text" placeholder="text"></tiny-input>
     <tiny-input type="password" v-model="password" placeholder="password"></tiny-input>
-    <tiny-input type="textarea" v-model="textarea" placeholder="textarea"></tiny-input>
-    <tiny-input type="email" v-model="email" placeholder="email"></tiny-input>
     <tiny-input type="number" v-model="number" placeholder="number"></tiny-input>
-    <tiny-input type="tel" v-model="tel" placeholder="tel"></tiny-input>
-    <tiny-input type="url" v-model="url" placeholder="url"></tiny-input>
-    <tiny-input type="hidden"></tiny-input>
-    <tiny-input type="color" v-model="color"></tiny-input>
-    <tiny-input type="date" v-model="date"></tiny-input>
-    <tiny-input type="month" v-model="month"></tiny-input>
-    <tiny-input type="week" v-model="week"></tiny-input>
-    <tiny-input type="datetime-local" v-model="datetime"></tiny-input>
-    <tiny-input type="time" v-model="time"></tiny-input>
-    <tiny-input type="file" v-model="file"></tiny-input>
-    <tiny-input type="range" v-model="range"></tiny-input>
   </div>
 </template>
 
@@ -25,19 +12,7 @@ import { TinyInput } from '@opentiny/vue'
 
 const text = ref('')
 const password = ref('')
-const textarea = ref('')
-const email = ref('')
 const number = ref('')
-const tel = ref('')
-const url = ref('')
-const color = ref('#000000')
-const date = ref('')
-const month = ref('')
-const week = ref('')
-const datetime = ref('')
-const time = ref('')
-const file = ref('')
-const range = ref('')
 </script>
 
 <style scoped>
@@ -45,9 +20,4 @@ const range = ref('')
   width: 250px;
   margin: 5px;
 }
-
-.demo-input .tiny-textarea {
-  width: 250px;
-  margin: 5px;
-}
 </style>
diff --git a/examples/sites/demos/pc/app/input/type.spec.ts b/examples/sites/demos/pc/app/input/type.spec.ts
index b6bf8d89fa..7de0f92320 100644
--- a/examples/sites/demos/pc/app/input/type.spec.ts
+++ b/examples/sites/demos/pc/app/input/type.spec.ts
@@ -4,21 +4,7 @@ test('[Input]type', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('input#type')
   const input = page.locator('.demo-input > .tiny-input >  .tiny-input-display-only > input')
-  const textArea = page.locator('.demo-input > .tiny-textarea > .tiny-textarea-display-only > textarea')
   await expect(input.nth(0)).toHaveAttribute('type', 'text')
   await expect(input.nth(1)).toHaveAttribute('type', 'password')
-  await expect(input.nth(2)).toHaveAttribute('type', 'email')
-  await expect(input.nth(3)).toHaveAttribute('type', 'number')
-  await expect(input.nth(4)).toHaveAttribute('type', 'tel')
-  await expect(input.nth(5)).toHaveAttribute('type', 'url')
-  await expect(input.nth(6)).toHaveAttribute('type', 'hidden')
-  await expect(input.nth(7)).toHaveAttribute('type', 'color')
-  await expect(input.nth(8)).toHaveAttribute('type', 'date')
-  await expect(input.nth(9)).toHaveAttribute('type', 'month')
-  await expect(input.nth(10)).toHaveAttribute('type', 'week')
-  await expect(input.nth(11)).toHaveAttribute('type', 'datetime-local')
-  await expect(input.nth(12)).toHaveAttribute('type', 'time')
-  await expect(input.nth(13)).toHaveAttribute('type', 'file')
-  await expect(input.nth(14)).toHaveAttribute('type', 'range')
-  await expect(textArea).toBeVisible()
+  await expect(input.nth(2)).toHaveAttribute('type', 'number')
 })
diff --git a/examples/sites/demos/pc/app/input/type.vue b/examples/sites/demos/pc/app/input/type.vue
index 9d98d198d9..637f2ab28c 100644
--- a/examples/sites/demos/pc/app/input/type.vue
+++ b/examples/sites/demos/pc/app/input/type.vue
@@ -2,20 +2,7 @@
   <div class="demo-input">
     <tiny-input v-model="text" placeholder="text"></tiny-input>
     <tiny-input type="password" v-model="password" placeholder="password"></tiny-input>
-    <tiny-input type="textarea" v-model="textarea" placeholder="textarea"></tiny-input>
-    <tiny-input type="email" v-model="email" placeholder="email"></tiny-input>
     <tiny-input type="number" v-model="number" placeholder="number"></tiny-input>
-    <tiny-input type="tel" v-model="tel" placeholder="tel"></tiny-input>
-    <tiny-input type="url" v-model="url" placeholder="url"></tiny-input>
-    <tiny-input type="hidden"></tiny-input>
-    <tiny-input type="color" v-model="color"></tiny-input>
-    <tiny-input type="date" v-model="date"></tiny-input>
-    <tiny-input type="month" v-model="month"></tiny-input>
-    <tiny-input type="week" v-model="week"></tiny-input>
-    <tiny-input type="datetime-local" v-model="datetime"></tiny-input>
-    <tiny-input type="time" v-model="time"></tiny-input>
-    <tiny-input type="file" v-model="file"></tiny-input>
-    <tiny-input type="range" v-model="range"></tiny-input>
   </div>
 </template>
 
@@ -30,19 +17,7 @@ export default {
     return {
       text: '',
       password: '',
-      textarea: '',
-      email: '',
-      number: '',
-      tel: '',
-      url: '',
-      color: '#000000',
-      date: '',
-      month: '',
-      week: '',
-      datetime: '',
-      time: '',
-      file: '',
-      range: ''
+      number: ''
     }
   }
 }
@@ -53,9 +28,4 @@ export default {
   width: 250px;
   margin: 5px;
 }
-
-.demo-input .tiny-textarea {
-  width: 250px;
-  margin: 5px;
-}
 </style>
diff --git a/examples/sites/demos/pc/app/input/webdoc/input.js b/examples/sites/demos/pc/app/input/webdoc/input.js
index f8151868a6..42efcaf3f1 100644
--- a/examples/sites/demos/pc/app/input/webdoc/input.js
+++ b/examples/sites/demos/pc/app/input/webdoc/input.js
@@ -227,7 +227,8 @@ export default {
         'en-US': 'Memory History Input'
       },
       desc: {
-        'zh-CN': '<p>参考以下例子，输入完成后，输入会被记住。</p>',
+        'zh-CN':
+          '<p>通过组件实例方法 <code> addMemory </code> 添加历史输入数据，输入完成后，输入会被记住。通过 <code> memory-space </code> 属性配置最多可以被记录的条数。</p>',
         'en-US': '<p>Refer to the following example. After the input is complete, the input will be remembered</p>'
       },
       codeFiles: ['method-addMemory.vue']
@@ -253,9 +254,15 @@ export default {
         'en-US': 'Native Attribute'
       },
       desc: {
-        'zh-CN': '<p>可设置 <code>name</code>  <code>disabled</code> <code>readonly</code>等原生属性。</p>\n',
+        'zh-CN': `
+        <p>可设置 <code>name</code>  <code>disabled</code> <code>readonly</code>等原生属性。</p>
+         <div class="tip custom-block">
+            <p class="custom-block-title"> 温馨提示： </p>
+            <p>原生属性是透传给 <code> input </code>原生标签的，功能和使用原生标签等同。</p>
+          </div>
+        `,
         'en-US':
-          '<p>You can set native attributes such as <code>name</code> <code>disabled</code> <code>readonly</code> . </p>\n'
+          '<p>You can set native attributes such as <code>name</code> <code>disabled</code> <code>readonly</code> . </p>'
       },
       codeFiles: ['native.vue']
     },