comic-plus
Version:
<p align="center"> <img width="200px" src="./logo.png"/> </p>
131 lines (130 loc) • 4.73 kB
JavaScript
;
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const vue = require("vue");
require("../style/dropdown.css");
const index$1 = require("../../popper/index.js");
const index = require("../../button/index.js");
const core = require("@vueuse/core");
require("../../../utils/config.js");
const clickOutside = require("../../../utils/click-outside.js");
const typescript = require("../../../utils/typescript.js");
const main_props = require("./main.props.js");
require("../../../icons/index.js");
const components = require("../../../icons/components/components.js");
const _hoisted_1 = { class: "cu-dropdown__trigger" };
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
...{
name: "CuDropdownContent"
},
__name: "dropdown-content",
props: main_props.dropdownProps,
setup(__props) {
const props = __props;
var timer, clearTriggerEvent, clearTriggerLeave, clearPopperEvent, clearPopperLeave;
const vClickOutside = clickOutside.useClickOutside();
const show = vue.ref(false);
const popperRef = vue.ref(null);
const dropdownTriggerRef = vue.ref(null);
const attrs = vue.computed(() => {
if (!props.button) return null;
return {
size: props.size,
type: props.buttonType,
disabled: props.disabled
};
});
const EVENT_TYPE = {
click: () => {
clearTriggerEvent = core.useEventListener(dropdownTriggerRef, "click", trigger);
},
"right-click": () => {
clearTriggerEvent = core.useEventListener(dropdownTriggerRef, "contextmenu", trigger);
},
hover: () => {
clearTriggerEvent = core.useEventListener(dropdownTriggerRef, "mouseenter", enter);
clearTriggerLeave = core.useEventListener(dropdownTriggerRef, "mouseleave", startTime);
clearPopperEvent = core.useEventListener(popperRef, "mouseenter", enter);
clearPopperLeave = core.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();
}
vue.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 vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
vue.withDirectives((vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.button ? vue.unref(index.CuButton) : "div"), vue.mergeProps(attrs.value, {
class: ["cu-dropdown-content", { "is-disabled": _ctx.disabled }],
ref_key: "dropdownTriggerRef",
ref: dropdownTriggerRef
}), {
default: vue.withCtx(() => [
vue.createElementVNode("div", _hoisted_1, [
_ctx.button ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(typescript.isVueComponent)(_ctx.buttonIcon) ? _ctx.buttonIcon : vue.unref(components.Down)), { key: 0 })) : vue.renderSlot(_ctx.$slots, "default", { key: 1 })
])
]),
_: 3
}, 16, ["class"])), [
[vue.unref(vClickOutside), hidePopper, popperRef.value]
]),
vue.createVNode(vue.unref(index$1.CuPopper), {
show: show.value,
"custom-class": _ctx.popperClass,
trigger: dropdownTriggerRef.value
}, {
default: vue.withCtx(() => [
vue.createElementVNode("div", {
ref_key: "popperRef",
ref: popperRef,
class: "cu-dropdown__popper",
onClick: chooseAfterHideClick
}, [
vue.renderSlot(_ctx.$slots, "dropdown")
], 512)
]),
_: 3
}, 8, ["show", "custom-class", "trigger"])
], 64);
};
}
});
exports.default = _sfc_main;