@extclp/vexip-ui/es/components/dropdown/dropdown.vue2.mjs

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

import { defineComponent as U, inject as X, toRef as N, ref as u, computed as d, provide as L, reactive as Y, watch as k, onMounted as Z, nextTick as S, createElementBlock as ee, openBlock as te, normalizeClass as y, createElementVNode as oe, createVNode as P, withKeys as A, withModifiers as M, unref as r, renderSlot as O, withCtx as R } from "vue";
import "../popper/index.mjs";
import { placementWhileList as re, useRtl as le, useClickOutside as se, usePopper as ie, useSetTimeout as ne } from "@vexip-ui/hooks";
import { useNameHelper as ae, useProps as ue, useHoverDelay as pe, emitEvent as m } from "@vexip-ui/config";
import ce from "./dropdown-drop.mjs";
import { dropdownProps as fe } from "./props.mjs";
import { useLabel as ve } from "./hooks.mjs";
import { DROPDOWN_STATE as x, SELECT_HANDLER as de } from "./symbol.mjs";
import me from "../popper/popper.vue.mjs";
const ge = ["onKeydown"], Ne = /* @__PURE__ */ U({
  name: "Dropdown",
  __name: "dropdown",
  props: fe,
  emits: ["update:visible"],
  setup(V, { expose: $, emit: H }) {
    const l = ae("dropdown"), t = ue("dropdown", V, {
      visible: {
        default: !1,
        static: !0
      },
      placement: {
        default: "bottom",
        validator: (e) => re.includes(e)
      },
      outsideClose: !0,
      trigger: {
        default: "hover",
        validator: (e) => ["hover", "click", "custom"].includes(e)
      },
      label: {
        default: null,
        static: !0
      },
      transitionName: () => l.ns("drop"),
      transfer: !1,
      dropClass: null,
      appear: !1,
      meta: null,
      alive: !1,
      custom: !1,
      shift: !0
    }), K = H, o = X(x, null), { isRtl: B } = le(), E = pe(), n = !!o, W = N(t, "label"), g = u(t.placement), s = u(t.visible), h = u(!1), j = n ? u(!1) : N(t, "transfer"), _ = d(() => !!(o != null && o.shift || t.shift)), b = se(I), T = u(), { reference: w, transferTo: z, updatePopper: q } = ie({
      placement: g,
      shift: _,
      transfer: j,
      wrapper: b,
      popper: d(() => {
        var e;
        return (e = T.value) == null ? void 0 : e.wrapper;
      }),
      isDrop: !0,
      offset: n ? [-5, 0] : void 0
    }), F = ve(W, w), G = d(() => ({
      [l.b()]: !0,
      [l.bs("vars")]: !0,
      [l.bm("inherit")]: t.inherit,
      [l.bm("visible")]: s.value
    })), C = d(() => (o == null ? void 0 : o.alive) || t.alive);
    L(de, null), !t.custom && L(
      x,
      Y({
        alive: C,
        shift: _,
        handleSelect: J,
        handleTriggerEnter: c,
        handleTriggerLeave: f
      })
    ), k(
      () => t.visible,
      (e) => {
        s.value = e;
      }
    ), k(
      () => t.placement,
      (e) => {
        D(e);
      }
    ), k(s, (e) => {
      e && q();
    }), Z(() => {
      S(() => {
        D(t.placement);
      });
    }), $({
      isNested: n,
      currentVisible: s,
      isAlive: C,
      wrapper: b,
      reference: w,
      popper: T,
      handleTriggerEnter: c,
      handleTriggerLeave: f,
      handleTriggerClick: v
    });
    function a(e) {
      s.value !== e && (s.value = e, K("update:visible", e), m(t.onToggle, e));
    }
    function I() {
      m(t.onClickOutside), t.outsideClose && t.trigger !== "custom" && s.value && (a(!1), m(t.onOutsideClose));
    }
    function J(e, i) {
      t.trigger !== "custom" && (a(!1), m(t.onSelect, e, i)), typeof (o == null ? void 0 : o.handleSelect) == "function" && o.handleSelect([F.value, ...e], [t.meta || {}, ...i]);
    }
    function D(e) {
      const [i] = e.split("-");
      n && i !== "right" && i !== "left" ? g.value = B.value ? "left-start" : "right-start" : g.value = e;
    }
    const { timer: p } = ne();
    function c() {
      t.trigger === "hover" && (clearTimeout(p.hover), typeof (o == null ? void 0 : o.handleTriggerEnter) == "function" && o.handleTriggerEnter(), p.hover = setTimeout(() => {
        a(!0);
      }, E.value));
    }
    function f() {
      t.trigger === "hover" && (clearTimeout(p.hover), typeof (o == null ? void 0 : o.handleTriggerLeave) == "function" && o.handleTriggerLeave(), p.hover = setTimeout(() => {
        a(!1);
      }, E.value));
    }
    function v() {
      t.trigger === "click" && a(!s.value);
    }
    return (e, i) => (te(), ee("div", {
      ref_key: "wrapper",
      ref: b,
      class: y(G.value),
      onMouseenter: c,
      onMouseleave: f
    }, [
      oe("div", {
        ref_key: "reference",
        ref: w,
        class: y([r(l).be("trigger"), s.value ? r(l).bem("trigger", "active") : ""]),
        onClick: v,
        onKeydown: [
          A(M(v, ["prevent"]), ["enter"]),
          A(M(v, ["prevent"]), ["space"])
        ]
      }, [
        O(e.$slots, "default")
      ], 42, ge),
      P(r(ce), null, {
        default: R(() => [
          P(r(me), {
            ref_key: "popper",
            ref: T,
            class: y([
              r(l).be("popper"),
              r(l).bs("vars"),
              n ? r(l).bem("popper", "nested") : null,
              r(t).dropClass
            ]),
            visible: s.value,
            alive: C.value || h.value,
            to: r(z),
            transition: r(t).transitionName,
            appear: r(t).appear,
            onMouseenter: c,
            onMouseleave: f,
            onAfterEnter: i[0] || (i[0] = (Q) => h.value = !0),
            onAfterLeave: i[1] || (i[1] = (Q) => h.value = !1)
          }, {
            default: R(() => [
              O(e.$slots, "drop")
            ]),
            _: 3
          }, 8, ["class", "visible", "alive", "to", "transition", "appear"])
        ]),
        _: 3
      })
    ], 34));
  }
});
export {
  Ne as default
};
//# sourceMappingURL=dropdown.vue2.mjs.map