ucc-ui/dist/es/hooks-Dj9Dthmd.js

ucc-ui components library

import { isRef as $, watch as S, onMounted as j, onBeforeUnmount as F, unref as Z, computed as c, ref as a, nextTick as N, h as y, render as U, Fragment as J, readonly as H } from "vue";
import { h as A, g as K, s as Q, u as V, j as _, o as ee } from "./vendors-PY6Ic9FA.js";
import { t as P } from "./utils-BzE2Aob-.js";
import "./ConfigProvider-C-6nRyrn.js";
import { D as te, E as ne } from "./locale-BeqhBZQs.js";
function se(e, i, o) {
  if (!e)
    return;
  console.log(e, "target");
  let t;
  $(e) ? t = S(e, (n, l) => {
    l == null || l.removeEventListener(i, o), n == null || n.addEventListener(i, o);
  }, { immediate: !0 }) : j(() => e == null ? void 0 : e.addEventListener(i, o)), F(() => {
    var n;
    t && t(), (n = Z(e)) == null || n.removeEventListener(i, o);
  });
}
function fe(e, i) {
  se(document, "click", (o) => {
    e.value && o.target && (e.value.contains(o.target) || i(o));
  });
}
const D = {
  prefix: Math.floor(Math.random() * 1e4),
  current: 0
};
function de(e = "u") {
  return c(() => `${e}-${D.prefix}-${D.current++}`);
}
function he(e) {
  const { offset: i, boxHeight: o, getLastBottomOffset: t } = e, n = c(() => t()), l = c(() => i + n.value), f = c(() => l.value + o.value);
  return {
    topOffset: l,
    bottomOffset: f
  };
}
const G = a(0);
function Te(e = 1100) {
  const i = a(e), o = c(() => G.value + i.value);
  return {
    initVal: e,
    curZIndex: o,
    nextZIndex: () => (G.value++, o.value)
  };
}
function me(e) {
  const {
    el: i,
    dragEl: o
  } = e, t = X(i), n = X(o) || t;
  if (!t)
    throw new Error("el is not found");
  window.requestAnimationFrame(() => {
    t.style.position = "relative", n.style.cursor = "move";
    const h = t.style.willChange.split(",");
    h.includes("left") || (t.style.willChange = h.concat("left").join(",")), h.includes("top") || (t.style.willChange = h.concat("top").join(","));
  });
  const l = a(0), f = a(0), d = a(0), m = a(0), T = a(0), v = a(0), u = a(0), r = a(0), g = a(0), p = a(0), E = a(!1), L = (h) => {
    l.value = h.clientX, f.value = h.clientY;
    const w = t.getBoundingClientRect();
    g.value = w.left, p.value = w.top, E.value = !0;
  }, O = (h) => {
    E.value && (h.preventDefault(), T.value = h.clientX - l.value, v.value = h.clientY - f.value, u.value = g.value + T.value, r.value = p.value + v.value, !(u.value < 0 || r.value < 0) && window.requestAnimationFrame(() => {
      var w;
      (w = e.moving) == null || w.call(e, T.value, v.value), t.style.left = `${u.value}px`, t.style.top = `${r.value}px`;
    }));
  }, x = (h) => {
    var w;
    E.value && (E.value = !1, d.value = h.clientX, m.value = h.clientY, T.value = d.value - l.value, v.value = m.value - f.value, u.value = g.value + T.value, r.value = p.value + v.value, (w = e.end) == null || w.call(e, d.value, m.value));
  };
  return n == null || n.addEventListener("mousedown", L, { passive: !0 }), document.addEventListener("mousemove", O, { passive: !1 }), document.addEventListener("mouseup", x, { passive: !0 }), F(() => {
    n == null || n.removeEventListener("mousedown", L), document.removeEventListener("mousemove", O), document.removeEventListener("mouseup", x);
  }), {
    isDraggle: E,
    moveX: c(() => T.value),
    moveY: c(() => v.value),
    startX: c(() => l.value),
    startY: c(() => f.value),
    endX: c(() => d.value),
    endY: c(() => m.value),
    left: c(() => u.value),
    top: c(() => r.value),
    initialLeft: c(() => g.value),
    initialTop: c(() => p.value)
  };
}
function X(e) {
  return A(e) ? document.querySelector(e) : e instanceof HTMLElement ? e : $(e) ? e.value : null;
}
const s = {
  TOP: "v-resize-t",
  BOTTOM: "v-resize-b",
  LEFT: "v-resize-l",
  RIGHT: "v-resize-r",
  TOP_LEFT: "v-resize-tl",
  TOP_RIGHT: "v-resize-tr",
  BOTTOM_LEFT: "v-resize-bl",
  BOTTOM_RIGHT: "v-resize-br"
}, R = {
  [s.TOP]: "n-resize",
  [s.BOTTOM]: "s-resize",
  [s.LEFT]: "w-resize",
  [s.RIGHT]: "e-resize",
  [s.TOP_LEFT]: "nw-resize",
  [s.TOP_RIGHT]: "ne-resize",
  [s.BOTTOM_LEFT]: "sw-resize",
  [s.BOTTOM_RIGHT]: "se-resize"
};
function Oe(e) {
  const i = K({
    angleWidth: 8,
    barSize: 5,
    barZIndex: 999,
    minWidth: 0,
    minHeight: 0
  }, e), {
    el: o,
    minWidth: t,
    minHeight: n
  } = i, l = oe(o);
  if (!l)
    throw new Error("el is required");
  window.requestAnimationFrame(() => {
    l.style.position = "relative", l.style.willChange = "width, height, left, top";
  });
  const f = a(!1), d = a(0), m = a(0), T = a(0), v = a(0), u = a(""), r = a(l.getBoundingClientRect()), g = (O) => {
    f.value = !0;
    const x = O.target;
    d.value = O.clientX, m.value = O.clientY, T.value = l.offsetWidth, v.value = l.offsetHeight, u.value = x.classList[0];
  }, p = (O) => {
    if (!f.value)
      return;
    O.preventDefault();
    const x = O.clientX - d.value, h = O.clientY - m.value;
    M(l, u.value, {
      dx: x,
      dy: h,
      startX: d.value,
      startY: m.value,
      startWidth: T.value,
      startHeight: v.value,
      minWidth: t,
      minHeight: n
    }), N(() => {
      var w;
      r.value = l.getBoundingClientRect(), (w = e.resizing) == null || w.call(e, r.value.width, r.value.height);
    });
  }, E = () => {
    f.value = !1;
  };
  window.addEventListener("mousemove", p, { passive: !1 }), window.addEventListener("mouseup", E, { passive: !0 });
  const L = le(i, {
    onMousedown: g
  });
  return C(L, l), F(() => {
    window.removeEventListener("mousemove", p), window.removeEventListener("mouseup", E);
  }), {
    width: c(() => r.value.width),
    height: c(() => r.value.height),
    left: c(() => r.value.left),
    top: c(() => r.value.top),
    startX: c(() => d.value),
    startY: c(() => m.value),
    startWidth: c(() => T.value),
    startHeight: c(() => v.value),
    resizeType: c(() => u.value)
  };
}
function M(e, i, o) {
  const {
    dx: t,
    dy: n,
    startX: l,
    startY: f,
    startWidth: d,
    startHeight: m,
    minWidth: T,
    minHeight: v
  } = o;
  window.requestAnimationFrame(() => {
    switch (i) {
      case s.TOP: {
        const u = m - n, r = f + n;
        if (u < v || r < 0)
          return;
        e.style.height = `${u}px`, e.style.top = `${r}px`;
        break;
      }
      case s.BOTTOM: {
        const u = m + n;
        if (u < v)
          return;
        e.style.height = `${u}px`;
        break;
      }
      case s.LEFT: {
        const u = d - t, r = l + t;
        if (u < T || r < 0)
          return;
        e.style.width = `${u}px`, e.style.left = `${r}px`;
        break;
      }
      case s.RIGHT: {
        if (d + t < T)
          return;
        e.style.width = `${d + t}px`;
        break;
      }
      case s.TOP_LEFT:
        M(e, s.LEFT, o), M(e, s.TOP, o);
        break;
      case s.TOP_RIGHT:
        M(e, s.RIGHT, o), M(e, s.TOP, o);
        break;
      case s.BOTTOM_LEFT:
        M(e, s.LEFT, o), M(e, s.BOTTOM, o);
        break;
      case s.BOTTOM_RIGHT:
        M(e, s.RIGHT, o), M(e, s.BOTTOM, o);
        break;
    }
  });
}
function oe(e) {
  return A(e) ? document.querySelector(e) : e instanceof HTMLElement ? e : $(e) ? e.value : null;
}
function le(e, i) {
  const {
    barSize: o,
    angleWidth: t,
    barZIndex: n
  } = e, l = {
    position: "absolute",
    zIndex: n
  }, f = y("div", {
    class: s.TOP,
    style: {
      ...l,
      top: 0,
      left: t + "px",
      width: `calc(100% - ${t * 2}px)`,
      height: `${o}px`,
      cursor: R[s.TOP]
    },
    ...i
  }), d = y("div", {
    class: s.BOTTOM,
    style: {
      ...l,
      bottom: 0,
      left: t + "px",
      width: `calc(100% - ${t * 2}px)`,
      height: `${o}px`,
      cursor: R[s.BOTTOM]
    },
    ...i
  }), m = y("div", {
    class: s.LEFT,
    style: {
      ...l,
      left: 0,
      top: t + "px",
      width: `${o}px`,
      height: `calc(100% - ${t * 2}px)`,
      cursor: R[s.LEFT]
    },
    ...i
  }), T = y("div", {
    class: s.RIGHT,
    style: {
      ...l,
      right: 0,
      top: t + "px",
      width: `${o}px`,
      height: `calc(100% - ${t * 2}px)`,
      cursor: R[s.RIGHT]
    },
    ...i
  }), v = y("div", {
    class: s.TOP_LEFT,
    style: {
      ...l,
      top: 0,
      left: 0,
      width: `${t}px`,
      height: `${t}px`,
      cursor: R[s.TOP_LEFT]
    },
    ...i
  }), u = y("div", {
    class: s.TOP_RIGHT,
    style: {
      ...l,
      top: 0,
      right: 0,
      width: `${t}px`,
      height: `${t}px`,
      cursor: R[s.TOP_RIGHT]
    },
    ...i
  }), r = y("div", {
    class: s.BOTTOM_LEFT,
    style: {
      ...l,
      bottom: 0,
      left: 0,
      width: `${t}px`,
      height: `${t}px`,
      cursor: R[s.BOTTOM_LEFT]
    },
    ...i
  }), g = y("div", {
    class: s.BOTTOM_RIGHT,
    style: {
      ...l,
      bottom: 0,
      right: 0,
      width: `${t}px`,
      height: `${t}px`,
      cursor: R[s.BOTTOM_RIGHT]
    },
    ...i
  });
  return {
    Top: f,
    Bottom: d,
    Left: m,
    Right: T,
    TopLeft: v,
    TopRight: u,
    BottomLeft: r,
    BottomRight: g
  };
}
function C(e, i) {
  Q(e) ? U(y(J, null, e), i) : V(e) && C(Object.values(e), i);
}
function we(e) {
  let {
    el: i,
    to: o = 0,
    toReferEl: t,
    isAuto: n = !0,
    duration: l = 300,
    scrolling: f,
    wheeling: d
  } = e;
  const m = f && _(f) ? f : null, T = d && _(d) ? d : null, v = P(i);
  if (!v)
    throw new Error("useScrollTo: target is not found");
  const u = P(t);
  u && (o = u.offsetTop);
  const r = a(0), g = a(0), p = a(0), E = a(0), L = a(!1), O = a(!1), x = a(null), h = (I = 0, W = 300) => {
    if (L.value)
      return;
    r.value = v.scrollTop, g.value = I - r.value, p.value = g.value;
    const k = Date.now();
    L.value = !0, O.value = !1;
    const B = () => {
      const q = Date.now() - k, z = Math.min(q / W, 1);
      v.scrollTop = r.value + g.value * z, p.value = v.scrollTop, E.value = z * 100, m && m(v.scrollTop, z), z < 1 && !O.value ? x.value = requestAnimationFrame(B) : L.value = !1;
    };
    x.value = requestAnimationFrame(B);
  }, w = () => {
    O.value = !0, L.value = !1, x.value && cancelAnimationFrame(x.value);
  }, b = (I) => {
    L.value && w(), T && T(I);
  };
  return v.addEventListener("wheel", b, { passive: !1 }), F(() => {
    v.removeEventListener("wheel", b);
  }), n && h(o, l), {
    scrollTo: h.bind(null, o, l),
    cancel: w,
    scrollStart: H(r),
    scrollDistance: H(g),
    scrollProgress: H(E),
    scrollDistanceSurplus: H(p),
    isScolling: H(L)
  };
}
const Y = "zh-cn";
ee({
  locale: Y,
  messages: {
    [Y]: te.el,
    en: ne.el
  }
});
function ge(e, i, o, t = {}) {
  const n = a(e), l = S(i, (f) => {
    n.value = f;
  }, t);
  return F(() => {
    l();
  }), n;
}
function pe() {
  return {
    beforeEnter: (n) => {
      n.style.overflow = "hidden", n.style.height = "0";
    },
    enter: (n) => {
      n.style.height = n.scrollHeight + "px", n.style.transition = "height var(--uc-animation-delay-2) var(--uc-animation-ease-in)";
    },
    afterEnter: (n) => {
      n.style.overflow = "unset";
    },
    leave: (n) => {
      n.style.overflow = "hidden", n.style.height = "0", n.style.transition = "height var(--uc-animation-delay-2) var(--uc-animation-ease-in)";
    }
  };
}
export {
  se as a,
  Oe as b,
  me as c,
  pe as d,
  ge as e,
  fe as f,
  we as g,
  he as h,
  Te as i,
  de as u
};