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

feat: introducing a new smart input hoppscotch ui component (#3089)

Browse Source 
Co-authored-by: Anwarul Islam <anwaarulislaam@gmail.com>
This commit is contained in:
Joel Jacob Stephen
2023-08-05 23:45:02 +05:30
committed by GitHub
parent 01cf59c663
commit 81fbb22c51
33 changed files with 543 additions and 639 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
packages/hoppscotch-common/src/pages/realtime/websocket.vue
View File

@@ -4,38 +4,35 @@
<div
class="sticky top-0 z-10 flex flex-shrink-0 p-4 space-x-2 overflow-x-auto bg-primary"
>
<div class="inline-flex flex-1 space-x-2">
<input
id="websocket-url"
v-model="url"
class="w-full px-4 py-2 border rounded bg-primaryLight border-divider text-secondaryDark"
type="url"
autocomplete="off"
spellcheck="false"
:class="{ error: !isUrlValid }"
:placeholder="`${t('websocket.url')}`"
:disabled="
connectionState === 'CONNECTED' ||
connectionState === 'CONNECTING'
"
@keyup.enter="isUrlValid ? toggleConnection() : null"
/>
<HoppButtonPrimary
id="connect"
:disabled="!isUrlValid"
class="w-32"
name="connect"
:label="
connectionState === 'CONNECTING'
? t('action.connecting')
: connectionState === 'DISCONNECTED'
? t('action.connect')
: t('action.disconnect')
"
:loading="connectionState === 'CONNECTING'"
@click="toggleConnection"
/>
</div>
<HoppSmartInput
v-model="url"
type="url"
styles="!inline-flex flex-1 space-x-2"
input-styles="w-full px-4 py-2 border rounded !bg-primaryLight border-divider text-secondaryDark"
:placeholder="`${t('websocket.url')}`"
:disabled="
connectionState === 'CONNECTED' || connectionState === 'CONNECTING'
"
@submit="isUrlValid ? toggleConnection() : null"
>
<template #button>
<HoppButtonPrimary
id="connect"
:disabled="!isUrlValid"
class="w-32"
name="connect"
:label="
connectionState === 'CONNECTING'
? t('action.connecting')
: connectionState === 'DISCONNECTED'
? t('action.connect')
: t('action.disconnect')
"
:loading="connectionState === 'CONNECTING'"
@click="toggleConnection"
/>
</template>
</HoppSmartInput>
</div>
<HoppSmartTabs
v-model="selectedTab"