@scalar/api-client
Version:
the open source API testing client
65 lines (64 loc) • 2.43 kB
JavaScript
import { defineComponent as x, mergeModels as p, useModel as h, ref as g, createElementBlock as u, openBlock as i, withKeys as f, createElementVNode as c, Fragment as b, renderList as k, createBlock as y, withCtx as V, createTextVNode as w, toDisplayString as m, createVNode as S, unref as q, nextTick as B } from "vue";
import { ScalarIcon as C } from "@scalar/components";
import I from "./SectionFilterButton.vue.js";
const _ = { class: "request-section-content request-section-content-filter fade-request-section-content text-c-3 pointer-events-auto relative hidden w-full justify-end gap-[1.5px] rounded py-1.75 text-xs xl:flex" }, $ = { class: "filter-button context-bar-group-hover:text-c-1 absolute -right-[30px] flex items-center" }, F = { class: "context-bar-group-hover:hidden mr-1.5" }, K = /* @__PURE__ */ x({
__name: "SectionFilter",
props: /* @__PURE__ */ p({
filters: { default: () => [] },
filterIds: {}
}, {
modelValue: {},
modelModifiers: {}
}),
emits: ["update:modelValue"],
setup(n) {
const t = h(n, "modelValue"), s = g(), a = (l) => {
const o = l === "prev" ? -1 : 1, e = t.value ? n.filters.indexOf(t.value) : 0, r = n.filters.length, v = (e + o + r) % r;
t.value = n.filters[v], B(() => {
if (s.value) {
const d = s.value.querySelector(
'button[aria-selected="true"]'
);
d && d.focus();
}
});
};
return (l, o) => (i(), u("div", {
ref_key: "tablist",
ref: s,
class: "filter-hover context-bar-group ml-auto hidden lg:flex",
role: "tablist",
onKeydown: [
o[0] || (o[0] = f((e) => a("prev"), ["left"])),
o[1] || (o[1] = f((e) => a("next"), ["right"]))
]
}, [
c("div", _, [
(i(!0), u(b, null, k(l.filters, (e) => (i(), y(I, {
key: e,
class: "filter-hover-item",
controls: l.filterIds?.[e],
role: "tab",
selected: t.value === e,
onClick: (r) => t.value = e
}, {
default: V(() => [
w(m(e), 1)
]),
_: 2
}, 1032, ["controls", "selected", "onClick"]))), 128)),
c("div", $, [
c("span", F, m(t.value), 1),
S(q(C), {
icon: "FilterList",
size: "md",
thickness: "2"
})
])
])
], 544));
}
});
export {
K as default
};