ranui 0.1.8 → 0.1.10-alpha.1

package/dist/index-BPBRPxND.js

@@ -0,0 +1,195 @@
+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 { c as currentDevice } from "./utils-BMBEcoPj.js";
+import { H as HTMLElementSSR, i as isDisabled, f as falseList, c as createCustomError } from "./index-CSnBqUsQ.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-btn-position, relative);display:var(--ran-btn-display, inline-block);background-image:var(--ran-btn-background-image, none);box-shadow:var(--ran-btn-box-shadow, 0 2px #00000004);cursor:var(--ran-btn-cursor, pointer);-webkit-user-select:var(--ran-btn-user-select, none);user-select:var(--ran-btn-user-select, none);touch-action:var(--ran-btn-touch-action, manipulation);overflow:var(--ran-btn-overflow, hidden);pointer-events:var(--ran-btn-pointer-events, auto)}:host .ran-btn{position:relative;display:inline-block;background-image:none;cursor:pointer;transition:all .3s cubic-bezier(.645,.045,.355,1);-webkit-user-select:none;user-select:none;touch-action:manipulation;background:#fff}:host,:host(:active),:host(:focus){outline:0;-webkit-tap-highlight-color:transparent}:host .ran-btn,:host(:active) .ran-btn,:host(:focus) .ran-btn{outline:0}:host(:not([disabled]):hover) .ran-btn-content{border-color:var(--ran-btn-content-hover-border-color, #1890ff);color:var(--ran-btn-content-hover-color, #1890ff)}:host([type="primary"]) .ran-btn-content{background-color:var(--ran-btn-content-background-color, #1890ff);border-color:var(--ran-btn-content-border-color, #1890ff);color:var(--ran-btn-content-color, #fff)}:host([type="primary"]:not([disabled])) .ran-btn:after{background-image:var(--ran-btn-after-background-image, radial-gradient(circle, #fff 10%, transparent 10.01%))}:host([type="primary"]:not([disabled]):hover) .ran-btn-content{background-color:var(--ran-btn-content-hover-background-color, #40a9ff);color:var(--ran-btn-content-hover-color, #fff)}:host([type="warning"]) .ran-btn-content{border-color:#ff4d4f;background-color:#ff4d4f;color:#fff}:host([type="warning"]:not([disabled])) .ran-btn:after{background-image:radial-gradient(circle,#fff 10%,transparent 10.01%)}:host([type="warning"]:not([disabled]):hover) .ran-btn-content{border-color:#ff4d4f;background-color:#ff4d4f;color:#fff}:host([type="text"]) .ran-btn-content{border:none}:host([disabled]){cursor:not-allowed;pointer-events:all;opacity:.6}:host([disabled]) .ran-btn{cursor:not-allowed;pointer-events:all;opacity:.6}:host(:not([disabled]):active) .ran-btn:after{transform:translate(-50%,-50%) scale(0);opacity:.3;transition:0s}@media (min-width: 1024px){:host(:not([disabled],[effect])) .ran-btn:after{content:"";display:block;position:absolute;width:100%;height:100%;left:var(--ran-x, 0);top:var(--ran-y, 0);pointer-events:none;background-image:radial-gradient(circle,#1890ff 10%,transparent 10.01%);background-repeat:no-repeat;background-position:50%;transform:translate(-50%,-50%) scale(10);opacity:0;transition:transform .3s,opacity .8s}}:host .slot{display:block}.ran-btn-content{display:flex;justify-content:space-between;align-items:center;padding:4px 15px;border:1px solid transparent;border-radius:2px;border-color:#d9d9d9;color:#000000d9;line-height:22px;font-size:14px;font-weight:400;white-space:nowrap;text-align:center}.ran-btn-content .icon{margin-right:2px}';
+class Button extends HTMLElementSSR() {
+  constructor() {
+    super();
+    __publicField(this, "_btn");
+    __publicField(this, "_btnContent");
+    __publicField(this, "_iconElement");
+    __publicField(this, "_slot");
+    __publicField(this, "_shadowDom");
+    __publicField(this, "debounceTimeId");
+    /**
+     * @description: 设置 button 的 icon
+     * @return {*}
+     */
+    __publicField(this, "setIcon", () => {
+      if (this.icon) {
+        const { width, height } = this._slot.getBoundingClientRect();
+        const size = Math.min(width, height);
+        if (this._iconElement) {
+          this._iconElement.setAttribute("name", this.icon);
+        } else {
+          this._iconElement = document.createElement("r-icon");
+          this._iconElement.setAttribute("name", this.icon);
+          this._iconElement.setAttribute("color", "currentColor");
+          this._iconElement.setAttribute("class", "icon");
+          this._slot.insertAdjacentElement("beforebegin", this._iconElement);
+        }
+        if (this.iconSize) {
+          this._iconElement.setAttribute("size", this.iconSize);
+        } else {
+          this._iconElement.setAttribute("size", `${size - 5}`);
+        }
+      }
+    });
+    __publicField(this, "mousedown", (event) => {
+      if (currentDevice() !== "pc")
+        return;
+      if (!this.disabled || this.disabled === "false") {
+        this.debounceMouseEvent();
+        const { left, top } = this.getBoundingClientRect();
+        this._btn.style.setProperty("--ran-x", event.clientX - left + "px");
+        this._btn.style.setProperty("--ran-y", event.clientY - top + "px");
+      }
+    });
+    __publicField(this, "mouseup", (event) => {
+      if (currentDevice() !== "pc")
+        return;
+      if (this.debounceTimeId)
+        return;
+      this.debounceTimeId = setTimeout(() => {
+        this._btn.style.removeProperty("--ran-x");
+        this._btn.style.removeProperty("--ran-y");
+        this.debounceMouseEvent();
+      }, 600);
+    });
+    __publicField(this, "debounceMouseEvent", () => {
+      clearTimeout(this.debounceTimeId);
+      this.debounceTimeId = void 0;
+    });
+    __publicField(this, "handlerExternalCss", () => {
+      if (this.sheet) {
+        try {
+          const sheet = new CSSStyleSheet();
+          sheet.insertRule(this.sheet);
+          this._shadowDom.adoptedStyleSheets = [sheet];
+        } catch (error) {
+          console.error(`Failed to parse the rule in CSSStyleSheet: ${this.sheet}`);
+        }
+      }
+    });
+    this._slot = document.createElement("slot");
+    this._btnContent = document.createElement("div");
+    this._btn = document.createElement("div");
+    this._btn.setAttribute("class", "ran-btn");
+    this._btn.setAttribute("part", "ran-btn");
+    this._btnContent.setAttribute("class", "ran-btn-content");
+    this._btnContent.setAttribute("part", "ran-btn-content");
+    this._btnContent.appendChild(this._slot);
+    this._slot.setAttribute("class", "slot");
+    const shadowRoot = this.attachShadow({ mode: "closed" });
+    const F7170EE498E0DD32CBDCB63FBA8F75CC = document.createElement("style");
+    F7170EE498E0DD32CBDCB63FBA8F75CC.textContent = f7170ee498e0dd32cbdcb63fba8f75cc;
+    shadowRoot.appendChild(F7170EE498E0DD32CBDCB63FBA8F75CC);
+    this._shadowDom = shadowRoot;
+    this._btn.appendChild(this._btnContent);
+    shadowRoot.appendChild(this._btn);
+  }
+  static get observedAttributes() {
+    return ["disabled", "icon", "effect", "iconSize", "sheet"];
+  }
+  get sheet() {
+    return this.getAttribute("sheet") || "";
+  }
+  set sheet(value) {
+    this.setAttribute("sheet", value || "");
+  }
+  get disabled() {
+    return isDisabled(this);
+  }
+  set disabled(value) {
+    if (!value || value === "false") {
+      this.removeAttribute("disabled");
+      this.removeAttribute("aria-disabled");
+    } else {
+      this.setAttribute("disabled", "");
+      this.setAttribute("aria-disabled", "true");
+    }
+  }
+  get iconSize() {
+    return this.getAttribute("iconSize") || "";
+  }
+  set iconSize(value) {
+    if (!value || value === "false") {
+      this.removeAttribute("iconSize");
+    } else {
+      this.setAttribute("iconSize", value);
+      this.setIcon();
+    }
+  }
+  get icon() {
+    return this.getAttribute("icon") || "";
+  }
+  set icon(value) {
+    if (!value || value === "false") {
+      this.removeAttribute("icon");
+    } else {
+      this.setAttribute("icon", value);
+      this.setIcon();
+    }
+  }
+  get effect() {
+    return this.getAttribute("effect") || "";
+  }
+  set effect(value) {
+    if (falseList.includes(value) || !value) {
+      this.removeAttribute("effect");
+    } else {
+      this.setAttribute("effect", value);
+    }
+  }
+  connectedCallback() {
+    this._btn.addEventListener("mousedown", this.mousedown);
+    this._btn.addEventListener("mouseup", this.mouseup);
+    this.handlerExternalCss();
+    this.setIcon();
+    this.setAttribute("role", "button");
+    this.setAttribute("tabindex", "0");
+  }
+  disconnectCallback() {
+    this._btn.removeEventListener("mousedown", this.mousedown);
+    this._btn.removeEventListener("mouseup", this.mouseup);
+  }
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (name === "disabled" && this._btnContent) {
+      if (!newValue || newValue === "false") {
+        this._btnContent.setAttribute("disabled", "");
+      } else {
+        this._btnContent.removeAttribute("disabled");
+      }
+    }
+    if (name === "icon" && this._btnContent && oldValue !== newValue)
+      this.setIcon();
+    if (name === "iconSize" && this._btnContent && oldValue !== newValue)
+      this._btnContent.setAttribute("iconSize", newValue);
+    if (name === "sheet" && this._shadowDom && oldValue !== newValue)
+      this.handlerExternalCss();
+  }
+}
+function Custom() {
+  if (typeof document !== "undefined" && !customElements.get("r-button")) {
+    customElements.define("r-button", Button);
+    return Button;
+  } else {
+    return createCustomError("document is undefined or r-button is exist");
+  }
+}
+const index = Custom();
+const index$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  Button,
+  default: index
+}, Symbol.toStringTag, { value: "Module" }));
+export {
+  Button as B,
+  index as a,
+  index$1 as i
+};

