plugin-ui-for-kzt 0.0.37 → 0.0.40

package/src/components/BaseSelect/BaseSelect.vue

@@ -2,86 +2,86 @@
   <div class="base-select" :class="[classList]">
     <div class="base-select__wrapper">
       <base-dropdown
-        v-model="dropdownVisible"
-        transition-name="top"
-        auto-close
-        :disabled="actualDisabled"
+          v-model="dropdownVisible"
+          transition-name="top"
+          auto-close
+          :disabled="actualDisabled"
       >
         <template #top>
           <div
-            v-if="!searchable"
-            :data-error="Boolean(error)"
-            :data-disabled="disabled"
-            class="base-select__header"
+              v-if="!searchable"
+              :data-error="Boolean(error)"
+              :data-disabled="disabled"
+              class="base-select__header"
           >
             <slot
-              name="header"
-              :value="actualOption ? [actualOption] : undefined"
+                name="header"
+                :value="actualOption ? [actualOption] : undefined"
             >
-              <div 
-                v-if="actualOption?.icon && $slots.iconItem" 
-                class="base-select__header_prefix_icon"
+              <div
+                  v-if="actualOption?.icon && $slots.iconItem"
+                  class="base-select__header_prefix_icon"
               >
-                <slot name="iconItem" :item="actualOption" />
+                <slot name="iconItem" :item="actualOption"/>
               </div>
-              <div 
-                v-else-if="$slots.headerIcon" 
-                class="base-select__header_prefix_icon"
+              <div
+                  v-else-if="$slots.headerIcon"
+                  class="base-select__header_prefix_icon"
               >
-                <slot name="headerIcon" />
+                <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
-                class="base-select__placeholder"
+                  v-else
+                  class="base-select__placeholder"
               >
                 {{ placeholder }}
               </div>
             </slot>
 
             <div
-              v-if="!readonly"
-              class="base-select__arrow-wrapper"
+                v-if="!readonly"
+                class="base-select__arrow-wrapper"
             >
               <div class="base-select__arrow">
                 <base-icon
-                  name="arrow-down"
-                  :size="size"
+                    name="arrow-down"
+                    :size="size"
                 />
               </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"
+              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"
+                  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"
+                  v-if="!readonly"
+                  :name="actualOption ? 'close' : 'arrow-down'"
+                  :size="size"
+                  class="base-select__toggle-icon"
+                  @click="handleIconClick"
               />
             </template>
           </BaseInput>
@@ -89,34 +89,34 @@
 
         <template #dropdown>
           <div
-            v-if="(filteredOptions ?? []).length"
-            class="base-select__dropdown"
-          > 
+              v-if="(filteredOptions ?? []).length"
+              class="base-select__dropdown"
+          >
             <dynamic-scroller
-              :items="filteredOptions as ICoreSelectBaseProps[]"
-              :min-item-size="36"
-              key-field="id"
-              class="base-select__list"
+                :items="filteredOptions as ICoreSelectBaseProps[]"
+                :min-item-size="36"
+                key-field="id"
+                class="base-select__list"
             >
-            <template #default="{ item, index, active } : ISelectSlotProps">
-              <dynamic-scroller-item
-                  :item="item"
-                  :active="active"
-                  :size-dependencies="[item.name]"
-                  :data-index="index"
+              <template #default="{ item, index, active } : ISelectSlotProps">
+                <dynamic-scroller-item
+                    :item="item"
+                    :active="active"
+                    :size-dependencies="[item.name]"
+                    :data-index="index"
                 >
                   <div class="base-select__item-wrapper">
                     <base-opened-list-item
-                      v-bind="listItemAttrs(item)"
-                      :key="String(item.id ?? '')"
-                      :size="size"
+                        v-bind="listItemAttrs(item)"
+                        :key="String(item.id ?? '')"
+                        :size="size"
                     >
                       <template #icon>
                         <div v-if="$slots.iconItem">
