Skip to content

Commit 21502ea

Browse files
tangjinzhouJohn60676
tangjinzhou
and
John60676
authored
refactor: table (#4641)
* refactor: table * refactor: table * refactor: table * refactor: table * refactor: table * refactor: table * refactor: table * refactor: table * refactor: table * fix: column not pass to cell * doc: uppate table * fix: update bodyCell headerCell * doc: remove examples * refactor: table * fix: table title not work * fix: table selection * fix: table checkStrictly * refactor: table * fix: table template error * feat: table support summary * test: update snap * perf: table * docs(table): fix ajax demo (#4639) * test: update table * refactor: remove old table * doc: update table doc * doc: update doc * doc: update select * doc: update summary Co-authored-by: John <[email protected]>
1 parent 1aee88e commit 21502ea

File tree

152 files changed

+15008
-14153
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

152 files changed

+15008
-14153
lines changed

‎components/_util/getScrollBarSize.js renamed to ‎components/_util/getScrollBarSize.ts

+28-4
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,12 @@
1-
let cached;
1+
/* eslint-disable no-param-reassign */
2+
3+
let cached: number;
4+
5+
export default function getScrollBarSize(fresh?: boolean) {
6+
if (typeof document === 'undefined') {
7+
return 0;
8+
}
29

3-
export default function getScrollBarSize(fresh) {
410
if (fresh || cached === undefined) {
511
const inner = document.createElement('div');
612
inner.style.width = '100%';
@@ -10,8 +16,8 @@ export default function getScrollBarSize(fresh) {
1016
const outerStyle = outer.style;
1117

1218
outerStyle.position = 'absolute';
13-
outerStyle.top = 0;
14-
outerStyle.left = 0;
19+
outerStyle.top = '0';
20+
outerStyle.left = '0';
1521
outerStyle.pointerEvents = 'none';
1622
outerStyle.visibility = 'hidden';
1723
outerStyle.width = '200px';
@@ -36,3 +42,21 @@ export default function getScrollBarSize(fresh) {
3642
}
3743
return cached;
3844
}
45+
46+
function ensureSize(str: string) {
47+
const match = str.match(/^(.*)px$/);
48+
const value = Number(match?.[1]);
49+
return Number.isNaN(value) ? getScrollBarSize() : value;
50+
}
51+
52+
export function getTargetScrollBarSize(target: HTMLElement) {
53+
if (typeof document === 'undefined' || !target || !(target instanceof Element)) {
54+
return { width: 0, height: 0 };
55+
}
56+
57+
const { width, height } = getComputedStyle(target, '::-webkit-scrollbar');
58+
return {
59+
width: ensureSize(width),
60+
height: ensureSize(height),
61+
};
62+
}

‎components/_util/props-util/index.js

+1
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ const parseStyleText = (cssText = '', camel) => {
2929
const res = {};
3030
const listDelimiter = /;(?![^(]*\))/g;
3131
const propertyDelimiter = /:(.+)/;
32+
if (typeof cssText === 'object') return cssText;
3233
cssText.split(listDelimiter).forEach(function (item) {
3334
if (item) {
3435
const tmp = item.split(propertyDelimiter);

‎components/_util/reactivePick.ts

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import type { UnwrapRef } from 'vue';
2+
import { reactive, toRef } from 'vue';
3+
4+
/**
5+
* Reactively pick fields from a reactive object
6+
*
7+
* @see https://vueuse.js.org/reactivePick
8+
*/
9+
export function reactivePick<T extends object, K extends keyof T>(
10+
obj: T,
11+
...keys: K[]
12+
): { [S in K]: UnwrapRef<T[S]> } {
13+
return reactive(Object.fromEntries(keys.map(k => [k, toRef(obj, k)]))) as any;
14+
}

‎components/_util/toReactive.ts

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import { isRef, reactive } from 'vue';
2+
import type { Ref } from 'vue';
3+
type MaybeRef<T> = T | Ref<T>;
4+
/**
5+
* Converts ref to reactive.
6+
*
7+
* @see https://vueuse.org/toReactive
8+
* @param objectRef A ref of object
9+
*/
10+
export function toReactive<T extends object>(objectRef: MaybeRef<T>): T {
11+
if (!isRef(objectRef)) return reactive(objectRef) as T;
12+
13+
const proxy = new Proxy(
14+
{},
15+
{
16+
get(_, p, receiver) {
17+
return Reflect.get(objectRef.value, p, receiver);
18+
},
19+
set(_, p, value) {
20+
(objectRef.value as any)[p] = value;
21+
return true;
22+
},
23+
deleteProperty(_, p) {
24+
return Reflect.deleteProperty(objectRef.value, p);
25+
},
26+
has(_, p) {
27+
return Reflect.has(objectRef.value, p);
28+
},
29+
ownKeys() {
30+
return Object.keys(objectRef.value);
31+
},
32+
getOwnPropertyDescriptor() {
33+
return {
34+
enumerable: true,
35+
configurable: true,
36+
};
37+
},
38+
},
39+
);
40+
41+
return reactive(proxy) as T;
42+
}

‎components/_util/util.js

+5
Original file line numberDiff line numberDiff line change
@@ -62,4 +62,9 @@ export function getDataAndAriaProps(props) {
6262
}, {});
6363
}
6464

65+
export function toPx(val) {
66+
if (typeof val === 'number') return `${val}px`;
67+
return val;
68+
}
69+
6570
export { isOn, cacheStringFunction, camelize, hyphenate, capitalize, resolvePropValue };

‎components/checkbox/Checkbox.tsx

+19-8
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import type { ExtractPropTypes } from 'vue';
12
import { defineComponent, inject, nextTick } from 'vue';
23
import PropTypes from '../_util/vue-types';
34
import classNames from '../_util/classNames';
@@ -9,11 +10,8 @@ import type { RadioChangeEvent } from '../radio/interface';
910
import type { EventHandler } from '../_util/EventInterface';
1011
function noop() {}
1112

12-
export default defineComponent({
13-
name: 'ACheckbox',
14-
inheritAttrs: false,
15-
__ANT_CHECKBOX: true,
16-
props: {
13+
export const checkboxProps = () => {
14+
return {
1715
prefixCls: PropTypes.string,
1816
defaultChecked: PropTypes.looseBool,
1917
checked: PropTypes.looseBool,
@@ -27,7 +25,17 @@ export default defineComponent({
2725
autofocus: PropTypes.looseBool,
2826
onChange: PropTypes.func,
2927
'onUpdate:checked': PropTypes.func,
30-
},
28+
skipGroup: PropTypes.looseBool,
29+
};
30+
};
31+
32+
export type CheckboxProps = Partial<ExtractPropTypes<ReturnType<typeof checkboxProps>>>;
33+
34+
export default defineComponent({
35+
name: 'ACheckbox',
36+
inheritAttrs: false,
37+
__ANT_CHECKBOX: true,
38+
props: checkboxProps(),
3139
emits: ['change', 'update:checked'],
3240
setup() {
3341
return {
@@ -38,6 +46,9 @@ export default defineComponent({
3846

3947
watch: {
4048
value(value, prevValue) {
49+
if (this.skipGroup) {
50+
return;
51+
}
4152
nextTick(() => {
4253
const { checkboxGroupContext: checkboxGroup = {} } = this;
4354
if (checkboxGroup.registerValue && checkboxGroup.cancelValue) {
@@ -85,7 +96,7 @@ export default defineComponent({
8596
const props = getOptionProps(this);
8697
const { checkboxGroupContext: checkboxGroup, $attrs } = this;
8798
const children = getSlot(this);
88-
const { indeterminate, prefixCls: customizePrefixCls, ...restProps } = props;
99+
const { indeterminate, prefixCls: customizePrefixCls, skipGroup, ...restProps } = props;
89100
const getPrefixCls = this.configProvider.getPrefixCls;
90101
const prefixCls = getPrefixCls('checkbox', customizePrefixCls);
91102
const {
@@ -101,7 +112,7 @@ export default defineComponent({
101112
prefixCls,
102113
...restAttrs,
103114
};
104-
if (checkboxGroup) {
115+
if (checkboxGroup && !skipGroup) {
105116
checkboxProps.onChange = (...args) => {
106117
this.$emit('change', ...args);
107118
checkboxGroup.toggleOption({ label: children, value: props.value });

‎components/checkbox/index.ts

+3-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import type { App, Plugin } from 'vue';
2-
import Checkbox from './Checkbox';
2+
import Checkbox, { checkboxProps } from './Checkbox';
33
import CheckboxGroup from './Group';
4+
export type { CheckboxProps } from './Checkbox';
45

56
Checkbox.Group = CheckboxGroup;
67

@@ -10,7 +11,7 @@ Checkbox.install = function (app: App) {
1011
app.component(CheckboxGroup.name, CheckboxGroup);
1112
return app;
1213
};
13-
export { CheckboxGroup };
14+
export { CheckboxGroup, checkboxProps };
1415
export default Checkbox as typeof Checkbox &
1516
Plugin & {
1617
readonly Group: typeof CheckboxGroup;

‎components/components.ts

+16-1
Original file line numberDiff line numberDiff line change
@@ -164,7 +164,22 @@ export { default as Steps, Step } from './steps';
164164
export type { SwitchProps } from './switch';
165165
export { default as Switch } from './switch';
166166

167-
export { default as Table, TableColumn, TableColumnGroup } from './table';
167+
export type {
168+
TableProps,
169+
TablePaginationConfig,
170+
ColumnGroupType as TableColumnGroupType,
171+
ColumnType as TableColumnType,
172+
ColumnProps as TableColumnProps,
173+
ColumnsType as TableColumnsType,
174+
} from './table';
175+
export {
176+
default as Table,
177+
TableColumn,
178+
TableColumnGroup,
179+
TableSummary,
180+
TableSummaryRow,
181+
TableSummaryCell,
182+
} from './table';
168183

169184
export type { TransferProps } from './transfer';
170185
export { default as Transfer } from './transfer';

‎components/empty/__tests__/__snapshots__/demo.test.js.snap

+37-50
Original file line numberDiff line numberDiff line change
@@ -113,32 +113,47 @@ exports[`renders ./components/empty/demo/config-provider.vue correctly 1`] = `
113113
<div class="ant-spin-nested-loading">
114114
<!---->
115115
<div class="ant-spin-container">
116-
<div class="ant-table ant-table-default ant-table-empty ant-table-scroll-position-left">
116+
<div class="ant-table ant-table-empty" style="margin-top: 8px;">
117117
<!---->
118-
<div class="ant-table-content">
119-
<!---->
120-
<div class="ant-table-body">
121-
<table class="">
122-
<colgroup>
123-
<col data-key="0">
124-
<col data-key="1">
125-
</colgroup>
118+
<div class="ant-table-container">
119+
<div class="ant-table-content">
120+
<table style="table-layout: auto;">
121+
<colgroup></colgroup>
126122
<thead class="ant-table-thead">
127123
<tr>
128-
<th colstart="0" colspan="1" colend="0" rowspan="1" class=""><span class="ant-table-header-column"><div><span class="ant-table-column-title">Name</span><span class="ant-table-column-sorter"><!----></span>
129-
</div></span>
130-
<!---->
131-
</th>
132-
<th colstart="1" colspan="1" colend="1" rowspan="1" class=""><span class="ant-table-header-column"><div><span class="ant-table-column-title">Age</span><span class="ant-table-column-sorter"><!----></span>
133-
</div></span>
124+
<th class="ant-table-cell" colstart="0" colend="0">
125+
<!---->Name
126+
</th>
127+
<th class="ant-table-cell" colstart="1" colend="1">
128+
<!---->Age
129+
</th>
130+
</tr>
131+
</thead>
132+
<tbody class="ant-table-tbody">
133+
<!---->
134+
<tr class="ant-table-placeholder">
135+
<td colspan="2" class="ant-table-cell">
136+
<!---->No data
137+
</td>
138+
</tr>
139+
</tbody>
140+
<!---->
141+
</table>
142+
</div>
143+
</div>
134144
<!---->
135-
</th>
136-
</tr>
137-
</thead>
138-
<tbody class="ant-table-tbody"></tbody>
139-
</table>
140145
</div>
141-
<div class="ant-table-placeholder">
146+
</div>
147+
</div>
148+
</div>
149+
<h3>List</h3>
150+
<div class="ant-list ant-list-split">
151+
<!---->
152+
<!---->
153+
<div class="ant-spin-nested-loading">
154+
<!---->
155+
<div class="ant-spin-container">
156+
<div class="ant-list-empty-text">
142157
<div class="ant-empty ant-empty-normal">
143158
<div class="ant-empty-image"><svg class="ant-empty-img-simple" width="64" height="41" viewBox="0 0 64 41">
144159
<g transform="translate(0 1)" fill="none" fill-rule="evenodd">
@@ -153,39 +168,11 @@ exports[`renders ./components/empty/demo/config-provider.vue correctly 1`] = `
153168
<!---->
154169
</div>
155170
</div>
156-
<!---->
157171
</div>
158172
</div>
159-
</div>
160-
</div>
161-
</div>
162-
<h3>List</h3>
163-
<div class="ant-list ant-list-split">
164-
<!---->
165-
<!---->
166-
<div class="ant-spin-nested-loading">
167173
<!---->
168-
<div class="ant-spin-container">
169-
<div class="ant-list-empty-text">
170-
<div class="ant-empty ant-empty-normal">
171-
<div class="ant-empty-image"><svg class="ant-empty-img-simple" width="64" height="41" viewBox="0 0 64 41">
172-
<g transform="translate(0 1)" fill="none" fill-rule="evenodd">
173-
<ellipse class="ant-empty-img-simple-ellipse" fill="#F5F5F5" cx="32" cy="33" rx="32" ry="7"></ellipse>
174-
<g class="ant-empty-img-simple-g" fill-rule="nonzero" stroke="#D9D9D9">
175-
<path d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"></path>
176-
<path d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z" fill="#FAFAFA" class="ant-empty-img-simple-path"></path>
177-
</g>
178-
</g>
179-
</svg></div>
180-
<p class="ant-empty-description">No Data</p>
181-
<!---->
182-
</div>
183-
</div>
184-
</div>
174+
<!---->
185175
</div>
186-
<!---->
187-
<!---->
188-
</div>
189176
</div>
190177
`;
191178

0 commit comments

Comments
 (0)