"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

---