plugin-ui-for-kzt 0.0.56 → 0.0.58

package/src/components/BaseInput/BaseInput.vue

@@ -5,29 +5,36 @@
         <slot name="left-icon"></slot>
       </div>
       <input
-        :id="id"
-        :type="type"
-        :value="modelValue"
-        v-maska="mask"
-        v-bind="componentAttrs"
-        :placeholder="placeholder || ''"
-        class="base-input__field"
-        :class="{ 'base-input__field--focusable': focusable }"
-        @input="handleInput"
+          ref="inputRef"
+          :id="id"
+          :type="type"
+          :value="modelValue"
+          v-maska="mask"
+          v-bind="componentAttrs"
+          :placeholder="placeholder || ''"
+          class="base-input__field"
+          :class="{ 'base-input__field--focusable': focusable }"
+          @input="handleInput"
       />
-      <div v-if="$slots['right-icon']" class="base-input__icon base-input__icon--right">
-        <slot name="right-icon"></slot>
+      <div v-if="$slots['right-icon'] || showClearButton" class="base-input__icon base-input__icon--right">
+        <BaseIcon v-if="showClearButton"
+                  name="close"
+                  class="base-input__clear-icon"
+                  @click="clearInput"
+        />
+        <slot v-if="$slots['right-icon']" name="right-icon"></slot>
       </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed, useAttrs, useSlots } from 'vue';
-import type { ICoreInputProps } from '../../types/input';
-import { useKitSize } from '../../composables/kit/size';
-import { useKitState } from '../../composables/kit/state';
-import { vMaska } from 'maska/vue';
+import {computed, ref, useAttrs, useSlots} from 'vue';
+import type {ICoreInputProps} from '../../types/input';
+import {useKitSize} from '../../composables/kit/size';
+import {useKitState} from '../../composables/kit/state';
+import {vMaska} from 'maska/vue';
+import BaseIcon from '../BaseIcon/BaseIcon.vue';
 
 const props = withDefaults(defineProps<ICoreInputProps>(), {
   id: '',
@@ -36,27 +43,36 @@ const props = withDefaults(defineProps<ICoreInputProps>(), {
   modelValue: '',
   placeholder: '',
   mask: '',
+  clearable: false,
   focusable: true,
 });
 
 const emit: (event: 'update:modelValue', value: string) => void = defineEmits();
 
-const { sizeClassList } = useKitSize(props);
-const { stateClassList, stateAttrs } = useKitState(props);
+const {sizeClassList} = useKitSize(props);
+const {stateClassList, stateAttrs} = useKitState(props);
 const attrs = useAttrs();
 const slots = useSlots();
+const inputRef = ref<HTMLInputElement | null>(null);
 
 const componentAttrs = computed(() => ({
   ...attrs,
   ...stateAttrs.value,
 }));
 
+const showClearButton = computed(() => (
+    props.clearable
+    && Boolean(props.modelValue)
+    && !props.readonly
+    && !props.disabled
+));
+
 const classList = computed(() => [
   sizeClassList.value,
   stateClassList.value,
   {
     '--icon-left': !!slots['left-icon'],
-    '--icon-right': !!slots['right-icon'],
+    '--icon-right': !!slots['right-icon'] || showClearButton.value,
     '--is-error': props.error,
     '--is-readonly': props.readonly,
   },
@@ -66,6 +82,11 @@ function handleInput(event: Event) {
   const target = event.target as HTMLInputElement;
   emit('update:modelValue', target.value);
 }
+
+function clearInput() {
+  emit('update:modelValue', '');
+  inputRef.value?.focus();
+}
 </script>
 
 <style scoped lang="scss">
@@ -123,6 +144,16 @@ function handleInput(event: Event) {
     color: var(--primary-black-500);
   }
 
+  &__icon--right {
+    display: flex;
+    gap: 8px;
+  }
+
+  &__clear-icon {
+    color: var(--primary-black-500);
+    cursor: pointer;
+  }
+
   @include is-disabled-state {
     #{$input}__icon--right {
       color: var(--primary-black-400);
@@ -135,24 +166,24 @@ function handleInput(event: Event) {
     top: 50%;
     transform: translateY(-50%);
   }
-  
+
   &.--is-error {
 
-      #{$input}__field {
-        border-color: var(--error-red-light-01);
+    #{$input}__field {
+      border-color: var(--error-red-light-01);
 
-        &--focusable {
-          @include focused {
-            border: 1px solid var(--error-red-light-02);
-            outline: 4px solid var(--effects-error-focus);
-          }
+      &--focusable {
+        @include focused {
+          border: 1px solid var(--error-red-light-02);
+          outline: 4px solid var(--effects-error-focus);
         }
       }
+    }
 
-      #{$input}__icon--right > * {
-        color: var(--error-red);
-      }
+    #{$input}__icon--right > * {
+      color: var(--error-red);
     }
+  }
 
   &.--small-size {
     #{$input}__wrapper {
@@ -181,8 +212,12 @@ function handleInput(event: Event) {
 
     #{$input}__icon--right {
       right: 14px;
-      width: 16px;
-      height: 16px;
+      min-height: 16px;
+    }
+
+    #{$input}__clear-icon {
+      width: 20px;
+      height: 20px;
     }
   }
 
@@ -213,8 +248,12 @@ function handleInput(event: Event) {
 
     #{$input}__icon--right {
       right: 14px;
-      width: 20px;
-      height: 20px;
+      min-height: 20px;
+    }
+
+    #{$input}__clear-icon {
+      width: 24px;
+      height: 24px;
     }
   }
 
