From 378be06d96f29638af1ec978e1df57a80b595656 Mon Sep 17 00:00:00 2001
From: ThatOneCalculator <kainoa@t1c.dev>
Date: Sat, 18 Feb 2023 15:34:41 -0800
Subject: [PATCH] fix: dialog

---
 packages/client/src/components/MkDialog.vue | 189 ++++++++++----------
 1 file changed, 97 insertions(+), 92 deletions(-)

diff --git a/packages/client/src/components/MkDialog.vue b/packages/client/src/components/MkDialog.vue
index e01b0a332..ec55d15f7 100644
--- a/packages/client/src/components/MkDialog.vue
+++ b/packages/client/src/components/MkDialog.vue
@@ -1,51 +1,51 @@
 <template>
-<MkModal ref="modal" :prefer-type="'dialog'" :z-priority="'high'" @click="done(true)" @closed="emit('closed')">
-	<div class="mk-dialog">
-		<div v-if="icon" class="icon">
-			<i :class="icon"></i>
-		</div>
-		<div v-else-if="!input && !select" class="icon" :class="type">
-			<i v-if="type === 'success'" class="ph-check-bold ph-lg"></i>
-			<i v-else-if="type === 'error'" class="ph-circle-wavy-warning-bold ph-lg"></i>
-			<i v-else-if="type === 'warning'" class="ph-warning-bold ph-lg"></i>
-			<i v-else-if="type === 'info'" class="ph-info-bold ph-lg"></i>
-			<i v-else-if="type === 'question'" class="ph-question-bold ph-lg"></i>
-			<i v-else-if="type === 'waiting'" class="ph-circle-notch-bold ph-lg fa-pulse"></i>
-		</div>
-		<header v-if="title"><Mfm :text="title"/></header>
-		<div v-if="text" class="body"><Mfm :text="text"/></div>
-		<MkInput v-if="input" v-model="inputValue" autofocus :type="input.type || 'text'" :placeholder="input.placeholder || undefined" @keydown="onInputKeydown">
-			<template v-if="input.type === 'password'" #prefix><i class="ph-lock-bold ph-lg"></i></template>
-		</MkInput>
-		<MkSelect v-if="select" v-model="selectedValue" autofocus>
-			<template v-if="select.items">
-				<option v-for="item in select.items" :value="item.value">{{ item.text }}</option>
-			</template>
-			<template v-else>
-				<optgroup v-for="groupedItem in select.groupedItems" :label="groupedItem.label">
-					<option v-for="item in groupedItem.items" :value="item.value">{{ item.text }}</option>
-				</optgroup>
-			</template>
-		</MkSelect>
-		<div v-if="(showOkButton || showCancelButton) && !actions" class="buttons">
-			<div v-if="!isYesNo">
-				<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>
+	<MkModal ref="modal" :prefer-type="'dialog'" :z-priority="'high'" @click="done(true)" @closed="emit('closed')">
+		<div :class="$style.root">
+			<div v-if="icon" :class="$style.icon">
+				<i :class="icon"></i>
 			</div>
-			<div v-else>
-				<MkButton v-if="showOkButton" inline primary :autofocus="!input && !select" @click="ok">{{ i18n.ts.yes }}</MkButton>
-				<MkButton v-if="showCancelButton || input || select" inline @click="cancel">{{ i18n.ts.no }}</MkButton>
+			<div v-else-if="!input && !select" :class="[$style.icon, $style['type_' + type]]">
+				<i v-if="type === 'success'" :class="$style.iconInner" class="ph-check-bold ph-lg"></i>
+				<i v-else-if="type === 'error'" :class="$style.iconInner" class="ph-circle-wavy-warning-bold ph-lg"></i>
+				<i v-else-if="type === 'warning'" :class="$style.iconInner" class="ph-warning-bold ph-lg"></i>
+				<i v-else-if="type === 'info'" :class="$style.iconInner" class="ph-info-bold ph-lg"></i>
+				<i v-else-if="type === 'question'" :class="$style.iconInner" class="ph-circle-notch-bold ph-lg"></i>
+				<MkLoading v-else-if="type === 'waiting'" :class="$style.iconInner" :em="true"/>
+			</div>
+			<header v-if="title" :class="$style.title"><Mfm :text="title"/></header>
+			<div v-if="text" :class="$style.text"><Mfm :text="text"/></div>
+			<MkInput v-if="input" v-model="inputValue" autofocus :type="input.type || 'text'" :placeholder="input.placeholder || undefined" @keydown="onInputKeydown">
+				<template v-if="input.type === 'password'" #prefix><i class="ph-password-bold ph-lg"></i></template>
+			</MkInput>
+			<MkSelect v-if="select" v-model="selectedValue" autofocus>
+				<template v-if="select.items">
+					<option v-for="item in select.items" :value="item.value">{{ item.text }}</option>
+				</template>
+				<template v-else>
+					<optgroup v-for="groupedItem in select.groupedItems" :label="groupedItem.label">
+						<option v-for="item in groupedItem.items" :value="item.value">{{ item.text }}</option>
+					</optgroup>
+				</template>
+			</MkSelect>
+			<div v-if="(showOkButton || showCancelButton) && !actions" :class="$style.buttons">
+				<div v-if="!isYesNo">
+					<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">{{ i18n.ts.yes }}</MkButton>
+					<MkButton v-if="showCancelButton || input || select" inline @click="cancel">{{ i18n.ts.no }}</MkButton>
+				</div>
+			</div>
+			<div v-if="actions" :class="$style.buttons">
+				<MkButton v-for="action in actions" :key="action.text" inline :primary="action.primary" @click="() => { action.callback(); modal?.close(); }">{{ action.text }}</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>
-		</div>
-	</div>
-</MkModal>
+	</MkModal>
 </template>
 
 <script lang="ts" setup>
