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