plugin-ui-for-kzt 0.0.28 → 0.0.29

package/example/App.vue

@@ -1,19 +1,283 @@
 <template>
   <div class="demo-page">
     <h1>Plugin UI KZT - Компоненты</h1>
+
+    <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>
-      <BaseDefaultPages 
-          title="TUIELT"
-          description="DEGASG"
-          buttonText="Butootn"
-          type="tech-work"
-     />
+      <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"
+      />
     </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('Достигнут конец списка - можно подгрузить еще данные')
+}
 </script>
 
 <style lang="scss" scoped>

package/package.json

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

package/src/assets/icons/search.svg

@@ -0,0 +1,4 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.3333 28.0001C22.3289 28.0001 28 22.329 28 15.3334C28 8.33781 22.3289 2.66675 15.3333 2.66675C8.33773 2.66675 2.66667 8.33781 2.66667 15.3334C2.66667 22.329 8.33773 28.0001 15.3333 28.0001Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M29.3333 29.3334L26.6667 26.6667" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/components/BaseButton/BaseButton.vue

@@ -114,17 +114,17 @@ const classList = computed(() => [
         font: var(--typography-text-s-medium);
         border-radius: var(--corner-radius-xs);
 
-        #{$button}--only-icon {
-            padding: 0;
-            width: 32px;
-        }
-
        .loader__circle-icon {
             width: 20px;
             height: 20px;
         }
     }
 
+    &.--extra-small-size#{&}--only-icon {
+        padding: 0;
+        width: 32px;
+    }
+
     &.--small-size {
         column-gap: var(--spacing-xs);
         height: 40px;
@@ -132,17 +132,17 @@ const classList = computed(() => [
         font: var(--typography-text-m-medium);
         border-radius: var(--corner-radius-s);
 
-        #{$button}--only-icon {
-            padding: 0;
-            width: 40px;
-        }
-
         .loader__circle-icon {
             width: 20px;
             height: 20px;
         }
     }
 
+    &.--small-size#{&}--only-icon {
+        padding: 0;
+        width: 40px;
+    }
+
     &.--medium-size {
         column-gap: var(--spacing-xs);
         height: 48px;
@@ -150,17 +150,17 @@ const classList = computed(() => [
         font: var(--typography-text-l-medium);
         border-radius: var(--corner-radius-m);
 
-        #{$button}--only-icon {
-            padding: 0;
-            width: 48px;
-        }
-
         .loader__circle-icon {
             width: 24px;
             height: 24px;
         }
     }
 
+    &.--medium-size#{&}--only-icon {
+        padding: 0;
+        width: 48px;
+    }
+
     &.--large-size {
         column-gap: var(--spacing-xs);
         height: 56px;
@@ -168,17 +168,17 @@ const classList = computed(() => [
         font: var(--typography-text-l-medium);
         border-radius: var(--corner-radius-m);
 
-        #{$button}--only-icon {
-            padding: 0;
-            width: 56px;
-        }
-
         .loader__circle-icon {
             width: 32px;
             height: 32px;
         }
     }
 
+    &.--large-size#{&}--only-icon {
+        padding: 0;
+        width: 56px;
+    }
+
     &.--is-interactive {
         height: 22px;
         padding: 0;

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,28 @@ 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
 }>();
 
 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 +172,66 @@ 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;
+  
+  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('');
+  } 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) {
+    if (searchQuery.value && !actualOption.value) {
+      emit('error');
+    }
+    searchQuery.value = '';
+  }
+});
 const { sizeClassList } = useKitSize(props);
 const { stateClassList } = useKitState(props);
 const { styleClassList } = useKitStyle(props);
@@ -162,6 +261,7 @@ defineSlots<{
   iconItem(props: { item: ICoreSelectBaseProps }): any;
   header(props: { value: ICoreSelectProps['options'] }): any;
   headerIcon(): any;
+  empty(): any;
 }>();
 </script>
 
@@ -185,6 +285,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 +306,10 @@ defineSlots<{
     #{$select}__header {
       border: 1px solid var(--error-red-light-01);
     }
+
+    #{$select}__toggle-icon {
+      color: var(--error-red);
+    }
   }
 
   &__wrapper {
@@ -225,6 +333,8 @@ defineSlots<{
 
   &__header_value {
     color: var(--primary-text-primary);
+    
+    @include text-clamp(1);
   }
 
   &__placeholder {
@@ -247,6 +357,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 +395,7 @@ defineSlots<{
         font: var(--typography-text-m-regular);
       }
 
-      &__dropdown {
+      &__dropdown, &__input {
         border-radius: var(--corner-radius-s);
       }
 
@@ -289,6 +418,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 +440,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 +465,10 @@ defineSlots<{
       &__arrow {
         color: var(--ui-colors-input-icon-disabled);
       }
+
+      &__toggle-icon {
+        color: var(--ui-colors-input-icon-disabled);
+      }
     }
   }
 
@@ -336,6 +477,10 @@ defineSlots<{
       &__header {
         pointer-events: none;
       }
+
+      &__input {
+        pointer-events: none;
+      }
     }
   }
 }