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

package/dist/player.js

@@ -1,8 +1,5 @@
-import "./arrow-down-B_hCY3Wt.js";
-import { R, a } from "./index-B_GuEcTd.js";
-import "./index-CtVOgBDk.js";
-import "./index-DC5EA657.js";
+import { n as e, t as r } from "./player-CvfmwWUa.js";
 export {
-  R as RanPlayer,
-  a as default
+  r as RanPlayer,
+  e as default
 };

package/dist/playwright.config.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("@playwright/test").PlaywrightTestConfig<{}, {}>;
+export default _default;

package/dist/plugins/load-svg.d.ts

@@ -0,0 +1,9 @@
+import type { Plugin } from 'vite';
+import type { Config } from 'svgo';
+interface Options {
+    defaultImport?: string;
+    svgoConfig?: Config;
+    svgo?: boolean;
+}
+export default function loadSvgPlugin(options?: Options): Plugin;
+export {};

package/dist/popover-BCvHwLZb.js

@@ -0,0 +1,213 @@
+import { c as f, d as I, g as u, h as n, l as s, s as b, u as p } from "./utils-D4pPF77E.js";
+import { t as T } from "./events-C59wGdni.js";
+import { _ as k, i as g, p as C } from "./factory-BdsO0dEW.js";
+import { a as y, n as D } from "./ssr-DSGwPtEd.js";
+import "./dropdown-C5362qTy.js";
+var P = ".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{visibility:hidden;position:absolute}", x = class extends D {
+  observer;
+  _shadowDom;
+  _slot;
+  constructor() {
+    super(), this._shadowDom = f(this, P);
+    const t = b(this._shadowDom, ".slot", () => C().class("slot").build());
+    this._slot = t, this.observer = new MutationObserver(this.callback);
+  }
+  callback = (t) => {
+    for (const e of t) e.type === "childList" ? this.onChange(e) : e.type === "attributes" && this.onChange(e);
+  };
+  onChange = (t) => {
+    this.dispatchEvent(new CustomEvent("change", { detail: {
+      type: t.type,
+      value: {
+        content: this.children,
+        mutation: t
+      }
+    } }));
+  };
+  connectedCallback() {
+    this.observer.observe(this, {
+      attributes: !0,
+      childList: !0,
+      subtree: !0
+    });
+  }
+  disconnectedCallback() {
+    this.observer.disconnect();
+  }
+};
+y("r-content", x);
+var _ = ".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-popover-host-display, block)}.ran-popover{box-sizing:var(--ran-popover-box-sizing, border-box);position:var(--ran-popover-position, relative);display:var(--ran-popover-display, block);margin:var(--ran-popover-margin, 0);padding:var(--ran-popover-padding, 0)}.ran-popover-block{display:var(--ran-popover-block-display, block)}", a = 8, v = 300, h = 16, w = {
+  bottom: {
+    add: "ran-dropdown-down-in",
+    remove: "ran-dropdown-down-out"
+  },
+  top: {
+    add: "ran-dropdown-up-in",
+    remove: "ran-dropdown-up-out"
+  },
+  left: {
+    add: "ran-dropdown-left-in",
+    remove: "ran-dropdown-left-out"
+  },
+  right: {
+    add: "ran-dropdown-right-in",
+    remove: "ran-dropdown-right-out"
+  }
+}, N = /* @__PURE__ */ (function(t) {
+  return t.TOP = "top", t.BOTTOM = "bottom", t.LEFT = "left", t.RIGHT = "right", t;
+})({}), A = class extends D {
+  _events = new T();
+  _slot;
+  popoverBlock;
+  popoverContent;
+  popoverInner;
+  popoverInnerBlock;
+  _shadowDom;
+  dropDownInTimeId;
+  dropDownOutTimeId;
+  removeTimeId;
+  static get observedAttributes() {
+    return [
+      "placement",
+      "arrow",
+      "trigger",
+      "sheet"
+    ];
+  }
+  closePopover = () => {
+    this.setDropdownDisplayNone();
+  };
+  constructor() {
+    super(), this._shadowDom = f(this, _);
+    const t = b(this._shadowDom, ".ran-popover-block", () => g().class("ran-popover-block").role("tooltip").children(C().class("slot")).build());
+    this.popoverBlock = t, this._slot = t.querySelector(".slot");
+  }
+  get placement() {
+    return s(this, "placement", "top");
+  }
+  set placement(t) {
+    p(this, "placement", t);
+  }
+  get arrow() {
+    return s(this, "arrow");
+  }
+  set arrow(t) {
+    p(this, "arrow", t);
+  }
+  get trigger() {
+    return s(this, "trigger", "hover");
+  }
+  set trigger(t) {
+    p(this, "trigger", t);
+  }
+  get getPopupContainerId() {
+    return s(this, "getPopupContainerId");
+  }
+  set getPopupContainerId(t) {
+    p(this, "getPopupContainerId", t);
+  }
+  get sheet() {
+    return s(this, "sheet");
+  }
+  set sheet(t) {
+    p(this, "sheet", t);
+  }
+  handlerExternalCss = () => {
+    I(this, this._shadowDom, "sheet", null, this.sheet);
+  };
+  initAria = () => {
+    this.hasAttribute("tabindex") || (this.tabIndex = 0), this.setAttribute("aria-haspopup", "dialog"), this.setAttribute("aria-expanded", "false");
+  };
+  updateAriaExpanded = (t) => {
+    this.setAttribute("aria-expanded", t ? "true" : "false");
+  };
+  stopPropagation = (t) => {
+    t.stopPropagation();
+  };
+  createContent = (t) => {
+    if (t) {
+      if (!this.popoverContent) {
+        this.popoverContent = k("r-dropdown").class("ran-popover-dropdown").style("display", "none").style("position", "absolute").build(), this.popoverContent?.addEventListener("click", this.stopPropagation);
+        const e = g().children(this.popoverContent).build();
+        this.trigger.includes("hover") && !u() && (this.popoverContent?.addEventListener("mouseleave", this.blur), this.popoverContent?.addEventListener("mouseenter", this.removeDropDownTimeId)), document.body.appendChild(e);
+      }
+      if (this.popoverContent && t.length > 0) {
+        this.popoverContent.innerHTML = "";
+        const e = document.createDocumentFragment();
+        for (const r of t) e.appendChild(r);
+        this.popoverContent.appendChild(e);
+      }
+    }
+  };
+  watchContent = (t) => {
+    const { value: e } = t.detail;
+    this.createContent(e.content);
+  };
+  blur = n(() => {
+    this.removeTimeId && this.removeDropDownTimeId(), this.removeTimeId = setTimeout(() => {
+      this.removeDropDownTimeId(), this.setDropdownDisplayNone();
+    }, v);
+  }, h);
+  removeDropDownTimeId = n(() => {
+    this.trigger.includes("hover") && !u() && (clearTimeout(this.removeTimeId), this.removeTimeId = void 0);
+  }, h);
+  setDropdownDisplayBlock = n(() => {
+    this.dropDownInTimeId || (clearTimeout(this.dropDownInTimeId), this.dropDownInTimeId = void 0, clearTimeout(this.dropDownOutTimeId), this.dropDownOutTimeId = void 0, this.popoverContent && this.popoverContent.style.display !== "block" && (this.updateAriaExpanded(!0), this.popoverContent.setAttribute("transit", w[this.placement].add), this.popoverContent?.style.setProperty("display", "block"), this.placementPosition(), this.dropDownInTimeId = setTimeout(() => {
+      this.popoverContent && this.popoverContent.removeAttribute("transit"), clearTimeout(this.dropDownInTimeId), this.dropDownInTimeId = void 0;
+    }, v)));
+  }, h);
+  setDropdownDisplayNone = n(() => {
+    this.dropDownOutTimeId || (clearTimeout(this.dropDownInTimeId), this.dropDownInTimeId = void 0, clearTimeout(this.dropDownOutTimeId), this.dropDownOutTimeId = void 0, this.popoverContent && this.popoverContent.style.display !== "none" && (this.updateAriaExpanded(!1), this.popoverContent.setAttribute("transit", w[this.placement].remove), this.dropDownOutTimeId = setTimeout(() => {
+      this.popoverContent?.style.setProperty("display", "none"), this.popoverContent && this.popoverContent.removeAttribute("transit"), clearTimeout(this.dropDownOutTimeId), this.dropDownOutTimeId = void 0;
+    }, v)));
+  }, h);
+  placementPosition = () => {
+    if (!this.popoverContent) return;
+    const { top: t, left: e, bottom: r, width: c, height: m } = this.getBoundingClientRect();
+    let o = r + window.scrollY + a, i = e + window.scrollX;
+    const d = document.getElementById(this.getPopupContainerId), l = this.popoverContent.getBoundingClientRect();
+    this.placement === "top" && (o = t + window.scrollY - Math.max(l.height, m) - a, this.getPopupContainerId && d && (i = e - d.getBoundingClientRect().left, o = t - d.getBoundingClientRect().top - this.popoverContent.clientHeight - a, i = e - d.getBoundingClientRect().left)), this.placement === "left" && (i = e - Math.max(l.width, c) - a, o = t + window.scrollY), this.placement === "right" && (i = e + c + a, o = t + window.scrollY), this.popoverContent.style.setProperty("inset", `${o}px auto auto ${i}px`), this.popoverContent.style.setProperty("--ran-x", `${i}px`), this.popoverContent.style.setProperty("--ran-y", `${o}px`), this.popoverContent.style.setProperty("--ran-dropdown-arrow-anchor-width", `${c}px`), this.popoverContent.style.setProperty("--ran-dropdown-arrow-anchor-height", `${m}px`), this.popoverContent.style.setProperty("--ran-dropdown-min-width", `${l.width}px`), this.popoverContent.style.setProperty("--ran-dropdown-min-height", `${l.height}px`);
+  };
+  hoverPopover = (t) => {
+    this.clickPopover(t);
+  };
+  clickContent = (t) => {
+    t.stopPropagation();
+  };
+  clickPopover = (t) => {
+    t.stopPropagation(), t.preventDefault(), this.setDropdownDisplayBlock();
+  };
+  keydownPopover = (t) => {
+    (t.key === "Enter" || t.key === " ") && (t.preventDefault(), this.setDropdownDisplayBlock()), t.key === "Escape" && (t.preventDefault(), this.setDropdownDisplayNone());
+  };
+  clickRemovePopover = (t) => {
+    this.hoverRemovePopover(t);
+  };
+  popoverTrigger = () => {
+    this._events.abort();
+    for (const t of this.children) t.tagName === "R-CONTENT" && this._events.on(t, "change", this.watchContent);
+    this.trigger.includes("hover") && (this._events.on(this, "mouseenter", this.hoverPopover), this._events.on(this, "mouseleave", this.blur)), this._events.on(this, "click", this.clickPopover).on(this, "keydown", this.keydownPopover).on(document, "click", this.clickRemovePopover);
+  };
+  hoverRemovePopover = (t) => {
+    t.stopPropagation(), this.setDropdownDisplayNone();
+  };
+  changePlacement = n(() => {
+    this.placement === "top" && this.popoverContent?.setAttribute("arrow", "bottom"), this.placement === "bottom" && this.popoverContent?.setAttribute("arrow", "top"), this.placement === "left" && this.popoverContent?.setAttribute("arrow", "right"), this.placement === "right" && this.popoverContent?.setAttribute("arrow", "left");
+  }, h);
+  connectedCallback() {
+    this.initAria(), this.handlerExternalCss();
+    for (const t of this.children) t.tagName === "R-CONTENT" && this.createContent(t.children);
+    this.popoverTrigger(), this.changePlacement();
+  }
+  disconnectedCallback() {
+    this._events.abort();
+  }
+  attributeChangedCallback(t, e, r) {
+    e !== r && (t === "trigger" && this.popoverTrigger(), t === "placement" && this.changePlacement(), t === "sheet" && this.handlerExternalCss());
+  }
+};
+y("r-popover", A);
+export {
+  A as n,
+  N as t
+};

