plugin-ui-for-kzt 0.0.16 → 0.0.18

package/src/components/BaseBadge/BaseBadge.vue

@@ -0,0 +1,188 @@
+<template>
+    <div class="base-badge" :class="classList">
+        <div class="base-badge__wrapper">
+            <div class="base-badge__start">
+                <div v-if="hasDot" class="base-badge__dot"></div>
+                <base-icon 
+                    v-if="arrowUpIcon"
+                    class="base-badge__icon"  
+                    size="custom" 
+                    name="arrow-up"
+                />
+                <slot name="badge-group"></slot>
+            </div>
+            <div class="base-badge__text">
+                <slot name="text"></slot>
+            </div>
+            <div class="base-badge__close">
+                <base-icon 
+                    v-if="closable"
+                    class="base-badge__icon" 
+                    size="custom" 
+                    name="close"
+                    @click="$emit('close')"
+                />
+                <base-icon 
+                    v-if="arrowRightIcon"
+                    class="base-badge__icon" 
+                    size="custom" 
+                    name="arrow-right"
+                />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import BaseIcon from '../BaseIcon/BaseIcon.vue';
+import { useKitSize } from '../../composables/kit/size'
+import { useKitColor } from '../../composables/kit/color'
+import { computed } from 'vue';
+import type { ICoreBadgeProps } from '../../types/badge';
+
+const props = withDefaults(defineProps<ICoreBadgeProps>(), {
+  size: 'medium',
+  color: 'primary',
+});
+const emit: (event: 'close') => void = defineEmits();
+
+const { sizeClassList } = useKitSize(props);
+const { colorClassList } = useKitColor(props);
+
+const classList = computed(() => [
+    colorClassList.value,
+    sizeClassList.value,
+]);
+</script>
+
+<style scoped lang="scss">
+ @import '@/styles/variables';
+ @import '@/styles/root';
+
+    .base-badge {
+        cursor: pointer;
+
+        &__wrapper {
+            display: flex;
+            align-items: center;
+            width: fit-content;
+            flex-wrap: nowrap;
+            justify-content: space-between;
+            border-radius: var(--corner-radius-l);
+            overflow: hidden;
+        }
+
+        &__start {
+            display: flex;
+            align-items: center;
+        }
+
+        &__text {
+            flex-grow: 1;
+            text-align: center;
+        }
+
+        &__close {
+            display: flex;
+            align-items: center;
+        }
+
+        &__dot {
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            background-color: currentColor;
+        }
+
+        &.--primary-color {
+            color: var(--primary-blue);
+            .base-badge__wrapper {
+                background: var(--primary-blue-50);
+            }
+        }
+
+        &.--gray-color {
+            color: var(--primary-black-700);
+            .base-badge__wrapper {
+                background: var(--primary-black-100);
+            }
+        }
+
+        &.--error-color {
+            color: var(--error-red);
+            .base-badge__wrapper {
+                background: var(--error-red-light-05);
+            }
+        }
+
+        &.--warning-color {
+            color: var(--warning-orange);
+            .base-badge__wrapper {
+                background: var(--warning-orange-light-05);
+            }
+        }
+
+        &.--success-color {
+            color: var(--success-green);
+            .base-badge__wrapper {
+                background: var(--success-green-light-05);
+            }
+        }
+
+        &.--extra-small-size {
+            font: var(--typography-text-xs-medium);
+            
+            .base-badge__wrapper {
+                padding: var(--spacing-2xs) var(--spacing-s);
+                gap: var(--spacing-xs);
+            }
+
+            .base-badge__icon {
+                width: 12px;
+                height: 12px;
+            }
+        }
+
+        &.--small-size {
+            font: var(--typography-text-s-medium);
+            
+            .base-badge__wrapper {
+                padding: var(--spacing-2xs) var(--spacing-2m);
+                gap: var(--spacing-xs);
+            }
+
+            .base-badge__icon {
+                width: 14px;
+                height: 14px;
+            }
+        }
+
+        &.--medium-size {
+            font: var(--typography-text-s-medium);
+            
+            .base-badge__wrapper {
+                padding: var(--spacing-xs) var(--spacing-m);
+                gap: var(--spacing-2s);
+            }
+
+            .base-badge__icon {
+                width: 16px;
+                height: 16px;
+            }
+        }
+
+        &.--large-size {
+            font: var(--typography-text-m-medium);
+            
+            .base-badge__wrapper {
+                padding: var(--spacing-xs) var(--spacing-m);
+                gap: var(--spacing-2s);
+            }
+
+            .base-badge__icon {
+                width: 20px;
+                height: 20px;
+            }
+        }
+    }
+</style>

