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