ranui 0.1.9 → 0.1.10-alpha.2

package/dist/icon.js

@@ -0,0 +1,6 @@
+import "./arrow-down-D4qr4m33.js";
+import { a } from "./index-C6wPL-2Y.js";
+import "./utils-74Icp-PI.js";
+export {
+  a as default
+};

package/dist/iconShadowless.js

@@ -0,0 +1,6 @@
+import "./arrow-down-D4qr4m33.js";
+import "./utils-74Icp-PI.js";
+import { a } from "./index-DqtzBqPN.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-01Qfd9QI.js

@@ -0,0 +1,207 @@
+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 { H as HTMLElementSSR, c as createCustomError } from "./index-CSnBqUsQ.js";
+class Loading extends HTMLElementSSR() {
+  constructor() {
+    super();
+    __publicField(this, "contain");
+    __publicField(this, "rotateLoading", () => {
+      const loading = document.createElement("div");
+      loading.setAttribute(
+        "class",
+        "rotate"
+        /* ROTATE */
+      );
+      this.contain.appendChild(loading);
+    });
+    __publicField(this, "stretchLoading", () => {
+      const loading = document.createElement("div");
+      loading.setAttribute(
+        "class",
+        "stretch"
+        /* STRETCH */
+      );
+      const arr = [1, 2, 3, 4, 5];
+      arr.forEach((i) => {
+        const rect = document.createElement("div");
+        rect.setAttribute("class", `rect${i}`);
+        loading.appendChild(rect);
+      });
+      this.contain.appendChild(loading);
+    });
+    __publicField(this, "doubleBounceLoading", () => {
+      const loading = document.createElement("div");
+      loading.setAttribute(
+        "class",
+        "double-bounce"
+        /* DOUBLE_BOUNCE */
+      );
+      const arr = [1, 2];
+      arr.forEach((i) => {
+        const rect = document.createElement("div");
+        rect.setAttribute("class", `double-bounce${i}`);
+        loading.appendChild(rect);
+      });
+      this.contain.appendChild(loading);
+    });
+    __publicField(this, "cubeLoading", () => {
+      const loading = document.createElement("div");
+      loading.setAttribute(
+        "class",
+        "cube"
+        /* CUBE */
+      );
+      const arr = [1, 2];
+      arr.forEach((i) => {
+        const rect = document.createElement("div");
+        rect.setAttribute("class", `cube${i}`);
+        loading.appendChild(rect);
+      });
+      this.contain.appendChild(loading);
+    });
+    __publicField(this, "dotLoading", () => {
+      const loading = document.createElement("div");
+      loading.setAttribute(
+        "class",
+        "dot"
+        /* DOT */
+      );
+      const arr = [1, 2];
+      arr.forEach((i) => {
+        const rect = document.createElement("div");
+        rect.setAttribute("class", `dot${i}`);
+        loading.appendChild(rect);
+      });
+      this.contain.appendChild(loading);
+    });
+    __publicField(this, "tripleBounceLoading", () => {
+      const loading = document.createElement("div");
+      loading.setAttribute(
+        "class",
+        "triple-bounce"
+        /* TRIPLE_BOUNCE */
+      );
+      const arr = [1, 2, 3];
+      arr.forEach((i) => {
+        const rect = document.createElement("div");
+        rect.setAttribute("class", `triple-bounce${i}`);
+        loading.appendChild(rect);
+      });
+      this.contain.appendChild(loading);
+    });
+    __publicField(this, "scaleOutLoading", () => {
+      const loading = document.createElement("div");
+      loading.setAttribute("class", "scale-out");
+      this.contain.appendChild(loading);
+    });
+    __publicField(this, "circleLoading", () => {
+      const loading = document.createElement("div");
+      loading.setAttribute("class", "circle");
+      [
+        [1, 2, 3, 4],
+        [1, 2, 3, 4],
+        [1, 2, 3, 4]
+      ].forEach((i, index2) => {
+        const container = document.createElement("div");
+        container.setAttribute("class", `circle-container container${index2 + 1}`);
+        i.forEach((j) => {
+          const rect = document.createElement("div");
+          rect.setAttribute("class", `circle${j}`);
+          container.appendChild(rect);
+        });
+        loading.appendChild(container);
+      });
+      this.contain.appendChild(loading);
+    });
+    __publicField(this, "createLoading", () => {
+      this.contain.innerHTML = "";
+      const NAME_MAP = {
+        [
+          "stretch"
+          /* STRETCH */
+        ]: this.stretchLoading,
+        [
+          "rotate"
+          /* ROTATE */
+        ]: this.rotateLoading,
+        [
+          "double-bounce"
+          /* DOUBLE_BOUNCE */
+        ]: this.doubleBounceLoading,
+        [
+          "cube"
+          /* CUBE */
+        ]: this.cubeLoading,
+        [
+          "dot"
+          /* DOT */
+        ]: this.dotLoading,
+        [
+          "triple-bounce"
+          /* TRIPLE_BOUNCE */
+        ]: this.tripleBounceLoading,
+        [
+          "scale-out"
+          /* SCALE_OUT */
+        ]: this.scaleOutLoading,
+        [
+          "circle"
+          /* CIRCLE */
+        ]: this.circleLoading
+      };
+      const handler = NAME_MAP[this.name];
+      handler && handler();
+      if (this.contains(this.contain))
+        return;
+      this.appendChild(this.contain);
+    });
+    this.contain = document.createElement("div");
+    this.contain.setAttribute("class", "ran-loading");
+  }
+  static get observedAttributes() {
+    return ["name"];
+  }
+  get name() {
+    const name = this.getAttribute("name") || "";
+    if (!name)
+      return "circle";
+    return name;
+  }
+  set name(value) {
+    this.setAttribute("name", value || "");
+  }
+  connectedCallback() {
+  }
+  disconnectCallback() {
+  }
+  attributeChangedCallback(k, o, n) {
+    if (o !== n) {
+      if (k === "name") {
+        this.createLoading();
+      }
+    }
+  }
+}
+function Custom() {
+  if (typeof document !== "undefined" && !customElements.get("r-loading")) {
+    customElements.define("r-loading", Loading);
+    return Loading;
+  } else {
+    return createCustomError("document is undefined or r-loading is exist");
+  }
+}
+const index = Custom();
+const index$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  Loading,
+  default: index
+}, Symbol.toStringTag, { value: "Module" }));
+export {
+  Loading as L,
+  index as a,
+  index$1 as i
+};

