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