ranui 0.1.9 → 0.1.10-alpha.10

package/dist/drop-4j4abxje.js

@@ -0,0 +1,36 @@
+const str2Xml = (xmlStr, format = "text/xml") => {
+  if (window.DOMParser) return new window.DOMParser().parseFromString(xmlStr, format).documentElement;
+  if (typeof window.ActiveXObject !== "undefined") {
+    const xmlDoc = new window.ActiveXObject("Microsoft.XMLDOM");
+    xmlDoc.async = "false";
+    xmlDoc.loadXML(xmlStr);
+    return xmlDoc;
+  }
+  return void 0;
+};
+const __variableDynamicImportRuntimeHelper = (glob, path, segs) => {
+  const v = glob[path];
+  if (v) {
+    return typeof v === "function" ? v() : Promise.resolve(v);
+  }
+  return new Promise((_, reject) => {
+    (typeof queueMicrotask === "function" ? queueMicrotask : setTimeout)(
+      reject.bind(
+        null,
+        new Error(
+          "Unknown variable dynamic import: " + path + (path.split("/").length !== segs ? ". Note that variables only represent file names one level deep." : "")
+        )
+      )
+    );
+  });
+};
+const drop = { "success": true, "_identification": true, "data": '<svg>\n      <filter id="liquid">\n        <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur"></feGaussianBlur>\n        <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7" result="liquid"></feColorMatrix>\n      </filter>\n    </svg>\n' };
+const drop$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  default: drop
+}, Symbol.toStringTag, { value: "Module" }));
+export {
+  __variableDynamicImportRuntimeHelper as _,
+  drop$1 as d,
+  str2Xml as s
+};

package/dist/icon.js

@@ -0,0 +1,6 @@
+import "./drop-4j4abxje.js";
+import { a } from "./index-D4qUro5V.js";
+import "./arrow-down-B_hCY3Wt.js";
+export {
+  a as default
+};

package/dist/iconShadowless.js

@@ -0,0 +1,6 @@
+import "./drop-4j4abxje.js";
+import "./arrow-down-B_hCY3Wt.js";
+import { a } from "./index-DJZmDHz-.js";
+export {
+  a as default
+};

package/dist/image.js

@@ -0,0 +1,4 @@
+import { a } from "./index-KS2nvVcO.js";
+export {
+  a as default
+};

package/dist/{index-4443363f.js → index-15M0olqa.js}

@@ -1,14 +1,11 @@
 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-7913ec46.js";
-import { c as createCustomError } from "./index-57492b9b.js";
-const index$2 = "";
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+import { p as perToNum } from "./arrow-down-B_hCY3Wt.js";
+import { H as HTMLElementSSR, c as createCustomError } from "./index-DC5EA657.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:active,:host:focus{outline:0;-webkit-tap-highlight-color:transparent}.ran-progress{position:var(--ran-progress-position, relative);cursor:var(--ran-progress-cursor, pointer);width:var(--ran-progress-width, 100%);height:var(--ran-progress-height, 100%)}.ran-progress:active,.ran-progress:focus{outline:0;-webkit-tap-highlight-color:transparent}.ran-progress-wrap{width:var(--ran-progress-wrap-width, 100%);height:var(--ran-progress-wrap-height, 8px);border-radius:var(--ran-progress-wrap-border-radius, 20px);background:var(--ran-progress-wrap-background, #5b5b5b);position:var(--ran-progress-wrap-position, relative);overflow:var(--ran-progress-wrap-overflow, hidden)}.ran-progress-wrap-value{position:var(--ran-progress-wrap-value-position, absolute);top:var(--ran-progress-wrap-value-top, 0);left:var(--ran-progress-wrap-value-left, 0);height:var(--ran-progress-wrap-value-height, 100%);width:var(--ran-progress-wrap-value-width, 100%);transform:var(--ran-progress-wrap-value-transform, scaleX(0));transform-origin:var(--ran-progress-wrap-value-transform-origin, 0 0);will-change:var(--ran-progress-wrap-value-will-change, transform);background:var(--ran-progress-wrap-value-background, linear-gradient(90deg, #0bc8bb 2.42%, #00d297 98.79%));border-radius:var(--ran-progress-wrap-value-border-radius, 20px)}.ran-progress-dot{position:var(--ran-progress-dot-position, absolute);top:var(--ran-progress-dot-top, -5px);left:var(--ran-progress-dot-left, -9px);border-radius:var(--ran-progress-dot-border-radius, 50%);width:var(--ran-progress-dot-width, 18px);height:var(--ran-progress-dot-height, 18px);background:var(--ran-progress-dot-background, linear-gradient(90deg, #0bc8bb 2.42%, #00d297 98.79%));cursor:var(--ran-progress-dot-cursor, pointer)}";
 const attributes = ["percent", "type", "total", "dot"];