package/dist/{index-2d16a084.js → index-B2yRe66F.js}

@@ -4,10 +4,10 @@ var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
-import { j as judgeDevice } from "./index-7913ec46.js";
-import { i as isDisabled, f as falseList, c as createCustomError } from "./index-57492b9b.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{position:relative;display:inline-block;background-image:none;box-shadow:0 2px #00000004;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;touch-action:manipulation;overflow:hidden;pointer-events:auto}:host .ran-btn{position:relative;display:inline-block;background-image:none;cursor:pointer;transition:all .3s cubic-bezier(.645,.045,.355,1);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;touch-action:manipulation;background:#fff}:host,:host(:active),:host(:focus){outline:0;-webkit-tap-highlight-color:transparent}:host .ran-btn,:host(:active) .ran-btn,:host(:focus) .ran-btn{outline:0}:host(:not([disabled]):hover) .ran-btn-content{border-color:#1890ff;color:#1890ff}:host([type="primary"]) .ran-btn-content{border-color:#1890ff;background-color:#1890ff;color:#fff}:host([type="primary"]:not([disabled])) .ran-btn:after{background-image:radial-gradient(circle,#fff 10%,transparent 10.01%)}:host([type="primary"]:not([disabled]):hover) .ran-btn-content{background-color:#40a9ff;color:#fff}:host([type="warning"]) .ran-btn-content{border-color:#ff4d4f;background-color:#ff4d4f;color:#fff}:host([type="warning"]:not([disabled])) .ran-btn:after{background-image:radial-gradient(circle,#fff 10%,transparent 10.01%)}:host([type="warning"]:not([disabled]):hover) .ran-btn-content{border-color:#ff4d4f;background-color:#ff4d4f;color:#fff}:host([type="text"]) .ran-btn-content{border:none}:host([disabled]){cursor:not-allowed;pointer-events:all;opacity:.6}:host([disabled]) .ran-btn{cursor:not-allowed;pointer-events:all;opacity:.6}:host(:not([disabled]):active) .ran-btn:after{transform:translate(-50%,-50%) scale(0);opacity:.3;transition:0s}@media (min-width: 1024px){:host(:not([disabled],[effect])) .ran-btn:after{content:"";display:block;position:absolute;width:100%;height:100%;left:var(--ran-x, 0);top:var(--ran-y, 0);pointer-events:none;background-image:radial-gradient(circle,#1890ff 10%,transparent 10.01%);background-repeat:no-repeat;background-position:50%;transform:translate(-50%,-50%) scale(10);opacity:0;transition:transform .3s,opacity .8s}}:host .slot{display:block}.ran-btn-content{display:flex;justify-content:space-between;align-items:center;padding:4px 15px;border:1px solid transparent;border-radius:2px;border-color:#d9d9d9;color:#000000d9;line-height:22px;font-size:14px;font-weight:400;white-space:nowrap;text-align:center}.ran-btn-content .icon{margin-right:2px}\n';
-class Button extends HTMLElement {
+import { c as currentDevice } from "./utils-74Icp-PI.js";
+import { H as HTMLElementSSR, i as isDisabled, f as falseList, c as createCustomError } from "./index-CSnBqUsQ.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{position:var(--ran-btn-position, relative);display:var(--ran-btn-display, inline-block);background-image:var(--ran-btn-background-image, none);box-shadow:var(--ran-btn-box-shadow, 0 2px #00000004);cursor:var(--ran-btn-cursor, pointer);-webkit-user-select:var(--ran-btn-user-select, none);user-select:var(--ran-btn-user-select, none);touch-action:var(--ran-btn-touch-action, manipulation);overflow:var(--ran-btn-overflow, hidden);pointer-events:var(--ran-btn-pointer-events, auto)}:host .ran-btn{position:relative;display:inline-block;background-image:none;cursor:pointer;transition:all .3s cubic-bezier(.645,.045,.355,1);-webkit-user-select:none;user-select:none;touch-action:manipulation;background:#fff}:host,:host(:active),:host(:focus){outline:0;-webkit-tap-highlight-color:transparent}:host .ran-btn,:host(:active) .ran-btn,:host(:focus) .ran-btn{outline:0}:host(:not([disabled]):hover) .ran-btn-content{border-color:var(--ran-btn-content-hover-border-color, #1890ff);color:var(--ran-btn-content-hover-color, #1890ff)}:host([type="primary"]) .ran-btn-content{background-color:var(--ran-btn-content-background-color, #1890ff);border-color:var(--ran-btn-content-border-color, #1890ff);color:var(--ran-btn-content-color, #fff)}:host([type="primary"]:not([disabled])) .ran-btn:after{background-image:var(--ran-btn-after-background-image, radial-gradient(circle, #fff 10%, transparent 10.01%))}:host([type="primary"]:not([disabled]):hover) .ran-btn-content{background-color:var(--ran-btn-content-hover-background-color, #40a9ff);color:var(--ran-btn-content-hover-color, #fff)}:host([type="warning"]) .ran-btn-content{border-color:#ff4d4f;background-color:#ff4d4f;color:#fff}:host([type="warning"]:not([disabled])) .ran-btn:after{background-image:radial-gradient(circle,#fff 10%,transparent 10.01%)}:host([type="warning"]:not([disabled]):hover) .ran-btn-content{border-color:#ff4d4f;background-color:#ff4d4f;color:#fff}:host([type="text"]) .ran-btn-content{border:none}:host([disabled]){cursor:not-allowed;pointer-events:all;opacity:.6}:host([disabled]) .ran-btn{cursor:not-allowed;pointer-events:all;opacity:.6}:host(:not([disabled]):active) .ran-btn:after{transform:translate(-50%,-50%) scale(0);opacity:.3;transition:0s}@media (min-width: 1024px){:host(:not([disabled],[effect])) .ran-btn:after{content:"";display:block;position:absolute;width:100%;height:100%;left:var(--ran-x, 0);top:var(--ran-y, 0);pointer-events:none;background-image:radial-gradient(circle,#1890ff 10%,transparent 10.01%);background-repeat:no-repeat;background-position:50%;transform:translate(-50%,-50%) scale(10);opacity:0;transition:transform .3s,opacity .8s}}:host .slot{display:block}.ran-btn-content{display:flex;justify-content:space-between;align-items:center;padding:4px 15px;border:1px solid transparent;border-radius:2px;border-color:#d9d9d9;color:#000000d9;line-height:22px;font-size:14px;font-weight:400;white-space:nowrap;text-align:center}.ran-btn-content .icon{margin-right:2px}';
+class Button extends HTMLElementSSR() {
   constructor() {
     super();
     __publicField(this, "_btn");
@@ -17,7 +17,7 @@ class Button extends HTMLElement {
     __publicField(this, "_shadowDom");
     __publicField(this, "debounceTimeId");
     /**
-     * @description: 设置button的icon
+     * @description: 设置 button 的 icon
      * @return {*}
      */
     __publicField(this, "setIcon", () => {
@@ -41,7 +41,7 @@ class Button extends HTMLElement {
       }
     });
     __publicField(this, "mousedown", (event) => {
-      if (judgeDevice() !== "pc")
+      if (currentDevice() !== "pc")
         return;
       if (!this.disabled || this.disabled === "false") {
         this.debounceMouseEvent();
@@ -51,7 +51,7 @@ class Button extends HTMLElement {
       }
     });
     __publicField(this, "mouseup", (event) => {
-      if (judgeDevice() !== "pc")
+      if (currentDevice() !== "pc")
         return;
       if (this.debounceTimeId)
         return;
@@ -72,9 +72,7 @@ class Button extends HTMLElement {
           sheet.insertRule(this.sheet);
           this._shadowDom.adoptedStyleSheets = [sheet];
         } catch (error) {
-          console.error(
-            `Failed to parse the rule in CSSStyleSheet: ${this.sheet}`
-          );
+          console.error(`Failed to parse the rule in CSSStyleSheet: ${this.sheet}`);
         }
       }
     });

package/dist/{index-3cf72afd.js → index-B4bfIbdI.js}

@@ -4,9 +4,9 @@ var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
-import { c as createDocumentFragment, a as addClassToElement } from "./index-7913ec46.js";
-import { i as isDisabled, r as removeClassToElementChild } from "./index-57492b9b.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}.ran-tab ::slotted(r-tab){box-sizing:border-box;width:100%;height:100%;padding:10px;flex-shrink:0;overflow:auto;text-align:start}.ran-tab-header{position:relative;overflow:hidden;scroll-behavior:smooth}.ran-tab-header-nav{display:flex;flex-flow:row nowrap;justify-content:flex-start;align-items:center}.ran-tab-header-nav::-webkit-scrollbar{display:none}.ran-tab-header-nav-item{flex-shrink:0}.ran-tab-header-nav .active{color:var(--active-color, #1890ff)}.ran-tab-header-line{position:absolute;width:0;margin-top:-2px;height:2px;border-radius:2px;background:var(--line-color, #1890ff);transition:.2s}.ran-tab-content{overflow:hidden}.ran-tab-content-wrap{display:flex;width:100%;height:100%;transition:.2s}:host([type="line"]) .ran-tab-header-nav-item{border:solid 1px transparent}:host([type="line"]) .ran-tab-header-nav .active{color:var(--line-color, #1890ff);border:solid 1px transparent;border-color:var(--border-color, rgba(0, 0, 0, .2)) var(--border-color, rgba(0, 0, 0, .2)) transparent;border-radius:var(--border-radius, .25em) var(--border-radius, .25em) 0 0}:host([type="line"]) .ran-tab-header-line{transition:none;visibility:hidden}:host([type="line"]) .ran-tab-header-line:after,:host([type="line"]) .ran-tab-header-line:before{content:"";position:absolute;visibility:visible;width:9999px;height:1px;bottom:0;background:var(--border-color, rgba(0, 0, 0, .2))}:host([type="line"]) .ran-tab-header-line:after{left:100%}:host([type="line"]) .ran-tab-header-line:before{right:100%}:host([align="center"]) .ran-tab-header-nav{justify-content:center}:host([align="center"]) .ran-tab-header-line{left:50%}:host([align="end"]) .ran-tab-header-nav{justify-content:flex-end}\n';
+import { b as createDocumentFragment, a as addClassToElement } from "./utils-74Icp-PI.js";
+import { i as isDisabled, r as removeClassToElementChild } from "./index-CSnBqUsQ.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}.ran-tab ::slotted(r-tab){box-sizing:border-box;width:100%;height:100%;padding:10px;flex-shrink:0;overflow:auto;text-align:start}.ran-tab-header{position:relative;overflow:hidden;scroll-behavior:smooth}.ran-tab-header-nav{display:flex;flex-flow:row nowrap;justify-content:flex-start;align-items:center}.ran-tab-header-nav::-webkit-scrollbar{display:none}.ran-tab-header-nav-item{flex-shrink:0}.ran-tab-header-nav .active{color:var(--active-color, #1890ff)}.ran-tab-header-line{position:absolute;width:0;margin-top:-2px;height:2px;border-radius:2px;background:var(--line-color, #1890ff);transition:.2s}.ran-tab-content{overflow:hidden}.ran-tab-content-wrap{display:flex;width:100%;height:100%;transition:.2s}:host([type="line"]) .ran-tab-header-nav-item{border:solid 1px transparent}:host([type="line"]) .ran-tab-header-nav .active{color:var(--line-color, #1890ff);border:solid 1px transparent;border-color:var(--border-color, rgba(0, 0, 0, .2)) var(--border-color, rgba(0, 0, 0, .2)) transparent;border-radius:var(--border-radius, .25em) var(--border-radius, .25em) 0 0}:host([type="line"]) .ran-tab-header-line{transition:none;visibility:hidden}:host([type="line"]) .ran-tab-header-line:after,:host([type="line"]) .ran-tab-header-line:before{content:"";position:absolute;visibility:visible;width:9999px;height:1px;bottom:0;background:var(--border-color, rgba(0, 0, 0, .2))}:host([type="line"]) .ran-tab-header-line:after{left:100%}:host([type="line"]) .ran-tab-header-line:before{right:100%}:host([align="center"]) .ran-tab-header-nav{justify-content:center}:host([align="center"]) .ran-tab-header-line{left:50%}:host([align="end"]) .ran-tab-header-nav{justify-content:flex-end}';
 function CustomElement() {
   if (typeof window !== "undefined" && !customElements.get("r-tabs")) {
     class Tabs extends HTMLElement {
@@ -28,9 +28,7 @@ function CustomElement() {
         __publicField(this, "initTabHeaderKeyMapIndex", (key, index2) => {
           const value = this.tabHeaderKeyMapIndex[key];
           if (value) {
-            throw new Error(
-              "tab 组件的 key 值存在重复, 或者某个 tab 组件缺少 key 属性"
-            );
+            throw new Error("tab 组件的 key 值存在重复, 或者某个 tab 组件缺少 key 属性");
           } else {
             this.tabHeaderKeyMapIndex[key] = index2;
           }
@@ -75,10 +73,7 @@ function CustomElement() {
               const { width: width2 = 0 } = item.getBoundingClientRect();
               distance += width2;
             }
-            this._line.style.setProperty(
-              "transform",
-              `translateX(${distance}px)`
-            );
+            this._line.style.setProperty("transform", `translateX(${distance}px)`);
           }
         });
         /**
@@ -87,10 +82,7 @@ function CustomElement() {
         __publicField(this, "setTabContent", (key) => {
           if (key) {
             const index2 = this.tabHeaderKeyMapIndex[key];
-            this._wrap.style.setProperty(
-              "transform",
-              `translateX(${index2 * -100}%)`
-            );
+            this._wrap.style.setProperty("transform", `translateX(${index2 * -100}%)`);
           }
         });
         /**
@@ -133,9 +125,7 @@ function CustomElement() {
           const initTabList = tabHeaderList.filter((item) => !isDisabled(item));
           let initTabHeader;
           if (this.active != null) {
-            initTabHeader = initTabList.find(
-              (item) => item.getAttribute("r-key") === this.active
-            );
+            initTabHeader = initTabList.find((item) => item.getAttribute("r-key") === this.active);
             initTabHeader == null ? void 0 : initTabHeader.setAttribute("r-key", this.active);
           }
           if (!initTabHeader) {
@@ -200,12 +190,8 @@ function CustomElement() {
         this._slot = document.createElement("slot");
         this._wrap.appendChild(this._slot);
         this._content.appendChild(this._wrap);
-        this._header.appendChild(
-          createDocumentFragment([this._nav, this._line])
-        );
-        this._container.appendChild(
-          createDocumentFragment([this._header, this._content])
-        );
+        this._header.appendChild(createDocumentFragment([this._nav, this._line]));
+        this._container.appendChild(createDocumentFragment([this._header, this._content]));
         this.tabHeaderKeyMapIndex = {};
         const shadowRoot = this.attachShadow({ mode: "closed" });
         const F7170EE498E0DD32CBDCB63FBA8F75CC = document.createElement("style");

package/dist/{index-458debf7.js → index-BF8tJ6rR.js}

@@ -4,9 +4,9 @@ var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
-import { g as getPixelRatio } from "./index-7913ec46.js";
-import { c as createCustomError } from "./index-57492b9b.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}.ran-radar{position:relative;width:100%;height:100%;display:block}\n";
+import { g as getPixelRatio } from "./utils-74Icp-PI.js";
+import { c as createCustomError } from "./index-CSnBqUsQ.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}.ran-radar{position:relative;width:100%;height:100%;display:block}";
 const BACKGROUND_COLOR = "rgba(0,0,0,0)";
 const FONT_COLOR = "rgba(0,0,0,1)";
 const POLYGON_COLOR = "#e6e6e6";
@@ -43,13 +43,7 @@ function Custom() {
         shadowRoot.appendChild(this.abilityRadarChartContainer);
       }
       static get observedAttributes() {
-        return [
-          "abilitys",
-          "colorPolygon",
-          "colorLine",
-          "fillColor",
-          "strokeColor"
-        ];
+        return ["abilitys", "colorPolygon", "colorLine", "fillColor", "strokeColor"];
       }
       get abilitys() {
         const item = this.getAttribute("abilitys");
@@ -254,21 +248,9 @@ function Custom() {
         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.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.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);
@@ -325,13 +307,7 @@ function Custom() {
       disconnectCallback() {
       }
       attributeChangedCallback(name, oldValue, newValue) {
-        const attribute = [
-          "abilitys",
-          "colorPolygon",
-          "colorLine",
-          "fillColor",
-          "strokeColor"
-        ];
+        const attribute = ["abilitys", "colorPolygon", "colorLine", "fillColor", "strokeColor"];
         if (attribute.includes(name) && this.abilityRadarChartContainer && oldValue !== newValue) {
           this.refreshData();
         }