plugin-ui-for-kzt 0.0.2

package/src/index.ts

@@ -0,0 +1,27 @@
+import { createPinia } from "pinia";
+import Modal from "./components/Modal/Modal.vue";
+import DataTable from "./components/DataTable/DataTable.vue";
+import Tooltip from "./components/Tooltip/Tooltip.vue";
+import Spinner from "./components/Spinner/Spinner.vue";
+import ModalPlugin, { useModal } from "./plugins/modalPlugin";
+import ToasterPlugin, { useToast } from "./plugins/toasterPlugin";
+
+const components = { Modal, DataTable, Tooltip, Spinner };
+
+export default {
+  install(app: any) {
+    if (!app._context.pinia) {
+      const pinia = createPinia();
+      app.use(pinia);
+    }
+
+    Object.entries(components).forEach(([name, component]) => {
+      app.component(name, component);
+    });
+
+    app.use(ModalPlugin);
+    app.use(ToasterPlugin);
+  },
+};
+
+export { Modal, DataTable, Tooltip, Spinner, useModal, useToast };

package/src/plugins/modalPlugin.ts

@@ -0,0 +1,81 @@
+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";
+
+export default {
+  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
+      },
+    };
+
+    // Найдем элемент с классом container
+    const modalContainer = document.createElement("div");
+    document.body.appendChild(modalContainer);
+
+    // Реактивное обновление модалок через watch
+    watch(
+      () => modalStore.modals,
+      (newModals) => {
+        // Очищаем контейнер
+        modalContainer.innerHTML = "";
+
+        // Добавляем модалки в 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);
+          });
+
+          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);
+        });
+      },
+      { deep: true }
+    );
+  },
+};
+
+export function useModal() {
+  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;
+    };
+  }
+}

package/src/plugins/toasterPlugin.ts

@@ -0,0 +1,179 @@
+import { createApp, h, ref, getCurrentInstance } from "vue";
+import Toaster from "../components/Toaster/Toaster.vue";
+
+interface ToastOptions {
+  position?: "top-left" | "top-right" | "bottom-left" | "bottom-right";
+  duration?: number;
+  dismissible?: boolean;
+  pauseOnHover?: boolean;
+}
+
+interface Toast {
+  id: number;
+  type: "success" | "error" | "info" | "warning";
+  message: string;
+  position: "top-left" | "top-right" | "bottom-left" | "bottom-right";
+  duration: number;
+  dismissible: boolean;
+  pauseOnHover: boolean;
+  height?: number;
+}
+
+interface ToastPosition {
+  toasts: Toast[];
+  totalHeight: number;
+}
+
+export default {
+  install(app: any) {
+    app.config.globalProperties.$toast = {
+      success: (message: string, options: ToastOptions = {}) =>
+        addToast("success", message, options),
+      error: (message: string, options: ToastOptions = {}) =>
+        addToast("error", message, options),
+      info: (message: string, options: ToastOptions = {}) =>
+        addToast("info", message, options),
+      warning: (message: string, options: ToastOptions = {}) =>
+        addToast("warning", message, options),
+    };
+    
+    const toasts = ref<Toast[]>([]);
+    const toastPositions = ref<Record<string, ToastPosition>>({
+      "top-right": { toasts: [], totalHeight: 0 },
+      "top-left": { toasts: [], totalHeight: 0 },
+      "bottom-right": { toasts: [], totalHeight: 0 },
+      "bottom-left": { toasts: [], totalHeight: 0 },
+    });
+
+    const calculatePosition = (toast: Toast, index: number): number => {
+      const position = toast.position;
+      const positionData = toastPositions.value[position];
+      const gap = 10;
+      let offset = 20;
+
+      for (let i = 0; i < index; i++) {
+        const prevToast = positionData.toasts[i];
+        offset += (prevToast.height || 0) + gap;
+      }
+
+      return offset;
+    };
+
+    const updateToastHeight = (id: number, height: number) => {
+      const toast = toasts.value.find((t) => t.id === id);
+      if (toast) {
+        toast.height = height;
+        const position = toast.position;
+        const positionData = toastPositions.value[position];
+        positionData.totalHeight = positionData.toasts.reduce(
+          (total, t) => total + (t.height || 0) + 10,
+          20
+        );
+      }
+    };
+
+    const addToast = (
+      type: "success" | "error" | "info" | "warning",
+      message: string,
+      options: ToastOptions = {}
+    ) => {
+      const id = Date.now();
+      const position = options.position || "top-right";
+      const duration = options.duration || 5000;
+      const dismissible =
+        options.dismissible !== undefined ? options.dismissible : true;
+      const pauseOnHover =
+        options.pauseOnHover !== undefined ? options.pauseOnHover : true;
+
+      const toastData: Toast = {
+        id,
+        type,
+        message,
+        position,
+        duration,
+        dismissible,
+        pauseOnHover,
+      };
+
+      toasts.value = [...toasts.value, toastData];
+      toastPositions.value[position].toasts.push(toastData);
+    };
+
+    const removeToast = (id: number) => {
+      const toast = toasts.value.find((t) => t.id === id);
+      if (toast) {
+        const position = toast.position;
+        toastPositions.value[position].toasts = toastPositions.value[
+          position
+        ].toasts.filter((t) => t.id !== id);
+
+        toastPositions.value[position].totalHeight = toastPositions.value[
+          position
+        ].toasts.reduce((total, t) => total + (t.height || 0) + 10, 20);
+      }
+      toasts.value = toasts.value.filter((t) => t.id !== id);
+    };
+
+    const createContainer = (position: string) => {
+      const container = document.createElement("div");
+      container.classList.add("toast-container", `toast--${position}`);
+      document.body.appendChild(container);
+      return container;
+    };
+
+    const topRightContainer = createContainer("top-right");
+    const bottomRightContainer = createContainer("bottom-right");
+    const topLeftContainer = createContainer("top-left");
+    const bottomLeftContainer = createContainer("bottom-left");
+
+    const createAppInstance = (position: string, container: HTMLElement) => {
+      createApp({
+        setup() {
+          return { toasts, toastPositions };
+        },
+        render() {
+          const positionToasts = toastPositions.value[position].toasts;
+
+          return positionToasts.map((toast, index) => {
+            const offset = calculatePosition(toast, index);
+
+            return h(Toaster, {
+              key: toast.id,
+              ...toast,
+              style: {
+                position: "fixed",
+                [position.includes("top") ? "top" : "bottom"]: `${offset}px`,
+                [position.includes("right") ? "right" : "left"]: "20px",
+                transition: "all 0.3s ease",
+              },
+              onDismiss: () => removeToast(toast.id),
+              onHeightUpdate: (height: number) =>
+                updateToastHeight(toast.id, height),
+            });
+          });
+        },
+      }).mount(container);
+    };
+
+    createAppInstance("top-right", topRightContainer);
+    createAppInstance("bottom-right", bottomRightContainer);
+    createAppInstance("top-left", topLeftContainer);
+    createAppInstance("bottom-left", bottomLeftContainer);
+  },
+};
+
+export function useToast() {
+  const instance = getCurrentInstance();
+  return instance?.appContext.config.globalProperties.$toast;
+}
+
+declare module "@vue/runtime-core" {
+  interface ComponentCustomProperties {
+    $toast: {
+      success: (message: string, options?: ToastOptions) => void;
+      error: (message: string, options?: ToastOptions) => void;
+      info: (message: string, options?: ToastOptions) => void;
+      warning: (message: string, options?: ToastOptions) => void;
+    };
+  }
+}

