wetrade-design
Version:
一款多语言支持Vue3的UI框架
258 lines (256 loc) • 9.14 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.scrollbarProps = exports.default = void 0;
var _vue = require("vue");
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _useConfigInject2 = _interopRequireDefault(require("../../_util/hooks/useConfigInject"));
var _classNames3 = _interopRequireDefault(require("../../_util/classNames"));
var _util = require("../../_util/util");
var _is = require("../../_util/hooks/_vueuse/is");
var _useResizeObserver2 = require("../../_util/hooks/_vueuse/useResizeObserver");
var _useEventListener = require("../../_util/hooks/_vueuse/useEventListener");
var _utils = require("./utils");
var _constants = require("./constants");
var _bar = _interopRequireDefault(require("./bar"));
// import { useEventListener } from '@vueuse/core';
var scrollbarProps = function scrollbarProps() {
return {
/**
* @description height of scrollbar
*/
height: {
type: [String, Number],
default: ''
},
/**
* @description max height of scrollbar
*/
maxHeight: {
type: [String, Number],
default: ''
},
/**
* @description whether to use the native scrollbar
*/
native: {
type: Boolean,
default: false
},
/**
* @description style of wrap
*/
wrapStyle: {
type: Object,
default: undefined
},
/**
* @description class of wrap
*/
wrapClass: {
type: [String, Array],
default: ''
},
/**
* @description class of view
*/
viewClass: {
type: [String, Array],
default: ''
},
/**
* @description style of view
*/
viewStyle: {
type: [String, Array, Object],
default: ''
},
/**
* @description do not respond to container size changes, if the container size does not change, it is better to set it to optimize performance
*/
noresize: Boolean,
/**
* @description element tag of the view
*/
component: String,
/**
* @description always show
*/
always: Boolean,
/**
* @description minimum size of scrollbar
*/
minSize: {
type: Number,
default: 20
}
};
};
exports.scrollbarProps = scrollbarProps;
var Scrollbar = (0, _vue.defineComponent)({
name: 'WdScrollbar',
props: scrollbarProps(),
emits: ['scroll'],
setup: function setup(props, _ref) {
var emit = _ref.emit,
slots = _ref.slots,
expose = _ref.expose;
var COMPONENT_NAME = 'scrollbar';
var _useConfigInject = (0, _useConfigInject2.default)('scrollbar', props),
prefixCls = _useConfigInject.prefixCls;
var stopResizeObserver = undefined;
var stopResizeListener = undefined;
var scrollbarRef = (0, _vue.ref)();
var wrapRef = (0, _vue.ref)();
var resizeRef = (0, _vue.ref)();
var sizeWidth = (0, _vue.ref)('0');
var sizeHeight = (0, _vue.ref)('0');
var barRef = (0, _vue.ref)();
var ratioY = (0, _vue.ref)(1);
var ratioX = (0, _vue.ref)(1);
var style = (0, _vue.computed)(function () {
var style = {};
if (props.height) style.height = (0, _util.addUnit)(props.height);
if (props.maxHeight) style.maxHeight = (0, _util.addUnit)(props.maxHeight);
return [props.wrapStyle, style];
});
var handleScroll = function handleScroll() {
if (wrapRef.value) {
var _barRef$value;
(_barRef$value = barRef.value) === null || _barRef$value === void 0 ? void 0 : _barRef$value.handleScroll(wrapRef.value);
emit('scroll', {
scrollTop: wrapRef.value.scrollTop,
scrollLeft: wrapRef.value.scrollLeft
});
}
};
function scrollTo(arg1, arg2) {
if ((0, _is.isObject)(arg1)) {
wrapRef.value.scrollTo(arg1);
} else if ((0, _is.isNumber)(arg1) && (0, _is.isNumber)(arg2)) {
wrapRef.value.scrollTo(arg1, arg2);
}
}
var setScrollTop = function setScrollTop(value) {
if (!(0, _is.isNumber)(value)) {
console.warn(COMPONENT_NAME, 'value must be a number');
return;
}
wrapRef.value.scrollTop = value;
};
var setScrollLeft = function setScrollLeft(value) {
if (!(0, _is.isNumber)(value)) {
console.warn(COMPONENT_NAME, 'value must be a number');
return;
}
wrapRef.value.scrollLeft = value;
};
var update = function update() {
if (!wrapRef.value) return;
var offsetHeight = wrapRef.value.offsetHeight - _utils.GAP;
var offsetWidth = wrapRef.value.offsetWidth - _utils.GAP;
var originalHeight = Math.pow(offsetHeight, 2) / wrapRef.value.scrollHeight;
var originalWidth = Math.pow(offsetWidth, 2) / wrapRef.value.scrollWidth;
var height = Math.max(originalHeight, props.minSize);
var width = Math.max(originalWidth, props.minSize);
ratioY.value = originalHeight / (offsetHeight - originalHeight) / (height / (offsetHeight - height));
ratioX.value = originalWidth / (offsetWidth - originalWidth) / (width / (offsetWidth - width));
sizeHeight.value = height + _utils.GAP < offsetHeight ? "".concat(height, "px") : '';
sizeWidth.value = width + _utils.GAP < offsetWidth ? "".concat(width, "px") : '';
};
(0, _vue.watch)(function () {
return props.noresize;
}, function (noresize) {
if (noresize) {
var _stopResizeObserver, _stopResizeListener;
(_stopResizeObserver = stopResizeObserver) === null || _stopResizeObserver === void 0 ? void 0 : _stopResizeObserver();
(_stopResizeListener = stopResizeListener) === null || _stopResizeListener === void 0 ? void 0 : _stopResizeListener();
} else {
var _useResizeObserver = (0, _useResizeObserver2.useResizeObserver)(resizeRef, update);
stopResizeObserver = _useResizeObserver.stop;
stopResizeListener = (0, _useEventListener.useEventListener)('resize', update);
}
}, {
immediate: true
});
(0, _vue.watch)(function () {
return [props.maxHeight, props.height];
}, function () {
if (!props.native) (0, _vue.nextTick)(function () {
update();
if (wrapRef.value) {
var _barRef$value2;
(_barRef$value2 = barRef.value) === null || _barRef$value2 === void 0 ? void 0 : _barRef$value2.handleScroll(wrapRef.value);
}
});
});
(0, _vue.provide)(_constants.scrollbarContextKey, (0, _vue.reactive)({
scrollbarElement: scrollbarRef,
wrapElement: wrapRef
}));
(0, _vue.onMounted)(function () {
if (!props.native) (0, _vue.nextTick)(function () {
update();
});
});
(0, _vue.onUpdated)(function () {
return update();
});
expose({
/** @description scrollbar wrap ref */
wrapRef: wrapRef,
/** @description update scrollbar state manually */
update: update,
/** @description scrolls to a particular set of coordinates */
scrollTo: scrollTo,
/** @description set distance to scroll top */
setScrollTop: setScrollTop,
/** @description set distance to scroll left */
setScrollLeft: setScrollLeft,
/** @description handle scroll event */
handleScroll: handleScroll
});
return function () {
var _classNames, _slots$default;
var wrapKls = (0, _classNames3.default)("".concat(props.wrapClass), (_classNames = {}, (0, _defineProperty2.default)(_classNames, "".concat(prefixCls.value, "-wrap"), true), (0, _defineProperty2.default)(_classNames, "".concat(prefixCls.value, "-wrap-hidden-default"), !props.native), _classNames));
var resizeKls = (0, _classNames3.default)("".concat(props.viewClass), (0, _defineProperty2.default)({}, "".concat(prefixCls.value, "-view"), true));
var _props$component = props.component,
Component = _props$component === void 0 ? 'div' : _props$component,
always = props.always,
viewStyle = props.viewStyle,
native = props.native;
var barNode = null;
if (!native) {
barNode = (0, _vue.createVNode)(_bar.default, {
"ref": barRef,
"height": sizeHeight.value,
"width": sizeWidth.value,
"always": always,
"ratio-x": ratioX.value,
"ratio-y": ratioY.value
}, null);
}
return (0, _vue.createVNode)("div", {
"class": "".concat(prefixCls.value),
"ref": scrollbarRef
}, [(0, _vue.createVNode)("div", {
"ref": wrapRef,
"class": wrapKls,
"style": style.value,
"onScroll": handleScroll
}, [(0, _vue.createVNode)(Component, {
"ref": resizeRef,
"class": resizeKls,
"style": viewStyle
}, {
default: function _default() {
return [(_slots$default = slots.default) === null || _slots$default === void 0 ? void 0 : _slots$default.call(slots)];
}
})]), barNode]);
};
}
});
var _default2 = Scrollbar;
exports.default = _default2;