ranui 0.1.9 → 0.1.10-alpha.10

package/dist/index-C4Sv0T51.js

@@ -0,0 +1,495 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+import { H as HTMLElementSSR, i as isDisabled, f as falseList, c as createCustomError } from "./index-DC5EA657.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:var(--ran-input-position, relative);display:var(--ran-input-display, flex);width:var(--ran-input-width, calc(100% - 16px) );height:var(--ran-input-height, calc(100% - 4px) );min-width:0;padding:var(--ran-input-padding, 2px 8px);color:#000000d9;font-size:var(--ran-input-font-size, 12px);line-height:var(--ran-input-line-height, 1.5715);background-color:var(--ran-input-background-color, #fff);background-image:var(--ran-input-background-image, none);border:var(--ran-input-border, 1px solid #d9d9d9);border-radius:var(--ran-input-border-radius, 2px);transition:var(--ran-input-transition, all .3s)}.ran-input .ran-icon{display:var(--ran-input-icon-display, flex);align-items:var(--ran-input-icon-align-items, center);justify-content:var(--ran-input-icon-justify-content, center)}.ran-input:active{border-color:var(--ran-input-active-border-color, #40a9ff);box-shadow:var(--ran-input-active-box-shadow, 0 0 0 2px rgba(24, 144, 255, .2));border-right-width:var(--ran-input-active-border-right-width, 1px);outline:var(--ran-input-active-outline, 0)}.ran-input:hover{border-color:var(--ran-input-hover-border-color, #40a9ff);border-right-width:var(--ran-input-hover-border-right-width, 1px)}.ran-input>.ran-input-content:hover~.ran-input-label{color:var(--ran-input-label-hover-color, #40a9ff)}.ran-input[value]>.ran-input-label{transform:var(--ran-input-label-value-transform, translateY( calc(-50% - .43em) ) scale(.8));color:var(--ran-input-label-value-color, #00000040)}.ran-input[status=error]{border-color:var(--ran-input-status-error-border-color, #ff4d4f)}.ran-input[status=error]>.ran-input-content~.ran-input-label{color:var(--ran-input-label-status-error-color, #ff4d4f)}.ran-input[status=warning]{border-color:var(--ran-input-status-warning-border-color, #ff7875)}.ran-input[status=warning]>.ran-input-content~.ran-input-label{color:var(--ran-input-label-status-warning-color, #ff7875)}.ran-input[disabled]{color:var(--ran-input-disabled-color, #00000040);background-color:var(--ran-input-disabled-background-color, #f5f5f5);border-color:var(--ran-input-disabled-border-color, #d9d9d9);box-shadow:var(--ran-input-disabled-box-shadow, none);cursor:var(--ran-input-disabled-cursor, not-allowed);opacity:var(--ran-input-disabled-opacity, 1)}.ran-input[disabled]>.ran-input-content{color:var(--ran-input-content-disabled-color, #00000040);background-color:var(--ran-input-content-disabled-background-color, #f5f5f5);border-color:var(--ran-input-content-disabled-border-color, #d9d9d9);box-shadow:var(--ran-input-content-disabled-box-shadow, none);cursor:var(--ran-input-content-disabled-cursor, not-allowed);opacity:var(--ran-input-content-disabled-opacity, 1)}.ran-input[disabled]>.ran-input-content~.ran-input-label{color:var(--ran-input-label-disabled-color, #00000040);background-color:var(--ran-input-label-disabled-background-color, #f5f5f5)}.ran-input[disabled]>.ran-input-label{color:#999;border-color:var(--ran-input-label-disabled-border-color, #d9d9d9);box-shadow:var(--ran-input-label-disabled-box-shadow, none);cursor:var(--ran-input-label-disabled-cursor, not-allowed)}.ran-input-content{writing-mode:var(--ran-input-content-writing-mode, horizontal-tb);text-rendering:var(--ran-input-content-text-rendering, auto);letter-spacing:var(--ran-input-content-letter-spacing, normal);word-spacing:var(--ran-input-content-word-spacing, normal);text-transform:var(--ran-input-content-text-transform, none);text-indent:var(--ran-input-content-text-indent, 0px);text-shadow:var(--ran-input-content-text-shadow, none);text-align:var(--ran-input-content-text-align, start);cursor:var(--ran-input-content-cursor, text);touch-action:var(--ran-input-content-touch-action, manipulation);-webkit-appearance:var(--ran-input-content--webkit-appearance, none);text-overflow:var(--ran-input-content-text-overflow, ellipsis);box-sizing:var(--ran-input-content-box-sizing, border-box);margin:var(--ran-input-content-margin, 0);font-variant:var(--ran-input-content-font-variant, tabular-nums);list-style:var(--ran-input-content-list-style, none);font-feature-settings:var(--ran-input-content-font-feature-settings, "tnum");position:var(--ran-input-content-position, relative);border:var(--ran-input-content-border, none);width:var(--ran-input-content-width, 100%);min-width:var(--ran-input-content-min-width, 0);color:var(--ran-input-content-color, #000000d9);font-size:var(--ran-input-content-font-size, 14px);line-height:var(--ran-input-content-line-height, 1.48);background-color:var(--ran-input-content-background-color, #fff);background-image:var(--ran-input-content-background-image, none);transition:var(--ran-input-content-transition, all .3s);outline:var(--ran-input-content-outline, none)}.ran-input-content:focus,.ran-input-content:hover{border:var(--ran-input-content-hover-border, none);outline:var(--ran-input-content-hover-outline, 0)}.ran-input-content::placeholder{color:var(--ran-input-content-placeholder-color, #999)}.ran-input-content:placeholder-shown~.ran-input-label{transform:var(--ran-input-content-placeholder-label-transform, translateY( calc(-50% - .43em) ) scale(.8))}.ran-input-content:focus~.ran-input-label{transform:var(--ran-input-content-focus-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:var(--ran-input-label-pointer-events, none);position:var(--ran-input-label-position, absolute);font-size:var(--ran-input-label-font-size, 14px);left:var(--ran-input-label-left, 8px);transition:var(--ran-input-label-transition, transform .3s, color .3s, background-color .3s, backdrop-filter .3s);transform-origin:var(--ran-input-label-transform-origin, left);padding:var(--ran-input-label-padding, 0 .2em);color:var(--ran-input-label-color, #999);background:var(--ran-input-label-background, #fff);opacity:var(--ran-input-label-opacity, .9)}';
+class Input extends HTMLElementSSR() {
+  constructor() {
+    super();
+    __publicField(this, "_input");
+    __publicField(this, "_label");
+    __publicField(this, "_inputContent");
+    __publicField(this, "_icon");
+    /**
+     * @description: 原生的 input 方法
+     * @param {Event} event
+     */
+    __publicField(this, "customInput", (event) => {
+      event.stopPropagation();
+      event.preventDefault();
+      const { target, data = "" } = event;
+      this.value = (target == null ? void 0 : target.value) || data || "";
+      this.customChange();
+      this.dispatchEvent(
+        new CustomEvent("input", {
+          detail: {
+            value: this.value
+          }
+        })
+      );
+    });
+    /**
+     * @description: 增加 change 方法，同时兼容大小写的情况
+     */
+    __publicField(this, "customChange", () => {
+      this.dispatchEvent(
+        new CustomEvent("change", {
+          detail: {
+            value: this.value
+          }
+        })
+      );
+    });
+    /**
+     * @description: 监听 placeholder 属性函数
+     * @param {string} name
+     * @param {string} value
+     */
+    __publicField(this, "listenPlaceholder", (name, value) => {
+      if (name === "placeholder" && this._inputContent) {
+        if (value != null) {
+          this._inputContent.setAttribute("placeholder", value);
+        } else {
+          this._inputContent.removeAttribute("placeholder");
+        }
+      }
+    });
+    /**
+     * @description: 监听 label 属性函数
+     * @param {string} name
+     * @param {string} value
+     */
+    __publicField(this, "listenLabel", (name, value) => {
+      if (name === "label" && this._inputContent) {
+        if (value != null) {
+          if (this._label) {
+            this._label.innerHTML = value;
+          } else {
+            this._label = document.createElement("label");
+            this._label.innerHTML = value;
+            this._label.setAttribute("class", "ran-input-label");
+            this._label.setAttribute("part", "ran-input-label");
+            this._input.appendChild(this._label);
+          }
+        } else {
+          this._input.removeAttribute("label");
+          if (this._label) {
+            this._input.removeChild(this._label);
+            this._label = void 0;
+          }
+        }
+      }
+    });
+    /**
+     * @description: 监听 type 属性
+     * @param {string} name
+     * @param {string} value
+     */
+    __publicField(this, "listenType", (name, value) => {
+      if (name === "type" && this._inputContent) {
+        if (value) {
+          this._inputContent.setAttribute("type", value);
+        } else {
+          this._inputContent.removeAttribute("type");
+          this._inputContent.removeAttribute("min");
+          this._inputContent.removeAttribute("max");
+          this._inputContent.removeAttribute("step");
+        }
+      }
+    });
+    /**
+     * @description: 监听 status 属性
+     * @param {string} name
+     * @param {string} value
+     */
+    __publicField(this, "listenStatus", (name, value) => {
+      if (name === "status" && this._input) {
+        if (value) {
+          this._input.setAttribute("status", value);
+        } else {
+          this._input.removeAttribute("status");
+        }
+      }
+    });
+    /**
+     * @description: 监听 disabled 属性
+     * @param {string} name
+     * @param {string} value
+     */
+    __publicField(this, "listenDisabled", (name, value) => {
+      if (name === "disabled" && this._input) {
+        if (falseList.includes(value)) {
+          this._input.removeAttribute("disabled");
+        } else {
+          this._input.setAttribute("disabled", "");
+          this._inputContent.setAttribute("disabled", "");
+        }
+      }
+    });
+    /**
+     * @description:  监听 icon 属性
+     * @param {string} name
+     * @param {string} value
+     */
+    __publicField(this, "listenIcon", (name, value, oldValue) => {
+      if (name === "icon" && value && value !== oldValue) {
+        this.removeAttribute("label");
+        this.setAttribute("icon", value);
+        this.dealIcon();
+      }
+    });
+    /**
+     * @description: 处理 icon 属性的问题
+     */
+    __publicField(this, "dealIcon", () => {
+      if (!this._icon) {
+        this._icon = document.createElement("ra-icon");
+        const { width, height } = this._inputContent.getBoundingClientRect();
+        const size = Math.min(width, height);
+        this._icon.setAttribute("size", `${size}`);
+        this._inputContent.insertAdjacentElement("beforebegin", this._icon);
+      }
+      this.icon && this._icon.setAttribute("name", this.icon);
+    });
+    /**
+     * @description: 聚合监听事件
+     * @param {string} name
+     * @param {string} oldValue
+     * @param {string} newValue
+     */
+    __publicField(this, "listenEvent", (name, oldValue, newValue) => {
+      this.listenPlaceholder(name, newValue);
+      this.listenLabel(name, newValue);
+      this.listenStatus(name, newValue);
+      this.listenDisabled(name, newValue);
+      this.listenIcon(name, newValue, oldValue);
+      if (name === "value" && oldValue !== newValue) {
+        this._inputContent.value = newValue;
+        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");
+    this._inputContent = document.createElement("input");
+    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 [
+      "label",
+      "disabled",
+      "name",
+      "placeholder",
+      "type",
+      "icon",
+      "value",
+      "status",
+      // error warning normal
+      "prefix",
+      // 前缀
+      "suffix",
+      // 后缀
+      "allowclear",
+      // 清除 icon
+      "count",
+      // 计算输入的数量
+      "maxlength",
+      "showcount",
+      "onPressEnter",
+      // 按下回车的回调
+      "variant",
+      // filled borderless
+      "minrows",
+      // 当 type 等于 TextArea 时
+      "maxrows"
+    ];
+  }
+  /**
+   * @description: 获取 input 的值
+   * @return {String}
+   */
+  get value() {
+    return this.getAttribute("value") || "";
+  }
+  /**
+   * @description: 设置 input 的值
+   * @param {String} value
+   */
+  set value(value) {
+    if (!isDisabled(this) && value) {
+      this.setAttribute("value", value);
+      this._input.setAttribute("value", value);
+    } else {
+      this.removeAttribute("value");
+      this._input.removeAttribute("value");
+    }
+  }
+  /**
+   * @description: 获取 input 的占位字符
+   * @return {String}
+   */
+  get placeholder() {
+    return this.getAttribute("placeholder") || "";
+  }
+  /**
+   * @description: 设置 input 的占位字符
+   * @param {String} value
+   */
+  set placeholder(value) {
+    if (value) {
+      this.setAttribute("placeholder", value);
+    } else {
+      this.removeAttribute("placeholder");
+    }
+  }
+  /**
+   * @description: input 是否为必选
+   * @return {String}
+   */
+  get required() {
+    return this.getAttribute("required") || "";
+  }
+  /**
+   * @description: 设置 input 是否为必选，除非设置成 false，否则都是必填
+   * @param {*} value
+   */
+  set required(value) {
+    if (!value || value === "false") {
+      this.removeAttribute("required");
+    } else {
+      this.setAttribute("required", "");
+    }
+  }
+  /**
+   * @description: 获取 input 上 disabled 属性
+   * @return {String | null}
+   */
+  get disabled() {
+    return `${isDisabled(this)}`;
+  }
+  /**
+   * @description: 设置 input 的 disabled 属性
+   * @param {String} value
+   */
+  set disabled(value) {
+    if (falseList.includes(value)) {
+      this.removeAttribute("disabled");
+      this._input.removeAttribute("disabled");
+      this._inputContent.removeAttribute("disabled");
+    } else {
+      this.setAttribute("disabled", "");
+      this._input.setAttribute("disabled", "");
+      this._inputContent.setAttribute("disabled", "");
+    }
+  }
+  /**
+   * @description: 获取类似于 Metiral Design 的输入体验。
+   */
+  get label() {
+    return this.getAttribute("label") || "";
+  }
+  /**
+   * @description: 设置类似于 Metiral Design 的输入体验。
+   */
+  set label(value) {
+    this.setAttribute("label", value);
+  }
+  /**
+   * @description: 获取 input 框的状态
+   */
+  get status() {
+    return this.getAttribute("status") || "";
+  }
+  /**
+   * @description: 设置 input 框的状态
+   */
+  set status(value) {
+    if (value) {
+      this.setAttribute("status", value);
+      this._input.setAttribute("status", value);
+    } else {
+      this.removeAttribute("status");
+      this._input.removeAttribute("status");
+    }
+  }
+  /**
+   * @description: 与 form 组件联动时，收集的属性名
+   * @return {String}
+   */
+  get name() {
+    return this.getAttribute("name") || "";
+  }
+  /**
+   * @description: 设置 name 属性
+   * @param {string} value
+   */
+  set name(value) {
+    this.setAttribute("name", value);
+  }
+  /**
+   * @description: 当 input 类型为 number 类型时，可以获取 min 属性
+   * @return {String}
+   */
+  get min() {
+    return this.getAttribute("min") || "";
+  }
+  /**
+   * @description: 当 input 类型为 number 类型时，设置 min 属性
+   * @param {string} value
+   */
+  set min(value) {
+    if (this.type === "number") this.setAttribute("min", value);
+  }
+  /**
+   * @description: 当 input 类型为 number 类型时，可以获取 max 属性
+   * @return {String}
+   */
+  get max() {
+    return this.getAttribute("max") || "";
+  }
+  /**
+   * @description: 当 input 类型为 number 类型时，设置 max 属性
+   * @param {string} value
+   */
+  set max(value) {
+    if (this.type === "number") this.setAttribute("max", value);
+  }
+  /**
+   * @description: 当 input 类型为 number 类型时，可以获取 step 属性
+   * @return {String}
+   */
+  get step() {
+    return this.getAttribute("step") || "";
+  }
+  /**
+   * @description: 当 input 类型为 number 类型时，设置 step 属性
+   * @param {string} value
+   */
+  set step(value) {
+    if (this.type === "number") this.setAttribute("step", value);
+  }
+  /**
+   * @description: 获取一个 icon
+   * @return {String}
+   */
+  get icon() {
+    return this.getAttribute("icon") || "";
+  }
+  /**
+   * @description: 设置 icon 来表示标识
+   * @param {string|null} value
+   */
+  set icon(value) {
+    if (value) {
+      this.setAttribute("icon", value);
+    } else {
+      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") || "";
+  }
+  /**
+   * @description: 设置 input 的类型
+   * @param {string|null} value
+   */
+  set type(value) {
+    if (value) {
+      this.setAttribute("type", value);
+    } else {
+      this.removeAttribute("type");
+    }
+  }
+  connectedCallback() {
+    if (this.value) {
+      this._inputContent.value = this.value;
+      this._input.setAttribute("value", this.value);
+    }
+    if (this.status) {
+      this._input.setAttribute("status", this.status);
+    }
+    if (isDisabled(this)) {
+      this._input.setAttribute("disabled", "");
+      this._inputContent.setAttribute("disabled", "");
+    }
+    if (this.type) {
+      this._inputContent.setAttribute("type", this.type);
+    }
+    this._inputContent.addEventListener("input", this.customInput);
+    if (document.readyState === "complete") {
+      this.dealIcon();
+    }
+  }
+  disconnectCallback() {
+    this._inputContent.removeEventListener("input", this.customInput);
+  }
+  attributeChangedCallback(name, oldValue, newValue) {
+    this.listenEvent(name, oldValue, newValue);
+  }
+}
+function Custom() {
+  if (typeof window !== "undefined" && !customElements.get("r-input")) {
+    customElements.define("r-input", Input);
+    return Input;
+  } else {
+    return createCustomError("document is undefined or r-input is exist");
+  }
+}
+const index = Custom();
+const index$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  Input,
+  default: index
+}, Symbol.toStringTag, { value: "Module" }));
+export {
+  Input as I,
+  index as a,
+  index$1 as i
+};

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

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