-                          <slot name="iconItem" :item="item" />
+                          <slot name="iconItem" :item="item"/>
                         </div>
                       </template>
-                      {{ listItemAttrs(item).title }}
+                      {{ listItemAttrs( item ).title }}
                     </base-opened-list-item>
                   </div>
                 </dynamic-scroller-item>
@@ -124,7 +124,7 @@
             </dynamic-scroller>
           </div>
           <div class="base-select__empty">
-            <slot name="empty" />
+            <slot name="empty"/>
           </div>
         </template>
       </base-dropdown>
@@ -145,138 +145,145 @@ import { useKitSize } from '../../composables/kit/size';
 import { useKitState } from '../../composables/kit/state';
 import { useKitStyle } from '../../composables/kit/style';
 
-const props = withDefaults(defineProps<ICoreSelectProps & {
+const props = withDefaults( defineProps<ICoreSelectProps & {
   modelValue?: TSelectValue
 }>(), {
   options: () => [],
   size: 'medium',
   searchable: false,
-});
+} );
 
 const emit = defineEmits<{
-  (e: 'update:modelValue', value: TSelectValue): void
-  (e: 'change', value: TSelectValue): void
-  (e: 'error'): void
-  (e: 'search', query: string): void  
-  (e: 'open'): void                  
-  (e: 'clear'): void 
+  ( e: 'update:modelValue', value: TSelectValue ): void
+  ( e: 'change', value: TSelectValue ): void
+  ( e: 'error' ): void
+  ( e: 'search', query: string ): void
+  ( e: 'open' ): void
+  ( e: 'clear' ): void
+  ( e: 'getSearchApi', value: string ): 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 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) {
+const displayValue = computed( () => {
+  if ( actualOption.value ) {
     return actualOption.value.name;
   }
   return searchQuery.value;
-});
+} );
 
