import { defineComponent as p, computed as o, createElementBlock as u, openBlock as c, createElementVNode as d, normalizeStyle as m, toDisplayString as h, mergeProps as _ } from "vue";
/* empty css                     */
const f = { class: "resizable-input" }, b = ["placeholder", "value", "disabled"], V = /* @__PURE__ */ p({
  __name: "ResizableInput",
  props: {
    modelValue: {},
    placeholder: {},
    disabled: { type: Boolean },
    maxWidth: {},
    width: {}
  },
  emits: ["update:modelValue"],
  setup(l, { emit: n }) {
    const t = l, s = n, i = o(() => {
      var e;
      return t.placeholder ? t.placeholder : (e = t.modelValue) == null ? void 0 : e.replace('"', "");
    }), a = o(() => {
      const e = {};
      return t.width && (e.width = t.width), t.maxWidth && (e.maxWidth = t.maxWidth), e;
    });
    function r(e) {
      s("update:modelValue", e.target.value);
    }
    return (e, v) => (c(), u("div", f, [
      d("span", {
        style: m(a.value),
        class: "resizable-input__size-span"
      }, h(i.value), 5),
      d("input", _(e.$attrs, {
        placeholder: l.placeholder,
        value: t.modelValue,
        disabled: t.disabled,
        style: a.value,
        onInput: r
      }), null, 16, b)
    ]));
  }
});
export {
  V as default
};
//# sourceMappingURL=ResizableInput.vue.js.map
