import { defineComponent as B, useSlots as K, useAttrs as N, ref as u, computed as n, watch as $, openBlock as c, createElementBlock as m, normalizeClass as O, unref as P, createElementVNode as z, createVNode as D, mergeProps as F, withKeys as f, createSlots as U, withCtx as v, renderSlot as V, toDisplayString as j, createCommentVNode as q } from "vue";
import { percent as G, money as H } from "./utils/i18n.js";
import J from "./Input.js";
const L = { class: "stash-inline-edit__input-wrapper" }, M = {
  key: 0,
  class: "mt-1 inline-block pl-3 text-ice-700 line-through"
}, X = /* @__PURE__ */ B({
  name: "ll-inline-edit",
  inheritAttrs: !1,
  __name: "InlineEdit",
  props: {
    format: { default: "" },
    type: { default: "text" },
    modelValue: { default: void 0 },
    oldValue: { default: void 0 },
    label: { default: " " },
    placeholder: { default: "" },
    errorText: { default: "" },
    hintText: { default: "" }
  },
  emits: ["update:model-value"],
  setup(h, { emit: y }) {
    const d = K(), p = N(), e = h, x = y, r = u(!1), s = u(e.oldValue || e.modelValue), l = u(e.modelValue), _ = n(() => {
      const t = { ...p };
      return delete t.class, t;
    }), b = n(() => E(s.value || "")), k = n(() => (e.oldValue || e.oldValue === 0) && e.oldValue !== l.value), g = n(() => !!d.append), w = n(() => !!d.prepend);
    $(
      () => e.modelValue,
      (t, o) => {
        t !== o && (l.value = t);
      }
    );
    function I() {
      l.value = e.modelValue || e.oldValue, r.value = !1, i();
    }
    function A() {
      r.value = !0, S();
    }
    function E(t) {
      switch (e.format) {
        case "currency":
          return H({
            amount: t
          });
        case "percent":
          return G(t / 100);
        default:
          return t;
      }
    }
    function C() {
      l.value = l.value !== "" ? l.value : s.value, x("update:model-value", l.value), r.value = !1, i();
    }
    const a = u();
    function S() {
      a.value && a.value.inputEl.focus();
    }
    function i() {
      a.value && a.value.inputEl.blur();
    }
    return (t, o) => (c(), m("div", {
      class: O(["stash-inline-edit", P(p).class]),
      "data-test": "stash-inline-edit"
    }, [
      z("div", L, [
        D(J, F({
          ref_key: "llInput",
          ref: a,
          modelValue: l.value,
          "onUpdate:modelValue": o[0] || (o[0] = (T) => l.value = T),
          "error-text": e.errorText,
          "hint-text": e.hintText,
          label: e.label,
          placeholder: `${e.placeholder || s.value}`,
          type: e.type
        }, _.value, {
          onBlur: C,
          onFocus: A,
          onKeydown: f(I, ["esc"]),
          onKeyup: f(i, ["enter"])
        }), U({ _: 2 }, [
          w.value ? {
            name: "prepend",
            fn: v(() => [
              V(t.$slots, "prepend")
            ]),
            key: "0"
          } : void 0,
          g.value ? {
            name: "append",
            fn: v(() => [
              V(t.$slots, "append")
            ]),
            key: "1"
          } : void 0
        ]), 1040, ["modelValue", "error-text", "hint-text", "label", "placeholder", "type"])
      ]),
      k.value ? (c(), m("span", M, j(b.value), 1)) : q("", !0)
    ], 2));
  }
});
export {
  X as default
};
//# sourceMappingURL=InlineEdit.js.map
