mirror of
https://gitee.com/ant-design-vue/ant-design-vue.git
synced 2024-12-14 08:51:28 +08:00
3aeeeb2aed
* refactor: transfer、tooltip (#4306) * refactor(transfer): use composition api (#4135) * refactor(transfer): use composition api * fix: remove console * refactor(tooltip): use composition api (#4059) * refactor(tooltip): use composition api * chore: useConfigInject * fix: remove useless * style: format code * refactor: transfer * refactor: tooltip Co-authored-by: ajuner <106791576@qq.com> * Refactor mentions (#4341) * refactor(mentions): use compositionAPI (#4313) * refactor: mentions * refactor: mentions Co-authored-by: ajuner <106791576@qq.com> * Refactor progress (#4358) * fix: timepicker error border not show #4331 * fix(UploadDragger): fix UploadDrager no export (#4334) * refactor(switch): support customize checked value #4329 (#4332) * refactor(switch): support customize checked value #4329 * test: add test case * refactor: update props name * refactor: update ts * refactor: optimize * style: uncheckedValue to unCheckedValue * test: update snap * feat: udpate switch ts * docs: remove ie11 * fix: tree-select throw error when use slot title * fix: TypeScript definition of Table interface for typescript 4.3.5 (#4353) * fix type for typescript 4.3.5 * Update interface.ts close #4296 * fix: dropdown submenu style error #4351 close #4351 * fix(notification): 完善notification类型 (#4346) * refactor(progress): use composition API (#4355) * refactor(progress): use composition API * refactor(vc-progress): update * refactor: progress * refactor: progress * fix: timepicker error border not show #4331 * fix(UploadDragger): fix UploadDrager no export (#4334) * refactor(switch): support customize checked value #4329 (#4332) * refactor(switch): support customize checked value #4329 * test: add test case * refactor: update props name * refactor: update ts * refactor: optimize * style: uncheckedValue to unCheckedValue * test: update snap * feat: udpate switch ts * docs: remove ie11 * fix: tree-select throw error when use slot title * fix: TypeScript definition of Table interface for typescript 4.3.5 (#4353) * fix type for typescript 4.3.5 * Update interface.ts close #4296 * fix: dropdown submenu style error #4351 close #4351 * fix(notification): 完善notification类型 (#4346) * refactor(progress): use composition API (#4355) * refactor(progress): use composition API * refactor(vc-progress): update * refactor: progress * refactor: progress Co-authored-by: Jarvis <35361626+fanhaoyuan@users.noreply.github.com> Co-authored-by: John <John60676@qq.com> Co-authored-by: 艾斯特洛 <axetroy.dev@gmail.com> Co-authored-by: zanllp <qc@zanllp.cn> * docs: add changelog * refactor: tree * refactor: tree * style: lint * refactor: tree * 热factor: tree * refactor: tree * refactor: tree * refactor: tree * refactor: directory tree * refactor: tree * refactor: tree-select * refactor: tree-select * refactor: tree-select * refactor: tree-select * refactor: tree-select * style: lint format * refactor: tree-select * refactor: tree-select * refactor: tree-select * refactor: tree-select * refactor: tree-select * refactor: tree-select * fix: upload ts error * fix: update tree title render & switchIcon * test: update tree test * feat: add VirtualScroll tree * refactor: datePicker & calendar & trigger (#4522) * style: update * test: update calendar test * test: update test * test: update test * refactor: slider * feat: update slider css * refactor: slider to ts * refactor: slider to ts * perf: update default itemHeight * test: update * fix: uddate ts type * fix: update skeleton * fix: update skeleton * refactor: update vc-pagination * refactor: pagination * refactor: timeline * refactor: steps * refactor: collapse * refactor: collapse * refactor: popconfirm * refactor: popover * refactor: dropdown * doc: merge doc * chore: vite for dev (#4602) * style: js to jsx * doc: add site * style: lint * style: format ts type * doc: update * style: format code * style: format site * doc: update * style: dmeo * style: format scripts * chore: remove sub-modules * chore: update vite * site: add site build * test: update snap * doc(select): add tip (#4606) * 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 <John60676@qq.com> * doc: update doc * fix: menu arrow not work * test: update * doc: add next site * style: format * doc: update * doc: update site script * fix: expand icon not fixed * feat: use renderSlot * test: update table snap * feat: confirm support reactively * feat: configProvider.config * feat: message support configprovider.config * feat: notification support configprovider.config * doc: update doc * fix: typescript compile error * style: add import eslint * doc: update demo * chore: set transpileOnly true * style: fix eslint error * test: update snap * doc: update * test: mock date * test: update snap * chore: remove gulp-typescript (#4675) * feat: V3 form (#4678) * chore: update husky * perf: update formItem * perf: useInjectFormItemContext * fix: table ts error * doc: add Customized Form Controls demo * feat: export useInjectFormItemContext * doc: update form doc * doc: update doc * doc: update doc * feat: autocomplete support option slot * doc: update * feat: add form item rest * style: remove omit.js * refactor: autocomplete * doc: add changelog to site * doc: update site anchor * doc: update doc layout * test: update table test * doc: update * chore: udpate gulp script * chore: udpate gulp script * doc: add changelog * doc: update * test: ignore some test wait vue-test-utils * fix: form id error #4582 close #4582 * doc: add select Responsive demo * doc: remove temp doc Co-authored-by: ajuner <106791576@qq.com> Co-authored-by: Jarvis <35361626+fanhaoyuan@users.noreply.github.com> Co-authored-by: John <John60676@qq.com> Co-authored-by: 艾斯特洛 <axetroy.dev@gmail.com> Co-authored-by: zanllp <qc@zanllp.cn> Co-authored-by: Amour1688 <lcz_1996@foxmail.com>
216 lines
6.3 KiB
Vue
216 lines
6.3 KiB
Vue
import { warning } from '../../vc-util/warning';
|
|
import type { ComputedRef, Ref } from 'vue';
|
|
import { computed, watchEffect } from 'vue';
|
|
import type {
|
|
ColumnsType,
|
|
ColumnType,
|
|
FixedType,
|
|
Key,
|
|
GetRowKey,
|
|
TriggerEventHandler,
|
|
RenderExpandIcon,
|
|
ColumnGroupType,
|
|
} from '../interface';
|
|
import { INTERNAL_COL_DEFINE } from '../utils/legacyUtil';
|
|
|
|
function flatColumns<RecordType>(columns: ColumnsType<RecordType>): ColumnType<RecordType>[] {
|
|
return columns.reduce((list, column) => {
|
|
const { fixed } = column;
|
|
|
|
// Convert `fixed='true'` to `fixed='left'` instead
|
|
const parsedFixed = fixed === true ? 'left' : fixed;
|
|
|
|
const subColumns = (column as ColumnGroupType<RecordType>).children;
|
|
if (subColumns && subColumns.length > 0) {
|
|
return [
|
|
...list,
|
|
...flatColumns(subColumns).map(subColum => ({
|
|
fixed: parsedFixed,
|
|
...subColum,
|
|
})),
|
|
];
|
|
}
|
|
return [
|
|
...list,
|
|
{
|
|
...column,
|
|
fixed: parsedFixed,
|
|
},
|
|
];
|
|
}, []);
|
|
}
|
|
|
|
function warningFixed(flattenColumns: readonly { fixed?: FixedType }[]) {
|
|
let allFixLeft = true;
|
|
for (let i = 0; i < flattenColumns.length; i += 1) {
|
|
const col = flattenColumns[i];
|
|
if (allFixLeft && col.fixed !== 'left') {
|
|
allFixLeft = false;
|
|
} else if (!allFixLeft && col.fixed === 'left') {
|
|
warning(false, `Index ${i - 1} of \`columns\` missing \`fixed='left'\` prop.`);
|
|
break;
|
|
}
|
|
}
|
|
|
|
let allFixRight = true;
|
|
for (let i = flattenColumns.length - 1; i >= 0; i -= 1) {
|
|
const col = flattenColumns[i];
|
|
if (allFixRight && col.fixed !== 'right') {
|
|
allFixRight = false;
|
|
} else if (!allFixRight && col.fixed === 'right') {
|
|
warning(false, `Index ${i + 1} of \`columns\` missing \`fixed='right'\` prop.`);
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
|
|
function revertForRtl<RecordType>(columns: ColumnsType<RecordType>): ColumnsType<RecordType> {
|
|
return columns.map(column => {
|
|
const { fixed, ...restProps } = column;
|
|
|
|
// Convert `fixed='left'` to `fixed='right'` instead
|
|
let parsedFixed = fixed;
|
|
if (fixed === 'left') {
|
|
parsedFixed = 'right';
|
|
} else if (fixed === 'right') {
|
|
parsedFixed = 'left';
|
|
}
|
|
return {
|
|
fixed: parsedFixed,
|
|
...restProps,
|
|
};
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Parse `columns` & `children` into `columns`.
|
|
*/
|
|
function useColumns<RecordType>(
|
|
{
|
|
prefixCls,
|
|
columns: baseColumns,
|
|
// children,
|
|
expandable,
|
|
expandedKeys,
|
|
getRowKey,
|
|
onTriggerExpand,
|
|
expandIcon,
|
|
rowExpandable,
|
|
expandIconColumnIndex,
|
|
direction,
|
|
expandRowByClick,
|
|
expandColumnWidth,
|
|
expandFixed,
|
|
}: {
|
|
prefixCls?: Ref<string>;
|
|
columns?: Ref<ColumnsType<RecordType>>;
|
|
expandable: Ref<boolean>;
|
|
expandedKeys: Ref<Set<Key>>;
|
|
getRowKey: Ref<GetRowKey<RecordType>>;
|
|
onTriggerExpand: TriggerEventHandler<RecordType>;
|
|
expandIcon?: Ref<RenderExpandIcon<RecordType>>;
|
|
rowExpandable?: Ref<(record: RecordType) => boolean>;
|
|
expandIconColumnIndex?: Ref<number>;
|
|
direction?: Ref<'ltr' | 'rtl'>;
|
|
expandRowByClick?: Ref<boolean>;
|
|
expandColumnWidth?: Ref<number | string>;
|
|
expandFixed?: Ref<FixedType>;
|
|
},
|
|
transformColumns: Ref<(columns: ColumnsType<RecordType>) => ColumnsType<RecordType>>,
|
|
): [ComputedRef<ColumnsType<RecordType>>, ComputedRef<readonly ColumnType<RecordType>[]>] {
|
|
// Add expand column
|
|
const withExpandColumns = computed<ColumnsType<RecordType>>(() => {
|
|
if (expandable.value) {
|
|
const expandColIndex = expandIconColumnIndex.value || 0;
|
|
const prevColumn = baseColumns.value[expandColIndex];
|
|
|
|
let fixedColumn: FixedType | null;
|
|
if ((expandFixed.value === 'left' || expandFixed.value) && !expandIconColumnIndex.value) {
|
|
fixedColumn = 'left';
|
|
} else if (
|
|
(expandFixed.value === 'right' || expandFixed.value) &&
|
|
expandIconColumnIndex.value === baseColumns.value.length
|
|
) {
|
|
fixedColumn = 'right';
|
|
} else {
|
|
fixedColumn = prevColumn ? prevColumn.fixed : null;
|
|
}
|
|
const expandedKeysValue = expandedKeys.value;
|
|
const rowExpandableValue = rowExpandable.value;
|
|
const expandIconValue = expandIcon.value;
|
|
const prefixClsValue = prefixCls.value;
|
|
const expandRowByClickValue = expandRowByClick.value;
|
|
const expandColumn = {
|
|
[INTERNAL_COL_DEFINE]: {
|
|
class: `${prefixCls.value}-expand-icon-col`,
|
|
},
|
|
title: '',
|
|
fixed: fixedColumn,
|
|
class: `${prefixCls.value}-row-expand-icon-cell`,
|
|
width: expandColumnWidth.value,
|
|
customRender: ({ record, index }) => {
|
|
const rowKey = getRowKey.value(record, index);
|
|
const expanded = expandedKeysValue.has(rowKey);
|
|
const recordExpandable = rowExpandableValue ? rowExpandableValue(record) : true;
|
|
|
|
const icon = expandIconValue({
|
|
prefixCls: prefixClsValue,
|
|
expanded,
|
|
expandable: recordExpandable,
|
|
record,
|
|
onExpand: onTriggerExpand,
|
|
});
|
|
|
|
if (expandRowByClickValue) {
|
|
return <span onClick={e => e.stopPropagation()}>{icon}</span>;
|
|
}
|
|
return icon;
|
|
},
|
|
};
|
|
|
|
// Insert expand column in the target position
|
|
const cloneColumns = baseColumns.value.slice();
|
|
if (expandColIndex >= 0) {
|
|
cloneColumns.splice(expandColIndex, 0, expandColumn);
|
|
}
|
|
return cloneColumns;
|
|
}
|
|
return baseColumns.value;
|
|
});
|
|
|
|
const mergedColumns = computed(() => {
|
|
let finalColumns = withExpandColumns.value;
|
|
if (transformColumns.value) {
|
|
finalColumns = transformColumns.value(finalColumns);
|
|
}
|
|
|
|
// Always provides at least one column for table display
|
|
if (!finalColumns.length) {
|
|
finalColumns = [
|
|
{
|
|
customRender: () => null,
|
|
},
|
|
];
|
|
}
|
|
return finalColumns;
|
|
});
|
|
|
|
const flattenColumns = computed(() => {
|
|
if (direction.value === 'rtl') {
|
|
return revertForRtl(flatColumns(mergedColumns.value));
|
|
}
|
|
return flatColumns(mergedColumns.value);
|
|
});
|
|
// Only check out of production since it's waste for each render
|
|
if (process.env.NODE_ENV !== 'production') {
|
|
watchEffect(() => {
|
|
setTimeout(() => {
|
|
warningFixed(flattenColumns.value);
|
|
});
|
|
});
|
|
}
|
|
return [mergedColumns, flattenColumns];
|
|
}
|
|
|
|
export default useColumns;
|