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