vue-api-request-builder 0.2.7 → 0.2.9

package/README.md

@@ -1,216 +1,216 @@
-# API Request Builder
-
-A Vue 3 component for building and testing API requests with a beautiful UI.
-
-# Start of Selection
-[中文文档](README_zh.md)
-
-## Workflow
-
-```mermaid
-graph TD
-    A[Start] --> B[Configure Request]
-    B --> C[RequestForm Component]
-    C --> D[Set Request Parameters]
-    D --> E[URL/Path]
-    D --> F[Authentication]
-    D --> G[Headers]
-    D --> H[Request Body]
-    E & F & G & H --> I[Execute Request]
-    I --> J[ResponseSection Component]
-    J --> K[Display Response]
-    K --> L[Status Code]
-    K --> M[Response Headers]
-    K --> N[Response Body]
-    L & M & N --> O[Data Transformation]
-    O --> P[DataTransform Component]
-    P --> Q[Transform Function]
-    Q --> R[Transformed Result]
-    R --> S[End]
-```
-
-## Installation
-
-```bash
-npm install vue-api-request-builder
-# or
-yarn add vue-api-request-builder
-# or
-pnpm add vue-api-request-builder
-```
-
-## Usage
-
-### Basic Usage
-
-```vue
-<template>
-  <div class="app-container">
-    <RequestForm v-model="requestSchema" @update:modelValue="handleSchemaChange" />
-    <ResponseSection v-model="requestSchema" />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue';
-import { RequestForm, ResponseSection, type RequestSchema, defaultRequestSchema } from 'vue-api-request-builder';
-
-const requestSchema = ref<RequestSchema>(defaultRequestSchema);
-
-const handleSchemaChange = (newSchema: RequestSchema) => {
-  console.log("Schema changed:", newSchema);
-};
-</script>
-```
-
-## Components
-
-### RequestForm
-
-The main component for building API requests. It provides a form interface for configuring:
-
-#### Props
-- `modelValue` (RequestSchema): The request schema object (v-model)
-
-#### Events
-- `update:modelValue`: Emitted when the schema changes
-
-#### Features
-- HTTP method selection (GET, POST, PUT, DELETE, OPTIONS)
-- URL configuration with base URL and path
-- URL parameters management
-- Authentication options:
-  - None
-  - Basic Auth
-  - Bearer Token
-- Custom headers
-- Request body support for:
-  - JSON
-  - Form Data
-  - Raw text
-- Live preview of request URL and body
-
-### ResponseSection
-
-Displays the response from the API request.
-
-#### Props
-- `modelValue` (RequestSchema): The request schema object (v-model)
-
-#### Features
-- Request method selection (XMLHttpRequest/Fetch)
-- Response display:
-  - Status code with color coding
-  - Response time
-  - Response headers
-  - Response body with formatting
-- Error handling and display
-
-### DataTransform
-
-Component for configuring and executing data transformation functions.
-
-#### Props
-- `modelValue` (string): The transformation function string (v-model)
-
-#### Features
-- Code editor interface
-- JavaScript function support
-- Real-time syntax checking
-- Function execution preview
-
-### KeyValueInput
-
-A reusable component for managing key-value pairs.
-
-#### Props
-- `modelValue` (KeyValuePair[]): Array of key-value pairs (v-model)
-- `addButtonText` (string): Text for the add button
-- `showPreview` (boolean): Whether to show the preview
-- `previewText` (string): Text to show in preview
-
-#### Events
-- `update:modelValue`: Emitted when the key-value pairs change
-
-## Types
-
-### RequestSchema
-
-```typescript
-interface RequestSchema {
-  method: 'GET' | 'POST' | 'PUT' | 'DELETE' | 'OPTIONS';
-  url: string;
-  path: string;
-  auth: AuthConfig;
-  params: KeyValuePair[];
-  headers: KeyValuePair[];
-  body: RequestBody;
-}
-```
-
-### AuthConfig
-
-```typescript
-interface AuthConfig {
-  type: 'none' | 'Basic' | 'Bearer';
-  username?: string;
-  password?: string;
-  token?: string;
-}
-```
-
-### RequestBody
-
-```typescript
-interface RequestBody {
-  type: 'application/json' | 'multipart/form-data' | 'text/plain';
-  json?: string;
-  formData?: KeyValuePair[];
-  raw?: string;
-}
-```
-
-### ResponseData
-
-```typescript
-interface ResponseData {
-  status: string;
-  headers: Record<string, string>;
-  body: string;
-  timing?: number;
-}
-```
-
-## Utilities
-
-### executeRequest
-
-```typescript
-function executeRequest(
-  schema: RequestSchema,
-  method: 'fetch' | 'xhr' = 'xhr'
-): Promise<ResponseData>
-```
-
-Executes the API request using either Fetch API or XMLHttpRequest.
-
-### executeTransformFunction
-
-```typescript
-function executeTransformFunction(
-  transformFunctionString: string,
-  data: any
-): any
-```
-
-Executes a data transformation function to convert input data into the desired format.
-
-## Dependencies
-
-This package requires:
-- Vue 3.x
-- Ant Design Vue 4.x
-
-## License
-
-MIT
+# API Request Builder
+
+A Vue 3 component for building and testing API requests with a beautiful UI.
+
+# Start of Selection
+[中文文档](README_zh.md)
+
+## Workflow
+
+```mermaid
+graph TD
+    A[Start] --> B[Configure Request]
+    B --> C[RequestForm Component]
+    C --> D[Set Request Parameters]
+    D --> E[URL/Path]
+    D --> F[Authentication]
+    D --> G[Headers]
+    D --> H[Request Body]
+    E & F & G & H --> I[Execute Request]
+    I --> J[ResponseSection Component]
+    J --> K[Display Response]
+    K --> L[Status Code]
+    K --> M[Response Headers]
+    K --> N[Response Body]
+    L & M & N --> O[Data Transformation]
+    O --> P[DataTransform Component]
+    P --> Q[Transform Function]
+    Q --> R[Transformed Result]
+    R --> S[End]
+```
+
+## Installation
+
+```bash
+npm install vue-api-request-builder
+# or
+yarn add vue-api-request-builder
+# or
+pnpm add vue-api-request-builder
+```
+
+## Usage
+
+### Basic Usage
+
+```vue
+<template>
+  <div class="app-container">
+    <RequestForm v-model="requestSchema" @update:modelValue="handleSchemaChange" />
+    <ResponseSection v-model="requestSchema" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { RequestForm, ResponseSection, type RequestSchema, defaultRequestSchema } from 'vue-api-request-builder';
+
+const requestSchema = ref<RequestSchema>(defaultRequestSchema);
+
+const handleSchemaChange = (newSchema: RequestSchema) => {
+  console.log("Schema changed:", newSchema);
+};
+</script>
+```
+
+## Components
+
+### RequestForm
+
+The main component for building API requests. It provides a form interface for configuring:
+
+#### Props
+- `modelValue` (RequestSchema): The request schema object (v-model)
+
+#### Events
+- `update:modelValue`: Emitted when the schema changes
+
+#### Features
+- HTTP method selection (GET, POST, PUT, DELETE, OPTIONS)
+- URL configuration with base URL and path
+- URL parameters management
+- Authentication options:
+  - None
+  - Basic Auth
+  - Bearer Token
+- Custom headers
+- Request body support for:
+  - JSON
+  - Form Data
+  - Raw text
+- Live preview of request URL and body
+
+### ResponseSection
+
+Displays the response from the API request.
+
+#### Props
+- `modelValue` (RequestSchema): The request schema object (v-model)
+
+#### Features
+- Request method selection (XMLHttpRequest/Fetch)
+- Response display:
+  - Status code with color coding
+  - Response time
+  - Response headers
+  - Response body with formatting
+- Error handling and display
+
+### DataTransform
+
+Component for configuring and executing data transformation functions.
+
+#### Props
+- `modelValue` (string): The transformation function string (v-model)
+
+#### Features
+- Code editor interface
+- JavaScript function support
+- Real-time syntax checking
+- Function execution preview
+
+### KeyValueInput
+
+A reusable component for managing key-value pairs.
+
+#### Props
+- `modelValue` (KeyValuePair[]): Array of key-value pairs (v-model)
+- `addButtonText` (string): Text for the add button
+- `showPreview` (boolean): Whether to show the preview
+- `previewText` (string): Text to show in preview
+
+#### Events
+- `update:modelValue`: Emitted when the key-value pairs change
+
+## Types
+
+### RequestSchema
+
+```typescript
+interface RequestSchema {
+  method: 'GET' | 'POST' | 'PUT' | 'DELETE' | 'OPTIONS';
+  url: string;
+  path: string;
+  auth: AuthConfig;
+  params: KeyValuePair[];
+  headers: KeyValuePair[];
+  body: RequestBody;
+}
+```
+
+### AuthConfig
+
+```typescript
+interface AuthConfig {
+  type: 'none' | 'Basic' | 'Bearer';
+  username?: string;
+  password?: string;
+  token?: string;
+}
+```
+
+### RequestBody
+
+```typescript
+interface RequestBody {
+  type: 'application/json' | 'multipart/form-data' | 'text/plain';
+  json?: string;
+  formData?: KeyValuePair[];
+  raw?: string;
+}
+```
+
+### ResponseData
+
+```typescript
+interface ResponseData {
+  status: string;
+  headers: Record<string, string>;
+  body: string;
+  timing?: number;
+}
+```
+
+## Utilities
+
+### executeRequest
+
+```typescript
+function executeRequest(
+  schema: RequestSchema,
+  method: 'fetch' | 'xhr' = 'xhr'
+): Promise<ResponseData>
+```
+
+Executes the API request using either Fetch API or XMLHttpRequest.
+
+### executeTransformFunction
+
+```typescript
+function executeTransformFunction(
+  transformFunctionString: string,
+  data: any
+): any
+```
+
+Executes a data transformation function to convert input data into the desired format.
+
+## Dependencies
+
+This package requires:
+- Vue 3.x
+- Ant Design Vue 4.x
+
+## License
+
+MIT

