plugin-ui-for-kzt 0.0.3 → 0.0.5

package/README.md

@@ -1,83 +1,119 @@
-# plugin-ui-kzt
+# plugin-ui-for-kzt
 
 A custom UI plugin for Vue 3 + TypeScript projects, with Quasar integration support.
 
 ---
 
-## Installation
+## 🚀 Installation
 
-### Prerequisites
-- Node.js version **23.x** or higher
+### ✅ Prerequisites
+
+- Node.js **v23.x** or higher
+- Vue 3 project (with or without Quasar)
+
+### 📦 Install the Plugin
 
-### Install the Plugin
 ```bash
 npm install plugin-ui-for-kzt
 ```
 
 ---
 
-## Quasar Project Setup
+## ⚙️ Quasar Integration Setup
+
+If you're using **Quasar**, follow these additional steps to properly integrate the plugin:
+
+### 1. Create a Boot File
+
+Create a new file named `plugin-ui-for-kzt.ts` in your project's `boot/` directory.
 
-If you are using **Quasar**, follow these additional steps:
+```ts
+// src/boot/plugin-ui-for-kzt.ts
+import { boot } from 'quasar/wrappers'
+import PluginUIForKZT from 'plugin-ui-for-kzt'
 
-1. **Create a Boot File:**
-    - Create a new file named `plugin-ui-for-kzt.ts` inside the `boot/` folder.
+export default boot(({ app }) => {
+  app.use(PluginUIForKZT)
+})
+```
+
+### 2. Register the Boot File in `quasar.config.js`
+
+```js
+boot: [
+  'plugin-ui-for-kzt',
+  // other boot files
+]
+```
 
-2. **Register the Boot File:**
-    - In `quasar.config.js`, add `'plugin-ui-for-kzt'` to the `boot` array:
-   ```js
-   boot: [
-     'plugin-ui-kzt',
-     // other boot files
-   ]
-   ```
+### 3. (Optional) Import in `client-entry.js` if needed
 
-3. **Import in `client-entry.js`:**
-    - Import your boot file inside the `Promise.all` method:
-   ```js
-   import('boot/plugin-ui-for-kzt')
-   ```
+```js
+import('boot/plugin-ui-for-kzt')
+```
 
 ---
 
-## Publishing the Plugin to npm
+## 🔢 Plugin Versioning Rules
 
-Follow these steps to update and publish the plugin:
+The plugin version must follow the pattern: `X.Y.Z`, with a **maximum version value of 100**.  
+Examples of valid versions:
 
-1. **Update the Version:**
-    - Before publishing, **update the `version`** field in `package.json` (according to semantic versioning).
+- `version: "0.0.25"`
+- `version: "0.25.99"`
+- `version: "46.25.46"`
 
-2. **Push Changes to GitLab:**
-    - Commit and push all your changes to your GitLab repository.
+---
 
-3. **Login to npm:**
-   ```bash
-   npm login
-   ```
-    - Use the **npm credentials** stored in GitLab.
+## 🚀 Publishing the Plugin to npm
 
-4. **Publish the Plugin:**
-   ```bash
-   npm publish --access public
-   ```
+Follow these steps to update and publish a new version of the plugin:
 
-5. **Clear Cache (Recommended):**
-   ```bash
-   npm cache clean --force
-   ```
+### 1. Update the Version
 
-6. **Update Plugin in Your Project:**
-   ```bash
-   npm install plugin-ui-for-kzt@latest --force
-   ```
+Update the `version` field in your `package.json` file according to [Semantic Versioning](https://semver.org/).
 
-7. **Clean and Run Your Quasar Project:**
-   ```bash
-   quasar clean
-   quasar dev
-   ```
+### 2. Commit and Push to GitLab
 
----
+```bash
+git add .
+git commit -m "chore: bump version to x.x.x"
+git push
+```
+
+### 3. Log in to npm
+
+```bash
+npm login
+```
 
-✅ Done! Now your updated plugin will be installed and ready to use!
+> 💡 Use the **npm credentials** stored in your GitLab vault or settings.
+
+### 4. Publish the Package
+
+```bash
+npm publish --access public
+```
+
+### 5. (Optional) Clear npm Cache
+
+```bash
+npm cache clean --force
+```
+
+### 6. Update the Plugin in Your Project
+
+```bash
+npm install plugin-ui-for-kzt@latest --force
+```
+
+### 7. Restart Your Quasar Project
+
+```bash
+quasar clean
+quasar dev
+```
+
+---
 
+✅ **Done!** Your plugin is now published and integrated successfully into your Quasar project.

package/package.json

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

package/src/components/Modal/Modal.vue

@@ -54,8 +54,8 @@ const getTypeModal = computed<{ img: any; nameClass: string }>(() => {
       return { img: SuccessIcon, nameClass: "success" };
     case "warning":
       return { img: WarningIcon, nameClass: "warning" };
-    case "info":
-      return { img: InfoIcon, nameClass: "info" };
+    case "infoModal":
+      return { img: InfoIcon, nameClass: "infoModal" };
     default:
       return {
         img: SuccessIcon,
@@ -139,7 +139,7 @@ const getTypeModal = computed<{ img: any; nameClass: string }>(() => {
   background: #15b853;
 }
 
-.warning {
+.infoModal {
   background: #f4a900;
 }
 

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, IModalType} 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: IModalType, 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 === 0) 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: 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' | 'infoModal' | 'warning';
+