feat: add os.yesno for yes/no questions

This commit is contained in:
ThatOneCalculator 2022-10-25 22:44:38 -07:00
parent 6b93d8ef80
commit c23843bb26
4 changed files with 31 additions and 5 deletions

View File

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

View File

@ -28,8 +28,14 @@
</template> </template>
</MkSelect> </MkSelect>
<div v-if="(showOkButton || showCancelButton) && !actions" class="buttons"> <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>
<div v-if="actions" class="buttons"> <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> <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; showOkButton?: boolean;
showCancelButton?: boolean; showCancelButton?: boolean;
isYesNo?: boolean;
cancelableByBgClick?: boolean; cancelableByBgClick?: boolean;
}>(), { }>(), {
type: 'info', type: 'info',
showOkButton: true, showOkButton: true,
showCancelButton: false, showCancelButton: false,
isYesNo: false,
cancelableByBgClick: true, cancelableByBgClick: true,
}); });

View File

@ -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: { export function inputText(props: {
type?: 'text' | 'email' | 'password' | 'url'; type?: 'text' | 'email' | 'password' | 'url';
title?: string | null; title?: string | null;

View File

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