Vous ne pouvez pas sélectionner plus de 25 sujets Les noms de sujets doivent commencer par une lettre ou un nombre, peuvent contenir des tirets ('-') et peuvent comporter jusqu'à 35 caractères.
 
 
 

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