plugin-ui-for-kzt 0.0.53 → 0.0.55

package/src/components/BaseInputWithSelector/README.md

@@ -0,0 +1,61 @@
+# BaseInputWithSelector
+
+Vue-компонент, объединяющий текстовое поле ввода и выпадающий список выбора типа. Используется для сценариев, где пользователь вводит значение и одновременно выбирает его категорию, тип или фильтр (например, поиск по ИИН, БИН, номеру документа и т.д.).
+
+Компонент состоит из `<base-input>` слева и `<base-select>` справа, визуально объединённых в единый элемент.
+
+---
+
+## Пропсы
+
+| Проп                | Тип                                        | По умолчанию | Описание |
+|---------------------|---------------------------------------------|--------------|----------|
+| `id`                | `string`                                   | `undefined`  | Уникальный идентификатор поля ввода. |
+| `modelValue`        | `string`                                   | `''`         | Значение поля ввода. Поддерживает двустороннюю привязку через `v-model`. |
+| `selectedOptionId`  | `string \| number`                         | `''`         | ID выбранной опции в селекторе. Поддерживает двустороннюю привязку. |
+| `options`           | `{ id, label, value }[]`                  | `[]`         | Список доступных опций для выбора в селекторе. |
+| `placeholder`       | `string`                                   | `''`         | Текст-заполнитель поля ввода. |
+| `size`              | `'small' \| 'medium' \| 'large'`         | `'medium'`   | Размер компонента. |
+| `error`             | `string`                                   | `undefined`  | Сообщение об ошибке. |
+
+---
+
+## Emits
+
+Компонент генерирует следующие события:
+
+| Событие | Payload | Описание |
+|--------|---------|----------|
+| `update:modelValue` | `string` | Вызывается при изменении текста в поле ввода. Используется для поддержки `v-model`. |
+| `update:selectedOptionId` | `string \| number` | Вызывается при изменении выбранной опции. Используется для поддержки `v-model:selectedOptionId`. |
+| `search` | `{ value: string; type: string \| number }` | Вызывается при изменении текста или выбранной опции (с debounce 500ms). Используется для выполнения поиска или фильтрации. |
+
+---
+
+## Использование
+
+### Базовый пример
+
+```vue
+<template>
+  <base-input-with-selector
+    id="search"
+    v-model="searchValue"
+    v-model:selectedOptionId="selectedType"
+    :options="options"
+  />
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const searchValue = ref('')
+const selectedType = ref('iin')
+
+const options = [
+  { id: 'iin', label: 'ИИН', value: 'iin' },
+  { id: 'bin', label: 'БИН', value: 'bin' },
+  { id: 'doc', label: 'Документ', value: 'doc' },
+]
+</script>
+

package/src/components/BaseOpenedListItem/BaseOpenedListItem.vue

@@ -1,38 +1,38 @@
 <template>
-    <component
-        :is="actualComponent"
-        v-bind="componentAttrs"
-        class="base-opened-list-item"
-        :class="classList"
-    >
-        <div class="base-opened-list-item__wrapper">
-            <div
-                v-if="$slots.icon || icon"
-                class="base-opened-list-item__icon"
-            >
-                <slot
-                    name="icon"
-                    :icon="icon"
-                >
-                </slot>
-            </div>
-
-            <span class="base-opened-list-item__text">
+  <component
+      :is="actualComponent"
+      v-bind="componentAttrs"
+      class="base-opened-list-item"
+      :class="classList"
+  >
+    <div class="base-opened-list-item__wrapper">
+      <div
+          v-if="$slots.icon || icon"
+          class="base-opened-list-item__icon"
+      >
+        <slot
+            name="icon"
+            :icon="icon"
+        >
+        </slot>
+      </div>
+
+      <span class="base-opened-list-item__text">
                 <slot />
             </span>
 
-            <div
-                v-if="active"
-                class="base-opened-list-item__postfix-icon"
-            >
-
-            <base-icon
-                name="checkbox-circle"
-                :size="size"
-            />
-            </div>
-        </div>
-    </component>
+      <div
+          v-if="active"
+          class="base-opened-list-item__postfix-icon"
+      >
+
+        <base-icon
+            name="checkbox-circle"
+            :size="size"
+        />
+      </div>
+    </div>
+  </component>
 </template>
 
 <script setup lang="ts">
@@ -80,137 +80,137 @@ const actualComponent = computed(() => {
 @import '../../styles/root';
 
 .base-opened-list-item {
-    $item: &;
-
-    display: block;
-    padding: 0;
-    user-select: none;
-    background-color: transparent;
-    border: none;
-    border-radius: 0;
-    outline: none;
-    width: 100%;
+  $item: &;
+
+  display: block;
+  padding: 0;
+  user-select: none;
+  background-color: transparent;
+  border: none;
+  border-radius: 0;
+  outline: none;
+  width: 100%;
+  display: flex;
+
+  &__wrapper {
     display: flex;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    text-align: left;
+    transition: all var(--transition);
 
-    &__wrapper {
-        display: flex;
-        align-items: center;
-        width: 100%;
-        height: 100%;
-        text-align: left;
-        transition: all var(--transition);
-
-        @include hover {
-            background: var(--primary-black-100);
-        }
-
-        @include pressed {
-            background: var(--primary-blue-100);
-        }
-    }
-
-    &__icon,
-    &__postfix-icon {
-        display: flex;
-        flex-shrink: 0;
-        align-items: center;
-        justify-content: center;
-        transition: inherit;
+    @include hover {
+      background: var(--primary-black-100);
     }
 
-    &__text {
-        flex: 1;
-        font: var(--ui-typography-body-regular);
-        color: var(--primary-text-primary);
-        transition: inherit;
+    @include pressed {
+      background: var(--primary-blue-100);
     }
+  }
 
-    &.--is-active,
-    &.router-link-active,
-    &.router-link-exact-active {
-        #{$item} {
-            &__wrapper {
-                background: var(--primary-black-50);
-            }
-        }
+  &__icon,
+  &__postfix-icon {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    transition: inherit;
+  }
+
+  &__text {
+    flex: 1;
+    font: var(--ui-typography-body-regular);
+    color: var(--primary-text-primary);
+    transition: inherit;
+  }
+
+  &.--is-active,
+  &.router-link-active,
+  &.router-link-exact-active {
+    #{$item} {
+      &__wrapper {
+        background: var(--primary-black-50);
+      }
     }
+  }
 
-    &.--is-disabled {
-        #{$item} {
-            &__text {
-                color: var(--primary-text-quaternary);
-            }
+  &.--is-disabled {
+    #{$item} {
+      &__text {
+        color: var(--primary-text-quaternary);
+      }
 
-            @include is-disabled-state;
-        }
+      @include is-disabled-state;
     }
+  }
 
-    &.--is-active.--is-disabled {
-        #{$item} {
-            &__wrapper {
-                background: var(--primary-black-100);
-            }
-        }
+  &.--is-active.--is-disabled {
+    #{$item} {
+      &__wrapper {
+        background: var(--primary-black-100);
+      }
     }
-
-    &.--small-size {
-        #{$item} {
-            &__wrapper {
-                gap: var(--spacing-s);
-                min-height: 40px;
-                padding: var(--spacing-s) var(--spacing-2l);
-            }
-
-            &__text {
-                font: var(--typography-text-m-regular);
-            }
-
-            &__icon,
-            &__postfix-icon {
-                width: 20px;
-                height: 20px;
-            }
-        }
+  }
+
+  &.--small-size {
+    #{$item} {
+      &__wrapper {
+        gap: var(--spacing-s);
+        min-height: 40px;
+        padding: var(--spacing-s) var(--spacing-2l);
+      }
+
+      &__text {
+        font: var(--typography-text-m-regular);
+      }
+
+      &__icon,
+      &__postfix-icon {
+        width: 20px;
+        height: 20px;
+      }
     }
-
-    &.--medium-size {
-        #{$item} {
-            &__wrapper {
-                gap: var(--spacing-m);
-                min-height: 48px;
-                padding: var(--spacing-m) var(--spacing-2l);
-            }
-
-            &__text {
-                font: var(--typography-text-m-regular);
-            }
-
-            &__icon,
-            &__postfix-icon {
-                width: 24px;
-                height: 24px;
-            }
-        }
+  }
+
+  &.--medium-size {
+    #{$item} {
+      &__wrapper {
+        gap: var(--spacing-m);
+        min-height: 48px;
+        padding: var(--spacing-m) var(--spacing-2l);
+      }
+
+      &__text {
+        font: var(--typography-text-m-regular);
+      }
+
+      &__icon,
+      &__postfix-icon {
+        width: 24px;
+        height: 24px;
+      }
     }
-
-    &.--large-size {
-        #{$item} {
-            &__wrapper {
-                gap: var(--spacing-l);
-                min-height: 60px;
-                padding: var(--spacing-2l) var(--spacing-l);
-            }
-
-            &__text {
-                font: var(--typography-text-l-regular);
-            }
-
-            &__icon,
-            &__postfix-icon {
-                width: 32px;
-                height: 32px;
-            }
-        }
+  }
+
+  &.--large-size {
+    #{$item} {
+      &__wrapper {
+        gap: var(--spacing-l);
+        min-height: 60px;
+        padding: var(--spacing-2l) var(--spacing-l);
+      }
+
+      &__text {
+        font: var(--typography-text-l-regular);
+      }
+
+      &__icon,
+      &__postfix-icon {
+        width: 32px;
+        height: 32px;
+      }
     }
+  }
 }
 </style>

package/src/components/BaseSelect/BaseSelect.vue

@@ -48,10 +48,12 @@
                 class="base-select__arrow-wrapper"
             >
               <div class="base-select__arrow">
-                <base-icon
-                    name="arrow-down"
-                    :size="size"
-                />
+                <slot name="arrow">
+                  <base-icon
+                      name="arrow-down"
+                      :size="size"
+                  />
+                </slot>
               </div>
             </div>
           </div>
@@ -299,6 +301,7 @@ defineSlots<{
   header( props: { value: ICoreSelectProps['options'] } ): any;
   headerIcon(): any;
   empty(): any;
+  arrow(): any;
 }>();
 </script>
 
@@ -390,9 +393,12 @@ defineSlots<{
   &__arrow {
     position: absolute;
     top: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     color: var(--ui-colors-input-icon-default);
     transition: transform var(--transition);
-    transform: translate3d(0, -50%, 0);
+    transform: translateY(-50%);
   }
 
   &__input {

package/src/index.ts

@@ -39,6 +39,7 @@ import BasePageLoader from "./components/BasePageLoader/BasePageLoader.vue";
 import BaseTabs from "./components/BaseTabs/BaseTabs.vue";
 import BaseTable from "./components/BaseTable/BaseTable.vue";
 import BaseDefaultPages from "./components/BaseDefaultPages/BaseDefaultPages.vue";
+import BaseInputWithSelector from "./components/BaseInputWithSelector/BaseInputWithSelector.vue";
 
 const components = {
   BaseModal,
@@ -74,7 +75,8 @@ const components = {
   BasePageLoader,
   BaseTabs,
   BaseTable,
-  BaseDefaultPages
+  BaseDefaultPages,
+  BaseInputWithSelector,
 };
 
 // Функция для загрузки sprite.svg
@@ -163,5 +165,6 @@ export {
   BasePageLoader,
   BaseTabs,
   BaseTable,
-  BaseDefaultPages
+  BaseDefaultPages,
+  BaseInputWithSelector,
 };

package/src/utils/debounce.ts

@@ -0,0 +1,8 @@
+export function debounce<T extends (...args: any[]) => void>(fn: T, delay = 400) {
+    let timeout: ReturnType<typeof setTimeout>
+
+    return (...args: Parameters<T>) => {
+        clearTimeout(timeout)
+        timeout = setTimeout(() => fn(...args), delay)
+    }
+}