btwedutech/hoppscotch
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 6 Wiki Activity

feat: introduce vueuse composition utilities

Browse Source
This commit is contained in:
liyasthomas
2022-01-31 10:00:58 +05:30
parent 0b8fb2da2f
commit 92f2b8eea0
6 changed files with 70 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
README.md
View File

@@ -48,28 +48,6 @@
[![Chat on Discord](https://img.shields.io/badge/chat-Discord-7289DA?logo=discord)](https://hoppscotch.io/discord) [![Chat on Telegram](https://img.shields.io/badge/chat-Telegram-2CA5E0?logo=telegram)](https://hoppscotch.io/telegram) [![Discuss on GitHub](https://img.shields.io/badge/discussions-GitHub-333333?logo=github)](https://github.com/hoppscotch/hoppscotch/discussions)
<details open>
<summary><b>Table of contents</b></summary>
---
- [Features](#features)
- [Demo](#demo)
- [Usage](#usage)
- [Built with](#built-with)
- [Developing](#developing)
- [Docker](#docker)
- [Releasing](#releasing)
- [Contributing](#contributing)
- [Continuous Integration](#continuous-integration)
- [Changelog](#changelog)
- [Authors](#authors)
- [License](#license)
---
</details>
### **Features**
❤️ **Lightweight:** Crafted with minimalistic UI design.

18
packages/hoppscotch-app/components/app/Header.vue
View File

@@ -75,7 +75,9 @@
:alt="currentUser.displayName"
:title="currentUser.displayName"
indicator
:indicator-styles="isOnLine ? 'bg-green-500' : 'bg-red-500'"
:indicator-styles="
network.isOnline ? 'bg-green-500' : 'bg-red-500'
"
/>
<ButtonSecondary
v-else
@@ -130,7 +132,7 @@
</div>
</div>
</header>
<AppAnnouncement v-if="!isOnLine" />
<AppAnnouncement v-if="!network.isOnline" />
<FirebaseLogin :show="showLogin" @hide-modal="showLogin = false" />
<AppSupport :show="showSupport" @hide-modal="showSupport = false" />
<TeamsModal :show="showTeamsModal" @hide-modal="showTeamsModal = false" />
@@ -138,7 +140,8 @@
</template>
<script setup lang="ts">
import { onMounted, ref } from "@nuxtjs/composition-api"
import { onMounted, reactive, ref } from "@nuxtjs/composition-api"
import { useNetwork } from "@vueuse/core"
import intializePwa from "~/helpers/pwa"
import { probableUser$ } from "~/helpers/fb/auth"
import { getLocalConfig, setLocalConfig } from "~/newstore/localpersistence"
@@ -164,7 +167,7 @@ const showSupport = ref(false)
const showLogin = ref(false)
const showTeamsModal = ref(false)
const isOnLine = ref(navigator.onLine)
const network = reactive(useNetwork())
const currentUser = useReadonlyStream(probableUser$, null)
@@ -173,13 +176,6 @@ defineActionHandler("modals.support.toggle", () => {
})
onMounted(() => {
window.addEventListener("online", () => {
isOnLine.value = true
})
window.addEventListener("offline", () => {
isOnLine.value = false
})
// Initializes the PWA code - checks if the app is installed,
// etc.
showInstallPrompt.value = intializePwa()

1
packages/hoppscotch-app/components/app/PowerSearchEntry.vue
View File

@@ -55,7 +55,6 @@ defineProps<{
@apply bg-transparent;
@apply z-2;
@apply w-0.5;
@apply transition;
content: "";
}

4
packages/hoppscotch-app/components/history/index.vue
View File

@@ -102,7 +102,7 @@
<script setup lang="ts">
import { computed, ref } from "@nuxtjs/composition-api"
import * as timeago from "timeago.js"
import { useTimeAgo } from "@vueuse/core"
import { safelyExtractRESTRequest } from "@hoppscotch/data"
import {
useI18n,
@@ -135,7 +135,7 @@ const t = useI18n()
const groupByDate = (array: any[], key: string) => {
return array.reduce((rv: any, x: any) => {
;(rv[timeago.format(x[key])] = rv[timeago.format(x[key])] || []).push(x)
;(rv[useTimeAgo(x[key]).value] = rv[useTimeAgo(x[key]).value] || []).push(x)
return rv
}, {})
}

2
packages/hoppscotch-app/package.json
View File

@@ -103,7 +103,6 @@
"splitpanes": "^2.3.8",
"subscriptions-transport-ws": "^0.11.0",
"tern": "^0.24.3",
"timeago.js": "^4.0.2",
"uuid": "8.3.2",
"vue-apollo": "^3.1.0",
"vue-functional-data-merge": "^3.1.0",
@@ -152,6 +151,7 @@
"@vue/composition-api": "^1.4.5",
"@vue/runtime-dom": "^3.2.29",
"@vue/test-utils": "^1.3.0",
"@vueuse/core": "^7.5.5",
"babel-core": "^7.0.0-bridge.0",
"babel-jest": "^27.4.6",
"babel-loader": "^8.2.3",

78
pnpm-lock.yaml generated
View File

@@ -116,6 +116,7 @@ importers:
'@vue/composition-api': ^1.4.5
'@vue/runtime-dom': ^3.2.29
'@vue/test-utils': ^1.3.0
'@vueuse/core': ^7.5.5
acorn: ^8.7.0
acorn-walk: ^8.2.0
axios: ^0.25.0
@@ -169,7 +170,6 @@ importers:
stylelint-config-standard-scss: ^3.0.0
subscriptions-transport-ws: ^0.11.0
tern: ^0.24.3
timeago.js: ^4.0.2
ts-jest: ^27.1.3
typescript: ^4.5.5
uuid: 8.3.2
@@ -255,7 +255,6 @@ importers:
splitpanes: 2.3.8
subscriptions-transport-ws: 0.11.0_graphql@15.7.2
tern: 0.24.3
timeago.js: 4.0.2
uuid: 8.3.2
vue-apollo: 3.1.0_graphql-tag@2.12.6
vue-functional-data-merge: 3.1.0
@@ -303,6 +302,7 @@ importers:
'@vue/composition-api': 1.4.5
'@vue/runtime-dom': 3.2.29
'@vue/test-utils': 1.3.0
'@vueuse/core': 7.5.5_@vue+composition-api@1.4.5
babel-core: 7.0.0-bridge.0_@babel+core@7.16.12
babel-jest: 27.4.6_@babel+core@7.16.12
babel-loader: 8.2.3_@babel+core@7.16.12
@@ -3581,7 +3581,7 @@ packages:
engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
dependencies:
callsites: 3.1.0
graceful-fs: 4.2.8
graceful-fs: 4.2.9
source-map: 0.6.1
dev: true
@@ -3600,7 +3600,7 @@ packages:
engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
dependencies:
'@jest/test-result': 27.4.6
graceful-fs: 4.2.8
graceful-fs: 4.2.9
jest-haste-map: 27.4.6
jest-runtime: 27.4.6
transitivePeerDependencies:
@@ -5677,6 +5677,37 @@ packages:
pretty: 2.0.0
dev: true
/@vueuse/core/7.5.5_@vue+composition-api@1.4.5:
resolution: {integrity: sha512-RBDqmIoGfak4h3xdXa/Av+ibkb8NY044wEy6+PG2FAWNaID8/FkqmSFjbxogrbmpSX1yZ1PBHrM8DUp/FrIpbg==}
peerDependencies:
'@vue/composition-api': ^1.1.0
vue: ^2.6.0 || ^3.2.0
peerDependenciesMeta:
'@vue/composition-api':
optional: true
vue:
optional: true
dependencies:
'@vue/composition-api': 1.4.5
'@vueuse/shared': 7.5.5_@vue+composition-api@1.4.5
vue-demi: 0.12.1_@vue+composition-api@1.4.5
dev: true
/@vueuse/shared/7.5.5_@vue+composition-api@1.4.5:
resolution: {integrity: sha512-mzzTsotHQRPnPAChy8iCv6ek/90CKYhAFyMRgNsMxpT0afZJkbMO/X0OaOu/1NuGbgb8UVjlsWKmCUgKTOF5hA==}
peerDependencies:
'@vue/composition-api': ^1.1.0
vue: ^2.6.0 || ^3.2.0
peerDependenciesMeta:
'@vue/composition-api':
optional: true
vue:
optional: true
dependencies:
'@vue/composition-api': 1.4.5
vue-demi: 0.12.1_@vue+composition-api@1.4.5
dev: true
/@webassemblyjs/ast/1.9.0:
resolution: {integrity: sha512-C6wW5L+b7ogSDVqymbkkvuW9kruN//YisMED04xzeBBqjHa2FYnmvOlS6Xj68xWQRgWvI9cIglsjFowH/RJyEA==}
dependencies:
@@ -6961,7 +6992,7 @@ packages:
chownr: 1.1.4
figgy-pudding: 3.5.2
glob: 7.2.0
graceful-fs: 4.2.8
graceful-fs: 4.2.9
infer-owner: 1.0.4
lru-cache: 5.1.1
mississippi: 3.0.0
@@ -10086,7 +10117,7 @@ packages:
/fs-write-stream-atomic/1.0.10:
resolution: {integrity: sha1-tH31NJPvkR33VzHnCp3tAYnbQMk=}
dependencies:
graceful-fs: 4.2.8
graceful-fs: 4.2.9
iferr: 0.1.5
imurmurhash: 0.1.4
readable-stream: 2.3.7
@@ -10589,7 +10620,7 @@ packages:
dependencies:
chalk: 2.4.2
find-cache-dir: 2.1.0
graceful-fs: 4.2.8
graceful-fs: 4.2.9
lodash: 4.17.21
mkdirp: 0.5.5
node-object-hash: 1.4.2
@@ -12142,7 +12173,7 @@ packages:
engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
dependencies:
'@types/node': 17.0.13
graceful-fs: 4.2.8
graceful-fs: 4.2.9
dev: true
/jest-snapshot/27.4.6:
@@ -12444,7 +12475,7 @@ packages:
/jsonfile/4.0.0:
resolution: {integrity: sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=}
optionalDependencies:
graceful-fs: 4.2.8
graceful-fs: 4.2.9
dev: false
/jsonfile/6.1.0:
@@ -15348,7 +15379,7 @@ packages:
/proper-lockfile/4.1.2:
resolution: {integrity: sha512-TjNPblN4BwAWMXU8s9AEz4JmQxnD1NNL7bNOY/AKUzyamc379FWASUhc/K1pL2noVb+XmZKLL68cjzLsiOAMaA==}
dependencies:
graceful-fs: 4.2.8
graceful-fs: 4.2.9
retry: 0.12.0
signal-exit: 3.0.5
dev: false
@@ -15608,7 +15639,7 @@ packages:
resolution: {integrity: sha512-1JU/8q+VgFZyxwrJ+SVIOsh+KywWGpds3NTqikiKpDMZWScmAYyKIgqkO+ARvNWJfXeXR1zxz7aHF4u4CyH6vQ==}
engines: {node: '>=0.10'}
dependencies:
graceful-fs: 4.2.8
graceful-fs: 4.2.9
micromatch: 3.1.10
readable-stream: 2.3.7
dev: false
@@ -17452,10 +17483,6 @@ packages:
webpack: 4.46.0
dev: false
/timeago.js/4.0.2:
resolution: {integrity: sha512-a7wPxPdVlQL7lqvitHGGRsofhdwtkoSXPGATFuSOA2i1ZNQEPLrGnj68vOp2sOJTCFAQVXPeNMX/GctBaO9L2w==}
dev: false
/timers-browserify/2.0.12:
resolution: {integrity: sha512-9phl76Cqm6FhSX9Xe1ZUAMLtm1BLkKj2Qd5ApyWkXzsMRaA7dgr81kf4wJmQf/hAvg8EEyJxDo3du/0KlhPiKQ==}
engines: {node: '>=0.6.0'}
@@ -18274,6 +18301,21 @@ packages:
resolution: {integrity: sha512-vKl1skEKn8EK9f8P2ZzhRnuaRHLHrlt1sbRmazlvsx6EiC3A8oWF8YCBrMJzoN+W3OnElwIGbVjsx6/xelY1AA==}
dev: false
/vue-demi/0.12.1_@vue+composition-api@1.4.5:
resolution: {integrity: sha512-QL3ny+wX8c6Xm1/EZylbgzdoDolye+VpCXRhI2hug9dJTP3OUJ3lmiKN3CsVV3mOJKwFi0nsstbgob0vG7aoIw==}
engines: {node: '>=12'}
hasBin: true
requiresBuild: true
peerDependencies:
'@vue/composition-api': ^1.0.0-rc.1
vue: ^3.0.0-0 || ^2.6.0
peerDependenciesMeta:
'@vue/composition-api':
optional: true
dependencies:
'@vue/composition-api': 1.4.5
dev: true
/vue-eslint-parser/8.0.1_eslint@8.8.0:
resolution: {integrity: sha512-lhWjDXJhe3UZw2uu3ztX51SJAPGPey1Tff2RK3TyZURwbuI4vximQLzz4nQfCv8CZq4xx7uIiogHMMoSJPr33A==}
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -18515,7 +18557,7 @@ packages:
/watchpack/1.7.5:
resolution: {integrity: sha512-9P3MWk6SrKjHsGkLT2KHXdQ/9SNkyoJbabxnKOoJepsvJjJG8uYTR3yTPxPQvNDI3w4Nz1xnE0TLHK4RIVe/MQ==}
dependencies:
graceful-fs: 4.2.8
graceful-fs: 4.2.9
neo-async: 2.6.2
optionalDependencies:
chokidar: 3.5.3
@@ -18843,7 +18885,7 @@ packages:
/write-file-atomic/2.4.3:
resolution: {integrity: sha512-GaETH5wwsX+GcnzhPgKcKjJ6M2Cq3/iZp1WyY/X1CSqrW+jVNM9Y7D8EC2sM4ZG/V8wZlSniJnCKWPmBYAucRQ==}
dependencies:
graceful-fs: 4.2.8
graceful-fs: 4.2.9
imurmurhash: 0.1.4
signal-exit: 3.0.6
dev: false
@@ -18872,7 +18914,7 @@ packages:
engines: {node: '>=4'}
dependencies:
detect-indent: 5.0.0
graceful-fs: 4.2.8
graceful-fs: 4.2.9
make-dir: 1.3.0
pify: 3.0.0
sort-keys: 2.0.0