@randevcx/ranui
Version:
UI Component library based on `Web Component`
207 lines (206 loc) • 8.48 kB
JavaScript
var __defProp = Object.defineProperty;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __publicField = (obj, key, value) => {
__defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
return value;
};
import { H as HTMLElementSSR, c as createCustomError } from "./index-CSnBqUsQ.js";
class Popover extends HTMLElementSSR() {
constructor() {
super();
__publicField(this, "_slot");
__publicField(this, "popoverBlock");
__publicField(this, "popoverContent");
__publicField(this, "popoverArrow");
__publicField(this, "popoverInner");
__publicField(this, "popoverInnerBlock");
__publicField(this, "removePopoverTimeId");
__publicField(this, "createContent", (content) => {
if (!content)
return;
if (!this.popoverContent) {
const div = document.createElement("div");
this.popoverContent = document.createElement("div");
this.popoverContent.setAttribute("class", "ran-popover-content");
this.popoverContent.addEventListener("click", this.clickContent);
this.popoverArrow = document.createElement("div");
this.popoverArrow.setAttribute("class", "ran-popover-content-arrow");
this.popoverInner = document.createElement("div");
this.popoverInner.setAttribute("class", "ran-popover-content-inner");
this.popoverInnerBlock = document.createElement("div");
this.popoverInnerBlock.setAttribute("class", "ran-popover-content-inner-block");
this.popoverContent.appendChild(this.popoverArrow);
this.popoverContent.appendChild(this.popoverInner);
this.popoverInner.appendChild(this.popoverInnerBlock);
div.appendChild(this.popoverContent);
document.body.appendChild(div);
}
if (this.popoverInnerBlock && content.length > 0) {
this.popoverInnerBlock.innerHTML = "";
const Fragment = document.createDocumentFragment();
for (const child of content) {
Fragment.appendChild(child);
}
this.popoverInnerBlock.appendChild(Fragment);
}
});
__publicField(this, "watchContent", (e) => {
const { value } = e.detail;
this.createContent(value.content);
this.placementPosition();
});
__publicField(this, "placementPosition", () => {
var _a, _b, _c, _d;
if (!this.popoverInnerBlock || !this.popoverContent)
return;
(_a = this.popoverContent) == null ? void 0 : _a.style.setProperty("display", "block");
(_b = this.popoverContent) == null ? void 0 : _b.style.setProperty("opacity", "1");
const rect = this.getBoundingClientRect();
const { top, left, bottom, width } = rect;
this.popoverContent.style.setProperty("--ran-x", `${(left + window.scrollX).toFixed(2)}px`);
this.popoverContent.style.setProperty("--ran-y", `${(top + window.scrollY).toFixed(2)}px`);
let popoverTop = bottom + window.scrollY;
let popoverLeft = left + window.scrollX;
const root = document.getElementById(this.getPopupContainerId);
const arrowHeight = 8;
let popoverArrowTransform = `translateX(-50%) translateY(-40%) rotate(0deg)`;
let popoverArrowTop = -arrowHeight;
let popoverArrowLeft = left + this.popoverContent.clientWidth / 2 - arrowHeight / 2;
if (this.placement === "top") {
popoverTop = top + window.scrollY - this.popoverContent.clientHeight - arrowHeight;
if (this.getPopupContainerId && root) {
popoverTop = top - root.getBoundingClientRect().top - this.popoverContent.clientHeight;
popoverLeft = left - root.getBoundingClientRect().left;
}
popoverArrowTransform = "translateX(-50%) translateY(40%) rotate(180deg)";
popoverArrowTop = this.popoverContent.clientHeight - arrowHeight;
popoverArrowLeft = width / 2;
}
(_c = this.popoverArrow) == null ? void 0 : _c.style.setProperty("inset", `${popoverArrowTop}px auto auto ${popoverArrowLeft}px`);
(_d = this.popoverArrow) == null ? void 0 : _d.style.setProperty("transform", popoverArrowTransform);
this.popoverContent.style.setProperty("inset", `${popoverTop}px auto auto ${popoverLeft}px`);
});
__publicField(this, "hoverPopover", () => {
if (this.removePopoverTimeId) {
clearTimeout(this.removePopoverTimeId);
this.removePopoverTimeId = void 0;
}
});
__publicField(this, "clickContent", (e) => {
e.stopPropagation();
});
__publicField(this, "clickPopover", (e) => {
e.stopPropagation();
this.placementPosition();
});
__publicField(this, "clickRemovePopover", () => {
this.hoverRemovePopover();
});
__publicField(this, "popoverTrigger", () => {
this.removeEventListener("mouseenter", this.hoverPopover);
this.removeEventListener("click", this.hoverPopover);
this.removeEventListener("mouseleave", this.hoverRemovePopover);
this.removeEventListener("click", this.clickPopover);
document.removeEventListener("click", this.clickRemovePopover);
if (this.trigger === "hover") {
this.addEventListener("mouseenter", this.placementPosition);
this.addEventListener("mouseleave", this.hoverRemovePopover);
} else {
this.addEventListener("click", this.clickPopover);
document.addEventListener("click", this.clickRemovePopover);
}
});
__publicField(this, "hoverRemovePopover", () => {
if (this.removePopoverTimeId) {
clearTimeout(this.removePopoverTimeId);
this.removePopoverTimeId = void 0;
}
this.removePopoverTimeId = setTimeout(() => {
var _a;
(_a = this.popoverContent) == null ? void 0 : _a.style.setProperty("opacity", "0");
setTimeout(() => {
var _a2;
(_a2 = this.popoverContent) == null ? void 0 : _a2.style.setProperty("display", "none");
}, 300);
}, 100);
});
this._slot = document.createElement("slot");
this.popoverBlock = document.createElement("div");
this.popoverBlock.setAttribute("class", "ran-popover-block");
this.popoverBlock.setAttribute("role", "tooltip");
this.popoverBlock.appendChild(this._slot);
}
static get observedAttributes() {
return ["placement", "arrow", "trigger"];
}
get placement() {
return this.getAttribute("placement") || "top";
}
set placement(value) {
this.setAttribute("placement", value);
}
get arrow() {
return this.getAttribute("arrow") || "";
}
set arrow(value) {
this.setAttribute("arrow", value);
}
get trigger() {
return this.getAttribute("trigger") || "";
}
set trigger(value) {
this.setAttribute("trigger", value);
}
get getPopupContainerId() {
return this.getAttribute("getPopupContainerId") || "";
}
set getPopupContainerId(value) {
this.setAttribute("getPopupContainerId", value);
}
connectedCallback() {
this.setAttribute("class", "ran-popover");
this.appendChild(this.popoverBlock);
for (const element of this.children) {
if (element.tagName === "R-CONTENT") {
element.addEventListener("change", this.watchContent);
this.createContent(element.children);
}
}
this.popoverTrigger();
}
disconnectCallback() {
var _a;
this.removeEventListener("mouseenter", this.hoverPopover);
this.removeEventListener("mouseleave", this.hoverRemovePopover);
this.removeEventListener("click", this.hoverPopover);
this.removeEventListener("click", this.placementPosition);
document.removeEventListener("click", this.clickRemovePopover);
(_a = this.popoverContent) == null ? void 0 : _a.removeEventListener("click", this.clickContent);
}
attributeChangedCallback(n, o, v) {
if (o !== v) {
if (n === "trigger") {
this.popoverTrigger();
}
}
}
}
function Custom() {
if (typeof document !== "undefined" && !customElements.get("r-popover")) {
customElements.define("r-popover", Popover);
return Popover;
} else {
return createCustomError("document is undefined or r-popover is exist");
}
}
const index = Custom();
const index$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
__proto__: null,
Popover,
default: index
}, Symbol.toStringTag, { value: "Module" }));
export {
Popover as P,
index as a,
index$1 as i
};