ranui 0.1.9 → 0.1.10-alpha.2

package/dist/index-C-p_Wpit.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);
+  return value;
+};
+import { a as addClassToElement, r as removeClassToElement } from "./utils-74Icp-PI.js";
+import { H as HTMLElementSSR, f as falseList, c as createCustomError } from "./index-CSnBqUsQ.js";
+class Checkbox extends HTMLElementSSR() {
+  constructor() {
+    super();
+    __publicField(this, "checkInput");
+    __publicField(this, "checkInner");
+    __publicField(this, "context");
+    __publicField(this, "updateChecked", () => {
+      const { checked } = this.context;
+      if (checked) {
+        addClassToElement(this, "ran-checkbox-checked");
+      } else {
+        removeClassToElement(this, "ran-checkbox-checked");
+      }
+    });
+    __publicField(this, "update", () => {
+      this.updateChecked();
+    });
+    __publicField(this, "onChange", () => {
+      const { checked } = this.context;
+      this.context.checked = !checked;
+      this.dispatchEvent(
+        new CustomEvent("change", {
+          detail: {
+            checked: this.context.checked
+          }
+        })
+      );
+      this.update();
+    });
+    this.checkInput = document.createElement("input");
+    this.checkInput.setAttribute("class", "ran-checkbox-input");
+    this.checkInput.setAttribute("type", "checkbox");
+    this.checkInner = document.createElement("span");
+    this.checkInner.setAttribute("class", "ran-checkbox-inner");
+    this.context = {
+      checked: false
+    };
+  }
+  static get observedAttributes() {
+    return ["disabled", "checked"];
+  }
+  get disabled() {
+    return this.getAttribute("disabled") || "";
+  }
+  set disabled(value) {
+    this.setAttribute("disabled", value);
+  }
+  get checked() {
+    const checked = this.getAttribute("checked");
+    if (falseList.includes(checked)) {
+      this.context.checked = false;
+    }
+    return `${this.context.checked}`;
+  }
+  set checked(value) {
+    if (falseList.includes(value)) {
+      this.setAttribute("checked", "false");
+      this.context.checked = false;
+    } else {
+      this.setAttribute("checked", "true");
+      this.context.checked = true;
+    }
+    this.updateChecked();
+  }
+  connectedCallback() {
+    this.setAttribute("class", "ran-checkbox");
+    this.appendChild(this.checkInput);
+    this.appendChild(this.checkInner);
+    this.addEventListener("click", this.onChange);
+  }
+  disconnectCallback() {
+    this.removeEventListener("click", this.onChange);
+  }
+  attributeChangedCallback(name, oldValue, newValue) {
+  }
+}
+function Custom() {
+  if (typeof document !== "undefined" && !customElements.get("r-checkbox")) {
+    customElements.define("r-checkbox", Checkbox);
+    return Checkbox;
+  } else {
+    return createCustomError("document is undefined or r-checkbox is exist");
+  }
+}
+const index = Custom();
+const index$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  Checkbox,
+  default: index
+}, Symbol.toStringTag, { value: "Module" }));
+export {
+  Checkbox as C,
+  index as a,
+  index$1 as i
+};

package/dist/{index-b7790662.js → index-C1x9Popy.js}

