@scalar/api-client
Version:
the open source API testing client
43 lines (42 loc) • 1.52 kB
JavaScript
import { defineComponent as c, createElementBlock as l, openBlock as n, normalizeProps as u, guardReactiveProps as m, unref as o, Fragment as f, createElementVNode as p, mergeProps as r, toDisplayString as v } from "vue";
import { useBindCx as h } from "@scalar/components";
const g = ["for"], y = ["id", "placeholder", "value"], b = /* @__PURE__ */ c({
__name: "LabelInput",
props: {
inputId: {},
placeholder: {},
value: {},
layout: {}
},
emits: ["updateValue"],
setup(_, { emit: i }) {
const s = i, { cx: t } = h(), d = (e) => {
const a = e.target;
s("updateValue", a.value);
};
return (e, a) => (n(), l("div", u(m(o(t)("flex-1 flex gap-1 items-center pointer-events-none group"))), [
e.layout !== "modal" ? (n(), l(f, { key: 0 }, [
p("label", r(
o(t)(
"absolute w-full h-full top-0 left-0 pointer-events-auto opacity-0 cursor-text"
),
{ for: e.inputId }
), null, 16, g),
p("input", r(
o(t)(
"flex-1 text-c-1 rounded pointer-events-auto relative w-full pl-1.25 -ml-0.5 md:-ml-1.25 h-8 group-hover-input has-[:focus-visible]:outline z-10"
),
{
id: e.inputId,
placeholder: e.placeholder,
value: e.value,
onInput: d
}
), null, 16, y)
], 64)) : (n(), l("span", u(r({ key: 1 }, o(t)("flex items-center text-c-1 h-8"))), v(e.value), 17))
], 16));
}
});
export {
b as default
};