ranui
Version:
A framework-agnostic Web Components UI library built on native custom elements, with TypeScript types, light/dark theming, SSR and PWA support.
116 lines (115 loc) • 6.18 kB
JavaScript
import { a, n as o, r as e, t as u } from "./utils-D1iZnChu.js";
import { i, p as h } from "./factory-ZNhcQ4tf.js";
import { a as d, n as g } from "./ssr-DSGwPtEd.js";
var c = '.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-glass-display, inline-block);position:var(--ran-glass-position, relative);border-radius:var(--ran-glass-radius, 20px);isolation:isolate;-webkit-tap-highlight-color:transparent}.ran-glass-defs{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}.ran-glass{position:relative;box-sizing:border-box;min-width:var(--ran-glass-min-width, 0);min-height:var(--ran-glass-min-height, 0);padding:var(--ran-glass-padding, 0);border-radius:inherit;overflow:hidden;color:inherit;-webkit-backdrop-filter:blur(var(--ran-glass-blur, 16px)) saturate(var(--ran-glass-saturate, 180%)) brightness(var(--ran-glass-brightness, 1.05));backdrop-filter:blur(var(--ran-glass-blur, 16px)) saturate(var(--ran-glass-saturate, 180%)) brightness(var(--ran-glass-brightness, 1.05)) var(--ran-glass-refraction, url(#ran-glass-filter));background:var(--ran-glass-tint, rgba(255, 255, 255, .14));border:var(--ran-glass-border, 1px solid rgba(255, 255, 255, .35));box-shadow:var(--ran-glass-shadow, inset 0 1px 1px rgba(255, 255, 255, .6), inset 0 0 0 1px rgba(255, 255, 255, .06), inset 0 -20px 40px rgba(255, 255, 255, .04), 0 24px 60px -18px rgba(0, 0, 0, .5));transition:var(--ran-glass-transition, transform var(--ran-motion-duration-base, .2s) var(--ran-motion-ease-spring, cubic-bezier(.34, 1.26, .5, 1)))}.ran-glass-specular{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:var(--ran-glass-specular-opacity, 1);background:var(--ran-glass-specular, linear-gradient(180deg, rgba(255, 255, 255, .28), transparent 34%), radial-gradient(120% 80% at 50% 0%, rgba(255, 255, 255, .18), transparent 60%))}.ran-glass-specular:after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.4) 50%,transparent 58%);transform:translate(-130%);opacity:0}:host([sheen]) .ran-glass-specular:after{opacity:.7;animation:ran-glass-sheen var(--ran-glass-sheen-duration, 6s) ease-in-out infinite}@keyframes ran-glass-sheen{50%{transform:translate(130%)}}.ran-glass ::slotted(*){position:relative;z-index:1}:host([interactive]) .ran-glass{cursor:pointer}:host([interactive]:hover) .ran-glass{transform:translateY(-2px)}:host([interactive]:active) .ran-glass{transform:translateY(0) scale(.98);transition-duration:var(--ran-motion-duration-fast, .15s)}@media(prefers-reduced-motion:reduce){:host([sheen]) .ran-glass-specular:after{animation:none;opacity:0}.ran-glass{transition:none}}', p = 0, b = class n extends g {
_shadowDom;
_glass;
_turb = null;
_disp = null;
_uid = `ran-glass-${p += 1}`;
static get observedAttributes() {
return [
"blur",
"saturate",
"displace",
"frequency",
"radius",
"tint"
];
}
constructor() {
super(), this._shadowDom = o(this, c), this._glass = u(this._shadowDom, ".ran-glass", () => i().class("ran-glass").attr("part", "glass").children(i().class("ran-glass-specular").attr("part", "specular"), h()).build());
}
get saturate() {
return e(this, "saturate");
}
set saturate(t) {
a(this, "saturate", t);
}
get displace() {
return e(this, "displace");
}
set displace(t) {
a(this, "displace", t);
}
get frequency() {
return e(this, "frequency");
}
set frequency(t) {
a(this, "frequency", t);
}
get radius() {
return e(this, "radius");
}
set radius(t) {
a(this, "radius", t);
}
get tint() {
return e(this, "tint");
}
set tint(t) {
a(this, "tint", t);
}
get sheen() {
return this.hasAttribute("sheen");
}
set sheen(t) {
this.toggleAttribute("sheen", t);
}
get interactive() {
return this.hasAttribute("interactive");
}
set interactive(t) {
this.toggleAttribute("interactive", t);
}
_ensureFilter() {
if (!(this._disp || typeof document > "u")) {
if (!this._shadowDom.querySelector(".ran-glass-defs")) {
const t = document.createElement("div");
t.className = "ran-glass-defs", t.setAttribute("aria-hidden", "true"), t.innerHTML = `<svg><filter id="${this._uid}" x="-20%" y="-20%" width="140%" height="140%"><feTurbulence type="fractalNoise" baseFrequency="0.004 0.006" numOctaves="2" seed="7" result="n"/><feGaussianBlur in="n" stdDeviation="2" result="sn"/><feDisplacementMap in="SourceGraphic" in2="sn" scale="8" xChannelSelector="R" yChannelSelector="G"/></filter></svg>`, this._shadowDom.insertBefore(t, this._shadowDom.firstChild), this.style.setProperty("--ran-glass-refraction", `url(#${this._uid})`);
}
this._turb = this._shadowDom.querySelector("feTurbulence"), this._disp = this._shadowDom.querySelector("feDisplacementMap");
}
}
_apply(t) {
const s = this.getAttribute(t);
switch (t) {
case "blur":
this._setVar("--ran-glass-blur", s, "px");
break;
case "saturate":
this._setVar("--ran-glass-saturate", s, "%");
break;
case "radius":
this._setVar("--ran-glass-radius", s, "px");
break;
case "tint":
this._setVar("--ran-glass-tint", s);
break;
case "displace":
this._ensureFilter(), this._disp && s != null && this._disp.setAttribute("scale", s);
break;
case "frequency":
this._ensureFilter(), this._turb && s != null && this._turb.setAttribute("baseFrequency", s);
break;
}
}
_setVar(t, s, r = "") {
if (s == null || s === "") {
this.style.removeProperty(t);
return;
}
const l = r && /^-?\d*\.?\d+$/.test(s.trim());
this.style.setProperty(t, l ? `${s.trim()}${r}` : s);
}
connectedCallback() {
this._ensureFilter(), n.observedAttributes.forEach((t) => this._apply(t));
}
attributeChangedCallback(t, s, r) {
s !== r && this._apply(t);
}
};
d("r-glass", b);
export {
b as t
};