winbox-ui-next
Version:
We Design Vue 2.0: A Vue.js 3 UI Library
61 lines (60 loc) • 2.13 kB
JavaScript
import { inject, ref, watchEffect } from "vue";
import { hash } from "css-render";
import { useSsrAdapter } from "@css-render/vue3-ssr";
import { configProviderInjectionKey } from "../config-provider/src/context.js";
import { throwError } from "../_utils/naive/warn.js";
import "../_utils/vue/wrapper.js";
import { c } from "../_utils/cssr/index.js";
import "../_utils/composable/use-adjusted-to.js";
import "vueuc";
import "../_utils/composable/use-lock-html-scroll.js";
import "../_utils/composable/use-is-composing.js";
function useThemeClass(componentName, hashRef, cssVarsRef, props) {
var _a;
if (!cssVarsRef)
throwError("useThemeClass", "cssVarsRef is not passed");
const mergedThemeHashRef = (_a = inject(configProviderInjectionKey, null)) == null ? void 0 : _a.mergedThemeHashRef;
const themeClassRef = ref("");
const ssrAdapter = useSsrAdapter();
let renderCallback;
const hashClassPrefix = `__${componentName}`;
const mountStyle = () => {
let finalThemeHash = hashClassPrefix;
const hashValue = hashRef ? hashRef.value : void 0;
const themeHash = mergedThemeHashRef == null ? void 0 : mergedThemeHashRef.value;
if (themeHash)
finalThemeHash += `-${themeHash}`;
if (hashValue)
finalThemeHash += `-${hashValue}`;
const { themeOverrides, builtinThemeOverrides } = props;
if (themeOverrides) {
finalThemeHash += `-${hash(JSON.stringify(themeOverrides))}`;
}
if (builtinThemeOverrides) {
finalThemeHash += `-${hash(JSON.stringify(builtinThemeOverrides))}`;
}
themeClassRef.value = finalThemeHash;
renderCallback = () => {
const cssVars = cssVarsRef.value;
let style = "";
for (const key in cssVars) {
style += `${key}: ${cssVars[key]};`;
}
c(`.${finalThemeHash}`, style).mount({
id: finalThemeHash,
ssr: ssrAdapter
});
renderCallback = void 0;
};
};
watchEffect(() => {
mountStyle();
});
return {
themeClass: themeClassRef,
onRender: () => {
renderCallback == null ? void 0 : renderCallback();
}
};
}
export { useThemeClass };