plugin-ui-for-kzt 0.0.23 → 0.0.25

package/src/index.ts

@@ -1,10 +1,8 @@
 import { createPinia } from "pinia";
-import DataTable from "./components/DataTable/DataTable.vue";
-import Tooltip from "./components/Tooltip/Tooltip.vue";
-import Spinner from "./components/Spinner/Spinner.vue";
 import ModalPlugin from "./plugins/modalPlugin";
 import { useModal } from "./composables/useModal";
-import ToasterPlugin, { useToast } from "./plugins/toasterPlugin";
+import { useToast } from "./composables/useToast";
+import ToastPlugin from "./plugins/toastPlugin";
 import "./sprite"; // Импортируем иконки для генерации спрайта
 import "./styles/root.scss";
 import BaseIcon from "./components/BaseIcon/BaseIcon.vue";
@@ -36,16 +34,17 @@ import BaseBadge from "./components/BaseBadge/BaseBadge.vue";
 import BaseTag from "./components/BaseTag/BaseTag.vue";
 import BaseBadgeGroup from "./components/BaseBadge/BaseBadgeGroup.vue";
 import BaseField from "./components/BaseField/BaseField.vue";
+import BaseToast from "./components/BaseToast/BaseToast.vue";
+import BasePageLoader from "./components/BasePageLoader/BasePageLoader.vue";
 import BaseTabs from "./components/BaseTabs/BaseTabs.vue";
+import BaseTable from "./components/BaseTable/BaseTable.vue";
+import BaseDefaultPages from "./components/BaseDefaultPages/BaseDefaultPages.vue";
 
 const components = {
   BaseModal,
   BaseTag,
   BaseBadge,
   BaseBadgeGroup,
-  DataTable,
-  Tooltip,
-  Spinner,
   BaseIcon,
   BaseBreadCrumbs,
   BaseButton,
@@ -71,7 +70,11 @@ const components = {
   BaseSwiper,
   BaseUpload,
   BaseField,
-  BaseTabs
+  BaseToast,
+  BasePageLoader,
+  BaseTabs,
+  BaseTable,
+  BaseDefaultPages
 };
 
 // Функция для загрузки sprite.svg
@@ -120,7 +123,7 @@ export default {
     loadSprite();
 
     app.use(ModalPlugin);
-    app.use(ToasterPlugin);
+    app.use(ToastPlugin);
   },
 };
 
