td.cell.noselect(
:id='`cell${rowIndex}-${columnIndex}`'
:class='{ selected: !onlyBorder && selected, "selected-top": selectedTop, "selected-right": selectedRight, "selected-bottom": selectedBottom, "selected-left": selectedLeft, editable, invalid, [column.type || "text"]: true }'
:title='invalid'
:style='cellStyle'
@click='$emit("click", $event)'
@dblclick='$emit("dblclick", $event)'
@contextmenu='$emit("contextmenu", $event)'
@mousedown='$emit("mousedown", $event)'
@mouseover='$emit("mouseover", $event)'
@mouseup='$emit("mouseup", $event)'
)
span.editable-field(v-if='cellEditing[0] === rowIndex && cellEditing[1] === columnIndex')
select(v-if='(inputType === "select")'
class='grid-select'
ref='input'
@keyup.enter='setEditableValue',
@keydown.tab='setEditableValue',
@change='setEditableValue',
@keyup.esc='editCancelled',
@focus='editPending = true'
@blur='leaved'
)
option(v-for="(option, index) in column.selectOptions" :key='index' :value="option.value") {{option.text}}
input(
v-else,
:type='inputType'
ref='input'
:min='column.min'
:max='column.max'
:step='column.step'
:maxlength='column.maxlength'
@keyup.enter='setEditableValue'
@keydown.tab='setEditableValue'
@keyup.esc='editCancelled'
@focus='editPending = true'
@blur='leaved'
)
span.cell-content(v-else)
a(@click.prevent='linkClicked' v-if='column.type === "link"' href='#') {{ row[column.field] | cellFormatter(column, row) }}
span(v-else) {{ row[column.field] | cellFormatter(column, row) }}