package/dist/popover.js

@@ -1,8 +1,6 @@
-import { P, a } from "./index-D4y9c1Dj.js";
-import "./arrow-down-B_hCY3Wt.js";
-import "./index-DC5EA657.js";
-import "./index-C9z10IgG.js";
+import { n as a, t as r } from "./popover-BCvHwLZb.js";
 export {
-  P as Popover,
+  r as PLACEMENT_TYPE,
+  a as Popover,
   a as default
 };

package/dist/progress-BWkNf2J5.js

@@ -0,0 +1,123 @@
+import { c as n, d as p, l as h, s as g, u, y as i } from "./utils-D4pPF77E.js";
+import { t as l } from "./events-C59wGdni.js";
+import { i as o } from "./factory-BdsO0dEW.js";
+import { a as c, n as d } from "./ssr-DSGwPtEd.js";
+var v = ".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:block;height:var(--ran-progress-height, 20px)}:host:active,:host:focus{outline:0;-webkit-tap-highlight-color:transparent}:host(:focus-visible){outline:var(--ran-progress-focus-outline, 2px solid var(--ran-color-primary, #006bff));outline-offset:var(--ran-progress-focus-outline-offset, 2px);border-radius:var(--ran-radius-full, 9999px)}.ran-progress{position:var(--ran-progress-position, relative);cursor:var(--ran-progress-cursor, pointer);width:var(--ran-progress-width, 100%);height:100%}.ran-progress:active,.ran-progress:focus{outline:0;-webkit-tap-highlight-color:transparent}.ran-progress-wrap{width:var(--ran-progress-wrap-width, 100%);height:var(--ran-progress-wrap-height, 8px);border-radius:var(--ran-progress-wrap-border-radius, 20px);background:var(--ran-progress-wrap-background, var(--ran-gray-200, #ebebeb));position:var(--ran-progress-wrap-position, relative);overflow:var(--ran-progress-wrap-overflow, hidden)}.ran-progress-wrap-value{position:var(--ran-progress-wrap-value-position, absolute);top:var(--ran-progress-wrap-value-top, 0);left:var(--ran-progress-wrap-value-left, 0);height:var(--ran-progress-wrap-value-height, 100%);width:var(--ran-progress-wrap-value-width, 100%);transform:scaleX(var(--progress-percent, 0));transform-origin:var(--ran-progress-wrap-value-transform-origin, 0 0);will-change:var(--ran-progress-wrap-value-will-change, transform);background:var(--ran-progress-wrap-value-background, linear-gradient(90deg, #0bc8bb 2.42%, #00d297 98.79%));border-radius:var(--ran-progress-wrap-value-border-radius, 20px)}.ran-progress-dot{position:var(--ran-progress-dot-position, absolute);top:var(--ran-progress-dot-top, -5px);left:calc(var(--progress-percent, 0) * 100%);transform:translate(-50%);border-radius:var(--ran-progress-dot-border-radius, 50%);width:var(--ran-progress-dot-width, 18px);height:var(--ran-progress-dot-height, 18px);background:var(--ran-progress-dot-background, linear-gradient(90deg, #0bc8bb 2.42%, #00d297 98.79%));cursor:var(--ran-progress-dot-cursor, pointer)}", f = [
+  "percent",
+  "type",
+  "total",
+  "dot",
+  "sheet"
+], b = class extends d {
+  _progress;
+  _progressWrap;
+  _progressWrapValue;
+  _progressDot;
+  _shadowDom;
+  _events = new l();
+  moveProgress = { mouseDown: !1 };
+  static get observedAttributes() {
+    return f;
+  }
+  constructor() {
+    super(), this._shadowDom = n(this, v);
+    const r = g(this._shadowDom, ".ran-progress", () => o().class("ran-progress").role("progressbar").children(o().class("ran-progress-wrap").part("track").children(o().class("ran-progress-wrap-value").part("fill")), o().class("ran-progress-dot").part("dot")).build());
+    this._progress = r, this._progressWrap = r.querySelector(".ran-progress-wrap"), this._progressWrapValue = r.querySelector(".ran-progress-wrap-value"), this._progressDot = r.querySelector(".ran-progress-dot");
+  }
+  get percent() {
+    const r = i(this.getAttribute("percent") || "0"), t = Number(this.total);
+    return r > t ? String(t) : String(r);
+  }
+  set percent(r) {
+    this.setAttribute("percent", r || "0"), this.setAttribute("aria-valuenow", r || "0");
+  }
+  get total() {
+    const r = this.getAttribute("total");
+    return r ? `${i(r)}` : "100";
+  }
+  set total(r) {
+    this.setAttribute("total", r || "100");
+  }
+  get type() {
+    const r = this.getAttribute("type") || "primary";
+    return ["primary", "drag"].includes(r) ? r : "primary";
+  }
+  set type(r) {
+    this.setAttribute("type", r || "primary");
+  }
+  get dot() {
+    const r = this.getAttribute("dot") || "true";
+    return ["true", "false"].includes(r) ? r : "true";
+  }
+  set dot(r) {
+    this.setAttribute("dot", r || "true");
+  }
+  get sheet() {
+    return h(this, "sheet");
+  }
+  set sheet(r) {
+    u(this, "sheet", r);
+  }
+  handlerExternalCss = () => {
+    p(this, this._shadowDom, "sheet", null, this.sheet);
+  };
+  progressClick = (r) => {
+    if (this.type !== "drag") return;
+    const t = this._progress.getBoundingClientRect(), e = r.clientX - t.left, s = Math.min(1, Math.max(0, e / this._progress.offsetWidth));
+    r.clientX, t.left, this._progress.offsetWidth;
+    const a = s * Number(this.total);
+    this.percent = String(a), this.total, this.percent, this.updateUI(s), this.change();
+  };
+  progressDotMouseDown = (r) => {
+    this.moveProgress.mouseDown = !0, r.stopPropagation();
+  };
+  progressDotMouseMove = (r) => {
+    if (!this.moveProgress.mouseDown) return;
+    const t = this._progress.getBoundingClientRect(), e = r.clientX - t.left, s = Math.min(1, Math.max(0, e / this._progress.offsetWidth)), a = s * Number(this.total);
+    this.percent = String(a), this.updateUI(s), this.change();
+  };
+  progressDotMouseUp = () => {
+    this.moveProgress.mouseDown = !1;
+  };
+  updateUI = (r) => {
+    this.style.setProperty("--progress-percent", String(r));
+  };
+  _preSerialize() {
+    const r = Number(this.getAttribute("percent") || "0"), t = Number(this.getAttribute("total") || "100"), e = Math.min(1, Math.max(0, r / t));
+    this.style.setProperty("--progress-percent", String(e));
+  }
+  change = () => {
+    this.dispatchEvent(new CustomEvent("change", { detail: {
+      value: this.percent,
+      percent: this.percent,
+      total: this.total
+    } }));
+  };
+  appendProgressDot = () => {
+    !this._progress || !this._progressDot || (this.dot === "true" && !this._progress.contains(this._progressDot) && this._progress.appendChild(this._progressDot), this.dot === "false" && this._progress.contains(this._progressDot) && this._progress.removeChild(this._progressDot));
+  };
+  updateCurrentProgress = () => {
+    if (!this._progress) return;
+    const r = Number(this.total) || 100, t = Number(this.percent) / r;
+    this.updateUI(t);
+  };
+  dragEvent = () => {
+    this.type === "drag" && this._events.on(this._progress, "click", this.progressClick).on(this._progressDot, "mousedown", this.progressDotMouseDown).on(document, "mousemove", this.progressDotMouseMove).on(document, "mouseup", this.progressDotMouseUp);
+  };
+  resize = () => {
+    this.updateCurrentProgress();
+  };
+  connectedCallback() {
+    this.handlerExternalCss(), this.hasAttribute("type") || this.setAttribute("type", "primary"), this.dragEvent(), this.updateCurrentProgress(), this.appendProgressDot(), this._events.on(window, "resize", this.resize);
+  }
+  disconnectedCallback() {
+    this._events.abort();
+  }
+  attributeChangedCallback(r, t, e) {
+    t !== e && (r === "dot" && this.appendProgressDot(), (r === "percent" || r === "total") && this.updateCurrentProgress(), r === "sheet" && this.handlerExternalCss());
+  }
+};
+c("r-progress", b);
+export {
+  b as t
+};

