vuestic-ui
Version:
Vue 3 UI Framework
58 lines (57 loc) • 2 kB
JavaScript
import { getCurrentInstance, computed } from "vue";
import { u as useColors } from "../../../composables/useColors.mjs";
const useButtonBackground = (colorComputed, isPressed, isHovered) => {
const instance = getCurrentInstance();
if (!instance) {
throw new Error("`useButtonBackground` hook must be used only inside of setup function!");
}
const props = instance.props;
const { getColor, getGradientBackground } = useColors();
const backgroundColor = computed(() => {
if (props.plain) {
return "transparent";
}
return props.gradient ? getGradientBackground(colorComputed.value) : colorComputed.value;
});
const hoveredBgState = computed(() => !props.plain && isHovered.value);
const pressedBgState = computed(() => !props.plain && isPressed.value);
const backgroundColorOpacity = computed(() => {
if (pressedBgState.value && props.pressedBehavior === "opacity") {
return props.pressedOpacity;
}
if (hoveredBgState.value && props.hoverBehavior === "opacity") {
return Number(props.hoverOpacity);
}
return Number(props.backgroundOpacity);
});
const hoveredMaskState = computed(() => hoveredBgState.value && props.hoverBehavior === "mask");
const pressedMaskState = computed(() => pressedBgState.value && props.pressedBehavior === "mask");
const backgroundMaskOpacity = computed(() => {
if (pressedMaskState.value) {
return props.pressedOpacity;
}
if (hoveredMaskState.value) {
return Number(props.hoverOpacity);
}
return 0;
});
const backgroundMaskColor = computed(() => {
if (pressedMaskState.value) {
return getColor(props.pressedMaskColor);
}
if (hoveredMaskState.value) {
return getColor(props.hoverMaskColor);
}
return "transparent";
});
return {
backgroundColor,
backgroundColorOpacity,
backgroundMaskOpacity,
backgroundMaskColor
};
};
export {
useButtonBackground as u
};
//# sourceMappingURL=useButtonBackground.mjs.map