127 lines
2.7 KiB
Vue
127 lines
2.7 KiB
Vue
<template>
|
||
<t-popconfirm
|
||
v-model:visible="visible"
|
||
trigger="click"
|
||
placement="bottom"
|
||
:show-arrow="false"
|
||
:popup-props="{ overlayClassName: 'tp-table-pop' }"
|
||
@visible-change="onVisibleChange"
|
||
>
|
||
<template #icon><span></span></template>
|
||
<template #content>
|
||
<div class="table-picker" @mouseleave="onReset">
|
||
<div class="tip" v-text="`${hoverRow} × ${hoverCol}`" />
|
||
<div class="grid">
|
||
<button
|
||
v-for="item in tablePickerItems"
|
||
:key="item.key"
|
||
class="cell"
|
||
:class="{ active: item.active }"
|
||
type="button"
|
||
@mousemove="onHover(item.row, item.col)"
|
||
@click="onSelect(item.row, item.col)"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<t-button v-popup="'插入表格'" variant="outline" :theme="active ? 'primary' : 'default'">
|
||
<t-icon name="table" />
|
||
</t-button>
|
||
</t-popconfirm>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import { TABLE_PICKER_SIZE } from "./shared";
|
||
import type { TiptapEditorInstance } from "./useTiptapEditor";
|
||
|
||
defineOptions({
|
||
name: "TiptapTableButton"
|
||
});
|
||
|
||
const props = defineProps<{
|
||
editor?: TiptapEditorInstance;
|
||
active: boolean;
|
||
}>();
|
||
|
||
const visible = ref(false);
|
||
const hoverRow = ref(1);
|
||
const hoverCol = ref(1);
|
||
|
||
const tablePickerItems = computed(() => {
|
||
const items: { key: string; row: number; col: number; active: boolean }[] = [];
|
||
for (let row = 1; row < TABLE_PICKER_SIZE + 1; row += 1) {
|
||
for (let col = 1; col < TABLE_PICKER_SIZE + 1; col += 1) {
|
||
items.push({
|
||
key: `${row}-${col}`,
|
||
row,
|
||
col,
|
||
active: row < hoverRow.value + 1 && col < hoverCol.value + 1
|
||
});
|
||
}
|
||
}
|
||
return items;
|
||
});
|
||
|
||
function onVisibleChange(nextVisible: boolean) {
|
||
if (!nextVisible) {
|
||
return;
|
||
}
|
||
hoverRow.value = 1;
|
||
hoverCol.value = 1;
|
||
}
|
||
|
||
function onReset() {
|
||
hoverRow.value = 1;
|
||
hoverCol.value = 1;
|
||
}
|
||
|
||
function onHover(row: number, col: number) {
|
||
hoverRow.value = row;
|
||
hoverCol.value = col;
|
||
}
|
||
|
||
function onSelect(row: number, col: number) {
|
||
if (!props.editor) {
|
||
return;
|
||
}
|
||
hoverRow.value = row;
|
||
hoverCol.value = col;
|
||
props.editor.chain().focus().insertTable({ rows: row, cols: col, withHeaderRow: true }).run();
|
||
visible.value = false;
|
||
}
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.table-picker {
|
||
width: 10.5rem;
|
||
|
||
.tip {
|
||
height: 1.5rem;
|
||
color: var(--td-text-color-secondary);
|
||
font-size: .75rem;
|
||
line-height: 1.5rem;
|
||
}
|
||
|
||
.grid {
|
||
gap: .125rem;
|
||
display: grid;
|
||
grid-template-columns: repeat(7, 1fr);
|
||
}
|
||
|
||
.cell {
|
||
width: 1.25rem;
|
||
height: 1.25rem;
|
||
padding: 0;
|
||
border: 1px solid var(--td-component-border);
|
||
cursor: pointer;
|
||
background: var(--td-bg-color-container);
|
||
transition: background .15s ease, border-color .15s ease;
|
||
|
||
&.active {
|
||
border-color: var(--td-brand-color);
|
||
background: var(--td-brand-color-light);
|
||
}
|
||
}
|
||
}
|
||
</style>
|