plugin-ui-for-kzt 0.0.29 → 0.0.31

package/example/App.vue

@@ -4,280 +4,13 @@
 
     <section>
       <h2>BaseUpload с drag & drop</h2>
-      <div style="display: flex; gap: 20px;">
-        <div style="width: 400px;">
-          <h3>Множественная загрузка (multiple: true)</h3>
-          <BaseUpload
-            :accepted-formats="['.pdf', '.docx', '.jpeg', '.jpg', '.png', '.svg']"
-            :multiple="true"
-          >
-            <template #title>
-              Перетащите файлы сюда или кликните для выбора
-            </template>
-            <template #description>
-              Поддерживаемые форматы: PDF, DOCX, JPEG, JPG, PNG, SVG до 25 MB
-            </template>
-          </BaseUpload>
-        </div>
-        
-        <div style="width: 400px;">
-          <h3>Одиночная загрузка (multiple: false)</h3>
-          <BaseUpload
-            :accepted-formats="['.pdf', '.docx', '.jpeg', '.jpg', '.png', '.svg']"
-            :multiple="false"
-          >
-            <template #title>
-              Перетащите файл сюда или кликните для выбора
-            </template>
-            <template #description>
-              Только один файл: PDF, DOCX, JPEG, JPG, PNG, SVG до 25 MB
-            </template>
-          </BaseUpload>
-        </div>
-      </div>
-    </section>
-
-    <section>
-      <h2>Сравнение режимов</h2>
-      <div style="display: flex; gap: 20px;">
-        <div style="width: 300px;">
-          <h3>Дефолтный режим</h3>
-          <BaseSelect
-            id="select4"
-            :options="options"
-            :placeholder="'Выберите опцию'"
-            :label="'Опция'"
-            :searchable="false"
-          />
-        </div>
-        <div style="width: 300px;">
-          <h3>Поисковый режим (новое поведение)</h3>
-          <BaseSelect
-            id="select5"
-            :options="searchableOptions"
-            :placeholder="'Выберите страну'"
-            :label="'Страна'"
-            :searchable="true"
-            :error="errorMessage"
-            @error="handleSelectError"
-          >
-            <template #empty>
-              <div>
-                Нет стран
-              </div>
-            </template>
-          </BaseSelect>
-          <p style="font-size: 12px; color: #666; margin-top: 8px;">
-            • Клик по стрелке открывает dropdown<br/>
-            • При точном совпадении элемент выбирается автоматически<br/>
-            • При выборе элемента иконка меняется на крестик<br/>
-            • Клик по крестику очищает выбор<br/>
-            • Клик по инпуту не очищает выбор<br/>
-            • При отсутствии совпадений эмитится ошибка
-          </p>
-          <div v-if="errorMessage" style="color: red; font-size: 12px; margin-top: 4px;">
-            Элемент не найден
-          </div>
-        </div>
-      </div>
-    </section>
-
-    <section>
-      <h2>Тест тултипов (несколько экземпляров)</h2>
-      <div style="display: flex; gap: 20px; align-items: center;">
-        <BaseTooltip
-          id="tooltip1"
-          title="Первый тултип"
-          content="Это первый тултип на странице"
-          trigger="click"
-        >
-          <template #trigger>
-            <button style="padding: 8px 16px; border: 1px solid #ccc; background: white; cursor: pointer;">
-              Тултип 1 (click)
-            </button>
-          </template>
-        </BaseTooltip>
-
-        <BaseTooltip
-          id="tooltip2"
-          title="Второй тултип"
-          content="Это второй тултип на странице"
-          trigger="click"
-        >
-          <template #trigger>
-            <button style="padding: 8px 16px; border: 1px solid #ccc; background: white; cursor: pointer;">
-              Тултип 2 (click)
-            </button>
-          </template>
-        </BaseTooltip>
-
-        <BaseTooltip
-          id="tooltip3"
-          title="Третий тултип"
-          content="Это третий тултип на странице"
-          trigger="hover"
-        >
-          <template #trigger>
-            <button style="padding: 8px 16px; border: 1px solid #ccc; background: white; cursor: pointer;">
-              Тултип 3 (hover)
-            </button>
-          </template>
-        </BaseTooltip>
-      </div>
-    </section>
-
-    <section>
-      <h2>BaseTable - Обычная таблица</h2>
-      <BaseTable
-        :columns="tableColumns"
-        :data="tableData"
-        :show-row-selection="true"
-        :show-actions="true"
-        :actions="tableActions"
-      />
-    </section>
-
-    <section>
-      <h2>BaseTable - С пагинацией</h2>
-      <BaseTable
-        :columns="tableColumns"
-        :data="tableData"
-        :pagination="{ perPage: 5, currentPage: 1 }"
-        :show-row-selection="true"
-        :show-actions="true"
-        :actions="tableActions"
-        @page-change="handlePageChange"
-      />
-    </section>
-
-    <section>
-      <h2>BaseTable - С виртуальным скроллом (высота: 400px)</h2>
-      <p style="font-size: 14px; color: #666; margin-bottom: 12px;">
-        • Колонки ID, Имя, Email, Статус теперь имеют заданные ширины: 80px, 200px, 1fr, 120px<br/>
-        • Ширины колонок в thead и виртуальном скролле полностью синхронизированы<br/>
-        • Можно использовать px, fr, auto или числовые значения для ширины<br/>
-        • Автоматическая компенсация ширины скроллбара - колонки не разъезжаются<br/>
-        • Настраиваемое выравнивание: ID - center, Имя - left, Email - left, Статус - right
-      </p>
-      <BaseTable
-        :columns="tableColumns"
-        :data="largeTableData"
-        :virtual-scroll="true"
-        :virtual-scroll-threshold="50"
-        :virtual-scroll-height="400"
-        :show-row-selection="true"
-
-
-        @scroll="handleScroll"
-        @scroll-end="handleScrollEnd"
-      />
+      <BaseDefaultPages  title="title" description="description" buttonText="buttonText" type="tech-work" imagePath="./tech-work.png" />
+      <BaseDefaultPages title="title" description="description" buttonText="buttonText" type="404" imagePath="./404.png" /> 
     </section>
   </div>
 </template>
 <script setup lang="ts">
