feat(sticky-scroll): add offset prop

m0ksem · Aug 25, 2024 · ab414f9 · ab414f9
1 parent b7983ed
commit ab414f9
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 5 deletions.
diff --git a/...icky-scrollbar/StickyScrollbar.stories.ts → ...ky-scrollbar/VaStickyScrollbar.stories.ts b/...icky-scrollbar/StickyScrollbar.stories.ts → ...ky-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',

diff --git a/...s/va-sticky-scrollbar/StickyScrollbar.vue → ...va-sticky-scrollbar/VaStickyScrollbar.vue b/...s/va-sticky-scrollbar/StickyScrollbar.vue → ...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,

diff --git a/packages/ui/src/components/va-sticky-scrollbar/index.ts b/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'
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		export { default as VaStickyScrollbar } from './StickyScrollbar.vue'
		export { default as VaStickyScrollbar } from './VaStickyScrollbar.vue'