feat(comp:desc): add Descriptions component #1470
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
| // Vitest Snapshot v1 | ||
|
|
||
| exports[`Desc > render work 1`] = ` | ||
| "<div class=\\"ix-row ix-desc ix-desc-md\\"> | ||
| <!----> | ||
| <div class=\\"ix-col ix-col-span-8 ix-desc-item\\"> | ||
| <div class=\\"ix-desc-item-label ix-desc-item-label-colon\\"><label>A</label></div> | ||
| <div class=\\"ix-desc-content\\"><span>aaa</span></div> | ||
| </div> | ||
| <div class=\\"ix-col ix-col-span-8 ix-desc-item\\"> | ||
| <div class=\\"ix-desc-item-label ix-desc-item-label-colon\\"><label>B</label></div> | ||
| <div class=\\"ix-desc-content\\"><span>bbb</span></div> | ||
| </div> | ||
| <div class=\\"ix-col ix-col-span-8 ix-desc-item\\"> | ||
| <div class=\\"ix-desc-item-label ix-desc-item-label-colon\\"><label>C</label></div> | ||
| <div class=\\"ix-desc-content\\"><span>ccc</span></div> | ||
| </div> | ||
| <div class=\\"ix-col ix-col-span-8 ix-desc-item\\"> | ||
| <div class=\\"ix-desc-item-label ix-desc-item-label-colon\\"><label>D</label></div> | ||
| <div class=\\"ix-desc-content\\"><span>ddd</span></div> | ||
| </div> | ||
| <div class=\\"ix-col ix-col-span-8 ix-desc-item\\"> | ||
| <div class=\\"ix-desc-item-label ix-desc-item-label-colon\\"><label>E</label></div> | ||
| <div class=\\"ix-desc-content\\"><span>eee</span></div> | ||
| </div> | ||
| <div class=\\"ix-col ix-col-span-8 ix-desc-item\\"> | ||
| <div class=\\"ix-desc-item-label ix-desc-item-label-colon\\"><label>F</label></div> | ||
| <div class=\\"ix-desc-content\\"><span>fff</span></div> | ||
| </div> | ||
| <div class=\\"ix-col ix-col-span-16 ix-desc-item\\"> | ||
| <div class=\\"ix-desc-item-label ix-desc-item-label-start\\"><label style=\\"width: 120px;\\">G</label></div> | ||
| <div class=\\"ix-desc-content\\"><span>ggg</span></div> | ||
| </div> | ||
| </div>" | ||
| `; | ||
|
There was a problem hiding this comment. with a brief code review
Overall, this code appears to be well formatted and have no obvious errors. It is also reasonably optimized for performance. However, it might be worth considering refactoring some sections to make them more maintainable. |
||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,117 @@ | ||
| import { MountingOptions, mount } from '@vue/test-utils' | ||
| import { h } from 'vue' | ||
|
|
||
| import { renderWork } from '@tests' | ||
|
|
||
| import Desc from '../src/Desc' | ||
| import DescItem from '../src/DescItem' | ||
| import { DescProps } from '../src/types' | ||
|
|
||
| const defaultSlot = () => [ | ||
| h(DescItem, { label: 'A' }, () => 'aaa'), | ||
| h(DescItem, { label: 'B' }, () => 'bbb'), | ||
| h(DescItem, { label: 'C' }, () => 'ccc'), | ||
| h(DescItem, { label: 'D' }, () => 'ddd'), | ||
| h(DescItem, { label: 'E' }, () => 'eee'), | ||
| h(DescItem, { label: 'F' }, () => 'fff'), | ||
| h(DescItem, { label: 'G', col: 2, colonless: true, labelAlign: 'start', labelWidth: '120px' }, () => 'ggg'), | ||
| ] | ||
|
|
||
| describe('Desc', () => { | ||
| const DescMount = (options?: MountingOptions<Partial<DescProps>>) => { | ||
| const { slots, ...reset } = options || {} | ||
| return mount(Desc, { ...(reset as MountingOptions<DescProps>), slots: { default: defaultSlot, ...slots } }) | ||
| } | ||
|
|
||
| renderWork<DescProps>(Desc, { | ||
| props: {}, | ||
| slots: { default: defaultSlot }, | ||
| }) | ||
|
|
||
| test('col work', async () => { | ||
| const wrapper = DescMount({ props: { col: 3 } }) | ||
|
|
||
| const allItems = wrapper.findAllComponents(DescItem) | ||
|
|
||
| expect(allItems[0].classes()).toContain('ix-col-span-8') | ||
| expect(allItems[6].classes()).toContain('ix-col-span-16') | ||
|
|
||
| await wrapper.setProps({ col: 4 }) | ||
|
|
||
| expect(allItems[0].classes()).toContain('ix-col-span-6') | ||
| expect(allItems[6].classes()).toContain('ix-col-span-12') | ||
| }) | ||
|
|
||
| test('colonless work', async () => { | ||
| const wrapper = DescMount({ props: { colonless: true } }) | ||
|
|
||
| const allItems = wrapper.findAllComponents(DescItem) | ||
|
|
||
| expect(allItems[0].find('.ix-desc-item-label').classes()).not.toContain('ix-desc-item-label-colon') | ||
| expect(allItems[6].find('.ix-desc-item-label').classes()).not.toContain('ix-desc-item-label-colon') | ||
|
|
||
| await wrapper.setProps({ colonless: false }) | ||
|
|
||
| expect(allItems[0].find('.ix-desc-item-label').classes()).toContain('ix-desc-item-label-colon') | ||
| expect(allItems[6].find('.ix-desc-item-label').classes()).not.toContain('ix-desc-item-label-colon') | ||
| }) | ||
|
|
||
| test('header work', async () => { | ||
| const wrapper = DescMount({ props: { header: '哈哈哈' } }) | ||
|
|
||
| expect(wrapper.find('.ix-header-title').text()).toBe('哈哈哈') | ||
|
|
||
| await wrapper.setProps({ header: { title: '嘿嘿嘿', suffix: 'setting' } }) | ||
|
|
||
| expect(wrapper.find('.ix-header-title').text()).toBe('嘿嘿嘿') | ||
| expect(wrapper.find('.ix-header-suffix').find('.ix-icon-setting').exists()).toBe(true) | ||
| }) | ||
|
|
||
| test('labelAlign work', async () => { | ||
| const wrapper = DescMount({ props: { labelAlign: 'start' } }) | ||
|
|
||
| const allItems = wrapper.findAllComponents(DescItem) | ||
|
|
||
| expect(allItems[0].find('.ix-desc-item-label').classes()).toContain('ix-desc-item-label-start') | ||
| expect(allItems[6].find('.ix-desc-item-label').classes()).toContain('ix-desc-item-label-start') | ||
|
|
||
| await wrapper.setProps({ labelAlign: 'end' }) | ||
|
|
||
| expect(allItems[0].find('.ix-desc-item-label').classes()).not.toContain('ix-desc-item-label-start') | ||
| expect(allItems[6].find('.ix-desc-item-label').classes()).toContain('ix-desc-item-label-start') | ||
| }) | ||
|
|
||
| test('labelWidth work', async () => { | ||
| const wrapper = DescMount({ props: { labelWidth: '80px' } }) | ||
|
|
||
| const allItems = wrapper.findAllComponents(DescItem) | ||
|
|
||
| expect(allItems[0].find('label').element.style.width).toBe('80px') | ||
| expect(allItems[6].find('label').element.style.width).toBe('120px') | ||
|
|
||
| await wrapper.setProps({ labelWidth: 99 }) | ||
|
|
||
| expect(allItems[0].find('label').element.style.width).toBe('99px') | ||
| expect(allItems[6].find('label').element.style.width).toBe('120px') | ||
| }) | ||
|
|
||
| test('layout work', async () => { | ||
| const wrapper = DescMount({ props: { layout: 'vertical' } }) | ||
|
|
||
| expect(wrapper.classes()).toContain('ix-desc-vertical') | ||
|
|
||
| await wrapper.setProps({ layout: 'horizontal' }) | ||
|
|
||
| expect(wrapper.classes()).not.toContain('ix-desc-vertical') | ||
| }) | ||
|
|
||
| test('size work', async () => { | ||
| const wrapper = DescMount({ props: { size: 'sm' } }) | ||
|
|
||
| expect(wrapper.classes()).toContain('ix-desc-sm') | ||
|
|
||
| await wrapper.setProps({ size: 'lg' }) | ||
|
|
||
| expect(wrapper.classes()).toContain('ix-desc-lg') | ||
| }) | ||
| }) |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| --- | ||
| order: 0 | ||
| title: | ||
| zh: 多列数据 | ||
| en: Multiple columns | ||
| --- | ||
|
|
||
| ## zh | ||
|
|
||
| 最简单的用法。 | ||
|
|
||
| ## en | ||
|
|
||
| The simplest usage. | ||
|
There was a problem hiding this comment. with a code review:
|
||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| <template> | ||
| <IxDesc header="多列数据" labelWidth="56px"> | ||
| <IxDescItem label="策略名称">保障网络会议</IxDescItem> | ||
| <IxDescItem label="状态">禁用</IxDescItem> | ||
| <IxDescItem label="操作人">saas</IxDescItem> | ||
| <IxDescItem label="描述信息">优先保证网络会议带宽的使用</IxDescItem> | ||
| <IxDescItem label="优先级">高</IxDescItem> | ||
| <IxDescItem label="更新时间">2022-02-20 16:29</IxDescItem> | ||
| </IxDesc> | ||
| </template> | ||
|
There was a problem hiding this comment. code review First, we need to check if the code follows the proper coding conventions and standards. For example, each line should be less than 80 characters, variable names should be meaningful and consistent, indentation should be used to increase readability, and end statements should be used. Second, we need to check if the code is robust and secure. For example, we need to check if all inputs are validated properly, if there are any potential cross-site scripting vulnerabilities, if the code is vulnerable to SQL injection, etc. Third, we need to examine the code for any bugs or potential errors. For example, we should check for incorrect logic, missing conditions, infinite loops, etc. Finally, we need to review the code for any potential improvements or areas of optimization. For example, we should check for any unnecessary code or logic that can be simplified or removed, any inefficient algorithms or data structures that could be replaced with better alternatives, etc. There was a problem hiding this comment. the code review
|
||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| --- | ||
| order: 3 | ||
| title: | ||
| zh: 响应式列 | ||
| en: Reactive column | ||
| --- | ||
|
|
||
| ## zh | ||
|
|
||
| `col` 支持响应式的对象 | ||
|
|
||
| ## en | ||
|
|
||
| the `col` supports reactive objects. | ||
|
There was a problem hiding this comment. with a brief code review. The code patch above is written in YAML format, which is used to store data in a human-readable format. The code appears to add a new section to a document, containing both Chinese and English translations of the title, as well as a description of what the "col" object supports. There are no bugs or risks visible in this code, and the formatting looks correct. As an improvement suggestion, you may want to consider adding comments to the code to make it easier to read and understand. There was a problem hiding this comment. with the code review! Code Review:
|
||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| <template> | ||
| <IxDesc header="响应式列" :col="{ xs: 1, sm: 2, md: 3, lg: 4, xl: 6 }"> | ||
| <IxDescItem label="策略名称">保障网络会议</IxDescItem> | ||
| <IxDescItem label="状态">禁用</IxDescItem> | ||
| <IxDescItem label="操作人">saas</IxDescItem> | ||
| <IxDescItem label="描述信息">优先保证网络会议带宽的使用</IxDescItem> | ||
| <IxDescItem label="优先级">高</IxDescItem> | ||
| <IxDescItem label="更新时间">2022-02-20 16:29</IxDescItem> | ||
| </IxDesc> | ||
| </template> | ||
|
There was a problem hiding this comment. our code review. First of all, we should check if the code syntax is correct and the indentation is correct. We can see that the syntax in this code patch is correct and there are no indentation errors. Secondly, we should check if there are any logical errors or potential risks in the code. In this code patch, it seems that the logic is correct and there are no potential risks. Lastly, we should check for any improvements that can be made. For example, the code does not appear to contain any data validation. It would be a good idea to add some form of data validation for the input fields to make sure that only valid data is accepted. There was a problem hiding this comment. the code review
|
||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| --- | ||
| order: 4 | ||
| title: | ||
| zh: 自定义头部 | ||
| en: Custom header | ||
| --- | ||
|
|
||
| ## zh | ||
|
|
||
| 通过配置 `header` 来自定义头部 | ||
|
|
||
| ## en | ||
|
|
||
| Customize the header by setting `header`. | ||
|
There was a problem hiding this comment. the code review. Firstly, there is no syntax errors in the code. The code looks simple and well-structured, so it should be straightforward to understand and debug. The comments are also clear and helpful in understanding the code. For risk assessment, there is no risk identified in the code. For improvement suggestion, if the code needs to be used in different languages, it might be beneficial to use localization feature to make sure the content can be displayed properly in different languages. Overall, the code looks good and no bugs or issues were identified. |
||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| <template> | ||
| <IxDesc :header="header"> | ||
| <IxDescItem label="策略名称">保障网络会议</IxDescItem> | ||
| <IxDescItem label="状态">禁用</IxDescItem> | ||
| <IxDescItem label="操作人">saas</IxDescItem> | ||
| <IxDescItem label="描述信息">优先保证网络会议带宽的使用</IxDescItem> | ||
| <IxDescItem label="优先级">高</IxDescItem> | ||
| <IxDescItem label="更新时间">2022-02-20 16:29</IxDescItem> | ||
| </IxDesc> | ||
| </template> | ||
|
|
||
| <script setup lang="ts"> | ||
| import { HeaderProps } from '@idux/components/header' | ||
|
|
||
| const header: HeaderProps = { | ||
| title: '自定义头部', | ||
| suffix: 'setting', | ||
| onSuffixClick: () => console.log('onSuffixClick'), | ||
| } | ||
| </script> | ||
|
There was a problem hiding this comment. the code review:
|
||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| --- | ||
| order: 8 | ||
| title: | ||
| zh: 垂直布局 | ||
| en: Vertical | ||
| --- | ||
|
|
||
| ## zh | ||
|
|
||
| 垂直的排列。 | ||
|
|
||
| ## en | ||
|
|
||
| Vertical display. | ||
|
There was a problem hiding this comment. code review
Suggestion:
|
||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| <template> | ||
| <IxDesc header="垂直布局" layout="vertical"> | ||
| <IxDescItem label="策略名称">保障网络会议</IxDescItem> | ||
| <IxDescItem label="状态">禁用</IxDescItem> | ||
| <IxDescItem label="操作人">saas</IxDescItem> | ||
| <IxDescItem label="描述信息">优先保证网络会议带宽的使用</IxDescItem> | ||
| <IxDescItem label="优先级">高</IxDescItem> | ||
| <IxDescItem label="更新时间">2022-02-20 16:29</IxDescItem> | ||
| </IxDesc> | ||
| </template> | ||
|
There was a problem hiding this comment. with a brief code review. Firstly, the code looks syntactically correct and well-structured. It uses Vue.js components to create a description layout with header and 6 columns. The components are used to display labels and corresponding information such as "策略名称" and "保障网络会议". However, there are a few improvements that could be made to this code:
There was a problem hiding this comment. the code review:
|
||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| --- | ||
| order: 2 | ||
| title: | ||
| zh: 超长文本 | ||
| en: Long text | ||
| --- | ||
|
|
||
| ## zh | ||
|
|
||
| 对于较长的文本，默认会进行换行，你也可以设置 `IxDescItem` 的 `col` 来单独处理。 | ||
|
|
||
| ## en | ||
|
|
||
| For longer text, it will be wrapped by default, you can also set `col` of `IxDescItem` to handle it separately. | ||
|
There was a problem hiding this comment. code review
There was a problem hiding this comment. Code review: Overall, this code patch looks good. However, there are a few areas that could be improved. First, there should be a comment at the beginning of each section, indicating what is being done in that section. This will make it easier for others to understand the code. Second, the code should be thoroughly tested before being merged into the main codebase. Third, the code should be formatted properly, with proper indentation and whitespace, to make it more readable. Finally, any potential performance issues should be addressed. |
||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| <template> | ||
| <IxDesc header="超长本文" labelWidth="56px"> | ||
| <IxDescItem label="策略名称"> 保障网络会议保障网络会议保障网络会议保障网络会议保障网络会议保障网络会议 </IxDescItem> | ||
| <IxDescItem label="状态">禁用</IxDescItem> | ||
| <IxDescItem label="操作人">saas</IxDescItem> | ||
| <IxDescItem label="描述信息" col="2"> | ||
| 优先保证网络会议带宽的使用优先保证网络会议带宽的使用优先保证网络会议带宽的使用 | ||
| </IxDescItem> | ||
| <IxDescItem label="更新时间">2022-02-20 16:29</IxDescItem> | ||
| </IxDesc> | ||
| </template> | ||
|
There was a problem hiding this comment. the code review This code looks good overall. It is using the IxDesc component to format a description of a policy. The labelWidth and col props of the IxDescItem component appear to be correctly configured. The header and label properties are also correctly specified for each IxDescItem component. The only thing to note is that the text content being displayed in the IxDescItem components could be too long. Depending on the size of the area that the IxDesc component is being used in, the text may need to be abbreviated or truncated in order to fit properly. There was a problem hiding this comment. with a brief review: The code patch looks good. The code is well written and well organized. There is no bug risk in this patch since the code is syntactically correct. However, there are some potential improvements that can be made. For example, adding comments to explain the purpose of each line of code would be helpful for future readers. Additionally, using more descriptive variable names could also make the code easier to read. |
||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| --- | ||
| order: 1 | ||
| title: | ||
| zh: 单列数据 | ||
| en: Single column | ||
| --- | ||
|
|
||
| ## zh | ||
|
|
||
| 每行只渲染一列数据 | ||
|
|
||
| ## en | ||
|
|
||
| Only one column of data is rendered per row. | ||
|
There was a problem hiding this comment. with a brief introduction about the code patch, it seems like this is a code for a website or application, which probably adds single column data to the page or application. The code is written in YAML and HTML, and the code looks valid according to the syntax. Now, let's move on to the code review part. First of all, I would suggest using more descriptive variable and function names, as they will make the code easier to understand and maintain. Also, make sure that the indentation is consistent throughout the code. Second, I would also suggest adding comments to explain what each part of the code does, as this will make it easier for other developers to understand the code. Third, the code should be tested thoroughly before deployment, to ensure that the code works as expected. Finally, if there are any security risks in the code, such as SQL injection, Cross-site scripting, etc., they should be addressed as soon as possible. I hope this helps. Please feel free to ask if you have any further questions. |
||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| <template> | ||
| <IxDesc header="单列数据" col="1" labelWidth="56px"> | ||
| <IxDescItem label="策略名称">保障网络会议</IxDescItem> | ||
| <IxDescItem label="状态">禁用</IxDescItem> | ||
| <IxDescItem label="操作人">saas</IxDescItem> | ||
| <IxDescItem label="描述信息">优先保证网络会议带宽的使用</IxDescItem> | ||
| <IxDescItem label="优先级">高</IxDescItem> | ||
| <IxDescItem label="更新时间">2022-02-20 16:29</IxDescItem> | ||
| </IxDesc> | ||
| </template> | ||
|
There was a problem hiding this comment. with the code review.
There was a problem hiding this comment. review Code review:
|
||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| --- | ||
| order: 10 | ||
| title: | ||
| zh: 尺寸 | ||
| en: Size | ||
| --- | ||
|
|
||
| ## zh | ||
|
|
||
| 支持 3 种尺寸以使用不同的场景 | ||
|
|
||
| ## en | ||
|
|
||
| Support 3 sizes to use different scenes. | ||
|
There was a problem hiding this comment. Code Review:
|
||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
the code review
Suggestions: