plugin-ui-for-kzt 0.0.16 → 0.0.18

package/src/components/BaseButton/BaseButton.vue

@@ -83,7 +83,8 @@ const classList = computed(() => [
     appearance: none;
     cursor: pointer;
     user-select: none;
-    transition: all var(--ui-transition);
+    transition: all var(--transition);
+
 
     &.--is-loading {
         @include loading-element;
@@ -158,10 +159,6 @@ const classList = computed(() => [
         color: var(--primary-black-white);
         background: var(--primary-blue);
 
-        i,svg {
-            color: var(--primary-black-white) !important;
-        }
-
         @include hover {
             background: var(--primary-blue-800);
         }
@@ -171,16 +168,14 @@ const classList = computed(() => [
         }
 
         @include focused {
-            outline: 4px solid var(--effects-primary-focus);
+            outline-width: 4px !important;
+            outline-color: var(--effects-primary-focus) !important;
+            outline-style: solid;
         }
 
         @include is-disabled-state {
             color: var(--primary-blue-100);
             background: var(--primary-blue-300);
-
-            i,svg {
-                color: var(--primary-blue-100) !important;
-            }
         }
     }
 
@@ -188,10 +183,6 @@ const classList = computed(() => [
         color: var(--primary-black-800);
         background: var(--primary-black-200);
 
-        i,svg {
-            color: var(--primary-black-800) !important;
-        }
-
         @include hover {
             color: var(--primary-black-900);
             background: var(--primary-black-300);
@@ -202,16 +193,14 @@ const classList = computed(() => [
         }
 
         @include focused {
-            outline: 4px solid var(--effects-primary-focus);
+            outline-width: 4px !important;
+            outline-color: var(--effects-primary-focus) !important;
+            outline-style: solid;
         }
 
         @include is-disabled-state {
             color: var(--primary-black-400);
             background: var(--primary-black-100);
-
-            i,svg {
-                color: var(--primary-black-400) !important;
-            }
         }
     }
 
@@ -220,18 +209,10 @@ const classList = computed(() => [
         background: transparent;
         border: 1px solid var(--primary-black-400);
 
-        i,svg {
-            color: var(--primary-black-600) !important;
-        }
-
         @include hover {
             color: var(--primary-black-700);
             text-decoration: none;
             border: 1px solid var(--primary-black-500);
-
-            i,svg {
-                color: var(--primary-black-700) !important;
-            }
         }
 
         @include pressed {
@@ -241,16 +222,14 @@ const classList = computed(() => [
 
         @include focused {
             border: 1px solid var(--primary-black-400);
-            outline: 4px solid var(--effects-primary-focus);
+            outline-width: 4px !important;
+            outline-color: var(--effects-primary-focus) !important;
+            outline-style: solid;
         }
 
         @include is-disabled-state {
             color: var(--primary-black-400);
             border: 1px solid var(--primary-black-300);
-
-            i,svg {
-                color: var(--primary-black-400) !important;
-            }
         }
     }
 
@@ -259,18 +238,10 @@ const classList = computed(() => [
         background: transparent;
         border: 1px solid var(--primary-blue);
 
-        i,svg {
-            color: var(--primary-blue) !important;
-        }
-
         @include hover {
             color: var(--primary-blue-800);
             text-decoration: none;
             border: 1px solid var(--primary-blue-800);
-
-            i,svg {
-                color: var(--primary-blue-800) !important;
-            }
         }
 
         @include pressed {
@@ -279,16 +250,14 @@ const classList = computed(() => [
         }
 
         @include focused {
-            outline: 4px solid var(--effects-primary-focus);
+            outline-width: 4px !important;
+            outline-color: var(--effects-primary-focus) !important;
+            outline-style: solid;
         }
 
         @include is-disabled-state {
             color: var(--primary-black-400);
             border: 1px solid var(--primary-black-300);
-
-            i,svg {
-                color: var(--primary-black-400) !important;
-            }
         }
     }
 
@@ -296,17 +265,9 @@ const classList = computed(() => [
         color: var(--primary-black-600);
         background: transparent;
 
-        i,svg {
-            color: var(--primary-black-600) !important;
-        }
-
         @include hover {
             color: var(--primary-black-700);
             background: var(--primary-black-100);
-
-            i,svg {
-                color: var(--primary-black-700) !important;
-            }
         }
 
         @include pressed {
@@ -316,15 +277,13 @@ const classList = computed(() => [
 
         @include focused {
             background: rgb(255 255 255 / 10%);
-            outline: 4px solid var(--effects-primary-focus);
+            outline-width: 4px !important;
+            outline-color: var(--effects-primary-focus) !important;
+            outline-style: solid;
         }
 
         @include is-disabled-state {
             color: var(--primary-black-400);
-
-            i,svg {
-                color: var(--primary-black-400) !important;
-            }
         }
     }
 
@@ -332,18 +291,10 @@ const classList = computed(() => [
         color: var(--primary-blue);
         background: transparent;
 
-        i,svg {
-            color: var(--primary-blue) !important;
-        }
-
         @include hover {
             color: var(--primary-blue-900);
             text-decoration: none;
             background: var(--primary-blue-100);
-
-            i,svg {
-                color: var(--primary-blue-900) !important;
-            }
         }
 
         @include pressed {
@@ -353,15 +304,13 @@ const classList = computed(() => [
 
         @include focused {
             background: rgb(255 255 255 / 10%);
-            outline: 4px solid var(--effects-primary-focus);
+            outline-width: 4px !important;
+            outline-color: var(--effects-primary-focus) !important;
+            outline-style: solid;
         }
 
         @include is-disabled-state {
             color: var(--primary-black-400);
-
-            i,svg {
-                color: var(--primary-black-400) !important;
-            }
         }
     }
 
@@ -371,37 +320,23 @@ const classList = computed(() => [
         background: transparent;
         padding: var(--corner-radius-xxs);
 
-        i,svg {
-            color: var(--primary-blue) !important;
-        }
-
         @include hover {
             color: var(--secondary-text-link-hover);
-
-            i,svg {
-                color: var(--primary-blue-700) !important;
-            }
         }
 
         @include pressed {
             color: var(--secondary-text-link-pressed);
-
-            i,svg {
-                color: var(--primary-blue-700) !important;
-            }
         }
 
         @include focused {
             background: rgb(255 255 255 / 10%);
-            outline: 4px solid var(--effects-primary-focus);
+            outline-width: 4px !important;
+            outline-color: var(--effects-primary-focus) !important;
+            outline-style: solid;
         }
 
         @include is-disabled-state {
             color: var(--secondary-text-link-disabled);
-
-            i,svg {
-                color: var(--primary-black-400) !important;
-            }
         }
     }
 
@@ -411,37 +346,23 @@ const classList = computed(() => [
         background: transparent;
         padding: var(--corner-radius-xxs);
 
-        i,svg {
-            color: var(--error-red) !important;
-        }
-
         @include hover {
             color: var(--error-red-light-01);
-
-            i,svg {
-                color: var(--error-red-light-01) !important;
-            }
         }
 
         @include pressed {
             color: var(--error-red-deep);
-
-            i,svg {
-                color: var(--error-red-deep) !important;
-            }
         }
 
         @include focused {
             background: rgb(255 255 255 / 10%);
-            outline: 4px solid var(--effects-error-focus);
+            outline-width: 4px !important;
+            outline-color: var(--effects-primary-focus) !important;
+            outline-style: solid;
         }
 
         @include is-disabled-state {
             color: var(--primary-black-400);
-
-            i,svg {
-                color: var(--primary-black-400) !important;
-            }
         }
     }
 
@@ -451,38 +372,24 @@ const classList = computed(() => [
         text-decoration: underline;
         padding: var(--corner-radius-xxs);
 
-        i,svg {
-            color: var(--primary-black) !important;
-        }
-
         @include hover {
             color: var(--secondary-text-gray-link-hover);
-
-            i,svg {
-                color: var(--primary-black-500) !important;
-            }
         }
 
         @include pressed {
             color: var(--secondary-text-gray-link-pressed);
-
-            i,svg {
-                color: var(--primary-black-700) !important;
-            }
         }
 
         @include focused {
             background: rgb(255 255 255 / 10%);
-            outline: 4px solid var(--effects-gray-focus);
+            outline-width: 4px !important;
+            outline-color: var(--effects-primary-focus) !important;
+            outline-style: solid;
         }
 
         @include is-disabled-state {
             color: var(--secondary-text-gray-link-disabled);
             border-bottom: none;
-
-            i,svg {
-                color: var(--primary-black-400) !important;
-            }
         }
     }
 }

package/src/components/BaseChips/BaseChips.vue

@@ -0,0 +1,182 @@
+<template>
+    <div class="base-chips" :class="classList">
+        <button class="base-chips__wrapper">
+            <div class="base-chips__content">
+                <div v-if="iconName" class="base-chips__icon">
+                    <base-icon
+                        :name="iconName"
+                        :size="props.size"
+                    />
+                </div>
+                <div class="base-chips__text">{{ text }}</div>
+                <div v-if="count" class="base-chips__count">{{ count }}</div>
+            </div>
+        </button>
+    </div>
+</template>
+
+<script setup lang="ts">
+import type { ICoreChipsProps } from '../../types/chips';
+import { useKitSize } from '../../composables/kit/size';
+import BaseIcon from '../BaseIcon/BaseIcon.vue';
+import { computed } from 'vue';
+
+const props = withDefaults(defineProps<ICoreChipsProps>(), {
+    size: 'medium',
+});
+
+const { sizeClassList } = useKitSize(props);
+
+const classList = computed(() => [
+    sizeClassList.value,
+    { '--is-active': props.active }
+]);
+</script>
+
+<style lang="scss">
+@import '../../styles/variables';
+@import '../../styles/root';
+
+.base-chips {
+    $chip: &;
+
+    button {
+        border: none;
+        outline: none;
+        margin: 0;
+        padding: 0;
+        display: block;
+    }
+
+    &__wrapper {
+        overflow: hidden;
+        cursor: pointer;
+        height: 100%;
+        width: fit-content;
+        background: var(--primary-black-200);
+        color: var(--primary-black-800);
+        transition: all var(--transition);
+        
+        @include hover {
+            background: var(--primary-black-300);
+            color: var(--primary-black-900);
+        }
+
+        @include focused {
+            background: var(--primary-black-200);
+            color: var(--primary-black-800);
+            outline-width: 4px;
+            outline-color: var(--effects-primary-focus);
+            outline-style: solid;
+        }
+
+        @include pressed {
+            background: var(--primary-black-400);
+            color: var(--primary-black);
+        }
+    }
+
+    &__content {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    &.--is-active {
+        #{$chip}__wrapper {
+            background: var(--primary-blue);
+            color: var(--primary-black-white);
+
+            @include hover {
+                background: var(--primary-black-300);
+                color: var(--primary-black-900);
+            }
+
+            @include pressed {
+                background: var(--primary-black-400);
+                color: var(--primary-black);
+            }
+        }
+    }
+
+    &.--extra-small-size {
+        #{$chip} {
+            &__content {
+                padding: var(--spacing-2s) var(--spacing-m);
+                gap: var(--spacing-xs);
+            }
+
+            &__wrapper {
+                height: 32px;
+                font: var(--typography-text-s-medium);
+                border-radius: var(--corner-radius-xl);
+            }
+
+            &__count {
+                transform: translateY(-3px);
+                font: var(--typography-text-xs-medium);
+            }
+        }
+    }
+
+    &.--small-size {
+        #{$chip} {
+            &__content {
+                padding: var(--spacing-s) var(--spacing-l);
+                gap: var(--spacing-s);
+            }
+
+            &__wrapper {
+                height: 40px;
+                font: var(--typography-text-m-medium);
+                border-radius: var(--corner-radius-xl);
+            }
+
+            &__count {
+                transform: translateY(-3px);
+                font: var(--typography-text-xs-medium);
+            }
+        }
+    }
+
+    &.--medium-size {
+        #{$chip} {
+            &__content {
+                padding: var(--spacing-2m) var(--spacing-l);
+                gap: var(--spacing-s);
+            }
+
+            &__wrapper {
+                height: 48px;
+                font: var(--typography-text-l-medium);
+                border-radius: var(--corner-radius-xl);
+            }
+
+            &__count {
+                transform: translateY(-4px);
+                font: var(--typography-text-s-medium);
+            }
+        }
+    }
+
+    &.--large-size {
+        #{$chip} {
+            &__content {
+                padding: var(--spacing-2l) var(--spacing-l);
+                gap: var(--spacing-s);
+            }
+
+            &__wrapper {
+                height: 56px;
+                font: var(--typography-text-l-medium);
+                border-radius: var(--corner-radius-2xl);
+            }
+
+            &__count {
+                transform: translateY(-5px);
+                font: var(--typography-text-s-medium);
+            }
+        }
+    }
+}
+</style>

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

@@ -83,7 +83,7 @@ function handleInput(event: Event) {
 @import '../../styles/root';
 
   .base-input {
-    width: max-content;
+    width: 100%;
     $input: &;
 
     &__wrapper {
@@ -91,17 +91,18 @@ function handleInput(event: Event) {
       display: flex;
       flex-direction: column;
       align-items: flex-start;
-      width: fit-content;
+      width: 100%;
     }
 
     &__field {
       flex: 1;
-      width: auto;
+      width: 100%;
       height: 100%;
       color: var(--primary-text-primary);
       background: var(--bg-light);
       border: 1px solid var(--primary-black-300);
       outline: none;
+      transition: all var(--transition);
 
       &::placeholder {
         color: var(--primary-text-tertiary);
@@ -151,6 +152,7 @@ function handleInput(event: Event) {
       display: flex;
       flex-direction: column;
       gap: 6px;
+      width: 100%;
     }
 
     &__label-text {