@scalar/api-client
Version:
the open source API testing client
182 lines (181 loc) • 7 kB
JavaScript
import { defineComponent as $, useId as M, ref as f, computed as S, createBlock as b, openBlock as r, unref as n, withCtx as c, createVNode as m, createCommentVNode as x, createElementBlock as p, Fragment as g, createElementVNode as u, createTextVNode as k, toDisplayString as y, withModifiers as N, normalizeClass as T } from "vue";
import { useModal as q, ScalarComboboxMultiselect as j, ScalarButton as E, ScalarListboxCheckbox as z, ScalarIconButton as U } from "@scalar/components";
import { ScalarIconCaretDown as L, ScalarIconTrash as F } from "@scalar/icons";
import { getResolvedRef as P } from "@scalar/workspace-store/helpers/get-resolved-ref";
import G from "./DeleteRequestAuthModal.vue.js";
import { getSecuritySchemeOptions as H, formatComplexScheme as J, formatScheme as K } from "../helpers/security-scheme.js";
import Q from "./RequestAuthDataTable.vue.js";
import W from "../../../components/layout/CollapsibleSection.vue.js";
const X = ["id"], Y = { class: "min-w-0 flex-1 truncate" }, oe = /* @__PURE__ */ $({
__name: "AuthSelector",
props: {
environment: {},
eventBus: {},
isReadOnly: { type: Boolean, default: !1 },
isStatic: { type: Boolean, default: !1 },
meta: {},
security: {},
securitySchemes: {},
selectedSecurity: {},
server: {},
title: {}
},
setup(a, { expose: I }) {
const C = M(), O = f(null), B = f(!1), d = q(), o = f(null), h = S(() => {
if (!a.security?.length)
return null;
const e = a.security.some(
(l) => Object.keys(l).length > 1
), s = a.security.some(
(l) => Object.keys(l).length === 0
) && !e;
return {
icon: s ? "Unlock" : "Lock",
text: s ? "Optional" : "Required"
};
}), R = S(
() => H(a.security ?? [], a.securitySchemes ?? {}, a.isReadOnly)
), i = S(() => {
const e = a.selectedSecurity?.selectedSchemes;
return e?.length ? e.flatMap((t) => {
const s = Object.keys(t);
if (s.length === 0)
return [];
if (s.length > 1)
return J(t);
const l = s[0];
if (!l)
return [];
const v = P(a.securitySchemes?.[l]);
return v ? K({
name: l,
type: v.type,
value: t
}) : [];
}) : [];
}), w = (e) => {
B.value && e.stopPropagation(), O.value?.$el.click();
}, V = (e) => {
const t = e.filter((l) => l.payload === void 0).map((l) => l.value), s = e.filter((l) => l.payload !== void 0).map((l) => ({
name: l.label,
scheme: l.payload
}));
a.eventBus.emit("auth:update:selected-security-schemes", {
selectedRequirements: t,
newSchemes: s,
meta: a.meta
});
}, D = (e) => {
o.value = { label: e.label, payload: e.value }, d.show();
}, A = () => {
o.value && (a.eventBus.emit("auth:delete:security-scheme", {
names: Object.keys(o.value.payload)
}), o.value = null, d.hide());
};
return I({
authIndicator: h,
selectedSchemeOptions: i,
schemeOptions: R
}), (e, t) => (r(), b(n(W), {
class: "group/params relative",
isStatic: e.isStatic,
itemCount: i.value.length,
"onUpdate:modelValue": t[1] || (t[1] = (s) => B.value = s)
}, {
title: c(() => [
u("div", {
id: n(C),
class: "inline-flex items-center gap-0.5 leading-[20px]"
}, [
u("span", null, y(e.title), 1),
h.value ? (r(), p("span", {
key: 0,
class: T(["text-c-3 hover:bg-b-3 hover:text-c-1 -mr-1 cursor-pointer rounded px-1 py-0.5 text-xs leading-[normal]", { "text-c-1": h.value.text === "Required" }]),
"data-testid": "auth-indicator",
onClick: w
}, y(h.value.text), 3)) : x("", !0)
], 8, X)
]),
actions: c(() => [
m(n(j), {
class: "w-72 text-xs",
modelValue: i.value,
multiple: "",
options: R.value,
placement: "bottom-end",
teleport: "",
onDelete: D,
"onUpdate:modelValue": V
}, {
option: c(({ option: s, selected: l }) => [
m(n(z), {
multiselect: "",
selected: l
}, null, 8, ["selected"]),
u("div", Y, y(s.label), 1),
s.isDeletable ?? !e.isReadOnly ? (r(), b(n(U), {
key: 0,
class: "-m-0.5 shrink-0 p-0.5 opacity-0 group-hover/item:opacity-100",
icon: n(F),
label: `Delete ${s.label}`,
size: "xs",
onClick: N((v) => D(s), ["stop"])
}, null, 8, ["icon", "label", "onClick"])) : x("", !0)
]),
default: c(() => [
m(n(E), {
ref_key: "comboboxButtonRef",
ref: O,
"aria-describedby": n(C),
class: "group/combobox-button hover:text-c-1 text-c-2 flex h-fit w-full items-center gap-1 px-0.75 py-0.25 text-base font-normal",
variant: "ghost"
}, {
default: c(() => [
i.value.length === 1 ? (r(), p(g, { key: 0 }, [
t[2] || (t[2] = u("span", { class: "sr-only" }, "Selected Auth Type:", -1)),
k(" " + y(i.value[0]?.label), 1)
], 64)) : i.value.length > 1 ? (r(), p(g, { key: 1 }, [
t[3] || (t[3] = k(" Multiple ", -1)),
t[4] || (t[4] = u("span", { class: "sr-only" }, "Auth Types Selected", -1))
], 64)) : (r(), p(g, { key: 2 }, [
t[5] || (t[5] = u("span", { class: "sr-only" }, "Select", -1)),
t[6] || (t[6] = k(" Auth Type ", -1))
], 64)),
m(n(L), {
class: "size-3 shrink-0 transition-transform duration-100 group-aria-expanded/combobox-button:rotate-180",
weight: "bold"
})
]),
_: 1
}, 8, ["aria-describedby"])
]),
_: 1
}, 8, ["modelValue", "options"])
]),
default: c(() => [
m(Q, {
activeAuthIndex: e.selectedSecurity?.selectedIndex ?? 0,
environment: e.environment,
eventBus: e.eventBus,
isStatic: e.isStatic,
meta: e.meta,
securitySchemes: e.securitySchemes,
selectedSchemeOptions: i.value,
server: e.server
}, null, 8, ["activeAuthIndex", "environment", "eventBus", "isStatic", "meta", "securitySchemes", "selectedSchemeOptions", "server"]),
o.value ? (r(), b(G, {
key: 0,
label: o.value.label,
scheme: o.value,
state: n(d),
onClose: t[0] || (t[0] = (s) => n(d).hide()),
onDelete: A
}, null, 8, ["label", "scheme", "state"])) : x("", !0)
]),
_: 1
}, 8, ["isStatic", "itemCount"]));
}
});
export {
oe as default
};