vuestic-ui
Version:
Vue 3 UI Framework
63 lines (62 loc) • 2.29 kB
JavaScript
import { watch } from "vue";
import { i as isServer } from "../../../utils/ssr.mjs";
import { u as useGlobalConfig } from "../../../composables/useGlobalConfig.mjs";
import { a as addOrUpdateStyleElement } from "../../../utils/dom.mjs";
import { d as defineVuesticPlugin } from "../../vue-plugin/utils/define-vuestic-plugin.mjs";
import { d as defineGlobalProperty } from "../../vue-plugin/utils/global-properties.mjs";
const getColorsClassesHelpers = (helpers, colors) => {
const colorsEntries = Object.entries(colors);
return helpers.reduce((acc, helper) => acc.concat(
colorsEntries.map(([colorName, colorValue]) => ({
...helper,
postfix: helper.postfix ?? colorName,
value: helper.value ?? colorValue
}))
), []);
};
const getColorsClassesStyles = (helpers) => {
return helpers.reduce((styles, helper) => {
const style = [helper.property].flat().map((prop) => `${prop}: ${helper.value};`).join("");
styles += `.va-${helper.prefix}--${helper.postfix} { ${style} }`;
return styles;
}, "");
};
const handleConfigUpdate = (helpers, colors) => {
const coloredHelpers = getColorsClassesHelpers(helpers, colors);
addOrUpdateStyleElement(
"va-color-helpers",
() => getColorsClassesStyles(coloredHelpers)
);
};
const createColorHelpersPlugin = () => {
if (isServer()) {
return;
}
const { globalConfig } = useGlobalConfig();
watch(() => globalConfig.value.colorsClasses, (newHelpers) => {
if (newHelpers.length) {
handleConfigUpdate(newHelpers, globalConfig.value.colors.variables);
}
}, { immediate: true, deep: true });
watch(() => globalConfig.value.colors.variables, (newColors) => {
if (!newColors) {
return;
}
handleConfigUpdate(globalConfig.value.colorsClasses, newColors);
}, { immediate: true, deep: true });
return {
renderColorHelpers: () => {
const coloredHelpers = getColorsClassesHelpers(globalConfig.value.colorsClasses, globalConfig.value.colors.variables);
return getColorsClassesStyles(coloredHelpers);
}
};
};
const ColorsClassesPlugin = defineVuesticPlugin(() => ({
install(app) {
defineGlobalProperty(app, "$vaColorsClasses", createColorHelpersPlugin());
}
}));
export {
ColorsClassesPlugin as C
};
//# sourceMappingURL=index.mjs.map