Skip to content

Commit 4983013

Browse files
seanogdevapertureless
authored andcommitted
docs: Update docs & exports (#2)
1 parent d88b8e9 commit 4983013

File tree

2 files changed

+57
-16
lines changed

2 files changed

+57
-16
lines changed

README.md

+50-15
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,10 @@ npm install --save vue-observable
1616

1717
### Componentlist
1818

19-
- [`<intersect>`]()
20-
- [`<mutate>`]()
21-
- [`<resize>`]()
19+
- [`<intersect>`](/src/IntersectionnObserver.js)
20+
- [`<mutation>`](/src/MutationObserver.js)
21+
- [`<resize>`](/src/ResizeObserver.js)
22+
2223
### Bundler (Webpack, Rollup)
2324

2425
```js
@@ -31,10 +32,10 @@ Vue.use(VueObservable)
3132
or
3233

3334
```js
34-
import {intersect, mutate} from 'vue-observable'
35+
import {Intersect, Mutation, Resize} from 'vue-observable'
3536

3637
export default {
37-
components: {intersect, mutate}
38+
components: {Intersect, Mutation, Resize}
3839
}
3940
```
4041

@@ -51,19 +52,19 @@ export default {
5152

5253
## 📒 Components
5354

54-
### IntersectionObserver
55+
### IntersectionObserver - [`<intersect>`](/src/IntersectionnObserver.js)
56+
5557
The `<intersect>` component will detect if a given element is in the viewport. And emit an event.
5658

5759
#### Props
5860

59-
| Prop | Required | Url | Default |
60-
| --- | --- | --- | --- |
61-
| root | no | [url](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/root) | null
62-
| rootMargin | no | [url](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/rootMargin) | `0px 0px 0px 0px`|
63-
| threshold | no | [url](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/thresholds) | `[0, 0.2]`|
61+
| Prop | Required | Default |
62+
| --- | --- | --- |
63+
| [root](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/root) | no | null
64+
| [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/rootMargin) | no | `0px 0px 0px 0px`|
65+
| [threshold](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/thresholds) | no | `[0, 0.2]`|
6466

6567
#### Events
66-
The `<intersect></intersect>` component emits following events:
6768

6869
- `enter`
6970
- `leave`
@@ -72,21 +73,55 @@ The `<intersect></intersect>` component emits following events:
7273
#### Usage
7374

7475
```html
75-
<intersect @enter="someMethod()" @leave="someMethod()" @change="someMethod()">
76+
<intersect @enter="enterMethod" @leave="leaveMethod" @change="changeMethod">
7677
<some-component-or-node>
7778
</intersect>
7879
```
79-
### MutationObserver
80+
81+
### MutationObserver - [`<Mutation>`](/src/MutationObserver.js)
8082

8183
#### Props
84+
85+
| Prop | Required | Default |
86+
| --- | --- | --- |
87+
| [attributeFilter](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserverInit/attributeFilter) | no | null
88+
| [attributeOldValue](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserverInit/attributeOldValue) | no | null
89+
| [attributes](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserverInit/attributes) | no | false
90+
| [characterData](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserverInit/characterData) | no |null
91+
| [characterDataOldValue](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserverInit/characterDataOldValue) | no |null
92+
| [childList](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserverInit/childList) | no |false
93+
| [subtree](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserverInit/subtree) | no |false
94+
8295
#### Events
96+
97+
- `mutation`
98+
8399
#### Usage
84100

85-
### ResizeObserver
101+
```html
102+
<mutation @mutation="mutationMethod">
103+
<some-component-or-node>
104+
</mutation>
105+
```
106+
107+
### ResizeObserver - [`<resize>`](/src/ResizeObserver.js)
86108

87109
#### Props
110+
111+
N/A
112+
88113
#### Events
114+
115+
- `resize`
116+
89117
#### Usage
118+
119+
```html
120+
<resize @resize="resizeMethod">
121+
<some-component-or-node>
122+
</resize>
123+
```
124+
90125
## Development
91126

92127
### Launch visual tests

src/index.js

+7-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,11 @@
11
import Intersect from './IntersectionObserver'
2+
import Mutation from './MutationObserver'
3+
import Resize from './ResizeObserver'
24

3-
function plugin (Vue) {
5+
function plugin(Vue) {
46
Vue.component('intersect', Intersect)
7+
Vue.component('mutate', Mutation)
8+
Vue.component('resize', Resize)
59
}
610

711
// Install by default if using the script tag
@@ -14,5 +18,7 @@ const version = '__VERSION__'
1418
// Export all components too
1519
export {
1620
Intersect,
21+
Mutation,
22+
Resize,
1723
version
1824
}

0 commit comments

Comments
 (0)