plugin-ui-for-kzt 0.0.9 → 0.0.11

package/src/components/BaseRadio/README.md

@@ -0,0 +1,74 @@
+### BaseRadio
+
+Компонент радиокнопки с поддержкой различных состояний, размеров и стилизованного отображения.
+
+---
+
+#### Props
+
+- `modelValue: boolean`  
+  Управляет активным состоянием радиокнопки. Используется с `v-model`.
+
+- `label?: string`  
+  Основной текст рядом с радиокнопкой.
+
+- `subLabel?: string`  
+  Дополнительный текст под основной меткой.
+
+- `size?: 'small' | 'medium'`  
+  Размер компонента. По умолчанию — `'medium'`.
+
+- `disabled?: boolean`  
+  Блокирует взаимодействие с компонентом. Визуально стилизуется как неактивный.
+
+- `readonly?: boolean`  
+  Делает компонент нечувствительным к кликам, но сохраняет внешний вид активного состояния.
+
+- `id?: string`  
+  Уникальный идентификатор для input-элемента (можно использовать для связки с label или в целях тестирования).
+
+---
+
+#### Emits
+
+- `update:modelValue`  
+  Срабатывает при выборе радиокнопки. Возвращает `true`.
+
+---
+
+#### Поведение
+
+- Клик по компоненту устанавливает значение `modelValue` в `true`.
+- Радиокнопка не может быть снята кликом, как чекбокс — выбор можно изменить только извне.
+- Клик работает по всей области — по иконке, тексту или обводке.
+- Компонент автоматически применяет стили фокуса, disabled, readonly и active.
+- Внутренний `input[type="radio"]` скрыт, но полностью участвует в логике формы (включая передачу `id` и `attrs`).
+
+---
+
+#### Стилизация
+
+Компонент адаптируется под выбранный размер (`small`, `medium`) и применяет дизайн-состояния:
+
+- `--is-active` — при `modelValue: true`
+- `--is-readonly` — при `readonly: true`
+- `--small-size`, `--medium-size` — в зависимости от `size`
+- `is-disabled` — через `useKitState`, на основе `disabled`
+
+Внутренние элементы оформлены в соответствии с дизайн-системой: иконка выбора, текст, а также эффекты наведения и фокуса.
+
+---
+
+#### Пример использования
+
+```vue
+<BaseRadio
+  v-model="selected"
+  label="Основной вариант"
+  sub-label="Дополнительная информация"
+/>
+```
+
+```ts
+const selected = ref(false);
+```

package/src/components/BaseSegmentedButtons/BaseSegmentedButtons.vue

@@ -0,0 +1,89 @@
+<template>
+<div class="base-segmented-buttons" :class="sizeClassList">
+    <div class="base-segmented-buttons__wrapper">
+        <base-button
+            v-for="option in options"
+            :key="option.value"
+            v-bind="buttonAttrs"
+            :color="modelValue === option.value ? 'primary' : 'secondary'"
+            @click="handleClick(option.value)"
+            >
+            {{ option.label }}
+        </base-button>
+    </div>
+</div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import BaseButton from '../BaseButton/BaseButton.vue';
+import { useKitSize } from '../../composables/kit/size'
+import type { TSegmentedButtonsProps } from '../../types/button';
+
+const props = withDefaults(defineProps<TSegmentedButtonsProps>(), {
+    size: 'medium',
+    options: () => [],
+});
+
+const emit = defineEmits<{
+    (e: 'update:modelValue', value: string): void;
+}>();
+
+const buttonAttrs = computed(() => {
+    return props;
+});
+
+const { sizeClassList } = useKitSize(props);
+
+const handleClick = (value: string) => {
+    emit('update:modelValue', value);
+};
+</script>
+
+<style lang="scss" scoped>
+@import '../../styles/variables';
+@import '../../styles/root';
+
+.base-segmented-buttons {
+    $button: &;
+
+    &__wrapper {
+        display: inline-flex;
+        align-items: center;
+        background: var(--primary-black-200);
+        overflow: hidden;
+    }
+
+    &.--extra-small-size {
+        #{$button} {
+            &__wrapper {
+                border-radius: var(--corner-radius-xs);
+            }
+        }
+    }
+
+    &.--small-size {
+        #{$button} {
+            &__wrapper {
+                border-radius: var(--corner-radius-s);
+            }
+        }
+    }
+
+    &.--medium-size {
+        #{$button} {
+            &__wrapper {
+                border-radius: var(--corner-radius-m);
+            }
+        }
+    }
+
+    &.--large-size {
+        #{$button} {
+            &__wrapper {
+                border-radius: var(--corner-radius-m);
+            }
+        }
+    }
+}
+</style>

