@scalar/api-client
Version:
the open source API testing client
210 lines (209 loc) • 8.22 kB
JavaScript
import { defineComponent as z, useId as K, ref as g, computed as f, createBlock as V, openBlock as u, withCtx as r, createVNode as m, renderSlot as j, unref as s, createElementVNode as i, createElementBlock as h, Fragment as x, createTextVNode as k, toDisplayString as y, createCommentVNode as D, withModifiers as Y, normalizeClass as F } from "vue";
import { useModal as H, ScalarComboboxMultiselect as J, ScalarButton as P, ScalarListboxCheckbox as W, ScalarIconButton as G } from "@scalar/components";
import { safeLocalStorage as Q, CLIENT_LS_KEYS as X } from "@scalar/helpers/object/local-storage";
import { ScalarIconCaretDown as Z, ScalarIconTrash as _ } from "@scalar/icons";
import { isDefined as ee } from "@scalar/oas-utils/helpers";
import te from "../../../../components/ViewLayout/ViewLayoutCollapse.vue.js";
import { useWorkspace as oe } from "../../../../store/store.js";
import le from "./DeleteRequestAuthModal.vue.js";
import ne from "./RequestAuthDataTable.vue.js";
import { getSecurityRequirements as se, formatComplexScheme as re, formatScheme as ie, getSchemeOptions as ae } from "../../libs/auth.js";
const ce = ["id"], ue = { class: "flex flex-1" }, me = { class: "min-w-0 flex-1 truncate" }, Ce = /* @__PURE__ */ z({
__name: "RequestAuth",
props: {
collection: {},
isReadOnly: { type: Boolean, default: !1 },
environment: {},
envVariables: {},
layout: {},
operation: {},
persistAuth: { type: Boolean, default: !1 },
selectedSecuritySchemeUids: {},
server: {},
title: {},
workspace: {}
},
emits: ["authorized", "activeSchemes"],
setup(n, { emit: E }) {
const C = E, {
securitySchemes: d,
securitySchemeMutators: $,
requestMutators: B,
collectionMutators: I
} = oe(), A = K(), v = g(null), p = H(), S = g(
null
), R = g(!1), q = f(() => {
const t = se(n.operation, n.collection);
return { filteredRequirements: t.filter((o) => Object.keys(o).length), requirements: t };
}), b = f(() => {
const { filteredRequirements: t, requirements: e } = q.value;
if (!e.length)
return null;
const l = !e.some(
(N) => Object.keys(N).length > 1
) && t.length < e.length;
return { icon: l ? "Unlock" : "Lock", text: l ? "Optional" : "Required" };
}), a = f(
() => n.selectedSecuritySchemeUids.map((t) => {
if (Array.isArray(t))
return re(t, d);
const e = d[t ?? ""];
if (e)
return ie(e);
}).filter(ee)
);
function M(t) {
const e = t.find((l) => l.payload), o = t.filter((l) => !l.payload).map(({ id: l }) => {
const c = l.split(",");
return c.length > 1 ? c : l;
});
if (e?.payload) {
const l = $.add(
e.payload,
n.collection?.uid
);
l && o.push(l.uid);
}
w(o);
}
const w = (t) => {
if (n.collection.useCollectionSecurity) {
if (I.edit(n.collection.uid, "selectedSecuritySchemeUids", t), !n.persistAuth)
return;
const e = t.map((o) => Array.isArray(o) ? o.map((l) => d[l]?.nameKey) : d[o]?.nameKey);
Q().setItem(
X.SELECTED_SECURITY_SCHEMES,
JSON.stringify(e)
);
} else n.operation?.uid && B.edit(n.operation.uid, "selectedSecuritySchemeUids", t);
};
function O({ id: t, label: e }) {
S.value = { id: t, label: e }, p.show();
}
const T = (t) => {
if (!t)
return;
const e = n.selectedSecuritySchemeUids.filter((o) => {
const l = t.split(",");
return l.length > 1 && Array.isArray(o) && l.length === o.length ? o.every((c) => !l.includes(c)) : o !== t;
});
w(e), v.value?.$el.focus(), p.hide();
}, U = f(
() => ae(
q.value.filteredRequirements,
n.collection?.securitySchemes ?? [],
d,
n.isReadOnly
)
), L = (t) => {
R.value && t.stopPropagation(), v.value?.$el.click();
};
return (t, e) => (u(), V(te, {
class: "group/params relative",
itemCount: a.value.length,
layout: t.layout,
"onUpdate:modelValue": e[4] || (e[4] = (o) => R.value = o)
}, {
title: r(() => [
i("div", {
id: s(A),
class: "inline-flex items-center gap-0.5 leading-[20px]"
}, [
i("span", null, y(t.title), 1),
b.value ? (u(), h("span", {
key: 0,
class: F(["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": b.value.text === "Required" }]),
onClick: L
}, y(b.value.text), 3)) : D("", !0)
], 8, ce)
]),
actions: r(() => [
i("div", ue, [
m(s(J), {
class: "w-72 text-xs",
modelValue: a.value,
multiple: "",
options: U.value,
placement: "bottom-end",
teleport: "",
onDelete: O,
"onUpdate:modelValue": M
}, {
option: r(({ option: o, selected: l }) => [
m(s(W), {
multiselect: "",
selected: l
}, null, 8, ["selected"]),
i("div", me, y(o.label), 1),
o.isDeletable ?? !t.isReadOnly ? (u(), V(s(G), {
key: 0,
class: "-m-0.5 shrink-0 p-0.5 opacity-0 group-hover/item:opacity-100",
icon: s(_),
label: `Delete ${o.label}`,
size: "xs",
onClick: Y((c) => O(o), ["stop"])
}, null, 8, ["icon", "label", "onClick"])) : D("", !0)
]),
default: r(() => [
m(s(P), {
ref_key: "comboboxButtonRef",
ref: v,
"aria-describedby": s(A),
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 transition-transform",
variant: "ghost"
}, {
default: r(() => [
a.value.length === 1 ? (u(), h(x, { key: 0 }, [
e[5] || (e[5] = i("span", { class: "sr-only" }, "Selected Auth Type:", -1)),
k(" " + y(a.value[0]?.label), 1)
], 64)) : a.value.length > 1 ? (u(), h(x, { key: 1 }, [
e[6] || (e[6] = k(" Multiple ", -1)),
e[7] || (e[7] = i("span", { class: "sr-only" }, "Auth Types Selected", -1))
], 64)) : (u(), h(x, { key: 2 }, [
e[8] || (e[8] = i("span", { class: "sr-only" }, "Select", -1)),
e[9] || (e[9] = k(" Auth Type ", -1))
], 64)),
m(s(Z), {
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: r(() => [
m(ne, {
collection: t.collection,
envVariables: t.envVariables,
environment: t.environment,
layout: t.layout,
persistAuth: t.persistAuth,
selectedSchemeOptions: a.value,
server: t.server,
workspace: t.workspace,
onActiveSchemes: e[0] || (e[0] = (o) => C("activeSchemes", o)),
onAuthorized: e[1] || (e[1] = (o) => C("authorized"))
}, {
"oauth-actions": r(() => [
j(t.$slots, "oauth-actions", {}, void 0, !0)
]),
_: 3
}, 8, ["collection", "envVariables", "environment", "layout", "persistAuth", "selectedSchemeOptions", "server", "workspace"]),
m(le, {
scheme: S.value,
state: s(p),
onClose: e[2] || (e[2] = (o) => s(p).hide()),
onDelete: e[3] || (e[3] = (o) => T(S.value?.id))
}, null, 8, ["scheme", "state"])
]),
_: 3
}, 8, ["itemCount", "layout"]));
}
});
export {
Ce as default
};