radiocampus: style update

radiocampus/assets/src/components/APlaylist.vue

@@ -0,0 +1,65 @@
+<template>
+    <div class="a-playlist">
+        <div class="header"><slot name="header"></slot></div>
+        <ul :class="listClass">
+            <li v-for="(item,index) in items" :class="[itemClass, player.isPlaying(item) ? 'is-active' : '']" @click="!hasAction('play') && select(index)"
+                :key="index">
+                <ASoundItem
+                    :data="item" :index="index" :set="set" :player="player_"
+                    @togglePlay="togglePlay(index)"
+                    :actions="actions">
+                    <template #after-title="bindings">
+                        <slot name="after-title" v-bind="bindings"></slot>
+                    </template>
+                    <template #actions="bindings">
+                        <slot name="actions" v-bind="bindings"></slot>
+                        <button class="button" v-if="editable" @click.stop="remove(index,true)">
+                            <span class="icon is-small"><span class="fa fa-close"></span></span>
+                        </button>
+                    </template>
+                </ASoundItem>
+            </li>
+        </ul>
+        <slot name="footer"></slot>
+    </div>
+</template>
+<script>
+import AList from './AList';
+import ASoundItem from './ASoundItem';
+
+export default {
+    extends: AList,
+    emits: [...AList.emits],
+    components: { ASoundItem },
+
+    props: {
+        actions: Array,
+        // FIXME: remove
+        name: String,
+        player: Object,
+        editable: Boolean,
+        withLink: Boolean
+    },
+
+    computed: {
+        self() { return this; },
+        player_() { return this.player || window.aircox.player },
+    },
+
+    methods: {
+        hasAction(action) { return this.actions && this.actions.indexOf(action) != -1; },
+
+        selectNext() {
+            let index = this.selectedIndex + 1;
+            return this.select(index >= this.items.length ? -1 : index);
+        },
+
+        togglePlay(index) {
+            if(this.player_.isPlaying(this.set.get(index)))
+                this.player_.pause();
+            else
+                this.select(index)
+        },
+    },
+}
+</script>