@scalar/api-client
Version:
the open source API testing client
63 lines (62 loc) • 2.26 kB
JavaScript
import { defineComponent as S, computed as l, createBlock as g, createElementBlock as y, openBlock as m, unref as a, withCtx as C, createElementVNode as s, normalizeClass as n, toDisplayString as f } from "vue";
import { cva as q, ScalarListbox as k, cx as p } from "@scalar/components";
import { getHttpMethodInfo as b, REQUEST_METHODS as w } from "@scalar/helpers/http/http-info";
const H = /* @__PURE__ */ S({
__name: "HttpMethod",
props: {
isSquare: { type: Boolean, default: !1 },
method: {},
isEditable: { type: Boolean, default: !1 }
},
emits: ["change"],
setup(t, { emit: h }) {
const i = t, v = h, o = l(() => b(i.method)), r = Object.entries(w).map(([e]) => ({
id: e,
label: e.toUpperCase(),
color: b(e).colorClass
})), d = l({
get: () => r.find(({ id: e }) => e === i.method),
set: (e) => e?.id && v("change", e.id)
}), c = q({
base: "text-center font-code text-3xs justify-center items-center flex",
variants: {
isSquare: {
true: "px-2.5 whitespace-nowrap font-bold border-r h-fit m-auto",
false: "rounded-full"
},
isEditable: {
true: "http-bg-gradient rounded-md border border-r",
false: "cursor-auto"
}
}
}), E = l(() => o.value.short);
return (e, u) => t.isEditable ? (m(), g(a(k), {
key: 0,
modelValue: d.value,
"onUpdate:modelValue": u[0] || (u[0] = (x) => d.value = x),
class: "font-code scalar-client mt-1 text-sm",
options: a(r)
}, {
default: C(() => [
s("div", {
class: n(["h-full", { "pointer-events-none": !t.isEditable }])
}, [
s("button", {
class: n(["relative h-full", a(p)(a(c)({ isSquare: t.isSquare, isEditable: t.isEditable }), o.value.colorClass)]),
type: "button"
}, [
s("span", null, f(E.value), 1)
], 2)
], 2)
]),
_: 1
}, 8, ["modelValue", "options"])) : (m(), y("div", {
key: 1,
class: n(["relative gap-1 whitespace-nowrap", a(p)(a(c)({ isSquare: t.isSquare, isEditable: t.isEditable }), o.value.colorClass)]),
type: "button"
}, f(o.value.short), 3));
}
});
export {
H as default
};