ranui
Version:
A framework-agnostic Web Components UI library built on native custom elements, with TypeScript types, light/dark theming, SSR and PWA support.
124 lines (123 loc) • 7 kB
JavaScript
import { a as n, m as i, n as p, o as h, r as g, t as u } from "./utils-D1iZnChu.js";
import { t as l } from "./events-C59wGdni.js";
import { i as o } from "./factory-ZNhcQ4tf.js";
import { a as c, n as d } from "./ssr-DSGwPtEd.js";
var v = ".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{display:block;height:var(--ran-progress-height, 20px)}:host:active,:host:focus{outline:0;-webkit-tap-highlight-color:transparent}:host(:focus-visible){outline:var(--ran-progress-focus-outline, 2px solid var(--ran-color-primary, #006bff));outline-offset:var(--ran-progress-focus-outline-offset, 2px);border-radius:var(--ran-radius-full, 9999px)}.ran-progress{position:var(--ran-progress-position, relative);cursor:var(--ran-progress-cursor, pointer);width:var(--ran-progress-width, 100%);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, var(--ran-gray-200, #ebebeb));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:scaleX(var(--progress-percent, 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:calc(var(--progress-percent, 0) * 100%);transform:translate(-50%);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)}", b = [
"percent",
"type",
"total",
"dot",
"sheet"
], f = class extends d {
_progress;
_progressWrap;
_progressWrapValue;
_progressDot;
_shadowDom;
_events = new l();
moveProgress = { mouseDown: !1 };
static get observedAttributes() {
return b;
}
constructor() {
super(), this._shadowDom = p(this, v);
const r = u(this._shadowDom, ".ran-progress", () => o().class("ran-progress").role("progressbar").children(o().class("ran-progress-wrap").part("track").children(o().class("ran-progress-wrap-value").part("fill")), o().class("ran-progress-dot").part("dot")).build());
this._progress = r, this._progressWrap = r.querySelector(".ran-progress-wrap"), this._progressWrapValue = r.querySelector(".ran-progress-wrap-value"), this._progressDot = r.querySelector(".ran-progress-dot");
}
get percent() {
const r = i(this.getAttribute("percent") || "0"), t = Number(this.total);
return r > t ? String(t) : String(r);
}
set percent(r) {
this.setAttribute("percent", r || "0"), this.setAttribute("aria-valuenow", r || "0");
}
get total() {
const r = this.getAttribute("total");
return r ? `${i(r)}` : "100";
}
set total(r) {
this.setAttribute("total", r || "100");
}
get type() {
const r = this.getAttribute("type") || "primary";
return ["primary", "drag"].includes(r) ? r : "primary";
}
set type(r) {
this.setAttribute("type", r || "primary");
}
get dot() {
const r = this.getAttribute("dot") || "true";
return ["true", "false"].includes(r) ? r : "true";
}
set dot(r) {
this.setAttribute("dot", r || "true");
}
get sheet() {
return g(this, "sheet");
}
set sheet(r) {
n(this, "sheet", r);
}
handlerExternalCss = () => {
h(this, this._shadowDom, "sheet", null, this.sheet);
};
progressClick = (r) => {
if (this.type !== "drag") return;
const t = this._progress.getBoundingClientRect(), e = r.clientX - t.left, s = Math.min(1, Math.max(0, e / this._progress.offsetWidth)), a = s * Number(this.total);
this.percent = String(a), this.updateUI(s), this.change();
};
progressDotMouseDown = (r) => {
this.moveProgress.mouseDown = !0, r.stopPropagation();
};
progressDotMouseMove = (r) => {
if (!this.moveProgress.mouseDown) return;
const t = this._progress.getBoundingClientRect(), e = r.clientX - t.left, s = Math.min(1, Math.max(0, e / this._progress.offsetWidth)), a = s * Number(this.total);
this.percent = String(a), this.updateUI(s), this.change();
};
progressDotMouseUp = () => {
this.moveProgress.mouseDown = !1;
};
updateUI = (r) => {
this.style.setProperty("--progress-percent", String(r));
};
_preSerialize() {
const r = Number(this.getAttribute("percent") || "0"), t = Number(this.getAttribute("total") || "100"), e = Math.min(1, Math.max(0, r / t));
this.style.setProperty("--progress-percent", String(e));
}
change = () => {
this.dispatchEvent(new CustomEvent("change", { detail: {
value: this.percent,
percent: this.percent,
total: this.total
} }));
};
appendProgressDot = () => {
if (!this._progress || !this._progressDot) return;
const r = this.dot === "true" && this.type === "drag";
r && !this._progress.contains(this._progressDot) && this._progress.appendChild(this._progressDot), !r && this._progress.contains(this._progressDot) && this._progress.removeChild(this._progressDot);
};
updateCurrentProgress = () => {
if (!this._progress) return;
const r = Number(this.total) || 100, t = Number(this.percent) / r;
this.updateUI(t);
};
dragEvent = () => {
this.type === "drag" && this._events.on(this._progress, "click", this.progressClick).on(this._progressDot, "mousedown", this.progressDotMouseDown).on(document, "mousemove", this.progressDotMouseMove).on(document, "mouseup", this.progressDotMouseUp);
};
resize = () => {
this.updateCurrentProgress();
};
connectedCallback() {
this.handlerExternalCss(), this.hasAttribute("type") || this.setAttribute("type", "primary"), this.dragEvent(), this.updateCurrentProgress(), this.appendProgressDot(), this._events.on(window, "resize", this.resize);
}
disconnectedCallback() {
this._events.abort();
}
attributeChangedCallback(r, t, e) {
t !== e && ((r === "dot" || r === "type") && this.appendProgressDot(), (r === "percent" || r === "total") && this.updateCurrentProgress(), r === "sheet" && this.handlerExternalCss());
}
};
c("r-progress", f);
export {
f as t
};