fix: final modifs

components.d.ts

@@ -11,6 +11,7 @@ declare module '@vue/runtime-core' {
   export interface GlobalComponents {
     '404.page': typeof import('./src/pages/404.page.vue')['default']
     About: typeof import('./src/pages/About.vue')['default']
+    ApiTester: typeof import('./src/tools/api-tester/api-tester.vue')['default']
     App: typeof import('./src/App.vue')['default']
     AsciiTextDrawer: typeof import('./src/tools/ascii-text-drawer/ascii-text-drawer.vue')['default']
     'Base.layout': typeof import('./src/layouts/base.layout.vue')['default']
@@ -127,10 +128,12 @@ declare module '@vue/runtime-core' {
     MetaTagGenerator: typeof import('./src/tools/meta-tag-generator/meta-tag-generator.vue')['default']
     MimeTypes: typeof import('./src/tools/mime-types/mime-types.vue')['default']
     NavbarButtons: typeof import('./src/components/NavbarButtons.vue')['default']
+    NCheckbox: typeof import('naive-ui')['NCheckbox']
     NCode: typeof import('naive-ui')['NCode']
     NCollapseTransition: typeof import('naive-ui')['NCollapseTransition']
     NConfigProvider: typeof import('naive-ui')['NConfigProvider']
     NDivider: typeof import('naive-ui')['NDivider']
+    NDynamicInput: typeof import('naive-ui')['NDynamicInput']
     NEllipsis: typeof import('naive-ui')['NEllipsis']
     NFormItem: typeof import('naive-ui')['NFormItem']
     NGi: typeof import('naive-ui')['NGi']
@@ -138,6 +141,7 @@ declare module '@vue/runtime-core' {
     NH1: typeof import('naive-ui')['NH1']
     NH3: typeof import('naive-ui')['NH3']
     NIcon: typeof import('naive-ui')['NIcon']
+    NInput: typeof import('naive-ui')['NInput']
     NInputNumber: typeof import('naive-ui')['NInputNumber']
     NLabel: typeof import('naive-ui')['NLabel']
     NLayout: typeof import('naive-ui')['NLayout']

src/composable/queryParams.ts

@@ -1,7 +1,8 @@
 import { useRouteQuery } from '@vueuse/router';
 import { computed } from 'vue';
+import { useStorage } from '@vueuse/core';
 
-export { useQueryParam };
+export { useQueryParam, useQueryParamOrStorage };
 
 const transformers = {
   number: {
@@ -16,6 +17,12 @@ const transformers = {
     fromQuery: (value: string) => value.toLowerCase() === 'true',
     toQuery: (value: boolean) => (value ? 'true' : 'false'),
   },
+  object: {
+    fromQuery: (value: string) => {
+      return JSON.parse(value);
+    },
+    toQuery: (value: object) => JSON.stringify(value),
+  },
 };
 
 function useQueryParam<T>({ name, defaultValue }: { name: string; defaultValue: T }) {
@@ -33,3 +40,27 @@ function useQueryParam<T>({ name, defaultValue }: { name: string; defaultValue:
     },
   });
 }
+
+function useQueryParamOrStorage<T>({ name, storageName, defaultValue }: { name: string; storageName: string; defaultValue: T }) {
+  const type = typeof defaultValue;
+  const transformer = transformers[type as keyof typeof transformers] ?? transformers.string;
+
+  const storageRef = useStorage(storageName, defaultValue);
+  const proxyDefaultValue = transformer.toQuery(defaultValue as never);
+  const proxy = useRouteQuery(name, proxyDefaultValue);
+
+  const r = ref(defaultValue);
+
+  watch(r,
+    (value) => {
+      proxy.value = transformer.toQuery(value as never);
+      storageRef.value = value as never;
+    },
+    { deep: true });
+
+  r.value = (proxy.value && proxy.value !== proxyDefaultValue
+    ? transformer.fromQuery(proxy.value) as unknown as T
+    : storageRef.value as T) as never;
+
+  return r;
+}

src/tools/api-tester/api-tester.vue

@@ -10,31 +10,47 @@ const baseUrl = useQueryParamOrStorage({ name: 'url', storageName: 'api-tester:u
 const method = useQueryParamOrStorage({ name: 'method', storageName: 'api-tester:m', defaultValue: 'POST' });
 const queryParams = useQueryParamOrStorage<KeyValuePair[]>({ name: 'params', storageName: 'api-tester:params', defaultValue: [] });
 const headers = useQueryParamOrStorage<KeyValuePair[]>({ name: 'headers', storageName: 'api-tester:headers', defaultValue: [] });
+const contentType = useQueryParamOrStorage({ name: 'ct', storageName: 'api-tester:ct', defaultValue: 'application/json' });
 const body = useQueryParamOrStorage({ name: 'body', storageName: 'api-tester:body', defaultValue: '' });
+const noCORS = ref(false);
 const apiCallResult = ref();
 
 const inprogress = ref(false);
 async function callAPI() {
   const url = new URL(baseUrl.value);
   for (const kv of queryParams.value) {
+    if (!kv.key) {
+      continue;
+    }
     url.searchParams.append(kv.key, kv.value || '');
   }
   const queryHeaders = [] as [string, string][];
   for (const kv of headers.value) {
+    if (!kv.key) {
+      continue;
+    }
     queryHeaders.push([kv.key, kv.value || '']);
   }
+  queryHeaders.push(['Content-Type', contentType.value || '']);
 
   try {
     const response = await fetch(url, {
       method: method.value,
       headers: queryHeaders,
-      body: body.value,
+      body: (method.value === 'GET' || method.value === 'HEAD') ? null : body.value,
+      mode: noCORS.value ? 'no-cors' : 'cors',
     });
 
+    let responseText = await response.text();
+    try {
+      responseText = JSON.stringify(JSON.parse(responseText), null, 2);
+    }
+    catch (_) {
+    }
     apiCallResult.value = {
       code: response.status,
       error: '',
-      result: await response.text(),
+      result: responseText,
     };
   }
   catch (err: any) {
@@ -45,11 +61,18 @@ async function callAPI() {
     };
   }
 }
+
+function emptyKeyPair() {
+  return {
+    key: '',
+    value: '',
+  };
+}
 </script>
 
 <template>
   <div>
-    <c-card title="">
+    <c-card title="API Calling">
       <c-input-text
         v-model:value="baseUrl"
         label="Base API Url"
@@ -61,36 +84,44 @@ async function callAPI() {
         v-model:value="method"
         label="HTTP Method:"
         :options="['GET', 'POST', 'PUT', 'DELETE', 'PATCH']"
+        mb-2
       />
 
       <c-card title="Headers" mb-2>
-        <n-dynamic-input v-model:value="headers">
+        <n-dynamic-input v-model:value="headers" :on-create="emptyKeyPair">
           <template #create-button-default>
             Add a new HTTP Header
           </template>
           <template #default="{ value }">
-            <div style="display: flex; align-items: center; width: 100%">
+            <div v-if="value" w-100 flex justify-center gap-2>
-              <n-input v-model:value="value.key" type="text" />
+              <c-input-text v-model:value="value.key" placeholder="Header Name" type="text" />
-              <n-input v-model:value="value.value" type="text" />
+              <c-input-text v-model:value="value.value" placeholder="Value" type="text" />
             </div>
           </template>
         </n-dynamic-input>
+        <c-select
+          v-model:value="contentType"
+          label="Content-Type:"
+          :options="['application/json', 'text/plain']"
+          mt-2
+        />
       </c-card>
 
       <c-card title="Query Parameters" mb-2>
-        <n-dynamic-input v-model:value="queryParams">
+        <n-dynamic-input v-model:value="queryParams" :on-create="emptyKeyPair">
           <template #create-button-default>
-            Add a new HTTP Header
+            Add a new Query Parameter
           </template>
           <template #default="{ value }">
-            <div style="display: flex; align-items: center; width: 100%">
+            <div v-if="value" w-100 flex justify-center gap-2>
-              <n-input v-model:value="value.key" type="text" />
+              <c-input-text v-model:value="value.key" placeholder="Param Name" type="text" />
-              <n-input v-model:value="value.value" type="text" />
+              <c-input-text v-model:value="value.value" placeholder="Value" type="text" />
             </div>
           </template>
         </n-dynamic-input>
       </c-card>
       <c-input-text
+        v-if="method !== 'GET' && method !== 'HEAD'"
         v-model:value="body"
         label="Body"
         placeholder="HTTP Query body"
@@ -99,20 +130,26 @@ async function callAPI() {
         mb-2
       />
 
-      <c-button secondary @click="callAPI">
+      <n-checkbox v-model:checked="noCORS">
-        Call API
+        No CORS
-      </c-button>
+      </n-checkbox>
+
+      <div mt-5 flex justify-center>
+        <c-button secondary @click="callAPI">
+          Call API
+        </c-button>
+      </div>
     </c-card>
     <n-spin
       v-if="inprogress"
       size="small"
     />
-    <c-alert v-if="!inprogress && apiCallResult.code !== 200" type="error" mt-12 title="Error while calling API">
+    <c-alert v-if="!inprogress && apiCallResult && apiCallResult.code !== 200" type="error" mt-12 title="Error while calling API">
       <p><strong>Status code = {{ apiCallResult.code }}</strong></p>
-      <TextareaCopyable :value="apiCallResult.error" />
+      <TextareaCopyable :value="apiCallResult.error" copy-placement="none" />
     </c-alert>
-    <c-card v-if="!inprogress && apiCallResult.code === 200" mt-12 title="API Call result">
+    <c-card v-if="!inprogress && apiCallResult && apiCallResult.code === 200" mt-12 title="API Call result">
-      <TextareaCopyable :value="apiCallResult.result" />
+      <TextareaCopyable :value="apiCallResult.result" word-wrap />
     </c-card>
   </div>
 </template>