package/src/components/BaseBadge/BaseBadgeGroup.vue

@@ -0,0 +1,120 @@
+<template>
+    <div class="base-badge-group" :class="classList">
+        <div class="base-badge-group__wrapper">
+            <base-badge size="custom" :color="color" :arrow-right-icon="arrowRightIcon">
+                <template #badge-group>
+                    <div class="base-badge-group__text-container">
+                        <slot name="badge-text-container"></slot>
+                    </div>
+                </template>
+                <template #text>
+                    <div class="base-badge-group__text">
+                        <slot name="badge-text"></slot>
+                    </div>
+                </template>
+            </base-badge>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import BaseBadge from './BaseBadge.vue';
+import type { ICoreBadgeGroupProps } from '../../types/badge';
+import { useKitSize } from '../../composables/kit/size'
+import { useKitColor } from '../../composables/kit/color'
+
+const props = withDefaults(defineProps<ICoreBadgeGroupProps>(),{
+    size: 'medium',
+    badgePosition: 'left'
+});
+
+const { sizeClassList } = useKitSize(props);
+const { colorClassList } = useKitColor(props);
+
+const classList = computed(()=>[
+    sizeClassList.value,
+    colorClassList.value,
+    `--is-${props.badgePosition}`,
+])
+</script>
+
+<style scoped lang="scss">
+ @import '@/styles/variables';
+ @import '@/styles/root';
+
+ .base-badge-group {
+    &.--is-right {
+        :deep(.base-badge__wrapper) {
+            flex-direction: row-reverse;
+        }
+    }
+    .base-badge-group__text-container {
+        border-radius: var(--corner-radius-l);
+        overflow: hidden;
+        border: 1px solid;
+        background: var(--primary-black-white);
+    }
+    &.--medium-size {
+        :deep(.base-badge__wrapper) {
+            padding: var(--spacing-xs);
+            gap: var(--spacing-s);
+        }
+
+        :deep(.base-badge__icon) {
+            width: 16px;
+            height: 16px;
+        }
+
+        .base-badge-group__text-container {
+            padding: var(--spacing-2xs) var(--spacing-s);
+            font: var(--typography-text-xs-medium);
+        }
+
+        .base-badge-group__text {
+            font: var(--typography-text-xs-medium);
+        }
+    }
+
+    &.--large-size {
+        :deep(.base-badge__wrapper) {
+            padding: var(--spacing-xs);
+            gap: var(--spacing-s);
+        }
+
+        :deep(.base-badge__icon) {
+            width: 16px;
+            height: 16px;
+        }
+
+        .base-badge-group__text-container {
+            padding: var(--spacing-2xs) var(--spacing-2m);
+            font: var(--typography-text-s-medium);
+        }
+
+        .base-badge-group__text {
+            font: var(--typography-text-s-medium);
+        }
+    }
+
+    &.--primary-color {
+        border-color: var(--primary-blue-200);
+    }
+
+    &.--gray-color {
+        border-color: var(--primary-black-200);
+    }
+
+    &.--error-color {
+        border-color: var(--error-red-light-03);
+    }
+
+    &.--warning-color {
+        border-color: var(--warning-orange-light-03);
+    }
+
+    &.--success-color {
+        border-color: var(--success-green-light-03);
+    }
+ }
+</style>

package/src/components/BaseBadge/README.md

