BREAKING - Remove scrollDelta logic, refactor useFixedHeader

Author: smastrom

src/constants.ts

@@ -1,26 +1,19 @@
 import type { Ref } from 'vue'
 import type { UseFixedHeaderOptions } from './types'
 
-export const CAPTURE_DELTA_FRAME_COUNT = 10
-
-export const DEFAULT_ENTER_DELTA = 0.5
-
-export const DEFAULT_LEAVE_DELTA = 0.15
-
-const easing = 'cubic-bezier(0.16, 1, 0.3, 1)'
-
-export const defaultOptions: Required<UseFixedHeaderOptions> = {
-   enterDelta: DEFAULT_ENTER_DELTA,
-   leaveDelta: DEFAULT_LEAVE_DELTA,
-   root: null,
-   toggleVisibility: true,
+export const TRANSITION_STYLES = {
    enterStyles: {
-      transition: `transform 0.3s ${easing} 0s`,
+      transition: `transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0s`,
       transform: 'translateY(0px)',
    },
    leaveStyles: {
-      transition: `transform 0.5s ${easing} 0s`,
+      transition: `transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0s`,
       transform: 'translateY(-101%)',
    },
+}
+
+export const defaultOptions: UseFixedHeaderOptions = {
+   root: null,
    watch: (() => null) as unknown as Ref<any>,
+   transitionOpacity: false,
 }

src/types.ts

@@ -1,37 +1,27 @@
-import type { Ref, ComputedRef, CSSProperties, ShallowRef } from 'vue'
+import type { Ref, ComputedRef } from 'vue'
 
 export type MaybeTemplateRef = HTMLElement | null | Ref<HTMLElement | null>
 
 export interface UseFixedHeaderOptions<T = any> {
    /**
-    * Use `null` if content is scrolled by the window (default),
-    * otherwise pass a custom scrolling container template ref */
-   root?: MaybeTemplateRef
-   /**
-    * Whether to toggle `visibility: hidden` on leave.
-    * Set this to `false` if you want to keep the header
-    * visible.
+    * Scrolling container, defaults to `document.documentElement`
+    * when `null`.
+    *
+    * @default null
     */
-   toggleVisibility?: boolean
-   /**
-    * ref or computed to watch for automatic behavior toggling */
-   watch?: Ref<T> | ComputedRef<T>
-   /**
-    * Minimum acceleration delta required to hide the header */
-   leaveDelta?: number
-   /**
-    * Minimum acceleration delta required to show the header */
-   enterDelta?: number
+   root: MaybeTemplateRef
    /**
-    * Custom enter transition styles */
-   enterStyles?: CSSProperties
+    * Signal without `.value` (ref or computed) to be watched
+    * for automatic behavior toggling.
+    *
+    * @default null
+    */
+   watch: Ref<T> | ComputedRef<T>
    /**
-    * Custom leave transition styles */
-   leaveStyles?: CSSProperties
-}
-
-export interface UseFixedHeaderReturn {
-   styles: ShallowRef<CSSProperties>
-   isLeave: ComputedRef<boolean>
-   isEnter: ComputedRef<boolean>
+    * Whether to transition `opacity` propert from 0 to 1
+    * and vice versa along with the `transform` property
+    *
+    * @default false
+    */
+   transitionOpacity: boolean
 }