plugin-ui-for-kzt 0.0.23 → 0.0.27

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>

package/src/components/DataTable/README.md

@@ -1,57 +0,0 @@
-# Документация компонента DataTable
-
-## Обзор
-Компонент `DataTable` предназначен для отображения табличных данных с поддержкой поиска и постраничной навигации. Он позволяет передавать список колонок и строк, а также управлять размером страницы.
-
-## Свойства (Props)
-
-- `columns` (массив объектов) – список колонок, каждая из которых содержит ключ `key` (для доступа к данным) и `label` (отображаемое название).
-- `rows` (массив объектов) – массив данных, где каждый объект представляет строку таблицы.
-- `pageSize` (число, необязательно) – количество строк, отображаемых на одной странице. По умолчанию `5`.
-
-## Вычисляемые свойства (Computed)
-
-- `filteredRows` – список строк, отфильтрованный по поисковому запросу.
-- `searchExists` – определяет, есть ли в таблице совпадающие результаты поиска.
-- `totalPages` – вычисляет общее количество страниц на основе размера страницы и количества строк.
-- `startIndex` – индекс начала текущей страницы.
-- `endIndex` – индекс конца текущей страницы.
-- `paginatedRows` – список строк, отображаемых на текущей странице.
-
-## Методы
-
-### `goToPreviousPage()`
-Переходит на предыдущую страницу, если это возможно.
-
-### `goToNextPage()`
-Переходит на следующую страницу, если это возможно.
-
-### `handleSearchInput(event: Event)`
-Обновляет поисковый запрос при вводе текста в поле поиска и сбрасывает текущую страницу на первую.
-
-## Использование
-
-```vue
-<DataTable
-  :columns="[
-    { key: 'name', label: 'Имя' },
-    { key: 'age', label: 'Возраст' },
-    { key: 'email', label: 'Email' }
-  ]"
-  :rows="[
-    { name: 'Иван', age: 25, email: 'ivan@example.com' },
-    { name: 'Мария', age: 30, email: 'maria@example.com' },
-    { name: 'Алексей', age: 28, email: 'alex@example.com' }
-  ]"
-  :pageSize="2"
-/>
-```
-
-## Функциональность
-
-- Поддержка поиска по всем значениям строк.
-- Автоматическая фильтрация результатов.
-- Пагинация с кнопками "Предыдущая" и "Следующая".
-- Отображение сообщения, если совпадений не найдено.
-
-

package/src/components/Spinner/README.md

@@ -1,35 +0,0 @@
-# Документация компонента Spinner
-
-## Обзор
-Компонент `Spinner` используется для отображения индикатора загрузки. Он поддерживает кастомизацию размеров, цвета и толщины границ.
-
-## Свойства (Props)
-
-- `show` (булево) – определяет, отображать ли спиннер. Обязательное свойство.
-- `size` (строка, необязательно) – задаёт размер спиннера (ширину и высоту). Например, `'40px'`.
-- `color` (строка, необязательно) – определяет основной цвет границы спиннера.
-- `thickness` (строка, необязательно) – задаёт толщину границы спиннера.
-
-## Вычисляемые свойства (Computed)
-
-### `spinnerStyle`
-Возвращает объект со стилями для спиннера:
-
-- `width` и `height` – задают размер спиннера.
-- `borderWidth` – регулирует толщину границы.
-- `borderStyle` – устанавливает стиль границы (всегда `solid`).
-- `borderColor` – определяет цвет границы, оставляя прозрачные части.
-- `borderRadius` – устанавливает форму круга.
-
-## Использование
-
-```vue
-<Spinner :show="true" size="50px" color="#3498db" thickness="5px" />
-```
-
-## Функциональность
-
-- Отображает или скрывает индикатор загрузки в зависимости от `show`.
-- Позволяет изменять размер, цвет и толщину границы.
-- Использует `computed` для динамического применения стилей.
-

package/src/components/Spinner/Spinner.vue

