Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 | 4x 4x 4x 4x 4x | <script>
import { GlDisclosureDropdown, GlButton, GlTooltip } from '@gitlab/ui';
import { uniqueId } from 'lodash';
import { __, sprintf } from '~/locale';
import { clamp } from '../services/utils';
export const tableContentType = 'table';
const MIN_ROWS = 5;
const MIN_COLS = 5;
const MAX_ROWS = 10;
const MAX_COLS = 10;
export default {
components: {
GlButton,
GlDisclosureDropdown,
GlTooltip,
},
inject: ['tiptapEditor'],
data() {
return {
toggleId: uniqueId('dropdown-toggle-btn-'),
maxRows: MIN_ROWS,
maxCols: MIN_COLS,
rows: 1,
cols: 1,
};
},
methods: {
list(n) {
return new Array(n).fill().map((_, i) => i + 1);
},
setRowsAndCols(rows, cols) {
this.rows = rows;
this.cols = cols;
this.maxRows = clamp(rows + 1, MIN_ROWS, MAX_ROWS);
this.maxCols = clamp(cols + 1, MIN_COLS, MAX_COLS);
},
resetState() {
this.rows = 1;
this.cols = 1;
},
insertTable() {
this.tiptapEditor
.chain()
.focus()
.insertTable({
rows: this.rows,
cols: this.cols,
withHeaderRow: true,
})
.run();
this.resetState();
this.$refs.dropdown.close();
this.$emit('execute', { contentType: 'table' });
},
getButtonLabel(rows, cols) {
return sprintf(__('Insert a %{rows}×%{cols} table'), { rows, cols });
},
onKeydown(key) {
const delta = {
ArrowUp: { rows: -1, cols: 0 },
ArrowDown: { rows: 1, cols: 0 },
ArrowLeft: { rows: 0, cols: -1 },
ArrowRight: { rows: 0, cols: 1 },
}[key] || { rows: 0, cols: 0 };
const rows = clamp(this.rows + delta.rows, 1, this.maxRows);
const cols = clamp(this.cols + delta.cols, 1, this.maxCols);
this.setRowsAndCols(rows, cols);
},
setFocus(row, col) {
this.$refs[`table-${row}-${col}`][0].$el.focus();
},
},
MAX_COLS,
MAX_ROWS,
};
</script>
<template>
<div class="gl-display-inline-flex gl-vertical-align-middle">
<gl-disclosure-dropdown
ref="dropdown"
:toggle-id="toggleId"
size="small"
category="tertiary"
icon="table"
no-caret
:aria-label="__('Insert table')"
:toggle-text="__('Insert table')"
positioning-strategy="fixed"
class="content-editor-table-dropdown gl-mr-2"
text-sr-only
:fluid-width="true"
@shown="setFocus(1, 1)"
>
<div
class="gl-p-3 gl-pt-2"
role="grid"
:aria-colcount="$options.MAX_COLS"
:aria-rowcount="$options.MAX_ROWS"
>
<div v-for="r of list(maxRows)" :key="r" class="gl-display-flex" role="row">
<div v-for="c of list(maxCols)" :key="c" role="gridcell">
<gl-button
:ref="`table-${r}-${c}`"
:class="{ 'active gl-bg-blue-50!': r <= rows && c <= cols }"
:aria-label="getButtonLabel(r, c)"
class="table-creator-grid-item gl-display-inline gl-rounded-0! gl-w-6! gl-h-6! gl-p-0!"
@mouseover="setRowsAndCols(r, c)"
@focus="setRowsAndCols(r, c)"
@click="insertTable()"
@keydown="onKeydown($event.key)"
/>
</div>
</div>
</div>
<div class="gl-border-t gl-px-4 gl-pt-3 gl-pb-2">
{{ getButtonLabel(rows, cols) }}
</div>
</gl-disclosure-dropdown>
<gl-tooltip :target="toggleId" placement="top">{{ __('Insert table') }}</gl-tooltip>
</div>
</template>
|