"Fossies" - the Fresh Open Source Software Archive  

Source code changes of the file "packages/hoppscotch-app/components/http/ResponseMeta.vue" between
hoppscotch-2.2.1.tar.gz and hoppscotch-3.0.0.tar.gz

About: Hoppscotch is a light-weight, web based API development suite.

ResponseMeta.vue  (hoppscotch-2.2.1):ResponseMeta.vue  (hoppscotch-3.0.0)
<template> <template>
<div <div
class="sticky top-0 z-10 flex items-center p-4 overflow-auto bg-primary hide -scrollbar whitespace-nowrap" class="sticky top-0 z-10 flex items-start p-4 overflow-auto bg-primary white space-nowrap"
> >
<div <div
v-if="response == null" v-if="response == null"
class="flex flex-col items-center justify-center flex-1 text-secondaryLigh t" class="flex flex-col items-center justify-center flex-1 text-secondaryLigh t"
> >
<div class="flex pb-4 my-4 space-x-2"> <div class="flex pb-4 my-4 space-x-2">
<div class="flex flex-col items-end space-y-4 text-right"> <div class="flex flex-col items-end text-right space-y-4">
<span class="flex items-center flex-1"> <span class="flex items-center flex-1">
{{ t("shortcut.request.send_request") }} {{ t("shortcut.request.send_request") }}
</span> </span>
<span class="flex items-center flex-1"> <span class="flex items-center flex-1">
{{ t("shortcut.general.show_all") }} {{ t("shortcut.general.show_all") }}
</span> </span>
<span class="flex items-center flex-1"> <span class="flex items-center flex-1">
{{ t("shortcut.general.command_menu") }} {{ t("shortcut.general.command_menu") }}
</span> </span>
<span class="flex items-center flex-1"> <span class="flex items-center flex-1">
{{ t("shortcut.general.help_menu") }} {{ t("shortcut.general.help_menu") }}
</span> </span>
</div> </div>
<div class="flex flex-col space-y-4"> <div class="flex flex-col space-y-4">
<div class="flex"> <div class="flex">
<span class="shortcut-key">{{ getSpecialKey() }}</span> <kbd class="shortcut-key">{{ getSpecialKey() }}</kbd>
<span class="shortcut-key">G</span> <kbd class="shortcut-key">G</kbd>
</div> </div>
<div class="flex"> <div class="flex">
<span class="shortcut-key">{{ getSpecialKey() }}</span> <kbd class="shortcut-key">{{ getSpecialKey() }}</kbd>
<span class="shortcut-key">K</span> <kbd class="shortcut-key">K</kbd>
</div> </div>
<div class="flex"> <div class="flex">
<span class="shortcut-key">/</span> <kbd class="shortcut-key">/</kbd>
</div> </div>
<div class="flex"> <div class="flex">
<span class="shortcut-key">?</span> <kbd class="shortcut-key">?</kbd>
</div> </div>
</div> </div>
</div> </div>
<ButtonSecondary <ButtonSecondary
:label="t('app.documentation')" :label="t('app.documentation')"
to="https://docs.hoppscotch.io/features/response" to="https://docs.hoppscotch.io/features/response"
svg="external-link" :icon="IconExternalLink"
blank blank
outline outline
reverse reverse
/> />
</div> </div>
<div v-else class="flex flex-col flex-1"> <div v-else class="flex flex-col flex-1">
<div <div
v-if="response.type === 'loading'" v-if="response.type === 'loading'"
class="flex flex-col items-center justify-center" class="flex flex-col items-center justify-center"
> >
<SmartSpinner class="my-4" /> <SmartSpinner class="my-4" />
<span class="text-secondaryLight">{{ t("state.loading") }}</span> <span class="text-secondaryLight">{{ t("state.loading") }}</span>
</div> </div>
<div <div
v-if="response.type === 'network_fail'" v-if="response.type === 'network_fail'"
class="flex flex-col items-center justify-center flex-1 p-4" class="flex flex-col items-center justify-center flex-1 p-4"
> >
<img <img
:src="`/images/states/${$colorMode.value}/youre_lost.svg`" :src="`/images/states/${colorMode.value}/youre_lost.svg`"
loading="lazy" loading="lazy"
class="inline-flex flex-col object-contain object-center w-32 h-32 my- 4" class="inline-flex flex-col object-contain object-center w-32 h-32 my- 4"
:alt="`${t('error.network_fail')}`" :alt="`${t('error.network_fail')}`"
/> />
<span class="mb-2 font-semibold text-center"> <span class="mb-2 font-semibold text-center">
{{ t("error.network_fail") }} {{ t("error.network_fail") }}
</span> </span>
<span <span
class="max-w-sm mb-6 text-center whitespace-normal text-secondaryLight " class="max-w-sm mb-6 text-center whitespace-normal text-secondaryLight "
> >
{{ t("helpers.network_fail") }} {{ t("helpers.network_fail") }}
</span> </span>
<AppInterceptor class="border rounded border-dividerLight" /> <AppInterceptor class="p-2 border rounded border-dividerLight" />
</div> </div>
<div <div
v-if="response.type === 'script_fail'" v-if="response.type === 'script_fail'"
class="flex flex-col items-center justify-center flex-1 p-4" class="flex flex-col items-center justify-center flex-1 p-4"
> >
<img <img
:src="`/images/states/${$colorMode.value}/youre_lost.svg`" :src="`/images/states/${colorMode.value}/youre_lost.svg`"
loading="lazy" loading="lazy"
class="inline-flex flex-col object-contain object-center w-32 h-32 my- 4" class="inline-flex flex-col object-contain object-center w-32 h-32 my- 4"
:alt="`${t('error.script_fail')}`" :alt="`${t('error.script_fail')}`"
/> />
<span class="mb-2 font-semibold text-center"> <span class="mb-2 font-semibold text-center">
{{ t("error.script_fail") }} {{ t("error.script_fail") }}
</span> </span>
<span <span
class="max-w-sm mb-6 text-center whitespace-normal text-secondaryLight " class="max-w-sm mb-6 text-center whitespace-normal text-secondaryLight "
> >
skipping to change at line 120 skipping to change at line 120
> >
<span v-if="response.statusCode"> <span v-if="response.statusCode">
<span class="text-secondary"> {{ t("response.status") }}: </span> <span class="text-secondary"> {{ t("response.status") }}: </span>
{{ `${response.statusCode}\xA0 • \xA0` {{ `${response.statusCode}\xA0 • \xA0`
}}{{ getStatusCodeReasonPhrase(response.statusCode) }} }}{{ getStatusCodeReasonPhrase(response.statusCode) }}
</span> </span>
<span v-if="response.meta && response.meta.responseDuration"> <span v-if="response.meta && response.meta.responseDuration">
<span class="text-secondary"> {{ t("response.time") }}: </span> <span class="text-secondary"> {{ t("response.time") }}: </span>
{{ `${response.meta.responseDuration} ms` }} {{ `${response.meta.responseDuration} ms` }}
</span> </span>
<span v-if="response.meta && response.meta.responseSize"> <span
v-if="response.meta && response.meta.responseSize"
v-tippy="
readableResponseSize
? { theme: 'tooltip' }
: { onShow: () => false }
"
:title="`${response.meta.responseSize} B`"
>
<span class="text-secondary"> {{ t("response.size") }}: </span> <span class="text-secondary"> {{ t("response.size") }}: </span>
{{ `${response.meta.responseSize} B` }} {{
readableResponseSize
? readableResponseSize
: `${response.meta.responseSize} B`
}}
</span> </span>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { computed } from "@nuxtjs/composition-api" import IconExternalLink from "~icons/lucide/external-link"
import findStatusGroup from "~/helpers/findStatusGroup" import { computed } from "vue"
import { HoppRESTResponse } from "~/helpers/types/HoppRESTResponse" import findStatusGroup from "@helpers/findStatusGroup"
import type { HoppRESTResponse } from "~/helpers/types/HoppRESTResponse"
import { getPlatformSpecialKey as getSpecialKey } from "~/helpers/platformutils" import { getPlatformSpecialKey as getSpecialKey } from "~/helpers/platformutils"
import { useI18n } from "~/helpers/utils/composables" import { useI18n } from "@composables/i18n"
import { useColorMode } from "@composables/theming"
import { getStatusCodeReasonPhrase } from "~/helpers/utils/statusCodes" import { getStatusCodeReasonPhrase } from "~/helpers/utils/statusCodes"
const t = useI18n() const t = useI18n()
const colorMode = useColorMode()
const props = defineProps<{ const props = defineProps<{
response: HoppRESTResponse response: HoppRESTResponse
}>() }>()
/**
* Gives the response size in a human readable format
* (changes unit from B to MB/KB depending on the size)
* If no changes (error res state) or value can be made (size < 1KB ?),
* it returns undefined
*/
const readableResponseSize = computed(() => {
if (
props.response.type === "loading" ||
props.response.type === "network_fail" ||
props.response.type === "script_fail" ||
props.response.type === "fail"
)
return undefined
const size = props.response.meta.responseSize
if (size >= 100000) return (size / 1000000).toFixed(2) + " MB"
if (size >= 1000) return (size / 1000).toFixed(2) + " KB"
return undefined
})
const statusCategory = computed(() => { const statusCategory = computed(() => {
if ( if (
props.response.type === "loading" || props.response.type === "loading" ||
props.response.type === "network_fail" || props.response.type === "network_fail" ||
props.response.type === "script_fail" || props.response.type === "script_fail" ||
props.response.type === "fail" props.response.type === "fail"
) )
return { return {
name: "error", name: "error",
className: "text-red-500", className: "text-red-500",
 End of changes. 16 change blocks. 
18 lines changed or deleted 56 lines changed or added

Home  |  About  |  Features  |  All  |  Newest  |  Dox  |  Diffs  |  RSS Feeds  |  Screenshots  |  Comments  |  Imprint  |  Privacy  |  HTTP(S)