package/src/components/BaseSegmentedButtons/README.md

@@ -0,0 +1,75 @@
+# BaseSegmentedButtons
+
+Vue-компонент для создания сегментированных кнопок (аналог табов). Позволяет переключаться между опциями, выделяя активную кнопку цветом `primary`, а неактивные — цветом `secondary`. Поддерживает минимум 2 кнопки.
+
+## Props
+
+| Проп         | Тип                 | По умолчанию | Описание                                                                 |
+|--------------|---------------------|--------------|-------------------------------------------------------------------------|
+| `modelValue` | `string`            | `''`         | Значение активной кнопки, соответствует `option.value`. Поддерживает `v-model`. |
+| `size`       | `'extra-small' \| 'small' \| 'medium' \| 'large'` | `'medium'` | Размер кнопок, влияет на высоту и отступы.                              |
+| `options`    | `Array<{ label: string, value: string }>` | `[]`       | Массив опций, каждая с `label` (текст кнопки) и `value` (уникальное значение). |
+
+## События
+
+- **`update:modelValue`**:  
+  Эмитируется при клике на кнопку, передаёт новое значение `option.value`.  
+  **Пример**: `update:modelValue="tab2"`.
+
+## Особенности
+
+- **Сегментированные кнопки**:  
+  Кнопки прилегают друг к другу, образуя единый блок с общим фоном. Скругление углов применяется к внешнему контейнеру.
+
+- **Цвета**:  
+  Активная кнопка: `primary` (синий фон).  
+  Неактивные кнопки: `secondary` (серый фон).
+
+- **Размеры**:  
+  Поддерживает `extra-small`, `small`, `medium`, `large`. Размер влияет на высоту кнопок и радиус углов контейнера.
+
+- **Наследование**:  
+  Кнопки наследуют атрибуты `<base-button>`, такие как `disabled`, `loading`.
+
+## Использование
+
+```vue
+<template>
+  <base-segmented-buttons
+    :options="[
+      { label: 'Tab 1', value: 'tab1' },
+      { label: 'Tab 2', value: 'tab2' },
+      { label: 'Tab 3', value: 'tab3' },
+    ]"
+    v-model="activeTab"
+    size="medium"
+  />
+  <p>Активная вкладка: {{ activeTab }}</p>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const activeTab = ref('tab1');
+</script>
+```
+
+## Зависимости
+
+- **Компоненты**:  
+  `<base-button>` — для рендеринга кнопок.
+
+- **Компосаблы**:  
+  `useKitSize` — для управления размерами.
+
+## Ограничения
+
+- **Минимальное количество опций**:  
+  Требуется минимум 2 опции в `options`. Рекомендуется добавить валидацию.
+
+
+## Примечания
+
+- Кнопки автоматически стыкуются благодаря `inline-flex` и общему фону контейнера.
+- Скругление углов применяется к `.base-segmented-buttons__wrapper`, а не к отдельным кнопкам.
+- Поддерживает состояния ошибки и фокуса через стили `<base-button>`.

package/src/components/BaseSelect/BaseSelect.vue

