ranui 0.1.8 → 0.1.9

package/dist/{index-f6d6982d.js → index-1b73beee.js}

@@ -4,12 +4,12 @@ var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
-import { a as addClassToElement, r as removeClassToElement } from "./index-d2d69b06.js";
+import { a as addClassToElement, r as removeClassToElement, i as isMobile, b as generateThrottle } from "./index-7913ec46.js";
 import { i as isDisabled, c as createCustomError } from "./index-57492b9b.js";
 import "./components/option/index.js";
-import "./index-7f513a14.js";
-import "./index-ecaed5cc.js";
-const f7170ee498e0dd32cbdcb63fba8f75cc = ':host{position:relative;display:inline-block;cursor:pointer;height:32px}:host ::slotted(r-option){display:none}:host([disabled]){cursor:not-allowed;pointer-events:all;opacity:.6}:host([type="text"])::part(selection){border:none}:host([type="text"])::part(icon){display:none}:host(:not([disabled]):hover) .select{cursor:pointer}:host(:not([disabled]):hover) .selection{border:1px solid #1890ff}:host(:not([disabled]):hover) .selection-search{cursor:pointer}:host(:not([disabled]):hover) .selection-item{cursor:pointer;color:#bfbfbf}:host(:not([disabled]):focus) .selection{border:1px solid #1890ff}:host(:not([disabled]):focus) .selection-search{cursor:pointer}:host(:not([disabled]):focus) .selection-item{cursor:pointer;color:#bfbfbf}:host .selection-search{display:none}:host([showSearch]:not([disabled])) .selection-search{cursor:text;display:block}:host([showSearch]:not([disabled])) .selection-item{cursor:pointer}:host([showSearch]:not([disabled]):focus) .selection-search{display:block;cursor:text;opacity:1}.ran-select{width:100%;height:100%;box-sizing:border-box;margin:0;padding:0;color:#000000e0;font-size:14px;line-height:1.57142857;list-style:none;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";position:relative;display:inline-block}.ran-select .selection{position:relative;background-color:#fff;border:1px solid #d9d9d9;transition:all .2s cubic-bezier(.645,.045,.355,1);width:100%;height:100%;padding:0 11px;box-sizing:border-box;margin:0;color:#000000e0;font-size:14px;line-height:1.57142857;list-style:none;font-family:inherit;display:flex;border-radius:6px}.ran-select .selection-search{position:absolute;top:0;left:0;height:100%;inset-inline-start:11px;inset-inline-end:11px;opacity:0;margin:0;padding:0;background:transparent;border:none;outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:inherit;cursor:not-allowed}.ran-select .selection-search::-webkit-search-cancel-button{display:none;-webkit-appearance:none}.ran-select .selection-search::part(ran-input){border:none;padding:0;height:100%;outline:none}.ran-select .selection-search::part(ran-input):active{border:none;padding:0;height:100%;outline:none;border-color:transparent;box-shadow:none;border-right-width:0px}.ran-select .selection-item{position:absolute;top:0;left:12px;margin:0;padding:0;background:transparent;border:none;outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:inherit;height:100%;-webkit-user-select:none;user-select:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;cursor:pointer}.ran-select .selection-select{color:#00000040}.ran-select .selection .icon{display:flex;align-items:center;color:#00000040;font-style:normal;text-align:center;text-transform:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;position:absolute;top:50%;inset-inline-start:auto;inset-inline-end:8px;height:12px;margin-top:-3px;font-size:12px;pointer-events:none}\n';
+import "./index-7216d6b0.js";
+import "./index-1048a998.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;cursor:pointer;height:32px;outline:0;-webkit-tap-highlight-color:transparent}:host,:host(:focus),:host(:active){outline:0;-webkit-tap-highlight-color:transparent}:host ::slotted(r-option){display:none}:host([disabled]){cursor:not-allowed;pointer-events:all;opacity:.6}:host([type="text"])::part(selection){border:none}:host([type="text"])::part(icon){display:none}:host(:not([disabled]):hover) .select{cursor:pointer}:host(:not([disabled]):hover) .selection{border:1px solid #1890ff}:host(:not([disabled]):hover) .selection-search{cursor:pointer}:host(:not([disabled]):hover) .selection-item{cursor:pointer;color:#bfbfbf}:host(:not([disabled]):focus) .selection{border:1px solid #1890ff}:host(:not([disabled]):focus) .selection-search{cursor:pointer}:host(:not([disabled]):focus) .selection-item{cursor:pointer;color:#bfbfbf}:host .selection-search{display:none}:host([showSearch]:not([disabled])) .selection-search{cursor:text;display:block}:host([showSearch]:not([disabled])) .selection-item{cursor:pointer}:host([showSearch]:not([disabled]):focus) .selection-search{display:block;cursor:text;opacity:1}.ran-select{width:100%;height:100%;box-sizing:border-box;margin:0;padding:0;color:#000000e0;font-size:14px;line-height:1.57142857;list-style:none;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";position:relative;display:inline-block}.ran-select .selection{position:relative;background-color:#fff;border:1px solid #d9d9d9;transition:all .2s cubic-bezier(.645,.045,.355,1);width:100%;height:100%;padding:0 11px;box-sizing:border-box;margin:0;color:#000000e0;font-size:14px;line-height:1.57142857;list-style:none;font-family:inherit;display:flex;border-radius:6px}.ran-select .selection-search{position:absolute;top:0;left:0;height:100%;inset-inline-start:11px;inset-inline-end:11px;opacity:0;margin:0;padding:0;background:transparent;border:none;outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:inherit;cursor:not-allowed}.ran-select .selection-search::-webkit-search-cancel-button{display:none;-webkit-appearance:none}.ran-select .selection-search::part(ran-input){border:none;padding:0;height:100%;outline:none}.ran-select .selection-search::part(ran-input):active{border:none;padding:0;height:100%;outline:none;border-color:transparent;box-shadow:none;border-right-width:0px}.ran-select .selection-item{position:absolute;top:0;left:12px;margin:0;padding:0;background:transparent;border:none;outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:inherit;height:100%;-webkit-user-select:none;user-select:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;cursor:pointer}.ran-select .selection-select{color:#00000040}.ran-select .selection .icon{display:flex;align-items:center;color:#00000040;font-style:normal;text-align:center;text-transform:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;position:absolute;top:50%;inset-inline-start:auto;inset-inline-end:8px;height:12px;margin-top:-3px;font-size:12px;pointer-events:none}\n';
 const placementDirection = {
   bottom: {
     add: "ran-select-dropdown-down-in",
@@ -20,6 +20,7 @@ const placementDirection = {
     remove: "ran-select-dropdown-up-out"
   }
 };
+const searchThrottle = generateThrottle();
 class Select extends HTMLElement {
   constructor() {
     super();
@@ -40,6 +41,7 @@ class Select extends HTMLElement {
     __publicField(this, "_activeOption");
     __publicField(this, "_text");
     __publicField(this, "_selector");
+    __publicField(this, "onSearch");
     /**
      * @description: 移除 select dropdown
      * @return {*}
@@ -130,7 +132,8 @@ class Select extends HTMLElement {
       this.placementPosition();
     });
     __publicField(this, "removeDropDownTimeId", () => {
-      if (this.action.includes("hover")) {
+      this._search.setAttribute("value", "");
+      if (this.action.includes("hover") && !isMobile()) {
         clearTimeout(this.removeTimeId);
         this.removeTimeId = void 0;
       }
@@ -169,6 +172,9 @@ class Select extends HTMLElement {
         this._text.setAttribute("title", label);
         this._search.setAttribute("placeholder", label);
       }
+      const rect = this.getBoundingClientRect();
+      const { height } = rect;
+      this._text.style.setProperty("line-height", `${height}px`);
       if (this._activeOption) {
         removeClassToElement(
           this._activeOption,
@@ -196,8 +202,18 @@ class Select extends HTMLElement {
       if (!this._selectDropdown) {
         const container = document.getElementById(this.getPopupContainerId) || document.body;
         this._selectDropdown = document.createElement("div");
+        this._selectDropdown.style.setProperty(
+          "-webkit-tap-highlight-color",
+          "transparent"
+        );
+        this._selectDropdown.style.setProperty("outline", "0");
         this._selectDropdown.addEventListener("click", this.clickOption);
         this._selectionDropdown = document.createElement("div");
+        this._selectionDropdown.style.setProperty(
+          "-webkit-tap-highlight-color",
+          "transparent"
+        );
+        this._selectionDropdown.style.setProperty("outline", "0");
         if (this.dropdownclass) {
           this._selectionDropdown.setAttribute(
             "class",
@@ -206,7 +222,7 @@ class Select extends HTMLElement {
         } else {
           this._selectionDropdown.setAttribute("class", "ranui-select-dropdown");
         }
-        if (this.action.includes("hover")) {
+        if (this.action.includes("hover") && !isMobile()) {
           this._selectDropdown.addEventListener("mouseleave", this.selectBlur);
           this._selectDropdown.addEventListener(
             "mouseenter",
@@ -253,7 +269,16 @@ class Select extends HTMLElement {
         this._optionLabelMapValue.set(label, value);
         this._optionValueMapLabel.set(value, label);
       });
-      this._optionList.forEach((item) => {
+      this.createSelectDropdownContent(this._optionList);
+    });
+    __publicField(this, "createSelectDropdownContent", (options = []) => {
+      var _a, _b;
+      if (options.length === 0) {
+        (_a = this._selectDropdown) == null ? void 0 : _a.style.setProperty("display", "none");
+      } else {
+        (_b = this._selectDropdown) == null ? void 0 : _b.style.setProperty("display", "block");
+      }
+      options.forEach((item) => {
         if (this._selectionDropdown) {
           const { label, value } = item;
           const selectOptionItem = document.createElement("div");
@@ -299,9 +324,36 @@ class Select extends HTMLElement {
       this._text.setAttribute("title", label);
     });
     __publicField(this, "changeSearch", (e) => {
+      const value = e.detail.value || "";
+      this.dispatchEvent(
+        new CustomEvent("search", {
+          detail: { value }
+        })
+      );
+      if (this._selectionDropdown) {
+        this._selectionDropdown.innerHTML = "";
+      }
+      if (value.length > 0) {
+        const options = this._optionList.map((item) => {
+          const { label } = item;
+          if (`${label}`.toLowerCase().includes(value)) {
+            return { label, value: item.value };
+          }
+          return void 0;
+        }).filter((item) => item);
+        this.createSelectDropdownContent(options);
+      } else {
+        this.createSelectDropdownContent(this._optionList);
+      }
     });
     __publicField(this, "setShowSearch", () => {
-      this._search.addEventListener("change", this.changeSearch);
+      this.onSearch = searchThrottle(this.changeSearch);
+      this._search.addEventListener("change", this.onSearch);
+      this._search.addEventListener("click", this.onSearch);
+    });
+    __publicField(this, "removeShowSearch", () => {
+      this._search.removeEventListener("change", this.onSearch);
+      this._search.removeEventListener("click", this.onSearch);
     });
     __publicField(this, "listenSlotChange", () => {
       this._slot.addEventListener("slotchange", this.addOptionToSlot);
@@ -312,14 +364,14 @@ class Select extends HTMLElement {
     __publicField(this, "listenActionEvent", () => {
       this.removeEventListener("mouseenter", this.selectMouseDown);
       this.removeEventListener("mouseleave", this.selectBlur);
-      this.removeEventListener("mousedown", this.selectMouseDown);
+      this.removeEventListener("click", this.selectMouseDown);
       this.removeEventListener("blur", this.selectBlur);
-      if (this.action.includes("hover")) {
+      if (this.action.includes("hover") && !isMobile()) {
         this.addEventListener("mouseenter", this.selectMouseDown);
         this.addEventListener("mouseleave", this.selectBlur);
       }
       if (this.action.includes("click")) {
-        this.addEventListener("mousedown", this.selectMouseDown);
+        this.addEventListener("click", this.selectMouseDown);
         this.addEventListener("blur", this.selectBlur);
       }
     });
@@ -377,7 +429,7 @@ class Select extends HTMLElement {
       "dropdownclass",
       // 弹窗的类名
       "action"
-      // 触发下拉框的行为，click还是hover
+      // 触发下拉框的行为， click 还是 hover ，hover 在 isMobile 移动端无效
     ];
   }
   get value() {
@@ -474,7 +526,7 @@ class Select extends HTMLElement {
     var _a;
     this.removeEventListener("mouseenter", this.selectMouseDown);
     this.removeEventListener("mouseleave", this.selectBlur);
-    this.removeEventListener("mousedown", this.selectMouseDown);
+    this.removeEventListener("click", this.selectMouseDown);
     this.removeEventListener("blur", this.selectBlur);
     this.removeSelectDropdown();
     (_a = this._selectDropdown) == null ? void 0 : _a.removeEventListener("click", this.clickOption);

package/dist/index-2d16a084.js

@@ -0,0 +1,197 @@
+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 {
+  constructor() {
+    super();
+    __publicField(this, "_btn");
+    __publicField(this, "_btnContent");
+    __publicField(this, "_iconElement");
+    __publicField(this, "_slot");
+    __publicField(this, "_shadowDom");
+    __publicField(this, "debounceTimeId");
+    /**
+     * @description: 设置button的icon
+     * @return {*}
+     */
+    __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);
+        } else {
+          this._iconElement = document.createElement("r-icon");
+          this._iconElement.setAttribute("name", this.icon);
+          this._iconElement.setAttribute("color", "currentColor");
+          this._iconElement.setAttribute("class", "icon");
+          this._slot.insertAdjacentElement("beforebegin", this._iconElement);
+        }
+        if (this.iconSize) {
+          this._iconElement.setAttribute("size", this.iconSize);
+        } else {
+          this._iconElement.setAttribute("size", `${size - 5}`);
+        }
+      }
+    });
+    __publicField(this, "mousedown", (event) => {
+      if (judgeDevice() !== "pc")
+        return;
+      if (!this.disabled || this.disabled === "false") {
+        this.debounceMouseEvent();
+        const { left, top } = this.getBoundingClientRect();
+        this._btn.style.setProperty("--ran-x", event.clientX - left + "px");
+        this._btn.style.setProperty("--ran-y", event.clientY - top + "px");
+      }
+    });
+    __publicField(this, "mouseup", (event) => {
+      if (judgeDevice() !== "pc")
+        return;
+      if (this.debounceTimeId)
+        return;
+      this.debounceTimeId = setTimeout(() => {
+        this._btn.style.removeProperty("--ran-x");
+        this._btn.style.removeProperty("--ran-y");
+        this.debounceMouseEvent();
+      }, 600);
+    });
+    __publicField(this, "debounceMouseEvent", () => {
+      clearTimeout(this.debounceTimeId);
+      this.debounceTimeId = void 0;
+    });
+    __publicField(this, "handlerExternalCss", () => {
+      if (this.sheet) {
+        try {
+          const sheet = new CSSStyleSheet();
+          sheet.insertRule(this.sheet);
+          this._shadowDom.adoptedStyleSheets = [sheet];
+        } catch (error) {
+          console.error(
+            `Failed to parse the rule in CSSStyleSheet: ${this.sheet}`
+          );
+        }
+      }
+    });
+    this._slot = document.createElement("slot");
+    this._btnContent = document.createElement("div");
+    this._btn = document.createElement("div");
+    this._btn.setAttribute("class", "ran-btn");
+    this._btn.setAttribute("part", "ran-btn");
+    this._btnContent.setAttribute("class", "ran-btn-content");
+    this._btnContent.setAttribute("part", "ran-btn-content");
+    this._btnContent.appendChild(this._slot);
+    this._slot.setAttribute("class", "slot");
+    const shadowRoot = this.attachShadow({ mode: "closed" });
+    const F7170EE498E0DD32CBDCB63FBA8F75CC = document.createElement("style");
+    F7170EE498E0DD32CBDCB63FBA8F75CC.textContent = f7170ee498e0dd32cbdcb63fba8f75cc;
+    shadowRoot.appendChild(F7170EE498E0DD32CBDCB63FBA8F75CC);
+    this._shadowDom = shadowRoot;
+    this._btn.appendChild(this._btnContent);
+    shadowRoot.appendChild(this._btn);
+  }
+  static get observedAttributes() {
+    return ["disabled", "icon", "effect", "iconSize", "sheet"];
+  }
+  get sheet() {
+    return this.getAttribute("sheet") || "";
+  }
+  set sheet(value) {
+    this.setAttribute("sheet", value || "");
+  }
+  get disabled() {
+    return isDisabled(this);
+  }
+  set disabled(value) {
+    if (!value || value === "false") {
+      this.removeAttribute("disabled");
+      this.removeAttribute("aria-disabled");
+    } else {
+      this.setAttribute("disabled", "");
+      this.setAttribute("aria-disabled", "true");
+    }
+  }
+  get iconSize() {
+    return this.getAttribute("iconSize") || "";
+  }
+  set iconSize(value) {
+    if (!value || value === "false") {
+      this.removeAttribute("iconSize");
+    } else {
+      this.setAttribute("iconSize", value);
+      this.setIcon();
+    }
+  }
+  get icon() {
+    return this.getAttribute("icon") || "";
+  }
+  set icon(value) {
+    if (!value || value === "false") {
+      this.removeAttribute("icon");
+    } else {
+      this.setAttribute("icon", value);
+      this.setIcon();
+    }
+  }
+  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("mouseup", this.mouseup);
+    this.handlerExternalCss();
+    this.setIcon();
+    this.setAttribute("role", "button");
+    this.setAttribute("tabindex", "0");
+  }
+  disconnectCallback() {
+    this._btn.removeEventListener("mousedown", this.mousedown);
+    this._btn.removeEventListener("mouseup", this.mouseup);
+  }
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (name === "disabled" && this._btnContent) {
+      if (!newValue || newValue === "false") {
+        this._btnContent.setAttribute("disabled", "");
+      } else {
+        this._btnContent.removeAttribute("disabled");
+      }
+    }
+    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();
+  }
+}
+function Custom() {
+  if (typeof document !== "undefined" && !customElements.get("r-button")) {
+    customElements.define("r-button", Button);
+    return Button;
+  } else {
+    return createCustomError("document is undefined or r-button is exist");
+  }
+}
+const index = Custom();
+const index$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  Button,
+  default: index
+}, Symbol.toStringTag, { value: "Module" }));
+export {
+  Button as B,
+  index as a,
+  index$1 as i
+};

