@scalar/api-client
Version:
the open source API testing client
209 lines (208 loc) • 8.87 kB
JavaScript
import { defineComponent as F, ref as R, computed as c, watch as y, onMounted as q, onUnmounted as B, createBlock as H, openBlock as l, unref as i, withCtx as W, createElementBlock as a, createCommentVNode as u, createElementVNode as e, normalizeClass as K, Fragment as g, createVNode as d, toDisplayString as G, createTextVNode as k } from "vue";
import { useModal as J, ScalarModal as Q, ScalarIcon as X } from "@scalar/components";
import { isLocalUrl as Y } from "@scalar/oas-utils/helpers";
import { normalize as Z } from "@scalar/openapi-parser";
import { getThemeStyles as ee, themeIds as te } from "@scalar/themes";
import { useColorMode as oe } from "@scalar/use-hooks/useColorMode";
import { useRouter as se } from "vue-router";
import ne from "../CommandPalette/WatchModeToggle.vue.js";
import { useUrlPrefetcher as re } from "./hooks/useUrlPrefetcher.js";
import ie from "./ImportNowButton.vue.js";
import le from "./IntegrationLogo.vue.js";
import ce from "./PrefetchError.vue.js";
import { getOpenApiVersion as I } from "./utils/get-openapi-version.js";
import { isDocument as L } from "./utils/is-document.js";
import { isUrl as M } from "./utils/is-url.js";
import ae from "./WorkspaceSelector.vue.js";
import { useActiveEntities as de } from "../../store/active-entities.js";
import { useWorkspace as me } from "../../store/store.js";
const ue = ["innerHTML"], fe = { class: "relative flex h-screen flex-col justify-center overflow-hidden px-6 md:px-0" }, pe = {
key: 0,
class: "mb-2 flex items-center justify-center p-1"
}, ve = { class: "size-10 rounded-xl" }, he = ["src"], xe = {
key: 2,
class: "text-md mb-2 line-clamp-1 text-center font-bold"
}, ye = { class: "z-10 inline-flex w-full flex-col items-center gap-2" }, ge = { class: "flex justify-center" }, _e = { class: "text-c-3 inline-flex items-center px-4 py-1 text-xs font-medium" }, be = {
key: 0,
class: "mt-5 overflow-hidden border-t pt-4 text-sm"
}, we = { class: "flex items-center justify-center" }, ke = { class: "flex flex-col items-center justify-center pb-8" }, Ie = { class: "flex flex-col items-center text-center" }, Le = { class: "mb-2 flex h-10 w-10 items-center justify-center rounded-[10px] border" }, Me = {
href: "https://scalar.com/download",
target: "_blank"
}, He = /* @__PURE__ */ F({
__name: "ImportCollectionModal",
props: {
source: {},
integration: {},
eventType: {}
},
emits: ["importFinished"],
setup(T, { emit: U }) {
const s = T, A = U, { activeWorkspace: f } = de(), { workspaceMutators: C, events: P } = me(), { prefetchResult: n, prefetchUrl: _, resetPrefetchResult: V } = re(), r = J(), p = R(!0);
P.hotKeys.on(() => r.hide());
const j = c(() => {
try {
return Z(
n.content || s.source || ""
);
} catch {
return;
}
}), D = c(() => j.value?.info?.title), b = c(
() => I(n.content || s.source || "")
), { darkLightMode: S } = oe(), { currentRoute: z } = se(), v = c(() => {
try {
const o = z.value.query, t = S.value === "dark" ? o.dark_logo : o.light_logo;
if (t)
return decodeURIComponent(t);
} catch {
}
return null;
});
y(
() => s.source,
async (o) => {
if (V(), M(o)) {
if (s.eventType && ["paste", "drop"].includes(s.eventType)) {
const { error: m } = await _(
o,
f.value?.proxyUrl
);
m ? r.hide() : r.show();
return;
}
_(o, f.value?.proxyUrl), r.show();
return;
}
o && L(o) && I(o) ? r.show() : r.hide();
}
);
const N = c(() => !!s.source && M(s.source)), O = c(() => !!s.source && L(s.source)), h = c(() => n.url && Y(n.url)), x = (o) => {
document.body.classList.remove("has-no-import-url"), (N.value || O.value) && r.open ? document.body.classList.add("has-import-url") : document.body.classList.remove("has-import-url");
}, $ = () => {
document.body.classList.remove("has-import-url"), document.body.classList.add("has-no-import-url");
};
y(
() => r.open,
(o) => {
o ? x() : $();
}
), y(
() => s.source,
() => {
x();
}
), q(() => {
x();
}), B(() => {
document.body.classList.remove("has-import-url"), document.body.classList.remove("has-no-import-url");
});
const w = c(
() => f.value && h.value && s.integration && `<style>${ee(s.integration)}</style>`
);
function E() {
const o = (m) => te.includes(m), t = s.integration && o(s.integration) ? s.integration : "default";
h.value && C.edit(
f.value?.uid,
"themeId",
t
), A("importFinished");
}
return (o, t) => (l(), H(i(Q), {
size: "full",
state: i(r)
}, {
default: W(() => [
w.value ? (l(), a("div", {
key: 0,
innerHTML: w.value
}, null, 8, ue)) : u("", !0),
e("div", fe, [
t[6] || (t[6] = e("div", { class: "section-flare" }, [
e("div", { class: "section-flare-item" }),
e("div", { class: "section-flare-item" }),
e("div", { class: "section-flare-item" }),
e("div", { class: "section-flare-item" }),
e("div", { class: "section-flare-item" }),
e("div", { class: "section-flare-item" }),
e("div", { class: "section-flare-item" }),
e("div", { class: "section-flare-item" })
], -1)),
e("div", {
class: K(["m-auto flex w-full max-w-[380px] flex-col items-center rounded-xl border px-8 py-8 transition-opacity", { "opacity-0": i(n).state === "loading" }])
}, [
i(n).error && i(n).state === "idle" && !b.value ? (l(), a(g, { key: 0 }, [
t[1] || (t[1] = e("div", { class: "text-md mb-2 line-clamp-1 text-center font-bold" }, " No OpenAPI document found ", -1)),
d(ce, {
url: i(n)?.input || s.source
}, null, 8, ["url"])
], 64)) : (l(), a(g, { key: 1 }, [
h.value ? (l(), a("div", pe, [
e("div", ve, [
d(le, { integration: o.integration }, null, 8, ["integration"])
])
])) : v.value ? (l(), a("img", {
key: 1,
alt: "Logo",
class: "mb-2 w-full object-contain",
src: v.value
}, null, 8, he)) : u("", !0),
v.value ? u("", !0) : (l(), a("div", xe, G(D.value || "Untitled Collection"), 1)),
t[4] || (t[4] = e("div", { class: "text-c-1 text-center text-sm font-medium text-balance" }, " Import the OpenAPI document to instantly send API requests. No signup required. ", -1)),
b.value ? (l(), a(g, { key: 3 }, [
e("div", ye, [
d(ie, {
source: i(n)?.url ?? i(n)?.content ?? o.source,
variant: "button",
watchMode: p.value,
onImportFinished: E
}, null, 8, ["source", "watchMode"])
]),
e("div", ge, [
e("div", _e, [
t[2] || (t[2] = k(" Import to: ", -1)),
d(ae)
])
]),
i(n)?.url ? (l(), a("div", be, [
e("div", we, [
d(ne, {
modelValue: p.value,
"onUpdate:modelValue": t[0] || (t[0] = (m) => p.value = m),
disableToolTip: !0
}, null, 8, ["modelValue"])
]),
t[3] || (t[3] = e("div", { class: "text-c-3 pt-0 text-center text-xs font-medium text-balance" }, " Automatically update your API client when the OpenAPI document content changes. ", -1))
])) : u("", !0)
], 64)) : u("", !0)
], 64))
], 2),
e("div", ke, [
e("div", Ie, [
e("div", Le, [
e("a", Me, [
d(i(X), {
icon: "Logo",
size: "xl"
})
])
]),
t[5] || (t[5] = e("span", { class: "text-c-2 text-sm leading-snug font-medium" }, [
e("a", {
class: "hover:text-c-1 mb-1 inline-block underline-offset-2",
href: "https://scalar.com/download",
target: "_blank"
}, " Download Desktop App "),
e("br"),
k(" free · open-source · offline first ")
], -1))
])
])
])
]),
_: 1
}, 8, ["state"]));
}
});
export {
He as default
};