Update vuedraggable

This commit is contained in:
Kasper Seweryn 2022-05-01 10:02:20 +02:00 committed by Georg Krause
parent b7d66232f6
commit 7e53e9a511
5 changed files with 122 additions and 113 deletions

View File

@ -43,7 +43,7 @@
"vue-upload-component": "2.8.22",
"vue3-gettext": "2.2.0-alpha.1",
"vue3-lazyload": "0.2.5-beta",
"vuedraggable": "2.24.3",
"vuedraggable": "4.1.0",
"vuex": "4.0.2",
"vuex-persistedstate": "4.1.0",
"vuex-router-sync": "5.0.0"

View File

@ -156,7 +156,7 @@
:title="labels.previousTrack"
:aria-label="labels.previousTrack"
class="control"
:disabled="emptyQueue"
:disabled="emptyQueue ? true : null"
@click.prevent.stop="$store.dispatch('queue/previous')"
>
<i :class="['ui', 'backward step', {'disabled': emptyQueue}, 'icon']" />
@ -187,7 +187,7 @@
:title="labels.next"
:aria-label="labels.next"
class="control"
:disabled="!hasNext"
:disabled="hasNext ? true : null"
@click.prevent.stop="$store.dispatch('queue/next')"
>
<i :class="['ui', {'disabled': !hasNext}, 'forward step', 'icon']" />
@ -237,14 +237,15 @@
</div>
<table class="ui compact very basic fixed single line selectable unstackable table">
<draggable
v-model="tracks"
v-model:list="tracks"
tag="tbody"
handle=".handle"
@update="reorder"
item-key="id"
>
<template #item="{ element: track, index }">
<tr
v-for="(track, index) in tracks"
:key="index"
:key="track.id"
:class="['queue-item', {'active': index === queue.currentIndex}]"
>
<td class="handle">
@ -307,6 +308,7 @@
</button>
</td>
</tr>
</template>
</draggable>
</table>
@ -450,7 +452,8 @@ export default {
this.$store.commit('ui/queueFocused', null)
}
},
immediate: true
immediate: true,
deep: true
},
'$route.fullPath' () {
this.$store.commit('ui/queueFocused', null)

View File

@ -163,7 +163,6 @@ import axios from 'axios'
import TrackRow from '~/components/audio/track/Row.vue'
import TrackMobileRow from '~/components/audio/track/MobileRow.vue'
import Pagination from '~/components/Pagination.vue'
import { unique } from '~/utils/filters'
export default {
components: {

View File

@ -127,14 +127,13 @@
<div class="table-wrapper">
<table class="ui compact very basic unstackable table">
<draggable
v-model="plts"
v-model:list="plts"
tag="tbody"
@update="reorder"
item-key="_id"
>
<tr
v-for="(plt, index) in plts"
:key="`${index}-${plt.track.id}`"
>
<template #item="{ element: plt, index }">
<tr>
<td class="left aligned">
{{ plt.index + 1 }}
</td>
@ -167,6 +166,7 @@
</button>
</td>
</tr>
</template>
</draggable>
</table>
</div>
@ -177,6 +177,7 @@
<script>
import { mapState } from 'vuex'
import { computed } from 'vue'
import axios from 'axios'
import PlaylistForm from '~/components/playlists/Form.vue'
@ -191,9 +192,15 @@ export default {
playlist: { type: Object, required: true },
playlistTracks: { type: Array, required: true }
},
setup (props) {
const plts = computed(() => {
return props.playlistTracks.map((plt, index) => ({ ...plt, _id: `${index}-${plt.track.id}` }))
})
return { plts }
},
data () {
return {
plts: this.playlistTracks,
isLoading: false,
errors: [],
duplicateTrackAddInfo: {},

View File

@ -6119,10 +6119,10 @@ slash@^3.0.0:
resolved "https://registry.yarnpkg.com/slash/-/slash-3.0.0.tgz#6539be870c165adbd5240220dbe361f1bc4d4634"
integrity sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==
sortablejs@1.10.2:
version "1.10.2"
resolved "https://registry.yarnpkg.com/sortablejs/-/sortablejs-1.10.2.tgz#6e40364d913f98b85a14f6678f92b5c1221f5290"
integrity sha512-YkPGufevysvfwn5rfdlGyrGjt7/CRHwvRPogD/lC+TnvcN29jDpCifKP+rBqf+LRldfXSTh+0CGLcSg0VIxq3A==
sortablejs@1.14.0:
version "1.14.0"
resolved "https://registry.yarnpkg.com/sortablejs/-/sortablejs-1.14.0.tgz#6d2e17ccbdb25f464734df621d4f35d4ab35b3d8"
integrity sha512-pBXvQCs5/33fdN1/39pPL0NZF20LeRbLQ5jtnheIPN9JQAaufGjKdWduZn4U7wCtVuzKhmRkI0DFYHYRbB2H1w==
"source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.0.2:
version "1.0.2"
@ -6809,12 +6809,12 @@ vue@^2.6.12:
"@vue/compiler-sfc" "2.7.10"
csstype "^3.1.0"
vuedraggable@2.24.3:
version "2.24.3"
resolved "https://registry.yarnpkg.com/vuedraggable/-/vuedraggable-2.24.3.tgz#43c93849b746a24ce503e123d5b259c701ba0d19"
integrity sha512-6/HDXi92GzB+Hcs9fC6PAAozK1RLt1ewPTLjK0anTYguXLAeySDmcnqE8IC0xa7shvSzRjQXq3/+dsZ7ETGF3g==
vuedraggable@^4.1.0:
version "4.1.0"
resolved "https://registry.yarnpkg.com/vuedraggable/-/vuedraggable-4.1.0.tgz#edece68adb8a4d9e06accff9dfc9040e66852270"
integrity sha512-FU5HCWBmsf20GpP3eudURW3WdWTKIbEIQxh9/8GE806hydR9qZqRRxRE3RjqX7PkuLuMQG/A7n3cfj9rCEchww==
dependencies:
sortablejs "1.10.2"
sortablejs "1.14.0"
vuex-persistedstate@4.1.0:
version "4.1.0"