feat(sticky-scroll): add offset prop

Author: m0ksem

packages/ui/src/components/va-sticky-scrollbar/StickyScrollbar.stories.ts renamed to packages/ui/src/components/va-sticky-scrollbar/VaStickyScrollbar.stories.ts

@@ -1,6 +1,6 @@
 import { defineComponent } from 'vue'
 import { defineStory } from '../../../.storybook/types'
-import VaStickyScrollbar from './StickyScrollbar.vue'
+import VaStickyScrollbar from './VaStickyScrollbar.vue'
 
 export default {
   title: 'VaStickyScrollbar',

packages/ui/src/components/va-sticky-scrollbar/StickyScrollbar.vue renamed to packages/ui/src/components/va-sticky-scrollbar/VaStickyScrollbar.vue

@@ -1,16 +1,20 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
 import { getScrollbarSize } from '../../utils/scrollbar-size'
-import { useEvent, useElementRect, useResizeObserver } from '../../composables'
+import { useEvent, useElementRect, useResizeObserver, useNumericProp } from '../../composables'
 
 const props = withDefaults(defineProps<{
     el?: HTMLElement | null
-    direction?: 'vertical' | 'horizontal'
+    direction?: 'vertical' | 'horizontal',
+    offset?: number | string,
   }>(), {
   direction: 'horizontal',
+  offset: 0,
 })
 const currentEl = ref(null as HTMLElement | null)
 
+const offsetProp = useNumericProp('offset')
+
 const parentElement = computed(() => {
   if (props.el) { return props.el }
 
@@ -49,7 +53,7 @@ const stickyScrollWrapperStyle = computed(() => {
 
   return {
     position: 'fixed' as const,
-    top: `${Math.min(bottom, window.innerHeight) - scrollSize}px`,
+    top: `${Math.min(bottom, window.innerHeight) - scrollSize - Number(offsetProp.value)}px`,
     width: `${parentEl.clientWidth}px`,
     overflowX: 'auto' as const,
     overflowY: 'hidden' as const,

packages/ui/src/components/va-sticky-scrollbar/index.ts

@@ -1 +1 @@
-export { default as VaStickyScrollbar } from './StickyScrollbar.vue'
+export { default as VaStickyScrollbar } from './VaStickyScrollbar.vue'