vxe-pc-ui 4.18.21 → 4.18.22

package/lib/result/src/result.js

@@ -63,7 +63,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       const status = props.status || type;
       const slotExtra = slots.extra;
       return (0, _vue.h)('div', {
-        ref: 'refElem',
+        ref: refElem,
         class: ['vxe-result', {
           [`theme--${status}`]: status
         }]

package/lib/result/src/result.min.js

@@ -1 +1 @@
-Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _vue=require("vue"),_comp=require("../../ui/src/comp"),_xeUtils=_interopRequireDefault(require("xe-utils")),_ui=require("../../ui");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}var _default=exports.default=(0,_comp.defineVxeComponent)({name:"VxeResult",props:{imageUrl:String,imageStyle:Object,icon:String,type:[String,Number],status:[String,Number],title:[String,Number],content:[String,Number]},emits:[],setup(n,e){let{emit:u,slots:v}=e;var t=_xeUtils.default.uniqueId(),r=(0,_vue.ref)(),i=(0,_vue.reactive)({});let s={refElem:r},a={},p={xID:t,props:n,context:e,reactData:i,getRefMaps:()=>s,getComputeMaps:()=>a};Object.assign(p,{dispatchEvent:(e,t,r)=>{u(e,(0,_ui.createEvent)(r,{$result:p},t))}},{});return p.renderVN=()=>{var{imageUrl:e,imageStyle:t,icon:r,title:u,type:i,content:s}=n,a=n.status||i,l=v.extra;return(0,_vue.h)("div",{ref:"refElem",class:["vxe-result",{["theme--"+a]:a}]},[(0,_vue.h)("div",{class:"vxe-result--inner"},[e?(0,_vue.h)("div",{class:"vxe-result--img-wrapper"},[(0,_vue.h)("img",{src:e,style:t})]):(0,_vue.h)("div",{class:"vxe-result--icon-wrapper"},[(0,_vue.h)("i",{class:[r,i?(0,_ui.getIcon)()[("RESULT_"+i).toLocaleUpperCase()]:""]})]),(0,_vue.h)("div",{class:"vxe-result--title-wrapper"},""+(u||"")),(0,_vue.h)("div",{class:"vxe-result--content-wrapper"},""+(s||"")),l?(0,_vue.h)("div",{class:"vxe-result--extra-wrapper"},l({})):(0,_ui.renderEmptyElement)(p)])])},p},render(){return this.renderVN()}});
+Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _vue=require("vue"),_comp=require("../../ui/src/comp"),_xeUtils=_interopRequireDefault(require("xe-utils")),_ui=require("../../ui");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}var _default=exports.default=(0,_comp.defineVxeComponent)({name:"VxeResult",props:{imageUrl:String,imageStyle:Object,icon:String,type:[String,Number],status:[String,Number],title:[String,Number],content:[String,Number]},emits:[],setup(n,e){let{emit:u,slots:v}=e;var t=_xeUtils.default.uniqueId();let p=(0,_vue.ref)();var r=(0,_vue.reactive)({});let i={refElem:p},s={},c={xID:t,props:n,context:e,reactData:r,getRefMaps:()=>i,getComputeMaps:()=>s};Object.assign(c,{dispatchEvent:(e,t,r)=>{u(e,(0,_ui.createEvent)(r,{$result:c},t))}},{});return c.renderVN=()=>{var{imageUrl:e,imageStyle:t,icon:r,title:u,type:i,content:s}=n,a=n.status||i,l=v.extra;return(0,_vue.h)("div",{ref:p,class:["vxe-result",{["theme--"+a]:a}]},[(0,_vue.h)("div",{class:"vxe-result--inner"},[e?(0,_vue.h)("div",{class:"vxe-result--img-wrapper"},[(0,_vue.h)("img",{src:e,style:t})]):(0,_vue.h)("div",{class:"vxe-result--icon-wrapper"},[(0,_vue.h)("i",{class:[r,i?(0,_ui.getIcon)()[("RESULT_"+i).toLocaleUpperCase()]:""]})]),(0,_vue.h)("div",{class:"vxe-result--title-wrapper"},""+(u||"")),(0,_vue.h)("div",{class:"vxe-result--content-wrapper"},""+(s||"")),l?(0,_vue.h)("div",{class:"vxe-result--extra-wrapper"},l({})):(0,_ui.renderEmptyElement)(c)])])},c},render(){return this.renderVN()}});

