🎉 API documentation page

layouts/default.vue

@@ -582,6 +582,9 @@ export default {
         }
       });
     });
+
+    console.log("%cWe ❤︎ open source!", "background-color:white;padding:8px 16px;border-radius:8px;font-size:32px;color:red;")
+    console.log("%cContribute: https://github.com/liyasthomas/postwoman", "background-color:black;padding:4px 8px;border-radius:8px;font-size:16px;color:white;text-decoration:none;")
   },
 
   watch: {

pages/doc.vue

@@ -0,0 +1,106 @@
+<template>
+  <div class="page">
+    <pw-section class="blue" label="Collection" ref="collection">
+      <ul>
+        <li>
+          <label for="collectionUpload">
+            <button
+              class="icon"
+              @click="$refs.collectionUpload.click()"
+              v-tooltip="'JSON'"
+            >
+              <i class="material-icons">folder</i>
+              <span>Import Collection</span>
+            </button>
+          </label>
+          <input
+            ref="collectionUpload"
+            name="collectionUpload"
+            type="file"
+            @change="uploadCollection"
+          />
+        </li>
+      </ul>
+      <ul>
+        <li>
+          <label for="rawBody">{{ $t("raw_request_body") }}</label>
+          <Editor
+            v-model="collectionJSON"
+            :lang="'json'"
+            :options="{
+              maxLines: '16',
+              minLines: '8',
+              fontSize: '16px',
+              autoScrollEditorIntoView: true,
+              showPrintMargin: false,
+              useWorker: false
+            }"
+          />
+        </li>
+      </ul>
+      <ul>
+        <li>
+          <button class="icon" @click="getDoc">
+            <i class="material-icons">book</i>
+            <span>Generate Documentation</span>
+          </button>
+        </li>
+      </ul>
+    </pw-section>
+
+    <pw-section class="green" label="Documentation" ref="documentation">
+      <ul>
+        {{
+          this.items
+        }}
+      </ul>
+    </pw-section>
+  </div>
+</template>
+
+<style scoped lang="scss"></style>
+
+<script>
+import AceEditor from "../components/ace-editor";
+
+export default {
+  components: {
+    "pw-section": () => import("../components/section"),
+    Editor: AceEditor
+  },
+
+  data() {
+    return {
+      collectionJSON: "[]",
+      items: []
+    };
+  },
+
+  methods: {
+    uploadCollection() {
+      this.rawInput = true;
+      let file = this.$refs.collectionUpload.files[0];
+      if (file !== undefined && file !== null) {
+        let reader = new FileReader();
+        reader.onload = e => {
+          this.collectionJSON = e.target.result;
+        };
+        reader.readAsText(file);
+        this.$toast.info("File imported", {
+          icon: "attach_file"
+        });
+      } else {
+        this.$toast.error("Choose a file", {
+          icon: "attach_file"
+        });
+      }
+    },
+
+    getDoc() {
+      let json = this.collectionJSON;
+      let html;
+      this.items = html;
+    }
+  }
+};
+</script>

pages/index.vue

@@ -227,7 +227,6 @@
                   <Editor
                     v-model="rawParams"
                     :lang="'json'"
-                    @keydown="formatRawParams"
                     :options="{
                       maxLines: '16',
                       minLines: '8',
@@ -1816,38 +1815,6 @@ export default {
         }
       });
     },
-    formatRawParams(event) {
-      if (event.which !== 13 && event.which !== 9) {
-        return;
-      }
-      const textBody = event.target.value;
-      const textBeforeCursor = textBody.substring(
-        0,
-        event.target.selectionStart
-      );
-      const textAfterCursor = textBody.substring(event.target.selectionEnd);
-      if (event.which === 13) {
-        event.preventDefault();
-        const oldSelectionStart = event.target.selectionStart;
-        const lastLine = textBeforeCursor.split("\n").slice(-1)[0];
-        const rightPadding = lastLine.match(/([\s\t]*).*/)[1] || "";
-        event.target.value =
-          textBeforeCursor + "\n" + rightPadding + textAfterCursor;
-        setTimeout(
-          () =>
-            (event.target.selectionStart = event.target.selectionEnd =
-              oldSelectionStart + rightPadding.length + 1),
-          1
-        );
-      } else if (event.which === 9) {
-        event.preventDefault();
-        const oldSelectionStart = event.target.selectionStart;
-        event.target.value = textBeforeCursor + "\xa0\xa0" + textAfterCursor;
-        event.target.selectionStart = event.target.selectionEnd =
-          oldSelectionStart + 2;
-        return false;
-      }
-    },
     copyRequest() {
       if (navigator.share) {
         let time = new Date().toLocaleTimeString();