pihkaal/pihkaal-me
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(common): improve confirmation modal api

Browse Source
This commit is contained in:
Stevan
2026-01-30 23:14:51 +01:00
parent 8e7895ae59
commit db4b5cc9f9
7 changed files with 27 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
app/components/Common/ConfirmationModal.vue
View File

@@ -18,12 +18,12 @@ const CLIP_HEIGHT = LOGICAL_HEIGHT - BOTTOM_BAR_HEIGHT;
const handleActivateA = () => { const handleActivateA = () => {
confirmationModal.onConfirm?.(); confirmationModal.onConfirm?.();
confirmationModal.close(); confirmationModal.close("confirm");
}; };
const handleActivateB = () => { const handleActivateB = () => {
confirmationModal.onCancel?.(); confirmationModal.onCancel?.();
confirmationModal.close(); confirmationModal.close("cancel");
}; };
onRender((ctx) => { onRender((ctx) => {
@@ -45,7 +45,7 @@ onRender((ctx) => {
}, 100); }, 100);
onUnmounted(() => { onUnmounted(() => {
confirmationModal.close(); confirmationModal.close("cancel");
}); });
</script> </script>

19
app/components/Settings/BottomScreen/Menus/Options/2048.vue
View File

@@ -14,17 +14,13 @@ const handleActivateB = () => {
const handleActivateA = () => { const handleActivateA = () => {
if (isDead()) { if (isDead()) {
resetBoard(); resetBoard();
confirmationModal.close();
return; return;
} }
let confirmed = false;
confirmationModal.open({ confirmationModal.open({
text: $t("settings.options.2048.restartConfirmation"), text: $t("settings.options.2048.restartConfirmation"),
onConfirm: () => { onConfirm: () => {},
confirmed = true; onClosed: (choice) => {
}, if (choice === "confirm") {
onClosed: () => {
if (confirmed) {
resetBoard(); resetBoard();
} }
}, },
@@ -93,14 +89,11 @@ let tiles: VisualTile[] = [];
let animating = false; let animating = false;
const showRestartModal = () => { const showRestartModal = () => {
let confirmed = false;
confirmationModal.open({ confirmationModal.open({
text: $t("settings.options.2048.gameOver"), text: $t("settings.options.2048.gameOver"),
onConfirm: () => { onConfirm: () => {},
confirmed = true; onClosed: (choice) => {
}, if (choice === "confirm") {
onClosed: () => {
if (confirmed) {
resetBoard(); resetBoard();
} }
}, },

3
app/components/Settings/BottomScreen/Menus/Options/Language.vue
View File

@@ -93,9 +93,8 @@ const handleConfirm = () => {
{ locale: selectedLocale.code }, { locale: selectedLocale.code },
), ),
onClosed: () => store.closeSubMenu(), onClosed: () => store.closeSubMenu(),
timeout: 2000,
}); });
// TODO: add "timeout" to confirmationModal.open
setTimeout(() => confirmationModal.close(), 2000);
}; };
onRender((ctx) => { onRender((ctx) => {

2
app/components/Settings/BottomScreen/Menus/Options/StartUp.vue
View File

@@ -42,8 +42,8 @@ const handleConfirm = () => {
onClosed: () => { onClosed: () => {
store.closeSubMenu(); store.closeSubMenu();
}, },
timeout: 2000,
}); });
setTimeout(() => confirmationModal.close(), 2000);
}; };
until(() => app.ready) until(() => app.ready)

4
app/components/Settings/BottomScreen/Menus/User/Birthday.vue
View File

@@ -43,10 +43,8 @@ const handleActivateA = () => {
confirmationModal.open({ confirmationModal.open({
text, text,
onClosed: () => store.closeSubMenu(), onClosed: () => store.closeSubMenu(),
timeout: 2000,
}); });
setTimeout(() => {
confirmationModal.close();
}, 2000);
}; };
defineOptions({ render: () => null }); defineOptions({ render: () => null });

4
app/components/Settings/BottomScreen/Menus/User/Color.vue
View File

@@ -125,10 +125,8 @@ const handleConfirm = () => {
confirmationModal.open({ confirmationModal.open({
text: $t("settings.user.color.confirmation"), text: $t("settings.user.color.confirmation"),
onClosed: () => store.closeSubMenu(), onClosed: () => store.closeSubMenu(),
timeout: 2000,
}); });
setTimeout(() => {
confirmationModal.close();
}, 2000);
}; };
</script> </script>

19
app/stores/confirmationModal.ts
View File

@@ -10,8 +10,8 @@ export const useConfirmationModal = defineStore("confirmationModal", {
isOpen: false, isOpen: false,
text: "", text: "",
onConfirm: null as (() => void) | null, onConfirm: null as (() => void) | null,
onClosed: null as (() => void) | null,
onCancel: null as (() => void) | null, onCancel: null as (() => void) | null,
onClosed: null as ((choice: "confirm" | "cancel") => void) | null,
offsetY: MODAL_MAX_Y_OFFSET, offsetY: MODAL_MAX_Y_OFFSET,
buttonsYOffset: 0, buttonsYOffset: 0,
modalButtonsYOffset: BUTTONS_MAX_Y_OFFSET, modalButtonsYOffset: BUTTONS_MAX_Y_OFFSET,
@@ -24,7 +24,8 @@ export const useConfirmationModal = defineStore("confirmationModal", {
text: string; text: string;
onCancel?: () => void; onCancel?: () => void;
onConfirm?: () => void; onConfirm?: () => void;
onClosed?: () => void; onClosed?: (choice: "confirm" | "cancel") => void;
timeout?: number;
}) { }) {
gsap.killTweensOf(this); gsap.killTweensOf(this);
this.text = options.text; this.text = options.text;
@@ -58,10 +59,17 @@ export const useConfirmationModal = defineStore("confirmationModal", {
this, this,
{ modalButtonsYOffset: BUTTONS_MAX_Y_OFFSET }, { modalButtonsYOffset: BUTTONS_MAX_Y_OFFSET },
{ modalButtonsYOffset: 0, duration: BUTTONS_TIME, ease: "none" }, { modalButtonsYOffset: 0, duration: BUTTONS_TIME, ease: "none" },
); )
.call(() => {
if (options.timeout) {
setTimeout(() => {
this.close("cancel");
}, options.timeout);
}
});
}, },
close() { close(choice: "confirm" | "cancel") {
if (!this.isVisible || this.isClosing) return; if (!this.isVisible || this.isClosing) return;
this.isClosing = true; this.isClosing = true;
@@ -89,6 +97,7 @@ export const useConfirmationModal = defineStore("confirmationModal", {
.call(() => { .call(() => {
const closedCallback = this.onClosed; const closedCallback = this.onClosed;
// TODO: this.$reset() ?
this.isVisible = false; this.isVisible = false;
this.isClosing = false; this.isClosing = false;
this.isOpen = false; this.isOpen = false;
@@ -96,7 +105,7 @@ export const useConfirmationModal = defineStore("confirmationModal", {
this.onConfirm = null; this.onConfirm = null;
this.onClosed = null; this.onClosed = null;
closedCallback?.(); closedCallback?.(choice);
}); });
}, },
}, },