package/dist/{index-0e7229ea.js → index-3cf72afd.js}

@@ -4,9 +4,9 @@ var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
-import { a as addClassToElement } from "./index-d2d69b06.js";
+import { c as createDocumentFragment, a as addClassToElement } from "./index-7913ec46.js";
 import { i as isDisabled, r as removeClassToElementChild } from "./index-57492b9b.js";
-const f7170ee498e0dd32cbdcb63fba8f75cc = '.ran-tab ::slotted(r-tab){box-sizing:border-box;width:100%;height:100%;padding:10px;flex-shrink:0;overflow:auto;text-align:start}.ran-tab-header{position:relative;overflow:hidden;scroll-behavior:smooth}.ran-tab-header-nav{display:flex;flex-flow:row nowrap;justify-content:flex-start;align-items:center}.ran-tab-header-nav::-webkit-scrollbar{display:none}.ran-tab-header-nav-item{flex-shrink:0}.ran-tab-header-nav .active{color:var(--active-color, #1890ff)}.ran-tab-header-line{position:absolute;width:0;margin-top:-2px;height:2px;border-radius:2px;background:var(--line-color, #1890ff);transition:.2s}.ran-tab-content{overflow:hidden}.ran-tab-content-wrap{display:flex;width:100%;height:100%;transition:.2s}:host([type="line"]) .ran-tab-header-nav-item{border:solid 1px transparent}:host([type="line"]) .ran-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"]) .ran-tab-header-line{transition:none;visibility:hidden}:host([type="line"]) .ran-tab-header-line:after,:host([type="line"]) .ran-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"]) .ran-tab-header-line:after{left:100%}:host([type="line"]) .ran-tab-header-line:before{right:100%}:host([align="center"]) .ran-tab-header-nav{justify-content:center}:host([align="center"]) .ran-tab-header-line{left:50%}:host([align="end"]) .ran-tab-header-nav{justify-content:flex-end}\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}.ran-tab ::slotted(r-tab){box-sizing:border-box;width:100%;height:100%;padding:10px;flex-shrink:0;overflow:auto;text-align:start}.ran-tab-header{position:relative;overflow:hidden;scroll-behavior:smooth}.ran-tab-header-nav{display:flex;flex-flow:row nowrap;justify-content:flex-start;align-items:center}.ran-tab-header-nav::-webkit-scrollbar{display:none}.ran-tab-header-nav-item{flex-shrink:0}.ran-tab-header-nav .active{color:var(--active-color, #1890ff)}.ran-tab-header-line{position:absolute;width:0;margin-top:-2px;height:2px;border-radius:2px;background:var(--line-color, #1890ff);transition:.2s}.ran-tab-content{overflow:hidden}.ran-tab-content-wrap{display:flex;width:100%;height:100%;transition:.2s}:host([type="line"]) .ran-tab-header-nav-item{border:solid 1px transparent}:host([type="line"]) .ran-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"]) .ran-tab-header-line{transition:none;visibility:hidden}:host([type="line"]) .ran-tab-header-line:after,:host([type="line"]) .ran-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"]) .ran-tab-header-line:after{left:100%}:host([type="line"]) .ran-tab-header-line:before{right:100%}:host([align="center"]) .ran-tab-header-nav{justify-content:center}:host([align="center"]) .ran-tab-header-line{left:50%}:host([align="end"]) .ran-tab-header-nav{justify-content:flex-end}\n';
 function CustomElement() {
   if (typeof window !== "undefined" && !customElements.get("r-tabs")) {
     class Tabs extends HTMLElement {
@@ -200,10 +200,12 @@ function CustomElement() {
         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._header.appendChild(
+          createDocumentFragment([this._nav, this._line])
+        );
+        this._container.appendChild(
+          createDocumentFragment([this._header, this._content])
+        );
         this.tabHeaderKeyMapIndex = {};
         const shadowRoot = this.attachShadow({ mode: "closed" });
         const F7170EE498E0DD32CBDCB63FBA8F75CC = document.createElement("style");

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

@@ -4,7 +4,7 @@ var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
-import { p as perToNum } from "./index-d2d69b06.js";
+import { p as perToNum } from "./index-7913ec46.js";
 import { c as createCustomError } from "./index-57492b9b.js";
 const index$2 = "";
 const attributes = ["percent", "type", "total", "dot"];

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

@@ -4,9 +4,9 @@ var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
-import { g as getPixelRatio } from "./index-d2d69b06.js";
+import { g as getPixelRatio } from "./index-7913ec46.js";
 import { c as createCustomError } from "./index-57492b9b.js";
-const f7170ee498e0dd32cbdcb63fba8f75cc = ".ran-radar{position:relative;width:100%;height:100%;display:block}\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}.ran-radar{position:relative;width:100%;height:100%;display:block}\n";
 const BACKGROUND_COLOR = "rgba(0,0,0,0)";
 const FONT_COLOR = "rgba(0,0,0,1)";
 const POLYGON_COLOR = "#e6e6e6";

package/dist/{index-7f513a14.js → index-7216d6b0.js}

@@ -4,7 +4,7 @@ var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
-import { s as str2Xml } from "./index-d2d69b06.js";
+import { s as str2Xml } from "./index-7913ec46.js";
 const __variableDynamicImportRuntimeHelper = (glob, path) => {
   const v = glob[path];
   if (v) {
@@ -14,7 +14,7 @@ const __variableDynamicImportRuntimeHelper = (glob, path) => {
     (typeof queueMicrotask === "function" ? queueMicrotask : setTimeout)(reject.bind(null, new Error("Unknown variable dynamic import: " + path)));
   });
 };
-const f7170ee498e0dd32cbdcb63fba8f75cc = ":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";
+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";
 const X_LINKS_NS = "http://www.w3.org/1999/xlink";
 const X_LINK_HREF = "xlink:href";
 function Custom() {