ranui
Version:
A framework-agnostic Web Components UI library built on native custom elements, with TypeScript types, light/dark theming, SSR and PWA support.
175 lines (174 loc) • 8.78 kB
JavaScript
import { a as d, d as u, n as f, o as C, r as l, t as b, u as n } from "./utils-D1iZnChu.js";
import { t as y } from "./events-C59wGdni.js";
import { _ as D, i as g, p as I } from "./factory-ZNhcQ4tf.js";
import { a as T, n as k } from "./ssr-DSGwPtEd.js";
import "./dropdown-CzGAVWYC.js";
import "./content-YOKzMoc7.js";
var P = ".remove-wap-active-focus{outline:0;-webkit-tap-highlight-color:transparent}.remove-wap-active-focus:active,.remove-wap-active-focus:focus{outline:0;-webkit-tap-highlight-color:transparent}:host{display:var(--ran-popover-host-display, block)}.ran-popover{box-sizing:var(--ran-popover-box-sizing, border-box);position:var(--ran-popover-position, relative);display:var(--ran-popover-display, block);margin:var(--ran-popover-margin, 0);padding:var(--ran-popover-padding, 0)}.ran-popover-block{display:var(--ran-popover-block-display, block)}", s = 8, c = 300, p = 16, w = {
bottom: {
add: "ran-dropdown-down-in",
remove: "ran-dropdown-down-out"
},
top: {
add: "ran-dropdown-up-in",
remove: "ran-dropdown-up-out"
},
left: {
add: "ran-dropdown-left-in",
remove: "ran-dropdown-left-out"
},
right: {
add: "ran-dropdown-right-in",
remove: "ran-dropdown-right-out"
}
}, S = /* @__PURE__ */ (function(t) {
return t.TOP = "top", t.BOTTOM = "bottom", t.LEFT = "left", t.RIGHT = "right", t;
})({}), x = class extends k {
_events = new y();
_slot;
popoverBlock;
popoverContent;
popoverInner;
popoverInnerBlock;
_shadowDom;
dropDownInTimeId;
dropDownOutTimeId;
removeTimeId;
static get observedAttributes() {
return [
"placement",
"trigger",
"sheet"
];
}
closePopover = () => {
this.setDropdownDisplayNone();
};
constructor() {
super(), this._shadowDom = f(this, P);
const t = b(this._shadowDom, ".ran-popover-block", () => g().class("ran-popover-block").role("tooltip").children(I().class("slot")).build());
this.popoverBlock = t, this._slot = t.querySelector(".slot");
}
get placement() {
return l(this, "placement", "top");
}
set placement(t) {
d(this, "placement", t);
}
get trigger() {
return l(this, "trigger", "hover");
}
set trigger(t) {
d(this, "trigger", t);
}
get getPopupContainerId() {
return l(this, "getPopupContainerId");
}
set getPopupContainerId(t) {
d(this, "getPopupContainerId", t);
}
get sheet() {
return l(this, "sheet");
}
set sheet(t) {
d(this, "sheet", t);
}
handlerExternalCss = () => {
C(this, this._shadowDom, "sheet", null, this.sheet);
};
initAria = () => {
this.hasAttribute("tabindex") || (this.tabIndex = 0), this.setAttribute("aria-haspopup", "dialog"), this.setAttribute("aria-expanded", "false");
};
updateAriaExpanded = (t) => {
this.setAttribute("aria-expanded", t ? "true" : "false");
};
stopPropagation = (t) => {
t.stopPropagation();
};
createContent = (t) => {
if (t) {
if (!this.popoverContent) {
this.popoverContent = D("r-dropdown").class("ran-popover-dropdown").style("display", "none").style("position", "absolute").build(), this.popoverContent?.addEventListener("click", this.stopPropagation);
const e = g().children(this.popoverContent).build();
this.trigger.includes("hover") && !u() && (this.popoverContent?.addEventListener("mouseleave", this.blur), this.popoverContent?.addEventListener("mouseenter", this.removeDropDownTimeId)), document.body.appendChild(e);
}
if (this.popoverContent && t.length > 0) {
this.popoverContent.innerHTML = "";
const e = document.createDocumentFragment();
for (const r of t) e.appendChild(r);
this.popoverContent.appendChild(e);
}
}
};
watchContent = (t) => {
const { value: e } = t.detail;
this.createContent(e.content);
};
blur = n(() => {
this.removeTimeId && this.removeDropDownTimeId(), this.removeTimeId = setTimeout(() => {
this.removeDropDownTimeId(), this.setDropdownDisplayNone();
}, c);
}, p);
removeDropDownTimeId = n(() => {
this.trigger.includes("hover") && !u() && (clearTimeout(this.removeTimeId), this.removeTimeId = void 0);
}, p);
setDropdownDisplayBlock = n(() => {
this.dropDownInTimeId || (clearTimeout(this.dropDownInTimeId), this.dropDownInTimeId = void 0, clearTimeout(this.dropDownOutTimeId), this.dropDownOutTimeId = void 0, this.popoverContent && this.popoverContent.style.display !== "block" && (this.updateAriaExpanded(!0), this.popoverContent.setAttribute("transit", w[this.placement].add), this.popoverContent?.style.setProperty("display", "block"), this.placementPosition(), this.dropDownInTimeId = setTimeout(() => {
this.popoverContent && this.popoverContent.removeAttribute("transit"), clearTimeout(this.dropDownInTimeId), this.dropDownInTimeId = void 0;
}, c)));
}, p);
setDropdownDisplayNone = n(() => {
this.dropDownOutTimeId || (clearTimeout(this.dropDownInTimeId), this.dropDownInTimeId = void 0, clearTimeout(this.dropDownOutTimeId), this.dropDownOutTimeId = void 0, this.popoverContent && this.popoverContent.style.display !== "none" && (this.updateAriaExpanded(!1), this.popoverContent.setAttribute("transit", w[this.placement].remove), this.dropDownOutTimeId = setTimeout(() => {
this.popoverContent?.style.setProperty("display", "none"), this.popoverContent && this.popoverContent.removeAttribute("transit"), clearTimeout(this.dropDownOutTimeId), this.dropDownOutTimeId = void 0;
}, c)));
}, p);
placementPosition = () => {
if (!this.popoverContent) return;
const { top: t, left: e, bottom: r, width: v, height: m } = this.getBoundingClientRect();
let o = r + window.scrollY + s, i = e + window.scrollX;
const a = document.getElementById(this.getPopupContainerId), h = this.popoverContent.getBoundingClientRect();
this.placement === "top" && (o = t + window.scrollY - Math.max(h.height, m) - s, this.getPopupContainerId && a && (i = e - a.getBoundingClientRect().left, o = t - a.getBoundingClientRect().top - this.popoverContent.clientHeight - s, i = e - a.getBoundingClientRect().left)), this.placement === "left" && (i = e - Math.max(h.width, v) - s, o = t + window.scrollY), this.placement === "right" && (i = e + v + s, o = t + window.scrollY), this.popoverContent.style.setProperty("inset", `${o}px auto auto ${i}px`), this.popoverContent.style.setProperty("--ran-x", `${i}px`), this.popoverContent.style.setProperty("--ran-y", `${o}px`), this.popoverContent.style.setProperty("--ran-dropdown-arrow-anchor-width", `${v}px`), this.popoverContent.style.setProperty("--ran-dropdown-arrow-anchor-height", `${m}px`), this.popoverContent.style.setProperty("--ran-dropdown-min-width", `${h.width}px`), this.popoverContent.style.setProperty("--ran-dropdown-min-height", `${h.height}px`);
};
hoverPopover = (t) => {
this.clickPopover(t);
};
clickContent = (t) => {
t.stopPropagation();
};
clickPopover = (t) => {
t.stopPropagation(), t.preventDefault(), this.setDropdownDisplayBlock();
};
keydownPopover = (t) => {
(t.key === "Enter" || t.key === " ") && (t.preventDefault(), this.setDropdownDisplayBlock()), t.key === "Escape" && (t.preventDefault(), this.setDropdownDisplayNone());
};
clickRemovePopover = (t) => {
this.hoverRemovePopover(t);
};
popoverTrigger = () => {
this._events.abort();
for (const t of this.children) t.tagName === "R-CONTENT" && this._events.on(t, "change", this.watchContent);
this.trigger.includes("hover") && (this._events.on(this, "mouseenter", this.hoverPopover), this._events.on(this, "mouseleave", this.blur)), this._events.on(this, "click", this.clickPopover).on(this, "keydown", this.keydownPopover).on(document, "click", this.clickRemovePopover);
};
hoverRemovePopover = (t) => {
t.stopPropagation(), this.setDropdownDisplayNone();
};
changePlacement = n(() => {
this.placement === "top" && this.popoverContent?.setAttribute("arrow", "bottom"), this.placement === "bottom" && this.popoverContent?.setAttribute("arrow", "top"), this.placement === "left" && this.popoverContent?.setAttribute("arrow", "right"), this.placement === "right" && this.popoverContent?.setAttribute("arrow", "left");
}, p);
connectedCallback() {
this.initAria(), this.handlerExternalCss();
for (const t of this.children) t.tagName === "R-CONTENT" && this.createContent(t.children);
this.popoverTrigger(), this.changePlacement();
}
disconnectedCallback() {
this._events.abort();
}
attributeChangedCallback(t, e, r) {
e !== r && (t === "trigger" && this.popoverTrigger(), t === "placement" && this.changePlacement(), t === "sheet" && this.handlerExternalCss());
}
};
T("r-popover", x);
export {
x as n,
S as t
};