usbharu
/
misskey
mirror of https://github.com/misskey-dev/misskey.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

ドライブ複数選択できるようになった可能性がある

This commit is contained in:
mattyatea 2023-10-04 01:00:59 +09:00
parent a328a03c51
commit a0927c5353
9 changed files with 524 additions and 274 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
locales/index.d.ts vendored
View File

@ -79,6 +79,7 @@ export interface Locale {
"files": string; "files": string;
"download": string; "download": string;
"driveFileDeleteConfirm": string; "driveFileDeleteConfirm": string;
"driveFolderDeleteConfirm": string;
"unfollowConfirm": string; "unfollowConfirm": string;
"exportRequested": string; "exportRequested": string;
"importRequested": string; "importRequested": string;

1
locales/ja-JP.yml
View File

@ -76,6 +76,7 @@ export: "エクスポート"
files: "ファイル" files: "ファイル"
download: "ダウンロード" download: "ダウンロード"
driveFileDeleteConfirm: "ファイル「{name}」を削除しますか？このファイルを使用した一部のコンテンツも削除されます。" driveFileDeleteConfirm: "ファイル「{name}」を削除しますか？このファイルを使用した一部のコンテンツも削除されます。"
driveFolderDeleteConfirm: "フォルダ「{name}」を削除しますか？このフォルダの中に存在するファイルを使用した一部のコンテンツも削除されます。"
unfollowConfirm: "{name}のフォローを解除しますか？" unfollowConfirm: "{name}のフォローを解除しますか？"
exportRequested: "エクスポートをリクエストしました。これには時間がかかる場合があります。エクスポートが終わると、「ドライブ」に追加されます。" exportRequested: "エクスポートをリクエストしました。これには時間がかかる場合があります。エクスポートが終わると、「ドライブ」に追加されます。"
importRequested: "インポートをリクエストしました。これには時間がかかる場合があります。" importRequested: "インポートをリクエストしました。これには時間がかかる場合があります。"

2
packages/frontend/package.json
View File

@ -27,6 +27,7 @@
"@vitejs/plugin-vue": "4.3.4", "@vitejs/plugin-vue": "4.3.4",
"@vue-macros/reactivity-transform": "0.3.23", "@vue-macros/reactivity-transform": "0.3.23",
"@vue/compiler-sfc": "3.3.4", "@vue/compiler-sfc": "3.3.4",
"@vueuse/core": "^10.4.1",
"astring": "1.8.6", "astring": "1.8.6",
"autosize": "6.0.1", "autosize": "6.0.1",
"broadcast-channel": "5.3.0", "broadcast-channel": "5.3.0",
@ -74,6 +75,7 @@
"vanilla-tilt": "1.8.1", "vanilla-tilt": "1.8.1",
"vite": "4.4.9", "vite": "4.4.9",
"vue": "3.3.4", "vue": "3.3.4",
"vue-multiselect": "^2.1.7",
"vue-prism-editor": "2.0.0-alpha.2", "vue-prism-editor": "2.0.0-alpha.2",
"vuedraggable": "next" "vuedraggable": "next"
}, },

387
packages/frontend/src/components/MkDrive.file.vue
View File

