ranui
Version:
A framework-agnostic Web Components UI library built on native custom elements, with TypeScript types, light/dark theming, SSR and PWA support.
257 lines (256 loc) • 9.95 kB
JavaScript
import { a as c, n as h, o as d, r as n, t as u } from "./utils-D1iZnChu.js";
import { t as v } from "./events-C59wGdni.js";
import { _ as g, i as f } from "./factory-ZNhcQ4tf.js";
import { a as p, n as m } from "./ssr-DSGwPtEd.js";
var w = ".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-icon-host-display, inline-flex)}:host([spin]){animation-name:var(--ran-icon-host-spin-animation-name, rotate);animation-duration:var(--ran-icon-host-spin-animation-name, 1.4s);animation-timing-function:linear;animation-iteration-count:var(--ran-icon-host-spin-animation-name, 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-keyframes-to-transform, rotate(360deg))}}", y = {
success: !0,
_identification: !0,
data: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></g></svg>'
}, _ = {
success: !0,
_identification: !0,
data: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></g></svg>'
}, b = {
success: !0,
_identification: !0,
data: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></g></svg>'
}, k = {
success: !0,
_identification: !0,
data: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3M8 21H5a2 2 0 0 1-2-2v-3m18 0v3a2 2 0 0 1-2 2h-3"/></g></svg>'
}, x = {
success: !0,
_identification: !0,
data: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/><line x1="11" y1="8" x2="11" y2="14"/><line x1="8" y1="11" x2="14" y2="11"/></g></svg>'
}, A = {
success: !0,
_identification: !0,
data: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/><line x1="8" y1="11" x2="14" y2="11"/></g></svg>'
}, S = {
success: !0,
_identification: !0,
data: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 4 23 10 17 10"/><polyline points="1 20 1 14 7 14"/><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/></g></svg>'
}, C = {
copy: y,
check: _,
download: b,
fullscreen: k,
"zoom-in": x,
"zoom-out": A,
refresh: S
}, z = !1, l = /* @__PURE__ */ new Map(), a = !1, o = (t) => /<svg[\s>]/i.test(t), E = (t) => {
if (typeof t == "string") return o(t) ? t : void 0;
if (!t || typeof t != "object") return;
const e = t, i = e.data;
if (typeof i == "string" && o(i)) return i;
const s = e.default;
if (typeof s == "string" && o(s)) return s;
if (s && typeof s == "object") {
const r = s;
if (typeof r.data == "string" && o(r.data)) return r.data;
}
}, D = (t, e) => {
a = !0;
const i = E(e);
i && (l.set(`inline:${t}`, i), typeof window < "u" && window.dispatchEvent(new CustomEvent("ranui-icon-registered", { detail: { name: t } })));
}, j = (t) => {
a = !0, Object.entries(t).forEach(([e, i]) => {
D(e, i);
});
};
j(C);
var N = [
"add-user",
"arrow-down",
"book",
"check",
"check-circle",
"check-circle-fill",
"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",
"more",
"plus",
"power-off",
"preview",
"refresh",
"search",
"setting",
"sort",
"team",
"unlock",
"user",
"warning-circle",
"warning-circle-fill",
"without-content",
"zoom-in",
"zoom-out"
], M = class extends m {
isDev = z;
_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 = h(this, w);
const t = u(this._shadowDom, ".ran-icon", () => f().class("ran-icon").part("ran-icon").build());
this._div = t;
}
get name() {
return n(this, "name");
}
set name(t) {
t && this.setAttribute("name", t);
}
get size() {
return n(this, "size");
}
set size(t) {
t && this.setAttribute("size", t);
}
get color() {
return n(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 n(this, "aria-label");
}
set ariaLabel(t) {
c(this, "aria-label", t, { removeEmpty: !0 });
}
get sheet() {
return n(this, "sheet");
}
set sheet(t) {
c(this, "sheet", t);
}
handlerExternalCss = () => {
d(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}`, i = l.get(e);
if (!i) {
this.isDev && a && console.warn(`[ranui-icon] icon not registered: ${t}`);
return;
}
i && this.isSvgText(i) ? this.renderSvg(i, t) : this.isDev && console.warn(`[ranui-icon] invalid svg text: ${t}`);
} catch (e) {
this.isDev && console.warn(`[ranui-icon] render icon failed: ${t}`, e);
}
};
isSvgText = (t) => o(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 i = new XMLSerializer().serializeToString(e), s = g("template").build();
s.innerHTML = i.trim();
const r = s.content.firstElementChild;
if (!(!r || r.tagName.toLowerCase() !== "svg"))
return r;
};
renderSvg = (t, e) => {
const i = this.parseSvg(t);
i ? (this._icon = i, 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, i) {
e !== i && (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", M);
export {
S as a,
k as c,
y as d,
j as i,
b as l,
N as n,
A as o,
D as r,
x as s,
M as t,
_ as u
};