@@ -128,10 +131,7 @@ export {
   BaseModal,
   BaseBadgeGroup,
   BaseBadge,
-  DataTable,
   BaseTag,
-  Tooltip,
-  Spinner,
   useModal,
   useToast,
   BaseIcon,
@@ -159,5 +159,9 @@ export {
   BaseSwiper,
   BaseUpload,
   BaseField,
-  BaseTabs
+  BaseToast,
+  BasePageLoader,
+  BaseTabs,
+  BaseTable,
+  BaseDefaultPages
 };

package/src/plugins/toastPlugin.ts

@@ -0,0 +1,100 @@
+import { createApp, h, provide, defineComponent } from 'vue';
+import { useToastStore } from '../store/toast';
+import BaseToast from '../components/BaseToast/BaseToast.vue';
+import { watch, ref } from 'vue';
+import type { IBaseToastProps } from '../types/toast';
+
+export default {
+  install(app: any) {
+    console.log('Installing ToastPlugin...');
+    const toastStore = useToastStore();
+
+    let toastContainer = document.querySelector('.toast-container');
+    if (!toastContainer) {
+      toastContainer = document.createElement('div');
+      toastContainer.classList.add('toast-container');
+      document.body.appendChild(toastContainer);
+    }
+
+    const $toast = {
+      show(id: string, props: IBaseToastProps) {
+        toastStore.addToast(id, props);
+      },
+      hide(id: string) {
+        toastStore.removeToast(id);
+      },
+      clear() {
+        toastStore.clearToasts();
+      },
+    };
+
+    app.config.globalProperties.$toast = $toast;
+    app.provide('$toast', $toast);
+
+    const ToastContainerComponent = defineComponent({
+      setup() {
+        provide('$toast', $toast);
+        const toasts = ref(toastStore.toasts);
+
+        watch(
+          () => toastStore.toasts,
+          (newToasts) => {
+            toasts.value = newToasts;
+          },
+          { deep: true }
+        );
+
+        return () =>
+          h(
+            'div',
+            { class: 'toast-container-inner', 'data-has-toasts': toasts.value.some(t => t.isOpen) },
+            h(
+              'transition-group',
+              { name: 'toast', tag: 'div' },
+              toasts.value.map(toast =>
+                h(
+                  BaseToast,
+                  {
+                    key: toast.id,
+                    ...toast.props,
+                    isOpen: toast.isOpen,
+                    onClose: () => toastStore.removeToast(toast.id),
+                    onPrimaryAction: () => toastStore.removeToast(toast.id),
+                    onSecondaryAction: () => toastStore.removeToast(toast.id),
+                  }
+                )
+              )
+            )
+          );
+      },
+    });
+
+    let toastApp = (toastContainer as any).__vue_app__;
+    if (!toastApp) {
+      toastApp = createApp(ToastContainerComponent);
+      toastApp.mount(toastContainer);
+      (toastContainer as any).__vue_app__ = toastApp;
+    }
+
+    window.addEventListener('popstate', () => {
+      toastStore.clearToasts();
+    });
+
+    const cleanup = () => {
+      toastApp.unmount();
+      window.removeEventListener('popstate', () => toastStore.clearToasts());
+      if (document.body.contains(toastContainer)) {
+        document.body.removeChild(toastContainer);
+      }
+    };
+
+    if (app.unmount) {
+      const originalUnmount = app.unmount;
+      app.unmount = function () {
+        cleanup();
+        originalUnmount.call(app);
+      };
+    }
+    app._container?.addEventListener('beforeunload', cleanup);
+  },
+};

package/src/store/toast.ts

@@ -0,0 +1,59 @@
+import { defineStore } from 'pinia';
+import type { IBaseToastProps, IToast } from '../types/toast';
+
+export const useToastStore = defineStore('toast', {
+  state: () => ({
+    toasts: [] as IToast[],
+  }),
+  actions: {
+    addToast(id: string, props: IBaseToastProps) {
+      const messageLength = (props.title + (props.description || '')).length;
+      const duration = props.duration ?? (messageLength > 80 ? 10000 : 5000);
+
+      const existingToastIndex = this.toasts.findIndex(t => t.id === id);
+      if (existingToastIndex !== -1) {
+        const existingToast = this.toasts[existingToastIndex];
+        if (existingToast.timeoutId) {
+          clearTimeout(existingToast.timeoutId);
+        }
+        this.toasts.splice(existingToastIndex, 1);
+      }
+
+      const maxToasts = window.innerWidth <= 768 ? 3 : 4;
+      if (this.toasts.length >= maxToasts) {
+        const oldestToast = this.toasts.shift();
+        if (oldestToast?.timeoutId) {
+          clearTimeout(oldestToast.timeoutId);
+        }
+      }
+
+      const toast: IToast = { id, props, isOpen: true };
+      this.toasts.push(toast);
+
+      toast.timeoutId = window.setTimeout(() => {
+        this.removeToast(id);
+      }, duration);
+    },
+    removeToast(id: string) {
+      const index = this.toasts.findIndex(t => t.id === id);
+      if (index !== -1) {
+        this.toasts[index].isOpen = false;
+        setTimeout(() => {
+          const toast = this.toasts[index];
+          if (toast?.timeoutId) {
+            clearTimeout(toast.timeoutId);
+          }
+          this.toasts.splice(index, 1);
+        }, 300);
+      }
+    },
+    clearToasts() {
+      this.toasts.forEach(toast => {
+        if (toast.timeoutId) {
+          clearTimeout(toast.timeoutId);
+        }
+      });
+      this.toasts = [];
+    },
+  },
+});

package/src/styles/root.scss

@@ -1,4 +1,6 @@
 @import "./index.scss";
+@import "./toast.scss";
+
 :root {
     /* Primary colors */
     --primary-blue-deep: #0085BE;

package/src/styles/toast.scss

@@ -0,0 +1,36 @@
+.toast-container {
+    position: fixed;
+    top: 20px;
+    right: 20px;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    z-index: 10000; // Высокий z-index для отображения поверх контента
+    max-width: 620px;
+  
+    @media (max-width: 768px) {
+      right: 8px;
+      left: 8px;
+    }
+  
+    .toast-container-inner {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+  
+      &[data-has-toasts='true'] {
+        display: flex;
+      }
+    }
+  }
+  
+  .toast-enter-active,
+  .toast-leave-active {
+    transition: all 0.3s ease;
+  }
+  
+  .toast-enter-from,
+  .toast-leave-to {
+    transform: translateY(100%);
+    opacity: 0;
+  }

package/src/types/default-pages.d.ts

@@ -0,0 +1,6 @@
+export interface IDefaultPagesProps {
+    title: string;
+    description: string;
+    buttonText: string;
+    type: 'tech-work' | '404'
+}

package/src/types/loading-page.d.ts

@@ -0,0 +1,12 @@
+import type { ICoreSize } from './utils';
+
+type TIconType = 'success' | 'error' | 'warning';
+
+export interface IPageLoaderProps {
+    loading: boolean;
+    iconType?: TIconType;
+    message?: string;
+    modal?: boolean;
+}
+
+export type TPageLoaderProps = IPageLoaderProps & ICoreSize;

package/src/types/pagination.d.ts

@@ -8,6 +8,7 @@ export interface IPaginationProps {
   totalPages?: number;
   maxDisplayedPages?: number;
   color?: PaginationColor;
+  [key: string]: unknown;
 }
 
 export type TPaginationProps = IPaginationProps & ICoreSize;

package/src/types/table.d.ts

@@ -0,0 +1,33 @@
+import type { Component } from 'vue'
+import type { TPaginationProps } from './pagination'
+
+export type Row = Record<string, unknown>
+
+export interface Column {
+    key: string
+    label?: string
+    sortable?: boolean
+    icons?: Component[]
+    dropdownVisible?: boolean
+}
+
+export interface Action {
+    key: string
+    icon: string | Component
+    label?: string
+    handler: (row: Row) => void
+}
+
+export interface BaseTableProps {
+    columns: Column[]
+    data: Row[]
+    rowKey?: keyof Row | ((row: Row) => unknown)
+    showRowSelection?: boolean
+    checkboxTitle?: string
+    showActions?: boolean
+    actions?: Action[]
+    pagination?: TPaginationProps
+    subTable?: {
+        slotName: string
+    }
+}

package/src/types/toast.d.ts

@@ -0,0 +1,25 @@
+export interface IBaseToastProps {
+    title: string;
+    type?: 'info' | 'success' | 'warning' | 'error';
+    withBackground?: boolean;
+    description?: string;
+    showIcon?: boolean;
+    closable?: boolean;
+    primaryActionText?: string;
+    secondaryActionText?: string;
+    isOpen?: boolean;
+    duration?: number;
+  }
+  
+  export interface IToast {
+    id: string;
+    props: IBaseToastProps;
+    isOpen: boolean;
+    timeoutId?: number;
+  }
+  
+  export interface IToastApi {
+    show(id: string, props: IBaseToastProps): void;
+    hide(id: string): void;
+    clear(): void;
+  }

package/webpack.config.js

@@ -86,6 +86,18 @@ module.exports = (env, argv) => {
             },
           ],
         },
