import { withInstall as D } from "@das-fed/utils/with-install/index";
import { defineComponent as L, ref as d, computed as y, onMounted as V, nextTick as I, createBlock as O, openBlock as R, Teleport as T, createElementVNode as M, normalizeStyle as H, toDisplayString as j } from "vue";
import { getVarValue as W } from "@das-fed/web/packages/theme/index";
const F = /* @__PURE__ */ L({
  __name: "index",
  props: {
    getEl: {},
    errorLabel: { default: "" },
    errorModelZIndex: { default: 2e3 },
    errorWidth: { default: void 0 }
  },
  setup(k) {
    const r = k, E = d(null), l = d(), n = d({
      x: 0,
      y: 0
    }), m = y(() => ({
      "box-sizing": "border-box",
      "font-size": "12px",
      "background-color": W("--das-ui-color-overlay-error").value,
      "box-shadow": "0px 4px 10px 0px rgba(0, 0, 0, 0.2)",
      "border-radius": "1px",
      padding: "2px 8px",
      "z-index": r.errorModelZIndex
    })), w = y(() => ({
      ...m.value,
      width: l.value + "px",
      position: "fixed",
      visibility: "visible",
      top: n.value.y + "px",
      left: n.value.x + "px"
    })), s = d({
      // display: 'block',
      color: W("--das-ui-input-error-color").value,
      "white-space": "break-spaces"
    }), C = () => {
      const c = (i = 0) => {
        const t = document.createElement("div");
        for (let [h, p] of Object.entries({
          ...m.value,
          ...s.value,
          width: i + "px"
        }))
          t.style[h] = p;
        const o = document.createElement("span");
        for (let [h, p] of Object.entries(s.value))
          o.style[h] = p;
        o.textContent = r.errorLabel, t.appendChild(o), document.body.appendChild(t);
        const f = t.offsetHeight, B = o.offsetWidth;
        return document.body.removeChild(t), { height: f, textWidth: B };
      }, x = () => {
        const i = document.documentElement.clientHeight, o = document.documentElement.scrollHeight - i;
        return i - o;
      }, e = r.getEl(), a = (e == null ? void 0 : e.clientWidth) ?? 0, v = c(a), g = v.textWidth;
      r.errorWidth ? l.value = r.errorWidth : g > a ? l.value = g + 2 + 8 + "px" : l.value = a + "px";
      const { left: _ = 0, bottom: u = 0, height: S = 0 } = (e == null ? void 0 : e.getBoundingClientRect()) ?? {}, z = x(), b = v.height;
      n.value.y = Math.ceil(u + b) >= z ? u - S - b : u, n.value.x = _;
    };
    return V(async () => {
      await I(), C();
    }), (c, x) => (R(), O(T, { to: "body" }, [
      M(
        "div",
        {
          ref_key: "$errorModel",
          ref: E,
          style: H(w.value)
        },
        [
          M(
            "span",
            {
              style: H(s.value)
            },
            j(c.errorLabel),
            5
            /* TEXT, STYLE */
          )
        ],
        4
        /* STYLE */
      )
    ]));
  }
}), N = D(F);
export {
  N as DasErrorOverlayModel
};
