plugin-ui-for-kzt 0.0.2 → 0.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "plugin-ui-for-kzt",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "description": "plugin-ui for kazaktelekom",
   "main": "dist/index.js",
   "types": "dist/types/index.d.ts",

package/src/components/Modal/Modal.vue

@@ -139,7 +139,7 @@ const getTypeModal = computed<{ img: any; nameClass: string }>(() => {
   background: #15b853;
 }
 
-.warning {
+.info {
   background: #f4a900;
 }
 

package/src/components/Toaster/README.md

@@ -24,18 +24,19 @@
 ## Использование
 
 ```vue
+
 <script setup>
-import { useToast } from "modal-plugin-nikitas/plugins/toasterPlugin";
+  import {useToast} from "../../plugins/toasterPlugin";
 
-const toast = useToast();
+  const toast = useToast();
 
-const showSuccessToast = () => {
-  toast?.success("Toast on top", {
-    position: "top-left",
-    duration: 4000,
-    pauseOnHover: false,
-  });
-};
+  const showSuccessToast = () => {
+    toast?.success("Toast on top", {
+      position: "top-left",
+      duration: 4000,
+      pauseOnHover: false,
+    });
+  };
 </script>
 ```
 

package/src/plugins/modalPlugin.ts

@@ -1,81 +1,82 @@
-import { createApp, h, getCurrentInstance } from "vue";
-import { useModalStore } from "../store/modal";
+import {createApp, h, getCurrentInstance} from "vue";
+import {useModalStore} from "../store/modal";
 import Modal from "../components/Modal/Modal.vue";
-import { watch } from "vue";
-import { IModalState } from "types";
+import {watch} from "vue";
+import {IModalState} from "types";
 
 export default {
-  install(app: any) {
-    const modalStore = useModalStore();
+    install(app: any) {
+        const modalStore = useModalStore();
 
-    // Добавление глобального метода $modal
-    app.config.globalProperties.$modal = {
-      open(name: string, options: IModalState) {
-        modalStore.openModal(name, options); // Открытие модалки через Pinia
-        console.log("Current modals:", modalStore.modals);
-      },
-      close(id: number) {
-        modalStore.closeModal(id); // Закрытие модалки через Pinia
-      },
-    };
+        // Добавление глобального метода $modal
+        app.config.globalProperties.$modal = {
+            open(name: string, options: IModalState) {
+                modalStore.openModal(name, options); // Открытие модалки через Pinia
+                console.log("Current modals:", modalStore.modals);
+            },
+            close(id: number) {
+                modalStore.closeModal(id); // Закрытие модалки через Pinia
+            },
+        };
 
-    // Найдем элемент с классом container
-    const modalContainer = document.createElement("div");
-    document.body.appendChild(modalContainer);
+        // Найдем элемент с классом container
+        const modalContainer = document.createElement("div");
+        document.body.appendChild(modalContainer);
 
-    // Реактивное обновление модалок через watch
-    watch(
-      () => modalStore.modals,
-      (newModals) => {
-        // Очищаем контейнер
-        modalContainer.innerHTML = "";
+        // Реактивное обновление модалок через watch
+        watch(
+            () => modalStore.modals,
+            (newModals) => {
+                // Очищаем контейнер
+                modalContainer.innerHTML = "";
 
-        // Добавляем модалки в DOM
-        newModals.forEach((modal) => {
-          modalContainer.dataset.modalId = String(modal.id);
+                // Добавляем модалки в DOM
+                newModals.forEach((modal) => {
+                    modalContainer.dataset.modalId = String(modal.id);
 
-          modalContainer.addEventListener("click", (event) => {
-            console.log(`Closing modal with id: ${modal.id}`);
-            modalStore.closeModal(modal.id);
-          });
-          modalContainer.setAttribute("name", modal.name);
-          modalContainer.classList.add("modal");
-          modalContainer.addEventListener("click", () => {
-            console.log("this click on background");
-            modalStore.closeModal(modal.id);
-          });
+                    modalContainer.addEventListener("click", (event) => {
+                        console.log(`Closing modal with id: ${modal.id}`);
+                        modalStore.closeModal(modal.id);
+                    });
+                    modalContainer.setAttribute("name", modal.name);
+                    modalContainer.classList.add("modal");
+                    modalContainer.addEventListener("click", () => {
+                        console.log("this click on background");
+                        modalStore.closeModal(modal.id);
+                        if (modalStore.modals.length === 1) modalContainer.classList.remove("modal")
+                    });
 
-          const modalApp = createApp({
-            render() {
-              return h(Modal, {
-                options: modal.options,
-                name: modal.name,
-                onClose: () => {
-                  modalContainer.classList.remove("modal");
-                  modalStore.closeModal(modal.id);
-                },
-              });
+                    const modalApp = createApp({
+                        render() {
+                            return h(Modal, {
+                                options: modal.options,
+                                name: modal.name,
+                                onClose: () => {
+                                    modalContainer.classList.remove("modal");
+                                    modalStore.closeModal(modal.id);
+                                },
+                            });
+                        },
+                    });
+                    modalApp.mount(modalContainer);
+                });
             },
-          });
-          modalApp.mount(modalContainer);
-        });
-      },
-      { deep: true }
-    );
-  },
+            {deep: true}
+        );
+    },
 };
 
 export function useModal() {
-  const instance = getCurrentInstance();
-  return instance?.appContext.config.globalProperties.$modal;
+    const instance = getCurrentInstance();
+    return instance?.appContext.config.globalProperties.$modal;
 }
 
 // Расширение глобального интерфейса для TypeScript
 declare module "@vue/runtime-core" {
-  interface ComponentCustomProperties {
-    $modal: {
-      open: (name: string, options?: Record<string, any>) => void;
-      close: (id: number) => void;
-    };
-  }
+    interface ComponentCustomProperties {
+        $modal: {
+            open: (name: string, options?: Record<string, any>) => void;
+            close: (id: number) => void;
+        };
+    }
 }