-
Notifications
You must be signed in to change notification settings - Fork 141
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(comp:table): enhancement for icon of expandable and ellipsis (#1280
) * feat(comp:table): enhancement for icon of expandable and ellipsis * test(comp:table): add test case and update snapshots
- Loading branch information
Showing
49 changed files
with
413 additions
and
107 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,7 +1,5 @@ | ||
## 组件定义 | ||
|
||
页头用于各中容器的顶部,起到了内容概览和引导操作的作用。 | ||
|
||
## 使用场景 | ||
|
||
当需要使用户快速理解当前容器是什么以及提供一些快捷操作。 | ||
- 当某模块的最大层级数≤2时,整个模块使用页头组件。 | ||
|
||
- 当某模块的最大层级数>2时,整个模块应使用[面包屑]组件。 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -7,3 +7,4 @@ order: 0 | |
theme: true | ||
--- | ||
|
||
页头位于页容器中,页容器顶部,起到了内容概览和引导页级操作的作用。 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
4 changes: 2 additions & 2 deletions
4
packages/components/header/style/themes/default.variable.less
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -3,6 +3,6 @@ category: components | |
type: 布局 | ||
title: Space | ||
subtitle: 间距 | ||
cover: | ||
theme: true | ||
--- | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,5 +1,3 @@ | ||
| 名称 | default | seer | 备注 | | ||
| --- | --- | --- | --- | | ||
| `@space-margin-sm` | `@spacing-sm` | - | - | | ||
| `@space-margin-md` | `@spacing-lg` | - | - | | ||
| `@space-margin-lg` | `@spacing-xl` | - | - | | ||
| `@space-separator-color` | `var(--ix-border-color-secondary)` | - | - | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -62,4 +62,8 @@ | |
&-item:empty { | ||
display: none; | ||
} | ||
|
||
&-item-separator { | ||
color: @space-separator-color; | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,3 +1 @@ | ||
@space-margin-sm: @spacing-sm; | ||
@space-margin-md: @spacing-lg; | ||
@space-margin-lg: @spacing-xl; | ||
@space-separator-color: var(--ix-border-color-secondary); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
--- | ||
title: | ||
zh: 可编辑单元格 | ||
en: Editable cells | ||
order: 86 | ||
--- | ||
|
||
## zh | ||
|
||
表格的单元格支持编辑 | ||
|
||
## en | ||
|
||
The cells of the table support editing. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,128 @@ | ||
<template> | ||
<IxTable :columns="columns" :dataSource="data"> | ||
<template #name="{ value, record }"> | ||
<IxFormItem v-if="record.editable === 'name'" messageTooltip> | ||
<IxInput :control="editControl" @blur="onSave(record, 'name')"></IxInput> | ||
</IxFormItem> | ||
<span v-else class="edit-cell" @click="onEdit(record, 'name')"> | ||
{{ value }} | ||
<IxIcon name="edit" /> | ||
</span> | ||
</template> | ||
<template #age="{ value, record }"> | ||
<IxFormItem v-if="record.editable === 'age'" messageTooltip> | ||
<IxInputNumber :control="editControl" @blur="onSave(record, 'age')"></IxInputNumber> | ||
</IxFormItem> | ||
<span v-else class="edit-cell" @click="onEdit(record, 'age')"> | ||
{{ value }} | ||
<IxIcon name="edit" /> | ||
</span> | ||
</template> | ||
<template #address="{ value, record }"> | ||
<IxFormItem v-if="record.editable === 'address'" messageTooltip> | ||
<IxInput :control="editControl" @blur="onSave(record, 'address')"></IxInput> | ||
</IxFormItem> | ||
<span v-else class="edit-cell" @click="onEdit(record, 'address')"> | ||
{{ value }} | ||
<IxIcon name="edit" /> | ||
</span> | ||
</template> | ||
<template #action> | ||
<IxButtonGroup :gap="8" mode="link" separator="|"> | ||
<IxButton>Detail</IxButton> | ||
<IxButton>Delete</IxButton> | ||
</IxButtonGroup> | ||
</template> | ||
</IxTable> | ||
</template> | ||
|
||
<script lang="ts" setup> | ||
import { ref } from 'vue' | ||
import { Validators, useFormControl } from '@idux/cdk/forms' | ||
import { TableColumn } from '@idux/components/table' | ||
interface Data { | ||
key?: number | ||
name?: string | ||
age?: number | ||
address?: string | ||
editable?: 'name' | 'age' | 'address' | ||
} | ||
const columns: TableColumn<Data>[] = [ | ||
{ | ||
title: 'Name', | ||
dataKey: 'name', | ||
customCell: 'name', | ||
width: 150, | ||
}, | ||
{ | ||
title: 'Age', | ||
dataKey: 'age', | ||
customCell: 'age', | ||
width: 120, | ||
}, | ||
{ | ||
title: 'Address', | ||
dataKey: 'address', | ||
customCell: 'address', | ||
}, | ||
{ | ||
title: 'Action', | ||
key: 'action', | ||
customCell: 'action', | ||
width: 150, | ||
}, | ||
] | ||
const data = ref<Data[]>([]) | ||
for (let index = 0; index < 3; index++) { | ||
data.value.push({ | ||
key: index, | ||
name: `Edrward ${index}`, | ||
age: 18 + index, | ||
address: `London Park no. ${index}`, | ||
}) | ||
} | ||
const { required, range, maxLength } = Validators | ||
const editControl = useFormControl<string | number | undefined>(undefined) | ||
const validatorMap = { | ||
name: [required], | ||
age: [required, range(18, 99)], | ||
address: [maxLength(100)], | ||
} | ||
const onEdit = (record: Data, type: 'name' | 'age' | 'address') => { | ||
record.editable = type | ||
editControl.setValue(record[type]) | ||
editControl.setValidators(validatorMap[type]) | ||
} | ||
const onSave = (record: Data, type: 'name' | 'age' | 'address') => { | ||
if (editControl.valid.value) { | ||
// 发起请求,成功后刷新数据 | ||
record[type] = editControl.getValue() | ||
record.editable = undefined | ||
} else { | ||
editControl.markAsDirty() | ||
} | ||
} | ||
</script> | ||
|
||
<style scoped lang="less"> | ||
.edit-cell { | ||
.ix-icon { | ||
visibility: hidden; | ||
margin-left: 16px; | ||
} | ||
&:hover { | ||
.ix-icon { | ||
visibility: visible; | ||
} | ||
} | ||
} | ||
</style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
--- | ||
title: | ||
zh: 可编辑行 | ||
en: Editable rows | ||
order: 88 | ||
--- | ||
|
||
## zh | ||
|
||
表格的行支持编辑。 | ||
|
||
## en | ||
|
||
The rows of the table support editing. |
Oops, something went wrong.