@oiij/use/dist/composables/use-auto-ratio.cjs

Som Composable Functions for Vue 3

const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
const __vueuse_core = require_rolldown_runtime.__toESM(require("@vueuse/core"));
const vue = require_rolldown_runtime.__toESM(require("vue"));

//#region src/composables/use-auto-ratio.ts
function useAutoRatio(ratio = 1, target) {
	const domRef = (0, vue.ref)();
	const elementSize = (0, __vueuse_core.useElementSize)(target);
	const windowSize = (0, __vueuse_core.useWindowSize)();
	const targetWidth = (0, vue.computed)(() => domRef.value ? elementSize.width.value : windowSize.width.value);
	const targetHeight = (0, vue.computed)(() => domRef.value ? elementSize.height.value : windowSize.height.value);
	const aspectRatio = (0, vue.computed)(() => {
		if (targetHeight.value === 0) return Infinity;
		return targetWidth.value / targetHeight.value;
	});
	const width = (0, vue.computed)(() => aspectRatio.value > ratio ? targetHeight.value * ratio : targetWidth.value);
	const height = (0, vue.computed)(() => aspectRatio.value > ratio ? targetHeight.value : targetWidth.value / ratio);
	(0, vue.watchEffect)(() => {
		if (domRef.value) {
			domRef.value.style.width = `${width.value}px`;
			domRef.value.style.height = `${height.value}px`;
		}
	});
	return {
		domRef,
		width,
		height
	};
}

//#endregion
exports.useAutoRatio = useAutoRatio;