plugin-ui-for-kzt 0.0.28 → 0.0.30

package/src/components/BaseSelect/BaseSelect.vue

@@ -8,7 +8,9 @@
         :disabled="actualDisabled"
       >
         <template #top>
+          <!-- Старый header для дефолтного поведения -->
           <div
+            v-if="!searchable"
             :data-error="Boolean(error)"
             :data-disabled="disabled"
             class="base-select__header"
@@ -21,12 +23,9 @@
                 <slot name="headerIcon" />
               </div>
 
-              <div
-                v-if="actualOption"
-                class="base-select__header_value"
-              >
-                {{ actualOption.name }}
-              </div>
+                <div v-if="actualOption" class="base-select__header_value">
+                  {{ actualOption.name }}
+                </div>
 
               <div
                 v-else
@@ -48,15 +47,45 @@
               </div>
             </div>
           </div>
+
+          <BaseInput
+            v-else
+            :id="id"
+            :model-value="displayValue || ''"
+            :placeholder="placeholder"
+            :disabled="disabled"
+            :readonly="readonly"
+            :size="size"
+            :error="Boolean(error)"
+            class="base-select__input"
+            @input="handleInputChange"
+          >
+            <template #left-icon>
+              <base-icon
+                name="search"
+                :size="size"
+              />
+            </template>
+            
+            <template #right-icon>
+              <base-icon
+                v-if="!readonly"
+                :name="actualOption ? 'close' : 'arrow-down'"
+                :size="size"
+                class="base-select__toggle-icon"
+                @click="handleIconClick"
+              />
+            </template>
+          </BaseInput>
         </template>
 
         <template #dropdown>
           <div
-            v-if="(options ?? []).length"
+            v-if="(filteredOptions ?? []).length"
             class="base-select__dropdown"
-          >
+          > 
             <dynamic-scroller
-              :items="options as ICoreSelectBaseProps[]"
+              :items="filteredOptions as ICoreSelectBaseProps[]"
               :min-item-size="36"
               key-field="id"
               class="base-select__list"
@@ -86,6 +115,9 @@
               </template>
             </dynamic-scroller>
           </div>
+          <div class="base-select__empty">
+            <slot name="empty" />
+          </div>
         </template>
       </base-dropdown>
     </div>
@@ -99,6 +131,7 @@ import { DynamicScroller, DynamicScrollerItem } from 'vue-virtual-scroller';
 import type { ICoreSelectProps, TSelectValue, ICoreSelectBaseProps, ICoreSelectOption, ISelectSlotProps } from '../../types/input';
 import BaseDropdown from '../BaseDropdown/BaseDropdown.vue';
 import BaseIcon from '../BaseIcon/BaseIcon.vue';
+import BaseInput from '../BaseInput/BaseInput.vue';
 import BaseOpenedListItem from '../BaseOpenedListItem/BaseOpenedListItem.vue';
 import { useKitSize } from '../../composables/kit/size';
 import { useKitState } from '../../composables/kit/state';
@@ -109,18 +142,31 @@ const props = withDefaults(defineProps<ICoreSelectProps & {
 }>(), {
   options: () => [],
   size: 'medium',
+  searchable: false,
 });
 
 const emit = defineEmits<{
   (e: 'update:modelValue', value: TSelectValue): void
   (e: 'change', value: TSelectValue): void
+  (e: 'error'): void
+  (e: 'search', query: string): void  
+  (e: 'open'): void                  
+  (e: 'clear'): void 
 }>();
 
 const actualValue = ref<TSelectValue>(props.modelValue ?? '');
+const searchQuery = ref<string>('');
 const actualOption = computed(() =>
   props.options?.find((item: ICoreSelectOption) => item?.id === actualValue.value) || null
 );
 
+const displayValue = computed(() => {
+  if (actualOption.value) {
+    return actualOption.value.name;
+  }
+  return searchQuery.value;
+});
+
 watch(() => props.modelValue, (val) => {
   actualValue.value = val ?? '';
 }, { immediate: true });