-import { onBeforeUnmount, onMounted, ref } from 'vue';
+import { onBeforeUnmount, onMounted, ref, shallowRef } from 'vue';
 import MkModal from '@/components/MkModal.vue';
 import MkButton from '@/components/MkButton.vue';
 import MkInput from '@/components/form/input.vue';
@@ -88,12 +88,16 @@ const props = withDefaults(defineProps<{
 	showOkButton?: boolean;
 	showCancelButton?: boolean;
 	isYesNo?: boolean;
+
 	cancelableByBgClick?: boolean;
+	okText?: string;
+	cancelText?: string;
 }>(), {
 	type: 'info',
 	showOkButton: true,
 	showCancelButton: false,
 	isYesNo: false,
+
 	cancelableByBgClick: true,
 });
 
@@ -102,7 +106,7 @@ const emit = defineEmits<{
 	(ev: 'closed'): void;
 }>();
 
-const modal = ref<InstanceType<typeof MkModal>>();
+const modal = shallowRef<InstanceType<typeof MkModal>>();
 
 const inputValue = ref(props.input?.default || null);
 const selectedValue = ref(props.select?.default || null);
@@ -151,9 +155,10 @@ onBeforeUnmount(() => {
 });
 </script>
 
-<style lang="scss" scoped>
-.mk-dialog {
+<style lang="scss" module>
+.root {
 	position: relative;
+	margin: auto;
 	padding: 32px;
 	min-width: 320px;
 	max-width: 480px;
@@ -161,56 +166,56 @@ onBeforeUnmount(() => {
 	text-align: center;
 	background: var(--panel);
 	border-radius: var(--radius);
+}
 
-	> .icon {
-		font-size: 32px;
+.icon {
+	font-size: 24px;
 
-		&.info {
-			color: #55c4dd;
-		}
-
-		&.success {
-			color: var(--success);
-		}
-
-		&.error {
-			color: var(--error);
-		}
-
-		&.warning {
-			color: var(--warn);
-		}
-
-		> * {
-			display: block;
-			margin: 0 auto;
-		}
-
-		& + header {
-			margin-top: 16px;
-		}
-	}
-
-	> header {
-		margin: 0 0 8px 0;
-		font-weight: bold;
-		font-size: 20px;
-
-		& + .body {
-			margin-top: 8px;
-		}
-	}
-
-	> .body {
-		margin: 16px 0 0 0;
-	}
-
-	> .buttons {
-		margin-top: 16px;
-
-		> * {
-			margin: 0 8px;
-		}
+	& + .title {
+		margin-top: 8px;
 	}
 }
+
+.iconInner {
+	display: block;
+	margin: 0 auto;
+}
+
+.type_info {
+	color: var(--accent);
+}
+
+.type_success {
+	color: var(--success);
+}
+
+.type_error {
+	color: var(--error);
+}
+
+.type_warning {
+	color: var(--warn);
+}
+
+.title {
+	margin: 0 0 8px 0;
+	font-weight: bold;
+	font-size: 1.1em;
+
+	& + .text {
+		margin-top: 8px;
+	}
+}
+
+.text {
+	margin: 16px 0 0 0;
+}
+
+.buttons {
+	margin-top: 16px;
+	display: flex;
+	gap: 8px;
+	flex-wrap: wrap;
+	justify-content: center;
+}
 </style>