@@ -4,7 +4,7 @@ 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}\n";
+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}";
 function CustomElement() {
   if (typeof window !== "undefined" && !customElements.get("r-tab")) {
     class TabPane extends HTMLElement {

package/dist/index-C6wPL-2Y.js

@@ -0,0 +1,298 @@
+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 { _ as __variableDynamicImportRuntimeHelper, s as str2Xml } from "./arrow-down-D4qr4m33.js";
+import "./utils-74Icp-PI.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{display:inline-flex}:host([spin]){animation-name:rotate;animation-duration:1.4s;animation-timing-function:linear;animation-iteration-count:infinite}.ran-icon{display:flex;align-items:center;justify-content:center}@keyframes rotate{to{transform:rotate(360deg)}}";
+const X_LINKS_NS = "http://www.w3.org/1999/xlink";
+const X_LINK_HREF = "xlink:href";
+function Custom() {
+  if (typeof window !== "undefined" && !customElements.get("r-icon")) {
+    class RIcon extends HTMLElement {
+      constructor() {
+        super();
+        __publicField(this, "_icon");
+        __publicField(this, "_div");
+        /**
+         * @description: 本地加载 icon
+         */
+        __publicField(this, "loadLocal", () => {
+          return new Promise((resolve, reject) => {
+            __variableDynamicImportRuntimeHelper(/* @__PURE__ */ Object.assign({ "../../assets/icons/add-user.svg": () => import("./add-user-BN1JlY7e.js"), "../../assets/icons/arrow-down.svg": () => import("./arrow-down-D4qr4m33.js").then((n) => n.a), "../../assets/icons/book.svg": () => import("./book-nTEFXU2x.js"), "../../assets/icons/check-circle-fill.svg": () => import("./check-circle-fill-B_pd8ZSs.js"), "../../assets/icons/check-circle.svg": () => import("./check-circle-szyAJiap.js"), "../../assets/icons/close-circle-fill.svg": () => import("./close-circle-fill-jSqPPw9i.js"), "../../assets/icons/close-circle.svg": () => import("./close-circle-CwmuN2C6.js"), "../../assets/icons/close.svg": () => import("./close-CFnkhudp.js"), "../../assets/icons/eye-close.svg": () => import("./eye-close-BVr3NJtg.js"), "../../assets/icons/eye.svg": () => import("./eye-D_mEt17f.js"), "../../assets/icons/home.svg": () => import("./home-BUQ4USMk.js"), "../../assets/icons/info-circle-fill.svg": () => import("./info-circle-fill-CFeVMdci.js"), "../../assets/icons/info-circle.svg": () => import("./info-circle-COnL5bTJ.js"), "../../assets/icons/loading.svg": () => import("./loading-Dcc5RApI.js"), "../../assets/icons/lock.svg": () => import("./lock-Cr7BnmWN.js"), "../../assets/icons/message.svg": () => import("./message-D36_Zo2l.js"), "../../assets/icons/power-off.svg": () => import("./power-off-lQRbiBak.js"), "../../assets/icons/preview.svg": () => import("./preview-CJbz9GjO.js"), "../../assets/icons/setting.svg": () => import("./setting-DemlgzVC.js"), "../../assets/icons/sprite.svg": () => import("./sprite-CH2zLtZy.js"), "../../assets/icons/team.svg": () => import("./team-tl4NJXPC.js"), "../../assets/icons/unlock.svg": () => import("./unlock-CeU74z9n.js"), "../../assets/icons/user.svg": () => import("./user-B-eVXwuk.js"), "../../assets/icons/warning-circle-fill.svg": () => import("./warning-circle-fill-lODUKz0i.js"), "../../assets/icons/warning-circle.svg": () => import("./warning-circle-DDUgEDIv.js") }), `../../assets/icons/${this.name}.svg`, 5).then((result) => {
+              if (result && result.default && result.default._identification) {
+                const { data } = result.default;
+                this._icon && this._div.removeChild(this._icon);
+                this._icon = str2Xml(data, "image/svg+xml");
+                if (this._icon) {
+                  this._div.appendChild(this._icon);
+                  this.setSize();
+                  this.setColor();
+                  resolve();
+                }
+              } else {
+                this.loadNs();
+                reject(`
+ couldn't be loaded by r-icon, message: ${this.name} icon is undefined`);
+              }
+            }).catch((error) => {
+              this.loadNs();
+            });
+          });
+        });
+        /**
+         * @description: NS 加载 icon
+         */
+        __publicField(this, "loadNs", () => {
+          if (this._icon && this._div) {
+            this._div.removeChild(this._icon);
+          }
+          this._icon = document.createElement("svg");
+          this._icon.setAttribute("class", "icon");
+          this._icon.setAttribute("viewBox", "0 0 1024 1024");
+          this._icon.setAttribute("width", "100");
+          this._icon.setAttribute("height", "100");
+          const use = document.createElementNS(X_LINKS_NS, "use");
+          use.setAttributeNS(X_LINKS_NS, X_LINK_HREF, `../../assets/iconfont/icon.svg#icon-${this.name}`);
+          this._icon.appendChild(use);
+          this._div.appendChild(this._icon);
+        });
+        /**
+         * @description: 根据 name 属性加载对应的 svg
+         */
+        __publicField(this, "setIcon", async () => {
+          if (this.name) {
+            this.loadLocal();
+          }
+        });
+        /**
+         * @description: 设置 icon 的大小
+         */
+        __publicField(this, "setSize", () => {
+          if (this._icon && this.size) {
+            this._icon.setAttribute("width", this.size);
+            this._icon.setAttribute("height", this.size);
+          }
+        });
+        /**
+         * @description: 设置 icon 的颜色
+         */
+        __publicField(this, "setColor", () => {
+          if (this._icon) {
+            this.color ? this._icon.setAttribute("fill", this.color) : this._icon.setAttribute("fill", "currentColor");
+          }
+        });
+        /**
+         * @description: 设置是否旋转和旋转的速度
+         */
+        __publicField(this, "setSpin", () => {
+          if (this.spin) {
+            this.style.setProperty("animation-duration", `${this.spin}s`);
+          }
+        });
+        this._div = document.createElement("div");
+        this._div.setAttribute("class", "ran-icon");
+        this._div.setAttribute("part", "ran-icon");
+        const shadowRoot = this.attachShadow({ mode: "closed" });
+        const F7170EE498E0DD32CBDCB63FBA8F75CC = document.createElement("style");
+        F7170EE498E0DD32CBDCB63FBA8F75CC.textContent = f7170ee498e0dd32cbdcb63fba8f75cc;
+        shadowRoot.appendChild(F7170EE498E0DD32CBDCB63FBA8F75CC);
+        shadowRoot.appendChild(this._div);
+      }
+      static get observedAttributes() {
+        return ["name", "size", "color", "spin"];
+      }
+      get name() {
+        return this.getAttribute("name");
+      }
+      set name(value) {
+        if (value)
+          this.setAttribute("name", value);
+      }
+      get size() {
+        return this.getAttribute("size");
+      }
+      set size(value) {
+        if (value)
+          this.setAttribute("size", value);
+      }
+      get color() {
+        return this.getAttribute("color");
+      }
+      set color(value) {
+        if (value)
+          this.setAttribute("color", value);
+      }
+      get spin() {
+        return this.getAttribute("spin");
+      }
+      set spin(value) {
+        if (value != null)
+          this.setAttribute("spin", value);
+      }
+      connectedCallback() {
+        this.setIcon();
+      }
+      attributeChangedCallback(name, oldValue, newValue) {
+        if (newValue !== oldValue) {
+          if (name === "name")
+            this.setIcon();
+          if (name === "size")
+            this.setSize();
+          if (name === "color")
+            this.setColor();
+          if (name === "spin")
+            this.setSpin();
+        }
+      }
+    }
+    customElements.define("r-icon", RIcon);
+  }
+  if (typeof window !== "undefined" && !customElements.get("ra-icon")) {
+    class RaIcon extends HTMLElement {
+      constructor() {
+        super();
+        __publicField(this, "_icon");
+        __publicField(this, "_div");
+        /**
+         * @description: 本地加载 icon
+         */
+        __publicField(this, "loadLocal", () => {
+          return new Promise((resolve, reject) => {
+            __variableDynamicImportRuntimeHelper(/* @__PURE__ */ Object.assign({ "../../assets/icons/add-user.svg": () => import("./add-user-BN1JlY7e.js"), "../../assets/icons/arrow-down.svg": () => import("./arrow-down-D4qr4m33.js").then((n) => n.a), "../../assets/icons/book.svg": () => import("./book-nTEFXU2x.js"), "../../assets/icons/check-circle-fill.svg": () => import("./check-circle-fill-B_pd8ZSs.js"), "../../assets/icons/check-circle.svg": () => import("./check-circle-szyAJiap.js"), "../../assets/icons/close-circle-fill.svg": () => import("./close-circle-fill-jSqPPw9i.js"), "../../assets/icons/close-circle.svg": () => import("./close-circle-CwmuN2C6.js"), "../../assets/icons/close.svg": () => import("./close-CFnkhudp.js"), "../../assets/icons/eye-close.svg": () => import("./eye-close-BVr3NJtg.js"), "../../assets/icons/eye.svg": () => import("./eye-D_mEt17f.js"), "../../assets/icons/home.svg": () => import("./home-BUQ4USMk.js"), "../../assets/icons/info-circle-fill.svg": () => import("./info-circle-fill-CFeVMdci.js"), "../../assets/icons/info-circle.svg": () => import("./info-circle-COnL5bTJ.js"), "../../assets/icons/loading.svg": () => import("./loading-Dcc5RApI.js"), "../../assets/icons/lock.svg": () => import("./lock-Cr7BnmWN.js"), "../../assets/icons/message.svg": () => import("./message-D36_Zo2l.js"), "../../assets/icons/power-off.svg": () => import("./power-off-lQRbiBak.js"), "../../assets/icons/preview.svg": () => import("./preview-CJbz9GjO.js"), "../../assets/icons/setting.svg": () => import("./setting-DemlgzVC.js"), "../../assets/icons/sprite.svg": () => import("./sprite-CH2zLtZy.js"), "../../assets/icons/team.svg": () => import("./team-tl4NJXPC.js"), "../../assets/icons/unlock.svg": () => import("./unlock-CeU74z9n.js"), "../../assets/icons/user.svg": () => import("./user-B-eVXwuk.js"), "../../assets/icons/warning-circle-fill.svg": () => import("./warning-circle-fill-lODUKz0i.js"), "../../assets/icons/warning-circle.svg": () => import("./warning-circle-DDUgEDIv.js") }), `../../assets/icons/${this.name}.svg`, 5).then((result) => {
+              if (result && result.default && result.default._identification) {
+                const { data } = result.default;
+                this._icon && this._div.removeChild(this._icon);
+                this._icon = str2Xml(data, "image/svg+xml");
+                if (this._icon) {
+                  this._div.appendChild(this._icon);
+                  this.setSize();
+                  this.setColor();
+                  resolve();
+                }
+              } else {
+                this.loadNs();
+                reject(`
+ couldn't be loaded by r-icon, message: ${this.name} icon is undefined`);
+              }
+            }).catch((error) => {
+              this.loadNs();
+            });
+          });
+        });
+        /**
+         * @description: NS 加载 icon
+         */
+        __publicField(this, "loadNs", () => {
+          if (this._icon && this._div) {
+            this._div.removeChild(this._icon);
+          }
+          this._icon = document.createElement("svg");
+          this._icon.setAttribute("class", "icon");
+          this._icon.setAttribute("viewBox", "0 0 1024 1024");
+          this._icon.setAttribute("width", "100");
+          this._icon.setAttribute("height", "100");
+          const use = document.createElementNS(X_LINKS_NS, "use");
+          use.setAttributeNS(X_LINKS_NS, X_LINK_HREF, `../../assets/iconfont/icon.svg#icon-${this.name}`);
+          this._icon.appendChild(use);
+          this._div.appendChild(this._icon);
+        });
+        /**
+         * @description: 根据 name 属性加载对应的 svg
+         */
+        __publicField(this, "setIcon", async () => {
+          if (this.name) {
+            this.loadLocal();
+          }
+        });
+        /**
+         * @description: 设置 icon 的大小
+         */
+        __publicField(this, "setSize", () => {
+          if (this._icon && this.size) {
+            this._icon.setAttribute("width", this.size);
+            this._icon.setAttribute("height", this.size);
+          }
+        });
+        /**
+         * @description: 设置 icon 的颜色
+         */
+        __publicField(this, "setColor", () => {
+          if (this._icon) {
+            this.color ? this._icon.setAttribute("fill", this.color) : this._icon.setAttribute("fill", "currentColor");
+          }
+        });
+        /**
+         * @description: 设置是否旋转和旋转的速度
+         */
+        __publicField(this, "setSpin", () => {
+          if (this.spin) {
+            this.style.setProperty("animation-duration", `${this.spin}s`);
+          }
+        });
+        this._div = document.createElement("div");
+        this._div.setAttribute("class", "ran-icon");
+        this._div.setAttribute("part", "ran-icon");
+      }
+      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.appendChild(this._div);
+        this.setIcon();
+      }
+      attributeChangedCallback(name, oldValue, newValue) {
+        if (newValue !== oldValue) {
+          if (name === "name")
+            this.setIcon();
+          if (name === "size")
+            this.setSize();
+          if (name === "color")
+            this.setColor();
+          if (name === "spin")
+            this.setSpin();
+        }
+      }
+    }
+    customElements.define("ra-icon", RaIcon);
+  }
+}
+const index = Custom();
+const index$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  default: index
+}, Symbol.toStringTag, { value: "Module" }));
+export {
+  index as a,
+  index$1 as i
+};