-import { ref, watch, computed } 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'
-import BaseTable from '../src/components/BaseTable/BaseTable.vue'
-
-const options = ref([
-  { id: 1, name: ' Option 1 Option 1 Option 1Option 1 Option 1Option 1' },
-  { id: 2, name: 'Option 2 Option 2 Option 2Option 2 Option 2Option 2' },
-  { id: 3, name: 'Option 3 Option 3 Option 3Option 3 Option 3Option 3' },
-])
-
-const searchableOptions = ref([
-  { id: 'kz', name: 'Казахстан Казахстан Казахстан Казахстан Казахстан Казахстан Казахстан Казахстан Казахстан' },
-  { id: 'ru', name: 'Россия' },
-  { id: 'kg', name: 'Кыргызстан' },
-  { id: 'uz', name: 'Узбекистан' },
-  { id: 'tj', name: 'Таджикистан' },
-  { id: 'tm', name: 'Туркменистан' },
-  { id: 'af', name: 'Афганистан' },
-  { id: 'mn', name: 'Монголия' },
-  { id: 'cn', name: 'Китай' },
-  { id: 'ir', name: 'Иран' },
-  { id: 'tr', name: 'Турция' },
-  { id: 'ge', name: 'Грузия' },
-  { id: 'am', name: 'Армения' },
-  { id: 'az', name: 'Азербайджан' },
-  { id: 'by', name: 'Беларусь' },
-  { id: 'ua', name: 'Украина' },
-  { id: 'md', name: 'Молдова' },
-  { id: 'lt', name: 'Литва' },
-  { id: 'lv', name: 'Латвия' },
-  { id: 'ee', name: 'Эстония' },
-])
-
-const errorMessage = ref(false)
-
-function handleSelectError() {
-  errorMessage.value = true
-}
-
-// Данные для таблицы
-const tableColumns = ref([
-  { key: 'id', label: 'ID', sortable: true, width: '80px', align: 'center' as const },
-  { key: 'name', label: 'Имя', sortable: true, width: '200px', align: 'left' as const },
-  { key: 'email', label: 'Email', sortable: true, width: '1fr', align: 'left' as const },
-  { key: 'status', label: 'Статус', sortable: true, width: '120px', align: 'right' as const }
-])
-
-const tableData = ref([
-  { id: 1, name: 'Иван Иванов', email: 'ivan@example.com', status: 'Активен' },
-  { id: 2, name: 'Петр Петров', email: 'petr@example.com', status: 'Неактивен Неактивен Неактивен Неактивен Неактивен Неактивен Неактивен Неактивен Неактивен Неактивен Неактивен Неактивен' },
-  { id: 3, name: 'Мария Сидорова', email: 'maria@example.com', status: 'Активен' },
-  { id: 4, name: 'Анна Козлова', email: 'anna@example.com', status: 'Активен' },
-  { id: 5, name: 'Сергей Волков', email: 'sergey@example.com', status: 'Неактивен' },
-  { id: 6, name: 'Елена Морозова', email: 'elena@example.com', status: 'Активен' },
-  { id: 7, name: 'Дмитрий Лебедев', email: 'dmitry@example.com', status: 'Активен' },
-  { id: 8, name: 'Ольга Новикова', email: 'olga@example.com', status: 'Неактивен' }
-])
-
-// Большой набор данных для виртуального скролла
-const largeTableData = computed(() => {
-  const data: any[] = []
-  for (let i = 1; i <= 100; i++) {
-    data.push({
-      id: i,
-      name: `Пользователь ${i}`,
-      email: `user${i}@example.com`,
-      status: i % 3 === 0 ? 'Неактивен Неактивен Неактивен Неактивен' : 'Активен'
-    })
-  }
-  console.log("🚀 ~ data:", data)
-  return data
-})
-
-const tableActions = ref([
-  {
-    key: 'edit',
-    icon: 'edit-table',
-    handler: (row: any) => {
-      console.log('Редактировать:', row)
-    }
-  },
-  {
-    key: 'delete',
-    icon: 'trash-table',
-    handler: (row: any) => {
-      console.log('Удалить:', row)
-    }
-  }
-])
-
-const handlePageChange = (page: number) => {
-  console.log('Смена страницы:', page)
-}
-
-const handleScroll = (payload: any) => {
-  console.log('Скролл:', payload)
-}
-
-const handleScrollEnd = () => {
-  console.log('Достигнут конец списка - можно подгрузить еще данные')
-}
+import BaseDefaultPages from '../src/components/BaseDefaultPages/BaseDefaultPages.vue' 
 </script>
 
 <style lang="scss" scoped>

