Merge branch 'dev'

DevCloudFE · Apr 16, 2024 · d28f856 · d28f856
2 parents f154140 + dc7f5ee
commit d28f856
Show file tree

Hide file tree

Showing 11 changed files with 373 additions and 365 deletions.
diff --git a/packages/devui-vue/devui/data-grid/src/components/grid-th.tsx b/packages/devui-vue/devui/data-grid/src/components/grid-th.tsx
@@ -8,71 +8,72 @@ import type { GridThProps, DataGridContext } from '../data-grid-types';
 import { useGridThSort, useGridThFilter, useGridThDrag } from '../composables/use-grid-th';
 
 export default defineComponent({
- name: 'GridTh',
- props: gridThProps,
- setup(props: GridThProps) {
- const ns = useNamespace('data-grid');
- const { size, allChecked, halfAllChecked, virtualScroll, resizable, addGridThContextToMap, toggleAllRowChecked } = inject(
- DataGridInjectionKey
- ) as DataGridContext;
- const { columnConfig, mouseenterCb, mouseleaveCb } = toRefs(props);
- const { direction, doSort, onSortClick, doClearSort } = useGridThSort(columnConfig);
- const { filterActive, setFilterStatus, onFilterChange } = useGridThFilter(columnConfig);
- const classes = computed(() => ({
- [ns.e('th')]: true,
- [ns.m(columnConfig.value.align)]: true,
- [ns.e('sticky-th')]: true,
- [ns.em('th', size.value)]: true,
- [ns.em('th', 'filter-active')]: filterActive.value,
- [ns.em('th', 'sort-active')]: Boolean(direction.value),
- [ns.em('th', 'operable')]:
- columnConfig.value.filterable ||
- columnConfig.value.sortable ||
- (!virtualScroll.value && (columnConfig.value.resizable ?? resizable.value)),
- }));
- const { thRef, onMousedown } = useGridThDrag(columnConfig);
+ name: 'GridTh',
+ props: gridThProps,
+ setup(props: GridThProps) {
+ const ns = useNamespace('data-grid');
+ const { size, allChecked, halfAllChecked, virtualScroll, columnVirtualScroll, resizable, addGridThContextToMap, toggleAllRowChecked } =
+ inject(DataGridInjectionKey) as DataGridContext;
+ const { columnConfig, mouseenterCb, mouseleaveCb } = toRefs(props);
+ const { direction, doSort, onSortClick, doClearSort } = useGridThSort(columnConfig);
+ const { filterActive, setFilterStatus, onFilterChange } = useGridThFilter(columnConfig);
+ const classes = computed(() => ({
+ [ns.e('th')]: true,
+ [ns.m(columnConfig.value.align)]: true,
+ [ns.e('sticky-th')]: true,
+ [ns.em('th', size.value)]: true,
+ [ns.em('th', 'filter-active')]: filterActive.value,
+ [ns.em('th', 'sort-active')]: Boolean(direction.value),
+ [ns.em('th', 'operable')]:
+ columnConfig.value.filterable ||
+ columnConfig.value.sortable ||
+ (!(columnVirtualScroll.value ?? virtualScroll.value) && (columnConfig.value.resizable ?? resizable.value)),
+ }));
+ const { thRef, onMousedown } = useGridThDrag(columnConfig);
 
- if (columnConfig.value.sortable) {
- addGridThContextToMap(columnConfig.value.field, { doSort, doClearSort });
- }
+ if (columnConfig.value.sortable) {
+ addGridThContextToMap(columnConfig.value.field, { doSort, doClearSort });
+ }
 
- const cellTypeMap = {
- checkable: () => <Checkbox modelValue={allChecked.value} halfChecked={halfAllChecked.value} onChange={toggleAllRowChecked} />,
- index: () => <span class={ns.em('th', 'index')}>#</span>,
- default: () => <span class='th-title'>{columnConfig.value.header}</span>,
- };
+ const cellTypeMap = {
+ checkable: () => <Checkbox modelValue={allChecked.value} halfChecked={halfAllChecked.value} onChange={toggleAllRowChecked} />,
+ index: () => <span class={ns.em('th', 'index')}>#</span>,
+ default: () => <span class="th-title">{columnConfig.value.header}</span>,
+ };
 
- return () => (
- <div
- ref={thRef}
- class={classes.value}
- style={{ width: columnConfig.value.width + 'px' }}
- onMousedown={onMousedown}
- onMouseenter={(e) => mouseenterCb.value(e, columnConfig.value.showHeadOverflowTooltip)}
- onMouseleave={(e) => mouseleaveCb.value(e, columnConfig.value.showHeadOverflowTooltip)}>
- {columnConfig.value.headRender ? (
- <span class='th-title'>{columnConfig.value.headRender(columnConfig.value)}</span>
- ) : (
- cellTypeMap[columnConfig.value.type || 'default']()
- )}
- {columnConfig.value.sortable && (
- <SortIcon
- class={['th-sort-icon', direction.value, { 'th-sort-default-visible': columnConfig.value.showSortIcon }]}
- onClick={onSortClick}
- />
- )}
- {columnConfig.value.filterable && (
- <GridThFilter
- filterList={columnConfig.value.filterList}
- multiple={columnConfig.value.filterMultiple}
- showFilterIcon={columnConfig.value.showFilterIcon}
- filterMenu={columnConfig.value.filterMenu}
- setFilterStatus={setFilterStatus}
- onFilterChange={onFilterChange}
- />
- )}
- {!virtualScroll.value && (columnConfig.value.resizable ?? resizable.value) && <span class='resize-handle'></span>}
- </div>
- );
- },
-});
+ return () => (
+ <div
+ ref={thRef}
+ class={classes.value}
+ style={{ width: columnConfig.value.width + 'px' }}
+ onMousedown={onMousedown}
+ onMouseenter={(e) => mouseenterCb.value(e, columnConfig.value.showHeadOverflowTooltip)}
+ onMouseleave={(e) => mouseleaveCb.value(e, columnConfig.value.showHeadOverflowTooltip)}>
+ {columnConfig.value.headRender ? (
+ <span class="th-title">{columnConfig.value.headRender(columnConfig.value)}</span>
+ ) : (
+ cellTypeMap[columnConfig.value.type || 'default']()
+ )}
+ {columnConfig.value.sortable && (
+ <SortIcon
+ class={['th-sort-icon', direction.value, { 'th-sort-default-visible': columnConfig.value.showSortIcon }]}
+ onClick={onSortClick}
+ />
+ )}
+ {columnConfig.value.filterable && (
+ <GridThFilter
+ filterList={columnConfig.value.filterList}
+ multiple={columnConfig.value.filterMultiple}
+ showFilterIcon={columnConfig.value.showFilterIcon}
+ filterMenu={columnConfig.value.filterMenu}
+ setFilterStatus={setFilterStatus}
+ onFilterChange={onFilterChange}
+ />
+ )}
+ {!(columnVirtualScroll.value ?? virtualScroll.value) && (columnConfig.value.resizable ?? resizable.value) && (
+ <span class="resize-handle"></span>
+ )}
+ </div>
+ );
+ },
+});
diff --git a/packages/devui-vue/devui/data-grid/src/composables/use-data-grid.ts b/packages/devui-vue/devui/data-grid/src/composables/use-data-grid.ts
@@ -10,7 +10,7 @@ import { ColumnType, RowHeightMap } from '../const';
 import { calcEachColumnWidth } from '../utils';
 
 export function useDataGrid(props: DataGridProps, ctx: SetupContext) {
- const { data, columns, size, virtualScroll } = toRefs(props);
+ const { data, columns, size, virtualScroll, columnVirtualScroll } = toRefs(props);
  const scrollRef = ref<HTMLElement>();
  const headBoxRef = ref<HTMLElement>();
  const bodyContentWidth = ref(0);
@@ -125,7 +125,7 @@ export function useDataGrid(props: DataGridProps, ctx: SetupContext) {
  }
  bodyTotalWidth += itemColumn.width as number;
  }
