plugin-ui-for-kzt 0.0.28 → 0.0.30

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 { 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'
+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.30",
   "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;