comic-plus
Version:
<p align="center"> <img width="200px" src="./logo.png"/> </p>
131 lines (130 loc) • 4.62 kB
JavaScript
import { defineComponent, ref, computed, watch, openBlock, createElementBlock, Fragment, withDirectives, createBlock, resolveDynamicComponent, unref, mergeProps, withCtx, createElementVNode, renderSlot, createVNode } from "vue";
import "../style/dropdown.css";
import { CuPopper } from "../../popper/index.mjs";
import { CuButton } from "../../button/index.mjs";
import { useEventListener } from "@vueuse/core";
import "../../../utils/config.mjs";
import { useClickOutside } from "../../../utils/click-outside.mjs";
import { isVueComponent } from "../../../utils/typescript.mjs";
import { dropdownProps } from "./main.props.mjs";
import "../../../icons/index.mjs";
import { Down } from "../../../icons/components/components.mjs";
const _hoisted_1 = { class: "cu-dropdown__trigger" };
const _sfc_main = /* @__PURE__ */ defineComponent({
...{
name: "CuDropdownContent"
},
__name: "dropdown-content",
props: dropdownProps,
setup(__props) {
const props = __props;
var timer, clearTriggerEvent, clearTriggerLeave, clearPopperEvent, clearPopperLeave;
const vClickOutside = useClickOutside();
const show = ref(false);
const popperRef = ref(null);
const dropdownTriggerRef = ref(null);
const attrs = computed(() => {
if (!props.button) return null;
return {
size: props.size,
type: props.buttonType,
disabled: props.disabled
};
});
const EVENT_TYPE = {
click: () => {
clearTriggerEvent = useEventListener(dropdownTriggerRef, "click", trigger);
},
"right-click": () => {
clearTriggerEvent = useEventListener(dropdownTriggerRef, "contextmenu", trigger);
},
hover: () => {
clearTriggerEvent = useEventListener(dropdownTriggerRef, "mouseenter", enter);
clearTriggerLeave = useEventListener(dropdownTriggerRef, "mouseleave", startTime);
clearPopperEvent = useEventListener(popperRef, "mouseenter", enter);
clearPopperLeave = useEventListener(popperRef, "mouseleave", startTime);
}
};
function enter(e) {
trigger(e);
turnTime();
}
function startTime() {
timer = setTimeout(() => {
hidePopper();
}, 300);
}
function turnTime() {
if (timer) {
clearTimeout(timer);
timer = null;
}
}
function trigger(e) {
e.preventDefault();
show.value = true;
}
function hidePopper() {
show.value && (show.value = false);
}
function chooseAfterHideClick() {
if (props.chooseAfterHide) {
hidePopper();
}
}
function clearEvent() {
clearTriggerEvent == null ? void 0 : clearTriggerEvent();
clearTriggerLeave == null ? void 0 : clearTriggerLeave();
clearPopperEvent == null ? void 0 : clearPopperEvent();
clearPopperLeave == null ? void 0 : clearPopperLeave();
}
watch(
[() => props.trigger, () => props.disabled],
(val) => {
var _a;
clearEvent();
if (val[1]) return;
(_a = EVENT_TYPE[val[0]]) == null ? void 0 : _a.call(EVENT_TYPE);
},
{ immediate: true }
);
return (_ctx, _cache) => {
return openBlock(), createElementBlock(Fragment, null, [
withDirectives((openBlock(), createBlock(resolveDynamicComponent(_ctx.button ? unref(CuButton) : "div"), mergeProps(attrs.value, {
class: ["cu-dropdown-content", { "is-disabled": _ctx.disabled }],
ref_key: "dropdownTriggerRef",
ref: dropdownTriggerRef
}), {
default: withCtx(() => [
createElementVNode("div", _hoisted_1, [
_ctx.button ? (openBlock(), createBlock(resolveDynamicComponent(unref(isVueComponent)(_ctx.buttonIcon) ? _ctx.buttonIcon : unref(Down)), { key: 0 })) : renderSlot(_ctx.$slots, "default", { key: 1 })
])
]),
_: 3
}, 16, ["class"])), [
[unref(vClickOutside), hidePopper, popperRef.value]
]),
createVNode(unref(CuPopper), {
show: show.value,
"custom-class": _ctx.popperClass,
trigger: dropdownTriggerRef.value
}, {
default: withCtx(() => [
createElementVNode("div", {
ref_key: "popperRef",
ref: popperRef,
class: "cu-dropdown__popper",
onClick: chooseAfterHideClick
}, [
renderSlot(_ctx.$slots, "dropdown")
], 512)
]),
_: 3
}, 8, ["show", "custom-class", "trigger"])
], 64);
};
}
});
export {
_sfc_main as default
};