vexip-ui/es/components/popup/popup.vue2.mjs

A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good

import { defineComponent as q, ref as h, computed as O, watch as A, provide as B, reactive as H, createElementBlock as b, openBlock as y, normalizeClass as D, unref as g, Fragment as T, renderList as j, createBlock as G, normalizeStyle as R, withCtx as V, renderSlot as X } from "vue";
import "./popup-item.vue.mjs";
import { useNameHelper as J, classProp as K } from "@vexip-ui/config";
import { isFunction as s, noop as i, getGlobalCount as M } from "@vexip-ui/utils";
import { DELETE_HANDLER as Q, popupPlacements as U } from "./symbol.mjs";
import W from "./popup-item.vue2.mjs";
const ae = /* @__PURE__ */ q({
  name: "Popup",
  __name: "popup",
  props: {
    transitionName: {
      type: String,
      default: null
    },
    innerClass: {
      type: K,
      default: null
    },
    startOffset: {
      type: Number,
      default: 30
    },
    placement: {
      default: "top-right",
      validator: (u) => U.includes(u)
    },
    itemOffset: {
      type: Number,
      default: 16
    },
    itemType: {
      type: Function
    }
  },
  setup(u, { expose: k }) {
    const l = u, p = J("popup"), a = h([]), c = [], x = h();
    let f = !1;
    const C = O(() => l.placement.split("-")), E = O(() => l.transitionName || p.ns("popup-top"));
    A(
      () => l.startOffset,
      (e, t) => {
        a.value.forEach((n) => {
          n.verticalPosition += e - t;
        });
      }
    ), B(Q, S), k({
      items: a,
      wrapper: x,
      add: N,
      remove: P,
      has: $,
      find: v,
      clear: w
    });
    function I(e) {
      const [t, n] = C.value, o = { [t]: `${e.verticalPosition}px` };
      n === "center" ? (o.left = "50%", o.transform = "translateX(-50%)") : o[n] = "24px";
      const r = parseInt(e.zIndex);
      return Number.isNaN(r) || (o.zIndex = r), o;
    }
    function N(e) {
      return new Promise((t) => {
        const n = s(e.onOpen) ? e.onOpen : i;
        e.onOpen = (o) => {
          t(o), n();
        }, c.push({
          type: "add",
          param: e
        }), f || (f = !0, d());
      });
    }
    function P(e) {
      return new Promise((t) => {
        const n = v(e);
        if (!n) return t(!1);
        const o = s(n.onClose) ? n.onClose : i;
        n.onClose = (r) => {
          t(r), o(r);
        }, c.push({
          type: "clear",
          param: e
        }), f || (f = !0, d());
      });
    }
    function d() {
      if (c.length) {
        const e = c.shift();
        e.type === "add" ? L(e.param) : z(e.param), requestAnimationFrame(d);
      } else
        f = !1;
    }
    function L(e) {
      let t = e.key ? v(e.key) : null;
      if (!(t != null && t.visible)) {
        const n = M(), o = e.key ?? p.bs(`${n}`);
        let r = l.startOffset;
        a.value.forEach((m) => {
          m.visible && (r += m.height + l.itemOffset);
        }), t = H(
          Object.assign(
            {
              key: o,
              content: "",
              closable: !1,
              onOpen: i,
              onClose: i,
              onEnter: i,
              onLeave: i
            },
            e,
            {
              height: 0,
              visible: !0,
              verticalPosition: r
            }
          )
        ), a.value.push(t);
      }
      s(e.onOpen) && e.onOpen(t.key);
    }
    function z(e) {
      const t = a.value.findIndex((n) => n.key === e);
      if (~t) {
        const n = a.value[t], o = n.height;
        n.visible = !1;
        for (let r = t + 1, m = a.value.length; r < m; ++r)
          a.value[r].verticalPosition -= o + l.itemOffset;
        s(n.onClose) && n.onClose(!0);
      }
    }
    function S(e) {
      const t = a.value.findIndex((n) => n.key === e);
      ~t && a.value.splice(t, 1);
    }
    function $(e) {
      return !~a.value.findIndex((t) => t.key === e);
    }
    function v(e) {
      return a.value.find((t) => t.key === e);
    }
    function w() {
      c.length = 0, a.value = [];
    }
    function _(e) {
      s(e.onEnter) && e.onEnter();
    }
    function F(e) {
      s(e.onLeave) && e.onLeave();
    }
    return (e, t) => (y(), b("div", {
      class: D([g(p).b(), g(p).bm(u.placement)])
    }, [
      (y(!0), b(T, null, j(a.value, (n) => (y(), G(W, {
        key: n.key,
        state: n,
        "transition-name": E.value,
        "inner-class": u.innerClass,
        style: R(I(n)),
        onEnter: (o) => _(n),
        onLeave: (o) => F(n)
      }, {
        default: V(({ item: o }) => [
          X(e.$slots, "item", { item: o })
        ]),
        _: 2
      }, 1032, ["state", "transition-name", "inner-class", "style", "onEnter", "onLeave"]))), 128))
    ], 2));
  }
});
export {
  ae as default
};
//# sourceMappingURL=popup.vue2.mjs.map