plugin-ui-for-kzt 0.0.17 → 0.0.18

package/src/index.ts

@@ -1,9 +1,9 @@
 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 ModalPlugin from "./plugins/modalPlugin";
+import { useModal } from "./composables/useModal";
 import ToasterPlugin, { useToast } from "./plugins/toasterPlugin";
 import "./sprite"; // Импортируем иконки для генерации спрайта
 import "./styles/root.scss";
@@ -30,12 +30,20 @@ import BaseInputCurrency from "./components/BaseInputCurrency/BaseInputCurrency.
 import BaseSegmentedButtons from "./components/BaseSegmentedButtons/BaseSegmentedButtons.vue";
 import BaseChips from "./components/BaseChips/BaseChips.vue";
 import BaseSwiper from "./components/BaseSwiper/BaseSwiper.vue";
+import BaseModal from "./components/BaseModal/BaseModal.vue";
+import BaseUpload from "./components/BaseUpload/BaseUpload.vue";
+import BaseBadge from "./components/BaseBadge/BaseBadge.vue";
+import BaseTag from "./components/BaseTag/BaseTag.vue";
+import BaseBadgeGroup from "./components/BaseBadge/BaseBadgeGroup.vue";
 
-const components = { 
-  Modal, 
-  DataTable, 
-  Tooltip, 
-  Spinner, 
+const components = {
+  BaseModal,
+  BaseTag,
+  BaseBadge,
+  BaseBadgeGroup,
+  DataTable,
+  Tooltip,
+  Spinner,
   BaseIcon,
   BaseBreadCrumbs,
   BaseButton,
@@ -58,18 +66,19 @@ const components = {
   BasePagination,
   BaseSegmentedButtons,
   BaseChips,
-  BaseSwiper
+  BaseSwiper,
+  BaseUpload
 };
 
 // Функция для загрузки sprite.svg
 const loadSprite = () => {
   const possiblePaths = [
     "/sprite.svg",
-    "./sprite.svg", 
+    "./sprite.svg",
     "sprite.svg",
-    "/dist/sprite.svg"
+    "/dist/sprite.svg",
   ];
-  
+
   const tryLoadSprite = async (paths: string[]) => {
     for (const path of paths) {
       try {
@@ -89,7 +98,7 @@ const loadSprite = () => {
     }
     console.error("Не удалось загрузить SVG-спрайт ни с одного из путей");
   };
-  
+
   tryLoadSprite(possiblePaths);
 };
 
@@ -111,12 +120,15 @@ export default {
   },
 };
 
-export { 
-  Modal, 
-  DataTable, 
-  Tooltip, 
-  Spinner, 
-  useModal, 
+export {
+  BaseModal,
+  BaseBadgeGroup,
+  BaseBadge,
+  DataTable,
+  BaseTag,
+  Tooltip,
+  Spinner,
+  useModal,
   useToast,
   BaseIcon,
   BaseBreadCrumbs,
@@ -140,5 +152,6 @@ export {
   BasePagination,
   BaseSegmentedButtons,
   BaseChips,
-  BaseSwiper
+  BaseSwiper,
+  BaseUpload
 };

package/src/plugins/modalPlugin.ts

@@ -1,89 +1,105 @@
-import {createApp, h, getCurrentInstance} from "vue";
-import {useModalStore} from "../store/modal";
-import Modal from "../components/Modal/Modal.vue";
-import {watch} from "vue";
-import {IModalState, IModalType} from "types";
+import { createApp, h, markRaw, provide } from 'vue';
+import { useModalStore } from '../store/modal';
+import BaseModal from '../components/BaseModal/BaseModal.vue';
+import { watch } from 'vue';
+import type { ICoreModalProps, ModalComponent } from '../types/modal';
 
-export default {
-    install(app: any) {
-        const modalStore = useModalStore();
+interface ModalInstance {
+  id: string;
+  isOpen: boolean;
+  props: ICoreModalProps;
+  app?: ReturnType<typeof createApp>;
+  component?: ModalComponent;
+}
 
-        // Добавление глобального метода $modal
-        app.config.globalProperties.$modal = {
-            open(name: IModalType, options: IModalState) {
-                modalStore.openModal(name, options); // Открытие модалки через Pinia
-            },
-            close(id: number) {
-                modalStore.closeModal(id); // Закрытие модалки через Pinia
-            },
-        };
+export default {
+  install(app: any) {
+    console.log('Installing ModalPlugin...');
+    const modalStore = useModalStore();
+    const modalContainer = document.createElement('div');
+    modalContainer.classList.add('modal-container');
+    document.body.appendChild(modalContainer);
 
-        // Найдем элемент с классом container
-        const modalContainer = document.createElement("div");
-        document.body.appendChild(modalContainer);
+    const $modal = {
+      open(id: string, props: ICoreModalProps = {}, component?: ModalComponent) {
+        modalStore.openModal(id, props, component ? markRaw(component) : undefined);
+      },
+      close(id: string) {
+        modalStore.closeModal(id);
+      },
+    };
 
-        // Реактивное обновление модалок через watch
-        watch(
-            () => modalStore.modals,
-            (newModals) => {
-                // Очищаем контейнер
-                modalContainer.innerHTML = "";
-                // Обновляем data-атрибут и класс
-                if (newModals.length > 0) {
-                    modalContainer.classList.add("modal");
-                } else {
-                    modalContainer.classList.remove("modal");
-                }
+    app.config.globalProperties.$modal = $modal;
+    app.provide('$modal', $modal);
 
-                // Добавляем модалки в DOM
-                newModals.forEach((modal) => {
-                    modalContainer.dataset.modalId = String(modal.id);
-                    modalContainer.setAttribute("name", modal.name);
+    const activeModals: ModalInstance[] = [];
 
-                    const modalApp = createApp({
-                        render() {
-                            return h(Modal, {
-                                options: modal.options,
-                                name: modal.name,
-                                onClose: () => {
-                                    modalStore.closeModal(modal.id);
-                                },
-                            });
-                        },
-                    });
+    watch(
+      () => modalStore.modals,
+      (newModals) => {
+        const modalIds = newModals.map((modal) => modal.id);
+        activeModals.forEach((modal, index) => {
+          if (!modalIds.includes(modal.id) || !modal.isOpen) {
+            modal.app?.unmount();
+            activeModals.splice(index, 1);
+          }
+        });
 
-                    modalApp.mount(modalContainer);
+        newModals.forEach((modal) => {
+          let existingModal = activeModals.find((m) => m.id === modal.id);
+          if (!existingModal && modal.isOpen) {
+            const modalApp = createApp({
+              setup() {
+                provide('$modal', $modal);
+                return () => h(BaseModal, {
+                  onClose: () => modalStore.closeModal(modal.id),
                 });
-            },
-            {deep: true}
-        );
-        // ✅ Добавляем ОДИН обработчик клика по фону
-        modalContainer.addEventListener("click", (event) => {
+              },
+            });
+            modalApp.mount(modalContainer);
+            activeModals.push({
+              id: modal.id,
+              isOpen: modal.isOpen,
+              props: modal.props ?? { isOpen: modal.isOpen },
+              app: modalApp,
+              component: modal.component,
+            });
+          } else if (existingModal) {
+            existingModal.isOpen = modal.isOpen;
+            existingModal.props = modal.props ?? { isOpen: modal.isOpen };
+            existingModal.component = modal.component;
+          }
+        });
 
-            if (modalStore.modals.length > 0) {
-                const lastModal = modalStore.modals[modalStore.modals.length - 1];
-                modalStore.closeModal(lastModal.id);
+        modalContainer.classList.toggle('has-modals', activeModals.some((m) => m.isOpen));
+      },
+      { immediate: true, deep: true }
+    );
 
-                // Удаляем класс, если это была последняя модалка
-                if (modalStore.modals.length <= 1) {
-                    modalContainer.classList.remove("modal");
-                }
-            }
-        });
-    },
-};
+    const handleOverlayClick = (event: MouseEvent) => {
+      const topModal = activeModals.find(
+        (modal) => modal.isOpen && modal.id === modalStore.modals[modalStore.modals.length - 1]?.id
+      );
+      if (topModal && event.target === modalContainer && topModal.props.closable) {
+        modalStore.closeModal(topModal.id);
+      }
+    };
 
-export function useModal() {
-    const instance = getCurrentInstance();
-    return instance?.appContext.config.globalProperties.$modal;
-}
+    modalContainer.addEventListener('click', handleOverlayClick);
 
-// Расширение глобального интерфейса для TypeScript
-declare module "@vue/runtime-core" {
-    interface ComponentCustomProperties {
-        $modal: {
-            open: (name: IModalType, options?: IModalState) => void;
-            close: (id: number) => void;
-        };
+    const cleanup = () => {
+      activeModals.forEach((modal) => modal.app?.unmount());
+      modalContainer.removeEventListener('click', handleOverlayClick);
+      document.body.removeChild(modalContainer);
+    };
+
+    if (app.unmount) {
+      const originalUnmount = app.unmount;
+      app.unmount = function () {
+        cleanup();
+        originalUnmount.call(app);
+      };
     }
-}
+    app._container?.addEventListener('beforeunload', cleanup);
+  },
+};

package/src/store/modal.ts

@@ -1,20 +1,43 @@
 import { defineStore } from 'pinia';
-import {IModalState} from "../types";
+import type { ICoreModalProps, ModalComponent } from '../types/modal';
 
 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,
-            });
-        },
-        closeModal(id: number) {
-            this.modals = this.modals.filter((modal) => modal.id !== id);
-        },
+  state: () => ({
+    modals: [] as { id: string; isOpen: boolean; props?: ICoreModalProps; component?: ModalComponent }[],
+  }),
+  actions: {
+    openModal(id: string, props: ICoreModalProps = {}, component?: ModalComponent) {
+      const existingModal = this.modals.find(modal => modal.id === id);
+      if (!existingModal) {
+        this.modals.push({ id, isOpen: true, props, component });
+      } else {
+        existingModal.isOpen = true;
+        existingModal.props = props;
+        existingModal.component = component;
+      }
     },
-});
+    closeModal(id: string) {
+      const modalIndex = this.modals.findIndex(modal => modal.id === id);
+      if (modalIndex !== -1) {
+        this.modals[modalIndex].isOpen = false;
+        setTimeout(() => {
+          this.modals = this.modals.filter(modal => modal.id !== id);
+        }, 300); // Синхронизация с анимацией
+      }
+    },
+    toggleModal(id: string, props: ICoreModalProps = {}, component?: ModalComponent) {
+      const modal = this.modals.find(modal => modal.id === id);
+      if (modal) {
+        this.closeModal(id);
+      } else {
+        this.openModal(id, props, component);
+      }
+    },
+  },
+  getters: {
+    getModalState: (state) => (id: string) => {
+      const modal = state.modals.find(modal => modal.id === id);
+      return modal ? { isOpen: modal.isOpen, props: modal.props } : { isOpen: false, props: {} };
+    },
+  },
+});

package/src/styles/root.scss

@@ -144,6 +144,7 @@
     --font-weight-semibold: 600;
     --corner-radius-3xs: 3px;
     --corner-radius-xxs: 4px;
+    --corner-radius-2xs: 6px;
     --corner-radius-xs: 8px;
     --corner-radius-s: 10px;
     --corner-radius-m: 12px;

package/src/types/badge.d.ts

@@ -0,0 +1,19 @@
+import type { ICoreColor, ICoreSize } from './utils';
+
+type IIconName = 'arrow-right' | 'arrow-up';
+
+interface IBaseBadgeProps {
+    hasDot?: boolean;
+    closable?: boolean;
+    arrowUpIcon?: boolean;
+    arrowRightIcon?: boolean;
+}
+
+interface IBaseBadgeGroupProps {
+    arrowRightIcon?: boolean;
+    badgePosition?: 'left' | 'right'
+}
+
+export type ICoreBadgeGroupProps = ICoreSize & ICoreColor & IBaseBadgeGroupProps;
+
+export type ICoreBadgeProps = ICoreSize & ICoreColor & IBaseBadgeProps;

package/src/types/modal.d.ts

@@ -0,0 +1,8 @@
+import type { Component } from 'vue';
+
+export interface ICoreModalProps {
+  closable?: boolean;
+  [key: string]: any;
+}
+
+export type ModalComponent = Component;

package/src/types/tag.d.ts

@@ -0,0 +1,14 @@
+import type { ICoreColor, ICoreSize } from './utils';
+
+type TColorTag = ICoreColor['color']['primary'] | ICoreColor['color']['secondary'];
+
+interface IBaseTagProps {
+    text: string;
+    closable?: boolean;
+    color?: TColorTag;
+    isHasAddTag?: boolean,
+    inputText?: string;
+    addingTag?: boolean;
+}
+
+export type ICoreTagProps = ICoreSize & IBaseTagProps;

package/src/types/uploadedFile.d.ts

@@ -0,0 +1,13 @@
+export interface UploadedFile {
+    name: string;
+    size: number;
+    file: File;
+}
+
+export interface IpropsUpload {
+    acceptedFormats: string[]; // Фильтр по типу файлов (например, "image/*" для изображений)
+    multiple?: boolean; // Разрешить множественный выбор файлов
+    maxFileSize?: number; // Максимальный размер файла в байтах
+    onUpload?: (files: UploadedFile[]) => void; // Callback при загрузке файлов
+    onError?: (error: string) => void; // Callback при ошибке загрузки
+}

package/src/types/utils.d.ts

@@ -2,7 +2,7 @@ export type Nullable<T> = T | null;
 
 export type TCoreSize = 'large' | 'medium' | 'small' | 'extra-small' | 'custom';
 
-export type TCoreColor = string | 'primary' | 'secondary' | 'tertiary-gray' | 'tertiary-blue' | 'quaternary-gray' | 'quaternary-blue' | 'link-blue' | 'link-critical' | 'link-gray' | 'custom';
+export type TCoreColor = string | 'primary' | 'secondary' | 'tertiary-gray' | 'tertiary-blue' | 'quaternary-gray' | 'quaternary-blue' | 'link-blue' | 'link-critical' | 'link-gray' | 'gray' | 'error' | 'warning' | 'success' | 'custom';
 export type TCoreInteractiveTag = 'link' | 'button' | 'span' | 'div' | 'a';
 
 export interface ICoreSize {

package/dist/types/index.d.ts

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

package/src/components/Modal/Modal.vue

@@ -1,149 +0,0 @@
-<template>
-  <div class="modal-container" @click.stop>
-    <div
-        class="modal-container-header"
-        :class="{
-        'modal-container-header-show-all': showMore,
-        [getTypeModal.nameClass]: getTypeModal.nameClass.length,
-      }"
-    >
-      <div class="modal-container-header-title">
-        <component :is="getTypeModal.img"/>
-        <div>{{ options.title }}</div>
-      </div>
-      <div
-          class="modal-container-header-show-more"
-          @click="showMore = !showMore"
-      >
-        {{ showMore ? "Скрыть" : "Смотреть больше" }}
-      </div>
-    </div>
-    <CloseIcon class="modal-button-close" @click="onClose"/>
-    <div v-if="showMore" class="modal-container-subtitle">
-      Описание: <br/>
-      {{ options.message }}
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import {ref, computed} 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: IModalState
-  name: IModalType;
-  onClose: () => void;
-}
-
-const props = defineProps<IProps>();
-const showMore = ref<boolean>(false);
-
-const getTypeModal = computed<{ img: any; nameClass: string }>(() => {
-  switch (props.name) {
-    case "error":
-      return {img: ErrorIcon, nameClass: "error"};
-    case "success":
-      return {img: SuccessIcon, nameClass: "success"};
-    case "warning":
-      return {img: WarningIcon, nameClass: "warning"};
-    case "info":
-      return {img: InfoIcon, nameClass: "info"};
-    default:
-      return {img: WarningIcon, nameClass: "info"};
-  }
-});
-</script>
-<style lang="scss">
-.modal {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background: rgba(0, 0, 0, 0.2);
-  z-index: 9999;
-}
-</style>
-
-<style lang="scss" scoped>
-.modal {
-
-  &-button-close {
-    width: 12px;
-    height: 12px;
-    position: absolute;
-    top: 20px;
-    right: 20px;
-    cursor: pointer;
-  }
-
-  &-container {
-    position: relative;
-    font-family: "Roboto Condensed", serif;
-    font-optical-sizing: auto;
-
-    background: white;
-    border-radius: 16px;
-    max-width: 540px;
-    width: 100%;
-
-    &-header {
-      padding: 20px;
-      border-radius: 12px;
-      font-size: 20px;
-      font-weight: 400;
-      line-height: 24px;
-
-      &-show-all {
-        border-radius: 12px 12px 0 0;
-      }
-
-      &-title {
-        color: white;
-        display: flex;
-        align-items: start;
-        gap: 20px;
-      }
-
-      &-show-more {
-        color: #f5c9c3;
-        text-align: right;
-        font-size: 16px;
-        cursor: pointer;
-      }
-    }
-
-    &-subtitle {
-      padding: 20px;
-      font-size: 18px;
-      font-weight: 400;
-      line-height: 24px;
-    }
-  }
-}
-
-.error {
-  background: #ee5542;
-}
-
-.success {
-  background: #15b853;
-}
-
-.warning {
-  background: #f4a900;
-}
-
-.info {
-  background: #0085cf;
-}
-</style>

