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

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

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