comic-plus
Version:
<p align="center"> <img width="200px" src="./logo.png"/> </p>
107 lines (106 loc) • 4.04 kB
JavaScript
import { defineComponent, ref, computed, watch, openBlock, createBlock, Teleport, createVNode, Transition, withCtx, withDirectives, createElementVNode, normalizeStyle, unref, renderSlot, createElementBlock, toDisplayString, Fragment, createCommentVNode, vShow } from "vue";
import { useMouse } from "@vueuse/core";
import { useFloating, offset, flip, shift } from "@floating-ui/vue";
import { getNextZIndex } from "../../../utils/config.mjs";
import { formatDate } from "../../../utils/tools.mjs";
import { raf } from "../../../utils/client.mjs";
const _hoisted_1 = { class: "floatCard__content" };
const _hoisted_2 = { class: "floatCard__time" };
const _sfc_main = /* @__PURE__ */ defineComponent({
__name: "float-card",
props: {
data: Object,
trigger: Object,
cardWidth: Number
},
setup(__props) {
const props = __props;
const zIndex = ref(0);
const recordData = ref(props.data);
const containerRef = ref();
const virtualEl = ref();
const triggerRef = computed(() => {
return props.trigger;
});
const extractor = (event) => [event.clientX, event.clientY];
const { x, y } = useMouse({ target: triggerRef, touch: false, type: extractor });
const { floatingStyles } = useFloating(virtualEl, containerRef, {
placement: "right-end",
middleware: [offset(10), flip(), shift({ padding: 10 })]
});
const updateVirtualEl = () => {
raf(() => {
virtualEl.value = {
getBoundingClientRect() {
return {
width: 0,
height: 0,
x: x.value,
y: y.value,
left: x.value,
right: x.value,
top: y.value,
bottom: y.value
};
}
};
});
};
watch([x, y], updateVirtualEl);
watch(
() => props.data,
(val) => {
if (val) {
if (zIndex.value === 0) {
zIndex.value = getNextZIndex();
}
recordData.value = val;
updateVirtualEl();
} else {
zIndex.value = 0;
}
}
);
return (_ctx, _cache) => {
return openBlock(), createBlock(Teleport, { to: "body" }, [
createVNode(Transition, { name: "cu-fade" }, {
default: withCtx(() => [
withDirectives(createElementVNode("div", {
class: "cu-calendar--floatCard",
ref_key: "containerRef",
ref: containerRef,
style: normalizeStyle({
...unref(floatingStyles),
zIndex: zIndex.value,
"max-width": __props.cardWidth ? __props.cardWidth + "px" : void 0
})
}, [
renderSlot(_ctx.$slots, "default", { data: recordData.value }, () => [
recordData.value ? (openBlock(), createElementBlock("div", {
key: 0,
class: "floatCard__container",
style: normalizeStyle({ "--card-color": recordData.value.color })
}, [
createElementVNode("div", _hoisted_1, toDisplayString(recordData.value.content), 1),
createElementVNode("div", _hoisted_2, [
createElementVNode("span", null, toDisplayString(unref(formatDate)(recordData.value.startDate, "MM-dd")), 1),
recordData.value.endDate.getTime() > recordData.value.startDate.getTime() ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
_cache[0] || (_cache[0] = createElementVNode("span", null, "~", -1)),
createElementVNode("span", null, toDisplayString(unref(formatDate)(recordData.value.endDate, "MM-dd")), 1)
], 64)) : createCommentVNode("", true)
])
], 4)) : createCommentVNode("", true)
])
], 4), [
[vShow, !!__props.data]
])
]),
_: 3
})
]);
};
}
});
export {
_sfc_main as default
};