Модальное окно и копирование кода в буфер

src/App.vue

@@ -1,11 +1,16 @@
 <script setup>
-import { ref, onMounted  } from 'vue';
+import { ref, onMounted } from 'vue';
 import izitoast from "./izitoast";
 import { useEventListener } from '@vueuse/core';
+import MyDialog from './components/MyDialog.vue';
+import copyToclipboard from './copyToclipboard';
+
 
 const numbers = ref([]); // Инициализируем массив с пустыми строками
 const clickCount = ref(1); // Счетчик нажатий
 const listOfTrips = ref([])
+const isModalVisible = ref(false)
+let finallyText = '';
 
 onMounted(()=>{
   
@@ -48,7 +53,6 @@ function setNumber(item) {
 }
 
 function saveResult() {
-  let finallyText = '';
   for (const item of listOfTrips.value) {
     finallyText += `navigate_wait(${item.x}, ${item.y})\n`;
   }
@@ -57,6 +61,7 @@ function saveResult() {
     title: 'Информация',
     message: "Посмотри в консоли путь дрона. Ctrl + Shift + I или F12"
   });
+  isModalVisible.value = true
 }
 
 function cleanResult() {
@@ -107,6 +112,27 @@ useEventListener('keydown', handleKeydown);
     <button
     @click="cleanResult"
   >Очистить</button>
+
+  <MyDialog v-show="isModalVisible" @close="isModalVisible = false">
+    <template #header>
+      <strong v-if="listOfTrips.length">Код готов!</strong>
+      <strong v-else>Код не готов!</strong>
+    </template>
+    <template #body>
+      <p v-if="listOfTrips.length">Это тело модального окна.
+            {{ finallyText }}
+
+      </p>
+      <p v-else>Выстройте маршрут перед сохранением кода.
+      </p>
+    </template>
+    <template #footer>
+      <button type="button"  class="btn-green" @click="isModalVisible = false">Скачать код</button>
+      <button type="button"  class="btn-green" @click="copyToclipboard(finallyText)">Скопировать код</button>
+      <button type="button"  class="btn-green" @click="isModalVisible = false">ОК</button>
+    </template>
+  </MyDialog>
+
 </template>
 
 <style>

src/components/MyDialog.vue

@@ -0,0 +1,107 @@
+<template>
+  <transition name="modal-fade">
+    <div class="modal-backdrop" @click="closeModal">
+      <div class="modal" @click.stop>
+        <header class="modal-header">
+          <slot name="header">
+            <strong>Заголовок по умолчанию</strong>
+          </slot>
+          <button type="button" class="btn-close" @click="closeModal" aria-label="Закрыть модальное окно">
+            ×
+          </button>
+        </header>
+        <section class="modal-body">
+          <slot name="body">Тело по умолчанию</slot>
+        </section>
+        <footer class="modal-footer">
+          <slot name="footer">
+            <button type="button" class="btn-green" @click="closeModal">Закрыть</button>
+          </slot>
+        </footer>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script setup>
+const emit = defineEmits(['close'])
+function closeModal() {
+    emit('close');
+}
+</script>
+
+<style>
+.modal-backdrop {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background-color: rgba(0, 0, 0, 0.3);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.modal {
+  background: #FFFFFF;
+  box-shadow: 2px 2px 20px 1px;
+  overflow-x: auto;
+  display: flex;
+  flex-direction: column;
+  max-width: 500px;
+  width: 90%;
+  border-radius: 5px;
+}
+
+.modal-header,
+.modal-footer {
+  padding: 10px;
+  display: flex;
+}
+
+.modal-header {
+  border-bottom: 1px solid #eeeeee;
+  color: #4AAE9B;
+  justify-content: space-between;
+}
+
+.modal-footer {
+  border-top: 1px solid #eeeeee;
+  justify-content: flex-end;
+}
+
+.modal-body {
+  position: relative;
+  padding: 20px 10px;
+}
+
+.btn-close {
+  border: none;
+  font-size: 20px;
+  padding: 0;
+  cursor: pointer;
+  font-weight: bold;
+  color: #4AAE9B;
+  background: transparent;
+}
+
+.btn-green {
+  color: white;
+  background: #4AAE9B;
+  border: 1px solid #4AAE9B;
+  border-radius: 2px;
+  padding: 5px;
+  margin: 0 5px;
+}
+
+.modal-fade-enter,
+.modal-fade-leave-active {
+  opacity: 0;
+}
+
+.modal-fade-enter-active,
+.modal-fade-leave-active {
+  transition: opacity 0.5s ease;
+}
+</style>   

src/copyToclipboard.js

@@ -0,0 +1,17 @@
+import copy from 'copy-to-clipboard';
+import iziToast from '@/iziToast.js';
+
+function copyToclipboard(text) {
+    try {
+        copy(text)
+    } catch (error) {
+        console.error("Ошибка при копировании текста: ", error);
+        iziToast.error({
+            title: 'Ошибка',
+            message: "Ошибка при копировании текста. Подробности смотри в консоли",
+        });
+        return;
+    }
+}
+
+export default copyToclipboard