ranui
Version:
UI Component library based on `Web Component`
188 lines (187 loc) • 11.6 kB
JavaScript
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 { b as currentDevice } from "./plus-BQnIzzvi.js";
import { c as createCustomError, H as HTMLElementSSR, i as isDisabled, f as falseList } from "./index-9tJmVuyv.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{box-sizing:var(--ran-btn-box-sizing, border-box);position:var(--ran-btn-position, relative);display:var(--ran-btn-display, inline-flex);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{box-sizing:var(--ran-btn-contain-box-sizing, border-box);position:var(--ran-btn-contain-position, relative);display:var(--ran-btn-contain-display, block);background-image:var(--ran-btn-contain-background-image, none);cursor:var(--ran-btn-contain-cursor, pointer);transition:var(--ran-btn-contain-transition, all .3s cubic-bezier(.645, .045, .355, 1));-webkit-user-select:var(--ran-btn-contain-user-select, none);user-select:var(--ran-btn-contain-user-select, none);touch-action:var(--ran-btn-contain-touch-action, manipulation);background:var(--ran-btn-contain-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:var(--ran-btn-contain-outline, 0)}: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%))}@media (min-width: 1024px){: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"]: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"]:not([disabled]):hover) .ran-btn-content{border-color:var(--ran-btn-content-warning-border-color, #ff4d4f);background-color:var(--ran-btn-content-warning-background-color, #ff4d4f);color:var(--ran-btn-content-warning-color, #fff)}}:host([type="warning"]) .ran-btn-content{border-color:var(--ran-btn-content-warning-border-color, #ff4d4f);background-color:var(--ran-btn-content-warning-background-color, #ff4d4f);color:var(--ran-btn-content-warning-color, #fff)}:host([type="warning"]:not([disabled])) .ran-btn:after{background-image:var(--ran-btn-after-background-image, radial-gradient(circle, #fff 10%, transparent 10.01%))}:host([type="text"]) .ran-btn-content{border:var(--ran-btn-content-text-border, none)}:host([disabled]){cursor:var(--ran-btn-disabled-cursor, not-allowed);pointer-events:var(--ran-btn-disabled-pointer-events, all);opacity:var(--ran-btn-disabled-opacity, .6)}:host([disabled]) .ran-btn{cursor:var(--ran-btn-disabled-container-cursor, not-allowed);pointer-events:var(--ran-btn-disabled-container-pointer-events, all);opacity:var(--ran-btn-disabled-container-opacity, .6)}:host(:not([disabled]):active) .ran-btn:after{transform:var(--ran-btn-after-transform, translate(-50%, -50%) scale(0));opacity:var(--ran-btn-after-opacity, .3);transition:var(--ran-btn-after-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:var(--ran-btn-slot-display, block)}.ran-btn-content{display:var(--ran-btn-content-display, flex);justify-content:var(--ran-btn-content-display, space-between);align-items:var(--ran-btn-content-align-items, center);padding:var(--ran-btn-content-padding, 4px 15px);border:var(--ran-btn-content-border, 1px solid transparent);border-radius:var(--ran-btn-content-border-radius, 2px);border-color:var(--ran-btn-content-border-color, #d9d9d9);color:var(--ran-btn-content-color, #000000d9);line-height:var(--ran-btn-content-line-height, 22px);font-size:var(--ran-btn-content-font-size, 14px);font-weight:var(--ran-btn-content-font-weight, 400);white-space:var(--ran-btn-content-white-space, nowrap);text-align:var(--ran-btn-content-text-align, center);box-sizing:var(--ran-btn-content-box-sizing, border-box)}.ran-btn-content .icon{margin-right:var(--ran-btn-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", () => {
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}, error: ${error}`);
}
}
});
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
};