package/package.json

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

package/src/components/BaseDefaultPages/BaseDefaultPages.vue

@@ -33,18 +33,9 @@
 import { computed } from 'vue';
 import BaseButton from '../BaseButton/BaseButton.vue';
 import type { IDefaultPagesProps } from '../../types/default-pages';
-import techWorkImage from '../../assets/tech-work.png';
-import error404Image from '../../assets/404.png';
 
 const props = defineProps<IDefaultPagesProps>(); 
 
-const imagePath = computed(() => {
-  const images:Record<string, any> = {
-    'tech-work': techWorkImage,
-    '404': error404Image
-  };
-  return images[props.type] || '';
-});
 const imageContainer = computed<string[]>(()=> [
     `base-default-pages__image-container--${props.type}`
 ])

package/src/components/BaseInputPhone/BaseInputPhone.vue

@@ -137,7 +137,7 @@ const handleInput = (value: string) => {
     &.--small-size {
         #{$input} {
             :deep(.base-select) {
-                width: 71px;
+                width: auto;
             }
         }
     }
@@ -145,7 +145,7 @@ const handleInput = (value: string) => {
     &.--medium-size {
         #{$input} {
             &__select {
-                width: 75px;
+                width: auto;
             }
         }
     }
@@ -153,7 +153,7 @@ const handleInput = (value: string) => {
     &.--large-size {
         #{$input} {
             &__select {
-                width: 87px;
+                width: auto;
             }
         }
     }

package/src/components/BaseModal/BaseModal.vue

@@ -67,7 +67,6 @@ const handleOverlayClick = (id: string) => {
 .base-modal {
   background: var(--primary-black-white);
   border-radius: var(--corner-radius-m);
-  overflow: hidden;
   min-width: 335px;
   transform: scale(0.7);
   animation: slideIn 0.3s ease forwards;
@@ -130,8 +129,7 @@ const handleOverlayClick = (id: string) => {
   }
 
   &__content {
-    max-height: 70vh;
-    overflow-y: auto;
+    max-height: 80vh;
     color: var(--primary-text-tertiary);
     font: var(--typography-text-s-regular);
 

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

package/src/types/default-pages.d.ts

@@ -3,4 +3,5 @@ export interface IDefaultPagesProps {
     description: string;
     buttonText: string;
     type: 'tech-work' | '404'
+    imagePath: string;
 }