-watch(() => props.modelValue, (val) => {
-  if (val && typeof val === 'object' && 'id' in val) {
+watch( () => props.modelValue, ( val ) => {
+  if ( val && typeof val === 'object' && 'id' in val ) {
     actualValue.value = (val as ICoreSelectOption).id as TSelectValue;
   } else {
     actualValue.value = val ?? '';
   }
-}, { immediate: true });
+}, { immediate: true } );
 
-function handleInput(value: TSelectValue) {
-  if (props.readonly || props.disabled) {
+function handleInput( value: TSelectValue ) {
+  if ( props.readonly || props.disabled ) {
     return;
   }
   actualValue.value = value;
-  emit('update:modelValue', value);
-  emit('change', value);
+  emit( 'update:modelValue', value );
+  emit( 'change', value );
   dropdownVisible.value = false;
   searchQuery.value = '';
 }
 
-function handleInputChange(event: Event) {
-  if (props.readonly || props.disabled) {
+function handleInputChange( event: Event ) {
+  if ( props.readonly || props.disabled ) {
     return;
   }
   const target = event.target as HTMLInputElement;
   const inputValue = target.value;
   searchQuery.value = inputValue;
 
-  emit('search', inputValue);
-  
-  if (inputValue) {
-    const exactMatch = props.options?.find((option: ICoreSelectOption) => 
-      option.name.toLowerCase() === inputValue.toLowerCase()
+  emit( 'search', inputValue );
+
+  if ( inputValue ) {
+    const exactMatch = props.options?.find( ( option: ICoreSelectOption ) =>
+        option.name.toLowerCase() === inputValue.toLowerCase()
     );
-    
-    if (exactMatch) {
-      handleInput(exactMatch.id);
+
+    if ( exactMatch ) {
+      handleInput( exactMatch.id );
       return;
     }
-    
-    if (!dropdownVisible.value) {
+
+    if ( !dropdownVisible.value ) {
       dropdownVisible.value = true;
     }
   }
 }
 
-function handleIconClick(event: Event) {
-  if (props.readonly || props.disabled) {
+function handleIconClick( event: Event ) {
+  if ( props.readonly || props.disabled ) {
     return;
   }
   event.stopPropagation();
-  if (actualOption.value) {
-    handleInput('');
-    emit('clear');
+  if ( actualOption.value ) {
+    handleInput( '' );
+    emit( 'clear' );
   } else {
     dropdownVisible.value = !dropdownVisible.value;
   }
 }
 
-const actualDisabled = computed(() => props.disabled || !props.options?.length);
-const dropdownVisible = ref(false);
+const actualDisabled = computed( () => props.disabled || !props.options?.length );
+const dropdownVisible = ref( false );
 
-const filteredOptions = computed(() => {
-  if (!props.searchable || !searchQuery.value.trim()) {
+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) {
-    emit('open');
+  const searchableOptions = (props.options || []).filter( ( option: ICoreSelectOption ) =>
+      option.name.toLowerCase().includes( query ) );
+  if ( searchableOptions.length ) {
+    return searchableOptions
+  } else {
+    emit( 'getSearchApi', query )
+    return [];
   }
-  if (!isVisible) {
-    if (searchQuery.value && !actualOption.value) {
-      emit('error');
+  ;
+} );
+
+watch( () => props.error, ( error ) => {
+  console.log( 'ERROR', error );
+} );
+
+watch( dropdownVisible, ( isVisible ) => {
+  if ( isVisible ) {
+    emit( 'open' );
+  }
+  if ( !isVisible ) {
+    if ( searchQuery.value && !actualOption.value ) {
+      emit( 'error' );
     }
     searchQuery.value = '';
   }
-});
-const { sizeClassList } = useKitSize(props);
-const { stateClassList } = useKitState(props);
-const { styleClassList } = useKitStyle(props);
+} );
+const { sizeClassList } = useKitSize( props );
+const { stateClassList } = useKitState( props );
+const { styleClassList } = useKitStyle( props );
 
-const listItemAttrs = computed(() => (item: ICoreSelectOption) => ({
+const listItemAttrs = computed( () => ( item: ICoreSelectOption ) => ({
   icon: item.icon,
   active: actualValue.value === item.id,
   title: item.name || '',
   style: item.style,
   disabled: item.disabled,
   class: 'base-select__item',
-  onClick: () => handleInput(item.id),
-}));
+  onClick: () => handleInput( item.id ),
+}) );
 
-const classList = computed(() => [
+const classList = computed( () => [
   sizeClassList.value,
   stateClassList.value,
   styleClassList.value,
@@ -284,12 +291,12 @@ const classList = computed(() => [
     '--is-readonly': props.readonly,
     '--is-disabled': actualDisabled.value,
   },
-]);
+] );
 
 defineSlots<{
-  default(props: ISelectSlotProps): any;
-  iconItem(props: { item: ICoreSelectOption }): any;
-  header(props: { value: ICoreSelectProps['options'] }): any;
+  default( props: ISelectSlotProps ): any;
+  iconItem( props: { item: ICoreSelectOption } ): any;
+  header( props: { value: ICoreSelectProps['options'] } ): any;
   headerIcon(): any;
   empty(): any;
 }>();
@@ -303,6 +310,7 @@ defineSlots<{
   $select: &;
 
   min-width: 320px;
+  height: 100%;
 
   .dropdown {
     &.--is-opened {
@@ -363,7 +371,7 @@ defineSlots<{
 
   &__header_value {
     color: var(--primary-text-primary);
-    
+
     @include text-clamp(1);
   }
 
@@ -400,7 +408,7 @@ defineSlots<{
   &__toggle-icon {
     cursor: pointer;
     transition: transform var(--transition);
-    
+
     &:hover {
       opacity: 0.7;
     }
@@ -450,6 +458,7 @@ defineSlots<{
 
       &__input {
         border-radius: var(--corner-radius-m);
+        height: 100%;
       }
 
       &__header {