ranui 0.1.9 → 0.1.10-alpha-24

package/dist/{index-e03d23e7.js → index-Bb55l8nf.js}

@@ -1,10 +1,7 @@
 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;
-};
-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}@keyframes skeleton{0%{transform:translate(-37.5%)}to{transform:translate(37.5%)}}.ran-skeleton{position:relative;z-index:0;overflow:hidden;background:0 0;width:100%;height:16px;background:rgba(0,0,0,.06);border-radius:4px}.ran-skeleton:after{position:absolute;top:0;inset-inline-end:-150%;bottom:0;inset-inline-start:-150%;background:linear-gradient(90deg,rgba(0,0,0,.06) 25%,rgba(0,0,0,.15) 37%,rgba(0,0,0,.06) 63%);animation-name:skeleton;animation-duration:1.4s;animation-timing-function:ease;animation-iteration-count:infinite;content:""}\n';
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+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}@keyframes skeleton{0%{transform:translate(-37.5%)}to{transform:translate(37.5%)}}.ran-skeleton{position:relative;z-index:0;overflow:hidden;background:0 0;width:100%;height:16px;background:#0000000f;border-radius:4px}.ran-skeleton:after{position:absolute;top:0;inset-inline-end:-150%;bottom:0;inset-inline-start:-150%;background:linear-gradient(90deg,#0000000f 25%,#00000026 37%,#0000000f 63%);animation-name:skeleton;animation-duration:1.4s;animation-timing-function:ease;animation-iteration-count:infinite;content:""}';
 function Skeleton() {
   if (typeof window !== "undefined" && !customElements.get("r-skeleton")) {
     class CustomElement extends HTMLElement {
@@ -22,12 +19,6 @@ function Skeleton() {
       static get observedAttributes() {
         return ["disabled"];
       }
-      connectedCallback() {
-      }
-      disconnectCallback() {
-      }
-      attributeChangedCallback(name, oldValue, newValue) {
-      }
     }
     window.customElements.define("r-skeleton", CustomElement);
   }

package/dist/{index-0d5b9435.js → index-BbW0dxzy.js}

@@ -1,11 +1,9 @@
 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;
-};
-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([type="toast"]){--ranui-message-background: rgba(0, 0, 0, .7);--ranui-message-color: #fff;--ranui-message-border-radius: 7px}.ran-message-notice{padding:8px;text-align:center;max-width:90%;margin:0 auto;word-break:break-all}.ran-message-notice-content{display:inline-block;padding:10px 16px;background:var(--ranui-message-background, #fff);border-radius:var(--ranui-message-border-radius, 8px);box-shadow:0 3px 6px -4px #0000001f,0 6px 16px #00000014,0 9px 28px 8px #0000000d;pointer-events:all}.ran-message-notice-content-info{align-items:center;display:flex}.ran-message-notice-content-info span{margin:0;padding:0;color:var(--ranui-message-color, #000000d9);font-size:14px;font-variant:tabular-nums;list-style:none;font-feature-settings:"tnum";z-index:1010;width:100%;pointer-events:none}@keyframes MessageMoveIn{0%{padding:0;transform:translateY(-100%);opacity:0}to{padding:8px;transform:translateY(0);opacity:1}}@keyframes MessageMoveOut{0%{max-height:150px;padding:8px;opacity:1}to{max-height:0;padding:0;opacity:0}}.ranui-message{box-sizing:border-box;margin:0;padding:0;color:#000000d9;font-size:14px;font-variant:tabular-nums;line-height:1.5715;list-style:none;font-feature-settings:"tnum";position:fixed;top:8px;left:0;z-index:1010;width:100%;pointer-events:none}.ranui-message .message-in{animation-name:MessageMoveIn;animation-duration:.3s;animation-timing-function:cubic-bezier(.78,.14,.15,.86)}.ranui-message .message-leave{animation-name:MessageMoveOut;animation-duration:.3s;animation-timing-function:cubic-bezier(.78,.14,.15,.86)}\n';
-const index$1 = "";
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+import { c as create } from "./plus-DgJxWGlo.js";
+import "./index-n4X6wdwJ.js";
+const less = '.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([type="toast"]) .ran-message-notice{padding:8px;text-align:center;max-width:90%;margin:0 auto;word-break:break-all}:host([type="toast"]) .ran-message-notice-content{display:inline-block;padding:10px 16px;background:#000000b3;border-radius:7px;pointer-events:all}:host([type="toast"]) .ran-message-notice-content-info{align-items:center;display:flex}:host([type="toast"]) .ran-message-notice-content-info span{margin:0;padding:0;font-size:14px;font-variant:tabular-nums;list-style:none;font-feature-settings:"tnum";z-index:1010;width:100%;pointer-events:none;color:#fff}.ran-message-notice{padding:var(--ran-message-notice-padding, 8px);text-align:var(--ran-message-notice-text-align, center);max-width:var(--ran-message-notice-max-width, 90%);margin:var(--ran-message-notice-margin, 0 auto);word-break:var(--ran-message-notice-word-break, break-all)}.ran-message-notice-content{display:var(--ran-message-notice-content-display, inline-block);padding:var(--ran-message-notice-content-padding, 10px 16px);background:var(--ran-message-notice-content-background, #fff);border-radius:var(--ran-message-notice-content-border-radius, 8px);box-shadow:var(--ran-message-notice-content-box-shadow, 0 3px 6px -4px #0000001f, 0 6px 16px #00000014, 0 9px 28px 8px #0000000d);pointer-events:var(--ran-message-notice-content-pointer-events, all)}.ran-message-notice-content-info{align-items:var(--ran-message-notice-content-info-align-items, center);display:var(--ran-message-notice-content-info-display, flex)}.ran-message-notice-content-info span{margin:var(--ran-message-notice-content-info-span-margin, 0);padding:var(--ran-message-notice-content-info-span-padding, 0);color:var(--ran-message-notice-content-info-span-color, #000000d9);font-size:var(--ran-message-notice-content-info-span-font-size, 14px);font-variant:var(--ran-message-notice-content-info-span-font-variant, tabular-nums);list-style:var(--ran-message-notice-content-info-span-list-style, none);font-feature-settings:var(--ran-message-notice-content-info-span-font-feature-settings, "tnum");z-index:var(--ran-message-notice-content-info-span-z-index, 1010);width:var(--ran-message-notice-content-info-span-width, 100%);pointer-events:var(--ran-message-notice-content-info-span-pointer-events, none)}@keyframes rotate{to{transform:rotate(360deg)}}@keyframes MessageMoveIn{0%{padding:0;transform:translateY(-100%);opacity:0}to{padding:8px;transform:translateY(0);opacity:1}}@keyframes MessageMoveOut{0%{max-height:150px;padding:8px;opacity:1}to{max-height:0;padding:0;opacity:0}}.ranui-message{box-sizing:var(--ran-message-box-sizing, border-box);margin:var(--ran-message-margin, 0);padding:var(--ran-message-padding, 0);color:var(--ran-message-color, #000000d9);font-size:var(--ran-message-font-size, 14px);font-variant:var(--ran-message-font-variant, tabular-nums);line-height:var(--ran-message-line-height, 1.5715);list-style:var(--ran-message-ist-style, none);font-feature-settings:var(--ran-message-font-feature-settings, "tnum");position:var(--ran-message-position, fixed);top:var(--ran-message-top, 8px);left:var(--ran-message-left, 0);z-index:var(--ran-message-z-index, 1010);width:var(--ran-message-width, 100%);pointer-events:var(--ran-message-pointer-events, none)}.ranui-message .message-in{animation-name:var(--ran-message-in-animation-name, MessageMoveIn);animation-duration:var(--ran-message-in-animation-duration, .3s);animation-timing-function:var(--ran-message-in-animation-timing-function, cubic-bezier(.78, .14, .15, .86))}.ranui-message .message-leave{animation-name:var(--ran-message-leave-animation-name, MessageMoveOut);animation-duration:var(--ran-message-leave-animation-duration, .3s);animation-timing-function:var(--ran-message-leave-animation-timing-function, cubic-bezier(.78, .14, .15, .86))}';
 const AnimationTime = 300;
 const defaultDuration = 3e3;
 const typeMapIcon = /* @__PURE__ */ new Map([
@@ -63,7 +61,7 @@ function Custom() {
         this._notice.appendChild(this._content);
         const shadowRoot = this.attachShadow({ mode: "closed" });
         const F7170EE498E0DD32CBDCB63FBA8F75CC = document.createElement("style");
-        F7170EE498E0DD32CBDCB63FBA8F75CC.textContent = f7170ee498e0dd32cbdcb63fba8f75cc;
+        F7170EE498E0DD32CBDCB63FBA8F75CC.textContent = less;
         shadowRoot.appendChild(F7170EE498E0DD32CBDCB63FBA8F75CC);
         shadowRoot.appendChild(this._notice);
       }
@@ -74,15 +72,13 @@ function Custom() {
         return this.getAttribute("type");
       }
       set type(value) {
-        if (value)
-          this.setAttribute("type", value);
+        if (value) this.setAttribute("type", value);
       }
       get content() {
         return this.getAttribute("content");
       }
       set content(value) {
-        if (value)
-          this.setAttribute("content", value);
+        if (value) this.setAttribute("content", value);
       }
       attributeChangedCallback(name, oldValue, newValue) {
         if (name === "content" && oldValue !== newValue) {
@@ -95,9 +91,11 @@ function Custom() {
     }
     customElements.define("r-message", CustomMessage);
     const container = document.createElement("div");
+    const style = create("style").setTextContent(less);
     const div = document.createElement("div");
     div.setAttribute("class", "ranui-message");
     document.body.appendChild(container);
+    container.appendChild(style.element);
     container.appendChild(div);
     const commonPrompt = (type) => {
       return (options) => {
@@ -107,8 +105,7 @@ function Custom() {
         message2.setAttribute("type", type);
         let duration = defaultDuration;
         let close;
-        if (!options)
-          return;
+        if (!options) return;
         if (typeof options === "string") {
           message2.setAttribute("content", options);
         } else {
@@ -124,8 +121,7 @@ function Custom() {
         message2.timeId = setTimeout(() => {
           message2.classList.remove("message-leave");
           div.removeChild(message2);
-          if (close)
-            close();
+          if (close) close();
         }, duration);
         div.appendChild(message2);
         message2.classList.add("message-in");
@@ -142,7 +138,7 @@ function Custom() {
       toast: commonPrompt("toast")
     };
   }
-  return {};
+  return null;
 }
 const message = Custom();
 if (typeof window !== "undefined" && message) {

package/dist/index-BgUpm4LA.js

@@ -0,0 +1,103 @@
+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 { c as create, a as addClassToElement, r as removeClassToElement } from "./plus-DgJxWGlo.js";
+import { c as createCustomError, H as HTMLElementSSR } from "./index-hdtEL8P_.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}@keyframes ranui-dropdown-up-in{0%{transform:scaleY(.8);transform-origin:100% 100%;opacity:0}to{transform:scaleY(1);transform-origin:100% 100%;opacity:1}}@keyframes ranui-dropdown-up-out{0%{transform:scaleY(1);transform-origin:100% 100%;opacity:1}to{transform:scaleY(.8);transform-origin:100% 100%;opacity:0}}@keyframes ranui-dropdown-down-in{0%{transform:scaleY(.8);transform-origin:0% 0%;opacity:0}to{transform:scaleY(1);transform-origin:0% 0%;opacity:1}}@keyframes ranui-dropdown-down-out{0%{transform:scaleY(1);transform-origin:0% 0%;opacity:1}to{transform:scaleY(.8);transform-origin:0% 0%;opacity:0}}@keyframes ranui-dropdown-left-in{0%{transform:scaleX(.8);transform-origin:100% 0%;opacity:0}to{transform:scaleX(1);transform-origin:100% 0%;opacity:1}}@keyframes ranui-dropdown-left-out{0%{transform:scaleX(1);transform-origin:100% 0%;opacity:1}to{transform:scaleX(.8);transform-origin:100% 0%;opacity:0}}@keyframes ranui-dropdown-right-in{0%{transform:scaleX(.8);transform-origin:0% 0%;opacity:0}to{transform:scaleX(1);transform-origin:0% 0%;opacity:1}}@keyframes ranui-dropdown-right-out{0%{transform:scaleX(1);transform-origin:0% 0%;opacity:1}to{transform:scaleX(.8);transform-origin:0% 0%;opacity:0}}.ran-dropdown-down-in{animation:ranui-dropdown-down-in .1s;animation-fill-mode:forwards}.ran-dropdown-down-out{animation:ranui-dropdown-down-out .1s;animation-fill-mode:forwards}.ran-dropdown-up-in{animation:ranui-dropdown-up-in .1s;animation-fill-mode:forwards}.ran-dropdown-up-out{animation:ranui-dropdown-up-out .1s;animation-fill-mode:forwards}.ran-dropdown-left-in{animation:ranui-dropdown-left-in .1s;animation-fill-mode:forwards}.ran-dropdown-left-out{animation:ranui-dropdown-left-out .1s;animation-fill-mode:forwards}.ran-dropdown-right-in{animation:ranui-dropdown-right-in .1s;animation-fill-mode:forwards}.ran-dropdown-right-out{animation:ranui-dropdown-right-out .1s;animation-fill-mode:forwards}:host{text-align:var(--ran-dropdown-host-text-align, left);z-index:10}.ranui-dropdown{transform-origin:var(--ran-x, 50%) var(--ran-y, 50%);box-sizing:var(--ran-dropdown-box-sizing, border-box);margin:var(--ran-dropdown-margin, 0);padding:var(--ran-dropdown-padding, 0);color:var(--ran-dropdown-color, rgba(0, 0, 0, .88));font-size:var(--ran-dropdown-font-size, 14px);list-style:var(--ran-dropdown-list-style, none);font-family:var(--ran-dropdown-font-family, -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");z-index:var(--ran-dropdown-z-index, 1050);overflow:var(--ran-dropdown-overflow, hidden);font-variant:var(--ran-dropdown-font-variant, initial);background:var(--ran-dropdown-background, #ffffff);border-radius:var(--ran-dropdown-border-radius, 8px);outline:var(--ran-dropdown-outline, none);box-shadow:var(--ran-dropdown-box-shadow, 0 6px 16px 0 rgba(0, 0, 0, .08), 0 3px 6px -4px rgba(0, 0, 0, .12), 0 9px 28px 8px rgba(0, 0, 0, .05));cursor:var(--ran-dropdown-cursor, auto);width:var(--ran-dropdown-width, 100%);height:var(--ran-dropdown-height, 100%);min-height:var(--ran-popover-height, 100%);min-width:var(--ran-popover-width, 100%)}.ranui-dropdown-container{position:var(--ran-dropdown-container-position, relative);display:var(--ran-dropdown-container-display, block);width:var(--ran-dropdown-container-width, 100%);height:var(--ran-dropdown-container-height, 100%);box-sizing:var(--ran-dropdown-container-box-sizing, border-box)}.ranui-dropdown-container .top{transform:translate(calc(var(--ran-popover-width) / 2 - calc(var(--ran-dropdown-arrow-width, 16px) / 2))) translateY(-16px) rotate(0);top:0}.ranui-dropdown-container .bottom{transform:translate(calc(var(--ran-popover-width) / 2 - calc(var(--ran-dropdown-arrow-width, 16px) / 2))) translateY(0) rotate(180deg);top:calc(var(--ran-popover-height) - calc(var(--ran-dropdown-arrow-width, 16px) / 4),0px)}.ranui-dropdown-container .left{transform:translate(calc(0px - var(--ran-dropdown-arrow-width, 16px))) translateY(calc(var(--ran-dropdown-arrow-width, 16px) / 2)) rotate(270deg);top:max(0px,calc(var(--ran-popover-height) / 2 - calc(var(--ran-dropdown-arrow-width, 16px))))}.ranui-dropdown-container .right{left:100%;transform:translate(0) translateY(calc(var(--ran-popover-height) / 2 - calc(var(--ran-dropdown-arrow-width, 16px) / 2))) rotate(90deg);top:0}.ranui-dropdown-arrow{position:var(--ran-dropdown-arrow-position, absolute);box-sizing:var(--ran-dropdown-arrow-box-sizing, border-box);z-index:var(--ran-dropdown-arrow-z-index, 1);display:var(--ran-dropdown-arrow-display, block);pointer-events:var(--ran-dropdown-arrow-pointer-events, none);width:var(--ran-dropdown-arrow-width, var(--ran-dropdown-arrow-width, 16px));height:var(--ran-dropdown-arrow-height, var(--ran-dropdown-arrow-width, 16px));overflow:var(--ran-dropdown-arrow-overflow, hidden)}.ranui-dropdown-arrow:before{background:var(--ran-dropdown-arrow-before-background, #fff);position:var(--ran-dropdown-arrow-before-position, absolute);bottom:var(--ran-dropdown-arrow-before-bottom, 0);inset-inline-start:0;width:var(--ran-dropdown-arrow-before-width, var(--ran-dropdown-arrow-width, 16px));height:var(--ran-dropdown-arrow-before-height, calc(var(--ran-dropdown-arrow-width, 16px) / 2));clip-path:path("M 0 8 A 4 4 0 0 0 2.82842712474619 6.82842712474619 L 6.585786437626905 3.0710678118654755 A 2 2 0 0 1 9.414213562373096 3.0710678118654755 L 13.17157287525381 6.82842712474619 A 4 4 0 0 0 16 8 Z");content:var(--ran-dropdown-arrow-before-content, "")}.ranui-dropdown-arrow:after{content:var(--ran-dropdown-arrow-after-content, "");position:var(--ran-dropdown-arrow-after-position, absolute);width:var(--ran-dropdown-arrow-after-width, 9px);height:var(--ran-dropdown-arrow-after-height, 9px);bottom:var(--ran-dropdown-arrow-after-bottom, 0);inset-inline:0;margin:var(--ran-dropdown-arrow-after-margin, auto);border-radius:var(--ran-dropdown-arrow-after-border-radius, 0 0 2px 0);transform:var(--ran-dropdown-arrow-after-transform, translateY(50%) rotate(-135deg));box-shadow:var(--ran-dropdown-arrow-after-box-shadow, 2px 2px 5px rgba(0, 0, 0, .05));z-index:var(--ran-dropdown-arrow-after-z-index, 0);background:var(--ran-dropdown-arrow-after-background, transparent)}';
+const animationTime = 300;
+class Dropdown extends HTMLElementSSR() {
+  constructor() {
+    super();
+    __publicField(this, "dropdown");
+    __publicField(this, "_slot");
+    __publicField(this, "_shadowDom");
+    __publicField(this, "arrowIcon");
+    __publicField(this, "container");
+    __publicField(this, "handlerTransit", () => {
+      if (this.transit) {
+        addClassToElement(this.dropdown.element, this.transit);
+        setTimeout(() => {
+          removeClassToElement(this.dropdown.element, this.transit);
+        }, animationTime);
+      }
+    });
+    __publicField(this, "handlerArrow", () => {
+      if (!this.arrow) return;
+      if (!this.arrowIcon) {
+        this.arrowIcon = create("div").setAttribute("class", `ranui-dropdown-arrow ${this.arrow}`);
+        this.container.addChild([this.arrowIcon]);
+      }
+    });
+    __publicField(this, "stopPropagation", (e) => {
+      e.stopPropagation();
+    });
+    this._slot = create("slot").setAttribute("class", "slot");
+    this.dropdown = create("div").setStyle("-webkit-tap-highlight-color", "transparent").setStyle("outline", "0").setAttribute("class", "ranui-dropdown").setAttribute("part", "ranui-dropdown").addChild([this._slot]);
+    this.container = create("div").setAttribute("class", "ranui-dropdown-container").addChild([this.dropdown]);
+    const shadowRoot = this.attachShadow({ mode: "closed" });
+    const F7170EE498E0DD32CBDCB63FBA8F75CC = document.createElement("style");
+    F7170EE498E0DD32CBDCB63FBA8F75CC.textContent = f7170ee498e0dd32cbdcb63fba8f75cc;
+    shadowRoot.appendChild(F7170EE498E0DD32CBDCB63FBA8F75CC);
+    this._shadowDom = shadowRoot;
+    shadowRoot.appendChild(this.container.element);
+  }
+  static get observedAttributes() {
+    return ["transit", "arrow"];
+  }
+  get transit() {
+    return this.getAttribute("transit") || "";
+  }
+  set transit(value) {
+    if (value) {
+      this.setAttribute("transit", value);
+    } else {
+      this.removeAttribute("transit");
+    }
+  }
+  get arrow() {
+    return this.getAttribute("arrow") || "";
+  }
+  set arrow(value) {
+    if (value) {
+      this.setAttribute("arrow", value);
+    } else {
+      this.removeAttribute("arrow");
+    }
+  }
+  get show() {
+    return this.getAttribute("show") || "";
+  }
+  set show(value) {
+    if (value) {
+      this.setAttribute("show", value);
+    } else {
+      this.removeAttribute("show");
+    }
+  }
+  connectedCallback() {
+    this.handlerTransit();
+    this.handlerArrow();
+  }
+  disconnectedCallback() {
+  }
+  attributeChangedCallback(name, _, newValue) {
+    if (name === "transit" && newValue) {
+      addClassToElement(this.dropdown.element, this.transit);
+      setTimeout(() => {
+        removeClassToElement(this.dropdown.element, this.transit);
+      }, animationTime);
+    }
+    if (name === "arrow") {
+      this.handlerArrow();
+    }
+  }
+}
+function Custom() {
+  if (typeof document !== "undefined" && !customElements.get("r-dropdown")) {
+    customElements.define("r-dropdown", Dropdown);
+    return Dropdown;
+  } else {
+    return createCustomError("document is undefined or r-dropdown is exist");
+  }
+}
+Custom();

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

@@ -1,12 +1,9 @@
 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-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";
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+import { g as getPixelRatio } from "./plus-DgJxWGlo.js";
+import { c as createCustomError } from "./index-hdtEL8P_.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:var(--ran-radar-position, relative);width:var(--ran-radar-width, 100%);height:var(--ran-radar-height, 100%);display:var(--ran-radar-display, block)}";
 const BACKGROUND_COLOR = "rgba(0,0,0,0)";
 const FONT_COLOR = "rgba(0,0,0,1)";
 const POLYGON_COLOR = "#e6e6e6";
@@ -43,13 +40,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");
@@ -58,6 +49,7 @@ function Custom() {
             const result = JSON.parse(item);
             return result;
           } catch (error) {
+            console.error(`Failed to parse the rule in JSON.parse: ${item}, error: ${error}`);
             return item;
           }
         }
@@ -101,8 +93,7 @@ function Custom() {
       refreshData() {
         var _a;
         const ctx = this.abilityRadarChart.getContext("2d");
-        if (!this.abilityRadarChartContainer || !ctx)
-          return;
+        if (!this.abilityRadarChartContainer || !ctx) return;
         const radio = getPixelRatio(ctx);
         const width = this.abilityRadarChartContainer.clientWidth * radio;
         const height = this.abilityRadarChartContainer.clientHeight * radio;
@@ -122,8 +113,7 @@ function Custom() {
         this.drawCircle(ctx);
       }
       drawSide(ctx) {
-        if (!this.mRadius || !this.mCount || !this.mCenter || !this.mAngle)
-          return;
+        if (!this.mRadius || !this.mCount || !this.mCenter || !this.mAngle) return;
         ctx.save();
         ctx.strokeStyle = this.colorLine;
         const r = this.mRadius;
@@ -137,8 +127,7 @@ function Custom() {
       }
       // 绘制多边形边
       drawPolygon(ctx) {
-        if (!this.mRadius || !this.mCount || !this.mCenter || !this.mAngle)
-          return;
+        if (!this.mRadius || !this.mCount || !this.mCenter || !this.mAngle) return;
         ctx.save();
         ctx.strokeStyle = this.colorPolygon;
         const r = this.mRadius / 4;
@@ -158,8 +147,7 @@ function Custom() {
       }
       // 顶点连线
       drawLines(ctx) {
-        if (!this.mRadius || !this.mCount || !this.mCenter || !this.mAngle)
-          return;
+        if (!this.mRadius || !this.mCount || !this.mCenter || !this.mAngle) return;
         ctx.save();
         ctx.beginPath();
         ctx.strokeStyle = this.colorLine;
@@ -175,8 +163,7 @@ function Custom() {
       // 绘制文本
       drawText(ctx) {
         var _a, _b, _c, _d;
-        if (!this.mRadius || !this.mCount || !this.mCenter || !this.mAngle || !this.mData)
-          return;
+        if (!this.mRadius || !this.mCount || !this.mCenter || !this.mAngle || !this.mData) return;
         ctx.save();
         const radio = getPixelRatio(ctx);
         const defaultFontSize = this.mCenter / 12;
@@ -254,21 +241,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);
@@ -284,8 +259,7 @@ function Custom() {
       }
       // 绘制数据区域
       drawRegion(ctx) {
-        if (!this.mRadius || !this.mCount || !this.mCenter || !this.mAngle || !this.mData)
-          return;
+        if (!this.mRadius || !this.mCount || !this.mCenter || !this.mAngle || !this.mData) return;
         const radio = getPixelRatio(ctx);
         ctx.save();
         ctx.beginPath();
@@ -304,8 +278,7 @@ function Custom() {
       }
       // 画点
       drawCircle(ctx) {
-        if (!this.mRadius || !this.mCount || !this.mCenter || !this.mAngle || !this.mData)
-          return;
+        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++) {
@@ -322,16 +295,8 @@ function Custom() {
       connectedCallback() {
         this.refreshData();
       }
-      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();
         }

package/dist/{index-4443363f.js → index-CUZna268.js}

@@ -1,14 +1,11 @@
 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 { p as perToNum } from "./index-7913ec46.js";
-import { c as createCustomError } from "./index-57492b9b.js";
-const index$2 = "";
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+import { p as perToNum } from "./plus-DgJxWGlo.js";
+import { c as createCustomError, H as HTMLElementSSR } from "./index-hdtEL8P_.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:active,:host:focus{outline:0;-webkit-tap-highlight-color:transparent}.ran-progress{position:var(--ran-progress-position, relative);cursor:var(--ran-progress-cursor, pointer);width:var(--ran-progress-width, 100%);height:var(--ran-progress-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, #5b5b5b);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:var(--ran-progress-wrap-value-transform, scaleX(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:var(--ran-progress-dot-left, -9px);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)}";
 const attributes = ["percent", "type", "total", "dot"];
-class Progress extends HTMLElement {
+class Progress extends HTMLElementSSR() {
   constructor() {
     super();
     __publicField(this, "_progress");
@@ -16,50 +13,31 @@ class Progress extends HTMLElement {
     __publicField(this, "_progressWrapValue");
     __publicField(this, "_progressDot");
     __publicField(this, "moveProgress");
+    __publicField(this, "_shadowDom");
     __publicField(this, "progressClick", (e) => {
       const rect = this._progress.getBoundingClientRect();
       const offsetX = e.clientX - rect.left;
-      const percentage = Math.min(
-        1,
-        Math.max(0, offsetX / this._progress.offsetWidth)
-      );
-      this.percent = percentage * this.total;
-      this._progressWrapValue.style.setProperty(
-        "transform",
-        `scaleX(${percentage})`
-      );
-      this._progressDot.style.setProperty(
-        "transform",
-        `translateX(${percentage * this._progress.offsetWidth}px)`
-      );
+      const percentage = Math.min(1, Math.max(0, offsetX / this._progress.offsetWidth));
+      this.percent = `${percentage * Number(this.total)}`;
+      this._progressWrapValue.style.setProperty("transform", `scaleX(${percentage})`);
+      this._progressDot.style.setProperty("transform", `translateX(${percentage * this._progress.offsetWidth}px)`);
       this.change();
     });
     __publicField(this, "progressDotMouseDown", () => {
       this.moveProgress.mouseDown = true;
     });
     __publicField(this, "progressDotMouseMove", (e) => {
-      if (!this.moveProgress.mouseDown)
-        return;
+      if (!this.moveProgress.mouseDown) return;
       const rect = this._progress.getBoundingClientRect();
       const offsetX = e.clientX - rect.left;
-      const percentage = Math.min(
-        1,
-        Math.max(0, offsetX / this._progress.offsetWidth)
-      );
-      this.percent = percentage * this.total;
-      this._progressWrapValue.style.setProperty(
-        "transform",
-        `scaleX(${percentage})`
-      );
-      this._progressDot.style.setProperty(
-        "transform",
-        `translateX(${percentage * this._progress.offsetWidth}px)`
-      );
+      const percentage = Math.min(1, Math.max(0, offsetX / this._progress.offsetWidth));
+      this.percent = `${percentage * Number(this.total)}`;
+      this._progressWrapValue.style.setProperty("transform", `scaleX(${percentage})`);
+      this._progressDot.style.setProperty("transform", `translateX(${percentage * this._progress.offsetWidth}px)`);
       this.change();
     });
-    __publicField(this, "progressDotMouseUp", (e) => {
-      if (!this.moveProgress.mouseDown)
-        return;
+    __publicField(this, "progressDotMouseUp", () => {
+      if (!this.moveProgress.mouseDown) return;
       this.moveProgress.mouseDown = false;
     });
     __publicField(this, "change", () => {
@@ -82,35 +60,23 @@ class Progress extends HTMLElement {
       }
     });
     __publicField(this, "updateCurrentProgress", () => {
-      const percent = this.percent / this.total;
-      this._progressWrapValue.style.setProperty(
-        "transform",
-        `scaleX(${percent})`
-      );
-      this._progressDot.style.setProperty(
-        "transform",
-        `translateX(${percent * this._progress.offsetWidth}px)`
-      );
+      const percent = Number(this.percent) / Number(this.total);
+      this._progressWrapValue.style.setProperty("transform", `scaleX(${percent})`);
+      this._progressDot.style.setProperty("transform", `translateX(${percent * this._progress.offsetWidth}px)`);
     });
     __publicField(this, "dragEvent", () => {
-      if (this.type !== "drag")
-        return;
+      if (this.type !== "drag") return;
       this._progress.addEventListener("click", this.progressClick);
       this._progressDot.addEventListener("mousedown", this.progressDotMouseDown);
       document.addEventListener("mousemove", this.progressDotMouseMove);
       document.addEventListener("mouseup", this.progressDotMouseUp);
     });
-    __publicField(this, "createProgress", () => {
-      if (!this.contains(this._progress)) {
-        this.appendChild(this._progress);
-        this._progress.appendChild(this._progressDot);
-      }
-    });
     __publicField(this, "resize", () => {
       this.updateCurrentProgress();
     });
     this._progress = document.createElement("div");
     this._progress.setAttribute("class", "ran-progress");
+    this._progress.setAttribute("role", "progressbar");
     this._progressWrap = document.createElement("div");
     this._progressWrap.setAttribute("class", "ran-progress-wrap");
     this._progress.appendChild(this._progressWrap);
@@ -122,6 +88,13 @@ class Progress extends HTMLElement {
     this.moveProgress = {
       mouseDown: false
     };
+    this._progress.appendChild(this._progressDot);
+    const shadowRoot = this.attachShadow({ mode: "closed" });
+    const F7170EE498E0DD32CBDCB63FBA8F75CC = document.createElement("style");
+    F7170EE498E0DD32CBDCB63FBA8F75CC.textContent = f7170ee498e0dd32cbdcb63fba8f75cc;
+    shadowRoot.appendChild(F7170EE498E0DD32CBDCB63FBA8F75CC);
+    this._shadowDom = shadowRoot;
+    shadowRoot.appendChild(this._progress);
   }
   static get observedAttributes() {
     return attributes;
@@ -129,20 +102,20 @@ class Progress extends HTMLElement {
   get percent() {
     const percent = this.getAttribute("percent") || "";
     const num = perToNum(percent);
-    if (num > this.total) {
+    if (Number(num) > Number(this.total)) {
       console.error("percent must be < total");
       return this.total;
     }
-    return perToNum(percent);
+    return `${perToNum(percent)}`;
   }
   set percent(value) {
     this.setAttribute("percent", `${value || 0}`);
+    this.setAttribute("aria-valuenow", `${value || 0}`);
   }
   get total() {
     const total = this.getAttribute("total");
-    if (!total)
-      return 1;
-    return perToNum(total);
+    if (!total) return "1";
+    return `${perToNum(total)}`;
   }
   set total(value) {
     this.setAttribute("total", value || "");
@@ -184,25 +157,23 @@ class Progress extends HTMLElement {
     this.setAttribute("dot", value || "true");
   }
   connectedCallback() {
+    const type = this.getAttribute("type");
+    if (!type) {
+      this.setAttribute("type", "primary");
+    }
     this.dragEvent();
     this.updateCurrentProgress();
     window.addEventListener("resize", this.resize);
   }
   disconnectCallback() {
     this._progress.removeEventListener("click", this.progressClick);
-    this._progressDot.removeEventListener(
-      "mousedown",
-      this.progressDotMouseDown
-    );
+    this._progressDot.removeEventListener("mousedown", this.progressDotMouseDown);
     document.removeEventListener("mousemove", this.progressDotMouseMove);
     document.removeEventListener("mouseup", this.progressDotMouseUp);
     window.removeEventListener("resize", this.resize);
   }
   attributeChangedCallback(k, o, n) {
     if (o !== n) {
-      if (k === "type") {
-        this.createProgress();
-      }
       if (k === "dot") {
         this.appendProgressDot();
       }
@@ -214,7 +185,8 @@ class Progress extends HTMLElement {
 }
 function Custom() {
   if (typeof document !== "undefined" && !customElements.get("r-progress")) {
-    customElements.define("r-progress", Progress);
+    Progress && customElements.define("r-progress", Progress);
+    return Progress;
   } else {
     return createCustomError("document is undefined or r-progress is exist");
   }