"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.XScrollbar = exports.Scrollbar = void 0;
var _vue = require("vue");
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
var _evtd = require("evtd");
var _useIsIos = _interopRequireDefault(require("../_util/hooks/useIsIos"));
var _useReactivated = _interopRequireDefault(require("../_util/hooks/useReactivated"));
var _useConfigInject2 = _interopRequireDefault(require("../_util/hooks/useConfigInject"));
var _util = require("../_util/util");
var _vcResizeObserver = _interopRequireDefault(require("../vc-resize-observer"));
var scrollbarProps = {
  size: {
    type: Number,
    default: 5
  },
  duration: {
    type: Number,
    default: 0
  },
  scrollable: {
    type: Boolean,
    default: true
  },
  xScrollable: Boolean,
  trigger: {
    type: String,
    default: 'hover'
  },
  useUnifiedContainer: Boolean,
  triggerDisplayManually: Boolean,
  // If container is set, resize observer won't not attached
  container: Function,
  content: Function,
  containerClass: String,
  containerStyle: [String, Object],
  contentClass: String,
  contentStyle: [String, Object],
  horizontalRailStyle: [String, Object],
  verticalRailStyle: [String, Object],
  onScroll: Function,
  onWheel: Function,
  onResize: Function,
  internalOnUpdateScrollLeft: Function,
  internalHoistYRail: Boolean
};
var Wrapper = (0, _vue.defineComponent)({
  render: function render() {
    var _this$$slots$default, _this$$slots;
    return (_this$$slots$default = (_this$$slots = this.$slots).default) === null || _this$$slots$default === void 0 ? void 0 : _this$$slots$default.call(_this$$slots);
  }
});
var Scrollbar = (0, _vue.defineComponent)({
  name: 'PfBaseScrollbar',
  props: scrollbarProps,
  inheritAttrs: false,
  setup: function setup(props) {
    var _useConfigInject = (0, _useConfigInject2.default)('scrollbar', props),
      prefixCls = _useConfigInject.prefixCls,
      direction = _useConfigInject.direction;
    // dom ref
    var wrapperRef = (0, _vue.ref)(null);
    var containerRef = (0, _vue.ref)(null);
    var contentRef = (0, _vue.ref)(null);
    var yRailRef = (0, _vue.ref)(null);
    var xRailRef = (0, _vue.ref)(null);
    // data ref
    var contentHeightRef = (0, _vue.ref)(null);
    var contentWidthRef = (0, _vue.ref)(null);
    var containerHeightRef = (0, _vue.ref)(null);
    var containerWidthRef = (0, _vue.ref)(null);
    var yRailSizeRef = (0, _vue.ref)(null);
    var xRailSizeRef = (0, _vue.ref)(null);
    var containerScrollTopRef = (0, _vue.ref)(0);
    var containerScrollLeftRef = (0, _vue.ref)(0);
    var isShowXBarRef = (0, _vue.ref)(false);
    var isShowYBarRef = (0, _vue.ref)(false);
    var yBarPressed = false;
    var xBarPressed = false;
    var xBarVanishTimerId;
    var yBarVanishTimerId;
    var memoYTop = 0;
    var memoXLeft = 0;
    var memoMouseX = 0;
    var memoMouseY = 0;
    var isIos = (0, _useIsIos.default)();
    var yBarSizeRef = (0, _vue.computed)(function () {
      var containerHeight = containerHeightRef.value;
      var contentHeight = contentHeightRef.value;
      var yRailSize = yRailSizeRef.value;
      if (containerHeight === null || contentHeight === null || yRailSize === null) {
        return 0;
      } else {
        return Math.min(containerHeight, yRailSize * containerHeight / contentHeight + props.size * 1.5);
      }
    });
    var yBarSizePxRef = (0, _vue.computed)(function () {
      return "".concat(yBarSizeRef.value, "px");
    });
    var xBarSizeRef = (0, _vue.computed)(function () {
      var containerWidth = containerWidthRef.value;
      var contentWidth = contentWidthRef.value;
      var xRailSize = xRailSizeRef.value;
      if (containerWidth === null || contentWidth === null || xRailSize === null) {
        return 0;
      } else {
        return xRailSize * containerWidth / contentWidth + props.size * 1.5;
      }
    });
    var xBarSizePxRef = (0, _vue.computed)(function () {
      return "".concat(xBarSizeRef.value, "px");
    });
    var yBarTopRef = (0, _vue.computed)(function () {
      var containerHeight = containerHeightRef.value;
      var containerScrollTop = containerScrollTopRef.value;
      var contentHeight = contentHeightRef.value;
      var yRailSize = yRailSizeRef.value;
      if (containerHeight === null || contentHeight === null || yRailSize === null) {
        return 0;
      } else {
        var heightDiff = contentHeight - containerHeight;
        if (!heightDiff) return 0;
        return containerScrollTop / heightDiff * (yRailSize - yBarSizeRef.value);
      }
    });
    var yBarTopPxRef = (0, _vue.computed)(function () {
      return "".concat(yBarTopRef.value, "px");
    });
    var xBarLeftRef = (0, _vue.computed)(function () {
      var containerWidth = containerWidthRef.value;
      var containerScrollLeft = containerScrollLeftRef.value;
      var contentWidth = contentWidthRef.value;
      var xRailSize = xRailSizeRef.value;
      if (containerWidth === null || contentWidth === null || xRailSize === null) {
        return 0;
      } else {
        var widthDiff = contentWidth - containerWidth;
        if (!widthDiff) return 0;
        return containerScrollLeft / widthDiff * (xRailSize - xBarSizeRef.value);
      }
    });
    var xBarLeftPxRef = (0, _vue.computed)(function () {
      return "".concat(xBarLeftRef.value, "px");
    });
    var needYBarRef = (0, _vue.computed)(function () {
      var containerHeight = containerHeightRef.value;
      var contentHeight = contentHeightRef.value;
      return containerHeight !== null && contentHeight !== null && contentHeight > containerHeight;
    });
    var needXBarRef = (0, _vue.computed)(function () {
      var containerWidth = containerWidthRef.value;
      var contentWidth = contentWidthRef.value;
      return containerWidth !== null && contentWidth !== null && contentWidth > containerWidth;
    });
    var mergedShowXBarRef = (0, _vue.computed)(function () {
      var trigger = props.trigger;
      return trigger === 'none' || isShowXBarRef.value;
    });
    var mergedShowYBarRef = (0, _vue.computed)(function () {
      var trigger = props.trigger;
      return trigger === 'none' || isShowYBarRef.value;
    });
    var mergedContainerRef = (0, _vue.computed)(function () {
      var container = props.container;
      if (container) return container();
      return containerRef.value;
    });
    var mergedContentRef = (0, _vue.computed)(function () {
      var content = props.content;
      if (content) return content();
      return contentRef.value;
    });
    var activateState = (0, _useReactivated.default)(function () {
      // Only restore for builtin container & content
      if (!props.container) {
        // remount
        scrollTo({
          top: containerScrollTopRef.value,
          left: containerScrollLeftRef.value
        });
      }
    });
    // methods
    var handleContentResize = function handleContentResize() {
      if (activateState.isDeactivated) return;
      sync();
    };
    var handleContainerResize = function handleContainerResize(e) {
      if (activateState.isDeactivated) return;
      var onResize = props.onResize;
      if (onResize) onResize(e);
      sync();
    };
    var scrollTo = function scrollTo(options, y) {
      if (!props.scrollable) return;
      if (typeof options === 'number') {
        scrollToPosition(y !== null && y !== void 0 ? y : 0, options, 0, false, 'auto');
        return;
      }
      var left = options.left,
        top = options.top,
        index = options.index,
        elSize = options.elSize,
        position = options.position,
        behavior = options.behavior,
        el = options.el,
        _options$debounce = options.debounce,
        debounce = _options$debounce === void 0 ? true : _options$debounce;
      if (left !== undefined || top !== undefined) {
        scrollToPosition(left !== null && left !== void 0 ? left : 0, top !== null && top !== void 0 ? top : 0, 0, false, behavior);
      }
      if (el !== undefined) {
        scrollToPosition(0, el.offsetTop, el.offsetHeight, debounce, behavior);
      } else if (index !== undefined && elSize !== undefined) {
        scrollToPosition(0, index * elSize, elSize, debounce, behavior);
      } else if (position === 'bottom') {
        scrollToPosition(0, Number.MAX_SAFE_INTEGER, 0, false, behavior);
      } else if (position === 'top') {
        scrollToPosition(0, 0, 0, false, behavior);
      }
    };
    var scrollBy = function scrollBy(options, y) {
      if (!props.scrollable) return;
      var container = mergedContainerRef.value;
      if (!container) return;
      if ((0, _typeof2.default)(options) === 'object') {
        container.scrollBy(options);
      } else {
        container.scrollBy(options, y || 0);
      }
    };
    function scrollToPosition(left, top, elSize, debounce, behavior) {
      var container = mergedContainerRef.value;
      if (!container) return;
      if (debounce) {
        var scrollTop = container.scrollTop,
          offsetHeight = container.offsetHeight;
        if (top > scrollTop) {
          if (top + elSize <= scrollTop + offsetHeight) {
            // do nothing
          } else {
            container.scrollTo({
              left: left,
              top: top + elSize - offsetHeight,
              behavior: behavior
            });
          }
          return;
        }
      }
      container.scrollTo({
        left: left,
        top: top,
        behavior: behavior
      });
    }
    function handleMouseEnterWrapper() {
      showXBar();
      showYBar();
      sync();
    }
    function handleMouseLeaveWrapper() {
      hideBar();
    }
    function hideBar() {
      hideYBar();
      hideXBar();
    }
    function hideYBar() {
      if (yBarVanishTimerId !== undefined) {
        window.clearTimeout(yBarVanishTimerId);
      }
      yBarVanishTimerId = window.setTimeout(function () {
        isShowYBarRef.value = false;
      }, props.duration);
    }
    function hideXBar() {
      if (xBarVanishTimerId !== undefined) {
        window.clearTimeout(xBarVanishTimerId);
      }
      xBarVanishTimerId = window.setTimeout(function () {
        isShowXBarRef.value = false;
      }, props.duration);
    }
    function showXBar() {
      if (xBarVanishTimerId !== undefined) {
        window.clearTimeout(xBarVanishTimerId);
      }
      isShowXBarRef.value = true;
    }
    function showYBar() {
      if (yBarVanishTimerId !== undefined) {
        window.clearTimeout(yBarVanishTimerId);
      }
      isShowYBarRef.value = true;
    }
    function handleScroll(e) {
      var onScroll = props.onScroll;
      if (onScroll) onScroll(e);
      syncScrollState();
    }
    function syncScrollState() {
      // only collect scroll state, do not trigger any dom event
      var container = mergedContainerRef.value;
      if (container) {
        containerScrollTopRef.value = container.scrollTop;
        containerScrollLeftRef.value = container.scrollLeft * (direction.value === 'rtl' ? -1 : 1);
      }
    }
    function syncPositionState() {
      // only collect position state, do not trigger any dom event
      // Don't use getClientBoundingRect because element may be scale transformed
      var content = mergedContentRef.value;
      if (content) {
        contentHeightRef.value = content.offsetHeight;
        contentWidthRef.value = content.offsetWidth;
      }
      var container = mergedContainerRef.value;
      if (container) {
        containerHeightRef.value = container.offsetHeight;
        containerWidthRef.value = container.offsetWidth;
      }
      var xRailEl = xRailRef.value;
      var yRailEl = yRailRef.value;
      if (xRailEl) {
        xRailSizeRef.value = xRailEl.offsetWidth;
      }
      if (yRailEl) {
        yRailSizeRef.value = yRailEl.offsetHeight;
      }
    }
    /**
     * Sometimes there's only one element that we can scroll,
     * For example for textarea, there won't be a content element.
     */
    function syncUnifiedContainer() {
      var container = mergedContainerRef.value;
      if (container) {
        containerScrollTopRef.value = container.scrollTop;
        containerScrollLeftRef.value = container.scrollLeft * (direction.value === 'rtl' ? -1 : 1);
        containerHeightRef.value = container.offsetHeight;
        containerWidthRef.value = container.offsetWidth;
        contentHeightRef.value = container.scrollHeight;
        contentWidthRef.value = container.scrollWidth;
      }
      var xRailEl = xRailRef.value;
      var yRailEl = yRailRef.value;
      if (xRailEl) {
        xRailSizeRef.value = xRailEl.offsetWidth;
      }
      if (yRailEl) {
        yRailSizeRef.value = yRailEl.offsetHeight;
      }
    }
    function sync() {
      if (!props.scrollable) return;
      if (props.useUnifiedContainer) {
        syncUnifiedContainer();
      } else {
        syncPositionState();
        syncScrollState();
      }
    }
    function isMouseUpAway(e) {
      var _wrapperRef$value;
      return !((_wrapperRef$value = wrapperRef.value) !== null && _wrapperRef$value !== void 0 && _wrapperRef$value.contains((0, _util.getPreciseEventTarget)(e)));
    }
    function handleXScrollMouseDown(e) {
      e.preventDefault();
      e.stopPropagation();
      xBarPressed = true;
      (0, _evtd.on)('mousemove', window, handleXScrollMouseMove, true);
      (0, _evtd.on)('mouseup', window, handleXScrollMouseUp, true);
      memoXLeft = containerScrollLeftRef.value;
      memoMouseX = direction.value === 'rtl' ? window.innerWidth - e.clientX : e.clientX;
    }
    function handleXScrollMouseMove(e) {
      if (!xBarPressed) return;
      if (xBarVanishTimerId !== undefined) {
        window.clearTimeout(xBarVanishTimerId);
      }
      if (yBarVanishTimerId !== undefined) {
        window.clearTimeout(yBarVanishTimerId);
      }
      var containerWidth = containerWidthRef.value;
      var contentWidth = contentWidthRef.value;
      var xBarSize = xBarSizeRef.value;
      if (containerWidth === null || contentWidth === null) return;
      var dX = direction.value === 'rtl' ? window.innerWidth - e.clientX - memoMouseX : e.clientX - memoMouseX;
      var dScrollLeft = dX * (contentWidth - containerWidth) / (containerWidth - xBarSize);
      var toScrollLeftUpperBound = contentWidth - containerWidth;
      var toScrollLeft = memoXLeft + dScrollLeft;
      toScrollLeft = Math.min(toScrollLeftUpperBound, toScrollLeft);
      toScrollLeft = Math.max(toScrollLeft, 0);
      var container = mergedContainerRef.value;
      if (container) {
        container.scrollLeft = toScrollLeft * (direction.value === 'rtl' ? -1 : 1);
        var internalOnUpdateScrollLeft = props.internalOnUpdateScrollLeft;
        if (internalOnUpdateScrollLeft) internalOnUpdateScrollLeft(toScrollLeft);
      }
    }
    function handleXScrollMouseUp(e) {
      e.preventDefault();
      e.stopPropagation();
      (0, _evtd.off)('mousemove', window, handleXScrollMouseMove, true);
      (0, _evtd.off)('mouseup', window, handleXScrollMouseUp, true);
      xBarPressed = false;
      sync();
      if (isMouseUpAway(e)) {
        hideBar();
      }
    }
    function handleYScrollMouseDown(e) {
      e.preventDefault();
      e.stopPropagation();
      yBarPressed = true;
      (0, _evtd.on)('mousemove', window, handleYScrollMouseMove, true);
      (0, _evtd.on)('mouseup', window, handleYScrollMouseUp, true);
      memoYTop = containerScrollTopRef.value;
      memoMouseY = e.clientY;
    }
    function handleYScrollMouseMove(e) {
      if (!yBarPressed) return;
      if (xBarVanishTimerId !== undefined) {
        window.clearTimeout(xBarVanishTimerId);
      }
      if (yBarVanishTimerId !== undefined) {
        window.clearTimeout(yBarVanishTimerId);
      }
      var containerHeight = containerHeightRef.value;
      var contentHeight = contentHeightRef.value;
      var yBarSize = yBarSizeRef.value;
      if (containerHeight === null || contentHeight === null) return;
      var dY = e.clientY - memoMouseY;
      var dScrollTop = dY * (contentHeight - containerHeight) / (containerHeight - yBarSize);
      var toScrollTopUpperBound = contentHeight - containerHeight;
      var toScrollTop = memoYTop + dScrollTop;
      toScrollTop = Math.min(toScrollTopUpperBound, toScrollTop);
      toScrollTop = Math.max(toScrollTop, 0);
      var container = mergedContainerRef.value;
      if (container) {
        container.scrollTop = toScrollTop;
      }
    }
    function handleYScrollMouseUp(e) {
      e.preventDefault();
      e.stopPropagation();
      (0, _evtd.off)('mousemove', window, handleYScrollMouseMove, true);
      (0, _evtd.off)('mouseup', window, handleYScrollMouseUp, true);
      yBarPressed = false;
      sync();
      if (isMouseUpAway(e)) {
        hideBar();
      }
    }
    (0, _vue.watchEffect)(function () {
      var needXBar = needXBarRef.value;
      var needYBar = needYBarRef.value;
      var xRailEl = xRailRef.value;
      var yRailEl = yRailRef.value;
      if (xRailEl) {
        if (!needXBar) {
          xRailEl.classList.add("".concat(prefixCls.value, "-rail--disabled"));
        } else {
          xRailEl.classList.remove("".concat(prefixCls.value, "-rail--disabled"));
        }
      }
      if (yRailEl) {
        if (!needYBar) {
          yRailEl.classList.add("".concat(prefixCls.value, "-rail--disabled"));
        } else {
          yRailEl.classList.remove("".concat(prefixCls.value, "-rail--disabled"));
        }
      }
    });
    (0, _vue.onMounted)(function () {
      // if container exist, it always can't be resolved when scrollbar is mounted
      // for example:
      // - component
      //   - scrollbar
      //     - inner
      // if you pass inner to scrollbar, you may use a ref inside component
      // however, when scrollbar is mounted, ref is not ready at component
      // you need to init by yourself
      if (props.container) return;
      sync();
    });
    (0, _vue.onBeforeUnmount)(function () {
      if (xBarVanishTimerId !== undefined) {
        window.clearTimeout(xBarVanishTimerId);
      }
      if (yBarVanishTimerId !== undefined) {
        window.clearTimeout(yBarVanishTimerId);
      }
      (0, _evtd.off)('mousemove', window, handleYScrollMouseMove, true);
      (0, _evtd.off)('mouseup', window, handleYScrollMouseUp, true);
    });
    var exposedMethods = {
      scrollTo: scrollTo,
      scrollBy: scrollBy,
      sync: sync,
      syncUnifiedContainer: syncUnifiedContainer,
      handleMouseEnterWrapper: handleMouseEnterWrapper,
      handleMouseLeaveWrapper: handleMouseLeaveWrapper
    };
    return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, exposedMethods), {}, {
      mergedClsPrefix: prefixCls.value,
      rtlEnabled: direction.value === 'rtl',
      containerScrollTop: containerScrollTopRef,
      wrapperRef: wrapperRef,
      containerRef: containerRef,
      contentRef: contentRef,
      yRailRef: yRailRef,
      xRailRef: xRailRef,
      needYBar: needYBarRef,
      needXBar: needXBarRef,
      yBarSizePx: yBarSizePxRef,
      xBarSizePx: xBarSizePxRef,
      yBarTopPx: yBarTopPxRef,
      xBarLeftPx: xBarLeftPxRef,
      isShowXBar: mergedShowXBarRef,
      isShowYBar: mergedShowYBarRef,
      isIos: isIos,
      handleScroll: handleScroll,
      handleContentResize: handleContentResize,
      handleContainerResize: handleContainerResize,
      handleYScrollMouseDown: handleYScrollMouseDown,
      handleXScrollMouseDown: handleXScrollMouseDown
    });
  },
  render: function render() {
    var _$slots$default,
      _this = this;
    var $slots = this.$slots,
      mergedClsPrefix = this.mergedClsPrefix,
      triggerDisplayManually = this.triggerDisplayManually,
      rtlEnabled = this.rtlEnabled,
      internalHoistYRail = this.internalHoistYRail;
    if (!this.scrollable) return (_$slots$default = $slots.default) === null || _$slots$default === void 0 ? void 0 : _$slots$default.call($slots);
    var triggerIsNone = this.trigger === 'none';
    var createYRail = function createYRail() {
      return (0, _vue.createVNode)("div", {
        "ref": "yRailRef",
        "class": ["".concat(mergedClsPrefix, "-rail"), "".concat(mergedClsPrefix, "-rail--vertical"), "".concat(_this.needYBar && _this.isShowYBar && !_this.isIos ? "".concat(mergedClsPrefix, "-rail--verticalBg") : ''), _this.needXBar && _this.isShowXBar && !_this.isIos ? "".concat(mergedClsPrefix, "-rail--vertical_horizontal") : ''],
        "data-scrollbar-rail": true,
        "style": _this.verticalRailStyle,
        "aria-hidden": true
      }, [(0, _vue.h)(triggerIsNone ? Wrapper : _vue.Transition, triggerIsNone ? null : {
        name: 'fade-in-transition'
      }, {
        default: function _default() {
          return _this.needYBar && _this.isShowYBar && !_this.isIos ? (0, _vue.createVNode)("div", {
            "class": "".concat(mergedClsPrefix, "-rail__scrollbar"),
            "style": {
              height: _this.yBarSizePx,
              top: _this.yBarTopPx
            },
            "onMousedown": _this.handleYScrollMouseDown
          }, null) : null;
        }
      })]);
    };
    var createChildren = function createChildren() {
      var _this$onRender, _$slots$default2;
      (_this$onRender = _this.onRender) === null || _this$onRender === void 0 ? void 0 : _this$onRender.call(_this);
      return (0, _vue.h)('div', (0, _vue.mergeProps)(_this.$attrs, {
        role: 'none',
        ref: 'wrapperRef',
        class: ["".concat(mergedClsPrefix), _this.themeClass, rtlEnabled && "".concat(mergedClsPrefix, "--rtl")],
        style: _this.cssVars,
        onMouseenter: triggerDisplayManually ? undefined : _this.handleMouseEnterWrapper,
        onMouseleave: triggerDisplayManually ? undefined : _this.handleMouseLeaveWrapper
      }), [_this.container ? (_$slots$default2 = $slots.default) === null || _$slots$default2 === void 0 ? void 0 : _$slots$default2.call($slots) : (0, _vue.createVNode)("div", {
        "role": "none",
        "ref": "containerRef",
        "class": ["".concat(mergedClsPrefix, "-container"), _this.containerClass],
        "style": _this.containerStyle,
        "onScroll": _this.handleScroll,
        "onWheel": _this.onWheel
      }, [(0, _vue.createVNode)(_vcResizeObserver.default, {
        "onResize": _this.handleContentResize
      }, {
        default: function _default() {
          var _$slots$default3;
          return (0, _vue.createVNode)("div", {
            "ref": "contentRef",
            "role": "none",
            "style": [{
              width: _this.xScrollable ? 'fit-content' : null
            }, _this.contentStyle],
            "class": ["".concat(mergedClsPrefix, "-content"), _this.contentClass]
          }, [(_$slots$default3 = $slots.default) === null || _$slots$default3 === void 0 ? void 0 : _$slots$default3.call($slots)]);
        }
      })]), internalHoistYRail ? null : createYRail(), _this.xScrollable && (0, _vue.createVNode)("div", {
        "ref": "xRailRef",
        "class": ["".concat(mergedClsPrefix, "-rail"), "".concat(mergedClsPrefix, "-rail--horizontal"), "".concat(_this.needXBar && _this.isShowXBar && !_this.isIos ? "".concat(mergedClsPrefix, "-rail--horizontalBg") : ''), _this.needYBar && _this.isShowYBar && !_this.isIos ? "".concat(mergedClsPrefix, "-rail--horizontal_vertical") : ''],
        "style": _this.horizontalRailStyle,
        "data-scrollbar-rail": true,
        "aria-hidden": true
      }, [(0, _vue.h)(triggerIsNone ? Wrapper : _vue.Transition, triggerIsNone ? null : {
        name: 'fade-in-transition'
      }, {
        default: function _default() {
          return _this.needXBar && _this.isShowXBar && !_this.isIos ? (0, _vue.createVNode)("div", {
            "class": "".concat(mergedClsPrefix, "-rail__scrollbar"),
            "style": {
              width: _this.xBarSizePx,
              right: rtlEnabled ? _this.xBarLeftPx : undefined,
              left: rtlEnabled ? undefined : _this.xBarLeftPx
            },
            "onMousedown": _this.handleXScrollMouseDown
          }, null) : null;
        }
      })]), _this.needYBar && _this.isShowYBar && _this.needXBar && _this.isShowXBar && !_this.isIos && _this.xScrollable && (0, _vue.createVNode)("div", {
        "class": "".concat(mergedClsPrefix, "-corner")
      }, null)]);
    };
    var scrollbarNode = this.container ? createChildren() : (0, _vue.createVNode)(_vcResizeObserver.default, {
      "onResize": this.handleContainerResize
    }, {
      default: createChildren
    });
    if (internalHoistYRail) {
      return (0, _vue.createVNode)(_vue.Fragment, null, [scrollbarNode, createYRail()]);
    } else {
      return scrollbarNode;
    }
  }
});
exports.Scrollbar = Scrollbar;
var _default2 = Scrollbar;
exports.default = _default2;
var XScrollbar = Scrollbar;
exports.XScrollbar = XScrollbar;