refactor(ui): sort windicss classes
This commit is contained in:
liyasthomas
@@ -2,15 +2,15 @@
|
||||
<AppSection label="bodyParameters">
|
||||
<div
|
||||
class="
|
||||
sticky
|
||||
bg-primary
|
||||
border-b border-dividerLight
|
||||
flex flex-1
|
||||
pl-4
|
||||
top-110px
|
||||
z-10
|
||||
bg-primary
|
||||
flex flex-1
|
||||
sticky
|
||||
items-center
|
||||
justify-between
|
||||
pl-4
|
||||
border-b border-dividerLight
|
||||
"
|
||||
>
|
||||
<label for="reqParamList" class="font-semibold text-xs">
|
||||
@@ -27,22 +27,21 @@
|
||||
v-for="(param, index) in bodyParams"
|
||||
:key="`param-${index}`"
|
||||
class="
|
||||
divide-x divide-dashed divide-divider
|
||||
border-b border-dashed border-divider
|
||||
flex
|
||||
border-b border-dashed
|
||||
divide-x
|
||||
border-divider
|
||||
divide-dashed divide-divider
|
||||
"
|
||||
:class="{ 'border-t': index == 0 }"
|
||||
>
|
||||
<input
|
||||
class="
|
||||
px-4
|
||||
py-3
|
||||
text-xs
|
||||
flex flex-1
|
||||
font-semibold
|
||||
bg-primaryLight
|
||||
flex
|
||||
font-semibold
|
||||
flex-1
|
||||
text-xs
|
||||
py-3
|
||||
px-4
|
||||
focus:outline-none
|
||||
"
|
||||
:placeholder="$t('parameter_count', { count: index + 1 })"
|
||||
@@ -55,12 +54,13 @@
|
||||
<input
|
||||
v-if="!requestBodyParamIsFile(index)"
|
||||
class="
|
||||
px-4
|
||||
py-3
|
||||
text-xs
|
||||
flex flex-1
|
||||
font-semibold
|
||||
bg-primaryLight
|
||||
flex
|
||||
font-semibold
|
||||
flex-1
|
||||
text-xs
|
||||
py-3
|
||||
px-4
|
||||
focus:outline-none
|
||||
"
|
||||
:placeholder="$t('value_count', { count: index + 1 })"
|
||||
|
||||
@@ -5,8 +5,8 @@
|
||||
<ButtonSecondary icon="close" @click.native="hideModal" />
|
||||
</template>
|
||||
<template #body>
|
||||
<div class="px-2 flex flex-col">
|
||||
<label for="requestType" class="px-4 font-semibold pb-4 text-xs">
|
||||
<div class="flex flex-col px-2">
|
||||
<label for="requestType" class="font-semibold text-xs px-4 pb-4">
|
||||
{{ $t("choose_language") }}
|
||||
</label>
|
||||
<div class="flex flex-1">
|
||||
@@ -22,17 +22,17 @@
|
||||
<template #trigger>
|
||||
<span
|
||||
class="
|
||||
flex
|
||||
w-full
|
||||
px-4
|
||||
text-xs
|
||||
py-3
|
||||
rounded-lg
|
||||
font-semibold
|
||||
focus:outline-none
|
||||
border-b border-dividerLight
|
||||
bg-primaryLight
|
||||
border-b border-dividerLight
|
||||
rounded-lg
|
||||
cursor-pointer
|
||||
flex
|
||||
font-semibold
|
||||
text-xs
|
||||
w-full
|
||||
py-3
|
||||
px-4
|
||||
focus:outline-none
|
||||
"
|
||||
>
|
||||
{{ codegens.find((x) => x.id === requestType).name }}
|
||||
@@ -50,10 +50,10 @@
|
||||
</tippy>
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex justify-between flex-1">
|
||||
<div class="flex flex-1 justify-between">
|
||||
<label
|
||||
for="generatedCode"
|
||||
class="px-4 pt-4 font-semibold pb-4 text-xs"
|
||||
class="font-semibold text-xs px-4 pt-4 pb-4"
|
||||
>
|
||||
{{ $t("generated_code") }}
|
||||
</label>
|
||||
|
||||
@@ -2,15 +2,15 @@
|
||||
<AppSection label="headers">
|
||||
<div
|
||||
class="
|
||||
sticky
|
||||
bg-primary
|
||||
border-b border-dividerLight
|
||||
flex flex-1
|
||||
pl-4
|
||||
top-110px
|
||||
z-10
|
||||
bg-primary
|
||||
flex flex-1
|
||||
sticky
|
||||
items-center
|
||||
justify-between
|
||||
pl-4
|
||||
border-b border-dividerLight
|
||||
"
|
||||
>
|
||||
<label for="headerList" class="font-semibold text-xs">
|
||||
@@ -35,11 +35,9 @@
|
||||
v-for="(header, index) in headers$"
|
||||
:key="`header-${index}`"
|
||||
class="
|
||||
divide-x divide-dashed divide-divider
|
||||
border-b border-dashed border-divider
|
||||
flex
|
||||
border-b border-dashed
|
||||
divide-x
|
||||
border-divider
|
||||
divide-dashed divide-divider
|
||||
"
|
||||
:class="{ 'border-t': index == 0 }"
|
||||
>
|
||||
@@ -59,12 +57,13 @@
|
||||
/>
|
||||
<input
|
||||
class="
|
||||
px-4
|
||||
py-3
|
||||
text-xs
|
||||
flex flex-1
|
||||
font-semibold
|
||||
bg-primaryLight
|
||||
flex
|
||||
font-semibold
|
||||
flex-1
|
||||
text-xs
|
||||
py-3
|
||||
px-4
|
||||
focus:outline-none
|
||||
"
|
||||
:placeholder="$t('value_count', { count: index + 1 })"
|
||||
|
||||
@@ -2,15 +2,15 @@
|
||||
<AppSection label="parameters">
|
||||
<div
|
||||
class="
|
||||
sticky
|
||||
bg-primary
|
||||
border-b border-dividerLight
|
||||
flex flex-1
|
||||
pl-4
|
||||
top-110px
|
||||
z-10
|
||||
bg-primary
|
||||
flex flex-1
|
||||
sticky
|
||||
items-center
|
||||
justify-between
|
||||
pl-4
|
||||
border-b border-dividerLight
|
||||
"
|
||||
>
|
||||
<label for="paramList" class="font-semibold text-xs">
|
||||
@@ -35,22 +35,21 @@
|
||||
v-for="(param, index) in params$"
|
||||
:key="`param-${index}`"
|
||||
class="
|
||||
divide-x divide-dashed divide-divider
|
||||
border-b border-dashed border-divider
|
||||
flex
|
||||
border-b border-dashed
|
||||
divide-x
|
||||
border-divider
|
||||
divide-dashed divide-divider
|
||||
"
|
||||
:class="{ 'border-t': index == 0 }"
|
||||
>
|
||||
<input
|
||||
class="
|
||||
px-4
|
||||
py-3
|
||||
text-xs
|
||||
flex flex-1
|
||||
font-semibold
|
||||
bg-primaryLight
|
||||
flex
|
||||
font-semibold
|
||||
flex-1
|
||||
text-xs
|
||||
py-3
|
||||
px-4
|
||||
focus:outline-none
|
||||
"
|
||||
:placeholder="$t('parameter_count', { count: index + 1 })"
|
||||
@@ -67,12 +66,13 @@
|
||||
/>
|
||||
<input
|
||||
class="
|
||||
px-4
|
||||
py-3
|
||||
text-xs
|
||||
flex flex-1
|
||||
font-semibold
|
||||
bg-primaryLight
|
||||
flex
|
||||
font-semibold
|
||||
flex-1
|
||||
text-xs
|
||||
py-3
|
||||
px-4
|
||||
focus:outline-none
|
||||
"
|
||||
:placeholder="$t('value_count', { count: index + 1 })"
|
||||
|
||||
@@ -2,15 +2,15 @@
|
||||
<div>
|
||||
<div
|
||||
class="
|
||||
sticky
|
||||
bg-primary
|
||||
border-b border-dividerLight
|
||||
flex flex-1
|
||||
pl-4
|
||||
top-110px
|
||||
z-10
|
||||
bg-primary
|
||||
flex flex-1
|
||||
sticky
|
||||
items-center
|
||||
justify-between
|
||||
pl-4
|
||||
border-b border-dividerLight
|
||||
"
|
||||
>
|
||||
<label for="rawBody" class="font-semibold text-xs">
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="sticky top-0 z-10 bg-primary flex p-4">
|
||||
<div class="bg-primary flex p-4 top-0 z-10 sticky">
|
||||
<div class="relative inline-flex">
|
||||
<span class="select-wrapper">
|
||||
<tippy
|
||||
@@ -14,23 +14,23 @@
|
||||
<input
|
||||
id="method"
|
||||
class="
|
||||
flex
|
||||
rounded-l-lg
|
||||
bg-primaryLight
|
||||
font-mono
|
||||
w-32
|
||||
px-4
|
||||
py-2
|
||||
truncate
|
||||
text-secondaryDark
|
||||
font-semibold
|
||||
border border-divider
|
||||
transition
|
||||
focus:outline-none focus:border-accent
|
||||
rounded-l-lg
|
||||
cursor-pointer
|
||||
flex
|
||||
font-mono
|
||||
text-secondaryDark
|
||||
py-2
|
||||
px-4
|
||||
transition
|
||||
w-32
|
||||
truncate
|
||||
focus:outline-none focus:border-accent
|
||||
"
|
||||
:value="newMethod$"
|
||||
autofocus
|
||||
readonly
|
||||
/>
|
||||
</template>
|
||||
<SmartItem
|
||||
@@ -51,15 +51,15 @@
|
||||
id="url"
|
||||
v-model="newEndpoint$"
|
||||
class="
|
||||
w-full
|
||||
font-mono font-semibold
|
||||
truncate
|
||||
text-secondaryDark
|
||||
px-4
|
||||
py-2
|
||||
border border-divider
|
||||
bg-primaryLight
|
||||
border border-divider
|
||||
font-mono
|
||||
text-secondaryDark
|
||||
w-full
|
||||
py-2
|
||||
px-4
|
||||
transition
|
||||
truncate
|
||||
focus:outline-none focus:border-accent
|
||||
"
|
||||
name="url"
|
||||
@@ -71,173 +71,103 @@
|
||||
<!-- <SmartUrlField v-else v-model="uri" /> -->
|
||||
</div>
|
||||
<div class="flex">
|
||||
<span
|
||||
<ButtonPrimary
|
||||
id="send"
|
||||
class="
|
||||
px-4
|
||||
py-2
|
||||
border border-accent
|
||||
font-mono
|
||||
flex
|
||||
items-center
|
||||
truncate
|
||||
font-semibold
|
||||
bg-accent
|
||||
text-white
|
||||
cursor-pointer
|
||||
dark:text-accentDark
|
||||
"
|
||||
@click="newSendRequest"
|
||||
>
|
||||
{{ $t("send") }}
|
||||
</span>
|
||||
<!-- <span
|
||||
v-else
|
||||
id="cancel"
|
||||
class="
|
||||
px-4
|
||||
py-2
|
||||
border border-accent
|
||||
font-mono
|
||||
flex
|
||||
items-center
|
||||
truncate
|
||||
font-semibold
|
||||
bg-accent
|
||||
text-white
|
||||
cursor-pointer
|
||||
"
|
||||
@click="cancelRequest"
|
||||
>
|
||||
{{ $t("cancel") }}
|
||||
</span> -->
|
||||
<tippy
|
||||
ref="sendOptions"
|
||||
interactive
|
||||
tabindex="-1"
|
||||
trigger="click"
|
||||
theme="popover"
|
||||
arrow
|
||||
>
|
||||
<template #trigger>
|
||||
<span
|
||||
class="
|
||||
px-1
|
||||
py-2
|
||||
border border-accent
|
||||
font-mono
|
||||
flex
|
||||
items-center
|
||||
justify-center
|
||||
truncate
|
||||
font-semibold
|
||||
bg-accent
|
||||
text-white
|
||||
rounded-r-lg
|
||||
dark:text-accentDark
|
||||
class="rounded-none font-bold"
|
||||
:label="!loading ? $t('send') : $('cancel')"
|
||||
:shortcuts="[getSpecialKey(), 'G']"
|
||||
@click.native="!loading ? newSendRequest() : cancelRequest()"
|
||||
/>
|
||||
<span class="inline-flex">
|
||||
<tippy
|
||||
ref="sendOptions"
|
||||
interactive
|
||||
tabindex="-1"
|
||||
trigger="click"
|
||||
theme="popover"
|
||||
arrow
|
||||
>
|
||||
<template #trigger>
|
||||
<ButtonPrimary class="rounded-l-none" icon="keyboard_arrow_down" />
|
||||
</template>
|
||||
<SmartItem
|
||||
:label="$t('import_curl')"
|
||||
icon="import_export"
|
||||
@click.native="
|
||||
showCurlImportModal = !showCurlImportModal
|
||||
$refs.sendOptions.tippy().hide()
|
||||
"
|
||||
>
|
||||
<i class="material-icons">keyboard_arrow_down</i>
|
||||
</span>
|
||||
</template>
|
||||
<SmartItem
|
||||
:label="$t('import_curl')"
|
||||
icon="import_export"
|
||||
@click.native="
|
||||
showCurlImportModal = !showCurlImportModal
|
||||
$refs.sendOptions.tippy().hide()
|
||||
"
|
||||
/>
|
||||
<SmartItem
|
||||
:label="$t('show_code')"
|
||||
icon="code"
|
||||
@click.native="
|
||||
showCodegenModal = !showCodegenModal
|
||||
$refs.sendOptions.tippy().hide()
|
||||
"
|
||||
/>
|
||||
<SmartItem
|
||||
ref="clearAll"
|
||||
:label="$t('clear_all')"
|
||||
icon="clear_all"
|
||||
@click.native="
|
||||
clearContent('', $event)
|
||||
$refs.sendOptions.tippy().hide()
|
||||
"
|
||||
/>
|
||||
</tippy>
|
||||
<span
|
||||
class="
|
||||
ml-4
|
||||
px-4
|
||||
py-2
|
||||
border border-divider
|
||||
font-mono
|
||||
flex
|
||||
items-center
|
||||
justify-center
|
||||
truncate
|
||||
font-semibold
|
||||
rounded-l-lg
|
||||
cursor-pointer
|
||||
"
|
||||
@click="newSendRequest"
|
||||
>
|
||||
Save
|
||||
</span>
|
||||
<tippy
|
||||
ref="saveOptions"
|
||||
interactive
|
||||
tabindex="-1"
|
||||
trigger="click"
|
||||
theme="popover"
|
||||
arrow
|
||||
>
|
||||
<template #trigger>
|
||||
<span
|
||||
class="
|
||||
px-1
|
||||
py-2
|
||||
border border-divider
|
||||
font-mono
|
||||
flex
|
||||
items-center
|
||||
justify-center
|
||||
truncate
|
||||
font-semibold
|
||||
rounded-r-lg
|
||||
/>
|
||||
<SmartItem
|
||||
:label="$t('show_code')"
|
||||
icon="code"
|
||||
@click.native="
|
||||
showCodegenModal = !showCodegenModal
|
||||
$refs.sendOptions.tippy().hide()
|
||||
"
|
||||
>
|
||||
<i class="material-icons">keyboard_arrow_down</i>
|
||||
</span>
|
||||
</template>
|
||||
<SmartItem :description="$t('token_req_name')" />
|
||||
<input
|
||||
id="request-name"
|
||||
v-model="name"
|
||||
name="request-name"
|
||||
type="text"
|
||||
class="input text-sm"
|
||||
/>
|
||||
<SmartItem
|
||||
ref="copyRequest"
|
||||
:label="$t('copy_request_link')"
|
||||
:icon="navigatorShare ? 'share' : 'content_copy'"
|
||||
@click.native="
|
||||
copyRequest()
|
||||
$refs.saveOptions.tippy().hide()
|
||||
"
|
||||
/>
|
||||
<SmartItem
|
||||
ref="saveRequest"
|
||||
:label="$t('save_to_collections')"
|
||||
icon="create_new_folder"
|
||||
@click.native="
|
||||
saveRequest()
|
||||
$refs.saveOptions.tippy().hide()
|
||||
"
|
||||
/>
|
||||
</tippy>
|
||||
/>
|
||||
<SmartItem
|
||||
ref="clearAll"
|
||||
:label="$t('clear_all')"
|
||||
icon="clear_all"
|
||||
@click.native="
|
||||
clearContent('', $event)
|
||||
$refs.sendOptions.tippy().hide()
|
||||
"
|
||||
/>
|
||||
</tippy>
|
||||
</span>
|
||||
<ButtonSecondary
|
||||
class="rounded-r-none ml-2"
|
||||
:label="$t('save')"
|
||||
:shortcuts="[getSpecialKey(), 'S']"
|
||||
outline
|
||||
@click.native="newSendRequest"
|
||||
/>
|
||||
<span class="inline-flex">
|
||||
<tippy
|
||||
ref="saveOptions"
|
||||
interactive
|
||||
tabindex="-1"
|
||||
trigger="click"
|
||||
theme="popover"
|
||||
arrow
|
||||
>
|
||||
<template #trigger>
|
||||
<ButtonSecondary
|
||||
icon="keyboard_arrow_down"
|
||||
outline
|
||||
class="rounded-l-none"
|
||||
/>
|
||||
</template>
|
||||
<SmartItem :description="$t('token_req_name')" />
|
||||
<input
|
||||
id="request-name"
|
||||
v-model="name"
|
||||
name="request-name"
|
||||
type="text"
|
||||
class="text-sm input"
|
||||
/>
|
||||
<SmartItem
|
||||
ref="copyRequest"
|
||||
:label="$t('copy_request_link')"
|
||||
:icon="navigatorShare ? 'share' : 'content_copy'"
|
||||
@click.native="
|
||||
copyRequest()
|
||||
$refs.saveOptions.tippy().hide()
|
||||
"
|
||||
/>
|
||||
<SmartItem
|
||||
ref="saveRequest"
|
||||
:label="$t('save_to_collections')"
|
||||
icon="create_new_folder"
|
||||
@click.native="
|
||||
saveRequest()
|
||||
$refs.saveOptions.tippy().hide()
|
||||
"
|
||||
/>
|
||||
</tippy>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -254,6 +184,7 @@ import {
|
||||
import { createRESTNetworkRequestStream } from "~/helpers/network"
|
||||
import { currentEnvironment$ } from "~/newstore/environments"
|
||||
import { getEffectiveRESTRequestStream } from "~/helpers/utils/EffectiveURL"
|
||||
import { getPlatformSpecialKey } from "~/helpers/platformutils"
|
||||
|
||||
export default {
|
||||
data() {
|
||||
@@ -277,6 +208,7 @@ export default {
|
||||
showCodegenModal: false,
|
||||
navigatorShare: navigator.share,
|
||||
effectiveStream$: null,
|
||||
loading: false,
|
||||
}
|
||||
},
|
||||
subscriptions() {
|
||||
@@ -294,12 +226,13 @@ export default {
|
||||
setRESTEndpoint(newVal)
|
||||
},
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
getSpecialKey: getPlatformSpecialKey,
|
||||
updateMethod(method) {
|
||||
updateRESTMethod(method)
|
||||
},
|
||||
newSendRequest() {
|
||||
this.loading = true
|
||||
this.$subscribeTo(
|
||||
createRESTNetworkRequestStream(
|
||||
this.effectiveStream$,
|
||||
@@ -308,6 +241,7 @@ export default {
|
||||
(responseState) => {
|
||||
console.log(responseState)
|
||||
updateRESTResponse(responseState)
|
||||
this.loading = false
|
||||
}
|
||||
)
|
||||
},
|
||||
|
||||
@@ -1,17 +1,16 @@
|
||||
<template>
|
||||
<div class="flex sticky top-0 z-10 bg-primary items-center p-4">
|
||||
<div class="bg-primary flex p-4 top-0 z-10 sticky items-center">
|
||||
<div
|
||||
v-if="response == null"
|
||||
class="
|
||||
flex flex-1
|
||||
items-center
|
||||
flex flex-col flex-1
|
||||
text-secondaryLight
|
||||
flex-col
|
||||
p-4
|
||||
items-center
|
||||
justify-center
|
||||
"
|
||||
>
|
||||
<i class="material-icons opacity-50 pb-2">send</i>
|
||||
<i class="opacity-50 pb-2 material-icons">send</i>
|
||||
<span class="text-xs text-center">
|
||||
{{ $t("waiting_send_req") }}
|
||||
</span>
|
||||
|
||||
Reference in New Issue
Block a user