@@ -129,10 +175,72 @@ function handleInput(value: TSelectValue) {
   actualValue.value = value;
   emit('update:modelValue', value);
   emit('change', value);
+  dropdownVisible.value = false;
+  searchQuery.value = '';
+}
+
+function handleInputChange(event: Event) {
+  const target = event.target as HTMLInputElement;
+  const inputValue = target.value;
+  searchQuery.value = inputValue;
+
+  emit('search', inputValue);
+  
+  if (inputValue) {
+    const exactMatch = props.options?.find((option: ICoreSelectOption) => 
+      option.name.toLowerCase() === inputValue.toLowerCase()
+    );
+    
+    if (exactMatch) {
+      handleInput(exactMatch.id);
+      return;
+    }
+    
+    if (!dropdownVisible.value) {
+      dropdownVisible.value = true;
+    }
+  }
+}
+
+function handleIconClick(event: Event) {
+  event.stopPropagation();
+  if (actualOption.value) {
+    handleInput('');
+    emit('clear');
+  } else {
+    dropdownVisible.value = !dropdownVisible.value;
+  }
 }
 
 const actualDisabled = computed(() => props.disabled || !props.options?.length);
 const dropdownVisible = ref(false);
+
+const filteredOptions = computed(() => {
+  if (!props.searchable || !searchQuery.value.trim()) {
+    return props.options || [];
+  }
+  
+  const query = searchQuery.value.toLowerCase().trim();
+  return (props.options || []).filter((option: ICoreSelectOption) => 
+    option.name.toLowerCase().includes(query)
+  );
+});
+
+watch(() => props.error, (error) => {
+  console.log('ERROR', error);
+});
+
+watch(dropdownVisible, (isVisible) => {
+  if (isVisible) {
+    emit('open');
+  }
+  if (!isVisible) {
+    if (searchQuery.value && !actualOption.value) {
+      emit('error');
+    }
+    searchQuery.value = '';
+  }
+});
 const { sizeClassList } = useKitSize(props);
 const { stateClassList } = useKitState(props);
 const { styleClassList } = useKitStyle(props);
@@ -162,6 +270,7 @@ defineSlots<{
   iconItem(props: { item: ICoreSelectBaseProps }): any;
   header(props: { value: ICoreSelectProps['options'] }): any;
   headerIcon(): any;
+  empty(): any;
 }>();
 </script>
 
@@ -185,6 +294,10 @@ defineSlots<{
           border: 1px solid var(--primary-black-300);
           outline: 4px solid var(--effects-primary-focus);
         }
