import { defineComponent as p, mergeModels as r, useModel as c, useId as m, createElementBlock as f, openBlock as v, createElementVNode as u, withDirectives as h, unref as s, withKeys as x, vModelText as b } from "vue";
const _ = { class: "group pointer-events-none flex flex-1 items-center gap-1" }, g = ["for"], w = ["id", "placeholder"], M = /* @__PURE__ */ p({
  __name: "LabelInput",
  props: /* @__PURE__ */ r({
    placeholder: {}
  }, {
    modelValue: { required: !0 },
    modelModifiers: {}
  }),
  emits: /* @__PURE__ */ r(["blur"], ["update:modelValue"]),
  setup(o, { emit: d }) {
    const i = d, l = c(o, "modelValue"), n = m(), a = () => {
      i("blur", l.value);
    };
    return (V, e) => (v(), f("div", _, [
      u("label", {
        class: "pointer-events-auto absolute top-0 left-0 h-full w-full cursor-text opacity-0",
        for: s(n)
      }, null, 8, g),
      h(u("input", {
        id: s(n),
        "onUpdate:modelValue": e[0] || (e[0] = (t) => l.value = t),
        class: "text-c-1 group-hover-input pointer-events-auto relative -ml-0.5 h-8 w-full flex-1 rounded pl-1.25 has-[:focus-visible]:outline md:-ml-1.25",
        placeholder: o.placeholder ?? "Untitled Document",
        onBlur: a,
        onKeydown: e[1] || (e[1] = x((t) => t.target?.blur(), ["enter"]))
      }, null, 40, w), [
        [b, l.value]
      ])
    ]));
  }
});
export {
  M as default
};
