Skip to content

Commit 5bc0194

Browse files
committed
BREAKING - Remove scrollDelta logic, refactor useFixedHeader
1 parent 5d31f94 commit 5bc0194

File tree

4 files changed

+166
-221
lines changed

4 files changed

+166
-221
lines changed

src/constants.ts

Lines changed: 8 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,19 @@
11
import type { Ref } from 'vue'
22
import type { UseFixedHeaderOptions } from './types'
33

4-
export const CAPTURE_DELTA_FRAME_COUNT = 10
5-
6-
export const DEFAULT_ENTER_DELTA = 0.5
7-
8-
export const DEFAULT_LEAVE_DELTA = 0.15
9-
10-
const easing = 'cubic-bezier(0.16, 1, 0.3, 1)'
11-
12-
export const defaultOptions: Required<UseFixedHeaderOptions> = {
13-
enterDelta: DEFAULT_ENTER_DELTA,
14-
leaveDelta: DEFAULT_LEAVE_DELTA,
15-
root: null,
16-
toggleVisibility: true,
4+
export const TRANSITION_STYLES = {
175
enterStyles: {
18-
transition: `transform 0.3s ${easing} 0s`,
6+
transition: `transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0s`,
197
transform: 'translateY(0px)',
208
},
219
leaveStyles: {
22-
transition: `transform 0.5s ${easing} 0s`,
10+
transition: `transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0s`,
2311
transform: 'translateY(-101%)',
2412
},
13+
}
14+
15+
export const defaultOptions: UseFixedHeaderOptions = {
16+
root: null,
2517
watch: (() => null) as unknown as Ref<any>,
18+
transitionOpacity: false,
2619
}

src/types.ts

Lines changed: 18 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,27 @@
1-
import type { Ref, ComputedRef, CSSProperties, ShallowRef } from 'vue'
1+
import type { Ref, ComputedRef } from 'vue'
22

33
export type MaybeTemplateRef = HTMLElement | null | Ref<HTMLElement | null>
44

55
export interface UseFixedHeaderOptions<T = any> {
66
/**
7-
* Use `null` if content is scrolled by the window (default),
8-
* otherwise pass a custom scrolling container template ref */
9-
root?: MaybeTemplateRef
10-
/**
11-
* Whether to toggle `visibility: hidden` on leave.
12-
* Set this to `false` if you want to keep the header
13-
* visible.
7+
* Scrolling container, defaults to `document.documentElement`
8+
* when `null`.
9+
*
10+
* @default null
1411
*/
15-
toggleVisibility?: boolean
16-
/**
17-
* ref or computed to watch for automatic behavior toggling */
18-
watch?: Ref<T> | ComputedRef<T>
19-
/**
20-
* Minimum acceleration delta required to hide the header */
21-
leaveDelta?: number
22-
/**
23-
* Minimum acceleration delta required to show the header */
24-
enterDelta?: number
12+
root: MaybeTemplateRef
2513
/**
26-
* Custom enter transition styles */
27-
enterStyles?: CSSProperties
14+
* Signal without `.value` (ref or computed) to be watched
15+
* for automatic behavior toggling.
16+
*
17+
* @default null
18+
*/
19+
watch: Ref<T> | ComputedRef<T>
2820
/**
29-
* Custom leave transition styles */
30-
leaveStyles?: CSSProperties
31-
}
32-
33-
export interface UseFixedHeaderReturn {
34-
styles: ShallowRef<CSSProperties>
35-
isLeave: ComputedRef<boolean>
36-
isEnter: ComputedRef<boolean>
21+
* Whether to transition `opacity` propert from 0 to 1
22+
* and vice versa along with the `transform` property
23+
*
24+
* @default false
25+
*/
26+
transitionOpacity: boolean
3727
}

0 commit comments

Comments
 (0)