plugin-ui-for-kzt 0.0.15 → 0.0.17

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

@@ -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

@@ -0,0 +1,405 @@
+<template>
+<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"
+    />
+        <slot name="previousTextButton">Назад</slot>
+    </base-button>
+
+    <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)"
+            >
+                {{ page }}
+            </base-button>
+        </li>
+    </template>
+
+    <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'"
+        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"
+        />
+    </base-button>
+</nav>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue';
+import type { TPaginationProps } from '../../types/pagination';
+import { useKitSize } from '../../composables/kit/size';
+import BaseButton from '../BaseButton/BaseButton.vue';
+import BaseIcon from '../BaseIcon/BaseIcon.vue';
+
+const props = withDefaults(defineProps<TPaginationProps>(), {
+    type: 'numbers',
+    currentPage: 1,
+    totalPages: 1,
+    maxDisplayedPages: 5,
+    size: 'medium',
+    color: 'primary',
+});
+
+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(() => {
+    if (props.type !== 'numbers') return [];
+
+    const pages = [];
+    const maxDisplayed = props.maxDisplayedPages;
+    const halfDisplayed = Math.floor(maxDisplayed / 2);
+
+    if (props.totalPages <= maxDisplayed) {
+        for (let i = 1; i <= props.totalPages; i++) {
+            pages.push(i);
+        }
+    } else {
+        let start = Math.max(1, currentPage.value - halfDisplayed);
+        let end = Math.min(props.totalPages, currentPage.value + halfDisplayed);
+
+        if (end - start + 1 < maxDisplayed) {
+            if (currentPage.value - 1 <= halfDisplayed) {
+                end = maxDisplayed;
+            } else if (props.totalPages - currentPage.value < halfDisplayed) {
+                start = props.totalPages - maxDisplayed + 1;
+            }
+        }
+
+        if (start > 2) {
+            pages.push(1);
+            if (start > 3) {
+                pages.push('ellipsis');
+            }
+        }
+
+        for (let i = start; i <= end; i++) {
+            pages.push(i);
+        }
+
+        if (end < props.totalPages - 1) {
+            if (end < props.totalPages - 2) {
+                pages.push('ellipsis');
+            }
+            pages.push(props.totalPages);
+        }
+    }
+
+    return pages;
+});
+
+const isActiveButtonColor = (page: string | number) => {
+    return currentPage.value === page ? 'primary' : 'secondary';
+};
+
+const classList = computed(() => [
+sizeClassList.value,
+`base-pagination--${props.type}`,
+`--color-${props.color}`,
+]);
+
+const goToPage = (page: number) => {
+    if (page >= 1 && page <= props.totalPages) {
+        currentPage.value = page;
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+@import '@/styles/variables';
+@import '@/styles/root';
+
+.base-pagination {
+    $pagination: &;
+
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-s);
+
+    &__list {
+        display: flex;
+        align-items: center;
+        gap: var(--spacing-s);
+        list-style: none;
+        padding: 0;
+        margin: 0;
+    }
+
+    &__item {
+        display: flex;
+    }
+
+    &__page {
+        transition: all 0.2s ease;
+
+        &--active {
+            cursor: default;
+        }
+    }
+
+    &__ellipsis {
+        cursor: default;
+    }
+
+    &__nav {
+        cursor: pointer;
+        transition: all 0.2s ease;
+    }
+
+    &__dot {
+        border-radius: 50%;
+    }
+
+    &__dot,
+    &__dash {
+        cursor: pointer;
+        transition: all 0.2s ease;
+    }
+
+    &.--small-size {
+        #{$pagination}__page {
+            width: 40px;
+        }
+    }
+
+    &.--medium-size {
+        #{$pagination}__page {
+            width: 48px;
+        }
+
+        #{$pagination}__dot {
+            width: 8px;
+            height: 8px;
+        }
+
+        #{$pagination}__dash {
+            width: 42.67px;
+            height: 6px;
+            border-radius: var(--corner-radius-3xs);
+        }
+
+        &.base-pagination--dotsWithBackground,
+        &.base-pagination--dashesWithBackground {
+            .base-pagination__list {
+                padding: var(--spacing-s);
+                gap: var(--spacing-m);
+                border-radius: var(--corner-radius-m);
+            }
+        }
+    }
+
+    &.--large-size {
+        #{$pagination}__page {
+            width: 56px;
+        }
+
+        #{$pagination}__dot {
+            width: 10px;
+            height: 10px;
+        }
+
+        #{$pagination}__dash {
+            width: 42.67px;
+            height: 8px;
+            border-radius: var(--corner-radius-xxs);
+        }
+
+        &.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 {
+        &.base-pagination {
+            width: fit-content;
+
+            .base-pagination__list {
+                overflow: hidden;
+            }
+
+            &.--color-primary {
+                    .base-pagination__list {
+                        background: var(--primary-blue-700);
+                    }
+
+                    .base-pagination__dot,
+                    .base-pagination__dash {
+                        background: var(--primary-blue-500);
+
+                    &--active {
+                        background: var(--primary-black-white);
+                    }
+                }
+            }
+
+        &.--color-secondary {
+            .base-pagination__list {
+                background: var(--primary-blue-50);
+            }
+
+            .base-pagination__dot,
+            .base-pagination__dash {
+                background: var(--primary-blue-200);
+
+                &--active {
+                    background: var(--primary-blue);
+                }
+            }
+        }
+
+        &.--color-white {
+                .base-pagination__list {
+                    background: #fff;
+                }
+
+                .base-pagination__dot,
+                .base-pagination__dash {
+                    background: var(--primary-black-300);
+
+                &--active {
+                    background: var(--primary-black-900);
+                }
+            }
+        }
+
+        &.--color-black {
+                .base-pagination__list {
+                    background: #000;
+                }
+
+                .base-pagination__dot,
+                .base-pagination__dash {
+                    background: var(--primary-black-500);
+
+                &--active {
+                    background: var(--primary-black-white);
+                }
+            }
+        }
+        }
+    }
+
+    &--dots,
+    &--dashes {
+        &.--color-primary {
+            .base-pagination__dot,
+            .base-pagination__dash {
+                background: var(--primary-blue-200);
+
+                &--active {
+                    background: var(--primary-blue);
+                }
+            }
+        }
+
+        &.--color-secondary {
+            .base-pagination__dot,
+            .base-pagination__dash {
+                background: var(--primary-blue-500);
+
+                &--active {
+                background: var(--primary-black-white);
+                }
+            }
+        }
+
+        &.--color-white {
+            .base-pagination__dot,
+            .base-pagination__dash {
+                background: var(--primary-black-300);
+
+                &--active {
+                    background: var(--primary-black-900);
+                }
+            }
+        }
+
+        &.--color-black {
+            .base-pagination__dot,
+            .base-pagination__dash {
+                background: var(--primary-black-500);
+
+                &--active {
+                    background: var(--primary-black-white);
+                }
+            }
+        }
+    }
+}
+</style>