@scalar/api-client
Version:
the open source API testing client
222 lines (221 loc) • 7.61 kB
JavaScript
import { defineComponent as U, ref as p, computed as v, watch as O, createBlock as h, openBlock as m, withCtx as o, createVNode as s, createTextVNode as H, createElementVNode as r, unref as n, normalizeClass as T, toDisplayString as w, createCommentVNode as L, createElementBlock as V, Fragment as _, renderList as I } from "vue";
import { ScalarListbox as W, ScalarButton as k, ScalarIcon as S, ScalarDropdown as y, ScalarDropdownItem as z } from "@scalar/components";
import { HTTP_METHODS as F } from "@scalar/helpers/http/http-methods";
import { useRouter as A } from "vue-router";
import B from "../../../blocks/operation-code-sample/components/HttpMethod.vue.js";
import G from "./CommandActionForm.vue.js";
import J from "./CommandActionInput.vue.js";
const K = { class: "flex flex-1 gap-1" }, Q = { class: "flex items-center gap-2" }, X = { class: "custom-scroll max-h-40" }, Y = { class: "custom-scroll max-h-40" }, Z = { class: "truncate" }, ee = {
name: "CommandPaletteRequest"
}, ce = /* @__PURE__ */ U({
...ee,
props: {
workspaceStore: {},
eventBus: {},
documentId: {},
tagId: {}
},
emits: ["close", "back"],
setup(u, { emit: N }) {
const g = N, $ = A(), b = p("/"), c = v(() => b.value.trim()), x = v(
() => Object.entries(u.workspaceStore.workspace.documents).map(
([e, a]) => ({
id: e,
label: a.info.title || e
})
)
), C = F.map((e) => ({
id: e,
label: e.toUpperCase(),
method: e
})), t = p(
u.documentId ? x.value.find((e) => e.id === u.documentId) : x.value[0] ?? void 0
), i = p(
C.find((e) => e.method === "get")
), f = v(() => {
if (!t.value)
return [];
const e = u.workspaceStore.workspace.documents[t.value.id];
return e ? [
{ id: "", label: "No Tag" },
...e.tags?.map((a) => ({
id: a.name,
label: a.name
})) ?? []
] : [];
}), d = p(
u.tagId ? f.value.find((e) => e.id === u.tagId) : void 0
);
O(t, () => {
d.value = f.value.find((e) => e.id === "");
});
const P = v(() => {
if (!t.value || !i.value || !c.value)
return !1;
const e = u.workspaceStore.workspace.documents[t.value.id], a = c.value.startsWith("/") ? c.value : `/${c.value}`;
return !!e?.paths?.[a]?.[i.value.method];
}), D = v(() => !!(!c.value || !t.value || !i.value || P.value)), j = (e) => {
e && (i.value = e);
}, q = (e) => {
e && (d.value = e);
}, E = () => {
D.value || !t.value || !i.value || !u.workspaceStore.workspace.documents[t.value.id] || (u.eventBus.emit("operation:create:operation", {
documentName: t.value.id,
path: c.value,
method: i.value.method,
operation: {
tags: d.value?.id ? [d.value.id] : void 0
},
callback: (a) => {
if (a) {
u.workspaceStore.buildSidebar(t.value?.id ?? "");
const l = c.value.startsWith("/") ? c.value : `/${c.value}`;
$.push({
name: "example",
params: {
documentSlug: t.value?.id,
pathEncoded: encodeURIComponent(l),
method: i.value?.method,
exampleName: "default"
}
});
}
}
}), g("close"));
}, R = (e) => {
g("back", e);
};
return (e, a) => (m(), h(G, {
disabled: D.value,
onSubmit: E
}, {
options: o(() => [
r("div", K, [
s(n(W), {
modelValue: t.value,
"onUpdate:modelValue": a[1] || (a[1] = (l) => t.value = l),
options: x.value
}, {
default: o(() => [
s(n(k), {
class: "hover:bg-b-2 max-h-8 w-[150px] min-w-[150px] justify-between gap-1 p-2 text-xs",
variant: "outlined"
}, {
default: o(() => [
r("span", {
class: T(t.value ? "text-c-1 truncate" : "text-c-3")
}, w(t.value ? t.value.label : "Select Document"), 3),
s(n(S), {
class: "text-c-3",
icon: "ChevronDown",
size: "md"
})
]),
_: 1
})
]),
_: 1
}, 8, ["modelValue", "options"]),
s(n(y), {
placement: "bottom",
resize: ""
}, {
items: o(() => [
r("div", X, [
(m(!0), V(_, null, I(n(C), (l) => (m(), h(n(z), {
key: l.id,
class: "flex h-7 w-full items-center justify-center px-1",
onClick: (M) => j(l)
}, {
default: o(() => [
s(B, {
method: l.method
}, null, 8, ["method"])
]),
_: 2
}, 1032, ["onClick"]))), 128))
])
]),
default: o(() => [
s(n(k), {
class: "hover:bg-b-2 max-h-8 w-[100px] min-w-[100px] justify-between gap-1 p-2 text-xs",
variant: "outlined"
}, {
default: o(() => [
r("div", Q, [
i.value ? (m(), h(B, {
key: 0,
method: i.value.method
}, null, 8, ["method"])) : L("", !0),
s(n(S), {
class: "text-c-3",
icon: "ChevronDown",
size: "md"
})
])
]),
_: 1
})
]),
_: 1
}),
s(n(y), {
placement: "bottom",
resize: ""
}, {
items: o(() => [
r("div", Y, [
(m(!0), V(_, null, I(f.value, (l) => (m(), h(n(z), {
key: l.id,
class: "flex h-7 w-full items-center px-1",
onClick: (M) => q(l)
}, {
default: o(() => [
r("span", Z, w(l.label), 1)
]),
_: 2
}, 1032, ["onClick"]))), 128))
])
]),
default: o(() => [
s(n(k), {
class: "hover:bg-b-2 max-h-8 w-full justify-between gap-1 p-2 text-xs",
disabled: !f.value.length,
variant: "outlined"
}, {
default: o(() => [
r("span", {
class: T(d.value ? "text-c-1 truncate" : "text-c-3")
}, w(d.value ? d.value.label : "Select Tag (Optional)"), 3),
s(n(S), {
class: "text-c-3",
icon: "ChevronDown",
size: "md"
})
]),
_: 1
}, 8, ["disabled"])
]),
_: 1
})
])
]),
submit: o(() => [...a[2] || (a[2] = [
H("Create Request", -1)
])]),
default: o(() => [
s(J, {
modelValue: b.value,
"onUpdate:modelValue": a[0] || (a[0] = (l) => b.value = l),
label: "Request Path",
placeholder: "/users",
onDelete: R
}, null, 8, ["modelValue"])
]),
_: 1
}, 8, ["disabled"]));
}
});
export {
ce as default
};