plain-design 1.0.0-beta.3 → 1.0.0-beta.30

package/src/packages/components/Popup/index.tsx

@@ -1,4 +1,4 @@
-import {ComponentPropsType, computed, designComponent, getComponentCls, onBeforeUnmount, PropType, reactive, RenderNode, useClassCache, useModel, useStyleCache, watch, watchEffect} from "plain-design-composition";
+import {ComponentPropsType, computed, designComponent, Fragment, getComponentCls, onBeforeUnmount, PropType, reactive, RenderNode, useClassCache, useModel, useStyleCache, watch, watchEffect} from "plain-design-composition";
 import {iPopupAnimation, iPopupCustomOption, iPopupDefaultOption, iPopupPlacement, iPopupTrigger, iPopupUseOption, PopupItemProvide} from "../usePopup/utils/popup.utils";
 import {Reference} from "../Reference";
 import {usePopup} from "../usePopup";
@@ -34,7 +34,8 @@ export const Popup = designComponent({
     beforeHide: { type: Function as PropType<iPopupCustomOption['beforeHide']> },         // 隐藏之前处理动作，返回false则阻止隐藏
     destroyOnClose: { type: Boolean, default: true, },                                                    // 是否在关闭的时候销毁内容
     type: { type: String as PropType<iPopupDefaultOption['type']> },                      // 类型，在打开一个popup的时候，会将同类型的popup自动关闭
-    to: { type: String as PropType<iPopupDefaultOption['to']> },                          // 挂载到某个dom节点下
+    appendToBody: { type: Boolean as PropType<iPopupDefaultOption['appendToBody']>, default: true },  // 挂载到某个dom节点下
+    transformRefreshOnScroll: { type: Boolean as PropType<iPopupDefaultOption['transformRefreshOnScroll']>, default: true },// scroll的时候refresh使用transform来优化
     offset: { type: Number as PropType<iPopupDefaultOption['offset']> },                  // 在direction方向上的距离
     autoSwitchDirection: { type: Boolean as PropType<iPopupDefaultOption['autoSwitchDirection']>, default: true },// 当空间不够时，是否自动切换direction
     size: { type: String as PropType<iPopupDefaultOption['size']> },                      // popup内容尺寸
@@ -139,7 +140,9 @@ export const Popup = designComponent({
     const reference = computed(() => {
       let reference: any = props.reference || state.getReference();
       if (!!reference) {
-        if (typeof reference === "function") {reference = reference();}
+        if (typeof reference === "function") {
+          reference = reference();
+        }
         if (!!reference && !!reference.$el) {
           reference = reference.$el;
         }
@@ -155,7 +158,9 @@ export const Popup = designComponent({
     const stickyReference = computed(() => {
       let reference: any = props.stickyReference;
       if (!!reference) {
-        if (typeof reference === "function") {reference = reference();}
+        if (typeof reference === "function") {
+          reference = reference();
+        }
         if (!!reference && !!reference.$el) {
           reference = reference.$el;
         }
@@ -226,7 +231,8 @@ export const Popup = designComponent({
         noPadding: props.noPadding,
         destroyOnClose: props.destroyOnClose,
         type: props.type,
-        to: props.to,
+        appendToBody: props.appendToBody,
+        transformRefreshOnScroll: props.transformRefreshOnScroll,
         offset: props.offset,
         autoSwitchDirection: props.autoSwitchDirection,
         refreshOnScroll: props.refreshOnScroll,
@@ -266,12 +272,16 @@ export const Popup = designComponent({
         },
         /*开启之前检查，如果已经禁用则禁止显示*/
         beforeShow: () => {
-          if (props.disabled || props.readonly) {return false;}
+          if (props.disabled || props.readonly) {
+            return false;
+          }
           return props.beforeShow?.();
         },
         /*关闭之前检查，如果已经禁用则禁止关闭*/
         beforeHide: () => {
-          if (props.disabled || props.readonly) {return false;}
+          if (props.disabled || props.readonly) {
+            return false;
+          }
           return props.beforeHide?.();
         },
 
@@ -284,7 +294,7 @@ export const Popup = designComponent({
               {(slots.head.isExist() || !!props.title) && (
                 <div className="popper-head">{slots.head(typeof props.title === "function" ? props.title() : props.title)}</div>
               )}
-              {slots.popper(typeof props.message === "function" ? props.message() : props.message)}
+              <Fragment key="popper">{slots.popper(typeof props.message === "function" ? props.message() : props.message)}</Fragment>
             </div>
           );
 
@@ -346,14 +356,18 @@ export const Popup = designComponent({
      */
     if (!!model.value) {
       const unwatch = watch(() => reference.value, reference => {
-        if (!reference) {return;}
+        if (!reference) {
+          return;
+        }
         unwatch();
         $popup.show(state.getOption());
       });
     }
 
     onBeforeUnmount(
-      watch(() => props.watchData, () => {$popup.update(state.getOption());})
+      watch(() => props.watchData, () => {
+        $popup.update(state.getOption());
+      })
     );
 
     const refresh = () => {

package/src/packages/components/ProgressBar/progress-bar.scss

@@ -32,7 +32,7 @@
         text-align: right;
 
         span {
-          color: white;
+         color: plv(pbfc);
         }
       }
     }

package/src/packages/components/Rate/index.tsx

@@ -5,6 +5,7 @@ import {Icon} from "../Icon";
 import './rate.scss';
 import {EditProps, useEdit} from "../../uses/useEdit";
 import {StyleProps, ThemeStatus, useStyle} from "../../uses/useStyle";
+import {ClientZoom} from "../ClientZoom";
 
 export const Rate = designComponent({
   name: 'rate',
@@ -79,7 +80,8 @@ export const Rate = designComponent({
 
     const methods = {
       reset: (e: MouseEvent | iMouseEvent) => {
-        let dur = e.clientX - (elLeft.value || 0);
+        const { clientX } = ClientZoom.getClientPosition(e);
+        let dur = clientX - (elLeft.value || 0);
         let start = 0;
         let end = totalWidth.value;
         let step = end / props.count;

package/src/packages/components/Scroll/HorizontalScrollbar.tsx

@@ -5,6 +5,7 @@ import {enableUserSelect} from "plain-utils/dom/enableUserSelect";
 import {Scroll} from "./index";
 import {delay} from "plain-utils/utils/delay";
 import Tooltip from "../Tooltip";
+import {ClientZoom} from "../ClientZoom";
 
 export const HorizontalScrollbar = designComponent({
   props: {
@@ -41,15 +42,17 @@ export const HorizontalScrollbar = designComponent({
         state.scrollLeft = (e.target as HTMLElement).scrollLeft;
       },
       onMousedown: (e: iMouseEvent) => {
+        const { clientX } = ClientZoom.getClientPosition(e);
         scroll.freezeState.isDragging = true;
         dragState.left = left.value;
-        dragState.clientX = e.clientX;
+        dragState.clientX = clientX;
         document.addEventListener('mousemove', handler.onMousemove);
         document.addEventListener('mouseup', handler.onMouseup);
         disabledUserSelect();
       },
       onMousemove: (e: MouseEvent) => {
-        let deltaX = e.clientX - dragState.clientX;
+        const { clientX } = ClientZoom.getClientPosition(e);
+        let deltaX = clientX - dragState.clientX;
         const left = dragState.left + deltaX;
         let scrollLeft = left * (scroll.state.contentWidth - scroll.state.hostWidth) / (scroll.state.hostWidth - width.value);
         scrollLeft = Math.max(0, Math.min(scrollLeft, scroll.state.contentWidth - scroll.state.hostWidth));
@@ -66,7 +69,8 @@ export const HorizontalScrollbar = designComponent({
         enableUserSelect();
 
         if (scroll.props.scrollAfterDragEnd) {
-          let deltaX = e.clientX - dragState.clientX;
+          const { clientX } = ClientZoom.getClientPosition(e);
+          let deltaX = clientX - dragState.clientX;
           const left = dragState.left + deltaX;
           scroll.refs.wrapper!.scrollLeft = left * (scroll.state.contentWidth - scroll.state.hostWidth) / (scroll.state.hostWidth - width.value);
         }

package/src/packages/components/Scroll/VerticalScrollbar.tsx

@@ -5,6 +5,7 @@ import {enableUserSelect} from "plain-utils/dom/enableUserSelect";
 import {Scroll} from "./index";
 import {delay} from "plain-utils/utils/delay";
 import Tooltip from "../Tooltip";
+import {ClientZoom} from "../ClientZoom";
 
 export const VerticalScrollbar = designComponent({
   props: {
@@ -46,15 +47,17 @@ export const VerticalScrollbar = designComponent({
         state.scrollTop = (e.target as HTMLElement).scrollTop;
       },
       onMousedown: (e: iMouseEvent) => {
+        const { clientY } = ClientZoom.getClientPosition(e);
         scroll.freezeState.isDragging = true;
         dragState.top = top.value;
-        dragState.clientY = e.clientY;
+        dragState.clientY = clientY;
         document.addEventListener('mousemove', handler.onMousemove);
         document.addEventListener('mouseup', handler.onMouseup);
         disabledUserSelect();
       },
       onMousemove: (e: MouseEvent) => {
-        let deltaY = e.clientY - dragState.clientY;
+        const { clientY } = ClientZoom.getClientPosition(e);
+        let deltaY = clientY - dragState.clientY;
         let top = dragState.top + deltaY;
         let scrollTop = top * (scroll.state.contentHeight - scroll.state.hostHeight) / (scroll.state.hostHeight - height.value);
         scrollTop = Math.max(0, Math.min(scrollTop, scroll.state.contentHeight - scroll.state.hostHeight));
@@ -72,7 +75,8 @@ export const VerticalScrollbar = designComponent({
         enableUserSelect();
 
         if (scroll.props.scrollAfterDragEnd) {
-          let deltaY = e.clientY - dragState.clientY;
+          const { clientY } = ClientZoom.getClientPosition(e);
+          let deltaY = clientY - dragState.clientY;
           let top = dragState.top + deltaY;
           scroll.refs.wrapper!.scrollTop = top * (scroll.state.contentHeight - scroll.state.hostHeight) / (scroll.state.hostHeight - height.value);
         }

package/src/packages/components/Select/createPublicSelectRender.tsx

@@ -236,7 +236,7 @@ export function createPublicSelectRender(
                   const { virtualRowSize } = props;
                   return virtualRowSize == null ? SelectDefaultVirtualRowSize[styleComputed.value.size] : virtualRowSize;
                 })()}>
-                  {{ default: ({ item, index }: { item: iSelectOptionProps, index: number }) => <SelectOption {...item} index={index} key={index}/> }}
+                  {{ default: ({ item, index, vIndex }: { item: iSelectOptionProps, index: number, vIndex: number }) => <SelectOption {...item} index={index} key={vIndex}/> }}
                 </VirtualList>
               </div>) : (
                 matchOptionPropsList.map((i, index) => (<SelectOption {...i} index={index}/>))

package/src/packages/components/Slider/slider.scss

@@ -47,7 +47,7 @@
         transition: all 300ms ease;
         opacity: 0;
         background-color: rgba(black, 0.8);
-        color: white;
+        color: #ffffff;
         padding: 3px 6px;
         line-height: initial;
         position: absolute;

package/src/packages/components/Slider/useSliderDotDragier.tsx

@@ -3,6 +3,7 @@ import {disabledUserSelect} from "plain-utils/dom/disabledUserSelect";
 import {enableUserSelect} from "plain-utils/dom/enableUserSelect";
 import {iMouseEvent, reactive} from "plain-design-composition";
 import {iSliderHooks} from "./slider.utils";
+import {ClientZoom} from "../ClientZoom";
 
 export function useSliderDotDraggier<InitialState>(
   hooks: iSliderHooks,
@@ -24,10 +25,11 @@ export function useSliderDotDraggier<InitialState>(
 
   const handler = {
     onMousedown: (e: iMouseEvent) => {
+      const { clientX, clientY } = ClientZoom.getClientPosition(e);
       staticState = {
         start: {
-          x: e.clientX,
-          y: e.clientY,
+          x: clientX,
+          y: clientY,
         },
         state: getInitialState(),
       };
@@ -46,8 +48,9 @@ export function useSliderDotDraggier<InitialState>(
     },
     onMousemove: (e: MouseEvent) => {
       if (!staticState) {return;}
-      const durX = e.clientX - staticState.start.x;
-      const durY = e.clientY - staticState.start.y;
+      const { clientX, clientY } = ClientZoom.getClientPosition(e);
+      const durX = clientX - staticState.start.x;
+      const durY = clientY - staticState.start.y;
       handleDraggier({
         durX,
         durY,

package/src/packages/components/StepGroup/step-group.scss

@@ -1,12 +1,12 @@
 @include prefix(step-group) {
   .#{componentName(step)} {
     .step-title {
-      font-size: 16px;
+      font-size: plv(font-size-normal);
       color: plv(text-1);
     }
 
     .step-content {
-      font-size: 14px;
+      font-size: plv(font-size-small);
     }
 
     .step-dot {
@@ -21,7 +21,7 @@
     .step-icon {
       width: 32px;
       height: 32px;
-      font-size: 16px;
+      font-size: plv(font-size-normal);
       line-height: 32px;
       text-align: center;
       border-radius: 32px;
@@ -200,7 +200,7 @@
         .step-icon {
           border-color: plv(primary-6);
           background-color: plv(primary-6);
-          color: white;
+          color: plv(pbfc);
         }
 
         .step-dot {
@@ -227,7 +227,7 @@
         .step-icon {
           border-color: plv(primary-6);
           background-color: plv(primary-6);
-          color: white;
+          color: plv(pbfc);
         }
 
         .step-title {
@@ -266,7 +266,7 @@
         .step-icon {
           border-color: plv(error-6);
           background-color: plv(error-6);
-          color: white;
+          color: plv(pbfc);
         }
 
         .step-title {
@@ -304,7 +304,7 @@
       .step-icon {
         width: 20px;
         height: 20px;
-        font-size: 12px;
+        font-size: plv(font-size-small);
         line-height: 20px;
         text-align: center;
         border-radius: 20px;
@@ -328,11 +328,11 @@
     }
 
     .step-title {
-      font-size: 14px;
+      font-size: plv(font-size-normal);
     }
 
     .step-content {
-      font-size: 12px;
+      font-size: plv(font-size-small);
     }
 
     &.step-group-vertical {

package/src/packages/components/TabGroup/TabsInner.tsx

@@ -1,12 +1,14 @@
-import {designComponent, mergeAttrs, nextTick, PropType, reactive, useStyles, watch} from "plain-design-composition";
+import {designComponent, mergeAttrs, nextTick, PropType, reactive, RenderNode, useStyles, watch} from "plain-design-composition";
 import {PlTabComponent} from "../Tab";
 
 export const TabsInner = designComponent({
   props: {
     item: { type: Object as PropType<PlTabComponent>, required: true },
     active: { type: Boolean },
+    render: { type: Function as PropType<() => RenderNode>, required: true }
   },
-  setup({ props }) {
+  slots: ['default'],
+  setup({ props, slots }) {
 
     const state = reactive({
       show: false,
@@ -50,7 +52,7 @@ export const TabsInner = designComponent({
           { class: 'inner-tab', style: styles.value },
           props.item.attrs
         )}>
-          {!!state.init && props.item.slots.default()}
+          {!!state.init && props.render()}
         </div>
       )
     };

package/src/packages/components/TabGroup/header/horizontal/tabs-header-horizontal.scss

@@ -14,7 +14,6 @@
 
     .tabs-header-item {
       display: inline-block;
-      font-size: 14px;
     }
 
     &.tabs-header-show-more {

package/src/packages/components/TabGroup/index.tsx

@@ -6,10 +6,12 @@ import {TabsHeaderHorizontal} from "./header/horizontal/TabsHeaderHorizontal";
 import {TabsHeaderVertical} from "./header/vertical/TabsHeaderVertical";
 import Tab from "../Tab";
 import Icon from "../Icon";
+import {StyleProps, useStyle} from "../../uses/useStyle";
 
 export const TabGroup = designComponent({
   name: 'tab-group',
   props: {
+    ...StyleProps,
     modelValue: { type: [String, Number] },                   // 双向绑定值，控制当前显示的tab
     closeable: { type: Boolean },                             // 是否显示关闭按钮，会派发onClose事件
     fitHeight: { type: Boolean },                             // 适配高度
@@ -21,6 +23,7 @@ export const TabGroup = designComponent({
   slots: ['default', 'operator'],
   setup({ props, event: { emit }, slots }) {
 
+    const { styleComputed } = useStyle();
     const model = useModel(() => props.modelValue, emit.onUpdateModelValue);
     const items = TabCollector.parent();
 
@@ -53,6 +56,7 @@ export const TabGroup = designComponent({
       getComponentCls('tab-group'),
       `tabs-head-position-${props.headPosition}`,
       `tabs-head-type-${props.headType}`,
+      `tab-group-size-${styleComputed.value.size}`,
       {
         'tabs-fit-height': props.fitHeight
       },
@@ -97,7 +101,7 @@ export const TabGroup = designComponent({
         const body = (
           <div className="tabs-body">
             {[...tabs.value].sort((a, b) => String(a.val).localeCompare(String(b.val))).map((tab, index) => (
-              <TabsInner item={tab.item} key={index} active={tab.active}/>
+              <TabsInner item={tab.item} key={index} active={tab.active} render={() => tab.item.slots.default()}/>
             ))}
           </div>
         );

package/src/packages/components/TabGroup/tabs.scss

@@ -33,4 +33,7 @@
       margin-left: 4px;
     }
   }
+
+  @include sizeMixin(tab-group, (font-size)) {
+  }
 }

package/src/packages/components/Table/standard/PlcExpand.tsx

@@ -65,9 +65,9 @@ export const PlcExpand = designComponent({
        * @author  韦胜健
        * @date    2022/11/17 10:46
        */
-      renderExpand: (node: iTableNode) => {
+      renderExpand: (node: iTableNode, vIndex: number, vid: string, index: number) => {
         return (
-          <tr className="plt-row plt-expand-row" key={`expand_${node.state.index}`}>
+          <tr className="plt-row plt-expand-row" key={`expand_${table.props.virtualRowType === 'virtualIndex' ? vIndex : index}`} data-vid={vid}>
             <td className="plt-cell" rowSpan={1} colSpan={totalSpan.value}>
               <div className="plt-expand-body" style={expandStyles.value}>
                 {scopeSlots.expand({ node, row: node.data })}
@@ -128,29 +128,21 @@ export const PlcExpand = designComponent({
       },
     };
 
-    /**
-     * 不允许启用行虚拟滚动
-     * @author  韦胜健
-     * @date    2022/11/17 13:56
-     */
-    onBeforeUnmount(table.hooks.onEnableVirtual.use(() => false));
-
     /**
      * 拦截行渲染
      * @author  韦胜健
      * @date    2022/11/17 14:15
      */
-    onBeforeUnmount(table.hooks.onRenderRow.use((scope) => {
-      const { node, row, content } = scope;
-      if (!utils.isExpand(row)) {return;}
-      return {
-        node,
-        row,
-        content: <>
-          {content}
-          {utils.renderExpand(node)}
-        </>
-      };
+    onBeforeUnmount(table.hooks.onTableMessyData.use(({ data }) => {
+      const newData = [] as any[];
+      data.forEach(item => {
+        newData.push(item);
+        if (typeof item === "function") {return;}
+        if (utils.isExpand(item.data)) {
+          newData.push((param: any) => utils.renderExpand(item, param.vIndex, param.vid, param.index));
+        }
+      });
+      return { data: newData };
     }));
 
     /**

package/src/packages/components/Table/table/Table.tsx

@@ -108,6 +108,8 @@ export const Table = designComponent({
      */
     const { bodyNodes, summaryNodes } = useTableNode({ props, formValidator, dataRef });
 
+    const tableBodyNodes = computed(() => hooks.onTableMessyData.exec({ data: [...bodyNodes.value] }).data);
+
     const showRows = computed((): number => {
       const bodyRows = bodyNodes.value.length;
       if (props.showRows === 'auto') {
@@ -323,9 +325,10 @@ export const Table = designComponent({
               <VirtualTable
                 ref={onRefVirtual}
                 height={tableHeight.value || undefined}
-                data={bodyNodes.value}
+                data={tableBodyNodes.value}
                 headData={plcData.value?.headPlcListArray}
                 size={numberState.bodyRowHeight}
+                dynamicSize={props.dynamicSize}
                 headSize={numberState.headRowHeight}
                 width={plcData.value!.targetTableWidth!}
                 summaryData={summaryNodes.value}
@@ -351,8 +354,12 @@ export const Table = designComponent({
                       </tr>
                     ))
                   ),
-                  default: ({ item, index, virtualIndex }) => (
-                    <PltRow table={refer} node={item} vid={index} key={virtualIndex}/>
+                  default: ({ item, vid, vIndex, index }) => (
+                    typeof item !== "function" ? (
+                      <PltRow table={refer} node={item} vid={vid} key={props.virtualRowType === 'virtualIndex' ? vIndex : index}/>
+                    ) : (
+                      item({ vid, vIndex, index })
+                    )
                   ),
                 }}
               />

package/src/packages/components/Table/table/head/useHeadCellResize.ts

@@ -4,6 +4,7 @@ import {Table} from "../../index";
 import {tPlcType} from "../../plc/utils/plc.utils";
 import {addClass} from "plain-utils/dom/addClass";
 import {getComponentCls, iMouseEvent} from "plain-design-composition";
+import {ClientZoom} from "../../../ClientZoom";
 
 /**
  * 处理表头拖拽调整宽度的功能
@@ -21,6 +22,8 @@ export function useHeadCellResize(table: typeof Table.use.class, getPlc: () => t
   const handler = {
     mousedown: (e: iMouseEvent) => {
 
+      const { clientX } = ClientZoom.getClientPosition(e);
+
       const tableEl = table.refs.el!;
 
       e.preventDefault();
@@ -29,7 +32,7 @@ export function useHeadCellResize(table: typeof Table.use.class, getPlc: () => t
       window.addEventListener('mousemove', handler.mousemove);
       window.addEventListener('mouseup', handler.mouseup);
       disabledUserSelect();
-      state.startX = e.clientX;
+      state.startX = clientX;
 
       state.indicatorEl = document.createElement('div');
 
@@ -55,14 +58,16 @@ export function useHeadCellResize(table: typeof Table.use.class, getPlc: () => t
       document.body.appendChild(state.indicatorEl);
     },
     mousemove: (e: MouseEvent) => {
-      state.indicatorEl!.style.transform = `translate3d(${e.clientX}px,0,0)`;
+      const { clientX } = ClientZoom.getClientPosition(e);
+      state.indicatorEl!.style.transform = `translate3d(${clientX}px,0,0)`;
     },
     mouseup: (e: MouseEvent) => {
+      const { clientX } = ClientZoom.getClientPosition(e);
       window.removeEventListener('mousemove', handler.mousemove);
       window.removeEventListener('mouseup', handler.mouseup);
       enableUserSelect();
       document.body.removeChild(state.indicatorEl!);
-      state.endX = e.clientX;
+      state.endX = clientX;
       let durWidth = state.endX - state.startX!;
       getPlc().setDurWidth(durWidth);
     }

package/src/packages/components/Table/table/table.scss

@@ -100,6 +100,7 @@
     &.plt-cell-link {
       color: plv(primary-6);
       cursor: pointer;
+      text-decoration: underline;
 
       &:hover {
         text-decoration: underline;

package/src/packages/components/Table/table/use/useTableDraggier.col.tsx

@@ -12,6 +12,7 @@ import {getComponentCls, iMouseEvent, nextIndex, StyleProperties} from "plain-de
 import {iTableHooks} from "../utils/createTableHooks";
 import {iElementRect} from "../../../../utils/getRowEl";
 import {createEnum} from "plain-utils/utils/createEnum";
+import {ClientZoom} from "../../../ClientZoom";
 
 export function useTableDraggierCol(
   {
@@ -223,11 +224,12 @@ export function useTableDraggierCol(
     };
 
     const start = (e: iMouseEvent, plc: tPlcType) => {
+      const { clientX, clientY } = ClientZoom.getClientPosition(e);
       staticState = {
         plc,
         start: {
-          x: e.clientX,
-          y: e.clientY,
+          x: clientX,
+          y: clientY,
         },
         data: null
       };
@@ -237,11 +239,13 @@ export function useTableDraggierCol(
     const update = (e?: MouseEvent) => {
       if (!staticState) {return;}
 
+      const { clientX, clientY } = !e ? { clientX: 0, clientY: 0 } : ClientZoom.getClientPosition(e);
+
       let isDragging = !!staticState.data;
 
       if (!isDragging) {
         /*拖拽超过一定距离的时候才开始拖拽，避免与点击事件冲突*/
-        if (!!e && Math.abs(e.clientX - staticState.start.x) > 5) {
+        if (!!e && Math.abs(clientX - staticState.start.x) > 5) {
           isDragging = true;
           initDraggierState();
         }
@@ -253,7 +257,7 @@ export function useTableDraggierCol(
       }
 
       if (!!e) {
-        staticState.data.move = { x: e.clientX, y: e.clientY };
+        staticState.data.move = { x: clientX, y: clientY };
       }
       const { data: { cloneTable, move, table, left }, start } = staticState;
       cloneTable.style.top = table.getBoundingClientRect().top + 'px';
@@ -470,7 +474,8 @@ export function useTableDraggierCol(
     };
     const update = (e?: MouseEvent) => {
       if (!!e) {
-        staticState!.moveClientX = e.clientX;
+        const { clientX } = ClientZoom.getClientPosition(e);
+        staticState!.moveClientX = clientX;
       } else {
         staticState!.moveScrollLeft = staticState!.scrollParent!.scrollLeft;
       }