ranui
Version:
UI Component library based on `Web Component`
147 lines (146 loc) • 7.82 kB
JavaScript
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);
import { _ as __variableDynamicImportRuntimeHelper } from "./more-2vsTDpcc.js";
import { s as str2Xml } from "./plus-BQnIzzvi.js";
const X_LINKS_NS = "http://www.w3.org/1999/xlink";
const X_LINK_HREF = "xlink:href";
function Custom() {
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("./info-circle-fill-DjI8gXS3.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/drop.svg": () => import("./more-2vsTDpcc.js").then((n) => n.d), "../../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-DjI8gXS3.js").then((n) => n.i), "../../assets/icons/info-circle.svg": () => import("./info-circle-COnL5bTJ.js"), "../../assets/icons/loading-scene.svg": () => import("./loading-scene-BMc2wqKm.js"), "../../assets/icons/loading.svg": () => import("./loading-Dcc5RApI.js"), "../../assets/icons/lock.svg": () => import("./lock-Cr7BnmWN.js"), "../../assets/icons/menu.svg": () => import("./plus-BQnIzzvi.js").then((n) => n.m), "../../assets/icons/message.svg": () => import("./message-D36_Zo2l.js"), "../../assets/icons/more.svg": () => import("./more-2vsTDpcc.js").then((n) => n.m), "../../assets/icons/plus.svg": () => import("./plus-BQnIzzvi.js").then((n) => n.j), "../../assets/icons/power-off.svg": () => import("./power-off-lQRbiBak.js"), "../../assets/icons/preview.svg": () => import("./preview-CJbz9GjO.js"), "../../assets/icons/search.svg": () => import("./search-BWdfjyP8.js"), "../../assets/icons/setting.svg": () => import("./setting-DemlgzVC.js"), "../../assets/icons/sort.svg": () => import("./sort-DWqiUONr.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/without-content.svg": () => import("./without-content-CdJw7vHM.js") }), `../../assets/icons/${this.name}.svg`, 5).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 ra-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
};