Skip to content

Commit 8717da2

Browse files
committed
Merge branch 'master' into vue3
# Conflicts: # examples/vue-composable-example/package.json # package.json # packages/axios/README.md # packages/axios/package.json # packages/axios/src/index.ts # packages/core/README.md # packages/core/package.json # packages/core/src/promise/promise.ts # packages/core/src/utils.ts # packages/vue-composable/README.md # packages/vue-composable/package.json # packages/web/README.md # packages/web/package.json # packages/web/src/misc/localStorage.ts # yarn.lock
2 parents bde71cd + a969c25 commit 8717da2

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

73 files changed

+2984
-541
lines changed

.gitignore

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -137,4 +137,5 @@ $RECYCLE.BIN/
137137

138138
# Custom rules (everything added below won't be overriden by 'Generate .gitignore File' if you use 'Update' option)
139139
dist
140-
temp
140+
temp
141+
!docs/.vuepress/public/

CHANGELOG.md

Lines changed: 54 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,66 @@
33
The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
44
and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
55

6+
<!-- ## [Unreleased]
67
8+
--- -->
79

8-
## [Unreleased]
10+
## 1.0.0-dev.7
911

10-
---
12+
_2020-01-19_
13+
14+
---
15+
16+
### Changed
17+
18+
- Fix readme storage links
19+
20+
## 1.0.0-dev.6
21+
22+
_2020-01-19_
23+
24+
---
1125

1226
### Added
13-
- `usePromise` - added new argument `throwException`, default: `false`, if true it will return the exception when using `exec`
1427

