maz-ui
Version:
A standalone components library for Vue.Js 3 & Nuxt.Js 3
359 lines (358 loc) • 9.07 kB
JavaScript
import { reactive } from "vue";
import { MazUiTranslations } from "@maz-ui/translations";
function l(n2) {
const t2 = n2.match(/^(\d+(?:\.\d+)?)\s+(\d+(?:\.\d+)?)%\s+(\d+(?:\.\d+)?)%$/);
if (!t2)
throw new Error(`Invalid HSL format: ${n2}`);
return {
h: Number.parseFloat(t2[1]),
s: Number.parseFloat(t2[2]),
l: Number.parseFloat(t2[3])
};
}
function i(n2, t2, r) {
const o2 = Math.round(n2 * 10) / 10, s = Math.round(t2 * 10) / 10, e = Math.round(r * 10) / 10;
return `${o2} ${s}% ${e}%`;
}
const d = {
50: 37.5,
100: 30,
200: 22.5,
300: 15,
400: 7.5,
500: 0,
600: -7.5,
700: -15,
800: -22.5,
900: -30,
950: -37.5
};
function p$1(n2, t2, r) {
if (t2 === n2)
return 1;
const o2 = Math.min(r / 100, 1), s = Math.abs(t2 - n2);
if (t2 < n2) {
const e = s / 500 * 0.25 * o2;
return Math.max(0.3, 1 - e);
} else {
const e = s / 400 * 0.15 * o2;
return Math.min(1.3, 1 + e);
}
}
function b(n2) {
const { h: t2, s: r, l: o2 } = l(n2), s = 500, e = o2, m2 = Object.keys(d).map(Number), u2 = {};
return m2.forEach((c2) => {
if (c2 === s)
u2[c2] = i(t2, r, o2);
else {
const h2 = c2 < s, f2 = c2 > s, M2 = d[c2];
let a;
h2 && o2 >= 100 ? a = e : a = e + M2, f2 && o2 <= 0 && (a = 0), a = Math.min(100, Math.max(0, a));
const S2 = p$1(s, c2, r), L2 = Math.min(100, Math.max(5, r * S2));
u2[c2] = i(t2, L2, a);
}
}), u2;
}
const h = [
"background",
"foreground",
"primary",
"primary-foreground",
"secondary",
"secondary-foreground",
"accent",
"accent-foreground",
"destructive",
"destructive-foreground",
"success",
"success-foreground",
"warning",
"warning-foreground",
"info",
"info-foreground",
"contrast",
"contrast-foreground",
"muted",
"shadow",
"border"
], C = [
"radius",
"font-family",
"base-font-size",
"border-width"
], S = ["primary", "secondary", "accent", "destructive", "success", "warning", "info", "contrast", "background", "foreground", "border", "muted", "overlay", "shadow"];
function j(r, t2 = {
mode: "both",
darkSelectorStrategy: "class"
}) {
const {
criticalColors: e = h,
criticalFoundation: o2 = C,
mode: n2,
darkSelectorStrategy: l2,
prefix: i2 = "maz"
} = t2, s = y(r.foundation, o2);
let c2 = `@layer maz-ui-theme {
`;
if (n2 === "light" || n2 === "both") {
const a = m(r.colors.light, e);
c2 += f$1({
selector: ":root",
colors: a,
foundation: s,
prefix: i2
});
}
if (n2 === "dark" || n2 === "both") {
const a = m(r.colors.dark, e);
c2 += f$1({
selector: l2 === "media" ? ":root" : ".dark",
mediaQuery: l2 === "media" ? "@media (prefers-color-scheme: dark)" : void 0,
colors: a,
foundation: s,
prefix: i2
});
}
return c2 += `}
`, c2;
}
function p(r, t2 = {
mode: "both",
darkSelectorStrategy: "class"
}) {
const {
excludeCritical: e = h,
mode: o2,
darkSelectorStrategy: n2,
prefix: l2 = "maz",
includeColorScales: i2 = !0
} = t2, s = k$1(r.foundation, C);
let c2 = `@layer maz-ui-theme {
`;
if (o2 === "light" || o2 === "both") {
const a = g$1(r.colors.light, e);
c2 += f$1({
selector: ":root",
colors: a,
foundation: s,
prefix: l2,
includeScales: i2,
preset: r
});
}
if (o2 === "dark" || o2 === "both") {
const a = g$1(r.colors.dark, e);
c2 += f$1({
selector: n2 === "media" ? ":root" : ".dark",
mediaQuery: n2 === "media" ? "@media (prefers-color-scheme: dark)" : void 0,
colors: a,
foundation: o2 === "dark" ? s : void 0,
// Appearance only if dark mode only
prefix: l2,
includeScales: i2,
preset: r,
isDark: !0
});
}
return c2 += `}
`, c2;
}
function m(r, t2) {
return Object.fromEntries(
t2.filter((e) => r[e]).map((e) => [e, r[e]])
);
}
function y(r, t2) {
return r ? Object.fromEntries(
t2.filter((e) => r[e]).map((e) => [e, r[e]])
) : {};
}
function g$1(r, t2) {
return Object.fromEntries(
Object.entries(r).filter(([e]) => !t2.includes(e))
);
}
function k$1(r, t2) {
return r ? Object.fromEntries(
Object.entries(r).filter(([e]) => !t2.includes(e))
) : {};
}
function f$1({
selector: r,
mediaQuery: t2,
colors: e,
foundation: o2,
prefix: n2,
includeScales: l2 = !1,
preset: i2,
isDark: s = !1
}) {
const c2 = [];
if (e && Object.entries(e).forEach(([u2, d2]) => {
d2 && c2.push(` --${n2}-${u2}: ${d2};`);
}), o2 && Object.entries(o2).forEach(([u2, d2]) => {
d2 && c2.push(` --${n2}-${u2}: ${d2};`);
}), l2 && i2) {
const u2 = s ? i2.colors.dark : i2.colors.light, d2 = $(u2, n2);
c2.push(...d2);
}
const a = c2.join(`
`);
return t2 ? `
${t2} {
${r} {
${a.replace(/^/gm, " ")}
}
}
` : `
${r} {
${a}
}
`;
}
function $(r, t2) {
const e = [];
return S.forEach((o2) => {
const n2 = r[o2];
if (n2) {
const l2 = b(n2);
Object.entries(l2).forEach(([i2, s]) => {
e.push(` --${t2}-${o2}-${i2}: ${s};`);
});
}
}), e;
}
var E = /* @__PURE__ */ ((r) => (r.FULL = "maz-theme-full", r.CRITICAL = "maz-theme-critical", r))(E || {});
function v(r, t2) {
if (typeof document > "u")
return;
const e = document.querySelectorAll(`#${r}`);
if (!e || e.length === 0) {
const o2 = document.createElement("style");
o2.id = r, document.head.appendChild(o2), o2.textContent = t2;
return;
}
if (e.length === 1) {
e[0].textContent = t2;
return;
}
if (e.length > 1) {
for (let o2 = 0; o2 < e.length - 1; o2++)
e[o2].remove();
e[e.length - 1].textContent = t2;
}
}
function c(e) {
if (typeof document > "u")
return null;
const t2 = document.cookie.split(";").find((n2) => n2.trim().startsWith(`${e}=`));
return t2 ? decodeURIComponent(t2.split("=")[1]) : null;
}
function o$1(e) {
if (e && ["light", "dark"].includes(e))
return e;
const t2 = c("maz-color-mode");
return t2 && ["light", "dark"].includes(t2) ? t2 : "auto";
}
function n() {
return typeof globalThis.window < "u" && typeof globalThis.matchMedia == "function" && globalThis.matchMedia("(prefers-color-scheme: dark)").matches;
}
function t(i2) {
return typeof i2 == "object" && i2 !== null && !!i2.name;
}
async function o(i2) {
if (t(i2))
return i2;
if (i2 === "mazUi" || !i2 || i2 === "maz-ui") {
const { mazUi: n2 } = await import("../chunks/mazUi.CaSMOKic.js");
return n2;
}
if (i2 === "ocean") {
const { ocean: n2 } = await import("../chunks/ocean.ehMlC0HV.js");
return n2;
}
if (i2 === "pristine") {
const { pristine: n2 } = await import("../chunks/pristine.DMG3eBuN.js");
return n2;
}
if (i2 === "obsidian") {
const { obsidian: n2 } = await import("../chunks/obsidian.C6upWOVF.js");
return n2;
}
throw new TypeError(`[@maz-ui/themes] Preset ${i2} not found`);
}
function f(n2, o2) {
return {
name: o2.name || n2.name,
foundation: {
...n2.foundation,
...o2.foundation
},
colors: {
light: u(n2.colors.light, o2.colors?.light),
dark: u(n2.colors.dark, o2.colors?.dark)
}
};
}
function u(n2, o2) {
return o2 ? {
...n2,
...o2
} : n2;
}
function g(r, t2) {
typeof document > "u" || r !== "class" || (t2 ? document.documentElement.classList.add("dark") : document.documentElement.classList.remove("dark"));
}
function k(r, t2) {
if (typeof document > "u")
return;
const e = {
mode: t2.mode,
darkSelectorStrategy: t2.darkModeStrategy
};
if (t2.injectCriticalCSS) {
const a = j(r, e);
v(E.CRITICAL, a);
}
if (!t2.injectFullCSS)
return;
const o2 = p(r, e);
t2.strategy === "runtime" ? v(E.FULL, o2) : t2.strategy === "hybrid" && requestIdleCallback(() => {
v(E.FULL, o2);
}, { timeout: 100 });
}
function M(r, t2) {
r.provide("mazThemeState", t2), r.config.globalProperties.$mazThemeState = t2;
}
const L = {
async install(r, t2) {
const e = {
strategy: "runtime",
overrides: {},
darkModeStrategy: "class",
colorMode: (t2?.mode !== "both" ? t2?.mode : t2?.colorMode) ?? "auto",
injectCriticalCSS: !0,
injectFullCSS: !0,
mode: "both",
...t2
}, o$2 = e.mode !== "both" ? e.mode : o$1(e.colorMode), a = o$2 === "auto" && e.mode === "both" ? n() : o$2 === "dark" || e.mode === "dark", m2 = reactive({
currentPreset: void 0,
mode: e.mode,
colorMode: o$2,
isDark: a,
strategy: e.strategy,
darkModeStrategy: e.darkModeStrategy
});
g(e.darkModeStrategy, a), M(r, m2);
const i2 = e.strategy === "buildtime" ? e.preset : await o(e.preset), d2 = Object.keys(e.overrides).length > 0 && i2 ? f(i2, e.overrides) : i2;
d2 && (m2.currentPreset = d2), !(e.strategy === "buildtime" || !d2) && k(d2, e);
}
}, MazUi = {
install(app, options) {
const { theme, translations } = options;
app.use(L, theme), app.use(MazUiTranslations, translations);
}
};
export {
MazUi
};