ranui 0.1.8 → 0.1.10-alpha.1

package/dist/{index-a43b144f.js → index-CJZp9lE4.js}

@@ -4,11 +4,10 @@ var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
-import { p as perToNum } from "./index-d2d69b06.js";
-import { c as createCustomError } from "./index-57492b9b.js";
-const index$2 = "";
+import { p as perToNum } from "./utils-BMBEcoPj.js";
+import { H as HTMLElementSSR, c as createCustomError } from "./index-CSnBqUsQ.js";
 const attributes = ["percent", "type", "total", "dot"];
-class Progress extends HTMLElement {
+class Progress extends HTMLElementSSR() {
   constructor() {
     super();
     __publicField(this, "_progress");
@@ -19,19 +18,10 @@ class Progress extends HTMLElement {
     __publicField(this, "progressClick", (e) => {
       const rect = this._progress.getBoundingClientRect();
       const offsetX = e.clientX - rect.left;
-      const percentage = Math.min(
-        1,
-        Math.max(0, offsetX / this._progress.offsetWidth)
-      );
-      this.percent = percentage * this.total;
-      this._progressWrapValue.style.setProperty(
-        "transform",
-        `scaleX(${percentage})`
-      );
-      this._progressDot.style.setProperty(
-        "transform",
-        `translateX(${percentage * this._progress.offsetWidth}px)`
-      );
+      const percentage = Math.min(1, Math.max(0, offsetX / this._progress.offsetWidth));
+      this.percent = `${percentage * Number(this.total)}`;
+      this._progressWrapValue.style.setProperty("transform", `scaleX(${percentage})`);
+      this._progressDot.style.setProperty("transform", `translateX(${percentage * this._progress.offsetWidth}px)`);
       this.change();
     });
     __publicField(this, "progressDotMouseDown", () => {
@@ -42,19 +32,10 @@ class Progress extends HTMLElement {
         return;
       const rect = this._progress.getBoundingClientRect();
       const offsetX = e.clientX - rect.left;
-      const percentage = Math.min(
-        1,
-        Math.max(0, offsetX / this._progress.offsetWidth)
-      );
-      this.percent = percentage * this.total;
-      this._progressWrapValue.style.setProperty(
-        "transform",
-        `scaleX(${percentage})`
-      );
-      this._progressDot.style.setProperty(
-        "transform",
-        `translateX(${percentage * this._progress.offsetWidth}px)`
-      );
+      const percentage = Math.min(1, Math.max(0, offsetX / this._progress.offsetWidth));
+      this.percent = `${percentage * Number(this.total)}`;
+      this._progressWrapValue.style.setProperty("transform", `scaleX(${percentage})`);
+      this._progressDot.style.setProperty("transform", `translateX(${percentage * this._progress.offsetWidth}px)`);
       this.change();
     });
     __publicField(this, "progressDotMouseUp", (e) => {
@@ -82,15 +63,9 @@ class Progress extends HTMLElement {
       }
     });
     __publicField(this, "updateCurrentProgress", () => {
-      const percent = this.percent / this.total;
-      this._progressWrapValue.style.setProperty(
-        "transform",
-        `scaleX(${percent})`
-      );
-      this._progressDot.style.setProperty(
-        "transform",
-        `translateX(${percent * this._progress.offsetWidth}px)`
-      );
+      const percent = Number(this.percent) / Number(this.total);
+      this._progressWrapValue.style.setProperty("transform", `scaleX(${percent})`);
+      this._progressDot.style.setProperty("transform", `translateX(${percent * this._progress.offsetWidth}px)`);
     });
     __publicField(this, "dragEvent", () => {
       if (this.type !== "drag")
@@ -101,9 +76,9 @@ class Progress extends HTMLElement {
       document.addEventListener("mouseup", this.progressDotMouseUp);
     });
     __publicField(this, "createProgress", () => {
-      if (!this.contains(this._progress)) {
-        this.appendChild(this._progress);
+      if (!(this.children.length > 0 && [...this.children].some((item) => item.className === "ran-progress"))) {
         this._progress.appendChild(this._progressDot);
+        this.appendChild(this._progress);
       }
     });
     __publicField(this, "resize", () => {
@@ -111,6 +86,7 @@ class Progress extends HTMLElement {
     });
     this._progress = document.createElement("div");
     this._progress.setAttribute("class", "ran-progress");
+    this._progress.setAttribute("role", "progressbar");
     this._progressWrap = document.createElement("div");
     this._progressWrap.setAttribute("class", "ran-progress-wrap");
     this._progress.appendChild(this._progressWrap);
@@ -129,20 +105,21 @@ class Progress extends HTMLElement {
   get percent() {
     const percent = this.getAttribute("percent") || "";
     const num = perToNum(percent);
-    if (num > this.total) {
+    if (Number(num) > Number(this.total)) {
       console.error("percent must be < total");
       return this.total;
     }
-    return perToNum(percent);
+    return `${perToNum(percent)}`;
   }
   set percent(value) {
     this.setAttribute("percent", `${value || 0}`);
+    this.setAttribute("aria-valuenow", `${value || 0}`);
   }
   get total() {
     const total = this.getAttribute("total");
     if (!total)
-      return 1;
-    return perToNum(total);
+      return "1";
+    return `${perToNum(total)}`;
   }
   set total(value) {
     this.setAttribute("total", value || "");
@@ -184,16 +161,17 @@ class Progress extends HTMLElement {
     this.setAttribute("dot", value || "true");
   }
   connectedCallback() {
+    const type = this.getAttribute("type");
+    if (!type) {
+      this.setAttribute("type", "primary");
+    }
     this.dragEvent();
     this.updateCurrentProgress();
     window.addEventListener("resize", this.resize);
   }
   disconnectCallback() {
     this._progress.removeEventListener("click", this.progressClick);
-    this._progressDot.removeEventListener(
-      "mousedown",
-      this.progressDotMouseDown
-    );
+    this._progressDot.removeEventListener("mousedown", this.progressDotMouseDown);
     document.removeEventListener("mousemove", this.progressDotMouseMove);
     document.removeEventListener("mouseup", this.progressDotMouseUp);
     window.removeEventListener("resize", this.resize);
@@ -214,7 +192,8 @@ class Progress extends HTMLElement {
 }
 function Custom() {
   if (typeof document !== "undefined" && !customElements.get("r-progress")) {
-    customElements.define("r-progress", Progress);
+    Progress && customElements.define("r-progress", Progress);
+    return Progress;
   } else {
     return createCustomError("document is undefined or r-progress is exist");
   }

package/dist/{index-57492b9b.js → index-CSnBqUsQ.js}

@@ -31,7 +31,7 @@ const loadScript = (src) => {
     document.body.append(script);
   });
 };
-function createCustomError(msg) {
+function createCustomError(msg = "") {
   return class CustomError {
     constructor(message = msg) {
       __publicField(this, "message");
@@ -39,7 +39,54 @@ function createCustomError(msg) {
     }
   };
 }
+const HTMLElementSSR = () => {
+  if (typeof document !== "undefined") {
+    return HTMLElement;
+  }
+  return null;
+};
+const createSignal = (value, options) => {
+  const signal = {
+    value,
+    // 订阅者
+    subscribers: /* @__PURE__ */ new Set(),
+    comparator: options == null ? void 0 : options.equals
+  };
+  const { subscriber } = options || {};
+  if (subscriber && Array.isArray(subscriber)) {
+    subscriber.forEach((item) => {
+      if (typeof item === "function" && !signal.subscribers.has(item)) {
+        signal.subscribers.add(item);
+      }
+    });
+  }
+  const getter = () => {
+    return signal.value;
+  };
+  const updateSignal = (newValue) => {
+    if (signal.value !== newValue) {
+      signal.value = newValue;
+      signal.subscribers.forEach((subscriber2) => subscriber2(newValue));
+    }
+  };
+  const setter = (newValue) => {
+    const { comparator } = signal;
+    if (comparator instanceof Function) {
+      return !comparator(signal.value, newValue) && updateSignal(newValue);
+    }
+    if (comparator === void 0) {
+      if (signal.value !== newValue) {
+        updateSignal(newValue);
+      }
+    } else {
+      !comparator && updateSignal(newValue);
+    }
+  };
+  return [getter, setter];
+};
 export {
+  HTMLElementSSR as H,
+  createSignal as a,
   createCustomError as c,
   falseList as f,
   isDisabled as i,

package/dist/index-CWWI8SHO.js

@@ -0,0 +1,206 @@
+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, c as createCustomError } from "./index-CSnBqUsQ.js";
+class Popover extends HTMLElementSSR() {
+  constructor() {
+    super();
+    __publicField(this, "_slot");
+    __publicField(this, "popoverBlock");
+    __publicField(this, "popoverContent");
+    __publicField(this, "popoverArrow");
+    __publicField(this, "popoverInner");
+    __publicField(this, "popoverInnerBlock");
+    __publicField(this, "removePopoverTimeId");
+    __publicField(this, "createContent", (content) => {
+      if (!content)
+        return;
+      if (!this.popoverContent) {
+        const div = document.createElement("div");
+        this.popoverContent = document.createElement("div");
+        this.popoverContent.setAttribute("class", "ran-popover-content");
+        this.popoverContent.addEventListener("click", this.clickContent);
+        this.popoverArrow = document.createElement("div");
+        this.popoverArrow.setAttribute("class", "ran-popover-content-arrow");
+        this.popoverInner = document.createElement("div");
+        this.popoverInner.setAttribute("class", "ran-popover-content-inner");
+        this.popoverInnerBlock = document.createElement("div");
+        this.popoverInnerBlock.setAttribute("class", "ran-popover-content-inner-block");
+        this.popoverContent.appendChild(this.popoverArrow);
+        this.popoverContent.appendChild(this.popoverInner);
+        this.popoverInner.appendChild(this.popoverInnerBlock);
+        div.appendChild(this.popoverContent);
+        document.body.appendChild(div);
+      }
+      if (this.popoverInnerBlock && content.length > 0) {
+        this.popoverInnerBlock.innerHTML = "";
+        const Fragment = document.createDocumentFragment();
+        for (const child of content) {
+          Fragment.appendChild(child);
+        }
+        this.popoverInnerBlock.appendChild(Fragment);
+      }
+    });
+    __publicField(this, "watchContent", (e) => {
+      const { value } = e.detail;
+      this.createContent(value.content);
+      this.placementPosition();
+    });
+    __publicField(this, "placementPosition", () => {
+      var _a, _b, _c, _d;
+      if (!this.popoverInnerBlock || !this.popoverContent)
+        return;
+      (_a = this.popoverContent) == null ? void 0 : _a.style.setProperty("display", "block");
+      (_b = this.popoverContent) == null ? void 0 : _b.style.setProperty("opacity", "1");
+      const rect = this.getBoundingClientRect();
+      const { top, left, bottom, width } = rect;
+      this.popoverContent.style.setProperty("--ran-x", `${(left + window.scrollX).toFixed(2)}px`);
+      this.popoverContent.style.setProperty("--ran-y", `${(top + window.scrollY).toFixed(2)}px`);
+      let popoverTop = bottom + window.scrollY;
+      let popoverLeft = left + window.scrollX;
+      const root = document.getElementById(this.getPopupContainerId);
+      const arrowHeight = 8;
+      let popoverArrowTransform = `translateX(-50%) translateY(-40%) rotate(0deg)`;
+      let popoverArrowTop = -arrowHeight;
+      let popoverArrowLeft = left + this.popoverContent.clientWidth / 2 - arrowHeight / 2;
+      if (this.placement === "top") {
+        popoverTop = top + window.scrollY - this.popoverContent.clientHeight - arrowHeight;
+        if (this.getPopupContainerId && root) {
+          popoverTop = top - root.getBoundingClientRect().top - this.popoverContent.clientHeight;
+          popoverLeft = left - root.getBoundingClientRect().left;
+        }
+        popoverArrowTransform = "translateX(-50%) translateY(40%) rotate(180deg)";
+        popoverArrowTop = this.popoverContent.clientHeight - arrowHeight;
+        popoverArrowLeft = width / 2;
+      }
+      (_c = this.popoverArrow) == null ? void 0 : _c.style.setProperty("inset", `${popoverArrowTop}px auto auto ${popoverArrowLeft}px`);
+      (_d = this.popoverArrow) == null ? void 0 : _d.style.setProperty("transform", popoverArrowTransform);
+      this.popoverContent.style.setProperty("inset", `${popoverTop}px auto auto ${popoverLeft}px`);
+    });
+    __publicField(this, "hoverPopover", () => {
+      if (this.removePopoverTimeId) {
+        clearTimeout(this.removePopoverTimeId);
+        this.removePopoverTimeId = void 0;
+      }
+    });
+    __publicField(this, "clickContent", (e) => {
+      e.stopPropagation();
+    });
+    __publicField(this, "clickPopover", (e) => {
+      e.stopPropagation();
+      this.placementPosition();
+    });
+    __publicField(this, "clickRemovePopover", () => {
+      this.hoverRemovePopover();
+    });
+    __publicField(this, "popoverTrigger", () => {
+      this.removeEventListener("mouseenter", this.hoverPopover);
+      this.removeEventListener("click", this.hoverPopover);
+      this.removeEventListener("mouseleave", this.hoverRemovePopover);
+      this.removeEventListener("click", this.clickPopover);
+      document.removeEventListener("click", this.clickRemovePopover);
+      if (this.trigger === "hover") {
+        this.addEventListener("mouseenter", this.placementPosition);
+        this.addEventListener("mouseleave", this.hoverRemovePopover);
+      } else {
+        this.addEventListener("click", this.clickPopover);
+        document.addEventListener("click", this.clickRemovePopover);
+      }
+    });
+    __publicField(this, "hoverRemovePopover", () => {
+      if (this.removePopoverTimeId) {
+        clearTimeout(this.removePopoverTimeId);
+        this.removePopoverTimeId = void 0;
+      }
+      this.removePopoverTimeId = setTimeout(() => {
+        var _a;
+        (_a = this.popoverContent) == null ? void 0 : _a.style.setProperty("opacity", "0");
+        setTimeout(() => {
+          var _a2;
+          (_a2 = this.popoverContent) == null ? void 0 : _a2.style.setProperty("display", "none");
+        }, 300);
+      }, 100);
+    });
+    this._slot = document.createElement("slot");
+    this.popoverBlock = document.createElement("div");
+    this.popoverBlock.setAttribute("class", "ran-popover-block");
+    this.popoverBlock.setAttribute("role", "tooltip");
+    this.popoverBlock.appendChild(this._slot);
+  }
+  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") || "";
+  }
+  set trigger(value) {
+    this.setAttribute("trigger", value);
+  }
+  get getPopupContainerId() {
+    return this.getAttribute("getPopupContainerId") || "";
+  }
+  set getPopupContainerId(value) {
+    this.setAttribute("getPopupContainerId", value);
+  }
+  connectedCallback() {
+    this.setAttribute("class", "ran-popover");
+    this.appendChild(this.popoverBlock);
+    for (const element of this.children) {
+      if (element.tagName === "R-CONTENT") {
+        element.addEventListener("change", this.watchContent);
+        this.createContent(element.children);
+      }
+    }
+    this.popoverTrigger();
+  }
+  disconnectCallback() {
+    var _a;
+    this.removeEventListener("mouseenter", this.hoverPopover);
+    this.removeEventListener("mouseleave", this.hoverRemovePopover);
+    this.removeEventListener("click", this.hoverPopover);
+    this.removeEventListener("click", this.placementPosition);
+    document.removeEventListener("click", this.clickRemovePopover);
+    (_a = this.popoverContent) == null ? void 0 : _a.removeEventListener("click", this.clickContent);
+  }
+  attributeChangedCallback(n, o, v) {
+    if (o !== v) {
+      if (n === "trigger") {
+        this.popoverTrigger();
+      }
+    }
+  }
+}
+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,
+  Popover,
+  default: index
+}, Symbol.toStringTag, { value: "Module" }));
+export {
+  Popover as P,
+  index as a,
+  index$1 as i
+};