plugin-ui-for-kzt 0.0.18 → 0.0.20

package/src/components/BaseInputCurrency/BaseInputCurrency.vue

@@ -1,32 +1,33 @@
 <template>
-<div :class="classList">
-    <div class="base-input-currency__wrapper">
-    <div class="base-input-currency__input-container">
-        <span class="base-input-currency__symbol">{{ selectedOption.symbol }}</span>
-        <base-input
-        id="input-currency"
-        type="text"
-        :modelValue="modelValue"
-        v-bind="componentAttrs"
-        v-maska
-        :data-maska="selectedOption.mask"
-        :size="size"
-        :placeholder="placeholder || '0.00'"
-        class="base-input-currency__input"
-        @update:modelValue="handleInput"
-        ></base-input>
+    <div :class="classList">
+        <div class="base-input-currency__wrapper">
+        <div class="base-input-currency__input-container">
+            <span class="base-input-currency__symbol">{{ selectedOption.symbol }}</span>
+            <base-input
+                type="text"
+                :id="id"
+                :modelValue="modelValue"
+                v-bind="componentAttrs"
+                v-maska
+                :data-maska="selectedOption.mask"
+                :size="size"
+                :placeholder="placeholder || '0.00'"
+                :focusable="false"
+                class="base-input-currency__input"
+                @update:modelValue="handleInput"
+            />
+        </div>
+        <base-select
+            id="select-currency"
+            v-model="selectedOptionId"
+            :options="optionsCurrency"
+            :size="size"
+            :error="error"
+            class="base-input-currency__select"
+        >
+        </base-select>
+        </div>
     </div>
-    <base-select
-        id="select-currency"
-        v-model="selectedOptionId"
-        :options="optionsCurrency"
-        :size="size"
-        :error="error"
-        class="base-input-currency__select"
-    >
-    </base-select>
-    </div>
-</div>
 </template>
 
 <script setup lang="ts">
@@ -36,35 +37,34 @@ import BaseInput from '../BaseInput/BaseInput.vue';
 import BaseSelect from '../BaseSelect/BaseSelect.vue';
 import { useKitState } from '../../composables/kit/state';
 import { useKitSize } from '../../composables/kit/size';
-import type { ICoreInputProps } from '../../types/input';
+import type { ICoreInputProps, IOptionsCurrency } from '../../types/input';
 
 const props = withDefaults(defineProps<ICoreInputProps>(), {
-size: 'medium',
-type: 'text',
-modelValue: '',
-placeholder: '0.00',
-error: '',
-hint: '',
+    size: 'medium',
+    type: 'text',
+    modelValue: '',
+    placeholder: '0.00',
+    error: '',
 });
 
 const emit: (event: 'update:modelValue', value: string) => void = defineEmits();
 
