plugin-ui-for-kzt 0.0.61 → 0.0.62

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "plugin-ui-for-kzt",
-  "version": "0.0.61",
+  "version": "0.0.62",
   "description": "plugin-ui for kazaktelekom",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/components/BaseSelect/BaseSelect.vue

@@ -166,6 +166,7 @@ const props = withDefaults( defineProps<ICoreSelectProps & {
   options: () => [] as ICoreSelectOption[],
   size: 'medium',
   searchable: false,
+  clearOnSelect: false,
 } );
 
 const emit = defineEmits<{
@@ -199,13 +200,19 @@ watch( () => props.modelValue, ( val ) => {
   }
 }, { immediate: true } );
 
-function handleInput( value: TSelectValue ) {
+function handleInput( value: TSelectValue, isOptionSelection = false ) {
   if ( props.readonly || props.disabled ) {
     return;
   }
   actualValue.value = value;
   emit( 'update:modelValue', value );
   emit( 'change', value );
+
+  if ( props.clearOnSelect && isOptionSelection ) {
+    actualValue.value = '';
+    emit( 'update:modelValue', '' );
+  }
+
   dropdownVisible.value = false;
   searchQuery.value = '';
 }
@@ -226,7 +233,7 @@ function handleInputChange( event: Event ) {
     );
 
     if ( exactMatch ) {
-      handleInput( exactMatch.id );
+      handleInput( exactMatch.id, true );
       return;
     }
 
@@ -295,7 +302,7 @@ const listItemAttrs = computed( () => ( item: ICoreSelectOption ) => ({
   style: item.style,
   disabled: item.disabled,
   class: 'base-select__item',
-  onClick: () => handleInput( item.id ),
+  onClick: () => handleInput( item.id, true ),
 }) );
 
 const classList = computed( () => [

package/src/components/BaseSelect/README.md

@@ -30,6 +30,7 @@
     v-model="selectedEmployee"
     :options="employeeOptions"
     searchable
+    clear-on-select
     placeholder="Найти сотрудника..."
     label="Выберите сотрудника"
     :error="employeeError"
@@ -158,6 +159,9 @@ const handleSearchError = () => {
 - `searchable?: boolean`  
   **Включает режим поиска. При `true` заменяет обычный заголовок на поле ввода для поиска. Идеально подходит для server-side поиска больших наборов данных.
 
+- `clearOnSelect?: boolean`  
+  Очищает текущее значение после выбора опции. При этом событие `change` получает выбранный `id`, а `v-model` возвращается в пустое значение.
+
 - `multiple?: boolean`  
   Поддержка множественного выбора (не реализовано в текущем компоненте, зарезервировано).
 

package/src/types/input.d.ts

@@ -65,6 +65,7 @@ export interface ICoreSelectBaseProps {
   label?: string
   hint?: string
   searchable?: boolean
+  clearOnSelect?: boolean
   variant?: 'variant-blue'
 }