vuestic-ui
Version:
Vue 3 UI Framework
83 lines (82 loc) • 3.16 kB
JavaScript
import { getCurrentInstance, computed } from "vue";
import { i as isServer } from "../../../utils/ssr.mjs";
import { u as useColors } from "../../../composables/useColors.mjs";
const getOpacity = (opacity) => {
var _a, _b, _c;
if (isServer()) {
return opacity;
}
if (opacity > 0) {
const userAgent = (_a = window == null ? void 0 : window.navigator) == null ? void 0 : _a.userAgent;
const isSafari = userAgent && /^((?!chrome|android).)*safari/i.test((_b = window == null ? void 0 : window.navigator) == null ? void 0 : _b.userAgent);
const isLatestSafari = userAgent && /(version.)15|16/i.test((_c = window == null ? void 0 : window.navigator) == null ? void 0 : _c.userAgent);
if (isSafari && !isLatestSafari) {
return opacity < 1 ? 1 - opacity : opacity;
}
}
return opacity;
};
const useButtonTextColor = (textColorComputed, colorComputed, isPressed, isHovered) => {
const instance = getCurrentInstance();
if (!instance) {
throw new Error("`useButtonTextColor` hook must be used only inside of setup function!");
}
const props = instance.props;
const { getColor, colorToRgba, getStateMaskGradientBackground } = useColors();
const plainColorStyles = computed(() => ({
background: "transparent",
color: textColorComputed.value,
"-webkit-background-clip": "text",
"background-clip": "text",
opacity: getPlainTextOpacity.value
}));
const getStateColor = (maskColor, stateOpacity, stateBehavior) => {
const maskStateColor = getColor(maskColor);
let stateStyles;
if (stateBehavior === "opacity") {
stateStyles = { color: colorToRgba(textColorComputed.value, stateOpacity) };
} else {
stateStyles = {
background: getStateMaskGradientBackground(colorComputed.value, maskStateColor, stateOpacity),
color: stateOpacity < 1 ? colorToRgba(textColorComputed.value, getOpacity(stateOpacity)) : maskStateColor
};
}
return { ...plainColorStyles.value, ...stateStyles };
};
const hoverTextColorComputed = computed(() => {
return getStateColor(props.hoverMaskColor, Number(props.hoverOpacity), props.hoverBehavior);
});
const pressedTextColorComputed = computed(() => {
return getStateColor(props.pressedMaskColor, props.pressedOpacity, props.pressedBehavior);
});
const getPlainTextOpacity = computed(() => {
if (props.disabled) {
return void 0;
}
if (props.textOpacity === 1 || isHovered.value && !isPressed.value) {
return 1;
}
return isPressed.value ? 0.9 : props.textOpacity;
});
return computed(() => {
const defaultColorStyles = {
color: textColorComputed.value,
background: "transparent"
};
props.plain && Object.assign(defaultColorStyles, plainColorStyles.value, { background: textColorComputed.value });
if (!props.plain) {
return defaultColorStyles;
}
if (isPressed.value) {
return pressedTextColorComputed.value;
}
if (isHovered.value) {
return hoverTextColorComputed.value;
}
return defaultColorStyles;
});
};
export {
useButtonTextColor as u
};
//# sourceMappingURL=useButtonTextColor.mjs.map