playlist editor draft

assets/src/components/ARow.vue

@@ -0,0 +1,78 @@
+<template>
+    <tr>
+        <slot name="head" :item="item" :row="index"/>
+        <template v-for="(attr,col) in columns" :key="col">
+            <td :class="['cell', 'cell-' + attr]" :data-index="col"
+                    :draggable="orderable"
+                    @dragstart="onDragStart" @dragover="onDragOver" @drop="onDrop">
+                <slot :name="attr" :item="item" :row="index" :col="col"
+                        :data="itemData" :attr="attr" :emit="cellEmit"
+                        :value="itemData && itemData[attr]">
+                    {{ itemData && itemData[attr] }}
+                </slot>
+            </td>
+        </template>
+        <slot name="tail" :item="item" :row="index"/>
+    </tr>
+</template>
+<script>
+import Model from '../model'
+
+export default {
+    emit: ['move', 'cell'],
+
+    props: {
+        item: Object,
+        index: Number,
+        columns: Array,
+        orderable: {type: Boolean, default: false},
+    },
+
+    computed: {
+        itemData() {
+            return this.item instanceof Model ? this.item.data : this.item;
+        },
+    },
+
+    methods: {
+        /// Emit a 'cell' event.
+        /// Event data: `{index, name, data, item, attr}`
+        ///
+        /// @param {Number} col: cell column's index
+        /// @param {String} name: cell's event name
+        /// @param {} data: cell's event data
+        cellEmit(name, col, data) {
+            this.$emit('cell', {
+                name, col, data,
+                item: this.item,
+                attr: this.columns[col],
+            })
+        },
+
+        onDragStart(ev) {
+            const dataset = ev.target.dataset;
+            const data = `cell:${dataset.index}`
+            ev.dataTransfer.setData("text/cell", data)
+            ev.dataTransfer.dropEffect = 'move'
+        },
+
+        onDragOver(ev) {
+            ev.preventDefault()
+            ev.dataTransfer.dropEffect = 'move'
+        },
+
+        onDrop(ev) {
+            const data = ev.dataTransfer.getData("text/cell")
+            if(!data || !data.startsWith('cell:'))
+                return
+
+            ev.preventDefault()
+            this.$emit('move', {
+                from: Number(data.slice(5)),
+                to: Number(ev.target.dataset.index),
+            })
+        },
+    },
+}
+
+</script>