feat(comp:table): enhancement for icon of expandable and ellipsis

packages/components/_private/footer/src/Footer.tsx

@@ -29,7 +29,7 @@ export default defineComponent({
         onClick: cancel,
         loading: cancelLoading,
         ...cancelButton,
-      }
+      } as FooterButtonProps
     })
 
     const okButtonProps = computed<FooterButtonProps | undefined>(() => {
@@ -44,7 +44,7 @@ export default defineComponent({
         loading: okLoading,
         mode: cancelButtonProps.value ? 'primary' : 'default',
         ...okButton,
-      }
+      } as FooterButtonProps
     })
 
     return () => {

packages/components/_private/footer/src/types.ts

@@ -7,9 +7,10 @@
 
 import type { ExtractInnerPropTypes, ExtractPublicPropTypes, VKey } from '@idux/cdk/utils'
 import type { ButtonProps } from '@idux/components/button'
-import type { DefineComponent, HTMLAttributes, PropType, VNode } from 'vue'
+import type { ButtonHTMLAttributes, DefineComponent, HTMLAttributes, PropType, VNode } from 'vue'
 
-export interface FooterButtonProps extends ButtonProps {
+export interface FooterButtonProps extends ButtonHTMLAttributes, ButtonProps {
+  disabled?: boolean
   key?: VKey
   text?: string | VNode
   onClick?: (evt: Event) => void

packages/components/config/src/types.ts

@@ -460,7 +460,7 @@ export interface TableColumnBaseConfig {
 }
 
 export interface TableColumnExpandableConfig {
-  icon: string
+  icon: string | VNodeChild | ((expanded: boolean) => string | VNodeChild)
 }
 
 export interface TagConfig {

packages/components/header/docs/Design.zh.md

@@ -1,7 +1,5 @@
-## 组件定义
-
-页头用于各中容器的顶部，起到了内容概览和引导操作的作用。
-
 ## 使用场景
 
-当需要使用户快速理解当前容器是什么以及提供一些快捷操作。
+- 当某模块的最大层级数≤2时，整个模块使用页头组件。
+
+- 当某模块的最大层级数＞2时，整个模块应使用[面包屑]组件。

packages/components/header/docs/Index.zh.md

@@ -7,3 +7,4 @@ order: 0
 theme: true
 ---
 
+页头位于页容器中，页容器顶部，起到了内容概览和引导页级操作的作用。

packages/components/header/docs/Theme.zh.md

@@ -2,8 +2,8 @@
 | --- | --- | --- | --- |
 | `@header-height-sm` | `var(--ix-height-lg)` | - | - |
 | `@header-height-md` | `var(--ix-height-xl)` | - | - |
-| `@header-height-lg` | `var(--ix-height-2xl)` | - | - |
-| `@header-height-xl` | `var(--ix-height-3xl)` | - | - |
+| `@header-height-lg` | `var(--ix-height-xl)` | - | - |
+| `@header-height-xl` | `var(--ix-height-2xl)` | - | - |
 | `@header-font-size-sm` | `var(--ix-font-size-md)` | - | - |
 | `@header-font-size-md` | `var(--ix-font-size-lg)` | - | - |
 | `@header-font-size-lg` | `var(--ix-font-size-xl)` | - | - |

packages/components/header/style/themes/default.variable.less

@@ -1,7 +1,7 @@
 @header-height-sm: var(--ix-height-lg);
 @header-height-md: var(--ix-height-xl);
-@header-height-lg: var(--ix-height-2xl);
-@header-height-xl: var(--ix-height-3xl);
+@header-height-lg: var(--ix-height-xl);
+@header-height-xl: var(--ix-height-2xl);
 
 @header-font-size-sm: var(--ix-font-size-md);
 @header-font-size-md: var(--ix-font-size-lg);

packages/components/space/docs/Index.zh.md

@@ -3,6 +3,6 @@ category: components
 type: 布局
 title: Space
 subtitle: 间距
-cover:
+theme: true
 ---
 

packages/components/space/docs/Theme.zh.md

@@ -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)` | - | - |

packages/components/space/style/index.less

@@ -62,4 +62,8 @@
   &-item:empty {
     display: none;
   }
+
+  &-item-separator {
+    color: @space-separator-color;
+  }
 }

packages/components/space/style/themes/default.variable.less

@@ -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);

packages/components/statistic/docs/Theme.zh.md

@@ -6,6 +6,6 @@
 | `@statistic-font-size-xl` | `@font-size-2xl` | - | - |
 | `@statistic-line-height` | `@line-height-base` | - | - |
 | `@statistic-color` | `@color-black` | `@color-graphite-d40` | - |
-| `@statistic-title-margin` | `@space-margin-lg` | - | - |
+| `@statistic-title-margin` | `@spacing-xl` | - | - |
 | `@statistic-prefix-margin` | `@spacing-xs` | - | - |
 | `@statistic-suffix-margin` | `@spacing-xs` | - | - |

packages/components/statistic/style/themes/default.variable.less

@@ -6,6 +6,6 @@
 @statistic-line-height: @line-height-base;
 @statistic-color: @color-black;
 
-@statistic-title-margin: @space-margin-lg;
+@statistic-title-margin: @spacing-xl;
 @statistic-prefix-margin: @spacing-xs;
 @statistic-suffix-margin: @spacing-xs;

packages/components/table/__tests__/__snapshots__/table.spec.ts.snap

@@ -2,7 +2,6 @@
 
 exports[`Table > basic work > render work 1`] = `
 "<div class=\\"ix-table ix-table-borderless ix-table-md\\">
-  <!---->
   <!---->
   <div class=\\"ix-table-container\\">
     <div class=\\"ix-table-content\\">
@@ -312,7 +311,6 @@ exports[`Table > basic work > render work 1`] = `
       </table>
     </div>
   </div>
-  <!---->
   <ul class=\\"ix-pagination ix-pagination-md ix-table-pagination ix-table-pagination-end\\" position=\\"bottomEnd\\">
     <li class=\\"ix-pagination-total\\">共 100 项</li>
     <li class=\\"ix-pagination-item ix-pagination-item-prev ix-pagination-item-disabled\\" tabindex=\\"-1\\" title=\\"上一页\\"><span class=\\"ix-pagination-item-content\\"><i class=\\"ix-icon ix-icon-left\\" role=\\"img\\" aria-label=\\"left\\"></i></span></li>

packages/components/table/__tests__/table.spec.ts

@@ -207,6 +207,22 @@ describe('Table', () => {
       expect(wrapper.find('tbody').findAll('td')[2].attributes('title')).not.toBe(undefined)
     })
 
+    test('ellipsis with head work', async () => {
+      const wrapper = TableMount({ props: { ellipsis: { head: false } } })
+
+      expect(wrapper.find('thead').findAll('th')[2].classes()).not.toContain('ix-table-cell-ellipsis')
+      expect(wrapper.find('tbody').findAll('td')[2].classes()).toContain('ix-table-cell-ellipsis')
+      expect(wrapper.find('thead').findAll('th')[2].attributes('title')).toBe(undefined)
+      expect(wrapper.find('tbody').findAll('td')[2].attributes('title')).not.toBe(undefined)
+
+      await wrapper.setProps({ ellipsis: { head: true } })
+
+      expect(wrapper.find('thead').findAll('th')[2].classes()).toContain('ix-table-cell-ellipsis')
+      expect(wrapper.find('tbody').findAll('td')[2].classes()).toContain('ix-table-cell-ellipsis')
+      expect(wrapper.find('thead').findAll('th')[2].attributes('title')).not.toBe(undefined)
+      expect(wrapper.find('tbody').findAll('td')[2].attributes('title')).not.toBe(undefined)
+    })
+
     test('ellipsis with columns work', async () => {
       const wrapper = TableMount({
         props: {

packages/components/table/demo/AutoHeight.vue

@@ -7,13 +7,13 @@
     :step="100"
   ></IxInputNumber>
 
-  <div :style="{ height: `${containerHeight}px` }">
+  <div :style="{ height: `${containerHeight}px`, marginTop: '8px' }">
     <IxTable :columns="columns" :dataSource="data" autoHeight :scroll="scroll">
       <template #name="{ value }">
-        <a>{{ value }}</a>
+        <IxButton mode="link">{{ value }}</IxButton>
       </template>
       <template #action>
-        <a>action</a>
+        <IxButton>Action</IxButton>
       </template>
     </IxTable>
   </div>

packages/components/table/demo/AutoHeightVirtual.vue

@@ -7,10 +7,10 @@
       :max="600"
       :step="100"
     ></IxInputNumber>
-    <div :style="{ height: `${containerHeight}px` }">
+    <div :style="{ height: `${containerHeight}px`, marginTop: '8px' }">
       <IxTable :columns="columns" :dataSource="data" :pagination="false" autoHeight virtual>
         <template #name="{ value }">
-          <a>{{ value }}</a>
+          <IxButton mode="link">{{ value }}</IxButton>
         </template>
       </IxTable>
     </div>

packages/components/table/demo/Basic.vue

@@ -1,11 +1,13 @@
 <template>
   <IxTable :columns="columns" :dataSource="data">
     <template #name="{ value }">
-      <a>{{ value }}</a>
+      <IxButton mode="link">{{ value }}</IxButton>
     </template>
     <template #action="{ record }">
-      <a style="margin-right: 8px">Invite {{ record.name }}</a>
-      <a>Delete</a>
+      <IxButtonGroup :gap="8" mode="link" separator="|">
+        <IxButton>Invite {{ record.name }}</IxButton>
+        <IxButton>Delete</IxButton>
+      </IxButtonGroup>
     </template>
   </IxTable>
 </template>

packages/components/table/demo/ColSpanRowSpan.vue

@@ -2,7 +2,7 @@
   <IxTable :columns="columns" :dataSource="data" :borderless="false">
     <IxTableColumn> </IxTableColumn>
     <template #name="{ value }">
-      <a>{{ value }}</a>
+      <IxButton mode="link">{{ value }}</IxButton>
     </template>
   </IxTable>
 </template>

packages/components/table/demo/CustomAdditional.vue

@@ -7,7 +7,7 @@
     :pagination="false"
   >
     <template #name="{ value }">
-      <a>{{ value }}</a>
+      <IxButton mode="link">{{ value }}</IxButton>
     </template>
   </IxTable>
 </template>

packages/components/table/demo/EditCells.md

@@ -0,0 +1,14 @@
+---
+title:
+  zh: 可编辑单元格
+  en: Editable cells
+order: 86
+---
+
+## zh
+
+表格的单元格支持编辑
+
+## en
+
+The cells of the table support editing.

packages/components/table/demo/EditCells.vue

@@ -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>

packages/components/table/demo/EditRows.md

@@ -0,0 +1,14 @@
+---
+title:
+  zh: 可编辑行
+  en: Editable rows
+order: 88
+---
+
+## zh
+
+表格的行支持编辑。
+
+## en
+
+The rows of the table support editing.