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