ranui 0.1.0-alpha → 0.1.1-alpha.2

package/dist/index.js

@@ -1,4 +1,10 @@
-const f7170ee498e0dd32cbdcb63fba8f75cc$4 = ':host{position:relative;display:inline-block;font-weight:400;white-space:nowrap;text-align:center;background-image:none;border:1px solid transparent;box-shadow:0 2px #00000004;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;line-height:22px;font-size:14px;border-radius:2px;color:#000000d9;border-color:#d9d9d9;background:#fff;overflow:hidden;pointer-events:auto}:host,:host(:active),:host(:focus){outline:0}:host(:not([disabled]):hover){border-color:#1890ff;color:#1890ff}:host([type="primary"]){border-color:#1890ff;background-color:#1890ff;color:#fff}:host([type="primary"]:not([disabled])):after{background-image:radial-gradient(circle,#fff 10%,transparent 10.01%)}:host([type="primary"]:not([disabled]):hover){background-color:#40a9ff;color:#fff}:host([type="warning"]){border-color:#ff4d4f;background-color:#ff4d4f;color:#fff}:host([type="warning"]:not([disabled])):after{background-image:radial-gradient(circle,#fff 10%,transparent 10.01%)}:host([type="warning"]:not([disabled]):hover){border-color:#ff4d4f;background-color:#ff4d4f;color:#fff}:host([type="text"]){border:none}:host([disabled]){cursor:not-allowed;pointer-events:all;opacity:.6}:host(:not([disabled]):active):after{transform:translate(-50%,-50%) scale(0);opacity:.3;transition:0s}:host(:active) .btn:before{opacity:.2}:host(:not([disabled])):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;margin:4px 15px}\n';
+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$6 = '.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}:host{position:relative;display:inline-block;font-weight:400;white-space:nowrap;text-align:center;background-image:none;border:1px solid transparent;box-shadow:0 2px #00000004;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;line-height:22px;font-size:14px;border-radius:2px;color:#000000d9;border-color:#d9d9d9;background:#fff;overflow:hidden;pointer-events:auto}:host,:host(:active),:host(:focus){outline:0}:host(:not([disabled]):hover){border-color:#1890ff;color:#1890ff}:host([type="primary"]){border-color:#1890ff;background-color:#1890ff;color:#fff}:host([type="primary"]:not([disabled])):after{background-image:radial-gradient(circle,#fff 10%,transparent 10.01%)}:host([type="primary"]:not([disabled]):hover){background-color:#40a9ff;color:#fff}:host([type="warning"]){border-color:#ff4d4f;background-color:#ff4d4f;color:#fff}:host([type="warning"]:not([disabled])):after{background-image:radial-gradient(circle,#fff 10%,transparent 10.01%)}:host([type="warning"]:not([disabled]):hover){border-color:#ff4d4f;background-color:#ff4d4f;color:#fff}:host([type="text"]){border:none}:host([disabled]){cursor:not-allowed;pointer-events:all;opacity:.6}:host(:not([disabled]):active):after{transform:translate(-50%,-50%) scale(0);opacity:.3;transition:0s}:host(:active) .btn:before{opacity:.2}:host(:not([disabled],[effect])):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}.btn{display:flex;justify-content:space-between;align-items:center;padding:4px 15px}.btn .icon{margin-right:2px}\n';
 const falseList = [false, "false", null, void 0];
 const isDisabled = (element) => {
   const status = element.hasAttribute("disabled");
@@ -7,671 +13,1112 @@ const isDisabled = (element) => {
     return true;
   return false;
 };
-class CustomElement$4 extends HTMLElement {
-  constructor() {
-    super();
-    this.mousedown = (event) => {
-      if (!this.disabled || this.disabled === "false") {
-        const { left, top } = this.getBoundingClientRect();
-        this.style.setProperty("--ran-x", event.clientX - left + "px");
-        this.style.setProperty("--ran-y", event.clientY - top + "px");
-      }
-    };
-    this.mouseLeave = () => {
-      this.style.removeProperty("--ran-x");
-      this.style.removeProperty("--ran-y");
-    };
-    const slot = document.createElement("slot");
-    this._btn = document.createElement("div");
-    this._btn.appendChild(slot);
-    slot.setAttribute("class", "slot");
-    const shadowRoot = this.attachShadow({ mode: "closed" });
-    const F7170EE498E0DD32CBDCB63FBA8F75CC = document.createElement("style");
-    F7170EE498E0DD32CBDCB63FBA8F75CC.textContent = f7170ee498e0dd32cbdcb63fba8f75cc$4;
-    shadowRoot.appendChild(F7170EE498E0DD32CBDCB63FBA8F75CC);
-    shadowRoot.appendChild(this._btn);
-  }
-  static get observedAttributes() {
-    return ["disabled", "type"];
+const setElementClass = (element, addClass) => {
+  const classList = element.classList;
+  if (!classList.contains(addClass)) {
+    classList.add(addClass);
   }
-  get disabled() {
-    return isDisabled(this);
-  }
-  set disabled(value) {
-    if (!value || value === "false") {
-      this.removeAttribute("disabled");
-    } else {
-      this.setAttribute("disabled", "");
-    }
-  }
-  connectedCallback() {
-    this._btn.addEventListener("mousedown", this.mousedown);
-    this._btn.addEventListener("mouseleave", this.mouseLeave);
-  }
-  disconnectCallback() {
-    this._btn.removeEventListener("mousedown", this.mousedown);
-    this._btn.removeEventListener("mouseleave", this.mouseLeave);
+};
+const deleteElementChildClass = (parent, deleteClass) => {
+  const pre = parent.querySelectorAll(`.${deleteClass}`);
+  if (pre.length > 0) {
+    pre.forEach((item) => item.classList.remove(deleteClass));
   }
-  attributeChangedCallback(name, oldValue, newValue) {
-    if (name == "disabled" && this._btn) {
-      if (!newValue || newValue === "false") {
-        this._btn.setAttribute("disabled", "");
-      } else {
-        this._btn.removeAttribute("disabled");
+};
+function Custom$4() {
+  if (typeof window !== "undefined" && !customElements.get("r-button")) {
+    class Button extends HTMLElement {
+      constructor() {
+        super();
+        __publicField(this, "_btn");
+        __publicField(this, "_iconElement");
+        __publicField(this, "_slot");
+        __publicField(this, "setIcon", () => {
+          if (this.icon) {
+            const { width, height } = this._slot.getBoundingClientRect();
+            const size = Math.min(width, height);
+            if (this._iconElement) {
+              this._iconElement.setAttribute("name", this.icon);
+              this._iconElement.setAttribute("size", `${size - 5}`);
+            } else {
+              this._iconElement = document.createElement("r-icon");
+              this._iconElement.setAttribute("name", this.icon);
+              this._iconElement.setAttribute("size", `${size - 5}`);
+              this._iconElement.setAttribute("color", "currentColor");
+              this._iconElement.setAttribute("class", "icon");
+              this._slot.insertAdjacentElement("beforebegin", this._iconElement);
+            }
+          }
+        });
+        __publicField(this, "mousedown", (event) => {
+          if (!this.disabled || this.disabled === "false") {
+            const { left, top } = this.getBoundingClientRect();
+            this.style.setProperty("--ran-x", event.clientX - left + "px");
+            this.style.setProperty("--ran-y", event.clientY - top + "px");
+          }
+        });
+        __publicField(this, "mouseLeave", () => {
+          this.style.removeProperty("--ran-x");
+          this.style.removeProperty("--ran-y");
+        });
+        this._slot = document.createElement("slot");
+        this._btn = document.createElement("div");
+        this._btn.setAttribute("class", "btn");
+        this._btn.appendChild(this._slot);
+        this._slot.setAttribute("class", "slot");
+        const shadowRoot = this.attachShadow({ mode: "closed" });
+        const F7170EE498E0DD32CBDCB63FBA8F75CC = document.createElement("style");
+        F7170EE498E0DD32CBDCB63FBA8F75CC.textContent = f7170ee498e0dd32cbdcb63fba8f75cc$6;
+        shadowRoot.appendChild(F7170EE498E0DD32CBDCB63FBA8F75CC);
+        shadowRoot.appendChild(this._btn);
+      }
+      static get observedAttributes() {
+        return ["disabled", "icon", "effect"];
+      }
+      get disabled() {
+        return isDisabled(this);
+      }
+      set disabled(value) {
+        if (!value || value === "false") {
+          this.removeAttribute("disabled");
+        } else {
+          this.setAttribute("disabled", "");
+        }
+      }
+      get icon() {
+        return this.getAttribute("icon");
+      }
+      set icon(value) {
+        if (value) {
+          this.setAttribute("icon", value);
+        }
+      }
+      get effect() {
+        return this.getAttribute("effect");
+      }
+      set effect(value) {
+        if (falseList.includes(value) || !value) {
+          this.removeAttribute("effect");
+        } else {
+          this.setAttribute("effect", value);
+        }
+      }
+      connectedCallback() {
+        this._btn.addEventListener("mousedown", this.mousedown);
+        this._btn.addEventListener("mouseleave", this.mouseLeave);
+        this.setIcon();
+      }
+      disconnectCallback() {
+        this._btn.removeEventListener("mousedown", this.mousedown);
+        this._btn.removeEventListener("mouseleave", this.mouseLeave);
+      }
+      attributeChangedCallback(name, oldValue, newValue) {
+        if (name === "disabled" && this._btn) {
+          if (!newValue || newValue === "false") {
+            this._btn.setAttribute("disabled", "");
+          } else {
+            this._btn.removeAttribute("disabled");
+          }
+        }
+        if (name === "icon") {
+          if (oldValue !== newValue) {
+            this.setIcon();
+          }
+        }
       }
     }
+    customElements.define("r-button", Button);
+    return Button;
   }
 }
-function Custom$2() {
-  if (!customElements.get("r-button")) {
-    customElements.define("r-button", CustomElement$4);
-  }
+Custom$4();
+const __variableDynamicImportRuntimeHelper = (glob, path) => {
+  const v = glob[path];
+  if (v) {
+    return typeof v === "function" ? v() : Promise.resolve(v);
+  }
+  return new Promise((_, reject) => {
+    (typeof queueMicrotask === "function" ? queueMicrotask : setTimeout)(reject.bind(null, new Error("Unknown variable dynamic import: " + path)));
+  });
+};
+const f7170ee498e0dd32cbdcb63fba8f75cc$5 = '.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}:host{display:inline-flex}:host .icon{display:block}:host([spin]){animation-name:rotate;animation-duration:1.4s;animation-timing-function:linear;animation-iteration-count:infinite}@keyframes rotate{to{transform:rotate(360deg)}}\n';
+const fs = {};
+let fileSystem = fs;
+if (typeof process !== "undefined" && typeof fileSystem.Stats === "function") {
+  fileSystem._identification = true;
+} else {
+  fileSystem = { _identification: false, message: "require is not defined" };
 }
-Custom$2();
-const f7170ee498e0dd32cbdcb63fba8f75cc$3 = "";
-class CustomElement$3 extends HTMLElement {
-  constructor() {
-    super();
-    this._container = document.createElement("div");
-    this._container.setAttribute("class", "r-image");
-    const shadowRoot = this.attachShadow({ mode: "closed" });
-    const F7170EE498E0DD32CBDCB63FBA8F75CC = document.createElement("style");
-    F7170EE498E0DD32CBDCB63FBA8F75CC.textContent = f7170ee498e0dd32cbdcb63fba8f75cc$3;
-    shadowRoot.appendChild(F7170EE498E0DD32CBDCB63FBA8F75CC);
-    shadowRoot.appendChild(this._container);
-  }
-  static get observedAttributes() {
-    return ["fallback"];
-  }
-  get fallback() {
-    return this.getAttribute("fallback");
-  }
-  set fallback(value) {
-    if (value) {
-      this.setAttribute("fallback", value);
-    } else {
-      this.removeAttribute("fallback");
-    }
-  }
-  listenFallback(name, value) {
-    if (name === "fallback" && this._image) {
-      if (value) {
-        this._image.setAttribute("fallback", value);
-      } else {
-        this._image.removeAttribute("fallback");
+const str2Xml = (xmlStr, format = "text/xml") => {
+  if (window.DOMParser)
+    return new window.DOMParser().parseFromString(xmlStr, format).documentElement;
+  if (typeof window.ActiveXObject !== "undefined" && new window.ActiveXObject("Microsoft.XMLDOM")) {
+    const xmlDoc = new window.ActiveXObject("Microsoft.XMLDOM");
+    xmlDoc.async = "false";
+    xmlDoc.loadXML(xmlStr);
+    return xmlDoc;
+  }
+  return void 0;
+};
+function Custom$3() {
+  if (typeof window !== "undefined" && !customElements.get("r-icon")) {
+    class CustomElement2 extends HTMLElement {
+      constructor() {
+        super();
+        __publicField(this, "_icon");
+        __publicField(this, "_div");
+        __publicField(this, "loadLocal", () => {
+          return new Promise((resolve, reject) => {
+            __variableDynamicImportRuntimeHelper(/* @__PURE__ */ Object.assign({ "../../assets/icons/add-user.svg": () => import("./add-user.98b805f1.js"), "../../assets/icons/book.svg": () => import("./book.c3235430.js"), "../../assets/icons/check-circle-fill.svg": () => import("./check-circle-fill.0a9e8a28.js"), "../../assets/icons/check-circle.svg": () => import("./check-circle.711c4f31.js"), "../../assets/icons/close-circle-fill.svg": () => import("./close-circle-fill.726bf59c.js"), "../../assets/icons/close-circle.svg": () => import("./close-circle.dda355df.js"), "../../assets/icons/eye-close.svg": () => import("./eye-close.a954b46e.js"), "../../assets/icons/eye.svg": () => import("./eye.c904f80b.js"), "../../assets/icons/home.svg": () => import("./home.f5970edc.js"), "../../assets/icons/info-circle-fill.svg": () => import("./info-circle-fill.9dfc3b5e.js"), "../../assets/icons/info-circle.svg": () => import("./info-circle.718e6ac4.js"), "../../assets/icons/loading.svg": () => import("./loading.876d0293.js"), "../../assets/icons/lock.svg": () => import("./lock.26244026.js"), "../../assets/icons/message.svg": () => import("./message.5379338a.js"), "../../assets/icons/power-off.svg": () => import("./power-off.050e4c26.js"), "../../assets/icons/setting.svg": () => import("./setting.7917f3b2.js"), "../../assets/icons/team.svg": () => import("./team.b3a3196b.js"), "../../assets/icons/unlock.svg": () => import("./unlock.1e7bed93.js"), "../../assets/icons/user.svg": () => import("./user.21cfbfa6.js"), "../../assets/icons/warning-circle-fill.svg": () => import("./warning-circle-fill.b87fec04.js"), "../../assets/icons/warning-circle.svg": () => import("./warning-circle.b1792bd4.js") }), `../../assets/icons/${this.name}.svg`).then((result) => {
+              if (result && result.default && result.default._identification) {
+                const { data } = result.default;
+                this._icon && this._div.removeChild(this._icon);
+                this._icon = str2Xml(data, "image/svg+xml");
+                if (this._icon) {
+                  this._div.appendChild(this._icon);
+                  this.setSize();
+                  this.setColor();
+                  resolve();
+                }
+              } else {
+                this.loadNs();
+                reject(`
+ couldn't be loaded by r-icon, message: ${this.name} icon is undefined`);
+              }
+            }).catch((error) => {
+              this.loadNs();
+            });
+          });
+        });
+        __publicField(this, "loadNs", () => {
+          if (this._icon && this._div) {
+            this._div.removeChild(this._icon);
+          }
+          this._icon = document.createElement("svg");
+          this._icon.setAttribute("class", "icon");
+          this._icon.setAttribute("viewBox", "0 0 1024 1024");
+          this._icon.setAttribute("width", "100");
+          this._icon.setAttribute("height", "100");
+          const xLinksNs = "http://www.w3.org/1999/xlink";
+          const use = document.createElementNS(xLinksNs, "use");
+          use.setAttributeNS(xLinksNs, "xlink:href", `../../assets/iconfont/icon.svg#icon-${this.name}`);
+          this._icon.appendChild(use);
+          this._div.appendChild(this._icon);
+        });
+        __publicField(this, "setIcon", async () => {
+          if (this.name) {
+            this.loadLocal();
+          }
+        });
+        __publicField(this, "setSize", () => {
+          if (this._icon && this.size) {
+            this._icon.setAttribute("width", this.size);
+            this._icon.setAttribute("height", this.size);
+          }
+        });
+        __publicField(this, "setColor", () => {
+          if (this._icon) {
+            this.color ? this._icon.setAttribute("fill", this.color) : this._icon.setAttribute("fill", "currentColor");
+          }
+        });
+        __publicField(this, "setSpin", () => {
+          if (this.spin) {
+            this.style.setProperty("animation-duration", `${this.spin}s`);
+          }
+        });
+        this._div = document.createElement("div");
+        this._div.setAttribute("class", "icon");
+        const shadowRoot = this.attachShadow({ mode: "closed" });
+        const F7170EE498E0DD32CBDCB63FBA8F75CC = document.createElement("style");
+        F7170EE498E0DD32CBDCB63FBA8F75CC.textContent = f7170ee498e0dd32cbdcb63fba8f75cc$5;
+        shadowRoot.appendChild(F7170EE498E0DD32CBDCB63FBA8F75CC);
+        shadowRoot.appendChild(this._div);
+      }
+      static get observedAttributes() {
+        return ["name", "size", "color", "spin"];
+      }
+      get name() {
+        return this.getAttribute("name");
+      }
+      set name(value) {
+        if (value)
+          this.setAttribute("name", value);
+      }
+      get size() {
+        return this.getAttribute("size");
+      }
+      set size(value) {
+        if (value)
+          this.setAttribute("size", value);
+      }
+      get color() {
+        return this.getAttribute("color");
+      }
+      set color(value) {
+        if (value)
+          this.setAttribute("color", value);
+      }
+      get spin() {
+        return this.getAttribute("spin");
+      }
+      set spin(value) {
+        if (value != null)
+          this.setAttribute("spin", value);
+      }
+      connectedCallback() {
+        this.setIcon();
+      }
+      attributeChangedCallback(name, oldValue, newValue) {
+        if (newValue !== oldValue) {
+          if (name === "name")
+            this.setIcon();
+          if (name === "size")
+            this.setSize();
+          if (name === "color")
+            this.setColor();
+          if (name === "spin")
+            this.setSpin();
+        }
       }
     }
-  }
-  connectedCallback() {
-    const src = this.getAttribute("src") || "";
-    this._image = new Image();
-    this._image.src = src;
-    this._image.addEventListener("error", () => {
-      if (this._image && this.fallback) {
-        this._image.src = this.fallback;
-      }
-    });
-    this._image.addEventListener("load", () => {
-      if (this._image) {
-        this._container.appendChild(this._image);
-      }
-    });
-  }
-  attributeChangedCallback(name, oldValue, newValue) {
-    this.listenFallback(name, newValue);
+    customElements.define("r-icon", CustomElement2);
   }
 }
-function Custom$1() {
-  if (!customElements.get("r-img")) {
-    customElements.define("r-img", CustomElement$3);
-  }
-}
-Custom$1();
-const f7170ee498e0dd32cbdcb63fba8f75cc$2 = '.input{position:relative;display:inline-block;width:100%;min-width:0;padding:2px 8px;color:#000000d9;font-size:12px;line-height:1.5715;background-color:#fff;background-image:none;border:1px solid #d9d9d9;border-radius:2px;transition:all .3s}.input:active{border-color:#40a9ff;box-shadow:0 0 0 2px #1890ff33;border-right-width:1px;outline:0}.input:hover{border-color:#40a9ff;border-right-width:1px}.input>.input-main:hover~.input-label{color:#40a9ff}.input[value]>.input-label{transform:translateY(calc(-50% - .43em)) scale(.8);color:#00000040}.input[disabled]{color:#00000040;background-color:#f5f5f5;border-color:#d9d9d9;box-shadow:none;cursor:not-allowed;opacity:1}.input[disabled]>.input-main{color:#00000040;background-color:#f5f5f5;border-color:#d9d9d9;box-shadow:none;cursor:not-allowed;opacity:1}.input[disabled]>.input-main:hover~.input-label{color:#999}.input[disabled]>.input-label{color:#999;border-color:#d9d9d9;box-shadow:none;cursor:not-allowed}.input-main{writing-mode:horizontal-tb;text-rendering:auto;letter-spacing:normal;word-spacing:normal;text-transform:none;text-indent:0px;text-shadow:none;text-align:start;-webkit-rtl-ordering:logical;cursor:text;touch-action:manipulation;-webkit-appearance:none;text-overflow:ellipsis;box-sizing:border-box;margin:0;font-variant:tabular-nums;list-style:none;font-feature-settings:"tnum";position:relative;border:none;width:100%;min-width:0;color:#000000d9;font-size:14px;line-height:1.5715;background-color:#fff;background-image:none;transition:all .3s}.input-main:focus,.input-main:hover{border:none;outline:0}.input-main::placeholder{color:#999}.input-main:placeholder-shown~.input-label{transform:translateY(calc(-50% - .43em)) scale(.8)}.input-main:focus~.input-label{transform:translateY(calc(-50% - .43em)) scale(.8)}.input-label{pointer-events:none;position:absolute;font-size:14px;left:8px;transition:transform .3s,color .3s,background-color .3s;transform-origin:left;padding:0 .2em;color:#999;backdrop-filter:blur(10px);opacity:.9}\n';
-class CustomElement$2 extends HTMLElement {
-  constructor() {
-    super();
-    this.inputValue = (event) => {
-      event.stopPropagation();
-      const target = event.target;
-      this.value = target ? target.value : "";
-      this.dispatchEvent(
-        new CustomEvent("input", {
-          detail: {
-            value: this.value
-          }
-        })
-      );
-    };
-    this.change = () => {
-      this.dispatchEvent(
-        new CustomEvent("change", {
-          detail: {
-            value: this.value
-          }
-        })
-      );
-    };
-    this.focus = () => {
-      this.dispatchEvent(
-        new CustomEvent("focus", {
-          detail: {
-            value: this.value
-          }
-        })
-      );
-    };
-    this.checkout = () => {
-    };
-    const shadowRoot = this.attachShadow({ mode: "closed" });
-    const F7170EE498E0DD32CBDCB63FBA8F75CC = document.createElement("style");
-    F7170EE498E0DD32CBDCB63FBA8F75CC.textContent = f7170ee498e0dd32cbdcb63fba8f75cc$2;
-    shadowRoot.appendChild(F7170EE498E0DD32CBDCB63FBA8F75CC);
-    this._container = document.createElement("div");
-    this._container.setAttribute("class", "input");
-    this._input = document.createElement("input");
-    this._input.setAttribute("class", "input-main");
-    this._container.appendChild(this._input);
-    shadowRoot.appendChild(this._container);
-  }
-  static get observedAttributes() {
-    return [
-      "label",
-      "disabled",
-      "name",
-      "pattern",
-      "required",
-      "placeholder",
-      "type"
-    ];
-  }
-  get value() {
-    return this.getAttribute("value");
-  }
-  set value(value) {
-    if (!isDisabled(this) && value) {
-      this.setAttribute("value", value);
-      this._container.setAttribute("value", value);
-    } else {
-      this.removeAttribute("value");
-      this._container.removeAttribute("value");
-    }
-  }
-  get placeholder() {
-    return this.getAttribute("placeholder");
-  }
-  set placeholder(value) {
-    if (value) {
-      this.setAttribute("placeholder", value);
-    } else {
-      this.removeAttribute("placeholder");
-    }
-  }
-  get required() {
-    return this.getAttribute("required");
-  }
-  set required(value) {
-    if (!value || value === "false") {
-      this.removeAttribute("required");
-    } else {
-      this.setAttribute("required", "");
-    }
-  }
-  get warning() {
-    return this.getAttribute("warning");
-  }
-  set warning(value) {
-    if (!value) {
-      this.removeAttribute("warning");
-    } else {
-      this.setAttribute("warning", value);
-    }
-  }
-  get pattern() {
-    return this.getAttribute("pattern");
-  }
-  set pattern(value) {
-    if (!value || value === "false") {
-      this.removeAttribute("pattern");
-    } else {
-      this.setAttribute("pattern", value);
-    }
-  }
-  get disabled() {
-    return isDisabled(this);
-  }
-  set disabled(value) {
-    if (falseList.includes(value)) {
-      this.removeAttribute("disabled");
-      this._container.removeAttribute("disabled");
-      this._input.removeAttribute("disabled");
-    } else {
-      this.setAttribute("disabled", "");
-      this._container.setAttribute("disabled", "");
-      this._input.setAttribute("disabled", "");
-    }
-  }
-  get label() {
-    return this.getAttribute("label") || "";
-  }
-  set label(value) {
-    this.setAttribute("label", value);
-  }
-  get name() {
-    return this.getAttribute("name") || "";
-  }
-  set name(value) {
-    this.setAttribute("name", value);
-  }
-  get icon() {
-    return this.getAttribute("icon");
-  }
-  set icon(value) {
-    if (value) {
-      this.setAttribute("icon", value);
-    } else {
-      this.removeAttribute("icon");
-    }
-  }
-  get type() {
-    return this.getAttribute("type");
-  }
-  set type(value) {
-    if (value) {
-      this.setAttribute("type", value);
-    } else {
-      this.removeAttribute("type");
-    }
-  }
-  listenPlaceholder(name, value) {
-    if (name === "placeholder" && this._input) {
-      if (value !== null) {
-        this._input.setAttribute("placeholder", value);
-      } else {
-        this._input.removeAttribute("placeholder");
+Custom$3();
+const f7170ee498e0dd32cbdcb63fba8f75cc$4 = '.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}\n';
+const failImage = `
+    data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMIAAADDCAYAAADQvc6UAAABRWlDQ1BJQ0MgUHJvZmlsZQAAKJFjYGASSSwoyGFhYGDIzSspCnJ3UoiIjFJgf8LAwSDCIMogwMCcmFxc4BgQ4ANUwgCjUcG3awyMIPqyLsis7PPOq3QdDFcvjV3jOD1boQVTPQrgSkktTgbSf4A4LbmgqISBgTEFyFYuLykAsTuAbJEioKOA7DkgdjqEvQHEToKwj4DVhAQ5A9k3gGyB5IxEoBmML4BsnSQk8XQkNtReEOBxcfXxUQg1Mjc0dyHgXNJBSWpFCYh2zi+oLMpMzyhRcASGUqqCZ16yno6CkYGRAQMDKMwhqj/fAIcloxgHQqxAjIHBEugw5sUIsSQpBobtQPdLciLEVJYzMPBHMDBsayhILEqEO4DxG0txmrERhM29nYGBddr//5/DGRjYNRkY/l7////39v///y4Dmn+LgeHANwDrkl1AuO+pmgAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAAwqADAAQAAAABAAAAwwAAAAD9b/HnAAAHlklEQVR4Ae3dP3PTWBSGcbGzM6GCKqlIBRV0dHRJFarQ0eUT8LH4BnRU0NHR0UEFVdIlFRV7TzRksomPY8uykTk/zewQfKw/9znv4yvJynLv4uLiV2dBoDiBf4qP3/ARuCRABEFAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghgg0Aj8i0JO4OzsrPv69Wv+hi2qPHr0qNvf39+iI97soRIh4f3z58/u7du3SXX7Xt7Z2enevHmzfQe+oSN2apSAPj09TSrb+XKI/f379+08+A0cNRE2ANkupk+ACNPvkSPcAAEibACyXUyfABGm3yNHuAECRNgAZLuYPgEirKlHu7u7XdyytGwHAd8jjNyng4OD7vnz51dbPT8/7z58+NB9+/bt6jU/TI+AGWHEnrx48eJ/EsSmHzx40L18+fLyzxF3ZVMjEyDCiEDjMYZZS5wiPXnyZFbJaxMhQIQRGzHvWR7XCyOCXsOmiDAi1HmPMMQjDpbpEiDCiL358eNHurW/5SnWdIBbXiDCiA38/Pnzrce2YyZ4//59F3ePLNMl4PbpiL2J0L979+7yDtHDhw8vtzzvdGnEXdvUigSIsCLAWavHp/+qM0BcXMd/q25n1vF57TYBp0a3mUzilePj4+7k5KSLb6gt6ydAhPUzXnoPR0dHl79WGTNCfBnn1uvSCJdegQhLI1vvCk+fPu2ePXt2tZOYEV6/fn31dz+shwAR1sP1cqvLntbEN9MxA9xcYjsxS1jWR4AIa2Ibzx0tc44fYX/16lV6NDFLXH+YL32jwiACRBiEbf5KcXoTIsQSpzXx4N28Ja4BQoK7rgXiydbHjx/P25TaQAJEGAguWy0+2Q8PD6/Ki4R8EVl+bzBOnZY95fq9rj9zAkTI2SxdidBHqG9+skdw43borCXO/ZcJdraPWdv22uIEiLA4q7nvvCug8WTqzQveOH26fodo7g6uFe/a17W3+nFBAkRYENRdb1vkkz1CH9cPsVy/jrhr27PqMYvENYNlHAIesRiBYwRy0V+8iXP8+/fvX11Mr7L7ECueb/r48eMqm7FuI2BGWDEG8cm+7G3NEOfmdcTQw4h9/55lhm7DekRYKQPZF2ArbXTAyu4kDYB2YxUzwg0gi/41ztHnfQG26HbGel/crVrm7tNY+/1btkOEAZ2M05r4FB7r9GbAIdxaZYrHdOsgJ/wCEQY0J74TmOKnbxxT9n3FgGGWWsVdowHtjt9Nnvf7yQM2aZU/TIAIAxrw6dOnAWtZZcoEnBpNuTuObWMEiLAx1HY0ZQJEmHJ3HNvGCBBhY6jtaMoEiJB0Z29vL6ls58vxPcO8/zfrdo5qvKO+d3Fx8Wu8zf1dW4p/cPzLly/dtv9Ts/EbcvGAHhHyfBIhZ6NSiIBTo0LNNtScABFyNiqFCBChULMNNSdAhJyNSiECRCjUbEPNCRAhZ6NSiAARCjXbUHMCRMjZqBQiQIRCzTbUnAARcjYqhQgQoVCzDTUnQIScjUohAkQo1GxDzQkQIWejUogAEQo121BzAkTI2agUIkCEQs021JwAEXI2KoUIEKFQsw01J0CEnI1KIQJEKNRsQ80JECFno1KIABEKNdtQcwJEyNmoFCJAhELNNtScABFyNiqFCBChULMNNSdAhJyNSiECRCjUbEPNCRAhZ6NSiAARCjXbUHMCRMjZqBQiQIRCzTbUnAARcjYqhQgQoVCzDTUnQIScjUohAkQo1GxDzQkQIWejUogAEQo121BzAkTI2agUIkCEQs021JwAEXI2KoUIEKFQsw01J0CEnI1KIQJEKNRsQ80JECFno1KIABEKNdtQcwJEyNmoFCJAhELNNtScABFyNiqFCBChULMNNSdAhJyNSiECRCjUbEPNCRAhZ6NSiAARCjXbUHMCRMjZqBQiQIRCzTbUnAARcjYqhQgQoVCzDTUnQIScjUohAkQo1GxDzQkQIWejUogAEQo121BzAkTI2agUIkCEQs021JwAEXI2KoUIEKFQsw01J0CEnI1KIQJEKNRsQ80JECFno1KIABEKNdtQcwJEyNmoFCJAhELNNtScABFyNiqFCBChULMNNSdAhJyNSiEC/wGgKKC4YMA4TAAAAABJRU5ErkJggg==
+`;
+function Custom$2() {
+  if (typeof window !== "undefined" && !customElements.get("r-img")) {
+    class CustomElement2 extends HTMLElement {
+      constructor() {
+        super();
+        __publicField(this, "_image");
+        __publicField(this, "_container");
+        this._container = document.createElement("div");
+        this._container.setAttribute("class", "r-image");
+        const shadowRoot = this.attachShadow({ mode: "closed" });
+        const F7170EE498E0DD32CBDCB63FBA8F75CC = document.createElement("style");
+        F7170EE498E0DD32CBDCB63FBA8F75CC.textContent = f7170ee498e0dd32cbdcb63fba8f75cc$4;
+        shadowRoot.appendChild(F7170EE498E0DD32CBDCB63FBA8F75CC);
+        shadowRoot.appendChild(this._container);
       }
-    }
-  }
-  listenRequired(name, value) {
-    if (name === "required" && this._input) {
-      if (value && value !== "false") {
-        this._input.setAttribute("required", "");
-      } else {
-        this._input.removeAttribute("required");
+      static get observedAttributes() {
+        return ["fallback"];
       }
-    }
-  }
-  listenPattern(name, value) {
-    if (name === "pattern" && this._input) {
-      if (value && value !== "false") {
-        this._input.setAttribute("pattern", value);
-      } else {
-        this._input.removeAttribute("pattern");
+      get fallback() {
+        return this.getAttribute("fallback") || failImage;
       }
-    }
-  }
-  listenLabel(name, value) {
-    if (name === "label" && this._input) {
-      if (value !== null) {
-        if (this._label) {
-          this._label.innerHTML = value;
+      set fallback(value) {
+        if (value) {
+          this.setAttribute("fallback", value);
         } else {
-          this._label = document.createElement("label");
-          this._label.innerHTML = value;
-          this._label.setAttribute("class", "input-label");
-          this._container.appendChild(this._label);
+          this.removeAttribute("fallback");
         }
-      } else {
-        this._container.removeAttribute("label");
-        if (this._label) {
-          this._container.removeChild(this._label);
-          this._label = void 0;
+      }
+      listenFallback(name, value) {
+        if (name === "fallback" && this._image) {
+          if (value) {
+            this._image.setAttribute("fallback", value);
+          } else {
+            this._image.removeAttribute("fallback");
+          }
         }
       }
-    }
-  }
-  listenType(name, value) {
-    if (name === "type" && this._input) {
-      if (value) {
-        this._input.setAttribute("type", value);
-      } else {
-        this._input.removeAttribute("type");
+      connectedCallback() {
+        const src = this.getAttribute("src") || "";
+        this._image = new Image();
+        this._image.src = src;
+        this._image.addEventListener("error", () => {
+          if (this._image && this.fallback) {
+            this._image.src = this.fallback;
+          }
+        });
+        this._image.addEventListener("load", () => {
+          if (this._image) {
+            this._container.appendChild(this._image);
+          }
+        });
+      }
+      attributeChangedCallback(name, oldValue, newValue) {
+        this.listenFallback(name, newValue);
       }
     }
-  }
-  connectedCallback() {
-    if (this.value) {
-      this._input.value = this.value;
-      this._container.setAttribute("value", this.value);
-    }
-    if (isDisabled(this)) {
-      this._container.setAttribute("disabled", "");
-      this._input.setAttribute("disabled", "");
-    }
-    if (this.type) {
-      this._input.setAttribute("type", this.type);
-    }
-    this._input.addEventListener("input", this.inputValue);
-    this._input.addEventListener("change", this.change);
-    this._input.addEventListener("focus", this.focus);
-  }
-  disconnectCallback() {
-    this._input.removeEventListener("input", this.inputValue);
-    this._input.removeEventListener("change", this.change);
-  }
-  attributeChangedCallback(name, oldValue, newValue) {
-    this.listenPlaceholder(name, newValue);
-    this.listenRequired(name, newValue);
-    this.listenPattern(name, newValue);
-    this.listenLabel(name, newValue);
-  }
-}
-function Custom() {
-  if (!customElements.get("r-input")) {
-    customElements.define("r-input", CustomElement$2);
+    customElements.define("r-img", CustomElement2);
   }
 }
-Custom();
-function Modal() {
-  const template = document.createElement("template");
-  const div = document.createElement("div");
-  div.setAttribute("class", "modal-content");
-  const slot = document.createElement("slot");
-  slot.setAttribute("name", "modal-content");
-  div.appendChild(slot);
-  template == null ? void 0 : template.appendChild(div);
-  class Modal2 extends HTMLElement {
-    constructor() {
-      super();
-      const templateContent = template.content;
-      const shadowRoot = this.attachShadow({ mode: "open" });
-      const wrap = document.createElement("div");
-      const modal = document.createElement("div");
-      const header = document.createElement("header");
-      const btnClose = document.createElement("span");
-      const mask = document.createElement("div");
-      const footer = document.createElement("footer");
-      const btnCancel = document.createElement("xu-button");
-      const btnOk = document.createElement("xu-button");
-      wrap.setAttribute("class", "wrap");
-      modal.setAttribute("class", "xu-modal");
-      let title = this.getAttribute("title");
-      header.textContent = title;
-      btnClose.setAttribute("class", "xu-close");
-      btnClose.textContent = "x";
-      header.appendChild(btnClose);
-      modal.appendChild(header);
-      btnClose.addEventListener("click", () => {
-        wrap.style.display = "none";
-      });
-      modal.appendChild(templateContent.cloneNode(true));
-      btnOk.setAttribute("type", "primary");
-      const slot1 = document.createElement("span");
-      slot1.setAttribute("slot", "btn-content");
-      slot1.textContent = "\u786E\u8BA4";
-      btnOk.appendChild(slot1);
-      const slot2 = document.createElement("span");
-      slot2.setAttribute("slot", "btn-content");
-      slot2.textContent = "\u53D6\u6D88";
-      btnCancel.appendChild(slot2);
-      footer.appendChild(btnCancel);
-      footer.appendChild(btnOk);
-      modal.appendChild(footer);
-      mask.setAttribute("class", "mask");
-      wrap.appendChild(mask);
-      wrap.appendChild(modal);
-      const style = document.createElement("style");
-      this.getAttribute("width");
-      const isVisible = this.getAttribute("visible");
-      style.textContent = `
-        .wrap {
-          position: fixed;
-          left: 0;
-          right: 0;
-          bottom: 0;
-          top: 0;
-          display: ${isVisible === "true" ? "block" : "none"}
-        }
-        // \u5FFD\u7565\u90E8\u5206\u6837\u5F0F
-      `;
-      shadowRoot.appendChild(style);
-      shadowRoot.appendChild(wrap);
-    }
-    connectedCallback(el) {
-      console.log("insert dom", el);
-    }
-    disconnectedCallback() {
-      console.log("Custom square element removed from page.");
-    }
-    adoptedCallback() {
-      console.log("Custom square element moved to new page.");
-    }
-    attributeChangedCallback(name, oldValue, newValue) {
-      var _a;
-      if (oldValue && this.shadowRoot) {
-        const children = [...this.shadowRoot.children];
-        for (let i = 0; i < children.length; i++) {
-          if (children[i].nodeName === "DIV" && ((_a = children[i]) == null ? void 0 : _a.className) === "wrap") {
-            if (newValue === "true") {
-              children[i].style.display = "block";
+Custom$2();
+const f7170ee498e0dd32cbdcb63fba8f75cc$3 = '.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}.input{position:relative;display:flex;width:100%;min-width:0;padding:2px 8px;color:#000000d9;font-size:12px;line-height:1.5715;background-color:#fff;background-image:none;border-width:1px;border-style:solid;border-color:#d9d9d9;border-radius:2px;transition:all .3s}.input:active{border-color:#40a9ff;box-shadow:0 0 0 2px #1890ff33;border-right-width:1px;outline:0}.input:hover{border-color:#40a9ff;border-right-width:1px}.input>.input-main:hover~.input-label{color:#40a9ff}.input[value]>.input-label{transform:translateY(calc(-50% - .43em)) scale(.8);color:#00000040}.input[status=error]{border-color:#ff4d4f}.input[status=error]>.input-main:hover~.input-label{color:#ff4d4f}.input[status=warning]{border-color:#ff7875}.input[status=warning]>.input-main:hover~.input-label{color:#ff7875}.input[disabled]{color:#00000040;background-color:#f5f5f5;border-color:#d9d9d9;box-shadow:none;cursor:not-allowed;opacity:1}.input[disabled]>.input-main{color:#00000040;background-color:#f5f5f5;border-color:#d9d9d9;box-shadow:none;cursor:not-allowed;opacity:1}.input[disabled]>.input-main:hover~.input-label{color:#999}.input[disabled]>.input-label{color:#999;border-color:#d9d9d9;box-shadow:none;cursor:not-allowed}.input-main{writing-mode:horizontal-tb;text-rendering:auto;letter-spacing:normal;word-spacing:normal;text-transform:none;text-indent:0px;text-shadow:none;text-align:start;-webkit-rtl-ordering:logical;cursor:text;touch-action:manipulation;-webkit-appearance:none;text-overflow:ellipsis;box-sizing:border-box;margin:0;font-variant:tabular-nums;list-style:none;font-feature-settings:"tnum";position:relative;border:none;width:100%;min-width:0;color:#000000d9;font-size:14px;line-height:1.5715;background-color:#fff;background-image:none;transition:all .3s}.input-main:focus,.input-main:hover{border:none;outline:0}.input-main::placeholder{color:#999}.input-main:placeholder-shown~.input-label{transform:translateY(calc(-50% - .43em)) scale(.8)}.input-main:focus~.input-label{transform:translateY(calc(-50% - .43em)) scale(.8)}.input-label{pointer-events:none;position:absolute;font-size:14px;left:8px;transition:transform .3s,color .3s,background-color .3s;transform-origin:left;padding:0 .2em;color:#999;backdrop-filter:blur(10px);opacity:.9}\n';
+function Custom$1() {
+  if (typeof window !== "undefined" && !customElements.get("r-input")) {
+    class CustomElement2 extends HTMLElement {
+      constructor() {
+        super();
+        __publicField(this, "_container");
+        __publicField(this, "_label");
+        __publicField(this, "_input");
+        __publicField(this, "_icon");
+        __publicField(this, "inputValue", (event) => {
+          event.stopPropagation();
+          const target = event.target;
+          this.value = target ? target.value : "";
+          this.change();
+          this.dispatchEvent(
+            new CustomEvent("input", {
+              detail: {
+                value: this.value
+              }
+            })
+          );
+        });
+        __publicField(this, "change", () => {
+          this.dispatchEvent(
+            new CustomEvent("change", {
+              detail: {
+                value: this.value
+              }
+            })
+          );
+        });
+        __publicField(this, "focus", () => {
+          this.dispatchEvent(
+            new CustomEvent("focus", {
+              detail: {
+                value: this.value
+              }
+            })
+          );
+        });
+        const shadowRoot = this.attachShadow({ mode: "closed" });
+        const F7170EE498E0DD32CBDCB63FBA8F75CC = document.createElement("style");
+        F7170EE498E0DD32CBDCB63FBA8F75CC.textContent = f7170ee498e0dd32cbdcb63fba8f75cc$3;
+        shadowRoot.appendChild(F7170EE498E0DD32CBDCB63FBA8F75CC);
+        this._container = document.createElement("div");
+        this._container.setAttribute("class", "input");
+        this._input = document.createElement("input");
+        this._input.setAttribute("class", "input-main");
+        this._container.appendChild(this._input);
+        shadowRoot.appendChild(this._container);
+      }
+      static get observedAttributes() {
+        return [
+          "label",
+          "disabled",
+          "name",
+          "placeholder",
+          "type",
+          "icon",
+          "status"
+        ];
+      }
+      get value() {
+        return this.getAttribute("value");
+      }
+      set value(value) {
+        if (!isDisabled(this) && value) {
+          this.setAttribute("value", value);
+          this._container.setAttribute("value", value);
+        } else {
+          this.removeAttribute("value");
+          this._container.removeAttribute("value");
+        }
+      }
+      get placeholder() {
+        return this.getAttribute("placeholder");
+      }
+      set placeholder(value) {
+        if (value) {
+          this.setAttribute("placeholder", value);
+        } else {
+          this.removeAttribute("placeholder");
+        }
+      }
+      get required() {
+        return this.getAttribute("required");
+      }
+      set required(value) {
+        if (!value || value === "false") {
+          this.removeAttribute("required");
+        } else {
+          this.setAttribute("required", "");
+        }
+      }
+      get disabled() {
+        return isDisabled(this);
+      }
+      set disabled(value) {
+        if (falseList.includes(value)) {
+          this.removeAttribute("disabled");
+          this._container.removeAttribute("disabled");
+          this._input.removeAttribute("disabled");
+        } else {
+          this.setAttribute("disabled", "");
+          this._container.setAttribute("disabled", "");
+          this._input.setAttribute("disabled", "");
+        }
+      }
+      get label() {
+        return this.getAttribute("label") || "";
+      }
+      set label(value) {
+        this.setAttribute("label", value);
+      }
+      get status() {
+        return this.getAttribute("status") || "";
+      }
+      set status(value) {
+        if (value) {
+          this.removeAttribute("status");
+          this._container.removeAttribute("status");
+        } else {
+          this.setAttribute("status", value);
+          this._container.setAttribute("status", value);
+        }
+      }
+      get name() {
+        return this.getAttribute("name") || "";
+      }
+      set name(value) {
+        this.setAttribute("name", value);
+      }
+      get min() {
+        return this.getAttribute("min") || "";
+      }
+      set min(value) {
+        if (this.type === "number")
+          this.setAttribute("min", value);
+      }
+      get max() {
+        return this.getAttribute("max") || "";
+      }
+      set max(value) {
+        if (this.type === "number")
+          this.setAttribute("max", value);
+      }
+      get step() {
+        return this.getAttribute("step") || "";
+      }
+      set step(value) {
+        if (this.type === "number")
+          this.setAttribute("step", value);
+      }
+      get icon() {
+        return this.getAttribute("icon");
+      }
+      set icon(value) {
+        if (value) {
+          this.setAttribute("icon", value);
+        } else {
+          this.removeAttribute("icon");
+        }
+      }
+      get type() {
+        return this.getAttribute("type");
+      }
+      set type(value) {
+        if (value) {
+          this.setAttribute("type", value);
+        } else {
+          this.removeAttribute("type");
+        }
+      }
+      listenPlaceholder(name, value) {
+        if (name === "placeholder" && this._input) {
+          if (value != null) {
+            this._input.setAttribute("placeholder", value);
+          } else {
+            this._input.removeAttribute("placeholder");
+          }
+        }
+      }
+      listenLabel(name, value) {
+        if (name === "label" && this._input) {
+          if (value != null) {
+            if (this._label) {
+              this._label.innerHTML = value;
             } else {
-              children[i].style.display = "none";
+              this._label = document.createElement("label");
+              this._label.innerHTML = value;
+              this._label.setAttribute("class", "input-label");
+              this._container.appendChild(this._label);
+            }
+          } else {
+            this._container.removeAttribute("label");
+            if (this._label) {
+              this._container.removeChild(this._label);
+              this._label = void 0;
             }
           }
         }
       }
+      listenType(name, value) {
+        if (name === "type" && this._input) {
+          if (value) {
+            this._input.setAttribute("type", value);
+          } else {
+            this._input.removeAttribute("type");
+            this._input.removeAttribute("min");
+            this._input.removeAttribute("max");
+            this._input.removeAttribute("step");
+          }
+        }
+      }
+      listenStatus(name, value) {
+        if (name === "status" && this._container) {
+          if (value) {
+            this._container.setAttribute("status", value);
+          } else {
+            this._container.removeAttribute("status");
+          }
+        }
+      }
+      listenDisabled(name, value) {
+        if (name === "disabled" && this._container) {
+          if (falseList.includes(value)) {
+            this._container.removeAttribute("disabled");
+          } else {
+            this._container.setAttribute("disabled", "");
+            this._input.setAttribute("disabled", "");
+          }
+        }
+      }
+      listenIcon(name, value, oldValue) {
+        if (name === "icon") {
+          if (value && value !== oldValue) {
+            this.removeAttribute("label");
+            this.setAttribute("icon", value);
+            if (!this._icon) {
+              this._icon = document.createElement("r-icon");
+              const { width, height } = this._input.getBoundingClientRect();
+              const size = Math.min(width, height);
+              this._icon.setAttribute("size", `${size}`);
+              this._input.insertAdjacentElement("beforebegin", this._icon);
+            }
+            this._icon.setAttribute("name", value);
+          } else {
+            this.removeAttribute("icon");
+            this._icon && this._container.removeChild(this._icon);
+          }
+        }
+      }
+      connectedCallback() {
+        if (this.value) {
+          this._input.value = this.value;
+          this._container.setAttribute("value", this.value);
+        }
+        if (this.status) {
+          this._container.setAttribute("status", this.status);
+        }
+        if (isDisabled(this)) {
+          this._container.setAttribute("disabled", "");
+          this._input.setAttribute("disabled", "");
+        }
+        if (this.type) {
+          this._input.setAttribute("type", this.type);
+        }
+        this._input.addEventListener("input", this.inputValue);
+        this._input.addEventListener("focus", this.focus);
+      }
+      disconnectCallback() {
+        this._input.removeEventListener("input", this.inputValue);
+      }
+      attributeChangedCallback(name, oldValue, newValue) {
+        this.listenPlaceholder(name, newValue);
+        this.listenLabel(name, newValue);
+        this.listenStatus(name, newValue);
+        this.listenDisabled(name, newValue);
+        this.listenIcon(name, newValue, oldValue);
+      }
     }
-    static get observedAttributes() {
-      return ["visible"];
-    }
+    customElements.define("r-input", CustomElement2);
   }
-  window.customElements.define("xu-modal", Modal2);
 }
-Modal();
-const f7170ee498e0dd32cbdcb63fba8f75cc$1 = "";
-class TabPane extends HTMLElement {
-  constructor() {
-    super();
-    this._div = document.createElement("slot");
-    const shadowRoot = this.attachShadow({ mode: "closed" });
-    const F7170EE498E0DD32CBDCB63FBA8F75CC = document.createElement("style");
-    F7170EE498E0DD32CBDCB63FBA8F75CC.textContent = f7170ee498e0dd32cbdcb63fba8f75cc$1;
-    shadowRoot.appendChild(F7170EE498E0DD32CBDCB63FBA8F75CC);
-    shadowRoot.appendChild(this._div);
-  }
-  static get observedAttributes() {
-    return ["label", "key", "disabled", "icon"];
-  }
-  get label() {
-    return this.getAttribute("label") || "";
-  }
-  set label(value) {
-    this.setAttribute("label", value);
-  }
-  get icon() {
-    return this.getAttribute("icon");
-  }
-  get key() {
-    return this.getAttribute("key");
-  }
-  set key(value) {
-    if (value) {
-      this.setAttribute("key", value);
-    } else {
-      this.removeAttribute("key");
-    }
-  }
-  get disabled() {
-    return this.getAttribute("disabled");
-  }
-  set disabled(value) {
-    if (!value || value === "false") {
-      this.removeAttribute("disabled");
-    } else {
-      this.setAttribute("disabled", value);
+Custom$1();
+const f7170ee498e0dd32cbdcb63fba8f75cc$2 = '.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}@keyframes MessageMoveUpIn{0%{transform:translateY(-100%);transform-origin:0 0;opacity:0}to{transform:translateY(0);transform-origin:0 0;opacity:1}}@keyframes MessageMoveOut{0%{max-height:150px;padding:8px;opacity:1}to{max-height:0;padding:0;opacity:0}}:host([type="toast"]){--ranui-message-background: rgba(0, 0, 0, .7);--ranui-message-color: #fff;--ranui-message-border-radius: 7px}.message-notice{padding:8px;text-align:center;max-width:90%;margin:0 auto;word-break:break-all}.message-notice-content{display:inline-block;padding:10px 16px;background:var(--ranui-message-background, #fff);border-radius:var(--ranui-message-border-radius, 2px);box-shadow:0 3px 6px -4px #0000001f,0 6px 16px #00000014,0 9px 28px 8px #0000000d;pointer-events:all}.message-notice-content-info{align-items:center;display:flex}.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}.message-leave{animation-name:MessageMoveOut;animation-duration:.3s}.message-in{animation-name:MessageMoveUpIn;animation-duration:.2s;animation-fill-mode:both}\n';
+const AnimationTime = 300;
+const defaultDuration = 3e3;
+const typeMapIcon = /* @__PURE__ */ new Map([
+  ["success", "check-circle-fill"],
+  ["warning", "warning-circle-fill"],
+  ["error", "close-circle-fill"],
+  ["info", "info-circle-fill"],
+  ["toast", null]
+]);
+const typeMapColor = /* @__PURE__ */ new Map([
+  ["success", "#52c41a"],
+  ["warning", "#faad14"],
+  ["error", "#ff4d4f"],
+  ["info", "#1890ff"],
+  ["toast", "rgba(0, 0, 0, 0.7)"]
+]);
+function Custom() {
+  if (typeof window !== "undefined" && !customElements.get("r-message")) {
+    class CustomElement2 extends HTMLElement {
+      constructor() {
+        super();
+        __publicField(this, "_info");
+        __publicField(this, "_notice");
+        __publicField(this, "_content");
+        __publicField(this, "_icon");
+        __publicField(this, "_span");
+        __publicField(this, "timeId");
+        __publicField(this, "close");
+        __publicField(this, "setIcon", (value) => {
+          var _a, _b, _c, _d;
+          const icon = typeMapIcon.get(value);
+          const color = typeMapColor.get(value);
+          if (icon) {
+            (_a = this._icon) == null ? void 0 : _a.setAttribute("name", icon);
+            (_b = this._icon) == null ? void 0 : _b.style.setProperty("margin-right", "8px");
+            (_c = this._icon) == null ? void 0 : _c.setAttribute("size", "18");
+            color && ((_d = this._icon) == null ? void 0 : _d.setAttribute("color", color));
+          }
+        });
+        this._notice = document.createElement("div");
+        this._notice.setAttribute("class", "message-notice");
+        this._content = document.createElement("div");
+        this._content.setAttribute("class", "message-notice-content");
+        this._info = document.createElement("div");
+        this._info.setAttribute("class", "message-notice-content-info");
+        this._icon = document.createElement("r-icon");
+        this._span = document.createElement("span");
+        this._info.appendChild(this._icon);
+        this._info.appendChild(this._span);
+        this._content.appendChild(this._info);
+        this._notice.appendChild(this._content);
+        const shadowRoot = this.attachShadow({ mode: "closed" });
+        const F7170EE498E0DD32CBDCB63FBA8F75CC = document.createElement("style");
+        F7170EE498E0DD32CBDCB63FBA8F75CC.textContent = f7170ee498e0dd32cbdcb63fba8f75cc$2;
+        shadowRoot.appendChild(F7170EE498E0DD32CBDCB63FBA8F75CC);
+        shadowRoot.appendChild(this._notice);
+      }
+      static get observedAttributes() {
+        return ["type", "content"];
+      }
+      get type() {
+        return this.getAttribute("type");
+      }
+      set type(value) {
+        if (value)
+          this.setAttribute("type", value);
+      }
+      get content() {
+        return this.getAttribute("content");
+      }
+      set content(value) {
+        if (value)
+          this.setAttribute("content", value);
+      }
+      attributeChangedCallback(name, oldValue, newValue) {
+        if (name === "content" && oldValue !== newValue) {
+          this._span.textContent = newValue;
+        }
+        if (name === "type" && oldValue !== newValue) {
+          this.setIcon(newValue);
+        }
+      }
     }
-  }
-  onClick(e) {
-    console.log("e", e);
-  }
-  connectedCallback() {
-    this._div.addEventListener("click", this.onClick);
-  }
-  disconnectCallback() {
-  }
-  attributeChangedCallback(name, oldValue, newValue) {
+    customElements.define("r-message", CustomElement2);
+    const container = document.createElement("div");
+    const div = document.createElement("div");
+    div.setAttribute("class", "ranui-message");
+    document.body.appendChild(container);
+    container.appendChild(div);
+    const commonPrompt = (type) => {
+      return (options) => {
+        const message2 = new CustomElement2();
+        message2.setAttribute("class", "message");
+        message2.timeId && clearTimeout(message2.timeId);
+        message2.setAttribute("type", type);
+        let duration = defaultDuration;
+        let close;
+        if (typeof options === "string") {
+          message2.setAttribute("content", options);
+        } else {
+          message2.setAttribute("content", options.content);
+          close = options.close;
+          duration = options.duration || defaultDuration;
+        }
+        const time = setTimeout(() => {
+          message2.classList.remove("message-in");
+          message2.classList.add("message-leave");
+          clearTimeout(time);
+        }, duration - AnimationTime);
+        message2.timeId = setTimeout(() => {
+          div.removeChild(message2);
+          if (close)
+            close();
+        }, duration);
+        div.appendChild(message2);
+        message2.classList.add("message-in");
+      };
+    };
+    return {
+      info: commonPrompt("info"),
+      success: commonPrompt("success"),
+      error: commonPrompt("error"),
+      warning: commonPrompt("warning"),
+      toast: commonPrompt("toast")
+    };
   }
 }
+const message = Custom();
+if (typeof window !== "undefined" && message) {
+  window.message = message;
+}
+const f7170ee498e0dd32cbdcb63fba8f75cc$1 = '.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}\n';
 function CustomElement$1() {
-  if (!customElements.get("r-tab")) {
+  if (typeof window !== "undefined" && !customElements.get("r-tab")) {
+    class TabPane extends HTMLElement {
+      constructor() {
+        super();
+        __publicField(this, "_div");
+        __publicField(this, "parent");
+        __publicField(this, "initAttribute", () => {
+          var _a, _b;
+          this.parent = this.parentNode;
+          this.key && ((_a = this.parent) == null ? void 0 : _a.updateAttribute(this.key, "icon", this.icon));
+          this.key && ((_b = this.parent) == null ? void 0 : _b.updateAttribute(this.key, "effect", this.effect));
+        });
+        this._div = document.createElement("slot");
+        const shadowRoot = this.attachShadow({ mode: "closed" });
+        const F7170EE498E0DD32CBDCB63FBA8F75CC = document.createElement("style");
+        F7170EE498E0DD32CBDCB63FBA8F75CC.textContent = f7170ee498e0dd32cbdcb63fba8f75cc$1;
+        shadowRoot.appendChild(F7170EE498E0DD32CBDCB63FBA8F75CC);
+        shadowRoot.appendChild(this._div);
+      }
+      static get observedAttributes() {
+        return ["label", "key", "disabled", "icon", "effect"];
+      }
+      get label() {
+        return this.getAttribute("label") || "";
+      }
+      set label(value) {
+        this.setAttribute("label", value);
+      }
+      get icon() {
+        return this.getAttribute("icon");
+      }
+      set icon(value) {
+        if (value) {
+          this.setAttribute("icon", value);
+        }
+      }
+      get key() {
+        return this.getAttribute("ranKey") || this.getAttribute("rankey") || this.getAttribute("ran-key") || this.getAttribute("key");
+      }
+      set key(value) {
+        if (value) {
+          this.setAttribute("key", value);
+        } else {
+          this.removeAttribute("key");
+        }
+      }
+      get disabled() {
+        return this.getAttribute("disabled");
+      }
+      set disabled(value) {
+        if (!value || value === "false") {
+          this.removeAttribute("disabled");
+        } else {
+          this.setAttribute("disabled", value);
+        }
+      }
+      get effect() {
+        return this.getAttribute("effect");
+      }
+      set effect(value) {
+        if (!value || value === "false") {
+          this.removeAttribute("effect");
+        } else {
+          this.setAttribute("effect", value);
+        }
+      }
+      onClick(e) {
+        console.log("e", e);
+      }
+      connectedCallback() {
+        this._div.addEventListener("click", this.onClick);
+        document.addEventListener("DOMContentLoaded", this.initAttribute);
+      }
+      disconnectCallback() {
+        document.removeEventListener("DOMContentLoaded", this.initAttribute);
+      }
+      attributeChangedCallback(name, oldValue, newValue) {
+        var _a, _b, _c, _d;
+        if (oldValue !== newValue && this.key && ((_a = this.parent) == null ? void 0 : _a.updateAttribute)) {
+          if (name === "icon")
+            (_b = this.parent) == null ? void 0 : _b.updateAttribute(this.key, "icon", newValue);
+          if (name === "effect")
+            (_c = this.parent) == null ? void 0 : _c.updateAttribute(this.key, "effect", newValue);
+          if (name === "disabled")
+            (_d = this.parent) == null ? void 0 : _d.updateAttribute(this.key, "disabled", newValue);
+        }
+      }
+    }
     customElements.define("r-tab", TabPane);
+    return TabPane;
   }
 }
 CustomElement$1();
-const f7170ee498e0dd32cbdcb63fba8f75cc = ".tab ::slotted(r-tab){box-sizing:border-box;width:100%;height:100%;padding:10px;flex-shrink:0;overflow:auto}.tab-header{position:relative;overflow:hidden;scroll-behavior:smooth}.tab-header_nav{display:flex;flex-flow:row nowrap;justify-content:flex-start;align-items:center}.tab-header_line{position:absolute;width:0;margin-top:-2px;height:2px;border-radius:2px;background:var(--themeColor, #1890ff);transition:.2s}.tab-content{overflow:hidden}.tab-content_wrap{display:flex;width:100%;height:100%;transition:.2s}\n";
-class Tabs extends HTMLElement {
-  constructor() {
-    super();
-    this.initTabHeaderKeyMapIndex = (key, index) => {
-      const value = this.tabHeaderKeyMapIndex[key];
-      if (value) {
-        throw new Error("tab \u7EC4\u4EF6\u7684 key \u503C\u5B58\u5728\u91CD\u590D, \u6216\u8005\u67D0\u4E2A tab \u7EC4\u4EF6\u7F3A\u5C11 key \u5C5E\u6027");
-      } else {
-        this.tabHeaderKeyMapIndex[key] = index;
+const f7170ee498e0dd32cbdcb63fba8f75cc = '.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}.tab ::slotted(r-tab){box-sizing:border-box;width:100%;height:100%;padding:10px;flex-shrink:0;overflow:auto;text-align:start}.tab-header{position:relative;overflow:hidden;scroll-behavior:smooth}.tab-header_nav{display:flex;flex-flow:row nowrap;justify-content:flex-start;align-items:center}.tab-header_nav::-webkit-scrollbar{display:none}.tab-header_nav__item{flex-shrink:0}.tab-header_nav .active{color:var(--active-color, #1890ff)}.tab-header_line{position:absolute;width:0;margin-top:-2px;height:2px;border-radius:2px;background:var(--line-color, #1890ff);transition:.2s}.tab-content{overflow:hidden}.tab-content_wrap{display:flex;width:100%;height:100%;transition:.2s}:host([type="line"]) .tab-header_nav__item{border:solid 1px transparent}:host([type="line"]) .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"]) .tab-header_line{transition:none;visibility:hidden}:host([type="line"]) .tab-header_line:after,:host([type="line"]) .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"]) .tab-header_line:after{left:100%}:host([type="line"]) .tab-header_line:before{right:100%}:host([align="center"]) .tab-header_nav{justify-content:center}:host([align="center"]) .tab-header_line{left:50%}:host([align="end"]) .tab-header_nav{justify-content:flex-end}\n';
+function CustomElement() {
+  if (typeof window !== "undefined" && !customElements.get("r-tabs")) {
+    class Tabs extends HTMLElement {
+      constructor() {
+        super();
+        __publicField(this, "_container");
+        __publicField(this, "_header");
+        __publicField(this, "_nav");
+        __publicField(this, "_line");
+        __publicField(this, "_content");
+        __publicField(this, "_wrap");
+        __publicField(this, "_slot");
+        __publicField(this, "tabHeaderKeyMapIndex");
+        __publicField(this, "initTabHeaderKeyMapIndex", (key, index) => {
+          const value = this.tabHeaderKeyMapIndex[key];
+          if (value) {
+            throw new Error(
+              "tab \u7EC4\u4EF6\u7684 key \u503C\u5B58\u5728\u91CD\u590D, \u6216\u8005\u67D0\u4E2A tab \u7EC4\u4EF6\u7F3A\u5C11 key \u5C5E\u6027"
+            );
+          } else {
+            this.tabHeaderKeyMapIndex[key] = index;
+          }
+        });
+        __publicField(this, "initTabLineAlignCenter", () => {
+          const { length } = this._nav.children;
+          let left = 0;
+          for (let i = 0; i < length; i++) {
+            const { width = 0 } = this._nav.children[i].getBoundingClientRect();
+            left += width;
+          }
+          this._line.style.setProperty("left", `calc(50% - ${left / 2}px)`);
+        });
+        __publicField(this, "initTabLineAlignEnd", () => {
+          const { length } = this._nav.children;
+          let left = 0;
+          for (let i = 0; i < length; i++) {
+            const { width = 0 } = this._nav.children[i].getBoundingClientRect();
+            left += width;
+          }
+          this._line.style.setProperty("left", `calc(100% - ${left}px)`);
+        });
+        __publicField(this, "setTabLine", (key) => {
+          if (key) {
+            const index = this.tabHeaderKeyMapIndex[key];
+            const TabHeader = this._nav.children[index];
+            const { width = 0 } = TabHeader.getBoundingClientRect();
+            this._line.style.setProperty("width", `${width}px`);
+            let distance = 0;
+            for (let i = 0; i < index; i++) {
+              const item = this._nav.children[i];
+              const { width: width2 = 0 } = item.getBoundingClientRect();
+              distance += width2;
+            }
+            this._line.style.setProperty("transform", `translateX(${distance}px)`);
+          }
+        });
+        __publicField(this, "setTabContent", (key) => {
+          if (key) {
+            const index = this.tabHeaderKeyMapIndex[key];
+            this._wrap.style.setProperty(
+              "transform",
+              `translateX(${index * -100}%)`
+            );
+          }
+        });
+        __publicField(this, "clickTabHead", (e) => {
+          const tabHeader = e.target;
+          const key = tabHeader.getAttribute("ran-key");
+          const disabled = isDisabled(tabHeader);
+          if (!disabled && key) {
+            this.setAttribute("active", key);
+            this.setTabLine(key);
+            this.setTabContent(key);
+            deleteElementChildClass(this._nav, "active");
+            setElementClass(tabHeader, "active");
+          }
+        });
+        __publicField(this, "updateAttribute", (key, attribute, value = "") => {
+          var _a, _b;
+          const index = this.tabHeaderKeyMapIndex[key];
+          if (key && value && this._nav.children[index]) {
+            (_a = this._nav.children[index]) == null ? void 0 : _a.setAttribute(attribute, value);
+          } else {
+            (_b = this._nav.children[index]) == null ? void 0 : _b.removeAttribute(attribute);
+          }
+        });
+        __publicField(this, "initActive", () => {
+          const tabHeaderList = [...this._nav.children];
+          const initTabList = tabHeaderList.filter((item) => !isDisabled(item));
+          let initTabHeader;
+          if (this.active != null) {
+            initTabHeader = initTabList.find(
+              (item, index2) => (item.getAttribute("ran-key") || `${index2}`) === this.active
+            );
+          }
+          if (!initTabHeader) {
+            initTabHeader = initTabList.shift();
+          }
+          if (!initTabHeader)
+            return;
+          const index = tabHeaderList.findIndex((item) => item === initTabHeader);
+          const key = (initTabHeader == null ? void 0 : initTabHeader.getAttribute("ran-key")) || `${index}`;
+          if (key != null) {
+            this.setAttribute("active", `${key}`);
+            setElementClass(initTabHeader, "active");
+            const { width = 0 } = initTabHeader.getBoundingClientRect();
+            this._line.style.setProperty("width", `${width}px`);
+            this.setTabLine(key);
+            this.setTabContent(key);
+          }
+        });
+        __publicField(this, "listenSlotChange", () => {
+          const slots = this._slot.assignedElements();
+          slots.forEach((item, index) => {
+            const tabPane = this.createTabHeader(item, index);
+            this._nav.appendChild(tabPane);
+            tabPane.addEventListener("click", this.clickTabHead);
+          });
+          this.initActive();
+          if (this.align) {
+            if (this.align === "center")
+              this.initTabLineAlignCenter();
+            if (this.align === "end")
+              this.initTabLineAlignEnd();
+          }
+        });
+        __publicField(this, "initTab", () => {
+          this._slot.addEventListener("slotchange", this.listenSlotChange);
+        });
+        __publicField(this, "unloadTab", () => {
+          this._slot.removeEventListener("slotchange", this.listenSlotChange);
+        });
+        this._container = document.createElement("div");
+        this._container.setAttribute("class", "tab");
+        this._header = document.createElement("div");
+        this._header.setAttribute("class", "tab-header");
+        this._nav = document.createElement("div");
+        this._nav.setAttribute("class", "tab-header_nav");
+        this._line = document.createElement("div");
+        this._line.setAttribute("class", "tab-header_line");
+        this._content = document.createElement("div");
+        this._content.setAttribute("class", "tab-content");
+        this._wrap = document.createElement("div");
+        this._wrap.setAttribute("class", "tab-content_wrap");
+        this._slot = document.createElement("slot");
+        this._wrap.appendChild(this._slot);
+        this._content.appendChild(this._wrap);
+        this._header.appendChild(this._nav);
+        this._header.appendChild(this._line);
+        this._container.appendChild(this._header);
+        this._container.appendChild(this._content);
+        this.tabHeaderKeyMapIndex = {};
+        const shadowRoot = this.attachShadow({ mode: "closed" });
+        const F7170EE498E0DD32CBDCB63FBA8F75CC = document.createElement("style");
+        F7170EE498E0DD32CBDCB63FBA8F75CC.textContent = f7170ee498e0dd32cbdcb63fba8f75cc;
+        shadowRoot.appendChild(F7170EE498E0DD32CBDCB63FBA8F75CC);
+        shadowRoot.appendChild(this._container);
       }
-    };
-    this.setTabLine = (key) => {
-      if (key) {
-        const index = this.tabHeaderKeyMapIndex[key];
-        this._line.style.setProperty("transform", `translateX(${100 * index}%)`);
+      static get observedAttributes() {
+        return ["active", "forceRender", "type", "align", "effect"];
       }
-    };
-    this.setTabContent = (key) => {
-      if (key) {
-        const index = this.tabHeaderKeyMapIndex[key];
-        this._wrap.style.setProperty("transform", `translateX(${index * -100}%)`);
+      get align() {
+        return this.getAttribute("align") || "start";
       }
-    };
-    this.clickTabHead = (e) => {
-      const tabHeader = e.target;
-      const key = tabHeader.getAttribute("ran-key");
-      const disabled = isDisabled(tabHeader);
-      if (!disabled && key) {
-        this.setAttribute("active", key);
-        this.setTabLine(key);
-        this.setTabContent(key);
+      set align(value) {
+        this.setAttribute("align", value);
       }
-    };
-    this.initActive = () => {
-      const tabHeaderList = [...this._nav.children];
-      const initTabHeader = tabHeaderList.filter((item) => !isDisabled(item)).shift();
-      if (!initTabHeader)
-        return;
-      const index = tabHeaderList.findIndex((item) => item === initTabHeader);
-      const key = (initTabHeader == null ? void 0 : initTabHeader.getAttribute("ran-key")) || `${index}`;
-      if (this.active === null && key !== null) {
-        this.setAttribute("active", `${key}`);
-        const { width = 0 } = initTabHeader.getBoundingClientRect();
-        this._line.style.setProperty("width", `${width}px`);
-        this.setTabLine(key);
-        this.setTabContent(key);
+      set type(value) {
+        this.setAttribute("type", value);
       }
-    };
-    this.listenSlotChange = () => {
-      const slots = this._slot.assignedElements();
-      slots.forEach((item, index) => {
-        const tabPane = this.createTabHeader(item, index);
-        this._nav.appendChild(tabPane);
-        tabPane.addEventListener("click", this.clickTabHead);
-      });
-      this.initActive();
-    };
-    this._container = document.createElement("div");
-    this._container.setAttribute("class", "tab");
-    this._header = document.createElement("div");
-    this._header.setAttribute("class", "tab-header");
-    this._nav = document.createElement("div");
-    this._nav.setAttribute("class", "tab-header_nav");
-    this._line = document.createElement("div");
-    this._line.setAttribute("class", "tab-header_line");
-    this._content = document.createElement("div");
-    this._content.setAttribute("class", "tab-content");
-    this._wrap = document.createElement("div");
-    this._wrap.setAttribute("class", "tab-content_wrap");
-    this._slot = document.createElement("slot");
-    this._wrap.appendChild(this._slot);
-    this._content.appendChild(this._wrap);
-    this._header.appendChild(this._nav);
-    this._header.appendChild(this._line);
-    this._container.appendChild(this._header);
-    this._container.appendChild(this._content);
-    this.tabHeaderKeyMapIndex = {};
-    const shadowRoot = this.attachShadow({ mode: "closed" });
-    const F7170EE498E0DD32CBDCB63FBA8F75CC = document.createElement("style");
-    F7170EE498E0DD32CBDCB63FBA8F75CC.textContent = f7170ee498e0dd32cbdcb63fba8f75cc;
-    shadowRoot.appendChild(F7170EE498E0DD32CBDCB63FBA8F75CC);
-    shadowRoot.appendChild(this._container);
-  }
-  static get observedAttributes() {
-    return ["active", "forceRender"];
-  }
-  get align() {
-    return this.getAttribute("align") || "start";
-  }
-  set align(value) {
-    this.setAttribute("align", value);
-  }
-  get type() {
-    return this.getAttribute("type") || "flat";
-  }
-  get active() {
-    return this.getAttribute("active");
-  }
-  set active(value) {
-    if (value) {
-      this.setAttribute("active", value);
-      this.setTabLine(value);
-      this.setTabContent(value);
-    } else {
-      this.removeAttribute("active");
-    }
-  }
-  set type(value) {
-    this.setAttribute("type", value);
-  }
-  createTabHeader(tabPane, index) {
-    const label = tabPane.getAttribute("label") || "";
-    const key = tabPane.getAttribute("key") || `${index}`;
-    const type = tabPane.getAttribute("type") || "text";
-    this.initTabHeaderKeyMapIndex(key, index);
-    const tabHeader = document.createElement("r-button");
-    tabHeader.setAttribute("class", "tab-header_nav__item");
-    tabHeader.setAttribute("type", type);
-    isDisabled(tabPane) && tabHeader.setAttribute("disabled", "");
-    tabHeader.setAttribute("ran-key", key);
-    tabHeader.innerHTML = label;
-    return tabHeader;
-  }
-  connectedCallback() {
-    this._slot.addEventListener("slotchange", this.listenSlotChange);
-  }
-  disconnectCallback() {
-    this._slot.removeEventListener("slotchange", this.listenSlotChange);
-  }
-  attributeChangedCallback(name, oldValue, newValue) {
-    if (oldValue !== newValue) {
-      this.dispatchEvent(new CustomEvent("change", {
-        detail: {
-          active: this.active
+      get type() {
+        return this.getAttribute("type") || "flat";
+      }
+      get active() {
+        return this.getAttribute("active");
+      }
+      set active(value) {
+        if (value) {
+          this.setAttribute("active", value);
+          this.setTabLine(value);
+          this.setTabContent(value);
+        } else {
+          this.removeAttribute("active");
+        }
+      }
+      get effect() {
+        return this.getAttribute("effect");
+      }
+      set effect(value) {
+        if (!value || value === "false") {
+          this.removeAttribute("effect");
+        } else {
+          this.setAttribute("effect", value);
+        }
+      }
+      createTabHeader(tabPane, index) {
+        const label = tabPane.getAttribute("label") || "";
+        const key = tabPane.getAttribute("ranKey") || tabPane.getAttribute("rankey") || tabPane.getAttribute("ran-key") || tabPane.getAttribute("key") || `${index}`;
+        const type = tabPane.getAttribute("type") || "text";
+        this.initTabHeaderKeyMapIndex(key, index);
+        const tabHeader = document.createElement("r-button");
+        tabHeader.setAttribute("class", "tab-header_nav__item");
+        tabHeader.setAttribute("type", type);
+        isDisabled(tabPane) && tabHeader.setAttribute("disabled", "");
+        tabHeader.setAttribute("ran-key", key);
+        if (this.effect) {
+          tabPane.setAttribute("effect", this.effect);
+          this._line.style.setProperty("display", "none");
+        }
+        tabPane.setAttribute("ran-key", key);
+        tabHeader.innerHTML = label;
+        return tabHeader;
+      }
+      connectedCallback() {
+        this.initTab();
+      }
+      disconnectCallback() {
+        this.unloadTab();
+      }
+      attributeChangedCallback(name, oldValue, newValue) {
+        if (oldValue !== newValue) {
+          this.dispatchEvent(
+            new CustomEvent("change", {
+              detail: {
+                active: this.active
+              }
+            })
+          );
+          if (name === "align") {
+            if (newValue === "center")
+              this.initTabLineAlignCenter();
+            if (newValue === "end")
+              this.initTabLineAlignEnd();
+          }
+          if (name === "effect") {
+            const tabHeaderList = [...this._nav.children];
+            tabHeaderList.forEach((item) => {
+              if (!this.effect || this.effect === "false") {
+                item.removeAttribute("effect");
+              } else {
+                item.setAttribute("effect", newValue);
+              }
+            });
+          }
         }
-      }));
+      }
     }
-  }
-}
-function CustomElement() {
-  if (!customElements.get("r-tabs")) {
     customElements.define("r-tabs", Tabs);
+    return Tabs;
   }
 }
 CustomElement();
+const styles = '.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}\n';
+if (typeof document !== "undefined") {
+  const style = document.createElement("style");
+  style.textContent = styles;
+  document.body.appendChild(style);
+}
 //# sourceMappingURL=index.js.map