28+
- [Online](<[composable/web](https://pikax.me/vue-composable/composable/web)/online>) - reactive `navigator.onLine` wrapper
29+
- [PageVisibility](https://pikax.me/vue-composable/composable/web/pageVisibility) - reactive `Page Visibility API`
30+
- [Language](https://pikax.me/vue-composable/composable/web/language) - reactive `NavigatorLanguage`
31+
- [WebStorage](composable/misc/webStorage) - Reactive access to `Storage API`, `useLocalStorage` and `useSessionStorage` use this
32+
- [storage](composable/misc/storage) - uses `localStorage` or on safari private it uses `sessionStorage`
33+
- [sessionStorage](composable/misc/sessionStorage) - Reactive access to a `sessionStorage`
34+
35+
### Changed
36+
37+
- [localStorage](composable/misc/localStorage) - refractor implementation to `useWebStorage` and added tab sync functionality
38+
39+
## 1.0.0-dev.4
40+
41+
_2020-01-13_
42+
43+
---
44+
45+
### Added
46+
47+
- [NetworkInformation](https://pikax.me/vue-composable/composable/web/networkInformation) - reactive `NetworkInformation` wrapper #70
48+
49+
## 1.0.0-dev.3
50+
51+
_2020-01-09_
52+
53+
---
54+
55+
### Changed
56+
57+
- changing `peerDependencies` to `dependencies`
58+
- fix `cjs` modules, missing `index.js` in some packages, preventing it from being used in codesandbox
59+
60+
### Added
61+
62+
- `usePromise` - added new argument `throwException`, default: `false`, if true it will return the exception when using `exec`
63+
- `useCancellablePromise` - added new argument `throwException`, default: `false`, if true it will return the exception when using `exec`
64+
- `useAxios` - added new argument `throwException`, default: `false`, if true it will return the exception when using `exec`
65+
- `useAxios` - `cancel(message?)` allows to cancel the latest axios request
1566

1667
## 1.0.0-dev.2
1768

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<template>
2+
<div>
3+
<h3>
4+
Language: <b>{{ language }}</b>
5+
</h3>
6+
<div>
7+
<h4>Preferred Languages</h4>
8+
<ul>
9+
<li v-for="l in languages" :key="l">
10+
{{ l }}
11+
</li>
12+
</ul>
13+
</div>
14+
</div>
15+
</template>
16+
17+
<script>
18+
import { useLanguage } from "vue-composable";
19+
export default {
20+
setup() {
21+
return useLanguage();
22+
}
23+
};
24+
</script>
Lines changed: 27 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,50 @@
11
<template>
22
<div>
3-
localStorage: {{storage}}
3+
localStorage: {{ storage }}
44
<p>
5-
<b>Check the value in the dev tools: `{{key}}`</b>
5+
supported:
6+
<b :class="{ green: supported, red: !supported }">{{ supported }}</b>
7+
</p>
8+
<p>
9+
<b>Check the value in the dev tools: `{{ key }}`</b>
610
</p>
711
<label for="storage">
812
<input name="storage" v-model="storage" />
913
</label>
14+
15+
<div>
16+
<p>Enable tab sync? <input type="checkbox" v-model="tabSync" /></p>
17+
<p v-if="tabSync">
18+
Now this tab is listening for changes, please change the storage value
19+
in other tab
20+
</p>
21+
</div>
22+
<div>
23+
<button @click="remove">Remove</button>
24+
</div>
1025
</div>
1126
</template>
1227

1328
<script>
1429
import { useLocalStorage } from "vue-composable";
30+
import { ref, watch } from "@vue/composition-api";
1531
export default {
1632
name: "local-storage-example",
1733
1834
setup() {
1935
const key = "__vue_localStorage_example";
20-
const { storage } = useLocalStorage(key, 1);
36+
const tabSync = ref(false);
37+
const { supported, storage, setSync, remove } = useLocalStorage(key, 1);
38+
39+
watch(tabSync, setSync);
2140
2241
return {
2342
key,
24-
storage
43+
supported,
44+
tabSync,
45+
storage,
46+
remove
2547
};
2648
}
2749
};
28-
</script>
50+
</script>
Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<template>
2+
<div>
3+
<h3>Network information</h3>
4+
5+
<p>
6+
supported: <b>{{ supported }}</b>
7+
</p>
8+
<p>
9+
downlink: <b>{{ downlink }}</b>
10+
</p>
11+
<p>
12+
downlinkMax: <b>{{ downlinkMax }}</b>
13+
</p>
14+
<p>
15+
effectiveType: <b>{{ effectiveType }}</b>
16+
</p>
17+
<p>
18+
round-trip time: <b>{{ rtt }}</b>
19+
</p>
20+
<p>
21+
saveData: <b>{{ saveData }}</b>
22+
</p>
23+
<p>
24+
type: <b>{{ type }}</b>
25+
</p>
26+
</div>
27+
</template>
28+
29+
<script>
30+
import { useNetworkInformation } from "vue-composable";
31+
32+
export default {
33+
name: "NetworkInformationExample",
34+
setup() {
35+
return useNetworkInformation();
36+
}
37+
};
38+
</script>
Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<template>
2+
<div>
3+
<h1>Is Online?</h1>
4+
5+
<h3>
6+
Online: <b :class="{ green: online, red: !online }">{{ online }}</b>
7+
</h3>
8+
<h4>
9+
Supported: <b>{{ supported }}</b>
10+
</h4>
11+
12+
<p>To test open dev tools and set your browser to offline (Network tab)</p>
13+
</div>
14+
</template>
15+
16+
<script>
17+
import { useOnline } from "vue-composable";
18+
export default {
19+
setup() {
20+
return useOnline();
21+
}
22+
};
23+
</script>
Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<template>
2+
<div>
3+
<h4>
4+
Hidden: <b>{{ hidden }}</b>
5+
</h4>
6+
<h4>
7+
State: <b>{{ visibility }}</b>
8+
</h4>
9+
<p>You can change the state by switching tab - Check console</p>
10+
<p>
11+
<a
12+
href="https://sqa.stackexchange.com/a/32355"
13+
target="_blank"
14+
rel="noopener noreferrer"
15+
>Check this link</a
16+
>
17+
</p>
18+
</div>
19+
</template>
20+
21+
<script>
22+
import { usePageVisibility, unwrap } from "vue-composable";
23+
import { watch, reactive } from "@vue/composition-api";
24+
export default {
25+
setup() {
26+
const { visibility, hidden } = usePageVisibility();
27+
watch(visibility, () => {
28+
console.log("visibility changed", {
29+
visibility: visibility.value,
30+
hidden: hidden.value
31+
});
32+
});
33+
return { visibility, hidden };
34+
}
35+
};
36+
</script>
Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<template>
2+
<div>
3+
sessionStorage: {{ storage }}
4+
<p>
5+
supported:
6+
<b :class="{ green: supported, red: !supported }">{{ supported }}</b>
7+
</p>
8+
<p>
9+
<b>Check the value in the dev tools: `{{ key }}`</b>
10+
</p>
11+
<label for="storage">
12+
<input name="storage" v-model="storage" />
13+
</label>
14+
15+
<div>
16+
<button @click="remove">Remove</button>
17+
</div>
18+
</div>
19+
</template>
20+
21+
<script>
22+
import { useSessionStorage } from "vue-composable";
23+
import { ref, watch } from "@vue/composition-api";
24+
export default {
25+
name: "session-storage-example",
26+
27+
setup() {
28+
const key = "__vue_sessionStorage_example";
29+
const tabSync = ref(false);
30+
const { supported, storage, remove } = useSessionStorage(key, 1);
31+
32+
return {
33+
key,
34+
supported,
35+
tabSync,
36+
storage,
37+
remove
38+
};
39+
}
40+
};
41+
</script>
Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<template>
2+
<div>
3+
storage: {{ storage }}
4+
<p>
5+
supported:
6+
<b :class="{ green: supported, red: !supported }">{{ supported }}</b>
7+
</p>
8+
<p>
9+
<b>Check the value in the dev tools: `{{ key }}`</b>
10+
</p>
11+
<label for="storage">
12+
<input name="storage" v-model="storage" />
13+
</label>
14+
15+
<div>
16+
<p>Sync supported: {{ supportedSync }}</p>
17+
<p>Enable tab sync? <input type="checkbox" v-model="tabSync" /></p>
18+
<p v-if="tabSync">
19+
Now this tab is listening for changes, please change the storage value
20+
in other tab
21+
</p>
22+
</div>
23+
<div>
24+
<button @click="remove">Remove</button>
25+
</div>
26+
</div>
27+
</template>
28+
29+
<script>
30+
import { useLocalStorage, useStorage } from "vue-composable";
31+
import { ref, watch } from "@vue/composition-api";
32+
export default {
33+
name: "storage-example",
34+
35+
setup() {
36+
const key = "__vue_storage_example";
37+
const tabSync = ref(false);
38+
const supportedSync = ref(true);
39+
40+
const { supported, storage, setSync, remove } = useStorage(key, 1);
41+
42+
watch(tabSync, s => {
43+
if (setSync(s) === false) {
44+
supportedSync.value = false;
45+
}
46+
});
47+
48+
return {
49+
key,
50+
supported,
51+
supportedSync,
52+
53+
tabSync,
54+
storage,
55+
remove
56+
};
57+
}
58+
};
59+
</script>

docs/.vuepress/config.js

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -171,11 +171,21 @@ module.exports = {
171171
sidebarDepth: 1,
172172
collapsable: false,
173173
children: [
174-
["composable/misc/localStorage", "localStorage"],
175174
["composable/misc/matchMedia", "matchMedia"],
176175
["composable/misc/breakpoint", "breakpoint"]
177176
]
178177
},
178+
{
179+
title: "Storage",
180+
sidebarDepth: 1,
181+
collapsable: false,
182+
children: [
183+
["composable/storage/webStorage", "WebStorage"],
184+
["composable/storage/storage", "Storage"],
185+
["composable/storage/localStorage", "localStorage"],
186+
["composable/storage/sessionStorage", "sessionStorage"]
187+
]
188+
},
179189
{
180190
title: "Pagination",
181191
collapsable: false,
@@ -201,7 +211,11 @@ module.exports = {
201211
children: [
202212
["composable/web/fetch", "fetch"],
203213
["composable/web/webSocket", "webSocket"],
204-
["composable/web/intersectionObserver", "IntersectionObserver"]
214+
["composable/web/intersectionObserver", "IntersectionObserver"],
215+
["composable/web/networkInformation", "NetworkInformation"],
216+
["composable/web/online", "Navigator.onLine"],
217+
["composable/web/pageVisibility", "PageVisibilityAPI"],
218+
["composable/web/language", "Language"]
205219
]
206220
},
207221
{

0 commit comments

Comments
 (0)