package/dist/{index-1048a998.js → index-CFnsLnrb.js}

@@ -4,9 +4,8 @@ var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
-import { i as isDisabled, f as falseList, c as createCustomError } from "./index-57492b9b.js";
-const f7170ee498e0dd32cbdcb63fba8f75cc = '.remove-wap-active-focus{outline:0;-webkit-tap-highlight-color:transparent}.remove-wap-active-focus:active,.remove-wap-active-focus:focus{outline:0;-webkit-tap-highlight-color:transparent}.ran-input{position:relative;display:flex;width:calc(100% - 16px);height:calc(100% - 4px);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}.ran-input:active{border-color:#40a9ff;box-shadow:0 0 0 2px #1890ff33;border-right-width:1px;outline:0}.ran-input:hover{border-color:#40a9ff;border-right-width:1px}.ran-input>.ran-input-content:hover~.ran-input-label{color:#40a9ff}.ran-input[value]>.ran-input-label{transform:translateY(calc(-50% - .43em)) scale(.8);color:#00000040}.ran-input[status=error]{border-color:#ff4d4f}.ran-input[status=error]>.ran-input-content~.ran-input-label{color:#ff4d4f}.ran-input[status=warning]{border-color:#ff7875}.ran-input[status=warning]>.ran-input-content~.ran-input-label{color:#ff7875}.ran-input[disabled]{color:#00000040;background-color:#f5f5f5;border-color:#d9d9d9;box-shadow:none;cursor:not-allowed;opacity:1}.ran-input[disabled]>.ran-input-content{color:#00000040;background-color:#f5f5f5;border-color:#d9d9d9;box-shadow:none;cursor:not-allowed;opacity:1}.ran-input[disabled]>.ran-input-content~.ran-input-label{color:#00000040;background-color:#f5f5f5}.ran-input[disabled]>.ran-input-label{color:#999;border-color:#d9d9d9;box-shadow:none;cursor:not-allowed}.ran-input-content{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.48;background-color:#fff;background-image:none;transition:all .3s;outline:none}.ran-input-content:focus,.ran-input-content:hover{border:none;outline:0}.ran-input-content::placeholder{color:#999}.ran-input-content:placeholder-shown~.ran-input-label{transform:translateY(calc(-50% - .43em)) scale(.8)}.ran-input-content:focus~.ran-input-label{transform:translateY(calc(-50% - .43em)) scale(.8)}.ran-input-content::-webkit-search-cancel-button{display:none;-webkit-appearance:none}.ran-input-label{pointer-events:none;position:absolute;font-size:14px;left:8px;transition:transform .3s,color .3s,background-color .3s,backdrop-filter .3s;transform-origin:left;padding:0 .2em;color:#999;background:#fff;opacity:.9}\n';
-class Input extends HTMLElement {
+import { H as HTMLElementSSR, i as isDisabled, f as falseList, c as createCustomError } from "./index-CSnBqUsQ.js";
+class Input extends HTMLElementSSR() {
   constructor() {
     super();
     __publicField(this, "_input");
@@ -146,7 +145,7 @@ class Input extends HTMLElement {
      */
     __publicField(this, "dealIcon", () => {
       if (!this._icon) {
-        this._icon = document.createElement("r-icon");
+        this._icon = document.createElement("ra-icon");
         const { width, height } = this._inputContent.getBoundingClientRect();
         const size = Math.min(width, height);
         this._icon.setAttribute("size", `${size}`);
@@ -171,10 +170,6 @@ class Input extends HTMLElement {
         this._input.setAttribute("value", newValue);
       }
     });
-    const shadowRoot = this.attachShadow({ mode: "closed" });
-    const F7170EE498E0DD32CBDCB63FBA8F75CC = document.createElement("style");
-    F7170EE498E0DD32CBDCB63FBA8F75CC.textContent = f7170ee498e0dd32cbdcb63fba8f75cc;
-    shadowRoot.appendChild(F7170EE498E0DD32CBDCB63FBA8F75CC);
     this._input = document.createElement("div");
     this._input.setAttribute("class", "ran-input");
     this._input.setAttribute("part", "ran-input");
@@ -182,7 +177,6 @@ class Input extends HTMLElement {
     this._inputContent.setAttribute("class", "ran-input-content");
     this._inputContent.setAttribute("part", "ran-input-content");
     this._input.appendChild(this._inputContent);
-    shadowRoot.appendChild(this._input);
   }
   static get observedAttributes() {
     return [
@@ -193,7 +187,25 @@ class Input extends HTMLElement {
       "type",
       "icon",
       "value",
-      "status"
+      "status",
+      // error warning
+      "prefix",
+      // 前缀
+      "suffix",
+      // 后缀
+      "allowclear",
+      // 清除 icon
+      "count",
+      // 计算输入的数量
+      "maxlength",
+      "showcount",
+      "onPressEnter",
+      // 按下回车的回调
+      "variant",
+      // filled borderless
+      "minrows",
+      // 当 type 等于 TextArea 时
+      "maxrows"
     ];
   }
   /**
@@ -201,7 +213,7 @@ class Input extends HTMLElement {
    * @return {String}
    */
   get value() {
-    return this.getAttribute("value");
+    return this.getAttribute("value") || "";
   }
   /**
    * @description: 设置input的值
@@ -221,7 +233,7 @@ class Input extends HTMLElement {
    * @return {String}
    */
   get placeholder() {
-    return this.getAttribute("placeholder");
+    return this.getAttribute("placeholder") || "";
   }
   /**
    * @description: 设置input的占位字符
@@ -239,7 +251,7 @@ class Input extends HTMLElement {
    * @return {String}
    */
   get required() {
-    return this.getAttribute("required");
+    return this.getAttribute("required") || "";
   }
   /**
    * @description: 设置input是否为必选，除非设置成false，否则都是必填
@@ -257,7 +269,7 @@ class Input extends HTMLElement {
    * @return {String | null}
    */
   get disabled() {
-    return isDisabled(this);
+    return `${isDisabled(this)}`;
   }
   /**
    * @description: 设置input的disabled属性
@@ -368,7 +380,7 @@ class Input extends HTMLElement {
    * @return {String}
    */
   get icon() {
-    return this.getAttribute("icon");
+    return this.getAttribute("icon") || "";
   }
   /**
    * @description: 设置icon来表示标识
@@ -381,12 +393,48 @@ class Input extends HTMLElement {
       this.removeAttribute("icon");
     }
   }
+  /**
+   * @description: 获取前面的icon
+   * @return {String}
+   */
+  get prefix() {
+    return this.getAttribute("prefix") || "";
+  }
+  /**
+   * @description: 设置前面的icon来表示标识
+   * @param {string|null} value
+   */
+  set prefix(value) {
+    if (value) {
+      this.setAttribute("prefix", value);
+    } else {
+      this.removeAttribute("prefix");
+    }
+  }
+  /**
+   * @description: 获取后面的icon
+   * @return {String}
+   */
+  get suffix() {
+    return this.getAttribute("suffix") || "";
+  }
+  /**
+   * @description: 设置后面的icon来表示标识
+   * @param {string|null} value
+   */
+  set suffix(value) {
+    if (value) {
+      this.setAttribute("suffix", value);
+    } else {
+      this.removeAttribute("suffix");
+    }
+  }
   /**
    * @description: 获取input的类型
    * @return {string|null}
    */
   get type() {
-    return this.getAttribute("type");
+    return this.getAttribute("type") || "";
   }
   /**
    * @description: 设置input的类型
@@ -418,6 +466,7 @@ class Input extends HTMLElement {
     if (document.readyState === "complete") {
       this.dealIcon();
     }
+    this.appendChild(this._input);
   }
   disconnectCallback() {
     this._inputContent.removeEventListener("input", this.customInput);
@@ -427,11 +476,11 @@ class Input extends HTMLElement {
   }
 }
 function Custom() {
-  if (typeof window !== "undefined" && !customElements.get("r-input")) {
-    customElements.define("r-input", Input);
+  if (typeof window !== "undefined" && !customElements.get("ra-input")) {
+    customElements.define("ra-input", Input);
     return Input;
   } else {
-    return createCustomError("document is undefined or r-input is exist");
+    return createCustomError("document is undefined or ra-input is exist");
   }
 }
 const index = Custom();

package/dist/{index-57492b9b.js → index-CSnBqUsQ.js}

@@ -31,7 +31,7 @@ const loadScript = (src) => {
     document.body.append(script);
   });
 };
-function createCustomError(msg) {
+function createCustomError(msg = "") {
   return class CustomError {
     constructor(message = msg) {
       __publicField(this, "message");
@@ -39,7 +39,54 @@ function createCustomError(msg) {
     }
   };
 }
+const HTMLElementSSR = () => {
+  if (typeof document !== "undefined") {
+    return HTMLElement;
+  }
+  return null;
+};
+const createSignal = (value, options) => {
+  const signal = {
+    value,
+    // 订阅者
+    subscribers: /* @__PURE__ */ new Set(),
+    comparator: options == null ? void 0 : options.equals
+  };
+  const { subscriber } = options || {};
+  if (subscriber && Array.isArray(subscriber)) {
+    subscriber.forEach((item) => {
+      if (typeof item === "function" && !signal.subscribers.has(item)) {
+        signal.subscribers.add(item);
+      }
+    });
+  }
+  const getter = () => {
+    return signal.value;
+  };
+  const updateSignal = (newValue) => {
+    if (signal.value !== newValue) {
+      signal.value = newValue;
+      signal.subscribers.forEach((subscriber2) => subscriber2(newValue));
+    }
+  };
+  const setter = (newValue) => {
+    const { comparator } = signal;
+    if (comparator instanceof Function) {
+      return !comparator(signal.value, newValue) && updateSignal(newValue);
+    }
+    if (comparator === void 0) {
+      if (signal.value !== newValue) {
+        updateSignal(newValue);
+      }
+    } else {
+      !comparator && updateSignal(newValue);
+    }
+  };
+  return [getter, setter];
+};
 export {
+  HTMLElementSSR as H,
+  createSignal as a,
   createCustomError as c,
   falseList as f,
   isDisabled as i,