@@ -245,9 +284,13 @@ function handleInput(event: Event) {
 
     #{$input}__icon--right {
       right: 16px;
-      width: 24px;
-      height: 24px;
+      min-height: 24px;
+    }
+
+    #{$input}__clear-icon {
+      width: 32px;
+      height: 32px;
     }
   }
 }
-</style>
+</style>

package/src/components/BaseInput/README.md

@@ -18,6 +18,9 @@
 - `placeholder: string`  
   Текст-заполнитель для поля ввода.
 
+- `clearable: boolean`
+  Показывает кнопку очистки справа, если значение поля не пустое. Для иконки очистки используется `BaseIcon`.
+
 - `error: string | boolean`  
   Ошибка, которая будет отображаться под полем ввода. Может быть строкой с сообщением об ошибке или булевым значением, где `true` указывает на наличие ошибки.
 
@@ -34,6 +37,9 @@
 - **Иконки слева и справа:**  
   Компонент поддерживает иконки слева и справа от поля ввода через слоты `left-icon` и `right-icon`. Это удобно для отображения дополнительных иконок (например, иконки для показа пароля).
 
+- **Очистка значения:**  
+  При `clearable=true` справа появляется кнопка очистки только когда в поле есть текст. Нажатие очищает `v-model`.
+
 - **Состояния:**  
   Используются CSS-классы для отображения разных состояний поля ввода, таких как фокус, ошибка и состояние "disabled".
 
@@ -54,6 +60,7 @@
 <BaseInput 
   v-model="inputValue" 
   placeholder="Введите текст" 
+  clearable
   :error="errorMessage" 
   :hint="hintMessage" 
   :size="'medium'"
@@ -82,4 +89,4 @@
 
 ---
 
-Этот компонент подходит для создания формы с текстовым вводом, где необходимо отображать иконки, подсказки и ошибки, а также поддерживать несколько размеров и состояний.
+Этот компонент подходит для создания формы с текстовым вводом, где необходимо отображать иконки, подсказки и ошибки, а также поддерживать несколько размеров и состояний.

package/src/components/BaseInputWithSelector/BaseInputWithSelector.vue

@@ -6,6 +6,7 @@
           :modelValue="modelValue"
           :placeholder="placeholder"
           :size="size"
+          :clearable="clearable"
           class="base-input-with-selector__input"
           @update:modelValue="handleInput"
       >
@@ -45,12 +46,14 @@ const props = withDefaults(defineProps<{
     label: string;
     value: string | number;
   }[]
+  clearable?: boolean
   placeholder?: string
   size?: 'small' | 'medium' | 'large'
   error?: string
 }>(), {
   modelValue: '',
   selectedOptionId: '',
+  clearable: false,
   size: 'medium',
   placeholder: '',
 })

package/src/components/BaseSelect/BaseSelect.vue

@@ -289,6 +289,7 @@ const classList = computed( () => [
   sizeClassList.value,
   stateClassList.value,
   styleClassList.value,
+  props.variant,
   {
     '--is-readonly': props.readonly,
     '--is-disabled': actualDisabled.value,
@@ -396,7 +397,7 @@ defineSlots<{
     display: flex;
     align-items: center;
     justify-content: center;
-    color: var(--ui-colors-input-icon-default);
+    color: var(--primary-black-500);
     transition: transform var(--transition);
     transform: translateY(-50%);
   }
@@ -534,5 +535,21 @@ defineSlots<{
       }
     }
   }
+
+  &.variant-blue {
+    #{$select} {
+      &__header {
+        background: var(--primary-blue);
+
+        &_value {
+          color: var(--primary-black-white);
+        }
+      }
+
+      &__placeholder, &__arrow {
+        color: var(--primary-black-white);
+      }
+    }
+  }
 }
 </style>

package/src/types/input.d.ts

@@ -8,6 +8,7 @@ export interface InputProps {
   mask?: string
   type?: string
   placeholder?: string
+  clearable?: boolean
   error?: string | boolean;
   readonly?: boolean
   tooltipOptions?: ITooltipProps
@@ -64,6 +65,7 @@ export interface ICoreSelectBaseProps {
   label?: string
   hint?: string
   searchable?: boolean
+  variant?: 'variant-blue'
 }
 
 export interface ISelectSlotProps {