plugin-ui-for-kzt 0.0.2

package/src/components/Modal/README.md

@@ -0,0 +1,47 @@
+# 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/components/Spinner/README.md

@@ -0,0 +1,35 @@
+# Документация компонента 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

@@ -0,0 +1,59 @@
+<template>
+  <div v-if="show" class="spinner-overlay">
+    <div class="spinner" :style="spinnerStyle"></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineProps, 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

@@ -0,0 +1,69 @@
+# Документация компонента 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 "modal-plugin-nikitas/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

@@ -0,0 +1,235 @@
+<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

@@ -0,0 +1,45 @@
+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

@@ -0,0 +1,37 @@
+# Документация компонента 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

@@ -0,0 +1,96 @@
+<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

@@ -0,0 +1,5 @@
+<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

@@ -0,0 +1,7 @@
+<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

@@ -0,0 +1,7 @@
+<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

@@ -0,0 +1,6 @@
+<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

@@ -0,0 +1,7 @@
+<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>