ranui 0.1.9 → 0.1.10-alpha-24

package/dist/index-CiA5qRK3.js

@@ -0,0 +1,381 @@
+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 { c as create, i as isMobile, e as debounce } from "./plus-DgJxWGlo.js";
+import { c as createCustomError, H as HTMLElementSSR } from "./index-hdtEL8P_.js";
+import "./index-BgUpm4LA.js";
+const f7170ee498e0dd32cbdcb63fba8f75cc = ".remove-wap-active-focus{outline:0;-webkit-tap-highlight-color:transparent}.remove-wap-active-focus:active,.remove-wap-active-focus:focus{outline:0;-webkit-tap-highlight-color:transparent}:host{display:var(--ran-popover-host-display, block)}.ran-popover{box-sizing:var(--ran-popover-box-sizing, border-box);position:var(--ran-popover-position, relative);display:var(--ran-popover-display, block);margin:var(--ran-popover-margin, 0);padding:var(--ran-popover-padding, 0)}.ran-popover-block{display:var(--ran-popover-block-display, block)}";
+const less = ".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{visibility:hidden;position:absolute}";
+class Content extends HTMLElementSSR() {
+  constructor() {
+    super();
+    __publicField(this, "observer");
+    __publicField(this, "_shadowDom");
+    __publicField(this, "_slot");
+    __publicField(this, "callback", (mutations) => {
+      for (const mutation of mutations) {
+        if (mutation.type === "childList") {
+          this.onChange(mutation);
+        } else if (mutation.type === "attributes") {
+          this.onChange(mutation);
+        }
+      }
+    });
+    __publicField(this, "onChange", (mutation) => {
+      this.dispatchEvent(
+        new CustomEvent("change", {
+          detail: {
+            type: mutation.type,
+            value: { content: this.children, mutation }
+          }
+        })
+      );
+    });
+    this._slot = create("slot").setAttribute("class", "slot").element;
+    const shadowRoot = this.attachShadow({ mode: "closed" });
+    this._shadowDom = shadowRoot;
+    const style = create("style").setTextContent(less);
+    shadowRoot.appendChild(style.element);
+    shadowRoot.appendChild(this._slot);
+    this.observer = new MutationObserver(this.callback);
+  }
+  connectedCallback() {
+    this.observer.observe(this, { attributes: true, childList: true, subtree: true });
+  }
+  disconnectCallback() {
+    this.observer.disconnect();
+  }
+}
+function Custom$1() {
+  if (typeof document !== "undefined" && !customElements.get("r-content")) {
+    customElements.define("r-content", Content);
+    return Content;
+  } else {
+    return createCustomError("document is undefined or r-content is exist");
+  }
+}
+Custom$1();
+const arrowHeight = 8;
+const animationTime = 300;
+const HOVER_TIME = 16;
+const placementDirection = {
+  bottom: {
+    add: "ran-dropdown-down-in",
+    remove: "ran-dropdown-down-out"
+  },
+  top: {
+    add: "ran-dropdown-up-in",
+    remove: "ran-dropdown-up-out"
+  },
+  left: {
+    add: "ran-dropdown-left-in",
+    remove: "ran-dropdown-left-out"
+  },
+  right: {
+    add: "ran-dropdown-right-in",
+    remove: "ran-dropdown-right-out"
+  }
+};
+var PLACEMENT_TYPE = /* @__PURE__ */ ((PLACEMENT_TYPE2) => {
+  PLACEMENT_TYPE2["TOP"] = "top";
+  PLACEMENT_TYPE2["BOTTOM"] = "bottom";
+  PLACEMENT_TYPE2["LEFT"] = "left";
+  PLACEMENT_TYPE2["RIGHT"] = "right";
+  return PLACEMENT_TYPE2;
+})(PLACEMENT_TYPE || {});
+class Popover extends HTMLElementSSR() {
+  constructor() {
+    super();
+    __publicField(this, "_slot");
+    __publicField(this, "popoverBlock");
+    __publicField(this, "popoverContent");
+    __publicField(this, "popoverInner");
+    __publicField(this, "popoverInnerBlock");
+    __publicField(this, "_shadowDom");
+    __publicField(this, "dropDownInTimeId");
+    __publicField(this, "dropDownOutTimeId");
+    __publicField(this, "removeTimeId");
+    __publicField(this, "closePopover", () => {
+      this.setDropdownDisplayNone();
+    });
+    __publicField(this, "stopPropagation", (e) => {
+      e.stopPropagation();
+    });
+    /**
+     * @description: 创建下拉框
+     * @param {HTMLCollection} content
+     * @return {*}
+     */
+    __publicField(this, "createContent", (content) => {
+      var _a, _b, _c;
+      if (!content) return;
+      if (!this.popoverContent) {
+        const div = document.createElement("div");
+        this.popoverContent = create("r-dropdown").setAttribute("class", "ran-popover-dropdown").setStyle("display", "none").setStyle("position", "absolute").element;
+        (_a = this.popoverContent) == null ? void 0 : _a.addEventListener("click", this.stopPropagation);
+        this.popoverContent && div.appendChild(this.popoverContent);
+        if (this.trigger.includes("hover") && !isMobile()) {
+          (_b = this.popoverContent) == null ? void 0 : _b.addEventListener("mouseleave", this.blur);
+          (_c = this.popoverContent) == null ? void 0 : _c.addEventListener("mouseenter", this.removeDropDownTimeId);
+        }
+        document.body.appendChild(div);
+      }
+      if (this.popoverContent && content.length > 0) {
+        this.popoverContent.innerHTML = "";
+        const Fragment = document.createDocumentFragment();
+        for (const child of content) {
+          Fragment.appendChild(child);
+        }
+        this.popoverContent.appendChild(Fragment);
+      }
+    });
+    /**
+     * @description: 观察内容变化
+     * @param {Event} e
+     * @return {*}
+     */
+    __publicField(this, "watchContent", (e) => {
+      const { value } = e.detail;
+      this.createContent(value.content);
+    });
+    /**
+     * @description: 焦点移除的情况，需要移除下拉框
+     * @return {*}
+     */
+    __publicField(this, "blur", debounce(() => {
+      if (this.removeTimeId) {
+        this.removeDropDownTimeId();
+      }
+      this.removeTimeId = setTimeout(() => {
+        this.removeDropDownTimeId();
+        this.setDropdownDisplayNone();
+      }, animationTime);
+    }, HOVER_TIME));
+    /**
+     * @description: 移除下拉框
+     * @return {*}
+     */
+    __publicField(this, "removeDropDownTimeId", debounce(() => {
+      if (this.trigger.includes("hover") && !isMobile()) {
+        clearTimeout(this.removeTimeId);
+        this.removeTimeId = void 0;
+      }
+    }, HOVER_TIME));
+    /**
+     * @description: 添加 dropdown
+     * @return {*}
+     */
+    __publicField(this, "setDropdownDisplayBlock", debounce(() => {
+      var _a;
+      if (this.dropDownInTimeId) return;
+      clearTimeout(this.dropDownInTimeId);
+      this.dropDownInTimeId = void 0;
+      clearTimeout(this.dropDownOutTimeId);
+      this.dropDownOutTimeId = void 0;
+      if (this.popoverContent && this.popoverContent.style.display !== "block") {
+        this.popoverContent.setAttribute("transit", placementDirection[this.placement].add);
+        (_a = this.popoverContent) == null ? void 0 : _a.style.setProperty("display", "block");
+        this.placementPosition();
+        this.dropDownInTimeId = setTimeout(() => {
+          this.popoverContent && this.popoverContent.removeAttribute("transit");
+          clearTimeout(this.dropDownInTimeId);
+          this.dropDownInTimeId = void 0;
+        }, animationTime);
+      }
+    }, HOVER_TIME));
+    /**
+     * @description: 移除 select dropdown
+     * @return {*}
+     */
+    __publicField(this, "setDropdownDisplayNone", debounce(() => {
+      if (this.dropDownOutTimeId) return;
+      clearTimeout(this.dropDownInTimeId);
+      this.dropDownInTimeId = void 0;
+      clearTimeout(this.dropDownOutTimeId);
+      this.dropDownOutTimeId = void 0;
+      if (this.popoverContent && this.popoverContent.style.display !== "none") {
+        this.popoverContent.setAttribute("transit", placementDirection[this.placement].remove);
+        this.dropDownOutTimeId = setTimeout(() => {
+          var _a;
+          (_a = this.popoverContent) == null ? void 0 : _a.style.setProperty("display", "none");
+          this.popoverContent && this.popoverContent.removeAttribute("transit");
+          clearTimeout(this.dropDownOutTimeId);
+          this.dropDownOutTimeId = void 0;
+        }, animationTime);
+      }
+    }, HOVER_TIME));
+    /**
+     * @description: 设置 popover 位置
+     * @param {*} void
+     * @return {*}
+     */
+    __publicField(this, "placementPosition", () => {
+      if (!this.popoverContent) return;
+      const rect = this.getBoundingClientRect();
+      const { top, left, bottom, width, height } = rect;
+      let popoverTop = bottom + window.scrollY + arrowHeight;
+      let popoverLeft = left + window.scrollX;
+      const root = document.getElementById(this.getPopupContainerId);
+      const popoverContentRect = this.popoverContent.getBoundingClientRect();
+      if (this.placement === "top") {
+        popoverTop = top + window.scrollY - Math.max(popoverContentRect.height, height) - arrowHeight;
+        if (this.getPopupContainerId && root) {
+          const rootRect = root.getBoundingClientRect();
+          popoverLeft = left - rootRect.left;
+          popoverTop = top - root.getBoundingClientRect().top - this.popoverContent.clientHeight - arrowHeight;
+          popoverLeft = left - root.getBoundingClientRect().left;
+        }
+      }
+      if (this.placement === "left") {
+        popoverLeft = left - Math.max(popoverContentRect.width, width) - arrowHeight;
+        popoverTop = top + window.scrollY;
+      }
+      if (this.placement === "right") {
+        popoverLeft = left + width + arrowHeight;
+        popoverTop = top + window.scrollY;
+      }
+      this.popoverContent.style.setProperty("inset", `${popoverTop}px auto auto ${popoverLeft}px`);
+      this.popoverContent.style.setProperty("--ran-x", `${popoverLeft}px`);
+      this.popoverContent.style.setProperty("--ran-y", `${popoverTop}px`);
+      this.popoverContent.style.setProperty("--ran-popover-width", `${width}px`);
+      this.popoverContent.style.setProperty("--ran-popover-height", `${height}px`);
+      this.popoverContent.style.setProperty("--ran-popover-content-width", `${popoverContentRect.width}px`);
+      this.popoverContent.style.setProperty("--ran-popover-content-height", `${popoverContentRect.height}px`);
+    });
+    /**
+     * @description: 鼠标移入
+     * @param {Event} e
+     * @return {*}
+     */
+    __publicField(this, "hoverPopover", (e) => {
+      this.clickPopover(e);
+    });
+    __publicField(this, "clickContent", (e) => {
+      e.stopPropagation();
+    });
+    __publicField(this, "clickPopover", (e) => {
+      e.stopPropagation();
+      e.preventDefault();
+      this.setDropdownDisplayBlock();
+    });
+    __publicField(this, "clickRemovePopover", (e) => {
+      this.hoverRemovePopover(e);
+    });
+    __publicField(this, "popoverTrigger", () => {
+      this.removeEventListener("mouseenter", this.hoverPopover);
+      this.removeEventListener("mouseleave", this.blur);
+      this.removeEventListener("click", this.clickPopover);
+      if (this.trigger.includes("hover")) {
+        this.addEventListener("mouseenter", this.hoverPopover);
+        this.addEventListener("mouseleave", this.blur);
+      }
+      this.addEventListener("click", this.clickPopover);
+    });
+    __publicField(this, "hoverRemovePopover", (e) => {
+      e.stopPropagation();
+      this.setDropdownDisplayNone();
+    });
+    __publicField(this, "changePlacement", debounce(() => {
+      var _a, _b, _c, _d;
+      if (this.placement === "top") {
+        (_a = this.popoverContent) == null ? void 0 : _a.setAttribute("arrow", "bottom");
+      }
+      if (this.placement === "bottom") {
+        (_b = this.popoverContent) == null ? void 0 : _b.setAttribute("arrow", "top");
+      }
+      if (this.placement === "left") {
+        (_c = this.popoverContent) == null ? void 0 : _c.setAttribute("arrow", "right");
+      }
+      if (this.placement === "right") {
+        (_d = this.popoverContent) == null ? void 0 : _d.setAttribute("arrow", "left");
+      }
+    }, HOVER_TIME));
+    this._slot = document.createElement("slot");
+    this._slot.setAttribute("class", "slot");
+    this.popoverBlock = document.createElement("div");
+    this.popoverBlock.setAttribute("class", "ran-popover-block");
+    this.popoverBlock.setAttribute("role", "tooltip");
+    this.popoverBlock.appendChild(this._slot);
+    const shadowRoot = this.attachShadow({ mode: "closed" });
+    const F7170EE498E0DD32CBDCB63FBA8F75CC = document.createElement("style");
+    F7170EE498E0DD32CBDCB63FBA8F75CC.textContent = f7170ee498e0dd32cbdcb63fba8f75cc;
+    shadowRoot.appendChild(F7170EE498E0DD32CBDCB63FBA8F75CC);
+    this._shadowDom = shadowRoot;
+    shadowRoot.appendChild(this.popoverBlock);
+  }
+  static get observedAttributes() {
+    return ["placement", "arrow", "trigger"];
+  }
+  get placement() {
+    return this.getAttribute("placement") || "top";
+  }
+  set placement(value) {
+    this.setAttribute("placement", value);
+  }
+  get arrow() {
+    return this.getAttribute("arrow") || "";
+  }
+  set arrow(value) {
+    this.setAttribute("arrow", value);
+  }
+  get trigger() {
+    return this.getAttribute("trigger") || "hover";
+  }
+  set trigger(value) {
+    this.setAttribute("trigger", value);
+  }
+  get getPopupContainerId() {
+    return this.getAttribute("getPopupContainerId") || "";
+  }
+  set getPopupContainerId(value) {
+    this.setAttribute("getPopupContainerId", value);
+  }
+  connectedCallback() {
+    for (const element of this.children) {
+      if (element.tagName === "R-CONTENT") {
+        element.addEventListener("change", this.watchContent);
+        this.createContent(element.children);
+      }
+    }
+    this.popoverTrigger();
+    this.changePlacement();
+    document.addEventListener("click", this.clickRemovePopover);
+  }
+  disconnectCallback() {
+    this.removeEventListener("mouseenter", this.hoverPopover);
+    this.removeEventListener("mouseleave", this.hoverRemovePopover);
+    this.removeEventListener("click", this.hoverPopover);
+    document.removeEventListener("click", this.clickRemovePopover);
+  }
+  attributeChangedCallback(n, o, v) {
+    if (o !== v) {
+      if (n === "trigger") {
+        this.popoverTrigger();
+      }
+      if (n === "placement") {
+        this.changePlacement();
+      }
+    }
+  }
+}
+function Custom() {
+  if (typeof document !== "undefined" && !customElements.get("r-popover")) {
+    customElements.define("r-popover", Popover);
+    return Popover;
+  } else {
+    return createCustomError("document is undefined or r-popover is exist");
+  }
+}
+const index = Custom();
+const index$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  PLACEMENT_TYPE,
+  Popover,
+  default: index
+}, Symbol.toStringTag, { value: "Module" }));
+export {
+  PLACEMENT_TYPE as P,
+  Popover as a,
+  index as b,
+  index$1 as i
+};