Dominik Milacher
0dc24c4db7
Some checks failed
Build and deploy updated apps / Build & deploy (push) Failing after 50s
70 lines
1.4 KiB
Vue
70 lines
1.4 KiB
Vue
<script setup lang="ts">
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
class?: string
|
|
ux?: any
|
|
src: string
|
|
to?: string
|
|
mode?: 'cover' | 'center'
|
|
hover?: 'zoom' | 'lift'
|
|
clip?: boolean
|
|
}>(),
|
|
{
|
|
clip: false,
|
|
}
|
|
)
|
|
|
|
const classes = useStyling(
|
|
'imageTransformed',
|
|
{
|
|
slots: {
|
|
base: 'w-full h-full relative isolate',
|
|
link: '',
|
|
image: 'transition duration-300 ease-in-out z-10',
|
|
overlay: 'absolute inset-0 z-25 pointer-events-none',
|
|
},
|
|
variants: {
|
|
mode: {
|
|
cover: {
|
|
image: 'w-full h-full object-cover',
|
|
},
|
|
center: {
|
|
base: 'flex justify-center items-center',
|
|
},
|
|
},
|
|
hover: {
|
|
zoom: {
|
|
image: 'hover:scale-105',
|
|
},
|
|
lift: {
|
|
image: 'hover:-translate-y-2',
|
|
},
|
|
},
|
|
clip: {
|
|
true: {
|
|
base: 'overflow-hidden',
|
|
},
|
|
false: {},
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
mode: 'cover',
|
|
hover: 'zoom',
|
|
},
|
|
},
|
|
props
|
|
)
|
|
</script>
|
|
|
|
<template>
|
|
<div :class="classes.base">
|
|
<NuxtLink v-if="props.to" :class="classes.link" :to="props.to">
|
|
<NuxtImg :class="classes.image" :src="props.src" />
|
|
</NuxtLink>
|
|
<NuxtImg v-else :class="classes.image" :src="props.src" />
|
|
<div v-if="$slots.default" :class="classes.overlay">
|
|
<slot />
|
|
</div>
|
|
</div>
|
|
</template>
|