vuestic-ui
Version:
Vue 3 UI Framework
53 lines (52 loc) • 1.97 kB
JavaScript
import { computed, toRef } from "vue";
import { u as useElementTextColor } from "../../composables/useElementTextColor.js";
import { u as useElementBackground } from "../../composables/useElementBackground.js";
import { u as useCurrentElement } from "../../composables/useCurrentElement.js";
import { u as useColors } from "../../composables/useColors.js";
import { u as useTextColor } from "../../composables/useTextColor.js";
const useAlertStyles = (props) => {
const { getColor } = useColors();
const isTransparentBackground = computed(() => Boolean(props.outline || props.border));
const { textColorComputed } = useTextColor(toRef(props, "color"), isTransparentBackground);
const colorComputed = computed(() => getColor(props.color));
const alertStyle = computed(() => {
let background = colorComputed.value;
let boxShadow = "none";
if (props.outline) {
background = "transparent";
}
if (props.border) {
background = "var(--va-background-primary)";
boxShadow = "var(--va-alert-box-shadow)";
}
return {
border: props.outline ? `1px solid ${colorComputed.value}` : "",
padding: props.dense ? "var(--va-alert-padding-y-dense) var(--va-alert-padding-x)" : "",
backgroundColor: background,
boxShadow
};
});
const currentColor = useElementTextColor(useElementBackground(useCurrentElement()));
const contentStyle = computed(() => {
return {
alignItems: props.center ? "center" : "",
color: props.border || props.outline ? currentColor.value : textColorComputed.value
};
});
const titleStyle = computed(() => {
return { color: textColorComputed.value };
});
const borderStyle = computed(() => ({
backgroundColor: props.borderColor ? getColor(props.borderColor) : colorComputed.value
}));
return {
alertStyle,
contentStyle,
titleStyle,
borderStyle
};
};
export {
useAlertStyles as u
};
//# sourceMappingURL=useAlertStyles.js.map