ranui 0.1.5 → 0.1.7

package/dist/index-7f513a14.js

@@ -0,0 +1,175 @@
+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 { s as str2Xml } from "./index-d2d69b06.js";
+const __variableDynamicImportRuntimeHelper = (glob, path) => {
+  const v = glob[path];
+  if (v) {
+    return typeof v === "function" ? v() : Promise.resolve(v);
+  }
+  return new Promise((_, reject) => {
+    (typeof queueMicrotask === "function" ? queueMicrotask : setTimeout)(reject.bind(null, new Error("Unknown variable dynamic import: " + path)));
+  });
+};
+const f7170ee498e0dd32cbdcb63fba8f75cc = ":host{display:inline-flex}:host .ran-icon{display:flex}:host([spin]){animation-name:rotate;animation-duration:1.4s;animation-timing-function:linear;animation-iteration-count:infinite}@keyframes rotate{to{transform:rotate(360deg)}}\n";
+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 CustomElement 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-b2bed3e7.js"), "../../assets/icons/arrow-down.svg": () => import("./info-circle-fill-90ec9aa9.js").then((n) => n.a), "../../assets/icons/book.svg": () => import("./book-b11a68eb.js"), "../../assets/icons/check-circle-fill.svg": () => import("./check-circle-fill-dc284144.js"), "../../assets/icons/check-circle.svg": () => import("./check-circle-74bd09c3.js"), "../../assets/icons/close-circle-fill.svg": () => import("./close-circle-fill-238a66b1.js"), "../../assets/icons/close-circle.svg": () => import("./close-circle-720c18be.js"), "../../assets/icons/close.svg": () => import("./close-20925345.js"), "../../assets/icons/eye-close.svg": () => import("./eye-close-3874f1ae.js"), "../../assets/icons/eye.svg": () => import("./eye-5e742329.js"), "../../assets/icons/home.svg": () => import("./home-c4a05e8b.js"), "../../assets/icons/info-circle-fill.svg": () => import("./info-circle-fill-90ec9aa9.js").then((n) => n.i), "../../assets/icons/info-circle.svg": () => import("./info-circle-5826decc.js"), "../../assets/icons/loading.svg": () => import("./loading-09ca52df.js"), "../../assets/icons/lock.svg": () => import("./lock-1d2487c9.js"), "../../assets/icons/message.svg": () => import("./message-b2bfdea7.js"), "../../assets/icons/power-off.svg": () => import("./power-off-6ade5a91.js"), "../../assets/icons/preview.svg": () => import("./preview-b291aea8.js"), "../../assets/icons/setting.svg": () => import("./setting-1e5ccb6d.js"), "../../assets/icons/team.svg": () => import("./team-ca6a12e1.js"), "../../assets/icons/unlock.svg": () => import("./unlock-f56086fd.js"), "../../assets/icons/user.svg": () => import("./user-5c01e665.js"), "../../assets/icons/warning-circle-fill.svg": () => import("./warning-circle-fill-d17c37c9.js"), "../../assets/icons/warning-circle.svg": () => import("./warning-circle-035e025c.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");
+        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", CustomElement);
+  }
+}
+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
+};

package/dist/index-8e1e2573.js

@@ -0,0 +1,19 @@
+function Custom() {
+  if (typeof window !== "undefined" && !customElements.get("r-modal")) {
+    class CustomModal extends HTMLElement {
+      constructor() {
+        super();
+      }
+    }
+    customElements.define("r-modal", CustomModal);
+  }
+}
+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
+};

package/dist/index-a1a53af6.js

