plugin-ui-for-kzt 0.0.20 → 0.0.21

package/src/components/BaseField/BaseField.vue

@@ -1,184 +0,0 @@
-<template>
-    <div class="base-field" :class="classList">
-        <label class="base-field__label" :for="id">
-            <span v-if="label" class="base-field__label-text">{{ label }}</span>
-            <div class="base-field__wrapper" :class="{ 'base-field__wrapper--focusable': focusable}" :tabindex="tabIndex">
-                <slot :data="componentAttrs" />
-            </div>
-            <transition name="error">
-                <div 
-                    v-if="(error && typeof error === 'string') || hint" 
-                    class="base-field__hint"
-                    aria-live="polite"
-                >
-                    {{ error || hint }}
-                </div>
-            </transition>
-        </label>
-    </div>
-</template>
-
-<script setup lang="ts">
-import { computed, useAttrs } from 'vue';
-import { useKitSize } from '../../composables/kit/size';
-import { useKitState } from '../../composables/kit/state';
-
-import type { TFieldProps } from '../../types/field';
-
-interface IDefaultSlotProps {
-    id: string;
-    error?: string;
-    size?: string;
-    focusable?: boolean;
-}
-
-const props = withDefaults(defineProps<TFieldProps>(), {
-    size: 'medium',
-    id: '',
-    label: '',
-    hint: '',
-    error: '',
-    focusable: true,
-    tabIndex: 0,
-});
-
-defineEmits<{
-    (event: 'update:modelValue', value: string): void;
-    (event: 'error', value: string): void;
-}>();
-
-const attrs = useAttrs();
-const { stateAttrs } = useKitState(props);
-const { sizeClassList } = useKitSize(props);
-
-const componentAttrs = computed<IDefaultSlotProps>(() => ({
-    ...(attrs || {}),
-    ...(stateAttrs.value || {}),
-    id: props.id,
-    error: props.error,
-    size: props.size,
-}));
-
-const classList = computed(() => [
-    ...sizeClassList.value,
-    { '--is-error': props.error && typeof props.error === 'string' },
-]);
-</script>
-
-<style scoped lang="scss">
-@import '../../styles/variables';
-@import '../../styles/root';
-
-.base-field {
-    width: 100%;
-
-    &__wrapper {
-        display: flex;
-        flex-direction: column;
-        width: 100%;
-        position: relative;
-        transition: all var(--transition);
-
-        &--focusable {
-            @include focused {
-                border: 1px solid var(--primary-blue-500);
-                outline: 4px solid var(--effects-primary-focus);
-            }
-        }
-    }
-
-    &__label {
-        display: flex;
-        flex-direction: column;
-        gap: 6px;
-        width: 100%;
-    }
-
-    &__label-text {
-        color: var(--primary-text-primary);
-    }
-
-    &__hint {
-        color: var(--primary-text-secondary);
-        overflow: hidden;
-        max-height: 100px;
-        transition: all 0.3s ease;
-    }
-
-    &.--is-error {
-        .base-field__wrapper {
-            &--focusable {
-                @include focused {
-                    border: none;
-                    outline: 4px solid var(--effects-error-focus);
-                }
-            }
-        }
-
-        .base-field__hint {
-            color: var(--error-red);
-        }
-    }
-
-    &.--small-size {
-        .base-field__wrapper {
-            border-radius: 10px;
-        }
-
-        .base-field__label-text {
-            font: var(--typography-text-s-medium);
-        }
-
-        .base-field__hint {
-            font: var(--typography-text-s-regular);
-        }
-    }
-
-    &.--medium-size {
-        .base-field__wrapper {
-            border-radius: 12px;
-        }
-
-        .base-field__label-text {
-            font: var(--typography-text-s-medium);
-        }
-
-        .base-field__hint {
-            font: var(--typography-text-s-regular);
-        }
-    }
-
-    &.--large-size {
-        .base-field__wrapper {
-            border-radius: 12px;
-        }
-
-        .base-field__label-text {
-            font: var(--typography-text-m-medium);
-        }
-
-        .base-field__hint {
-            font: var(--typography-text-m-regular);
-        }
-    }
-}
-
-.error-enter-active,
-.error-leave-active {
-    transition: opacity 0.3s ease, max-height 0.3s ease, transform 0.3s ease;
-}
-
-.error-enter-from,
-.error-leave-to {
-    opacity: 0;
-    transform: translateY(10px);
-    max-height: 0;
-}
-
-.error-enter-to,
-.error-leave-from {
-    opacity: 1;
-    transform: translateY(0);
-    max-height: 100px;
-}
-</style>

package/src/components/BaseField/README.md

@@ -1,85 +0,0 @@
-BaseField Component
-BaseField — это универсальный компонент-обертка для полей ввода, который предоставляет стилизованную обертку, метку (label), подсказку (hint) и обработку ошибок. Компонент предназначен для использования в связке с другими компонентами ввода, такими как BaseInput, через механизм слотов Vue.
-
-
-Использование
-Компонент BaseField используется как обертка для других компонентов ввода, таких как BaseInput. Он предоставляет метку, подсказку и стили для обработки ошибок.
-Пример использования
-<template>
-  <BaseField
-    id="test-input"
-    label="Test Input"
-    hint="Enter your text"
-    :error="errorValue"
-    size="medium"
-  >
-    <BaseInput
-      v-model="inputValue"
-      type="text"
-      placeholder="Type here"
-      id="test-input"
-    />
-  </BaseField>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue';
-import BaseField from './BaseField.vue';
-import BaseInput from './BaseInput.vue';
-
-const inputValue = ref('');
-const errorValue = ref('Input must be at least 3 characters long');
-</script>
-
-
-События
-
-update:modelValue
-value: string
-Эмитируется при обновлении значения поля ввода.
-
-error
-value: string
-Эмитируется при возникновении ошибки в поле ввода.
-
-
-Слоты
-
-default
-Основной слот для размещения компонента ввода (например, BaseInput).
-
-Слот передает объект с пропсами, включая componentAttrs, который содержит объединенные атрибуты из useAttrs и stateAttrs.
-
-
-Стили
-Компонент использует SCSS для стилизации. Основные классы:
-
-.base-field: Основной контейнер компонента.
-.base-field__label: Контейнер для метки и поля ввода.
-.base-field__label-text: Текст метки.
-.base-field__wrapper: Обертка для содержимого слота.
-.base-field__hint: Текст подсказки или ошибки.
-.--is-error: Модификатор для отображения состояния ошибки.
-.--small-size, .--medium-size, .--large-size: Модификаторы для разных размеров.
-
-
-Типизация
-Компонент использует TypeScript и ожидает тип TFieldProps из файла types/field. Пример структуры:
-export interface TFieldProps {
-  id?: string;
-  label?: string;
-  hint?: string;
-  error?: string | boolean;
-  size?: string;
-  focusable?: boolean;
-  tabIndex?: number;
-}
-
-Примечания
-
-Если focusable равно false, атрибут tabindex не применяется, и обертка не будет фокусируемой.
-
-Ограничения
-
-Компонент предполагает наличие вложенного компонента ввода в слоте (например, BaseInput). Без содержимого слота функциональность ограничена.
-Стили и размеры зависят от внешних переменных и composable-функций, которые должны быть настроены в проекте.

package/src/types/field.d.ts

@@ -1,12 +0,0 @@
-import type { ICoreSize, ICoreState } from './utils';
-
-interface IFieldProps {
-    id: string
-    label: string
-    hint?: string
-    error?: string | boolean
-    focusable?: boolean
-    tabIndex?: number
-}
-
-export type TFieldProps = IFieldProps & ICoreSize & ICoreState;