@aplus-frontend/ui
Version:
70 lines (69 loc) • 2.13 kB
JavaScript
import { useToken as g } from "@aplus-frontend/antdv/es/theme/internal";
import { injectGlobal as S, cx as b } from "@emotion/css";
import V from "@emotion/css/create-instance";
import { omit as f, isFunction as w } from "lodash-unified";
import { ref as A, computed as a, watch as k } from "vue";
import "../../config-provider/index.mjs";
import { useToken as h } from "../../config-provider/hooks/use-token.mjs";
import { css as j } from "./instance.mjs";
import { downSpecificityPlugin as G } from "./plugin-specificity.mjs";
import { TokenUtil as P } from "./TokenUtil.mjs";
import { camelToKebab as x, generateCssVar as E } from "./utils.mjs";
import { useGlobalConfig as F } from "../../config-provider/hooks/use-global-config.mjs";
const { css: Q } = V({
key: "css-dev-only",
stylisPlugins: [G]
});
function H(l) {
const t = {};
for (const n in l)
t[n] = `var(${x(n)})`;
return t;
}
function R(l, t, n, d) {
return (s) => {
const u = l.split("."), { token: m, rootCls: p } = h(), [, C] = g(), T = A(), c = F("namespace"), $ = a(() => ({
...f(m.value || {}, "components"),
...m.value.components?.[u[0]] || {}
})), i = a(() => {
const e = m.value.components?.[u[0]] || {};
return {
...w(n) ? n($.value) : n || {},
...e
};
}), v = a(() => ({
...f(m.value || {}, "components"),
...i.value,
componentCls: `.${c.value}-${s}`,
namespace: c.value
}));
return k(
() => c.value,
(e) => {
const o = H(
v.value
);
o.componentCls = `.${e}-${s}`, o.namespace = e, o.calc = (y) => new P(y), o.antdv = C.value;
const r = t(o, {
...v.value,
componentCls: `.${e}-${s}`,
namespace: e
});
S(r);
},
{ immediate: !0 }
), k(
[() => i.value, () => p.value],
([e, o]) => {
const r = E(e, d);
Object.keys(r).length && j({
[`.${o}.${c.value}-${s}`]: r
});
},
{ deep: !0, immediate: !0 }
), a(() => b(p.value, T.value));
};
}
export {
R as genComponentStyleHook
};