package/dist/progress.js

@@ -1,7 +1,5 @@
-import { P, a } from "./index-15M0olqa.js";
-import "./arrow-down-B_hCY3Wt.js";
-import "./index-DC5EA657.js";
+import { t as o } from "./progress-BWkNf2J5.js";
 export {
-  P as Progress,
-  a as default
+  o as Progress,
+  o as default
 };

package/dist/radar-CWsawt2g.js

@@ -0,0 +1,181 @@
+import { _ as m, c as f, d as y, l as R, s as A, u as v } from "./utils-D4pPF77E.js";
+import { _ as P, i as w } from "./factory-BdsO0dEW.js";
+import { a as p, n as D } from "./ssr-DSGwPtEd.js";
+var k = ".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{--ran-radar-polygon-color: var(--ran-color-border, #e6e6e6);--ran-radar-line-color: var(--ran-color-border, #e6e6e6);--ran-radar-fill-color: rgba(255, 121, 35, .6);--ran-radar-stroke-color: rgba(255, 121, 35, .6)}.ran-radar{position:var(--ran-radar-position, relative);width:var(--ran-radar-width, 100%);height:var(--ran-radar-height, 100%);display:var(--ran-radar-display, block)}.ran-radar canvas{width:100%;height:100%}", M = "rgba(0,0,0,0)", S = "rgba(0,0,0,1)", d = "#e6e6e6", C = "#e6e6e6", O = "黑体", g = "rgba(255,121,35,0.60)", u = "rgba(255,121,35,0.60)", L = class extends D {
+  mData;
+  mCount;
+  mW;
+  mCenter;
+  mRadius;
+  mAngle;
+  static get observedAttributes() {
+    return [
+      "abilitys",
+      "colorPolygon",
+      "colorLine",
+      "fillColor",
+      "strokeColor",
+      "sheet"
+    ];
+  }
+  abilityRadarChartContainer;
+  abilityRadarChart;
+  _iconElement;
+  _shadowDom;
+  resizeObserver;
+  constructor() {
+    super(), this._shadowDom = f(this, k);
+    const t = A(this._shadowDom, ".ran-radar", () => w().class("ran-radar").children(P("canvas").build()).build()), e = t.querySelector("canvas");
+    this.abilityRadarChartContainer = t, this.abilityRadarChart = e, this.resizeObserver = new ResizeObserver(this.resize), this.resizeObserver.observe(this.abilityRadarChartContainer);
+  }
+  resize = () => {
+    this.refreshData();
+  };
+  get abilitys() {
+    const t = this.getAttribute("abilitys");
+    if (typeof t == "string") try {
+      return JSON.parse(t);
+    } catch (e) {
+      return console.error(`Failed to parse the rule in JSON.parse: ${t}, error: ${e}`), t;
+    }
+    return t;
+  }
+  set abilitys(t) {
+    typeof t == "string" ? this.setAttribute("abilitys", t || "") : this.setAttribute("abilitys", JSON.stringify(t) || "");
+  }
+  _cssVar(t) {
+    return typeof getComputedStyle > "u" ? "" : getComputedStyle(this).getPropertyValue(t).trim();
+  }
+  get colorPolygon() {
+    return this.getAttribute("colorPolygon") || this._cssVar("--ran-radar-polygon-color") || d;
+  }
+  set colorPolygon(t) {
+    this.setAttribute("colorPolygon", t || d);
+  }
+  get colorLine() {
+    return this.getAttribute("colorLine") || this._cssVar("--ran-radar-line-color") || C;
+  }
+  set colorLine(t) {
+    this.setAttribute("colorLine", t || C);
+  }
+  get fontColor() {
+    return this._cssVar("--ran-color-text") || S;
+  }
+  get fillColor() {
+    return this.getAttribute("fillColor") || this._cssVar("--ran-radar-fill-color") || g;
+  }
+  set fillColor(t) {
+    this.setAttribute("fillColor", t || g);
+  }
+  get strokeColor() {
+    return this.getAttribute("strokeColor") || this._cssVar("--ran-radar-stroke-color") || u;
+  }
+  set strokeColor(t) {
+    this.setAttribute("strokeColor", t || u);
+  }
+  get sheet() {
+    return R(this, "sheet");
+  }
+  set sheet(t) {
+    v(this, "sheet", t);
+  }
+  handlerExternalCss = () => {
+    y(this, this._shadowDom, "sheet", null, this.sheet);
+  };
+  refreshData() {
+    const t = this.abilityRadarChart.getContext("2d");
+    if (!this.abilityRadarChartContainer || !t) return;
+    const e = m(t), r = this.abilityRadarChartContainer.clientWidth * e, i = this.abilityRadarChartContainer.clientHeight * e;
+    this.abilityRadarChart.width = r, this.abilityRadarChart.height = i, this.mW = r, this.mData = this.abilitys, this.mCount = this.mData?.length || 1, this.mCenter = this.mW / 2, this.mRadius = this.mCenter - 50 * e, this.mAngle = Math.PI * 2 / this.mCount, this.drawPolygon(t), this.drawSide(t), this.drawLines(t), this.drawText(t), this.drawRegion(t), this.drawCircle(t);
+  }
+  drawSide(t) {
+    if (!this.mRadius || !this.mCount || !this.mCenter || !this.mAngle) return;
+    t.save(), t.strokeStyle = this.colorLine;
+    const e = this.mRadius;
+    for (let r = 0; r < this.mCount; r++) {
+      const i = this.mCenter + e * Math.sin(this.mAngle * r), a = this.mCenter + e * Math.cos(this.mAngle * r);
+      t.lineTo(i, a);
+    }
+    t.closePath(), t.stroke();
+  }
+  drawPolygon(t) {
+    if (!this.mRadius || !this.mCount || !this.mCenter || !this.mAngle) return;
+    t.save(), t.strokeStyle = this.colorPolygon;
+    const e = this.mRadius / 4;
+    t.setLineDash([6, 6]);
+    for (let r = 0; r < 4; r++) {
+      t.beginPath();
+      const i = e * (r + 1);
+      for (let a = 0; a < this.mCount; a++) {
+        const o = this.mCenter + i * Math.sin(this.mAngle * a), s = this.mCenter + i * Math.cos(this.mAngle * a);
+        t.lineTo(o, s);
+      }
+      t.closePath(), t.stroke();
+    }
+    t.restore();
+  }
+  drawLines(t) {
+    if (!(!this.mRadius || !this.mCount || !this.mCenter || !this.mAngle)) {
+      t.save(), t.beginPath(), t.strokeStyle = this.colorLine;
+      for (let e = 0; e < this.mCount; e++) {
+        const r = this.mCenter + this.mRadius * Math.sin(this.mAngle * e), i = this.mCenter + this.mRadius * Math.cos(this.mAngle * e);
+        t.moveTo(this.mCenter, this.mCenter), t.lineTo(r, i);
+      }
+      t.stroke(), t.restore();
+    }
+  }
+  drawText(t) {
+    if (!this.mRadius || !this.mCount || !this.mCenter || !this.mAngle || !this.mData) return;
+    t.save();
+    const e = m(t), r = this.mCenter / 12;
+    for (let i = 0; i < this.mCount; i++) {
+      const a = this.mCenter + this.mRadius * Math.sin(this.mAngle * i), o = this.mCenter + this.mRadius * Math.cos(this.mAngle * i), s = this.mData[i]?.backgroundColor || M, l = this.mData[i]?.fontColor || this.fontColor, n = this.mData[i]?.fontFamily || O, h = this.mData[i]?.fontSize || r;
+      t.font = `${h}px ${n}`, this.mAngle * i >= 0 && this.mAngle * i < Math.PI / 2 ? this.drawButton(t, s, a, o, 44 * e, 24 * e, 12 * e, this.mData[i].abilityName, l, n, h) : this.mAngle * i >= Math.PI / 2 && this.mAngle * i < Math.PI ? this.drawButton(t, s, a, o - 24 * e, 44 * e, 24 * e, 12 * e, this.mData[i].abilityName, l, n, h) : this.mAngle * i >= Math.PI && this.mAngle * i < Math.PI * 3 / 2 ? this.drawButton(t, s, a - 44 * e, o - 24 * e, 44 * e, 24 * e, 12 * e, this.mData[i].abilityName, l, n, h) : this.drawButton(t, s, a - 44 * e, o, 44 * e, 24 * e, 12 * e, this.mData[i].abilityName, l, n, h);
+    }
+    t.restore();
+  }
+  drawButton(t, e, r, i, a, o, s, l, n, h, b) {
+    t.beginPath();
+    const c = m(t);
+    t.fillStyle = e, t.moveTo(r + s, i), t.lineTo(r + a - s, i), t.arc(r + a - s, i + s, s, Math.PI * 3 / 2, Math.PI * 2), t.lineTo(r + a, i + o - s), t.arc(r + a - s, i + o - s, s, Math.PI, Math.PI / 2), t.lineTo(r + s, i + o), t.arc(r + s, i + o - s, s, Math.PI / 2, Math.PI), t.lineTo(r, i + s), t.arc(r + s, i + s, s, Math.PI, Math.PI * 3 / 2), t.fill(), t.closePath(), t.beginPath(), t.fillStyle = n, t.font = `${b || 12 * c}px ${h}`, t.textAlign = "center", t.textBaseline = "middle", t.fillText(l, r + a / 2, i + o / 2);
+  }
+  drawRegion(t) {
+    if (!this.mRadius || !this.mCount || !this.mCenter || !this.mAngle || !this.mData) return;
+    const e = m(t);
+    t.save(), t.beginPath();
+    for (let r = 0; r < this.mCount; r++) {
+      const i = this.mCenter + this.mRadius * Math.sin(this.mAngle * r) * this.mData[r].scoreRate / 100, a = this.mCenter + this.mRadius * Math.cos(this.mAngle * r) * this.mData[r].scoreRate / 100;
+      t.lineTo(i, a);
+    }
+    t.closePath(), t.fillStyle = this.fillColor, t.fill(), t.strokeStyle = this.strokeColor, t.lineWidth = 1 * e, t.stroke(), t.restore();
+  }
+  drawCircle(t) {
+    if (!this.mRadius || !this.mCount || !this.mCenter || !this.mAngle || !this.mData) return;
+    const e = m(t);
+    t.save();
+    for (let r = 0; r < this.mCount; r++) {
+      const i = this.mCenter + this.mRadius * Math.sin(this.mAngle * r) * this.mData[r].scoreRate / 100, a = this.mCenter + this.mRadius * Math.cos(this.mAngle * r) * this.mData[r].scoreRate / 100;
+      t.beginPath(), t.arc(i, a, 3, 0, Math.PI * 2), t.lineWidth = 1.5 * e, t.strokeStyle = this.strokeColor, t.stroke();
+    }
+    t.restore();
+  }
+  connectedCallback() {
+    this.handlerExternalCss(), this.refreshData();
+  }
+  disconnectedCallback() {
+    this.resizeObserver.disconnect();
+  }
+  attributeChangedCallback(t, e, r) {
+    e !== r && ([
+      "abilitys",
+      "colorPolygon",
+      "colorLine",
+      "fillColor",
+      "strokeColor"
+    ].includes(t) && this.abilityRadarChartContainer && this.refreshData(), t === "sheet" && this.handlerExternalCss());
+  }
+};
+p("r-radar", L);
+export {
+  L as t
+};

