plugin-ui-for-kzt 0.0.19 → 0.0.20

package/example/App.vue

@@ -3,154 +3,196 @@
     <h1>Plugin UI KZT - Компоненты</h1>
     <p>Ниже представлены все компоненты библиотеки с примерами их использования.</p>
     <section>
-     <base-site-input
-        id="phone-input"
-        v-model="phoneNumber"
-        size="large"
-        placeholder="Введите номер телефона"
-        :error="phoneError"
-        hint="Номер телефона должен быть не менее 5 символов"
-      />
-    </section>
-    <section>
-      <h2>BaseBadgeGroup.vue</h2>
-
-      <base-badge-group
-        size="medium"
-        color="primary"
-        badge-position="right"
+      <BaseField 
+        size="large" 
+        id="BaseInputEmail" 
+        label="BaseInputEmail" 
+        :focusable="false"
+        :tabIndex="8" 
+        :error="errorValue"
       >
-        <template #badge-text-container>
-          New feature
-        </template>
-        <template #badge-text>
-          We’ve just released a new feature
+      <template #default="data">
+        <BaseInputEmail
+          id="BaseInputEmail" 
+          v-model="calendarModel" 
+          label="Select date hereBaseInputEmail"
+          placeholder="Select date"
+          :error="data.error"
+          :size="data.size"
+        />
         </template>
-      </base-badge-group>
-      <base-badge-group
-        size="large"
-        color="gray"
-        arrowRightIcon
+    </BaseField>
+      <BaseField 
+        size="small" 
+        id="calendar-input" 
+        label="calendar Input" 
+        :tabIndex="7" 
+        :error="errorValue"
       >
-        <template #badge-text-container>
-          New feature
+      <template #default="data">
+        <base-input-calendar 
+          id="calendar" 
+          v-model="calendarModel" 
+          label="Select date here"
+          :size="data.size"
+          placeholder="Select date"
+          :error="data.error"
+          :min-date="new Date()"
+          @validationError="handleError"
+        />
         </template>
-        <template #badge-text>
-          We’ve just released a new feature
-        </template>
-      </base-badge-group>
-    </section>
-    <section>
-      <h2>BaseBadge.vue</h2>
-      <base-badge
-        size="extra-small"
-        color="primary"
-        class="badge-example"
-        closable
+    </BaseField>
+    <BaseField 
+        size="medium" 
+        id="textarea-input" 
+        label="text Input" 
+        :tabIndex="6" 
+        :error="errorValue"
       >
-        <template #text>Пример бейджа</template>
-      </base-badge>
-      <base-badge
-        size="small"
-        color="gray"
-        class="badge-example"
-        has-dot
-      >
-        <template #text>Пример бейджа</template>
-      </base-badge>
-      <base-badge
-        size="medium"
-        color="error"
-        class="badge-example"
-        arrow-up-icon
+      <template #default="data">
+          <BaseTextarea 
+            :size="data.size" 
+            v-model="inputValue" 
+            id="textarea-input"
+            :error="data.error"
+          >
+          </BaseTextarea>
+        </template>
+    </BaseField>
+    <BaseField 
+        size="medium" 
+        id="select-input" 
+        label="select input" 
+        :tabIndex="5" 
+        :error="errorValue"
       >
-        <template #text>Пример бейджа</template>
-      </base-badge>
-      <base-badge
-        size="large"
-        color="warning"
-        class="badge-example"
-        arrow-right-icon
+      <template #default="data">
+          <BaseSelect 
+            :size="data.size" 
+            v-model="selectValue"
+            :options="options" 
+            id="select-input"
+            :error="data.error"
+          >
+            <template #left-icon>
+              <BaseIcon name="star" />
+            </template>
+            <template #right-icon>
+              <BaseIcon name="close" />
+            </template>
+          </BaseSelect>
+        </template>
+    </BaseField>
+      <BaseField 
+        size="medium" 
+        id="BaseInput " 
+        label="BaseInput " 
+        :tabIndex="0" 
+        :error="errorValue"
       >
-        <template #text>Пример бейджа</template>
-      </base-badge>
-      <base-badge
-        size="large"
-        color="success"
-        class="badge-example"
+          <template #default="data">
+            <BaseInput 
+              :size="data.size"
+              v-model="inputValue"
+              type="text" 
+              placeholder="Type here" 
+              id="BaseInput "
+              :error="data.error"
+            >
+              <template #left-icon>
+                <BaseIcon name="star" />
+              </template>
+              <template #right-icon>
+                <BaseIcon name="close" />
+              </template>
+            </BaseInput>
+          </template>
+    </BaseField>
+    <BaseField 
+        size="medium" 
+        id="input-phone" 
+        label="input-phone" 
+        :tabIndex="1" 
+        :error="errorValue"
       >
