@prop-styles/vue
Version:
Process CSS-related properties in Props so that they can generate the element style.
238 lines (237 loc) • 4.94 kB
JavaScript
/*!
* @prop-styles/vue version 0.0.9
* Author: Capricorncd<capricorncd@qq.com>
* Homepage: https://github.com/capricorncd/prop-styles#readme
* Released on: 2024-05-08 21:52:46 (GMT+0900)
*/
import { computed as c } from "vue";
/*!
* @prop-styles/core version 0.0.11
* Author: Capricorncd<capricorncd@qq.com>
* Homepage: https://github.com/capricorncd/prop-styles#readme
* Released on: 2024-05-08 21:52:09 (GMT+0900)
*/
/*!
* @zx-libs/utils version 0.0.5
* Author: Capricorncd<capricorncd@qq.com>
* Homepage: https://github.com/capricorncd/zx-libs/libs/utils#readme
* Released on: 2024-04-30 20:19:27 (GMT+0900)
*/
/*!
* date-utils-2020 v1.1.1
* Author: Capricorncd
* Repository: https://github.com/capricorncd/date-utils-2020#readme
* Released on: 2024/04/02 21:28:40 GMT+0900
*/
function f(t) {
return typeof t == "string" ? /^-?\d+(\.\d+)?$/.test(t) : m(t);
}
function m(t) {
return Number.isFinite(t);
}
const u = /^((-?\d+(\.\d+)?)?([a-z]+|%)?\s*)+$/i, h = /(\d+\s|\s-?\d+(\.\d+)?$)/;
function s(t, n = "px") {
if (f(t))
return `${t}${n}`;
if (t && typeof t == "string") {
const i = t.trim().replace(/\s{2,}/g, " ");
return u.test(i) && h.test(i) ? i.trim().split(" ").map((e) => s(e, n)).join(" ") : i;
}
return "";
}
function b(t = "", n = "-") {
return t.replace(
/[A-Z]/g,
(i, e) => `${e > 0 ? n : ""}${i.toLowerCase()}`
);
}
function y(t) {
return typeof t == "boolean";
}
const w = /^(#[a-f0-9]{3,8}|(rgba?|hsla?|hwb|lab|lch|oklab|oklch|hwb|lch|light-dark)\(.+\))$/i;
function x(t) {
return typeof t != "string" ? !1 : w.test(t);
}
function k(t, n, i) {
return !n && n !== 0 ? null : [t, i ?? String(n)];
}
const o = k;
function l(t, n, i) {
t.forEach((e) => {
i[e] = (a) => n(e, a);
});
}
function j(t, n) {
return l(
t,
(i, e) => o("display", e, b(i)),
n
);
}
function C(t, n) {
return l(
t,
(i, e) => o(i, e, s(e)),
n
);
}
function I(t, n) {
return l(
t,
(i, e) => o(i, e),
n
);
}
const $ = /^-?\d+(\.\d+)?[a-z]+$/i;
function B(t) {
return typeof t == "string" && $.test(t);
}
function R(t) {
return f(t) || B(t) ? ["borderWidth", s(t)] : x(t) ? ["borderColor", t] : o("border", t);
}
function W(t, n, i) {
let e;
for (const a of Object.keys(t))
if (e = n[a], e) {
const g = e(t[a], t);
if (g) {
const [d, p] = g;
i[d] = p;
}
}
}
const S = {
p: "padding",
pt: "paddingTop",
pb: "paddingBottom",
pl: "paddingLeft",
pr: "paddingRight",
px: "paddingInline",
py: "paddingBlock",
m: "margin",
mt: "marginTop",
mb: "marginBottom",
ml: "marginLeft",
mr: "marginRight",
mx: "marginInline",
my: "marginBlock",
fs: "fontSize",
lh: "lineHeight",
bg: "background",
fw: "fontWeight",
ta: "textAlign",
gtc: "tempColumns",
gtr: "tempRows",
align: "alignItems",
ai: "alignItems",
ac: "alignContent",
ji: "justifyItems",
justify: "justifyContent",
jc: "justifyContent",
t: "top",
r: "right",
l: "left",
b: "bottom",
z: "zIndex",
tf: "transform"
}, z = [
"width",
"minWidth",
"maxWidth",
"height",
"minHeight",
"maxHeight",
"padding",
"paddingTop",
"paddingBottom",
"paddingLeft",
"paddingRight",
"paddingInline",
"paddingBlock",
"margin",
"marginTop",
"marginBottom",
"marginLeft",
"marginRight",
"marginInline",
"marginBlock",
"gap",
"fontSize",
"lineHeight",
"top",
"right",
"bottom",
"left",
"inset"
], T = [
"background",
"color",
"alignItems",
"alignContent",
"justifyContent",
"justifyItems",
"fontWeight",
"whiteSpace",
"textAlign",
"position",
"zIndex",
"transform"
], L = [
"flex",
"grid",
"inline",
"inlineFlex",
"inlineBlock"
], r = {
radius: (t) => o("borderRadius", t, s(t)),
column: (t) => o("flexDirection", t, "column"),
wrap: (t) => o("flexWrap", t, y(t) ? "wrap" : t),
breakWord: (t) => o("overflowWrap", t, "break-word"),
// font
bold: (t) => o("fontWeight", t, "bold"),
thin: (t) => o("fontWeight", t, "500"),
// overflow
scroll: (t) => o(`overflow${typeof t == "string" ? t.toUpperCase() : ""}`, t, "auto"),
// border
border: (t) => R(t),
tempColumns: (t) => o("gridTemplateColumns", t, s(t, "fr")),
tempRows: (t) => o("gridTemplateRows", t, s(t, "fr")),
nowrap: (t) => o("whiteSpace", t, "nowrap")
};
j(L, r);
C(z, r);
I(T, r);
for (const [t, n] of Object.entries(S))
if (r[n])
r[t] = r[n];
else
throw new Error(`The alias of ${t} does not exist`);
function A(t, n) {
const i = {
...t.style
}, e = {
...r,
...n
};
return W(t, e, i), i;
}
function E(t, n) {
return {
style: c(() => {
const e = [t.style].flat(), a = A(
{
...t,
style: {}
},
n
);
return e.push(a), e;
})
};
}
export {
A as createPropStyles,
o as f,
k as formatReturn,
E as usePropStyles
};