@ -4,239 +4,290 @@ SPDX-License-Identifier: AGPL-3.0-only
--> -->
<template> <template>
<div <div
:class="[$style.root, { [$style.isSelected]: isSelected }]" :class="[$style.root, { [$style.isSelected]: isSelected },{[$style.isSelected]: isMultiSelect}]"
draggable="true" draggable="true"
:title="title" :title="title"
@click="onClick" @click="onClick"
@contextmenu.stop="onContextmenu" @pointerdown="startLongPress(file)"
@dragstart="onDragstart" @pointerup="endLongPress"
@dragend="onDragend" @contextmenu.stop="onContextmenu"
> @dragstart="onDragstart"
<div style="pointer-events: none;"> @dragend="onDragend"
<div v-if="$i?.avatarId == file.id" :class="[$style.label]"> >
<img :class="$style.labelImg" src="/client-assets/label.svg"/> <div style="pointer-events: none;">
<p :class="$style.labelText">{{ i18n.ts.avatar }}</p> <div v-if="$i?.avatarId == file.id" :class="[$style.label]">
</div> <img :class="$style.labelImg" src="/client-assets/label.svg"/>
<div v-if="$i?.bannerId == file.id" :class="[$style.label]"> <p :class="$style.labelText">{{ i18n.ts.avatar }}</p>
<img :class="$style.labelImg" src="/client-assets/label.svg"/> </div>
<p :class="$style.labelText">{{ i18n.ts.banner }}</p> <div v-if="$i?.bannerId == file.id" :class="[$style.label]">
</div> <img :class="$style.labelImg" src="/client-assets/label.svg"/>
<div v-if="file.isSensitive" :class="[$style.label, $style.red]"> <p :class="$style.labelText">{{ i18n.ts.banner }}</p>
<img :class="$style.labelImg" src="/client-assets/label-red.svg"/> </div>
<p :class="$style.labelText">{{ i18n.ts.sensitive }}</p> <div v-if="file.isSensitive" :class="[$style.label, $style.red]">
</div> <img :class="$style.labelImg" src="/client-assets/label-red.svg"/>
<p :class="$style.labelText">{{ i18n.ts.sensitive }}</p>
</div>
<MkDriveFileThumbnail :class="$style.thumbnail" :file="file" fit="contain"/> <MkDriveFileThumbnail :class="$style.thumbnail" :file="file" fit="contain"/>
<p :class="$style.name"> <p :class="$style.name">
<span>{{ file.name.lastIndexOf('.') != -1 ? file.name.substring(0, file.name.lastIndexOf('.')) : file.name }}</span> <span>{{
<span v-if="file.name.lastIndexOf('.') != -1" style="opacity: 0.5;">{{ file.name.substring(file.name.lastIndexOf('.')) }}</span> file.name.lastIndexOf('.') != -1 ? file.name.substring(0, file.name.lastIndexOf('.')) : file.name
</p> }}</span>
</div> <span v-if="file.name.lastIndexOf('.') != -1"
</div> style="opacity: 0.5;">{{ file.name.substring(file.name.lastIndexOf('.')) }}</span>
</p>
</div>
</div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { computed, ref } from 'vue'; import {computed, ref, watch} from 'vue';
import * as Misskey from 'misskey-js'; import * as Misskey from 'misskey-js';
import MkDriveFileThumbnail from '@/components/MkDriveFileThumbnail.vue'; import MkDriveFileThumbnail from '@/components/MkDriveFileThumbnail.vue';
import bytes from '@/filters/bytes.js'; import bytes from '@/filters/bytes.js';
import * as os from '@/os.js'; import * as os from '@/os.js';
import { i18n } from '@/i18n.js'; import {i18n} from '@/i18n.js';
import { $i } from '@/account.js'; import {$i} from '@/account.js';
import { getDriveFileMenu } from '@/scripts/get-drive-file-menu.js'; import {getDriveFileMenu, getDriveFileMultiMenu} from '@/scripts/get-drive-file-menu.js';
const isLongPressing = ref(false);
let longPressTimeout = null;
import {defaultStore} from '@/store.js'
function startLongPress() {
isLongPressing.value = true;
longPressTimeout = setTimeout(() => {
if (isLongPressing) {
}
}, 800); // 長押しと判断する時間（1秒）を設定
}
function endLongPress() {
isLongPressing.value = false;
clearTimeout(longPressTimeout);
}
const isMultiSelect = ref(false);
const props = withDefaults(defineProps<{ const props = withDefaults(defineProps<{
file: Misskey.entities.DriveFile; file: Misskey.entities.DriveFile;
folder: Misskey.entities.DriveFolder | null; folder: Misskey.entities.DriveFolder | null;
isSelected?: boolean; isSelected?: boolean;
selectMode?: boolean; selectMode?: boolean;
multipleselect?;
isLongPressing?;
}>(), { }>(), {
isSelected: false, isSelected: false,
selectMode: false, selectMode: false,
}); });
const emit = defineEmits<{ const emit = defineEmits<{
(ev: 'chosen', r: Misskey.entities.DriveFile): void; (ev: 'chosen', r: Misskey.entities.DriveFile): void;
(ev: 'dragstart'): void; (ev: 'dragstart'): void;
(ev: 'dragend'): void; (ev: 'dragend'): void;
}>(); }>();
const isDragging = ref(false); const isDragging = ref(false);
const title = computed(() => `${props.file.name}\n${props.file.type} ${bytes(props.file.size)}`); const title = computed(() => `${props.file.name}\n${props.file.type} ${bytes(props.file.size)}`);
watch(props.multipleselect, () => {
isMultiSelect.value = !!props.multipleselect.some(item => item.id === props.file.id);
});
function onClick(ev: MouseEvent) { function onClick(ev: MouseEvent) {
if (props.selectMode) {
emit('chosen', props.file);
} else {
os.popupMenu(getDriveFileMenu(props.file, props.folder), (ev.currentTarget ?? ev.target ?? undefined) as HTMLElement | undefined);
}
}
if (props.selectMode) {
emit('chosen', props.file);
} else if (ev.shiftKey && ev.button === 2 || isMultiSelect.value ) {
os.popupMenu(getDriveFileMultiMenu(props.multipleselect, props.folder), (ev.currentTarget ?? ev.target ?? undefined) as HTMLElement | undefined);
}
else if (!ev.shiftKey) {
os.popupMenu(getDriveFileMenu(props.file, props.folder), (ev.currentTarget ?? ev.target ?? undefined) as HTMLElement | undefined);
}
}
function device() {
var ua = navigator.userAgent;
if(ua.indexOf('iPhone') > 0 || ua.indexOf('iPod') > 0 || ua.indexOf('Android') > 0 && ua.indexOf('Mobile') > 0){
return 'mobile';
}else if(ua.indexOf('iPad') > 0 || ua.indexOf('Android') > 0){
return 'tablet';
}else{
return 'desktop';
}
}
function onContextmenu(ev: MouseEvent) { function onContextmenu(ev: MouseEvent) {
os.contextMenu(getDriveFileMenu(props.file, props.folder), ev);
if (!ev.shiftKey && !isMultiSelect.value) {
os.contextMenu(getDriveFileMenu(props.file, props.folder), ev);
} else if (ev.shiftKey && props.multipleselect.length > 0 && ev.button === 2) {
os.contextMenu(getDriveFileMultiMenu(props.multipleselect, props.folder), ev);
} else if(device()=== "desktop"){
os.contextMenu(getDriveFileMenu(props.file, props.folder), ev);
}
if (props.isLongPressing){
isMultiSelect.value = !isMultiSelect.value
}
} }
function onDragstart(ev: DragEvent) { function onDragstart(ev: DragEvent) {
if (ev.dataTransfer) { if (ev.dataTransfer) {
ev.dataTransfer.effectAllowed = 'move'; ev.dataTransfer.effectAllowed = 'move';
ev.dataTransfer.setData(_DATA_TRANSFER_DRIVE_FILE_, JSON.stringify(props.file)); ev.dataTransfer.setData(_DATA_TRANSFER_DRIVE_FILE_, JSON.stringify(props.file));
} }
isDragging.value = true; isDragging.value = true;
emit('dragstart'); emit('dragstart');
} }
function onDragend() { function onDragend() {
isDragging.value = false; isDragging.value = false;
emit('dragend'); emit('dragend');
} }
</script> </script>
<style lang="scss" module> <style lang="scss" module>
.root { .root {
position: relative; position: relative;
padding: 8px 0 0 0; padding: 8px 0 0 0;
min-height: 180px; min-height: 180px;
border-radius: 8px; border-radius: 8px;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background: rgba(#000, 0.05); background: rgba(#000, 0.05);
> .label { > .label {
&:before, &:before,
&:after { &:after {
background: #0b65a5; background: #0b65a5;
} }
&.red { &.red {
&:before, &:before,
&:after { &:after {
background: #c12113; background: #c12113;
} }
} }
} }
} }
&:active { &:active {
background: rgba(#000, 0.1); background: rgba(#000, 0.1);
> .label { > .label {
&:before, &:before,
&:after { &:after {
background: #0b588c; background: #0b588c;
} }
&.red { &.red {
&:before, &:before,
&:after { &:after {
background: #ce2212; background: #ce2212;
} }
} }
} }
} }
&.isSelected { &.isSelected {
background: var(--accent); background: var(--accent);
&:hover { &:hover {
background: var(--accentLighten); background: var(--accentLighten);
} }
&:active { &:active {
background: var(--accentDarken); background: var(--accentDarken);
} }
> .label { > .label {
&:before, &:before,
&:after { &:after {
display: none; display: none;
} }
} }
> .name { > .name {
color: #fff; color: #fff;
} }
> .thumbnail { > .thumbnail {
color: #fff; color: #fff;
} }
} }
} }
.label { .label {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
pointer-events: none; pointer-events: none;
&:before, &:before,
&:after { &:after {
content: ""; content: "";
display: block; display: block;
position: absolute; position: absolute;
z-index: 1; z-index: 1;
background: #0c7ac9; background: #0c7ac9;
} }
&:before { &:before {
top: 0; top: 0;
left: 57px; left: 57px;
width: 28px; width: 28px;
height: 8px; height: 8px;
} }
&:after { &:after {
top: 57px; top: 57px;
left: 0; left: 0;
width: 8px; width: 8px;
height: 28px; height: 28px;
} }
&.red { &.red {
&:before, &:before,
&:after { &:after {
background: #c12113; background: #c12113;
} }
} }
} }
.labelImg { .labelImg {
position: absolute; position: absolute;
z-index: 2; z-index: 2;
top: 0; top: 0;
left: 0; left: 0;
} }
.labelText { .labelText {
position: absolute; position: absolute;
z-index: 3; z-index: 3;
top: 19px; top: 19px;
left: -28px; left: -28px;
width: 120px; width: 120px;
margin: 0; margin: 0;
text-align: center; text-align: center;
line-height: 28px; line-height: 28px;
color: #fff; color: #fff;
transform: rotate(-45deg); transform: rotate(-45deg);
} }
.thumbnail { .thumbnail {
width: 110px; width: 110px;
height: 110px; height: 110px;
margin: auto; margin: auto;
} }
.name { .name {
display: block; display: block;
margin: 4px 0 0 0; margin: 4px 0 0 0;
font-size: 0.8em; font-size: 0.8em;
text-align: center; text-align: center;
word-break: break-all; word-break: break-all;
color: var(--fg); color: var(--fg);
overflow: hidden; overflow: hidden;
} }
</style> </style>

