import { intersect_default } from "./chunk-5ONGSJQ2.js"; import { MaybeTransition, makeTransitionProps } from "./chunk-CAGZXMOS.js"; import { makeRoundedProps, useRounded } from "./chunk-AQK3CYVW.js"; import { useBackgroundColor } from "./chunk-BHV5Z34M.js"; import { makeDimensionProps, useDimension } from "./chunk-6EZKHCRW.js"; import { SUPPORTS_INTERSECTION, convertToUnit, genericComponent, getCurrentInstance, makeComponentProps, propsFactory, useRender } from "./chunk-LZ5T2ERG.js"; import { Fragment, computed, createBaseVNode, createVNode, mergeProps, nextTick, normalizeClass, normalizeStyle, onBeforeMount, onBeforeUnmount, ref, shallowRef, toRef, vShow, watch, withDirectives } from "./chunk-2MKFL3BX.js"; // node_modules/vuetify/lib/components/VImg/VImg.js import "/home/david/gitea_repo/personal_development/ServerManagerWebApp/frontend/node_modules/vuetify/lib/components/VImg/VImg.css"; // node_modules/vuetify/lib/components/VResponsive/VResponsive.js import "/home/david/gitea_repo/personal_development/ServerManagerWebApp/frontend/node_modules/vuetify/lib/components/VResponsive/VResponsive.css"; function useAspectStyles(props) { return { aspectStyles: computed(() => { const ratio = Number(props.aspectRatio); return ratio ? { paddingBottom: String(1 / ratio * 100) + "%" } : void 0; }) }; } var makeVResponsiveProps = propsFactory({ aspectRatio: [String, Number], contentClass: null, inline: Boolean, ...makeComponentProps(), ...makeDimensionProps() }, "VResponsive"); var VResponsive = genericComponent()({ name: "VResponsive", props: makeVResponsiveProps(), setup(props, _ref) { let { slots } = _ref; const { aspectStyles } = useAspectStyles(props); const { dimensionStyles } = useDimension(props); useRender(() => createBaseVNode("div", { "class": normalizeClass(["v-responsive", { "v-responsive--inline": props.inline }, props.class]), "style": normalizeStyle([dimensionStyles.value, props.style]) }, [createBaseVNode("div", { "class": "v-responsive__sizer", "style": normalizeStyle(aspectStyles.value) }, null), slots.additional?.(), slots.default && createBaseVNode("div", { "class": normalizeClass(["v-responsive__content", props.contentClass]) }, [slots.default()])])); return {}; } }); // node_modules/vuetify/lib/components/VImg/VImg.js var makeVImgProps = propsFactory({ absolute: Boolean, alt: String, cover: Boolean, color: String, draggable: { type: [Boolean, String], default: void 0 }, eager: Boolean, gradient: String, lazySrc: String, options: { type: Object, // For more information on types, navigate to: // https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API default: () => ({ root: void 0, rootMargin: void 0, threshold: void 0 }) }, sizes: String, src: { type: [String, Object], default: "" }, crossorigin: String, referrerpolicy: String, srcset: String, position: String, ...makeVResponsiveProps(), ...makeComponentProps(), ...makeRoundedProps(), ...makeTransitionProps() }, "VImg"); var VImg = genericComponent()({ name: "VImg", directives: { vIntersect: intersect_default }, props: makeVImgProps(), emits: { loadstart: (value) => true, load: (value) => true, error: (value) => true }, setup(props, _ref) { let { emit, slots } = _ref; const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(() => props.color); const { roundedClasses } = useRounded(props); const vm = getCurrentInstance("VImg"); const currentSrc = shallowRef(""); const image = ref(); const state = shallowRef(props.eager ? "loading" : "idle"); const naturalWidth = shallowRef(); const naturalHeight = shallowRef(); const normalisedSrc = computed(() => { return props.src && typeof props.src === "object" ? { src: props.src.src, srcset: props.srcset || props.src.srcset, lazySrc: props.lazySrc || props.src.lazySrc, aspect: Number(props.aspectRatio || props.src.aspect || 0) } : { src: props.src, srcset: props.srcset, lazySrc: props.lazySrc, aspect: Number(props.aspectRatio || 0) }; }); const aspectRatio = computed(() => { return normalisedSrc.value.aspect || naturalWidth.value / naturalHeight.value || 0; }); watch(() => props.src, () => { init(state.value !== "idle"); }); watch(aspectRatio, (val, oldVal) => { if (!val && oldVal && image.value) { pollForSize(image.value); } }); onBeforeMount(() => init()); function init(isIntersecting) { if (props.eager && isIntersecting) return; if (SUPPORTS_INTERSECTION && !isIntersecting && !props.eager) return; state.value = "loading"; if (normalisedSrc.value.lazySrc) { const lazyImg = new Image(); lazyImg.src = normalisedSrc.value.lazySrc; pollForSize(lazyImg, null); } if (!normalisedSrc.value.src) return; nextTick(() => { emit("loadstart", image.value?.currentSrc || normalisedSrc.value.src); setTimeout(() => { if (vm.isUnmounted) return; if (image.value?.complete) { if (!image.value.naturalWidth) { onError(); } if (state.value === "error") return; if (!aspectRatio.value) pollForSize(image.value, null); if (state.value === "loading") onLoad(); } else { if (!aspectRatio.value) pollForSize(image.value); getSrc(); } }); }); } function onLoad() { if (vm.isUnmounted) return; getSrc(); pollForSize(image.value); state.value = "loaded"; emit("load", image.value?.currentSrc || normalisedSrc.value.src); } function onError() { if (vm.isUnmounted) return; state.value = "error"; emit("error", image.value?.currentSrc || normalisedSrc.value.src); } function getSrc() { const img = image.value; if (img) currentSrc.value = img.currentSrc || img.src; } let timer = -1; onBeforeUnmount(() => { clearTimeout(timer); }); function pollForSize(img) { let timeout = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : 100; const poll = () => { clearTimeout(timer); if (vm.isUnmounted) return; const { naturalHeight: imgHeight, naturalWidth: imgWidth } = img; if (imgHeight || imgWidth) { naturalWidth.value = imgWidth; naturalHeight.value = imgHeight; } else if (!img.complete && state.value === "loading" && timeout != null) { timer = window.setTimeout(poll, timeout); } else if (img.currentSrc.endsWith(".svg") || img.currentSrc.startsWith("data:image/svg+xml")) { naturalWidth.value = 1; naturalHeight.value = 1; } }; poll(); } const containClasses = toRef(() => ({ "v-img__img--cover": props.cover, "v-img__img--contain": !props.cover })); const __image = () => { if (!normalisedSrc.value.src || state.value === "idle") return null; const img = createBaseVNode("img", { "class": normalizeClass(["v-img__img", containClasses.value]), "style": { objectPosition: props.position }, "crossorigin": props.crossorigin, "src": normalisedSrc.value.src, "srcset": normalisedSrc.value.srcset, "alt": props.alt, "referrerpolicy": props.referrerpolicy, "draggable": props.draggable, "sizes": props.sizes, "ref": image, "onLoad": onLoad, "onError": onError }, null); const sources = slots.sources?.(); return createVNode(MaybeTransition, { "transition": props.transition, "appear": true }, { default: () => [withDirectives(sources ? createBaseVNode("picture", { "class": "v-img__picture" }, [sources, img]) : img, [[vShow, state.value === "loaded"]])] }); }; const __preloadImage = () => createVNode(MaybeTransition, { "transition": props.transition }, { default: () => [normalisedSrc.value.lazySrc && state.value !== "loaded" && createBaseVNode("img", { "class": normalizeClass(["v-img__img", "v-img__img--preload", containClasses.value]), "style": { objectPosition: props.position }, "crossorigin": props.crossorigin, "src": normalisedSrc.value.lazySrc, "alt": props.alt, "referrerpolicy": props.referrerpolicy, "draggable": props.draggable }, null)] }); const __placeholder = () => { if (!slots.placeholder) return null; return createVNode(MaybeTransition, { "transition": props.transition, "appear": true }, { default: () => [(state.value === "loading" || state.value === "error" && !slots.error) && createBaseVNode("div", { "class": "v-img__placeholder" }, [slots.placeholder()])] }); }; const __error = () => { if (!slots.error) return null; return createVNode(MaybeTransition, { "transition": props.transition, "appear": true }, { default: () => [state.value === "error" && createBaseVNode("div", { "class": "v-img__error" }, [slots.error()])] }); }; const __gradient = () => { if (!props.gradient) return null; return createBaseVNode("div", { "class": "v-img__gradient", "style": { backgroundImage: `linear-gradient(${props.gradient})` } }, null); }; const isBooted = shallowRef(false); { const stop = watch(aspectRatio, (val) => { if (val) { requestAnimationFrame(() => { requestAnimationFrame(() => { isBooted.value = true; }); }); stop(); } }); } useRender(() => { const responsiveProps = VResponsive.filterProps(props); return withDirectives(createVNode(VResponsive, mergeProps({ "class": ["v-img", { "v-img--absolute": props.absolute, "v-img--booting": !isBooted.value }, backgroundColorClasses.value, roundedClasses.value, props.class], "style": [{ width: convertToUnit(props.width === "auto" ? naturalWidth.value : props.width) }, backgroundColorStyles.value, props.style] }, responsiveProps, { "aspectRatio": aspectRatio.value, "aria-label": props.alt, "role": props.alt ? "img" : void 0 }), { additional: () => createBaseVNode(Fragment, null, [createVNode(__image, null, null), createVNode(__preloadImage, null, null), createVNode(__gradient, null, null), createVNode(__placeholder, null, null), createVNode(__error, null, null)]), default: slots.default }), [[intersect_default, { handler: init, options: props.options }, null, { once: true }]]); }); return { currentSrc, image, state, naturalWidth, naturalHeight }; } }); export { VResponsive, makeVImgProps, VImg }; //# sourceMappingURL=chunk-TTIGZHWR.js.map