+
+        &__toggle-icon {
+          transform: rotate(180deg);
+        }
       }
 
       .dropdown__dropdown {
@@ -202,6 +315,10 @@ defineSlots<{
     #{$select}__header {
       border: 1px solid var(--error-red-light-01);
     }
+
+    #{$select}__toggle-icon {
+      color: var(--error-red);
+    }
   }
 
   &__wrapper {
@@ -225,6 +342,8 @@ defineSlots<{
 
   &__header_value {
     color: var(--primary-text-primary);
+    
+    @include text-clamp(1);
   }
 
   &__placeholder {
@@ -247,6 +366,25 @@ defineSlots<{
     transform: translate3d(0, -50%, 0);
   }
 
+  &__input {
+    cursor: pointer;
+
+    @include text-clamp(1);
+
+    &.--is-readonly {
+      cursor: default;
+    }
+  }
+
+  &__toggle-icon {
+    cursor: pointer;
+    transition: transform var(--transition);
+    
+    &:hover {
+      opacity: 0.7;
+    }
+  }
+
   &__dropdown {
     width: 100%;
     height: 100%;
@@ -266,7 +404,7 @@ defineSlots<{
         font: var(--typography-text-m-regular);
       }
 
-      &__dropdown {
+      &__dropdown, &__input {
         border-radius: var(--corner-radius-s);
       }
 
@@ -289,6 +427,10 @@ defineSlots<{
         font: var(--typography-text-m-regular);
       }
 
+      &__input {
+        border-radius: var(--corner-radius-m);
+      }
+
       &__header {
         height: 48px;
         padding: var(--spacing-m) var(--spacing-2l);
@@ -307,6 +449,10 @@ defineSlots<{
         font: var(--typography-text-l-regular);
       }
 
+      &__input {
+        border-radius: var(--corner-radius-l);
+      }
+
       &__header {
         height: 56px;
         padding: var(--spacing-m) var(--spacing-l);
@@ -328,6 +474,10 @@ defineSlots<{
       &__arrow {
         color: var(--ui-colors-input-icon-disabled);
       }
+
+      &__toggle-icon {
+        color: var(--ui-colors-input-icon-disabled);
+      }
     }
   }
 
@@ -336,6 +486,10 @@ defineSlots<{
       &__header {
         pointer-events: none;
       }
+
+      &__input {
+        pointer-events: none;
+      }
     }
   }
 }

package/src/components/BaseSelect/README.md

@@ -4,8 +4,9 @@
 
 ---
 
-### ✅ Пример использования
+### ✅ Примеры использования
 
+#### Базовый пример
 ```vue
 <base-select
   v-model="selected"
@@ -21,6 +22,99 @@
 />
 ```
 
+#### Server-side поиск (рекомендуемый подход)
+```vue
+<template>
+  <base-select
+    id="employee-select"
+    v-model="selectedEmployee"
+    :options="employeeOptions"
+    searchable
+    placeholder="Найти сотрудника..."
+    label="Выберите сотрудника"
+    :error="employeeError"
+    @search="handleEmployeeSearch"
+    @open="handleEmployeeOpen"
+    @clear="handleEmployeeClear"
+    @error="handleSearchError"
+  />
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import axios from 'axios'
+
+const selectedEmployee = ref('')
+const employeeOptions = ref([])
+const employeeError = ref('')
+const searchTimeout = ref(null)
+
+// Дебаунс поиска для оптимизации запросов
+const debounceSearch = (callback, delay) => {
+  if (searchTimeout.value) {
+    clearTimeout(searchTimeout.value)
+  }
+  searchTimeout.value = setTimeout(callback, delay)
+}
+
+// Загрузка сотрудников с сервера
+const fetchEmployees = async (query = '') => {
+  try {
+    const params = { 
+      limit: 100,
+      skip: 0
+    }
+    
+    if (query?.trim()) {
+      params.name = query.trim()
+    }
+    
+    const response = await axios.get('/api/employees', { params })
+    const employees = response.data.content || []
+    
+    employeeOptions.value = employees.map(item => ({
+      id: item.employeeId,
+      name: `${item.lastName} ${item.firstName} ${item.middleName}`.trim(),
+    }))
+    
+    employeeError.value = ''
+  } catch (error) {
+    console.error('Failed to fetch employees:', error)
+    employeeOptions.value = []
+    employeeError.value = 'Ошибка загрузки данных'
+  }
+}
+
+// Обработчик поиска с дебаунсом
+const handleEmployeeSearch = (query) => {
+  debounceSearch(() => {
+    if (query.length >= 2 || query.length === 0) {
+      fetchEmployees(query)
+    }
+  }, 700) // Дебаунс 700мс
+}
+
+// Загрузка при открытии если данных нет
+const handleEmployeeOpen = () => {
+  if (employeeOptions.value.length === 0) {
+    fetchEmployees()
+  }
+}
+
+// Очистка выбора
+const handleEmployeeClear = () => {
+  selectedEmployee.value = ''
+  employeeError.value = ''
+  fetchEmployees() // Загружаем исходный список
+}
+
+// Обработка ошибок поиска
+const handleSearchError = () => {
+  employeeError.value = 'Элемент не найден'
+}
+</script>
+```
+
 ---
 
 ### ⚙️ Пропсы
@@ -55,6 +149,9 @@
 - `size?: 'small' | 'medium' | 'large'`  
   Управляет размерами шрифта, паддингов и иконок.
 
+- `searchable?: boolean`  
+  **Включает режим поиска. При `true` заменяет обычный заголовок на поле ввода для поиска. Идеально подходит для server-side поиска больших наборов данных.
+
 - `multiple?: boolean`  
   Поддержка множественного выбора (не реализовано в текущем компоненте, зарезервировано).
 
@@ -71,6 +168,18 @@
 - `change`  
   Также эмитится при выборе. Полезно для побочных эффектов.
 
+- `search`  
+  Эмитится при вводе в поисковое поле (только при `searchable: true`). Возвращает строку поискового запроса. Используется для server-side поиска.
+
+- `open`  
+  Эмитится при открытии выпадающего меню. Полезно для первоначальной загрузки данных при server-side поиске.
+
+- `clear`  
+  Эмитится при очистке выбранного значения через иконку крестика (только при `searchable: true`).
+
+- `error`  
+  Эмитится когда пользователь вводит текст, но не выбирает ни одну опцию из списка. Полезно для валидации поиска.
+
 ---
 
 ### 🧩 Слоты