157
packages/frontend/src/components/MkDrive.folder.vue
View File

@ -18,6 +18,7 @@ SPDX-License-Identifier: AGPL-3.0-only
@drop.prevent.stop="onDrop" @drop.prevent.stop="onDrop"
@dragstart="onDragstart" @dragstart="onDragstart"
@dragend="onDragend" @dragend="onDragend"
> >
<p :class="$style.name"> <p :class="$style.name">
<template v-if="hover"><i :class="$style.icon" class="ti ti-folder ti-fw"></i></template> <template v-if="hover"><i :class="$style.icon" class="ti ti-folder ti-fw"></i></template>
@ -44,6 +45,7 @@ const props = withDefaults(defineProps<{
folder: Misskey.entities.DriveFolder; folder: Misskey.entities.DriveFolder;
isSelected?: boolean; isSelected?: boolean;
selectMode?: boolean; selectMode?: boolean;
multipleselect?;
}>(), { }>(), {
isSelected: false, isSelected: false,
selectMode: false, selectMode: false,
@ -143,11 +145,22 @@ function onDrop(ev: DragEvent) {
if (driveFile != null && driveFile !== '') { if (driveFile != null && driveFile !== '') {
const file = JSON.parse(driveFile); const file = JSON.parse(driveFile);
emit('removeFile', file.id); emit('removeFile', file.id);
os.api('drive/files/update', { if (props.multipleselect.length > 0) {
fileId: file.id, props.multipleselect.forEach((e)=>{
folderId: props.folder.id, os.api('drive/files/update', {
}); fileId: e.id,
} folderId: props.folder.id,
});
})
}else{
os.api('drive/files/update', {
fileId: file.id,
folderId: props.folder.id,
});
}
}
//#endregion //#endregion
//#region ドライブのフォルダ //#region ドライブのフォルダ
@ -221,28 +234,118 @@ function rename() {
} }
function deleteFolder() { function deleteFolder() {
os.api('drive/folders/delete', { os.api('drive/folders/show', {
folderId: props.folder.id, folderId: props.folder.id,
}).then(() => { }).then(async (r) => {
if (defaultStore.state.uploadFolder === props.folder.id) {
defaultStore.set('uploadFolder', null); if (r.foldersCount > 0) {
} await os.alert({
}).catch(err => { type: 'error',
switch (err.id) { title: i18n.ts.unableToDelete,
case 'b0fc8a17-963c-405d-bfbc-859a487295e1': text: 'フォルダ内にフォルダが存在するため、削除できません。 \n フォルダ内のフォルダを削除してから試してみてください。',
os.alert({ });
type: 'error', }
title: i18n.ts.unableToDelete,
text: i18n.ts.hasChildFilesOrFolders, if (r.filesCount > 0) {
});
break; const {canceled} = await os.confirm({
default: type: 'warning',
os.alert({ text: i18n.t('driveFolderDeleteConfirm', {name: props.folder.name}),
type: 'error', });
text: i18n.ts.unableToDelete,
}); if (canceled) return;
}
}); let allResults = [];
let Result = await os.api('drive/files', {folderId: props.folder.id, limit: 31});
allResults = allResults.concat(Result)
while (Result.length >= 31) {
const untilId = Result[Result.length - 1].id;
Result = await os.api('drive/files', { folderId: props.folder.id, limit: 31, untilId });
allResults = allResults.concat(Result); // pushをconcatに変更
}
allResults.forEach((r,i)=>{
os.api('drive/files/delete',{fileId: r.id})
})
os.api('drive/folders/show', {
folderId: props.folder.id,
}).then(async (r) =>{
if (r.filesCount > 0) {
let allResults = [];
let Result = await os.api('drive/files', {folderId: props.folder.id, limit: 31});
allResults = allResults.concat(Result)
while (Result.length >= 31) {
const untilId = Result[Result.length - 1].id;
Result = await os.api('drive/files', { folderId: props.folder.id, limit: 31, untilId });
allResults = allResults.concat(Result); // pushをconcatに変更
}
allResults.forEach((r,i)=>{
console.log(r)
os.api('drive/files/delete',{fileId: r.id})
})
os.api('drive/folders/delete', {
folderId: props.folder.id,
}).then(() => {
if (defaultStore.state.uploadFolder === props.folder.id) {
defaultStore.set('uploadFolder', null);
}
}).catch(err => {
switch (err.id) {
case 'b0fc8a17-963c-405d-bfbc-859a487295e1':
os.alert({
type: 'error',
title: i18n.ts.unableToDelete,
text: i18n.ts.hasChildFilesOrFolders,
});
break;
default:
os.alert({
type: 'error',
text: i18n.ts.unableToDelete,
});
}
});
os.api('drive/folders/delete', {
folderId: props.folder.id,
})
}else{
os.api('drive/folders/delete', {
folderId: props.folder.id,
})
}
})
} else {
await os.api('drive/folders/delete', {
folderId: props.folder.id,
}).then(() => {
if (defaultStore.state.uploadFolder === props.folder.id) {
defaultStore.set('uploadFolder', null);
}
}).catch(err => {
switch (err.id) {
case 'b0fc8a17-963c-405d-bfbc-859a487295e1':
os.alert({
type: 'error',
title: i18n.ts.unableToDelete,
text: i18n.ts.hasChildFilesOrFolders,
});
break;
default:
os.alert({
type: 'error',
text: i18n.ts.unableToDelete,
});
}
});
}
})
} }
function setAsUploadFolder() { function setAsUploadFolder() {

21
packages/frontend/src/components/MkDrive.navFolder.vue
View File

@ -26,6 +26,7 @@ import { i18n } from '@/i18n.js';
const props = defineProps<{ const props = defineProps<{
folder?: Misskey.entities.DriveFolder; folder?: Misskey.entities.DriveFolder;
parentFolder: Misskey.entities.DriveFolder | null; parentFolder: Misskey.entities.DriveFolder | null;
multipleselect?;
}>(); }>();
const emit = defineEmits<{ const emit = defineEmits<{
@ -112,10 +113,22 @@ function onDrop(ev: DragEvent) {
if (driveFile != null && driveFile !== '') { if (driveFile != null && driveFile !== '') {
const file = JSON.parse(driveFile); const file = JSON.parse(driveFile);
emit('removeFile', file.id); emit('removeFile', file.id);
os.api('drive/files/update', {
fileId: file.id, if (props.multipleselect.length > 0) {
folderId: props.folder ? props.folder.id : null,
}); props.multipleselect.forEach((e)=>{
os.api('drive/files/update', {
fileId: e.id,
folderId: props.folder ? props.folder.id : null,
});
})
}else{
os.api('drive/files/update', {
fileId: file.id,
folderId: props.folder ? props.folder.id : null,
});
}
} }
//#endregion //#endregion

50
packages/frontend/src/components/MkDrive.vue
View File

@ -14,6 +14,7 @@ SPDX-License-Identifier: AGPL-3.0-only
@upload="upload" @upload="upload"
@removeFile="removeFile" @removeFile="removeFile"
@removeFolder="removeFolder" @removeFolder="removeFolder"
:multipleselect="multipleselect"
/> />
<template v-for="f in hierarchyFolders"> <template v-for="f in hierarchyFolders">
<span :class="[$style.navPathItem, $style.navSeparator]"><i class="ti ti-chevron-right"></i></span> <span :class="[$style.navPathItem, $style.navSeparator]"><i class="ti ti-chevron-right"></i></span>
@ -25,6 +26,7 @@ SPDX-License-Identifier: AGPL-3.0-only
@upload="upload" @upload="upload"
@removeFile="removeFile" @removeFile="removeFile"
@removeFolder="removeFolder" @removeFolder="removeFolder"
:multipleselect="multipleselect"
/> />
</template> </template>
<span v-if="folder != null" :class="[$style.navPathItem, $style.navSeparator]"><i class="ti ti-chevron-right"></i></span> <span v-if="folder != null" :class="[$style.navPathItem, $style.navSeparator]"><i class="ti ti-chevron-right"></i></span>
@ -51,6 +53,7 @@ SPDX-License-Identifier: AGPL-3.0-only
:folder="f" :folder="f"
:selectMode="select === 'folder'" :selectMode="select === 'folder'"
:isSelected="selectedFolders.some(x => x.id === f.id)" :isSelected="selectedFolders.some(x => x.id === f.id)"
:multipleselect="multipleselect"
@chosen="chooseFolder" @chosen="chooseFolder"
@move="move" @move="move"
@upload="upload" @upload="upload"
@ -76,6 +79,12 @@ SPDX-License-Identifier: AGPL-3.0-only
@chosen="chooseFile" @chosen="chooseFile"
@dragstart="isDragSource = true" @dragstart="isDragSource = true"
@dragend="isDragSource = false" @dragend="isDragSource = false"
@pointerdown="startLongPress(file)"
@pointerup="endLongPress"
@click.shift.left.exact="selectClick(file)"
@click.ctrl.left.exact="selectClick(file)"
:multipleselect="multipleselect"
:isLongPressing="isLongPressing"
/> />
<!-- SEE: https://stackoverflow.com/questions/18744164/flex-box-align-last-row-to-grid --> <!-- SEE: https://stackoverflow.com/questions/18744164/flex-box-align-last-row-to-grid -->
<div v-for="(n, i) in 16" :key="i" :class="$style.padding"></div> <div v-for="(n, i) in 16" :key="i" :class="$style.padding"></div>
@ -118,6 +127,24 @@ const props = withDefaults(defineProps<{
select: null, select: null,
}); });
const isLongPressing = ref(false);
let longPressTimeout = null;
function startLongPress(file) {
isLongPressing.value = true;
longPressTimeout = setTimeout(() => {
if (isLongPressing) {
selectClick(file)
}
}, 800); // 長押しと判断する時間（1秒）を設定
}
function endLongPress() {
isLongPressing.value = false;
clearTimeout(longPressTimeout);
}
const emit = defineEmits<{ const emit = defineEmits<{
(ev: 'selected', v: Misskey.entities.DriveFile | Misskey.entities.DriveFolder): void; (ev: 'selected', v: Misskey.entities.DriveFile | Misskey.entities.DriveFolder): void;
(ev: 'change-selection', v: Misskey.entities.DriveFile[] | Misskey.entities.DriveFolder[]): void; (ev: 'change-selection', v: Misskey.entities.DriveFile[] | Misskey.entities.DriveFolder[]): void;
@ -140,7 +167,7 @@ const selectedFolders = ref<Misskey.entities.DriveFolder[]>([]);
const uploadings = uploads; const uploadings = uploads;
const connection = useStream().useChannel('drive'); const connection = useStream().useChannel('drive');
const keepOriginal = ref<boolean>(defaultStore.state.keepOriginalUploading); // 外部渡しが多いので$refは使わないほうがよい const keepOriginal = ref<boolean>(defaultStore.state.keepOriginalUploading); // 外部渡しが多いので$refは使わないほうがよい
let multipleselect = ref([]);
// ドロップされようとしているか // ドロップされようとしているか
const draghover = ref(false); const draghover = ref(false);
@ -168,7 +195,18 @@ function onStreamDriveFileUpdated(file: Misskey.entities.DriveFile) {
addFile(file, true); addFile(file, true);
} }
} }
function selectClick(file) {
const index = multipleselect.value.findIndex(item => item.id === file.id);
if (index !== -1) {
// File is already selected, so remove it
multipleselect.value.splice(index, 1);
} else {
// File is not selected, so add it
multipleselect.value.push(file);
}
}
function onStreamDriveFileDeleted(fileId: string) { function onStreamDriveFileDeleted(fileId: string) {
removeFile(fileId); removeFile(fileId);
} }
@ -405,6 +443,7 @@ function chooseFile(file: Misskey.entities.DriveFile) {
emit('change-selection', [file]); emit('change-selection', [file]);
} }
} }
} }
function chooseFolder(folderToChoose: Misskey.entities.DriveFolder) { function chooseFolder(folderToChoose: Misskey.entities.DriveFolder) {
@ -427,6 +466,7 @@ function chooseFolder(folderToChoose: Misskey.entities.DriveFolder) {
} }
function move(target?: Misskey.entities.DriveFolder) { function move(target?: Misskey.entities.DriveFolder) {
multipleselect.value = []
if (!target) { if (!target) {
goRoot(); goRoot();
return; return;
@ -491,11 +531,17 @@ function addFile(fileToAdd: Misskey.entities.DriveFile, unshift = false) {
function removeFolder(folderToRemove: Misskey.entities.DriveFolder | string) { function removeFolder(folderToRemove: Misskey.entities.DriveFolder | string) {
const folderIdToRemove = typeof folderToRemove === 'object' ? folderToRemove.id : folderToRemove; const folderIdToRemove = typeof folderToRemove === 'object' ? folderToRemove.id : folderToRemove;
folders.value = folders.value.filter(f => f.id !== folderIdToRemove); folders.value = folders.value.filter(f => f.id !== folderIdToRemove);
const index = multipleselect.value.findIndex(item => item.id === file.id);
if (index !== -1) {
// File is already selected, so remove it
multipleselect.value.splice(index, 1);
}
} }
function removeFile(file: Misskey.entities.DriveFile | string) { function removeFile(file: Misskey.entities.DriveFile | string) {
const fileId = typeof file === 'object' ? file.id : file; const fileId = typeof file === 'object' ? file.id : file;
files.value = files.value.filter(f => f.id !== fileId); files.value = files.value.filter(f => f.id !== fileId);
multipleselect.value = multipleselect.value.filter(a => a.id !== fileId)
} }
function appendFile(file: Misskey.entities.DriveFile) { function appendFile(file: Misskey.entities.DriveFile) {
@ -645,10 +691,12 @@ function getMenu() {
} }
function showMenu(ev: MouseEvent) { function showMenu(ev: MouseEvent) {
multipleselect.value = []
os.popupMenu(getMenu(), (ev.currentTarget ?? ev.target ?? undefined) as HTMLElement | undefined); os.popupMenu(getMenu(), (ev.currentTarget ?? ev.target ?? undefined) as HTMLElement | undefined);
} }
function onContextmenu(ev: MouseEvent) { function onContextmenu(ev: MouseEvent) {
multipleselect.value = []
os.contextMenu(getMenu(), ev); os.contextMenu(getMenu(), ev);
} }

49
packages/frontend/src/scripts/get-drive-file-menu.ts
View File

@ -39,10 +39,10 @@ function describe(file: Misskey.entities.DriveFile) {
}, 'closed'); }, 'closed');
} }
function toggleSensitive(file: Misskey.entities.DriveFile) { function toggleSensitive(file: Misskey.entities.DriveFile , isSensitive?) {
os.api('drive/files/update', { os.api('drive/files/update', {
fileId: file.id, fileId: file.id,
isSensitive: !file.isSensitive, isSensitive: isSensitive !== null ? isSensitive : !file.isSensitive
}).catch(err => { }).catch(err => {
os.alert({ os.alert({
type: 'error', type: 'error',
@ -72,7 +72,20 @@ async function deleteFile(file: Misskey.entities.DriveFile) {
fileId: file.id, fileId: file.id,
}); });
} }
async function deleteSelectFile(files) {
const { canceled } = await os.confirm({
type: 'warning',
text: files.length+'つのファイルをまとめて削除しますか？',
});
if (canceled) return;
files.forEach((e) => {
os.api('drive/files/delete', {
fileId: e.id,
});
})
}
export function getDriveFileMenu(file: Misskey.entities.DriveFile, folder?: Misskey.entities.DriveFolder | null): MenuItem[] { export function getDriveFileMenu(file: Misskey.entities.DriveFile, folder?: Misskey.entities.DriveFolder | null): MenuItem[] {
const isImage = file.type.startsWith('image/'); const isImage = file.type.startsWith('image/');
let menu; let menu;
@ -131,3 +144,35 @@ export function getDriveFileMenu(file: Misskey.entities.DriveFile, folder?: Miss
return menu; return menu;
} }
export function getDriveFileMultiMenu(file, folder?: Misskey.entities.DriveFolder | null): MenuItem[] {
let menu;
menu = [{
text: i18n.ts.unmarkAsSensitive,
icon: 'ti ti-eye',
action: () => {file.forEach((e) => toggleSensitive(e,false))}
},{
text: i18n.ts.markAsSensitive,
icon: 'ti ti-eye-exclamation',
action: () => {file.forEach((e) => toggleSensitive(e,true))}
,
},{
text: i18n.ts.delete,
icon: 'ti ti-trash',
danger: true,
action: () => deleteSelectFile(file),
}];
if (defaultStore.state.devMode) {
menu = menu.concat([null, {
icon: 'ti ti-id',
text: i18n.ts.copyFileId,
action: () => {
copyToClipboard(file.id);
},
}]);
}
return menu;
}

130
pnpm-lock.yaml
View File

@ -673,6 +673,9 @@ importers:
'@vue/compiler-sfc': '@vue/compiler-sfc':
specifier: 3.3.4 specifier: 3.3.4
version: 3.3.4 version: 3.3.4
'@vueuse/core':
specifier: ^10.4.1
version: 10.4.1(vue@3.3.4)
astring: astring:
specifier: 1.8.6 specifier: 1.8.6
version: 1.8.6 version: 1.8.6
@ -814,6 +817,9 @@ importers:
vue: vue:
specifier: 3.3.4 specifier: 3.3.4
version: 3.3.4 version: 3.3.4
vue-multiselect:
specifier: ^2.1.7
version: 2.1.7
vue-prism-editor: vue-prism-editor:
specifier: 2.0.0-alpha.2 specifier: 2.0.0-alpha.2
version: 2.0.0-alpha.2(vue@3.3.4) version: 2.0.0-alpha.2(vue@3.3.4)
@ -979,7 +985,7 @@ importers:
version: 7.4.5 version: 7.4.5
storybook-addon-misskey-theme: storybook-addon-misskey-theme:
specifier: github:misskey-dev/storybook-addon-misskey-theme specifier: github:misskey-dev/storybook-addon-misskey-theme
version: github.com/misskey-dev/storybook-addon-misskey-theme/cf583db098365b2ccc81a82f63ca9c93bc32b640(@storybook/blocks@7.4.5)(@storybook/components@7.4.4)(@storybook/core-events@7.4.5)(@storybook/manager-api@7.4.5)(@storybook/preview-api@7.4.5)(@storybook/theming@7.4.5)(@storybook/types@7.4.5)(react-dom@18.2.0)(react@18.2.0) version: github.com/misskey-dev/storybook-addon-misskey-theme/cf583db098365b2ccc81a82f63ca9c93bc32b640(@storybook/blocks@7.4.5)(@storybook/components@7.4.5)(@storybook/core-events@7.4.5)(@storybook/manager-api@7.4.5)(@storybook/preview-api@7.4.5)(@storybook/theming@7.4.5)(@storybook/types@7.4.5)(react-dom@18.2.0)(react@18.2.0)
summaly: summaly:
specifier: github:misskey-dev/summaly specifier: github:misskey-dev/summaly
version: github.com/misskey-dev/summaly/d2d8db49943ccb201c1b1b283e9d0a630519fac7 version: github.com/misskey-dev/summaly/d2d8db49943ccb201c1b1b283e9d0a630519fac7
@ -6276,17 +6282,6 @@ packages:
- supports-color - supports-color
dev: true dev: true
/@storybook/channels@7.4.4:
resolution: {integrity: sha512-YA2T3hClL95nFBBelm8wMOyWFDzfxKvyHAPQi+8YeYpZcPivwg/P9YnRhTTMbiZNkfoWKq4ZRuc79UP1iNLi3g==}
dependencies:
'@storybook/client-logger': 7.4.4
'@storybook/core-events': 7.4.4
'@storybook/global': 5.0.0
qs: 6.11.1
telejson: 7.2.0
tiny-invariant: 1.3.1
dev: true
/@storybook/channels@7.4.5: /@storybook/channels@7.4.5:
resolution: {integrity: sha512-zWPZn4CxPFXsrrSRQ9JD8GmTeWeFYgr3sTBpe23hnhYookCXVNJ6AcaXogrT9b2ALfbB6MiFDbZIHHTgIgbWpg==} resolution: {integrity: sha512-zWPZn4CxPFXsrrSRQ9JD8GmTeWeFYgr3sTBpe23hnhYookCXVNJ6AcaXogrT9b2ALfbB6MiFDbZIHHTgIgbWpg==}
dependencies: dependencies:
@ -6350,12 +6345,6 @@ packages:
- utf-8-validate - utf-8-validate
dev: true dev: true
/@storybook/client-logger@7.4.4:
resolution: {integrity: sha512-rC/GcCy3DLtTI+oOHLBc6rq/c3oGF/mvdeWrhMM+berQplHJrOCI2pcldjVw8Fc25gLPK0LUlaOp1dfgt2Ri3Q==}
dependencies:
'@storybook/global': 5.0.0
dev: true
/@storybook/client-logger@7.4.5: /@storybook/client-logger@7.4.5:
resolution: {integrity: sha512-Bn6eTAjhPDUfLpvuxhKkpDpOtkadfkSmkBNBZRu3r0Dzk2J1nNyKV5K6D8dOU4PFVof4z/gXYj5bktT29jKsmw==} resolution: {integrity: sha512-Bn6eTAjhPDUfLpvuxhKkpDpOtkadfkSmkBNBZRu3r0Dzk2J1nNyKV5K6D8dOU4PFVof4z/gXYj5bktT29jKsmw==}
dependencies: dependencies:
@ -6383,29 +6372,6 @@ packages:
- supports-color - supports-color
dev: true dev: true
/@storybook/components@7.4.4(react-dom@18.2.0)(react@18.2.0):
resolution: {integrity: sha512-tFOSu3IoAab/0aY2TY66Go0Nba7AB/+ZB9GFet+dxWypIKGLcPjyX2POIumJU4swzK+4IA8GxgDQ2itS6EOISQ==}
peerDependencies:
react: ^16.8.0 || ^17.0.0 || ^18.0.0
react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
dependencies:
'@radix-ui/react-select': 1.2.2(react-dom@18.2.0)(react@18.2.0)
'@radix-ui/react-toolbar': 1.0.4(react-dom@18.2.0)(react@18.2.0)
'@storybook/client-logger': 7.4.4
'@storybook/csf': 0.1.0
'@storybook/global': 5.0.0
'@storybook/theming': 7.4.4(react-dom@18.2.0)(react@18.2.0)
'@storybook/types': 7.4.4
memoizerific: 1.11.3
react: 18.2.0
react-dom: 18.2.0(react@18.2.0)
use-resize-observer: 9.1.0(react-dom@18.2.0)(react@18.2.0)
util-deprecate: 1.0.2
transitivePeerDependencies:
- '@types/react'
- '@types/react-dom'
dev: true
/@storybook/components@7.4.5(react-dom@18.2.0)(react@18.2.0): /@storybook/components@7.4.5(react-dom@18.2.0)(react@18.2.0):
resolution: {integrity: sha512-boskkfvMBB8CFYY9+1ofFNyKrdWXTY/ghzt7oK80dz6f2Eseo/WXK3OsCdCq5vWbLRCdbgJ8zXG8pAFi4yBsxA==} resolution: {integrity: sha512-boskkfvMBB8CFYY9+1ofFNyKrdWXTY/ghzt7oK80dz6f2Eseo/WXK3OsCdCq5vWbLRCdbgJ8zXG8pAFi4yBsxA==}
peerDependencies: peerDependencies:
@ -6467,12 +6433,6 @@ packages:
- supports-color - supports-color
dev: true dev: true
/@storybook/core-events@7.4.4:
resolution: {integrity: sha512-kOf4I/a1XC9CaGFwJG5WR2KnkwrOkWX68TLh7OlelKxdl/WjxA4zfzaFPC/8zyCSLdGFLPKNqr1w+ezkb+9Irw==}
dependencies:
ts-dedent: 2.2.0
dev: true
/@storybook/core-events@7.4.5: /@storybook/core-events@7.4.5:
resolution: {integrity: sha512-Jzy/adSC95saYCZlgXE5j7jmiMLAXYpnBFBxEtBdXwSWEBb0zt21n1nyWBEAv9s/k2gqDXlPHKHeL5Mn6y40zA==} resolution: {integrity: sha512-Jzy/adSC95saYCZlgXE5j7jmiMLAXYpnBFBxEtBdXwSWEBb0zt21n1nyWBEAv9s/k2gqDXlPHKHeL5Mn6y40zA==}
dependencies: dependencies:
@ -6807,20 +6767,6 @@ packages:
ts-dedent: 2.2.0 ts-dedent: 2.2.0
dev: true dev: true
/@storybook/theming@7.4.4(react-dom@18.2.0)(react@18.2.0):
resolution: {integrity: sha512-ABIwLRUj2IZKMGxKq+fCCFcY7w52P1a+q8j7qrlELaTe4M74K6rwTgRF0/AFgWeiGRkNuA7z8DjQ73xQLoLqUg==}
peerDependencies:
react: ^16.8.0 || ^17.0.0 || ^18.0.0
react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
dependencies:
'@emotion/use-insertion-effect-with-fallbacks': 1.0.0(react@18.2.0)
'@storybook/client-logger': 7.4.4
'@storybook/global': 5.0.0
memoizerific: 1.11.3
react: 18.2.0
react-dom: 18.2.0(react@18.2.0)
dev: true
/@storybook/theming@7.4.5(react-dom@18.2.0)(react@18.2.0): /@storybook/theming@7.4.5(react-dom@18.2.0)(react@18.2.0):
resolution: {integrity: sha512-QSIJDIMzOegzlhubIBaYIovf4mlf+AVL0SmQOskPS8GZ6s9t77yUUI6gZTEjO+S4eB3djXRsfTTijQ8+z4XmRA==} resolution: {integrity: sha512-QSIJDIMzOegzlhubIBaYIovf4mlf+AVL0SmQOskPS8GZ6s9t77yUUI6gZTEjO+S4eB3djXRsfTTijQ8+z4XmRA==}
peerDependencies: peerDependencies:
@ -6835,15 +6781,6 @@ packages:
react-dom: 18.2.0(react@18.2.0) react-dom: 18.2.0(react@18.2.0)
dev: true dev: true
/@storybook/types@7.4.4:
resolution: {integrity: sha512-B0VdgGb1XGEb9g3UuEd9xANCIhR3anvA3w0uYSG+7uMOflnEawwZksTSxvvoGM2hx9vC4pNT4Fci9sEC903UkA==}
dependencies:
'@storybook/channels': 7.4.4
'@types/babel__core': 7.20.0
'@types/express': 4.17.17
file-system-cache: 2.3.0
dev: true
/@storybook/types@7.4.5: /@storybook/types@7.4.5:
resolution: {integrity: sha512-DTWFNjfRTpncjufDoUs0QnNkgHG2qThGKWL1D6sO18cYI02zWPyHWD8/cbqlvtT7XIGe3s1iUEfCTdU5GcwWBA==} resolution: {integrity: sha512-DTWFNjfRTpncjufDoUs0QnNkgHG2qThGKWL1D6sO18cYI02zWPyHWD8/cbqlvtT7XIGe3s1iUEfCTdU5GcwWBA==}
dependencies: dependencies:
@ -7965,6 +7902,10 @@ packages:
'@types/node': 20.7.1 '@types/node': 20.7.1
dev: true dev: true
/@types/web-bluetooth@0.0.17:
resolution: {integrity: sha512-4p9vcSmxAayx72yn70joFoL44c9MO/0+iVEBIQXe3v2h2SiAsEIo/G5v6ObFWvNKRFjbrVadNf9LqEEZeQPzdA==}
dev: false
/@types/web-push@3.6.1: /@types/web-push@3.6.1:
resolution: {integrity: sha512-Zu6Iju7c4IlE8I8eEeFLYRb7XFqvHFmWWAYr1cmug9EX3c6CDarxIXWN/GO0sxjbJLkHPwozUzp6cLdXsrq7Ew==} resolution: {integrity: sha512-Zu6Iju7c4IlE8I8eEeFLYRb7XFqvHFmWWAYr1cmug9EX3c6CDarxIXWN/GO0sxjbJLkHPwozUzp6cLdXsrq7Ew==}
dependencies: dependencies:
@ -8396,6 +8337,31 @@ packages:
- typescript - typescript
dev: true dev: true
/@vueuse/core@10.4.1(vue@3.3.4):
resolution: {integrity: sha512-DkHIfMIoSIBjMgRRvdIvxsyboRZQmImofLyOHADqiVbQVilP8VVHDhBX2ZqoItOgu7dWa8oXiNnScOdPLhdEXg==}
dependencies:
'@types/web-bluetooth': 0.0.17
'@vueuse/metadata': 10.4.1
'@vueuse/shared': 10.4.1(vue@3.3.4)
vue-demi: 0.14.6(vue@3.3.4)
transitivePeerDependencies:
- '@vue/composition-api'
- vue
dev: false
/@vueuse/metadata@10.4.1:
resolution: {integrity: sha512-2Sc8X+iVzeuMGHr6O2j4gv/zxvQGGOYETYXEc41h0iZXIRnRbJZGmY/QP8dvzqUelf8vg0p/yEA5VpCEu+WpZg==}
dev: false
/@vueuse/shared@10.4.1(vue@3.3.4):
resolution: {integrity: sha512-vz5hbAM4qA0lDKmcr2y3pPdU+2EVw/yzfRsBdu+6+USGa4PxqSQRYIUC9/NcT06y+ZgaTsyURw2I9qOFaaXHAg==}
dependencies:
vue-demi: 0.14.6(vue@3.3.4)
transitivePeerDependencies:
- '@vue/composition-api'
- vue
dev: false
/@webgpu/types@0.1.30: /@webgpu/types@0.1.30:
resolution: {integrity: sha512-9AXJSmL3MzY8ZL//JjudA//q+2kBRGhLBFpkdGksWIuxrMy81nFrCzj2Am+mbh8WoU6rXmv7cY5E3rdlyru2Qg==} resolution: {integrity: sha512-9AXJSmL3MzY8ZL//JjudA//q+2kBRGhLBFpkdGksWIuxrMy81nFrCzj2Am+mbh8WoU6rXmv7cY5E3rdlyru2Qg==}
requiresBuild: true requiresBuild: true
@ -19184,6 +19150,21 @@ packages:
vue: 3.3.4 vue: 3.3.4
dev: false dev: false
/vue-demi@0.14.6(vue@3.3.4):
resolution: {integrity: sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==}
engines: {node: '>=12'}
hasBin: true
requiresBuild: true
peerDependencies:
'@vue/composition-api': ^1.0.0-rc.1
vue: ^3.0.0-0 || ^2.6.0
peerDependenciesMeta:
'@vue/composition-api':
optional: true
dependencies:
vue: 3.3.4
dev: false
/vue-docgen-api@4.64.1(vue@3.3.4): /vue-docgen-api@4.64.1(vue@3.3.4):
resolution: {integrity: sha512-jbOf7ByE3Zvtuk+429Jorl+eIeh2aB2Fx1GUo3xJd1aByJWE8KDlSEa6b11PB1ze8f0sRUBraRDinICCk0KY7g==} resolution: {integrity: sha512-jbOf7ByE3Zvtuk+429Jorl+eIeh2aB2Fx1GUo3xJd1aByJWE8KDlSEa6b11PB1ze8f0sRUBraRDinICCk0KY7g==}
dependencies: dependencies:
@ -19228,6 +19209,11 @@ packages:
vue: 3.3.4 vue: 3.3.4
dev: true dev: true
/vue-multiselect@2.1.7:
resolution: {integrity: sha512-KIegcN+Ntwg3cbkY/jhw2s/+XJUM0Lpi/LcKFYCS8PrZHcWBl2iKCVze7ZCnRj3w8H7/lUJ9v7rj9KQiNxApBw==}
engines: {node: '>= 4.0.0', npm: '>= 3.0.0'}
dev: false
/vue-prism-editor@2.0.0-alpha.2(vue@3.3.4): /vue-prism-editor@2.0.0-alpha.2(vue@3.3.4):
resolution: {integrity: sha512-Gu42ba9nosrE+gJpnAEuEkDMqG9zSUysIR8SdXUw8MQKDjBnnNR9lHC18uOr/ICz7yrA/5c7jHJr9lpElODC7w==} resolution: {integrity: sha512-Gu42ba9nosrE+gJpnAEuEkDMqG9zSUysIR8SdXUw8MQKDjBnnNR9lHC18uOr/ICz7yrA/5c7jHJr9lpElODC7w==}
engines: {node: '>=10'} engines: {node: '>=10'}
@ -19707,7 +19693,7 @@ packages:
sharp: 0.31.3 sharp: 0.31.3
dev: false dev: false
github.com/misskey-dev/storybook-addon-misskey-theme/cf583db098365b2ccc81a82f63ca9c93bc32b640(@storybook/blocks@7.4.5)(@storybook/components@7.4.4)(@storybook/core-events@7.4.5)(@storybook/manager-api@7.4.5)(@storybook/preview-api@7.4.5)(@storybook/theming@7.4.5)(@storybook/types@7.4.5)(react-dom@18.2.0)(react@18.2.0): github.com/misskey-dev/storybook-addon-misskey-theme/cf583db098365b2ccc81a82f63ca9c93bc32b640(@storybook/blocks@7.4.5)(@storybook/components@7.4.5)(@storybook/core-events@7.4.5)(@storybook/manager-api@7.4.5)(@storybook/preview-api@7.4.5)(@storybook/theming@7.4.5)(@storybook/types@7.4.5)(react-dom@18.2.0)(react@18.2.0):
resolution: {tarball: https://codeload.github.com/misskey-dev/storybook-addon-misskey-theme/tar.gz/cf583db098365b2ccc81a82f63ca9c93bc32b640} resolution: {tarball: https://codeload.github.com/misskey-dev/storybook-addon-misskey-theme/tar.gz/cf583db098365b2ccc81a82f63ca9c93bc32b640}
id: github.com/misskey-dev/storybook-addon-misskey-theme/cf583db098365b2ccc81a82f63ca9c93bc32b640 id: github.com/misskey-dev/storybook-addon-misskey-theme/cf583db098365b2ccc81a82f63ca9c93bc32b640
name: storybook-addon-misskey-theme name: storybook-addon-misskey-theme
@ -19729,7 +19715,7 @@ packages:
optional: true optional: true
dependencies: dependencies:
'@storybook/blocks': 7.4.5(react-dom@18.2.0)(react@18.2.0) '@storybook/blocks': 7.4.5(react-dom@18.2.0)(react@18.2.0)
'@storybook/components': 7.4.4(react-dom@18.2.0)(react@18.2.0) '@storybook/components': 7.4.5(react-dom@18.2.0)(react@18.2.0)
'@storybook/core-events': 7.4.5 '@storybook/core-events': 7.4.5
'@storybook/manager-api': 7.4.5(react-dom@18.2.0)(react@18.2.0) '@storybook/manager-api': 7.4.5(react-dom@18.2.0)(react@18.2.0)
'@storybook/preview-api': 7.4.5 '@storybook/preview-api': 7.4.5