package/dist/{index-b90299ca.js → index-BpOERe9M.js}

@@ -4,7 +4,7 @@ var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
-const f7170ee498e0dd32cbdcb63fba8f75cc = '@keyframes skeleton{0%{transform:translate(-37.5%)}to{transform:translate(37.5%)}}.ran-skeleton{position:relative;z-index:0;overflow:hidden;background:0 0;width:100%;height:16px;background:rgba(0,0,0,.06);border-radius:4px}.ran-skeleton:after{position:absolute;top:0;inset-inline-end:-150%;bottom:0;inset-inline-start:-150%;background:linear-gradient(90deg,rgba(0,0,0,.06) 25%,rgba(0,0,0,.15) 37%,rgba(0,0,0,.06) 63%);animation-name:skeleton;animation-duration:1.4s;animation-timing-function:ease;animation-iteration-count:infinite;content:""}\n';
+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}@keyframes skeleton{0%{transform:translate(-37.5%)}to{transform:translate(37.5%)}}.ran-skeleton{position:relative;z-index:0;overflow:hidden;background:0 0;width:100%;height:16px;background:#0000000f;border-radius:4px}.ran-skeleton:after{position:absolute;top:0;inset-inline-end:-150%;bottom:0;inset-inline-start:-150%;background:linear-gradient(90deg,#0000000f 25%,#00000026 37%,#0000000f 63%);animation-name:skeleton;animation-duration:1.4s;animation-timing-function:ease;animation-iteration-count:infinite;content:""}';
 function Skeleton() {
   if (typeof window !== "undefined" && !customElements.get("r-skeleton")) {
     class CustomElement extends HTMLElement {