n/starsy
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

remove unused transition-group

Browse source
This commit is contained in:
koehr 2022-01-06 14:08:18 +01:00
parent 4f2ecd14f4
commit 584f9e593b
1 changed files with 48 additions and 50 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

98
src/components/SatelliteSettings.vue
View file

@ -1,57 +1,55 @@
<template> <template>
<section class="satellite-list"> <section class="satellite-list">
Satellites: Satellites:
<transition-group name="draggable-items-list"> <div v-for="satellite,index in satellites"
<div v-for="satellite,index in satellites" class="satellite-list-entry"
class="satellite-list-entry" :key="satellite.name"
:key="satellite.name" :class="{
:class="{ dragging: dragIndex === index,
dragging: dragIndex === index, dragunder: dropIndex === index && dragIndex < index,
dragunder: dropIndex === index && dragIndex < index, dragover: dropIndex === index && dragIndex > index
dragover: dropIndex === index && dragIndex > index }"
}" :style="dragIndex === index ? `transform: translateY(${dragDelta}px)` : ''"
:style="dragIndex === index ? `transform: translateY(${dragDelta}px)` : ''" @pointerenter="onDragEnter(index)"
@pointerenter="onDragEnter(index)" @pointerleave="onDragLeave(index)"
@pointerleave="onDragLeave(index)" >
> <header>
<header> <span class="satellite-name">
<span class="satellite-name"> <input type="text"
<input type="text" :value="satellite.name"
:value="satellite.name" @keydown.enter="update(index, 'name', $event.target)"
@keydown.enter="update(index, 'name', $event.target)" @blur="update(index, 'name', $event.target)"
@blur="update(index, 'name', $event.target)" />
/> </span>
</span> </header>
</header> <div class="options">
<div class="options"> <span class="satellite-type">
<span class="satellite-type"> <select
<select :value="satellite.type"
:value="satellite.type" @change="update(index, 'type', $event.target)"
@change="update(index, 'type', $event.target)" >
> <option v-for="type in satelliteTypes">{{ type }}</option>
<option v-for="type in satelliteTypes">{{ type }}</option> </select>
</select> </span>
</span> <span class="satellite-radius" :class="satellite.type">
<span class="satellite-radius" :class="satellite.type"> Radius r:
Radius r: <input type="range" :min="MIN_SIZE_MOON" :max="MAX_SIZE_MOON"
<input type="range" :min="MIN_SIZE_MOON" :max="MAX_SIZE_MOON" :disabled="satellite.type !== 'moon'"
:disabled="satellite.type !== 'moon'" :value="satellite.radius"
:value="satellite.radius" @input="update(index, 'radius', $event.target, true)"
@input="update(index, 'radius', $event.target, true)" />
/> </span>
</span> <span class="actions">
<span class="actions"> <button class="move" title="drag to reorder"
<button class="move" title="drag to reorder" @pointerdown="startDragging(index, $event)"
@pointerdown="startDragging(index, $event)" @pointerup="stopDragging"
@pointerup="stopDragging" >&nbsp;</button>
>&nbsp;</button> <button class="delete" title="delete satellite"
<button class="delete" title="delete satellite" @click="deleteSatellite(index)"
@click="deleteSatellite(index)" >&nbsp;</button>
>&nbsp;</button> </span>
</span>
</div>
</div> </div>
</transition-group> </div>
<button class="add">&nbsp;</button> <button class="add">&nbsp;</button>
</section> </section>
</template> </template>