plugin-ui-for-kzt 0.0.4 → 0.0.6

package/package.json

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

package/src/components/Modal/Modal.vue

@@ -7,6 +7,7 @@
         [getTypeModal.nameClass]: getTypeModal.nameClass !== '',
       }"
     >
+      {{getTypeModal}}
       <div class="modal-container-header-title">
         <component :is="getTypeModal.img" />
         <div>{{ options.title }}</div>
@@ -27,26 +28,25 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from "vue";
+import {ref, computed, Component} from "vue";
 import CloseIcon from "../icons/CloseIcon.vue";
 import ErrorIcon from "../icons/ErrorIcon.vue";
 import SuccessIcon from "../icons/SuccessIcon.vue";
 import WarningIcon from "../icons/WarningIcon.vue";
 import InfoIcon from "../icons/InfoIcon.vue";
+import {IModalState, IModalType} from "../../types/index";
 
 interface IProps {
-  options: {
-    title: string;
-    message: string;
-  };
-  name: string;
+  options:IModalState
+  name: IModalType;
   onClose: () => void;
 }
 
 const props = defineProps<IProps>();
 const showMore = ref<boolean>(false);
 
-const getTypeModal = computed<{ img: any; nameClass: string }>(() => {
+const getTypeModal = computed<{ img: Component; nameClass: string }>(() => {
+  console.log(props.name);
   switch (props.name) {
     case "error":
       return { img: ErrorIcon, nameClass: "error" };
@@ -59,13 +59,13 @@ const getTypeModal = computed<{ img: any; nameClass: string }>(() => {
     default:
       return {
         img: SuccessIcon,
-        nameClass: "",
+        nameClass: "info",
       };
   }
 });
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .modal {
   position: fixed;
   top: 0;
@@ -139,7 +139,7 @@ const getTypeModal = computed<{ img: any; nameClass: string }>(() => {
   background: #15b853;
 }
 
-.info {
+.infoModal {
   background: #f4a900;
 }
 

package/src/plugins/modalPlugin.ts

@@ -2,7 +2,7 @@ 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 {IModalState, IModalType} from "types";
 
 export default {
     install(app: any) {
@@ -10,7 +10,7 @@ export default {
 
         // Добавление глобального метода $modal
         app.config.globalProperties.$modal = {
-            open(name: string, options: IModalState) {
+            open(name: IModalType, options: IModalState) {
                 modalStore.openModal(name, options); // Открытие модалки через Pinia
                 console.log("Current modals:", modalStore.modals);
             },
@@ -36,15 +36,12 @@ export default {
 
                     modalContainer.addEventListener("click", (event) => {
                         console.log(`Closing modal with id: ${modal.id}`);
+                        console.log("this click on background", modalStore.modals.length);
                         modalStore.closeModal(modal.id);
+                        if (modalStore.modals.length === 1) modalContainer.classList.remove("modal")
                     });
                     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() {
@@ -75,7 +72,7 @@ export function useModal() {
 declare module "@vue/runtime-core" {
     interface ComponentCustomProperties {
         $modal: {
-            open: (name: string, options?: Record<string, any>) => void;
+            open: (name: IModalType, options?: IModalState) => void;
             close: (id: number) => void;
         };
     }

package/src/types/index.ts

@@ -1,4 +1,7 @@
 export interface IModalState{
     title: string;
     message: string;
-}
+}
+
+export type IModalType=  string | 'success' | 'error' | 'info' | 'warning';
+