vuetify
Version:
Vue Material Component Framework
63 lines • 1.74 kB
JavaScript
// Utilities
import { toValue } from 'vue';
import { destructComputed, getForeground, isCssColor, isParsableColor, parseColor } from "../util/index.js"; // Types
// Composables
export function useColor(colors) {
return destructComputed(() => {
const _colors = toValue(colors);
const classes = [];
const styles = {};
if (_colors.background) {
if (isCssColor(_colors.background)) {
styles.backgroundColor = _colors.background;
if (!_colors.text && isParsableColor(_colors.background)) {
const backgroundColor = parseColor(_colors.background);
if (backgroundColor.a == null || backgroundColor.a === 1) {
const textColor = getForeground(backgroundColor);
styles.color = textColor;
styles.caretColor = textColor;
}
}
} else {
classes.push(`bg-${_colors.background}`);
}
}
if (_colors.text) {
if (isCssColor(_colors.text)) {
styles.color = _colors.text;
styles.caretColor = _colors.text;
} else {
classes.push(`text-${_colors.text}`);
}
}
return {
colorClasses: classes,
colorStyles: styles
};
});
}
export function useTextColor(color) {
const {
colorClasses: textColorClasses,
colorStyles: textColorStyles
} = useColor(() => ({
text: toValue(color)
}));
return {
textColorClasses,
textColorStyles
};
}
export function useBackgroundColor(color) {
const {
colorClasses: backgroundColorClasses,
colorStyles: backgroundColorStyles
} = useColor(() => ({
background: toValue(color)
}));
return {
backgroundColorClasses,
backgroundColorStyles
};
}
//# sourceMappingURL=color.js.map