From b6e08c20274566b1c8e6591cb111e86d139b4a7d Mon Sep 17 00:00:00 2001
From: smastrom <60471784+smastrom@users.noreply.github.com>
Date: Thu, 17 Aug 2023 02:42:03 +0200
Subject: [PATCH] release 1.0.0
---
README.md | 62 ++--
demo/Header.vue | 18 +-
demo/WithContainer.vue | 9 +-
package.json | 22 +-
pnpm-lock.yaml | 508 +++++++++++----------------
src/constants.ts | 3 +-
src/index.ts | 321 +----------------
src/types.ts | 24 +-
src/useFixedHeader.ts | 345 ++++++++++++++++++
tests/components/ContainerScroll.vue | 5 +-
tests/components/Watch.vue | 6 +-
tests/components/WindowScroll.vue | 5 +-
tests/resize.cy.ts | 86 ++---
vite.config.ts | 4 +-
14 files changed, 698 insertions(+), 720 deletions(-)
create mode 100644 src/useFixedHeader.ts
diff --git a/README.md b/README.md
index f955cbf..1b97d4e 100644
--- a/README.md
+++ b/README.md
@@ -2,7 +2,7 @@
# Vue Use Fixed Header
-Turn your boring fixed header into a smart one with one line of code.
+Turn your boring fixed header into a smart one with three lines of code.
@@ -12,13 +12,12 @@ Turn your boring fixed header into a smart one with one line of code.
## Features
-- **Dead simple** - Call a function and you're done whether you're SSR'ing or not
-- **Lightweight** - Just over 1kb without any dependency
-- **Enjoyable** - When scrolling down, the header is hidden, when scrolling up, the header is shown.
-- **Powerful** - Uses acceleration delta for both hiding and showing instead of fixed thresholds
-- **User-centric** - Behaves as your users expect on page load, scroll restoration, hovering, dropdown navigation, top reached and reduced motion.
+- **Dead simple** - Write three lines of code and you're done.
+- **Enjoyable defaults** - When scrolling down, the header is hidden, when scrolling up, the header is shown.
+- **Powerful** - Uses acceleration delta (scroll speed) for both hiding and showing instead of fixed thresholds.
+- **Intuitive** - Behaves as expected on page load, scroll restoration, hovering, dropdown navigation, top-reached and reduced motion.
- **Smart** - Functionalities are automatically enabled/disabled if your header turns from fixed/sticky to something else or it is hidden at different viewports
-- **Flexible** - Works with any scrolling container and with your own transition styles
+- **Flexible** - Works with any scrolling container and with your own styles
@@ -28,11 +27,21 @@ Turn your boring fixed header into a smart one with one line of code.
pnpm add vue-use-fixed-header
```
+Or:
+
+```bash
+yarn add vue-use-fixed-header
+```
+
+```bash
+npm i vue-use-fixed-header
+```
+
## Usage
-Pass your header's template ref to `useFixedHeader`. Then style it as you normally would. That's it.
+Pass your header's template ref to `useFixedHeader`. Then apply the returned reactive styles. That's it.
```vue
-
@@ -59,9 +68,7 @@ useFixedHeader(headerRef)
```
-As long as your header position is set to fixed/sticky, it will behave as described in the [features](#features) section.
-
-> :warning: There's only **one rule** to respect: Do not apply any _transition-related_ property since they're handled internally. See [below](#customization) how to customize them.
+All you have to do is to set `position: fixed` (or `sticky`) to your header. `useFixedHeader` will take care of the rest.
@@ -69,25 +76,25 @@ As long as your header position is set to fixed/sticky, it will behave as descri
On resize, `useFixedHeader` checks your header's `position` and `display` properties to determine whether its functionalities should be enabled or not.
-_Disabled_ means that the header will behave as you're not using the composable at all: no event listeners are attached and no additional styles are applied.
+_Disabled_ means that no event listeners are attached and the returned styles match an empty object `{}`.
### Different viewports
-If at different viewports your header position is not fixed/sticky (or it is hidden), functionalities are automatically toggled when needed.
-
-So feel free to have code like this:
+Hence feel free to have code like this:
```css
.Header {
position: fixed;
}
+/* Will be disabled */
@media (max-width: 768px) {
.Header {
position: relative;
}
}
+/* Same */
@media (max-width: 375px) {
.Header {
display: none;
@@ -132,28 +139,41 @@ useFixedHeader(headerRef, {
## Customization
```ts
-useFixedHeader(headerRef, {
+const { styles, isEnter, isLeave } = useFixedHeader(headerRef, {
/**
+ *
* Use `null` if content is scrolled by the window,
* otherwise pass a custom scrolling container template ref */
root: null,
/**
+ *
* ref or computed to watch for automatic behavior toggling */
watch: () => null,
/**
- * Minimum acceleration delta required to show the header */
+ *
+ * Minimum acceleration delta required to show the header.
+ * An higher value means that the user has to scroll faster. */
enterDelta: 0.5,
/**
+ *
* Minimum acceleration delta required to hide the header */
leaveDelta: 0.15,
/**
- * Custom enter transition styles */
+ *
+ * Whether to toggle `visibility: hidden` on leave.
+ * Set this to `false` if you want to keep the header
+ * visible. */
+ toggleVisibility: true,
+ /**
+ *
+ * Custom styles applied when scrolling up */
enterStyles: {
transition: `transform 0.3s ease-out`,
transform: 'translateY(0px)',
},
/**
- * Custom leave transition styles */
+ *
+ * Custom styles applied when scrolling down */
leaveStyles: {
transition: `transform 0.5s ease-out`,
transform: 'translateY(-100%)',
diff --git a/demo/Header.vue b/demo/Header.vue
index f875f31..36a4026 100644
--- a/demo/Header.vue
+++ b/demo/Header.vue
@@ -1,15 +1,26 @@
-