54 lines
1.2 KiB
Vue
54 lines
1.2 KiB
Vue
<template>
|
|
<div class="tile container-picker">
|
|
<div class="inner-container-picker">
|
|
<div class="container pointer" v-for="container in containers" :class="{ selected: container.name === selected?.name }" @click="() => selected = container">{{ container.name }}</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { Container } from '~/classes/Pod';
|
|
|
|
const props = defineProps<{
|
|
containers: Container[]
|
|
}>();
|
|
|
|
const selected: Ref<Container | undefined> = ref(props.containers.at(0));
|
|
|
|
const emits = defineEmits<{
|
|
(e: 'selected', payload: Container): void
|
|
}>();
|
|
|
|
watch(selected, (selection) => {
|
|
if (selection != null)
|
|
{
|
|
console.log("X");
|
|
emits('selected', selection);
|
|
}
|
|
}, { immediate: true })
|
|
</script>
|
|
|
|
<style scoped>
|
|
.container-picker {
|
|
padding: 0.5rem;
|
|
height: 3rem;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
}
|
|
.inner-container-picker {
|
|
background-color: white;
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
border-radius: 0.25rem;
|
|
gap: 0.5rem;
|
|
}
|
|
.container {
|
|
padding: 0.25rem 0.5rem;
|
|
color: black;
|
|
border-radius: 0.25rem;
|
|
}
|
|
.container.selected {
|
|
background-color: var(--primary-color);
|
|
color: rgb(255, 255, 255);
|
|
}
|
|
</style> |