Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs(input): [input] optimizing input component example #2476

Merged
merged 1 commit into from
Nov 4, 2024
Merged

docs(input): [input] optimizing input component example #2476

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion examples/sites/demos/mobile/app/input/webdoc/input.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>'
Comment on lines +40 to 42
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Inconsistency between Chinese and English descriptions.

The Chinese description has been updated to replace "textarea" with "number", but the English description still mentions "textarea" as an option. This creates a documentation inconsistency that could confuse users.

Apply this diff to align the English description with the Chinese one:

        'zh-CN':
          '<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>'
+          '<p>You can set the corresponding type through the corresponding <code>type</code> attribute. The default value is text. The options are text, number, and other type values of the native input</p>'
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
'<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>'
'<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, number, and other type values of the native input</p>'

},
Expand Down
2 changes: 1 addition & 1 deletion examples/sites/demos/pc/app/input/display-only-composition-api.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion examples/sites/demos/pc/app/input/display-only.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
8 changes: 6 additions & 2 deletions examples/sites/demos/pc/app/input/native-composition-api.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
8 changes: 6 additions & 2 deletions examples/sites/demos/pc/app/input/native.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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;
}
Comment on lines +50 to +61
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Improve CSS maintainability and consistency.

The current CSS structure mixes different layout approaches and uses magic numbers:

  1. Inconsistent layout methods (inline-block vs flexbox)
  2. Hard-coded widths
  3. Fragile direct child selectors

Consider this more maintainable approach:

-  .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;
-  }
+  .demo-input {
+    --label-width: 8rem;
+    --input-width: 15rem;
+  }
+
+  .input-group {
+    display: flex;
+    align-items: center;
+    margin-bottom: 1rem;
+  }
+
+  .input-group label {
+    flex: 0 0 var(--label-width);
+  }
+
+  .input-group .tiny-input {
+    width: var(--input-width);
+  }

Committable suggestion was skipped due to low confidence.

</style>
30 changes: 0 additions & 30 deletions examples/sites/demos/pc/app/input/type-composition-api.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand All @@ -25,29 +12,12 @@ 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>
.demo-input .tiny-input {
width: 250px;
margin: 5px;
}

.demo-input .tiny-textarea {
width: 250px;
margin: 5px;
}
</style>
16 changes: 1 addition & 15 deletions examples/sites/demos/pc/app/input/type.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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')
})
32 changes: 1 addition & 31 deletions examples/sites/demos/pc/app/input/type.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand All @@ -30,19 +17,7 @@ export default {
return {
text: '',
password: '',
textarea: '',
email: '',
number: '',
tel: '',
url: '',
color: '#000000',
date: '',
month: '',
week: '',
datetime: '',
time: '',
file: '',
range: ''
number: ''
}
}
}
Expand All @@ -53,9 +28,4 @@ export default {
width: 250px;
margin: 5px;
}

.demo-input .tiny-textarea {
width: 250px;
margin: 5px;
}
</style>
13 changes: 10 additions & 3 deletions examples/sites/demos/pc/app/input/webdoc/input.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>',
Comment on lines +230 to +231
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Enhance English description to match Chinese content detail.

The English description lacks important details about the addMemory method and memory-space attribute that are present in the Chinese version.

Consider updating the English description to:

-'en-US': '<p>Refer to the following example. After the input is complete, the input will be remembered</p>'
+'en-US': '<p>Use the component instance method <code>addMemory</code> to add historical input data. After the input is complete, the input will be remembered. The <code>memory-space</code> attribute configures the maximum number of records that can be stored.</p>'

Committable suggestion was skipped due to low confidence.

'en-US': '<p>Refer to the following example. After the input is complete, the input will be remembered</p>'
},
codeFiles: ['method-addMemory.vue']
Expand All @@ -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>'
Comment on lines +257 to +265
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Add the tip section to English description for consistency.

The Chinese description includes a helpful tip about native attributes being passed to the input tag, but this information is missing in the English version.

Consider updating the English description to include the tip section:

-'en-US': '<p>You can set native attributes such as <code>name</code> <code>disabled</code> <code>readonly</code> . </p>'
+'en-US': `
+  <p>You can set native attributes such as <code>name</code> <code>disabled</code> <code>readonly</code>.</p>
+  <div class="tip custom-block">
+    <p class="custom-block-title">Tip:</p>
+    <p>Native attributes are passed directly to the <code>input</code> native tag and function exactly the same as using native tags.</p>
+  </div>
+`
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
'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>'
'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>
<div class="tip custom-block">
<p class="custom-block-title">Tip:</p>
<p>Native attributes are passed directly to the <code>input</code> native tag and function exactly the same as using native tags.</p>
</div>
`

},
codeFiles: ['native.vue']
},
Expand Down
Loading