plugin-ui-for-kzt 0.0.27 → 0.0.29

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;
+      }
     }
   }
 }