You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

278 line
12 KiB

  1. /**
  2. * simplebar-vue - v2.3.5
  3. * Vue component for SimpleBar
  4. * https://grsmto.github.io/simplebar/
  5. *
  6. * Made by Piers Olenski
  7. * Under MIT License
  8. */
  9. (function (global, factory) {
  10. typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('simplebar-core'), require('vue-demi')) :
  11. typeof define === 'function' && define.amd ? define(['simplebar-core', 'vue-demi'], factory) :
  12. (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.SimpleBarVue = factory(global.SimpleBar, global.vueDemi));
  13. })(this, (function (SimpleBarCore, vueDemi) { 'use strict';
  14. /******************************************************************************
  15. Copyright (c) Microsoft Corporation.
  16. Permission to use, copy, modify, and/or distribute this software for any
  17. purpose with or without fee is hereby granted.
  18. THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
  19. REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
  20. AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
  21. INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
  22. LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
  23. OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
  24. PERFORMANCE OF THIS SOFTWARE.
  25. ***************************************************************************** */
  26. var __assign = function() {
  27. __assign = Object.assign || function __assign(t) {
  28. for (var s, i = 1, n = arguments.length; i < n; i++) {
  29. s = arguments[i];
  30. for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
  31. }
  32. return t;
  33. };
  34. return __assign.apply(this, arguments);
  35. };
  36. var lifecycleEventNames = {
  37. beforeUnmount: vueDemi.isVue3 ? 'beforeUnmount' : 'beforeDestroy',
  38. unmount: vueDemi.isVue3 ? 'unmount' : 'destroy'
  39. };
  40. var _a;
  41. /**
  42. * This is not as easy to read than a regular <template> block, but a
  43. * render function is a necessary "evil" to avoid compiler output
  44. * differences between vue2 and vue3, which would required a
  45. * different cross-compatible implementation.
  46. *
  47. * IMPORTANT NOTES:
  48. * - options API is required to keep backwards compatibility to vue<@2.6.
  49. * only superior versions get compat with @vue/composition-api plugin.
  50. * - String template refs are required for compat @vue<2.7
  51. * - If refactoring to composition-api and thus dropping support to vue<@2.6
  52. * do note that returning a render function from setup() hook does not
  53. * in >=2.6.0 < 2.7.0 because the way @vue/composition-api handles
  54. * template refs.
  55. * {@link https://github.com/vuejs/composition-api#limitations}
  56. *
  57. * ALTERNATIVES:
  58. * - https://github.com/vueuse/vue-demi/issues/152
  59. * - https://github.com/vueuse/vue-demi/issues/153
  60. * - https://github.com/vueuse/vue-demi/issues/154
  61. * - {@link https://github.com/cloydlau/json-editor-vue/blob/3a6127d6587ef297f7ab60800cf78a8be5327cb7/src/Component.ts}
  62. *
  63. *
  64. * @todo maybe using jsx in a next version would make this a bit more readable.
  65. * but we need to ensure it compiles to a cross-compatible render function
  66. * to avoid going back to the same place where we've been with the <template>
  67. */
  68. function renderFn(_a) {
  69. var _b;
  70. var h = _a.h, emit = _a.emit, slots = _a.slots, props = _a.props;
  71. var onScroll = function (event) { return emit('scroll', event); };
  72. var classNames = __assign(__assign({}, SimpleBarCore.defaultOptions.classNames), props.classNames);
  73. return h('div', __assign({ ref: 'element' }, (vueDemi.isVue3
  74. ? {
  75. 'data-simplebar': 'init'
  76. }
  77. : {
  78. attrs: {
  79. 'data-simplebar': 'init'
  80. }
  81. })), [
  82. h('div', {
  83. "class": classNames.wrapper
  84. }, [
  85. h('div', { "class": classNames.heightAutoObserverWrapperEl }, [
  86. h('div', { "class": classNames.heightAutoObserverEl }),
  87. ]),
  88. h('div', { "class": classNames.mask }, [
  89. h('div', { "class": classNames.offset }, [
  90. h('div', __assign(__assign({}, (vueDemi.isVue3
  91. ? {
  92. onScroll: onScroll,
  93. "class": classNames.contentWrapper,
  94. tabIndex: props.tabIndex ||
  95. SimpleBarCore.defaultOptions.tabIndex,
  96. role: 'region',
  97. 'aria-label': props.ariaLabel ||
  98. SimpleBarCore.defaultOptions.ariaLabel
  99. }
  100. : {
  101. attrs: {
  102. "class": classNames.contentWrapper,
  103. tabIndex: props.tabIndex ||
  104. SimpleBarCore.defaultOptions.tabIndex,
  105. role: 'region',
  106. 'aria-label': props.ariaLabel ||
  107. SimpleBarCore.defaultOptions.ariaLabel
  108. },
  109. on: { scroll: onScroll }
  110. })), { ref: 'scrollElement' }), [
  111. h('div', { "class": classNames.contentEl, ref: 'contentElement' }, (_b = slots["default"]) === null || _b === void 0 ? void 0 : _b.call(slots)),
  112. ]),
  113. ]),
  114. ]),
  115. h('div', { "class": classNames.placeholder }),
  116. ]),
  117. h('div', { "class": "".concat(classNames.track, " simplebar-horizontal") }, [
  118. h('div', { "class": classNames.scrollbar }),
  119. ]),
  120. h('div', { "class": "".concat(classNames.track, " simplebar-vertical") }, [
  121. h('div', { "class": classNames.scrollbar }),
  122. ]),
  123. ]);
  124. }
  125. var simplebar = vueDemi.defineComponent((_a = {
  126. name: 'simplebar-vue',
  127. props: {
  128. /**
  129. * By default SimpleBar automatically hides the scrollbar if the user is not scrolling
  130. * (it emulates Mac OSX Lion's scrollbar). You can make the scrollbar always visible
  131. * by passing `false`.
  132. *
  133. * Default value is `true`.
  134. *
  135. * You can also control the animation via CSS as it's a simple CSS opacity transition.
  136. */
  137. autoHide: { type: Boolean, "default": undefined },
  138. /**
  139. * It is possible to change the default class names that SimpleBar uses.
  140. * To get your own styles to work refer to simplebar.css to get an idea how to setup your css.
  141. * - `content` represents the wrapper for the content being scrolled.
  142. * - `scrollContent` represents the container containing the elements being scrolled.
  143. * - `scrollbar` defines the style of the scrollbar with which the user can interact to scroll the content.
  144. * - `track` styles the area surrounding the `scrollbar`.
  145. *
  146. * ```js
  147. * classNames: {
  148. * // defaults
  149. * content: 'simplebar-content',
  150. * scrollContent: 'simplebar-scroll-content',
  151. * scrollbar: 'simplebar-scrollbar',
  152. * track: 'simplebar-track'
  153. * }
  154. * ```
  155. */
  156. classNames: Object,
  157. /**
  158. * Force the track to be visible (same behaviour as `overflow: scroll`).
  159. * Can be `boolean | 'x' | 'y'`, defaults to `false`, which behaves like `overflow: auto`.
  160. */
  161. forceVisible: {
  162. type: [Boolean, String],
  163. validator: function (v) {
  164. return typeof v === 'boolean' || v === 'x' || v === 'y';
  165. },
  166. "default": undefined
  167. },
  168. /**
  169. * Set custom aria-label attribute for users with screen reader.
  170. */
  171. ariaLabel: String,
  172. /**
  173. * Set custom tabIndex attribute.
  174. */
  175. tabIndex: Number,
  176. /**
  177. * Activate RTL support by passing `'rtl'`.
  178. * You will also need a css rule with `direction: rtl`.
  179. */
  180. direction: {
  181. type: String,
  182. validator: function (v) { return v === 'ltr' || v === 'rtl'; }
  183. },
  184. /**
  185. * Define the delay until the scrollbar hides. Has no effect if `autoHide` is `false`.
  186. * Default value is `1000`.
  187. */
  188. timeout: Number,
  189. /**
  190. * Controls the click on track behaviour.
  191. * Default to `true`.
  192. */
  193. clickOnTrack: { type: Boolean, "default": undefined },
  194. /**
  195. * Controls the min size of the scrollbar in `px`.
  196. * Default is `25`.
  197. */
  198. scrollbarMinSize: Number,
  199. /**
  200. * Controls the max size of the scrollbar in `px`.
  201. * Default is `0` (no max size).
  202. */
  203. scrollbarMaxSize: Number
  204. },
  205. // @ts-ignore
  206. emits: ['scroll'],
  207. /**
  208. * @returns {{ SimpleBar?: SimpleBar; scrollElement?: HTMLDivElement; contentElement?: HTMLDivElement }}
  209. */
  210. data: function () {
  211. return {};
  212. },
  213. mounted: function () {
  214. // @ts-ignore (`getOptions` needs to be added to the type definition file)
  215. var options = SimpleBarCore.getOptions(this.$refs.element.attributes);
  216. for (var _i = 0, _a = Object.entries(this.$props); _i < _a.length; _i++) {
  217. var _b = _a[_i], key = _b[0], value = _b[1];
  218. if (value != undefined && typeof value !== 'function')
  219. options[key] = value;
  220. }
  221. // @ts-ignore (unable to type cast `$refs`)
  222. this.SimpleBar = new SimpleBarCore(this.$refs.element, options);
  223. // @ts-ignore (unable to type cast `$refs`)
  224. this.scrollElement = this.$refs.scrollElement;
  225. // @ts-ignore (unable to type cast `$refs`)
  226. this.contentElement = this.$refs.contentElement;
  227. }
  228. },
  229. _a[lifecycleEventNames.beforeUnmount] = function () {
  230. var _a;
  231. // unMount is not present in types package https://github.com/Grsmto/simplebar/blob/6125d4ac0897c02a82432441aa3bae5e6c6ccb87/packages/simplebar/src/simplebar.js#L925
  232. // @ts-ignore
  233. (_a = this.SimpleBar) === null || _a === void 0 ? void 0 : _a.unMount();
  234. // @ts-ignore
  235. this.SimpleBar = undefined;
  236. },
  237. _a.methods = {
  238. recalculate: function () {
  239. var _a;
  240. // @ts-ignore
  241. (_a = this.SimpleBar) === null || _a === void 0 ? void 0 : _a.recalculate();
  242. }
  243. },
  244. /**
  245. * Note that createElement argument is only provided in <=vue@2.7.x,
  246. * in other versions it's a context object that we do not use.
  247. */
  248. _a.render = function (createElement) {
  249. var _this = this;
  250. return renderFn({
  251. h: typeof createElement === 'function' ? createElement : vueDemi.h,
  252. // @ts-ignore
  253. emit: function () {
  254. var args = [];
  255. for (var _i = 0; _i < arguments.length; _i++) {
  256. args[_i] = arguments[_i];
  257. }
  258. return _this.$emit.apply(_this, args);
  259. },
  260. // @ts-ignore
  261. slots: vueDemi.isVue3 ? this.$slots : this.$scopedSlots,
  262. props: this.$props
  263. });
  264. },
  265. _a));
  266. return simplebar;
  267. }));
  268. //# sourceMappingURL=simplebar-vue.js.map