plugin-ui-for-kzt 0.0.8 → 0.0.10

package/src/components/BaseToggle/README.md

@@ -0,0 +1,76 @@
+## 🧩 BaseToggle
+
+Компонент переключателя (`toggle`) с поддержкой текста, состояний, размеров и работы через `v-model`.
+
+---
+
+### ✅ Пример использования
+
+```vue
+<base-toggle
+  v-model="isEnabled"
+  label="Получать уведомления"
+  sub-label="Включить уведомления по email"
+  size="medium"
+  :disabled="false"
+/>
+```
+
+---
+
+### ⚙️ Пропсы
+
+- `modelValue: boolean`  
+  Управляет состоянием переключателя (вкл/выкл). Используется через `v-model`.
+
+- `id: string`  
+  Уникальный идентификатор для `input`.
+
+- `label?: string`  
+  Основной текст слева или справа от переключателя.
+
+- `subLabel?: string`  
+  Второстепенный текст под `label`.
+
+- `readonly?: boolean`  
+  Делает компонент только для чтения, без возможности взаимодействия.
+
+- `labelPosition?: 'left' | 'right'`  
+  Управляет позицией текста. По умолчанию `'right'`.
+
+- `size?: 'small' | 'medium'`  
+  Размер компонента. По умолчанию `'medium'`.
+
+- `disabled?: boolean`  
+  Делает переключатель неактивным.
+
+- `required?: boolean`  
+  Добавляет обязательность (и атрибут `required`).
+
+- `error?: boolean`  
+  Активирует ошибочное состояние (подсветка, `data-error`).
+
+---
+
+### 📤 События
+
+- `update:modelValue`  
+  Эмитится при клике/переключении, возвращает новое значение `boolean`.
+
+---
+
+### 🎨 Поведение и классы
+
+Компонент использует внутренние composables:
+
+- `useKitSize` — добавляет классы размера:  
+  `--small-size`, `--medium-size`, `--large-size`
+
+- `useKitState` — обрабатывает состояние, ошибки, доступность:  
+  `--is-disabled`, `--is-error`, `--is-loading` и др.  
+  Также добавляет `data-*` атрибуты на элемент `input`.
+
+- Дополнительные классы:
+  - `--is-active-value` — если `modelValue === true`
+  - `--is-readonly` — если `readonly === true`
+  - `--is-left-label-position` — если `labelPosition === 'left'`

package/src/components/BaseTooltip/BaseTooltip.vue

