plugin-ui-for-kzt 0.0.20 → 0.0.21

package/src/components/BaseInputCurrency/BaseInputCurrency.vue

@@ -1,32 +1,30 @@
 <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
-                type="text"
-                :id="id"
-                :modelValue="modelValue"
-                v-bind="componentAttrs"
-                v-maska
-                :data-maska="selectedOption.mask"
+            <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>
+            <base-select
+                id="select-currency"
+                v-model="selectedOptionId"
+                :options="optionsCurrency"
                 :size="size"
-                :placeholder="placeholder || '0.00'"
-                :focusable="false"
-                class="base-input-currency__input"
-                @update:modelValue="handleInput"
+                :error="error"
+                class="base-input-currency__select"
             />
         </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>
 
@@ -37,7 +35,7 @@ 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, IOptionsCurrency } from '../../types/input';
+import type { ICoreInputProps } from '../../types/input';
 
 const props = withDefaults(defineProps<ICoreInputProps>(), {
     size: 'medium',
@@ -45,23 +43,24 @@ const props = withDefaults(defineProps<ICoreInputProps>(), {
     modelValue: '',
     placeholder: '0.00',
     error: '',
+    hint: '',
 });
 
 const emit: (event: 'update:modelValue', value: string) => void = defineEmits();
 
-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 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 selectedOption = ref<IOptionsCurrency>(optionsCurrency.value[0]);
+const selectedOption = ref(optionsCurrency.value[0]);
 
-const selectedOptionId = ref<IOptionsCurrency['id']>(selectedOption.value.id);
+const selectedOptionId = ref(selectedOption.value.id);
 
-watch(selectedOptionId, (newId: IOptionsCurrency['id']) => {
-    const newOption = optionsCurrency.value.find((option: IOptionsCurrency) => option.id === newId);
+watch(selectedOptionId, (newId) => {
+    const newOption = optionsCurrency.value.find((option) => option.id === newId);
     if (newOption) {
         selectedOption.value = newOption;
     }
@@ -72,16 +71,21 @@ const { sizeClassList } = useKitSize(props);
 const attrs = useAttrs();
 
 const componentAttrs = computed(() => ({
-...attrs,
-...stateAttrs.value,
-error: props.error,
-placeholder: props.placeholder,
+    ...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'
+    'base-input-currency',
+    {
+        '--is-has-hint': !!props.hint,
+    }
 ]);
 
 const modelValue = computed({
@@ -112,7 +116,6 @@ width: 100%;
 &__input-container {
     display: flex;
     align-items: center;
-    flex-grow: 1;
 }
 
 &__symbol {
@@ -150,6 +153,14 @@ width: 100%;
 }
 
 &.--small-size {
+    &.--is-has-hint {
+        #{$input} {
+            &__select {
+                margin-bottom: 26px;
+            }
+        }
+    }
+
     #{$input} {
         :deep(.base-select) {
             width: 71px;
@@ -158,6 +169,10 @@ width: 100%;
         &__symbol {
             font-size: var(--typography-text-s-regular);
         }
+
+        &.--is-error {
+            margin-bottom: 26px;
+        }
     }
 
     :deep(.base-input__field) {
@@ -166,6 +181,14 @@ width: 100%;
 }
 
 &.--medium-size {
+    &.--is-has-hint {
+        #{$input} {
+            &__select {
+                margin-bottom: 26px;
+            }
+        }
+    }
+
     #{$input} {
         :deep(.base-select) {
             width: 75px;
@@ -174,6 +197,10 @@ width: 100%;
         &__symbol {
             font-size: var(--typography-text-m-regular);
         }
+
+        &.--is-error {
+            margin-bottom: 26px;
+        }
     }
 
     :deep(.base-input__field) {
@@ -182,6 +209,14 @@ width: 100%;
 }
 
 &.--large-size {
+    &.--is-has-hint {
+        #{$input} {
+            &__select {
+                margin-bottom: 30px;
+            }
+        }
+    }
+
     #{$input} {
         :deep(.base-select) {
             width: 87px;
@@ -190,6 +225,10 @@ width: 100%;
         &__symbol {
             font-size: var(--typography-text-l-regular);
         }
+
+        &.--is-error {
+            margin-bottom: 30px;
+        }
     }
 
     :deep(.base-input__field) {

package/src/components/BaseInputEmail/BaseInputEmail.vue

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

package/src/components/BaseInputPhone/BaseInputPhone.vue

@@ -9,11 +9,11 @@
                 :error="error"
                 class="base-input-phone__select"
                 >
-                    <template #iconItem="{ item }: IIconProps">
-                        <base-icon
-                            :name="item.icon"
-                            :size="size"
-                        />
+                    <template #iconItem="{ item }: ICoreButtonProps">
+                    <base-icon
+                        :name="item.icon"
+                        :size="size"
+                    />
                     </template>
                 </base-select>
                 <base-input
@@ -24,7 +24,6 @@
                     :mask="selectedOption.mask"
                     :size="size"
                     :placeholder="placeholder || ''"
-                    :focusable="false"
                     class="base-input-phone__input"
                     @update:modelValue="handleInput"
                 ></base-input>
@@ -38,39 +37,40 @@ 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, IOptionsPhone } from '../../types/input';
+import type { ICoreInputProps } from '../../types/input';
 
-interface IIconProps {
-    item:{
-        icon:string
-    }
+interface ICoreButtonProps {
+  item:{
+    icon:string
+  }
 }
-
 const props = withDefaults(defineProps<ICoreInputProps>(), {
     size: 'medium',
     type: 'text',
     modelValue: '',
-    placeholder: '',
+    placeholder: '' as string,
+    error: '',
+    hint: '',
 });
 
 const emit: (event: 'update:modelValue', value: string) => void = defineEmits();
 
-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 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 selectedOption = ref<IOptionsPhone>(optionsPhone.value[0]);
+const selectedOption = ref(optionsPhone.value[0]);
 
-const selectedOptionId = ref<IOptionsPhone['id']>(selectedOption.value.id);
+const selectedOptionId = ref(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,20 +80,24 @@ const attrs = useAttrs();
 const componentAttrs = computed(() => ({
     ...attrs,
     ...stateAttrs.value,
+    label: props.label,
     error: props.error,
-    focusable: props.focusable,
+    hint: props.hint,
     placeholder: props.placeholder,
 }));
 
 const classList = computed(() => [
     stateClassList.value,
     sizeClassList.value,
-    'base-input-phone'
+    'base-input-phone',
+    {
+        '--is-has-hint': !!props.hint,
+    }
 ]);
 
 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);
@@ -122,7 +126,11 @@ const handleInput = (value: string) => {
         :deep(.base-input__field) {
             border-top-left-radius: 0 !important;
             border-bottom-left-radius: 0 !important;
-            border-left: none !important;
+            border-left: none;
+        }
+
+        :deep(.base-select__hint) {
+            display: none;
         }
     }
 
@@ -135,27 +143,79 @@ const handleInput = (value: string) => {
     }
 
     &.--small-size {
+        &.--is-has-hint {
+            #{$input} {
+                &__select {
+                    margin-bottom: 26px;
+                }
+            }
+        }
+
         #{$input} {
             :deep(.base-select) {
                 width: 71px;
             }
+
+            &__select {
+                &.--is-error {
+                    margin-bottom: 26px;
+                }
+            }
+        }
+        :deep(.base-input__label-text), 
+        :deep(.base-input__hint) {
+            transform: translateX(-54px);
         }
     }
 
     &.--medium-size {
+        &.--is-has-hint {
+            #{$input} {
+                &__select {
+                    margin-bottom: 26px;
+                }
+            }
+        }
+
         #{$input} {
             &__select {
                 width: 75px;
+
+                &.--is-error {
+                    margin-bottom: 26px;
+                }
             }
         }
+
+        :deep(.base-input__label-text), 
+        :deep(.base-input__hint) {
+            transform: translateX(-75px);
+        }
     }
 
     &.--large-size {
+        &.--is-has-hint {
+            #{$input} {
+                &__select {
+                    margin-bottom: 30px;
+                }
+            }
+        }
+
         #{$input} {
             &__select {
                 width: 87px;
+
+                &.--is-error {
+                    margin-bottom: 30px;
+                }
             }
         }
+
+        :deep(.base-input__label-text), 
+        :deep(.base-input__hint) {
+            transform: translateX(-86px);
+        }
     }
 }
 </style>

package/src/components/BaseSegmentedButtons/BaseSegmentedButtons.vue

@@ -5,6 +5,7 @@
             v-for="option in options"
             :key="option.value"
             v-bind="buttonAttrs"
+            :disabled="option.disabled"
             :color="modelValue === option.value ? 'primary' : 'secondary'"
             @click="handleClick(option.value)"
             >

package/src/components/BaseSelect/BaseSelect.vue

@@ -1,6 +1,8 @@
 <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"
@@ -15,7 +17,7 @@
           >
             <slot
               name="header"
-              :value="actualOption ? [actualOption] : undefined"
+              :value="actualOption"
             >
               <div v-if="$slots.headerIcon" class="base-select__header_prefix_icon">
                 <slot name="headerIcon" />
@@ -61,7 +63,7 @@
               key-field="id"
               class="base-select__list"
             >
-            <template #default="{ item, index, active } : ISelectSlotProps">
+            <template #default="{ item, index, active } : SlotProps">
               <dynamic-scroller-item
                   :item="item"
                   :active="active"
@@ -88,6 +90,10 @@
           </div>
         </template>
       </base-dropdown>
+
+      <div v-if="(error && typeof error === 'string') || hint" class="base-select__hint">
+        {{ error || hint }}
+      </div>
     </div>
   </div>
 </template>
@@ -96,13 +102,20 @@
 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, ICoreSelectOption, ISelectSlotProps } from '../../types/input';
+import type { ICoreSelectProps, TSelectValue, ICoreSelectBaseProps } 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
 }>(), {
@@ -117,11 +130,11 @@ const emit = defineEmits<{
 
 const actualValue = ref<TSelectValue>(props.modelValue ?? '');
 const actualOption = computed(() =>
-  props.options?.find((item: ICoreSelectOption) => item?.id === actualValue.value) || null
+  props.options?.find((item: ICoreSelectBaseProps) => item.id === actualValue.value) || null
 );
 
 watch(() => props.modelValue, (val) => {
-  actualValue.value = val ?? '';
+  actualValue.value = val;
 }, { immediate: true });
 
 function handleInput(value: TSelectValue) {
@@ -139,7 +152,7 @@ const { styleClassList } = useKitStyle(props);
 const listItemAttrs = computed(() => (item: ICoreSelectBaseProps) => ({
   icon: item.icon,
   active: actualValue.value === item.id,
-  title: item.name || '',
+  title: item.name || item.label || '',
   style: item.style,
   disabled: item.disabled,
   class: 'base-select__item',
@@ -157,10 +170,8 @@ const classList = computed(() => [
 ]);
 
 defineSlots<{
-  default(props: ISelectSlotProps): any;
+  default(props: SlotProps): any;
   iconItem(props: { item: ICoreSelectBaseProps }): any;
-  header(props: { value: ICoreSelectProps['options'] }): any;
-  headerIcon(): any;
 }>();
 </script>
 
@@ -194,6 +205,14 @@ defineSlots<{
   }
 
   &.--is-error {
+    #{$select}__hint {
+      color: var(--error-red);
+    }
+
+    #{$select}__label {
+      border-color: var(--error-red-light-01);
+    }
+
     #{$select}__arrow > * {
       color: var(--error-red);
     }
@@ -257,6 +276,14 @@ 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);
       }
@@ -280,6 +307,14 @@ 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);
       }
@@ -298,6 +333,14 @@ 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);
       }