import { defineComponent as L, mergeModels as M, useModel as k, ref as w, computed as E, onMounted as V, createElementBlock as s, openBlock as d, normalizeStyle as b, normalizeClass as m, unref as l, createElementVNode as p, createCommentVNode as h, withDirectives as C, toDisplayString as v, withKeys as g, vModelText as T } from "vue";
import { useTransformedModel as B } from "../../composition/useTransformedModel.js";
import f from "./pl-editable-title.module.scss.js";
const S = { key: 0 }, W = ["placeholder"], K = /* @__PURE__ */ L({
  __name: "PlEditableTitle",
  props: /* @__PURE__ */ M({
    placeholder: { default: "Title" },
    maxWidth: { default: "80%" },
    prefix: { default: void 0 },
    maxLength: { default: 1e3 },
    minLength: { default: void 0 },
    autofocus: { type: Boolean },
    validate: { type: Function, default: void 0 }
  }, {
    modelValue: {},
    modelModifiers: {}
  }),
  emits: ["update:modelValue"],
  setup(a) {
    const i = k(a, "modelValue"), e = a, t = B(i, {
      update() {
        return !1;
      },
      parse: (o) => {
        if (typeof o != "string")
          throw Error("value should be a string");
        if (e.maxLength && o.length > e.maxLength)
          throw Error(`Max title length is ${e.maxLength} characters`);
        if (e.minLength && o.length < e.minLength)
          throw Error(`Min title length is ${e.minLength} characters`);
        return typeof e.validate == "function" && e.validate(o), o.trim();
      }
    }), u = w(), x = E(() => ({
      maxWidth: e.maxWidth ?? "80%"
    })), y = () => {
      i.value = t.value && !t.error ? t.value : i.value, t.reset();
    };
    return V(() => {
      var o;
      e.autofocus && ((o = u.value) == null || o.focus());
    }), (o, r) => (d(), s("div", {
      class: m(["pl-editable-title", l(f).component]),
      style: b(x.value)
    }, [
      p("div", {
        class: m(l(f).container),
        onClick: r[3] || (r[3] = () => {
          var n;
          return (n = u.value) == null ? void 0 : n.focus();
        })
      }, [
        a.prefix ? (d(), s("span", S, v(a.prefix.trim()) + " ", 1)) : h("", !0),
        C(p("input", {
          ref_key: "inputRef",
          ref: u,
          "onUpdate:modelValue": r[0] || (r[0] = (n) => l(t).value = n),
          placeholder: a.placeholder,
          onFocusout: y,
          onKeydown: [
            r[1] || (r[1] = g(
              //@ts-ignore
              (...n) => l(t).reset && l(t).reset(...n),
              ["escape"]
            )),
            r[2] || (r[2] = g((n) => {
              var c;
              return (c = n.target) == null ? void 0 : c.blur();
            }, ["enter"]))
          ]
        }, null, 40, W), [
          [T, l(t).value]
        ])
      ], 2),
      l(t).error ? (d(), s("div", {
        key: 0,
        class: m(l(f).error)
      }, v(l(t).error), 3)) : h("", !0)
    ], 6));
  }
});
export {
  K as default
};
//# sourceMappingURL=PlEditableTitle.vue.js.map
