plugin-ui-for-kzt 0.0.17 → 0.0.19

package/src/components/BaseModal/BaseModal.vue

@@ -0,0 +1,189 @@
+<template>
+  <Teleport to="body">
+    <div
+      v-for="modal in modals"
+      :key="modal.id"
+      v-show="modal.isOpen"
+      class="base-modal__overlay"
+      @click.self="handleOverlayClick(modal.id)"
+    >
+      <div class="base-modal" @click.stop>
+        <div class="base-modal__wrapper">
+          <base-icon
+            v-if="modal.props?.closable"
+            name="close-circle"
+            class="base-modal__close"
+            size="custom"
+            @click="handleClose(modal.id)"
+          />
+          <div class="base-modal__content">
+            <component :is="modal.component" v-if="modal.component" :modal-props="modal.props" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useModalStore } from '../../store/modal';
+import BaseIcon from '../BaseIcon/BaseIcon.vue';
+
+const modalStore = useModalStore();
+
+const modals = computed(() => modalStore.modals);
+
+const handleClose = (id: string) => {
+  modalStore.closeModal(id);
+};
+
+const handleOverlayClick = (id: string) => {
+  const topModal = modals.value[modals.value.length - 1];
+  if (topModal?.id === id && topModal.props?.closable) {
+    handleClose(id);
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import '../../styles/variables';
+@import '../../styles/root';
+
+.base-modal__overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+  animation: fadeIn 0.3s ease;
+}
+
+.base-modal {
+  background: var(--primary-black-white);
+  border-radius: var(--corner-radius-m);
+  overflow: hidden;
+  min-width: 335px;
+  transform: scale(0.7);
+  animation: slideIn 0.3s ease forwards;
+  margin: 0 20px;
+  max-height: 90vh;
+
+  @media #{$tablet} {
+    min-width: 588px;
+  }
+
+  &__wrapper {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    max-width: 100%;
+    min-height: 224px;
+    height: 100%;
+    padding: 24px;
+
+    @media #{$mobile-landscape} {
+      padding: 56px 68px;
+      min-height: 332px;
+    }
+  }
+
+  &__header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    text-align: center;
+    color: var(--primary-text-primary);
+    font: var(--typography-l-medium);
+
+    @media #{$mobile-landscape} {
+      font: var(--typography-h4-medium);
+    }
+  }
+
+  &__close {
+    position: absolute;
+    top: 24px;
+    right: 24px;
+    width: 32px;
+    height: 32px;
+    border: none;
+    background: none;
+    cursor: pointer;
+    color: var(--primary-gray-600);
+
+    &:hover {
+      color: var(--primary-black-900);
+    }
+
+    @media #{$mobile-landscape} {
+      width: 48px;
+      height: 48px;
+    }
+  }
+
+  &__content {
+    max-height: 70vh;
+    overflow-y: auto;
+    color: var(--primary-text-tertiary);
+    font: var(--typography-text-s-regular);
+
+    @media #{$mobile-landscape} {
+      font: var(--typography-text-l-regular);
+    }
+  }
+
+  &__footer {
+    display: flex;
+    justify-content: center;
+    align-items: flex-end;
+    flex-grow: 1;
+    gap: 24px;
+    width: 100%;
+    margin-top: 24px;
+
+    :deep(.base-button) {
+      width: 100%;
+    }
+  }
+}
+
+// Анимации
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes slideIn {
+  from {
+    transform: scale(0.7);
+    opacity: 0;
+  }
+  to {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+@keyframes slideOut {
+  to {
+    transform: scale(0.7);
+    opacity: 0;
+  }
+}
+
+.base-modal-leave-active {
+  animation: slideOut 0.3s ease reverse;
+}
+</style>

package/src/components/BaseSiteInput/BaseSiteInput.vue

@@ -1,7 +1,7 @@
 <template>
     <div :class="classList">
         <div class="base-site-input__wrapper">
-        <div class="base-site-input__url-wrapper">
+        <div :class="{ '--is-error' : urlError }" class="base-site-input__url-wrapper">
             <span class="base-site-input__url">
                 https://
             </span>
@@ -22,6 +22,7 @@
 import { computed, ref, watch } from 'vue';
 import BaseInput from '../BaseInput/BaseInput.vue';
 import { useKitSize } from '../../composables/kit/size'
+import { useKitState } from '../../composables/kit/state';
 import type { ICorePropsBaseSiteInput } from '../../types/input'
 
 const props = withDefaults(defineProps<ICorePropsBaseSiteInput>(),{
@@ -36,10 +37,15 @@ const emit = defineEmits<{
 
 const urlError = ref('');
 const { sizeClassList } = useKitSize(props);
+const { stateClassList } = useKitState(props);
 
 const classList = computed(() => [
     sizeClassList.value,
+    stateClassList.value,
     'base-site-input',
+    {
+        '--is-has-hint': !!props.hint,
+    }
 ]);
 
 const normalizedValue = computed(() => {
@@ -108,12 +114,24 @@ watch(modelValue, (value) => {
     }
 
     &.--small-size {
+        &.--is-has-hint, &.--is-error {
+            #{$input} {
+                &__url-wrapper {
+                    margin-bottom: 26px;
+                }
+            }
+        }
+
         #{$input} {
             &__url-wrapper{
                 height: 40px;
                 font: var(--typography-text-m-regular);
                 border-top-left-radius: var(--corner-radius-s);
                 border-bottom-left-radius: var(--corner-radius-s);
+
+                &.--is-error {
+                    margin-bottom: 26px;
+                }
             }
 
             &__url {
@@ -128,12 +146,24 @@ watch(modelValue, (value) => {
     }
 
     &.--medium-size {
+        &.--is-has-hint, &.--is-error {
+            #{$input} {
+                &__url-wrapper {
+                    margin-bottom: 26px;
+                }
+            }
+        }
+
         #{$input} {
             &__url-wrapper{
                 height: 48px;
                 font: var(--typography-text-m-regular);
                 border-top-left-radius: var(--corner-radius-m);
                 border-bottom-left-radius: var(--corner-radius-m);
+
+                &.--is-error {
+                    margin-bottom: 26px;
+                }
             }
 
             &__url {
@@ -148,12 +178,24 @@ watch(modelValue, (value) => {
     }
 
     &.--large-size {
+        &.--is-has-hint, &.--is-error {
+            #{$input} {
+                &__url-wrapper {
+                    margin-bottom: 30px;
+                }
+            }
+        }
+
         #{$input} {
             &__url-wrapper{
                 height: 56px;
                 font: var(--typography-text-l-regular);
                 border-top-left-radius: var(--corner-radius-m);
                 border-bottom-left-radius: var(--corner-radius-m);
+
+                &.--is-error {
+                    margin-bottom: 30px;
+                }
             }
 
             &__url {

package/src/components/BaseTag/BaseTag.vue

@@ -0,0 +1,245 @@
+<template>
+<div class="base-tag" :class="classList">
+    <div class="base-tag__wrapper">
+        <div class="base-tag__text">{{ text }}</div>
+        <div v-if="closable" class="base-tag__icon" @click="handleClose">
+            <base-icon name="close" size="custom" />
+        </div>
+        <div v-if="addingTag" class="base-tag__icon">
+            <base-icon name="add" size="custom" class="base-tag__add-icon" @click="handleAddTag" />
+        </div>
+        <div v-if="isHasAddTag" class="base-tag__input-wrapper">
+            <input
+                class="base-tag__input"
+                type="text"
+                v-model="inputText"
+                @input="handleInput"
+                @keypress.enter="handleCreateTag"
+            />
+        </div>
+    </div>
+</div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import BaseIcon from '../BaseIcon/BaseIcon.vue';
+import type { ICoreTagProps } from '../../types/tag';
+import { useKitSize } from '../../composables/kit/size';
+import { useKitColor } from '../../composables/kit/color';
+
+const props = withDefaults(defineProps<ICoreTagProps>(), {
+    size: 'medium',
+    color: 'primary',
+    closable: false,
+    isHasAddTag: false,
+    addingTag: false,
+    text: '',
+});
+
+const emit = defineEmits<{
+    updateInput: [value: ICoreTagProps['inputText']];
+    close: [];
+    addTag: [];
+}>();
+
+const inputText = ref<string>(props.inputText || '');
+
+const { sizeClassList } = useKitSize(props);
+const { colorClassList } = useKitColor(props);
+
+const classList = computed(() => [
+    sizeClassList.value,
+    colorClassList.value,
+    {'--adding-tag': props.addingTag},
+]);
+
+const handleClose = () => {
+    emit('close');
+};
+
+const handleInput = (event: Event) => {
+    const target = event.target as HTMLInputElement;
+    emit('updateInput', target.value);
+};
+
+const handleCreateTag = () => {
+    if (inputText.value.trim()) {
+        emit('updateInput', inputText.value.trim());
+        inputText.value = '';
+    }
+};
+
+const handleAddTag = () => {
+    emit('addTag');
+};
+</script>
+
+<style scoped lang="scss">
+@import '@/styles/variables';
+@import '@/styles/root';
+
+.base-tag {
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+
+    &__wrapper {
+        display: flex;
+        align-items: center;
+        transition: all var(--transition);
+    }
+
+    &__text {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    &__icon {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-left: var(--spacing-xs);
+    }
+
+    &__input-wrapper {
+        display: flex;
+        align-items: center;
+
+        .base-tag__input {
+            border: none;
+            background: transparent;
+            outline: none;
+            color: var(--primary-blue);
+        }
+    }
+
+    &.--primary-color {
+        .base-tag__wrapper {
+            background: var(--primary-black-100);
+            color: var(--primary-black-700);
+
+            @include hover {
+                background: var(--primary-black-200);
+                color: var(--primary-black-900);
+
+                .base-tag__icon {
+                    color: var(--primary-black-900);
+                }
+            }
+        }
+
+        .base-tag__icon {
+            color: var(--primary-black-500);
+        }
+    }
+
+    &.--secondary-color {
+        .base-tag__wrapper {
+            background: var(--primary-black-white);
+            color: var(--primary-black-700); // same
+
+            @include hover {
+                background: var(--primary-black-200);
+                color: var(--primary-black-900);
+
+                .base-tag__icon {
+                    color: var(--primary-black-900);
+                }
+            }
+        }
+
+        .base-tag__icon {
+            color: var(--primary-black-500);
+        }
+    }
+
+    &.--adding-tag {
+        .base-tag__wrapper {
+            color: var(--primary-black-500);
+
+            @include hover {
+                color: var(--primary-black-900);
+
+                .base-tag__icon {
+                    color: var(--primary-black-900);
+                }
+            }
+        }
+    }
+
+
+    &.--extra-small-size {
+        .base-tag__text,
+        .base-tag__input {
+            font: var(--typography-text-xs-medium);
+        }
+
+        .base-tag__wrapper {
+            border-radius: var(--corner-radius-xxs);
+            padding: var(--spacing-2xs) var(--spacing-s);
+        }
+
+        .base-tag__icon,
+        .base-tag__add-icon {
+            width: 12px;
+            height: 12px;
+        }
+    }
+
+    &.--small-size {
+        .base-tag__text,
+        .base-tag__input {
+        font: var(--typography-text-s-medium);
+        }
+
+        .base-tag__wrapper {
+            border-radius: var(--corner-radius-xxs);
+            padding: var(--spacing-2xs) var(--spacing-s);
+        }
+
+        .base-tag__icon,
+        .base-tag__add-icon {
+            width: 14px;
+            height: 14px;
+        }
+    }
+
+    &.--medium-size {
+        .base-tag__text,
+        .base-tag__input {
+            font: var(--typography-text-s-medium);
+        }
+
+        .base-tag__wrapper {
+            border-radius: var(--corner-radius-2xs);
+            padding: var(--spacing-xs) var(--spacing-2m);
+        }
+
+        .base-tag__icon,
+        .base-tag__add-icon {
+            width: 16px;
+            height: 16px;
+        }
+    }
+
+    &.--large-size {
+        .base-tag__text,
+        .base-tag__input {
+            font: var(--typography-text-m-medium);
+        }
+
+        .base-tag__wrapper {
+            border-radius: var(--corner-radius-2xs);
+            padding: var(--spacing-xs) var(--spacing-2m);
+        }
+
+        .base-tag__icon,
+        .base-tag__add-icon {
+            width: 16px;
+            height: 16px;
+        }
+    }
+}
+</style>

package/src/components/BaseTag/README.md

@@ -0,0 +1,125 @@
+# Компонент BaseTag
+
+Компонент `BaseTag` — это переиспользуемый Vue 3 компонент для отображения тегов с настраиваемым текстом, размером, цветом и поведением. Поддерживает закрываемые теги, теги с функцией добавления и поле ввода для создания новых тегов. Компонент следует методологии БЭМ для именования CSS-классов и стилизован с использованием SCSS.
+
+## Возможности
+
+- **Настраиваемый размер**: Поддерживает четыре варианта размеров: `extra-small`, `small`, `medium`, `large`.
+- **Варианты цветов**: Предлагает цветовые схемы `primary` и `secondary` с эффектами наведения.
+- **Закрываемые теги**: Опционально включает иконку закрытия для вызова события `close`.
+- **Функция добавления тега**: Поддерживает иконку добавления для создания новых тегов.
+- **Поле ввода**: Отображает поле ввода для создания новых тегов, если включен `isHasAddTag`.
+- **Поддержка TypeScript**: Полностью типизирован с использованием TypeScript.
+- **Стилизация по БЭМ**: Использует методологию БЭМ для консистентности и удобства поддержки CSS.
+- **Композаблы**: Использует `useKitSize` и `useKitColor` для модульного управления размером и цветом.
+
+
+## Использование
+
+Компонент `BaseTag` можно использовать в разных конфигурациях в зависимости от желаемой функциональности. Ниже приведены примеры типичных случаев использования.
+
+### Простой тег
+
+```vue
+<template>
+  <base-tag text="Пример тега" />
+</template>
+```
+
+Отображает тег с текстом "Пример тега" в размере `medium` и цвете `primary`.
+
+### Закрываемый тег
+
+```vue
+<template>
+  <base-tag text="Закрываемый тег" closable @close="handleClose" />
+</template>
+
+<script setup lang="ts">
+const handleClose = () => {
+  console.log('Тег закрыт');
+};
+</script>
+```
+
+Тег с иконкой закрытия, которая вызывает событие `close` при клике.
+
+### Тег с полем ввода
+
+```vue
+<template>
+  <base-tag
+    :isHasAddTag="true"
+    v-model:inputText="tagInput"
+    @updateInput="updateInput"
+    @addTag="createTag"
+  />
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const tagInput = ref('');
+const updateInput = (value: string) => {
+  tagInput.value = value;
+};
+const createTag = () => {
+  console.log('Новый тег:', tagInput.value);
+};
+</script>
+```
+
+Тег с полем ввода для создания новых тегов. Поле ввода отображается, если `isHasAddTag` равно `true`.
+
+### Тег с иконкой добавления
+
+```vue
+<template>
+  <base-tag text="Добавить тег" addingTag @addTag="handleAddTag" />
+</template>
+
+<script setup lang="ts">
+const handleAddTag = () => {
+  console.log('Инициировано добавление тега');
+};
+</script>
+```
+
+Тег с иконкой добавления, которая вызывает событие `addTag` при клике.
+
+## Пропсы
+
+| Проп         | Тип      | По умолчанию | Описание                                                                 |
+|--------------|----------|--------------|--------------------------------------------------------------------------|
+| `text`       | `string` | `''`         | Текст, отображаемый в теге.                                              |
+| `size`       | `string` | `'medium'`   | Размер тега: `extra-small`, `small`, `medium`, `large`.                  |
+| `color`      | `string` | `'primary'`  | Цветовая схема: `primary`, `secondary`.                                  |
+| `closable`   | `boolean`| `false`      | Включает иконку закрытия для удаления тега.                              |
+| `isHasAddTag`| `boolean`| `false`      | Включает поле ввода для создания нового тега.                            |
+| `addingTag`  | `boolean`| `false`      | Включает иконку добавления тега.                                        |
+| `inputText`  | `string` | `''`         | Начальное значение поля ввода (используется с `v-model:inputText`).      |
+
+## События
+
+| Событие        | Параметры            | Описание                                              |
+|----------------|----------------------|-------------------------------------------------------|
+| `close`        | -                    | Вызывается при клике на иконку закрытия.              |
+| `addTag`       | -                    | Вызывается при клике на иконку добавления тега.       |
+| `updateInput`  | `value: string`      | Вызывается при изменении текста в поле ввода.         |
+
+## Стилизация
+
+Модификаторы:
+- `--primary-color`, `--secondary-color` — для цветовых схем.
+- `--extra-small-size`, `--small-size`, `--medium-size`, `--large-size` — для размеров.
+- `--adding-tag` — для стилизации тега с иконкой добавления.
+
+
+## Зависимости
+
+- **`BaseIcon`**: Компонент для отображения иконок (используется для иконок закрытия и добавления).
+- **`useKitSize`**: Композабл для управления размерами.
+- **`useKitColor`**: Композабл для управления цветами.
+
+
+