-class Progress extends HTMLElement {
+class Progress extends HTMLElementSSR() {
   constructor() {
     super();
     __publicField(this, "_progress");
@@ -16,50 +13,31 @@ class Progress extends HTMLElement {
     __publicField(this, "_progressWrapValue");
     __publicField(this, "_progressDot");
     __publicField(this, "moveProgress");
+    __publicField(this, "_shadowDom");
     __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", () => {
       this.moveProgress.mouseDown = true;
     });
     __publicField(this, "progressDotMouseMove", (e) => {
-      if (!this.moveProgress.mouseDown)
-        return;
+      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)`
-      );
+      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) => {
-      if (!this.moveProgress.mouseDown)
-        return;
+      if (!this.moveProgress.mouseDown) return;
       this.moveProgress.mouseDown = false;
     });
     __publicField(this, "change", () => {
@@ -82,35 +60,23 @@ 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")
-        return;
+      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._progress.setAttribute("role", "progressbar");
     this._progressWrap = document.createElement("div");
     this._progressWrap.setAttribute("class", "ran-progress-wrap");
     this._progress.appendChild(this._progressWrap);
@@ -122,6 +88,13 @@ class Progress extends HTMLElement {
     this.moveProgress = {
       mouseDown: false
     };
+    this._progress.appendChild(this._progressDot);
+    const shadowRoot = this.attachShadow({ mode: "closed" });
+    const F7170EE498E0DD32CBDCB63FBA8F75CC = document.createElement("style");
+    F7170EE498E0DD32CBDCB63FBA8F75CC.textContent = f7170ee498e0dd32cbdcb63fba8f75cc;
+    shadowRoot.appendChild(F7170EE498E0DD32CBDCB63FBA8F75CC);
+    this._shadowDom = shadowRoot;
+    shadowRoot.appendChild(this._progress);
   }
   static get observedAttributes() {
     return attributes;
@@ -129,20 +102,20 @@ 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);
+    if (!total) return "1";
+    return `${perToNum(total)}`;
   }
   set total(value) {
     this.setAttribute("total", value || "");
@@ -184,25 +157,23 @@ 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);
   }
   attributeChangedCallback(k, o, n) {
     if (o !== n) {
-      if (k === "type") {
-        this.createProgress();
-      }
       if (k === "dot") {
         this.appendProgressDot();
       }
@@ -214,7 +185,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-1v568_nq.js

@@ -0,0 +1,140 @@
+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, a as addClassToElement, r as removeClassToElement } from "./arrow-down-B_hCY3Wt.js";
+import { H as HTMLElementSSR, f as falseList, c as createCustomError } from "./index-DC5EA657.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-checkbox-host-position, relative);display:var(--ran-checkbox-host-display, block);margin:var(--ran-checkbox-host-margin, 0);padding:var(--ran-checkbox-host-padding, 0);box-sizing:var(--ran-checkbox-host-box-sizing, border-box);list-style:var(--ran-checkbox-host-list-style, none)}:host([disabled]){opacity:var(--ran-checkbox-disabled-opacity, .6)}:host([disabled]) .ran-checkbox-input{cursor:var(--ran-checkbox-disabled-cursor, not-allowed);pointer-events:var(--ran-checkbox-disabled-pointer-events, all)}:host([disabled]) .ran-checkbox-inner{background-color:var(--ran-checkbox-checked-background-color, #d9d9d9);border:1px solid #d9d9d9}:host([disabled]) .ran-checkbox-inner:after{cursor:not-allowed;pointer-events:none;opacity:var(--ran-checkbox-checked-after-opacity, 1)}:host([disabled]) .ran-checkbox-checked .ran-checkbox-inner{background-color:var(--ran-checkbox-checked-background-color, #d9d9d9)}:host([disabled]) .ran-checkbox-checked .ran-checkbox-inner:after{opacity:var(--ran-checkbox-checked-after-opacity, 0)}.ran-checkbox{position:var(--ran-checkbox-position, relative);display:var(--ran-checkbox-display, block);box-sizing:var(--ran-checkbox-box-sizing, border-box);margin:var(--ran-checkbox-margin, 0);width:var(--ran-checkbox-width, 16px);height:var(--ran-checkbox-height, 16px);padding:var(--ran-checkbox-padding, 0);color:var(--ran-checkbox-color, rgba(0, 0, 0, .88));font-size:var(--ran-checkbox-font-size, 14px);line-height:var(--ran-checkbox-line-height, 1);list-style:var(--ran-checkbox-list-style, none);font-family:var(--ran-checkbox-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");white-space:var(--ran-checkbox-white-space, nowrap);cursor:var(--ran-checkbox-cursor, pointer);border-radius:var(--ran-checkbox-border-radius, 4px)}.ran-checkbox-input{position:var(--ran-checkbox-input-position, absolute);inset:var(--ran-checkbox-input-inset, 0);z-index:var(--ran-checkbox-input-z-index, 1);cursor:var(--ran-checkbox-input-cursor, pointer);opacity:var(--ran-checkbox-input-opacity, 0);margin:var(--ran-checkbox-input-margin, 0)}.ran-checkbox-inner{box-sizing:var(--ran-checkbox-inner-box-sizing, border-box);display:var(--ran-checkbox-inner-display, block);width:var(--ran-checkbox-inner-width, 16px);height:var(--ran-checkbox-inner-height, 16px);direction:var(--ran-checkbox-inner-direction, ltr);background-color:var(--ran-checkbox-inner-background-color, #fff);border:var(--ran-checkbox-inner-border, 1px solid #d9d9d9);border-radius:var(--ran-checkbox-inner-border-radius, 4px);border-collapse:var(--ran-checkbox-inner-border-collapse, separate)}.ran-checkbox-inner:after{box-sizing:var(--ran-checkbox-inner-after-box-sizing, border-box);position:var(--ran-checkbox-inner-after-position, absolute);top:var(--ran-checkbox-inner-after-top, 50%);inset-inline-start:var(--ran-checkbox-inner-after-inset-inline-start, 25%);display:var(--ran-checkbox-inner-after-display, table);width:var(--ran-checkbox-inner-after-width, calc(16px / 14 * 5));height:var(--ran-checkbox-inner-after-height, calc(16px / 14 * 8));border:var(--ran-checkbox-inner-after-border, 2px solid #fff);border-top:var(--ran-checkbox-inner-after-border-top, 0);border-inline-start:var(--ran-checkbox-inner-after-border-inline-start, 0);opacity:var(--ran-checkbox-inner-after-opacity, 0);content:var(--ran-checkbox-inner-after-content, "");transition:var(--ran-checkbox-inner-after-transition, all .1s cubic-bezier(.71, -.46, .88, .6), opacity .1s);transform:var(--ran-checkbox-inner-after-transform, rotate(45deg) scale(1) translate(-50%, -50%))}.ran-checkbox-checked .ran-checkbox-inner{background-color:var(--ran-checkbox-checked-background-color, #1677ff);border:var(--ran-checkbox-checked-border, 1px solid #1677ff)}.ran-checkbox-checked .ran-checkbox-inner:after{opacity:var(--ran-checkbox-checked-after-opacity, 1)}';
+class Checkbox extends HTMLElementSSR() {
+  constructor() {
+    super();
+    __publicField(this, "checkInput");
+    __publicField(this, "checkInner");
+    __publicField(this, "context");
+    __publicField(this, "container");
+    __publicField(this, "_shadowDom");
+    __publicField(this, "updateChecked", () => {
+      const { checked } = this.context;
+      if (checked) {
+        this.setAttribute("checked", "true");
+        this.setAttribute("value", "true");
+        addClassToElement(this.container, "ran-checkbox-checked");
+      } else {
+        this.setAttribute("checked", "false");
+        this.setAttribute("value", "false");
+        removeClassToElement(this.container, "ran-checkbox-checked");
+      }
+    });
+    __publicField(this, "update", () => {
+      this.updateChecked();
+    });
+    __publicField(this, "onChange", () => {
+      if (falseList.includes(this.disabled)) return;
+      if (this.hasAttribute("disabled")) return;
+      const { checked } = this.context;
+      this.context.checked = !checked;
+      this.dispatchEvent(
+        new CustomEvent("change", {
+          detail: {
+            checked: this.context.checked
+          }
+        })
+      );
+      this.update();
+    });
+    this.checkInput = document.createElement("input");
+    this.checkInput.setAttribute("class", "ran-checkbox-input");
+    this.checkInput.setAttribute("type", "checkbox");
+    this.checkInner = document.createElement("span");
+    this.checkInner.setAttribute("class", "ran-checkbox-inner");
+    this.container = create("div").setAttribute("class", "ran-checkbox").addChild([this.checkInput, this.checkInner]).element;
+    const shadowRoot = this.attachShadow({ mode: "closed" });
+    const F7170EE498E0DD32CBDCB63FBA8F75CC = document.createElement("style");
+    F7170EE498E0DD32CBDCB63FBA8F75CC.textContent = f7170ee498e0dd32cbdcb63fba8f75cc;
+    shadowRoot.appendChild(F7170EE498E0DD32CBDCB63FBA8F75CC);
+    this._shadowDom = shadowRoot;
+    shadowRoot.appendChild(this.container);
+    this.context = {
+      checked: false
+    };
+  }
+  static get observedAttributes() {
+    return ["disabled", "checked", "value"];
+  }
+  get disabled() {
+    return this.getAttribute("disabled") || "";
+  }
+  set disabled(value) {
+    this.setAttribute("disabled", value);
+  }
+  get value() {
+    const checked = this.getAttribute("value");
+    if (falseList.includes(checked)) {
+      this.context.checked = false;
+    }
+    return `${this.context.checked}`;
+  }
+  set value(value) {
+    if (falseList.includes(value)) {
+      this.setAttribute("value", "false");
+      this.context.checked = false;
+    } else {
+      this.setAttribute("value", "true");
+      this.context.checked = true;
+    }
+    this.updateChecked();
+  }
+  get checked() {
+    const checked = this.getAttribute("checked");
+    if (falseList.includes(checked)) {
+      this.context.checked = false;
+    }
+    return `${this.context.checked}`;
+  }
+  set checked(value) {
+    if (falseList.includes(value)) {
+      this.setAttribute("checked", "false");
+      this.context.checked = false;
+    } else {
+      this.setAttribute("checked", "true");
+      this.context.checked = true;
+    }
+    this.updateChecked();
+  }
+  connectedCallback() {
+    this.addEventListener("click", this.onChange);
+  }
+  disconnectCallback() {
+    this.removeEventListener("click", this.onChange);
+  }
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (oldValue !== newValue) {
+      if (name === "checked") {
+        this.checked = newValue;
+        this.value = newValue;
+      }
+      if (name === "value") {
+        this.checked = newValue;
+        this.value = newValue;
+      }
+    }
+  }
+}
+function Custom() {
+  if (typeof document !== "undefined" && !customElements.get("r-checkbox")) {
+    customElements.define("r-checkbox", Checkbox);
+    return Checkbox;
+  } else {
+    return createCustomError("document is undefined or r-checkbox is exist");
+  }
+}
+const index = Custom();
+const index$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  Checkbox,
+  default: index
+}, Symbol.toStringTag, { value: "Module" }));
+export {
+  Checkbox as C,
+  index as a,
+  index$1 as i
+};