comic-plus
Version:
<p align="center"> <img width="200px" src="./logo.png"/> </p>
233 lines (232 loc) • 6.95 kB
JavaScript
import { defineComponent, reactive, ref, computed, provide, watch, onMounted, openBlock, createElementBlock, normalizeClass, normalizeStyle, createElementVNode, renderSlot, createBlock, resolveDynamicComponent, unref, warn } from "vue";
import { useEventListener, onClickOutside } from "@vueuse/core";
import "../style/pistol.css";
import { pistolProps, pistolEmits } from "./main.props.mjs";
import { PISTOL_PROVIDE } from "./type.mjs";
import "../../../utils/config.mjs";
import { isVueComponent } from "../../../utils/typescript.mjs";
import "../../../icons/index.mjs";
import { HamburgerButton } from "../../../icons/components/components.mjs";
const _hoisted_1 = { class: "cu-pistol__defaultwarpper" };
const _sfc_main = /* @__PURE__ */ defineComponent({
...{
name: "CuPistol"
},
__name: "main",
props: pistolProps,
emits: pistolEmits,
setup(__props, { expose: __expose, emit: __emit }) {
const props = __props;
const emit = __emit;
const bullets = reactive({});
const pistolRef = ref(null);
const pistolContainerRef = ref(null);
const show = ref(false);
let timer, clearTriggerEvent, clearTriggerLeave, clearOutside;
const bulletsLength = computed(() => {
return Object.keys(bullets).length;
});
const elNums = computed(() => {
return props.equal ? bulletsLength.value : 8;
});
const pistolStyle = computed(() => {
return {
width: props.size + "px",
height: props.size + "px",
"--pistol-custom-color": props.color
};
});
function containerHandleClick(e) {
emit("trigger-click", e);
show.value = !show.value;
}
function getEx(n, s) {
if (!props.equal) {
n = Math.max(8, n);
}
var t = s / (2 * Math.tan(Math.PI / n));
var c = t - s / 2;
c = Math.max(15, c);
return c + 10;
}
function setItemStyle() {
let len = bulletsLength.value;
if (!props.equal) {
len = Math.max(8, len);
}
for (let i = 0; i < len; i++) {
const { x, y } = getPostion(i, len);
let key = Object.keys(bullets)[i];
if (bullets[key]) {
bullets[key].style = {
"--x": x + "px",
"--y": y + "px"
};
}
}
}
function getPostion(i, len) {
var x = 0, y = 0;
if (props.mode === "wheel") {
let d = props.size / 2;
let ex = getEx(bulletsLength.value, props.size);
var angle = getAngle(i, len);
x = (d + ex) * Math.cos(angle);
y = (d + ex) * Math.sin(angle);
} else {
if (["left", "right"].includes(props.direction)) {
x = (i + 1) * props.size + 4 * (i + 1);
if (props.direction === "left") {
x = 0 - x;
}
} else {
y = (i + 1) * props.size + 4 * (i + 1);
if (props.direction === "top") {
y = 0 - y;
}
}
}
return { x, y };
}
function getAngle(i, len) {
let angleStep = 2 * Math.PI / elNums.value;
return {
top: i * angleStep + 3 * Math.PI / 2,
left: (i - 0.5 * len) * angleStep,
bottom: Math.PI / 2 + i * angleStep,
right: 0 + i * angleStep
}[props.direction ?? "top"];
}
function handleMouseEnter() {
show.value = true;
if (timer) {
clearTimeout(timer);
timer = null;
}
}
function handleMouseLeave() {
timer = setTimeout(() => {
show.value = false;
}, 300);
}
function addBullet(item) {
bullets[item.uid] = item;
}
function removeBullet(uid) {
if (bullets[uid]) {
delete bullets[uid];
}
}
function itemHandleClick(sign) {
if (!sign) {
warn("The current menu item does not have a sign attribute");
}
emit("shoot", sign);
if (props.chooseAfterHide) {
if (timer) {
clearTimeout(timer);
timer = null;
}
show.value = false;
}
}
function open() {
show.value = true;
if (timer) {
clearTimeout(timer);
timer = null;
}
}
function close() {
show.value = false;
if (timer) {
clearTimeout(timer);
timer = null;
}
}
provide(PISTOL_PROVIDE, {
props,
pistolStyle,
bullets,
addBullet,
removeBullet,
itemHandleClick
});
__expose({
open,
close
});
const EVENT_TYPE = {
click: () => {
clearTriggerEvent = useEventListener(pistolContainerRef, "click", containerHandleClick);
clearOutside = onClickOutside(pistolRef, () => show.value = false);
},
hover: () => {
clearTriggerEvent = useEventListener(pistolRef, "mouseenter", handleMouseEnter);
clearTriggerLeave = useEventListener(pistolRef, "mouseleave", handleMouseLeave);
}
};
function clearEvent() {
clearTriggerEvent == null ? void 0 : clearTriggerEvent();
clearTriggerLeave == null ? void 0 : clearTriggerLeave();
clearOutside == null ? void 0 : clearOutside();
}
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 }
);
watch(show, (val) => {
if (val) {
emit("open");
} else {
emit("close");
}
});
watch([bulletsLength, () => props.size, () => props.direction, () => props.equal], () => {
setItemStyle();
});
onMounted(() => {
setItemStyle();
});
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", {
class: normalizeClass(["cu-pistol", [
{ expand: show.value },
_ctx.type ? "cu-pistol--" + _ctx.type : void 0,
_ctx.mode ? "mode-" + _ctx.mode : void 0,
{ "is-disabled": _ctx.disabled }
]]),
ref_key: "pistolRef",
ref: pistolRef,
style: normalizeStyle({ "--cu-pistol-size": props.size + "px" })
}, [
createElementVNode("div", {
class: "cu-pistol__container",
ref_key: "pistolContainerRef",
ref: pistolContainerRef,
style: normalizeStyle(pistolStyle.value)
}, [
renderSlot(_ctx.$slots, "default", {}, () => [
createElementVNode("div", _hoisted_1, [
(openBlock(), createBlock(resolveDynamicComponent(unref(isVueComponent)(_ctx.icon) ? _ctx.icon : unref(HamburgerButton)), { class: "default-icon" }))
])
])
], 4),
createElementVNode("ul", {
class: normalizeClass(["cu-pistol__magazine", props.direction])
}, [
renderSlot(_ctx.$slots, "magazine")
], 2)
], 6);
};
}
});
export {
_sfc_main as default
};