@scalar/api-client
Version:
the open source API testing client
183 lines (182 loc) • 6.84 kB
JavaScript
import { defineComponent as O, ref as D, computed as f, watch as $, createBlock as b, openBlock as a, unref as s, withCtx as u, createElementBlock as c, Fragment as m, createElementVNode as h, createCommentVNode as j, createVNode as v, createTextVNode as i, toDisplayString as I, renderSlot as M } from "vue";
import { useLoadingState as _, ScalarButton as P, ScalarCodeBlock as z, ScalarIcon as J, ScalarTooltip as Y } from "@scalar/components";
import { isLocalUrl as q } from "@scalar/helpers/url/is-local-url";
import { useToasts as G } from "@scalar/use-toasts";
import { createWorkspaceStore as H } from "@scalar/workspace-store/client";
import { useRouter as K } from "vue-router";
import { getOpenApiDocumentDetails as Q } from "../helpers/get-openapi-document-details.js";
import { getPostmanDocumentDetails as X } from "../helpers/get-postman-document-details.js";
import { importDocumentToWorkspace as Z } from "../helpers/import-document-to-workspace.js";
import { isPostmanCollection as ee } from "../helpers/is-postman-collection.js";
import { loadDocumentFromSource as te } from "../helpers/load-document-from-source.js";
import { isUrl as oe } from "../../../helpers/is-url.js";
import ae from "./CommandActionForm.vue.js";
import le from "./CommandActionInput.vue.js";
import re from "./WatchModeToggle.vue.js";
import { useFileDialog as ne } from "../../../../hooks/useFileDialog.js";
const se = { class: "flex justify-between" }, ie = { class: "flex w-full flex-row items-center justify-between gap-3" }, ue = {
name: "CommandPaletteImport"
}, Ue = /* @__PURE__ */ O({
...ue,
props: {
workspaceStore: {},
eventBus: {},
fileLoader: {}
},
emits: ["close", "back"],
setup(y, { emit: V }) {
const w = V, { toast: T } = G(), A = K(), d = _(), o = D(""), k = D(!1), n = f(() => oe(o.value)), R = f(
() => n.value && q(o.value)
), l = f(() => ee(o.value) ? X(o.value) : Q(o.value)), L = f(
() => l.value ? l.value.type : "json"
), B = f(() => !o.value.trim());
$(R, (t) => {
k.value = t;
});
const C = async (t) => {
console.error(t), T(t, "error"), await d.invalidate(), w("close");
}, x = async (t, e) => {
d.start();
const r = "drafts", p = H({
fileLoader: y.fileLoader,
meta: {
/** Ensure we use the active proxy to fetch documents */
"x-scalar-active-proxy": y.workspaceStore.workspace["x-scalar-active-proxy"]
}
}), g = e || (n.value ? "url" : "raw");
if (!await te(
p,
{ source: t, type: g },
r,
k.value
))
return C("Failed to import document");
const S = await Z({
workspaceStore: y.workspaceStore,
workspaceState: p.exportWorkspace(),
name: r
});
if (!S.ok)
return C(S.error);
await d.validate(), F(S.slug), w("close");
}, F = (t) => {
A.push({
name: "document.overview",
params: { documentSlug: t }
});
}, { open: N } = ne({
onChange: (t) => {
const [e] = t ?? [];
if (!e)
return;
d.start();
const r = async (g) => {
const U = g.target?.result;
await x(U, "raw");
}, p = new FileReader();
p.onload = r, p.readAsText(e);
},
multiple: !1,
accept: ".json,.yaml,.yml"
}), W = (t) => {
if (t.trim().toLowerCase().startsWith("curl"))
return y.eventBus.emit("ui:open:command-palette", {
action: "import-curl-command",
payload: {
inputValue: t
}
});
o.value = t;
}, E = (t) => {
w("back", t);
};
return (t, e) => (a(), b(ae, {
disabled: B.value,
loader: s(d),
onSubmit: e[2] || (e[2] = (r) => x(o.value))
}, {
options: u(() => [
h("div", ie, [
M(t.$slots, "fileUpload", { import: x }, () => [
v(s(P), {
class: "hover:bg-b-2 relative max-h-8 gap-1.5 p-2 text-xs",
variant: "outlined",
onClick: s(N)
}, {
default: u(() => [
e[5] || (e[5] = i(" JSON, or YAML File ", -1)),
v(s(J), {
class: "text-c-3",
icon: "Upload",
size: "md"
})
]),
_: 1
}, 8, ["onClick"])
]),
v(s(Y), {
content: n.value ? "Watch mode automatically updates the API client when the OpenAPI URL content changes, ensuring your client remains up-to-date." : "Watch mode is only available for URL imports. When enabled it automatically updates the API client when the OpenAPI URL content changes.",
placement: "bottom"
}, {
default: u(() => [
v(re, {
modelValue: k.value,
"onUpdate:modelValue": e[1] || (e[1] = (r) => k.value = r),
disabled: !n.value
}, null, 8, ["modelValue", "disabled"])
]),
_: 1
}, 8, ["content"])
])
]),
submit: u(() => [
e[6] || (e[6] = i(" Import ", -1)),
n.value ? (a(), c(m, { key: 0 }, [
i("from URL")
], 64)) : l.value && L.value ? (a(), c(m, { key: 1 }, [
l.value.title ? (a(), c(m, { key: 0 }, [
i(' "' + I(l.value.title) + '" ', 1)
], 64)) : (a(), c(m, { key: 1 }, [
i(I(l.value.version), 1)
], 64))
], 64)) : (a(), c(m, { key: 2 }, [
i("Collection")
], 64))
]),
default: u(() => [
!l.value || n.value ? (a(), b(le, {
key: 0,
modelValue: o.value,
placeholder: "OpenAPI/Swagger/Postman URL or cURL",
onDelete: E,
"onUpdate:modelValue": W
}, null, 8, ["modelValue"])) : (a(), c(m, { key: 1 }, [
h("div", se, [
e[4] || (e[4] = h("div", { class: "text-c-2 min-h-8 w-full py-2 pl-12 text-center text-xs" }, " Preview ", -1)),
v(s(P), {
class: "hover:bg-b-2 relative ml-auto max-h-8 gap-1.5 p-2 text-xs",
variant: "ghost",
onClick: e[0] || (e[0] = (r) => o.value = "")
}, {
default: u(() => [...e[3] || (e[3] = [
i(" Clear ", -1)
])]),
_: 1
})
]),
l.value && !n.value ? (a(), b(s(z), {
key: 0,
class: "bg-b-2 mt-1 max-h-[40dvh] rounded border px-2 py-1 text-sm",
content: o.value,
copy: !1,
lang: L.value
}, null, 8, ["content", "lang"])) : j("", !0)
], 64))
]),
_: 3
}, 8, ["disabled", "loader"]));
}
});
export {
Ue as default
};