plugin-ui-for-kzt 0.0.21 → 0.0.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "plugin-ui-for-kzt",
-  "version": "0.0.21",
+  "version": "0.0.22",
   "description": "plugin-ui for kazaktelekom",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/components/BaseField/BaseField.vue

@@ -0,0 +1,184 @@
+<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

@@ -0,0 +1,85 @@
+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-функций, которые должны быть настроены в проекте.