ranui 0.1.9 → 0.1.10-alpha.1

package/dist/index-F2RO3OU4.js

@@ -0,0 +1,501 @@
+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 { H as HTMLElementSSR, i as isDisabled, f as falseList, c as createCustomError } from "./index-CSnBqUsQ.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: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:flex;align-items:center;justify-content:center}.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}';
+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
+      "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-7216d6b0.js → index-GavQwMDL.js}

@@ -4,22 +4,13 @@ var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
-import { s as str2Xml } from "./index-7913ec46.js";
-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 = ".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 .ran-icon{display:flex}:host([spin]){animation-name:rotate;animation-duration:1.4s;animation-timing-function:linear;animation-iteration-count:infinite}@keyframes rotate{to{transform:rotate(360deg)}}\n";
+import { _ as __variableDynamicImportRuntimeHelper, s as str2Xml } from "./arrow-down-C9jBUUt3.js";
+import "./utils-BMBEcoPj.js";
 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 CustomElement extends HTMLElement {
+  if (typeof window !== "undefined" && !customElements.get("ra-icon")) {
+    class RaIcon extends HTMLElement {
       constructor() {
         super();
         __publicField(this, "_icon");
@@ -29,7 +20,7 @@ function Custom() {
          */
         __publicField(this, "loadLocal", () => {
           return new Promise((resolve, reject) => {
-            __variableDynamicImportRuntimeHelper(/* @__PURE__ */ Object.assign({ "../../assets/icons/add-user.svg": () => import("./add-user-b2bed3e7.js"), "../../assets/icons/arrow-down.svg": () => import("./info-circle-fill-90ec9aa9.js").then((n) => n.a), "../../assets/icons/book.svg": () => import("./book-b11a68eb.js"), "../../assets/icons/check-circle-fill.svg": () => import("./check-circle-fill-dc284144.js"), "../../assets/icons/check-circle.svg": () => import("./check-circle-74bd09c3.js"), "../../assets/icons/close-circle-fill.svg": () => import("./close-circle-fill-238a66b1.js"), "../../assets/icons/close-circle.svg": () => import("./close-circle-720c18be.js"), "../../assets/icons/close.svg": () => import("./close-20925345.js"), "../../assets/icons/eye-close.svg": () => import("./eye-close-3874f1ae.js"), "../../assets/icons/eye.svg": () => import("./eye-5e742329.js"), "../../assets/icons/home.svg": () => import("./home-c4a05e8b.js"), "../../assets/icons/info-circle-fill.svg": () => import("./info-circle-fill-90ec9aa9.js").then((n) => n.i), "../../assets/icons/info-circle.svg": () => import("./info-circle-5826decc.js"), "../../assets/icons/loading.svg": () => import("./loading-09ca52df.js"), "../../assets/icons/lock.svg": () => import("./lock-1d2487c9.js"), "../../assets/icons/message.svg": () => import("./message-b2bfdea7.js"), "../../assets/icons/power-off.svg": () => import("./power-off-6ade5a91.js"), "../../assets/icons/preview.svg": () => import("./preview-b291aea8.js"), "../../assets/icons/setting.svg": () => import("./setting-1e5ccb6d.js"), "../../assets/icons/team.svg": () => import("./team-ca6a12e1.js"), "../../assets/icons/unlock.svg": () => import("./unlock-f56086fd.js"), "../../assets/icons/user.svg": () => import("./user-5c01e665.js"), "../../assets/icons/warning-circle-fill.svg": () => import("./warning-circle-fill-d17c37c9.js"), "../../assets/icons/warning-circle.svg": () => import("./warning-circle-035e025c.js") }), `../../assets/icons/${this.name}.svg`).then((result) => {
+            __variableDynamicImportRuntimeHelper(/* @__PURE__ */ Object.assign({ "../../assets/icons/add-user.svg": () => import("./add-user-BN1JlY7e.js"), "../../assets/icons/arrow-down.svg": () => import("./arrow-down-C9jBUUt3.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`).then((result) => {
               if (result && result.default && result.default._identification) {
                 const { data } = result.default;
                 this._icon && this._div.removeChild(this._icon);
@@ -42,10 +33,8 @@ function Custom() {
                 }
               } else {
                 this.loadNs();
-                reject(
-                  `
- couldn't be loaded by r-icon, message: ${this.name} icon is undefined`
-                );
+                reject(`
+ couldn't be loaded by ra-icon, message: ${this.name} icon is undefined`);
               }
             }).catch((error) => {
               this.loadNs();
@@ -65,11 +54,7 @@ function Custom() {
           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}`
-          );
+          use.setAttributeNS(X_LINKS_NS, X_LINK_HREF, `../../assets/iconfont/icon.svg#icon-${this.name}`);
           this._icon.appendChild(use);
           this._div.appendChild(this._icon);
         });
@@ -108,11 +93,7 @@ function Custom() {
         });
         this._div = document.createElement("div");
         this._div.setAttribute("class", "ran-icon");
-        const shadowRoot = this.attachShadow({ mode: "closed" });
-        const F7170EE498E0DD32CBDCB63FBA8F75CC = document.createElement("style");
-        F7170EE498E0DD32CBDCB63FBA8F75CC.textContent = f7170ee498e0dd32cbdcb63fba8f75cc;
-        shadowRoot.appendChild(F7170EE498E0DD32CBDCB63FBA8F75CC);
-        shadowRoot.appendChild(this._div);
+        this._div.setAttribute("part", "ran-icon");
       }
       static get observedAttributes() {
         return ["name", "size", "color", "spin"];
@@ -146,6 +127,7 @@ function Custom() {
           this.setAttribute("spin", value);
       }
       connectedCallback() {
+        this.appendChild(this._div);
         this.setIcon();
       }
       attributeChangedCallback(name, oldValue, newValue) {
@@ -161,7 +143,7 @@ function Custom() {
         }
       }
     }
-    customElements.define("r-icon", CustomElement);
+    customElements.define("ra-icon", RaIcon);
   }
 }
 const index = Custom();

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

@@ -4,8 +4,8 @@ var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
-const f7170ee498e0dd32cbdcb63fba8f75cc = '.remove-wap-active-focus{outline:0;-webkit-tap-highlight-color:transparent}.remove-wap-active-focus:active,.remove-wap-active-focus:focus{outline:0;-webkit-tap-highlight-color:transparent}:host([type="toast"]){--ranui-message-background: rgba(0, 0, 0, .7);--ranui-message-color: #fff;--ranui-message-border-radius: 7px}.ran-message-notice{padding:8px;text-align:center;max-width:90%;margin:0 auto;word-break:break-all}.ran-message-notice-content{display:inline-block;padding:10px 16px;background:var(--ranui-message-background, #fff);border-radius:var(--ranui-message-border-radius, 8px);box-shadow:0 3px 6px -4px #0000001f,0 6px 16px #00000014,0 9px 28px 8px #0000000d;pointer-events:all}.ran-message-notice-content-info{align-items:center;display:flex}.ran-message-notice-content-info span{margin:0;padding:0;color:var(--ranui-message-color, #000000d9);font-size:14px;font-variant:tabular-nums;list-style:none;font-feature-settings:"tnum";z-index:1010;width:100%;pointer-events:none}@keyframes MessageMoveIn{0%{padding:0;transform:translateY(-100%);opacity:0}to{padding:8px;transform:translateY(0);opacity:1}}@keyframes MessageMoveOut{0%{max-height:150px;padding:8px;opacity:1}to{max-height:0;padding:0;opacity:0}}.ranui-message{box-sizing:border-box;margin:0;padding:0;color:#000000d9;font-size:14px;font-variant:tabular-nums;line-height:1.5715;list-style:none;font-feature-settings:"tnum";position:fixed;top:8px;left:0;z-index:1010;width:100%;pointer-events:none}.ranui-message .message-in{animation-name:MessageMoveIn;animation-duration:.3s;animation-timing-function:cubic-bezier(.78,.14,.15,.86)}.ranui-message .message-leave{animation-name:MessageMoveOut;animation-duration:.3s;animation-timing-function:cubic-bezier(.78,.14,.15,.86)}\n';
-const index$1 = "";
+import "./index-0fvHQjmN.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([type="toast"]){--ranui-message-background: rgba(0, 0, 0, .7);--ranui-message-color: #fff;--ranui-message-border-radius: 7px}.ran-message-notice{padding:8px;text-align:center;max-width:90%;margin:0 auto;word-break:break-all}.ran-message-notice-content{display:inline-block;padding:10px 16px;background:var(--ranui-message-background, #fff);border-radius:var(--ranui-message-border-radius, 8px);box-shadow:0 3px 6px -4px #0000001f,0 6px 16px #00000014,0 9px 28px 8px #0000000d;pointer-events:all}.ran-message-notice-content-info{align-items:center;display:flex}.ran-message-notice-content-info span{margin:0;padding:0;color:var(--ranui-message-color, #000000d9);font-size:14px;font-variant:tabular-nums;list-style:none;font-feature-settings:"tnum";z-index:1010;width:100%;pointer-events:none}@keyframes rotate{to{transform:rotate(360deg)}}@keyframes MessageMoveIn{0%{padding:0;transform:translateY(-100%);opacity:0}to{padding:8px;transform:translateY(0);opacity:1}}@keyframes MessageMoveOut{0%{max-height:150px;padding:8px;opacity:1}to{max-height:0;padding:0;opacity:0}}.ranui-message{box-sizing:border-box;margin:0;padding:0;color:#000000d9;font-size:14px;font-variant:tabular-nums;line-height:1.5715;list-style:none;font-feature-settings:"tnum";position:fixed;top:8px;left:0;z-index:1010;width:100%;pointer-events:none}.ranui-message .message-in{animation-name:MessageMoveIn;animation-duration:.3s;animation-timing-function:cubic-bezier(.78,.14,.15,.86)}.ranui-message .message-leave{animation-name:MessageMoveOut;animation-duration:.3s;animation-timing-function:cubic-bezier(.78,.14,.15,.86)}';
 const AnimationTime = 300;
 const defaultDuration = 3e3;
 const typeMapIcon = /* @__PURE__ */ new Map([

package/dist/index.d.ts

@@ -1,14 +1,18 @@
-export * as button from './components/button';
-export * as icon from './components/icon';
-export * as image from './components/image';
-export * as input from './components/input';
-export * as message from './components/message';
-export * as preview from './components/preview';
-export * as skeleton from './components/skeleton';
-export * as tabpane from './components/tabpane';
-export * as tab from './components/tab';
-export * as radar from './components/radar';
-export * as player from './components/player';
-export * as modal from './components/modal';
-export * as select from './components/select';
-export * as progress from './components/progress';
+export * as button from '@/components/button';
+export * as icon from '@/components/icon';
+export * as image from '@/components/image';
+export * as input from '@/components/input';
+export * as message from '@/components/message';
+export * as preview from '@/components/preview';
+export * as skeleton from '@/components/skeleton';
+export * as tabpane from '@/components/tabpane';
+export * as tab from '@/components/tab';
+export * as radar from '@/components/radar';
+export * as player from '@/components/player';
+export * as modal from '@/components/modal';
+export * as select from '@/components/select';
+export * as progress from '@/components/progress';
+export * as checkbox from '@/components/checkbox';
+export * as colorpicker from '@/components/colorpicker';
+export * as popover from '@/components/popover';
+export * as content from '@/components/content';