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