@@ -0,0 +1,318 @@
+<template>
+  <div class="base-tooltip-container">
+    <div
+      class="base-tooltip__trigger"
+      @mouseenter="showTooltip"
+      @mouseleave="hideTooltip"
+      @click="toggleTooltip"
+    >
+      <slot name="trigger">
+        <base-icon
+          name="help"
+          size="extra-small"
+        />
+      </slot>
+    </div>
+
+    <Transition name="tooltip">
+      <div
+        v-if="isVisible"
+        class="base-tooltip"
+        :class="classList"
+      >
+        <div class="base-tooltip__wrapper">
+          <div class="base-tooltip__title">{{ title }}</div>
+          <div class="base-tooltip__content" v-html="content" />
+        </div>
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, onUnmounted, ref } from 'vue';
+import type { ITooltipProps } from '../../types/tooltip';
+
+const props = withDefaults(defineProps<ITooltipProps>(), {
+  position: 'top',
+  trigger: 'hover',
+  theme: 'light',
+  arrow: true,
+});
+
+const isVisible = ref(false);
+
+function showTooltip() {
+  if (props.trigger === 'hover') {
+    isVisible.value = true;
+  }
+}
+
+function hideTooltip() {
+  if (props.trigger === 'hover') {
+    isVisible.value = false;
+  }
+}
+
+function toggleTooltip() {
+  if (props.trigger === 'click') {
+    isVisible.value = !isVisible.value;
+  }
+}
+
+function handleClickOutside(event: MouseEvent) {
+  if (props.trigger === 'click' && isVisible.value) {
+    const tooltip = document.querySelector('.base-tooltip');
+    const trigger = document.querySelector('.base-tooltip__trigger');
+    if (tooltip && trigger && !tooltip.contains(event.target as Node) && !trigger.contains(event.target as Node)) {
+      isVisible.value = false;
+    }
+  }
+}
+
+onMounted(() => {
+  document.addEventListener('click', handleClickOutside);
+});
+
+onUnmounted(() => {
+  document.removeEventListener('click', handleClickOutside);
+});
+
+const classList = computed(() => [
+  `--is-${props.position}`,
+  `--is-${props.trigger}`,
+  `--is-${props.theme}`,
+  {
+    '--is-arrow': props.arrow,
+    '--is-visible': isVisible.value,
+  },
+]);
+</script>
+
+<style lang="scss" scoped>
+@import '../../styles/variables';
+@import '../../styles/root';
+
+.base-tooltip-container {
+  position: relative;
+  display: inline-block;
+}
+
+.base-tooltip__trigger {
+  cursor: pointer;
+}
+
+.base-tooltip {
+  $tooltip: &;
+
+  position: absolute;
+  z-index: 1000;
+  width: fit-content;
+
+  &.--is-top, &.--is-top-left, &.--is-top-right {
+    bottom: 100%;
+    left: 50%;
+    margin-bottom: var(--spacing-s);
+    transform: translateX(-50%);
+    transform-origin: bottom center;
+  }
+
+  &.--is-bottom {
+    top: 100%;
+    left: 50%;
+    margin-top: var(--spacing-s);
+    transform: translateX(-50%);
+    transform-origin: top center;
+  }
+
+  &.--is-left {
+    top: 50%;
+    right: 100%;
+    margin-right: var(--spacing-s);
+    transform: translateY(-50%);
+    transform-origin: right center;
+  }
+
+  &.--is-right {
+    top: 50%;
+    left: 100%;
+    margin-left: var(--spacing-s);
+    transform: translateY(-50%);
+    transform-origin: left center;
+  }
+
+  &__wrapper {
+    position: relative;
+    display: inline-block;
+    width: max-content;
+    max-width: 320px;
+    padding: var(--spacing-s) var(--spacing-m);
+    border-radius: var(--corner-radius-xs);
+    box-shadow: 0px 0px 12px -2px var(--effects-drop-shadows-100);
+  }
+
+  &.--is-light {
+    #{$tooltip} {
+      &__wrapper {
+        color: var(--primary-text-secondary);
+        background: var(--primary-black-white);
+      }
+    }
+  }
+
+  &.--is-dark {
+    #{$tooltip} {
+      &__wrapper {
+        color: var(--primary-black-white);
+        background: var(--primary-black-900);
+      }
+    }
+  }
+
+  &.--is-arrow {
+    #{$tooltip} {
+      &__wrapper {
+        &::before {
+          position: absolute;
+          content: '';
+          width: 12px;
+          height: 12px;
+          z-index: 1;
+          transform: rotate(45deg);
+        }
+      }
+    }
+
+    &.--is-light {
+      #{$tooltip} {
+        &__wrapper {
+          &::before {
+            background: var(--primary-black-white);
+          }
+        }
+      }
+    }
+
+    &.--is-dark {
+      #{$tooltip} {
+        &__wrapper {
+          &::before {
+            background: var(--primary-black-900);
+          }
+        }
+      }
+    }
+
+    &.--is-top, &.--is-top-left, &.--is-top-right {
+      #{$tooltip} {
+        &__wrapper {
+          &::before {
+            left: calc(50% - 6px);
+            bottom: -5px;
+            box-shadow: 4px 4px 8px -3px var(--effects-drop-shadows-100);
+          }
+        }
+      }
+    }
+
+    &.--is-bottom {
+      #{$tooltip} {
+        &__wrapper {
+          &::before {
+            bottom: 100%;
+            left: calc(50% - 6px);
+            top: -4px;
+          }
+        }
+      }
+    }
+
+    &.--is-left {
+      #{$tooltip} {
+        &__wrapper {
+          &::before {
+            top: calc(50% - 6px);
+            right: -4px;
+          }
+        }
+      }
+    }
+
+    &.--is-right {
+      #{$tooltip} {
+        &__wrapper {
+          &::before {
+            top: calc(50% - 6px);
+            left: -4px;
+          }
+        }
+      }
+    }
+  }
+
+  &__title {
+    font: var(--typography-text-xs-semibold);
+  }
+
+  &__content {
+    font: var(--typography-text-xs-regular);
+  }
+}
+
+.tooltip-enter-active,
+.tooltip-leave-active {
+  transition: opacity 0.3s ease, transform 0.3s ease;
+}
+
+.tooltip-enter-from,
+.tooltip-leave-to {
+  opacity: 0;
+  transform: scale(0.95);
+}
+
+.base-tooltip.--is-top,
+.base-tooltip.--is-top-left,
+.base-tooltip.--is-top-right {
+  &.tooltip-enter-from,
+  &.tooltip-leave-to {
+    transform: translateX(-50%) translateY(10px) scale(0.95);
+  }
+  &.tooltip-enter-to,
+  &.tooltip-leave-from {
+    transform: translateX(-50%) translateY(0) scale(1);
+  }
+}
+
+.base-tooltip.--is-bottom {
+  &.tooltip-enter-from,
+  &.tooltip-leave-to {
+    transform: translateX(-50%) translateY(-10px) scale(0.95);
+  }
+  &.tooltip-enter-to,
+  &.tooltip-leave-from {
+    transform: translateX(-50%) translateY(0) scale(1);
+  }
+}
+
+.base-tooltip.--is-left {
+  &.tooltip-enter-from,
+  &.tooltip-leave-to {
+    transform: translateY(-50%) translateX(10px) scale(0.95);
+  }
+  &.tooltip-enter-to,
+  &.tooltip-leave-from {
+    transform: translateY(-50%) translateX(0) scale(1);
+  }
+}
+
+.base-tooltip.--is-right {
+  &.tooltip-enter-from,
+  &.tooltip-leave-to {
+    transform: translateY(-50%) translateX(-10px) scale(0.95);
+  }
+  &.tooltip-enter-to,
+  &.tooltip-leave-from {
+    transform: translateY(-50%) translateX(0) scale(1);
+  }
+}
+</style>