@@ -0,0 +1,370 @@
+<template>
+<div class="base-select" :class="[classList]">
+
+<div class="base-select__wrapper">
+    <label v-if="label" :for="id" class="base-select__label"> {{ label }}</label>
+
+        <base-dropdown
+            v-model="dropdownVisible"
+            transition-name="top"
+            auto-close
+            :disabled="actualDisabled"
+        >
+            <template #top>
+                <div
+                    :data-error="Boolean(error)"
+                    :data-disabled="disabled"
+                    class="base-select__header"
+                >
+                    <slot
+                        name="header"
+                        :value="actualOption"
+                    >
+                    <div v-if="$slots.headerIcon" class="base-select__header_prefix_icon">
+                        <slot name="headerIcon" />
+                    </div>
+
+                        <div
+                            v-if="actualOption"
+                            class="base-select__header_value"
+                        >
+                            {{ actualOption.name }}
+                        </div>
+
+                        <div
+                            v-else
+                            class="base-select__placeholder"
+                        >
+                            {{ placeholder }}
+                        </div>
+                    </slot>
+
+                    <div
+                        v-if="!readonly"
+                        class="base-select__arrow-wrapper"
+                    >
+
+                        <div class='base-select__arrow'>
+                        <base-icon
+                            name="arrow-down"
+                            :size="size"
+                        />
+                        </div>
+                    </div>
+                </div>
+            </template>
+
+            <template #dropdown>
+                <div
+                    v-if="(options ?? []).length"
+                    class="base-select__dropdown"
+                >
+                        <dynamic-scroller
+                            :items="options"
+                            :min-item-size="36"
+                            key-field="id"
+                            class="base-select__list"
+                        >
+                            <template #default="{ item, index, active }">
+                                <dynamic-scroller-item
+                                    :item="item"
+                                    :active="active"
+                                    :size-dependencies="[item.name]"
+                                    :data-index="index"
+                                >
+                                    <div class="base-select__item-wrapper">
+                                        <base-opened-list-item
+                                        v-bind="listItemAttrs(item)"
+                                        :key="item.id"
+                                        :size="size"
+                                    >
+                                        <template #icon>
+                                            <div v-if="$slots.iconItem">
+                                                <slot name="iconItem" :item="item" />
+                                            </div>
+                                        </template>
+                                        {{ listItemAttrs(item).title }}
+                                    </base-opened-list-item>
+                                    </div>
+                                </dynamic-scroller-item>
+                            </template>
+                        </dynamic-scroller>
+                </div>
+            </template>
+        </base-dropdown>
+
+        <div v-if="(error && typeof error === 'string') || hint" class="base-select__hint">
+            {{ error || hint }}
+        </div>
+</div>
+</div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue';
+import 'vue-virtual-scroller/dist/vue-virtual-scroller.css';
+import { DynamicScroller, DynamicScrollerItem } from 'vue-virtual-scroller';
+import type { ICoreSelectProps, TSelectValue, ICoreSelectBaseProps } from '../../types/input';
+import BaseDropdown from '../BaseDropdown/BaseDropdown.vue';
+import BaseOpenedListItem from '../BaseOpenedListItem/BaseOpenedListItem.vue';
+import { useKitSize } from '../../composables/kit/size';
+import { useKitState } from '../../composables/kit/state';
+import { useKitStyle } from '../../composables/kit/style';
+
+const props = withDefaults(defineProps<ICoreSelectProps & {
+  modelValue?: TSelectValue
+}>(), {
+  options: () => [],
+  size: 'medium',
+});
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: TSelectValue): void
+  (e: 'change', value: TSelectValue): void
+}>();
+
+const actualValue = ref<TSelectValue>(props.modelValue ?? '');
+const actualOption = computed(() =>
+  props.options?.find((item: ICoreSelectBaseProps) => item.id === actualValue.value) || null
+);
+
+watch(() => props.modelValue, (val) => {
+  actualValue.value = val;
+}, { immediate: true });
+
+function handleInput(value: TSelectValue) {
+  actualValue.value = value;
+  emit('update:modelValue', value);
+  emit('change', value);
+}
+const actualDisabled = computed(() => props.disabled || !props.options?.length);
+const dropdownVisible = ref(false);
+const { sizeClassList } = useKitSize(props);
+const { stateClassList } = useKitState(props);
+const { styleClassList } = useKitStyle(props);
+
+const listItemAttrs = computed(() => (item: ICoreSelectBaseProps) => ({
+  icon: item.icon,
+  active: actualValue.value === item.id,
+  title: item.name,
+  style: item.style,
+  disabled: item.disabled,
+  class: 'base-select__item',
+  onClick: () => handleInput(item.id),
+}));
+
+const classList = computed(() => [
+  sizeClassList.value,
+  stateClassList.value,
+  styleClassList.value,
+  {
+    '--is-readonly': props.readonly,
+    '--is-disabled': actualDisabled.value,
+  },
+]);
+</script>
+
+
+<style lang="scss">
+@import '../../styles/variables';
+@import '../../styles/root';
+
+.base-select {
+    $select: &;
+
+    min-width: 320px;
+
+    .dropdown {
+        &.--is-opened {
+            #{$select} {
+                &__arrow {
+                    transform: translate3d(0, -50%, 0) rotate(180deg);
+                }
+
+                &__header {
+                    border: 1px solid var(--primary-black-300);
+                    outline: 4px solid var(--effects-primary-focus);
+                }
+            }
+
+            .dropdown__dropdown {
+                margin-top: 4px;
+                transition: all var(--transition);
+            }
+        }
+    }
+
+    &.--is-error {
+      #{$select}__hint {
+        color: var(--error-red);
+      }
+
+      #{$select}__label {
+        border-color: var(--error-red-light-01);
+      }
+
+      #{$select}__arrow > * {
+        color: var(--error-red);
+      }
+
+      #{$select}__header {
+            border: 1px solid var(--error-red-light-01);
+        }
+    }
+
+    &__wrapper {
+        display: flex;
+        flex-direction: column;
+        gap: var(--spacing-2s);
+        width: 100%;
+        height: 100%;
+    }
+
+    &__header {
+        position: relative;
+        display: flex;
+        column-gap: var(--spacing-s);
+        align-items: center;
+        user-select: none;
+        background: var(--bg-light);
+        border: 1px solid var(--primary-black-300);
+        border-radius: var(--corner-radius-m);
+    }
+
+    &__placeholder {
+        @include text-clamp(1);
+
+        color: var(--primary-text-tertiary);
+    }
+
+    &__arrow-wrapper {
+        position: relative;
+        flex-shrink: 0;
+        margin-left: auto;
+    }
+
+    &__arrow {
+        position: absolute;
+        top: 50%;
+        color: var(--ui-colors-input-icon-default);
+        transition: transform var(--transition);
+        transform: translate3d(0, -50%, 0);
+    }
+
+    &__dropdown {
+        width: 100%;
+        height: 100%;
+    }
+
+    &__list {
+        width: 100%;
+    }
+
+    &__item {
+        width: 100%;
+    }
+
+    &.--small-size {
+        #{$select} {
+            &__label {
+                font: var(--typography-text-s-medium);
+            }
+
+            &__hint {
+                font: var(--typography-text-s-regular);
+            }
+
+            &__header_value {
+                font: var(--typography-text-m-regular);
+            }
+
+           &__dropdown {
+                border-radius: var(--corner-radius-s);
+           }
+
+           &__header {
+                height: 22px;
+                padding: var(--spacing-s) var(--spacing-2l);
+                border-radius: var(--corner-radius-s);
+           }
+
+           &__arrow, &__header_prefix_icon, &__arrow-wrapper {
+                width: 20px;
+                height: 20px;
+           }
+        }
+    }
+
+    &.--medium-size {
+        #{$select} {
+            &__label {
+                font: var(--typography-text-s-medium);
+            }
+
+            &__hint {
+                font: var(--typography-text-s-regular);
+            }
+
+            &__header_value {
+                font: var(--typography-text-m-regular);
+            }
+
+            &__header {
+                height: 22px;
+                padding: var(--spacing-m) var(--spacing-2l);
+            }
+
+            &__arrow, &__header_prefix_icon, &__arrow-wrapper {
+                width: 24px;
+                height: 24px;
+           }
+        }
+    }
+
+    &.--large-size {
+        #{$select} {
+            &__label {
+                font: var(--typography-text-m-medium);
+            }
+
+            &__hint {
+                font: var(--typography-text-m-regular);
+            }
+
+            &__header_value {
+                font: var(--typography-text-l-regular);
+            }
+
+            &__header {
+                height: 30px;
+                padding: var(--spacing-m) var(--spacing-l);
+            }
+
+            &__arrow, &__header_prefix_icon, &__arrow-wrapper {
+                width: 32px;
+                height: 32px;
+           }
+        }
+    }
+
+    &.--is-disabled {
+        #{$select} {
+            &__placeholder {
+                color: var(--ui-colors-input-text-disabled);
+            }
+
+            &__arrow {
+                color: var(--ui-colors-input-icon-disabled);
+            }
+        }
+    }
+
+    &.--is-readonly {
+        #{$select} {
+            &__header {
+                pointer-events: none;
+            }
+        }
+    }
+}
+</style>