@@ -0,0 +1,127 @@
+```markdown
+# Компоненты BaseBadge и BaseBadgeGroup
+
+Этот документ предоставляет документацию для компонентов `BaseBadge` и `BaseBadgeGroup`, разработанных для использования в интерфейсах на основе Vue.js. Оба компонента предназначены для отображения информационных меток (бейджей) с различными стилями, цветами и размерами, а также поддерживают дополнительные элементы, такие как иконки и слоты для кастомизации.
+
+---
+
+## Компонент `BaseBadge`
+
+### Описание
+Компонент `BaseBadge` представляет собой универсальную метку, которая может содержать текст, иконки, точку-индикатор или кнопку закрытия. Он поддерживает кастомизацию размера, цвета и расположения элементов внутри метки.
+
+```vue
+<script setup lang="ts">
+import BaseBadge from './BaseBadge.vue';
+</script>
+```
+
+### Свойства (Props)
+
+| Параметр         | Тип                  | По умолчанию   | Описание                                   |
+|-------------------|----------------------|----------------|--------------------------------------------|
+| `size`           | `'extra-small' | 'small' | 'medium' | 'large'` | `'medium'` | Размер бейджа (влияет на шрифт и отступы). |
+| `color`          | `'primary' | 'gray' | 'error' | 'warning' | 'success'` | Цветовая схема бейджа.                    |
+| `hasDot`         | `boolean`            | `false`        | Отображение точки-индикатора слева.        |
+| `closable`       | `boolean`            | `false`        | Отображение иконки закрытия справа.        |
+| `arrowUpIcon`    | `boolean`            | `false`        | Отображение иконки стрелки вверх слева.    |
+| `arrowRightIcon` | `boolean`            | `false`        | Отображение иконки стрелки вправо справа.  |
+
+### Слоты (Slots)
+
+| Имя              | Описание                              |
+|-------------------|---------------------------------------|
+| `badge-group`    | Контейнер для вложенного контента слева от текста. |
+| `text`           | Основной текст бейджа.                |
+
+### Пример использования
+
+```vue
+<template>
+  <base-badge color="primary" hasDot closable>
+    <template #badge-group>
+      <base-icon name="alert" />
+    </template>
+    <template #text>
+      Новое уведомление
+    </template>
+  </base-badge>
+
+  <base-badge size="large" color="error" arrowRightIcon>
+    <template #text>
+      Ошибка
+    </template>
+  </base-badge>
+</template>
+
+<script setup lang="ts">
+import BaseBadge from './BaseBadge.vue';
+import BaseIcon from './BaseIcon.vue';
+</script>
+```
+
+## Компонент `BaseBadgeGroup`
+
+### Описание
+Компонент `BaseBadgeGroup` представляет собой контейнер, который оборачивает `BaseBadge` и добавляет дополнительный текстовый контейнер для группировки контента. Он поддерживает настройку положения бейджа (слева или справа) и наследует свойства цвета и размера от `BaseBadge`.
+
+### Установка
+Импортируйте компонент в ваш проект:
+
+```vue
+<script setup lang="ts">
+import BaseBadgeGroup from './BaseBadgeGroup.vue';
+</script>
+```
+
+### Свойства (Props)
+
+| Параметр         | Тип                  | По умолчанию   | Описание                                   |
+|-------------------|----------------------|----------------|--------------------------------------------|
+| `size`           | `'medium' | 'large'` | `'medium'` | Размер группы бейджа.                     |
+| `color`          | `'primary' | 'gray' | 'error' | 'warning' | 'success'` | Цветовая схема группы.                   |
+| `arrowRightIcon` | `boolean`            | `false`        | Отображение иконки стрелки вправо.         |
+| `badgePosition`  | `'left' | 'right'`  | `'left'`   | Положение бейджа относительно текста.     |
+
+### Слоты (Slots)
+
+| Имя                  | Описание                              |
+|-----------------------|---------------------------------------|
+| `badge-text-container`| Контейнер для текста слева от бейджа. |
+| `badge-text`          | Текст внутри бейджа.                  |
+
+### Пример использования
+
+```vue
+<template>
+  <base-badge-group color="success" badgePosition="right">
+    <template #badge-text-container>
+      <span>Категория:</span>
+    </template>
+    <template #badge-text>
+      Успешно
+    </template>
+  </base-badge-group>
+
+  <base-badge-group size="large" color="warning" arrowRightIcon>
+    <template #badge-text-container>
+      <span>Статус:</span>
+    </template>
+    <template #badge-text>
+      Предупреждение
+    </template>
+  </base-badge-group>
+</template>
+
+<script setup lang="ts">
+import BaseBadgeGroup from './BaseBadgeGroup.vue';
+</script>
+```
+
+### Стили
+- Поддерживаются динамические классы для размеров (`--medium-size`, `--large-size`) и цветов (`--primary-color`, `--gray-color`, и т.д.).
+- Позиция бейджа управляется через класс `--is-left` или `--is-right`.
+- Граница текстового контейнера адаптируется к цветовой схеме.
+
+## Примечания
+- Компоненты поддерживают кастомизацию через слоты, что позволяет гибко изменять содержимое.

package/src/components/BaseBreadCrumbs/BaseBreadCrumbs.vue

@@ -26,9 +26,8 @@
 
         <span
             v-if="index < displayedCrumbs.length - 1"
-            class="base-breadcrumbs__separator"
-        >
-          /
+            class="base-breadcrumbs__separator" >
+          {{ separator }}
         </span>
       </li>
     </ul>
@@ -44,6 +43,7 @@ const props = withDefaults(defineProps<IBaseBreadCrumbProps>(), {
   size: 'medium',
 });
 
+const separator = '/'
 const { sizeClassList } = useKitSize(props);
 
 const classList = computed(() => [sizeClassList.value]);