@@ -1,60 +0,0 @@
-<template>
-  <div v-if="show" class="spinner-overlay">
-    <div class="spinner" :style="spinnerStyle"></div>
-  </div>
-</template>
-
-<script setup lang="ts">
-
-import {computed} from "vue";
-
-interface SpinnerProps {
-  show: boolean            
-  size?: string            
-  color?: string           
-  thickness?: string      
-}
-
-const props = defineProps<SpinnerProps>()
-
-// computed properties
-const spinnerStyle = computed(() => ({
-  width: props.size,
-  height: props.size,
-  borderWidth: props.thickness,
-  borderStyle: 'solid',
-  borderColor: `${props.color} transparent transparent transparent`,
-  borderRadius: '50%'
-}))
-</script>
-
-<style scoped lang="scss">
-.spinner-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(255, 255, 255, 0.7); 
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 9999; 
-}
-
-.spinner {
-  border: var(--spinner-thickness, 4px) solid transparent;
-  border-top: var(--spinner-thickness, 4px) solid var(--spinner-color, #4285f4);
-  border-radius: 50%;
-  animation: spin 1s linear infinite;
-}
-
-@keyframes spin {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-</style>

package/src/components/Toaster/README.md

@@ -1,70 +0,0 @@
-# Документация компонента Toaster
-
-## Обзор
-Компонент `Toaster` предназначен для отображения уведомлений на экране. Он поддерживает разные типы сообщений, настраиваемые позиции и функцию автоматического скрытия.
-
-## Свойства (Props)
-
-- `message` (строка) – текст сообщения, отображаемый в уведомлении.
-- `type` (success, error, info, warning) – определяет тип сообщения, который влияет на его внешний вид. По умолчанию `success`.
-- `position` (top-left, top-right, bottom-left, bottom-right) – задаёт расположение уведомления на экране. По умолчанию `top-right`.
-- `dismissible` (булево) – определяет, можно ли закрыть уведомление вручную. По умолчанию `true`.
-- `onDismiss` (функция) – вызывается при закрытии уведомления.
-- `onClick` (функция, необязательная) – вызывается при клике на уведомление.
-- `pauseOnHover` (булево) – при наведении мыши приостанавливает таймер скрытия. По умолчанию `true`.
-- `duration` (число) – продолжительность показа в миллисекундах. Если `0`, то уведомление не исчезает автоматически. По умолчанию `5000`.
-- `onHeightUpdate` (функция) – вызывается при изменении высоты уведомления.
-
-## События
-
-- `onDismiss` – срабатывает при закрытии уведомления.
-- `onClick` – срабатывает при клике на уведомление.
-- `onHeightUpdate` – вызывается при изменении высоты уведомления.
-
-## Использование
-
-```vue
-
-<script setup>
-  import {useToast} from "../../plugins/toasterPlugin";
-
-  const toast = useToast();
-
-  const showSuccessToast = () => {
-    toast?.success("Toast on top", {
-      position: "top-left",
-      duration: 4000,
-      pauseOnHover: false,
-    });
-  };
-</script>
-```
-
-## Стилизация
-Компонент применяет разные стили в зависимости от переданных свойств `type` и `position`.
-
-- `.toast__item--success` – зелёный фон для успешных сообщений.
-- `.toast__item--error` – красный фон для ошибок.
-- `.toast__item--info` – синий фон для информационных сообщений.
-- `.toast__item--warning` – оранжевый фон для предупреждений.
-- `.toast__item--top-left`, `.toast__item--top-right`, `.toast__item--bottom-left`, `.toast__item--bottom-right` – стили позиционирования.
-
-### Анимации
-- `.toast--fade-in-down` – анимация появления для уведомлений сверху.
-- `.toast--fade-in-up` – анимация появления для уведомлений снизу.
-- `.toast--fade-out` – анимация исчезновения.
-
-## Жизненный цикл
-- **onMounted** – запускает таймер автоудаления и регистрирует наблюдателя за изменением размера.
-- **onUnmounted** – очищает таймер и отключает наблюдателя за изменением размера.
-
-## Методы
-
-### `startTimer()`
-Запускает таймер автоматического скрытия, если `duration` больше 0.
-
-### `toggleTimer(state: boolean)`
-Приостанавливает или возобновляет таймер при наведении курсора.
-
-### `dismissToast()`
-Закрывает уведомление вручную и вызывает `onDismiss`.

package/src/components/Toaster/Toaster.vue

@@ -1,235 +0,0 @@
-<template>
-  <Transition
-    :enter-active-class="transition.enter"
-    :leave-active-class="transition.leave"
-  >
-    <div
-      v-if="isActive"
-      ref="toastRef"
-      class="toast__item"
-      :class="[`toast__item--${type}`, `toast__item--${position}`]"
-      @mouseover="toggleTimer(true)"
-      @mouseleave="toggleTimer(false)"
-    >
-      <div class="v-toast__icon"></div>
-      <p class="v-toast__text" v-html="message"></p>
-      <button v-if="dismissible" class="toast__close" @click="dismissToast">
-        ×
-      </button>
-    </div>
-  </Transition>
-</template>
-
-<script setup lang="ts">
-import { ref, computed, onMounted, onUnmounted, nextTick } from "vue";
-import Timer from "./timer";
-
-interface IProps {
-  message: string;
-  type: "success" | "error" | "info" | "warning";
-  position: "top-left" | "top-right" | "bottom-left" | "bottom-right";
-  dismissible: boolean;
-  onDismiss: () => void;
-  onClick?: () => void;
-  pauseOnHover: boolean;
-  duration: number;
-  onHeightUpdate?: (height: number) => void;
-}
-
-const props = withDefaults(defineProps<IProps>(), {
-  message: "",
-  type: "success",
-  position: "top-right",
-  dismissible: true,
-  pauseOnHover: true,
-  duration: 5000,
-  onDismiss: () => {},
-  onClick: () => {},
-  onHeightUpdate: () => {},
-});
-
-const isActive = ref<boolean>(true);
-const toastRef = ref<HTMLElement | null>(null);
-let timer: Timer | null = null;
-let resizeObserver: ResizeObserver | null = null;
-
-const transition = computed(() => {
-  return ["top-left", "top-right"].includes(props.position)
-    ? { enter: "toast--fade-in-down", leave: "toast--fade-out" }
-    : { enter: "toast--fade-in-up", leave: "toast--fade-out" };
-});
-
-const updateHeight = async () => {
-  await nextTick();
-  if (toastRef.value) {
-    const height = toastRef.value.offsetHeight;
-    props.onHeightUpdate(height);
-  }
-};
-
-onMounted(async () => {
-  startTimer();
-  await updateHeight();
-
-  if (toastRef.value) {
-    resizeObserver = new ResizeObserver(async () => {
-      await updateHeight();
-    });
-    resizeObserver.observe(toastRef.value);
-  }
-});
-
-onUnmounted(() => {
-  if (timer) {
-    timer.clear();
-  }
-  if (resizeObserver) {
-    resizeObserver.disconnect();
-  }
-});
-
-const startTimer = () => {
-  if (props.duration > 0) {
-    timer = new Timer(() => {
-      dismissToast();
-    }, props.duration);
-    timer.resume();
-  }
-};
-
-const toggleTimer = (state: boolean) => {
-  if (props.pauseOnHover && timer) {
-    state ? timer.pause() : timer.resume();
-  }
-};
-
-const dismissToast = () => {
-  if (isActive.value) {
-    isActive.value = false;
-    if (timer) {
-      timer.clear();
-    }
-    props.onDismiss();
-  }
-};
-
-// const whenClicked = () => {
-//   props.onClick();
-// };
-</script>
-
-<style scoped lang="scss">
-.toast__item--top-left {
-  top: 10px;
-  left: 10px;
-  align-items: flex-start;
-}
-
-.toast__item--top-right {
-  top: 10px;
-  right: 10px;
-  align-items: flex-end;
-}
-
-.toast__item--bottom-left {
-  bottom: 10px;
-  left: 10px;
-  align-items: flex-start;
-}
-
-.toast__item--bottom-right {
-  bottom: 10px;
-  right: 10px;
-  align-items: flex-end;
-}
-
-.toast__item {
-  width: 300px;
-  padding: 15px;
-  position: fixed;
-  z-index: 9999;
-  border-radius: 8px;
-  display: flex;
-  align-items: center;
-  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
-  background-color: white;
-  font-weight: 500;
-  color: #333;
-  pointer-events: auto;
-  transition: all 0.3s ease-in-out;
-}
-
-.toast__item--success {
-  background-color: #4caf50;
-  color: #fff;
-}
-
-.toast__item--error {
-  background-color: #f44336;
-  color: #fff;
-}
-
-.toast__item--info {
-  background-color: #2196f3;
-  color: #fff;
-}
-
-.toast__item--warning {
-  background-color: #ff9800;
-  color: #fff;
-}
-
-.toast__close {
-  position: absolute;
-  top: 10px;
-  right: 10px;
-  background: none;
-  border: none;
-  font-size: 18px;
-  cursor: pointer;
-  color: #fff;
-}
-
-.toast--fade-in-down {
-  animation: fadeInDown 0.3s ease-out;
-}
-
-.toast--fade-in-up {
-  animation: fadeInUp 0.3s ease-out;
-}
-
-.toast--fade-out {
-  animation: fadeOut 0.3s ease-in forwards;
-}
-
-@keyframes fadeInDown {
-  from {
-    opacity: 0;
-    transform: translateY(-10px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@keyframes fadeInUp {
-  from {
-    opacity: 0;
-    transform: translateY(10px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@keyframes fadeOut {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-  }
-}
-</style>

package/src/components/Toaster/timer.ts

@@ -1,45 +0,0 @@
-class Timer {
-  private timerId: number | null = null;
-  private start: number = 0;
-  private remaining: number;
-  private callback: () => void;
-
-  constructor(callback: () => void, delay: number) {
-    this.callback = callback;
-    this.remaining = delay;
-    this.resume();
-  }
-
-  pause(): void {
-    if (this.timerId !== null) {
-      window.clearTimeout(this.timerId);
-      this.remaining -= Date.now() - this.start;
-      this.timerId = null;
-    }
-  }
-
-  resume(): void {
-    if (this.timerId === null && this.remaining > 0) {
-      this.start = Date.now();
-      this.timerId = window.setTimeout(() => {
-        this.callback();
-        this.timerId = null;
-      }, this.remaining);
-    }
-  }
-
-  clear(): void {
-    if (this.timerId !== null) {
-      window.clearTimeout(this.timerId);
-      this.timerId = null;
-    }
-  }
-
-  reset(delay: number): void {
-    this.clear();
-    this.remaining = delay;
-    this.resume();
-  }
-}
-
-export default Timer;