package/src/components/BaseTooltip/README.md

@@ -0,0 +1,74 @@
+## 🧠 BaseTooltip
+
+`BaseTooltip` — простой и настраиваемый компонент тултипа с поддержкой тем, стрелки, и триггеров по ховеру или клику.
+
+### ✅ Пример использования
+
+```vue
+<base-tooltip
+  title="Заголовок"
+  content="Описание тултипа"
+  position="right"
+  theme="dark"
+  :arrow="true"
+>
+  <template #trigger>
+    <button>?</button>
+  </template>
+</base-tooltip>
+```
+
+Если не передать слот `trigger`, по умолчанию будет отображена иконка `help`.
+
+---
+
+Конечно! Вот обновлённый стиль описания пропсов — менее формальный, более описательный и дружелюбный:
+
+---
+
+### ⚙️ Свойства (props)
+
+- **`title`**  
+  _Тип:_ `string`  
+  Заголовок, который будет отображаться в тултипе сверху. Можно оставить пустым, если нужен только текст.
+
+- **`content`**  
+  _Тип:_ `string`  
+  Основное содержимое тултипа. То, что пользователь должен увидеть при наведении/клике.
+
+- **`position`**  
+  _Тип:_ `'top' | 'bottom' | 'left' | 'right'`  
+  _По умолчанию:_ `'top'`  
+  Указывает, где появится тултип относительно элемента — сверху, снизу, слева или справа.
+
+- **`trigger`**  
+  _Тип:_ `'hover' | 'click'`  
+  _По умолчанию:_ `'hover'`  
+  Способ активации тултипа: по наведению курсора (`hover`) или по клику (`click`).
+
+- **`theme`**  
+  _Тип:_ `'light' | 'dark'`  
+  _По умолчанию:_ `'light'`  
+  Цветовая тема тултипа. Светлая подойдёт для светлых интерфейсов, тёмная — для тёмных.
+
+- **`arrow`**  
+  _Тип:_ `boolean`  
+  _По умолчанию:_ `true`  
+  Показывать ли стрелочку, указывающую на элемент. Если не нужна — просто отключи.
+
+---
+
+### 🎯 Слоты
+
+| Название   | Описание |
+|------------|----------|
+| `trigger`  | Элемент, при наведении или клике на который появляется тултип |
+
+---
+
+### 📌 Особенности
+
+- Реагирует на клик или ховер в зависимости от `trigger`.
+- Автоматически скрывается при клике вне компонента (`click-outside`).
+- Можно вставить любой элемент в `trigger` слот.
+- Поддержка позиционирования и стрелки с соответствующим стилем.

