@tachui/modifiers
Version:
Essential styling modifiers for tachUI framework
283 lines (282 loc) • 8.05 kB
JavaScript
var p = Object.defineProperty;
var b = (r, i, e) => i in r ? p(r, i, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[i] = e;
var n = (r, i, e) => b(r, typeof i != "symbol" ? i + "" : i, e);
import { B as a } from "./base-CkGf4b9G.js";
class c extends a {
constructor() {
super(...arguments);
n(this, "type", "background");
n(this, "priority", 95);
}
apply(e, t) {
if (!t.element) return;
const o = t.element, d = this.resolveBackground(this.properties.background);
d && (o.style.background = d);
}
resolveBackground(e) {
return typeof e == "string" ? e : typeof e == "object" && e !== null && "resolve" in e ? e.resolve() : typeof e == "object" && e !== null && "value" in e ? e.value : String(e);
}
}
class y extends a {
constructor() {
super(...arguments);
n(this, "type", "backgroundClip");
n(this, "priority", 40);
}
apply(e, t) {
if (!t.element) return;
const o = this.computeBackgroundClipStyles(this.properties);
this.applyStyles(t.element, o);
}
computeBackgroundClipStyles(e) {
const t = {};
return e.backgroundImage && (t.backgroundImage = e.backgroundImage), e.backgroundClip && (t.backgroundClip = e.backgroundClip, t.webkitBackgroundClip = e.backgroundClip), e.color && (t.color = e.color, e.backgroundClip === "text" && (t.webkitTextFillColor = e.color)), t;
}
}
function w(r) {
return new c({ background: r });
}
function B(r) {
return new c({ background: r });
}
function R(r, i = "text", e = "transparent") {
return new y({
backgroundImage: r,
backgroundClip: i,
color: e
});
}
function s(r) {
return new y({
backgroundImage: r,
backgroundClip: "text",
color: "transparent"
});
}
function k() {
return s("linear-gradient(45deg, #007AFF, #5856D6)");
}
function T() {
return s(
"linear-gradient(90deg, #ff0000, #ff8000, #ffff00, #80ff00, #00ff80, #0080ff, #8000ff)"
);
}
function x() {
return s("linear-gradient(45deg, #ff6b6b, #feca57, #ff9ff3)");
}
function L() {
return s("linear-gradient(45deg, #667eea, #764ba2)");
}
function $() {
return s("linear-gradient(45deg, #f7971e, #ffd200)");
}
class l extends a {
constructor() {
super(...arguments);
n(this, "type", "border");
n(this, "priority", 40);
}
apply(e, t) {
if (!t.element) return;
const o = this.computeBorderStyles(this.properties);
this.applyStyles(t.element, o);
}
computeBorderStyles(e) {
const t = {}, o = this.resolveBorderSides(e);
return !(o.top || o.right || o.bottom || o.left || e.all) && (e.width !== void 0 || e.color !== void 0 || e.style !== void 0) && (e.width !== void 0 && (t.borderWidth = this.formatBorderWidth(e.width)), e.color !== void 0 && (t.borderColor = e.color), e.style !== void 0 && (t.borderStyle = e.style)), e.all !== void 0 && (e.all.width !== void 0 && (t.borderWidth = this.formatBorderWidth(e.all.width)), e.all.color !== void 0 && (t.borderColor = e.all.color), e.all.style !== void 0 && (t.borderStyle = e.all.style)), o.top !== void 0 && this.applySideBorder(t, o.top, "Top"), o.right !== void 0 && this.applySideBorder(t, o.right, "Right"), o.bottom !== void 0 && this.applySideBorder(t, o.bottom, "Bottom"), o.left !== void 0 && this.applySideBorder(t, o.left, "Left"), t;
}
resolveBorderSides(e) {
return {
top: e.top || e.vertical,
right: e.right || e.trailing || e.horizontal,
bottom: e.bottom || e.vertical,
left: e.left || e.leading || e.horizontal
};
}
applySideBorder(e, t, o) {
t.width !== void 0 && (e[`border${o}Width`] = this.formatBorderWidth(t.width)), t.color !== void 0 && (e[`border${o}Color`] = t.color), t.style !== void 0 && (e[`border${o}Style`] = t.style);
}
formatBorderWidth(e) {
return typeof e == "number" ? `${e}px` : e;
}
}
class g extends a {
constructor() {
super(...arguments);
n(this, "type", "cornerRadius");
n(this, "priority", 35);
}
apply(e, t) {
if (!t.element) return;
const o = this.computeCornerRadiusStyles(this.properties.radius);
this.applyStyles(t.element, o);
}
computeCornerRadiusStyles(e) {
return typeof e == "number" || typeof e == "string" ? { borderRadius: this.formatRadius(e) } : this.generateCornerRadiusCSS(e);
}
generateCornerRadiusCSS(e) {
const t = this.resolveCornerValues(e), o = {};
return Object.entries(t).forEach(([d, u]) => {
if (u !== void 0) {
const f = this.cornerToCSSProperty(
d
);
o[f] = this.formatRadius(u);
}
}), o;
}
cornerToCSSProperty(e) {
return {
topLeft: "borderTopLeftRadius",
topRight: "borderTopRightRadius",
bottomLeft: "borderBottomLeftRadius",
bottomRight: "borderBottomRightRadius"
}[e];
}
resolveCornerValues(e) {
return {
topLeft: e.topLeft ?? e.topLeading ?? e.top ?? e.left,
topRight: e.topRight ?? e.topTrailing ?? e.top ?? e.right,
bottomLeft: e.bottomLeft ?? e.bottomLeading ?? e.bottom ?? e.left,
bottomRight: e.bottomRight ?? e.bottomTrailing ?? e.bottom ?? e.right
};
}
formatRadius(e) {
return typeof e == "number" ? `${e}px` : e;
}
}
function M(r, i, e) {
return typeof r == "number" || typeof r == "string" ? new l({
width: r,
color: i || "currentColor",
style: e || "solid"
}) : new l(r);
}
function P(r, i, e) {
return new l({ top: { width: r, color: i, style: e } });
}
function _(r, i, e) {
return new l({ right: { width: r, color: i, style: e } });
}
function z(r, i, e) {
return new l({ bottom: { width: r, color: i, style: e } });
}
function F(r, i, e) {
return new l({ left: { width: r, color: i, style: e } });
}
function G(r, i, e) {
return new l({ leading: { width: r, color: i, style: e } });
}
function j(r, i, e) {
return new l({ trailing: { width: r, color: i, style: e } });
}
function I(r, i, e) {
return new l({ horizontal: { width: r, color: i, style: e } });
}
function V(r, i, e) {
return new l({ vertical: { width: r, color: i, style: e } });
}
function W(r) {
return new g({ radius: r });
}
class h extends a {
constructor() {
super(...arguments);
n(this, "type", "foreground");
n(this, "priority", 90);
}
apply(e, t) {
if (!t.element) return;
const o = t.element;
o.style.color = this.properties.color;
}
}
function A(r) {
return new h({ color: r });
}
function X(r) {
return new h({ color: r });
}
class m extends a {
constructor() {
super(...arguments);
n(this, "type", "clip-shape");
n(this, "priority", 90);
}
apply(e, t) {
if (!t.element) return;
const o = t.element;
if (!o.style) return;
const { shape: d, parameters: u = {} } = this.properties, f = this.generateClipPath(d, u);
f && (o.style.clipPath = f);
}
generateClipPath(e, t) {
switch (e) {
case "circle":
return "circle(50%)";
case "ellipse": {
const o = t && t.radiusX || "50%", d = t && t.radiusY || "50%";
return `ellipse(${o} ${d} at center)`;
}
case "rect":
return `inset(${t && t.inset || 0}px)`;
case "polygon": {
const o = t && t.points;
return o ? `polygon(${o})` : "";
}
default:
return "";
}
}
}
function Y(r, i) {
return new m({ shape: r, parameters: i || {} });
}
class v extends a {
constructor() {
super(...arguments);
n(this, "type", "clipped");
n(this, "priority", 89);
}
apply(e, t) {
if (!t.element) return;
const o = t.element;
o.style && (this.properties.clipped ? o.style.overflow = "hidden" : o.style.overflow = "");
}
}
function q(r = !0) {
return new v({ clipped: r });
}
export {
q as A,
c as B,
g as C,
h as F,
y as a,
w as b,
B as c,
R as d,
k as e,
$ as f,
s as g,
l as h,
M as i,
P as j,
_ as k,
z as l,
F as m,
G as n,
L as o,
j as p,
I as q,
T as r,
x as s,
V as t,
W as u,
A as v,
X as w,
m as x,
Y as y,
v as z
};
//# sourceMappingURL=clipped-CCW8gJqJ.js.map