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:
おさむのひと
35
packages/frontend/src/components/grid/MkCellTooltip.vue
Normal file
35
packages/frontend/src/components/grid/MkCellTooltip.vue
Normal file
@@ -0,0 +1,35 @@
|
||||
<!--
|
||||
SPDX-FileCopyrightText: syuilo and other misskey contributors
|
||||
SPDX-License-Identifier: AGPL-3.0-only
|
||||
-->
|
||||
|
||||
<template>
|
||||
<MkTooltip ref="tooltip" :showing="showing" :targetElement="targetElement" :maxWidth="250" @closed="emit('closed')">
|
||||
<div :class="$style.root">
|
||||
{{ content }}
|
||||
</div>
|
||||
</MkTooltip>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { } from 'vue';
|
||||
import MkTooltip from '@/components/MkTooltip.vue';
|
||||
|
||||
defineProps<{
|
||||
showing: boolean;
|
||||
content: string;
|
||||
targetElement: HTMLElement;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(ev: 'closed'): void;
|
||||
}>();
|
||||
</script>
|
||||
|
||||
<style lang="scss" module>
|
||||
.root {
|
||||
font-size: 0.9em;
|
||||
text-align: left;
|
||||
text-wrap: normal;
|
||||
}
|
||||
</style>
|
||||
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>
|
||||
72
packages/frontend/src/components/grid/MkDataRow.vue
Normal file
72
packages/frontend/src/components/grid/MkDataRow.vue
Normal file
@@ -0,0 +1,72 @@
|
||||
<!--
|
||||
SPDX-FileCopyrightText: syuilo and other misskey contributors
|
||||
SPDX-License-Identifier: AGPL-3.0-only
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="mk_grid_tr"
|
||||
:class="[
|
||||
$style.row,
|
||||
row.ranged ? $style.ranged : {},
|
||||
...(row.additionalStyles ?? []).map(it => it.className ?? {}),
|
||||
]"
|
||||
:style="[
|
||||
...(row.additionalStyles ?? []).map(it => it.style ?? {}),
|
||||
]"
|
||||
:data-grid-row="row.index"
|
||||
>
|
||||
<MkNumberCell
|
||||
v-if="setting.showNumber"
|
||||
:content="(row.index + 1).toString()"
|
||||
:row="row"
|
||||
/>
|
||||
<MkDataCell
|
||||
v-for="cell in cells"
|
||||
:key="cell.address.col"
|
||||
:vIf="cell.column.setting.type !== 'hidden'"
|
||||
:cell="cell"
|
||||
:rowSetting="setting"
|
||||
:bus="bus"
|
||||
@operation:beginEdit="(sender) => emit('operation:beginEdit', sender)"
|
||||
@operation:endEdit="(sender) => emit('operation:endEdit', sender)"
|
||||
@change:value="(sender, newValue) => emit('change:value', sender, newValue)"
|
||||
@change:contentSize="(sender, newSize) => emit('change:contentSize', sender, newSize)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { GridEventEmitter, Size } from '@/components/grid/grid.js';
|
||||
import MkDataCell from '@/components/grid/MkDataCell.vue';
|
||||
import MkNumberCell from '@/components/grid/MkNumberCell.vue';
|
||||
import { CellValue, GridCell } from '@/components/grid/cell.js';
|
||||
import { GridRow, 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;
|
||||
}>();
|
||||
defineProps<{
|
||||
row: GridRow,
|
||||
cells: GridCell[],
|
||||
setting: GridRowSetting,
|
||||
bus: GridEventEmitter,
|
||||
}>();
|
||||
|
||||
</script>
|
||||
|
||||
<style module lang="scss">
|
||||
.row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
width: fit-content;
|
||||
|
||||
&.ranged {
|
||||
background-color: var(--MI_THEME-accentedBg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
223
packages/frontend/src/components/grid/MkGrid.stories.impl.ts
Normal file
223
packages/frontend/src/components/grid/MkGrid.stories.impl.ts
Normal file
@@ -0,0 +1,223 @@
|
||||
/*
|
||||
* SPDX-FileCopyrightText: syuilo and misskey-project
|
||||
* SPDX-License-Identifier: AGPL-3.0-only
|
||||
*/
|
||||
|
||||
/* eslint-disable @typescript-eslint/explicit-function-return-type */
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { StoryObj } from '@storybook/vue3';
|
||||
import { ref } from 'vue';
|
||||
import { commonHandlers } from '../../../.storybook/mocks.js';
|
||||
import { boolean, choose, country, date, firstName, integer, lastName, text } from '../../../.storybook/fake-utils.js';
|
||||
import MkGrid from './MkGrid.vue';
|
||||
import { GridContext, GridEvent } from '@/components/grid/grid-event.js';
|
||||
import { DataSource, GridSetting } from '@/components/grid/grid.js';
|
||||
import { GridColumnSetting } from '@/components/grid/column.js';
|
||||
|
||||
function d(p: {
|
||||
check?: boolean,
|
||||
name?: string,
|
||||
email?: string,
|
||||
age?: number,
|
||||
birthday?: string,
|
||||
gender?: string,
|
||||
country?: string,
|
||||
reportCount?: number,
|
||||
createdAt?: string,
|
||||
}, seed: string) {
|
||||
const prefix = text(10, seed);
|
||||
|
||||
return {
|
||||
check: p.check ?? boolean(seed),
|
||||
name: p.name ?? `${firstName(seed)} ${lastName(seed)}`,
|
||||
email: p.email ?? `${prefix}@example.com`,
|
||||
age: p.age ?? integer(20, 80, seed),
|
||||
birthday: date({}, seed).toISOString(),
|
||||
gender: p.gender ?? choose(['male', 'female', 'other', 'unknown'], seed),
|
||||
country: p.country ?? country(seed),
|
||||
reportCount: p.reportCount ?? integer(0, 9999, seed),
|
||||
createdAt: p.createdAt ?? date({}, seed).toISOString(),
|
||||
};
|
||||
}
|
||||
|
||||
const defaultCols: GridColumnSetting[] = [
|
||||
{ bindTo: 'check', icon: 'ti-check', type: 'boolean', width: 50 },
|
||||
{ bindTo: 'name', title: 'Name', type: 'text', width: 'auto' },
|
||||
{ bindTo: 'email', title: 'Email', type: 'text', width: 'auto' },
|
||||
{ bindTo: 'age', title: 'Age', type: 'number', width: 50 },
|
||||
{ bindTo: 'birthday', title: 'Birthday', type: 'date', width: 'auto' },
|
||||
{ bindTo: 'gender', title: 'Gender', type: 'text', width: 80 },
|
||||
{ bindTo: 'country', title: 'Country', type: 'text', width: 120 },
|
||||
{ bindTo: 'reportCount', title: 'ReportCount', type: 'number', width: 'auto' },
|
||||
{ bindTo: 'createdAt', title: 'CreatedAt', type: 'date', width: 'auto' },
|
||||
];
|
||||
|
||||
function createArgs(overrides?: { settings?: Partial<GridSetting>, data?: DataSource[] }) {
|
||||
const refData = ref<ReturnType<typeof d>[]>([]);
|
||||
for (let i = 0; i < 100; i++) {
|
||||
refData.value.push(d({}, i.toString()));
|
||||
}
|
||||
|
||||
return {
|
||||
settings: {
|
||||
row: overrides?.settings?.row,
|
||||
cols: [
|
||||
...defaultCols.filter(col => overrides?.settings?.cols?.every(c => c.bindTo !== col.bindTo) ?? true),
|
||||
...overrides?.settings?.cols ?? [],
|
||||
],
|
||||
cells: overrides?.settings?.cells,
|
||||
},
|
||||
data: refData.value,
|
||||
};
|
||||
}
|
||||
|
||||
function createRender(params: { settings: GridSetting, data: DataSource[] }) {
|
||||
return {
|
||||
render(args) {
|
||||
return {
|
||||
components: {
|
||||
MkGrid,
|
||||
},
|
||||
setup() {
|
||||
return {
|
||||
args,
|
||||
};
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
data: args.data,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
props() {
|
||||
return {
|
||||
...args,
|
||||
};
|
||||
},
|
||||
events() {
|
||||
return {
|
||||
event: (event: GridEvent, context: GridContext) => {
|
||||
switch (event.type) {
|
||||
case 'cell-value-change': {
|
||||
args.data[event.row.index][event.column.setting.bindTo] = event.newValue;
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
},
|
||||
},
|
||||
template: '<div style="padding:20px"><MkGrid v-bind="props" v-on="events" /></div>',
|
||||
};
|
||||
},
|
||||
args: {
|
||||
...params,
|
||||
},
|
||||
parameters: {
|
||||
layout: 'fullscreen',
|
||||
msw: {
|
||||
handlers: [
|
||||
...commonHandlers,
|
||||
],
|
||||
},
|
||||
},
|
||||
} satisfies StoryObj<typeof MkGrid>;
|
||||
}
|
||||
|
||||
export const Default = createRender(createArgs());
|
||||
|
||||
export const NoNumber = createRender(createArgs({
|
||||
settings: {
|
||||
row: {
|
||||
showNumber: false,
|
||||
},
|
||||
},
|
||||
}));
|
||||
|
||||
export const NoSelectable = createRender(createArgs({
|
||||
settings: {
|
||||
row: {
|
||||
selectable: false,
|
||||
},
|
||||
},
|
||||
}));
|
||||
|
||||
export const Editable = createRender(createArgs({
|
||||
settings: {
|
||||
cols: defaultCols.map(col => ({ ...col, editable: true })),
|
||||
},
|
||||
}));
|
||||
|
||||
export const AdditionalRowStyle = createRender(createArgs({
|
||||
settings: {
|
||||
cols: defaultCols.map(col => ({ ...col, editable: true })),
|
||||
row: {
|
||||
styleRules: [
|
||||
{
|
||||
condition: ({ row }) => AdditionalRowStyle.args.data[row.index].check as boolean,
|
||||
applyStyle: {
|
||||
style: {
|
||||
backgroundColor: 'lightgray',
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
}));
|
||||
|
||||
export const ContextMenu = createRender(createArgs({
|
||||
settings: {
|
||||
cols: [
|
||||
{
|
||||
bindTo: 'check', icon: 'ti-check', type: 'boolean', width: 50, contextMenuFactory: (col, context) => [
|
||||
{
|
||||
type: 'button',
|
||||
text: 'Check All',
|
||||
action: () => {
|
||||
for (const d of ContextMenu.args.data) {
|
||||
d.check = true;
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
text: 'Uncheck All',
|
||||
action: () => {
|
||||
for (const d of ContextMenu.args.data) {
|
||||
d.check = false;
|
||||
}
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
row: {
|
||||
contextMenuFactory: (row, context) => [
|
||||
{
|
||||
type: 'button',
|
||||
text: 'Delete',
|
||||
action: () => {
|
||||
const idxes = context.rangedRows.map(r => r.index);
|
||||
const newData = ContextMenu.args.data.filter((d, i) => !idxes.includes(i));
|
||||
|
||||
ContextMenu.args.data.splice(0);
|
||||
ContextMenu.args.data.push(...newData);
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
cells: {
|
||||
contextMenuFactory: (col, row, value, context) => [
|
||||
{
|
||||
type: 'button',
|
||||
text: 'Delete',
|
||||
action: () => {
|
||||
for (const cell of context.rangedCells) {
|
||||
ContextMenu.args.data[cell.row.index][cell.column.setting.bindTo] = undefined;
|
||||
}
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
}));
|
||||
1342
packages/frontend/src/components/grid/MkGrid.vue
Normal file
1342
packages/frontend/src/components/grid/MkGrid.vue
Normal file
File diff suppressed because it is too large
Load Diff
216
packages/frontend/src/components/grid/MkHeaderCell.vue
Normal file
216
packages/frontend/src/components/grid/MkHeaderCell.vue
Normal file
@@ -0,0 +1,216 @@
|
||||
<!--
|
||||
SPDX-FileCopyrightText: syuilo and other misskey contributors
|
||||
SPDX-License-Identifier: AGPL-3.0-only
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div
|
||||
ref="rootEl"
|
||||
class="mk_grid_th"
|
||||
:class="$style.cell"
|
||||
:style="[{ maxWidth: column.width, minWidth: column.width, width: column.width }]"
|
||||
data-grid-cell
|
||||
:data-grid-cell-row="-1"
|
||||
:data-grid-cell-col="column.index"
|
||||
>
|
||||
<div :class="$style.root">
|
||||
<div :class="$style.left"/>
|
||||
<div :class="$style.wrapper">
|
||||
<div ref="contentEl" :class="$style.contentArea">
|
||||
<span v-if="column.setting.icon" class="ti" :class="column.setting.icon" style="line-height: normal"/>
|
||||
<span v-else>{{ text }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
:class="$style.right"
|
||||
@mousedown="onHandleMouseDown"
|
||||
@dblclick="onHandleDoubleClick"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, nextTick, onMounted, onUnmounted, ref, toRefs, watch } from 'vue';
|
||||
import { GridEventEmitter, Size } from '@/components/grid/grid.js';
|
||||
import { GridColumn } from '@/components/grid/column.js';
|
||||
|
||||
const emit = defineEmits<{
|
||||
(ev: 'operation:beginWidthChange', sender: GridColumn): void;
|
||||
(ev: 'operation:endWidthChange', sender: GridColumn): void;
|
||||
(ev: 'operation:widthLargest', sender: GridColumn): void;
|
||||
(ev: 'change:width', sender: GridColumn, width: string): void;
|
||||
(ev: 'change:contentSize', sender: GridColumn, newSize: Size): void;
|
||||
}>();
|
||||
const props = defineProps<{
|
||||
column: GridColumn,
|
||||
bus: GridEventEmitter,
|
||||
}>();
|
||||
|
||||
const { column, bus } = toRefs(props);
|
||||
|
||||
const rootEl = ref<InstanceType<typeof HTMLTableCellElement>>();
|
||||
const contentEl = ref<InstanceType<typeof HTMLDivElement>>();
|
||||
|
||||
const resizing = ref<boolean>(false);
|
||||
|
||||
const text = computed(() => {
|
||||
const result = column.value.setting.title ?? column.value.setting.bindTo;
|
||||
return result.length > 0 ? result : ' ';
|
||||
});
|
||||
|
||||
watch(column, () => {
|
||||
// 中身がセットされた直後はサイズが分からないので、次のタイミングで更新する
|
||||
nextTick(emitContentSizeChanged);
|
||||
}, { immediate: true });
|
||||
|
||||
function onHandleDoubleClick(ev: MouseEvent) {
|
||||
switch (ev.type) {
|
||||
case 'dblclick': {
|
||||
emit('operation:widthLargest', column.value);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function onHandleMouseDown(ev: MouseEvent) {
|
||||
switch (ev.type) {
|
||||
case 'mousedown': {
|
||||
if (!resizing.value) {
|
||||
registerHandleMouseUp();
|
||||
registerHandleMouseMove();
|
||||
resizing.value = true;
|
||||
emit('operation:beginWidthChange', column.value);
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function onHandleMouseMove(ev: MouseEvent) {
|
||||
if (!rootEl.value) {
|
||||
// 型ガード
|
||||
return;
|
||||
}
|
||||
|
||||
switch (ev.type) {
|
||||
case 'mousemove': {
|
||||
if (resizing.value) {
|
||||
const bounds = rootEl.value.getBoundingClientRect();
|
||||
const clientWidth = rootEl.value.clientWidth;
|
||||
const clientRight = bounds.left + clientWidth;
|
||||
const nextWidth = clientWidth + (ev.clientX - clientRight);
|
||||
emit('change:width', column.value, `${nextWidth}px`);
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function onHandleMouseUp(ev: MouseEvent) {
|
||||
switch (ev.type) {
|
||||
case 'mouseup': {
|
||||
if (resizing.value) {
|
||||
unregisterHandleMouseUp();
|
||||
unregisterHandleMouseMove();
|
||||
resizing.value = false;
|
||||
emit('operation:endWidthChange', column.value);
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function onForceRefreshContentSize() {
|
||||
emitContentSizeChanged();
|
||||
}
|
||||
|
||||
function registerHandleMouseMove() {
|
||||
unregisterHandleMouseMove();
|
||||
addEventListener('mousemove', onHandleMouseMove);
|
||||
}
|
||||
|
||||
function unregisterHandleMouseMove() {
|
||||
removeEventListener('mousemove', onHandleMouseMove);
|
||||
}
|
||||
|
||||
function registerHandleMouseUp() {
|
||||
unregisterHandleMouseUp();
|
||||
addEventListener('mouseup', onHandleMouseUp);
|
||||
}
|
||||
|
||||
function unregisterHandleMouseUp() {
|
||||
removeEventListener('mouseup', onHandleMouseUp);
|
||||
}
|
||||
|
||||
function emitContentSizeChanged() {
|
||||
const clientWidth = contentEl.value?.clientWidth ?? 0;
|
||||
const clientHeight = contentEl.value?.clientHeight ?? 0;
|
||||
emit('change:contentSize', column.value, {
|
||||
// バーの横幅も考慮したいので、+3px
|
||||
width: clientWidth + 3 + 3,
|
||||
height: clientHeight,
|
||||
});
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
bus.value.on('forceRefreshContentSize', onForceRefreshContentSize);
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
bus.value.off('forceRefreshContentSize', onForceRefreshContentSize);
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<style module lang="scss">
|
||||
$handleWidth: 5px;
|
||||
$cellHeight: 28px;
|
||||
|
||||
.cell {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.root {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: $cellHeight;
|
||||
max-height: $cellHeight;
|
||||
min-height: $cellHeight;
|
||||
|
||||
.wrapper {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
overflow: hidden;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.contentArea {
|
||||
display: flex;
|
||||
padding: 6px 4px;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.left {
|
||||
// rightのぶんだけズレるのでそれを相殺するためのネガティブマージン
|
||||
margin-left: -$handleWidth;
|
||||
margin-right: auto;
|
||||
width: $handleWidth;
|
||||
min-width: $handleWidth;
|
||||
}
|
||||
|
||||
.right {
|
||||
margin-left: auto;
|
||||
// 判定を罫線の上に重ねたいのでネガティブマージンを使う
|
||||
margin-right: -$handleWidth;
|
||||
width: $handleWidth;
|
||||
min-width: $handleWidth;
|
||||
cursor: w-resize;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
60
packages/frontend/src/components/grid/MkHeaderRow.vue
Normal file
60
packages/frontend/src/components/grid/MkHeaderRow.vue
Normal file
@@ -0,0 +1,60 @@
|
||||
<!--
|
||||
SPDX-FileCopyrightText: syuilo and other misskey contributors
|
||||
SPDX-License-Identifier: AGPL-3.0-only
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="mk_grid_tr"
|
||||
:class="$style.root"
|
||||
:data-grid-row="-1"
|
||||
>
|
||||
<MkNumberCell
|
||||
v-if="gridSetting.showNumber"
|
||||
content="#"
|
||||
:top="true"
|
||||
/>
|
||||
<MkHeaderCell
|
||||
v-for="column in columns"
|
||||
:key="column.index"
|
||||
:column="column"
|
||||
:bus="bus"
|
||||
@operation:beginWidthChange="(sender) => emit('operation:beginWidthChange', sender)"
|
||||
@operation:endWidthChange="(sender) => emit('operation:endWidthChange', sender)"
|
||||
@operation:widthLargest="(sender) => emit('operation:widthLargest', sender)"
|
||||
@change:width="(sender, width) => emit('change:width', sender, width)"
|
||||
@change:contentSize="(sender, newSize) => emit('change:contentSize', sender, newSize)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { GridEventEmitter, Size } from '@/components/grid/grid.js';
|
||||
import MkHeaderCell from '@/components/grid/MkHeaderCell.vue';
|
||||
import MkNumberCell from '@/components/grid/MkNumberCell.vue';
|
||||
import { GridColumn } from '@/components/grid/column.js';
|
||||
import { GridRowSetting } from '@/components/grid/row.js';
|
||||
|
||||
const emit = defineEmits<{
|
||||
(ev: 'operation:beginWidthChange', sender: GridColumn): void;
|
||||
(ev: 'operation:endWidthChange', sender: GridColumn): void;
|
||||
(ev: 'operation:widthLargest', sender: GridColumn): void;
|
||||
(ev: 'operation:selectionColumn', sender: GridColumn): void;
|
||||
(ev: 'change:width', sender: GridColumn, width: string): void;
|
||||
(ev: 'change:contentSize', sender: GridColumn, newSize: Size): void;
|
||||
}>();
|
||||
|
||||
defineProps<{
|
||||
columns: GridColumn[],
|
||||
gridSetting: GridRowSetting,
|
||||
bus: GridEventEmitter,
|
||||
}>();
|
||||
</script>
|
||||
|
||||
<style module lang="scss">
|
||||
.root {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
61
packages/frontend/src/components/grid/MkNumberCell.vue
Normal file
61
packages/frontend/src/components/grid/MkNumberCell.vue
Normal file
@@ -0,0 +1,61 @@
|
||||
<!--
|
||||
SPDX-FileCopyrightText: syuilo and other misskey contributors
|
||||
SPDX-License-Identifier: AGPL-3.0-only
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="mk_grid_th"
|
||||
:class="[$style.cell]"
|
||||
:tabindex="-1"
|
||||
data-grid-cell
|
||||
:data-grid-cell-row="row?.index ?? -1"
|
||||
:data-grid-cell-col="-1"
|
||||
>
|
||||
<div :class="[$style.root]">
|
||||
{{ content }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
import { GridRow } from '@/components/grid/row.js';
|
||||
|
||||
defineProps<{
|
||||
content: string,
|
||||
row?: GridRow,
|
||||
}>();
|
||||
|
||||
</script>
|
||||
|
||||
<style module lang="scss">
|
||||
$cellHeight: 28px;
|
||||
$cellWidth: 34px;
|
||||
|
||||
.cell {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
height: $cellHeight;
|
||||
max-height: $cellHeight;
|
||||
min-height: $cellHeight;
|
||||
min-width: $cellWidth;
|
||||
width: $cellWidth;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.root {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
padding: 0 8px;
|
||||
height: 100%;
|
||||
border: solid 0.5px transparent;
|
||||
|
||||
&.selected {
|
||||
background-color: var(--MI_THEME-accentedBg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
110
packages/frontend/src/components/grid/cell-validators.ts
Normal file
110
packages/frontend/src/components/grid/cell-validators.ts
Normal file
@@ -0,0 +1,110 @@
|
||||
/*
|
||||
* SPDX-FileCopyrightText: syuilo and misskey-project
|
||||
* SPDX-License-Identifier: AGPL-3.0-only
|
||||
*/
|
||||
|
||||
import { CellValue, GridCell } from '@/components/grid/cell.js';
|
||||
import { GridColumn } from '@/components/grid/column.js';
|
||||
import { GridRow } from '@/components/grid/row.js';
|
||||
import { i18n } from '@/i18n.js';
|
||||
|
||||
export type ValidatorParams = {
|
||||
column: GridColumn;
|
||||
row: GridRow;
|
||||
value: CellValue;
|
||||
allCells: GridCell[];
|
||||
};
|
||||
|
||||
export type ValidatorResult = {
|
||||
valid: boolean;
|
||||
message?: string;
|
||||
}
|
||||
|
||||
export type GridCellValidator = {
|
||||
name?: string;
|
||||
ignoreViolation?: boolean;
|
||||
validate: (params: ValidatorParams) => ValidatorResult;
|
||||
}
|
||||
|
||||
export type ValidateViolation = {
|
||||
valid: boolean;
|
||||
params: ValidatorParams;
|
||||
violations: ValidateViolationItem[];
|
||||
}
|
||||
|
||||
export type ValidateViolationItem = {
|
||||
valid: boolean;
|
||||
validator: GridCellValidator;
|
||||
result: ValidatorResult;
|
||||
}
|
||||
|
||||
export function cellValidation(allCells: GridCell[], cell: GridCell, newValue: CellValue): ValidateViolation {
|
||||
const { column, row } = cell;
|
||||
const validators = column.setting.validators ?? [];
|
||||
|
||||
const params: ValidatorParams = {
|
||||
column,
|
||||
row,
|
||||
value: newValue,
|
||||
allCells,
|
||||
};
|
||||
|
||||
const violations: ValidateViolationItem[] = validators.map(validator => {
|
||||
const result = validator.validate(params);
|
||||
return {
|
||||
valid: result.valid,
|
||||
validator,
|
||||
result,
|
||||
};
|
||||
});
|
||||
|
||||
return {
|
||||
valid: violations.every(v => v.result.valid),
|
||||
params,
|
||||
violations,
|
||||
};
|
||||
}
|
||||
|
||||
class ValidatorPreset {
|
||||
required(): GridCellValidator {
|
||||
return {
|
||||
name: 'required',
|
||||
validate: ({ value }): ValidatorResult => {
|
||||
return {
|
||||
valid: value !== null && value !== undefined && value !== '',
|
||||
message: i18n.ts._gridComponent._error.requiredValue,
|
||||
};
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
regex(pattern: RegExp): GridCellValidator {
|
||||
return {
|
||||
name: 'regex',
|
||||
validate: ({ value }): ValidatorResult => {
|
||||
return {
|
||||
valid: (typeof value !== 'string') || pattern.test(value.toString() ?? ''),
|
||||
message: i18n.tsx._gridComponent._error.patternNotMatch({ pattern: pattern.source }),
|
||||
};
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
unique(): GridCellValidator {
|
||||
return {
|
||||
name: 'unique',
|
||||
validate: ({ column, row, value, allCells }): ValidatorResult => {
|
||||
const bindTo = column.setting.bindTo;
|
||||
const isUnique = allCells
|
||||
.filter(it => it.column.setting.bindTo === bindTo && it.row.index !== row.index)
|
||||
.every(cell => cell.value !== value);
|
||||
return {
|
||||
valid: isUnique,
|
||||
message: i18n.ts._gridComponent._error.notUnique,
|
||||
};
|
||||
},
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
export const validators = new ValidatorPreset();
|
||||
88
packages/frontend/src/components/grid/cell.ts
Normal file
88
packages/frontend/src/components/grid/cell.ts
Normal file
@@ -0,0 +1,88 @@
|
||||
/*
|
||||
* SPDX-FileCopyrightText: syuilo and misskey-project
|
||||
* SPDX-License-Identifier: AGPL-3.0-only
|
||||
*/
|
||||
|
||||
import { ValidateViolation } from '@/components/grid/cell-validators.js';
|
||||
import { Size } from '@/components/grid/grid.js';
|
||||
import { GridColumn } from '@/components/grid/column.js';
|
||||
import { GridRow } from '@/components/grid/row.js';
|
||||
import { MenuItem } from '@/types/menu.js';
|
||||
import { GridContext } from '@/components/grid/grid-event.js';
|
||||
|
||||
export type CellValue = string | boolean | number | undefined | null | Array<unknown> | NonNullable<unknown>;
|
||||
|
||||
export type CellAddress = {
|
||||
row: number;
|
||||
col: number;
|
||||
}
|
||||
|
||||
export const CELL_ADDRESS_NONE: CellAddress = {
|
||||
row: -1,
|
||||
col: -1,
|
||||
};
|
||||
|
||||
export type GridCell = {
|
||||
address: CellAddress;
|
||||
value: CellValue;
|
||||
column: GridColumn;
|
||||
row: GridRow;
|
||||
selected: boolean;
|
||||
ranged: boolean;
|
||||
contentSize: Size;
|
||||
setting: GridCellSetting;
|
||||
violation: ValidateViolation;
|
||||
}
|
||||
|
||||
export type GridCellContextMenuFactory = (col: GridColumn, row: GridRow, value: CellValue, context: GridContext) => MenuItem[];
|
||||
|
||||
export type GridCellSetting = {
|
||||
contextMenuFactory?: GridCellContextMenuFactory;
|
||||
}
|
||||
|
||||
export function createCell(
|
||||
column: GridColumn,
|
||||
row: GridRow,
|
||||
value: CellValue,
|
||||
setting: GridCellSetting,
|
||||
): GridCell {
|
||||
const newValue = (row.using && column.setting.valueTransformer)
|
||||
? column.setting.valueTransformer(row, column, value)
|
||||
: value;
|
||||
|
||||
return {
|
||||
address: { row: row.index, col: column.index },
|
||||
value: newValue,
|
||||
column,
|
||||
row,
|
||||
selected: false,
|
||||
ranged: false,
|
||||
contentSize: { width: 0, height: 0 },
|
||||
violation: {
|
||||
valid: true,
|
||||
params: {
|
||||
column,
|
||||
row,
|
||||
value,
|
||||
allCells: [],
|
||||
},
|
||||
violations: [],
|
||||
},
|
||||
setting,
|
||||
};
|
||||
}
|
||||
|
||||
export function resetCell(cell: GridCell): void {
|
||||
cell.selected = false;
|
||||
cell.ranged = false;
|
||||
cell.violation = {
|
||||
valid: true,
|
||||
params: {
|
||||
column: cell.column,
|
||||
row: cell.row,
|
||||
value: cell.value,
|
||||
allCells: [],
|
||||
},
|
||||
violations: [],
|
||||
};
|
||||
}
|
||||
53
packages/frontend/src/components/grid/column.ts
Normal file
53
packages/frontend/src/components/grid/column.ts
Normal file
@@ -0,0 +1,53 @@
|
||||
/*
|
||||
* SPDX-FileCopyrightText: syuilo and misskey-project
|
||||
* SPDX-License-Identifier: AGPL-3.0-only
|
||||
*/
|
||||
|
||||
import { GridCellValidator } from '@/components/grid/cell-validators.js';
|
||||
import { Size, SizeStyle } from '@/components/grid/grid.js';
|
||||
import { calcCellWidth } from '@/components/grid/grid-utils.js';
|
||||
import { CellValue, GridCell } from '@/components/grid/cell.js';
|
||||
import { GridRow } from '@/components/grid/row.js';
|
||||
import { MenuItem } from '@/types/menu.js';
|
||||
import { GridContext } from '@/components/grid/grid-event.js';
|
||||
|
||||
export type ColumnType = 'text' | 'number' | 'date' | 'boolean' | 'image' | 'hidden';
|
||||
|
||||
export type CustomValueEditor = (row: GridRow, col: GridColumn, value: CellValue, cellElement: HTMLElement) => Promise<CellValue>;
|
||||
export type CellValueTransformer = (row: GridRow, col: GridColumn, value: CellValue) => CellValue;
|
||||
export type GridColumnContextMenuFactory = (col: GridColumn, context: GridContext) => MenuItem[];
|
||||
|
||||
export type GridColumnSetting = {
|
||||
bindTo: string;
|
||||
title?: string;
|
||||
icon?: string;
|
||||
type: ColumnType;
|
||||
width: SizeStyle;
|
||||
editable?: boolean;
|
||||
validators?: GridCellValidator[];
|
||||
customValueEditor?: CustomValueEditor;
|
||||
valueTransformer?: CellValueTransformer;
|
||||
contextMenuFactory?: GridColumnContextMenuFactory;
|
||||
events?: {
|
||||
copy?: (value: CellValue) => string;
|
||||
paste?: (text: string) => CellValue;
|
||||
delete?: (cell: GridCell, context: GridContext) => void;
|
||||
}
|
||||
};
|
||||
|
||||
export type GridColumn = {
|
||||
index: number;
|
||||
setting: GridColumnSetting;
|
||||
width: string;
|
||||
contentSize: Size;
|
||||
}
|
||||
|
||||
export function createColumn(setting: GridColumnSetting, index: number): GridColumn {
|
||||
return {
|
||||
index,
|
||||
setting,
|
||||
width: calcCellWidth(setting.width),
|
||||
contentSize: { width: 0, height: 0 },
|
||||
};
|
||||
}
|
||||
|
||||
46
packages/frontend/src/components/grid/grid-event.ts
Normal file
46
packages/frontend/src/components/grid/grid-event.ts
Normal file
@@ -0,0 +1,46 @@
|
||||
/*
|
||||
* SPDX-FileCopyrightText: syuilo and misskey-project
|
||||
* SPDX-License-Identifier: AGPL-3.0-only
|
||||
*/
|
||||
|
||||
import { CellAddress, CellValue, GridCell } from '@/components/grid/cell.js';
|
||||
import { GridState } from '@/components/grid/grid.js';
|
||||
import { ValidateViolation } from '@/components/grid/cell-validators.js';
|
||||
import { GridColumn } from '@/components/grid/column.js';
|
||||
import { GridRow } from '@/components/grid/row.js';
|
||||
|
||||
export type GridContext = {
|
||||
selectedCell?: GridCell;
|
||||
rangedCells: GridCell[];
|
||||
rangedRows: GridRow[];
|
||||
randedBounds: {
|
||||
leftTop: CellAddress;
|
||||
rightBottom: CellAddress;
|
||||
};
|
||||
availableBounds: {
|
||||
leftTop: CellAddress;
|
||||
rightBottom: CellAddress;
|
||||
};
|
||||
state: GridState;
|
||||
rows: GridRow[];
|
||||
columns: GridColumn[];
|
||||
};
|
||||
|
||||
export type GridEvent =
|
||||
GridCellValueChangeEvent |
|
||||
GridCellValidationEvent
|
||||
;
|
||||
|
||||
export type GridCellValueChangeEvent = {
|
||||
type: 'cell-value-change';
|
||||
column: GridColumn;
|
||||
row: GridRow;
|
||||
oldValue: CellValue;
|
||||
newValue: CellValue;
|
||||
};
|
||||
|
||||
export type GridCellValidationEvent = {
|
||||
type: 'cell-validation';
|
||||
violation?: ValidateViolation;
|
||||
all: ValidateViolation[];
|
||||
};
|
||||
215
packages/frontend/src/components/grid/grid-utils.ts
Normal file
215
packages/frontend/src/components/grid/grid-utils.ts
Normal file
@@ -0,0 +1,215 @@
|
||||
/*
|
||||
* SPDX-FileCopyrightText: syuilo and misskey-project
|
||||
* SPDX-License-Identifier: AGPL-3.0-only
|
||||
*/
|
||||
|
||||
import { isRef, Ref } from 'vue';
|
||||
import { DataSource, SizeStyle } from '@/components/grid/grid.js';
|
||||
import { CELL_ADDRESS_NONE, CellAddress, CellValue, GridCell } from '@/components/grid/cell.js';
|
||||
import { GridRow } from '@/components/grid/row.js';
|
||||
import { GridContext } from '@/components/grid/grid-event.js';
|
||||
import { copyToClipboard } from '@/scripts/copy-to-clipboard.js';
|
||||
import { GridColumn, GridColumnSetting } from '@/components/grid/column.js';
|
||||
|
||||
export function isCellElement(elem: HTMLElement): boolean {
|
||||
return elem.hasAttribute('data-grid-cell');
|
||||
}
|
||||
|
||||
export function isRowElement(elem: HTMLElement): boolean {
|
||||
return elem.hasAttribute('data-grid-row');
|
||||
}
|
||||
|
||||
export function calcCellWidth(widthSetting: SizeStyle): string {
|
||||
switch (widthSetting) {
|
||||
case undefined:
|
||||
case 'auto': {
|
||||
return 'auto';
|
||||
}
|
||||
default: {
|
||||
return `${widthSetting}px`;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function getCellRowByAttribute(elem: HTMLElement): number {
|
||||
const row = elem.getAttribute('data-grid-cell-row');
|
||||
if (row === null) {
|
||||
throw new Error('data-grid-cell-row attribute not found');
|
||||
}
|
||||
return Number(row);
|
||||
}
|
||||
|
||||
function getCellColByAttribute(elem: HTMLElement): number {
|
||||
const col = elem.getAttribute('data-grid-cell-col');
|
||||
if (col === null) {
|
||||
throw new Error('data-grid-cell-col attribute not found');
|
||||
}
|
||||
return Number(col);
|
||||
}
|
||||
|
||||
export function getCellAddress(elem: HTMLElement, parentNodeCount = 10): CellAddress {
|
||||
let node = elem;
|
||||
for (let i = 0; i < parentNodeCount; i++) {
|
||||
if (!node.parentElement) {
|
||||
break;
|
||||
}
|
||||
|
||||
if (isCellElement(node) && isRowElement(node.parentElement)) {
|
||||
const row = getCellRowByAttribute(node);
|
||||
const col = getCellColByAttribute(node);
|
||||
|
||||
return { row, col };
|
||||
}
|
||||
|
||||
node = node.parentElement;
|
||||
}
|
||||
|
||||
return CELL_ADDRESS_NONE;
|
||||
}
|
||||
|
||||
export function getCellElement(elem: HTMLElement, parentNodeCount = 10): HTMLElement | null {
|
||||
let node = elem;
|
||||
for (let i = 0; i < parentNodeCount; i++) {
|
||||
if (isCellElement(node)) {
|
||||
return node;
|
||||
}
|
||||
|
||||
if (!node.parentElement) {
|
||||
break;
|
||||
}
|
||||
|
||||
node = node.parentElement;
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
export function equalCellAddress(a: CellAddress, b: CellAddress): boolean {
|
||||
return a.row === b.row && a.col === b.col;
|
||||
}
|
||||
|
||||
/**
|
||||
* グリッドの選択範囲の内容をタブ区切り形式テキストに変換してクリップボードにコピーする。
|
||||
*/
|
||||
export function copyGridDataToClipboard(
|
||||
gridItems: Ref<DataSource[]> | DataSource[],
|
||||
context: GridContext,
|
||||
) {
|
||||
const items = isRef(gridItems) ? gridItems.value : gridItems;
|
||||
const lines = Array.of<string>();
|
||||
const bounds = context.randedBounds;
|
||||
|
||||
for (let row = bounds.leftTop.row; row <= bounds.rightBottom.row; row++) {
|
||||
const rowItems = Array.of<string>();
|
||||
for (let col = bounds.leftTop.col; col <= bounds.rightBottom.col; col++) {
|
||||
const { bindTo, events } = context.columns[col].setting;
|
||||
const value = items[row][bindTo];
|
||||
const transformValue = events?.copy
|
||||
? events.copy(value)
|
||||
: typeof value === 'object' || Array.isArray(value)
|
||||
? JSON.stringify(value)
|
||||
: value?.toString() ?? '';
|
||||
rowItems.push(transformValue);
|
||||
}
|
||||
lines.push(rowItems.join('\t'));
|
||||
}
|
||||
|
||||
const text = lines.join('\n');
|
||||
copyToClipboard(text);
|
||||
|
||||
if (_DEV_) {
|
||||
console.log(`Copied to clipboard: ${text}`);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* クリップボードからタブ区切りテキストとして値を読み取り、グリッドの選択範囲に貼り付けるためのユーティリティ関数。
|
||||
* …と言いつつも、使用箇所により反映方法に差があるため更新操作はコールバック関数に任せている。
|
||||
*/
|
||||
export async function pasteToGridFromClipboard(
|
||||
context: GridContext,
|
||||
callback: (row: GridRow, col: GridColumn, parsedValue: CellValue) => void,
|
||||
) {
|
||||
function parseValue(value: string, setting: GridColumnSetting): CellValue {
|
||||
if (setting.events?.paste) {
|
||||
return setting.events.paste(value);
|
||||
} else {
|
||||
switch (setting.type) {
|
||||
case 'number': {
|
||||
return Number(value);
|
||||
}
|
||||
case 'boolean': {
|
||||
return value === 'true';
|
||||
}
|
||||
default: {
|
||||
return value;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const clipBoardText = await navigator.clipboard.readText();
|
||||
if (_DEV_) {
|
||||
console.log(`Paste from clipboard: ${clipBoardText}`);
|
||||
}
|
||||
|
||||
const bounds = context.randedBounds;
|
||||
const lines = clipBoardText.replace(/\r/g, '')
|
||||
.split('\n')
|
||||
.map(it => it.split('\t'));
|
||||
|
||||
if (lines.length === 1 && lines[0].length === 1) {
|
||||
// 単独文字列の場合は選択範囲全体に同じテキストを貼り付ける
|
||||
const ranges = context.rangedCells;
|
||||
for (const cell of ranges) {
|
||||
if (cell.column.setting.editable) {
|
||||
callback(cell.row, cell.column, parseValue(lines[0][0], cell.column.setting));
|
||||
}
|
||||
}
|
||||
} else {
|
||||
// 表形式文字列の場合は表形式にパースし、選択範囲に合うように貼り付ける
|
||||
const offsetRow = bounds.leftTop.row;
|
||||
const offsetCol = bounds.leftTop.col;
|
||||
const { columns, rows } = context;
|
||||
for (let row = bounds.leftTop.row; row <= bounds.rightBottom.row; row++) {
|
||||
const rowIdx = row - offsetRow;
|
||||
if (lines.length <= rowIdx) {
|
||||
// クリップボードから読んだ二次元配列よりも選択範囲の方が大きい場合、貼り付け操作を打ち切る
|
||||
break;
|
||||
}
|
||||
|
||||
const items = lines[rowIdx];
|
||||
for (let col = bounds.leftTop.col; col <= bounds.rightBottom.col; col++) {
|
||||
const colIdx = col - offsetCol;
|
||||
if (items.length <= colIdx) {
|
||||
// クリップボードから読んだ二次元配列よりも選択範囲の方が大きい場合、貼り付け操作を打ち切る
|
||||
break;
|
||||
}
|
||||
|
||||
if (columns[col].setting.editable) {
|
||||
callback(rows[row], columns[col], parseValue(items[colIdx], columns[col].setting));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* グリッドの選択範囲にあるデータを削除するためのユーティリティ関数。
|
||||
* …と言いつつも、使用箇所により反映方法に差があるため更新操作はコールバック関数に任せている。
|
||||
*/
|
||||
export function removeDataFromGrid(
|
||||
context: GridContext,
|
||||
callback: (cell: GridCell) => void,
|
||||
) {
|
||||
for (const cell of context.rangedCells) {
|
||||
const { editable, events } = cell.column.setting;
|
||||
if (editable) {
|
||||
if (events?.delete) {
|
||||
events.delete(cell, context);
|
||||
} else {
|
||||
callback(cell);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
44
packages/frontend/src/components/grid/grid.ts
Normal file
44
packages/frontend/src/components/grid/grid.ts
Normal file
@@ -0,0 +1,44 @@
|
||||
/*
|
||||
* SPDX-FileCopyrightText: syuilo and misskey-project
|
||||
* SPDX-License-Identifier: AGPL-3.0-only
|
||||
*/
|
||||
|
||||
import { EventEmitter } from 'eventemitter3';
|
||||
import { CellValue, GridCellSetting } from '@/components/grid/cell.js';
|
||||
import { GridColumnSetting } from '@/components/grid/column.js';
|
||||
import { GridRowSetting } from '@/components/grid/row.js';
|
||||
|
||||
export type GridSetting = {
|
||||
row?: GridRowSetting;
|
||||
cols: GridColumnSetting[];
|
||||
cells?: GridCellSetting;
|
||||
};
|
||||
|
||||
export type DataSource = Record<string, CellValue>;
|
||||
|
||||
export type GridState =
|
||||
'normal' |
|
||||
'cellSelecting' |
|
||||
'cellEditing' |
|
||||
'colResizing' |
|
||||
'colSelecting' |
|
||||
'rowSelecting' |
|
||||
'hidden'
|
||||
;
|
||||
|
||||
export type Size = {
|
||||
width: number;
|
||||
height: number;
|
||||
}
|
||||
|
||||
export type SizeStyle = number | 'auto' | undefined;
|
||||
|
||||
export type AdditionalStyle = {
|
||||
className?: string;
|
||||
style?: Record<string, string | number>;
|
||||
}
|
||||
|
||||
export class GridEventEmitter extends EventEmitter<{
|
||||
'forceRefreshContentSize': void;
|
||||
}> {
|
||||
}
|
||||
68
packages/frontend/src/components/grid/row.ts
Normal file
68
packages/frontend/src/components/grid/row.ts
Normal file
@@ -0,0 +1,68 @@
|
||||
/*
|
||||
* SPDX-FileCopyrightText: syuilo and misskey-project
|
||||
* SPDX-License-Identifier: AGPL-3.0-only
|
||||
*/
|
||||
|
||||
import { AdditionalStyle } from '@/components/grid/grid.js';
|
||||
import { GridCell } from '@/components/grid/cell.js';
|
||||
import { GridColumn } from '@/components/grid/column.js';
|
||||
import { MenuItem } from '@/types/menu.js';
|
||||
import { GridContext } from '@/components/grid/grid-event.js';
|
||||
|
||||
export const defaultGridRowSetting: Required<GridRowSetting> = {
|
||||
showNumber: true,
|
||||
selectable: true,
|
||||
minimumDefinitionCount: 100,
|
||||
styleRules: [],
|
||||
contextMenuFactory: () => [],
|
||||
events: {},
|
||||
};
|
||||
|
||||
export type GridRowStyleRuleConditionParams = {
|
||||
row: GridRow,
|
||||
targetCols: GridColumn[],
|
||||
cells: GridCell[]
|
||||
};
|
||||
|
||||
export type GridRowStyleRule = {
|
||||
condition: (params: GridRowStyleRuleConditionParams) => boolean;
|
||||
applyStyle: AdditionalStyle;
|
||||
}
|
||||
|
||||
export type GridRowContextMenuFactory = (row: GridRow, context: GridContext) => MenuItem[];
|
||||
|
||||
export type GridRowSetting = {
|
||||
showNumber?: boolean;
|
||||
selectable?: boolean;
|
||||
minimumDefinitionCount?: number;
|
||||
styleRules?: GridRowStyleRule[];
|
||||
contextMenuFactory?: GridRowContextMenuFactory;
|
||||
events?: {
|
||||
delete?: (rows: GridRow[]) => void;
|
||||
}
|
||||
}
|
||||
|
||||
export type GridRow = {
|
||||
index: number;
|
||||
ranged: boolean;
|
||||
using: boolean;
|
||||
setting: GridRowSetting;
|
||||
additionalStyles: AdditionalStyle[];
|
||||
}
|
||||
|
||||
export function createRow(index: number, using: boolean, setting: GridRowSetting): GridRow {
|
||||
return {
|
||||
index,
|
||||
ranged: false,
|
||||
using: using,
|
||||
setting,
|
||||
additionalStyles: [],
|
||||
};
|
||||
}
|
||||
|
||||
export function resetRow(row: GridRow): void {
|
||||
row.ranged = false;
|
||||
row.using = false;
|
||||
row.additionalStyles = [];
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user