import { ref as s, openBlock as r, createElementBlock as d, createBaseVNode as c, toDisplayString as p, withKeys as v, withModifiers as b, createCommentVNode as u } from "./composables-Ci32s3jE.js";
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, l = s(""), o = s(!1);
    function a(i) {
      m("update", i.target.innerText), i.target.blur(), o.value = !1;
    }
    return (i, e) => t.text || t.editable ? (r(), d("div", y, [
      c("div", {
        class: "p-0",
        ref_key: "content",
        ref: l,
        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] = v(b((n) => a(n), ["prevent", "stop"]), ["enter"]))
      }, p(t.text || ""), 41, x),
      t.editable && !o.value ? (r(), d("div", {
        key: 0,
        class: "i-la-pen",
        onClick: e[3] || (e[3] = (n) => l.value.focus())
      })) : u("", !0)
    ])) : u("", !0);
  }
};
export {
  g as default
};
//# sourceMappingURL=FormTitle-CMx0Hgqn.js.map
