@scalar/api-client
Version:
the open source API testing client
156 lines (155 loc) • 5.43 kB
JavaScript
var f = Object.defineProperty;
var b = (n, t, e) => t in n ? f(n, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[t] = e;
var r = (n, t, e) => b(n, typeof t != "symbol" ? t + "" : t, e);
import { getEnvColor as v } from "../../libs/env-helpers.js";
import { ScalarIcon as h, ScalarButton as g, ScalarTooltip as w } from "@scalar/components";
import { REGEX as y } from "@scalar/oas-utils/helpers";
import { ViewPlugin as x, EditorView as F, RangeSetBuilder as N, Decoration as k, WidgetType as C } from "@scalar/use-codemirror";
import { defineComponent as E, h as s, createApp as V } from "vue";
import { nanoid as R } from "nanoid";
import { parseEnvVariables as S } from "../../libs/environment-parser.js";
class u extends C {
constructor(e, o, i, l, a) {
super();
r(this, "app");
r(this, "uid");
r(this, "environment");
r(this, "envVariables");
r(this, "workspace");
r(this, "isReadOnly");
this.variableName = e, this.variableName = e, this.environment = o, this.envVariables = i, this.workspace = l, this.isReadOnly = a ?? !1, this.uid = R();
}
toDOM() {
const e = document.createElement("span");
e.className = "cm-pill", e.textContent = `${this.variableName}`;
const o = E({
props: { variableName: { type: String, default: null } },
render: () => {
var d;
const i = this.envVariables ? S(this.envVariables).find((m) => m.key === this.variableName) : void 0, l = (i == null ? void 0 : i.source) === "global", a = l ? "#FFFFFF" : i && this.environment ? v(this.environment) : "#FFFFFF";
e.style.setProperty("--tw-bg-base", a), e.style.opacity = i != null && i.value ? "1" : "0.5";
const c = s("div", { class: "flex items-center gap-1 whitespace-nowrap" }, [
(l || ((d = this.environment) == null ? void 0 : d.name) === "No Environment" && (i == null ? void 0 : i.value)) && s(h, { class: "size-2.5 -ml-1", icon: "Globe" }),
s("span", this.variableName)
]), p = i != null && i.value ? s("div", { class: "p-2" }, i.value) : s("div", { class: "divide-y divide-1/2 grid" }, [
s("span", { class: "p-2 opacity-25" }, "No value"),
!this.isReadOnly && s("div", { class: "p-1" }, [
s(
g,
{
class: "gap-1.5 justify-start font-normal px-1 py-1.5 h-auto transition-colors rounded no-underline text-xxs w-full hover:bg-b-2",
variant: "ghost",
onClick: () => {
var m;
window.location.href = `/workspace/${(m = this.workspace) == null ? void 0 : m.uid}/environment`;
}
},
{
default: () => [
s(h, {
class: "w-2",
icon: "Add",
size: "xs"
}),
"Add variable"
]
}
)
])
]);
return s(
w,
{
align: "center",
class: "w-full",
delay: 0,
side: "bottom",
sideOffset: 6
},
{
trigger: () => c,
content: () => s(
"div",
{
class: ["border w-content rounded bg-b-1 brightness-lifted text-xxs leading-5 text-c-1"]
},
p
)
}
);
}
});
return this.app = V(o, { variableName: this.variableName }), this.app.mount(e), e;
}
destroy() {
this.app && this.app.unmount();
}
eq(e) {
return e instanceof u && e.variableName === this.variableName && e.uid === this.uid;
}
ignoreEvent() {
return !1;
}
}
const z = (n) => x.fromClass(
class {
constructor(t) {
r(this, "decorations");
this.decorations = this.buildDecorations(t);
}
update(t) {
(t.docChanged || t.viewportChanged) && requestAnimationFrame(() => {
this.decorations = this.buildDecorations(t.view), t.view.update([]);
});
}
buildDecorations(t) {
const e = new N();
for (const { from: o, to: i } of t.visibleRanges) {
const l = t.state.doc.sliceString(o, i);
let a;
for (; (a = y.VARIABLES.exec(l)) !== null; ) {
const c = o + a.index, p = c + a[0].length, d = a[1] ?? "";
e.add(
c,
p,
k.widget({
widget: new u(
d,
n.environment,
n.envVariables,
n.workspace,
n.isReadOnly
),
side: 1
})
);
}
}
return e.finish();
}
},
{
decorations: (t) => t.decorations
}
), I = F.domEventHandlers({
keydown(n, t) {
if (n.key === "Backspace") {
const { state: e } = t, { from: o, to: i } = e.selection.main;
if (o === 0 && i === e.doc.length)
return t.dispatch({
changes: { from: 0, to: e.doc.length },
selection: { anchor: 0 }
}), n.preventDefault(), !0;
if (o === i && o > 0 && e.doc.sliceString(o - 2, o) === "}}")
return t.dispatch({
changes: { from: o - 2, to: i },
selection: { anchor: o - 2 }
}), n.preventDefault(), !0;
}
return !1;
}
});
export {
I as backspaceCommand,
z as pillPlugin
};