64 lines
1.3 KiB
Vue
64 lines
1.3 KiB
Vue
<template>
|
|
<AudioCard
|
|
:style="{
|
|
'--box-color': 'var(--color-fuchsia)'
|
|
}"
|
|
:supports="['stop']"
|
|
label="SFX"
|
|
:node="node"
|
|
@delete="emit('delete')"
|
|
>
|
|
<template #preview>
|
|
<div
|
|
v-for="sound in node.activeSounds"
|
|
>
|
|
{{ sound.name }}
|
|
</div>
|
|
</template>
|
|
<template #popover>
|
|
<div class="a-sfx__popover">
|
|
<SfxSound
|
|
v-for="[name, sounds] in grouppedSounds"
|
|
:key="name"
|
|
:sounds="sounds"
|
|
:name="name"
|
|
/>
|
|
</div>
|
|
</template>
|
|
</AudioCard>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import {computed, UnwrapNestedRefs} from 'vue';
|
|
import {SfxGroupNode} from '../../model/Audio/SfxGroupNode';
|
|
import AudioCard from './AudioCard.vue';
|
|
import {groupBy} from '../../utils/groupBy';
|
|
import SfxSound from './SfxSound.vue';
|
|
|
|
|
|
const props = defineProps<{
|
|
node: UnwrapNestedRefs<SfxGroupNode>,
|
|
}>();
|
|
|
|
const emit = defineEmits<{
|
|
'delete': [],
|
|
}>();
|
|
|
|
|
|
const grouppedSounds = computed(() => {
|
|
return groupBy(props.node.sounds(), (sound) => {
|
|
return sound.name.replace(/(\d+)$/, '').trim();
|
|
})
|
|
});
|
|
|
|
|
|
|
|
</script>
|
|
<style>
|
|
.a-sfx__popover {
|
|
--box-size: 160px;
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(var(--box-size), 1fr));
|
|
gap: var(--s-5)
|
|
}
|
|
|
|
</style> |