feat: 新カスタム絵文字管理画面（β）の追加 (#13473)
* wip * wip * wip * wip * wip * wip * wip * wip * fix * fix * fix * fix size * fix register logs * fix img autosize * fix row selection * support delete * fix border rendering * fix display:none * tweak comments * support choose pc file and drive file * support directory drag-drop * fix * fix comment * support context menu on data area * fix autogen * wip イベント整理 * イベントの整理 * refactor grid * fix cell re-render bugs * fix row remove * fix comment * fix validation * fix utils * list maximum * add mimetype check * fix * fix number cell focus * fix over 100 file drop * remove log * fix patchData * fix performance * fix * support update and delete * support remote import * fix layout * heightやめる * fix performance * add list v2 endpoint * support pagination * fix api call * fix no clickable input text * fix limit * fix paging * fix * fix * support search * tweak logs * tweak cell selection * fix range select * block delete * add comment * fix * support import log * fix dialog * refactor * add confirm dialog * fix name * fix autogen * wip * support image change and highlight row * add columns * wip * support sort * add role name * add index to emoji * refine context menu setting * support role select * remove unused buttons * fix url * fix MkRoleSelectDialog.vue * add route * refine remote page * enter key search * fix paste bugs * fix copy/paste * fix keyEvent * fix copy/paste and delete * fix comment * fix MkRoleSelectDialog.vue and storybook scenario * fix MkRoleSelectDialog.vue and storybook scenario * add MkGrid.stories.impl.ts * fix * [wip] add custom-emojis-manager2.stories.impl.ts * [wip] add custom-emojis-manager2.stories.impl.ts * wip * 課題はまだ残っているが、ひとまず完了 * fix validation and register roles * fix upload * optimize import * patch from dev * i18n * revert excess fixes * separate sort order component * add SPDX * revert excess fixes * fix pre test * fix bugs * add type column * fix types * fix CHANGELOG.md * fix lit * lint * tweak style * refactor * fix ci * autogen * Update types.ts * CSS Module化 * fix log * 縦スクロールを無効化 * MkStickyContainer化 * regenerate locales index.d.ts * fix * fix * テスト * ランダム値によるUI変更の抑制 * テスト * tableタグやめる * fix last-child css * fix overflow css * fix endpoint.ts * tweak css * 最新への追従とレイアウト微調整 * ソートキーの指定方法を他と合わせた * fix focus * fix layout * v2エンドポイントのルールに対応 * 表示条件などを微調整 * fix MkDataCell.vue * fix error code * fix error * add comment to MkModal.vue * Update index.d.ts * fix CHANGELOG.md * fix color theme * fix CHANGELOG.md * fix CHANGELOG.md * fix center * fix: テーブルにフォーカスがあり、通常状態であるときはキーイベントの伝搬を止める * fix: ロール選択用のダイアログにてコンディショナルロールを×ボタンで除外できなかったのを修正 * fix remote list folder * sticky footers * chore: fix ci error(just single line-break diff) * fix loading * fix like * comma to space * fix ci * fix ci * removed align-center --------- Co-authored-by: osamu <46447427+sam-osamu@users.noreply.github.com> Co-authored-by: syuilo <4439005+syuilo@users.noreply.github.com> Co-authored-by: Sayamame-beans <61457993+Sayamame-beans@users.noreply.github.com>
This commit is contained in:
おさむのひと
391
packages/frontend/src/components/grid/MkDataCell.vue
Normal file
391
packages/frontend/src/components/grid/MkDataCell.vue
Normal file
@@ -0,0 +1,391 @@
|
||||
<!--
|
||||
SPDX-FileCopyrightText: syuilo and other misskey contributors
|
||||
SPDX-License-Identifier: AGPL-3.0-only
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div
|
||||
v-if="cell.row.using"
|
||||
ref="rootEl"
|
||||
class="mk_grid_td"
|
||||
:class="$style.cell"
|
||||
:style="{ maxWidth: cellWidth, minWidth: cellWidth }"
|
||||
:tabindex="-1"
|
||||
data-grid-cell
|
||||
:data-grid-cell-row="cell.row.index"
|
||||
:data-grid-cell-col="cell.column.index"
|
||||
@keydown="onCellKeyDown"
|
||||
@dblclick.prevent="onCellDoubleClick"
|
||||
>
|
||||
<div
|
||||
:class="[
|
||||
$style.root,
|
||||
[(cell.violation.valid || cell.selected) ? {} : $style.error],
|
||||
[cell.selected ? $style.selected : {}],
|
||||
// 行が選択されているときは範囲選択色の適用を行側に任せる
|
||||
[(cell.ranged && !cell.row.ranged) ? $style.ranged : {}],
|
||||
[needsContentCentering ? $style.center : {}],
|
||||
]"
|
||||
>
|
||||
<div v-if="!editing" :class="[$style.contentArea]" :style="cellType === 'boolean' ? 'justify-content: center' : ''">
|
||||
<div ref="contentAreaEl" :class="$style.content">
|
||||
<div v-if="cellType === 'text'">
|
||||
{{ cell.value }}
|
||||
</div>
|
||||
<div v-if="cellType === 'number'">
|
||||
{{ cell.value }}
|
||||
</div>
|
||||
<div v-if="cellType === 'date'">
|
||||
{{ cell.value }}
|
||||
</div>
|
||||
<div v-else-if="cellType === 'boolean'">
|
||||
<span v-if="cell.value === true" class="ti ti-check"/>
|
||||
<span v-else class="ti"/>
|
||||
</div>
|
||||
<div v-else-if="cellType === 'image'">
|
||||
<img
|
||||
:src="cell.value as string"
|
||||
:alt="cell.value as string"
|
||||
:class="$style.viewImage"
|
||||
@load="emitContentSizeChanged"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else ref="inputAreaEl" :class="$style.inputArea">
|
||||
<input
|
||||
v-if="cellType === 'text'"
|
||||
type="text"
|
||||
:class="$style.editingInput"
|
||||
:value="editingValue"
|
||||
@input="onInputText"
|
||||
@mousedown.stop
|
||||
@contextmenu.stop
|
||||
/>
|
||||
<input
|
||||
v-if="cellType === 'number'"
|
||||
type="number"
|
||||
:class="$style.editingInput"
|
||||
:value="editingValue"
|
||||
@input="onInputText"
|
||||
@mousedown.stop
|
||||
@contextmenu.stop
|
||||
/>
|
||||
<input
|
||||
v-if="cellType === 'date'"
|
||||
type="date"
|
||||
:class="$style.editingInput"
|
||||
:value="editingValue"
|
||||
@input="onInputText"
|
||||
@mousedown.stop
|
||||
@contextmenu.stop
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, defineAsyncComponent, nextTick, onMounted, onUnmounted, ref, shallowRef, toRefs, watch } from 'vue';
|
||||
import { GridEventEmitter, Size } from '@/components/grid/grid.js';
|
||||
import { useTooltip } from '@/scripts/use-tooltip.js';
|
||||
import * as os from '@/os.js';
|
||||
import { CellValue, GridCell } from '@/components/grid/cell.js';
|
||||
import { equalCellAddress, getCellAddress } from '@/components/grid/grid-utils.js';
|
||||
import { GridRowSetting } from '@/components/grid/row.js';
|
||||
|
||||
const emit = defineEmits<{
|
||||
(ev: 'operation:beginEdit', sender: GridCell): void;
|
||||
(ev: 'operation:endEdit', sender: GridCell): void;
|
||||
(ev: 'change:value', sender: GridCell, newValue: CellValue): void;
|
||||
(ev: 'change:contentSize', sender: GridCell, newSize: Size): void;
|
||||
}>();
|
||||
const props = defineProps<{
|
||||
cell: GridCell,
|
||||
rowSetting: GridRowSetting,
|
||||
bus: GridEventEmitter,
|
||||
}>();
|
||||
|
||||
const { cell, bus } = toRefs(props);
|
||||
|
||||
const rootEl = shallowRef<InstanceType<typeof HTMLTableCellElement>>();
|
||||
const contentAreaEl = shallowRef<InstanceType<typeof HTMLDivElement>>();
|
||||
const inputAreaEl = shallowRef<InstanceType<typeof HTMLDivElement>>();
|
||||
|
||||
/** 値が編集中かどうか */
|
||||
const editing = ref<boolean>(false);
|
||||
/** 編集中の値. {@link beginEditing}と{@link endEditing}内、および各inputタグやそのコールバックからの操作のみを想定する */
|
||||
const editingValue = ref<CellValue>(undefined);
|
||||
|
||||
const cellWidth = computed(() => cell.value.column.width);
|
||||
const cellType = computed(() => cell.value.column.setting.type);
|
||||
const needsContentCentering = computed(() => {
|
||||
switch (cellType.value) {
|
||||
case 'boolean':
|
||||
return true;
|
||||
default:
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
watch(() => [cell.value.value], () => {
|
||||
// 中身がセットされた直後はサイズが分からないので、次のタイミングで更新する
|
||||
nextTick(emitContentSizeChanged);
|
||||
}, { immediate: true });
|
||||
|
||||
watch(() => cell.value.selected, () => {
|
||||
if (cell.value.selected) {
|
||||
requestFocus();
|
||||
}
|
||||
});
|
||||
|
||||
function onCellDoubleClick(ev: MouseEvent) {
|
||||
switch (ev.type) {
|
||||
case 'dblclick': {
|
||||
beginEditing(ev.target as HTMLElement);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function onOutsideMouseDown(ev: MouseEvent) {
|
||||
const isOutside = ev.target instanceof Node && !rootEl.value?.contains(ev.target);
|
||||
if (isOutside || !equalCellAddress(cell.value.address, getCellAddress(ev.target as HTMLElement))) {
|
||||
endEditing(true, false);
|
||||
}
|
||||
}
|
||||
|
||||
function onCellKeyDown(ev: KeyboardEvent) {
|
||||
if (!editing.value) {
|
||||
ev.preventDefault();
|
||||
switch (ev.code) {
|
||||
case 'NumpadEnter':
|
||||
case 'Enter':
|
||||
case 'F2': {
|
||||
beginEditing(ev.target as HTMLElement);
|
||||
break;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
switch (ev.code) {
|
||||
case 'Escape': {
|
||||
endEditing(false, true);
|
||||
break;
|
||||
}
|
||||
case 'NumpadEnter':
|
||||
case 'Enter': {
|
||||
if (!ev.isComposing) {
|
||||
endEditing(true, true);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function onInputText(ev: Event) {
|
||||
editingValue.value = (ev.target as HTMLInputElement).value;
|
||||
}
|
||||
|
||||
function onForceRefreshContentSize() {
|
||||
emitContentSizeChanged();
|
||||
}
|
||||
|
||||
function registerOutsideMouseDown() {
|
||||
unregisterOutsideMouseDown();
|
||||
addEventListener('mousedown', onOutsideMouseDown);
|
||||
}
|
||||
|
||||
function unregisterOutsideMouseDown() {
|
||||
removeEventListener('mousedown', onOutsideMouseDown);
|
||||
}
|
||||
|
||||
async function beginEditing(target: HTMLElement) {
|
||||
if (editing.value || !cell.value.selected || !cell.value.column.setting.editable) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (cell.value.column.setting.customValueEditor) {
|
||||
emit('operation:beginEdit', cell.value);
|
||||
const newValue = await cell.value.column.setting.customValueEditor(
|
||||
cell.value.row,
|
||||
cell.value.column,
|
||||
cell.value.value,
|
||||
target,
|
||||
);
|
||||
emit('operation:endEdit', cell.value);
|
||||
|
||||
if (newValue !== cell.value.value) {
|
||||
emitValueChange(newValue);
|
||||
}
|
||||
|
||||
requestFocus();
|
||||
} else {
|
||||
switch (cellType.value) {
|
||||
case 'number':
|
||||
case 'date':
|
||||
case 'text': {
|
||||
editingValue.value = cell.value.value;
|
||||
editing.value = true;
|
||||
registerOutsideMouseDown();
|
||||
emit('operation:beginEdit', cell.value);
|
||||
|
||||
await nextTick(() => {
|
||||
// inputの展開後にフォーカスを当てたい
|
||||
if (inputAreaEl.value) {
|
||||
(inputAreaEl.value.querySelector('*') as HTMLElement).focus();
|
||||
}
|
||||
});
|
||||
break;
|
||||
}
|
||||
case 'boolean': {
|
||||
// とくに特殊なUIは設けず、トグルするだけ
|
||||
emitValueChange(!cell.value.value);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function endEditing(applyValue: boolean, requireFocus: boolean) {
|
||||
if (!editing.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
const newValue = editingValue.value;
|
||||
editingValue.value = undefined;
|
||||
|
||||
emit('operation:endEdit', cell.value);
|
||||
unregisterOutsideMouseDown();
|
||||
|
||||
if (applyValue && newValue !== cell.value.value) {
|
||||
emitValueChange(newValue);
|
||||
}
|
||||
|
||||
editing.value = false;
|
||||
|
||||
if (requireFocus) {
|
||||
requestFocus();
|
||||
}
|
||||
}
|
||||
|
||||
function requestFocus() {
|
||||
nextTick(() => {
|
||||
rootEl.value?.focus();
|
||||
});
|
||||
}
|
||||
|
||||
function emitValueChange(newValue: CellValue) {
|
||||
const _cell = cell.value;
|
||||
emit('change:value', _cell, newValue);
|
||||
}
|
||||
|
||||
function emitContentSizeChanged() {
|
||||
emit('change:contentSize', cell.value, {
|
||||
width: contentAreaEl.value?.clientWidth ?? 0,
|
||||
height: contentAreaEl.value?.clientHeight ?? 0,
|
||||
});
|
||||
}
|
||||
|
||||
useTooltip(rootEl, (showing) => {
|
||||
if (cell.value.violation.valid) {
|
||||
return;
|
||||
}
|
||||
|
||||
const content = cell.value.violation.violations.filter(it => !it.valid).map(it => it.result.message).join('\n');
|
||||
const result = os.popup(defineAsyncComponent(() => import('@/components/grid/MkCellTooltip.vue')), {
|
||||
showing,
|
||||
content,
|
||||
targetElement: rootEl.value!,
|
||||
}, {
|
||||
closed: () => {
|
||||
result.dispose();
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
bus.value.on('forceRefreshContentSize', onForceRefreshContentSize);
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
bus.value.off('forceRefreshContentSize', onForceRefreshContentSize);
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<style module lang="scss">
|
||||
$cellHeight: 28px;
|
||||
|
||||
.cell {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
height: $cellHeight;
|
||||
max-height: $cellHeight;
|
||||
min-height: $cellHeight;
|
||||
cursor: cell;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
.root {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
|
||||
// selected適用時に中身がズレてしまうので、透明の線をあらかじめ引いておきたい
|
||||
border: solid 0.5px transparent;
|
||||
|
||||
&.selected {
|
||||
border: solid 0.5px var(--MI_THEME-accentLighten);
|
||||
}
|
||||
|
||||
&.ranged {
|
||||
background-color: var(--MI_THEME-accentedBg);
|
||||
}
|
||||
|
||||
&.center {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&.error {
|
||||
border: solid 0.5px var(--MI_THEME-error);
|
||||
}
|
||||
}
|
||||
|
||||
.contentArea, .inputArea {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.content {
|
||||
display: inline-block;
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.viewImage {
|
||||
width: auto;
|
||||
max-height: $cellHeight;
|
||||
height: $cellHeight;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.editingInput {
|
||||
padding: 0 8px;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
box-sizing: border-box;
|
||||
min-height: $cellHeight - 2;
|
||||
max-height: $cellHeight - 2;
|
||||
height: $cellHeight - 2;
|
||||
outline: none;
|
||||
border: none;
|
||||
font-family: 'Hiragino Maru Gothic Pro', "BIZ UDGothic", Roboto, HelveticaNeue, Arial, sans-serif;
|
||||
}
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user