first commit

src/components/dialog/OkDialog.vue

@@ -0,0 +1,92 @@
+<template>
+  <q-dialog ref="dialog">
+    <q-card :style="'width:' + props.width">
+      <q-card-section
+        v-if="props.dialogLabel"
+        class="text-h6 text-center"
+        :class="'text-' + props.labelColor"
+        >{{ props.dialogLabel }}</q-card-section
+      >
+      <q-card-section v-if="props.text" class="text-center" style="white-space: pre-line">{{
+        props.text
+      }}</q-card-section>
+      <q-card-actions align="right" class="text-primary">
+        <q-btn
+          v-if="props.buttonCancelLabel"
+          :flat="props.buttonCancelFlat"
+          :label="props.buttonCancelLabel"
+          v-close-popup
+        >
+        </q-btn>
+        <q-btn
+          v-if="props.buttonOkLabel"
+          :flat="props.buttonOkFlat"
+          :label="props.buttonOkLabel"
+          :color="props.buttonOkColor"
+          v-close-popup
+          @click="confirm"
+        >
+        </q-btn>
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const props = defineProps({
+  buttonOkLabel: {
+    type: String,
+    default: 'OK',
+  },
+  buttonOkColor: {
+    type: String,
+    default: '',
+  },
+  buttonOkFlat: {
+    type: Boolean,
+    default: true,
+  },
+  labelColor: {
+    type: String,
+    default: 'primary',
+  },
+  dialogLabel: {
+    type: String,
+    default: '',
+  },
+  text: {
+    type: String,
+    default: '',
+  },
+  buttonCancelLabel: {
+    type: String,
+    default: '',
+  },
+  buttonCancelFlat: {
+    type: Boolean,
+    default: true,
+  },
+  width: {
+    type: String,
+    default: '300px',
+  },
+});
+
+const emit = defineEmits(['update-confirm']);
+
+const dialog = ref();
+const localInput = ref();
+
+const open = (input?: unknown) => {
+  localInput.value = input;
+  dialog.value?.show();
+};
+
+const confirm = () => {
+  emit('update-confirm', localInput.value);
+};
+
+defineExpose({ open });
+</script>