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>
2025-01-20 20:35:37 +09:00
parent b41e78090d
commit f9ad127aaf
66 changed files with 8275 additions and 58 deletions
@@ -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;
+						}
+					},
+				},
+			],
+		},
+	},
+}));