package/lib/scrollbar/index.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.VxeScrollbar = exports.Scrollbar = void 0;
+var _core = require("@vxe-ui/core");
+var _scrollbar = _interopRequireDefault(require("./src/scrollbar"));
+var _dynamics = require("../dynamics");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const VxeScrollbar = exports.VxeScrollbar = Object.assign({}, _scrollbar.default, {
+  install(app) {
+    app.component(_scrollbar.default.name, _scrollbar.default);
+  }
+});
+_dynamics.dynamicApp.use(VxeScrollbar);
+_core.VxeUI.component(_scrollbar.default);
+const Scrollbar = exports.Scrollbar = VxeScrollbar;
+var _default = exports.default = VxeScrollbar;

package/lib/scrollbar/index.min.js

@@ -0,0 +1 @@
+Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.VxeScrollbar=exports.Scrollbar=void 0;var _core=require("@vxe-ui/core"),_scrollbar=_interopRequireDefault(require("./src/scrollbar")),_dynamics=require("../dynamics");function _interopRequireDefault(r){return r&&r.__esModule?r:{default:r}}let VxeScrollbar=exports.VxeScrollbar=Object.assign({},_scrollbar.default,{install(r){r.component(_scrollbar.default.name,_scrollbar.default)}}),Scrollbar=(_dynamics.dynamicApp.use(VxeScrollbar),_core.VxeUI.component(_scrollbar.default),exports.Scrollbar=VxeScrollbar);var _default=exports.default=VxeScrollbar;

package/lib/scrollbar/src/scrollbar.js

