@scalar/api-client
Version:
the open source API testing client
211 lines (210 loc) • 8.24 kB
JavaScript
import { defineComponent as z, useId as K, ref as g, computed as f, createBlock as V, openBlock as u, withCtx as i, createVNode as m, renderSlot as j, unref as s, createElementVNode as r, createElementBlock as h, Fragment as x, createTextVNode as k, toDisplayString as y, createCommentVNode as D, withModifiers as W, normalizeClass as Y } from "vue";
import { useModal as F, ScalarComboboxMultiselect as H, ScalarButton as J, ScalarListboxCheckbox as P, 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 ie, formatScheme as re, 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 = F(), 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 ie(t, d);
const e = d[t ?? ""];
if (e)
return re(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);
}
O(o);
}
const O = (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 w({ 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;
});
O(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: i(() => [
r("div", {
id: s(A),
class: "inline-flex items-center gap-0.5 leading-[20px]"
}, [
r("span", null, y(t.title), 1),
b.value ? (u(), h("span", {
key: 0,
class: Y(["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: i(() => [
r("div", ue, [
m(s(H), {
class: "w-72 text-xs",
modelValue: a.value,
multiple: "",
options: U.value,
placement: "bottom-end",
teleport: "",
onDelete: w,
"onUpdate:modelValue": M
}, {
option: i(({ option: o, selected: l }) => [
m(s(P), {
multiselect: "",
selected: l
}, null, 8, ["selected"]),
r("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: W((c) => w(o), ["stop"])
}, null, 8, ["icon", "label", "onClick"])) : D("", !0)
]),
default: i(() => [
m(s(J), {
ref_key: "comboboxButtonRef",
ref: v,
"aria-describedby": s(A),
class: "group/combobox-button hover:text-c-1 text-c-2 flex h-fit items-center gap-1 px-0.75 py-0.25 text-base font-normal transition-transform",
fullWidth: "",
variant: "ghost"
}, {
default: i(() => [
a.value.length === 1 ? (u(), h(x, { key: 0 }, [
e[5] || (e[5] = r("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 ")),
e[7] || (e[7] = r("span", { class: "sr-only" }, "Auth Types Selected", -1))
], 64)) : (u(), h(x, { key: 2 }, [
e[8] || (e[8] = r("span", { class: "sr-only" }, "Select", -1)),
e[9] || (e[9] = k(" Auth Type "))
], 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: i(() => [
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": i(() => [
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
};