เพิ่ม ui ลาออก

src/components/CustomDialog.vue

@@ -0,0 +1,79 @@
+<template>
+	<q-dialog ref="dialogRef" @hide="onDialogHide" persistent>
+		<q-card class="q-pa-sm">
+			<q-card-section class="row">
+				<div class="q-pr-md">
+					<q-avatar :icon="icon" size="lg" font-size="25px" color="blue-1" :text-color="color" />
+				</div>
+				<div class="col text-dark">
+					<span class="text-bold">{{ title }}</span>
+					<br />
+					<span>{{ message }}</span>
+				</div>
+			</q-card-section>
+
+			<q-card-actions align="right" class="bg-white text-teal" v-if="onlycancel">
+				<q-btn label="ตกลง" flat color="grey-8" @click="onDialogCancel" />
+				<!-- <q-btn :label="textOk" :color="color" @click="onOKClick" /> -->
+			</q-card-actions>
+			<q-card-actions align="right" class="bg-white text-teal" v-else>
+				<q-btn label="ยกเลิก" flat color="grey-8" @click="onDialogCancel" />
+				<q-btn :label="textOk" :color="color" @click="onOKClick" />
+			</q-card-actions>
+		</q-card>
+	</q-dialog>
+</template>
+
+<script setup lang="ts">
+import { useDialogPluginComponent } from "quasar"
+
+const props = defineProps({
+	color: {
+		type: String,
+		default: "primary",
+	},
+	textOk: {
+		type: String,
+		default: "ตกลง",
+	},
+	title: {
+		type: String,
+		default: "หัวข้อ?",
+	},
+	message: {
+		type: String,
+		default: "ข้อความ",
+	},
+	icon: {
+		type: String,
+		default: "question_mark",
+	},
+	onlycancel: {
+		type: Boolean,
+		default: false,
+	},
+})
+
+defineEmits([
+	// REQUIRED; need to specify some events that your
+	// component will emit through useDialogPluginComponent()
+	...useDialogPluginComponent.emits,
+])
+
+const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } = useDialogPluginComponent()
+// dialogRef      - Vue ref to be applied to QDialog
+// onDialogHide   - Function to be used as handler for @hide on QDialog
+// onDialogOK     - Function to call to settle dialog with "ok" outcome
+//                    example: onDialogOK() - no payload
+//                    example: onDialogOK({ /*...*/ }) - with payload
+// onDialogCancel - Function to call to settle dialog with "cancel" outcome
+
+// this is part of our example (so not required)
+function onOKClick() {
+	// on OK, it is REQUIRED to
+	// call onDialogOK (with optional payload)
+	onDialogOK()
+	// or with payload: onDialogOK({ ... })
+	// ...and it will also hide the dialog automatically
+}
+</script>