package/src/components/Modal/README.md

@@ -1,47 +0,0 @@
-# Modal Window Plugin
-
-Этот плагин для модальных окон позволяет отображать пользователю различные статусы проекта: **success**, **info**, **warning** и **error**.
-
-## Описание
-
-Модальное окно используется для информирования пользователя о статусах или событиях в проекте. В зависимости от переданного параметра `name`, модальное окно автоматически изменяет свой тип и стиль.
-
-## Вызов модального окна
-
-Модальное окно можно открыть и закрыть с помощью следующих команд:
-
-- **Открыть модальное окно:** `$modal.open`
-- **Закрыть модальное окно:** `$modal.close`
-
-## Параметры
-
-При вызове модального окна необходимо передать два параметра:
-
-1. **name** (`string`)
-    - Принимает любое строковое значение.
-    - **Особенность:** В плагине реализован слушатель для параметра `name`, который меняет тип модального окна в зависимости от переданного значения (см. ниже описание типов).
-
-2. **options** (`{ title: string; message: string; }`)
-    - **title:** Заголовок модального окна.
-    - **message:** Сообщение или основной текст, который будет отображён внутри модального окна.
-
-## Типы модальных окон
-
-В зависимости от значения параметра `name` модальное окно может принимать следующие типы:
-
-- **success**8
-- **info**
-- **warning**
-- **error**
-
-## Пример использования
-
-```javascript
-// Пример открытия модального окна с типом "success"
-$modal.open('success', { 
-  title: 'Операция выполнена успешно', 
-  message: 'Ваш запрос был успешно обработан.' 
-});
-
-// Пример закрытия модального окна
-$modal.close();

package/src/types/index.ts

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