Merge pull request #421 from AndrewBastin/feat/header_completion
Header key autocompletion
This commit is contained in:
Andrew Bastin
GitHub
@@ -3,7 +3,7 @@
|
||||
<input
|
||||
type="text"
|
||||
:placeholder="placeholder"
|
||||
v-model="value"
|
||||
v-model="text"
|
||||
@input="updateSuggestions"
|
||||
@keyup="updateSuggestions"
|
||||
@click="updateSuggestions"
|
||||
@@ -90,25 +90,31 @@ export default {
|
||||
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: "Start typing...",
|
||||
default: "",
|
||||
required: false
|
||||
},
|
||||
|
||||
source: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
|
||||
value: {
|
||||
type: String,
|
||||
default: "",
|
||||
required: false
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
value() {
|
||||
this.$emit("input", this.value);
|
||||
text() {
|
||||
this.$emit("input", this.text);
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
value: "application/json",
|
||||
text: this.value,
|
||||
selectionStart: 0,
|
||||
suggestionsOffsetLeft: 0,
|
||||
currentSuggestionIndex: -1,
|
||||
@@ -134,10 +140,10 @@ export default {
|
||||
},
|
||||
|
||||
forceSuggestion(text) {
|
||||
let input = this.value.substring(0, this.selectionStart);
|
||||
this.value = input + text;
|
||||
let input = this.text.substring(0, this.selectionStart);
|
||||
this.text = input + text;
|
||||
|
||||
this.selectionStart = this.value.length;
|
||||
this.selectionStart = this.text.length;
|
||||
this.suggestionsVisible = true;
|
||||
this.currentSuggestionIndex = -1;
|
||||
},
|
||||
@@ -166,8 +172,8 @@ export default {
|
||||
this.currentSuggestionIndex >= 0 ? this.currentSuggestionIndex : 0
|
||||
];
|
||||
if (activeSuggestion) {
|
||||
let input = this.value.substring(0, this.selectionStart);
|
||||
this.value = input + activeSuggestion;
|
||||
let input = this.text.substring(0, this.selectionStart);
|
||||
this.text = input + activeSuggestion;
|
||||
}
|
||||
break;
|
||||
|
||||
@@ -184,7 +190,7 @@ export default {
|
||||
* @returns {default.props.source|{type, required}}
|
||||
*/
|
||||
suggestions() {
|
||||
let input = this.value.substring(0, this.selectionStart);
|
||||
let input = this.text.substring(0, this.selectionStart);
|
||||
|
||||
return (
|
||||
this.source
|
||||
|
||||
@@ -52,14 +52,15 @@
|
||||
</ul>
|
||||
<ul v-for="(header, index) in headers" :key="index">
|
||||
<li>
|
||||
<input
|
||||
:placeholder="'header ' + (index + 1)"
|
||||
:name="'header' + index"
|
||||
<autocomplete
|
||||
:placeholder="'index ' + (index + 1)"
|
||||
:source="commonHeaders"
|
||||
:spellcheck="false"
|
||||
:value="header.key"
|
||||
@change="
|
||||
@input="
|
||||
$store.commit('setGQLHeaderKey', {
|
||||
index,
|
||||
value: $event.target.value
|
||||
value: $event
|
||||
})
|
||||
"
|
||||
autofocus
|
||||
@@ -307,11 +308,136 @@ export default {
|
||||
"pw-section": () => import("../components/section"),
|
||||
"gql-field": () => import("../components/graphql/field"),
|
||||
"gql-type": () => import("../components/graphql/type"),
|
||||
autocomplete: () => import("../components/autocomplete"),
|
||||
Editor: AceEditor
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
schemaString: "",
|
||||
commonHeaders: [
|
||||
"WWW-Authenticate",
|
||||
"Authorization",
|
||||
"Proxy-Authenticate",
|
||||
"Proxy-Authorization",
|
||||
"Age",
|
||||
"Cache-Control",
|
||||
"Clear-Site-Data",
|
||||
"Expires",
|
||||
"Pragma",
|
||||
"Warning",
|
||||
"Accept-CH",
|
||||
"Accept-CH-Lifetime",
|
||||
"Early-Data",
|
||||
"Content-DPR",
|
||||
"DPR",
|
||||
"Device-Memory",
|
||||
"Save-Data",
|
||||
"Viewport-Width",
|
||||
"Width",
|
||||
"Last-Modified",
|
||||
"ETag",
|
||||
"If-Match",
|
||||
"If-None-Match",
|
||||
"If-Modified-Since",
|
||||
"If-Unmodified-Since",
|
||||
"Vary",
|
||||
"Connection",
|
||||
"Keep-Alive",
|
||||
"Accept",
|
||||
"Accept-Charset",
|
||||
"Accept-Encoding",
|
||||
"Accept-Language",
|
||||
"Expect",
|
||||
"Max-Forwards",
|
||||
"Cookie",
|
||||
"Set-Cookie",
|
||||
"Cookie2",
|
||||
"Set-Cookie2",
|
||||
"Access-Control-Allow-Origin",
|
||||
"Access-Control-Allow-Credentials",
|
||||
"Access-Control-Allow-Headers",
|
||||
"Access-Control-Allow-Methods",
|
||||
"Access-Control-Expose-Headers",
|
||||
"Access-Control-Max-Age",
|
||||
"Access-Control-Request-Headers",
|
||||
"Access-Control-Request-Method",
|
||||
"Origin",
|
||||
"Service-Worker-Allowed",
|
||||
"Timing-Allow-Origin",
|
||||
"X-Permitted-Cross-Domain-Policies",
|
||||
"DNT",
|
||||
"Tk",
|
||||
"Content-Disposition",
|
||||
"Content-Length",
|
||||
"Content-Type",
|
||||
"Content-Encoding",
|
||||
"Content-Language",
|
||||
"Content-Location",
|
||||
"Forwarded",
|
||||
"X-Forwarded-For",
|
||||
"X-Forwarded-Host",
|
||||
"X-Forwarded-Proto",
|
||||
"Via",
|
||||
"Location",
|
||||
"From",
|
||||
"Host",
|
||||
"Referer",
|
||||
"Referrer-Policy",
|
||||
"User-Agent",
|
||||
"Allow",
|
||||
"Server",
|
||||
"Accept-Ranges",
|
||||
"Range",
|
||||
"If-Range",
|
||||
"Content-Range",
|
||||
"Cross-Origin-Opener-Policy",
|
||||
"Cross-Origin-Resource-Policy",
|
||||
"Content-Security-Policy",
|
||||
"Content-Security-Policy-Report-Only",
|
||||
"Expect-CT",
|
||||
"Feature-Policy",
|
||||
"Public-Key-Pins",
|
||||
"Public-Key-Pins-Report-Only",
|
||||
"Strict-Transport-Security",
|
||||
"Upgrade-Insecure-Requests",
|
||||
"X-Content-Type-Options",
|
||||
"X-Download-Options",
|
||||
"X-Frame-Options",
|
||||
"X-Powered-By",
|
||||
"X-XSS-Protection",
|
||||
"Last-Event-ID",
|
||||
"NEL",
|
||||
"Ping-From",
|
||||
"Ping-To",
|
||||
"Report-To",
|
||||
"Transfer-Encoding",
|
||||
"TE",
|
||||
"Trailer",
|
||||
"Sec-WebSocket-Key",
|
||||
"Sec-WebSocket-Extensions",
|
||||
"Sec-WebSocket-Accept",
|
||||
"Sec-WebSocket-Protocol",
|
||||
"Sec-WebSocket-Version",
|
||||
"Accept-Push-Policy",
|
||||
"Accept-Signature",
|
||||
"Alt-Svc",
|
||||
"Date",
|
||||
"Large-Allocation",
|
||||
"Link",
|
||||
"Push-Policy",
|
||||
"Retry-After",
|
||||
"Signature",
|
||||
"Signed-Headers",
|
||||
"Server-Timing",
|
||||
"SourceMap",
|
||||
"Upgrade",
|
||||
"X-DNS-Prefetch-Control",
|
||||
"X-Firefox-Spdy",
|
||||
"X-Pingback",
|
||||
"X-Requested-With",
|
||||
"X-Robots-Tag",
|
||||
"X-UA-Compatible"
|
||||
],
|
||||
queryFields: [],
|
||||
mutationFields: [],
|
||||
subscriptionFields: [],
|
||||
|
||||
134
pages/index.vue
134
pages/index.vue
@@ -424,14 +424,15 @@
|
||||
</ul>
|
||||
<ul v-for="(header, index) in headers" :key="index">
|
||||
<li>
|
||||
<input
|
||||
<autocomplete
|
||||
:placeholder="'header ' + (index + 1)"
|
||||
:name="'header' + index"
|
||||
:source="commonHeaders"
|
||||
:spellcheck="false"
|
||||
:value="header.key"
|
||||
@change="
|
||||
@input="
|
||||
$store.commit('setKeyHeader', {
|
||||
index,
|
||||
value: $event.target.value
|
||||
value: $event
|
||||
})
|
||||
"
|
||||
@keyup.prevent="setRouteQueryState"
|
||||
@@ -908,6 +909,131 @@ export default {
|
||||
"text/html",
|
||||
"text/plain"
|
||||
],
|
||||
|
||||
commonHeaders: [
|
||||
"WWW-Authenticate",
|
||||
"Authorization",
|
||||
"Proxy-Authenticate",
|
||||
"Proxy-Authorization",
|
||||
"Age",
|
||||
"Cache-Control",
|
||||
"Clear-Site-Data",
|
||||
"Expires",
|
||||
"Pragma",
|
||||
"Warning",
|
||||
"Accept-CH",
|
||||
"Accept-CH-Lifetime",
|
||||
"Early-Data",
|
||||
"Content-DPR",
|
||||
"DPR",
|
||||
"Device-Memory",
|
||||
"Save-Data",
|
||||
"Viewport-Width",
|
||||
"Width",
|
||||
"Last-Modified",
|
||||
"ETag",
|
||||
"If-Match",
|
||||
"If-None-Match",
|
||||
"If-Modified-Since",
|
||||
"If-Unmodified-Since",
|
||||
"Vary",
|
||||
"Connection",
|
||||
"Keep-Alive",
|
||||
"Accept",
|
||||
"Accept-Charset",
|
||||
"Accept-Encoding",
|
||||
"Accept-Language",
|
||||
"Expect",
|
||||
"Max-Forwards",
|
||||
"Cookie",
|
||||
"Set-Cookie",
|
||||
"Cookie2",
|
||||
"Set-Cookie2",
|
||||
"Access-Control-Allow-Origin",
|
||||
"Access-Control-Allow-Credentials",
|
||||
"Access-Control-Allow-Headers",
|
||||
"Access-Control-Allow-Methods",
|
||||
"Access-Control-Expose-Headers",
|
||||
"Access-Control-Max-Age",
|
||||
"Access-Control-Request-Headers",
|
||||
"Access-Control-Request-Method",
|
||||
"Origin",
|
||||
"Service-Worker-Allowed",
|
||||
"Timing-Allow-Origin",
|
||||
"X-Permitted-Cross-Domain-Policies",
|
||||
"DNT",
|
||||
"Tk",
|
||||
"Content-Disposition",
|
||||
"Content-Length",
|
||||
"Content-Type",
|
||||
"Content-Encoding",
|
||||
"Content-Language",
|
||||
"Content-Location",
|
||||
"Forwarded",
|
||||
"X-Forwarded-For",
|
||||
"X-Forwarded-Host",
|
||||
"X-Forwarded-Proto",
|
||||
"Via",
|
||||
"Location",
|
||||
"From",
|
||||
"Host",
|
||||
"Referer",
|
||||
"Referrer-Policy",
|
||||
"User-Agent",
|
||||
"Allow",
|
||||
"Server",
|
||||
"Accept-Ranges",
|
||||
"Range",
|
||||
"If-Range",
|
||||
"Content-Range",
|
||||
"Cross-Origin-Opener-Policy",
|
||||
"Cross-Origin-Resource-Policy",
|
||||
"Content-Security-Policy",
|
||||
"Content-Security-Policy-Report-Only",
|
||||
"Expect-CT",
|
||||
"Feature-Policy",
|
||||
"Public-Key-Pins",
|
||||
"Public-Key-Pins-Report-Only",
|
||||
"Strict-Transport-Security",
|
||||
"Upgrade-Insecure-Requests",
|
||||
"X-Content-Type-Options",
|
||||
"X-Download-Options",
|
||||
"X-Frame-Options",
|
||||
"X-Powered-By",
|
||||
"X-XSS-Protection",
|
||||
"Last-Event-ID",
|
||||
"NEL",
|
||||
"Ping-From",
|
||||
"Ping-To",
|
||||
"Report-To",
|
||||
"Transfer-Encoding",
|
||||
"TE",
|
||||
"Trailer",
|
||||
"Sec-WebSocket-Key",
|
||||
"Sec-WebSocket-Extensions",
|
||||
"Sec-WebSocket-Accept",
|
||||
"Sec-WebSocket-Protocol",
|
||||
"Sec-WebSocket-Version",
|
||||
"Accept-Push-Policy",
|
||||
"Accept-Signature",
|
||||
"Alt-Svc",
|
||||
"Date",
|
||||
"Large-Allocation",
|
||||
"Link",
|
||||
"Push-Policy",
|
||||
"Retry-After",
|
||||
"Signature",
|
||||
"Signed-Headers",
|
||||
"Server-Timing",
|
||||
"SourceMap",
|
||||
"Upgrade",
|
||||
"X-DNS-Prefetch-Control",
|
||||
"X-Firefox-Spdy",
|
||||
"X-Pingback",
|
||||
"X-Requested-With",
|
||||
"X-Robots-Tag",
|
||||
"X-UA-Compatible"
|
||||
],
|
||||
showRequestModal: false,
|
||||
editRequest: {},
|
||||
|
||||
|
||||
Reference in New Issue
Block a user