⌨️Add autocomplete widget with command line completion

assets/css/themes.scss

@@ -10,6 +10,8 @@
   --bg-dark-color: #000000;
   // Background color
   --bg-color: #121212;
+	// Auto-complete color
+	--atc-color: #212121;
   // Text color
   --fg-color: #FFF;
 
@@ -26,6 +28,8 @@
   --bg-dark-color: #ffffff;
   // Background color
   --bg-color: #F6F8FA;
+	// Auto-complete color
+	--atc-color: #F1F1F1;
   // Text color
   --fg-color: #121212;
 

components/autocomplete.vue

@@ -0,0 +1,190 @@
+<template>
+	<div class="autocomplete-wrapper">
+		<label>
+			<slot />
+			<input type="text"
+						 :placeholder="placeholder"
+						 v-model="value"
+						 @input="updateSuggestions"
+						 @keyup="updateSuggestions"
+						 @click="updateSuggestions"
+						 @keydown="handleKeystroke"
+						 ref="acInput"
+						:spellcheck="spellcheck"
+						:autocapitalize="spellcheck"
+						:autocorrect="spellcheck">
+
+			<ul class="suggestions" v-if="suggestions.length > 0 && suggestionsVisible" :style="{ transform: `translate(${suggestionsOffsetLeft}px, 0)` }">
+				<li v-for="(suggestion, index) in suggestions" @click.prevent="forceSuggestion(suggestion)" :class="{ active: currentSuggestionIndex === index }">{{ suggestion }}</li>
+			</ul>
+		</label>
+	</div>
+</template>
+
+<style lang="scss" scoped>
+.autocomplete-wrapper {
+
+	position: relative;
+
+	input:focus + ul.suggestions, ul.suggestions:hover {
+		display: block;
+	}
+
+	ul.suggestions {
+		display: none;
+		background-color: var(--atc-color);
+		position: absolute;
+		top: 90%;
+		margin: 0 4px;
+		left: 0;
+
+		padding: 0;
+		border-radius: 0 0 4px 4px;
+		z-index: 9999;
+		transition: transform 200ms ease-out;
+
+		li {
+			width: 100%;
+			display: block;
+			margin: 5px 0;
+			padding: 10px 10px;
+			font-weight: 700;
+			font-size: 18px;
+			font-family: monospace;
+			white-space: pre-wrap;
+
+			&:hover, &.active {
+				background-color: var(--ac-color);
+			}
+		}
+	}
+
+}
+</style>
+
+<script>
+	const KEY_TAB = 9;
+	const KEY_ESC = 27;
+
+	const KEY_ARROW_UP = 38;
+	const KEY_ARROW_DOWN = 40;
+
+	export default {
+	    props: {
+	        spellcheck: {
+	            type: Boolean,
+							default: true,
+							required: false
+					},
+
+	        placeholder: {
+	            type: String,
+	            default: 'Start typing...',
+							required: false
+					},
+
+					source: {
+	            type: Array,
+	            required: true
+					},
+
+					value: {}
+			},
+
+			watch: {
+	        value () {
+	            this.$emit('input', this.value);
+					}
+			},
+
+			data () {
+	        return {
+	            value: "",
+
+							selectionStart: 0,
+							suggestionsOffsetLeft: 0,
+							currentSuggestionIndex: -1,
+							suggestionsVisible: false
+					}
+			},
+
+			methods: {
+          updateSuggestions (event) {
+							// Hide suggestions if ESC pressed.
+              if(event.which && event.which === KEY_ESC){
+                  event.preventDefault();
+                  this.suggestionsVisible = false;
+                  this.currentSuggestionIndex = -1;
+                  return;
+              }
+
+              // As suggestions is a reactive property, this implicitly
+              // causes suggestions to update.
+              this.selectionStart = this.$refs.acInput.selectionStart;
+              this.suggestionsOffsetLeft = (12 * this.selectionStart);
+              this.suggestionsVisible = true;
+					},
+
+					forceSuggestion (text) {
+              let input = this.value.substring(0, this.selectionStart);
+              this.value = input + text;
+
+              this.selectionStart = this.value.length;
+              this.suggestionsVisible = true;
+              this.currentSuggestionIndex = -1;
+					},
+
+					handleKeystroke (event) {
+              if(event.which === KEY_ARROW_UP){
+                  event.preventDefault();
+
+                  this.currentSuggestionIndex = this.currentSuggestionIndex - 1 >= 0
+											? this.currentSuggestionIndex - 1
+											: 0;
+							}else if(event.which === KEY_ARROW_DOWN){
+                  event.preventDefault();
+
+                  this.currentSuggestionIndex = this.currentSuggestionIndex < this.suggestions.length - 1
+                      ? this.currentSuggestionIndex + 1
+                      : this.suggestions.length - 1;
+							}
+
+	            if(event.which === KEY_TAB){
+	                event.preventDefault();
+
+	                let activeSuggestion = this.suggestions[this.currentSuggestionIndex >= 0 ? this.currentSuggestionIndex : 0];
+                  if(activeSuggestion){
+										let input = this.value.substring(0, this.selectionStart);
+										this.value = input + activeSuggestion;
+									}
+							}
+					}
+			},
+
+			computed: {
+				/**
+				 * Gets the suggestions list to be displayed under the input box.
+				 *
+				 * @returns {default.props.source|{type, required}}
+				 */
+				suggestions () {
+				    let input = this.value.substring(0, this.selectionStart);
+
+				    return this.source.filter((entry) => {
+				        return entry.toLowerCase().startsWith(input.toLowerCase())
+										&& input.toLowerCase() !== entry.toLowerCase();
+						})
+							// Cut off the part that's already been typed.
+							.map((entry) => entry.substring(this.selectionStart))
+							// We only want the top 3 suggestions.
+							.slice(0, 3);
+				}
+			},
+
+			mounted () {
+	        this.updateSuggestions({
+							target: this.$refs.acInput
+					});
+      }
+  }
+</script>

