ranui/dist/index-B249WTjy.js

UI Component library based on `Web Component`

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-BQnIzzvi.js";
import { c as createCustomError, H as HTMLElementSSR } from "./index-9tJmVuyv.js";
import "./index-Cs25ZDt6.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
};