6b1c6ad1b768722b6e2252a42946f1aea121bbcc97d0a603753f7bc56856748d6b6e81a89733e233fc44fc69955773e844caa2ad5bc135994e3e8fcc5b0004 7.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232
  1. 'use strict';
  2. Object.defineProperty(exports, '__esModule', { value: true });
  3. var vue = require('vue');
  4. var core = require('@vueuse/core');
  5. var bar = require('./bar2.js');
  6. var constants = require('./constants.js');
  7. var scrollbar = require('./scrollbar.js');
  8. var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
  9. var index = require('../../../hooks/use-namespace/index.js');
  10. var style = require('../../../utils/dom/style.js');
  11. var shared = require('@vue/shared');
  12. var types = require('../../../utils/types.js');
  13. const COMPONENT_NAME = "ElScrollbar";
  14. const __default__ = vue.defineComponent({
  15. name: COMPONENT_NAME
  16. });
  17. const _sfc_main = /* @__PURE__ */ vue.defineComponent({
  18. ...__default__,
  19. props: scrollbar.scrollbarProps,
  20. emits: scrollbar.scrollbarEmits,
  21. setup(__props, { expose, emit }) {
  22. const props = __props;
  23. const ns = index.useNamespace("scrollbar");
  24. let stopResizeObserver = void 0;
  25. let stopWrapResizeObserver = void 0;
  26. let stopResizeListener = void 0;
  27. let wrapScrollTop = 0;
  28. let wrapScrollLeft = 0;
  29. let direction = "";
  30. const distanceScrollState = {
  31. bottom: false,
  32. top: false,
  33. right: false,
  34. left: false
  35. };
  36. const scrollbarRef = vue.ref();
  37. const wrapRef = vue.ref();
  38. const resizeRef = vue.ref();
  39. const barRef = vue.ref();
  40. const wrapStyle = vue.computed(() => {
  41. const style$1 = {};
  42. if (props.height)
  43. style$1.height = style.addUnit(props.height);
  44. if (props.maxHeight)
  45. style$1.maxHeight = style.addUnit(props.maxHeight);
  46. return [props.wrapStyle, style$1];
  47. });
  48. const wrapKls = vue.computed(() => {
  49. return [
  50. props.wrapClass,
  51. ns.e("wrap"),
  52. { [ns.em("wrap", "hidden-default")]: !props.native }
  53. ];
  54. });
  55. const resizeKls = vue.computed(() => {
  56. return [ns.e("view"), props.viewClass];
  57. });
  58. const shouldSkipDirection = (direction2) => {
  59. var _a;
  60. return (_a = distanceScrollState[direction2]) != null ? _a : false;
  61. };
  62. const DIRECTION_PAIRS = {
  63. top: "bottom",
  64. bottom: "top",
  65. left: "right",
  66. right: "left"
  67. };
  68. const updateTriggerStatus = (arrivedStates) => {
  69. const oppositeDirection = DIRECTION_PAIRS[direction];
  70. if (!oppositeDirection)
  71. return;
  72. const arrived = arrivedStates[direction];
  73. const oppositeArrived = arrivedStates[oppositeDirection];
  74. if (arrived && !distanceScrollState[direction]) {
  75. distanceScrollState[direction] = true;
  76. }
  77. if (!oppositeArrived && distanceScrollState[oppositeDirection]) {
  78. distanceScrollState[oppositeDirection] = false;
  79. }
  80. };
  81. const handleScroll = () => {
  82. var _a;
  83. if (wrapRef.value) {
  84. (_a = barRef.value) == null ? void 0 : _a.handleScroll(wrapRef.value);
  85. const prevTop = wrapScrollTop;
  86. const prevLeft = wrapScrollLeft;
  87. wrapScrollTop = wrapRef.value.scrollTop;
  88. wrapScrollLeft = wrapRef.value.scrollLeft;
  89. const arrivedStates = {
  90. bottom: wrapScrollTop + wrapRef.value.clientHeight >= wrapRef.value.scrollHeight - props.distance,
  91. top: wrapScrollTop <= props.distance && prevTop !== 0,
  92. right: wrapScrollLeft + wrapRef.value.clientWidth >= wrapRef.value.scrollWidth - props.distance && prevLeft !== wrapScrollLeft,
  93. left: wrapScrollLeft <= props.distance && prevLeft !== 0
  94. };
  95. emit("scroll", {
  96. scrollTop: wrapScrollTop,
  97. scrollLeft: wrapScrollLeft
  98. });
  99. if (prevTop !== wrapScrollTop) {
  100. direction = wrapScrollTop > prevTop ? "bottom" : "top";
  101. }
  102. if (prevLeft !== wrapScrollLeft) {
  103. direction = wrapScrollLeft > prevLeft ? "right" : "left";
  104. }
  105. if (props.distance > 0) {
  106. if (shouldSkipDirection(direction)) {
  107. return;
  108. }
  109. updateTriggerStatus(arrivedStates);
  110. }
  111. if (arrivedStates[direction])
  112. emit("end-reached", direction);
  113. }
  114. };
  115. function scrollTo(arg1, arg2) {
  116. if (shared.isObject(arg1)) {
  117. wrapRef.value.scrollTo(arg1);
  118. } else if (types.isNumber(arg1) && types.isNumber(arg2)) {
  119. wrapRef.value.scrollTo(arg1, arg2);
  120. }
  121. }
  122. const setScrollTop = (value) => {
  123. if (!types.isNumber(value)) {
  124. return;
  125. }
  126. wrapRef.value.scrollTop = value;
  127. };
  128. const setScrollLeft = (value) => {
  129. if (!types.isNumber(value)) {
  130. return;
  131. }
  132. wrapRef.value.scrollLeft = value;
  133. };
  134. const update = () => {
  135. var _a;
  136. (_a = barRef.value) == null ? void 0 : _a.update();
  137. distanceScrollState[direction] = false;
  138. };
  139. vue.watch(() => props.noresize, (noresize) => {
  140. if (noresize) {
  141. stopResizeObserver == null ? void 0 : stopResizeObserver();
  142. stopWrapResizeObserver == null ? void 0 : stopWrapResizeObserver();
  143. stopResizeListener == null ? void 0 : stopResizeListener();
  144. } else {
  145. ({ stop: stopResizeObserver } = core.useResizeObserver(resizeRef, update));
  146. ({ stop: stopWrapResizeObserver } = core.useResizeObserver(wrapRef, update));
  147. stopResizeListener = core.useEventListener("resize", update);
  148. }
  149. }, { immediate: true });
  150. vue.watch(() => [props.maxHeight, props.height], () => {
  151. if (!props.native)
  152. vue.nextTick(() => {
  153. var _a;
  154. update();
  155. if (wrapRef.value) {
  156. (_a = barRef.value) == null ? void 0 : _a.handleScroll(wrapRef.value);
  157. }
  158. });
  159. });
  160. vue.provide(constants.scrollbarContextKey, vue.reactive({
  161. scrollbarElement: scrollbarRef,
  162. wrapElement: wrapRef
  163. }));
  164. vue.onActivated(() => {
  165. if (wrapRef.value) {
  166. wrapRef.value.scrollTop = wrapScrollTop;
  167. wrapRef.value.scrollLeft = wrapScrollLeft;
  168. }
  169. });
  170. vue.onMounted(() => {
  171. if (!props.native)
  172. vue.nextTick(() => {
  173. update();
  174. });
  175. });
  176. vue.onUpdated(() => update());
  177. expose({
  178. wrapRef,
  179. update,
  180. scrollTo,
  181. setScrollTop,
  182. setScrollLeft,
  183. handleScroll
  184. });
  185. return (_ctx, _cache) => {
  186. return vue.openBlock(), vue.createElementBlock("div", {
  187. ref_key: "scrollbarRef",
  188. ref: scrollbarRef,
  189. class: vue.normalizeClass(vue.unref(ns).b())
  190. }, [
  191. vue.createElementVNode("div", {
  192. ref_key: "wrapRef",
  193. ref: wrapRef,
  194. class: vue.normalizeClass(vue.unref(wrapKls)),
  195. style: vue.normalizeStyle(vue.unref(wrapStyle)),
  196. tabindex: _ctx.tabindex,
  197. onScroll: handleScroll
  198. }, [
  199. (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.tag), {
  200. id: _ctx.id,
  201. ref_key: "resizeRef",
  202. ref: resizeRef,
  203. class: vue.normalizeClass(vue.unref(resizeKls)),
  204. style: vue.normalizeStyle(_ctx.viewStyle),
  205. role: _ctx.role,
  206. "aria-label": _ctx.ariaLabel,
  207. "aria-orientation": _ctx.ariaOrientation
  208. }, {
  209. default: vue.withCtx(() => [
  210. vue.renderSlot(_ctx.$slots, "default")
  211. ]),
  212. _: 3
  213. }, 8, ["id", "class", "style", "role", "aria-label", "aria-orientation"]))
  214. ], 46, ["tabindex"]),
  215. !_ctx.native ? (vue.openBlock(), vue.createBlock(bar["default"], {
  216. key: 0,
  217. ref_key: "barRef",
  218. ref: barRef,
  219. always: _ctx.always,
  220. "min-size": _ctx.minSize
  221. }, null, 8, ["always", "min-size"])) : vue.createCommentVNode("v-if", true)
  222. ], 2);
  223. };
  224. }
  225. });
  226. var Scrollbar = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["__file", "scrollbar.vue"]]);
  227. exports["default"] = Scrollbar;
  228. //# sourceMappingURL=scrollbar2.js.map