package/src/components/BaseSelect/README.md

@@ -0,0 +1,95 @@
+## 🔽 BaseSelect
+
+Компонент выпадающего списка с поддержкой виртуального скролла, состояний (`readonly`, `disabled`), и пользовательских иконок. Используется для выбора значения из набора опций.
+
+---
+
+### ✅ Пример использования
+
+```vue
+<base-select
+  v-model="selected"
+  :options="[
+    { id: 1, name: 'Вариант 1' },
+    { id: 2, name: 'Вариант 2', disabled: true },
+    { id: 3, name: 'Вариант 3' }
+  ]"
+  label="Выбор опции"
+  placeholder="Выберите значение"
+  hint="Можно выбрать только один вариант"
+  :error="showError && 'Обязательное поле'"
+/>
+```
+
+---
+
+### ⚙️ Пропсы
+
+- `modelValue?: string | number | boolean | null`  
+  Управляемое значение выбранной опции (по `id`).
+
+- `id: string`  
+  Уникальный идентификатор для поля и `label`.
+
+- `options?: Array<{ id: string | number | boolean | null, name: string, disabled?: boolean, icon?: string, style?: [key: string] }>`  
+  Список доступных опций. Каждая должна иметь уникальный `id` и `name`.
+
+- `label?: string`  
+  Название поля. Показывается над селектом.
+
+- `placeholder?: string`  
+  Текст-заполнитель, отображаемый, если ничего не выбрано.
+
+- `readonly?: boolean`  
+  Делает поле только для чтения (неактивное выпадающее меню).
+
+- `disabled?: boolean`  
+  Полностью деактивирует селект и скрывает стрелку.
+
+- `hint?: string`  
+  Текст-подсказка под селектом.
+
+- `error?: string | boolean`  
+  Сообщение об ошибке. Если передана строка — она показывается как текст ошибки, а поле окрашивается в красный.
+
+- `size?: 'small' | 'medium' | 'large'`  
+  Управляет размерами шрифта, паддингов и иконок.
+
+- `multiple?: boolean`  
+  Поддержка множественного выбора (не реализовано в текущем компоненте, зарезервировано).
+
+- `transitionName?: string`  
+  Название transition-анимации (например, `"top"`).
+
+---
+
+### 📤 События
+
+- `update:modelValue`  
+  Эмитится при выборе значения. Возвращает `id` выбранного пункта.
+
+- `change`  
+  Также эмитится при выборе. Полезно для побочных эффектов.
+
+---
+
+### 🧩 Слоты
+
+- `header`  
+  Полная кастомизация заголовка выпадашки (вместо названия опции).
+
+- `headerIcon`  
+  Иконка слева от выбранной опции.
+
+- `iconItem`  
+  Иконка внутри опций (например, чекбокс, галочка или иконка элемента).
+
+---
+
+### 🎨 Поведение и стили
+
+- Поддерживаются состояния: `--is-disabled`, `--is-readonly`, `--is-error`, `--small-size`, `--medium-size`, `--large-size`.
+- При `disabled` или отсутствии опций (`options.length === 0`) меню не открывается.
+- Ошибки подсвечиваются красной рамкой, текстом и цветом иконки.
+- Используется `DynamicScroller` для отображения большого списка опций с виртуальным скроллом.
+- Анимация открытия выпадашки настраивается через `transition-name`.