plugin-ui-for-kzt 0.0.5 → 0.0.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "plugin-ui-for-kzt",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "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.nameClass}}
       <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" };
@@ -54,18 +54,18 @@ const getTypeModal = computed<{ img: any; nameClass: string }>(() => {
       return { img: SuccessIcon, nameClass: "success" };
     case "warning":
       return { img: WarningIcon, nameClass: "warning" };
-    case "infoModal":
-      return { img: InfoIcon, nameClass: "infoModal" };
+    case "info":
+      return { img: InfoIcon, nameClass: "info-modal" };
     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;
 }
 
-.infoModal {
+.info-modal {
   background: #f4a900;
 }
 

package/src/plugins/modalPlugin.ts

@@ -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);
+                        if (modalStore.modals.length === 1) modalContainer.classList.remove("modal")
                         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 === 0) modalContainer.classList.remove("modal")
-                    });
 
                     const modalApp = createApp({
                         render() {

package/src/types/index.ts

@@ -3,5 +3,5 @@ export interface IModalState{
     message: string;
 }
 
-export type IModalType=  string | 'success' | 'error' | 'infoModal' | 'warning';
+export type IModalType=  string | 'success' | 'error' | 'info' | 'warning';