- save & load

- key navigation
- ui improvements

assets/src/components/ARows.vue

@@ -10,18 +10,26 @@
         </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"
+            <template v-for="(item,row) in items" :key="row">
+                <!-- data-index comes from AList component drag & drop -->
+                <a-row :item="item" :cell="{row, columns}" :data-index="row"
                         :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 v-if="slot == 'head' || slot == 'tail'">
+                            <slot :name="name" v-bind="data"/>
+                        </template>
+                        <template v-else>
+                            <div @keydown.capture.ctrl="onControlKey($event, data.cell)">
+                                <slot :name="name" v-bind="data"/>
+                            </div>
+                        </template>
                     </template>
                 </a-row>
             </template>
             <template v-if="allowCreate">
-                <a-row :item="extraItem" :index="items.length" :columns="columns"
+                <a-row :item="extraItem" :cell="{row:items.length, 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"/>
@@ -56,6 +64,17 @@ const Component = {
     },
 
     computed: {
+        rowCells() {
+            const cells = []
+            for(var row in this.items)
+                cells.push({row, columns: this.columns,})
+        },
+
+        rows() {
+            return [...this.$el.querySelectorAll('tr')].filter(x => x.__row)
+                                                       .map(x => x.__row)
+        },
+        
         rowSlots() {
             return Object.keys(this.$slots).filter(x => x.startsWith('row-'))
                                            .map(x => [x, x.slice(4)])
@@ -69,19 +88,61 @@ const Component = {
             this.set.push(this.extraItem)
             this.extraItem = new this.set.model()
         },
+
+        onControlKey(event, cell) {
+            switch(event.key) {
+                case "ArrowUp": this.focus(-1, 0, cell)
+                                event.stopPropagation()
+                                event.preventDefault()
+                                break;
+                case "ArrowDown": this.focus(1, 0, cell)
+                                event.stopPropagation()
+                                event.preventDefault()
+                                break;
+                case "ArrowLeft": this.focus(0, -1, cell)
+                                event.stopPropagation()
+                                event.preventDefault()
+                                break;
+                case "ArrowRight": this.focus(0, 1, cell)
+                                event.stopPropagation()
+                                event.preventDefault()
+                                break;
+            }
+        },
     
-        /// 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
+        /**
+         * 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) {
+            if(event.name == 'focus')
+                this.cellFocus(event.data, event.cell)
+            
             this.$emit('cell', {
                 ...event, row,
                 set: this.set
             })
         },
+
+        getCellNode(row, col) {
+            const el = this.$refs[row]
+            return el && el.cellEls(col)
+        },
+
+        /**
+         * Focus on a cell
+         */
+        focus(row, col, from=null) {
+            if(from)
+                row += from.row
+
+            row = this.rows[row]
+            row && row.focus(col, from)
+        },
     },
 }
 Component.props.itemTag.default = 'tr'