plugin-ui-for-kzt 0.0.57 → 0.0.58

package/dist/store/modal.d.ts

@@ -36,7 +36,7 @@ export declare const useModalStore: import("pinia").StoreDefinition<"modal", {
                 template?: string | object | undefined;
                 render?: Function | undefined;
                 components?: Record<string, import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions, {}, any>> | undefined;
-                directives?: Record<string, import("vue").Directive<any, any, string, string>> | undefined;
+                directives?: Record<string, import("vue").Directive<any, any, string, any>> | undefined;
                 inheritAttrs?: boolean | undefined;
                 emits?: any;
                 slots?: {} | undefined;
@@ -113,18 +113,18 @@ export declare const useModalStore: import("pinia").StoreDefinition<"modal", {
                 filters?: Record<string, Function> | undefined;
                 mixins?: any[] | undefined;
                 extends?: any;
-                beforeCreate?: (() => void) | undefined;
-                created?: (() => void) | undefined;
-                beforeMount?: (() => void) | undefined;
-                mounted?: (() => void) | undefined;
-                beforeUpdate?: (() => void) | undefined;
-                updated?: (() => void) | undefined;
-                activated?: (() => void) | undefined;
-                deactivated?: (() => void) | undefined;
-                beforeDestroy?: (() => void) | undefined;
-                beforeUnmount?: (() => void) | undefined;
-                destroyed?: (() => void) | undefined;
-                unmounted?: (() => void) | undefined;
+                beforeCreate?: (() => any) | undefined;
+                created?: (() => any) | undefined;
+                beforeMount?: (() => any) | undefined;
+                mounted?: (() => any) | undefined;
+                beforeUpdate?: (() => any) | undefined;
+                updated?: (() => any) | undefined;
+                activated?: (() => any) | undefined;
+                deactivated?: (() => any) | undefined;
+                beforeDestroy?: (() => any) | undefined;
+                beforeUnmount?: (() => any) | undefined;
+                destroyed?: (() => any) | undefined;
+                unmounted?: (() => any) | undefined;
                 renderTracked?: ((e: import("vue").DebuggerEvent) => void) | undefined;
                 renderTriggered?: ((e: import("vue").DebuggerEvent) => void) | undefined;
                 errorCaptured?: ((err: unknown, instance: import("vue").ComponentPublicInstance | null, info: string) => boolean | void) | undefined;

package/example/App.vue

@@ -8,6 +8,20 @@
       />
     </div>
     <section>
+      <BaseInput
+          id="input-default"
+          v-model="demoValues.inputDefault"
+          placeholder="Default input"
+      />
+
+      <BaseInput
+          id="input-clearable"
+          v-model="demoValues.inputClearable"
+          placeholder="Clearable input"
+          size="small"
+          clearable
+      />
+
       <BaseInputCalendar
           id="input-calendar"
           v-model="demoValues.calendar"
@@ -38,7 +52,25 @@
         placeholder="Поиск..."
     >
       <template #left-icon>
-        <BaseIcon name="search" size="extra-small"/>
+        <BaseIcon name="search" size="large"/>
+      </template>
+    </BaseInputWithSelector>
+
+    <BaseInputWithSelector
+        v-model="clearableSearch"
+        v-model:selectedOptionId="clearableSearchType"
+        size="small"
+        clearable
+        :options="[
+           { id: 'iin', name: 'ИИН', value: 'iin' },
+           { id: 'bin', name: 'БИН', value: 'bin' },
+           { id: 'number', name: '#', value: '#' },
+        ]"
+        @search="handleSearch"
+        placeholder="Clearable search..."
+    >
+      <template #left-icon>
+        <BaseIcon name="search" size="large"/>
       </template>
     </BaseInputWithSelector>
   </div>
@@ -51,11 +83,14 @@ import BaseInputCalendar from '../src/components/BaseInputCalendar/BaseInputCale
 import MyCustomModal from './MyCustomModal.vue';
 import BaseIcon from "../src/components/BaseIcon/BaseIcon.vue";
 import BaseInputWithSelector from "../src/components/BaseInputWithSelector/BaseInputWithSelector.vue";
+import BaseInput from "../src/components/BaseInput/BaseInput.vue";
 
 const { open } = useModal();
 
 const search = ref<string>( '' );
 const searchType = ref<string | number>( "iin" );
+const clearableSearch = ref<string>( 'Search text' );
+const clearableSearchType = ref<string | number>( "bin" );
 
 function handleSearch( { value, type }: { value: string; type: string | number } ) {
   console.log( 'DEBOUNCED SEARCH:', value, type )
@@ -70,6 +105,8 @@ const iconOptions = [
 
 const demoValues = ref( {
   icons: iconOptions[0].id,
+  inputDefault: '',
+  inputClearable: 'Text to clear',
   textarea: 'Тестовый текст',
   calendar: new Date(),
   calendarDisabled: new Date(),
@@ -125,4 +162,4 @@ const demoValues = ref( {
   gap: var(--spacing-xs);
   justify-content: flex-end;
 }
-</style>
+</style>

package/package.json

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

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

@@ -397,7 +397,7 @@ defineSlots<{
     display: flex;
     align-items: center;
     justify-content: center;
-    color: #667085;
+    color: var(--primary-black-500);
     transition: transform var(--transition);
     transform: translateY(-50%);
   }

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

package/.claude/settings.local.json

@@ -1,7 +0,0 @@
-{
-  "permissions": {
-    "allow": [
-      "Bash(npm run build:*)"
-    ]
-  }
-}