ranui 0.1.5 → 0.1.7

package/dist/index-a43b144f.js

@@ -0,0 +1,232 @@
+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 { p as perToNum } from "./index-d2d69b06.js";
+import { c as createCustomError } from "./index-57492b9b.js";
+const index$2 = "";
+const attributes = ["percent", "type", "total", "dot"];
+class Progress extends HTMLElement {
+  constructor() {
+    super();
+    __publicField(this, "_progress");
+    __publicField(this, "_progressWrap");
+    __publicField(this, "_progressWrapValue");
+    __publicField(this, "_progressDot");
+    __publicField(this, "moveProgress");
+    __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)`
+      );
+      this.change();
+    });
+    __publicField(this, "progressDotMouseDown", () => {
+      this.moveProgress.mouseDown = true;
+    });
+    __publicField(this, "progressDotMouseMove", (e) => {
+      if (!this.moveProgress.mouseDown)
+        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)`
+      );
+      this.change();
+    });
+    __publicField(this, "progressDotMouseUp", (e) => {
+      if (!this.moveProgress.mouseDown)
+        return;
+      this.moveProgress.mouseDown = false;
+    });
+    __publicField(this, "change", () => {
+      this.dispatchEvent(
+        new CustomEvent("change", {
+          detail: {
+            value: this.percent,
+            percent: this.percent,
+            total: this.total
+          }
+        })
+      );
+    });
+    __publicField(this, "appendProgressDot", () => {
+      if (this.dot === "true" && !this._progress.contains(this._progressDot)) {
+        this._progress.appendChild(this._progressDot);
+      }
+      if (this.dot === "false" && this._progress.contains(this._progressDot)) {
+        this._progress.removeChild(this._progressDot);
+      }
+    });
+    __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)`
+      );
+    });
+    __publicField(this, "dragEvent", () => {
+      if (this.type !== "drag")
+        return;
+      this._progress.addEventListener("click", this.progressClick);
+      this._progressDot.addEventListener("mousedown", this.progressDotMouseDown);
+      document.addEventListener("mousemove", this.progressDotMouseMove);
+      document.addEventListener("mouseup", this.progressDotMouseUp);
+    });
+    __publicField(this, "createProgress", () => {
+      if (!this.contains(this._progress)) {
+        this.appendChild(this._progress);
+        this._progress.appendChild(this._progressDot);
+      }
+    });
+    __publicField(this, "resize", () => {
+      this.updateCurrentProgress();
+    });
+    this._progress = document.createElement("div");
+    this._progress.setAttribute("class", "ran-progress");
+    this._progressWrap = document.createElement("div");
+    this._progressWrap.setAttribute("class", "ran-progress-wrap");
+    this._progress.appendChild(this._progressWrap);
+    this._progressWrapValue = document.createElement("div");
+    this._progressWrapValue.setAttribute("class", "ran-progress-wrap-value");
+    this._progressWrap.appendChild(this._progressWrapValue);
+    this._progressDot = document.createElement("div");
+    this._progressDot.setAttribute("class", "ran-progress-dot");
+    this.moveProgress = {
+      mouseDown: false
+    };
+  }
+  static get observedAttributes() {
+    return attributes;
+  }
+  get percent() {
+    const percent = this.getAttribute("percent") || "";
+    const num = perToNum(percent);
+    if (num > this.total) {
+      console.error("percent must be < total");
+      return this.total;
+    }
+    return perToNum(percent);
+  }
+  set percent(value) {
+    this.setAttribute("percent", `${value || 0}`);
+  }
+  get total() {
+    const total = this.getAttribute("total");
+    if (!total)
+      return 1;
+    return perToNum(total);
+  }
+  set total(value) {
+    this.setAttribute("total", value || "");
+  }
+  get type() {
+    const result = ["primary", "drag"];
+    const type = this.getAttribute("type") || "";
+    if (result.includes(type)) {
+      return type;
+    } else {
+      return "primary";
+    }
+  }
+  set type(value) {
+    this.setAttribute("type", value || "primary");
+  }
+  get animation() {
+    const result = ["play", "pause"];
+    const animation = this.getAttribute("animation") || "";
+    if (result.includes(animation)) {
+      return animation;
+    } else {
+      return "pause";
+    }
+  }
+  set animation(value) {
+    this.setAttribute("animation", value || "pause");
+  }
+  get dot() {
+    const result = ["true", "false"];
+    const dot = this.getAttribute("dot") || "";
+    if (result.includes(dot)) {
+      return dot;
+    } else {
+      return "true";
+    }
+  }
+  set dot(value) {
+    this.setAttribute("dot", value || "true");
+  }
+  connectedCallback() {
+    this.dragEvent();
+    this.updateCurrentProgress();
+    window.addEventListener("resize", this.resize);
+  }
+  disconnectCallback() {
+    this._progress.removeEventListener("click", this.progressClick);
+    this._progressDot.removeEventListener(
+      "mousedown",
+      this.progressDotMouseDown
+    );
+    document.removeEventListener("mousemove", this.progressDotMouseMove);
+    document.removeEventListener("mouseup", this.progressDotMouseUp);
+    window.removeEventListener("resize", this.resize);
+  }
+  attributeChangedCallback(k, o, n) {
+    if (o !== n) {
+      if (k === "type") {
+        this.createProgress();
+      }
+      if (k === "dot") {
+        this.appendProgressDot();
+      }
+      if (k === "percent") {
+        this.updateCurrentProgress();
+      }
+    }
+  }
+}
+function Custom() {
+  if (typeof document !== "undefined" && !customElements.get("r-progress")) {
+    customElements.define("r-progress", Progress);
+  } else {
+    return createCustomError("document is undefined or r-progress is exist");
+  }
+}
+const index = Custom();
+const index$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  Progress,
+  default: index
+}, Symbol.toStringTag, { value: "Module" }));
+export {
+  Progress as P,
+  index as a,
+  index$1 as i
+};

package/dist/index-aea75a9f.js

@@ -0,0 +1,78 @@
+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;
+};
+const f7170ee498e0dd32cbdcb63fba8f75cc = "";
+const failImage = `
+    data:image/png;base64,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
+`;
+function Custom() {
+  if (typeof window !== "undefined" && !customElements.get("r-img")) {
+    class CustomElement extends HTMLElement {
+      constructor() {
+        super();
+        __publicField(this, "_image");
+        __publicField(this, "_container");
+        this._container = document.createElement("div");
+        this._container.setAttribute("class", "ran-image");
+        const shadowRoot = this.attachShadow({ mode: "closed" });
+        const F7170EE498E0DD32CBDCB63FBA8F75CC = document.createElement("style");
+        F7170EE498E0DD32CBDCB63FBA8F75CC.textContent = f7170ee498e0dd32cbdcb63fba8f75cc;
+        shadowRoot.appendChild(F7170EE498E0DD32CBDCB63FBA8F75CC);
+        shadowRoot.appendChild(this._container);
+      }
+      static get observedAttributes() {
+        return ["fallback"];
+      }
+      get fallback() {
+        return this.getAttribute("fallback") || failImage;
+      }
+      set fallback(value) {
+        if (value) {
+          this.setAttribute("fallback", value);
+        } else {
+          this.removeAttribute("fallback");
+        }
+      }
+      listenFallback(name, value) {
+        if (name === "fallback" && this._image) {
+          if (value) {
+            this._image.setAttribute("fallback", value);
+          } else {
+            this._image.removeAttribute("fallback");
+          }
+        }
+      }
+      connectedCallback() {
+        const src = this.getAttribute("src") || "";
+        this._image = new Image();
+        this._image.src = src;
+        this._image.addEventListener("error", () => {
+          if (this._image && this.fallback) {
+            this._image.src = this.fallback;
+          }
+        });
+        this._image.addEventListener("load", () => {
+          if (this._image) {
+            this._container.appendChild(this._image);
+          }
+        });
+      }
+      attributeChangedCallback(name, oldValue, newValue) {
+        this.listenFallback(name, newValue);
+      }
+    }
+    customElements.define("r-img", CustomElement);
+  }
+}
+const index = Custom();
+const index$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  default: index
+}, Symbol.toStringTag, { value: "Module" }));
+export {
+  index as a,
+  index$1 as i
+};