quasar/src/components/scroll-area/ScrollAreaControls.js

Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time

import { h, withDirectives } from 'vue'

import { createComponent } from '../../utils/private.create/create.js'

/**
 * We are using a sub-component to avoid unnecessary re-renders
 * of the QScrollArea content when the scrollbars are interacted with.
 */
export default createComponent({
  props: [
    'store',
    'barStyle',
    'verticalBarStyle',
    'horizontalBarStyle'
  ],

  setup (props) {
    return () => ([
      h('div', {
        class: props.store.scroll.vertical.barClass.value,
        style: [ props.barStyle, props.verticalBarStyle ],
        'aria-hidden': 'true',
        onMousedown: props.store.onVerticalMousedown
      }),

      h('div', {
        class: props.store.scroll.horizontal.barClass.value,
        style: [ props.barStyle, props.horizontalBarStyle ],
        'aria-hidden': 'true',
        onMousedown: props.store.onHorizontalMousedown
      }),

      withDirectives(
        h('div', {
          ref: props.store.scroll.vertical.ref,
          class: props.store.scroll.vertical.thumbClass.value,
          style: props.store.scroll.vertical.style.value,
          'aria-hidden': 'true'
        }),
        props.store.thumbVertDir
      ),

      withDirectives(
        h('div', {
          ref: props.store.scroll.horizontal.ref,
          class: props.store.scroll.horizontal.thumbClass.value,
          style: props.store.scroll.horizontal.style.value,
          'aria-hidden': 'true'
        }),
        props.store.thumbHorizDir
      )
    ])
  }
})