refactor(frontend): refactor popup api and make sure call dispose callback
Close #14122
This commit is contained in:
parent
fab7d5e484
commit
6dd2e9fc0b
|
@ -184,10 +184,12 @@ export async function refreshAccount() {
|
|||
|
||||
export async function login(token: Account['token'], redirect?: string) {
|
||||
const showing = ref(true);
|
||||
popup(defineAsyncComponent(() => import('@/components/MkWaitingDialog.vue')), {
|
||||
const { dispose } = popup(defineAsyncComponent(() => import('@/components/MkWaitingDialog.vue')), {
|
||||
success: false,
|
||||
showing: showing,
|
||||
}, {}, 'closed');
|
||||
}, {
|
||||
closed: () => dispose(),
|
||||
});
|
||||
if (_DEV_) console.log('logging as token ', token);
|
||||
const me = await fetchAccount(token, undefined, true)
|
||||
.catch(reason => {
|
||||
|
@ -223,21 +225,23 @@ export async function openAccountMenu(opts: {
|
|||
if (!$i) return;
|
||||
|
||||
function showSigninDialog() {
|
||||
popup(defineAsyncComponent(() => import('@/components/MkSigninDialog.vue')), {}, {
|
||||
const { dispose } = popup(defineAsyncComponent(() => import('@/components/MkSigninDialog.vue')), {}, {
|
||||
done: res => {
|
||||
addAccount(res.id, res.i);
|
||||
success();
|
||||
},
|
||||
}, 'closed');
|
||||
closed: () => dispose(),
|
||||
});
|
||||
}
|
||||
|
||||
function createAccount() {
|
||||
popup(defineAsyncComponent(() => import('@/components/MkSignupDialog.vue')), {}, {
|
||||
const { dispose } = popup(defineAsyncComponent(() => import('@/components/MkSignupDialog.vue')), {}, {
|
||||
done: res => {
|
||||
addAccount(res.id, res.i);
|
||||
switchAccountWithToken(res.i);
|
||||
},
|
||||
}, 'closed');
|
||||
closed: () => dispose(),
|
||||
});
|
||||
}
|
||||
|
||||
async function switchAccount(account: Misskey.entities.UserDetailed) {
|
||||
|
|
|
@ -35,7 +35,9 @@ export async function mainBoot() {
|
|||
emojiPicker.init();
|
||||
|
||||
if (isClientUpdated && $i) {
|
||||
popup(defineAsyncComponent(() => import('@/components/MkUpdated.vue')), {}, {}, 'closed');
|
||||
const { dispose } = popup(defineAsyncComponent(() => import('@/components/MkUpdated.vue')), {}, {
|
||||
closed: () => dispose(),
|
||||
});
|
||||
}
|
||||
|
||||
const stream = useStream();
|
||||
|
@ -96,7 +98,7 @@ export async function mainBoot() {
|
|||
}).render();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
// console.error(error);
|
||||
console.error('Failed to initialise the seasonal screen effect canvas context:', error);
|
||||
|
@ -108,22 +110,28 @@ export async function mainBoot() {
|
|||
|
||||
defaultStore.loaded.then(() => {
|
||||
if (defaultStore.state.accountSetupWizard !== -1) {
|
||||
popup(defineAsyncComponent(() => import('@/components/MkUserSetupDialog.vue')), {}, {}, 'closed');
|
||||
const { dispose } = popup(defineAsyncComponent(() => import('@/components/MkUserSetupDialog.vue')), {}, {
|
||||
closed: () => dispose(),
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
for (const announcement of ($i.unreadAnnouncements ?? []).filter(x => x.display === 'dialog')) {
|
||||
popup(defineAsyncComponent(() => import('@/components/MkAnnouncementDialog.vue')), {
|
||||
const { dispose } = popup(defineAsyncComponent(() => import('@/components/MkAnnouncementDialog.vue')), {
|
||||
announcement,
|
||||
}, {}, 'closed');
|
||||
}, {
|
||||
closed: () => dispose(),
|
||||
});
|
||||
}
|
||||
|
||||
stream.on('announcementCreated', (ev) => {
|
||||
const announcement = ev.announcement;
|
||||
if (announcement.display === 'dialog') {
|
||||
popup(defineAsyncComponent(() => import('@/components/MkAnnouncementDialog.vue')), {
|
||||
const { dispose } = popup(defineAsyncComponent(() => import('@/components/MkAnnouncementDialog.vue')), {
|
||||
announcement,
|
||||
}, {}, 'closed');
|
||||
}, {
|
||||
closed: () => dispose(),
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
|
@ -247,13 +255,17 @@ export async function mainBoot() {
|
|||
const neverShowDonationInfo = miLocalStorage.getItem('neverShowDonationInfo');
|
||||
if (neverShowDonationInfo !== 'true' && (createdAt.getTime() < (Date.now() - (1000 * 60 * 60 * 24 * 3))) && !location.pathname.startsWith('/miauth')) {
|
||||
if (latestDonationInfoShownAt == null || (new Date(latestDonationInfoShownAt).getTime() < (Date.now() - (1000 * 60 * 60 * 24 * 30)))) {
|
||||
popup(defineAsyncComponent(() => import('@/components/MkDonation.vue')), {}, {}, 'closed');
|
||||
const { dispose } = popup(defineAsyncComponent(() => import('@/components/MkDonation.vue')), {}, {
|
||||
closed: () => dispose(),
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
const modifiedVersionMustProminentlyOfferInAgplV3Section13Read = miLocalStorage.getItem('modifiedVersionMustProminentlyOfferInAgplV3Section13Read');
|
||||
if (modifiedVersionMustProminentlyOfferInAgplV3Section13Read !== 'true' && instance.repositoryUrl !== 'https://github.com/misskey-dev/misskey') {
|
||||
popup(defineAsyncComponent(() => import('@/components/MkSourceCodeAvailablePopup.vue')), {}, {}, 'closed');
|
||||
const { dispose } = popup(defineAsyncComponent(() => import('@/components/MkSourceCodeAvailablePopup.vue')), {}, {
|
||||
closed: () => dispose(),
|
||||
});
|
||||
}
|
||||
|
||||
if ('Notification' in window) {
|
||||
|
|
|
@ -35,7 +35,9 @@ const prevCookies = ref(0);
|
|||
function onClick(ev: MouseEvent) {
|
||||
const x = ev.clientX;
|
||||
const y = ev.clientY;
|
||||
os.popup(MkPlusOneEffect, { x, y }, {}, 'end');
|
||||
const { dispose } = os.popup(MkPlusOneEffect, { x, y }, {
|
||||
end: () => dispose(),
|
||||
});
|
||||
|
||||
saveData.value!.cookies++;
|
||||
saveData.value!.totalCookies++;
|
||||
|
|
|
@ -257,10 +257,11 @@ function onContextmenu(ev: MouseEvent) {
|
|||
text: i18n.ts.openInWindow,
|
||||
icon: 'ti ti-app-window',
|
||||
action: () => {
|
||||
os.popup(defineAsyncComponent(() => import('@/components/MkDriveWindow.vue')), {
|
||||
const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/MkDriveWindow.vue')), {
|
||||
initialFolder: props.folder,
|
||||
}, {
|
||||
}, 'closed');
|
||||
closed: () => dispose(),
|
||||
});
|
||||
},
|
||||
}, { type: 'divider' }, {
|
||||
text: i18n.ts.rename,
|
||||
|
|
|
@ -402,7 +402,9 @@ function chosen(emoji: any, ev?: MouseEvent) {
|
|||
const rect = el.getBoundingClientRect();
|
||||
const x = rect.left + (el.offsetWidth / 2);
|
||||
const y = rect.top + (el.offsetHeight / 2);
|
||||
os.popup(MkRippleEffect, { x, y }, {}, 'end');
|
||||
const { dispose } = os.popup(MkRippleEffect, { x, y }, {
|
||||
end: () => dispose(),
|
||||
});
|
||||
}
|
||||
|
||||
const key = getKey(emoji);
|
||||
|
|
|
@ -37,11 +37,13 @@ const el = ref<HTMLElement | { $el: HTMLElement }>();
|
|||
|
||||
if (isEnabledUrlPreview.value) {
|
||||
useTooltip(el, (showing) => {
|
||||
os.popup(defineAsyncComponent(() => import('@/components/MkUrlPreviewPopup.vue')), {
|
||||
const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/MkUrlPreviewPopup.vue')), {
|
||||
showing,
|
||||
url: props.url,
|
||||
source: el.value instanceof HTMLElement ? el.value : el.value?.$el,
|
||||
}, {}, 'closed');
|
||||
}, {
|
||||
closed: () => dispose(),
|
||||
});
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
|
|
@ -335,12 +335,14 @@ if (!props.mock) {
|
|||
|
||||
if (users.length < 1) return;
|
||||
|
||||
os.popup(MkUsersTooltip, {
|
||||
const { dispose } = os.popup(MkUsersTooltip, {
|
||||
showing,
|
||||
users,
|
||||
count: appearNote.value.renoteCount,
|
||||
targetElement: renoteButton.value,
|
||||
}, {}, 'closed');
|
||||
}, {
|
||||
closed: () => dispose(),
|
||||
});
|
||||
});
|
||||
|
||||
if (appearNote.value.reactionAcceptance === 'likeOnly') {
|
||||
|
@ -355,13 +357,15 @@ if (!props.mock) {
|
|||
|
||||
if (users.length < 1) return;
|
||||
|
||||
os.popup(MkReactionsViewerDetails, {
|
||||
const { dispose } = os.popup(MkReactionsViewerDetails, {
|
||||
showing,
|
||||
reaction: '❤️',
|
||||
users,
|
||||
count: appearNote.value.reactionCount,
|
||||
targetElement: reactButton.value!,
|
||||
}, {}, 'closed');
|
||||
}, {
|
||||
closed: () => dispose(),
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
@ -409,7 +413,9 @@ function react(viaKeyboard = false): void {
|
|||
const rect = el.getBoundingClientRect();
|
||||
const x = rect.left + (el.offsetWidth / 2);
|
||||
const y = rect.top + (el.offsetHeight / 2);
|
||||
os.popup(MkRippleEffect, { x, y }, {}, 'end');
|
||||
const { dispose } = os.popup(MkRippleEffect, { x, y }, {
|
||||
end: () => dispose(),
|
||||
});
|
||||
}
|
||||
} else {
|
||||
blur();
|
||||
|
|
|
@ -346,12 +346,14 @@ useTooltip(renoteButton, async (showing) => {
|
|||
|
||||
if (users.length < 1) return;
|
||||
|
||||
os.popup(MkUsersTooltip, {
|
||||
const { dispose } = os.popup(MkUsersTooltip, {
|
||||
showing,
|
||||
users,
|
||||
count: appearNote.value.renoteCount,
|
||||
targetElement: renoteButton.value,
|
||||
}, {}, 'closed');
|
||||
}, {
|
||||
closed: () => dispose(),
|
||||
});
|
||||
});
|
||||
|
||||
if (appearNote.value.reactionAcceptance === 'likeOnly') {
|
||||
|
@ -366,13 +368,15 @@ if (appearNote.value.reactionAcceptance === 'likeOnly') {
|
|||
|
||||
if (users.length < 1) return;
|
||||
|
||||
os.popup(MkReactionsViewerDetails, {
|
||||
const { dispose } = os.popup(MkReactionsViewerDetails, {
|
||||
showing,
|
||||
reaction: '❤️',
|
||||
users,
|
||||
count: appearNote.value.reactionCount,
|
||||
targetElement: reactButton.value!,
|
||||
}, {}, 'closed');
|
||||
}, {
|
||||
closed: () => dispose(),
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
|
@ -413,7 +417,9 @@ function react(viaKeyboard = false): void {
|
|||
const rect = el.getBoundingClientRect();
|
||||
const x = rect.left + (el.offsetWidth / 2);
|
||||
const y = rect.top + (el.offsetHeight / 2);
|
||||
os.popup(MkRippleEffect, { x, y }, {}, 'end');
|
||||
const { dispose } = os.popup(MkRippleEffect, { x, y }, {
|
||||
end: () => dispose(),
|
||||
});
|
||||
}
|
||||
} else {
|
||||
blur();
|
||||
|
|
|
@ -463,7 +463,7 @@ function setVisibility() {
|
|||
return;
|
||||
}
|
||||
|
||||
os.popup(defineAsyncComponent(() => import('@/components/MkVisibilityPicker.vue')), {
|
||||
const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/MkVisibilityPicker.vue')), {
|
||||
currentVisibility: visibility.value,
|
||||
isSilenced: $i.isSilenced,
|
||||
localOnly: localOnly.value,
|
||||
|
@ -476,7 +476,8 @@ function setVisibility() {
|
|||
defaultStore.set('visibility', visibility.value);
|
||||
}
|
||||
},
|
||||
}, 'closed');
|
||||
closed: () => dispose(),
|
||||
});
|
||||
}
|
||||
|
||||
async function toggleLocalOnly() {
|
||||
|
@ -624,8 +625,8 @@ async function onPaste(ev: ClipboardEvent) {
|
|||
return;
|
||||
}
|
||||
|
||||
const fileName = formatTimeString(new Date(), defaultStore.state.pastedFileName).replace(/{{number}}/g, "0");
|
||||
const file = new File([paste], `${fileName}.txt`, { type: "text/plain" });
|
||||
const fileName = formatTimeString(new Date(), defaultStore.state.pastedFileName).replace(/{{number}}/g, '0');
|
||||
const file = new File([paste], `${fileName}.txt`, { type: 'text/plain' });
|
||||
upload(file, `${fileName}.txt`);
|
||||
});
|
||||
}
|
||||
|
@ -731,7 +732,9 @@ async function post(ev?: MouseEvent) {
|
|||
const rect = el.getBoundingClientRect();
|
||||
const x = rect.left + (el.offsetWidth / 2);
|
||||
const y = rect.top + (el.offsetHeight / 2);
|
||||
os.popup(MkRippleEffect, { x, y }, {}, 'end');
|
||||
const { dispose } = os.popup(MkRippleEffect, { x, y }, {
|
||||
end: () => dispose(),
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -108,7 +108,7 @@ async function rename(file) {
|
|||
async function describe(file) {
|
||||
if (mock) return;
|
||||
|
||||
os.popup(defineAsyncComponent(() => import('@/components/MkFileCaptionEditWindow.vue')), {
|
||||
const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/MkFileCaptionEditWindow.vue')), {
|
||||
default: file.comment !== null ? file.comment : '',
|
||||
file: file,
|
||||
}, {
|
||||
|
@ -121,7 +121,8 @@ async function describe(file) {
|
|||
file.comment = comment;
|
||||
});
|
||||
},
|
||||
}, 'closed');
|
||||
closed: () => dispose(),
|
||||
});
|
||||
}
|
||||
|
||||
async function crop(file: Misskey.entities.DriveFile): Promise<void> {
|
||||
|
|
|
@ -101,17 +101,19 @@ const steps = computed(() => {
|
|||
}
|
||||
});
|
||||
|
||||
const onMousedown = (ev: MouseEvent | TouchEvent) => {
|
||||
function onMousedown(ev: MouseEvent | TouchEvent) {
|
||||
ev.preventDefault();
|
||||
|
||||
const tooltipShowing = ref(true);
|
||||
os.popup(defineAsyncComponent(() => import('@/components/MkTooltip.vue')), {
|
||||
const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/MkTooltip.vue')), {
|
||||
showing: tooltipShowing,
|
||||
text: computed(() => {
|
||||
return props.textConverter(finalValue.value);
|
||||
}),
|
||||
targetElement: thumbEl,
|
||||
}, {}, 'closed');
|
||||
}, {
|
||||
closed: () => dispose(),
|
||||
});
|
||||
|
||||
const style = document.createElement('style');
|
||||
style.appendChild(document.createTextNode('* { cursor: grabbing !important; } body * { pointer-events: none !important; }'));
|
||||
|
@ -152,7 +154,7 @@ const onMousedown = (ev: MouseEvent | TouchEvent) => {
|
|||
window.addEventListener('touchmove', onDrag);
|
||||
window.addEventListener('mouseup', onMouseup, { once: true });
|
||||
window.addEventListener('touchend', onMouseup, { once: true });
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
@ -24,11 +24,13 @@ const elRef = shallowRef();
|
|||
|
||||
if (props.withTooltip) {
|
||||
useTooltip(elRef, (showing) => {
|
||||
os.popup(defineAsyncComponent(() => import('@/components/MkReactionTooltip.vue')), {
|
||||
const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/MkReactionTooltip.vue')), {
|
||||
showing,
|
||||
reaction: props.reaction.replace(/^:(\w+):$/, ':$1@.:'),
|
||||
targetElement: elRef.value.$el,
|
||||
}, {}, 'closed');
|
||||
}, {
|
||||
closed: () => dispose(),
|
||||
});
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
|
|
@ -114,10 +114,12 @@ async function menu(ev) {
|
|||
text: i18n.ts.info,
|
||||
icon: 'ti ti-info-circle',
|
||||
action: async () => {
|
||||
os.popup(MkCustomEmojiDetailedDialog, {
|
||||
const { dispose } = os.popup(MkCustomEmojiDetailedDialog, {
|
||||
emoji: await misskeyApiGet('emoji', {
|
||||
name: props.reaction.replace(/:/g, '').replace(/@\./, ''),
|
||||
}),
|
||||
}, {
|
||||
closed: () => dispose(),
|
||||
});
|
||||
},
|
||||
}], ev.currentTarget ?? ev.target);
|
||||
|
@ -129,7 +131,9 @@ function anime() {
|
|||
const rect = buttonEl.value.getBoundingClientRect();
|
||||
const x = rect.left + 16;
|
||||
const y = rect.top + (buttonEl.value.offsetHeight / 2);
|
||||
os.popup(MkReactionEffect, { reaction: props.reaction, x, y }, {}, 'end');
|
||||
const { dispose } = os.popup(MkReactionEffect, { reaction: props.reaction, x, y }, {
|
||||
end: () => dispose(),
|
||||
});
|
||||
}
|
||||
|
||||
watch(() => props.count, (newCount, oldCount) => {
|
||||
|
@ -151,13 +155,15 @@ if (!mock) {
|
|||
|
||||
const users = reactions.map(x => x.user);
|
||||
|
||||
os.popup(XDetails, {
|
||||
const { dispose } = os.popup(XDetails, {
|
||||
showing,
|
||||
reaction: props.reaction,
|
||||
users,
|
||||
count: props.count,
|
||||
targetElement: buttonEl.value,
|
||||
}, {}, 'closed');
|
||||
}, {
|
||||
closed: () => dispose(),
|
||||
});
|
||||
}, 100);
|
||||
}
|
||||
</script>
|
||||
|
|
|
@ -218,8 +218,9 @@ function loginFailed(err: any): void {
|
|||
}
|
||||
|
||||
function resetPassword(): void {
|
||||
os.popup(defineAsyncComponent(() => import('@/components/MkForgotPassword.vue')), {}, {
|
||||
}, 'closed');
|
||||
const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/MkForgotPassword.vue')), {}, {
|
||||
closed: () => dispose(),
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
|
@ -25,15 +25,15 @@ export type MkSystemWebhookResult = {
|
|||
|
||||
export async function showSystemWebhookEditorDialog(props: MkSystemWebhookEditorProps): Promise<MkSystemWebhookResult | null> {
|
||||
const { dispose, result } = await new Promise<{ dispose: () => void, result: MkSystemWebhookResult | null }>(async resolve => {
|
||||
const res = await os.popup(
|
||||
const { dispose: _dispose } = os.popup(
|
||||
defineAsyncComponent(() => import('@/components/MkSystemWebhookEditor.vue')),
|
||||
props,
|
||||
{
|
||||
submitted: (ev: MkSystemWebhookResult) => {
|
||||
resolve({ dispose: res.dispose, result: ev });
|
||||
resolve({ dispose: _dispose, result: ev });
|
||||
},
|
||||
closed: () => {
|
||||
resolve({ dispose: res.dispose, result: null });
|
||||
resolve({ dispose: _dispose, result: null });
|
||||
},
|
||||
},
|
||||
);
|
||||
|
|
|
@ -188,11 +188,13 @@ function adjustTweetHeight(message: any) {
|
|||
if (height) tweetHeight.value = height;
|
||||
}
|
||||
|
||||
const openPlayer = (): void => {
|
||||
os.popup(defineAsyncComponent(() => import('@/components/MkYouTubePlayer.vue')), {
|
||||
function openPlayer(): void {
|
||||
const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/MkYouTubePlayer.vue')), {
|
||||
url: requestUrl.href,
|
||||
}, {
|
||||
// TODO
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
(window as any).addEventListener('message', adjustTweetHeight);
|
||||
|
||||
|
|
|
@ -176,9 +176,11 @@ function setupComplete() {
|
|||
function launchTutorial() {
|
||||
setupComplete();
|
||||
nextTick(() => {
|
||||
os.popup(defineAsyncComponent(() => import('@/components/MkTutorialDialog.vue')), {
|
||||
const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/MkTutorialDialog.vue')), {
|
||||
initialPage: 1,
|
||||
}, {}, 'closed');
|
||||
}, {
|
||||
closed: () => dispose(),
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
@ -74,15 +74,19 @@ misskeyApi('stats', {}).then((res) => {
|
|||
});
|
||||
|
||||
function signin() {
|
||||
os.popup(XSigninDialog, {
|
||||
const { dispose } = os.popup(XSigninDialog, {
|
||||
autoSet: true,
|
||||
}, {}, 'closed');
|
||||
}, {
|
||||
closed: () => dispose(),
|
||||
});
|
||||
}
|
||||
|
||||
function signup() {
|
||||
os.popup(XSignupDialog, {
|
||||
const { dispose } = os.popup(XSignupDialog, {
|
||||
autoSet: true,
|
||||
}, {}, 'closed');
|
||||
}, {
|
||||
closed: () => dispose(),
|
||||
});
|
||||
}
|
||||
|
||||
function showMenu(ev) {
|
||||
|
|
|
@ -106,12 +106,12 @@ function onClick(ev: MouseEvent) {
|
|||
text: i18n.ts.info,
|
||||
icon: 'ti ti-info-circle',
|
||||
action: async () => {
|
||||
os.popup(MkCustomEmojiDetailedDialog, {
|
||||
const { dispose } = os.popup(MkCustomEmojiDetailedDialog, {
|
||||
emoji: await misskeyApiGet('emoji', {
|
||||
name: customEmojiName.value,
|
||||
}),
|
||||
}, {
|
||||
anchor: ev.target,
|
||||
closed: () => dispose(),
|
||||
});
|
||||
},
|
||||
}], ev.currentTarget ?? ev.target);
|
||||
|
|
|
@ -50,11 +50,13 @@ const el = ref();
|
|||
|
||||
if (props.showUrlPreview && isEnabledUrlPreview.value) {
|
||||
useTooltip(el, (showing) => {
|
||||
os.popup(defineAsyncComponent(() => import('@/components/MkUrlPreviewPopup.vue')), {
|
||||
const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/MkUrlPreviewPopup.vue')), {
|
||||
showing,
|
||||
url: props.url,
|
||||
source: el.value instanceof HTMLElement ? el.value : el.value?.$el,
|
||||
}, {}, 'closed');
|
||||
}, {
|
||||
closed: () => dispose(),
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
@ -17,7 +17,9 @@ export default {
|
|||
const x = rect.left + (el.offsetWidth / 2);
|
||||
const y = rect.top + (el.offsetHeight / 2);
|
||||
|
||||
popup(MkRippleEffect, { x, y }, {}, 'end');
|
||||
const { dispose } = popup(MkRippleEffect, { x, y }, {
|
||||
end: () => dispose(),
|
||||
});
|
||||
});
|
||||
},
|
||||
};
|
||||
|
|
|
@ -51,13 +51,15 @@ export default {
|
|||
if (self.text == null) return;
|
||||
|
||||
const showing = ref(true);
|
||||
popup(defineAsyncComponent(() => import('@/components/MkTooltip.vue')), {
|
||||
const { dispose } = popup(defineAsyncComponent(() => import('@/components/MkTooltip.vue')), {
|
||||
showing,
|
||||
text: self.text,
|
||||
asMfm: binding.modifiers.mfm,
|
||||
direction: binding.modifiers.left ? 'left' : binding.modifiers.right ? 'right' : binding.modifiers.top ? 'top' : binding.modifiers.bottom ? 'bottom' : 'top',
|
||||
targetElement: el,
|
||||
}, {}, 'closed');
|
||||
}, {
|
||||
closed: () => dispose(),
|
||||
});
|
||||
|
||||
self._close = () => {
|
||||
showing.value = false;
|
||||
|
|
|
@ -35,7 +35,7 @@ export class UserPreview {
|
|||
|
||||
const showing = ref(true);
|
||||
|
||||
popup(defineAsyncComponent(() => import('@/components/MkUserPopup.vue')), {
|
||||
const { dispose } = popup(defineAsyncComponent(() => import('@/components/MkUserPopup.vue')), {
|
||||
showing,
|
||||
q: this.user,
|
||||
source: this.el,
|
||||
|
@ -47,7 +47,8 @@ export class UserPreview {
|
|||
window.clearTimeout(this.showTimer);
|
||||
this.hideTimer = window.setTimeout(this.close, 500);
|
||||
},
|
||||
}, 'closed');
|
||||
closed: () => dispose(),
|
||||
});
|
||||
|
||||
this.promise = {
|
||||
cancel: () => {
|
||||
|
|
|
@ -116,11 +116,13 @@ export function promiseDialog<T extends Promise<any>>(
|
|||
});
|
||||
|
||||
// NOTE: dynamic importすると挙動がおかしくなる(showingの変更が伝播しない)
|
||||
popup(MkWaitingDialog, {
|
||||
const { dispose } = popup(MkWaitingDialog, {
|
||||
success: success,
|
||||
showing: showing,
|
||||
text: text,
|
||||
}, {}, 'closed');
|
||||
}, {
|
||||
closed: () => dispose(),
|
||||
});
|
||||
|
||||
return promise;
|
||||
}
|
||||
|
@ -166,28 +168,24 @@ type EmitsExtractor<T> = {
|
|||
[K in keyof T as K extends `onVnode${string}` ? never : K extends `on${infer E}` ? Uncapitalize<E> : K extends string ? never : K]: T[K];
|
||||
};
|
||||
|
||||
export async function popup<T extends Component>(
|
||||
export function popup<T extends Component>(
|
||||
component: T,
|
||||
props: ComponentProps<T>,
|
||||
events: ComponentEmit<T> = {} as ComponentEmit<T>,
|
||||
disposeEvent?: keyof ComponentEmit<T>,
|
||||
): Promise<{ dispose: () => void }> {
|
||||
): { dispose: () => void } {
|
||||
markRaw(component);
|
||||
|
||||
const id = ++popupIdCount;
|
||||
const dispose = () => {
|
||||
// このsetTimeoutが無いと挙動がおかしくなる(autocompleteが閉じなくなる)。Vueのバグ?
|
||||
window.setTimeout(() => {
|
||||
popups.value = popups.value.filter(popup => popup.id !== id);
|
||||
popups.value = popups.value.filter(p => p.id !== id);
|
||||
}, 0);
|
||||
};
|
||||
const state = {
|
||||
component,
|
||||
props,
|
||||
events: disposeEvent ? {
|
||||
...events,
|
||||
[disposeEvent]: dispose,
|
||||
} : events,
|
||||
events,
|
||||
id,
|
||||
};
|
||||
|
||||
|
@ -199,15 +197,19 @@ export async function popup<T extends Component>(
|
|||
}
|
||||
|
||||
export function pageWindow(path: string) {
|
||||
popup(MkPageWindow, {
|
||||
const { dispose } = popup(MkPageWindow, {
|
||||
initialPath: path,
|
||||
}, {}, 'closed');
|
||||
}, {
|
||||
closed: () => dispose(),
|
||||
});
|
||||
}
|
||||
|
||||
export function toast(message: string) {
|
||||
popup(MkToast, {
|
||||
const { dispose } = popup(MkToast, {
|
||||
message,
|
||||
}, {}, 'closed');
|
||||
}, {
|
||||
closed: () => dispose(),
|
||||
});
|
||||
}
|
||||
|
||||
export function alert(props: {
|
||||
|
@ -216,11 +218,12 @@ export function alert(props: {
|
|||
text?: string;
|
||||
}): Promise<void> {
|
||||
return new Promise(resolve => {
|
||||
popup(MkDialog, props, {
|
||||
const { dispose } = popup(MkDialog, props, {
|
||||
done: () => {
|
||||
resolve();
|
||||
},
|
||||
}, 'closed');
|
||||
closed: () => dispose(),
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
|
@ -232,14 +235,15 @@ export function confirm(props: {
|
|||
cancelText?: string;
|
||||
}): Promise<{ canceled: boolean }> {
|
||||
return new Promise(resolve => {
|
||||
popup(MkDialog, {
|
||||
const { dispose } = popup(MkDialog, {
|
||||
...props,
|
||||
showCancelButton: true,
|
||||
}, {
|
||||
done: result => {
|
||||
resolve(result ? result : { canceled: true });
|
||||
},
|
||||
}, 'closed');
|
||||
closed: () => dispose(),
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
|
@ -261,7 +265,7 @@ export function actions<T extends {
|
|||
canceled: false; result: T[number]['value'];
|
||||
}> {
|
||||
return new Promise(resolve => {
|
||||
popup(MkDialog, {
|
||||
const { dispose } = popup(MkDialog, {
|
||||
...props,
|
||||
actions: props.actions.map(a => ({
|
||||
text: a.text,
|
||||
|
@ -275,7 +279,8 @@ export function actions<T extends {
|
|||
done: result => {
|
||||
resolve(result ? result : { canceled: true });
|
||||
},
|
||||
}, 'closed');
|
||||
closed: () => dispose(),
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
|
@ -323,7 +328,7 @@ export function inputText(props: {
|
|||
canceled: false; result: string | null;
|
||||
}> {
|
||||
return new Promise(resolve => {
|
||||
popup(MkDialog, {
|
||||
const { dispose } = popup(MkDialog, {
|
||||
title: props.title,
|
||||
text: props.text,
|
||||
input: {
|
||||
|
@ -338,7 +343,8 @@ export function inputText(props: {
|
|||
done: result => {
|
||||
resolve(result ? result : { canceled: true });
|
||||
},
|
||||
}, 'closed');
|
||||
closed: () => dispose(),
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
|
@ -377,7 +383,7 @@ export function inputNumber(props: {
|
|||
canceled: false; result: number | null;
|
||||
}> {
|
||||
return new Promise(resolve => {
|
||||
popup(MkDialog, {
|
||||
const { dispose } = popup(MkDialog, {
|
||||
title: props.title,
|
||||
text: props.text,
|
||||
input: {
|
||||
|
@ -390,7 +396,8 @@ export function inputNumber(props: {
|
|||
done: result => {
|
||||
resolve(result ? result : { canceled: true });
|
||||
},
|
||||
}, 'closed');
|
||||
closed: () => dispose(),
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
|
@ -405,7 +412,7 @@ export function inputDate(props: {
|
|||
canceled: false; result: Date;
|
||||
}> {
|
||||
return new Promise(resolve => {
|
||||
popup(MkDialog, {
|
||||
const { dispose } = popup(MkDialog, {
|
||||
title: props.title,
|
||||
text: props.text,
|
||||
input: {
|
||||
|
@ -417,7 +424,8 @@ export function inputDate(props: {
|
|||
done: result => {
|
||||
resolve(result ? { result: new Date(result.result), canceled: false } : { result: undefined, canceled: true });
|
||||
},
|
||||
}, 'closed');
|
||||
closed: () => dispose(),
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
|
@ -427,11 +435,12 @@ export function authenticateDialog(): Promise<{
|
|||
canceled: false; result: { password: string; token: string | null; };
|
||||
}> {
|
||||
return new Promise(resolve => {
|
||||
popup(MkPasswordDialog, {}, {
|
||||
const { dispose } = popup(MkPasswordDialog, {}, {
|
||||
done: result => {
|
||||
resolve(result ? { canceled: false, result } : { canceled: true, result: undefined });
|
||||
},
|
||||
}, 'closed');
|
||||
closed: () => dispose(),
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
|
@ -476,7 +485,7 @@ export function select<C = any>(props: {
|
|||
canceled: false; result: C | null;
|
||||
}> {
|
||||
return new Promise(resolve => {
|
||||
popup(MkDialog, {
|
||||
const { dispose } = popup(MkDialog, {
|
||||
title: props.title,
|
||||
text: props.text,
|
||||
select: {
|
||||
|
@ -487,7 +496,8 @@ export function select<C = any>(props: {
|
|||
done: result => {
|
||||
resolve(result ? result : { canceled: true });
|
||||
},
|
||||
}, 'closed');
|
||||
closed: () => dispose(),
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
|
@ -497,53 +507,57 @@ export function success(): Promise<void> {
|
|||
window.setTimeout(() => {
|
||||
showing.value = false;
|
||||
}, 1000);
|
||||
popup(MkWaitingDialog, {
|
||||
const { dispose } = popup(MkWaitingDialog, {
|
||||
success: true,
|
||||
showing: showing,
|
||||
}, {
|
||||
done: () => resolve(),
|
||||
}, 'closed');
|
||||
closed: () => dispose(),
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
export function waiting(): Promise<void> {
|
||||
return new Promise(resolve => {
|
||||
const showing = ref(true);
|
||||
popup(MkWaitingDialog, {
|
||||
const { dispose } = popup(MkWaitingDialog, {
|
||||
success: false,
|
||||
showing: showing,
|
||||
}, {
|
||||
done: () => resolve(),
|
||||
}, 'closed');
|
||||
closed: () => dispose(),
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
export function form<F extends Form>(title: string, f: F): Promise<{ canceled: true, result?: undefined } | { canceled?: false, result: GetFormResultType<F> }> {
|
||||
return new Promise(resolve => {
|
||||
popup(defineAsyncComponent(() => import('@/components/MkFormDialog.vue')), { title, form: f }, {
|
||||
const { dispose } = popup(defineAsyncComponent(() => import('@/components/MkFormDialog.vue')), { title, form: f }, {
|
||||
done: result => {
|
||||
resolve(result);
|
||||
},
|
||||
}, 'closed');
|
||||
closed: () => dispose(),
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
export async function selectUser(opts: { includeSelf?: boolean; localOnly?: boolean; } = {}): Promise<Misskey.entities.UserDetailed> {
|
||||
return new Promise(resolve => {
|
||||
popup(defineAsyncComponent(() => import('@/components/MkUserSelectDialog.vue')), {
|
||||
const { dispose } = popup(defineAsyncComponent(() => import('@/components/MkUserSelectDialog.vue')), {
|
||||
includeSelf: opts.includeSelf,
|
||||
localOnly: opts.localOnly,
|
||||
}, {
|
||||
ok: user => {
|
||||
resolve(user);
|
||||
},
|
||||
}, 'closed');
|
||||
closed: () => dispose(),
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
export async function selectDriveFile(multiple: boolean): Promise<Misskey.entities.DriveFile[]> {
|
||||
return new Promise(resolve => {
|
||||
popup(defineAsyncComponent(() => import('@/components/MkDriveSelectDialog.vue')), {
|
||||
const { dispose } = popup(defineAsyncComponent(() => import('@/components/MkDriveSelectDialog.vue')), {
|
||||
type: 'file',
|
||||
multiple,
|
||||
}, {
|
||||
|
@ -552,13 +566,14 @@ export async function selectDriveFile(multiple: boolean): Promise<Misskey.entiti
|
|||
resolve(files);
|
||||
}
|
||||
},
|
||||
}, 'closed');
|
||||
closed: () => dispose(),
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
export async function selectDriveFolder(multiple: boolean): Promise<Misskey.entities.DriveFolder[]> {
|
||||
return new Promise(resolve => {
|
||||
popup(defineAsyncComponent(() => import('@/components/MkDriveSelectDialog.vue')), {
|
||||
const { dispose } = popup(defineAsyncComponent(() => import('@/components/MkDriveSelectDialog.vue')), {
|
||||
type: 'folder',
|
||||
multiple,
|
||||
}, {
|
||||
|
@ -567,20 +582,22 @@ export async function selectDriveFolder(multiple: boolean): Promise<Misskey.enti
|
|||
resolve(folders);
|
||||
}
|
||||
},
|
||||
}, 'closed');
|
||||
closed: () => dispose(),
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
export async function pickEmoji(src: HTMLElement, opts: ComponentProps<typeof MkEmojiPickerDialog>): Promise<string> {
|
||||
return new Promise(resolve => {
|
||||
popup(MkEmojiPickerDialog, {
|
||||
const { dispose } = popup(MkEmojiPickerDialog, {
|
||||
src,
|
||||
...opts,
|
||||
}, {
|
||||
done: emoji => {
|
||||
resolve(emoji);
|
||||
},
|
||||
}, 'closed');
|
||||
closed: () => dispose(),
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
|
@ -589,7 +606,7 @@ export async function cropImage(image: Misskey.entities.DriveFile, options: {
|
|||
uploadFolder?: string | null;
|
||||
}): Promise<Misskey.entities.DriveFile> {
|
||||
return new Promise(resolve => {
|
||||
popup(defineAsyncComponent(() => import('@/components/MkCropperDialog.vue')), {
|
||||
const { dispose } = popup(defineAsyncComponent(() => import('@/components/MkCropperDialog.vue')), {
|
||||
file: image,
|
||||
aspectRatio: options.aspectRatio,
|
||||
uploadFolder: options.uploadFolder,
|
||||
|
@ -597,7 +614,8 @@ export async function cropImage(image: Misskey.entities.DriveFile, options: {
|
|||
ok: x => {
|
||||
resolve(x);
|
||||
},
|
||||
}, 'closed');
|
||||
closed: () => dispose(),
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
|
@ -608,8 +626,7 @@ export function popupMenu(items: MenuItem[], src?: HTMLElement | EventTarget | n
|
|||
onClosing?: () => void;
|
||||
}): Promise<void> {
|
||||
return new Promise(resolve => {
|
||||
let dispose;
|
||||
popup(MkPopupMenu, {
|
||||
const { dispose } = popup(MkPopupMenu, {
|
||||
items,
|
||||
src,
|
||||
width: options?.width,
|
||||
|
@ -623,8 +640,6 @@ export function popupMenu(items: MenuItem[], src?: HTMLElement | EventTarget | n
|
|||
closing: () => {
|
||||
if (options?.onClosing) options.onClosing();
|
||||
},
|
||||
}).then(res => {
|
||||
dispose = res.dispose;
|
||||
});
|
||||
});
|
||||
}
|
||||
|
@ -632,8 +647,7 @@ export function popupMenu(items: MenuItem[], src?: HTMLElement | EventTarget | n
|
|||
export function contextMenu(items: MenuItem[], ev: MouseEvent): Promise<void> {
|
||||
ev.preventDefault();
|
||||
return new Promise(resolve => {
|
||||
let dispose;
|
||||
popup(MkContextMenu, {
|
||||
const { dispose } = popup(MkContextMenu, {
|
||||
items,
|
||||
ev,
|
||||
}, {
|
||||
|
@ -641,8 +655,6 @@ export function contextMenu(items: MenuItem[], ev: MouseEvent): Promise<void> {
|
|||
resolve();
|
||||
dispose();
|
||||
},
|
||||
}).then(res => {
|
||||
dispose = res.dispose;
|
||||
});
|
||||
});
|
||||
}
|
||||
|
@ -656,14 +668,11 @@ export function post(props: Record<string, any> = {}): Promise<void> {
|
|||
// Vueが渡されたコンポーネントに内部的に__propsというプロパティを生やす影響で、
|
||||
// 複数のpost formを開いたときに場合によってはエラーになる
|
||||
// もちろん複数のpost formを開けること自体Misskeyサイドのバグなのだが
|
||||
let dispose;
|
||||
popup(MkPostFormDialog, props, {
|
||||
const { dispose } = popup(MkPostFormDialog, props, {
|
||||
closed: () => {
|
||||
resolve();
|
||||
dispose();
|
||||
},
|
||||
}).then(res => {
|
||||
dispose = res.dispose;
|
||||
});
|
||||
});
|
||||
}
|
||||
|
|
|
@ -464,16 +464,20 @@ function toggleRoleItem(role) {
|
|||
}
|
||||
|
||||
function createAnnouncement() {
|
||||
os.popup(defineAsyncComponent(() => import('@/components/MkUserAnnouncementEditDialog.vue')), {
|
||||
const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/MkUserAnnouncementEditDialog.vue')), {
|
||||
user: user.value,
|
||||
}, {}, 'closed');
|
||||
}, {
|
||||
closed: () => dispose(),
|
||||
});
|
||||
}
|
||||
|
||||
function editAnnouncement(announcement) {
|
||||
os.popup(defineAsyncComponent(() => import('@/components/MkUserAnnouncementEditDialog.vue')), {
|
||||
const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/MkUserAnnouncementEditDialog.vue')), {
|
||||
user: user.value,
|
||||
announcement,
|
||||
}, {}, 'closed');
|
||||
}, {
|
||||
closed: () => dispose(),
|
||||
});
|
||||
}
|
||||
|
||||
watch(() => props.userId, () => {
|
||||
|
|
|
@ -109,7 +109,7 @@ async function onDeleteButtonClicked(id: string) {
|
|||
|
||||
async function showEditor(mode: 'create' | 'edit', id?: string) {
|
||||
const { dispose, needLoad } = await new Promise<{ dispose: () => void, needLoad: boolean }>(async resolve => {
|
||||
const res = await os.popup(
|
||||
const { dispose: _dispose } = os.popup(
|
||||
defineAsyncComponent(() => import('./notification-recipient.editor.vue')),
|
||||
{
|
||||
mode,
|
||||
|
@ -117,10 +117,10 @@ async function showEditor(mode: 'create' | 'edit', id?: string) {
|
|||
},
|
||||
{
|
||||
submitted: async () => {
|
||||
resolve({ dispose: res.dispose, needLoad: true });
|
||||
resolve({ dispose: _dispose, needLoad: true });
|
||||
},
|
||||
closed: () => {
|
||||
resolve({ dispose: res.dispose, needLoad: false });
|
||||
resolve({ dispose: _dispose, needLoad: false });
|
||||
},
|
||||
},
|
||||
);
|
||||
|
|
|
@ -129,18 +129,19 @@ const toggleSelect = (emoji) => {
|
|||
};
|
||||
|
||||
const add = async (ev: MouseEvent) => {
|
||||
os.popup(defineAsyncComponent(() => import('./emoji-edit-dialog.vue')), {
|
||||
const { dispose } = os.popup(defineAsyncComponent(() => import('./emoji-edit-dialog.vue')), {
|
||||
}, {
|
||||
done: result => {
|
||||
if (result.created) {
|
||||
emojisPaginationComponent.value.prepend(result.created);
|
||||
}
|
||||
},
|
||||
}, 'closed');
|
||||
closed: () => dispose(),
|
||||
});
|
||||
};
|
||||
|
||||
const edit = (emoji) => {
|
||||
os.popup(defineAsyncComponent(() => import('./emoji-edit-dialog.vue')), {
|
||||
const { dispose } = os.popup(defineAsyncComponent(() => import('./emoji-edit-dialog.vue')), {
|
||||
emoji: emoji,
|
||||
}, {
|
||||
done: result => {
|
||||
|
@ -153,7 +154,8 @@ const edit = (emoji) => {
|
|||
emojisPaginationComponent.value.removeItem(emoji.id);
|
||||
}
|
||||
},
|
||||
}, 'closed');
|
||||
closed: () => dispose(),
|
||||
});
|
||||
};
|
||||
|
||||
const importEmoji = (emoji) => {
|
||||
|
|
|
@ -160,7 +160,7 @@ function rename() {
|
|||
function describe() {
|
||||
if (!file.value) return;
|
||||
|
||||
os.popup(defineAsyncComponent(() => import('@/components/MkFileCaptionEditWindow.vue')), {
|
||||
const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/MkFileCaptionEditWindow.vue')), {
|
||||
default: file.value.comment ?? '',
|
||||
file: file.value,
|
||||
}, {
|
||||
|
@ -172,7 +172,8 @@ function describe() {
|
|||
await fetch();
|
||||
});
|
||||
},
|
||||
}, 'closed');
|
||||
closed: () => dispose(),
|
||||
});
|
||||
}
|
||||
|
||||
async function deleteFile() {
|
||||
|
|
|
@ -1008,8 +1008,18 @@ function attachGameEvents() {
|
|||
const domX = rect.left + (x * viewScale);
|
||||
const domY = rect.top + (y * viewScale);
|
||||
const scoreUnit = getScoreUnit(props.gameMode);
|
||||
os.popup(MkRippleEffect, { x: domX, y: domY }, {}, 'end');
|
||||
os.popup(MkPlusOneEffect, { x: domX, y: domY, value: scoreDelta + (scoreUnit === 'pt' ? '' : scoreUnit) }, {}, 'end');
|
||||
|
||||
{
|
||||
const { dispose } = os.popup(MkRippleEffect, { x: domX, y: domY }, {
|
||||
end: () => dispose(),
|
||||
});
|
||||
}
|
||||
|
||||
{
|
||||
const { dispose } = os.popup(MkPlusOneEffect, { x: domX, y: domY, value: scoreDelta + (scoreUnit === 'pt' ? '' : scoreUnit) }, {
|
||||
end: () => dispose(),
|
||||
});
|
||||
}
|
||||
|
||||
if (nextMono) {
|
||||
const def = monoDefinitions.value.find(x => x.id === nextMono.id)!;
|
||||
|
|
|
@ -14,8 +14,8 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import * as os from '@/os.js';
|
||||
import * as Misskey from 'misskey-js';
|
||||
import * as os from '@/os.js';
|
||||
import { misskeyApiGet } from '@/scripts/misskey-api.js';
|
||||
import copyToClipboard from '@/scripts/copy-to-clipboard.js';
|
||||
import { i18n } from '@/i18n.js';
|
||||
|
@ -40,12 +40,12 @@ function menu(ev) {
|
|||
text: i18n.ts.info,
|
||||
icon: 'ti ti-info-circle',
|
||||
action: async () => {
|
||||
os.popup(MkCustomEmojiDetailedDialog, {
|
||||
const { dispose } = os.popup(MkCustomEmojiDetailedDialog, {
|
||||
emoji: await misskeyApiGet('emoji', {
|
||||
name: props.emoji.name,
|
||||
})
|
||||
}),
|
||||
}, {
|
||||
anchor: ev.target,
|
||||
closed: () => dispose(),
|
||||
});
|
||||
},
|
||||
}], ev.currentTarget ?? ev.target);
|
||||
|
|
|
@ -44,7 +44,9 @@ async function save() {
|
|||
|
||||
onMounted(() => {
|
||||
if (props.token == null) {
|
||||
os.popup(defineAsyncComponent(() => import('@/components/MkForgotPassword.vue')), {}, {}, 'closed');
|
||||
const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/MkForgotPassword.vue')), {}, {
|
||||
closed: () => dispose(),
|
||||
});
|
||||
mainRouter.push('/');
|
||||
}
|
||||
});
|
||||
|
|
|
@ -108,9 +108,11 @@ async function registerTOTP(): Promise<void> {
|
|||
token: auth.result.token,
|
||||
});
|
||||
|
||||
os.popup(defineAsyncComponent(() => import('./2fa.qrdialog.vue')), {
|
||||
const { dispose } = os.popup(defineAsyncComponent(() => import('./2fa.qrdialog.vue')), {
|
||||
twoFactorData,
|
||||
}, {}, 'closed');
|
||||
}, {
|
||||
closed: () => dispose(),
|
||||
});
|
||||
}
|
||||
|
||||
async function unregisterTOTP(): Promise<void> {
|
||||
|
|
|
@ -74,22 +74,24 @@ async function removeAccount(account) {
|
|||
}
|
||||
|
||||
function addExistingAccount() {
|
||||
os.popup(defineAsyncComponent(() => import('@/components/MkSigninDialog.vue')), {}, {
|
||||
const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/MkSigninDialog.vue')), {}, {
|
||||
done: async res => {
|
||||
await addAccounts(res.id, res.i);
|
||||
os.success();
|
||||
init();
|
||||
},
|
||||
}, 'closed');
|
||||
closed: () => dispose(),
|
||||
});
|
||||
}
|
||||
|
||||
function createAccount() {
|
||||
os.popup(defineAsyncComponent(() => import('@/components/MkSignupDialog.vue')), {}, {
|
||||
const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/MkSignupDialog.vue')), {}, {
|
||||
done: async res => {
|
||||
await addAccounts(res.id, res.i);
|
||||
switchAccountWithToken(res.i);
|
||||
},
|
||||
}, 'closed');
|
||||
closed: () => dispose(),
|
||||
});
|
||||
}
|
||||
|
||||
async function switchAccount(account: any) {
|
||||
|
|
|
@ -23,7 +23,7 @@ import { definePageMetadata } from '@/scripts/page-metadata.js';
|
|||
const isDesktop = ref(window.innerWidth >= 1100);
|
||||
|
||||
function generateToken() {
|
||||
os.popup(defineAsyncComponent(() => import('@/components/MkTokenGenerateWindow.vue')), {}, {
|
||||
const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/MkTokenGenerateWindow.vue')), {}, {
|
||||
done: async result => {
|
||||
const { name, permissions } = result;
|
||||
const { token } = await misskeyApi('miauth/gen-token', {
|
||||
|
@ -38,7 +38,8 @@ function generateToken() {
|
|||
text: token,
|
||||
});
|
||||
},
|
||||
}, 'closed');
|
||||
closed: () => dispose(),
|
||||
});
|
||||
}
|
||||
|
||||
const headerActions = computed(() => []);
|
||||
|
|
|
@ -67,7 +67,7 @@ misskeyApi('get-avatar-decorations').then(_avatarDecorations => {
|
|||
});
|
||||
|
||||
function openDecoration(avatarDecoration, index?: number) {
|
||||
os.popup(defineAsyncComponent(() => import('./avatar-decoration.dialog.vue')), {
|
||||
const { dispose } = os.popup(defineAsyncComponent(() => import('./avatar-decoration.dialog.vue')), {
|
||||
decoration: avatarDecoration,
|
||||
usingIndex: index,
|
||||
}, {
|
||||
|
@ -108,7 +108,8 @@ function openDecoration(avatarDecoration, index?: number) {
|
|||
});
|
||||
$i.avatarDecorations = update;
|
||||
},
|
||||
}, 'closed');
|
||||
closed: () => dispose(),
|
||||
});
|
||||
}
|
||||
|
||||
function detachAllDecorations() {
|
||||
|
|
|
@ -27,7 +27,7 @@ function rename(file: Misskey.entities.DriveFile) {
|
|||
}
|
||||
|
||||
function describe(file: Misskey.entities.DriveFile) {
|
||||
os.popup(defineAsyncComponent(() => import('@/components/MkFileCaptionEditWindow.vue')), {
|
||||
const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/MkFileCaptionEditWindow.vue')), {
|
||||
default: file.comment ?? '',
|
||||
file: file,
|
||||
}, {
|
||||
|
@ -37,7 +37,8 @@ function describe(file: Misskey.entities.DriveFile) {
|
|||
comment: caption.length === 0 ? null : caption,
|
||||
});
|
||||
},
|
||||
}, 'closed');
|
||||
closed: () => dispose(),
|
||||
});
|
||||
}
|
||||
|
||||
function toggleSensitive(file: Misskey.entities.DriveFile) {
|
||||
|
|
|
@ -136,10 +136,12 @@ export function getAbuseNoteMenu(note: Misskey.entities.Note, text: string): Men
|
|||
let noteInfo = '';
|
||||
if (note.url ?? note.uri != null) noteInfo = `Note: ${note.url ?? note.uri}\n`;
|
||||
noteInfo += `Local Note: ${localUrl}\n`;
|
||||
os.popup(defineAsyncComponent(() => import('@/components/MkAbuseReportWindow.vue')), {
|
||||
const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/MkAbuseReportWindow.vue')), {
|
||||
user: note.user,
|
||||
initialComment: `${noteInfo}-----\n`,
|
||||
}, {}, 'closed');
|
||||
}, {
|
||||
closed: () => dispose(),
|
||||
});
|
||||
},
|
||||
};
|
||||
}
|
||||
|
@ -530,7 +532,9 @@ export function getRenoteMenu(props: {
|
|||
const rect = el.getBoundingClientRect();
|
||||
const x = rect.left + (el.offsetWidth / 2);
|
||||
const y = rect.top + (el.offsetHeight / 2);
|
||||
os.popup(MkRippleEffect, { x, y }, {}, 'end');
|
||||
const { dispose } = os.popup(MkRippleEffect, { x, y }, {
|
||||
end: () => dispose(),
|
||||
});
|
||||
}
|
||||
|
||||
if (!props.mock) {
|
||||
|
@ -566,7 +570,9 @@ export function getRenoteMenu(props: {
|
|||
const rect = el.getBoundingClientRect();
|
||||
const x = rect.left + (el.offsetWidth / 2);
|
||||
const y = rect.top + (el.offsetHeight / 2);
|
||||
os.popup(MkRippleEffect, { x, y }, {}, 'end');
|
||||
const { dispose } = os.popup(MkRippleEffect, { x, y }, {
|
||||
end: () => dispose(),
|
||||
});
|
||||
}
|
||||
|
||||
const configuredVisibility = defaultStore.state.rememberNoteVisibility ? defaultStore.state.visibility : defaultStore.state.defaultNoteVisibility;
|
||||
|
@ -615,7 +621,9 @@ export function getRenoteMenu(props: {
|
|||
const rect = el.getBoundingClientRect();
|
||||
const x = rect.left + (el.offsetWidth / 2);
|
||||
const y = rect.top + (el.offsetHeight / 2);
|
||||
os.popup(MkRippleEffect, { x, y }, {}, 'end');
|
||||
const { dispose } = os.popup(MkRippleEffect, { x, y }, {
|
||||
end: () => dispose(),
|
||||
});
|
||||
}
|
||||
|
||||
if (!props.mock) {
|
||||
|
|
|
@ -100,9 +100,11 @@ export function getUserMenu(user: Misskey.entities.UserDetailed, router: IRouter
|
|||
}
|
||||
|
||||
function reportAbuse() {
|
||||
os.popup(defineAsyncComponent(() => import('@/components/MkAbuseReportWindow.vue')), {
|
||||
const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/MkAbuseReportWindow.vue')), {
|
||||
user: user,
|
||||
}, {}, 'closed');
|
||||
}, {
|
||||
closed: () => dispose(),
|
||||
});
|
||||
}
|
||||
|
||||
async function getConfirmed(text: string): Promise<boolean> {
|
||||
|
|
|
@ -103,7 +103,7 @@ export async function installPlugin(code: string, meta?: AiScriptPluginMeta) {
|
|||
}
|
||||
|
||||
const token = realMeta.permissions == null || realMeta.permissions.length === 0 ? null : await new Promise((res, rej) => {
|
||||
os.popup(defineAsyncComponent(() => import('@/components/MkTokenGenerateWindow.vue')), {
|
||||
const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/MkTokenGenerateWindow.vue')), {
|
||||
title: i18n.ts.tokenRequested,
|
||||
information: i18n.ts.pluginTokenRequestedDescription,
|
||||
initialName: realMeta.name,
|
||||
|
@ -118,7 +118,8 @@ export async function installPlugin(code: string, meta?: AiScriptPluginMeta) {
|
|||
});
|
||||
res(token);
|
||||
},
|
||||
}, 'closed');
|
||||
closed: () => dispose(),
|
||||
});
|
||||
});
|
||||
|
||||
savePlugin({
|
||||
|
|
|
@ -11,7 +11,7 @@ import { popup } from '@/os.js';
|
|||
export function pleaseLogin(path?: string) {
|
||||
if ($i) return;
|
||||
|
||||
popup(defineAsyncComponent(() => import('@/components/MkSigninDialog.vue')), {
|
||||
const { dispose } = popup(defineAsyncComponent(() => import('@/components/MkSigninDialog.vue')), {
|
||||
autoSet: true,
|
||||
message: i18n.ts.signinRequired,
|
||||
}, {
|
||||
|
@ -20,7 +20,8 @@ export function pleaseLogin(path?: string) {
|
|||
window.location.href = path;
|
||||
}
|
||||
},
|
||||
}, 'closed');
|
||||
closed: () => dispose(),
|
||||
});
|
||||
|
||||
throw new Error('signin required');
|
||||
}
|
||||
|
|
|
@ -17,20 +17,16 @@ export function useChartTooltip(opts: { position: 'top' | 'middle' } = { positio
|
|||
borderColor: string;
|
||||
text: string;
|
||||
}[] | null>(null);
|
||||
let disposeTooltipComponent;
|
||||
|
||||
os.popup(MkChartTooltip, {
|
||||
const { dispose: disposeTooltipComponent } = os.popup(MkChartTooltip, {
|
||||
showing: tooltipShowing,
|
||||
x: tooltipX,
|
||||
y: tooltipY,
|
||||
title: tooltipTitle,
|
||||
series: tooltipSeries,
|
||||
}, {}).then(({ dispose }) => {
|
||||
disposeTooltipComponent = dispose;
|
||||
});
|
||||
}, {});
|
||||
|
||||
onUnmounted(() => {
|
||||
if (disposeTooltipComponent) disposeTooltipComponent();
|
||||
disposeTooltipComponent();
|
||||
});
|
||||
|
||||
onDeactivated(() => {
|
||||
|
|
|
@ -112,7 +112,9 @@ export function openInstanceMenu(ev: MouseEvent) {
|
|||
text: i18n.ts._initialTutorial.launchTutorial,
|
||||
icon: 'ti ti-presentation',
|
||||
action: () => {
|
||||
os.popup(defineAsyncComponent(() => import('@/components/MkTutorialDialog.vue')), {}, {}, 'closed');
|
||||
const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/MkTutorialDialog.vue')), {}, {
|
||||
closed: () => dispose(),
|
||||
});
|
||||
},
|
||||
} : undefined, {
|
||||
type: 'link',
|
||||
|
|
|
@ -74,8 +74,9 @@ function openAccountMenu(ev: MouseEvent) {
|
|||
}
|
||||
|
||||
function more() {
|
||||
os.popup(defineAsyncComponent(() => import('@/components/MkLaunchPad.vue')), {}, {
|
||||
}, 'closed');
|
||||
const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/MkLaunchPad.vue')), {}, {
|
||||
closed: () => dispose(),
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
|
@ -99,10 +99,11 @@ function openAccountMenu(ev: MouseEvent) {
|
|||
}
|
||||
|
||||
function more(ev: MouseEvent) {
|
||||
os.popup(defineAsyncComponent(() => import('@/components/MkLaunchPad.vue')), {
|
||||
const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/MkLaunchPad.vue')), {
|
||||
src: ev.currentTarget ?? ev.target,
|
||||
}, {
|
||||
}, 'closed');
|
||||
closed: () => dispose(),
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
|
@ -71,11 +71,12 @@ const otherNavItemIndicated = computed<boolean>(() => {
|
|||
});
|
||||
|
||||
function more(ev: MouseEvent) {
|
||||
os.popup(defineAsyncComponent(() => import('@/components/MkLaunchPad.vue')), {
|
||||
const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/MkLaunchPad.vue')), {
|
||||
src: ev.currentTarget ?? ev.target,
|
||||
anchor: { x: 'center', y: 'bottom' },
|
||||
}, {
|
||||
}, 'closed');
|
||||
closed: () => dispose(),
|
||||
});
|
||||
}
|
||||
|
||||
function openAccountMenu(ev: MouseEvent) {
|
||||
|
|
|
@ -86,9 +86,11 @@ function calcViewState() {
|
|||
}
|
||||
|
||||
function more(ev: MouseEvent) {
|
||||
os.popup(defineAsyncComponent(() => import('@/components/MkLaunchPad.vue')), {
|
||||
const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/MkLaunchPad.vue')), {
|
||||
src: ev.currentTarget ?? ev.target,
|
||||
}, {}, 'closed');
|
||||
}, {
|
||||
closed: () => dispose(),
|
||||
});
|
||||
}
|
||||
|
||||
function openAccountMenu(ev: MouseEvent) {
|
||||
|
|
|
@ -27,7 +27,7 @@ const props = defineProps<{
|
|||
const notificationsComponent = shallowRef<InstanceType<typeof XNotifications>>();
|
||||
|
||||
function func() {
|
||||
os.popup(defineAsyncComponent(() => import('@/components/MkNotificationSelectWindow.vue')), {
|
||||
const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/MkNotificationSelectWindow.vue')), {
|
||||
excludeTypes: props.column.excludeTypes,
|
||||
}, {
|
||||
done: async (res) => {
|
||||
|
@ -36,7 +36,8 @@ function func() {
|
|||
excludeTypes: excludeTypes,
|
||||
});
|
||||
},
|
||||
}, 'closed');
|
||||
closed: () => dispose(),
|
||||
});
|
||||
}
|
||||
|
||||
const menu = [{
|
||||
|
|
|
@ -126,15 +126,19 @@ const keymap = computed(() => {
|
|||
});
|
||||
|
||||
function signin() {
|
||||
os.popup(XSigninDialog, {
|
||||
const { dispose } = os.popup(XSigninDialog, {
|
||||
autoSet: true,
|
||||
}, {}, 'closed');
|
||||
}, {
|
||||
closed: () => dispose(),
|
||||
});
|
||||
}
|
||||
|
||||
function signup() {
|
||||
os.popup(XSignupDialog, {
|
||||
const { dispose } = os.popup(XSignupDialog, {
|
||||
autoSet: true,
|
||||
}, {}, 'closed');
|
||||
}, {
|
||||
closed: () => dispose(),
|
||||
});
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
|
|
|
@ -54,7 +54,7 @@ const { widgetProps, configure, save } = useWidgetPropsManager(name,
|
|||
);
|
||||
|
||||
const configureNotification = () => {
|
||||
os.popup(defineAsyncComponent(() => import('@/components/MkNotificationSelectWindow.vue')), {
|
||||
const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/MkNotificationSelectWindow.vue')), {
|
||||
excludeTypes: widgetProps.excludeTypes,
|
||||
}, {
|
||||
done: async (res) => {
|
||||
|
@ -62,7 +62,8 @@ const configureNotification = () => {
|
|||
widgetProps.excludeTypes = excludeTypes;
|
||||
save();
|
||||
},
|
||||
}, 'closed');
|
||||
closed: () => dispose(),
|
||||
});
|
||||
};
|
||||
|
||||
defineExpose<WidgetComponentExpose>({
|
||||
|
|
Loading…
Reference in New Issue