various fixes

assets/src/components/ARow.vue

@@ -30,20 +30,34 @@ export default {
     emit: ['move', 'cell'],
 
     props: {
+        //! Item to display in row
         item: Object,
+        //! Columns to display, as items' attributes
         columns: Array,
+        //! Default cell's info
         cell: {type: Object, default() { return {row: 0}}},
+        //! Cell component tag
         cellTag: {type: String, default: 'td'},
+        //! If true, can reorder cell by drag & drop
         orderable: {type: Boolean, default: false},
     },
 
     computed: {
-        row() { return this.cell && this.cell.row },
-        
+        /**
+         * Row index
+         */
+        row() { return this.cell && this.cell.row || 0 },
+
+        /**
+         * Item's data if model instance, otherwise item
+         */
         itemData() {
             return this.item instanceof Model ? this.item.data : this.item;
         },
 
+        /**
+         * Computed cell infos
+         */
         cells() {
             const cell = isReactive(this.cell) && toRefs(this.cell) || this.cell || {}
             const cells = []
@@ -51,19 +65,16 @@ export default {
                 cells.push({...cell, col: Number(col)})
             return cells
         },
-
-        cellEls() {
-            return [...this.$el.querySelectorAll(self.cellTag)].filter(x => x.dataset.col)
-        },
     },
 
     methods: {
-        /// Emit a 'cell' event.
-        /// Event data: `{name, data, item, attr}`
-        ///
-        /// @param {Number} col: cell column's index
-        /// @param {String} name: cell's event name
-        /// @param {} data: cell's event data
+        /**
+         * Emit a 'cell' event.
+         * Event data: `{name, cell, data, item}`
+         * @param {Number} col: cell column's index
+         * @param {String} name: cell's event name
+         * @param {} data: cell's event data
+         */
         cellEmit(name, cell, data) {
             this.$emit('cell', {
                 name, cell, data,
@@ -83,6 +94,9 @@ export default {
             ev.dataTransfer.dropEffect = 'move'
         },
 
+        /**
+         * Handle drop event, emit `'move': { from, to }`.
+         */
         onDrop(ev) {
             const data = ev.dataTransfer.getData("text/cell")
             if(!data || !data.startsWith('cell:'))
@@ -95,14 +109,28 @@ export default {
             })
         },
 
+        /**
+         * Return DOM node for cells at provided position `col`
+         */
+        getCellEl(col) {
+            const els = this.$el.querySelectorAll(this.cellTag)
+            for(var el of els)
+                if(col == Number(el.dataset.col))
+                    return el;
+            return null
+        },
+
+        /**
+         * Focus cell's form input. If from is provided, related focus
+         */
         focus(col, from) {
             if(from)
                 col += from.col
 
-            const target = this.cellEls[col]
+            const target = this.getCellEl(col)
             if(!target)
                 return
-            const control = target.querySelector('input') ||
+            const control = target.querySelector('input:not([type="hidden"])') ||
                             target.querySelector('button') ||
                             target.querySelector('select') ||
                             target.querySelector('a');