ranui
Version:
A framework-agnostic Web Components UI library built on native custom elements, with TypeScript types, light/dark theming, SSR and PWA support.
295 lines (294 loc) • 13.9 kB
JavaScript
import { _ as u, i as f } from "./factory-WDxu11V0.js";
import { t as v } from "./events-Cqz3ramM.js";
import "./builder-EH76YCFS.js";
import { i as c, n as o, o as g, t as m } from "./utils-U-9uH7EX.js";
import { a as p, n as b } from "./ssr-BzykYefm.js";
var w = ":host{display:var(--ran-icon-host-display, inline-flex)}:host([spin]){animation-name:var(--ran-icon-host-spin-animation, rotate);animation-duration:var(--ran-icon-host-spin-animation, 1.4s);animation-timing-function:linear;animation-iteration-count:var(--ran-icon-host-spin-animation, infinite)}.ran-icon{display:var(--ran-icon-display, flex);align-items:var(--ran-icon-align-items, center);justify-content:var(--ran-icon-justify-content, center);color:var(--ran-icon-color, inherit);font-size:var(--ran-icon-font-size, 1em);margin:var(--ran-icon-margin, 0)}.ran-icon svg{width:var(--ran-icon-svg-width, 1em);height:var(--ran-icon-svg-height, 1em);fill:var(--ran-icon-svg-fill, currentColor);stroke:var(--ran-icon-svg-stroke, currentColor)}@keyframes rotate{to{transform:var(--ran-icon-host-spin-transform, rotate(360deg))}}", y = !1, h = /* @__PURE__ */ new Map(), a = !1, r = (t) => /<svg[\s>]/i.test(t), _ = (t) => {
if (typeof t == "string") return r(t) ? t : void 0;
if (!t || typeof t != "object") return;
const e = t, s = e.data;
if (typeof s == "string" && r(s)) return s;
const i = e.default;
if (typeof i == "string" && r(i)) return i;
if (i && typeof i == "object") {
const n = i;
if (typeof n.data == "string" && r(n.data)) return n.data;
}
}, l = (t, e) => {
a = !0;
const s = _(e);
s && (h.set(`inline:${t}`, s), typeof window < "u" && window.dispatchEvent(new CustomEvent("ranui-icon-registered", { detail: { name: t } })));
}, I = (t) => {
a = !0, Object.entries(t).forEach(([e, s]) => {
l(e, s);
});
}, A = /* @__PURE__ */ Object.assign({
"../../assets/icons/add-user.svg": () => import("./add-user-DfBFkCnJ.js").then((t) => t.n).then((t) => t.default),
"../../assets/icons/arrow-down.svg": () => import("./arrow-down-B6_1Kbcg.js").then((t) => t.n).then((t) => t.default),
"../../assets/icons/book.svg": () => import("./book-DUmorlwf.js").then((t) => t.n).then((t) => t.default),
"../../assets/icons/cast.svg": () => import("./cast-B3elr6fu.js").then((t) => t.n).then((t) => t.default),
"../../assets/icons/check-circle-fill.svg": () => import("./check-circle-fill-DWM-2VQc.js").then((t) => t.n).then((t) => t.default),
"../../assets/icons/check-circle.svg": () => import("./check-circle-CnpiEx1K.js").then((t) => t.n).then((t) => t.default),
"../../assets/icons/check.svg": () => import("./check-BEoPhSfZ.js").then((t) => t.n).then((t) => t.default),
"../../assets/icons/chevron-down.svg": () => import("./chevron-down-DRUABlJy.js").then((t) => t.n).then((t) => t.default),
"../../assets/icons/close-circle-fill.svg": () => import("./close-circle-fill-DqvDy_Bf.js").then((t) => t.n).then((t) => t.default),
"../../assets/icons/close-circle.svg": () => import("./close-circle-CJkjIM8m.js").then((t) => t.n).then((t) => t.default),
"../../assets/icons/close.svg": () => import("./close-D4AmwT1V.js").then((t) => t.n).then((t) => t.default),
"../../assets/icons/copy.svg": () => import("./copy-CqZjV4i2.js").then((t) => t.n).then((t) => t.default),
"../../assets/icons/download.svg": () => import("./download-vhNSLCeg.js").then((t) => t.n).then((t) => t.default),
"../../assets/icons/drop.svg": () => import("./drop-DBZkUjZr.js").then((t) => t.n).then((t) => t.default),
"../../assets/icons/eye-close.svg": () => import("./eye-close-BSoIc1oj.js").then((t) => t.n).then((t) => t.default),
"../../assets/icons/eye.svg": () => import("./eye-Ctsj5bfE.js").then((t) => t.n).then((t) => t.default),
"../../assets/icons/fullscreen.svg": () => import("./fullscreen-BU4JuuEL.js").then((t) => t.n).then((t) => t.default),
"../../assets/icons/github.svg": () => import("./github-CeDoYKhZ.js").then((t) => t.n).then((t) => t.default),
"../../assets/icons/globe.svg": () => import("./globe-DIZ0Ki22.js").then((t) => t.n).then((t) => t.default),
"../../assets/icons/home.svg": () => import("./home-CcLgxiaO.js").then((t) => t.n).then((t) => t.default),
"../../assets/icons/info-circle-fill.svg": () => import("./info-circle-fill-DCNQCPZ9.js").then((t) => t.n).then((t) => t.default),
"../../assets/icons/info-circle.svg": () => import("./info-circle-JzD8z-kG.js").then((t) => t.n).then((t) => t.default),
"../../assets/icons/issue.svg": () => import("./issue-CWRKJS2V.js").then((t) => t.n).then((t) => t.default),
"../../assets/icons/loading-scene.svg": () => import("./loading-scene-DmzV6WiL.js").then((t) => t.n).then((t) => t.default),
"../../assets/icons/loading.svg": () => import("./loading--1eC6HwB.js").then((t) => t.n).then((t) => t.default),
"../../assets/icons/lock.svg": () => import("./lock-DoqyIASp.js").then((t) => t.n).then((t) => t.default),
"../../assets/icons/menu.svg": () => import("./menu-CbeCzN4-.js").then((t) => t.n).then((t) => t.default),
"../../assets/icons/message.svg": () => import("./message-BCrZnSBS.js").then((t) => t.n).then((t) => t.default),
"../../assets/icons/mic-off.svg": () => import("./mic-off-UhngXK2Y.js").then((t) => t.n).then((t) => t.default),
"../../assets/icons/mic.svg": () => import("./mic-CcjXOqQV.js").then((t) => t.n).then((t) => t.default),
"../../assets/icons/more.svg": () => import("./more-h7nyGZMk.js").then((t) => t.n).then((t) => t.default),
"../../assets/icons/pause.svg": () => import("./pause-BH0W0dLI.js").then((t) => t.n).then((t) => t.default),
"../../assets/icons/pencil.svg": () => import("./pencil-H40a5VG9.js").then((t) => t.n).then((t) => t.default),
"../../assets/icons/pip.svg": () => import("./pip-U67u-Uw_.js").then((t) => t.n).then((t) => t.default),
"../../assets/icons/play.svg": () => import("./play-VYD6FTp-.js").then((t) => t.n).then((t) => t.default),
"../../assets/icons/plus.svg": () => import("./plus-DxQEUhuw.js").then((t) => t.n).then((t) => t.default),
"../../assets/icons/power-off.svg": () => import("./power-off-BKpAz0aZ.js").then((t) => t.n).then((t) => t.default),
"../../assets/icons/preview.svg": () => import("./preview-gd9ayK9s.js").then((t) => t.n).then((t) => t.default),
"../../assets/icons/refresh.svg": () => import("./refresh-D2t33mZ3.js").then((t) => t.n).then((t) => t.default),
"../../assets/icons/search.svg": () => import("./search-DkXPfdII.js").then((t) => t.n).then((t) => t.default),
"../../assets/icons/setting.svg": () => import("./setting-CMt5fbYQ.js").then((t) => t.n).then((t) => t.default),
"../../assets/icons/sort.svg": () => import("./sort-BN5B1X9F.js").then((t) => t.n).then((t) => t.default),
"../../assets/icons/sprite.svg": () => import("./sprite-CUyEIYBs.js").then((t) => t.n).then((t) => t.default),
"../../assets/icons/team.svg": () => import("./team-C4Kz47a5.js").then((t) => t.n).then((t) => t.default),
"../../assets/icons/unlock.svg": () => import("./unlock-DIzOKbH5.js").then((t) => t.n).then((t) => t.default),
"../../assets/icons/user.svg": () => import("./user-BzcQqO9f.js").then((t) => t.n).then((t) => t.default),
"../../assets/icons/volume-mute.svg": () => import("./volume-mute-CnXptGgN.js").then((t) => t.n).then((t) => t.default),
"../../assets/icons/volume.svg": () => import("./volume-BPWjdmsr.js").then((t) => t.n).then((t) => t.default),
"../../assets/icons/warning-circle-fill.svg": () => import("./warning-circle-fill-RPdgezdq.js").then((t) => t.n).then((t) => t.default),
"../../assets/icons/warning-circle.svg": () => import("./warning-circle-ncTxgs_n.js").then((t) => t.n).then((t) => t.default),
"../../assets/icons/without-content.svg": () => import("./without-content-DhxOdACo.js").then((t) => t.n).then((t) => t.default),
"../../assets/icons/zoom-in.svg": () => import("./zoom-in--8CF2Gmz.js").then((t) => t.n).then((t) => t.default),
"../../assets/icons/zoom-out.svg": () => import("./zoom-out-C_uyMrpy.js").then((t) => t.n).then((t) => t.default)
}), d = {};
for (const [t, e] of Object.entries(A)) {
const s = t.split("/").pop()?.replace(/\.svg$/, "");
s && s !== "sprite" && (d[s] = e);
}
var E = [
"add-user",
"arrow-down",
"book",
"cast",
"check",
"check-circle",
"check-circle-fill",
"chevron-down",
"close",
"close-circle",
"close-circle-fill",
"copy",
"download",
"drop",
"eye",
"eye-close",
"fullscreen",
"github",
"globe",
"home",
"info-circle",
"info-circle-fill",
"issue",
"loading",
"loading-scene",
"lock",
"menu",
"message",
"mic",
"mic-off",
"more",
"pause",
"pencil",
"pip",
"play",
"plus",
"power-off",
"preview",
"refresh",
"search",
"setting",
"sort",
"team",
"unlock",
"user",
"volume",
"volume-mute",
"warning-circle",
"warning-circle-fill",
"without-content",
"zoom-in",
"zoom-out"
], S = class extends b {
isDev = y;
_events = new v();
static get observedAttributes() {
return [
"name",
"size",
"color",
"spin",
"decorative",
"aria-label",
"sheet"
];
}
_icon;
_div;
_shadowDom;
_onIconRegistered = (t) => {
const e = t.detail?.name;
e && e === this.name && !this._icon && this.setIcon();
};
constructor() {
super(), this._shadowDom = m(this, w);
const t = f().class("ran-icon").part("ran-icon").build();
this._shadowDom.appendChild(t), this._div = t;
}
get name() {
return o(this, "name");
}
set name(t) {
t && this.setAttribute("name", t);
}
get size() {
return o(this, "size");
}
set size(t) {
t && this.setAttribute("size", t);
}
get color() {
return o(this, "color");
}
set color(t) {
t && this.setAttribute("color", t);
}
get spin() {
return this.hasAttribute("spin");
}
set spin(t) {
t ? this.setAttribute("spin", "") : this.removeAttribute("spin");
}
get decorative() {
const t = this.getAttribute("decorative");
return t == null ? !this.hasAttribute("aria-label") : t !== "false" && t !== "0";
}
set decorative(t) {
this.setAttribute("decorative", t ? "true" : "false");
}
get ariaLabel() {
return o(this, "aria-label");
}
set ariaLabel(t) {
c(this, "aria-label", t, { removeEmpty: !0 });
}
get sheet() {
return o(this, "sheet");
}
set sheet(t) {
c(this, "sheet", t);
}
handlerExternalCss = () => {
g(this, this._shadowDom, "sheet", null, this.sheet);
};
syncA11y = () => {
if (this._icon) {
if (this.decorative) {
this.setAttribute("aria-hidden", "true"), this.removeAttribute("role"), this._icon.setAttribute("aria-hidden", "true"), this._icon.setAttribute("focusable", "false");
return;
}
this.removeAttribute("aria-hidden"), this.setAttribute("role", "img"), this._icon.removeAttribute("aria-hidden"), this._icon.setAttribute("focusable", "false");
}
};
setIcon = () => {
if (typeof document > "u") return;
this._icon && (this._icon.remove(), this._icon = void 0);
const t = this.name;
if (t)
if (t.startsWith("<svg")) this.renderSvg(t, t);
else try {
const e = `inline:${t}`, s = h.get(e);
if (!s) {
const i = d[t];
if (i) {
this.lazyLoadBuiltinIcon(t, i);
return;
}
this.isDev && a && console.warn(`[ranui-icon] icon not registered: ${t}`);
return;
}
s && this.isSvgText(s) ? this.renderSvg(s, t) : this.isDev && console.warn(`[ranui-icon] invalid svg text: ${t}`);
} catch (e) {
this.isDev && console.warn(`[ranui-icon] render icon failed: ${t}`, e);
}
};
lazyLoadBuiltinIcon = (t, e) => {
e().then((s) => {
l(t, s);
}).catch((s) => {
this.isDev && console.warn(`[ranui-icon] lazy load builtin failed: ${t}`, s);
});
};
isSvgText = (t) => r(t);
parseSvg = (t) => {
const e = new window.DOMParser().parseFromString(t, "image/svg+xml").documentElement;
if (!e || e.tagName.toLowerCase() === "parsererror" || e.tagName.toLowerCase() !== "svg") return;
const s = new XMLSerializer().serializeToString(e), i = u("template").build();
i.innerHTML = s.trim();
const n = i.content.firstElementChild;
if (!(!n || n.tagName.toLowerCase() !== "svg"))
return n;
};
renderSvg = (t, e) => {
const s = this.parseSvg(t);
s ? (this._icon = s, this._icon.setAttribute("part", "icon-svg"), this._icon.setAttribute("data-name", e), this._div.appendChild(this._icon), this.setSize(), this.setColor(), this.setSpin(), this.syncA11y()) : this.isDev && console.warn(`[ranui-icon] parse svg failed: ${e}`);
};
setSize = () => {
if (this._icon) {
const t = this.size || "1em";
this._icon.setAttribute("width", t), this._icon.setAttribute("height", t);
const e = /^\d+(\.\d+)?$/.test(t) ? `${t}px` : t;
this._icon.style.setProperty("width", e), this._icon.style.setProperty("height", e);
}
};
setColor = () => {
if (this._icon) {
const t = this.color || "currentColor";
this._icon.style.setProperty("color", t), this._icon.style.setProperty("fill", t), this._icon.style.setProperty("stroke", t);
}
};
setSpin = () => {
this.spin ? this._div.classList.add("ran-icon-spin") : this._div.classList.remove("ran-icon-spin");
};
connectedCallback() {
this._events.on(window, "ranui-icon-registered", this._onIconRegistered), this.handlerExternalCss(), this.setIcon();
}
disconnectedCallback() {
this._events.abort();
}
attributeChangedCallback(t, e, s) {
e !== s && (t === "name" && this.setIcon(), t === "size" && this.setSize(), t === "color" && this.setColor(), t === "spin" && this.setSpin(), (t === "decorative" || t === "aria-label") && this.syncA11y(), t === "sheet" && this.handlerExternalCss());
}
};
p("r-icon", S);
export {
I as i,
E as n,
l as r,
S as t
};