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