ranui 0.1.10-alpha.9 → 0.2.0-alpha.1

package/dist/icon-Blm7AbyY.js

@@ -0,0 +1,167 @@
+import { c as l, d, l as n, s as v, u as c } from "./utils-D4pPF77E.js";
+import { t as f } from "./events-C59wGdni.js";
+import { _ as u, i as g } from "./factory-BdsO0dEW.js";
+import { a as m, n as p } from "./ssr-DSGwPtEd.js";
+var b = ".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))}}", _ = !1, h = /* @__PURE__ */ new Map(), a = !1, o = (t) => /<svg[\s>]/i.test(t), w = (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;
+  }
+}, y = (t, e) => {
+  a = !0;
+  const i = w(e);
+  i && (h.set(`inline:${t}`, i), typeof window < "u" && window.dispatchEvent(new CustomEvent("ranui-icon-registered", { detail: { name: t } })));
+}, D = (t) => {
+  a = !0, Object.entries(t).forEach(([e, i]) => {
+    y(e, i);
+  });
+}, A = class extends p {
+  isDev = _;
+  _events = new f();
+  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 = l(this, b);
+    const t = v(this._shadowDom, ".ran-icon", () => g().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 = h.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 = u("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());
+  }
+};
+m("r-icon", A);
+export {
+  y as n,
+  D as r,
+  A as t
+};

package/dist/icon.js

@@ -1,6 +1,6 @@
-import "./drop-4j4abxje.js";
-import { a } from "./index-D4qUro5V.js";
-import "./arrow-down-B_hCY3Wt.js";
+import { n as o, r as s, t as e } from "./icon-Blm7AbyY.js";
 export {
-  a as default
+  e as Icon,
+  o as registerIcon,
+  s as registerIcons
 };

package/dist/{index-KS2nvVcO.js → image-DKm6z7YQ.js}

@@ -1,75 +1,64 @@
-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);
-const f7170ee498e0dd32cbdcb63fba8f75cc = ".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}";
-const failImage = `
+import { c as i, d as Q, l as E, s as g, u as a } from "./utils-D4pPF77E.js";
+import { i as s } from "./factory-BdsO0dEW.js";
+import { a as h, n as o } from "./ssr-DSGwPtEd.js";
+var n = `
     data:image/png;base64,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
-`;
-function Custom() {
-  if (typeof window !== "undefined" && !customElements.get("r-img")) {
-    class CustomElement extends HTMLElement {
-      constructor() {
-        super();
-        __publicField(this, "_image");
-        __publicField(this, "_container");
-        this._container = document.createElement("div");
-        this._container.setAttribute("class", "ran-image");
-        const shadowRoot = this.attachShadow({ mode: "closed" });
-        const F7170EE498E0DD32CBDCB63FBA8F75CC = document.createElement("style");
-        F7170EE498E0DD32CBDCB63FBA8F75CC.textContent = f7170ee498e0dd32cbdcb63fba8f75cc;
-        shadowRoot.appendChild(F7170EE498E0DD32CBDCB63FBA8F75CC);
-        shadowRoot.appendChild(this._container);
-      }
-      static get observedAttributes() {
-        return ["fallback"];
-      }
-      get fallback() {
-        return this.getAttribute("fallback") || failImage;
-      }
-      set fallback(value) {
-        if (value) {
-          this.setAttribute("fallback", value);
-        } else {
-          this.removeAttribute("fallback");
-        }
-      }
-      listenFallback(name, value) {
-        if (name === "fallback" && this._image) {
-          if (value) {
-            this._image.setAttribute("fallback", value);
-          } else {
-            this._image.removeAttribute("fallback");
-          }
-        }
-      }
-      connectedCallback() {
-        const src = this.getAttribute("src") || "";
-        this._image = new Image();
-        this._image.src = src;
-        this._image.addEventListener("error", () => {
-          if (this._image && this.fallback) {
-            this._image.src = this.fallback;
-          }
-        });
-        this._image.addEventListener("load", () => {
-          if (this._image) {
-            this._container.appendChild(this._image);
-          }
-        });
-      }
-      attributeChangedCallback(name, oldValue, newValue) {
-        this.listenFallback(name, newValue);
-      }
-    }
-    customElements.define("r-img", CustomElement);
+`, r = ".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}", B = class extends o {
+  static get observedAttributes() {
+    return [
+      "src",
+      "fallback",
+      "sheet",
+      "alt"
+    ];
   }
-}
-const index = Custom();
-const index$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
-  __proto__: null,
-  default: index
-}, Symbol.toStringTag, { value: "Module" }));
+  _image;
+  _container;
+  _shadowDom;
+  constructor() {
+    super(), this._shadowDom = i(this, r);
+    const A = g(this._shadowDom, ".ran-image", () => s().class("ran-image").build());
+    this._container = A;
+  }
+  get fallback() {
+    return E(this, "fallback", n);
+  }
+  set fallback(A) {
+    a(this, "fallback", A, { removeEmpty: !0 });
+  }
+  get sheet() {
+    return E(this, "sheet");
+  }
+  set sheet(A) {
+    a(this, "sheet", A);
+  }
+  get alt() {
+    return E(this, "alt");
+  }
+  set alt(A) {
+    a(this, "alt", A);
+  }
+  handlerExternalCss = () => {
+    Q(this, this._shadowDom, "sheet", null, this.sheet);
+  };
+  listenFallback(A, t) {
+    A === "fallback" && this._image && (t ? this._image.setAttribute("fallback", t) : this._image.removeAttribute("fallback"));
+  }
+  updateSrc = () => {
+    this._image && (this._image.src = this.getAttribute("src") || "");
+  };
+  connectedCallback() {
+    this.handlerExternalCss(), this._image = new Image(), this._image.alt = this.alt, this._image.addEventListener("error", () => {
+      this._image && this.fallback && (this._image.src = this.fallback);
+    }), this._image.addEventListener("load", () => {
+      this._image && this._container.appendChild(this._image);
+    }), this.updateSrc();
+  }
+  attributeChangedCallback(A, t, e) {
+    t !== e && (this.listenFallback(A, e), A === "src" && this.updateSrc(), A === "alt" && this._image && (this._image.alt = e ?? ""), A === "sheet" && this.handlerExternalCss());
+  }
+};
+h("r-img", B);
 export {
-  index as a,
-  index$1 as i
+  B as t
 };

package/dist/image.js

@@ -1,4 +1,5 @@
-import { a } from "./index-KS2nvVcO.js";
+import { t } from "./image-DKm6z7YQ.js";
 export {
-  a as default
+  t as ImageElement,
+  t as default
 };