@prop-styles/vue
Version:
Process CSS-related properties in Props so that they can generate the element style.
199 lines (198 loc) • 5.47 kB
JavaScript
/*!
* @prop-styles/vue version 1.0.3-beta
* Author: Capricorncd<capricorncd@qq.com>
* Homepage: https://github.com/capricorncd/prop-styles#readme
* Released on: 2025-11-09 10:56:23 (GMT+0000)
*/
import { computed as m } from "vue";
const b = {
xs: 640,
sm: 768,
md: 1024,
lg: 1280,
xl: 1536,
xxl: 1920
}, h = (e) => {
if (!e) return;
const r = Object.entries(e === !0 ? b : e).sort((t, o) => t[1] - o[1]);
if (!(typeof window > "u" || typeof window.matchMedia != "function"))
for (const [t, o] of r)
try {
if (window.matchMedia(`(min-width: ${o}px)`).matches)
return t;
} catch {
}
};
function f(e) {
return typeof e == "string" ? /^-?\d+(\.\d+)?$/.test(e) : g(e);
}
function g(e) {
return Number.isFinite(e);
}
const y = /^((-?\d+(\.\d+)?)?([a-z]+|%)?\s*)+$/i, w = /(\d+\s|\s-?\d+(\.\d+)?$)/;
function p(e, r = "px") {
if (f(e))
return `${e}${r}`;
if (e && typeof e == "string") {
const t = e.trim().replace(/\s{2,}/g, " ");
return y.test(t) && w.test(t) ? t.trim().split(" ").map((o) => p(o, r)).join(" ") : t;
}
return "";
}
function x(e) {
return e.replace(
/^-?[1-9]\d{0,2}(,\d{3})+/,
(r) => r.replace(/,/g, "")
);
}
function u(e, r = !1, t) {
if (typeof r == "number" && (t = r, r = !1), typeof t != "number" && (t = 0), g(e))
return e;
if (typeof e == "string") {
if (!r && /^(-?\d+(?:\.\d+)?)\D*/.test(x(e)))
return u(RegExp.$1, !0);
const o = Number(e);
return isNaN(o) ? t : o;
}
return t;
}
const k = /^(#[a-f0-9]{3,8}|(rgba?|hsla?|hwb|lab|lch|oklab|oklch|hwb|lch|light-dark)\(.+\))$/i, $ = /^--\w+(-\w+)*$/, j = /(\s)*--\w+(-\w+)*/;
function S(e) {
return typeof e != "string" ? !1 : k.test(e);
}
const R = (e) => e ? j.test(e) ? e.split(/\s+/g).map((r) => $.test(r) ? `var(${r})` : r).join(" ") : e : "", i = (e, r, t) => !r && r !== 0 ? null : { key: e, value: R(t ?? String(r)) }, O = (e, r) => {
const t = {};
let o;
for (const d of Object.keys(e)) {
if (o = r[d], !o) continue;
const l = o(e[d], e);
if (l)
if (Array.isArray(l))
l.forEach((n) => {
n && (t[n.key] = n.value);
});
else {
const { key: n, value: s } = l;
t[n] = s;
}
}
return t;
}, T = /^-?\d+(\.\d+)?[a-z]+$/i, W = (e) => typeof e == "string" && T.test(e), c = (e, r) => {
const t = r ? `border${r}` : "border";
return f(e) || W(e) ? { key: `${t}Width`, value: p(e) } : S(e) ? { key: `${t}Color`, value: e } : i(t, e);
}, B = {
display: "display",
width: "width",
minWidth: "minWidth",
maxWidth: "maxWidth",
height: "height",
minHeight: "minHeight",
maxHeight: "maxHeight",
gap: "gap",
fd: "flexDirection",
ai: "alignItems",
ac: "alignContent",
ji: "justifyItems",
jc: "justifyContent",
ws: "whiteSpace",
p: "padding",
pt: "paddingTop",
pr: "paddingRight",
pb: "paddingBottom",
pl: "paddingLeft",
px: "paddingInline",
py: "paddingBlock",
m: "margin",
mt: "marginTop",
mr: "marginRight",
mb: "marginBottom",
ml: "marginLeft",
mx: "marginInline",
my: "marginBlock",
radius: "borderRadius",
fs: "fontSize",
lh: "lineHeight",
color: "color",
bg: "background",
bgs: "backgroundSize",
bgo: "backgroundOrigin",
fw: "fontWeight",
border: "border",
borderTop: "borderTop",
borderRight: "borderRight",
borderBottom: "borderBottom",
borderLeft: "borderLeft",
gtc: "gridTemplateColumns",
gtr: "gridTemplateRows",
ta: "textAlign",
position: "position",
top: "top",
right: "right",
bottom: "bottom",
left: "left",
zIndex: "zIndex",
inset: "inset",
transform: "transform",
cursor: "cursor",
whiteSpace: "whiteSpace",
ratio: "aspectRatio"
}, v = {
column: (e) => i("flexDirection", e, "column"),
wrap: (e) => i("flexWrap", e, e === !0 ? "wrap" : String(e)),
breakWord: (e) => i("overflowWrap", e, "break-word"),
// overflow
scroll: (e) => i(
`overflow${typeof e == "string" ? e.toUpperCase() : ""}`,
e,
"auto"
),
shadow: (e) => i(
"boxShadow",
e,
e === !0 ? "0 2px 4px 0 rgba(0, 0, 0, 0.1)" : String(e)
),
flex: (e) => e === !0 ? i("display", "flex") : i("flex", e),
inline: (e) => i("display", e, "inline"),
nowrap: (e) => i("whiteSpace", e, "nowrap")
}, z = {
...Object.entries(B).reduce((e, [r, t]) => (e[r] = (o) => i(t, o, p(o)), e), {}),
...v,
border: (e) => c(e),
borderTop: (e) => c(e, "Top"),
borderRight: (e) => c(e, "Right"),
borderBottom: (e) => c(e, "Bottom"),
borderLeft: (e) => c(e, "Left"),
fw: (e) => i("fontWeight", e),
gtc: (e) => i("gridTemplateColumns", e, p(e, "fr")),
gtr: (e) => i("gridTemplateRows", e, p(e, "fr")),
zIndex: (e) => i("zIndex", e),
lh: (e) => i(
"lineHeight",
e,
f(e) && u(e) < 8 ? String(e) : p(e)
)
}, I = (e, r, t = {}) => {
const o = {
...z,
...r
}, d = t.breakpoint ?? h(t.breakpoints), l = (() => {
const n = {};
for (const s of Object.keys(e)) {
const a = e[s];
a !== null && typeof a == "object" && !Array.isArray(a) ? d && Object.prototype.hasOwnProperty.call(a, d) ? n[s] = a[d] : Object.prototype.hasOwnProperty.call(a, "default") ? n[s] = a.default : n[s] = a : n[s] = a;
}
return n;
})();
return O(l, o);
};
function L(e, r, t) {
return {
style: m(() => [e.style, I(e, r, t)])
};
}
export {
I as createPropStyles,
h as getDefaultBreakpoint,
i as transform,
L as usePropStyles
};