refactor: init new state for body

components/http/Body.vue

@@ -0,0 +1,74 @@
+<template>
+  <div>
+    <div class="flex flex-1 py-2 items-center justify-between">
+      <tippy
+        ref="contentTypeOptions"
+        interactive
+        tabindex="-1"
+        trigger="click"
+        theme="popover"
+        arrow
+      >
+        <template #trigger>
+          <div class="flex">
+            <span class="select-wrapper">
+              <input
+                id="contentType"
+                v-model="contentType"
+                class="
+                  bg-primary
+                  rounded-lg
+                  flex
+                  font-semibold font-mono
+                  text-xs
+                  w-full
+                  py-2
+                  px-4
+                  transition
+                  truncate
+                  focus:outline-none
+                "
+                readonly
+              />
+            </span>
+          </div>
+        </template>
+        <SmartItem
+          v-for="(contentTypeItem, index) in validContentTypes"
+          :key="`contentTypeItem-${index}`"
+          :label="contentTypeItem"
+          @click.native="
+            contentType = contentTypeItem
+            $refs.contentTypeOptions.tippy().hide()
+          "
+        />
+      </tippy>
+      <SmartToggle :on="rawInput" class="px-4" @change="rawInput = !rawInput">
+        {{ $t("raw_input") }}
+      </SmartToggle>
+    </div>
+    <HttpBodyParameters v-if="!rawInput" :content-type="contentType" />
+    <HttpRawBody v-else :content-type="contentType" />
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "@nuxtjs/composition-api"
+import { pluckRef } from "~/helpers/utils/composables"
+import { useRESTRequestBody } from "~/newstore/RESTSession"
+import { knownContentTypes } from "~/helpers/utils/contenttypes"
+
+export default defineComponent({
+  setup() {
+    return {
+      contentType: pluckRef(useRESTRequestBody(), "contentType"),
+      rawInput: pluckRef(useRESTRequestBody(), "isRaw"),
+    }
+  },
+  data() {
+    return {
+      validContentTypes: Object.keys(knownContentTypes),
+    }
+  },
+})
+</script>