feat: ✨ add `os.yesno` for yes/no questions

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "calckey",
-	"version": "12.119.0-calc.4.2",
+	"version": "12.119.0-calc.4.3",
 	"codename": "aqua",
 	"repository": {
 		"type": "git",

packages/client/src/components/MkDialog.vue

@@ -28,8 +28,14 @@
 			</template>
 		</MkSelect>
 		<div v-if="(showOkButton || showCancelButton) && !actions" class="buttons">
-			<MkButton v-if="showOkButton" inline primary :autofocus="!input && !select" @click="ok">{{ (showCancelButton || input || select) ? i18n.ts.ok : i18n.ts.gotIt }}</MkButton>
+			<div v-if="!isYesNo">
-			<MkButton v-if="showCancelButton || input || select" inline @click="cancel">{{ i18n.ts.cancel }}</MkButton>
+				<MkButton v-if="showOkButton" inline primary :autofocus="!input && !select" @click="ok">{{ (showCancelButton || input || select) ? i18n.ts.ok : i18n.ts.gotIt }}</MkButton>
+				<MkButton v-if="showCancelButton || input || select" inline @click="cancel">{{ i18n.ts.cancel }}</MkButton>
+			</div>
+			<div v-else>
+				<MkButton v-if="showOkButton" inline primary :autofocus="!input && !select" @click="ok">{{ (showCancelButton || input || select) ? i18n.ts.ok : i18n.ts.yes }}</MkButton>
+				<MkButton v-if="showCancelButton || input || select" inline @click="cancel">{{ i18n.ts.no }}</MkButton>
+			</div>
 		</div>
 		<div v-if="actions" class="buttons">
 			<MkButton v-for="action in actions" :key="action.text" inline :primary="action.primary" @click="() => { action.callback(); close(); }">{{ action.text }}</MkButton>
@@ -81,11 +87,13 @@ const props = withDefaults(defineProps<{
 	}[];
 	showOkButton?: boolean;
 	showCancelButton?: boolean;
+	isYesNo?: boolean;
 	cancelableByBgClick?: boolean;
 }>(), {
 	type: 'info',
 	showOkButton: true,
 	showCancelButton: false,
+	isYesNo: false,
 	cancelableByBgClick: true,
 });
 

packages/client/src/os.ts

@@ -238,6 +238,24 @@ export function confirm(props: {
 	});
 }
 
+export function yesno(props: {
+	type: 'error' | 'info' | 'success' | 'warning' | 'waiting' | 'question';
+	title?: string | null;
+	text?: string | null;
+}): Promise<{ canceled: boolean }> {
+	return new Promise((resolve, reject) => {
+		popup(defineAsyncComponent(() => import('@/components/MkDialog.vue')), {
+			...props,
+			showCancelButton: true,
+			isYesNo: true,
+		}, {
+			done: result => {
+				resolve(result ? result : { canceled: true });
+			},
+		}, 'closed');
+	});
+}
+
 export function inputText(props: {
 	type?: 'text' | 'email' | 'password' | 'url';
 	title?: string | null;

packages/client/src/pages/settings/profile.vue

@@ -130,7 +130,7 @@ function changeAvatar(ev) {
 	selectFile(ev.currentTarget ?? ev.target, i18n.ts.avatar).then(async (file) => {
 		let originalOrCropped = file;
 
-		const { canceled } = await os.confirm({
+		const { canceled } = await os.yesno({
 			type: 'question',
 			text: i18n.t('cropImageAsk'),
 		});
@@ -153,7 +153,7 @@ function changeBanner(ev) {
 	selectFile(ev.currentTarget ?? ev.target, i18n.ts.banner).then(async (file) => {
 		let originalOrCropped = file;
 
-		const { canceled } = await os.confirm({
+		const { canceled } = await os.yesno({
 			type: 'question',
 			text: i18n.t('cropImageAsk'),
 		});