-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
📖 Fill
guide docs, part of core. Fix typos, ♻️ README.md.
- Loading branch information
1 parent
a4d667d
commit ed06a20
Showing
13 changed files
with
283 additions
and
124 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,2 @@ | ||
| export const DEF_DUR = 1 | ||
| export const PROGRESS_THRESHOLD = 0.95 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,7 +1,80 @@ | ||
| --- | ||
| scroll: true | ||
| --- | ||
|
|
||
| # Scroll Component | ||
|
|
||
| | Property name | Type | Reactive | Reference | Description | | ||
| |---------------|------|----------|-----------|-------------| | ||
| | | | | | | | ||
| | | | | | | | ||
| | | | | | | | ||
| Component wrapper. Gathering all `data-*` attributes from | ||
| [Locomotive Scroll element](https://scroll.locomotive.ca/docs/#/attributes). | ||
|
|
||
| Must be rendered inside [ScrollView](scroll-view). | ||
|
|
||
| ## Component props | ||
|
|
||
| | Property name | Type | Reactive | Reference / Default value | Description | | ||
| |---------------|------------------|:--------:|--------------------------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------| | ||
| | is | string/Component | - | `div` | Specifies which component to render. Same as `is` prop on [component](https://vuejs.org/api/built-in-special-elements.html#component). | | ||
| | inViewClass | string | + | `is-inview` | Specifies which class to apply to an element when it is in view. | | ||
| | position | string | + | [data-scroll-position](https://scroll.locomotive.ca/docs/#/attributes?id=data-scroll-position) | ⬅️ | | ||
| | offset | string | - | [data-scroll-offset](https://scroll.locomotive.ca/docs/#/attributes?id=data-scroll-offset) | ⬅️ | | ||
| | repeat | boolean | - | [data-scroll-repeat](https://scroll.locomotive.ca/docs/#/attributes?id=data-scroll-repeat) | ⬅️ | | ||
| | speed | number | - | [data-scroll-speed](https://scroll.locomotive.ca/docs/#/attributes?id=data-scroll-speed) | ⬅️ | | ||
| | cssProgress | boolean | + | [data-scroll-css-progress](https://scroll.locomotive.ca/docs/#/attributes?id=data-scroll-css-progress) | ⬅️ | | ||
| | ignoreFold | boolean | + | [data-scroll-ignore-fold](https://scroll.locomotive.ca/docs/#/attributes?id=data-scroll-ignore-fold) | ⬅️ | | ||
| | touchSpeed | boolean | + | [data-enable-touch-speed](https://scroll.locomotive.ca/docs/#/attributes?id=data-enable-touch-speed) | ⬅️ | | ||
|
|
||
| ## Events | ||
|
|
||
| Emit `progress` and `intersect` events. | ||
| `progress` event handler will | ||
| take [IProgressEventPayload](https://github.com/somespecialone/vuecomotive-scroll/blob/master/lib/src/types.ts) | ||
| and `intersect` event handler will | ||
| take [IIntersectEventPayload](https://github.com/somespecialone/vuecomotive-scroll/blob/master/lib/src/types.ts) | ||
|
|
||
| ```vue {2,4-6,8-10,14,15} | ||
| <script setup lang="ts"> | ||
| import type { IProgressEventPayload, IIntersectEventPayload } from "vuecomotive-scroll"; | ||
| function handleProgress({ target, progress }: IProgressEventPayload) { | ||
| // some work... | ||
| } | ||
| function handleIntersect({ target, way, from }: IIntersectEventPayload) { | ||
| // and there | ||
| } | ||
| </script> | ||
| <template> | ||
| <ScrollComponent @progress="handleProgress" /> | ||
| <ScrollComponent @intersect="handleIntersect" /> | ||
| </template> | ||
| ``` | ||
|
|
||
| ## Expose | ||
|
|
||
| * `inView` - ref with boolean | ||
| * `el` - ref to HTMLElement | ||
| * `scrollElement` - [ScrollElement](https://github.com/locomotivemtl/locomotive-scroll/blob/v5-beta/src/core/ScrollElement.ts) | ||
|
|
||
| Pass only `inView` to slot via `v-slot`. | ||
|
|
||
| ```vue {6-8,13} | ||
| <script setup lang="ts"> | ||
| import { onMounted } from "vue" | ||
| const comp = ref() | ||
| onMounted(() => { | ||
| comp.inView | ||
| comp.el | ||
| comp.scrollElement | ||
| }) | ||
| </script> | ||
| <template> | ||
| <ScrollComponent ref="comp" v-slot="{ inView }"> | ||
| <!-- slot components --> | ||
| </ScrollComponent> | ||
| </template> | ||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,75 @@ | ||
| --- | ||
| scroll: true | ||
| --- | ||
|
|
||
| # Scroll View | ||
|
|
||
| Main component. | ||
|
|
||
| :::warning Layout change | ||
| Due to [Locomotive Scroll](https://scroll.locomotive.ca/docs) implementation it is not possible to change layout | ||
| so don't use dynamic rendering or change width/height properties of elements inside `ScrollView`. | ||
| ::: | ||
|
|
||
| ## Props | ||
|
|
||
| | Property name | Type | Reactive | Default value | Description | | ||
| |---------------|------------------|:--------:|---------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------| | ||
| | root | boolean | - | *false* | Specifies when the component will wrap and listen to the scroll event on the entire document or create wrapper & content elements. | | ||
| | cssProgress | boolean | + | *false* | Specifies whether or not to display the progress value on the root element in the `--wrapper-progress` CSS custom property (variable). Possible values are 0 to 1. | | ||
| | cssDirection | boolean | + | *false* | Same as `cssProgress` ⬆️, but in `--scroll-direction` property. Possible values are -1 (up), 1 (down). | | ||
| | wrapperIs | string/Component | - | `div` | Specifies which component to render. Same as `is` prop on [component](https://vuejs.org/api/built-in-special-elements.html#component). | | ||
| | contentIs | string/Component | - | `div` | ⬆️ | | ||
|
|
||
| Other props are [options from Lenis](https://scroll.locomotive.ca/docs/#/options?id=lenisoptions) and non-reactive. | ||
|
|
||
| ## Events | ||
|
|
||
| Emit `lenis-scroll` event. Single argument passed to handler | ||
| is [Lenis](https://github.com/studio-freight/lenis/blob/main/dist/types/index.d.ts). | ||
|
|
||
| ```vue {2,4-6,10} | ||
| <script setup lang="ts"> | ||
| import type Lenis from '@studio-freight/lenis'; | ||
| function onLenisScroll(lenis: Lenis) { | ||
| // do what you want | ||
| } | ||
| </script> | ||
| <template> | ||
| <ScrollView @lenis-scroll="onLenisScroll"> | ||
| <!-- content --> | ||
| </ScrollView> | ||
| </template> | ||
| ``` | ||
|
|
||
| ## Refs to elements | ||
|
|
||
| If you need ref to wrapper or/and content elements you can find it on `Lenis` instance after scroll is ready. | ||
|
|
||
| ```vue {10-14} | ||
| <script setup lang="ts"> | ||
| import { watch } from "vue"; | ||
| import { useScroll } from "vuecomotive-scroll"; | ||
| const { scroll, isReady } = useScroll(); | ||
| watch(isReady, (r) => { | ||
| if (r) { | ||
| scroll.lenis.rootElement | ||
| // or | ||
| scroll.lenis.options.wrapper | ||
| scroll.lenis.options.content | ||
| } | ||
| }) | ||
| </script> | ||
| ``` | ||
|
|
||
| :::tip onMounted | ||
| Or if you need it eagerly you can get it from `scroll.lenisOptionsGetter` when `ScrollView` is mounted. | ||
| ::: |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| --- | ||
| scroll: true | ||
| --- | ||
|
|
||
| # Scroll instance | ||
|
|
||
| Class that extends [LocomotiveScroll](https://github.com/locomotivemtl/locomotive-scroll/blob/v5-beta/src/index.ts). | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| --- | ||
| scroll: true | ||
| --- | ||
|
|
||
| # Composable | ||
|
|
||
| For use inside `setup` of components only. | ||
|
|
||
| ```vue | ||
| <script setup lang="ts"> | ||
| import { useScroll } from "vuecomotive-scroll" | ||
| const { scrollTo, scroll, direction, isScrolling, isReady } = useScroll() | ||
| </script> | ||
| ``` |
Oops, something went wrong.