@scalar/api-client
Version:
the open source API testing client
136 lines (135 loc) • 5.52 kB
JavaScript
import { defineComponent as V, computed as f, createBlock as r, openBlock as n, unref as l, withCtx as s, createElementVNode as a, createVNode as i, normalizeClass as $, toDisplayString as d, createCommentVNode as m, withModifiers as w, createTextVNode as p, createElementBlock as x, Fragment as A, renderList as B } from "vue";
import { Disclosure as O, DisclosureButton as j, DisclosurePanel as z } from "@headlessui/vue";
import { ScalarButton as v, ScalarIcon as N } from "@scalar/components";
import g from "../../../../components/DataTable/DataTableCell.vue.js";
import T from "../../../../components/DataTable/DataTableRow.vue.js";
import E from "../../../../components/DataTable/DataTableCheckbox.vue.js";
const F = { class: "flex h-fit w-full" }, I = { class: "flex-1" }, R = { class: "flex items-center gap-1.75" }, L = {
class: "grid auto-rows-auto",
style: { gridTemplateColumns: "1fr auto" }
}, M = { key: 0 }, P = { class: "font-code text-xs" }, W = /* @__PURE__ */ V({
__name: "OAuthScopesInput",
props: {
flow: {},
updateScheme: { type: Function }
},
setup(e) {
const y = f(
() => Object.entries(e.flow?.scopes ?? {}).map(([c, t]) => ({
id: c,
label: c,
description: t
}))
), u = f(() => e.flow?.selectedScopes || []);
function k(c, t) {
t ? e.updateScheme(`flows.${e.flow.type}.selectedScopes`, [
...u.value,
c
]) : e.updateScheme(
`flows.${e.flow.type}.selectedScopes`,
u.value.filter((o) => o !== c)
);
}
const h = f(
() => e.flow?.selectedScopes?.length === Object.keys(e.flow?.scopes ?? {}).length
), C = () => {
e.updateScheme(
`flows.${e.flow.type}.selectedScopes`,
Object.keys(e.flow?.scopes ?? {})
);
}, b = () => {
e.updateScheme(`flows.${e.flow.type}.selectedScopes`, []);
};
return (c, t) => (n(), r(l(g), { class: "h-auto !max-h-[initial] min-h-8 items-center" }, {
default: s(() => [
a("div", F, [
t[2] || (t[2] = a("div", { class: "text-c-1 h-full items-center" }, null, -1)),
i(l(O), {
as: "div",
class: "bl flex w-full flex-col"
}, {
default: s(() => [
i(l(j), {
class: $([
"group/scopes-accordion hover:text-c-1 flex h-auto min-h-8 cursor-pointer items-center gap-1.5 pr-2.25 pl-3 text-left",
(e.flow?.selectedScopes?.length || 0) > 0 ? "text-c-1" : "text-c-3"
])
}, {
default: s(({ open: o }) => [
a("div", I, " Scopes Selected " + d(e.flow?.selectedScopes?.length || 0) + " / " + d(Object.keys(e.flow?.scopes ?? {}).length || 0), 1),
a("div", R, [
h.value ? (n(), r(l(v), {
key: 0,
class: "pr-0.75 pl-1 transition-none",
size: "sm",
variant: "ghost",
onClick: w(b, ["stop"])
}, {
default: s(() => [...t[0] || (t[0] = [
p(" Deselect All ", -1)
])]),
_: 1
})) : m("", !0),
h.value ? m("", !0) : (n(), r(l(v), {
key: 1,
class: "pr-0.75 pl-1 transition-none",
size: "sm",
variant: "ghost",
onClick: w(C, ["stop"])
}, {
default: s(() => [...t[1] || (t[1] = [
p(" Select All ", -1)
])]),
_: 1
})),
i(l(N), {
class: "text-c-3 group-hover/scopes-accordion:text-c-2",
icon: o ? "ChevronDown" : "ChevronRight",
size: "md"
}, null, 8, ["icon"])
])
]),
_: 1
}, 8, ["class"]),
i(l(z), { as: "template" }, {
default: s(() => [
a("table", L, [
(n(!0), x(A, null, B(y.value, ({ id: o, label: D, description: S }) => (n(), r(l(T), {
key: o,
class: "text-c-2",
onClick: (U) => k(o, !u.value.includes(o))
}, {
default: s(() => [
i(l(g), { class: "hover:text-c-1 box-border !max-h-[initial] w-full cursor-pointer px-3 py-1.5" }, {
default: s(() => [
S ? (n(), x("div", M, [
a("span", P, d(D), 1),
p(" – " + d(S), 1)
])) : m("", !0)
]),
_: 2
}, 1024),
i(l(E), {
modelValue: u.value.includes(o),
"onUpdate:modelValue": () => {
}
}, null, 8, ["modelValue"])
]),
_: 2
}, 1032, ["onClick"]))), 128))
])
]),
_: 1
})
]),
_: 1
})
])
]),
_: 1
}));
}
});
export {
W as default
};