plugin-ui-for-kzt 0.0.30 → 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, 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('Достигнут конец списка - можно подгрузить еще данные')
-}
+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.30",
+  "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/types/default-pages.d.ts

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