Merge pull request #19 from microcipcip/feature/useScrollbarWidth

feat(useScrollbarWidth): Adding useScrollbarWidth function

Author: microcipcip

README.md

@@ -92,6 +92,8 @@ Vue.use(VueCompositionAPI)
     [![Demo](https://img.shields.io/badge/demo-🚀-yellow.svg)](https://microcipcip.github.io/vue-use-kit/?path=/story/sensors-usesize--demo)
   - [`useScroll`](./src/functions/useScroll/stories/useScroll.md) — tracks an HTML element's scroll position.
     [![Demo](https://img.shields.io/badge/demo-🚀-yellow.svg)](https://microcipcip.github.io/vue-use-kit/?path=/story/sensors-usescroll--demo)
+  - [`useScrollbarWidth`](./src/functions/useScrollbarWidth/stories/useScrollbarWidth.md) — gets current browser's scrollbar width.
+    [![Demo](https://img.shields.io/badge/demo-🚀-yellow.svg)](https://microcipcip.github.io/vue-use-kit/?path=/story/sensors-usescrollbarwidth--demo)
   - [`useSearchParams`](./src/functions/useSearchParams/stories/useSearchParams.md) — tracks browser's location search params.
     [![Demo](https://img.shields.io/badge/demo-🚀-yellow.svg)](https://microcipcip.github.io/vue-use-kit/?path=/story/sensors-usesearchparams--demo)
   - [`useWindowSize`](./src/functions/useWindowSize/stories/useWindowSize.md) — tracks `Window` scroll position.

src/functions/useScrollbarWidth/index.ts

@@ -0,0 +1 @@
+export * from './useScrollbarWidth'

src/functions/useScrollbarWidth/stories/UseScrollbarWidthDemo.vue

@@ -0,0 +1,29 @@
+<template>
+  <table class="table is-fullwidth">
+    <thead>
+      <tr>
+        <th>Prop</th>
+        <th>Value</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>scrollbarWidth</td>
+        <td>{{ scrollbarWidth }}px</td>
+      </tr>
+    </tbody>
+  </table>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+import { useScrollbarWidth } from '@src/vue-use-kit'
+
+export default Vue.extend({
+  name: 'UseScrollbarWidthDemo',
+  setup() {
+    const { scrollbarWidth } = useScrollbarWidth()
+    return { scrollbarWidth }
+  }
+})
+</script>

src/functions/useScrollbarWidth/stories/useScrollbarWidth.md

@@ -0,0 +1,46 @@
+# useScrollbarWidth
+
+Vue function that gets current browser's scrollbar width.
+
+## Reference
+
+```typescript
+function useScrollbarWidth(
+  runOnMount?: boolean
+): {
+  scrollbarWidth: Ref<number>
+  getScrollbarWidth: () => void
+}
+```
+
+### Parameters
+
+- `runOnMount: boolean` whether to get scrollbar width on mount, `true` by default
+
+### Returns
+
+- `scrollbarWidth: Ref<number>` the scrollbar width
+- `getScrollbarWidth: Function` the function to call to get the scrollbar width
+
+## Usage
+
+```html
+<template>
+  <div>
+    scrollbarWidth: {{ scrollbarWidth }}px
+  </div>
+</template>
+
+<script lang="ts">
+  import Vue from 'vue'
+  import { useScrollbarWidth } from 'vue-use-kit'
+
+  export default Vue.extend({
+    name: 'UseScrollbarWidthDemo',
+    setup() {
+      const { scrollbarWidth } = useScrollbarWidth()
+      return { scrollbarWidth }
+    }
+  })
+</script>
+```

src/functions/useScrollbarWidth/stories/useScrollbarWidth.story.ts

@@ -0,0 +1,28 @@
+import { storiesOf } from '@storybook/vue'
+import path from 'path'
+import StoryTitle from '@src/helpers/StoryTitle.vue'
+import UseScrollbarWidthDemo from './UseScrollbarWidthDemo.vue'
+
+const functionName = 'useScrollbarWidth'
+const functionPath = path.resolve(__dirname, '..')
+const notes = require(`./${functionName}.md`).default
+
+const basicDemo = () => ({
+  components: { StoryTitle, demo: UseScrollbarWidthDemo },
+  template: `
+    <div class="container">
+      <story-title 
+        function-path="${functionPath}" 
+        source-name="${functionName}" 
+        demo-name="UseScrollbarWidthDemo.vue"
+      >
+        <template v-slot:title></template>
+        <template v-slot:intro></template>
+      </story-title>
+      <demo />
+    </div>`
+})
+
+storiesOf('sensors|useScrollbarWidth', module)
+  .addParameters({ notes })
+  .add('Demo', basicDemo)

src/functions/useScrollbarWidth/useScrollbarWidth.spec.ts

@@ -0,0 +1,27 @@
+import { mount } from '@src/helpers/test'
+import { useScrollbarWidth } from '@src/vue-use-kit'
+
+afterEach(() => {
+  jest.clearAllMocks()
+})
+
+const testComponent = (onMount = true) => ({
+  template: `
+    <div>
+      <div id="scrollbarWidth">{{ scrollbarWidth }}</div>
+      <button id="getScrollbarWidth" @click="getScrollbarWidth"></button>
+    </div>
+  `,
+  setup() {
+    const { scrollbarWidth, getScrollbarWidth } = useScrollbarWidth(onMount)
+    return { scrollbarWidth, getScrollbarWidth }
+  }
+})
+
+describe('useScrollbarWidth', () => {
+  it('should return a scrollbarWidth as a numeric value', async () => {
+    const wrapper = mount(testComponent())
+    await wrapper.vm.$nextTick()
+    expect(wrapper.find('#scrollbarWidth').text()).toBe('0')
+  })
+})

src/functions/useScrollbarWidth/useScrollbarWidth.ts

@@ -0,0 +1,31 @@
+import { ref, onMounted, Ref } from '@src/api'
+
+export function useScrollbarWidth(runOnMount = true) {
+  const scrollbarWidth = ref(0)
+
+  const getScrollbarWidth = () => {
+    // https://stackoverflow.com/a/13382873/974107
+    // Creating invisible container
+    const outer = document.createElement('div')
+    outer.style.visibility = 'hidden'
+    outer.style.overflow = 'scroll' // forcing scrollbar to appear
+    outer.style.msOverflowStyle = 'scrollbar' // needed for WinJS apps
+    document.body.appendChild(outer)
+
+    // Creating inner element and placing it in the container
+    const inner = document.createElement('div')
+    outer.appendChild(inner)
+
+    // Calculating difference between container's full width and the child width
+    const scrollbarWidthValue = outer.offsetWidth - inner.offsetWidth
+
+    // Removing temporary elements from the DOM
+    if (outer.parentNode) outer.parentNode.removeChild(outer)
+
+    scrollbarWidth.value = scrollbarWidthValue
+  }
+
+  onMounted(() => runOnMount && getScrollbarWidth())
+
+  return { scrollbarWidth, getScrollbarWidth }
+}

src/vue-use-kit.ts

@@ -18,6 +18,7 @@ export * from './functions/useOrientation'
 export * from './functions/useSize'
 export * from './functions/useSearchParams'
 export * from './functions/useScroll'
+export * from './functions/useScrollbarWidth'
 export * from './functions/useWindowSize'
 // Animations
 export * from './functions/useIntervalFn'