playlist editor draft

assets/src/components/ARows.vue

@@ -0,0 +1,91 @@
+<template>
+    <table class="table is-stripped is-fullwidth">
+        <thead>
+            <tr>
+                <slot name="header-head"/>
+                <th v-for="col in columns" :key="col"
+                    style="vertical-align: middle">{{ labels[col] }}</th>
+                <slot name="header-tail"/>
+            </tr>
+        </thead>
+        <tbody>
+            <slot name="head"/>
+            <template v-for="(item,index) in items" :key="index">
+                <a-row :item="item" :index="index" :columns="columns" :data-index="index"
+                        :draggable="orderable"
+                        @dragstart="onDragStart" @dragover="onDragOver" @drop="onDrop"
+                        @cell="onCellEvent(index, $event)">
+                    <template v-for="[name,slot] of rowSlots" :key="slot" v-slot:[slot]="data">
+                        <slot :name="name" v-bind="data"/>
+                    </template>
+                </a-row>
+            </template>
+            <template v-if="allowCreate">
+                <a-row :item="extraItem" :index="items.length" :columns="columns"
+                        @keypress.enter.stop.prevent="validateExtraCell">
+                    <template v-for="[name,slot] of rowSlots" :key="slot" v-slot:[slot]="data">
+                        <slot :name="name" v-bind="data"/>
+                    </template>
+                </a-row>
+            </template>
+            <slot name="tail"/>
+        </tbody>
+    </table>
+</template>
+<script>
+import AList from './AList.vue'
+import ARow from './ARow.vue'
+
+const Component = {
+    extends: AList,
+    components: { ARow },
+    emit: ['cell'],
+
+    props: {
+        ...AList.props,
+        columns: Array,
+        labels: Object,
+        allowCreate: Boolean,
+    },
+
+    data() {
+        return {
+            ...super.data,
+            extraItem: new this.set.model(),
+        }
+    },
+
+    computed: {
+        rowSlots() {
+            return Object.keys(this.$slots).filter(x => x.startsWith('row-'))
+                                           .map(x => [x, x.slice(4)])
+        },
+    },
+
+    methods: {
+        validateExtraCell() {
+            if(!this.allowCreate)
+                return
+            this.set.push(this.extraItem)
+            this.extraItem = new this.set.model()
+        },
+    
+        /// React on 'cell' event, re-emitting it with additional values:
+        /// - `set`: data set
+        /// - `row`: row index
+        ///
+        /// @param {Number} row: row index
+        /// @param {} data: cell's event data
+        onCellEvent(row, event) {
+            this.$emit('cell', {
+                ...event, row,
+                set: this.set
+            })
+        },
+    },
+}
+Component.props.itemTag.default = 'tr'
+Component.props.listTag.default = 'tbody'
+
+export default Component
+</script>