import { ref as s, openBlock as a, createElementBlock as d, createElementVNode as f, withKeys as m, withModifiers as p, toDisplayString as c, createCommentVNode as x } from "vue";
const b = { class: "flex mt-12 mb-2 items-center gap-4" }, v = ["contenteditable"], g = {
  __name: "FormTitle",
  props: {
    text: { type: String, default: "" },
    editable: Boolean
  },
  emits: ["update"],
  setup(n, { emit: u }) {
    const i = s(""), o = s(!1);
    function r(l) {
      u("update", l.target.innerText), l.target.blur(), o.value = !1;
    }
    return (l, e) => (a(), d("div", b, [
      f("h1", {
        class: "text-3xl font-bold",
        ref_key: "content",
        ref: i,
        contenteditable: n.editable,
        onFocus: e[0] || (e[0] = (t) => o.value = !0),
        onBlur: e[1] || (e[1] = (t) => r(t)),
        onKeydown: e[2] || (e[2] = m(p((t) => r(t), ["prevent", "stop"]), ["enter"]))
      }, c(n.text || ""), 41, v),
      n.editable && !o.value ? (a(), d("div", {
        key: 0,
        class: "i-la-pen text-2xl",
        onClick: e[3] || (e[3] = (t) => i.value.focus())
      })) : x("", !0)
    ]));
  }
};
export {
  g as default
};
//# sourceMappingURL=FormTitle-4f665bae.js.map