+        {
+          test: /\.(png|jpe?g|gif|webp)$/i,
+          type: "asset",
+          parser: {
+            dataUrlCondition: {
+              maxSize: 8 * 1024,
+            },
+          },
+          generator: {
+            filename: "assets/[hash][ext][query]",
+          },
+        },
       ],
     },
     plugins: [new VueLoaderPlugin(), new SpriteLoaderPlugin()],

package/dist/components/Spinner/Spinner.vue.d.ts

@@ -1,20 +0,0 @@
-declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    show: {
-        type: BooleanConstructor;
-    };
-    size: {};
-    color: {};
-    thickness: {};
-}>, (_ctx: any, _cache: any) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-    [key: string]: any;
-}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    show: {
-        type: BooleanConstructor;
-    };
-    size: {};
-    color: {};
-    thickness: {};
-}>> & Readonly<{}>, {
-    show: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-export default _default;

package/dist/components/Toaster/Toaster.vue.d.ts

@@ -1,80 +0,0 @@
-declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    message: {
-        default: string;
-    };
-    type: {
-        default: string;
-    };
-    position: {
-        default: string;
-    };
-    dismissible: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    onDismiss: {
-        type: FunctionConstructor;
-        default: () => void;
-    };
-    onClick: {
-        type: FunctionConstructor;
-        default: () => void;
-    };
-    pauseOnHover: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    duration: {
-        default: number;
-    };
-    onHeightUpdate: {
-        type: FunctionConstructor;
-        default: () => void;
-    };
-}>, (_ctx: any, _cache: any) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-    [key: string]: any;
-}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    message: {
-        default: string;
-    };
-    type: {
-        default: string;
-    };
-    position: {
-        default: string;
-    };
-    dismissible: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    onDismiss: {
-        type: FunctionConstructor;
-        default: () => void;
-    };
-    onClick: {
-        type: FunctionConstructor;
-        default: () => void;
-    };
-    pauseOnHover: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    duration: {
-        default: number;
-    };
-    onHeightUpdate: {
-        type: FunctionConstructor;
-        default: () => void;
-    };
-}>> & Readonly<{}>, {
-    onClick: Function;
-    type: string;
-    message: string;
-    position: string;
-    duration: number;
-    dismissible: boolean;
-    pauseOnHover: boolean;
-    onDismiss: Function;
-    onHeightUpdate: Function;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-export default _default;

package/dist/components/Toaster/timer.d.ts

@@ -1,12 +0,0 @@
-declare class Timer {
-    private timerId;
-    private start;
-    private remaining;
-    private callback;
-    constructor(callback: () => void, delay: number);
-    pause(): void;
-    resume(): void;
-    clear(): void;
-    reset(delay: number): void;
-}
-export default Timer;

package/dist/plugins/toasterPlugin.d.ts

@@ -1,26 +0,0 @@
-interface ToastOptions {
-    position?: "top-left" | "top-right" | "bottom-left" | "bottom-right";
-    duration?: number;
-    dismissible?: boolean;
-    pauseOnHover?: boolean;
-}
-declare const _default: {
-    install(app: any): void;
-};
-export default _default;
-export declare function useToast(): {
-    success: (message: string, options?: ToastOptions) => void;
-    error: (message: string, options?: ToastOptions) => void;
-    info: (message: string, options?: ToastOptions) => void;
-    warning: (message: string, options?: ToastOptions) => void;
-} | undefined;
-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/components/DataTable/DataTable.vue

@@ -1,169 +0,0 @@
-<template>
-  <div class="table-container">
-    <div class="search-container">
-      <input
-          type="text"
-          placeholder="Поиск..."
-          :value="searchQuery"
-          @input="handleSearchInput"
-      />
-      <p v-if="!searchExists">Ничего не найдено</p>
-    </div>
-
-    <table v-if="searchExists">
-      <thead>
-      <tr>
-        <th v-for="column in props.columns" :key="column.key">
-          {{ column.label }}
-        </th>
-      </tr>
-      </thead>
-      <tbody>
-      <tr v-for="(row, rowIndex) in paginatedRows" :key="rowIndex">
-        <td v-for="column in props.columns" :key="column.key">
-          {{ row[column.key] }}
-        </td>
-      </tr>
-      </tbody>
-    </table>
-
-    <div v-if="searchExists" class="pagination">
-      <button @click="goToPreviousPage" :disabled="currentPage === 1">
-        Предыдущая
-      </button>
-      <span>Страница {{ currentPage }} из {{ totalPages }}</span>
-      <button @click="goToNextPage" :disabled="currentPage === totalPages">
-        Следующая
-      </button>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import {ref, computed} from 'vue';
-
-interface TableColumn {
-  key: string;
-  label: string;
-}
-
-interface TableProps {
-  columns: TableColumn[];
-  rows: Record<string, any>[];
-  pageSize?: number;
-}
-
-const props = defineProps<TableProps>();
-
-// states
-const searchQuery = ref<string>('');
-const currentPage = ref<number>(1);
-const rowsPerPage = ref<number>(props.pageSize ?? 5);
-
-// computed properties
-const filteredRows = computed(() => {
-  if (!searchQuery.value) {
-    return props.rows;
-  }
-  const query = searchQuery.value.toLowerCase();
-  return props.rows.filter((row: string | any) =>
-    Object.values(row).some((val) =>
-      String(val).toLowerCase().includes(query)
-    )
-  );
-});
-const searchExists = computed(() => filteredRows.value.length > 0);
-const totalPages = computed(() =>
-    Math.ceil(filteredRows.value.length / rowsPerPage.value)
-);
-const startIndex = computed(() => (currentPage.value - 1) * rowsPerPage.value);
-const endIndex = computed(() => currentPage.value * rowsPerPage.value);
-const paginatedRows = computed(() =>
-    filteredRows.value.slice(startIndex.value, endIndex.value)
-);
-
-// functions
-const goToPreviousPage = (): void => {
-  if (currentPage.value > 1) {
-    currentPage.value--;
-  }
-}
-const goToNextPage = (): void => {
-  if (currentPage.value < totalPages.value) {
-    currentPage.value++;
-  }
-}
-const handleSearchInput = (event: Event): void => {
-  searchQuery.value = (event.target as HTMLInputElement).value;
-  currentPage.value = 1;
-}
-</script>
-
-<style scoped lang="scss">
-.table-container {
-  max-width: 100%;
-  overflow-x: auto;
-  padding: 1rem;
-
-  .search-container {
-    margin-bottom: 1rem;
-
-    input {
-      padding: 0.5rem;
-      border: 1px solid #ccc;
-      border-radius: 4px;
-
-      &:focus {
-        outline: none;
-        border-color: #90caf9;
-      }
-    }
-  }
-
-  table {
-    width: 100%;
-    border-collapse: collapse;
-    margin-bottom: 1rem;
-
-    thead {
-      background-color: #e3f2fd;
-    }
-
-    th, td {
-      padding: 0.75rem 1rem;
-      border: 1px solid #ccc;
-      text-align: left;
-    }
-  }
-
-  .pagination {
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-
-    button {
-      background-color: #90caf9;
-      color: #fff;
-      border: none;
-      padding: 0.5rem 1rem;
-      margin: 0 0.25rem;
-      border-radius: 4px;
-      cursor: pointer;
-      transition: background-color 0.2s ease;
-
-      &:hover:not(:disabled) {
-        background-color: #64b5f6;
-      }
-
-      &:disabled {
-        background-color: #ccc;
-        cursor: not-allowed;
-      }
-    }
-
-    span {
-      margin: 0 0.5rem;
-    }
-  }
-}
-</style>