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

rename all components to new namespace (#1515)

Browse Source 
Co-authored-by: Andrew Bastin <andrewbastin.k@gmail.com>
This commit is contained in:
Liyas Thomas
2021-03-01 09:28:14 +05:30
committed by GitHub
parent 37bdd525ea
commit dc5ca76d05
86 changed files with 2761 additions and 3077 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
pages/doc.vue
View File

@@ -2,7 +2,7 @@
<div class="page">
<div class="content">
<div class="page-columns inner-left">
<pw-section class="blue" :label="$t('import')" ref="import" no-legend>
<AppSection class="blue" :label="$t('import')" ref="import" no-legend>
<div class="flex flex-col">
<label>{{ $t("collection") }}</label>
<p class="info">
@@ -27,7 +27,7 @@
</button>
</div>
</div>
<ace-editor
<SmartAceEditor
v-model="collectionJSON"
:lang="'json'"
:lint="false"
@@ -45,9 +45,9 @@
<span>{{ $t("generate_docs") }}</span>
</button>
</div>
</pw-section>
</AppSection>
<pw-section class="green" :label="$t('documentation')" ref="documentation" no-legend>
<AppSection class="green" :label="$t('documentation')" ref="documentation" no-legend>
<div class="flex flex-col">
<label>{{ $t("documentation") }}</label>
<p v-if="this.items.length === 0" class="info">
@@ -277,11 +277,11 @@
</span>
</div>
</div>
</pw-section>
</AppSection>
</div>
<aside class="sticky-inner inner-right lg:max-w-md">
<collections @use-collection="useSelectedCollection($event)" :doc="true" />
<Collections @use-collection="useSelectedCollection($event)" :doc="true" />
</aside>
</div>
</div>

70
pages/graphql.vue
View File

@@ -2,7 +2,7 @@
<div class="page">
<div class="content">
<div class="page-columns inner-left">
<pw-section class="blue" :label="$t('endpoint')" ref="endpoint" no-legend>
<AppSection class="blue" :label="$t('endpoint')" ref="endpoint" no-legend>
<ul>
<li>
<label for="url">{{ $t("url") }}</label>
@@ -35,9 +35,9 @@
</li>
</div>
</ul>
</pw-section>
</AppSection>
<pw-section class="orange" :label="$t('headers')" ref="headers" no-legend>
<AppSection class="orange" :label="$t('headers')" ref="headers" no-legend>
<div class="flex flex-col">
<label>{{ $t("headers") }}</label>
<ul v-if="headers.length !== 0">
@@ -59,7 +59,7 @@
:class="{ 'border-t': index == 0 }"
>
<li>
<autocomplete
<SmartAutoComplete
:placeholder="$t('header_count', { count: index + 1 })"
:source="commonHeaders"
:spellcheck="false"
@@ -138,9 +138,9 @@
</li>
</ul>
</div>
</pw-section>
</AppSection>
<pw-section class="green" :label="$t('schema')" ref="schema" no-legend>
<AppSection class="green" :label="$t('schema')" ref="schema" no-legend>
<div class="row-wrapper">
<label>{{ $t("schema") }}</label>
<div v-if="schema">
@@ -174,7 +174,7 @@
</button>
</div>
</div>
<ace-editor
<SmartAceEditor
v-if="schema"
:value="schema"
:lang="'graphqlschema'"
@@ -198,9 +198,9 @@
readonly
type="text"
/>
</pw-section>
</AppSection>
<pw-section class="teal" :label="$t('query')" ref="query" no-legend>
<AppSection class="teal" :label="$t('query')" ref="query" no-legend>
<div class="row-wrapper gqlRunQuery">
<label for="gqlQuery">{{ $t("query") }}</label>
<div>
@@ -227,7 +227,7 @@
</button>
</div>
</div>
<queryeditor
<GraphqlQueryEditor
ref="queryEditor"
v-model="gqlQueryString"
:onRunGQLQuery="runQuery"
@@ -241,12 +241,12 @@
}"
styles="rounded-b-lg"
/>
</pw-section>
</AppSection>
<pw-section class="yellow" :label="$t('variables')" ref="variables" no-legend>
<AppSection class="yellow" :label="$t('variables')" ref="variables" no-legend>
<div class="flex flex-col">
<label>{{ $t("variables") }}</label>
<ace-editor
<SmartAceEditor
v-model="variableString"
:lang="'json'"
:options="{
@@ -260,9 +260,9 @@
styles="rounded-b-lg"
/>
</div>
</pw-section>
</AppSection>
<pw-section class="purple" :label="$t('response')" ref="response" no-legend>
<AppSection class="purple" :label="$t('response')" ref="response" no-legend>
<div class="flex flex-col">
<label>{{ $t("response") }}</label>
<div class="row-wrapper">
@@ -288,7 +288,7 @@
</button>
</div>
</div>
<ace-editor
<SmartAceEditor
v-if="response"
:value="response"
:lang="'json'"
@@ -314,11 +314,11 @@
type="text"
/>
</div>
</pw-section>
</AppSection>
</div>
<aside class="sticky-inner inner-right lg:max-w-md">
<pw-section class="purple" :label="$t('docs')" ref="docs" no-legend>
<AppSection class="purple" :label="$t('docs')" ref="docs" no-legend>
<section class="flex-col">
<input
type="text"
@@ -326,43 +326,47 @@
v-model="graphqlFieldsFilterText"
class="rounded-t-lg"
/>
<tabs ref="gqlTabs" styles="m-4">
<SmartTabs ref="gqlTabs" styles="m-4">
<div class="gqlTabs">
<tab
<SmartTab
v-if="queryFields.length > 0"
:id="'queries'"
:label="$t('queries')"
:selected="true"
>
<div v-for="field in filteredQueryFields" :key="field.name">
<field :gqlField="field" :jumpTypeCallback="handleJumpToType" />
<GraphqlField :gqlField="field" :jumpTypeCallback="handleJumpToType" />
</div>
</tab>
</SmartTab>
<tab v-if="mutationFields.length > 0" :id="'mutations'" :label="$t('mutations')">
<SmartTab
v-if="mutationFields.length > 0"
:id="'mutations'"
:label="$t('mutations')"
>
<div v-for="field in filteredMutationFields" :key="field.name">
<field :gqlField="field" :jumpTypeCallback="handleJumpToType" />
<GraphqlField :gqlField="field" :jumpTypeCallback="handleJumpToType" />
</div>
</tab>
</SmartTab>
<tab
<SmartTab
v-if="subscriptionFields.length > 0"
:id="'subscriptions'"
:label="$t('subscriptions')"
>
<div v-for="field in filteredSubscriptionFields" :key="field.name">
<field :gqlField="field" :jumpTypeCallback="handleJumpToType" />
<GraphqlField :gqlField="field" :jumpTypeCallback="handleJumpToType" />
</div>
</tab>
</SmartTab>
<tab
<SmartTab
v-if="graphqlTypes.length > 0"
:id="'types'"
:label="$t('types')"
ref="typesTab"
>
<div v-for="type in filteredGraphqlTypes" :key="type.name">
<type
<GraphqlType
:gqlType="type"
:gqlTypes="graphqlTypes"
:isHighlighted="isGqlTypeHighlighted({ gqlType: type })"
@@ -370,9 +374,9 @@
:jumpTypeCallback="handleJumpToType"
/>
</div>
</tab>
</SmartTab>
</div>
</tabs>
</SmartTabs>
</section>
<p
@@ -386,7 +390,7 @@
>
{{ $t("send_request_first") }}
</p>
</pw-section>
</AppSection>
</aside>
</div>
</div>

