ranui
Version:
UI Component library based on `Web Component`
205 lines (204 loc) • 9.63 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 { p as perToNum } from "./plus-BQnIzzvi.js";
import { c as createCustomError, H as HTMLElementSSR } 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: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 HTMLElementSSR() {
constructor() {
super();
__publicField(this, "_progress");
__publicField(this, "_progressWrap");
__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 * 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;
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 * 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", () => {
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 = 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;
this._progress.addEventListener("click", this.progressClick);
this._progressDot.addEventListener("mousedown", this.progressDotMouseDown);
document.addEventListener("mousemove", this.progressDotMouseMove);
document.addEventListener("mouseup", this.progressDotMouseUp);
});
__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);
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
};
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;
}
get percent() {
const percent = this.getAttribute("percent") || "";
const num = perToNum(percent);
if (Number(num) > Number(this.total)) {
console.error("percent must be < total");
return this.total;
}
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)}`;
}
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() {
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);
document.removeEventListener("mousemove", this.progressDotMouseMove);
document.removeEventListener("mouseup", this.progressDotMouseUp);
window.removeEventListener("resize", this.resize);
}
attributeChangedCallback(k, o, n) {
if (o !== n) {
if (k === "dot") {
this.appendProgressDot();
}
if (k === "percent") {
this.updateCurrentProgress();
}
}
}
}
function Custom() {
if (typeof document !== "undefined" && !customElements.get("r-progress")) {
Progress && customElements.define("r-progress", Progress);
return 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
};