ranui 0.1.9 → 0.1.10-alpha.1

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

@@ -4,10 +4,10 @@ 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 {
+import { c as currentDevice } from "./utils-BMBEcoPj.js";
+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}: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:relative;display:inline-block;background-image:none;cursor:pointer;transition:all .3s cubic-bezier(.645,.045,.355,1);-webkit-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:var(--ran-btn-content-hover-border-color, #1890ff);color:var(--ran-btn-content-hover-color, #1890ff)}: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%))}: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"]) .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}';
+class Button extends HTMLElementSSR() {
   constructor() {
     super();
     __publicField(this, "_btn");
@@ -17,7 +17,7 @@ class Button extends HTMLElement {
     __publicField(this, "_shadowDom");
     __publicField(this, "debounceTimeId");
     /**
-     * @description: 设置button的icon
+     * @description: 设置 button 的 icon
      * @return {*}
      */
     __publicField(this, "setIcon", () => {
@@ -41,7 +41,7 @@ class Button extends HTMLElement {
       }
     });
     __publicField(this, "mousedown", (event) => {
-      if (judgeDevice() !== "pc")
+      if (currentDevice() !== "pc")
         return;
       if (!this.disabled || this.disabled === "false") {
         this.debounceMouseEvent();
@@ -51,7 +51,7 @@ class Button extends HTMLElement {
       }
     });
     __publicField(this, "mouseup", (event) => {
-      if (judgeDevice() !== "pc")
+      if (currentDevice() !== "pc")
         return;
       if (this.debounceTimeId)
         return;
@@ -72,9 +72,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}`);
         }
       }
     });

package/dist/{index-e03d23e7.js → index-BpOERe9M.js}

@@ -4,7 +4,7 @@ var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
-const f7170ee498e0dd32cbdcb63fba8f75cc = '.remove-wap-active-focus{outline:0;-webkit-tap-highlight-color:transparent}.remove-wap-active-focus:active,.remove-wap-active-focus:focus{outline:0;-webkit-tap-highlight-color:transparent}@keyframes skeleton{0%{transform:translate(-37.5%)}to{transform:translate(37.5%)}}.ran-skeleton{position:relative;z-index:0;overflow:hidden;background:0 0;width:100%;height:16px;background:rgba(0,0,0,.06);border-radius:4px}.ran-skeleton:after{position:absolute;top:0;inset-inline-end:-150%;bottom:0;inset-inline-start:-150%;background:linear-gradient(90deg,rgba(0,0,0,.06) 25%,rgba(0,0,0,.15) 37%,rgba(0,0,0,.06) 63%);animation-name:skeleton;animation-duration:1.4s;animation-timing-function:ease;animation-iteration-count:infinite;content:""}\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}@keyframes skeleton{0%{transform:translate(-37.5%)}to{transform:translate(37.5%)}}.ran-skeleton{position:relative;z-index:0;overflow:hidden;background:0 0;width:100%;height:16px;background:#0000000f;border-radius:4px}.ran-skeleton:after{position:absolute;top:0;inset-inline-end:-150%;bottom:0;inset-inline-start:-150%;background:linear-gradient(90deg,#0000000f 25%,#00000026 37%,#0000000f 63%);animation-name:skeleton;animation-duration:1.4s;animation-timing-function:ease;animation-iteration-count:infinite;content:""}';
 function Skeleton() {
   if (typeof window !== "undefined" && !customElements.get("r-skeleton")) {
     class CustomElement extends HTMLElement {

package/dist/index-Bv6Z6rIe.js

@@ -0,0 +1,498 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+import { a as addClassToElement, r as removeClassToElement, i as isMobile, d as generateThrottle } from "./utils-BMBEcoPj.js";
+import { H as HTMLElementSSR, i as isDisabled, c as createCustomError } from "./index-CSnBqUsQ.js";
+import "./option.js";
+import "./index-GavQwMDL.js";
+import "./index-CFnsLnrb.js";
+const placementDirection = {
+  bottom: {
+    add: "ran-select-dropdown-down-in",
+    remove: "ran-select-dropdown-down-out"
+  },
+  top: {
+    add: "ran-select-dropdown-up-in",
+    remove: "ran-select-dropdown-up-out"
+  }
+};
+const searchThrottle = generateThrottle();
+class Select extends HTMLElementSSR() {
+  constructor() {
+    super();
+    __publicField(this, "removeTimeId");
+    __publicField(this, "_select");
+    __publicField(this, "_selection");
+    __publicField(this, "_search");
+    __publicField(this, "_icon");
+    __publicField(this, "_selectDropdown");
+    __publicField(this, "_selectionDropdown");
+    __publicField(this, "_selectDropDownInTimeId");
+    __publicField(this, "_selectDropDownOutTimeId");
+    __publicField(this, "_optionList");
+    __publicField(this, "_optionLabelMapValue");
+    __publicField(this, "_optionValueMapLabel");
+    __publicField(this, "_activeOption");
+    __publicField(this, "_text");
+    __publicField(this, "_selector");
+    __publicField(this, "onSearch");
+    /**
+     * @description: 移除 select dropdown
+     * @return {*}
+     */
+    __publicField(this, "setSelectDropdownDisplayNone", () => {
+      if (this._selectDropDownOutTimeId)
+        return;
+      if (this._selectionDropdown && this._selectionDropdown.style.display !== "none") {
+        addClassToElement(this._selectionDropdown, placementDirection[this.placement].remove);
+        this._selectDropDownOutTimeId = setTimeout(() => {
+          var _a;
+          (_a = this._selectionDropdown) == null ? void 0 : _a.style.setProperty("display", "none");
+          this._selectionDropdown && removeClassToElement(this._selectionDropdown, placementDirection[this.placement].remove);
+          clearTimeout(this._selectDropDownOutTimeId);
+          this._selectDropDownOutTimeId = void 0;
+        }, 300);
+      }
+    });
+    /**
+     * @description: 添加 select dropdown
+     * @return {*}
+     */
+    __publicField(this, "setSelectDropdownDisplayBlock", () => {
+      var _a;
+      if (this._selectDropDownInTimeId)
+        return;
+      if (this._selectionDropdown && this._selectionDropdown.style.display !== "block") {
+        addClassToElement(this._selectionDropdown, placementDirection[this.placement].add);
+        (_a = this._selectionDropdown) == null ? void 0 : _a.style.setProperty("display", "block");
+        this._selectDropDownInTimeId = setTimeout(() => {
+          this._selectionDropdown && removeClassToElement(this._selectionDropdown, placementDirection[this.placement].add);
+          clearTimeout(this._selectDropDownInTimeId);
+          this._selectDropDownInTimeId = void 0;
+        }, 200);
+      }
+    });
+    __publicField(this, "placementPosition", () => {
+      if (!this._selectionDropdown || !this._selectDropdown)
+        return;
+      const rect = this.getBoundingClientRect();
+      const { top, left, bottom, width, height, x, y, right } = rect;
+      const root = document.getElementById(this.getPopupContainerId);
+      this._selectionDropdown.style.setProperty("--ran-x", `${top + window.scrollX}`);
+      this._selectionDropdown.style.setProperty("--ran-y", `${left + window.scrollY}`);
+      let selectTop = bottom + window.scrollY;
+      let selectLeft = left + window.scrollX;
+      this._selectionDropdown.style.setProperty("width", `${width}px`);
+      if (this.placement === "top") {
+        selectTop = top + window.scrollY - this._selectionDropdown.clientHeight;
+      }
+      if (this.getPopupContainerId && root) {
+        if (this.placement === "top") {
+          selectTop = top - root.getBoundingClientRect().top - this._selectionDropdown.clientHeight;
+        } else {
+          selectTop = root.getBoundingClientRect().height;
+        }
+        selectLeft = 0;
+      }
+      this._selectionDropdown.style.setProperty("inset", `${selectTop}px auto auto ${selectLeft}px`);
+    });
+    /**
+     * @description: 设置下拉框
+     * @return {*}
+     */
+    __publicField(this, "selectMouseDown", (e) => {
+      e.stopPropagation();
+      if (isDisabled(this))
+        return;
+      this.removeDropDownTimeId();
+      this.setSelectDropdownDisplayNone();
+      this.setSelectDropdownDisplayBlock();
+      this.placementPosition();
+    });
+    __publicField(this, "removeDropDownTimeId", () => {
+      this._search.setAttribute("value", "");
+      if (this.trigger.includes("hover") && !isMobile()) {
+        clearTimeout(this.removeTimeId);
+        this.removeTimeId = void 0;
+      }
+    });
+    /**
+     * @description: 焦点移除的情况，需要移除select 下拉框
+     * @return {*}
+     */
+    __publicField(this, "selectBlur", () => {
+      if (this.removeTimeId) {
+        this.removeDropDownTimeId();
+      }
+      this.removeTimeId = setTimeout(() => {
+        this.removeDropDownTimeId();
+        this.setSelectDropdownDisplayNone();
+      }, 100);
+    });
+    /**
+     * @description: 选中一个选项的情况
+     * @param {MouseEvent} e
+     * @return {*}
+     */
+    __publicField(this, "clickOption", (e) => {
+      var _a, _b;
+      e.stopPropagation();
+      let element = e.target;
+      if ((_a = element.classList) == null ? void 0 : _a.contains("ranui-select-dropdown-option-item")) {
+        element = element.children[0];
+      }
+      if (!((_b = element.classList) == null ? void 0 : _b.contains("ranui-select-dropdown-option-item-content")))
+        return;
+      const label = element.innerHTML;
+      const value = this._optionLabelMapValue.get(label);
+      if (value) {
+        this.setAttribute("value", value);
+        this._text.innerHTML = label;
+        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, "ranui-select-dropdown-option-active");
+      }
+      setTimeout(() => {
+        this._activeOption = (element == null ? void 0 : element.parentElement) || void 0;
+        if (this._activeOption) {
+          addClassToElement(this._activeOption, "ranui-select-dropdown-option-active");
+        }
+      }, 200);
+      this.setSelectDropdownDisplayNone();
+      this.dispatchEvent(new CustomEvent("change", { detail: { value, label } }));
+      this.removeDropDownTimeId();
+    });
+    /**
+     * @description: 初始化创建选项下拉框
+     * @return {*}
+     */
+    __publicField(this, "createOption", () => {
+      if (!this._selectDropdown) {
+        this.appendChild(this._select);
+        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", `${this.dropdownclass} ranui-select-dropdown`);
+        } else {
+          this._selectionDropdown.setAttribute("class", "ranui-select-dropdown");
+        }
+        if (this.trigger.includes("hover") && !isMobile()) {
+          this._selectDropdown.addEventListener("mouseleave", this.selectBlur);
+          this._selectDropdown.addEventListener("mouseenter", this.removeDropDownTimeId);
+        }
+        this._selectDropdown.appendChild(this._selectionDropdown);
+        this._selectionDropdown.style.setProperty("display", "none");
+        container.appendChild(this._selectDropdown);
+      }
+      this.addOptionToSlot();
+    });
+    /**
+     * @description: 移除选项下拉框
+     * @return {*}
+     */
+    __publicField(this, "removeSelectDropdown", () => {
+      try {
+        if (this._selectDropdown) {
+          const container = document.getElementById(this.getPopupContainerId) || document.body;
+          container.removeChild(this._selectDropdown);
+        }
+      } catch (error) {
+      }
+    });
+    /**
+     * @description: 当select中有option元素的时候，给dropdown添加元素
+     * @return {*}
+     */
+    __publicField(this, "addOptionToSlot", () => {
+      var _a;
+      const child = this.children || [];
+      this._optionList = [];
+      for (const item of child) {
+        if (item.tagName === "R-OPTION") {
+          const label = item.innerHTML;
+          const value = item.getAttribute("value") || "";
+          (_a = this._optionList) == null ? void 0 : _a.push({ label, value });
+          this._optionLabelMapValue.set(label, value);
+          this._optionValueMapLabel.set(value, label);
+        }
+      }
+      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");
+      }
+      if (this._selectionDropdown) {
+        this._selectionDropdown.innerHTML = "";
+      }
+      options.forEach((item) => {
+        if (this._selectionDropdown) {
+          const { label, value } = item;
+          const selectOptionItem = document.createElement("div");
+          const defaultValue = this.getAttribute("defaultValue") || this.getAttribute("value");
+          if (defaultValue === value) {
+            selectOptionItem.setAttribute(
+              "class",
+              "ranui-select-dropdown-option-active ranui-select-dropdown-option-item"
+            );
+            this._activeOption = selectOptionItem;
+          } else {
+            selectOptionItem.setAttribute("class", "ranui-select-dropdown-option-item");
+          }
+          const selectOptionItemContent = document.createElement("div");
+          selectOptionItemContent.setAttribute("class", "ranui-select-dropdown-option-item-content");
+          selectOptionItemContent.innerHTML = `${label}`;
+          selectOptionItemContent.setAttribute("value", `${value}`);
+          selectOptionItemContent.setAttribute("title", `${label}`);
+          selectOptionItem.appendChild(selectOptionItemContent);
+          this._selectionDropdown.appendChild(selectOptionItem);
+        }
+      });
+      this.setDefaultValue();
+    });
+    __publicField(this, "setDefaultValue", () => {
+      const defaultValue = this.getAttribute("defaultValue") || this.getAttribute("value");
+      if (!defaultValue)
+        return;
+      const label = this._optionValueMapLabel.get(defaultValue);
+      if (!label)
+        return;
+      this.setAttribute("value", defaultValue);
+      const rect = this.getBoundingClientRect();
+      const { height } = rect;
+      this._text.style.setProperty("line-height", `${height}px`);
+      this._text.innerHTML = label;
+      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.onSearch = searchThrottle(this.changeSearch);
+      this.onSearch && this._search.addEventListener("change", this.onSearch);
+      this.onSearch && this._search.addEventListener("click", this.onSearch);
+    });
+    __publicField(this, "removeShowSearch", () => {
+      this.onSearch && this._search.removeEventListener("change", this.onSearch);
+      this.onSearch && this._search.removeEventListener("click", this.onSearch);
+    });
+    __publicField(this, "listenActionEvent", () => {
+      this.removeEventListener("mouseenter", this.selectMouseDown);
+      this.removeEventListener("mouseleave", this.selectBlur);
+      this.removeEventListener("click", this.selectMouseDown);
+      this.removeEventListener("blur", this.selectBlur);
+      if (this.trigger.includes("hover") && !isMobile()) {
+        this.addEventListener("mouseenter", this.selectMouseDown);
+        this.addEventListener("mouseleave", this.selectBlur);
+      }
+      if (this.trigger.includes("click")) {
+        this.addEventListener("click", this.selectMouseDown);
+        this.addEventListener("blur", this.selectBlur);
+      }
+    });
+    __publicField(this, "clickRemoveSelect", (e) => {
+      e.stopPropagation();
+      this.setSelectDropdownDisplayNone();
+    });
+    this._select = document.createElement("div");
+    this._select.setAttribute("class", "ran-select");
+    this._select.setAttribute("part", "select");
+    this._selection = document.createElement("div");
+    this._selection.setAttribute("class", "selection");
+    this._selection.setAttribute("part", "selection");
+    this._selector = document.createElement("div");
+    this._search = document.createElement("ra-input");
+    this._search.setAttribute("class", "selection-search");
+    this._search.setAttribute("part", "search");
+    this._search.setAttribute("type", "search");
+    this._search.setAttribute("autocomplete", "off");
+    this._text = document.createElement("span");
+    this._text.setAttribute("class", "selection-item");
+    this._text.setAttribute("part", "selection-item");
+    this._icon = document.createElement("ra-icon");
+    this._icon.setAttribute("class", "icon");
+    this._icon.setAttribute("part", "icon");
+    this._icon.setAttribute("name", "arrow-down");
+    this._icon.setAttribute("color", "#d9d9d9");
+    this._icon.setAttribute("size", "16");
+    this._selector.appendChild(this._text);
+    this._selector.appendChild(this._search);
+    this._selection.appendChild(this._icon);
+    this._selection.appendChild(this._selector);
+    this._select.appendChild(this._selection);
+    this._optionList = [];
+    this._optionLabelMapValue = /* @__PURE__ */ new Map();
+    this._optionValueMapLabel = /* @__PURE__ */ new Map();
+  }
+  static get observedAttributes() {
+    return [
+      "disabled",
+      "sheet",
+      "clear",
+      "type",
+      "defaultValue",
+      "showSearch",
+      "placement",
+      // 弹窗的方向
+      "getPopupContainerId",
+      // 挂载的节点
+      "dropdownclass",
+      // 弹窗的类名
+      "trigger"
+      // 触发下拉框的行为， click 还是 hover ，hover 在 isMobile 移动端无效
+    ];
+  }
+  get value() {
+    return this.getAttribute("value") || "";
+  }
+  set value(value) {
+    if (!isDisabled(this) && value) {
+      this.setAttribute("value", value);
+    } else {
+      this.removeAttribute("value");
+    }
+  }
+  get defaultValue() {
+    return this.getAttribute("defaultValue") || "";
+  }
+  set defaultValue(value) {
+    this.setAttribute("defaultValue", value || "");
+  }
+  get showSearch() {
+    return this.getAttribute("showSearch") || "";
+  }
+  set showSearch(value) {
+    this.setAttribute("showSearch", value || "");
+  }
+  get type() {
+    return this.getAttribute("type") || "";
+  }
+  set type(value) {
+    this.setAttribute("type", value || "");
+  }
+  get placement() {
+    return this.getAttribute("placement") || "bottom";
+  }
+  set placement(value) {
+    this.setAttribute("placement", value || "");
+  }
+  get sheet() {
+    return this.getAttribute("sheet") || "";
+  }
+  set sheet(value) {
+    this.setAttribute("sheet", value || "");
+  }
+  get getPopupContainerId() {
+    return this.getAttribute("getPopupContainerId") || "";
+  }
+  set getPopupContainerId(value) {
+    this.setAttribute("getPopupContainerId", value || "");
+  }
+  get dropdownclass() {
+    return this.getAttribute("dropdownclass") || "";
+  }
+  set dropdownclass(value) {
+    this.setAttribute("dropdownclass", value || "");
+  }
+  get trigger() {
+    return this.getAttribute("trigger") || "click";
+  }
+  set trigger(value) {
+    this.setAttribute("trigger", value || "");
+  }
+  get disabled() {
+    return isDisabled(this);
+  }
+  set disabled(value) {
+    if (!value || value === "false") {
+      this.removeAttribute("disabled");
+      this._selection.removeAttribute("disabled");
+    } else {
+      this.setAttribute("disabled", "");
+      this._selection.setAttribute("disabled", "");
+    }
+  }
+  connectedCallback() {
+    this.createOption();
+    this.listenActionEvent();
+    this.setShowSearch();
+    document.addEventListener("click", this.clickRemoveSelect);
+  }
+  disconnectCallback() {
+    var _a;
+    this.removeEventListener("mouseenter", this.selectMouseDown);
+    this.removeEventListener("mouseleave", this.selectBlur);
+    this.removeEventListener("click", this.selectMouseDown);
+    this.removeEventListener("blur", this.selectBlur);
+    this.removeSelectDropdown();
+    (_a = this._selectDropdown) == null ? void 0 : _a.removeEventListener("click", this.clickOption);
+    document.removeEventListener("click", this.clickRemoveSelect);
+  }
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (name === "disabled" && this._select) {
+      if (!newValue || newValue === "false") {
+        this._select.setAttribute("disabled", "");
+        this._selection.setAttribute("disabled", "");
+      } else {
+        this._select.removeAttribute("disabled");
+        this._selection.removeAttribute("disabled");
+      }
+    }
+  }
+}
+function Custom() {
+  if (typeof document !== "undefined" && !customElements.get("ra-select")) {
+    customElements.define("ra-select", Select);
+    return Select;
+  } else {
+    return createCustomError("document is undefined or ra-select is exist");
+  }
+}
+const index = Custom();
+const index$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  Select,
+  default: index
+}, Symbol.toStringTag, { value: "Module" }));
+export {
+  Select as S,
+  index as a,
+  index$1 as i
+};