- various __all__

- serializer: track search, reorder module files
- autocomplete: allow simple string value selection
- playlist editor:
    - ui & flow improve
    - init data
    - save user settings
    - autocomplete
    - fix bugs
    - discard changes

assets/src/components/ARow.vue

@@ -2,7 +2,9 @@
     <tr>
         <slot name="head" :item="item" :row="row"/>
         <template v-for="(attr,col) in columns" :key="col">
-            <td :class="['cell', 'cell-' + attr]" :data-col="col"
+            <slot name="cell-before" :item="item" :cell="cells[col]"
+                    :attr="attr"/>
+            <component :is="cellTag" :class="['cell', 'cell-' + attr]" :data-col="col"
                     :draggable="orderable"
                     @dragstart="onDragStart" @dragover="onDragOver" @drop="onDrop">
                 <slot :name="attr" :item="item" :cell="cells[col]"
@@ -10,9 +12,11 @@
                         :value="itemData && itemData[attr]">
                     {{ itemData && itemData[attr] }}
                 </slot>
-            </td>
+            </component>
+            <slot name="cell-after" :item="item" :col="col" :cell="cells[col]"
+                    :attr="attr"/>
         </template>
-        <slot name="tail" :item="item" :row="cell.row"/>
+        <slot name="tail" :item="item" :row="row"/>
     </tr>
 </template>
 <script>
@@ -24,20 +28,21 @@ export default {
 
     props: {
         item: Object,
-        cell: Object,
+        columns: Array,
+        cell: {type: Object, default() { return {row: 0}}},
+        cellTag: {type: String, default: 'td'},
         orderable: {type: Boolean, default: false},
     },
 
     computed: {
-        row() { return this.cell.row || 0 },
-        columns() { return this.cell.columns },
+        row() { return this.cell && this.cell.row },
         
         itemData() {
             return this.item instanceof Model ? this.item.data : this.item;
         },
 
         cells() {
-            const cell = isReactive(this.cell) && toRefs(this.cell) || this.cell
+            const cell = isReactive(this.cell) && toRefs(this.cell) || this.cell || {}
             const cells = []
             for(var col in this.columns)
                 cells.push({...cell, col: Number(col)})
@@ -45,7 +50,7 @@ export default {
         },
 
         cellEls() {
-            return [...this.$el.querySelectorAll('td')].filter(x => x.dataset.col)
+            return [...this.$el.querySelectorAll(self.cellTag)].filter(x => x.dataset.col)
         },
     },