plugin-ui-for-kzt 0.0.16 → 0.0.17

package/src/components/BaseChips/README.md

@@ -0,0 +1,64 @@
+# Документация по использованию компонента BaseChips
+
+Компонент `BaseChips` — это повторно используемый компонент Vue, предназначенный для отображения чипа (небольшого интерактивного элемента) с настраиваемым текстом, иконкой, количеством и размером. Он поддерживает различные состояния (активное, при наведении, фокусировка, нажатие) с плавными переходами и стилизуется в соответствии с предопределённой дизайн-системой.
+
+## Содержание
+- [Использование](#использование)
+- [Свойства (Props)](#свойства-props)
+- [События (Events)](#события-events)
+- [Слоты (Slots)](#слоты-slots)
+- [Стилизация](#стилизация)
+
+## Использование
+
+Используйте компонент `BaseChips` для отображения чипа с текстом, опциональной иконкой и количеством. Компонент поддерживает разные размеры и состояние активности.
+
+## Свойства (Props)
+
+| Свойство    | Тип         | Значение по умолчанию | Описание                                      |
+|-------------|-------------|-----------------------|----------------------------------------------|
+| `text`      | `string`    | Обязательно           | Основной текст, отображаемый внутри чипа.     |
+| `active`    | `boolean`   | `false`               | Определяет, находится ли чип в активном состоянии. |
+| `iconName`  | `string`    | `undefined`           | Название иконки для отображения (требуется BaseIcon). |
+| `count`     | `number`    | `undefined`           | Число для отображения в чипе.                 |
+| `size`      | `'extra-small' | 'small' | 'medium' | 'large'` | `medium` | Размер чипа (влияет на высоту, шрифт и отступы). |
+
+## События (Events)
+
+Компонент не выбрасывает событий напрямую, но его поведение зависит от состояния `active`, которое можно управлять через родительский компонент.
+
+## Слоты (Slots)
+
+Компонент не предоставляет пользовательских слотов. Содержимое (текст, иконка, количество) определяется через пропсы.
+
+## Стилизация
+
+Стилизация может быть расширена через кастомные классы или модификации через `:deep()` в родительском компоненте.
+
+
+### Динамическое переключение состояния
+```vue
+<template>
+  <base-chips
+    :text="'Динамический чип'"
+    :active="isActive"
+    icon-name="check"
+    :count="count"
+    size="large"
+    @click="toggleActive"
+  />
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import BaseChips from '/components/BaseChips/BaseChips.vue';
+
+const isActive = ref(false);
+const count = ref(5);
+
+const toggleActive = () => {
+  isActive.value = !isActive.value;
+  count.value += 1;
+};
+</script>
+```

package/src/components/BaseInput/BaseInput.vue

@@ -102,6 +102,7 @@ function handleInput(event: Event) {
       background: var(--bg-light);
       border: 1px solid var(--primary-black-300);
       outline: none;
+      transition: all var(--transition);
 
       &::placeholder {
         color: var(--primary-text-tertiary);

package/src/components/BaseOpenedListItem/BaseOpenedListItem.vue

@@ -98,7 +98,7 @@ const actualComponent = computed(() => {
         width: 100%;
         height: 100%;
         text-align: left;
-        transition: all var(--ui-transition);
+        transition: all var(--transition);
 
         @include hover {
             background: var(--primary-black-100);
@@ -157,7 +157,7 @@ const actualComponent = computed(() => {
         #{$item} {
             &__wrapper {
                 gap: var(--spacing-s);
-                height: 14px;
+                height: 40px;
                 padding: var(--spacing-s) var(--spacing-2l);
             }
 
@@ -177,7 +177,7 @@ const actualComponent = computed(() => {
         #{$item} {
             &__wrapper {
                 gap: var(--spacing-m);
-                height: 24px;
+                height: 48px;
                 padding: var(--spacing-m) var(--spacing-2l);
             }
 
@@ -197,7 +197,7 @@ const actualComponent = computed(() => {
         #{$item} {
             &__wrapper {
                 gap: var(--spacing-l);
-                height: 24px;
+                height: 60px;
                 padding: var(--spacing-2l) var(--spacing-l);
             }
 

package/src/components/BasePagination/BasePagination.vue

@@ -1,85 +1,85 @@
 <template>
-    <nav class="base-pagination" :class="classList">
-      <base-button
+<nav class="base-pagination" :class="classList">
+    <base-button
         v-if="type === 'numbers'"
         class="base-pagination__nav base-pagination__nav--prev"
         :disabled="currentPage === 1"
         :size="props.size"
         color="quaternary"
         @click="goToPage(currentPage - 1)"
-      >
-        <base-icon
-          name="arrow-left"
-          :size="props.size"
-          color="currentColor"
-        />
+    >
+    <base-icon
+        name="arrow-left"
+        :size="props.size"
+        color="currentColor"
+    />
         <slot name="previousTextButton">Назад</slot>
-      </base-button>
+    </base-button>
 
-      <ul class="base-pagination__list">
-        <template v-if="props.type === 'numbers'">
-          <li
+    <ul class="base-pagination__list">
+    <template v-if="props.type === 'numbers'">
+        <li
             v-for="page in displayedPages"
             :key="page"
             class="base-pagination__item"
-          >
+        >
             <div v-if="page === 'ellipsis'" class="base-pagination__ellipsis">
-              ...
+                ...
             </div>
             <base-button
-              v-else
-              class="base-pagination__page"
-              :class="{ 'base-pagination__page--active': page === currentPage }"
-              :size="props.size"
-              :color="isActiveButtonColor(page)"
-              @click="typeof page === 'number' && goToPage(page)"
+                v-else
+                class="base-pagination__page"
+                :class="{ 'base-pagination__page--active': page === currentPage }"
+                :size="props.size"
+                :color="isActiveButtonColor(page)"
+                @click="typeof page === 'number' && goToPage(page)"
             >
-              {{ page }}
+                {{ page }}
             </base-button>
-          </li>
-        </template>
+        </li>
+    </template>
 
-        <template v-else>
-          <li
+    <template v-else>
+        <li
             v-for="index in Math.min(totalPages, 3)"
             :key="index"
             class="base-pagination__item"
-          >
-            <div
-              :class="[
-                {
-                    'base-pagination__dot': props.type === 'dots' || props.type === 'dotsWithBackground',
-                    'base-pagination__dash': props.type === 'dashes' || props.type === 'dashesWithBackground',
-                    'base-pagination__dot--active': (props.type === 'dots' || props.type === 'dotsWithBackground') && index === currentPage,
-                    'base-pagination__dash--active': (props.type === 'dashes' || props.type === 'dashesWithBackground') && index === currentPage,
-                },
-              ]"
-              @click="goToPage(index)"
-            ></div>
-          </li>
-        </template>
-      </ul>
-
-      <base-button
-        v-if="type ==='numbers'"
+        >
+        <div
+            :class="[
+            {
+                'base-pagination__dot': props.type === 'dots' || props.type === 'dotsWithBackground',
+                'base-pagination__dash': props.type === 'dashes' || props.type === 'dashesWithBackground',
+                'base-pagination__dot--active': (props.type === 'dots' || props.type === 'dotsWithBackground') && index === currentPage,
+                'base-pagination__dash--active': (props.type === 'dashes' || props.type === 'dashesWithBackground') && index === currentPage,
+            },
+            ]"
+            @click="goToPage(index)"
+        ></div>
+        </li>
+    </template>
+    </ul>
+
+    <base-button
+        v-if="type === 'numbers'"
         class="base-pagination__nav base-pagination__nav--next"
         color="quaternary"
         :size="props.size"
         :disabled="currentPage === totalPages"
         @click="goToPage(currentPage + 1)"
-      >
+    >
         <slot name="nextTextButton">Вперёд</slot>
         <base-icon
-          name="arrow-right"
-          :size="props.size"
-          color="currentColor"
+            name="arrow-right"
+            :size="props.size"
+            color="currentColor"
         />
-      </base-button>
-    </nav>
+    </base-button>
+</nav>
 </template>
-  
+
 <script setup lang="ts">
-import { computed, ref } from 'vue';
+import { computed, ref, watch } from 'vue';
 import type { TPaginationProps } from '../../types/pagination';
 import { useKitSize } from '../../composables/kit/size';
 import BaseButton from '../BaseButton/BaseButton.vue';
@@ -98,6 +98,19 @@ const emit = defineEmits(['update:currentPage']);
 
 const currentPage = ref(props.currentPage);
 
+watch(
+    () => props.currentPage,
+    (newPage) => {
+        if (newPage !== currentPage.value) {
+        currentPage.value = newPage;
+        }
+    }
+);
+
+watch(currentPage, (newPage) => {
+    emit('update:currentPage', newPage);
+});
+
 const { sizeClassList } = useKitSize(props);
 
 const displayedPages = computed(() => {
@@ -152,22 +165,21 @@ const isActiveButtonColor = (page: string | number) => {
 const classList = computed(() => [
 sizeClassList.value,
 `base-pagination--${props.type}`,
-`--color-${props.color}`
+`--color-${props.color}`,
 ]);
 
 const goToPage = (page: number) => {
-if (page >= 1 && page <= props.totalPages) {
-    currentPage.value = page;
-    emit('update:currentPage', page);
-}
+    if (page >= 1 && page <= props.totalPages) {
+        currentPage.value = page;
+    }
 };
 </script>
-  
+
 <style lang="scss" scoped>
-  @import '@/styles/variables';
-  @import '@/styles/root';
-  
-  .base-pagination {
+@import '@/styles/variables';
+@import '@/styles/root';
+
+.base-pagination {
     $pagination: &;
 
     display: flex;
@@ -175,48 +187,49 @@ if (page >= 1 && page <= props.totalPages) {
     gap: var(--spacing-s);
 
     &__list {
-      display: flex;
-      align-items: center;
-      gap: var(--spacing-s);
-      list-style: none;
-      padding: 0;
-      margin: 0;
+        display: flex;
+        align-items: center;
+        gap: var(--spacing-s);
+        list-style: none;
+        padding: 0;
+        margin: 0;
     }
-  
+
     &__item {
-      display: flex;
+        display: flex;
     }
-  
+
     &__page {
-      transition: all 0.2s ease;
-  
-      &--active {
-        cursor: default;
-      }
+        transition: all 0.2s ease;
+
+        &--active {
+            cursor: default;
+        }
     }
-  
+
     &__ellipsis {
-      cursor: default;
+        cursor: default;
     }
-  
+
     &__nav {
-      cursor: pointer;
-      transition: all 0.2s ease;
+        cursor: pointer;
+        transition: all 0.2s ease;
     }
 
     &__dot {
         border-radius: 50%;
     }
 
-    &__dot, &__dash {
+    &__dot,
+    &__dash {
         cursor: pointer;
         transition: all 0.2s ease;
     }
 
     &.--small-size {
-      #{$pagination}__page {
-        width: 40px;
-      }
+        #{$pagination}__page {
+            width: 40px;
+        }
     }
 
     &.--medium-size {
@@ -235,7 +248,8 @@ if (page >= 1 && page <= props.totalPages) {
             border-radius: var(--corner-radius-3xs);
         }
 
-        &.base-pagination--dotsWithBackground, &.base-pagination--dashesWithBackground {
+        &.base-pagination--dotsWithBackground,
+        &.base-pagination--dashesWithBackground {
             .base-pagination__list {
                 padding: var(--spacing-s);
                 gap: var(--spacing-m);
@@ -260,18 +274,18 @@ if (page >= 1 && page <= props.totalPages) {
             border-radius: var(--corner-radius-xxs);
         }
 
-        &.base-pagination--dotsWithBackground, &.base-pagination--dashesWithBackground {
+        &.base-pagination--dotsWithBackground,
+        &.base-pagination--dashesWithBackground {
             .base-pagination__list {
                 padding: var(--spacing-m);
                 gap: var(--spacing-l);
                 border-radius: var(--corner-radius-l);
             }
         }
-
     }
 
-    &--dotsWithBackground, &--dashesWithBackground {
-        /* Стили с фоном */
+    &--dotsWithBackground,
+    &--dashesWithBackground {
         &.base-pagination {
             width: fit-content;
 
@@ -280,12 +294,13 @@ if (page >= 1 && page <= props.totalPages) {
             }
 
             &.--color-primary {
-                .base-pagination__list {
-                    background: var(--primary-blue-700);
-                }
+                    .base-pagination__list {
+                        background: var(--primary-blue-700);
+                    }
 
-                .base-pagination__dot, .base-pagination__dash {
-                    background: var(--primary-blue-500);
+                    .base-pagination__dot,
+                    .base-pagination__dash {
+                        background: var(--primary-blue-500);
 
                     &--active {
                         background: var(--primary-black-white);
@@ -293,55 +308,60 @@ if (page >= 1 && page <= props.totalPages) {
                 }
             }
 
-            &.--color-secondary {
-                .base-pagination__list {
-                    background: var(--primary-blue-50);
-                }
+        &.--color-secondary {
+            .base-pagination__list {
+                background: var(--primary-blue-50);
+            }
 
-                .base-pagination__dot, .base-pagination__dash {
-                    background: var(--primary-blue-200);
+            .base-pagination__dot,
+            .base-pagination__dash {
+                background: var(--primary-blue-200);
 
-                    &--active {
-                        background: var(--primary-blue);
-                    }
+                &--active {
+                    background: var(--primary-blue);
                 }
             }
+        }
 
-            &.--color-white {
+        &.--color-white {
                 .base-pagination__list {
                     background: #fff;
                 }
 
-                .base-pagination__dot, .base-pagination__dash {
+                .base-pagination__dot,
+                .base-pagination__dash {
                     background: var(--primary-black-300);
 
-                    &--active {
-                        background: var(--primary-black-900);
-                    }
+                &--active {
+                    background: var(--primary-black-900);
                 }
             }
+        }
 
-            &.--color-black {
+        &.--color-black {
                 .base-pagination__list {
                     background: #000;
                 }
 
-                .base-pagination__dot, .base-pagination__dash {
+                .base-pagination__dot,
+                .base-pagination__dash {
                     background: var(--primary-black-500);
 
-                    &--active {
-                        background: var(--primary-black-white);
-                    }
+                &--active {
+                    background: var(--primary-black-white);
                 }
             }
         }
+        }
     }
 
-    &--dots, &--dashes {
+    &--dots,
+    &--dashes {
         &.--color-primary {
-            .base-pagination__dot, .base-pagination__dash {
+            .base-pagination__dot,
+            .base-pagination__dash {
                 background: var(--primary-blue-200);
-    
+
                 &--active {
                     background: var(--primary-blue);
                 }
@@ -349,19 +369,21 @@ if (page >= 1 && page <= props.totalPages) {
         }
 
         &.--color-secondary {
-            .base-pagination__dot, .base-pagination__dash {
+            .base-pagination__dot,
+            .base-pagination__dash {
                 background: var(--primary-blue-500);
-    
+
                 &--active {
-                    background: var(--primary-black-white);
+                background: var(--primary-black-white);
                 }
             }
         }
 
         &.--color-white {
-            .base-pagination__dot, .base-pagination__dash {
+            .base-pagination__dot,
+            .base-pagination__dash {
                 background: var(--primary-black-300);
-    
+
                 &--active {
                     background: var(--primary-black-900);
                 }
@@ -369,9 +391,10 @@ if (page >= 1 && page <= props.totalPages) {
         }
 
         &.--color-black {
-            .base-pagination__dot, .base-pagination__dash {
+            .base-pagination__dot,
+            .base-pagination__dash {
                 background: var(--primary-black-500);
-    
+
                 &--active {
                     background: var(--primary-black-white);
                 }

package/src/components/BaseSiteInput/BaseSiteInput.vue

@@ -1,8 +1,10 @@
 <template>
     <div :class="classList">
         <div class="base-site-input__wrapper">
-        <div class="base-site-input__url">
-            https://
+        <div class="base-site-input__url-wrapper">
+            <span class="base-site-input__url">
+                https://
+            </span>
         </div>
             <base-input 
                 v-bind="{...$props, ...$attrs}"
@@ -90,22 +92,31 @@ watch(modelValue, (value) => {
     }
 
     &__url {
+        color: var(--primary-text-tertiary);
+    }
+
+    &__url-wrapper {
+        background: var(--bg-light);
         display: flex;
         align-items: center;
         justify-content: center;
+        border-top-left-radius: var(--corner-radius-s);
         border-top: 1px solid var(--primary-black-300);
         border-bottom: 1px solid var(--primary-black-300);
         border-left: 1px solid var(--primary-black-300);
-        color: var(--primary-text-tertiary);
+        border-bottom-left-radius: var(--corner-radius-s);
     }
 
     &.--small-size {
         #{$input} {
-            &__url {
-                height: 22px;
+            &__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);
+            }
+
+            &__url {
                 padding: var(--spacing-s) var(--spacing-m) var(--spacing-s) var(--spacing-2l);
             }
         }
@@ -118,11 +129,14 @@ watch(modelValue, (value) => {
 
     &.--medium-size {
         #{$input} {
-            &__url {
-                height: 18px;
+            &__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);
+            }
+
+            &__url {
                 padding: var(--spacing-m) var(--spacing-m) var(--spacing-m) var(--spacing-2l);
             }
         }
@@ -135,11 +149,14 @@ watch(modelValue, (value) => {
 
     &.--large-size {
         #{$input} {
-            &__url {
-                height: 21px;
+            &__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);
+            }
+
+            &__url {
                 padding: var(--spacing-2l) var(--spacing-m) var(--spacing-2l) var(--spacing-l);
             }
         }