ranui 0.1.8 → 0.1.10-alpha.1

package/dist/iconShadowless.js

@@ -0,0 +1,6 @@
+import "./arrow-down-C9jBUUt3.js";
+import "./utils-BMBEcoPj.js";
+import { a } from "./index-GavQwMDL.js";
+export {
+  a as default
+};

package/dist/image.js

@@ -0,0 +1,4 @@
+import { a } from "./index-Du-Biu-I.js";
+export {
+  a as default
+};

package/dist/index-0fvHQjmN.js

@@ -0,0 +1,298 @@
+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);
+  return value;
+};
+import { _ as __variableDynamicImportRuntimeHelper, s as str2Xml } from "./arrow-down-C9jBUUt3.js";
+import "./utils-BMBEcoPj.js";
+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}:host{display:inline-flex}:host([spin]){animation-name:rotate;animation-duration:1.4s;animation-timing-function:linear;animation-iteration-count:infinite}.ran-icon{display:flex;align-items:center;justify-content:center}@keyframes rotate{to{transform:rotate(360deg)}}";
+const X_LINKS_NS = "http://www.w3.org/1999/xlink";
+const X_LINK_HREF = "xlink:href";
+function Custom() {
+  if (typeof window !== "undefined" && !customElements.get("r-icon")) {
+    class RIcon extends HTMLElement {
+      constructor() {
+        super();
+        __publicField(this, "_icon");
+        __publicField(this, "_div");
+        /**
+         * @description: 本地加载 icon
+         */
+        __publicField(this, "loadLocal", () => {
+          return new Promise((resolve, reject) => {
+            __variableDynamicImportRuntimeHelper(/* @__PURE__ */ Object.assign({ "../../assets/icons/add-user.svg": () => import("./add-user-BN1JlY7e.js"), "../../assets/icons/arrow-down.svg": () => import("./arrow-down-C9jBUUt3.js").then((n) => n.a), "../../assets/icons/book.svg": () => import("./book-nTEFXU2x.js"), "../../assets/icons/check-circle-fill.svg": () => import("./check-circle-fill-B_pd8ZSs.js"), "../../assets/icons/check-circle.svg": () => import("./check-circle-szyAJiap.js"), "../../assets/icons/close-circle-fill.svg": () => import("./close-circle-fill-jSqPPw9i.js"), "../../assets/icons/close-circle.svg": () => import("./close-circle-CwmuN2C6.js"), "../../assets/icons/close.svg": () => import("./close-CFnkhudp.js"), "../../assets/icons/eye-close.svg": () => import("./eye-close-BVr3NJtg.js"), "../../assets/icons/eye.svg": () => import("./eye-D_mEt17f.js"), "../../assets/icons/home.svg": () => import("./home-BUQ4USMk.js"), "../../assets/icons/info-circle-fill.svg": () => import("./info-circle-fill-CFeVMdci.js"), "../../assets/icons/info-circle.svg": () => import("./info-circle-COnL5bTJ.js"), "../../assets/icons/loading.svg": () => import("./loading-Dcc5RApI.js"), "../../assets/icons/lock.svg": () => import("./lock-Cr7BnmWN.js"), "../../assets/icons/message.svg": () => import("./message-D36_Zo2l.js"), "../../assets/icons/power-off.svg": () => import("./power-off-lQRbiBak.js"), "../../assets/icons/preview.svg": () => import("./preview-CJbz9GjO.js"), "../../assets/icons/setting.svg": () => import("./setting-DemlgzVC.js"), "../../assets/icons/sprite.svg": () => import("./sprite-CH2zLtZy.js"), "../../assets/icons/team.svg": () => import("./team-tl4NJXPC.js"), "../../assets/icons/unlock.svg": () => import("./unlock-CeU74z9n.js"), "../../assets/icons/user.svg": () => import("./user-B-eVXwuk.js"), "../../assets/icons/warning-circle-fill.svg": () => import("./warning-circle-fill-lODUKz0i.js"), "../../assets/icons/warning-circle.svg": () => import("./warning-circle-DDUgEDIv.js") }), `../../assets/icons/${this.name}.svg`).then((result) => {
+              if (result && result.default && result.default._identification) {
+                const { data } = result.default;
+                this._icon && this._div.removeChild(this._icon);
+                this._icon = str2Xml(data, "image/svg+xml");
+                if (this._icon) {
+                  this._div.appendChild(this._icon);
+                  this.setSize();
+                  this.setColor();
+                  resolve();
+                }
+              } else {
+                this.loadNs();
+                reject(`
+ couldn't be loaded by r-icon, message: ${this.name} icon is undefined`);
+              }
+            }).catch((error) => {
+              this.loadNs();
+            });
+          });
+        });
+        /**
+         * @description: NS 加载 icon
+         */
+        __publicField(this, "loadNs", () => {
+          if (this._icon && this._div) {
+            this._div.removeChild(this._icon);
+          }
+          this._icon = document.createElement("svg");
+          this._icon.setAttribute("class", "icon");
+          this._icon.setAttribute("viewBox", "0 0 1024 1024");
+          this._icon.setAttribute("width", "100");
+          this._icon.setAttribute("height", "100");
+          const use = document.createElementNS(X_LINKS_NS, "use");
+          use.setAttributeNS(X_LINKS_NS, X_LINK_HREF, `../../assets/iconfont/icon.svg#icon-${this.name}`);
+          this._icon.appendChild(use);
+          this._div.appendChild(this._icon);
+        });
+        /**
+         * @description: 根据 name 属性加载对应的 svg
+         */
+        __publicField(this, "setIcon", async () => {
+          if (this.name) {
+            this.loadLocal();
+          }
+        });
+        /**
+         * @description: 设置 icon 的大小
+         */
+        __publicField(this, "setSize", () => {
+          if (this._icon && this.size) {
+            this._icon.setAttribute("width", this.size);
+            this._icon.setAttribute("height", this.size);
+          }
+        });
+        /**
+         * @description: 设置 icon 的颜色
+         */
+        __publicField(this, "setColor", () => {
+          if (this._icon) {
+            this.color ? this._icon.setAttribute("fill", this.color) : this._icon.setAttribute("fill", "currentColor");
+          }
+        });
+        /**
+         * @description: 设置是否旋转和旋转的速度
+         */
+        __publicField(this, "setSpin", () => {
+          if (this.spin) {
+            this.style.setProperty("animation-duration", `${this.spin}s`);
+          }
+        });
+        this._div = document.createElement("div");
+        this._div.setAttribute("class", "ran-icon");
+        this._div.setAttribute("part", "ran-icon");
+        const shadowRoot = this.attachShadow({ mode: "closed" });
+        const F7170EE498E0DD32CBDCB63FBA8F75CC = document.createElement("style");
+        F7170EE498E0DD32CBDCB63FBA8F75CC.textContent = f7170ee498e0dd32cbdcb63fba8f75cc;
+        shadowRoot.appendChild(F7170EE498E0DD32CBDCB63FBA8F75CC);
+        shadowRoot.appendChild(this._div);
+      }
+      static get observedAttributes() {
+        return ["name", "size", "color", "spin"];
+      }
+      get name() {
+        return this.getAttribute("name");
+      }
+      set name(value) {
+        if (value)
+          this.setAttribute("name", value);
+      }
+      get size() {
+        return this.getAttribute("size");
+      }
+      set size(value) {
+        if (value)
+          this.setAttribute("size", value);
+      }
+      get color() {
+        return this.getAttribute("color");
+      }
+      set color(value) {
+        if (value)
+          this.setAttribute("color", value);
+      }
+      get spin() {
+        return this.getAttribute("spin");
+      }
+      set spin(value) {
+        if (value != null)
+          this.setAttribute("spin", value);
+      }
+      connectedCallback() {
+        this.setIcon();
+      }
+      attributeChangedCallback(name, oldValue, newValue) {
+        if (newValue !== oldValue) {
+          if (name === "name")
+            this.setIcon();
+          if (name === "size")
+            this.setSize();
+          if (name === "color")
+            this.setColor();
+          if (name === "spin")
+            this.setSpin();
+        }
+      }
+    }
+    customElements.define("r-icon", RIcon);
+  }
+  if (typeof window !== "undefined" && !customElements.get("ra-icon")) {
+    class RaIcon extends HTMLElement {
+      constructor() {
+        super();
+        __publicField(this, "_icon");
+        __publicField(this, "_div");
+        /**
+         * @description: 本地加载 icon
+         */
+        __publicField(this, "loadLocal", () => {
+          return new Promise((resolve, reject) => {
+            __variableDynamicImportRuntimeHelper(/* @__PURE__ */ Object.assign({ "../../assets/icons/add-user.svg": () => import("./add-user-BN1JlY7e.js"), "../../assets/icons/arrow-down.svg": () => import("./arrow-down-C9jBUUt3.js").then((n) => n.a), "../../assets/icons/book.svg": () => import("./book-nTEFXU2x.js"), "../../assets/icons/check-circle-fill.svg": () => import("./check-circle-fill-B_pd8ZSs.js"), "../../assets/icons/check-circle.svg": () => import("./check-circle-szyAJiap.js"), "../../assets/icons/close-circle-fill.svg": () => import("./close-circle-fill-jSqPPw9i.js"), "../../assets/icons/close-circle.svg": () => import("./close-circle-CwmuN2C6.js"), "../../assets/icons/close.svg": () => import("./close-CFnkhudp.js"), "../../assets/icons/eye-close.svg": () => import("./eye-close-BVr3NJtg.js"), "../../assets/icons/eye.svg": () => import("./eye-D_mEt17f.js"), "../../assets/icons/home.svg": () => import("./home-BUQ4USMk.js"), "../../assets/icons/info-circle-fill.svg": () => import("./info-circle-fill-CFeVMdci.js"), "../../assets/icons/info-circle.svg": () => import("./info-circle-COnL5bTJ.js"), "../../assets/icons/loading.svg": () => import("./loading-Dcc5RApI.js"), "../../assets/icons/lock.svg": () => import("./lock-Cr7BnmWN.js"), "../../assets/icons/message.svg": () => import("./message-D36_Zo2l.js"), "../../assets/icons/power-off.svg": () => import("./power-off-lQRbiBak.js"), "../../assets/icons/preview.svg": () => import("./preview-CJbz9GjO.js"), "../../assets/icons/setting.svg": () => import("./setting-DemlgzVC.js"), "../../assets/icons/sprite.svg": () => import("./sprite-CH2zLtZy.js"), "../../assets/icons/team.svg": () => import("./team-tl4NJXPC.js"), "../../assets/icons/unlock.svg": () => import("./unlock-CeU74z9n.js"), "../../assets/icons/user.svg": () => import("./user-B-eVXwuk.js"), "../../assets/icons/warning-circle-fill.svg": () => import("./warning-circle-fill-lODUKz0i.js"), "../../assets/icons/warning-circle.svg": () => import("./warning-circle-DDUgEDIv.js") }), `../../assets/icons/${this.name}.svg`).then((result) => {
+              if (result && result.default && result.default._identification) {
+                const { data } = result.default;
+                this._icon && this._div.removeChild(this._icon);
+                this._icon = str2Xml(data, "image/svg+xml");
+                if (this._icon) {
+                  this._div.appendChild(this._icon);
+                  this.setSize();
+                  this.setColor();
+                  resolve();
+                }
+              } else {
+                this.loadNs();
+                reject(`
+ couldn't be loaded by r-icon, message: ${this.name} icon is undefined`);
+              }
+            }).catch((error) => {
+              this.loadNs();
+            });
+          });
+        });
+        /**
+         * @description: NS 加载 icon
+         */
+        __publicField(this, "loadNs", () => {
+          if (this._icon && this._div) {
+            this._div.removeChild(this._icon);
+          }
+          this._icon = document.createElement("svg");
+          this._icon.setAttribute("class", "icon");
+          this._icon.setAttribute("viewBox", "0 0 1024 1024");
+          this._icon.setAttribute("width", "100");
+          this._icon.setAttribute("height", "100");
+          const use = document.createElementNS(X_LINKS_NS, "use");
+          use.setAttributeNS(X_LINKS_NS, X_LINK_HREF, `../../assets/iconfont/icon.svg#icon-${this.name}`);
+          this._icon.appendChild(use);
+          this._div.appendChild(this._icon);
+        });
+        /**
+         * @description: 根据 name 属性加载对应的 svg
+         */
+        __publicField(this, "setIcon", async () => {
+          if (this.name) {
+            this.loadLocal();
+          }
+        });
+        /**
+         * @description: 设置 icon 的大小
+         */
+        __publicField(this, "setSize", () => {
+          if (this._icon && this.size) {
+            this._icon.setAttribute("width", this.size);
+            this._icon.setAttribute("height", this.size);
+          }
+        });
+        /**
+         * @description: 设置 icon 的颜色
+         */
+        __publicField(this, "setColor", () => {
+          if (this._icon) {
+            this.color ? this._icon.setAttribute("fill", this.color) : this._icon.setAttribute("fill", "currentColor");
+          }
+        });
+        /**
+         * @description: 设置是否旋转和旋转的速度
+         */
+        __publicField(this, "setSpin", () => {
+          if (this.spin) {
+            this.style.setProperty("animation-duration", `${this.spin}s`);
+          }
+        });
+        this._div = document.createElement("div");
+        this._div.setAttribute("class", "ran-icon");
+        this._div.setAttribute("part", "ran-icon");
+      }
+      static get observedAttributes() {
+        return ["name", "size", "color", "spin"];
+      }
+      get name() {
+        return this.getAttribute("name");
+      }
+      set name(value) {
+        if (value)
+          this.setAttribute("name", value);
+      }
+      get size() {
+        return this.getAttribute("size");
+      }
+      set size(value) {
+        if (value)
+          this.setAttribute("size", value);
+      }
+      get color() {
+        return this.getAttribute("color");
+      }
+      set color(value) {
+        if (value)
+          this.setAttribute("color", value);
+      }
+      get spin() {
+        return this.getAttribute("spin");
+      }
+      set spin(value) {
+        if (value != null)
+          this.setAttribute("spin", value);
+      }
+      connectedCallback() {
+        this.appendChild(this._div);
+        this.setIcon();
+      }
+      attributeChangedCallback(name, oldValue, newValue) {
+        if (newValue !== oldValue) {
+          if (name === "name")
+            this.setIcon();
+          if (name === "size")
+            this.setSize();
+          if (name === "color")
+            this.setColor();
+          if (name === "spin")
+            this.setSpin();
+        }
+      }
+    }
+    customElements.define("ra-icon", RaIcon);
+  }
+}
+const index = Custom();
+const index$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  default: index
+}, Symbol.toStringTag, { value: "Module" }));
+export {
+  index as a,
+  index$1 as i
+};