vue-api-request-builder 0.2.1 → 0.2.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -21
- package/dist/index.css +1 -1
- package/dist/index.es.js +27 -26
- package/dist/index.umd.js +1 -1
- package/package.json +4 -2
package/README.md
CHANGED
|
@@ -19,26 +19,6 @@ pnpm add vue-api-request-builder
|
|
|
19
19
|
|
|
20
20
|
### Basic Usage
|
|
21
21
|
|
|
22
|
-
```vue
|
|
23
|
-
<template>
|
|
24
|
-
<RequestForm v-model="requestSchema" @update:modelValue="handleSchemaChange" />
|
|
25
|
-
<ResponseSection v-model="requestSchema" />
|
|
26
|
-
</template>
|
|
27
|
-
|
|
28
|
-
<script setup lang="ts">
|
|
29
|
-
import { ref } from 'vue';
|
|
30
|
-
import { RequestForm, ResponseSection, type RequestSchema, defaultRequestSchema } from 'vue-api-request-builder';
|
|
31
|
-
|
|
32
|
-
const requestSchema = ref<RequestSchema>(defaultRequestSchema);
|
|
33
|
-
|
|
34
|
-
const handleSchemaChange = (newSchema: RequestSchema) => {
|
|
35
|
-
console.log("Schema changed:", newSchema);
|
|
36
|
-
};
|
|
37
|
-
</script>
|
|
38
|
-
```
|
|
39
|
-
|
|
40
|
-
### Advanced Usage with Preview
|
|
41
|
-
|
|
42
22
|
```vue
|
|
43
23
|
<template>
|
|
44
24
|
<div class="app-container">
|
|
@@ -48,7 +28,7 @@ const handleSchemaChange = (newSchema: RequestSchema) => {
|
|
|
48
28
|
</template>
|
|
49
29
|
|
|
50
30
|
<script setup lang="ts">
|
|
51
|
-
import { ref
|
|
31
|
+
import { ref } from 'vue';
|
|
52
32
|
import { RequestForm, ResponseSection, type RequestSchema, defaultRequestSchema } from 'vue-api-request-builder';
|
|
53
33
|
|
|
54
34
|
const requestSchema = ref<RequestSchema>(defaultRequestSchema);
|
package/dist/index.css
CHANGED
|
@@ -1 +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: }[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))}.\!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-
|
|
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: }[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))}.\!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%}.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}.items-center{align-items:center}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.border{border-width:1px}.border-gray-300{--un-border-opacity:1;border-color:rgb(209 213 219 / var(--un-border-opacity))}.border-solid{border-style:solid}.text-sm{font-size:.875rem;line-height:1.25rem}.font-bold{font-weight:700}.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-c9f65487]{margin:0;padding:0}.request-form[data-v-c9f65487] *{font-size:.9rem}.form-section[data-v-c9f65487]{margin-bottom:8px;width:100%}[data-v-c9f65487] .ant-card-head{background-color:#fafafa}[data-v-c9f65487] .ant-card-head-title{font-weight:500;padding:4px 0}[data-v-c9f65487] .ant-card-body{padding:8px 12px}[data-v-c9f65487] .ant-space{width:100%;display:flex;gap:8px;align-items:center}pre[data-v-c9f65487]{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}
|
package/dist/index.es.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { defineComponent as H, ref as
|
|
1
|
+
import { defineComponent as H, ref as x, watch as C, resolveComponent as c, createElementBlock as $, openBlock as _, createElementVNode as p, createCommentVNode as R, createBlock as O, createVNode as s, withCtx as r, createTextVNode as b, toDisplayString as z, Fragment as F, renderList as K, computed as J } from "vue";
|
|
2
2
|
const le = { class: "key-value-input flex flex-col gap-1" }, se = { class: "flex gap-2" }, ne = {
|
|
3
3
|
key: 0,
|
|
4
4
|
class: "flex flex-col gap-1"
|
|
@@ -12,7 +12,7 @@ const le = { class: "key-value-input flex flex-col gap-1" }, se = { class: "flex
|
|
|
12
12
|
},
|
|
13
13
|
emits: ["update:modelValue"],
|
|
14
14
|
setup(a, { emit: g }) {
|
|
15
|
-
const d = a, o = g, n =
|
|
15
|
+
const d = a, o = g, n = x(d.modelValue);
|
|
16
16
|
C(
|
|
17
17
|
() => d.modelValue,
|
|
18
18
|
(u) => {
|
|
@@ -33,13 +33,13 @@ const le = { class: "key-value-input flex flex-col gap-1" }, se = { class: "flex
|
|
|
33
33
|
n.value = [];
|
|
34
34
|
};
|
|
35
35
|
return (u, t) => {
|
|
36
|
-
const v = c("a-button"),
|
|
36
|
+
const v = c("a-button"), w = c("a-popconfirm"), j = c("a-input"), B = c("a-typography-paragraph"), U = c("a-typography");
|
|
37
37
|
return _(), $("div", le, [
|
|
38
38
|
p("div", se, [
|
|
39
39
|
s(v, {
|
|
40
40
|
type: "primary",
|
|
41
41
|
onClick: y,
|
|
42
|
-
class: "w-
|
|
42
|
+
class: "w-full max-w-50%",
|
|
43
43
|
size: "small"
|
|
44
44
|
}, {
|
|
45
45
|
default: r(() => [
|
|
@@ -47,7 +47,8 @@ const le = { class: "key-value-input flex flex-col gap-1" }, se = { class: "flex
|
|
|
47
47
|
]),
|
|
48
48
|
_: 1
|
|
49
49
|
}),
|
|
50
|
-
s(
|
|
50
|
+
s(w, {
|
|
51
|
+
class: "w-full max-w-50%",
|
|
51
52
|
title: "确认清空",
|
|
52
53
|
description: "确定要清空所有参数吗？",
|
|
53
54
|
"ok-text": "确认",
|
|
@@ -58,8 +59,8 @@ const le = { class: "key-value-input flex flex-col gap-1" }, se = { class: "flex
|
|
|
58
59
|
s(v, {
|
|
59
60
|
type: "primary",
|
|
60
61
|
danger: "",
|
|
61
|
-
class: "w-40 max-w-full",
|
|
62
62
|
size: "small",
|
|
63
|
+
class: "w-full",
|
|
63
64
|
disabled: n.value.length === 0
|
|
64
65
|
}, {
|
|
65
66
|
default: r(() => t[0] || (t[0] = [
|
|
@@ -128,7 +129,7 @@ const le = { class: "key-value-input flex flex-col gap-1" }, se = { class: "flex
|
|
|
128
129
|
for (const [o, n] of g)
|
|
129
130
|
d[o] = n;
|
|
130
131
|
return d;
|
|
131
|
-
}, L = /* @__PURE__ */ M(re, [["__scopeId", "data-v-
|
|
132
|
+
}, L = /* @__PURE__ */ M(re, [["__scopeId", "data-v-eef3e490"]]), de = {
|
|
132
133
|
method: "GET",
|
|
133
134
|
url: "https://yesno.wtf",
|
|
134
135
|
path: "/api",
|
|
@@ -146,14 +147,14 @@ const le = { class: "key-value-input flex flex-col gap-1" }, se = { class: "flex
|
|
|
146
147
|
}, ye = { class: "flex flex-row gap-1 h-6" }, _e = { class: "flex flex-row gap-1" }, be = {
|
|
147
148
|
key: 1,
|
|
148
149
|
class: "flex flex-col gap-1 mt-1"
|
|
149
|
-
},
|
|
150
|
+
}, we = { class: "flex flex-row gap-1 items-center" }, xe = /* @__PURE__ */ H({
|
|
150
151
|
__name: "RequestForm",
|
|
151
152
|
props: {
|
|
152
153
|
modelValue: { default: () => de }
|
|
153
154
|
},
|
|
154
155
|
emits: ["update:modelValue"],
|
|
155
156
|
setup(a, { emit: g }) {
|
|
156
|
-
const d = a, o = g, n =
|
|
157
|
+
const d = a, o = g, n = x(d.modelValue.method), y = x(d.modelValue.url), l = x(d.modelValue.auth.type), f = x(d.modelValue.path), u = x(d.modelValue.auth.username || ""), t = x(d.modelValue.auth.password || ""), v = x(d.modelValue.auth.token || ""), w = x(d.modelValue.params), j = x(d.modelValue.headers), B = x(d.modelValue.body.formData || []), U = x(d.modelValue.body.type), k = x(d.modelValue.body.json || ""), S = x(d.modelValue.body.raw || ""), h = x("");
|
|
157
158
|
function N(i, e) {
|
|
158
159
|
let T;
|
|
159
160
|
return function(...E) {
|
|
@@ -173,7 +174,7 @@ const le = { class: "key-value-input flex flex-col gap-1" }, se = { class: "flex
|
|
|
173
174
|
token: v.value
|
|
174
175
|
} : {}
|
|
175
176
|
},
|
|
176
|
-
params:
|
|
177
|
+
params: w.value,
|
|
177
178
|
headers: j.value,
|
|
178
179
|
body: {
|
|
179
180
|
type: U.value,
|
|
@@ -191,7 +192,7 @@ const le = { class: "key-value-input flex flex-col gap-1" }, se = { class: "flex
|
|
|
191
192
|
u,
|
|
192
193
|
t,
|
|
193
194
|
v,
|
|
194
|
-
|
|
195
|
+
w,
|
|
195
196
|
j,
|
|
196
197
|
U,
|
|
197
198
|
B,
|
|
@@ -206,12 +207,12 @@ const le = { class: "key-value-input flex flex-col gap-1" }, se = { class: "flex
|
|
|
206
207
|
() => d.modelValue,
|
|
207
208
|
(i) => {
|
|
208
209
|
const e = A();
|
|
209
|
-
JSON.stringify(i) !== JSON.stringify(e) && (n.value = i.method, y.value = i.url, f.value = i.path, l.value = i.auth.type, u.value = i.auth.username || "", t.value = i.auth.password || "", v.value = i.auth.token || "",
|
|
210
|
+
JSON.stringify(i) !== JSON.stringify(e) && (n.value = i.method, y.value = i.url, f.value = i.path, l.value = i.auth.type, u.value = i.auth.username || "", t.value = i.auth.password || "", v.value = i.auth.token || "", w.value = i.params, j.value = i.headers, U.value = i.body.type, B.value = i.body.formData || [], k.value = i.body.json || "", S.value = i.body.raw || "");
|
|
210
211
|
},
|
|
211
212
|
{ deep: !0 }
|
|
212
213
|
);
|
|
213
214
|
const X = J(() => {
|
|
214
|
-
const i =
|
|
215
|
+
const i = w.value.filter((e) => !!e.key).map((e) => e.key + "=" + encodeURIComponent(e.value)).join("&");
|
|
215
216
|
return i === "" ? "" : "?" + i;
|
|
216
217
|
}), Q = J(() => {
|
|
217
218
|
switch (U.value) {
|
|
@@ -249,7 +250,7 @@ ${T.value}\r
|
|
|
249
250
|
const T = new URLSearchParams(e.search), E = [];
|
|
250
251
|
T.forEach((V, D) => {
|
|
251
252
|
E.push({ key: D, value: V });
|
|
252
|
-
}),
|
|
253
|
+
}), w.value = E;
|
|
253
254
|
} catch (i) {
|
|
254
255
|
console.error("URL解析失败:", i);
|
|
255
256
|
}
|
|
@@ -344,8 +345,8 @@ ${T.value}\r
|
|
|
344
345
|
]),
|
|
345
346
|
p("div", fe, [
|
|
346
347
|
s(L, {
|
|
347
|
-
modelValue:
|
|
348
|
-
"onUpdate:modelValue": e[3] || (e[3] = (m) =>
|
|
348
|
+
modelValue: w.value,
|
|
349
|
+
"onUpdate:modelValue": e[3] || (e[3] = (m) => w.value = m),
|
|
349
350
|
"add-button-text": "添加参数",
|
|
350
351
|
"show-preview": !0,
|
|
351
352
|
"preview-text": y.value + f.value + X.value
|
|
@@ -407,7 +408,7 @@ ${T.value}\r
|
|
|
407
408
|
])
|
|
408
409
|
])) : R("", !0),
|
|
409
410
|
l.value === "Bearer" ? (_(), $("div", be, [
|
|
410
|
-
p("div",
|
|
411
|
+
p("div", we, [
|
|
411
412
|
e[24] || (e[24] = p("p", { class: "m-0 w-16 h-full" }, "Token", -1)),
|
|
412
413
|
s(I, {
|
|
413
414
|
value: v.value,
|
|
@@ -513,7 +514,7 @@ ${T.value}\r
|
|
|
513
514
|
]);
|
|
514
515
|
};
|
|
515
516
|
}
|
|
516
|
-
}), Ee = /* @__PURE__ */ M(
|
|
517
|
+
}), Ee = /* @__PURE__ */ M(xe, [["__scopeId", "data-v-c9f65487"]]);
|
|
517
518
|
async function ge(a, g = "xhr") {
|
|
518
519
|
return g === "fetch" ? ke(a) : he(a);
|
|
519
520
|
}
|
|
@@ -549,8 +550,8 @@ async function ke(a) {
|
|
|
549
550
|
}
|
|
550
551
|
try {
|
|
551
552
|
const l = await fetch(d, n), f = {};
|
|
552
|
-
l.headers.forEach((v,
|
|
553
|
-
f[
|
|
553
|
+
l.headers.forEach((v, w) => {
|
|
554
|
+
f[w.toLowerCase()] = v;
|
|
554
555
|
});
|
|
555
556
|
let u = "";
|
|
556
557
|
if ((f["content-type"] || "").startsWith("application/json"))
|
|
@@ -585,8 +586,8 @@ async function he(a) {
|
|
|
585
586
|
break;
|
|
586
587
|
case "multipart/form-data":
|
|
587
588
|
const v = new FormData();
|
|
588
|
-
(u = a.body.formData) == null || u.forEach((
|
|
589
|
-
|
|
589
|
+
(u = a.body.formData) == null || u.forEach((w) => {
|
|
590
|
+
w.key && v.append(w.key, w.value);
|
|
590
591
|
}), t = v;
|
|
591
592
|
break;
|
|
592
593
|
case "text/plain":
|
|
@@ -633,12 +634,12 @@ const Te = { style: { display: "flex", "align-items": "center", gap: "8px", "mar
|
|
|
633
634
|
modelValue: {}
|
|
634
635
|
},
|
|
635
636
|
setup(a) {
|
|
636
|
-
const g = a, d =
|
|
637
|
+
const g = a, d = x("xhr"), o = x({
|
|
637
638
|
status: "",
|
|
638
639
|
headers: {},
|
|
639
640
|
body: "",
|
|
640
641
|
timing: 0
|
|
641
|
-
}), n =
|
|
642
|
+
}), n = x(""), y = (u) => {
|
|
642
643
|
const t = Number(u);
|
|
643
644
|
return t >= 200 && t < 300 ? "success" : t >= 300 && t < 400 ? "warning" : t >= 400 && t < 500 || t >= 500 ? "error" : "default";
|
|
644
645
|
}, l = (u) => u instanceof Error ? u.message : "请求失败", f = async () => {
|
|
@@ -656,7 +657,7 @@ const Te = { style: { display: "flex", "align-items": "center", gap: "8px", "mar
|
|
|
656
657
|
}
|
|
657
658
|
};
|
|
658
659
|
return (u, t) => {
|
|
659
|
-
const v = c("a-radio-button"),
|
|
660
|
+
const v = c("a-radio-button"), w = c("a-radio-group"), j = c("a-button"), B = c("a-alert"), U = c("a-tag"), k = c("a-textarea"), S = c("a-card");
|
|
660
661
|
return _(), O(S, {
|
|
661
662
|
title: "响应",
|
|
662
663
|
class: "form-section",
|
|
@@ -664,7 +665,7 @@ const Te = { style: { display: "flex", "align-items": "center", gap: "8px", "mar
|
|
|
664
665
|
}, {
|
|
665
666
|
default: r(() => [
|
|
666
667
|
p("div", Te, [
|
|
667
|
-
s(
|
|
668
|
+
s(w, {
|
|
668
669
|
value: d.value,
|
|
669
670
|
"onUpdate:value": t[0] || (t[0] = (h) => d.value = h),
|
|
670
671
|
"button-style": "solid",
|
package/dist/index.umd.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
(function(_,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(_=typeof globalThis<"u"?globalThis:_||self,e(_.ApiRequestBuilder={},_.Vue))})(this,function(_,e){"use strict";const P={class:"key-value-input flex flex-col gap-1"},v={class:"flex gap-2"},I={key:0,class:"flex flex-col gap-1"},L={class:"flex w-full gap-1 items-center"},J=e.defineComponent({__name:"KeyValueInput",props:{modelValue:{},addButtonText:{default:"添加参数"},showPreview:{type:Boolean,default:!1},previewText:{default:""}},emits:["update:modelValue"],setup(a,{emit:y}){const d=a,l=y,r=e.ref(d.modelValue);e.watch(()=>d.modelValue,s=>{r.value=s}),e.watch(r,s=>{l("update:modelValue",s)},{deep:!0});const u=()=>{r.value.push({key:"",value:""})},n=s=>{r.value.splice(s,1)},m=()=>{r.value=[]};return(s,o)=>{const p=e.resolveComponent("a-button"),f=e.resolveComponent("a-popconfirm"),h=e.resolveComponent("a-input"),C=e.resolveComponent("a-typography-paragraph"),N=e.resolveComponent("a-typography");return e.openBlock(),e.createElementBlock("div",P,[e.createElementVNode("div",v,[e.createVNode(p,{type:"primary",onClick:u,class:"w-
|
|
1
|
+
(function(_,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(_=typeof globalThis<"u"?globalThis:_||self,e(_.ApiRequestBuilder={},_.Vue))})(this,function(_,e){"use strict";const P={class:"key-value-input flex flex-col gap-1"},v={class:"flex gap-2"},I={key:0,class:"flex flex-col gap-1"},L={class:"flex w-full gap-1 items-center"},J=e.defineComponent({__name:"KeyValueInput",props:{modelValue:{},addButtonText:{default:"添加参数"},showPreview:{type:Boolean,default:!1},previewText:{default:""}},emits:["update:modelValue"],setup(a,{emit:y}){const d=a,l=y,r=e.ref(d.modelValue);e.watch(()=>d.modelValue,s=>{r.value=s}),e.watch(r,s=>{l("update:modelValue",s)},{deep:!0});const u=()=>{r.value.push({key:"",value:""})},n=s=>{r.value.splice(s,1)},m=()=>{r.value=[]};return(s,o)=>{const p=e.resolveComponent("a-button"),f=e.resolveComponent("a-popconfirm"),h=e.resolveComponent("a-input"),C=e.resolveComponent("a-typography-paragraph"),N=e.resolveComponent("a-typography");return e.openBlock(),e.createElementBlock("div",P,[e.createElementVNode("div",v,[e.createVNode(p,{type:"primary",onClick:u,class:"w-full max-w-50%",size:"small"},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(s.addButtonText),1)]),_:1}),e.createVNode(f,{class:"w-full max-w-50%",title:"确认清空",description:"确定要清空所有参数吗？","ok-text":"确认","cancel-text":"取消",onConfirm:m},{default:e.withCtx(()=>[e.createVNode(p,{type:"primary",danger:"",size:"small",class:"w-full",disabled:r.value.length===0},{default:e.withCtx(()=>o[0]||(o[0]=[e.createTextVNode(" 清空 ")])),_:1},8,["disabled"])]),_:1})]),r.value.length>0?(e.openBlock(),e.createElementBlock("div",I,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(r.value,(V,k)=>(e.openBlock(),e.createElementBlock("div",{key:k,class:"flex"},[e.createElementVNode("div",L,[e.createVNode(p,{type:"primary",danger:"",onClick:x=>n(k),class:"w-16",size:"small"},{default:e.withCtx(()=>o[1]||(o[1]=[e.createTextVNode(" 删除 ")])),_:2},1032,["onClick"]),e.createVNode(h,{value:V.key,"onUpdate:value":x=>V.key=x,placeholder:"键",style:{width:"60%"},size:"small"},null,8,["value","onUpdate:value"]),e.createVNode(h,{value:V.value,"onUpdate:value":x=>V.value=x,placeholder:"值",style:{width:"100%"},size:"small"},null,8,["value","onUpdate:value"])])]))),128))])):e.createCommentVNode("",!0),s.showPreview?(e.openBlock(),e.createBlock(N,{key:1,class:"m-0"},{default:e.withCtx(()=>[e.createVNode(C,{class:"!m-0"},{default:e.withCtx(()=>[e.createElementVNode("pre",null,e.toDisplayString(s.previewText),1)]),_:1})]),_:1})):e.createCommentVNode("",!0)])}}}),S=(a,y)=>{const d=a.__vccOpts||a;for(const[l,r]of y)d[l]=r;return d},E=S(J,[["__scopeId","data-v-eef3e490"]]),j={method:"GET",url:"https://yesno.wtf",path:"/api",auth:{type:"none"},params:[],headers:[],body:{type:"application/json"}},F={class:"request-form"},H={class:"flex flex-col gap-1"},M={class:"flex flex-row gap-1"},A={class:"flex flex-row gap-1"},K={class:"mt-1"},G={key:0,class:"flex flex-col gap-1 mt-2"},W={class:"flex flex-row gap-1 h-6"},X={class:"flex flex-row gap-1"},Q={key:1,class:"flex flex-col gap-1 mt-1"},Y={class:"flex flex-row gap-1 items-center"},q=S(e.defineComponent({__name:"RequestForm",props:{modelValue:{default:()=>j}},emits:["update:modelValue"],setup(a,{emit:y}){const d=a,l=y,r=e.ref(d.modelValue.method),u=e.ref(d.modelValue.url),n=e.ref(d.modelValue.auth.type),m=e.ref(d.modelValue.path),s=e.ref(d.modelValue.auth.username||""),o=e.ref(d.modelValue.auth.password||""),p=e.ref(d.modelValue.auth.token||""),f=e.ref(d.modelValue.params),h=e.ref(d.modelValue.headers),C=e.ref(d.modelValue.body.formData||[]),N=e.ref(d.modelValue.body.type),V=e.ref(d.modelValue.body.json||""),k=e.ref(d.modelValue.body.raw||""),x=e.ref("");function U(i,t){let w;return function(...g){clearTimeout(w),w=setTimeout(()=>i.apply(this,g),t)}}const z=()=>({method:r.value,url:u.value,path:m.value,auth:{type:n.value,...n.value==="Basic"?{username:s.value,password:o.value}:n.value==="Bearer"?{token:p.value}:{}},params:f.value,headers:h.value,body:{type:N.value,...N.value==="application/json"?{json:V.value}:N.value==="multipart/form-data"?{formData:C.value}:{raw:k.value}}}),pe=U(()=>{l("update:modelValue",z())},100);e.watch([r,u,m,n,s,o,p,f,h,N,C,V,k],()=>{pe()},{deep:!0}),e.watch(()=>d.modelValue,i=>{const t=z();JSON.stringify(i)!==JSON.stringify(t)&&(r.value=i.method,u.value=i.url,m.value=i.path,n.value=i.auth.type,s.value=i.auth.username||"",o.value=i.auth.password||"",p.value=i.auth.token||"",f.value=i.params,h.value=i.headers,N.value=i.body.type,C.value=i.body.formData||[],V.value=i.body.json||"",k.value=i.body.raw||"")},{deep:!0});const ce=e.computed(()=>{const i=f.value.filter(t=>!!t.key).map(t=>t.key+"="+encodeURIComponent(t.value)).join("&");return i===""?"":"?"+i}),me=e.computed(()=>{switch(N.value){case"application/json":try{return V.value?JSON.stringify(JSON.parse(V.value),null,2):"-空-"}catch{return"Invalid JSON"}case"multipart/form-data":const i="----WebKitFormBoundaryPreview";return C.value.filter(w=>!!w.key).map(w=>`--${i}\r
|
|
2
2
|
Content-Disposition: form-data; name="${w.key}"\r
|
|
3
3
|
\r
|
|
4
4
|
${w.value}\r
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "vue-api-request-builder",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.2",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "dist/index.umd.js",
|
|
6
6
|
"module": "dist/index.es.js",
|
|
@@ -10,6 +10,8 @@
|
|
|
10
10
|
],
|
|
11
11
|
"scripts": {
|
|
12
12
|
"dev": "vite",
|
|
13
|
+
"test": "vite --config vite.test.config.ts",
|
|
14
|
+
"build:all": "npm run build && npm run build:static",
|
|
13
15
|
"build": "vue-tsc -b && vite build --config vite.lib.config.ts",
|
|
14
16
|
"build:static": "vue-tsc -b && vite build",
|
|
15
17
|
"preview": "vite preview"
|
|
@@ -21,7 +23,7 @@
|
|
|
21
23
|
"dependencies": {
|
|
22
24
|
"ant-design-vue": "4.x",
|
|
23
25
|
"vue": "^3.5.13",
|
|
24
|
-
"vue-api-request-builder": "^0.2.
|
|
26
|
+
"vue-api-request-builder": "^0.2.1"
|
|
25
27
|
},
|
|
26
28
|
"devDependencies": {
|
|
27
29
|
"@types/node": "^20.0.0",
|