package/dist/index.css

@@ -1 +1 @@
-*,:before,:after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / .5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: }::backdrop{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / .5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: }.absolute{position:absolute}.relative{position:relative}.inset-0{top:0;right:0;bottom:0;left:0}.z-10{z-index:10}[rows~="4"]{grid-template-rows:repeat(4,minmax(0,1fr))}[rows~="5"]{grid-template-rows:repeat(5,minmax(0,1fr))}[rows~="6"]{grid-template-rows:repeat(6,minmax(0,1fr))}.float-left{float:left}.\!m-0{margin:0!important}.m-0{margin:0}.mb-1{margin-bottom:.25rem}.ms{margin-inline-start:1rem}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.h-6{height:1.5rem}.h-full{height:100%}.max-w-50\%{max-width:50%}.min-w-full{min-width:100%}.w-16{width:4rem}.w-40{width:10rem}.w-full{width:100%}.flex{display:flex}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.table{display:table}.resize-none{resize:none}.items-center{align-items:center}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.overflow-hidden{overflow:hidden}.overflow-x-hidden{overflow-x:hidden}.overflow-y-auto{overflow-y:auto}.whitespace-pre{white-space:pre}.border{border-width:1px}.border-gray-300{--un-border-opacity:1;border-color:rgb(209 213 219 / var(--un-border-opacity))}.border-none{border-style:none}.border-solid{border-style:solid}.bg-transparent{background-color:transparent}.p-0{padding:0}.text-sm{font-size:.875rem;line-height:1.25rem}.text-size-\$vp-code-font-size{font-size:var(--vp-code-font-size)}.text-transparent{color:transparent}.font-bold{font-weight:700}.line-height-\$vp-code-line-height{line-height:var(--vp-code-line-height)}.font-\$vp-font-family-mono{font-family:var(--vp-font-family-mono)}.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.tab-4{-moz-tab-size:4;-o-tab-size:4;tab-size:4}.caret-gray{--un-caret-opacity:1;caret-color:rgb(156 163 175 / var(--un-caret-opacity))}.shadow{--un-shadow:var(--un-shadow-inset) 0 1px 3px 0 var(--un-shadow-color, rgb(0 0 0 / .1)),var(--un-shadow-inset) 0 1px 2px -1px var(--un-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--un-ring-offset-shadow),var(--un-ring-shadow),var(--un-shadow)}.outline{outline-style:solid}.outline-none{outline:2px solid transparent;outline-offset:2px}.transition-none\!{transition:none!important}.key-value-input[data-v-eef3e490]{width:100%}.empty-state[data-v-eef3e490]{color:#999;text-align:center;padding:8px 0}.key-value-input[data-v-eef3e490] .ant-typography pre{background-color:#f5f5f5;padding:4px 8px;border-radius:4px;margin:0;width:100%;overflow-x:auto}.key-value-input[data-v-eef3e490] .ant-space-item{flex:1}.key-value-input[data-v-eef3e490] .ant-space-item:first-child{flex:0 0 100px}.key-value-input[data-v-eef3e490] .ant-space-item:nth-child(2){flex:0 0 200px}.key-value-input[data-v-eef3e490] .ant-list-item{padding:4px 0}[data-v-eef3e490] .ant-typography pre{background-color:#f5f5f5;padding:8px;border-radius:4px;margin:0;width:100%;overflow-x:auto;max-height:60px;font-size:12px;line-height:1.5}.request-form[data-v-48c52b42]{margin:0;padding:0}.request-form[data-v-48c52b42] *{font-size:.9rem}.form-section[data-v-48c52b42]{margin-bottom:8px;width:100%}[data-v-48c52b42] .ant-card-head{background-color:#fafafa}[data-v-48c52b42] .ant-card-head-title{font-weight:500;padding:4px 0}[data-v-48c52b42] .ant-card-body{padding:8px 12px}[data-v-48c52b42] .ant-space{width:100%;display:flex;gap:8px;align-items:center}pre[data-v-48c52b42]{background-color:#f5f5f5;padding:8px;border-radius:4px;margin:0;width:100%;overflow-x:auto}.form-section[data-v-1dd2b288]{margin-bottom:8px}.response-section[data-v-1dd2b288]{margin-bottom:16px}.section-title[data-v-1dd2b288]{font-size:14px;font-weight:500;color:#1f1f1f;margin-bottom:8px;padding-left:4px;border-left:3px solid #1890ff}[data-v-1dd2b288] .ant-card-head{background-color:#fafafa}[data-v-1dd2b288] .ant-card-head-title{font-weight:500;padding:4px 0}[data-v-1dd2b288] .ant-card-body{padding:8px 12px}[data-v-1dd2b288] .ant-descriptions-item-label{font-weight:500}.shiki{margin:0}.mini-playground select{background:transparent;color:inherit;min-width:8em;padding:0!important;position:relative}.mini-playground select:focus{outline:none}.mini-playground select:before{content:"";position:absolute;width:1em;height:1em;background:red}.monaco-editor-container[data-v-d1a39038]{width:100%;height:calc(100% - 32px)}.data-transform-container[data-v-d1a39038]{color:#fff;font-family:Consolas,Courier New,monospace;font-size:14px}.function-container[data-v-d1a39038]{line-height:16px;background:var(--vscode-editor-background)}.function-name[data-v-d1a39038]{color:#569cd6}.yellow[data-v-d1a39038]{color:gold}
+*,:before,:after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / .5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: }::backdrop{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / .5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: }.absolute{position:absolute}.relative{position:relative}.inset-0{top:0;right:0;bottom:0;left:0}.z-10{z-index:10}[rows~="4"]{grid-template-rows:repeat(4,minmax(0,1fr))}[rows~="5"]{grid-template-rows:repeat(5,minmax(0,1fr))}[rows~="6"]{grid-template-rows:repeat(6,minmax(0,1fr))}.float-left{float:left}.\!m-0{margin:0!important}.m-0{margin:0}.mb-1{margin-bottom:.25rem}.ms{margin-inline-start:1rem}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.h-6{height:1.5rem}.h-full{height:100%}.max-w-50\%{max-width:50%}.min-w-full{min-width:100%}.w-16{width:4rem}.w-40{width:10rem}.w-full{width:100%}.flex{display:flex}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.table{display:table}.resize-none{resize:none}.items-center{align-items:center}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.overflow-hidden{overflow:hidden}.overflow-x-hidden{overflow-x:hidden}.overflow-y-auto{overflow-y:auto}.whitespace-pre{white-space:pre}.border{border-width:1px}.border-gray-300{--un-border-opacity:1;border-color:rgb(209 213 219 / var(--un-border-opacity))}.border-none{border-style:none}.border-solid{border-style:solid}.bg-transparent{background-color:transparent}.p-0{padding:0}.text-sm{font-size:.875rem;line-height:1.25rem}.text-size-\$vp-code-font-size{font-size:var(--vp-code-font-size)}.text-transparent{color:transparent}.font-bold{font-weight:700}.line-height-\$vp-code-line-height{line-height:var(--vp-code-line-height)}.font-\$vp-font-family-mono{font-family:var(--vp-font-family-mono)}.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.tab-4{-moz-tab-size:4;-o-tab-size:4;tab-size:4}.caret-gray{--un-caret-opacity:1;caret-color:rgb(156 163 175 / var(--un-caret-opacity))}.shadow{--un-shadow:var(--un-shadow-inset) 0 1px 3px 0 var(--un-shadow-color, rgb(0 0 0 / .1)),var(--un-shadow-inset) 0 1px 2px -1px var(--un-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--un-ring-offset-shadow),var(--un-ring-shadow),var(--un-shadow)}.outline{outline-style:solid}.outline-none{outline:2px solid transparent;outline-offset:2px}.transition-none\!{transition:none!important}.key-value-input[data-v-eef3e490]{width:100%}.empty-state[data-v-eef3e490]{color:#999;text-align:center;padding:8px 0}.key-value-input[data-v-eef3e490] .ant-typography pre{background-color:#f5f5f5;padding:4px 8px;border-radius:4px;margin:0;width:100%;overflow-x:auto}.key-value-input[data-v-eef3e490] .ant-space-item{flex:1}.key-value-input[data-v-eef3e490] .ant-space-item:first-child{flex:0 0 100px}.key-value-input[data-v-eef3e490] .ant-space-item:nth-child(2){flex:0 0 200px}.key-value-input[data-v-eef3e490] .ant-list-item{padding:4px 0}[data-v-eef3e490] .ant-typography pre{background-color:#f5f5f5;padding:8px;border-radius:4px;margin:0;width:100%;overflow-x:auto;max-height:60px;font-size:12px;line-height:1.5}.request-form[data-v-398ba576]{margin:0;padding:0}.request-form[data-v-398ba576] *{font-size:.9rem}.form-section[data-v-398ba576]{margin-bottom:8px;width:100%}[data-v-398ba576] .ant-card-head{background-color:#fafafa}[data-v-398ba576] .ant-card-head-title{font-weight:500;padding:4px 0}[data-v-398ba576] .ant-card-body{padding:8px 12px}[data-v-398ba576] .ant-space{width:100%;display:flex;gap:8px;align-items:center}pre[data-v-398ba576]{background-color:#f5f5f5;padding:8px;border-radius:4px;margin:0;width:100%;overflow-x:auto}.form-section[data-v-1dd2b288]{margin-bottom:8px}.response-section[data-v-1dd2b288]{margin-bottom:16px}.section-title[data-v-1dd2b288]{font-size:14px;font-weight:500;color:#1f1f1f;margin-bottom:8px;padding-left:4px;border-left:3px solid #1890ff}[data-v-1dd2b288] .ant-card-head{background-color:#fafafa}[data-v-1dd2b288] .ant-card-head-title{font-weight:500;padding:4px 0}[data-v-1dd2b288] .ant-card-body{padding:8px 12px}[data-v-1dd2b288] .ant-descriptions-item-label{font-weight:500}.shiki{margin:0}.mini-playground select{background:transparent;color:inherit;min-width:8em;padding:0!important;position:relative}.mini-playground select:focus{outline:none}.mini-playground select:before{content:"";position:absolute;width:1em;height:1em;background:red}.monaco-editor-container[data-v-d1a39038]{width:100%;height:calc(100% - 32px)}.data-transform-container[data-v-d1a39038]{color:#fff;font-family:Consolas,Courier New,monospace;font-size:14px}.function-container[data-v-d1a39038]{line-height:16px;background:var(--vscode-editor-background)}.function-name[data-v-d1a39038]{color:#569cd6}.yellow[data-v-d1a39038]{color:gold}