<script setup>
import { TransitionGroup } from 'vue'
import { windows, getComponent } from '@/services/Windows';
</script>

<template>
  <TransitionGroup name="window" tag="div">
    <component v-for="win in windows" :key="win.id" :is="getComponent(win.type)" :data="win" />
  </TransitionGroup>
</template>


<style>
.window-enter-active,
.window-leave-active {
  transition: all 0.15s ease;
}
.window-enter-from,
.window-leave-to {
  transition: all 0.15s ease;
  opacity: 0;
  transform: translateY(15px);
}
.window-move {
  transition: transform 0.15s ease;
}

.window-wrapper {
    background-color: var(--color-window-background);

    /* backdrop-filter: blur(10px); */

    display: flex;
    flex-direction: column;
    align-items: center;

    border: solid 1px var(--color-window-border);
    
    /* opacity: 0; */
    user-select: none;
    -webkit-box-shadow: 0px 0px 10px -2px var(--color-window-shadow);
    -moz-box-shadow: 0px 0px 10px -2px var(--color-window-shadow);
    box-shadow: 0px 0px 10px -2px var(--color-window-shadow);
  }

</style>