@@ -0,0 +1,536 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _vue = require("vue");
+var _comp = require("../../ui/src/comp");
+var _xeUtils = _interopRequireDefault(require("xe-utils"));
+var _ui = require("../../ui");
+var _dom = require("../../ui/src/dom");
+var _util = require("./util");
+var _loading = _interopRequireDefault(require("../../loading"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const {
+  getConfig,
+  createEvent,
+  domUtils,
+  globalResize,
+  renderEmptyElement
+} = _ui.VxeUI;
+function createReactData() {
+  return {
+    yThumbHeight: 0,
+    xThumbWidth: 0
+  };
+}
+function createInternalData() {
+  return {
+    // resizeObserver: undefined,
+    // isThumbDrag: false,
+    thumbDragOffset: 0,
+    yThumbTop: 0,
+    xThumbLeft: 0,
+    lastScrollTop: 0,
+    lastScrollLeft: 0
+  };
+}
+var _default = exports.default = (0, _comp.defineVxeComponent)({
+  name: 'VxeScrollbar',
+  props: {
+    width: [String, Number],
+    height: [String, Number],
+    minWidth: [String, Number],
+    minHeight: [String, Number],
+    maxWidth: [String, Number],
+    maxHeight: [String, Number],
+    loading: Boolean,
+    native: {
+      type: Boolean,
+      default: () => getConfig().scrollbar.native
+    },
+    xConfig: Object,
+    yConfig: Object,
+    className: String,
+    viewClassName: String,
+    autoResize: {
+      type: Boolean,
+      default: () => getConfig().scrollbar.autoResize
+    },
+    syncResize: [Boolean, String, Number]
+  },
+  emits: ['scroll', 'scroll-boundary'],
+  setup(props, context) {
+    const {
+      emit,
+      slots
+    } = context;
+    const xID = _xeUtils.default.uniqueId();
+    const refElem = (0, _vue.ref)();
+    const refViewElem = (0, _vue.ref)();
+    const refViewInnerElem = (0, _vue.ref)();
+    const refTrackXElem = (0, _vue.ref)();
+    const refTrackYElem = (0, _vue.ref)();
+    const refThumbXElem = (0, _vue.ref)();
+    const refThumbYElem = (0, _vue.ref)();
+    const reactData = (0, _vue.reactive)(createReactData());
+    const internalData = createInternalData();
+    const computeWrapperStyle = (0, _vue.computed)(() => {
+      const {
+        width,
+        height,
+        minWidth,
+        minHeight,
+        maxWidth,
+        maxHeight
+      } = props;
+      const xOpts = computeXOpts.value;
+      const yOpts = computeYOpts.value;
+      const stys = {};
+      if (width) {
+        stys.width = (0, _dom.toCssUnit)(width);
+      }
+      if (height) {
+        stys.height = (0, _dom.toCssUnit)(height);
+      }
+      if (minWidth) {
+        stys.minWidth = (0, _dom.toCssUnit)(minWidth);
+      }
+      if (minHeight) {
+        stys.minHeight = (0, _dom.toCssUnit)(minHeight);
+      }
+      if (maxWidth) {
+        stys.maxWidth = (0, _dom.toCssUnit)(maxWidth);
+      }
+      if (maxHeight) {
+        stys.maxHeight = (0, _dom.toCssUnit)(maxHeight);
+      }
+      if (yOpts.width) {
+        stys['--vxe-ui-scrollbar-y-width'] = (0, _dom.toCssUnit)(yOpts.width);
+      }
+      if (xOpts.height) {
+        stys['--vxe-ui-scrollbar-x-height'] = (0, _dom.toCssUnit)(xOpts.height);
+      }
+      return stys;
+    });
+    const computeWrapperClss = (0, _vue.computed)(() => {
+      const {
+        native,
+        className
+      } = props;
+      const xOpts = computeXOpts.value;
+      const yOpts = computeYOpts.value;
+      return domUtils.buildClass(['vxe-scrollbar', `ov-x--${xOpts.visible || 'visible'}`, `ov-y--${yOpts.visible || 'visible'}`, native ? 'is--native' : 'is--virtual', className], {
+        'ov-x--auto-hide': xOpts.autoHide,
+        'ov-y--auto-hide': yOpts.autoHide
+      });
+    });
+    const computeViewClss = (0, _vue.computed)(() => {
+      const {
+        viewClassName
+      } = props;
+      return domUtils.buildClass(['vxe-scrollbar--view', viewClassName]);
+    });
+    const computeXOpts = (0, _vue.computed)(() => {
+      return Object.assign({}, getConfig().scrollbar.xConfig, props.xConfig);
+    });
+    const computeYOpts = (0, _vue.computed)(() => {
+      return Object.assign({}, getConfig().scrollbar.yConfig, props.yConfig);
+    });
+    const refMaps = {
+      refElem
+    };
+    const computeMaps = {};
+    const $xeScrollbar = {
+      xID,
+      props,
+      context,
+      reactData,
+      internalData,
+      getRefMaps: () => refMaps,
+      getComputeMaps: () => computeMaps
+    };
+    const dispatchEvent = (type, params, evnt) => {
+      emit(type, createEvent(evnt, {
+        $scrollbar: $xeScrollbar
+      }, params));
+    };
+    const scrollbarMethods = {
+      dispatchEvent,
+      scrollTo(left, top) {
+        const viewEl = refViewElem.value;
+        if (viewEl) {
+          if (_xeUtils.default.isNumber(left)) {
+            viewEl.scrollTo(left, top || 0);
+          } else {
+            viewEl.scrollTo(left);
+          }
+        }
+      },
+      scrollIntoView() {
+        const viewEl = refViewElem.value;
+        if (viewEl) {
+          viewEl.scrollIntoView();
+        }
+      },
+      recalculate() {
+        updateThumbSize();
+        updateThumbOffset();
+        return (0, _vue.nextTick)();
+      }
+    };
+    const updateThumbSize = () => {
+      const viewEl = refViewElem.value;
+      if (!viewEl) {
+        return;
+      }
+      const trackXEl = refTrackXElem.value;
+      const xThumbWidth = trackXEl ? (0, _util.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 ? (0, _util.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 = refViewElem.value;
+      if (!viewEl) {
+        return;
+      }
+      const {
+        xThumbWidth,
+        yThumbHeight
+      } = reactData;
+      const trackXEl = refTrackXElem.value;
+      const thumbXElem = refThumbXElem.value;
+      const xThumbLeft = trackXEl && xThumbWidth ? (0, _util.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 ? (0, _util.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 scrollEvent = evnt => {
+      const {
+        xThumbWidth,
+        yThumbHeight
+      } = reactData;
+      const {
+        lastScrollTop,
+        lastScrollLeft
+      } = internalData;
+      const xOpts = computeXOpts.value;
+      const yOpts = computeYOpts.value;
+      const viewEl = evnt.currentTarget;
+      const {
+        scrollTop,
+        scrollLeft,
+        clientWidth,
+        clientHeight,
+        scrollHeight,
+        scrollWidth
+      } = viewEl;
+      let direction = '';
+      let isTopBoundary = false;
+      let isBottomBoundary = false;
+      let isLeftBoundary = false;
+      let isRightBoundary = false;
+      if (lastScrollTop !== scrollTop) {
+        const yThreshold = _xeUtils.default.toNumber(yOpts.threshold) || 1;
+        if (lastScrollTop < scrollTop) {
+          direction = 'bottom';
+          if (yThumbHeight > 0 && scrollTop + clientHeight >= scrollHeight - yThreshold) {
+            isBottomBoundary = true;
+          }
+        } else {
+          direction = 'top';
+          if (yThumbHeight > 0 && scrollTop <= yThreshold) {
+            isTopBoundary = true;
+          }
+        }
+      }
+      if (lastScrollLeft !== scrollLeft) {
+        const xThreshold = _xeUtils.default.toNumber(xOpts.threshold) || 1;
+        if (lastScrollLeft < scrollLeft) {
+          direction = 'right';
+          if (xThumbWidth > 0 && scrollLeft + clientWidth >= scrollWidth - xThreshold) {
+            isRightBoundary = true;
+          }
+        } else {
+          direction = 'left';
+          if (xThumbWidth > 0 && scrollLeft <= xThreshold) {
+            isLeftBoundary = true;
+          }
+        }
+      }
+      updateThumbOffset();
+      internalData.lastScrollTop = scrollTop;
+      internalData.lastScrollLeft = scrollLeft;
+      if (isBottomBoundary || isTopBoundary || isRightBoundary || isLeftBoundary) {
+        dispatchEvent('scroll-boundary', {
+          direction: direction,
+          isTop: isTopBoundary,
+          isBottom: isBottomBoundary,
+          isLeft: isLeftBoundary,
+          isRight: isRightBoundary,
+          scrollTop: scrollTop,
+          scrollLeft: scrollLeft,
+          clientWidth: clientWidth,
+          clientHeight: clientHeight,
+          scrollHeight: scrollHeight,
+          scrollWidth: scrollWidth
+        }, evnt);
+      }
+      dispatchEvent('scroll', {
+        direction: direction,
+        isTop: yThumbHeight > 0 && scrollTop <= 0,
+        isBottom: yThumbHeight > 0 && scrollTop + clientHeight >= scrollHeight,
+        isLeft: xThumbWidth > 0 && scrollLeft <= 0,
+        isRight: xThumbWidth > 0 && scrollLeft + clientWidth >= scrollWidth,
+        scrollTop: scrollTop,
+        scrollLeft: scrollLeft,
+        clientWidth: clientWidth,
+        clientHeight: clientHeight,
+        scrollHeight: scrollHeight,
+        scrollWidth: scrollWidth
+      }, evnt);
+    };
+    const clickTrackXEvent = evnt => {
+      const trackEl = evnt.currentTarget;
+      if (trackEl !== evnt.target) {
+        return;
+      }
+      const viewEl = refViewElem.value;
+      if (!viewEl) {
+        return;
+      }
+      const {
+        xThumbWidth
+      } = reactData;
+      const trackRect = trackEl.getBoundingClientRect();
+      viewEl.scrollTo({
+        left: (0, _util.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 = refViewElem.value;
+      if (!viewEl) {
+        return;
+      }
+      const {
+        yThumbHeight
+      } = reactData;
+      const trackRect = trackEl.getBoundingClientRect();
+      viewEl.scrollTo({
+        top: (0, _util.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 = refViewElem.value;
+      if (!viewEl) {
+        return;
+      }
+      const {
+        xThumbWidth
+      } = reactData;
+      const trackEl = thumbEl.parentElement;
+      const trackRect = trackEl.getBoundingClientRect();
+      const pointerPosition = evnt.clientX - trackRect.left;
+      // 记录 thumb 的偏移
+      const thumbOffset = (0, _util.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 = refViewElem.value;
+        if (!viewEl) {
+          return;
+        }
+        const {
+          xThumbWidth
+        } = reactData;
+        const thumbEl = evnt.currentTarget;
+        const trackEl = thumbEl.parentElement;
+        const trackRect = trackEl.getBoundingClientRect();
+        // 更新偏移
+        viewEl.scrollLeft = (0, _util.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 = refViewElem.value;
+      if (!viewEl) {
+        return;
+      }
+      const {
+        yThumbHeight
+      } = reactData;
+      const trackEl = thumbEl.parentElement;
+      const trackRect = trackEl.getBoundingClientRect();
+      const pointerPosition = evnt.clientY - trackRect.top;
+      // 记录 thumb 的偏移
+      const thumbOffset = (0, _util.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 = refViewElem.value;
+        if (!viewEl) {
+          return;
+        }
+        const {
+          yThumbHeight
+        } = reactData;
+        const thumbEl = evnt.currentTarget;
+        const trackEl = thumbEl.parentElement;
+        const trackRect = trackEl.getBoundingClientRect();
+        // 更新偏移
+        viewEl.scrollTop = (0, _util.getScrollFromDrag)(evnt.clientY - trackRect.top, thumbDragOffset, viewEl.clientHeight, viewEl.scrollHeight, trackEl.clientHeight, yThumbHeight);
+      }
+    };
+    const scrollbarPrivateMethods = {};
+    Object.assign($xeScrollbar, scrollbarMethods, scrollbarPrivateMethods);
+    const renderVN = () => {
+      const {
+        native,
+        loading
+      } = props;
+      const wrapperStyle = computeWrapperStyle.value;
+      const wrapperClss = computeWrapperClss.value;
+      const viewClss = computeViewClss.value;
+      const xOpts = computeXOpts.value;
+      const yOpts = computeYOpts.value;
+      const defaultSlot = slots.default;
+      return (0, _vue.h)('div', {
+        ref: refElem,
+        class: wrapperClss,
+        style: wrapperStyle
+      }, [(0, _vue.h)('div', {
+        ref: refViewElem,
+        class: viewClss,
+        onScroll: scrollEvent
+      }, [(0, _vue.h)('div', {
+        ref: refViewInnerElem,
+        class: 'vxe-scrollbar--view-inner'
+      }, defaultSlot ? defaultSlot({}) : [])]), native || xOpts.visible === 'hidden' ? renderEmptyElement($xeScrollbar) : (0, _vue.h)('div', {
+        ref: refTrackXElem,
+        class: 'vxe-scrollbar--track-x',
+        onClick: clickTrackXEvent
+      }, [(0, _vue.h)('div', {
+        ref: refThumbXElem,
+        class: 'vxe-scrollbar--thumb-x',
+        onPointerdown: pointerdownThumbXEvent,
+        onPointermove: pointermoveThumbXEvent,
+        onPointerup: cleatPointerThumbEvent,
+        onPointercancel: cleatPointerThumbEvent,
+        onLostpointercapture: cleatPointerThumbEvent
+      })]), native || yOpts.visible === 'hidden' ? renderEmptyElement($xeScrollbar) : (0, _vue.h)('div', {
+        ref: refTrackYElem,
+        class: 'vxe-scrollbar--track-y',
+        onClick: clickTrackYEvent
+      }, [(0, _vue.h)('div', {
+        ref: refThumbYElem,
+        class: 'vxe-scrollbar--thumb-y',
+        onPointerdown: pointerdownThumbYEvent,
+        onPointermove: pointermoveThumbYEvent,
+        onPointerup: cleatPointerThumbEvent,
+        onPointercancel: cleatPointerThumbEvent,
+        onLostpointercapture: cleatPointerThumbEvent
+      })]), (0, _vue.h)(_loading.default, {
+        class: 'vxe-scrollbar--loading',
+        modelValue: loading
+      })]);
+    };
+    const reFlag = (0, _vue.ref)(0);
+    (0, _vue.watch)(() => props.native, () => {
+      reFlag.value++;
+    });
+    (0, _vue.watch)(() => props.syncResize, () => {
+      reFlag.value++;
+    });
+    (0, _vue.watch)(reFlag, () => {
+      $xeScrollbar.recalculate().then(() => {
+        $xeScrollbar.recalculate();
+      });
+    });
+    (0, _vue.onMounted)(() => {
+      const {
+        autoResize
+      } = props;
+      const viewInnerEl = refViewInnerElem.value;
+      if (autoResize && viewInnerEl) {
+        const resizeObserver = globalResize.create(() => {
+          if (props.autoResize) {
+            reFlag.value++;
+          }
+        });
+        resizeObserver.observe(viewInnerEl);
+        internalData.resizeObserver = resizeObserver;
+      }
+      (0, _vue.nextTick)(() => {
+        $xeScrollbar.recalculate();
+      });
+    });
+    (0, _vue.onBeforeUnmount)(() => {
+      const {
+        resizeObserver
+      } = internalData;
+      if (resizeObserver) {
+        resizeObserver.disconnect();
+      }
+    });
+    $xeScrollbar.renderVN = renderVN;
+    return $xeScrollbar;
+  },
+  render() {
+    return this.renderVN();
+  }
+});

package/lib/scrollbar/src/scrollbar.min.js

@@ -0,0 +1 @@
+Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _vue=require("vue"),_comp=require("../../ui/src/comp"),_xeUtils=_interopRequireDefault(require("xe-utils")),_ui=require("../../ui"),_dom=require("../../ui/src/dom"),_util=require("./util"),_loading=_interopRequireDefault(require("../../loading"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}let{getConfig,createEvent,domUtils,globalResize,renderEmptyElement}=_ui.VxeUI;function createReactData(){return{yThumbHeight:0,xThumbWidth:0}}function createInternalData(){return{thumbDragOffset:0,yThumbTop:0,xThumbLeft:0,lastScrollTop:0,lastScrollLeft:0}}var _default=exports.default=(0,_comp.defineVxeComponent)({name:"VxeScrollbar",props:{width:[String,Number],height:[String,Number],minWidth:[String,Number],minHeight:[String,Number],maxWidth:[String,Number],maxHeight:[String,Number],loading:Boolean,native:{type:Boolean,default:()=>getConfig().scrollbar.native},xConfig:Object,yConfig:Object,className:String,viewClassName:String,autoResize:{type:Boolean,default:()=>getConfig().scrollbar.autoResize},syncResize:[Boolean,String,Number]},emits:["scroll","scroll-boundary"],setup(s,e){let{emit:l,slots:u}=e;var t=_xeUtils.default.uniqueId();let c=(0,_vue.ref)(),h=(0,_vue.ref)(),v=(0,_vue.ref)(),d=(0,_vue.ref)(),g=(0,_vue.ref)(),m=(0,_vue.ref)(),f=(0,_vue.ref)(),p=(0,_vue.reactive)(createReactData()),_=createInternalData(),b=(0,_vue.computed)(()=>{var{width:e,height:t,minWidth:i,minHeight:l,maxWidth:r,maxHeight:o}=s,a=C.value,n=H.value,u={};return e&&(u.width=(0,_dom.toCssUnit)(e)),t&&(u.height=(0,_dom.toCssUnit)(t)),i&&(u.minWidth=(0,_dom.toCssUnit)(i)),l&&(u.minHeight=(0,_dom.toCssUnit)(l)),r&&(u.maxWidth=(0,_dom.toCssUnit)(r)),o&&(u.maxHeight=(0,_dom.toCssUnit)(o)),n.width&&(u["--vxe-ui-scrollbar-y-width"]=(0,_dom.toCssUnit)(n.width)),a.height&&(u["--vxe-ui-scrollbar-x-height"]=(0,_dom.toCssUnit)(a.height)),u}),T=(0,_vue.computed)(()=>{var{native:e,className:t}=s,i=C.value,l=H.value;return domUtils.buildClass(["vxe-scrollbar","ov-x--"+(i.visible||"visible"),"ov-y--"+(l.visible||"visible"),e?"is--native":"is--virtual",t],{"ov-x--auto-hide":i.autoHide,"ov-y--auto-hide":l.autoHide})}),x=(0,_vue.computed)(()=>{var e=s.viewClassName;return domUtils.buildClass(["vxe-scrollbar--view",e])}),C=(0,_vue.computed)(()=>Object.assign({},getConfig().scrollbar.xConfig,s.xConfig)),H=(0,_vue.computed)(()=>Object.assign({},getConfig().scrollbar.yConfig,s.yConfig)),i={refElem:c},r={},y={xID:t,props:s,context:e,reactData:p,internalData:_,getRefMaps:()=>i,getComputeMaps:()=>r},W=(e,t,i)=>{l(e,createEvent(i,{$scrollbar:y},t))};t={dispatchEvent:W,scrollTo(e,t){var i=h.value;i&&(_xeUtils.default.isNumber(e)?i.scrollTo(e,t||0):i.scrollTo(e))},scrollIntoView(){var e=h.value;e&&e.scrollIntoView()},recalculate(){return o(),S(),(0,_vue.nextTick)()}};let o=()=>{var e,t,i=h.value;i&&(t=(t=d.value)?(0,_util.getThumbSize)(i.clientWidth,i.scrollWidth,t.clientWidth):0,(e=m.value)&&(e.style.width=t+"px"),p.xThumbWidth=t,t=(e=g.value)?(0,_util.getThumbSize)(i.clientHeight,i.scrollHeight,e.clientHeight):0,(i=f.value)&&(i.style.height=t+"px"),p.yThumbHeight=t)},S=()=>{var e,t,i,l,r=h.value;r&&({xThumbWidth:t,yThumbHeight:e}=p,l=d.value,i=m.value,l=l&&t?(0,_util.getThumbOffsetSize)(r.scrollLeft,r.clientWidth,r.scrollWidth,l.clientWidth,t):0,_.xThumbLeft=l,i&&t&&(i.style.width=t+"px",i.style.transform=`translateX(${l}px)`),t=g.value,i=f.value,l=t&&e?(0,_util.getThumbOffsetSize)(r.scrollTop,r.clientHeight,r.scrollHeight,t.clientHeight,e):0,_.yThumbTop=l,i)&&e&&(i.style.height=e+"px",i.style.transform=`translateY(${l}px)`)},D=e=>{var{xThumbWidth:t,yThumbHeight:i}=p,{lastScrollTop:l,lastScrollLeft:r}=_,o=C.value,a=H.value,{scrollTop:n,scrollLeft:u,clientWidth:s,clientHeight:c,scrollHeight:h,scrollWidth:v}=e.currentTarget;let d="",g=!1,m=!1,f=!1,b=!1;l!==n&&(a=_xeUtils.default.toNumber(a.threshold)||1,l<n?(d="bottom",0<i&&h-a<=n+c&&(m=!0)):(d="top",0<i&&n<=a&&(g=!0))),r!==u&&(l=_xeUtils.default.toNumber(o.threshold)||1,r<u?(d="right",0<t&&v-l<=u+s&&(b=!0)):(d="left",0<t&&u<=l&&(f=!0))),S(),_.lastScrollTop=n,_.lastScrollLeft=u,(m||g||b||f)&&W("scroll-boundary",{direction:d,isTop:g,isBottom:m,isLeft:f,isRight:b,scrollTop:n,scrollLeft:u,clientWidth:s,clientHeight:c,scrollHeight:h,scrollWidth:v},e),W("scroll",{direction:d,isTop:0<i&&n<=0,isBottom:0<i&&h<=n+c,isLeft:0<t&&u<=0,isRight:0<t&&v<=u+s,scrollTop:n,scrollLeft:u,clientWidth:s,clientHeight:c,scrollHeight:h,scrollWidth:v},e)},R=e=>{var t,i,l,r=e.currentTarget;r===e.target&&(t=h.value)&&(i=p.xThumbWidth,l=r.getBoundingClientRect(),t.scrollTo({left:(0,_util.getScrollFromClick)(e.clientX-l.left,t.clientWidth,t.scrollWidth,r.clientWidth,i),behavior:"auto"}))},w=e=>{var t,i,l,r=e.currentTarget;r===e.target&&(t=h.value)&&(i=p.yThumbHeight,l=r.getBoundingClientRect(),t.scrollTo({top:(0,_util.getScrollFromClick)(e.clientY-l.top,t.clientHeight,t.scrollHeight,r.clientHeight,i),behavior:"auto"}))},U=e=>{var t,i,l=e.currentTarget,r=(_.isThumbDrag=!0,l.setPointerCapture(e.pointerId),h.value);r&&(t=p.xThumbWidth,i=(l=l.parentElement).getBoundingClientRect(),e=e.clientX-i.left,i=(0,_util.getThumbOffsetSize)(r.scrollLeft,r.clientWidth,r.scrollWidth,l.clientWidth,t),_.thumbDragOffset=e-i)},O=t=>{let e=t.currentTarget;if(e.hasPointerCapture(t.pointerId)){var{isThumbDrag:i,thumbDragOffset:l}=_;if(i){i=h.value;if(i){var r=p.xThumbWidth;let e=t.currentTarget;var o=e.parentElement,a=o.getBoundingClientRect();i.scrollLeft=(0,_util.getScrollFromDrag)(t.clientX-a.left,l,i.clientWidth,i.scrollWidth,o.clientWidth,r)}}}},z=e=>{e.currentTarget.releasePointerCapture(e.pointerId),_.isThumbDrag=!1},N=e=>{var t,i,l=e.currentTarget,r=(_.isThumbDrag=!0,l.setPointerCapture(e.pointerId),h.value);r&&(t=p.yThumbHeight,i=(l=l.parentElement).getBoundingClientRect(),e=e.clientY-i.top,i=(0,_util.getThumbOffsetSize)(r.scrollTop,r.clientHeight,r.scrollHeight,l.clientHeight,t),_.thumbDragOffset=e-i)},L=t=>{let e=t.currentTarget;if(e.hasPointerCapture(t.pointerId)){var{isThumbDrag:i,thumbDragOffset:l}=_;if(i){i=h.value;if(i){var r=p.yThumbHeight;let e=t.currentTarget;var o=e.parentElement,a=o.getBoundingClientRect();i.scrollTop=(0,_util.getScrollFromDrag)(t.clientY-a.top,l,i.clientHeight,i.scrollHeight,o.clientHeight,r)}}}};Object.assign(y,t,{});let a=(0,_vue.ref)(0);return(0,_vue.watch)(()=>s.native,()=>{a.value++}),(0,_vue.watch)(()=>s.syncResize,()=>{a.value++}),(0,_vue.watch)(a,()=>{y.recalculate().then(()=>{y.recalculate()})}),(0,_vue.onMounted)(()=>{var e=s.autoResize,t=v.value;e&&t&&((e=globalResize.create(()=>{s.autoResize&&a.value++})).observe(t),_.resizeObserver=e),(0,_vue.nextTick)(()=>{y.recalculate()})}),(0,_vue.onBeforeUnmount)(()=>{var e=_.resizeObserver;e&&e.disconnect()}),y.renderVN=()=>{var{native:e,loading:t}=s,i=b.value,l=T.value,r=x.value,o=C.value,a=H.value,n=u.default;return(0,_vue.h)("div",{ref:c,class:l,style:i},[(0,_vue.h)("div",{ref:h,class:r,onScroll:D},[(0,_vue.h)("div",{ref:v,class:"vxe-scrollbar--view-inner"},n?n({}):[])]),e||"hidden"===o.visible?renderEmptyElement(y):(0,_vue.h)("div",{ref:d,class:"vxe-scrollbar--track-x",onClick:R},[(0,_vue.h)("div",{ref:m,class:"vxe-scrollbar--thumb-x",onPointerdown:U,onPointermove:O,onPointerup:z,onPointercancel:z,onLostpointercapture:z})]),e||"hidden"===a.visible?renderEmptyElement(y):(0,_vue.h)("div",{ref:g,class:"vxe-scrollbar--track-y",onClick:w},[(0,_vue.h)("div",{ref:f,class:"vxe-scrollbar--thumb-y",onPointerdown:N,onPointermove:L,onPointerup:z,onPointercancel:z,onLostpointercapture:z})]),(0,_vue.h)(_loading.default,{class:"vxe-scrollbar--loading",modelValue:t})])},y},render(){return this.renderVN()}});

package/lib/scrollbar/src/util.js

@@ -0,0 +1,63 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getScrollFromClick = getScrollFromClick;
+exports.getScrollFromDrag = getScrollFromDrag;
+exports.getThumbOffsetSize = getThumbOffsetSize;
+exports.getThumbSize = getThumbSize;
+/**
+ * 计算滚动条滑块的长度
+ */
+function getThumbSize(viewportSize, contentSize, trackSize) {
+  if (contentSize <= viewportSize) {
+    return 0;
+  }
+  const ratio = viewportSize / contentSize;
+  const ideal = trackSize * ratio;
+  return Math.max(20, Math.min(ideal, trackSize));
+}
+/**
+ * 计算滚动条滑块的偏移位置
+ */
+function getThumbOffsetSize(offsetSize, viewportSize, contentSize, trackSize, thumbSize) {
+  const maxScroll = contentSize - viewportSize;
+  if (maxScroll <= 0) {
+    return 0;
+  }
+  const maxThumbOffset = trackSize - thumbSize;
+  if (maxThumbOffset <= 0) {
+    return 0;
+  }
+  const clamped = Math.min(Math.max(offsetSize, 0), maxScroll);
+  const ratio = clamped / maxScroll;
+  return ratio * maxThumbOffset;
+}
+/**
+ * 根据点击轨道的位置，计算滑块的偏移位置
+ */
+function getScrollFromClick(clickPosition, viewportSize, contentSize, trackSize, thumbSize) {
+  const maxThumbOffset = trackSize - thumbSize;
+  const maxScroll = contentSize - viewportSize;
+  if (maxScroll <= 0 || maxThumbOffset <= 0) {
+    return 0;
+  }
+  let thumbOffset = clickPosition - thumbSize / 2;
+  thumbOffset = Math.min(Math.max(thumbOffset, 0), maxThumbOffset);
+  const scrollOffset = thumbOffset / maxThumbOffset * maxScroll;
+  return scrollOffset;
+}
+/**
+ * 拖拽 thumb 时，根据鼠标位置计算滑块的偏移位置
+ */
+function getScrollFromDrag(pointerPosition, dragOffset, viewportSize, contentSize, trackSize, thumbSize) {
+  const maxScroll = contentSize - viewportSize;
+  const maxThumbOffset = trackSize - thumbSize;
+  if (maxScroll <= 0 || maxThumbOffset <= 0) {
+    return 0;
+  }
+  let thumbOffset = pointerPosition - dragOffset;
+  thumbOffset = Math.min(Math.max(thumbOffset, 0), maxThumbOffset);
+  return thumbOffset / maxThumbOffset * maxScroll;
+}

package/lib/scrollbar/src/util.min.js

@@ -0,0 +1 @@
+function getThumbSize(t,e,r){return e<=t?0:Math.max(20,Math.min(r*(t/e),r))}function getThumbOffsetSize(t,e,r,o,m){r-=e;return r<=0||(e=o-m)<=0?0:Math.min(Math.max(t,0),r)/r*e}function getScrollFromClick(t,e,r,o,m){o-=m,r-=e;return r<=0||o<=0?0:(e=t-m/2,(e=Math.min(Math.max(e,0),o))/o*r)}function getScrollFromDrag(t,e,r,o,m,i){o-=r,r=m-i;return o<=0||r<=0?0:(m=t-e,(m=Math.min(Math.max(m,0),r))/r*o)}Object.defineProperty(exports,"__esModule",{value:!0}),exports.getScrollFromClick=getScrollFromClick,exports.getScrollFromDrag=getScrollFromDrag,exports.getThumbOffsetSize=getThumbOffsetSize,exports.getThumbSize=getThumbSize;

package/lib/scrollbar/style/index.js

@@ -0,0 +1 @@
+require('./style.css')