-        <template #text>
-          <base-icon size="custom" name="help"></base-icon>
+      <template #default="data">
+          <BaseInputPhone 
+            :size="data.size" 
+            v-model="inputValue4"
+            type="text" 
+            placeholder="Type here" 
+            id="phone-input"
+            :error="`${data.error}`"
+            :focusable="false"
+          />
         </template>
-      </base-badge>
-    </section>
+    </BaseField>
 
-    <section>
-      <h2>BaseUpload.vue</h2>
-      <base-upload
-      :accepted-formats="accept"
-      >
-      <template #title>my title</template>
-      </base-upload>
-    </section>
-
-    <section>
-      <div>
-    <base-swiper
-      :images="[
-        'https://i0.wp.com/vasilemovileanu.com/wp-content/uploads/2018/09/Autumn.-2001.-Oil-on-canvas-65-x-60-cm.jpg?fit=1231%2C1400&ssl=1',
-        'https://i.pinimg.com/originals/00/1b/7b/001b7bc4a4cd9132918accae2c7d5c23.png',
-        'https://i.pinimg.com/736x/90/71/bc/9071bcfb179dafd923d0f90653338ea1.jpg'
-      ]"
-      :paginationSettings="{ type: 'dotsWithBackground', color: 'primary' }"
-      v-model:current-slide="currentSlide"
-    />
-      <!-- :autoplay="true"
-      :autoplay-interval="2000" -->
-  </div>
-  <section>
-  medium size
-    <base-textarea class="text-area" size="medium" placeholder="test"></base-textarea>
-  </section>
-    </section>
-    <section style="height: 300px;">
-    <p></p>
-    <base-textarea class="text-area" size="custom" placeholder="test"></base-textarea>
-    </section>
+    <BaseField
+        size="medium" 
+        id="BaseInputCurrency" 
+        label="BaseInputCurrency" 
+        :tabIndex="2" 
+        :error="errorValue"
+    >
+    <template #default="data">
+          <BaseInputCurrency
+            :size="data.size" 
+            v-model="inputValue3"
+            type="text" 
+            placeholder="Type here" 
+            id="BaseInputCurrency"
+            :error="`${data.error}`"
+          />
+        </template>
+    </BaseField>
 
-    <section>
-      <div>
-        <base-button @click="openModal">Открыть модал</base-button>
-      </div>
+    <BaseField
+        size="medium" 
+        id="BaseSiteInput" 
+        label="BaseSiteInput" 
+        :tabIndex="3" 
+        :focusable="false"
+        :error="errorValue"
+    >
+    <template #default="data">
+          <BaseSiteInput
+            :size="data.size" 
+            v-model="inputValue3"
+            placeholder="write site url" 
+            id="BaseSiteInput"
+            :error="`${data.error}`"
+          />
+        </template>
+    </BaseField>
+    
     </section>
   </div>
 </template>
 <script setup lang="ts">
 import { ref, watch } from 'vue';
-import { useModal } from '../src/composables/useModal';
-import MyCustomModal from './MyCustomModal.vue';
 
-const accept = ['.jpg', '.pdf']
-const phoneNumber = ref('');
-const phoneError = ref('');
-watch(phoneNumber, (newValue) => {
-  console.log('Новый номер телефона:', newValue.length);
-  if (newValue.length > 17) {
-    console.log('Номер телефона должен быть не менее 5 символов');
-    phoneError.value = 'Некорректный номер телефона';
-  } else {
-    console.log('Номер телефона корректен');
-    phoneError.value = '';
-  }
+const inputValue = ref('as');
+const selectValue = ref('');
+const options = ref([
+  { id: '1', name: 'Option 1', value: 'option1' },
+  { id: '2', name: 'Option 2', value: 'option2' },
+  { id: '3', name: 'Option 3', value: 'option3' },
+]);
+const inputValue3 = ref('');
+const calendarModel = ref('');
+const inputValue4 = ref('');
+const errorValue = ref('');
+errorValue.value = errorValue.value.length < 3 ? 'Input must be at least 3 characters long' : '';
+watch(inputValue, (newValue) => {
+  console.log('Input 1 value changed:', newValue);
+  errorValue.value = newValue.length < 3 ? 'Input must be at least 3 characters long' : '';
 });
 
-const modal = useModal();
-
-const openModal = () => {
-  modal.open('myModal', { closable: true }, MyCustomModal);
+const handleError = (value: string) => {
+  console.error('Validation error:', value);
+  errorValue.value = value;
 };
-
-const currentSlide = ref(0);
 </script>
 
 <style lang="scss" scoped>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "plugin-ui-for-kzt",
-  "version": "0.0.19",
+  "version": "0.0.20",
   "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-функций, которые должны быть настроены в проекте.