@@ -0,0 +1,354 @@
+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 { g as getPixelRatio } from "./index-d2d69b06.js";
+import { c as createCustomError } from "./index-57492b9b.js";
+const f7170ee498e0dd32cbdcb63fba8f75cc = ".ran-radar{position:relative;width:100%;height:100%;display:block}\n";
+const BACKGROUND_COLOR = "rgba(0,0,0,0)";
+const FONT_COLOR = "rgba(0,0,0,1)";
+const POLYGON_COLOR = "#e6e6e6";
+const LINE_COLOR = "#e6e6e6";
+const FONT_FAMILY = "黑体";
+const FILL_COLOR = "rgba(255,121,35,0.60)";
+const STROKE_COLOR = "rgba(255,121,35,0.60)";
+function Custom() {
+  if (typeof document !== "undefined" && !customElements.get("r-radar")) {
+    class RadarChart extends HTMLElement {
+      constructor() {
+        super();
+        __publicField(this, "mData");
+        __publicField(this, "mCount");
+        __publicField(this, "mW");
+        __publicField(this, "mCenter");
+        __publicField(this, "mRadius");
+        __publicField(this, "mAngle");
+        __publicField(this, "abilityRadarChartContainer");
+        __publicField(this, "abilityRadarChart");
+        __publicField(this, "_iconElement");
+        __publicField(this, "_shadowDom");
+        this.abilityRadarChartContainer = document.createElement("div");
+        this.abilityRadarChartContainer.setAttribute("class", "ran-radar");
+        this.abilityRadarChart = document.createElement("canvas");
+        this.abilityRadarChart.style.setProperty("width", "100%");
+        this.abilityRadarChart.style.setProperty("height", "100%");
+        this.abilityRadarChartContainer.appendChild(this.abilityRadarChart);
+        const shadowRoot = this.attachShadow({ mode: "closed" });
+        const F7170EE498E0DD32CBDCB63FBA8F75CC = document.createElement("style");
+        F7170EE498E0DD32CBDCB63FBA8F75CC.textContent = f7170ee498e0dd32cbdcb63fba8f75cc;
+        shadowRoot.appendChild(F7170EE498E0DD32CBDCB63FBA8F75CC);
+        this._shadowDom = shadowRoot;
+        shadowRoot.appendChild(this.abilityRadarChartContainer);
+      }
+      static get observedAttributes() {
+        return [
+          "abilitys",
+          "colorPolygon",
+          "colorLine",
+          "fillColor",
+          "strokeColor"
+        ];
+      }
+      get abilitys() {
+        const item = this.getAttribute("abilitys");
+        if (typeof item === "string") {
+          try {
+            const result = JSON.parse(item);
+            return result;
+          } catch (error) {
+            return item;
+          }
+        }
+        return item;
+      }
+      set abilitys(value) {
+        if (typeof value === "string") {
+          this.setAttribute("abilitys", value || "");
+        } else {
+          this.setAttribute("abilitys", JSON.stringify(value) || "");
+        }
+      }
+      // 多边形颜色
+      get colorPolygon() {
+        return this.getAttribute("colorPolygon") || POLYGON_COLOR;
+      }
+      set colorPolygon(value) {
+        this.setAttribute("colorPolygon", value || POLYGON_COLOR);
+      }
+      // 顶点连线颜色
+      get colorLine() {
+        return this.getAttribute("colorLine") || LINE_COLOR;
+      }
+      set colorLine(value) {
+        this.setAttribute("colorLine", value || LINE_COLOR);
+      }
+      // 数据渲染处的颜色
+      get fillColor() {
+        return this.getAttribute("fillColor") || FILL_COLOR;
+      }
+      set fillColor(value) {
+        this.setAttribute("fillColor", value || FILL_COLOR);
+      }
+      // 数据渲染处线和点的颜色
+      get strokeColor() {
+        return this.getAttribute("strokeColor") || STROKE_COLOR;
+      }
+      set strokeColor(value) {
+        this.setAttribute("strokeColor", value || STROKE_COLOR);
+      }
+      refreshData() {
+        var _a;
+        const ctx = this.abilityRadarChart.getContext("2d");
+        if (!this.abilityRadarChartContainer || !ctx)
+          return;
+        const radio = getPixelRatio(ctx);
+        const width = this.abilityRadarChartContainer.clientWidth * radio;
+        const height = this.abilityRadarChartContainer.clientHeight * radio;
+        this.abilityRadarChart.width = width;
+        this.abilityRadarChart.height = height;
+        this.mW = width;
+        this.mData = this.abilitys;
+        this.mCount = ((_a = this.mData) == null ? void 0 : _a.length) || 1;
+        this.mCenter = this.mW / 2;
+        this.mRadius = this.mCenter - 50 * radio;
+        this.mAngle = Math.PI * 2 / this.mCount;
+        this.drawPolygon(ctx);
+        this.drawSide(ctx);
+        this.drawLines(ctx);
+        this.drawText(ctx);
+        this.drawRegion(ctx);
+        this.drawCircle(ctx);
+      }
+      drawSide(ctx) {
+        if (!this.mRadius || !this.mCount || !this.mCenter || !this.mAngle)
+          return;
+        ctx.save();
+        ctx.strokeStyle = this.colorLine;
+        const r = this.mRadius;
+        for (let j = 0; j < this.mCount; j++) {
+          const x = this.mCenter + r * Math.sin(this.mAngle * j);
+          const y = this.mCenter + r * Math.cos(this.mAngle * j);
+          ctx.lineTo(x, y);
+        }
+        ctx.closePath();
+        ctx.stroke();
+      }
+      // 绘制多边形边
+      drawPolygon(ctx) {
+        if (!this.mRadius || !this.mCount || !this.mCenter || !this.mAngle)
+          return;
+        ctx.save();
+        ctx.strokeStyle = this.colorPolygon;
+        const r = this.mRadius / 4;
+        ctx.setLineDash([6, 6]);
+        for (let i = 0; i < 4; i++) {
+          ctx.beginPath();
+          const currR = r * (i + 1);
+          for (let j = 0; j < this.mCount; j++) {
+            const x = this.mCenter + currR * Math.sin(this.mAngle * j);
+            const y = this.mCenter + currR * Math.cos(this.mAngle * j);
+            ctx.lineTo(x, y);
+          }
+          ctx.closePath();
+          ctx.stroke();
+        }
+        ctx.restore();
+      }
+      // 顶点连线
+      drawLines(ctx) {
+        if (!this.mRadius || !this.mCount || !this.mCenter || !this.mAngle)
+          return;
+        ctx.save();
+        ctx.beginPath();
+        ctx.strokeStyle = this.colorLine;
+        for (let i = 0; i < this.mCount; i++) {
+          const x = this.mCenter + this.mRadius * Math.sin(this.mAngle * i);
+          const y = this.mCenter + this.mRadius * Math.cos(this.mAngle * i);
+          ctx.moveTo(this.mCenter, this.mCenter);
+          ctx.lineTo(x, y);
+        }
+        ctx.stroke();
+        ctx.restore();
+      }
+      // 绘制文本
+      drawText(ctx) {
+        var _a, _b, _c, _d;
+        if (!this.mRadius || !this.mCount || !this.mCenter || !this.mAngle || !this.mData)
+          return;
+        ctx.save();
+        const radio = getPixelRatio(ctx);
+        const defaultFontSize = this.mCenter / 12;
+        for (let i = 0; i < this.mCount; i++) {
+          const x = this.mCenter + this.mRadius * Math.sin(this.mAngle * i);
+          const y = this.mCenter + this.mRadius * Math.cos(this.mAngle * i);
+          const backgroundColor = ((_a = this.mData[i]) == null ? void 0 : _a.backgroundColor) || BACKGROUND_COLOR;
+          const fontColor = ((_b = this.mData[i]) == null ? void 0 : _b.fontColor) || FONT_COLOR;
+          const fontFamily = ((_c = this.mData[i]) == null ? void 0 : _c.fontFamily) || FONT_FAMILY;
+          const fontSize = ((_d = this.mData[i]) == null ? void 0 : _d.fontSize) || defaultFontSize;
+          ctx.font = `${fontSize}px ${fontFamily}`;
+          if (this.mAngle * i >= 0 && this.mAngle * i < Math.PI / 2) {
+            this.drawButton(
+              ctx,
+              backgroundColor,
+              x,
+              y,
+              44 * radio,
+              24 * radio,
+              12 * radio,
+              this.mData[i].abilityName,
+              fontColor,
+              fontFamily,
+              fontSize
+            );
+          } else if (this.mAngle * i >= Math.PI / 2 && this.mAngle * i < Math.PI) {
+            this.drawButton(
+              ctx,
+              backgroundColor,
+              x,
+              y - 24 * radio,
+              44 * radio,
+              24 * radio,
+              12 * radio,
+              this.mData[i].abilityName,
+              fontColor,
+              fontFamily,
+              fontSize
+            );
+          } else if (this.mAngle * i >= Math.PI && this.mAngle * i < Math.PI * 3 / 2) {
+            this.drawButton(
+              ctx,
+              backgroundColor,
+              x - 44 * radio,
+              y - 24 * radio,
+              44 * radio,
+              24 * radio,
+              12 * radio,
+              this.mData[i].abilityName,
+              fontColor,
+              fontFamily,
+              fontSize
+            );
+          } else {
+            this.drawButton(
+              ctx,
+              backgroundColor,
+              x - 44 * radio,
+              y,
+              44 * radio,
+              24 * radio,
+              12 * radio,
+              this.mData[i].abilityName,
+              fontColor,
+              fontFamily,
+              fontSize
+            );
+          }
+        }
+        ctx.restore();
+      }
+      drawButton(ctx, color, x, y, width, height, radius, text, fontColor, fontFamily, fontSize) {
+        ctx.beginPath();
+        const radio = getPixelRatio(ctx);
+        ctx.fillStyle = color;
+        ctx.moveTo(x + radius, y);
+        ctx.lineTo(x + width - radius, y);
+        ctx.arc(
+          x + width - radius,
+          y + radius,
+          radius,
+          Math.PI * 3 / 2,
+          Math.PI * 2
+        );
+        ctx.lineTo(x + width, y + height - radius);
+        ctx.arc(
+          x + width - radius,
+          y + height - radius,
+          radius,
+          Math.PI,
+          Math.PI / 2
+        );
+        ctx.lineTo(x + radius, y + height);
+        ctx.arc(x + radius, y + height - radius, radius, Math.PI / 2, Math.PI);
+        ctx.lineTo(x, y + radius);
+        ctx.arc(x + radius, y + radius, radius, Math.PI, Math.PI * 3 / 2);
+        ctx.fill();
+        ctx.closePath();
+        ctx.beginPath();
+        ctx.fillStyle = fontColor;
+        ctx.font = `${fontSize || 12 * radio}px ${fontFamily}`;
+        ctx.textAlign = "center";
+        ctx.textBaseline = "middle";
+        ctx.fillText(text, x + width / 2, y + height / 2);
+      }
+      // 绘制数据区域
+      drawRegion(ctx) {
+        if (!this.mRadius || !this.mCount || !this.mCenter || !this.mAngle || !this.mData)
+          return;
+        const radio = getPixelRatio(ctx);
+        ctx.save();
+        ctx.beginPath();
+        for (let i = 0; i < this.mCount; i++) {
+          const x = this.mCenter + this.mRadius * Math.sin(this.mAngle * i) * this.mData[i].scoreRate / 100;
+          const y = this.mCenter + this.mRadius * Math.cos(this.mAngle * i) * this.mData[i].scoreRate / 100;
+          ctx.lineTo(x, y);
+        }
+        ctx.closePath();
+        ctx.fillStyle = this.fillColor;
+        ctx.fill();
+        ctx.strokeStyle = this.strokeColor;
+        ctx.lineWidth = 1 * radio;
+        ctx.stroke();
+        ctx.restore();
+      }
+      // 画点
+      drawCircle(ctx) {
+        if (!this.mRadius || !this.mCount || !this.mCenter || !this.mAngle || !this.mData)
+          return;
+        const radio = getPixelRatio(ctx);
+        ctx.save();
+        for (let i = 0; i < this.mCount; i++) {
+          const x = this.mCenter + this.mRadius * Math.sin(this.mAngle * i) * this.mData[i].scoreRate / 100;
+          const y = this.mCenter + this.mRadius * Math.cos(this.mAngle * i) * this.mData[i].scoreRate / 100;
+          ctx.beginPath();
+          ctx.arc(x, y, 3, 0, Math.PI * 2);
+          ctx.lineWidth = 1.5 * radio;
+          ctx.strokeStyle = this.strokeColor;
+          ctx.stroke();
+        }
+        ctx.restore();
+      }
+      connectedCallback() {
+        this.refreshData();
+      }
+      disconnectCallback() {
+      }
+      attributeChangedCallback(name, oldValue, newValue) {
+        const attribute = [
+          "abilitys",
+          "colorPolygon",
+          "colorLine",
+          "fillColor",
+          "strokeColor"
+        ];
+        if (attribute.includes(name) && this.abilityRadarChartContainer && oldValue !== newValue) {
+          this.refreshData();
+        }
+      }
+    }
+    customElements.define("r-radar", RadarChart);
+    return RadarChart;
+  } else {
+    return createCustomError("document is undefined or r-radar is exist");
+  }
+}
+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
+};