plugin-ui-for-kzt 0.0.23 → 0.0.27

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>

package/src/plugins/toasterPlugin.ts

@@ -1,179 +0,0 @@
-import { createApp, h, ref, getCurrentInstance } from "vue";
-import Toaster from "../components/Toaster/Toaster.vue";
-
-interface ToastOptions {
-  position?: "top-left" | "top-right" | "bottom-left" | "bottom-right";
-  duration?: number;
-  dismissible?: boolean;
-  pauseOnHover?: boolean;
-}
-
-interface Toast {
-  id: number;
-  type: "success" | "error" | "info" | "warning";
-  message: string;
-  position: "top-left" | "top-right" | "bottom-left" | "bottom-right";
-  duration: number;
-  dismissible: boolean;
-  pauseOnHover: boolean;
-  height?: number;
-}
-
-interface ToastPosition {
-  toasts: Toast[];
-  totalHeight: number;
-}
-
-export default {
-  install(app: any) {
-    app.config.globalProperties.$toast = {
-      success: (message: string, options: ToastOptions = {}) =>
-        addToast("success", message, options),
-      error: (message: string, options: ToastOptions = {}) =>
-        addToast("error", message, options),
-      info: (message: string, options: ToastOptions = {}) =>
-        addToast("info", message, options),
-      warning: (message: string, options: ToastOptions = {}) =>
-        addToast("warning", message, options),
-    };
-    
-    const toasts = ref<Toast[]>([]);
-    const toastPositions = ref<Record<string, ToastPosition>>({
-      "top-right": { toasts: [], totalHeight: 0 },
-      "top-left": { toasts: [], totalHeight: 0 },
-      "bottom-right": { toasts: [], totalHeight: 0 },
-      "bottom-left": { toasts: [], totalHeight: 0 },
-    });
-
-    const calculatePosition = (toast: Toast, index: number): number => {
-      const position = toast.position;
-      const positionData = toastPositions.value[position];
-      const gap = 10;
-      let offset = 20;
-
-      for (let i = 0; i < index; i++) {
-        const prevToast = positionData.toasts[i];
-        offset += (prevToast.height || 0) + gap;
-      }
-
-      return offset;
-    };
-
-    const updateToastHeight = (id: number, height: number) => {
-      const toast = toasts.value.find((t) => t.id === id);
-      if (toast) {
-        toast.height = height;
-        const position = toast.position;
-        const positionData = toastPositions.value[position];
-        positionData.totalHeight = positionData.toasts.reduce(
-          (total, t) => total + (t.height || 0) + 10,
-          20
-        );
-      }
-    };
-
-    const addToast = (
-      type: "success" | "error" | "info" | "warning",
-      message: string,
-      options: ToastOptions = {}
-    ) => {
-      const id = Date.now();
-      const position = options.position || "top-right";
-      const duration = options.duration || 5000;
-      const dismissible =
-        options.dismissible !== undefined ? options.dismissible : true;
-      const pauseOnHover =
-        options.pauseOnHover !== undefined ? options.pauseOnHover : true;
-
-      const toastData: Toast = {
-        id,
-        type,
-        message,
-        position,
-        duration,
-        dismissible,
-        pauseOnHover,
-      };
-
-      toasts.value = [...toasts.value, toastData];
-      toastPositions.value[position].toasts.push(toastData);
-    };
-
-    const removeToast = (id: number) => {
-      const toast = toasts.value.find((t) => t.id === id);
-      if (toast) {
-        const position = toast.position;
-        toastPositions.value[position].toasts = toastPositions.value[
-          position
-        ].toasts.filter((t) => t.id !== id);
-
-        toastPositions.value[position].totalHeight = toastPositions.value[
-          position
-        ].toasts.reduce((total, t) => total + (t.height || 0) + 10, 20);
-      }
-      toasts.value = toasts.value.filter((t) => t.id !== id);
-    };
-
-    const createContainer = (position: string) => {
-      const container = document.createElement("div");
-      container.classList.add("toast-container", `toast--${position}`);
-      document.body.appendChild(container);
-      return container;
-    };
-
-    const topRightContainer = createContainer("top-right");
-    const bottomRightContainer = createContainer("bottom-right");
-    const topLeftContainer = createContainer("top-left");
-    const bottomLeftContainer = createContainer("bottom-left");
-
-    const createAppInstance = (position: string, container: HTMLElement) => {
-      createApp({
-        setup() {
-          return { toasts, toastPositions };
-        },
-        render() {
-          const positionToasts = toastPositions.value[position].toasts;
-
-          return positionToasts.map((toast, index) => {
-            const offset = calculatePosition(toast, index);
-
-            return h(Toaster, {
-              key: toast.id,
-              ...toast,
-              style: {
-                position: "fixed",
-                [position.includes("top") ? "top" : "bottom"]: `${offset}px`,
-                [position.includes("right") ? "right" : "left"]: "20px",
-                transition: "all 0.3s ease",
-              },
-              onDismiss: () => removeToast(toast.id),
-              onHeightUpdate: (height: number) =>
-                updateToastHeight(toast.id, height),
-            });
-          });
-        },
-      }).mount(container);
-    };
-
-    createAppInstance("top-right", topRightContainer);
-    createAppInstance("bottom-right", bottomRightContainer);
-    createAppInstance("top-left", topLeftContainer);
-    createAppInstance("bottom-left", bottomLeftContainer);
-  },
-};
-
-export function useToast() {
-  const instance = getCurrentInstance();
-  return instance?.appContext.config.globalProperties.$toast;
-}
-
-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;
-    };
-  }
-}