refactor: minor input stylings
This commit is contained in:
liyasthomas
@@ -1,10 +1,12 @@
|
||||
<template>
|
||||
<div>
|
||||
<ul>
|
||||
<li>
|
||||
<div class="flex flex-1">
|
||||
<label for="reqParamList">{{ $t("request_body") }}</label>
|
||||
<div>
|
||||
<AppSection label="bodyParameters">
|
||||
<div
|
||||
v-if="bodyParams.length !== 0"
|
||||
class="flex flex-1 items-center justify-between pl-4"
|
||||
>
|
||||
<label for="reqParamList" class="font-semibold text-xs">
|
||||
{{ $t("request_body") }}
|
||||
</label>
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('clear')"
|
||||
@@ -12,38 +14,48 @@
|
||||
@click.native="clearContent('bodyParams', $event)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<ul
|
||||
<div
|
||||
v-for="(param, index) in bodyParams"
|
||||
:key="index"
|
||||
class="
|
||||
flex
|
||||
border-b border-dashed
|
||||
divide-y
|
||||
md:divide-x
|
||||
divide-x
|
||||
border-divider
|
||||
divide-dashed divide-divider
|
||||
md:divide-y-0
|
||||
"
|
||||
:class="{ 'border-t': index == 0 }"
|
||||
>
|
||||
<li>
|
||||
<input
|
||||
class="input"
|
||||
:placeholder="`key ${index + 1}`"
|
||||
:name="`bparam ${index}`"
|
||||
class="
|
||||
px-4
|
||||
py-3
|
||||
text-xs
|
||||
flex flex-1
|
||||
font-semibold
|
||||
bg-primaryLight
|
||||
focus:outline-none
|
||||
"
|
||||
:placeholder="$t('parameter_count', { count: index + 1 })"
|
||||
:name="'param' + index"
|
||||
:value="param.key"
|
||||
autofocus
|
||||
@change="updateBodyParams($event, index, `setKeyBodyParams`)"
|
||||
@keyup.prevent="setRouteQueryState"
|
||||
/>
|
||||
</li>
|
||||
<li>
|
||||
<input
|
||||
v-if="!requestBodyParamIsFile(index)"
|
||||
class="input"
|
||||
:placeholder="`value ${index + 1}`"
|
||||
class="
|
||||
px-4
|
||||
py-3
|
||||
text-xs
|
||||
flex flex-1
|
||||
font-semibold
|
||||
bg-primaryLight
|
||||
focus:outline-none
|
||||
"
|
||||
:placeholder="$t('value_count', { count: index + 1 })"
|
||||
:name="'value' + index"
|
||||
:value="param.value"
|
||||
@change="
|
||||
// if input is form data, set value to be an array containing the value
|
||||
@@ -63,9 +75,7 @@
|
||||
</SmartDeletableChip>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<div>
|
||||
<li>
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="
|
||||
@@ -84,10 +94,8 @@
|
||||
"
|
||||
@click.native="toggleActive(index, param)"
|
||||
/>
|
||||
</li>
|
||||
</div>
|
||||
<div v-if="contentType === 'multipart/form-data'">
|
||||
<li>
|
||||
<label for="attachment" class="p-0">
|
||||
<ButtonSecondary
|
||||
class="w-full"
|
||||
@@ -103,30 +111,17 @@
|
||||
multiple
|
||||
@change="setRequestAttachment($event, index)"
|
||||
/>
|
||||
</li>
|
||||
</div>
|
||||
<div>
|
||||
<li>
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('delete')"
|
||||
icon="delete"
|
||||
@click.native="removeRequestBodyParam(index)"
|
||||
/>
|
||||
</li>
|
||||
</div>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>
|
||||
<ButtonSecondary
|
||||
name="addrequest"
|
||||
icon="add"
|
||||
:label="$t('add_new')"
|
||||
@click.native="addRequestBodyParam"
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</AppSection>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -139,6 +134,23 @@ export default {
|
||||
return this.$store.state.request.contentType
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
bodyParams: {
|
||||
handler(newValue) {
|
||||
if (
|
||||
newValue[newValue.length - 1]?.key !== "" ||
|
||||
newValue[newValue.length - 1]?.value !== ""
|
||||
)
|
||||
this.addRequestBodyParam()
|
||||
},
|
||||
deep: true,
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
if (!this.bodyParams?.length) {
|
||||
this.addRequestBodyParam()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
clearContent(bodyParams, $event) {
|
||||
this.$emit("clear-content", bodyParams, $event)
|
||||
|
||||
@@ -1,10 +1,12 @@
|
||||
<template>
|
||||
<AppSection label="headers">
|
||||
<ul v-if="headers.length !== 0">
|
||||
<li>
|
||||
<div class="flex flex-1">
|
||||
<label for="headerList">{{ $t("header_list") }}</label>
|
||||
<div>
|
||||
<div
|
||||
v-if="headers.length !== 0"
|
||||
class="flex flex-1 items-center justify-between pl-4"
|
||||
>
|
||||
<label for="headerList" class="font-semibold text-xs">
|
||||
{{ $t("header_list") }}
|
||||
</label>
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('clear')"
|
||||
@@ -12,23 +14,18 @@
|
||||
@click.native="clearContent('headers', $event)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<ul
|
||||
<div
|
||||
v-for="(header, index) in headers"
|
||||
:key="`${header.value}_${index}`"
|
||||
class="
|
||||
flex
|
||||
border-b border-dashed
|
||||
divide-y
|
||||
md:divide-x
|
||||
divide-x
|
||||
border-divider
|
||||
divide-dashed divide-divider
|
||||
md:divide-y-0
|
||||
"
|
||||
:class="{ 'border-t': index == 0 }"
|
||||
>
|
||||
<li>
|
||||
<SmartAutoComplete
|
||||
:placeholder="$t('header_count', { count: index + 1 })"
|
||||
:source="commonHeaders"
|
||||
@@ -43,10 +40,16 @@
|
||||
"
|
||||
@keyup.prevent="setRouteQueryState"
|
||||
/>
|
||||
</li>
|
||||
<li>
|
||||
<input
|
||||
class="input"
|
||||
class="
|
||||
px-4
|
||||
py-3
|
||||
text-xs
|
||||
flex flex-1
|
||||
font-semibold
|
||||
bg-primaryLight
|
||||
focus:outline-none
|
||||
"
|
||||
:placeholder="$t('value_count', { count: index + 1 })"
|
||||
:name="'value' + index"
|
||||
:value="header.value"
|
||||
@@ -58,9 +61,7 @@
|
||||
"
|
||||
@keyup.prevent="setRouteQueryState"
|
||||
/>
|
||||
</li>
|
||||
<div>
|
||||
<li>
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="
|
||||
@@ -71,8 +72,8 @@
|
||||
: $t('turn_off')
|
||||
"
|
||||
:icon="
|
||||
param.hasOwnProperty('active')
|
||||
? param.active
|
||||
header.hasOwnProperty('active')
|
||||
? header.active
|
||||
? 'check_box'
|
||||
: 'check_box_outline_blank'
|
||||
: 'check_box'
|
||||
@@ -84,28 +85,16 @@
|
||||
})
|
||||
"
|
||||
/>
|
||||
</li>
|
||||
</div>
|
||||
<div>
|
||||
<li>
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('delete')"
|
||||
icon="delete"
|
||||
@click.native="removeRequestHeader(index)"
|
||||
/>
|
||||
</li>
|
||||
</div>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>
|
||||
<ButtonSecondary
|
||||
icon="add"
|
||||
:label="$t('add_new')"
|
||||
@click.native="addRequestHeader"
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</AppSection>
|
||||
</template>
|
||||
|
||||
@@ -121,6 +110,23 @@ export default {
|
||||
commonHeaders,
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
headers: {
|
||||
handler(newValue) {
|
||||
if (
|
||||
newValue[newValue.length - 1]?.key !== "" ||
|
||||
newValue[newValue.length - 1]?.value !== ""
|
||||
)
|
||||
this.addRequestHeader()
|
||||
},
|
||||
deep: true,
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
if (!this.params?.length) {
|
||||
this.addRequestHeader()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
clearContent(headers, $event) {
|
||||
this.$emit("clear-content", headers, $event)
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
</label>
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('clear')"
|
||||
:title="$t('clear_all')"
|
||||
icon="clear_all"
|
||||
@click.native="clearContent('parameters', $event)"
|
||||
/>
|
||||
@@ -20,11 +20,9 @@
|
||||
class="
|
||||
flex
|
||||
border-b border-dashed
|
||||
divide-y
|
||||
md:divide-x
|
||||
divide-x
|
||||
border-divider
|
||||
divide-dashed divide-divider
|
||||
md:divide-y-0
|
||||
"
|
||||
:class="{ 'border-t': index == 0 }"
|
||||
>
|
||||
@@ -80,7 +78,6 @@
|
||||
py-3
|
||||
mr-8
|
||||
focus:outline-none
|
||||
border-b border-dividerLight
|
||||
font-medium
|
||||
bg-primaryLight
|
||||
"
|
||||
@@ -135,14 +132,6 @@
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex sticky bottom-0 bg-primary z-10 flex-1">
|
||||
<ButtonSecondary
|
||||
icon="add"
|
||||
class="flex-1"
|
||||
:label="$t('add_new')"
|
||||
@click.native="addRequestParam"
|
||||
/>
|
||||
</div>
|
||||
</AppSection>
|
||||
</template>
|
||||
|
||||
@@ -151,6 +140,23 @@ export default {
|
||||
props: {
|
||||
params: { type: Array, default: () => [] },
|
||||
},
|
||||
watch: {
|
||||
params: {
|
||||
handler(newValue) {
|
||||
if (
|
||||
newValue[newValue.length - 1]?.key !== "" ||
|
||||
newValue[newValue.length - 1]?.value !== ""
|
||||
)
|
||||
this.addRequestParam()
|
||||
},
|
||||
deep: true,
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
if (!this.params?.length) {
|
||||
this.addRequestParam()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
clearContent(parameters, $event) {
|
||||
this.$emit("clear-content", parameters, $event)
|
||||
|
||||
@@ -1,28 +1,28 @@
|
||||
<template>
|
||||
<div class="flex flex-col">
|
||||
<div class="flex items-center justify-between">
|
||||
<label>{{ $t("response") }}</label>
|
||||
<label v-if="active"
|
||||
><i class="animate-spin material-icons">refresh</i></label
|
||||
<div
|
||||
class="
|
||||
flex
|
||||
sticky
|
||||
top-0
|
||||
z-10
|
||||
bg-primary
|
||||
items-center
|
||||
p-4
|
||||
font-mono font-semibold
|
||||
space-x-4
|
||||
"
|
||||
:class="statusCategory ? statusCategory.className : ''"
|
||||
>
|
||||
<label v-else :class="statusCategory ? statusCategory.className : ''">
|
||||
<i class="material-icons">fiber_manual_record</i>
|
||||
</label>
|
||||
</div>
|
||||
<div class="flex flex-col lg:flex-row">
|
||||
<label class="flex-1">
|
||||
{{ $t("status") + `: \xA0 ` }}
|
||||
<span :class="statusCategory ? statusCategory.className : ''">
|
||||
{{ response.status || $t("waiting_send_req") }}
|
||||
<i v-if="active" class="animate-spin material-icons">refresh</i>
|
||||
<span v-else>
|
||||
{{ response.status }}
|
||||
</span>
|
||||
<span v-if="response.duration" class="text-xs">
|
||||
{{ `${response.duration} ms` }}
|
||||
</span>
|
||||
<span v-if="response.size" class="text-xs">
|
||||
{{ `${response.size} B` }}
|
||||
</span>
|
||||
</label>
|
||||
<label>
|
||||
{{ $t("duration") + `: \xA0 ${response.duration} ms` }}
|
||||
</label>
|
||||
<label>
|
||||
{{ $t("size") + `: \xA0 ${response.size} B` }}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<SmartTabs styles="m-4">
|
||||
<SmartTabs styles="sticky z-10 top-13">
|
||||
<SmartTab
|
||||
v-for="(lens, index) in validLenses"
|
||||
:id="lens.lensName"
|
||||
|
||||
@@ -3,7 +3,15 @@
|
||||
<input
|
||||
ref="acInput"
|
||||
v-model="text"
|
||||
class="input"
|
||||
class="
|
||||
px-4
|
||||
py-3
|
||||
text-xs
|
||||
flex flex-1
|
||||
font-semibold
|
||||
bg-primaryLight
|
||||
focus:outline-none
|
||||
"
|
||||
type="text"
|
||||
:placeholder="placeholder"
|
||||
:spellcheck="spellcheck"
|
||||
@@ -187,6 +195,8 @@ export default {
|
||||
<style scoped lang="scss">
|
||||
.autocomplete-wrapper {
|
||||
@apply relative;
|
||||
@apply flex;
|
||||
@apply flex-1;
|
||||
|
||||
input:focus + ul.suggestions,
|
||||
ul.suggestions:hover {
|
||||
@@ -209,7 +219,7 @@ export default {
|
||||
@apply w-full;
|
||||
@apply block;
|
||||
@apply py-2 px-4;
|
||||
@apply text-sm;
|
||||
@apply text-xs;
|
||||
@apply font-mono;
|
||||
|
||||
&:last-child {
|
||||
|
||||
@@ -2,10 +2,10 @@
|
||||
<!-- eslint-disable -->
|
||||
<div>
|
||||
<Splitpanes vertical :dbl-click-splitter="false">
|
||||
<Pane class="overflow-auto">
|
||||
<Pane class="overflow-auto hide-scrollbar">
|
||||
<Splitpanes horizontal :dbl-click-splitter="false">
|
||||
<Pane class="overflow-auto">
|
||||
<div class="sticky top-0 z-10 bg-primary flex px-4 pt-4 pb-2">
|
||||
<Pane class="overflow-auto hide-scrollbar">
|
||||
<div class="sticky top-0 z-10 bg-primary flex p-4">
|
||||
<div class="relative inline-flex">
|
||||
<span class="select-wrapper">
|
||||
<tippy
|
||||
@@ -28,6 +28,7 @@
|
||||
px-4
|
||||
py-2
|
||||
truncate
|
||||
text-secondaryDark
|
||||
font-semibold
|
||||
border border-divider
|
||||
transition
|
||||
@@ -59,6 +60,7 @@
|
||||
w-full
|
||||
font-mono font-semibold
|
||||
truncate
|
||||
text-secondaryDark
|
||||
px-4
|
||||
py-2
|
||||
border border-divider
|
||||
@@ -90,7 +92,6 @@
|
||||
font-mono
|
||||
flex
|
||||
items-center
|
||||
justify-center
|
||||
truncate
|
||||
font-semibold
|
||||
bg-accent
|
||||
@@ -110,7 +111,6 @@
|
||||
font-mono
|
||||
flex
|
||||
items-center
|
||||
justify-center
|
||||
truncate
|
||||
font-semibold
|
||||
bg-accent
|
||||
@@ -248,7 +248,7 @@
|
||||
</tippy>
|
||||
</div>
|
||||
</div>
|
||||
<SmartTabs styles="sticky top-62px z-10">
|
||||
<SmartTabs styles="sticky top-70px z-10">
|
||||
<SmartTab
|
||||
:id="'params'"
|
||||
:label="
|
||||
@@ -325,7 +325,13 @@
|
||||
<li>
|
||||
<div class="flex flex-1">
|
||||
<span>
|
||||
<SmartToggle :on="rawInput" />
|
||||
<SmartToggle
|
||||
v-if="canListParameters"
|
||||
:on="rawInput"
|
||||
@change="rawInput = !rawInput"
|
||||
>
|
||||
{{ $t("raw_input") }}
|
||||
</SmartToggle>
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
@@ -700,7 +706,7 @@
|
||||
</SmartTab>
|
||||
</SmartTabs>
|
||||
</Pane>
|
||||
<Pane class="overflow-auto">
|
||||
<Pane class="overflow-auto hide-scrollbar">
|
||||
<HttpResponse
|
||||
:response="response"
|
||||
:active="runningRequest"
|
||||
@@ -966,22 +972,7 @@ export default {
|
||||
this.setRouteQueryState()
|
||||
},
|
||||
params: {
|
||||
handler(newValue) {
|
||||
if (!this.paramsWatchEnabled) {
|
||||
this.paramsWatchEnabled = true
|
||||
return
|
||||
}
|
||||
let path = this.path
|
||||
let queryString = getQueryParams(newValue)
|
||||
.map(({ key, value }) => `${key.trim()}=${value.trim()}`)
|
||||
.join("&")
|
||||
queryString = queryString === "" ? "" : `?${encodeURI(queryString)}`
|
||||
if (path.includes("?")) {
|
||||
path = path.slice(0, path.indexOf("?")) + queryString
|
||||
} else {
|
||||
path = path + queryString
|
||||
}
|
||||
this.path = path
|
||||
handler() {
|
||||
this.setRouteQueryState()
|
||||
},
|
||||
deep: true,
|
||||
@@ -2026,7 +2017,7 @@ export default {
|
||||
this.headers = []
|
||||
this.testReports = []
|
||||
}
|
||||
target.innerHTML = this.doneButton
|
||||
// target.innerHTML = this.doneButton
|
||||
this.$toast.info(this.$t("cleared"), {
|
||||
icon: "clear_all",
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user