@layui/layui-vue
Version:
a component library for Vue 3 base on layui-vue
58 lines (57 loc) • 4.31 kB
JavaScript
import { defineComponent as A, computed as o, ref as u, reactive as I, onUnmounted as M, watch as L, provide as h, inject as Y, openBlock as j, createElementBlock as z, Fragment as H, createVNode as g, normalizeProps as J, guardReactiveProps as K, withCtx as P, renderSlot as b, mergeProps as V } from "vue";
/* empty css */
import { useResizeObserver as U } from "@vueuse/core";
import X from "../popper/component/trigger.js";
import q from "../popper/component/content.js";
import { POPPER_INJECTION_KEY as G } from "../popper/utils.js";
import { DROPDOWN_INJECTION_KEY as C } from "./interface.js";
import Q from "../popper/hook/useDelayTrigger.js";
import { pointMiddleware as Z } from "./utils.js";
import { isArray as ee } from "../utils/arrayUtil.js";
import { offset as te, shift as oe, flip as ae, hide as le } from "@floating-ui/dom";
const ye = A({ name: "LayDropdown", __name: "index", props: { visible: { type: Boolean, default: !1 }, trigger: { default: "click" }, placement: { default: "bottom-start" }, disabled: { type: Boolean }, autoFitPosition: { type: Boolean, default: !0 }, autoFitWidth: { type: Boolean, default: !1 }, autoFitMinWidth: { type: Boolean, default: !0 }, clickToClose: { type: Boolean, default: !0 }, blurToClose: { type: Boolean, default: !0 }, clickOutsideToClose: { type: Boolean, default: !0 }, contentOffset: { default: "2px" }, mouseEnterDelay: { default: 150 }, mouseLeaveDelay: { default: 150 }, focusDelay: { default: 150 }, alignPoint: { type: Boolean }, contentClass: {}, contentStyle: { type: [Boolean, null, String, Object, Array] }, teleportProps: {} }, emits: ["show", "hide"], setup(w, { expose: B, emit: k }) {
const e = w, x = k, a = o(() => ee(e.trigger) ? e.trigger : [e.trigger]), D = o(() => {
var t, l;
return { to: ((t = e.teleportProps) == null ? void 0 : t.to) || "body", disabled: ((l = e.teleportProps) == null ? void 0 : l.disabled) ?? !1 };
}), i = u(e.visible), p = u(null), O = o(() => ({ click: (t) => {
a.value.includes("click") && (i.value && !e.clickToClose || (e.alignPoint && f(t), c()));
}, contextmenu: (t) => {
a.value.includes("contextMenu") && (i.value && !e.clickToClose || (e.alignPoint && f(t), t.preventDefault(), c()));
}, focusout: () => {
a.value.includes("focus") && e.blurToClose && n();
} })), r = I({ x: 0, y: 0 }), f = (t) => {
r.x = t.pageX, r.y = t.pageY;
}, T = o(() => ({ trigger: a.value, customEvents: O.value })), m = u(), { stop: v } = U(p, (t) => {
const l = t[0], { width: $ } = l.contentRect;
m.value = $;
});
M(() => {
v && v();
});
const E = o(() => {
const t = {}, l = e.alignPoint ? 0 : m.value || 0;
return e.autoFitMinWidth && (t.minWidth = `${l}px`), e.autoFitWidth && (t.width = `${l}px`), t;
}), _ = o(() => Number(`${e.contentOffset}`.replace("px", "") ?? 0)), F = o(() => [te(_.value), oe(), e.autoFitPosition && ae(), e.alignPoint && Z(r), le()].filter(Boolean)), N = o(() => ({ modelValue: i.value, trigger: a.value, placement: e.placement, disabled: e.disabled, enterable: !0, popperClass: ["layui-anim-upbit", "layui-dropdown-content", e.contentClass], popperStyle: [e.contentStyle, E.value], clickOutsideToClose: e.clickOutsideToClose, middlewares: F.value, teleportProps: D.value })), y = () => {
i.value = !1;
};
L(() => i.value, (t) => {
x(t ? "show" : "hide", t);
});
const R = o(() => a.value.includes("hover") ? e.mouseEnterDelay : a.value.includes("focus") ? e.focusDelay : 0), S = o(() => a.value.includes("hover") ? e.mouseLeaveDelay : a.value.includes("focus") ? e.focusDelay : 0), { onShow: d, onHidden: n } = Q({ showAfter: R.value, hideAfter: S.value, show: () => {
e.disabled || (i.value = !0);
}, hidden: y });
h(G, { TriggerRef: p, onShow: d, onHidden: n });
const W = u(), c = function() {
i.value ? n() : d();
}, s = Y(C, {});
return h(C, { hide: () => {
y(), s != null && s.hide && (s == null || s.hide());
} }), B({ show: function() {
d();
}, hide: function() {
n();
}, toggle: c }), (t, l) => (j(), z(H, null, [g(X, J(K(T.value)), { default: P(() => [b(t.$slots, "default")]), _: 3 }, 16), g(q, V(N.value, { ref_key: "ContentRef", ref: W }), { default: P(() => [b(t.$slots, "content")]), _: 3 }, 16)], 64));
} });
export {
ye as default
};