-const optionsCurrency = ref([
-{ id: '1', name: 'KZT', value: 'kzt', mask: '# ##0.##', symbol: '₸' },
-{ id: '2', name: 'RUB', value: 'rub', mask: '# ##0.##', symbol: '₽' },
-{ id: '3', name: 'KGS', value: 'kgs', mask: '# ##0.##', symbol: '⃀' },
-{ id: '4', name: 'UZS', value: 'uzs', mask: '# ##0.##', symbol: 'сў' },
+const optionsCurrency = ref<IOptionsCurrency[]>([
+    { id: '1', name: 'KZT', value: 'KZT', mask: '# ##0.##', symbol: '₸' },
+    { id: '2', name: 'RUB', value: 'RUB', mask: '# ##0.##', symbol: '₽' },
+    { id: '3', name: 'KGS', value: 'KGS', mask: '# ##0.##', symbol: '⃀' },
+    { id: '4', name: 'UZS', value: 'UZS', mask: '# ##0.##', symbol: 'сў' },
 ]);
 
-const selectedOption = ref(optionsCurrency.value[0]);
+const selectedOption = ref<IOptionsCurrency>(optionsCurrency.value[0]);
 
-const selectedOptionId = ref(selectedOption.value.id);
+const selectedOptionId = ref<IOptionsCurrency['id']>(selectedOption.value.id);
 
-watch(selectedOptionId, (newId) => {
-const newOption = optionsCurrency.value.find((option) => option.id === newId);
-if (newOption) {
-    selectedOption.value = newOption;
-}
+watch(selectedOptionId, (newId: IOptionsCurrency['id']) => {
+    const newOption = optionsCurrency.value.find((option: IOptionsCurrency) => option.id === newId);
+    if (newOption) {
+        selectedOption.value = newOption;
+    }
 });
 
 const { stateClassList, stateAttrs } = useKitState(props);
@@ -74,25 +74,23 @@ const attrs = useAttrs();
 const componentAttrs = computed(() => ({
 ...attrs,
 ...stateAttrs.value,
-label: props.label,
 error: props.error,
-hint: props.hint,
 placeholder: props.placeholder,
 }));
 
 const classList = computed(() => [
-stateClassList.value,
-sizeClassList.value,
-'base-input-currency',
+    stateClassList.value,
+    sizeClassList.value,
+    'base-input-currency'
 ]);
 
 const modelValue = computed({
-get: () => props.modelValue,
-set: (value) => emit('update:modelValue', value),
+    get: () => props.modelValue,
+    set: (value) => emit('update:modelValue', value),
 });
 
 const handleInput = (value: string) => {
-emit('update:modelValue', value);
+    emit('update:modelValue', value);
 };
 </script>
 
@@ -114,6 +112,7 @@ width: 100%;
 &__input-container {
     display: flex;
     align-items: center;
+    flex-grow: 1;
 }
 
 &__symbol {
@@ -155,6 +154,7 @@ width: 100%;
         :deep(.base-select) {
             width: 71px;
         }
+
         &__symbol {
             font-size: var(--typography-text-s-regular);
         }
@@ -170,6 +170,7 @@ width: 100%;
         :deep(.base-select) {
             width: 75px;
         }
+
         &__symbol {
             font-size: var(--typography-text-m-regular);
         }
@@ -185,6 +186,7 @@ width: 100%;
         :deep(.base-select) {
             width: 87px;
         }
+
         &__symbol {
             font-size: var(--typography-text-l-regular);
         }

package/src/components/BaseInputEmail/BaseInputEmail.vue

@@ -47,8 +47,6 @@ const props = withDefaults(defineProps<ICoreInputProps>(), {
   type: 'email',
   modelValue: '',
   placeholder: '' as string,
-  error: '',
-  hint: '',
 });
 
 const emit = defineEmits<{
@@ -64,7 +62,7 @@ function onUpdateModelValue(value: string) {
   emit('update:modelValue', value);
 }
 
-const emailError = ref('');
+const emailError = ref<string>('');
 
 watch(modelValue, (value) => {
   if (!/^[\w\-.]+@(?:[\w\-]+\.)+[\w\-]{2,4}$/.test(String(value))) {    
@@ -77,7 +75,7 @@ watch(modelValue, (value) => {
 
 <style scoped lang="scss">
   .base-input-email {
-    width: max-content;
+    width: 100%;
 
     &__tooltip-container {
       position: relative;

package/src/components/BaseInputPhone/BaseInputPhone.vue

@@ -9,11 +9,11 @@
                 :error="error"
                 class="base-input-phone__select"
                 >
-                    <template #iconItem="{ item }: ICoreButtonProps">
-                    <base-icon
-                        :name="item.icon"
-                        :size="size"
-                    />
+                    <template #iconItem="{ item }: IIconProps">
+                        <base-icon
+                            :name="item.icon"
+                            :size="size"
+                        />
                     </template>
                 </base-select>
                 <base-input
@@ -24,6 +24,7 @@
                     :mask="selectedOption.mask"
                     :size="size"
                     :placeholder="placeholder || ''"
+                    :focusable="false"
                     class="base-input-phone__input"
                     @update:modelValue="handleInput"
                 ></base-input>
@@ -37,40 +38,39 @@ import BaseInput from '../BaseInput/BaseInput.vue';
 import BaseSelect from '../BaseSelect/BaseSelect.vue';
 import { useKitState } from '../../composables/kit/state';
 import { useKitSize } from '../../composables/kit/size';
-import type { ICoreInputProps } from '../../types/input';
+import type { ICoreInputProps, IOptionsPhone } from '../../types/input';
 
-interface ICoreButtonProps {
-  item:{
-    icon:string
-  }
+interface IIconProps {
+    item:{
+        icon:string
+    }
 }
+
 const props = withDefaults(defineProps<ICoreInputProps>(), {
     size: 'medium',
     type: 'text',
     modelValue: '',
-    placeholder: '' as string,
-    error: '',
-    hint: '',
+    placeholder: '',
 });
 
 const emit: (event: 'update:modelValue', value: string) => void = defineEmits();
 
-const optionsPhone = ref([
-    { id: '1', name: 'KZ', value: 'kz', mask: '+7 (###) ###-##-##', icon: 'kz' },
-    { id: '2', name: 'RU', value: 'ru', mask: '+7 (###) ###-##-##', icon: 'ru' },
-    { id: '3', name: 'KG', value: 'kg', mask:'+996 (###) ###-###', icon: 'kg' },
-    { id: '4', name: 'UZ', value: 'uz', mask: '+998 (##) ###-##-##', icon: 'uz' },
+const optionsPhone = ref<IOptionsPhone[]>([
+    { id: '1', name: 'KZ', value: 'KZ', mask: '+7 (###) ###-##-##', icon: 'KZ' },
+    { id: '2', name: 'RU', value: 'RU', mask: '+7 (###) ###-##-##', icon: 'RU' },
+    { id: '3', name: 'KG', value: 'KG', mask:'+996 (###) ###-###', icon: 'KG' },
+    { id: '4', name: 'UZ', value: 'UZ', mask: '+998 (##) ###-##-##', icon: 'UZ' },
 ]);
 
-const selectedOption = ref(optionsPhone.value[0]);
+const selectedOption = ref<IOptionsPhone>(optionsPhone.value[0]);
 
-const selectedOptionId = ref(selectedOption.value.id);
+const selectedOptionId = ref<IOptionsPhone['id']>(selectedOption.value.id);
 
 watch(selectedOptionId, (newId) => {
-  const newOption = optionsPhone.value.find((option) => option.id === newId);
-  if (newOption) {
-    selectedOption.value = newOption;
-  }
+    const newOption = optionsPhone.value.find((option) => option.id === newId);
+    if (newOption) {
+        selectedOption.value = newOption;
+    }
 });
 
 const { stateClassList, stateAttrs } = useKitState(props);
@@ -80,21 +80,20 @@ const attrs = useAttrs();
 const componentAttrs = computed(() => ({
     ...attrs,
     ...stateAttrs.value,
-    label: props.label,
     error: props.error,
-    hint: props.hint,
+    focusable: props.focusable,
     placeholder: props.placeholder,
 }));
 
 const classList = computed(() => [
     stateClassList.value,
     sizeClassList.value,
-    'base-input-phone',
+    'base-input-phone'
 ]);
 
 const modelValue = computed({
-  get: () => props.modelValue,
-  set: value => emit('update:modelValue', value),
+    get: () => props.modelValue,
+    set: value => emit('update:modelValue', value),
 });
 const handleInput = (value: string) => {
     emit('update:modelValue', value);
@@ -123,11 +122,7 @@ const handleInput = (value: string) => {
         :deep(.base-input__field) {
             border-top-left-radius: 0 !important;
             border-bottom-left-radius: 0 !important;
-            border-left: none;
-        }
-
-        :deep(.base-select__hint) {
-            display: none;
+            border-left: none !important;
         }
     }
 
@@ -145,10 +140,6 @@ const handleInput = (value: string) => {
                 width: 71px;
             }
         }
-        :deep(.base-input__label-text), 
-        :deep(.base-input__hint) {
-            transform: translateX(-54px);
-        }
     }
 
     &.--medium-size {
@@ -157,11 +148,6 @@ const handleInput = (value: string) => {
                 width: 75px;
             }
         }
-
-        :deep(.base-input__label-text), 
-        :deep(.base-input__hint) {
-            transform: translateX(-75px);
-        }
     }
 
     &.--large-size {
@@ -170,11 +156,6 @@ const handleInput = (value: string) => {
                 width: 87px;
             }
         }
-
-        :deep(.base-input__label-text), 
-        :deep(.base-input__hint) {
-            transform: translateX(-86px);
-        }
     }
 }
 </style>

package/src/components/BaseSelect/BaseSelect.vue

@@ -1,8 +1,6 @@
 <template>
   <div class="base-select" :class="[classList]">
     <div class="base-select__wrapper">
-      <label v-if="label" :for="id" class="base-select__label">{{ label }}</label>
-
       <base-dropdown
         v-model="dropdownVisible"
         transition-name="top"
@@ -17,7 +15,7 @@
           >
             <slot
               name="header"
-              :value="actualOption"
+              :value="actualOption ? [actualOption] : undefined"
             >
               <div v-if="$slots.headerIcon" class="base-select__header_prefix_icon">
                 <slot name="headerIcon" />
@@ -63,7 +61,7 @@
               key-field="id"
               class="base-select__list"
             >
-            <template #default="{ item, index, active } : SlotProps">
+            <template #default="{ item, index, active } : ISelectSlotProps">
               <dynamic-scroller-item
                   :item="item"
                   :active="active"
@@ -90,10 +88,6 @@
           </div>
         </template>
       </base-dropdown>
-
-      <div v-if="(error && typeof error === 'string') || hint" class="base-select__hint">
-        {{ error || hint }}
-      </div>
     </div>
   </div>
 </template>
@@ -102,20 +96,13 @@
 import { computed, ref, watch } from 'vue';
 import 'vue-virtual-scroller/dist/vue-virtual-scroller.css';
 import { DynamicScroller, DynamicScrollerItem } from 'vue-virtual-scroller';
-import type { ICoreSelectProps, TSelectValue, ICoreSelectBaseProps } from '../../types/input';
+import type { ICoreSelectProps, TSelectValue, ICoreSelectBaseProps, ICoreSelectOption, ISelectSlotProps } from '../../types/input';
 import BaseDropdown from '../BaseDropdown/BaseDropdown.vue';
 import BaseOpenedListItem from '../BaseOpenedListItem/BaseOpenedListItem.vue';
 import { useKitSize } from '../../composables/kit/size';
 import { useKitState } from '../../composables/kit/state';
 import { useKitStyle } from '../../composables/kit/style';
 
-// Определяем тип для slotProps
-interface SlotProps {
-  item: ICoreSelectBaseProps;
-  index: number;
-  active: boolean;
-}
-
 const props = withDefaults(defineProps<ICoreSelectProps & {
   modelValue?: TSelectValue
 }>(), {
@@ -130,11 +117,11 @@ const emit = defineEmits<{
 
 const actualValue = ref<TSelectValue>(props.modelValue ?? '');
 const actualOption = computed(() =>
-  props.options?.find((item: ICoreSelectBaseProps) => item.id === actualValue.value) || null
+  props.options?.find((item: ICoreSelectOption) => item?.id === actualValue.value) || null
 );
 
 watch(() => props.modelValue, (val) => {
-  actualValue.value = val;
+  actualValue.value = val ?? '';
 }, { immediate: true });
 
 function handleInput(value: TSelectValue) {
@@ -152,7 +139,7 @@ const { styleClassList } = useKitStyle(props);
 const listItemAttrs = computed(() => (item: ICoreSelectBaseProps) => ({
   icon: item.icon,
   active: actualValue.value === item.id,
-  title: item.name || item.label || '',
+  title: item.name || '',
   style: item.style,
   disabled: item.disabled,
   class: 'base-select__item',
@@ -170,8 +157,10 @@ const classList = computed(() => [
 ]);
 
 defineSlots<{
-  default(props: SlotProps): any;
+  default(props: ISelectSlotProps): any;
   iconItem(props: { item: ICoreSelectBaseProps }): any;
+  header(props: { value: ICoreSelectProps['options'] }): any;
+  headerIcon(): any;
 }>();
 </script>
 
@@ -205,14 +194,6 @@ defineSlots<{
   }
 
   &.--is-error {
-    #{$select}__hint {
-      color: var(--error-red);
-    }
-
-    #{$select}__label {
-      border-color: var(--error-red-light-01);
-    }
-
     #{$select}__arrow > * {
       color: var(--error-red);
     }
@@ -276,14 +257,6 @@ defineSlots<{
 
   &.--small-size {
     #{$select} {
-      &__label {
-        font: var(--typography-text-s-medium);
-      }
-
-      &__hint {
-        font: var(--typography-text-s-regular);
-      }
-
       &__header_value {
         font: var(--typography-text-m-regular);
       }
@@ -307,14 +280,6 @@ defineSlots<{
 
   &.--medium-size {
     #{$select} {
-      &__label {
-        font: var(--typography-text-s-medium);
-      }
-
-      &__hint {
-        font: var(--typography-text-s-regular);
-      }
-
       &__header_value {
         font: var(--typography-text-m-regular);
       }
@@ -333,14 +298,6 @@ defineSlots<{
 
   &.--large-size {
     #{$select} {
-      &__label {
-        font: var(--typography-text-m-medium);
-      }
-
-      &__hint {
-        font: var(--typography-text-m-regular);
-      }
-
       &__header_value {
         font: var(--typography-text-l-regular);
       }

package/src/components/BaseSiteInput/BaseSiteInput.vue

@@ -9,9 +9,10 @@
             <base-input 
                 v-bind="{...$props, ...$attrs}"
                 v-model="modelValue"
-                id="url"
+                :id="id"
                 type="url"
                 :error="urlError || props.error"
+                class="base-site-input__input"
                 @update:modelValue="onUpdateModelValue"
             />
         </div>
@@ -27,19 +28,19 @@ import type { ICorePropsBaseSiteInput } from '../../types/input'
 const props = withDefaults(defineProps<ICorePropsBaseSiteInput>(),{
     size: 'medium',
     modelValue: '',
-    error: '',
+    focusable: true,
 })
 
 const emit = defineEmits<{
   (event: 'update:modelValue', value: string): void;
 }>();
 
-const urlError = ref('');
+const urlError = ref<string>('');
 const { sizeClassList } = useKitSize(props);
 
 const classList = computed(() => [
     sizeClassList.value,
-    'base-site-input',
+    'base-site-input'
 ]);
 
 const normalizedValue = computed(() => {
@@ -76,7 +77,7 @@ watch(modelValue, (value) => {
 .base-site-input {
     $input: &;
 
-    width: fit-content;
+    width: 100%;
 
     &__wrapper {
         display: flex;
@@ -91,6 +92,10 @@ watch(modelValue, (value) => {
         }
     }
 
+    &__input {
+        flex-grow: 1;
+    }
+
     &__url {
         color: var(--primary-text-tertiary);
     }
@@ -120,11 +125,6 @@ watch(modelValue, (value) => {
                 padding: var(--spacing-s) var(--spacing-m) var(--spacing-s) var(--spacing-2l);
             }
         }
-
-        :deep(.base-input__label-text), 
-        :deep(.base-input__hint) {
-            transform: translateX(-75px);
-        }
     }
 
     &.--medium-size {
@@ -140,11 +140,6 @@ watch(modelValue, (value) => {
                 padding: var(--spacing-m) var(--spacing-m) var(--spacing-m) var(--spacing-2l);
             }
         }
-
-        :deep(.base-input__label-text), 
-        :deep(.base-input__hint) {
-            transform: translateX(-75px);
-        }
     }
 
     &.--large-size {
@@ -160,11 +155,6 @@ watch(modelValue, (value) => {
                 padding: var(--spacing-2l) var(--spacing-m) var(--spacing-2l) var(--spacing-l);
             }
         }
-
-        :deep(.base-input__label-text), 
-        :deep(.base-input__hint) {
-            transform: translateX(-83px);
-        }
     }
 }
 </style>

package/src/components/BaseTextarea/BaseTextarea.vue

@@ -1,8 +1,6 @@
 <template>
   <div class="base-textarea" :class="classList">
-    <label class="base-textarea__label" :for="id">
-      <span v-if="label" class="base-textarea__label-text">{{ label }}</span>
-
+    <div class="base-textarea__wrapper">
       <div class="base-textarea__wrapper">
         <textarea
           :id="id"
@@ -17,11 +15,7 @@
           {{ modelValue.length }}/{{ maxLength }}
         </span>
       </div>
-
-      <div v-if="(error && typeof error === 'string') || hint" class="base-textarea__hint">
-        {{ error || hint }}
-      </div>
-    </label>
+    </div>
   </div>
 </template>
 
@@ -34,8 +28,6 @@ import { useKitSize } from '../../composables/kit/size';
 const props = withDefaults(defineProps<ICoreTextareaProps & { maxLength?: number }>(), {
   modelValue: '',
   placeholder: '' as string,
-  error: '',
-  hint: '',
   size: 'medium',
 });
 
@@ -73,11 +65,6 @@ function handleInput(event: Event) {
     resize: none;
   }
 
-  &__hint {
-    align-self: flex-start;
-    font: var(--typography-text-s-regular);
-  }
-
   &__wrapper {
     display: flex;
     position: relative;
@@ -113,10 +100,6 @@ function handleInput(event: Event) {
         color: var(--primary-text-tertiary);
         background: var(--primary-black-100);
       }
-
-      #{$textarea}__hint {
-        color: var(--primary-text-secondary);
-      }
     }
   }
 
@@ -126,7 +109,7 @@ function handleInput(event: Event) {
     color: var(--primary-text-quaternary);
   }
 
-  &__label {
+  &__wrapper {
     display: flex;
     flex-direction: column;
     gap: 6px;
@@ -135,17 +118,7 @@ function handleInput(event: Event) {
     height: 100%;
   }
 
-  &__label-text {
-    align-self: flex-start;
-    font: var(--typography-text-s-medium);
-    color: var(--primary-text-primary);
-  }
-
   &.--is-error {
-    #{$textarea}__hint {
-      color: var(--error-red);
-    }
-
     #{$textarea}__field {
       border-color: var(--error-red-light-01);
 

package/src/components/BaseUpload/BaseUpload.vue

@@ -152,7 +152,7 @@ const handleFileUpload = (event: Event) => {
     Array.from(files).forEach((file) => {
       const fileExtension = `.${file.name.split('.').pop()?.toLowerCase() || ''}`;
       if (!props.acceptedFormats.includes(fileExtension)) {
-        errorMessage.value = `Недопустимый формат файла: ${file.name}. Допустимы: ${props.acceptedFormats.join(', ')}.`;
+        errorMessage.value = `Недопустимый формат файла: ${file.name}. Допустимый: ${props.acceptedFormats.join(', ')}.`;
         return;
       }