154
pages/index.vue
View File

@@ -2,7 +2,7 @@
<div class="page">
<div class="content">
<div class="page-columns inner-left">
<pw-section class="blue" :label="$t('request')" ref="request" no-legend>
<AppSection class="blue" :label="$t('request')" ref="request" no-legend>
<ul>
<li class="shrink">
<label for="method">{{ $t("method") }}</label>
@@ -50,7 +50,7 @@
@input="pathInputHandler"
:placeholder="$t('url')"
/>
<url-field v-model="uri" v-else />
<SmartUrlField v-model="uri" v-else />
</li>
<li class="shrink">
<label class="hide-on-small-screen" for="send">&nbsp;</label>
@@ -84,7 +84,7 @@
<ul>
<li>
<label for="contentType" class="text-sm">{{ $t("content_type") }}</label>
<autocomplete
<SmartAutoComplete
:source="validContentTypes"
:spellcheck="false"
v-model="contentType"
@@ -96,14 +96,18 @@
<li>
<div class="row-wrapper">
<span>
<pw-toggle v-if="canListParameters" :on="rawInput" @change="rawInput = $event">
<SmartToggle
v-if="canListParameters"
:on="rawInput"
@change="rawInput = $event"
>
{{ $t("raw_input") }}
</pw-toggle>
</SmartToggle>
</span>
</div>
</li>
</ul>
<http-body-parameters
<HttpBodyParameters
v-if="!rawInput"
:bodyParams="bodyParams"
@clear-content="clearContent"
@@ -111,7 +115,7 @@
@remove-request-body-param="removeRequestBodyParam"
@add-request-body-param="addRequestBodyParam"
/>
<http-raw-body
<HttpRawBody
v-else
:rawParams="rawParams"
:contentType="contentType"
@@ -169,42 +173,42 @@
</button>
</span>
</div>
</pw-section>
</AppSection>
<section id="options">
<tabs>
<tab
<SmartTabs>
<SmartTab
:id="'params'"
:label="
$t('parameters') + `${params.length !== 0 ? ' \xA0 • \xA0 ' + params.length : ''}`
"
:selected="true"
>
<http-parameters
<HttpParameters
:params="params"
@clear-content="clearContent"
@remove-request-param="removeRequestParam"
@add-request-param="addRequestParam"
/>
</tab>
</SmartTab>
<tab
<SmartTab
:id="'headers'"
:label="
$t('headers') + `${headers.length !== 0 ? ' \xA0 • \xA0 ' + headers.length : ''}`
"
>
<http-headers
<HttpHeaders
:headers="headers"
@clear-content="clearContent"
@set-route-query-state="setRouteQueryState"
@remove-request-header="removeRequestHeader"
@add-request-header="addRequestHeader"
/>
</tab>
</SmartTab>
<tab :id="'authentication'" :label="$t('authentication')">
<pw-section class="teal" :label="$t('authentication')" ref="authentication" no-legend>
<SmartTab :id="'authentication'" :label="$t('authentication')">
<AppSection class="teal" :label="$t('authentication')" ref="authentication" no-legend>
<ul>
<li>
<div class="row-wrapper">
@@ -276,13 +280,13 @@
</li>
</ul>
<div class="row-wrapper">
<pw-toggle :on="!urlExcludes.auth" @change="setExclude('auth', !$event)">
<SmartToggle :on="!urlExcludes.auth" @change="setExclude('auth', !$event)">
{{ $t("include_in_url") }}
</pw-toggle>
</SmartToggle>
</div>
</pw-section>
</AppSection>
<pw-section
<AppSection
v-if="showTokenRequest"
class="red"
label="Access Token Request"
@@ -400,11 +404,11 @@
</button>
</li>
</ul>
</pw-section>
</tab>
</AppSection>
</SmartTab>
<tab :id="'pre_request_script'" :label="$t('pre_request_script')">
<pw-section
<SmartTab :id="'pre_request_script'" :label="$t('pre_request_script')">
<AppSection
v-if="showPreRequestScript"
class="orange"
:label="$t('pre_request_script')"
@@ -427,7 +431,7 @@
</a>
</div>
</div>
<js-editor
<SmartJsEditor
v-model="preRequestScript"
:options="{
maxLines: '16',
@@ -442,11 +446,11 @@
/>
</li>
</ul>
</pw-section>
</tab>
</AppSection>
</SmartTab>
<tab :id="'tests'" :label="$t('tests')">
<pw-section
<SmartTab :id="'tests'" :label="$t('tests')">
<AppSection
v-if="testsEnabled"
class="orange"
:label="$t('tests')"
@@ -469,7 +473,7 @@
</a>
</div>
</div>
<js-editor
<SmartJsEditor
v-model="testScript"
:options="{
maxLines: '16',
@@ -516,50 +520,50 @@
</div>
</li>
</ul>
</pw-section>
</tab>
</tabs>
</AppSection>
</SmartTab>
</SmartTabs>
</section>
<http-response :response="response" :active="runningRequest" ref="response" />
<HttpResponse :response="response" :active="runningRequest" ref="response" />
</div>
<aside v-if="activeSidebar" class="sticky-inner inner-right lg:max-w-md">
<section>
<tabs>
<tab :id="'history'" :label="$t('history')" :selected="true">
<history @useHistory="handleUseHistory" ref="historyComponent" />
</tab>
<SmartTabs>
<SmartTab :id="'history'" :label="$t('history')" :selected="true">
<HttpHistory @useHistory="handleUseHistory" ref="historyComponent" />
</SmartTab>
<tab :id="'collections'" :label="$t('collections')">
<collections />
</tab>
<SmartTab :id="'collections'" :label="$t('collections')">
<Collections />
</SmartTab>
<tab :id="'env'" :label="$t('environments')">
<environments @use-environment="useSelectedEnvironment($event)" />
</tab>
<SmartTab :id="'env'" :label="$t('environments')">
<Environments @use-environment="useSelectedEnvironment($event)" />
</SmartTab>
<tab :id="'notes'" :label="$t('notes')">
<notes />
</tab>
</tabs>
<SmartTab :id="'notes'" :label="$t('notes')">
<HttpNotes />
</SmartTab>
</SmartTabs>
</section>
</aside>
</div>
<save-request-as
<CollectionsSaveRequest
:show="showSaveRequestModal"
@hide-modal="hideRequestModal"
:editing-request="editRequest"
/>
<import-curl
<HttpImportCurl
:show="showCurlImportModal"
@hide-modal="showCurlImportModal = false"
@handle-import="handleImport"
/>
<codegen-modal
<HttpCodegenModal
:show="showCodegenModal"
:requestTypeProp="requestType"
:requestCode="requestCode"
@@ -567,7 +571,7 @@
@set-request-type="setRequestType"
/>
<token-list
<HttpTokenList
:show="showTokenListModal"
:tokens="tokens"
@clear-content="clearContent"
@@ -576,7 +580,7 @@
@hide-modal="showTokenListModal = false"
/>
<modal v-if="showTokenRequestList" @close="showTokenRequestList = false">
<SmartModal v-if="showTokenRequestList" @close="showTokenRequestList = false">
<div slot="header">
<div class="row-wrapper">
<h3 class="title">{{ $t("manage_token_req") }}</h3>
@@ -642,7 +646,7 @@
</span>
</div>
</div>
</modal>
</SmartModal>
</div>
</template>
@@ -1652,25 +1656,25 @@ export default {
}
}
},
observeRequestButton() {
const requestElement = this.$refs.request.$el
const sendButtonElement = this.$refs.sendButton
const observer = new IntersectionObserver(
(entries, observer) => {
entries.forEach(({ isIntersecting }) => {
if (isIntersecting) sendButtonElement.classList.remove("show")
// The button should float when it is no longer visible on screen.
// This is done by adding the show class to the button.
else sendButtonElement.classList.add("show")
})
},
{
rootMargin: "0px",
threshold: [0],
}
)
observer.observe(requestElement)
},
// observeRequestButton() {
// const requestElement = this.$refs.request
// const sendButtonElement = this.$refs.sendButton
// const observer = new IntersectionObserver(
// (entries, observer) => {
// entries.forEach(({ isIntersecting }) => {
// if (isIntersecting) sendButtonElement.classList.remove("show")
// // The button should float when it is no longer visible on screen.
// // This is done by adding the show class to the button.
// else sendButtonElement.classList.add("show")
// })
// },
// {
// rootMargin: "0px",
// threshold: [0],
// }
// )
// observer.observe(requestElement)
// },
handleImport() {
const { value: text } = document.getElementById("import-curl")
try {
@@ -1930,7 +1934,7 @@ export default {
},
},
async mounted() {
this.observeRequestButton()
// this.observeRequestButton()
this._keyListener = function (e) {
if (e.key === "g" && (e.ctrlKey || e.metaKey)) {
e.preventDefault()

28
pages/realtime.vue
View File

@@ -1,23 +1,23 @@
<template>
<div class="page">
<section id="options">
<tabs>
<tab :id="'websocket'" :label="$t('websocket')" :selected="true">
<websocket />
</tab>
<SmartTabs>
<SmartTab :id="'websocket'" :label="$t('websocket')" :selected="true">
<RealtimeWebsocket />
</SmartTab>
<tab :id="'sse'" :label="$t('sse')">
<sse />
</tab>
<SmartTab :id="'sse'" :label="$t('sse')">
<RealtimeSse />
</SmartTab>
<tab :id="'socketio'" :label="$t('socketio')">
<socketio />
</tab>
<SmartTab :id="'socketio'" :label="$t('socketio')">
<RealtimeSocketio />
</SmartTab>
<tab :id="'mqtt'" :label="$t('mqtt')">
<mqtt />
</tab>
</tabs>
<SmartTab :id="'mqtt'" :label="$t('mqtt')">
<RealtimeMqtt />
</SmartTab>
</SmartTabs>
</section>
</div>
</template>

52
pages/settings.vue
View File

@@ -1,6 +1,6 @@
<template>
<div class="page">
<pw-section class="green" :label="$t('account')" ref="account" no-legend>
<AppSection class="green" :label="$t('account')" ref="account" no-legend>
<div class="flex flex-col">
<label>{{ $t("account") }}</label>
<div v-if="fb.currentUser">
@@ -23,16 +23,16 @@
</span>
</button>
<br />
<logout />
<FirebaseLogout />
<p v-for="setting in fb.currentSettings" :key="setting.id">
<pw-toggle
<SmartToggle
:key="setting.name"
:on="setting.value"
@change="toggleSettings(setting.name, setting.value)"
>
{{ $t(setting.name) + " " + $t("sync") }}
{{ setting.value ? $t("enabled") : $t("disabled") }}
</pw-toggle>
</SmartToggle>
</p>
<p v-if="fb.currentSettings.length !== 3">
<button class="" @click="initSettings">
@@ -44,48 +44,48 @@
<div v-else>
<label>{{ $t("login_with") }}</label>
<p>
<login />
<FirebaseLogin />
</p>
</div>
</div>
</pw-section>
</AppSection>
<pw-section class="teal" :label="$t('theme')" ref="theme" no-legend>
<AppSection class="teal" :label="$t('theme')" ref="theme" no-legend>
<div class="flex flex-col">
<label>{{ $t("theme") }}</label>
<color-mode-picker />
<accent-mode-picker />
<SmartColorModePicker />
<SmartAccentModePicker />
<span>
<pw-toggle
<SmartToggle
:on="settings.FRAME_COLORS_ENABLED"
@change="toggleSetting('FRAME_COLORS_ENABLED')"
>
{{ $t("multi_color") }}
{{ settings.FRAME_COLORS_ENABLED ? $t("enabled") : $t("disabled") }}
</pw-toggle>
</SmartToggle>
</span>
<span>
<pw-toggle
<SmartToggle
:on="settings.SCROLL_INTO_ENABLED"
@change="toggleSetting('SCROLL_INTO_ENABLED')"
>
{{ $t("scrollInto_use_toggle") }}
{{ settings.SCROLL_INTO_ENABLED ? $t("enabled") : $t("disabled") }}
</pw-toggle>
</SmartToggle>
</span>
</div>
</pw-section>
</AppSection>
<pw-section class="purple" :label="$t('extensions')" ref="extensions" no-legend>
<AppSection class="purple" :label="$t('extensions')" ref="extensions" no-legend>
<div class="flex flex-col">
<label>{{ $t("extensions") }}</label>
<div class="row-wrapper">
<pw-toggle
<SmartToggle
:on="settings.EXTENSIONS_ENABLED"
@change="toggleSetting('EXTENSIONS_ENABLED')"
>
{{ $t("extensions_use_toggle") }}
</pw-toggle>
</SmartToggle>
</div>
<p v-if="extensionVersion != null" class="info">
{{ $t("extension_version") }}: v{{ extensionVersion.major }}.{{ extensionVersion.minor }}
@@ -94,17 +94,17 @@
{{ $t("extension_version") }}: {{ $t("extension_ver_not_reported") }}
</p>
</div>
</pw-section>
</AppSection>
<pw-section class="blue" :label="$t('proxy')" ref="proxy" no-legend>
<AppSection class="blue" :label="$t('proxy')" ref="proxy" no-legend>
<div class="flex flex-col">
<label>{{ $t("proxy") }}</label>
<div class="row-wrapper">
<span>
<pw-toggle :on="settings.PROXY_ENABLED" @change="toggleSetting('PROXY_ENABLED')">
<SmartToggle :on="settings.PROXY_ENABLED" @change="toggleSetting('PROXY_ENABLED')">
{{ $t("proxy") }}
{{ settings.PROXY_ENABLED ? $t("enabled") : $t("disabled") }}
</pw-toggle>
</SmartToggle>
</span>
<a
href="https://github.com/hoppscotch/hoppscotch/wiki/Proxy"
@@ -158,9 +158,9 @@
</li>
</ul>
-->
</pw-section>
</AppSection>
<pw-section class="red" :label="$t('experiments')" ref="experiments" no-legend>
<AppSection class="red" :label="$t('experiments')" ref="experiments" no-legend>
<div class="flex flex-col">
<label>{{ $t("experiments") }}</label>
<p class="info">
@@ -174,15 +174,15 @@
>.
</p>
<div class="row-wrapper">
<pw-toggle
<SmartToggle
:on="settings.EXPERIMENTAL_URL_BAR_ENABLED"
@change="toggleSetting('EXPERIMENTAL_URL_BAR_ENABLED')"
>
{{ $t("use_experimental_url_bar") }}
</pw-toggle>
</SmartToggle>
</div>
</div>
</pw-section>
</AppSection>
</div>
</template>