package-lock.json

@@ -10121,6 +10121,11 @@
       "resolved": "https://registry.npmjs.org/vue-virtual-scroll-list/-/vue-virtual-scroll-list-1.4.2.tgz",
       "integrity": "sha512-jcXl1cYDxGZX+aF9vsUauXWnUkXm8oQxnvLTJ8UMTmMxwzbmlHX7vs0xGDdEej91vJpBNrdNNseWPxboTvI+UA=="
     },
+    "vuejs-auto-complete": {
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/vuejs-auto-complete/-/vuejs-auto-complete-0.9.0.tgz",
+      "integrity": "sha512-7UV3s9bXdnsbGARhHcOuDAszGUsz7JpsFKBfHQuQvo4rfH0yQIru2Rb/x2bWU+m+VW4fS9DKDSYi6tY511QSIA=="
+    },
     "vuex": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.1.1.tgz",

package.json

@@ -7,11 +7,9 @@
   "scripts": {
     "predev": "node build.js --dev",
     "dev": "nuxt",
-
     "prebuild": "node build.js",
     "build": "nuxt build",
     "start": "nuxt start",
-
     "pregenerate": "node build.js",
     "generate": "nuxt generate"
   },
@@ -20,6 +18,7 @@
     "@nuxtjs/pwa": "^3.0.0-0",
     "nuxt": "^2.0.0",
     "vue-virtual-scroll-list": "^1.4.2",
+    "vuejs-auto-complete": "^0.9.0",
     "vuex-persist": "^2.0.1"
   },
   "devDependencies": {

pages/index.vue

@@ -31,14 +31,12 @@
 		<pw-section class="blue-dark" label="Request Body" v-if="method === 'POST' || method === 'PUT' || method === 'PATCH'">
 			<ul>
 				<li>
-          <label>Content Type</label>
+					<autocomplete v-model="contentType" :source="validContentTypes" :spellcheck="false">Content Type</autocomplete>
-          <select v-model="contentType">
+
-            <option>application/json</option>
-            <option>www-form/urlencoded</option>
-          </select>
 					<span>
-            <input v-model="rawInput" style="cursor: pointer;" type="checkbox" id="rawInput">
+						<pw-toggle :on="rawInput" @change="rawInput = !rawInput">
-            <label for="rawInput" style="cursor: pointer;">Raw Input</label>
+							Raw input {{ rawInput ? "enabled" : "disabled" }}
+						</pw-toggle>
           </span>
 				</li>
 			</ul>
@@ -192,9 +190,11 @@
 </template>
 
 <script>
+    import autocomplete from '../components/autocomplete';
     import history from "../components/history";
     import section from "../components/section";
     import textareaAutoHeight from "../directives/textareaAutoHeight";
+    import toggle from "../components/toggle";
 
     const statusCategories = [{
         name: 'informational',
@@ -248,10 +248,13 @@
         },
         components: {
             'pw-section': section,
-      history
+            'pw-toggle': toggle,
+            history,
+            autocomplete
         },
         data() {
             return {
+
                 method: 'GET',
                 url: 'https://reqres.in',
                 auth: 'None',
@@ -270,7 +273,33 @@
                     headers: '',
                     body: ''
                 },
-        previewEnabled: false
+                previewEnabled: false,
+
+								/**
+								 * These are content types that can be automatically
+								 * serialized by postwoman.
+								 */
+								knownContentTypes: [
+								    'application/json',
+										'application/x-www-form-urlencoded'
+								],
+
+                /**
+                 * These are a list of Content Types known to Postwoman.
+                 */
+                validContentTypes: [
+                    'application/json',
+                    'application/hal+json',
+                    'application/xml',
+                    'application/x-www-form-urlencoded',
+                    'text/html',
+                    'text/plain'
+                ]
+            }
+        },
+        watch: {
+            contentType (val) {
+							this.rawInput = !this.knownContentTypes.includes(val);
             }
         },
         computed: {