package/dist/radar.js

@@ -1,6 +1,5 @@
-import { a } from "./index-mhFL9MJp.js";
-import "./arrow-down-B_hCY3Wt.js";
-import "./index-DC5EA657.js";
+import { t as r } from "./radar-CWsawt2g.js";
 export {
-  a as default
+  r as RadarChart,
+  r as default
 };

package/dist/ranui.css

@@ -0,0 +1 @@
+.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}:root{--ran-background-100: #ffffff;--ran-background-200: #fafafa;--ran-gray-100: #f2f2f2;--ran-gray-200: #ebebeb;--ran-gray-300: #e6e6e6;--ran-gray-400: #eaeaea;--ran-gray-500: #c9c9c9;--ran-gray-600: #a8a8a8;--ran-gray-700: #8f8f8f;--ran-gray-800: #7d7d7d;--ran-gray-900: #4d4d4d;--ran-gray-1000: #171717;--ran-gray-alpha-100: #0000000d;--ran-gray-alpha-200: #00000015;--ran-gray-alpha-300: #0000001a;--ran-gray-alpha-400: #00000014;--ran-gray-alpha-500: #00000036;--ran-gray-alpha-600: #0000003d;--ran-gray-alpha-700: #00000070;--ran-gray-alpha-800: #00000082;--ran-gray-alpha-900: #000000b3;--ran-gray-alpha-1000: #000000e8;--ran-blue-100: #f0f7ff;--ran-blue-200: #e9f4ff;--ran-blue-300: #dfefff;--ran-blue-400: #cae7ff;--ran-blue-500: #94ccff;--ran-blue-600: #48aeff;--ran-blue-700: #006bff;--ran-blue-800: #0059ec;--ran-blue-900: #005ff2;--ran-blue-1000: #002359;--ran-red-100: #ffeeef;--ran-red-200: #ffe8ea;--ran-red-300: #ffe3e4;--ran-red-400: #ffd7d6;--ran-red-500: #ffb1b3;--ran-red-600: #ff676d;--ran-red-700: #fc0035;--ran-red-800: #ea001d;--ran-red-900: #d8001b;--ran-red-1000: #47000c;--ran-amber-100: #fff6de;--ran-amber-200: #fff4cf;--ran-amber-300: #fff1c1;--ran-amber-400: #ffdc73;--ran-amber-500: #ffc543;--ran-amber-600: #ffa600;--ran-amber-700: #ffae00;--ran-amber-800: #ff9300;--ran-amber-900: #aa4d00;--ran-amber-1000: #561900;--ran-green-100: #ecfdec;--ran-green-200: #e5fce7;--ran-green-300: #d3fad1;--ran-green-400: #b9f5bc;--ran-green-500: #82eb8d;--ran-green-600: #4ce15e;--ran-green-700: #28a948;--ran-green-800: #279141;--ran-green-900: #107d32;--ran-green-1000: #003a00;--ran-color-primary: var(--ran-blue-700);--ran-color-primary-hover: var(--ran-blue-800);--ran-color-primary-active: var(--ran-blue-900);--ran-color-success: var(--ran-green-700);--ran-color-warning: var(--ran-amber-700);--ran-color-danger: var(--ran-red-700);--ran-color-bg: var(--ran-background-100);--ran-color-bg-subtle: var(--ran-background-200);--ran-color-bg-elevated: var(--ran-background-100);--ran-color-bg-muted: var(--ran-gray-100);--ran-color-bg-hover: var(--ran-gray-200);--ran-color-bg-active: var(--ran-gray-300);--ran-color-text: var(--ran-gray-1000);--ran-color-text-secondary: var(--ran-gray-900);--ran-color-text-disabled: var(--ran-gray-700);--ran-color-border: var(--ran-gray-400);--ran-color-border-secondary: var(--ran-gray-300);--ran-color-border-hover: var(--ran-gray-500);--ran-color-border-active: var(--ran-gray-600);--ran-color-link: var(--ran-blue-700);--ran-font-family: "Geist", "Geist Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--ran-font-mono: "Geist Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;--ran-font-size: 14px;--ran-line-height: 1.5715;--ran-radius-sm: 6px;--ran-radius-md: 12px;--ran-radius-lg: 16px;--ran-radius-full: 9999px;--ran-space-1: 4px;--ran-space-2: 8px;--ran-space-3: 12px;--ran-space-4: 16px;--ran-space-6: 24px;--ran-space-8: 32px;--ran-space-10: 40px;--ran-space-16: 64px;--ran-space-24: 96px;--ran-shadow-elevated: 0 1px 2px rgba(0, 0, 0, .04), 0 2px 4px -2px rgba(0, 0, 0, .05);--ran-shadow-menu: 0 2px 4px rgba(0, 0, 0, .05), 0 8px 24px -6px rgba(0, 0, 0, .14);--ran-shadow-modal: 0 4px 12px rgba(0, 0, 0, .08), 0 20px 48px -12px rgba(0, 0, 0, .22);--ran-z-modal: 1000;--ran-z-dropdown: 1100;--ran-z-message: 1200;--ran-focus-ring: 0 0 0 2px var(--ran-background-100), 0 0 0 4px var(--ran-color-primary);--ran-motion-duration-fast: .15s;--ran-motion-duration-base: .2s;--ran-skin-border-width: 1px;--ran-skin-border-style: solid;--ran-skin-raised-shadow: var(--ran-shadow-elevated);--ran-skin-font-family: var(--ran-font-family)}@media(prefers-color-scheme:dark){:root:not([data-ran-theme=light]):not([theme=light]){--ran-background-100: #000000;--ran-background-200: #000000;--ran-gray-100: #1a1a1a;--ran-gray-200: #1f1f1f;--ran-gray-300: #292929;--ran-gray-400: #2e2e2e;--ran-gray-500: #454545;--ran-gray-600: #878787;--ran-gray-700: #8f8f8f;--ran-gray-800: #7d7d7d;--ran-gray-900: #a0a0a0;--ran-gray-1000: #ededed;--ran-gray-alpha-100: #ffffff12;--ran-gray-alpha-200: #ffffff17;--ran-gray-alpha-300: #ffffff21;--ran-gray-alpha-400: #ffffff24;--ran-gray-alpha-500: #ffffff3d;--ran-gray-alpha-600: #ffffff82;--ran-gray-alpha-700: #ffffff8a;--ran-gray-alpha-800: #ffffff78;--ran-gray-alpha-900: #ffffff9c;--ran-gray-alpha-1000: #ffffffeb;--ran-blue-100: #06193a;--ran-blue-200: #022248;--ran-blue-300: #002f62;--ran-blue-400: #003674;--ran-blue-500: #00418b;--ran-blue-600: #0090ff;--ran-blue-700: #006efe;--ran-blue-800: #005be7;--ran-blue-900: #47a8ff;--ran-blue-1000: #eaf6ff;--ran-red-100: #330a11;--ran-red-200: #440d13;--ran-red-300: #5d0e17;--ran-red-400: #6f101b;--ran-red-500: #88151f;--ran-red-600: #f32e40;--ran-red-700: #f13242;--ran-red-800: #e2162a;--ran-red-900: #ff565f;--ran-red-1000: #ffe9ed;--ran-amber-100: #2a1700;--ran-amber-200: #361900;--ran-amber-300: #502800;--ran-amber-400: #5b3000;--ran-amber-500: #703e00;--ran-amber-600: #ed9a00;--ran-amber-700: #ffae00;--ran-amber-800: #ff9300;--ran-amber-900: #ff9300;--ran-amber-1000: #fff3d5;--ran-green-100: #002608;--ran-green-200: #00320b;--ran-green-300: #003a0e;--ran-green-400: #004615;--ran-green-500: #006717;--ran-green-600: #00952d;--ran-green-700: #00ac3a;--ran-green-800: #009432;--ran-green-900: #00ca50;--ran-green-1000: #d8ffe4;--ran-color-bg-elevated: var(--ran-gray-100);--ran-shadow-elevated: 0 1px 2px rgba(0, 0, 0, .16);--ran-shadow-menu: 0 1px 1px rgba(0, 0, 0, .2), 0 4px 8px -4px rgba(0, 0, 0, .4), 0 16px 24px -8px rgba(0, 0, 0, .5);--ran-shadow-modal: 0 1px 1px rgba(0, 0, 0, .2), 0 8px 16px -4px rgba(0, 0, 0, .4), 0 24px 32px -8px rgba(0, 0, 0, .5)}}:root[data-ran-theme=dark],:root[theme=dark]{--ran-background-100: #000000;--ran-background-200: #000000;--ran-gray-100: #1a1a1a;--ran-gray-200: #1f1f1f;--ran-gray-300: #292929;--ran-gray-400: #2e2e2e;--ran-gray-500: #454545;--ran-gray-600: #878787;--ran-gray-700: #8f8f8f;--ran-gray-800: #7d7d7d;--ran-gray-900: #a0a0a0;--ran-gray-1000: #ededed;--ran-gray-alpha-100: #ffffff12;--ran-gray-alpha-200: #ffffff17;--ran-gray-alpha-300: #ffffff21;--ran-gray-alpha-400: #ffffff24;--ran-gray-alpha-500: #ffffff3d;--ran-gray-alpha-600: #ffffff82;--ran-gray-alpha-700: #ffffff8a;--ran-gray-alpha-800: #ffffff78;--ran-gray-alpha-900: #ffffff9c;--ran-gray-alpha-1000: #ffffffeb;--ran-blue-100: #06193a;--ran-blue-200: #022248;--ran-blue-300: #002f62;--ran-blue-400: #003674;--ran-blue-500: #00418b;--ran-blue-600: #0090ff;--ran-blue-700: #006efe;--ran-blue-800: #005be7;--ran-blue-900: #47a8ff;--ran-blue-1000: #eaf6ff;--ran-red-100: #330a11;--ran-red-200: #440d13;--ran-red-300: #5d0e17;--ran-red-400: #6f101b;--ran-red-500: #88151f;--ran-red-600: #f32e40;--ran-red-700: #f13242;--ran-red-800: #e2162a;--ran-red-900: #ff565f;--ran-red-1000: #ffe9ed;--ran-amber-100: #2a1700;--ran-amber-200: #361900;--ran-amber-300: #502800;--ran-amber-400: #5b3000;--ran-amber-500: #703e00;--ran-amber-600: #ed9a00;--ran-amber-700: #ffae00;--ran-amber-800: #ff9300;--ran-amber-900: #ff9300;--ran-amber-1000: #fff3d5;--ran-green-100: #002608;--ran-green-200: #00320b;--ran-green-300: #003a0e;--ran-green-400: #004615;--ran-green-500: #006717;--ran-green-600: #00952d;--ran-green-700: #00ac3a;--ran-green-800: #009432;--ran-green-900: #00ca50;--ran-green-1000: #d8ffe4;--ran-color-bg-elevated: var(--ran-gray-100);--ran-shadow-elevated: 0 1px 2px rgba(0, 0, 0, .16);--ran-shadow-menu: 0 1px 1px rgba(0, 0, 0, .2), 0 4px 8px -4px rgba(0, 0, 0, .4), 0 16px 24px -8px rgba(0, 0, 0, .5);--ran-shadow-modal: 0 1px 1px rgba(0, 0, 0, .2), 0 8px 16px -4px rgba(0, 0, 0, .4), 0 24px 32px -8px rgba(0, 0, 0, .5)}