package/src/components/Modal/Modal.vue

@@ -1,35 +1,35 @@
 <template>
   <div class="modal-container" @click.stop>
     <div
-      class="modal-container-header"
-      :class="{
+        class="modal-container-header"
+        :class="{
         'modal-container-header-show-all': showMore,
-        [getTypeModal.nameClass]: getTypeModal.nameClass !== '',
+        [getTypeModal.nameClass]: getTypeModal.nameClass.length,
       }"
     >
       {{getTypeModal.nameClass}}
       <div class="modal-container-header-title">
-        <component :is="getTypeModal.img" />
+        <component :is="getTypeModal.img"/>
         <div>{{ options.title }}</div>
         <div>{{ getTypeModal.nameClass }}</div>
       </div>
       <div
-        class="modal-container-header-show-more"
-        @click="showMore = !showMore"
+          class="modal-container-header-show-more"
+          @click="showMore = !showMore"
       >
         {{ showMore ? "Скрыть" : "Смотреть больше" }}
       </div>
     </div>
-    <CloseIcon class="modal-button-close" @click="onClose" />
+    <CloseIcon class="modal-button-close" @click="onClose"/>
     <div v-if="showMore" class="modal-container-subtitle">
-      Описание: <br />
+      Описание: <br/>
       {{ options.message }}
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import {ref, computed, Component} from "vue";
+import {ref, computed} from "vue";
 import CloseIcon from "../icons/CloseIcon.vue";
 import ErrorIcon from "../icons/ErrorIcon.vue";
 import SuccessIcon from "../icons/SuccessIcon.vue";
@@ -38,7 +38,7 @@ import InfoIcon from "../icons/InfoIcon.vue";
 import {IModalState, IModalType} from "../../types/index";
 
 interface IProps {
-  options:IModalState
+  options: IModalState
   name: IModalType;
   onClose: () => void;
 }
