plugin-ui-for-kzt 0.0.21 → 0.0.23

package/src/components/BaseInputCurrency/BaseInputCurrency.vue

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