@vxe-ui/core 4.4.35 → 4.4.36

package/dist/all.esm.js

@@ -1,8 +1,8 @@
-import { h, reactive, computed, inject, provide, createCommentVNode } from 'vue';
+import { h, reactive, ref, computed, inject, provide, createCommentVNode } from 'vue';
 import XEUtils from 'xe-utils';
 import DomZIndex from 'dom-zindex';
 
-const coreVersion = "4.4.35";
+const coreVersion = "4.4.36";
 const VxeCore = {
     coreVersion,
     uiVersion: '',
@@ -402,7 +402,7 @@ function createLog(type, name) {
         return msg;
     };
 }
-const version = "4.4.35";
+const version = "4.4.36";
 const log = {
     create: createLog,
     warn: createLog('warn', `v${version}`),
@@ -1181,8 +1181,13 @@ const popperUtils = {
 
 const hooks = new Store();
 
+const { getThumbOffsetSize, getThumbSize, getScrollFromClick, getScrollFromDrag } = scrollbarUtils;
+/**
+ * 组件尺寸上下文
+ * @param props
+ * @returns
+ */
 function useSize(props) {
-    // 组件尺寸上下文
     const xeSizeInfo = inject('xeSizeInfo', null);
     const computeSize = computed(() => {
         const { size } = props;
@@ -1191,8 +1196,25 @@ function useSize(props) {
     provide('xeSizeInfo', computeSize);
     return { computeSize };
 }
+/**
+ * 权限码处理
+ * @param props
+ * @returns
+ */
+function usePermission(props) {
+    const computePermissionInfo = computed(() => {
+        return handleCheckInfo(props.permissionCode, props.permissionMethod);
+    });
+    return {
+        computePermissionInfo
+    };
+}
+/**
+ * 虚拟滚动条是否启用
+ * @param props
+ * @returns
+ */
 function useVScrollbar(props) {
-    // 组件虚拟滚动条
     const xeScrollbarInfo = inject('xeScrollbarInfo', null);
     const computeIsVScrollbar = computed(() => {
         const { useScrollbar } = props;
@@ -1201,18 +1223,196 @@ function useVScrollbar(props) {
     provide('xeScrollbarInfo', computeIsVScrollbar);
     return { computeIsVScrollbar };
 }
-function usePermission(props) {
-    const computePermissionInfo = computed(() => {
-        return handleCheckInfo(props.permissionCode, props.permissionMethod);
-    });
+/**
+ * 初始化虚拟滚动条
+ * @param reactData
+ * @param internalData
+ * @param refViewElem
+ * @returns
+ */
+const useInitVScrollbar = ($xeVM) => {
+    const { reactData, internalData } = $xeVM;
+    const refTrackXElem = ref();
+    const refTrackYElem = ref();
+    const refThumbXElem = ref();
+    const refThumbYElem = ref();
+    const updateThumbSize = () => {
+        const viewEl = $xeVM.getScrollViewElem();
+        if (!viewEl) {
+            return;
+        }
+        if (!viewEl.clientHeight || !viewEl.clientHeight) {
+            return;
+        }
+        const trackXEl = refTrackXElem.value;
+        const xThumbWidth = trackXEl ? getThumbSize(viewEl.clientWidth, viewEl.scrollWidth, trackXEl.clientWidth) : 0;
+        const thumbXElem = refThumbXElem.value;
+        if (thumbXElem) {
+            thumbXElem.style.width = xThumbWidth + 'px';
+        }
+        reactData.xThumbWidth = xThumbWidth;
+        const trackYEl = refTrackYElem.value;
+        const yThumbHeight = trackYEl ? getThumbSize(viewEl.clientHeight, viewEl.scrollHeight, trackYEl.clientHeight) : 0;
+        const thumbYElem = refThumbYElem.value;
+        if (thumbYElem) {
+            thumbYElem.style.height = yThumbHeight + 'px';
+        }
+        reactData.yThumbHeight = yThumbHeight;
+    };
+    const updateThumbOffset = () => {
+        const viewEl = $xeVM.getScrollViewElem();
+        if (!viewEl) {
+            return;
+        }
+        if (!viewEl.clientHeight || !viewEl.clientHeight) {
+            return;
+        }
+        const { xThumbWidth, yThumbHeight } = reactData;
+        const trackXEl = refTrackXElem.value;
+        const thumbXElem = refThumbXElem.value;
+        const xThumbLeft = trackXEl && xThumbWidth ? getThumbOffsetSize(viewEl.scrollLeft, viewEl.clientWidth, viewEl.scrollWidth, trackXEl.clientWidth, xThumbWidth) : 0;
+        internalData.xThumbLeft = xThumbLeft;
+        if (thumbXElem && xThumbWidth) {
+            thumbXElem.style.width = xThumbWidth + 'px';
+            thumbXElem.style.transform = `translateX(${xThumbLeft}px)`;
+        }
+        const trackYEl = refTrackYElem.value;
+        const thumbYElem = refThumbYElem.value;
+        const yThumbTop = trackYEl && yThumbHeight ? getThumbOffsetSize(viewEl.scrollTop, viewEl.clientHeight, viewEl.scrollHeight, trackYEl.clientHeight, yThumbHeight) : 0;
+        internalData.yThumbTop = yThumbTop;
+        if (thumbYElem && yThumbHeight) {
+            thumbYElem.style.height = yThumbHeight + 'px';
+            thumbYElem.style.transform = `translateY(${yThumbTop}px)`;
+        }
+    };
+    const clickTrackXEvent = (evnt) => {
+        const trackEl = evnt.currentTarget;
+        if (trackEl !== evnt.target) {
+            return;
+        }
+        const viewEl = $xeVM.getScrollViewElem();
+        if (!viewEl) {
+            return;
+        }
+        const { xThumbWidth } = reactData;
+        const trackRect = trackEl.getBoundingClientRect();
+        viewEl.scrollTo({
+            left: getScrollFromClick(evnt.clientX - trackRect.left, viewEl.clientWidth, viewEl.scrollWidth, trackEl.clientWidth, xThumbWidth),
+            behavior: 'auto'
+        });
+    };
+    const clickTrackYEvent = (evnt) => {
+        const trackEl = evnt.currentTarget;
+        if (trackEl !== evnt.target) {
+            return;
+        }
+        const viewEl = $xeVM.getScrollViewElem();
+        if (!viewEl) {
+            return;
+        }
+        const { yThumbHeight } = reactData;
+        const trackRect = trackEl.getBoundingClientRect();
+        viewEl.scrollTo({
+            top: getScrollFromClick(evnt.clientY - trackRect.top, viewEl.clientHeight, viewEl.scrollHeight, trackEl.clientHeight, yThumbHeight),
+            behavior: 'auto'
+        });
+    };
+    const pointerdownThumbXEvent = (evnt) => {
+        const thumbEl = evnt.currentTarget;
+        internalData.isThumbDrag = true;
+        thumbEl.setPointerCapture(evnt.pointerId);
+        const viewEl = $xeVM.getScrollViewElem();
+        if (!viewEl) {
+            return;
+        }
+        const { xThumbWidth } = reactData;
+        const trackEl = thumbEl.parentElement;
+        const trackRect = trackEl.getBoundingClientRect();
+        const pointerPosition = evnt.clientX - trackRect.left;
+        // 记录 thumb 的偏移
+        const thumbOffset = getThumbOffsetSize(viewEl.scrollLeft, viewEl.clientWidth, viewEl.scrollWidth, trackEl.clientWidth, xThumbWidth);
+        internalData.thumbDragOffset = pointerPosition - thumbOffset;
+    };
+    const pointermoveThumbXEvent = (evnt) => {
+        const thumbEl = evnt.currentTarget;
+        if (!thumbEl.hasPointerCapture(evnt.pointerId)) {
+            return;
+        }
+        const { isThumbDrag, thumbDragOffset } = internalData;
+        if (isThumbDrag) {
+            const viewEl = $xeVM.getScrollViewElem();
+            if (!viewEl) {
+                return;
+            }
+            const { xThumbWidth } = reactData;
+            const thumbEl = evnt.currentTarget;
+            const trackEl = thumbEl.parentElement;
+            const trackRect = trackEl.getBoundingClientRect();
+            // 更新偏移
+            viewEl.scrollLeft = getScrollFromDrag(evnt.clientX - trackRect.left, thumbDragOffset, viewEl.clientWidth, viewEl.scrollWidth, trackEl.clientWidth, xThumbWidth);
+        }
+    };
+    const cleatPointerThumbEvent = (evnt) => {
+        const thumbEl = evnt.currentTarget;
+        thumbEl.releasePointerCapture(evnt.pointerId);
+        internalData.isThumbDrag = false;
+    };
+    const pointerdownThumbYEvent = (evnt) => {
+        const thumbEl = evnt.currentTarget;
+        internalData.isThumbDrag = true;
+        thumbEl.setPointerCapture(evnt.pointerId);
+        const viewEl = $xeVM.getScrollViewElem();
+        if (!viewEl) {
+            return;
+        }
+        const { yThumbHeight } = reactData;
+        const trackEl = thumbEl.parentElement;
+        const trackRect = trackEl.getBoundingClientRect();
+        const pointerPosition = evnt.clientY - trackRect.top;
+        // 记录 thumb 的偏移
+        const thumbOffset = getThumbOffsetSize(viewEl.scrollTop, viewEl.clientHeight, viewEl.scrollHeight, trackEl.clientHeight, yThumbHeight);
+        internalData.thumbDragOffset = pointerPosition - thumbOffset;
+    };
+    const pointermoveThumbYEvent = (evnt) => {
+        const thumbEl = evnt.currentTarget;
+        if (!thumbEl.hasPointerCapture(evnt.pointerId)) {
+            return;
+        }
+        const { isThumbDrag, thumbDragOffset } = internalData;
+        if (isThumbDrag) {
+            const viewEl = $xeVM.getScrollViewElem();
+            if (!viewEl) {
+                return;
+            }
+            const { yThumbHeight } = reactData;
+            const thumbEl = evnt.currentTarget;
+            const trackEl = thumbEl.parentElement;
+            const trackRect = trackEl.getBoundingClientRect();
+            // 更新偏移
+            viewEl.scrollTop = getScrollFromDrag(evnt.clientY - trackRect.top, thumbDragOffset, viewEl.clientHeight, viewEl.scrollHeight, trackEl.clientHeight, yThumbHeight);
+        }
+    };
     return {
-        computePermissionInfo
+        refTrackXElem,
+        refTrackYElem,
+        refThumbXElem,
+        refThumbYElem,
+        updateThumbSize,
+        updateThumbOffset,
+        clickTrackXEvent,
+        clickTrackYEvent,
+        pointerdownThumbXEvent,
+        pointermoveThumbXEvent,
+        cleatPointerThumbEvent,
+        pointerdownThumbYEvent,
+        pointermoveThumbYEvent
     };
-}
+};
 const useFns = {
     useSize,
     useVScrollbar,
-    usePermission
+    usePermission,
+    useInitVScrollbar
 };
 
 const installedPlugins = [];
@@ -1299,4 +1499,4 @@ const VxeUI = Object.assign(VxeCore, {
 });
 setTheme();
 
-export { GLOBAL_EVENT_KEYS, VxeCore, VxeUI, baseUtils, checkVersion, clipboard, commands, component, coreVersion, createEvent, VxeUI as default, domUtils, formats, getComponent, getConfig, getI18n, getIcon, getLanguage, getSlotVNs, getTheme, globalEvents, globalResize, globalStore, handleCheckInfo, hasComponent, hasLanguage, hooks, interceptor, log, menus, permission, popperUtils, renderCustomIcon, renderEmptyElement, renderGlobalIcon, renderer, scrollbarUtils, setConfig, setI18n, setIcon, setLanguage, setTheme, use, useFns, usePermission, useSize, useVScrollbar, validators };
+export { GLOBAL_EVENT_KEYS, VxeCore, VxeUI, baseUtils, checkVersion, clipboard, commands, component, coreVersion, createEvent, VxeUI as default, domUtils, formats, getComponent, getConfig, getI18n, getIcon, getLanguage, getSlotVNs, getTheme, globalEvents, globalResize, globalStore, handleCheckInfo, hasComponent, hasLanguage, hooks, interceptor, log, menus, permission, popperUtils, renderCustomIcon, renderEmptyElement, renderGlobalIcon, renderer, scrollbarUtils, setConfig, setI18n, setIcon, setLanguage, setTheme, use, useFns, useInitVScrollbar, usePermission, useSize, useVScrollbar, validators };

package/es/src/core.js

@@ -1,4 +1,4 @@
-export const coreVersion = "4.4.35";
+export const coreVersion = "4.4.36";
 export const VxeCore = {
     coreVersion,
     uiVersion: '',

package/es/src/log.js

@@ -6,7 +6,7 @@ function createLog(type, name) {
         return msg;
     };
 }
-const version = "4.4.35";
+const version = "4.4.36";
 export const log = {
     create: createLog,
     warn: createLog('warn', `v${version}`),

package/es/src/useFns.js

@@ -1,8 +1,14 @@
 import XEUtils from 'xe-utils';
-import { computed, inject, provide } from 'vue';
+import { computed, ref, inject, provide } from 'vue';
 import { handleCheckInfo } from './permission';
+import { scrollbarUtils } from './scrollbar-utils';
+const { getThumbOffsetSize, getThumbSize, getScrollFromClick, getScrollFromDrag } = scrollbarUtils;
+/**
+ * 组件尺寸上下文
+ * @param props
+ * @returns
+ */
 export function useSize(props) {
-    // 组件尺寸上下文
     const xeSizeInfo = inject('xeSizeInfo', null);
     const computeSize = computed(() => {
         const { size } = props;
@@ -11,8 +17,25 @@ export function useSize(props) {
     provide('xeSizeInfo', computeSize);
     return { computeSize };
 }
+/**
+ * 权限码处理
+ * @param props
+ * @returns
+ */
+export function usePermission(props) {
+    const computePermissionInfo = computed(() => {
+        return handleCheckInfo(props.permissionCode, props.permissionMethod);
+    });
+    return {
+        computePermissionInfo
+    };
+}
+/**
+ * 虚拟滚动条是否启用
+ * @param props
+ * @returns
+ */
 export function useVScrollbar(props) {
-    // 组件虚拟滚动条
     const xeScrollbarInfo = inject('xeScrollbarInfo', null);
     const computeIsVScrollbar = computed(() => {
         const { useScrollbar } = props;
@@ -21,16 +44,194 @@ export function useVScrollbar(props) {
     provide('xeScrollbarInfo', computeIsVScrollbar);
     return { computeIsVScrollbar };
 }
-export function usePermission(props) {
-    const computePermissionInfo = computed(() => {
-        return handleCheckInfo(props.permissionCode, props.permissionMethod);
-    });
+/**
+ * 初始化虚拟滚动条
+ * @param reactData
+ * @param internalData
+ * @param refViewElem
+ * @returns
+ */
+export const useInitVScrollbar = ($xeVM) => {
+    const { reactData, internalData } = $xeVM;
+    const refTrackXElem = ref();
+    const refTrackYElem = ref();
+    const refThumbXElem = ref();
+    const refThumbYElem = ref();
+    const updateThumbSize = () => {
+        const viewEl = $xeVM.getScrollViewElem();
+        if (!viewEl) {
+            return;
+        }
+        if (!viewEl.clientHeight || !viewEl.clientHeight) {
+            return;
+        }
+        const trackXEl = refTrackXElem.value;
+        const xThumbWidth = trackXEl ? getThumbSize(viewEl.clientWidth, viewEl.scrollWidth, trackXEl.clientWidth) : 0;
+        const thumbXElem = refThumbXElem.value;
+        if (thumbXElem) {
+            thumbXElem.style.width = xThumbWidth + 'px';
+        }
+        reactData.xThumbWidth = xThumbWidth;
+        const trackYEl = refTrackYElem.value;
+        const yThumbHeight = trackYEl ? getThumbSize(viewEl.clientHeight, viewEl.scrollHeight, trackYEl.clientHeight) : 0;
+        const thumbYElem = refThumbYElem.value;
+        if (thumbYElem) {
+            thumbYElem.style.height = yThumbHeight + 'px';
+        }
+        reactData.yThumbHeight = yThumbHeight;
+    };
+    const updateThumbOffset = () => {
+        const viewEl = $xeVM.getScrollViewElem();
+        if (!viewEl) {
+            return;
+        }
+        if (!viewEl.clientHeight || !viewEl.clientHeight) {
+            return;
+        }
+        const { xThumbWidth, yThumbHeight } = reactData;
+        const trackXEl = refTrackXElem.value;
+        const thumbXElem = refThumbXElem.value;
+        const xThumbLeft = trackXEl && xThumbWidth ? getThumbOffsetSize(viewEl.scrollLeft, viewEl.clientWidth, viewEl.scrollWidth, trackXEl.clientWidth, xThumbWidth) : 0;
+        internalData.xThumbLeft = xThumbLeft;
+        if (thumbXElem && xThumbWidth) {
+            thumbXElem.style.width = xThumbWidth + 'px';
+            thumbXElem.style.transform = `translateX(${xThumbLeft}px)`;
+        }
+        const trackYEl = refTrackYElem.value;
+        const thumbYElem = refThumbYElem.value;
+        const yThumbTop = trackYEl && yThumbHeight ? getThumbOffsetSize(viewEl.scrollTop, viewEl.clientHeight, viewEl.scrollHeight, trackYEl.clientHeight, yThumbHeight) : 0;
+        internalData.yThumbTop = yThumbTop;
+        if (thumbYElem && yThumbHeight) {
+            thumbYElem.style.height = yThumbHeight + 'px';
+            thumbYElem.style.transform = `translateY(${yThumbTop}px)`;
+        }
+    };
+    const clickTrackXEvent = (evnt) => {
+        const trackEl = evnt.currentTarget;
+        if (trackEl !== evnt.target) {
+            return;
+        }
+        const viewEl = $xeVM.getScrollViewElem();
+        if (!viewEl) {
+            return;
+        }
+        const { xThumbWidth } = reactData;
+        const trackRect = trackEl.getBoundingClientRect();
+        viewEl.scrollTo({
+            left: getScrollFromClick(evnt.clientX - trackRect.left, viewEl.clientWidth, viewEl.scrollWidth, trackEl.clientWidth, xThumbWidth),
+            behavior: 'auto'
+        });
+    };
+    const clickTrackYEvent = (evnt) => {
+        const trackEl = evnt.currentTarget;
+        if (trackEl !== evnt.target) {
+            return;
+        }
+        const viewEl = $xeVM.getScrollViewElem();
+        if (!viewEl) {
+            return;
+        }
+        const { yThumbHeight } = reactData;
+        const trackRect = trackEl.getBoundingClientRect();
+        viewEl.scrollTo({
+            top: getScrollFromClick(evnt.clientY - trackRect.top, viewEl.clientHeight, viewEl.scrollHeight, trackEl.clientHeight, yThumbHeight),
+            behavior: 'auto'
+        });
+    };
+    const pointerdownThumbXEvent = (evnt) => {
+        const thumbEl = evnt.currentTarget;
+        internalData.isThumbDrag = true;
+        thumbEl.setPointerCapture(evnt.pointerId);
+        const viewEl = $xeVM.getScrollViewElem();
+        if (!viewEl) {
+            return;
+        }
+        const { xThumbWidth } = reactData;
+        const trackEl = thumbEl.parentElement;
+        const trackRect = trackEl.getBoundingClientRect();
+        const pointerPosition = evnt.clientX - trackRect.left;
+        // 记录 thumb 的偏移
+        const thumbOffset = getThumbOffsetSize(viewEl.scrollLeft, viewEl.clientWidth, viewEl.scrollWidth, trackEl.clientWidth, xThumbWidth);
+        internalData.thumbDragOffset = pointerPosition - thumbOffset;
+    };
+    const pointermoveThumbXEvent = (evnt) => {
+        const thumbEl = evnt.currentTarget;
+        if (!thumbEl.hasPointerCapture(evnt.pointerId)) {
+            return;
+        }
+        const { isThumbDrag, thumbDragOffset } = internalData;
+        if (isThumbDrag) {
+            const viewEl = $xeVM.getScrollViewElem();
+            if (!viewEl) {
+                return;
+            }
+            const { xThumbWidth } = reactData;
+            const thumbEl = evnt.currentTarget;
+            const trackEl = thumbEl.parentElement;
+            const trackRect = trackEl.getBoundingClientRect();
+            // 更新偏移
+            viewEl.scrollLeft = getScrollFromDrag(evnt.clientX - trackRect.left, thumbDragOffset, viewEl.clientWidth, viewEl.scrollWidth, trackEl.clientWidth, xThumbWidth);
+        }
+    };
+    const cleatPointerThumbEvent = (evnt) => {
+        const thumbEl = evnt.currentTarget;
+        thumbEl.releasePointerCapture(evnt.pointerId);
+        internalData.isThumbDrag = false;
+    };
+    const pointerdownThumbYEvent = (evnt) => {
+        const thumbEl = evnt.currentTarget;
+        internalData.isThumbDrag = true;
+        thumbEl.setPointerCapture(evnt.pointerId);
+        const viewEl = $xeVM.getScrollViewElem();
+        if (!viewEl) {
+            return;
+        }
+        const { yThumbHeight } = reactData;
+        const trackEl = thumbEl.parentElement;
+        const trackRect = trackEl.getBoundingClientRect();
+        const pointerPosition = evnt.clientY - trackRect.top;
+        // 记录 thumb 的偏移
+        const thumbOffset = getThumbOffsetSize(viewEl.scrollTop, viewEl.clientHeight, viewEl.scrollHeight, trackEl.clientHeight, yThumbHeight);
+        internalData.thumbDragOffset = pointerPosition - thumbOffset;
+    };
+    const pointermoveThumbYEvent = (evnt) => {
+        const thumbEl = evnt.currentTarget;
+        if (!thumbEl.hasPointerCapture(evnt.pointerId)) {
+            return;
+        }
+        const { isThumbDrag, thumbDragOffset } = internalData;
+        if (isThumbDrag) {
+            const viewEl = $xeVM.getScrollViewElem();
+            if (!viewEl) {
+                return;
+            }
+            const { yThumbHeight } = reactData;
+            const thumbEl = evnt.currentTarget;
+            const trackEl = thumbEl.parentElement;
+            const trackRect = trackEl.getBoundingClientRect();
+            // 更新偏移
+            viewEl.scrollTop = getScrollFromDrag(evnt.clientY - trackRect.top, thumbDragOffset, viewEl.clientHeight, viewEl.scrollHeight, trackEl.clientHeight, yThumbHeight);
+        }
+    };
     return {
-        computePermissionInfo
+        refTrackXElem,
+        refTrackYElem,
+        refThumbXElem,
+        refThumbYElem,
+        updateThumbSize,
+        updateThumbOffset,
+        clickTrackXEvent,
+        clickTrackYEvent,
+        pointerdownThumbXEvent,
+        pointermoveThumbXEvent,
+        cleatPointerThumbEvent,
+        pointerdownThumbYEvent,
+        pointermoveThumbYEvent
     };
-}
+};
 export const useFns = {
     useSize,
     useVScrollbar,
-    usePermission
+    usePermission,
+    useInitVScrollbar
 };