- if (!virtualScroll.value) {
+ if (!(columnVirtualScroll.value ?? virtualScroll.value)) {
  renderColumnData.value = scrollXParams.originColumnData;
  translateX.value = renderColumnData.value[0]?.offsetLeft ?? 0;
  }
@@ -185,7 +185,7 @@ export function useDataGrid(props: DataGridProps, ctx: SetupContext) {
  let distance = 0;
  nextTick(() => {
  initOriginColumnData();
- if (virtualScroll.value && scrollRef.value) {
+ if ((columnVirtualScroll.value ?? virtualScroll.value) && scrollRef.value) {
  distance = scrollRef.value.scrollLeft;
  initVirtualColumnData(distance, scrollRef.value.clientWidth);
  }
@@ -207,7 +207,7 @@ export function useDataGrid(props: DataGridProps, ctx: SetupContext) {
  watch(
  virtualColumnData,
  (val: InnerColumnConfig[]) => {
- if (virtualScroll.value) {
+ if (columnVirtualScroll.value ?? virtualScroll.value) {
  renderColumnData.value = val;
  }
  },
@@ -231,7 +231,7 @@ export function useDataGrid(props: DataGridProps, ctx: SetupContext) {
  return;
  }
  scrollXParams.distance = scrollLeft;
- virtualScroll.value && calcVirtualColumnData(scrollXParams);
+ (columnVirtualScroll.value ?? virtualScroll.value) && calcVirtualColumnData(scrollXParams);
  } else if (scrollTop !== scrollYParams.distance) {
  if (scrollYParams.originRowData.length === 0) {
  return;
@@ -249,7 +249,7 @@ export function useDataGrid(props: DataGridProps, ctx: SetupContext) {
  let distance = 0;
  initOriginColumnData();
  distance = scrollRef.value!.scrollLeft;
- virtualScroll.value && initVirtualColumnData(distance, scrollRef.value!.clientWidth);
+ (columnVirtualScroll.value ?? virtualScroll.value) && initVirtualColumnData(distance, scrollRef.value!.clientWidth);
  }
  });
  resizeObserver.observe(scrollRef.value);