scrollbar2.js 5.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179
  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. var error = require('../../../utils/error.js');
  14. const COMPONENT_NAME = "ElScrollbar";
  15. const __default__ = vue.defineComponent({
  16. name: COMPONENT_NAME
  17. });
  18. const _sfc_main = /* @__PURE__ */ vue.defineComponent({
  19. ...__default__,
  20. props: scrollbar.scrollbarProps,
  21. emits: scrollbar.scrollbarEmits,
  22. setup(__props, { expose, emit }) {
  23. const props = __props;
  24. const ns = index.useNamespace("scrollbar");
  25. let stopResizeObserver = void 0;
  26. let stopResizeListener = void 0;
  27. let wrapScrollTop = 0;
  28. let wrapScrollLeft = 0;
  29. const scrollbarRef = vue.ref();
  30. const wrapRef = vue.ref();
  31. const resizeRef = vue.ref();
  32. const barRef = vue.ref();
  33. const wrapStyle = vue.computed(() => {
  34. const style$1 = {};
  35. if (props.height)
  36. style$1.height = style.addUnit(props.height);
  37. if (props.maxHeight)
  38. style$1.maxHeight = style.addUnit(props.maxHeight);
  39. return [props.wrapStyle, style$1];
  40. });
  41. const wrapKls = vue.computed(() => {
  42. return [
  43. props.wrapClass,
  44. ns.e("wrap"),
  45. { [ns.em("wrap", "hidden-default")]: !props.native }
  46. ];
  47. });
  48. const resizeKls = vue.computed(() => {
  49. return [ns.e("view"), props.viewClass];
  50. });
  51. const handleScroll = () => {
  52. var _a;
  53. if (wrapRef.value) {
  54. (_a = barRef.value) == null ? void 0 : _a.handleScroll(wrapRef.value);
  55. wrapScrollTop = wrapRef.value.scrollTop;
  56. wrapScrollLeft = wrapRef.value.scrollLeft;
  57. emit("scroll", {
  58. scrollTop: wrapRef.value.scrollTop,
  59. scrollLeft: wrapRef.value.scrollLeft
  60. });
  61. }
  62. };
  63. function scrollTo(arg1, arg2) {
  64. if (shared.isObject(arg1)) {
  65. wrapRef.value.scrollTo(arg1);
  66. } else if (types.isNumber(arg1) && types.isNumber(arg2)) {
  67. wrapRef.value.scrollTo(arg1, arg2);
  68. }
  69. }
  70. const setScrollTop = (value) => {
  71. if (!types.isNumber(value)) {
  72. error.debugWarn(COMPONENT_NAME, "value must be a number");
  73. return;
  74. }
  75. wrapRef.value.scrollTop = value;
  76. };
  77. const setScrollLeft = (value) => {
  78. if (!types.isNumber(value)) {
  79. error.debugWarn(COMPONENT_NAME, "value must be a number");
  80. return;
  81. }
  82. wrapRef.value.scrollLeft = value;
  83. };
  84. const update = () => {
  85. var _a;
  86. (_a = barRef.value) == null ? void 0 : _a.update();
  87. };
  88. vue.watch(() => props.noresize, (noresize) => {
  89. if (noresize) {
  90. stopResizeObserver == null ? void 0 : stopResizeObserver();
  91. stopResizeListener == null ? void 0 : stopResizeListener();
  92. } else {
  93. ({ stop: stopResizeObserver } = core.useResizeObserver(resizeRef, update));
  94. stopResizeListener = core.useEventListener("resize", update);
  95. }
  96. }, { immediate: true });
  97. vue.watch(() => [props.maxHeight, props.height], () => {
  98. if (!props.native)
  99. vue.nextTick(() => {
  100. var _a;
  101. update();
  102. if (wrapRef.value) {
  103. (_a = barRef.value) == null ? void 0 : _a.handleScroll(wrapRef.value);
  104. }
  105. });
  106. });
  107. vue.provide(constants.scrollbarContextKey, vue.reactive({
  108. scrollbarElement: scrollbarRef,
  109. wrapElement: wrapRef
  110. }));
  111. vue.onActivated(() => {
  112. if (wrapRef.value) {
  113. wrapRef.value.scrollTop = wrapScrollTop;
  114. wrapRef.value.scrollLeft = wrapScrollLeft;
  115. }
  116. });
  117. vue.onMounted(() => {
  118. if (!props.native)
  119. vue.nextTick(() => {
  120. update();
  121. });
  122. });
  123. vue.onUpdated(() => update());
  124. expose({
  125. wrapRef,
  126. update,
  127. scrollTo,
  128. setScrollTop,
  129. setScrollLeft,
  130. handleScroll
  131. });
  132. return (_ctx, _cache) => {
  133. return vue.openBlock(), vue.createElementBlock("div", {
  134. ref_key: "scrollbarRef",
  135. ref: scrollbarRef,
  136. class: vue.normalizeClass(vue.unref(ns).b())
  137. }, [
  138. vue.createElementVNode("div", {
  139. ref_key: "wrapRef",
  140. ref: wrapRef,
  141. class: vue.normalizeClass(vue.unref(wrapKls)),
  142. style: vue.normalizeStyle(vue.unref(wrapStyle)),
  143. tabindex: _ctx.tabindex,
  144. onScroll: handleScroll
  145. }, [
  146. (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.tag), {
  147. id: _ctx.id,
  148. ref_key: "resizeRef",
  149. ref: resizeRef,
  150. class: vue.normalizeClass(vue.unref(resizeKls)),
  151. style: vue.normalizeStyle(_ctx.viewStyle),
  152. role: _ctx.role,
  153. "aria-label": _ctx.ariaLabel,
  154. "aria-orientation": _ctx.ariaOrientation
  155. }, {
  156. default: vue.withCtx(() => [
  157. vue.renderSlot(_ctx.$slots, "default")
  158. ]),
  159. _: 3
  160. }, 8, ["id", "class", "style", "role", "aria-label", "aria-orientation"]))
  161. ], 46, ["tabindex"]),
  162. !_ctx.native ? (vue.openBlock(), vue.createBlock(bar["default"], {
  163. key: 0,
  164. ref_key: "barRef",
  165. ref: barRef,
  166. always: _ctx.always,
  167. "min-size": _ctx.minSize
  168. }, null, 8, ["always", "min-size"])) : vue.createCommentVNode("v-if", true)
  169. ], 2);
  170. };
  171. }
  172. });
  173. var Scrollbar = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["__file", "scrollbar.vue"]]);
  174. exports["default"] = Scrollbar;
  175. //# sourceMappingURL=scrollbar2.js.map