plugin-ui-for-kzt 0.0.23 → 0.0.25

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;

package/src/components/Tooltip/README.md

@@ -1,37 +0,0 @@
-# Документация компонента Tooltip
-
-## Обзор
-Компонент `Tooltip` используется для отображения всплывающих подсказок при наведении курсора на элемент. Позволяет настраивать положение и ширину подсказки.
-
-## Свойства (Props)
-
-- `content` (строка) – текст всплывающей подсказки. По умолчанию пустая строка.
-- `position` (строка, необязательно) – определяет расположение подсказки. Возможные значения: `top`, `bottom`, `left`, `right`. По умолчанию `top`.
-- `width` (строка, необязательно) – задаёт ширину подсказки. По умолчанию `200px`.
-
-## Состояния (States)
-
-- `isVisible` (булево) – управляет отображением подсказки.
-
-## Методы
-
-### `showTooltip()`
-Активирует отображение подсказки при наведении курсора.
-
-### `hideTooltip()`
-Скрывает подсказку при уходе курсора.
-
-## Использование
-
-```vue
-<Tooltip content="Подсказка" position="right" width="150px">
-  <button>Наведи курсор</button>
-</Tooltip>
-```
-
-## Функциональность
-
-- Отображает подсказку при наведении и скрывает при уходе курсора.
-- Позволяет изменять положение подсказки.
-- Настраивает ширину содержимого всплывающего окна.
-

package/src/components/Tooltip/Tooltip.vue

@@ -1,96 +0,0 @@
-<template>
-  <div
-    class="tooltip-container"
-    @mouseenter="showTooltip"
-    @mouseleave="hideTooltip"
-  >
-    <slot />
-
-    <div v-if="isVisible" class="tooltip" :class="props.position">
-      {{ props.content }}
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from "vue";
-
-interface TooltipProps {
-  content: string; 
-  position?: "top" | "bottom" | "left" | "right"; 
-  width?: string; 
-}
-
-const props = withDefaults(defineProps<TooltipProps>(), {
-  content: "",
-  position: "top",
-  width: "200px",
-});
-
-// states
-const isVisible = ref<boolean>(false);
-
-// functions
-const showTooltip = (): void => {
-  isVisible.value = true;
-}
-const hideTooltip = (): void => {
-  isVisible.value = false;
-}
-</script>
-
-<style scoped lang="scss">
-.tooltip-container {
-  display: inline-block;
-  position: relative;
-}
-
-.tooltip {
-  position: absolute;
-  padding: 8px 12px;
-  background-color: #333;
-  color: #fff;
-  border-radius: 4px;
-  font-size: 14px;
-  line-height: 1.2;
-  white-space: normal;
-  z-index: 999;
-  width: v-bind(width);
-  opacity: 0;
-  animation: fadeIn 0.2s forwards ease;
-}
-
-@keyframes fadeIn {
-  to {
-    opacity: 1;
-  }
-}
-
-.tooltip.top {
-  bottom: 100%;
-  left: 50%;
-  transform: translateX(-50%);
-  margin-bottom: 8px;
-}
-
-.tooltip.bottom {
-  top: 100%;
-  left: 50%;
-  transform: translateX(-50%);
-  margin-top: 8px;
-}
-
-.tooltip.left {
-  top: 50%;
-  right: 100%;
-  transform: translateY(-50%);
-  margin-right: 8px;
-}
-
-.tooltip.right {
-  top: 50%;
-  left: 100%;
-  transform: translateY(-50%);
-  margin-left: 8px;
-}
-</style>

package/src/components/icons/CloseIcon.vue

@@ -1,5 +0,0 @@
-<template>
-  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M15.7592 1.51746C16.0803 1.17049 16.0803 0.607198 15.7592 0.260228C15.3311 -0.0867426 14.796 -0.0867426 14.4749 0.260228L7.94649 6.74237L1.52508 0.260228C1.09699 -0.0867426 0.561873 -0.0867426 0.240803 0.260228C-0.0802676 0.607198 -0.0802676 1.17049 0.240803 1.51746L6.76923 7.9996L0.240803 14.4828C-0.0802676 14.8298 -0.0802676 15.392 0.240803 15.739C0.561873 16.087 1.09699 16.087 1.52508 15.739L7.94649 9.25683L14.4749 15.739C14.796 16.087 15.3311 16.087 15.7592 15.739C16.0803 15.392 16.0803 14.8298 15.7592 14.4828L9.23077 7.9996L15.7592 1.51746Z" fill="white"/>
-  </svg>
-</template>

package/src/components/icons/ErrorIcon.vue

@@ -1,7 +0,0 @@
-<template>
-  <svg width="45" height="40" viewBox="0 0 45 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M42.8186 36.4103L23.3834 2.5641C22.9908 1.88034 22.0092 1.88034 21.6166 2.5641L2.1814 36.4103C1.78877 37.094 2.27955 37.9487 3.06481 37.9487H41.9352C42.7205 37.9487 43.2112 37.094 42.8186 36.4103ZM25.1503 1.53846C23.9724 -0.512819 21.0276 -0.512822 19.8498 1.53846L0.414562 35.3846C-0.763329 37.4359 0.709031 40 3.06481 40H41.9352C44.291 40 45.7633 37.4359 44.5854 35.3846L25.1503 1.53846Z" fill="white"/>
-    <rect x="21.6213" y="10.2565" width="2.04017" height="17.4359" rx="1.02008" fill="white"/>
-    <ellipse cx="22.712" cy="32.3076" rx="1.53012" ry="1.53846" fill="white"/>
-  </svg>
-</template>

package/src/components/icons/InfoIcon.vue

@@ -1,7 +0,0 @@
-<template>
-  <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <circle cx="24" cy="24" r="22.5" stroke="white" stroke-width="3"/>
-    <rect x="22" y="18" width="4" height="20" rx="2" fill="white"/>
-    <circle cx="24" cy="12" r="2" fill="white"/>
-  </svg>
-</template>

package/src/components/icons/SuccessIcon.vue

@@ -1,6 +0,0 @@
-<template>
-  <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <circle cx="24" cy="24" r="22.5" stroke="white" stroke-width="3"/>
-    <path d="M35.04 14.4L19.86 33.6L12.96 24.8728" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
-  </svg>
-</template>

package/src/components/icons/WarningIcon.vue

@@ -1,7 +0,0 @@
-<template>
-  <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <circle cx="24" cy="24" r="22.5" stroke="white" stroke-width="3"/>
-    <path d="M20.6759 13.9425C20.3227 11.8821 21.9096 10 24 10C26.0904 10 27.6773 11.8821 27.3241 13.9425L24.668 29.4368C24.6122 29.7622 24.3301 30 24 30C23.6699 30 23.3878 29.7622 23.332 29.4368L20.6759 13.9425Z" fill="white"/>
-    <circle cx="24" cy="36" r="2" fill="white"/>
-  </svg>
-</template>