@@ -46,27 +46,24 @@ interface IProps {
 const props = defineProps<IProps>();
 const showMore = ref<boolean>(false);
 
-const getTypeModal = computed<{ img: Component; nameClass: string }>(() => {
-  console.log(props.name);
+const getTypeModal = computed<{ img: any; nameClass: string }>(() => {
+  console.log(props.name, 'show props name')
   switch (props.name) {
     case "error":
-      return { img: ErrorIcon, nameClass: "error" };
+      return {img: ErrorIcon, nameClass: "error"};
     case "success":
-      return { img: SuccessIcon, nameClass: "success" };
+      return {img: SuccessIcon, nameClass: "success"};
     case "warning":
-      return { img: WarningIcon, nameClass: "warning" };
+      return {img: WarningIcon, nameClass: "warning"};
     case "info":
-      return { img: InfoIcon, nameClass: "info-modal" };
+      return {img: InfoIcon, nameClass: "info"};
     default:
-      return {
-        img: SuccessIcon,
-        nameClass: "info-modal",
-      };
+      return {img: WarningIcon, nameClass: "info"};
   }
 });
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .modal {
   position: fixed;
   top: 0;
@@ -104,6 +101,7 @@ const getTypeModal = computed<{ img: Component; nameClass: string }>(() => {
       font-size: 20px;
       font-weight: 400;
       line-height: 24px;
+
       &-show-all {
         border-radius: 12px 12px 0 0;
       }
@@ -140,11 +138,11 @@ const getTypeModal = computed<{ img: Component; nameClass: string }>(() => {
   background: #15b853;
 }
 
-:deep(.info-modal) {
+.warning {
   background: #f4a900;
 }
 
-.warning {
+.info {
   background: #0085cf;
 }
 </style>

package/src/components/Spinner/Spinner.vue

@@ -5,7 +5,8 @@
 </template>
 
 <script setup lang="ts">
-import { defineProps, computed } from 'vue'
+
+import {computed} from "vue";
 
 interface SpinnerProps {
   show: boolean            

package/src/composables/kit/color.ts

@@ -0,0 +1,14 @@
+import type { ICoreColor } from '../../types/utils';
+import { computed } from 'vue';
+
+export function useKitColor(props: ICoreColor) {
+  const colorClassList = computed(() => [
+    {
+      [`--${props.color}-color`]: props.color,
+    },
+  ]);
+
+  return {
+    colorClassList,
+  };
+}

package/src/composables/kit/interactive.ts

@@ -0,0 +1,53 @@
+import type { ICoreInteractive } from '../../types/utils';
+import { computed, useAttrs, getCurrentInstance } from 'vue';
+
+
+export function useKitInteractive(props: ICoreInteractive) {
+  const INTERACTIVE_TAGS = {
+    BUTTON: 'button',
+    LINK: 'link',
+  };
+
+  const attrs = useAttrs();
+
+  const isInteractive = computed(() => {
+    if (!props.tag || [INTERACTIVE_TAGS.LINK].includes(props.tag)) {
+      return true;
+    }
+
+    return Boolean(attrs.to);
+  });
+
+  const componentTag = computed(() => {
+    const instance = getCurrentInstance();
+    const hasRouterLink = instance?.appContext.components['RouterLink'] || false;
+
+    if (!props.tag) {
+      return 'button';
+    }
+
+    if (attrs.to && hasRouterLink) {
+      return 'router-link';
+    }
+
+    return {
+      [INTERACTIVE_TAGS.BUTTON]: 'button',
+      [INTERACTIVE_TAGS.LINK]: 'a',
+      span: 'span',
+      div: 'div',
+    }[props.tag] || 'a';
+  });
+
+  const interactiveClassList = computed(() => {
+    return [
+      {
+        '--is-interactive': isInteractive.value,
+      },
+    ];
+  });
+
+  return {
+    componentTag,
+    interactiveClassList,
+  };
+}

package/src/composables/kit/size.ts

@@ -0,0 +1,15 @@
+import type { ICoreSize } from '../../types/utils';
+import { computed } from 'vue';
+
+
+export function useKitSize(props: ICoreSize) {
+  const sizeClassList = computed(() => [
+    {
+      [`--${props.size}-size`]: props.size,
+    },
+  ]);
+
+  return {
+    sizeClassList,
+  };
+}

package/src/composables/kit/state.ts

@@ -0,0 +1,28 @@
+import type { ICoreState } from '../../types/utils';
+import { computed } from 'vue';
+
+
+export function useKitState(props: ICoreState) {
+  const stateClassList = computed(() => [
+    {
+      '--is-selected': props.selected,
+      '--is-active': props.active,
+      '--is-required': props.required,
+      '--is-error': props.error,
+      '--is-loading': props.loading,
+      '--is-disabled': props.disabled,
+    },
+  ]);
+
+  const stateAttrs = computed(() => ({
+    ...(Boolean(props.error) && { 'data-error': Boolean(props.error) }),
+    ...(props.disabled && { 'data-disabled': props.disabled }),
+    ...(props.required && { required: props.required }),
+    ...(props.disabled && { disabled: props.disabled }),
+  }));
+
+  return {
+    stateClassList,
+    stateAttrs,
+  };
+}