plugin-ui-for-kzt 0.0.29 → 0.0.30

package/example/App.vue

@@ -175,7 +175,7 @@
   </div>
 </template>
 <script setup lang="ts">
-import { ref, watch, computed } from 'vue'
+import { ref, computed, onMounted } from 'vue'
 import BaseSelect from '../src/components/BaseSelect/BaseSelect.vue'
 import BaseTooltip from '../src/components/BaseTooltip/BaseTooltip.vue'
 import BaseUpload from '../src/components/BaseUpload/BaseUpload.vue'

package/package.json

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

package/src/components/BaseSelect/BaseSelect.vue

@@ -149,6 +149,9 @@ 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 ?? '');
@@ -180,6 +183,8 @@ 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) => 
@@ -201,6 +206,7 @@ function handleIconClick(event: Event) {
   event.stopPropagation();
   if (actualOption.value) {
     handleInput('');
+    emit('clear');
   } else {
     dropdownVisible.value = !dropdownVisible.value;
   }
@@ -225,6 +231,9 @@ watch(() => props.error, (error) => {
 });
 
 watch(dropdownVisible, (isVisible) => {
+  if (isVisible) {
+    emit('open');
+  }
   if (!isVisible) {
     if (searchQuery.value && !actualOption.value) {
       emit('error');

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`  
+  Эмитится когда пользователь вводит текст, но не выбирает ни одну опцию из списка. Полезно для валидации поиска.
+
 ---
 
 ### 🧩 Слоты