package/src/store/modal.ts

@@ -0,0 +1,22 @@
+import { defineStore } from 'pinia';
+import {IModalState} from "../types";
+
+export const useModalStore = defineStore('modal', {
+    state: () => ({
+        modals: [] as Array<{ id: number; name: string; options: IModalState }>,
+    }),
+    actions: {
+        openModal(name: string, options: IModalState) {
+            this.modals.push({
+                id: Date.now(),
+                name,
+                options,
+            });
+            console.log('Modal added:', this.modals);
+        },
+        closeModal(id: number) {
+            console.log('Modal removed:', this.modals);
+            this.modals = this.modals.filter((modal) => modal.id !== id);
+        },
+    },
+});

package/src/styles/index.scss

@@ -0,0 +1,3 @@
+body {
+  font-family: Arial, sans-serif;
+}

package/src/types/index.ts

@@ -0,0 +1,4 @@
+export interface IModalState{
+    title: string;
+    message: string;
+}

package/tsconfig.json

@@ -0,0 +1,31 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "jsx": "preserve",
+    "lib": [
+      "dom",
+      "esnext"
+    ],
+    "typeRoots": ["node_modules/@types"],  // Pinia and Vue will be auto-detected
+    "baseUrl": "./src",
+    "paths": {
+      "@/*": ["src/*"],
+    }
+  },
+  "include": [
+
+    "src/**/*",
+    "src/**/*.ts",
+    "src/**/*.vue",
+    "shims-vue.d.ts"
+  ],
+  "exclude": [
+    "node_modules",
+    "dist"
+  ]
+}

package/webpack.config.js

@@ -0,0 +1,56 @@
+const path = require('path');
+const {VueLoaderPlugin} = require('vue-loader');
+
+module.exports = {
+    entry: './src/index.ts',
+    mode: "none",
+    output: {
+        path: __dirname + "/dist",
+        filename: "index.js",
+        libraryTarget: "umd", // Universal Module Definition
+        library: "ModalPluginNikitas",
+        globalObject: "this"
+    },
+    // output: {
+    //     filename: 'index.js',
+    //     path: path.resolve(__dirname, 'dist'),
+    //     library: 'nikitaModal', //name for import to boot file
+    //     libraryTarget: 'umd',
+    //     umdNamedDefine: true,
+    // },
+    resolve: {
+        extensions: ['.js', '.ts', '.vue', '.json'],
+        alias: {
+            '@': path.resolve(__dirname, 'src'),
+            vue: 'vue/dist/vue.runtime.esm-bundler.js',
+        },
+    },
+
+    module: {
+        rules: [
+            {
+                test: /\.ts$/,
+                loader: 'ts-loader',
+                options: {
+                    appendTsSuffixTo: [/\.vue$/],
+                },
+            },
+            {
+                test: /\.vue$/,
+                loader: 'vue-loader',
+            },
+            {
+                test: /\.scss$/,
+                use: ['vue-style-loader', 'css-loader', 'sass-loader'],
+            },
+            {
+                test: /\.svg$/,
+                use: ["file-loader"],
+            }
+        ],
+    },
+    plugins: [new VueLoaderPlugin()],
+    externals: {
+        vue: 'vue', // Vue will not be bundled; it’s an external dependency
+    },
+};